/* ============================================================================
EDUARD GERMIS · File Browser skin custom.css · v1
----------------------------------------------------------------------------
Drop-in skin for File Browser 2.63.12. Targets the REAL rendered class names
of the Vue SPA (header / #listing / .share / #login / .card / nav / #nav …).
The same near-monochrome system as the video-platform admin & the Seafile
skin: a dark workspace lit by ONE accent blue used as punctuation. Anaheim
caps for titles, Poppins for everything else. Token names + values are kept
identical across all three tools so they read as one system.
HOW IT LOADS (native — no fork, no patch):
File Browser sets branding.files = /branding and, if that folder holds a
custom.css, injects UA chrome everywhere (the grey/white boxes). This only
removes default appearance — explicit backgrounds (.button, .btn, .eg-dl-btn,
accent CTAs) are untouched. */
button{appearance:none;-webkit-appearance:none;background:none;border:none;}
/* a calmer scrollbar for the dark workspace */
*{scrollbar-width:thin;scrollbar-color:#34343a transparent;}
*::-webkit-scrollbar{width:10px;height:10px;}
*::-webkit-scrollbar-thumb{background:#2c2c31;border-radius:8px;border:2px solid var(--eg-ink-2);}
*::-webkit-scrollbar-thumb:hover{background:#3a3a40;}
#loading{background:var(--eg-ink-2)!important;}
#loading .spinner>div{background:var(--eg-accent)!important;}
.link,a.link{color:var(--eg-accent);}
/* ========================================================== D · HEADER ====== */
/* FB's default header is 4em (64px) — too cramped for the logo (~10px each side).
96px gives ~26px breathing room each side, matching the spec's "~30px from the top".
body{padding-top}, nav{top}, and .breadcrumbs{top} must all track this value. */
header{
background:rgba(14,14,16,.86);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
border-bottom:1px solid var(--eg-line);
box-shadow:none;
height:96px;
}
/* Push content below our 96px header (overrides FB's body{padding-top:4em=64px}) */
body{padding-top:96px;}
/* FB's / in the share preview box */
.share__box video,.share__box audio,.share__box img{border-radius:10px;}
.share__box__items #listing.list .item{border-top:1px solid var(--eg-line);}
.share__wrong__password{background:#D2675A;border-radius:var(--eg-r-soft);}
/* ============================================= L · FILE-TYPE ICON COLOURS === */
/* All file glyphs recede to a quiet neutral; folders alone carry the accent. */
.file-icons i{color:#9a9da3;}
.file-icons [data-dir="true"] i{color:var(--eg-accent)!important;}
.file-icons [data-type="video"] i,
.file-icons [data-type="image"] i,
.file-icons [data-type="audio"] i{color:#a9adb4;}
/* ============================================= M · SETTINGS / DASHBOARD ===== */
.dashboard #nav .wrapper{border-bottom:2px solid var(--eg-line);}
.dashboard #nav ul{color:var(--eg-fg-2);}
.dashboard #nav ul li:hover{background:var(--eg-panel);}
.dashboard #nav ul li.active{color:var(--eg-accent);border-color:var(--eg-accent);}
.dashboard #nav ul li.active::before{background:var(--eg-accent);opacity:.1;}
table tr{border-bottom:1px solid var(--eg-line);}
table th{color:var(--eg-fg);font-family:var(--eg-text);font-weight:600;
text-transform:uppercase;letter-spacing:.08em;font-size:.78em;}
table td{color:var(--eg-fg-2);}
.dashboard p label{color:var(--eg-fg-2);}
/* ================================================ N · PREVIEWER (lightbox) == */
#previewer{background-color:#08080a;}
#previewer header{background:none;border:0;height:auto;}
#previewer header title{font-family:var(--eg-display);text-transform:uppercase;letter-spacing:.015em;}
#previewer>button{background-color:rgba(20,20,22,.6);border:1px solid var(--eg-line-2);}
#previewer>button:hover{background-color:rgba(0,154,189,.22);}
#previewer .preview video,#previewer .preview img{border-radius:6px;}
#previewer .spinner>div{background:var(--eg-accent);}
/* ====================================== O · SHELL / SEARCH / TOAST / MENU === */
.shell__content{background:var(--eg-ink);color:var(--eg-fg-2);}
.shell__prompt i{color:var(--eg-accent);}
#search #result{background:var(--eg-ink-2);color:var(--eg-fg-2);}
#search .boxes{background:var(--eg-panel);border-color:var(--eg-line);}
#search .boxes>div>div{background:var(--eg-panel-2);color:var(--eg-fg);border:1px solid var(--eg-line);}
#search .boxes i{color:var(--eg-accent)!important;}
#search .boxes h3{color:var(--eg-fg-2);}
.message.padding,.context-menu,#context-menu{
background:var(--eg-panel)!important;border:1px solid var(--eg-line)!important;
border-radius:var(--eg-r-card)!important;box-shadow:var(--eg-shadow)!important;
}
.Vue-Toastification__toast{border-radius:var(--eg-r-card)!important;font-family:var(--eg-text)!important;}
/* top loading progress */
.progress div{background:var(--eg-accent)!important;}
/* =================================== P · BRAND ATOMS (injected by share JS) = */
/* eg-filebrowser.js draws this stack on public share pages. See IMPLEMENTATION.md */
/* —— shared public-share content frame (single full-width column, like the
portal — no left info card, no QR, no breadcrumb) —— */
.eg-share-wrap{max-width:1180px;margin:0 auto;padding:0 34px 64px;}
.eg-share-wrap .eg-sharehead{max-width:none;padding:1.7em 0 1.1em;}
.eg-share-toolbar{
display:flex;align-items:center;gap:14px;margin:0 0 18px;
padding:10px 14px; /* 56px row: 10 + 36 + 10 — matches Seafile file-list-toolbar spec */
background:var(--eg-panel);border:1px solid var(--eg-line);border-radius:var(--eg-r-soft);
}
.eg-share-toolbar .spacer{flex:1;}
.eg-share-meta{font-size:13px;color:var(--eg-fg-2);font-weight:500;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.eg-view-toggle{display:inline-flex;background:var(--eg-panel-2);border:1px solid var(--eg-line);border-radius:var(--eg-r-soft);padding:3px;gap:3px;}
.eg-view-toggle button{width:34px;height:32px;border-radius:7px;display:grid;place-items:center;color:var(--eg-fg-3);transition:var(--eg-ease);}
.eg-view-toggle button i{font-size:18px;}
.eg-view-toggle button:hover{color:var(--eg-fg);}
.eg-view-toggle button.active{background:var(--eg-panel-3);color:var(--eg-fg);}
.eg-share-wrap #listing.list .item.header{padding-left:18px;padding-right:18px;}
.eg-share-wrap #listing.list .item{padding-left:18px;padding-right:18px;}
.eg-sharehead{
display:flex;flex-direction:column;align-items:flex-start;gap:13px;
width:100%;max-width:1180px;margin-inline:auto;box-sizing:border-box;
padding:1.7em 34px 1.1em;
}
.eg-sharehead.eg-sharefoot{
flex-direction:row;align-items:flex-end;justify-content:space-between;
gap:24px;width:100%;max-width:880px;margin:0 auto;padding:1.5em 0 0;
}
.eg-sharefoot .eg-sharestack{display:flex;flex-direction:column;align-items:flex-start;gap:13px;min-width:0;}
.eg-sharefoot .eg-shareactions{margin:0;flex:none;}
.eg-eyebrow{
font-family:var(--eg-text);font-weight:500;font-size:11.5px;
letter-spacing:.24em;text-transform:uppercase;color:var(--eg-accent);
white-space:nowrap;
}
.eg-bar{height:4px;width:38px;background:var(--eg-accent);border-radius:1px;}
.eg-title{
font-family:var(--eg-display);font-weight:400;text-transform:uppercase;
letter-spacing:.12em;line-height:1.08;font-size:clamp(22px,3vw,32px);
color:var(--eg-fg);margin:0;
}
.eg-sharemeta{font-size:13px;color:var(--eg-fg-3);margin-top:2px;}
.eg-shareactions{display:flex;gap:10px;margin-top:6px;}
.eg-dl-btn,.eg-zip-btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
background:var(--eg-accent)!important;color:#fff!important;
font:500 14px/36px var(--eg-text)!important;flex:none;
height:36px!important;padding:0 18px!important;
border-radius:var(--eg-r-soft)!important;
border:0!important;box-shadow:none!important;text-transform:none!important;
}
/* keep the leading icon a fixed compact box so a slow/again-fallback icon font
never stretches the button (it renders the ligature text otherwise) */
.eg-dl-btn i,.eg-zip-btn i,.btn-ghost-eg i{
font-size:17px!important;width:17px;min-width:17px;height:17px;
overflow:hidden;flex:none;line-height:1;
}
.eg-dl-btn:hover,.eg-zip-btn:hover{background:var(--eg-accent-deep)!important;}
.eg-file-ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--eg-panel-2);border:1px solid var(--eg-line);color:var(--eg-fg-2);flex:none;}
.eg-file-ic i{font-size:18px;}
.btn-ghost-eg{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--eg-line-2);color:var(--eg-fg);background:var(--eg-panel-2);font-family:var(--eg-text);font-weight:600;font-size:13.5px;padding:.7em 1.05em;border-radius:var(--eg-r-soft);transition:var(--eg-ease);}
.btn-ghost-eg:hover{border-color:rgba(255,255,255,.32);background:var(--eg-panel-3);}
.btn-ghost-eg i{font-size:16px;}
/* single-video share: calm, centred frame */
html[data-eg-share="video"] .share__box video,
html[data-eg-share="video"] #previewer .preview video{
max-height:68vh;border-radius:8px;
}
/* — share pages: hide the entire sidebar nav so content is truly centered — */
html.is-share nav{display:none!important;}
html.is-share main{width:100%!important;margin-left:auto!important;margin-right:auto!important;}
/* — share pages: hide login link, version string, and help link — */
body:has(.share) nav .credits,
body:has(.share) nav p.credits,
body:has(.share) nav a[href$="/login"],
body:has(.share) nav #logout{display:none!important;}
/* — share pages: hide native multi-select controls from the header bar.
eg-filebrowser.js recreates them inside the eg-share-toolbar instead. — */
body:has(.share) header button.action[aria-label="Download"],
body:has(.share) header button.action[aria-label="Select multiple"],
body:has(.share) header button.copy-clipboard{display:none!important;}
/* —— multi-select controls inside the share toolbar —— */
.eg-ms-group{display:flex;align-items:center;gap:8px;}
/* checkmark toggle (select multiple) — ghost chip, fills accent when active */
.eg-ms-check{
display:inline-flex;align-items:center;justify-content:center;
width:36px;height:36px;
border:1px solid var(--eg-line-2);border-radius:var(--eg-r-soft);
background:var(--eg-panel-2);color:var(--eg-fg-3);
cursor:pointer;transition:var(--eg-ease);
}
.eg-ms-check i{font-size:20px;}
.eg-ms-check:hover{border-color:rgba(255,255,255,.32);color:var(--eg-fg);background:var(--eg-panel-3);}
.eg-ms-check.active{background:var(--eg-accent);border-color:var(--eg-accent);color:#fff;}
.eg-ms-check.active i{color:#fff;}
/* download-selected — icon + counter, accent fill, same shape as eg-zip-btn */
.eg-sel-dl{
display:none;align-items:center;justify-content:center;gap:6px;
min-width:36px;height:36px;padding:0 10px;
background:var(--eg-accent);color:#fff;
border:0;border-radius:var(--eg-r-soft);
font-family:var(--eg-text);font-weight:500;font-size:13px;
cursor:pointer;transition:var(--eg-ease);
}
.eg-sel-dl.visible{display:inline-flex;}
.eg-sel-dl:hover{background:var(--eg-accent-deep);}
.eg-sel-dl i{font-size:18px;width:18px;min-width:18px;height:18px;overflow:hidden;flex:none;line-height:1;}
/* copy-download-link — ghost chip, shown only when exactly 1 file selected */
.eg-sel-copy{
display:none;align-items:center;justify-content:center;
width:36px;height:36px;
border:1px solid var(--eg-line-2);border-radius:var(--eg-r-soft);
background:var(--eg-panel-2);color:var(--eg-fg-2);
cursor:pointer;transition:var(--eg-ease);
}
.eg-sel-copy.visible{display:inline-flex;}
.eg-sel-copy:hover{border-color:rgba(255,255,255,.32);background:var(--eg-panel-3);color:var(--eg-fg);}
.eg-sel-copy i{font-size:18px;width:18px;min-width:18px;height:18px;overflow:hidden;flex:none;line-height:1;}
/* ====================================================== Q · RESPONSIVE ====== */
@media (max-width:736px){
header::before{margin:0 .6em 0 .15em;font-size:19px;}
/* Mobile nav is a drawer (top:0, slides in from left) — override our base nav{top:96px} */
nav{top:0;}
.share{padding:1em .5em 4em;}
/* tighter gutters for the public-share surfaces */
.eg-share-wrap{padding-left:18px;padding-right:18px;}
.eg-share-wrap .eg-sharehead,
.eg-sharehead{padding-left:0;padding-right:0;}
.eg-sharehead{padding-top:1.3em;}
.eg-share-wrap #listing.list .item,
.eg-share-wrap #listing.list .item.header{padding-left:14px;padding-right:14px;}
/* settings: keep all four tabs on one row, scroll as a safety net */
.dashboard #nav{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.dashboard #nav ul li{padding:.85em .85em;font-size:.94em;white-space:nowrap;}
.dashboard #nav i{margin-right:.15em;}
}
/* —— brand lockup — larger on mobile (26px desktop → 32px mobile) —— */
@media (max-width:720px){
header{height:72px;}
/* Sync body padding-top and breadcrumbs top to our 72px mobile header
(desktop uses 96px; FB's base body{padding-top:4em=64px} and
.breadcrumbs{top:4em=64px} both need overriding here too) */
body{padding-top:72px;}
.breadcrumbs{top:72px;}
.eg-brand-lockup{gap:16px;}
.eg-brand-lockup .eg-mark .mk{font-size:32px;}
.eg-brand-lockup .eg-mark .bar{width:36px;}
.eg-brand-lockup .brand-meta .name{font-size:18px;}
.eg-brand-lockup .brand-meta .sub{font-size:12px;}
}
/* —— phone: stack the share toolbars + footer so nothing clips —— */
@media (max-width:600px){
.eg-share-toolbar{flex-wrap:wrap;gap:12px;padding:12px 14px;}
.eg-share-toolbar .spacer{display:none;}
.eg-share-meta{flex:1 1 0;min-width:0;}
/* the primary action drops to its own full-width row, secondary stays inline */
.eg-share-toolbar .eg-dl-btn,
.eg-share-toolbar .eg-zip-btn{flex:1 0 100%;justify-content:center;order:9;}
.eg-share-toolbar .btn-ghost-eg{justify-content:center;}
/* video share: title sits above a full-width download */
.eg-sharehead.eg-sharefoot{flex-direction:column;align-items:flex-start;gap:16px;}
.eg-sharefoot .eg-shareactions{width:100%;}
.eg-sharefoot .eg-dl-btn{width:100%;justify-content:center;}
}
/* ========================================= R · UPLOAD EXTENSION STYLES ====== */
/* Anonymous upload shares — injected by eg-filebrowser.js upload extension */
/* —— R1 · admin toggle row (share create dialog) —— */
.eg-upload-toggle-row{
display:flex;align-items:center;justify-content:space-between;gap:12px;
margin-top:14px;padding-top:14px;
border-top:1px solid var(--eg-line);
}
.eg-upload-toggle{
display:flex;align-items:center;gap:10px;
cursor:pointer;color:var(--eg-fg-2);font-size:14px;font-weight:500;
user-select:none;
}
.eg-upload-toggle:hover{color:var(--eg-fg);}
.eg-upload-check{
width:18px;height:18px;margin:0;cursor:pointer;
accent-color:var(--eg-accent);
}
.eg-suggest-pw{
display:inline-flex;align-items:center;gap:6px;
font-size:12px!important;padding:4px 10px!important;
white-space:nowrap;flex-shrink:0;
}
.eg-suggest-pw i{font-size:15px!important;}
/* —— R2 · upload buttons in share toolbar —— */
.eg-upload-btn{
display:inline-flex;align-items:center;gap:6px;
color:var(--eg-fg-2);cursor:pointer;transition:var(--eg-ease);
font-family:var(--eg-text);font-weight:500;font-size:13px;
padding:0 12px;height:36px;border-radius:var(--eg-r-soft);
border:1px solid var(--eg-line-2);background:var(--eg-panel-2);
}
.eg-upload-btn:hover{
color:var(--eg-fg);border-color:rgba(255,255,255,.32);background:var(--eg-panel-3);
}
.eg-upload-btn i{font-size:18px;}
#listing.eg-drop-active{
outline:2px dashed var(--eg-accent);outline-offset:-2px;border-radius:var(--eg-r-soft);
}
/* —— R3 · upload progress modal (recipient share page) —— */
.eg-upload-overlay{
position:fixed;inset:0;z-index:9999;
background:rgba(0,0,0,.62);
display:flex;align-items:center;justify-content:center;
}
.eg-upload-modal{
width:520px;max-width:90vw;max-height:80vh;
background:var(--eg-panel);
border:1px solid var(--eg-line);
border-radius:var(--eg-r-card);
box-shadow:var(--eg-shadow);
display:flex;flex-direction:column;
overflow:hidden;
}
.eg-upload-modal-header{
padding:20px 24px 14px;
border-bottom:1px solid var(--eg-line);
display:flex;align-items:center;justify-content:space-between;
}
.eg-upload-modal-header h2{
font-family:var(--eg-display);font-weight:400;
text-transform:uppercase;letter-spacing:.12em;
font-size:1.05em;color:var(--eg-fg);margin:0;
}
.eg-upload-modal-close{
width:32px;height:32px;border-radius:8px;
display:grid;place-items:center;
color:var(--eg-fg-3);cursor:pointer;transition:var(--eg-ease);
}
.eg-upload-modal-close:hover{background:var(--eg-panel-2);color:var(--eg-fg);}
.eg-upload-modal-close i{font-size:20px;}
.eg-upload-modal-close.disabled{opacity:.3;pointer-events:none;}
.eg-upload-modal-cancel{
font-family:var(--eg-text);font-weight:600;font-size:12.5px;
color:#D2675A;cursor:pointer;padding:6px 14px;border-radius:var(--eg-r-soft);
transition:var(--eg-ease);
}
.eg-upload-modal-cancel:hover{background:rgba(210,103,90,.12);}
.eg-upload-modal-body{
flex:1;overflow-y:auto;padding:8px 24px;
min-height:60px;max-height:340px;
}
/* —— per-file row —— */
.eg-upload-file{
padding:10px 0;
border-bottom:1px solid var(--eg-line);
}
.eg-upload-file:last-child{border-bottom:0;}
.eg-up-header{
display:flex;align-items:center;justify-content:space-between;
margin-bottom:6px;
}
.eg-up-name{
font-size:13px;font-weight:500;color:var(--eg-fg);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
max-width:340px;
}
.eg-up-meta{
font-size:11.5px;color:var(--eg-fg-3);
white-space:nowrap;flex-shrink:0;margin-left:12px;
}
/* progress bar */
.eg-up-bar{
width:100%;height:4px;
background:var(--eg-panel-2);
border-radius:2px;overflow:hidden;
}
.eg-up-fill{
height:100%;width:0%;
background:var(--eg-accent);
border-radius:2px;
transition:width .2s ease;
}
.eg-up-fill.eg-up-done{background:#34b27b;}
.eg-up-fill.eg-up-error{background:#D2675A;}
.eg-up-fill.eg-up-cancelled{background:var(--eg-charcoal);}
/* —— summary footer —— */
.eg-upload-modal-footer{
padding:12px 24px 16px;
border-top:1px solid var(--eg-line);
display:flex;align-items:center;justify-content:space-between;
font-size:12.5px;color:var(--eg-fg-3);
}
.eg-upload-modal-footer .eg-up-summary{font-weight:500;}
.eg-up-footer-buttons{
display:flex;align-items:center;gap:10px;flex-shrink:0;
}
.eg-upload-modal-footer .eg-up-close-btn{
display:none;align-items:center;gap:6px;
font-size:12.5px;font-weight:600;color:var(--eg-accent);
cursor:pointer;padding:4px 10px;border-radius:var(--eg-r-soft);
transition:var(--eg-ease);
}
.eg-upload-modal-footer .eg-up-close-btn.visible{display:inline-flex;}
.eg-upload-modal-footer .eg-up-close-btn:hover{background:var(--eg-panel-2);}