summaryrefslogtreecommitdiff
path: root/web/source/css
diff options
context:
space:
mode:
Diffstat (limited to 'web/source/css')
-rw-r--r--web/source/css/_media-wrapper.css207
-rw-r--r--web/source/css/_prism.css (renamed from web/source/css/prism.css)0
-rw-r--r--web/source/css/_profile-header.css343
-rw-r--r--web/source/css/_status-media.css44
-rw-r--r--web/source/css/base.css2
-rw-r--r--web/source/css/profile-gallery.css108
-rw-r--r--web/source/css/profile.css318
-rw-r--r--web/source/css/status.css210
-rw-r--r--web/source/css/tag.css8
9 files changed, 711 insertions, 529 deletions
diff --git a/web/source/css/_media-wrapper.css b/web/source/css/_media-wrapper.css
new file mode 100644
index 000000000..1c2ae1503
--- /dev/null
+++ b/web/source/css/_media-wrapper.css
@@ -0,0 +1,207 @@
+/*
+ GoToSocial
+ Copyright (C) GoToSocial Authors admin@gotosocial.org
+ SPDX-License-Identifier: AGPL-3.0-or-later
+
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU Affero General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ GNU Affero General Public License for more details.
+
+ 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/>.
+*/
+
+@import "photoswipe/dist/photoswipe.css";
+@import "photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.css";
+@import "plyr/dist/plyr.css";
+
+.media-wrapper {
+ height: 100%;
+ width: 100%;
+ box-sizing: border-box;
+ border: 0.15rem solid $gray1;
+ border-radius: $br;
+ position: relative;
+ overflow: hidden;
+ z-index: 2;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+
+ details {
+ position: absolute;
+ height: 100%;
+ width: 100%;
+
+ &[open] summary {
+ height: auto;
+ width: auto;
+ margin: 1rem;
+ padding: 0;
+
+ .show, video, img {
+ display: none;
+ }
+
+ .eye.button .hide {
+ display: inline-block;
+ grid-column: 1 / span 3;
+ grid-row: 1 / span 2;
+ }
+ }
+
+ summary {
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ z-index: 3;
+ overflow: hidden;
+
+ display: grid;
+ padding: 1rem;
+ grid-template-columns: 1fr auto 1fr;
+ grid-template-rows: 1fr 1fr;
+ grid-template-areas:
+ "eye sensitive ."
+ ". sensitive .";
+
+ &::-webkit-details-marker {
+ display: none; /* Safari */
+ }
+
+ .eye.button {
+ grid-area: eye;
+ align-self: start;
+ justify-self: start;
+ margin: 0;
+ padding: 0.4rem;
+
+ .fa-fw {
+ line-height: $fa-fw;
+ }
+
+ .hide {
+ display: none;
+ }
+ }
+
+ .show.sensitive {
+ grid-area: sensitive;
+ align-self: center;
+
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+
+ .button {
+ cursor: pointer;
+ align-self: center;
+ }
+ }
+
+ video, img {
+ z-index: -1;
+ position: absolute;
+ height: calc(100% + 1.2rem);
+ width: calc(100% + 1.2rem);
+ top: -0.6rem;
+ left: -0.6rem;
+ filter: blur(1.2rem);
+ }
+ }
+
+ video.plyr-video, .plyr {
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ object-fit: contain;
+ background: $gray1;
+ }
+
+ .unknown-attachment {
+ .placeholder {
+ width: 100%;
+ height: 100%;
+ padding: 0.8rem;
+ border: 0.2rem dashed $white2;
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 0.25rem;
+
+ color: $white2;
+
+ .placeholder-external-link {
+ align-self: end;
+ font-size: 2.5rem;
+ }
+
+ .placeholder-icon {
+ width: 100%;
+ font-size: 3.5rem;
+ text-align: center;
+ margin-top: auto;
+ }
+
+ .placeholder-link-to {
+ width: 100%;
+ text-align: center;
+ margin-bottom: auto;
+ }
+ }
+ }
+ }
+}
+
+.pswp__button--open-post-link {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ span > i {
+ background: $status-bg;
+ color: $fg;
+ border-radius: 25%;
+ }
+}
+
+.plyr--video {
+ flex-direction: column-reverse;
+
+ .plyr__video-wrapper {
+ position: relative;
+ }
+
+ .plyr__controls {
+ align-self: stretch;
+ position: initial;
+ padding: 0.1rem;
+ padding-top: 0.2rem;
+ }
+
+ .plyr__control {
+ box-shadow: none;
+ }
+
+ .plyr__control--overlaid {
+ top: calc(50% - 18px);
+ }
+}
+
+.pswp__content {
+ padding: 2rem;
+
+ .plyr {
+ max-height: 100%;
+ }
+}
diff --git a/web/source/css/prism.css b/web/source/css/_prism.css
index c1d369a9c..c1d369a9c 100644
--- a/web/source/css/prism.css
+++ b/web/source/css/_prism.css
diff --git a/web/source/css/_profile-header.css b/web/source/css/_profile-header.css
new file mode 100644
index 000000000..b4ebadf8d
--- /dev/null
+++ b/web/source/css/_profile-header.css
@@ -0,0 +1,343 @@
+/*
+ GoToSocial
+ Copyright (C) GoToSocial Authors admin@gotosocial.org
+ SPDX-License-Identifier: AGPL-3.0-or-later
+
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU Affero General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ GNU Affero General Public License for more details.
+
+ 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/>.
+*/
+
+.profile .profile-header {
+ background: $profile-bg;
+ border-radius: $br;
+ overflow: hidden;
+ margin-bottom: 1rem;
+
+ .moved-to {
+ padding: 1rem;
+ text-align: center;
+ }
+
+ .header-image-wrapper {
+ position: relative;
+ padding-top: 33.33%; /* aspect-ratio 1/3 */
+
+ img {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+ }
+
+ /*
+ 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.
+ */
+ $avatar-size: 8.5rem;
+ $name-size: 3rem;
+ $username-size: 2rem;
+ $overlap: calc($avatar-size - $name-size - $username-size);
+
+ .basic-info {
+ position: relative;
+ display: grid;
+ box-sizing: border-box;
+ grid-template-columns: $avatar-size auto 1fr;
+ grid-template-rows: $overlap $name-size auto;
+ grid-template-areas:
+ "avatar . ."
+ "avatar namerole namerole"
+ "avatar namerole namerole";
+
+ margin: 1rem;
+ margin-top: calc(-1 * $overlap);
+ gap: 0 1rem;
+
+ .avatar-image-wrapper {
+ grid-area: avatar;
+
+ border: 0.2rem solid $avatar-border;
+ border-radius: $br;
+
+ /*
+ Wrapper always same
+ size + proportions no
+ matter image inside.
+ */
+ height: $avatar-size;
+ width: $avatar-size;
+
+ .avatar {
+ /*
+ Fit 100% of the wrapper.
+ */
+ height: 100%;
+ width: 100%;
+
+ /*
+ Normalize non-square images.
+ */
+ object-fit: cover;
+
+ /*
+ Prevent image extending
+ beyond rounded borders.
+ */
+ border-radius: $br-inner;
+ }
+ }
+
+ .namerole {
+ grid-area: namerole;
+
+ display: grid;
+ gap: 0 1rem;
+ box-sizing: border-box;
+ grid-template-columns: 1fr auto;
+ grid-template-rows: $name-size auto;
+ grid-template-areas:
+ "displayname displayname"
+ "username role";
+
+ .displayname {
+ grid-area: displayname;
+ line-height: $name-size;
+ font-size: 1.5rem;
+ font-weight: bold;
+ }
+
+ .bot-username-wrapper {
+ display: flex;
+ gap: 0.5rem;
+ grid-area: username;
+ align-items: center;
+
+ .bot-legend-wrapper {
+ display: flex;
+ gap: 0.25rem;
+ align-items: center;
+
+ background: $bg;
+ color: $fg;
+
+ border-radius: $br;
+ padding: 0.1rem 0.4rem 0.2rem 0.4rem;
+
+ font-variant: small-caps;
+ font-weight: bold;
+
+ cursor: default;
+
+ .bot-icon {
+ /*
+ FA icon is weirdly
+ aligned so tweak it
+ */
+ margin-top: 0.25rem;
+ }
+ }
+
+ .username {
+ min-width: 0;
+ line-height: $username-size;
+
+ font-size: 1rem;
+ font-weight: bold;
+ color: $fg-accent;
+ user-select: all;
+ }
+ }
+
+ .role {
+ background: $bg;
+ color: $fg;
+ border: 0.13rem solid $bg;
+
+ grid-area: role;
+ align-self: center;
+ justify-self: start;
+ border-radius: $br;
+ padding: 0.3rem;
+
+ line-height: 1.1rem;
+ font-size: 0.9rem;
+ font-variant: small-caps;
+ font-weight: bold;
+
+ &.admin {
+ color: $role-admin;
+ border-color: $role-admin;
+ }
+
+ &.moderator {
+ color: $role-mod;
+ border-color: $role-mod;
+ }
+ }
+ }
+ }
+}
+
+.profile .about-user {
+ flex: 35 14rem;
+ border-radius: $br;
+ overflow: hidden;
+
+ .col-header {
+ margin-bottom: -0.25rem;
+ }
+
+ dt {
+ font-weight: bold;
+ }
+
+ .fields {
+ background: $profile-bg;
+ display: flex;
+ flex-direction: column;
+ padding: 0 0.5rem;
+ padding-top: 0.25rem;
+
+ .field {
+ padding: 0.25rem;
+ display: flex;
+ flex-direction: column;
+ border-bottom: 0.1rem solid $gray2;
+
+ > dt, > dd {
+ word-break: break-word;
+ }
+
+ &:first-child {
+ border-top: 0.1rem solid $gray2;
+ }
+ }
+ }
+
+ .bio {
+ background: $profile-bg;
+ padding: 1rem 0.75rem;
+ padding-bottom: 1.25rem;
+ }
+
+ .accountstats {
+ background: $bg-accent;
+ padding: 0.75rem;
+
+ display: flex;
+ flex-direction: column;
+ gap: 0.25rem;
+
+ .stats-item {
+ display: flex;
+ dt {
+ width: 7rem;
+ }
+ }
+ }
+}
+
+/*
+ RSS icon isn't really part of the profile header exactly,
+ but also it sort of is, and we want it styled the same for
+ both microblog and gallery view anyway, so include it here.
+*/
+.rss-icon {
+ display: block;
+ margin: -0.25rem 0;
+
+ .fa {
+ font-size: 2rem;
+ object-fit: contain;
+ vertical-align: middle;
+ color: $orange2;
+ /*
+ Can't size a single-color background, so we use
+ a linear-gradient that's effectively white.
+ */
+ background: linear-gradient(to right, $white1 100%, transparent 0) no-repeat center center;
+ background-size: 1.2rem 1.4rem;
+ /* light mode */
+ @media (prefers-color-scheme: light) {
+ background: linear-gradient(to right, $white 100%, transparent 0) no-repeat center center;
+ background-size: 1.2rem 1.4rem;
+ }
+ }
+}
+
+/*
+ Tablet-ish-kinda size.
+*/
+@media screen and (max-width: 750px) {
+ .profile .profile-header {
+ .basic-info {
+ grid-template-columns: auto 1fr;
+ grid-template-rows: $avatar-size $name-size auto;
+ grid-template-areas:
+ "avatar avatar"
+ "namerole namerole"
+ "namerole namerole";
+
+ /*
+ Make display name a bit smaller
+ so there's more chance of being
+ able to read everything.
+ */
+ .namerole {
+ .displayname {
+ font-size: 1.2rem;
+ line-height: 2rem;
+ margin-top: 0.5rem;
+ }
+ }
+ }
+ }
+}
+
+/*
+ Phone-ish-kinda size.
+*/
+@media screen and (max-width: 500px) {
+ .profile
+ .profile-header
+ .basic-info
+ .namerole {
+ /*
+ Line up in smallest possible
+ horizontal space to avoid overflow.
+ */
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+
+ /*
+ Don't hug the right anymore
+ (good life advice in general).
+ */
+ .role {
+ align-self: flex-start;
+ }
+
+ /*
+ Allow this to wrap in case
+ of a really skinny screen.
+ */
+ .bot-username-wrapper {
+ flex-wrap: wrap;
+ }
+ }
+}
diff --git a/web/source/css/_status-media.css b/web/source/css/_status-media.css
new file mode 100644
index 000000000..e8386c87a
--- /dev/null
+++ b/web/source/css/_status-media.css
@@ -0,0 +1,44 @@
+/*
+ GoToSocial
+ Copyright (C) GoToSocial Authors admin@gotosocial.org
+ SPDX-License-Identifier: AGPL-3.0-or-later
+
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU Affero General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ GNU Affero General Public License for more details.
+
+ 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/>.
+*/
+
+@import "./_media-wrapper.css";
+
+.media {
+ grid-column: span 3;
+ display: grid;
+ grid-template-columns: 50% 50%;
+ grid-auto-rows: 10rem;
+ overflow: hidden;
+
+ &.single .media-wrapper {
+ grid-column: span 2;
+ }
+
+ &.odd .media-wrapper:first-child,
+ &.double .media-wrapper {
+ grid-row: span 2;
+ }
+
+ @media screen and (max-width: 42rem) {
+ .media-wrapper {
+ grid-column: span 2;
+ grid-row: span 2;
+ }
+ }
+}
diff --git a/web/source/css/base.css b/web/source/css/base.css
index 5f2f75802..765453ac2 100644
--- a/web/source/css/base.css
+++ b/web/source/css/base.css
@@ -22,7 +22,7 @@
****************************************/
@import "modern-normalize/modern-normalize.css";
-@import "./prism.css";
+@import "./_prism.css";
/* noto-sans-regular - latin */
@font-face {
diff --git a/web/source/css/profile-gallery.css b/web/source/css/profile-gallery.css
new file mode 100644
index 000000000..cb70eff22
--- /dev/null
+++ b/web/source/css/profile-gallery.css
@@ -0,0 +1,108 @@
+/*
+ GoToSocial
+ Copyright (C) GoToSocial Authors admin@gotosocial.org
+ SPDX-License-Identifier: AGPL-3.0-or-later
+
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU Affero General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ GNU Affero General Public License for more details.
+
+ 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/>.
+*/
+
+@import "./_profile-header.css";
+@import "./_media-wrapper.css";
+
+.page {
+ /*
+ Profile gallery can be wider than default.
+ */
+ grid-template-columns: 1fr min(95%, 65rem) 1fr;
+}
+
+.profile {
+ .about-user {
+ margin-bottom: 1rem;
+
+ .accountstats {
+ flex-direction: row;
+ justify-content: space-between;
+
+ .stats-item {
+ gap: 0.5rem;
+ width: 25%;
+ justify-content: space-around;
+
+ dt {
+ width: fit-content;
+ margin-left: auto;
+ }
+
+ dd {
+ margin-right: auto;
+ }
+ }
+
+ @media screen and (max-width: 750px) {
+ flex-direction: column;
+ .stats-item {
+ width: fit-content;
+ dt {
+ width: 7rem;
+ }
+ }
+ }
+ }
+ }
+
+ .media-galleries-wrapper {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ min-width: 0%;
+
+ .media-gallery {
+ margin-top: 0.15rem;
+ margin-bottom: 0.15rem;
+
+ display: grid;
+ gap: 0.15rem;
+
+ /* Desktop-ish width, show 3 cols of media */
+ grid-template-columns: repeat(3, 1fr);
+
+ @media screen and (max-width: 55rem) {
+ /* Tablet-ish width, switch to 2 cols */
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ @media screen and (max-width: 36rem) {
+ /* Mobile-ish width, switch to 1 col */
+ grid-template-columns: repeat(1, 1fr);
+ }
+
+ .media-wrapper {
+ aspect-ratio: 4/3;
+ border: 0;
+ border-radius: 0;
+ background: $bg;
+ }
+ }
+
+ .backnextlinks {
+ display: flex;
+ justify-content: space-between;
+
+ .next {
+ margin-left: auto;
+ }
+ }
+ }
+}
diff --git a/web/source/css/profile.css b/web/source/css/profile.css
index 1296b8927..5b9f2188e 100644
--- a/web/source/css/profile.css
+++ b/web/source/css/profile.css
@@ -17,13 +17,14 @@
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
+@import "./_profile-header.css";
+
.page {
/*
Profile page can be a little wider than default
page, since we're using a side-by-side column view.
*/
- grid-template-columns: 1fr minmax(auto, 60rem) 1fr;
- grid-template-columns: 1fr min(92%, 65rem) 1fr;
+ grid-template-columns: 1fr min(95%, 65rem) 1fr;
}
.profile .column-split {
@@ -32,244 +33,6 @@
gap: 1rem;
}
-.profile .profile-header {
- background: $profile-bg;
- border-radius: $br;
- overflow: hidden;
- margin-bottom: 1rem;
-
- .moved-to {
- padding: 1rem;
- text-align: center;
- }
-
- .header-image-wrapper {
- position: relative;
- padding-top: 33.33%; /* aspect-ratio 1/3 */
-
- img {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- width: 100%;
- height: 100%;
- object-fit: cover;
- }
- }
-
- /*
- 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.
- */
- $avatar-size: 8.5rem;
- $name-size: 3rem;
- $username-size: 2rem;
- $overlap: calc($avatar-size - $name-size - $username-size);
-
- .basic-info {
- position: relative;
- display: grid;
- box-sizing: border-box;
- grid-template-columns: $avatar-size auto 1fr;
- grid-template-rows: $overlap $name-size auto;
- grid-template-areas:
- "avatar . ."
- "avatar namerole namerole"
- "avatar namerole namerole";
-
- margin: 1rem;
- margin-top: calc(-1 * $overlap);
- gap: 0 1rem;
-
- .avatar-image-wrapper {
- grid-area: avatar;
-
- border: 0.2rem solid $avatar-border;
- border-radius: $br;
-
- /*
- Wrapper always same
- size + proportions no
- matter image inside.
- */
- height: $avatar-size;
- width: $avatar-size;
-
- .avatar {
- /*
- Fit 100% of the wrapper.
- */
- height: 100%;
- width: 100%;
-
- /*
- Normalize non-square images.
- */
- object-fit: cover;
-
- /*
- Prevent image extending
- beyond rounded borders.
- */
- border-radius: $br-inner;
- }
- }
-
- .namerole {
- grid-area: namerole;
-
- display: grid;
- gap: 0 1rem;
- box-sizing: border-box;
- grid-template-columns: 1fr auto;
- grid-template-rows: $name-size auto;
- grid-template-areas:
- "displayname displayname"
- "username role";
-
- .displayname {
- grid-area: displayname;
- line-height: $name-size;
- font-size: 1.5rem;
- font-weight: bold;
- }
-
- .bot-username-wrapper {
- display: flex;
- gap: 0.5rem;
- grid-area: username;
- align-items: center;
-
- .bot-legend-wrapper {
- display: flex;
- gap: 0.25rem;
- align-items: center;
-
- background: $bg;
- color: $fg;
-
- border-radius: $br;
- padding: 0.1rem 0.4rem 0.2rem 0.4rem;
-
- font-variant: small-caps;
- font-weight: bold;
-
- cursor: default;
-
- .bot-icon {
- /*
- FA icon is weirdly
- aligned so tweak it
- */
- margin-top: 0.25rem;
- }
- }
-
- .username {
- min-width: 0;
- line-height: $username-size;
-
- font-size: 1rem;
- font-weight: bold;
- color: $fg-accent;
- user-select: all;
- }
- }
-
- .role {
- background: $bg;
- color: $fg;
- border: 0.13rem solid $bg;
-
- grid-area: role;
- align-self: center;
- justify-self: start;
- border-radius: $br;
- padding: 0.3rem;
-
- line-height: 1.1rem;
- font-size: 0.9rem;
- font-variant: small-caps;
- font-weight: bold;
-
- &.admin {
- color: $role-admin;
- border-color: $role-admin;
- }
-
- &.moderator {
- color: $role-mod;
- border-color: $role-mod;
- }
- }
- }
- }
-}
-
-/*
- Tablet-ish-kinda size.
-*/
-@media screen and (max-width: 750px) {
- .profile .profile-header {
- .basic-info {
- grid-template-columns: auto 1fr;
- grid-template-rows: $avatar-size $name-size auto;
- grid-template-areas:
- "avatar avatar"
- "namerole namerole"
- "namerole namerole";
-
- /*
- Make display name a bit smaller
- so there's more chance of being
- able to read everything.
- */
- .namerole {
- .displayname {
- font-size: 1.2rem;
- line-height: 2rem;
- margin-top: 0.5rem;
- }
- }
- }
- }
-}
-
-/*
- Phone-ish-kinda size.
-*/
-@media screen and (max-width: 500px) {
- .profile
- .profile-header
- .basic-info
- .namerole {
- /*
- Line up in smallest possible
- horizontal space to avoid overflow.
- */
- display: flex;
- flex-direction: column;
- gap: 0.5rem;
-
- /*
- Don't hug the right anymore
- (good life advice in general).
- */
- .role {
- align-self: flex-start;
- }
-
- /*
- Allow this to wrap in case
- of a really skinny screen.
- */
- .bot-username-wrapper {
- flex-wrap: wrap;
- }
- }
-}
-
.profile .statuses-wrapper {
flex: 65 25rem;
display: flex;
@@ -283,29 +46,6 @@
flex-direction: column;
gap: 0.4rem;
- .rss-icon {
- display: block;
- margin: -0.25rem 0;
-
- .fa {
- font-size: 2rem;
- object-fit: contain;
- vertical-align: middle;
- color: $orange2;
- /*
- Can't size a single-color background, so we use
- a linear-gradient that's effectively white.
- */
- background: linear-gradient(to right, $white1 100%, transparent 0) no-repeat center center;
- background-size: 1.2rem 1.4rem;
- /* light mode */
- @media (prefers-color-scheme: light) {
- background: linear-gradient(to right, $white 100%, transparent 0) no-repeat center center;
- background-size: 1.2rem 1.4rem;
- }
- }
- }
-
.backnextlinks {
display: flex;
justify-content: space-between;
@@ -315,55 +55,3 @@
}
}
}
-
-.profile .about-user {
- flex: 35 14rem;
- border-radius: $br;
- overflow: hidden;
-
- .col-header {
- margin-bottom: -0.25rem;
- }
-
- dt {
- font-weight: bold;
- }
-
- .fields {
- background: $profile-bg;
- display: flex;
- flex-direction: column;
- padding: 0 0.5rem;
- padding-top: 0.25rem;
-
- .field {
- padding: 0.25rem;
- display: flex;
- flex-direction: column;
- border-bottom: 0.1rem solid $gray2;
-
- > dt, > dd {
- word-break: break-word;
- }
-
- &:first-child {
- border-top: 0.1rem solid $gray2;
- }
- }
- }
-
- .bio {
- background: $profile-bg;
- padding: 1rem 0.75rem;
- padding-bottom: 1.25rem;
- }
-
- .accountstats {
- background: $bg-accent;
- padding: 0.75rem;
-
- display: grid;
- grid-template-columns: auto 1fr;
- gap: 0.25rem 1rem;
- }
-} \ No newline at end of file
diff --git a/web/source/css/status.css b/web/source/css/status.css
index 4b2d7e2a7..ec6cac3e5 100644
--- a/web/source/css/status.css
+++ b/web/source/css/status.css
@@ -17,14 +17,7 @@
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
-@import "photoswipe/dist/photoswipe.css";
-@import "photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.css";
-@import "plyr/dist/plyr.css";
-
-main {
- background: transparent;
- grid-auto-rows: auto;
-}
+@import "./_status-media.css";
.status {
background: $status-bg;
@@ -257,172 +250,6 @@ main {
}
}
- .media {
- grid-column: span 3;
- display: grid;
- grid-template-columns: 50% 50%;
- grid-auto-rows: 10rem;
- overflow: hidden;
-
- .media-wrapper {
- height: 100%;
- width: 100%;
- box-sizing: border-box;
- border: 0.15rem solid $gray1;
- border-radius: $br;
- position: relative;
- overflow: hidden;
- z-index: 2;
-
- details {
- position: absolute;
- height: 100%;
- width: 100%;
-
- &[open] summary {
- height: auto;
- width: auto;
- margin: 1rem;
- padding: 0;
-
- .show, video, img {
- display: none;
- }
-
- .eye.button .hide {
- display: inline-block;
- grid-column: 1 / span 3;
- grid-row: 1 / span 2;
- }
- }
-
- summary {
- position: absolute;
- height: 100%;
- width: 100%;
- z-index: 3;
- overflow: hidden;
-
- display: grid;
- padding: 1rem;
- grid-template-columns: 1fr auto 1fr;
- grid-template-rows: 1fr 1fr;
- grid-template-areas:
- "eye sensitive ."
- ". sensitive .";
-
- &::-webkit-details-marker {
- display: none; /* Safari */
- }
-
- .eye.button {
- grid-area: eye;
- align-self: start;
- justify-self: start;
- margin: 0;
- padding: 0.4rem;
-
- .fa-fw {
- line-height: $fa-fw;
- }
-
- .hide {
- display: none;
- }
- }
-
- .show.sensitive {
- grid-area: sensitive;
- align-self: center;
-
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
-
- .button {
- cursor: pointer;
- align-self: center;
- }
- }
-
- video, img {
- z-index: -1;
- position: absolute;
- height: calc(100% + 1.2rem);
- width: calc(100% + 1.2rem);
- top: -0.6rem;
- left: -0.6rem;
- filter: blur(1.2rem);
- }
- }
-
- video.plyr-video, .plyr {
- position: absolute;
- height: 100%;
- width: 100%;
- object-fit: contain;
- background: $gray1;
- }
-
- .unknown-attachment {
- .placeholder {
- width: 100%;
- height: 100%;
- padding: 0.8rem;
- border: 0.2rem dashed $white2;
-
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 0.25rem;
-
- color: $white2;
-
- .placeholder-external-link {
- align-self: end;
- font-size: 2.5rem;
- }
-
- .placeholder-icon {
- width: 100%;
- font-size: 3.5rem;
- text-align: center;
- margin-top: auto;
- }
-
- .placeholder-link-to {
- width: 100%;
- text-align: center;
- margin-bottom: auto;
- }
- }
- }
- }
- }
-
- &.single .media-wrapper {
- grid-column: span 2;
- }
-
- &.odd .media-wrapper:first-child,
- &.double .media-wrapper {
- grid-row: span 2;
- }
-
- @media screen and (max-width: 42rem) {
- .media-wrapper {
- grid-column: span 2;
- grid-row: span 2;
- }
- }
-
- img {
- width: 100%;
- height: 100%;
- object-fit: cover;
- }
- }
-
.status-info {
background: $status-info-bg;
color: $fg-reduced;
@@ -448,10 +275,6 @@ main {
gap: 0.4rem;
}
- .stats-item.published-at {
- text-decoration: underline;
- }
-
.stats-item:not(.published-at):not(.edited-at) {
z-index: 1;
user-select: none;
@@ -497,34 +320,3 @@ main {
}
}
}
-
-.plyr--video {
- flex-direction: column-reverse;
-
- .plyr__video-wrapper {
- position: relative;
- }
-
- .plyr__controls {
- align-self: stretch;
- position: initial;
- padding: 0.1rem;
- padding-top: 0.2rem;
- }
-
- .plyr__control {
- box-shadow: none;
- }
-
- .plyr__control--overlaid {
- top: calc(50% - 18px);
- }
-}
-
-.pswp__content {
- padding: 2rem;
-
- .plyr {
- max-height: 100%;
- }
-} \ No newline at end of file
diff --git a/web/source/css/tag.css b/web/source/css/tag.css
index 2f1c9db98..99dbd6f61 100644
--- a/web/source/css/tag.css
+++ b/web/source/css/tag.css
@@ -18,8 +18,8 @@
*/
.thread {
- #tag-name {
- /* Ensure ridiculous length tags get wrapped */
- word-wrap: anywhere;
- }
+ #tag-name {
+ /* Ensure ridiculous length tags get wrapped */
+ word-wrap: anywhere;
+ }
}
generated by cgit v1.2.3 (git 2.46.0) at 2025-12-02 05:15:58 +0000