forked from GNUsocial/gnu-social
[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
This commit is contained in:
parent
f731850f5c
commit
e2e1b0172d
@ -3,22 +3,49 @@
|
||||
{% block title %}{{ title }}{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<section class="frame-section frame-section-padding">
|
||||
<h1 class="section-title">{{ title }}</h1>
|
||||
<div class="frame-section frame-section-padding">
|
||||
<h1 class="frame-section-title">{{ title }}</h1>
|
||||
|
||||
<div>
|
||||
<p>{% trans %}Sort by:{% endtrans %}</p>
|
||||
<form method="GET">
|
||||
{% for field in sort_form_fields %}
|
||||
<label for="order_by_{{ field.value }}">{{ field.label }}</label>
|
||||
<input id="order_by_{{ field.value }}" type="radio" name="order_by" value="{{ field.value }}" {% if field.checked %}checked="checked"{% endif %}>
|
||||
{% endfor %}
|
||||
<button type="submit" name="order_op" value="ASC">{% trans %}Ascending{% endtrans %}</button>
|
||||
<button type="submit" name="order_op" value="DESC">{% trans %}Descending{% endtrans %}</button>
|
||||
<details class="frame-section section-details-title">
|
||||
<summary class="details-summary-title">
|
||||
<strong>
|
||||
{% trans %}Ordering rules{% endtrans %}
|
||||
</strong>
|
||||
</summary>
|
||||
<form method="GET" class="section-form">
|
||||
<div class="container-grid">
|
||||
<section class="frame-section frame-section-padding">
|
||||
<strong>{% trans %}Sort by{% endtrans %}</strong>
|
||||
<hr>
|
||||
<div class="container-block">
|
||||
{% for field in sort_form_fields %}
|
||||
<span class="container-block">
|
||||
<label for="order_by_{{ field.value }}">{{ field.label }}</label>
|
||||
<input id="order_by_{{ field.value }}" type="radio" name="order_by" value="{{ field.value }}" {% if field.checked %}checked="checked"{% endif %}>
|
||||
</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
<section class="frame-section frame-section-padding">
|
||||
<strong class="section-title">{% trans %}Order{% endtrans %}</strong>
|
||||
<hr>
|
||||
<section class="container-block">
|
||||
<span class="container-block">
|
||||
<label for="order_op_asc">{% trans %}Ascending{% endtrans %}</label>
|
||||
<input id="order_op_asc" type="radio" name="order_op" value="ASC">
|
||||
</span>
|
||||
<span class="container-block">
|
||||
<label for="order_op_desc">{% trans %}Descending{% endtrans %}</label>
|
||||
<input id="order_op_desc" type="radio" name="order_op" value="DESC" checked="checked">
|
||||
</span>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
<button type="submit">{% trans %}Order{% endtrans %}</button>
|
||||
</form>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="frame-section-padding">
|
||||
<section 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 %}
|
||||
@ -28,6 +55,6 @@
|
||||
{% else %}
|
||||
<h2>{{ empty_message }}</h2>
|
||||
{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
{% endblock body %}
|
||||
|
@ -44,8 +44,10 @@
|
||||
{{ "Additional options" | trans }}
|
||||
</strong>
|
||||
</summary>
|
||||
{{ form_row(blocks['post_form'].language) }}
|
||||
{{ form_row(blocks['post_form'].tag_use_canonical) }}
|
||||
<section class="section-form">
|
||||
{{ form_row(blocks['post_form'].language) }}
|
||||
{{ form_row(blocks['post_form'].tag_use_canonical) }}
|
||||
</section>
|
||||
</details>
|
||||
{{ form_rest(blocks['post_form']) }}
|
||||
{{ form_end(blocks['post_form']) }}
|
||||
|
@ -12,7 +12,7 @@
|
||||
{{ parent() }}
|
||||
<div class="page">
|
||||
<div class="main">
|
||||
{{ noteView.macro_note_minimal(note) }}
|
||||
{{ noteView.macro_note(note) }}
|
||||
{{ form(add_repeat) }}
|
||||
</div>
|
||||
</div>
|
||||
|
@ -12,7 +12,7 @@
|
||||
{{ parent() }}
|
||||
<div class="page">
|
||||
<div class="main">
|
||||
{{ noteView.macro_note_minimal(note) }}
|
||||
{{ noteView.macro_note(note) }}
|
||||
{{ form(remove_repeat) }}
|
||||
</div>
|
||||
</div>
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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);
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
@ -69,11 +69,11 @@
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section tabindex="0">
|
||||
<section>
|
||||
<a id="anchor-accessibility-menu" accesskey="z" href="#anchor-accessibility-menu">
|
||||
<strong tabindex="0">{% trans %}Combined with the previous keybinding, the keyboard key
|
||||
<strong>{% trans %}Combined with the previous keybinding, the keyboard key
|
||||
<kbd>Z</kbd> returns focus to this menu.{% endtrans %}</strong>
|
||||
<strong tabindex="0">{% trans %}Further access keys are provided via:{% endtrans %}</strong>
|
||||
<strong>{% trans %}Further access keys are provided via:{% endtrans %}</strong>
|
||||
</a>
|
||||
<nav>
|
||||
<ul>
|
||||
|
@ -2,7 +2,7 @@
|
||||
<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="details-title-summary">
|
||||
<summary class="details-summary-title">
|
||||
<h2>{{ 'Feeds' | trans }}</h2>
|
||||
{% if app.user %}
|
||||
{# User custom feeds #}
|
||||
|
@ -187,10 +187,19 @@
|
||||
{{ block('note_sidebar') }}
|
||||
<div class="note-wrapper">
|
||||
<header class="note-info">
|
||||
{{ block('note_info') }}
|
||||
<div class="note-info-start">
|
||||
{{ block('note_author') }}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section role="dialog" class="e-content entry-content note-content">
|
||||
<small class="note-conversation-info">
|
||||
<a href="{{ note.getConversationUrl() }}"
|
||||
class="note-conversation-url">{{ 'in conversation' | trans }}</a>
|
||||
<a href="{{ note.getUrl() }}"
|
||||
class="note-url">{{ note.getModified() | ago }}</a>
|
||||
</small>
|
||||
<hr>
|
||||
{{ block('note_text') }}
|
||||
</section>
|
||||
</div>
|
||||
|
@ -10,7 +10,7 @@
|
||||
{% block body %}
|
||||
<section class="frame-section">
|
||||
<form class="section-form" method="post">
|
||||
<fieldset>
|
||||
<fieldset class="container-block">
|
||||
<legend class="section-form-legend">{{ "Login" | trans }}</legend>
|
||||
|
||||
{% if error %}
|
||||
|
@ -9,11 +9,10 @@
|
||||
|
||||
{% block body %}
|
||||
<section class="frame-section">
|
||||
|
||||
<form class="section-form" method="post">
|
||||
{{ form_start(registration_form) }}
|
||||
{{ form_errors(registration_form) }}
|
||||
<fieldset>
|
||||
<fieldset class="container-block">
|
||||
<legend class="section-form-legend">{{ "Register" | trans }}</legend>
|
||||
|
||||
{% for flashError in app.flashes('verify_email_error') %}
|
||||
|
Loading…
Reference in New Issue
Block a user