mirror of
https://github.com/the-djmaze/snappymail.git
synced 2026-09-08 08:57:03 +03:00
Some small UI design improvements
This commit is contained in:
parent
c8678953fe
commit
202fac8295
6 changed files with 85 additions and 76 deletions
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue