mirror of
https://gh.wpcy.net/https://github.com/discourse/discourse.git
synced 2026-06-19 05:59:26 +08:00
3cd6cbcb06
Previously, the theme picker modal had small blurry screenshots, only the "Use this theme" button was interactive (not the card), and changing themes showed a toast notification that appeared briefly before the page reloaded. This change makes the modal wider with taller image previews, lets users select a card first and then apply with a "Use selected theme" button (with an inline loading state replacing the toast), and skips the API call entirely when the already-active theme is reselected. https://github.com/user-attachments/assets/6496bbfa-bf4e-4c7a-9168-3b3e0039c3de
269 lines
5.2 KiB
SCSS
Vendored
269 lines
5.2 KiB
SCSS
Vendored
@use "lib/viewport";
|
|
@import "common/foundation/mixins";
|
|
|
|
.admin-onboarding-banner {
|
|
margin-bottom: var(--space-4);
|
|
color: var(--secondary);
|
|
|
|
@include viewport.until(sm) {
|
|
display: none;
|
|
}
|
|
|
|
&__wrap {
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
padding: var(--space-5) var(--space-8);
|
|
border-radius: var(--d-border-radius-large);
|
|
background: var(--accent-color, var(--tertiary-low));
|
|
color: var(--accent-text-color, var(--primary));
|
|
|
|
@include viewport.until(md) {
|
|
padding: var(--space-4) var(--space-5);
|
|
margin-top: var(--space-2);
|
|
}
|
|
|
|
@include viewport.until(sm) {
|
|
display: block;
|
|
padding: var(--space-2);
|
|
margin-top: 0;
|
|
}
|
|
|
|
.btn-close {
|
|
position: absolute;
|
|
top: var(--space-1);
|
|
right: var(--space-1);
|
|
|
|
.d-icon {
|
|
color: var(--accent-text-color, var(--primary));
|
|
}
|
|
}
|
|
}
|
|
|
|
&__header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: var(--space);
|
|
|
|
@include viewport.until(md) {
|
|
font-size: var(--font-down-1);
|
|
}
|
|
}
|
|
|
|
&__content {
|
|
text-align: center;
|
|
|
|
@include viewport.until(md) {
|
|
margin-top: var(--space-3);
|
|
}
|
|
}
|
|
|
|
&__steps {
|
|
margin-bottom: var(--space-2);
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: var(--space-2) var(--space-12);
|
|
text-wrap: pretty;
|
|
|
|
@include viewport.until(md) {
|
|
font-size: var(--font-down-1);
|
|
}
|
|
|
|
.onboarding-step {
|
|
display: grid;
|
|
grid-template-rows: subgrid;
|
|
grid-row: span 3;
|
|
justify-content: start;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
text-align: left;
|
|
gap: var(--space-2);
|
|
|
|
&__checkbox {
|
|
gap: var(--space-2);
|
|
display: flex;
|
|
align-items: baseline;
|
|
font-weight: bold;
|
|
|
|
.d-icon {
|
|
position: relative;
|
|
top: var(--space-half);
|
|
}
|
|
}
|
|
|
|
&__text {
|
|
max-width: 16em;
|
|
}
|
|
|
|
button {
|
|
margin-top: var(--space-2);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.start-posting-options-modal {
|
|
.modal-options {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-4);
|
|
}
|
|
|
|
&__card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: start;
|
|
text-align: left;
|
|
width: 100%;
|
|
padding: var(--space-4);
|
|
border: 1px solid var(--content-border-color);
|
|
border-radius: var(--d-border-radius);
|
|
background: var(--secondary);
|
|
|
|
&:focus-visible,
|
|
&:hover {
|
|
outline: 2px solid var(--tertiary);
|
|
|
|
.start-posting-options-modal__title {
|
|
color: var(--tertiary);
|
|
}
|
|
}
|
|
|
|
&:disabled {
|
|
opacity: 0.5;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
&__title {
|
|
display: block;
|
|
font-weight: bold;
|
|
}
|
|
|
|
&__body {
|
|
max-width: var(--modal-max-width);
|
|
}
|
|
}
|
|
|
|
.predefined-topic-options-modal {
|
|
&__list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-4);
|
|
}
|
|
|
|
&__card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: start;
|
|
text-align: left;
|
|
width: 100%;
|
|
padding: var(--space-4);
|
|
border: 1px solid var(--content-border-color);
|
|
border-radius: var(--d-border-radius);
|
|
background: var(--secondary);
|
|
|
|
&:focus-visible,
|
|
&:hover {
|
|
outline: 2px solid var(--tertiary);
|
|
|
|
.predefined-topic-options-modal__title {
|
|
color: var(--tertiary);
|
|
}
|
|
}
|
|
}
|
|
|
|
&__title {
|
|
display: block;
|
|
font-weight: bold;
|
|
}
|
|
|
|
&__body {
|
|
max-width: var(--modal-max-width);
|
|
}
|
|
}
|
|
|
|
.theme-picker-modal {
|
|
&__loading {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: var(--space-6);
|
|
}
|
|
|
|
&__themes {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: var(--space-4);
|
|
}
|
|
|
|
&__card {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border: 2px solid var(--content-border-color);
|
|
border-radius: var(--d-border-radius);
|
|
overflow: hidden;
|
|
background: var(--secondary);
|
|
cursor: pointer;
|
|
transition: border-color 0.15s ease;
|
|
|
|
&:hover {
|
|
border-color: var(--primary-low-mid);
|
|
}
|
|
|
|
&.--selected {
|
|
border-color: var(--tertiary);
|
|
box-shadow: 0 0 0 1px var(--tertiary);
|
|
}
|
|
}
|
|
|
|
.theme-card-preview__image-wrapper {
|
|
height: 220px;
|
|
}
|
|
|
|
.theme-card-preview__image {
|
|
image-rendering: -webkit-optimize-contrast;
|
|
image-rendering: crisp-edges;
|
|
}
|
|
|
|
&__footer {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: var(--space-4);
|
|
}
|
|
|
|
&__enabled-badge {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-1);
|
|
font-size: var(--font-down-2);
|
|
font-weight: 700;
|
|
color: var(--secondary);
|
|
background: var(--tertiary);
|
|
padding: var(--space-1) var(--space-2);
|
|
border-radius: 0 0 0 var(--d-border-radius);
|
|
z-index: 1;
|
|
}
|
|
|
|
&__browse-all,
|
|
&__upgrade-text {
|
|
margin-top: var(--space-4);
|
|
font-size: var(--font-down-1);
|
|
color: var(--primary-medium);
|
|
text-align: center;
|
|
}
|
|
|
|
&__browse-all a,
|
|
&__upgrade-link {
|
|
color: var(--tertiary);
|
|
|
|
&:hover {
|
|
color: var(--tertiary-hover);
|
|
}
|
|
}
|
|
}
|
