LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

update overall scss structure

Browse source 
make styles more flexible / customizable
This commit is contained in:
btzr-io 2017-08-18 22:33:01 -06:00
parent dccd52c7df
commit 3f3372c96a
10 changed files with 84 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
ui/scss/_gui.scss
View file

@ -11,6 +11,12 @@ body
line-height: var(--font-line-height);
}
/* Custom text selection */
*::selection {
background: var(--text-selection-bg);
color: var(--text-selection-color);
}
#window
{
min-height: 100vh;

57
ui/scss/_vars.scss
View file

@ -12,12 +12,18 @@
--color-notice: #8a6d3b;
--color-error: #a94442;
--color-load-screen-text: #c3c3c3;
--color-money: #216C2A;
--color-meta-light: #505050;
--color-money: #216C2A;
--color-download: #444;
--color-canvas: #f5f5f5;
--color-bg: #ffffff;
--color-bg-alt: #D9D9D9;
/* Misc */
--content-max-width: 1000px;
--nsfw-blur-intensity: 20px;
--height-video-embedded: $width-page-constrained * 9 / 16 ;
/* Font */
--font-size: 16px;
--font-line-height: 1.3333;
@ -27,19 +33,20 @@
--box-shadow-layer: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
--box-shadow-focus: 2px 4px 4px 0 rgba(0,0,0,.14),2px 5px 3px -2px rgba(0,0,0,.2),2px 3px 7px 0 rgba(0,0,0,.12);
/* Misc */
--content-max-width: 1000px;
--nsfw-blur-intensity: 20px;
--height-video-embedded: $width-page-constrained * 9 / 16 ;
/* Transitions */
/* Transition */
--transition-duration: .225s;
--transition-type: ease;
/* Text */
--text-color: #000;
--text-help-color: #EEE;
--text-max-width: 660px;
--text-link-padding: 4px;
--text-selection-bg: rgba(saturate(lighten(#155B4A, 20%), 20%), 1); // temp color
--text-selection-color: #FFF;
/* Window */
--window-bg: var(--color-canvas);
/* Input */
--input-width: 330px;
@ -47,6 +54,8 @@
--input-border-color: rgba(0,0,0,.25);
/* Button */
--button-bg: var(--color-bg-alt);
--button-color: #FFF;
--button-primary-bg: var(--color-primary);
--button-primary-color: #FFF;
--button-padding: 12px;
@ -55,11 +64,26 @@
/* Header */
--header-bg: var(--color-bg);
--header-color: #666;
--header-active-color: rgba(0,0,0, 0.85);
--header-height: $spacing-vertical * 2.5;
--header-shadow: var(--box-shadow-layer);
/* Window */
--window-bg: var(--color-canvas);
/* Header -> search */
--search-bg: rgba(255, 255, 255, 0.7);
--search-border:1px solid #ccc;
--search-color: #666;
--search-active-color: var(--header-active-color);
/* Tabs */
--tab-bg: transparent;
--tab-color: #666;
--tab-active-color: var(--header-active-color);
--tab-border-size: 2px;
--tab-border: var(--tab-border-size) solid var(--tab-active-color);
/* Table */
--table-border: 1px solid #e2e2e2;
--table-item-even: white;
--table-item-odd: #f4f4f4;
/* Card */
--card-bg: var(--color-bg);
@ -69,12 +93,21 @@
--card-padding: $spacing-vertical * 2/3;
--card-radius: 2px;
--card-link-scaling: 1.1;
--card-shadow: var(--box-shadow-layer);
--card-small-width: $spacing-vertical * 10;
/* Modal */
--modal-bg: var(--color-bg);
--modal-overlay-bg: rgba(#F5F5F5, 0.75); // --color-canvas: #F5F5F5
--modal-border: 1px solid rgb(204, 204, 204);
/* Menu */
--menu-bg: var(--color-bg);
--menu-radius: 2px;
--menu-item-hover-bg: var(--color-bg-alt);
/* Tooltip */
--tooltip-body-width: 300px;
--tooltip-bg: var(--color-bg);
--tooltip-color: var(--text-color);
--tooltip-shadow: var(--box-shadow-layer);
--tooltip-border: 1px solid #aaa;
}

4
ui/scss/component/_button.scss
View file

@ -64,7 +64,7 @@ $button-focus-shift: 12%;
}
.button-alt
{
background-color: var(--color-bg-alt);
background-color: var(--button-bg);
box-shadow: var(--box-shadow-layer);
}
@ -79,7 +79,7 @@ $button-focus-shift: 12%;
}
.button-text-help
{
@include text-link(#aaa);
@include text-link(var(--text-help-color));
font-size: 0.8em;
}
.button--flat

2
ui/scss/component/_card.scss
View file

@ -5,7 +5,7 @@
margin-right: auto;
max-width: var(--card-max-width);
background: var(--card-bg);
box-shadow: var(--card-shadow);
box-shadow: var(--box-shadow-layer);
border-radius: var(--card-radius);
margin-bottom: var(--card-margin);
overflow: auto;

6
ui/scss/component/_file-actions.scss
View file

@ -1,7 +1,5 @@
@import "../global";
$color-download: #444;
.file-actions
{
line-height: var(--button-height);
@ -17,11 +15,11 @@ $color-download: #444;
.file-actions__download-status-bar
{
position: relative;
color: $color-download;
color: var(--color-download);
}
.file-actions__download-status-bar-overlay
{
background: $color-download;
background: var(--color-download);
color: white;
position: absolute;
white-space: nowrap;

30
ui/scss/component/_header.scss
View file

@ -1,15 +1,12 @@
@import "../global";
$color-header: #666;
$color-header-active: darken($color-header, 20%);
#header
{
color: $color-header;
background: #fff;
color: var(--header-color);
background: var(--header-bg);
display: flex;
position: fixed;
box-shadow: var(--header-shadow);
box-shadow: var(--box-shadow-layer);
top: 0;
left: 0;
width: 100%;
@ -39,18 +36,18 @@ $color-header-active: darken($color-header, 20%);
.wunderbar--active .icon-search { color: var(--color-primary); }
.wunderbar__input {
background: rgba(255, 255, 255, 0.7);
background: var(--search-bg);
width: 100%;
color: $color-header;
color: var(--search-color);
height: $spacing-vertical * 1.5;
line-height: $spacing-vertical * 1.5;
padding-left: 38px;
padding-right: 5px;
border: 1px solid var(--text-color);
@include border-radius(2px);
border: 1px solid #ccc;
border: var(--search-border);
transition: all var(--transition-duration) var(--transition-type);
&:focus {
color: $color-header-active;
color: var(--search-active-color);
box-shadow: var(--box-shadow-focus);
border-color: var(--color-primary);
}
@ -65,12 +62,11 @@ nav.sub-header
margin-right: auto;
> a
{
$sub-header-selected-underline-height: 2px;
display: inline-block;
margin: 0 15px;
padding: 0 5px;
line-height:calc(var(--header-height) - $spacing-vertical - $sub-header-selected-underline-height);
color: var(--header-color);
line-height:calc(var(--header-height) - $spacing-vertical - var(--tab-border-size));
color: var(--tab-color);
&:first-child
{
margin-left: 0;
@ -81,12 +77,12 @@ nav.sub-header
}
&.sub-header-selected
{
border-bottom: $sub-header-selected-underline-height solid $color-header-active;
color: $color-header-active;
border-bottom: var(--tab-border);
color: var(--tab-active-color);
}
&:hover
{
color: $color-header-active;
color: var(--tab-active-color);
}
}
}

6
ui/scss/component/_menu.scss
View file

@ -9,9 +9,9 @@ $border-radius-menu: 2px;
.menu {
position: absolute;
white-space: nowrap;
background-color: white;
background-color: var(--menu-bg);
box-shadow: var(--box-shadow-layer);
border-radius: $border-radius-menu;
border-radius: var(--menu-radius);
padding-top: ($spacing-vertical / 5) 0px;
z-index: 1;
}
@ -20,6 +20,6 @@ $border-radius-menu: 2px;
display: block;
padding: ($spacing-vertical / 4) ($spacing-vertical / 2);
&:hover {
background: var(--color-bg-alt);
background: var(--menu-item-hover-bg);
}
}

10
ui/scss/component/_modal.scss
View file

@ -10,7 +10,7 @@
left: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(255, 255, 255, 0.74902);
background-color: var(--modal-overlay-bg);
z-index: 9999;
}
@ -24,12 +24,12 @@
justify-content: center;
align-items: center;
border: 1px solid rgb(204, 204, 204);
background: rgb(255, 255, 255);
border: var(--modal-border);
background: var(--modal-bg);
overflow: auto;
border-radius: 4px;
padding: $spacing-vertical;
box-shadow: var(--modal-shadow);
box-shadow: var(--box-shadow-layer);
max-width: 400px;
word-break: break-word;
@ -52,7 +52,7 @@
}
.error-modal-overlay {
background: var(--color-dark-overlay);
background: var(--modal-overlay-bg);
}
.error-modal__content {

8
ui/scss/component/_table.scss
View file

@ -20,13 +20,13 @@ table.table-standard {
font-size: 0.9em;
padding: $spacing-vertical/4+1 8px $spacing-vertical/4-2;
text-align: left;
border-bottom: 1px solid #e2e2e2;
border-bottom: var(--table-border);
img {
vertical-align: text-bottom;
}
}
tr.thead:not(:first-child) th {
border-top: 1px solid #e2e2e2;
border-top: var(--table-border);
}
tfoot td {
padding: $spacing-vertical / 2 8px;
@ -35,10 +35,10 @@ table.table-standard {
tbody {
tr {
&:nth-child(even):not(.odd) {
background-color: #f4f4f4;
background-color: var(--table-item-odd);
}
&:nth-child(odd):not(.even) {
background-color: white;
background-color: var(--table-item-ever);
}
&.thead {
background: none;

4
ui/scss/component/_tooltip.scss
View file

@ -17,12 +17,12 @@
box-sizing: border-box;
padding: $spacing-vertical / 2;
width: var(--tooltip-width);
border: 1px solid #aaa;
border: var(--tooltip-border);
color: var(--tooltip-color);
background-color: var(--tooltip-bg);
font-size: calc(var(--font-size) * 7/8);
line-height: var(--font-line-height);
box-shadow: var(--tooltip-shadow);
box-shadow: var(--box-shadow-layer);
}
.tooltip--header .tooltip__link {