wamo/gnu-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Eliseu Amaro 2022-01-19 23:54:45 +00:00 committed by Diogo Peralta Cordeiro
parent 7d546e8901
commit f731850f5c
No known key found for this signature in database
GPG Key ID: 18D2D35001FBFAB0
36 changed files with 321 additions and 398 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/Collection/templates/collection/actors.html.twig
View File

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

4
components/Collection/templates/collection/collection_entry_view.html.twig
View File

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

8
components/Collection/templates/collection/meta_collections.html.twig
View File

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

30
components/Collection/templates/collection/notes.html.twig
View File

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

10
components/Collection/templates/collection/widget_add_to.html.twig
View File

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

6
components/Conversation/templates/conversation/mute.html.twig
View File

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

2
components/Language/templates/language/sort.html.twig
View File

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

4
components/LeftPanel/templates/left_panel/edit_feeds.html.twig
View File

@ -6,7 +6,7 @@
{% endblock stylesheets %} {% endblock stylesheets %}
{% block body %} {% block body %}
<div class="section-widget"> <div class="frame-section">
<form class="section-form" action="{{ path('edit_feeds') }}" method="post"> <form class="section-form" action="{{ path('edit_feeds') }}" method="post">
<fieldset> <fieldset>
@ -17,7 +17,7 @@
{{ form_errors(edit_feeds) }} {{ form_errors(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-padding"> <div class="frame-section frame-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 %}

6
components/LeftPanel/templates/left_panel/view.html.twig
View File

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

24
components/RightPanel/templates/right_panel/view.html.twig
View File

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

34
components/Search/templates/search/view.html.twig
View File

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

2
components/Tag/templates/actor_tag_feed.html.twig
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-padding"> <div class="frame-section frame-section-padding">
{{ "Page: " ~ page }} {{ "Page: " ~ page }}
</div> </div>
{% endblock %} {% endblock %}

2
components/Tag/templates/note_tag_feed.html.twig
View File

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

4
docs/designer/src/guidelines.md
View File

@ -32,7 +32,7 @@ for your specific class names.
| Name | Function | Dependencies | Examples | Sub-classes | | 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-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` | | 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` |
| section-widget-title | A template block's title | - Part of a `section-widget`; | Settings template `\App\templates\settings\base.html.twig` | None | | 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...**_ _**still in construction...**_

4
plugins/AttachmentCollections/templates/AttachmentCollections/collection_entry_view.html.twig
View File

@ -2,9 +2,9 @@
{% block collection_items %} {% block collection_items %}
{% for key, attachment in attachments %} {% 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 %} {% 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> href="{{ attachment.getDownloadUrl(bare_notes[key]) }}"> {{ 'Download link' | trans }}</a>
</section> </section>
{% else %} {% else %}

2
plugins/AttachmentShowRelated/templates/attachmentShowRelated/attachmentRelatedNotes.html.twig
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-padding"> <section class="frame-section frame-section-padding">
<div class="section-title"> <div class="section-title">
<h2 class="heading-no-margin"> <h2 class="heading-no-margin">
{{ 'Notes related' | trans }} {{ 'Notes related' | trans }}

2
plugins/AttachmentShowRelated/templates/attachmentShowRelated/attachmentRelatedTags.html.twig
View File

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

2
plugins/RelatedTags/templates/related_tags/actor_tags.html.twig
View File

@ -1,5 +1,5 @@
{% if actor_tags is not empty %} {% if actor_tags is not empty %}
<div class="section-widget section-padding"> <div class="frame-section frame-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 } %}

2
plugins/RelatedTags/templates/related_tags/note_tags.html.twig
View File

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

4
plugins/TagBasedFiltering/templates/tag_based_filtering/add_blocked.html.twig
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-padding"> <div class="frame-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 %}
@ -20,7 +20,7 @@
<p>{{ label }}</p> <p>{{ label }}</p>
{{ form(tags_form) }} {{ form(tags_form) }}
{% endif %} {% 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> <a href="{{ url('settings', {'open': 'settings-muting-' ~ type ~ '-tags-details'}) }}">{% trans %}Go to %type% muting settings{% endtrans %}</a>
</div> </div>
{% endblock %} {% endblock %}

6
plugins/WebMonetization/templates/WebMonetization/widget.html.twig
View File

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

110
public/assets/default_theme/css/base.css
View File

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

121
public/assets/default_theme/css/pages/feeds.css
View File

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

20
public/assets/default_theme/css/pages/settings.css
View File

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

83
public/assets/default_theme/css/reset.css
View File

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

12
public/assets/default_theme/css/root.css
View File

@ -13,11 +13,11 @@
--background-card: #131217; --background-card: #131217;
--border: #201f25; --border: #201f25;
--accent: #5ddbcf; --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); --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; --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: linear-gradient(10deg,var(--border) 0,transparent 90%)!important;
--gradient-backwards: linear-gradient(290deg,var(--border) 0,var(--background-card) 100%) !important; --gradient-backwards: linear-gradient(290deg,var(--border) 0,var(--background-card) 100%)!important;
} }
} }
@ -28,10 +28,10 @@
--background-card: #f0f0f0; --background-card: #f0f0f0;
--border: #d5d5d5; --border: #d5d5d5;
--accent: #a22430; --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); --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; --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: 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-backwards: linear-gradient(290deg,var(--background-hard) 0,var(--background-card) 100%)!important;
} }
} }

24
public/assets/default_theme/css/widgets/buttons.css
View File

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

70
public/assets/default_theme/css/widgets/sections.css
View File

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

88
public/components/Collection/assets/css/pages.css
View File

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

3
public/components/Collection/assets/css/widget.css
View File

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

4
templates/base.html.twig
View File

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

4
templates/cards/attachments/show.html.twig
View File

@ -2,9 +2,9 @@
{% block body %} {% block body %}
<div class="page"> <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 %} {% 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> </section>
</div> </div>
{% endblock body %} {% endblock body %}

10
templates/cards/navigation/view.html.twig
View File

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

2
templates/security/login.html.twig
View File

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

2
templates/security/register.html.twig
View File

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

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

@ -11,8 +11,8 @@
{% endblock stylesheets %} {% endblock stylesheets %}
{% block body %} {% block body %}
<nav class='section-widget section-padding'> <nav class='frame-section frame-section-padding'>
<h1 class="section-widget-title">Settings</h1> <h1 class="frame-section-title">Settings</h1>
<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}] %}