[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

@@ -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;

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 {

public/assets/default_theme/css/widgets/buttons.css

@@ -1,36 +1,9 @@
-input {
+label {
-    all: unset;
+    font-weight: 700;
 }
 
-input[type=checkbox] {
+input + label {
-    background: var(--accent) !important;
+    margin-left: 3px;
-    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[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;

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 {

public/assets/default_theme/icons/check-off.svg

@@ -1,5 +1,5 @@
 <!-- https://github.com/primer/octicons -->
 <!-- MIT License -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" x="0" y="0" width="24px" height="24px">
     <path fill-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM0 8a8 8 0 1116 0A8 8 0 010 8zm11.78-1.72a.75.75 0 00-1.06-1.06L6.75 9.19 5.28 7.72a.75.75 0 00-1.06 1.06l2 2a.75.75 0 001.06 0l4.5-4.5z"></path>
 </svg>

public/assets/default_theme/icons/check-on.svg

@@ -1,5 +1,5 @@
 <!-- https://github.com/primer/octicons -->
 <!-- MIT License -->
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" x="0" y="0" width="24px" height="24px">
     <path fill-rule="evenodd" d="M8 16A8 8 0 108 0a8 8 0 000 16zm3.78-9.72a.75.75 0 00-1.06-1.06L6.75 9.19 5.28 7.72a.75.75 0 00-1.06 1.06l2 2a.75.75 0 001.06 0l4.5-4.5z"></path>
 </svg>

public/assets/icons/edit.svg.twig

@@ -1,6 +1,6 @@
 <!-- https://github.com/primer/octicons -->
 <!-- MIT License -->
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" class="{{ iconClass|default('') }}">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" x="0" y="0" width="16px" height="16px" class="{{ iconClass|default('') }}">
     <title>Edit</title>
     <path d="M11.013 1.427a1.75 1.75 0 012.474 0l1.086 1.086a1.75 1.75 0 010 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 01-.927-.928l.929-3.25a1.75 1.75 0 01.445-.758l8.61-8.61zm1.414 1.06a.25.25 0 00-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 000-.354l-1.086-1.086zM11.189 6.25L9.75 4.81l-6.286 6.287a.25.25 0 00-.064.108l-.558 1.953 1.953-.558a.249.249 0 00.108-.064l6.286-6.286z"/>
 </svg>