[CSS] .section-widget class and derivatives replaced as .frame-section, since a widget implies a simple element with a specific function

components/Collection/templates/collection/actors.html.twig

@@ -3,7 +3,7 @@
 {% block title %}{{ title }}{% endblock %}
 
 {% block body %}
-<section class="section-widget section-padding">
+<section class="frame-section frame-section-padding">
     <h1 class="section-title">{{ title }}</h1>
 
     <div>
@@ -18,7 +18,7 @@
         </form>
     </div>
 
-    <div class="section-padding">
+    <div class="frame-section-padding">
         {% if actors is defined and actors is not empty %}
             {% for actor in actors %}
                 {% block profile_view %}{% include 'cards/profile/view.html.twig' %}{% endblock profile_view %}

components/Collection/templates/collection/collection_entry_view.html.twig

@@ -3,8 +3,8 @@
 {% block title %}{{ page_title | trans }}{% endblock %}
 
 {% block body %}
-    <div class="section-widget section-padding">
-        <h2 class="section-widget-title">{{ page_title | trans }}</h2>
+    <div class="frame-section frame-section-padding">
+        <h2 class="frame-section-title">{{ page_title | trans }}</h2>
         {% block collection_items %}
         {% endblock collection_items %}
     </div>

components/Collection/templates/collection/meta_collections.html.twig

@@ -3,14 +3,14 @@
 {% block title %}{{ page_title | trans }}{% endblock %}
 
 {% block body %}
-    <div class="section-widget section-padding">
-        <h2 class="section-widget-title">{{ page_title | trans }}</h2>
+    <div class="frame-section frame-section-padding">
+        <h2 class="frame-section-title">{{ page_title | trans }}</h2>
         {% if add_collection %}
-            <div class="section-widget section-form">
+            <div class="frame-section section-form">
                 {{ form(add_collection) }}
             </div>
         {% endif %}
-        <div class="section-widget collections-list">
+        <div class="frame-section collections-list">
             <h3>{{ list_title | trans }}</h3>
             {% for col in collections %}
                 <div class="collection-item">

components/Collection/templates/collection/notes.html.twig

@@ -14,12 +14,11 @@
     {% endfor %}
 
     {% if notes is defined %}
-    <article>
         <header class="feed-header">
             {% if page_title is defined %}
                 <h1 class="heading-no-margin">{{ page_title | trans }}</h1>
             {% else %}
-                <h1 class="heading-no-margin">{{ 'Notes' | trans }}</h1>
+                <h3 class="heading-no-margin">{{ 'Notes' | trans }}</h3>
             {% endif %}
             <nav class="feed-actions">
                 <details class="feed-actions-details">
@@ -38,20 +37,19 @@
         </header>
 
         {% if notes is not empty %}
-        {# Backwards compatibility with hAtom 0.1 #}
-        <section class="feed h-feed hfeed notes" tabindex="0" role="feed">
-            {% for conversation in notes %}
-                {% block current_note %}
-                    {% if conversation is instanceof('array') %}
-                        {{ noteView.macro_note(conversation['note'], conversation['replies']) }}
-                    {% else %}
-                        {{ noteView.macro_note(conversation) }}
-                    {% endif %}
-                    <hr tabindex="0" title="{{ 'End of note and replies.' | trans }}">
-                {% endblock current_note %}
-            {% endfor %}
-        </section>
+            {# Backwards compatibility with hAtom 0.1 #}
+            <section class="feed h-feed hfeed notes" tabindex="0" role="feed">
+                {% for conversation in notes %}
+                    {% block current_note %}
+                        {% if conversation is instanceof('array') %}
+                            {{ noteView.macro_note(conversation['note'], conversation['replies']) }}
+                        {% else %}
+                            {{ noteView.macro_note(conversation) }}
+                        {% endif %}
+                        <hr tabindex="0" title="{{ 'End of note and replies.' | trans }}">
+                    {% endblock current_note %}
+                {% endfor %}
+            </section>
         {% endif %}
-    </article>
     {% endif %}
 {% endblock body %}

components/Collection/templates/collection/widget_add_to.html.twig

@@ -1,6 +1,6 @@
-<section class="section-widget collections">
-    <details class="section-widget-title-details" title="Expand if you want to access more options.">
-        <summary class="section-title-summary">
+<section class="frame-section collections">
+    <details class="section-details-title" title="Expand if you want to access more options.">
+        <summary class="details-title-summary">
             <h2>{{ctitle}}</h2>
         </summary>
         {% if has_collections %}
@@ -8,9 +8,9 @@
                 {{ form(add_form) }}
             </section>
 
-            <details class="section-widget-subtitle-details section-padding"
+            <details class="section-details-subtitle frame-section-padding"
                      title="Expand if you want to access more options.">
-                <summary class="section-subtitle-summary">
+                <summary class="details-subtitle-summary">
                     <strong>{% trans %}Other options{% endtrans %}</strong>
                 </summary>
                 <section class="section-form">

components/Conversation/templates/conversation/mute.html.twig

@@ -1,14 +1,14 @@
 {% extends 'collection/notes.html.twig' %}
 
 {% block body %}
-    <div class="section-widget section-padding">
+    <div class="frame-section frame-section-padding">
         {% if is_muted %}
-            <span class="section-padding alert">
+            <span class="frame-section-padding alert">
             <label>Do you wish to <b>unmute</b> this conversation?</label>
             {{ form(form) }}
         </span>
         {% else %}
-            <span class="section-padding alert">
+            <span class="frame-section-padding alert">
             <label>Do you wish to <b>mute</b> this conversation?</label>
             {{ form(form) }}
         </span>

components/Language/templates/language/sort.html.twig

@@ -1,7 +1,7 @@
 {% extends 'base.html.twig' %}
 
 {% block body %}
-  <div class="section-widget section-padding">
+  <div class="frame-section frame-section-padding">
     <h3>{{ 'Put the languages in the order you\'d like to see them in your language selection dropdown, when posting' | trans}}</h3>
     {{ form(form) }}
   </div>

components/LeftPanel/templates/left_panel/edit_feeds.html.twig

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

components/LeftPanel/templates/left_panel/view.html.twig

@@ -4,9 +4,9 @@
 <input type="checkbox" id="toggle-panel-left" tabindex="0" title="{{ 'Open left panel' | trans }}">
 
 <aside class="section-panel section-panel-left">
-    <article class="panel-content accessibility-target">
+    <section class="panel-content accessibility-target">
         {% if app.user %}
-            <section class='section-widget section-padding' title="{{ 'Your profile information.' | trans }}">
+            <section class='frame-section frame-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>
@@ -19,6 +19,6 @@
         {{ block("feeds", "cards/navigation/view.html.twig") }}
 
         {{ block("footer", "cards/navigation/view.html.twig") }}
-    </article>
+    </section>
 </aside>
 {% endblock leftpanel %}

components/RightPanel/templates/right_panel/view.html.twig

@@ -4,21 +4,19 @@
 <input type="checkbox" id="toggle-panel-right" tabindex="0" title="{{ 'Open right panel' | trans }}">
 
 <aside class="section-panel section-panel-right">
-    <article class="panel-content accessibility-target">
-        <section>
-            {% set prepend_right_panel = handle_event('PrependRightPanel', request) %}
-            {% for widget in prepend_right_panel %}
-                {{ widget | raw }}
-            {% endfor %}
-        </section>
+    <section class="panel-content accessibility-target">
+        {% set prepend_right_panel = handle_event('PrependRightPanel', request) %}
+        {% for widget in prepend_right_panel %}
+            {{ widget | raw }}
+        {% endfor %}
 
         {% set current_path = app.request.get('_route') %}
         {% set blocks = handle_event('AppendRightPostingBlock', request) %}
         {% if blocks['post_form'] is defined %}
-            <section class="section-widget" title="{{ 'Create a new note.' | trans }}">
-                <details class="section-widget-title-details" open="open"
+            <section class="frame-section" title="{{ 'Create a new note.' | trans }}">
+                <details class="section-details-title" open="open"
                          title="{{ 'Expand if you want to access more options.' | trans }}">
-                    <summary class="section-title-summary">
+                    <summary class="details-summary-title">
                         <h2>
                             {% set current_path = app.request.get('_route') %}
                             {% if current_path == 'conversation_reply_to' %}
@@ -40,8 +38,8 @@
                         {{ form_row(blocks['post_form'].content) }}
                         {{ form_row(blocks['post_form'].attachments) }}
 
-                        <details class="section-widget-subtitle-details">
-                            <summary class="section-subtitle-summary">
+                        <details class="section-details-subtitle">
+                            <summary class="details-summary-subtitle">
                                 <strong>
                                     {{ "Additional options" | trans }}
                                 </strong>
@@ -60,6 +58,6 @@
         {% for block in extra_blocks %}
             {{ block | raw }}
         {% endfor %}
-    </article>
+    </section>
 </aside>
 {% endblock rightpanel %}

components/Search/templates/search/view.html.twig

@@ -8,22 +8,22 @@
         </label>
     {% endif %}
 
-    <section class="section-widget section-padding">
+    <section class="frame-section frame-section-padding">
         <h2>{% trans %}Search{% endtrans %}</h2>
 
         {{ form_start(search_form) }}
-        <section class="section-widget section-form">
+        <section class="frame-section section-form">
             {{ form_errors(search_form) }}
             {{ form_row(search_form.search_query) }}
             {% if actor is not null %}
-                <details class="section-widget-subtitle-details">
-                    <summary class="section-subtitle-summary">
+                <details class="section-details-subtitle">
+                    <summary class="details-subtitle-summary">
                         <strong>{% trans %}Other options{% endtrans %}</strong>
                     </summary>
 
                     <div class="section-form">
-                        <details class="section-widget-subtitle-details">
-                            <summary class="section-subtitle-summary">
+                        <details class="section-details-subtitle">
+                            <summary class="details-subtitle-summary">
                                 <strong>
                                     {% trans %}Save query as a feed{% endtrans %}
                                 </strong>
@@ -40,17 +40,17 @@
         </section>
         {{ form_end(search_form)}}
 
-        <section class="section-widget">
-            <details class="section-widget-subtitle-details">
-                <summary class="section-subtitle-summary">
+        <section class="frame-section">
+            <details class="section-details-subtitle">
+                <summary class="details-subtitle-summary">
                     <strong>{% trans %}Build a search query{% endtrans %}</strong>
                 </summary>
 
                 {{ form_start(search_builder_form) }}
                 <div class="section-form">
                     {# actor options, display if first checked, with checkbox trick #}
-                    <details class="section-widget-subtitle-details">
-                        <summary class="section-subtitle-summary">
+                    <details class="section-details-subtitle">
+                        <summary class="details-subtitle-summary">
                             <strong>{% trans %}People search options{% endtrans %}</strong>
                         </summary>
                         {{ form_row(search_builder_form.include_actors) }}
@@ -64,8 +64,8 @@
                         {{ form_row(search_builder_form.actor_tags) }}
                     </details>
 
-                    <details class="section-widget-subtitle-details">
-                        <summary class="section-subtitle-summary">
+                    <details class="section-details-subtitle">
+                        <summary class="details-subtitle-summary">
                             <strong>{% trans %}Note search options{% endtrans %}</strong>
                         </summary>
                         {{ form_row(search_builder_form.include_notes) }}
@@ -84,18 +84,18 @@
         </section>
     </section>
 
-    <section class="section-widget section-padding">
+    <section class="frame-section frame-section-padding">
         <h2>{% trans %}Results{% endtrans %}</h2>
-        <div class="section-widget section-padding feed-empty">
-            <h3>{% trans %}Notes found{% endtrans %}</h3>
+        <div class="frame-section frame-section-padding feed-empty">
             {% if notes is defined and notes is not empty %}
                 {{ parent() }}
             {% else %}
+                <h3>{% trans %}No notes found{% endtrans %}</h3>
                 <em>{% trans %}No notes were found for the specified query...{% endtrans %}</em>
             {% endif %}
         </div>
 
-        <div class="section-widget section-padding feed-empty">
+        <div class="frame-section frame-section-padding feed-empty">
             <h3>{% trans %}Actors found{% endtrans %}</h3>
             {% if actors is defined and actors is not empty %}
                 {% for actor in actors %}

components/Tag/templates/actor_tag_feed.html.twig

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

components/Tag/templates/note_tag_feed.html.twig

@@ -26,7 +26,7 @@
         {% endblock current_note %}
     {% endfor %}
 
-    <div class="section-widget section-padding section-widget-paging">
+    <div class="frame-section frame-section-padding frame-section-paging">
         {{ "Page " ~ page }}
     </div>
 {% endblock %}

docs/designer/src/guidelines.md

@@ -32,7 +32,7 @@ for your specific class names.
 | Name                 | Function                                                                   | Dependencies                                     | Examples                                                                                                                                             | Sub-classes                                       |
 |----------------------|----------------------------------------------------------------------------|--------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------|
 | section-panel        | Side panel                                                                 | - Preceded by a checkbox hack (hide/show panel); | Left panel `\App\Component\LeftPanel\templates\left_panel\view.html.twig`<br/>Right `\App\Component\RightPanel\templates\right_panel\view.html.twig` | `section-panel-left`, `section-panel-right`       |
-| section-widget       | A sub-section of a page, commonly a template block of a component / plugin | None                                             | Login template `\App\templates\security\login.html.twig`                                                                                             | `section-widget-title`, `section-widget-subtitle` |
-| section-widget-title | A template block's title                                                   | - Part of a `section-widget`;                    | Settings template `\App\templates\settings\base.html.twig`                                                                                           | None                                              |
+| frame-section       | A sub-section of a page, commonly a template block of a component / plugin | None                                             | Login template `\App\templates\security\login.html.twig`                                                                                             | `frame-section-title`, `frame-section-subtitle` |
+| frame-section-title | A template block's title                                                   | - Part of a `frame-section`;                    | Settings template `\App\templates\settings\base.html.twig`                                                                                           | None                                              |
 
 _**still in construction...**_

plugins/AttachmentCollections/templates/AttachmentCollections/collection_entry_view.html.twig

@@ -2,9 +2,9 @@
 
 {% block collection_items %}
     {% for key, attachment in attachments %}
-        <section class="section-widget section-padding">
+        <section class="frame-section frame-section-padding">
             {% include '/cards/attachments/view.html.twig' with {'attachment': attachment, 'note': bare_notes[key], 'title': attachment.getBestTitle(bare_notes[key])} only %}
-            <a class="section-widget-button-like"
+            <a class="frame-section-button-like"
                href="{{ attachment.getDownloadUrl(bare_notes[key]) }}"> {{ 'Download link' | trans }}</a>
         </section>
     {% else %}

plugins/AttachmentShowRelated/templates/attachmentShowRelated/attachmentRelatedNotes.html.twig

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

plugins/AttachmentShowRelated/templates/attachmentShowRelated/attachmentRelatedTags.html.twig

@@ -1,4 +1,4 @@
-<section class="section-widget section-padding">
+<section class="frame-section frame-section-padding">
     <div class="section-title">
         <h2 class="heading-no-margin">
             {{ 'Attachment tags' | trans }}

plugins/RelatedTags/templates/related_tags/actor_tags.html.twig

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

plugins/RelatedTags/templates/related_tags/note_tags.html.twig

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

plugins/TagBasedFiltering/templates/tag_based_filtering/add_blocked.html.twig

@@ -8,7 +8,7 @@
 
 {% block body %}
     {% if note is defined or actor is defined %}
-        <div class="section-padding">
+        <div class="frame-section-padding">
             {% if note is defined and note is not null %}
                 {{ noteView.macro_note(note, {}) }}
             {% elseif actor is defined and actor is not null  %}
@@ -20,7 +20,7 @@
         <p>{{ label }}</p>
         {{ form(tags_form) }}
     {% endif %}
-    <div class="section-widget-button-like">
+    <div class="frame-section-button-like">
         <a href="{{ url('settings', {'open': 'settings-muting-' ~ type ~ '-tags-details'}) }}">{% trans %}Go to %type% muting settings{% endtrans %}</a>
     </div>
 {% endblock %}

plugins/WebMonetization/templates/WebMonetization/widget.html.twig

@@ -1,6 +1,6 @@
-<section class="section-widget">
-    <details class="section-widget-title-details" title="Expand if you want to access more options.">
-        <summary class="section-title-summary">
+<section class="frame-section">
+    <details class="section-details-title" title="Expand if you want to access more options.">
+        <summary class="details-title-summary">
             <h2>Web Monetization</h2>
         </summary>
         <section class="section-form">

public/assets/default_theme/css/base.css

@@ -1,6 +1,5 @@
-
 html {
-    font-family: 'Open Sans', sans-serif;
+    font-family: 'Open Sans',sans-serif;
     scroll-margin-top: var(--xxl);
 }
 
@@ -10,9 +9,7 @@ html {
 }
 
 .active {
-    font-size: 1.1em;
-    font-family: 'Poppins', sans-serif;
-    font-weight: 600;
+    font: 600 1.1em 'Poppins',sans-serif;
 }
 
 .anchor-hidden {
@@ -31,7 +28,7 @@ html {
     height: min-content;
     padding: var(--s);
     border-radius: var(--s);
-    background-color: var(--background-hard) !important;
+    background-color: var(--background-hard)!important;
     border: 2px solid var(--border);
 }
 
@@ -57,7 +54,7 @@ html {
     height: var(--xxl);
     align-items: baseline;
     padding: var(--s);
-    background: var(--gradient) !important;
+    background: var(--gradient)!important;
     box-shadow: var(--shadow);
 }
 
@@ -80,6 +77,7 @@ html {
 }
 
 .page-content {
+    margin-top: var(--s);
     display: flex;
     flex-direction: column;
     width: 100%;
@@ -88,7 +86,7 @@ html {
 .markdown-blocks {
     border-radius: 0 0 var(--s) var(--s);
     padding: var(--s);
-    background-color: var(--background-card) !important;
+    background-color: var(--background-card)!important;
 }
 
 .markdown-blocks ul {
@@ -97,14 +95,14 @@ html {
 }
 
 .markdown-blocks ul li {
-    margin-bottom: 0.2em;
+    margin-bottom: .2em;
 }
 
 .doc-navigation {
     border-radius: var(--s) var(--s) 0 0;
     border-bottom: 0;
     padding: var(--s);
-    background-color: var(--background-card) !important;
+    background-color: var(--background-card)!important;
 }
 
 .doc-navigation ul {
@@ -154,13 +152,11 @@ html {
         top: -100%;
     }
 
-    #toggle-panel-left:not(:checked) ~ .section-panel-left,
-    #toggle-panel-right:not(:checked) ~ .section-panel-right {
+    #toggle-panel-left:not(:checked) ~ .section-panel-left,#toggle-panel-right:not(:checked) ~ .section-panel-right {
         display: none;
     }
 
-    #toggle-panel-left:checked ~ .section-panel-left,
-    #toggle-panel-right:checked ~ .section-panel-right {
+    #toggle-panel-left:checked ~ .section-panel-left,#toggle-panel-right:checked ~ .section-panel-right {
         z-index: 1;
         width: 100vw;
         left: 0;
@@ -173,9 +169,8 @@ html {
         width: 100%;
     }
 
-    label[for|="toggle-panel"],
-    input[id|="toggle-panel"] {
-        display: none !important;
+    label[for|="toggle-panel"],input[id|="toggle-panel"] {
+        display: none!important;
     }
 
     .section-panel {
@@ -194,26 +189,13 @@ html {
 }
 
 @media only screen and (min-width: 1921px) {
-    /*
-    * Using the Van de Graaf Canon and Tschichold’s recommended 2:3 page-size ratio
-    *
-    * 100% * 2/3 = 66%
-    *
-    * > .page-content-wrapper
-    * 66% * 2/3 = 44%
-    *
-    * > .section-panel
-    * 66% - 44% = 22%
-    * 22% / 2 = 11%
-    */
     .page-header {
         width: 66vw;
         align-self: center;
     }
 
-    label[for|="toggle-panel"],
-    input[id|="toggle-panel"] {
-        display: none !important;
+    label[for|="toggle-panel"],input[id|="toggle-panel"] {
+        display: none!important;
     }
 
     .section-panel {
@@ -238,6 +220,7 @@ html {
         opacity: 0;
         transform: translateY(-10px);
     }
+
     100% {
         opacity: unset;
         transform: none;
@@ -249,45 +232,44 @@ html {
         opacity: 0;
         transform: translateY(-10px);
     }
+
     0% {
         opacity: unset;
         transform: none;
     }
 }
 
-@media (prefers-color-scheme: dark) {
-    @keyframes highlight {
-        0% {
-            box-shadow: initial;
-            border-radius: var(--s);
-        }
-        50% {
-            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(--s);
-        }
+@keyframes highlight {
+    0% {
+        box-shadow: initial;
+        border-radius: var(--s);
+    }
+
+    50% {
+        border-radius: var(--s);
+        box-shadow: inset 0 20px 40px #FFF;
+        transition: box-shadow .3s ease-in-out;
+        z-index: 666;
     }
-}
 
-@media (prefers-color-scheme: light) {
-    @keyframes highlight {
-        0% {
-            box-shadow: initial;
-            border-radius: var(--s);
-        }
-        50% {
-            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(--s);
-        }
+    100% {
+        box-shadow: initial;
+        border-radius: var(--s);
+    }
+
+    0% {
+        box-shadow: initial;
+        border-radius: var(--s);
+    }
+
+    50% {
+        border-radius: var(--s);
+        box-shadow: inset 0 20px 40px #000;
+        transition: box-shadow .3s ease-in-out;
+    }
+
+    100% {
+        box-shadow: initial;
+        border-radius: var(--s);
     }
 }

public/assets/default_theme/css/pages/feeds.css

@@ -1,6 +1,5 @@
 .feed-header {
     display: flex;
-    margin-top: var(--m);
     margin-bottom: var(--m);
     align-items: center;
 }
@@ -11,7 +10,7 @@
 }
 
 .feed-actions-details-dropdown {
-    font-size: 0.937rem;
+    font-size: .937rem;
 }
 
 .notes hr {
@@ -40,7 +39,7 @@
 }
 
 .note-sidebar img {
-    background: unset !important;
+    background: unset!important;
 }
 
 .h-entry:not(:first-child) {
@@ -52,11 +51,11 @@
 }
 
 .h-entry img {
-    background: repeating-conic-gradient(#ffffff66 0deg 90deg, #ffffff33 0deg 180deg) 0 0/40px 40px round;
+    background: repeating-conic-gradient(#ffffff66 0deg 90deg,#ffffff33 0deg 180deg) 0 0/40px 40px round;
 }
 
 .h-entry[id^="note-anchor-"]:target {
-    border: 2px solid var(--accent) !important;
+    border: 2px solid var(--accent)!important;
 }
 
 .embed {
@@ -81,9 +80,8 @@
     width: 60%;
 }
 
-.embed .p-author,
-.embed .p-name {
-    font-weight: bold;
+.embed .p-author,.embed .p-name {
+    font-weight: 700;
 }
 
 .embed img {
@@ -108,7 +106,7 @@
 .h-entry {
     display: flex;
     border-radius: var(--s);
-    background-color: var(--background-card) !important;
+    background-color: var(--background-card)!important;
 }
 
 .h-entry figure {
@@ -121,18 +119,17 @@
 
 .h-entry .replies {
     margin-bottom: var(--s);
-    padding: 0 var(--s) 0 var(--s);
+    padding: 0 var(--s);
     border-left: 1px solid var(--border);
 }
 
 .note-replies-start {
-    font-size: 0.937rem;
+    font-size: .937rem;
     font-weight: 700;
-    opacity: 0.5;
+    opacity: .5;
 }
 
-.note-info,
-embed header {
+.note-info,embed header {
     display: flex;
     border-bottom: unset;
     border-radius: 0 var(--s) 0 0;
@@ -142,6 +139,7 @@ embed header {
 
 .note-info {
     margin-top: 2px;
+    margin-right: 2px;
     background: var(--gradient-backwards);
 }
 
@@ -163,9 +161,7 @@ embed header {
     margin-left: 4px;
 }
 
-.note-author-url,
-.note-conversation-url,
-.note-url {
+.note-author-url,.note-conversation-url,.note-url {
     font-style: italic;
 }
 
@@ -178,13 +174,12 @@ embed header {
     margin-left: 4px;
 }
 
-.note-author-nickname,
-.note-conversation-info {
-    opacity: 0.5;
+.note-author-nickname,.note-conversation-info {
+    opacity: .5;
 }
 
 .note-author-fullname {
-    font-weight: bold;
+    font-weight: 700;
 }
 
 .note-actions {
@@ -200,7 +195,7 @@ embed header {
 .note-actions-separator {
     display: inline-block;
     background: var(--foreground);
-    opacity: 0.33;
+    opacity: .33;
     width: 1px;
     height: 1em;
     margin-left: 2px;
@@ -212,24 +207,21 @@ embed header {
     flex-direction: column;
 }
 
-.feed-actions-details summary,
-.note-actions-extra-details summary {
+.feed-actions-details summary,.note-actions-extra-details summary {
     display: block;
     width: var(--unit);
     height: var(--unit);
 }
 
 .note-actions-extra-details summary {
-    opacity: 0.33;
+    opacity: .33;
 }
 
-.feed-actions-details[open] > summary,
-.note-actions-extra-details[open] > summary {
-    opacity: 1 !important;
+.feed-actions-details[open] > summary,.note-actions-extra-details[open] > summary {
+    opacity: 1!important;
 }
 
-.feed-actions-details[open] > .feed-actions-details-dropdown,
-.note-actions-extra-details[open] > summary + * {
+.feed-actions-details[open] > .feed-actions-details-dropdown,.note-actions-extra-details[open] > summary + * {
     z-index: 1;
     display: flex;
     position: absolute;
@@ -242,10 +234,12 @@ embed header {
     box-shadow: var(--shadow);
     width: max-content;
 }
+
 .feed-actions-details[open] svg {
     width: 1em;
     height: auto;
 }
+
 .feed-actions-details[open] > .feed-actions-details-dropdown a span {
     margin-left: 4px;
     float: right;
@@ -253,67 +247,66 @@ embed header {
 
 .note-actions-extra-details[open] > summary + * > li {
     line-height: 2;
-    font-size: 0.937rem;
+    font-size: .937rem;
 }
 
 .note-actions-extra-details hr {
-    margin: 8px !important;
+    margin: 8px!important;
 }
 
 .note-actions-set {
-    opacity: 1 !important;
+    opacity: 1!important;
 }
 
 .button-container {
-    border: none !important;
-    mask-repeat: no-repeat !important;
-    mask-size: contain !important;
+    border: none!important;
+    mask-repeat: no-repeat!important;
+    mask-size: contain!important;
     display: inline-block;
     width: 14px;
     height: 14px;
     background-color: var(--foreground);
-    opacity: 0.33;
+    opacity: .33;
 }
 
 .button-container:not(:first-of-type) {
     margin-left: var(--s);
 }
 
-.button-container:focus,
-.button-container:hover {
-    border: none !important;
-    mask-repeat: no-repeat !important;
-    mask-size: cover !important;
+.button-container:focus,.button-container:hover {
+    border: none!important;
+    mask-repeat: no-repeat!important;
+    mask-size: cover!important;
     opacity: 1;
     background-color: var(--accent);
 }
 
 .favourite-button-container {
-    -o-mask-image: url("../../icons/heart.svg");
-    -moz-mask-image: url("../../icons/heart.svg");
-    -webkit-mask-image: url("../../icons/heart.svg");
-    mask-image: url("../../icons/heart.svg");
+    -o-mask-image: url(../../icons/heart.svg);
+    -moz-mask-image: url(../../icons/heart.svg);
+    -webkit-mask-image: url(../../icons/heart.svg);
+    mask-image: url(../../icons/heart.svg);
 }
 
 .reply-button-container {
-    -o-mask-image: url("../../icons/reply.svg");
-    -moz-mask-image: url("../../icons/reply.svg");
-    -webkit-mask-image: url("../../icons/reply.svg");
-    mask-image: url("../../icons/reply.svg");
+    -o-mask-image: url(../../icons/reply.svg);
+    -moz-mask-image: url(../../icons/reply.svg);
+    -webkit-mask-image: url(../../icons/reply.svg);
+    mask-image: url(../../icons/reply.svg);
 }
 
 .repeat-button-container {
-    -o-mask-image: url("../../icons/repeat.svg");
-    -moz-mask-image: url("../../icons/repeat.svg");
-    -webkit-mask-image: url("../../icons/repeat.svg");
-    mask-image: url("../../icons/repeat.svg");
+    -o-mask-image: url(../../icons/repeat.svg);
+    -moz-mask-image: url(../../icons/repeat.svg);
+    -webkit-mask-image: url(../../icons/repeat.svg);
+    mask-image: url(../../icons/repeat.svg);
 }
 
 .delete-button-container {
-    -o-mask-image: url("../../icons/delete.svg");
-    -moz-mask-image: url("../../icons/delete.svg");
-    -webkit-mask-image: url("../../icons/delete.svg");
-    mask-image: url("../../icons/delete.svg");
+    -o-mask-image: url(../../icons/delete.svg);
+    -moz-mask-image: url(../../icons/delete.svg);
+    -webkit-mask-image: url(../../icons/delete.svg);
+    mask-image: url(../../icons/delete.svg);
 }
 
 .note-content {
@@ -324,7 +317,7 @@ embed header {
 }
 
 .note-text a {
-    text-decoration: underline !important;
+    text-decoration: underline!important;
 }
 
 .note-attachments {
@@ -352,18 +345,18 @@ embed header {
 }
 
 .note-complementary {
-    font-size: 0.937rem;
+    font-size: .937rem;
     border-left: 2px solid var(--accent);
     border-end-start-radius: var(--s);
     border-end-end-radius: var(--s);
     padding-left: var(--s);
     margin-bottom: 4px;
     margin-right: var(--s);
-    background: var(--gradient) !important;
+    background: var(--gradient)!important;
 }
 
 .note-complementary a {
-    font-weight: bold;
+    font-weight: 700;
 }
 
 .note-complementary:last-of-type {
@@ -393,11 +386,11 @@ embed header {
     margin-right: auto;
 }
 
-/* < 720p */
 @media only screen and (max-width: 1280px) {
     .note-sidebar {
-        padding: 8px 2px 0 2px;
+        padding: 8px 2px 0;
     }
+
     .note-sidebar > * {
         max-width: 2rem;
         max-height: 2rem;

public/assets/default_theme/css/pages/settings.css

@@ -4,11 +4,10 @@
     box-shadow: var(--shadow);
 }
 
-.section-settings,
-.section-settings-details {
-    margin-bottom: 0.6rem;
-    border-radius: 0.6rem;
-    padding: 0.6rem;
+.section-settings,.section-settings-details {
+    margin-bottom: .6rem;
+    border-radius: .6rem;
+    padding: .6rem;
     box-sizing: border-box;
 }
 
@@ -33,12 +32,11 @@
 }
 
 .section-settings hr {
-    margin-top: 0.6rem;
-    margin-bottom: 0.6rem;
+    margin-top: .6rem;
+    margin-bottom: .6rem;
 }
 
-.section-settings-details summary em:first-letter,
-.section-settings-details summary h3:first-letter {
+.section-settings-details summary em:first-letter,.section-settings-details summary h3:first-letter {
     text-transform: uppercase;
 }
 
@@ -53,10 +51,10 @@
 
 .section-settings-details[open] summary:after {
     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-settings-details:not([open]) summary:after {
     transform: initial;
-    animation: fadeIn 200ms cubic-bezier(0, 0.55, 0.45, 1);
+    animation: fadeIn 200ms cubic-bezier(0,0.55,0.45,1);
 }

public/assets/default_theme/css/reset.css

@@ -1,29 +1,23 @@
 * {
-    box-sizing: border-box !important;
+    box-sizing: border-box!important;
     max-width: 100%;
 }
 
-body,
-html {
+body,html {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     background-color: var(--background-hard);
     background-attachment: fixed;
-    font-family: 'Open Sans', sans-serif;
-    font-size: var(--unit);
     display: flex;
     flex-direction: column;
+    font: var(--unit) 'Open Sans',sans-serif;
 }
 
-body,
-input,
-select,
-textarea {
+body,input,select,textarea {
     color: var(--foreground);
 }
 
-:link,
-:visited {
+:link,:visited {
     text-decoration: none;
     color: currentColor;
 }
@@ -32,24 +26,16 @@ hr {
     all: unset;
     display: block;
     height: 1px;
-    background-color: var(--border) !important;
+    background-color: var(--border)!important;
 }
 
-menu,
-ul {
+menu,ul {
     padding: unset;
     margin: unset;
     list-style: none;
 }
 
-blockquote,
-body,
-fieldset,
-form,
-html,
-input,
-pre,
-textarea {
+blockquote,body,fieldset,form,html,input,pre,textarea {
     margin: 0;
     padding: 0;
     border: 0;
@@ -59,9 +45,11 @@ fieldset {
     all: unset;
 }
 
-:link img,
-:visited img,
-a img {
+section {
+    all: unset;
+}
+
+:link img,:visited img,a img {
     border: 0;
 }
 
@@ -78,7 +66,7 @@ address {
 }
 
 details summary {
-    cursor: pointer !important;
+    cursor: pointer!important;
 }
 
 details summary > * {
@@ -94,12 +82,6 @@ details > summary::-webkit-details-marker {
     display: none;
 }
 
-@supports not(-ms-ime-align:auto) {
-    details summary {
-        cursor: pointer;
-    }
-}
-
 [hidden] {
     display: none;
 }
@@ -109,35 +91,25 @@ html {
 }
 
 body {
-    font-family: 'Open Sans', sans-serif;
+    font-family: 'Open Sans',sans-serif;
     font-weight: 400;
     line-height: 1.75;
 }
 
 p {
     all: unset;
-    font-family: 'Open Sans', sans-serif;
+    font-family: 'Open Sans',sans-serif;
     margin-bottom: 1rem;
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-legend {
+h1,h2,h3,h4,h5,legend {
     margin: 3rem 0 1.38rem;
-    font-family: 'Poppins', sans-serif;
+    font-family: 'Poppins',sans-serif;
     font-weight: 600;
     line-height: 1.3;
 }
 
-h1:first-child,
-h2:first-child,
-h3:first-child,
-h4:first-child,
-h5:first-child,
-legend:first-child {
+h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,legend:first-child {
     margin-top: initial;
 }
 
@@ -166,16 +138,12 @@ legend {
     font-size: 1.296em;
 }
 
-.text_small,
-small {
-    font-family: 'Open Sans', sans-serif;
-    font-size: 0.937rem;
+.text_small,small {
+    font: .937rem 'Open Sans',sans-serif;
 }
 
-input[type=password],
-input[type=text],
-textarea {
-    font-family: 'Open Sans', sans-serif;
+input[type=password],input[type=text],textarea {
+    font-family: 'Open Sans',sans-serif;
     font-weight: 400;
     padding: 4px 6px;
 }
@@ -192,11 +160,10 @@ li {
     padding: 0;
 }
 
-a:focus,
-a:hover {
+a:focus,a:hover {
     text-decoration: underline;
 }
 
-*:focus-visible {
+:focus-visible {
     box-shadow: var(--shadow-inset-accent);
 }

public/assets/default_theme/css/root.css

@@ -13,11 +13,11 @@
         --background-card: #131217;
         --border: #201f25;
         --accent: #5ddbcf;
-        --shadow: 0px 5px 20px -10px rgba(255,255,255,0.1) !important;
+        --shadow: 0 5px 20px -10px rgba(255,255,255,0.1)!important;
         --shadow-inset-accent: inset 0 0 0 2px var(--accent);
         --background-checkerboard: repeating-conic-gradient(#ffffff66 0 90deg,#ffffff33 0 180deg) 0 0/40px 40px round;
-        --gradient: linear-gradient(10deg,var(--border) 0,transparent 90%) !important;
-        --gradient-backwards: linear-gradient(290deg,var(--border) 0,var(--background-card) 100%) !important;
+        --gradient: linear-gradient(10deg,var(--border) 0,transparent 90%)!important;
+        --gradient-backwards: linear-gradient(290deg,var(--border) 0,var(--background-card) 100%)!important;
     }
 }
 
@@ -28,10 +28,10 @@
         --background-card: #f0f0f0;
         --border: #d5d5d5;
         --accent: #a22430;
-        --shadow: 0px 25px 42px -10px rgba(0,0,0,0.1) !important;
+        --shadow: 0 25px 42px -10px rgba(0,0,0,0.1)!important;
         --shadow-inset-accent: inset 0 0 0 2px var(--accent);
         --background-checkerboard: repeating-conic-gradient(#ffffff66 0 90deg,#ffffff33 0 180deg) 0 0/40px 40px round;
-        --gradient: linear-gradient(10deg,var(--background-hard) 0,transparent 60%) !important;
-        --gradient-backwards: linear-gradient(290deg,var(--background-hard) 0,var(--background-card) 100%) !important;
+        --gradient: linear-gradient(10deg,var(--background-hard) 0,transparent 60%)!important;
+        --gradient-backwards: linear-gradient(290deg,var(--background-hard) 0,var(--background-card) 100%)!important;
     }
 }

public/assets/default_theme/css/widgets/buttons.css

@@ -106,8 +106,7 @@ button {
     border-color: tomato !important;
 }
 
-button,
-label {
+button, label {
     font-family: 'Poppins', sans-serif;
     font-weight: bold !important;
     color: currentColor;
@@ -117,10 +116,7 @@ select::-ms-expand {
     display: none;
 }
 
-button,
-input,
-select,
-textarea {
+button, input, select, textarea {
     display: inline-block;
     overflow: hidden;
     font-size: inherit;
@@ -132,14 +128,11 @@ textarea {
     max-width: border-box !important;
 }
 
-button,
-select,
-textarea {
+button, select, textarea {
     background: var(--gradient) !important;
 }
 
-button,
-input:not([type=checkbox], [type=radio]) {
+button, input:not([type=checkbox], [type=radio]) {
     background: var(--gradient) !important;
 }
 
@@ -155,13 +148,6 @@ select[multiple] {
     height: 20rem;
 }
 
-button:focus,
-button:hover,
-input:focus,
-input:hover,
-select:focus,
-select:hover,
-textarea:focus,
-textarea:hover {
+button:focus, button:hover, input:focus, input:hover, select:focus, select:hover, textarea:focus, textarea:hover {
     box-shadow: var(--shadow-inset-accent) !important;
 }

public/assets/default_theme/css/widgets/sections.css

@@ -51,18 +51,15 @@
     opacity: 0.66;
 }
 
-.profile-stats-subscribers,
-.profile-stats-subscriptions {
+.profile-stats-subscribers, .profile-stats-subscriptions {
     display: block;
 }
 
-.profile-stats-subscribers strong,
-.profile-stats-subscriptions strong {
+.profile-stats-subscribers strong, .profile-stats-subscriptions strong {
     margin-right: 4px;
 }
 
-.profile-bio,
-.profile-info-url {
+.profile-bio, .profile-info-url {
     word-break: break-all;
 }
 
@@ -104,8 +101,7 @@
     margin-left: var(--s);
 }
 
-.button-container:focus,
-.button-container:hover {
+.button-container:focus, .button-container:hover {
     border: none !important;
     mask-repeat: no-repeat !important;
     mask-size: cover !important;
@@ -142,7 +138,7 @@
     margin-bottom: unset;
 }
 
-.section-widget {
+.frame-section {
     display: flex;
     flex-direction: column;
     border-radius: var(--s);
@@ -150,17 +146,18 @@
     background-color: var(--background-card) !important;
     box-shadow: var(--shadow);
     border: 2px solid var(--border) !important;
+    border-radius: var(--s);
 }
 
-.section-widget hr {
+.frame-section hr {
     margin-bottom: var(--s);
 }
 
-.section-padding {
+.frame-section-padding {
     padding: var(--s);
 }
 
-.section-widget-paging {
+.frame-section-paging {
     display: block;
     font-family: 'Poppins', sans-serif;
     font-weight: 700;
@@ -169,11 +166,11 @@
     margin-left: auto;
 }
 
-.section-widget-title {
+.frame-section-title {
     margin-left: unset;
 }
 
-.section-widget-button-like {
+.frame-section-button-like {
     font-family: 'Poppins', sans-serif;
     font-weight: 700;
     display: block;
@@ -185,78 +182,70 @@
     border: 2px solid var(--border);
 }
 
-.section-widget-title-details summary {
+.section-details-title summary {
     padding: 6px 12px;
 }
 
-.section-widget-subtitle-details summary {
+.section-details-subtitle summary {
     padding: 2px 8px;
 }
 
-.section-widget-subtitle-summary + * {
+.details-subtitle-summary + * {
     border-radius: var(--s);
     background: var(--gradient);
     padding: 2px 8px;
 }
 
-.section-form .section-widget-subtitle-details summary {
+.section-form .section-details-subtitle summary {
     border: 2px solid var(--border);
 }
 
-.section-widget-subtitle-details summary,
-.section-widget-title-details summary {
+.section-details-subtitle summary, .section-details-title summary {
     display: inline-block;
     width: 100%;
     border-radius: var(--s);
     background: var(--gradient);
 }
 
-.section-widget-subtitle-details summary > *,
-.section-widget-title-details summary > * {
+.section-details-subtitle summary > *, .section-details-title summary > * {
     display: inline-block;
     vertical-align: baseline;
 }
 
-.section-widget-subtitle-details summary > *:last-child,
-.section-widget-title-details summary > *:last-child {
+.section-details-subtitle summary > *:last-child, .section-details-title summary > *:last-child {
     margin-right: 4px;
 }
 
-.section-widget-subtitle-details summary:after,
-.section-widget-title-details summary:after {
+.section-details-subtitle summary:after, .section-details-title summary:after {
     content: "\2193";
     float: right;
 }
 
-.section-widget-subtitle-details[open] summary:after,
-.section-widget-title-details[open] summary:after {
+.section-details-subtitle[open] summary:after, .section-details-title[open] summary:after {
     transform: rotate(180deg);
     animation: fadeOut 200ms cubic-bezier(0, 0.55, 0.45, 1);
 }
 
-.section-widget-subtitle-details:not([open]) summary:after,
-.section-widget-title-details:not([open]) summary:after {
+.section-details-subtitle:not([open]) summary:after, .section-details-title:not([open]) summary:after {
     transform: initial;
     animation: fadeIn 200ms cubic-bezier(0, 0.55, 0.45, 1);
 }
 
-.section-subtitle-summary ~ [class|="form-row"] {
+.details-subtitle-summary ~ [class|="form-row"] {
     font-size: 0.937rem;
     max-font-size: 0.937rem !important;
     padding: var(--s);
 }
 
-.section-subtitle-summary a,
-.section-title-summary a {
+.details-subtitle-summary a, .details-title-summary a {
     line-height: initial;
 }
 
-.section-subtitle-summary svg:last-child,
-.section-title-summary svg:last-child {
+.details-subtitle-summary svg:last-child, .details-title-summary svg:last-child {
     margin-left: 4px;
 }
 
-.section-widget-subtitle-details .section-widget-subtitle-details:not(:last-of-type) {
+.section-details-subtitle .section-details-subtitle:not(:last-of-type) {
     margin-bottom: var(--s);
 }
 
@@ -298,9 +287,7 @@ textarea.form-row-widget {
 
 .form-search {
     display: inline-block;
-    padding-left: unset;
-    padding-right: unset;
-    padding-bottom: unset;
+    padding: unset;
     margin-bottom: var(--m);
 }
 
@@ -336,10 +323,7 @@ textarea.form-row-widget {
     height: 100%;
 }
 
-.alert,
-.alert-danger,
-.form-error,
-.form-row-widget-error {
+.alert, .alert-danger, .form-error, .form-row-widget-error {
     display: inline-flex;
     align-items: center;
     justify-content: space-between;

public/components/Collection/assets/css/pages.css

@@ -1,70 +1,82 @@
-.collection-add, .collections-list {
+.collection-add,.collections-list {
     padding: 10px 12px;
 }
+
 .collection-add > form > div {
     display: flex;
     align-items: flex-end;
 }
+
 .collection-add > form > div .mb-6 {
     margin-right: 12px;
 }
+
 .collection-add > form > div button {
-    margin-top: 0px;
+    margin-top: 0;
     margin-bottom: var(--s);
 }
+
 @media only screen and (max-width:465px) {
-    .collection-add > form, .collection-add > form > div .mb-6 {
+    .collection-add > form,.collection-add > form > div .mb-6 {
         width: 100%;
-        margin: 0px;
+        margin: 0;
     }
+
     .collection-add > form > div {
         flex-direction: column;
     }
+
     .collection-add > form > div button {
-        margin-top: var(--s);;
-        margin-bottom: 0px;
+        margin-top: var(--s);
+        margin-bottom: 0;
     }
 }
 
 :root {
     --collections-list-quantity: 3;
 }
-@media only screen and (min:1281px) {
-  :root {
-      --collections-list-quantity: 3;
-  }
+
+@media only screen and (min-width:1281px) {
+    :root {
+        --collections-list-quantity: 3;
+    }
 }
+
 @media only screen and (max-width:1280px) {
-  :root {
-      --collections-list-quantity: 4;
-  }
+    :root {
+        --collections-list-quantity: 4;
+    }
 }
+
 @media only screen and (max-width:900px) {
-  :root {
-      --collections-list-quantity: 3;
-  }
+    :root {
+        --collections-list-quantity: 3;
+    }
 }
+
 @media only screen and (max-width:700px) {
-  :root {
-      --collections-list-quantity: 2;
-  }
+    :root {
+        --collections-list-quantity: 2;
+    }
 }
+
 @media only screen and (max-width:465px) {
-  :root {
-      --collections-list-quantity: 1;
-  }
+    :root {
+        --collections-list-quantity: 1;
+    }
 }
 
-
 .collections-list {
-    display: grid !important;
+    display: grid!important;
     grid-gap: 12px;
-    grid-template-columns: repeat(var(--collections-list-quantity), 1fr);
+    grid-template-columns: repeat(var(--collections-list-quantity),1fr);
 }
-.collections-list h3, .collections-list h2, .collections-list h1 {
+
+.collections-list h3,.collections-list h2,.collections-list h1 {
     grid-column-start: 1;
     grid-column-end: calc(var(--collections-list-quantity) + 1);
 }
+
 .collections-list .collection-item {
     border: 2px solid var(--border);
     border-radius: var(--s);
@@ -73,6 +85,7 @@
     flex-direction: column;
     position: relative;
 }
+
 .collections-list .collection-item .name {
     margin-right: auto;
     flex-grow: 1;
@@ -80,27 +93,34 @@
     word-break: break-word;
     margin-right: 60px;
 }
+
 .collections-list .collection-item summary {
     position: absolute;
     top: 10px;
     right: 50px;
     width: 16px;
 }
+
 .collections-list .collection-item details + details > summary {
     right: 20px;
 }
+
 .collections-list .collection-item details {
     margin-top: 12px;
 }
+
 .collections-list .collection-item svg {
     fill: var(--foreground);
 }
+
 .collections-list .collection-item svg:hover {
     fill: var(--accent);
 }
+
 .collections-list .collection-item details label {
     display: none;
 }
+
 .collections-list .collection-item details .danger {
     color: #cb2d2d;
-}
+}

public/components/Collection/assets/css/widget.css

@@ -1,6 +1,3 @@
-.collections {
-    background-color: red;
-}
 .collections .collections-selections-options {
     display: flex;
     margin-top: 12px;

templates/base.html.twig

@@ -110,11 +110,11 @@
 <main class="page-content-wrapper">
     <a role="navigation" rel="help" id="anchor-main-content" class="anchor-hidden"
        title="{{ 'Press tab to access main content.' | trans }}"></a>
-    <div class='page-content accessibility-target'>
+    <section class='page-content accessibility-target'>
         {% block nav %}{% endblock %}
         {% block body %}{% endblock %}
         {% block javascripts %}{% endblock javascripts %}
-    </div>
+    </section>
 </main>
 </body>
 </html>

templates/cards/attachments/show.html.twig

@@ -2,9 +2,9 @@
 
 {% block body %}
     <div class="page">
-        <section class="section-widget section-padding">
+        <section class="frame-section frame-section-padding">
             {% include '/cards/attachments/view.html.twig' with {'attachment': attachment, 'note': note, 'title': title} only %}
-            <a class="section-widget-button-like" href="{{ download }}"> {{ 'Download link' | trans }}</a>
+            <a class="frame-section-button-like" href="{{ download }}"> {{ 'Download link' | trans }}</a>
         </section>
     </div>
 {% endblock body %}

templates/cards/navigation/view.html.twig

@@ -1,8 +1,8 @@
 {% block feeds %}
-  <section class="section-widget" title="{{ 'Feed navigation.' | trans }}">
-    <details class="section-widget-title-details" open="open"
+  <section class="frame-section" title="{{ 'Feed navigation.' | trans }}">
+    <details class="section-details-title" open="open"
              title="{{ 'Expand if you want to access more options.' | trans }}">
-      <summary class="section-title-summary">
+      <summary class="details-title-summary">
         <h2>{{ 'Feeds' | trans }}</h2>
         {% if app.user %}
           {# User custom feeds #}
@@ -10,7 +10,7 @@
         {% endif %}
       </summary>
 
-      <nav class='section-padding' tabindex="0" title="{{ 'Navigate through each feed.' | trans }}">
+      <nav class="frame-section-padding" tabindex="0" title="{{ 'Navigate through each feed.' | trans }}">
         {% if not app.user %} {# Default feeds #}
           <ul>
             <li>
@@ -54,7 +54,7 @@
 {% endblock profile_current_actor %}
 
 {% block profile_security %}
-    <section class='section-widget section-padding' title="{{ 'Your profile information.' | trans }}">
+    <section class='frame-section frame-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 }}">
 

templates/security/login.html.twig

@@ -8,7 +8,7 @@
 {% block title %}{{ "Log in!" | trans }}{% endblock %}
 
 {% block body %}
-    <section class="section-widget">
+    <section class="frame-section">
         <form class="section-form" method="post">
             <fieldset>
                 <legend class="section-form-legend">{{ "Login" | trans }}</legend>

templates/security/register.html.twig

@@ -8,7 +8,7 @@
 {% block title %}Register{% endblock %}
 
 {% block body %}
-    <section class="section-widget">
+    <section class="frame-section">
 
         <form class="section-form" method="post">
             {{ form_start(registration_form) }}

templates/settings/base.html.twig

@@ -11,8 +11,8 @@
 {% endblock stylesheets %}
 
 {% block body %}
-    <nav class='section-widget section-padding'>
-        <h1 class="section-widget-title">Settings</h1>
+    <nav class='frame-section frame-section-padding'>
+        <h1 class="frame-section-title">Settings</h1>
         <ul>
             <li>
                 {% set profile_tabs = [{'title': 'Personal Info', 'desc': 'Nickname, Homepage, Bio and more.', 'id': 'settings-personal-info', 'form': personal_info_form}] %}