fragmentize CSS for easier management
This commit is contained in:
buzz-lightsnack-2007
parent
b3c71efab3
commit
48e3a19881
7 changed files with 254 additions and 254 deletions
41
styles/colors/all.css
Normal file
41
styles/colors/all.css
Normal file
|
|
@ -0,0 +1,41 @@
|
||||||
|
@import url("/styles/colors/defaults.css");
|
||||||
|
|
||||||
|
body {
|
||||||
|
color: var(--font-color-main);
|
||||||
|
background-color: var(--background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.background {
|
||||||
|
background: linear-gradient(
|
||||||
|
25deg,
|
||||||
|
var(--primary-color-dark) 0%,
|
||||||
|
var(--primary-color) 62%,
|
||||||
|
var(--primary-color-raised-hover-solid) 100%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
main.container {
|
||||||
|
background-color: var(--background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
background-color: var(--background-color) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav#header {
|
||||||
|
background: linear-gradient(
|
||||||
|
335deg,
|
||||||
|
var(--primary-color-dark) 0%,
|
||||||
|
var(--primary-color) 62%,
|
||||||
|
var(--primary-color-raised-hover-solid) 100%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
nav .input-field input[type="search"], textarea {
|
||||||
|
color: var(--font-color-main) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.transparent {
|
||||||
|
background-color: transparent !important;
|
||||||
|
background: none !important;
|
||||||
|
}
|
||||||
69
styles/colors/defaults.css
Normal file
69
styles/colors/defaults.css
Normal file
|
|
@ -0,0 +1,69 @@
|
||||||
|
:root {
|
||||||
|
--font-color-main: rgba(0, 0, 0) !important;
|
||||||
|
--font-color-medium: rgba(25, 25, 25) !important;
|
||||||
|
--font-color-disabled: rgba(63, 63, 63) !important;
|
||||||
|
|
||||||
|
--error-color: #cf6679 !important;
|
||||||
|
|
||||||
|
--primary-color: rgba(255, 134, 57) !important;
|
||||||
|
--primary-color-dark: rgba(221, 106, 59) !important;
|
||||||
|
--primary-color-numeric: 255, 134, 57 !important;
|
||||||
|
--primary-color-raised-hover-solid: rgba(252, 162, 133) !important;
|
||||||
|
--primary-color-raised-focus-solid: rgba(221, 106, 59) !important;
|
||||||
|
|
||||||
|
--background-color-level-16dp-solid: rgba(255, 238, 235) !important;
|
||||||
|
|
||||||
|
--secondary-color: rgba(221, 106, 59, 1) !important;
|
||||||
|
--secondary-color-hover-solid: rgba(252, 162, 133) !important;
|
||||||
|
--secondary-color-focus-solid: rgba(221, 106, 59) !important;
|
||||||
|
|
||||||
|
--secondary-container-color: rgba(252, 162, 133) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--background-color: #000 !important;
|
||||||
|
--surface-color: #000000 !important;
|
||||||
|
|
||||||
|
--font-color-main: rgba(255, 255, 255) !important;
|
||||||
|
--font-color-medium: rgba(200, 200, 200) !important;
|
||||||
|
--font-color-disabled: rgba(255, 255, 255) !important;
|
||||||
|
|
||||||
|
--font-on-primary-color-main: rgba(255, 255, 255) !important;
|
||||||
|
--font-on-primary-color-dark-main: rgba(255, 255, 255) !important;
|
||||||
|
--font-on-primary-color-dark-medium: rgba(255, 255, 255) !important;
|
||||||
|
--font-on-primary-color-medium: rgba(0, 0, 0, 0.56) !important;
|
||||||
|
--font-on-primary-color-disabled: rgba(0, 0, 0, 0.38) !important;
|
||||||
|
|
||||||
|
--hover-color: rgba(255, 255, 255, 0.04) !important;
|
||||||
|
--focus-color: rgba(255, 255, 255, 0.12) !important;
|
||||||
|
--focus-color-solid: #424242 !important;
|
||||||
|
|
||||||
|
--background-color-disabled: rgba(255, 255, 255, 0.12) !important;
|
||||||
|
--background-color-level-4dp: rgba(255, 255, 255, 0.09) !important;
|
||||||
|
--background-color-level-16dp-solid: #262626 !important;
|
||||||
|
--background-color-card: var(--surface-color) !important;
|
||||||
|
--background-color-slight-emphasis: rgba(255, 255, 255, 0.05) !important;
|
||||||
|
|
||||||
|
--separator-color: #424242 !important;
|
||||||
|
--error-color: #cf6679 !important;
|
||||||
|
|
||||||
|
--slider-track-color: rgba(255, 255, 255, 0.26) !important;
|
||||||
|
--switch-thumb-off-color: #bababa !important;
|
||||||
|
|
||||||
|
--primary-color: rgba(255, 134, 57) !important;
|
||||||
|
--primary-color-dark: rgba(221, 106, 59) !important;
|
||||||
|
--primary-color-numeric: 255, 134, 57 !important;
|
||||||
|
--primary-color-raised-hover-solid: rgba(252, 162, 133) !important;
|
||||||
|
--primary-color-raised-focus-solid: rgba(221, 106, 59) !important;
|
||||||
|
|
||||||
|
--secondary-color: rgba(221, 106, 59) !important;
|
||||||
|
--secondary-color-hover-solid: rgba(252, 162, 133) !important;
|
||||||
|
--secondary-color-focus-solid: rgba(221, 106, 59) !important;
|
||||||
|
--font-on-secondary-container-color: rgba(255, 255, 255) !important;
|
||||||
|
|
||||||
|
--secondary-container-color: rgba(221, 106, 59) !important;
|
||||||
|
|
||||||
|
--md_sys_color_on-surface: 230, 225, 229 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
13
styles/fonts/all.article.css
Normal file
13
styles/fonts/all.article.css
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
#title {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
#author {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
5
styles/fonts/all.css
Normal file
5
styles/fonts/all.css
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
@import url("/styles/fonts/all.article.css");
|
||||||
|
|
||||||
|
.collapsible > li > header {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
78
styles/layouts/all.css
Normal file
78
styles/layouts/all.css
Normal file
|
|
@ -0,0 +1,78 @@
|
||||||
|
@import url("/styles/layouts/all.inputs.css");
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
padding: 2em !important;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
fieldset > legend {
|
||||||
|
padding: 0.5em !important;
|
||||||
|
}
|
||||||
|
fieldset > ul {
|
||||||
|
margin-top: 0em !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
fieldset > ul li {
|
||||||
|
padding-top: 0em !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
summary {
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
progress {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
main.container > * {
|
||||||
|
padding-bottom: .5em;
|
||||||
|
padding-top: .5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-row {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dual > * > *:not(nav) {
|
||||||
|
margin: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dual .container {
|
||||||
|
width: 90% !important;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav .input-field label {
|
||||||
|
left: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-field > button:not(:last-child) {
|
||||||
|
margin-right: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-wrapper {
|
||||||
|
position: sticky;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul:not(.dropdown-content) > li > a {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 601px) {
|
||||||
|
.dual .container {
|
||||||
|
width: 80% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 992px) {
|
||||||
|
body:has(.sidenav-fixed) [works-sidebar] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.sidenav-fixed + * {
|
||||||
|
padding-left: 300px;
|
||||||
|
}
|
||||||
|
}
|
||||||
45
styles/layouts/all.inputs.css
Normal file
45
styles/layouts/all.inputs.css
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
|
||||||
|
form ul > li:has(input[type="checkbox"]),
|
||||||
|
ul.input-field > li {
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
form ul:has(li input[type="checkbox"]),
|
||||||
|
ul.input-field {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group {
|
||||||
|
margin-block-start: 1em !important;
|
||||||
|
margin-block-end: 1em !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group:not(:has(input)) {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-group side:not(:has(input)) {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: end;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea[type="code"] {
|
||||||
|
font-family: monospace !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-field {
|
||||||
|
margin-bottom: .25em;
|
||||||
|
}
|
||||||
|
|
||||||
257
styles/ui.css
257
styles/ui.css
|
|
@ -1,254 +1,3 @@
|
||||||
:root {
|
@import url("/styles/colors/all.css");
|
||||||
--font-color-main: rgba(0, 0, 0) !important;
|
@import url("/styles/fonts/all.css");
|
||||||
--font-color-medium: rgba(25, 25, 25) !important;
|
@import url("/styles/layouts/all.css");
|
||||||
--font-color-disabled: rgba(63, 63, 63) !important;
|
|
||||||
|
|
||||||
--error-color: #cf6679 !important;
|
|
||||||
|
|
||||||
--primary-color: rgba(255, 134, 57) !important;
|
|
||||||
--primary-color-dark: rgba(221, 106, 59) !important;
|
|
||||||
--primary-color-numeric: 255, 134, 57 !important;
|
|
||||||
--primary-color-raised-hover-solid: rgba(252, 162, 133) !important;
|
|
||||||
--primary-color-raised-focus-solid: rgba(221, 106, 59) !important;
|
|
||||||
|
|
||||||
--background-color-level-16dp-solid: rgba(255, 238, 235) !important;
|
|
||||||
|
|
||||||
--secondary-color: rgba(221, 106, 59, 1) !important;
|
|
||||||
--secondary-color-hover-solid: rgba(252, 162, 133) !important;
|
|
||||||
--secondary-color-focus-solid: rgba(221, 106, 59) !important;
|
|
||||||
|
|
||||||
--secondary-container-color: rgba(252, 162, 133) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
:root {
|
|
||||||
--background-color: #000 !important;
|
|
||||||
--surface-color: #000000 !important;
|
|
||||||
|
|
||||||
--font-color-main: rgba(255, 255, 255) !important;
|
|
||||||
--font-color-medium: rgba(200, 200, 200) !important;
|
|
||||||
--font-color-disabled: rgba(255, 255, 255) !important;
|
|
||||||
|
|
||||||
--font-on-primary-color-main: rgba(255, 255, 255) !important;
|
|
||||||
--font-on-primary-color-dark-main: rgba(255, 255, 255) !important;
|
|
||||||
--font-on-primary-color-dark-medium: rgba(255, 255, 255) !important;
|
|
||||||
--font-on-primary-color-medium: rgba(0, 0, 0, 0.56) !important;
|
|
||||||
--font-on-primary-color-disabled: rgba(0, 0, 0, 0.38) !important;
|
|
||||||
|
|
||||||
--hover-color: rgba(255, 255, 255, 0.04) !important;
|
|
||||||
--focus-color: rgba(255, 255, 255, 0.12) !important;
|
|
||||||
--focus-color-solid: #424242 !important;
|
|
||||||
|
|
||||||
--background-color-disabled: rgba(255, 255, 255, 0.12) !important;
|
|
||||||
--background-color-level-4dp: rgba(255, 255, 255, 0.09) !important;
|
|
||||||
--background-color-level-16dp-solid: #262626 !important;
|
|
||||||
--background-color-card: var(--surface-color) !important;
|
|
||||||
--background-color-slight-emphasis: rgba(
|
|
||||||
255,
|
|
||||||
255,
|
|
||||||
255,
|
|
||||||
0.05
|
|
||||||
) !important;
|
|
||||||
|
|
||||||
--separator-color: #424242 !important;
|
|
||||||
--error-color: #cf6679 !important;
|
|
||||||
|
|
||||||
--slider-track-color: rgba(255, 255, 255, 0.26) !important;
|
|
||||||
--switch-thumb-off-color: #bababa !important;
|
|
||||||
|
|
||||||
--primary-color: rgba(255, 134, 57) !important;
|
|
||||||
--primary-color-dark: rgba(221, 106, 59) !important;
|
|
||||||
--primary-color-numeric: 255, 134, 57 !important;
|
|
||||||
--primary-color-raised-hover-solid: rgba(252, 162, 133) !important;
|
|
||||||
--primary-color-raised-focus-solid: rgba(221, 106, 59) !important;
|
|
||||||
|
|
||||||
--secondary-color: rgba(221, 106, 59) !important;
|
|
||||||
--secondary-color-hover-solid: rgba(252, 162, 133) !important;
|
|
||||||
--secondary-color-focus-solid: rgba(221, 106, 59) !important;
|
|
||||||
--font-on-secondary-container-color: rgba(255, 255, 255) !important;
|
|
||||||
|
|
||||||
--secondary-container-color: rgba(221, 106, 59) !important;
|
|
||||||
|
|
||||||
--md_sys_color_on-surface: 230, 225, 229 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
color: var(--font-color-main);
|
|
||||||
background-color: var(--background-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.background {
|
|
||||||
background: linear-gradient(
|
|
||||||
25deg,
|
|
||||||
var(--primary-color-dark) 0%,
|
|
||||||
var(--primary-color) 62%,
|
|
||||||
var(--primary-color-raised-hover-solid) 100%
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
main.container {
|
|
||||||
background-color: var(--background-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
nav {
|
|
||||||
background-color: var(--background-color) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav#header {
|
|
||||||
background: linear-gradient(
|
|
||||||
335deg,
|
|
||||||
var(--primary-color-dark) 0%,
|
|
||||||
var(--primary-color) 62%,
|
|
||||||
var(--primary-color-raised-hover-solid) 100%
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
nav .input-field input[type="search"] {
|
|
||||||
color: var(--font-color-main) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.sidenav-fixed + * {
|
|
||||||
padding-left: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
main.container > * {
|
|
||||||
padding-bottom: .5em;
|
|
||||||
padding-top: .5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.transparent {
|
|
||||||
background-color: transparent !important;
|
|
||||||
background: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 992px) {
|
|
||||||
ul.sidenav-fixed + * {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.collapsible > li > header {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
form ul > li:has(input[type="checkbox"]),
|
|
||||||
ul.input-field > li {
|
|
||||||
list-style-type: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
form ul:has(li input[type="checkbox"]),
|
|
||||||
ul.input-field {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-group {
|
|
||||||
margin-block-start: 1em !important;
|
|
||||||
margin-block-end: 1em !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-group:not(:has(input)) {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-group side:not(:has(input)) {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: end;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.field-row {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dual > * > *:not(nav) {
|
|
||||||
margin: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dual .container {
|
|
||||||
width: 90% !important;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (min-width: 601px) {
|
|
||||||
.dual .container {
|
|
||||||
width: 80% !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
nav .input-field label {
|
|
||||||
left: auto !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-field > button:not(:last-child) {
|
|
||||||
margin-right: 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-wrapper {
|
|
||||||
position: sticky;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (min-width: 992px) {
|
|
||||||
body:has(.sidenav-fixed) [works-sidebar] {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#title {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
#author {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav ul:not(.dropdown-content) > li > a {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
textarea {
|
|
||||||
resize: vertical;
|
|
||||||
color: var(--font-color-main);
|
|
||||||
}
|
|
||||||
|
|
||||||
textarea:focus {
|
|
||||||
outline: none;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
textarea[type="code"] {
|
|
||||||
font-family: monospace !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
fieldset {
|
|
||||||
padding: 2em !important;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
fieldset > legend {
|
|
||||||
padding: 0.5em !important;
|
|
||||||
}
|
|
||||||
fieldset > ul {
|
|
||||||
margin-top: 0em !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
fieldset > ul li {
|
|
||||||
padding-top: 0em !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-field {
|
|
||||||
margin-bottom: .25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
summary {
|
|
||||||
list-style-type: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
progress {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue