[CSS] Browser compatibility improvements.
This commit is contained in:
parent
78dd7137f8
commit
d4513e3597
File diff suppressed because it is too large
Load Diff
333
public/assets/default_theme/css/colors.css
Normal file
333
public/assets/default_theme/css/colors.css
Normal 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;
|
||||
}
|
||||
}
|
||||
@ -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 {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-weight: bold !important
|
||||
::file-selector-button {
|
||||
cursor: pointer;
|
||||
background-color: unset;
|
||||
border: unset;
|
||||
margin: 3px;
|
||||
}
|
||||
select,
|
||||
button,
|
||||
textarea,
|
||||
input:not([type=radio], [type=checkbox]) {
|
||||
label {
|
||||
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;
|
||||
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
|
||||
font-weight: bold !important;
|
||||
}
|
||||
::file-selector-button {
|
||||
font-family: 'Open Sans', sans-serif !important;
|
||||
font-weight: bold !important;
|
||||
}
|
||||
@ -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">
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user