diff --git a/modules/nixos/default.nix b/modules/nixos/default.nix index 06252cc..55d22a1 100755 --- a/modules/nixos/default.nix +++ b/modules/nixos/default.nix @@ -53,7 +53,7 @@ in caddy comfyui # filesorter - # firefly-iii + firefly-iii forgejo # glance jellyfin diff --git a/modules/nixos/guests/firefly-iii/default.nix b/modules/nixos/guests/firefly-iii/default.nix index a88d89d..6a67859 100755 --- a/modules/nixos/guests/firefly-iii/default.nix +++ b/modules/nixos/guests/firefly-iii/default.nix @@ -1,6 +1,6 @@ { - config, flake, + config, ... }: let @@ -12,8 +12,8 @@ let smtpCfg = instances.smtp; hostCfg = instances.web; host = serviceCfg.domains.url0; - dns0 = instances.web.dns.provider0; - dns0Path = "dns/${dns0}"; + dns = instances.web.dns.provider0; + dnsPath = "dns/${dns}"; in { microvm.vms = { @@ -27,7 +27,6 @@ in services = { firefly-iii = { enable = true; - # dataDir = serviceCfg.varPaths.path0; enableNginx = false; poolConfig = { "listen.owner" = config.services.caddy.user; @@ -40,18 +39,18 @@ in }; settings = { APP_URL = "https://${host}"; - APP_KEY_FILE = "/run/secrets/pass"; - # DB_PASSWORD_FILE = "/run/secrets/data"; - # DB_CONNECTION = "pgsql"; - # DB_HOST = "db"; - # DB_DATABASE = "firefly"; - # DB_USERNAME = "firefly"; + APP_KEY_FILE = "/etc/firefly-secrets/pass"; + DB_PASSWORD_FILE = "/etc/firefly-secrets/data"; + DB_CONNECTION = "pgsql"; + DB_HOST = "/run/postgresql"; + DB_DATABASE = "firefly-iii"; + DB_USERNAME = "firefly-iii"; MAIL_MAILER = smtpCfg.name; MAIL_HOST = smtpCfg.hostname; MAIL_PORT = smtpCfg.ports.port0; MAIL_FROM = smtpCfg.email.address0; MAIL_USERNAME = smtpCfg.email.address0; - MAIL_PASSWORD_FILE = "/run/secrets/smtp"; + MAIL_PASSWORD_FILE = "/etc/firefly-secrets/smtp"; MAIL_ENCRYPTION = "tls"; SITE_OWNER = email.address2; }; @@ -63,7 +62,7 @@ in caddy = { enable = true; - virtualHosts."${serviceCfg.interface.ip}" = { + virtualHosts.":80" = { extraConfig = '' root * ${config.services.firefly-iii.package}/public @@ -76,16 +75,16 @@ in }; }; - # postgresql = { - # enable = true; - # ensureDatabases = [ "firefly" ]; - # ensureUsers = [ - # { - # name = "firefly"; - # ensureDBOwnership = true; - # } - # ]; - # }; + postgresql = { + enable = true; + ensureDatabases = [ "firefly-iii" ]; + ensureUsers = [ + { + name = "firefly-iii"; + ensureDBOwnership = true; + } + ]; + }; openssh = { enable = true; @@ -117,10 +116,12 @@ in RemainAfterExit = true; }; script = '' - chown root:firefly-iii /run/secrets/pass - chown root:firefly-iii /run/secrets/smtp - chmod 0640 /run/secrets/pass - chmod 0640 /run/secrets/smtp + mkdir -p /etc/firefly-secrets + cp /run/secrets/pass /etc/firefly-secrets/pass + cp /run/secrets/data /etc/firefly-secrets/data + cp /run/secrets/smtp /etc/firefly-secrets/smtp + chmod 755 /etc/firefly-secrets + chmod 644 /etc/firefly-secrets/* ''; }; systemd-networkd.wantedBy = [ "multi-user.target" ]; @@ -128,7 +129,7 @@ in network = { enable = true; networks."20-lan" = { - matchConfig.Name = "enp0s5"; + matchConfig.Name = "enp0s6"; addresses = [ { Address = "${serviceCfg.interface.ip}/24"; } ]; @@ -183,15 +184,15 @@ in { mountPoint = "/var/lib/${serviceCfg.name}"; proto = "virtiofs"; - source = "${serviceCfg.mntPaths.path0}"; + source = "${serviceCfg.mntPaths.path0}/data"; tag = "${serviceCfg.name}_data"; } - # { - # mountPoint = "/var/lib/postgresql"; - # proto = "virtiofs"; - # source = "${serviceCfg.mntPaths.path0}/database"; - # tag = "${serviceCfg.name}_database"; - # } + { + mountPoint = "/var/lib/postgresql"; + proto = "virtiofs"; + source = "${serviceCfg.mntPaths.path0}/database"; + tag = "${serviceCfg.name}_database"; + } { mountPoint = "/run/secrets"; proto = "virtiofs"; @@ -207,15 +208,15 @@ in users.users.caddy.extraGroups = [ "acme" ]; security.acme.certs."${host}" = { - dnsProvider = dns0; - environmentFile = config.sops.secrets.${dns0Path}.path; + dnsProvider = dns; + environmentFile = config.sops.secrets.${dnsPath}.path; group = "caddy"; }; systemd.tmpfiles.rules = [ "d ${serviceCfg.mntPaths.path0} 0751 microvm wheel - -" - # "d ${serviceCfg.mntPaths.path0}/data 0751 microvm wheel - -" - # "d ${serviceCfg.mntPaths.path0}/database 0751 microvm wheel - -" + "d ${serviceCfg.mntPaths.path0}/data 0751 microvm wheel - -" + "d ${serviceCfg.mntPaths.path0}/database 0751 microvm wheel - -" ]; sops = { @@ -225,7 +226,8 @@ in name = "${serviceCfg.name}/${secret}"; value = { owner = "root"; - mode = "600"; + group = "root"; + mode = "0644"; }; }) [ @@ -237,7 +239,7 @@ in }; services.caddy.virtualHosts."${host}" = { extraConfig = '' - reverse_proxy ${serviceCfg.interface.ip}:80 + reverse_proxy http://${serviceCfg.interface.ip}:80 tls ${serviceCfg.ssl.cert} ${serviceCfg.ssl.key} diff --git a/modules/nixos/guests/mastodon/config/twitter.txt b/modules/nixos/guests/mastodon/config/twitter.txt index 44765cf..f6db686 100755 --- a/modules/nixos/guests/mastodon/config/twitter.txt +++ b/modules/nixos/guests/mastodon/config/twitter.txt @@ -1,5 +1,5 @@ /* Mastodon Bird UI by @rolle@mementomori.social - 2.0.0rc47 */ + 4.0.0rc1 */ /* CSS variables */ :root { @@ -24,6 +24,7 @@ and replace it inside the SVG icons if you decide to change it */ --color-bg: var(--color-brand-mastodon-bg); --color-bg-75: #1e2028bf; + --color-bg-90: #1e2028e6; --color-fg: #fff; --color-border: #38384d; --color-dim: var(--color-brand-mastodon-dim); @@ -42,7 +43,7 @@ --color-black-coral: #5a5371; --color-profile-button-hover: #f1eff41a; --color-column-link-hover: #f7f7f91a; - --color-modal-overlay: #5b708366; + --color-modal-overlay: rgb(43 43 51); --color-dark: var(--color-brand-mastodon-dark); --color-thread-line: var(--color-brand-mastodon-threaded-line); --color-topaz: #dadaf3; @@ -57,8 +58,8 @@ --color-hashtag: var(--color-accent); --color-mention: var(--color-accent); --color-link: var(--color-accent); - --color-bg-compose-form: rgb(39 44 64 / .4); - --color-bg-compose-form-focus: rgb(39 44 64 / .8); + --color-bg-compose-form: rgb(39 44 64 / 40%); + --color-bg-compose-form-focus: rgb(39 44 64 / 80%); /* In the original UI this color is lighten($ui-base-color, 12%) */ --color-outer-space: #42485a; @@ -79,7 +80,7 @@ /* Grids and gaps */ --gap-default: 12px; - --gap-column-link: 12px; + --gap-column-link: 10px; /* Element sizes */ --size-avatar: 48px; @@ -92,9 +93,21 @@ --badges-distance-from-edge: 12px; /* Misc */ - --active-header-box-shadow: 0 1px 0 rgba(140, 141, 255, .3); - --active-header-radial-gradient: radial-gradient(ellipse, rgba(99, 100, 255, .23) 0, rgba(99, 100, 255, 0) 60%); - --compose-form-linear-gradient: linear-gradient(180deg, rgba(30, 32, 40, 1) 0%, rgba(30, 32, 40, 1) 53%, rgba(30, 32, 40, 0.8141631652661064) 76%, rgba(30, 32, 40, 0.7077205882352942) 87%, rgba(30, 32, 40, 0.458420868347339) 97%, rgba(30, 32, 40, 0) 100%); + --active-header-box-shadow: 0 1px 0 rgba(140, 141, 255, 30%); + --active-header-radial-gradient: radial-gradient( + ellipse, + rgba(99, 100, 255, 23%) 0, + rgba(99, 100, 255, 0%) 60% + ); + --compose-form-linear-gradient: linear-gradient( + 180deg, + rgba(30, 32, 40, 100%) 0%, + rgba(30, 32, 40, 100%) 53%, + rgba(30, 32, 40, 81.4%) 76%, + rgba(30, 32, 40, 70.8%) 87%, + rgba(30, 32, 40, 45.8%) 97%, + rgba(30, 32, 40, 0%) 100% + ); /* Logo */ --logo: url('data:image/svg+xml, %3Csvg class="mastodon-logo" xmlns="http://www.w3.org/2000/svg" width="28px" height="28px" viewBox="0 0 216.4144 232.00976"%3E%3Cdefs xmlns="http://www.w3.org/2000/svg"%3E%3ClinearGradient xmlns="http://www.w3.org/2000/svg" id="gradient" x2="0%25" y2="100%25" gradientUnits="userSpaceOnUse"%3E%3Cstop offset="0%25" stop-color="%23595aff"%3E%3C/stop%3E%3Cstop offset="100%25" stop-color="%23595aff"%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath xmlns="http://www.w3.org/2000/svg" d="M211.80734 139.0875c-3.18125 16.36625-28.4925 34.2775-57.5625 37.74875-15.15875 1.80875-30.08375 3.47125-45.99875 2.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125 0 2.53375.15625 4.94625.46875 7.2025 3.38375 25.68625 25.47 27.225 46.39125 27.9425 21.11625.7225 39.91875-5.20625 39.91875-5.20625l.8675 19.09s-14.77 7.93125-41.08125 9.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234 213.82 1.40609 165.31125.20859 116.09125c-.365-14.61375-.14-28.39375-.14-39.91875 0-50.33 32.97625-65.0825 32.97625-65.0825C49.67234 3.45375 78.20359.2425 107.86484 0h.72875c29.66125.2425 58.21125 3.45375 74.8375 11.09 0 0 32.975 14.7525 32.975 65.0825 0 0 .41375 37.13375-4.59875 62.915" fill="url(%23gradient)"%3E%3C/path%3E%3Cpath d="M177.50984 80.077v60.94125h-24.14375v-59.15c0-12.46875-5.24625-18.7975-15.74-18.7975-11.6025 0-17.4175 7.5075-17.4175 22.3525v32.37625H96.20734V85.42325c0-14.845-5.81625-22.3525-17.41875-22.3525-10.49375 0-15.74 6.32875-15.74 18.7975v59.15H38.90484V80.077c0-12.455 3.17125-22.3525 9.54125-29.675 6.56875-7.3225 15.17125-11.07625 25.85-11.07625 12.355 0 21.71125 4.74875 27.8975 14.2475l6.01375 10.08125 6.015-10.08125c6.185-9.49875 15.54125-14.2475 27.8975-14.2475 10.6775 0 19.28 3.75375 25.85 11.07625 6.36875 7.3225 9.54 17.22 9.54 29.675" fill="%23fff"%3E%3C/path%3E%3C/svg%3E'); @@ -262,7 +275,7 @@ body.theme-mastodon-light.layout-single-column { --color-red: #e0245e; --color-red-75: #e0245ebf; --color-light-shade: #00000005; - --color-focusable-toot: rgba(0, 0, 0, 0.035); + --color-focusable-toot: rgba(0, 0, 0, 3.5%); --color-light-text: #1f1b23; --color-mud: #e5e1ed; --color-black-coral: #9188a6; @@ -278,13 +291,21 @@ body.theme-mastodon-light.layout-single-column { --color-bg-90: #ffffffe6; --color-accent: var(--color-accent-dark); --color-ghost-button-text: var(--color-accent-dark); - --color-bg-compose-form: rgb(147 136 166 / .2); - --color-bg-compose-form-focus: rgb(147 136 166 / .3); + --color-bg-compose-form: rgb(147 136 166 / 20%); + --color-bg-compose-form-focus: rgb(147 136 166 / 30%); --color-hashtag: var(--color-accent-dark); --color-mention: var(--color-accent-dark); /* Misc */ - --compose-form-linear-gradient: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 53%, rgba(255, 255, 255, 0.8141631652661064) 76%, rgba(255, 255, 255, 0.7077205882352942) 87%, rgba(255, 255, 255, 0.458420868347339) 97%, rgba(255, 255, 255, 0) 100%); + --compose-form-linear-gradient: linear-gradient( + 180deg, + rgba(255, 255, 255, 100%) 0%, + rgba(255, 255, 255, 100%) 53%, + rgba(255, 255, 255, 81.4%) 76%, + rgba(255, 255, 255, 70.8%) 87%, + rgba(255, 255, 255, 45.8%) 97%, + rgba(255, 255, 255, 0%) 100% + ); /* Icons for light theme */ --icon-boost: url("data:image/svg+xml, %3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 136 136'%3E%3Cpath fill='%239388a6' d='M51 23.8c0 .4 2.4 3.1 5.3 6l5.3 5.2h34.6l3.4 3.4 3.4 3.4v47.4l-6.7-6.1-6.8-6.1-4 4-4 4 13.8 13.7 13.7 13.8L122.5 99c7.4-7.4 13.5-13.7 13.5-14-.1-.3-1.7-2.3-3.6-4.4l-3.5-4-6.8 6.8-6.9 6.9-.4-25.4c-.3-23.8-.4-25.7-2.5-29.4-2.7-5.1-5.7-7.9-11.3-10.4-4.1-1.9-6.5-2.1-27.2-2.1-12.6 0-22.8.4-22.8.8zM13 37.5-.4 51l3.8 3.9 3.9 4 6.6-6.1 6.6-6 .5 24.4c.5 26.3.7 27.2 6.6 33.2 6 5.9 6.8 6.1 33.2 6.4 13.3.2 24.2-.1 24.2-.5 0-.5-2.2-3-4.8-5.6l-4.8-4.7-15.9-.1c-17.7 0-21.7-.9-24.9-5.2-2-2.7-2.1-4.2-2.3-26.5l-.2-23.6 6.7 6.7C42.5 55 46 58 46.6 58c.5 0 2.5-1.6 4.4-3.5l3.4-3.5L41 37.5C33.6 30.1 27.3 24 27 24c-.3 0-6.6 6.1-14 13.5z'/%3E%3C/svg%3E%0A"); @@ -372,7 +393,7 @@ body.theme-mastodon-light.layout-single-column { } /* Vars on iPad, landscape */ -@media (min-width: 1175px) and (max-width: 1260px) { +@media (width >= 1175px) and (width <= 1260px) { :root { --width-main-panel: 500px; --width-side-panel: 265px; @@ -381,7 +402,7 @@ body.theme-mastodon-light.layout-single-column { } /* Vars in mobile */ -@media (max-width: 500px) { +@media (width <= 500px) { :root { --font-size: 16px; --line-height: 1.4; @@ -401,11 +422,9 @@ body.theme-mastodon-light.layout-single-column { left: calc(30px / 2); /* It's inlined so we have to use !important */ - /* stylelint-disable-next-line */ max-width: calc(100% - 30px) !important; /* It's inlined so we have to use !important */ - /* stylelint-disable-next-line */ width: calc(100% - 30px) !important; } @@ -436,7 +455,6 @@ body.layout-single-column { color: var(--color-mention); } -/* stylelint-disable-next-line */ .layout-single-column .status-link.mention:not(.hashtag):not(.mention) { color: var(--color-link); } @@ -483,10 +501,19 @@ body.layout-single-column { /* Things that should have the mid font-size */ .layout-single-column .account__header__extra__links, -.layout-single-column .columns-area__panels__pane--compositional .account__header__account-note textarea, +.layout-single-column + .columns-area__panels__pane--compositional + .account__header__account-note + textarea, .layout-single-column .account__header__content, -.layout-single-column .columns-area__panels__pane--compositional .compose-form .autosuggest-textarea__textarea, -.layout-single-column .columns-area__panels__pane--compositional .compose-form .spoiler-input__input { +.layout-single-column + .columns-area__panels__pane--compositional + .compose-form + .autosuggest-textarea__textarea, +.layout-single-column + .columns-area__panels__pane--compositional + .compose-form + .spoiler-input__input { font-size: var(--font-size-mid); line-height: var(--line-height-mid); } @@ -509,17 +536,13 @@ body.layout-single-column { /* Modal overlay */ .layout-single-column .modal-root__overlay { /* It's inlined so we have to use !important */ - /* stylelint-disable-next-line */ background-color: var(--color-modal-overlay) !important; - /* stylelint-disable-next-line */ color: var(--color-light-text) !important; } .layout-single-column .modal-root__modal .display-name strong, .layout-single-column .modal-root__modal .status__content { - /* It's inlined so we have to use !important */ - /* stylelint-disable-next-line */ color: var(--color-light-text) !important; } @@ -531,14 +554,15 @@ body.layout-single-column { /* Picture in picture fixes */ .layout-single-column .picture-in-picture .audio-player, .layout-single-column .picture-in-picture .video-player { - /* stylelint-disable-next-line */ border-radius: 0 !important; - /* stylelint-disable-next-line */ margin-left: 0 !important; } /* Report modal */ -.layout-single-column .report-dialog-modal .poll__option.dialog-option > .poll__option__text { +.layout-single-column + .report-dialog-modal + .poll__option.dialog-option + > .poll__option__text { display: grid; gap: 6px; } @@ -563,8 +587,8 @@ body.layout-single-column { .layout-single-column .list-adder .column-inline-form button, .layout-single-column .list-editor .column-inline-form button::before { min-height: 38px; + /* It's inlined so we have to use !important */ - /* stylelint-disable-next-line */ width: 100% !important; } @@ -584,11 +608,11 @@ body.layout-single-column { } .layout-single-column .list-editor .drawer__inner.backdrop { - box-shadow: 2px 4px 15px rgba(0, 0, 0, .2); + box-shadow: 2px 4px 15px rgba(0, 0, 0, 20%); } -/* Search icon fix for 4.4.0-alpha.1+mementomods-2024-12-15 changes */ -.layout-single-column .search__icon { +/* Search icon fix for v4.4.0-rc.1-2025-07-01 changes */ +.layout-single-column .search__icon-wrapper { right: 0; top: 0; } @@ -623,7 +647,6 @@ body.layout-single-column { } /* URL preview card box */ -/* stylelint-disable-next-line */ .layout-single-column .status-card .status-card__content { padding: var(--gap-default); } @@ -638,7 +661,11 @@ body.layout-single-column { background-color: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--border-radius); - transition: all 200ms; + transition: + background-color 200ms, + border-color 200ms, + opacity 200ms, + transform 200ms; } .layout-single-column .status-card.status-card.bottomless { @@ -680,6 +707,74 @@ body.layout-single-column { color: var(--color-dim); } +/* New Quote Posts feature after v4.5.0.alpha.2-2025-08-24 */ +.status__quote { + --status-gutter-width: calc(var(--size-avatar) + var(--gap-default)); +} + +.detailed-status.status--has-quote .status__quote { + --status-gutter-width: 0; +} + +.layout-single-column .status.status--is-quote { + --size-avatar: 32px; +} + +.status__quote.status__quote--error { + --surface-border-color: var(--color-border); + background-color: var(--surface-border-color); + border-color: var(--surface-border-color); + color: var(--color-light-text); + justify-content: center; + min-height: 45px; + text-align: center; +} + +.status__quote.status__quote--error > span { + color: var(--color-light-text); +} + +.status__quote:not(.status__quote--error) .status { + min-height: 40px; +} + +/* Disabled quote post selection */ +.layout-single-column .dropdown-menu__item [aria-disabled="true"], +.layout-single-column .dropdown-menu__item :disabled, +.layout-single-column .dropdown-menu__item button:disabled { + color: var(--color-dim); +} + +div[data-popper-placement] .reblog-button__item button:disabled { + align-items: flex-start; +} + +.notification-grouped + .status--has-quote + .status__quote + .status.status--is-quote + .status__content, +.notification-grouped--direct + .status--has-quote + .status__quote + .status.status--is-quote + .status__content, +.notification-ungrouped + .status--has-quote + .status__quote + .status.status--is-quote + .status__content { + margin-left: calc(var(--size-avatar) + var(--gap-default)); + padding-left: 0; +} + +@media (width <= 600px) { + .layout-single-column .status.status--is-quote { + --font-size: 14px; + --font-size-smaller: 12px; + } +} + /* Show minimal status card if there's no image */ .layout-single-column .status-card .status-card__image:not(:has(img)) { display: none; @@ -697,7 +792,7 @@ body.layout-single-column { .layout-single-column .status-card:focus, .layout-single-column .status-card:hover { - background-color: rgba(255 255 255 / .03); + background-color: rgba(255 255 255 / 3%); } .layout-single-column .status-card__image-image, @@ -786,6 +881,7 @@ body.layout-single-column { .layout-single-column .confirmation-modal, .layout-single-column .mute-modal, .layout-single-column .report-modal, +.layout-single-column .announcements__root, .layout-single-column .column-header__collapsible-inner { background-color: var(--color-dark); border-color: var(--color-dark); @@ -819,7 +915,7 @@ body.layout-single-column { .layout-single-column .search-popout, .layout-single-column .search__popout, .layout-single-column .dropdown-menu { - box-shadow: 2px 4px 16px rgb(0 0 0 / .01); + box-shadow: 2px 4px 16px rgb(0 0 0 / 1%); } /* Autosuggest box shadow reset */ @@ -842,7 +938,9 @@ body.layout-single-column { } /* Content warning placeholder */ -.layout-single-column .compose-form .autosuggest-textarea__textarea::placeholder, +.layout-single-column + .compose-form + .autosuggest-textarea__textarea::placeholder, .layout-single-column .compose-form .spoiler-input__input::placeholder { color: var(--color-dim); } @@ -890,20 +988,11 @@ body.layout-single-column { order: 2; } -.layout-single-column .columns-area__panels__pane.columns-area__panels__pane--start.columns-area__panels__pane--navigational { +.layout-single-column + .columns-area__panels__pane.columns-area__panels__pane--start.columns-area__panels__pane--navigational { order: 1; } -.layout-single-column .columns-area__panels__pane, -.layout-single-column .columns-area__panels__pane__inner { - min-width: var(--width-side-panel); - width: var(--width-side-panel); -} - -.layout-single-column .compose-panel { - width: var(--width-compose-panel); -} - .layout-single-column .columns-area__panels__pane--compositional { flex-grow: 1; height: 100vh; @@ -913,17 +1002,6 @@ body.layout-single-column { top: 0; } -.layout-single-column .columns-area__panels__pane--compositional .columns-area__panels__pane__inner { - position: static; -} - -.layout-single-column .columns-area__panels__pane--compositional .columns-area__panels__pane__inner, -.compose-panel { - /* stylelint-disable-next-line */ - width: 100% !important; -} - -/* stylelint-disable-next-line */ @media (min-width: 1175px) { .layout-single-column .columns-area__panels__main { max-width: calc(var(--width-main-panel) + calc(var(--gap-default) * 4)); @@ -933,7 +1011,6 @@ body.layout-single-column { .layout-single-column .navigation-panel { margin-right: -20px; - /* stylelint-disable-next-line */ padding-left: 0 !important; padding-right: 20px; } @@ -1008,7 +1085,6 @@ body.embed .status__content a, /* Accented strokes */ .layout-single-column .trends__item__sparkline path:last-child { /* It's inlined so we have to use !important */ - /* stylelint-disable-next-line */ stroke: var(--color-accent) !important; } @@ -1046,7 +1122,10 @@ body .status__wrapper.status__wrapper--filtered { width: calc(100% - calc(var(--gap-default) * 2)); } -body .columns-area__panels__pane--compositional .compose-form .spoiler-input__input, +body + .columns-area__panels__pane--compositional + .compose-form + .spoiler-input__input, body .content-warning { background-color: var(--color-focusable-toot); border: 1px solid var(--color-border); @@ -1064,7 +1143,10 @@ body .compose-form__highlightable:has(.spoiler-input__input) { border-top-right-radius: var(--border-radius); } -body .compose-form:has(.spoiler-input__input) .spoiler-input .autosuggest-input { +body + .compose-form:has(.spoiler-input__input) + .spoiler-input + .autosuggest-input { border-bottom: 0; border-radius: var(--border-radius); } @@ -1101,7 +1183,9 @@ body .content-warning::before { display: none; } -.layout-single-column .notification:has(.status__wrapper--filtered) .notification__message { +.layout-single-column + .notification:has(.status__wrapper--filtered) + .notification__message { display: none; } @@ -1111,7 +1195,7 @@ body .content-warning::before { } .layout-single-column .status__wrapper.status__wrapper--filtered button { - background-color: rgb(255 255 255 / 0); + background-color: rgb(255 255 255 / 0%); border-bottom-left-radius: 9999px; border-bottom-right-radius: 9999px; border-top-left-radius: 9999px; @@ -1129,7 +1213,7 @@ body .content-warning::before { .layout-single-column .status__wrapper.status__wrapper--filtered button:focus, .layout-single-column .status__wrapper.status__wrapper--filtered button:hover { - background-color: rgb(255 255 255 / .1); + background-color: rgb(255 255 255 / 10%); text-decoration: none; } @@ -1151,7 +1235,6 @@ body .notification-group.notification-group--unread { body .notification-group--unread::before, body .notification-ungrouped--unread::before { - /* stylelint-disable-next-line */ display: none; } @@ -1160,11 +1243,14 @@ body .notification-ungrouped--unread::before { } /* Things like notification status update text that should be dim */ -/* stylelint-disable-next-line selector-not-notation */ -.layout-single-column .notification .status-link.mention:not(.hashtag):not(.mention), +.layout-single-column + .notification + .status-link.mention:not(.hashtag):not(.mention), .layout-single-column .notification .status-link.hashtag, .layout-single-column .notification .status-link.mention:not(.hashtag), -.layout-single-column .compose-form .autosuggest-textarea__textarea::placeholder, +.layout-single-column + .compose-form + .autosuggest-textarea__textarea::placeholder, .layout-single-column .compose-form .icon-button, .layout-single-column .compose-form .spoiler-input__input::placeholder, .layout-single-column .compose-form__poll-wrapper .button.button-secondary, @@ -1181,7 +1267,10 @@ body .notification-ungrouped--unread::before { .layout-single-column .search-popout > h4, .layout-single-column .search__popout > h4, .layout-single-column .status-check-box__status .detailed-status__display-name, -.layout-single-column .report-dialog-modal .poll__option.dialog-option > .poll__option__text, +.layout-single-column + .report-dialog-modal + .poll__option.dialog-option + > .poll__option__text, .layout-single-column .status-card .status-card__description, .layout-single-column .report-dialog-modal .dialog-option .poll__input, .layout-single-column .dropdown-menu__container__header, @@ -1232,7 +1321,9 @@ body .notification-ungrouped--unread::before { .layout-single-column .muted .status__content a, .layout-single-column .muted .status__content p, .layout-single-column .muted .status__display-name strong, -.layout-single-column .privacy-dropdown__option:not(.active) .privacy-dropdown__option__content { +.layout-single-column + .privacy-dropdown__option:not(.active) + .privacy-dropdown__option__content { color: var(--color-dim); } @@ -1261,13 +1352,16 @@ body .notification-ungrouped--unread::before { font-weight: var(--font-weight-semibold); /* Need to override forced styles */ - /* stylelint-disable-next-line */ margin-left: calc(var(--gap-default) / 2) !important; vertical-align: baseline; } -.layout-single-column .reply-indicator__content .status__content__spoiler-link:focus, -.layout-single-column .reply-indicator__content .status__content__spoiler-link:hover, +.layout-single-column + .reply-indicator__content + .status__content__spoiler-link:focus, +.layout-single-column + .reply-indicator__content + .status__content__spoiler-link:hover, .layout-single-column .status__content .status__content__spoiler-link:focus, .layout-single-column .status__content .status__content__spoiler-link:hover { background-color: var(--color-dark); @@ -1275,16 +1369,31 @@ body .notification-ungrouped--unread::before { } /* CW button in notifications */ -.layout-single-column .notification .reply-indicator__content .status__content__spoiler-link, +.layout-single-column + .notification + .reply-indicator__content + .status__content__spoiler-link, .layout-single-column .notification .status__content__spoiler-link { background-color: var(--color-dark); color: var(--color-dim); } -.layout-single-column .notification .reply-indicator__content .status__content__spoiler-link:focus, -.layout-single-column .notification .reply-indicator__content .status__content__spoiler-link:hover, -.layout-single-column .notification .status__content .status__content__spoiler-link:focus, -.layout-single-column .notification .status__content .status__content__spoiler-link:hover { +.layout-single-column + .notification + .reply-indicator__content + .status__content__spoiler-link:focus, +.layout-single-column + .notification + .reply-indicator__content + .status__content__spoiler-link:hover, +.layout-single-column + .notification + .status__content + .status__content__spoiler-link:focus, +.layout-single-column + .notification + .status__content + .status__content__spoiler-link:hover { background-color: var(--color-dark); color: var(--color-dim); } @@ -1305,15 +1414,23 @@ body .notification-ungrouped--unread::before { .layout-single-column .actions-modal ul li:not(:empty) a, .layout-single-column .report-dialog-modal .status__content, .layout-single-column .report-dialog-modal .status__content p, -.layout-single-column .report-dialog-modal .poll__option.dialog-option > .poll__option__text strong, +.layout-single-column + .report-dialog-modal + .poll__option.dialog-option + > .poll__option__text + strong, .layout-single-column .report-dialog-modal__lead, .layout-single-column .detailed-status__display-name strong, .layout-single-column .dismissable-banner__message, .layout-single-column .privacy-dropdown__option, .layout-single-column .privacy-dropdown__option__content strong, .layout-single-column .privacy-dropdown__option.active, -.layout-single-column .privacy-dropdown__option:hover .privacy-dropdown__option__content, -.layout-single-column .privacy-dropdown__option:focus .privacy-dropdown__option__content, +.layout-single-column + .privacy-dropdown__option:hover + .privacy-dropdown__option__content, +.layout-single-column + .privacy-dropdown__option:focus + .privacy-dropdown__option__content, .layout-single-column .status__info .display-name strong.display-name__html, .layout-single-column .reply-indicator .display-name strong.display-name__html, .layout-single-column .notification__message, @@ -1327,7 +1444,9 @@ body .notification-ungrouped--unread::before { .layout-single-column .compose-form .spoiler-input__input:focus, .layout-single-column .compose-panel .compose-form__autosuggest-wrapper:focus, .layout-single-column .compose-form .compose-form__buttons-wrapper:focus, -.layout-single-column .autosuggest-textarea .autosuggest-textarea__textarea:focus, +.layout-single-column + .autosuggest-textarea + .autosuggest-textarea__textarea:focus, .layout-single-column .account__section-headline a.active, .layout-single-column .account__section-headline button.active, .layout-single-column .notification__filter-bar a.active, @@ -1382,20 +1501,6 @@ body .notification-ungrouped--unread::before { gap: calc(var(--gap-default) / 2); } -/* The separator dot */ -.layout-single-column .status__info::before { - color: var(--color-dim); - content: "ยท"; - display: inline-block; - font-size: var(--font-size); - font-weight: var(--font-weight-regular); - height: 20px; - margin-left: -6px; - margin-right: -10px; - order: 2; - position: relative; -} - .layout-single-column .status__info .status__relative-time { height: unset; order: 3; @@ -1427,7 +1532,9 @@ body.embed .activity-stream .entry, .layout-single-column .empty-column-indicator, .layout-single-column .follow_requests-unlocked_explanation, .layout-single-column .column-link, -.layout-single-column .columns-area__panels__pane--navigational .navigation-panel, +.layout-single-column + .columns-area__panels__pane--navigational + .navigation-panel, .layout-single-column .tabs-bar__wrapper .column-back-button, .layout-single-column .account__header, .layout-single-column .column-header__back-button, @@ -1454,22 +1561,21 @@ body.embed .detailed-status, .account__avatar[style="width: 46px; height: 46px;"], .layout-single-column .status__avatar { /* Need to override inline styles */ - /* stylelint-disable-next-line */ height: var(--size-avatar) !important; - /* stylelint-disable-next-line */ max-height: var(--size-avatar) !important; - /* stylelint-disable-next-line */ max-width: var(--size-avatar) !important; - /* stylelint-disable-next-line */ min-height: var(--size-avatar) !important; - /* stylelint-disable-next-line */ min-width: var(--size-avatar) !important; /* Need to override inline styles */ - /* stylelint-disable-next-line */ width: var(--size-avatar) !important; } +/* Improve "others you know follow" avatar group */ +body .avatar-group--compact .account__avatar { + box-shadow: none; +} + /* Avatars */ body.embed .detailed-status__display-avatar > img, .layout-single-column .account-card__title__avatar .account__avatar, @@ -1479,7 +1585,7 @@ body.embed .detailed-status__display-avatar > img, background-color: var(--color-bg); border: 0; border-radius: 50%; - box-shadow: rgb(255 255 255 / 0.03) 0 0 2px inset; + box-shadow: rgb(255 255 255 / 3%) 0 0 2px inset; } /* Things that should not have border */ @@ -1497,7 +1603,6 @@ body.embed .detailed-status__display-avatar > img, } .layout-single-column .column-header__wrapper.active::before { - /* stylelint-disable-next-line */ background: var(--active-header-radial-gradient); } @@ -1510,7 +1615,10 @@ body.embed .detailed-status__display-avatar > img, .layout-single-column .status__prepend, .layout-single-column .notification__message, .layout-single-column .status { - transition: all 200ms; + transition: + background-color 200ms, + border-color 200ms, + opacity 200ms; } /* Toot hover effect */ @@ -1520,12 +1628,19 @@ body.embed .detailed-status__display-avatar > img, } /* Focusable toot and other hilighted items */ -.layout-single-column .compose-form .autosuggest-textarea__suggestions__item.selected, -.layout-single-column .compose-form .autosuggest-textarea__suggestions__item:active, -.layout-single-column .compose-form .autosuggest-textarea__suggestions__item:focus, -.layout-single-column .compose-form .autosuggest-textarea__suggestions__item:hover, +.layout-single-column + .compose-form + .autosuggest-textarea__suggestions__item.selected, +.layout-single-column + .compose-form + .autosuggest-textarea__suggestions__item:active, +.layout-single-column + .compose-form + .autosuggest-textarea__suggestions__item:focus, +.layout-single-column + .compose-form + .autosuggest-textarea__suggestions__item:hover, .layout-single-column .focusable:focus { - /* stylelint-disable-next-line */ background: var(--color-focusable-toot); } @@ -1565,6 +1680,7 @@ body.embed .detailed-status__display-avatar > img, .layout-single-column .hashtag-bar a:focus, .layout-single-column .hashtag-bar a:hover { background-color: var(--color-accent-dark); + /* It should be always light also on light mode, so not using variable here */ color: #f7f9f9; } @@ -1576,7 +1692,9 @@ body.embed .detailed-status__display-avatar > img, /* Status update tinted to right */ .layout-single-column .status:not(.status--in-thread) .hashtag-bar, -.layout-single-column .status__content--collapsed + .status__content__read-more-button, +.layout-single-column + .status__content--collapsed + + .status__content__read-more-button, .layout-single-column .status:not(.status--in-thread) .status__action-bar, .layout-single-column .status:not(.status--in-thread) .attachment-list, .layout-single-column .status:not(.status--in-thread) .status__content { @@ -1620,7 +1738,7 @@ body.embed .detailed-status__display-avatar > img, .layout-single-column .detailed-status__action-bar .icon-button[disabled], .layout-single-column .status__action-bar .icon-button[disabled] { - opacity: .5; + opacity: 0.5; pointer-events: none; } @@ -1637,7 +1755,8 @@ body.embed .detailed-status__display-avatar > img, } /* We don't need to show our own account when we know our own account is being mentioned */ -.notification-ungrouped.notification-ungrouped--mention .notification-ungrouped__header, +.notification-ungrouped.notification-ungrouped--mention + .notification-ungrouped__header, .notification-group .notification-group__embedded-status__account { display: none; } @@ -1646,21 +1765,9 @@ body.embed .detailed-status__display-avatar > img, padding-left: calc(24px + var(--gap-default)); } -/* Media inside status update tinted to right */ -.layout-single-column .status .audio-player, -.layout-single-column .status .video-player, -.layout-single-column .status .media-gallery { - margin-left: auto; - /* Need to override inline styles */ - /* stylelint-disable-next-line */ - width: calc(100% - calc(var(--size-avatar) + var(--gap-default))) !important; -} - /* Fix aspect-ratio for some videos in mastodon v4.1.5-nightly-2023-07-26 */ -.layout-single-column div[style*='aspect-ratio']:not([class]) { - +.layout-single-column div[style*="aspect-ratio"]:not([class]) { /* It's inlined so we have to use !important */ - /* stylelint-disable-next-line */ aspect-ratio: unset !important; } @@ -1680,6 +1787,7 @@ body.embed .media-gallery, body.embed .media-gallery__gifv, body.embed .media-gallery__preview, body.embed .video-player, +.detailed-status .status.status--is-quote .media-gallery, .layout-single-column .status .audio-player, .layout-single-column .status .media-gallery, .layout-single-column .status .video-player, @@ -1687,22 +1795,22 @@ body.embed .video-player, .layout-single-column .media-gallery, .layout-single-column .media-gallery__gifv, .layout-single-column .media-gallery__preview, -.layout-single-column .video-player { +.layout-single-column .video-player, +.layout-single-column .status__quote .status__quote-author-button { margin-left: calc(var(--size-avatar) + var(--gap-default)); } body.embed [data-component="Video"] > div { - /* stylelint-disable-next-line */ aspect-ratio: unset !important; } body.embed .spoiler-button + .media-gallery__item > .media-gallery__preview, -.layout-single-column .spoiler-button + .media-gallery__item > .media-gallery__preview { - /* stylelint-disable-next-line */ +.layout-single-column + .spoiler-button + + .media-gallery__item + > .media-gallery__preview { margin-left: unset !important; - /* stylelint-disable-next-line */ max-height: unset !important; - /* stylelint-disable-next-line */ width: 100% !important; } @@ -1723,9 +1831,7 @@ body.embed .detailed-status .video-player, } .layout-single-column .media-gallery__preview { - /* stylelint-disable-next-line */ margin-left: 0 !important; - /* stylelint-disable-next-line */ width: 100% !important; } @@ -1734,14 +1840,20 @@ body.embed .detailed-status .video-player, } .layout-single-column .media-gallery > .media-gallery__item:nth-of-type(odd), -.layout-single-column .media-gallery > .media-gallery__item:nth-of-type(odd) > a, +.layout-single-column + .media-gallery + > .media-gallery__item:nth-of-type(odd) + > a, .layout-single-column .media-gallery__preview:nth-of-type(odd) { border-bottom-right-radius: 0; border-top-right-radius: 0; } .layout-single-column .media-gallery > .media-gallery__item:nth-of-type(even), -.layout-single-column .media-gallery > .media-gallery__item:nth-of-type(even) > a, +.layout-single-column + .media-gallery + > .media-gallery__item:nth-of-type(even) + > a, .layout-single-column .media-gallery__preview:nth-of-type(even) { border-bottom-left-radius: 0; border-top-left-radius: 0; @@ -1759,14 +1871,20 @@ body.embed .detailed-status .video-player, .layout-single-column .media-gallery.media-gallery--layout-3, .layout-single-column .media-gallery.media-gallery--layout-4, .layout-single-column .media-gallery__preview, +.layout-single-column .audio-player, .layout-single-column .video-player { max-height: 430px; - /* stylelint-disable-next-line */ width: unset !important; } -.layout-single-column .media-gallery:has(.spoiler-button) .media-gallery__preview { - /* stylelint-disable-next-line */ +/* When image is still loading up, reset width to 100%, Fixes #150 */ +body.layout-single-column canvas[class="media-gallery__preview"] { + width: 100% !important; +} + +.layout-single-column + .media-gallery:has(.spoiler-button) + .media-gallery__preview { width: 100% !important; } @@ -1782,7 +1900,6 @@ body.embed .detailed-status__link { top: 0; } -/* stylelint-disable-next-line */ body.embed #mastodon-status { overflow: hidden; } @@ -1829,7 +1946,6 @@ body.embed .activity-stream .entry { body.embed > .activity-stream { backface-visibility: hidden; - /* stylelint-disable-next-line */ background: #313543 !important; border: 1px solid var(--color-border); border-radius: 10px; @@ -1852,21 +1968,21 @@ body.embed > .activity-stream { body.embed .detailed-status__link > .fa-reply + span::after, .layout-single-column .detailed-status__link > .icon-reply + span::after { color: var(--color-dim); - content: 'Replies'; + content: "Replies"; font-weight: var(--font-weight-semibold); } body.embed .detailed-status__link > .fa-retweet + span::after, .layout-single-column .detailed-status__link > .icon-retweet + span::after { color: var(--color-dim); - content: 'Boosts'; + content: "Boosts"; font-weight: var(--font-weight-semibold); } body.embed .detailed-status__link > .fa-star + span::after, .layout-single-column .detailed-status__link > .icon-star + span::after { color: var(--color-dim); - content: 'Favourites'; + content: "Favourites"; font-weight: var(--font-weight-semibold); } @@ -1874,7 +1990,10 @@ body.embed .detailed-status__meta .detailed-status__link .fa-reply, body.embed .detailed-status__meta .detailed-status__link .fa-star, body.embed .detailed-status__meta .detailed-status__link .fa-retweet, .layout-single-column .detailed-status__meta .detailed-status__link .icon-star, -.layout-single-column .detailed-status__meta .detailed-status__link .icon-retweet { +.layout-single-column + .detailed-status__meta + .detailed-status__link + .icon-retweet { display: none; } @@ -1892,7 +2011,7 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet, background-color: var(--color-bg); border-radius: var(--border-radius-badges); color: var(--color-ghost-button-text); - opacity: .5; + opacity: 0.5; } /* Alt badge */ @@ -1943,7 +2062,7 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet, z-index: 4; } -@media (min-width: 1175px) { +@media (width >= 1175px) { .layout-single-column .ui__header, .layout-single-column .columns-area__panels__main > div.tabs-bar__wrapper, .layout-single-column .tabs-bar__wrapper { @@ -1951,9 +2070,16 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet, } } +@media (max-width: 1175px) { + .layout-single-column .columns-area__panels__main > div { + border-right: 0; + } +} + /* Hidden things */ -/* stylelint-disable-next-line */ -.layout-single-column .column-header .column-header__icon:not(.icon-user-plus):not(.icon-user-times) { +.layout-single-column + .column-header + .column-header__icon:not(.icon-user-plus):not(.icon-user-times) { display: none; } @@ -2011,7 +2137,7 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet, } /* Truncate too long unfollow buttons and texts beside it so they don't overlap in notifications */ -@media (max-width: 600px) { +@media (width <= 600px) { .layout-single-column .notification .account__relationship > .button, .layout-single-column .notification__report__actions .button { max-width: 24vw; @@ -2036,17 +2162,16 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet, } .layout-single-column .notification .account__avatar, -.layout-single-column .notification .account__avatar-overlay-overlay .account__avatar, +.layout-single-column + .notification + .account__avatar-overlay-overlay + .account__avatar, .layout-single-column .notification .account__avatar-overlay-overlay { /* Need to override inline styles */ - /* stylelint-disable-next-line */ height: var(--size-avatar-small) !important; - /* stylelint-disable-next-line */ min-height: var(--size-avatar-small) !important; - /* stylelint-disable-next-line */ min-width: var(--size-avatar-small) !important; position: absolute; - /* stylelint-disable-next-line */ width: var(--size-avatar-small) !important; } @@ -2055,22 +2180,40 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet, } /* Fixes: User avatars in notifications are sometimes links to my profile instead of theirs #25 */ -.layout-single-column .notification.notification-reblog .status__info .status__display-name, -.layout-single-column .notification.notification-follow .status__info .status__display-name, -.layout-single-column .notification-group--favourite .status__info .status__display-name, -.layout-single-column .notification.notification-favourite .status__info .status__display-name { +.layout-single-column + .notification.notification-reblog + .status__info + .status__display-name, +.layout-single-column + .notification.notification-follow + .status__info + .status__display-name, +.layout-single-column + .notification-group--favourite + .status__info + .status__display-name, +.layout-single-column + .notification.notification-favourite + .status__info + .status__display-name { pointer-events: none; } /* Hack to show follow notification more minimal way */ -.layout-single-column .notification.notification-admin-report .notification__report, -.layout-single-column .notification.notification-admin-sign-up .account__wrapper, +.layout-single-column + .notification.notification-admin-report + .notification__report, +.layout-single-column + .notification.notification-admin-sign-up + .account__wrapper, .layout-single-column .notification.notification-update .account__wrapper, .layout-single-column .notification.notification-follow .account__wrapper { position: relative; } -.layout-single-column .notification.notification-admin-report .account__avatar-overlay-overlay { +.layout-single-column + .notification.notification-admin-report + .account__avatar-overlay-overlay { top: calc(-1 * calc(var(--size-avatar-small) + var(--gap-default) + 4px)); } @@ -2078,15 +2221,23 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet, .layout-single-column .notification.notification-poll .display-name, .layout-single-column .notification.notification-update .display-name__html, .layout-single-column .notification.notification-update .display-name__account, -.layout-single-column .notification.notification-admin-sign-up .display-name__html, +.layout-single-column + .notification.notification-admin-sign-up + .display-name__html, .layout-single-column .notification.notification-admin-sign-up .display-name, .layout-single-column .notification.notification-follow .display-name__html { visibility: hidden; } -.layout-single-column .notification.notification-update .account__avatar-wrapper, -.layout-single-column .notification.notification-admin-sign-up .account__avatar-wrapper, -.layout-single-column .notification.notification-follow .account__avatar-wrapper, +.layout-single-column + .notification.notification-update + .account__avatar-wrapper, +.layout-single-column + .notification.notification-admin-sign-up + .account__avatar-wrapper, +.layout-single-column + .notification.notification-follow + .account__avatar-wrapper, .layout-single-column .notification .account__avatar-overlay { left: calc(var(--size-avatar-small) + var(--gap-default) + 18px); margin-top: calc(-1 * calc(var(--size-avatar-small) + var(--gap-default))); @@ -2094,23 +2245,39 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet, top: 4px; } -.layout-single-column .notification.notification-admin-report .account__avatar-overlay { +.layout-single-column + .notification.notification-admin-report + .account__avatar-overlay { margin-top: 0; top: 0; } -.layout-single-column .notification.notification-status .notification__message > span { +.layout-single-column + .notification.notification-status + .notification__message + > span { display: none; } .layout-single-column .notification.notification-follow .verified-badge, -.layout-single-column .notification.notification-admin-sign-up .account__contents, +.layout-single-column + .notification.notification-admin-sign-up + .account__contents, .layout-single-column .notification.notification-follow .account__contents, .layout-single-column .notification.notification-follow .display-name, -.layout-single-column .notification.notification-admin-sign-up .display-name + span, +.layout-single-column + .notification.notification-admin-sign-up + .display-name + + span, .layout-single-column .notification.notification-follow .display-name + span, -.layout-single-column .notification-group--favourite .status__wrapper-direct .status__prepend, -.layout-single-column .notification.notification-favourite .status__wrapper-direct .status__prepend, +.layout-single-column + .notification-group--favourite + .status__wrapper-direct + .status__prepend, +.layout-single-column + .notification.notification-favourite + .status__wrapper-direct + .status__prepend, .layout-single-column .notification.notification-reblog .display-name, .layout-single-column .notification-group--favourite .display-name, .layout-single-column .notification.notification-favourite .display-name { @@ -2118,47 +2285,82 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet, } /* Minimal boost notification fix */ -.layout-single-column .notification.notification-reblog .notification__message > span { +.layout-single-column + .notification.notification-reblog + .notification__message + > span { margin-top: calc(var(--size-avatar-small) + calc(var(--gap-default) / 2)); } /* Minimal follow notification fix */ -.layout-single-column .notification.notification-follow .notification__message > span { - margin-top: calc(calc(var(--size-avatar-small) + calc(var(--gap-default) / 2)) + 6px); +.layout-single-column + .notification.notification-follow + .notification__message + > span { + margin-top: calc( + calc(var(--size-avatar-small) + calc(var(--gap-default) / 2)) + 6px + ); } -.layout-single-column .notification.notification.notification-admin-sign-up .account__relationship, +.layout-single-column + .notification.notification.notification-admin-sign-up + .account__relationship, .layout-single-column .notification.notification-follow .account__relationship { transform: translateY(-8px); } -/* stylelint-disable-next-line */ -.layout-single-column .notification.notification-follow .account__avatar-wrapper { +.layout-single-column + .notification.notification-follow + .account__avatar-wrapper { top: 6px; } /* Minimal fav notification fix */ -.layout-single-column .notification.notification-favourite .notification__message > span { +.layout-single-column + .notification.notification-favourite + .notification__message + > span { margin-top: calc(var(--size-avatar-small) + calc(var(--gap-default) / 2)); } /* If a status content is empty and there's only attachment, remove gap */ -.layout-single-column .notification .status__content:has(.status__content__text:empty) + .attachment-list { +.layout-single-column + .notification + .status__content:has(.status__content__text:empty) + + .attachment-list { margin-top: 0; } /* Less space before attachments if no status content */ -.layout-single-column .status .status__content:has(.status__content__text:empty) + .audio-player, -.layout-single-column .status .status__content:has(.status__content__text:empty) + .video-player, -.layout-single-column .status .status__content:has(.status__content__text:empty) + .media-gallery, -.layout-single-column .detailed-status .status__content:has(.status__content__text:empty) + .audio-player, -.layout-single-column .detailed-status .status__content:has(.status__content__text:empty) + .video-player, -.layout-single-column .detailed-status .status__content:has(.status__content__text:empty) + .media-gallery:not(.compose-form__uploads) { +.layout-single-column + .status + .status__content:has(.status__content__text:empty) + + .audio-player, +.layout-single-column + .status + .status__content:has(.status__content__text:empty) + + .video-player, +.layout-single-column + .status + .status__content:has(.status__content__text:empty) + + .media-gallery, +.layout-single-column + .detailed-status + .status__content:has(.status__content__text:empty) + + .audio-player, +.layout-single-column + .detailed-status + .status__content:has(.status__content__text:empty) + + .video-player, +.layout-single-column + .detailed-status + .status__content:has(.status__content__text:empty) + + .media-gallery:not(.compose-form__uploads) { margin-top: calc(var(--gap-default) / 2); } .layout-single-column .status__prepend { - padding-left: calc(var(--size-avatar) - 4px); + padding-left: calc(var(--size-avatar) + 2px); } .layout-single-column .notification.notification-update .account__display-name, @@ -2179,12 +2381,17 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet, padding-left: calc(var(--size-avatar) + var(--gap-default)); } -.layout-single-column .notification-admin-report .notification__report__details { +.layout-single-column + .notification-admin-report + .notification__report__details { color: var(--color-dim); font-size: var(--font-size); } -.layout-single-column .notification-admin-report .notification__report__details strong { +.layout-single-column + .notification-admin-report + .notification__report__details + strong { font-weight: var(--font-weight-regular); } @@ -2228,7 +2435,6 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet, /* Hide scrollbars for .navigation-panel for Chrome and Safari */ .dropdown-menu__container__list--scrollable::-webkit-scrollbar, -.layout-single-column .navigation-panel__menu::-webkit-scrollbar, .layout-single-column .navigation-panel::-webkit-scrollbar { display: none; width: 4px; @@ -2237,14 +2443,14 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet, .layout-single-column .column-link { align-items: center; color: var(--color-light-text); + column-gap: 14px; font-size: var(--font-size-heading); - gap: var(--gap-column-link); overflow: visible; padding-bottom: calc(var(--gap-column-link) + 4px); padding-left: var(--gap-column-link); padding-right: calc(var(--gap-column-link) * 1.5); padding-top: calc(var(--gap-column-link) + 4px); - transition: all 100ms; + row-gap: var(--gap-column-link); width: 100%; } @@ -2267,7 +2473,7 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet, bottom: calc(2px - var(--gap-column-link) * 1.5); content: ""; inset-inline-end: calc(0px - (var(--gap-column-link) * 2)); - inset-inline-start: calc(-1.28571429em - (var(--gap-column-link) * 2)); + inset-inline-start: calc(-1.28571429em - var(--gap-column-link) - 7px * 2); opacity: 0; position: absolute; top: calc(-4px - var(--gap-column-link)); @@ -2290,7 +2496,7 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet, } .layout-single-column .account__section-headline a { - transition: all 200ms; + transition: background 200ms; } .layout-single-column .dropdown-menu__item a:hover, @@ -2398,7 +2604,10 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet, margin-right: 4px; } -.layout-single-column .notification-group .notification-group__icon .icon-repeat, +.layout-single-column + .notification-group + .notification-group__icon + .icon-repeat, .layout-single-column .notification .notification__message .icon.icon-retweet { color: var(--color-green); height: 24px; @@ -2410,8 +2619,13 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet, color: var(--color-accent-dark); } -.layout-single-column .account__relationship .icon.icon-user-plus:not(.icon-link), -.layout-single-column .notification .account__relationship .icon.icon-user-plus:not(.icon-link) { +.layout-single-column + .account__relationship + .icon.icon-user-plus:not(.icon-link), +.layout-single-column + .notification + .account__relationship + .icon.icon-user-plus:not(.icon-link) { color: var(--color-dim); } @@ -2433,35 +2647,59 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet, } .layout-single-column .notification .account__relationship .icon { - /* stylelint-disable-next-line */ color: var(--color-dim); font-size: 20px; } .layout-single-column .list-adder__lists .icon-times::before, -.layout-single-column .account__wrapper .account__relationship .icon-button.active .icon, -.layout-single-column .explore__search-results .account__relationship .icon-button.active .icon, -.layout-single-column .notification .account__relationship .icon-button.active .icon { - /* stylelint-disable-next-line */ +.layout-single-column + .account__wrapper + .account__relationship + .icon-button.active + .icon, +.layout-single-column + .explore__search-results + .account__relationship + .icon-button.active + .icon, +.layout-single-column + .notification + .account__relationship + .icon-button.active + .icon { color: var(--color-green); - opacity: .75; + opacity: 0.75; } .layout-single-column .list-adder__lists .icon-times:hover::before, .layout-single-column .explore__search-results .icon-button.active:hover .icon, -.layout-single-column .notification .account__relationship .icon-button.active:hover .icon { - /* stylelint-disable-next-line */ +.layout-single-column + .notification + .account__relationship + .icon-button.active:hover + .icon { color: var(--color-red); opacity: 1; } .layout-single-column .explore__search-results .icon-button:focus .icon, -.layout-single-column .notification .account__relationship .icon-button:focus .icon, +.layout-single-column + .notification + .account__relationship + .icon-button:focus + .icon, .layout-single-column .explore__search-results .icon-button.active:focus .icon, -.layout-single-column .notification .account__relationship .icon-button.active:focus .icon, +.layout-single-column + .notification + .account__relationship + .icon-button.active:focus + .icon, .layout-single-column .explore__search-results .icon-button:hover .icon, -.layout-single-column .notification .account__relationship .icon-button:hover .icon { - /* stylelint-disable-next-line */ +.layout-single-column + .notification + .account__relationship + .icon-button:hover + .icon { color: var(--color-green); opacity: 1; } @@ -2478,7 +2716,11 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet, opacity: 1; } -.layout-single-column .emoji-mart-search > input:focus-visible ~ .emoji-mart-search-icon svg { +.layout-single-column + .emoji-mart-search + > input:focus-visible + ~ .emoji-mart-search-icon + svg { fill: var(--color-accent); } @@ -2504,24 +2746,25 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet, } /* Search */ -.layout-single-column .search .search__icon .icon-search { +.layout-single-column .search__icon-wrapper .search__icon { background-image: var(--icon-search); background-position: center; background-repeat: no-repeat; background-size: 20px; display: inline-block; height: 24px; - width: 24px; -} - -.layout-single-column .search .search__icon .icon { inset-inline-start: unset; position: absolute; right: 14px; top: 9px; + width: 24px; } -.layout-single-column .search .search__icon .icon-search path { +.layout-single-column .search__icon-wrapper.has-value .search__icon { + background-image: var(--icon-close-action-bar); +} + +.layout-single-column .search__icon-wrapper .search__icon path { display: none; } @@ -2586,7 +2829,10 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet, color: var(--color-light-purple); } -.layout-single-column .account__domain-pill__popout__parts > div:nth-child(2) svg { +.layout-single-column + .account__domain-pill__popout__parts + > div:nth-child(2) + svg { background-image: var(--icon-globe-purple); background-size: 24px; } @@ -2608,8 +2854,13 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet, line-height: 1.3; } +/* Profile links start */ /* Truncate too long links in the profile, like Nostr */ -.layout-single-column .account__header__bio .account__header__fields span > a:only-of-type { +.layout-single-column + .account__header__bio + .account__header__fields + span + > a:only-of-type { display: block; max-width: 220px; overflow: hidden; @@ -2617,251 +2868,512 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet, white-space: nowrap; } -.layout-single-column .account__header__bio .account__header__fields dl::after { - content: '|'; - order: 2; -} - -/* Recognize empty field and remove pipe */ -.layout-single-column .account__header__bio .account__header__fields dl:has(dd > span:empty)::after { - display: none; -} - .layout-single-column .account__header__bio .account__header__fields dt { order: 1; } .layout-single-column .account__header__bio .account__header__fields dd { - order: 3; + order: 2; } -/* Hide the character in between Joined label */ -.layout-single-column .account__header__bio .account__header__fields dl:first-of-type::before, -.layout-single-column .account__header__bio .account__header__fields dl:first-of-type::after { - display: none; +/* Icon positioning - icons appear before label/value */ +.layout-single-column .account__header__bio .account__header__fields dl::before, +.layout-single-column .account__header__bio .account__header__fields dl::after { + background-position: center; + background-repeat: no-repeat; + background-size: contain; + display: inline-block; + flex-shrink: 0; + order: 0; } -/* Make full width... */ -/* stylelint-disable no-duplicate-selectors */ -.layout-single-column .account__header__bio .account__header__fields dl { - width: 100%; -} -/* stylelint-enable no-duplicate-selectors */ - -/* ...except on those that have label with GitHub, github, YouTube or similar */ -.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="github" i], dt[title*="youtube" i], dt[title*="website" i], dt[title*="twitch" i], dt[title*="twitter" i], dt[title="x" i], dt[title*="discord" i], dt[title*="linkedin" i], dt[title*="instagram" i], dt[title="IG"], dt[title~="Mastodon account" i], dt[title~="Mastodon account" i], dt[title~="account" i], dt[title="Alt account" i], dt[title*="mastodon" i], dt[title*="masto" i], dt[title*="ko-fi" i], dt[title*="kofi" i], dt[title*="paypal" i], dt[title*="patreon" i], dt[title*="threads" i], dt[title*="bluesky" i], dt[title*="nostr" i], dt[title*="facebook" i], dt[title*="friendica" i], dt[title*="pronouns" i], dt[title*="wordpress" i], dt[title*="fb" i], dt[title*="bandcamp" i]) { +/* ...except on those that have link URLs for known platforms */ +.layout-single-column + .account__header__bio + .account__header__fields + dl:has( + dd[title*="github.com" i], + dd[title*="youtube.com" i], + dd[title*="youtu.be" i], + dd[title*="twitch.tv" i], + dd[title*="twitter.com" i], + dd[title*="x.com" i], + dd[title*="discord" i], + dd[title*="linkedin.com" i], + dd[title*="instagram.com" i], + dd[title*="ko-fi.com" i], + dd[title*="kofi.com" i], + dd[title*="paypal" i], + dd[title*="patreon.com" i], + dd[title*="threads.net" i], + dd[title*="bsky.app" i], + dd[title*="bsky.social" i], + dd[title*="facebook.com" i], + dd[title*="fb.com" i], + dd[title*="bandcamp.com" i], + dd[title*="wordpress.com" i], + dd[title*="wordpress.org" i], + dd[title*="/@" i] + ), +.layout-single-column + .account__header__bio + .account__header__fields + dl:has(a):not(:first-of-type) { max-width: 50%; order: 9999; width: auto; } -/* Hide labels that show "Website", "YouTube", etc. */ -.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="github" i], dt[title*="youtube" i], dt[title*="website" i], dt[title*="twitch" i], dt[title*="twitter" i], dt[title="x" i], dt[title*="discord" i], dt[title*="linkedin" i], dt[title*="instagram" i], dt[title="IG"], dt[title~="Mastodon account" i], dt[title~="Mastodon account" i], dt[title~="account" i], dt[title="Alt account" i], dt[title*="mastodon" i], dt[title*="masto" i], dt[title*="ko-fi" i], dt[title*="kofi" i], dt[title*="paypal" i], dt[title*="patreon" i], dt[title*="threads" i], dt[title*="bluesky" i], dt[title*="nostr" i], dt[title*="bandcamp" i], dt[title*="facebook" i], dt[title*="friendica" i], dt[title*="pronouns" i], dt[title*="wordpress" i], dt[title*="fb" i]) dt { +/* Hide labels for social/link fields (keep icons only) */ +.layout-single-column + .account__header__bio + .account__header__fields + dl:has( + dd[title*="github.com" i], + dd[title*="youtube.com" i], + dd[title*="youtu.be" i], + dd[title*="twitch.tv" i], + dd[title*="twitter.com" i], + dd[title*="x.com" i], + dd[title*="discord" i], + dd[title*="linkedin.com" i], + dd[title*="instagram.com" i], + dd[title*="ko-fi.com" i], + dd[title*="kofi.com" i], + dd[title*="paypal" i], + dd[title*="patreon.com" i], + dd[title*="threads.net" i], + dd[title*="bsky.app" i], + dd[title*="bsky.social" i], + dd[title*="bandcamp.com" i], + dd[title*="facebook.com" i], + dd[title*="fb.com" i], + dd[title*="wordpress.com" i], + dd[title*="wordpress.org" i], + dd[title*="/@" i] + ) + dt, +.layout-single-column + .account__header__bio + .account__header__fields + dl:has(a):not(:first-of-type) + dt { display: none; } -/* Hide pipe after link icon and the link icon from the ones that already have an icon */ -.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="website" i])::after, -.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="github" i], dt[title*="youtube" i], dt[title*="twitch" i], dt[title*="twitter" i], dt[title="x" i], dt[title*="discord" i], dt[title*="linkedin" i], dt[title*="instagram" i], dt[title="IG"], dt[title~="Mastodon account" i], dt[title~="Mastodon account" i], dt[title~="account" i], dt[title="Alt account" i], dt[title*="mastodon" i], dt[title*="masto" i], dt[title*="ko-fi" i], dt[title*="kofi" i], dt[title*="paypal" i], dt[title*="patreon" i], dt[title*="threads" i], dt[title*="bluesky" i], dt[title*="nostr" i], dt[title*="bandcamp" i], dt[title*="facebook" i], dt[title*="friendica" i], dt[title*="pronouns" i], dt[title*="wordpress" i], dt[title*="fb" i])::before { - display: none; -} +/* Platform-specific icons using dd[title] URL detection */ -/* If GitHub etc. move even further from links */ -.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="github" i], dt[title*="youtube" i], dt[title*="twitch" i], dt[title*="twitter" i], dt[title="x" i], dt[title*="discord" i], dt[title*="linkedin" i], dt[title*="instagram" i], dt[title="IG"], dt[title="bandcamp"], dt[title="facebook"], dt[title="friendica"], dt[title="pronouns"], dt[title="wordpress"], dt[title="fb"]) { - order: 99999; -} - -.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="github" i])::after { - content: var(--icon-github); +/* GitHub */ +.layout-single-column + .account__header__bio + .account__header__fields + dl:has(dd[title*="github.com" i])::after { + background-image: var(--icon-github); + content: ""; height: 18.5px; width: 18.5px; } -.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="discord" i])::after { - content: var(--icon-discord); +/* Discord */ +.layout-single-column + .account__header__bio + .account__header__fields + dl:has(dd[title*="discord" i])::after { + background-image: var(--icon-discord); + content: ""; height: 18.5px; width: 18.5px; } -.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="linkedin" i])::after { - content: var(--icon-linkedin); +/* LinkedIn */ +.layout-single-column + .account__header__bio + .account__header__fields + dl:has(dd[title*="linkedin.com" i])::after { + background-image: var(--icon-linkedin); + content: ""; height: 18.5px; width: 18.5px; } -.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title="IG"], dt[title*="instagram" i])::after { - content: var(--icon-instagram); +/* Instagram */ +.layout-single-column + .account__header__bio + .account__header__fields + dl:has(dd[title*="instagram.com" i])::after { + background-image: var(--icon-instagram); + content: ""; height: 18.5px; width: 18.5px; } -.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="youtube" i])::after { - content: var(--icon-youtube); +/* YouTube */ +.layout-single-column + .account__header__bio + .account__header__fields + dl:has(dd[title*="youtube.com" i])::after, +.layout-single-column + .account__header__bio + .account__header__fields + dl:has(dd[title*="youtu.be" i])::after { + background-image: var(--icon-youtube); + content: ""; height: 18.5px; width: 18.5px; } -.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="twitch" i])::after { - content: var(--icon-twitch); +/* Twitch */ +.layout-single-column + .account__header__bio + .account__header__fields + dl:has(dd[title*="twitch.tv" i])::after { + background-image: var(--icon-twitch); + content: ""; height: 18.5px; width: 18.5px; } -.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title="x" i])::after, -.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="twitter" i])::after { - content: var(--icon-twitter); +/* Twitter/X */ +.layout-single-column + .account__header__bio + .account__header__fields + dl:has(dd[title*="twitter.com" i])::after, +.layout-single-column + .account__header__bio + .account__header__fields + dl:has(dd[title*="x.com" i])::after { + background-image: var(--icon-twitter); + content: ""; height: 18.5px; width: 18.5px; } -.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="patreon" i])::after { - content: var(--icon-patreon); +/* Patreon */ +.layout-single-column + .account__header__bio + .account__header__fields + dl:has(dd[title*="patreon.com" i])::after { + background-image: var(--icon-patreon); + content: ""; height: 18.5px; width: 18.5px; } -.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="paypal" i])::after { - content: var(--icon-paypal); +/* PayPal */ +.layout-single-column + .account__header__bio + .account__header__fields + dl:has(dd[title*="paypal" i])::after { + background-image: var(--icon-paypal); + content: ""; height: 18.5px; width: 18.5px; } -.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="kofi" i])::after, -.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="ko-fi" i])::after { - content: var(--icon-kofi); +/* Ko-fi */ +.layout-single-column + .account__header__bio + .account__header__fields + dl:has(dd[title*="kofi.com" i])::after, +.layout-single-column + .account__header__bio + .account__header__fields + dl:has(dd[title*="ko-fi.com" i])::after { + background-image: var(--icon-kofi); + content: ""; height: 18.5px; width: 18.5px; } -.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="bandcamp" i])::after { - content: var(--icon-bandcamp); +/* Bandcamp */ +.layout-single-column + .account__header__bio + .account__header__fields + dl:has(dd[title*="bandcamp.com" i])::after { + background-image: var(--icon-bandcamp); + content: ""; height: 18.5px; width: 18.5px; } -.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="facebook" i])::after, -.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="fb" i])::after { - content: var(--icon-facebook); +/* Facebook */ +.layout-single-column + .account__header__bio + .account__header__fields + dl:has(dd[title*="facebook.com" i])::after, +.layout-single-column + .account__header__bio + .account__header__fields + dl:has(dd[title*="fb.com" i])::after { + background-image: var(--icon-facebook); + content: ""; height: 18.5px; width: 18.5px; } -.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="friendica" i])::after { - content: var(--icon-friendica); +/* Friendica */ +.layout-single-column + .account__header__bio + .account__header__fields + dl:has(dd[title*="friendica" i])::after { + background-image: var(--icon-friendica); + content: ""; height: 18.5px; - transform: scale(.9); + transform: scale(0.9); width: 18.5px; } -.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="pronouns" i])::after { - content: var(--icon-genderless-pronouns); +/* WordPress */ +.layout-single-column + .account__header__bio + .account__header__fields + dl:has(dd[title*="wordpress.com" i])::after, +.layout-single-column + .account__header__bio + .account__header__fields + dl:has(dd[title*="wordpress.org" i])::after { + background-image: var(--icon-wordpress); + content: ""; height: 18.5px; width: 18.5px; } -.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="wordpress" i])::after { - content: var(--icon-wordpress); +/* Mastodon instances - detect by @ in URL or common instance domains */ +.layout-single-column + .account__header__bio + .account__header__fields + dl:has(dd[title*="/@" i])::after, +.layout-single-column + .account__header__bio + .account__header__fields + dl:has(dd[title*="mastodon.social" i])::after, +.layout-single-column + .account__header__bio + .account__header__fields + dl:has(dd[title*="mastodon.online" i])::after, +.layout-single-column + .account__header__bio + .account__header__fields + dl:has(dd[title*="masto.host" i])::after { + background-image: var(--icon-mastodon); + content: ""; height: 18.5px; width: 18.5px; } -.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="masto" i])::after, -.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="mastodon" i])::after, -.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title="Alt account" i])::after, -.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title~="account" i])::after, -.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title~="Mastodon account" i])::after { - content: var(--icon-mastodon); +/* Threads */ +.layout-single-column + .account__header__bio + .account__header__fields + dl:has(dd[title*="threads.net" i])::after { + background-image: var(--icon-threads); + content: ""; height: 18.5px; width: 18.5px; } -.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="threads" i])::after { - content: var(--icon-threads); +/* Bluesky */ +.layout-single-column + .account__header__bio + .account__header__fields + dl:has(dd[title*="bsky.app" i])::after, +.layout-single-column + .account__header__bio + .account__header__fields + dl:has(dd[title*="bsky.social" i])::after { + background-image: var(--icon-bluesky); + content: ""; height: 18.5px; width: 18.5px; } -.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="bluesky" i])::after { - content: var(--icon-bluesky); +/* Nostr - typically npub or other nostr formats */ +.layout-single-column + .account__header__bio + .account__header__fields + dl:has(dd[title*="npub" i])::after, +.layout-single-column + .account__header__bio + .account__header__fields + dl:has(dd[title*="nostr:" i])::after { + background-image: var(--icon-nostr); + content: ""; height: 18.5px; width: 18.5px; } -.layout-single-column .account__header__bio .account__header__fields dl:has(dt[title*="nostr" i])::after { - content: var(--icon-nostr); - height: 18.5px; - width: 18.5px; -} - -/* Default link icon */ -.layout-single-column .account__header__bio .account__header__fields dl::before { - content: var(--icon-link); +/* Default link icon for all other links (that don't have platform-specific icons) */ +.layout-single-column + .account__header__bio + .account__header__fields + dl:has(dd[title^="http"]):not( + :has( + dd[title*="github.com" i], + dd[title*="youtube.com" i], + dd[title*="youtu.be" i], + dd[title*="twitch.tv" i], + dd[title*="twitter.com" i], + dd[title*="x.com" i], + dd[title*="discord" i], + dd[title*="linkedin.com" i], + dd[title*="instagram.com" i], + dd[title*="ko-fi.com" i], + dd[title*="kofi.com" i], + dd[title*="paypal" i], + dd[title*="patreon.com" i], + dd[title*="threads.net" i], + dd[title*="bsky.app" i], + dd[title*="bsky.social" i], + dd[title*="bandcamp.com" i], + dd[title*="facebook.com" i], + dd[title*="fb.com" i], + dd[title*="wordpress.com" i], + dd[title*="wordpress.org" i], + dd[title*="/@" i], + dd[title*="mastodon.social" i], + dd[title*="mastodon.online" i], + dd[title*="masto.host" i], + dd[title*="friendica" i], + dd[title*="npub" i], + dd[title*="nostr:" i] + ) + )::after { + background-image: var(--icon-link); + content: ""; height: 18.5px; width: 18.5px; } /* If the profile item has no link element, show just label icon */ -.layout-single-column .account__header__bio .account__header__fields dl:not(:has(a))::before { - content: var(--icon-label); +.layout-single-column + .account__header__bio + .account__header__fields + dl:not(:has(a)):not(:first-of-type)::after { + background-image: var(--icon-label); + content: ""; height: 18.5px; width: 18.5px; } /* Verified colors for Firefox before :has */ .layout-single-column .account__details .verified-badge a, -.layout-single-column .account__header__bar .account__header__fields .verified__mark, -.layout-single-column .account__header__bar .account__header__fields .verified a, -.layout-single-column .account__header__bar .account__header__bio .account__header__fields .verified a, -.layout-single-column .account__header__bar .account__header__bio .account__header__fields .verified dd { +.layout-single-column + .account__header__bar + .account__header__fields + .verified__mark, +.layout-single-column + .account__header__bar + .account__header__fields + .verified + a, +.layout-single-column + .account__header__bar + .account__header__bio + .account__header__fields + .verified + a, +.layout-single-column + .account__header__bar + .account__header__bio + .account__header__fields + .verified + dd { color: var(--color-verified); font-weight: var(--font-weight-regular); } /* Reset verified colors */ .layout-single-column .account__details .verified-badge a, -.layout-single-column .account__header__bar:has(.account__header__fields .verified) .account__header__fields .verified__mark, -.layout-single-column .account__header__bar:has(.account__header__fields .verified) .account__header__fields .verified a, -.layout-single-column .account__header__bar:has(.account__header__fields .verified) .account__header__bio .account__header__fields .verified a, -.layout-single-column .account__header__bar:has(.account__header__fields .verified) .account__header__bio .account__header__fields .verified dd { +.layout-single-column + .account__header__bar:has(.account__header__fields .verified) + .account__header__fields + .verified__mark, +.layout-single-column + .account__header__bar:has(.account__header__fields .verified) + .account__header__fields + .verified + a, +.layout-single-column + .account__header__bar:has(.account__header__fields .verified) + .account__header__bio + .account__header__fields + .verified + a, +.layout-single-column + .account__header__bar:has(.account__header__fields .verified) + .account__header__bio + .account__header__fields + .verified + dd { color: var(--color-accent); font-weight: var(--font-weight-regular); } /* Replace verified__mark */ .layout-single-column .account__details .verified-badge .verified-badge__mark, -.layout-single-column .account__header__bar:has(.account__header__fields .verified) .account__header__fields .verified__mark { +.layout-single-column + .account__header__bar:has(.account__header__fields .verified) + .account__header__fields + .verified__mark { background-image: var(--icon-verified-smaller); background-repeat: no-repeat; + content: ""; height: 15px; width: 15px; } -.layout-single-column .account__details .verified-badge .verified-badge__mark path, -.layout-single-column .account__header__bar:has(.account__header__fields .verified) .account__header__fields .verified__mark path { +.layout-single-column + .account__details + .verified-badge + .verified-badge__mark + path, +.layout-single-column + .account__header__bar:has(.account__header__fields .verified) + .account__header__fields + .verified__mark + path { display: none; } .layout-single-column .account__details .verified-badge, -.layout-single-column .account__header__bar:has(.account__header__fields .verified) .account__header__fields .verified dd { +.layout-single-column + .account__header__bar:has(.account__header__fields .verified) + .account__header__fields + .verified + dd { align-items: center; display: inline-flex; gap: 4px; } .layout-single-column .account__details .verified-badge .verified-badge__mark, -.layout-single-column .account__header__bar:has(.account__header__fields .verified) .account__header__fields .verified dd span:nth-child(1) { +.layout-single-column + .account__header__bar:has(.account__header__fields .verified) + .account__header__fields + .verified + dd + span:nth-child(1) { align-items: center; display: flex; order: 2; } .layout-single-column .account__details .verified-badge > span, -.layout-single-column .account__header__bar:has(.account__header__fields .verified) .account__header__fields .verified dd span:nth-child(2) { +.layout-single-column + .account__header__bar:has(.account__header__fields .verified) + .account__header__fields + .verified + dd + span:nth-child(2) { order: 1; } -/* Joined label */ -.layout-single-column .account__header__bio .account__header__fields dt:not([title]) { +/* Joined label - first dl is always "Joined" */ +.layout-single-column + .account__header__bio + .account__header__fields + dl:first-of-type + dt { display: inline-flex; font-weight: var(--font-weight-regular); gap: calc(var(--gap-default) / 2); @@ -2875,12 +3387,29 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet, text-transform: unset; } -.layout-single-column .account__header__bio .account__header__fields dt:not([title])::before { - content: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="%23717c9b" class="r-115tad6 r-4qtqp9 r-yyyyoo r-1xvli5t r-1d4mawv r-dnmrzs r-bnwqim r-1plcrui r-lrvibr"%3E%3Cg%3E%3Cpath d="M7 4V3h2v1h6V3h2v1h1.5C19.89 4 21 5.12 21 6.5v12c0 1.38-1.11 2.5-2.5 2.5h-13C4.12 21 3 19.88 3 18.5v-12C3 5.12 4.12 4 5.5 4H7zm0 2H5.5c-.27 0-.5.22-.5.5v12c0 .28.23.5.5.5h13c.28 0 .5-.22.5-.5v-12c0-.28-.22-.5-.5-.5H17v1h-2V6H9v1H7V6zm0 6h2v-2H7v2zm0 4h2v-2H7v2zm4-4h2v-2h-2v2zm0 4h2v-2h-2v2zm4-4h2v-2h-2v2z"%3E%3C/path%3E%3C/g%3E%3C/svg%3E'); +/* Calendar icon for "Joined" field */ +.layout-single-column + .account__header__bio + .account__header__fields + dl:first-of-type::before { + background-image: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="%23717c9b" class="r-115tad6 r-4qtqp9 r-yyyyoo r-1xvli5t r-1d4mawv r-dnmrzs r-bnwqim r-1plcrui r-lrvibr"%3E%3Cg%3E%3Cpath d="M7 4V3h2v1h6V3h2v1h1.5C19.89 4 21 5.12 21 6.5v12c0 1.38-1.11 2.5-2.5 2.5h-13C4.12 21 3 19.88 3 18.5v-12C3 5.12 4.12 4 5.5 4H7zm0 2H5.5c-.27 0-.5.22-.5.5v12c0 .28.23.5.5.5h13c.28 0 .5-.22.5-.5v-12c0-.28-.22-.5-.5-.5H17v1h-2V6H9v1H7V6zm0 6h2v-2H7v2zm0 4h2v-2H7v2zm4-4h2v-2h-2v2zm0 4h2v-2h-2v2zm4-4h2v-2h-2v2z"%3E%3C/path%3E%3C/g%3E%3C/svg%3E'); + background-position: center; + background-repeat: no-repeat; + background-size: contain; + content: ""; + display: inline-block; height: 18.5px; width: 18.5px; } +/* Hide ::after for Joined field (no second icon needed) */ +.layout-single-column + .account__header__bio + .account__header__fields + dl:first-of-type::after { + display: none !important; +} + .layout-single-column .account__header__bio .account__header__fields dd, .layout-single-column .account__header__bio .account__header__fields dt { color: var(--color-dim); @@ -2889,8 +3418,8 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet, text-transform: unset; } -/* stylelint-disable no-duplicate-selectors */ .layout-single-column .account__header__bio .account__header__fields dl { + align-items: center; background-color: transparent; border: 0; color: var(--color-dim); @@ -2899,9 +3428,9 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet, font-weight: var(--font-weight-regular); gap: calc(var(--gap-default) / 2); padding: 0; + width: 100%; } - -/* stylelint-enable no-duplicate-selectors */ +/* Profile links end */ .layout-single-column .getting-started__trends h4 { border: 0; font-size: var(--font-size-heading); @@ -2931,14 +3460,6 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet, .layout-single-column .account__header__bar .avatar .account__avatar { background-color: transparent; border: 0; - - /* It's inlined so we have to use !important */ - /* stylelint-disable-next-line */ - height: 133.5px !important; - - /* It's inlined so we have to use !important */ - /* stylelint-disable-next-line */ - width: 133.5px !important; } .layout-single-column .account__header__tabs { @@ -2954,8 +3475,11 @@ body.embed .detailed-status__meta .detailed-status__link .fa-retweet, body.embed .button.logo-button, .layout-single-column .notification__report__actions .button, .layout-single-column .column-inline-form button, -.layout-single-column .explore__suggestions .account-card__actions__button button, -.layout-single-column .account__header__tabs__buttons .button, +.layout-single-column + .explore__suggestions + .account-card__actions__button + button, +.layout-single-column .account__header__buttons .button, .layout-single-column .account .account__relationship > .button, .layout-single-column .notification .account__relationship > .button { background-color: transparent; @@ -2978,30 +3502,29 @@ body.embed .button.logo-button, body.embed .button.logo-button, .layout-single-column .notification__report__actions .button, .layout-single-column .column-inline-form button, -.layout-single-column .explore__suggestions .account-card__actions__button button, -.layout-single-column .account__header__tabs__buttons .button, -.layout-single-column .account__header__tabs__buttons .icon-button, +.layout-single-column + .explore__suggestions + .account-card__actions__button + button, +.layout-single-column .account__header__buttons .button, +.layout-single-column .account__header__buttons .icon-button, .layout-single-column .notification .account__relationship > .button, .layout-single-column .account .account__relationship > .button { border: 1px solid var(--color-outer-space); } -.layout-single-column .account__header__tabs__buttons .icon-button { - color: var(--color-light-text); -} - /* Fix focus overflow for 4.1.4-nightly */ -.layout-single-column .account__header__tabs__buttons { +.layout-single-column .account__header__buttons { overflow: visible; } -/* stylelint-disable-next-line */ -.layout-single-column .account__header__tabs__buttons .icon-button { +.layout-single-column .account__header__buttons .icon-button { align-items: center; border-bottom-left-radius: 9999px; border-bottom-right-radius: 9999px; border-top-left-radius: 9999px; border-top-right-radius: 9999px; + color: var(--color-light-text); display: inline-flex; height: 36px; justify-content: center; @@ -3010,31 +3533,40 @@ body.embed .button.logo-button, } /* Copy-icon size in profile */ -.layout-single-column .account__header__tabs__buttons .icon-button svg { +.layout-single-column .account__header__buttons .icon-button svg { height: 18px; width: 18px; } body.embed .button.logo-button:hover, .layout-single-column .column-inline-form button:hover, -.layout-single-column .explore__suggestions .account-card__actions__button button:hover, -.layout-single-column .account__header__tabs__buttons .icon-button.active { +.layout-single-column + .explore__suggestions + .account-card__actions__button + button:hover, +.layout-single-column .account__header__buttons .icon-button.active { color: var(--color-light-text); } -.layout-single-column .account__header__tabs__buttons .icon-button .icon-bell-o, -.layout-single-column .account__header__tabs__buttons .icon-button .icon-bell { +.layout-single-column .account__header__buttons .icon-button .icon-bell-o, +.layout-single-column .account__header__buttons .icon-button .icon-bell { background-image: var(--icon-bell-header-tabs); } -.layout-single-column .account__header__tabs__buttons .icon-button.active .icon-bell-o, -.layout-single-column .account__header__tabs__buttons .icon-button.active .icon-bell { +.layout-single-column + .account__header__buttons + .icon-button.active + .icon-bell-o, +.layout-single-column .account__header__buttons .icon-button.active .icon-bell { background-image: var(--icon-bell-header-tabs-active); } -.layout-single-column .explore__suggestions .account-card__actions__button button:hover, -.layout-single-column .account__header__tabs__buttons .button:focus, -.layout-single-column .account__header__tabs__buttons .button:hover, +.layout-single-column + .explore__suggestions + .account-card__actions__button + button:hover, +.layout-single-column .account__header__buttons .button:focus, +.layout-single-column .account__header__buttons .button:hover, .layout-single-column .notification .account__relationship > .button:hover, .layout-single-column .notification .account__relationship > .button:focus, .layout-single-column .account .account__relationship > .button:hover, @@ -3056,9 +3588,9 @@ body.embed .button.logo-button:hover, .layout-single-column .detailed-status__action-bar .icon-button::after, .layout-single-column .status__action-bar .icon-button::after { - background-color: rgba(96, 105, 132, .15); + background-color: rgba(96, 105, 132, 15%); border-radius: 50%; - content: ''; + content: ""; height: 36px; left: 0; opacity: 0; @@ -3088,7 +3620,9 @@ body.embed .button.logo-button:hover, transform: translateX(3px); } -.layout-single-column .status__action-bar .icon-button.icon-button--with-counter::after { +.layout-single-column + .status__action-bar + .icon-button.icon-button--with-counter::after { transform: translateX(0) translateY(0); } @@ -3098,14 +3632,15 @@ body.embed .button.logo-button:hover, } /* Follow recommendations, "Who to follow" since Mastodon v4.3.0-alpha.1 (2024-02-01) */ -.layout-single-column .inline-follow-suggestions__body__scrollable__card .account__avatar { +.layout-single-column + .inline-follow-suggestions__body__scrollable__card + .account__avatar { background-color: transparent; border: 0; } /* Explore -> For you shade in bio */ .layout-single-column .scrollable .account-card__bio::after { - /* stylelint-disable-next-line */ background: linear-gradient(270deg, var(--color-bg), transparent); } @@ -3137,7 +3672,6 @@ body.embed .button.logo-button:hover, /* General fixes */ .layout-single-column .account__header__bar .avatar { - /* stylelint-disable-next-line */ margin-left: 0 !important; } @@ -3158,8 +3692,9 @@ body.embed .button.logo-button:hover, .notification-ungrouped--mention.notification-ungrouped--direct::after { border-left: 20px solid transparent; border-top: 20px solid var(--color-accent); + /* Add a ribbon to the corner */ - content: ''; + content: ""; height: 0; position: absolute; right: 0; @@ -3247,6 +3782,14 @@ body .compose-form .compose-form__uploads { color: var(--color-accent); } +/* Override new warning button color (.dropdown-button.warning), v4.4.0-alpha.4+mementomods-2025-05-03 */ +.layout-single-column .compose-form__dropdowns .dropdown-button.warning, +.layout-single-column .compose-form__dropdowns .dropdown-button.warning.active, +.layout-single-column .compose-form__dropdowns .dropdown-button.warning:hover, +.layout-single-column .compose-form__dropdowns .dropdown-button.warning:focus { + color: var(--color-yellow); +} + .layout-single-column .compose-form__submit { flex: unset; } @@ -3276,9 +3819,10 @@ body .compose-form .compose-form__uploads { } /* Add slight background color for the compose form */ -/* stylelint-disable-next-line no-duplicate-selectors */ .layout-single-column .compose-form .compose-form__highlightable, -.layout-single-column .compose-form__highlightable .compose-form__buttons-wrapper, +.layout-single-column + .compose-form__highlightable + .compose-form__buttons-wrapper, .layout-single-column .compose-form .compose-form__autosuggest-wrapper, .layout-single-column .compose-form .compose-form__buttons-wrapper { background-color: var(--color-bg-compose-form); @@ -3289,15 +3833,25 @@ body .compose-form .compose-form__uploads { /* Smooth color transition on focus */ .layout-single-column .compose-form .compose-form__highlightable:focus-within, -.layout-single-column .compose-form .compose-form__autosuggest-wrapper:focus-within, -.layout-single-column .compose-form .compose-form__autosuggest-wrapper:focus-within ~ .compose-form__buttons-wrapper, -.layout-single-column .compose-form__highlightable .compose-form__autosuggest-wrapper:focus-within ~ .compose-form__buttons-wrapper { +.layout-single-column + .compose-form + .compose-form__autosuggest-wrapper:focus-within, +.layout-single-column + .compose-form + .compose-form__autosuggest-wrapper:focus-within + ~ .compose-form__buttons-wrapper, +.layout-single-column + .compose-form__highlightable + .compose-form__autosuggest-wrapper:focus-within + ~ .compose-form__buttons-wrapper { background-color: var(--color-bg-compose-form-focus); border-color: var(--color-bg-compose-form-focus); } /* Fixes bottom row padding when there's a background */ -.layout-single-column .compose-form__highlightable .compose-form__buttons-wrapper, +.layout-single-column + .compose-form__highlightable + .compose-form__buttons-wrapper, .layout-single-column .compose-form .compose-form__buttons-wrapper { padding: calc(var(--gap-default) / 2); } @@ -3321,9 +3875,7 @@ body .compose-form .compose-form__uploads { /* Tertiary button */ .layout-single-column .button.button-tertiary { - /* stylelint-disable-next-line */ background-color: transparent !important; - /* stylelint-disable-next-line */ border: 1px solid var(--color-accent-dark) !important; color: var(--color-ghost-button-text); padding: 6px 17px; @@ -3337,14 +3889,12 @@ body .compose-form .compose-form__uploads { /* Secondary button */ .layout-single-column .button.button-secondary { - /* stylelint-disable-next-line */ background-color: transparent; border: 1px solid var(--color-dim); color: var(--color-dim); } .layout-single-column .button.button-secondary:hover { - /* stylelint-disable-next-line */ background-color: var(--color-light-text); border-color: var(--color-light-text); color: var(--color-bg); @@ -3352,11 +3902,8 @@ body .compose-form .compose-form__uploads { .layout-single-column .button.button-tertiary:focus, .layout-single-column .button.button-tertiary:hover { - /* stylelint-disable-next-line */ background-color: var(--color-brand-mastodon-links) !important; - /* stylelint-disable-next-line */ border-color: var(--color-brand-mastodon-links) !important; - /* stylelint-disable-next-line */ color: var(--color-bg) !important; /* This is actually wrong in Mastodon default UI as well, hover should not have padding but yet it has */ @@ -3391,21 +3938,17 @@ body .compose-form .compose-form__uploads { .layout-single-column .status__action-bar .icon-button { /* It's inlined so we have to use !important */ - /* stylelint-disable-next-line */ height: 24px !important; - /* stylelint-disable-next-line */ min-width: 45.78px !important; position: relative; + /* It's inlined so we have to use !important */ - /* stylelint-disable-next-line */ width: unset !important; } /* Fix reply button not starting from the beginning */ .layout-single-column .status__action-bar .icon-button:nth-of-type(1) { - /* stylelint-disable-next-line */ min-width: 42.22px !important; - /* stylelint-disable-next-line */ width: 42.22px !important; } @@ -3413,17 +3956,16 @@ body .compose-form .compose-form__uploads { transform: translateX(4px) translateY(2px); } -.layout-single-column .status__action-bar .icon-button.icon-button--with-counter::after, -.layout-single-column .status__action-bar .icon-button.icon-button--with-counter:first-of-type::after { +.layout-single-column + .status__action-bar + .icon-button.icon-button--with-counter::after, +.layout-single-column + .status__action-bar + .icon-button.icon-button--with-counter:first-of-type::after { transform: translateX(-5px) translateY(1px); } -.layout-single-column .navigation-panel__menu { - display: flex; - flex-wrap: wrap; -} - -@media screen and (max-height: 980px) { +@media screen and (height <= 980px) { .navigation-panel .column-link.column-link--optional { display: none; } @@ -3446,26 +3988,88 @@ body .compose-form .compose-form__uploads { order: 4; } -@media screen and (min-width: 890px) { +@media screen and (width >= 760px) { /* Hide the space between Lists and the actual lists */ .layout-single-column .list-panel > hr, .layout-single-column .list-panel + hr { display: none; } + .layout-single-column .account__header__bar .avatar .account__avatar { + /* It's inlined so we have to use !important */ + height: 133.5px !important; + + /* It's inlined so we have to use !important */ + width: 133.5px !important; + } + .layout-single-column .navigation-panel__menu { align-items: flex-start; display: flex; flex: unset; flex-wrap: wrap; gap: 0; - overflow: visible; + overflow-y: auto; position: relative; } + .layout-single-column .navigation-panel__menu::-webkit-scrollbar { + border-radius: 50px; + height: 4px; + width: 4px; + } + + .layout-single-column .navigation-panel__menu::-webkit-scrollbar-thumb { + background-color: var(--color-border); + border: 0 solid var(--color-border); + border-radius: 50px; + } + + .layout-single-column .navigation-panel__menu::-webkit-scrollbar-track { + background-color: var(--color-bg); + border: 0 solid var(--color-border); + border-radius: 0; + margin-bottom: 40vh; + margin-top: 40px; + } + + .layout-single-column .navigation-panel__menu::-webkit-scrollbar-thumb:hover { + background-color: var(--color-black-coral); + } + + .layout-single-column + .navigation-panel__menu::-webkit-scrollbar-thumb:active { + background-color: var(--color-light-purple); + } + + .layout-single-column .navigation-panel__menu::-webkit-scrollbar-corner { + background-color: transparent; + } + + .layout-single-column .column-link { + font-size: 18px; + } + + .layout-single-column + .navigation-panel__list-panel + .navigation-panel__list-panel__items + .column-link { + --gap-column-link: 8px; + font-size: 16px; + } + + .layout-single-column + .navigation-panel__list-panel + .navigation-panel__list-panel__items + .column-link + > span::before { + margin-left: 25px; + } + /* Hide lists if there's not enough space on desktop vertically */ .layout-single-column .list-panel { opacity: 0; + order: 22; transition: all 200ms; } @@ -3501,7 +4105,7 @@ body .compose-form .compose-form__uploads { order: 7; } - .layout-single-column .column-link[href='/follow_requests'] { + .layout-single-column .column-link[href="/follow_requests"] { order: 8; } @@ -3517,6 +4121,7 @@ body .compose-form .compose-form__uploads { order: 11; } + .layout-single-column .navigation-panel__list-panel, .layout-single-column .column-link[href="/lists"] { order: 16; } @@ -3529,37 +4134,41 @@ body .compose-form .compose-form__uploads { order: 12; } - /* stylelint-disable-next-line no-duplicate-selectors */ - .layout-single-column .list-panel { - order: 22; - } - .layout-single-column .column-link[href="/settings/preferences"] { order: 11; } .layout-single-column .navigation-panel__sign-in-banner, .layout-single-column .navigation-panel__legal { - order: 14; + order: 66; + } + + .layout-single-column .navigation-panel__legal { + width: 100%; + } + + .layout-single-column .navigation-panel hr { + visibility: visible; } .layout-single-column .getting-started__trends { order: 16; } + .layout-single-column button.column-link { + order: 18; + } + .layout-single-column .status__action-bar .icon-button { - /* stylelint-disable-next-line */ height: 24px !important; position: relative; + /* It's inlined so we have to use !important */ - /* stylelint-disable-next-line */ width: 50px !important; } .layout-single-column .conversation .status__action-bar .icon-button { - /* It's inlined so we have to use !important */ - /* stylelint-disable-next-line */ width: auto !important; } @@ -3569,6 +4178,19 @@ body .compose-form .compose-form__uploads { } } +/* New lists panel in v4.4.0-beta.1+mementomods-2025-06-14 */ +.layout-single-column .navigation-panel__list-panel__header { + .column-link { + order: 1; + } + + .icon-button { + order: 2; + position: absolute; + right: 0; + } +} + /* Replace bookmark icon */ .layout-single-column .status .icon-button:hover:focus .icon-bookmark, .layout-single-column .status .icon-button:focus .icon-bookmark, @@ -3584,17 +4206,17 @@ body .compose-form .compose-form__uploads { ------------------------------------------- /* Set size for the filter bar and profile icons */ -/* stylelint-disable-next-line */ -.layout-single-column .account__header__tabs__buttons .icon, + +.layout-single-column .account__header__buttons .icon, .layout-single-column .notification__filter-bar .icon { --size-icon: 20px; } /* Set size for the column link icons */ .layout-single-column .column-link .icon { - --size-icon: 24px; - height: 26px; - width: 26px; + --size-icon: 22px; + height: 22px; + width: 22px; } /* Set size for the status icons */ @@ -3604,11 +4226,13 @@ body .compose-form .compose-form__uploads { } /* General for all column icons */ -/* stylelint-disable-next-line */ -.layout-single-column .notification-group--favourite .notification__message > .icon, +.layout-single-column + .notification-group--favourite + .notification__message + > .icon, .layout-single-column .notification-favourite .notification__message > .icon, .layout-single-column .notification-reblog .notification__message > .icon, -.layout-single-column .account__header__tabs__buttons .icon, +.layout-single-column .account__header__buttons .icon, .layout-single-column .detailed-status__action-bar .icon, .layout-single-column .status__action-bar .icon, .layout-single-column .notification__filter-bar .icon, @@ -3618,7 +4242,6 @@ body .compose-form .compose-form__uploads { position: relative; } -/* stylelint-disable-next-line */ .layout-single-column .list-adder__lists .icon-plus, .layout-single-column .list-adder__lists .icon-times, .layout-single-column .detailed-status__action-bar .icon, @@ -3631,7 +4254,7 @@ body .compose-form .compose-form__uploads { width: var(--size-icon); } -.layout-single-column .account__header__tabs__buttons .icon { +.layout-single-column .account__header__buttons .icon { background-position: center; background-size: var(--size-icon) var(--size-icon); } @@ -3644,27 +4267,51 @@ body .compose-form .compose-form__uploads { } /* Hide the original icon from behind */ +.layout-single-column .ui__navigation-bar__item[href="/home"] svg path, +.layout-single-column .ui__navigation-bar__item[href="/notifications"] svg path, +.layout-single-column .ui__navigation-bar__item[href="/explore"] svg path, .layout-single-column .list-adder__lists .icon-plus > path, .layout-single-column .list-adder__lists .icon-times > path, .layout-single-column .list-adder__lists .list__display-name svg > path, .layout-single-column .status__prepend .icon.icon-retweet path, -.layout-single-column .notification-group--reblog > .notification-group__icon > .icon path, +.layout-single-column + .notification-group--reblog + > .notification-group__icon + > .icon + path, .layout-single-column .notification-reblog .notification__message > .icon path, -.layout-single-column .notification-group--favourite > .notification-group__icon > .icon path, -.layout-single-column .notification-group--favourite .notification__message > .icon path, -.layout-single-column .notification-favourite .notification__message > .icon path, -.layout-single-column .account__header__tabs__buttons .icon path, +.layout-single-column + .notification-group--favourite + > .notification-group__icon + > .icon + path, +.layout-single-column + .notification-group--favourite + .notification__message + > .icon + path, +.layout-single-column + .notification-favourite + .notification__message + > .icon + path, +.layout-single-column .account__header__buttons .icon path, .layout-single-column .detailed-status__action-bar .icon path, .layout-single-column .notification__filter-bar .icon path, .layout-single-column .status__action-bar path, .layout-single-column .column-link .icon path, .layout-single-column .load-more path, -.layout-single-column .account__domain-pill__popout__parts > div:nth-child(2) path, +.layout-single-column + .account__domain-pill__popout__parts + > div:nth-child(2) + path, .layout-single-column .column-header__button .icon-sliders > path, .compose-form .icon-close > path, .layout-single-column .item-list .lists__item__title path, .layout-single-column .lists__item .icon-button.active path, -.layout-single-column .dialog-modal__content .lists__item__title path { +.layout-single-column .dialog-modal__content .lists__item__title path, +.layout-single-column .hashtag-header__header__buttons .icon > path, +.layout-single-column .lists__item .icon-button svg > path { display: none; } @@ -3672,18 +4319,26 @@ body .compose-form .compose-form__uploads { .layout-single-column .icon-user-plus.column-link__icon path, .layout-single-column .icon.icon-undefined path, .layout-single-column .icon.icon-users path, -.layout-single-column .account__header__tabs__buttons .icon.icon-user-plus path, +.layout-single-column .account__header__buttons .optional path, +.layout-single-column .account__header__buttons .icon.icon-user-plus path, .layout-single-column .notification__filter-bar .icon.icon-user-plus path, -.layout-single-column .account__header__tabs__buttons .icon.icon-tasks path, -.layout-single-column .notification__filter-bar .icon.icon-tasks path { +.layout-single-column .account__header__buttons .icon.icon-tasks path, +.layout-single-column .notification__filter-bar .icon.icon-tasks path, +body .navigation-panel__legal .column-link[href="/about"] path { display: block; } +body .navigation-panel__legal .column-link[href="/about"] svg { + background-image: none; +} + /* Home icon */ +.layout-single-column .ui__navigation-bar__item[href="/home"] .icon, .layout-single-column .column-link .icon-home { background-image: var(--icon-home); } +.layout-single-column .ui__navigation-bar__item[href="/home"].active .icon, .layout-single-column .column-link.active .icon-home { background-image: var(--icon-home-column-link-active); } @@ -3715,22 +4370,27 @@ body .compose-form .compose-form__uploads { } /* Notifications icon */ +.layout-single-column .ui__navigation-bar__item[href="/notifications"] .icon, .layout-single-column .icon.icon-bell-o, .layout-single-column .column-link .icon-bell { background-image: var(--icon-bell); } -.layout-single-column .active .icon.icon-bell, +.layout-single-column + .ui__navigation-bar__item[href="/notifications"].active + .icon, .layout-single-column .column-link.active .icon-bell { background-image: var(--icon-bell-active); } /* Explore icon */ +.layout-single-column .ui__navigation-bar__item[href="/explore"] .icon, .layout-single-column .column-link .icon-explore, .layout-single-column .column-link .icon-hashtag { background-image: var(--icon-hashtag); } +.layout-single-column .ui__navigation-bar__item[href="/explore"].active .icon, .layout-single-column .column-link.active .icon-explore, .layout-single-column .column-link.active .icon-hashtag { background-image: var(--icon-hashtag-active); @@ -3766,7 +4426,7 @@ body .compose-form .compose-form__uploads { /* Preferences icon */ .layout-single-column .column-link .icon-cog { - --size-icon: 24px; + --size-icon: 22px; background-image: var(--icon-sliders-contrast); } @@ -3786,13 +4446,13 @@ body .compose-form .compose-form__uploads { /* Administration icon */ .layout-single-column .column-link .icon-tachometer { - --size-icon: 24px; + --size-icon: 22px; background-image: var(--icon-administration); } /* Moderation icon */ .layout-single-column .column-link .icon-flag { - --size-icon: 24px; + --size-icon: 22px; background-image: var(--icon-moderation); } @@ -3824,7 +4484,6 @@ body .compose-form .compose-form__uploads { background-image: var(--icon-boost-notification-wrapper); } -/* stylelint-disable-next-line */ .layout-single-column button.icon-button .icon-retweet { --size-icon: 20px; background-image: var(--icon-boost); @@ -3840,6 +4499,7 @@ body .compose-form .compose-form__uploads { } /* Un-boost and un-bookmark styles */ + /* Mobile devices */ .layout-single-column button.icon-button:not(.active):focus .icon-retweet, .layout-single-column button.icon-button:not(.active):hover .icon-retweet { @@ -3847,14 +4507,26 @@ body .compose-form .compose-form__uploads { background-image: var(--icon-boost); } -.layout-single-column .status button.icon-button:not(.active):focus .icon-bookmark, -.layout-single-column .status button.icon-button:not(.active):hover .icon-bookmark { +.layout-single-column + .status + button.icon-button:not(.active):focus + .icon-bookmark, +.layout-single-column + .status + button.icon-button:not(.active):hover + .icon-bookmark { background-image: var(--icon-bookmark); } /* Un-boost and un-bookmark numbers on explore page */ -.layout-single-column button.icon-button:not(.active):focus .icon-retweet ~ span, -.layout-single-column button.icon-button:not(.active):hover .icon-retweet ~ span { +.layout-single-column + button.icon-button:not(.active):focus + .icon-retweet + ~ span, +.layout-single-column + button.icon-button:not(.active):hover + .icon-retweet + ~ span { color: var(--color-dim); } @@ -3867,17 +4539,21 @@ body .compose-form .compose-form__uploads { /* If a hover device */ @media (hover: hover) { .layout-single-column button.icon-button:not(.active):hover .icon-retweet, - .layout-single-column button.icon-button:not(.active):hover .icon-retweet ~ span { + .layout-single-column + button.icon-button:not(.active):hover + .icon-retweet + ~ span { color: var(--color-green); } - .layout-single-column .status button.icon-button:not(.active):hover .icon-bookmark { - /* stylelint-disable-next-line */ + .layout-single-column + .status + button.icon-button:not(.active):hover + .icon-bookmark { background-image: var(--icon-bookmark-status-hover-red); } .layout-single-column button.icon-button:not(.active):hover .icon-retweet { - /* stylelint-disable-next-line */ background-image: var(--icon-boost-active) !important; } } @@ -3920,9 +4596,18 @@ body .compose-form .compose-form__uploads { background-image: var(--icon-reply-detailed-status-action-bar); } -.layout-single-column .detailed-status__action-bar .icon-button:hover .icon-mail-reply, -.layout-single-column .detailed-status__action-bar .icon-button:hover .icon-reply, -.layout-single-column .detailed-status__action-bar .icon-button:hover .icon-reply-all { +.layout-single-column + .detailed-status__action-bar + .icon-button:hover + .icon-mail-reply, +.layout-single-column + .detailed-status__action-bar + .icon-button:hover + .icon-reply, +.layout-single-column + .detailed-status__action-bar + .icon-button:hover + .icon-reply-all { background-image: var(--icon-reply-detailed-status-action-bar-hover); } @@ -3934,11 +4619,17 @@ body .compose-form .compose-form__uploads { background-image: var(--icon-bookmark-detailed-status-action-bar); } -.layout-single-column .detailed-status__action-bar .icon-button:hover .icon-bookmark { +.layout-single-column + .detailed-status__action-bar + .icon-button:hover + .icon-bookmark { background-image: var(--icon-bookmark-detailed-status-action-bar-hover); } -.layout-single-column .detailed-status__action-bar .icon-button.active .icon-bookmark { +.layout-single-column + .detailed-status__action-bar + .icon-button.active + .icon-bookmark { background-image: var(--icon-bookmark-detailed-status-action-bar-active); } @@ -3957,10 +4648,15 @@ body .compose-form .compose-form__uploads { /* "More" icon */ .layout-single-column .icon-ellipsis-h { background-image: var(--icon-more-status-action-bar); + background-position: center; + background-repeat: no-repeat; } +.layout-single-column .column-link .icon.icon-.column-link__icon, .layout-single-column .icon-ellipsis-v { background-image: var(--icon-more); + background-position: center; + background-repeat: no-repeat; } .layout-single-column .icon-search { @@ -3985,296 +4681,6 @@ body .compose-form .compose-form__uploads { opacity: 1; } -/* iPad etc. */ -@media (max-width: 1174px) { - .layout-single-column .detailed-status__action-bar .icon-button::after, - .layout-single-column .status__action-bar .icon-button::after, - .layout-single-column .detailed-status__action-bar-dropdown .icon-button::after { - display: none; - } - - .layout-single-column .ui__header, - .layout-single-column .columns-area__panels__main > div.tabs-bar__wrapper, - .layout-single-column .tabs-bar__wrapper { - backdrop-filter: unset; - background-color: transparent; - border: 0; - padding: 0; - } - - /* Fix back button background on mobile */ - .app-body:not(.layout-multiple-columns):has(.column-back-button) .tabs-bar__wrapper::after { - background-color: var(--color-bg-90); - content: ""; - height: 50px; - left: 0; - position: absolute; - top: 0; - width: 100%; - z-index: -1; - } - - .layout-single-column .columns-area__panels__main { - width: calc(100% - var(--width-side-panel)); - } -} - -/* In-between breakpoint */ -@media (min-width: 889px) and (max-width: 1174px) { - .layout-single-column .columns-area__panels__main > div { - border-right: 0; - } - - .layout-single-column .ui__header, - .layout-single-column .columns-area__panels__main > div.tabs-bar__wrapper, - .layout-single-column .tabs-bar__wrapper { - backdrop-filter: blur(12px); - background-color: var(--color-bg-75); - border-color: var(--color-border); - } - - .layout-single-column .columns-area__panels { - width: calc(100% - 1px); - } - - .layout-single-column .columns-area__panels__main > .tabs-bar__wrapper { - border-right: 0; - } -} - -/* Mobile */ -@media screen and (max-width: 889px) { - - /* Better blur overlay for ui-header */ - .layout-single-column .ui::after { - backdrop-filter: blur(12px); - /* stylelint-disable-next-line */ - -webkit-backface-visibility: hidden; - background-color: var(--color-bg-75); - content: ''; - /* Height is .ui__header + .tabs-bar__wrapper */ - height: calc(48px + 56px); - left: 0; - position: fixed; - top: 0; - width: 100%; - z-index: 1; - } - - /* Fix navigation-bar getting underneath layer */ - .layout-single-column .navigation-bar { - z-index: 2; - } - - .layout-single-column .tabs-bar__wrapper { - margin-right: 0; - position: sticky; - top: 55px; - z-index: 2; - } - - .layout-single-column .columns-area__panels__main { - order: 1; - position: unset; - width: 100%; - } - - .layout-single-column .columns-area__panels { - flex-direction: column; - justify-content: flex-start; - } - - .layout-single-column .columns-area__panels__main::-webkit-scrollbar { - display: none; - } - - .layout-single-column .columns-area__panels__pane--navigational .columns-area__panels__pane__inner { - background-color: var(--color-bg); - border-top: 1px solid var(--color-border); - bottom: 0; - height: 3.5rem; - left: 0; - max-height: 16vh; - width: 100vw; - } - - .layout-single-column .columns-area__panels__pane--navigational .navigation-panel { - display: block; - padding: 0; - } - - .layout-single-column .columns-area__panels__pane--navigational .navigation-panel .flex-spacer { - display: none; - } - - .layout-single-column .columns-area__panels__pane--navigational .navigation-panel__menu { - flex-direction: row; - flex-wrap: nowrap; - gap: 0; - height: 100%; - overflow-x: auto; - overflow-y: hidden; - padding: 0; - } - - .layout-single-column .column-link { - align-items: center; - height: 56px; - justify-content: center; - margin-right: unset; - padding-bottom: 0; - padding-left: var(--gap-column-link); - padding-right: var(--gap-column-link); - padding-top: 0; - width: 38px; - } - - .navigation-panel__legal hr { - display: none; - } - - .layout-single-column .item-list .column-link { - height: auto; - justify-content: flex-start; - padding-bottom: 4px; - padding-left: 4px; - padding-top: 4px; - width: unset; - } - - .layout-single-column .column-link:hover, - .layout-single-column .column-link:focus { - /* stylelint-disable-next-line */ - background-color: transparent !important; - } - - .columns-area__panels__pane--navigational .column-link__icon.icon-home { - font-size: 27px; - } - - .columns-area__panels__pane--navigational .column-link__icon.icon-ellipsis-h { - background-image: var(--icon-more); - position: relative; - } - - .layout-single-column .columns-area__panels__main > div, - .layout-single-column .columns-area__panels__main > div.columns-area.columns-area--mobile { - border: 0; - } - - .layout-single-column .ui__header { - align-items: center; - border-bottom: 0; - box-sizing: border-box; - display: flex; - height: 56px; - justify-content: space-between; - position: sticky; - top: 0; - width: 100%; - z-index: 2; - } - - .layout-single-column .account__header__bar .avatar .account__avatar { - /* It's inlined so we have to use !important */ - /* stylelint-disable-next-line */ - height: 106px !important; - - /* It's inlined so we have to use !important */ - /* stylelint-disable-next-line */ - width: 106px !important; - } - - .layout-single-column .account__header__image { - height: 157px; - } - - .layout-single-column .column > .scrollable { - padding-bottom: 55px; - } - - .layout-single-column .actions-modal ul li:not(:empty) a { - color: var(--color-light-text); - } - - /* "Your lists" view */ - .layout-single-column .column-subheading ~ article { - padding-bottom: calc(var(--gap-default) / 2); - padding-top: calc(var(--gap-default) / 2); - } - - .layout-single-column .compose-form { - padding-bottom: calc(3.5rem + calc(var(--gap-default) * 2)); - } - - /* Column items order */ - .layout-single-column .navigation-panel .column-link, - .layout-single-column .navigation-panel .list-panel, - .layout-single-column .navigation-panel hr, - .layout-single-column .navigation-panel .navigation-panel__logo { - order: 99; - } - - /* Make the column link 1/4 of width of the screen */ - .layout-single-column .navigation-panel .navigation-panel__legal, - .layout-single-column .navigation-panel .column-link { - border: 0; - flex: 0 0 calc(100vw / 4); - margin-inline: 0; - padding: 0; - padding-inline: 0; - } - - .layout-single-column .navigation-panel .navigation-panel__legal { - display: flex; - justify-content: center; - order: 999; - text-align: center; - } - - /* Home */ - .layout-single-column .column-link[href="/home"] { - order: 1; - } - - /* Explore */ - .layout-single-column .column-link[href="/explore"] { - order: 2; - } - - /* Notifications */ - .layout-single-column .column-link[href="/notifications"] { - order: 3; - } - - /* Lists */ - .layout-single-column .column-link[href="/lists"] { - order: 4; - } - - /* Fix "About" page's server thumbnail margins */ - .about__header__hero { - margin-top: 30px; - } -} - -/* Add bottom padding to the navigation panel for the - Safari PWA on iPhones with the portrait mode home bar */ -@media screen and (device-width: 375px) and (device-height: 812px) and (min-resolution: 2dppx) and (orientation: portrait) and (display-mode: standalone), /* iPhone 12, iPhone 12 Pro, iPhone 13, iPhone 13 Pro, and iPhone 14 */ screen and (device-width: 390px) and (device-height: 844px) and (min-resolution: 3dppx) and (orientation: portrait) and (display-mode: standalone), /* iPhone 14 Pro */ screen and (device-width: 393px) and (device-height: 852px) and (min-resolution: 3dppx) and (orientation: portrait) and (display-mode: standalone), /* iPhone XR and iPhone 11 */ screen and (device-width: 414px) and (device-height: 896px) and (min-resolution: 2dppx) and (orientation: portrait) and (display-mode: standalone), /* iPhone Xs Max and iPhone 11 Pro Max */ screen and (device-width: 414px) and (device-height: 896px) and (min-resolution: 3dppx) and (orientation: portrait) and (display-mode: standalone), /* iPhone 12 Pro Max, iPhone 13 Pro Max, and iPhone 14 Plus */ screen and (device-width: 428px) and (device-height: 926px) and (min-resolution: 3dppx) and (orientation: portrait) and (display-mode: standalone), /* iPhone 14 Pro Max */ screen and (device-width: 430px) and (device-height: 932px) and (min-resolution: 3dppx) and (orientation: portrait) and (display-mode: standalone) { - .layout-single-column .columns-area__panels__pane--navigational .columns-area__panels__pane__inner { - padding-bottom: 26px; - } -} - -/* stylelint-disable media-feature-name-no-vendor-prefix */ -/* Fixes for iPhone Safari + iPhone Safari PWA */ -@media screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait), /* iPhone 12, iPhone 12 Pro, iPhone 13, iPhone 13 Pro, and iPhone 14 */ screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait), /* iPhone 14 Pro */ screen and (device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait), /* iPhone XR and iPhone 11 */ screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait), /* iPhone Xs Max and iPhone 11 Pro Max */ screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait), /* iPhone 12 Pro Max, iPhone 13 Pro Max, and iPhone 14 Plus */ screen and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait), /* iPhone 14 Pro Max */ screen and (device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) { - /* Fix top header overlapping in /publish on iPhone */ - .layout-single-column .columns-area--mobile:has(.compose-form) { - top: 34px; - } -} - .layout-single-column .detailed-status__action-bar .icon-button { min-width: 24px; position: relative; @@ -4307,9 +4713,15 @@ body .compose-form .compose-form__uploads { } /* Hide autoplaying gifs in notifications (they get annoying if you have favs/boosts on) */ -.layout-single-column .notification.notification-reblog .media-gallery:has(.media-gallery__gifv.autoplay), -.layout-single-column .notification-group--favourite .media-gallery:has(.media-gallery__gifv.autoplay), -.layout-single-column .notification.notification-favourite .media-gallery:has(.media-gallery__gifv.autoplay) { +.layout-single-column + .notification.notification-reblog + .media-gallery:has(.media-gallery__gifv.autoplay), +.layout-single-column + .notification-group--favourite + .media-gallery:has(.media-gallery__gifv.autoplay), +.layout-single-column + .notification.notification-favourite + .media-gallery:has(.media-gallery__gifv.autoplay) { display: none; } @@ -4321,23 +4733,19 @@ body .compose-form .compose-form__uploads { /* Embeds outside Mastodon */ body.embed { - /* stylelint-disable-next-line */ background-color: #0e1014 !important; + /* Make sure with !important */ - /* stylelint-disable-next-line */ border: 0; - /* stylelint-disable-next-line */ overflow: hidden !important; } body.embed .entry .detailed-status { backface-visibility: hidden; background-color: #00000059; - /* stylelint-disable-next-line */ border: 0 !important; /* It's inlined so we have to use !important */ - /* stylelint-disable-next-line */ border-radius: 0 !important; overflow: hidden; } @@ -4375,17 +4783,33 @@ body.embed .entry .detailed-status { } /* Default lines when replying in real time */ -.layout-single-column div[tabindex="-1"]:has(.status--in-thread) .status--in-thread:not(.status--first-in-thread) > .status__line:not(.status__line--full) { +.layout-single-column + div[tabindex="-1"]:has(.status--in-thread) + .status--in-thread:not(.status--first-in-thread) + > .status__line:not(.status__line--full) { height: 0; } /* Hide line before first in thread */ -.layout-single-column div[tabindex="-1"]:has(.status--in-thread) + div[tabindex="-1"] > .status--in-thread.status--first-in-thread > .status__line:not(.status__line--full), -.layout-single-column div[tabindex="-1"]:has(.detailed-status__wrapper) + div[tabindex="-1"] > .status__wrapper .status__line:not(.status__line--full) { +.layout-single-column + div[tabindex="-1"]:has(.status--in-thread) + + div[tabindex="-1"] + > .status--in-thread.status--first-in-thread + > .status__line:not(.status__line--full), +.layout-single-column + div[tabindex="-1"]:has(.detailed-status__wrapper) + + div[tabindex="-1"] + > .status__wrapper + .status__line:not(.status__line--full) { height: 0; } -.layout-single-column div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.status--in-thread > .status__line.status__line--full, +.layout-single-column + div[tabindex="-1"] + + div[tabindex="-1"] + > .status__wrapper + > .status-reply.status--in-thread + > .status__line.status__line--full, .layout-single-column .status__line--full.status__line--first { height: 100%; z-index: -1; @@ -4406,9 +4830,17 @@ body.embed .entry .detailed-status { } /* Hide the "stub" from the first status line */ -div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.status--in-thread > .status__line.status__line--full, -.layout-single-column .status-reply.status--in-thread.status--first-in-thread > .status__line, -.layout-single-column .status-reply.status--in-thread.status--first-in-thread > .status__line--full::before { +div[tabindex="-1"] + + div[tabindex="-1"] + > .status__wrapper + > .status-reply.status--in-thread + > .status__line.status__line--full, +.layout-single-column + .status-reply.status--in-thread.status--first-in-thread + > .status__line, +.layout-single-column + .status-reply.status--in-thread.status--first-in-thread + > .status__line--full::before { top: 32px; } @@ -4434,13 +4866,14 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .layout-single-column .reply-indicator::-webkit-scrollbar-thumb, .layout-single-column::-webkit-scrollbar-thumb { background-color: var(--color-border); - border: 0px solid var(--color-border); + border: 0 solid var(--color-border); border-radius: 50px; } *::-webkit-scrollbar-thumb:hover, .layout-single-column textarea::-webkit-scrollbar-thumb:hover, -.layout-single-column .autosuggest-textarea__textarea::-webkit-scrollbar-thumb:hover, +.layout-single-column + .autosuggest-textarea__textarea::-webkit-scrollbar-thumb:hover, .layout-single-column .reply-indicator::-webkit-scrollbar-thumb:hover, .layout-single-column::-webkit-scrollbar-thumb:hover { background-color: var(--color-light-purple); @@ -4448,7 +4881,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu *::-webkit-scrollbar-thumb:active, .layout-single-column textarea::-webkit-scrollbar-thumb:active, -.layout-single-column .autosuggest-textarea__textarea::-webkit-scrollbar-thumb:active, +.layout-single-column + .autosuggest-textarea__textarea::-webkit-scrollbar-thumb:active, .layout-single-column .reply-indicator::-webkit-scrollbar-thumb:active, .layout-single-column::-webkit-scrollbar-thumb:active { background-color: var(--color-black-coral); @@ -4460,19 +4894,21 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .layout-single-column .reply-indicator::-webkit-scrollbar-track, .layout-single-column::-webkit-scrollbar-track { background-color: var(--color-bg); - border: 0px solid var(--color-border); + border: 0 solid var(--color-border); border-radius: 0; } .layout-single-column textarea::-webkit-scrollbar-track:hover, -.layout-single-column .autosuggest-textarea__textarea::-webkit-scrollbar-track:hover, +.layout-single-column + .autosuggest-textarea__textarea::-webkit-scrollbar-track:hover, .layout-single-column .reply-indicator::-webkit-scrollbar-track:hover, .layout-single-column::-webkit-scrollbar-track:hover { background-color: var(--color-bg); } .layout-single-column textarea::-webkit-scrollbar-track:active, -.layout-single-column .autosuggest-textarea__textarea::-webkit-scrollbar-track:active, +.layout-single-column + .autosuggest-textarea__textarea::-webkit-scrollbar-track:active, .layout-single-column .reply-indicator::-webkit-scrollbar-track:active, .layout-single-column::-webkit-scrollbar-track:active { background-color: var(--color-bg); @@ -4543,12 +4979,16 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } /* Hide search (can be found under Explore in the mobile */ -.layout-single-column .ui__header__links .button.button-secondary[href="/search"] { +.layout-single-column + .ui__header__links + .button.button-secondary[href="/search"] { display: none; } /* More compact compose button on mobile */ -.layout-single-column .ui__header__links .button.button-secondary[href="/publish"] { +.layout-single-column + .ui__header__links + .button.button-secondary[href="/publish"] { background-color: var(--color-accent-dark); background-image: var(--icon-compose); background-position: center; @@ -4561,27 +5001,38 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu width: 45px; } -.layout-single-column .ui__header__links .button.button-secondary[href="/publish"]:is(:hover, :focus, :active) { +.layout-single-column + .ui__header__links + .button.button-secondary[href="/publish"]:is(:hover, :focus, :active) { background-color: var(--color-accent-dark-50); color: var(--color-light-purple); } -.layout-single-column .ui__header__links .button.button-secondary[href="/publish"] span { +.layout-single-column + .ui__header__links + .button.button-secondary[href="/publish"] + span { color: transparent; } /* Header on mobile */ -@media screen and (max-width: 1174px) { +@media screen and (width <= 1174px) { .app-body:not(.layout-multiple-columns) .ui__header .ui__header__logo { margin-left: 3px; } - /* stylelint-disable-next-line */ - .app-body:not(.layout-multiple-columns):not(:has(.ui .ui__header__links > .button[href="/auth/sign_in"])) .tabs-bar__wrapper { + .app-body:not(.layout-multiple-columns):not( + :has(.ui .ui__header__links > .button[href="/auth/sign_in"]) + ) + .tabs-bar__wrapper { z-index: 3; } - .app-body:not(.layout-multiple-columns):has(.ui .ui__header__links > .button[href="/auth/sign_in"]) .tabs-bar__wrapper :is(.column-back-button, .column-header > *) { + .app-body:not(.layout-multiple-columns):has( + .ui .ui__header__links > .button[href="/auth/sign_in"] + ) + .tabs-bar__wrapper + :is(.column-back-button, .column-header > *) { display: none; } @@ -4600,7 +5051,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu z-index: 5; } - .app-body:not(.layout-multiple-columns):has(.column-header) .tabs-bar__wrapper::after { + .app-body:not(.layout-multiple-columns):has(.column-header) + .tabs-bar__wrapper::after { background-color: var(--color-bg-90); content: ""; height: 49px; @@ -4624,7 +5076,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-color: var(--color-bg-90); } - .app-body:not(.layout-multiple-columns) .column-header__collapsible:not(.collapsed) { + .app-body:not(.layout-multiple-columns) + .column-header__collapsible:not(.collapsed) { border-bottom: 0; } } @@ -4649,11 +5102,13 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu top: -10px; } -@media screen and (min-width: 1175px) { +@media screen and (width >= 1175px) { /* Fade in list panel, thanks for the idea @nileane@nileane.fr! https://github.com/nileane/TangerineUI-for-Mastodon */ - .layout-single-column .column-link[href="/lists"]:is(.active, :hover) + .list-panel, + .layout-single-column + .column-link[href="/lists"]:is(.active, :hover) + + .list-panel, .layout-single-column .list-panel:hover { - animation: fadein .4s 1; + animation: fadein 0.4s 1; } } @@ -4706,7 +5161,10 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-image: var(--icon-heart-active); } -.layout-single-column .detailed-status__action-bar .active:not(.activated) .icon-star, +.layout-single-column + .detailed-status__action-bar + .active:not(.activated) + .icon-star, .layout-single-column .status__action-bar .active:not(.activated) .icon-star { background-image: var(--icon-heart-active-red); } @@ -4717,7 +5175,10 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu color: var(--color-red); } -.layout-single-column .detailed-status__action-bar .icon-button:hover .icon-star, +.layout-single-column + .detailed-status__action-bar + .icon-button:hover + .icon-star, .layout-single-column .detailed-status button.icon-button:hover .icon-star, .layout-single-column .status button.icon-button:hover .icon-star { background-image: var(--icon-heart-hover); @@ -4737,70 +5198,79 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* Disable default Mastodon animation: spring-rotate-in 1s linear; */ .layout-single-column.no-reduce-motion .icon-button.star-icon .icon-star { - /* stylelint-disable-next-line */ animation: none !important; } /* While active, hide the original icon */ -.layout-single-column.no-reduce-motion .icon-button.star-icon.activate:hover .icon-star { - /* stylelint-disable-next-line */ - content: '' !important; +.layout-single-column.no-reduce-motion + .icon-button.star-icon.activate:hover + .icon-star { + content: "" !important; } -.layout-single-column.no-reduce-motion .icon-button.star-icon.activate .icon-star { - /* stylelint-disable-next-line */ - background-image: url(data:image/png;base64,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) !important; - background-position: 0px; +.layout-single-column.no-reduce-motion + .icon-button.star-icon.activate + .icon-star { + background-image: url("data:image/png;base64,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") !important; + background-position: 0; background-repeat: no-repeat; background-size: unset; - /* stylelint-disable-next-line */ - content: '' !important; + content: "" !important; height: 100px; left: -38px; pointer-events: none; position: absolute; top: -37px; - transform: scale(.58); + transform: scale(0.58); width: 100px; } -@media (max-width: 890px) { - .layout-single-column.no-reduce-motion .icon-button.star-icon.activate .icon-star { +@media (width <= 890px) { + .layout-single-column.no-reduce-motion + .icon-button.star-icon.activate + .icon-star { top: -40px; } } @media (prefers-reduced-motion: no-preference) { - .layout-single-column.no-reduce-motion .icon-button.star-icon.activate .icon-star { + .layout-single-column.no-reduce-motion + .icon-button.star-icon.activate + .icon-star { /* 28 frames */ - /* stylelint-disable-next-line */ animation: heart-animate 0.8s steps(28) forwards !important; } } -/* stylelint-disable-next-line */ -.layout-single-column.no-reduce-motion .status .icon-button.star-icon.activate .icon-star { +.layout-single-column.no-reduce-motion + .status + .icon-button.star-icon.activate + .icon-star { left: -28px; } /* If number enabled in core */ -/* stylelint-disable-next-line */ -/* If number enabled in core */ -/* stylelint-disable-next-line */ -.layout-single-column.no-reduce-motion .status .icon-button.icon-button--with-counter.star-icon .icon-star { +.layout-single-column.no-reduce-motion + .status + .icon-button.icon-button--with-counter.star-icon + .icon-star { left: 0; margin-top: 1px; position: absolute; } -/* stylelint-disable-next-line */ -.layout-single-column.no-reduce-motion .status .icon-button.icon-button--with-counter.star-icon.activate .icon-star { +.layout-single-column.no-reduce-motion + .status + .icon-button.icon-button--with-counter.star-icon.activate + .icon-star { left: -40px; margin-top: -1px; position: absolute; } -.layout-single-column.no-reduce-motion .star-icon.icon-button--with-counter .icon-button__counter { +.layout-single-column.no-reduce-motion + .star-icon.icon-button--with-counter + .icon-button__counter { margin-left: 20px; } @@ -4808,18 +5278,123 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu z-index: 99; } -/* stylelint-disable-next-line */ -.layout-single-column.no-reduce-motion .detailed-status__action-bar .icon-button.star-icon.activate .icon-star { +.layout-single-column.no-reduce-motion + .detailed-status__action-bar + .icon-button.star-icon.activate + .icon-star { left: -29px; } -@media screen and (max-width: 889px) { - /* stylelint-disable-next-line */ - .layout-single-column.no-reduce-motion .status .icon-button.star-icon.activate .icon-star { +@media screen and (width <= 889px) { + .layout-single-column.no-reduce-motion + .status + .icon-button.star-icon.activate + .icon-star { left: -28px; } } +@media screen and (min-width: 760px) { + .layout-single-column + .columns-area__panels__pane--compositional + .columns-area__panels__pane__inner { + position: static; + } + + .layout-single-column + .columns-area__panels__pane--compositional + .columns-area__panels__pane__inner, + .compose-panel { + width: 100% !important; + } +} + +/* Make sure popouts stay on top */ +div[data-popper-placement] { + z-index: 99; +} + +/* New navigation bar for mobile in v4.4.0-beta.1+mementomods-2025-06-14 */ +body .columns-area__panels__pane { + z-index: 22; +} + +body .ui__navigation-bar { + background-color: var(--color-bg); +} + +.layout-single-column .ui__navigation-bar { + .icon { + background-position: center; + background-repeat: no-repeat; + background-size: 22px auto; + } +} + +.navigation-panel__compose-button { + align-self: center; + display: inline-flex; + font-size: 14px; + padding-bottom: 6px; + padding-left: 10px; + padding-right: 18px; + padding-top: 6px; +} + +/* Speed up animation in the new mobile slideout navigation for v4.4.0-beta.1 */ +body.layout-single-column .columns-area__panels__pane__inner, +body.layout-single-column .ui::after, +body.layout-single-column .ui__header, +body.layout-single-column .tabs-bar__wrapper, +body.layout-single-column.scroll-down .tabs-bar__portal { + transition-duration: 100ms; + transition-timing-function: linear; +} + +.ui__navigation-bar__sign-up { + gap: 12px; +} + +/* Hide separators in the new navigation panel, for now, v4.4.0-beta.2 */ +.navigation-panel__list-panel__header__sep { + display: none; +} + +/* Fix indent for the new navigation panel, v4.4.0-beta.2 */ +.navigation-panel__list-panel__items { + padding-inline-start: 40px; +} + +@media screen and (max-width: 759px) { + .columns-area__panels__pane--navigational + .columns-area__panels__pane__inner + .navigation-panel { + padding: 0; + + .column-link { + font-size: 16px; + padding-bottom: 1vh; + padding-top: 1vh; + } + + .icon { + background-position: center; + background-repeat: no-repeat; + background-size: 20px auto; + } + + hr { + max-width: 100%; + visibility: visible; + width: 100%; + } + + .navigation-panel__legal { + width: 100%; + } + } +} + /* * -------------------------------------- * Heart animation micro-interaction ends diff --git a/modules/nixos/guests/mastodon/default.nix b/modules/nixos/guests/mastodon/default.nix index 14a6dd3..5391572 100755 --- a/modules/nixos/guests/mastodon/default.nix +++ b/modules/nixos/guests/mastodon/default.nix @@ -52,16 +52,16 @@ in ${serviceCfg.name} = { enable = true; localDomain = host; - secretKeyBaseFile = "/run/mastodon-secrets/pass"; + secretKeyBaseFile = "/etc/mastodon-secrets/pass"; streamingProcesses = 7; - trustedProxy = hostCfg.localhost.address1; + trustedProxy = hostCfg.localhost.address0; automaticMigrations = true; database = { createLocally = true; name = serviceCfg.name; host = "/run/postgresql"; user = serviceCfg.name; - passwordFile = "/run/mastodon-secrets/database"; + passwordFile = "/etc/mastodon-secrets/database"; }; extraConfig = { SINGLE_USER_MODE = "true"; @@ -116,7 +116,7 @@ in createLocally = false; fromAddress = "upRootNutrition <${smtpCfg.email.address1}>"; host = smtpCfg.hostname; - passwordFile = "/run/mastodon-secrets/smtp"; + passwordFile = "/etc/mastodon-secrets/smtp"; port = smtpCfg.ports.port1; user = smtpCfg.email.address1; }; @@ -134,7 +134,10 @@ in } handle /api/v1/streaming/* { - reverse_proxy unix//run/mastodon-streaming/streaming.socket + reverse_proxy unix//run/mastodon-streaming/streaming.socket { + header_up X-Forwarded-Proto {http.request.header.X-Forwarded-Proto} + header_up X-Forwarded-Host {http.request.header.X-Forwarded-Host} + } } route * { @@ -142,7 +145,10 @@ in root ${pkgs.mastodon}/public pass_thru } - reverse_proxy * unix//run/mastodon-web/web.socket + reverse_proxy * unix//run/mastodon-web/web.socket { + header_up X-Forwarded-Proto {http.request.header.X-Forwarded-Proto} + header_up X-Forwarded-Host {http.request.header.X-Forwarded-Host} + } } handle_errors { @@ -198,57 +204,52 @@ in systemd = { services = { - systemd-networkd.wantedBy = [ "multi-user.target" ]; - mastodon-web.wantedBy = [ "multi-user.target" ]; - mastodon-streaming-1.wantedBy = [ "multi-user.target" ]; - mastodon-streaming-2.wantedBy = [ "multi-user.target" ]; - mastodon-streaming-3.wantedBy = [ "multi-user.target" ]; - mastodon-streaming-4.wantedBy = [ "multi-user.target" ]; - mastodon-streaming-5.wantedBy = [ "multi-user.target" ]; - mastodon-streaming-6.wantedBy = [ "multi-user.target" ]; - mastodon-streaming-7.wantedBy = [ "multi-user.target" ]; - mastodon-sidekiq-all.wantedBy = [ "multi-user.target" ]; - mastodon-sidekiq-default.wantedBy = [ "multi-user.target" ]; - mastodon-sidekiq-ingress.wantedBy = [ "multi-user.target" ]; - mastodon-sidekiq-mailers.wantedBy = [ "multi-user.target" ]; - mastodon-sidekiq-push-pull.wantedBy = [ "multi-user.target" ]; - mastodon-init-db = { - environment = { - DISABLE_BOOTSNAP = "1"; - }; + mastodon-init-dirs = { serviceConfig = { - TimeoutStartSec = "10min"; + PrivateMounts = lib.mkForce false; }; }; - copy-secrets-to-tmpfs = { - description = "Copy secrets from virtiofs to tmpfs"; - wantedBy = [ "multi-user.target" ]; + mastodon-web = { + serviceConfig = { + PrivateMounts = lib.mkForce false; + }; + }; + mastodon-streaming-1 = { + serviceConfig = { + PrivateMounts = lib.mkForce false; + }; + }; + mastodon-streaming-2.serviceConfig.PrivateMounts = lib.mkForce false; + mastodon-streaming-3.serviceConfig.PrivateMounts = lib.mkForce false; + mastodon-streaming-4.serviceConfig.PrivateMounts = lib.mkForce false; + mastodon-streaming-5.serviceConfig.PrivateMounts = lib.mkForce false; + mastodon-streaming-6.serviceConfig.PrivateMounts = lib.mkForce false; + mastodon-streaming-7.serviceConfig.PrivateMounts = lib.mkForce false; + mastodon-sidekiq-all.serviceConfig.PrivateMounts = lib.mkForce false; + mastodon-sidekiq-default.serviceConfig.PrivateMounts = lib.mkForce false; + mastodon-sidekiq-ingress.serviceConfig.PrivateMounts = lib.mkForce false; + mastodon-sidekiq-mailers.serviceConfig.PrivateMounts = lib.mkForce false; + mastodon-sidekiq-push-pull.serviceConfig.PrivateMounts = lib.mkForce false; + mastodon-copy-secrets = { + description = "Copy secrets from virtiofs to local filesystem"; before = [ "mastodon-init-dirs.service" ]; + requiredBy = [ "mastodon-init-dirs.service" ]; + serviceConfig = { Type = "oneshot"; RemainAfterExit = true; }; + script = '' - mkdir -p /run/mastodon-secrets - mkdir -p /run/mastodon-web - cp /run/secrets/pass /run/mastodon-secrets/pass - cp /run/secrets/smtp /run/mastodon-secrets/smtp - cp /run/secrets/database /run/mastodon-secrets/database - cp /run/secrets/redis /run/mastodon-secrets/redis - chown root:mastodon /run/mastodon-secrets/* - chmod 0640 /run/mastodon-secrets/* - chown mastodon:mastodon /run/mastodon-web - chmod 0755 /run/mastodon-web + mkdir -p /etc/mastodon-secrets + cp /run/secrets/pass /etc/mastodon-secrets/pass + cp /run/secrets/database /etc/mastodon-secrets/database + cp /run/secrets/redis /etc/mastodon-secrets/redis + cp /run/secrets/smtp /etc/mastodon-secrets/smtp + chmod 755 /etc/mastodon-secrets + chmod 644 /etc/mastodon-secrets/* ''; }; - caddy = { - after = [ "copy-secrets-to-tmpfs.service" ]; - requires = [ "copy-secrets-to-tmpfs.service" ]; - serviceConfig.ReadWriteDirectories = lib.mkForce [ - "/var/lib/caddy" - "/run/mastodon-web" - ]; - }; }; network = { enable = true; @@ -267,10 +268,24 @@ in ]; }; }; - + services = { + mastodon-init-db = { + serviceConfig = { + EnvironmentFile = "/var/lib/mastodon/.secrets_env"; + }; + }; + systemd-tmpfiles-setup.after = [ "var-lib-mastodon.mount" ]; + }; tmpfiles.rules = [ - "Z ${serviceCfg.varPaths.path0} 0755 ${serviceCfg.name} ${serviceCfg.name} -" + "d /var/lib/mastodon 0755 mastodon mastodon -" + "Z /var/lib/mastodon 0755 mastodon mastodon -" "Z /var/lib/postgresql 0755 postgres postgres -" + "d /var/cache/mastodon/precompile 0755 mastodon mastodon -" + "d /var/lib/mastodon/public-system 0755 mastodon mastodon -" + "d /var/lib/mastodon/public-system/accounts 0755 mastodon mastodon -" + "d /var/lib/mastodon/public-system/media_attachments 0755 mastodon mastodon -" + "d /var/lib/mastodon/public-system/media_attachments/files 0755 mastodon mastodon -" + "d /var/lib/mastodon/public-system/site_uploads 0755 mastodon mastodon -" ]; }; @@ -335,7 +350,8 @@ in name = "${serviceCfg.name}/${secret}"; value = { owner = "root"; - mode = "0600"; + group = "root"; + mode = "0644"; }; }) [ @@ -351,12 +367,15 @@ in "d ${serviceCfg.mntPaths.path0} 0751 microvm wheel - -" "d ${serviceCfg.mntPaths.path0}/data 0751 microvm wheel - -" "d ${serviceCfg.mntPaths.path0}/database 0751 microvm wheel - -" - ]; services.caddy.virtualHosts."${host}" = { extraConfig = '' - reverse_proxy http://${serviceCfg.interface.ip}:80 + reverse_proxy http://${serviceCfg.interface.ip}:80 { + header_up X-Forwarded-Proto {scheme} + header_up X-Real-IP {remote_host} + header_up X-Forwarded-For {remote_host} + } tls ${serviceCfg.ssl.cert} ${serviceCfg.ssl.key} diff --git a/modules/nixos/services/owncast/default.nix b/modules/nixos/services/owncast/default.nix deleted file mode 100755 index 84654e0..0000000 --- a/modules/nixos/services/owncast/default.nix +++ /dev/null @@ -1,43 +0,0 @@ -{ flake, ... }: -let - inherit (flake.config.services.instances) - owncast - web - ; - service = owncast; - localhost = web.localhost.address1; - host = service.domains.url0; -in -{ - services = { - owncast = { - enable = true; - listen = localhost; - port = service.ports.port0; - openFirewall = true; - }; - - caddy = { - virtualHosts = { - "${host}" = { - extraConfig = '' - reverse_proxy ${localhost}:${toString service.ports.port0} - - tls ${service.ssl.cert} ${service.ssl.key} - ''; - }; - }; - }; - }; - - networking = { - firewall = { - allowedTCPPorts = [ - service.ports.port0 - service.ports.port1 - ]; - }; - }; - - # OBS Server rtmp://192.168.50.140:1935/live -}