styles
/
gts-web
Archived
1
Fork 0
Code Issues Pull Requests Releases Activity

mostly css

This commit is contained in:
Dym Sohin 2023-12-27 15:56:44 +01:00
parent f4ed8f9d9f
commit e90cc1ee79
7 changed files with 1076 additions and 888 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
assets/dist/base.css vendored
View File

@ -65,6 +65,10 @@ pre {
font-size: 1em; font-size: 1em;
} }
pre {
max-width: 35rem;
}
small { small {
font-size: 80%; font-size: 80%;
} }
@ -180,6 +184,8 @@ nav
, nav * , nav *
, footer , footer
, footer * , footer *
, aside
, aside *
{ all: unset { all: unset
; margin: 0 ; margin: 0
; padding: 0 ; padding: 0
@ -214,7 +220,52 @@ body {
display: none; display: none;
} }
aside {
gap: 1.25rem;
justify-content: center;
margin-bottom: 3rem;
}
aside a {
flex-basis: 7rem;
justify-content: center;
border-radius: 0.125rem;
padding: 0.5rem 1rem;
border: 0.125rem solid var(--green1);
}
aside a:active,
aside a:focus,
aside a:hover {
background: var(--bg);
box-shadow:
0 0 0 0.125rem var(--bg)
, 0 0 0 0.25rem var(--green1)
;
}
aside a
, aside a > span
, aside a:any-link
, aside a:any-link > span {
color: var(--green1);
}
aside a:any-link > span {
text-decoration: underline;
}
aside a.current {
border: 0.125rem dotted var(--orange2);
}
aside a.current
, aside a.current > span {
color: var(--orange2);
cursor: unset;
text-decoration: unset;
}
aside a.current:active,
aside a.current:focus,
aside a.current:hover {
background: unset;
box-shadow: unset;
}
h1 { h1 {
margin: 0; margin: 0;
@ -668,6 +719,23 @@ label {
} }
ul {
padding: 1rem 0;
margin: 0;
}
ul li {
list-style: none;
margin-left: 1rem;
}
ul li::before {
content: "–";
margin-left: -2rem;
padding-right: 0.5rem;
width: 2rem;
display: inline-block;
text-align: right;
}
.about { .about {
gap: 3rem; gap: 3rem;
display: grid; display: grid;
@ -677,7 +745,8 @@ label {
.about a { .about a {
border-radius: 0.125rem; border-radius: 0.125rem;
} }
.about a[href^='https://dym.sh/'] { .about a[href^='https://dym.sh/']
, .about a[href^='/'] {
color: var(--green1); color: var(--green1);
} }
.about a:active, .about a:active,
@ -704,11 +773,6 @@ label {
.about p { .about p {
margin: 0; margin: 0;
} }
.about ul {
padding-left: 0;
list-style: none;
padding: 1rem 0;
}
.col-2 { .col-2 {
columns: 2; columns: 2;
} }
@ -723,17 +787,6 @@ label {
.about ul: last-child { .about ul: last-child {
padding-bottom: 0; padding-bottom: 0;
} }
ul li {
margin-left: 1rem;
}
ul li::before {
content: "–";
margin-left: -2rem;
padding-right: 0.5rem;
width: 2rem;
display: inline-block;
text-align: right;
}
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {

373
assets/dist/profile.css vendored
View File

@ -1,3 +1,4 @@
/* /*
GoToSocial GoToSocial
Copyright (C) 2021-2023 GoToSocial Authors admin@gotosocial.org Copyright (C) 2021-2023 GoToSocial Authors admin@gotosocial.org
@ -9,101 +10,180 @@
This program is distributed in the hope that it will be useful, This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details. GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>. along with this program. If not, see <http://www.gnu.org/licenses/>.
*/ */
.profile { .page {
display: flex; grid-template-columns: 1fr minmax(auto, 60rem) 1fr; /* fallback for lack of min() support */
gap: 1rem; grid-template-columns: 1fr min(92%, 65rem) 1fr;
}
.profile .header {
display: flex;
flex-direction: column;
gap: 1rem;
justify-content: flex-start;
width: 20rem;
word-break: break-all;
} }
.profile .header > * { .profile {
padding: 0.5rem;
border-radius: var(--br); border-radius: var(--br);
} }
.profile figure { .profile .column-split {
margin: 0 0 0.5rem 0; display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.profile .header {
background: var(--profile-bg);
border-radius: var(--br); border-radius: var(--br);
overflow: hidden; overflow: hidden;
margin-bottom: 1rem;
}
.profile .header .header-image {
position: relative;
padding-top: 33.33%;
}
/* aspect-ratio 1/3 */
.profile .header .header-image img {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.profile .header {
--avatar-size: 8.5rem;
--name-size: 3rem;
--username-size: 2rem;
--overlap: calc(var(--avatar-size) - var(--name-size) - var(--username-size));
}
/*
Basic info container has the user's avatar, display- and username, and role
It's partially overlapped over the header image, by a negative margin-top
*/
.profile .header .basic-info {
position: relative;
display: grid;
box-sizing: border-box;
grid-template-columns: var(--avatar-size) auto 1fr;
grid-template-rows: var(--overlap) var(--name-size) auto;
grid-template-areas:
"avatar . ."
"avatar displayname displayname"
"avatar username role";
margin: 1rem;
margin-top: calc(-1 * var(--overlap));
gap: 0 1rem;
}
.profile .header .basic-info .avatar {
grid-area: avatar;
height: var(--avatar-size);
width: var(--avatar-size);
border: 0.2rem solid var(--avatar-border);
border-radius: var(--br);
overflow: hidden;
}
/* prevents image extending beyond rounded borders */
.profile .header .basic-info .avatar img {
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.profile .header .basic-info .displayname {
grid-area: displayname;
line-height: var(--name-size);
font-size: 1.5rem;
font-weight: bold;
}
.profile .header .basic-info .username {
min-width: 0;
grid-area: username;
line-height: var(--username-size);
font-size: 1rem;
font-weight: bold;
color: var(--fg-accent);
-webkit-user-select: all;
user-select: all;
}
.profile .header .basic-info .role {
background: var(--bg);
color: var(--fg);
border: 0.13rem solid var(--bg);
grid-area: role;
align-self: center;
justify-self: start;
border-radius: var(--br);
padding: 0.3rem;
line-height: 1.1rem;
font-size: 0.9rem;
font-variant: small-caps;
font-weight: bold;
}
.profile .header .basic-info .role.admin {
color: var(--role-admin);
border-color: var(--role-admin);
}
.profile .header .basic-info .role.moderator {
color: var(--role-mod);
border-color: var(--role-mod);
}
@media screen and (max-width: 750px) {
.profile .header .basic-info {
grid-template-columns: auto 1fr;
grid-template-rows: var(--avatar-size) var(--name-size) auto;
grid-template-areas:
"avatar avatar"
"displayname displayname"
"username role";
}
.profile .header .basic-info .displayname {
font-size: 1.4rem;
}
}
.profile .col-header {
display: flex; display: flex;
justify-content: space-between; justify-content: start;
position: relative; gap: 2rem;
} align-items: center;
.profile figure img.bg {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
object-fit: cover;
}
.profile figure img.avatar { margin: 0;
margin: 0.5rem;
width: 5rem;
height: 5rem;
z-index: 2;
object-fit: fill;
border-radius: var(--br);
}
.profile .header .user {
background: var(--profile-bg); background: var(--profile-bg);
display: flex; border-top-left-radius: var(--br);
flex-direction: column; border-top-right-radius: var(--br);
gap: 0.25rem; padding: 0.75rem;
padding: 1rem;
} }
.profile .header .displayname { .profile .col-header h1, .profile .col-header h2 {
line-height: 1.25rem; font-size: 1.2rem;
font-size: 1rem; line-height: 1.3rem;
font-weight: 600; margin: 0;
} }
.profile .header .username {
min-width: 0;
font-size: 1rem;
color: var(--fg-accent);
-webkit-user-select: all;
user-select: all;
}
.profile .header .role {
background: var(--bg);
color: var(--fg);
border: 0.075rem solid var(--bg);
border-radius: 0.25rem;
margin: 0.5rem;
padding: 0.25rem;
z-index: 2;
line-height: 0.75em;
font-size: 0.75rem;
font-variant: small-caps;
align-self: flex-start;
}
.profile .header .role.admin {
color: var(--role-admin);
border-color: var(--role-admin);
}
.profile .header .role.moderator {
color: var(--role-mod);
border-color: var(--role-mod);
}
.profile .toots { .profile .toots {
flex: 65 25rem; flex: 65 25rem;
@ -113,82 +193,95 @@
} }
.profile .toots .col-header { .profile .toots .col-header {
display: grid; display: grid;
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
gap: 1rem; gap: 1rem;
} }
.profile .toots .col-header a { .profile .toots .col-header a {
justify-self: end; justify-self: end;
} }
.profile .toots .col-header .rss-icon {
display: block;
margin: -0.25rem 0;
}
.profile .toots .col-header .rss-icon .fa {
font-size: 2rem;
-o-object-fit: contain;
object-fit: contain;
vertical-align: middle;
color: var(--orange2);
/* can't size a single-color background, so we use a linear-gradient that's effectively white */
background: linear-gradient(to right, var(--white1) 100%, transparent 0) no-repeat center center;
background-size: 1.2rem 1.4rem;
}
.profile .toots .toot { .profile .toots .toot {
border-radius: var(--br); border-radius: 0;
} }
.toot .info {
flex-direction: row; .profile .toots .toot .info {
gap: 1rem; padding: 0.3rem 0.75rem;
} }
.toot .info {
flex-direction: row; .profile .toots .toot:last-child {
gap: 1rem; border-bottom-left-radius: var(--br);
} border-bottom-right-radius: var(--br);
}
.profile .toots .backnextlinks { .profile .toots .backnextlinks {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.profile .toots .backnextlinks .next { .profile .toots .backnextlinks .next {
margin-left: auto; margin-left: auto;
}
.profile .about-user {
overflow: hidden;
display: flex;
flex-direction: column;
gap: 1rem;
} }
.profile .about-user > * {
.profile .col-header {
margin-bottom: -0.25rem;
}
.profile > * {
border-radius: var(--br); border-radius: var(--br);
} }
.profile .fields { .profile .about-user .col-header {
background: var(--profile-bg); margin-bottom: -0.25rem;
display: grid; }
grid-template-columns: 1fr 2fr;
padding: 0.5rem;
}
.profile .fields > * { .profile .about-user .fields {
padding: 0.5rem; background: var(--profile-bg);
} display: grid;
.profile .fields > b { grid-template: max-content 1fr;
align-self: center; padding: 0 0.5rem;
justify-self: flex-end; }
font-weight: 600;
}
.profile .fields > span + b,
.profile .fields > time + b {
border-top: 0.1rem solid var(--gray2);
align-self: flex-start;
text-align: right;
}
.profile .rss-icon, .profile .about-user .fields .field + .field {
.profile .rss-icon img { border-top: 0.1rem solid var(--gray2);
width: 20px; }
height: 20px;
}
.profile .fields .flex, .profile .about-user .bio {
.profile .fields .flex * { background: var(--profile-bg);
display: flex; padding: 1rem;
line-height: 1rem; }
gap: 0.5rem;
align-items: center;
}
.profile .bio { .profile .about-user .accountstats {
background: var(--profile-bg); background: var(--bg-accent);
padding: 1rem; padding: 1rem;
display: grid;
grid-template-columns: auto auto;
gap: 0.5rem 1rem;
}
.profile .about-user .accountstats > b {
justify-self: end;
font-weight: normal;
}
.profile .about-user .accountstats > b + * {
justify-self: start;
} }

2
assets/dist/settings-style.css vendored
View File

@ -221,7 +221,7 @@ nav.menu-tree li.nested a.title {
padding-left: 1rem; padding-left: 1rem;
font-weight: normal; font-weight: normal;
color: var(--fg); color: var(--fg);
background: var(--gray3); background: var(--gray4);
} }
nav.menu-tree li.nested a.title:focus { nav.menu-tree li.nested a.title:focus {

454
assets/dist/status.css vendored
View File

@ -11,32 +11,32 @@
This program is distributed in the hope that it will be useful, This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details. GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>. along with this program. If not, see <http://www.gnu.org/licenses/>.
*/ */
/*! PhotoSwipe main CSS by Dmytro Semenov | photoswipe.com */ /*! PhotoSwipe main CSS by Dmytro Semenov | photoswipe.com */
.pswp { .pswp {
--pswp-bg: #000; --pswp-bg: #000;
--pswp-placeholder-bg: #222; --pswp-placeholder-bg: #222;
--pswp-root-z-index: 100000; --pswp-root-z-index: 100000;
--pswp-preloader-color: rgba(79, 79, 79, 0.4); --pswp-preloader-color: rgba(79, 79, 79, 0.4);
--pswp-preloader-color-secondary: rgba(255, 255, 255, 0.9); --pswp-preloader-color-secondary: rgba(255, 255, 255, 0.9);
/* defined via js: /* defined via js:
--pswp-transition-duration: 333ms; */ --pswp-transition-duration: 333ms; */
--pswp-icon-color: #fff; --pswp-icon-color: #fff;
--pswp-icon-color-secondary: #4f4f4f; --pswp-icon-color-secondary: #4f4f4f;
--pswp-icon-stroke-color: #4f4f4f; --pswp-icon-stroke-color: #4f4f4f;
--pswp-icon-stroke-width: 2px; --pswp-icon-stroke-width: 2px;
--pswp-error-text-color: var(--pswp-icon-color); --pswp-error-text-color: var(--pswp-icon-color);
} }
/* /*
Styles for basic PhotoSwipe (pswp) functionality (sliding area, open/close transitions) Styles for basic PhotoSwipe (pswp) functionality (sliding area, open/close transitions)
@ -56,15 +56,15 @@
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
} }
/* Prevents focus outline on the root element, /* Prevents focus outline on the root element,
(it may be focused initially) */ (it may be focused initially) */
.pswp:focus { .pswp:focus {
outline: 0; outline: 0;
} }
.pswp * { .pswp * {
box-sizing: border-box; box-sizing: border-box;
} }
.pswp img { .pswp img {
max-width: none; max-width: none;
} }
.pswp--open { .pswp--open {
display: block; display: block;
@ -72,11 +72,11 @@
.pswp, .pswp,
.pswp__bg { .pswp__bg {
-webkit-transform: translateZ(0); -webkit-transform: translateZ(0);
transform: translateZ(0); transform: translateZ(0);
will-change: opacity; will-change: opacity;
} }
.pswp__bg { .pswp__bg {
opacity: 0.005; opacity: 0.005;
background: var(--pswp-bg); background: var(--pswp-bg);
} }
.pswp, .pswp,
@ -109,7 +109,7 @@
cursor: grab; cursor: grab;
} }
.pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active { .pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active {
cursor: grabbing; cursor: grabbing;
} }
/* :active to override grabbing cursor */ /* :active to override grabbing cursor */
.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img, .pswp--no-mouse-drag.pswp--zoomed-in .pswp__img,
@ -135,14 +135,14 @@
} }
/* Allow to click through pswp__content element, but not its children */ /* Allow to click through pswp__content element, but not its children */
.pswp__content { .pswp__content {
pointer-events: none; pointer-events: none;
} }
.pswp__content > * { .pswp__content > * {
pointer-events: auto; pointer-events: auto;
} }
/* /*
PhotoSwipe UI PhotoSwipe UI
*/ */
/* /*
@ -150,7 +150,7 @@
(JS option errorMsg controls markup) (JS option errorMsg controls markup)
*/ */
.pswp__error-msg-container { .pswp__error-msg-container {
display: grid; display: grid;
} }
.pswp__error-msg { .pswp__error-msg {
margin: auto; margin: auto;
@ -195,34 +195,34 @@ and show (for example fade in) when PhotoSwipe is opened
.pswp__button:hover, .pswp__button:hover,
.pswp__button:active, .pswp__button:active,
.pswp__button:focus { .pswp__button:focus {
transition: none; transition: none;
padding: 0; padding: 0;
background: none; background: none;
border: 0; border: 0;
box-shadow: none; box-shadow: none;
opacity: 1; opacity: 1;
} }
.pswp__button:disabled { .pswp__button:disabled {
opacity: 0.3; opacity: 0.3;
cursor: auto; cursor: auto;
} }
.pswp__icn { .pswp__icn {
fill: var(--pswp-icon-color); fill: var(--pswp-icon-color);
color: var(--pswp-icon-color-secondary); color: var(--pswp-icon-color-secondary);
} }
.pswp__icn { .pswp__icn {
position: absolute; position: absolute;
top: 14px; top: 14px;
left: 9px; left: 9px;
width: 32px; width: 32px;
height: 32px; height: 32px;
overflow: hidden; overflow: hidden;
pointer-events: none; pointer-events: none;
} }
.pswp__icn-shadow { .pswp__icn-shadow {
stroke: var(--pswp-icon-stroke-color); stroke: var(--pswp-icon-stroke-color);
stroke-width: var(--pswp-icon-stroke-width); stroke-width: var(--pswp-icon-stroke-width);
fill: none; fill: none;
} }
.pswp__icn:focus { .pswp__icn:focus {
outline: 0; outline: 0;
@ -243,184 +243,184 @@ div.pswp__img--placeholder,
width: 100%; width: 100%;
height: 60px; height: 60px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-end; justify-content: flex-end;
z-index: 10; z-index: 10;
/* allow events to pass through top bar itself */ /* allow events to pass through top bar itself */
pointer-events: none !important; pointer-events: none !important;
} }
.pswp__top-bar > * { .pswp__top-bar > * {
pointer-events: auto; pointer-events: auto;
/* this makes transition significantly more smooth, /* this makes transition significantly more smooth,
even though inner elements are not animated */ even though inner elements are not animated */
will-change: opacity; will-change: opacity;
} }
/* /*
Close button Close button
*/ */
.pswp__button--close { .pswp__button--close {
margin-right: 6px; margin-right: 6px;
} }
/* /*
Arrow buttons Arrow buttons
*/ */
.pswp__button--arrow { .pswp__button--arrow {
position: absolute; position: absolute;
top: 0; top: 0;
width: 75px; width: 75px;
height: 100px; height: 100px;
top: 50%; top: 50%;
margin-top: -50px; margin-top: -50px;
} }
.pswp__button--arrow:disabled { .pswp__button--arrow:disabled {
display: none; display: none;
cursor: default; cursor: default;
} }
.pswp__button--arrow .pswp__icn { .pswp__button--arrow .pswp__icn {
top: 50%; top: 50%;
margin-top: -30px; margin-top: -30px;
width: 60px; width: 60px;
height: 60px; height: 60px;
background: none; background: none;
border-radius: 0; border-radius: 0;
} }
.pswp--one-slide .pswp__button--arrow { .pswp--one-slide .pswp__button--arrow {
display: none; display: none;
} }
/* hide arrows on touch screens */ /* hide arrows on touch screens */
.pswp--touch .pswp__button--arrow { .pswp--touch .pswp__button--arrow {
visibility: hidden; visibility: hidden;
} }
/* show arrows only after mouse was used */ /* show arrows only after mouse was used */
.pswp--has_mouse .pswp__button--arrow { .pswp--has_mouse .pswp__button--arrow {
visibility: visible; visibility: visible;
} }
.pswp__button--arrow--prev { .pswp__button--arrow--prev {
right: auto; right: auto;
left: 0px; left: 0px;
} }
.pswp__button--arrow--next { .pswp__button--arrow--next {
right: 0px; right: 0px;
} }
.pswp__button--arrow--next .pswp__icn { .pswp__button--arrow--next .pswp__icn {
left: auto; left: auto;
right: 14px; right: 14px;
/* flip horizontally */ /* flip horizontally */
-webkit-transform: scale(-1, 1); -webkit-transform: scale(-1, 1);
transform: scale(-1, 1); transform: scale(-1, 1);
} }
/* /*
Zoom button Zoom button
*/ */
.pswp__button--zoom { .pswp__button--zoom {
display: none; display: none;
} }
.pswp--zoom-allowed .pswp__button--zoom { .pswp--zoom-allowed .pswp__button--zoom {
display: block; display: block;
} }
/* "+" => "-" */ /* "+" => "-" */
.pswp--zoomed-in .pswp__zoom-icn-bar-v { .pswp--zoomed-in .pswp__zoom-icn-bar-v {
display: none; display: none;
} }
/* /*
Loading indicator Loading indicator
*/ */
.pswp__preloader { .pswp__preloader {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
width: 50px; width: 50px;
height: 60px; height: 60px;
margin-right: auto; margin-right: auto;
} }
.pswp__preloader .pswp__icn { .pswp__preloader .pswp__icn {
opacity: 0; opacity: 0;
transition: opacity 0.2s linear; transition: opacity 0.2s linear;
-webkit-animation: pswp-clockwise 600ms linear infinite; -webkit-animation: pswp-clockwise 600ms linear infinite;
animation: pswp-clockwise 600ms linear infinite; animation: pswp-clockwise 600ms linear infinite;
} }
.pswp__preloader--active .pswp__icn { .pswp__preloader--active .pswp__icn {
opacity: 0.85; opacity: 0.85;
} }
@-webkit-keyframes pswp-clockwise { @-webkit-keyframes pswp-clockwise {
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
} }
@keyframes pswp-clockwise { @keyframes pswp-clockwise {
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
} }
/* /*
"1 of 10" counter "1 of 10" counter
*/ */
.pswp__counter { .pswp__counter {
height: 30px; height: 30px;
margin-top: 15px; margin-top: 15px;
-webkit-margin-start: 20px; -webkit-margin-start: 20px;
margin-inline-start: 20px; margin-inline-start: 20px;
font-size: 14px; font-size: 14px;
line-height: 30px; line-height: 30px;
color: var(--pswp-icon-color); color: var(--pswp-icon-color);
text-shadow: 1px 1px 3px var(--pswp-icon-color-secondary); text-shadow: 1px 1px 3px var(--pswp-icon-color-secondary);
opacity: 0.85; opacity: 0.85;
} }
.pswp--one-slide .pswp__counter { .pswp--one-slide .pswp__counter {
display: none; display: none;
} }
.pswp__dynamic-caption { .pswp__dynamic-caption {
color: #fff; color: #fff;
position: absolute; position: absolute;
width: 100%; width: 100%;
left: 0; left: 0;
top: 0; top: 0;
transition: opacity 120ms linear !important; /* override default */ transition: opacity 120ms linear !important; /* override default */
} }
.pswp-caption-content { .pswp-caption-content {
display: none; display: none;
} }
.pswp__dynamic-caption a { .pswp__dynamic-caption a {
color: #fff; color: #fff;
} }
.pswp__dynamic-caption--faded { .pswp__dynamic-caption--faded {
opacity: 0 !important; opacity: 0 !important;
} }
.pswp__dynamic-caption--aside { .pswp__dynamic-caption--aside {
width: auto; width: auto;
max-width: 300px; max-width: 300px;
padding: 20px 15px 20px 20px; padding: 20px 15px 20px 20px;
margin-top: 70px; margin-top: 70px;
} }
.pswp__dynamic-caption--below { .pswp__dynamic-caption--below {
width: auto; width: auto;
max-width: 700px; max-width: 700px;
padding: 15px 0 0; padding: 15px 0 0;
} }
.pswp__dynamic-caption--on-hor-edge { .pswp__dynamic-caption--on-hor-edge {
padding-left: 15px; padding-left: 15px;
padding-right: 15px; padding-right: 15px;
} }
.pswp__dynamic-caption--mobile { .pswp__dynamic-caption--mobile {
width: 100%; width: 100%;
background: rgba(0,0,0,0.5); background: rgba(0,0,0,0.5);
padding: 10px 15px; padding: 10px 15px;
right: 0; right: 0;
bottom: 0; bottom: 0;
/* override styles that were set via JS. /* override styles that were set via JS.
as they interfere with size measurement */ as they interfere with size measurement */
top: auto !important; top: auto !important;
left: 0 !important; left: 0 !important;
} }
@-webkit-keyframes plyr-progress{to{background-position:25px 0;background-position:var(--plyr-progress-loading-size,25px) 0}} @-webkit-keyframes plyr-progress{to{background-position:25px 0;background-position:var(--plyr-progress-loading-size,25px) 0}}
@keyframes plyr-progress{to{background-position:25px 0;background-position:var(--plyr-progress-loading-size,25px) 0}} @keyframes plyr-progress{to{background-position:25px 0;background-position:var(--plyr-progress-loading-size,25px) 0}}
@ -495,10 +495,16 @@ a.plyr__control{text-decoration:none}
.plyr--full-ui input[type=range]::-moz-range-track{background:#0000;border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-moz-transition:box-shadow .3s ease;transition:box-shadow .3s ease;user-select:none} .plyr--full-ui input[type=range]::-moz-range-track{background:#0000;border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-moz-transition:box-shadow .3s ease;transition:box-shadow .3s ease;user-select:none}
.plyr--full-ui input[type=range]::-moz-range-thumb{background:#fff;background:var(--plyr-range-thumb-background,#fff);border:0;border-radius:100%;box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33);height:13px;height:var(--plyr-range-thumb-height,13px);position:relative;-moz-transition:all .2s ease;transition:all .2s ease;width:13px;width:var(--plyr-range-thumb-height,13px)} .plyr--full-ui input[type=range]::-moz-range-thumb{background:#fff;background:var(--plyr-range-thumb-background,#fff);border:0;border-radius:100%;box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33);height:13px;height:var(--plyr-range-thumb-height,13px);position:relative;-moz-transition:all .2s ease;transition:all .2s ease;width:13px;width:var(--plyr-range-thumb-height,13px)}
.plyr--full-ui input[type=range]::-moz-range-progress{background:currentColor;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px)} .plyr--full-ui input[type=range]::-moz-range-progress{background:currentColor;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px)}
.plyr--full-ui input[type=range]::-ms-track{color:#0000}
.plyr--full-ui input[type=range]::-ms-fill-upper,.plyr--full-ui input[type=range]::-ms-track{background:#0000;border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-ms-transition:box-shadow .3s ease;transition:box-shadow .3s ease;user-select:none}
.plyr--full-ui input[type=range]::-ms-fill-lower{background:#0000;background:currentColor;border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-ms-transition:box-shadow .3s ease;transition:box-shadow .3s ease;user-select:none}
.plyr--full-ui input[type=range]::-ms-thumb{background:#fff;background:var(--plyr-range-thumb-background,#fff);border:0;border-radius:100%;box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33);height:13px;height:var(--plyr-range-thumb-height,13px);margin-top:0;position:relative;-ms-transition:all .2s ease;transition:all .2s ease;width:13px;width:var(--plyr-range-thumb-height,13px)}
.plyr--full-ui input[type=range]::-ms-tooltip{display:none}
.plyr--full-ui input[type=range]::-moz-focus-outer{border:0} .plyr--full-ui input[type=range]::-moz-focus-outer{border:0}
.plyr--full-ui input[type=range]:focus{outline:0} .plyr--full-ui input[type=range]:focus{outline:0}
.plyr--full-ui input[type=range]:focus-visible::-webkit-slider-runnable-track{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px} .plyr--full-ui input[type=range]:focus-visible::-webkit-slider-runnable-track{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px}
.plyr--full-ui input[type=range]:focus-visible::-moz-range-track{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px} .plyr--full-ui input[type=range]:focus-visible::-moz-range-track{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px}
.plyr--full-ui input[type=range]:focus-visible::-ms-track{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px}
.plyr__poster{background-color:#000;background-color:var(--plyr-video-background,var(--plyr-video-background,#000));background-position:50% 50%;background-repeat:no-repeat;background-size:contain;height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity .2s ease;width:100%;z-index:1} .plyr__poster{background-color:#000;background-color:var(--plyr-video-background,var(--plyr-video-background,#000));background-position:50% 50%;background-repeat:no-repeat;background-size:contain;height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity .2s ease;width:100%;z-index:1}
.plyr--stopped.plyr__poster-enabled .plyr__poster{opacity:1} .plyr--stopped.plyr__poster-enabled .plyr__poster{opacity:1}
.plyr--youtube.plyr--paused.plyr__poster-enabled:not(.plyr--stopped) .plyr__poster{display:none} .plyr--youtube.plyr--paused.plyr__poster-enabled:not(.plyr--stopped) .plyr__poster{display:none}
@ -522,6 +528,7 @@ a.plyr__control{text-decoration:none}
.plyr__progress__buffer::-webkit-progress-bar{background:#0000} .plyr__progress__buffer::-webkit-progress-bar{background:#0000}
.plyr__progress__buffer::-webkit-progress-value{background:currentColor;border-radius:100px;min-width:5px;min-width:var(--plyr-range-track-height,5px);-webkit-transition:width .2s ease;transition:width .2s ease} .plyr__progress__buffer::-webkit-progress-value{background:currentColor;border-radius:100px;min-width:5px;min-width:var(--plyr-range-track-height,5px);-webkit-transition:width .2s ease;transition:width .2s ease}
.plyr__progress__buffer::-moz-progress-bar{background:currentColor;border-radius:100px;min-width:5px;min-width:var(--plyr-range-track-height,5px);-moz-transition:width .2s ease;transition:width .2s ease} .plyr__progress__buffer::-moz-progress-bar{background:currentColor;border-radius:100px;min-width:5px;min-width:var(--plyr-range-track-height,5px);-moz-transition:width .2s ease;transition:width .2s ease}
.plyr__progress__buffer::-ms-fill{border-radius:100px;-ms-transition:width .2s ease;transition:width .2s ease}
.plyr--loading .plyr__progress__buffer{-webkit-animation:plyr-progress 1s linear infinite;animation:plyr-progress 1s linear infinite;background-image:linear-gradient(-45deg,#23282f99 25%,#0000 0,#0000 50%,#23282f99 0,#23282f99 75%,#0000 0,#0000);background-image:linear-gradient(-45deg,var(--plyr-progress-loading-background,#23282f99) 25%,#0000 25%,#0000 50%,var(--plyr-progress-loading-background,#23282f99) 50%,var(--plyr-progress-loading-background,#23282f99) 75%,#0000 75%,#0000);background-repeat:repeat-x;background-size:25px 25px;background-size:var(--plyr-progress-loading-size,25px) var(--plyr-progress-loading-size,25px);color:#0000} .plyr--loading .plyr__progress__buffer{-webkit-animation:plyr-progress 1s linear infinite;animation:plyr-progress 1s linear infinite;background-image:linear-gradient(-45deg,#23282f99 25%,#0000 0,#0000 50%,#23282f99 0,#23282f99 75%,#0000 0,#0000);background-image:linear-gradient(-45deg,var(--plyr-progress-loading-background,#23282f99) 25%,#0000 25%,#0000 50%,var(--plyr-progress-loading-background,#23282f99) 50%,var(--plyr-progress-loading-background,#23282f99) 75%,#0000 75%,#0000);background-repeat:repeat-x;background-size:25px 25px;background-size:var(--plyr-progress-loading-size,25px) var(--plyr-progress-loading-size,25px);color:#0000}
.plyr--video.plyr--loading .plyr__progress__buffer{background-color:#ffffff40;background-color:var(--plyr-video-progress-buffered-background,#ffffff40)} .plyr--video.plyr--loading .plyr__progress__buffer{background-color:#ffffff40;background-color:var(--plyr-video-progress-buffered-background,#ffffff40)}
.plyr--audio.plyr--loading .plyr__progress__buffer{background-color:#c1c8d199;background-color:var(--plyr-audio-progress-buffered-background,#c1c8d199)} .plyr--audio.plyr--loading .plyr__progress__buffer{background-color:#c1c8d199;background-color:var(--plyr-audio-progress-buffered-background,#c1c8d199)}
@ -533,8 +540,10 @@ a.plyr__control{text-decoration:none}
.plyr--audio .plyr__control:focus-visible,.plyr--audio .plyr__control:hover,.plyr--audio .plyr__control[aria-expanded=true]{background:#00b2ff;background:var(--plyr-audio-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));color:#fff;color:var(--plyr-audio-control-color-hover,#fff)} .plyr--audio .plyr__control:focus-visible,.plyr--audio .plyr__control:hover,.plyr--audio .plyr__control[aria-expanded=true]{background:#00b2ff;background:var(--plyr-audio-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));color:#fff;color:var(--plyr-audio-control-color-hover,#fff)}
.plyr--full-ui.plyr--audio input[type=range]::-webkit-slider-runnable-track{background-color:#c1c8d199;background-color:var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,#c1c8d199))} .plyr--full-ui.plyr--audio input[type=range]::-webkit-slider-runnable-track{background-color:#c1c8d199;background-color:var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,#c1c8d199))}
.plyr--full-ui.plyr--audio input[type=range]::-moz-range-track{background-color:#c1c8d199;background-color:var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,#c1c8d199))} .plyr--full-ui.plyr--audio input[type=range]::-moz-range-track{background-color:#c1c8d199;background-color:var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,#c1c8d199))}
.plyr--full-ui.plyr--audio input[type=range]::-ms-track{background-color:#c1c8d199;background-color:var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,#c1c8d199))}
.plyr--full-ui.plyr--audio input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#23282f1a)} .plyr--full-ui.plyr--audio input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#23282f1a)}
.plyr--full-ui.plyr--audio input[type=range]:active::-moz-range-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#23282f1a)} .plyr--full-ui.plyr--audio input[type=range]:active::-moz-range-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#23282f1a)}
.plyr--full-ui.plyr--audio input[type=range]:active::-ms-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#23282f1a)}
.plyr--audio .plyr__progress__buffer{color:#c1c8d199;color:var(--plyr-audio-progress-buffered-background,#c1c8d199)} .plyr--audio .plyr__progress__buffer{color:#c1c8d199;color:var(--plyr-audio-progress-buffered-background,#c1c8d199)}
.plyr--video{overflow:hidden} .plyr--video{overflow:hidden}
.plyr--video.plyr--menu-open{overflow:visible} .plyr--video.plyr--menu-open{overflow:visible}
@ -554,8 +563,10 @@ a.plyr__control{text-decoration:none}
.plyr--full-ui.plyr--video .plyr__control--overlaid{display:block} .plyr--full-ui.plyr--video .plyr__control--overlaid{display:block}
.plyr--full-ui.plyr--video input[type=range]::-webkit-slider-runnable-track{background-color:#ffffff40;background-color:var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,#ffffff40))} .plyr--full-ui.plyr--video input[type=range]::-webkit-slider-runnable-track{background-color:#ffffff40;background-color:var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,#ffffff40))}
.plyr--full-ui.plyr--video input[type=range]::-moz-range-track{background-color:#ffffff40;background-color:var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,#ffffff40))} .plyr--full-ui.plyr--video input[type=range]::-moz-range-track{background-color:#ffffff40;background-color:var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,#ffffff40))}
.plyr--full-ui.plyr--video input[type=range]::-ms-track{background-color:#ffffff40;background-color:var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,#ffffff40))}
.plyr--full-ui.plyr--video input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#ffffff80)} .plyr--full-ui.plyr--video input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#ffffff80)}
.plyr--full-ui.plyr--video input[type=range]:active::-moz-range-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#ffffff80)} .plyr--full-ui.plyr--video input[type=range]:active::-moz-range-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#ffffff80)}
.plyr--full-ui.plyr--video input[type=range]:active::-ms-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#ffffff80)}
.plyr--video .plyr__progress__buffer{color:#ffffff40;color:var(--plyr-video-progress-buffered-background,#ffffff40)} .plyr--video .plyr__progress__buffer{color:#ffffff40;color:var(--plyr-video-progress-buffered-background,#ffffff40)}
.plyr:-webkit-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%} .plyr:-webkit-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}
.plyr:fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%} .plyr:fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}
@ -601,62 +612,80 @@ main {
.thread { .thread {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem;
border-radius: var(--br); border-radius: var(--br);
} }
.toot { .toot {
background: var(--toot-bg); background: var(--toot-bg);
box-shadow: var(--boxshadow);
border: var(--boxshadow-border);
border-radius: var(--br); border-radius: var(--br);
display: flex; position: relative;
flex-direction: column; margin-bottom: var(--br);
padding: 1rem; padding-top: 0.75rem;
gap: 0.75rem;
} }
.toot a { .toot a {
position: relative;
z-index: 1;
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
} }
.toot .author { .toot .author > a {
display: flex; padding: 0 0.75rem;
flex-direction: row; display: grid;
flex-wrap: nowrap; grid-template-columns: 3.5rem 1fr auto;
gap: 0.75rem; grid-template-rows: auto auto;
grid-template-areas:
"avatar display date"
"avatar user .";
gap: 0 0.5rem;
} }
.toot .author .avatar { .toot .author > a .avatar {
height: 3rem; grid-area: avatar;
width: 3rem; height: 3.5rem;
-o-object-fit: cover; width: 3.5rem;
object-fit: cover;
border-radius: var(--br);
overflow: hidden;
}
.toot .author .avatar img {
height: 100%;
width: 100%;
-o-object-fit: cover; -o-object-fit: cover;
object-fit: cover; object-fit: cover;
}
.toot .author .user-info { border: 0.15rem solid var(--avatar-border);
display: flex; border-radius: var(--br);
flex-direction: column; overflow: hidden;
flex-wrap: nowrap; }
justify-content: space-around; /* hides corners from img overflowing */
} .toot .author > a .avatar img {
.toot .author .displayname, height: 100%;
.toot .author .username { width: 100%;
-o-object-fit: cover;
object-fit: cover;
background: var(--bg);
}
.toot .author > a .displayname, .toot .author > a .username {
justify-self: start;
align-self: start;
max-width: 100%;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.toot .author .displayname { .toot .author > a .displayname {
grid-area: display;
font-weight: bold; font-weight: bold;
font-size: 1rem;
line-height: 1.3rem;
/* margin-top: -0.5rem; */
} }
.toot .author .username { .toot .author > a .username {
grid-area: user;
color: var(--link-fg); color: var(--link-fg);
font-size: 1rem;
line-height: 1.3rem;
}
.toot .author > a .timestamp {
grid-area: date;
color: var(--fg-reduced);
} }
.toot .body { .toot .body {
padding: 0.5rem 0.75rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.5rem; gap: 0.5rem;
@ -672,6 +701,16 @@ main {
white-space: nowrap; white-space: nowrap;
cursor: pointer; cursor: pointer;
} }
.toot .text {
margin: 0;
grid-row: span 1;
grid-column: 1 / span 3;
position: relative;
z-index: 2;
width: 100%;
}
.toot .text details > summary { .toot .text details > summary {
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
} }
@ -687,8 +726,8 @@ main {
word-break: break-word; word-break: break-word;
} }
.toot .text .content blockquote { .toot .text .content blockquote {
padding: 0.25rem 0 0.25rem 0.5rem; padding: 0.5rem 0 0.5rem 0.5rem;
border-left: 0.25rem solid var(--border-accent); border-left: 0.2rem solid var(--border-accent);
margin: 0; margin: 0;
font-style: italic; font-style: italic;
} }
@ -699,20 +738,19 @@ main {
background-color: var(--gray2); background-color: var(--gray2);
} }
.toot .text .content code { .toot .text .content code {
padding: 0.25rem 0.5rem; padding: 0.25rem;
border-radius: var(--br-inner); border-radius: var(--br-inner);
} }
.toot .text .content pre { .toot .text .content pre {
display: flex; display: flex;
border-radius: var(--br); border-radius: var(--br);
overflow: hidden; padding: 0.5rem;
margin: 0;
} }
.toot .text .content pre code { .toot .text .content pre code {
padding: 0.25rem 0.5rem; padding: 0.5rem;
white-space: pre; white-space: pre;
border-radius: 0; border-radius: 0;
overflow: auto; overflow-x: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
.toot .text .content img { .toot .text .content img {
@ -727,7 +765,7 @@ main {
} }
.toot .text .emoji:hover, .toot .text .emoji:active { .toot .text .emoji:hover, .toot .text .emoji:active {
-webkit-transform: scale(2); -webkit-transform: scale(2);
transform: scale(2); transform: scale(2);
background-color: var(--bg); background-color: var(--bg);
box-shadow: var(--boxshadow); box-shadow: var(--boxshadow);
border: var(--boxshadow-border); border: var(--boxshadow-border);
@ -744,7 +782,7 @@ main {
height: 100%; height: 100%;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
border: 0.15rem solid var(--gray2); border: 0.15rem solid var(--gray1);
border-radius: var(--br); border-radius: var(--br);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@ -781,8 +819,8 @@ main {
grid-template-columns: 1fr auto 1fr; grid-template-columns: 1fr auto 1fr;
grid-template-rows: 1fr 1fr; grid-template-rows: 1fr 1fr;
grid-template-areas: grid-template-areas:
"eye sensitive ." "eye sensitive ."
". sensitive ."; ". sensitive .";
} }
.toot .media .media-wrapper details summary .eye.button { .toot .media .media-wrapper details summary .eye.button {
grid-area: eye; grid-area: eye;
@ -813,15 +851,15 @@ main {
top: -0.6rem; top: -0.6rem;
left: -0.6rem; left: -0.6rem;
-webkit-filter: blur(1.2rem); -webkit-filter: blur(1.2rem);
filter: blur(1.2rem); filter: blur(1.2rem);
} }
.toot .media .media-wrapper details video.plyr-video, .toot .media .media-wrapper details .plyr { .toot .media .media-wrapper details video.plyr-video, .toot .media .media-wrapper details .plyr {
position: absolute; position: absolute;
height: 100%; height: 100%;
width: 100%; width: 100%;
-o-object-fit: contain; -o-object-fit: contain;
object-fit: contain; object-fit: contain;
background: var(--gray2); background: var(--gray1);
} }
.toot .media.single .media-wrapper { .toot .media.single .media-wrapper {
grid-column: span 2; grid-column: span 2;
@ -833,35 +871,38 @@ main {
width: 100%; width: 100%;
height: 100%; height: 100%;
-o-object-fit: cover; -o-object-fit: cover;
object-fit: cover; object-fit: cover;
} }
.toot .meta {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 0.75rem;
align-items: flex-start;
justify-content: space-between;
}
.toot .info { .toot .info {
display: flex; display: flex;
flex-direction: column; background: var(--toot-info-bg);
flex-wrap: wrap;
gap: 0.5rem;
line-height: 1rem;
color: var(--fg-reduced); color: var(--fg-reduced);
align-items: flex-end; border-top: 0.15rem solid var(--toot-info-border);
} padding: 0.5rem 0.75rem;
}
.toot .info div, .toot .info time {
padding-right: 1rem;
}
.toot .info .stats { .toot .info .stats {
display: flex; display: flex;
flex-direction: row; }
.toot .info{
grid-column: span 3;
flex-wrap: wrap; flex-wrap: wrap;
gap: 1rem;
line-height: 1rem;
color: var(--fg-reduced);
} }
.stats .toot .toot-link {
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
position: absolute;
z-index: 0;
}
.toot:first-child { .toot:first-child {
/* top left, top right */ /* top left, top right */
border-top-left-radius: var(--br); border-top-left-radius: var(--br);
@ -875,6 +916,7 @@ main {
} }
.toot.expanded { .toot.expanded {
background: var(--toot-focus-bg); background: var(--toot-focus-bg);
padding-bottom: 0;
} }
.toot.expanded .info { .toot.expanded .info {
background: var(--toot-focus-info-bg); background: var(--toot-focus-info-bg);

6
template/about.tmpl
View File

@ -67,12 +67,14 @@
<li><a target="_blank" href="mailto:re@dym.sh">email</a>/<a target="_blank" href="/pgp.txt">pgp</a></li> <li><a target="_blank" href="mailto:re@dym.sh">email</a>/<a target="_blank" href="/pgp.txt">pgp</a></li>
<li><a target="_blank" href="https://dym.sh/@dym">microblog</a></li> <li><a target="_blank" href="https://dym.sh/@dym">microblog</a></li>
<li><a target="_blank" href="https://lemmy.world/u/dym_sh">lemmy</a></li> <li><a target="_blank" href="https://lemmy.world/u/dym_sh">lemmy</a></li>
<li><a target="_blank" href="https://indieweb.org/User:Dym.sh">indieweb</a></li>
<li><a target="_blank" href="https://dym-sh.tumblr.com">tumblr</a></li>
<li><a target="_blank" href="https://figma.com/@dym_sh">figma</a></li> <li><a target="_blank" href="https://figma.com/@dym_sh">figma</a></li>
<li><a target="_blank" href="https://layers.to/dym_sh">layers</a></li> <li><a target="_blank" href="https://layers.to/dym_sh">layers</a></li>
<li><a target="_blank" href="https://codepen.io/dym-sh">codepen</a></li> <li><a target="_blank" href="https://codepen.io/dym-sh">codepen</a></li>
<li><a target="_blank" href="https://userstyles.world/user/dym-sh">userstyles</a></li> <li><a target="_blank" href="https://userstyles.world/user/dym-sh">userstyles</a></li>
<li><a target="_blank" href="https://github/dym-sh">github</a></li> <li><a target="_blank" href="https://github.com/dym-sh">github</a></li>
<li><a target="_blank" href="https://indieweb.org/User:Dym.sh">indieweb</a></li>
</ul> </ul>
</main> </main>

12
template/profile.tmpl
View File

@ -28,13 +28,11 @@
<img src="{{.account.Header}}" class="bg" alt=""> <img src="{{.account.Header}}" class="bg" alt="">
<img src="{{.account.Avatar}}" class="avatar" alt=""> <img src="{{.account.Avatar}}" class="avatar" alt="">
{{ if and (.account.Role) (ne .account.Role.Name "user") }} {{ if and (.account.Role) (ne .account.Role.Name "user") }}
<figcaption class="role {{ .account.Role.Name }}"> <figcaption class="role {{ .account.Role.Name }}">{{
{{ if and (.account.Role) (eq .account.Role.Name "admin") }} if and (.account.Role) (eq .account.Role.Name "admin")
webmain }}webmain{{
{{ else }} else }}{{ .account.Role.Name }}{{ end
{{ .account.Role.Name }} }}</figcaption>
{{ end }}
</figcaption>
{{ end }} {{ end }}
</figure> </figure>

2
template/status.tmpl
View File

@ -28,7 +28,7 @@
{{.Account.Username}} {{.Account.Username}}
{{end}} {{end}}
</span> </span>
<span class="username">@{{.Account.Username}}</span> <span class="username">@{{.Account.Username}}</div>
</span> </span>
</a> </a>