From 0af6789ef33745975e25357281c3c15afda3fffb Mon Sep 17 00:00:00 2001 From: f0x Date: Fri, 9 Sep 2022 01:39:10 +0200 Subject: [PATCH] colorscheme redesign, some other small css tweaks --- web/source/css/_colors.css | 91 ++++++++++++++++++----------------- web/source/css/base.css | 33 ++++++------- web/source/css/profile.css | 16 +++--- web/source/css/status.css | 99 ++++++++++++++++++-------------------- web/template/status.tmpl | 5 +- 5 files changed, 122 insertions(+), 122 deletions(-) diff --git a/web/source/css/_colors.css b/web/source/css/_colors.css index 0ef5450f..f8c26653 100644 --- a/web/source/css/_colors.css +++ b/web/source/css/_colors.css @@ -23,67 +23,70 @@ /* Color definitions */ -$near_white: #fafaff; +/* Foreground */ +$white1: #fafaff; /* default text color, contrast >= 5.0 with all $grays */ +$white2: #b3b5c6; /* less important text, can be used with $gray1 (6.8), $gray2 (5.5), $gray3 (4.9), $gray4 (4.5) */ -$sloth_gray1: #b0b0b5; -$sloth_gray2: #4d4e56; +/* Background shades, contrast >= 5.0 with $white1 (#fafaff) */ +$gray1: #2a2b2f; +$gray2: #35363b; +$gray3: #3a3b41; +$gray4: #45464e; +$gray5: #4d4e56; +$gray6: #575861; +$gray7: #5d5e67; +$gray8: #696a75; -$sloth_orange1: #e78e5a; -$sloth_orange2: #D87841; -$blue: #63b1de; // complementary color to $sloth_orange1 +$orange1: #fd6a00; /* Used for non-text accent colors, can be used as background: $gray1 for text color (contrast 4.6)*/ +$orange2: #ff853e; /* hover/selected accent to $orange1, can be used with $gray1 (5.7), $gray2 (4.6) */ -/* derivative colors */ +$blue1: #3a9fde; /* darker blue for smaller elements (borders), can only be used with $gray1 (4.7) */ +$blue2: #66befe; /* all-round accent color, can be used with $gray1 (6.8), $gray2 (5.5), $gray3 (4.9), $gray4 (4.5) */ +$blue3: #89caff; /* hover/selected accent to $blue2, can be used with $gray1 (7.9), $gray2 (6.3), $gray3 (5.6), $gray4 (5.2), $gray5 (4.7) */ -$sloth_gray2_darker3: color-mod($sloth_gray2 lightness(-3%)); -$sloth_gray2_darker5: color-mod($sloth_gray2 lightness(-5%)); -$sloth_gray2_darker7: color-mod($sloth_gray2 lightness(-7%)); -$sloth_gray2_darker15: color-mod($sloth_gray2 lightness(-15%)); -$sloth_gray2_lighter3: color-mod($sloth_gray2 lightness(+3%)); -$sloth_gray2_lighter5: color-mod($sloth_gray2 lightness(+5%)); +$fg: $white1; +$bg: $gray1; -$blue_lighter8: color-mod($blue lightness(+4%)); -$lightblue: color-mod($blue lightness(+16%)); +$bg-trans: color-mod($gray5 alpha(62%)); -$fg: $near_white; -$bg: $sloth_gray2_darker7; - -$bg_trans: color-mod($sloth_gray2 alpha(62%)); - -$bg_accent: $sloth_gray2_lighter3; -$fg_accent: $lightblue; -$border_accent: $sloth_orange2; +$bg-accent: $gray5; +$fg-accent: $blue3; +$fg-reduced: $white2; +$border-accent: $orange2; /* Color variables as used in a specific location */ -$footer_bg: $bg_accent; +$link-fg: $fg-accent; -$link_fg: $fg_accent; +$button-bg: $blue2; +$button-fg: $gray1; +$button-hover-bg: $blue3; -$button_border: 0.08rem solid color-mod($sloth_orange2 lightness(-15%)); -$button_bg: $blue_lighter8; -$button_fg: $sloth_gray2_darker15; -$button_hover_bg: $lightblue; +$toot-focus-bg: $gray5; +$toot-unfocus-bg: $gray3; -$status_focus_bg: $bg_accent; -$status_unfocus_bg: $sloth_gray2_darker3; -$status_info_fg: #CBCBD7; +$toot-info-bg: $gray4; -$bg_no_img_desc: $sloth_orange2; -$bg_sensitive: $sloth_gray2_darker15; +$no-img-desc-bg: $orange1; +$no-img-desc-fg: $gray1; + +$bg-sensitive: $gray1; $boxshadow: 0 0.4rem 1rem -0.1rem rgba(0,0,0,0.15); -$boxshadow_border: 0.08rem solid $sloth_gray2_darker5; +$boxshadow-border: 0.08rem solid $gray1; -$profile_avatar_border: 0.2rem solid $border_accent; +$avatar-border: $orange2; -$input_bg: $sloth_gray2_darker3; +$input-bg: $gray4; +$input-border: $blue1; +$input-focus-border: $blue3; -$settings-nav-bg: $bg_accent; -$settings-nav-header-fg: $sloth_gray2_darker15; -$settings-nav-header-bg: $sloth_orange2; +$settings-nav-bg: $bg-accent; +$settings-nav-header-fg: $white1; +$settings-nav-header-bg: $gray3; -$settings-nav-bg-active: $sloth_gray2_darker3; -$settings-nav-fg-active: $fg; +$settings-nav-bg-hover: $orange2; +$settings-nav-fg-hover: $gray1; -$settings-nav-bg-hover: $sloth_gray2; -/* $settings-nav-fg-hover: $sloth_gray2; */ \ No newline at end of file +$settings-nav-bg-active: $orange1; +$settings-nav-fg-active: $gray1; \ No newline at end of file diff --git a/web/source/css/base.css b/web/source/css/base.css index 3cdf19fe..2031ae02 100644 --- a/web/source/css/base.css +++ b/web/source/css/base.css @@ -34,7 +34,7 @@ $br: 0.4rem; // border radius for items that are framed/bordered // inside something with $br, eg avatar, header img -$br_inner: 0.2rem; +$br-inner: 0.2rem; html, body { padding: 0; @@ -42,7 +42,7 @@ html, body { background: $bg; color: $fg; font-family: "Noto Sans", sans-serif; - scrollbar-color: $sloth_orange1 $sloth_gray2_darker3; + scrollbar-color: $sloth-orange1 $sloth-gray2-darker3; } body { @@ -71,7 +71,7 @@ h1 { } a { - color: $link_fg; + color: $link-fg; } header, footer { @@ -85,7 +85,7 @@ header, footer { header a { margin: 2rem; - /* background: $header_bg; */ + /* background: $header-bg; */ display: flex; flex-direction: column; flex-wrap: wrap; @@ -109,7 +109,7 @@ header a { } } -.excerpt_top { +.excerpt-top { margin-top: -1rem; margin-bottom: 2rem; font-style: italic; @@ -119,15 +119,15 @@ header a { .count { font-weight: bold; - color: $fg_accent; + color: $fg-accent; } } main { section { - background: $bg_accent; + background: $bg-accent; box-shadow: $boxshadow; - border: $boxshadow_border; + border: $boxshadow-border; border-radius: $br; padding: 2rem; margin-bottom: 2rem; @@ -144,10 +144,10 @@ main { .button, button { border-radius: 0.2rem; - color: $button_fg; - background: $button_bg; + color: $button-fg; + background: $button-bg; box-shadow: $boxshadow; - border: $button_border; + border: $button-border; text-decoration: none; font-size: 1.2rem; font-weight: bold; @@ -158,7 +158,7 @@ main { font-family: 'Noto Sans', sans-serif; &:hover { - background: $button_hover_bg; + background: $button-hover-bg; } } @@ -191,7 +191,7 @@ section.apps { grid-template-columns: 25% 1fr; gap: 1.5rem; padding: 0.5rem; - background: $bg_accent; + background: $bg-accent; border-radius: 0.5rem; .logo { @@ -266,18 +266,17 @@ section.error { input, select, textarea { box-sizing: border-box; - border: 0.15rem solid $border_accent; + border: 0.15rem solid $input-border; border-radius: 0.1rem; color: $fg; - /* background: $input_bg; */ - background: $bg_accent; + background: $input-bg; width: 100%; font-family: 'Noto Sans', sans-serif; font-size: 1rem; padding: 0.3rem; &:focus { - border-color: $fg_accent; + border-color: $input-focus-border; } } diff --git a/web/source/css/profile.css b/web/source/css/profile.css index 4fa0b624..01ec077a 100644 --- a/web/source/css/profile.css +++ b/web/source/css/profile.css @@ -28,7 +28,7 @@ main { } .profile { - background: $bg_accent; + background: $bg-accent; display: grid; grid-template-rows: auto auto auto; grid-template-columns: auto; @@ -38,7 +38,7 @@ main { border-radius: $br; box-shadow: $boxshadow; - border: $boxshadow_border; + border: $boxshadow-border; .headerimage { width: 100%; @@ -50,7 +50,7 @@ main { width: 100%; height: 100%; object-fit: cover; - border-radius: $br_inner $br_inner 0 0; + border-radius: $br-inner $br-inner 0 0; } } @@ -69,7 +69,7 @@ main { #profile-basic-filler2 { grid-area: filler2; - background: $bg_trans; + background: $bg-trans; } .avatar { @@ -79,7 +79,7 @@ main { width: 8.5rem; grid-area: avatar; background: $bg; - border: $profile_avatar_border; + border: 0.2rem solid $avatar-border; padding: 0; border-radius: $br; position: relative; @@ -87,7 +87,7 @@ main { box-shadow: $boxshadow; img { object-fit: cover; - border-radius: $br_inner; + border-radius: $br-inner; width: 100%; height: 100%; } @@ -105,7 +105,7 @@ main { font-weight: bold; font-size: 2rem; line-height: 2.2rem; - background: $bg_trans; + background: $bg-trans; word-break: break-all; text-overflow: ellipsis; overflow: hidden; @@ -120,7 +120,7 @@ main { padding-top: 0; margin-top: 0.25rem; padding-bottom: 0.25rem; - color: $fg_accent; + color: $fg-accent; font-weight: bold; word-break: break-all; text-overflow: ellipsis; diff --git a/web/source/css/status.css b/web/source/css/status.css index 9a83a7fd..e1e88915 100644 --- a/web/source/css/status.css +++ b/web/source/css/status.css @@ -31,13 +31,13 @@ main { } .toot { - background: $status_unfocus_bg; + background: $toot-unfocus-bg; box-shadow: $boxshadow; - border: $boxshadow_border; + border: $boxshadow-border; position: relative; margin-bottom: $br; - border-radius: $br; - padding: 1.5rem 0; + padding-top: 1.5rem; + padding-bottom: 0.7rem; a { position: relative; @@ -49,27 +49,35 @@ main { .contentgrid { padding: 0 1.5rem; display: grid; - grid-template-columns: 4rem auto 1fr; - grid-template-rows: 1.5rem auto auto; + grid-template-columns: 4rem 1fr auto; + grid-template-rows: 1.5rem auto auto auto; column-gap: 0.5rem; } + .not-expanded { + color: $fg-reduced; + grid-column: 3; + grid-row: 1; + } + .avatar { - grid-row: span 2; + grid-row: span 3; aspect-ratio: 1/1; + display: flex; + border: 0.2rem solid $avatar-border; + border-radius: 0.4rem; + overflow: hidden; /* hides corners from img overflowing */ img { height: 100%; width: 100%; object-fit: cover; background: $bg; - border: 0.1rem solid $acc2; - border-radius: calc($br / 1.5); } } .displayname { - grid-column: span 2; + /* grid-column: span 2; */ font-weight: bold; font-size: 1.2rem; line-height: 2rem; @@ -82,7 +90,7 @@ main { } .username { - color: $link_fg; + color: $link-fg; line-height: 2rem; margin-top: -0.5rem; align-self: start; @@ -119,8 +127,8 @@ main { .text { margin: 0; - margin-top: 0.5rem; - grid-column: span 3; + /* margin-top: 0.5rem; */ + grid-column: 2 / span 2; grid-row: span 1; overflow: hidden; @@ -128,34 +136,34 @@ main { z-index: 2; a { - color: $link_fg; + color: $link-fg; text-decoration: underline; } .content { - padding-top: 0.5rem; + /* padding-top: 0.5rem; */ padding-bottom: 0.5rem; word-break: break-word; blockquote { padding: 0.5rem 0 0.5rem 1.5rem; - border-left: 0.2rem solid $sloth_orange1; + border-left: 0.2rem solid $sloth-orange1; margin-left: 1rem; font-style: italic; } hr { - border: 1px dashed $sloth_orange1; + border: 1px dashed $sloth-orange1; } pre, code { - background-color: $sloth_gray2_darker7; + background-color: $sloth-gray2-darker7; } code { padding: 0.25rem; - border-radius: $br_inner; + border-radius: $br-inner; } pre { @@ -249,7 +257,7 @@ main { .closed { transition: 0.3s; - background: $bg_sensitive; + background: $bg-sensitive; @supports (backdrop-filter: blur(2rem)) { background: transparent; backdrop-filter: blur(2rem); @@ -263,17 +271,17 @@ main { } .no-image-desc { - color: $button_fg; + color: $no-img-desc-fg; + background: $no-img-desc-bg; display: flex; position: absolute; bottom: 0.1rem; right: 0.4rem; margin-bottom: 0.4rem; margin-right: 0.4rem; - background: $bg_no_img_desc; padding: 0.1rem 0.45rem; border-radius: 100%; - border: 0.2rem solid $button_fg; + border: 0.2rem solid $button-fg; z-index: 3; i.fa { @@ -302,12 +310,13 @@ main { } .info { + background: $toot-info-bg; + color: $fg-reduced; display: none; - border-top: 0.15rem solid $status_unfocus_bg; + border-top: 0.15rem solid $toot-info-border; padding: 0.5rem 1.5rem; div { - position: relative; padding-right: 1.3rem; } @@ -317,30 +326,6 @@ main { grid-column: span 3; flex-wrap: wrap; - - div.stats::after { - display: none; - } - - div::after { - $size: 0.25rem; - display: block; - background: $fg_dark; - height: $size; - width: $size; - content: ""; - position: absolute; - top: calc((1.5rem - $size) / 2); - right: 0.55rem; - border-radius: 1rem; - } - - div:last-child { - &::after { - display: none; - } - margin-right: 0; - } } .toot-link { @@ -362,7 +347,7 @@ main { border-top-right-radius: $br; } - &:last-child { + &:last-child, &:last-child .info { /* bottom left, bottom right */ border-bottom-left-radius: $br; border-bottom-right-radius: $br; @@ -370,11 +355,21 @@ main { } &.expanded { - background: $status_focus_bg; + background: $toot-focus-bg; padding-bottom: 0; .contentgrid { - padding-bottom: 1rem; + .displayname { + grid-column: span 2; + } + + .text { + grid-column: 1 / span 3; + } + + .not-expanded { + display: none; + } } .info { diff --git a/web/template/status.tmpl b/web/template/status.tmpl index 16f724a9..1dc80a87 100644 --- a/web/template/status.tmpl +++ b/web/template/status.tmpl @@ -2,6 +2,10 @@ {{if .Account.DisplayName}}{{.Account.DisplayName}}{{else}}{{.Account.Username}}{{end}} @{{.Account.Acct}} +
+ {{.Visibility | visibilityIcon}} + {{.CreatedAt | timestamp}} +
{{if .SpoilerText}} @@ -43,7 +47,6 @@
{{.CreatedAt | timestamp}}
-
{{.Visibility | visibilityIcon}}
{{.RepliesCount}}
{{.ReblogsCount}}
{{.FavouritesCount}}