From e2e1b0172d3db9874d1559448a556217d8fba2f1 Mon Sep 17 00:00:00 2001 From: Eliseu Amaro Date: Fri, 21 Jan 2022 18:02:27 +0000 Subject: [PATCH] [COMPONENTS][Collection] Actors view template ordering section polished [PLUGINS][RepeatNote] Note to be repeated now uses full note card [CSS] Simplyfying rules, re-ordering and removing unnecessary and costly 'display: flex' rules [CARDS][Note] Minimal note macro has info inside the note itself now, since horizontal space is limited --- .../templates/collection/actors.html.twig | 57 +- .../templates/right_panel/view.html.twig | 6 +- .../templates/repeat/add_to_repeats.html.twig | 2 +- .../repeat/remove_from_repeats.html.twig | 2 +- public/assets/default_theme/css/base.css | 101 ++- .../assets/default_theme/css/pages/feeds.css | 558 ++++++++-------- .../default_theme/css/pages/settings.css | 20 +- public/assets/default_theme/css/reset.css | 63 +- public/assets/default_theme/css/root.css | 2 +- .../default_theme/css/widgets/buttons.css | 88 +-- .../default_theme/css/widgets/sections.css | 623 +++++++++--------- templates/base.html.twig | 6 +- templates/cards/navigation/view.html.twig | 2 +- templates/cards/note/view.html.twig | 11 +- templates/security/login.html.twig | 2 +- templates/security/register.html.twig | 3 +- 16 files changed, 788 insertions(+), 758 deletions(-) diff --git a/components/Collection/templates/collection/actors.html.twig b/components/Collection/templates/collection/actors.html.twig index 5a2959a15e..3ecff78a5b 100644 --- a/components/Collection/templates/collection/actors.html.twig +++ b/components/Collection/templates/collection/actors.html.twig @@ -3,22 +3,49 @@ {% block title %}{{ title }}{% endblock %} {% block body %} -
-

{{ title }}

+
+

{{ title }}

-
-

{% trans %}Sort by:{% endtrans %}

-
- {% for field in sort_form_fields %} - - - {% endfor %} - - +
+ + + {% trans %}Ordering rules{% endtrans %} + + + +
+
+ {% trans %}Sort by{% endtrans %} +
+
+ {% for field in sort_form_fields %} + + + + + {% endfor %} +
+
+
+ {% trans %}Order{% endtrans %} +
+
+ + + + + + + + +
+
+
+ -
+ -
+
{% 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 %} @@ -28,6 +55,6 @@ {% else %}

{{ empty_message }}

{% endif %} -
-
+ + {% endblock body %} diff --git a/components/RightPanel/templates/right_panel/view.html.twig b/components/RightPanel/templates/right_panel/view.html.twig index a077438bd0..ff96414851 100644 --- a/components/RightPanel/templates/right_panel/view.html.twig +++ b/components/RightPanel/templates/right_panel/view.html.twig @@ -44,8 +44,10 @@ {{ "Additional options" | trans }} - {{ form_row(blocks['post_form'].language) }} - {{ form_row(blocks['post_form'].tag_use_canonical) }} +
+ {{ form_row(blocks['post_form'].language) }} + {{ form_row(blocks['post_form'].tag_use_canonical) }} +
{{ form_rest(blocks['post_form']) }} {{ form_end(blocks['post_form']) }} diff --git a/plugins/RepeatNote/templates/repeat/add_to_repeats.html.twig b/plugins/RepeatNote/templates/repeat/add_to_repeats.html.twig index 539b9aa606..99f55250eb 100644 --- a/plugins/RepeatNote/templates/repeat/add_to_repeats.html.twig +++ b/plugins/RepeatNote/templates/repeat/add_to_repeats.html.twig @@ -12,7 +12,7 @@ {{ parent() }}
- {{ noteView.macro_note_minimal(note) }} + {{ noteView.macro_note(note) }} {{ form(add_repeat) }}
diff --git a/plugins/RepeatNote/templates/repeat/remove_from_repeats.html.twig b/plugins/RepeatNote/templates/repeat/remove_from_repeats.html.twig index a41fdda3eb..c34188cfff 100644 --- a/plugins/RepeatNote/templates/repeat/remove_from_repeats.html.twig +++ b/plugins/RepeatNote/templates/repeat/remove_from_repeats.html.twig @@ -12,7 +12,7 @@ {{ parent() }}
- {{ noteView.macro_note_minimal(note) }} + {{ noteView.macro_note(note) }} {{ form(remove_repeat) }}
diff --git a/public/assets/default_theme/css/base.css b/public/assets/default_theme/css/base.css index 95d4d5b515..dafd2e27ee 100644 --- a/public/assets/default_theme/css/base.css +++ b/public/assets/default_theme/css/base.css @@ -1,5 +1,5 @@ html { - font-family: 'Open Sans',sans-serif; + font-family: 'Open Sans', sans-serif; scroll-margin-top: var(--xxl); } @@ -9,27 +9,27 @@ html { } .active { - font: 600 1.1em 'Poppins',sans-serif; + font: 600 1.1em Poppins, sans-serif; } .anchor-hidden { - width: 1px; height: 1px; overflow: hidden; + width: 1px; } .accessibility-menu { - display: block; - position: absolute; - z-index: 999; - top: -90%; - left: -90%; - width: 30%; - 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); + border-radius: var(--s); + display: block; + height: min-content; + left: -90%; + padding: var(--s); + position: absolute; + top: -90%; + width: 30%; + z-index: 999; } .accessibility-menu ul { @@ -38,8 +38,8 @@ html { } .accessibility-menu:focus-within:not(:active) { - top: var(--s); left: var(--s); + top: var(--s); } .heading-no-margin { @@ -47,20 +47,20 @@ html { } .page-header { - z-index: 1; - position: fixed; - display: flex; - top: 0; - height: var(--xxl); align-items: baseline; - padding: var(--s); - background: var(--gradient)!important; + background: var(--gradient) !important; box-shadow: var(--shadow); + display: flex; + height: var(--xxl); + padding: var(--s); + position: fixed; + top: 0; + z-index: 1; } .header-instance { - text-align: center; flex: 1; + text-align: center; } .header-instance * { @@ -68,30 +68,30 @@ html { } .page-content-wrapper { - position: relative; - top: var(--xxl); + justify-content: center; margin-left: auto; margin-right: auto; - justify-content: center; padding: var(--s) var(--s) 0; + position: relative; + top: var(--xxl); } .page-content { - margin-top: var(--s); display: flex; flex-direction: column; + margin-top: var(--s); width: 100%; } .markdown-blocks { + background-color: var(--background-card) !important; border-radius: 0 0 var(--s) var(--s); padding: var(--s); - background-color: var(--background-card)!important; } .markdown-blocks ul { - margin-left: 1em; list-style: disc; + margin-left: 1em; } .markdown-blocks ul li { @@ -99,10 +99,10 @@ html { } .doc-navigation { - border-radius: var(--s) var(--s) 0 0; + background-color: var(--background-card) !important; border-bottom: 0; + border-radius: var(--s) var(--s) 0 0; padding: var(--s); - background-color: var(--background-card)!important; } .doc-navigation ul { @@ -111,9 +111,9 @@ html { } .section-panel { + padding: var(--s); position: fixed; top: var(--xxl); - padding: var(--s); } .section-panel-left { @@ -125,9 +125,9 @@ html { } .section-panel .panel-content { + background: var(--background-hard); display: block; height: 100vh; - background: var(--background-hard); } @media only screen and (max-width: 1280px) { @@ -152,15 +152,15 @@ 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 { - z-index: 1; - width: 100vw; + #toggle-panel-left:checked ~ .section-panel-left, #toggle-panel-right:checked ~ .section-panel-right { left: 0; overflow-y: auto; + width: 100vw; + z-index: 1; } } @@ -169,8 +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 { @@ -182,20 +182,20 @@ html { } a[id|="anchor"]:target + .accessibility-target { - animation-name: highlight; animation-duration: 600ms; + animation-name: highlight; animation-timing-function: ease-in-out; } } @media only screen and (min-width: 1921px) { .page-header { - width: 66vw; align-self: center; + width: 66vw; } - label[for|="toggle-panel"],input[id|="toggle-panel"] { - display: none!important; + label[for|="toggle-panel"], input[id|="toggle-panel"] { + display: none !important; } .section-panel { @@ -220,7 +220,6 @@ html { opacity: 0; transform: translateY(-10px); } - 100% { opacity: unset; transform: none; @@ -232,7 +231,6 @@ html { opacity: 0; transform: translateY(-10px); } - 0% { opacity: unset; transform: none; @@ -241,35 +239,30 @@ html { @keyframes highlight { 0% { - box-shadow: initial; border-radius: var(--s); + box-shadow: initial; } - 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); + box-shadow: initial; } - 0% { - box-shadow: initial; border-radius: var(--s); + box-shadow: initial; } - 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); + box-shadow: initial; } -} \ 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 a4a62af670..a0bd73f3e7 100644 --- a/public/assets/default_theme/css/pages/feeds.css +++ b/public/assets/default_theme/css/pages/feeds.css @@ -1,45 +1,184 @@ -.feed-header { - display: flex; - margin-bottom: var(--m); - align-items: center; +.button-container { + background-color: var(--foreground); + border: none !important; + display: inline-block; + height: 14px; + opacity: .33; + width: 14px; } -.feed-header .feed-actions { - text-transform: capitalize; - margin-left: auto; +.button-container:focus, .button-container:hover { + background-color: var(--accent); + border: none !important; + opacity: 1; +} + +.button-container:not(:first-of-type) { + margin-left: var(--s); +} + +.favourite-button-container { + -moz-mask-image: url(../../icons/heart.svg); + -o-mask-image: url(../../icons/heart.svg); + -webkit-mask-image: url(../../icons/heart.svg); + mask-image: url(../../icons/heart.svg); +} + +.reply-button-container { + -moz-mask-image: url(../../icons/reply.svg); + -o-mask-image: url(../../icons/reply.svg); + -webkit-mask-image: url(../../icons/reply.svg); + mask-image: url(../../icons/reply.svg); +} + +.repeat-button-container { + -moz-mask-image: url(../../icons/repeat.svg); + -o-mask-image: url(../../icons/repeat.svg); + -webkit-mask-image: url(../../icons/repeat.svg); + mask-image: url(../../icons/repeat.svg); +} + +.delete-button-container { + -moz-mask-image: url(../../icons/delete.svg); + -o-mask-image: url(../../icons/delete.svg); + -webkit-mask-image: url(../../icons/delete.svg); + mask-image: url(../../icons/delete.svg); +} + +.embed { + border: unset; + display: flex; + padding: var(--s); +} + +.embed .p-author, .embed .p-name { + font-weight: 700; +} + +.embed .p-summary { + width: 60%; +} + +.embed .p-summary hr { + margin-bottom: var(--s); + margin-top: var(--s); +} + +.embed header { + margin-bottom: var(--m); + width: 100%; +} + +.embed img { + height: auto; + margin-right: var(--s); + width: 25%; +} + +.embed img { + max-height: min-content; + max-width: min-content; + padding: unset; +} + +.feed-actions-details summary, .note-actions-extra-details summary { + display: block; + height: var(--unit); + width: var(--unit); } .feed-actions-details-dropdown { font-size: .937rem; } -.notes hr { - margin-top: var(--s); +.feed-actions-details[open] > .feed-actions-details-dropdown a span { + float: right; + margin-left: 4px; } -.note-wrapper { - width: 100%; - height: inherit; - border-radius: var(--s) var(--s) 0 0; -} - -.note-sidebar { +.feed-actions-details[open] > .feed-actions-details-dropdown, .note-actions-extra-details[open] > summary + * { + background: var(--background-card); + border: 2px solid var(--border); + border-radius: var(--s); + box-shadow: var(--shadow); display: flex; - flex-direction: column; - align-items: center; + padding: 4px 8px; + position: absolute; + right: 0; + width: max-content; + z-index: 1; +} + +.feed-actions-details[open] > summary, .note-actions-extra-details[open] > summary { + opacity: 1 !important; +} + +.feed-actions-details[open] svg { + height: auto; + width: 1em; +} + +.feed-empty { + display: flex; +} + +.feed-empty .feed-background { + height: auto; + margin-left: auto; + margin-right: auto; + margin-top: var(--xxl); + opacity: 3%; + width: 40%; +} + +.feed-header { + display: flex; + margin-bottom: var(--m); +} + +.feed-header .feed-actions { + margin-left: auto; + text-transform: capitalize; +} + +.h-entry { + background-color: var(--background-card) !important; + border-radius: var(--s); + display: flex; +} + +.h-entry .embed[class*="p-"] { + padding: unset; +} + +.h-entry .replies { + border-left: 1px solid var(--border); + margin-bottom: var(--s); + padding: 0 var(--s); +} + +.h-entry a:focus { + text-decoration: underline; +} + +.h-entry figure { + background: var(--gradient); + border-radius: var(--s); + margin: unset; padding: var(--s); } -.note-sidebar > * { - max-width: 3rem; - max-height: 3rem; - width: 100%; - height: auto; - border-radius: 2px; +.h-entry img { + background: repeating-conic-gradient(#ffffff66 0deg 90deg, #ffffff33 0deg 180deg) 0 0/40px 40px round; } -.note-sidebar img { - background: unset!important; +.h-entry-language { + background: var(--gradient-backwards); + border-radius: 0 0 var(--s) 0; + color: var(--foreground); + float: right; + padding: 6px 12px; + position: relative; } .h-entry:not(:first-child) { @@ -47,139 +186,15 @@ } .h-entry:not(embed) { - box-shadow: inset 0 0 0 2px var(--border); -} - -.h-entry img { - background: repeating-conic-gradient(#ffffff66 0deg 90deg,#ffffff33 0deg 180deg) 0 0/40px 40px round; + border: 1px solid var(--border); } .h-entry[id^="note-anchor-"]:target { - border: 2px solid var(--accent)!important; + border: 2px solid var(--accent) !important; } -.embed { - display: flex; - flex-wrap: wrap; - padding: var(--s); - border: unset; -} - -.embed header { - width: 100%; - margin-bottom: var(--m); -} - -.embed img { - width: 25%; - height: auto; - margin-right: var(--s); -} - -.embed .p-summary { - width: 60%; -} - -.embed .p-author,.embed .p-name { - font-weight: 700; -} - -.embed img { - padding: unset; - max-width: min-content; - max-height: min-content; -} - -.embed .p-summary hr { +.h-feed hr, .notes hr { margin-top: var(--s); - margin-bottom: var(--s); -} - -.h-entry .embed[class*="p-"] { - padding: unset; -} - -.h-entry a:focus { - text-decoration: underline; -} - -.h-entry { - display: flex; - border-radius: var(--s); - background-color: var(--background-card)!important; -} - -.h-entry figure { - margin: unset; - object-fit: cover; - padding: var(--s); - background: var(--gradient); - border-radius: var(--s); -} - -.h-entry .replies { - margin-bottom: var(--s); - padding: 0 var(--s); - border-left: 1px solid var(--border); -} - -.note-replies-start { - font-size: .937rem; - font-weight: 700; - opacity: .5; -} - -.note-info,embed header { - display: flex; - border-bottom: unset; - border-radius: 0 var(--s) 0 0; - line-height: initial; - padding: 4px var(--s) 4px 0; -} - -.note-info { - margin-top: 2px; - margin-right: 2px; - background: var(--gradient-backwards); -} - -.note-info > * { - align-items: center; -} - -.note-info-start { - display: flex; - flex: 1; - flex-wrap: wrap; -} - -.note-info-start > * { - word-break: break-all; -} - -.note-conversation-info { - margin-left: 4px; -} - -.note-author-url,.note-conversation-url,.note-url { - font-style: italic; -} - -embed header { - justify-content: space-between; -} - -.note-author-url { - float: left; - margin-left: 4px; -} - -.note-author-nickname,.note-conversation-info { - opacity: .5; -} - -.note-author-fullname { - font-weight: 700; } .note-actions { @@ -192,167 +207,83 @@ embed header { margin-right: 2px; } -.note-actions-separator { - display: inline-block; - background: var(--foreground); - opacity: .33; - width: 1px; - height: 1em; - margin-left: 2px; - margin-right: 2px; -} - -.note-actions-extra-details { +.note-actions-extra-details ul { display: flex; flex-direction: column; } -.feed-actions-details summary,.note-actions-extra-details summary { - display: block; - width: var(--unit); - height: var(--unit); +.note-actions-extra-details hr { + margin: unset; } .note-actions-extra-details summary { opacity: .33; } -.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 + * { - z-index: 1; - display: flex; - position: absolute; - right: 0; - flex-direction: column; - padding: 4px 8px; - border: 2px solid var(--border); - border-radius: var(--s); - background: var(--background-card); - 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; -} - .note-actions-extra-details[open] > summary + * > li { - line-height: 2; font-size: .937rem; + line-height: 2; } -.note-actions-extra-details hr { - margin: 8px!important; +.note-actions-separator { + background: var(--foreground); + display: inline-block; + height: 1em; + margin-left: 2px; + margin-right: 2px; + opacity: .33; + width: 1px; } .note-actions-set { - opacity: 1!important; -} - -.button-container { - border: none!important; - mask-repeat: no-repeat!important; - mask-size: contain!important; - display: inline-block; - width: 14px; - height: 14px; - background-color: var(--foreground); - 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; - 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); -} - -.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); -} - -.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); -} - -.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); -} - -.note-content { - display: flex; - flex-direction: column; - border-radius: 0 0 var(--s) var(--s); - padding: 0 4px 4px 0; -} - -.note-text a { - text-decoration: underline!important; + opacity: 1 !important; } .note-attachments { display: flex; - justify-items: flex-start; } .note-attachments-unit { - display: flex; - flex-wrap: wrap; - max-width: max-content; border-radius: var(--s); + display: flex; + max-width: max-content; padding: var(--s); - align-self: flex-start; +} + +.note-attachments-unit > figure figcaption { + display: flex; + word-break: break-all; } .note-attachments-unit:not(:only-child) { margin-right: var(--s); } -.note-attachments-unit > figure figcaption { - display: flex; - word-break: break-all; - margin-bottom: var(--s); +.note-author-fullname { + font-weight: 700; +} + +.note-author-nickname, .note-conversation-info { + opacity: .5; +} + +.note-author-url { + float: left; + margin-left: 4px; +} + +.note-author-url, .note-conversation-url, .note-url { + font-style: italic; } .note-complementary { + background: var(--gradient) !important; + border-left: 1px solid var(--accent); 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; + padding-left: var(--s); + border-radius: 0 0 0 var(--s); } .note-complementary a { @@ -363,27 +294,68 @@ embed header { margin-bottom: var(--s); } -.h-entry-language { - position: relative; - float: right; - padding: 6px 12px; - background: var(--gradient-backwards); - color: var(--foreground); - border-radius: 0 0 var(--s) 0; +.note-content { + border-radius: 0 0 var(--s) var(--s); + display: block; + padding: 0 4px 4px 0; } -.feed-empty { +.note-conversation-info { + margin-left: 4px; +} + +.note-info { display: flex; - flex-direction: column; + justify-content: space-between; + background: var(--gradient-backwards); } -.feed-empty .feed-background { - opacity: 3%; - width: 40%; +.note-info, embed header { + border-bottom: unset; + border-radius: 0 var(--s) 0 0; + display: flex; + line-height: initial; + padding: 4px var(--s) 4px 0; +} + +.note-info-start { + display: flex; +} + +.note-info-start > * { + word-break: break-all; +} + +.note-replies-start { + font-size: .937rem; + font-weight: 700; + opacity: .5; +} + +.note-sidebar { + display: flex; + padding: var(--s); +} + +.note-sidebar > * { + border-radius: 2px; height: auto; - margin-top: var(--xxl); - margin-left: auto; - margin-right: auto; + max-height: 3rem; + max-width: 3rem; + width: 100%; +} + +.note-sidebar img { + background: unset !important; +} + +.note-text a { + text-decoration: underline !important; +} + +.note-wrapper { + height: inherit; + width: 100%; } @media only screen and (max-width: 1280px) { @@ -392,7 +364,7 @@ embed header { } .note-sidebar > * { - max-width: 2rem; max-height: 2rem; + max-width: 2rem; } -} \ No newline at end of file +} diff --git a/public/assets/default_theme/css/pages/settings.css b/public/assets/default_theme/css/pages/settings.css index d4873aa80e..9eedb6449e 100644 --- a/public/assets/default_theme/css/pages/settings.css +++ b/public/assets/default_theme/css/pages/settings.css @@ -1,18 +1,18 @@ .section-settings { background: var(--background-card); - border: 2px solid var(--border); + border: 1px solid var(--border); box-shadow: var(--shadow); } -.section-settings,.section-settings-details { - margin-bottom: .6rem; +.section-settings, .section-settings-details { border-radius: .6rem; - padding: .6rem; box-sizing: border-box; + margin-bottom: .6rem; + padding: .6rem; } .section-settings-details { - border: 2px solid var(--border); + border: 1px solid var(--border); } .section-settings-details-title { @@ -32,11 +32,11 @@ } .section-settings hr { - margin-top: .6rem; margin-bottom: .6rem; + margin-top: .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; } @@ -50,11 +50,11 @@ } .section-settings-details[open] summary:after { + animation: fadeOut 200ms cubic-bezier(0, 0.55, 0.45, 1); transform: rotate(180deg); - animation: fadeOut 200ms cubic-bezier(0,0.55,0.45,1); } .section-settings-details:not([open]) summary:after { + animation: fadeIn 200ms cubic-bezier(0, 0.55, 0.45, 1); transform: initial; - 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 b9edf8f248..5ae902f386 100644 --- a/public/assets/default_theme/css/reset.css +++ b/public/assets/default_theme/css/reset.css @@ -1,44 +1,47 @@ * { - box-sizing: border-box!important; + box-sizing: border-box !important; max-width: 100%; } -body,html { - -webkit-font-smoothing: antialiased; +body, html { -moz-osx-font-smoothing: grayscale; - background-color: var(--background-hard); + -webkit-font-smoothing: antialiased; background-attachment: fixed; + background-color: var(--background-hard); display: flex; flex-direction: column; - font: var(--unit) 'Open Sans',sans-serif; + font-family: "var(--unit) 'Open Sans'", sans-serif; + font-style: normal; + font-variant: normal; + font-weight: normal; } -body,input,select,textarea { +body, input, select, textarea { color: var(--foreground); } -:link,:visited { - text-decoration: none; +:link, :visited { color: currentColor; + text-decoration: none; } hr { all: unset; + background-color: var(--border) !important; display: block; height: 1px; - background-color: var(--border)!important; } -menu,ul { - padding: unset; - margin: unset; +menu, ul { list-style: none; + margin: unset; + padding: unset; } -blockquote,body,fieldset,form,html,input,pre,textarea { +blockquote, body, fieldset, form, html, input, pre, textarea { + border: 0; margin: 0; padding: 0; - border: 0; } fieldset { @@ -49,7 +52,7 @@ section { all: unset; } -:link img,:visited img,a img { +:link img, :visited img, a img { border: 0; } @@ -66,7 +69,7 @@ address { } details summary { - cursor: pointer!important; + cursor: pointer !important; } details summary > * { @@ -91,31 +94,31 @@ 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 { - margin: 3rem 0 1.38rem; - font-family: 'Poppins',sans-serif; +h1, h2, h3, h4, h5, legend { + font-family: 'Poppins', sans-serif; font-weight: 600; line-height: 1.3; + margin: 3rem 0 1.38rem; } -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; } h1 { - margin-top: 0; font-size: 1.383rem; + margin-top: 0; } h2 { @@ -138,21 +141,21 @@ legend { font-size: 1.296em; } -.text_small,small { - font: .937rem 'Open Sans',sans-serif; +.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; } ul { - text-decoration: none; + list-style: none; margin: 0; padding: 0; - list-style: none; + text-decoration: none; } li { @@ -160,7 +163,7 @@ li { padding: 0; } -a:focus,a:hover { +a:focus, a:hover { text-decoration: underline; } diff --git a/public/assets/default_theme/css/root.css b/public/assets/default_theme/css/root.css index 26cc93bd28..02ad051ee1 100644 --- a/public/assets/default_theme/css/root.css +++ b/public/assets/default_theme/css/root.css @@ -11,7 +11,7 @@ --foreground: #f0f6f6; --background-hard: #141216; --background-card: #131217; - --border: #201f25; + --border: #26242D; --accent: #5ddbcf; --shadow: 0 5px 20px -10px rgba(255,255,255,0.1)!important; --shadow-inset-accent: inset 0 0 0 2px var(--accent); diff --git a/public/assets/default_theme/css/widgets/buttons.css b/public/assets/default_theme/css/widgets/buttons.css index 0f23b89ba3..5306fde0af 100644 --- a/public/assets/default_theme/css/widgets/buttons.css +++ b/public/assets/default_theme/css/widgets/buttons.css @@ -3,14 +3,14 @@ input { } input[type=checkbox] { - display: inline-block; - cursor: pointer; - width: 1em !important; - height: 1em !important; background: var(--accent) !important; + cursor: pointer; + display: inline-block; + height: 1em !important; + width: 1em !important; } -input[type=checkbox]:not(:hover, :focus) { +input[type=checkbox]:not(:hover,:focus) { background: var(--foreground) !important; } @@ -19,135 +19,137 @@ input[type=checkbox] { } input[type=radio] { + background: var(--border); + border-radius: 50%; + box-shadow: inset 0 0 0 2px var(--background-hard) !important; display: inline-block; - width: var(--s) !important; height: var(--s) !important; padding-right: 4px !important; - background: var(--foreground); - box-shadow: inset 0 0 0 2px var(--foreground) !important; - border-radius: 50%; + width: var(--s) !important; } input[type=radio]:checked { - background: var(--background-hard); - box-shadow: inset 0 0 0 2px var(--accent) !important; + background: var(--foreground); + box-shadow: inset 0 0 0 2px var(--foreground) !important; } input[type=file] { all: unset; + background: var(--gradient) !important; + border-radius: var(--s); display: block; font-family: 'Open Sans', sans-serif !important; - font-weight: normal !important; + font-weight: 400 !important; padding: unset !important; - border-radius: var(--s); - background: var(--gradient) !important; } input[type=checkbox] { + -moz-mask-image: url(../../icons/check-off.svg) !important; + -o-mask-image: url(../../icons/check-off.svg) !important; + -webkit-mask-image: url(../../icons/check-off.svg) !important; background-size: contain !important; margin-right: 4px !important; - -webkit-mask-image: url("../../icons/check-off.svg") !important; - -o-mask-image: url("../../icons/check-off.svg") !important; - -moz-mask-image: url("../../icons/check-off.svg") !important; - mask-image: url("../../icons/check-off.svg") !important; + mask-image: url(../../icons/check-off.svg) !important; } input[type=checkbox]:checked { - -webkit-mask-image: url("../../icons/check-on.svg") !important; - -o-mask-image: url("../../icons/check-on.svg") !important; - -moz-mask-image: url("../../icons/check-on.svg") !important; - mask-image: url("../../icons/check-on.svg") !important; + -moz-mask-image: url(../../icons/check-on.svg) !important; + -o-mask-image: url(../../icons/check-on.svg) !important; + -webkit-mask-image: url(../../icons/check-on.svg) !important; + mask-image: url(../../icons/check-on.svg) !important; } input[type=color] { appearance: none; - width: var(--xxl); - height: var(--xxl); background-color: transparent; border: none; cursor: pointer; + height: var(--xxl); + width: var(--xxl); } input[type=color]::-webkit-color-swatch { - border-radius: var(--s); border: none; + border-radius: var(--s); } input[type=color]::-moz-color-swatch { - border-radius: var(--s); border: none; + border-radius: var(--s); } ::file-selector-button { - cursor: pointer; background-color: unset; border: unset; - font-family: 'Open Sans', sans-serif !important; - font-weight: bold !important; color: var(--foreground); + cursor: pointer; fill: var(--foreground); + font-family: 'Open Sans', sans-serif !important; + font-weight: 700 !important; margin: 3px; } -*|*::-moz-button-content { +*|::-moz-button-content { all: unset !important; } button { - display: block !important; cursor: pointer !important; + display: block !important; margin-left: auto !important; margin-top: var(--s); } .alert button { + border-color: #ff6347 !important; cursor: pointer !important; margin-top: unset !important; - border-color: tomato !important; } button, label { - font-family: 'Poppins', sans-serif; - font-weight: bold !important; color: currentColor; } +button { + font-family: 'Poppins', sans-serif; + font-weight: 700 !important; +} select::-ms-expand { display: none; } button, input, select, textarea { + border: 1px solid var(--border) !important; + border-radius: var(--s); display: inline-block; - overflow: hidden; font-size: inherit; line-height: initial !important; - padding: 6px 8px !important; - border-radius: var(--s); - border: 2px solid var(--border) !important; - width: auto; max-width: border-box !important; + overflow: hidden; + padding: 6px 8px !important; + width: auto; } 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; } select { - cursor: pointer; background-repeat: no-repeat; border-radius: var(--s); + cursor: pointer; max-width: 100% !important; } select[multiple] { - overflow-y: scroll; height: 20rem; + overflow-y: scroll; } 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 50901d68ec..99e148fa6b 100644 --- a/public/assets/default_theme/css/widgets/sections.css +++ b/public/assets/default_theme/css/widgets/sections.css @@ -1,242 +1,72 @@ -.profile { - font-family: 'Open Sans', sans-serif; - margin-bottom: var(--s); - border: 2px solid var(--border); - border-radius: var(--s); - padding: var(--unit); - background: var(--gradient) !important; +.add-actor-button-container { + -moz-mask-image: url(../../icons/add-actor.svg); + -o-mask-image: url(../../icons/add-actor.svg); + -webkit-mask-image: url(../../icons/add-actor.svg); + mask-image: url(../../icons/add-actor.svg); } -.profile header { - display: flex; +.alert, .alert-danger, .form-error, .form-row-widget-error { + align-items: center; + background-color: #FF634733; + border: solid 2px #ff6347; + border-radius: var(--s); + display: inline-flex; + font-style: italic; justify-content: space-between; - flex-wrap: wrap; - vertical-align: middle; + margin-bottom: 6px; + margin-top: 6px; + padding: 2px 6px; } -.profile-info { - display: flex; - flex-wrap: wrap; -} - -.profile-info .avatar { - flex: 0.5; -} - -.profile-info-url { - display: block; -} - -.profile-info-url-nickname { - font-size: var(--m); -} - -.profile-info-url-remote { - opacity: 0.66; -} - -.profile-info-url > * { - display: block; -} - -.profile-info section { - flex: 1; -} - -.profile-stats { - align-self: center; - margin-left: auto; - text-align: right; - font-size: 0.937rem; - opacity: 0.66; -} - -.profile-stats-subscribers, .profile-stats-subscriptions { - display: block; -} - -.profile-stats-subscribers strong, .profile-stats-subscriptions strong { - margin-right: 4px; -} - -.profile-bio, .profile-info-url { - word-break: break-all; -} - -.profile-bio { - margin-top: 4px; -} - -.profile-tags { - margin: 4px unset unset; -} - -.profile-navigation > * { - display: block; -} - -.profile-extra-actions { - margin-top: var(--s); - margin-right: var(--s); - background: var(--gradient), var(--background-hard); - border: 2px solid var(--border); - border-radius: var(--s); - padding: 4px 8px; - font-weight: bold; - display: inline-block; +.avatar { + border-radius: 2px; + height: auto; + margin-right: 5px; + max-height: 4rem; + max-width: 4rem; + min-width: var(--xxl); + width: 100%; } .button-container { + background-color: var(--foreground); + border: none !important; + display: inline-block; + height: var(--unit); + mask-repeat: no-repeat !important; + mask-size: cover !important; + opacity: .33; + width: var(--unit); +} + +.button-container:focus, .button-container:hover { + background-color: var(--accent); border: none !important; mask-repeat: no-repeat !important; mask-size: cover !important; - display: inline-block; - width: var(--unit); - height: var(--unit); - background-color: var(--foreground); - opacity: 0.33; + opacity: 1; } .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; - opacity: 1; - background-color: var(--accent); -} - -.add-actor-button-container { - -o-mask-image: url("../../icons/add-actor.svg"); - -moz-mask-image: url("../../icons/add-actor.svg"); - -webkit-mask-image: url("../../icons/add-actor.svg"); - mask-image: url("../../icons/add-actor.svg"); -} - -.remove-actor-button-container { - -o-mask-image: url("../../icons/remove-actor.svg"); - -moz-mask-image: url("../../icons/remove-actor.svg"); - -webkit-mask-image: url("../../icons/remove-actor.svg"); - mask-image: url("../../icons/remove-actor.svg"); -} - -.avatar { - max-width: 4rem; - max-height: 4rem; - min-width: var(--xxl); - width: 100%; - height: auto; - margin-right: 5px; - border-radius: 2px; -} - -.section-title { - font-weight: 700; - margin-bottom: unset; -} - -.frame-section { - display: flex; - flex-direction: column; - border-radius: var(--s); - margin-bottom: var(--m); - background-color: var(--background-card) !important; - box-shadow: var(--shadow); - border: 2px solid var(--border) !important; - border-radius: var(--s); -} - -.frame-section hr { - margin-bottom: var(--s); -} - -.frame-section-padding { - padding: var(--s); -} - -.frame-section-paging { +.container-block { display: block; - font-family: 'Poppins', sans-serif; - font-weight: 700; - padding: 6px 12px; - margin-top: var(--s); - margin-left: auto; } -.frame-section-title { - margin-left: unset; -} - -.frame-section-button-like { - font-family: 'Poppins', sans-serif; - font-weight: 700; - display: block; - width: max-content; - align-self: end; - background: var(--gradient); - padding: 6px 8px; - border-radius: var(--s); - border: 2px solid var(--border); -} - -.section-details-title summary { - padding: 6px 12px; -} - -.section-details-subtitle summary { - padding: 2px 8px; +.container-grid { + display: grid; + gap: 10px; + grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); } .details-subtitle-summary + * { - border-radius: var(--s); background: var(--gradient); + border-radius: var(--s); padding: 2px 8px; } -.section-form .section-details-subtitle summary { - border: 2px solid var(--border); -} - -.section-details-subtitle summary, .section-details-title summary { - display: inline-block; - width: 100%; - border-radius: var(--s); - background: var(--gradient); -} - -.section-details-subtitle summary > *, .section-details-title summary > * { - display: inline-block; - vertical-align: baseline; -} - -.section-details-subtitle summary > *:last-child, .section-details-title summary > *:last-child { - margin-right: 4px; -} - -.section-details-subtitle summary:after, .section-details-title summary:after { - content: "\2193"; - float: right; -} - -.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-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); -} - -.details-subtitle-summary ~ [class|="form-row"] { - font-size: 0.937rem; - max-font-size: 0.937rem !important; - padding: var(--s); -} - .details-subtitle-summary a, .details-title-summary a { line-height: initial; } @@ -245,97 +75,12 @@ margin-left: 4px; } -.section-details-subtitle .section-details-subtitle:not(:last-of-type) { - margin-bottom: var(--s); -} - -.section-form { - display: flex; - flex-direction: column; - background-color: var(--background-hard); - border-radius: var(--s); - max-width: 100%; - width: 100%; +.details-subtitle-summary ~ [class|="form-row"] { + font-size: .937rem; + max-font-size: .937rem !important; padding: var(--s); } -.section-form-legend { - margin-top: unset; - margin-bottom: var(--s); - font-weight: bold; -} - -.form-row { - display: flex; - flex-direction: column; - margin-bottom: var(--s); -} - -.form-row-widget { - display: block; - width: 100%; -} - -.form-row-help { - margin-bottom: unset; -} - -textarea.form-row-widget { - height: 7rem; - resize: vertical; -} - -.form-search { - display: inline-block; - padding: unset; - margin-bottom: var(--m); -} - -.form-search label { - display: block; - opacity: 0; - width: 0; - height: 0; -} - -.form-search span { - display: inline-flex; - width: 100%; -} - -.form-search .form-row { - margin-bottom: unset; - width: 100%; -} - -.form-search span input[type='text'] { - margin: unset; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - height: 100%; -} - -.form-search span button { - margin: unset; - border-left: none !important; - border-top-left-radius: 0; - border-bottom-left-radius: 0; - height: 100%; -} - -.alert, .alert-danger, .form-error, .form-row-widget-error { - display: inline-flex; - align-items: center; - justify-content: space-between; - font-style: italic; - border: solid 2px #ff6347; - background-color: #FF634733; - border-radius: var(--s); - padding: 2px 6px; - margin-top: 6px; - margin-bottom: 6px; -} - .footer ul { display: flex; flex-wrap: wrap; @@ -343,4 +88,282 @@ textarea.form-row-widget { .footer ul li { margin-right: var(--s); +} + +.form-row { + display: flex; + flex-direction: column; + margin-bottom: var(--s); +} + +.form-row-help { + font-style: italic; + margin-bottom: unset; +} + +.form-row-widget { + display: block; + width: 100%; +} + +.form-search { + display: inline-block; + margin-bottom: var(--m); + padding: unset !important; +} + +.form-search .form-row { + margin-bottom: unset; + width: 100%; +} + +.form-search label { + display: block; + height: 0; + opacity: 0; + width: 0; +} + +.form-search span { + display: inline-flex; + width: 100%; +} + +.form-search span button { + border-bottom-left-radius: 0; + border-left: none !important; + border-top-left-radius: 0; + height: 100%; + margin: unset; +} + +.form-search span input[type='text'] { + border-bottom-right-radius: 0; + border-top-right-radius: 0; + height: 100%; + margin: unset; +} + +.frame-section { + background-color: var(--background-card) !important; + border: 1px solid var(--border) !important; + border-radius: var(--s); + box-shadow: var(--shadow); + display: flex; + flex-direction: column; + margin-bottom: var(--m); +} + +.frame-section hr { + margin-bottom: var(--s); +} + +.frame-section-button-like { + align-self: end; + background: var(--gradient); + border: 1px solid var(--border); + border-radius: var(--s); + display: block; + font-family: 'Poppins', sans-serif; + font-weight: 700; + padding: 6px 8px; + width: max-content; +} + +.frame-section-padding { + padding: var(--s); +} + +.frame-section-paging { + display: block; + font-family: 'Poppins', sans-serif; + font-weight: 700; + margin-left: auto; + margin-top: var(--s); + padding: 6px 12px; +} + +.frame-section-title { + margin-left: unset; +} + +.profile { + background: var(--gradient) !important; + border: 1px solid var(--border); + border-radius: var(--s); + font-family: 'Open Sans', sans-serif; + margin-bottom: var(--s); + padding: var(--unit); +} + +.profile header { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + vertical-align: middle; +} + +.profile-bio { + margin-top: 4px; +} + +.profile-bio, .profile-info-url { + word-break: break-all; +} + +.profile-extra-actions { + background: var(--gradient), var(--background-hard); + border: 1px solid var(--border); + border-radius: var(--s); + display: inline-block; + font-weight: 700; + margin-right: var(--s); + margin-top: var(--s); + padding: 4px 8px; +} + +.profile-info { + display: flex; + flex-wrap: wrap; +} + +.profile-info .avatar { + flex: .5; +} + +.profile-info section { + flex: 1; +} + +.profile-info-url { + display: block; +} + +.profile-info-url > * { + display: block; +} + +.profile-info-url-nickname { + font-size: var(--m); +} + +.profile-info-url-remote { + opacity: .66; +} + +.profile-navigation > * { + display: block; +} + +.profile-stats { + align-self: center; + font-size: .937rem; + margin-left: auto; + opacity: .66; + text-align: right; +} + +.profile-stats-subscribers strong, .profile-stats-subscriptions strong { + margin-right: 4px; +} + +.profile-stats-subscribers, .profile-stats-subscriptions { + display: block; +} + +.profile-tags { + margin: 4px unset unset; +} + +.remove-actor-button-container { + -moz-mask-image: url(../../icons/remove-actor.svg); + -o-mask-image: url(../../icons/remove-actor.svg); + -webkit-mask-image: url(../../icons/remove-actor.svg); + mask-image: url(../../icons/remove-actor.svg); +} + +.section-details-subtitle .section-details-subtitle:not(:last-of-type) { + margin-bottom: var(--s); +} + +.section-details-subtitle summary { + padding: 2px 8px; +} + +.section-details-subtitle summary > *, .section-details-title summary > * { + display: inline-block; + vertical-align: baseline; +} + +.section-details-subtitle summary > :last-child, .section-details-title summary > :last-child { + margin-right: 4px; +} + +.section-details-subtitle summary, .section-details-title summary { + background: var(--gradient); + border-radius: var(--s); + display: inline-block; + width: 100%; +} + +.details-summary-title:after { + content: "\2193"; + float: right; +} +.details-summary-subtitle:after { + content: "\2191"; + float: right; +} + +.section-details-subtitle:not([open]) > .details-summary-subtitle:after { + animation: fadeOut 200ms cubic-bezier(0, 0.55, 0.45, 1); + transform: rotate(180deg); +} + +.section-details-subtitle[open] > .details-summary-subtitle:after { + animation: fadeIn 200ms cubic-bezier(0, 0.55, 0.45, 1); + transform: initial; +} + +.section-details-title:not([open]) > .details-summary-title:after { + animation: fadeIn 200ms cubic-bezier(0, 0.55, 0.45, 1); + transform: initial; +} + +.section-details-title[open] > .details-summary-title:after { + animation: fadeOut 200ms cubic-bezier(0, 0.55, 0.45, 1); + transform: rotate(180deg); +} + +.details-summary-title { + padding: 6px 12px; +} + +.section-form { + background-color: var(--background-hard); + border-radius: var(--s); + display: block; + max-width: 100%; + padding: var(--s); + width: 100%; +} + +.section-form .section-details-subtitle summary { + border: 1px solid var(--border); +} + +.section-form-legend { + font-weight: 700; + margin-bottom: var(--s); + margin-top: unset; +} + +.section-title { + font-weight: 700; + margin-bottom: unset; +} + +textarea.form-row-widget { + height: 7rem; + resize: vertical; } \ No newline at end of file diff --git a/templates/base.html.twig b/templates/base.html.twig index 0e2cba3920..e29d03b3dd 100644 --- a/templates/base.html.twig +++ b/templates/base.html.twig @@ -69,11 +69,11 @@

-
+
- {% trans %}Combined with the previous keybinding, the keyboard key + {% trans %}Combined with the previous keybinding, the keyboard key Z returns focus to this menu.{% endtrans %} - {% trans %}Further access keys are provided via:{% endtrans %} + {% trans %}Further access keys are provided via:{% endtrans %}