update overall scss structure
make styles more flexible / customizable
This commit is contained in:
btzr-io
parent
dccd52c7df
commit
3f3372c96a
10 changed files with 84 additions and 51 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -52,4 +52,4 @@ table.table-standard {
|
|||
|
||||
table.table-stretch {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in a new issue