IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

DEV: Fix all mixed-decls sass deprecations (#31343)

Browse Source 
```
WARNING: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.

More info: https://sass-lang.com/d/mixed-decls
```
This commit is contained in:
Jarek Radosz 2025-02-13 23:58:19 +01:00 committed by GitHub
parent 8c9514b4ba
commit be513ed9a3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
48 changed files with 226 additions and 213 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/assets/stylesheets/common/admin/admin_base.scss
View File

@ -1057,8 +1057,8 @@ table#user-badges {
} }
.remove-value-btn { .remove-value-btn {
@include value-btn;
margin-right: 0.25em; margin-right: 0.25em;
@include value-btn;
} }
.shift-up-value-btn, .shift-up-value-btn,
@ -1117,9 +1117,9 @@ table#user-badges {
.value .add-value-btn, .value .add-value-btn,
.shift-up-value-btn, .shift-up-value-btn,
.shift-down-value-btn { .shift-down-value-btn {
@include value-btn;
margin-right: 0 !important; margin-right: 0 !important;
margin-left: 0.25em; margin-left: 0.25em;
@include value-btn;
} }
.secret-value-list { .secret-value-list {
@ -1148,9 +1148,9 @@ table#user-badges {
} }
.add-value-btn { .add-value-btn {
@include value-btn;
margin-left: 0.25em; margin-left: 0.25em;
margin-top: 0.125em; margin-top: 0.125em;
@include value-btn;
} }
} }
} }

3
app/assets/stylesheets/common/admin/customize.scss
View File

@ -815,6 +815,8 @@
margin-left: 0; margin-left: 0;
li { li {
display: table-row;
&.disabled-child { &.disabled-child {
.child-link { .child-link {
color: var(--primary-medium); color: var(--primary-medium);
@ -828,7 +830,6 @@
.btn { .btn {
margin-left: 5px; margin-left: 5px;
} }
display: table-row;
.col.child-link { .col.child-link {
padding-right: 10px; padding-right: 10px;

2
app/assets/stylesheets/common/admin/staff_logs.scss
View File

@ -136,6 +136,7 @@
.staff-action-logs-controls { .staff-action-logs-controls {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 0 0 1em 0;
.select-kit { .select-kit {
margin: 0 0.5em; margin: 0 0.5em;
@ -144,7 +145,6 @@
button { button {
margin-left: auto; margin-left: auto;
} }
margin: 0 0 1em 0;
a.filter { a.filter {
.label { .label {

2
app/assets/stylesheets/common/admin/users.scss
View File

@ -13,6 +13,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
padding: 10px 5px; padding: 10px 5px;
border-top: 1px solid var(--primary-low);
&:nth-of-type(1) { &:nth-of-type(1) {
border-top: 0; border-top: 0;
@ -21,7 +22,6 @@
&.highlight-danger { &.highlight-danger {
background-color: var(--danger-low); background-color: var(--danger-low);
} }
border-top: 1px solid var(--primary-low);
&::before, &::before,
&::after { &::after {

19
app/assets/stylesheets/common/base/compose.scss
View File

@ -12,26 +12,25 @@ html.composer-open {
bottom: 0; bottom: 0;
right: 0; right: 0;
left: 0; left: 0;
margin-left: auto; margin-inline: auto;
margin-right: auto;
max-width: $reply-area-max-width; max-width: $reply-area-max-width;
width: 100%; width: 100%;
height: 0; height: 0;
min-height: 0; min-height: 0;
&.hide-preview {
max-width: 740px;
}
@media screen and (max-width: 1200px) {
min-width: 0;
}
z-index: z("composer", "content"); z-index: z("composer", "content");
transition: height 0.2s, max-width 0.2s, padding-bottom 0.2s, top 0.2s, transition: height 0.2s, max-width 0.2s, padding-bottom 0.2s, top 0.2s,
transform 0.2s, min-height 0.2s; transform 0.2s, min-height 0.2s;
background-color: var(--secondary); background-color: var(--secondary);
box-shadow: var(--shadow-composer); box-shadow: var(--shadow-composer);
@media screen and (max-width: 1200px) {
min-width: 0;
}
&.hide-preview {
max-width: 740px;
}
.reply-area { .reply-area {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

12
app/assets/stylesheets/common/base/directory.scss
View File

@ -4,12 +4,13 @@
} }
.directory { .directory {
margin-bottom: 100px;
background: var(--d-content-background);
.directory-value-list-item:not(:empty) .directory-value-list-item:not(:empty)
~ .directory-value-list-item:not(:empty)::before { ~ .directory-value-list-item:not(:empty)::before {
content: "| "; content: "| ";
} }
margin-bottom: 100px;
background: var(--d-content-background);
&.users-directory { &.users-directory {
.directory-group-selector { .directory-group-selector {
@ -284,14 +285,15 @@
} }
&__row { &__row {
&:first-child {
border-top: 1px solid var(--primary-low);
}
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(11em, 1fr)); grid-template-columns: repeat(auto-fill, minmax(11em, 1fr));
border-bottom: 1px solid var(--primary-low); border-bottom: 1px solid var(--primary-low);
padding: 0.85em 0.5em 1em; padding: 0.85em 0.5em 1em;
gap: 0 10%; gap: 0 10%;
&:first-child {
border-top: 1px solid var(--primary-low);
}
} }
&__header { &__header {

7
app/assets/stylesheets/common/base/discourse.scss
View File

@ -92,8 +92,8 @@ small {
} }
blockquote { blockquote {
@include post-aside;
clear: both; clear: both;
@include post-aside;
} }
h1, h1,
@ -304,6 +304,9 @@ textarea {
// Common Classes // Common Classes
.sortable { .sortable {
white-space: nowrap; white-space: nowrap;
cursor: pointer;
@include user-select(none);
.discourse-no-touch & { .discourse-no-touch & {
&:hover, &:hover,
@ -315,8 +318,6 @@ textarea {
.d-icon { .d-icon {
margin-left: 0.25em; margin-left: 0.25em;
} }
@include unselectable;
cursor: pointer;
button { button {
background: none; background: none;

2
app/assets/stylesheets/common/base/edit-category.scss
View File

@ -189,6 +189,7 @@ div.edit-category {
.required-tag-group-row { .required-tag-group-row {
display: flex; display: flex;
gap: 0.5em; gap: 0.5em;
margin-bottom: 1em;
> * { > * {
margin: 0; margin: 0;
@ -197,7 +198,6 @@ div.edit-category {
input[type="number"] { input[type="number"] {
width: 4em; width: 4em;
} }
margin-bottom: 1em;
} }
} }

11
app/assets/stylesheets/common/base/header.scss
View File

@ -49,15 +49,16 @@
align-items: center; align-items: center;
height: 100%; height: 100%;
animation: fadein 0.5s; animation: fadein 0.5s;
@media (prefers-reduced-motion) {
animation-duration: 0s;
}
// min-width acts as a placeholder if the small logo takes a while to load // min-width acts as a placeholder if the small logo takes a while to load
// it prevents topic title from shifting after the small logo loads // it prevents topic title from shifting after the small logo loads
// it's set to match the #site-logo height so square small logos don't resize when titles dock // it's set to match the #site-logo height so square small logos don't resize when titles dock
min-width: var(--d-logo-height); min-width: var(--d-logo-height);
@media (prefers-reduced-motion) {
animation-duration: 0s;
}
a, a,
a:visited { a:visited {
min-width: 0; min-width: 0;
@ -442,11 +443,11 @@ $mobile-avatar-height: 1.532em;
.trigger-user-card { .trigger-user-card {
.icon { .icon {
height: $avatar-height; height: $avatar-height;
display: inline-block;
.mobile-view & { .mobile-view & {
height: $mobile-avatar-height; height: $mobile-avatar-height;
} }
display: inline-block;
img { img {
height: 100%; height: 100%;
@ -466,11 +467,11 @@ $mobile-avatar-height: 1.532em;
display: flex; display: flex;
align-items: center; align-items: center;
height: $avatar-height; height: $avatar-height;
color: var(--primary-high);
.mobile-view & { .mobile-view & {
height: $mobile-avatar-height; height: $mobile-avatar-height;
} }
color: var(--primary-high);
.d-icon { .d-icon {
margin-right: 5px; margin-right: 5px;

3
app/assets/stylesheets/common/base/magnific-popup.scss
View File

@ -620,10 +620,11 @@ button {
/* start state */ /* start state */
.mfp-content { .mfp-content {
opacity: 0; opacity: 0;
transform: scale(0.8);
@media screen and (prefers-reduced-motion: no-preference) { @media screen and (prefers-reduced-motion: no-preference) {
transition: all 0.2s; transition: all 0.2s;
} }
transform: scale(0.8);
} }
&.mfp-bg { &.mfp-bg {

23
app/assets/stylesheets/common/base/menu-panel.scss
View File

@ -6,13 +6,8 @@
// ensure there's always space to click outside on tiny devices // ensure there's always space to click outside on tiny devices
max-width: 90vw; max-width: 90vw;
--100dvh: 100%;
@supports (height: 100dvh) {
--100dvh: 100dvh;
}
box-shadow: 0 0 30px -2px rgba(0, 0, 0, 0.5); box-shadow: 0 0 30px -2px rgba(0, 0, 0, 0.5);
height: var(--100dvh); height: 100dvh;
.panel-body { .panel-body {
width: 100%; width: 100%;
@ -369,13 +364,14 @@
} }
.profile-tab-btn { .profile-tab-btn {
justify-content: unset;
line-height: var(--line-height-large);
width: 100%;
.relative-date { .relative-date {
font-size: var(--font-down-3); font-size: var(--font-down-3);
color: var(--primary-medium); color: var(--primary-medium);
} }
justify-content: unset;
line-height: var(--line-height-large);
width: 100%;
.d-icon { .d-icon {
padding: 0; padding: 0;
@ -420,6 +416,9 @@
padding-top: 0.75em; padding-top: 0.75em;
margin-top: -1px; margin-top: -1px;
/* as a big ol' click target, don't let text inside be selected */
@include unselectable;
&:focus { &:focus {
outline: none; outline: none;
} }
@ -548,9 +547,6 @@
> div { > div {
overflow: hidden; // clears the text from wrapping below icons overflow: hidden; // clears the text from wrapping below icons
overflow-wrap: anywhere; overflow-wrap: anywhere;
@supports not (overflow-wrap: anywhere) {
word-break: break-word;
}
// Truncate items with more than 2 lines. // Truncate items with more than 2 lines.
@include line-clamp(2); @include line-clamp(2);
@ -613,9 +609,6 @@
background: var(--primary-low); background: var(--primary-low);
} }
} }
/* as a big ol' click target, don't let text inside be selected */
@include unselectable;
} }
// Styles to have user avatar positioned and sized correctly // Styles to have user avatar positioned and sized correctly

7
app/assets/stylesheets/common/base/modal.scss
View File

@ -167,11 +167,12 @@
.modal-backdrop, .modal-backdrop,
.modal-backdrop.fade.in { .modal-backdrop.fade.in {
animation: fade 0.3s; animation: fade 0.3s;
opacity: 0.9;
filter: alpha(opacity=90);
@media (prefers-reduced-motion) { @media (prefers-reduced-motion) {
animation-duration: 0s; animation-duration: 0s;
} }
opacity: 0.9;
filter: alpha(opacity=90);
} }
// fade in // fade in
@ -229,11 +230,11 @@
.nav { .nav {
padding: 10px 30px 10px 15px; padding: 10px 30px 10px 15px;
background-color: var(--secondary); background-color: var(--secondary);
border-bottom: 1px solid var(--primary-low);
li > a { li > a {
font-size: var(--font-0); font-size: var(--font-0);
} }
border-bottom: 1px solid var(--primary-low);
} }
&.hidden { &.hidden {

24
app/assets/stylesheets/common/base/onebox.scss
View File

@ -15,11 +15,12 @@ a.loading-onebox {
} }
.onebox-result { .onebox-result {
@include post-aside;
margin-top: 15px; margin-top: 15px;
padding: 12px; padding: 12px;
font-size: var(--font-0); font-size: var(--font-0);
@include post-aside;
.onebox-result-body { .onebox-result-body {
padding-top: 5px; padding-top: 5px;
@ -73,13 +74,14 @@ a.loading-onebox {
height: 20px; height: 20px;
.info { .info {
position: absolute;
font-size: var(--font-0);
a { a {
color: black; color: black;
text-decoration: none; text-decoration: none;
padding-right: 10px; padding-right: 10px;
} }
position: absolute;
font-size: var(--font-0);
img.favicon { img.favicon {
margin-right: 3px; margin-right: 3px;
@ -151,13 +153,14 @@ aside.onebox {
img:not(.avatar, .onebox-avatar-inline) { img:not(.avatar, .onebox-avatar-inline) {
max-height: 170px; max-height: 170px;
max-width: 20%; max-width: 20%;
@media all and (max-width: 600px) {
max-width: 35%;
}
height: auto; height: auto;
float: left; float: left;
margin-right: 1em; margin-right: 1em;
@media all and (max-width: 600px) {
max-width: 35%;
}
&.onebox-full-image { &.onebox-full-image {
max-height: none; max-height: none;
max-width: none; max-width: none;
@ -296,6 +299,10 @@ aside.onebox {
} }
.video-icon { .video-icon {
bottom: 15px;
right: 10px;
position: absolute;
&::before { &::before {
opacity: 0.8; opacity: 0.8;
@ -304,9 +311,6 @@ aside.onebox {
'<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 512 512" fill="white"><path d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"></path></svg>' '<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 512 512" fill="white"><path d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"></path></svg>'
); );
} }
bottom: 15px;
right: 10px;
position: absolute;
} }
} }
} }
@ -967,6 +971,7 @@ aside.onebox.mixcloud-preview {
.mixcloud-text { .mixcloud-text {
padding-left: 170px; padding-left: 170px;
font-family: sans-serif; font-family: sans-serif;
color: gray;
h3 { h3 {
font-size: 13px; font-size: 13px;
@ -980,7 +985,6 @@ aside.onebox.mixcloud-preview {
font-size: 12px; font-size: 12px;
font-weight: 200; font-weight: 200;
} }
color: gray;
} }
} }
} }

3
app/assets/stylesheets/common/base/popup-menu.scss
View File

@ -57,11 +57,12 @@
&:focus, &:focus,
&:hover { &:hover {
background: var(--danger-low);
.d-icon, .d-icon,
.d-button-label { .d-button-label {
color: var(--danger); color: var(--danger);
} }
background: var(--danger-low);
} }
} }
} }

12
app/assets/stylesheets/common/base/reviewables.scss
View File

@ -96,6 +96,7 @@
border-bottom: 1px solid var(--primary-low); border-bottom: 1px solid var(--primary-low);
padding-bottom: 0.25em; padding-bottom: 0.25em;
display: flex; display: flex;
margin-bottom: 0.5em;
.name { .name {
width: 8em; width: 8em;
@ -109,7 +110,6 @@
); // subtracting width of name and margin-right ); // subtracting width of name and margin-right
word-wrap: break-word; word-wrap: break-word;
} }
margin-bottom: 0.5em;
} }
} }
@ -236,6 +236,7 @@
background: var(--primary-very-low); background: var(--primary-very-low);
padding: 1.5rem; padding: 1.5rem;
margin-block: 3rem; margin-block: 3rem;
padding-bottom: 1em;
.show-raw-email { .show-raw-email {
color: var(--primary-medium); color: var(--primary-medium);
@ -472,7 +473,6 @@
margin-right: 0.5em; margin-right: 0.5em;
} }
} }
padding-bottom: 1em;
} }
.reviewable-stale { .reviewable-stale {
@ -607,17 +607,20 @@
} }
.editable-fields { .editable-fields {
width: 100%;
.editable-created-by { .editable-created-by {
display: flex; display: flex;
margin-bottom: 0.5em;
.avatar { .avatar {
margin-right: 0.25em; margin-right: 0.25em;
} }
margin-bottom: 0.5em;
} }
width: 100%;
.editable-field { .editable-field {
margin-bottom: 0.5em;
.mini-tag-chooser { .mini-tag-chooser {
margin: 0; margin: 0;
} }
@ -631,7 +634,6 @@
width: 100%; width: 100%;
height: 10em; height: 10em;
} }
margin-bottom: 0.5em;
} }
} }

3
app/assets/stylesheets/common/base/search-menu.scss
View File

@ -431,9 +431,6 @@ $search-pad-horizontal: 0.5em;
.topic-title { .topic-title {
color: var(--tertiary); color: var(--tertiary);
overflow-wrap: anywhere; overflow-wrap: anywhere;
@supports not (overflow-wrap: anywhere) {
word-break: break-word;
}
margin-right: 0.25em; margin-right: 0.25em;
} }
} }

2
app/assets/stylesheets/common/base/search.scss
View File

@ -18,8 +18,8 @@
} }
.search-header { .search-header {
@include search-page-spacing;
background: var(--primary-very-low); background: var(--primary-very-low);
@include search-page-spacing;
} }
.warning { .warning {

11
app/assets/stylesheets/common/base/sidebar-section.scss
View File

@ -24,6 +24,12 @@
.btn.dropdown-select-box-header, .btn.dropdown-select-box-header,
.sidebar-section-header-button { .sidebar-section-header-button {
background: transparent;
border: none;
margin-right: calc(var(--d-sidebar-row-horizontal-padding) / 3 * -1);
padding: calc(var(--d-sidebar-row-horizontal-padding) / 5)
calc(var(--d-sidebar-row-horizontal-padding) / 3);
.discourse-no-touch & { .discourse-no-touch & {
transition: all 0.25s; transition: all 0.25s;
opacity: 0; opacity: 0;
@ -40,11 +46,6 @@
opacity: 1; opacity: 1;
} }
} }
background: transparent;
border: none;
margin-right: calc(var(--d-sidebar-row-horizontal-padding) / 3 * -1);
padding: calc(var(--d-sidebar-row-horizontal-padding) / 5)
calc(var(--d-sidebar-row-horizontal-padding) / 3);
.d-icon { .d-icon {
font-size: var(--font-down-1); font-size: var(--font-down-1);

37
app/assets/stylesheets/common/base/sidebar.scss
View File

@ -1,9 +1,5 @@
:root { :root {
--d-sidebar-width: #{$d-sidebar-width}; --d-sidebar-width: #{$d-sidebar-width};
@include breakpoint(large) {
--d-sidebar-width: #{$d-sidebar-narrow-width};
}
--d-sidebar-row-horizontal-padding: 1rem; --d-sidebar-row-horizontal-padding: 1rem;
// ems so height is variable along with font size // ems so height is variable along with font size
@ -48,6 +44,10 @@
--d-sidebar-active-icon-color: var(--d-sidebar-link-color); --d-sidebar-active-icon-color: var(--d-sidebar-link-color);
--d-sidebar-active-prefix-background: var(--primary-200); --d-sidebar-active-prefix-background: var(--primary-200);
--d-sidebar-active-suffix-color: var(--tertiary-med-or-tertiary); --d-sidebar-active-suffix-color: var(--tertiary-med-or-tertiary);
@include breakpoint(large) {
--d-sidebar-width: #{$d-sidebar-narrow-width};
}
} }
.sidebar-row { .sidebar-row {
@ -63,20 +63,15 @@
position: sticky; position: sticky;
top: var(--main-outlet-offset); top: var(--main-outlet-offset);
background: var(--d-sidebar-background); background: var(--d-sidebar-background);
height: calc(var(--composer-vh, 1dvh) * 100 - var(--main-outlet-offset, 0px));
@include unselectable;
// 1dvh with fallback for old browsers
--1dvh: 1vh;
@supports (height: 1dvh) {
--1dvh: 1dvh;
}
height: calc(
var(--composer-vh, var(--1dvh)) * 100 - var(--main-outlet-offset, 0px)
);
align-self: start; align-self: start;
overflow-y: auto; overflow-y: auto;
// back-compat for themes
--1dvh: 1dvh;
@include unselectable;
.sidebar-container { .sidebar-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -103,10 +98,6 @@
overflow-x: hidden; overflow-x: hidden;
overflow-y: overlay; overflow-y: overlay;
> .sidebar-section-wrapper:last-child {
border-bottom: 0;
}
// custom scrollbar styling // custom scrollbar styling
--scrollbarBg: transparent; --scrollbarBg: transparent;
--scrollbarThumbBg: var(--primary-low); --scrollbarThumbBg: var(--primary-low);
@ -115,6 +106,10 @@
transition: scrollbar-color 0.25s ease-in-out; transition: scrollbar-color 0.25s ease-in-out;
transition-delay: 0.5s; transition-delay: 0.5s;
> .sidebar-section-wrapper:last-child {
border-bottom: 0;
}
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: var(--scrollbarWidth); width: var(--scrollbarWidth);
} }
@ -130,11 +125,11 @@
&:hover { &:hover {
scrollbar-color: var(--scrollbarThumbBg) var(--scrollbarBg); scrollbar-color: var(--scrollbarThumbBg) var(--scrollbarBg);
transition-delay: 0s;
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: var(--scrollbarThumbBg); background-color: var(--scrollbarThumbBg);
} }
transition-delay: 0s;
} }
&__back-to-forum { &__back-to-forum {
@ -379,11 +374,11 @@
background: none; background: none;
margin-bottom: 0; margin-bottom: 0;
height: 2em; height: 2em;
width: 100%;
&:focus-within { &:focus-within {
outline: 0; outline: 0;
} }
width: 100%;
} }
&__clear { &__clear {

15
app/assets/stylesheets/common/base/topic-footer.scss
View File

@ -1,14 +1,14 @@
#topic-footer-buttons { #topic-footer-buttons {
display: flex; display: flex;
html.anon & {
justify-content: end;
}
max-width: calc( max-width: calc(
var(--topic-avatar-width) + var(--topic-body-width) + var(--topic-avatar-width) + var(--topic-body-width) +
var(--topic-body-width-padding) * 2 var(--topic-body-width-padding) * 2
); );
html.anon & {
justify-content: end;
}
.topic-footer-main-buttons { .topic-footer-main-buttons {
display: flex; display: flex;
gap: 0.5rem; gap: 0.5rem;
@ -51,14 +51,15 @@
} }
#topic-progress-wrapper { #topic-progress-wrapper {
display: flex;
justify-content: flex-end;
overflow: hidden;
&.docked { &.docked {
.toggle-admin-menu { .toggle-admin-menu {
display: none; display: none;
} }
} }
display: flex;
justify-content: flex-end;
overflow: hidden;
.btn { .btn {
border: 0; border: 0;

20
app/assets/stylesheets/common/base/topic-post.scss
View File

@ -22,9 +22,6 @@
overflow: hidden; overflow: hidden;
&::before { &::before {
@media (prefers-reduced-motion: no-preference) {
animation: placeHolderShimmer 4s linear infinite forwards;
}
position: absolute; position: absolute;
left: 0; left: 0;
content: ""; content: "";
@ -36,6 +33,10 @@
); );
height: 45px; height: 45px;
width: 700px; width: 700px;
@media (prefers-reduced-motion: no-preference) {
animation: placeHolderShimmer 4s linear infinite forwards;
}
} }
} }
@ -635,10 +636,12 @@ aside.quote {
margin-bottom: 1em; margin-bottom: 1em;
.title { .title {
@include post-aside;
color: var(--primary-high-or-secondary-low); color: var(--primary-high-or-secondary-low);
padding: 0.8em 0.8em 0 0.8em; padding: 0.8em 0.8em 0 0.8em;
@include post-aside;
@include unselectable;
// blockquote is underneath this and has top margin // blockquote is underneath this and has top margin
.avatar { .avatar {
margin-right: 0.5em; margin-right: 0.5em;
@ -647,8 +650,6 @@ aside.quote {
img { img {
margin-top: -0.26em; margin-top: -0.26em;
} }
@include unselectable;
} }
// blockquote is docked within aside for content // blockquote is docked within aside for content
@ -1335,15 +1336,16 @@ span.mention {
.broken-image, .broken-image,
.blocked-hotlinked-placeholder { .blocked-hotlinked-placeholder {
&:not(a) {
color: var(--primary-low-mid-or-secondary-high);
}
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
border: 1px solid var(--primary-low); border: 1px solid var(--primary-low);
align-items: center; align-items: center;
justify-content: center; justify-content: center;
&:not(a) {
color: var(--primary-low-mid-or-secondary-high);
}
.d-icon { .d-icon {
margin: 16px; margin: 16px;
font-size: var(--font-up-5); font-size: var(--font-up-5);

2
app/assets/stylesheets/common/base/user-badges.scss
View File

@ -99,6 +99,7 @@
text-align: left; text-align: left;
display: block; display: block;
margin: 20px 0; margin: 20px 0;
width: 800px;
.badge-info { .badge-info {
display: none; display: none;
@ -116,7 +117,6 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
width: 800px;
&::after { &::after {
content: ""; content: "";

4
app/assets/stylesheets/common/base/user.scss
View File

@ -402,6 +402,8 @@
} }
.avatar-selector { .avatar-selector {
--label-max-width: 300px;
.avatar-choice { .avatar-choice {
display: grid; display: grid;
grid-template-columns: 2em 1fr auto; grid-template-columns: 2em 1fr auto;
@ -429,8 +431,6 @@
} }
} }
--label-max-width: 300px;
label.radio { label.radio {
display: flex; display: flex;
align-items: center; align-items: center;

3
app/assets/stylesheets/common/components/bookmark-modal.scss
View File

@ -45,10 +45,11 @@
} }
.bookmark-options-panel { .bookmark-options-panel {
margin-bottom: 18px;
.select-kit { .select-kit {
width: 100%; width: 100%;
} }
margin-bottom: 18px;
label { label {
display: flex; display: flex;

16
app/assets/stylesheets/common/components/buttons.scss
View File

@ -13,18 +13,12 @@
$hover-bg-color: var(--primary-medium), $hover-bg-color: var(--primary-medium),
$hover-icon-color: var(--primary-low) $hover-icon-color: var(--primary-low)
) { ) {
@include form-item-sizing;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: 0; margin: 0;
font-weight: normal; font-weight: normal;
color: $text-color; color: $text-color;
&:visited {
// covers cases where we add button classes to links
color: $text-color;
}
background-color: $bg-color; background-color: $bg-color;
background-image: linear-gradient( background-image: linear-gradient(
to bottom, to bottom,
@ -35,6 +29,13 @@
transition: var(--d-button-transition); transition: var(--d-button-transition);
cursor: pointer; cursor: pointer;
@include form-item-sizing;
&:visited {
// covers cases where we add button classes to links
color: $text-color;
}
.d-icon { .d-icon {
color: $icon-color; color: $icon-color;
margin-right: 0.45em; margin-right: 0.45em;
@ -109,6 +110,8 @@
&[disabled], &[disabled],
&.disabled { &.disabled {
cursor: not-allowed;
&:not(.is-loading) { &:not(.is-loading) {
opacity: 0.4; opacity: 0.4;
} }
@ -121,7 +124,6 @@
color: $icon-color; color: $icon-color;
} }
} }
cursor: not-allowed;
} }
.loading-container { .loading-container {

7
app/assets/stylesheets/common/components/calendar-date-time-input.scss
View File

@ -1,7 +1,4 @@
.calendar-date-time-input { .calendar-date-time-input {
.fake-input {
display: none;
}
padding: 5px; padding: 5px;
border: 1px solid var(--primary-low); border: 1px solid var(--primary-low);
z-index: 1; z-index: 1;
@ -10,6 +7,10 @@
box-sizing: border-box; box-sizing: border-box;
margin-left: 1em; margin-left: 1em;
.fake-input {
display: none;
}
.date-picker { .date-picker {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

6
app/assets/stylesheets/common/components/d-toggle-switch.scss
View File

@ -1,6 +1,9 @@
.d-toggle-switch { .d-toggle-switch {
--toggle-switch-width: 45px; --toggle-switch-width: 45px;
--toggle-switch-height: 24px; --toggle-switch-height: 24px;
display: flex;
align-items: center;
gap: 0.5rem;
&:focus { &:focus {
.d-toggle-switch__checkbox-slider { .d-toggle-switch__checkbox-slider {
@ -19,9 +22,6 @@
background-color: var(--tertiary-hover); background-color: var(--tertiary-hover);
} }
} }
display: flex;
align-items: center;
gap: 0.5rem;
&__label { &__label {
position: relative; position: relative;

19
app/assets/stylesheets/common/components/powered-by-discourse.scss
View File

@ -1,13 +1,4 @@
.powered-by-discourse { .powered-by-discourse {
.admin-area &,
.has-full-page-chat &,
.static-login &,
.invite-page &,
.account-created-page &,
.admin-invite-page &,
.activate-account-page & {
display: none !important;
}
grid-area: below-content; grid-area: below-content;
justify-self: start; justify-self: start;
font-size: var(--font-down-1); font-size: var(--font-down-1);
@ -19,6 +10,16 @@
margin-bottom: 0.45em; margin-bottom: 0.45em;
color: var(--primary-medium); color: var(--primary-medium);
.admin-area &,
.has-full-page-chat &,
.static-login &,
.invite-page &,
.account-created-page &,
.admin-invite-page &,
.activate-account-page & {
display: none !important;
}
&:visited { &:visited {
color: var(--primary-medium); color: var(--primary-medium);
} }

7
app/assets/stylesheets/common/components/user-card.scss
View File

@ -23,9 +23,6 @@
overflow: hidden; overflow: hidden;
&::before { &::before {
@media (prefers-reduced-motion: no-preference) {
animation: placeHolderShimmer 4s linear infinite forwards;
}
position: absolute; position: absolute;
left: 0; left: 0;
content: ""; content: "";
@ -37,6 +34,10 @@
); );
height: var(--avatar-width); height: var(--avatar-width);
width: var(--card-width); width: var(--card-width);
@media (prefers-reduced-motion: no-preference) {
animation: placeHolderShimmer 4s linear infinite forwards;
}
} }
} }

16
app/assets/stylesheets/common/d-editor.scss
View File

@ -308,19 +308,21 @@
.d-editor-button-bar { .d-editor-button-bar {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(2.35em, 1fr)); grid-template-columns: repeat(auto-fill, minmax(2.35em, 1fr));
@include breakpoint(tablet) {
// occupy available space on narrower screens
grid-template-columns: repeat(auto-fit, minmax(2em, 1fr));
}
@include breakpoint(mobile-medium) {
font-size: var(--font-down-1);
}
align-items: center; align-items: center;
border-bottom: 1px solid var(--primary-low); border-bottom: 1px solid var(--primary-low);
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
flex-shrink: 0; flex-shrink: 0;
@include breakpoint(tablet) {
// occupy available space on narrower screens
grid-template-columns: repeat(auto-fit, minmax(2em, 1fr));
}
@include breakpoint(mobile-medium) {
font-size: var(--font-down-1);
}
.btn:focus { .btn:focus {
@include default-focus; @include default-focus;
} }

8
app/assets/stylesheets/common/form-kit/_control-code.scss
View File

@ -17,11 +17,13 @@
.ace-wrapper[data-disabled="false"] { .ace-wrapper[data-disabled="false"] {
.ace_focus { .ace_focus {
@include default-input;
height: unset;
border-color: var(--tertiary);
outline: 2px solid var(--tertiary); outline: 2px solid var(--tertiary);
outline-offset: -1px; outline-offset: -1px;
@include default-input {
height: unset;
border-color: var(--tertiary);
}
} }
} }
} }

5
app/assets/stylesheets/common/form-kit/_control-composer.scss
View File

@ -20,8 +20,9 @@
} }
.d-editor-textarea-wrapper { .d-editor-textarea-wrapper {
@include default-input; @include default-input {
padding: 0 !important; padding: 0 !important;
}
} }
.d-editor-input { .d-editor-input {

4
app/assets/stylesheets/common/form-kit/_control-input.scss
View File

@ -1,9 +1,9 @@
.form-kit__control-input { .form-kit__control-input {
@include default-input;
z-index: 1; z-index: 1;
margin: 0 !important;
min-width: auto !important; min-width: auto !important;
@include default-input;
.form-kit__field.has-error & { .form-kit__field.has-error & {
border-color: var(--danger); border-color: var(--danger);
} }

2
app/assets/stylesheets/common/form-kit/_control-menu.scss
View File

@ -1,6 +1,6 @@
.form-kit__control-menu-trigger { .form-kit__control-menu-trigger {
@include default-input;
justify-content: space-between; justify-content: space-between;
@include default-input;
} }
.form-kit__control-menu-content { .form-kit__control-menu-content {

17
app/assets/stylesheets/common/form-kit/_control-textarea.scss
View File

@ -1,14 +1,11 @@
.form-kit__control-textarea { .form-kit__control-textarea {
@include default-input;
// reset textarea styles
width: 100% !important;
margin: 0 !important;
min-width: auto !important;
padding: 0.5em !important;
height: 150px !important;
// prevents firefox/chrome to add spacing under textarea // prevents firefox/chrome to add spacing under textarea
display: block; display: block;
border-radius: var(--d-input-border-radius);
@include default-input {
// reset textarea styles
height: 150px !important;
min-width: auto !important;
padding: 0.5em !important;
}
} }

2
app/assets/stylesheets/common/form-kit/_default-input-mixin.scss
View File

@ -9,6 +9,8 @@
margin: 0 !important; margin: 0 !important;
appearance: none; appearance: none;
@content;
@include breakpoint(mobile-large) { @include breakpoint(mobile-large) {
width: 100% !important; width: 100% !important;
height: 2.25em; height: 2.25em;

2
app/assets/stylesheets/common/foundation/mixins.scss
View File

@ -132,8 +132,8 @@ $hpad: 0.65em;
} }
@mixin unselectable { @mixin unselectable {
@include user-select(none);
cursor: default; cursor: default;
@include user-select(none);
} }
// Stuff we repeat // Stuff we repeat

3
app/assets/stylesheets/common/rich-editor/rich-editor.scss
View File

@ -15,12 +15,13 @@
> div:first-child, > div:first-child,
> details:first-child { > details:first-child {
margin-top: 0.5rem;
// This is hacky, but helps having the leading gapcursor at the right position // This is hacky, but helps having the leading gapcursor at the right position
&.ProseMirror-gapcursor { &.ProseMirror-gapcursor {
position: relative; position: relative;
display: block; display: block;
} }
margin-top: 0.5rem;
} }
h1, h1,

12
app/assets/stylesheets/common/software-update-prompt.scss
View File

@ -4,12 +4,6 @@
right: 0; right: 0;
left: 0; left: 0;
top: var(--header-offset, 60px); top: var(--header-offset, 60px);
.static-login &,
.wizard &,
.invite-page & {
top: 0;
}
background-color: var(--tertiary-low); background-color: var(--tertiary-low);
max-height: 0; max-height: 0;
overflow: hidden; overflow: hidden;
@ -17,6 +11,12 @@
box-shadow: var(--shadow-header); box-shadow: var(--shadow-header);
z-index: z("header") - 10; z-index: z("header") - 10;
.static-login &,
.wizard &,
.invite-page & {
top: 0;
}
.update-prompt-main-content { .update-prompt-main-content {
display: flex; display: flex;
align-items: center; align-items: center;

17
app/assets/stylesheets/common/topic-timeline.scss
View File

@ -39,9 +39,6 @@
} }
&.timeline-fullscreen { &.timeline-fullscreen {
@media (prefers-reduced-motion: no-preference) {
transition: max-height 0.3s ease-in;
}
max-height: 0; max-height: 0;
position: fixed; position: fixed;
margin-left: 0; margin-left: 0;
@ -53,6 +50,11 @@
box-shadow: var(--shadow-composer); box-shadow: var(--shadow-composer);
padding: 20px 0; padding: 20px 0;
z-index: z("fullscreen"); z-index: z("fullscreen");
@media (prefers-reduced-motion: no-preference) {
transition: max-height 0.3s ease-in;
}
@media screen and (max-height: 425px) { @media screen and (max-height: 425px) {
padding-top: 10px; padding-top: 10px;
} }
@ -201,13 +203,14 @@
// above the topic-footer-controls // above the topic-footer-controls
position: absolute; position: absolute;
margin-top: 1em; margin-top: 1em;
@media (prefers-reduced-motion: no-preference) {
transition: opacity 0.2s ease-in;
}
display: flex; display: flex;
gap: 0.5em; gap: 0.5em;
flex-wrap: wrap; flex-wrap: wrap;
@media (prefers-reduced-motion: no-preference) {
transition: opacity 0.2s ease-in;
}
button:last-child { button:last-child {
margin-right: 0; margin-right: 0;
} }
@ -292,13 +295,13 @@
.timeline-last-read { .timeline-last-read {
position: absolute; position: absolute;
margin-left: -0.35em; margin-left: -0.35em;
z-index: z("base") + 2; // above timeline-handle
.progress { .progress {
font-size: 0.8em; font-size: 0.8em;
color: var(--tertiary); color: var(--tertiary);
margin-right: 1em; margin-right: 1em;
} }
z-index: z("base") + 2; // above timeline-handle
} }
.back-button { .back-button {

17
app/assets/stylesheets/desktop/compose.scss
View File

@ -339,18 +339,10 @@ a.toggle-preview {
animation-delay: 1.5s; animation-delay: 1.5s;
animation-direction: reverse; animation-direction: reverse;
animation-fill-mode: forwards; animation-fill-mode: forwards;
@media (prefers-reduced-motion) {
animation-duration: 0s;
}
position: fixed; position: fixed;
left: 50%; left: 50%;
top: 10%; top: 10%;
transform: translate(-50%, 0); transform: translate(-50%, 0);
.rtl & {
// R2 is not smart enough to support this swap
transform: translate(50%, 0);
}
z-index: z("header") + 1; z-index: z("header") + 1;
background: var(--primary-very-high); background: var(--primary-very-high);
color: var(--secondary); color: var(--secondary);
@ -358,6 +350,15 @@ a.toggle-preview {
pointer-events: none; pointer-events: none;
border-radius: 2px; border-radius: 2px;
@media (prefers-reduced-motion) {
animation-duration: 0s;
}
.rtl & {
// R2 is not smart enough to support this swap
transform: translate(50%, 0);
}
kbd { kbd {
background: none; background: none;
} }

5
app/assets/stylesheets/desktop/discourse.scss
View File

@ -119,8 +119,8 @@ select {
} }
.control-group { .control-group {
@include clearfix;
margin-bottom: 18px; margin-bottom: 18px;
@include clearfix;
} }
.control-indent { .control-indent {
@ -162,10 +162,11 @@ body.has-sidebar-page {
#main-outlet-wrapper { #main-outlet-wrapper {
grid-template-columns: var(--d-sidebar-width) minmax(0, 1fr); grid-template-columns: var(--d-sidebar-width) minmax(0, 1fr);
gap: 0 2em; gap: 0 2em;
padding-left: 0;
@include breakpoint(large) { @include breakpoint(large) {
gap: 0 1em; gap: 0 1em;
} }
padding-left: 0;
} }
} }

2
app/assets/stylesheets/desktop/modal.scss
View File

@ -32,11 +32,11 @@ html.modal-open {
.close { .close {
font-size: var(--font-up-3); font-size: var(--font-up-3);
text-decoration: none; text-decoration: none;
cursor: pointer;
&:visited { &:visited {
color: var(--primary-high); color: var(--primary-high);
} }
cursor: pointer;
&:hover { &:hover {
color: var(--primary); color: var(--primary);

13
app/assets/stylesheets/desktop/topic-post.scss
View File

@ -103,11 +103,11 @@ nav.post-controls {
align-items: center; align-items: center;
margin-left: 0; margin-left: 0;
border-radius: var(--d-button-border-radius); border-radius: var(--d-button-border-radius);
white-space: nowrap;
.topic-post & { .topic-post & {
margin-right: 0.5em; margin-right: 0.5em;
} }
white-space: nowrap;
.d-icon { .d-icon {
margin-inline: var(--control-icon-space); margin-inline: var(--control-icon-space);
@ -155,12 +155,13 @@ pre.codeblock-buttons:hover {
} }
.embedded-posts { .embedded-posts {
border: 1px solid var(--primary-low);
h1, h1,
h2, h2,
h3 { h3 {
margin: 10px 0; margin: 10px 0;
} }
border: 1px solid var(--primary-low);
.topic-body { .topic-body {
box-sizing: border-box; box-sizing: border-box;
@ -341,15 +342,15 @@ pre.codeblock-buttons:hover {
&.top { &.top {
margin-left: 0; margin-left: 0;
border: none; border: none;
width: calc(
var(--topic-body-width) + (var(--topic-body-width-padding) * 2) +
var(--topic-avatar-width) - (var(--topic-avatar-width) + 2px)
); // 2px accounts for left and right borders
.collapse-down { .collapse-down {
transform: translate(17%, 230%); transform: translate(17%, 230%);
z-index: 1; z-index: 1;
} }
width: calc(
var(--topic-body-width) + (var(--topic-body-width-padding) * 2) +
var(--topic-avatar-width) - (var(--topic-avatar-width) + 2px)
); // 2px accounts for left and right borders
.row { .row {
.topic-body, .topic-body,

7
app/assets/stylesheets/mobile/components/emoji-picker.scss
View File

@ -4,20 +4,19 @@
} }
html:not(.keyboard-visible.mobile-view) & .d-modal__container { html:not(.keyboard-visible.mobile-view) & .d-modal__container {
height: calc(var(--composer-vh, var(--1dvh)) * 100); height: calc(var(--composer-vh, 1dvh) * 100);
max-height: 100%; max-height: 100%;
.emoji-picker__content { .emoji-picker__content {
height: calc( height: calc(
var(--composer-vh, var(--1dvh)) * 100 - 50px - var(--composer-vh, 1dvh) * 100 - 50px - env(safe-area-inset-bottom)
env(safe-area-inset-bottom)
); );
} }
} }
html.keyboard-visible.mobile-view & .d-modal__container { html.keyboard-visible.mobile-view & .d-modal__container {
.emoji-picker__content { .emoji-picker__content {
height: calc(var(--composer-vh, var(--1dvh)) * 100 - 50px); height: calc(var(--composer-vh, 1dvh) * 100 - 50px);
} }
} }

2
app/assets/stylesheets/mobile/modal-overrides.scss
View File

@ -24,6 +24,6 @@
.d-modal.grant-badge-modal, .d-modal.grant-badge-modal,
.d-modal.bookmark-reminder-modal { .d-modal.bookmark-reminder-modal {
.d-modal__container { .d-modal__container {
min-height: calc(var(--composer-vh, var(--1dvh)) * 85); min-height: calc(var(--composer-vh, 1dvh) * 85);
} }
} }

10
app/assets/stylesheets/mobile/modal.scss
View File

@ -7,14 +7,14 @@ html:has(.d-modal) {
html.keyboard-visible.mobile-view { html.keyboard-visible.mobile-view {
.d-modal { .d-modal {
max-height: calc(var(--composer-vh, var(--1dvh)) * 100); max-height: calc(var(--composer-vh, 1dvh) * 100);
height: calc(var(--composer-vh, var(--1dvh)) * 100); height: calc(var(--composer-vh, 1dvh) * 100);
bottom: 0; bottom: 0;
} }
.d-modal__container { .d-modal__container {
max-height: calc(var(--composer-vh, var(--1dvh)) * 100); max-height: calc(var(--composer-vh, 1dvh) * 100);
height: calc(var(--composer-vh, var(--1dvh)) * 100); height: calc(var(--composer-vh, 1dvh) * 100);
} }
} }
@ -32,7 +32,7 @@ html:not(.keyboard-visible.mobile-view) {
position: fixed; position: fixed;
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
max-height: calc(var(--composer-vh, var(--1dvh)) * 85); max-height: calc(var(--composer-vh, 1dvh) * 85);
} }
&__footer { &__footer {

7
plugins/chat/assets/stylesheets/common/chat-composer.scss
View File

@ -73,11 +73,6 @@
align-self: stretch; align-self: stretch;
} }
--100dvh: 100vh;
@supports (height: 100dvh) {
--100dvh: 100dvh;
}
&__input { &__input {
overflow-x: hidden; overflow-x: hidden;
width: 100%; width: 100%;
@ -85,7 +80,7 @@
outline: none; outline: none;
border: 0; border: 0;
resize: none; resize: none;
max-height: calc(var(--100dvh) / 4); max-height: 25dvh;
background: none; background: none;
padding: 0; padding: 0;
margin: 5px 0; margin: 5px 0;