diff --git a/.github/actions/compile-themes/action.yml b/.github/actions/compile-themes/action.yml index 3470a71..3423d1d 100644 --- a/.github/actions/compile-themes/action.yml +++ b/.github/actions/compile-themes/action.yml @@ -22,4 +22,5 @@ runs: sass src/themes/chimera-autumn.scss build/chimera-autumn.css sass src/themes/chimera-plain.scss build/chimera-plain.css sass src/themes/chimera-blues.scss build/chimera-blues.css + sass src/themes/chimera-nightsky.scss build/chimera-nightsky.css shell: bash diff --git a/build/chimera-nightsky.css b/build/chimera-nightsky.css new file mode 100644 index 0000000..a7b9576 --- /dev/null +++ b/build/chimera-nightsky.css @@ -0,0 +1,303 @@ +button, +input[type=button], +input[type=submit], textarea, +input { + outline: none; + transition: 150ms, box-shadow 150ms ease-in-out; +} + +button:focus, textarea:focus, +input:focus { + box-shadow: 0 0 0 3px rgba(157, 38, 217, 0.75); +} + +textarea, +input { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; + color: hsl(0, 0%, 95%); + background-color: hsl(210, 30%, 10%); + font-size: medium; + border-radius: 0.5em; + border: solid 2px hsl(210, 30%, 20%); + width: 100%; + margin: 0.5em 0; + padding: 0.75em 0 0.75em 0.75em; + resize: none; +} + +textarea:disabled, +input:disabled { + color: hsl(210, 30%, 60%); +} + +textarea { + resize: vertical; +} + +button, +input[type=button], +input[type=submit], textarea, +input { + outline: none; + transition: 150ms, box-shadow 150ms ease-in-out; +} + +button:focus, textarea:focus, +input:focus { + box-shadow: 0 0 0 3px rgba(157, 38, 217, 0.75); +} + +button, +input[type=button], +input[type=submit] { + background-color: hsl(210, 90%, 30%); + color: hsl(0, 0%, 75%); + font-size: medium; + padding: 0.5em 0.75em; + border: 0; + border-radius: 0.5em; +} + +button:hover, +input[type=button]:hover, +input[type=submit]:hover { + background-color: hsl(210, 90%, 20%); + border-color: hsl(210, 90%, 20%); + cursor: pointer; +} + +button:active, +input[type=button]:active, +input[type=submit]:active { + border-color: hsl(210, 90%, 10%); + background-color: hsl(210, 90%, 10%); +} + +button:disabled, +input[type=button]:disabled, +input[type=submit]:disabled { + border-color: hsl(210, 90%, 10%); + background-color: hsl(210, 90%, 10%); + cursor: default; +} + +blockquote { + line-height: 2em; + background-color: hsl(210, 20%, 5%); + width: 100%; + box-sizing: border-box; + border-left: 0.25em solid hsl(210, 90%, 30%); + border-radius: 0 0.5em 0.5em 0; + padding: 1em; + margin: 0; +} + +code, +kbd, +var, +samp, pre { + background-color: hsl(210, 20%, 5%); + border-radius: 8px; + font-family: monospace; +} + +pre { + padding: 10px; + overflow-x: auto; + width: 100%; +} + +code, +kbd, +var, +samp { + padding: 4px 8px; + line-height: 1.5; +} + +mark { + background-color: hsla(210, 90%, 30%, 0.1); + padding: 0.2em; + color: hsl(0, 0%, 95%); +} + +underline { + text-decoration: underline; +} + +italic { + font-style: italic; +} + +abbr { + text-decoration: underline dotted; + cursor: help; +} + +hr { + background-color: hsl(210, 90%, 30%); + height: 0.1em; + width: 100%; + border: 0; + margin: 1em 0; +} + +img { + width: 100%; + height: auto; +} + +label { + font-weight: 600; +} + +a { + color: hsl(210, 90%, 50%); + text-decoration: none; +} + +a:hover { + color: hsl(280, 70%, 50%); + cursor: pointer; +} + +a:active { + color: hsl(210, 90%, 10%); +} + +a:focus { + color: hsl(280, 70%, 50%); +} + +li, ul { + margin-left: 1.5em; + padding: 0; + line-height: 2em; +} + +ul { + list-style: disc; +} + +li { + list-style: inherit; +} + +radio, +checkbox { + line-height: 1.1; + display: grid; + grid-template-columns: 1em auto; + gap: 0.5em; + align-items: center; +} + +input[type=radio], input[type=checkbox] { + appearance: none; + margin: 0; + padding: 0; + width: 1em; + height: 1em; + border: 2px solid hsl(210, 30%, 20%); + display: grid; + place-content: center; +} + +input[type=checkbox] { + border-radius: 0.05em; +} + +input[type=radio] { + border-radius: 1em; +} + +input[type=checkbox]:hover, +input[type=radio]:hover { + border: 2px solid hsl(210, 90%, 30%); + cursor: pointer; +} + +input[type=radio]::before, input[type=checkbox]::before { + transition: 200ms transform ease-in-out; + transform: scale(0); + width: 0.5em; + height: 0.5em; + background-color: hsl(210, 90%, 30%); + content: ""; +} + +input[type=checkbox]::before { + border-radius: 0.05em; +} + +input[type=radio]::before { + border-radius: 0.2em; +} + +input[type=checkbox]:checked::before, +input[type=radio]:checked::before { + transform: scale(1); +} + +td, th { + border: 0.1em solid hsl(210, 30%, 20%); + padding: 0.5em; + text-align: left; +} + +table { + width: 100%; + border-collapse: collapse; +} + +th { + font-weight: 600; + background-color: hsla(210, 90%, 30%, 0.1); +} + +td { + font-weight: 200; +} + +h6, h5, h4, h3, h2, h1 { + font-weight: 400; + margin-top: 0.5em; + margin-bottom: 0.5em; +} + +h1 { + font-size: 3em; +} + +h2 { + font-size: 2.5em; +} + +h3 { + font-size: 2em; +} + +h4 { + font-size: 1.5em; +} + +h5 { + font-size: 1.25em; +} + +h6 { + font-size: 1em; +} + +p { + line-height: 1.5; + font-weight: 300; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; + color: hsl(0, 0%, 95%); + background: hsl(210, 30%, 10%); +} + +/*# sourceMappingURL=chimera-nightsky.css.map */ diff --git a/build/chimera-nightsky.css.map b/build/chimera-nightsky.css.map new file mode 100644 index 0000000..ec08619 --- /dev/null +++ b/build/chimera-nightsky.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../src/elements/_focus.scss","../src/elements/_textfields.scss","../src/themes/chimera-nightsky.scss","../src/elements/_buttons.scss","../src/elements/_blockquotes.scss","../src/elements/_formatted-text.scss","../src/elements/_horisontal-rule.scss","../src/elements/_images.scss","../src/elements/_labels.scss","../src/elements/_links.scss","../src/elements/_lists.scss","../src/elements/_radio-checkbox.scss","../src/elements/_tables.scss","../src/elements/_text.scss","../src/elements/_base.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;EACI;EACA;;;AAGJ;AAAA;EACI;;;ACJJ;AAAA;EAGE,aCJW;EDKX,OCEa;EDDb,kBCIW;EDHX;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE,OCTsB;;;ADYxB;EACE;;;ADvBF;AAAA;AAAA;AAAA;EACI;EACA;;;AAGJ;AAAA;EACI;;;AGJJ;AAAA;AAAA;EAIE,kBDDQ;ECER,ODEuB;ECDvB;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE,kBDXa;ECYb,cDZa;ECab;;;AAGF;AAAA;AAAA;EAGE,cDlBe;ECmBf,kBDnBe;;;ACsBjB;AAAA;AAAA;EAGE,cDzBe;EC0Bf,kBD1Be;EC2Bf;;;AClCF;EACE;EACA,kBFUqB;EETrB;EACA;EACA;EACA;EACA;EACA;;;ACRF;AAAA;AAAA;AAAA;EACE,kBHWqB;EGVrB;EACA;;;AAGF;EAEE;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;EAKE;EACA;;;AAGF;EACE,kBHRa;EGSb;EACA,OHjBa;;;AGoBf;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;ACtCF;EACE,kBJIQ;EIHR;EACA;EACA;EACA;;;ACLF;EACE;EACA;;;ACFF;EACE;;;ACDF;EACE,OPYa;EOXb;;;AAGF;EACE,OPQc;EOPd;;;AAGF;EACE,OPJe;;;AOOjB;EACE,OPDc;;;AQdhB;EACE;EACA;EACA;;;AAGF;EAEE;;;AAGF;EAEE;;;ACbF;AAAA;EAEI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EAEI;;;AAGJ;EAEI;;;AAGJ;AAAA;EAEI;EACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA,kBTpCQ;ESqCR;;;AAGF;EAEI;;;AAGJ;EAEI;;;AAGJ;AAAA;EAEI;;;ACzDJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EAEE;EACA,kBVCa;;;AUEf;EAEE;;;ACnBF;EACE;EACA;EACA;;;AAGF;EAEE;;;AAGF;EAEE;;;AAGF;EAEE;;;AAGF;EAEE;;;AAGF;EAEE;;;AAGF;EAEE;;;AAGF;EACE;EACA;;;ACtCF;EACE;EACA,OZMa;EYLb,YZQW","file":"chimera-nightsky.css"} \ No newline at end of file diff --git a/src/themes/chimera-nightsky.scss b/src/themes/chimera-nightsky.scss new file mode 100644 index 0000000..43577a9 --- /dev/null +++ b/src/themes/chimera-nightsky.scss @@ -0,0 +1,19 @@ +// fonts +$font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + "Helvetica Neue", Arial, "Noto Sans", sans-serif; + +//Color palette +$Chimera: hsl(210, 90%, 30%); // Dark Blue +$Chimera-dark: hsl(210, 90%, 20%); // Darker Blue +$Chimera-darker: hsl(210, 90%, 10%); // Darkest Blue +$Chimera-text: hsl(0, 0%, 95%); // Light Gray +$Chimera-text-secondary: hsl(0, 0%, 75%); +$Chimera-text-disabled: hsl(210, 30%, 60%); +$Chimera-bg: hsl(210, 30%, 10%); // Very Dark Blue +$Chimera-bg-secondary: hsl(210, 20%, 5%); +$Chimera-link: hsl(210, 90%, 50%); +$Chimera-focus: hsl(280, 70%, 50%); +$Chimera-fill: hsla(210, 90%, 30%, 10%); +$Chimera-border: hsl(210, 30%, 20%); + +@import "../elements/main";