From d4513e3597ba1c2fe5eadb4e35e413b799f6081f Mon Sep 17 00:00:00 2001 From: eli Date: Tue, 5 Oct 2021 22:44:22 +0100 Subject: [PATCH] [CSS] Browser compatibility improvements. --- public/assets/default_theme/css/base.css | 799 ++++++++++-------- public/assets/default_theme/css/colors.css | 333 ++++++++ .../default_theme/css/widgets/buttons.css | 83 +- templates/network/feed.html.twig | 6 + templates/settings/base.html.twig | 6 + 5 files changed, 849 insertions(+), 378 deletions(-) create mode 100644 public/assets/default_theme/css/colors.css diff --git a/public/assets/default_theme/css/base.css b/public/assets/default_theme/css/base.css index 35773aec4e..7a986769e4 100644 --- a/public/assets/default_theme/css/base.css +++ b/public/assets/default_theme/css/base.css @@ -2,73 +2,95 @@ @import url("../fonts/opensans/opensans.css"); @import url("widgets/buttons.css"); @import url("widgets/sections.css"); -@import url("pages/feeds.css"); -@import url("pages/settings.css"); +@import url("colors.css"); :link, :visited { - text-decoration: none + text-decoration: none; + color: currentColor; } -ul, -ol { - list-style: none +a:hover { + text-decoration: underline; } -pre, -form, -body, -html, + +hr { + all: unset; + display: block; + height: 1px; +} + +ol, +ul { + list-style: none; +} + blockquote, +body, fieldset, +form, +html, input, +pre, textarea { margin: 0; padding: 0; - border: none + border: none; } -a img, :link img, -:visited img { - border: none +:visited img, +a img { + border: none; } + address { - font-style: normal + font-style: normal; } + :focus { - outline: none + outline: none; } + ::-moz-focus-inner { - border: 0 + border: 0; } -details summary>* { + +details summary > * { margin: unset; - padding: unset + padding: unset; } -details>summary { - list-style: none + +details > summary { + list-style: none; } -details>summary::-webkit-details-marker { - display: none + +details > summary::-webkit-details-marker { + display: none; } @supports not (-ms-ime-align: auto) { details summary { - cursor: pointer + cursor: pointer; } } + [hidden] { - display: none + display: none; } + * { - box-sizing: border-box !important + -webkit-box-sizing: border-box !important; + -moz-box-sizing: border-box !important; + box-sizing: border-box !important; } + body, html { - all: unset; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-attachment: fixed; font-family: 'Open Sans', sans-serif; - font-size: 1rem + font-size: 1rem; } + h1, h2, h3, @@ -77,60 +99,70 @@ h5, h6 { all: unset; display: block; - font-family: 'Poppins', sans-serif + font-family: 'Poppins', sans-serif; } + h1 { font-size: 1.62rem; font-weight: 700; - margin-bottom: 16.2px + margin-bottom: 16.2px; } + h2 { font-size: 1.3rem; font-weight: 600; - margin-bottom: 13px + margin-bottom: 13px; } + h3 { font-size: 1rem; font-weight: 600; - margin-bottom: 10px + margin-bottom: 10px; } + h4, h5 { font-size: 1rem; font-weight: 400; - margin-bottom: 6.1px + margin-bottom: 6.1px; } + p { font-family: 'Open Sans', sans-serif; font-size: 1rem; font-weight: 400; - margin: unset + margin: unset; } p:first-line { - padding-left: 1rem + padding-left: 1rem; } p:first-line { margin-top: 0; - margin-bottom: 10px + margin-bottom: 10px; } p:not(:first-line) { margin-top: 10px; - margin-bottom: 10px + margin-bottom: 10px; } -input[type=text], input[type=password], textarea { + +input[type=password], +input[type=text], +textarea { font-family: 'Open Sans', sans-serif; font-weight: 400; padding: 4px 6px; } + ul { text-decoration: none; margin: 0; padding: 0; - list-style: none + list-style: none; } + li { margin: 0; - padding: 0 + padding: 0; } body:after { @@ -144,290 +176,36 @@ body:after { background-image: url("data:image/png;base64,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"); url(data:image/png;base64,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); opacity: 21%; - filter: grayscale(100%) -} -@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-widget, - .set-background-color-alpha, - button, - input, - select, - textarea, - .section-settings, - .section-settings ul { - background-color: #1A1A2666 !important - } - .set-background-color-gradient, - button:not(.button-container), - input[type=file] { - background: linear-gradient(180deg, #46465E, transparent) !important - } - .note-info { - background: linear-gradient(to left, #1A1A2666, transparent) !important - } - .section-settings hr { - background-image: linear-gradient(to right, #1A1A2666, transparent 90%); - } - .form .separator { - 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 - } - *, - .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-widget, - .set-border-soft, - button, - input:not([type=checkbox], [type=radio]), - select, - textarea, - .section-settings, - .section-settings ul { - border: 2px solid #46465E !important - } - #header, - .h-entry, - .header-extra-forms-open, - .profile, - .set-shadow-dark, - button, - input, - select, - textarea { - box-shadow: 0 0 16px 0 #00000016 - } - .set-shadow-light { - 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-widget, - .set-background-color-alpha, - .section-settings, - .section-settings ul, - button, - input, - select, - textarea { - background-color: #eceff488 !important; - } - .set-background-color-gradient, - button:not(.button-container), - input[type=file] { - background: linear-gradient(180deg, #d8dee966, transparent) !important - } - .note-info { - background: linear-gradient(to left, #eceff488, transparent) !important - } - .section-settings hr { - background-image: linear-gradient(to right, #d8dee966, transparent 90%); - } - .form .separator { - 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=radio]:checked, - input[type=checkbox]:checked { - background-color: #2e3440 !important - } - *, - .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-widget, - .set-border-soft, - button, - input, - input[type=radio], - select, - textarea, - .section-settings, - .section-settings ul { - border: 2px solid #4c566a66 !important - } - #header, - .h-entry, - .header-extra-forms-open, - .profile, - .set-shadow-dark, - button, - input, - select, - textarea { - box-shadow: 0 0 16px 0 #00000016 - } - .set-shadow-light { - 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 - } } + html { - scroll-margin-top: 3rem + scroll-margin-top: 3rem; } + .bg { background-position: center; background-repeat: no-repeat; - background-size: 100% 100% -} -a, -a:visited { - text-decoration: none -} -a:hover { - text-decoration: underline -} -hr { - all: unset; - display: block; - height: 1px + background-size: 100% 100%; } + .h-entry img { - background: repeating-conic-gradient(#ffffff66 0deg 90deg, #ffffff33 0deg 180deg) 0 0/40px 40px round + background: repeating-conic-gradient(#ffffff66 0deg 90deg, #ffffff33 0deg 180deg) 0 0/40px 40px round; } + .icon { - align-self: center + align-self: center; } + .active { - font-weight: bold + font-weight: bold; } + .anchor-hidden { width: 1px; height: 1px; - overflow: hidden + overflow: hidden; } + .accessibility-menu { display: block; position: absolute; @@ -437,16 +215,18 @@ hr { width: 30%; height: min-content; padding: 0.6rem; - border-radius: 0.6rem + border-radius: 0.6rem; } + .accessibility-menu ul { list-style-type: disc; - margin-left: 1.3rem + margin-left: 1.3rem; } .accessibility-menu:focus-within:not(:active) { top: 0.6rem; - left: 0.6rem + left: 0.6rem; } + #header { z-index: 1; font-family: 'Poppins', sans-serif; @@ -458,24 +238,27 @@ hr { top: 0; width: 100%; align-items: center; - padding: 0.6rem + padding: 0.6rem; } + .header-instance { display: flex; position: absolute; text-align: center; align-items: center; align-self: center; - margin-left: auto + margin-left: auto; } -.header-instance>* { - margin: unset + +.header-instance > * { + margin: unset; } + .header-extra-forms { justify-self: flex-end; - margin-left: auto + margin-left: auto; } -.header-extra-forms[open]>*:not(summary) { +.header-extra-forms[open] > *:not(summary) { z-index: 2; position: absolute; top: 100%; @@ -483,60 +266,71 @@ hr { width: 19vw; font-size: 1rem; border-radius: 0 0 0.6rem 0.6rem; - padding: 0.6rem + padding: 0.6rem; } + .content-wrapper { position: relative; margin-left: auto; margin-right: auto; justify-content: center; - padding: 0.6rem 0.6rem 0 + padding: 0.6rem 0.6rem 0; } + .content { display: flex; flex-direction: column; padding: 0.6rem 0.6rem 0; - width: 100% + width: 100%; } + .markdown-blocks { border-radius: 0 0 0.6rem 0.6rem; - padding: 0.6rem + padding: 0.6rem; } + .markdown-blocks ul { margin-left: 1em; - list-style: disc + list-style: disc; } + .markdown-blocks ul li { - margin-bottom: 0.2em + margin-bottom: 0.2em; } + .doc-navigation { border-radius: 0.6rem 0.6rem 0 0; border-bottom: none; - padding: 0.6rem + padding: 0.6rem; } + .doc-navigation ul { display: flex; justify-content: space-evenly; - font-size: 1.62rem + font-size: 1.62rem; } + #replyform { padding: 0.6rem; margin-top: 0.6rem; border-radius: 0.6rem; display: flex; flex-direction: column; - font-size: 1rem + font-size: 1rem; } + #replyform textarea { width: 100%; resize: vertical; margin-top: 0.6rem; - padding: 0.6rem + padding: 0.6rem; } + .content-wrapper { top: 3rem; - width: 62vw + width: 62vw; } + .panel .panel-content { display: flex; flex-direction: column; @@ -547,108 +341,393 @@ hr { margin-top: 3rem; height: calc(100% - 3rem); padding: 0.6rem; - overflow-y: auto + overflow-y: auto; } + #panel-right-icon { margin-left: 12px !important; } @media only screen and (min-width: 1281px) { .content { - padding: 0.6rem 1.62rem 0 + padding: 0.6rem 1.62rem 0; } + .panel .panel-content { - width: 19vw + width: 19vw; } - a[id|="anchor"]:target+.accessibility-target { + a[id|="anchor"]:target + .accessibility-target { + -webkit-animation-name: highlight; + -moz-animation-name: highlight; + -o-animation-name: highlight; animation-name: highlight; + -webkit-animation-duration: 600ms; + -moz-animation-duration: 600ms; + -o-animation-duration: 600ms; animation-duration: 600ms; - animation-timing-function: ease-in-out + -webkit-animation-timing-function: ease-in-out; + -moz-animation-timing-function: ease-in-out; + -o-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; } } @media only screen and (max-width: 1280px) { .content-wrapper { - width: 100% + width: 100%; } + .content { - max-width: 100% + max-width: 100%; } - .header-extra-forms[open]>*:not(summary) { - width: 100% + .header-extra-forms[open] > *:not(summary) { + width: 100%; } - #panel-left-toggle:not(:checked)~.panel-content, - #panel-right-toggle:not(:checked)~.panel-content { - display: none + #panel-left-toggle:not(:checked) ~ .panel-content, + #panel-right-toggle:not(:checked) ~ .panel-content { + display: none; } - #panel-left-toggle:checked~.panel-content, - #panel-right-toggle:checked~.panel-content, - a[id|="anchor"]:target~.panel-content { + #panel-left-toggle:checked ~ .panel-content, + #panel-right-toggle:checked ~ .panel-content, + a[id|="anchor"]:target ~ .panel-content { + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + display: -ms-flexbox; display: flex; width: 100%; + -webkit-background-size: 100% 100%; + -moz-background-size: 100% 100%; + -o-background-size: 100% 100%; background-size: 100% 100%; - z-index: auto + z-index: auto; } @media (prefers-color-scheme: dark) { - #panel-left-toggle:checked ~.panel-content, #panel-right-toggle:checked~.panel-content, a[id|="anchor"]:target~.panel-content { - background-image: url("../images/background_dark.png") + #panel-left-toggle:checked ~ .panel-content, + #panel-right-toggle:checked ~ .panel-content, + a[id|="anchor"]:target ~ .panel-content { + background-image: url("../images/background_dark.png"); } } @media (prefers-color-scheme: light) { - #panel-left-toggle checked ~.panel-content, #panel-right-toggle checked~.panel-content, a[id|="anchor"]:target~.panel-content { - background-image: url("../images/background_light.png") + #panel-left-toggle checked ~ .panel-content, + #panel-right-toggle checked ~ .panel-content, + a[id|="anchor"]:target ~ .panel-content { + background-image: url("../images/background_light.png"); } } } +@-webkit-keyframes fadeIn { + 0% { + opacity: 0; + -webkit-transform: translateY(-10px); + transform: translateY(-10px); + } + 100% { + opacity: unset; + -webkit-transform: none; + transform: none; + } +} +@-moz-keyframes fadeIn { + 0% { + opacity: 0; + -moz-transform: translateY(-10px); + transform: translateY(-10px); + } + 100% { + opacity: unset; + -moz-transform: none; + transform: none; + } +} +@-o-keyframes fadeIn { + 0% { + opacity: 0; + -o-transform: translateY(-10px); + transform: translateY(-10px); + } + 100% { + opacity: unset; + -o-transform: none; + transform: none; + } +} @keyframes fadeIn { 0% { opacity: 0; - transform: translateY(-10px) + -webkit-transform: translateY(-10px); + -moz-transform: translateY(-10px); + -o-transform: translateY(-10px); + transform: translateY(-10px); } 100% { opacity: unset; - transform: none + -webkit-transform: none; + -moz-transform: none; + -o-transform: none; + transform: none; + } +} +@-webkit-keyframes fadeOut { + 100% { + opacity: 0; + -webkit-transform: translateY(-10px); + transform: translateY(-10px); + } + 0% { + opacity: unset; + -webkit-transform: none; + transform: none; + } +} +@-moz-keyframes fadeOut { + 100% { + opacity: 0; + -moz-transform: translateY(-10px); + transform: translateY(-10px); + } + 0% { + opacity: unset; + -moz-transform: none; + transform: none; + } +} +@-o-keyframes fadeOut { + 100% { + opacity: 0; + -o-transform: translateY(-10px); + transform: translateY(-10px); + } + 0% { + opacity: unset; + -o-transform: none; + transform: none; } } @keyframes fadeOut { 100% { opacity: 0; - transform: translateY(-10px) + -webkit-transform: translateY(-10px); + -moz-transform: translateY(-10px); + -o-transform: translateY(-10px); + transform: translateY(-10px); } 0% { opacity: unset; - transform: none + -webkit-transform: none; + -moz-transform: none; + -o-transform: none; + transform: none; } } @media (prefers-color-scheme: dark) { - @keyframes highlight { + @-webkit-keyframes highlight { + 0% { + -webkit-box-shadow: initial; + box-shadow: initial; + -webkit-border-radius: 0.6rem; + border-radius: 0.6rem; + } + 50% { + -webkit-border-radius: 0.6rem; + border-radius: 0.6rem; + -webkit-box-shadow: inset 0 20px 40px #FFF; + box-shadow: inset 0 20px 40px #FFF; + -webkit-transition: -webkit-box-shadow 0.3s ease-in-out; + transition: -webkit-box-shadow 0.3s ease-in-out; + -o-transition: box-shadow 0.3s ease-in-out; + -moz-transition: box-shadow 0.3s ease-in-out, -moz-box-shadow 0.3s ease-in-out; + transition: box-shadow 0.3s ease-in-out; + transition: box-shadow 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out, -moz-box-shadow 0.3s ease-in-out; + } + 100% { + -webkit-box-shadow: initial; + box-shadow: initial; + -webkit-border-radius: 0.6rem; + border-radius: 0.6rem; + } + } + @-moz-keyframes highlight { + 0% { + -moz-box-shadow: initial; + box-shadow: initial; + -moz-border-radius: 0.6rem; + border-radius: 0.6rem; + } + 50% { + -moz-border-radius: 0.6rem; + border-radius: 0.6rem; + -moz-box-shadow: inset 0 20px 40px #FFF; + box-shadow: inset 0 20px 40px #FFF; + -webkit-transition: -webkit-box-shadow 0.3s ease-in-out; + transition: -webkit-box-shadow 0.3s ease-in-out; + -o-transition: box-shadow 0.3s ease-in-out; + -moz-transition: box-shadow 0.3s ease-in-out, -moz-box-shadow 0.3s ease-in-out; + transition: box-shadow 0.3s ease-in-out; + transition: box-shadow 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out, -moz-box-shadow 0.3s ease-in-out; + } + 100% { + -moz-box-shadow: initial; + box-shadow: initial; + -moz-border-radius: 0.6rem; + border-radius: 0.6rem; + } + } + @-o-keyframes highlight { 0% { box-shadow: initial; - border-radius: 0.6rem + border-radius: 0.6rem; } 50% { border-radius: 0.6rem; box-shadow: inset 0 20px 40px #FFF; - transition: box-shadow 0.3s ease-in-out + -webkit-transition: -webkit-box-shadow 0.3s ease-in-out; + transition: -webkit-box-shadow 0.3s ease-in-out; + -o-transition: box-shadow 0.3s ease-in-out; + -moz-transition: box-shadow 0.3s ease-in-out, -moz-box-shadow 0.3s ease-in-out; + transition: box-shadow 0.3s ease-in-out; + transition: box-shadow 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out, -moz-box-shadow 0.3s ease-in-out; } 100% { box-shadow: initial; - border-radius: 0.6rem + border-radius: 0.6rem; + } + } + @keyframes highlight { + 0% { + -webkit-box-shadow: initial; + -moz-box-shadow: initial; + box-shadow: initial; + -webkit-border-radius: 0.6rem; + -moz-border-radius: 0.6rem; + border-radius: 0.6rem; + } + 50% { + -webkit-border-radius: 0.6rem; + -moz-border-radius: 0.6rem; + border-radius: 0.6rem; + -webkit-box-shadow: inset 0 20px 40px #FFF; + -moz-box-shadow: inset 0 20px 40px #FFF; + box-shadow: inset 0 20px 40px #FFF; + -webkit-transition: -webkit-box-shadow 0.3s ease-in-out; + transition: -webkit-box-shadow 0.3s ease-in-out; + -o-transition: box-shadow 0.3s ease-in-out; + -moz-transition: box-shadow 0.3s ease-in-out, -moz-box-shadow 0.3s ease-in-out; + transition: box-shadow 0.3s ease-in-out; + transition: box-shadow 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out, -moz-box-shadow 0.3s ease-in-out; + } + 100% { + -webkit-box-shadow: initial; + -moz-box-shadow: initial; + box-shadow: initial; + -webkit-border-radius: 0.6rem; + -moz-border-radius: 0.6rem; + border-radius: 0.6rem; } } } @media (prefers-color-scheme: light) { - @keyframes highlight { + @-webkit-keyframes highlight { + 0% { + -webkit-box-shadow: initial; + box-shadow: initial; + -webkit-border-radius: 0.6rem; + border-radius: 0.6rem; + } + 50% { + -webkit-border-radius: 0.6rem; + border-radius: 0.6rem; + -webkit-box-shadow: inset 0 20px 40px #000; + box-shadow: inset 0 20px 40px #000; + -webkit-transition: -webkit-box-shadow 0.3s ease-in-out; + transition: -webkit-box-shadow 0.3s ease-in-out; + -o-transition: box-shadow 0.3s ease-in-out; + -moz-transition: box-shadow 0.3s ease-in-out, -moz-box-shadow 0.3s ease-in-out; + transition: box-shadow 0.3s ease-in-out; + transition: box-shadow 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out, -moz-box-shadow 0.3s ease-in-out; + } + 100% { + -webkit-box-shadow: initial; + box-shadow: initial; + -webkit-border-radius: 0.6rem; + border-radius: 0.6rem; + } + } + @-moz-keyframes highlight { + 0% { + -moz-box-shadow: initial; + box-shadow: initial; + -moz-border-radius: 0.6rem; + border-radius: 0.6rem; + } + 50% { + -moz-border-radius: 0.6rem; + border-radius: 0.6rem; + -moz-box-shadow: inset 0 20px 40px #000; + box-shadow: inset 0 20px 40px #000; + -webkit-transition: -webkit-box-shadow 0.3s ease-in-out; + transition: -webkit-box-shadow 0.3s ease-in-out; + -o-transition: box-shadow 0.3s ease-in-out; + -moz-transition: box-shadow 0.3s ease-in-out, -moz-box-shadow 0.3s ease-in-out; + transition: box-shadow 0.3s ease-in-out; + transition: box-shadow 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out, -moz-box-shadow 0.3s ease-in-out; + } + 100% { + -moz-box-shadow: initial; + box-shadow: initial; + -moz-border-radius: 0.6rem; + border-radius: 0.6rem; + } + } + @-o-keyframes highlight { 0% { box-shadow: initial; - border-radius: 0.6rem + border-radius: 0.6rem; } 50% { border-radius: 0.6rem; box-shadow: inset 0 20px 40px #000; - transition: box-shadow 0.3s ease-in-out + -webkit-transition: -webkit-box-shadow 0.3s ease-in-out; + transition: -webkit-box-shadow 0.3s ease-in-out; + -o-transition: box-shadow 0.3s ease-in-out; + -moz-transition: box-shadow 0.3s ease-in-out, -moz-box-shadow 0.3s ease-in-out; + transition: box-shadow 0.3s ease-in-out; + transition: box-shadow 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out, -moz-box-shadow 0.3s ease-in-out; } 100% { box-shadow: initial; - border-radius: 0.6rem + border-radius: 0.6rem; } } -} \ No newline at end of file + @keyframes highlight { + 0% { + -webkit-box-shadow: initial; + -moz-box-shadow: initial; + box-shadow: initial; + -webkit-border-radius: 0.6rem; + -moz-border-radius: 0.6rem; + border-radius: 0.6rem; + } + 50% { + -webkit-border-radius: 0.6rem; + -moz-border-radius: 0.6rem; + border-radius: 0.6rem; + -webkit-box-shadow: inset 0 20px 40px #000; + -moz-box-shadow: inset 0 20px 40px #000; + box-shadow: inset 0 20px 40px #000; + -webkit-transition: -webkit-box-shadow 0.3s ease-in-out; + transition: -webkit-box-shadow 0.3s ease-in-out; + -o-transition: box-shadow 0.3s ease-in-out; + -moz-transition: box-shadow 0.3s ease-in-out, -moz-box-shadow 0.3s ease-in-out; + transition: box-shadow 0.3s ease-in-out; + transition: box-shadow 0.3s ease-in-out, -webkit-box-shadow 0.3s ease-in-out, -moz-box-shadow 0.3s ease-in-out; + } + 100% { + -webkit-box-shadow: initial; + -moz-box-shadow: initial; + box-shadow: initial; + -webkit-border-radius: 0.6rem; + -moz-border-radius: 0.6rem; + border-radius: 0.6rem; + } + } +} diff --git a/public/assets/default_theme/css/colors.css b/public/assets/default_theme/css/colors.css new file mode 100644 index 0000000000..9bd47c89c5 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/public/assets/default_theme/css/widgets/buttons.css b/public/assets/default_theme/css/widgets/buttons.css index 257da2b1b5..65a7666cec 100644 --- a/public/assets/default_theme/css/widgets/buttons.css +++ b/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 { - 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; } \ No newline at end of file diff --git a/templates/network/feed.html.twig b/templates/network/feed.html.twig index 2b61e16c82..af436fe434 100644 --- a/templates/network/feed.html.twig +++ b/templates/network/feed.html.twig @@ -2,6 +2,12 @@ {% block title %}{% if page_title is defined %}{{ page_title | trans }}{% endif %}{% endblock %} +{% block stylesheets %} + {{ parent() }} + + +{% endblock stylesheets %} + {% block body %} {# Backwards compatibility with hAtom 0.1 #}
diff --git a/templates/settings/base.html.twig b/templates/settings/base.html.twig index 6b0c9584cc..4b58b3baaf 100644 --- a/templates/settings/base.html.twig +++ b/templates/settings/base.html.twig @@ -2,6 +2,12 @@ {% block title %}{% endblock %} +{% block stylesheets %} + {{ parent() }} + + +{% endblock stylesheets %} + {% block body %}