zinface
/
Signal-Desktop
mirror of https://github.com/signalapp/Signal-Desktop.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
Signal-Desktop/stylesheets/_variables.scss

92 lines
2.2 KiB
SCSS
Raw Normal View History

Update styles to material design to match Android client (first pass)
2015-01-20 10:44:34 +08:00
// colors
$blue_l: #a2d2f4;
Registration UX improvements Add some nice modal dialogs instead of confirmation alerts.
2015-03-27 06:19:46 +08:00
$blue: #2090ea;
Update styles to material design to match Android client (first pass)
2015-01-20 10:44:34 +08:00
$grey_l: #f3f3f3;
Move to white background for ios replies, hairline bottom border
2018-04-13 09:29:28 +08:00
$grey_l1: #bdbdbd;
$grey_l1_5: #e6e6e6;
Added more gray color variables (to compensate for inconsistent compiling) // FREEBIE
2016-01-24 19:53:30 +08:00
$grey_l2: #d9d9d9; // ~ Equivalent to darken($grey_l, 10%), unreliably compiles
$grey_l3: darken($grey_l, 20%);
$grey_l4: darken($grey_l, 40%);
Update styles to material design to match Android client (first pass)
2015-01-20 10:44:34 +08:00
$grey: #616161;
$grey_d: #454545;
Add voice notes // FREEBIE
2016-08-16 06:36:29 +08:00
$green: #47D647;
$red: #EF8989;
Update styles to material design to match Android client (first pass)
2015-01-20 10:44:34 +08:00
Make 'New Message' view match new title bar style Make text blue and light weight. Update back button colors to match.
2015-02-02 12:39:07 +08:00
@font-face {
font-family: 'Roboto-Light';
Use relative paths // FREEBIE
2017-03-08 08:54:46 +08:00
src: url('../fonts/Roboto-Light.ttf') format('truetype');
Make 'New Message' view match new title bar style Make text blue and light weight. Update back button colors to match.
2015-02-02 12:39:07 +08:00
}
Reorganize stylesheets and global styles Simplifies the grunt watch task for sass. Renames sass partials with leading underscores. Flattens stylesheet directory. The only remaining raw css file is options.css. Move globally-relevant styles to _global. Shrink overall font size.
2015-01-30 12:53:49 +08:00
@font-face {
font-family: 'Roboto';
Use relative paths // FREEBIE
2017-03-08 08:54:46 +08:00
src: url('../fonts/Roboto-Regular.ttf') format('truetype');
Reorganize stylesheets and global styles Simplifies the grunt watch task for sass. Renames sass partials with leading underscores. Flattens stylesheet directory. The only remaining raw css file is options.css. Move globally-relevant styles to _global. Shrink overall font size.
2015-01-30 12:53:49 +08:00
}
Flesh out font faces
2015-02-19 08:20:28 +08:00
@font-face {
font-family: 'Roboto';
Use relative paths // FREEBIE
2017-03-08 08:54:46 +08:00
src: url('../fonts/Roboto-Italic.ttf') format('truetype');
Flesh out font faces
2015-02-19 08:20:28 +08:00
font-style: italic;
}
@font-face {
font-family: 'Roboto';
Use relative paths // FREEBIE
2017-03-08 08:54:46 +08:00
src: url('../fonts/Roboto-Bold.ttf') format('truetype');
Flesh out font faces
2015-02-19 08:20:28 +08:00
font-weight: bold;
}
Reorganize stylesheets and global styles Simplifies the grunt watch task for sass. Renames sass partials with leading underscores. Flattens stylesheet directory. The only remaining raw css file is options.css. Move globally-relevant styles to _global. Shrink overall font size.
2015-01-30 12:53:49 +08:00
$roboto: Roboto, 'Helvetica Neue', Arial, Helvetica, sans-serif;
Make 'New Message' view match new title bar style Make text blue and light weight. Update back button colors to match.
2015-02-02 12:39:07 +08:00
$roboto-light: Roboto-Light, 'Helvetica Neue', Arial, Helvetica, sans-serif;
Reorganize stylesheets and global styles Simplifies the grunt watch task for sass. Renames sass partials with leading underscores. Flattens stylesheet directory. The only remaining raw css file is options.css. Move globally-relevant styles to _global. Shrink overall font size.
2015-01-30 12:53:49 +08:00
Conversation subscreens share a header // FREEBIE
2016-03-22 06:37:53 +08:00
$header-height: 64px;
Tweak button sizes and menu style Restore previous icon size to header buttons, add padding to accomodate positioning. Remove blue border from menus. // FREEBIE
2016-04-02 05:20:00 +08:00
$button-height: 24px;
Style tweaks for new window chrome
2015-05-22 08:07:11 +08:00
$header-color: $blue;
Display unreadCount badges in conversation list // FREEBIE
2015-11-10 04:07:40 +08:00
Fix up contact list height off by 4px Add some variables so we can actually compute this height instead of hard coding it. // FREEBIE
2016-04-07 08:33:25 +08:00
$search-height: 36px;
Make search clear button ("x") persist w/o hover This makes the "x" in the search bar always visible when there is text in the search box, even if the mouse is not hovering, hopefully making for a clearer UI around search and resolving issue #741 The implementation adds the "x.svg" as a background image to the search box when it is classed with .active, in addition to the -webkit-search-cancel-button, which is still there for the actual functionality but only appears on mouse hover (one tiny snag is that coloring appears slightly different on hover, at least on my screen - don't know if this is a problem). I accounted for both ltr and rtl text-direction by using getComputedStyle(...).direction to detect from the input's dir="auto" - if there's a more elegant way to do this, please suggest. An ideal solution would use the :dir pseudo-class but it's not implemented in Chrome yet - https://developer.mozilla.org/en-US/docs/Web/CSS/:dir For now, I added the direction-checking to inbox_view.js. I see that input.search is also used in new_group_update_view.js and recipient_input_view.js but neither of these views seem to be in use (?) and they don't set the .active class anyway, so I ignored them. Update: Amended version a few hours later - fixed and manually tested color and spacing for iOS and Android Dark themes. Also made some new SASS variables to make things DRYer and fixed my tab size.
2017-03-31 03:00:43 +08:00
$search-padding-right: 10px;
$search-padding-left: 65px;
$search-padding-left-ios: 30px;
$search-x-size: 16px;
Fix up contact list height off by 4px Add some variables so we can actually compute this height instead of hard coding it. // FREEBIE
2016-04-07 08:33:25 +08:00
Display unreadCount badges in conversation list // FREEBIE
2015-11-10 04:07:40 +08:00
$unread-badge-size: 21px;
Fix scroll position jumping when images load Messages with images or media were causing the scroll position to jump around when they loaded, because rendering them changed the height of their elements from 0 to full-height sometime after they were inserted into the DOM. Now when rendering attachments, we wait for them to load so they can render at full height immediately, then warn our parent message list before and after a potential height change, so the scroll position can be saved and reset. // FREEBIE
2015-11-13 02:35:29 +08:00
$loading-height: 16px;
Replace conversation panel js resizing with flex styling. // FREEBIE
2016-01-22 07:45:13 +08:00
Harmonize border radii // FREEBIE
2016-04-02 05:24:13 +08:00
$border-radius: 5px;
Restyle error icons, move them outside the bubble
2016-04-15 07:42:42 +08:00
$error-icon-size: 24px;
Make font sizes relative So it's easier to adjust them globally. // FREEBIE
2016-08-25 06:15:55 +08:00
$font-size: 14px;
$font-size-small: (13/14) + em;
Refactor css to support theming Move away from inline style attributes for setting contact colors. Apply colors by name via css classes instead. Also lays groundwork for syncing contact colors. // FREEBIE
2016-08-29 14:57:33 +08:00
$material_red: #EF5350;
$material_pink: #EC407A;
$material_purple: #AB47BC;
$material_deep_purple: #7E57C2;
$material_indigo: #5C6BC0;
$material_blue: #2196F3;
$material_light_blue: #03A9F4;
$material_cyan: #00BCD4;
$material_teal: #009688;
$material_green: #4CAF50;
$material_light_green: #7CB342;
$material_orange: #FF9800;
$material_deep_orange: #FF5722;
$material_amber: #FFB300;
$material_blue_grey: #607D8B;
Darken material colors in dark theme Dark theme uses material colors with value 700 from https://material.google.com/style/color.html
2016-12-02 18:43:08 +08:00
$dark_material_red: #D32F2F;
$dark_material_pink: #C2185B;
$dark_material_purple: #7B1FA2;
$dark_material_deep_purple: #512DA8;
$dark_material_indigo: #303F9F;
$dark_material_blue: #1976D2;
$dark_material_light_blue: #0288D1;
$dark_material_cyan: #0097A7;
$dark_material_teal: #00796B;
$dark_material_green: #388E3C;
$dark_material_light_green: #689F38;
$dark_material_orange: #F57C00;
$dark_material_deep_orange: #E64A19;
$dark_material_amber: #FFA000;
$dark_material_blue_grey: #455A64;
Fixed examples in Quote.md, rough Android visuals
2018-04-10 09:31:52 +08:00
// Android
$android-bubble-padding-horizontal: 12px;
$android-bubble-padding-vertical: 9px;
$android-bubble-quote-padding: 4px;