discourse/app/assets/stylesheets/common/admin/customize-install-theme.scss
2024-07-24 18:07:17 +02:00

143 lines
2.4 KiB
SCSS

.install-theme {
display: flex;
@include breakpoint(mobile-extra-large) {
.install-theme-items {
flex: 0 0 150px;
}
.install-theme-content {
flex: 1 1 100%;
}
.select-kit {
width: 100%;
}
}
}
.install-theme-items {
width: 200px;
}
.install-theme-item {
border: 1px solid var(--primary-low);
border-bottom: none;
position: relative;
&:last-child {
border-bottom: 1px solid var(--primary-low);
}
input,
.d-icon-caret-right {
display: none;
}
label {
display: block;
padding: 10px 30px 10px 10px;
margin-bottom: 0px;
cursor: pointer;
}
input:checked + label {
color: var(--secondary);
background-color: var(--tertiary);
+ .d-icon {
display: block;
color: var(--secondary);
}
}
.d-icon-caret-right {
position: absolute;
right: 5px;
top: 50%;
margin-top: -7px;
}
}
.install-theme-content {
width: calc(100% - 20px);
input[type="file"] {
width: 100%;
overflow: hidden; // Chrome needs this
}
}
.install-theme-items + .install-theme-content {
padding: 0px 0px 10px 20px;
width: calc(100% - 200px);
}
.repo {
input[type="text"] {
width: 90%;
}
}
.popular-theme-items {
height: 65vh;
overflow: auto;
padding-right: 20px;
}
.popular-theme-item {
border-bottom: 1px solid var(--primary-low);
padding: 8px 0px;
display: flex;
align-items: center;
@include breakpoint(mobile-extra-large) {
flex-direction: column;
align-items: initial;
}
.popular-theme-name {
flex: 1;
.popular-theme-type {
font-weight: normal;
font-size: var(--font-down-2);
color: var(--primary-medium);
}
a {
color: var(--primary-very-high);
font-weight: bold;
&:hover,
&:visited,
&:active {
color: var(--primary-high);
}
}
.popular-theme-description {
font-size: var(--font-down-1);
padding-right: 20px;
}
}
.popular-theme-buttons {
@include breakpoint(mobile-extra-large) {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 0.25em;
}
> span {
font-style: italic;
font-size: var(--font-down-1);
color: var(--primary-medium);
margin-right: 8px;
}
> a {
display: block;
font-size: var(--font-down-2);
margin-top: 5px;
text-align: center;
}
}
}
.install-theme-warning {
margin-bottom: 10px;
}