zoriya/flood
1
0
Fork 0
mirror of https://github.com/zoriya/flood.git synced 2026-06-05 11:49:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Implement dark modals for more sex appeal 🔥

Browse Source
This commit is contained in:
John Furrow
2016-05-22 20:44:02 -07:00
parent 4e796dda85
commit 297830d901
6 changed files with 220 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/source/sass/base/_form-elements.scss
+31 -30
View File
@@ -1,34 +1,32 @@
$form--label--foreground: #abbac7;
$form--label--foreground: #3f5465;
$textbox--background: #e9eff5;
$textbox--foreground: #53718a;
$textbox--placeholder: #abbac7;
$textbox--border: #d6e2ea;
$textbox--fulfilled--background: #fdfefe;
$textbox--active--background: #fdfefe;
$textbox--active--border: desaturate(darken($textbox--border, 5%), 5%);
$textbox--background: #0f151a;
$textbox--foreground: #5e7182;
$textbox--placeholder: #2b3946;
$textbox--border: #0c0f12;
$textbox--fulfilled--background: #0f151a;
$textbox--active--background: #0f151a;
$textbox--active--border: $blue;
$textbox--active--foreground: $blue;
$textbox--active--placeholder: $textbox--placeholder;
$textbox-repeater--button--background: #fff;
$textbox-repeater--button--background--hover: $main-content--background;
$textbox-repeater--button--border: rgba($background, 0.1);
$textbox-repeater--button--border--hover: rgba($background, 0.2);
$textbox-repeater--button--foreground: rgba($background, 0.3);
$textbox-repeater--button--foreground--hover: rgba($background, 0.5);
$button--primary--foreground: #fff;
$button--primary--background: $blue;
$button--primary--background--hover: darken($button--primary--background, 5%);
$button--primary--border: darken($button--primary--background, 5%);
$button--primary--border--hover: darken($button--primary--border, 5%);
$button--primary--background--hover: lighten($button--primary--background, 4%);
$button--primary--border: darken(#212a38, 10%);
$button--primary--border--hover: $button--primary--border;
$button--deemphasized--foreground: #66717a;
$button--deemphasized--background: $main-content--background;
$button--deemphasized--foreground--hover: darken($button--deemphasized--foreground, 5%);
$button--deemphasized--background--hover: darken($button--deemphasized--background, 5%);
$button--deemphasized--border: darken($button--deemphasized--background, 5%);
$button--deemphasized--border--hover: darken($button--deemphasized--border, 5%);
$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--border--hover: $button--deemphasized--border;
$checkbox--background: #212a38;
$checkbox--background--hover: lighten($checkbox--background, 5%);
$checkbox--border: darken($button--deemphasized--background, 10%);
$checkbox--border--hover: $checkbox--border;
$modal--body--foreground: desaturate(lighten($foreground, 20%), 10%);
@@ -84,7 +82,7 @@ $modal--body--foreground: desaturate(lighten($foreground, 20%), 10%);
cursor: pointer;
font-weight: 500;
padding: 8px 22px;
transition: background 0.25s;
transition: background 0.25s, color 0.25s;
user-select: none;
&.has-icon {
@@ -131,6 +129,7 @@ $modal--body--foreground: desaturate(lighten($foreground, 20%), 10%);
}
.checkbox {
cursor: pointer;
line-height: 1;
position: relative;
@@ -139,7 +138,8 @@ $modal--body--foreground: desaturate(lighten($foreground, 20%), 10%);
.checkbox {
&__decoy {
border-color: $blue;
background: $checkbox--background--hover;
border-color: $checkbox--border--hover;
}
}
}
@@ -168,16 +168,17 @@ $modal--body--foreground: desaturate(lighten($foreground, 20%), 10%);
&__decoy {
@extend .textbox;
background: $white;
border-radius: 3px;
background: $checkbox--background;
border: 1px solid $checkbox--border;
border-radius: 2px;
display: inline-block;
height: $spacing-unit * 3/5;
height: $spacing-unit * 8/10;
margin-right: $spacing-unit * 3/10;
margin-top: -2px;
padding: 0;
position: relative;
vertical-align: middle;
width: $spacing-unit * 3/5;
width: $spacing-unit * 8/10;
.icon {
fill: transparent;
client/source/sass/components/_dropzone.scss
+33 -20
View File
@@ -1,15 +1,15 @@
$dropzone--background: #e9eff5;
$dropzone--foreground: #53718a;
$dropzone--foreground--hover: darken($dropzone--foreground, 20%);
$dropzone--background: #0f151a;
$dropzone--foreground: #3f5465;
$dropzone--foreground--dragging: $blue;
$dropzone--border: #d6e2ea;
$dropzone--border: #0c0f12;
$dropzone--border--hover: darken($dropzone--border, 20%);
$dropzone--border--dragging: $blue;
$dropzone--browse--foreground: $blue;
$dropzone--icon--fill: #c7d3df;
$dropzone--icon--fill--hover: darken($dropzone--icon--fill, 15%);
$dropzone--icon--fill: #3f5465;
$dropzone--icon--fill--hover: $blue;
$dropzone--icon--fill--dragging: $blue;
$dropzone--file--icon--fill: #adbfce;
$dropzone--file--icon--fill: rgba(#3f5465, 0.5);
$dropzone--file--icon--fill--hover: rgba(lighten(#3f5465, 10%), 0.5);
.dropzone {
align-items: center;
@@ -19,9 +19,11 @@ $dropzone--file--icon--fill: #adbfce;
color: $dropzone--foreground;
display: flex;
flex-direction: column;
position: relative;
text-align: center;
transition: border 0.25s, color 0.25s;
width: 100%;
z-index: 1;
&:hover {
border-color: $dropzone--border--hover;
@@ -87,14 +89,17 @@ $dropzone--file--icon--fill: #adbfce;
&__selected-files {
@extend .textbox;
@extend .textbox.is-fulfilled;
border-radius: 4px 4px 0 0 ;
border-radius: 4px 4px 0 0;
color: #3f5465;
font-size: 0.8em;
margin-bottom: -1px;
padding: $spacing-unit * 1/2;
position: relative;
width: 100%;
z-index: 2;
& + .dropzone {
border-radius: 0 0 4px 4px;
border-top: none;
}
&__file {
@@ -106,16 +111,18 @@ $dropzone--file--icon--fill: #adbfce;
fill: $dropzone--file--icon--fill;
height: 12px;
margin-right: 4px;
vertical-align: baseline;
width: 12px;
}
.icon--close {
height: 8px;
margin-left: 4px;
margin-right: 0;
margin-top: -1px;
transition: fill 0.25s;
vertical-align: middle;
width: 8px;
width: 12px;
&--close {
height: 8px;
margin-left: 4px;
margin-right: 0;
vertical-align: middle;
width: 8px;
}
}
}
}
@@ -140,10 +147,16 @@ $dropzone--file--icon--fill: #adbfce;
&--remove-icon {
cursor: pointer;
}
}
.icon {
&--remove-icon {
&:hover {
.icon {
fill: $dropzone--file--icon--fill--hover;
}
}
}
}
}
}
client/source/sass/components/_floating-action.scss
+7
View File
@@ -1,3 +1,10 @@
$textbox-repeater--button--background: #303d52;
$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);
$textbox-repeater--button--foreground: rgba(#12191f, 0.7);
$textbox-repeater--button--foreground--hover: #12191f;
.floating-action {
&__button {
client/source/sass/components/_modals.scss
+60 -15
View File
@@ -1,19 +1,22 @@
$modal--background: #f7fafc;
$modal--heading--background: $white;
$modal--heading--foreground: #5c6e80;
$modal--heading--border: #dde7ed;
$modal--background: #12191f;
$modal--heading--background: #161c24;
$modal--heading--foreground: #7d95ab;
$modal--heading--border: #0f151b;
$modal--body--foreground: desaturate(lighten($foreground, 20%), 10%);
$modal--transition--duration: 0.5s;
$modal--transition--scale: 0.85;
$modal--tab--foreground: #abbac7;
$modal--body--foreground: #3f5465;
$modal--tab--foreground: #3f5465;
$modal--tab--foreground--active: $blue;
$modal--tab--border--active: $blue;
$modal--overlay--base: darken($background, 5%);
$modal--overlay: rgba($modal--overlay--base, 0.8);
$modal--overlay--base: desaturate(darken($background, 3%), 5%);
$modal--overlay: rgba($modal--overlay--base, 0.9);
$modal--content--border: rgba($modal--overlay--base, 0.1);
$modal--content--shadow: rgba($modal--overlay--base, 0.3);
$modal--content--border: rgba($modal--overlay--base, 0.5);
$modal--content--shadow: rgba($modal--overlay--base, 1);
$modal--border-radius: 3px;
$modal--padding--horizontal: $spacing-unit;
@@ -41,7 +44,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: rgba($white, 0.55);
$modal--tabs--in-body--background: #11171d;
.modal {
background: $modal--overlay;
@@ -49,7 +52,7 @@ $modal--tabs--in-body--background: rgba($white, 0.55);
left: 0;
position: fixed;
top: 0;
transition: opacity 0.5s;
transition: opacity $modal--transition--duration;
width: 100%;
z-index: 100;
@@ -75,7 +78,7 @@ $modal--tabs--in-body--background: rgba($white, 0.55);
&:after {
bottom: 0;
content: '';
height: 2px;
height: 1px;
left: 0;
position: absolute;
right: 0;
@@ -114,7 +117,7 @@ $modal--tabs--in-body--background: rgba($white, 0.55);
color: $modal--heading--foreground;
flex: 0 0 auto;
font-size: 1.25em;
font-weight: 300;
font-weight: 400;
line-height: 1;
overflow: hidden;
padding: $modal--padding--vertical $modal--padding--horizontal;
@@ -146,7 +149,9 @@ $modal--tabs--in-body--background: rgba($white, 0.55);
overflow: hidden;
position: absolute;
top: 10%;
transition: transform $modal--transition--duration;
transform: translate(-50%, 0);
transform-origin: 50% 50%;
width: 500px;
}
}
@@ -199,19 +204,59 @@ $modal--tabs--in-body--background: rgba($white, 0.55);
&__animation-enter {
opacity: 0;
.modal {
&__content {
&__wrapper {
transform: translate(-50%, 0) scale($modal--transition--scale);
}
}
}
}
&__animation-enter-active {
opacity: 1;
.modal {
&__content {
&__wrapper {
transform: translate(-50%, 0) scale(1, 1);
}
}
}
}
&__animation-leave {
opacity: 1;
pointer-events: none;
.modal {
&__content {
&__wrapper {
transform: translate(-50%, 0) scale(1, 1);
}
}
}
}
&__animation-leave-active {
opacity: 0;
.modal {
&__content {
&__wrapper {
transform: translate(-50%, 0) scale($modal--transition--scale);
}
}
}
}
&--vertical {
@@ -285,7 +330,7 @@ $modal--tabs--in-body--background: rgba($white, 0.55);
right: 0;
top: 0;
transition: background 0.25s;
width: 2px;
width: 1px;
}
}
}
client/source/sass/components/_torrent-details-panel.scss
+87 -45
View File
@@ -1,42 +1,43 @@
$torrent-details--header--name--foreground: #5b6d7c;
$torrent-details--header--tertiary--foreground: #7b9cb4;
$torrent-details--header--secondary--foreground: #3f5465;
$torrent-details--content--background: rgba(desaturate(#0c1b26, 15%), 0.4);
$torrent-details--table--foreground: #527893;
$torrent-details--table--header: rgba(#527893, 0.5);
$torrent-details--table--header--count--background: rgba(#527893, 0.2);
$torrent-details--table--header--count--foreground: #527893;
$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--header--icon--default--fill: rgba(#4d6f87, 0.5);
$torrent-details--header--progress-bar--fill: #3f5465;
$torrent-details--detail--label--foreground: #527893;
$torrent-details--detail--label--foreground: desaturate(lighten(#3f5465, 5%), 5%);
$directory-tree--foreground: #527893;
$directory-tree--directory--foreground: #527893;
$directory-tree--directory--foreground--open: darken($directory-tree--directory--foreground, 5%);
$directory-tree--foreground: #3f5465;
$directory-tree--directory--foreground: #3f5465;
$directory-tree--directory--foreground--open: lighten($directory-tree--directory--foreground, 10%);
$directory-tree--icon--file: rgba(#527893, 0.4);
$directory-tree--icon--folder: rgba(#527893, 0.4);
$directory-tree--icon--folder--active: $directory-tree--icon--folder;
$directory-tree--icon--folder--open: rgba(darken(#527893, 10%), 0.4);
$directory-tree--group--extension: rgba(#527893, 0.1);
$directory-tree--file-details--foreground: rgba(#527893, 0.7);
$directory-tree--file-details--hover--foreground: rgba(#527893, 0.8);
$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);
$torrent-details--directory-tree--file--hover--background: rgba($blue, 0.1);
$torrent-details--directory-tree--file--hover--foreground: $blue;
$torrent-details--directory-tree--file--hover--border: rgba($blue, 0.5);
$directory-tree--file-details--foreground: rgba(#3f5465, 0.7);
$directory-tree--file-details--hover--foreground: rgba(#3f5465, 0.8);
$torrent-details--directory-tree--parent-directory--foreground: rgba(#527893, 0.6);
$torrent-details--directory-tree--parent-directory--icon--fill: rgba(#527893, 0.5);
$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--parent-directory--foreground: rgba(#3f5465, 0.6);
$torrent-details--directory-tree--parent-directory--icon--fill: rgba(#3f5465, 0.5);
.torrent-details {
&__heading {
color: $torrent-details--header--name--foreground;
font-size: 1.2rem;
font-weight: 300;
color: inherit;
font-size: inherit;
font-weight: inherit;
margin-bottom: $spacing-unit * 2/5;
}
@@ -47,7 +48,7 @@ $torrent-details--directory-tree--parent-directory--icon--fill: rgba(#527893, 0.
margin-bottom: $spacing-unit * 1/5;
&__secondary {
color: $torrent-details--header--tertiary--foreground;
color: $torrent-details--header--secondary--foreground;
display: flex;
font-size: 0.85rem;
flex: 1 0 auto;
@@ -86,26 +87,66 @@ $torrent-details--directory-tree--parent-directory--icon--fill: rgba(#527893, 0.
}
}
&--download {
color: $blue;
.icon {
fill: $blue;
}
}
&--upload {
color: $green;
.icon {
fill: $green;
}
}
&:last-child {
margin-right: 0;
}
}
.is-actively-downloading & {
.torrent-details {
&__sub-heading {
&__tertiary {
&--download {
color: $blue;
.icon {
fill: $blue;
}
}
&--upload {
color: $green;
.icon {
fill: $green;
}
}
}
}
}
}
}
&__header {
&.is-completed,
&.is-stopped {
.progress-bar {
&__icon {
.icon {
fill: $torrent-details--header--progress-bar--fill;
}
}
&__fill {
background: $torrent-details--header--progress-bar--fill;
&__wrapper {
&:after {
background: $torrent-details--header--progress-bar--fill;
}
}
}
}
}
}
&__action {
@@ -166,7 +207,7 @@ $torrent-details--directory-tree--parent-directory--icon--fill: rgba(#527893, 0.
&--group {
&:after {
background: rgba(#527893, 0.1);
background: $directory-tree--group--extension;
}
}
@@ -209,14 +250,15 @@ $torrent-details--directory-tree--parent-directory--icon--fill: rgba(#527893, 0.
transition: background 0.25s, border 0.25s, color 0.25s;
&:after {
background: rgba($blue, 0);
background: $torrent-details--directory-tree--file--hover--border;
bottom: 0;
content: '';
height: auto;
left: -2px;
opacity: 0;
position: absolute;
top: 0;
transition: background 0.25s;
transition: opacity 0.25s;
width: 2px;
}
@@ -225,7 +267,7 @@ $torrent-details--directory-tree--parent-directory--icon--fill: rgba(#527893, 0.
color: $torrent-details--directory-tree--file--hover--foreground;
&:after {
background: rgba($blue, 1);
opacity: 1;
}
.file {
client/source/sass/components/_torrents.scss
+2
View File
@@ -19,6 +19,7 @@ $torrent--background--hover: #f6f8fa;
$torrent--background--selected: $blue;
$torrent--background--error: #e95779;
$more-info--background: #fff;
$more-info--box-shadow--hue: #1a2f3d;
$more-info--border: $textbox-repeater--button--border;
@@ -104,6 +105,7 @@ $more-info--border: $textbox-repeater--button--border;
.torrent {
&__more-info {
background: $more-info--background;
opacity: 1;
pointer-events: auto;
transform: translateX(0);