[CSS] New themes! No images used anymore.

public/assets/default_theme/css/base.css

@@ -180,58 +180,70 @@
     margin: 0;
     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);
+}
+
+hr {
+    background-color: var(--border) !important;
+}
 /* RESET END */
 
 /* DARK AND LIGHT COLOUR SCHEMES START */
     @media (prefers-color-scheme: dark) {
         /* Colour vars */
         :root {
-            --foreground: #E6E6F7;
-            --background-hard: #212130;
-            --background-soft: #46465E;
-            --background-checkerboard: repeating-conic-gradient(#ffffff66 0deg 90deg, #ffffff33 0deg 180deg) 0 0/40px 40px round;
-            --accent: #7070BA;
-            --translucent: hsla(240, 19%, 16%, 40%);
-            --shadow: 0 0 16px 0 #00000016;
-            --shadow-light: 0 0 16px 0 #FFFFFF16;
+            --foreground: #F0F6F6;
+            --background-hard: #141216;
+            --background-card: #131217;
+            --border: #201F25;
+            --accent: #E88282;
+            --shadow: 0 0 12px 0 #01010166;
             --shadow-inset-accent: inset 0 0 0 2px var(--accent);
-            --gradient: linear-gradient(to left,  var(--background-hard) 0%, var(--translucent) 100%) !important;
+            --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-soft);
-            background-image: url("../images/background_dark.png");
+            background-color: var(--background-hard);
         }
         /* Select element custom dropdown arrow */
         select {
-            background-image: url("../images/select_drop_dark.png") !important;
+            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) {
         /* Colour vars */
         :root {
-            --foreground: #242434;
-            --background-hard: #eceff4;
-            --background-soft: #4c566a66;
-            --accent: #4c566a;
-            --translucent: rgba(255, 255, 255, 0);
-            --shadow: 0 0 16px 0 #FFFFFF16;
-            --shadow-light: 0 0 16px 0 #00000016;
-            --shadow-inset-accent: inset 0 0 0 2px #4c566a;
-            --gradient: linear-gradient(to right, #FFFFFFAA, transparent) !important;
-            --tneidarg: linear-gradient(to left, #FFFFFFAA, transparent) !important;
+            --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-image: url("../images/background_light.png");
+            background-color: var(--background-hard);
         }
-
         /* Select element custom dropdown arrow */
         select {
-            background-image: url("../images/select_drop_light.png") !important;
+            background: var(--gradient), url("../images/select_drop_light.png") no-repeat center right 5px !important;
+            background-size: cover, 16px !important;
+            background-blend-mode: saturation;
         }
     }
 /* DARK AND LIGHT COLOUR SCHEMES END */
@@ -275,6 +287,8 @@
     height: min-content;
     padding: var(--smaller);
     border-radius: var(--smaller);
+    background-color: var(--background-hard) !important;
+    border: 2px solid var(--border);
 }
 
 .accessibility-menu ul {
@@ -298,6 +312,8 @@
     width: 100%;
     align-items: center;
     padding: var(--smaller);
+    background: var(--gradient) !important;
+    box-shadow: var(--shadow);
 }
 /* Allow scrolling all the way to the top ("page-header" has a height of 3rem) */
 html {
@@ -476,22 +492,7 @@ html {
         -o-background-size: 100% 100%;
         background-size: 100% 100%;
         z-index: auto;
-    }
-
-    @media (prefers-color-scheme: dark) {
-        #panel-left-toggle:checked + .header-panel,
-        #panel-right-toggle:checked + .header-panel,
-        a[id|="anchor"]:target ~ .panel-content {
-            background-image: url("../images/background_dark.png");
-        }
-    }
-
-    @media (prefers-color-scheme: light) {
-        #panel-left-toggle:checked + .header-panel,
-        #panel-right-toggle:checked + .header-panel,
-        a[id|="anchor"]:target ~ .panel-content {
-            background-image: url("../images/background_light.png");
-        }
+        background-color: var(--background-hard) !important;
     }
 }
 

public/assets/default_theme/css/colors.css

@@ -1,58 +1,10 @@
 
 
-/* Focus and hover (inset shadow is used in alternative to a border to prevent further redraws) */
-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;
-}
-
-*:focus {
-    -webkit-box-shadow: var(--shadow-inset-accent);
-    -moz-box-shadow: var(--shadow-inset-accent);
-    box-shadow: var(--shadow-inset-accent);
-}
-
-.page-header,
-.accessibility-menu,
-.header-extra-forms-open,
-.set-background-color-hard,
-input[type=checkbox]:checked~.panel-content,
-input[type=radio] {
-    background-color: var(--background-hard) !important;
-}
-
-.button-container,
-.note-actions-set,
-.set-background-color-soft,
-hr,
-input[type=checkbox] {
-    background-color: var(--background-soft) !important;
-}
-
 #replyform,
 .doc-navigation,
 .h-entry,
-.markdown-blocks,
-.profile,
-.section-title-details,
-.note-attachments-unit,
-.section-settings,
-.section-settings ul,
-.section-widget,
-.set-background-color-alpha,
-button,
-input,
-select,
-textarea {
-    background-color: var(--translucent) !important;
+.markdown-blocks {
+    background-color: var(--background-card) !important;
 }
 
 .set-background-color-gradient,
@@ -61,8 +13,12 @@ input[type=file] {
     background: var(--gradient) !important;
 }
 
+.note-info {
+    background: var(--tneidarg) !important;
+}
+
 .section-settings hr {
-    background: var(--background-soft) !important;
+    background: var(--border) !important;
 }
 
 .button-container:focus,
@@ -104,11 +60,6 @@ select {
     fill: var(--foreground);
 }
 
-.accessibility-menu,
-.set-border-accent {
-    border: 2px solid var(--accent);
-}
-
 .doc-navigation,
 .h-entry:not(.embed),
 .markdown-blocks,
@@ -120,7 +71,7 @@ button,
 input,
 select,
 textarea {
-    border: 2px solid var(--background-soft) !important;
+    border: 2px solid var(--border) !important;
 }
 
 #header,
@@ -137,9 +88,3 @@ textarea {
     box-shadow: var(--shadow);
 }
 
-.set-shadow-light {
-    -webkit-box-shadow: var(--shadow-light);
-    -moz-box-shadow: var(--shadow-light);
-    box-shadow: var(--shadow-light);
-}
-

public/assets/default_theme/css/pages/feeds.css

@@ -152,6 +152,10 @@ embed header {
     padding: 6px 10px 6px 0
 }
 
+.note-info {
+    background: var(--gradient-backwards) !important;
+}
+
 .note-author {
     font-size: var(--default);
     display: -webkit-box;
@@ -188,6 +192,10 @@ embed header {
     vertical-align: middle
 }
 
+.note-actions-set {
+    opacity: 1 !important;
+}
+
 .note-actions .form-group {
     all: unset
 }
@@ -204,11 +212,14 @@ embed header {
     margin-left: var(--smaller);
     width: var(--default);
     height: var(--default);
+    background-color: var(--foreground);
+    opacity: 0.33;
 }
 
 .button-container:hover,
 .button-container:focus {
-    border: none
+    border: none;
+    opacity: 1;
 }
 
 .favourite-button-container {
@@ -286,6 +297,7 @@ embed header {
     -webkit-align-self: flex-start;
     -ms-flex-item-align: start;
     align-self: flex-start
+    background-color: var(--background-card) !important;
 }
 
 .note-attachments-unit:not(:only-child) {

public/assets/default_theme/css/pages/settings.css

@@ -10,6 +10,11 @@
     margin-bottom: 0.6rem;
 }
 
+.section-settings,
+.section-settings ul {
+    background-color: var(--background-card) !important;
+}
+
 .section-settings ul {
     border-radius: 0.6rem;
     padding: 0.6rem;

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

@@ -83,17 +83,13 @@ textarea {
     -webkit-border-radius: 0.6rem;
     -moz-border-radius: 0.6rem;
     border-radius: 0.6rem;
+    background: var(--gradient) !important;
 }
 select {
     -webkit-appearance: none !important;
     -moz-appearance: none !important;
     cursor: pointer;
     background-repeat: no-repeat;
-    -webkit-background-size: 16px 16px;
-    -moz-background-size: 16px;
-    -o-background-size: 16px;
-    background-size: 16px;
-    background-position: center right 5px;
     -webkit-border-radius: 0.6rem;
     -moz-border-radius: 0.6rem;
     border-radius: 0.6rem;
@@ -153,3 +149,24 @@ input[type=checkbox],
 input[type=radio] {
     border: unset !important;
 }
+
+input[type=radio] {
+    background-color: var(--background-hard) !important;
+}
+
+input[type=checkbox] {
+    background-color: var(--border) !important;
+}
+
+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;
+}

public/assets/default_theme/css/widgets/sections.css

@@ -6,7 +6,8 @@
     font-family: 'Open Sans', sans-serif;
     margin-bottom: 0.6rem;
     border-radius: 0.6rem;
-    padding: 0.6rem
+    padding: 0.6rem;
+    background: var(--gradient) !important;
 }
 .profile *[class*="profile-info-"] {
     flex: 1;
@@ -41,7 +42,9 @@
     display: flex;
     flex-direction: column;
     border-radius: 0.6rem;
-    margin-bottom: 1.3rem
+    margin-bottom: 1.3rem;
+    background-color: var(--background-card) !important;
+    box-shadow: var(--shadow);
 }
 .section-widget hr {
     margin-bottom: 0.6rem
@@ -68,7 +71,8 @@
     font-size: 1.3rem;
     font-weight: 700;
     border-radius: 0.6rem;
-    padding: 6px 10px 6px 10px
+    padding: 6px 10px 6px 10px;
+    background: var(--gradient) !important;
 }
 .section-title-details[open] svg {
     transform: rotate(180deg);