foo/tilde
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor css variables

Browse Source
This commit is contained in:
Cade Scroggins
2022-02-20 11:58:14 -08:00
parent 0bd820b371
commit 3ddf0ded47
1 changed files with 54 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+54 -60
View File
@@ -86,7 +86,7 @@
* *
* - "Default" suggestions come from CONFIG.suggestionDefaults (sync) * - "Default" suggestions come from CONFIG.suggestionDefaults (sync)
* - "History" suggestions come from your previously entered queries (sync) * - "History" suggestions come from your previously entered queries (sync)
* - "DuckDuckGo" suggestions come from the DuckDuckGo search api (async) * - "DuckDuckGo" suggestions come from the DuckDuckGo search API (async)
* *
* To disable suggestions, remove all influencers. * To disable suggestions, remove all influencers.
*/ */
@@ -387,60 +387,57 @@
<style> <style>
:root { :root {
--base-background: #000; --base-background: #000;
--base-border-radius: 0; --base-border-radius: 4px;
--base-font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue,
Helvetica, Ubuntu, Roboto, Noto, Segoe UI, Arial, sans-serif;
--base-font-size: 16px; --base-font-size: 16px;
--base-font-weight-black: 900;
--base-font-weight-bold: 700;
--base-font-weight-normal: 400;
--base-foreground: #fff; --base-foreground: #fff;
--base-space: 1.5rem;
--clock-font-family: var(--font-family);
--clock-font-size: 3rem; --clock-font-size: 3rem;
--command-background: #181818;
--command-color-alpha: 1; --command-color-alpha: 1;
--command-color-gradient: 135deg; --command-color-gradient: 135deg;
--command-color-lightness: 50%; --command-color-lightness: 50%;
--command-color-saturation: 40%; --command-color-saturation: 40%;
--font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, --command-foreground: var(--base-foreground);
Ubuntu, Roboto, Noto, Segoe UI, Arial, sans-serif; --command-height: 4rem;
--font-weight-black: 900; --command-padding: calc(var(--command-height) / 2 - 1ch / 2);
--font-weight-bold: 700; --help-grid-columns: 1;
--font-weight-normal: 400; --help-grid-gap: 1rem;
--help-background: var(--base-background); --help-overlay-background: var(--base-background);
--help-command-background: #181818; --help-overlay-foreground: var(--base-foreground);
--help-command-columns: 1;
--help-command-foreground: var(--base-foreground);
--help-foreground: var(--base-foreground);
--pill-height: 3.5rem;
--search-background: var(--base-background);
--search-foreground: var(--base-foreground);
--search-highlight-background: var(--base-foreground);
--search-highlight-foreground: var(--base-background);
--search-input-font-size: 2rem; --search-input-font-size: 2rem;
--search-input-foreground: var(--base-foreground);
--search-input-text-align: left; --search-input-text-align: left;
--search-suggestions-align-items: flex-start; --search-overlay-background: var(--base-background);
--search-suggestions-flex-direction: column; --search-overlay-foreground: var(--base-foreground);
--suggestion-height: 3rem;
--suggestion-highlight-background: var(--search-overlay-foreground);
--suggestion-highlight-foreground: var(--search-overlay-background);
--suggestion-padding: calc(var(--suggestion-height) / 2 - 1ch / 2);
--suggestions-flex-direction: column;
} }
@media (min-width: 600px) { @media (min-width: 600px) {
:root { :root {
--base-border-radius: 4px;
--clock-font-size: 5rem; --clock-font-size: 5rem;
--help-command-columns: 2; --help-grid-columns: 2;
--search-input-text-align: center;
--search-suggestions-align-items: center;
} }
} }
@media (min-width: 900px) { @media (min-width: 900px) {
:root { :root {
--clock-font-size: 7rem; --clock-font-size: 7rem;
--help-command-columns: 3; --help-grid-columns: 3;
--search-input-font-size: 3rem; --search-input-font-size: 3rem;
--search-suggestions-flex-direction: row; --suggestions-flex-direction: row;
} }
} }
@media (min-width: 1400px) { @media (min-width: 1400px) {
:root { :root {
--help-command-columns: 5; --help-grid-columns: 5;
} }
} }
@@ -449,9 +446,9 @@
} }
html { html {
font-family: var(--font-family); font-family: var(--base-font-family);
font-size: var(--base-font-size); font-size: var(--base-font-size);
font-weight: var(--font-weight-normal); font-weight: var(--base-font-weight-normal);
} }
body { body {
@@ -474,8 +471,8 @@
padding: 0; padding: 0;
background: transparent; background: transparent;
color: inherit; color: inherit;
font-family: var(--font-family); font-family: var(--base-font-family);
font-weight: var(--font-weight-normal); font-weight: var(--base-font-weight-normal);
font-size: 1rem; font-size: 1rem;
} }
@@ -523,15 +520,14 @@
.clock { .clock {
display: block; display: block;
font-family: var(--clock-font-family);
font-size: var(--clock-font-size); font-size: var(--clock-font-size);
cursor: pointer; cursor: pointer;
} }
.help { .help {
background: var(--help-background); background: var(--help-overlay-background);
visibility: hidden; visibility: hidden;
color: var(--help-foreground); color: var(--help-overlay-foreground);
z-index: 1; z-index: 1;
} }
@@ -545,18 +541,18 @@
.command-list { .command-list {
display: grid; display: grid;
grid-gap: var(--base-space); grid-gap: var(--help-grid-gap);
grid-template-columns: repeat(var(--help-command-columns), 1fr); grid-template-columns: repeat(var(--help-grid-columns), 1fr);
padding: 6rem 0; padding: 6rem 0;
} }
.command { .command {
display: flex; display: flex;
background-color: var(--help-command-background); background-color: var(--command-background);
border-radius: var(--base-border-radius); border-radius: var(--base-border-radius);
color: var(--help-command-foreground); color: var(--command-foreground);
opacity: 0.85; opacity: 0.85;
line-height: var(--pill-height); line-height: var(--command-height);
text-decoration: none; text-decoration: none;
} }
@@ -569,19 +565,19 @@
} }
.command-key { .command-key {
width: var(--pill-height); width: var(--command-height);
border-radius: var(--base-border-radius); border-radius: var(--base-border-radius);
font-weight: var(--font-weight-bold); font-weight: var(--base-font-weight-bold);
text-align: center; text-align: center;
} }
.command-name { .command-name {
padding: 0 var(--base-space); padding: 0 var(--command-padding);
} }
.search-form { .search-form {
background: var(--search-background); background: var(--search-overlay-background);
color: var(--search-foreground); color: var(--search-overlay-foreground);
visibility: hidden; visibility: hidden;
} }
@@ -595,21 +591,19 @@
.search-input { .search-input {
width: 100%; width: 100%;
padding: 0 var(--base-space);
color: var(--search-input-foreground);
font-size: var(--search-input-font-size); font-size: var(--search-input-font-size);
font-weight: var(--font-weight-black); font-weight: var(--base-font-weight-black);
text-align: var(--search-input-text-align); text-align: center;
text-transform: uppercase; text-transform: uppercase;
} }
.search-suggestions { .search-suggestions {
display: none; display: none;
justify-content: center; justify-content: center;
align-items: var(--search-suggestions-align-items); align-items: center;
flex-direction: var(--search-suggestions-flex-direction); flex-direction: var(--suggestions-flex-direction);
flex-wrap: wrap; flex-wrap: wrap;
margin-top: var(--pill-height); margin-top: var(--suggestion-padding);
overflow: hidden; overflow: hidden;
} }
@@ -618,21 +612,21 @@
} }
.search-suggestion { .search-suggestion {
padding: 0 var(--base-space);
border-radius: var(--base-border-radius); border-radius: var(--base-border-radius);
font-weight: var(--font-weight-bold);
line-height: var(--pill-height);
white-space: nowrap;
cursor: pointer; cursor: pointer;
font-weight: var(--base-font-weight-bold);
height: var(--suggestion-height);
padding: 0 var(--suggestion-padding);
white-space: nowrap;
} }
.search-suggestion.highlight { .search-suggestion.highlight {
background: var(--search-highlight-background); background: var(--suggestion-highlight-background);
color: var(--search-highlight-foreground); color: var(--suggestion-highlight-foreground);
} }
.search-suggestion-match { .search-suggestion-match {
font-weight: var(--font-weight-normal); font-weight: var(--base-font-weight-normal);
} }
</style> </style>