[SETTINGS][TWIG][CSS] Settings WIP. Form polished, dropdowns need styling.

Signed-off-by: Eliseu Amaro <mail@eliseuama.ro>
This commit is contained in:
Eliseu Amaro 2021-07-29 11:02:53 +01:00
parent 787afb9b41
commit 5e012c39ab
6 changed files with 64 additions and 36 deletions

View File

@ -115,6 +115,31 @@ a:hover {
transition: var(--cubic-transition);
}
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(--bg3);
background-color: var(--translucent);
color: var(--white);
transition: var(--cubic-transition);
}
input[type=file]::file-selector-button:hover,
button:hover {
border: 2px solid var(--white) !important;
background-color: var(--white) !important;
color: var(--bg1) !important;
}
button {
align-self: flex-end;
}
#instance:focus svg,
#instance:hover svg {
fill: var(--bg1);

View File

@ -137,32 +137,6 @@
flex: 1;
}
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(--bg3);
background-color: var(--translucent);
color: var(--white);
transition: 0.4s;
}
#post_post:hover {
border: 2px solid var(--white);
background-color: var(--white);
color: var(--bg1);
}
input[type=file]::file-selector-button:hover,
input[type=button]:hover {
border: 2px solid var(--white);
background-color: var(--white);
color: var(--bg1);
}
.create-notice details {
font-family: var(--display-font);
padding: var(--unit-size);

View File

@ -54,13 +54,6 @@ input[type="email"] {
width: 100%;
}
button {
font-family: var(--display-font);
font-size: var(--medium-size);
align-self: flex-end;
padding: var(--unit-size) var(--small-size);
}
fieldset div:last-child {
text-align: end;
}

View File

@ -40,6 +40,8 @@
.form #save {
margin-top: var(--main-size);
display: flex;
flex-direction: column;
font-size: var(--medium-size);
border-radius: var(--unit-size);
padding: var(--unit-size);
@ -47,6 +49,40 @@
background-color: var(--translucent);
}
.form #save div {
display: contents;
}
.form #save div label {
display: inline-block;
font-family: var(--display-font);
}
.form #save div input,
.form #save div textarea {
display: inline-block;
position: relative;
color: var(--white);
font-size: var(--medium-size);
border-radius: var(--unit-size);
padding: var(--unit-size);
box-sizing: border-box;
background-color: var(--translucent);
}
.form #save div textarea {
resize: vertical;
}
.form #save div p {
font-style: italic;
}
.form #save div:last-of-type {
text-align: end;
}
.icon-details-open {
fill: var(--white);
}

View File

@ -5,8 +5,8 @@
{% block page_name %}Account{% endblock %}
{% block form %}
<div class='form-single'>
<h1>Settings / Profile</h1>
<div class='form'>
<h1>Settings / Account</h1>
{{ form(acc) }}
</div>
{% endblock form %}

View File

@ -7,7 +7,7 @@
{% endblock %}
{% block form %}
<div id='form-tabs'>
<div class='form'>
<h1>Settings / Notifications </h1>
<ul>