[CSS] Browser compatibility improvements.

public/assets/default_theme/css/colors.css

@@ -0,0 +1,333 @@
+@media (prefers-color-scheme: dark) {
+    button:focus,
+    button:hover,
+    input:focus,
+    input:hover,
+    select:focus,
+    select:hover,
+    textarea:focus,
+    textarea:hover {
+        -webkit-box-shadow: inset 0 0 0 2px #8081BA !important;
+        -moz-box-shadow: inset 0 0 0 2px #8081BA !important;
+        box-shadow: inset 0 0 0 2px #8081BA !important;
+    }
+    *:focus {
+        -webkit-box-shadow: inset 0 0 0 2px #8081BA;
+        -moz-box-shadow: inset 0 0 0 2px #8081BA;
+        box-shadow: inset 0 0 0 2px #8081BA;
+    }
+    #header,
+    .header-extra-forms-open,
+    .section-title-details,
+    .set-background-color-hard,
+    input[type=checkbox]:checked ~ .panel-content,
+    input[type=radio] {
+        background-color: #242434 !important;
+    }
+
+    .button-container,
+    .note-actions-set,
+    .set-background-color-soft,
+    hr,
+    input[type=checkbox] {
+        background-color: #46465E !important;
+    }
+
+    #replyform,
+    .doc-navigation,
+    .h-entry,
+    .markdown-blocks,
+    .profile,
+    .section-attachments,
+    .section-settings,
+    .section-settings ul,
+    .section-widget,
+    .set-background-color-alpha,
+    button,
+    input,
+    select,
+    textarea {
+        background-color: #1A1A2666 !important;
+    }
+    .set-background-color-gradient,
+    button:not(.button-container),
+    input[type=file] {
+        background: -webkit-gradient(linear, left top, left bottom, from(#46465E), to(transparent)) !important;
+        background: -webkit-linear-gradient(top, #46465E, transparent) !important;
+        background: -moz-linear-gradient(top, #46465E, transparent) !important;
+        background: -o-linear-gradient(top, #46465E, transparent) !important;
+        background: linear-gradient(180deg, #46465E, transparent) !important;
+    }
+
+    .note-info {
+        background: -webkit-gradient(linear, right top, left top, from(#1A1A2666), to(transparent)) !important;
+        background: -webkit-linear-gradient(right, #1A1A2666, transparent) !important;
+        background: -moz-linear-gradient(right, #1A1A2666, transparent) !important;
+        background: -o-linear-gradient(right, #1A1A2666, transparent) !important;
+        background: linear-gradient(to left, #1A1A2666, transparent) !important;
+    }
+
+    .section-settings hr {
+        background-image: -webkit-gradient(linear, left top, right top, from(#1A1A2666), color-stop(90%, transparent));
+        background-image: -webkit-linear-gradient(left, #1A1A2666, transparent 90%);
+        background-image: -moz-linear-gradient(left, #1A1A2666, transparent 90%);
+        background-image: -o-linear-gradient(left, #1A1A2666, transparent 90%);
+        background-image: linear-gradient(to right, #1A1A2666, transparent 90%);
+    }
+
+    .form .separator {
+        background-image: -webkit-gradient(linear, left top, left bottom, from(#1A1A2666), color-stop(90%, transparent));
+        background-image: -webkit-linear-gradient(top, #1A1A2666, transparent 90%);
+        background-image: -moz-linear-gradient(top, #1A1A2666, transparent 90%);
+        background-image: -o-linear-gradient(top, #1A1A2666, transparent 90%);
+        background-image: linear-gradient(to bottom, #1A1A2666, transparent 90%);
+    }
+    .button-container:focus,
+    .button-container:hover,
+    .set-background-color-accent,
+    input[type=checkbox],
+    input[type=checkbox]:focus,
+    input[type=checkbox]:hover,
+    input[type=radio]:focus,
+    input[type=radio]:hover {
+        background-color: #8081BA !important;
+    }
+
+    .note-actions-set,
+    .set-background-color-foreground {
+        background-color: #FFF !important;
+    }
+
+    ::-webkit-file-upload-button {
+        color: #FFF;
+        fill: #FFF;
+    }
+
+    ::file-selector-button {
+        color: #FFF;
+        fill: #FFF;
+    }
+
+    *,
+    .set-foreground-color,
+    ::file-selector-button,
+    input[type=file] {
+        color: #FFF;
+        fill: #FFF;
+    }
+
+    .accessibility-menu,
+    .set-border-accent {
+        border: 2px solid #8081BA;
+    }
+    .doc-navigation,
+    .h-entry,
+    .markdown-blocks,
+    .section-settings,
+    .section-settings ul,
+    .section-widget,
+    .set-border-soft,
+    button,
+    input:not([type=checkbox], [type=radio]),
+    select,
+    textarea {
+        border: 2px solid #46465E !important;
+    }
+
+    #header,
+    .h-entry,
+    .header-extra-forms-open,
+    .profile,
+    .set-shadow-dark,
+    button,
+    input,
+    select,
+    textarea {
+        -webkit-box-shadow: 0 0 16px 0 #00000016;
+        -moz-box-shadow: 0 0 16px 0 #00000016;
+        box-shadow: 0 0 16px 0 #00000016;
+    }
+
+    .set-shadow-light {
+        -webkit-box-shadow: 0 0 16px 0 #FFFFFF16;
+        -moz-box-shadow: 0 0 16px 0 #FFFFFF16;
+        box-shadow: 0 0 16px 0 #FFFFFF16;
+    }
+
+    .bg {
+        background-image: url("../images/background_dark.png");
+    }
+
+    select {
+        background-image: url("../images/select_drop_dark.png") !important;
+    }
+}
+@media (prefers-color-scheme: light) {
+    button:focus,
+    button:hover,
+    input:focus,
+    input:hover,
+    select:focus,
+    select:hover,
+    textarea:focus,
+    textarea:hover {
+        -webkit-box-shadow: inset 0 0 0 2px #2e3440 !important;
+        -moz-box-shadow: inset 0 0 0 2px #2e3440 !important;
+        box-shadow: inset 0 0 0 2px #2e3440 !important;
+    }
+    *:focus {
+        -webkit-box-shadow: inset 0 0 0 2px #2e3440;
+        -moz-box-shadow: inset 0 0 0 2px #2e3440;
+        box-shadow: inset 0 0 0 2px #2e3440;
+    }
+    #header,
+    .header-extra-forms-open,
+    .section-title-details,
+    .set-background-color-hard,
+    input[type=checkbox]:checked ~ .panel-content,
+    input[type=radio] {
+        background-color: #eceff4 !important;
+    }
+
+    .note-actions-set,
+    .set-background-color-soft,
+    hr,
+    input[type=checkbox] {
+        background-color: #4c566a66 !important;
+    }
+
+    #replyform,
+    .doc-navigation,
+    .h-entry,
+    .markdown-blocks,
+    .profile,
+    .section-attachments,
+    .section-settings,
+    .section-settings ul,
+    .section-widget,
+    .set-background-color-alpha,
+    button,
+    input,
+    select,
+    textarea {
+        background-color: #eceff488 !important;
+    }
+    .set-background-color-gradient,
+    button:not(.button-container),
+    input[type=file] {
+        background: -webkit-gradient(linear, left top, left bottom, from(#d8dee966), to(transparent)) !important;
+        background: -webkit-linear-gradient(top, #d8dee966, transparent) !important;
+        background: -moz-linear-gradient(top, #d8dee966, transparent) !important;
+        background: -o-linear-gradient(top, #d8dee966, transparent) !important;
+        background: linear-gradient(180deg, #d8dee966, transparent) !important;
+    }
+
+    .note-info {
+        background: -webkit-gradient(linear, right top, left top, from(#eceff488), to(transparent)) !important;
+        background: -webkit-linear-gradient(right, #eceff488, transparent) !important;
+        background: -moz-linear-gradient(right, #eceff488, transparent) !important;
+        background: -o-linear-gradient(right, #eceff488, transparent) !important;
+        background: linear-gradient(to left, #eceff488, transparent) !important;
+    }
+
+    .section-settings hr {
+        background-image: -webkit-gradient(linear, left top, right top, from(#d8dee966), color-stop(90%, transparent));
+        background-image: -webkit-linear-gradient(left, #d8dee966, transparent 90%);
+        background-image: -moz-linear-gradient(left, #d8dee966, transparent 90%);
+        background-image: -o-linear-gradient(left, #d8dee966, transparent 90%);
+        background-image: linear-gradient(to right, #d8dee966, transparent 90%);
+    }
+
+    .form .separator {
+        background-image: -webkit-gradient(linear, left top, left bottom, from(#d8dee966), color-stop(90%, transparent));
+        background-image: -webkit-linear-gradient(top, #d8dee966, transparent 90%);
+        background-image: -moz-linear-gradient(top, #d8dee966, transparent 90%);
+        background-image: -o-linear-gradient(top, #d8dee966, transparent 90%);
+        background-image: linear-gradient(to bottom, #d8dee966, transparent 90%);
+    }
+    .button-container:focus,
+    .button-container:hover,
+    .set-background-color-accent,
+    input[type=checkbox]:focus,
+    input[type=checkbox]:hover,
+    input[type=radio]:focus,
+    input[type=radio]:hover {
+        background-color: #2e3440 !important;
+    }
+
+    .note-actions-unset {
+        background-color: #2e344055 !important;
+    }
+    .note-actions-set,
+    .set-background-color-foreground,
+    input[type=checkbox]:checked,
+    input[type=radio]:checked {
+        background-color: #2e3440 !important;
+    }
+
+    ::-webkit-file-upload-button {
+        color: #2e3440;
+        fill: #2e3440;
+    }
+
+    ::file-selector-button {
+        color: #2e3440;
+        fill: #2e3440;
+    }
+
+    *,
+    .set-foreground-color,
+    ::file-selector-button,
+    input[type=file] {
+        color: #2e3440;
+        fill: #2e3440;
+    }
+
+    .accessibility-menu,
+    .set-border-accent {
+        border: 2px solid #2e3440;
+    }
+
+    .doc-navigation,
+    .h-entry,
+    .markdown-blocks,
+    .section-settings,
+    .section-settings ul,
+    .section-widget,
+    .set-border-soft,
+    button,
+    input,
+    input[type=radio],
+    select,
+    textarea {
+        border: 2px solid #4c566a66 !important;
+    }
+
+    #header,
+    .h-entry,
+    .header-extra-forms-open,
+    .profile,
+    .set-shadow-dark,
+    button,
+    input,
+    select,
+    textarea {
+        -webkit-box-shadow: 0 0 16px 0 #00000016;
+        -moz-box-shadow: 0 0 16px 0 #00000016;
+        box-shadow: 0 0 16px 0 #00000016;
+    }
+
+    .set-shadow-light {
+        -webkit-box-shadow: 0 0 16px 0 #FFFFFF16;
+        -moz-box-shadow: 0 0 16px 0 #FFFFFF16;
+        box-shadow: 0 0 16px 0 #FFFFFF16;
+    }
+
+    .bg {
+        background-image: url("../images/background_light.png");
+    }
+
+    select {
+        background-image: url("../images/select_drop_light.png") !important;
+    }
+}

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

@@ -2,12 +2,18 @@ input {
     all: unset;
 }
 input + label {
+    -webkit-align-self: center;
+    -ms-flex-item-align: center;
+    -ms-grid-row-align: center;
     align-self: center;
 }
 button {
     cursor: pointer !important;
     float: right !important;
-    align-self: end !important
+    -webkit-align-self: end !important;
+    -ms-flex-item-align: end !important;
+    -ms-grid-row-align: end !important;
+    align-self: end !important;
 }
 *|*::-moz-button-content {
     all: unset !important;
@@ -25,6 +31,8 @@ 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;
 }
@@ -32,69 +40,108 @@ input[type=file] {
     all: unset;
     display: block;
     width: 100%;
-    border-radius: 0.6rem !important
+    -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
+    margin: 3px;
 }
-label,
-button {
+::file-selector-button {
+    cursor: pointer;
+    background-color: unset;
+    border: unset;
+    margin: 3px;
+}
+button,
+label {
     font-family: 'Poppins', sans-serif;
-    font-weight: bold !important
+    font-weight: bold !important;
+    color: currentColor;
 }
-select,
 button,
-textarea,
-input:not([type=radio], [type=checkbox]) {
+input,
+select,
+textarea {
+    display: -webkit-inline-box !important;
+    display: -webkit-inline-flex !important;
+    display: -ms-inline-flexbox !important;
+    display: -moz-inline-box !important;
     display: inline-flex !important;
     overflow: hidden;
     font-size: inherit !important;
     padding: 6px 8px !important;
-    border-radius: 0.6rem
+    -webkit-border-radius: 0.6rem;
+    -moz-border-radius: 0.6rem;
+    border-radius: 0.6rem;
 }
 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;
-    border-radius: 0.6rem
+    -webkit-border-radius: 0.6rem;
+    -moz-border-radius: 0.6rem;
+    border-radius: 0.6rem;
 }
 input[type=radio] {
-    border: solid 0.25em !important
+    border: solid 0.25em !important;
 }
 input[type=checkbox] {
     vertical-align: middle;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
     background-size: cover;
     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
+    mask-image: url("../../icons/check-off.svg") !important;
 }
 input[type=color] {
     border: unset;
     padding: 2px;
     width: 100%;
-    height: 3rem
+    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
+    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;
-    border-radius: 0.6rem
+    -webkit-border-radius: 0.6rem;
+    -moz-border-radius: 0.6rem;
+    border-radius: 0.6rem;
+}
+::-webkit-file-upload-button {
+    font-family: 'Open Sans', sans-serif !important;
+    font-weight: bold !important;
+}
+::file-selector-button {
+    font-family: 'Open Sans', sans-serif !important;
+    font-weight: bold !important;
 }
 ::file-selector-button {
     font-family: 'Open Sans', sans-serif !important;
-    font-weight: bold !important
+    font-weight: bold !important;
 }

templates/network/feed.html.twig

@@ -2,6 +2,12 @@
 
 {% block title %}{% if page_title is defined %}{{ page_title | trans }}{% endif %}{% endblock %}
 
+{% block stylesheets %}
+    {{ parent() }}
+    <link rel="preload" href="{{ asset('assets/default_theme/css/pages/feeds.css') }}" as="style" type="text/css">
+    <link rel="stylesheet" href="{{ asset('assets/default_theme/css/pages/feeds.css') }}">
+{% endblock stylesheets %}
+
 {% block body %}
     {# Backwards compatibility with hAtom 0.1 #}
     <main class="timeline" tabindex="0" role="feed">

templates/settings/base.html.twig

@@ -2,6 +2,12 @@
 
 {% block title %}{% endblock %}
 
+{% block stylesheets %}
+    {{ parent() }}
+    <link rel="preload" href="{{ asset('assets/default_theme/css/pages/settings.css') }}" as="style" type="text/css">
+    <link rel="stylesheet" href="{{ asset('assets/default_theme/css/pages/settings.css') }}">
+{% endblock stylesheets %}
+
 {% block body %}
     <nav class='section-settings'>
         <h2>Settings</h2>