mirror of
https://github.com/the-djmaze/snappymail.git
synced 2026-09-01 21:49:21 +03:00
1167 lines
No EOL
29 KiB
CSS
1167 lines
No EOL
29 KiB
CSS
/**
|
|
* Nextcloud - SnappyMail mail plugin
|
|
*
|
|
* @author Rene Hampölz (@hampoelz), SnappyMail, Nextcloud Team
|
|
*/
|
|
|
|
/*
|
|
* app layout changes, background & color
|
|
*/
|
|
|
|
:root {
|
|
--link-color: var(--color-primary-light-text);
|
|
}
|
|
|
|
#rl-app {
|
|
color: var(--color-main-text);
|
|
background-color: transparent;
|
|
font-family: var(--font-face);
|
|
font-size: var(--default-font-size);
|
|
}
|
|
|
|
#rl-app #rl-left {
|
|
background-color: var(--color-main-background-blur, var(--color-main-background));
|
|
-webkit-backdrop-filter: var(--filter-background-blur, none);
|
|
backdrop-filter: var(--filter-background-blur, none);
|
|
}
|
|
|
|
#rl-app #rl-left,
|
|
#rl-app #V-AdminPane>.b-toolbar {
|
|
width: 300px;
|
|
}
|
|
|
|
#rl-app #rl-right {
|
|
background-color: var(--color-main-background);
|
|
}
|
|
|
|
#rl-app input {
|
|
box-shadow: none;
|
|
}
|
|
|
|
#rl-app .resizer {
|
|
opacity: 1;
|
|
background-color: unset;
|
|
border-right: solid 1px var(--color-border);
|
|
}
|
|
|
|
#rl-app .messageList,
|
|
#rl-app .messageView {
|
|
margin: 0 5px;
|
|
border: none;
|
|
box-shadow: none !important;
|
|
background: var(--color-main-background);
|
|
}
|
|
|
|
#rl-app .b-folders .b-toolbar {
|
|
height: unset;
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding: 8px;
|
|
}
|
|
|
|
html.rl-left-panel-disabled #rl-app .b-folders .b-toolbar {
|
|
flex-direction: column;
|
|
}
|
|
|
|
@media screen and (min-width: 1000px) {
|
|
#rl-app .b-folders .btn.buttonContacts {
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
#rl-app #V-AdminMenu nav,
|
|
#rl-app #V-SettingsMenu nav.b-content,
|
|
.b-folders .b-content {
|
|
padding: calc(var(--default-grid-baseline) * 2);
|
|
}
|
|
|
|
#rl-app .b-folders .b-content {
|
|
top: 60px;
|
|
bottom: 162px;
|
|
}
|
|
|
|
#rl-app .b-folders .b-content.show-on-panel-disabled {
|
|
bottom: 56px;
|
|
}
|
|
|
|
/*
|
|
* icons
|
|
*/
|
|
|
|
#rl-app .iconcolor-green {
|
|
color: var(--color-success) !important;
|
|
}
|
|
|
|
#rl-app .iconcolor-red {
|
|
color: var(--color-error) !important;
|
|
}
|
|
|
|
#rl-app i.fontastic {
|
|
line-height: unset;
|
|
}
|
|
|
|
#rl-app [data-icon]::before {
|
|
vertical-align: -10%;
|
|
}
|
|
|
|
/*
|
|
* side panel
|
|
*/
|
|
|
|
#rl-app #V-AdminPane>.b-toolbar {
|
|
top: 0;
|
|
left: 0;
|
|
padding-top: calc(var(--default-grid-baseline) * 2) !important;
|
|
font-weight: bold;
|
|
}
|
|
|
|
#rl-app #V-AdminMenu nav a,
|
|
#rl-app #V-AdminPane>.b-toolbar,
|
|
#rl-app #V-SettingsMenu nav a,
|
|
#rl-app .b-folders li a.selectable {
|
|
margin: 2px;
|
|
padding: 0 2em 0 15px;
|
|
height: 38px;
|
|
line-height: 38px;
|
|
border-radius: var(--border-radius-pill);
|
|
color: unset;
|
|
border: none;
|
|
}
|
|
|
|
#rl-app #V-AdminMenu nav a,
|
|
#rl-app #V-AdminPane>.b-toolbar,
|
|
#rl-app #V-SettingsMenu nav a {
|
|
height: 44px;
|
|
min-height: 44px;
|
|
line-height: 44px;
|
|
}
|
|
|
|
#rl-app #V-AdminMenu nav a.selected,
|
|
#rl-app #V-SettingsMenu nav a.selected,
|
|
#rl-app .b-folders li a.selectable.selected {
|
|
color: unset;
|
|
background-color: var(--color-primary-light);
|
|
}
|
|
|
|
#rl-app #V-AdminMenu nav a:not(.selected):hover,
|
|
#rl-app #V-AdminMenu nav a:not(.selected):focus,
|
|
#rl-app #V-SettingsMenu nav a:not(.selected):hover,
|
|
#rl-app #V-SettingsMenu nav a:not(.selected):focus,
|
|
#rl-app .b-folders li a.selectable:not(.selected):hover,
|
|
#rl-app .b-folders li a.selectable:not(.selected):focus {
|
|
color: unset;
|
|
background-color: var(--color-background-hover);
|
|
}
|
|
|
|
#rl-app .b-folders .b-folders-system a[data-unread]::after {
|
|
display: block;
|
|
margin: 0 ;
|
|
padding: 2px 6px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
|
|
color: var(--color-primary-element);
|
|
background-color: var(--color-primary-light);
|
|
|
|
font-size: 12px;
|
|
text-shadow: none;
|
|
}
|
|
|
|
#rl-app .b-folders hr {
|
|
border-top: solid var(--color-main-text);
|
|
border-radius: var(--border-radius-pill);
|
|
opacity: .1;
|
|
}
|
|
|
|
#rl-app .b-folders input {
|
|
width: calc(100% - 10px);
|
|
margin: 5px;
|
|
opacity: .7;
|
|
}
|
|
|
|
#rl-app .b-footer.btn-toolbar.hide-mobile,
|
|
#rl-app .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-content: stretch;
|
|
justify-content: flex-start;
|
|
height: unset;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#rl-app #V-SettingsMenu .b-footer,
|
|
#rl-app .b-footer.btn-toolbar.hide-mobile,
|
|
#rl-app .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled {
|
|
margin: 0;
|
|
padding: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
#rl-app #V-SettingsMenu .b-footer,
|
|
#rl-app .b-footer.btn-toolbar .btn-group {
|
|
padding: 3px;
|
|
}
|
|
|
|
/*
|
|
* buttons
|
|
*/
|
|
|
|
#rl-app .btn {
|
|
min-height: 36px;
|
|
height: 36px;
|
|
box-sizing: border-box !important;
|
|
padding: 8px 14px;
|
|
line-height: 20px;
|
|
color: var(--color-main-text);
|
|
background-color: var(--color-background-dark);
|
|
border: 1px solid var(--color-border-dark) !important;
|
|
border-radius: var(--border-radius-pill);
|
|
font-size: var(--default-font-size);
|
|
}
|
|
|
|
#rl-app .btn.btn-thin {
|
|
padding-right: 9px;
|
|
padding-left: 9px;
|
|
}
|
|
|
|
#rl-app .btn.btn-transparent {
|
|
border: unset !important;
|
|
}
|
|
|
|
#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);
|
|
}
|
|
|
|
#rl-app .btn:not(.disabled, [disabled]):hover,
|
|
#rl-app .btn:not(.disabled, [disabled]):focus {
|
|
border-color: var(--color-primary-element) !important;
|
|
outline: none;
|
|
opacity: unset;
|
|
}
|
|
|
|
#rl-app .btn:not(.disabled, [disabled]):active {
|
|
outline: none;
|
|
opacity: unset;
|
|
background-color: var(--color-main-background);
|
|
color: var(--color-text-light);
|
|
}
|
|
|
|
#rl-app .btn, .btn.active, .btn:active, .btn.disabled, .btn[disabled] {
|
|
text-shadow: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
#rl-app .btn.buttonCompose {
|
|
font-weight: bold;
|
|
max-width: 100%;
|
|
width: 100%;
|
|
box-sizing: content-box !important;
|
|
}
|
|
|
|
#rl-app .btn.btn-success {
|
|
color: var(--color-primary-element-text);
|
|
background-color: var(--color-primary-element);
|
|
border-color: var(--color-primary-element) !important;
|
|
}
|
|
|
|
#rl-app .btn.btn-success:hover,
|
|
#rl-app .btn.btn-success:focus {
|
|
background-color: var(--color-primary-element-hover) !important;
|
|
border-color: var(--color-primary-element-hover) !important;
|
|
}
|
|
|
|
#rl-app .btn.buttonCompose:active {
|
|
color: var(--color-primary-text-dark);
|
|
}
|
|
|
|
#rl-app .btn.buttonCompose,
|
|
#rl-app .b-folders .btn.buttonContacts,
|
|
#rl-app .b-footer .btn {
|
|
box-sizing: border-box;
|
|
padding: 4px 14px;
|
|
line-height: 36px;
|
|
height: 44px;
|
|
min-width: -moz-fit-content;
|
|
min-width: -webkit-fill-available;
|
|
min-width: fit-content;
|
|
|
|
font-size: var(--default-font-size);
|
|
border-radius: var(--border-radius-pill);
|
|
}
|
|
|
|
#rl-app .b-footer .btn,
|
|
#rl-app #V-SettingsPane .btn-toolbar .btn {
|
|
background: transparent;
|
|
border: unset !important;
|
|
}
|
|
|
|
#rl-app .b-footer .btn {
|
|
background: transparent;
|
|
text-align: left;
|
|
font-size: 22px;
|
|
margin: 3px;
|
|
user-select: none;
|
|
}
|
|
|
|
#rl-app .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled .btn {
|
|
width: -webkit-fill-available;
|
|
width: -moz-available;
|
|
width: fill-available;
|
|
}
|
|
|
|
#rl-app .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled .btn.fontastic {
|
|
background-color: var(--color-main-background);
|
|
}
|
|
|
|
#rl-app .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled .btn:after {
|
|
font-family: var(--font-face);
|
|
font-size: var(--default-font-size);
|
|
position: absolute;
|
|
margin-left: 15px;
|
|
}
|
|
|
|
#rl-app .b-footer.btn-toolbar .btn-group.hide-on-panel-disabled .btn.fontastic:after {
|
|
content: 'SnappyMail-Settings';
|
|
}
|
|
|
|
#rl-app .b-footer.btn-toolbar .btn-group .btn.icon-folder-add:after {
|
|
content: 'Create new folder';
|
|
}
|
|
|
|
html.rl-left-panel-disabled #rl-app .b-footer.btn-toolbar .btn-group .btn.fontastic:after,
|
|
html.rl-left-panel-disabled #rl-app .b-footer.btn-toolbar .btn-group .btn.icon-folder-add:after {
|
|
content: '';
|
|
}
|
|
|
|
#rl-app .icon-folder-add::before,
|
|
#rl-app .icon-resize-in::before {
|
|
line-height: unset;
|
|
}
|
|
|
|
#rl-app .b-footer .btn:hover,
|
|
#rl-app .b-footer .btn.fontastic:hover,
|
|
#rl-app #V-SettingsPane .btn-toolbar .btn:hover {
|
|
background-color: var(--color-background-hover);
|
|
}
|
|
|
|
#rl-app .b-footer .btn:active,
|
|
#rl-app .b-footer .btn.fontastic:active,
|
|
#rl-app #V-SettingsPane .btn-toolbar .btn:active {
|
|
background-color: var(--color-primary-element-light);
|
|
}
|
|
|
|
#rl-app .b-footer .btn:focus,
|
|
#rl-app .b-footer .btn.fontastic:focus,
|
|
#rl-app #V-SettingsPane .btn-toolbar .btn:focus {
|
|
outline: none;
|
|
}
|
|
|
|
#rl-app #V-MailMessageList .btn-toolbar {
|
|
text-align: center;
|
|
}
|
|
|
|
#rl-app #V-MailMessageList .btn-toolbar .btn-group .btn {
|
|
border-radius: var(--border-radius-large);
|
|
margin: 0 .5px;
|
|
}
|
|
|
|
/*
|
|
* inputs
|
|
*/
|
|
|
|
#rl-app input {
|
|
padding: 0 12px;
|
|
font-size: var(--default-font-size);
|
|
color: var(--color-main-text);
|
|
background-color: unset;
|
|
height: 36px;
|
|
outline: none;
|
|
border: 2px solid var(--color-border-dark);
|
|
border-radius: var(--border-radius-large);
|
|
}
|
|
|
|
#rl-app input:hover,
|
|
#rl-app input:active,
|
|
#rl-app input:focus {
|
|
border-color: var(--color-primary-element);
|
|
}
|
|
|
|
#rl-app input[type="search"]::-webkit-search-decoration,
|
|
#rl-app input[type="search"]::-webkit-search-cancel-button,
|
|
#rl-app input[type="search"]::-webkit-search-results-button,
|
|
#rl-app input[type="search"]::-webkit-search-results-decoration {
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
#rl-app input[type=number] {
|
|
-moz-appearance: textfield;
|
|
-webkit-appearance: textfield;
|
|
appearance: textfield;
|
|
margin: 0;
|
|
}
|
|
|
|
/*
|
|
* select
|
|
*/
|
|
|
|
#rl-app .emailaddresses,
|
|
#rl-app .select, #rl-app select {
|
|
padding: 8px 12px;
|
|
font-size: var(--default-font-size);
|
|
color: var(--color-main-text);
|
|
background-color: unset;
|
|
height: 44px;
|
|
outline: none;
|
|
border: 2px solid var(--color-border-dark);
|
|
border-radius: var(--border-radius-large);
|
|
line-height: 24px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#rl-app .emailaddresses:hover,
|
|
#rl-app .emailaddresses:active,
|
|
#rl-app .emailaddresses:focus,
|
|
#rl-app .select:hover, #rl-app select:hover,
|
|
#rl-app .select:active, #rl-app select:active,
|
|
#rl-app .select:focus, #rl-app select:focus {
|
|
border-color: var(--color-primary-element);
|
|
}
|
|
|
|
select option {
|
|
background-color: var(--color-background-dark);
|
|
color: var(--color-main-text);
|
|
}
|
|
|
|
/*
|
|
* email address select
|
|
*/
|
|
|
|
#rl-app .emailaddresses {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 5px;
|
|
/* max-height: padding*2 [top & bottom] + gap*(lines + 1) + li-height*lines [= li-height + li-padding*2 + li-border*2 ] */
|
|
max-height: calc(8px*2 + 5px*3 + 26px*2);
|
|
height: auto;
|
|
width: 100%;
|
|
}
|
|
|
|
#rl-app .emailaddresses.emailaddresses-focused {
|
|
border: 2px solid var(--color-primary-element);
|
|
}
|
|
|
|
#rl-app .emailaddresses li[draggable] {
|
|
line-height: 20px;
|
|
padding: 2px 15px 2px 5px;
|
|
color: var(--color-main-text);
|
|
border: 1px solid var(--color-border-dark);
|
|
border-radius: var(--border-radius);
|
|
margin: 0;
|
|
box-shadow: none;
|
|
background-color: unset;
|
|
}
|
|
|
|
#rl-app .emailaddresses li a {
|
|
/* TODO */
|
|
}
|
|
|
|
/*
|
|
* checkboxes
|
|
*/
|
|
|
|
#rl-app .e-component.e-checkbox.material-design {
|
|
width: -moz-fit-content;
|
|
width: -webkit-fill-available;
|
|
width: fit-content;
|
|
display: flex;
|
|
position: relative;
|
|
align-items: center;
|
|
user-select: none;
|
|
height: 44px;
|
|
border-radius: 44px;
|
|
padding: 0 14px;
|
|
margin: 0 -14px;
|
|
}
|
|
|
|
#rl-app .e-component.e-checkbox.material-design:hover,
|
|
#rl-app .e-component.e-checkbox.material-design:focus-within {
|
|
background-color: var(--color-primary-light);
|
|
}
|
|
|
|
#rl-app .e-component.e-checkbox.material-design:focus {
|
|
outline: none;
|
|
}
|
|
|
|
#rl-app .e-checkbox.material-design>div {
|
|
box-sizing: border-box;
|
|
margin-right: 4px;
|
|
margin-left: -2px;
|
|
}
|
|
|
|
#rl-app .e-checkbox.material-design>div>div {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 2px solid var(--color-primary-element);
|
|
border-radius: 2px;
|
|
animation: none;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#rl-app .e-checkbox.material-design>div>div.checked {
|
|
top: 0;
|
|
left: 0;
|
|
animation: none;
|
|
--svg-checked: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='3 3 18 18'><path d='M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z'></path></svg>");
|
|
-webkit-mask-image: var(--svg-checked);
|
|
mask-image: var(--svg-checked);
|
|
background: var(--color-primary-element);
|
|
border-width: 0;
|
|
margin: 0;
|
|
transform: unset;
|
|
}
|
|
|
|
/*
|
|
* message list
|
|
*/
|
|
|
|
#rl-app .thm-message-list-top-toolbar,
|
|
#rl-app .thm-message-list-bottom-toolbar {
|
|
background: unset !important;
|
|
}
|
|
|
|
#rl-app .messageList .second-toolbar {
|
|
align-items: center;
|
|
}
|
|
|
|
#rl-app .messageList .b-footer {
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
#rl-app .messageList .second-toolbar,
|
|
#rl-app .messageList .b-footer {
|
|
border-color: var(--color-border);
|
|
}
|
|
|
|
#rl-app .messageList .inputSearch {
|
|
max-width: unset;
|
|
}
|
|
|
|
#rl-app .messageList .closeSearch {
|
|
position: absolute;
|
|
top: 2px;
|
|
right: 1px;
|
|
min-width: unset;
|
|
min-height: unset;
|
|
height: 32px;
|
|
font-size: 20px;
|
|
line-height: 30px;
|
|
}
|
|
|
|
#rl-app .messageList .checkboxCheckAll {
|
|
margin: 0 12px;
|
|
}
|
|
|
|
#rl-app .messageList .checkboxCheckAll:hover,
|
|
#rl-app .messageList .checkboxCheckAll:focus {
|
|
color: var(--color-primary-element);
|
|
}
|
|
|
|
#rl-app .messageList .checkboxCheckAll:active {
|
|
color: var(--color-primary-element-hover);
|
|
}
|
|
|
|
html:not(rl-mobile) #rl-app .hideMessageListCheckbox .checkboxCheckAll {
|
|
display: none;
|
|
}
|
|
|
|
#rl-app .messageList .btn.buttonMoreSearch {
|
|
background: unset;
|
|
border-radius: var(--border-radius-large);
|
|
margin: 0 0 0 8px;
|
|
line-height: 20px !important;
|
|
}
|
|
|
|
#rl-app .messageList .checkboxCheckAll,
|
|
#rl-app .messageList .btn.buttonMoreSearch {
|
|
font-size: var(--default-font-size);
|
|
height: 28px;
|
|
line-height: 28px;
|
|
}
|
|
|
|
#rl-app .messageList .b-content .listThreadUidDesc {
|
|
margin: 8px;
|
|
color: var(--color-main-text);
|
|
background: unset;
|
|
border: solid 1px;
|
|
border-radius: var(--border-radius-large);
|
|
border-color: var(--color-border-dark);
|
|
}
|
|
|
|
#rl-app .messageList .b-content .listThreadUidDesc:hover,
|
|
#rl-app .messageList .b-content .listThreadUidDesc:focus {
|
|
background: var(--color-background-hover);
|
|
}
|
|
|
|
#rl-app .messageList .b-content .listThreadUidDesc:active {
|
|
background-color: var(--color-primary-light);
|
|
}
|
|
|
|
#rl-app .messageList .b-content .listSearchDesc {
|
|
border-color: var(--color-border);
|
|
}
|
|
|
|
#rl-app .messageList .b-content .listDragOver {
|
|
/* ! does not work */
|
|
}
|
|
|
|
#rl-app .messageList .b-content .listError {
|
|
/* ? cant reproduce */
|
|
}
|
|
|
|
#rl-app .messageList .b-content .listDragOver,
|
|
#rl-app .messageList .b-content .listEmptyMessage,
|
|
#rl-app .messageList .b-content .listError,
|
|
#rl-app .messageList .b-content .listLoading {
|
|
color: var(--color-text-lighter);
|
|
}
|
|
|
|
#rl-app .messageListItem .checkboxMessage {
|
|
border-color: var(--color-text-lighter);
|
|
color: var(--color-text-lighter);
|
|
}
|
|
|
|
#rl-app .messageListItem .checkboxMessage:hover,
|
|
#rl-app .messageListItem .checkboxMessage:focus {
|
|
background-color: var(--color-background-darker);
|
|
}
|
|
|
|
#rl-app .messageListItem .checkboxMessage:active {
|
|
background-color: var(--color-primary-light-hover);
|
|
}
|
|
|
|
#rl-app .messageListItem .threads-len {
|
|
color: var(--color-text-light);
|
|
border-color: var(--color-text-light);
|
|
padding: 0 4px;
|
|
}
|
|
|
|
#rl-app .messageListItem .threads-len:hover,
|
|
#rl-app .messageListItem .threads-len:focus {
|
|
background-color: var(--color-background-darker);
|
|
border-color: unset;
|
|
}
|
|
|
|
#rl-app .messageListItem .threads-len:active {
|
|
background-color: var(--color-primary-light-hover);
|
|
}
|
|
|
|
#rl-app .messageListItem {
|
|
padding: 8px;
|
|
margin: 2px 0;
|
|
border-bottom: unset;
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
#rl-app .messageListItem,
|
|
#rl-app .messageListItem.focused {
|
|
background-color: var(--color-background);
|
|
border-left-color: var(--color-border);
|
|
}
|
|
|
|
#rl-app .messageListItem:hover,
|
|
#rl-app .messageListItem.focused:hover {
|
|
background-color: var(--color-background-hover);
|
|
border-left-color: var(--color-primary-light-hover);
|
|
}
|
|
|
|
#rl-app .messageListItem.selected,
|
|
#rl-app .messageListItem.selected:hover {
|
|
background-color: var(--color-primary-element-light) !important;
|
|
border-left-color: var(--color-primary-element-light-text);
|
|
}
|
|
|
|
#rl-app .messageListItem.unseen,
|
|
#rl-app .messageListItem.hasUnseenSubMessage {
|
|
background-color: unset;
|
|
border-left-color: var(--color-primary-element);
|
|
}
|
|
|
|
#rl-app .messageListItem.unseen.focused,
|
|
#rl-app .messageListItem.unseen.focused:hover,
|
|
#rl-app .messageListItem.hasUnseenSubMessage.focused,
|
|
#rl-app .messageListItem.hasUnseenSubMessage.focused:hover {
|
|
background-color: var(--color-primary-light);
|
|
border-left-color: var(--color-primary-element);
|
|
}
|
|
|
|
#rl-app .messageListItem.unseen:hover,
|
|
#rl-app .messageListItem.hasUnseenSubMessage:hover {
|
|
background-color: var(--color-background-hover);
|
|
border-left-color: var(--color-primary-element-hover);
|
|
}
|
|
|
|
#rl-app .messageListItem.hasUnseenSubMessage .threads-len {
|
|
border-color: var(--color-primary-element);
|
|
border-width: 2px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
#rl-app .messageListItem.hasUnseenSubMessage .threads-len:hover {
|
|
border-color: var(--color-primary-element-hover);
|
|
}
|
|
|
|
#rl-app .messageListItem.checked {
|
|
background-color: unset;
|
|
border-left-color: var(--color-primary-light-text);
|
|
}
|
|
|
|
#rl-app .messageListItem.checked.focused {
|
|
background-color: inherit;
|
|
border-left-color: var(--color-primary-element-light-text);
|
|
}
|
|
|
|
#rl-app .messageListItem.checked:hover,
|
|
#rl-app .messageListItem.checked.focused:hover {
|
|
background-color: var(--color-background-hover);
|
|
border-left-color: inherit;
|
|
}
|
|
|
|
/*
|
|
* message view
|
|
*/
|
|
|
|
#rl-app #V-MailMessageView {
|
|
bottom: 0;
|
|
}
|
|
|
|
html:not(.rl-mobile):not(.rl-no-preview-pane) #rl-app .messageView .top-toolbar {
|
|
/* TODO Improve mobile experience */
|
|
}
|
|
|
|
#rl-app .messageView .b-message-view-desc,
|
|
#rl-app .messageView .b-message-view-checked-helper {
|
|
color: var(--color-text-lighter);
|
|
}
|
|
|
|
#rl-app .messageView .b-message-view-desc.error {
|
|
/* ? cant reproduce */
|
|
}
|
|
|
|
#rl-app meter::-webkit-meter-bar {
|
|
background-color: var(--color-border-dark);
|
|
border-color: var(--color-border-dark);
|
|
border-width: 2px;
|
|
height: 10px;
|
|
}
|
|
|
|
#rl-app .messageView .messageItemHeader .informationShort meter::-webkit-meter-optimum-value {
|
|
background-color: var(--color-success);
|
|
border-radius: var(--border-radius-pill);
|
|
}
|
|
|
|
#rl-app .messageView .messageItemHeader .informationShort meter::-webkit-meter-suboptimum-value {
|
|
background-color: var(--color-warning);
|
|
border-radius: var(--border-radius-pill);
|
|
}
|
|
|
|
#rl-app .messageView .messageItemHeader .informationShort meter::-webkit-meter-even-less-good-value {
|
|
background-color: var(--color-error);
|
|
border-radius: var(--border-radius-pill);
|
|
}
|
|
|
|
#rl-app .messageView .messageItemHeader .hasVirus {
|
|
background: unset;
|
|
border: solid 2px var(--color-error);
|
|
border-radius: var(--border-radius);
|
|
margin: 5px;
|
|
}
|
|
|
|
#rl-app .messageView .openpgp-control.encrypted,
|
|
#rl-app .messageView .openpgp-control.signed {
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
#rl-app #V-MailMessageView .b-message-view-backdrop {
|
|
background-color: var(--color-main-background-blur);
|
|
-webkit-backdrop-filter: blur(2px);
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
|
|
#rl-app #V-MailMessageView .b-message-view-backdrop .backdrop-message {
|
|
background-color: var(--color-main-background);
|
|
border: solid 1px var(--color-primary);
|
|
border-radius: var(--border-radius-large);
|
|
text-shadow: none;
|
|
margin: 10px;
|
|
}
|
|
|
|
#rl-app .messageView .messageAssignedTags {
|
|
margin: 0 5px;
|
|
}
|
|
|
|
#rl-app .messageView .messageAssignedTags span {
|
|
border-radius: var(--border-radius-pill);
|
|
background: unset;
|
|
padding: 2px 5px;
|
|
}
|
|
|
|
#rl-app #messageItem .readReceipt,
|
|
#rl-app #messageItem .showImages {
|
|
margin: 8px;
|
|
color: var(--color-main-text);
|
|
border: solid 1px var(--color-primary-element);
|
|
background-color: var(--color-primary-light);
|
|
border-radius: var(--border-radius-large);
|
|
}
|
|
|
|
#rl-app #messageItem .readReceipt:hover,
|
|
#rl-app #messageItem .showImages:hover {
|
|
background-color: var(--color-primary-light-hover);
|
|
}
|
|
|
|
#rl-app .messageView .messageItemHeader,
|
|
#rl-app #messageItem .attachmentsPlace {
|
|
background-color: unset;
|
|
border-color: var(--color-border);
|
|
color: var(--color-main-text);
|
|
}
|
|
|
|
#rl-app #messageItem .attachmentsPlace {
|
|
border-top: 1px solid var(--color-border);
|
|
top: -1px;
|
|
}
|
|
|
|
#rl-app #messageItem .attachmentsPlace .controls-handle {
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
#rl-app #messageItem .attachmentsPlace .attachmentItem {
|
|
background-color: var(--color-background-dark);
|
|
border-radius: var(--border-radius);
|
|
box-shadow: none;
|
|
}
|
|
|
|
#rl-app #messageItem .attachmentsPlace .attachmentItem:hover,
|
|
#rl-app #messageItem .attachmentsPlace .attachmentItem:active {
|
|
background-color: var(--color-background-darker);
|
|
}
|
|
|
|
#rl-app #messageItem .attachmentsPlace .attachmentItem:focus {
|
|
outline: none;
|
|
}
|
|
|
|
#rl-app #messageItem .attachmentsPlace .attachmentItem .attachmentNameParent {
|
|
border-color: var(--color-border-dark);
|
|
}
|
|
|
|
#rl-app #messageItem .attachmentsPlace .attachmentItem .iconMain,
|
|
#rl-app #messageItem .attachmentsPlace .attachmentItem .iconPreview {
|
|
color: var(--color-text-light);
|
|
}
|
|
|
|
#rl-app #messageItem .attachmentsControls {
|
|
background-color: unset;
|
|
border-color: var(--color-border);
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
#rl-app #messageItem .attachmentsControls .icon-file-archive,
|
|
#rl-app #messageItem .attachmentsControls .fontastic {
|
|
color: var(--color-main-text);
|
|
}
|
|
|
|
/*
|
|
* message flags
|
|
*/
|
|
|
|
:root {
|
|
--msgflag-\$label1-color: #ae2c35;
|
|
--msgflag-\$label1-color-hover: #e13a45;
|
|
--msgflag-\$label2-color: #cc9827;
|
|
--msgflag-\$label2-color-hover: #ffbf31;
|
|
--msgflag-\$label3-color: #005235;
|
|
--msgflag-\$label3-color-hover: #008557;
|
|
--msgflag-\$label4-color: #005cc4;
|
|
--msgflag-\$label4-color-hover: #0074f8;
|
|
--msgflag-\$label5-color: #5631c0;
|
|
--msgflag-\$label5-color-hover: #6d3ff3;
|
|
|
|
--msgflag-\\flagged-color: #ffca32;
|
|
}
|
|
|
|
#rl-app .msgflag-\$label5:not(.focused) { border-color: var(--msgflag-\$label5-color); }
|
|
#rl-app .msgflag-\$label4:not(.focused) { border-color: var(--msgflag-\$label4-color); }
|
|
#rl-app .msgflag-\$label3:not(.focused) { border-color: var(--msgflag-\$label3-color); }
|
|
#rl-app .msgflag-\$label2:not(.focused) { border-color: var(--msgflag-\$label2-color); }
|
|
#rl-app .msgflag-\$label1:not(.focused) { border-color: var(--msgflag-\$label1-color); }
|
|
|
|
#rl-app .msgflag-\$label5.focused:not(.selected) { border-color: var(--msgflag-\$label5-color) !important; }
|
|
#rl-app .msgflag-\$label4.focused:not(.selected) { border-color: var(--msgflag-\$label4-color) !important; }
|
|
#rl-app .msgflag-\$label3.focused:not(.selected) { border-color: var(--msgflag-\$label3-color) !important; }
|
|
#rl-app .msgflag-\$label2.focused:not(.selected) { border-color: var(--msgflag-\$label2-color) !important; }
|
|
#rl-app .msgflag-\$label1.focused:not(.selected) { border-color: var(--msgflag-\$label1-color) !important; }
|
|
|
|
#rl-app .msgflag-\$label5:not(.focused):hover { border-color: var(--msgflag-\$label5-color-hover); }
|
|
#rl-app .msgflag-\$label4:not(.focused):hover { border-color: var(--msgflag-\$label4-color-hover); }
|
|
#rl-app .msgflag-\$label3:not(.focused):hover { border-color: var(--msgflag-\$label3-color-hover); }
|
|
#rl-app .msgflag-\$label2:not(.focused):hover { border-color: var(--msgflag-\$label2-color-hover); }
|
|
#rl-app .msgflag-\$label1:not(.focused):hover { border-color: var(--msgflag-\$label1-color-hover); }
|
|
|
|
#rl-app .msgflag-\$label1:not(.focused), #rl-app .msgflag-\$label1 .checkboxMessage,
|
|
#rl-app .msgflag-\$label2:not(.focused), #rl-app .msgflag-\$label2 .checkboxMessage,
|
|
#rl-app .msgflag-\$label3:not(.focused), #rl-app .msgflag-\$label3 .checkboxMessage,
|
|
#rl-app .msgflag-\$label4:not(.focused), #rl-app .msgflag-\$label4 .checkboxMessage,
|
|
#rl-app .msgflag-\$label5:not(.focused), #rl-app .msgflag-\$label5 .checkboxMessage {
|
|
background-color: unset;
|
|
color: unset;
|
|
}
|
|
|
|
#rl-app .messageListItem.msgflag-\$label1:hover,
|
|
#rl-app .messageListItem.msgflag-\$label2:hover,
|
|
#rl-app .messageListItem.msgflag-\$label3:hover,
|
|
#rl-app .messageListItem.msgflag-\$label4:hover,
|
|
#rl-app .messageListItem.msgflag-\$label5:hover {
|
|
background-color: var(--color-background-hover);
|
|
}
|
|
|
|
#rl-app a.msgflag-\$label1,
|
|
#rl-app a.msgflag-\$label2,
|
|
#rl-app a.msgflag-\$label3,
|
|
#rl-app a.msgflag-\$label4,
|
|
#rl-app a.msgflag-\$label5 {
|
|
border-left: solid 5px;
|
|
}
|
|
|
|
#rl-app .btn-group.show .dropdown-menu div li a[class^='msgflag-']:not(.msgflag-\$label1, .msgflag-\$label2, .msgflag-\$label3, .msgflag-\$label4, .msgflag-\$label5),
|
|
#rl-app .btn-group.show .dropdown-menu div li a[class*='msgflag-']:not(.msgflag-\$label1, .msgflag-\$label2, .msgflag-\$label3, .msgflag-\$label4, .msgflag-\$label5) {
|
|
border-left: solid 5px transparent;
|
|
}
|
|
|
|
#rl-app .b-folders .is-flagged .flag-icon::after,
|
|
#rl-app .messageListItem.hasFlaggedSubMessage .flagParent::after,
|
|
#rl-app .messageListItem.msgflag-\\flagged .flagParent::after {
|
|
color: var(--msgflag-\\flagged-color);
|
|
}
|
|
|
|
/*
|
|
* dropdown menus
|
|
*/
|
|
|
|
#rl-app .dropdown.show {
|
|
box-shadow: none;
|
|
}
|
|
|
|
#rl-app .dropdown-menu {
|
|
background-color: var(--color-main-background);
|
|
filter: drop-shadow(0 1px 5px var(--color-box-shadow));
|
|
border-radius: var(--border-radius-large);
|
|
color: var(--color-main-text);
|
|
padding: 4px;
|
|
}
|
|
|
|
#rl-app .dropdown-menu a {
|
|
background-color: unset;
|
|
color: unset;
|
|
height: 22px;
|
|
line-height: 22px;
|
|
border-radius: 3px;
|
|
margin: 2px;
|
|
box-sizing: content-box;
|
|
}
|
|
|
|
#rl-app .dropdown-menu li.disabled > a,
|
|
#rl-app .dropdown-menu li.disabled > a:hover,
|
|
#rl-app .dropdown-menu li.disabled > a:focus,
|
|
#rl-app .dropdown-menu li.disabled > a:active {
|
|
opacity: .5;
|
|
filter: saturate(0.7);
|
|
}
|
|
|
|
#rl-app .dropdown-menu li:not(.disabled) > a:hover,
|
|
#rl-app .dropdown-menu li:not(.disabled) > a:focus {
|
|
background-color: var(--color-background-hover);
|
|
color: unset;
|
|
opacity: unset;
|
|
}
|
|
|
|
#rl-app .dropdown-menu li:not(.disabled) > a:active {
|
|
background-color: var(--color-primary-light);
|
|
}
|
|
|
|
#rl-app .dropdown-menu *+.dividerbar {
|
|
border-color: var(--color-border);
|
|
}
|
|
|
|
#rl-app .dropdown-menu ::-webkit-scrollbar-track-piece {
|
|
background-color: inherit;
|
|
border-top-right-radius: inherit;
|
|
border-bottom-right-radius: inherit;
|
|
}
|
|
|
|
/*
|
|
* account selector
|
|
*/
|
|
|
|
#rl-app .btn-toolbar.g-ui-user-select-none {
|
|
border: solid 1px var(--color-border-dark);
|
|
border-radius: var(--border-radius-large);
|
|
height: 36px;
|
|
padding: 2px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
box-sizing: content-box;
|
|
}
|
|
|
|
#rl-app #V-SystemDropDown .accountPlace {
|
|
background: unset;
|
|
color: unset;
|
|
text-shadow: none;
|
|
}
|
|
|
|
#rl-app #V-SystemDropDown #top-system-dropdown-id {
|
|
background-color: unset;
|
|
border: unset !important;
|
|
border-radius: var(--border-radius-large) !important;
|
|
height: 20px;
|
|
}
|
|
|
|
#rl-app #V-SystemDropDown #top-system-dropdown-id:hover,
|
|
#rl-app #V-SystemDropDown #top-system-dropdown-id:focus {
|
|
background-color: var(--color-background-hover);
|
|
}
|
|
|
|
#rl-app #V-SystemDropDown #top-system-dropdown-id:active {
|
|
background-color: var(--color-background-dark);
|
|
}
|
|
|
|
/* TODO: darken mails only with NC dark theme (needs some more js) */
|
|
/*
|
|
* dark mails
|
|
*/
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
#rl-app .bodyText, .bodyText img {
|
|
filter: invert(95%) hue-rotate(180deg);
|
|
}
|
|
|
|
#rl-app .bodyText img {
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
|
|
/* TODO: Improve settings layout and theming */
|
|
/*
|
|
* settings
|
|
*/
|
|
|
|
#rl-app #rl-settings-subscreen {
|
|
background-color: unset;
|
|
box-shadow: none;
|
|
border: none;
|
|
}
|
|
|
|
#rl-app .legend {
|
|
color: unset;
|
|
border-color: var(--color-border);
|
|
}
|
|
|
|
#rl-app .form-horizontal .control-group {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
#rl-app #V-SettingsPane .btn-toolbar {
|
|
padding: 8px;
|
|
}
|
|
|
|
#rl-app #V-SettingsPane #rl-settings-subscreen {
|
|
margin: 58px 0px 8px 0px;
|
|
height: calc(100% - 58px - 8px);
|
|
}
|
|
|
|
#rl-app #V-Settings-Config th {
|
|
background-color: var(--color-background-dark);
|
|
}
|
|
|
|
#rl-app .table-bordered,
|
|
#rl-app .table td,
|
|
#rl-app .table th {
|
|
border-color: var(--color-border-dark);
|
|
}
|
|
|
|
#rl-app .table-hover tbody tr:hover td,
|
|
#rl-app .table-hover tbody tr:hover th {
|
|
background-color: var(--color-background-hover);
|
|
}
|
|
|
|
#rl-app .drag-handle {
|
|
color: var(--color-text-lighter);
|
|
}
|
|
|
|
/*
|
|
* scrollbar
|
|
*/
|
|
|
|
#rl-app ::-webkit-scrollbar {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
#rl-app ::-webkit-scrollbar-thumb {
|
|
background: var(--color-scrollbar);
|
|
border-radius: var(--border-radius-large);
|
|
border: 2px solid transparent;
|
|
background-clip: content-box;
|
|
}
|
|
|
|
#rl-app ::-webkit-scrollbar-track-piece {
|
|
background-color: transparent;
|
|
}
|
|
|
|
#rl-app ::selection {
|
|
background-color: var(--color-primary-element);
|
|
color: var(--color-primary-text);
|
|
}
|
|
|
|
/* TODO: Improve popup layout and theming */
|
|
/*
|
|
* Popups
|
|
*/
|
|
|
|
#rl-app dialog {
|
|
background: var(--color-main-background);
|
|
color: var(--color-main-text);
|
|
border-radius: var(--border-radius-large);
|
|
filter: drop-shadow(0 1px 5px var(--color-box-shadow));
|
|
box-shadow: none;
|
|
border-color: var(--color-border);
|
|
}
|
|
|
|
#rl-app #V-PopupsCompose .b-header {
|
|
background: unset;
|
|
}
|
|
|
|
#rl-app .squire-toolbar {
|
|
height: 50px;
|
|
box-sizing: content-box;
|
|
}
|
|
|
|
#rl-app dialog > header,
|
|
#rl-app dialog > footer,
|
|
#rl-app .squire-toolbar {
|
|
border-color: var(--color-border);
|
|
}
|
|
|
|
#rl-app #V-PopupsCompose header .close,
|
|
#rl-app #V-PopupsCompose header .minimize-custom {
|
|
box-sizing: content-box;
|
|
} |