@@ -3,7 +3,7 @@ | |||
{% block title %}{{ title }}{% endblock %} | |||
{% block body %} | |||
<section class="section-widget section-padding"> | |||
<section class="frame-section frame-section-padding"> | |||
<h1 class="section-title">{{ title }}</h1> | |||
<div> | |||
@@ -18,7 +18,7 @@ | |||
</form> | |||
</div> | |||
<div class="section-padding"> | |||
<div class="frame-section-padding"> | |||
{% if actors is defined and actors is not empty %} | |||
{% for actor in actors %} | |||
{% block profile_view %}{% include 'cards/profile/view.html.twig' %}{% endblock profile_view %} | |||
@@ -3,8 +3,8 @@ | |||
{% block title %}{{ page_title | trans }}{% endblock %} | |||
{% block body %} | |||
<div class="section-widget section-padding"> | |||
<h2 class="section-widget-title">{{ page_title | trans }}</h2> | |||
<div class="frame-section frame-section-padding"> | |||
<h2 class="frame-section-title">{{ page_title | trans }}</h2> | |||
{% block collection_items %} | |||
{% endblock collection_items %} | |||
</div> | |||
@@ -3,14 +3,14 @@ | |||
{% block title %}{{ page_title | trans }}{% endblock %} | |||
{% block body %} | |||
<div class="section-widget section-padding"> | |||
<h2 class="section-widget-title">{{ page_title | trans }}</h2> | |||
<div class="frame-section frame-section-padding"> | |||
<h2 class="frame-section-title">{{ page_title | trans }}</h2> | |||
{% if add_collection %} | |||
<div class="section-widget section-form"> | |||
<div class="frame-section section-form"> | |||
{{ form(add_collection) }} | |||
</div> | |||
{% endif %} | |||
<div class="section-widget collections-list"> | |||
<div class="frame-section collections-list"> | |||
<h3>{{ list_title | trans }}</h3> | |||
{% for col in collections %} | |||
<div class="collection-item"> | |||
@@ -14,12 +14,11 @@ | |||
{% endfor %} | |||
{% if notes is defined %} | |||
<article> | |||
<header class="feed-header"> | |||
{% if page_title is defined %} | |||
<h1 class="heading-no-margin">{{ page_title | trans }}</h1> | |||
{% else %} | |||
<h1 class="heading-no-margin">{{ 'Notes' | trans }}</h1> | |||
<h3 class="heading-no-margin">{{ 'Notes' | trans }}</h3> | |||
{% endif %} | |||
<nav class="feed-actions"> | |||
<details class="feed-actions-details"> | |||
@@ -38,20 +37,19 @@ | |||
</header> | |||
{% if notes is not empty %} | |||
{# Backwards compatibility with hAtom 0.1 #} | |||
<section class="feed h-feed hfeed notes" tabindex="0" role="feed"> | |||
{% for conversation in notes %} | |||
{% block current_note %} | |||
{% if conversation is instanceof('array') %} | |||
{{ noteView.macro_note(conversation['note'], conversation['replies']) }} | |||
{% else %} | |||
{{ noteView.macro_note(conversation) }} | |||
{% endif %} | |||
<hr tabindex="0" title="{{ 'End of note and replies.' | trans }}"> | |||
{% endblock current_note %} | |||
{% endfor %} | |||
</section> | |||
{# Backwards compatibility with hAtom 0.1 #} | |||
<section class="feed h-feed hfeed notes" tabindex="0" role="feed"> | |||
{% for conversation in notes %} | |||
{% block current_note %} | |||
{% if conversation is instanceof('array') %} | |||
{{ noteView.macro_note(conversation['note'], conversation['replies']) }} | |||
{% else %} | |||
{{ noteView.macro_note(conversation) }} | |||
{% endif %} | |||
<hr tabindex="0" title="{{ 'End of note and replies.' | trans }}"> | |||
{% endblock current_note %} | |||
{% endfor %} | |||
</section> | |||
{% endif %} | |||
</article> | |||
{% endif %} | |||
{% endblock body %} |
@@ -1,6 +1,6 @@ | |||
<section class="section-widget collections"> | |||
<details class="section-widget-title-details" title="Expand if you want to access more options."> | |||
<summary class="section-title-summary"> | |||
<section class="frame-section collections"> | |||
<details class="section-details-title" title="Expand if you want to access more options."> | |||
<summary class="details-title-summary"> | |||
<h2>{{ctitle}}</h2> | |||
</summary> | |||
{% if has_collections %} | |||
@@ -8,9 +8,9 @@ | |||
{{ form(add_form) }} | |||
</section> | |||
<details class="section-widget-subtitle-details section-padding" | |||
<details class="section-details-subtitle frame-section-padding" | |||
title="Expand if you want to access more options."> | |||
<summary class="section-subtitle-summary"> | |||
<summary class="details-subtitle-summary"> | |||
<strong>{% trans %}Other options{% endtrans %}</strong> | |||
</summary> | |||
<section class="section-form"> | |||
@@ -1,14 +1,14 @@ | |||
{% extends 'collection/notes.html.twig' %} | |||
{% block body %} | |||
<div class="section-widget section-padding"> | |||
<div class="frame-section frame-section-padding"> | |||
{% if is_muted %} | |||
<span class="section-padding alert"> | |||
<span class="frame-section-padding alert"> | |||
<label>Do you wish to <b>unmute</b> this conversation?</label> | |||
{{ form(form) }} | |||
</span> | |||
{% else %} | |||
<span class="section-padding alert"> | |||
<span class="frame-section-padding alert"> | |||
<label>Do you wish to <b>mute</b> this conversation?</label> | |||
{{ form(form) }} | |||
</span> | |||
@@ -1,7 +1,7 @@ | |||
{% extends 'base.html.twig' %} | |||
{% block body %} | |||
<div class="section-widget section-padding"> | |||
<div class="frame-section frame-section-padding"> | |||
<h3>{{ 'Put the languages in the order you\'d like to see them in your language selection dropdown, when posting' | trans}}</h3> | |||
{{ form(form) }} | |||
</div> | |||
@@ -6,7 +6,7 @@ | |||
{% endblock stylesheets %} | |||
{% block body %} | |||
<div class="section-widget"> | |||
<div class="frame-section"> | |||
<form class="section-form" action="{{ path('edit_feeds') }}" method="post"> | |||
<fieldset> | |||
@@ -17,7 +17,7 @@ | |||
{{ form_errors(edit_feeds) }} | |||
{% for child in edit_feeds.children %} | |||
{% if 'row_url' in child.vars.block_prefixes %} | |||
<div class="section-widget section-padding"> | |||
<div class="frame-section frame-section-padding"> | |||
{{ form_label(child) }} | |||
{{ form_widget(child) }} | |||
{% elseif 'row_title' in child.vars.block_prefixes %} | |||
@@ -4,9 +4,9 @@ | |||
<input type="checkbox" id="toggle-panel-left" tabindex="0" title="{{ 'Open left panel' | trans }}"> | |||
<aside class="section-panel section-panel-left"> | |||
<article class="panel-content accessibility-target"> | |||
<section class="panel-content accessibility-target"> | |||
{% if app.user %} | |||
<section class='section-widget section-padding' title="{{ 'Your profile information.' | trans }}"> | |||
<section class='frame-section frame-section-padding' title="{{ 'Your profile information.' | trans }}"> | |||
{% block profile_view %}{% include 'cards/profile/view.html.twig' with { actor: current_actor } %}{% endblock profile_view %} | |||
{{ block("profile_current_actor", "cards/navigation/view.html.twig") }} | |||
</section> | |||
@@ -19,6 +19,6 @@ | |||
{{ block("feeds", "cards/navigation/view.html.twig") }} | |||
{{ block("footer", "cards/navigation/view.html.twig") }} | |||
</article> | |||
</section> | |||
</aside> | |||
{% endblock leftpanel %} |
@@ -4,21 +4,19 @@ | |||
<input type="checkbox" id="toggle-panel-right" tabindex="0" title="{{ 'Open right panel' | trans }}"> | |||
<aside class="section-panel section-panel-right"> | |||
<article class="panel-content accessibility-target"> | |||
<section> | |||
{% set prepend_right_panel = handle_event('PrependRightPanel', request) %} | |||
{% for widget in prepend_right_panel %} | |||
{{ widget | raw }} | |||
{% endfor %} | |||
</section> | |||
<section class="panel-content accessibility-target"> | |||
{% set prepend_right_panel = handle_event('PrependRightPanel', request) %} | |||
{% for widget in prepend_right_panel %} | |||
{{ widget | raw }} | |||
{% endfor %} | |||
{% set current_path = app.request.get('_route') %} | |||
{% set blocks = handle_event('AppendRightPostingBlock', request) %} | |||
{% if blocks['post_form'] is defined %} | |||
<section class="section-widget" title="{{ 'Create a new note.' | trans }}"> | |||
<details class="section-widget-title-details" open="open" | |||
<section class="frame-section" title="{{ 'Create a new note.' | trans }}"> | |||
<details class="section-details-title" open="open" | |||
title="{{ 'Expand if you want to access more options.' | trans }}"> | |||
<summary class="section-title-summary"> | |||
<summary class="details-summary-title"> | |||
<h2> | |||
{% set current_path = app.request.get('_route') %} | |||
{% if current_path == 'conversation_reply_to' %} | |||
@@ -40,8 +38,8 @@ | |||
{{ form_row(blocks['post_form'].content) }} | |||
{{ form_row(blocks['post_form'].attachments) }} | |||
<details class="section-widget-subtitle-details"> | |||
<summary class="section-subtitle-summary"> | |||
<details class="section-details-subtitle"> | |||
<summary class="details-summary-subtitle"> | |||
<strong> | |||
{{ "Additional options" | trans }} | |||
</strong> | |||
@@ -60,6 +58,6 @@ | |||
{% for block in extra_blocks %} | |||
{{ block | raw }} | |||
{% endfor %} | |||
</article> | |||
</section> | |||
</aside> | |||
{% endblock rightpanel %} |
@@ -8,22 +8,22 @@ | |||
</label> | |||
{% endif %} | |||
<section class="section-widget section-padding"> | |||
<section class="frame-section frame-section-padding"> | |||
<h2>{% trans %}Search{% endtrans %}</h2> | |||
{{ form_start(search_form) }} | |||
<section class="section-widget section-form"> | |||
<section class="frame-section section-form"> | |||
{{ form_errors(search_form) }} | |||
{{ form_row(search_form.search_query) }} | |||
{% if actor is not null %} | |||
<details class="section-widget-subtitle-details"> | |||
<summary class="section-subtitle-summary"> | |||
<details class="section-details-subtitle"> | |||
<summary class="details-subtitle-summary"> | |||
<strong>{% trans %}Other options{% endtrans %}</strong> | |||
</summary> | |||
<div class="section-form"> | |||
<details class="section-widget-subtitle-details"> | |||
<summary class="section-subtitle-summary"> | |||
<details class="section-details-subtitle"> | |||
<summary class="details-subtitle-summary"> | |||
<strong> | |||
{% trans %}Save query as a feed{% endtrans %} | |||
</strong> | |||
@@ -40,17 +40,17 @@ | |||
</section> | |||
{{ form_end(search_form)}} | |||
<section class="section-widget"> | |||
<details class="section-widget-subtitle-details"> | |||
<summary class="section-subtitle-summary"> | |||
<section class="frame-section"> | |||
<details class="section-details-subtitle"> | |||
<summary class="details-subtitle-summary"> | |||
<strong>{% trans %}Build a search query{% endtrans %}</strong> | |||
</summary> | |||
{{ form_start(search_builder_form) }} | |||
<div class="section-form"> | |||
{# actor options, display if first checked, with checkbox trick #} | |||
<details class="section-widget-subtitle-details"> | |||
<summary class="section-subtitle-summary"> | |||
<details class="section-details-subtitle"> | |||
<summary class="details-subtitle-summary"> | |||
<strong>{% trans %}People search options{% endtrans %}</strong> | |||
</summary> | |||
{{ form_row(search_builder_form.include_actors) }} | |||
@@ -64,8 +64,8 @@ | |||
{{ form_row(search_builder_form.actor_tags) }} | |||
</details> | |||
<details class="section-widget-subtitle-details"> | |||
<summary class="section-subtitle-summary"> | |||
<details class="section-details-subtitle"> | |||
<summary class="details-subtitle-summary"> | |||
<strong>{% trans %}Note search options{% endtrans %}</strong> | |||
</summary> | |||
{{ form_row(search_builder_form.include_notes) }} | |||
@@ -84,18 +84,18 @@ | |||
</section> | |||
</section> | |||
<section class="section-widget section-padding"> | |||
<section class="frame-section frame-section-padding"> | |||
<h2>{% trans %}Results{% endtrans %}</h2> | |||
<div class="section-widget section-padding feed-empty"> | |||
<h3>{% trans %}Notes found{% endtrans %}</h3> | |||
<div class="frame-section frame-section-padding feed-empty"> | |||
{% if notes is defined and notes is not empty %} | |||
{{ parent() }} | |||
{% else %} | |||
<h3>{% trans %}No notes found{% endtrans %}</h3> | |||
<em>{% trans %}No notes were found for the specified query...{% endtrans %}</em> | |||
{% endif %} | |||
</div> | |||
<div class="section-widget section-padding feed-empty"> | |||
<div class="frame-section frame-section-padding feed-empty"> | |||
<h3>{% trans %}Actors found{% endtrans %}</h3> | |||
{% if actors is defined and actors is not empty %} | |||
{% for actor in actors %} | |||
@@ -23,7 +23,7 @@ | |||
{% block profile_view %}{% include 'cards/profile/view.html.twig' %}{% endblock profile_view %} | |||
{% endfor %} | |||
<div class="section-widget section-padding"> | |||
<div class="frame-section frame-section-padding"> | |||
{{ "Page: " ~ page }} | |||
</div> | |||
{% endblock %} |
@@ -26,7 +26,7 @@ | |||
{% endblock current_note %} | |||
{% endfor %} | |||
<div class="section-widget section-padding section-widget-paging"> | |||
<div class="frame-section frame-section-padding frame-section-paging"> | |||
{{ "Page " ~ page }} | |||
</div> | |||
{% endblock %} |
@@ -32,7 +32,7 @@ for your specific class names. | |||
| Name | Function | Dependencies | Examples | Sub-classes | | |||
|----------------------|----------------------------------------------------------------------------|--------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------| | |||
| section-panel | Side panel | - Preceded by a checkbox hack (hide/show panel); | Left panel `\App\Component\LeftPanel\templates\left_panel\view.html.twig`<br/>Right `\App\Component\RightPanel\templates\right_panel\view.html.twig` | `section-panel-left`, `section-panel-right` | | |||
| section-widget | A sub-section of a page, commonly a template block of a component / plugin | None | Login template `\App\templates\security\login.html.twig` | `section-widget-title`, `section-widget-subtitle` | | |||
| section-widget-title | A template block's title | - Part of a `section-widget`; | Settings template `\App\templates\settings\base.html.twig` | None | | |||
| frame-section | A sub-section of a page, commonly a template block of a component / plugin | None | Login template `\App\templates\security\login.html.twig` | `frame-section-title`, `frame-section-subtitle` | | |||
| frame-section-title | A template block's title | - Part of a `frame-section`; | Settings template `\App\templates\settings\base.html.twig` | None | | |||
_**still in construction...**_ |
@@ -2,9 +2,9 @@ | |||
{% block collection_items %} | |||
{% for key, attachment in attachments %} | |||
<section class="section-widget section-padding"> | |||
<section class="frame-section frame-section-padding"> | |||
{% include '/cards/attachments/view.html.twig' with {'attachment': attachment, 'note': bare_notes[key], 'title': attachment.getBestTitle(bare_notes[key])} only %} | |||
<a class="section-widget-button-like" | |||
<a class="frame-section-button-like" | |||
href="{{ attachment.getDownloadUrl(bare_notes[key]) }}"> {{ 'Download link' | trans }}</a> | |||
</section> | |||
{% else %} | |||
@@ -1,6 +1,6 @@ | |||
{% import '/cards/note/view.html.twig' as noteView %} | |||
<section class="section-widget section-padding"> | |||
<section class="frame-section frame-section-padding"> | |||
<div class="section-title"> | |||
<h2 class="heading-no-margin"> | |||
{{ 'Notes related' | trans }} | |||
@@ -1,4 +1,4 @@ | |||
<section class="section-widget section-padding"> | |||
<section class="frame-section frame-section-padding"> | |||
<div class="section-title"> | |||
<h2 class="heading-no-margin"> | |||
{{ 'Attachment tags' | trans }} | |||
@@ -1,5 +1,5 @@ | |||
{% if actor_tags is not empty %} | |||
<div class="section-widget section-padding"> | |||
<div class="frame-section frame-section-padding"> | |||
<h2>Related tags:</h2> | |||
{% for at in actor_tags %} | |||
{% include 'cards/tag/actor_tag.html.twig' with { 'tag': at, 'actor': null } %} | |||
@@ -1,5 +1,5 @@ | |||
{% if note_tags is not empty %} | |||
<div class="section-widget section-padding"> | |||
<div class="frame-section frame-section-padding"> | |||
<h2>Related tags:</h2> | |||
{% for nt in note_tags %} | |||
@@ -8,7 +8,7 @@ | |||
{% block body %} | |||
{% if note is defined or actor is defined %} | |||
<div class="section-padding"> | |||
<div class="frame-section-padding"> | |||
{% if note is defined and note is not null %} | |||
{{ noteView.macro_note(note, {}) }} | |||
{% elseif actor is defined and actor is not null %} | |||
@@ -20,7 +20,7 @@ | |||
<p>{{ label }}</p> | |||
{{ form(tags_form) }} | |||
{% endif %} | |||
<div class="section-widget-button-like"> | |||
<div class="frame-section-button-like"> | |||
<a href="{{ url('settings', {'open': 'settings-muting-' ~ type ~ '-tags-details'}) }}">{% trans %}Go to %type% muting settings{% endtrans %}</a> | |||
</div> | |||
{% endblock %} |
@@ -1,6 +1,6 @@ | |||
<section class="section-widget"> | |||
<details class="section-widget-title-details" title="Expand if you want to access more options."> | |||
<summary class="section-title-summary"> | |||
<section class="frame-section"> | |||
<details class="section-details-title" title="Expand if you want to access more options."> | |||
<summary class="details-title-summary"> | |||
<h2>Web Monetization</h2> | |||
</summary> | |||
<section class="section-form"> | |||
@@ -1,6 +1,5 @@ | |||
html { | |||
font-family: 'Open Sans', sans-serif; | |||
font-family: 'Open Sans',sans-serif; | |||
scroll-margin-top: var(--xxl); | |||
} | |||
@@ -10,9 +9,7 @@ html { | |||
} | |||
.active { | |||
font-size: 1.1em; | |||
font-family: 'Poppins', sans-serif; | |||
font-weight: 600; | |||
font: 600 1.1em 'Poppins',sans-serif; | |||
} | |||
.anchor-hidden { | |||
@@ -31,7 +28,7 @@ html { | |||
height: min-content; | |||
padding: var(--s); | |||
border-radius: var(--s); | |||
background-color: var(--background-hard) !important; | |||
background-color: var(--background-hard)!important; | |||
border: 2px solid var(--border); | |||
} | |||
@@ -57,7 +54,7 @@ html { | |||
height: var(--xxl); | |||
align-items: baseline; | |||
padding: var(--s); | |||
background: var(--gradient) !important; | |||
background: var(--gradient)!important; | |||
box-shadow: var(--shadow); | |||
} | |||
@@ -80,6 +77,7 @@ html { | |||
} | |||
.page-content { | |||
margin-top: var(--s); | |||
display: flex; | |||
flex-direction: column; | |||
width: 100%; | |||
@@ -88,7 +86,7 @@ html { | |||
.markdown-blocks { | |||
border-radius: 0 0 var(--s) var(--s); | |||
padding: var(--s); | |||
background-color: var(--background-card) !important; | |||
background-color: var(--background-card)!important; | |||
} | |||
.markdown-blocks ul { | |||
@@ -97,14 +95,14 @@ html { | |||
} | |||
.markdown-blocks ul li { | |||
margin-bottom: 0.2em; | |||
margin-bottom: .2em; | |||
} | |||
.doc-navigation { | |||
border-radius: var(--s) var(--s) 0 0; | |||
border-bottom: 0; | |||
padding: var(--s); | |||
background-color: var(--background-card) !important; | |||
background-color: var(--background-card)!important; | |||
} | |||
.doc-navigation ul { | |||
@@ -154,13 +152,11 @@ html { | |||
top: -100%; | |||
} | |||
#toggle-panel-left:not(:checked) ~ .section-panel-left, | |||
#toggle-panel-right:not(:checked) ~ .section-panel-right { | |||
#toggle-panel-left:not(:checked) ~ .section-panel-left,#toggle-panel-right:not(:checked) ~ .section-panel-right { | |||
display: none; | |||
} | |||
#toggle-panel-left:checked ~ .section-panel-left, | |||
#toggle-panel-right:checked ~ .section-panel-right { | |||
#toggle-panel-left:checked ~ .section-panel-left,#toggle-panel-right:checked ~ .section-panel-right { | |||
z-index: 1; | |||
width: 100vw; | |||
left: 0; | |||
@@ -173,9 +169,8 @@ html { | |||
width: 100%; | |||
} | |||
label[for|="toggle-panel"], | |||
input[id|="toggle-panel"] { | |||
display: none !important; | |||
label[for|="toggle-panel"],input[id|="toggle-panel"] { | |||
display: none!important; | |||
} | |||
.section-panel { | |||
@@ -194,26 +189,13 @@ html { | |||
} | |||
@media only screen and (min-width: 1921px) { | |||
/* | |||
* Using the Van de Graaf Canon and Tschichold’s recommended 2:3 page-size ratio | |||
* | |||
* 100% * 2/3 = 66% | |||
* | |||
* > .page-content-wrapper | |||
* 66% * 2/3 = 44% | |||
* | |||
* > .section-panel | |||
* 66% - 44% = 22% | |||
* 22% / 2 = 11% | |||
*/ | |||
.page-header { | |||
width: 66vw; | |||
align-self: center; | |||
} | |||
label[for|="toggle-panel"], | |||
input[id|="toggle-panel"] { | |||
display: none !important; | |||
label[for|="toggle-panel"],input[id|="toggle-panel"] { | |||
display: none!important; | |||
} | |||
.section-panel { | |||
@@ -238,6 +220,7 @@ html { | |||
opacity: 0; | |||
transform: translateY(-10px); | |||
} | |||
100% { | |||
opacity: unset; | |||
transform: none; | |||
@@ -249,45 +232,44 @@ html { | |||
opacity: 0; | |||
transform: translateY(-10px); | |||
} | |||
0% { | |||
opacity: unset; | |||
transform: none; | |||
} | |||
} | |||
@media (prefers-color-scheme: dark) { | |||
@keyframes highlight { | |||
0% { | |||
box-shadow: initial; | |||
border-radius: var(--s); | |||
} | |||
50% { | |||
border-radius: var(--s); | |||
box-shadow: inset 0 20px 40px #FFF; | |||
transition: box-shadow 0.3s ease-in-out; | |||
z-index: 666; | |||
} | |||
100% { | |||
box-shadow: initial; | |||
border-radius: var(--s); | |||
} | |||
@keyframes highlight { | |||
0% { | |||
box-shadow: initial; | |||
border-radius: var(--s); | |||
} | |||
50% { | |||
border-radius: var(--s); | |||
box-shadow: inset 0 20px 40px #FFF; | |||
transition: box-shadow .3s ease-in-out; | |||
z-index: 666; | |||
} | |||
} | |||
@media (prefers-color-scheme: light) { | |||
@keyframes highlight { | |||
0% { | |||
box-shadow: initial; | |||
border-radius: var(--s); | |||
} | |||
50% { | |||
border-radius: var(--s); | |||
box-shadow: inset 0 20px 40px #000; | |||
transition: box-shadow 0.3s ease-in-out; | |||
} | |||
100% { | |||
box-shadow: initial; | |||
border-radius: var(--s); | |||
} | |||
100% { | |||
box-shadow: initial; | |||
border-radius: var(--s); | |||
} | |||
0% { | |||
box-shadow: initial; | |||
border-radius: var(--s); | |||
} | |||
50% { | |||
border-radius: var(--s); | |||
box-shadow: inset 0 20px 40px #000; | |||
transition: box-shadow .3s ease-in-out; | |||
} | |||
100% { | |||
box-shadow: initial; | |||
border-radius: var(--s); | |||
} | |||
} |
@@ -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; | |||
@@ -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); | |||
} |
@@ -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); | |||
} |
@@ -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; | |||
} | |||
} |
@@ -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; | |||
} |
@@ -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; | |||
@@ -1,70 +1,82 @@ | |||
.collection-add, .collections-list { | |||
.collection-add,.collections-list { | |||
padding: 10px 12px; | |||
} | |||
.collection-add > form > div { | |||
display: flex; | |||
align-items: flex-end; | |||
} | |||
.collection-add > form > div .mb-6 { | |||
margin-right: 12px; | |||
} | |||
.collection-add > form > div button { | |||
margin-top: 0px; | |||
margin-top: 0; | |||
margin-bottom: var(--s); | |||
} | |||
@media only screen and (max-width:465px) { | |||
.collection-add > form, .collection-add > form > div .mb-6 { | |||
.collection-add > form,.collection-add > form > div .mb-6 { | |||
width: 100%; | |||
margin: 0px; | |||
margin: 0; | |||
} | |||
.collection-add > form > div { | |||
flex-direction: column; | |||
} | |||
.collection-add > form > div button { | |||
margin-top: var(--s);; | |||
margin-bottom: 0px; | |||
margin-top: var(--s); | |||
margin-bottom: 0; | |||
} | |||
} | |||
:root { | |||
--collections-list-quantity: 3; | |||
} | |||
@media only screen and (min:1281px) { | |||
:root { | |||
--collections-list-quantity: 3; | |||
} | |||
@media only screen and (min-width:1281px) { | |||
:root { | |||
--collections-list-quantity: 3; | |||
} | |||
} | |||
@media only screen and (max-width:1280px) { | |||
:root { | |||
--collections-list-quantity: 4; | |||
} | |||
:root { | |||
--collections-list-quantity: 4; | |||
} | |||
} | |||
@media only screen and (max-width:900px) { | |||
:root { | |||
--collections-list-quantity: 3; | |||
} | |||
:root { | |||
--collections-list-quantity: 3; | |||
} | |||
} | |||
@media only screen and (max-width:700px) { | |||
:root { | |||
--collections-list-quantity: 2; | |||
} | |||
:root { | |||
--collections-list-quantity: 2; | |||
} | |||
} | |||
@media only screen and (max-width:465px) { | |||
:root { | |||
--collections-list-quantity: 1; | |||
} | |||
:root { | |||
--collections-list-quantity: 1; | |||
} | |||
} | |||
.collections-list { | |||
display: grid !important; | |||
display: grid!important; | |||
grid-gap: 12px; | |||
grid-template-columns: repeat(var(--collections-list-quantity), 1fr); | |||
grid-template-columns: repeat(var(--collections-list-quantity),1fr); | |||
} | |||
.collections-list h3, .collections-list h2, .collections-list h1 { | |||
.collections-list h3,.collections-list h2,.collections-list h1 { | |||
grid-column-start: 1; | |||
grid-column-end: calc(var(--collections-list-quantity) + 1); | |||
} | |||
.collections-list .collection-item { | |||
border: 2px solid var(--border); | |||
border-radius: var(--s); | |||
@@ -73,6 +85,7 @@ | |||
flex-direction: column; | |||
position: relative; | |||
} | |||
.collections-list .collection-item .name { | |||
margin-right: auto; | |||
flex-grow: 1; | |||
@@ -80,27 +93,34 @@ | |||
word-break: break-word; | |||
margin-right: 60px; | |||
} | |||
.collections-list .collection-item summary { | |||
position: absolute; | |||
top: 10px; | |||
right: 50px; | |||
width: 16px; | |||
} | |||
.collections-list .collection-item details + details > summary { | |||
right: 20px; | |||
} | |||
.collections-list .collection-item details { | |||
margin-top: 12px; | |||
} | |||
.collections-list .collection-item svg { | |||
fill: var(--foreground); | |||
} | |||
.collections-list .collection-item svg:hover { | |||
fill: var(--accent); | |||
} | |||
.collections-list .collection-item details label { | |||
display: none; | |||
} | |||
.collections-list .collection-item details .danger { | |||
color: #cb2d2d; | |||
} | |||
} |
@@ -1,6 +1,3 @@ | |||
.collections { | |||
background-color: red; | |||
} | |||
.collections .collections-selections-options { | |||
display: flex; | |||
margin-top: 12px; | |||
@@ -110,11 +110,11 @@ | |||
<main class="page-content-wrapper"> | |||
<a role="navigation" rel="help" id="anchor-main-content" class="anchor-hidden" | |||
title="{{ 'Press tab to access main content.' | trans }}"></a> | |||
<div class='page-content accessibility-target'> | |||
<section class='page-content accessibility-target'> | |||
{% block nav %}{% endblock %} | |||
{% block body %}{% endblock %} | |||
{% block javascripts %}{% endblock javascripts %} | |||
</div> | |||
</section> | |||
</main> | |||
</body> | |||
</html> | |||
@@ -2,9 +2,9 @@ | |||
{% block body %} | |||
<div class="page"> | |||
<section class="section-widget section-padding"> | |||
<section class="frame-section frame-section-padding"> | |||
{% include '/cards/attachments/view.html.twig' with {'attachment': attachment, 'note': note, 'title': title} only %} | |||
<a class="section-widget-button-like" href="{{ download }}"> {{ 'Download link' | trans }}</a> | |||
<a class="frame-section-button-like" href="{{ download }}"> {{ 'Download link' | trans }}</a> | |||
</section> | |||
</div> | |||
{% endblock body %} |
@@ -1,8 +1,8 @@ | |||
{% block feeds %} | |||
<section class="section-widget" title="{{ 'Feed navigation.' | trans }}"> | |||
<details class="section-widget-title-details" open="open" | |||
<section class="frame-section" title="{{ 'Feed navigation.' | trans }}"> | |||
<details class="section-details-title" open="open" | |||
title="{{ 'Expand if you want to access more options.' | trans }}"> | |||
<summary class="section-title-summary"> | |||
<summary class="details-title-summary"> | |||
<h2>{{ 'Feeds' | trans }}</h2> | |||
{% if app.user %} | |||
{# User custom feeds #} | |||
@@ -10,7 +10,7 @@ | |||
{% endif %} | |||
</summary> | |||
<nav class='section-padding' tabindex="0" title="{{ 'Navigate through each feed.' | trans }}"> | |||
<nav class="frame-section-padding" tabindex="0" title="{{ 'Navigate through each feed.' | trans }}"> | |||
{% if not app.user %} {# Default feeds #} | |||
<ul> | |||
<li> | |||
@@ -54,7 +54,7 @@ | |||
{% endblock profile_current_actor %} | |||
{% block profile_security %} | |||
<section class='section-widget section-padding' title="{{ 'Your profile information.' | trans }}"> | |||
<section class='frame-section frame-section-padding' title="{{ 'Your profile information.' | trans }}"> | |||
<h2 class="section-title">Account</h2> | |||
<nav tabindex="0" class="profile-navigation" title="{{ 'Navigate through account related pages.' | trans }}"> | |||
@@ -8,7 +8,7 @@ | |||
{% block title %}{{ "Log in!" | trans }}{% endblock %} | |||
{% block body %} | |||
<section class="section-widget"> | |||
<section class="frame-section"> | |||
<form class="section-form" method="post"> | |||
<fieldset> | |||
<legend class="section-form-legend">{{ "Login" | trans }}</legend> | |||
@@ -8,7 +8,7 @@ | |||
{% block title %}Register{% endblock %} | |||
{% block body %} | |||
<section class="section-widget"> | |||
<section class="frame-section"> | |||
<form class="section-form" method="post"> | |||
{{ form_start(registration_form) }} | |||
@@ -11,8 +11,8 @@ | |||
{% endblock stylesheets %} | |||
{% block body %} | |||
<nav class='section-widget section-padding'> | |||
<h1 class="section-widget-title">Settings</h1> | |||
<nav class='frame-section frame-section-padding'> | |||
<h1 class="frame-section-title">Settings</h1> | |||
<ul> | |||
<li> | |||
{% set profile_tabs = [{'title': 'Personal Info', 'desc': 'Nickname, Homepage, Bio and more.', 'id': 'settings-personal-info', 'form': personal_info_form}] %} | |||