Browse Source

[CSS] Browser compatibility improvements.

remotes/upstream/experimental
Eliseu Amaro 7 months ago
parent
commit
d4513e3597
5 changed files with 847 additions and 376 deletions
  1. +438
    -359
      public/assets/default_theme/css/base.css
  2. +333
    -0
      public/assets/default_theme/css/colors.css
  3. +64
    -17
      public/assets/default_theme/css/widgets/buttons.css
  4. +6
    -0
      templates/network/feed.html.twig
  5. +6
    -0
      templates/settings/base.html.twig

+ 438
- 359
public/assets/default_theme/css/base.css
File diff suppressed because it is too large
View File


+ 333
- 0
public/assets/default_theme/css/colors.css 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;
}
}

+ 64
- 17
public/assets/default_theme/css/widgets/buttons.css View File

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

+ 6
- 0
templates/network/feed.html.twig View File

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


+ 6
- 0
templates/settings/base.html.twig View File

@@ -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…
Cancel
Save