198 lines
3.5 KiB
CSS
198 lines
3.5 KiB
CSS
@import url('https://fonts.googleapis.com/css?family=Quicksand:700|Cabin:400');
|
|
|
|
|
|
body {
|
|
font-family: 'Cabin', sans-serif;
|
|
background-color: var(--background-primary);
|
|
color: var(--text);
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: 'Quicksand', sans-serif;
|
|
font-weight: bolder;
|
|
}
|
|
|
|
body {
|
|
--font-text-theme: Cabin, Quicksand;
|
|
--radius-s: 8px;
|
|
--radius-m: 12px;
|
|
--radius-l: 16px;
|
|
--input-radius: 12px;
|
|
--checkbox-radius: 12px;
|
|
--toggle-radius: 12px;
|
|
--toggle-thumb-radius: 12px;
|
|
--slider-thumb-radius: 12px;
|
|
}
|
|
|
|
.workspace-tab-header.is-active::before, .workspace-tab-header.is-active::after {
|
|
display: none;
|
|
}
|
|
|
|
svg * {
|
|
stroke-linecap: square;
|
|
stroke-linejoin: miter;
|
|
rx: 0;
|
|
ry: 0;
|
|
}
|
|
|
|
.menu {
|
|
padding: var(--size-2-1);
|
|
border-radius: var(--radius-m);
|
|
background-color: var(--background-primary);
|
|
color: var(--text);
|
|
}
|
|
|
|
.menu-item {
|
|
padding: var(--size-4-1) var(--size-4-2);
|
|
border-radius: var(--radius-s);
|
|
}
|
|
|
|
.menu-separator {
|
|
margin: var(--size-2-1) calc(var(--size-2-1) * -1);
|
|
}
|
|
|
|
.theme-light {
|
|
--text: rgb(2, 2, 34);
|
|
--background-primary: rgb(221, 223, 253);
|
|
--background-secondary: rgb(255, 255, 255);
|
|
--primary: rgb(7, 136, 82);
|
|
--secondary: rgb(104, 248, 154);
|
|
--accent: rgb(181, 208, 73);
|
|
|
|
--highlight-hue: 30;
|
|
--italic-color: #82c0e9;
|
|
--bold-color: #d86679;
|
|
--h1-color: #ffc444;
|
|
--h2-color: #faa250;
|
|
--h3-color: #f88765;
|
|
--h4-color: #f88773;
|
|
--h5-color: #f88773;
|
|
--h6-color: #f88773;
|
|
}
|
|
|
|
.theme-dark {
|
|
--text: rgb(221, 221, 253);
|
|
--background-primary: rgb(2, 4, 34);
|
|
--background-secondary: rgb(0, 0, 0);
|
|
--primary: rgb(119, 248, 194);
|
|
--secondary: rgb(7, 151, 57);
|
|
--accent: rgb(155, 182, 47);
|
|
|
|
--highlight-hue: 30;
|
|
--italic-color: #82c0e9;
|
|
--bold-color: #d86679;
|
|
--h1-color: #ffc444;
|
|
--h2-color: #faa250;
|
|
--h3-color: #f88765;
|
|
--h4-color: #f88773;
|
|
--h5-color: #f88773;
|
|
--h6-color: #f88773;
|
|
}
|
|
|
|
/* Add border-radius to additional elements */
|
|
.workspace-tab-header {
|
|
border-radius: var(--radius-m);
|
|
color: var(--text);
|
|
}
|
|
|
|
.workspace-tab-header.is-active {
|
|
border-radius: var(--tab-radius-active);
|
|
}
|
|
|
|
input, textarea {
|
|
border-radius: var(--input-radius);
|
|
background-color: var(--background-secondary);
|
|
color: var(--text);
|
|
}
|
|
|
|
.checkbox-container input[type="checkbox"] {
|
|
border-radius: var(--checkbox-radius);
|
|
}
|
|
|
|
.toggle-container input[type="checkbox"] + label {
|
|
border-radius: var(--toggle-radius);
|
|
}
|
|
|
|
.toggle-container input[type="checkbox"] + label:before {
|
|
border-radius: var(--toggle-thumb-radius);
|
|
}
|
|
|
|
input[type="range"]::-webkit-slider-thumb {
|
|
border-radius: var(--slider-thumb-radius);
|
|
}
|
|
|
|
body.theme-light {
|
|
background-color: var(--background-primary);
|
|
color: var(--text);
|
|
}
|
|
|
|
body.theme-dark {
|
|
background-color: var(--background-primary);
|
|
color: var(--text);
|
|
}
|
|
|
|
/* Custom colors for headings and text styles */
|
|
body.theme-light h1 {
|
|
color: var(--h1-color);
|
|
}
|
|
|
|
body.theme-light h2 {
|
|
color: var(--h2-color);
|
|
}
|
|
|
|
body.theme-light h3 {
|
|
color: var(--h3-color);
|
|
}
|
|
|
|
body.theme-light h4 {
|
|
color: var(--h4-color);
|
|
}
|
|
|
|
body.theme-light h5 {
|
|
color: var(--h5-color);
|
|
}
|
|
|
|
body.theme-light h6 {
|
|
color: var(--h6-color);
|
|
}
|
|
|
|
body.theme-dark h1 {
|
|
color: var(--h1-color);
|
|
}
|
|
|
|
body.theme-dark h2 {
|
|
color: var(--h2-color);
|
|
}
|
|
|
|
body.theme-dark h3 {
|
|
color: var(--h3-color);
|
|
}
|
|
|
|
body.theme-dark h4 {
|
|
color: var(--h4-color);
|
|
}
|
|
|
|
body.theme-dark h5 {
|
|
color: var(--h5-color);
|
|
}
|
|
|
|
body.theme-dark h6 {
|
|
color: var(--h6-color);
|
|
}
|
|
|
|
body.theme-light em {
|
|
color: var(--italic-color);
|
|
}
|
|
|
|
body.theme-dark em {
|
|
color: var(--italic-color);
|
|
}
|
|
|
|
body.theme-light strong {
|
|
color: var(--bold-color);
|
|
}
|
|
|
|
body.theme-dark strong {
|
|
color: var(--bold-color);
|
|
}
|