[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
This commit is contained in:
Eliseu Amaro
parent
9cf83db62a
commit
87559e9a8c
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@
|
|||
<header class="page-header">
|
||||
{{ block("leftpanel", "stdgrid.html.twig") }}
|
||||
|
||||
<div class="header-instance">
|
||||
<div class="header-title">
|
||||
<a id="anchor-main-page" class="anchor-hidden"
|
||||
title="{% trans %}Press tab to access instance's main page{% endtrans %}"></a>
|
||||
<a class="accessibility-target" href="{{ path('feed_public') }}" tabindex="0"
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user