From b44debed8cd6b4fca1ba138c03c25b675d32a081 Mon Sep 17 00:00:00 2001 From: Ashelyn Rose Date: Fri, 16 Jun 2023 23:59:13 -0600 Subject: [PATCH] Wrapper for GTS that adds custom CSS overrides, and a nixos service --- .gitignore | 1 + css/_colors.css | 136 +++++++ css/base.css | 873 ++++++++++++++++++++++++++++++++++++++++++++ css/profile.css | 296 +++++++++++++++ css/status.css | 943 ++++++++++++++++++++++++++++++++++++++++++++++++ flake.lock | 77 ++++ flake.nix | 128 +++++++ 7 files changed, 2454 insertions(+) create mode 100644 .gitignore create mode 100644 css/_colors.css create mode 100644 css/base.css create mode 100644 css/profile.css create mode 100644 css/status.css create mode 100644 flake.lock create mode 100644 flake.nix diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..b2be92b --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +result diff --git a/css/_colors.css b/css/_colors.css new file mode 100644 index 0000000..e121910 --- /dev/null +++ b/css/_colors.css @@ -0,0 +1,136 @@ + +:root { + --white1: #fafaff; + --white2: #b3b5c6; + --gray1: #2a2b2f; + --gray2: #35363b; + --gray3: #3a3b41; + --gray4: #45464e; + --gray5: #4d4e56; + --gray6: #575861; + --gray7: #5d5e67; + --gray8: #696a75; + --orange1: #fd6a00; + --orange2: #ff853e; + --blue1: #3a9fde; + --blue2: #66befe; + --blue3: #89caff; + --error1: #860000; + --error2: #ff9796; + --error3: #dd2c2c; + --error-link: #01318C; + --green1: #94E749; + --info-fg: var(--gray1); + --info-bg: #b3ddff; + --info-link: var(--error-link); + --fg: var(--white1); + --bg: var(--gray1); + --bg-trans: rgba(77, 78, 86, 0.62); + --bg-accent: var(--gray5); + --fg-accent: var(--blue3); + --fg-reduced: var(--white2); + --border-accent: var(--orange2); + --link-fg: var(--fg-accent); + --role-moderator: var(--orange1); + --role-admin: var(--blue2); + --button-bg: var(--blue2); + --button-fg: var(--gray1); + --button-hover-bg: var(--blue3); + --button-danger-bg: var(--error3); + --button-danger-fg: var(--white1); + --button-danger-hover-bg: var(--error2); + --toot-focus-bg: var(--gray5); + --toot-unfocus-bg: var(--gray2); + --toot-info-bg: var(--gray4); + --no-img-desc-bg: var(--orange1); + --no-img-desc-fg: var(--gray1); + --bg-sensitive: var(--gray1); + --boxshadow: 0 0.4rem 1rem -0.1rem rgba(0,0,0,0.15); + --boxshadow-border: 0.08rem solid var(--gray1); + --avatar-border: var(--orange2); + --input-bg: var(--gray4); + --input-disabled-bg: var(--gray2); + --input-border: var(--blue1); + --input-error-border: var(--error3); + --input-focus-border: var(--blue3); + --settings-nav-bg: var(--bg-accent); + --settings-nav-header-fg: var(--gray1); + --settings-nav-header-bg: var(--orange1); + --settings-nav-bg-hover: var(--gray3); + --settings-nav-bg-active: var(--gray2); + --error-fg: var(--error1); + --error-bg: var(--error2); + --list-entry-bg: var(--gray2); + --list-entry-alternate-bg: var(--gray3); + --list-entry-hover-bg: var(--gray4) +} + +/* ashe mods */ +:root { + --avatar-border: #dfb9ff; + --bg: #33293a; + --fg-accent: #b143a0; + --bg-accent: #2a0933; + --toot-focus-bg: #3a273c; + --toot-unfocus-bg: #533f53; + --toot-info-bg: #482148; +} + +/* + 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 . +*/ + +/* + This stylesheets defines (color) variables to be used by other stylesheets on the page + postcss-custom-prop-vars will transpile these to css --variables +*/ + +/* Color definitions */ + +/* Foreground */ + +/* default text color, contrast >= 5.0 with all $grays */ + +/* less important text, can be used with $gray1 (6.8), $gray2 (5.5), $gray3 (4.9), $gray4 (4.5) */ + +/* Background shades, contrast >= 5.0 with $white1 (#fafaff) */ + +/* Used for non-text accent colors, can be used as background: $gray1 for text color (contrast 4.6)*/ + +/* hover/selected accent to $orange1, can be used with $gray1 (5.7), $gray2 (4.6) */ + +/* darker blue for smaller elements (borders), can only be used with $gray1 (4.7) */ + +/* all-round accent color, can be used with $gray1 (6.8), $gray2 (5.5), $gray3 (4.9), $gray4 (4.5) */ + +/* hover/selected accent to $blue2, can be used with $gray1 (7.9), $gray2 (6.3), $gray3 (5.6), $gray4 (5.2), $gray5 (4.7) */ + +/* Error border/foreground text, can be used with $error2 (5.0), $white1 (10), $white2 (5.1) */ + +/* Error background text, can be used with $error1 (5.0), $gray1 (6.6), $gray2 (5.3), $gray3 (4.8) */ + +/* Error button background text, can be used with $white1 (4.51) */ + +/* Error link text, can be used with $error2 (5.56) */ + +/* Green for positive/confirmation, similar contrast (luminance) as $blue2 */ + +/* Color variables as used in a specific location */ + +/* $settings-nav-fg-hover: $gray1; */ + +/* $settings-nav-fg-active: $orange2; */ diff --git a/css/base.css b/css/base.css new file mode 100644 index 0000000..43e97f1 --- /dev/null +++ b/css/base.css @@ -0,0 +1,873 @@ + +:root { + --br: 0; + --br-inner: 0; +} + +/* + 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 . +*/ + +/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */ + +/* +Document +======== +*/ + +/** +Use a better box model (opinionated). +*/ + +*, +::before, +::after { + box-sizing: border-box; +} + +/** +Use a more readable tab size (opinionated). +*/ + +html { + -o-tab-size: 4; + tab-size: 4; +} + +/** +1. Correct the line height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +*/ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* +Sections +======== +*/ + +/** +Remove the margin in all browsers. +*/ + +body { + margin: 0; +} + +/** +Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) +*/ + +body { + font-family: + system-ui, + -apple-system, /* Firefox supports this but not yet `system-ui` */ + 'Segoe UI', + Roboto, + Helvetica, + Arial, + sans-serif, + 'Apple Color Emoji', + 'Segoe UI Emoji'; +} + +/* +Grouping content +================ +*/ + +/** +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +*/ + +hr { + height: 0; /* 1 */ + color: inherit; /* 2 */ +} + +/* +Text-level semantics +==================== +*/ + +/** +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr[title] { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/** +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/** +1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) +2. Correct the odd 'em' font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: + ui-monospace, + SFMono-Regular, + Consolas, + 'Liberation Mono', + Menlo, + monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/** +Prevent 'sub' and 'sup' elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +Tabular data +============ +*/ + +/** +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +*/ + +table { + text-indent: 0; /* 1 */ + border-color: inherit; /* 2 */ +} + +/* +Forms +===== +*/ + +/** +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** +Remove the inheritance of text transform in Edge and Firefox. +1. Remove the inheritance of text transform in Firefox. +*/ + +button, +select { /* 1 */ + text-transform: none; +} + +/** +Correct the inability to style clickable types in iOS and Safari. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; +} + +/** +Remove the inner border and padding in Firefox. +*/ + +::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** +Restore the focus styles unset by the previous rule. +*/ + +:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** +Remove the additional ':invalid' styles in Firefox. +See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737 +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/** +Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers. +*/ + +legend { + padding: 0; +} + +/** +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/** +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/** +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to 'inherit' in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* +Interactive +=========== +*/ + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* noto-sans-regular - latin */ + +@font-face { + font-family: "Noto Sans"; + font-weight: 400; + font-display: swap; + font-style: normal; + src: url('../fonts/noto-sans-v27-latin-regular.woff2') format('woff2'), + url('../fonts/noto-sans-v27-latin-regular.woff') format('woff'); +} + +/* noto-sans-700 - latin */ + +@font-face { + font-family: "Noto Sans"; + font-weight: 700; + font-display: swap; + font-style: normal; + src: url('../fonts/noto-sans-v27-latin-700.woff2') format('woff2'), + url('../fonts/noto-sans-v27-latin-700.woff') format('woff'); +} + +/* standard border radius for nice squircles */ + +/* border radius for items that are framed/bordered + inside something with $br, eg avatar, header img */ + +html, body { + padding: 0; + margin: 0; + background: var(--bg); + color: var(--fg); + font-family: "Noto Sans", sans-serif; + scrollbar-color: var(--gray3); +} + +body { + line-height: 1.5em; + position: relative; +} + +.hidden { + display: none; +} + +.page { + display: grid; + min-height: 100vh; + + grid-template-columns: auto minmax(auto, 50rem) auto; + grid-template-columns: auto min(92%, 50rem) auto; + grid-template-rows: auto 1fr auto; +} + +h1 { + margin: 0; + line-height: 2.4rem; +} + +a { + color: var(--link-fg); +} + +header, footer { + grid-column: 1 / span 3; +} + +.content { + margin: 32px 0; + grid-column: 2; + align-self: start; +} + +header { + display: none; + justify-content: center; +} + +header a { + margin: 2rem; + display: flex; + flex-direction: column; + flex-wrap: wrap; +} + +header a img { + margin-bottom: 1rem; + align-self: center; + height: 6rem; + } + +header a div { + flex-grow: 1; + align-self: center; + display: flex; + } + +header a div h1 { + word-wrap: anywhere; + align-self: center; + color: var(--fg); + } + +.excerpt-top { + margin-top: -1rem; + margin-bottom: 2rem; + font-style: italic; + font-weight: normal; + text-align: center; + font-size: 1.2rem; +} + +.excerpt-top .count { + font-weight: bold; + color: var(--fg-accent); + } + +main section { + background: var(--bg-accent); + box-shadow: var(--boxshadow); + border: var(--boxshadow-border); + border-radius: var(--br); + padding: 2rem; + margin-bottom: 2rem; + } + +main p:first-child { + margin-top: 0; + } + +main p:last-child { + margin-bottom: 0; + } + +.button, button { + border-radius: 0.2rem; + color: var(--button-fg); + background: var(--button-bg); + box-shadow: var(--boxshadow); + border: var(--button-border); + text-decoration: none; + font-size: 1.2rem; + font-weight: bold; + padding: 0.5rem; + border: none; + cursor: pointer; + text-align: center; + font-family: 'Noto Sans', sans-serif; +} + +.button.danger, button.danger { + color: var(--button-danger-fg); + background: var(--button-danger-bg); + } + +.button.danger:hover, button.danger:hover { + background: var(--button-danger-hover-bg); + } + +.button:disabled, button:disabled { + color: var(--white2); + background: var(--gray2); + cursor: auto; + } + +.button:disabled:hover, button:disabled:hover { + background: var(--gray3); + } + +.button:hover, button:hover { + background: var(--button-hover-bg); + } + +.nounderline { + text-decoration: none; +} + +.accent { + color: var(--acc1); +} + +.logo { + justify-self: center; +} + +.logo img { + height: 30vh; + } + +section.apps { + align-self: start; +} + +section.apps .applist { + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: 0.5rem; + align-content: start; + } + +section.apps .applist .entry { + display: grid; + grid-template-columns: 25% 1fr; + gap: 1.5rem; + padding: 0.5rem; + background: var(--bg-accent); + border-radius: 0.5rem; + } + +section.apps .applist .entry .logo { + align-self: center; + width: 100%; + -o-object-fit: contain; + object-fit: contain; + flex: 1 1 auto; + } + +section.apps .applist .entry .logo.redraw { + fill: var(--fg); + stroke: var(--fg); + } + +section.apps .applist .entry a { + font-weight: bold; + } + +section.apps .applist .entry div { + padding: 0; + } + +section.apps .applist .entry div h3 { + margin-top: 0; + } + +section.login form { + display: flex; + flex-direction: column; + gap: 1rem; + + + padding-bottom: 1rem; + padding-top: 1rem; + } + +section.login form label, section.login form input { + padding-left: 0.2rem; + } + +section.login form .labelinput { + display: flex; + flex-direction: column; + gap: 0.4rem; + } + +section.login form .btn { + margin-top: 1rem; + } + +section.error { + word-break: break-word; + margin-bottom: 0.5rem; +} + +section.error pre { + border: 1px solid #ff000080; + padding: 0.5rem; + border-radius: 0.5em; + background-color: #ff000010; + font-size: 1.3em; + white-space: pre-wrap; + } + +section.oob-token code { + background: var(--gray1); + padding: 0.5rem; + margin: 0; + border-radius: 0.3rem; + } + +.error-text { + color: var(--error1); + background: var(--error2); + border-radius: 0.1rem; + font-weight: bold; +} + +input, select, textarea, .input { + box-sizing: border-box; + border: 0.15rem solid var(--input-border); + border-radius: 0.1rem; + color: var(--fg); + background: var(--input-bg); + width: 100%; + font-family: 'Noto Sans', sans-serif; + font-size: 1rem; + padding: 0.3rem; +} + +input:focus, input:active, select:focus, select:active, textarea:focus, textarea:active, .input:focus, .input:active { + border-color: var(--input-focus-border); + } + +input:invalid, .invalid input, select:invalid, .invalid select, textarea:invalid, .invalid textarea, .input:invalid, .invalid .input { + border-color: var(--input-error-border); + } + +input:disabled, select:disabled, textarea:disabled, .input:disabled { + background: transparent; + } + +::-webkit-input-placeholder { + opacity: 1; + color: var(--fg-reduced) +} + +::placeholder { + opacity: 1; + color: var(--fg-reduced) +} + +hr { + color: transparent; + width: 100%; + border-bottom: 0.02rem solid var(--border-accent); +} + +footer { + align-self: end; + padding: 2rem 0 1rem 0; + + display: none; + flex-wrap: wrap; + justify-content: center; +} + +footer div { + text-align: center; + padding: 1rem; + flex-grow: 1; + } + +footer a { + font-weight: bold; + } + +@media screen and (max-width: 600px) { + header { + text-align: center; + } + + footer { + grid-template-columns: 1fr; + } + + footer div { + text-align: initial; + width: 100%; + } + + section.apps .applist { + grid-template-columns: 1fr; + } +} + +.emoji { + width: 1.45em; + height: 1.45em; + margin: -0.2em 0.02em 0; + -o-object-fit: contain; + object-fit: contain; + vertical-align: middle; +} + +.monospace { + font-family: monospace; +} + +.callout { + margin: 1.5rem 0; + border: .05rem solid var(--border-accent); + border-radius: .2rem; + padding: 0 .6rem .6rem; +} + +.callout .callout-title { + margin: 0 -.6rem; + padding: .6rem; + font-weight: bold; + background-color: var(--border-accent); + color: var(--gray1); + } + +label { + cursor: pointer; +} + +@media (prefers-reduced-motion) { + .fa-spin { + -webkit-animation: none; + animation: none; + } +} + +.text-cutoff { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +} + +.list { + display: flex; + flex-direction: column; +} + +.list .header, .list .entry { + padding: 0.5rem; + } + +.list .header { + border: 0.1rem solid transparent !important; /* for alignment with .entry border padding */ + background: var(--gray1) !important; + display: flex; + font-weight: bold; + } + +.list .entries { + display: flex; + flex-direction: column; + } + +.list .entries.scrolling { + height: 20rem; + max-height: 20rem; + overflow: auto; + } + +.list input[type=checkbox] { + margin-left: 0.5rem; + } + +.list .entry { + display: flex; + flex-wrap: wrap; + background: var(--list-entry-bg); + border: 0.1rem solid transparent; + } + +.list .entry:nth-child(even) { + background: var(--list-entry-alternate-bg); + } + +.list .entry:hover { + background: var(--list-entry-hover-bg); + } + +.list .entry:active, .list .entry:focus, .list .entry:hover, .list .entry:target { + border-color: var(--fg-accent); + } + +.domain-blocklist { + box-shadow: var(--boxshadow); +} + +.domain-blocklist .entry { + display: grid; + grid-template-columns: max(30%, 10rem) 1fr; + gap: 0.5rem; + align-items: start; + border: var(--boxshadow-border); + border-top-color: transparent; + } + +.domain-blocklist .entry > div { + display: flex; + align-items: center + } + +.domain-blocklist .entry .domain a { + font-weight: bold; + text-decoration: none; + display: inline-block; /* so it wraps properly */ + } + +.domain-blocklist .entry .public_comment p { + margin: 0; + } + +.domain-blocklist .header .domain { + color: var(--fg); + } + +.about { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.about h2 { + margin: 0.5rem 0; + } + +.about ul { + margin-bottom: 0; + } + +.about .contact-account-card { + /* display: inline-grid; + grid-template-columns: 4rem auto; + grid-template-rows: 4rem; + gap: 1rem; + padding: 0.5rem; */ + display: inline-grid; + grid-template-columns: auto 1fr; + grid-template-rows: auto auto; + text-decoration: none; + gap: 0.5rem 1rem; + border-radius: var(--br); + padding: 0.5rem; + min-width: 40%; + margin-bottom: 0.3rem; + + background: var(--list-entry-bg); + } + +.about .contact-account-card:hover { + background: var(--list-entry-alternate-bg); + } + +.about .contact-account-card h3 { + align-self: end; + margin: 0; + color: var(--fg); + } + +.about .contact-account-card img.avatar { + border-radius: 0.5rem; + width: 5rem; + height: 5rem; + -o-object-fit: cover; + object-fit: cover; + grid-row: 1 / span 2; + } + +@media screen and (max-width: 30rem) { + .domain-blocklist .entry { + grid-template-columns: 1fr; + gap: 0; + } +} diff --git a/css/profile.css b/css/profile.css new file mode 100644 index 0000000..77bc391 --- /dev/null +++ b/css/profile.css @@ -0,0 +1,296 @@ + +/* + 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 . +*/ + +header a img { + height: 5rem; + } + +main { + background: transparent; + padding-top: 0; +} + +.profile { + background: #2a0933; + display: grid; + grid-template-columns: 100%; + gap: 0.5rem; + margin-bottom: 0.2rem; + overflow-x: hidden; + position: relative; + + border-radius: var(--br); + box-shadow: var(--boxshadow); + border: var(--boxshadow-border); +} + +.profile .headerimage { + width: 100%; + aspect-ratio: 3 / 1; + max-height: 16rem; + overflow: hidden; + box-shadow: var(--boxshadow); + } + +.profile .headerimage img { + width: 100%; + height: 100%; + -o-object-fit: cover; + object-fit: cover; + border-radius: var(--br-inner) var(--br-inner) 0 0; + } + +.profile .basic { + height: 8.5rem; + margin-top: -6.5rem; + + display: grid; + grid-template-columns: 1rem 8.5rem 1fr; + grid-template-rows: 3rem 3rem 2.5rem; + + grid-template-areas: + ". avatar ." + "filler2 avatar displayname" + ". avatar username"; + } + +.profile .basic #profile-basic-filler2 { + grid-area: filler2; + background: var(--bg-trans); + } + +.profile .basic .avatar { + align-self: end; + box-sizing: border-box; + height: 8.5rem; + width: 8.5rem; + grid-area: avatar; + background: var(--bg); + border: 0.2rem solid var(--avatar-border); + padding: 0; + border-radius: var(--br); + position: relative; + + box-shadow: var(--boxshadow); + } + +.profile .basic .avatar img { + -o-object-fit: cover; + object-fit: cover; + border-radius: var(--br-inner); + width: 100%; + height: 100%; + } + +.profile .basic a, .profile .basic div { + color: inherit; + text-decoration: none; + } + +.profile .basic .displayname { + grid-area: displayname; + font-weight: bold; + font-size: 2rem; + line-height: 3rem; + background: var(--bg-trans); + word-break: break-all; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + max-height: 6rem; + padding: 0 0.5rem; + } + +.profile .basic .usernamecontainer { + height: 2.5rem; + display: grid; + grid-template-columns: auto 1fr; + grid-area: username; + /* justify-content: space-between; */ + padding: 0; + gap: 0.5rem; + position: relative; + + color: var(--fg-accent); + font-weight: bold; + } + +.profile .basic .usernamecontainer .username { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + -webkit-user-select: all; + user-select: all; + + line-height: 2.5rem; + padding-left: 0; + margin-left: 0.5rem; + } + +.profile .basic .usernamecontainer .role { + justify-self: start; + align-self: center; + line-height: 1.1rem; + font-size: 0.9rem; + margin-right: 0.2rem; + padding: 0.2rem; + margin-top: 0.1rem; + padding-top: 0.1rem; + border: 0.1rem solid var(--gray1); + border-radius: var(--br); + font-variant: small-caps; + } + +.profile .basic .usernamecontainer .role.admin { + background: var(--gray1); + color: var(--orange2); + border-color: var(--orange2); + display: none; + } + +.profile .basic .usernamecontainer .role.moderator { + background: var(--gray1); + color: var(--blue2); + border-color: var(--blue1); + } + +@media screen and (max-width: 600px) { + .profile { + gap: 0.1rem; + } + + .profile .basic { + margin-top: calc(-22vw + 1rem); + height: initial; + display: flex; + flex-direction: column; + } + + .profile .basic #profile-basic-filler2 { + display: none; + } + + .profile .basic .avatar { + align-self: flex-start; + margin-left: 1rem; + height: 22vw; + width: 22vw; + } + + .profile .basic .displayname { + padding-left: 1rem; + font-size: 1.5rem; + line-height: 2rem; + margin-top: 0.5rem; + align-self: stretch; + } + + .profile .basic .usernamecontainer { + padding-left: 1rem; + } + + .profile .basic .usernamecontainer .username { + margin-left: 0; + } + } + +.profile .detailed { + display: flex; + flex-direction: column; + flex: 1 1 25em; + } + +.profile .detailed h2 { + margin-top: 0; + } + +.profile .detailed .bio { + margin-top: 0; + margin-bottom: 0.5rem; + margin-left: 1rem; + margin-right: 1rem; + word-break: break-word; + } + +.profile .detailed .bio a { + color: var(--acc1); + text-decoration: underline; + } + +.accountstats { + display: flex; + flex-wrap: wrap; + border-radius: 0 0 var(--br) var(--br); + border-top: 0.1rem solid var(--bg); +} + +.accountstats .entry-group { + flex: 1 1 auto; + min-width: 50%; + display: flex; + } + +.accountstats .entry { + white-space: nowrap; + width: 50%; + margin: 1.2rem 0.5rem; + text-align: center; + } + +.nothinghere { + margin-left: 1rem; +} + +.backnextlinks { + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +.backnextlinks a { + padding: 1rem; + } + +.backnextlinks .next { + margin-left: auto; + } + +.toot, .toot:last-child { + box-shadow: var(--boxshadow); +} + +#recent { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + margin: 1rem; +} + +#recent .rss-icon { + font-size: 1.45em; + -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; + } + diff --git a/css/status.css b/css/status.css new file mode 100644 index 0000000..30319ff --- /dev/null +++ b/css/status.css @@ -0,0 +1,943 @@ + +/* + 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 . +*/ + +/*! PhotoSwipe main CSS by Dmytro Semenov | photoswipe.com */ + +.pswp { + --pswp-bg: #000; + --pswp-placeholder-bg: #222; + + + --pswp-root-z-index: 100000; + + --pswp-preloader-color: rgba(79, 79, 79, 0.4); + --pswp-preloader-color-secondary: rgba(255, 255, 255, 0.9); + + /* defined via js: + --pswp-transition-duration: 333ms; */ + + --pswp-icon-color: #fff; + --pswp-icon-color-secondary: #4f4f4f; + --pswp-icon-stroke-color: #4f4f4f; + --pswp-icon-stroke-width: 2px; + + --pswp-error-text-color: var(--pswp-icon-color); +} + +/* + Styles for basic PhotoSwipe (pswp) functionality (sliding area, open/close transitions) +*/ + +.pswp { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: var(--pswp-root-z-index); + display: none; + touch-action: none; + outline: 0; + opacity: 0.003; + contain: layout style size; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +/* Prevents focus outline on the root element, + (it may be focused initially) */ + +.pswp:focus { + outline: 0; +} + +.pswp * { + box-sizing: border-box; +} + +.pswp img { + max-width: none; +} + +.pswp--open { + display: block; +} + +.pswp, +.pswp__bg { + -webkit-transform: translateZ(0); + transform: translateZ(0); + will-change: opacity; +} + +.pswp__bg { + opacity: 0.005; + background: var(--pswp-bg); +} + +.pswp, +.pswp__scroll-wrap { + overflow: hidden; +} + +.pswp__scroll-wrap, +.pswp__bg, +.pswp__container, +.pswp__item, +.pswp__content, +.pswp__img, +.pswp__zoom-wrap { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.pswp__img, +.pswp__zoom-wrap { + width: auto; + height: auto; +} + +.pswp--click-to-zoom.pswp--zoom-allowed .pswp__img { + cursor: zoom-in; +} + +.pswp--click-to-zoom.pswp--zoomed-in .pswp__img { + cursor: move; + cursor: grab; +} + +.pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active { + cursor: grabbing; +} + +/* :active to override grabbing cursor */ + +.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img, +.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active, +.pswp__img { + cursor: zoom-out; +} + +/* Prevent selection and tap highlights */ + +.pswp__container, +.pswp__img, +.pswp__button, +.pswp__counter { + -webkit-user-select: none; + user-select: none; +} + +.pswp__item { + /* z-index for fade transition */ + z-index: 1; + overflow: hidden; +} + +.pswp__hidden { + display: none !important; +} + +/* Allow to click through pswp__content element, but not its children */ + +.pswp__content { + pointer-events: none; +} + +.pswp__content > * { + pointer-events: auto; +} + +/* + + PhotoSwipe UI + +*/ + +/* + Error message appears when image is not loaded + (JS option errorMsg controls markup) +*/ + +.pswp__error-msg-container { + display: grid; +} + +.pswp__error-msg { + margin: auto; + font-size: 1em; + line-height: 1; + color: var(--pswp-error-text-color); +} + +/* +class pswp__hide-on-close is applied to elements that +should hide (for example fade out) when PhotoSwipe is closed +and show (for example fade in) when PhotoSwipe is opened + */ + +.pswp .pswp__hide-on-close { + opacity: 0.005; + will-change: opacity; + transition: opacity var(--pswp-transition-duration) cubic-bezier(0.4, 0, 0.22, 1); + z-index: 10; /* always overlap slide content */ + pointer-events: none; /* hidden elements should not be clickable */ +} + +/* class pswp--ui-visible is added when opening or closing transition starts */ + +.pswp--ui-visible .pswp__hide-on-close { + opacity: 1; + pointer-events: auto; +} + +/*