From 337fe272a33c93653cd53230a41a3707a37e279d Mon Sep 17 00:00:00 2001
From: Eliseu Amaro <mail@eliseuama.ro>
Date: Mon, 15 Nov 2021 14:07:05 +0000
Subject: [PATCH] [CSS] Re-arranged CSS rules, overall refactor to minimize
 duplications.

---
 public/assets/default_theme/css/base.css      | 231 ++++++++---------
 .../assets/default_theme/css/pages/feeds.css  |   6 +-
 .../default_theme/css/pages/settings.css      |  54 ++--
 .../default_theme/css/widgets/buttons.css     | 244 +++++++++---------
 .../default_theme/css/widgets/sections.css    |  24 +-
 5 files changed, 274 insertions(+), 285 deletions(-)

diff --git a/public/assets/default_theme/css/base.css b/public/assets/default_theme/css/base.css
index 9e5304ed83..f9b0df05f6 100644
--- a/public/assets/default_theme/css/base.css
+++ b/public/assets/default_theme/css/base.css
@@ -1,46 +1,43 @@
 @import url("../fonts/poppins/poppins.css");
+
 @import url("../fonts/opensans/opensans.css");
+
 @import url("widgets/buttons.css");
+
 @import url("widgets/sections.css");
 
-/* Sizes vars */
 :root {
-    --smaller: 0.6rem;
+    --smaller: .6rem;
     --default: 1rem;
     --small: 1.3rem;
     --medium: 1.62rem;
     --big: 3rem;
 }
 
-/* RESET START */
 * {
     -webkit-box-sizing: border-box !important;
     -moz-box-sizing: border-box !important;
     box-sizing: border-box !important;
 }
 
-body,
-html {
+body,html {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     background-attachment: fixed;
-    font-family: 'Open Sans', sans-serif;
+    font-family: 'Open Sans',sans-serif;
     font-size: var(--default);
 }
 
-body,
-input,
-textarea,
-select {
+body,input,textarea,select {
     color: var(--foreground);
     fill: var(--foreground);
 }
 
-:link,
-:visited {
+:link,:visited {
     text-decoration: none;
     color: currentColor;
 }
+
 a:hover {
     text-decoration: underline;
 }
@@ -52,27 +49,18 @@ hr {
     background-color: var(--border) !important;
 }
 
-ol,
-ul {
+ol,ul {
     list-style: none;
 }
 
-blockquote,
-body,
-fieldset,
-form,
-html,
-input,
-pre,
-textarea {
+blockquote,body,fieldset,form,html,input,pre,textarea {
     margin: 0;
     padding: 0;
-    border: none;
+    border: 0;
 }
-:link img,
-:visited img,
-a img {
-    border: none;
+
+:link img,:visited img,a img {
+    border: 0;
 }
 
 address {
@@ -80,28 +68,27 @@ address {
 }
 
 :focus {
-    outline: none;
+    outline: 0;
 }
 
 ::-moz-focus-inner {
     border: 0;
 }
 
-details summary > * {
+details summary>* {
     margin: unset;
     padding: unset;
 }
 
-details > summary {
+details>summary {
     list-style: none;
 }
 
-details > summary::-webkit-details-marker {
+details>summary::-webkit-details-marker {
     display: none;
 }
 
-/* Internet Explorer <details> graceful degradation */
-@supports not (-ms-ime-align: auto) {
+@supports not(-ms-ime-align:auto) {
     details summary {
         cursor: pointer;
     }
@@ -111,15 +98,10 @@ details > summary::-webkit-details-marker {
     display: none;
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
+h1,h2,h3,h4,h5,h6 {
     all: unset;
     display: block;
-    font-family: 'Poppins', sans-serif;
+    font-family: 'Poppins',sans-serif;
 }
 
 h1 {
@@ -140,26 +122,28 @@ h3 {
     margin-bottom: 10px;
 }
 
-h4,
-h5 {
+h4,h5 {
     font-size: var(--default);
     font-weight: 400;
     margin-bottom: 6.1px;
 }
 
 p {
-    font-family: 'Open Sans', sans-serif;
+    font-family: 'Open Sans',sans-serif;
     font-size: var(--default);
     font-weight: 400;
     margin: unset;
 }
+
 p:first-line {
     padding-left: var(--default);
 }
+
 p:first-line {
     margin-top: 0;
     margin-bottom: 10px;
 }
+
 p:not(:first-line) {
     margin-top: 10px;
     margin-bottom: 10px;
@@ -169,10 +153,8 @@ label {
     max-width: 100%;
 }
 
-input[type=password],
-input[type=text],
-textarea {
-    font-family: 'Open Sans', sans-serif;
+input[type=password],input[type=text],textarea {
+    font-family: 'Open Sans',sans-serif;
     font-weight: 400;
     padding: 4px 6px;
 }
@@ -189,89 +171,75 @@ li {
     padding: 0;
 }
 
-/* Focus and hover (inset shadow is used in alternative to a border to prevent further redraws) */
 *:focus {
--webkit-box-shadow: var(--shadow-inset-accent);
--moz-box-shadow: var(--shadow-inset-accent);
-box-shadow: var(--shadow-inset-accent);
+    -webkit-box-shadow: var(--shadow-inset-accent);
+    -moz-box-shadow: var(--shadow-inset-accent);
+    box-shadow: var(--shadow-inset-accent);
 }
-/* RESET END */
 
-/* DARK AND LIGHT COLOUR SCHEMES START */
-    @media (prefers-color-scheme: dark) {
-        /* Colour vars */
-        :root {
-            --foreground: #F0F6F6;
-            --background-hard: #141216;
-            --background-card: #131217;
-            --border: #201F25;
-            --accent: #5ddbcf;
-            --shadow: 0 0 12px 0 #01010166;
-            --shadow-inset-accent: inset 0 0 0 2px var(--accent);
-            --background-checkerboard: repeating-conic-gradient(#ffffff66 0deg 90deg, #ffffff33 0deg 180deg) 0 0/40px 40px round;
-            --gradient: linear-gradient(10deg,  var(--border) 0%, transparent 100%) !important;
-            --gradient-backwards: linear-gradient(290deg,  var(--border) 0%, var(--background-card) 100%) !important;
-        }
-
-        /* The page background image itself */
-        .background-image {
-            background-color: var(--background-hard);
-        }
-        /* Select element custom dropdown arrow */
-        select {
-            background: var(--gradient), url("../images/select_drop_dark.png") no-repeat center right 5px !important;
-            background-size: cover, 16px !important;
-        }
+@media(prefers-color-scheme:dark) {
+    :root {
+        --foreground: #f0f6f6;
+        --background-hard: #141216;
+        --background-card: #131217;
+        --border: #201f25;
+        --accent: #5ddbcf;
+        --shadow: 0 0 12px 0 #01010166;
+        --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 100%) !important;
+        --gradient-backwards: linear-gradient(290deg,var(--border) 0,var(--background-card) 100%) !important;
     }
 
-    @media (prefers-color-scheme: light) {
-        /* Colour vars */
-        :root {
-            --foreground: #09090D;
-            --background-hard: #EBEBEB;
-            --background-card: #F0F0F0;
-            --border: #D5D5D5;
-            --accent: #A22430;
-            --shadow: 0 0 12px 0 #24243416;
-            --shadow-inset-accent: inset 0 0 0 2px var(--accent);
-            --background-checkerboard: repeating-conic-gradient(#ffffff66 0deg 90deg, #ffffff33 0deg 180deg) 0 0/40px 40px round;
-            --gradient: linear-gradient(290deg,  var(--border) 0%, transparent 60%) !important;
-            --gradient-backwards: linear-gradient(290deg,  var(--border) 0%, var(--background-card) 100%) !important;
-        }
-
-        /* The page background image itself */
-        .background-image {
-            background-color: var(--background-hard);
-        }
-        /* Select element custom dropdown arrow */
-        select {
-            background: var(--gradient), url("../images/select_drop_light.png") no-repeat center right 5px !important;
-            background-size: cover, 16px !important;
-            background-blend-mode: saturation;
-        }
+    .background-image {
+        background-color: var(--background-hard);
     }
-/* DARK AND LIGHT COLOUR SCHEMES END */
 
-/* MISCELLANEOUS START */
-/* Align all icon .svg to center */
+    select {
+        background: var(--gradient),url("../images/select_drop_dark.png") no-repeat center right 5px !important;
+        background-size: cover,16px !important;
+    }
+}
+
+@media(prefers-color-scheme:light) {
+    :root {
+        --foreground: #09090d;
+        --background-hard: #ebebeb;
+        --background-card: #f0f0f0;
+        --border: #d5d5d5;
+        --accent: #a22430;
+        --shadow: 0 0 12px 0 #24243416;
+        --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(290deg,var(--border) 0,transparent 60%) !important;
+        --gradient-backwards: linear-gradient(290deg,var(--border) 0,var(--background-card) 100%) !important;
+    }
+
+    .background-image {
+        background-color: var(--background-hard);
+    }
+
+    select {
+        background: var(--gradient),url("../images/select_drop_light.png") no-repeat center right 5px !important;
+        background-size: cover,16px !important;
+        background-blend-mode: saturation;
+    }
+}
+
 .icon {
     align-self: center;
 }
 
-/* All active links should pop up, the user should be aware where it is */
 .active {
     font-weight: bold;
 }
 
-/* Hide all anchors used for accesskey shortcuts */
 .anchor-hidden {
     width: 1px;
     height: 1px;
     overflow: hidden;
 }
-/* MISCELLANEOUS END */
 
-/* Background image and noise (Firefox-based browsers present banding without it) */
 .background-image {
     background-position: center;
     background-repeat: no-repeat;
@@ -299,6 +267,7 @@ box-shadow: var(--shadow-inset-accent);
     list-style-type: disc;
     margin-left: var(--small);
 }
+
 .accessibility-menu:focus-within:not(:active) {
     top: var(--smaller);
     left: var(--smaller);
@@ -306,7 +275,7 @@ box-shadow: var(--shadow-inset-accent);
 
 .page-header {
     z-index: 1;
-    font-family: 'Poppins', sans-serif;
+    font-family: 'Poppins',sans-serif;
     font-size: var(--medium);
     height: var(--big);
     display: flex;
@@ -319,7 +288,7 @@ box-shadow: var(--shadow-inset-accent);
     background: var(--gradient) !important;
     box-shadow: var(--shadow);
 }
-/* Allow scrolling all the way to the top ("page-header" has a height of 3rem) */
+
 html {
     scroll-margin-top: var(--big);
 }
@@ -333,7 +302,7 @@ html {
     margin-left: auto;
 }
 
-.header-instance > * {
+.header-instance>* {
     margin: unset;
 }
 
@@ -341,7 +310,8 @@ html {
     justify-self: flex-end;
     margin-left: auto;
 }
-.header-extra-actions[open] > *:not(summary) {
+
+.header-extra-actions[open]>*:not(summary) {
     z-index: 2;
     position: absolute;
     top: 100%;
@@ -381,12 +351,12 @@ html {
 }
 
 .markdown-blocks ul li {
-    margin-bottom: 0.2em;
+    margin-bottom: .2em;
 }
 
 .doc-navigation {
     border-radius: var(--smaller) var(--smaller) 0 0;
-    border-bottom: none;
+    border-bottom: 0;
     padding: var(--smaller);
     background-color: var(--background-card) !important;
 }
@@ -432,7 +402,7 @@ html {
     -moz-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
-    font-family: 'Open Sans', sans-serif;
+    font-family: 'Open Sans',sans-serif;
     font-size: var(--default);
     position: fixed;
     top: 0;
@@ -444,7 +414,7 @@ html {
     overflow-y: auto;
 }
 
-@media only screen and (min-width: 1281px) {
+@media only screen and (min-width:1281px) {
     .page-content {
         padding: var(--smaller) var(--medium) 0;
     }
@@ -453,7 +423,7 @@ html {
         width: 19vw;
     }
 
-    a[id|="anchor"]:target + .accessibility-target {
+    a[id|="anchor"]:target+.accessibility-target {
         -webkit-animation-name: highlight;
         -moz-animation-name: highlight;
         -o-animation-name: highlight;
@@ -468,7 +438,8 @@ html {
         animation-timing-function: ease-in-out;
     }
 }
-@media only screen and (max-width: 1280px) {
+
+@media only screen and (max-width:1280px) {
     .page-content-wrapper {
         width: 100%;
     }
@@ -477,17 +448,15 @@ html {
         max-width: 100%;
     }
 
-    .header-extra-actions[open] > *:not(summary) {
+    .header-extra-actions[open]>*:not(summary) {
         width: 100%;
     }
 
-    #panel-left-toggle:not(:checked) + .header-panel,
-    #panel-right-toggle:not(:checked) + .header-panel {
+    #panel-left-toggle:not(:checked)+.header-panel,#panel-right-toggle:not(:checked)+.header-panel {
         display: none;
     }
-    #panel-left-toggle:checked + .header-panel,
-    #panel-right-toggle:checked + .header-panel,
-    a[id|="anchor"]:target ~ .panel-content {
+
+    #panel-left-toggle:checked+.header-panel,#panel-right-toggle:checked+.header-panel,a[id|="anchor"]:target ~ .panel-content {
         display: -webkit-box;
         display: -webkit-flex;
         display: -moz-box;
@@ -515,6 +484,7 @@ html {
         transform: none;
     }
 }
+
 @-moz-keyframes fadeIn {
     0% {
         opacity: 0;
@@ -527,6 +497,7 @@ html {
         transform: none;
     }
 }
+
 @-o-keyframes fadeIn {
     0% {
         opacity: 0;
@@ -539,6 +510,7 @@ html {
         transform: none;
     }
 }
+
 @keyframes fadeIn {
     0% {
         opacity: 0;
@@ -555,6 +527,7 @@ html {
         transform: none;
     }
 }
+
 @-webkit-keyframes fadeOut {
     100% {
         opacity: 0;
@@ -567,6 +540,7 @@ html {
         transform: none;
     }
 }
+
 @-moz-keyframes fadeOut {
     100% {
         opacity: 0;
@@ -579,6 +553,7 @@ html {
         transform: none;
     }
 }
+
 @-o-keyframes fadeOut {
     100% {
         opacity: 0;
@@ -591,6 +566,7 @@ html {
         transform: none;
     }
 }
+
 @keyframes fadeOut {
     100% {
         opacity: 0;
@@ -607,6 +583,7 @@ html {
         transform: none;
     }
 }
+
 @media (prefers-color-scheme: dark) {
     @-webkit-keyframes highlight {
         0% {
@@ -617,7 +594,8 @@ html {
         }
         50% {
             -webkit-border-rns
-Enable/disabadius: var(--smaller);
+            Enable/
+            disabadius: var(--smaller);
             border-radius: var(--smaller);
             -webkit-box-shadow: inset 0 20px 40px #FFF;
             box-shadow: inset 0 20px 40px #FFF;
@@ -714,6 +692,7 @@ Enable/disabadius: var(--smaller);
         }
     }
 }
+
 @media (prefers-color-scheme: light) {
     @-webkit-keyframes highlight {
         0% {
diff --git a/public/assets/default_theme/css/pages/feeds.css b/public/assets/default_theme/css/pages/feeds.css
index 2bf5f2daae..d54334b9af 100644
--- a/public/assets/default_theme/css/pages/feeds.css
+++ b/public/assets/default_theme/css/pages/feeds.css
@@ -1,5 +1,4 @@
 
-
 .notes hr {
     margin-top: var(--smaller)
 }
@@ -182,12 +181,15 @@ embed header {
     -ms-grid-row-align: center;
     align-self: center
 }
+
 .note-author-fullname {
     font-weight: bold;
 }
+
 .note-author-nickname {
     opacity: 0.5;
 }
+
 .note-author-nickname::before {
     content: '@';
 }
@@ -311,7 +313,7 @@ embed header {
     margin-right: var(--smaller)
 }
 
-.note-attachments-unit>figure figcaption {
+.note-attachments-unit > figure figcaption {
     display: -webkit-box;
     display: -webkit-flex;
     display: -moz-box;
diff --git a/public/assets/default_theme/css/pages/settings.css b/public/assets/default_theme/css/pages/settings.css
index f633a1e0b9..964edb0d5e 100644
--- a/public/assets/default_theme/css/pages/settings.css
+++ b/public/assets/default_theme/css/pages/settings.css
@@ -1,35 +1,34 @@
 .section-settings {
-    margin-bottom: 0.6rem;
-    border-radius: 0.6rem;
-    padding: 0.6rem;
+    margin-bottom: .6rem;
+    border-radius: .6rem;
+    padding: .6rem;
     box-sizing: border-box;
 }
 
 .section-settings hr {
-    margin-top: 0.6rem;
-    margin-bottom: 0.6rem;
+    margin-top: .6rem;
+    margin-bottom: .6rem;
 }
 
-.section-settings,
-.section-settings ul {
+.section-settings,.section-settings ul {
     border: 2px solid var(--border) !important;
     background-color: var(--background-card) !important;
 }
 
 .section-settings ul {
-    border-radius: 0.6rem;
-    padding: 0.6rem;
+    border-radius: .6rem;
+    padding: .6rem;
     box-sizing: border-box;
 }
 
 .section-settings ul li {
-    border-radius: 0.6rem;
+    border-radius: .6rem;
 }
 
 .form {
     display: flex;
-    border-radius: 0.6rem;
-    padding: 0.6rem;
+    border-radius: .6rem;
+    padding: .6rem;
     box-sizing: border-box;
 }
 
@@ -40,7 +39,7 @@
 .form #save {
     display: flex;
     flex-direction: column;
-    padding: 0.6rem;
+    padding: .6rem;
     box-sizing: border-box;
 }
 
@@ -50,16 +49,14 @@
 
 .form #save div label {
     display: inline-block;
-    font-family: 'Poppins', sans-serif;
+    font-family: 'Poppins',sans-serif;
 }
 
-.form #save div input,
-.form #save div textarea {
+.form #save div input,.form #save div textarea {
     display: inline-block;
     position: relative;
-
-    border-radius: 0.6rem;
-    padding: 0.6rem;
+    border-radius: .6rem;
+    padding: .6rem;
     box-sizing: border-box;
 }
 
@@ -76,34 +73,31 @@
 }
 
 .section-title-settings section {
-    margin-top: 0.6rem;
+    margin-top: .6rem;
 }
 
 .section-title-settings summary {
-    padding: 0.6rem 1rem;
+    padding: .6rem 1rem;
 }
-.section-title-settings summary h3:first-letter,
-.section-title-settings summary em:first-letter {
+
+.section-title-settings summary h3:first-letter ,.section-title-settings summary em:first-letter {
     text-transform: uppercase;
 }
 
-.section-title-settings summary:focus .icon-details-open,
-.section-title-settings summary:hover .icon-details-open {
-    transition: all 200ms cubic-bezier(0, 0.55, 0.45, 1);
+.section-title-settings summary:focus .icon-details-open,.section-title-settings summary:hover .icon-details-open {
+    transition: all 200ms cubic-bezier(0,0.55,0.45,1);
 }
 
-/* SECTION DETAILS OPENED */
 .section-title-settings[open] svg {
     transform: rotate(180deg);
-    animation: fadeOut 200ms cubic-bezier(0, 0.55, 0.45, 1)
+    animation: fadeOut 200ms cubic-bezier(0,0.55,0.45,1);
 }
 
 .section-title-settings[open] .set-nav li:last-of-type {
     margin-bottom: 0;
 }
 
-/* SECTION DETAILS CLOSED */
 .section-title-settings:not([open]) svg {
     transform: initial;
-    animation: fadeIn 200ms cubic-bezier(0, 0.55, 0.45, 1);
+    animation: fadeIn 200ms cubic-bezier(0,0.55,0.45,1);
 }
\ No newline at end of file
diff --git a/public/assets/default_theme/css/widgets/buttons.css b/public/assets/default_theme/css/widgets/buttons.css
index c110c6086f..af1b9d36a0 100644
--- a/public/assets/default_theme/css/widgets/buttons.css
+++ b/public/assets/default_theme/css/widgets/buttons.css
@@ -1,12 +1,113 @@
 input {
     all: unset;
 }
-input + label {
+
+input+label {
     -webkit-align-self: center;
     -ms-flex-item-align: center;
     -ms-grid-row-align: center;
     align-self: center;
 }
+
+input[type=checkbox],input[type=radio] {
+    all: unset;
+    display: inline-block;
+    cursor: pointer !important;
+    width: 1rem !important;
+    height: 1rem !important;
+}
+
+input[type=checkbox]:not(:hover,:focus),input[type=radio]:not(:hover,:focus) {
+    opacity: 75%;
+}
+
+input[type=radio] {
+    -webkit-border-radius: 50% !important;
+    -moz-border-radius: 50% !important;
+    border-radius: 50% !important;
+    margin: 3px 3px 0 5px !important;
+}
+
+input[type=file] {
+    all: unset;
+    display: block;
+    width: 100%;
+    font-family: 'Open Sans',sans-serif !important;
+    font-weight: normal !important;
+    padding: unset !important;
+    -webkit-border-radius: .6rem;
+    -moz-border-radius: .6rem;
+    border-radius: .6rem;
+    background: var(--gradient) !important;
+}
+
+input[type=radio] {
+    border: solid .25em !important;
+}
+
+input[type=checkbox] {
+    -webkit-background-size: 100%;
+    -moz-background-size: 100%;
+    -o-background-size: 100%;
+    background-size: 100%;
+    margin-right: 2px;
+    -webkit-mask-image: url("../../icons/check-off.svg") !important;
+    -o-mask-image: url("../../icons/check-off.svg") !important;
+    -moz-mask-image: url("../../icons/check-off.svg") !important;
+    mask-image: url("../../icons/check-off.svg") !important;
+}
+
+input[type=checkbox]:checked {
+    -webkit-mask-image: url("../../icons/check-on.svg") !important;
+    -o-mask-image: url("../../icons/check-on.svg") !important;
+    -moz-mask-image: url("../../icons/check-on.svg") !important;
+    mask-image: url("../../icons/check-on.svg") !important;
+}
+
+input[type=color] {
+    border: unset;
+    padding: 2px;
+    width: 100%;
+    height: 3rem;
+}
+
+::-webkit-file-upload-button {
+    cursor: pointer;
+    background-color: unset;
+    border: unset;
+    font-family: 'Open Sans',sans-serif !important;
+    font-weight: bold !important;
+    color: var(--foreground);
+    fill: var(--foreground);
+    margin: 3px;
+}
+
+::file-selector-button {
+    cursor: pointer;
+    background-color: unset;
+    border: unset;
+    font-family: 'Open Sans',sans-serif !important;
+    font-weight: bold !important;
+    color: var(--foreground);
+    fill: var(--foreground);
+    margin: 3px;
+}
+
+::file-selector-button {
+    cursor: pointer;
+    background-color: unset;
+    border: unset;
+    font-family: 'Open Sans',sans-serif !important;
+    font-weight: bold !important;
+    color: var(--foreground);
+    fill: var(--foreground);
+    margin: 3px;
+}
+
+*|*::-moz-button-content {
+    all: unset !important;
+}
+
 button {
     cursor: pointer !important;
     float: right !important;
@@ -15,63 +116,14 @@ button {
     -ms-grid-row-align: end !important;
     align-self: end !important;
 }
-*|*::-moz-button-content {
-    all: unset !important;
-}
-input[type=checkbox],
-input[type=radio] {
-    all: unset;
-    display: inline-block;
-    cursor: pointer !important;
-    width: 1rem !important;
-    height: 1rem !important;
-}
-input[type=checkbox]:not(:hover, :focus),
-input[type=radio]:not(:hover, :focus) {
-    opacity: 75%;
-}
-input[type=radio] {
-    -webkit-border-radius: 50% !important;
-    -moz-border-radius: 50% !important;
-    border-radius: 50% !important;
-    margin: 3px 3px 0 5px !important;
-}
-input[type=file] {
-    all: unset;
-    display: block;
-    width: 100%;
-    -webkit-border-radius: 0.6rem !important;
-    -moz-border-radius: 0.6rem !important;
-    border-radius: 0.6rem !important;
-}
-::-webkit-file-upload-button {
-    cursor: pointer;
-    background-color: unset;
-    border: unset;
-    margin: 3px;
-}
-::file-selector-button {
-    cursor: pointer;
-    background-color: unset;
-    border: unset;
-    margin: 3px;
-}
-::file-selector-button {
-    cursor: pointer;
-    background-color: unset;
-    border: unset;
-    margin: 3px;
-}
-button,
-label {
-    font-family: 'Poppins', sans-serif;
+
+button,label {
+    font-family: 'Poppins',sans-serif;
     font-weight: bold !important;
     color: currentColor;
 }
-button,
-input,
-select,
-textarea {
+
+button,input,select,textarea {
     display: -webkit-inline-box !important;
     display: -webkit-inline-flex !important;
     display: -ms-inline-flexbox !important;
@@ -80,9 +132,9 @@ textarea {
     overflow: hidden;
     font-size: inherit !important;
     padding: 6px 8px !important;
-    -webkit-border-radius: 0.6rem;
-    -moz-border-radius: 0.6rem;
-    border-radius: 0.6rem;
+    -webkit-border-radius: .6rem;
+    -moz-border-radius: .6rem;
+    border-radius: .6rem;
     background: var(--gradient) !important;
     border: 2px solid var(--border) !important;
     -webkit-box-shadow: var(--shadow);
@@ -95,70 +147,17 @@ select {
     -moz-appearance: none !important;
     cursor: pointer;
     background-repeat: no-repeat;
-    -webkit-border-radius: 0.6rem;
-    -moz-border-radius: 0.6rem;
-    border-radius: 0.6rem;
+    -webkit-border-radius: .6rem;
+    -moz-border-radius: .6rem;
+    border-radius: .6rem;
     max-width: 100% !important;
 }
-select > option {
+
+select>option {
     width: 1px;
 }
-input[type=radio] {
-    border: solid 0.25em !important;
-}
-input[type=checkbox] {
-    -webkit-background-size: 100%;
-    -moz-background-size: 100%;
-    -o-background-size: 100%;
-    background-size: 100%;
-    margin-right: 2px;
-    -webkit-mask-image: url("../../icons/check-off.svg") !important;
-    -o-mask-image: url("../../icons/check-off.svg") !important;
-    -moz-mask-image: url("../../icons/check-off.svg") !important;
-    mask-image: url("../../icons/check-off.svg") !important;
-}
-input[type=color] {
-    border: unset;
-    padding: 2px;
-    width: 100%;
-    height: 3rem;
-}
-input[type=checkbox]:checked {
-    -webkit-mask-image: url("../../icons/check-on.svg") !important;
-    -o-mask-image: url("../../icons/check-on.svg") !important;
-    -moz-mask-image: url("../../icons/check-on.svg") !important;
-    mask-image: url("../../icons/check-on.svg") !important;
-}
-input[type=file] {
-    font-family: 'Open Sans', sans-serif !important;
-    font-weight: normal !important;
-    padding: unset !important;
-    -webkit-border-radius: 0.6rem;
-    -moz-border-radius: 0.6rem;
-    border-radius: 0.6rem;
-    background: var(--gradient) !important;
-}
-::-webkit-file-upload-button {
-    font-family: 'Open Sans', sans-serif !important;
-    font-weight: bold !important;
-    color: var(--foreground);
-    fill: var(--foreground);
-}
-::file-selector-button {
-    font-family: 'Open Sans', sans-serif !important;
-    font-weight: bold !important;
-    color: var(--foreground);
-    fill: var(--foreground);
-}
-::file-selector-button {
-    font-family: 'Open Sans', sans-serif !important;
-    font-weight: bold !important;
-    color: var(--foreground);
-    fill: var(--foreground);
-}
 
-input[type=checkbox],
-input[type=radio] {
+input[type=checkbox],input[type=radio] {
     border: unset !important;
 }
 
@@ -170,15 +169,8 @@ input[type=checkbox] {
     background-color: var(--border) !important;
 }
 
-button:focus,
-button:hover,
-input:focus,
-input:hover,
-select:focus,
-select:hover,
-textarea:focus,
-textarea:hover {
+button:focus,button:hover,input:focus,input:hover,select:focus,select:hover,textarea:focus,textarea:hover {
     -webkit-box-shadow: var(--shadow-inset-accent) !important;
     -moz-box-shadow: var(--shadow-inset-accent) !important;
     box-shadow: var(--shadow-inset-accent) !important;
-}
+}
\ No newline at end of file
diff --git a/public/assets/default_theme/css/widgets/sections.css b/public/assets/default_theme/css/widgets/sections.css
index 05d91b31af..a52a2e5909 100644
--- a/public/assets/default_theme/css/widgets/sections.css
+++ b/public/assets/default_theme/css/widgets/sections.css
@@ -12,6 +12,7 @@
     -moz-box-shadow: var(--shadow);
     box-shadow: var(--shadow);
 }
+
 .profile *[class*="profile-info-"] {
     flex: 1;
 }
@@ -21,18 +22,23 @@
     flex-wrap: wrap;
     flex-direction: column
 }
+
 .profile-info-nickname {
     font-size: 1.3rem
 }
+
 .profile-info-tags {
     margin: unset
 }
+
 .profile-info-stats strong {
     margin-right: 5px
 }
+
 .profile-info-stats {
     margin-top: 0.6rem
 }
+
 .profile-avatar {
     max-width: 4rem;
     min-width: 3rem;
@@ -41,6 +47,7 @@
     margin-right: 5px;
     border-radius: 2px
 }
+
 .section-widget {
     display: flex;
     flex-direction: column;
@@ -50,17 +57,21 @@
     box-shadow: var(--shadow);
     border: 2px solid var(--border) !important;
 }
+
 .section-widget hr {
     margin-bottom: 0.6rem
 }
+
 .section-widget-padded {
     padding: 0.6rem
 }
+
 .section-title {
     font-size: 1.3rem;
     font-weight: 700;
     margin: 0
 }
+
 .section-widget-button-like {
     border-radius: 0.6rem;
     padding: 6px 10px;
@@ -71,6 +82,7 @@
     font-family: 'Open Sans', sans-serif;
     font-weight: 700
 }
+
 .section-title-details {
     font-size: 1.3rem;
     font-weight: 700;
@@ -78,18 +90,22 @@
     padding: 6px 10px 6px 10px;
     background: var(--gradient) !important;
 }
+
 .section-title-details[open] svg {
     transform: rotate(180deg);
     animation: fadeOut 200ms cubic-bezier(0, 0.55, 0.45, 1)
 }
+
 .section-title-details:not([open]) svg {
     transform: initial;
     animation: fadeIn 200ms cubic-bezier(0, 0.55, 0.45, 1)
 }
+
 .section-title-summary {
     display: flex;
     justify-content: space-between
 }
+
 .section-form {
     display: flex;
     flex-direction: column;
@@ -97,30 +113,36 @@
     width: 100%;
     padding: 0.6rem
 }
+
 .section-form-legend {
     margin-top: unset;
     margin-bottom: 10px;
     font-weight: bold;
     font-size: 1.62rem
 }
+
 .form-group {
     display: flex;
     flex-direction: column;
     margin-bottom: 6px
 }
+
 .form-group textarea {
     height: 7rem;
     max-height: 100%
 }
+
 .help-block {
     margin-bottom: 6px
 }
+
 .help-text {
     font-style: italic;
     font-size: 1rem;
     margin-bottom: 6px
 }
-.help-block>.list-unstyled,
+
+.help-block > .list-unstyled,
 .alert,
 .alert-danger {
     display: inline-block;