gotosocial/web/source/css/status.css
tobi fc02d3c6f7
[feature] Set/show instance language(s); show post language on frontend (#2362)
* update go text, include text/display

* [feature] Set instance langs, show post lang on frontend

* go fmt

* WebGet

* set language for whole article, don't use FA icon

* mention instance languages + other optional config vars

* little tweak

* put languages in config properly

* warn log language parse

* change some naming around

* tidy up validate a bit

* lint

* rename LanguageTmpl in template
2023-11-17 11:35:28 +01:00

493 lines
8.1 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;
line-height: 1.6rem;
h1 {
margin: 0;
font-size: 1.8rem;
line-height: initial;
}
h2 {
margin: 0;
font-size: 1.6rem;
line-height: initial;
}
h3 {
margin: 0;
font-size: 1.4rem;
line-height: initial;
}
h4 {
margin: 0;
font-size: 1.2rem;
line-height: initial;
}
h5 {
margin: 0;
font-size: 1rem;
line-height: initial;
}
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;
}
.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;
}
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;
time {
padding-right: 1rem;
}
.stats {
display: inline-flex;
flex: 1;
gap: 1rem;
.stats-item {
span {
white-space: nowrap;
}
}
.language {
margin-left: auto;
z-index: 1;
cursor: pointer;
user-select: none;
}
}
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%;
}
}