mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Tweak network status styles

Browse source 
Remove inline styles
Use flexbox in the left pane

// FREEBIE
This commit is contained in:
lilia 2017-04-11 16:24:06 -07:00
parent cce1fe5c4b
commit 5d1e770307
4 changed files with 59 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
background.html
View file

@ -25,8 +25,8 @@
</div>
</div>
<div class='content'>
<div class='conversations scrollable inbox'></div>
<div class='conversations scrollable search-results hide'>
<div class='conversations inbox'></div>
<div class='conversations search-results hide'>
<div class='new-contact contact hide'></div>
</div>
</div>
@ -492,8 +492,8 @@
</script>
<script type='text/x-tmpl-mustache' id='networkStatus'>
<div class='network-status-message' style='{{^instructions}}margin-top:3px;{{/instructions}}{{#instructions}}margin-top:-6px{{/instructions}}'>
<h3 style='{{^instructions}}font-size:17px;{{/instructions}}'>{{ message }}</h3>
<div class='network-status-message'>
<h3>{{ message }}</h3>
<span>{{ instructions }}</span>
</div>
{{ #reconnectDurationAsSeconds }}

56
stylesheets/_index.scss
View file

@ -18,43 +18,37 @@
color: $grey_d;
float: left;
width: 300px;
display: flex;
flex-direction: column;
.content {
background-color: $grey_l;
height: calc(100% - #{$header-height} - #{$search-height});
flex-grow: 1;
overflow-y: auto;
}
}
.network-status-container {
.network-status {
background: url('/images/error_red.svg') no-repeat left 10px center;
background-size: 25px 25px;
background-color: #fcd156;
padding: 10px;
padding-left: 2 * $button-height;
display: none;
.conversations {
overflow-y: scroll;
height: 100%;
width: 100%;
}
.network-status-container {
.network-status {
height:2 * $button-height;
background: url('/images/error_red.svg') no-repeat left 10px center;
background-size: 25px 25px;
background-color: #fcd156;
padding-top: 0.5 * $button-height;
padding-left: 2 * $button-height;
display: none;
.network-status-message{
h3{
padding: 0px;
margin: 0px;
margin-bottom: 4px;
font-size: 14px;
}
span{
font-size: 12px;
}
.network-status-message{
h3 {
padding: 0px;
margin: 0px;
margin-bottom: 2px;
font-size: 14px;
}
span {
display: inline-block;
font-size: 12px;
padding: 0.5em 0;
}
}
}
}

5
stylesheets/android-dark.scss
View file

@ -5,6 +5,9 @@ $grey-dark_l4: darken($grey-dark_l3, 8%);
$text-dark: #CCCCCC;
.android-dark {
.gutter .content {
background-color: $grey-dark;
}
color: $text-dark;
a { color: #57a5e5; }
hr {
@ -88,7 +91,7 @@ $text-dark: #CCCCCC;
@include color-svg('/images/paperclip.svg', white);
transform: rotateZ(-45deg);
}
.scrollable {
.conversations {
background-color: $grey-dark_l2;
.conversation-list-item {
background-color: $grey-dark_l3;

49
stylesheets/manifest.css
View file

@ -739,29 +739,30 @@ img.emoji {
.gutter {
color: #454545;
float: left;
width: 300px; }
width: 300px;
display: flex;
flex-direction: column; }
.gutter .content {
background-color: #f3f3f3;
height: calc(100% - 64px - 36px); }
.gutter .conversations {
overflow-y: scroll;
height: 100%;
width: 100%; }
.gutter .network-status-container .network-status {
height: 48px;
background: url("/images/error_red.svg") no-repeat left 10px center;
background-size: 25px 25px;
background-color: #fcd156;
padding-top: 12px;
padding-left: 48px;
display: none; }
.gutter .network-status-container .network-status .network-status-message h3 {
padding: 0px;
margin: 0px;
margin-bottom: 4px;
font-size: 14px; }
.gutter .network-status-container .network-status .network-status-message span {
font-size: 12px; }
flex-grow: 1;
overflow-y: auto; }
.network-status-container .network-status {
background: url("/images/error_red.svg") no-repeat left 10px center;
background-size: 25px 25px;
background-color: #fcd156;
padding: 10px;
padding-left: 48px;
display: none; }
.network-status-container .network-status .network-status-message h3 {
padding: 0px;
margin: 0px;
margin-bottom: 2px;
font-size: 14px; }
.network-status-container .network-status .network-status-message span {
display: inline-block;
font-size: 12px;
padding: 0.5em 0; }
.conversation-stack {
padding-left: 300px; }
@ -1716,6 +1717,8 @@ li.entry .error-icon-container {
.android-dark {
color: #CCCCCC; }
.android-dark .gutter .content {
background-color: #333333; }
.android-dark a {
color: #57a5e5; }
.android-dark hr {
@ -1819,9 +1822,9 @@ li.entry .error-icon-container {
-webkit-mask-size: 100%;
background-color: white;
transform: rotateZ(-45deg); }
.android-dark .scrollable {
.android-dark .conversations {
background-color: #292929; }
.android-dark .scrollable .conversation-list-item {
.android-dark .conversations .conversation-list-item {
background-color: #171717;
color: #CCCCCC; }
.android-dark .bottom-bar {