[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 %}
{% block body %}
{% for block in handle_event('BeforeFeed', app.request) %}
{{ block | raw }}
{% endfor %}
<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 }}
{% endfor %}
</nav>
</header>
{# Backwards compatibility with hAtom 0.1 #}
<main class="feed" tabindex="0" role="feed">
<div class="h-feed hfeed notes">

View File

@ -36,7 +36,7 @@
</main>
{% 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>
{% if create_form is defined and create_form is not null %}
<p>{% trans %}Would you like to create it?{% endtrans %}</p>

View File

@ -6,7 +6,7 @@
{% endblock stylesheets %}
{% block body %}
<div class="section-widget section-widget-padded">
<div class="section-widget">
<form class="section-form" action="{{ path('edit_feeds') }}" method="post">
<fieldset>
@ -16,7 +16,7 @@
{{ form_start(edit_feeds) }}
{% for child in edit_feeds.children %}
{% 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_widget(child) }}
{% 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>
<aside class="panel-content accessibility-target">
{% 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_current_actor", "cards/navigation/view.html.twig") }}
</section>

View File

@ -1,6 +1,6 @@
{% block rightpanel %}
<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">
<div class="header-panel section-panel-right">
@ -29,9 +29,9 @@
<details class="section-widget-subtitle-details">
<summary class="section-subtitle-summary">
<h3>
<strong>
{{ "Additional options" | trans }}
</h3>
</strong>
{{ icon('arrow-down', 'icon icon-details-close') | raw }}
</summary>
{{ form_row(blocks['post_form'].language) }}

View File

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

View File

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

View File

@ -1,6 +1,6 @@
{% 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">
{{ 'Notes related' | trans }}
</div>

View File

@ -54,7 +54,7 @@ class MediaFeed extends Plugin
*
* @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';
// 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 }}">{% trans %}All{% endtrans %}</a>
<div tabindex="0" class=separator>&nbsp;</div>
<a {{ media.active ? 'class="active"' : '' }} href="{{ media.url }}">{% trans %}Media{% endtrans %}</a>
</nav>
<a {{ main.active ? 'class="active"' : '' }} href="{{ main.url }}">{{ icon('feed', 'icon icon-right') | raw }}</a>
<a {{ media.active ? 'class="active"' : '' }} href="{{ media.url }}">{{ icon('media', 'icon icon-right') | raw }}</a>

View File

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

View File

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

View File

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

View File

@ -8,7 +8,7 @@
{% block body %}
{% 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 %}
{{ noteView.macro_note(note, {}) }}
{% elseif actor is defined and actor is not null %}

View File

@ -40,34 +40,33 @@
left: -90%;
width: 30%;
height: min-content;
padding: var(--smaller);
border-radius: var(--smaller);
padding: var(--s);
border-radius: var(--s);
background-color: var(--background-hard) !important;
border: 2px solid var(--border);
}
.accessibility-menu ul {
list-style-type: disc;
margin-left: var(--small);
margin-left: var(--m);
}
.accessibility-menu:focus-within:not(:active) {
top: var(--smaller);
left: var(--smaller);
top: var(--s);
left: var(--s);
}
html {
scroll-margin-top: var(--big);
scroll-margin-top: var(--xxl);
}
.page-header {
z-index: 1;
font-family: 'Poppins',sans-serif;
font-size: var(--medium);
height: var(--big);
height: var(--xxl);
display: flex;
justify-content: center;
position: fixed;
top: 0;
align-self: center;
align-items: center;
padding: var(--smaller);
padding: var(--s);
background: var(--gradient) !important;
box-shadow: var(--shadow);
}
@ -92,9 +91,8 @@ html {
top: 100%;
right: 0;
width: 16.5vw;
font-size: var(--default);
border-radius: 0 0 var(--smaller) var(--smaller);
padding: var(--smaller);
border-radius: 0 0 var(--s) var(--s);
padding: var(--s);
background: var(--background-hard);
box-shadow: var(--shadow);
}
@ -102,12 +100,11 @@ html {
display: flex;
flex-direction: column;
font-family: 'Open Sans',sans-serif;
font-size: var(--default);
position: fixed;
top: 0;
margin-top: var(--big);
height: calc(100% - var(--big));
padding: var(--smaller);
margin-top: var(--xxl);
height: calc(100% - var(--xxl));
padding: var(--s);
overflow-y: auto;
}
.panel-content {
@ -116,11 +113,11 @@ html {
}
.page-content-wrapper {
position: relative;
top: var(--big);
top: var(--xxl);
margin-left: auto;
margin-right: auto;
justify-content: center;
padding: var(--smaller) var(--smaller) 0;
padding: var(--s) var(--s) 0;
}
.page-content {
display: flex;
@ -128,8 +125,8 @@ html {
width: 100%;
}
.markdown-blocks {
border-radius: 0 0 var(--smaller) var(--smaller);
padding: var(--smaller);
border-radius: 0 0 var(--s) var(--s);
padding: var(--s);
background-color: var(--background-card) !important;
}
.markdown-blocks ul {
@ -140,30 +137,14 @@ html {
margin-bottom: 0.2em;
}
.doc-navigation {
border-radius: var(--smaller) var(--smaller) 0 0;
border-radius: var(--s) var(--s) 0 0;
border-bottom: 0;
padding: var(--smaller);
padding: var(--s);
background-color: var(--background-card) !important;
}
.doc-navigation ul {
display: flex;
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) {
.page-header {
@ -268,17 +249,17 @@ html {
@keyframes highlight {
0% {
box-shadow: initial;
border-radius: var(--smaller);
border-radius: var(--s);
}
50% {
border-radius: var(--smaller);
border-radius: var(--s);
box-shadow: inset 0 20px 40px #FFF;
transition: box-shadow 0.3s ease-in-out;
z-index: 666;
}
100% {
box-shadow: initial;
border-radius: var(--smaller);
border-radius: var(--s);
}
}
}
@ -286,16 +267,16 @@ html {
@keyframes highlight {
0% {
box-shadow: initial;
border-radius: var(--smaller);
border-radius: var(--s);
}
50% {
border-radius: var(--smaller);
border-radius: var(--s);
box-shadow: inset 0 20px 40px #000;
transition: box-shadow 0.3s ease-in-out;
}
100% {
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 {
margin-top: var(--smaller);
margin-top: var(--s);
}
.note-wrapper {
width: 100%;
height: inherit;
border-radius: var(--smaller) var(--smaller) 0 0;
border-radius: var(--s) var(--s) 0 0;
}
.note-sidebar {
padding: var(--smaller);
padding: var(--s);
}
.note-sidebar * {
display: flex;
@ -19,15 +32,15 @@
.note-sidebar .avatar {
max-width: 4rem;
max-height: 4rem;
min-width: var(--big);
min-width: var(--xxl);
width: 100%;
height: auto;
background: unset;
margin-bottom: var(--smaller);
margin-bottom: var(--s);
border-radius: 2px;
}
.h-entry:not(:first-child) {
margin-top: var(--smaller);
margin-top: var(--s);
}
.h-entry:not(embed) {
border: 2px solid var(--border) !important;
@ -39,17 +52,17 @@
.embed {
display: flex;
flex-wrap: wrap;
padding: var(--smaller);
padding: var(--s);
border: unset;
}
.embed header {
width: 100%;
margin-bottom: var(--small);
margin-bottom: var(--m);
}
.embed img {
width: 25%;
height: auto;
margin-right: var(--smaller);
margin-right: var(--s);
}
.embed .p-summary {
width: 60%;
@ -64,8 +77,8 @@
max-height: min-content;
}
.embed .p-summary hr {
margin-top: var(--smaller);
margin-bottom: var(--smaller);
margin-top: var(--s);
margin-bottom: var(--s);
}
.h-entry .embed[class*="p-"] {
padding: unset;
@ -75,41 +88,39 @@
}
.h-entry {
display: flex;
border-radius: var(--smaller);
border-radius: var(--s);
background-color: var(--background-card) !important;
}
.h-entry figure {
margin: unset;
object-fit: cover;
padding: var(--smaller);
padding: var(--s);
background: var(--gradient);
border-radius: var(--smaller);
border-radius: var(--s);
}
.h-entry .replies {
margin-bottom: var(--small);
padding: var(--smaller) var(--smaller) 0 0;
padding-left: var(--small);
margin-bottom: var(--m);
padding: var(--s) var(--s) 0 0;
padding-left: var(--m);
border-left: 2px solid var(--border);
}
.note-info,
embed header {
display: flex;
align-items: center;
max-height: var(--big);
max-height: var(--xxl);
border-bottom: unset;
border-radius: var(--smaller) var(--smaller) 0 0;
padding: 4px var(--smaller) 4px 0;
border-radius: var(--s) var(--s) 0 0;
padding: 4px var(--s) 4px 0;
}
.note-info {
background: var(--gradient-backwards);
}
.note-url {
opacity: 0.5;
font-size: 0.9em;
margin-left: var(--smaller);
margin-left: var(--s);
}
embed header {
font-size: var(--small);
justify-content: space-between;
}
.note-author-url {
@ -149,16 +160,15 @@ embed header {
position: absolute;
right: 0;
flex-direction: column;
padding: var(--smaller);
padding: var(--s);
border: 2px solid var(--border);
border-radius: var(--smaller);
border-radius: var(--s);
background: var(--background-card);
box-shadow: var(--shadow);
font-size: var(--default);
width: max-content;
}
.note-actions-extra-details[open] > summary + * > li:not(:last-of-type) {
margin-bottom: var(--smaller);
margin-bottom: var(--s);
}
.note-actions-set {
opacity: 1 !important;
@ -168,9 +178,9 @@ embed header {
mask-repeat: no-repeat !important;
mask-size: cover !important;
display: inline-block;
margin-left: var(--smaller);
width: var(--default);
height: var(--default);
margin-left: var(--s);
width: var(--unit);
height: var(--unit);
background-color: var(--foreground);
opacity: 0.33;
}
@ -209,13 +219,8 @@ embed header {
.note-content {
display: flex;
flex-direction: column;
border-radius: 0 0 var(--smaller) var(--smaller);
padding-top: var(--smaller);
padding-bottom: var(--smaller);
padding-right: var(--smaller);
}
.note-text {
margin-bottom: var(--smaller);
border-radius: 0 0 var(--s) var(--s);
padding-right: var(--s);
}
.note-text a {
text-decoration: underline !important;
@ -228,28 +233,28 @@ embed header {
display: flex;
flex-wrap: wrap;
max-width: max-content;
border-radius: var(--smaller);
padding: var(--smaller);
border-radius: var(--s);
padding: var(--s);
align-self:flex-start;
background-color: var(--background-card) !important;
}
.note-attachments-unit:not(:only-child) {
margin-right: var(--smaller);
margin-right: var(--s);
}
.note-attachments-unit > figure figcaption {
display: flex;
word-break: break-all;
margin-bottom: var(--smaller);
margin-bottom: var(--s);
}
.note-complementary {
border-left: 2px solid var(--accent);
border-end-start-radius: var(--smaller);
border-end-end-radius: var(--smaller);
padding-left: var(--smaller);
border-end-start-radius: var(--s);
border-end-end-radius: var(--s);
padding-left: var(--s);
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: var(--smaller);
margin-right: var(--smaller);
margin-bottom: var(--s);
margin-right: var(--s);
background: var(--gradient) !important;
}
.note-complementary a {
@ -260,7 +265,6 @@ embed header {
float: right;
padding: 6px 12px;
background: var(--gradient-backwards);
font-size: var(--default);
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 {
background: var(--background-card);
border: 2px solid var(--border);
box-shadow: var(--shadow);
}
.section-settings,
.section-title-settings {
background: var(--background-card);
.section-settings-details {
margin-bottom: .6rem;
border-radius: .6rem;
padding: .6rem;
box-sizing: border-box;
}
.section-title-settings[open] {
.section-settings-details {
border: 2px solid var(--border);
}
.section-settings-details-title {
display: block;
}
.section-settings-details[open] {
border-left: 2px solid var(--foreground);
}
.section-title-settings[open] > summary:first-child {
margin-bottom: var(--smaller);
.section-settings-details[open] > summary:first-child {
margin-bottom: var(--s);
}
.section-title-settings summary + form {
padding-left: var(--smaller);
.section-settings-details summary + form {
padding-left: var(--s);
}
.section-settings hr {
@ -29,24 +34,24 @@
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;
}
.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);
}
.section-title-settings[open] svg {
.section-settings-details[open] svg {
transform: rotate(180deg);
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;
}
.section-title-settings:not([open]) svg {
.section-settings-details:not([open]) svg {
transform: initial;
animation: fadeIn 200ms cubic-bezier(0,0.55,0.45,1);
}

View File

@ -9,7 +9,7 @@ html {
background-color: var(--background-hard);
background-attachment: fixed;
font-family: 'Open Sans',sans-serif;
font-size: var(--default);
font-size: var(--unit);
display: flex;
flex-direction: column;
}
@ -84,54 +84,53 @@ details > summary::-webkit-details-marker {
[hidden] {
display: none;
}
h1,
h2,
h3,
h4,
h5,
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);
html {font-size: 100%;} /*16px*/
body {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
margin-bottom: 6.1px;
line-height: 1.75;
}
p {
all: unset;
font-family: 'Open Sans',sans-serif;
font-size: var(--default);
font-weight: 400;
margin: unset;
margin-bottom: 1rem;
}
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-bottom: 10px;
font-size: 1.383rem;
}
p:not(:first-line) {
margin-top: 10px;
margin-bottom: 10px;
h2 {font-size: 1.296rem;}
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=text],
textarea {

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -2,7 +2,7 @@
{% block body %}
<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 %}

View File

@ -11,7 +11,7 @@
{{ icon('arrow-down', 'icon icon-details-open') | raw }}
</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 #}
<ul>
<li>
@ -55,7 +55,7 @@
{% endblock profile_current_actor %}
{% 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>
<nav tabindex="0" class="profile-navigation" title="{{ 'Navigate through account related pages.' | trans }}">