zoriya/flood
1
0
Fork 0
mirror of https://github.com/zoriya/flood.git synced 2026-05-31 10:22:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #25 from jfurrow/refactor/modal-styling

Browse Source 
Improve modal styling
This commit is contained in:
John Furrow
2016-06-11 23:36:57 -07:00
committed by GitHub
parent dd35fa4d98 85a6922315
commit bff1bfb9f1
6 changed files with 70 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/source/sass/base/_form-elements.scss
+22 -15
View File
@@ -1,31 +1,33 @@
$form--label--foreground: #3f5465;
$form--label--foreground: #5c7087;
$textbox--background: #0f151a;
$textbox--foreground: #5e7182;
$textbox--placeholder: #2b3946;
$textbox--border: #0c0f12;
$textbox--fulfilled--background: #0f151a;
$textbox--active--background: #0f151a;
$textbox--background: #242b36;
$textbox--foreground: #5e728c;
$textbox--placeholder: #424d5e;
$textbox--border: #1a2028;
$textbox--fulfilled--background: $textbox--background;
$textbox--active--background: $textbox--background;
$textbox--active--border: $blue;
$textbox--active--foreground: $blue;
$textbox--active--placeholder: $textbox--placeholder;
$textbox--selection--foreground: #1a2028;
$textbox--selection--background: $blue--lighter;
$button--primary--foreground: #fff;
$button--primary--background: $blue;
$button--primary--background--hover: lighten($button--primary--background, 4%);
$button--primary--border: darken(#212a38, 10%);
$button--primary--border: $textbox--border;
$button--primary--border--hover: $button--primary--border;
$button--deemphasized--foreground: #677c9e;
$button--deemphasized--background: #212a38;
$button--deemphasized--foreground--hover: lighten(#677c9e, 10%);
$button--deemphasized--background--hover: lighten(#212a38, 2.5%);
$button--deemphasized--border: darken($button--deemphasized--background, 10%);
$button--deemphasized--foreground: #6e8199;
$button--deemphasized--background: #343e4c;
$button--deemphasized--foreground--hover: lighten($button--deemphasized--foreground, 10%);
$button--deemphasized--background--hover: lighten($button--deemphasized--background, 2.5%);
$button--deemphasized--border: $textbox--border;
$button--deemphasized--border--hover: $button--deemphasized--border;
$checkbox--background: #212a38;
$checkbox--background: $button--deemphasized--background;
$checkbox--background--hover: lighten($checkbox--background, 5%);
$checkbox--border: darken($button--deemphasized--background, 10%);
$checkbox--border: $textbox--border;
$checkbox--border--hover: $checkbox--border;
$modal--body--foreground: desaturate(lighten($foreground, 20%), 10%);
@@ -65,6 +67,11 @@ $form--column--padding: $spacing-unit * 2/5;
transition: color 0.25s;
}
&::selection {
color: $textbox--selection--foreground;
background: $textbox--selection--background;
}
&:focus {
background: $textbox--active--background;
border-color: $textbox--active--border;
client/source/sass/components/_dropzone.scss
+9 -7
View File
@@ -1,15 +1,17 @@
$dropzone--background: #0f151a;
$dropzone--foreground: #3f5465;
$dropzone--background: $textbox--background;
$dropzone--foreground: $textbox--foreground;
$dropzone--foreground--dragging: $blue;
$dropzone--border: #0c0f12;
$dropzone--border: $textbox--border;
$dropzone--border--hover: darken($dropzone--border, 20%);
$dropzone--border--dragging: $blue;
$dropzone--browse--foreground: $blue;
$dropzone--icon--fill: #3f5465;
$dropzone--icon--fill: rgba($dropzone--foreground, 0.5);
$dropzone--icon--fill--hover: $blue;
$dropzone--icon--fill--dragging: $blue;
$dropzone--file--icon--fill: rgba(#3f5465, 0.5);
$dropzone--file--icon--fill--hover: rgba(lighten(#3f5465, 10%), 0.5);
$dropzone--file--foreground: $dropzone--foreground;
$dropzone--file--icon--fill: rgba($dropzone--file--foreground, 0.5);
$dropzone--file--icon--fill--hover: rgba(lighten($dropzone--file--foreground, 20%), 0.5);
.dropzone {
align-items: center;
@@ -90,7 +92,7 @@ $dropzone--file--icon--fill--hover: rgba(lighten(#3f5465, 10%), 0.5);
@extend .textbox;
@extend .textbox.is-fulfilled;
border-radius: 4px 4px 0 0;
color: #3f5465;
color: $dropzone--file--foreground;
font-size: 0.8em;
margin-bottom: -1px;
padding: $spacing-unit * 1/2;
client/source/sass/components/_floating-action.scss
+1 -1
View File
@@ -1,4 +1,4 @@
$textbox-repeater--button--background: #303d52;
$textbox-repeater--button--background: #3e4959;
$textbox-repeater--button--background--hover: lighten($textbox-repeater--button--background, 7%);
$textbox-repeater--button--border: rgba(#0f151b, 0.2);
$textbox-repeater--button--border--hover: rgba(#0f151b, 0.4);
client/source/sass/components/_modals.scss
+17 -16
View File
@@ -1,25 +1,24 @@
$modal--background: #12191f;
$modal--background: #28303b;
$modal--heading--background: #161c24;
$modal--heading--foreground: #7d95ab;
$modal--heading--border: #0f151b;
$modal--heading--background: #303845;
$modal--heading--foreground: #a3bad4;
$modal--heading--border: #1a232c;
$modal--sub-heading--foreground: desaturate(darken($modal--heading--foreground, 23%), 2%);
$modal--sub-heading--foreground: desaturate(darken($modal--heading--foreground, 15%), 10%);
$modal--transition--duration: 0.5s;
$modal--transition--scale: 0.85;
$modal--body--foreground: #3f5465;
$modal--body--foreground: lighten(#6c7e92, 6%);
$modal--tab--foreground: #3f5465;
$modal--tab--foreground--active: $blue;
$modal--tab--border--active: $blue;
$modal--tab--foreground: #6f839e;
$modal--tab--foreground--active: $blue--lighter;
$modal--tab--border--active: $blue--lighter;
$modal--overlay--base: desaturate(darken($background, 3%), 5%);
$modal--overlay: rgba($modal--overlay--base, 0.9);
$modal--overlay--base: #0b1014;
$modal--overlay: rgba($modal--overlay--base, 0.95);
$modal--content--border: rgba($modal--overlay--base, 0.5);
$modal--content--shadow: rgba($modal--overlay--base, 1);
$modal--content--shadow: #05080a;
$modal--border-radius: 3px;
$modal--padding--horizontal: $spacing-unit;
@@ -52,7 +51,7 @@ $modal--tabs--padding--vertical--right: $spacing-unit * 2/5;
$modal--tabs--padding--vertical--bottom: $spacing-unit * 1/5;
$modal--tabs--padding--vertical--left: $modal--padding--horizontal;
$modal--tabs--in-body--background: #11171d;
$modal--tabs--in-body--background: #2a323e;
.modal {
background: $modal--overlay;
@@ -136,8 +135,10 @@ $modal--tabs--in-body--background: #11171d;
background: $modal--background;
border-radius: $modal--border-radius;
box-shadow:
0 0 0 1px $modal--content--border,
0 0 35px $modal--content--shadow;
0 0 256px rgba($modal--content--shadow, 0.1),
0 2px 4px rgba($modal--content--shadow, 0.5),
0 2px 8px rgba($modal--content--shadow, 0.1),
0 4px 32px rgba($modal--content--shadow, 0.3);
display: flex;
flex-direction: column;
height: auto;
client/source/sass/components/_torrent-details-panel.scss
+20 -22
View File
@@ -1,36 +1,34 @@
$torrent-details--header--secondary--foreground: #3f5465;
$torrent-details--header--secondary--foreground: $modal--body--foreground;
$torrent-details--content--background: rgba(desaturate(#0c1b26, 15%), 0.4);
$torrent-details--table--foreground: #3f5465;
$torrent-details--table--header: rgba(#3f5465, 0.5);
$torrent-details--table--header--count--background: rgba(#3f5465, 0.2);
$torrent-details--table--header--count--foreground: #3f5465;
$torrent-details--table--foreground: $modal--body--foreground;
$torrent-details--table--header: rgba($modal--body--foreground, 0.5);
$torrent-details--table--header--count--background: rgba($modal--body--foreground, 0.2);
$torrent-details--table--header--count--foreground: $modal--body--foreground;
$torrent-details--header--icon--default--fill: rgba(#4d6f87, 0.5);
$torrent-details--header--progress-bar--fill: #3f5465;
$torrent-details--header--progress-bar--fill: $modal--body--foreground;
$torrent-details--detail--label--foreground: desaturate(lighten(#3f5465, 5%), 5%);
$torrent-details--detail--label--foreground: lighten($modal--body--foreground, 2%);
$directory-tree--foreground: #3f5465;
$directory-tree--directory--foreground: #3f5465;
$directory-tree--foreground: $modal--body--foreground;
$directory-tree--directory--foreground: $modal--body--foreground;
$directory-tree--directory--foreground--open: lighten($directory-tree--directory--foreground, 10%);
$directory-tree--group--extension: rgba(#527893, 0.1);
$directory-tree--group--extension: rgba(#6c7e92, 0.1);
$directory-tree--icon--file: rgba(#3f5465, 0.4);
$directory-tree--icon--folder: rgba(#3f5465, 0.4);
$directory-tree--icon--folder--open: rgba(darken(#3f5465, 10%), 0.4);
$directory-tree--icon--file: rgba($modal--body--foreground, 0.4);
$directory-tree--icon--folder: rgba($modal--body--foreground, 0.4);
$directory-tree--icon--folder--open: $directory-tree--icon--folder;
$directory-tree--file-details--foreground: rgba(#3f5465, 0.7);
$directory-tree--file-details--hover--foreground: rgba(#3f5465, 0.8);
$directory-tree--file-details--foreground: rgba($modal--body--foreground, 0.7);
$directory-tree--file-details--hover--foreground: rgba($modal--body--foreground, 0.8);
$torrent-details--directory-tree--file--hover--background: rgba(#434d73, 0.1);
$torrent-details--directory-tree--file--hover--foreground: #7d95ab;
$torrent-details--directory-tree--file--hover--border: #2c3e4c;
$torrent-details--directory-tree--file--hover--background: #2f3844;
$torrent-details--directory-tree--file--hover--foreground: #8799ad;
$torrent-details--directory-tree--file--hover--border: #515f6f;
$torrent-details--directory-tree--parent-directory--foreground: rgba(#3f5465, 0.6);
$torrent-details--directory-tree--parent-directory--icon--fill: rgba(#3f5465, 0.5);
$torrent-details--directory-tree--parent-directory--foreground: rgba($modal--body--foreground, 0.6);
$torrent-details--directory-tree--parent-directory--icon--fill: rgba($modal--body--foreground, 0.5);
.torrent-details {
client/source/sass/tools/_colors.scss
+1
View File
@@ -1,4 +1,5 @@
$blue: #258de5;
$blue--lighter: saturate(lighten($blue, 10%), 100%);
$green: #39ce83;
$red: #e95779;
$white: #fff;