gotosocial/web/source/css/status.css
f0x52 9cc9ffc5a7
[frontend] Profiles with fields & more (#1764)
* redesign status template

* separate index page styling

* redesign profile template

* fix header styling/wrapping

* remove old spoiler js

* fix status cw button wrapping

* fix status info variables

* profile responsiveness, accessibility tweaks

* fix variable use, mobile

* remove duplicate id's

* rss icon, fix indent

* fix toot border-radius

* fix toot spacing

* emojify and html profile fields

* refactor (sensitive) media rendering

* plaintext profile fields

* bundle plyr icon svg

* only pause video when switching photoswipe slides

* yarn upgrade

* profile fields formatting

* replace uglifyify with @browserify updated fork

* fix profile field templating (yet again)

* fix React classes

* testrig: add testing profile field for admin user

* fix sensitive media interactions

* Revert "testrig: add testing profile field for admin user"

This reverts commit 80490c183e.

* settings interface wrapping

* fix reported toot styling

* add role to profile sr-only text

* comment fallback rule

* remove currently unused image description lacking indicator
2023-05-11 17:46:32 +02:00

413 lines
6.8 KiB
CSS

/*
GoToSocial
Copyright (C) 2021-2023 GoToSocial Authors admin@gotosocial.org
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";
main {
background: transparent;
grid-auto-rows: auto;
}
.thread {
display: flex;
flex-direction: column;
border-radius: $br;
}
.toot {
background: $toot-bg;
box-shadow: $boxshadow;
border: $boxshadow-border;
border-radius: $br;
position: relative;
margin-bottom: $br;
padding-top: 0.75rem;
a {
position: relative;
z-index: 1;
color: inherit;
text-decoration: none;
}
.author > a {
padding: 0 0.75rem;
display: grid;
grid-template-columns: 3.5rem 1fr auto;
grid-template-rows: auto auto;
grid-template-areas:
"avatar display date"
"avatar user .";
gap: 0 0.5rem;
.avatar {
grid-area: avatar;
height: 3.5rem;
width: 3.5rem;
object-fit: cover;
border: 0.15rem solid $avatar-border;
border-radius: $br;
overflow: hidden; /* hides corners from img overflowing */
img {
height: 100%;
width: 100%;
object-fit: cover;
background: $bg;
}
}
.displayname, .username {
justify-self: start;
align-self: start;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.displayname {
grid-area: display;
font-weight: bold;
font-size: 1rem;
line-height: 1.3rem;
/* margin-top: -0.5rem; */
}
.username {
grid-area: user;
color: $link-fg;
font-size: 1rem;
line-height: 1.3rem;
}
.timestamp {
grid-area: date;
color: $fg-reduced;
}
}
.body {
padding: 0.5rem 0.75rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
details > summary {
display: inline-block;
list-style: none;
&::-webkit-details-marker {
display: none; /* Safari */
}
.button {
white-space: nowrap;
cursor: pointer;
}
}
.text {
margin: 0;
grid-row: span 1;
grid-column: 1 / span 3;
position: relative;
z-index: 2;
width: 100%;
details > summary {
padding-bottom: 0.5rem;
.button {
padding: 0.2rem 0.3rem;
font-size: 1rem;
}
}
a {
color: $link-fg;
text-decoration: underline;
}
.content {
word-break: break-word;
blockquote {
padding: 0.5rem 0 0.5rem 0.5rem;
border-left: 0.2rem solid $border-accent;
margin: 0;
font-style: italic;
}
hr {
border: 1px dashed $border-accent;
}
pre, code {
background-color: $gray2;
}
code {
padding: 0.25rem;
border-radius: $br-inner;
}
pre {
display: flex;
border-radius: $br;
padding: 0.5rem;
code {
padding: 0.5rem;
white-space: pre;
border-radius: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
img {
max-width: 100%;
margin: 5px auto;
}
img[alt~="!center"] {
display: block;
}
}
.emoji {
transition: 0.1s;
}
.emoji:hover, .emoji:active {
transform: scale(2);
background-color: $bg;
box-shadow: $boxshadow;
border: $boxshadow-border;
border-radius: $br-inner;
}
}
.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 .";
.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;
.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;
}
}
}
&.single .media-wrapper {
grid-column: span 2;
}
&.odd .media-wrapper:first-child, &.double .media-wrapper {
grid-row: span 2;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.info {
display: flex;
background: $toot-info-bg;
color: $fg-reduced;
border-top: 0.15rem solid $toot-info-border;
padding: 0.5rem 0.75rem;
div, time {
padding-right: 1rem;
}
.stats {
display: flex;
}
grid-column: span 3;
flex-wrap: wrap;
}
.toot-link {
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
position: absolute;
z-index: 0;
}
&:first-child {
/* top left, top right */
border-top-left-radius: $br;
border-top-right-radius: $br;
}
&:last-child, &:last-child .info {
/* bottom left, bottom right */
border-bottom-left-radius: $br;
border-bottom-right-radius: $br;
margin-bottom: 0;
}
&.expanded {
background: $toot-focus-bg;
padding-bottom: 0;
.info {
background: $toot-focus-info-bg;
}
}
}
.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%;
}
}