:root {
/* Iconițe Lucide (licență ISC) — https://lucide.dev
Folosite ca mask-image ca să moștenească currentColor. */
--am-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
--am-icon-sliders: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='21' x2='14' y1='4' y2='4'/%3E%3Cline x1='10' x2='3' y1='4' y2='4'/%3E%3Cline x1='21' x2='12' y1='12' y2='12'/%3E%3Cline x1='8' x2='3' y1='12' y2='12'/%3E%3Cline x1='21' x2='16' y1='20' y2='20'/%3E%3Cline x1='12' x2='3' y1='20' y2='20'/%3E%3Cline x1='14' x2='14' y1='2' y2='6'/%3E%3Cline x1='8' x2='8' y1='10' y2='14'/%3E%3Cline x1='16' x2='16' y1='18' y2='22'/%3E%3C/svg%3E");
--am-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6a73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
/* ============================================================
ArpyMail — strat Yahoo consolidat (1.5.5)
Se încarcă DUPĂ arpymail.css și preia complet zona de mail:
rail stânga, căutare, header listă, rânduri.
Fiecare proprietate atinsă aici este setată explicit, ca să nu
mai depindă de ce a rămas din blocurile 1.5.0 → 1.5.4.
Login, setări, profil și toast rămân ale fișierului original.
============================================================ */
/* ------------------------------------------------------------
FONT
arpymail.css cere "Yahoo Product Sans VF". yahoo-font-face.css
conține doar un comentariu, fonts/ e gol -> totul cade pe Arial.
Arial are doar 400 și 700, deci weight-urile 450/650 din CSS
rotunjesc și dispare gradația. Vezi fonts/README-INSTALARE.txt.
------------------------------------------------------------ */
:root {
--am-font: "Yahoo Product Sans VF", "Yahoo Sans", Inter, "Helvetica Neue", Arial, sans-serif;
}
@media screen and (min-width: 769px) {
/* ============================================================
1. RAIL STÂNGA — „Primite" acoperit de butonul de compose
------------------------------------------------------------
arpymail.css declară #arpymail-compose-shortcut de trei ori:
L239 static, L1371 absolute/top:8px, L1738 fixed/top:84px.
Câștigă ultima. FAB-ul ocupă 84→138px, iar #folderlist-content
are position:absolute; top:72px, adică 64+72 = 136px pe ecran.
Se suprapun, iar FAB-ul are z-index:1500.
Aici nu mai există nimic poziționat absolut în rail: coloană
flex simplă, deci suprapunerea e imposibilă indiferent de
înălțimea headerului sau de numărul de foldere.
============================================================ */
html[data-arpymail-mail-layout="yahoo"] body.task-mail[class]:not(.action-show):not(.action-compose) #layout-sidebar,
body.task-mail.action-show[class] #layout-sidebar {
display: flex !important;
flex-direction: column !important;
overflow: visible !important;
}
#arpymail-compose-shortcut {
position: static !important;
inset: auto !important;
top: auto !important;
left: auto !important;
z-index: auto !important;
flex: 0 0 auto !important;
width: 54px !important;
height: 54px !important;
margin: 10px auto !important;
display: grid !important;
place-items: center !important;
box-shadow: 0 4px 12px rgba(var(--am-accent-rgb), .16) !important;
}
html[data-arpymail-mail-layout="yahoo"] body.task-mail[class]:not(.action-show):not(.action-compose) #folderlist-content,
body.task-mail.action-show[class] #folderlist-content {
position: static !important;
inset: auto !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
flex: 1 1 auto !important;
min-height: 0 !important;
padding: 0 6px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
#arpymail-sidebar-shortcuts {
position: static !important;
inset: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
flex: 0 0 auto !important;
margin: 4px 7px 8px !important;
}
.arpymail-sidebar-more-menu {
bottom: 64px !important;
}
/* Un singur offset pentru #layout. Înainte: 64px în listă (L1828,
L1981) dar 76px în vizualizarea mesajului (L1714). */
body.task-mail:not(.action-compose) #layout {
top: 64px !important;
height: calc(100% - 64px) !important;
padding-top: 0 !important;
}
/* ============================================================
2. CĂUTARE — iconițele rămase în afara pilulei
------------------------------------------------------------
În Elastic (widgets/menu.less L714+) structura e:
a.unread și a.options sunt FRAȚI ai formularului, nu copii.
Toate regulile din arpymail.css L1401-1465 folosesc
`#mailsearchform .options`, deci nu se potrivesc niciodată —
de aia plicul și chevronul stau goale lângă bara de căutare.
Selectorii corecți pornesc de la .searchbar.
============================================================ */
#arpymail-chrome > .arpymail-global-search-shell {
position: relative !important;
inset: auto !important;
order: 2 !important;
flex: 0 1 690px !important;
width: min(690px, 48vw) !important;
max-width: 690px !important;
height: 42px !important;
min-height: 42px !important;
line-height: normal !important;
margin: 0 10px 0 4px !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
border: 1px solid transparent !important;
border-radius: 22px !important;
background: #ececee !important;
box-shadow: none !important;
overflow: visible !important;
transition: background .15s ease, border-color .15s ease, box-shadow .15s ease !important;
}
html.dark-mode #arpymail-chrome > .arpymail-global-search-shell {
background: #25252c !important;
}
#arpymail-chrome > .arpymail-global-search-shell:hover,
#arpymail-chrome > .arpymail-global-search-shell:focus-within {
background: var(--am-surface) !important;
border-color: rgba(var(--am-accent-rgb), .24) !important;
box-shadow: 0 2px 10px rgba(20, 18, 26, .08) !important;
}
/* Formularul umple pilula; shell-ul poartă fundalul. */
#arpymail-chrome > .arpymail-global-search-shell > form,
#arpymail-chrome > .arpymail-global-search-shell #mailsearchform {
position: relative !important;
inset: auto !important;
flex: 1 1 auto !important;
min-width: 0 !important;
height: 42px !important;
margin: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
#arpymail-chrome > .arpymail-global-search-shell form:before {
height: 42px !important;
line-height: 42px !important;
margin: 0 2px 0 16px !important;
color: var(--am-muted) !important;
}
#arpymail-chrome > .arpymail-global-search-shell input {
height: 40px !important;
padding: 0 8px !important;
background: transparent !important;
color: var(--am-text) !important;
font-family: var(--am-font) !important;
font-size: 14px !important;
}
/* Butoanele native, acum aduse ÎN pilulă. */
#arpymail-chrome > .arpymail-global-search-shell > a {
flex: 0 0 auto !important;
width: 34px !important;
height: 34px !important;
margin: 0 2px 0 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 17px !important;
color: var(--am-muted) !important;
text-decoration: none !important;
}
#arpymail-chrome > .arpymail-global-search-shell > a:before {
width: auto !important;
height: auto !important;
margin: 0 !important;
line-height: 1 !important;
font-size: 15px !important;
}
#arpymail-chrome > .arpymail-global-search-shell > a:hover {
background: var(--am-hover) !important;
color: var(--am-text) !important;
}
#arpymail-chrome > .arpymail-global-search-shell > a.selected {
color: var(--am-accent) !important;
}
/* Ultimul buton capătă rotunjimea Yahoo la hover pe pilulă. */
#arpymail-chrome > .arpymail-global-search-shell:hover > a.options,
#arpymail-chrome > .arpymail-global-search-shell:focus-within > a.options {
background: var(--am-accent) !important;
color: #fff !important;
}
body.task-mail #searchmenu.searchoptions {
position: fixed !important;
z-index: 1700 !important;
top: 60px !important;
left: 60px !important;
width: min(690px, calc(100vw - 120px)) !important;
max-height: min(560px, calc(100vh - 90px)) !important;
padding: 10px !important;
border: 1px solid var(--am-border) !important;
border-radius: 16px !important;
background: var(--am-surface) !important;
color: var(--am-text) !important;
box-shadow: 0 18px 42px rgba(20, 20, 28, .18) !important;
}
/* ============================================================
3. HEADERUL LISTEI — rândul de sus, ca la Yahoo
------------------------------------------------------------
#messagelist-header există în Elastic (mail.html L30) și conține
a.select (checkbox + meniu), listmenulink (.options) și refresh.
Elastic nu îi dă niciun stil propriu — e doar un `.header` generic.
============================================================ */
html[data-arpymail-mail-layout="yahoo"] body.task-mail[class]:not(.action-show):not(.action-compose) #layout-list {
flex: 1 1 0 !important;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
margin: 8px 10px 8px 0 !important;
height: calc(100% - 16px) !important;
border: 1px solid var(--am-border) !important;
border-radius: 16px !important;
background: var(--am-surface) !important;
box-shadow: var(--am-shadow) !important;
overflow: hidden !important;
}
body.task-mail:not(.action-show):not(.action-compose) #messagelist-header {
position: relative !important;
z-index: 12 !important;
inset: auto !important;
flex: 0 0 52px !important;
height: 52px !important;
min-height: 52px !important;
line-height: normal !important;
margin: 0 !important;
padding: 0 14px 0 18px !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
border: 0 !important;
border-bottom: 1px solid var(--am-border) !important;
background: var(--am-surface) !important;
overflow: visible !important;
}
body.task-mail:not(.action-show):not(.action-compose) #messagelist-header .header-title {
display: none !important;
}
body.task-mail:not(.action-show):not(.action-compose) #messagelist-header > .toolbar.menu {
flex: 1 1 auto !important;
width: 100% !important;
display: flex !important;
align-items: center !important;
gap: 4px !important;
}
/* select-all: pătrat + chevron, ca la Yahoo */
body.task-mail:not(.action-show):not(.action-compose) #messagelist-header .toolbar.menu > a.select {
min-width: 46px !important;
height: 34px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 8px !important;
color: var(--am-muted) !important;
}
body.task-mail:not(.action-show):not(.action-compose) #messagelist-header .toolbar.menu > a.select:hover {
background: var(--am-hover) !important;
color: var(--am-text) !important;
}
/* .options (filtru/sortare) se lipește la dreapta */
body.task-mail:not(.action-show):not(.action-compose) #messagelist-header .toolbar.menu > a.options {
margin-left: auto !important;
min-width: 36px !important;
height: 36px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 18px !important;
color: var(--am-muted) !important;
}
body.task-mail:not(.action-show):not(.action-compose) #messagelist-header .toolbar.menu > a.options:hover,
body.task-mail:not(.action-show):not(.action-compose) #messagelist-header > a.refresh:hover {
background: var(--am-hover) !important;
color: var(--am-text) !important;
}
body.task-mail:not(.action-show):not(.action-compose) #messagelist-header > a.refresh {
flex: 0 0 auto !important;
min-width: 36px !important;
height: 36px !important;
margin-left: 4px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 18px !important;
color: var(--am-muted) !important;
}
body.task-mail:not(.action-show):not(.action-compose) #messagelist-header .inner {
position: absolute !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
clip: rect(0,0,0,0) !important;
}
/* Wrapperul gol de searchbar rămas în listă după mutarea căutării. */
#layout-list > .searchbar:empty,
#layout-list .arpymail-search-orphan {
display: none !important;
}
/* ============================================================
4. RÂNDURILE — ellipsis inconsistent
------------------------------------------------------------
Cauza de fond, invizibilă fără sursele Elastic:
lists.less L633 dă `td.subject { display:flex; flex-wrap: wrap }`,
pentru că Elastic afișează rândul pe DOUĂ linii (expeditor+dată
sus, subiect jos, cu span.subject { width:100% }).
arpymail.css forțează o singură linie prin `order`, dar nu anulează
niciodată flex-wrap. Rândurile se rearanjează diferit în funcție de
conținut -> tăierea cade altundeva pe fiecare rând.
În plus: .arpymail-subject-text avea max-width:52% (punct de tăiere
variabil) și padding-right:160px aplicat doar la hover (margine
dreaptă diferită între rândul hover-uit și restul).
============================================================ */
body.task-mail:not(.action-show):not(.action-compose) #messagelist td {
vertical-align: middle !important;
}
body.task-mail:not(.action-show):not(.action-compose) #messagelist td.subject {
flex-wrap: nowrap !important;
align-items: center !important;
padding-right: 148px !important;
}
body.task-mail:not(.action-show):not(.action-compose) #messagelist .arpymail-subject-text {
flex: 0 1 auto !important;
min-width: 3em !important;
max-width: 50% !important;
}
body.task-mail:not(.action-show):not(.action-compose) #messagelist .arpymail-preview-snippet {
flex: 1 1 0 !important;
min-width: 0 !important;
}
/* Data are lățime fixă, altfel marginea dreaptă tot oscilează. */
body.task-mail:not(.action-show):not(.action-compose) #messagelist td.subject > span.date {
flex: 0 0 84px !important;
min-width: 84px !important;
width: 84px !important;
text-align: right !important;
}
/* Steaua nativă Roundcube dispare — o înlocuiește tray-ul Yahoo. */
body.task-mail:not(.action-show):not(.action-compose) #messagelist td.flags,
body.task-mail:not(.action-show):not(.action-compose) #messagelist td.threads {
display: none !important;
}
/* ============================================================
5. TRAY-UL DE ACȚIUNI pe primul rând, fără hover
------------------------------------------------------------
Cauza: selectorul `tr.message:focus-within`. rcube_list_widget dă
focus unei celule din primul rând la inițializarea listei, deci
se aprinde singur. Ordinea contează: întâi stingem focus-within.
============================================================ */
#messagelist tr.message:focus-within .arpymail-row-actions {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
#messagelist tr.message:focus-within td.subject > span.date {
opacity: 1 !important;
}
#messagelist tr.message:focus-within td.subject > span.subject {
padding-right: 0 !important;
}
#messagelist tr.message:hover .arpymail-row-actions {
display: inline-flex !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
#messagelist tr.message:hover td.subject > span.date {
opacity: 0 !important;
}
#messagelist tr.message:hover td.subject > span.subject {
padding-right: 0 !important;
}
/* ============================================================
6. TIPOGRAFIE
Arial nu are 450/500/600/650. Normalizat la 400/500/700.
============================================================ */
body.task-mail:not(.action-show):not(.action-compose) #messagelist td.subject > span.fromto {
font-weight: 500 !important;
}
body.task-mail:not(.action-show):not(.action-compose) #messagelist .arpymail-subject-text,
body.task-mail:not(.action-show):not(.action-compose) #messagelist .arpymail-preview-snippet {
font-weight: 400 !important;
}
body.task-mail:not(.action-show):not(.action-compose) #messagelist tr.unread td.subject > span.fromto,
body.task-mail:not(.action-show):not(.action-compose) #messagelist tr.unread .arpymail-subject-text {
font-weight: 700 !important;
}
} /* /min-width: 769px */
/* ============================================================
7. HEADER PROPRIU DE LISTĂ (vezi scripts/arpymail-header.js)
Elastic ui.js șterge .toolbar.menu din #messagelist-header și o
reconstruiește ca popupmenu, iar a.toolbar-list-button e ascuns
la >=1201px. Headerul nativ rămâne practic gol pe desktop, deci
îl ascundem și folosim unul propriu.
============================================================ */
@media screen and (min-width: 769px) {
body.task-mail:not(.action-show):not(.action-compose) #messagelist-header {
display: none !important;
}
#arpymail-list-header {
flex: 0 0 52px;
height: 52px;
display: flex;
align-items: center;
gap: 2px;
padding: 0 12px 0 18px;
border-bottom: 1px solid var(--am-border);
background: var(--am-surface);
font-family: var(--am-font);
}
#arpymail-list-header .am-spacer { flex: 1 1 auto; }
#arpymail-list-header .am-selectall {
display: inline-flex;
align-items: center;
margin: 0 2px 0 0;
cursor: pointer;
}
#arpymail-list-header input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 16px;
height: 16px;
margin: 0;
border: 1.5px solid #7c7a82;
border-radius: 2px;
background: var(--am-surface);
cursor: pointer;
}
#arpymail-list-header input[type="checkbox"]:checked,
#arpymail-list-header input[type="checkbox"]:indeterminate {
border-color: var(--am-accent);
background-color: var(--am-accent);
}
#arpymail-list-header input[type="checkbox"]:checked {
background-image: linear-gradient(135deg, transparent 43%, #fff 43% 52%, transparent 52%),
linear-gradient(45deg, transparent 32%, #fff 32% 42%, transparent 42%);
}
#arpymail-list-header input[type="checkbox"]:indeterminate {
background-image: linear-gradient(#fff, #fff);
background-size: 8px 2px;
background-position: center;
background-repeat: no-repeat;
}
#arpymail-list-header .am-hdr-btn {
width: 34px;
height: 34px;
display: inline-grid;
place-items: center;
padding: 0;
border: 0;
border-radius: 17px;
background: transparent;
color: var(--am-muted);
cursor: pointer;
}
#arpymail-list-header .am-hdr-btn:hover {
background: var(--am-hover);
color: var(--am-text);
}
#arpymail-list-header .am-hdr-btn svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
#arpymail-list-header .am-caret { width: 22px; }
#arpymail-list-header .am-caret svg { width: 15px; height: 15px; }
#arpymail-list-header .am-count {
margin-left: 8px;
color: var(--am-text);
font-size: 13px;
font-weight: 600;
white-space: nowrap;
}
#arpymail-list-header .am-select-menu {
position: absolute;
z-index: 1650;
top: 46px;
left: 14px;
min-width: 186px;
padding: 6px;
border: 1px solid var(--am-border);
border-radius: 12px;
background: var(--am-surface);
box-shadow: 0 12px 30px rgba(20, 20, 28, .16);
}
#arpymail-list-header .am-select-menu[hidden] { display: none; }
#arpymail-list-header .am-select-menu button {
width: 100%;
min-height: 36px;
display: flex;
align-items: center;
padding: 0 10px;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--am-text);
font: inherit;
font-size: 13px;
text-align: left;
cursor: pointer;
}
#arpymail-list-header .am-select-menu button:hover { background: var(--am-hover); }
/* Bara de căutare: ascundem reset-ul gol, ca la Yahoo. */
#arpymail-chrome > .arpymail-global-search-shell > a.reset { display: none !important; }
#arpymail-chrome > .arpymail-global-search-shell.active > a.reset { display: inline-flex !important; }
}
/* ============================================================
8. CAUZA REALĂ: #layout NU E POZIȚIONAT
------------------------------------------------------------
Elastic (styles.min.css):
#layout { overflow:hidden; display:flex; height:100%; width:100% }
`position` rămâne `static`, deci `top` este IGNORAT de browser.
arpymail.css scrie `top: 64px !important` pe #layout în cinci locuri
(L188, L584, L929, L1714, L1828, L1981) — niciunul nu a avut vreodată
efect. #layout începe la y=0, iar #arpymail-chrome e `position: fixed`
cu înălțime 64px peste el.
Consecințe măsurate în captură:
- butonul de compose stă la y=10..64 → complet sub bara de căutare
(lista de foldere începe la y=74 = 10 marginea + 54 butonul + 10)
- #arpymail-list-header stă la y=8..60 → tot sub bara de căutare
(de aia „headerul listei e sub search")
margin-top funcționează pe un element static, spre deosebire de top.
============================================================ */
@media screen and (min-width: 769px) {
html:not(.iframe) body.task-mail:not(.task-login) #layout,
html:not(.iframe) body.task-settings #layout,
html:not(.iframe) body.task-addressbook #layout {
position: static !important;
top: auto !important;
margin-top: 64px !important;
height: calc(100% - 64px) !important;
}
/* Paginile din iframe (preferințe) nu au chrome propriu. */
html.iframe body #layout {
margin-top: 0 !important;
height: 100% !important;
}
/* ----------------------------------------------------------
9. MENIUL HOVER NATIV ROUNDCUBE peste tray-ul nostru
Elastic injectează