diff --git a/app/javascript/mastodon/components/_theme_playground/theme_playground.module.scss b/app/javascript/mastodon/components/_theme_playground/theme_playground.module.scss index 4329ede4f4a..dc488bdc350 100644 --- a/app/javascript/mastodon/components/_theme_playground/theme_playground.module.scss +++ b/app/javascript/mastodon/components/_theme_playground/theme_playground.module.scss @@ -2,15 +2,19 @@ .wrapper { position: relative; + display: grid; grid-template-columns: 250px 1fr; gap: var(--space-md); + padding: var(--space-3xl); + font-family: Inter, sans-serif; font-size: var(--fs-lg); line-height: var(--lh-normal); - overflow-wrap: break-word; color: var(--color-text-primary); + overflow-wrap: break-word; + background-color: var(--color-bg-blend); h1 { @@ -36,15 +40,18 @@ input { display: block; + box-sizing: border-box; width: 100%; margin-block-end: var(--space-md); padding: var(--space-xs) var(--space-md); - color: var(--color-text-primary); - background: transparent; border: 1px solid var(--color-border-primary); border-radius: var(--radius-xs); + font: inherit; + color: var(--color-text-primary); + + background: transparent; &:focus { border-color: var(--color-border-brand); @@ -71,12 +78,13 @@ 'title button' 'subtitle button'; grid-template-columns: 1fr min-content; - align-items: center; gap: var(--space-3xs) var(--space-xs); + align-items: center; + margin-block-start: var(--space-md); padding: var(--space-sm) var(--space-md); - border-radius: var(--radius-md); border: 1px solid var(--color-border-primary); + border-radius: var(--radius-md); h2 { grid-area: title; @@ -86,25 +94,27 @@ } .subtitle { + overflow: hidden; grid-area: subtitle; - @include mixins.type-label-sm; color: var(--color-text-secondary); - overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + @include mixins.type-label-sm; } .menuButton { - grid-area: button; display: grid; + grid-area: button; place-items: center; + width: 32px; height: 32px; border: none; - background-color: transparent; border-radius: var(--radius-round); + background-color: transparent; + &:hover { background-color: var(--color-bg-highlight); } @@ -114,19 +124,21 @@ main { padding: var(--space-3xl); - background-color: var(--color-bg-primary); border-radius: var(--radius-md); + background-color: var(--color-bg-primary); } .overlay { position: absolute; inset: auto var(--space-md) var(--space-md) auto; + width: 30%; height: 35%; padding: var(--space-md); - background-color: var(--color-bg-primary); border-radius: var(--radius-xl); + background-color: var(--color-bg-primary); + @include mixins.elevation-2; } } diff --git a/app/javascript/mastodon/components/account_bio/styles.module.scss b/app/javascript/mastodon/components/account_bio/styles.module.scss index 62e64a219a0..a75d75bd43f 100644 --- a/app/javascript/mastodon/components/account_bio/styles.module.scss +++ b/app/javascript/mastodon/components/account_bio/styles.module.scss @@ -1,7 +1,7 @@ .bio { + unicode-bidi: plaintext; font-size: 15px; color: var(--color-text-primary); - unicode-bidi: plaintext; overflow-wrap: anywhere; p { diff --git a/app/javascript/mastodon/components/account_header/styles.module.scss b/app/javascript/mastodon/components/account_header/styles.module.scss index 71062bfa8e3..f311577612d 100644 --- a/app/javascript/mastodon/components/account_header/styles.module.scss +++ b/app/javascript/mastodon/components/account_header/styles.module.scss @@ -4,17 +4,19 @@ // Account header .header { - height: 120px; overflow: hidden; - background: var(--color-bg-secondary); + height: 120px; border-bottom: 1px solid var(--color-border-primary); + background: var(--color-bg-secondary); img { - object-fit: cover; display: block; + width: 100%; height: 100%; margin: 0; + + object-fit: cover; } @container (width >= 500px) { @@ -33,20 +35,21 @@ // Avatar .avatarWrapper { - margin-top: -64px; - padding-top: 0; + overflow: hidden; display: flex; + gap: 8px; align-items: flex-start; justify-content: space-between; - gap: 8px; - overflow: hidden; + + margin-top: -64px; margin-inline-start: -2px; // aligns the pfp with content below + padding-top: 0; } .avatar { - background: var(--color-bg-primary); border: 1px solid var(--color-border-primary); border-radius: var(--avatar-border-radius); + background: var(--color-bg-primary); .moved & { filter: grayscale(100%); @@ -55,19 +58,21 @@ .displayNameWrapper { display: flex; - align-items: start; gap: 16px; + align-items: start; + margin-top: 16px; margin-bottom: 16px; h1 { + overflow: hidden; + font-size: 17px; + font-weight: 600; line-height: 22px; color: var(--color-text-primary); - font-weight: 600; - overflow: hidden; - white-space: nowrap; text-overflow: ellipsis; + white-space: nowrap; } :global(.emojione) { @@ -85,10 +90,12 @@ .name { > h1 { display: inline; + + margin-inline-end: 4px; + font-size: 22px; line-height: normal; white-space: initial; - margin-inline-end: 4px; } } @@ -97,22 +104,26 @@ } .handleHelpButton { - display: flex; - gap: 2px; - padding: 0; - margin-top: 4px; - appearance: none; - background: none; - border: none; - color: var(--color-text-secondary); - font-size: 13px; - transition: color 0.2s ease-in-out; - word-break: break-all; - text-align: left; - /* Allow the handle text to be selected */ user-select: text; + display: flex; + gap: 2px; + + margin-top: 4px; + padding: 0; + border: none; + + font-size: 13px; + color: var(--color-text-secondary); + text-align: left; + word-break: break-all; + + appearance: none; + background: none; + + transition: color 0.2s ease-in-out; + > svg { width: 16px; height: 16px; @@ -125,13 +136,15 @@ } .handleHelp { - padding: 16px; - background: var(--color-bg-primary); - color: var(--color-text-primary); - border-radius: 12px; - box-shadow: var(--dropdown-shadow); - max-width: 400px; box-sizing: border-box; + max-width: 400px; + padding: 16px; + border-radius: 12px; + + color: var(--color-text-primary); + + background: var(--color-bg-primary); + box-shadow: var(--dropdown-shadow); [data-color-scheme='dark'] & { border: 1px solid var(--color-border-primary); @@ -157,12 +170,13 @@ } > svg { - background: var(--color-bg-brand-softest); + box-sizing: border-box; width: 28px; height: 28px; padding: 5px; border-radius: 9999px; - box-sizing: border-box; + + background: var(--color-bg-brand-softest); } } @@ -172,17 +186,20 @@ } .handleCopy { + box-sizing: border-box; + margin-top: 12px; + padding: 4px 8px; border: 1px solid var(--color-border-primary); border-radius: 8px; - box-sizing: border-box; - padding: 4px 8px; - background-color: var(--color-bg-primary); - color: var(--color-text-primary); + font-size: 13px; + color: var(--color-text-primary); + + background-color: var(--color-bg-primary); + transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out; - margin-top: 12px; &:active, &:focus, @@ -197,20 +214,20 @@ $button-fallback-breakpoint: $button-breakpoint + 55px; .buttonsDesktop, .buttonsMobile { display: flex; - align-items: center; gap: 8px; + align-items: center; :global(.button) { flex-shrink: 1; - white-space: nowrap; min-width: 80px; + white-space: nowrap; } :global(.icon-button) { - border: 1px solid var(--color-border-primary); - border-radius: 4px; box-sizing: content-box; padding: 5px; + border: 1px solid var(--color-border-primary); + border-radius: 4px; &:global(.copied) { border-color: var(--color-text-success); @@ -233,8 +250,8 @@ $button-fallback-breakpoint: $button-breakpoint + 55px; .buttonsMobile { position: sticky; bottom: var(--mobile-bottom-nav-height); - padding: 12px 16px; margin: 0 -16px; + padding: 12px 16px; @container (width >= #{$button-breakpoint}) { display: none; @@ -253,8 +270,8 @@ $button-fallback-breakpoint: $button-breakpoint + 55px; } .buttonsMobileIsStuck { - background-color: var(--color-bg-primary); border-top: 1px solid var(--color-border-primary); + background-color: var(--color-bg-primary); } .buttonMenu { @@ -300,9 +317,11 @@ $button-fallback-breakpoint: $button-breakpoint + 55px; --cols: 4; position: relative; + display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 4px; + margin: 16px 0; @container (width < 420px) { @@ -313,8 +332,8 @@ $button-fallback-breakpoint: $button-breakpoint + 55px; .fieldItem { --col-span: 1; - grid-column: span var(--col-span); position: relative; + grid-column: span var(--col-span); @for $col from 2 through 4 { &[data-cols='#{$col}'] { @@ -335,8 +354,8 @@ $button-fallback-breakpoint: $button-breakpoint + 55px; // Override the MiniCard link styles a { - color: inherit; font-weight: inherit; + color: inherit; &:hover, &:focus { @@ -356,19 +375,21 @@ $button-fallback-breakpoint: $button-breakpoint + 55px; background-color: var(--color-bg-success-softest); &.fieldItem { - border-color: var(--color-border-success-soft); padding-right: 30px; // 8px padding + 16px for the icon + 8px gap - 2px tolerance + border-color: var(--color-border-success-soft); } } .fieldVerifiedIcon { - display: block; position: absolute; - width: 16px; - height: 16px; top: 8px; right: 8px; + display: block; + + width: 16px; + height: 16px; + > svg { width: 100%; height: 100%; @@ -381,10 +402,12 @@ $button-fallback-breakpoint: $button-breakpoint + 55px; position: absolute; right: 8px; + padding: 0 2px; - transition: background-color 0.2s ease-in-out; border: 2px solid var(--color-bg-primary); + transition: background-color 0.2s ease-in-out; + > svg { width: 16px; height: 12px; @@ -393,8 +416,8 @@ $button-fallback-breakpoint: $button-breakpoint + 55px; .modalCloseButton { padding: 8px; - border-radius: 50%; border: 1px solid var(--color-border-primary); + border-radius: 50%; } .modalTitle { @@ -414,23 +437,23 @@ $button-fallback-breakpoint: $button-breakpoint + 55px; &:not(:last-child)::after { content: ''; display: block; - border-bottom: 1px solid var(--color-border-primary); margin-top: 12px; + border-bottom: 1px solid var(--color-border-primary); } dt { - color: var(--color-text-secondary); font-size: 13px; + color: var(--color-text-secondary); } dd { - font-weight: 500; font-size: 15px; + font-weight: 500; } .fieldIconVerified { - vertical-align: middle; margin-left: 4px; + vertical-align: middle; } } @@ -444,30 +467,32 @@ $button-fallback-breakpoint: $button-breakpoint + 55px; .bannerWrapper, .bannerBase { - box-sizing: border-box; display: flex; flex-direction: column; + box-sizing: border-box; } .bannerWrapper { - background: var(--color-bg-tertiary); - padding: 16px; align-items: center; + padding: 16px; + background: var(--color-bg-tertiary); } .bannerBase { - border-radius: 12px; - background: var(--color-bg-secondary); gap: 12px; - justify-content: center; align-items: flex-start; + justify-content: center; + margin: 16px 0; padding: 16px; + border-radius: 12px; + + background: var(--color-bg-secondary); } .bannerBaseCentered { - min-height: 146px; align-items: center; + min-height: 146px; .bannerTextAndActions { text-align: center; @@ -475,9 +500,9 @@ $button-fallback-breakpoint: $button-breakpoint + 55px; } .bannerText { - color: var(--color-text-secondary); font-size: 14px; font-weight: 500; + color: var(--color-text-secondary); text-align: center; } @@ -485,6 +510,7 @@ $button-fallback-breakpoint: $button-breakpoint + 55px; display: flex; flex-direction: column; gap: 4px; + font-size: 13px; font-weight: 400; color: var(--color-text-primary); @@ -497,9 +523,10 @@ $button-fallback-breakpoint: $button-breakpoint + 55px; .bannerActions { display: flex; - justify-content: space-between; - align-items: center; gap: 15px; + align-items: center; + justify-content: space-between; + width: 100%; margin-top: 16px; @@ -517,8 +544,8 @@ $button-fallback-breakpoint: $button-breakpoint + 55px; .bannerInputButton { display: flex; gap: 8px; - align-self: stretch; align-items: flex-start; + align-self: stretch; & > div { flex-grow: 1; @@ -539,13 +566,14 @@ $button-fallback-breakpoint: $button-breakpoint + 55px; } .bannerActionsDisplayName { - color: var(--color-text-secondary); + overflow: hidden; display: flex; - align-items: center; gap: 10px; + align-items: center; + font-size: 15px; line-height: 22px; - overflow: hidden; + color: var(--color-text-secondary); text-decoration: none; &:hover strong { @@ -554,9 +582,9 @@ $button-fallback-breakpoint: $button-breakpoint + 55px; strong, span { + overflow: hidden; display: block; text-overflow: ellipsis; - overflow: hidden; } strong { diff --git a/app/javascript/mastodon/components/account_list_item/styles.module.scss b/app/javascript/mastodon/components/account_list_item/styles.module.scss index a49f47b12a4..beca5dd5a11 100644 --- a/app/javascript/mastodon/components/account_list_item/styles.module.scss +++ b/app/javascript/mastodon/components/account_list_item/styles.module.scss @@ -24,10 +24,10 @@ } .handle { - display: block; overflow: hidden; - white-space: nowrap; + display: block; text-overflow: ellipsis; + white-space: nowrap; } .button { diff --git a/app/javascript/mastodon/components/alt_text_badge/styles.module.scss b/app/javascript/mastodon/components/alt_text_badge/styles.module.scss index 1b7d5ec788a..c9f47754664 100644 --- a/app/javascript/mastodon/components/alt_text_badge/styles.module.scss +++ b/app/javascript/mastodon/components/alt_text_badge/styles.module.scss @@ -1,15 +1,15 @@ .closeButton { - position: absolute; - top: 5px; - inset-inline-end: 2px; - padding: 10px; - --default-icon-color: var(--color-text-on-media); --default-bg-color: transparent; --hover-icon-color: var(--color-text-on-media); --hover-bg-color: rgb(from var(--color-text-on-media) r g b / 10%); --focus-outline-color: var(--color-text-on-media); + position: absolute; + inset-inline-end: 2px; + top: 5px; + padding: 10px; + svg { width: 20px; height: 20px; diff --git a/app/javascript/mastodon/components/autosuggest/styles.module.scss b/app/javascript/mastodon/components/autosuggest/styles.module.scss index f70c3d0f7e0..1f633a3f85a 100644 --- a/app/javascript/mastodon/components/autosuggest/styles.module.scss +++ b/app/javascript/mastodon/components/autosuggest/styles.module.scss @@ -1,14 +1,18 @@ @use '@/styles/mastodon/mixins'; .mirror { - visibility: hidden; pointer-events: none; + position: absolute; top: 0; - left: 0; right: 0; - height: 1lh; + left: 0; + overflow: hidden; + + height: 1lh; + + visibility: hidden; } .textAreaMirror { @@ -16,10 +20,10 @@ } .debug.mirror { + color: white; visibility: visible; opacity: 0.2; background-color: red; - color: white; } .menuWidth { @@ -34,20 +38,22 @@ } .itemIcon { - width: var(--space-3xl); - height: var(--space-3xl); + overflow: hidden; display: flex; align-items: center; justify-content: center; + + width: var(--space-3xl); + height: var(--space-3xl); border-radius: var(--radius-round); - overflow: hidden; + background-color: var(--color-bg-highlight); } .itemHashUses { - color: var(--color-text-tertiary); margin-inline-start: auto; font-size: var(--fs-xs); + color: var(--color-text-tertiary); } .itemAccountName { diff --git a/app/javascript/mastodon/components/badge/styles.module.scss b/app/javascript/mastodon/components/badge/styles.module.scss index 8cb0b78409b..412ea05350f 100644 --- a/app/javascript/mastodon/components/badge/styles.module.scss +++ b/app/javascript/mastodon/components/badge/styles.module.scss @@ -2,16 +2,18 @@ .badge { display: inline-flex; + gap: var(--space-2xs); align-items: center; justify-content: center; - max-width: 100%; + min-width: 1lh; + max-width: 100%; padding: var(--space-2xs); - gap: var(--space-2xs); border-radius: var(--radius-xs); - color: var(--color-text-primary); + font-size: 13px; font-weight: 400; + color: var(--color-text-primary); &:not(.badgeWithoutIcon) { padding-inline-end: var(--space-xs); @@ -19,10 +21,13 @@ > svg { flex-shrink: 0; + width: auto; height: 17px; - fill: currentColor; + opacity: 0.85; + + fill: currentColor; } a { @@ -32,14 +37,14 @@ } .content { - white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + white-space: nowrap; } .domain { - opacity: 0.75; letter-spacing: 0; + opacity: 0.75; } .default { @@ -56,13 +61,13 @@ } .feature { - background-color: var(--color-bg-brand-base); color: var(--color-text-on-brand-base); + background-color: var(--color-bg-brand-base); } .inverted { - background-color: var(--color-bg-inverted); color: var(--color-text-inverted); + background-color: var(--color-bg-inverted); } .success { @@ -74,6 +79,6 @@ } .danger { - background-color: var(--color-bg-error-base); color: var(--color-text-on-error-base); + background-color: var(--color-bg-error-base); } diff --git a/app/javascript/mastodon/components/button/redesign.module.scss b/app/javascript/mastodon/components/button/redesign.module.scss index 325bf95f2dd..e5bc03d3670 100644 --- a/app/javascript/mastodon/components/button/redesign.module.scss +++ b/app/javascript/mastodon/components/button/redesign.module.scss @@ -5,24 +5,28 @@ --bg-hover: color-mix(in srgb, var(--bg) 90%, var(--fg)); --fg: var(--color-text-primary); - background-color: var(--bg); + cursor: pointer; + + display: inline-flex; + column-gap: var(--space-2xs); + align-items: center; + justify-content: center; + + box-sizing: border-box; + border: 0; border-radius: var(--radius-round); + color: var(--fg); + + appearance: none; + background-color: var(--bg); + transition: background-color 200ms, color 200ms, opacity 200ms; - border: 0; - appearance: none; - cursor: pointer; - display: inline-flex; - justify-content: center; - align-items: center; - column-gap: var(--space-2xs); @include mixins.type-label-lg; - box-sizing: border-box; - &:hover:not( :active, :disabled, @@ -68,23 +72,23 @@ a.base { // Sizes .xs { - padding-inline: var(--space-xs); min-height: 20px; + padding-inline: var(--space-xs); } .sm { - padding: var(--space-2xs) var(--space-sm); min-height: 32px; + padding: var(--space-2xs) var(--space-sm); } .md { - padding: var(--space-xs) var(--space-md); min-height: 40px; + padding: var(--space-xs) var(--space-md); } .lg { - padding: var(--space-sm) var(--space-lg); min-height: 48px; + padding: var(--space-sm) var(--space-lg); } // Solid variant diff --git a/app/javascript/mastodon/components/callout/redesign.module.scss b/app/javascript/mastodon/components/callout/redesign.module.scss index 08917807b14..b2b2f2f4388 100644 --- a/app/javascript/mastodon/components/callout/redesign.module.scss +++ b/app/javascript/mastodon/components/callout/redesign.module.scss @@ -2,12 +2,14 @@ .rootLarge, .rootSmall { - align-items: center; - background-color: var(--color-bg-highlight); - border-radius: var(--radius-sm); - box-sizing: border-box; display: flex; gap: var(--space-xs); + align-items: center; + + box-sizing: border-box; + border-radius: var(--radius-sm); + + background-color: var(--color-bg-highlight); } .rootLarge { diff --git a/app/javascript/mastodon/components/callout/styles.module.css b/app/javascript/mastodon/components/callout/styles.module.css index f049f25e983..f33462a828d 100644 --- a/app/javascript/mastodon/components/callout/styles.module.css +++ b/app/javascript/mastodon/components/callout/styles.module.css @@ -1,21 +1,24 @@ .wrapper { display: flex; - align-items: start; - padding: 12px; gap: 8px; - background-color: var(--color-bg-brand-softest); - color: var(--color-text-primary); + align-items: start; + + padding: 12px; border-radius: 12px; + font-size: 15px; line-height: 1.3333; + color: var(--color-text-primary); + + background-color: var(--color-bg-brand-softest); } .icon { - padding: 4px; - border-radius: 9999px; width: 1rem; height: 1rem; margin-block: -2px; + padding: 4px; + border-radius: 9999px; } .content, @@ -25,9 +28,9 @@ .content { display: flex; - gap: 8px; flex-direction: column; flex-grow: 1; + gap: 8px; } @media screen and (width >= 630px) { @@ -38,16 +41,16 @@ .body { flex-grow: 1; - overflow-wrap: break-word; hyphens: auto; + overflow-wrap: break-word; a { color: inherit; } h3 { - font-weight: 500; margin-bottom: 3px; + font-weight: 500; } } @@ -58,15 +61,18 @@ } .action { - appearance: none; - background: none; + padding: 0; border: none; - color: inherit; + font: inherit; font-weight: 500; - padding: 0; - text-wrap: nowrap; + color: inherit; text-decoration: underline; + text-wrap: nowrap; + + appearance: none; + background: none; + transition: color 0.1s ease-in-out; &:hover { @@ -105,8 +111,8 @@ } .variantFeature { - background-color: var(--color-bg-brand-base); color: var(--color-text-on-brand-base); + background-color: var(--color-bg-brand-base); button:hover { color: color-mix(var(--color-text-on-brand-base), transparent 20%); @@ -114,8 +120,8 @@ } .variantInverted { - background-color: var(--color-bg-inverted); color: var(--color-text-inverted); + background-color: var(--color-bg-inverted); } .variantSuccess { diff --git a/app/javascript/mastodon/components/callout_inline/styles.module.css b/app/javascript/mastodon/components/callout_inline/styles.module.css index 8d32f7df9b4..4fa8e033187 100644 --- a/app/javascript/mastodon/components/callout_inline/styles.module.css +++ b/app/javascript/mastodon/components/callout_inline/styles.module.css @@ -1,7 +1,8 @@ .wrapper { display: flex; - align-items: start; gap: 4px; + align-items: start; + font-size: 13px; font-weight: 500; diff --git a/app/javascript/mastodon/components/card/styles.module.scss b/app/javascript/mastodon/components/card/styles.module.scss index d22032836b9..471b2d9891a 100644 --- a/app/javascript/mastodon/components/card/styles.module.scss +++ b/app/javascript/mastodon/components/card/styles.module.scss @@ -1,21 +1,24 @@ @use '@/styles/mastodon/mixins'; .root { - border: 0.5px solid var(--color-border-primary); - border-radius: var(--radius-md); - box-sizing: border-box; + position: relative; + + overflow: hidden; display: flex; flex-direction: column; + + box-sizing: border-box; min-height: 90px; - overflow: hidden; padding: var(--space-sm); - position: relative; + border: 0.5px solid var(--color-border-primary); + border-radius: var(--radius-md); + transition: background 200ms ease-in-out; &:has(.image) { - column-gap: var(--space-sm); display: grid; grid-template-columns: minmax(0, 1fr) 120px; + column-gap: var(--space-sm); padding-inline-end: 0; } } @@ -37,9 +40,9 @@ a.root { .title { @include mixins.type-label-md; - color: var(--color-text-secondary); display: flex; margin-bottom: var(--space-2xs); + color: var(--color-text-secondary); a { color: inherit; @@ -53,19 +56,20 @@ a.root { } .titleImage { - border-radius: var(--radius-round); + overflow: hidden; display: block; + + width: var(--space-lg); height: var(--space-lg); margin-inline-end: var(--space-xs); - overflow: hidden; - width: var(--space-lg); + border-radius: var(--radius-round); } .body { @include mixins.type-body-compact; - overflow-wrap: break-word; flex-grow: 1; + overflow-wrap: break-word; a { color: var(--color-text-brand); @@ -80,9 +84,9 @@ a.root { // Linked body a.body { - padding: 0 var(--space-sm) var(--space-sm); margin: calc(-1 * var(--space-sm)); margin-top: 0; + padding: 0 var(--space-sm) var(--space-sm); .root:has(&:hover) { background-color: var(--color-bg-highlight); @@ -97,9 +101,9 @@ a.body { &, & > img { + width: 100%; height: 100%; object-fit: cover; - width: 100%; } } diff --git a/app/javascript/mastodon/components/column_header/styles.module.scss b/app/javascript/mastodon/components/column_header/styles.module.scss index 315e9c70111..e46c803a577 100644 --- a/app/javascript/mastodon/components/column_header/styles.module.scss +++ b/app/javascript/mastodon/components/column_header/styles.module.scss @@ -2,6 +2,7 @@ .root { position: relative; + display: grid; // Ensure title is centered regardless of side-content @@ -10,12 +11,15 @@ minmax(0, auto) minmax(min-content, 1fr); align-items: center; + min-height: 40px; padding: var(--space-sm); border-top-left-radius: var(--radius-xl); border-top-right-radius: var(--radius-xl); - text-align: center; + color: var(--color-text-primary); + text-align: center; + background: linear-gradient( to bottom, var(--color-bg-primary) var(--column-header-gradient-start, 55%), @@ -26,18 +30,23 @@ .title { @include mixins.type-heading-sm; - grid-column: 2; - white-space: nowrap; - text-overflow: ellipsis; overflow: hidden; + grid-column: 2; + min-width: 0; + text-overflow: ellipsis; + white-space: nowrap; + > button { overflow: hidden; + width: 100%; padding: 0; border: none; + font: inherit; + background: transparent; } } diff --git a/app/javascript/mastodon/components/details/styles.module.scss b/app/javascript/mastodon/components/details/styles.module.scss index 03aace8a626..367b635da54 100644 --- a/app/javascript/mastodon/components/details/styles.module.scss +++ b/app/javascript/mastodon/components/details/styles.module.scss @@ -1,15 +1,17 @@ .details { - color: var(--color-text-secondary); - font-size: 13px; margin-top: 8px; + font-size: 13px; + color: var(--color-text-secondary); summary { cursor: pointer; - font-weight: 600; - list-style: none; + margin-bottom: 8px; + + font-weight: 600; text-decoration: underline; text-decoration-style: dotted; + list-style: none; } :global(.icon) { diff --git a/app/javascript/mastodon/components/empty_state/empty_state.module.scss b/app/javascript/mastodon/components/empty_state/empty_state.module.scss index 868c6ea03b2..222a2c6a500 100644 --- a/app/javascript/mastodon/components/empty_state/empty_state.module.scss +++ b/app/javascript/mastodon/components/empty_state/empty_state.module.scss @@ -1,28 +1,32 @@ .wrapper { display: flex; flex-direction: column; + gap: 16px; align-items: center; justify-content: center; + max-width: 600px; padding: 24px; - gap: 16px; - text-align: center; + color: var(--color-text-primary); + text-align: center; } .content { max-width: 370px; > :where(svg, img) { - width: 200px; aspect-ratio: 1; - object-fit: contain; + width: 200px; max-width: 100%; margin-bottom: 16px; + + object-fit: contain; } p { margin-top: 8px; + font-size: 15px; line-height: 1.4; color: var(--color-text-secondary); @@ -37,8 +41,8 @@ .heading { font-size: 17px; font-weight: 500; - text-wrap: balance; line-height: 1.2; + text-wrap: balance; } .errorImage { diff --git a/app/javascript/mastodon/components/familiar_followers/styles.module.scss b/app/javascript/mastodon/components/familiar_followers/styles.module.scss index f3a11f970f9..98b7af47fc1 100644 --- a/app/javascript/mastodon/components/familiar_followers/styles.module.scss +++ b/app/javascript/mastodon/components/familiar_followers/styles.module.scss @@ -1,11 +1,11 @@ .wrapper { display: flex; - align-items: center; gap: 10px; + align-items: center; a:any-link { font-weight: 500; - text-decoration: none; color: var(--color-text-primary); + text-decoration: none; } } diff --git a/app/javascript/mastodon/components/form_fields/checkbox.module.scss b/app/javascript/mastodon/components/form_fields/checkbox.module.scss index 8f4ab99a5c6..f70a9ae26f9 100644 --- a/app/javascript/mastodon/components/form_fields/checkbox.module.scss +++ b/app/javascript/mastodon/components/form_fields/checkbox.module.scss @@ -2,51 +2,60 @@ --size: 16px; --border-width: 1px; - appearance: none; - box-sizing: border-box; + cursor: pointer; + position: relative; + display: inline-flex; - margin: 0; + + box-sizing: border-box; width: var(--size); height: var(--size); - vertical-align: top; - border-radius: calc(var(--size) / 4); + margin: 0; border: var(--border-width) solid var(--color-border-primary); + border-radius: calc(var(--size) / 4); + + vertical-align: top; + + appearance: none; background-color: var(--color-bg-primary); + transition: 0.15s ease-out; transition-property: background-color, border-color; - cursor: pointer; /* Increase clickable area, prevents misclicks and covers gap between control and label */ &::after { - content: ''; - position: absolute; - --spread: calc(var(--border-width) + var(--form-field-label-gap, 8px)); - inset-inline: calc(-1 * var(--spread)); + content: ''; + position: absolute; inset-block: calc(-0.75 * var(--spread)); - } - - &:disabled { - background: var(--color-bg-tertiary); - border: none; - cursor: not-allowed; + inset-inline: calc(-1 * var(--spread)); } /* Tick icon */ &::before { content: ''; - opacity: 0; - background-color: var(--color-text-on-brand-base); + display: block; - margin: auto; + width: calc(var(--size) * 0.625); height: calc(var(--size) * 0.5); + margin: auto; + + opacity: 0; + background-color: var(--color-text-on-brand-base); + mask-image: url("data:image/svg+xml;utf8,"); + mask-repeat: no-repeat; mask-position: center; mask-size: 100%; - mask-repeat: no-repeat; + } + + &:disabled { + cursor: not-allowed; + border: none; + background: var(--color-bg-tertiary); } /* 'Minus' icon */ @@ -58,8 +67,12 @@ &:checked, &:indeterminate { - background-color: var(--color-bg-brand-base); border-color: var(--color-bg-brand-base); + background-color: var(--color-bg-brand-base); + + &::before { + opacity: 1; + } &:disabled { border: none; @@ -69,10 +82,6 @@ background-color: var(--color-bg-tertiary); } } - - &::before { - opacity: 1; - } } &:focus-visible { diff --git a/app/javascript/mastodon/components/form_fields/combobox.module.scss b/app/javascript/mastodon/components/form_fields/combobox.module.scss index ca0767209cd..28218c582f2 100644 --- a/app/javascript/mastodon/components/form_fields/combobox.module.scss +++ b/app/javascript/mastodon/components/form_fields/combobox.module.scss @@ -15,26 +15,33 @@ &::before { // Subtle divider line separating the button from the input field content: ''; + position: absolute; - inset-inline-start: 0; inset-block: 10px; + inset-inline-start: 0; + border-inline-start: 1px solid var(--color-border-primary); } } .popover { - z-index: 9999; - box-sizing: border-box; - max-height: min(320px, 50dvh); - border-radius: 4px; - color: var(--color-text-primary); - background: var(--color-bg-primary); - border: 1px solid var(--color-border-primary); - box-shadow: var(--dropdown-shadow); - overflow-y: auto; scrollbar-width: thin; scrollbar-gutter: stable; + + z-index: 9999; + + overflow-y: auto; overscroll-behavior-y: contain; + + box-sizing: border-box; + max-height: min(320px, 50dvh); + border: 1px solid var(--color-border-primary); + border-radius: 4px; + + color: var(--color-text-primary); + + background: var(--color-bg-primary); + box-shadow: var(--dropdown-shadow); } .groupTitle { @@ -45,18 +52,21 @@ } .menuItem { - display: flex; - align-items: center; - padding: 8px 12px; - margin-inline: 4px; - gap: 12px; - font-size: 14px; - line-height: 20px; - border-radius: 4px; - color: var(--color-text-primary); cursor: pointer; user-select: none; + display: flex; + gap: 12px; + align-items: center; + + margin-inline: 4px; + padding: 8px 12px; + border-radius: 4px; + + font-size: 14px; + line-height: 20px; + color: var(--color-text-primary); + &:first-child { margin-top: 4px; } @@ -70,29 +80,33 @@ } &[aria-disabled='true'] { - color: var(--color-text-disabled); cursor: not-allowed; + color: var(--color-text-disabled); } } .emptyMessage { display: flex; flex-direction: column; - align-items: center; - text-align: center; gap: 8px; + align-items: center; + padding: 16px; + font-size: 13px; + text-align: center; } .loadingIndicator { --spinner-size: 20px; position: relative; + + overflow: hidden; display: block; + width: var(--spinner-size); height: var(--spinner-size); - overflow: hidden; & :global(.circular-progress) { width: var(--spinner-size); diff --git a/app/javascript/mastodon/components/form_fields/emoji_text_field.module.scss b/app/javascript/mastodon/components/form_fields/emoji_text_field.module.scss index e214f9aed56..a1000a3399c 100644 --- a/app/javascript/mastodon/components/form_fields/emoji_text_field.module.scss +++ b/app/javascript/mastodon/components/form_fields/emoji_text_field.module.scss @@ -13,10 +13,11 @@ .fieldWrapper :global(.emoji-picker-dropdown) { position: absolute; + z-index: 1; top: 8px; right: 8px; + height: 24px; - z-index: 1; :global(.icon-button) { color: var(--color-text-secondary); diff --git a/app/javascript/mastodon/components/form_fields/fieldset.module.scss b/app/javascript/mastodon/components/form_fields/fieldset.module.scss index 2751b3c8a01..4b27db6b41a 100644 --- a/app/javascript/mastodon/components/form_fields/fieldset.module.scss +++ b/app/javascript/mastodon/components/form_fields/fieldset.module.scss @@ -4,8 +4,9 @@ display: flex; flex-direction: column; gap: var(--container-gap); - color: var(--color-text-primary); + font-size: 15px; + color: var(--color-text-primary); } .fieldsWrapper { diff --git a/app/javascript/mastodon/components/form_fields/form_field_wrapper.module.scss b/app/javascript/mastodon/components/form_fields/form_field_wrapper.module.scss index 43b672a2a14..2b75dbacf64 100644 --- a/app/javascript/mastodon/components/form_fields/form_field_wrapper.module.scss +++ b/app/javascript/mastodon/components/form_fields/form_field_wrapper.module.scss @@ -4,13 +4,14 @@ display: flex; flex-direction: column; gap: var(--form-field-label-gap); - color: var(--color-text-primary); + font-size: 15px; + color: var(--color-text-primary); &[data-input-placement^='inline'] { - flex-direction: row; - --form-field-label-gap: 8px; + + flex-direction: row; } &[data-input-placement='inline-start'] { @@ -42,8 +43,8 @@ } .hint { - color: var(--color-text-secondary); font-size: 13px; + color: var(--color-text-secondary); } .status { diff --git a/app/javascript/mastodon/components/form_fields/form_stack.module.scss b/app/javascript/mastodon/components/form_fields/form_stack.module.scss index 083e36c3206..2b4e661d566 100644 --- a/app/javascript/mastodon/components/form_fields/form_stack.module.scss +++ b/app/javascript/mastodon/components/form_fields/form_stack.module.scss @@ -1,7 +1,8 @@ .stack { - box-sizing: border-box; display: flex; flex-direction: column; gap: 25px; + + box-sizing: border-box; padding: 16px; } diff --git a/app/javascript/mastodon/components/form_fields/radio_button.module.scss b/app/javascript/mastodon/components/form_fields/radio_button.module.scss index aaac5404b9d..4c7abd67d34 100644 --- a/app/javascript/mastodon/components/form_fields/radio_button.module.scss +++ b/app/javascript/mastodon/components/form_fields/radio_button.module.scss @@ -2,37 +2,42 @@ --size: 16px; --border-width: calc(var(--size) / 4); - appearance: none; - box-sizing: border-box; + cursor: pointer; + position: relative; + display: inline-flex; - margin: 0; + + box-sizing: border-box; width: var(--size); height: var(--size); - vertical-align: top; - border-radius: 100%; + margin: 0; border: var(--border-width) solid transparent; - box-shadow: 0 0 0 1px var(--color-border-primary); + border-radius: 100%; + + vertical-align: top; + + appearance: none; background-color: var(--color-bg-primary); + box-shadow: 0 0 0 1px var(--color-border-primary); + transition: 0.15s ease-out; transition-property: border-color; - cursor: pointer; /* Increase clickable area, prevents misclicks and covers gap between control and label */ &::after { - content: ''; - position: absolute; - --spread: calc(var(--border-width) + var(--form-field-label-gap, 8px)); - inset-inline: calc(-1 * var(--spread)); + content: ''; + position: absolute; inset-block: calc(-0.75 * var(--spread)); + inset-inline: calc(-1 * var(--spread)); } &:disabled { + cursor: not-allowed; background: var(--color-bg-tertiary); box-shadow: none; - cursor: not-allowed; } &:checked { diff --git a/app/javascript/mastodon/components/form_fields/range_input.module.scss b/app/javascript/mastodon/components/form_fields/range_input.module.scss index 5aa46b52cc3..f21fad15fc8 100644 --- a/app/javascript/mastodon/components/form_fields/range_input.module.scss +++ b/app/javascript/mastodon/components/form_fields/range_input.module.scss @@ -9,46 +9,90 @@ --color-bg-thumb-hover: var(--color-bg-brand-base-hover); --color-bg-track: var(--color-bg-secondary); - width: 100%; - margin: 6px 0; - background-color: transparent; - appearance: none; display: block; - &:focus { - outline: none; - } + width: 100%; + margin: 6px 0; + + appearance: none; + background-color: transparent; // Thumb &::-webkit-slider-thumb { - margin-top: -6px; + cursor: pointer; + width: 16px; height: 16px; - background: var(--color-bg-thumb); + margin-top: -6px; border: 0; border-radius: 50px; - cursor: pointer; + -webkit-appearance: none; + background: var(--color-bg-thumb); } &::-moz-range-thumb { + cursor: pointer; + width: 16px; height: 16px; - background: var(--color-bg-thumb); border: 0; border-radius: 50px; - cursor: pointer; + + background: var(--color-bg-thumb); } &::-ms-thumb { + cursor: pointer; + width: 16px; height: 16px; - background: var(--color-bg-thumb); + margin-top: 0; // Needed to keep the Edge thumb centred border: 0; border-radius: 50px; + + background: var(--color-bg-thumb); + } + + // Track + + &::-webkit-slider-runnable-track { cursor: pointer; - margin-top: 0; // Needed to keep the Edge thumb centred + + width: 100%; + height: 4px; + border: 0; + border-radius: 1.3px; + + background: var(--color-bg-track); + } + + &::-moz-range-track { + cursor: pointer; + + width: 100%; + height: 4px; + border: 0; + border-radius: 1.3px; + + background: var(--color-bg-track); + } + + &::-ms-track { + cursor: pointer; + + width: 100%; + height: 4px; + border: 0; + + color: transparent; + + background: var(--color-bg-track); + } + + &:focus { + outline: none; } &:focus, @@ -82,46 +126,20 @@ outline-offset: 2px; } } - - // Track - - &::-webkit-slider-runnable-track { - background: var(--color-bg-track); - border: 0; - border-radius: 1.3px; - width: 100%; - height: 4px; - cursor: pointer; - } - - &::-moz-range-track { - background: var(--color-bg-track); - border: 0; - border-radius: 1.3px; - width: 100%; - height: 4px; - cursor: pointer; - } - - &::-ms-track { - background: var(--color-bg-track); - border: 0; - color: transparent; - width: 100%; - height: 4px; - cursor: pointer; - } } .markers { + user-select: none; + display: flex; flex-direction: column; justify-content: space-between; - writing-mode: vertical-lr; + width: 100%; + + writing-mode: vertical-lr; font-size: 11px; color: var(--color-text-secondary); - user-select: none; option { padding: 0; diff --git a/app/javascript/mastodon/components/form_fields/redesign.module.scss b/app/javascript/mastodon/components/form_fields/redesign.module.scss index d8543ad32b3..09deb0c2413 100644 --- a/app/javascript/mastodon/components/form_fields/redesign.module.scss +++ b/app/javascript/mastodon/components/form_fields/redesign.module.scss @@ -6,8 +6,8 @@ } .icon { - position: absolute; pointer-events: none; + position: absolute; opacity: 0; transition: color 200ms, @@ -40,27 +40,30 @@ } span { - color: var(--color-text-tertiary); font-size: var(--fs-2xs); line-height: var(--fs-lg); + color: var(--color-text-tertiary); } } input.input { - font-size: var(--fs-lg); - background: none; - border-radius: var(--space-xs); - border: 0.5px solid var(--color-text-tertiary); padding: var(--space-xs); + border: 0.5px solid var(--color-text-tertiary); + border-radius: var(--space-xs); + + font-size: var(--fs-lg); + + background: none; + transition: background 200ms, border 200ms, opacity 200ms; &:hover:not(:disabled) { + background: var(--color-bg-highlight); box-shadow: 0 1px var(--space-2xs) 0 rgb(from var(--color-text-primary) r g b / 10%); - background: var(--color-bg-highlight); } &:focus { @@ -75,10 +78,10 @@ input.input { .inputIcon { svg { + inset-block-start: var(--space-xs); + inset-inline-start: var(--space-xs); width: 20px; height: 20px; - inset-inline-start: var(--space-xs); - inset-block-start: var(--space-xs); } } @@ -88,8 +91,8 @@ input.input { background: var(--color-text-tertiary); &::before { - box-shadow: none; background: var(--color-bg-primary); + box-shadow: none; } } diff --git a/app/javascript/mastodon/components/form_fields/select.module.scss b/app/javascript/mastodon/components/form_fields/select.module.scss index 7ba0a53cbf8..d12ee146f37 100644 --- a/app/javascript/mastodon/components/form_fields/select.module.scss +++ b/app/javascript/mastodon/components/form_fields/select.module.scss @@ -6,18 +6,22 @@ &::after { --icon-size: 11px; + pointer-events: none; content: ''; + position: absolute; + inset-inline-end: 9px; top: 0; bottom: 0; - inset-inline-end: 9px; + width: var(--icon-size); + background-color: var(--color-text-tertiary); - pointer-events: none; + mask-image: url("data:image/svg+xml;utf8,"); + mask-repeat: no-repeat; mask-position: right center; mask-size: var(--icon-size); - mask-repeat: no-repeat; } &:has(.select:focus-visible)::after { @@ -30,24 +34,23 @@ } .select { - appearance: none; - box-sizing: border-box; display: block; + + box-sizing: border-box; width: 100%; height: 41px; padding-inline-start: 10px; padding-inline-end: 30px; + border: 1px solid var(--color-border-primary); + border-radius: 4px; + font-family: inherit; font-size: 14px; color: var(--color-text-primary); - background: var(--color-bg-secondary); - border: 1px solid var(--color-border-primary); - border-radius: 4px; - outline: 0; - @media screen and (width <= 600px) { - font-size: 16px; - } + appearance: none; + background: var(--color-bg-secondary); + outline: 0; &:focus-visible { outline: var(--outline-focus-default); @@ -55,12 +58,16 @@ } &:disabled { - color: var(--color-text-disabled); - border-color: transparent; cursor: not-allowed; + border-color: transparent; + color: var(--color-text-disabled); } [data-has-error='true'] & { border-color: var(--color-border-error); } + + @media screen and (width <= 600px) { + font-size: 16px; + } } diff --git a/app/javascript/mastodon/components/form_fields/text_input.module.scss b/app/javascript/mastodon/components/form_fields/text_input.module.scss index cbb45e0a3a0..8d1ef5a5541 100644 --- a/app/javascript/mastodon/components/form_fields/text_input.module.scss +++ b/app/javascript/mastodon/components/form_fields/text_input.module.scss @@ -1,22 +1,26 @@ .input { - box-sizing: border-box; display: block; + + box-sizing: border-box; width: 100%; padding: 10px 16px; + border: 1px solid var(--color-border-primary); + border-radius: 4px; + font-family: inherit; font-size: 14px; line-height: 20px; color: var(--color-text-primary); + background: var(--color-bg-secondary); - border: 1px solid var(--color-border-primary); - border-radius: 4px; outline: var(--outline-focus-default); outline-color: transparent; outline-offset: -1px; + transition: outline-color 0.15s ease-out; - @media screen and (width <= 600px) { - font-size: 16px; + &::placeholder { + color: var(--color-text-secondary); } .iconWrapper & { @@ -24,10 +28,6 @@ padding-inline-start: 36px; } - &::placeholder { - color: var(--color-text-secondary); - } - &:focus:user-invalid, &:required:user-invalid, [data-has-error='true'] & { @@ -43,9 +43,13 @@ } &:disabled { - color: var(--color-text-disabled); - border-color: transparent; cursor: not-allowed; + border-color: transparent; + color: var(--color-text-disabled); + } + + @media screen and (width <= 600px) { + font-size: 16px; } } @@ -59,10 +63,13 @@ textarea.input { .icon { pointer-events: none; + position: absolute; + inset-block-start: 10px; + inset-inline-start: 10px; + width: 22px; height: 22px; - inset-inline-start: 10px; - inset-block-start: 10px; + color: var(--color-text-secondary); } diff --git a/app/javascript/mastodon/components/form_fields/toggle.module.css b/app/javascript/mastodon/components/form_fields/toggle.module.css index 1dba9644652..b4427a0b2e4 100644 --- a/app/javascript/mastodon/components/form_fields/toggle.module.css +++ b/app/javascript/mastodon/components/form_fields/toggle.module.css @@ -3,39 +3,48 @@ --padding: 2px; --transition: 0.2s ease-in-out; - display: inline-block; position: relative; + display: inline-block; height: calc(var(--diameter) + var(--padding) * 2); } .input { + cursor: pointer; + position: absolute; - opacity: 0; + z-index: 1; + width: 100%; height: 100%; margin: 0; - cursor: pointer; - z-index: 1; + + opacity: 0; } .toggle { display: inline-flex; align-items: center; - border-radius: 9999px; - width: calc(var(--diameter) * 2); - background: var(--color-bg-tertiary); - padding: var(--padding); - transition: background var(--transition); + box-sizing: border-box; + width: calc(var(--diameter) * 2); + padding: var(--padding); + border-radius: 9999px; + + background: var(--color-bg-tertiary); + + transition: background var(--transition); } .toggle::before { content: ''; - height: var(--diameter); + width: var(--diameter); + height: var(--diameter); border-radius: 9999px; + background: var(--color-text-on-brand-base); box-shadow: 0 2px 4px 0 color-mix(var(--color-black), transparent 75%); + transition: transform var(--transition); } diff --git a/app/javascript/mastodon/components/list_item/styles.module.scss b/app/javascript/mastodon/components/list_item/styles.module.scss index 26840e6738d..531d230440d 100644 --- a/app/javascript/mastodon/components/list_item/styles.module.scss +++ b/app/javascript/mastodon/components/list_item/styles.module.scss @@ -3,13 +3,16 @@ --list-item-padding-block: var(--list-item-padding); --list-item-gap: 12px; - box-sizing: border-box; position: relative; + display: flex; - align-items: center; - width: 100%; gap: var(--list-item-gap); + align-items: center; + + box-sizing: border-box; + width: 100%; padding: var(--list-item-padding-block) var(--list-item-padding); + font-size: 15px; color: var(--color-text-primary); } @@ -26,20 +29,22 @@ button { padding: 0; border: none; - color: inherit; - background: none; + font: inherit; + color: inherit; text-decoration: none; - &:hover { - text-decoration: underline; - } + background: none; &::before { content: ''; position: absolute; inset: var(--clickable-area-spread, 0); } + + &:hover { + text-decoration: underline; + } } } @@ -51,8 +56,9 @@ .sideContent { display: flex; gap: var(--list-item-gap); - align-self: stretch; align-items: center; + align-self: stretch; + margin-inline-start: auto; &:has(button, a) { @@ -65,10 +71,11 @@ // padding box around the sideContent &::before { content: ''; + position: absolute; + z-index: -1; inset-block: calc(-1 * var(--list-item-padding-block)); inset-inline: calc(-1 * var(--list-item-padding)); - z-index: -1; } } diff --git a/app/javascript/mastodon/components/menu/styles.module.scss b/app/javascript/mastodon/components/menu/styles.module.scss index 4261cdb7cae..1ae88cb93a9 100644 --- a/app/javascript/mastodon/components/menu/styles.module.scss +++ b/app/javascript/mastodon/components/menu/styles.module.scss @@ -3,14 +3,17 @@ .card { @include mixins.elevation-1; + z-index: calc(infinity); + + overflow: hidden; display: flex; flex-direction: column; + + max-width: var(--_max-card-width, 100vw); padding: var(--space-2xs); border-radius: var(--radius-md); + background: var(--color-bg-primary); - overflow: hidden; - z-index: calc(infinity); - max-width: var(--_max-card-width, 100vw); &[data-elevation='2'] { @include mixins.elevation-2; @@ -24,15 +27,15 @@ .itemGroupLabel { @include mixins.type-label-sm; - color: var(--color-text-tertiary); padding: var(--space-xs) var(--space-sm) 0; + color: var(--color-text-tertiary); } .itemDivider { height: 1px; - background-color: var(--color-border-primary); margin: var(--space-2xs) var(--space-sm); border: none; + background-color: var(--color-border-primary); } .item { @@ -40,24 +43,30 @@ --cursor: pointer; + cursor: var(--cursor); + display: flex; - align-items: center; - border-radius: var(--radius-sm); gap: var(--space-xs); + align-items: center; + padding: var(--space-xs) var(--space-sm); + border-radius: var(--radius-sm); + color: var(--color-text-primary); text-decoration: none; - cursor: var(--cursor); + transition: background 200ms, color 200ms; &:where(button) { + width: 100%; + border: none; + + text-align: start; + appearance: none; background: none; - border: none; - width: 100%; - text-align: start; } &:hover { @@ -80,8 +89,8 @@ &:active:not([aria-disabled='true']), .itemActive { - background-color: var(--color-bg-inverted); color: var(--color-text-inverted); + background-color: var(--color-bg-inverted); label { color: var(--color-text-inverted); diff --git a/app/javascript/mastodon/components/mini_card/styles.module.css b/app/javascript/mastodon/components/mini_card/styles.module.css index 07de32eef05..1c40efeefd7 100644 --- a/app/javascript/mastodon/components/mini_card/styles.module.css +++ b/app/javascript/mastodon/components/mini_card/styles.module.css @@ -4,13 +4,15 @@ } .card { - border: 1px solid var(--color-border-primary); - padding: 8px; - border-radius: 8px; - flex-shrink: 0; display: grid; grid-template-rows: repeat(2, 1fr); + flex-shrink: 0; column-gap: 8px; + + padding: 8px; + border: 1px solid var(--color-border-primary); + border-radius: 8px; + font-size: 13px; line-height: 1rem; color: var(--color-text-secondary); @@ -21,23 +23,25 @@ } .icon { - grid-row: span 2; grid-column: 1; + grid-row: span 2; + align-self: center; + width: 100%; height: auto; - align-self: center; + fill: currentColor; } .value { - color: var(--color-text-primary); font-weight: 500; + color: var(--color-text-primary); a { color: var(--color-text-brand); text-decoration: none; - transition: color 0.2s ease-in-out; outline: none; + transition: color 0.2s ease-in-out; &:hover, &:focus { @@ -49,8 +53,8 @@ .label, .value { overflow: hidden; - white-space: nowrap; text-overflow: ellipsis; + white-space: nowrap; .cardWithIcon & { grid-column: 2; diff --git a/app/javascript/mastodon/components/modal_shell/redesign.module.scss b/app/javascript/mastodon/components/modal_shell/redesign.module.scss index 01f99a914f0..c6fb7f208ac 100644 --- a/app/javascript/mastodon/components/modal_shell/redesign.module.scss +++ b/app/javascript/mastodon/components/modal_shell/redesign.module.scss @@ -3,15 +3,18 @@ .modal { @include mixins.elevation-1; - border-radius: var(--radius-xl); - background: var(--color-bg-primary); + pointer-events: auto; + user-select: text; + + overflow: hidden; display: flex; flex-direction: column; gap: var(--space-md); + padding: var(--space-md); - pointer-events: auto; - user-select: text; - overflow: hidden; + border-radius: var(--radius-xl); + + background: var(--color-bg-primary); } .modalElevated { @@ -24,9 +27,9 @@ .actions { display: flex; + gap: var(--space-md); align-items: center; justify-content: space-between; - gap: var(--space-md); } .actionsLeft { diff --git a/app/javascript/mastodon/components/number_fields/styles.module.scss b/app/javascript/mastodon/components/number_fields/styles.module.scss index cfe6de5c527..1117900133f 100644 --- a/app/javascript/mastodon/components/number_fields/styles.module.scss +++ b/app/javascript/mastodon/components/number_fields/styles.module.scss @@ -3,9 +3,11 @@ display: flex; flex-wrap: wrap; + gap: 4px var(--_item-gap); + margin: 0; padding: 0; - gap: 4px var(--_item-gap); + font-size: 13px; color: var(--color-text-secondary); } @@ -19,9 +21,10 @@ button, strong { display: block; + + font-size: 15px; font-weight: 600; color: var(--color-text-primary); - font-size: 15px; white-space: nowrap; } @@ -39,10 +42,12 @@ } button { + display: block; + + padding: 0; + border: none; + appearance: none; background: none; - border: none; - display: block; - padding: 0; } } diff --git a/app/javascript/mastodon/components/server_hero_image/styles.module.scss b/app/javascript/mastodon/components/server_hero_image/styles.module.scss index 7af71d26416..9cc9ca86de9 100644 --- a/app/javascript/mastodon/components/server_hero_image/styles.module.scss +++ b/app/javascript/mastodon/components/server_hero_image/styles.module.scss @@ -1,5 +1,5 @@ .altBadge { position: absolute; - bottom: 8px; inset-inline-end: 8px; + bottom: 8px; } diff --git a/app/javascript/mastodon/components/sortable_list/styles.module.scss b/app/javascript/mastodon/components/sortable_list/styles.module.scss index 6aa33e9fecd..fbeef0740f1 100644 --- a/app/javascript/mastodon/components/sortable_list/styles.module.scss +++ b/app/javascript/mastodon/components/sortable_list/styles.module.scss @@ -11,8 +11,8 @@ } .defaultHandle { - appearance: none; border: none; - background: none; vertical-align: middle; + appearance: none; + background: none; } diff --git a/app/javascript/mastodon/components/tab_list/styles.module.scss b/app/javascript/mastodon/components/tab_list/styles.module.scss index 95a71114fd7..b8cef94b987 100644 --- a/app/javascript/mastodon/components/tab_list/styles.module.scss +++ b/app/javascript/mastodon/components/tab_list/styles.module.scss @@ -10,12 +10,15 @@ .tab { display: block; + padding: 18px 0; - color: var(--color-text-primary); + border-radius: 0; + font-size: 15px; font-weight: 500; + color: var(--color-text-primary); text-decoration: none; - border-radius: 0; + transition: color 0.2s ease-in-out; @container (width < 500px) { @@ -38,8 +41,8 @@ } &:global(.active) { - color: var(--color-text-brand); - border-bottom: 4px solid var(--color-border-brand); padding-bottom: 14px; + border-bottom: 4px solid var(--color-border-brand); + color: var(--color-text-brand); } } diff --git a/app/javascript/mastodon/components/tags/style.module.css b/app/javascript/mastodon/components/tags/style.module.css index dd14cc43df8..5b8ce6463f4 100644 --- a/app/javascript/mastodon/components/tags/style.module.css +++ b/app/javascript/mastodon/components/tags/style.module.css @@ -1,14 +1,18 @@ .tag { - border-radius: 9999px; + display: inline-flex; + gap: 2px; + align-items: center; + + padding: 6px 8px; border: 1px solid var(--color-border-primary); + border-radius: 9999px; + + color: var(--color-text-primary); + appearance: none; background: none; - padding: 6px 8px; + transition: all 0.2s ease-in-out; - color: var(--color-text-primary); - display: inline-flex; - align-items: center; - gap: 2px; } button.tag:hover, @@ -23,19 +27,19 @@ button.tag:focus-visible { .active { border-color: var(--color-border-brand); - background: var(--color-bg-brand-softest); color: var(--color-text-brand); + background: var(--color-bg-brand-softest); } .icon { - height: 1.2em; width: 1.2em; + height: 1.2em; } .closeButton { svg { - height: 1.2em; width: 1.2em; + height: 1.2em; } } diff --git a/app/javascript/mastodon/features/account_edit/modals/styles.module.scss b/app/javascript/mastodon/features/account_edit/modals/styles.module.scss index f4eaf04f09d..243655b4b31 100644 --- a/app/javascript/mastodon/features/account_edit/modals/styles.module.scss +++ b/app/javascript/mastodon/features/account_edit/modals/styles.module.scss @@ -1,7 +1,7 @@ .wrapper { display: flex; - gap: 16px; flex-direction: column; + gap: 16px; font-size: 15px; } @@ -21,22 +21,28 @@ } .field { - padding: 12px 0; + touch-action: none; + + position: relative; + display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; - touch-action: none; - position: relative; + + padding: 12px 0; } .fieldNotFirst::before, .fieldActiveUnder::after { content: ''; + position: absolute; - left: 0; right: 0; + left: 0; + height: 1px; + background: var(--color-border-primary); } @@ -49,12 +55,16 @@ } .fieldHandle { - grid-row: span 2; - padding: 8px 0; - align-self: center; - border-radius: 4px; - background: var(--color-bg-secondary); cursor: grab; + + grid-row: span 2; + align-self: center; + + padding: 8px 0; + border-radius: 4px; + + background: var(--color-bg-secondary); + transition: background 0.2s ease-in-out; &:hover { @@ -81,18 +91,18 @@ } .uploadWrapper { - min-height: min(400px, 70vh); justify-content: center; + min-height: min(400px, 70vh); } .uploadStepSelect { text-align: center; h2 { - color: var(--color-text-primary); + margin-bottom: 4px; font-size: 15px; font-weight: 600; - margin-bottom: 4px; + color: var(--color-text-primary); } button { @@ -102,17 +112,18 @@ .cropContainer { position: relative; + overflow: hidden; width: 100%; height: 300px; - overflow: hidden; } .cropActions { - margin-top: 8px; // 16px gap from DialogModal, plus 8px = 24px to look like normal action buttons. display: flex; gap: 8px; align-items: center; justify-content: flex-end; + + margin-top: 8px; // 16px gap from DialogModal, plus 8px = 24px to look like normal action buttons. } .zoomControl { @@ -125,18 +136,20 @@ } .altImage { - max-height: 150px; - object-fit: contain; align-self: flex-start; + + max-height: 150px; border: 1px solid var(--color-border-primary); border-radius: var(--avatar-border-radius); + + object-fit: contain; } .altHint { ul { + margin-bottom: 1em; padding-left: 1em; list-style: disc; - margin-bottom: 1em; } } @@ -145,26 +158,29 @@ li { counter-increment: steps; - padding-left: 34px; - margin-top: 24px; position: relative; + margin-top: 24px; + padding-left: 34px; + + &::before { + content: counter(steps); + + position: absolute; + left: 0; + + width: 16px; + height: 16px; + padding: 4px; + border: 1px solid var(--color-border-primary); + border-radius: 9999px; + + font-weight: 600; + line-height: 16px; + text-align: center; + } h2 { font-weight: 600; } - - &::before { - content: counter(steps); - position: absolute; - left: 0; - border: 1px solid var(--color-border-primary); - border-radius: 9999px; - font-weight: 600; - padding: 4px; - width: 16px; - height: 16px; - line-height: 16px; - text-align: center; - } } } diff --git a/app/javascript/mastodon/features/account_edit/styles.module.scss b/app/javascript/mastodon/features/account_edit/styles.module.scss index 0c8ba3b33a3..cd6e71d4559 100644 --- a/app/javascript/mastodon/features/account_edit/styles.module.scss +++ b/app/javascript/mastodon/features/account_edit/styles.module.scss @@ -1,20 +1,23 @@ // Profile Edit Page .profileImage { - height: 120px; - background: var(--color-bg-secondary); - border-bottom: 1px solid var(--color-border-primary); - overflow: hidden; position: relative; + overflow: hidden; + + height: 120px; + border-bottom: 1px solid var(--color-border-primary); + + background: var(--color-bg-secondary); + @container (width >= 500px) { height: 160px; } > img { - object-fit: cover; width: 100%; height: 100%; + object-fit: cover; } .imageButton { @@ -24,18 +27,18 @@ } .avatar { - margin-top: -64px; - margin-left: 22px; position: relative; width: 82px; + margin-top: -64px; + margin-left: 22px; > :global(.account__avatar) { border: 1px solid var(--color-border-primary); } .imageButton { - bottom: -8px; right: -8px; + bottom: -8px; } } @@ -64,10 +67,10 @@ } .field { - padding: 12px 0; display: flex; gap: 4px; align-items: start; + padding: 12px 0; > div { flex-grow: 1; @@ -104,8 +107,8 @@ .tagSuggestions { display: flex; - gap: 4px; flex-wrap: wrap; + gap: 4px; align-items: center; // Add more padding to the suggestions label @@ -130,27 +133,28 @@ .columnHeader { :global(.column-header__buttons) { align-items: center; - padding-inline-end: 16px; height: auto; + padding-inline-end: 16px; } } // Edit button component .editButton { - border: 1px solid var(--color-border-primary); - border-radius: 8px; box-sizing: border-box; padding: 4px; + border: 1px solid var(--color-border-primary); + border-radius: 8px; + transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out; &:global(.button) { - background-color: var(--color-bg-primary); - color: var(--color-text-primary); - font-size: 13px; padding: 4px 8px; + font-size: 13px; + color: var(--color-text-primary); + background-color: var(--color-bg-primary); &:active, &:focus, @@ -159,8 +163,8 @@ } &:disabled { - background-color: var(--color-bg-primary); opacity: 0.5; + background-color: var(--color-bg-primary); } } @@ -184,13 +188,13 @@ } .fieldName { - color: var(--color-text-secondary); font-size: 13px; + color: var(--color-text-secondary); } .fieldValue { - color: var(--color-text-primary); font-size: 15px; + color: var(--color-text-primary); } // Image edit component @@ -198,23 +202,25 @@ .imageButton { --default-bg-color: var(--color-bg-primary); + position: absolute; + + box-sizing: border-box; + width: 28px; + height: 28px; + padding: 4px; + border: 1px solid var(--color-border-primary); + border-radius: 9999px; + + transition: + color 0.2s ease-in-out, + background-color 0.2s ease-in-out; + &, &:global(.active) { // Overrides the transparent background added by default with .active --hover-bg-color: var(--color-bg-brand-softest); } - position: absolute; - width: 28px; - height: 28px; - border: 1px solid var(--color-border-primary); - border-radius: 9999px; - box-sizing: border-box; - padding: 4px; - transition: - color 0.2s ease-in-out, - background-color 0.2s ease-in-out; - svg { width: 18px; height: 18px; @@ -244,8 +250,8 @@ .itemListButtons { display: flex; - align-items: center; gap: 4px; + align-items: center; } // Section component @@ -262,8 +268,8 @@ .sectionHeader { display: flex; - align-items: center; gap: 8px; + align-items: center; margin-bottom: 16px; } diff --git a/app/javascript/mastodon/features/account_featured/components/subheading.module.scss b/app/javascript/mastodon/features/account_featured/components/subheading.module.scss index aee5d65af26..afae4802995 100644 --- a/app/javascript/mastodon/features/account_featured/components/subheading.module.scss +++ b/app/javascript/mastodon/features/account_featured/components/subheading.module.scss @@ -1,25 +1,30 @@ .subheading { - box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; + + box-sizing: border-box; min-height: 52px; padding: 12px 16px; + font-size: 13px; font-weight: 500; - text-transform: uppercase; color: var(--color-text-primary); + text-transform: uppercase; + background: var(--color-bg-secondary); } .link { display: flex; + padding-block: 4px; + font-size: 13px; font-weight: 500; - text-transform: none; - text-decoration: none; color: inherit; + text-decoration: none; + text-transform: none; &:hover { text-decoration: underline; diff --git a/app/javascript/mastodon/features/account_timeline/modals/styles.module.scss b/app/javascript/mastodon/features/account_timeline/modals/styles.module.scss index 67a4f43d44e..1ee0bcf8dc9 100644 --- a/app/javascript/mastodon/features/account_timeline/modals/styles.module.scss +++ b/app/javascript/mastodon/features/account_timeline/modals/styles.module.scss @@ -5,16 +5,18 @@ } .noteInput { - min-height: 70px; - width: 100%; - padding: 8px; - border-radius: 8px; - box-sizing: border-box; - background: var(--color-bg-primary); - border: 1px solid var(--color-border-primary); - appearance: none; resize: none; + + box-sizing: border-box; + width: 100%; + min-height: 70px; margin-top: 4px; + padding: 8px; + border: 1px solid var(--color-border-primary); + border-radius: 8px; + + appearance: none; + background: var(--color-bg-primary); } .noteInput:focus-visible { @@ -28,30 +30,33 @@ } .fieldValue { - color: var(--color-text-primary); - font-weight: 600; margin-top: 4px; + font-weight: 600; + color: var(--color-text-primary); } @media screen and (min-width: ($mobile-breakpoint + 1)) { .joinShell { > :global(.safety-action-modal__top) { - border-bottom-left-radius: 16px; - border-bottom-right-radius: 16px; border-bottom-width: 1px; + border-bottom-right-radius: 16px; + border-bottom-left-radius: 16px; } } } .joinWrapper { + position: relative; + display: flex; flex-direction: column; - color: var(--color-text-primary); + gap: 16px; align-items: center; justify-content: center; - position: relative; + min-height: 120px; - gap: 16px; + + color: var(--color-text-primary); p, h1 { @@ -71,26 +76,28 @@ } .joinBanner { - width: 120px; - height: 110px; position: relative; + display: flex; flex-direction: column; align-items: center; justify-content: center; + width: 120px; + height: 110px; + svg { - width: 100%; position: absolute; top: 0; left: 0; + width: 100%; } h2 { + margin-top: 8px; font-size: 40px; font-weight: 600; line-height: 40px; - margin-top: 8px; } h3 { @@ -102,7 +109,7 @@ .joinClose { position: absolute; + z-index: 1; top: 0; right: 0; - z-index: 1; } diff --git a/app/javascript/mastodon/features/account_timeline/styles.module.scss b/app/javascript/mastodon/features/account_timeline/styles.module.scss index bb90dbbb827..a11cbfaf630 100644 --- a/app/javascript/mastodon/features/account_timeline/styles.module.scss +++ b/app/javascript/mastodon/features/account_timeline/styles.module.scss @@ -3,15 +3,19 @@ } .filterSelectButton { - appearance: none; - border: none; - color: inherit; - background: none; - padding: 8px 0; - font-size: 15px; - font-weight: 500; display: flex; align-items: center; + + padding: 8px 0; + border: none; + + font-size: 15px; + font-weight: 500; + color: inherit; + + appearance: none; + background: none; + transition: color 0.2s ease-in-out; &:hover, @@ -26,16 +30,19 @@ } .filterOverlay { - background: var(--color-bg-primary); - border-radius: 12px; - box-shadow: var(--dropdown-shadow); - min-width: 230px; + z-index: 1; + display: grid; grid-template-columns: 1fr auto; - align-items: stretch; row-gap: 16px; + align-items: stretch; + + min-width: 230px; padding: 8px 12px; - z-index: 1; + border-radius: 12px; + + background: var(--color-bg-primary); + box-shadow: var(--dropdown-shadow); > label { cursor: pointer; @@ -57,25 +64,26 @@ .tagsWrapper { display: flex; flex-wrap: nowrap; - justify-content: flex-start; gap: 8px; + justify-content: flex-start; } .tagsList { - display: flex; - gap: 4px; - flex-wrap: nowrap; - overflow: hidden; position: relative; + overflow: hidden; + display: flex; + flex-wrap: nowrap; + gap: 4px; + > button { flex-shrink: 0; } } .tagsListShowAll { - flex-wrap: wrap; overflow: visible; + flex-wrap: wrap; max-width: none !important; } @@ -90,21 +98,24 @@ } .pinnedViewAllButton { - background-color: var(--color-bg-primary); - border-radius: 8px; - border: 1px solid var(--color-border-primary); box-sizing: border-box; - color: var(--color-text-primary); - line-height: normal; + width: calc(100% - 32px); margin: 12px 16px; padding: 8px; + border: 1px solid var(--color-border-primary); + border-radius: 8px; + + line-height: normal; + color: var(--color-text-primary); + + background-color: var(--color-bg-primary); + transition: border-color 0.2s ease-in-out; - width: calc(100% - 32px); &:hover, &:focus { - background-color: inherit; border-color: var(--color-bg-brand-base-hover); + background-color: inherit; } } @@ -125,8 +136,7 @@ } .pinnedBadge { - justify-self: end; - // Allow "click to open post" event to pass through pointer-events: none; + justify-self: end; } diff --git a/app/javascript/mastodon/features/annual_report/announcement/styles.module.scss b/app/javascript/mastodon/features/annual_report/announcement/styles.module.scss index 9ec62fa0fdb..b87a080808e 100644 --- a/app/javascript/mastodon/features/annual_report/announcement/styles.module.scss +++ b/app/javascript/mastodon/features/annual_report/announcement/styles.module.scss @@ -1,12 +1,20 @@ .wrapper { + pointer-events: all; + + position: relative; + display: flex; flex-direction: column; align-items: center; + padding: 40px 60px; - text-align: center; + border-bottom: 1px solid var(--color-border-primary); + font-size: 15px; line-height: 1.5; color: var(--color-text-primary); + text-align: center; + background: var(--color-bg-primary); background: radial-gradient(at 40% 87%, #240c9a99 0, transparent 50%), @@ -14,15 +22,12 @@ radial-gradient(at 90% 27%, #9a0c8299 0, transparent 50%), radial-gradient(at 16% 95%, #1e948299 0, transparent 50%) var(--color-bg-primary); - border-bottom: 1px solid var(--color-border-primary); - position: relative; - pointer-events: all; h2 { + margin-bottom: 8px; font-size: 20px; font-weight: 500; line-height: 1.2; - margin-bottom: 8px; } p { @@ -31,8 +36,8 @@ .closeButton { position: absolute; - bottom: 8px; right: 8px; + bottom: 8px; margin-inline: 0; } diff --git a/app/javascript/mastodon/features/annual_report/index.module.scss b/app/javascript/mastodon/features/annual_report/index.module.scss index 024518d72f7..ac66fd86b59 100644 --- a/app/javascript/mastodon/features/annual_report/index.module.scss +++ b/app/javascript/mastodon/features/annual_report/index.module.scss @@ -2,30 +2,33 @@ $mobile-breakpoint: 540px; @font-face { font-family: silkscreen-wrapstodon; + font-weight: normal; + font-style: normal; + + font-display: swap; src: url('@/fonts/silkscreen-wrapstodon/silkscreen-regular.woff2') format('woff2'); - font-weight: normal; - font-display: swap; - font-style: normal; } .modalWrapper { - box-sizing: border-box; + scrollbar-color: var(--color-text-secondary) var(--color-bg-secondary); + + overflow-y: auto; display: flex; flex-direction: column; align-items: center; + + box-sizing: border-box; width: 100%; padding: 40px; - overflow-y: auto; - scrollbar-color: var(--color-text-secondary) var(--color-bg-secondary); - - @media (width < $mobile-breakpoint) { - padding: 0; - } .loading-indicator .circular-progress { color: var(--lime); } + + @media (width < $mobile-breakpoint) { + padding: 0; + } } .closeButton { @@ -38,6 +41,7 @@ $mobile-breakpoint: 540px; position: absolute; top: var(--corner-distance); right: var(--corner-distance); + padding: 8px; border-radius: 100%; @@ -51,15 +55,21 @@ $mobile-breakpoint: 540px; .wrapper { --gradient-strength: 0.4; - box-sizing: border-box; + pointer-events: all; + position: relative; + + contain: layout; + flex: 0 0 auto; + + box-sizing: border-box; max-width: 600px; padding: 24px; padding-top: 40px; - contain: layout; - flex: 0 0 auto; - pointer-events: all; + border-radius: 40px; + color: var(--color-text-primary); + background: var(--color-bg-primary); background: radial-gradient( @@ -88,11 +98,10 @@ $mobile-breakpoint: 540px; transparent 40% ) var(--color-bg-primary); - border-radius: 40px; @media (width < $mobile-breakpoint) { - padding-inline: 12px; padding-bottom: 12px; + padding-inline: 12px; border-radius: 0; } } @@ -102,15 +111,16 @@ $mobile-breakpoint: 540px; text-align: center; h1 { - font-family: silkscreen-wrapstodon, monospace; - font-size: 28px; - line-height: 1; margin-bottom: 4px; padding-inline: 40px; // Prevent overlap with close button + font-family: silkscreen-wrapstodon, monospace; + font-size: 28px; + line-height: 1; + @media (width < $mobile-breakpoint) { - font-size: 22px; margin-bottom: 4px; + font-size: 22px; } } @@ -129,18 +139,24 @@ $mobile-breakpoint: 540px; .box { position: relative; + padding: 24px; border-radius: 16px; + background: rgb(from var(--color-bg-primary) r g b / 60%); box-shadow: inset 0 0 0 1px rgb(from var(--color-text-primary) r g b / 40%); &::before, &::after { content: ''; + position: absolute; inset-inline: 0; + display: block; + height: 1px; + background-image: linear-gradient( to right, transparent, @@ -161,8 +177,9 @@ $mobile-breakpoint: 540px; .content { display: flex; flex-direction: column; - justify-content: center; gap: 8px; + justify-content: center; + font-size: 14px; text-align: center; text-wrap: balance; @@ -173,9 +190,9 @@ $mobile-breakpoint: 540px; } .title { - text-transform: uppercase; - color: var(--color-text-brand-soft); font-weight: 500; + color: var(--color-text-brand-soft); + text-transform: uppercase; &:last-child { margin-bottom: -3px; @@ -200,43 +217,36 @@ $mobile-breakpoint: 540px; } .mostBoostedPost { + overflow: hidden; padding: 0; padding-top: 24px; - overflow: hidden; } .statsGrid { display: grid; - gap: var(--grid-spacing); - grid-template-columns: 1fr 2fr; grid-template-areas: 'followers hashtag' 'new-posts hashtag'; - - @media (width < $mobile-breakpoint) { - grid-template-columns: 1fr 1fr; - grid-template-areas: - 'followers new-posts' - 'hashtag hashtag'; - } + grid-template-columns: 1fr 2fr; + gap: var(--grid-spacing); &:empty { display: none; } &.onlyHashtag { - grid-template-columns: 1fr; grid-template-areas: 'hashtag'; + grid-template-columns: 1fr; } &.noHashtag { - grid-template-columns: 1fr 1fr; grid-template-areas: 'followers new-posts'; + grid-template-columns: 1fr 1fr; } &.singleNumber { - grid-template-columns: 1fr 2fr; grid-template-areas: 'number hashtag'; + grid-template-columns: 1fr 2fr; @media (width < $mobile-breakpoint) { grid-template-areas: @@ -246,8 +256,15 @@ $mobile-breakpoint: 540px; } &.singleNumber.noHashtag { - grid-template-columns: 1fr; grid-template-areas: 'number'; + grid-template-columns: 1fr; + } + + @media (width < $mobile-breakpoint) { + grid-template-areas: + 'followers new-posts' + 'hashtag hashtag'; + grid-template-columns: 1fr 1fr; } } @@ -275,8 +292,8 @@ $mobile-breakpoint: 540px; .archetype { display: flex; flex-direction: column; - align-items: center; gap: 16px; + align-items: center; p { max-width: 460px; @@ -285,10 +302,12 @@ $mobile-breakpoint: 540px; .archetypeArtboard { position: relative; + display: flex; flex-direction: column; align-items: center; align-self: center; + width: 180px; padding-top: 40px; } @@ -297,23 +316,31 @@ $mobile-breakpoint: 540px; position: absolute; top: 7px; left: 4px; - border-radius: 100%; + overflow: hidden; + + border-radius: 100%; } .archetypeIllustrationWrapper { position: relative; - width: 92px; - aspect-ratio: 1; + overflow: hidden; + + aspect-ratio: 1; + width: 92px; border-radius: 100%; &::after { content: ''; - display: block; + position: absolute; inset: 0; + + display: block; + border-radius: inherit; + box-shadow: inset -10px -4px 15px #00000080; } } diff --git a/app/javascript/mastodon/features/annual_report/shared_page.module.scss b/app/javascript/mastodon/features/annual_report/shared_page.module.scss index ea3ea471b90..4d8d437e930 100644 --- a/app/javascript/mastodon/features/annual_report/shared_page.module.scss +++ b/app/javascript/mastodon/features/annual_report/shared_page.module.scss @@ -15,13 +15,15 @@ $mobile-breakpoint: 540px; .footer { display: flex; flex-direction: column; - align-items: center; gap: 1.8rem; + align-items: center; + margin-top: 2rem; + font-size: 16px; line-height: 1.4; - text-align: center; color: var(--color-text-secondary); + text-align: center; strong { font-weight: 600; @@ -46,13 +48,13 @@ $mobile-breakpoint: 540px; .footerSection { display: flex; flex-direction: column; - align-items: center; gap: 0.5rem; + align-items: center; } .linkList { - list-style: none; display: flex; flex-wrap: wrap; gap: 12px; + list-style: none; } diff --git a/app/javascript/mastodon/features/collections/components/collection_list_item.module.scss b/app/javascript/mastodon/features/collections/components/collection_list_item.module.scss index 1079d1aebf0..fc66866b3ec 100644 --- a/app/javascript/mastodon/features/collections/components/collection_list_item.module.scss +++ b/app/javascript/mastodon/features/collections/components/collection_list_item.module.scss @@ -9,9 +9,9 @@ .menuButton { align-self: start; - padding: 4px; margin-top: -4px; margin-inline-end: -4px; + padding: 4px; svg { width: 20px; diff --git a/app/javascript/mastodon/features/collections/components/collection_lockup.module.scss b/app/javascript/mastodon/features/collections/components/collection_lockup.module.scss index cdd5b183685..6da8e0b8c8f 100644 --- a/app/javascript/mastodon/features/collections/components/collection_lockup.module.scss +++ b/app/javascript/mastodon/features/collections/components/collection_lockup.module.scss @@ -22,11 +22,14 @@ .avatarSensitiveBadge { position: absolute; inset: 0; - margin: auto; - padding: 3px; + width: 18px; height: 18px; + margin: auto; + padding: 3px; border-radius: 8px; - fill: var(--color-text-primary); + background: var(--color-bg-warning-softest); + + fill: var(--color-text-primary); } diff --git a/app/javascript/mastodon/features/collections/components/collection_preview_card.module.scss b/app/javascript/mastodon/features/collections/components/collection_preview_card.module.scss index 26eb44539e4..3fb5f472471 100644 --- a/app/javascript/mastodon/features/collections/components/collection_preview_card.module.scss +++ b/app/javascript/mastodon/features/collections/components/collection_preview_card.module.scss @@ -1,8 +1,8 @@ .wrapper { --list-item-padding: 12px; - border-radius: 12px; border: 1px solid var(--color-border-primary); + border-radius: 12px; } .removeButton { diff --git a/app/javascript/mastodon/features/collections/components/share_modal.module.scss b/app/javascript/mastodon/features/collections/components/share_modal.module.scss index de10bb63c05..2c5bdf44a5d 100644 --- a/app/javascript/mastodon/features/collections/components/share_modal.module.scss +++ b/app/javascript/mastodon/features/collections/components/share_modal.module.scss @@ -1,7 +1,7 @@ .heading { + margin-bottom: 16px; font-size: 28px; line-height: 1.3; - margin-bottom: 16px; } .preview { @@ -19,8 +19,9 @@ $bottomsheet-breakpoint: 630px; .shareButtonWrapper { display: flex; flex-wrap: wrap; - justify-content: center; gap: 8px; + justify-content: center; + width: 100%; & > button { @@ -36,8 +37,8 @@ $bottomsheet-breakpoint: 630px; .closeButtonDesktop { position: absolute; - top: 4px; inset-inline-end: 4px; + top: 4px; padding: 8px; @media (width <= $bottomsheet-breakpoint) { diff --git a/app/javascript/mastodon/features/collections/detail/styles.module.scss b/app/javascript/mastodon/features/collections/detail/styles.module.scss index 9f0e18b4b74..a7c3e064483 100644 --- a/app/javascript/mastodon/features/collections/detail/styles.module.scss +++ b/app/javascript/mastodon/features/collections/detail/styles.module.scss @@ -2,22 +2,24 @@ display: flex; flex-direction: column; gap: 12px; + padding: 16px; padding-bottom: 24px; } .titleWithMenu { display: flex; - align-items: start; gap: 10px; + align-items: start; } .titleWrapper { - flex-grow: 1; display: flex; flex-direction: column; - align-items: start; + flex-grow: 1; gap: 4px; + align-items: start; + min-width: 0; } @@ -54,8 +56,8 @@ .iconButton { box-sizing: content-box; padding: 7px; - border-radius: 4px; border: 1px solid var(--color-border-primary); + border-radius: 4px; svg { width: 20px; @@ -70,8 +72,9 @@ .subheadingWithSelect { display: flex; flex-wrap: wrap; - align-items: center; gap: 8px 16px; + align-items: center; + padding-inline: 16px; } diff --git a/app/javascript/mastodon/features/collections/editor/styles.module.scss b/app/javascript/mastodon/features/collections/editor/styles.module.scss index 354badfdbaa..50fba166efd 100644 --- a/app/javascript/mastodon/features/collections/editor/styles.module.scss +++ b/app/javascript/mastodon/features/collections/editor/styles.module.scss @@ -10,15 +10,15 @@ } .title { + margin-top: 4px; font-size: 17px; font-weight: 500; line-height: 1.2; - margin-top: 4px; } .description { - font-size: 15px; margin-top: 8px; + font-size: 15px; } .listHeading { @@ -42,8 +42,10 @@ .stickyFooter { position: sticky; bottom: var(--bottom-spacing); + margin-top: -16px; padding: 16px; + background-image: linear-gradient( to bottom, transparent, @@ -69,8 +71,8 @@ } &[aria-disabled='true'] { - opacity: 0.6; cursor: not-allowed; + opacity: 0.6; } } diff --git a/app/javascript/mastodon/features/collections/styles.module.scss b/app/javascript/mastodon/features/collections/styles.module.scss index ed2ba13a09f..633f9c7c53e 100644 --- a/app/javascript/mastodon/features/collections/styles.module.scss +++ b/app/javascript/mastodon/features/collections/styles.module.scss @@ -2,6 +2,7 @@ display: flex; flex-direction: column; gap: 8px; + padding-top: 24px; padding-inline: 16px; border-bottom: 1px solid var(--color-border-primary); @@ -16,8 +17,9 @@ .listHeader { display: flex; - justify-content: space-between; align-items: center; + justify-content: space-between; + min-height: 28px; padding-top: 16px; padding-inline: 16px; diff --git a/app/javascript/mastodon/features/compose/redesign/attachments.module.scss b/app/javascript/mastodon/features/compose/redesign/attachments.module.scss index cb512e0d3f4..dd0eb934171 100644 --- a/app/javascript/mastodon/features/compose/redesign/attachments.module.scss +++ b/app/javascript/mastodon/features/compose/redesign/attachments.module.scss @@ -10,9 +10,10 @@ .mediaGrid { display: grid; - gap: var(--space-3xs); grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); + gap: var(--space-3xs); + aspect-ratio: 3/2; &[data-number='2'] { @@ -25,12 +26,15 @@ } .mediaUpload { - border-radius: var(--radius-md); position: relative; - background-size: cover; - background-position: center; - background-repeat: no-repeat; + overflow: hidden; + + border-radius: var(--radius-md); + + background-repeat: no-repeat; + background-position: center; + background-size: cover; } .blurHash { @@ -39,8 +43,8 @@ } .mediaUploadPending { - animation: pulse 1s ease-in-out infinite; background-color: var(--color-bg-disabled); + animation: pulse 1s ease-in-out infinite; } @keyframes pulse { @@ -62,15 +66,19 @@ .mediaAlt { @include mixins.type-micro; + position: absolute; + right: var(--space-xs); + bottom: var(--space-xs); + display: block; + padding: var(--space-2xs); border-radius: var(--radius-xs); - background: var(--color-bg-inverted); + color: var(--color-text-inverted); - position: absolute; - bottom: var(--space-xs); - right: var(--space-xs); text-transform: uppercase; + + background: var(--color-bg-inverted); } .mediaMenuDelete { @@ -83,27 +91,29 @@ --height: var(--space-5xl); display: flex; - align-items: center; - border-radius: var(--radius-md); gap: var(--space-2xs); - border: 0.5px solid var(--color-text-tertiary); + align-items: center; + padding: var(--space-xs); + border: 0.5px solid var(--color-text-tertiary); + border-radius: var(--radius-md); } .audioCover { - height: var(--height); - width: auto; aspect-ratio: 1; + width: auto; + height: var(--height); border-radius: var(--radius-sm); } .audioControl { overflow: hidden; - border-radius: var(--radius-sm); display: block; - box-sizing: border-box; flex-grow: 1; + + box-sizing: border-box; height: var(--height); + border-radius: var(--radius-sm); } // Polls @@ -112,15 +122,18 @@ display: flex; flex-direction: column; gap: var(--space-sm); + + padding: var(--space-xs); border: 0.5px solid var(--color-text-tertiary); border-radius: var(--radius-md); - padding: var(--space-xs); ol { + counter-reset: poll; + display: flex; flex-direction: column; gap: var(--space-xs); - counter-reset: poll; + width: 100%; } @@ -130,21 +143,25 @@ } .pollOption { + counter-increment: poll; display: flex; gap: var(--space-sm); align-items: center; - counter-increment: poll; &::before { @include mixins.type-micro; content: counter(poll, upper-alpha); + + flex-shrink: 0; + width: var(--space-lg); height: var(--space-lg); - flex-shrink: 0; + border-radius: var(--radius-xs); + line-height: var(--space-lg); text-align: center; - border-radius: var(--radius-xs); + background: var(--color-bg-highlight); } } @@ -181,8 +198,8 @@ } .quoteSpoiler { - background: var(--color-bg-highlight); - border-radius: var(--radius-sm); margin: var(--space-2xs) 0; padding: var(--space-xs); + border-radius: var(--radius-sm); + background: var(--color-bg-highlight); } diff --git a/app/javascript/mastodon/features/compose/redesign/modals.module.scss b/app/javascript/mastodon/features/compose/redesign/modals.module.scss index d2c6b0d91e2..f8925dd3961 100644 --- a/app/javascript/mastodon/features/compose/redesign/modals.module.scss +++ b/app/javascript/mastodon/features/compose/redesign/modals.module.scss @@ -14,14 +14,16 @@ .attachmentItem { display: flex; - align-items: center; gap: var(--space-sm); - padding: var(--space-xs) var(--space-xs); + align-items: center; + margin: 0 var(--space-xs); + padding: var(--space-xs) var(--space-xs); + border-bottom: 0.5px solid var(--color-border-primary); + transition: opacity 200ms, var(--transition, none); - border-bottom: 0.5px solid var(--color-border-primary); &:focus { outline: var(--outline-focus-default); @@ -29,17 +31,17 @@ } img { - height: 60px; width: 90px; - object-fit: cover; + height: 60px; border-radius: var(--radius-md); + object-fit: cover; } } .attachmentHandle { - padding: var(--space-xs) 0; - aspect-ratio: auto; cursor: inherit; + aspect-ratio: auto; + padding: var(--space-xs) 0; } .attachmentGrabbed > * { @@ -48,6 +50,6 @@ .attachmentOverlay { cursor: grabbing; - border-bottom: 0; margin: 0; + border-bottom: 0; } diff --git a/app/javascript/mastodon/features/compose/redesign/styles.module.scss b/app/javascript/mastodon/features/compose/redesign/styles.module.scss index 7f79ba69963..6b12e1a552e 100644 --- a/app/javascript/mastodon/features/compose/redesign/styles.module.scss +++ b/app/javascript/mastodon/features/compose/redesign/styles.module.scss @@ -2,34 +2,40 @@ @use '@/styles/mastodon/variables'; .root { + z-index: 1; // To cover the sidebar + container-type: inline-size; - background: var(--color-bg-primary); display: flex; flex-direction: column; gap: var(--space-md); + padding: var(--space-md); - z-index: 1; // To cover the sidebar + + background: var(--color-bg-primary); @media (width >= #{variables.$mobile-menu-breakpoint}) { @include mixins.elevation-2; - border-radius: var(--radius-xl); overflow: hidden; + border-radius: var(--radius-xl); } } .background { - mask-repeat: repeat; - mask-image: url('@/images/composer_message.svg'); - mask-size: 311.36px auto; - background-color: var(--color-border-brand); - opacity: 0.15; - position: absolute; - bottom: 0; - right: 0; - top: 0; - left: 0; pointer-events: none; + + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + + opacity: 0.15; + background-color: var(--color-border-brand); + + mask-image: url('@/images/composer_message.svg'); + mask-repeat: repeat; + mask-size: 311.36px auto; } .header { @@ -45,9 +51,9 @@ .toolbar { display: flex; + flex-wrap: wrap; gap: var(--space-xs); align-items: center; - flex-wrap: wrap; label { font-weight: inherit; @@ -56,9 +62,9 @@ .flexGrowWrap { display: flex; - align-items: center; - gap: var(--space-xs); flex-grow: 1; + gap: var(--space-xs); + align-items: center; @container (width < 310px) { flex-basis: 100%; @@ -84,28 +90,35 @@ .textareaWrapper { --fade-size: var(--space-xl); - overflow-y: auto; - flex-grow: 1; - display: flex; - flex-direction: column; scrollbar-width: thin; - overscroll-behavior-y: contain; + position: relative; + overflow-y: auto; + overscroll-behavior-y: contain; + display: flex; + flex-direction: column; + flex-grow: 1; + &::after { + pointer-events: none; content: ''; + + position: sticky; + bottom: 0; + + flex-shrink: 0; + height: var(--fade-size); + margin-top: calc(-1 * var(--fade-size)); + + opacity: 0; background: linear-gradient( to top, var(--color-bg-primary), transparent var(--fade-size) ); - position: sticky; - bottom: 0; - flex-shrink: 0; - margin-top: calc(-1 * var(--fade-size)); - opacity: 0; - pointer-events: none; + transition: opacity 200ms; } @@ -122,15 +135,19 @@ } .textarea { + cursor: text; + flex-grow: 1; flex-shrink: 0; - border-radius: var(--radius-xs); - transition: border 200ms; - cursor: text; - border: none; + width: 100%; - outline: none; + border: none; + border-radius: var(--radius-xs); + background: none; + outline: none; + + transition: border 200ms; &:focus { outline: 2px solid var(--color-border-brand); @@ -147,13 +164,16 @@ textarea.textarea { } .textareaMirror { - visibility: hidden; pointer-events: none; + position: absolute; top: 0; - left: 0; right: 0; + left: 0; + white-space: pre-wrap; // This makes the formatting match the text area. + + visibility: hidden; } .attachments { @@ -165,18 +185,20 @@ textarea.textarea { .footer { display: flex; - align-items: center; - gap: var(--space-2xs); flex-wrap: wrap; + gap: var(--space-2xs); + align-items: center; } .counter { display: flex; - align-items: center; gap: var(--space-3xs); + align-items: center; + + margin-inline-start: auto; + font-family: var(--font-monospace); color: var(--color-text-tertiary); - margin-inline-start: auto; } .counterError { @@ -198,8 +220,8 @@ textarea.textarea { } .languageList { - max-height: 350px; overflow-y: auto; + max-height: 350px; } .languageItem { @@ -213,8 +235,8 @@ textarea.textarea { // Reply .reply { - border-inline-start: 0.5px solid var(--color-border-primary); padding: 0 var(--space-md); + border-inline-start: 0.5px solid var(--color-border-primary); } .replyAccount { @@ -228,9 +250,9 @@ textarea.textarea { } .replyAvatar { + overflow: hidden; margin-inline-end: var(--space-xs); border-radius: var(--radius-round); - overflow: hidden; } .replyTime { @@ -260,9 +282,10 @@ textarea.textarea { div.emojiRoot { position: relative; z-index: 2; - padding: 0; + min-width: 300px; min-height: 300px; + padding: 0; &:has(.emojiLoading) { display: flex; diff --git a/app/javascript/mastodon/features/compose/redesign/trigger.module.scss b/app/javascript/mastodon/features/compose/redesign/trigger.module.scss index 26badd3a68c..3ece7d310c3 100644 --- a/app/javascript/mastodon/features/compose/redesign/trigger.module.scss +++ b/app/javascript/mastodon/features/compose/redesign/trigger.module.scss @@ -3,9 +3,9 @@ .button { &:not(.buttonInline) { position: fixed; - bottom: var(--space-md); - right: var(--space-md); z-index: 2; + right: var(--space-md); + bottom: var(--space-md); } } @@ -17,8 +17,8 @@ } .composer { - width: 100%; top: env(safe-area-inset-top); + width: 100%; // Set from the visualViewport API. height: var(--viewport-height, 100vh); @@ -27,11 +27,12 @@ @media (width >= #{variables.$mobile-menu-breakpoint}) { top: auto; bottom: 0; - min-height: 520px; - height: auto; - min-width: 300px; + width: calc(100vw - var(--space-md) * 2); + min-width: 300px; max-width: 500px; + height: auto; + min-height: 520px; margin: var(--space-md); } } @@ -47,8 +48,8 @@ .composerMinimized { bottom: 0; width: min(320px, calc(100vw - var(--space-md) * 2)); - padding: var(--space-md); margin: var(--space-md); + padding: var(--space-md); @media (width < #{variables.$mobile-menu-breakpoint}) { bottom: var(--mobile-bottom-nav-height); diff --git a/app/javascript/mastodon/features/custom_homepage/styles.module.scss b/app/javascript/mastodon/features/custom_homepage/styles.module.scss index 3ca7cc3c1bb..ad37129f599 100644 --- a/app/javascript/mastodon/features/custom_homepage/styles.module.scss +++ b/app/javascript/mastodon/features/custom_homepage/styles.module.scss @@ -1,10 +1,10 @@ @use '@/styles/mastodon/mixins'; .page { - border-radius: 16px; - border: 1px solid var(--color-border-primary); - background: var(--color-bg-primary); min-height: 100%; + border: 1px solid var(--color-border-primary); + border-radius: 16px; + background: var(--color-bg-primary); :global(.item-list) article:last-child :global(.status) { border-bottom: 0; @@ -31,9 +31,11 @@ .topSection { display: flex; - padding: 16px; flex-direction: column; gap: 8px; + + padding: 16px; + color: var(--color-text-primary); h1 { @@ -55,26 +57,26 @@ padding: 16px; h2 { + margin-bottom: 8px; font-size: 16px; font-weight: 500; line-height: 22.4px; - margin-bottom: 8px; } :global(.account) { - border: 1px solid var(--color-border-primary); - padding: 18px 16px; - border-radius: 12px; - --avatar-border-radius: 50%; + + padding: 18px 16px; + border: 1px solid var(--color-border-primary); + border-radius: 12px; } } .placeholder { - padding: 4px 0; display: flex; flex-direction: column; gap: 12px; + padding: 4px 0; :global(.skeleton) { height: 40px; @@ -84,10 +86,10 @@ } .minimalHeader { - padding-top: 24px; - padding-bottom: 12px; display: flex; align-items: center; + padding-top: 24px; + padding-bottom: 12px; @media screen and (width <= 1175px) { padding-inline-start: 12px; @@ -96,36 +98,38 @@ } .leftSide { + max-width: 300px; font-size: 15px; font-weight: 600; - max-width: 300px; a { - text-decoration: none; color: inherit; + text-decoration: none; } } .rightSide { display: flex; - justify-content: flex-end; - align-items: center; - gap: 4px; flex: 1 0 0; + gap: 4px; + align-items: center; + justify-content: flex-end; } .minimalFooter { display: flex; - justify-content: space-between; + flex-wrap: wrap; + gap: 8px; align-items: center; - color: var(--color-text-secondary); + justify-content: space-between; + + padding-top: 28px; + padding-bottom: 54px; + font-size: 16px; font-weight: 500; line-height: 22.4px; - padding-top: 28px; - padding-bottom: 54px; - gap: 8px; - flex-wrap: wrap; + color: var(--color-text-secondary); a { color: inherit; diff --git a/app/javascript/mastodon/features/followers/styles.module.scss b/app/javascript/mastodon/features/followers/styles.module.scss index 6294044c3bb..a3ab698523f 100644 --- a/app/javascript/mastodon/features/followers/styles.module.scss +++ b/app/javascript/mastodon/features/followers/styles.module.scss @@ -1,7 +1,7 @@ .title { + margin: 20px 16px 10px; font-size: 20px; font-weight: 600; - margin: 20px 16px 10px; } .subtitle, diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/account_card_and_menu.module.scss b/app/javascript/mastodon/features/navigation_panel/redesign/account_card_and_menu.module.scss index 20cbc147a37..9bbbf02053b 100644 --- a/app/javascript/mastodon/features/navigation_panel/redesign/account_card_and_menu.module.scss +++ b/app/javascript/mastodon/features/navigation_panel/redesign/account_card_and_menu.module.scss @@ -1,20 +1,21 @@ .root { display: flex; align-items: center; + padding: var(--space-xs); border: 1px solid var(--color-border-primary); border-radius: var(--radius-sm); & > :global(.account) { - flex-grow: 1; - overflow: hidden; - --account-outer-spacing: 0; --avatar-border-radius: var(--radius-round); --account-name-color: var(--color-text-primary); --account-name-size: var(--fs-sm); --account-handle-color: var(--color-text-secondary); --account-handle-size: var(--fs-2xs); + + overflow: hidden; + flex-grow: 1; } & :global(.display-name) { diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/footer_links.module.scss b/app/javascript/mastodon/features/navigation_panel/redesign/footer_links.module.scss index 016a048a2c3..4e1085798da 100644 --- a/app/javascript/mastodon/features/navigation_panel/redesign/footer_links.module.scss +++ b/app/javascript/mastodon/features/navigation_panel/redesign/footer_links.module.scss @@ -3,8 +3,9 @@ .root { display: flex; flex-wrap: wrap; - align-items: center; gap: var(--space-xs); + align-items: center; + margin-top: var(--space-xl); @include mixins.type-label-sm; @@ -17,8 +18,8 @@ .list { display: flex; flex-wrap: wrap; - align-items: baseline; gap: var(--space-xs); + align-items: baseline; a { color: var(--color-text-secondary); diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/header.module.scss b/app/javascript/mastodon/features/navigation_panel/redesign/header.module.scss index cccd26aec20..b61e5115d42 100644 --- a/app/javascript/mastodon/features/navigation_panel/redesign/header.module.scss +++ b/app/javascript/mastodon/features/navigation_panel/redesign/header.module.scss @@ -1,18 +1,20 @@ @use '@/styles/mastodon/mixins'; .root { - position: sticky; - top: 0; - z-index: 1; - display: flex; - align-items: center; - // We're distributing the bottom spacing between padding and margin so that // not too much of it overlaps the navigation links when scrolled down --half-bottom-spacing: calc(var(--space-xl) / 2); - padding: var(--space-xl) var(--space-lg) var(--half-bottom-spacing); + position: sticky; + z-index: 1; + top: 0; + + display: flex; + align-items: center; + margin-bottom: var(--half-bottom-spacing); + padding: var(--space-xl) var(--space-lg) var(--half-bottom-spacing); + background: var(--color-bg-blend-solid); &::after { @@ -31,11 +33,14 @@ --app-icon-size: 40px; display: flex; - align-items: center; column-gap: var(--space-xs); + align-items: center; + min-width: 0; + color: inherit; text-decoration: none; + outline-offset: var(--space-3xs); &:hover { @@ -51,8 +56,8 @@ .appIcon { align-self: center; - width: var(--app-icon-size); aspect-ratio: 1; + width: var(--app-icon-size); } .serverName { @@ -73,7 +78,8 @@ width: 1em; height: 1em; margin-inline-end: var(--space-3xs); - vertical-align: middle; + color: inherit; + vertical-align: middle; } } diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/list_section.module.scss b/app/javascript/mastodon/features/navigation_panel/redesign/list_section.module.scss index 07cdd9b8c76..ed174d9ac90 100644 --- a/app/javascript/mastodon/features/navigation_panel/redesign/list_section.module.scss +++ b/app/javascript/mastodon/features/navigation_panel/redesign/list_section.module.scss @@ -9,15 +9,15 @@ .titleWrapper { display: flex; align-items: center; - padding-inline: var(--space-xs); padding-block: calc(var(--space-xs) - var(--space-3xs)); + padding-inline: var(--space-xs); } .title { @include mixins.type-label-sm; - color: var(--color-text-secondary); cursor: default; + color: var(--color-text-secondary); } .action { diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/mobile_nav.module.scss b/app/javascript/mastodon/features/navigation_panel/redesign/mobile_nav.module.scss index a65a7432490..aa95d49e7ee 100644 --- a/app/javascript/mastodon/features/navigation_panel/redesign/mobile_nav.module.scss +++ b/app/javascript/mastodon/features/navigation_panel/redesign/mobile_nav.module.scss @@ -2,21 +2,23 @@ @use '@/styles/mastodon/variables' as *; .root { + // Allow clicking through this container + pointer-events: none; + position: fixed; - bottom: env(safe-area-inset-bottom); - inset-inline: 0; - padding: 0 var(--space-md) var(--space-md); z-index: 100; + inset-inline: 0; + bottom: env(safe-area-inset-bottom); + display: flex; // This moves the compose FAB above the navigation, // which somehow makes more sense for the focus order flex-direction: column-reverse; - align-items: end; gap: var(--space-xs); + align-items: end; - // Allow clicking through this container - pointer-events: none; + padding: 0 var(--space-md) var(--space-md); & > * { pointer-events: initial; @@ -28,13 +30,15 @@ } .list { - box-sizing: border-box; display: flex; align-items: center; align-self: stretch; + + box-sizing: border-box; padding: var(--space-2xs); - background-color: var(--color-bg-primary); border-radius: var(--radius-round); + + background-color: var(--color-bg-primary); @include mixins.elevation-1; > li { @@ -48,12 +52,15 @@ } .slideOutWrapper { - position: fixed; - inset: 0; - z-index: 200; pointer-events: none; - background: rgb(from var(--color-bg-overlay) r g b/50%); + + position: fixed; + z-index: 200; + inset: 0; + opacity: 0; + background: rgb(from var(--color-bg-overlay) r g b/50%); + transition: opacity 250ms ease; &[data-is-open='true'] { @@ -68,13 +75,16 @@ // the background underneath the menu isn't revealed --pull-tolerance: 70px; + touch-action: pan-y; + position: fixed; inset-block: 0; inset-inline-start: calc(-1 * var(--pull-tolerance)); + width: var(--navigation-max-width); max-width: calc(100vw - var(--space-3xl)); padding-inline-start: var(--pull-tolerance); - touch-action: pan-y; + background: var(--color-bg-primary); box-shadow: var(--dropdown-shadow); } diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/navigation_link.module.scss b/app/javascript/mastodon/features/navigation_panel/redesign/navigation_link.module.scss index 15f65d84bc6..f2f52cb30ed 100644 --- a/app/javascript/mastodon/features/navigation_panel/redesign/navigation_link.module.scss +++ b/app/javascript/mastodon/features/navigation_panel/redesign/navigation_link.module.scss @@ -14,35 +14,32 @@ --border-radius: var(--radius-sm); position: relative; - box-sizing: border-box; + display: flex; + column-gap: var(--space-sm); align-items: center; + + box-sizing: border-box; width: 100%; padding: var(--space-xs); - column-gap: var(--space-sm); - border-radius: var(--border-radius); border: none; + border-radius: var(--border-radius); + color: inherit; - background-color: transparent; - - @include mixins.type-body-compact; - - text-decoration: none; text-align: start; + text-decoration: none; + + background-color: transparent; &:not(:where(.linkStacked, .linkMobile)) { color: var(--color-text-secondary); } - @media (width < variables.$mobile-menu-breakpoint) { - min-height: 40px; - } - &:hover, &:focus-visible, &[aria-current='page'] { - background-color: var(--color-bg-highlight); text-decoration: none; + background-color: var(--color-bg-highlight); } &[aria-current='page'] { @@ -57,6 +54,12 @@ // Override silly global focus style border-radius: var(--border-radius); } + + @media (width < variables.$mobile-menu-breakpoint) { + min-height: 40px; + } + + @include mixins.type-body-compact; } .linkStacked { @@ -72,9 +75,9 @@ --icon-size: 24px; --border-radius: var(--radius-round); - width: 100%; - justify-content: center; gap: 0; + justify-content: center; + width: 100%; padding-block: var(--space-sm); } @@ -94,24 +97,29 @@ &::after { content: ''; + position: absolute; top: var(--space-4xs); left: calc(50% + var(--space-3xs)); + width: var(--space-xs); height: var(--space-xs); - border-radius: var(--radius-round); - background-color: var(--color-bg-brand-base); border: 1px solid var(--color-bg-primary); + border-radius: var(--radius-round); + + background-color: var(--color-bg-brand-base); } } .label { - max-width: 100%; - min-width: 0; flex-grow: 1; flex-shrink: 1; - overflow-wrap: break-word; + + min-width: 0; + max-width: 100%; + hyphens: auto; + overflow-wrap: break-word; .linkStacked & { text-align: center; @@ -121,7 +129,7 @@ .badge { .linkStacked & { position: absolute; - top: var(--space-3xs); inset-inline-start: calc(50% + var(--space-3xs)); + top: var(--space-3xs); } } diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/styles.module.scss b/app/javascript/mastodon/features/navigation_panel/redesign/styles.module.scss index de4cedc9744..c0193e9edc2 100644 --- a/app/javascript/mastodon/features/navigation_panel/redesign/styles.module.scss +++ b/app/javascript/mastodon/features/navigation_panel/redesign/styles.module.scss @@ -1,20 +1,22 @@ @use '@/styles/mastodon/mixins'; .root { - position: relative; - display: flex; - flex-direction: column; - height: 100%; - overflow-y: auto; - scrollbar-width: thin; - // Approximate height of fixed navigation elements // to ensure focused elements are scrolled into view // as needed. --header-height: 80px; --footer-height: 200px; + scrollbar-width: thin; scroll-padding-block: var(--header-height) var(--footer-height); + + position: relative; + + overflow-y: auto; + display: flex; + flex-direction: column; + + height: 100%; } .list { @@ -25,9 +27,11 @@ .footer { position: sticky; bottom: 0; + margin-top: auto; padding: var(--space-xl); padding-top: var(--space-2xs); + background-color: var(--color-bg-blend-solid); &::before { diff --git a/app/javascript/mastodon/features/notifications_v2/components/notification_collection.module.scss b/app/javascript/mastodon/features/notifications_v2/components/notification_collection.module.scss index 93627f5c957..0d239599e24 100644 --- a/app/javascript/mastodon/features/notifications_v2/components/notification_collection.module.scss +++ b/app/javascript/mastodon/features/notifications_v2/components/notification_collection.module.scss @@ -7,8 +7,8 @@ box-sizing: content-box; margin-inline-start: auto; padding: 4px; - border-radius: 4px; border: 1px solid var(--color-border-primary); + border-radius: 4px; svg { width: 20px; diff --git a/app/javascript/mastodon/features/ui/components/columns_area/redesign.module.scss b/app/javascript/mastodon/features/ui/components/columns_area/redesign.module.scss index d1f77e35130..878c932faf7 100644 --- a/app/javascript/mastodon/features/ui/components/columns_area/redesign.module.scss +++ b/app/javascript/mastodon/features/ui/components/columns_area/redesign.module.scss @@ -5,8 +5,9 @@ --navigation-min-width: 280px; --navigation-max-width: 320px; - box-sizing: border-box; display: flex; + + box-sizing: border-box; width: 100%; height: 100%; min-height: 100vh; @@ -29,8 +30,9 @@ .navigationWrapper { position: sticky; - top: 0; z-index: 1; + top: 0; + max-width: var(--navigation-max-width); height: 100dvh; padding-bottom: env(safe-area-inset-bottom); @@ -41,15 +43,18 @@ } .main { - box-sizing: border-box; - grid-column: 2; - display: flex; - flex-direction: column; - flex: 0 1 auto; - width: 100%; - contain: inline-size layout paint style; container: column / inline-size; + contain: inline-size layout paint style; + display: flex; + grid-column: 2; + flex: 0 1 auto; + flex-direction: column; + + box-sizing: border-box; + width: 100%; + color: var(--color-text-primary); + background-color: var(--color-bg-primary); } @@ -58,25 +63,27 @@ // overlay gradient of the nested `ColumnHeader` component work --column-header-gradient-start: 55%; + position: sticky; + z-index: 2; + top: 0; + + border-top: 0; + background: linear-gradient( to bottom, var(--color-bg-blend-solid) var(--column-header-gradient-start), transparent var(--column-header-gradient-start) ); - position: sticky; - top: 0; - z-index: 2; - border-top: 0; - - @media (width >= $mobile-menu-breakpoint) { - border-top: 10px solid var(--color-bg-blend-solid); - } // Fix bg color for legacy column headers. // Remove when new column headers are in. & :global(.column-header) { background: var(--color-bg-primary); } + + @media (width >= $mobile-menu-breakpoint) { + border-top: 10px solid var(--color-bg-blend-solid); + } } .content { diff --git a/app/javascript/mastodon/features/ui/components/confirmation_modals/styles.module.css b/app/javascript/mastodon/features/ui/components/confirmation_modals/styles.module.css index f685c4525f1..6c8e112c19f 100644 --- a/app/javascript/mastodon/features/ui/components/confirmation_modals/styles.module.css +++ b/app/javascript/mastodon/features/ui/components/confirmation_modals/styles.module.css @@ -1,7 +1,9 @@ .checkbox_wrapper { - display: flex; - align-items: center; - gap: 0.5rem; - margin: 1rem 0; cursor: pointer; + + display: flex; + gap: 0.5rem; + align-items: center; + + margin: 1rem 0; } diff --git a/app/javascript/mastodon/features/ui/components/link_footer.module.scss b/app/javascript/mastodon/features/ui/components/link_footer.module.scss index beb0173ffda..be04ac1f378 100644 --- a/app/javascript/mastodon/features/ui/components/link_footer.module.scss +++ b/app/javascript/mastodon/features/ui/components/link_footer.module.scss @@ -1,9 +1,11 @@ .wrapper { z-index: 1; - flex: 0 0 auto; + display: flex; + flex: 0 0 auto; flex-direction: column; gap: 20px; + font-size: 13px; color: var(--color-text-secondary); @@ -17,9 +19,9 @@ &[data-context='about'] { margin-top: 60px; - text-align: center; font-size: 15px; line-height: 22px; + text-align: center; @media screen and (width >= 1175px) { display: none; diff --git a/app/javascript/mastodon/features/ui/components/skip_links/skip_links.module.scss b/app/javascript/mastodon/features/ui/components/skip_links/skip_links.module.scss index ad206dfecc5..62cd878624e 100644 --- a/app/javascript/mastodon/features/ui/components/skip_links/skip_links.module.scss +++ b/app/javascript/mastodon/features/ui/components/skip_links/skip_links.module.scss @@ -1,29 +1,35 @@ .list { position: fixed; z-index: 100; + margin: 10px; padding: 10px 16px; border-radius: 10px; + font-size: 15px; color: var(--color-text-primary); + background: var(--color-bg-primary); box-shadow: var(--dropdown-shadow); /* Hide visually when not focused */ &:not(:focus-within) { + overflow: hidden; + width: 1px; height: 1px; margin: 0; padding: 0; + clip-path: inset(50%); - overflow: hidden; } } .listItem { display: flex; - align-items: center; gap: 10px; + align-items: center; + padding-inline-end: 4px; border-radius: 4px; @@ -32,13 +38,15 @@ } &:focus-within { - outline: var(--outline-focus-default); background: var(--color-bg-brand-softest); + outline: var(--outline-focus-default); } :any-link { display: block; + padding: 8px; + color: inherit; text-decoration-color: var(--color-text-secondary); text-underline-offset: 0.2em; @@ -52,13 +60,16 @@ .hotkeyHint { display: inline-block; + box-sizing: border-box; min-width: 2.5ch; margin-inline-start: auto; padding: 3px 5px; - font-family: 'Courier New', Courier, monospace; - text-align: center; - background: var(--color-bg-primary); border: 1px solid var(--color-border-primary); border-radius: 4px; + + font-family: 'Courier New', Courier, monospace; + text-align: center; + + background: var(--color-bg-primary); } diff --git a/app/javascript/mastodon/hooks/useScrollSensor/styles.module.scss b/app/javascript/mastodon/hooks/useScrollSensor/styles.module.scss index 80d61a56c16..54ffc4e0308 100644 --- a/app/javascript/mastodon/hooks/useScrollSensor/styles.module.scss +++ b/app/javascript/mastodon/hooks/useScrollSensor/styles.module.scss @@ -1,7 +1,7 @@ .sensor { - height: 1px; pointer-events: none; flex-shrink: 0; + height: 1px; &[data-placement='top'] { position: absolute;