mirror of
https://github.com/discourse/discourse.git
synced 2024-12-05 06:13:42 +08:00
3ad2fd032b
* UX: More additions * UX: more * DEV: Add admin/config/themes route * UX: Use admin config card * syntax merge fixes * cleanup * cleanup * checkbox * more * error * save on click * more * fix setter * DEV: Implement vanilla checkbox * cleanup * UX: save themes as default * DEV: Add component list to card * DEV: Add placeholder for no screenshots * DEV: Fix default theme reactivity Also add content/optionalAction yields to config area card and put the theme user selectable checkbox there, along with adding styles. * DEV: Change to generic "look and feel" config area * DEV: Auto redirect to themes on base look and feel route * UX: Remove computed from sorted themes * linting * UX: Turn update icon into button that routes to settings * DEV: remove unused function * UX: center icons with title * DEV: Lint * UX: Hook up theme preview button * DEV: Minor fixes --------- Co-authored-by: Martin Brennan <martin@discourse.org> Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
128 lines
2.1 KiB
SCSS
128 lines
2.1 KiB
SCSS
@mixin theme-card-border($color) {
|
|
border-color: var(--#{$color}-medium);
|
|
box-shadow: 0px 0px 0px 3px var(--#{$color}-low);
|
|
}
|
|
|
|
.themes-cards-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
|
gap: 1em;
|
|
}
|
|
|
|
.theme-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
.admin-config-area-card__content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
&.--active {
|
|
@include theme-card-border(tertiary);
|
|
}
|
|
|
|
&.--disabled {
|
|
@include theme-card-border(primary);
|
|
}
|
|
|
|
&.--broken {
|
|
@include theme-card-border(danger);
|
|
}
|
|
|
|
&.--updates {
|
|
@include theme-card-border(success);
|
|
}
|
|
|
|
.broken-indicator {
|
|
color: var(--danger);
|
|
}
|
|
|
|
&__icons {
|
|
display: flex;
|
|
}
|
|
|
|
&__icons .btn-flat {
|
|
padding: 0;
|
|
}
|
|
|
|
&__image-wrapper {
|
|
width: 100%;
|
|
height: 160px;
|
|
overflow: hidden;
|
|
|
|
svg {
|
|
width: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
}
|
|
|
|
&__image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
object-position: top left;
|
|
border-radius: calc(var(--d-border-radius) + 1px);
|
|
}
|
|
|
|
.ember-checkbox {
|
|
margin: 0 5px 0 0;
|
|
}
|
|
|
|
&__checkbox-label {
|
|
margin: 0;
|
|
font-weight: 400;
|
|
}
|
|
|
|
&__components {
|
|
display: block;
|
|
font-size: var(--font-down-1);
|
|
margin-bottom: 10px;
|
|
color: var(--primary-high);
|
|
}
|
|
|
|
&__button {
|
|
margin-top: auto;
|
|
}
|
|
|
|
&__footer {
|
|
margin-top: auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.admin-config-area-card__header-action {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: var(--secondary);
|
|
right: 20px;
|
|
top: 22px;
|
|
}
|
|
}
|
|
|
|
.admin-config-area-card.theme-card
|
|
.admin-config-area-card__content
|
|
.external-resources {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-direction: column;
|
|
font-size: var(--font-down-1);
|
|
|
|
.external-link {
|
|
margin-bottom: 0.25em;
|
|
color: var(--primary);
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
.theme-card .admin-config-area-card {
|
|
&__title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5em;
|
|
}
|
|
}
|