Some small UI design improvements

This commit is contained in:
djmaze 2021-08-27 09:59:13 +02:00
parent c8678953fe
commit 202fac8295
6 changed files with 85 additions and 76 deletions

View file

@ -91,21 +91,24 @@ textarea + .settings-save-trigger {
// Actual tabs // Actual tabs
.tabs label { .tabs label {
grid-row-start: 1;
color: #555;
margin: 0 2px -1px 0;
line-height: @baseLineHeight;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
cursor: pointer;
grid-row-start: 1;
line-height: @baseLineHeight;
opacity: 0.6;
margin: 0 2px -1px 0;
padding: 5px; padding: 5px;
text-align: center;
&:hover { &:hover {
border-color: @grayLighter @grayLighter #ddd; border-color: @grayLighter;
opacity: 0.8;
} }
} }
.tabs [id^="tab"]:checked + label { .tabs [id^="tab"]:checked + label {
color: @gray;
background-color: @white; background-color: @white;
border-color: #ddd #ddd transparent #ddd; border-color: #ddd #ddd transparent #ddd;
opacity: 1;
z-index: 1; z-index: 1;
} }

View file

@ -194,11 +194,13 @@
<i class="fontastic"></i> <i class="fontastic"></i>
<span data-i18n="POPUPS_DOMAIN/BUTTON_CLOSE"></span> <span data-i18n="POPUPS_DOMAIN/BUTTON_CLOSE"></span>
</a> </a>
<a class="btn buttonClear" data-bind="command: createOrAddCommand"> <a class="btn" data-bind="command: createOrAddCommand, visible: edit()">
<i class="fontastic" data-bind="text: edit() ? '✔' : '✚', visible: !saving()"></i> <i class="fontastic" data-bind="css: {'icon-spinner': saving()}"></i>
<i class="icon-spinner" data-bind="visible: saving"></i> <span data-i18n="POPUPS_DOMAIN/BUTTON_UPDATE"></span>
<span data-bind="visible: !edit()" data-i18n="POPUPS_DOMAIN/BUTTON_ADD"></span> </a>
<span data-bind="visible: edit()" data-i18n="POPUPS_DOMAIN/BUTTON_UPDATE"></span> <a class="btn" data-bind="command: createOrAddCommand, visible: !edit()">
<i class="fontastic" data-bind="css: {'icon-spinner': saving()}"></i>
<span data-i18n="POPUPS_DOMAIN/BUTTON_ADD"></span>
</a> </a>
</div> </div>
</div> </div>

View file

@ -40,7 +40,7 @@
<i class="fontastic"></i> <i class="fontastic"></i>
<span data-i18n="POPUPS_DOMAIN_ALIAS/BUTTON_CLOSE"></span> <span data-i18n="POPUPS_DOMAIN_ALIAS/BUTTON_CLOSE"></span>
</a> </a>
<a class="btn buttonClear" data-bind="command: createCommand"> <a class="btn" data-bind="command: createCommand">
<i class="fontastic" data-bind="visible: !saving()"></i> <i class="fontastic" data-bind="visible: !saving()"></i>
<i class="icon-spinner" data-bind="visible: saving"></i> <i class="icon-spinner" data-bind="visible: saving"></i>
<span data-i18n="POPUPS_DOMAIN_ALIAS/BUTTON_ADD"></span> <span data-i18n="POPUPS_DOMAIN_ALIAS/BUTTON_ADD"></span>

View file

@ -25,7 +25,7 @@
<i class="fontastic"></i> <i class="fontastic"></i>
<span data-i18n="POPUPS_PLUGIN/BUTTON_CLOSE"></span> <span data-i18n="POPUPS_PLUGIN/BUTTON_CLOSE"></span>
</a> </a>
<a class="btn buttonClear" data-bind="command: saveCommand, visible: hasConfiguration"> <a class="btn" data-bind="command: saveCommand, visible: hasConfiguration">
<i class="fontastic"></i> <i class="fontastic"></i>
<span data-i18n="POPUPS_PLUGIN/BUTTON_SAVE"></span> <span data-i18n="POPUPS_PLUGIN/BUTTON_SAVE"></span>
</a> </a>

View file

@ -19,7 +19,7 @@
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<a class="btn btn-danger buttonClear" data-bind="command: clearCommand"> <a class="btn btn-danger" data-bind="command: clearCommand">
<i class="fontastic" data-bind="css: {'icon-spinner white': clearingProcess()}">🔥</i> <i class="fontastic" data-bind="css: {'icon-spinner white': clearingProcess()}">🔥</i>
<span data-i18n="GLOBAL/CLEAR"></span> <span data-i18n="GLOBAL/CLEAR"></span>
</a> </a>

View file

@ -143,3 +143,7 @@
.b-folders li a.focused { .b-folders li a.focused {
background-color: #111; background-color: #111;
} }
.tabs [id^="tab"]:checked + label {
color: #000;
}