diff --git a/public/assets/css/base.css b/public/assets/css/base.css index 842302103b..4c992e9fd4 100644 --- a/public/assets/css/base.css +++ b/public/assets/css/base.css @@ -10,9 +10,9 @@ * small size - used in common text, borders */ --unit-size: 0.5rem; - --main-size: 1.3rem; - --medium-size: 1.15rem; - --small-size: 1rem; + --main-size: 1.15rem; + --medium-size: 0.9rem; + --small-size: 0.8rem; /* colours and shadows */ --bg1: #242434; diff --git a/public/assets/css/doc/doc.css b/public/assets/css/doc/doc.css deleted file mode 100644 index 0f779cfbf5..0000000000 --- a/public/assets/css/doc/doc.css +++ /dev/null @@ -1,89 +0,0 @@ -.content { - display: flex; - flex-wrap: wrap; - margin-top: calc(4 * var(--main-size)); - justify-content: center; - align-items: center; - margin-left: calc(var(--nav-size) + var(--unit-size)); - margin-right: calc(var(--nav-size) + var(--unit-size)); - margin-bottom: var(--unit-size); - border: solid 2px var(--accent-low); - border-radius: var(--small-size); -} - -.faq-nav { - order: 1; - display: flex; - justify-content: space-evenly; - flex-wrap: wrap; - flex: 1; - background-color: var(--bg1); - padding: var(--medium-size); - font-size: var(--medium-size); - font-family: var(--head-font); - border-radius: var(--small-size) var(--small-size) 0 0; -} - -.faq-nav ul { - display: flex; - align-items: stretch; - justify-content: space-evenly; - width: 100%; - margin-left: calc(2 * var(--side-margin)); - margin-right: calc(2 * var(--side-margin)); - padding: 0; -} - -.faq-nav li { - display: block; - flex: 0 1 auto; - list-style-type: none; - font-weight: 700; -} - -.active { - color: #F6F6F6 !important; - font-weight: 700; -} - -.faq-nav a { - color: #91B9D0; -} - -.faq-nav a:hover { - color: #F6F6F6; - transition: all 0.8s ease; -} - -.faq-nav a:focus { - color: #F6F6F6; - transition: all 0.8s ease; -} - -.markd { - order: 2; - background-color: var(--bg2); - font-size: var(--medium-size); - padding: calc(3 * var(--unit-size)); - padding-top: var(--unit-size); - border-radius: 0 0 var(--small-size) var(--small-size); -} - -.markd-single { - border-radius: var(--small-size) !important; -} - -.markd h2 { - margin-top: var(--unit-size); -} - -.markd p { - margin-top: var(--unit-size); - margin-left: calc(0.5 * var(--unit-size)); -} - -.markd ul { - list-style-type: disc; - margin-left: calc(2 * var(--unit-size)); - margin-top: var(--unit-size); -} diff --git a/public/assets/css/reset.css b/public/assets/css/reset.css index 5ff6a71ede..d9ce1c3b86 100644 --- a/public/assets/css/reset.css +++ b/public/assets/css/reset.css @@ -66,226 +66,6 @@ details > summary::-webkit-details-marker { } } -abbr[title] { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -code, -kbd, -samp, -pre { - font-family: monospace, monospace; - font-size: 1em; -} - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -button, -input, -optgroup, -select, -textarea { - line-height: inherit; - border: unset; -} - -button { - overflow: visible; - text-transform: none; -} - -button, -[type=button], -[type=reset], -[type=submit] { - -webkit-appearance: button; - padding: 0.1em 0.5em; - float: right; -} - -input { - overflow: visible; -} - -input, -textarea { - padding: 1px; -} - -fieldset { - border: unset; - margin: 0 2px; -} - -legend { - color: inherit; - display: table; - max-width: 100%; - white-space: normal; -} - -progress { - display: inline-block; - vertical-align: baseline; -} - -select { - text-transform: none; -} - -textarea { - overflow: auto; - vertical-align: top; -} -textarea:hover, -textarea:focus { - border: solid 2px var(--bg3) !important; -} - -[type=search] { - -webkit-appearance: textfield; - outline-offset: -2px; -} - -[type=color] { - background: inherit; -} - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -::-webkit-input-placeholder { - color: inherit; - opacity: 0.5; -} - -::-webkit-search-decoration, -::-webkit-file-upload-button { - -webkit-appearance: button; - font: inherit; -} - -::-moz-focus-inner { - border: 0; -} - -:-moz-focusring { - outline: 1px dotted ButtonText; -} - -:-moz-ui-invalid { - box-shadow: none; -} - -hr { - box-sizing: content-box; - height: 0; - color: inherit; - overflow: visible; -} - -dl, -ol, -ul { - margin: 1em 0; -} - -ol ol, -ol ul, -ol dl, -ul ol, -ul ul, -ul dl, -dl ol, -dl ul, -dl dl { - margin: 0; -} - -b, -strong { - font-weight: bolder; -} - -audio, -video { - display: inline-block; -} - -audio:not([controls]) { - display: none; - height: 0; -} - -img { - border: 0; -} - -svg:not(:root) { - overflow: hidden; -} - -table { - text-indent: 0; - border-color: inherit; -} - -details { - display: block; -} - -dialog { - background-color: inherit; - border: solid; - color: inherit; - display: block; - height: -webkit-fit-content; - height: -moz-fit-content; - height: fit-content; - left: 0; - margin: auto; - padding: 1em; - position: absolute; - right: 0; - width: -webkit-fit-content; - width: -moz-fit-content; - width: fit-content; -} - -dialog:not([open]) { - display: none; -} - -summary { - cursor: default !important; - display: list-item; -} - -canvas { - display: inline-block; -} - -template { - display: none; -} - [hidden] { display: none; } @@ -299,6 +79,7 @@ body, html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeLegibility; background-attachment: fixed; color: var(--white); @@ -383,67 +164,6 @@ figcaption a:link { color: var(--white); } -input[type=file] { - max-width: 100%; -} - -button, -input[type=file]::file-selector-button { - font-family: var(--display-font) ; - font-size: var(--medium-size); - padding: .2em .4em; - - border-radius: var(--unit-size); - border: 2px solid var(--bg2); - - background-color: var(--translucent); - color: var(--white); - transition: var(--cubic-transition); - cursor: pointer; -} -input[type=file]::-ms-browse, -input[type=file]::-webkit-file-upload-button { - font-family: var(--display-font); - font-size: var(--medium-size); - padding: .2em .4em; - - border-radius: var(--unit-size); - border: 2px solid var(--bg2); - - background-color: var(--translucent); - color: var(--white); - transition: var(--cubic-transition); -} -button:hover, -button:focus, -input[type=file]:hover, -input[type=file]:focus, -input[type=file]:hover::file-selector-button, -input[type=file]:focus::file-selector-button { - border-radius: var(--unit-size); - border: 2px solid var(--white); - background-color: var(--white); - color: var(--bg2); -} -input[type=file]::-webkit-file-upload-button:hover, -input[type=file]::-ms-browse:hover, -input[type=file]::-webkit-file-upload-button:focus, -input[type=file]::-ms-browse:focus { - border: 2px solid var(--white); - background-color: var(--white); - color: var(--bg2); -} - -button { - align-self: end; -} - -input[type=file], -input[type="checkbox"], -input[type="radio"] { - cursor: pointer; -} - summary:hover > svg, summary:focus > svg { border-radius: var(--unit-size); @@ -458,4 +178,97 @@ hr { display: block; height: 2px; background: var(--translucent); -} \ No newline at end of file +} + +/* BUTTONS AND FILEPICKER */ +button, +input:not([type=text]) { + all: unset; + + cursor: pointer; + font-size: var(--medium-size); + + background: linear-gradient(135deg, var(--bg2), transparent); + color: var(--white); + + border: solid 2px var(--bg2); + border-radius: var(--unit-size); + padding: var(--unit-size) var(--small-size); +} + +*|*::-moz-button-content { + all: unset; +} + +/* TODO: hover and focus feedback, checkbox */ +input[type=radio] { + all: unset; + display: inline-block; + width: var(--unit-size); + height: var(--unit-size); + border: solid 5px var(--bg2) !important; + border-radius: 50%; + margin: 3px 3px 0px 5px; + background-color: var(--bg1); +} +input[type=radio]:checked { + background-color: var(--white); +} + +button:hover, +button:focus, +input:hover, +input:focus { + border: solid 2px var(--bg3); + color: var(--white); +} + +button:hover, +input:is([type=reset], [type=button], [type=submit]):hover { + color: var(--white); +} + +:focus-visible::-moz-focus-inner { + border-color: var(--bg3) !important; +} + +:is(:disabled, :disabled:active)::file-selector-button, +button:is(:disabled, :disabled:active), +input:is([type=reset], [type=button], [type=submit]):is(:disabled, :disabled:active), +select:is(:disabled, :disabled:active) > button { + color: var(--white); +} + +/* file selector */ +input[type=file] { + all: unset; + display: block; + max-width: 100%; + background: linear-gradient(135deg, var(--bg2), transparent); + + font-family: var(--main-font); + font-size: var(--medium-size); + + border-radius: var(--unit-size); +} +input[type=file]:focus, +input[type=file]:hover { + background: linear-gradient(135deg, var(--bg2), var(--bg3) 200%); +} + +input + label { + all: unset; + align-self: center; +} + +/* button part of file selector */ +::file-selector-button { + font-family: var(--display-font); + cursor: pointer; + + background-color: unset; + color: var(--white); + + border: unset; + margin: 5px; +} diff --git a/public/assets/css/right/right.css b/public/assets/css/right/right.css index 359ea5b8d0..74e825f16c 100644 --- a/public/assets/css/right/right.css +++ b/public/assets/css/right/right.css @@ -55,27 +55,11 @@ border-radius: var(--unit-size); } -.target label, -.scope label { +.target label:first-child, +.scope label:first-child { font-family: var(--display-font); } -#post_visibility { - display: flex; - flex-wrap: wrap; - justify-content: flex-start; - font-size: var(--medium-size); - margin: var(--unit-size); -} - -#post_visibility input[type="radio"] { - margin-right: 2px; -} - -#post_visibility label { - margin-right: var(--small-size); -} - #tabs { display: flex; flex-direction: column; @@ -83,17 +67,9 @@ } .notice-options { - margin-top: var(--unit-size); - display: inline-block; - - font-family: var(--display-font); width: 100%; } -.post { - align-self: flex-end; -} - #post_content { border-radius: var(--unit-size); background-color: var(--translucent); @@ -103,6 +79,7 @@ border: 2px solid var(--bg2); margin-top: var(--unit-size); + margin-bottom: var(--unit-size); padding: var(--unit-size); resize: vertical; @@ -113,7 +90,4 @@ .attachments { margin-bottom: var(--unit-size); -} -.attachments > * { - cursor: pointer !important; } \ No newline at end of file diff --git a/templates/doc/base.html.twig b/templates/doc/base.html.twig deleted file mode 100644 index 747bd4cb25..0000000000 --- a/templates/doc/base.html.twig +++ /dev/null @@ -1,28 +0,0 @@ -{% extends 'stdgrid.html.twig' %} - -{% block meta %} - {{ parent() }} -{% endblock %} - -{% block title %}{% endblock %} - -{% block stylesheets %} - {{ parent() }} - - - -{% endblock %} - -{% block header %} - {{ parent() }} -{% endblock %} - -{% block left %} - {{ parent() }} -{% endblock %} - - -{% block javascripts %}{% endblock %} \ No newline at end of file diff --git a/templates/doc/privacy.html.twig b/templates/doc/privacy.html.twig index 13eb293a79..dd947262d4 100644 --- a/templates/doc/privacy.html.twig +++ b/templates/doc/privacy.html.twig @@ -1,4 +1,4 @@ -{% extends 'doc/base.html.twig' %} +{% extends 'base.html.twig' %} {% block title %}Privacy{% endblock %} {% block body %} diff --git a/templates/doc/source.html.twig b/templates/doc/source.html.twig index 5ece129a46..2bb5c4c0d8 100644 --- a/templates/doc/source.html.twig +++ b/templates/doc/source.html.twig @@ -1,4 +1,4 @@ -{% extends 'doc/base.html.twig' %} +{% extends 'base.html.twig' %} {% block title %}Source{% endblock %} {% block body %} diff --git a/templates/doc/tos.html.twig b/templates/doc/tos.html.twig index 572fca994b..e6bcaa6a59 100644 --- a/templates/doc/tos.html.twig +++ b/templates/doc/tos.html.twig @@ -1,4 +1,4 @@ -{% extends 'doc/base.html.twig' %} +{% extends 'base.html.twig' %} {% block title %}TOS{% endblock %} {% block body %} diff --git a/templates/doc/version.html.twig b/templates/doc/version.html.twig index 236242f283..d9d7bf8c33 100644 --- a/templates/doc/version.html.twig +++ b/templates/doc/version.html.twig @@ -1,4 +1,4 @@ -{% extends 'doc/base.html.twig' %} +{% extends 'base.html.twig' %} {% block title %}Version{% endblock %} {% block body %} diff --git a/templates/sidepanel/left/left.html.twig b/templates/sidepanel/left/left.html.twig index 0a54cee592..3ce75343ce 100644 --- a/templates/sidepanel/left/left.html.twig +++ b/templates/sidepanel/left/left.html.twig @@ -55,10 +55,7 @@