mirror of
https://github.com/zombieFox/nightTab.git
synced 2024-11-28 02:53:15 +01:00
[refactor] move css variables to stand alone file
This commit is contained in:
Kuldeep M
parent
e8dafed8aa
commit
dc399f2300
174
src/css/base.css
174
src/css/base.css
@ -1,129 +1,3 @@
|
||||
:root {
|
||||
--root-font-size: 14px;
|
||||
--black: 0, 0, 0;
|
||||
--white: 255, 255, 255;
|
||||
--shade-01: 38, 40, 49;
|
||||
--shade-02: 47, 51, 62;
|
||||
--shade-03: 57, 62, 75;
|
||||
--shade-04: 67, 73, 88;
|
||||
--shade-05: 77, 84, 101;
|
||||
--shade-06: 87, 95, 114;
|
||||
--shade-07: 97, 106, 127;
|
||||
--shade-08: 107, 117, 140;
|
||||
--shade-09: 117, 128, 153;
|
||||
--shade-10: 127, 139, 166;
|
||||
--shade-11: 137, 151, 180;
|
||||
--shade-12: 149, 162, 187;
|
||||
--shade-13: 162, 173, 195;
|
||||
--shade-14: 174, 184, 203;
|
||||
--shade-15: 187, 195, 211;
|
||||
--shade-16: 199, 206, 218;
|
||||
--shade-17: 212, 217, 226;
|
||||
--shade-18: 224, 228, 234;
|
||||
--shade-19: 237, 239, 242;
|
||||
--shade-20: 250, 250, 250;
|
||||
--button-text: var(--gray-12);
|
||||
--button-text-hover-focus: var(--style-neutral-text);
|
||||
--button-text-active: var(--style-neutral-text);
|
||||
--button-text-disabled: var(--gray-04);
|
||||
--button-link-text: var(--gray-12);
|
||||
--button-link-text-hover-focus: var(--style-neutral-text);
|
||||
--button-link-text-active: var(--style-neutral-text);
|
||||
--button-link-text-disabled: var(--gray-04);
|
||||
--form-input-text: var(--gray-16);
|
||||
--form-input-border: 2;
|
||||
--form-input-text-hover: var(--style-neutral-text);
|
||||
--form-input-text-focus: var(--style-neutral-text);
|
||||
--form-input-text-disabled: var(--gray-02);
|
||||
--form-input-text-disabled-helper-text: var(--gray-04);
|
||||
--form-input-placeholder: var(--gray-06);
|
||||
--form-input-placeholder-hover-focus: var(--gray-10);
|
||||
--form-input-placeholder-disabled: var(--gray-04);
|
||||
--form-label: var(--gray-12);
|
||||
--form-label-disabled: var(--gray-04);
|
||||
--form-checkbox-radio-label: var(--gray-12);
|
||||
--form-checkbox-radio-chcked-label: var(--gray-16);
|
||||
--form-checkbox-radio-disabled-label: var(--gray-04);
|
||||
--form-range-thumb: var(--gray-12);
|
||||
--theme-accent: 250, 130, 0;
|
||||
--theme-radius: 0.2rem;
|
||||
--line-width: 0.2em;
|
||||
--background: rgb(var(--gray-01));
|
||||
--gutter: 0.5rem;
|
||||
--font-regular: "Open Sans Regular", sans-serif;
|
||||
--font-bold: "Open Sans Bold", sans-serif;
|
||||
--font-light: "Open Sans Light", sans-serif;
|
||||
--font-fjalla: "Fjalla One Regular", sans-serif;
|
||||
--header-area-width: 100%;
|
||||
--header-shade-color: transparent;
|
||||
--header-shade-opacity: 0.95;
|
||||
--header-search-width: 0%;
|
||||
--header-border-top: 0;
|
||||
--header-border-bottom: 0;
|
||||
--header-date-size: 1em;
|
||||
--header-clock-size: 1em;
|
||||
--header-search-size: 1em;
|
||||
--header-button-size: 1em;
|
||||
--header-greeting-size: 1em;
|
||||
--header-transitional-size: 1em;
|
||||
--link-area-width: 100%;
|
||||
--link-area-gutter-multiplier: 2;
|
||||
--link-item-size: 1em;
|
||||
--link-item-display-letter-size: 2em;
|
||||
--link-item-display-icon-size: 2.5em;
|
||||
--link-item-name-size: 0.9em;
|
||||
--background-image: none;
|
||||
--background-opacity: 1;
|
||||
--background-scale: 1;
|
||||
--background-accent-opacity: 0;
|
||||
--background-blur: 0;
|
||||
--layout-width: 80%;
|
||||
--layout-padding-multiplier: 4;
|
||||
--layout-gutter-multiplier: 4;
|
||||
--animation-speed-fast: 0.2s;
|
||||
--animation-speed-medium: 0.4s;
|
||||
--animation-speed-slow: 0.6s;
|
||||
--shadow-small: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
--shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
--shadow-large: 0 3px 6px rgba(0, 0, 0, 0.1), 0 6px 12px rgba(0, 0, 0, 0.2);
|
||||
--z-index-background: 1000;
|
||||
--z-index-link: 2000;
|
||||
--z-index-header: 3000;
|
||||
--z-index-tip: 4000;
|
||||
--z-index-shade: 5000;
|
||||
--z-index-modal: 6000;
|
||||
--z-index-menu: 7000;
|
||||
--z-index-auto-suggest-list: 8000;
|
||||
--z-index-edge: 9000;
|
||||
/* breakpoint reference */
|
||||
/* can not be used in @media as of yet */
|
||||
--breakpoint-sm: 550px;
|
||||
--breakpoint-md: 700px;
|
||||
--breakpoint-lg: 900px;
|
||||
--breakpoint-xl: 1100px;
|
||||
--breakpoint-xxl: 1600px;
|
||||
}
|
||||
|
||||
:root.is-link-style-block {
|
||||
--link-item-width: 11em;
|
||||
--link-item-height: 10em;
|
||||
--link-item-url-height: 20%;
|
||||
--link-item-edit-height: 30%;
|
||||
}
|
||||
|
||||
:root.is-link-style-list {
|
||||
--link-item-width: 20em;
|
||||
--link-item-height: 4em;
|
||||
--link-item-url-height: 30%;
|
||||
--link-item-edit-height: 50%;
|
||||
}
|
||||
|
||||
@media (min-width: 700px) {
|
||||
:root {
|
||||
--root-font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: rgb(var(--theme-accent));
|
||||
color: rgb(var(--white));
|
||||
@ -174,51 +48,3 @@ body {
|
||||
.is-layout-alignment-vertical-bottom body {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.is-theme-style-dark {
|
||||
--gray-01: var(--shade-01);
|
||||
--gray-02: var(--shade-02);
|
||||
--gray-03: var(--shade-03);
|
||||
--gray-04: var(--shade-04);
|
||||
--gray-05: var(--shade-05);
|
||||
--gray-06: var(--shade-06);
|
||||
--gray-07: var(--shade-07);
|
||||
--gray-08: var(--shade-08);
|
||||
--gray-09: var(--shade-09);
|
||||
--gray-10: var(--shade-10);
|
||||
--gray-11: var(--shade-11);
|
||||
--gray-12: var(--shade-12);
|
||||
--gray-13: var(--shade-13);
|
||||
--gray-14: var(--shade-14);
|
||||
--gray-15: var(--shade-15);
|
||||
--gray-16: var(--shade-16);
|
||||
--gray-17: var(--shade-17);
|
||||
--gray-18: var(--shade-18);
|
||||
--gray-19: var(--shade-19);
|
||||
--gray-20: var(--shade-20);
|
||||
--style-neutral-text: var(--white);
|
||||
}
|
||||
|
||||
.is-theme-style-light {
|
||||
--gray-01: var(--shade-20);
|
||||
--gray-02: var(--shade-19);
|
||||
--gray-03: var(--shade-18);
|
||||
--gray-04: var(--shade-17);
|
||||
--gray-05: var(--shade-16);
|
||||
--gray-06: var(--shade-15);
|
||||
--gray-07: var(--shade-14);
|
||||
--gray-08: var(--shade-13);
|
||||
--gray-09: var(--shade-12);
|
||||
--gray-10: var(--shade-11);
|
||||
--gray-11: var(--shade-10);
|
||||
--gray-12: var(--shade-09);
|
||||
--gray-13: var(--shade-08);
|
||||
--gray-14: var(--shade-07);
|
||||
--gray-15: var(--shade-06);
|
||||
--gray-16: var(--shade-05);
|
||||
--gray-17: var(--shade-04);
|
||||
--gray-18: var(--shade-03);
|
||||
--gray-19: var(--shade-02);
|
||||
--gray-20: var(--shade-01);
|
||||
--style-neutral-text: var(--black);
|
||||
}
|
||||
|
||||
173
src/css/variables.css
Normal file
173
src/css/variables.css
Normal file
@ -0,0 +1,173 @@
|
||||
:root {
|
||||
--root-font-size: 14px;
|
||||
--black: 0, 0, 0;
|
||||
--white: 255, 255, 255;
|
||||
--shade-01: 38, 40, 49;
|
||||
--shade-02: 47, 51, 62;
|
||||
--shade-03: 57, 62, 75;
|
||||
--shade-04: 67, 73, 88;
|
||||
--shade-05: 77, 84, 101;
|
||||
--shade-06: 87, 95, 114;
|
||||
--shade-07: 97, 106, 127;
|
||||
--shade-08: 107, 117, 140;
|
||||
--shade-09: 117, 128, 153;
|
||||
--shade-10: 127, 139, 166;
|
||||
--shade-11: 137, 151, 180;
|
||||
--shade-12: 149, 162, 187;
|
||||
--shade-13: 162, 173, 195;
|
||||
--shade-14: 174, 184, 203;
|
||||
--shade-15: 187, 195, 211;
|
||||
--shade-16: 199, 206, 218;
|
||||
--shade-17: 212, 217, 226;
|
||||
--shade-18: 224, 228, 234;
|
||||
--shade-19: 237, 239, 242;
|
||||
--shade-20: 250, 250, 250;
|
||||
--button-text: var(--gray-12);
|
||||
--button-text-hover-focus: var(--style-neutral-text);
|
||||
--button-text-active: var(--style-neutral-text);
|
||||
--button-text-disabled: var(--gray-04);
|
||||
--button-link-text: var(--gray-12);
|
||||
--button-link-text-hover-focus: var(--style-neutral-text);
|
||||
--button-link-text-active: var(--style-neutral-text);
|
||||
--button-link-text-disabled: var(--gray-04);
|
||||
--form-input-text: var(--gray-16);
|
||||
--form-input-border: 2;
|
||||
--form-input-text-hover: var(--style-neutral-text);
|
||||
--form-input-text-focus: var(--style-neutral-text);
|
||||
--form-input-text-disabled: var(--gray-02);
|
||||
--form-input-text-disabled-helper-text: var(--gray-04);
|
||||
--form-input-placeholder: var(--gray-06);
|
||||
--form-input-placeholder-hover-focus: var(--gray-10);
|
||||
--form-input-placeholder-disabled: var(--gray-04);
|
||||
--form-label: var(--gray-12);
|
||||
--form-label-disabled: var(--gray-04);
|
||||
--form-checkbox-radio-label: var(--gray-12);
|
||||
--form-checkbox-radio-chcked-label: var(--gray-16);
|
||||
--form-checkbox-radio-disabled-label: var(--gray-04);
|
||||
--form-range-thumb: var(--gray-12);
|
||||
--theme-accent: 250, 130, 0;
|
||||
--theme-radius: 0.2rem;
|
||||
--line-width: 0.2em;
|
||||
--background: rgb(var(--gray-01));
|
||||
--gutter: 0.5rem;
|
||||
--font-regular: "Open Sans Regular", sans-serif;
|
||||
--font-bold: "Open Sans Bold", sans-serif;
|
||||
--font-light: "Open Sans Light", sans-serif;
|
||||
--font-fjalla: "Fjalla One Regular", sans-serif;
|
||||
--header-area-width: 100%;
|
||||
--header-shade-color: transparent;
|
||||
--header-shade-opacity: 0.95;
|
||||
--header-search-width: 0%;
|
||||
--header-border-top: 0;
|
||||
--header-border-bottom: 0;
|
||||
--header-date-size: 1em;
|
||||
--header-clock-size: 1em;
|
||||
--header-search-size: 1em;
|
||||
--header-button-size: 1em;
|
||||
--header-greeting-size: 1em;
|
||||
--header-transitional-size: 1em;
|
||||
--link-area-width: 100%;
|
||||
--link-area-gutter-multiplier: 2;
|
||||
--link-item-size: 1em;
|
||||
--link-item-display-letter-size: 2em;
|
||||
--link-item-display-icon-size: 2.5em;
|
||||
--link-item-name-size: 0.9em;
|
||||
--background-image: none;
|
||||
--background-opacity: 1;
|
||||
--background-scale: 1;
|
||||
--background-accent-opacity: 0;
|
||||
--background-blur: 0;
|
||||
--layout-width: 80%;
|
||||
--layout-padding-multiplier: 4;
|
||||
--layout-gutter-multiplier: 4;
|
||||
--animation-speed-fast: 0.2s;
|
||||
--animation-speed-medium: 0.4s;
|
||||
--animation-speed-slow: 0.6s;
|
||||
--shadow-small: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
--shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
--shadow-large: 0 3px 6px rgba(0, 0, 0, 0.1), 0 6px 12px rgba(0, 0, 0, 0.2);
|
||||
--z-index-background: 1000;
|
||||
--z-index-link: 2000;
|
||||
--z-index-header: 3000;
|
||||
--z-index-tip: 4000;
|
||||
--z-index-shade: 5000;
|
||||
--z-index-modal: 6000;
|
||||
--z-index-menu: 7000;
|
||||
--z-index-auto-suggest-list: 8000;
|
||||
--z-index-edge: 9000;
|
||||
/* breakpoint reference */
|
||||
/* can not be used in @media as of yet */
|
||||
--breakpoint-sm: 550px;
|
||||
--breakpoint-md: 700px;
|
||||
--breakpoint-lg: 900px;
|
||||
--breakpoint-xl: 1100px;
|
||||
--breakpoint-xxl: 1600px;
|
||||
}
|
||||
|
||||
.is-theme-style-dark {
|
||||
--gray-01: var(--shade-01);
|
||||
--gray-02: var(--shade-02);
|
||||
--gray-03: var(--shade-03);
|
||||
--gray-04: var(--shade-04);
|
||||
--gray-05: var(--shade-05);
|
||||
--gray-06: var(--shade-06);
|
||||
--gray-07: var(--shade-07);
|
||||
--gray-08: var(--shade-08);
|
||||
--gray-09: var(--shade-09);
|
||||
--gray-10: var(--shade-10);
|
||||
--gray-11: var(--shade-11);
|
||||
--gray-12: var(--shade-12);
|
||||
--gray-13: var(--shade-13);
|
||||
--gray-14: var(--shade-14);
|
||||
--gray-15: var(--shade-15);
|
||||
--gray-16: var(--shade-16);
|
||||
--gray-17: var(--shade-17);
|
||||
--gray-18: var(--shade-18);
|
||||
--gray-19: var(--shade-19);
|
||||
--gray-20: var(--shade-20);
|
||||
--style-neutral-text: var(--white);
|
||||
}
|
||||
|
||||
.is-theme-style-light {
|
||||
--gray-01: var(--shade-20);
|
||||
--gray-02: var(--shade-19);
|
||||
--gray-03: var(--shade-18);
|
||||
--gray-04: var(--shade-17);
|
||||
--gray-05: var(--shade-16);
|
||||
--gray-06: var(--shade-15);
|
||||
--gray-07: var(--shade-14);
|
||||
--gray-08: var(--shade-13);
|
||||
--gray-09: var(--shade-12);
|
||||
--gray-10: var(--shade-11);
|
||||
--gray-11: var(--shade-10);
|
||||
--gray-12: var(--shade-09);
|
||||
--gray-13: var(--shade-08);
|
||||
--gray-14: var(--shade-07);
|
||||
--gray-15: var(--shade-06);
|
||||
--gray-16: var(--shade-05);
|
||||
--gray-17: var(--shade-04);
|
||||
--gray-18: var(--shade-03);
|
||||
--gray-19: var(--shade-02);
|
||||
--gray-20: var(--shade-01);
|
||||
--style-neutral-text: var(--black);
|
||||
}
|
||||
|
||||
.is-link-style-block {
|
||||
--link-item-width: 11em;
|
||||
--link-item-height: 10em;
|
||||
--link-item-url-height: 20%;
|
||||
--link-item-edit-height: 30%;
|
||||
}
|
||||
|
||||
.is-link-style-list {
|
||||
--link-item-width: 20em;
|
||||
--link-item-height: 4em;
|
||||
--link-item-url-height: 30%;
|
||||
--link-item-edit-height: 50%;
|
||||
}
|
||||
|
||||
@media (min-width: 700px) {
|
||||
:root {
|
||||
--root-font-size: 16px;
|
||||
}
|
||||
}
|
||||
@ -7,6 +7,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
<title>New Tab</title>
|
||||
<link rel="stylesheet" href="css/reset.css">
|
||||
<link rel="stylesheet" href="css/variables.css">
|
||||
<link rel="stylesheet" href="css/base.css">
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
<link rel="stylesheet" href="css/edge.css">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user