From 87559e9a8cfc22e64c983b5495851a1f825f8657 Mon Sep 17 00:00:00 2001 From: Eliseu Amaro Date: Fri, 25 Nov 2022 14:51:39 +0100 Subject: [PATCH] [CSS] Improved reset.css, better and more granular sizes added Search form dimensions fixed, page header alignment issues fixed, and consistent font sizes used throughout --- .../templates/oomox/root_override.css.twig | 10 +- public/assets/default_theme/base.css | 520 +++++++++++++----- public/assets/default_theme/feeds.css | 437 ++++++++------- public/assets/default_theme/reset.css | 441 ++++++++++----- public/assets/default_theme/root.css | 90 +-- public/assets/default_theme/widgets.css | 289 +++++----- .../Collection/assets/css/pages.css | 6 +- .../assets/css/pages.css | 6 +- .../assets/css/noteTypeFeedFilter.css | 2 +- .../PinnedNotes/assets/css/pinned-notes.css | 4 +- src/Core/Event.php | 1 + templates/base.html.twig | 2 +- 12 files changed, 1131 insertions(+), 677 deletions(-) diff --git a/plugins/Oomox/templates/oomox/root_override.css.twig b/plugins/Oomox/templates/oomox/root_override.css.twig index 1970d498b8..ce9f0aa94f 100644 --- a/plugins/Oomox/templates/oomox/root_override.css.twig +++ b/plugins/Oomox/templates/oomox/root_override.css.twig @@ -1,9 +1,9 @@ :root { - --s: .6rem; - --unit: 1rem; - --m: 1.3rem; - --xl: 1.62rem; - --xxl: 3rem; + --font-size-sm: .6rem; + --font-size-base: 1rem; + --font-size-base: 1.3rem; + --font-size-md: 1.62rem; + --font-size-xxxl: 3rem; } @media (prefers-color-scheme: dark) { diff --git a/public/assets/default_theme/base.css b/public/assets/default_theme/base.css index 4102b9f71d..704fd4d2bf 100644 --- a/public/assets/default_theme/base.css +++ b/public/assets/default_theme/base.css @@ -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 { - font-family:'Open Sans',sans-serif; - background-image:url(images/noise.png); + font-size: 100%; + 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; } +.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 { fill: var(--foreground); -} - -.accessibility-menu { - 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; + height: 1em; + vertical-align: center; + width: 1em; } .markdown-blocks { - background-color:var(--background-card)!important; - border-radius:0 0 var(--s) var(--s); - padding:var(--s); + border-radius: 0 0 var(--font-size-sm) var(--font-size-sm); } .markdown-blocks ul { - list-style:disc; - margin-left:1em; + list-style: disc; + margin-left: 1em; } .markdown-blocks ul li { - margin-bottom:.2em; + margin-bottom: 0.2em; } .page-content { - margin-top:var(--s); - width:100%; + width: 100%; } .page-content-wrapper { - margin-left:auto; - margin-right:auto; - padding:var(--s) var(--s) 0; - position:relative; - top:var(--xxl); + padding: var(--font-size-sm) var(--font-size-sm) 0; + position: relative; + top: calc(2 * var(--font-size-sm) + var(--font-size-lg)); +} + +.page-header, +.section-panel { + padding: var(--font-size-sm); + position: fixed; } .page-header { - background:var(--background-card); - box-shadow:var(--shadow); - display:inline-flex; - height:var(--xxl); - padding:var(--s); - position:fixed; - top:0; - z-index:1; + display: inline-flex; + background: var(--background-card); + box-shadow: var(--shadow); + height: calc(2 * var(--font-size-sm) + var(--font-size-lg)); + 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 { - float:left; + float: left; } .page-header #toggle-panel-right { - float:right; -} - -.page-header .header-instance { - text-align:center; + float: right; } .section-panel { - padding:var(--s); - position:fixed; - top:var(--xxl); + top: calc(2 * var(--font-size-sm) + var(--font-size-lg)); } .section-panel .panel-content { - display:block; - height:calc(100vh - var(--xxl)); - overflow:auto; + display: block; + height: calc(100vh - var(--font-size-xxl)); + overflow: auto; } .section-panel-left { - left:0; + left: 0; } .section-panel-right { - right:0; + right: 0; +} + +.panel-left-icon, +.panel-right-icon { + align-self: self-end; } hr { - margin-bottom:var(--s); - margin-top:var(--s); + background-color: var(--border) !important; + display: block; + height: 1px; } @media only screen and (max-width: 512px) { html { - font-size:85%; + font-size: 85%; } } @media only screen and (max-width: 1280px) { - #toggle-panel-left:checked~.section-panel-left,#toggle-panel-right:checked~.section-panel-right { - background-color:var(--background-hard); - box-shadow:var(--shadow); - left:0; - width:100vw; - z-index:auto; + #toggle-panel-left:checked ~ .section-panel-left, + #toggle-panel-right:checked ~ .section-panel-right { + background-color: var(--background-hard); + box-shadow: var(--shadow); + left: 0; + width: 100vw; + z-index: auto; } - #toggle-panel-left:not(:checked)~.section-panel-left,#toggle-panel-right:not(:checked)~.section-panel-right { - display:none; + #toggle-panel-left:not(:checked) ~ .section-panel-left, + #toggle-panel-right:not(:checked) ~ .section-panel-right { + display: none; } .page-content { - max-width:100%; + max-width: 100%; } - .page-header,.page-content-wrapper { - width:100%; + .page-content-wrapper, + .page-header { + width: 100%; } - input[id|=toggle-panel] { - position:absolute; - top:-100%; + input[id|="toggle-panel"] { + position: absolute; + top: -100%; } - label[for|=toggle-panel] { - cursor:pointer; + label[for|="toggle-panel"] { + cursor: pointer; } } @media only screen and (min-width: 1281px) { .page-content-wrapper { - width:66vw; + width: 66vw; } .page-header { - width:100%; + width: 100%; } .section-panel { - width:17vw; + width: 17vw; } - a[id|=anchor]:target+.accessibility-target { - animation-duration:.6s; - animation-name:highlight; - animation-timing-function:ease-in-out; + a[id|="anchor"]:target + .accessibility-target { + animation-duration: 0.6s; + animation-name: highlight; + animation-timing-function: ease-in-out; } - label[for|=toggle-panel],input[id|=toggle-panel] { - display:none!important; + input[id|="toggle-panel"], + label[for|="toggle-panel"] { + display: none !important; } } @media only screen and (min-width: 1921px) { .page-content-wrapper { - width:44vw; + width: 44vw; } .page-header { - width:66vw; + width: 66vw; } .section-panel { - width:11vw; + width: 11vw; } - .page-header,.section-panel-left { - left:17vw; + .page-header, + .section-panel-left { + left: 17vw; } .section-panel-right { - right:17vw; + right: 17vw; } - label[for|=toggle-panel],input[id|=toggle-panel] { - display:none!important; + input[id|="toggle-panel"], + label[for|="toggle-panel"] { + display: none !important; } } @keyframes fadeIn { 0% { - opacity:0; - transform:translateY(-10px); + opacity: 0; + transform: translateY(-10px); } - 100% { - opacity:unset; - transform:none; + opacity: unset; + transform: none; } } @keyframes fadeOut { 0% { - opacity:unset; - transform:none; + opacity: unset; + transform: none; } - 100% { - opacity:0; - transform:translateY(-10px); + opacity: 0; + transform: translateY(-10px); } } @keyframes highlight { - 0%,100% { - border-radius:var(--s); - box-shadow:initial; + 0%, + 100% { + border-radius: var(--font-size-sm); + 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; + border-radius: var(--font-size-sm); + box-shadow: inset 0 20px 40px #fff; + transition: box-shadow 0.3s ease-in-out; + z-index: 666; } -} \ No newline at end of file +} diff --git a/public/assets/default_theme/feeds.css b/public/assets/default_theme/feeds.css index 52e5abec8f..1a3e98ac2c 100644 --- a/public/assets/default_theme/feeds.css +++ b/public/assets/default_theme/feeds.css @@ -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 { - -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); + -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); + border: unset; + padding: var(--font-size-sm); } -.embed .p-author,.embed .p-name,.note-author-url,.note-complementary-info a { - font-weight:600; +.embed .p-author, +.embed .p-name, +.note-author-url, +.note-complementary-info a { + font-weight: 600; } .embed .p-summary { - width:60%; + width: 60%; } .embed .p-summary hr { - margin-bottom:var(--s); - margin-top:var(--s); + margin-bottom: var(--font-size-sm); + margin-top: var(--font-size-sm); } .embed header { - margin-bottom:var(--m); - width:100%; + margin-bottom: var(--font-size-base); + width: 100%; } .embed img { - margin-right:var(--s); - max-block-size:128px; - padding:unset; - width:auto; + margin-right: var(--font-size-sm); + max-block-size: 128px; + padding: unset; + width: auto; } .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); + -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); } -.feed-actions-details summary,.note-actions-extra-details summary { - display:block; +.feed-actions-details summary, +.note-actions-extra-details summary { + display: block; } .feed-actions-details-dropdown { - font-size:.937rem; + font-size: 0.937rem; } .feed-actions-details[open] svg { - height:auto; - width:1em; + height: auto; + width: 1em; } -.feed-actions-details[open]>.feed-actions-details-dropdown,.note-actions-extra-details[open]>summary+* { - background:var(--background-card); - border:1px solid var(--border); - border-radius:var(--s); - box-shadow:var(--shadow); - display:flex; - flex-direction:column; - padding:4px 8px; - position:absolute; - right:0; - width:max-content; - z-index:1; +.feed-actions-details[open] > .feed-actions-details-dropdown, +.note-actions-extra-details[open] > summary + * { + background: var(--background-card); + border: 1px solid var(--border); + border-radius: var(--font-size-sm); + box-shadow: var(--shadow); + display: flex; + flex-direction: column; + padding: 4px 8px; + position: absolute; + right: 0; + width: max-content; + z-index: 1; } -.feed-actions-details[open]>summary,.note-actions-extra-details[open]>summary,.note-actions-set { - opacity:1!important; +.feed-actions-details[open] > summary, +.note-actions-extra-details[open] > summary, +.note-actions-set { + opacity: 1 !important; } .feed-empty .feed-background { - height:auto; - margin-left:auto; - margin-right:auto; - margin-top:var(--xxl); - opacity:3%; - width:40%; -} - -.feed-empty,.note-end { - display:flex; + height: auto; + margin-left: auto; + margin-right: auto; + margin-top: var(--font-size-xxxl); + opacity: 3%; + width: 40%; } .feed-header { - align-items:center; - display:flex; - margin-bottom:var(--m); + align-items: center; + margin-bottom: var(--font-size-base); } .feed-header .feed-actions { - margin-left:auto; - text-transform:capitalize; + margin-left: auto; + text-transform: capitalize; } -.feed-header>h1,.feed-header>h2,.feed-header>h3,.feed-header>h4,.feed-header>h5,.feed-header>h6 { - margin-bottom:unset; +.feed-header > h1, +.feed-header > h2, +.feed-header > h3, +.feed-header > h4, +.feed-header > h5, +.feed-header > h6 { + margin-bottom: unset; } .h-entry { - background-color:var(--background-card); - border-radius:var(--s); - display:flex; - flex-wrap:wrap; + background-color: var(--background-card); + border-radius: var(--font-size-sm); + flex-wrap: wrap; } .h-entry .embed[class*="p-"] { - padding:unset; + padding: unset; } .h-entry a:focus { - text-decoration:underline; + text-decoration: underline; } -.h-entry figure,.note-attachments-unit figure { - background:var(--gradient); - border-radius:var(--s); - margin:unset; - padding:var(--s); +.h-entry figure, +.note-attachments-unit figure { + background: var(--gradient); + border-radius: var(--font-size-sm); + margin: unset; + padding: var(--font-size-sm); } -.h-entry img,.note-attachments-unit figure img { - background:repeating-conic-gradient(#ffffff66 0 90deg,#ffffff33 0 180deg) 0 0/40px 40px round; +.h-entry img, +.note-attachments-unit figure img { + background: repeating-conic-gradient(#ffffff66 0 90deg, #ffffff33 0 180deg) 0 0/40px 40px round; } .h-entry-language { - background:var(--gradient-backwards); - border-radius:0 0 var(--s) 0; - color:var(--foreground); - float:right; - padding:6px 12px; - position:relative; + background: var(--gradient-backwards); + border-radius: 0 0 var(--font-size-sm) 0; + color: var(--foreground); + float: right; + padding: 6px 12px; + position: relative; +} + +.icon-eye-closed, +.icon-eye-opened { + background-color: var(--foreground); + height: 1em; + width: 1em; } .h-entry:not(:first-child) { - margin-top:var(--s); + margin-top: var(--font-size-sm); } .h-entry:not(embed) { - border:1px solid var(--border); + border: 1px solid var(--border); } .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 { - display:none; +.hr-replies-end:last-of-type, +.note-text-details[open] .note-text-details-summary small { + display: none; } .icon-eye-closed { - -moz-mask-image:url(icons/eye-closed.svg); - -o-mask-image:url(icons/eye-closed.svg); - -webkit-mask-image:url(icons/eye-closed.svg); - background-color:var(--foreground); - display:inline-flex; - height:1em; - mask-image:url(icons/eye-closed.svg); - width:1em; + -moz-mask-image: url(icons/eye-closed.svg); + -o-mask-image: url(icons/eye-closed.svg); + -webkit-mask-image: url(icons/eye-closed.svg); + display: inline-flex; + mask-image: url(icons/eye-closed.svg); } .icon-eye-opened { - -moz-mask-image:url(icons/eye-opened.svg); - -o-mask-image:url(icons/eye-opened.svg); - -webkit-mask-image:url(icons/eye-opened.svg); - background-color:var(--foreground); - display:inline-flex; - height:1em; - mask-image:url(icons/eye-opened.svg); - width:1em; + -moz-mask-image: url(icons/eye-opened.svg); + -o-mask-image: url(icons/eye-opened.svg); + -webkit-mask-image: url(icons/eye-opened.svg); + display: inline-flex; + mask-image: url(icons/eye-opened.svg); } .note-actions { - align-items:center; - display:flex; - flex:1; - flex-direction:initial; - justify-content:flex-end; + align-items: center; + display: flex; + flex: 1; + flex-direction: initial; + justify-content: flex-end; } .note-actions-extra-details hr { - margin:unset; + margin: unset; } .note-actions-extra-details ul { - display:flex; - flex-direction:column; + display: flex; + flex-direction: column; } -.note-actions-extra-details[open]>summary+*>a { - font-size:.937rem; - line-height:2; +.note-actions-extra-details[open] > summary + * > a { + font-size: 0.937rem; + line-height: 2; } -.note-actions>li { - display:inline-block; - margin-left:8px; +.note-actions * { + display: flex; + margin-left: 8px; } .note-attachments { - display:flex; - flex-wrap:wrap; + display: flex; + flex-wrap: wrap; } .note-attachments-unit { - border-radius:var(--s); - display:flex; - height:min-content; - max-width:max-content; - padding:4px; + border-radius: var(--font-size-sm); + display: flex; + height: min-content; + max-width: max-content; + padding: 4px; } .note-attachments-unit:not(:only-child) { - margin-right:var(--s); + margin-right: var(--font-size-sm); } -.note-attachments-unit>figure figcaption { - display:flex; - word-break:break-all; +.note-attachments-unit > figure figcaption { + display: flex; + word-break: break-all; } -.note-attachments-unit>figure img { +.note-attachments-unit > figure img { height: auto; } -.note-author-uri,.note-conversation-info,.note-text-details .note-text-details-summary small { - font-style:italic; +.note-author-uri, +.note-conversation-info, +.note-text-details .note-text-details-summary small { + font-style: italic; } .note-complementary { - background:var(--gradient-backwards); - border-radius:var(--s) 0 var(--s) var(--s); - display:flex; - flex-wrap:wrap; - font-size:.937rem; - padding:4px 8px; - width:100%; + background: var(--gradient-backwards); + border-radius: var(--font-size-sm) 0 var(--font-size-sm) var(--font-size-sm); + display: flex; + flex-wrap: wrap; + font-size: var(--font-size-sm); + padding: 8px 12px; + width: 100%; } .note-complementary-info span { - display:block; - line-height:1.3; + display: block; + line-height: 1.3; } .note-content { - border-radius:0 0 var(--s) var(--s); - display:block; - flex:1; + border-radius: 0 0 var(--font-size-sm) var(--font-size-sm); + display: block; + flex: 1; } .note-info { - align-items:center; - display:flex; - overflow:auto; - text-overflow:ellipsis; - touch-action:manipulation; - white-space:nowrap; + align-items: center; + display: flex; + text-overflow: ellipsis; + white-space: nowrap; } -.note-info .note-conversation-info,.note-info .note-author-uri { - margin-left:4px; +.note-info .note-author-uri, +.note-info .note-conversation-info { + margin-left: 4px; } -.note-info small,.note-actions-extra-details summary,.note-replies-start { - opacity:.5; +.note-actions-extra-details summary, +.note-info small, +.note-replies-start { + opacity: 0.5; } -.note-info,embed header { - border-bottom:unset; - border-radius:0 var(--s) 0 0; - display:flex; - line-height:initial; +.note-info, +embed header { + border-bottom: unset; + border-radius: 0 var(--font-size-sm) 0 0; + display: flex; + line-height: initial; } .note-replies .note-replies { - margin-left:1em; + margin-left: 1em; } .note-replies-indicator { - float:left; - margin-right:8px; - opacity:.66; + float: left; + margin-right: 8px; + opacity: 0.66; } .note-replies-indicator::before { - content:'\201C'; - font-size:1.5em; - opacity:.66; + content: "\201C"; + font-size: 1.5em; + opacity: 0.66; } .note-replies-parent { - font-size:.937rem; - opacity:.66; + font-size: 0.937rem; + opacity: 0.66; } .note-sidebar { - display:flex; - flex-direction:column; - padding:var(--s) 4px 4px var(--s); -} - -.note-text { - word-break:break-all; + display: flex; + flex-direction: column; + padding: var(--font-size-sm) 4px 4px var(--font-size-sm); } .note-text a { - text-decoration:underline!important; + text-decoration: underline !important; } .note-text-details-summary:after { - content:"\2193"; + content: "\2193"; } .note-text-details[open] summary:after { - content:"\2191"; - float:right; + content: "\2191"; + float: right; } .note-wrapper { - flex:1; - height:inherit; - padding:4px; + flex: 1; + height: inherit; + padding: 4px; } .posting-extra [id|="note-compact"] { - border:unset; - border-bottom:1px solid var(--border); + border: unset; + border-bottom: 1px solid var(--border); } .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); + -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); } .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); + -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); } [id|="note-compact"] { - display:block; - max-height:16vh; - overflow:auto; - touch-action:manipulation; - width:100%; - word-break:break-all; + display: block; + max-height: 16vh; + width: 100%; } [id|="note-compact"] .note-sidebar { - all:unset; - display:inline-flex; - margin-right:4px; + all: unset; + display: inline-flex; + margin-right: 4px; } -[id|="note-compact"] .note-sidebar img,.note-sidebar img { - background:unset!important; +.note-sidebar img, +[id|="note-compact"] .note-sidebar img { + background: unset !important; } [id|="note-compact"] .note-wrapper { - padding:var(--s); + padding: var(--font-size-sm); } [id|="note-compact"] hr { - margin-bottom:4px; - margin-top:4px; + margin-bottom: 4px; + margin-top: 4px; } -@media only screen and (max-width:1280px) { +@media only screen and (max-width: 1280px) { .note-replies .note-replies { - margin-left:.33em; + margin-left: 0.33em; } .note-replies-indicator::before { - content:'\201C'; - font-size:1em; - opacity:.66; + content: "\201C"; + font-size: 1em; + opacity: 0.66; } -} \ No newline at end of file +} diff --git a/public/assets/default_theme/reset.css b/public/assets/default_theme/reset.css index 8ade12d345..6d1403e5c4 100644 --- a/public/assets/default_theme/reset.css +++ b/public/assets/default_theme/reset.css @@ -1,166 +1,349 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ -* { - box-sizing:border-box!important; - max-width:100%; -} +/* Document + ========================================================================== */ -body,html { - -moz-osx-font-smoothing:grayscale; - -webkit-font-smoothing:antialiased; - 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; -} +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ html { - font-size:100%; + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ } +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + body { - font-family:'Open Sans',sans-serif; - font-weight:400; - line-height:1.75; + margin: 0; } -p { - margin-bottom:var(--s); - margin-top:0; +/** + * Render the `main` element consistently in IE. + */ + +main { + display: block; } -h1,h2,h3,h4,h5 { - font-family:'Poppins',sans-serif; - line-height:1.3; - margin:var(--m) 0 var(--s); +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +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 { - margin-top:initial; +/* Grouping content + ========================================================================== */ + +/** + * 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; - font-weight:700; - margin-top:0; +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ } -h2 { - font-size:1.296em; - font-weight:700; +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; } -h3 { - font-size:1.215em; - font-weight:600; +/** + * 1. Remove the bottom border in Chrome 57- + * 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; - font-weight:600; +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; } -h5 { - font-size:1.067em; - font-weight:600; +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 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; - font-weight:600; +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } -input[type=password],input[type=text],textarea { - padding:6px 8px; +sub { + bottom: -0.25em; } -ul { - list-style:none; - margin:0; - padding:0; - text-decoration:none; +sup { + top: -0.5em; } -li { - margin:0; - padding:0; +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; } -a:focus,a:hover { - text-decoration:underline; +/* Forms + ========================================================================== */ + +/** + * 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; -} \ No newline at end of file +/** + * 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; +} diff --git a/public/assets/default_theme/root.css b/public/assets/default_theme/root.css index 09e2f9c4bc..9993079881 100644 --- a/public/assets/default_theme/root.css +++ b/public/assets/default_theme/root.css @@ -1,38 +1,66 @@ - -:root { - --m:1.067em; - --s:.666em; - --unit:1em; - --xl:1.138em; - --xxl:3.138em; -} - -@media(prefers-color-scheme: dark) { +@media (prefers-color-scheme: dark) { :root { - --accent:#5ddbcf; - --background-card:#0e0e0f; - --background-checkerboard:repeating-conic-gradient(#ffffff66 0 90deg,#ffffff33 0 180deg) 0 0/40px 40px round; - --background-hard:#0e0e0f; - --border:#26262c; - --foreground:#eff0f1; - --gradient: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-inset-accent:inset 0 0 0 2px var(--accent); + --accent: #5ddbcf; + --background-card: #0e0e0f; + --background-checkerboard: repeating-conic-gradient(#ffffff66 0 90deg, #ffffff33 0 180deg) 0 0/40px 40px round; + --background-hard: #0e0e0f; + --border: #26262c; + --foreground: #eff0f1; + --gradient: 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-inset-accent: inset 0 0 0 2px var(--accent); } } -@media(prefers-color-scheme: light) { +@media (prefers-color-scheme: light) { :root { - --accent:#a22430; - --background-card:#f0f0f0; - --background-checkerboard:repeating-conic-gradient(#ffffff66 0 90deg,#ffffff33 0 180deg) 0 0/40px 40px round; - --background-hard:#ebebeb; - --border:#c2c2c2; - --foreground:#09090d; - --gradient:linear-gradient(10deg,var(--background-hard) 0,transparent)!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-inset-accent:inset 0 0 0 2px var(--accent); + --accent: #a22430; + --background-card: #f0f0f0; + --background-checkerboard: repeating-conic-gradient(#ffffff66 0 90deg, #ffffff33 0 180deg) 0 0/40px 40px round; + --background-hard: #ebebeb; + --border: #c2c2c2; + --foreground: #09090d; + --gradient: linear-gradient(10deg, var(--background-hard) 0, transparent) !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-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; + } + } +} \ No newline at end of file diff --git a/public/assets/default_theme/widgets.css b/public/assets/default_theme/widgets.css index b82f2734e8..c3313d2f7c 100644 --- a/public/assets/default_theme/widgets.css +++ b/public/assets/default_theme/widgets.css @@ -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 { - all: unset !important; + all: unset !important } .add-actor-button-container { @@ -7,392 +20,378 @@ -o-mask-image: url(icons/add-actor.svg); -webkit-mask-image: url(icons/add-actor.svg); mask-image: url(icons/add-actor.svg); - opacity: initial !important; + opacity: initial !important } .alert button { - border-color: #ff6347 !important; - cursor: pointer !important; - margin-top: unset !important; + border-color: tomato !important; + margin-top: unset !important } .alert, .alert-danger, .form-error, .form-row-widget-error { align-items: center; - background-color: #FF634733; - border: solid 2px #ff6347; - border-radius: var(--s); + background-color: #ff634733; + border: 2px solid tomato; + border-radius: var(--font-size-sm); display: inline-flex; font-style: italic; justify-content: space-between; margin-bottom: 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 { max-block-size: 2em; - width: auto; + width: auto } .button-container { background-color: var(--foreground); - border: none !important; display: inline-block; - height: var(--unit); - mask-repeat: no-repeat !important; - mask-size: cover !important; + height: var(--font-size-base); opacity: .33; - width: var(--unit); + width: var(--font-size-base) } .button-container:focus, .button-container:hover { background-color: var(--accent); - border: none !important; - mask-repeat: no-repeat !important; - mask-size: cover !important; - opacity: 1; + opacity: 1 } .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 { - display: block; + display: block } .container-grid { display: grid; - gap: var(--s); - grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); + gap: var(--font-size-sm); + grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)) } .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 { - margin-left: 4px; + margin-left: 4px } -.details-subtitle-summary ~ [class|="form-row"], .frame-section-padding { - padding: var(--s); +.details-subtitle-summary ~ [class|=form-row], .frame-section-padding { + padding: var(--font-size-sm) } .details-subtitle-summary + * { background: var(--gradient); - border-radius: var(--s); - padding: 2px 8px; + border-radius: var(--font-size-sm); + padding: 2px 8px } .details-summary-subtitle { font: 900 1.067em "Open Sans", sans-serif; - padding: 6px 8px; + padding: 6px 8px } .details-summary-subtitle:after { content: "\1F815"; display: block; float: right; - position: relative; + position: relative } .details-summary-title { font: 900 1.215em "Open Sans", sans-serif; - padding: 6px 8px; + padding: 6px 8px } .details-summary-title:after { - content: "\1F817"; display: block; - float: right; - position: relative; -} - -.footer ul li { - margin-right: var(--s); + position: relative } .footer ul, .profile-info { display: flex; - flex-wrap: wrap; + flex-wrap: wrap } .form-row { display: flex; flex-direction: column; - margin-bottom: var(--s); + margin-bottom: var(--font-size-sm) } .form-row-help { font-style: italic; - margin-bottom: unset; + margin-bottom: unset } .form-row-widget { display: block; - width: 100%; + width: 100% } .form-search { display: inline-block; - margin-bottom: var(--m); - padding: unset !important; + margin-bottom: var(--font-size-base); + 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 { display: inline-flex; - width: 100%; + width: 100% } .form-search span .form-row { flex: max-content; margin-bottom: unset; + flex: 2 } .form-search span button { border-bottom-left-radius: 0; border-left: none !important; border-top-left-radius: 0; - flex: auto; - height: 100%; - margin: unset; + flex: 1; + margin: unset } -.form-search span input[type='text'] { +.form-search span input[type=text] { border-bottom-right-radius: 0; border-top-right-radius: 0; height: 100%; - margin: unset; + margin: unset } .form-search span label { display: block; height: 0; opacity: 0; - width: 0; + width: 0 } .frame-section { background-color: var(--background-card); border: 1px solid var(--border); - border-radius: var(--s); + border-radius: var(--font-size-sm); box-shadow: var(--shadow); display: flex; - flex-direction: column; - margin-bottom: var(--s); + flex-direction: column } -.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) { - margin-bottom: var(--s); +.frame-section-button-like, .profile { + 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 { align-self: end; - background: var(--gradient); - border: 1px solid var(--border); - border-radius: var(--s); - display: block; - font-family: "Open Sans", sans-serif; - font-weight: 900; + border-radius: var(--font-size-sm); padding: 6px 8px; - width: max-content; + width: max-content } .frame-section-paging { - display: block; - font-family: "Open Sans", sans-serif; - font-weight: 900; margin-left: auto; - margin-top: var(--s); - padding: 6px 12px; + margin-top: var(--font-size-sm); + padding: 6px 12px } .frame-section-title { - margin-left: unset; + margin-left: unset } .profile { - background: var(--gradient); - border: 1px solid var(--border); - border-radius: var(--s); + border-radius: var(--font-size-sm); font-family: 'Open Sans', sans-serif; - margin-bottom: var(--s); - padding: var(--unit); + padding: var(--font-size-base) } .profile header { display: flex; flex-wrap: wrap; justify-content: space-between; - vertical-align: middle; + vertical-align: middle } .profile-bio { - margin-top: 4px; + margin-top: 4px } .profile-bio, .profile-info-url { - word-break: break-all; + word-break: break-all } .profile-extra-actions { background: var(--gradient), var(--background-hard); border: 1px solid var(--border); - border-radius: var(--s); + border-radius: var(--font-size-sm); display: inline-block; font-weight: 900; - margin-right: var(--s); - margin-top: var(--s); - padding: 4px 8px; + margin-right: var(--font-size-sm); + margin-top: var(--font-size-sm); + padding: 4px 8px } .profile-info .avatar { border-radius: 2px; height: auto; - margin-right: var(--s); max-block-size: 3em; - width: auto; + width: auto } .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-weight: 900; + font-weight: 900 } .profile-info-url-remote { - opacity: .66; + opacity: .66 } .profile-stats { align-self: center; margin-left: auto; 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 { - margin-right: 4px; + margin-right: 4px } .profile-tags { - margin: 4px unset unset; + 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); + mask-image: url(icons/remove-actor.svg) } .section-checkbox-flex { display: flex; flex-wrap: wrap; - justify-content: flex-start; + justify-content: flex-start } .section-checkbox-flex > * { - margin-right: var(--m); + margin-right: var(--font-size-base) } .section-details-subtitle summary, .section-details-title summary { background: var(--gradient); - border-radius: var(--s); + border-radius: var(--font-size-sm); display: block; font-family: 'Open Sans', sans-serif !important; font-weight: 900 !important; - width: 100%; + width: 100% } .section-details-subtitle summary > *, .section-details-title summary > * { - display: inline-block; + display: inline-block } .section-details-subtitle:not([open]) > .details-summary-subtitle:after { - animation: fadeOut 200ms cubic-bezier(0, 0.55, 0.45, 1); - content: "\1F817"; + animation: .2s cubic-bezier(0, .55, .45, 1) fadeOut; + 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 { - animation: fadeIn 200ms cubic-bezier(0, 0.55, 0.45, 1); - transform: initial; + animation: .2s cubic-bezier(0, .55, .45, 1) fadeIn; + transform: initial } .section-details-title[open] > .details-summary-title:after { - animation: fadeOut 200ms cubic-bezier(0, 0.55, 0.45, 1); - content: "\1F815"; + animation: .2s cubic-bezier(0, .55, .45, 1) fadeOut; + content: "\1F815" } .section-form { background-color: var(--background-card); - border-radius: var(--s); + border-radius: var(--font-size-sm); display: block; max-width: 100%; - padding: var(--s); - width: 100%; + padding: var(--font-size-sm); + width: 100% } .section-form-legend { font-weight: 700; - margin-bottom: var(--s); - margin-top: unset; + margin-bottom: var(--font-size-sm); + margin-top: unset } .section-settings { background: var(--background-card); border: 1px solid var(--border); - box-shadow: var(--shadow); + box-shadow: var(--shadow) } .section-settings hr { margin-bottom: .6rem; - margin-top: .6rem; + margin-top: .6rem } .section-settings, .section-settings-details { border-radius: .6rem; box-sizing: border-box; margin-bottom: .6rem; - padding: .6rem; + padding: .6rem } .section-settings-details { - border: 1px solid var(--border); + border: 1px solid var(--border) } .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 { - text-transform: uppercase; -} - -.section-settings-details summary:after { - content: "\1F817"; - float: right; + text-transform: uppercase } .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 { - margin-bottom: 0; + margin-bottom: 0 } .section-settings-details[open] > summary:after { - animation: fadeOut 200ms cubic-bezier(0, 0.55, 0.45, 1); - transform: rotate(180deg); + animation: .2s cubic-bezier(0, .55, .45, 1) fadeOut; + transform: rotate(180deg) } .section-title { - margin-top: 0; + margin-top: 0 } ::file-selector-button { @@ -403,38 +402,34 @@ fill: var(--foreground); font-family: 'Open Sans', sans-serif !important; font-weight: 900 !important; - margin: 3px; + margin: 3px } button { - cursor: pointer !important; display: block !important; font-family: "Open Sans", sans-serif !important; font-weight: 900 !important; - margin-left: auto !important; + margin-left: auto !important } button, input, select, textarea { border: 1px solid var(--border) !important; - border-radius: var(--s); + border-radius: var(--font-size-sm); color: var(--foreground) !important; font-size: inherit !important; max-width: border-box; overflow: hidden; padding: 6px 8px !important; width: auto; -} - -button, select, textarea, button, input { - background: var(--gradient) !important; + background: var(--gradient) !important } input + label { - margin-left: 3px; + margin-left: 3px } input[type=checkbox] { - accent-color: var(--accent); + accent-color: var(--accent) } input[type=color] { @@ -442,47 +437,47 @@ input[type=color] { background-color: transparent; border: 0; cursor: pointer; - height: var(--xxl); - width: var(--xxl); + height: var(--font-size-xxxl); + 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-radius: var(--s); + border-radius: var(--font-size-sm) } input[type=file] { all: unset; background: var(--gradient) !important; - border-radius: var(--s); + border-radius: var(--font-size-sm); display: block; font-family: 'Open Sans', sans-serif !important; font-weight: 400 !important; - padding: unset !important; + padding: unset !important } -input[type=radio], input[type=checkbox] { - background: initial; +input[type=checkbox], input[type=radio] { + background: initial } select { background-repeat: no-repeat; - border-radius: var(--s); + border-radius: var(--font-size-sm); cursor: pointer; - max-width: 100%; + max-width: 100% } select::-ms-expand { - display: none; + display: none } select[multiple] { height: 8rem; - overflow-y: scroll; + overflow-y: scroll } textarea.form-row-widget { font: 400 1rem "Open Sans", sans-serif; height: 7rem; - resize: vertical; + resize: vertical } \ No newline at end of file diff --git a/public/components/Collection/assets/css/pages.css b/public/components/Collection/assets/css/pages.css index 55a1f644ec..8abe443cf5 100644 --- a/public/components/Collection/assets/css/pages.css +++ b/public/components/Collection/assets/css/pages.css @@ -13,7 +13,7 @@ .collection-add > form > div button { margin-top: 0; - margin-bottom: var(--s); + margin-bottom: var(--font-size-sm); } @media only screen and (max-width:465px) { @@ -27,7 +27,7 @@ } .collection-add > form > div button { - margin-top: var(--s); + margin-top: var(--font-size-sm); margin-bottom: 0; } } @@ -79,7 +79,7 @@ .collections-list .collection-item { border: 2px solid var(--border); - border-radius: var(--s); + border-radius: var(--font-size-sm); padding: 10px 20px; display: flex; flex-direction: column; diff --git a/public/plugins/AttachmentCollections/assets/css/pages.css b/public/plugins/AttachmentCollections/assets/css/pages.css index 57402a9a21..0b6eab956d 100644 --- a/public/plugins/AttachmentCollections/assets/css/pages.css +++ b/public/plugins/AttachmentCollections/assets/css/pages.css @@ -10,7 +10,7 @@ } .attachment-collection-add > form > div button { margin-top: 0px; - margin-bottom: var(--s); + margin-bottom: var(--font-size-sm); } @media only screen and (max-width:465px) { .attachment-collection-add > form, .attachment-collection-add > form > div .mb-6 { @@ -21,7 +21,7 @@ flex-direction: column; } .attachment-collection-add > form > div button { - margin-top: var(--s);; + margin-top: var(--font-size-sm);; margin-bottom: 0px; } } @@ -67,7 +67,7 @@ } .attachment-collections-list .attachment-collection-item { border: 2px solid var(--border); - border-radius: var(--s); + border-radius: var(--font-size-sm); padding: 10px 20px; display: flex; flex-direction: column; diff --git a/public/plugins/NoteTypeFeedFilter/assets/css/noteTypeFeedFilter.css b/public/plugins/NoteTypeFeedFilter/assets/css/noteTypeFeedFilter.css index 5ca858bd06..86a4a7080c 100644 --- a/public/plugins/NoteTypeFeedFilter/assets/css/noteTypeFeedFilter.css +++ b/public/plugins/NoteTypeFeedFilter/assets/css/noteTypeFeedFilter.css @@ -1,6 +1,6 @@ .media-feed-tabs { 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; display: flex; } diff --git a/public/plugins/PinnedNotes/assets/css/pinned-notes.css b/public/plugins/PinnedNotes/assets/css/pinned-notes.css index bb246ab40d..d5bb4e8f08 100644 --- a/public/plugins/PinnedNotes/assets/css/pinned-notes.css +++ b/public/plugins/PinnedNotes/assets/css/pinned-notes.css @@ -8,6 +8,6 @@ opacity: 1 !important; } .feed.pinned { - margin-top: var(--m); - margin-bottom: var(--m); + margin-top: var(--font-size-base); + margin-bottom: var(--font-size-base); } diff --git a/src/Core/Event.php b/src/Core/Event.php index 76a459b7ec..10b6c07c6f 100644 --- a/src/Core/Event.php +++ b/src/Core/Event.php @@ -119,6 +119,7 @@ abstract class Event */ 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(); } diff --git a/templates/base.html.twig b/templates/base.html.twig index 65b27c5ed5..b23904faed 100644 --- a/templates/base.html.twig +++ b/templates/base.html.twig @@ -88,7 +88,7 @@
{{ block("leftpanel", "stdgrid.html.twig") }} -
+