mirror of
https://github.com/the-djmaze/snappymail.git
synced 2025-02-23 22:36:01 +08:00
chore: Improve buttons
This commit is contained in:
Rene Hampölz
parent
3713d0f054
commit
4fe9cc5523
1 changed files with 93 additions and 39 deletions
|
|
@ -362,7 +362,7 @@ html.rl-left-panel-disabled #rl-app #rl-left {
|
|||
#rl-app button.btn:not(.button-vue) {
|
||||
min-height: 36px;
|
||||
height: 36px;
|
||||
box-sizing: border-box !important;
|
||||
box-sizing: border-box;
|
||||
padding: 8px 14px;
|
||||
line-height: 20px;
|
||||
color: var(--color-main-text);
|
||||
|
|
@ -372,6 +372,10 @@ html.rl-left-panel-disabled #rl-app #rl-left {
|
|||
font-size: var(--default-font-size);
|
||||
}
|
||||
|
||||
#rl-app .btn.fontastic {
|
||||
border-radius: var(--border-radius-large);
|
||||
}
|
||||
|
||||
#rl-app .btn.btn-thin {
|
||||
padding-right: 9px;
|
||||
padding-left: 9px;
|
||||
|
|
@ -381,11 +385,19 @@ html.rl-left-panel-disabled #rl-app #rl-left {
|
|||
border: unset !important;
|
||||
}
|
||||
|
||||
#rl-app .btn:hover,
|
||||
#rl-app .btn:focus,
|
||||
#rl-app .btn:active,
|
||||
#rl-app .btn.active {
|
||||
outline: none;
|
||||
opacity: unset;
|
||||
}
|
||||
|
||||
|
||||
#rl-app .btn.disabled, .btn[disabled],
|
||||
#rl-app .btn.disabled:hover, .btn[disabled]:hover,
|
||||
#rl-app .btn.disabled:focus, .btn[disabled]:focus,
|
||||
#rl-app .btn.disabled:active, .btn[disabled]:active {
|
||||
outline: none;
|
||||
opacity: .5;
|
||||
filter: saturate(0.7);
|
||||
}
|
||||
|
|
@ -395,19 +407,26 @@ html.rl-left-panel-disabled #rl-app #rl-left {
|
|||
#rl-app .btn:not(.disabled, [disabled]):focus,
|
||||
#rl-app button:not(.disabled, [disabled]):focus {
|
||||
border-color: var(--color-primary-element) !important;
|
||||
outline: none;
|
||||
opacity: unset;
|
||||
}
|
||||
|
||||
#rl-app .btn:not(.disabled, [disabled]):active,
|
||||
#rl-app button:not(.disabled, [disabled]):active {
|
||||
outline: none;
|
||||
opacity: unset;
|
||||
#rl-app button:not(.disabled, [disabled]):active,
|
||||
#rl-app .btn:not(.disabled, [disabled]).active,
|
||||
#rl-app button:not(.disabled, [disabled]).active {
|
||||
background-color: var(--color-main-background);
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
|
||||
#rl-app .btn, .btn.active, .btn:active, .btn.disabled, .btn[disabled], #rl-app button {
|
||||
#rl-app .btn,
|
||||
#rl-app button,
|
||||
#rl-app .btn.active,
|
||||
#rl-app button.active,
|
||||
#rl-app .btn:active,
|
||||
#rl-app button:active,
|
||||
#rl-app .btn.disabled,
|
||||
#rl-app button.disabled,
|
||||
#rl-app .btn[disabled],
|
||||
#rl-app button[disabled] {
|
||||
text-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
|
@ -418,6 +437,10 @@ html.rl-left-panel-disabled #rl-app #rl-left {
|
|||
box-sizing: content-box !important;
|
||||
}
|
||||
|
||||
#rl-app .btn.buttonCompose:active {
|
||||
color: var(--color-primary-text-dark);
|
||||
}
|
||||
|
||||
#rl-app button.btn.buttonLogin,
|
||||
#rl-app .btn.btn-success {
|
||||
color: var(--color-primary-element-text);
|
||||
|
|
@ -429,17 +452,66 @@ html.rl-left-panel-disabled #rl-app #rl-left {
|
|||
#rl-app .btn.btn-success:hover,
|
||||
#rl-app button.btn.buttonLogin:focus,
|
||||
#rl-app .btn.btn-success:focus {
|
||||
background-color: var(--color-primary-element-hover) !important;
|
||||
background-color: var(--color-primary-element-hover);
|
||||
border-color: var(--color-primary-element-hover) !important;
|
||||
}
|
||||
|
||||
#rl-app .btn.buttonCompose:active {
|
||||
color: var(--color-primary-text-dark);
|
||||
#rl-app .btn.btn-warning {
|
||||
background-color: var(--color-warning);
|
||||
border-color: var(--color-warning) !important;
|
||||
}
|
||||
|
||||
#rl-app .btn.btn-warning:hover,
|
||||
#rl-app .btn.btn-warning:focus {
|
||||
background-color: var(--color-warning-hover);
|
||||
border-color: var(--color-warning-hover) !important;
|
||||
}
|
||||
|
||||
#rl-app .btn.btn-error {
|
||||
background-color: var(--color-error);
|
||||
border-color: var(--color-error) !important;
|
||||
}
|
||||
|
||||
#rl-app .btn.btn-error:hover,
|
||||
#rl-app .btn.btn-error:focus {
|
||||
background-color: var(--color-warning-error);
|
||||
border-color: var(--color-warning-error) !important;
|
||||
}
|
||||
|
||||
#rl-app .btn-group .btn,
|
||||
#rl-app .btn-group button,
|
||||
#rl-app .btn-group button.btn {
|
||||
border-radius: 0;
|
||||
margin: 0 0.5px;
|
||||
}
|
||||
|
||||
#rl-app .btn-group .btn:first-of-type,
|
||||
#rl-app .btn-group .btn:nth-child(1 of :not([style*="display: none;"])) {
|
||||
border-top-left-radius: var(--border-radius-pill);
|
||||
border-bottom-left-radius: var(--border-radius-pill);
|
||||
}
|
||||
|
||||
#rl-app .btn-group .btn:last-of-type,
|
||||
#rl-app .btn-group .btn:nth-last-child(1 of :not([style*="display: none;"])) {
|
||||
border-top-right-radius: var(--border-radius-pill);
|
||||
border-bottom-right-radius: var(--border-radius-pill);
|
||||
}
|
||||
|
||||
#rl-app .btn-group .btn.fontastic:first-of-type,
|
||||
#rl-app .btn-group .btn.fontastic:nth-child(1 of :not([style*="display: none;"])) {
|
||||
border-top-left-radius: var(--border-radius-large);
|
||||
border-bottom-left-radius: var(--border-radius-large);
|
||||
}
|
||||
|
||||
#rl-app .btn-group .btn.fontastic:last-of-type,
|
||||
#rl-app .btn-group .btn.fontastic:nth-last-child(1 of :not([style*="display: none;"])) {
|
||||
border-top-right-radius: var(--border-radius-large);
|
||||
border-bottom-right-radius: var(--border-radius-large) ;
|
||||
}
|
||||
|
||||
#rl-app .btn.buttonCompose,
|
||||
#rl-app .b-folders .btn.buttonContacts,
|
||||
#rl-app .b-footer .btn {
|
||||
#rl-app .b-footer.btn-toolbar .btn {
|
||||
box-sizing: border-box;
|
||||
padding: 4px 14px;
|
||||
line-height: 36px;
|
||||
|
|
@ -453,14 +525,13 @@ html.rl-left-panel-disabled #rl-app #rl-left {
|
|||
border-radius: var(--border-radius-pill) !important;
|
||||
}
|
||||
|
||||
#rl-app .b-footer .btn,
|
||||
#rl-app .b-footer.btn-toolbar .btn,
|
||||
#rl-app #V-SettingsPane .btn-toolbar .btn {
|
||||
background: transparent;
|
||||
border: unset !important;
|
||||
}
|
||||
|
||||
#rl-app .b-footer .btn {
|
||||
background: transparent;
|
||||
#rl-app .b-footer.btn-toolbar .btn {
|
||||
text-align: left;
|
||||
font-size: 22px;
|
||||
user-select: none;
|
||||
|
|
@ -508,22 +579,22 @@ html.rl-left-panel-disabled #rl-app .b-footer.btn-toolbar .btn-group .btn.icon-f
|
|||
}
|
||||
|
||||
#rl-app span.fontastic:hover,
|
||||
#rl-app .b-footer .btn:hover,
|
||||
#rl-app .b-footer .btn.fontastic:hover,
|
||||
#rl-app .b-footer.btn-toolbar .btn:hover,
|
||||
#rl-app .b-footer.btn-toolbar .btn.fontastic:hover,
|
||||
#rl-app #V-SettingsPane .btn-toolbar .btn:hover {
|
||||
background-color: var(--color-background-hover);
|
||||
}
|
||||
|
||||
#rl-app span.fontastic:active,
|
||||
#rl-app .b-footer .btn:active,
|
||||
#rl-app .b-footer .btn.fontastic:active,
|
||||
#rl-app .b-footer.btn-toolbar .btn:active,
|
||||
#rl-app .b-footer.btn-toolbar .btn.fontastic:active,
|
||||
#rl-app #V-SettingsPane .btn-toolbar .btn:active {
|
||||
background-color: var(--color-primary-element-light);
|
||||
}
|
||||
|
||||
#rl-app span.fontastic:focus,
|
||||
#rl-app .b-footer .btn:focus,
|
||||
#rl-app .b-footer .btn.fontastic:focus,
|
||||
#rl-app .b-footer.btn-toolbar .btn:focus,
|
||||
#rl-app .b-footer.btn-toolbar .btn.fontastic:focus,
|
||||
#rl-app #V-SettingsPane .btn-toolbar .btn:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
|
@ -532,23 +603,6 @@ html.rl-left-panel-disabled #rl-app .b-footer.btn-toolbar .btn-group .btn.icon-f
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
#rl-app .btn-toolbar .btn-group .btn {
|
||||
border-radius: 0;
|
||||
margin: 0 .5px;
|
||||
}
|
||||
|
||||
#rl-app .btn-toolbar .btn-group .btn:first-of-type,
|
||||
#rl-app .btn-toolbar .btn-group .btn:nth-child(1 of :not([style*="display: none;"])) {
|
||||
border-top-left-radius: var(--border-radius-large);
|
||||
border-bottom-left-radius: var(--border-radius-large);
|
||||
}
|
||||
|
||||
#rl-app .btn-toolbar .btn-group .btn:last-of-type,
|
||||
#rl-app .btn-toolbar .btn-group .btn:nth-last-child(1 of :not([style*="display: none;"])) {
|
||||
border-top-right-radius: var(--border-radius-large);
|
||||
border-bottom-right-radius: var(--border-radius-large);
|
||||
}
|
||||
|
||||
/*
|
||||
* inputs
|
||||
*/
|
||||
|
|
@ -1543,7 +1597,7 @@ html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar
|
|||
|
||||
#rl-app #V-PopupsLanguages label.user {
|
||||
background-color: var(--color-main-background) !important;
|
||||
border-color: var(--color-primary-element);
|
||||
color: var(--color-text-light);
|
||||
}
|
||||
|
||||
#rl-app #V-PopupsLanguages label.selected {
|
||||
|
|
|
|||
Loading…
Reference in a new issue