mirror of
https://github.com/discourse/discourse.git
synced 2025-02-25 18:55:32 -06:00
DEV: Fix all mixed-decls sass deprecations (#31343)
```
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
GitHub
parent
8c9514b4ba
commit
be513ed9a3
@ -1057,8 +1057,8 @@ table#user-badges {
|
||||
}
|
||||
|
||||
.remove-value-btn {
|
||||
@include value-btn;
|
||||
margin-right: 0.25em;
|
||||
@include value-btn;
|
||||
}
|
||||
|
||||
.shift-up-value-btn,
|
||||
@ -1117,9 +1117,9 @@ table#user-badges {
|
||||
.value .add-value-btn,
|
||||
.shift-up-value-btn,
|
||||
.shift-down-value-btn {
|
||||
@include value-btn;
|
||||
margin-right: 0 !important;
|
||||
margin-left: 0.25em;
|
||||
@include value-btn;
|
||||
}
|
||||
|
||||
.secret-value-list {
|
||||
@ -1148,9 +1148,9 @@ table#user-badges {
|
||||
}
|
||||
|
||||
.add-value-btn {
|
||||
@include value-btn;
|
||||
margin-left: 0.25em;
|
||||
margin-top: 0.125em;
|
||||
@include value-btn;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -815,6 +815,8 @@
|
||||
margin-left: 0;
|
||||
|
||||
li {
|
||||
display: table-row;
|
||||
|
||||
&.disabled-child {
|
||||
.child-link {
|
||||
color: var(--primary-medium);
|
||||
@ -828,7 +830,6 @@
|
||||
.btn {
|
||||
margin-left: 5px;
|
||||
}
|
||||
display: table-row;
|
||||
|
||||
.col.child-link {
|
||||
padding-right: 10px;
|
||||
|
||||
@ -136,6 +136,7 @@
|
||||
.staff-action-logs-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 0 1em 0;
|
||||
|
||||
.select-kit {
|
||||
margin: 0 0.5em;
|
||||
@ -144,7 +145,6 @@
|
||||
button {
|
||||
margin-left: auto;
|
||||
}
|
||||
margin: 0 0 1em 0;
|
||||
|
||||
a.filter {
|
||||
.label {
|
||||
|
||||
@ -13,6 +13,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 5px;
|
||||
border-top: 1px solid var(--primary-low);
|
||||
|
||||
&:nth-of-type(1) {
|
||||
border-top: 0;
|
||||
@ -21,7 +22,6 @@
|
||||
&.highlight-danger {
|
||||
background-color: var(--danger-low);
|
||||
}
|
||||
border-top: 1px solid var(--primary-low);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
|
||||
@ -12,26 +12,25 @@ html.composer-open {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-inline: auto;
|
||||
max-width: $reply-area-max-width;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
min-height: 0;
|
||||
|
||||
&.hide-preview {
|
||||
max-width: 740px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
min-width: 0;
|
||||
}
|
||||
z-index: z("composer", "content");
|
||||
transition: height 0.2s, max-width 0.2s, padding-bottom 0.2s, top 0.2s,
|
||||
transform 0.2s, min-height 0.2s;
|
||||
background-color: var(--secondary);
|
||||
box-shadow: var(--shadow-composer);
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&.hide-preview {
|
||||
max-width: 740px;
|
||||
}
|
||||
|
||||
.reply-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@ -4,12 +4,13 @@
|
||||
}
|
||||
|
||||
.directory {
|
||||
margin-bottom: 100px;
|
||||
background: var(--d-content-background);
|
||||
|
||||
.directory-value-list-item:not(:empty)
|
||||
~ .directory-value-list-item:not(:empty)::before {
|
||||
content: "| ";
|
||||
}
|
||||
margin-bottom: 100px;
|
||||
background: var(--d-content-background);
|
||||
|
||||
&.users-directory {
|
||||
.directory-group-selector {
|
||||
@ -284,14 +285,15 @@
|
||||
}
|
||||
|
||||
&__row {
|
||||
&:first-child {
|
||||
border-top: 1px solid var(--primary-low);
|
||||
}
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(11em, 1fr));
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
padding: 0.85em 0.5em 1em;
|
||||
gap: 0 10%;
|
||||
|
||||
&:first-child {
|
||||
border-top: 1px solid var(--primary-low);
|
||||
}
|
||||
}
|
||||
|
||||
&__header {
|
||||
|
||||
@ -92,8 +92,8 @@ small {
|
||||
}
|
||||
|
||||
blockquote {
|
||||
@include post-aside;
|
||||
clear: both;
|
||||
@include post-aside;
|
||||
}
|
||||
|
||||
h1,
|
||||
@ -304,6 +304,9 @@ textarea {
|
||||
// Common Classes
|
||||
.sortable {
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
|
||||
@include user-select(none);
|
||||
|
||||
.discourse-no-touch & {
|
||||
&:hover,
|
||||
@ -315,8 +318,6 @@ textarea {
|
||||
.d-icon {
|
||||
margin-left: 0.25em;
|
||||
}
|
||||
@include unselectable;
|
||||
cursor: pointer;
|
||||
|
||||
button {
|
||||
background: none;
|
||||
|
||||
@ -189,6 +189,7 @@ div.edit-category {
|
||||
.required-tag-group-row {
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
margin-bottom: 1em;
|
||||
|
||||
> * {
|
||||
margin: 0;
|
||||
@ -197,7 +198,6 @@ div.edit-category {
|
||||
input[type="number"] {
|
||||
width: 4em;
|
||||
}
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -49,15 +49,16 @@
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
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
|
||||
// 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
|
||||
min-width: var(--d-logo-height);
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
animation-duration: 0s;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
min-width: 0;
|
||||
@ -442,11 +443,11 @@ $mobile-avatar-height: 1.532em;
|
||||
.trigger-user-card {
|
||||
.icon {
|
||||
height: $avatar-height;
|
||||
display: inline-block;
|
||||
|
||||
.mobile-view & {
|
||||
height: $mobile-avatar-height;
|
||||
}
|
||||
display: inline-block;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
@ -466,11 +467,11 @@ $mobile-avatar-height: 1.532em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: $avatar-height;
|
||||
color: var(--primary-high);
|
||||
|
||||
.mobile-view & {
|
||||
height: $mobile-avatar-height;
|
||||
}
|
||||
color: var(--primary-high);
|
||||
|
||||
.d-icon {
|
||||
margin-right: 5px;
|
||||
|
||||
@ -620,10 +620,11 @@ button {
|
||||
/* start state */
|
||||
.mfp-content {
|
||||
opacity: 0;
|
||||
transform: scale(0.8);
|
||||
|
||||
@media screen and (prefers-reduced-motion: no-preference) {
|
||||
transition: all 0.2s;
|
||||
}
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
&.mfp-bg {
|
||||
|
||||
@ -6,13 +6,8 @@
|
||||
|
||||
// ensure there's always space to click outside on tiny devices
|
||||
max-width: 90vw;
|
||||
|
||||
--100dvh: 100%;
|
||||
@supports (height: 100dvh) {
|
||||
--100dvh: 100dvh;
|
||||
}
|
||||
box-shadow: 0 0 30px -2px rgba(0, 0, 0, 0.5);
|
||||
height: var(--100dvh);
|
||||
height: 100dvh;
|
||||
|
||||
.panel-body {
|
||||
width: 100%;
|
||||
@ -369,13 +364,14 @@
|
||||
}
|
||||
|
||||
.profile-tab-btn {
|
||||
justify-content: unset;
|
||||
line-height: var(--line-height-large);
|
||||
width: 100%;
|
||||
|
||||
.relative-date {
|
||||
font-size: var(--font-down-3);
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
justify-content: unset;
|
||||
line-height: var(--line-height-large);
|
||||
width: 100%;
|
||||
|
||||
.d-icon {
|
||||
padding: 0;
|
||||
@ -420,6 +416,9 @@
|
||||
padding-top: 0.75em;
|
||||
margin-top: -1px;
|
||||
|
||||
/* as a big ol' click target, don't let text inside be selected */
|
||||
@include unselectable;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
@ -548,9 +547,6 @@
|
||||
> div {
|
||||
overflow: hidden; // clears the text from wrapping below icons
|
||||
overflow-wrap: anywhere;
|
||||
@supports not (overflow-wrap: anywhere) {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
// Truncate items with more than 2 lines.
|
||||
@include line-clamp(2);
|
||||
@ -613,9 +609,6 @@
|
||||
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
|
||||
|
||||
@ -167,11 +167,12 @@
|
||||
.modal-backdrop,
|
||||
.modal-backdrop.fade.in {
|
||||
animation: fade 0.3s;
|
||||
opacity: 0.9;
|
||||
filter: alpha(opacity=90);
|
||||
|
||||
@media (prefers-reduced-motion) {
|
||||
animation-duration: 0s;
|
||||
}
|
||||
opacity: 0.9;
|
||||
filter: alpha(opacity=90);
|
||||
}
|
||||
|
||||
// fade in
|
||||
@ -229,11 +230,11 @@
|
||||
.nav {
|
||||
padding: 10px 30px 10px 15px;
|
||||
background-color: var(--secondary);
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
|
||||
li > a {
|
||||
font-size: var(--font-0);
|
||||
}
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
|
||||
@ -15,11 +15,12 @@ a.loading-onebox {
|
||||
}
|
||||
|
||||
.onebox-result {
|
||||
@include post-aside;
|
||||
margin-top: 15px;
|
||||
padding: 12px;
|
||||
font-size: var(--font-0);
|
||||
|
||||
@include post-aside;
|
||||
|
||||
.onebox-result-body {
|
||||
padding-top: 5px;
|
||||
|
||||
@ -73,13 +74,14 @@ a.loading-onebox {
|
||||
height: 20px;
|
||||
|
||||
.info {
|
||||
position: absolute;
|
||||
font-size: var(--font-0);
|
||||
|
||||
a {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
padding-right: 10px;
|
||||
}
|
||||
position: absolute;
|
||||
font-size: var(--font-0);
|
||||
|
||||
img.favicon {
|
||||
margin-right: 3px;
|
||||
@ -151,13 +153,14 @@ aside.onebox {
|
||||
img:not(.avatar, .onebox-avatar-inline) {
|
||||
max-height: 170px;
|
||||
max-width: 20%;
|
||||
@media all and (max-width: 600px) {
|
||||
max-width: 35%;
|
||||
}
|
||||
height: auto;
|
||||
float: left;
|
||||
margin-right: 1em;
|
||||
|
||||
@media all and (max-width: 600px) {
|
||||
max-width: 35%;
|
||||
}
|
||||
|
||||
&.onebox-full-image {
|
||||
max-height: none;
|
||||
max-width: none;
|
||||
@ -296,6 +299,10 @@ aside.onebox {
|
||||
}
|
||||
|
||||
.video-icon {
|
||||
bottom: 15px;
|
||||
right: 10px;
|
||||
position: absolute;
|
||||
|
||||
&::before {
|
||||
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>'
|
||||
);
|
||||
}
|
||||
bottom: 15px;
|
||||
right: 10px;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -967,6 +971,7 @@ aside.onebox.mixcloud-preview {
|
||||
.mixcloud-text {
|
||||
padding-left: 170px;
|
||||
font-family: sans-serif;
|
||||
color: gray;
|
||||
|
||||
h3 {
|
||||
font-size: 13px;
|
||||
@ -980,7 +985,6 @@ aside.onebox.mixcloud-preview {
|
||||
font-size: 12px;
|
||||
font-weight: 200;
|
||||
}
|
||||
color: gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -57,11 +57,12 @@
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background: var(--danger-low);
|
||||
|
||||
.d-icon,
|
||||
.d-button-label {
|
||||
color: var(--danger);
|
||||
}
|
||||
background: var(--danger-low);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -96,6 +96,7 @@
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
padding-bottom: 0.25em;
|
||||
display: flex;
|
||||
margin-bottom: 0.5em;
|
||||
|
||||
.name {
|
||||
width: 8em;
|
||||
@ -109,7 +110,6 @@
|
||||
); // subtracting width of name and margin-right
|
||||
word-wrap: break-word;
|
||||
}
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
@ -236,6 +236,7 @@
|
||||
background: var(--primary-very-low);
|
||||
padding: 1.5rem;
|
||||
margin-block: 3rem;
|
||||
padding-bottom: 1em;
|
||||
|
||||
.show-raw-email {
|
||||
color: var(--primary-medium);
|
||||
@ -472,7 +473,6 @@
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
.reviewable-stale {
|
||||
@ -607,17 +607,20 @@
|
||||
}
|
||||
|
||||
.editable-fields {
|
||||
width: 100%;
|
||||
|
||||
.editable-created-by {
|
||||
display: flex;
|
||||
margin-bottom: 0.5em;
|
||||
|
||||
.avatar {
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
width: 100%;
|
||||
|
||||
.editable-field {
|
||||
margin-bottom: 0.5em;
|
||||
|
||||
.mini-tag-chooser {
|
||||
margin: 0;
|
||||
}
|
||||
@ -631,7 +634,6 @@
|
||||
width: 100%;
|
||||
height: 10em;
|
||||
}
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -431,9 +431,6 @@ $search-pad-horizontal: 0.5em;
|
||||
.topic-title {
|
||||
color: var(--tertiary);
|
||||
overflow-wrap: anywhere;
|
||||
@supports not (overflow-wrap: anywhere) {
|
||||
word-break: break-word;
|
||||
}
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
@ -18,8 +18,8 @@
|
||||
}
|
||||
|
||||
.search-header {
|
||||
@include search-page-spacing;
|
||||
background: var(--primary-very-low);
|
||||
@include search-page-spacing;
|
||||
}
|
||||
|
||||
.warning {
|
||||
|
||||
@ -24,6 +24,12 @@
|
||||
|
||||
.btn.dropdown-select-box-header,
|
||||
.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 & {
|
||||
transition: all 0.25s;
|
||||
opacity: 0;
|
||||
@ -40,11 +46,6 @@
|
||||
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 {
|
||||
font-size: var(--font-down-1);
|
||||
|
||||
@ -1,9 +1,5 @@
|
||||
:root {
|
||||
--d-sidebar-width: #{$d-sidebar-width};
|
||||
@include breakpoint(large) {
|
||||
--d-sidebar-width: #{$d-sidebar-narrow-width};
|
||||
}
|
||||
|
||||
--d-sidebar-row-horizontal-padding: 1rem;
|
||||
|
||||
// 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-prefix-background: var(--primary-200);
|
||||
--d-sidebar-active-suffix-color: var(--tertiary-med-or-tertiary);
|
||||
|
||||
@include breakpoint(large) {
|
||||
--d-sidebar-width: #{$d-sidebar-narrow-width};
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-row {
|
||||
@ -63,20 +63,15 @@
|
||||
position: sticky;
|
||||
top: var(--main-outlet-offset);
|
||||
background: var(--d-sidebar-background);
|
||||
|
||||
@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)
|
||||
);
|
||||
height: calc(var(--composer-vh, 1dvh) * 100 - var(--main-outlet-offset, 0px));
|
||||
align-self: start;
|
||||
overflow-y: auto;
|
||||
|
||||
// back-compat for themes
|
||||
--1dvh: 1dvh;
|
||||
|
||||
@include unselectable;
|
||||
|
||||
.sidebar-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -103,10 +98,6 @@
|
||||
overflow-x: hidden;
|
||||
overflow-y: overlay;
|
||||
|
||||
> .sidebar-section-wrapper:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
// custom scrollbar styling
|
||||
--scrollbarBg: transparent;
|
||||
--scrollbarThumbBg: var(--primary-low);
|
||||
@ -115,6 +106,10 @@
|
||||
transition: scrollbar-color 0.25s ease-in-out;
|
||||
transition-delay: 0.5s;
|
||||
|
||||
> .sidebar-section-wrapper:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: var(--scrollbarWidth);
|
||||
}
|
||||
@ -130,11 +125,11 @@
|
||||
|
||||
&:hover {
|
||||
scrollbar-color: var(--scrollbarThumbBg) var(--scrollbarBg);
|
||||
transition-delay: 0s;
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: var(--scrollbarThumbBg);
|
||||
}
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
&__back-to-forum {
|
||||
@ -379,11 +374,11 @@
|
||||
background: none;
|
||||
margin-bottom: 0;
|
||||
height: 2em;
|
||||
width: 100%;
|
||||
|
||||
&:focus-within {
|
||||
outline: 0;
|
||||
}
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__clear {
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
#topic-footer-buttons {
|
||||
display: flex;
|
||||
|
||||
html.anon & {
|
||||
justify-content: end;
|
||||
}
|
||||
max-width: calc(
|
||||
var(--topic-avatar-width) + var(--topic-body-width) +
|
||||
var(--topic-body-width-padding) * 2
|
||||
);
|
||||
|
||||
html.anon & {
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
.topic-footer-main-buttons {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
@ -51,14 +51,15 @@
|
||||
}
|
||||
|
||||
#topic-progress-wrapper {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
overflow: hidden;
|
||||
|
||||
&.docked {
|
||||
.toggle-admin-menu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
overflow: hidden;
|
||||
|
||||
.btn {
|
||||
border: 0;
|
||||
|
||||
@ -22,9 +22,6 @@
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
animation: placeHolderShimmer 4s linear infinite forwards;
|
||||
}
|
||||
position: absolute;
|
||||
left: 0;
|
||||
content: "";
|
||||
@ -36,6 +33,10 @@
|
||||
);
|
||||
height: 45px;
|
||||
width: 700px;
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
animation: placeHolderShimmer 4s linear infinite forwards;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -635,10 +636,12 @@ aside.quote {
|
||||
margin-bottom: 1em;
|
||||
|
||||
.title {
|
||||
@include post-aside;
|
||||
color: var(--primary-high-or-secondary-low);
|
||||
padding: 0.8em 0.8em 0 0.8em;
|
||||
|
||||
@include post-aside;
|
||||
@include unselectable;
|
||||
|
||||
// blockquote is underneath this and has top margin
|
||||
.avatar {
|
||||
margin-right: 0.5em;
|
||||
@ -647,8 +650,6 @@ aside.quote {
|
||||
img {
|
||||
margin-top: -0.26em;
|
||||
}
|
||||
|
||||
@include unselectable;
|
||||
}
|
||||
|
||||
// blockquote is docked within aside for content
|
||||
@ -1335,15 +1336,16 @@ span.mention {
|
||||
|
||||
.broken-image,
|
||||
.blocked-hotlinked-placeholder {
|
||||
&:not(a) {
|
||||
color: var(--primary-low-mid-or-secondary-high);
|
||||
}
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid var(--primary-low);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:not(a) {
|
||||
color: var(--primary-low-mid-or-secondary-high);
|
||||
}
|
||||
|
||||
.d-icon {
|
||||
margin: 16px;
|
||||
font-size: var(--font-up-5);
|
||||
|
||||
@ -99,6 +99,7 @@
|
||||
text-align: left;
|
||||
display: block;
|
||||
margin: 20px 0;
|
||||
width: 800px;
|
||||
|
||||
.badge-info {
|
||||
display: none;
|
||||
@ -116,7 +117,6 @@
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
width: 800px;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
|
||||
@ -402,6 +402,8 @@
|
||||
}
|
||||
|
||||
.avatar-selector {
|
||||
--label-max-width: 300px;
|
||||
|
||||
.avatar-choice {
|
||||
display: grid;
|
||||
grid-template-columns: 2em 1fr auto;
|
||||
@ -429,8 +431,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
--label-max-width: 300px;
|
||||
|
||||
label.radio {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -45,10 +45,11 @@
|
||||
}
|
||||
|
||||
.bookmark-options-panel {
|
||||
margin-bottom: 18px;
|
||||
|
||||
.select-kit {
|
||||
width: 100%;
|
||||
}
|
||||
margin-bottom: 18px;
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
|
||||
@ -13,18 +13,12 @@
|
||||
$hover-bg-color: var(--primary-medium),
|
||||
$hover-icon-color: var(--primary-low)
|
||||
) {
|
||||
@include form-item-sizing;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
color: $text-color;
|
||||
|
||||
&:visited {
|
||||
// covers cases where we add button classes to links
|
||||
color: $text-color;
|
||||
}
|
||||
background-color: $bg-color;
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
@ -35,6 +29,13 @@
|
||||
transition: var(--d-button-transition);
|
||||
cursor: pointer;
|
||||
|
||||
@include form-item-sizing;
|
||||
|
||||
&:visited {
|
||||
// covers cases where we add button classes to links
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
.d-icon {
|
||||
color: $icon-color;
|
||||
margin-right: 0.45em;
|
||||
@ -109,6 +110,8 @@
|
||||
|
||||
&[disabled],
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
|
||||
&:not(.is-loading) {
|
||||
opacity: 0.4;
|
||||
}
|
||||
@ -121,7 +124,6 @@
|
||||
color: $icon-color;
|
||||
}
|
||||
}
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.loading-container {
|
||||
|
||||
@ -1,7 +1,4 @@
|
||||
.calendar-date-time-input {
|
||||
.fake-input {
|
||||
display: none;
|
||||
}
|
||||
padding: 5px;
|
||||
border: 1px solid var(--primary-low);
|
||||
z-index: 1;
|
||||
@ -10,6 +7,10 @@
|
||||
box-sizing: border-box;
|
||||
margin-left: 1em;
|
||||
|
||||
.fake-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.date-picker {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
.d-toggle-switch {
|
||||
--toggle-switch-width: 45px;
|
||||
--toggle-switch-height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
|
||||
&:focus {
|
||||
.d-toggle-switch__checkbox-slider {
|
||||
@ -19,9 +22,6 @@
|
||||
background-color: var(--tertiary-hover);
|
||||
}
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
|
||||
&__label {
|
||||
position: relative;
|
||||
|
||||
@ -1,13 +1,4 @@
|
||||
.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;
|
||||
justify-self: start;
|
||||
font-size: var(--font-down-1);
|
||||
@ -19,6 +10,16 @@
|
||||
margin-bottom: 0.45em;
|
||||
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 {
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
|
||||
@ -23,9 +23,6 @@
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
animation: placeHolderShimmer 4s linear infinite forwards;
|
||||
}
|
||||
position: absolute;
|
||||
left: 0;
|
||||
content: "";
|
||||
@ -37,6 +34,10 @@
|
||||
);
|
||||
height: var(--avatar-width);
|
||||
width: var(--card-width);
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
animation: placeHolderShimmer 4s linear infinite forwards;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -308,19 +308,21 @@
|
||||
.d-editor-button-bar {
|
||||
display: grid;
|
||||
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;
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
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 {
|
||||
@include default-focus;
|
||||
}
|
||||
|
||||
@ -17,11 +17,13 @@
|
||||
|
||||
.ace-wrapper[data-disabled="false"] {
|
||||
.ace_focus {
|
||||
@include default-input;
|
||||
height: unset;
|
||||
border-color: var(--tertiary);
|
||||
outline: 2px solid var(--tertiary);
|
||||
outline-offset: -1px;
|
||||
|
||||
@include default-input {
|
||||
height: unset;
|
||||
border-color: var(--tertiary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -20,8 +20,9 @@
|
||||
}
|
||||
|
||||
.d-editor-textarea-wrapper {
|
||||
@include default-input;
|
||||
padding: 0 !important;
|
||||
@include default-input {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.d-editor-input {
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
.form-kit__control-input {
|
||||
@include default-input;
|
||||
z-index: 1;
|
||||
margin: 0 !important;
|
||||
min-width: auto !important;
|
||||
|
||||
@include default-input;
|
||||
|
||||
.form-kit__field.has-error & {
|
||||
border-color: var(--danger);
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.form-kit__control-menu-trigger {
|
||||
@include default-input;
|
||||
justify-content: space-between;
|
||||
@include default-input;
|
||||
}
|
||||
|
||||
.form-kit__control-menu-content {
|
||||
|
||||
@ -1,14 +1,11 @@
|
||||
.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
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,6 +9,8 @@
|
||||
margin: 0 !important;
|
||||
appearance: none;
|
||||
|
||||
@content;
|
||||
|
||||
@include breakpoint(mobile-large) {
|
||||
width: 100% !important;
|
||||
height: 2.25em;
|
||||
|
||||
@ -132,8 +132,8 @@ $hpad: 0.65em;
|
||||
}
|
||||
|
||||
@mixin unselectable {
|
||||
@include user-select(none);
|
||||
cursor: default;
|
||||
@include user-select(none);
|
||||
}
|
||||
|
||||
// Stuff we repeat
|
||||
|
||||
@ -15,12 +15,13 @@
|
||||
|
||||
> div:first-child,
|
||||
> details:first-child {
|
||||
margin-top: 0.5rem;
|
||||
|
||||
// This is hacky, but helps having the leading gapcursor at the right position
|
||||
&.ProseMirror-gapcursor {
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
h1,
|
||||
|
||||
@ -4,12 +4,6 @@
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: var(--header-offset, 60px);
|
||||
|
||||
.static-login &,
|
||||
.wizard &,
|
||||
.invite-page & {
|
||||
top: 0;
|
||||
}
|
||||
background-color: var(--tertiary-low);
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
@ -17,6 +11,12 @@
|
||||
box-shadow: var(--shadow-header);
|
||||
z-index: z("header") - 10;
|
||||
|
||||
.static-login &,
|
||||
.wizard &,
|
||||
.invite-page & {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.update-prompt-main-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -39,9 +39,6 @@
|
||||
}
|
||||
|
||||
&.timeline-fullscreen {
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
transition: max-height 0.3s ease-in;
|
||||
}
|
||||
max-height: 0;
|
||||
position: fixed;
|
||||
margin-left: 0;
|
||||
@ -53,6 +50,11 @@
|
||||
box-shadow: var(--shadow-composer);
|
||||
padding: 20px 0;
|
||||
z-index: z("fullscreen");
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
transition: max-height 0.3s ease-in;
|
||||
}
|
||||
|
||||
@media screen and (max-height: 425px) {
|
||||
padding-top: 10px;
|
||||
}
|
||||
@ -201,13 +203,14 @@
|
||||
// above the topic-footer-controls
|
||||
position: absolute;
|
||||
margin-top: 1em;
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
transition: opacity 0.2s ease-in;
|
||||
}
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
transition: opacity 0.2s ease-in;
|
||||
}
|
||||
|
||||
button:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
@ -292,13 +295,13 @@
|
||||
.timeline-last-read {
|
||||
position: absolute;
|
||||
margin-left: -0.35em;
|
||||
z-index: z("base") + 2; // above timeline-handle
|
||||
|
||||
.progress {
|
||||
font-size: 0.8em;
|
||||
color: var(--tertiary);
|
||||
margin-right: 1em;
|
||||
}
|
||||
z-index: z("base") + 2; // above timeline-handle
|
||||
}
|
||||
|
||||
.back-button {
|
||||
|
||||
@ -339,18 +339,10 @@ a.toggle-preview {
|
||||
animation-delay: 1.5s;
|
||||
animation-direction: reverse;
|
||||
animation-fill-mode: forwards;
|
||||
@media (prefers-reduced-motion) {
|
||||
animation-duration: 0s;
|
||||
}
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
top: 10%;
|
||||
transform: translate(-50%, 0);
|
||||
|
||||
.rtl & {
|
||||
// R2 is not smart enough to support this swap
|
||||
transform: translate(50%, 0);
|
||||
}
|
||||
z-index: z("header") + 1;
|
||||
background: var(--primary-very-high);
|
||||
color: var(--secondary);
|
||||
@ -358,6 +350,15 @@ a.toggle-preview {
|
||||
pointer-events: none;
|
||||
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 {
|
||||
background: none;
|
||||
}
|
||||
|
||||
@ -119,8 +119,8 @@ select {
|
||||
}
|
||||
|
||||
.control-group {
|
||||
@include clearfix;
|
||||
margin-bottom: 18px;
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
.control-indent {
|
||||
@ -162,10 +162,11 @@ body.has-sidebar-page {
|
||||
#main-outlet-wrapper {
|
||||
grid-template-columns: var(--d-sidebar-width) minmax(0, 1fr);
|
||||
gap: 0 2em;
|
||||
padding-left: 0;
|
||||
|
||||
@include breakpoint(large) {
|
||||
gap: 0 1em;
|
||||
}
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -32,11 +32,11 @@ html.modal-open {
|
||||
.close {
|
||||
font-size: var(--font-up-3);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:visited {
|
||||
color: var(--primary-high);
|
||||
}
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: var(--primary);
|
||||
|
||||
@ -103,11 +103,11 @@ nav.post-controls {
|
||||
align-items: center;
|
||||
margin-left: 0;
|
||||
border-radius: var(--d-button-border-radius);
|
||||
white-space: nowrap;
|
||||
|
||||
.topic-post & {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
white-space: nowrap;
|
||||
|
||||
.d-icon {
|
||||
margin-inline: var(--control-icon-space);
|
||||
@ -155,12 +155,13 @@ pre.codeblock-buttons:hover {
|
||||
}
|
||||
|
||||
.embedded-posts {
|
||||
border: 1px solid var(--primary-low);
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
margin: 10px 0;
|
||||
}
|
||||
border: 1px solid var(--primary-low);
|
||||
|
||||
.topic-body {
|
||||
box-sizing: border-box;
|
||||
@ -341,15 +342,15 @@ pre.codeblock-buttons:hover {
|
||||
&.top {
|
||||
margin-left: 0;
|
||||
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 {
|
||||
transform: translate(17%, 230%);
|
||||
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 {
|
||||
.topic-body,
|
||||
|
||||
@ -4,20 +4,19 @@
|
||||
}
|
||||
|
||||
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%;
|
||||
|
||||
.emoji-picker__content {
|
||||
height: calc(
|
||||
var(--composer-vh, var(--1dvh)) * 100 - 50px -
|
||||
env(safe-area-inset-bottom)
|
||||
var(--composer-vh, 1dvh) * 100 - 50px - env(safe-area-inset-bottom)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
html.keyboard-visible.mobile-view & .d-modal__container {
|
||||
.emoji-picker__content {
|
||||
height: calc(var(--composer-vh, var(--1dvh)) * 100 - 50px);
|
||||
height: calc(var(--composer-vh, 1dvh) * 100 - 50px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -24,6 +24,6 @@
|
||||
.d-modal.grant-badge-modal,
|
||||
.d-modal.bookmark-reminder-modal {
|
||||
.d-modal__container {
|
||||
min-height: calc(var(--composer-vh, var(--1dvh)) * 85);
|
||||
min-height: calc(var(--composer-vh, 1dvh) * 85);
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,14 +7,14 @@ html:has(.d-modal) {
|
||||
|
||||
html.keyboard-visible.mobile-view {
|
||||
.d-modal {
|
||||
max-height: calc(var(--composer-vh, var(--1dvh)) * 100);
|
||||
height: calc(var(--composer-vh, var(--1dvh)) * 100);
|
||||
max-height: calc(var(--composer-vh, 1dvh) * 100);
|
||||
height: calc(var(--composer-vh, 1dvh) * 100);
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.d-modal__container {
|
||||
max-height: calc(var(--composer-vh, var(--1dvh)) * 100);
|
||||
height: calc(var(--composer-vh, var(--1dvh)) * 100);
|
||||
max-height: calc(var(--composer-vh, 1dvh) * 100);
|
||||
height: calc(var(--composer-vh, 1dvh) * 100);
|
||||
}
|
||||
}
|
||||
|
||||
@ -32,7 +32,7 @@ html:not(.keyboard-visible.mobile-view) {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
max-height: calc(var(--composer-vh, var(--1dvh)) * 85);
|
||||
max-height: calc(var(--composer-vh, 1dvh) * 85);
|
||||
}
|
||||
|
||||
&__footer {
|
||||
|
||||
@ -73,11 +73,6 @@
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
--100dvh: 100vh;
|
||||
@supports (height: 100dvh) {
|
||||
--100dvh: 100dvh;
|
||||
}
|
||||
|
||||
&__input {
|
||||
overflow-x: hidden;
|
||||
width: 100%;
|
||||
@ -85,7 +80,7 @@
|
||||
outline: none;
|
||||
border: 0;
|
||||
resize: none;
|
||||
max-height: calc(var(--100dvh) / 4);
|
||||
max-height: 25dvh;
|
||||
background: none;
|
||||
padding: 0;
|
||||
margin: 5px 0;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user