[CSS] Browser compatibility improvements.

This commit is contained in:
Eliseu Amaro 2021-10-05 22:44:22 +01:00
parent 78dd7137f8
commit d4513e3597
5 changed files with 849 additions and 378 deletions

File diff suppressed because it is too large Load Diff

View File

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

View File

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

View File

@ -2,6 +2,12 @@
{% block title %}{% if page_title is defined %}{{ page_title | trans }}{% endif %}{% endblock %} {% 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 %} {% block body %}
{# Backwards compatibility with hAtom 0.1 #} {# Backwards compatibility with hAtom 0.1 #}
<main class="timeline" tabindex="0" role="feed"> <main class="timeline" tabindex="0" role="feed">

View File

@ -2,6 +2,12 @@
{% block title %}{% endblock %} {% 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 %} {% block body %}
<nav class='section-settings'> <nav class='section-settings'>
<h2>Settings</h2> <h2>Settings</h2>