From 99593a19ef8ad9413425ca1a85022506610245b4 Mon Sep 17 00:00:00 2001
From: Eliseu Amaro <mail@eliseuama.ro>
Date: Mon, 7 Feb 2022 23:54:29 +0000
Subject: [PATCH] [CSS] Default theme polish work, more consistent font sizes
 and improved dark theme colors

---
 .../templates/collection/notes.html.twig      |  2 +-
 plugins/Oomox/Controller/Oomox.php            |  8 ++--
 public/assets/default_theme/css/base.css      |  4 --
 .../assets/default_theme/css/pages/feeds.css  |  4 --
 public/assets/default_theme/css/reset.css     | 46 +++++++------------
 public/assets/default_theme/css/root.css      | 20 ++++----
 .../default_theme/css/widgets/buttons.css     |  6 +--
 .../default_theme/css/widgets/sections.css    | 32 ++++++-------
 8 files changed, 51 insertions(+), 71 deletions(-)

diff --git a/components/Collection/templates/collection/notes.html.twig b/components/Collection/templates/collection/notes.html.twig
index bd1e1a7473..c08e98ac5a 100644
--- a/components/Collection/templates/collection/notes.html.twig
+++ b/components/Collection/templates/collection/notes.html.twig
@@ -24,7 +24,7 @@
                 {% if current_path starts with 'search' %}
                     <h3 class="heading-no-margin">{{ 'Notes found' | trans }}</h3>
                 {% else %}
-                    <span class="section-title">{{ 'Notes' | trans }}</span>
+                    <h1 class="section-title">{{ 'Notes' | trans }}</h1>
                 {% endif %}
             {% endif %}
             <nav class="feed-actions">
diff --git a/plugins/Oomox/Controller/Oomox.php b/plugins/Oomox/Controller/Oomox.php
index 467cd7500d..c449a1031f 100644
--- a/plugins/Oomox/Controller/Oomox.php
+++ b/plugins/Oomox/Controller/Oomox.php
@@ -80,10 +80,10 @@ class Oomox
                 $current_border          = $current_oomox_settings->getColourBorderLight() ?: '#d5d5d5';
                 $current_accent          = $current_oomox_settings->getColourAccentLight() ?: '#a22430';
             } else {
-                $current_foreground      = $current_oomox_settings->getColourForegroundDark() ?: '#f0f6f6';
-                $current_background_hard = $current_oomox_settings->getColourBackgroundHardDark() ?: '#141216';
-                $current_background_card = $current_oomox_settings->getColourBackgroundCardDark() ?: '#131217';
-                $current_border          = $current_oomox_settings->getColourBorderDark() ?: '#201f25';
+                $current_foreground      = $current_oomox_settings->getColourForegroundDark() ?: '#eff0f1';
+                $current_background_hard = $current_oomox_settings->getColourBackgroundHardDark() ?: '#0E0E0F';
+                $current_background_card = $current_oomox_settings->getColourBackgroundCardDark() ?: '#0E0E0F';
+                $current_border          = $current_oomox_settings->getColourBorderDark() ?: '#26262C';
                 $current_accent          = $current_oomox_settings->getColourAccentDark() ?: '#5ddbcf';
             }
         } else {
diff --git a/public/assets/default_theme/css/base.css b/public/assets/default_theme/css/base.css
index e99574c70b..cc8905b36f 100644
--- a/public/assets/default_theme/css/base.css
+++ b/public/assets/default_theme/css/base.css
@@ -54,10 +54,6 @@ hr {
     top: var(--s);
 }
 
-.heading-no-margin {
-    margin-bottom: initial;
-}
-
 .page-header {
     align-items: center;
     background: var(--gradient) !important;
diff --git a/public/assets/default_theme/css/pages/feeds.css b/public/assets/default_theme/css/pages/feeds.css
index 919481bb0a..3f9df8709c 100644
--- a/public/assets/default_theme/css/pages/feeds.css
+++ b/public/assets/default_theme/css/pages/feeds.css
@@ -134,10 +134,6 @@
     align-items: center;
 }
 
-.feed-header .section-title {
-    font-size: 1.383rem;
-}
-
 .feed-header .feed-actions {
     margin-left: auto;
     text-transform: capitalize;
diff --git a/public/assets/default_theme/css/reset.css b/public/assets/default_theme/css/reset.css
index b67d4cbdc0..3062967bd8 100644
--- a/public/assets/default_theme/css/reset.css
+++ b/public/assets/default_theme/css/reset.css
@@ -85,9 +85,7 @@ details > summary::-webkit-details-marker {
     display: none;
 }
 
-html {
-    font-size: 100%;
-}
+html {font-size: 100%;} /*12px*/
 
 body {
     font-family: 'Open Sans', sans-serif;
@@ -101,50 +99,40 @@ p {
     margin-bottom: 1rem;
 }
 
-h1, h2, h3, h4, h5, legend {
-    font-family: 'Poppins', sans-serif;
-    font-weight: 600;
-    line-height: 1.3;
-    margin: 3rem 0 1.38rem;
-}
-
 h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, legend:first-child {
     margin-top: initial;
 }
 
+h1, h2, h3, h4, h5 {
+    margin: 3rem 0 1.38rem;
+    font-family: 'Poppins', sans-serif;
+    font-weight: 900;
+    line-height: 1.3;
+}
+
 h1 {
-    font-size: 1.383rem;
     margin-top: 0;
+    font-size: 1.383rem;
 }
 
-h2 {
-    font-size: 1.296rem;
-}
+h2 {font-size: 1.296rem;}
 
-h3 {
-    font-size: 1.215rem;
-}
+h3 {font-size: 1.215rem;}
 
-h4 {
-    font-size: 1.138rem;
-}
+h4 {font-size: 1.138rem;}
 
-h5 {
-    font-size: 1.067rem;
-}
+h5 {font-size: 1.067rem;}
+
+small, .text_small {font-size: 0.937rem;}
 
 legend {
-    font-size: 1.296em;
-}
-
-.text_small, small {
-    font: .937rem 'Open Sans', sans-serif;
+    font-size: 1.25rem;
 }
 
 input[type=password], input[type=text], textarea {
     font-family: 'Open Sans', sans-serif;
     font-weight: 400;
-    padding: 4px 6px;
+    padding: 6px 8px;
 }
 
 ul {
diff --git a/public/assets/default_theme/css/root.css b/public/assets/default_theme/css/root.css
index 02ad051ee1..3039818e14 100644
--- a/public/assets/default_theme/css/root.css
+++ b/public/assets/default_theme/css/root.css
@@ -1,23 +1,23 @@
 :root {
-    --s: .6rem;
+    --s: 0.666rem;
     --unit: 1rem;
-    --m: 1.3rem;
-    --xl: 1.62rem;
-    --xxl: 3rem;
+    --m: 1.067rem;
+    --xl: 1.138rem;
+    --xxl: 3.2rem;
 }
 
 @media(prefers-color-scheme:dark) {
     :root {
-        --foreground: #f0f6f6;
-        --background-hard: #141216;
-        --background-card: #131217;
-        --border: #26242D;
+        --foreground: #eff0f1;
+        --background-hard: #0E0E0F;
+        --background-card: #0E0E0F;
+        --border: #26262C;
         --accent: #5ddbcf;
         --shadow: 0 5px 20px -10px rgba(255,255,255,0.1)!important;
         --shadow-inset-accent: inset 0 0 0 2px var(--accent);
         --background-checkerboard: repeating-conic-gradient(#ffffff66 0 90deg,#ffffff33 0 180deg) 0 0/40px 40px round;
-        --gradient: linear-gradient(10deg,var(--border) 0,transparent 90%)!important;
-        --gradient-backwards: linear-gradient(290deg,var(--border) 0,var(--background-card) 100%)!important;
+        --gradient: linear-gradient(10deg,var(--border) -33%,transparent 66%)!important;
+        --gradient-backwards: linear-gradient(-10deg,var(--border) -33%,transparent 66%)!important;
     }
 }
 
diff --git a/public/assets/default_theme/css/widgets/buttons.css b/public/assets/default_theme/css/widgets/buttons.css
index 24e9f1eb87..5cdf388f1a 100644
--- a/public/assets/default_theme/css/widgets/buttons.css
+++ b/public/assets/default_theme/css/widgets/buttons.css
@@ -1,5 +1,5 @@
 label {
-    font-weight: 700;
+    font-weight: 900;
 }
 
 input + label {
@@ -23,7 +23,7 @@ input[type=file] {
     cursor: pointer;
     fill: var(--foreground);
     font-family: 'Open Sans', sans-serif !important;
-    font-weight: 700 !important;
+    font-weight: 900 !important;
     margin: 3px;
 }
 
@@ -49,7 +49,7 @@ button, label {
 }
 button {
     font-family: 'Poppins', sans-serif;
-    font-weight: 700 !important;
+    font-weight: 900 !important;
 }
 
 select::-ms-expand {
diff --git a/public/assets/default_theme/css/widgets/sections.css b/public/assets/default_theme/css/widgets/sections.css
index 68c8697e8b..81354d12f3 100644
--- a/public/assets/default_theme/css/widgets/sections.css
+++ b/public/assets/default_theme/css/widgets/sections.css
@@ -76,8 +76,6 @@
 }
 
 .details-subtitle-summary ~ [class|="form-row"] {
-    font-size: .937rem;
-    max-font-size: .937rem !important;
     padding: var(--s);
 }
 
@@ -165,7 +163,7 @@
     border-radius: var(--s);
     display: block;
     font-family: 'Poppins', sans-serif;
-    font-weight: 700;
+    font-weight: 900;
     padding: 6px 8px;
     width: max-content;
 }
@@ -177,7 +175,7 @@
 .frame-section-paging {
     display: block;
     font-family: 'Poppins', sans-serif;
-    font-weight: 700;
+    font-weight: 900;
     margin-left: auto;
     margin-top: var(--s);
     padding: 6px 12px;
@@ -216,7 +214,7 @@
     border: 1px solid var(--border);
     border-radius: var(--s);
     display: inline-block;
-    font-weight: 700;
+    font-weight: 900;
     margin-right: var(--s);
     margin-top: var(--s);
     padding: 4px 8px;
@@ -244,7 +242,8 @@
 }
 
 .profile-info-url-nickname {
-    font-size: var(--m);
+    font-size: 1.215rem;
+    font-weight: 900;
 }
 
 .profile-info-url-remote {
@@ -257,7 +256,6 @@
 
 .profile-stats {
     align-self: center;
-    font-size: .937rem;
     margin-left: auto;
     opacity: .66;
     text-align: right;
@@ -302,18 +300,25 @@
 .section-details-subtitle summary, .section-details-title summary {
     background: var(--gradient);
     border-radius: var(--s);
+    outline: 1px solid var(--border);
     display: inline-block;
     width: 100%;
 }
 
 .details-summary-title {
     line-height: initial;
-    font-weight: 700;
-    font-size: 1.067em;
-    padding: 6px 12px;
+    font-size: 1.215rem;
+    font-weight: 900;
+    padding: 6px 8px;
 }
 .details-summary-subtitle {
-    font-weight: 700;
+    font-size: 1em;
+    font-weight: bold;
+}
+
+.heading-no-margin {
+    font-size: 1.215rem;
+    font-weight: 900;
 }
 
 .details-summary-title:after {
@@ -358,10 +363,6 @@
     width: 100%;
 }
 
-.section-form .section-details-subtitle summary {
-    border: 1px solid var(--border);
-}
-
 .section-form-legend {
     font-weight: 700;
     margin-bottom: var(--s);
@@ -369,7 +370,6 @@
 }
 
 .section-title {
-    font-weight: 700;
     margin-bottom: unset;
 }