diff options
| -rw-r--r-- | static/misc.css | 11 | ||||
| -rw-r--r-- | static/profile.css | 4 | ||||
| -rw-r--r-- | static/skeleton.css | 18 | ||||
| -rw-r--r-- | static/theme.css | 31 |
4 files changed, 61 insertions, 3 deletions
diff --git a/static/misc.css b/static/misc.css index 1f39795..bec57ed 100644 --- a/static/misc.css +++ b/static/misc.css @@ -167,11 +167,18 @@ summary { width: 1em; aspect-ratio: 1; content: ""; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m15 19l-1.425-1.4l4.6-4.6H2v-2h16.175L13.6 6.4L15 5l7 7z'/%3E%3C/svg%3E"); + background-color: currentColor; + -webkit-mask-image: var(--svg); + mask-image: var(--svg); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m15 19l-1.425-1.4l4.6-4.6H2v-2h16.175L13.6 6.4L15 5l7 7z'/%3E%3C/svg%3E"); } } details[open] > summary::before { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 19v-2h6.6L4 5.4L5.4 4L17 15.6V9h2v10z'/%3E%3C/svg%3E"); + --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 19v-2h6.6L4 5.4L5.4 4L17 15.6V9h2v10z'/%3E%3C/svg%3E"); } [hidden] { diff --git a/static/profile.css b/static/profile.css index 3634b23..ed92b44 100644 --- a/static/profile.css +++ b/static/profile.css @@ -64,6 +64,10 @@ border-radius: var(--border-radius); padding: var(--spacing-single) var(--spacing-double); width: max-content; + + &::before { + color: var(--clr-foreground-on-secondary); + } } details[open]:has(.pokeForm) > summary { border-radius: var(--border-radius) var(--border-radius) 0 0; diff --git a/static/skeleton.css b/static/skeleton.css index 4ec4670..81994c9 100644 --- a/static/skeleton.css +++ b/static/skeleton.css @@ -13,6 +13,13 @@ body { overflow-y: scroll; } +:link { + color: var(--clr-link-unvisited); +} +:visited { + color: var(--clr-link-visited); +} + header { background: var(--clr-primary); color: var(--clr-foreground-on-primary); @@ -26,6 +33,11 @@ header { width: 100%; box-sizing: border-box; z-index: 100; + + @media (prefers-color-scheme: dark) { + background: var(--clr-secondary); + color: var(--clr-foreground-on-secondary); + } } #siteTitle { @@ -61,7 +73,7 @@ nav { a { text-decoration: none; - color: inherit; + color: inherit !important; &:hover { text-decoration: underline; } @@ -83,6 +95,10 @@ nav { &.disabled { opacity: 0.6; } + @media (prefers-color-scheme: dark) { + background: var(--clr-background); + color: var(--clr-foreground); + } } } @media (width < 1200px) { diff --git a/static/theme.css b/static/theme.css index 442950b..b7629f0 100644 --- a/static/theme.css +++ b/static/theme.css @@ -26,6 +26,8 @@ --clr-action-dislike: var(--clr-negative); --clr-action-reshare: var(--clr-positive); --clr-action-reply: var(--clr-neutral); + --clr-link-unvisited: #233ed8; + --clr-link-visited: #7d20c9; /* margins and padding */ --spacing-half: 4px; @@ -52,3 +54,32 @@ accent-color: var(--clr-primary); } + +@media (prefers-color-scheme: dark) { + :root { + /* colours */ + --clr-primary: #daa3fa; + --clr-secondary: #3d3544; + --clr-lighter-primary: #c586e9; + --clr-positive: #70d170; + --clr-negative: #e46c6c; + --clr-neutral: #7daedb; + --clr-background: #161416; + --clr-note-background: #221c22; + --clr-note-selected-background: #352b2e; + --clr-profile-background: #1d1e25; + --clr-panel-background: #1d191f; + --clr-info-background: #2a2a3f; + --clr-warning-background: #3f3728; + --clr-error-background: #5e272b; + --clr-field-background: var(--clr-background); + --clr-foreground: #fae9fa; + --clr-lesser-foreground: #a495a5; + --clr-foreground-on-primary: var(--clr-background); + --clr-foreground-on-secondary: var(--clr-foreground); + --clr-border: #b781d444; + --clr-action-default: #7d6b83; + --clr-link-unvisited: #7fc0fd; + --clr-link-visited: #d67bfa; + } +} |