1.5.8
This commit is contained in:
Zwiebel
parent
c68d4e490f
commit
20ebfab00c
|
|
@ -1,5 +1,5 @@
|
|||
/* Mastodon Bird UI by @rolle@mementomori.social
|
||||
1.5.8rc4-mastodon-4.1.2-stable */
|
||||
1.5.8 */
|
||||
|
||||
/* CSS variables */
|
||||
:root {
|
||||
|
|
@ -51,6 +51,10 @@
|
|||
--color-ghost-button-text: var(--color-button-text);
|
||||
--color-verified: #79bd9a;
|
||||
--color-destructive: #df405a;
|
||||
--color-light-fuchsia-pink: #ff8cfd;
|
||||
--color-hashtag: var(--color-accent);
|
||||
--color-mention: var(--color-accent);
|
||||
--color-link: var(--color-accent);
|
||||
|
||||
/* In the original UI this color is lighten($ui-base-color, 12%) */
|
||||
--color-outer-space: #42485a;
|
||||
|
|
@ -59,10 +63,13 @@
|
|||
--font-stack: system-ui, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, Inter, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--font-size: 15px;
|
||||
--font-size-smaller: 13px;
|
||||
--font-size-12: 12px;
|
||||
--font-size-mid: 14px;
|
||||
--font-size-bigger: 17px;
|
||||
--font-size-heading: 20px;
|
||||
--font-weight-bold: 700;
|
||||
--line-height: 22px;
|
||||
--line-height-mid: 20px;
|
||||
|
||||
/* Grids and gaps */
|
||||
--gap-default: 12px;
|
||||
|
|
@ -83,6 +90,9 @@
|
|||
--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%);
|
||||
|
||||
/* 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');
|
||||
|
||||
/* Icons */
|
||||
--icon-follow-hashtag: url('data:image/svg+xml, %3Csvg version="1.0" xmlns="http://www.w3.org/2000/svg" width="18px" height="auto" viewBox="0 0 462 439"%3E%3Cpath fill="%23717c9b" d="M139 11.7c-3.5 2.5-6.2 5.4-7.7 8.3-2.5 4.8-2.5 5.2-7.8 52.5-1.4 12.6-3.5 31.4-4.7 41.7l-2.1 18.7-48.6.3-48.6.3-5 3.1C7.2 141.1 3 148.4 3 156.7c0 4.4.6 7.6 2 10.2 2.7 5.4 10.1 11.6 15.5 13 2.9.7 19.2 1.1 47.8 1.1 40.9 0 43.5.1 43.1 1.7-.4 1.9-8.4 73.2-8.4 75.2 0 .8-11.4 1.1-41 1.1H20.9l-4.8 2.5C7.5 265.8 3 273 3 282.5s4.5 16.7 13.1 21l4.8 2.5H97.6l-5.3 46.7c-2.9 25.8-5.4 50.3-5.5 54.5-.1 7 .2 8.2 2.8 12.5 1.7 2.7 5.1 6.2 7.8 8 4.5 3.1 5.4 3.3 13 3.3 8.9 0 10.2-.5 16.8-6.8 4.8-4.6 6.3-9.3 8.2-26.7.9-7.7 2.7-23.9 4-36 1.4-12.1 3.3-29.5 4.3-38.8l1.7-16.7H214.7l.5-8.3c.7-9.8 1.4-11.5 8.2-18.5 8.6-9 7-8.7 41.4-9l30.2-.3V259h-9.5c-9.4 0-9.5 0-9.1-2.3.3-1.2 1.5-10.8 2.6-21.2 1.2-10.5 3-26.5 4.1-35.7 1-9.2 1.9-17.2 1.9-17.8 0-.7 12.3-1 38.5-1 23.5 0 40.3-.4 43.4-1.1 6.1-1.3 13.5-7.4 16.2-13.4 5.2-11.4.2-24.9-11.5-30.9l-4.9-2.6H290.4l5.3-46.8c5.3-47.1 6.1-59 4.3-63.6-1.4-3.7-7.9-10.5-12.1-12.7C285.2 8.6 282 8 277.2 8c-6.2 0-7.5.4-11.8 3.2-9.2 6.2-10.1 8.6-12.9 31.8-3.4 28.9-7.2 63.4-8.7 77.7l-1.2 12.3h-77.8l.6-4.3c.3-2.3.8-7.1 1.1-10.7.6-6.1 2.5-23.4 7.6-68 1.2-10.8 1.9-21.1 1.6-23.1-1.1-5.5-6.2-12.6-11.4-15.9-4.2-2.7-5.6-3-12.3-3-7.2 0-8 .2-13 3.7zm97.5 174.5c-.4 2.9-1.5 12.9-2.5 22.3-1.1 9.3-2.7 24.5-3.7 33.7l-1.7 16.8H150.9l.6-6.3c.3-3.4 1.7-15.7 3-27.2 1.3-11.6 2.9-26.3 3.6-32.8l1.2-11.7H237l-.5 5.2z"/%3E%3Cpath fill="%23717c9b" d="M317.2 207c-1.8 1.1-4.1 3.4-5.2 5.2-1.9 3.1-2 5.1-2 38V285h-34.7c-33 0-35 .1-38.1 2-6.7 4.1-7.2 6-7.2 30s.5 25.9 7.2 30c3.1 1.9 5.1 2 38.1 2H310v34.7c0 33 .1 35 2 38.1 4.1 6.7 6 7.2 30 7.2s25.9-.5 30-7.2c1.9-3.1 2-5.1 2-38.1V349h34.8c32.9 0 34.9-.1 38-2 6.7-4.1 7.2-6 7.2-30s-.5-25.9-7.2-30c-3.1-1.9-5.1-2-38-2H374v-34.8c0-32.9-.1-34.9-2-38-4.1-6.7-6-7.2-30-7.2-19.7 0-21.8.2-24.8 2z"/%3E%3Cpath fill="%23717c9b" d="M217.2 359.7c-5 43.2-5.5 50-4.2 54.7 1.5 5.4 7.5 12.7 12.4 15 5.2 2.4 17.1 2.2 21.6-.5 8.9-5.3 12.3-11.7 13.4-25.4.9-10.2 3.5-33.2 4.2-36.6l.5-2.7-15.3-.4c-10.1-.2-16.1-.8-17.8-1.7-1.4-.7-5-3.8-8.1-6.8l-5.6-5.4-1.1 9.8z"/%3E%3C/svg%3E');
|
||||
--icon-unfollow-hashtag: url('data:image/svg+xml, %3Csvg version="1.0" xmlns="http://www.w3.org/2000/svg" width="18px" height="auto" viewBox="0 0 462 439"%3E%3Cpath fill="%2300ba7c" d="M139 11.7c-3.5 2.5-6.2 5.4-7.7 8.3-2.5 4.8-2.5 5.2-7.8 52.5-1.4 12.6-3.5 31.4-4.7 41.7l-2.1 18.7-48.6.3-48.6.3-5 3.1C7.2 141.1 3 148.4 3 156.7c0 4.4.6 7.6 2 10.2 2.7 5.4 10.1 11.6 15.5 13 2.9.7 19.2 1.1 47.8 1.1 40.9 0 43.5.1 43.1 1.7-.4 1.9-8.4 73.2-8.4 75.2 0 .8-11.4 1.1-41 1.1H20.9l-4.8 2.5C7.5 265.8 3 273 3 282.5s4.5 16.7 13.1 21l4.8 2.5H97.6l-5.3 46.7c-2.9 25.8-5.4 50.3-5.5 54.5-.1 7 .2 8.2 2.8 12.5 1.7 2.7 5.1 6.2 7.8 8 4.5 3.1 5.4 3.3 13 3.3 8.9 0 10.2-.5 16.8-6.8 4.8-4.6 6.3-9.3 8.2-26.7.9-7.7 2.7-23.9 4-36 1.4-12.1 3.3-29.5 4.3-38.8l1.7-16.7h38.8c21.3 0 38.8.4 38.8.9 0 1-2.3 21.5-5 45.1-5.9 52.1-6.4 57.6-5 62.4 1.5 5.4 7.5 12.7 12.4 15 5.2 2.4 17.1 2.2 21.6-.5 5-3 8.7-6.7 10.1-10.1 1.2-2.9 1.1-3.1-10.8-15.1-6.7-6.7-12.6-13.2-13.2-14.4-1.5-2.9-1.4-25.8 0-28.6.6-1.2 9.2-10.3 19-20.3 24-24.2 24-20.9.3-44.4-9.6-9.6-18.2-18.7-19-20.2-2-3.8-2-25.8 0-29.6 1.7-3.2 34.2-35.5 37.3-37.1 1.2-.6 4.2-1.1 6.6-1.1 5.2 0 4.6 1.5 6.8-17.3l1.1-9.7h38.4c23.4 0 40.2-.4 43.3-1.1 6.1-1.3 13.5-7.4 16.2-13.4 5.2-11.4.2-24.9-11.5-30.9l-4.9-2.6H290.4l5.3-46.8c5.3-47.1 6.1-59 4.3-63.6-1.4-3.7-7.9-10.5-12.1-12.7C285.2 8.6 282 8 277.2 8c-6.2 0-7.5.4-11.8 3.2-9.2 6.2-10.1 8.6-12.9 31.8-3.4 28.9-7.2 63.4-8.7 77.7l-1.2 12.3h-77.8l.6-4.3c.3-2.3.8-7.1 1.1-10.7.6-6.1 2.5-23.4 7.6-68 1.2-10.8 1.9-21.1 1.6-23.1-1.1-5.5-6.2-12.6-11.4-15.9-4.2-2.7-5.6-3-12.3-3-7.2 0-8 .2-13 3.7zm97.5 174.5c-.4 2.9-1.5 12.9-2.5 22.3-1.1 9.3-2.7 24.5-3.7 33.7l-1.7 16.8H150.9l.6-6.3c.3-3.4 1.7-15.7 3-27.2 1.3-11.6 2.9-26.3 3.6-32.8l1.2-11.7H237l-.5 5.2z"/%3E%3Cpath fill="%2300ba7c" d="M277.5 223.2c-3.1 1.7-28.5 27-30.1 30-1.7 3.2-1.9 12-.3 15.1.6 1.2 11.7 12.9 24.7 25.9l23.7 23.8-23.7 23.7c-13 13.1-24.1 24.8-24.7 26-1.6 3.1-1.4 11.9.3 15.1 1.7 3.2 27.2 28.5 30.3 30.1 2.8 1.4 11.8 1.4 14.6 0 1.2-.6 12.9-11.7 26-24.7l23.7-23.7 23.8 23.7c13 13 24.7 24.1 25.9 24.7 2.8 1.4 11.8 1.4 14.6 0 3.1-1.6 28.6-26.9 30.3-30.1 1.7-3.2 1.9-12 .3-15.1-.6-1.2-11.7-12.9-24.7-26L388.5 318l23.7-23.8c13-13 24.1-24.7 24.7-25.9 1.6-3.1 1.4-11.9-.3-15.1-1.7-3.2-27.2-28.5-30.3-30.1-2.8-1.4-11.8-1.4-14.6 0-1.2.6-12.9 11.7-25.9 24.7L342 271.5l-23.7-23.7c-13.1-13-24.8-24.1-26-24.7-2.8-1.4-12.2-1.4-14.8.1z"/%3E%3C/svg%3E');
|
||||
|
|
@ -188,6 +198,7 @@ body.theme-elephant-light.layout-multiple-columns {
|
|||
--color-dark-electric-blue: #9088a6;
|
||||
--color-bg-75: #ffffffbf;
|
||||
--color-accent: var(--color-accent-dark);
|
||||
--color-accent-dark-50: #595aff80;
|
||||
--color-ghost-button-text: var(--color-accent-dark);
|
||||
|
||||
/* Misc */
|
||||
|
|
@ -301,10 +312,24 @@ body.layout-multiple-columns {
|
|||
color: var(--color-fg);
|
||||
}
|
||||
|
||||
/* Link color variants */
|
||||
.layout-multiple-columns .status-link.hashtag {
|
||||
color: var(--color-hashtag);
|
||||
}
|
||||
|
||||
.layout-multiple-columns .status-link.mention:not(.hashtag) {
|
||||
color: var(--color-mention);
|
||||
}
|
||||
|
||||
/* stylelint-disable-next-line */
|
||||
.layout-multiple-columns .status-link.mention:not(.hashtag):not(.mention) {
|
||||
color: var(--color-link);
|
||||
}
|
||||
|
||||
/* Logo */
|
||||
.layout-multiple-columns .ui__header__logo,
|
||||
.layout-multiple-columns .column-link.column-link--logo {
|
||||
background-image: 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');
|
||||
background-image: var(--logo);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 32px auto;
|
||||
|
|
@ -317,12 +342,41 @@ body.layout-multiple-columns {
|
|||
display: none;
|
||||
}
|
||||
|
||||
/* Things that should have default font-size */
|
||||
/* Things that should have the default font-size */
|
||||
.layout-multiple-columns .notification__message,
|
||||
.layout-multiple-columns .account__header__tabs__name h1 small,
|
||||
.layout-multiple-columns .button,
|
||||
.layout-multiple-columns .status__content__read-more-button,
|
||||
.layout-multiple-columns .status__prepend,
|
||||
.layout-multiple-columns .status__info,
|
||||
.layout-multiple-columns .status__relative-time,
|
||||
.layout-multiple-columns .status__info .status__display-name,
|
||||
.layout-multiple-columns .account__section-headline a,
|
||||
.layout-multiple-columns .account__section-headline button,
|
||||
.layout-multiple-columns .notification__filter-bar a,
|
||||
.layout-multiple-columns .notification__filter-bar button {
|
||||
font-size: var(--font-size);
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
|
||||
/* Things that should have the mid font-size */
|
||||
.layout-multiple-columns .account__header__extra__links,
|
||||
.layout-multiple-columns .account__header__account-note textarea,
|
||||
.layout-multiple-columns .account__header__content,
|
||||
.layout-multiple-columns .compose-form .autosuggest-textarea__textarea,
|
||||
.layout-multiple-columns .compose-form .spoiler-input__input {
|
||||
font-size: var(--font-size-mid);
|
||||
line-height: var(--line-height-mid);
|
||||
}
|
||||
|
||||
/* Exceptions */
|
||||
.layout-multiple-columns .account__header__content {
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
/* Things that will have even smaller font size */
|
||||
.layout-multiple-columns .account__header__account-note label {
|
||||
font-size: var(--font-size-12);
|
||||
}
|
||||
|
||||
/* Modal overlay */
|
||||
|
|
@ -487,7 +541,7 @@ body.layout-multiple-columns {
|
|||
a.status-card .status-card__host,
|
||||
a.status-card.compact .status-card__host {
|
||||
color: var(--color-dim);
|
||||
font-size: 14px;
|
||||
font-size: var(--font-size-mid);
|
||||
margin-bottom: 5px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
|
@ -745,7 +799,7 @@ body.embed .status__content a,
|
|||
.layout-multiple-columns .language-dropdown__dropdown__results__item.active,
|
||||
.layout-multiple-columns .icon-with-badge__badge,
|
||||
.layout-multiple-columns .button {
|
||||
background-color: var(--color-accent);
|
||||
background-color: var(--color-accent-dark);
|
||||
}
|
||||
|
||||
.layout-multiple-columns .block-modal__cancel-button,
|
||||
|
|
@ -783,13 +837,18 @@ body.embed .status__content a,
|
|||
}
|
||||
|
||||
/* Mud background colors */
|
||||
.layout-multiple-columns .language-dropdown__dropdown__results__item:hover,
|
||||
.layout-multiple-columns .language-dropdown__dropdown__results__item:focus,
|
||||
.layout-multiple-columns .reply-indicator {
|
||||
background-color: var(--color-mud);
|
||||
color: var(--color-light-text);
|
||||
}
|
||||
|
||||
/* Dropdown hovers */
|
||||
.layout-multiple-columns .language-dropdown__dropdown__results__item:hover,
|
||||
.layout-multiple-columns .language-dropdown__dropdown__results__item:focus {
|
||||
background-color: var(--color-accent-dark-50);
|
||||
color: var(--color-light-text);
|
||||
}
|
||||
|
||||
/* Accented border colors */
|
||||
.layout-multiple-columns .notification.unread::before,
|
||||
.layout-multiple-columns .status__wrapper.unread::before {
|
||||
|
|
@ -810,6 +869,16 @@ body.embed .status__content a,
|
|||
}
|
||||
|
||||
/* Things like notification status update text that should be dim */
|
||||
/* stylelint-disable-next-line selector-not-notation */
|
||||
.layout-multiple-columns .notification .status-link.mention:not(.hashtag):not(.mention),
|
||||
.layout-multiple-columns .notification .status-link.hashtag,
|
||||
.layout-multiple-columns .notification .status-link.mention:not(.hashtag),
|
||||
.layout-multiple-columns .compose-form .autosuggest-textarea__textarea::placeholder,
|
||||
.layout-multiple-columns .compose-form .icon-button,
|
||||
.layout-multiple-columns .compose-form .spoiler-input__input::placeholder,
|
||||
.layout-multiple-columns .compose-form__poll-wrapper .button.button-secondary,
|
||||
.layout-multiple-columns .language-dropdown__dropdown__results__item__common-name,
|
||||
.layout-multiple-columns .report-dialog-modal__textarea::placeholder,
|
||||
.layout-multiple-columns .poll__link,
|
||||
.layout-multiple-columns .muted .poll,
|
||||
.layout-multiple-columns .status .status__relative-time,
|
||||
|
|
@ -1261,6 +1330,7 @@ body.embed .detailed-status,
|
|||
/* Detailed status update */
|
||||
.layout-multiple-columns .detailed-status .status__content {
|
||||
font-size: var(--font-size-bigger);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
body.embed .detailed-status__meta,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/* Mastodon Bird UI by @rolle@mementomori.social
|
||||
1.5.8rc4-mastodon-4.1.2-stable */
|
||||
1.5.8 */
|
||||
|
||||
/* CSS variables */
|
||||
:root {
|
||||
|
|
@ -51,6 +51,10 @@
|
|||
--color-ghost-button-text: var(--color-button-text);
|
||||
--color-verified: #79bd9a;
|
||||
--color-destructive: #df405a;
|
||||
--color-light-fuchsia-pink: #ff8cfd;
|
||||
--color-hashtag: var(--color-accent);
|
||||
--color-mention: var(--color-accent);
|
||||
--color-link: var(--color-accent);
|
||||
|
||||
/* In the original UI this color is lighten($ui-base-color, 12%) */
|
||||
--color-outer-space: #42485a;
|
||||
|
|
@ -59,10 +63,13 @@
|
|||
--font-stack: system-ui, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, Inter, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
--font-size: 15px;
|
||||
--font-size-smaller: 13px;
|
||||
--font-size-12: 12px;
|
||||
--font-size-mid: 14px;
|
||||
--font-size-bigger: 17px;
|
||||
--font-size-heading: 20px;
|
||||
--font-weight-bold: 700;
|
||||
--line-height: 22px;
|
||||
--line-height-mid: 20px;
|
||||
|
||||
/* Grids and gaps */
|
||||
--gap-default: 12px;
|
||||
|
|
@ -82,6 +89,9 @@
|
|||
--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%);
|
||||
|
||||
/* 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');
|
||||
|
||||
/* Icons */
|
||||
--icon-follow-hashtag: url('data:image/svg+xml, %3Csvg version="1.0" xmlns="http://www.w3.org/2000/svg" width="18px" height="auto" viewBox="0 0 462 439"%3E%3Cpath fill="%23717c9b" d="M139 11.7c-3.5 2.5-6.2 5.4-7.7 8.3-2.5 4.8-2.5 5.2-7.8 52.5-1.4 12.6-3.5 31.4-4.7 41.7l-2.1 18.7-48.6.3-48.6.3-5 3.1C7.2 141.1 3 148.4 3 156.7c0 4.4.6 7.6 2 10.2 2.7 5.4 10.1 11.6 15.5 13 2.9.7 19.2 1.1 47.8 1.1 40.9 0 43.5.1 43.1 1.7-.4 1.9-8.4 73.2-8.4 75.2 0 .8-11.4 1.1-41 1.1H20.9l-4.8 2.5C7.5 265.8 3 273 3 282.5s4.5 16.7 13.1 21l4.8 2.5H97.6l-5.3 46.7c-2.9 25.8-5.4 50.3-5.5 54.5-.1 7 .2 8.2 2.8 12.5 1.7 2.7 5.1 6.2 7.8 8 4.5 3.1 5.4 3.3 13 3.3 8.9 0 10.2-.5 16.8-6.8 4.8-4.6 6.3-9.3 8.2-26.7.9-7.7 2.7-23.9 4-36 1.4-12.1 3.3-29.5 4.3-38.8l1.7-16.7H214.7l.5-8.3c.7-9.8 1.4-11.5 8.2-18.5 8.6-9 7-8.7 41.4-9l30.2-.3V259h-9.5c-9.4 0-9.5 0-9.1-2.3.3-1.2 1.5-10.8 2.6-21.2 1.2-10.5 3-26.5 4.1-35.7 1-9.2 1.9-17.2 1.9-17.8 0-.7 12.3-1 38.5-1 23.5 0 40.3-.4 43.4-1.1 6.1-1.3 13.5-7.4 16.2-13.4 5.2-11.4.2-24.9-11.5-30.9l-4.9-2.6H290.4l5.3-46.8c5.3-47.1 6.1-59 4.3-63.6-1.4-3.7-7.9-10.5-12.1-12.7C285.2 8.6 282 8 277.2 8c-6.2 0-7.5.4-11.8 3.2-9.2 6.2-10.1 8.6-12.9 31.8-3.4 28.9-7.2 63.4-8.7 77.7l-1.2 12.3h-77.8l.6-4.3c.3-2.3.8-7.1 1.1-10.7.6-6.1 2.5-23.4 7.6-68 1.2-10.8 1.9-21.1 1.6-23.1-1.1-5.5-6.2-12.6-11.4-15.9-4.2-2.7-5.6-3-12.3-3-7.2 0-8 .2-13 3.7zm97.5 174.5c-.4 2.9-1.5 12.9-2.5 22.3-1.1 9.3-2.7 24.5-3.7 33.7l-1.7 16.8H150.9l.6-6.3c.3-3.4 1.7-15.7 3-27.2 1.3-11.6 2.9-26.3 3.6-32.8l1.2-11.7H237l-.5 5.2z"/%3E%3Cpath fill="%23717c9b" d="M317.2 207c-1.8 1.1-4.1 3.4-5.2 5.2-1.9 3.1-2 5.1-2 38V285h-34.7c-33 0-35 .1-38.1 2-6.7 4.1-7.2 6-7.2 30s.5 25.9 7.2 30c3.1 1.9 5.1 2 38.1 2H310v34.7c0 33 .1 35 2 38.1 4.1 6.7 6 7.2 30 7.2s25.9-.5 30-7.2c1.9-3.1 2-5.1 2-38.1V349h34.8c32.9 0 34.9-.1 38-2 6.7-4.1 7.2-6 7.2-30s-.5-25.9-7.2-30c-3.1-1.9-5.1-2-38-2H374v-34.8c0-32.9-.1-34.9-2-38-4.1-6.7-6-7.2-30-7.2-19.7 0-21.8.2-24.8 2z"/%3E%3Cpath fill="%23717c9b" d="M217.2 359.7c-5 43.2-5.5 50-4.2 54.7 1.5 5.4 7.5 12.7 12.4 15 5.2 2.4 17.1 2.2 21.6-.5 8.9-5.3 12.3-11.7 13.4-25.4.9-10.2 3.5-33.2 4.2-36.6l.5-2.7-15.3-.4c-10.1-.2-16.1-.8-17.8-1.7-1.4-.7-5-3.8-8.1-6.8l-5.6-5.4-1.1 9.8z"/%3E%3C/svg%3E');
|
||||
--icon-unfollow-hashtag: url('data:image/svg+xml, %3Csvg version="1.0" xmlns="http://www.w3.org/2000/svg" width="18px" height="auto" viewBox="0 0 462 439"%3E%3Cpath fill="%2300ba7c" d="M139 11.7c-3.5 2.5-6.2 5.4-7.7 8.3-2.5 4.8-2.5 5.2-7.8 52.5-1.4 12.6-3.5 31.4-4.7 41.7l-2.1 18.7-48.6.3-48.6.3-5 3.1C7.2 141.1 3 148.4 3 156.7c0 4.4.6 7.6 2 10.2 2.7 5.4 10.1 11.6 15.5 13 2.9.7 19.2 1.1 47.8 1.1 40.9 0 43.5.1 43.1 1.7-.4 1.9-8.4 73.2-8.4 75.2 0 .8-11.4 1.1-41 1.1H20.9l-4.8 2.5C7.5 265.8 3 273 3 282.5s4.5 16.7 13.1 21l4.8 2.5H97.6l-5.3 46.7c-2.9 25.8-5.4 50.3-5.5 54.5-.1 7 .2 8.2 2.8 12.5 1.7 2.7 5.1 6.2 7.8 8 4.5 3.1 5.4 3.3 13 3.3 8.9 0 10.2-.5 16.8-6.8 4.8-4.6 6.3-9.3 8.2-26.7.9-7.7 2.7-23.9 4-36 1.4-12.1 3.3-29.5 4.3-38.8l1.7-16.7h38.8c21.3 0 38.8.4 38.8.9 0 1-2.3 21.5-5 45.1-5.9 52.1-6.4 57.6-5 62.4 1.5 5.4 7.5 12.7 12.4 15 5.2 2.4 17.1 2.2 21.6-.5 5-3 8.7-6.7 10.1-10.1 1.2-2.9 1.1-3.1-10.8-15.1-6.7-6.7-12.6-13.2-13.2-14.4-1.5-2.9-1.4-25.8 0-28.6.6-1.2 9.2-10.3 19-20.3 24-24.2 24-20.9.3-44.4-9.6-9.6-18.2-18.7-19-20.2-2-3.8-2-25.8 0-29.6 1.7-3.2 34.2-35.5 37.3-37.1 1.2-.6 4.2-1.1 6.6-1.1 5.2 0 4.6 1.5 6.8-17.3l1.1-9.7h38.4c23.4 0 40.2-.4 43.3-1.1 6.1-1.3 13.5-7.4 16.2-13.4 5.2-11.4.2-24.9-11.5-30.9l-4.9-2.6H290.4l5.3-46.8c5.3-47.1 6.1-59 4.3-63.6-1.4-3.7-7.9-10.5-12.1-12.7C285.2 8.6 282 8 277.2 8c-6.2 0-7.5.4-11.8 3.2-9.2 6.2-10.1 8.6-12.9 31.8-3.4 28.9-7.2 63.4-8.7 77.7l-1.2 12.3h-77.8l.6-4.3c.3-2.3.8-7.1 1.1-10.7.6-6.1 2.5-23.4 7.6-68 1.2-10.8 1.9-21.1 1.6-23.1-1.1-5.5-6.2-12.6-11.4-15.9-4.2-2.7-5.6-3-12.3-3-7.2 0-8 .2-13 3.7zm97.5 174.5c-.4 2.9-1.5 12.9-2.5 22.3-1.1 9.3-2.7 24.5-3.7 33.7l-1.7 16.8H150.9l.6-6.3c.3-3.4 1.7-15.7 3-27.2 1.3-11.6 2.9-26.3 3.6-32.8l1.2-11.7H237l-.5 5.2z"/%3E%3Cpath fill="%2300ba7c" d="M277.5 223.2c-3.1 1.7-28.5 27-30.1 30-1.7 3.2-1.9 12-.3 15.1.6 1.2 11.7 12.9 24.7 25.9l23.7 23.8-23.7 23.7c-13 13.1-24.1 24.8-24.7 26-1.6 3.1-1.4 11.9.3 15.1 1.7 3.2 27.2 28.5 30.3 30.1 2.8 1.4 11.8 1.4 14.6 0 1.2-.6 12.9-11.7 26-24.7l23.7-23.7 23.8 23.7c13 13 24.7 24.1 25.9 24.7 2.8 1.4 11.8 1.4 14.6 0 3.1-1.6 28.6-26.9 30.3-30.1 1.7-3.2 1.9-12 .3-15.1-.6-1.2-11.7-12.9-24.7-26L388.5 318l23.7-23.8c13-13 24.1-24.7 24.7-25.9 1.6-3.1 1.4-11.9-.3-15.1-1.7-3.2-27.2-28.5-30.3-30.1-2.8-1.4-11.8-1.4-14.6 0-1.2.6-12.9 11.7-25.9 24.7L342 271.5l-23.7-23.7c-13.1-13-24.8-24.1-26-24.7-2.8-1.4-12.2-1.4-14.8.1z"/%3E%3C/svg%3E');
|
||||
|
|
@ -187,6 +197,7 @@ body.theme-elephant-light.layout-single-column {
|
|||
--color-dark-electric-blue: #9088a6;
|
||||
--color-bg-75: #ffffffbf;
|
||||
--color-accent: var(--color-accent-dark);
|
||||
--color-accent-dark-50: #595aff80;
|
||||
--color-ghost-button-text: var(--color-accent-dark);
|
||||
|
||||
/* Misc */
|
||||
|
|
@ -256,6 +267,8 @@ body.theme-elephant-light.layout-single-column {
|
|||
/* Vars in mobile */
|
||||
@media (max-width: 500px) {
|
||||
:root {
|
||||
--font-size: 16px;
|
||||
--line-height: 1.4;
|
||||
--font-size-heading: 17px;
|
||||
--badges-distance-from-edge: 10px;
|
||||
}
|
||||
|
|
@ -307,10 +320,24 @@ body.layout-single-column {
|
|||
color: var(--color-fg);
|
||||
}
|
||||
|
||||
/* Link color variants */
|
||||
.layout-single-column .status-link.hashtag {
|
||||
color: var(--color-hashtag);
|
||||
}
|
||||
|
||||
.layout-single-column .status-link.mention:not(.hashtag) {
|
||||
color: var(--color-mention);
|
||||
}
|
||||
|
||||
/* stylelint-disable-next-line */
|
||||
.layout-single-column .status-link.mention:not(.hashtag):not(.mention) {
|
||||
color: var(--color-link);
|
||||
}
|
||||
|
||||
/* Logo */
|
||||
.layout-single-column .ui__header__logo,
|
||||
.layout-single-column .column-link.column-link--logo {
|
||||
background-image: 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');
|
||||
background-image: var(--logo);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 32px auto;
|
||||
|
|
@ -323,12 +350,47 @@ body.layout-single-column {
|
|||
display: none;
|
||||
}
|
||||
|
||||
/* Things that should have default font-size */
|
||||
/* Things that should have the default font-size */
|
||||
.layout-single-column .notification__message,
|
||||
.layout-single-column .account__header__tabs__name h1 small,
|
||||
.layout-single-column .button,
|
||||
.layout-single-column .status__content__read-more-button,
|
||||
.layout-single-column .status__prepend,
|
||||
.layout-single-column .status__info,
|
||||
.layout-single-column .status__relative-time,
|
||||
.layout-single-column .status__info .status__display-name,
|
||||
.layout-single-column .account__section-headline a,
|
||||
.layout-single-column .account__section-headline button,
|
||||
.layout-single-column .notification__filter-bar a,
|
||||
.layout-single-column .notification__filter-bar button {
|
||||
font-size: var(--font-size);
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
|
||||
/* Things that should have the mid font-size */
|
||||
.layout-single-column .account__header__extra__links,
|
||||
.layout-single-column .account__header__account-note textarea,
|
||||
.layout-single-column .account__header__content,
|
||||
.layout-single-column .compose-form .autosuggest-textarea__textarea,
|
||||
.layout-single-column .compose-form .spoiler-input__input {
|
||||
font-size: var(--font-size-mid);
|
||||
line-height: var(--line-height-mid);
|
||||
}
|
||||
|
||||
/* Exceptions */
|
||||
.layout-single-column .account__header__content {
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
/* Things that will have even smaller font size */
|
||||
.layout-single-column .account__header__account-note label {
|
||||
font-size: var(--font-size-12);
|
||||
}
|
||||
|
||||
/* Line heights */
|
||||
.layout-single-column .reply-indicator__content,
|
||||
.layout-single-column .status__content {
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
|
||||
/* Modal overlay */
|
||||
|
|
@ -482,7 +544,7 @@ body.layout-single-column {
|
|||
a.status-card .status-card__host,
|
||||
a.status-card.compact .status-card__host {
|
||||
color: var(--color-dim);
|
||||
font-size: 14px;
|
||||
font-size: var(--font-size-mid);
|
||||
margin-bottom: 5px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
|
@ -711,7 +773,7 @@ body.embed .status__content a,
|
|||
.layout-single-column .language-dropdown__dropdown__results__item.active,
|
||||
.layout-single-column .icon-with-badge__badge,
|
||||
.layout-single-column .button {
|
||||
background-color: var(--color-accent);
|
||||
background-color: var(--color-accent-dark);
|
||||
}
|
||||
|
||||
.layout-single-column .block-modal__cancel-button,
|
||||
|
|
@ -749,13 +811,18 @@ body.embed .status__content a,
|
|||
}
|
||||
|
||||
/* Mud background colors */
|
||||
.layout-single-column .language-dropdown__dropdown__results__item:hover,
|
||||
.layout-single-column .language-dropdown__dropdown__results__item:focus,
|
||||
.layout-single-column .reply-indicator {
|
||||
background-color: var(--color-mud);
|
||||
color: var(--color-light-text);
|
||||
}
|
||||
|
||||
/* Dropdown hovers */
|
||||
.layout-single-column .language-dropdown__dropdown__results__item:hover,
|
||||
.layout-single-column .language-dropdown__dropdown__results__item:focus {
|
||||
background-color: var(--color-accent-dark-50);
|
||||
color: var(--color-light-text);
|
||||
}
|
||||
|
||||
/* Accented border colors */
|
||||
.layout-single-column .notification.unread::before,
|
||||
.layout-single-column .status__wrapper.unread::before {
|
||||
|
|
@ -776,6 +843,15 @@ body.embed .status__content a,
|
|||
}
|
||||
|
||||
/* 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.hashtag,
|
||||
.layout-single-column .notification .status-link.mention:not(.hashtag),
|
||||
.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,
|
||||
.layout-single-column .language-dropdown__dropdown__results__item__common-name,
|
||||
.layout-single-column .poll__link,
|
||||
.layout-single-column .muted .poll,
|
||||
.layout-single-column .status .status__relative-time,
|
||||
|
|
@ -1228,6 +1304,7 @@ body.embed .detailed-status,
|
|||
/* Detailed status update */
|
||||
.layout-single-column .detailed-status .status__content {
|
||||
font-size: var(--font-size-bigger);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
body.embed .detailed-status__meta,
|
||||
|
|
@ -3129,6 +3206,11 @@ body.embed .button.logo-button:hover,
|
|||
background-color: var(--color-red);
|
||||
}
|
||||
|
||||
/* Exception for your own profile media gallery */
|
||||
.layout-single-column .account-gallery__container .media-gallery__gifv {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* More distinct focus color for accessibility, instead of just white */
|
||||
.layout-single-column input:focus-visible {
|
||||
outline-color: var(--color-accent);
|
||||
|
|
|
|||
Loading…
Reference in New Issue