- a mesma
causa da "faixa" que corrigimos no modo escuro (ver gladiator-dark.css):
a borda era calculada pra combinar com #dce0f5, mas o fundo real
exibido era outro (#ebf9ff), daí a faixa continuar visivel mesmo depois
do primeiro ajuste. Forcamos o fundo do | tambem, pra fechar o
circulo. */
#messagelist tbody tr.selected td,
#messagelist tbody tr.focused td {
background-color: #dce0f5 !important;
border-bottom-color: #dce0f5 !important;
}
#messagelist tbody tr.unread .subject,
#messagelist tbody tr.unread .fromto {
font-weight: 600;
color: #1e1e2e !important;
}
/* O remetente ja fica sempre em negrito (regra acima), entao isso sozinho
nao bastava pra diferenciar lido/nao lido - a cor do remetente nao lido
fica na cor de marca (azul), bem distinta do remetente lido (cinza escuro
neutro), pra dar pra notar de relance ao rolar a lista. */
#messagelist tbody tr.unread td.subject span.fromto {
color: #0B119C !important;
}
/* Bolinha de nao lido um pouco maior, mais facil de notar */
#messagelist td.subject span.msgicon.status.unread:before {
font-size: 0.75rem !important;
}
/* Toolbar */
#layout-topbar,
.toolbar-container {
background-color: #fafafa !important; /* iCloud-style near-white */
border-bottom: 1px solid #ececef;
}
.toolbar .button,
.toolbar-list .button {
border-radius: 8px;
color: #4c4f69 !important;
}
.toolbar .button:hover,
.toolbar-list .button:hover {
background-color: #dce0e8 !important;
}
/* Primary buttons across the app */
.button.mainaction,
button.mainaction,
.formbuttons button.mainaction {
background-color: #0B119C !important;
color: #eff1f5 !important;
border-radius: 8px !important;
border: none !important;
}
.button.mainaction:hover,
button.mainaction:hover {
background-color: #080C78 !important;
}
/* Taskmenu: Catppuccin Latte accents */
#taskmenu {
background: #dce0e8 !important; /* Crust, redundant safety */
}
#taskmenu a {
color: #4c4f69 !important; /* Text */
}
#taskmenu a.selected,
#taskmenu a.selected:hover,
#taskmenu a:hover,
#taskmenu a:focus {
background-color: #ccd0da !important; /* Surface0 */
color: #0B119C !important;
}
/* Icons for settings/theme/about/manual/logout are injected as inline SVG
(.gladiator-btn-icon) by gladiator-app-grid.js -- CSS mask-image icons
were not rendering reliably in this environment, so we dropped that
approach for these buttons. compose/mail/contacts keep their own icons
from the base skin/menu markup. */
/* Kill any base-skin font-icon/pseudo-element glyph on these buttons so it
can't render alongside the injected SVG (was showing as a duplicate icon). */
#taskmenu a.settings:before,
#taskmenu a.theme:before,
#taskmenu a.about:before,
#taskmenu a.manual:before,
#taskmenu a.logout:before {
content: none !important;
display: none !important;
}
#taskmenu a .gladiator-btn-icon {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
color: #4c4f69; /* Text */
}
#taskmenu a .gladiator-btn-icon svg {
width: 20px;
height: 20px;
}
#taskmenu a.logout .gladiator-btn-icon,
#taskmenu a.logout,
#taskmenu a.logout:hover {
color: #d20f39 !important; /* Red */
}
/* Scrollbar accent */
#layout-sidebar ::-webkit-scrollbar-thumb,
#layout-list ::-webkit-scrollbar-thumb {
background-color: #bcc0cc; /* Surface1 */
border-radius: 8px;
}
/* Logout item inside the message toolbar's 'Mais' dropdown */
#message-menu a.logout {
color: #d20f39 !important; /* Red */
}
/* Horizontal top navigation bar (Alpha-inspired layout) */
#layout {
padding-top: 56px !important;
box-sizing: border-box !important;
}
#layout-menu {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
height: 56px !important;
max-height: 56px !important;
min-height: 56px !important;
z-index: 500 !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
overflow-x: auto !important;
overflow-y: hidden !important;
border-radius: 0 !important;
box-shadow: 0 2px 10px rgba(76, 79, 105, 0.12);
}
#layout-menu .popover-header {
display: flex !important;
align-items: center !important;
height: 100% !important;
padding: 0 16px !important;
flex: none !important;
border-right: 1px solid #ccd0da; /* Surface0 */
}
#layout-menu .popover-header img {
max-height: 30px !important;
max-width: 30px !important;
padding: 0 !important;
}
#layout-menu .popover-header a.cancel {
display: none !important;
}
#taskmenu {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
height: 100% !important;
flex: 1 1 auto !important;
min-width: 0;
}
#taskmenu .action-buttons {
display: flex !important;
height: 100% !important;
}
#taskmenu > a,
#taskmenu .action-buttons a,
#gladiator-extra-popup a {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 8px;
height: 100% !important;
width: auto !important;
max-width: none !important;
min-width: unset !important;
padding: 0 14px !important;
color: #4c4f69 !important; /* Text */
text-decoration: none;
white-space: nowrap !important;
overflow: visible !important;
text-overflow: clip !important;
}
#gladiator-extra-toggle {
display: none !important;
}
#gladiator-extra-popup {
display: flex !important;
flex-direction: row !important;
position: static !important;
height: 100% !important;
width: auto !important;
margin-left: auto !important;
background: none !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
}
#gladiator-extra-popup a .inner,
#taskmenu a .inner {
display: inline !important;
font-size: 0.85rem;
}
#gladiator-extra-popup a:before,
#taskmenu a:before {
position: static !important;
float: none !important;
margin: 0 !important;
}
#taskmenu a.logout,
#gladiator-extra-popup a.logout {
color: #d20f39 !important; /* Red */
}
/* Right-side widgets panel (Alpha-inspired: weather / quote / news) */
html.gladiator-widgets-active #layout {
padding-right: 260px !important;
}
#gladiator-widgets {
position: fixed;
top: 56px;
right: 0;
bottom: 0;
width: 260px;
overflow-y: auto;
background-color: #e6e9ef; /* Mantle */
border-left: 1px solid #ccd0da; /* Surface0 */
padding: 14px;
box-sizing: border-box;
z-index: 50;
font-family: inherit;
}
#gladiator-widgets .gw-card {
background: #eff1f5; /* Base */
border: 1px solid #ccd0da; /* Surface0 */
border-radius: 10px;
padding: 14px;
margin-bottom: 14px;
}
#gladiator-widgets .gw-card h4 {
margin: 0 0 10px;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #6c6f85; /* Subtext0 */
font-weight: 700;
}
#gladiator-widgets .gw-body {
font-size: 0.85rem;
color: #4c4f69; /* Text */
}
#gladiator-widgets .gw-weather-main {
font-size: 1.8rem;
font-weight: 700;
color: #0B119C; /* Blue */
}
#gladiator-widgets .gw-weather-desc {
display: block;
font-size: 0.78rem;
font-weight: 400;
color: #4c4f69;
margin-top: 2px;
}
#gladiator-widgets .gw-weather-details,
#gladiator-widgets .gw-weather-loc {
font-size: 0.72rem;
color: #6c6f85;
margin-top: 6px;
}
#gladiator-widgets .gw-quote-text {
font-style: italic;
margin: 0 0 8px;
line-height: 1.4;
}
#gladiator-widgets .gw-quote-author {
text-align: right;
font-size: 0.72rem;
color: #6c6f85;
margin: 0;
}
#gladiator-widgets .gw-news-list {
list-style: none;
margin: 0;
padding: 0;
}
#gladiator-widgets .gw-news-list li {
margin-bottom: 8px;
padding-bottom: 8px;
border-bottom: 1px solid #ccd0da;
}
#gladiator-widgets .gw-news-list li:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
#gladiator-widgets .gw-news-list a {
color: #4c4f69;
text-decoration: none;
font-size: 0.78rem;
line-height: 1.4;
}
#gladiator-widgets .gw-news-list a:hover {
color: #0B119C;
}
@media screen and (max-width: 1100px) {
#gladiator-widgets {
display: none !important;
}
html.gladiator-widgets-active #layout {
padding-right: 0 !important;
}
}
/* Tips popup */
#gladiator-tips {
position: fixed;
right: 20px;
bottom: 20px;
width: 280px;
background: #eff1f5; /* Base */
border: 1px solid #ccd0da; /* Surface0 */
border-radius: 14px;
box-shadow: 0 8px 24px rgba(76, 79, 105, 0.18);
padding: 18px 20px 16px;
z-index: 100010;
animation: gt-in 0.25s ease;
}
@keyframes gt-in {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
#gladiator-tips .gt-close {
position: absolute;
top: 8px;
right: 10px;
background: none;
border: none;
font-size: 20px;
line-height: 1;
cursor: pointer;
color: #6c6f85; /* Subtext0 */
padding: 4px;
}
#gladiator-tips .gt-close:hover {
color: #4c4f69; /* Text */
}
#gladiator-tips .gt-icon {
font-size: 22px;
margin-bottom: 6px;
}
#gladiator-tips h4 {
margin: 0 0 6px;
font-size: 12.5px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #0B119C; /* Blue */
font-weight: 700;
}
#gladiator-tips p {
margin: 0;
font-size: 13.5px;
color: #4c4f69; /* Text */
line-height: 1.5;
}
@media screen and (max-width: 600px) {
#gladiator-tips {
left: 12px;
right: 12px;
bottom: 12px;
width: auto;
}
}
/* Always show the message-list selection checkbox column */
#messagelist td.selection,
#messagelist th.selection {
display: table-cell !important;
}
/* Fase 3: menu de Configuracoes em grade (estilo Alpha) */
body.task-settings #settings-menu {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 12px;
padding: 16px !important;
list-style: none;
}
body.task-settings #settings-menu > li {
margin: 0 !important;
}
body.task-settings #settings-menu > li > a {
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
height: auto !important;
padding: 18px 8px !important;
border-radius: 14px;
background-color: #e6e9ef; /* Mantle */
color: #4c4f69 !important; /* Text */
text-align: center;
white-space: normal;
transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
body.task-settings #settings-menu > li > a:before {
position: static !important;
display: flex;
align-items: center;
justify-content: center;
margin: 0 !important;
width: 44px;
height: 44px;
font-size: 1.3rem;
border-radius: 50%;
background-color: #dce0f5;
color: #0B119C; /* Blue */
}
body.task-settings #settings-menu > li > a .inner {
font-size: .8rem;
font-weight: 500;
}
body.task-settings #settings-menu > li > a:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(76, 79, 105, 0.15);
background-color: #dce0f5;
}
/* --- App switcher grid, Titan-style (icon+caret next to the logo) --- */
#layout-menu {
overflow: visible !important;
}
#layout-menu .popover-header {
position: relative;
}
#gladiator-app-caret {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
margin-left: 4px;
padding: 0;
border: none;
background: transparent;
/* Navy - mesma cor de destaque usada no resto do app (hover/selecao/botoes).
O fundo aqui atras do logo e claro (#dce0e8, "Crust"), nao escuro, entao
da pra usar a cor de destaque direto sem precisar de um chip/fundo
proprio pra garantir contraste. */
color: #0B119C;
cursor: pointer;
border-radius: 4px;
}
#gladiator-app-caret:hover {
background-color: rgba(11, 17, 156, 0.12);
}
/* Modo escuro: o fundo atras do logo fica quase preto (#11111b), navy puro
ficaria sem contraste nenhum - usa o azul de destaque do tema escuro
(#89b4fa, mesmo tom ja usado noutros lugares do app em dark mode). */
html.dark-mode #gladiator-app-caret {
color: #89b4fa;
}
html.dark-mode #gladiator-app-caret:hover {
background-color: rgba(137, 180, 250, 0.16);
}
/* Calendario: pedido do usuario pra tirar da fileira principal de abas e
deixar só dentro do menu "Mudar de app" (#gladiator-app-grid, que ja
tinha o Calendario listado em paralelo, de forma redundante). A pagina
em si (?_task=calendar) continua funcionando normalmente, so o atalho
direto na barra que some. */
#taskmenu a.button-calendar.calendar {
display: none !important;
}
#gladiator-app-grid {
position: absolute;
top: calc(100% + 8px);
left: 0;
display: grid;
grid-template-columns: repeat(3, 72px);
gap: 4px;
background: #ffffff;
border: 1px solid #ccd0da;
border-radius: 12px;
box-shadow: 0 12px 32px rgba(76, 79, 105, 0.2);
padding: 12px;
z-index: 600;
}
#gladiator-app-grid.hidden {
display: none;
}
/* The base skin hides every inside .popover-header by default
(#layout-menu .popover-header a{display:none!important}); beat that
specificity (2 IDs) to keep these tiles visible. */
#layout-menu #gladiator-app-grid .gladiator-app-tile {
display: flex !important;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 10px 4px;
border-radius: 10px;
text-decoration: none !important;
color: #4c4f69 !important; /* Text */
}
.gladiator-app-tile:hover,
.gladiator-app-tile.gladiator-app-active {
background-color: #eff1f5; /* Base */
}
.gladiator-app-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 10px;
}
.gladiator-app-icon-mail {
background-color: #0B119C; /* Blue */
}
.gladiator-app-icon-calendar {
background-color: #fe640b; /* Peach */
}
.gladiator-app-icon-contacts {
background-color: #8839ef; /* Mauve */
}
.gladiator-app-label {
font-size: 0.75rem;
text-align: center;
}
/* --- Right-side utility buttons: icon-only, native tooltip via title attr --- */
#taskmenu a.settings .inner,
#taskmenu a.theme .inner,
#taskmenu a.about .inner,
#taskmenu a.manual .inner,
#taskmenu a.logout .inner {
display: none !important;
}
#taskmenu a.settings,
#taskmenu a.theme,
#taskmenu a.about,
#taskmenu a.manual,
#taskmenu a.logout {
padding: 0 12px !important;
}
/* --- Big-attachment announcement popup --- */
#gladiator-announcement-overlay {
position: fixed;
inset: 0;
background: rgba(30, 30, 46, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 9000;
}
#gladiator-announcement {
position: relative;
background: #ffffff;
border-radius: 16px;
box-shadow: 0 20px 50px rgba(30, 30, 46, 0.25);
padding: 32px 28px 24px;
width: 360px;
max-width: 90vw;
text-align: center;
}
#gladiator-announcement .ga-icon {
font-size: 2.2rem;
margin-bottom: 8px;
}
#gladiator-announcement h3 {
margin: 0 0 12px;
font-size: 1.15rem;
color: #4c4f69; /* Text */
}
#gladiator-announcement p {
margin: 0 0 20px;
font-size: 0.9rem;
line-height: 1.5;
color: #6c6f85; /* Subtext0 */
}
#gladiator-announcement .ga-ok {
background-color: #0B119C; /* Blue */
color: #ffffff;
border: none;
border-radius: 8px;
padding: 10px 24px;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
}
#gladiator-announcement .ga-ok:hover {
background-color: #080C78;
}
#gladiator-announcement .ga-close {
position: absolute;
top: 10px;
right: 12px;
border: none;
background: none;
font-size: 1.3rem;
line-height: 1;
color: #9ca0b0; /* Overlay0 */
cursor: pointer;
}
#gladiator-announcement .ga-close:hover {
color: #4c4f69;
}
body.task-settings #settings-menu > li.selected > a,
body.task-settings #settings-menu > li > a.selected {
background-color: #dce0f5;
box-shadow: inset 0 0 0 2px #0B119C;
}
#gladiator-announcement .ga-action {
display: inline-block;
background-color: transparent;
color: #0B119C; /* Blue */
border: 1px solid #0B119C;
border-radius: 8px;
padding: 9px 20px;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
text-decoration: none;
margin-right: 10px;
}
#gladiator-announcement .ga-action:hover {
background-color: #dce0f5; /* Crust-ish */
}
/* Numero de nao lidos sem fundo colorido, em preto negrito */
#mailboxlist .unreadcount {
background: transparent !important;
color: #000000 !important;
font-weight: 700 !important;
box-shadow: none !important;
}
/* Modo leitura (estilo Gmail): ao abrir um e-mail em telas largas, so a
lista de mensagens some - a barra de pastas continua visivel o tempo
todo (igual o menu a esquerda do Gmail, que nunca desaparece), e a area
de leitura ocupa o espaco que sobra, com um botao "voltar" pra retornar
a lista. */
@media screen and (min-width: 769px) {
body.gladiator-reading #layout-list {
display: none !important;
}
body.gladiator-reading #layout-content {
flex: 1 1 auto !important;
}
body.gladiator-reading #layout-content > .header > a.back-list-button {
display: inline-block !important;
}
}
/* Sem nenhum e-mail aberto, a area de leitura nao deveria aparecer (igual
o Gmail): fica so a lista, usando a largura toda. "task-mail.action-none"
e exatamente o estado "caixa de entrada sem mensagem selecionada" que o
proprio Roundcube marca no body - nao mexe em outras telas (composer,
contatos, configuracoes etc.) nem no estado de leitura.
Isso vale mesmo com uma selecao de checkbox ativa - excluir/arquivar/
marcar em massa agora usam os botoes proprios injetados na barra da
lista (.gladiator-quick-actions, logo abaixo), entao nao precisamos mais
abrir #layout-content so pra mostrar a barra de acoes original. */
@media screen and (min-width: 769px) {
body.task-mail.action-none:not(.gladiator-reading) #layout-content {
display: none !important;
}
body.task-mail.action-none:not(.gladiator-reading) #layout-list {
flex: 1 1 100% !important;
max-width: 100% !important;
}
}
/* Botoes de acao rapida (excluir/arquivar/spam) pra quando uma ou mais
mensagens estao marcadas pelo checkbox na lista, sem nenhuma aberta pra
leitura - injetados pelo gladiator-messagelist.js em #messagelist-header
(o cabecalho da coluna da lista). So ficam visiveis havendo selecao. */
/* Nomes (Excluir/Arquivo/Spam) permanentes em qualquer largura de tela -
nao viram mais icone-so no celular. Isso so da certo porque, com uma
selecao ativa, o titulo da pasta (".header-title") some do cabecalho
(ver regra logo abaixo, "body.gladiator-has-selection #layout-list >
.header > .header-title"), sobrando uma faixa livre pros 3 botoes -
confirmado pelo usuario ("temos uma faixa toda disponivel"). Cada
botao tem uma cor de destaque propria (fundo claro tingido, nao so
texto colorido) pra ficar facil de distinguir a acao num relance,
tipo um chip/pill, em vez de botoes de texto puro iguais aos outros
icones do cabecalho. */
/* Ficam SEMPRE visiveis, mesmo sem nenhuma selecao (pedido do usuario -
antes so apareciam ao selecionar, o que fazia o cabecalho "pular" de
layout toda vez). Sem selecao, ficam com visual desativado (ver
".gladiator-quick-actions a.button" + a variante
"body.gladiator-has-selection" mais abaixo) em vez de sumir - evita
clique sem efeito e ainda deixa claro que a funcao existe ali. */
.gladiator-quick-actions {
display: inline-flex;
align-items: center;
gap: 6px;
}
.gladiator-quick-actions a.button {
display: inline-flex !important;
align-items: center;
gap: 5px;
border-radius: 999px;
padding: 0 12px !important;
height: 28px;
font-size: 0.78rem;
font-weight: 700;
text-decoration: none;
cursor: pointer;
white-space: nowrap;
flex: 0 0 auto;
margin: 0 !important;
}
/* O core do Elastic (styles.min.css) tem uma regra generica,
"#layout>div>.header a.button .inner{display:none}", que esconde o
texto de QUALQUER botao de icone dentro de um cabecalho de painel em
telas estreitas (o padrao "so icone" que os outros botoes do
cabecalho - atualizar, pastas, menu - usam de proposito). Isso bate
com #messagelist-header tambem, entao nossos 3 botoes caiam nesse
mesmo padrao sem a gente ter pedido. O usuario quer o nome sempre
visivel nesses 3 especificamente (nao mexe nos outros botoes do
cabecalho) - como aquela regra do core tem ID na selector (bate mais
forte que qualquer coisa nossa baseada so em classe), precisa de
!important aqui pra vencer de verdade, nao só repetir "display:inline"
sem forca. */
.gladiator-quick-actions a.button .inner {
display: inline !important;
}
.gladiator-quick-actions .gladiator-btn-icon {
display: inline-flex;
width: 15px;
height: 15px;
flex-shrink: 0;
}
.gladiator-quick-actions .gladiator-btn-icon svg {
width: 100%;
height: 100%;
}
/* Sem selecao: visual "desativado" neutro pros 3 (mesmo tom pra Excluir/
Arquivo/Spam, sem distinguir cor por acao - so faz sentido destacar
a cor quando a acao de fato vale pra alguma coisa selecionada) e sem
clique (pointer-events:none), pra nao executar nada "no vazio". */
.gladiator-quick-actions a.button {
background-color: #e6e9ef !important;
color: #9ca0b0 !important;
pointer-events: none;
}
/* Com selecao: cor propria por acao, bem destacada, e clicavel. */
body.gladiator-has-selection .gladiator-quick-actions a.button {
pointer-events: auto;
}
body.gladiator-has-selection .gladiator-quick-actions a.button.delete {
background-color: #fce0e4 !important;
color: #d20f39 !important;
}
body.gladiator-has-selection .gladiator-quick-actions a.button.delete:hover {
background-color: #f9ccd3 !important;
}
body.gladiator-has-selection .gladiator-quick-actions a.button.archive {
background-color: #e1e4f7 !important;
color: #0B119C !important;
}
body.gladiator-has-selection .gladiator-quick-actions a.button.archive:hover {
background-color: #ccd1f2 !important;
}
body.gladiator-has-selection .gladiator-quick-actions a.button.junk {
background-color: #fbe6cf !important;
color: #bd6400 !important;
}
body.gladiator-has-selection .gladiator-quick-actions a.button.junk:hover {
background-color: #f7d6ad !important;
}
html.dark-mode .gladiator-quick-actions a.button {
background-color: #313244 !important;
color: #6c7086 !important;
}
html.dark-mode body.gladiator-has-selection .gladiator-quick-actions a.button.delete {
background-color: rgba(243, 139, 168, 0.16) !important;
color: #f38ba8 !important;
}
html.dark-mode body.gladiator-has-selection .gladiator-quick-actions a.button.delete:hover {
background-color: rgba(243, 139, 168, 0.26) !important;
}
html.dark-mode body.gladiator-has-selection .gladiator-quick-actions a.button.archive {
background-color: rgba(137, 180, 250, 0.16) !important;
color: #89b4fa !important;
}
html.dark-mode body.gladiator-has-selection .gladiator-quick-actions a.button.archive:hover {
background-color: rgba(137, 180, 250, 0.26) !important;
}
html.dark-mode body.gladiator-has-selection .gladiator-quick-actions a.button.junk {
background-color: rgba(250, 179, 135, 0.16) !important;
color: #fab387 !important;
}
html.dark-mode body.gladiator-has-selection .gladiator-quick-actions a.button.junk:hover {
background-color: rgba(250, 179, 135, 0.26) !important;
}
/* Os botoes vizinhos aos 3 de acao rapida (pastas, atualizar, "mais
opcoes" - #messagelist-header a.button.icon) sao icones simples do
proprio Elastic, sem nenhum destaque ao passar o mouse, enquanto os 3
novos sao "pilulas" arredondadas com fundo colorido. Ficavam com
linguagem visual destoante dentro da mesma barra (comparado com o
Gmail, onde TODOS os botoes do cabecalho da lista - arquivar, excluir,
marcar, mais opcoes - usam o mesmo padrao: um realce arredondado atras
do icone ao passar o mouse/toque). Pra unificar sem arriscar quebrar o
alvo de clique original (os botoes ocupam a altura toda do cabecalho,
57px, de proposito - bom pra toque), o realce usa um gradiente radial
central em vez de redimensionar o elemento: fica um circulo atras do
icone, do mesmo jeito em qualquer botao, sem precisar mudar largura/
altura reais. Raio pequeno (10px = 20px de diametro) pra caber mesmo
no botao mais estreito (menu "mais opcoes", 25px de largura) sem
cortar nas bordas. */
#messagelist-header a.button.icon:hover {
background: radial-gradient(circle, #eef0f9 0 10px, transparent 10px) no-repeat center;
}
#messagelist-header a.button.icon:active {
background: radial-gradient(circle, #dde1f2 0 10px, transparent 10px) no-repeat center;
}
html.dark-mode #messagelist-header a.button.icon:hover {
background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0 10px, transparent 10px) no-repeat center;
}
html.dark-mode #messagelist-header a.button.icon:active {
background: radial-gradient(circle, rgba(255, 255, 255, 0.14) 0 10px, transparent 10px) no-repeat center;
}
/* Mesmo levantamento, agora no cluster de icones da barra superior
(Configuracoes/Modo escuro/Sobre/Manual/Sair, #taskmenu). Esses botoes
ja tinham uma regra de hover (#taskmenu a:hover), mas ela pinta o
RETANGULO inteiro da celula (44x56 - a mesma celula usada pelas abas
principais "Criar email/E-mail/Contatos..."), sem cantos arredondados -
um terceiro padrao visual diferente tanto dos icones da lista (acima)
quanto dos botoes de busca realocados pra essa mesma barra, que ja
usam "border-radius:50%" no hover (ver regra
"#taskmenu .gladiator-topbar-search a.button:hover" mais acima no
arquivo). Aqui troca so pra esses 5 (nao mexe nas abas principais -
Criar email/E-mail/Contatos/Coliseu/Calendario -, que sao abas de
navegacao mesmo, nao botoes de icone solto, e o preenchimento
retangular ali faz sentido como indicador de aba "selecionada"/"em
foco", igual o Gmail tambem diferencia abas de botoes de icone) pelo
mesmo circulo centralizado atras do icone, pra ficar uma linguagem so
de "botao de icone" em todo o app. Precisa de !important pra vencer a
regra generica "#taskmenu a:hover" (tambem !important, mas com
especificidade menor - so ID+tag, sem classe). */
#taskmenu a.settings:hover, #taskmenu a.settings:focus,
#taskmenu a.theme:hover, #taskmenu a.theme:focus,
#taskmenu a.about:hover, #taskmenu a.about:focus,
#taskmenu a.manual:hover, #taskmenu a.manual:focus,
#taskmenu a.logout:hover, #taskmenu a.logout:focus {
background: radial-gradient(circle, #eef0f9 0 16px, transparent 16px) no-repeat center !important;
color: #0B119C !important;
}
html.dark-mode #taskmenu a.settings:hover, html.dark-mode #taskmenu a.settings:focus,
html.dark-mode #taskmenu a.theme:hover, html.dark-mode #taskmenu a.theme:focus,
html.dark-mode #taskmenu a.about:hover, html.dark-mode #taskmenu a.about:focus,
html.dark-mode #taskmenu a.manual:hover, html.dark-mode #taskmenu a.manual:focus,
html.dark-mode #taskmenu a.logout:hover, html.dark-mode #taskmenu a.logout:focus {
background: radial-gradient(circle, rgba(137, 180, 250, 0.16) 0 16px, transparent 16px) no-repeat center !important;
color: #89b4fa !important;
}
/* No celular o titulo da pasta (".header-title", dentro do cabecalho da
lista) usa flex:1 com margem negativa enorme pra ficar centralizado
(styles/layout.less do proprio skin) - o skin so esconde esse titulo em
telas grandes (regra dele mesmo, so acima de @screen-width-large), entao
no celular ele continua ocupando o espaco todo e espreme nossa barra de
acao rapida a quase nada. Antes so escondiamos com selecao ativa, mas
agora que os 3 botoes ficam SEMPRE visiveis (pedido do usuario), o
titulo precisa ficar escondido sempre tambem - sem isso, o botao
"Spam" ficava cortado fora da area visivel do cabecalho quando nao
havia nenhuma selecao (confirmado: scrollWidth 401px contra 260px de
espaco disponivel). */
#layout-list > .header > .header-title {
display: none;
}
/* O botao "Voltar" (tela de leitura) so mostrava a setinha, sem nenhum
texto - ficava sucinto demais pra ser reconhecido rapido como "voltar
pra lista". O texto ja existe no HTML do skin (span.inner), so estava
escondido pela regra generica de botao-so-com-icone. */
a.button.icon.back-list-button .inner {
display: inline !important;
margin-left: 6px;
font-size: 0.85rem;
font-weight: 600;
}
/* Previa do conteudo embaixo do assunto em cada linha da lista (estilo
Gmail/Outlook) - injetada via JS (gladiator-messagelist.js,
gladiatorBuildListPreviews). td.subject ja e flex com flex-wrap:wrap
(confirmado - sender/data/tamanho/assunto numa linha so), entao um
filho com flex-basis:100% cai sozinho pra uma segunda linha sem
precisar reestruturar o layout existente. */
/* Em telas largas (>=769px, ver bloco @media mais acima neste arquivo),
#messagelist td.subject tem flex-wrap:nowrap de proposito (pra manter
a linha unica original: avatar + remetente + assunto + data, sem
quebrar sob pressao de espaco). Precisamos permitir quebra mesmo
assim, SO pra sobrar espaco pra previa - os 4 itens originais (fromto
190px fixo, date/size auto, subject flex:1 1 auto) continuam cabendo
numa linha so normalmente, entao "wrap" aqui nao devia fazer eles
quebrarem sozinhos; so o item novo (flex-basis:100%, abaixo) e largo
demais de proposito pra caber, e cai pra uma segunda linha. Essa regra
vem DEPOIS do bloco @media no arquivo, entao vence no empate de
especificidade (mesmo seletor, ordem de declaracao decide). */
#messagelist td.subject {
flex-wrap: wrap;
}
#messagelist tbody tr td.subject .gladiator-list-preview {
flex: 1 1 100%;
/* fromto/subject/date/size nessa celula usam "order" flex explicito
(1, 2, 3) - sem isso aqui, um item sem "order" definido (0, o
padrao) pula pra ANTES de todo mundo, nao depois. */
order: 4;
min-width: 0;
color: #9ca0b0; /* Overlay0 */
font-size: 0.78rem;
font-weight: 400;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 1px;
}
/* Painel "Opcoes da pesquisa" (#searchmenu) atualizado: o skin original
usa o azul generico dele (#37beff) nos interruptores e no botao
"Pesquisar" - trocado pelo azul da marca (#0B119C). Tambem deixamos os
campos Tipo/Data/Escopo com visual mais leve (o bloco cinza do rotulo,
"input-group-text", era pesado/quadrado) e um pouco menos de espaco
vertical entre os interruptores, pra parecer menos espalhado. */
/* #searchmenu vira um cartao FLUTUANTE, igual ao Gmail, em vez de um
bloco que esticava (herdava flex:1 de .scroller) e empurrava/ocupava a
coluna da lista inteira. Ele continua no MESMO lugar no DOM (irmao de
#messagelist-content - o core do skin, elastic/ui.js, depende dessa
relacao de irmaos pra mostrar/esconder a lista ao abrir/fechar a
busca), so a aparencia visual muda pra "position:fixed" flutuando
embaixo da barra de busca (agora na barra superior - ver
gladiatorRelocateSearchToTopbar em gladiator-messagelist.js, que
recalcula o "left/top" daqui toda vez que abre). */
#searchmenu {
position: fixed !important;
z-index: 500;
flex: 0 0 auto !important;
width: 420px;
max-width: calc(100vw - 16px);
max-height: calc(100vh - 80px);
overflow-y: auto;
border: 1px solid #ccd0da;
border-radius: 0 0 12px 12px;
box-shadow: 0 16px 36px rgba(32, 34, 58, 0.18);
padding-bottom: 14px !important;
background: #ffffff;
}
#searchmenu .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
border-color: #0B119C !important;
background-color: #0B119C !important;
}
#searchmenu .custom-switch .custom-control-input:focus ~ .custom-control-label::before {
box-shadow: 0 0 0 0.2rem rgba(11, 17, 156, 0.2) !important;
}
#searchmenu .custom-switch .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
border-color: #0B119C !important;
}
#searchmenu .proplist > li {
padding: 3px 0;
}
#searchmenu .proplist .custom-control-label {
color: #4c4f69;
font-size: 0.88rem;
}
#searchmenu .input-group {
border-radius: 8px;
overflow: hidden;
}
#searchmenu .input-group-text {
background: #eff1f5 !important;
border: 1px solid #ccd0da !important;
border-right: none !important;
color: #6c6f85 !important;
font-weight: 600;
font-size: 0.82rem;
}
#searchmenu select.pretty-select {
border: 1px solid #ccd0da !important;
color: #4c4f69 !important;
background-color: #ffffff !important;
}
#searchmenu select.pretty-select:focus {
border-color: #0B119C !important;
box-shadow: 0 0 0 2px rgba(11, 17, 156, 0.15) !important;
}
#searchmenu .formbuttons button.search {
background: #0B119C !important;
border-color: #0B119C !important;
border-radius: 8px !important;
font-weight: 700;
}
#searchmenu .formbuttons button.search:hover {
background: #080C78 !important;
border-color: #080C78 !important;
}
/* Barra de busca movida pra dentro do #taskmenu (barra superior), estilo
Gmail - ver gladiatorRelocateSearchToTopbar em
gladiator-messagelist.js. Pilula branca sobre o fundo cinza-claro da
barra superior, encolhe se faltar espaco (flex-shrink) em vez de
forcar scroll horizontal na barra inteira. */
#taskmenu .gladiator-topbar-search {
display: flex !important;
align-items: center;
height: 36px;
flex: 1 1 160px;
min-width: 100px;
/* 420px deixava um vao vazio grande entre a busca e os icones da
direita em monitores bem largos (testado em 1920px) - 640px
aproveita mais desse espaco sem ficar desproporcional. */
max-width: 640px;
margin: 0 10px;
background: #ffffff;
border: 1px solid #ccd0da;
border-radius: 999px;
padding: 0 4px 0 14px;
box-sizing: border-box;
}
#taskmenu .gladiator-topbar-search form {
flex: 1 1 auto;
display: flex;
align-items: center;
min-width: 0;
}
#taskmenu .gladiator-topbar-search input#mailsearchform {
border: none !important;
background: transparent !important;
outline: none;
box-shadow: none !important;
width: 100%;
min-width: 0;
height: 34px !important;
padding: 0 !important;
font-size: 0.88rem;
color: #4c4f69 !important;
}
#taskmenu .gladiator-topbar-search a.button {
display: flex !important;
align-items: center;
justify-content: center;
width: 28px !important;
height: 28px !important;
padding: 0 !important;
margin: 0 !important;
color: #6c6f85 !important;
flex: 0 0 auto;
}
#taskmenu .gladiator-topbar-search a.button:hover {
background: #eff1f5 !important;
border-radius: 50%;
color: #0B119C !important;
}
#taskmenu .gladiator-topbar-search a.button.reset {
display: none !important;
}
#taskmenu .gladiator-topbar-search.active a.button.reset {
display: flex !important;
}
#taskmenu .gladiator-topbar-search a.button.search {
color: #0B119C !important;
}
/* Ja existia uma regra geral "#taskmenu a .inner { display:inline }"
(mais acima neste arquivo, pro popup "mais opcoes" mostrar o texto dos
itens) - como os botoes da busca agora moram dentro do #taskmenu
tambem, essa regra passou a valer pra eles tambem sem querer,
reaparecendo o texto ("Opções", "Encontrar e-mails" etc.) que o core
do skin esconde por padrao pra esses icones (".searchbar span.inner
{display:none}"). Essa regra aqui e mais especifica, pra vencer sem
precisar mexer na regra generica do menu. */
#taskmenu .gladiator-topbar-search a.button .inner {
display: none !important;
}
#searchmenu .formbuttons button.search:focus {
box-shadow: 0 0 0 0.2rem rgba(11, 17, 156, 0.3) !important;
}
|