/**
* Roundcube Webmail styles for the Elastic skin
*
* Copyright (c) The Roundcube Dev Team
*
* The contents are subject to the Creative Commons Attribution-ShareAlike
* License. It is allowed to copy, distribute, transmit and to adapt the work
* by keeping credits to the original authors in the README.md file.
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
*/
/**
* Roundcube Webmail styles for the Elastic skin
*
* Copyright (c) The Roundcube Dev Team
*
* The contents are subject to the Creative Commons Attribution-ShareAlike
* License. It is allowed to copy, distribute, transmit and to adapt the work
* by keeping credits to the original authors in the README.md file.
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
*/
p.image-attachment .attachment-links a:before,
.quota-widget:before,
.table-widget table.options-table td:not(:first-child) span:before,
table.table th.checkbox-cell:before,
a.button.icon:before,
button.btn:before,
.floating-action-buttons a.button:before,
.ui-dialog .ui-dialog-titlebar-close:before,
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset a.btn-link.options:before,
.ui-datepicker .ui-datepicker-prev:before,
.ui-datepicker .ui-datepicker-next:before,
.pgpkeyimport div.key label.keyid + a:before,
.pgpkeyimport li.uid:before,
.menu a:before,
.popover .menu li a[aria-haspopup]:after,
.searchbar form:before,
.searchbar a:before,
.ui.alert > i.icon:before,
.listing td.action a:before,
.listing.iconized li a:before,
.listing.iconized li > i:before,
.listing.iconized tr td:before,
.listing.iconized.selectable li a:before,
ul.treelist li div.treetoggle:before,
.folderlist .header .header-title.username:before,
.messagelist tr.thread td.threads div:before,
.messagelist td.subject span.msgicon.status:before,
.messagelist td.subject span.msgicon.status.replied.forwarded:after,
.messagelist span.attachment span,
.messagelist span.flagged:before,
.messagelist tr.flaggedroot:not(:hover) span.unflagged:before,
.contactlist td.contact:before,
.contactlist td.contactgroup:before,
.contactlist li a:before,
.attachmentslist li:before,
.attachmentslist li a.cancelupload:before,
.attachmentslist li a.delete:before,
.keylist li:before,
#identities-table td.mail:before,
#responses-table td.name:before,
#filterslist td.name:before,
#filtersetslist td.name:before,
.propform td.rowbuttons a:before,
fieldset.advanced > legend:after,
.input-group .icon:before,
.multi-input a.icon.reset:before,
.tagedit-list li.tagedit-listelement-old a:before,
div.tox .tox-dialog__header .tox-button:before,
div.tox .tox-dialog__footer .tox-button:before,
.html-editor .editor-toolbar .mce-i-html:before,
.googie_list li .googie_list_revert:before,
.googie_list li .googie_add_to_dict:before,
body.status-flagged #message-header > .subject:before,
#message-header > .subject a.extwin:before,
#message-header .header-links a:before,
.message-part blockquote span.blockquote-link:after,
.message-htmlpart blockquote span.blockquote-link:after {
font-size: 1.25em;
display: block;
float: left;
margin: 0 0.25rem 0 0;
width: 1.18em;
height: 1em;
font-family: "Icons";
font-style: normal;
font-weight: 900;
text-decoration: inherit;
text-align: center;
speak: none;
font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
/*** Fonts ***/
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: local("Inter"), local("Inter-Regular");
}
@font-face {
font-family: "Icons";
font-style: normal;
font-weight: 900;
src:
url("../fonts/fa-solid-900.woff2") format("woff2"),
url("../fonts/fa-solid-900.woff") format("woff");
}
@font-face {
font-family: "Icons";
font-style: normal;
font-weight: 400;
src:
url("../fonts/fa-regular-400.woff2") format("woff2"),
url("../fonts/fa-regular-400.woff") format("woff");
}
@font-face {
font-family: "Roboto";
font-style: normal;
font-weight: 400;
src:
local("Roboto"),
local("Roboto-Regular"),
url("../fonts/roboto-v29-regular.woff2") format("woff2"),
url("../fonts/roboto-v29-regular.woff") format("woff");
}
@font-face {
font-family: "Roboto";
font-style: italic;
font-weight: 400;
src:
local("Roboto Italic"),
local("Roboto-Italic"),
url("../fonts/roboto-v29-italic.woff2") format("woff2"),
url("../fonts/roboto-v29-italic.woff") format("woff");
}
@font-face {
font-family: "Roboto";
font-style: normal;
font-weight: 700;
src:
local("Roboto Bold"),
local("Roboto-Bold"),
url("../fonts/roboto-v29-regular-700.woff2") format("woff2"),
url("../fonts/roboto-v29-regular-700.woff") format("woff");
}
@font-face {
font-family: "Roboto";
font-style: italic;
font-weight: 700;
src:
local("Roboto Bold Italic"),
local("Roboto-BoldItalic"),
url("../fonts/roboto-v29-italic-700.woff2") format("woff2"),
url("../fonts/roboto-v29-italic-700.woff") format("woff");
}
/*** Material Symbols ***/
.material-symbols-outlined {
font-family: "Material Symbols Outlined";
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: "liga";
-webkit-font-smoothing: antialiased;
font-variation-settings:
"FILL" 0,
"wght" 400,
"GRAD" 0,
"opsz" 24;
}
/*** Tooltips (modern, unified) ***
*
* Roundcube historically relied on the browser's native `title=` tooltip,
* which the OS renders with a small, dated look. Bootstrap's tooltip
* plugin is bundled in deps/bootstrap.bundle.min.js, so we hijack every
* element that has a `title` attribute and route it through Bootstrap
* with a single, modern dark-pill design.
*
* The CSS works in tandem with the auto-init that lives in ui.js
* (init_tooltips() called from bootstrap_style / init).
*
* Two themes:
* - Light: light surface, dark text, subtle border + shadow
* - Dark: near-black pill, light text, accent ring
*
* Both themes add a tiny caret that points at the trigger.
*/
/* Container: floating popper */
.tooltip {
position: absolute;
z-index: 1080;
display: block;
margin: 0;
font-family:
"Inter",
system-ui,
-apple-system,
"Segoe UI",
sans-serif;
font-style: normal;
font-weight: 500;
font-size: 0.75rem;
line-height: 1.25;
text-align: center;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-break: normal;
word-spacing: normal;
white-space: normal;
word-wrap: break-word;
opacity: 0;
pointer-events: none;
transition: opacity 0.12s ease-in-out;
}
/* Shown state */
.tooltip.show {
opacity: 1;
}
/* Inner content bubble */
.tooltip .tooltip-inner {
max-width: 240px;
padding: 0.4375rem 0.75rem;
color: hsl(0 0% 98%);
background-color: hsl(240 10% 3.9%);
border-radius: 0.5rem;
letter-spacing: 0.01em;
}
/* Light-theme variant (for light-mode pages).
* Triggered by adding `tooltip-light` class on the .tooltip popper, which
* the JS adds when document.documentElement does NOT have .dark-mode. */
.tooltip.tooltip-light .tooltip-inner {
color: hsl(240 10% 3.9%);
background-color: hsl(0 0% 100%);
border: 1px solid hsl(240 5% 94%);
}
/* Auto-theme: when no explicit `tooltip-light` class is set, the tooltip
* is rendered near the top of — but the page theme lives on
* . Use a descendant selector on the html element so light-mode
* pages get a light pill by default. */
html:not(.dark-mode) .tooltip:not(.tooltip-light) .tooltip-inner {
color: hsl(240 10% 3.9%);
background-color: hsl(0 0% 100%);
border: 1px solid hsl(240 5% 94%);
}
/* Caret / arrow. Bootstrap 4's template emits ``
* but Popper 1.x sometimes fails to attach positioning to it; we hide the
* stale arrow and draw our own with a CSS pseudo-element on the bubble.
* Modern design choice: a small, low-profile notch that points at the
* trigger without competing with the pill's typography. */
.tooltip .arrow,
.tooltip .tooltip-arrow {
display: none !important;
}
.tooltip[x-placement^="top"] .tooltip-inner::before,
.tooltip.tooltip-light[x-placement^="top"] .tooltip-inner::before {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 0.5rem;
height: 0.5rem;
background-color: inherit;
margin-top: -0.25rem;
z-index: -1;
}
.tooltip[x-placement^="bottom"] .tooltip-inner::before,
.tooltip.tooltip-light[x-placement^="bottom"] .tooltip-inner::before {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 0.5rem;
height: 0.5rem;
background-color: inherit;
margin-bottom: -0.25rem;
z-index: -1;
}
/* Hide the Bootstrap-generated `` caret.
* Popper 1.x sometimes fails to position it correctly in this skin, so
* we deliberately omit the caret and rely on the bubble's box-shadow
* for depth. Modern design choice: a clean, soft pill (Linear / Apple
* Mail style) — no caret. */
.tooltip .arrow,
.tooltip .tooltip-arrow {
display: none !important;
}
/* Theme-toggle handling: JS dispatches a synthetic `mouseleave` on
* every visible tooltip instance so Bootstrap's `_leave` runs, which
* hides the popper cleanly. No CSS class hack needed — just rely on
* the normal `.show` fade-out transition. */
/*** Theme tokens (Tailwind-style border-border/40) ***/
:root {
--border: 0.922 0 0;
--foreground: 240 10% 3.9%;
--muted-foreground: 240 3.8% 46.1%;
--accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%;
--background: 0 0% 100%;
--popover: 0 0% 100%;
--popover-foreground: 240 10% 3.9%;
--ring: 240 5% 64.9%;
--default-transition-duration: 150ms;
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
--pixie-panel-light: #fff;
--pixie-bg-light: #fff;
--pixie-text-light: #2c363a;
--pixie-muted-light: #737677;
--pixie-border-light: #f1f3f4;
--pixie-ui-accent: #056dff;
--pixie-ui-accent-soft: rgba(5, 109, 255, 0.1);
--pixie-menu-surface: #ffffff;
--pixie-menu-foreground: #18181b;
--pixie-menu-border: #e4e4e7;
/* Folder rows keep their neutral hover/selected treatment in BOTH
* themes. These are NOT accent colors — selected/hovered folders use
* a calm pill that matches the rest of the sidebar's hover pattern.
*
* Light mode: soft black-tinted gray pill + dark text (matches every
* other list-row hover in the skin — see recipient dialog, file
* upload cancel, contact picker, etc.).
* Dark mode: dark gray pill + light text (Spam-row pattern). */
--pixie-folder-row-bg: transparent;
--pixie-folder-row-fg: #737677;
--pixie-folder-row-active-bg: rgba(0, 0, 0, 0.06);
--pixie-folder-row-active-fg: #090A0B;
--pixie-folder-row-active-border: transparent;
}
/*** Transition utilities (Tailwind v4 compatible) ***
These mirror Tailwind's `transition-colors` and `transition` utility
classes so any custom CSS or future Tailwind-compiled output can drop
straight into the existing component styles. Per-instance overrides
work the same way: set `--tw-duration` or `--tw-ease` on the element
and they'll take precedence over the `:root` defaults. ***/
.transition-colors {
transition-property:
color, background-color, border-color, outline-color, text-decoration-color,
fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
transition-timing-function: var(
--tw-ease,
var(--default-transition-timing-function)
);
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-default {
transition-property:
color, background-color, border-color, outline-color, text-decoration-color,
fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: var(
--tw-ease,
var(--default-transition-timing-function)
);
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
html.dark-mode {
--border: 0.27 0 0;
--foreground: 206 6% 88%;
--muted-foreground: 240 5% 64.9%;
--accent: 240 3.7% 15.9%;
--accent-foreground: 0 0% 98%;
--background: 240 10% 3.9%;
--popover: 240 10% 3.9%;
--popover-foreground: 206 6% 88%;
--ring: 240 4.9% 83.9%;
--pixie-ui-accent: #ff5722;
--pixie-ui-accent-soft: rgba(255, 87, 34, 0.14);
--pixie-menu-surface: #090A0B;
--pixie-menu-foreground: #f4f4f5;
--pixie-menu-border: #2c373a;
/* Folder rows keep the same neutral dark-grey treatment in dark mode
* (Spam-row pattern). They must never inherit the orange accent. */
--pixie-folder-row-bg: transparent;
--pixie-folder-row-fg: #a1a1aa;
--pixie-folder-row-active-bg: #36393d;
--pixie-folder-row-active-fg: #f4f4f5;
--pixie-folder-row-active-border: #36393d;
}
.border-border-40 {
border-color: oklch(var(--border) / 0.4);
}
.text-foreground {
color: hsl(var(--foreground));
}
.text-muted-foreground {
color: hsl(var(--muted-foreground));
}
.bg-accent {
background-color: hsl(var(--accent));
}
.hover-bg-accent-50:hover {
background-color: hsl(var(--accent));
}
@supports (color: color-mix(in lab, red, red)) {
.hover-bg-accent-50:hover {
background-color: color-mix(in oklab, hsl(var(--accent)) 50%, transparent);
}
}
/* Reset some Bootstrap style */
html,
body,
button,
input,
optgroup,
select,
textarea,
.popover {
font-family: "Inter", Roboto, sans-serif;
font-weight: 500;
font-synthesis: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
button,
input,
select,
textarea {
line-height: initial;
}
input {
vertical-align: middle;
}
a {
color: #00acff;
}
a:hover {
color: #008acc;
}
a.disabled {
pointer-events: none;
}
a.disabled:not(.btn) {
opacity: 0.5;
}
/* Scrollbar styles */
html:not(.touch) ::-webkit-scrollbar {
width: 6px;
}
html {
scrollbar-color: #c1c1c1 #f1f1f1;
}
html:not(.touch) ::-webkit-scrollbar-track {
background-color: #f1f1f1;
}
html:not(.touch) ::-webkit-scrollbar-thumb {
background-color: #c1c1c1;
}
/**
* Roundcube Webmail styles for the Elastic skin
*
* Copyright (c) The Roundcube Dev Team
*
* The contents are subject to the Creative Commons Attribution-ShareAlike
* License. It is allowed to copy, distribute, transmit and to adapt the work
* by keeping credits to the original authors in the README.md file.
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
*/
/*** Responsive design - Layout ***/
/*
- Large screen (width > 1200px)
-----------------------------------------------------------------------------------------------------
| menu | sidebar | list | content |
-----------------------------------------------------------------------------------------------------
- Normal screen (1200px => width => 768px) - typical: 768x1024 (iPad Mini/Air)
-------------------------------------------------------------------
|menu| sidebar/list | content |
-------------------------------------------------------------------
- Small (480px < width < 768px)
------------------------------------------
|menu| sidebar/list/content |
------------------------------------------
- Phone (width <= 480px) - typical: 320x480 (iPhone 5), 375x667 (iPhone 6-7), 360x564 (Galaxy S6)
------------------------
| sidebar/list/content |
------------------------
*/
html {
height: 100%;
font-size: 14px;
}
body {
min-width: 240px;
height: 100%;
color: #2c363a;
overflow: hidden;
}
html.iframe body {
overflow: auto;
}
#layout {
overflow: hidden;
display: flex;
height: 100%;
width: 100%;
}
#layout > div > .scroller {
flex: 1;
position: relative;
}
#layout > div > .header,
#layout > div > .footer {
font-size: 1rem;
font-weight: bold;
line-height: 58px;
height: 58px;
min-height: 58px;
padding: 0 0.25em;
margin: 0;
position: relative;
overflow: hidden;
white-space: nowrap;
display: flex;
justify-content: space-between;
}
#layout > div > .header {
border-bottom: 0;
color: #2c363a;
background-color: #fdfdfd;
}
#layout > div > .header .header-title {
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
text-align: center;
margin: 0 -20rem;
}
#layout > div > .header a.button {
color: #2c363a;
}
#layout > div > .header a.toolbar-list-button,
#layout > div > .header a.toolbar-menu-button {
order: 99;
}
#layout > div > .footer {
border-top: 0;
background-color: #fdfdfd;
}
#layout > div > .footer.small {
height: 35px;
min-height: 35px;
line-height: 35px;
}
#layout > div > .footer:empty {
display: none;
}
#layout-sidebar {
position: relative;
display: flex;
flex-direction: column;
flex: 2;
max-width: 30%;
min-width: 220px;
border-right: 1px solid #f7f7f7;
background-color: #fdfdfd;
}
#layout-sidebar > .header {
background-color: #fdfdfd;
}
#layout-sidebar .sidebar-compose-btn {
display: flex !important;
align-items: center;
justify-content: center;
gap: 0.5rem;
height: 2.5rem;
padding: 0.5rem 1rem;
margin: 0.75rem;
border-radius: 0.375rem;
background: #056dff;
color: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
font-size: 0.875rem;
font-weight: 500;
line-height: 1.25rem;
text-decoration: none;
white-space: nowrap;
transition:
background-color 120ms ease,
box-shadow 120ms ease;
cursor: pointer;
}
#layout-sidebar .sidebar-compose-btn .material-symbols-outlined {
font-size: 1.125rem;
color: inherit;
}
#layout-sidebar .sidebar-compose-btn:hover,
#layout-sidebar .sidebar-compose-btn:focus-visible {
background: rgba(5, 109, 255, 0.9);
outline: none;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
}
#layout-sidebar .sidebar-compose-btn:active {
background: #005fe5;
}
#layout-sidebar .sidebar-compose-btn:disabled,
#layout-sidebar .sidebar-compose-btn.disabled {
opacity: 0.5;
pointer-events: none;
}
#layout-sidebar .sidebar-compose-btn + #folderlist-content {
border-top: 1px solid var(--pixie-border-color, #e4e4e7);
}
#layout-sidebar.sidebar-right {
order: 2;
border-right: 0;
border-left: 1px solid #f7f7f7;
flex: 3;
}
#layout-list {
position: relative;
display: flex;
flex-direction: column;
flex: 3;
max-width: 30%;
min-width: 300px;
background-color: #fff;
}
#layout-content {
display: flex;
flex: 6;
flex-direction: column;
background-color: #fff;
width: 100%;
}
html.iframe #layout-content {
height: 100%;
}
#layout-content > .formcontent,
#layout-content > .content {
height: 100%;
width: 100%;
overflow: auto;
flex: 1;
}
#layout-content .iframe-wrapper {
width: 100%;
flex: 1;
}
#layout-content .iframe-wrapper iframe {
width: 100%;
height: 100%;
border: 0;
}
#layout-content.only > .scroller {
overflow: auto;
}
#layout-menu {
background-color: #fdfdfd;
}
#layout-menu.popover {
left: 0 !important;
}
#layout-menu .popover-header {
height: 58px;
line-height: 58px;
border: 0;
border-radius: 0;
text-align: center;
}
#layout-menu .popover-header img {
max-height: 58px;
max-width: 78px;
padding: 0.25rem;
}
@media screen and (min-width: 481px) and (max-width: 1024px) {
#layout-menu .popover-header img {
max-width: 35.1px;
}
}
#layout-menu .popover-header img.logo-sm {
max-height: 34.8px;
max-width: 46.8px;
padding: 0;
display: block;
margin: 0 auto;
}
@media screen and (min-width: 481px) and (max-width: 1024px) {
#layout-menu .popover-header img.logo-sm {
max-width: 21.06px;
}
}
@media screen and (min-width: 481px) {
#layout-menu .popover-header {
padding: 0 !important;
background-color: #fdfdfd !important;
display: flex !important;
align-items: center;
justify-content: center;
}
#layout-menu .popover-header a {
display: none !important;
}
#layout-menu .popover-header a.logo-link {
display: inline-flex !important;
align-items: center;
justify-content: center;
line-height: 1;
color: inherit;
text-decoration: none;
cursor: pointer;
}
#layout-menu .popover-header a.logo-link:hover,
#layout-menu .popover-header a.logo-link:focus,
#layout-menu .popover-header a.logo-link:active {
color: inherit;
text-decoration: none;
}
}
html.layout-phone #layout-menu .popover-header {
display: flex !important;
align-items: center;
justify-content: space-between;
height: 54px;
min-height: 54px;
padding: 0 10px;
background: var(--pixie-menu-surface) !important;
border-bottom: 1px solid var(--pixie-menu-border) !important;
color: var(--pixie-menu-foreground);
}
html.layout-phone #layout-menu .popover-header img {
max-width: 46px;
max-height: 36px;
object-fit: contain;
}
html.layout-phone #layout-menu .popover-header a {
width: auto;
flex: 0 0 auto;
}
html.layout-phone #layout-menu .popover-header a.logo-link {
display: inline-flex;
align-items: center;
justify-content: flex-start;
width: auto;
min-width: 46px;
height: 40px;
}
html.layout-phone #layout-menu .popover-header a.cancel {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
min-width: 40px;
height: 40px;
color: var(--pixie-menu-foreground);
font-size: 0;
border-radius: 6px;
}
html.layout-phone #layout-menu .popover-header a.cancel:hover,
html.layout-phone #layout-menu .popover-header a.cancel:focus-visible {
color: var(--pixie-ui-accent);
background: var(--pixie-ui-accent-soft) !important;
outline: 0;
}
html.layout-phone #layout-menu .popover-header a.cancel .heroicon-host,
html.layout-phone #layout-menu .popover-header a.cancel .heroicon-host svg {
width: 20px !important;
height: 20px !important;
}
html.layout-phone #layout-menu .popover-header a:before,
html.layout-phone #layout-menu .popover-header a .inner {
display: none;
}
.column-resizer {
cursor: col-resize;
z-index: 1;
position: absolute;
top: 0;
right: -3px;
width: 6px;
height: 100%;
}
.column-resizer.inverted {
right: auto;
left: -3px;
}
.column-resizer.active {
width: 10000px;
right: -5000px;
}
.column-resizer.active.inverted {
right: auto;
left: -5000px;
}
@media screen and (max-width: 1200px) {
#layout-sidebar,
#layout-list {
min-width: 260px;
flex: 3;
}
#layout-list > .header > a.button {
padding: 0 0.25rem;
margin: 0 0.25rem;
}
}
@media screen and (max-width: 1024px) {
.column-resizer {
display: none;
}
#layout-sidebar,
#layout-list {
width: auto !important;
flex: 3 !important;
}
}
@media screen and (max-width: 768px) {
#layout-sidebar,
#layout-list {
max-width: none;
border: 0 !important;
}
#layout > div > .header {
background-color: #fdfdfd;
/* Ensure all header children (hamburger, folder, title, refresh,
* 3-dots) line up on the same vertical axis and the title fills
* whatever space remains. The default desktop title uses a
* `margin: 0 -20rem` "bleed" trick that collapses the title to
* 0 width on mobile when sibling buttons have nonzero width —
* we override that here. */
display: flex;
align-items: center;
flex-wrap: nowrap;
padding: 0 0.25rem;
gap: 0;
}
#layout > div > .header .header-title {
/* Drop the desktop -20rem bleed; let flex-1 expand the title into
* whatever space is left between left and right chrome. */
margin: 0 !important;
flex: 1 1 0%;
min-width: 0;
line-height: 58px;
}
#layout > div > .header a.button {
/* Tighten the per-button margin so 5 buttons + title fit in ~360px.
* flex: 0 0 auto keeps each button at its intrinsic 30×58 size. */
margin: 0 !important;
padding: 0 !important;
flex: 0 0 auto;
width: 30px;
}
#layout > div > .header a.button:before {
font-size: 1.75rem;
height: 58px;
margin: 0;
}
#layout > div > .header a.button.filter:before {
font-size: 1.6rem;
}
#layout > div > .header a.button .inner {
display: none;
}
#layout > div > .footer {
background-color: #fdfdfd;
}
/* On small layouts the Roundcube toolbar UL is collapsed into a
* popover that opens via the 3-dots button (.toolbar-menu-button).
* The in-header UL is just visual noise at this size — Roundcube
* leaves it rendered because the real content lives in the popover.
* Force it hidden so the header only shows hamburger (left) +
* folder (left) + title (center) + refresh (right) + 3-dots (right).
*
* Note: #toolbar-menu is REUSED as the popover content (not the
* in-header toolbar), so we DO NOT hide it globally — only the
* in-header copy. The compose toolbar (#messagetoolbar) is also
* hidden because it lives inside the iframe and is never shown
* on mobile. */
#layout-list .header ul.menu.toolbar {
display: none !important;
}
#messagetoolbar {
display: none !important;
}
a.toolbar-list-button {
display: none;
}
}
@media screen and (max-width: 320px) {
#layout-sidebar,
#layout-list {
min-width: 240px;
}
}
@media screen and (min-width: 481px) {
a.task-menu-button {
display: none;
}
#layout-menu {
background-color: #fdfdfd;
width: 42px;
}
}
@media screen and (min-width: 769px) {
.floating-action-buttons,
#layout-content > .header > .header-title,
#layout > div > .header > .buttons,
a.toolbar-menu-button {
display: none;
}
/* Boost specificity so the heroicon show-flex rule
* `a.button.icon.header-heroicon { display:flex }` (specificity 0,3,1,
* later in source) can't override the hide at layout-normal and large.
* Match its `.button.icon` plus add `body` to win the cascade.
* Without this the 3-dots stays visible at 1080px, clicks move the
* inline toolbar into a popover, and the user perceives the icons
* "disappearing". */
body a.button.icon.toolbar-menu-button,
body a.button.icon.toolbar-list-button {
display: none !important;
}
}
@media screen and (min-width: 1025px) {
#layout-menu {
width: 78px;
}
}
@media screen and (min-width: 1080px) {
#layout-list > .header > .header-title:not(.all-sizes),
a.toolbar-list-button,
a.back-list-button,
a.back-sidebar-button {
display: none;
}
/* Beat the .header-heroicon "display: flex" override that was leaking the
sidebar back button onto the desktop layout. */
a.back-list-button.header-heroicon,
a.back-sidebar-button.header-heroicon,
a.toolbar-list-button.header-heroicon {
display: none !important;
}
}
html.layout-phone .hidden-phone {
display: none !important;
}
html.layout-phone .hidden-small,
html.layout-small .hidden-small {
display: none !important;
}
html.layout-small .hidden-lbs {
display: none !important;
}
html.layout-large .hidden-lbs,
html.layout-normal .hidden-lbs,
html.layout-large .hidden-big,
html.layout-normal .hidden-big {
display: none !important;
}
html.layout-large .hidden-large {
display: none !important;
}
/**
* Roundcube Webmail styles for the Elastic skin
*
* Copyright (c) The Roundcube Dev Team
*
* The contents are subject to the Creative Commons Attribution-ShareAlike
* License. It is allowed to copy, distribute, transmit and to adapt the work
* by keeping credits to the original authors in the README.md file.
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
*/
/*** Common UI elements ***/
.rcmaddcontact,
.hidden,
.voice {
display: none !important;
}
font.bold {
font-weight: bold;
}
#rcmdraglayer {
min-width: 260px;
width: 260px;
background-color: #fff;
color: #fff;
box-shadow: 3px 3px 5px #f1f3f4;
border-radius: 0.3rem;
z-index: 250;
opacity: 0.92;
padding: 0.5rem;
white-space: nowrap;
}
#rcmdraglayer div {
line-height: 1.6em;
overflow: hidden;
text-overflow: ellipsis;
}
.frame-content {
padding: 1rem;
}
.frame-content h2 {
font-weight: bold;
font-size: 1.5em;
}
.frame-content h3 {
font-weight: bold;
font-size: 1.25em;
}
.listbox .scroller {
width: 100%;
overflow-x: hidden;
overflow-y: auto;
}
.listbox .navlist {
height: 0;
flex: initial !important;
}
.listbox .navlist .listing tr:last-child td,
.listbox .navlist .listing li:last-child {
border-bottom: 0;
}
.popup .listbox {
height: 100%;
display: flex;
flex-direction: column;
}
.popup .listbox .scroller {
flex: 1;
}
.popup .listbox .footer {
border-top: 1px solid #d4dbde;
background-color: #fbfbfb;
}
.contact-header {
display: flex;
margin-bottom: 1rem;
}
.contact-header .contact-photo {
min-width: 112px;
}
.contact-header .contact-head {
margin-left: 1rem;
margin-top: 0 !important;
}
.contact-header .contact-head legend {
display: none;
}
p.image-attachment {
position: relative;
border: 1px solid #ddd;
border-radius: 0.3rem;
background-color: rgba(5, 109, 255, 0.05);
float: left;
margin: 0.5rem;
min-width: 47%;
min-height: 250px;
overflow: hidden;
display: flex;
justify-content: center;
}
@media screen and (max-width: 480px) {
p.image-attachment {
float: none;
margin: 0.5rem 0 0.5rem 0;
}
}
p.image-attachment .image-link {
align-self: center;
text-align: center;
margin: 1.6rem 0.5rem;
}
p.image-attachment span {
color: #737677;
padding: 0 0.5rem;
font-size: 90%;
white-space: nowrap;
position: absolute;
line-height: 1.5rem;
}
p.image-attachment .image-filename {
overflow: hidden;
text-overflow: ellipsis;
left: 0;
top: 0;
right: 0;
padding-right: 4rem;
}
p.image-attachment .image-filesize {
right: 0;
top: 0;
}
p.image-attachment .attachment-links {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
}
p.image-attachment .attachment-links a {
text-decoration: none;
display: inline-block;
padding: 0 0.5rem;
line-height: 1.5rem;
}
p.image-attachment .attachment-links a:before {
display: inline-block;
}
p.image-attachment .attachment-links a.open:before {
content: "\f360";
}
p.image-attachment .attachment-links a.download:before {
content: "\f019";
}
fieldset.image-attachment {
margin-top: 0.5rem;
}
fieldset.image-attachment legend {
color: #737677;
font-size: 0.9rem;
border-top: 1px solid #f5f5f5;
margin: 0;
}
fieldset.image-attachment img {
max-width: 100%;
}
#folder-selector {
overflow-y: auto;
}
.noselect {
user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}
.iframe-loader {
width: 100%;
position: absolute;
top: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.95);
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
}
.iframe-loader .spinner-border {
width: 7rem;
height: 7rem;
color: #f1f3f4;
border: 1rem solid;
border-color: currentColor #737677 currentColor currentColor;
}
.footer.toolbar + .iframe-loader {
top: 58px;
bottom: 58px;
}
.ios-scroll {
padding: 0;
-webkit-overflow-scrolling: touch !important;
overflow: scroll !important;
}
.ios-scroll.iframe-wrapper {
margin-top: 1px;
}
.webkit-scroller::-webkit-scrollbar {
-webkit-appearance: none;
}
.webkit-scroller::-webkit-scrollbar:vertical {
width: 0.5rem;
}
.webkit-scroller::-webkit-scrollbar:horizontal {
height: 0.5rem;
}
.webkit-scroller::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.3);
border-radius: 0.25rem;
border: 2px solid #fff;
}
.quota-widget {
width: 100%;
max-width: 15em;
padding: 0.5rem 1rem;
display: flex;
align-items: center;
color: #737677;
}
.quota-widget:before {
content: "\f0a0";
line-height: 1;
}
.quota-widget .count {
font-size: 80%;
order: 2;
}
.quota-widget .bar {
flex: 1;
height: 0.5rem;
margin: 0 1rem;
background-color: #fff;
border: 1px solid #d4dbde;
border-radius: 0.25rem;
overflow: hidden;
}
.quota-widget .value {
display: block;
background-color: #056dff;
height: 1rem;
opacity: 0.75;
}
.quota-widget .value.warning {
background-color: #ff5552;
}
.image-tools {
position: absolute;
top: 5rem;
left: 0;
height: 58px;
overflow: hidden;
transform: translateX(-87%);
transition: transform 0.3s ease-in-out;
background-color: rgba(5, 109, 255, 0.4);
border-radius: 0 0.3rem 0.3rem 0;
}
.image-tools .menu {
float: left;
}
.image-tools a.button.icon.tools {
padding: 0 0.25rem;
display: inline-block;
height: 58px;
}
.image-tools a.button.icon.tools span.inner {
display: none;
}
.image-tools a.button.icon.tools:before {
line-height: 58px;
margin: 0;
}
.image-tools.open {
transform: translateX(0);
}
.image-tools.open a.button.icon.tools:before {
content: "\f053";
}
.image-tools a {
color: #fff !important;
}
.image-tools a:focus,
.image-tools a:hover {
background-color: rgba(5, 109, 255, 0.5) !important;
outline: 0;
}
.quota-info {
width: 100%;
display: table !important;
}
.quota-info td,
.quota-info th {
text-align: center;
white-space: nowrap;
}
.quota-info th {
border-top: 0;
}
.quota-info .root {
line-height: 1;
font-style: italic;
color: #737677;
background-color: #f1f3f4;
}
.quota-info th:first-child,
.quota-info .name {
text-align: left;
}
.nav-tabs {
flex-wrap: nowrap;
}
.nav-tabs .nav-item {
white-space: nowrap;
overflow: hidden;
}
.nav-tabs .nav-link {
overflow: hidden;
text-overflow: ellipsis;
}
.props-table td.title {
width: 7em;
}
.table-widget {
display: flex;
flex-direction: column;
margin-bottom: 0.5rem;
border: 1px solid #d4dbde;
}
.table-widget > .content {
overflow-x: auto;
flex-grow: 1;
height: 18.5em;
}
.table-widget > .content table th {
border-top: 0;
}
.table-widget > .footer {
height: 3.5rem;
border-top: 1px solid #d4dbde;
text-align: left;
}
.table-widget > .footer a {
padding: 0.2rem 0.45rem !important;
height: calc(3.5rem - 1px) !important;
}
.table-widget table {
margin: 0;
max-height: 18.5em;
}
.table-widget table.options-table td,
.table-widget table.options-table th {
text-align: center;
vertical-align: middle;
}
.table-widget table.options-table td:first-child,
.table-widget table.options-table th:first-child {
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
}
.table-widget table.options-table tr:last-child td {
border-bottom: 1px solid #d4dbde;
}
.table-widget table.options-table tr.selected td {
background-color: #e6f0ff;
color: #2c363a;
outline: 0;
}
.table-widget table.options-table td:not(:first-child) span {
display: inline-block;
line-height: 1.25;
}
.table-widget table.options-table td.enabled span:before {
content: "\f00c";
}
.table-widget table.options-table td.partial span:before {
opacity: 0.3;
content: "\f00c";
}
table.compact-table {
margin: 0;
width: 100%;
}
table.compact-table *:not(.invalid-feedback) {
font-size: inherit;
}
table.compact-table td {
padding: 0.25rem;
border: 0;
}
table.compact-table td:first-child {
padding-left: 0;
}
table.compact-table td:last-child {
padding-right: 0;
}
table.table .checkbox-cell {
width: 3rem;
white-space: nowrap;
overflow: hidden;
text-align: center;
padding: 0.5rem;
}
html.touch table.table .checkbox-cell {
padding: 0.5rem 0.3rem;
}
table.table th.checkbox-cell {
padding: 0.75rem 0;
max-width: 1rem;
}
table.table th.checkbox-cell:before {
cursor: pointer;
margin: 0 1rem;
line-height: 1;
}
table.table th.checkbox-cell.subscription:before {
content: "\f143";
}
table.table th.checkbox-cell.alarm:before {
content: "\f0f3";
font-weight: 400;
}
table.table th.checkbox-cell.read:before {
content: "\f06e";
}
table.table th.checkbox-cell.write:before {
content: "\f303";
}
table.table .buttons-cell {
width: 1%;
white-space: nowrap;
text-align: center;
}
table.table .buttons-cell a.button:before {
line-height: 1;
float: none;
display: inline-block;
}
@media screen and (min-width: 480px) {
table.table .buttons-cell a.button .inner {
display: inline;
}
}
table.table label {
margin: 0;
display: inline;
}
fieldset.tab-pane table.table thead th {
border: 0;
}
table.table tr.deleted td {
color: rgba(44, 54, 58, 0.5) !important;
}
/* Bootstrap's .table style overwrites */
.table thead th {
border-width: 1px;
white-space: nowrap;
}
/**
* Roundcube Webmail styles for the Elastic skin
*
* Copyright (c) The Roundcube Dev Team
*
* The contents are subject to the Creative Commons Attribution-ShareAlike
* License. It is allowed to copy, distribute, transmit and to adapt the work
* by keeping credits to the original authors in the README.md file.
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
*/
/*** Buttons ***/
.button.disabled {
opacity: 0.5;
}
a.button {
text-decoration: none !important;
}
/* font-icons */
a.button.icon.sidebar-menu:before,
button.btn.sidebar-menu:before,
a.button.icon.toolbar-menu-button:before,
button.btn.toolbar-menu-button:before,
a.button.icon.toolbar-list-button:before,
button.btn.toolbar-list-button:before {
content: "\f142";
width: 1em;
}
a.button.icon.task-menu-button:before,
button.btn.task-menu-button:before {
content: "\f0c9";
}
a.button.icon.back-sidebar-button:before,
button.btn.back-sidebar-button:before,
a.button.icon.back-content-button:before,
button.btn.back-content-button:before,
a.button.icon.back-list-button:before,
button.btn.back-list-button:before {
content: "\f053";
}
a.button.icon.refresh:before,
button.btn.refresh:before {
content: "\f021";
}
a.button.icon.generate:before,
button.btn.generate:before,
a.button.icon.yes:before,
button.btn.yes:before,
a.button.icon.submit:before,
button.btn.submit:before,
a.button.icon.continue:before,
button.btn.continue:before,
a.button.icon.save:before,
button.btn.save:before {
content: "\f00c";
}
a.button.icon.create:before,
button.btn.create:before {
content: "\f0fe";
}
a.button.icon.edit:before,
button.btn.edit:before {
content: "\f303";
}
a.button.icon.qrcode:before,
button.btn.qrcode:before {
content: "\f029";
}
a.button.icon.search:before,
button.btn.search:before {
content: "\f002";
}
a.button.icon.filter:before,
button.btn.filter:before {
content: "\f0b0";
font-size: 1.2em;
}
a.button.icon.import:before,
button.btn.import:before {
content: "\f093";
}
a.button.icon.export:before,
button.btn.export:before {
content: "\f019";
}
a.button.icon.discard:before,
button.btn.discard:before,
a.button.icon.delete:before,
button.btn.delete:before {
content: "\f2ed";
font-weight: 400;
}
a.button.icon.next:before,
button.btn.next:before {
content: "\f061";
}
a.button.icon.restore:before,
button.btn.restore:before {
content: "\f0e2";
}
a.button.icon.send:before,
button.btn.send:before,
a.button.icon.bounce:before,
button.btn.bounce:before {
content: "\f1d8";
}
a.button.icon.attach:before,
button.btn.attach:before {
content: "\f0c6";
}
a.button.icon.attach.vcard:before,
button.btn.attach.vcard:before {
content: "\f007";
}
a.button.icon.no:before,
button.btn.no:before,
a.button.icon.close:before,
button.btn.close:before,
a.button.icon.cancel:before,
button.btn.cancel:before {
content: "\f00d";
}
a.button.icon.back:before,
button.btn.back:before {
content: "\f053";
}
a.button.icon.remove:before,
button.btn.remove:before {
content: "\f00d";
}
a.button.icon.unlock:before,
button.btn.unlock:before {
content: "\f09c";
}
a.button.icon.help:before,
button.btn.help:before {
content: "\f1cd";
font-weight: 400;
}
a.button.icon.folders:before,
button.btn.folders:before {
content: "\f07c";
}
a.button.icon.options:before,
button.btn.options:before {
content: "\f1de";
}
a.button.icon.tools:before,
button.btn.tools:before,
a.button.icon.settings:before,
button.btn.settings:before {
content: "\f013";
}
a.button.icon.properties:before,
button.btn.properties:before {
content: "\f05a";
}
a.button.icon.selection:before,
button.btn.selection:before {
content: "\f14a";
font-weight: 400;
}
a.button.icon.insert.recipient:before,
button.btn.insert.recipient:before {
content: "\f234";
}
a.button.icon.encrypt:before,
button.btn.encrypt:before {
content: "\f023";
}
a.button.icon.sign:before,
button.btn.sign:before {
content: "\f5b7";
}
a.button.icon.sso:before,
button.btn.sso:before {
content: "\f2f6";
}
a.button.icon.extwin:before,
button.btn.extwin:before {
content: "\f360";
}
a.btn:before,
button.btn:before {
display: inline !important;
float: none !important;
vertical-align: middle;
margin-right: 0.4rem !important;
}
a.btn.oauth.google:before,
button.btn.oauth.google:before,
a.btn.oauth.outlook:before,
button.btn.oauth.outlook:before {
content: " ";
display: inline-block !important;
height: 1.5rem;
width: 1.5rem;
margin-right: 0.8rem !important;
background-size: 100% auto;
}
a.btn.oauth.google:before,
button.btn.oauth.google:before {
background: url("../images/google-icon.svg") top left no-repeat;
}
a.btn.oauth.outlook:before,
button.btn.oauth.outlook:before {
background: url("../images/microsoft-icon.svg") top left no-repeat;
}
a.button.icon.dropdown:before {
content: "\f0d7";
font-size: 1em;
}
a.button.icon > span.inner {
display: none;
}
a.button.icon.sidebar-menu {
display: inline-flex !important;
align-items: center;
justify-content: center;
align-self: center;
width: 2.25rem;
height: 2.25rem;
min-width: 2.25rem;
padding: 0;
margin: 0;
background-color: transparent;
border: 0;
border-radius: 0.5rem;
box-shadow: none;
color: hsl(220, 8.9%, 46.1%);
text-decoration: none;
transition:
background-color 0.15s ease,
color 0.15s ease,
box-shadow 0.15s ease,
border-color 0.15s ease;
cursor: pointer;
}
a.button.icon.sidebar-menu:before {
/* Elastic's `.header a.button::before { height: 58px; line-height: 58px;
* font-size: 1.75rem }` (its mobile media query at `max-width: 768px`)
* uses an ID selector (`#layout > div > .header ...`) which beats our
* class selector (0,3,1 vs 1,2,2). The 58px `::before` is taller than
* our 31.5px button → icon renders off-center, the "menu" glyph sits
* against the top of the row, and Row's `line-height: 58px` adds
* baseline drift. The `!important` flags restore the 1rem × 1rem box
* and line-height that the flex container can then vertically center. */
font-size: 1rem !important;
line-height: 1 !important;
width: 1rem !important;
height: 1rem !important;
margin: 0 !important;
}
a.button.icon.sidebar-menu:hover,
a.button.icon.sidebar-menu:focus {
background-color: hsl(220, 14.3%, 95.9%) !important;
color: hsl(240, 10%, 3.9%) !important;
outline: none !important;
}
a.button.icon.sidebar-menu:active {
background-color: transparent;
}
a.button.icon.sidebar-menu.active,
a.button.icon.sidebar-menu[aria-expanded="true"] {
background-color: transparent;
color: hsl(240, 10%, 3.9%);
}
/* When the button is in its `.active` / `aria-expanded="true"` state
* the default `:hover` rule above IS still expecting to apply — both
* selectors are (0,3,1) so source order decides and `.active` wins.
* Re-issue the hover bg against the active compound so the user gets
* the same gray pill feedback on every hover, even when the action
* menu is open. */
a.button.icon.sidebar-menu.active:hover,
a.button.icon.sidebar-menu.active:focus,
a.button.icon.sidebar-menu[aria-expanded="true"]:hover,
a.button.icon.sidebar-menu[aria-expanded="true"]:focus {
background-color: hsl(220, 14.3%, 95.9%) !important;
color: hsl(240, 10%, 3.9%) !important;
outline: none !important;
}
html.dark-mode a.button.icon.sidebar-menu {
background-color: transparent;
border-color: transparent;
color: hsl(240, 5%, 64.9%);
box-shadow: none;
}
html.dark-mode a.button.icon.sidebar-menu:hover,
html.dark-mode a.button.icon.sidebar-menu:focus {
background-color: hsl(240, 3.7%, 15.9%) !important;
color: hsl(0, 0%, 98%) !important;
box-shadow: none !important;
}
html.dark-mode a.button.icon.sidebar-menu.active,
html.dark-mode a.button.icon.sidebar-menu:active,
html.dark-mode a.button.icon.sidebar-menu[aria-expanded="true"] {
background-color: transparent;
color: #f9f9f9;
align-self: center;
}
/* Same hover-on-active override for dark mode so the gray pill still
* appears on hover even when the action menu is open. */
html.dark-mode a.button.icon.sidebar-menu.active:hover,
html.dark-mode a.button.icon.sidebar-menu.active:focus,
html.dark-mode a.button.icon.sidebar-menu[aria-expanded="true"]:hover,
html.dark-mode a.button.icon.sidebar-menu[aria-expanded="true"]:focus {
background-color: hsl(240, 3.7%, 15.9%) !important;
color: hsl(0, 0%, 98%) !important;
box-shadow: none !important;
}
html.touch .btn:focus {
box-shadow: none !important;
}
.floating-action-buttons {
position: absolute;
right: 0;
bottom: 0;
}
.footer:not(:empty) + .floating-action-buttons {
bottom: 35px;
}
.floating-action-buttons a.button {
display: block;
float: left;
width: 4rem;
height: 4rem;
border-radius: 50%;
background: #056dff;
color: white;
opacity: 0.95;
box-shadow: 0 0 5px 5px #b7d5ff;
margin: 0 1rem 1rem 0;
}
.floating-action-buttons a.button:before {
content: "\f067";
width: 4rem;
height: 4rem;
line-height: 4rem;
}
.floating-action-buttons a.button.compose:before {
content: "\f304";
}
.floating-action-buttons a.button .inner {
display: none;
}
/*** Bootstrap button style overrides ***/
.btn {
padding: 0.7rem 0.75rem;
}
.btn:focus {
box-shadow: 0 0 0 0.2rem rgba(5, 109, 255, 0.3);
}
.btn-link {
color: #00acff;
}
.btn-secondary {
color: #fff;
background: #8b9fa7;
border-color: #8b9fa7;
}
.btn-secondary:focus {
background: #7c939c;
border-color: #778e98;
box-shadow: 0 0 0 0.2rem rgba(139, 159, 167, 0.5);
}
.btn-secondary:hover {
background: #7c939c;
border-color: #778e98;
}
.btn-secondary.disabled,
.btn-secondary:disabled {
background: #8b9fa7;
border-color: #8b9fa7;
}
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active {
background: #6e8791;
border-color: #6a828b;
}
.btn-secondary:not(:disabled):not(.disabled):active:focus,
.btn-secondary:not(:disabled):not(.disabled).active:focus {
box-shadow: 0 0 0 0.2rem rgba(139, 159, 167, 0.53);
}
.btn-primary {
color: #fff;
background: #056dff;
border-color: #056dff;
}
.btn-primary:focus {
background: #0062eb;
border-color: #005de0;
box-shadow: 0 0 0 0.2rem rgba(5, 109, 255, 0.5);
}
.btn-primary:hover {
background: #0062eb;
border-color: #005de0;
}
.btn-primary.disabled,
.btn-primary:disabled {
background: #056dff;
border-color: #056dff;
}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
background: #0057d1;
border-color: #0053c7;
}
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus {
box-shadow: 0 0 0 0.2rem rgba(5, 109, 255, 0.53);
}
.btn-danger {
color: #fff;
background: #ff5552;
border-color: #ff5552;
}
.btn-danger:focus {
background: #ff3c38;
border-color: #ff322e;
box-shadow: 0 0 0 0.2rem rgba(255, 85, 82, 0.5);
}
.btn-danger:hover {
background: #ff3c38;
border-color: #ff322e;
}
.btn-danger.disabled,
.btn-danger:disabled {
background: #ff5552;
border-color: #ff5552;
}
.btn-danger:not(:disabled):not(.disabled):active,
.btn-danger:not(:disabled):not(.disabled).active {
background: #ff231f;
border-color: #ff1915;
}
.btn-danger:not(:disabled):not(.disabled):active:focus,
.btn-danger:not(:disabled):not(.disabled).active:focus {
box-shadow: 0 0 0 0.2rem rgba(255, 85, 82, 0.53);
}
/**
* Roundcube Webmail styles for the Elastic skin
*
* Copyright (c) The Roundcube Dev Team
*
* The contents are subject to the Creative Commons Attribution-ShareAlike
* License. It is allowed to copy, distribute, transmit and to adapt the work
* by keeping credits to the original authors in the README.md file.
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
*/
/*** jQuery-UI widgets' style overrides ***/
.ui-widget-overlay {
background-color: rgba(44, 54, 58, 0.5);
opacity: 1 !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.ui-widget-overlay.datepicker {
z-index: 119;
}
.ui-widget {
border: 1px solid #d4dbde;
box-shadow: 3px 3px 5px #f1f3f4;
border-radius: 0.3rem;
}
.ui-menu {
overflow-y: auto;
overflow-x: hidden;
max-height: 400px;
border-radius: 0.3rem;
z-index: 240;
position: absolute;
}
.ui-menu .ui-state-active {
border: 0 !important;
background-color: #056dff !important;
}
.ui-menu .ui-menu-item {
white-space: nowrap;
cursor: default;
}
.ui-menu .ui-menu-item-wrapper {
margin: 0 !important;
}
.ui-dialog {
border-radius: 0;
box-shadow: none;
}
.ui-dialog.no-titlebar .ui-dialog-titlebar {
display: none;
}
.ui-dialog .ui-dialog-titlebar {
height: 58px;
border-bottom: 1px solid #ddd;
}
.ui-dialog .ui-dialog-titlebar button:before {
margin: 0;
}
.ui-dialog .ui-dialog-title {
line-height: 58px;
font-size: 1.25rem;
padding: 0 3rem 0 1rem;
color: #2c363a;
}
.ui-dialog .ui-dialog-titlebar-close {
border: 0;
color: #2c363a;
background: transparent;
right: 0;
top: 0;
position: absolute;
padding: 0.25rem 0.5rem;
margin: 15px 0.5rem;
}
.ui-dialog .ui-dialog-titlebar-close:before {
content: "\f00d";
line-height: 1.5rem;
margin: 0 !important;
}
.ui-dialog .ui-dialog-content > .popupmenu {
display: block !important;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
display: flex;
justify-content: flex-end;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset a.btn-link,
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button {
overflow: hidden;
text-overflow: ellipsis;
min-width: 5rem;
margin: 9px 4px;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset a.btn-link:last-child,
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button:last-child {
margin-right: 0;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset a.btn-link {
padding-right: 0;
padding-left: 0;
text-decoration: none;
color: #2c363a;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset a.btn-link:focus {
background-color: rgba(5, 109, 255, 0.5);
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset a.btn-link.options {
order: -1;
padding: 0.375rem 0.25rem;
margin-right: 0.3rem;
}
.ui-dialog
.ui-dialog-buttonpane
.ui-dialog-buttonset
a.btn-link.options:before {
content: "\f013";
width: 100%;
height: 1.25em;
}
.ui-dialog iframe,
.ui-dialog .ui-dialog-content.iframe {
padding: 0;
width: 100% !important;
height: 100%;
border: 0;
overflow: hidden;
}
.ui-dialog,
.ui-dialog-content {
box-sizing: initial;
}
.ui-widget-content .ui-icon.ui-resizable-se {
background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Cpath%20fill%3D%22%23888%22%20d%3D%22M6.7%2016L16%206.7V5.3L5.3%2016zM9.7%2016L16%209.7V8.3L8.3%2016zM12.7%2016l3.3-3.3v-1.4L11.3%2016zM15.7%2016l.3-.3v-1.4L14.3%2016z%22%2F%3E%0A%3C%2Fsvg%3E%0A");
}
/* FIXME: why do I need !important here? */
@media screen and (max-width: 480px) {
.ui-dialog {
width: 100% !important;
height: 100% !important;
display: flex;
flex-direction: column;
border: 0;
top: 0 !important;
}
.ui-dialog .ui-resizable-handle {
display: none !important;
}
/* X close button — restored on mobile so users have an obvious gesture
* to dismiss the dialog (instead of having to find Cancel).
* 44×44 touch target; inside sits an inline x-mark heroicon (22×22,
* vertically/horizontally centered). Hide the existing FontAwesome
* ::before glyph since heroicons injects its own. */
.ui-dialog .ui-dialog-titlebar-close {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
max-width: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
margin: 7px 8px !important;
padding: 0 !important;
border-radius: 9999px !important;
background: transparent !important;
color: #2c363a !important;
font-size: 0 !important;
text-indent: -9999px !important;
overflow: hidden !important;
cursor: pointer;
}
.ui-dialog .ui-dialog-titlebar-close:hover,
.ui-dialog .ui-dialog-titlebar-close:focus-visible {
background: rgba(0, 0, 0, 0.06) !important;
}
.ui-dialog .ui-dialog-titlebar-close:before {
content: none !important;
}
.ui-dialog .ui-dialog-titlebar-close > .heroicon-host {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 22px !important;
height: 22px !important;
pointer-events: none;
}
.ui-dialog .ui-dialog-titlebar-close > .heroicon-host > svg {
width: 22px !important;
height: 22px !important;
fill: currentColor !important;
}
.ui-dialog .ui-dialog-titlebar {
height: 58px;
text-align: left !important;
background-color: #fdfdfd;
padding: 0 8px 0 16px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}
.ui-dialog .ui-dialog-title {
line-height: 1.25 !important;
font-size: 1.0625rem;
font-weight: 600;
padding: 0 !important;
margin: 0 !important;
flex: 1 1 auto !important;
text-align: left !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ui-dialog .ui-dialog-content {
flex: 1;
}
.ui-dialog .ui-dialog-content:not(.iframe) {
padding: 1rem;
}
/* Buttons row — Cancel sits at the LEFT (per platform convention on
* iOS / Android / Material), the primary action sits at the RIGHT.
* Both have 44×44 minimum touch height, generous horizontal padding,
* and a clear type weight. */
.ui-dialog .ui-dialog-buttonpane {
padding: 0 8px !important;
text-align: right !important;
border-top: 1px solid #ddd;
min-height: 56px !important;
height: auto !important;
background-color: #fdfdfd;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-end !important;
width: 100% !important;
gap: 0.5rem !important;
margin: 0 !important;
padding: 0 !important;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button {
margin: 0 !important;
padding: 0 1.25rem !important;
min-height: 44px !important;
height: 44px !important;
width: auto !important;
min-width: 88px !important;
max-width: none !important;
border-radius: 8px !important;
border: 0 !important;
box-shadow: none;
font-size: 0.9375rem !important;
font-weight: 600 !important;
line-height: 1.2;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button:before {
height: 1rem !important;
line-height: 1 !important;
margin: 0 0.375rem 0 0 !important;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button:active {
box-shadow: none;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.btn-primary {
color: #ffffff !important;
background: rgb(5, 109, 255) !important;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.btn-secondary {
color: #2c363a !important;
background: transparent !important;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.btn-danger {
color: #ffffff !important;
background: rgb(220, 38, 38) !important;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.disabled,
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button:disabled {
opacity: 0.5;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.cancel {
order: -1;
color: #ffffff !important;
background: rgba(0, 0, 0, 0.08) !important;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset a.btn-link {
color: #2c363a;
margin: 0;
padding: 0.45rem;
font-size: 90%;
}
.ui-dialog
.ui-dialog-buttonpane
.ui-dialog-buttonset
a.btn-link.options:before {
display: block !important;
height: 1.75rem;
line-height: 1.75;
margin: 0;
}
}
/* Slider widget */
.ui-slider {
box-shadow: none;
}
.ui-slider .ui-slider-range {
border-radius: 0.3rem;
background: #9ec6ff;
}
.ui-slider .ui-slider-handle {
border-radius: 0.3rem;
}
.ui-slider .ui-slider-handle.ui-state-active {
background: #056dff;
border-color: #002252;
}
/* Datepicker widget */
.ui-datepicker {
margin: calc(50vh - 10em) calc(50vw - 10em) !important;
top: 0 !important;
left: 0 !important;
box-shadow: none;
user-select: none;
}
.ui-datepicker:not(.ui-datepicker-inline) {
z-index: 120 !important;
}
.ui-datepicker .ui-datepicker-header,
.ui-datepicker .ui-datepicker-title {
line-height: 4rem;
height: 4rem;
padding: 0;
}
.ui-datepicker .ui-datepicker-header {
border-bottom: 1px solid #ddd;
}
.ui-datepicker .ui-datepicker-header a {
height: 4rem;
}
.ui-datepicker .ui-datepicker-header select {
display: inline-block;
}
.ui-datepicker .ui-icon {
background-image: none !important;
background-position: none !important;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
cursor: pointer;
width: auto;
color: #2c363a;
text-decoration: none;
}
.ui-datepicker .ui-datepicker-prev:before,
.ui-datepicker .ui-datepicker-next:before {
content: "\f053";
margin: 0 0.25em;
height: auto;
width: 1em;
}
.ui-datepicker .ui-datepicker-prev:before {
content: "\f053";
}
.ui-datepicker .ui-datepicker-next:before {
content: "\f054";
}
.ui-datepicker td a {
padding: 0;
line-height: 1.8em;
border-radius: 0.3rem;
}
.ui-datepicker .ui-state-default,
.ui-datepicker.ui-widget-content .ui-state-default {
border: 0;
background: transparent;
color: #2c363a;
}
.ui-datepicker .ui-datepicker-days-cell-over a,
.ui-datepicker .ui-datepicker-days-cell-over a.ui-state-default,
.ui-datepicker .ui-state-highlight,
.ui-datepicker.ui-widget-content .ui-state-highlight {
background: #9ec6ff;
color: #056dff;
}
.ui-datepicker a.ui-state-active {
background: #056dff !important;
color: #fff !important;
font-weight: bold;
}
.ui-datepicker html.touch td a {
font-size: 1.2em;
line-height: 2.2em;
}
.input-group > .form-control.hasDatepicker {
position: initial;
}
.minicolors-panel {
border: 1px solid #d4dbde;
box-shadow: 3px 3px 5px #f1f3f4;
border-radius: 0.3rem;
height: 152px;
padding: 1px;
}
.input-group .minicolors-input {
width: 100%;
min-width: 130px;
border-left: 0;
border-right: 0;
}
@media screen and (max-width: 320px) {
.ui-widget-content {
border-radius: 0;
}
.ui-menu {
border-radius: 0.3rem;
left: 15px !important;
right: 15px;
width: auto;
}
.ui-dialog .ui-dialog-content:not(.iframe) {
padding: 0.65rem;
}
}
/* --------------------------------------------------------------------------
* "List options" dialog (opened from the #layout-list toolbar's options
* icon). Restyled as a modern centered modal. Only applies to the dialog
* that wraps the #listoptions-menu (so other jQuery-UI dialogs are
* unaffected).
* ------------------------------------------------------------------------ */
.ui-dialog:has(> .ui-dialog-content #listoptions-menu) {
border: 0;
border-radius: 12px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
background: #fff;
padding: 0 0 1rem 0;
color: #2c363a;
overflow: visible;
}
@media screen and (min-width: 481px) {
.ui-dialog:has(> .ui-dialog-content #listoptions-menu) .ui-dialog-titlebar {
height: auto;
border-bottom: 0;
padding: 1.25rem 1.5rem 1rem;
background: transparent;
cursor: default;
display: block;
position: relative;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
.ui-dialog:has(> .ui-dialog-content #listoptions-menu)
.ui-dialog-titlebar::before {
content: "";
position: absolute;
top: 1.25rem;
left: 1.5rem;
width: 1.5rem;
height: 1.5rem;
background: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 1.5rem;
}
.ui-dialog:has(> .ui-dialog-content #listoptions-menu) .ui-dialog-title {
display: block;
line-height: 1.4;
padding: 0 1rem 0 3.25rem;
font-size: 1.1rem;
font-weight: 600;
color: #2c363a;
float: none !important;
}
.ui-dialog:has(> .ui-dialog-content #listoptions-menu)
.ui-dialog-titlebar-close,
.ui-dialog:has(> .ui-dialog-content #listoptions-menu) .ui-resizable-handle {
display: none !important;
}
}
.ui-dialog:has(> .ui-dialog-content #listoptions-menu) .ui-dialog-content {
background: transparent;
padding: 0.5rem 1.5rem 0.75rem;
overflow: hidden;
color: #2c363a;
}
.ui-dialog:has(> .ui-dialog-content #listoptions-menu)
.ui-dialog-content
#listoptions-menu
.form-group.row {
align-items: center;
margin-bottom: 0.75rem;
}
.ui-dialog:has(> .ui-dialog-content #listoptions-menu)
.ui-dialog-content
#listoptions-menu
.form-group.row
.col-form-label {
color: #737677;
font-size: 0.85rem;
font-weight: 500;
}
.ui-dialog:has(> .ui-dialog-content #listoptions-menu)
.ui-dialog-content
#listoptions-menu
.form-group.row
.form-control {
border-radius: 8px;
}
.ui-dialog:has(> .ui-dialog-content #listoptions-menu)
.popover.select-menu
.popover-body
.listing.selectable.iconized
li
a {
color: #2c363a;
}
.ui-dialog:has(> .ui-dialog-content #listoptions-menu)
.popover.select-menu
.popover-body
.listing.selectable.iconized
li
a:hover {
color: #2c363a;
background-color: hsl(240, 5%, 96%);
box-shadow: 0 0 0 1px hsl(240, 5%, 90%);
border-radius: 0.375rem;
}
.ui-dialog:has(> .ui-dialog-content #listoptions-menu)
.popover.select-menu
.popover-body
.listing.selectable.iconized
li
a:focus,
.ui-dialog:has(> .ui-dialog-content #listoptions-menu)
.popover.select-menu
.popover-body
.listing.selectable.iconized
li
a:focus-visible,
.ui-dialog:has(> .ui-dialog-content #listoptions-menu)
.popover.select-menu
.popover-body
.listing.selectable.iconized
li
a:active {
color: #2c363a;
background-color: hsl(240, 5%, 96%);
box-shadow: 0 0 0 1px hsl(240, 5%, 90%);
border-radius: 0.375rem;
outline: 0;
}
.ui-dialog:has(> .ui-dialog-content #listoptions-menu)
.popover.select-menu
.popover-body
.listing.selectable.iconized
li
a.selected,
.ui-dialog:has(> .ui-dialog-content #listoptions-menu)
.popover.select-menu
.popover-body
.listing.selectable.iconized
li
a.selected:hover,
.ui-dialog:has(> .ui-dialog-content #listoptions-menu)
.popover.select-menu
.popover-body
.listing.selectable.iconized
li
a.selected:focus,
.ui-dialog:has(> .ui-dialog-content #listoptions-menu)
.popover.select-menu
.popover-body
.listing.selectable.iconized
li
a.selected:focus-visible,
.ui-dialog:has(> .ui-dialog-content #listoptions-menu)
.popover.select-menu
.popover-body
.listing.selectable.iconized
li
a.selected:active {
color: #2c363a;
background-color: hsl(240, 5%, 96%);
box-shadow: 0 0 0 1px hsl(240, 5%, 90%);
border-radius: 0.375rem;
}
.ui-dialog:has(> .ui-dialog-content #listoptions-menu)
.ui-dialog-content
select.form-control:focus,
.ui-dialog:has(> .ui-dialog-content #listoptions-menu)
.ui-dialog-content
select.form-control:focus-visible {
color: #2c363a !important;
background-color: hsl(240, 5%, 96%) !important;
border-color: hsl(240, 5%, 90%) !important;
box-shadow: 0 0 0 1px hsl(240, 5%, 90%) !important;
border-radius: 0.5rem;
outline: 0 !important;
}
.ui-dialog:has(> .ui-dialog-content #listoptions-menu)
.popover.select-menu
.listing
li
> a {
border-left: 0 !important;
}
.ui-dialog:has(> .ui-dialog-content #listoptions-menu) .ui-dialog-buttonpane {
background: transparent;
border-top: 1px solid #f1f3f4;
padding: 0.85rem 1.5rem 1.75rem;
margin: 0.5rem 0 0;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
}
.ui-dialog:has(> .ui-dialog-content #listoptions-menu)
.ui-dialog-buttonpane
.ui-dialog-buttonset {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
float: none !important;
}
.ui-dialog:has(> .ui-dialog-content #listoptions-menu)
.ui-dialog-buttonpane
.ui-dialog-buttonset
button {
border-radius: 0.5rem;
padding: 0.55rem 1.5rem;
font-weight: 500;
font-size: 0.875rem;
min-width: 6.5rem;
margin: 0 !important;
box-shadow: none;
transition:
background-color 120ms ease,
color 120ms ease,
border-color 120ms ease;
}
.ui-dialog:has(> .ui-dialog-content #listoptions-menu)
.ui-dialog-buttonpane
.ui-dialog-buttonset
button.cancel {
background: #dc2626;
color: #fff;
border: 1px solid #dc2626;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.ui-dialog:has(> .ui-dialog-content #listoptions-menu)
.ui-dialog-buttonpane
.ui-dialog-buttonset
button.cancel:hover {
background: #ef4444;
border-color: #ef4444;
}
.ui-dialog:has(> .ui-dialog-content #listoptions-menu)
.ui-dialog-buttonpane
.ui-dialog-buttonset
button.mainaction {
background: #056dff;
color: #fff;
border: 1px solid #056dff;
}
.ui-dialog:has(> .ui-dialog-content #listoptions-menu)
.ui-dialog-buttonpane
.ui-dialog-buttonset
button.mainaction:hover {
background: #005fe5;
border-color: #005fe5;
}
/* --------------------------------------------------------------------------
* "Insert contact(s)" dialog (opened from the Add-contact icon next to the
* To/Cc/Bcc fields in compose). Mirrors the same Tailwind Plus dialog
* pattern as the List options modal: rounded card, soft drop shadow,
* bare accent icon in the titlebar, hidden X + resize handles, rounded
* button pane with destructive-style Cancel + primary-style Save. Only
* applies to the dialog wrapping #recipient-dialog (so other jQuery-UI
* dialogs are unaffected).
* ------------------------------------------------------------------------ */
.ui-dialog:has(> .ui-dialog-content #recipient-dialog) {
border: 0;
border-radius: 12px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
background: #fff;
padding: 0 0 1rem 0;
color: #2c363a;
overflow: visible;
}
@media screen and (min-width: 481px) {
.ui-dialog:has(> .ui-dialog-content #recipient-dialog) .ui-dialog-titlebar {
height: auto;
border-bottom: 0;
padding: 1.25rem 1.5rem 1rem;
background: transparent;
cursor: default;
display: block;
position: relative;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
.ui-dialog:has(> .ui-dialog-content #recipient-dialog)
.ui-dialog-titlebar::before {
content: "";
position: absolute;
top: 1.25rem;
left: 1.5rem;
width: 1.5rem;
height: 1.5rem;
background: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 1.5rem;
}
.ui-dialog:has(> .ui-dialog-content #recipient-dialog) .ui-dialog-title {
display: block;
line-height: 1.4;
padding: 0 1rem 0 3.25rem;
font-size: 1.1rem;
font-weight: 600;
color: #2c363a;
float: none !important;
}
.ui-dialog:has(> .ui-dialog-content #recipient-dialog)
.ui-dialog-titlebar-close,
.ui-dialog:has(> .ui-dialog-content #recipient-dialog) .ui-resizable-handle {
display: none !important;
}
}
.ui-dialog:has(> .ui-dialog-content #recipient-dialog) .ui-dialog-content {
background: transparent;
padding: 0.5rem 1.5rem 0.75rem !important;
overflow: hidden;
color: #2c363a;
}
.ui-dialog:has(> .ui-dialog-content #recipient-dialog)
.ui-dialog-content
#recipient-dialog {
height: 100%;
padding: 0;
}
.ui-dialog:has(> .ui-dialog-content #recipient-dialog)
.ui-dialog-content
#recipient-dialog
.listbox {
display: flex;
flex-direction: column;
gap: 0.5rem;
border: 0;
background: transparent;
height: 100%;
}
.ui-dialog:has(> .ui-dialog-content #recipient-dialog)
.ui-dialog-content
#recipient-dialog
.searchbar {
margin: 0;
height: auto;
min-height: 2.4rem;
line-height: 2.4rem;
border-radius: 0.5rem;
border: 1px solid #d4dbde;
background: #fff;
box-shadow: none;
padding: 0 0.5rem;
}
.ui-dialog:has(> .ui-dialog-content #recipient-dialog)
.ui-dialog-content
#recipient-dialog
.searchbar
form {
flex: 1;
display: flex;
}
.ui-dialog:has(> .ui-dialog-content #recipient-dialog)
.ui-dialog-content
#recipient-dialog
.searchbar
form:before {
margin: 0 0 0 0.5rem;
color: #737677;
}
.ui-dialog:has(> .ui-dialog-content #recipient-dialog)
.ui-dialog-content
#recipient-dialog
.searchbar
input {
background: transparent;
padding: 0.5rem;
}
.ui-dialog:has(> .ui-dialog-content #recipient-dialog)
.ui-dialog-content
#recipient-dialog
.searchbar
a {
color: #2c363a;
}
.ui-dialog:has(> .ui-dialog-content #recipient-dialog)
.ui-dialog-content
#recipient-dialog
.scroller {
flex: 1;
border: 1px solid #d4dbde;
border-radius: 0.5rem;
background: transparent;
overflow-y: auto;
padding: 0.25rem;
}
.ui-dialog:has(> .ui-dialog-content #recipient-dialog)
.ui-dialog-content
#recipient-dialog
.treelist,
.ui-dialog:has(> .ui-dialog-content #recipient-dialog)
.ui-dialog-content
#recipient-dialog
.contactlist {
background: transparent;
padding: 0;
border: 0;
}
.ui-dialog:has(> .ui-dialog-content #recipient-dialog)
.ui-dialog-content
#recipient-dialog
.treelist
li,
.ui-dialog:has(> .ui-dialog-content #recipient-dialog)
.ui-dialog-content
#recipient-dialog
.contactlist
li {
border-radius: 0.375rem;
margin: 0.125rem 0;
transition: background-color 120ms ease;
}
.ui-dialog:has(> .ui-dialog-content #recipient-dialog)
.ui-dialog-content
#recipient-dialog
.treelist
li
> a,
.ui-dialog:has(> .ui-dialog-content #recipient-dialog)
.ui-dialog-content
#recipient-dialog
.contactlist
li
> a {
display: block;
padding: 0.5rem 0.75rem;
color: #737677;
font-weight: 700;
text-decoration: none;
border-radius: 0.375rem;
transition:
background-color 120ms ease,
color 120ms ease;
}
.ui-dialog:has(> .ui-dialog-content #recipient-dialog)
.ui-dialog-content
#recipient-dialog
.treelist
li
> a:hover,
.ui-dialog:has(> .ui-dialog-content #recipient-dialog)
.ui-dialog-content
#recipient-dialog
.contactlist
li
> a:hover,
.ui-dialog:has(> .ui-dialog-content #recipient-dialog)
.ui-dialog-content
#recipient-dialog
.treelist
li
> a:focus,
.ui-dialog:has(> .ui-dialog-content #recipient-dialog)
.ui-dialog-content
#recipient-dialog
.contactlist
li
> a:focus,
.ui-dialog:has(> .ui-dialog-content #recipient-dialog)
.ui-dialog-content
#recipient-dialog
.treelist
li
> a:active,
.ui-dialog:has(> .ui-dialog-content #recipient-dialog)
.ui-dialog-content
#recipient-dialog
.contactlist
li
> a:active {
background-color: rgba(0, 0, 0, 0.06);
color: #090A0B;
}
.ui-dialog:has(> .ui-dialog-content #recipient-dialog)
.ui-dialog-content
#recipient-dialog
.treelist
li.selected,
.ui-dialog:has(> .ui-dialog-content #recipient-dialog)
.ui-dialog-content
#recipient-dialog
.contactlist
li.selected {
background-color: transparent;
}
.ui-dialog:has(> .ui-dialog-content #recipient-dialog)
.ui-dialog-content
#recipient-dialog
.treelist
li.selected
> a,
.ui-dialog:has(> .ui-dialog-content #recipient-dialog)
.ui-dialog-content
#recipient-dialog
.contactlist
li.selected
> a {
background-color: rgba(0, 0, 0, 0.08);
color: #090A0B;
}
.ui-dialog:has(> .ui-dialog-content #recipient-dialog)
.ui-dialog-content
#recipient-dialog
.treelist
li
> a:before,
.ui-dialog:has(> .ui-dialog-content #recipient-dialog)
.ui-dialog-content
#recipient-dialog
.contactlist
li
> a:before {
margin-right: 0.6rem !important;
color: #737677;
}
.ui-dialog:has(> .ui-dialog-content #recipient-dialog)
.ui-dialog-content
#recipient-dialog
.pagenav {
background: transparent;
border-top: 1px solid #d4dbde;
padding: 0.5rem 0.25rem 0;
margin: 0;
display: flex;
align-items: center;
gap: 0.25rem;
}
.ui-dialog:has(> .ui-dialog-content #recipient-dialog)
.ui-dialog-content
#recipient-dialog
.pagenav
a {
color: #737677;
padding: 0.25rem 0.4rem;
border-radius: 0.25rem;
text-decoration: none;
line-height: 1;
}
.ui-dialog:has(> .ui-dialog-content #recipient-dialog)
.ui-dialog-content
#recipient-dialog
.pagenav
a:before {
margin: 0 !important;
font-size: 0.85rem;
}
.ui-dialog:has(> .ui-dialog-content #recipient-dialog)
.ui-dialog-content
#recipient-dialog
.pagenav
a:hover,
.ui-dialog:has(> .ui-dialog-content #recipient-dialog)
.ui-dialog-content
#recipient-dialog
.pagenav
a:focus {
background-color: rgba(0, 0, 0, 0.06);
color: #2c363a;
}
.ui-dialog:has(> .ui-dialog-content #recipient-dialog)
.ui-dialog-content
#recipient-dialog
.pagenav
a.disabled {
opacity: 0.5;
cursor: not-allowed;
}
.ui-dialog:has(> .ui-dialog-content #recipient-dialog)
.ui-dialog-content
#recipient-dialog
.pagenav
.pagenav-text,
.ui-dialog:has(> .ui-dialog-content #recipient-dialog)
.ui-dialog-content
#recipient-dialog
.pagenav
input {
color: #737677;
font-size: 0.775rem;
}
.ui-dialog:has(> .ui-dialog-content #recipient-dialog) .ui-dialog-buttonpane {
background: transparent;
border-top: 1px solid #f1f3f4;
padding: 0.85rem 1.5rem 1.75rem;
margin: 0.5rem 0 0;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
}
.ui-dialog:has(> .ui-dialog-content #recipient-dialog)
.ui-dialog-buttonpane
.ui-dialog-buttonset {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
float: none !important;
}
.ui-dialog:has(> .ui-dialog-content #recipient-dialog)
.ui-dialog-buttonpane
.ui-dialog-buttonset
button {
border-radius: 0.5rem;
padding: 0.55rem 1.5rem;
font-weight: 700;
font-size: 0.875rem;
min-width: 6.5rem;
margin: 0 !important;
box-shadow: none;
transition:
background-color 120ms ease,
color 120ms ease,
border-color 120ms ease;
}
.ui-dialog:has(> .ui-dialog-content #recipient-dialog)
.ui-dialog-buttonpane
.ui-dialog-buttonset
button.cancel {
background: #dc2626;
color: #fff;
border: 1px solid #dc2626;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.ui-dialog:has(> .ui-dialog-content #recipient-dialog)
.ui-dialog-buttonpane
.ui-dialog-buttonset
button.cancel:hover {
background: #ef4444;
border-color: #ef4444;
}
.ui-dialog:has(> .ui-dialog-content #recipient-dialog)
.ui-dialog-buttonpane
.ui-dialog-buttonset
button.mainaction {
background: #090A0B;
color: #fff;
border: 1px solid #090A0B;
}
.ui-dialog:has(> .ui-dialog-content #recipient-dialog)
.ui-dialog-buttonpane
.ui-dialog-buttonset
button.mainaction:hover {
background: #283134;
border-color: #283134;
}
/**
* Roundcube Webmail styles for the Elastic skin
*
* Copyright (c) The Roundcube Dev Team
*
* The contents are subject to the Creative Commons Attribution-ShareAlike
* License. It is allowed to copy, distribute, transmit and to adapt the work
* by keeping credits to the original authors in the README.md file.
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
*/
/*** Dialogs and popovers ***/
.popupmenu {
display: none;
padding: 0;
min-width: 180px;
height: 100%;
}
.popupmenu li > a {
width: 100%;
}
.popupmenu.propform {
overflow: hidden;
padding: 0.25rem;
}
.popupmenu.simplelist {
min-width: 80px;
}
.popup.justified {
display: flex;
justify-content: space-around;
}
.popover-body {
padding: 0;
overflow-x: hidden;
}
.popover-body > .popupmenu {
display: block !important;
}
.popover {
background-color: #fff;
border: 1px solid hsl(220, 13%, 91%);
border-radius: 0.5rem;
box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.popover .popover-body {
padding: 0.25rem;
}
.popover .menu.listing {
margin: 0;
padding: 0;
list-style: none;
}
.popover .menu.listing li {
display: block;
height: auto;
text-align: left;
}
.popover .menu.listing li.spacer,
.popover .menu.listing li.separator {
display: none;
}
.popover .menu.listing li.separator.show {
display: block;
height: 1px;
background-color: hsl(220, 13%, 91%);
margin: 0.25rem 0;
padding: 0;
}
.popover .menu.listing li a {
display: flex;
align-items: center;
gap: 0.875rem;
width: 100%;
line-height: 1.25rem;
font-size: 0.875rem;
padding: 0.5rem 0.75rem;
border-radius: 0.5rem;
color: hsl(240, 10%, 3.9%);
text-decoration: none;
cursor: pointer;
transition:
background-color 0.15s ease,
color 0.15s ease;
}
.popover .menu.listing li a:before {
line-height: inherit;
height: inherit !important;
margin: 0 !important;
float: none !important;
width: 1em !important;
min-width: 1em;
color: hsl(220, 8.9%, 46.1%);
}
.popover .menu.listing li a:not(.disabled):hover,
.popover .menu.listing li a:not(.disabled):focus {
background-color: hsl(220, 14.3%, 95.9%);
color: hsl(240, 10%, 3.9%);
outline: none;
}
.popover .menu.listing li a:not(.disabled):hover:before,
.popover .menu.listing li a:not(.disabled):focus:before {
color: hsl(240, 10%, 3.9%);
}
.popover .menu.listing li a.disabled {
opacity: 0.5;
cursor: not-allowed;
}
html.dark-mode .popover {
background-color: hsl(240, 10%, 3.9%);
border-color: hsl(240, 3.7%, 15.9%);
}
html.dark-mode .popover .menu.listing li.separator.show {
background-color: hsl(240, 3.7%, 15.9%);
}
html.dark-mode .popover .menu.listing li a {
color: hsl(0, 0%, 98%);
}
html.dark-mode .popover .menu.listing li a:before {
color: hsl(240, 5%, 64.9%);
}
html.dark-mode .popover .menu.listing li a:not(.disabled):hover,
html.dark-mode .popover .menu.listing li a:not(.disabled):focus {
background-color: hsl(240, 3.7%, 15.9%);
color: hsl(0, 0%, 98%);
}
html.dark-mode .popover .menu.listing li a:not(.disabled):hover:before,
html.dark-mode .popover .menu.listing li a:not(.disabled):focus:before {
color: hsl(0, 0%, 98%);
}
.popover {
box-shadow: 3px 3px 5px #f1f3f4;
border-color: #d4dbde;
padding: 0;
z-index: 1300;
}
.popover .popover-header {
display: none;
}
@media screen and (min-width: 769px) {
.popover .listing li:first-child {
border-radius: 0.25rem 0.25rem 0 0;
}
.popover .listing li:last-child {
border-bottom-right-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
}
.popover .listing ul.rounded-0 > li {
border-radius: 0;
}
}
html.layout-small .popover:not(.select-menu),
html.layout-phone .popover:not(.select-menu) {
margin: 0 !important;
padding: 0;
right: 0;
left: initial !important;
bottom: 0;
top: 0;
width: 272px;
transform: none !important;
border-radius: 0;
border: 0;
display: flex;
flex-direction: column;
box-shadow: none;
}
html.layout-small .popover:not(.select-menu) div.arrow,
html.layout-phone .popover:not(.select-menu) div.arrow {
display: none;
}
html.layout-small .popover:not(.select-menu) .listing li:last-child,
html.layout-phone .popover:not(.select-menu) .listing li:last-child {
border-bottom: 1px solid #f1f3f4;
}
html.layout-small .popover-overlay,
html.layout-phone .popover-overlay {
z-index: 1299;
background-color: rgba(44, 54, 58, 0.5);
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
html.layout-small .popover-header,
html.layout-phone .popover-header {
display: block;
border-radius: 0;
border: 0;
padding: 0 0.5em;
height: 58px;
min-height: 58px;
line-height: 58px;
font-size: 16px;
color: #fff;
background-color: #002252;
}
html.layout-small .popover-header:before,
html.layout-phone .popover-header:before {
display: none;
}
html.layout-small .popover-header a,
html.layout-phone .popover-header a {
display: inline-block;
width: 100%;
color: #fff;
}
html.layout-small .popover-body > *,
html.layout-phone .popover-body > * {
max-height: 100% !important;
}
html.touch .popover .listing li a {
line-height: 47px;
font-size: 16px;
padding: 0 0.5em;
}
html.touch .popover .listing li a:before {
float: left;
}
.select-menu {
max-width: initial;
margin: 0;
height: auto;
z-index: 1301;
box-shadow: none;
}
.select-menu .popover-header {
border-radius: 0.25rem 0.25rem 0 0 !important;
}
.select-menu .listing li a {
padding-left: 0.25rem;
outline: 0;
}
.select-menu .listing li:last-child {
border-bottom-right-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
}
.select-menu.inline .listing li {
padding-right: 0.5rem;
}
.select-menu.inline .listing li:first-child {
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
}
/** PGP Key search/import dialog **/
.pgpkeyimport div.key {
position: relative;
padding: 0.5rem 0;
}
.pgpkeyimport div.key.revoked,
.pgpkeyimport div.key.disabled {
color: #737677;
}
.pgpkeyimport div.key label {
display: inline-block;
margin-right: 0.5em;
margin-bottom: 0;
}
.pgpkeyimport div.key label:after {
content: ":";
}
.pgpkeyimport div.key label.keyid {
display: none;
}
.pgpkeyimport div.key label + a,
.pgpkeyimport div.key label + span {
line-height: 2.6rem;
margin-right: 1em;
white-space: nowrap;
text-decoration: none;
}
.pgpkeyimport div.key label.keyid + a {
font-weight: bold;
}
.pgpkeyimport div.key label.keyid + a:before {
content: "\f084";
}
.pgpkeyimport ul.uids {
margin: 0;
padding: 0;
}
.pgpkeyimport li.uid {
border: 0;
padding: 0.25rem 0 0 1.5em;
line-height: 1.5rem !important;
list-style-type: none;
}
.pgpkeyimport li.uid:before {
content: "\f007";
opacity: 0.25;
font-size: 1em;
line-height: 1.25;
}
.pgpkeyimport button.importkey {
position: absolute;
top: 0.5rem;
right: 0;
}
.pgpkeyimport button:disabled {
display: none;
}
/**
* Roundcube Webmail styles for the Elastic skin
*
* Copyright (c) The Roundcube Dev Team
*
* The contents are subject to the Creative Commons Attribution-ShareAlike
* License. It is allowed to copy, distribute, transmit and to adapt the work
* by keeping credits to the original authors in the README.md file.
* See http://creativecommons.org/licenses/by-sa/3.0/ for details.
*/
/*** Toolbar widget ***/
.menu {
margin: 0;
text-align: center;
white-space: nowrap;
}
.menu a {
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none;
}
.menu a:before {
content: "\00a0";
}
.menu a:hover,
.menu a:focus {
outline: 0;
}
.menu a:not(.disabled):focus,
.menu a:not(.disabled):hover {
background-color: #f5f5f5;
}
.menu.toolbar li {
display: inline-block;
height: 58px;
}
.menu.toolbar a {
color: #2c363a;
display: block;
float: left;
border: 0 !important;
height: 58px;
min-width: 3.2rem;
max-width: 6rem;
width: auto;
padding: 0.45rem;
line-height: 1.5;
cursor: pointer;
font-size: 1rem;
text-align: center;
}
.menu.toolbar a:before {
height: 1.75rem !important;
float: none !important;
width: auto !important;
margin: 0 !important;
}
.menu.toolbar a.selected {
color: #41b849;
}
.menu.toolbar > .spacer {
width: 1em;
}
.menu.toolbar .dropbutton:not(.disabled):hover {
background-color: #f5f5f5;
}
.menu.toolbar .dropbutton a.dropdown {
padding: 0 0.3rem;
}
.menu.toolbar .dropbutton a.dropdown:before {
line-height: 58px;
}
.menu.toolbar .dropbutton a.dropdown:hover {
background-color: #e9e9e9;
}
.menu span.inner {
font-size: 90%;
font-weight: normal;
}
.menu .dropbutton {
display: inline-block;
}
.menu .dropbutton a.dropdown {
font-size: 75%;
min-width: 0;
}
html.ie11 .menu .dropbutton a.dropdown:before {
font-size: 80%;
}
.menu .dropbutton a.dropdown span.inner {
display: none;
}
.menu .dropbutton a:first-child {
padding-right: 0;
}
/**
* Compose page toolbar (#toolbar-menu / #messagetoolbar).
*
* The original Elastic skin expected FontAwesome `::before` glyphs that
* filled the toolbar item vertically. We now swap in Heroicon SVGs
* (inline `