[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
Hugo Sales
parent
0f032c257b
commit
10f930ad4b
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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 %}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
{% extends 'doc/base.html.twig' %}
|
||||
{% extends 'base.html.twig' %}
|
||||
|
||||
{% block title %}Privacy{% endblock %}
|
||||
{% block body %}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
{% extends 'doc/base.html.twig' %}
|
||||
{% extends 'base.html.twig' %}
|
||||
|
||||
{% block title %}Source{% endblock %}
|
||||
{% block body %}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
{% extends 'doc/base.html.twig' %}
|
||||
{% extends 'base.html.twig' %}
|
||||
|
||||
{% block title %}TOS{% endblock %}
|
||||
{% block body %}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
{% extends 'doc/base.html.twig' %}
|
||||
{% extends 'base.html.twig' %}
|
||||
|
||||
{% block title %}Version{% endblock %}
|
||||
{% block body %}
|
||||
|
|
|
|||
|
|
@ -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') }}"
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user