From 8f8070036c556c82d0742e879fcf98b0e9a34340 Mon Sep 17 00:00:00 2001 From: Eliseu Amaro Date: Fri, 28 Jan 2022 18:21:04 +0000 Subject: [PATCH] [CSS] Eliminated repeated rules, improved icon alignment, and removed checkbox and radio custom styling Browser specific quirks made it impossible to stylize checkbox and radio buttons. High DPI, custom default font sizes and/or custom GTK themes make it very difficult to keep it consistent. --- public/assets/default_theme/css/base.css | 12 +++-- .../assets/default_theme/css/pages/feeds.css | 23 +------- .../default_theme/css/widgets/buttons.css | 52 ++----------------- .../default_theme/css/widgets/sections.css | 2 +- .../assets/default_theme/icons/check-off.svg | 2 +- .../assets/default_theme/icons/check-on.svg | 2 +- public/assets/icons/edit.svg.twig | 2 +- 7 files changed, 19 insertions(+), 76 deletions(-) diff --git a/public/assets/default_theme/css/base.css b/public/assets/default_theme/css/base.css index b05ebd5616..e99574c70b 100644 --- a/public/assets/default_theme/css/base.css +++ b/public/assets/default_theme/css/base.css @@ -14,12 +14,14 @@ hr { } .icon { - align-self: center; + vertical-align: center; fill: var(--foreground); + height: 1em; + width: 1em; } .active { - font: 600 1.1em Poppins, sans-serif; + font: 600 1em Poppins, sans-serif; } .anchor-hidden { @@ -57,7 +59,7 @@ hr { } .page-header { - align-items: baseline; + align-items: center; background: var(--gradient) !important; box-shadow: var(--shadow); display: flex; @@ -134,6 +136,10 @@ hr { right: 0; } +.panel-left-icon, .panel-right-icon { + display: inherit; +} + .section-panel .panel-content { background: var(--background-hard); display: block; diff --git a/public/assets/default_theme/css/pages/feeds.css b/public/assets/default_theme/css/pages/feeds.css index 81a6a3557d..eab59a9ba3 100644 --- a/public/assets/default_theme/css/pages/feeds.css +++ b/public/assets/default_theme/css/pages/feeds.css @@ -1,22 +1,3 @@ -.button-container { - background-color: var(--foreground); - border: none !important; - display: inline-block; - height: 14px; - opacity: .33; - width: 14px; -} - -.button-container:focus, .button-container:hover { - background-color: var(--accent); - border: none !important; - opacity: 1; -} - -.button-container:not(:first-of-type) { - margin-left: var(--s); -} - .favourite-button-container { -moz-mask-image: url(../../icons/heart.svg); -o-mask-image: url(../../icons/heart.svg); @@ -83,8 +64,6 @@ .feed-actions-details summary, .note-actions-extra-details summary { display: block; - height: var(--unit); - width: var(--unit); } .feed-actions-details-dropdown { @@ -275,6 +254,8 @@ embed header { margin: unset; } .note-actions-extra-details summary { + width: 1em; + height: 1em; opacity: 0.5; } .note-actions-extra-details[open] > summary + * > a { diff --git a/public/assets/default_theme/css/widgets/buttons.css b/public/assets/default_theme/css/widgets/buttons.css index 5306fde0af..2a1ecfbf36 100644 --- a/public/assets/default_theme/css/widgets/buttons.css +++ b/public/assets/default_theme/css/widgets/buttons.css @@ -1,36 +1,9 @@ -input { - all: unset; +label { + font-weight: 700; } -input[type=checkbox] { - background: var(--accent) !important; - cursor: pointer; - display: inline-block; - height: 1em !important; - width: 1em !important; -} - -input[type=checkbox]:not(:hover,:focus) { - background: var(--foreground) !important; -} - -input[type=checkbox] { - border: unset !important; -} - -input[type=radio] { - background: var(--border); - border-radius: 50%; - box-shadow: inset 0 0 0 2px var(--background-hard) !important; - display: inline-block; - height: var(--s) !important; - padding-right: 4px !important; - width: var(--s) !important; -} - -input[type=radio]:checked { - background: var(--foreground); - box-shadow: inset 0 0 0 2px var(--foreground) !important; +input + label { + margin-left: 3px; } input[type=file] { @@ -43,22 +16,6 @@ input[type=file] { padding: unset !important; } -input[type=checkbox] { - -moz-mask-image: url(../../icons/check-off.svg) !important; - -o-mask-image: url(../../icons/check-off.svg) !important; - -webkit-mask-image: url(../../icons/check-off.svg) !important; - background-size: contain !important; - margin-right: 4px !important; - mask-image: url(../../icons/check-off.svg) !important; -} - -input[type=checkbox]:checked { - -moz-mask-image: url(../../icons/check-on.svg) !important; - -o-mask-image: url(../../icons/check-on.svg) !important; - -webkit-mask-image: url(../../icons/check-on.svg) !important; - mask-image: url(../../icons/check-on.svg) !important; -} - input[type=color] { appearance: none; background-color: transparent; @@ -123,7 +80,6 @@ button, input, select, textarea { border-radius: var(--s); display: inline-block; font-size: inherit; - line-height: initial !important; max-width: border-box !important; overflow: hidden; padding: 6px 8px !important; diff --git a/public/assets/default_theme/css/widgets/sections.css b/public/assets/default_theme/css/widgets/sections.css index 46240dee24..bd5574ba02 100644 --- a/public/assets/default_theme/css/widgets/sections.css +++ b/public/assets/default_theme/css/widgets/sections.css @@ -33,10 +33,10 @@ border: none !important; display: inline-block; height: var(--unit); + width: var(--unit); mask-repeat: no-repeat !important; mask-size: cover !important; opacity: .33; - width: var(--unit); } .button-container:focus, .button-container:hover { diff --git a/public/assets/default_theme/icons/check-off.svg b/public/assets/default_theme/icons/check-off.svg index 4ef37c7372..23a5d2ed11 100644 --- a/public/assets/default_theme/icons/check-off.svg +++ b/public/assets/default_theme/icons/check-off.svg @@ -1,5 +1,5 @@ - + \ No newline at end of file diff --git a/public/assets/default_theme/icons/check-on.svg b/public/assets/default_theme/icons/check-on.svg index 672cfa9d47..5a9468f428 100644 --- a/public/assets/default_theme/icons/check-on.svg +++ b/public/assets/default_theme/icons/check-on.svg @@ -1,5 +1,5 @@ - + \ No newline at end of file diff --git a/public/assets/icons/edit.svg.twig b/public/assets/icons/edit.svg.twig index 39605d3ac8..02a1f5eef1 100644 --- a/public/assets/icons/edit.svg.twig +++ b/public/assets/icons/edit.svg.twig @@ -1,6 +1,6 @@ - + Edit