UX: fix color preference layout (#21346)

This commit is contained in:
Kris 2023-05-02 22:11:52 -04:00 committed by GitHub
parent 9ee8a54d97
commit 3ea86985b9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 52 additions and 47 deletions

View File

@ -35,6 +35,7 @@
{{#if this.showColorSchemeSelector}} {{#if this.showColorSchemeSelector}}
<fieldset class="control-group color-scheme"> <fieldset class="control-group color-scheme">
<legend class="control-label">{{i18n "user.color_scheme"}}</legend> <legend class="control-label">{{i18n "user.color_scheme"}}</legend>
<div class="controls">
<div class="control-subgroup light-color-scheme"> <div class="control-subgroup light-color-scheme">
{{#if this.showDarkColorSchemeSelector}} {{#if this.showDarkColorSchemeSelector}}
<div class="instructions">{{i18n "user.color_schemes.regular"}}</div> <div class="instructions">{{i18n "user.color_schemes.regular"}}</div>
@ -62,12 +63,7 @@
/> />
</div> </div>
</div> </div>
<div class="instructions">
{{i18n "user.color_schemes.dark_instructions"}}
</div>
{{/if}} {{/if}}
{{#if this.previewingColorScheme}} {{#if this.previewingColorScheme}}
{{#if this.previewingColorScheme}} {{#if this.previewingColorScheme}}
<DButton <DButton
@ -77,7 +73,6 @@
@class="btn-default btn-small undo-preview" @class="btn-default btn-small undo-preview"
/> />
{{/if}} {{/if}}
<div class="controls color-scheme-checkbox"> <div class="controls color-scheme-checkbox">
<PreferenceCheckbox <PreferenceCheckbox
@labelKey="user.color_scheme_default_on_all_devices" @labelKey="user.color_scheme_default_on_all_devices"
@ -85,6 +80,12 @@
/> />
</div> </div>
{{/if}} {{/if}}
</div>
{{#if this.showDarkColorSchemeSelector}}
<div class="instructions">
{{i18n "user.color_schemes.dark_instructions"}}
</div>
{{/if}}
</fieldset> </fieldset>
{{/if}} {{/if}}

View File

@ -573,10 +573,6 @@ table {
max-width: 100%; max-width: 100%;
} }
.control-group {
@include clearfix;
}
.control-label:not(.checkbox-label) { .control-label:not(.checkbox-label) {
font-family: var(--heading-font-family); font-family: var(--heading-font-family);
font-weight: bold; font-weight: bold;

View File

@ -545,7 +545,6 @@
.instructions { .instructions {
color: var(--primary-medium); color: var(--primary-medium);
margin-bottom: 10px;
font-size: var(--font-down-1); font-size: var(--font-down-1);
line-height: var(--line-height-large); line-height: var(--line-height-large);
@ -595,8 +594,11 @@
font-size: var(--font-down-1); font-size: var(--font-down-1);
} }
.color-scheme .controls {
display: flex;
}
.control-subgroup { .control-subgroup {
float: left;
+ .controls { + .controls {
clear: both; clear: both;
padding-top: 1em; padding-top: 1em;

View File

@ -1,3 +1,9 @@
.user-ignore {
.btn-icon-text {
margin-top: 0.5em;
}
}
.ignored-list { .ignored-list {
overflow: auto; overflow: auto;
max-height: 150px; max-height: 150px;