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

rev

This commit is contained in:
Dym Sohin 2023-12-27 15:54:24 +01:00
parent b7170fa49f
commit f4ed8f9d9f
9 changed files with 900 additions and 1088 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
about.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 255 KiB

87
assets/dist/base.css vendored
View File

@ -65,10 +65,6 @@ pre {
font-size: 1em; font-size: 1em;
} }
pre {
max-width: 35rem;
}
small { small {
font-size: 80%; font-size: 80%;
} }
@ -184,8 +180,6 @@ nav
, nav * , nav *
, footer , footer
, footer * , footer *
, aside
, aside *
{ all: unset { all: unset
; margin: 0 ; margin: 0
; padding: 0 ; padding: 0
@ -220,52 +214,7 @@ 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;
@ -719,23 +668,6 @@ 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;
@ -745,8 +677,7 @@ ul li::before {
.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,
@ -773,6 +704,11 @@ ul li::before {
.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;
} }
@ -787,6 +723,17 @@ ul li::before {
.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) {

397
assets/dist/profile.css vendored
View File

@ -1,4 +1,3 @@
/* /*
GoToSocial GoToSocial
Copyright (C) 2021-2023 GoToSocial Authors admin@gotosocial.org Copyright (C) 2021-2023 GoToSocial Authors admin@gotosocial.org
@ -10,180 +9,101 @@
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/>.
*/ */
.page { .profile {
grid-template-columns: 1fr minmax(auto, 60rem) 1fr; /* fallback for lack of min() support */ display: flex;
grid-template-columns: 1fr min(92%, 65rem) 1fr; gap: 1rem;
}
.profile .header {
display: flex;
flex-direction: column;
gap: 1rem;
justify-content: flex-start;
width: 20rem;
word-break: break-all;
} }
.profile { .profile .header > * {
padding: 0.5rem;
border-radius: var(--br); border-radius: var(--br);
} }
.profile .column-split { .profile figure {
display: flex; margin: 0 0 0.5rem 0;
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: start; justify-content: space-between;
gap: 2rem; position: relative;
align-items: center; }
.profile figure img.bg {
margin: 0; position: absolute;
background: var(--profile-bg); width: 100%;
border-top-left-radius: var(--br); height: 100%;
border-top-right-radius: var(--br); z-index: 1;
padding: 0.75rem; object-fit: cover;
} }
.profile .col-header h1, .profile .col-header h2 { .profile figure img.avatar {
font-size: 1.2rem; margin: 0.5rem;
line-height: 1.3rem; width: 5rem;
margin: 0; height: 5rem;
} z-index: 2;
object-fit: fill;
border-radius: var(--br);
}
.profile .header .user {
background: var(--profile-bg);
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: 1rem;
}
.profile .header .displayname {
line-height: 1.25rem;
font-size: 1rem;
font-weight: 600;
}
.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;
@ -193,95 +113,82 @@
} }
.profile .toots .col-header { .profile .toots .col-header {
display: grid; display: grid;
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
gap: 1rem;
}
.profile .toots .col-header a {
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 {
border-radius: 0;
}
.profile .toots .toot .info {
padding: 0.3rem 0.75rem;
}
.profile .toots .toot:last-child {
border-bottom-left-radius: var(--br);
border-bottom-right-radius: var(--br);
}
.profile .toots .backnextlinks {
display: flex;
justify-content: space-between;
}
.profile .toots .backnextlinks .next {
margin-left: auto;
}
.profile .about-user {
overflow: hidden;
display: flex;
flex-direction: column;
gap: 1rem; gap: 1rem;
} }
.profile .about-user > * {
.profile .toots .col-header a {
justify-self: end;
}
.profile .toots .toot {
border-radius: var(--br);
}
.toot .info {
flex-direction: row;
gap: 1rem;
}
.toot .info {
flex-direction: row;
gap: 1rem;
}
.profile .toots .backnextlinks {
display: flex;
justify-content: space-between;
}
.profile .toots .backnextlinks .next {
margin-left: auto;
}
.profile .col-header {
margin-bottom: -0.25rem;
}
.profile > * {
border-radius: var(--br); border-radius: var(--br);
} }
.profile .about-user .col-header { .profile .fields {
margin-bottom: -0.25rem; background: var(--profile-bg);
} display: grid;
grid-template-columns: 1fr 2fr;
.profile .about-user .fields { padding: 0.5rem;
background: var(--profile-bg);
display: grid;
grid-template: max-content 1fr;
padding: 0 0.5rem;
}
.profile .about-user .fields .field + .field {
border-top: 0.1rem solid var(--gray2);
}
.profile .about-user .bio {
background: var(--profile-bg);
padding: 1rem;
}
.profile .about-user .accountstats {
background: var(--bg-accent);
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; .profile .fields > * {
padding: 0.5rem;
}
.profile .fields > b {
align-self: center;
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 .rss-icon img {
width: 20px;
height: 20px;
}
.profile .fields .flex,
.profile .fields .flex * {
display: flex;
line-height: 1rem;
gap: 0.5rem;
align-items: center;
}
.profile .bio {
background: var(--profile-bg);
padding: 1rem;
} }

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(--gray4); background: var(--gray3);
} }
nav.menu-tree li.nested a.title:focus { nav.menu-tree li.nested a.title:focus {

456
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,16 +495,10 @@ 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}
@ -528,7 +522,6 @@ 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)}
@ -540,10 +533,8 @@ 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}
@ -563,10 +554,8 @@ 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%}
@ -612,80 +601,62 @@ 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);
position: relative; display: flex;
margin-bottom: var(--br); flex-direction: column;
padding-top: 0.75rem; padding: 1rem;
gap: 0.75rem;
} }
.toot a { .toot a {
position: relative;
z-index: 1;
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
} }
.toot .author > a { .toot .author {
padding: 0 0.75rem; display: flex;
display: grid; flex-direction: row;
grid-template-columns: 3.5rem 1fr auto; flex-wrap: nowrap;
grid-template-rows: auto auto; gap: 0.75rem;
grid-template-areas:
"avatar display date"
"avatar user .";
gap: 0 0.5rem;
} }
.toot .author > a .avatar { .toot .author .avatar {
grid-area: avatar; height: 3rem;
height: 3.5rem; width: 3rem;
width: 3.5rem; -o-object-fit: cover;
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;
border: 0.15rem solid var(--avatar-border);
border-radius: var(--br);
overflow: hidden;
} }
/* hides corners from img overflowing */
.toot .author > a .avatar img {
height: 100%;
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%; .toot .author .user-info {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: space-around;
}
.toot .author .displayname,
.toot .author .username {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.toot .author > a .displayname { .toot .author .displayname {
grid-area: display;
font-weight: bold; font-weight: bold;
font-size: 1rem;
line-height: 1.3rem;
/* margin-top: -0.5rem; */
} }
.toot .author > a .username { .toot .author .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;
@ -701,16 +672,6 @@ 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;
} }
@ -726,8 +687,8 @@ main {
word-break: break-word; word-break: break-word;
} }
.toot .text .content blockquote { .toot .text .content blockquote {
padding: 0.5rem 0 0.5rem 0.5rem; padding: 0.25rem 0 0.25rem 0.5rem;
border-left: 0.2rem solid var(--border-accent); border-left: 0.25rem solid var(--border-accent);
margin: 0; margin: 0;
font-style: italic; font-style: italic;
} }
@ -738,19 +699,20 @@ main {
background-color: var(--gray2); background-color: var(--gray2);
} }
.toot .text .content code { .toot .text .content code {
padding: 0.25rem; padding: 0.25rem 0.5rem;
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);
padding: 0.5rem; overflow: hidden;
margin: 0;
} }
.toot .text .content pre code { .toot .text .content pre code {
padding: 0.5rem; padding: 0.25rem 0.5rem;
white-space: pre; white-space: pre;
border-radius: 0; border-radius: 0;
overflow-x: auto; overflow: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
.toot .text .content img { .toot .text .content img {
@ -765,7 +727,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);
@ -782,7 +744,7 @@ main {
height: 100%; height: 100%;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
border: 0.15rem solid var(--gray1); border: 0.15rem solid var(--gray2);
border-radius: var(--br); border-radius: var(--br);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@ -819,8 +781,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;
@ -851,15 +813,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(--gray1); background: var(--gray2);
} }
.toot .media.single .media-wrapper { .toot .media.single .media-wrapper {
grid-column: span 2; grid-column: span 2;
@ -871,38 +833,35 @@ 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;
background: var(--toot-info-bg); flex-direction: column;
color: var(--fg-reduced);
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 {
display: flex;
}
.toot .info{
grid-column: span 3;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.5rem;
line-height: 1rem;
color: var(--fg-reduced);
align-items: flex-end;
} }
.toot .toot-link { .toot .info .stats {
top: 0; display: flex;
right: 0; flex-direction: row;
bottom: 0; flex-wrap: wrap;
left: 0; gap: 1rem;
overflow: hidden; line-height: 1rem;
text-indent: 100%; color: var(--fg-reduced);
white-space: nowrap; }
.stats
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);
@ -916,7 +875,6 @@ 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);

BIN
profile.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 438 KiB

6
template/about.tmpl
View File

@ -67,14 +67,12 @@
<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.com/dym-sh">github</a></li> <li><a target="_blank" href="https://github/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,11 +28,13 @@
<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 }}{{ .account.Role.Name }}{{ end {{ else }}
}}</figcaption> {{ .account.Role.Name }}
{{ 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}}</div> <span class="username">@{{.Account.Username}}</span>
</span> </span>
</a> </a>