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

[CSS] Improved reset.css, better and more granular sizes added

Browse Source 
Search form dimensions fixed, page header alignment issues fixed, and consistent font sizes used throughout
This commit is contained in:
Eliseu Amaro 2022-11-25 14:51:39 +01:00
parent 9cf83db62a
commit 87559e9a8c
No known key found for this signature in database
GPG Key ID: 96DA09D4B97BC2D5
12 changed files with 1131 additions and 677 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
plugins/Oomox/templates/oomox/root_override.css.twig
View File

@ -1,9 +1,9 @@
:root { :root {
--s: .6rem; --font-size-sm: .6rem;
--unit: 1rem; --font-size-base: 1rem;
--m: 1.3rem; --font-size-base: 1.3rem;
--xl: 1.62rem; --font-size-md: 1.62rem;
--xxl: 3rem; --font-size-xxxl: 3rem;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {

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

@ -1,268 +1,490 @@
details summary > *,
menu,
ul {
margin: unset;
padding: unset;
}
details > summary,
menu,
ul {
list-style: none;
}
:link,
:visited,
ul {
text-decoration: none;
}
.header-title,
.page-content-wrapper {
margin-left: auto;
margin-right: auto;
overflow-wrap: anywhere;
word-break: break-word;
}
.header-title,
.page-header .header-title {
text-align: center;
}
fieldset,
hr {
all: unset;
}
hr,
p {
margin-bottom: var(--font-size-sm);
}
* {
box-sizing: border-box !important;
max-width: 100%;
}
body,
html {
align-self: center;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
background-attachment: fixed;
background-color: var(--background-hard);
}
body,
input,
select,
textarea {
color: var(--foreground);
}
:link,
:visited {
color: currentColor;
}
li,
ul {
margin: 0;
padding: 0;
}
blockquote,
body,
fieldset,
form,
html,
input,
pre,
textarea {
border: 0;
margin: 0;
padding: 0;
}
:link img,
:visited img,
a img {
border: 0;
}
address {
font-style: normal;
}
:focus {
outline: 0;
}
::-moz-focus-inner {
border: 0;
}
details summary {
cursor: pointer !important;
}
details > summary::-webkit-details-marker {
display: none;
}
[hidden] {
display: none;
}
html { html {
font-family:'Open Sans',sans-serif; font-size: 100%;
background-image:url(images/noise.png); line-height: 1.5em;
}
body {
font-family: "Open Sans", sans-serif;
font-weight: 400;
}
p {
margin-top: 0;
}
h1,
h2,
h3,
h4,
h5 {
font-family: Poppins, sans-serif;
margin: var(--font-size-base) 0 var(--font-size-sm);
}
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
legend:first-child {
margin-top: initial;
}
.doc-navigation {
font-size: 1.383em;
font-weight: 700;
margin-top: 0;
}
.page-content,
hr {
margin-top: var(--font-size-sm);
}
h1 {
font-size: var(--font-size-lg);
font-weight: 900;
}
h2 {
font-size: var(--font-size-lg);
font-weight: 800;
}
label,
legend {
font-weight: 500;
}
h3 {
font-size: var(--font-size-md);
font-weight: 700;
}
h4 {
font-size: var(--font-size-md);
font-weight: 600;
}
h5 {
font-size: var(--font-size-base);
font-weight: 500;
}
.text_small,
small {
font-size: var(--font-size-sm);
}
label,
legend {
font-size: var(--font-size-base);
}
input[type="password"],
input[type="text"],
textarea {
padding: 6px 8px;
}
a:focus,
a:hover {
text-decoration: underline;
}
:focus-visible {
box-shadow: var(--shadow-inset-accent) !important;
}
html {
font-family: "Open Sans", sans-serif;
background-image: url(images/noise.png);
background-blend-mode: soft-light; background-blend-mode: soft-light;
} }
.accessibility-menu {
background-color: var(--background-hard) !important;
border: 2px solid var(--border);
border-radius: var(--font-size-sm);
display: block;
height: min-content;
left: -90%;
padding: var(--font-size-sm);
position: absolute;
top: -90%;
width: 30%;
z-index: 999;
}
.doc-navigation,
.markdown-blocks {
background-color: var(--background-card) !important;
padding: var(--font-size-sm);
}
.accessibility-menu ul {
list-style-type: disc;
margin-left: var(--font-size-base);
}
.accessibility-menu:focus-within:not(:active) {
left: var(--font-size-sm);
top: var(--font-size-sm);
}
.active {
font: 900 1em "Open Sans", sans-serif;
}
.anchor-hidden {
height: 1px;
overflow: hidden;
width: 1px;
}
.doc-navigation {
border-bottom: 0;
border-radius: var(--font-size-sm) var(--font-size-sm) 0 0;
}
.doc-navigation ul {
display: flex;
}
.icon { .icon {
fill: var(--foreground); fill: var(--foreground);
} height: 1em;
vertical-align: center;
.accessibility-menu { width: 1em;
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 {
list-style-type:disc;
margin-left:var(--m);
}
.accessibility-menu:focus-within:not(:active) {
left:var(--s);
top:var(--s);
}
.active {
font:900 1em "Open Sans",sans-serif;
}
.anchor-hidden {
height:1px;
overflow:hidden;
width:1px;
}
.doc-navigation {
background-color:var(--background-card)!important;
border-bottom:0;
border-radius:var(--s) var(--s) 0 0;
padding:var(--s);
}
.doc-navigation ul {
display:flex;
}
.header-instance {
margin-left:auto;
margin-right:auto;
text-align:center;
}
.icon {
height:1em;
vertical-align:center;
width:1em;
} }
.markdown-blocks { .markdown-blocks {
background-color:var(--background-card)!important; border-radius: 0 0 var(--font-size-sm) var(--font-size-sm);
border-radius:0 0 var(--s) var(--s);
padding:var(--s);
} }
.markdown-blocks ul { .markdown-blocks ul {
list-style:disc; list-style: disc;
margin-left:1em; margin-left: 1em;
} }
.markdown-blocks ul li { .markdown-blocks ul li {
margin-bottom:.2em; margin-bottom: 0.2em;
} }
.page-content { .page-content {
margin-top:var(--s); width: 100%;
width:100%;
} }
.page-content-wrapper { .page-content-wrapper {
margin-left:auto; padding: var(--font-size-sm) var(--font-size-sm) 0;
margin-right:auto; position: relative;
padding:var(--s) var(--s) 0; top: calc(2 * var(--font-size-sm) + var(--font-size-lg));
position:relative; }
top:var(--xxl);
.page-header,
.section-panel {
padding: var(--font-size-sm);
position: fixed;
} }
.page-header { .page-header {
background:var(--background-card); display: inline-flex;
box-shadow:var(--shadow); background: var(--background-card);
display:inline-flex; box-shadow: var(--shadow);
height:var(--xxl); height: calc(2 * var(--font-size-sm) + var(--font-size-lg));
padding:var(--s); top: 0;
position:fixed; z-index: 1;
top:0; }
z-index:1;
.page-header h1 {
display: inline-flex;
margin: unset;
}
.page-header h1 svg {
margin-right: 6px;
} }
.page-header #toggle-panel-left { .page-header #toggle-panel-left {
float:left; float: left;
} }
.page-header #toggle-panel-right { .page-header #toggle-panel-right {
float:right; float: right;
}
.page-header .header-instance {
text-align:center;
} }
.section-panel { .section-panel {
padding:var(--s); top: calc(2 * var(--font-size-sm) + var(--font-size-lg));
position:fixed;
top:var(--xxl);
} }
.section-panel .panel-content { .section-panel .panel-content {
display:block; display: block;
height:calc(100vh - var(--xxl)); height: calc(100vh - var(--font-size-xxl));
overflow:auto; overflow: auto;
} }
.section-panel-left { .section-panel-left {
left:0; left: 0;
} }
.section-panel-right { .section-panel-right {
right:0; right: 0;
}
.panel-left-icon,
.panel-right-icon {
align-self: self-end;
} }
hr { hr {
margin-bottom:var(--s); background-color: var(--border) !important;
margin-top:var(--s); display: block;
height: 1px;
} }
@media only screen and (max-width: 512px) { @media only screen and (max-width: 512px) {
html { html {
font-size:85%; font-size: 85%;
} }
} }
@media only screen and (max-width: 1280px) { @media only screen and (max-width: 1280px) {
#toggle-panel-left:checked~.section-panel-left,#toggle-panel-right:checked~.section-panel-right { #toggle-panel-left:checked ~ .section-panel-left,
background-color:var(--background-hard); #toggle-panel-right:checked ~ .section-panel-right {
box-shadow:var(--shadow); background-color: var(--background-hard);
left:0; box-shadow: var(--shadow);
width:100vw; left: 0;
z-index:auto; width: 100vw;
z-index: auto;
} }
#toggle-panel-left:not(:checked)~.section-panel-left,#toggle-panel-right:not(:checked)~.section-panel-right { #toggle-panel-left:not(:checked) ~ .section-panel-left,
display:none; #toggle-panel-right:not(:checked) ~ .section-panel-right {
display: none;
} }
.page-content { .page-content {
max-width:100%; max-width: 100%;
} }
.page-header,.page-content-wrapper { .page-content-wrapper,
width:100%; .page-header {
width: 100%;
} }
input[id|=toggle-panel] { input[id|="toggle-panel"] {
position:absolute; position: absolute;
top:-100%; top: -100%;
} }
label[for|=toggle-panel] { label[for|="toggle-panel"] {
cursor:pointer; cursor: pointer;
} }
} }
@media only screen and (min-width: 1281px) { @media only screen and (min-width: 1281px) {
.page-content-wrapper { .page-content-wrapper {
width:66vw; width: 66vw;
} }
.page-header { .page-header {
width:100%; width: 100%;
} }
.section-panel { .section-panel {
width:17vw; width: 17vw;
} }
a[id|=anchor]:target+.accessibility-target { a[id|="anchor"]:target + .accessibility-target {
animation-duration:.6s; animation-duration: 0.6s;
animation-name:highlight; animation-name: highlight;
animation-timing-function:ease-in-out; animation-timing-function: ease-in-out;
} }
label[for|=toggle-panel],input[id|=toggle-panel] { input[id|="toggle-panel"],
display:none!important; label[for|="toggle-panel"] {
display: none !important;
} }
} }
@media only screen and (min-width: 1921px) { @media only screen and (min-width: 1921px) {
.page-content-wrapper { .page-content-wrapper {
width:44vw; width: 44vw;
} }
.page-header { .page-header {
width:66vw; width: 66vw;
} }
.section-panel { .section-panel {
width:11vw; width: 11vw;
} }
.page-header,.section-panel-left { .page-header,
left:17vw; .section-panel-left {
left: 17vw;
} }
.section-panel-right { .section-panel-right {
right:17vw; right: 17vw;
} }
label[for|=toggle-panel],input[id|=toggle-panel] { input[id|="toggle-panel"],
display:none!important; label[for|="toggle-panel"] {
display: none !important;
} }
} }
@keyframes fadeIn { @keyframes fadeIn {
0% { 0% {
opacity:0; opacity: 0;
transform:translateY(-10px); transform: translateY(-10px);
} }
100% { 100% {
opacity:unset; opacity: unset;
transform:none; transform: none;
} }
} }
@keyframes fadeOut { @keyframes fadeOut {
0% { 0% {
opacity:unset; opacity: unset;
transform:none; transform: none;
} }
100% { 100% {
opacity:0; opacity: 0;
transform:translateY(-10px); transform: translateY(-10px);
} }
} }
@keyframes highlight { @keyframes highlight {
0%,100% { 0%,
border-radius:var(--s); 100% {
box-shadow:initial; border-radius: var(--font-size-sm);
box-shadow: initial;
} }
50% { 50% {
border-radius:var(--s); border-radius: var(--font-size-sm);
box-shadow:inset 0 20px 40px #fff; box-shadow: inset 0 20px 40px #fff;
transition:box-shadow .3s ease-in-out; transition: box-shadow 0.3s ease-in-out;
z-index:666; z-index: 666;
} }
} }

437
public/assets/default_theme/feeds.css
View File

@ -1,388 +1,413 @@
.embed,
.feed-empty,
.feed-header,
.h-entry,
.note-end {
display: flex;
}
.note-info,
[id|="note-compact"] {
overflow: auto;
touch-action: manipulation;
}
.note-text,
[id|="note-compact"] {
word-break: break-all;
}
.delete-button-container { .delete-button-container {
-moz-mask-image:url(icons/delete.svg); -moz-mask-image: url(icons/delete.svg);
-o-mask-image:url(icons/delete.svg); -o-mask-image: url(icons/delete.svg);
-webkit-mask-image:url(icons/delete.svg); -webkit-mask-image: url(icons/delete.svg);
mask-image:url(icons/delete.svg); mask-image: url(icons/delete.svg);
} }
.embed { .embed {
border:unset; border: unset;
display:flex; padding: var(--font-size-sm);
padding:var(--s);
} }
.embed .p-author,.embed .p-name,.note-author-url,.note-complementary-info a { .embed .p-author,
font-weight:600; .embed .p-name,
.note-author-url,
.note-complementary-info a {
font-weight: 600;
} }
.embed .p-summary { .embed .p-summary {
width:60%; width: 60%;
} }
.embed .p-summary hr { .embed .p-summary hr {
margin-bottom:var(--s); margin-bottom: var(--font-size-sm);
margin-top:var(--s); margin-top: var(--font-size-sm);
} }
.embed header { .embed header {
margin-bottom:var(--m); margin-bottom: var(--font-size-base);
width:100%; width: 100%;
} }
.embed img { .embed img {
margin-right:var(--s); margin-right: var(--font-size-sm);
max-block-size:128px; max-block-size: 128px;
padding:unset; padding: unset;
width:auto; width: auto;
} }
.favourite-button-container { .favourite-button-container {
-moz-mask-image:url(icons/heart.svg); -moz-mask-image: url(icons/heart.svg);
-o-mask-image:url(icons/heart.svg); -o-mask-image: url(icons/heart.svg);
-webkit-mask-image:url(icons/heart.svg); -webkit-mask-image: url(icons/heart.svg);
mask-image:url(icons/heart.svg); mask-image: url(icons/heart.svg);
} }
.feed-actions-details summary,.note-actions-extra-details summary { .feed-actions-details summary,
display:block; .note-actions-extra-details summary {
display: block;
} }
.feed-actions-details-dropdown { .feed-actions-details-dropdown {
font-size:.937rem; font-size: 0.937rem;
} }
.feed-actions-details[open] svg { .feed-actions-details[open] svg {
height:auto; height: auto;
width:1em; width: 1em;
} }
.feed-actions-details[open]>.feed-actions-details-dropdown,.note-actions-extra-details[open]>summary+* { .feed-actions-details[open] > .feed-actions-details-dropdown,
background:var(--background-card); .note-actions-extra-details[open] > summary + * {
border:1px solid var(--border); background: var(--background-card);
border-radius:var(--s); border: 1px solid var(--border);
box-shadow:var(--shadow); border-radius: var(--font-size-sm);
display:flex; box-shadow: var(--shadow);
flex-direction:column; display: flex;
padding:4px 8px; flex-direction: column;
position:absolute; padding: 4px 8px;
right:0; position: absolute;
width:max-content; right: 0;
z-index:1; width: max-content;
z-index: 1;
} }
.feed-actions-details[open]>summary,.note-actions-extra-details[open]>summary,.note-actions-set { .feed-actions-details[open] > summary,
opacity:1!important; .note-actions-extra-details[open] > summary,
.note-actions-set {
opacity: 1 !important;
} }
.feed-empty .feed-background { .feed-empty .feed-background {
height:auto; height: auto;
margin-left:auto; margin-left: auto;
margin-right:auto; margin-right: auto;
margin-top:var(--xxl); margin-top: var(--font-size-xxxl);
opacity:3%; opacity: 3%;
width:40%; width: 40%;
}
.feed-empty,.note-end {
display:flex;
} }
.feed-header { .feed-header {
align-items:center; align-items: center;
display:flex; margin-bottom: var(--font-size-base);
margin-bottom:var(--m);
} }
.feed-header .feed-actions { .feed-header .feed-actions {
margin-left:auto; margin-left: auto;
text-transform:capitalize; text-transform: capitalize;
} }
.feed-header>h1,.feed-header>h2,.feed-header>h3,.feed-header>h4,.feed-header>h5,.feed-header>h6 { .feed-header > h1,
margin-bottom:unset; .feed-header > h2,
.feed-header > h3,
.feed-header > h4,
.feed-header > h5,
.feed-header > h6 {
margin-bottom: unset;
} }
.h-entry { .h-entry {
background-color:var(--background-card); background-color: var(--background-card);
border-radius:var(--s); border-radius: var(--font-size-sm);
display:flex; flex-wrap: wrap;
flex-wrap:wrap;
} }
.h-entry .embed[class*="p-"] { .h-entry .embed[class*="p-"] {
padding:unset; padding: unset;
} }
.h-entry a:focus { .h-entry a:focus {
text-decoration:underline; text-decoration: underline;
} }
.h-entry figure,.note-attachments-unit figure { .h-entry figure,
background:var(--gradient); .note-attachments-unit figure {
border-radius:var(--s); background: var(--gradient);
margin:unset; border-radius: var(--font-size-sm);
padding:var(--s); margin: unset;
padding: var(--font-size-sm);
} }
.h-entry img,.note-attachments-unit figure img { .h-entry img,
background:repeating-conic-gradient(#ffffff66 0 90deg,#ffffff33 0 180deg) 0 0/40px 40px round; .note-attachments-unit figure img {
background: repeating-conic-gradient(#ffffff66 0 90deg, #ffffff33 0 180deg) 0 0/40px 40px round;
} }
.h-entry-language { .h-entry-language {
background:var(--gradient-backwards); background: var(--gradient-backwards);
border-radius:0 0 var(--s) 0; border-radius: 0 0 var(--font-size-sm) 0;
color:var(--foreground); color: var(--foreground);
float:right; float: right;
padding:6px 12px; padding: 6px 12px;
position:relative; position: relative;
}
.icon-eye-closed,
.icon-eye-opened {
background-color: var(--foreground);
height: 1em;
width: 1em;
} }
.h-entry:not(:first-child) { .h-entry:not(:first-child) {
margin-top:var(--s); margin-top: var(--font-size-sm);
} }
.h-entry:not(embed) { .h-entry:not(embed) {
border:1px solid var(--border); border: 1px solid var(--border);
} }
.h-entry[id^="note-anchor-"]:target { .h-entry[id^="note-anchor-"]:target {
border:2px solid var(--accent)!important; border: 2px solid var(--accent) !important;
} }
.hr-replies-end:last-of-type,.note-text-details[open] .note-text-details-summary small { .hr-replies-end:last-of-type,
display:none; .note-text-details[open] .note-text-details-summary small {
display: none;
} }
.icon-eye-closed { .icon-eye-closed {
-moz-mask-image:url(icons/eye-closed.svg); -moz-mask-image: url(icons/eye-closed.svg);
-o-mask-image:url(icons/eye-closed.svg); -o-mask-image: url(icons/eye-closed.svg);
-webkit-mask-image:url(icons/eye-closed.svg); -webkit-mask-image: url(icons/eye-closed.svg);
background-color:var(--foreground); display: inline-flex;
display:inline-flex; mask-image: url(icons/eye-closed.svg);
height:1em;
mask-image:url(icons/eye-closed.svg);
width:1em;
} }
.icon-eye-opened { .icon-eye-opened {
-moz-mask-image:url(icons/eye-opened.svg); -moz-mask-image: url(icons/eye-opened.svg);
-o-mask-image:url(icons/eye-opened.svg); -o-mask-image: url(icons/eye-opened.svg);
-webkit-mask-image:url(icons/eye-opened.svg); -webkit-mask-image: url(icons/eye-opened.svg);
background-color:var(--foreground); display: inline-flex;
display:inline-flex; mask-image: url(icons/eye-opened.svg);
height:1em;
mask-image:url(icons/eye-opened.svg);
width:1em;
} }
.note-actions { .note-actions {
align-items:center; align-items: center;
display:flex; display: flex;
flex:1; flex: 1;
flex-direction:initial; flex-direction: initial;
justify-content:flex-end; justify-content: flex-end;
} }
.note-actions-extra-details hr { .note-actions-extra-details hr {
margin:unset; margin: unset;
} }
.note-actions-extra-details ul { .note-actions-extra-details ul {
display:flex; display: flex;
flex-direction:column; flex-direction: column;
} }
.note-actions-extra-details[open]>summary+*>a { .note-actions-extra-details[open] > summary + * > a {
font-size:.937rem; font-size: 0.937rem;
line-height:2; line-height: 2;
} }
.note-actions>li { .note-actions * {
display:inline-block; display: flex;
margin-left:8px; margin-left: 8px;
} }
.note-attachments { .note-attachments {
display:flex; display: flex;
flex-wrap:wrap; flex-wrap: wrap;
} }
.note-attachments-unit { .note-attachments-unit {
border-radius:var(--s); border-radius: var(--font-size-sm);
display:flex; display: flex;
height:min-content; height: min-content;
max-width:max-content; max-width: max-content;
padding:4px; padding: 4px;
} }
.note-attachments-unit:not(:only-child) { .note-attachments-unit:not(:only-child) {
margin-right:var(--s); margin-right: var(--font-size-sm);
} }
.note-attachments-unit>figure figcaption { .note-attachments-unit > figure figcaption {
display:flex; display: flex;
word-break:break-all; word-break: break-all;
} }
.note-attachments-unit>figure img { .note-attachments-unit > figure img {
height: auto; height: auto;
} }
.note-author-uri,.note-conversation-info,.note-text-details .note-text-details-summary small { .note-author-uri,
font-style:italic; .note-conversation-info,
.note-text-details .note-text-details-summary small {
font-style: italic;
} }
.note-complementary { .note-complementary {
background:var(--gradient-backwards); background: var(--gradient-backwards);
border-radius:var(--s) 0 var(--s) var(--s); border-radius: var(--font-size-sm) 0 var(--font-size-sm) var(--font-size-sm);
display:flex; display: flex;
flex-wrap:wrap; flex-wrap: wrap;
font-size:.937rem; font-size: var(--font-size-sm);
padding:4px 8px; padding: 8px 12px;
width:100%; width: 100%;
} }
.note-complementary-info span { .note-complementary-info span {
display:block; display: block;
line-height:1.3; line-height: 1.3;
} }
.note-content { .note-content {
border-radius:0 0 var(--s) var(--s); border-radius: 0 0 var(--font-size-sm) var(--font-size-sm);
display:block; display: block;
flex:1; flex: 1;
} }
.note-info { .note-info {
align-items:center; align-items: center;
display:flex; display: flex;
overflow:auto; text-overflow: ellipsis;
text-overflow:ellipsis; white-space: nowrap;
touch-action:manipulation;
white-space:nowrap;
} }
.note-info .note-conversation-info,.note-info .note-author-uri { .note-info .note-author-uri,
margin-left:4px; .note-info .note-conversation-info {
margin-left: 4px;
} }
.note-info small,.note-actions-extra-details summary,.note-replies-start { .note-actions-extra-details summary,
opacity:.5; .note-info small,
.note-replies-start {
opacity: 0.5;
} }
.note-info,embed header { .note-info,
border-bottom:unset; embed header {
border-radius:0 var(--s) 0 0; border-bottom: unset;
display:flex; border-radius: 0 var(--font-size-sm) 0 0;
line-height:initial; display: flex;
line-height: initial;
} }
.note-replies .note-replies { .note-replies .note-replies {
margin-left:1em; margin-left: 1em;
} }
.note-replies-indicator { .note-replies-indicator {
float:left; float: left;
margin-right:8px; margin-right: 8px;
opacity:.66; opacity: 0.66;
} }
.note-replies-indicator::before { .note-replies-indicator::before {
content:'\201C'; content: "\201C";
font-size:1.5em; font-size: 1.5em;
opacity:.66; opacity: 0.66;
} }
.note-replies-parent { .note-replies-parent {
font-size:.937rem; font-size: 0.937rem;
opacity:.66; opacity: 0.66;
} }
.note-sidebar { .note-sidebar {
display:flex; display: flex;
flex-direction:column; flex-direction: column;
padding:var(--s) 4px 4px var(--s); padding: var(--font-size-sm) 4px 4px var(--font-size-sm);
}
.note-text {
word-break:break-all;
} }
.note-text a { .note-text a {
text-decoration:underline!important; text-decoration: underline !important;
} }
.note-text-details-summary:after { .note-text-details-summary:after {
content:"\2193"; content: "\2193";
} }
.note-text-details[open] summary:after { .note-text-details[open] summary:after {
content:"\2191"; content: "\2191";
float:right; float: right;
} }
.note-wrapper { .note-wrapper {
flex:1; flex: 1;
height:inherit; height: inherit;
padding:4px; padding: 4px;
} }
.posting-extra [id|="note-compact"] { .posting-extra [id|="note-compact"] {
border:unset; border: unset;
border-bottom:1px solid var(--border); border-bottom: 1px solid var(--border);
} }
.repeat-button-container { .repeat-button-container {
-moz-mask-image:url(icons/repeat.svg); -moz-mask-image: url(icons/repeat.svg);
-o-mask-image:url(icons/repeat.svg); -o-mask-image: url(icons/repeat.svg);
-webkit-mask-image:url(icons/repeat.svg); -webkit-mask-image: url(icons/repeat.svg);
mask-image:url(icons/repeat.svg); mask-image: url(icons/repeat.svg);
} }
.reply-button-container { .reply-button-container {
-moz-mask-image:url(icons/reply.svg); -moz-mask-image: url(icons/reply.svg);
-o-mask-image:url(icons/reply.svg); -o-mask-image: url(icons/reply.svg);
-webkit-mask-image:url(icons/reply.svg); -webkit-mask-image: url(icons/reply.svg);
mask-image:url(icons/reply.svg); mask-image: url(icons/reply.svg);
} }
[id|="note-compact"] { [id|="note-compact"] {
display:block; display: block;
max-height:16vh; max-height: 16vh;
overflow:auto; width: 100%;
touch-action:manipulation;
width:100%;
word-break:break-all;
} }
[id|="note-compact"] .note-sidebar { [id|="note-compact"] .note-sidebar {
all:unset; all: unset;
display:inline-flex; display: inline-flex;
margin-right:4px; margin-right: 4px;
} }
[id|="note-compact"] .note-sidebar img,.note-sidebar img { .note-sidebar img,
background:unset!important; [id|="note-compact"] .note-sidebar img {
background: unset !important;
} }
[id|="note-compact"] .note-wrapper { [id|="note-compact"] .note-wrapper {
padding:var(--s); padding: var(--font-size-sm);
} }
[id|="note-compact"] hr { [id|="note-compact"] hr {
margin-bottom:4px; margin-bottom: 4px;
margin-top:4px; margin-top: 4px;
} }
@media only screen and (max-width:1280px) { @media only screen and (max-width: 1280px) {
.note-replies .note-replies { .note-replies .note-replies {
margin-left:.33em; margin-left: 0.33em;
} }
.note-replies-indicator::before { .note-replies-indicator::before {
content:'\201C'; content: "\201C";
font-size:1em; font-size: 1em;
opacity:.66; opacity: 0.66;
} }
} }

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

@ -1,166 +1,349 @@
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
* { /* Document
box-sizing:border-box!important; ========================================================================== */
max-width:100%;
}
body,html { /**
-moz-osx-font-smoothing:grayscale; * 1. Correct the line height in all browsers.
-webkit-font-smoothing:antialiased; * 2. Prevent adjustments of font size after orientation changes in iOS.
background-attachment:fixed; */
background-color:var(--background-hard);
font-family:"var(--unit) 'Open Sans'",sans-serif;
}
body,input,select,textarea {
color:var(--foreground);
}
:link,:visited {
color:currentColor;
text-decoration:none;
}
hr {
all:unset;
background-color:var(--border)!important;
display:block;
height:1px;
}
menu,ul {
list-style:none;
margin:unset;
padding:unset;
}
blockquote,body,fieldset,form,html,input,pre,textarea {
border:0;
margin:0;
padding:0;
}
fieldset {
all:unset;
}
:link img,:visited img,a img {
border:0;
}
address {
font-style:normal;
}
:focus {
outline:0;
}
::-moz-focus-inner {
border:0;
}
details summary {
cursor:pointer!important;
}
details summary>* {
margin:unset;
padding:unset;
}
details>summary {
list-style:none;
}
details>summary::-webkit-details-marker {
display:none;
}
[hidden] {
display:none;
}
html { html {
font-size:100%; line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
} }
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body { body {
font-family:'Open Sans',sans-serif; margin: 0;
font-weight:400;
line-height:1.75;
} }
p { /**
margin-bottom:var(--s); * Render the `main` element consistently in IE.
margin-top:0; */
main {
display: block;
} }
h1,h2,h3,h4,h5 { /**
font-family:'Poppins',sans-serif; * Correct the font size and margin on `h1` elements within `section` and
line-height:1.3; * `article` contexts in Chrome, Firefox, and Safari.
margin:var(--m) 0 var(--s); */
h1 {
font-size: 2em;
margin: 0.67em 0;
} }
h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,legend:first-child { /* Grouping content
margin-top:initial; ========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
} }
.doc-navigation,h1 { /**
font-size:1.383em; * 1. Correct the inheritance and scaling of font size in all browsers.
font-weight:700; * 2. Correct the odd `em` font sizing in all browsers.
margin-top:0; */
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
} }
h2 { /* Text-level semantics
font-size:1.296em; ========================================================================== */
font-weight:700;
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
} }
h3 { /**
font-size:1.215em; * 1. Remove the bottom border in Chrome 57-
font-weight:600; * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
} }
h4 { /**
font-size:1.138em; * Add the correct font weight in Chrome, Edge, and Safari.
font-weight:600; */
b,
strong {
font-weight: bolder;
} }
h5 { /**
font-size:1.067em; * 1. Correct the inheritance and scaling of font size in all browsers.
font-weight:600; * 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
} }
small,.text_small { /**
font-size:.937rem; * Add the correct font size in all browsers.
*/
small {
font-size: 80%;
} }
legend,label { /**
font-size:1.067rem; * Prevent `sub` and `sup` elements from affecting the line height in
font-weight:600; * all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
} }
input[type=password],input[type=text],textarea { sub {
padding:6px 8px; bottom: -0.25em;
} }
ul { sup {
list-style:none; top: -0.5em;
margin:0;
padding:0;
text-decoration:none;
} }
li { /* Embedded content
margin:0; ========================================================================== */
padding:0;
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
} }
a:focus,a:hover { /* Forms
text-decoration:underline; ========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
} }
:focus-visible { /**
box-shadow:var(--shadow-inset-accent) !important; * Show the overflow in IE.
} * 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}

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

@ -1,38 +1,66 @@
@media (prefers-color-scheme: dark) {
:root {
--m:1.067em;
--s:.666em;
--unit:1em;
--xl:1.138em;
--xxl:3.138em;
}
@media(prefers-color-scheme: dark) {
:root { :root {
--accent:#5ddbcf; --accent: #5ddbcf;
--background-card:#0e0e0f; --background-card: #0e0e0f;
--background-checkerboard:repeating-conic-gradient(#ffffff66 0 90deg,#ffffff33 0 180deg) 0 0/40px 40px round; --background-checkerboard: repeating-conic-gradient(#ffffff66 0 90deg, #ffffff33 0 180deg) 0 0/40px 40px round;
--background-hard:#0e0e0f; --background-hard: #0e0e0f;
--border:#26262c; --border: #26262c;
--foreground:#eff0f1; --foreground: #eff0f1;
--gradient:linear-gradient(5deg,var(--border) -33%,transparent 66%)!important; --gradient: linear-gradient(5deg, var(--border) -33%, transparent 66%) !important;
--gradient-backwards:linear-gradient(-5deg,var(--border) -33%,transparent 66%)!important; --gradient-backwards: linear-gradient(-5deg, var(--border) -33%, transparent 66%) !important;
--shadow:0 5px 20px -10px rgba(255,255,255,.1)!important; --shadow: 0 5px 20px -10px rgba(255, 255, 255, .1) !important;
--shadow-inset-accent:inset 0 0 0 2px var(--accent); --shadow-inset-accent: inset 0 0 0 2px var(--accent);
} }
} }
@media(prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
:root { :root {
--accent:#a22430; --accent: #a22430;
--background-card:#f0f0f0; --background-card: #f0f0f0;
--background-checkerboard:repeating-conic-gradient(#ffffff66 0 90deg,#ffffff33 0 180deg) 0 0/40px 40px round; --background-checkerboard: repeating-conic-gradient(#ffffff66 0 90deg, #ffffff33 0 180deg) 0 0/40px 40px round;
--background-hard:#ebebeb; --background-hard: #ebebeb;
--border:#c2c2c2; --border: #c2c2c2;
--foreground:#09090d; --foreground: #09090d;
--gradient:linear-gradient(10deg,var(--background-hard) 0,transparent)!important; --gradient: linear-gradient(10deg, var(--background-hard) 0, transparent) !important;
--gradient-backwards:linear-gradient(290deg,var(--background-hard) 0,var(--background-card) 100%)!important; --gradient-backwards: linear-gradient(290deg, var(--background-hard) 0, var(--background-card) 100%) !important;
--shadow:0 5px 20px -10px rgba(0,0,0,.1)!important; --shadow: 0 5px 20px -10px rgba(0, 0, 0, .1) !important;
--shadow-inset-accent:inset 0 0 0 2px var(--accent); --shadow-inset-accent: inset 0 0 0 2px var(--accent);
} }
} }
/* Fluid font size variables, for browsers that support clamp */
/* Fluid font size variables, for browsers that support clamp */
@supports (font-size: clamp(1rem, 1vw, 1rem)) {
:root {
--font-size-sm: clamp(0.9rem, -0.11vw + 0.93rem, 0.8rem);
--font-size-base: clamp(1.13rem, -0.13vw + 1.16rem, 1rem);
--font-size-md: clamp(1.41rem, -0.16vw + 1.45rem, 1.25rem);
--font-size-lg: clamp(1.76rem, -0.21vw + 1.81rem, 1.56rem);
--font-size-xl: clamp(2.2rem, -0.26vw + 2.26rem, 1.95rem);
--font-size-xxl: clamp(2.75rem, -0.32vw + 2.83rem, 2.44rem);
--font-size-xxxl: clamp(3.43rem, -0.4vw + 3.53rem, 3.05rem);
}
}
/* Fallback variables for browsers that don't support clamp */
@supports not (font-size: clamp(1rem, 1vw, 1rem)) {
:root {
--font-size-sm: 0.9rem;
--font-size-base: 1.13rem;
--font-size-md: 1.41rem;
--font-size-lg: 1.76rem;
--font-size-xl: 2.2rem;
--font-size-xxl: 2.75rem;
--font-size-xxxl: 3.43rem;
}
@media screen and (min-width: 1920px) {
:root {
--font-size-sm: 0.8rem;
--font-size-base: 1rem;
--font-size-md: 1.25rem;
--font-size-lg: 1.56rem;
--font-size-xl: 1.95rem;
--font-size-xxl: 2.44rem;
--font-size-xxxl: 3.05rem;
}
}
}

289
public/assets/default_theme/widgets.css
View File

@ -1,5 +1,18 @@
.footer ul li, .profile-info .avatar {
margin-right: var(--font-size-sm)
}
.details-summary-title:after, .section-settings-details summary:after {
float: right;
content: "\1F817"
}
.alert button, button {
cursor: pointer !important
}
*|::-moz-button-content { *|::-moz-button-content {
all: unset !important; all: unset !important
} }
.add-actor-button-container { .add-actor-button-container {
@ -7,392 +20,378 @@
-o-mask-image: url(icons/add-actor.svg); -o-mask-image: url(icons/add-actor.svg);
-webkit-mask-image: url(icons/add-actor.svg); -webkit-mask-image: url(icons/add-actor.svg);
mask-image: url(icons/add-actor.svg); mask-image: url(icons/add-actor.svg);
opacity: initial !important; opacity: initial !important
} }
.alert button { .alert button {
border-color: #ff6347 !important; border-color: tomato !important;
cursor: pointer !important; margin-top: unset !important
margin-top: unset !important;
} }
.alert, .alert-danger, .form-error, .form-row-widget-error { .alert, .alert-danger, .form-error, .form-row-widget-error {
align-items: center; align-items: center;
background-color: #FF634733; background-color: #ff634733;
border: solid 2px #ff6347; border: 2px solid tomato;
border-radius: var(--s); border-radius: var(--font-size-sm);
display: inline-flex; display: inline-flex;
font-style: italic; font-style: italic;
justify-content: space-between; justify-content: space-between;
margin-bottom: 6px; margin-bottom: 6px;
margin-top: 6px; margin-top: 6px;
padding: 2px 6px; padding: 2px 6px
}
.button-container, .button-container:focus, .button-container:hover {
border: none !important;
mask-repeat: no-repeat !important;
mask-size: cover !important
} }
.avatar { .avatar {
max-block-size: 2em; max-block-size: 2em;
width: auto; width: auto
} }
.button-container { .button-container {
background-color: var(--foreground); background-color: var(--foreground);
border: none !important;
display: inline-block; display: inline-block;
height: var(--unit); height: var(--font-size-base);
mask-repeat: no-repeat !important;
mask-size: cover !important;
opacity: .33; opacity: .33;
width: var(--unit); width: var(--font-size-base)
} }
.button-container:focus, .button-container:hover { .button-container:focus, .button-container:hover {
background-color: var(--accent); background-color: var(--accent);
border: none !important; opacity: 1
mask-repeat: no-repeat !important;
mask-size: cover !important;
opacity: 1;
} }
.button-container:not(:first-of-type) { .button-container:not(:first-of-type) {
margin-left: var(--s); margin-left: var(--font-size-sm)
} }
.container-block, .profile-info-url, .profile-info-url > *, .profile-navigation > *, .profile-stats-subscribers, .profile-stats-subscriptions, .section-settings-details-title { .container-block, .profile-info-url, .profile-info-url > *, .profile-navigation > *, .profile-stats-subscribers, .profile-stats-subscriptions, .section-settings-details-title {
display: block; display: block
} }
.container-grid { .container-grid {
display: grid; display: grid;
gap: var(--s); gap: var(--font-size-sm);
grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); grid-template-columns:repeat(auto-fit, minmax(200px, 1fr))
} }
.details-subtitle-summary a, .details-title-summary a { .details-subtitle-summary a, .details-title-summary a {
line-height: initial; line-height: initial
} }
.details-subtitle-summary svg:last-child, .details-title-summary svg:last-child { .details-subtitle-summary svg:last-child, .details-title-summary svg:last-child {
margin-left: 4px; margin-left: 4px
} }
.details-subtitle-summary ~ [class|="form-row"], .frame-section-padding { .details-subtitle-summary ~ [class|=form-row], .frame-section-padding {
padding: var(--s); padding: var(--font-size-sm)
} }
.details-subtitle-summary + * { .details-subtitle-summary + * {
background: var(--gradient); background: var(--gradient);
border-radius: var(--s); border-radius: var(--font-size-sm);
padding: 2px 8px; padding: 2px 8px
} }
.details-summary-subtitle { .details-summary-subtitle {
font: 900 1.067em "Open Sans", sans-serif; font: 900 1.067em "Open Sans", sans-serif;
padding: 6px 8px; padding: 6px 8px
} }
.details-summary-subtitle:after { .details-summary-subtitle:after {
content: "\1F815"; content: "\1F815";
display: block; display: block;
float: right; float: right;
position: relative; position: relative
} }
.details-summary-title { .details-summary-title {
font: 900 1.215em "Open Sans", sans-serif; font: 900 1.215em "Open Sans", sans-serif;
padding: 6px 8px; padding: 6px 8px
} }
.details-summary-title:after { .details-summary-title:after {
content: "\1F817";
display: block; display: block;
float: right; position: relative
position: relative;
}
.footer ul li {
margin-right: var(--s);
} }
.footer ul, .profile-info { .footer ul, .profile-info {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap
} }
.form-row { .form-row {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-bottom: var(--s); margin-bottom: var(--font-size-sm)
} }
.form-row-help { .form-row-help {
font-style: italic; font-style: italic;
margin-bottom: unset; margin-bottom: unset
} }
.form-row-widget { .form-row-widget {
display: block; display: block;
width: 100%; width: 100%
} }
.form-search { .form-search {
display: inline-block; display: inline-block;
margin-bottom: var(--m); margin-bottom: var(--font-size-base);
padding: unset !important; padding: unset !important
}
.frame-section, .frame-section hr, .profile, .section-details-subtitle .section-details-subtitle:not(:last-of-type), .section-details-subtitle:not(:last-of-type), .section-settings-details[open] > summary:first-child, button:not(:last-of-type) {
margin-bottom: var(--font-size-sm)
} }
.form-search span { .form-search span {
display: inline-flex; display: inline-flex;
width: 100%; width: 100%
} }
.form-search span .form-row { .form-search span .form-row {
flex: max-content; flex: max-content;
margin-bottom: unset; margin-bottom: unset;
flex: 2
} }
.form-search span button { .form-search span button {
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-left: none !important; border-left: none !important;
border-top-left-radius: 0; border-top-left-radius: 0;
flex: auto; flex: 1;
height: 100%; margin: unset
margin: unset;
} }
.form-search span input[type='text'] { .form-search span input[type=text] {
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
height: 100%; height: 100%;
margin: unset; margin: unset
} }
.form-search span label { .form-search span label {
display: block; display: block;
height: 0; height: 0;
opacity: 0; opacity: 0;
width: 0; width: 0
} }
.frame-section { .frame-section {
background-color: var(--background-card); background-color: var(--background-card);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--s); border-radius: var(--font-size-sm);
box-shadow: var(--shadow); box-shadow: var(--shadow);
display: flex; display: flex;
flex-direction: column; flex-direction: column
margin-bottom: var(--s);
} }
.frame-section hr, .section-details-subtitle .section-details-subtitle:not(:last-of-type), .section-details-subtitle:not(:last-of-type), .section-settings-details[open] > summary:first-child, button:not(:last-of-type) { .frame-section-button-like, .profile {
margin-bottom: var(--s); border: 1px solid var(--border);
background: var(--gradient)
}
.frame-section-button-like, .frame-section-paging {
display: block;
font-family: "Open Sans", sans-serif;
font-weight: 900
} }
.frame-section-button-like { .frame-section-button-like {
align-self: end; align-self: end;
background: var(--gradient); border-radius: var(--font-size-sm);
border: 1px solid var(--border);
border-radius: var(--s);
display: block;
font-family: "Open Sans", sans-serif;
font-weight: 900;
padding: 6px 8px; padding: 6px 8px;
width: max-content; width: max-content
} }
.frame-section-paging { .frame-section-paging {
display: block;
font-family: "Open Sans", sans-serif;
font-weight: 900;
margin-left: auto; margin-left: auto;
margin-top: var(--s); margin-top: var(--font-size-sm);
padding: 6px 12px; padding: 6px 12px
} }
.frame-section-title { .frame-section-title {
margin-left: unset; margin-left: unset
} }
.profile { .profile {
background: var(--gradient); border-radius: var(--font-size-sm);
border: 1px solid var(--border);
border-radius: var(--s);
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
margin-bottom: var(--s); padding: var(--font-size-base)
padding: var(--unit);
} }
.profile header { .profile header {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
vertical-align: middle; vertical-align: middle
} }
.profile-bio { .profile-bio {
margin-top: 4px; margin-top: 4px
} }
.profile-bio, .profile-info-url { .profile-bio, .profile-info-url {
word-break: break-all; word-break: break-all
} }
.profile-extra-actions { .profile-extra-actions {
background: var(--gradient), var(--background-hard); background: var(--gradient), var(--background-hard);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--s); border-radius: var(--font-size-sm);
display: inline-block; display: inline-block;
font-weight: 900; font-weight: 900;
margin-right: var(--s); margin-right: var(--font-size-sm);
margin-top: var(--s); margin-top: var(--font-size-sm);
padding: 4px 8px; padding: 4px 8px
} }
.profile-info .avatar { .profile-info .avatar {
border-radius: 2px; border-radius: 2px;
height: auto; height: auto;
margin-right: var(--s);
max-block-size: 3em; max-block-size: 3em;
width: auto; width: auto
} }
.profile-info section { .profile-info section {
flex: 1; flex: 1
} }
.profile-info-url strong, .heading-no-margin { .heading-no-margin, .profile-info-url strong {
font-size: 1.215rem; font-size: 1.215rem;
font-weight: 900; font-weight: 900
} }
.profile-info-url-remote { .profile-info-url-remote {
opacity: .66; opacity: .66
} }
.profile-stats { .profile-stats {
align-self: center; align-self: center;
margin-left: auto; margin-left: auto;
opacity: .66; opacity: .66;
text-align: right; text-align: right
} }
.profile-stats-subscribers strong, .profile-stats-subscriptions strong, .section-details-subtitle summary > :last-child, .section-details-title summary > :last-child { .profile-stats-subscribers strong, .profile-stats-subscriptions strong, .section-details-subtitle summary > :last-child, .section-details-title summary > :last-child {
margin-right: 4px; margin-right: 4px
} }
.profile-tags { .profile-tags {
margin: 4px unset unset; margin: 4px unset unset
} }
.remove-actor-button-container { .remove-actor-button-container {
-moz-mask-image: url(icons/remove-actor.svg); -moz-mask-image: url(icons/remove-actor.svg);
-o-mask-image: url(icons/remove-actor.svg); -o-mask-image: url(icons/remove-actor.svg);
-webkit-mask-image: url(icons/remove-actor.svg); -webkit-mask-image: url(icons/remove-actor.svg);
mask-image: url(icons/remove-actor.svg); mask-image: url(icons/remove-actor.svg)
} }
.section-checkbox-flex { .section-checkbox-flex {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: flex-start; justify-content: flex-start
} }
.section-checkbox-flex > * { .section-checkbox-flex > * {
margin-right: var(--m); margin-right: var(--font-size-base)
} }
.section-details-subtitle summary, .section-details-title summary { .section-details-subtitle summary, .section-details-title summary {
background: var(--gradient); background: var(--gradient);
border-radius: var(--s); border-radius: var(--font-size-sm);
display: block; display: block;
font-family: 'Open Sans', sans-serif !important; font-family: 'Open Sans', sans-serif !important;
font-weight: 900 !important; font-weight: 900 !important;
width: 100%; width: 100%
} }
.section-details-subtitle summary > *, .section-details-title summary > * { .section-details-subtitle summary > *, .section-details-title summary > * {
display: inline-block; display: inline-block
} }
.section-details-subtitle:not([open]) > .details-summary-subtitle:after { .section-details-subtitle:not([open]) > .details-summary-subtitle:after {
animation: fadeOut 200ms cubic-bezier(0, 0.55, 0.45, 1); animation: .2s cubic-bezier(0, .55, .45, 1) fadeOut;
content: "\1F817"; content: "\1F817"
} }
.section-details-subtitle[open] > .details-summary-subtitle:after, .section-details-title:not([open]) > .details-summary-title:after, .section-settings-details:not([open]) summary:after { .section-details-subtitle[open] > .details-summary-subtitle:after, .section-details-title:not([open]) > .details-summary-title:after, .section-settings-details:not([open]) summary:after {
animation: fadeIn 200ms cubic-bezier(0, 0.55, 0.45, 1); animation: .2s cubic-bezier(0, .55, .45, 1) fadeIn;
transform: initial; transform: initial
} }
.section-details-title[open] > .details-summary-title:after { .section-details-title[open] > .details-summary-title:after {
animation: fadeOut 200ms cubic-bezier(0, 0.55, 0.45, 1); animation: .2s cubic-bezier(0, .55, .45, 1) fadeOut;
content: "\1F815"; content: "\1F815"
} }
.section-form { .section-form {
background-color: var(--background-card); background-color: var(--background-card);
border-radius: var(--s); border-radius: var(--font-size-sm);
display: block; display: block;
max-width: 100%; max-width: 100%;
padding: var(--s); padding: var(--font-size-sm);
width: 100%; width: 100%
} }
.section-form-legend { .section-form-legend {
font-weight: 700; font-weight: 700;
margin-bottom: var(--s); margin-bottom: var(--font-size-sm);
margin-top: unset; margin-top: unset
} }
.section-settings { .section-settings {
background: var(--background-card); background: var(--background-card);
border: 1px solid var(--border); border: 1px solid var(--border);
box-shadow: var(--shadow); box-shadow: var(--shadow)
} }
.section-settings hr { .section-settings hr {
margin-bottom: .6rem; margin-bottom: .6rem;
margin-top: .6rem; margin-top: .6rem
} }
.section-settings, .section-settings-details { .section-settings, .section-settings-details {
border-radius: .6rem; border-radius: .6rem;
box-sizing: border-box; box-sizing: border-box;
margin-bottom: .6rem; margin-bottom: .6rem;
padding: .6rem; padding: .6rem
} }
.section-settings-details { .section-settings-details {
border: 1px solid var(--border); border: 1px solid var(--border)
} }
.section-settings-details summary + form { .section-settings-details summary + form {
padding-left: var(--s); padding-left: var(--font-size-sm)
} }
.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; text-transform: uppercase
}
.section-settings-details summary:after {
content: "\1F817";
float: right;
} }
.section-settings-details[open] { .section-settings-details[open] {
border-left: 2px solid var(--foreground); border-left: 2px solid var(--foreground)
} }
.section-settings-details[open] .set-nav li:last-of-type { .section-settings-details[open] .set-nav li:last-of-type {
margin-bottom: 0; margin-bottom: 0
} }
.section-settings-details[open] > summary:after { .section-settings-details[open] > summary:after {
animation: fadeOut 200ms cubic-bezier(0, 0.55, 0.45, 1); animation: .2s cubic-bezier(0, .55, .45, 1) fadeOut;
transform: rotate(180deg); transform: rotate(180deg)
} }
.section-title { .section-title {
margin-top: 0; margin-top: 0
} }
::file-selector-button { ::file-selector-button {
@ -403,38 +402,34 @@
fill: var(--foreground); fill: var(--foreground);
font-family: 'Open Sans', sans-serif !important; font-family: 'Open Sans', sans-serif !important;
font-weight: 900 !important; font-weight: 900 !important;
margin: 3px; margin: 3px
} }
button { button {
cursor: pointer !important;
display: block !important; display: block !important;
font-family: "Open Sans", sans-serif !important; font-family: "Open Sans", sans-serif !important;
font-weight: 900 !important; font-weight: 900 !important;
margin-left: auto !important; margin-left: auto !important
} }
button, input, select, textarea { button, input, select, textarea {
border: 1px solid var(--border) !important; border: 1px solid var(--border) !important;
border-radius: var(--s); border-radius: var(--font-size-sm);
color: var(--foreground) !important; color: var(--foreground) !important;
font-size: inherit !important; font-size: inherit !important;
max-width: border-box; max-width: border-box;
overflow: hidden; overflow: hidden;
padding: 6px 8px !important; padding: 6px 8px !important;
width: auto; width: auto;
} background: var(--gradient) !important
button, select, textarea, button, input {
background: var(--gradient) !important;
} }
input + label { input + label {
margin-left: 3px; margin-left: 3px
} }
input[type=checkbox] { input[type=checkbox] {
accent-color: var(--accent); accent-color: var(--accent)
} }
input[type=color] { input[type=color] {
@ -442,47 +437,47 @@ input[type=color] {
background-color: transparent; background-color: transparent;
border: 0; border: 0;
cursor: pointer; cursor: pointer;
height: var(--xxl); height: var(--font-size-xxxl);
width: var(--xxl); width: var(--font-size-xxxl)
} }
input[type=color]::-webkit-color-swatch, input[type=color]::-moz-color-swatch { input[type=color]::-moz-color-swatch, input[type=color]::-webkit-color-swatch {
border: 0; border: 0;
border-radius: var(--s); border-radius: var(--font-size-sm)
} }
input[type=file] { input[type=file] {
all: unset; all: unset;
background: var(--gradient) !important; background: var(--gradient) !important;
border-radius: var(--s); border-radius: var(--font-size-sm);
display: block; display: block;
font-family: 'Open Sans', sans-serif !important; font-family: 'Open Sans', sans-serif !important;
font-weight: 400 !important; font-weight: 400 !important;
padding: unset !important; padding: unset !important
} }
input[type=radio], input[type=checkbox] { input[type=checkbox], input[type=radio] {
background: initial; background: initial
} }
select { select {
background-repeat: no-repeat; background-repeat: no-repeat;
border-radius: var(--s); border-radius: var(--font-size-sm);
cursor: pointer; cursor: pointer;
max-width: 100%; max-width: 100%
} }
select::-ms-expand { select::-ms-expand {
display: none; display: none
} }
select[multiple] { select[multiple] {
height: 8rem; height: 8rem;
overflow-y: scroll; overflow-y: scroll
} }
textarea.form-row-widget { textarea.form-row-widget {
font: 400 1rem "Open Sans", sans-serif; font: 400 1rem "Open Sans", sans-serif;
height: 7rem; height: 7rem;
resize: vertical; resize: vertical
} }

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

@ -13,7 +13,7 @@
.collection-add > form > div button { .collection-add > form > div button {
margin-top: 0; margin-top: 0;
margin-bottom: var(--s); margin-bottom: var(--font-size-sm);
} }
@media only screen and (max-width:465px) { @media only screen and (max-width:465px) {
@ -27,7 +27,7 @@
} }
.collection-add > form > div button { .collection-add > form > div button {
margin-top: var(--s); margin-top: var(--font-size-sm);
margin-bottom: 0; margin-bottom: 0;
} }
} }
@ -79,7 +79,7 @@
.collections-list .collection-item { .collections-list .collection-item {
border: 2px solid var(--border); border: 2px solid var(--border);
border-radius: var(--s); border-radius: var(--font-size-sm);
padding: 10px 20px; padding: 10px 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

6
public/plugins/AttachmentCollections/assets/css/pages.css
View File

@ -10,7 +10,7 @@
} }
.attachment-collection-add > form > div button { .attachment-collection-add > form > div button {
margin-top: 0px; margin-top: 0px;
margin-bottom: var(--s); margin-bottom: var(--font-size-sm);
} }
@media only screen and (max-width:465px) { @media only screen and (max-width:465px) {
.attachment-collection-add > form, .attachment-collection-add > form > div .mb-6 { .attachment-collection-add > form, .attachment-collection-add > form > div .mb-6 {
@ -21,7 +21,7 @@
flex-direction: column; flex-direction: column;
} }
.attachment-collection-add > form > div button { .attachment-collection-add > form > div button {
margin-top: var(--s);; margin-top: var(--font-size-sm);;
margin-bottom: 0px; margin-bottom: 0px;
} }
} }
@ -67,7 +67,7 @@
} }
.attachment-collections-list .attachment-collection-item { .attachment-collections-list .attachment-collection-item {
border: 2px solid var(--border); border: 2px solid var(--border);
border-radius: var(--s); border-radius: var(--font-size-sm);
padding: 10px 20px; padding: 10px 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

2
public/plugins/NoteTypeFeedFilter/assets/css/noteTypeFeedFilter.css
View File

@ -1,6 +1,6 @@
.media-feed-tabs { .media-feed-tabs {
border: 2px solid var(--border); border: 2px solid var(--border);
border-radius: var(--s) var(--s) 0 0; border-radius: var(--font-size-sm) var(--font-size-sm) 0 0;
border-bottom: none; border-bottom: none;
display: flex; display: flex;
} }

4
public/plugins/PinnedNotes/assets/css/pinned-notes.css
View File

@ -8,6 +8,6 @@
opacity: 1 !important; opacity: 1 !important;
} }
.feed.pinned { .feed.pinned {
margin-top: var(--m); margin-top: var(--font-size-base);
margin-bottom: var(--m); margin-bottom: var(--font-size-base);
} }

1
src/Core/Event.php
View File

@ -119,6 +119,7 @@ abstract class Event
*/ */
public static function handle(string $name, array $args = [], string $ns = 'GNUsocial.'): EventResult public static function handle(string $name, array $args = [], string $ns = 'GNUsocial.'): EventResult
{ {
//dd(func_get_args());
return self::$dispatcher->dispatch(new GSEvent($name, $args), $ns . $name)->getResult(); return self::$dispatcher->dispatch(new GSEvent($name, $args), $ns . $name)->getResult();
} }

2
templates/base.html.twig
View File

@ -88,7 +88,7 @@
<header class="page-header"> <header class="page-header">
{{ block("leftpanel", "stdgrid.html.twig") }} {{ block("leftpanel", "stdgrid.html.twig") }}
<div class="header-instance"> <div class="header-title">
<a id="anchor-main-page" class="anchor-hidden" <a id="anchor-main-page" class="anchor-hidden"
title="{% trans %}Press tab to access instance's main page{% endtrans %}"></a> title="{% trans %}Press tab to access instance's main page{% endtrans %}"></a>
<a class="accessibility-target" href="{{ path('feed_public') }}" tabindex="0" <a class="accessibility-target" href="{{ path('feed_public') }}" tabindex="0"