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

56
stylesheets/_index.scss
View file

@ -18,43 +18,37 @@
color: $grey_d; color: $grey_d;
float: left; float: left;
width: 300px; width: 300px;
display: flex;
flex-direction: column;
.content { .content {
background-color: $grey_l; 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 { .network-status-message{
overflow-y: scroll; h3 {
height: 100%; padding: 0px;
width: 100%; margin: 0px;
} margin-bottom: 2px;
font-size: 14px;
.network-status-container { }
span {
.network-status { display: inline-block;
font-size: 12px;
height:2 * $button-height; padding: 0.5em 0;
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;
}
} }
} }
} }
} }

5
stylesheets/android-dark.scss
View file

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

49
stylesheets/manifest.css
View file

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