[TWIG][Templates] Rename inconsistent CSS classes

[CSS] Font size hierarchy refactor
[PLUGINS][MediaFeed] Renamed BeforeFeed event

Type scale hierarchy redone. Bigger line height added, making it easier
to click on links and separate contents.

Feed title added. AddFeedActions replaces BeforeFeed event.
MediaFeed links will now show an icon to the right of the feed title,
smaller footprint and more consistent with the overall design.
This commit is contained in:
Eliseu Amaro 2021-12-23 21:29:46 +00:00 committed by Diogo Peralta Cordeiro
parent f10b3bb05c
commit 671c3968e2
Signed by: diogo
GPG Key ID: 18D2D35001FBFAB0
34 changed files with 264 additions and 355 deletions

View File

@ -9,9 +9,15 @@
{% endblock stylesheets %} {% endblock stylesheets %}
{% block body %} {% block body %}
{% for block in handle_event('BeforeFeed', app.request) %} <header class="feed-header">
<h1>{{ page_title | trans }} {{ 'feed' | trans }}</h1>
<nav class="feed-actions" role=navigation>
{% for block in handle_event('AddFeedActions', app.request) %}
{{ block | raw }} {{ block | raw }}
{% endfor %} {% endfor %}
</nav>
</header>
{# Backwards compatibility with hAtom 0.1 #} {# Backwards compatibility with hAtom 0.1 #}
<main class="feed" tabindex="0" role="feed"> <main class="feed" tabindex="0" role="feed">
<div class="h-feed hfeed notes"> <div class="h-feed hfeed notes">

View File

@ -36,7 +36,7 @@
</main> </main>
{% else %} {% else %}
<div class="section-widget-padded section-widget"> <div class="section-padding section-widget">
<p>{% trans with { '%group%': nickname } %}The group <em>%group%</em> doesn't exist.{% endtrans %}</p> <p>{% trans with { '%group%': nickname } %}The group <em>%group%</em> doesn't exist.{% endtrans %}</p>
{% if create_form is defined and create_form is not null %} {% if create_form is defined and create_form is not null %}
<p>{% trans %}Would you like to create it?{% endtrans %}</p> <p>{% trans %}Would you like to create it?{% endtrans %}</p>

View File

@ -6,7 +6,7 @@
{% endblock stylesheets %} {% endblock stylesheets %}
{% block body %} {% block body %}
<div class="section-widget section-widget-padded"> <div class="section-widget">
<form class="section-form" action="{{ path('edit_feeds') }}" method="post"> <form class="section-form" action="{{ path('edit_feeds') }}" method="post">
<fieldset> <fieldset>
@ -16,7 +16,7 @@
{{ form_start(edit_feeds) }} {{ form_start(edit_feeds) }}
{% for child in edit_feeds.children %} {% for child in edit_feeds.children %}
{% if 'row_url' in child.vars.block_prefixes %} {% if 'row_url' in child.vars.block_prefixes %}
<div class="section-widget section-widget-padded"> <div class="section-widget section-padding">
{{ form_label(child) }} {{ form_label(child) }}
{{ form_widget(child) }} {{ form_widget(child) }}
{% elseif 'row_title' in child.vars.block_prefixes %} {% elseif 'row_title' in child.vars.block_prefixes %}

View File

@ -7,7 +7,7 @@
<a id="anchor-left-panel" class="anchor-hidden" title="{{ 'Press tab to access selected region!' | trans }}"></a> <a id="anchor-left-panel" class="anchor-hidden" title="{{ 'Press tab to access selected region!' | trans }}"></a>
<aside class="panel-content accessibility-target"> <aside class="panel-content accessibility-target">
{% if app.user %} {% if app.user %}
<section class='section-widget section-widget-padded' title="{{ 'Your profile information.' | trans }}"> <section class='section-widget section-padding' title="{{ 'Your profile information.' | trans }}">
{% block profile_view %}{% include 'cards/profile/view.html.twig' with { actor: current_actor } %}{% endblock profile_view %} {% block profile_view %}{% include 'cards/profile/view.html.twig' with { actor: current_actor } %}{% endblock profile_view %}
{{ block("profile_current_actor", "cards/navigation/view.html.twig") }} {{ block("profile_current_actor", "cards/navigation/view.html.twig") }}
</section> </section>

View File

@ -1,6 +1,6 @@
{% block rightpanel %} {% block rightpanel %}
<label class="panel-right-icon" for="panel-right-toggle" aria-hidden="true" <label class="panel-right-icon" for="panel-right-toggle" aria-hidden="true"
tabindex="-1">{{ icon('notes', 'icon icon-right') | raw }}</label> tabindex="-1">{{ icon('chevron-left', 'icon icon-right') | raw }}</label>
<input type="checkbox" id="panel-right-toggle" aria-hidden="true" tabindex="-1"> <input type="checkbox" id="panel-right-toggle" aria-hidden="true" tabindex="-1">
<div class="header-panel section-panel-right"> <div class="header-panel section-panel-right">
@ -29,9 +29,9 @@
<details class="section-widget-subtitle-details"> <details class="section-widget-subtitle-details">
<summary class="section-subtitle-summary"> <summary class="section-subtitle-summary">
<h3> <strong>
{{ "Additional options" | trans }} {{ "Additional options" | trans }}
</h3> </strong>
{{ icon('arrow-down', 'icon icon-details-close') | raw }} {{ icon('arrow-down', 'icon icon-details-close') | raw }}
</summary> </summary>
{{ form_row(blocks['post_form'].language) }} {{ form_row(blocks['post_form'].language) }}

View File

@ -8,7 +8,7 @@
</label> </label>
{% endif %} {% endif %}
<div class="section-widget-padded"> <div class="section-padding">
{{ form_start(search_form) }} {{ form_start(search_form) }}
<div> <div>
{{ form_row(search_form.search_query) }} {{ form_row(search_form.search_query) }}

View File

@ -23,7 +23,7 @@
{% block profile_view %}{% include 'cards/profile/view.html.twig' %}{% endblock profile_view %} {% block profile_view %}{% include 'cards/profile/view.html.twig' %}{% endblock profile_view %}
{% endfor %} {% endfor %}
<div class="section-widget section-widget-padded"> <div class="section-widget section-padding">
{{ "Page: " ~ page }} {{ "Page: " ~ page }}
</div> </div>
{% endblock %} {% endblock %}

View File

@ -1,6 +1,6 @@
{% import '/cards/note/view.html.twig' as noteView %} {% import '/cards/note/view.html.twig' as noteView %}
<section class="section-widget section-widget-padded"> <section class="section-widget section-padding">
<div class="section-title"> <div class="section-title">
{{ 'Notes related' | trans }} {{ 'Notes related' | trans }}
</div> </div>

View File

@ -54,7 +54,7 @@ class MediaFeed extends Plugin
* *
* @return bool hook value; true means continue processing, false means stop * @return bool hook value; true means continue processing, false means stop
*/ */
public function onBeforeFeed(Request $request, &$res): bool public function onAddFeedActions(Request $request, &$res): bool
{ {
$isMediaActive = $request->get('filter-type') === 'media'; $isMediaActive = $request->get('filter-type') === 'media';
// we need two urls: one with filter-type=media and without it. // we need two urls: one with filter-type=media and without it.

View File

@ -1,5 +1,2 @@
<nav class=media-feed-tabs role=navigation> <a {{ main.active ? 'class="active"' : '' }} href="{{ main.url }}">{{ icon('feed', 'icon icon-right') | raw }}</a>
<a {{ main.active ? 'class="active"' : '' }} href="{{ main.url }}">{% trans %}All{% endtrans %}</a> <a {{ media.active ? 'class="active"' : '' }} href="{{ media.url }}">{{ icon('media', 'icon icon-right') | raw }}</a>
<div tabindex="0" class=separator>&nbsp;</div>
<a {{ media.active ? 'class="active"' : '' }} href="{{ media.url }}">{% trans %}Media{% endtrans %}</a>
</nav>

View File

@ -1,9 +1,9 @@
:root { :root {
--smaller: .6rem; --s: .6rem;
--default: 1rem; --unit: 1rem;
--small: 1.3rem; --m: 1.3rem;
--medium: 1.62rem; --xl: 1.62rem;
--big: 3rem; --xxl: 3rem;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {

View File

@ -1,5 +1,5 @@
{% if actor_tags is not empty %} {% if actor_tags is not empty %}
<div class="section-widget section-widget-padded"> <div class="section-widget section-padding">
<h2>Related tags:</h2> <h2>Related tags:</h2>
{% for at in actor_tags %} {% for at in actor_tags %}
{% include 'cards/tag/actor_tag.html.twig' with { 'tag': at, 'actor': null } %} {% include 'cards/tag/actor_tag.html.twig' with { 'tag': at, 'actor': null } %}

View File

@ -1,5 +1,5 @@
{% if note_tags is not empty %} {% if note_tags is not empty %}
<div class="section-widget section-widget-padded"> <div class="section-widget section-padding">
<h2>Related tags:</h2> <h2>Related tags:</h2>
{% for nt in note_tags %} {% for nt in note_tags %}

View File

@ -8,7 +8,7 @@
{% block body %} {% block body %}
{% if note is defined or actor is defined %} {% if note is defined or actor is defined %}
<div class="section-widget-padded"> <div class="section-padding">
{% if note is defined and note is not null %} {% if note is defined and note is not null %}
{{ noteView.macro_note(note, {}) }} {{ noteView.macro_note(note, {}) }}
{% elseif actor is defined and actor is not null %} {% elseif actor is defined and actor is not null %}

View File

@ -40,34 +40,33 @@
left: -90%; left: -90%;
width: 30%; width: 30%;
height: min-content; height: min-content;
padding: var(--smaller); padding: var(--s);
border-radius: var(--smaller); border-radius: var(--s);
background-color: var(--background-hard) !important; background-color: var(--background-hard) !important;
border: 2px solid var(--border); border: 2px solid var(--border);
} }
.accessibility-menu ul { .accessibility-menu ul {
list-style-type: disc; list-style-type: disc;
margin-left: var(--small); margin-left: var(--m);
} }
.accessibility-menu:focus-within:not(:active) { .accessibility-menu:focus-within:not(:active) {
top: var(--smaller); top: var(--s);
left: var(--smaller); left: var(--s);
} }
html { html {
scroll-margin-top: var(--big); scroll-margin-top: var(--xxl);
} }
.page-header { .page-header {
z-index: 1; z-index: 1;
font-family: 'Poppins',sans-serif; font-family: 'Poppins',sans-serif;
font-size: var(--medium); height: var(--xxl);
height: var(--big);
display: flex; display: flex;
justify-content: center; justify-content: center;
position: fixed; position: fixed;
top: 0; top: 0;
align-self: center; align-self: center;
align-items: center; align-items: center;
padding: var(--smaller); padding: var(--s);
background: var(--gradient) !important; background: var(--gradient) !important;
box-shadow: var(--shadow); box-shadow: var(--shadow);
} }
@ -92,9 +91,8 @@ html {
top: 100%; top: 100%;
right: 0; right: 0;
width: 16.5vw; width: 16.5vw;
font-size: var(--default); border-radius: 0 0 var(--s) var(--s);
border-radius: 0 0 var(--smaller) var(--smaller); padding: var(--s);
padding: var(--smaller);
background: var(--background-hard); background: var(--background-hard);
box-shadow: var(--shadow); box-shadow: var(--shadow);
} }
@ -102,12 +100,11 @@ html {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-family: 'Open Sans',sans-serif; font-family: 'Open Sans',sans-serif;
font-size: var(--default);
position: fixed; position: fixed;
top: 0; top: 0;
margin-top: var(--big); margin-top: var(--xxl);
height: calc(100% - var(--big)); height: calc(100% - var(--xxl));
padding: var(--smaller); padding: var(--s);
overflow-y: auto; overflow-y: auto;
} }
.panel-content { .panel-content {
@ -116,11 +113,11 @@ html {
} }
.page-content-wrapper { .page-content-wrapper {
position: relative; position: relative;
top: var(--big); top: var(--xxl);
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
justify-content: center; justify-content: center;
padding: var(--smaller) var(--smaller) 0; padding: var(--s) var(--s) 0;
} }
.page-content { .page-content {
display: flex; display: flex;
@ -128,8 +125,8 @@ html {
width: 100%; width: 100%;
} }
.markdown-blocks { .markdown-blocks {
border-radius: 0 0 var(--smaller) var(--smaller); border-radius: 0 0 var(--s) var(--s);
padding: var(--smaller); padding: var(--s);
background-color: var(--background-card) !important; background-color: var(--background-card) !important;
} }
.markdown-blocks ul { .markdown-blocks ul {
@ -140,30 +137,14 @@ html {
margin-bottom: 0.2em; margin-bottom: 0.2em;
} }
.doc-navigation { .doc-navigation {
border-radius: var(--smaller) var(--smaller) 0 0; border-radius: var(--s) var(--s) 0 0;
border-bottom: 0; border-bottom: 0;
padding: var(--smaller); padding: var(--s);
background-color: var(--background-card) !important; background-color: var(--background-card) !important;
} }
.doc-navigation ul { .doc-navigation ul {
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
font-size: var(--medium);
}
#replyform {
padding: var(--smaller);
margin-top: var(--smaller);
border-radius: var(--smaller);
display: flex;
flex-direction: column;
font-size: var(--default);
background-color: var(--background-card) !important;
}
#replyform textarea {
width: 100%;
resize: vertical;
margin-top: var(--smaller);
padding: var(--smaller);
} }
@media only screen and (max-width:1280px) { @media only screen and (max-width:1280px) {
.page-header { .page-header {
@ -268,17 +249,17 @@ html {
@keyframes highlight { @keyframes highlight {
0% { 0% {
box-shadow: initial; box-shadow: initial;
border-radius: var(--smaller); border-radius: var(--s);
} }
50% { 50% {
border-radius: var(--smaller); border-radius: var(--s);
box-shadow: inset 0 20px 40px #FFF; box-shadow: inset 0 20px 40px #FFF;
transition: box-shadow 0.3s ease-in-out; transition: box-shadow 0.3s ease-in-out;
z-index: 666; z-index: 666;
} }
100% { 100% {
box-shadow: initial; box-shadow: initial;
border-radius: var(--smaller); border-radius: var(--s);
} }
} }
} }
@ -286,16 +267,16 @@ html {
@keyframes highlight { @keyframes highlight {
0% { 0% {
box-shadow: initial; box-shadow: initial;
border-radius: var(--smaller); border-radius: var(--s);
} }
50% { 50% {
border-radius: var(--smaller); border-radius: var(--s);
box-shadow: inset 0 20px 40px #000; box-shadow: inset 0 20px 40px #000;
transition: box-shadow 0.3s ease-in-out; transition: box-shadow 0.3s ease-in-out;
} }
100% { 100% {
box-shadow: initial; box-shadow: initial;
border-radius: var(--smaller); border-radius: var(--s);
} }
} }
} }

View File

@ -1,13 +1,26 @@
.feed-header {
display: flex;
margin-top: var(--m);
}
.feed-header .feed-actions {
margin-left: auto;
}
.feed-header .feed-actions a {
margin-left: var(--s);
}
.feed-header .feed-actions a:not(.active) {
opacity: 0.4;
}
.notes hr { .notes hr {
margin-top: var(--smaller); margin-top: var(--s);
} }
.note-wrapper { .note-wrapper {
width: 100%; width: 100%;
height: inherit; height: inherit;
border-radius: var(--smaller) var(--smaller) 0 0; border-radius: var(--s) var(--s) 0 0;
} }
.note-sidebar { .note-sidebar {
padding: var(--smaller); padding: var(--s);
} }
.note-sidebar * { .note-sidebar * {
display: flex; display: flex;
@ -19,15 +32,15 @@
.note-sidebar .avatar { .note-sidebar .avatar {
max-width: 4rem; max-width: 4rem;
max-height: 4rem; max-height: 4rem;
min-width: var(--big); min-width: var(--xxl);
width: 100%; width: 100%;
height: auto; height: auto;
background: unset; background: unset;
margin-bottom: var(--smaller); margin-bottom: var(--s);
border-radius: 2px; border-radius: 2px;
} }
.h-entry:not(:first-child) { .h-entry:not(:first-child) {
margin-top: var(--smaller); margin-top: var(--s);
} }
.h-entry:not(embed) { .h-entry:not(embed) {
border: 2px solid var(--border) !important; border: 2px solid var(--border) !important;
@ -39,17 +52,17 @@
.embed { .embed {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding: var(--smaller); padding: var(--s);
border: unset; border: unset;
} }
.embed header { .embed header {
width: 100%; width: 100%;
margin-bottom: var(--small); margin-bottom: var(--m);
} }
.embed img { .embed img {
width: 25%; width: 25%;
height: auto; height: auto;
margin-right: var(--smaller); margin-right: var(--s);
} }
.embed .p-summary { .embed .p-summary {
width: 60%; width: 60%;
@ -64,8 +77,8 @@
max-height: min-content; max-height: min-content;
} }
.embed .p-summary hr { .embed .p-summary hr {
margin-top: var(--smaller); margin-top: var(--s);
margin-bottom: var(--smaller); margin-bottom: var(--s);
} }
.h-entry .embed[class*="p-"] { .h-entry .embed[class*="p-"] {
padding: unset; padding: unset;
@ -75,41 +88,39 @@
} }
.h-entry { .h-entry {
display: flex; display: flex;
border-radius: var(--smaller); border-radius: var(--s);
background-color: var(--background-card) !important; background-color: var(--background-card) !important;
} }
.h-entry figure { .h-entry figure {
margin: unset; margin: unset;
object-fit: cover; object-fit: cover;
padding: var(--smaller); padding: var(--s);
background: var(--gradient); background: var(--gradient);
border-radius: var(--smaller); border-radius: var(--s);
} }
.h-entry .replies { .h-entry .replies {
margin-bottom: var(--small); margin-bottom: var(--m);
padding: var(--smaller) var(--smaller) 0 0; padding: var(--s) var(--s) 0 0;
padding-left: var(--small); padding-left: var(--m);
border-left: 2px solid var(--border); border-left: 2px solid var(--border);
} }
.note-info, .note-info,
embed header { embed header {
display: flex; display: flex;
align-items: center; align-items: center;
max-height: var(--big); max-height: var(--xxl);
border-bottom: unset; border-bottom: unset;
border-radius: var(--smaller) var(--smaller) 0 0; border-radius: var(--s) var(--s) 0 0;
padding: 4px var(--smaller) 4px 0; padding: 4px var(--s) 4px 0;
} }
.note-info { .note-info {
background: var(--gradient-backwards); background: var(--gradient-backwards);
} }
.note-url { .note-url {
opacity: 0.5; opacity: 0.5;
font-size: 0.9em; margin-left: var(--s);
margin-left: var(--smaller);
} }
embed header { embed header {
font-size: var(--small);
justify-content: space-between; justify-content: space-between;
} }
.note-author-url { .note-author-url {
@ -149,16 +160,15 @@ embed header {
position: absolute; position: absolute;
right: 0; right: 0;
flex-direction: column; flex-direction: column;
padding: var(--smaller); padding: var(--s);
border: 2px solid var(--border); border: 2px solid var(--border);
border-radius: var(--smaller); border-radius: var(--s);
background: var(--background-card); background: var(--background-card);
box-shadow: var(--shadow); box-shadow: var(--shadow);
font-size: var(--default);
width: max-content; width: max-content;
} }
.note-actions-extra-details[open] > summary + * > li:not(:last-of-type) { .note-actions-extra-details[open] > summary + * > li:not(:last-of-type) {
margin-bottom: var(--smaller); margin-bottom: var(--s);
} }
.note-actions-set { .note-actions-set {
opacity: 1 !important; opacity: 1 !important;
@ -168,9 +178,9 @@ embed header {
mask-repeat: no-repeat !important; mask-repeat: no-repeat !important;
mask-size: cover !important; mask-size: cover !important;
display: inline-block; display: inline-block;
margin-left: var(--smaller); margin-left: var(--s);
width: var(--default); width: var(--unit);
height: var(--default); height: var(--unit);
background-color: var(--foreground); background-color: var(--foreground);
opacity: 0.33; opacity: 0.33;
} }
@ -209,13 +219,8 @@ embed header {
.note-content { .note-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-radius: 0 0 var(--smaller) var(--smaller); border-radius: 0 0 var(--s) var(--s);
padding-top: var(--smaller); padding-right: var(--s);
padding-bottom: var(--smaller);
padding-right: var(--smaller);
}
.note-text {
margin-bottom: var(--smaller);
} }
.note-text a { .note-text a {
text-decoration: underline !important; text-decoration: underline !important;
@ -228,28 +233,28 @@ embed header {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
max-width: max-content; max-width: max-content;
border-radius: var(--smaller); border-radius: var(--s);
padding: var(--smaller); padding: var(--s);
align-self:flex-start; align-self:flex-start;
background-color: var(--background-card) !important; background-color: var(--background-card) !important;
} }
.note-attachments-unit:not(:only-child) { .note-attachments-unit:not(:only-child) {
margin-right: var(--smaller); margin-right: var(--s);
} }
.note-attachments-unit > figure figcaption { .note-attachments-unit > figure figcaption {
display: flex; display: flex;
word-break: break-all; word-break: break-all;
margin-bottom: var(--smaller); margin-bottom: var(--s);
} }
.note-complementary { .note-complementary {
border-left: 2px solid var(--accent); border-left: 2px solid var(--accent);
border-end-start-radius: var(--smaller); border-end-start-radius: var(--s);
border-end-end-radius: var(--smaller); border-end-end-radius: var(--s);
padding-left: var(--smaller); padding-left: var(--s);
padding-top: 5px; padding-top: 5px;
padding-bottom: 5px; padding-bottom: 5px;
margin-bottom: var(--smaller); margin-bottom: var(--s);
margin-right: var(--smaller); margin-right: var(--s);
background: var(--gradient) !important; background: var(--gradient) !important;
} }
.note-complementary a { .note-complementary a {
@ -260,7 +265,6 @@ embed header {
float: right; float: right;
padding: 6px 12px; padding: 6px 12px;
background: var(--gradient-backwards); background: var(--gradient-backwards);
font-size: var(--default);
color: var(--foreground); color: var(--foreground);
border-radius: 0 0 var(--smaller) 0; border-radius: 0 0 var(--s) 0;
} }

View File

@ -1,27 +1,32 @@
.section-settings { .section-settings {
background: var(--background-card);
border: 2px solid var(--border); border: 2px solid var(--border);
box-shadow: var(--shadow); box-shadow: var(--shadow);
} }
.section-settings, .section-settings,
.section-title-settings { .section-settings-details {
background: var(--background-card);
margin-bottom: .6rem; margin-bottom: .6rem;
border-radius: .6rem; border-radius: .6rem;
padding: .6rem; padding: .6rem;
box-sizing: border-box; box-sizing: border-box;
} }
.section-settings-details {
.section-title-settings[open] { border: 2px solid var(--border);
}
.section-settings-details-title {
display: block;
}
.section-settings-details[open] {
border-left: 2px solid var(--foreground); border-left: 2px solid var(--foreground);
} }
.section-title-settings[open] > summary:first-child { .section-settings-details[open] > summary:first-child {
margin-bottom: var(--smaller); margin-bottom: var(--s);
} }
.section-title-settings summary + form { .section-settings-details summary + form {
padding-left: var(--smaller); padding-left: var(--s);
} }
.section-settings hr { .section-settings hr {
@ -29,24 +34,24 @@
margin-bottom: .6rem; margin-bottom: .6rem;
} }
.section-title-settings summary h3:first-letter ,.section-title-settings summary em:first-letter { .section-settings-details summary h3:first-letter ,.section-settings-details summary em:first-letter {
text-transform: uppercase; text-transform: uppercase;
} }
.section-title-settings summary:focus .icon-details-open,.section-title-settings summary:hover .icon-details-open { .section-settings-details summary:focus .icon-details-open,.section-settings-details summary:hover .icon-details-open {
transition: all 200ms cubic-bezier(0,0.55,0.45,1); transition: all 200ms cubic-bezier(0,0.55,0.45,1);
} }
.section-title-settings[open] svg { .section-settings-details[open] svg {
transform: rotate(180deg); transform: rotate(180deg);
animation: fadeOut 200ms cubic-bezier(0,0.55,0.45,1); animation: fadeOut 200ms cubic-bezier(0,0.55,0.45,1);
} }
.section-title-settings[open] .set-nav li:last-of-type { .section-settings-details[open] .set-nav li:last-of-type {
margin-bottom: 0; margin-bottom: 0;
} }
.section-title-settings:not([open]) svg { .section-settings-details:not([open]) svg {
transform: initial; transform: initial;
animation: fadeIn 200ms cubic-bezier(0,0.55,0.45,1); animation: fadeIn 200ms cubic-bezier(0,0.55,0.45,1);
} }

View File

@ -9,7 +9,7 @@ html {
background-color: var(--background-hard); background-color: var(--background-hard);
background-attachment: fixed; background-attachment: fixed;
font-family: 'Open Sans',sans-serif; font-family: 'Open Sans',sans-serif;
font-size: var(--default); font-size: var(--unit);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@ -84,54 +84,53 @@ details > summary::-webkit-details-marker {
[hidden] { [hidden] {
display: none; display: none;
} }
h1,
h2, html {font-size: 100%;} /*16px*/
h3,
h4, body {
h5, font-family: 'Open Sans', sans-serif;
h6 {
all: unset;
display: block;
font-family: 'Poppins',sans-serif;
}
h1 {
font-size: var(--medium);
font-weight: 700;
margin-bottom: 16.2px;
}
h2 {
font-size: var(--small);
font-weight: 600;
margin-bottom: 13px;
}
h3 {
font-size: var(--default);
font-weight: 600;
margin-bottom: 10px;
}
h4,
h5 {
font-size: var(--default);
font-weight: 400; font-weight: 400;
margin-bottom: 6.1px; line-height: 1.75;
} }
p { p {
all: unset;
font-family: 'Open Sans',sans-serif; font-family: 'Open Sans',sans-serif;
font-size: var(--default); margin-bottom: 1rem;
font-weight: 400;
margin: unset;
} }
p:first-line {
padding-left: var(--default); h1, h2, h3, h4, h5, legend {
margin: 3rem 0 1.38rem;
font-family: 'Poppins', sans-serif;
font-weight: 600;
line-height: 1.3;
} }
p:first-line { h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, legend:first-child {
margin-top: initial;
}
h1 {
margin-top: 0; margin-top: 0;
margin-bottom: 10px; font-size: 1.383rem;
} }
p:not(:first-line) {
margin-top: 10px; h2 {font-size: 1.296rem;}
margin-bottom: 10px;
h3 {font-size: 1.215rem;}
h4 {font-size: 1.138rem;}
h5 {font-size: 1.067rem;}
legend {
font-size: 1.296em;
} }
small, .text_small {
font-family: 'Open Sans',sans-serif;
font-size: 0.937rem;
}
input[type=password], input[type=password],
input[type=text], input[type=text],
textarea { textarea {

View File

@ -1,9 +1,9 @@
:root { :root {
--smaller: .6rem; --s: .6rem;
--default: 1rem; --unit: 1rem;
--small: 1.3rem; --m: 1.3rem;
--medium: 1.62rem; --xl: 1.62rem;
--big: 3rem; --xxl: 3rem;
} }
@media(prefers-color-scheme:dark) { @media(prefers-color-scheme:dark) {

View File

@ -31,7 +31,7 @@ input[type=file] {
font-family: 'Open Sans',sans-serif !important; font-family: 'Open Sans',sans-serif !important;
font-weight: normal !important; font-weight: normal !important;
padding: unset !important; padding: unset !important;
border-radius: var(--smaller); border-radius: var(--s);
background: var(--gradient) !important; background: var(--gradient) !important;
} }
input[type=radio] { input[type=radio] {
@ -53,18 +53,18 @@ input[type=checkbox]:checked {
} }
input[type=color] { input[type=color] {
appearance: none; appearance: none;
width: var(--big); width: var(--xxl);
height: var(--big); height: var(--xxl);
background-color: transparent; background-color: transparent;
border: none; border: none;
cursor: pointer; cursor: pointer;
} }
input[type=color]::-webkit-color-swatch { input[type=color]::-webkit-color-swatch {
border-radius: var(--smaller); border-radius: var(--s);
border: none; border: none;
} }
input[type=color]::-moz-color-swatch { input[type=color]::-moz-color-swatch {
border-radius: var(--smaller); border-radius: var(--s);
border: none; border: none;
} }
::file-selector-button { ::file-selector-button {
@ -84,7 +84,7 @@ button {
display: block !important; display: block !important;
cursor: pointer !important; cursor: pointer !important;
margin-left: auto !important; margin-left: auto !important;
margin-top: var(--smaller); margin-top: var(--s);
} }
button, button,
label { label {
@ -105,12 +105,19 @@ textarea {
display: inline-flex; display: inline-flex;
overflow: hidden; overflow: hidden;
font-size: inherit; font-size: inherit;
line-height: initial !important;
padding: 6px 8px !important; padding: 6px 8px !important;
border-radius: var(--smaller); border-radius: var(--s);
border: 2px solid var(--border) !important; border: 2px solid var(--border) !important;
width: inherit; width: inherit;
max-width: border-box !important; max-width: border-box !important;
} }
button:not(:last-child),
input:not(:last-child),
select:not(:last-child),
textarea:not(:last-child) {
margin-bottom: var(--s);
}
button, button,
select, select,
textarea { textarea {
@ -125,7 +132,7 @@ select {
-moz-appearance: none !important; -moz-appearance: none !important;
cursor: pointer; cursor: pointer;
background-repeat: no-repeat; background-repeat: no-repeat;
border-radius: var(--smaller); border-radius: var(--s);
max-width: 100% !important; max-width: 100% !important;
} }
select[multiple] { select[multiple] {

View File

@ -3,9 +3,9 @@
flex-direction: column; flex-direction: column;
flex-wrap: wrap; flex-wrap: wrap;
font-family: 'Open Sans',sans-serif; font-family: 'Open Sans',sans-serif;
margin-bottom: var(--smaller); margin-bottom: var(--s);
border-radius: var(--smaller); border-radius: var(--s);
padding: var(--smaller); padding: var(--s);
background: var(--gradient) !important; background: var(--gradient) !important;
box-shadow: var(--shadow); box-shadow: var(--shadow);
} }
@ -18,7 +18,7 @@
flex-direction: column; flex-direction: column;
} }
.profile-info-nickname { .profile-info-nickname {
font-size: var(--small); font-size: var(--m);
} }
.profile-info-tags { .profile-info-tags {
margin: unset; margin: unset;
@ -27,15 +27,16 @@
margin-right: 5px; margin-right: 5px;
} }
.profile-info-stats { .profile-info-stats {
margin-top: var(--smaller); margin-top: var(--s);
} }
.profile-info-bio { .profile-info-bio,
.profile-info-nickname {
word-break: break-all; word-break: break-all;
} }
.profile-avatar { .profile-avatar {
max-width: 4rem; max-width: 4rem;
max-height: 4rem; max-height: 4rem;
min-width: var(--big); min-width: var(--xxl);
width: 100%; width: 100%;
height: auto; height: auto;
margin-right: 5px; margin-right: 5px;
@ -44,30 +45,28 @@
.section-widget { .section-widget {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-radius: var(--smaller); border-radius: var(--s);
margin-bottom: var(--small); margin-bottom: var(--m);
background-color: var(--background-card) !important; background-color: var(--background-card) !important;
box-shadow: var(--shadow); box-shadow: var(--shadow);
border: 2px solid var(--border) !important; border: 2px solid var(--border) !important;
} }
.section-widget hr { .section-widget hr {
margin-bottom: var(--smaller); margin-bottom: var(--s);
} }
.section-widget-padded { .section-padding {
padding: var(--smaller); padding: var(--s);
} }
.section-widget-paging { .section-widget-paging {
display: block; display: block;
margin-top: var(--smaller); margin-top: var(--s);
margin-left: auto; margin-left: auto;
} }
.section-title { .section-widget-title {
font-size: var(--small); margin-left: unset;
font-weight: 700;
margin: 0;
} }
.section-widget-button-like { .section-widget-button-like {
border-radius: var(--smaller); border-radius: var(--s);
padding: 6px 10px; padding: 6px 10px;
margin-top: 6px; margin-top: 6px;
cursor: pointer; cursor: pointer;
@ -76,24 +75,22 @@
font-family: 'Open Sans',sans-serif; font-family: 'Open Sans',sans-serif;
font-weight: 700; font-weight: 700;
} }
.section-widget-subtitle-details :not(summary,svg,h3) { .section-widget-subtitle-details :not(summary,svg,strong) {
border-radius: var(--smaller); border-radius: var(--s);
background: var(--gradient); background: var(--gradient);
padding: 6px 10px; padding: 6px 10px;
} }
.section-widget-title-details summary { .section-widget-title-details summary {
font-size: var(--small);
font-weight: 700; font-weight: 700;
} }
.section-widget-subtitle-details summary { .section-widget-subtitle-details summary {
border: 2px solid var(--border); border: 2px solid var(--border);
font-size: var(--default); margin-bottom: var(--s);
font-weight: 700;
margin-bottom: var(--smaller);
} }
.section-widget-title-details summary, .section-widget-title-details summary,
.section-widget-subtitle-details summary { .section-widget-subtitle-details summary {
border-radius: var(--smaller); align-items: center;
border-radius: var(--s);
padding: 6px 10px; padding: 6px 10px;
background: var(--gradient) !important; background: var(--gradient) !important;
} }
@ -111,10 +108,14 @@
.section-title-summary { .section-title-summary {
display: flex; display: flex;
} }
.section-subtitle-summary h3, .section-subtitle-summary strong,
.section-title-summary h2 { .section-title-summary h2 {
margin-right: auto; margin-right: auto;
} }
.section-subtitle-summary a,
.section-title-summary a {
line-height: initial;
}
.section-subtitle-summary svg:last-child, .section-subtitle-summary svg:last-child,
.section-title-summary svg:last-child { .section-title-summary svg:last-child {
margin-left: 4px; margin-left: 4px;
@ -124,19 +125,18 @@
flex-direction: column; flex-direction: column;
max-width: 100%; max-width: 100%;
width: 100%; width: 100%;
padding: var(--smaller); padding: var(--s);
} }
.section-form-legend { .section-form-legend {
margin-top: unset; margin-top: unset;
margin-bottom: 10px; margin-bottom: var(--s);
font-weight: bold; font-weight: bold;
font-size: var(--medium);
} }
div[class^="mb-"] { div[class^="mb-"] {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-basis: border-box; flex-basis: border-box;
margin-bottom: var(--smaller); margin-bottom: var(--s);
} }
div[class^="mb-"]:last-of-type { div[class^="mb-"]:last-of-type {
margin-bottom: unset; margin-bottom: unset;
@ -149,10 +149,9 @@ div[class^="mb-"] textarea {
.alert-danger { .alert-danger {
display: inline-block; display: inline-block;
font-style: italic; font-style: italic;
font-size: 1rem;
border: solid 2px #ff6347; border: solid 2px #ff6347;
background-color: #FF634733; background-color: #FF634733;
border-radius: var(--smaller); border-radius: var(--s);
padding: 2px 6px; padding: 2px 6px;
margin-top: 6px; margin-top: 6px;
margin-bottom: 6px; margin-bottom: 6px;

View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg
class="{{ iconClass|default('') }}"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
<title>Open right sidepanel</title>
<path fill-rule="evenodd" d="M9.78 12.78a.75.75 0 01-1.06 0L4.47 8.53a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 1.06L6.06 8l3.72 3.72a.75.75 0 010 1.06z"></path>
</svg>

After

Width:  |  Height:  |  Size: 390 B

View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- https://github.com/primer/octicons -->
<!-- MIT License -->
<svg
xmlns="http://www.w3.org/2000/svg"
class="{{ iconClass|default('') }}"
viewBox="0 0 16 16"
width="16"
height="16">
<title>Default feed</title>
<path fill-rule="evenodd" d="M1.75 1A1.75 1.75 0 000 2.75v9.5C0 13.216.784 14 1.75 14H3v1.543a1.457 1.457 0 002.487 1.03L8.061 14h6.189A1.75 1.75 0 0016 12.25v-9.5A1.75 1.75 0 0014.25 1H1.75zM1.5 2.75a.25.25 0 01.25-.25h12.5a.25.25 0 01.25.25v9.5a.25.25 0 01-.25.25h-6.5a.75.75 0 00-.53.22L4.5 15.44v-2.19a.75.75 0 00-.75-.75h-2a.25.25 0 01-.25-.25v-9.5z"></path>
<path d="M22.5 8.75a.25.25 0 00-.25-.25h-3.5a.75.75 0 010-1.5h3.5c.966 0 1.75.784 1.75 1.75v9.5A1.75 1.75 0 0122.25 20H21v1.543a1.457 1.457 0 01-2.487 1.03L15.939 20H10.75A1.75 1.75 0 019 18.25v-1.465a.75.75 0 011.5 0v1.465c0 .138.112.25.25.25h5.5a.75.75 0 01.53.22l2.72 2.72v-2.19a.75.75 0 01.75-.75h2a.25.25 0 00.25-.25v-9.5z"></path>
</svg>

After

Width:  |  Height:  |  Size: 1021 B

View File

@ -0,0 +1,8 @@
<svg
xmlns="http://www.w3.org/2000/svg"
class="{{ iconClass|default('') }}"
viewBox="0 0 16 16"
width="16" height="16">
<path fill-rule="evenodd" d="M1.75 2.5a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h.94a.76.76 0 01.03-.03l6.077-6.078a1.75 1.75 0 012.412-.06L14.5 10.31V2.75a.25.25 0 00-.25-.25H1.75zm12.5 11H4.81l5.048-5.047a.25.25 0 01.344-.009l4.298 3.889v.917a.25.25 0 01-.25.25zm1.75-.25V2.75A1.75 1.75 0 0014.25 1H1.75A1.75 1.75 0 000 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0016 13.25zM5.5 6a.5.5 0 11-1 0 .5.5 0 011 0zM7 6a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg>

After

Width:  |  Height:  |  Size: 624 B

View File

@ -1,58 +1,13 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- https://github.com/primer/octicons --> <!-- https://github.com/primer/octicons -->
<!-- MIT License --> <!-- MIT License -->
<svg <svg
xmlns="http://www.w3.org/2000/svg"
class="{{ iconClass|default('') }}" class="{{ iconClass|default('') }}"
viewBox="0 0 16 16" viewBox="0 0 16 16"
width="16" width="16"
height="16" height="16">
version="1.1" <title>Open left sidepanel</title>
id="svg6" <path d="m0.99999 3a0.75 0.75 0 0 1 0.75-0.75h12.5a0.75 0.75 0 1 1 0 1.5h-12.5a0.75 0.75 0 0 1-0.75-0.75zm0 5a0.75 0.75 0 0 1 0.75-0.75h12.5a0.75 0.75 0 1 1 0 1.5h-12.5a0.75 0.75 0 0 1-0.75-0.75zm0.75 4.25a0.75 0.75 0 1 0 0 1.5h12.5a0.75 0.75 0 1 0 0-1.5z" fill-rule="evenodd"/>
sodipodi:docname="menu.svg"
inkscape:version="1.1 (c4e8f9ed74, 2021-05-24)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<defs
id="defs10" />
<sodipodi:namedview
id="namedview8"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
showgrid="false"
inkscape:zoom="12.150261"
inkscape:cx="15.637524"
inkscape:cy="21.563323"
inkscape:window-width="1920"
inkscape:window-height="1016"
inkscape:window-x="0"
inkscape:window-y="36"
inkscape:window-maximized="1"
inkscape:current-layer="svg6" />
<title
id="title2">Open left sidepanel.</title>
<path
fill-rule="evenodd"
d="M 0.9999891,2.9999916 A 0.75000111,0.75000111 0 0 1 1.7499903,2.2499909 H 14.25001 a 0.75000111,0.75000111 0 1 1 0,1.5000021 H 1.7499903 A 0.75000111,0.75000111 0 0 1 0.9999891,2.9999916 Z m 0,5.0000076 A 0.75000111,0.75000111 0 0 1 1.7499903,7.2499981 H 14.25001 a 0.7500013,0.7500013 0 1 1 0,1.5000024 H 1.7499903 A 0.75000111,0.75000111 0 0 1 0.9999891,7.9999992 Z m 0.7500012,4.2500058 a 0.75000231,0.75000231 0 1 0 0,1.500004 H 14.25001 a 0.75000231,0.75000231 0 1 0 0,-1.500004 z"
id="path4"
style="stroke-width:1" />
<metadata
id="metadata12">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:title>Open left sidepanel.</dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 606 B

View File

@ -1,68 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- https://github.com/primer/octicons -->
<!-- MIT License -->
<svg
class="{{ iconClass|default('') }}"
viewBox="0 0 16 16"
width="16"
height="16"
version="1.1"
id="svg8"
sodipodi:docname="notes.svg"
inkscape:version="1.1 (c4e8f9ed74, 2021-05-24)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<defs
id="defs12" />
<sodipodi:namedview
id="namedview10"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
showgrid="false"
inkscape:zoom="6.6503072"
inkscape:cx="2.2555349"
inkscape:cy="27.818264"
inkscape:window-width="1920"
inkscape:window-height="1016"
inkscape:window-x="0"
inkscape:window-y="36"
inkscape:window-maximized="1"
inkscape:current-layer="svg8" />
<title
id="title2">
Create a note
</title>
<g
id="g20"
transform="matrix(0.66666667,0,0,0.66666667,-4e-8,1.6962954e-4)">
<path
fill-rule="evenodd"
d="M 1.75,1 A 1.75,1.75 0 0 0 0,2.75 v 9.5 C 0,13.216 0.784,14 1.75,14 H 3 v 1.543 a 1.457,1.457 0 0 0 2.487,1.03 L 8.061,14 H 14.25 A 1.75,1.75 0 0 0 16,12.25 V 2.75 A 1.75,1.75 0 0 0 14.25,1 Z M 1.5,2.75 A 0.25,0.25 0 0 1 1.75,2.5 h 12.5 a 0.25,0.25 0 0 1 0.25,0.25 v 9.5 A 0.25,0.25 0 0 1 14.25,12.5 H 7.75 A 0.75,0.75 0 0 0 7.22,12.72 L 4.5,15.44 V 13.25 A 0.75,0.75 0 0 0 3.75,12.5 h -2 A 0.25,0.25 0 0 1 1.5,12.25 Z"
id="path4" />
<path
d="M 22.5,8.75 A 0.25,0.25 0 0 0 22.25,8.5 h -3.5 a 0.75,0.75 0 0 1 0,-1.5 h 3.5 C 23.216,7 24,7.784 24,8.75 v 9.5 A 1.75,1.75 0 0 1 22.25,20 H 21 v 1.543 a 1.457,1.457 0 0 1 -2.487,1.03 L 15.939,20 H 10.75 A 1.75,1.75 0 0 1 9,18.25 v -1.465 a 0.75,0.75 0 0 1 1.5,0 v 1.465 c 0,0.138 0.112,0.25 0.25,0.25 h 5.5 a 0.75,0.75 0 0 1 0.53,0.22 l 2.72,2.72 v -2.19 a 0.75,0.75 0 0 1 0.75,-0.75 h 2 a 0.25,0.25 0 0 0 0.25,-0.25 z"
id="path6" />
</g>
<metadata
id="metadata16">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:title>
Create a note
</dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
</svg>

Before

Width:  |  Height:  |  Size: 2.5 KiB

View File

@ -23,7 +23,7 @@
/* FEED NAVIGATION / PLUGINS */ /* FEED NAVIGATION / PLUGINS */
.feed-nav { .feed-nav {
margin-bottom: var(--medium); margin-bottom: var(--xl);
} }
.feed-nav a { .feed-nav a {
@ -50,7 +50,7 @@
.footer { .footer {
margin-top: auto; margin-top: auto;
font-size: var(--default); font-size: var(--unit);
} }
/* > 720p */ /* > 720p */

View File

@ -11,7 +11,7 @@
} }
.panel-right-icon { .panel-right-icon {
margin-left: var(--small) !important; margin-left: var(--m) !important;
cursor: pointer !important; cursor: pointer !important;
border: 2px solid transparent; border: 2px solid transparent;
} }

View File

@ -1,6 +1,6 @@
.media-feed-tabs { .media-feed-tabs {
border: 2px solid var(--border); border: 2px solid var(--border);
border-radius: var(--smaller) var(--smaller) 0 0; border-radius: var(--s) var(--s) 0 0;
border-bottom: none; border-bottom: none;
display: flex; display: flex;
} }

View File

@ -2,7 +2,7 @@
{% block body %} {% block body %}
<div class="page"> <div class="page">
<section class="section-widget section-widget-padded"> <section class="section-widget section-padding">
{% include '/cards/attachments/view.html.twig' with {'attachment': attachment, 'note': null} only %} {% include '/cards/attachments/view.html.twig' with {'attachment': attachment, 'note': null} only %}

View File

@ -11,7 +11,7 @@
{{ icon('arrow-down', 'icon icon-details-open') | raw }} {{ icon('arrow-down', 'icon icon-details-open') | raw }}
</summary> </summary>
<nav class='section-widget-padded' tabindex="0" title="{{ 'Navigate through each feed.' | trans }}"> <nav class='section-padding' tabindex="0" title="{{ 'Navigate through each feed.' | trans }}">
{% if not app.user %} {# Default feeds #} {% if not app.user %} {# Default feeds #}
<ul> <ul>
<li> <li>
@ -55,7 +55,7 @@
{% endblock profile_current_actor %} {% endblock profile_current_actor %}
{% block profile_security %} {% block profile_security %}
<section class='section-widget section-widget-padded' title="{{ 'Your profile information.' | trans }}"> <section class='section-widget section-padding' title="{{ 'Your profile information.' | trans }}">
<h2 class="section-title">Account</h2> <h2 class="section-title">Account</h2>
<nav tabindex="0" class="profile-navigation" title="{{ 'Navigate through account related pages.' | trans }}"> <nav tabindex="0" class="profile-navigation" title="{{ 'Navigate through account related pages.' | trans }}">

View File

@ -14,9 +14,9 @@
<section class="profile-info-bio"> <section class="profile-info-bio">
{% if actor_bio %} {% if actor_bio %}
<p>{{ actor_bio }}</p> <span>{{ actor_bio }}</span>
{% else %} {% else %}
<p>{{ '(No bio)' | trans }}</p> <span>{{ '(No bio)' | trans }}</span>
{% endif %} {% endif %}
</section> </section>
</div> </div>

View File

@ -11,20 +11,18 @@
{% endblock stylesheets %} {% endblock stylesheets %}
{% block body %} {% block body %}
<nav class='section-settings'> <nav class='section-widget section-padding'>
<h2>Settings</h2> <h2 class="section-widget-title">Settings</h2>
<ul> <ul>
<li> <li>
{% set profile_tabs = [{'title': 'Personal Info', 'desc': 'Nickname, Homepage, Bio and more.', 'id': 'settings-personal-info', 'form': personal_info_form}] %} {% set profile_tabs = [{'title': 'Personal Info', 'desc': 'Nickname, Homepage, Bio and more.', 'id': 'settings-personal-info', 'form': personal_info_form}] %}
{% set profile_tabs = profile_tabs|merge(handle_event('PopulateSettingsTabs', app.request, 'profile')) %} {% set profile_tabs = profile_tabs|merge(handle_event('PopulateSettingsTabs', app.request, 'profile')) %}
{{ macros.settings_details_container('Profile', 'Personal Information, Avatar and Profile', 'settings-profile-details', profile_tabs, _context) }} {{ macros.settings_details_container('Profile', 'Personal Information, Avatar and Profile', 'settings-profile-details', profile_tabs, _context) }}
</li> </li>
<hr>
<li> <li>
{% set muting_tabs = handle_event('PopulateSettingsTabs', app.request, 'muting') %} {% set muting_tabs = handle_event('PopulateSettingsTabs', app.request, 'muting') %}
{{ macros.settings_details_container('Muting', 'Blocked tags and actors', 'settings-muting-details', muting_tabs, _context) }} {{ macros.settings_details_container('Muting', 'Blocked tags and actors', 'settings-muting-details', muting_tabs, _context) }}
</li> </li>
<hr>
<li> <li>
{{ macros.settings_details_element('Email', 'Set incoming and outgoing email settings', 'settings-email-details', email_form, _context) }} {{ macros.settings_details_element('Email', 'Set incoming and outgoing email settings', 'settings-email-details', email_form, _context) }}
</li> </li>
@ -34,12 +32,10 @@
<li> <li>
{{ macros.settings_details_element('Language', 'Select and set language preferences', 'settings-language-details', language_form, _context) }} {{ macros.settings_details_element('Language', 'Select and set language preferences', 'settings-language-details', language_form, _context) }}
</li> </li>
<hr>
<li> <li>
{% set colour_tabs = handle_event('PopulateSettingsTabs', app.request, 'colours') %} {% set colour_tabs = handle_event('PopulateSettingsTabs', app.request, 'colours') %}
{{ macros.settings_details_container('Colours', 'Customize your interface colours', 'settings-colour-details', colour_tabs, _context) }} {{ macros.settings_details_container('Colours', 'Customize your interface colours', 'settings-colour-details', colour_tabs, _context) }}
</li> </li>
<hr>
<li> <li>
{{ macros.settings_details_container('Notifications', 'Enable/disable notifications (Email, XMPP, Replies...)', 'notifications', tabbed_forms_notify, _context) }} {{ macros.settings_details_container('Notifications', 'Enable/disable notifications (Email, XMPP, Replies...)', 'notifications', tabbed_forms_notify, _context) }}
</li> </li>

View File

@ -2,12 +2,12 @@
{% if details_ids is null %} {% if details_ids is null %}
{% set details_ids = [id] %} {% set details_ids = [id] %}
{% endif %} {% endif %}
<details class="section-title-settings" {{ open_details(context.open_details_query, details_ids) }} id={{ id }}> <details class="section-settings-details" {{ open_details(context.open_details_query, details_ids) }} id={{ id }}>
<summary> <summary>
<h3> <strong class="section-settings-details-title">
{{ title | trans }} {{ title | trans }}
{{ icon('arrow-down', 'icon icon-details-open') | raw }} {{ icon('arrow-down', 'icon icon-details-open') | raw }}
</h3> </strong>
<em> <em>
{{ summary | trans }} {{ summary | trans }}
</em> </em>