GNUsocial/gnu-social
4
0
Fork 1
Code Issues Releases Wiki Activity

[CSS] Overall typography resizing to provide proper text hierarchy. Radio buttons polish, notes author box is now smaller. Better organization of CSS rules according to their filename and thus, their aim.

Browse Source
This commit is contained in:
Eliseu Amaro 2021-08-10 21:05:47 +01:00 committed by Hugo Sales
parent 1962a004aa
commit e15044fe36
Signed by: someonewithpc
GPG Key ID: 7D0C7EAFC9D835A0
8 changed files with 197 additions and 326 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

175
public/assets/css/base.css
View File

@ -31,13 +31,7 @@
--fade-out: fadeOut 200ms cubic-bezier(0, 0.55, 0.45, 1); --fade-out: fadeOut 200ms cubic-bezier(0, 0.55, 0.45, 1);
} }
#instance:focus svg, /* BACKGROUND IMG GRADIENT */
#instance:hover svg {
fill: var(--bg1);
transition: var(--cubic-transition);
}
/* DEFAULTS */
.bg { .bg {
background-color: var(--bg3); background-color: var(--bg3);
background-image: url(../images/bg.png); background-image: url(../images/bg.png);
@ -46,6 +40,7 @@
background-size: 100% 100%; background-size: 100% 100%;
} }
/* HEADER AND SIDEPANELS */
#header { #header {
z-index: 1; z-index: 1;
@ -63,6 +58,8 @@
box-shadow: var(--shadow); box-shadow: var(--shadow);
} }
/* content should be rendered after the header, not bellow */
#header + * { #header + * {
margin-top: 3rem; margin-top: 3rem;
} }
@ -72,10 +69,9 @@
align-items: center; align-items: center;
} }
.active { #instance:focus svg,
border-radius: var(--unit-size); #instance:hover svg {
background: var(--white); fill: var(--bg1);
color: var(--bg1) !important;
transition: var(--cubic-transition); transition: var(--cubic-transition);
} }
@ -84,6 +80,40 @@
fill: var(--white); fill: var(--white);
} }
.panel aside {
font-size: var(--medium-size);
display: block;
position: absolute;
top: 100%;
width: 20%;
animation: var(--fade-in);
padding: var(--unit-size);
}
.panel aside .footer {
display: inline-block;
position: fixed;
max-width: 20%;
bottom: var(--unit-size);
left: var(--unit-size);
font-size: var(--small-size);
}
.icon {
fill: var(--white);
}
/* CURRENT PAGE LINK */
.active {
border-radius: var(--unit-size);
background: var(--white);
color: var(--bg1) !important;
transition: var(--cubic-transition);
}
/* CONTAINS ALL ELEMENTS BESIDES HEADER */ /* CONTAINS ALL ELEMENTS BESIDES HEADER */
.container { .container {
display: flex; display: flex;
@ -152,7 +182,7 @@
background-color: var(--translucent); background-color: var(--translucent);
font-size: var(--main-size); font-size: var(--main-size);
padding: var(--unit-size); padding: 4px;
} }
.note-info .avatar { .note-info .avatar {
@ -164,7 +194,6 @@
padding: var(--small-size); padding: var(--small-size);
} }
.note-content p { .note-content p {
font-size: var(--medium-size);
padding-left: var(--small-size); padding-left: var(--small-size);
padding-right: var(--small-size); padding-right: var(--small-size);
} }
@ -193,58 +222,31 @@
height: auto; height: auto;
} }
/* SIDE PANELS */ /* BUTTONS AND INPUT */
.panel {
font-size: var(--main-size);
}
.panel aside {
animation: var(--fade-in);
padding: var(--unit-size);
box-sizing: border-box; /* MEDIA RESIZE */
width: 20%; @media (min-width: 1200px) {
/* no need to make the panels disappear at this size */
display: block;
position: absolute;
top: 100%;
}
.panel aside .footer {
max-width: 20%;
display: inline-block;
position: fixed;
bottom: var(--unit-size);
left: var(--unit-size);
font-size: var(--small-size);
}
.icon {
fill: var(--white);
vertical-align: middle;
}
.icon-left, .icon-left,
.icon-right { .icon-right {
display: none; display: none;
} }
/* MEDIA RESIZE */
@media (max-width: 1200px) {
.icon-left,
.icon-right {
display: flex;
} }
@media (max-width: 1200px) {
/* content should occupy the entire width at this size */
.content { .content {
margin: unset; margin: unset;
max-width: 100%; max-width: 100%;
} }
/* we need to control panel's view at this size */
.icon-left,
.icon-right {
display: flex;
}
/* by default they are hidden */
.panel aside { .panel aside {
display: none; display: none;
} }
@ -285,6 +287,73 @@
} }
} }
/* BUTTONS AND INPUT SHENANIGANS */
button,
input:not([type=text]) {
font-size: var(--small-size) !important;
background-image: linear-gradient(180deg, var(--bg2), transparent) !important;
color: var(--white) !important;
border: solid 2px var(--bg2) !important;
}
textarea:hover,
textarea:focus {
border-color: var(--bg3) !important;
}
/* TODO: hover and focus feedback, checkbox */
input[type=radio]:hover,
input[type=radio]:focus {
border-color: var(--bg3) !important;
}
input[type=radio] {
border: solid 0.25em var(--bg2) !important;
background-color: var(--bg1) !important;
}
input[type=radio]:checked {
background-color: var(--white) !important;
}
button:hover,
button:focus,
input:hover,
input:focus {
border-color: var(--bg3) !important;
color: var(--white) !important;
}
button:hover,
input:is([type=reset], [type=button], [type=submit]):hover {
color: var(--white) !important;
}
: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) !important;
}
/* file selector */
input[type=file] {
background: linear-gradient(180deg, var(--bg2), transparent) !important;
}
input[type=file]:focus,
input[type=file]:hover {
background: linear-gradient(180deg, var(--bg2), var(--bg3) 200%) !important;
}
/* button part of file selector */
::file-selector-button {
color: var(--white) !important;
}
/* ANIMATIONS */ /* ANIMATIONS */
@keyframes fadeIn { @keyframes fadeIn {
0% { 0% {

6
public/assets/css/left/left.css
View File

@ -62,7 +62,6 @@
#user-tags { #user-tags {
font-family: var(--main-font); font-family: var(--main-font);
font-size: var(--medium-size);
padding-left: var(--unit-size); padding-left: var(--unit-size);
} }
@ -91,8 +90,3 @@
flex-direction: column; flex-direction: column;
} }
.sec-nav {
font-size: var(--medium-size);
display: flex;
flex-direction: column;
}

91
public/assets/css/poll/poll.css
View File

@ -1,91 +0,0 @@
.poll .poll-question {
font-weight: 700;
}
.poll #pollresponse_Options {
display: flex;
flex-direction: column;
}
#pollresponse > * > label {
vertical-align: top;
display: none;
}
.poll .form-single,
.create-poll-notice .form-single {
height: 100%;
width: 100%;
border-radius: var(--small-size);
}
.poll .result {
display: flex;
padding-top: var(--unit-size);
}
.poll .result-vote {
font-weight: 650;
padding-left: var(--unit-size);
}
.create-poll-notice {
padding: var(--unit-size);
width: 100%;
}
#post_poll_visibility {
font-size: var(--medium-size);
color: var(--fg);
}
#post_poll_visibility > * {
padding-right: var(--unit-size);
}
#post_poll > * {
padding: calc(var(--unit-size) * 0.2);
}
/* FORMS ------------------------------*/
.poll label {
display: inline-block;
font-family: 'Montserrat', sans-serif;
width: 100%;
padding: 0.5em 0.1em;
}
.poll input[type=text],
.create-poll-notice input[type=text] {
margin-top: calc(var(--unit-size) * 0.5);
width: calc(100% - var(--unit-size));
background-color: var(--bg2);
box-shadow: var(--shadow);
border: solid 2px var(--accent-low);
padding: calc(var(--unit-size) * 0.5) calc(var(--unit-size) * 0.5);
color: var(--fg);
border-radius: calc(var(--unit-size) * 0.5);
font-size: var(--medium-size);
box-sizing: border-box;
}
.poll button[type=submit],
.create-poll-notice button[type=submit] {
background: var(--bg1);
padding: calc(var(--unit-size) * 0.8) calc(var(--unit-size) * 2);
color: var(--fg);
border-style: solid;
border-color: var(--accent);
border-radius: var(--unit-size);
border-width: 2px;
font-family: 'Montserrat', sans-serif;
font-size: var(--small-size);
font-weight: 700;
margin-top: 1em;
}

79
public/assets/css/reset.css
View File

@ -71,7 +71,8 @@ details > summary::-webkit-details-marker {
} }
* { * {
box-sizing: border-box; vertical-align: middle !important;
box-sizing: border-box !important;
} }
/* TYPOGRAPHY AND GENERAL SELECTORS */ /* TYPOGRAPHY AND GENERAL SELECTORS */
@ -84,6 +85,7 @@ html {
background-attachment: fixed; background-attachment: fixed;
color: var(--white); color: var(--white);
font-family: var(--main-font); font-family: var(--main-font);
font-size: var(--small-size);
} }
h1 { h1 {
@ -106,8 +108,8 @@ h2 {
h3 { h3 {
font-family: var(--display-font); font-family: var(--display-font);
font-size: var(--medium-size); font-size: var(--small-size);
font-weight: 600; font-weight: 700;
line-height: 1.00; line-height: 1.00;
letter-spacing: -0.20px; letter-spacing: -0.20px;
word-spacing: 1.00px; word-spacing: 1.00px;
@ -116,7 +118,7 @@ h3 {
p { p {
font-family: var(--main-font); font-family: var(--main-font);
font-size: var(--medium-size); font-size: var(--small-size);
font-weight: 400; font-weight: 400;
letter-spacing: -0.30px; letter-spacing: -0.30px;
word-spacing: -0.10px; word-spacing: -0.10px;
@ -124,6 +126,14 @@ p {
text-transform: none; text-transform: none;
} }
textarea {
font-family: var(--main-font);
font-weight: 400;
letter-spacing: -0.30px;
word-spacing: -0.10px;
text-transform: none;
}
ul { ul {
text-decoration: none; text-decoration: none;
margin: 0; margin: 0;
@ -197,83 +207,35 @@ input:not([type=text]) {
cursor: pointer; cursor: pointer;
font-size: var(--medium-size); font-size: var(--medium-size);
background-image: linear-gradient(180deg, var(--bg2), transparent);
color: var(--white);
border: solid 2px var(--bg2);
border-radius: var(--unit-size); border-radius: var(--unit-size);
padding: 6px 12px; padding: 6px 12px;
} }
textarea:hover,
textarea:focus {
border: solid 2px var(--bg3) !important;
}
*|*::-moz-button-content { *|*::-moz-button-content {
all: unset; all: unset;
} }
/* TODO: hover and focus feedback, checkbox */
input[type=radio]:hover,
input[type=radio]:focus {
border: solid 5px var(--bg3) !important;
}
input[type=radio] { input[type=radio] {
all: unset; all: unset;
display: inline-block; display: inline-block;
width: var(--unit-size); width: 1em;
height: var(--unit-size); height: 1em;
border: solid 5px var(--bg2);
border-radius: 50%; border-radius: 50%;
margin: 3px 3px 0px 5px; 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 */ /* file selector */
input[type=file] { input[type=file] {
all: unset; all: unset;
display: block;
max-width: 100%; display: block !important;
background: linear-gradient(135deg, var(--bg2), transparent); width: 100%;
font-family: var(--main-font); font-family: var(--main-font);
font-size: var(--medium-size); font-size: var(--medium-size);
border-radius: var(--unit-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 { input + label {
all: unset; all: unset;
@ -286,8 +248,7 @@ input + label {
cursor: pointer; cursor: pointer;
background-color: unset; background-color: unset;
color: var(--white);
border: unset; border: unset;
margin: 5px; margin: 3px;
} }

80
public/assets/css/right/right.css
View File

@ -2,7 +2,7 @@
right: 0; right: 0;
} }
.create-notice { .section-widget {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
@ -10,84 +10,52 @@
background-color: var(--translucent); background-color: var(--translucent);
border-radius: var(--unit-size); border-radius: var(--unit-size);
border: solid 2px var(--bg2); border: solid 2px var(--bg2);
}
.create-notice textarea { font-family: var(--main-font);
width: 100%; font-weight: 400;
color: var(--white);
} }
.section-title { .section-title {
display: flex; font-family: var(--display-font);
flex-direction: column; font-weight: 900;
font-size: var(--main-size);
border-radius: var(--unit-size); border-radius: var(--unit-size);
padding: var(--unit-size); padding: 2px var(--unit-size);
background-color: var(--translucent); background-color: var(--translucent);
font-family: var(--display-font); }
.section-title-hamburger {
display: flex;
justify-content: space-between;
}
.section-title-hamburger svg {
align-self: center;
fill: var(--white);
} }
.section-title-plus { .section-form {
fill: var(--white);
width: var(--main-size);
height: auto;
}
.section-title-plus summary {
display: block;
position: absolute;
top: var(--unit-size);
right: var(--unit-size);
padding: var(--unit-size); padding: var(--unit-size);
} }
.section-content { .form-options {
margin: var(--unit-size); display: block !important;
}
.section-content hr {
all: unset;
display: inline;
height: 2px;
background-image: linear-gradient(to left, var(--translucent), transparent 90%);
margin-bottom: var(--unit-size); margin-bottom: var(--unit-size);
} }
.target, .form-input {
.scope {
border-radius: var(--unit-size);
}
.target label:first-child,
.scope label:first-child {
font-family: var(--display-font);
}
#tabs {
display: flex;
flex-direction: column;
font-family: var(--display-font);
}
.notice-options {
width: 100%;
}
#post_content {
border-radius: var(--unit-size); border-radius: var(--unit-size);
background-color: var(--translucent); background-color: var(--translucent);
color: var(--white);
width: 100%;
max-width: 100%; max-width: 100%;
height: calc(6 * var(--main-size)); height: calc(6 * var(--main-size));
border: 2px solid var(--bg2); border: 2px solid transparent;
margin-top: var(--unit-size); margin-top: var(--unit-size);
margin-bottom: var(--unit-size); margin-bottom: var(--unit-size);
padding: var(--unit-size); padding: var(--unit-size);
resize: vertical; resize: vertical;
font-family: var(--main-font);
font-size: var(--medium-size);
color: var(--white);
}
.attachments {
margin-bottom: var(--unit-size);
} }

5
public/assets/css/settings/settings.css
View File

@ -1,7 +1,6 @@
.main-nav { .main-nav {
background-color: var(--translucent); background-color: var(--translucent);
margin-bottom: var(--unit-size); margin-bottom: var(--unit-size);
font-size: var(--main-size);
border-radius: var(--unit-size); border-radius: var(--unit-size);
padding: var(--unit-size); padding: var(--unit-size);
box-sizing: border-box; box-sizing: border-box;
@ -30,13 +29,11 @@
} }
.main-nav ul li { .main-nav ul li {
font-size: var(--medium-size);
border-radius: var(--unit-size); border-radius: var(--unit-size);
} }
.form { .form {
display: flex; display: flex;
font-size: var(--main-size);
border-radius: var(--unit-size); border-radius: var(--unit-size);
padding: var(--unit-size); padding: var(--unit-size);
box-sizing: border-box; box-sizing: border-box;
@ -57,7 +54,6 @@
.form #save { .form #save {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-size: var(--medium-size);
padding: var(--unit-size); padding: var(--unit-size);
box-sizing: border-box; box-sizing: border-box;
} }
@ -77,7 +73,6 @@
position: relative; position: relative;
color: var(--white); color: var(--white);
font-size: var(--medium-size);
border-radius: var(--unit-size); border-radius: var(--unit-size);
padding: var(--unit-size); padding: var(--unit-size);
box-sizing: border-box; box-sizing: border-box;

12
templates/settings/base.html.twig
View File

@ -23,7 +23,7 @@
<li> <li>
<details class="section-title-settings"> <details class="section-title-settings">
<summary> <summary>
<h1>Profile {{ icon('arrow-down', 'icon icon-details-open') | raw }}</h1> <h2>Profile {{ icon('arrow-down', 'icon icon-details-open') | raw }}</h2>
<em>Personal Information, Avatar and Profile</em> <em>Personal Information, Avatar and Profile</em>
</summary> </summary>
@ -34,8 +34,8 @@
<li> <li>
<details class="section-title-settings"> <details class="section-title-settings">
<summary> <summary>
<h1>Personal <h3>Personal
Info{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h1> Info{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h3>
<em>Nickname, Homepage, Bio, Self Tags and more.</em> <em>Nickname, Homepage, Bio, Self Tags and more.</em>
</summary> </summary>
@ -53,7 +53,7 @@
<li> <li>
<details class="section-title-settings"> <details class="section-title-settings">
<summary> <summary>
<h1>{{ tab['title'] }}{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h1> <h3>{{ tab['title'] }}{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h3>
<em>{{ tab['desc'] }}</em> <em>{{ tab['desc'] }}</em>
</summary> </summary>
@ -79,7 +79,7 @@
<li> <li>
<details class="section-title-settings"> <details class="section-title-settings">
<summary> <summary>
<h1>Account{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h1> <h2>Account{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h2>
<em>Email, Password and Language</em> <em>Email, Password and Language</em>
</summary> </summary>
@ -96,7 +96,7 @@
<li> <li>
<details class="section-title-settings"> <details class="section-title-settings">
<summary> <summary>
<h1>Notifications{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h1> <h2>Notifications{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h2>
<em>Enable/disable notifications (Email, XMPP, Replies...)</em> <em>Enable/disable notifications (Email, XMPP, Replies...)</em>
</summary> </summary>

59
templates/sidepanel/right/right.html.twig
View File

@ -1,78 +1,53 @@
<aside id='right-panel'> <aside id='right-panel'>
{% if post_form is defined %} {% if post_form is defined %}
<section class="section-widget">
<section class="create-notice">
<legend class="section-title"> <legend class="section-title">
<h1>Create a note</h1> <details>
<summary class="section-title-hamburger">
<details class="section-title-plus"> Create a note {{ icon('plus-circle', 'icon icon-plus') | raw }}
<summary>
{{ icon('plus-circle', 'icon icon-plus') | raw }}
</summary> </summary>
<div id="note-types">
{% for tab in tabs %} {% for tab in tabs %}
<a href={{ path(tab['href']) }}>{{ tab['title'] }}</a> <a class="section-title-hamburger-element" href={{ path(tab['href']) }}>{{ tab['title'] }}</a>
{% endfor %} {% endfor %}
</div>
</details> </details>
</legend> </legend>
<div class="section-content"> <div class="section-form">
{{ form_start(post_form) }} {{ form_start(post_form) }}
<span class="target">
<div class="target-top"> <span class="form-target">
{{ form_label(post_form.to) }} {{ form_label(post_form.to) }}
</div>
<div class="target-bot">
{{ form_widget(post_form.to) }} {{ form_widget(post_form.to) }}
</div>
</span> </span>
<hr> {{ form_row(post_form.visibility, {'attr': {'class': 'form-scope'}}) }}
<span class="scope"> {{ form_row(post_form.content, {'attr': {'class': 'form-input'}}) }}
<div class="visibility">
{{ form_row(post_form.visibility) }}
</div>
</span>
<hr> <label for="{{ post_form.attachments.vars.id }}" class="form-options">
<span id="input">
<div class="input-wrapper">
<div class="content-input">
{{ form_row(post_form.content) }}
</div>
</div>
<div class="notice-options">
<div class="attachments">
<label for="{{ post_form.attachments.vars.id }}" class="custom-file-upload">
{{ form_widget(post_form.attachments) }} {{ form_widget(post_form.attachments) }}
</label> </label>
</div>
</div>
</span>
{{ form_row(post_form.post) }} {{ form_row(post_form.post, {'attr': {'class': 'form-send'}}) }}
{{ form_end(post_form) }} {{ form_end(post_form) }}
</div> </div>
</section> </section>
{% endif %} {% endif %}
{% set current_path = app.request.get('_route') %} {% set current_path = app.request.get('_route') %}
{% if right_panel_vars is defined %} {% if right_panel_vars is defined %}
{% for block in handle_event('AppendRightPanelBlock', {'path': current_path, 'vars': right_panel_vars}) %} {% for block in handle_event('AppendRightPanelBlock', {'path': current_path, 'vars': right_panel_vars}) %}
<section class="section-widget">
{{ block | raw }} {{ block | raw }}
</section>
{% endfor %} {% endfor %}
{% else %} {% else %}
{% for block in handle_event('AppendRightPanelBlock', {'path': current_path}) %} {% for block in handle_event('AppendRightPanelBlock', {'path': current_path}) %}
<section class="section-widget">
{{ block | raw }} {{ block | raw }}
</section>
{% endfor %} {% endfor %}
{% endif %} {% endif %}
</aside> </aside>