From f731850f5cb0f4002c505ab00c20298f74af76d7 Mon Sep 17 00:00:00 2001 From: Eliseu Amaro Date: Wed, 19 Jan 2022 23:54:45 +0000 Subject: [PATCH] [CSS] .section-widget class and derivatives replaced as .frame-section, since a widget implies a simple element with a specific function --- .../templates/collection/actors.html.twig | 4 +- .../collection_entry_view.html.twig | 4 +- .../collection/meta_collections.html.twig | 8 +- .../templates/collection/notes.html.twig | 30 ++--- .../collection/widget_add_to.html.twig | 10 +- .../templates/conversation/mute.html.twig | 6 +- .../templates/language/sort.html.twig | 2 +- .../templates/left_panel/edit_feeds.html.twig | 4 +- .../templates/left_panel/view.html.twig | 6 +- .../templates/right_panel/view.html.twig | 24 ++-- .../Search/templates/search/view.html.twig | 34 ++--- .../Tag/templates/actor_tag_feed.html.twig | 2 +- .../Tag/templates/note_tag_feed.html.twig | 2 +- docs/designer/src/guidelines.md | 4 +- .../collection_entry_view.html.twig | 4 +- .../attachmentRelatedNotes.html.twig | 2 +- .../attachmentRelatedTags.html.twig | 2 +- .../related_tags/actor_tags.html.twig | 2 +- .../related_tags/note_tags.html.twig | 2 +- .../tag_based_filtering/add_blocked.html.twig | 4 +- .../WebMonetization/widget.html.twig | 6 +- public/assets/default_theme/css/base.css | 110 +++++++--------- .../assets/default_theme/css/pages/feeds.css | 121 +++++++++--------- .../default_theme/css/pages/settings.css | 20 ++- public/assets/default_theme/css/reset.css | 83 ++++-------- public/assets/default_theme/css/root.css | 12 +- .../default_theme/css/widgets/buttons.css | 24 +--- .../default_theme/css/widgets/sections.css | 70 ++++------ .../Collection/assets/css/pages.css | 88 ++++++++----- .../Collection/assets/css/widget.css | 3 - templates/base.html.twig | 4 +- templates/cards/attachments/show.html.twig | 4 +- templates/cards/navigation/view.html.twig | 10 +- templates/security/login.html.twig | 2 +- templates/security/register.html.twig | 2 +- templates/settings/base.html.twig | 4 +- 36 files changed, 321 insertions(+), 398 deletions(-) diff --git a/components/Collection/templates/collection/actors.html.twig b/components/Collection/templates/collection/actors.html.twig index 7fa9136d63..5a2959a15e 100644 --- a/components/Collection/templates/collection/actors.html.twig +++ b/components/Collection/templates/collection/actors.html.twig @@ -3,7 +3,7 @@ {% block title %}{{ title }}{% endblock %} {% block body %} -
+

{{ title }}

@@ -18,7 +18,7 @@
-
+
{% 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 %} diff --git a/components/Collection/templates/collection/collection_entry_view.html.twig b/components/Collection/templates/collection/collection_entry_view.html.twig index a0ddb84cd2..f0bedf5624 100644 --- a/components/Collection/templates/collection/collection_entry_view.html.twig +++ b/components/Collection/templates/collection/collection_entry_view.html.twig @@ -3,8 +3,8 @@ {% block title %}{{ page_title | trans }}{% endblock %} {% block body %} -
-

{{ page_title | trans }}

+
+

{{ page_title | trans }}

{% block collection_items %} {% endblock collection_items %}
diff --git a/components/Collection/templates/collection/meta_collections.html.twig b/components/Collection/templates/collection/meta_collections.html.twig index 81b4d2d1d8..2a591977a7 100644 --- a/components/Collection/templates/collection/meta_collections.html.twig +++ b/components/Collection/templates/collection/meta_collections.html.twig @@ -3,14 +3,14 @@ {% block title %}{{ page_title | trans }}{% endblock %} {% block body %} -
-

{{ page_title | trans }}

+
+

{{ page_title | trans }}

{% if add_collection %} -
+
{{ form(add_collection) }}
{% endif %} -
+

{{ list_title | trans }}

{% for col in collections %}
diff --git a/components/Collection/templates/collection/notes.html.twig b/components/Collection/templates/collection/notes.html.twig index f53758b513..21796807f8 100644 --- a/components/Collection/templates/collection/notes.html.twig +++ b/components/Collection/templates/collection/notes.html.twig @@ -14,12 +14,11 @@ {% endfor %} {% if notes is defined %} -
{% if page_title is defined %}

{{ page_title | trans }}

{% else %} -

{{ 'Notes' | trans }}

+

{{ 'Notes' | trans }}

{% endif %}
{% if notes is not empty %} - {# Backwards compatibility with hAtom 0.1 #} -
- {% 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 %} -
- {% endblock current_note %} - {% endfor %} -
+ {# Backwards compatibility with hAtom 0.1 #} +
+ {% 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 %} +
+ {% endblock current_note %} + {% endfor %} +
{% endif %} -
{% endif %} {% endblock body %} diff --git a/components/Collection/templates/collection/widget_add_to.html.twig b/components/Collection/templates/collection/widget_add_to.html.twig index 57fa8e44db..55fc3ebd6b 100644 --- a/components/Collection/templates/collection/widget_add_to.html.twig +++ b/components/Collection/templates/collection/widget_add_to.html.twig @@ -1,6 +1,6 @@ -
-
- +
+
+

{{ctitle}}

 {% if has_collections %} @@ -8,9 +8,9 @@ {{ form(add_form) }}
-
- + {% trans %}Other options{% endtrans %}
diff --git a/components/Conversation/templates/conversation/mute.html.twig b/components/Conversation/templates/conversation/mute.html.twig index c39700735c..437e5efc24 100644 --- a/components/Conversation/templates/conversation/mute.html.twig +++ b/components/Conversation/templates/conversation/mute.html.twig @@ -1,14 +1,14 @@ {% extends 'collection/notes.html.twig' %} {% block body %} -
+
{% if is_muted %} - + {{ form(form) }} {% else %} - + {{ form(form) }} diff --git a/components/Language/templates/language/sort.html.twig b/components/Language/templates/language/sort.html.twig index 1d71163f80..59ba0a7027 100644 --- a/components/Language/templates/language/sort.html.twig +++ b/components/Language/templates/language/sort.html.twig @@ -1,7 +1,7 @@ {% extends 'base.html.twig' %} {% block body %} -
+

{{ 'Put the languages in the order you\'d like to see them in your language selection dropdown, when posting' | trans}}

{{ form(form) }}
diff --git a/components/LeftPanel/templates/left_panel/edit_feeds.html.twig b/components/LeftPanel/templates/left_panel/edit_feeds.html.twig index 5f94b1a46d..161d2ba548 100644 --- a/components/LeftPanel/templates/left_panel/edit_feeds.html.twig +++ b/components/LeftPanel/templates/left_panel/edit_feeds.html.twig @@ -6,7 +6,7 @@ {% endblock stylesheets %} {% block body %} -
+
@@ -17,7 +17,7 @@ {{ form_errors(edit_feeds) }} {% for child in edit_feeds.children %} {% if 'row_url' in child.vars.block_prefixes %} -
+
{{ form_label(child) }} {{ form_widget(child) }} {% elseif 'row_title' in child.vars.block_prefixes %} diff --git a/components/LeftPanel/templates/left_panel/view.html.twig b/components/LeftPanel/templates/left_panel/view.html.twig index 43cae5b4d9..078908d8a5 100644 --- a/components/LeftPanel/templates/left_panel/view.html.twig +++ b/components/LeftPanel/templates/left_panel/view.html.twig @@ -4,9 +4,9 @@
{% endblock leftpanel %} diff --git a/components/RightPanel/templates/right_panel/view.html.twig b/components/RightPanel/templates/right_panel/view.html.twig index b1e309c601..a077438bd0 100644 --- a/components/RightPanel/templates/right_panel/view.html.twig +++ b/components/RightPanel/templates/right_panel/view.html.twig @@ -4,21 +4,19 @@
{% endblock rightpanel %} diff --git a/components/Search/templates/search/view.html.twig b/components/Search/templates/search/view.html.twig index f217fa9120..c1aa745e66 100644 --- a/components/Search/templates/search/view.html.twig +++ b/components/Search/templates/search/view.html.twig @@ -8,22 +8,22 @@ {% endif %} -
+

{% trans %}Search{% endtrans %}

{{ form_start(search_form) }} -
+
{{ form_errors(search_form) }} {{ form_row(search_form.search_query) }} {% if actor is not null %} -
- +
+ {% trans %}Other options{% endtrans %}
-
- +
+ {% trans %}Save query as a feed{% endtrans %} @@ -40,17 +40,17 @@
{{ form_end(search_form)}} -
-
- +
+
+ {% trans %}Build a search query{% endtrans %} {{ form_start(search_builder_form) }}
{# actor options, display if first checked, with checkbox trick #} -
- +
+ {% trans %}People search options{% endtrans %} {{ form_row(search_builder_form.include_actors) }} @@ -64,8 +64,8 @@ {{ form_row(search_builder_form.actor_tags) }}
-
- +
+ {% trans %}Note search options{% endtrans %} {{ form_row(search_builder_form.include_notes) }} @@ -84,18 +84,18 @@
-
+

{% trans %}Results{% endtrans %}

-
-

{% trans %}Notes found{% endtrans %}

+
{% if notes is defined and notes is not empty %} {{ parent() }} {% else %} +

{% trans %}No notes found{% endtrans %}

{% trans %}No notes were found for the specified query...{% endtrans %} {% endif %}
-
+

{% trans %}Actors found{% endtrans %}

{% if actors is defined and actors is not empty %} {% for actor in actors %} diff --git a/components/Tag/templates/actor_tag_feed.html.twig b/components/Tag/templates/actor_tag_feed.html.twig index 9e60e1af34..36e6129999 100644 --- a/components/Tag/templates/actor_tag_feed.html.twig +++ b/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 %} -
+
{{ "Page: " ~ page }}
{% endblock %} diff --git a/components/Tag/templates/note_tag_feed.html.twig b/components/Tag/templates/note_tag_feed.html.twig index c87ec44b42..6998bf8c36 100644 --- a/components/Tag/templates/note_tag_feed.html.twig +++ b/components/Tag/templates/note_tag_feed.html.twig @@ -26,7 +26,7 @@ {% endblock current_note %} {% endfor %} -
+
{{ "Page " ~ page }}
{% endblock %} diff --git a/docs/designer/src/guidelines.md b/docs/designer/src/guidelines.md index 635a228dc1..ec6681b524 100644 --- a/docs/designer/src/guidelines.md +++ b/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`
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...**_ \ No newline at end of file diff --git a/plugins/AttachmentCollections/templates/AttachmentCollections/collection_entry_view.html.twig b/plugins/AttachmentCollections/templates/AttachmentCollections/collection_entry_view.html.twig index 30ae2d2dd1..b3db64714f 100644 --- a/plugins/AttachmentCollections/templates/AttachmentCollections/collection_entry_view.html.twig +++ b/plugins/AttachmentCollections/templates/AttachmentCollections/collection_entry_view.html.twig @@ -2,9 +2,9 @@ {% block collection_items %} {% for key, attachment in attachments %} -
+
{% include '/cards/attachments/view.html.twig' with {'attachment': attachment, 'note': bare_notes[key], 'title': attachment.getBestTitle(bare_notes[key])} only %} - {{ 'Download link' | trans }}
{% else %} diff --git a/plugins/AttachmentShowRelated/templates/attachmentShowRelated/attachmentRelatedNotes.html.twig b/plugins/AttachmentShowRelated/templates/attachmentShowRelated/attachmentRelatedNotes.html.twig index b7ed4059e8..34a04c6f98 100644 --- a/plugins/AttachmentShowRelated/templates/attachmentShowRelated/attachmentRelatedNotes.html.twig +++ b/plugins/AttachmentShowRelated/templates/attachmentShowRelated/attachmentRelatedNotes.html.twig @@ -1,6 +1,6 @@ {% import '/cards/note/view.html.twig' as noteView %} -
+

{{ 'Notes related' | trans }} diff --git a/plugins/AttachmentShowRelated/templates/attachmentShowRelated/attachmentRelatedTags.html.twig b/plugins/AttachmentShowRelated/templates/attachmentShowRelated/attachmentRelatedTags.html.twig index 5e7d465977..1a37898271 100644 --- a/plugins/AttachmentShowRelated/templates/attachmentShowRelated/attachmentRelatedTags.html.twig +++ b/plugins/AttachmentShowRelated/templates/attachmentShowRelated/attachmentRelatedTags.html.twig @@ -1,4 +1,4 @@ -
+

{{ 'Attachment tags' | trans }} diff --git a/plugins/RelatedTags/templates/related_tags/actor_tags.html.twig b/plugins/RelatedTags/templates/related_tags/actor_tags.html.twig index 2aa5de125f..f78a5440b7 100644 --- a/plugins/RelatedTags/templates/related_tags/actor_tags.html.twig +++ b/plugins/RelatedTags/templates/related_tags/actor_tags.html.twig @@ -1,5 +1,5 @@ {% if actor_tags is not empty %} -
+

Related tags:

{% for at in actor_tags %} {% include 'cards/tag/actor_tag.html.twig' with { 'tag': at, 'actor': null } %} diff --git a/plugins/RelatedTags/templates/related_tags/note_tags.html.twig b/plugins/RelatedTags/templates/related_tags/note_tags.html.twig index ed3ed149cb..5c451abb0a 100644 --- a/plugins/RelatedTags/templates/related_tags/note_tags.html.twig +++ b/plugins/RelatedTags/templates/related_tags/note_tags.html.twig @@ -1,5 +1,5 @@ {% if note_tags is not empty %} -
+

Related tags:

{% for nt in note_tags %} diff --git a/plugins/TagBasedFiltering/templates/tag_based_filtering/add_blocked.html.twig b/plugins/TagBasedFiltering/templates/tag_based_filtering/add_blocked.html.twig index 2503990b8d..ed0f608a4e 100644 --- a/plugins/TagBasedFiltering/templates/tag_based_filtering/add_blocked.html.twig +++ b/plugins/TagBasedFiltering/templates/tag_based_filtering/add_blocked.html.twig @@ -8,7 +8,7 @@ {% block body %} {% if note is defined or actor is defined %} -
+
{% 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 @@

{{ label }}

{{ form(tags_form) }} {% endif %} -
+
{% trans %}Go to %type% muting settings{% endtrans %}
{% endblock %} diff --git a/plugins/WebMonetization/templates/WebMonetization/widget.html.twig b/plugins/WebMonetization/templates/WebMonetization/widget.html.twig index 9a3f317fb6..89f1bac0da 100644 --- a/plugins/WebMonetization/templates/WebMonetization/widget.html.twig +++ b/plugins/WebMonetization/templates/WebMonetization/widget.html.twig @@ -1,6 +1,6 @@ -
-
- +
+
+

Web Monetization
diff --git a/public/assets/default_theme/css/base.css b/public/assets/default_theme/css/base.css index d3d1c8aa4f..95d4d5b515 100644 --- a/public/assets/default_theme/css/base.css +++ b/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); } -} -@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); - } + 50% { + border-radius: var(--s); + box-shadow: inset 0 20px 40px #FFF; + transition: box-shadow .3s ease-in-out; + z-index: 666; + } + + 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); } } \ No newline at end of file diff --git a/public/assets/default_theme/css/pages/feeds.css b/public/assets/default_theme/css/pages/feeds.css index cbebcf83c9..a4a62af670 100644 --- a/public/assets/default_theme/css/pages/feeds.css +++ b/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; diff --git a/public/assets/default_theme/css/pages/settings.css b/public/assets/default_theme/css/pages/settings.css index 15cf6903ae..d4873aa80e 100644 --- a/public/assets/default_theme/css/pages/settings.css +++ b/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); } \ No newline at end of file diff --git a/public/assets/default_theme/css/reset.css b/public/assets/default_theme/css/reset.css index 0a4950d908..b9edf8f248 100644 --- a/public/assets/default_theme/css/reset.css +++ b/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); } \ No newline at end of file diff --git a/public/assets/default_theme/css/root.css b/public/assets/default_theme/css/root.css index 34446a0b09..26cc93bd28 100644 --- a/public/assets/default_theme/css/root.css +++ b/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; } } \ No newline at end of file diff --git a/public/assets/default_theme/css/widgets/buttons.css b/public/assets/default_theme/css/widgets/buttons.css index 4ee722c1a9..0f23b89ba3 100644 --- a/public/assets/default_theme/css/widgets/buttons.css +++ b/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; } \ No newline at end of file diff --git a/public/assets/default_theme/css/widgets/sections.css b/public/assets/default_theme/css/widgets/sections.css index baf8746697..50901d68ec 100644 --- a/public/assets/default_theme/css/widgets/sections.css +++ b/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; diff --git a/public/components/Collection/assets/css/pages.css b/public/components/Collection/assets/css/pages.css index c1db52eb8d..55a1f644ec 100644 --- a/public/components/Collection/assets/css/pages.css +++ b/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 (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 (min-width:1281px) { + :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; + } +} .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; -} +} \ No newline at end of file diff --git a/public/components/Collection/assets/css/widget.css b/public/components/Collection/assets/css/widget.css index a0e5135fb6..cde432f648 100644 --- a/public/components/Collection/assets/css/widget.css +++ b/public/components/Collection/assets/css/widget.css @@ -1,6 +1,3 @@ -.collections { - background-color: red; -} .collections .collections-selections-options { display: flex; margin-top: 12px; diff --git a/templates/base.html.twig b/templates/base.html.twig index d7231c6bfb..0e2cba3920 100644 --- a/templates/base.html.twig +++ b/templates/base.html.twig @@ -110,11 +110,11 @@
-
+
{% block nav %}{% endblock %} {% block body %}{% endblock %} {% block javascripts %}{% endblock javascripts %} -
+
diff --git a/templates/cards/attachments/show.html.twig b/templates/cards/attachments/show.html.twig index a2e1e8a674..1a72a61763 100644 --- a/templates/cards/attachments/show.html.twig +++ b/templates/cards/attachments/show.html.twig @@ -2,9 +2,9 @@ {% block body %}
-
+
{% include '/cards/attachments/view.html.twig' with {'attachment': attachment, 'note': note, 'title': title} only %} - {{ 'Download link' | trans }} + {{ 'Download link' | trans }}
{% endblock body %} \ No newline at end of file diff --git a/templates/cards/navigation/view.html.twig b/templates/cards/navigation/view.html.twig index b81ecc7bd0..883dc6d097 100644 --- a/templates/cards/navigation/view.html.twig +++ b/templates/cards/navigation/view.html.twig @@ -1,8 +1,8 @@ {% block feeds %} -
-
+
- +

{{ 'Feeds' | trans }}

{% if app.user %} {# User custom feeds #} @@ -10,7 +10,7 @@ {% endif %} -