diff options
Diffstat (limited to 'web/source/css/status.css')
| -rw-r--r-- | web/source/css/status.css | 245 |
1 files changed, 245 insertions, 0 deletions
diff --git a/web/source/css/status.css b/web/source/css/status.css new file mode 100644 index 000000000..bfedb2c4e --- /dev/null +++ b/web/source/css/status.css @@ -0,0 +1,245 @@ +/* + GoToSocial + Copyright (C) 2021-2022 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/>. +*/ + +main { + background: transparent; + grid-auto-rows: auto; +} + +.thread { + display: flex; + flex-direction: column; +} + +.toot { + position: relative; + background: $bg_darker3; + padding: 2rem; + /* padding-bottom: 0; */ + display: grid; + grid-template-columns: 3.2rem auto 1fr; + column-gap: 0.5rem; + margin-bottom: 0.2rem; + + a { + position: relative; + z-index: 1; + color: inherit; + text-decoration: none; + } + + .avatar { + grid-row: span 2; + + img { + height: 3.2rem; + width: 3.2rem; + object-fit: cover; + } + } + + .displayname { + font-weight: bold; + font-size: 1.2rem; + align-self: start; + } + + .username { + color: $fg_dark; + justify-self: start; + } + + input.spoiler:checked ~ .content { + display: none; + } + + .spoiler { + label { + background: $acc1; + border-radius: 0.3rem; + padding: 0.3rem; + margin-left: 0.4rem; + position: relative; + z-index: 2; + cursor: pointer; + } + } + + .text { + margin: 0; + grid-column: span 2; + + a { + color: $acc1; + text-decoration: underline; + } + } + + .media { + margin-top: 0.6rem; + border-radius: 0.2rem; + grid-column: span 3; + display: grid; + grid-template-columns: 50% 50%; + grid-auto-rows: 10rem; + overflow: hidden; + gap: 0.3rem; + + a { + position: relative; + } + + .no-image-desc { + display: flex; + position: absolute; + bottom: 0.1rem; + right: 0.4rem; + color: white; + background: $blue; + padding: 0.2rem 0.4rem; + border-radius: 100%; + z-index: 3; + + i.fa { + display: block; + line-height: 1.3rem; + } + + span { + margin-left: 0.3rem; + display: none; + } + + &:hover { + span { + display: block; + } + border-radius: 0.2rem; + } + } + + img { + width: 100%; + height: 100%; + object-fit: cover; + } + + &.single a { + grid-column: span 2; + } + + &.odd a:first-child, &.double a { + grid-row: span 2; + } + } + + .info { + display: none; + + div { + position: relative; + padding-right: 1.3rem; + } + + .stats { + display: flex; + } + + color: #b0b0b5; + grid-column: span 3; + margin-top: 0.5rem; + flex-wrap: wrap; + + div.stats::after { + display: none; + } + + div::after { + $size: 0.25rem; + display: block; + background: $fg_dark; + height: $size; + width: $size; + content: ""; + position: absolute; + top: calc((1.5rem - $size) / 2); + right: 0.55rem; + border-radius: 1rem; + } + + div:last-child { + &::after { + display: none; + } + margin-right: 0; + } + } + + .toot-link { + top: 0; + right: 0; + bottom: 0; + left: 0; + overflow: hidden; + text-indent: 100%; + white-space: nowrap; + + position: absolute; + z-index: 0; + } + + $border-radius: 0.3rem; + &:first-child { + /* top left, top right */ + border-radius: $border-radius $border-radius 0 0; + } + + &:last-child { + /* bottom left, bottom right */ + border-radius: 0 0 $border-radius $border-radius; + padding-bottom: 1.5rem; + } + + &.expanded { + background: $bg; + padding-bottom: 1.5rem; + + .displayname { + grid-column: span 2; + } + + .text { + grid-column: span 3; + grid-row: span 1; + margin-top: 0.3rem; + } + + .info { + display: flex; + } + + .media { + grid-auto-rows: 1fr; + max-height: 120rem; + } + } +} + +footer + div { /* something weird from the devstack.. */ + display: none; +}
\ No newline at end of file |