[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.

This commit is contained in:
Eliseu Amaro 2021-08-05 22:47:03 +01:00 committed by Hugo Sales
parent 0f032c257b
commit 10f930ad4b
Signed by: someonewithpc
GPG Key ID: 7D0C7EAFC9D835A0
10 changed files with 106 additions and 439 deletions

View File

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

View File

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

View File

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

View File

@ -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;
@ -114,6 +91,3 @@
.attachments {
margin-bottom: var(--unit-size);
}
.attachments > * {
cursor: pointer !important;
}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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