[TWIG][CSS] Left panel text hierarchy fix (no <hr> element between timeline navigation and its items). Default CSS fixes for buttons and input file selectors.

public/assets/css/base.css

@@ -10,9 +10,9 @@
      * small size     - used in common text, borders
      */
     --unit-size: 0.5rem;
-    --main-size: 1.3rem;
+    --main-size: 1.15rem;
-    --medium-size: 1.15rem;
+    --medium-size: 0.9rem;
-    --small-size: 1rem;
+    --small-size: 0.8rem;
 
     /* colours and shadows */
     --bg1: #242434;

public/assets/css/doc/doc.css

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

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);
@@ -459,3 +179,96 @@ hr {
     height: 2px;
     background: var(--translucent);
 }
+
+/* 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;
+}

public/assets/css/right/right.css

@@ -55,27 +55,11 @@
     border-radius: var(--unit-size);
 }
 
-.target label,
+.target label:first-child,
-.scope label {
+.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;
 
@@ -114,6 +91,3 @@
 .attachments {
     margin-bottom: var(--unit-size);
 }
-.attachments > * {
-    cursor: pointer !important;
-}

templates/doc/base.html.twig

@@ -1,28 +0,0 @@
-{% extends 'stdgrid.html.twig' %}
-
-{% block meta %}
-    {{ parent() }}
-{% endblock %}
-
-{% block title %}{% endblock %}
-
-{% block stylesheets %}
-    {{ parent() }}
-    <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/doc/doc.css') }}"
-          media="screen and (min-width: 1300px)">
-    <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/doc/doc_mid.css') }}"
-          media="screen and (max-width: 1300px)">
-    <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/doc/doc_small.css') }}"
-          media="screen and (max-width: 750px)">
-{% endblock %}
-
-{% block header %}
-    {{ parent() }}
-{% endblock %}
-
-{% block left %}
-    {{ parent() }}
-{% endblock %}
-
-
-{% block javascripts %}{% endblock %}

templates/doc/privacy.html.twig

@@ -1,4 +1,4 @@
-{% extends 'doc/base.html.twig' %}
+{% extends 'base.html.twig' %}
 
 {% block title %}Privacy{% endblock %}
 {% block body %}

templates/doc/source.html.twig

@@ -1,4 +1,4 @@
-{% extends 'doc/base.html.twig' %}
+{% extends 'base.html.twig' %}
 
 {% block title %}Source{% endblock %}
 {% block body %}

templates/doc/tos.html.twig

@@ -1,4 +1,4 @@
-{% extends 'doc/base.html.twig' %}
+{% extends 'base.html.twig' %}
 
 {% block title %}TOS{% endblock %}
 {% block body %}

templates/doc/version.html.twig

@@ -1,4 +1,4 @@
-{% extends 'doc/base.html.twig' %}
+{% extends 'base.html.twig' %}
 
 {% block title %}Version{% endblock %}
 {% block body %}

templates/sidepanel/left/left.html.twig

@@ -55,10 +55,7 @@
 
         <div class="timeline-nav">
             <nav>
-                <a href="{{ path('main_public') }}"
+                <h1>Timeline</h1>
-                   class='{{ active('main_public', 'main_all', "home_all") }}'>Timeline</a>
-
-                <hr>
 
                 <nav class='sec-nav'>
                     <a href="{{ path('main_public') }}"