/* ==========================================================================
Explore_Theme.css — Explorer4 (v2.5.0)
ONE stylesheet for all 10 themes, the toolbar line, blank mode and the
player line that opens under the playing file.
Replaces Explorer/CSS/Explore_Theme_0.css … Explore_Theme_9.css.
HOW THEMES WORK
• selects a theme (N = 0…9). Theme 0 is also the
:root default, so a page without a theme class still looks right.
• Each theme only sets CSS variables (colours, fonts, a few sizes).
The layout rules further down read those variables.
• Title fonts are loaded by the page ( to Google Fonts, one family
per theme, display=swap). Body text uses the phone's own fonts.
• Browsers without CSS variables (Opera Mini, very old Android) get the
plain Theme 0 colours written just before each var() line.
THEME TABLE (name — elegant title font — description colour — tweaks, owner-approved)
0 Midnight Blue Gabriela champagne #f0d9a8 download arrow white
BACK button (all themes): the picture keeps its outline in the opposite colour of its letters —
white letters + black outline on the dark / mid buttons (--back-img: invert(1)), black letters +
white outline on the light orange ones (themes 1, 6: none). Never brightness(0): it paints the
outline the same colour as the letters and they look fat (owner, 2026-09-29).
1 Desert Playfair Display deep teal #1d4e5c playing outline #0277bd
2 Forest Canopy Lora (was Oswald) cream #fff1c1 white icons
3 Deep Space Philosopher (Exo 2) starlight #ffe7a8 white icons
4 Autumn Woods Cormorant Garamond cream #fff8e1 buttons #c43e00, muted #ffc070, hover #84675c
5 Starry Night Cinzel moon blue #c6d8f0 white icons
6 Coral Reef Pacifico aqua #b8f2ff list in deep-ocean blue
7 Art Deco Josefin Sans silver #dcdcdc playing outline #cd5c5c, hover #006e6e
8 Mountain Peak Raleway (Rob. Cond) rock brown #5d4037 white back label, outline #0097a7, error #c62828
9 Volcanic Ash Yeseva One (Archivo Black) ash #cfd8dc buttons #d32f2f
The description line (Second_Title) uses Lato — only on pages whose description is in
Latin letters; other alphabets use the phone's own font (see the PHP: e4_font_covers).
Title fonts are likewise only loaded when they have every letter of the title.
All text meets WCAG AA contrast (4.5:1; 3:1 for the large title); descriptions ≥ 7:1.
Check with: python Tools\e4.py contrast
========================================================================== */
/* --------------------------- Theme 0 (default) --------------------------- */
:root {
--font-body: Aptos, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
--font-title: "Gabriela", Georgia, serif;
--bg: #0a192f;
--text: #ccd6f6;
--c-bg: #112240;
--c-shadow: 0 4px 15px rgba(0,0,0,.3);
--c-border: none;
--title: #64ffda;
--title-shadow: 1px 1px 3px rgba(0,0,0,.5);
--title-size: 2.5em;
--title-size-m: 2em;
--title-size-s: 1.6em;
--title-spacing: normal;
--sub: #8892b0;
--desc: #f0d9a8;
--sub-style: normal;
--panel-bg: #1c355e;
--panel-border: #2a4a7e;
--btn-bg: #64ffda;
--btn-text: #0a192f;
--btn-radius: 5px;
--back-bg: #173a5e;
--back-hover: #2a5288;
--back-border: none;
--back-img: invert(1); /* back.png = black letters + thin white outline → white letters + black outline (sharp on dark buttons) */
--sep: #1c355e;
--row1: #112240;
--row2: #172a45;
--row-hover: #203c66;
--link: #ccd6f6;
--link-hover: #64ffda;
--link-dir: #ccd6f6;
--playing: #64ffda;
--iframe-border: #2a4a7e;
--err-text: #ff6464;
--err-bg: #2f0a0a;
--err-border: #a03030;
--mono-icon: invert(1);
}
/* --------------------------- Theme 1 — Desert ---------------------------- */
.theme-1 {
--font-body: Georgia, Cambria, "Times New Roman", Times, serif;
--font-title: "Playfair Display", Georgia, serif;
--bg: #f4a460;
--text: #5d4037;
--c-bg: #f5deb3;
--c-shadow: 0 4px 15px rgba(80,50,20,.25);
--title: #8b4513;
--title-shadow: 1px 1px 2px rgba(245,222,179,.5);
--sub: #795548;
--desc: #1d4e5c;
--panel-bg: #deb887;
--panel-border: #cd853f;
--btn-bg: #8b4513;
--btn-text: #fffafa;
--back-bg: #cd853f;
--back-hover: #d2691e;
--back-img: none;
--sep: #d2b48c;
--row1: #f5deb3;
--row2: #faf0e6;
--row-hover: #e0cda8;
--link: #5d4037;
--link-hover: #8b4513;
--link-dir: #5d4037;
--playing: #0277bd;
--iframe-border: #cd853f;
--err-text: #b71c1c;
--err-bg: #ffebee;
--err-border: #ef9a9a;
--mono-icon: none;
}
/* --------------------------- Theme 2 — Forest Canopy --------------------- */
.theme-2 {
--font-title: "Lora", Georgia, serif;
--bg: #223d27;
--text: #e8f5e9;
--c-bg: #38533e;
--c-shadow: 0 4px 15px rgba(10,20,10,.4);
--title: #a5d6a7;
--sub: #9ccc9f;
--desc: #fff1c1;
--panel-bg: #4a6b51;
--panel-border: #5c8263;
--btn-bg: #c5e1a5;
--btn-text: #1b2b1e;
--back-bg: #543d29;
--back-hover: #6d5138;
--sep: #4a6b51;
--row1: #38533e;
--row2: #415e48;
--row-hover: #4a6b51;
--link: #e8f5e9;
--link-hover: #c5e1a5;
--link-dir: #e8f5e9;
--playing: #fdd835;
--iframe-border: #5c8263;
--err-text: #fdd835;
--err-bg: #4f2620;
--err-border: #8c483c;
}
/* --------------------------- Theme 3 — Deep Space ------------------------ */
.theme-3 {
--font-title: "Philosopher", Georgia, serif;
--bg: #0c0a1f;
--text: #e0e0ff;
--c-bg: #1a1633;
--c-shadow: 0 4px 15px rgba(50,30,80,.4);
--title: #9fa8da;
--title-shadow: 1px 1px 3px rgba(0,0,0,.6);
--sub: #7986cb;
--desc: #ffe7a8;
--panel-bg: #2f2a50;
--panel-border: #453f78;
--btn-bg: #81d4fa;
--btn-text: #0c0a1f;
--back-bg: #5c6bc0;
--back-hover: #7986cb;
--sep: #2f2a50;
--row1: #1a1633;
--row2: #201b3d;
--row-hover: #2c2655;
--link: #e0e0ff;
--link-hover: #81d4fa;
--link-dir: #e0e0ff;
--playing: #ff80ab;
--iframe-border: #453f78;
--err-text: #ff80ab;
--err-bg: #3d1b30;
--err-border: #7c3a60;
}
/* --------------------------- Theme 4 — Autumn Woods ---------------------- */
.theme-4 {
--font-body: Georgia, Cambria, "Times New Roman", Times, serif;
--font-title: "Cormorant Garamond", Georgia, serif;
--bg: #4a2c2a;
--text: #fff3e0;
--c-bg: #6d4c41;
--c-shadow: 0 4px 15px rgba(40,20,10,.35);
--title: #ffcc80;
--sub: #ffc070;
--desc: #fff8e1;
--panel-bg: #8d6e63;
--panel-border: #a1887f;
--btn-bg: #c43e00;
--btn-text: #fffde7;
--back-bg: #bf360c;
--back-hover: #d84315;
--sep: #8d6e63;
--row1: #6d4c41;
--row2: #795548;
--row-hover: #84675c;
--link: #fff3e0;
--link-hover: #ffcc80;
--link-dir: #fff3e0;
--playing: #ffab40;
--iframe-border: #a1887f;
--err-text: #ffcc80;
--err-bg: #6d2016;
--err-border: #b93829;
}
/* --------------------------- Theme 5 — Starry Night ---------------------- */
.theme-5 {
--font-title: "Cinzel", Georgia, serif;
--bg: #00001a;
--text: #e0e0e0;
--c-bg: #0d0d26;
--c-shadow: 0 4px 15px rgba(100,100,150,.2);
--title: #ffd700;
--title-shadow: 1px 1px 5px rgba(255,215,0,.5);
--sub: #c0c0c0;
--desc: #c6d8f0;
--panel-bg: #1a1a33;
--panel-border: #33334d;
--btn-bg: #b0c4de;
--btn-text: #00001a;
--back-bg: #4682b4;
--back-hover: #5a94c7;
--sep: #1a1a33;
--row1: #0d0d26;
--row2: #14142d;
--row-hover: #20203f;
--link: #e0e0e0;
--link-hover: #ffd700;
--link-dir: #e0e0e0;
--playing: #add8e6;
--iframe-border: #33334d;
--err-text: #ffd700;
--err-bg: #330000;
--err-border: #660000;
}
/* --------------------------- Theme 6 — Coral Reef ------------------------ */
.theme-6 {
--font-title: "Pacifico", "Brush Script MT", cursive;
--bg: #0077be;
--text: #f0f8ff;
--c-bg: #023e8a;
--c-shadow: 0 4px 15px rgba(0,50,100,.3);
--title: #ff7f50;
--title-shadow: 1px 1px 3px rgba(0,0,0,.4);
--title-size: 2.8em;
--title-size-m: 2.4em;
--title-size-s: 2em;
--sub: #90e0ef;
--desc: #b8f2ff;
--panel-bg: #012a5e;
--panel-border: #0077b6;
--btn-bg: #ffc107;
--btn-text: #003566;
--back-bg: #f77f00;
--back-hover: #fcbf49;
--back-img: none;
--sep: #0a5fb0;
--row1: #023e8a;
--row2: #034a9a;
--row-hover: #0a5fb0;
--link: #f0f8ff;
--link-hover: #ffc107;
--link-dir: #f0f8ff;
--playing: #ff69b4;
--iframe-border: #0077b6;
--err-text: #ffc107;
--err-bg: #003566;
--err-border: #005a8d;
}
/* --------------------------- Theme 7 — Art Deco -------------------------- */
.theme-7 {
--font-title: "Josefin Sans", system-ui, sans-serif;
--bg: #000000;
--text: #e6e6e6;
--c-bg: #1f1f1f;
--c-shadow: 0 0 15px rgba(218,165,32,.3);
--c-border: 1px solid #b8860b;
--title: #daa520;
--title-shadow: 1px 1px 2px rgba(0,0,0,.7);
--title-spacing: 1px;
--sub: #b0b0b0;
--desc: #dcdcdc;
--sub-style: italic;
--panel-bg: #333333;
--panel-border: #b8860b;
--btn-bg: #daa520;
--btn-text: #000000;
--btn-radius: 3px;
--back-bg: #008080;
--back-hover: #005f5f;
--back-border: 1px solid #005f5f;
--sep: #4d4d4d;
--row1: #1f1f1f;
--row2: #2b2b2b;
--row-hover: #006e6e;
--link: #e6e6e6;
--link-hover: #daa520;
--link-dir: #f0e68c;
--playing: #cd5c5c;
--iframe-border: #b8860b;
--err-text: #daa520;
--err-bg: #500000;
--err-border: #800000;
}
/* --------------------------- Theme 8 — Mountain Peak --------------------- */
.theme-8 {
--font-title: "Raleway", system-ui, sans-serif;
--bg: #e0e5ec;
--text: #37474f;
--c-bg: #ffffff;
--c-shadow: 0 4px 15px rgba(100,110,120,.25);
--c-border: 1px solid #cfd8dc;
--title: #1976d2;
--title-shadow: 1px 1px 1px rgba(200,200,220,.5);
--title-spacing: .5px;
--sub: #546e7a;
--desc: #5d4037;
--panel-bg: #eceff1;
--panel-border: #b0bec5;
--btn-bg: #1976d2;
--btn-text: #ffffff;
--back-bg: #607d8b;
--back-hover: #546e7a;
--sep: #eceff1;
--row1: #ffffff;
--row2: #f5f7f8;
--row-hover: #e8eaf6;
--link: #37474f;
--link-hover: #1976d2;
--link-dir: #2962ff;
--playing: #0097a7;
--iframe-border: #b0bec5;
--err-text: #c62828;
--err-bg: #ffebee;
--err-border: #ef9a9a;
--mono-icon: none;
}
/* --------------------------- Theme 9 — Volcanic Ash ---------------------- */
.theme-9 {
--font-body: Georgia, Cambria, "Times New Roman", Times, serif;
--font-title: "Yeseva One", Georgia, serif;
--bg: #212121;
--text: #e0e0e0;
--c-bg: #303030;
--c-shadow: 0 4px 15px rgba(0,0,0,.5);
--c-border: 1px solid #424242;
--title: #ff5722;
--title-shadow: 1px 1px 3px rgba(0,0,0,.7);
--sub: #9e9e9e;
--desc: #cfd8dc;
--panel-bg: #424242;
--panel-border: #616161;
--btn-bg: #d32f2f;
--btn-text: #ffffff;
--back-bg: #757575;
--back-hover: #616161;
--sep: #424242;
--row1: #303030;
--row2: #383838;
--row-hover: #4a4a4a;
--link: #e0e0e0;
--link-hover: #ff7043;
--link-dir: #ff8a65;
--playing: #ff7043;
--iframe-border: #616161;
--err-text: #ffccbc;
--err-bg: #5d4037;
--err-border: #8d6e63;
}
/* ==========================================================================
LAYOUT (shared by every theme — only reads the variables above)
========================================================================== */
[hidden] { display: none !important; }
body {
margin: 0;
padding: 0;
line-height: 1.6;
background-color: #0a192f; background-color: var(--bg);
color: #ccd6f6; color: var(--text);
font-family: Aptos, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-family: var(--font-body);
transition: background-color .3s, color .3s;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
.explorer-container {
max-width: 1000px;
margin: 20px auto;
padding: 15px;
border-radius: 8px;
background-color: #112240; background-color: var(--c-bg);
box-shadow: 0 4px 15px rgba(0,0,0,.3); box-shadow: var(--c-shadow);
border: var(--c-border);
}
/* --------------------------- Banner -------------------------------------- */
.titlebar-container { text-align: center; margin-bottom: 15px; }
.title-bar-link { display: inline-block; max-width: 100%; }
.title-bar-image {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
transition: transform .3s ease-in-out;
}
.title-bar-image:hover { transform: scale(1.03); }
.title-bar-image.clickable { cursor: pointer; }
/* --------------------------- Title and subtitle -------------------------- */
.main-header-container { margin-bottom: 10px; }
h1.main-title {
margin: 10px 0 5px;
padding: 5px 0;
text-align: center;
font-size: 2.5em; font-size: var(--title-size);
font-family: Georgia, serif; font-family: var(--font-title);
letter-spacing: var(--title-spacing);
line-height: 1.25;
color: #64ffda; color: var(--title);
text-shadow: var(--title-shadow);
}
.second-title {
margin: 0 0 20px;
text-align: center;
font-size: 1.1em;
font-style: var(--sub-style);
color: #8892b0; color: var(--sub);
}
/* --------------------------- Toolbar line --------------------------------
One line: the description (Second_Title) at the start, the emoji buttons
🏠 ☰ A↕ 🎨 ⬇️ 🔍 at the end (right; LEFT for right-to-left languages,
). If both don't fit, the buttons move to
a second line. 🔍 stretches into the search line over the buttons. */
.tool-line {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 4px 12px;
margin: 0 0 10px;
}
.tool-line .second-title { flex: 1 1 auto; margin: 0; text-align: left; color: #f0d9a8; color: var(--desc); letter-spacing: .01em; }
.second-title.web-font { font-family: "Lato", Aptos, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.tool-line[dir="rtl"] .second-title { text-align: right; }
.tools { display: flex; flex: none; gap: 2px; margin-left: auto; }
.tool-line[dir="rtl"] .tools { margin-left: 0; margin-right: auto; }
.tool {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 46px; width: calc(46px * var(--ui)); width: min(calc(46px * var(--ui)), calc((100vw - 44px) / 6));
height: 46px; height: calc(46px * var(--ui)); height: min(calc(46px * var(--ui)), calc((100vw - 44px) / 6));
margin: 0;
padding: 0;
border: 1px solid transparent;
border-radius: 12px;
background: transparent;
color: #ccd6f6; color: var(--link);
font-family: inherit;
font-size: 1.45rem; font-size: calc(1.45rem * var(--ui)); font-size: min(calc(1.45rem * var(--ui)), calc((100vw - 44px) / 6 * .55));
font-weight: bold;
line-height: 1;
text-decoration: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
}
.tool:hover { background-color: #203c66; background-color: var(--row-hover); }
.tool:active { transform: translateY(1px); }
.tool[aria-pressed="true"],
.tool[aria-expanded="true"] { background-color: #172a45; background-color: var(--row2); border-color: #2a4a7e; border-color: var(--panel-border); }
.tool-text { font-size: 1.3rem; font-size: calc(1.3rem * var(--ui)); letter-spacing: -1px; }
.tool-text small { font-size: .5em; letter-spacing: 0; }
.no-js .js-only { display: none; }
/* A short note ("🎨 Coral Reef") that fades in under the buttons and out again; takes no room */
.tool-note {
position: absolute;
top: 100%;
right: 0;
z-index: 5;
margin-top: 2px;
padding: 3px 10px;
border-radius: 12px;
font-size: .85rem;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity .2s ease-in-out;
background-color: #1c355e; background-color: var(--panel-bg);
color: #ccd6f6; color: var(--text);
border: 1px solid #2a4a7e; border: 1px solid var(--panel-border);
}
.tool-note.show { opacity: 1; }
.tool-line[dir="rtl"] .tool-note { right: auto; left: 0; }
/* Search line: grows out of the 🔍 button over the other buttons */
.search-area {
position: absolute;
right: 0;
bottom: 0;
z-index: 4;
display: flex;
align-items: center;
gap: 4px;
box-sizing: border-box;
width: 100%;
max-width: 28em;
height: 46px; height: calc(46px * var(--ui));
padding: 0 0 0 12px;
border-radius: 23px;
background-color: #172a45; background-color: var(--row2);
border: 1px solid #2a4a7e; border: 1px solid var(--panel-border);
animation: e4-stretch .2s ease-out;
}
.tool-line[dir="rtl"] .search-area { right: auto; left: 0; padding: 0 12px 0 0; }
@keyframes e4-stretch { from { max-width: 40px; opacity: .6; } to { max-width: 28em; opacity: 1; } }
.filter-box {
flex: 1 1 auto;
min-width: 0;
height: 100%;
margin: 0;
padding: 0;
border: 0;
outline: 0;
background: transparent;
color: #ccd6f6; color: var(--link);
font: inherit;
font-size: 1.05rem; font-size: calc(1.05rem * var(--ui));
-webkit-appearance: none;
appearance: none;
}
.filter-box::placeholder { color: var(--sub); opacity: 1; }
.filter-box::-webkit-search-cancel-button { display: none; } /* our ✕ closes and clears */
.search-area:focus-within { box-shadow: 0 0 0 2px var(--title); }
.filter-count { flex: none; font-size: .8rem; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--sub); }
.search-area .tool { flex: none; width: 40px; height: 40px; border-radius: 20px; font-size: 1.05rem; }
/* --------------------------- Navigation (back, path) --------------------- */
.navigation-controls {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 15px;
margin-bottom: 15px;
}
.navigation-controls:empty { display: none; }
.bottom-navigation-controls { margin: 15px 0; }
.back-button {
display: inline-flex;
align-items: center;
padding: 5px 8px;
border: var(--back-border);
border-radius: 5px; border-radius: var(--btn-radius);
text-decoration: none;
background-color: #173a5e; background-color: var(--back-bg);
transition: background-color .2s ease-in-out;
}
.back-button:hover { background-color: #2a5288; background-color: var(--back-hover); }
.back-button img { display: block; filter: var(--back-img); transition: transform .1s ease-out; }
.back-button:active img { transform: translateY(3px); }
.breadcrumb { font-size: .9em; color: var(--sub); overflow-wrap: anywhere; }
.breadcrumb a { color: #ccd6f6; color: var(--link); text-decoration: none; }
.breadcrumb a:hover { color: #64ffda; color: var(--link-hover); text-decoration: underline; }
.breadcrumb .sep { margin: 0 .35em; opacity: .7; }
.breadcrumb [aria-current] { color: var(--sub); }
/* Each name keeps its own reading direction: two Arabic / Hebrew folders in a row would otherwise
swap places in the path, and a right-to-left name would pull the "/" around it. */
.breadcrumb a, .breadcrumb [aria-current], .table a.item { unicode-bidi: -webkit-isolate; unicode-bidi: isolate; }
/* A long path (more than 4 parts) folds its middle into "…" on phones; tapping it shows everything */
.crumb-fold { display: none; }
.crumb-more { padding: 0 .4em; border: 0; border-radius: 4px; background: transparent; color: #ccd6f6; color: var(--link); font: inherit; font-weight: bold; cursor: pointer; }
.crumb-more:hover { background-color: var(--row-hover); }
@media (max-width: 600px) {
.js .breadcrumb:not(.open) .crumb-mid { display: none; }
.js .breadcrumb:not(.open) .crumb-fold { display: inline; }
}
/* --------------------------- File list ----------------------------------- */
.table.file-list-table {
width: 100%;
margin-top: 15px;
border-collapse: collapse;
table-layout: fixed;
}
.table td {
padding: 10px;
text-align: left;
vertical-align: middle;
border-bottom: 1px solid #1c355e; border-bottom: 1px solid var(--sep);
}
.table .row.one { background-color: #112240; background-color: var(--row1); }
.table .row.two { background-color: #172a45; background-color: var(--row2); }
.table .row:hover { background-color: #203c66; background-color: var(--row-hover); }
.table .row.audio-playing-row { outline: 2px solid #64ffda; outline: 2px solid var(--playing); outline-offset: -2px; }
.table .icon { width: 40px; padding-right: 8px; text-align: center; }
.table .icon img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.table .icon a { display: block; margin: -8px; padding: 8px; } /* 44 px tap area, same icon size */
.table .icon a img { transition: transform .1s ease-out; }
.table .icon a:active img { transform: translateY(3px); }
.table .icon a.play { cursor: pointer; }
.table .name { overflow-wrap: anywhere; word-wrap: break-word; }
.name-cell { display: flex; align-items: center; gap: 10px; }
.name-cell .item { flex: 1 1 auto; min-width: 0; }
.table a.item,
.table a.item:visited { color: #ccd6f6; color: var(--link); text-decoration: none; font-weight: 500; }
.table a.item.dir { color: #ccd6f6; color: var(--link-dir); font-weight: bold; }
.table a.item:hover { color: #64ffda; color: var(--link-hover); }
/* Download button: only when ⬇️ is on */
.download-link { display: none; flex: none; }
.dl-on .download-link { display: inline-block; line-height: 1; }
.download-link img { display: block; filter: var(--mono-icon); transition: opacity .2s ease-in-out, transform .1s ease-out; }
.download-link:hover img { opacity: .75; }
.download-link:active img { transform: translateY(3px); }
.table .empty td, .table .no-match td { padding: 20px; text-align: center; opacity: .85; }
/* Text size setting A↕ (classes set on ). --ui scales the buttons with it. */
:root { --ui: 1; }
.font-x-small { --ui: .85; }
.font-small { --ui: .92; }
.font-large { --ui: 1.15; }
.font-x-large { --ui: 1.3; }
.font-x-small .file-list-table td { font-size: .7rem; padding-top: 4px; padding-bottom: 4px; }
.font-small .file-list-table td { font-size: .85rem; padding-top: 6px; padding-bottom: 6px; }
.file-list-table td { font-size: 1rem; }
.font-large .file-list-table td { font-size: 1.15rem; padding-top: 12px; padding-bottom: 12px; }
.font-x-large .file-list-table td { font-size: 1.3rem; padding-top: 14px; padding-bottom: 14px; }
.font-x-small .back-button { padding-top: 4px; padding-bottom: 4px; }
.font-small .back-button { padding-top: 6px; padding-bottom: 6px; }
.font-large .back-button { padding-top: 12px; padding-bottom: 12px; }
.font-x-large .back-button { padding-top: 14px; padding-bottom: 14px; }
/* --------------------------- Messages ------------------------------------ */
.error-message {
padding: 10px;
border-radius: 5px;
text-align: center;
color: #ff6464; color: var(--err-text);
background-color: #2f0a0a; background-color: var(--err-bg);
border: 1px solid #a03030; border: 1px solid var(--err-border);
}
/* --------------------------- Embedded pages (Link_A … Link_Z) ------------ */
.iframe-separator { margin: 30px 0 0; border: 0; border-top: 1px solid var(--sep); }
.iframe-block { margin: 20px 0; }
.iframe-container { margin-top: 25px; overflow: hidden; border-radius: 5px; border: 1px solid var(--iframe-border); }
.iframe-container iframe { display: block; width: 100%; height: 777px; border: 0; }
.iframe-direct-link { margin: 3px 0 0; text-align: center; }
.iframe-direct-link a, .direct-link a { display: inline-block; padding: 1px 5px; color: inherit; text-decoration: none; }
.iframe-direct-link a:hover { text-decoration: underline; }
/* --------------------------- Player line (created by JavaScript) ---------
A table row inserted right under the file that plays:
⏸ 0:12 ━━━●━━━━ 1:23:45 1× ⏭ 🎧 ✕ (86 MB, tiny, under the slider's end)
Buttons grow with the A↕ text size (--ui), capped on narrow phones. */
.table tr.np-line > td {
padding: 4px 8px 6px;
background-color: #203c66; background-color: var(--row-hover);
border-bottom: 1px solid #1c355e; border-bottom: 1px solid var(--sep);
animation: e4-open .18s ease-out;
}
@keyframes e4-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.now-playing { display: flex; align-items: center; gap: 6px; }
.np-track { position: relative; flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.np-size { /* file size: seen, not stressed */
position: absolute;
right: 0;
bottom: -9px;
font-size: .62rem;
line-height: 1;
letter-spacing: .02em;
white-space: nowrap;
opacity: .6;
pointer-events: none;
}
.np-btn {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 42px; width: calc(42px * var(--ui));
height: 42px; height: calc(42px * var(--ui));
padding: 0;
border: 0;
border-radius: 50%;
cursor: pointer;
background: transparent;
color: inherit;
font: inherit;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
.np-btn:hover { background-color: var(--row2); }
.np-toggle { background-color: #64ffda; background-color: var(--title); color: #112240; color: var(--c-bg); }
.np-toggle:hover { background-color: var(--title); opacity: .9; }
.np-btn svg { width: 22px; height: 22px; width: calc(22px * var(--ui)); height: calc(22px * var(--ui)); fill: currentColor; }
.np-close svg { width: 18px; height: 18px; width: calc(18px * var(--ui)); height: calc(18px * var(--ui)); }
.np-time { flex: none; min-width: 2.6em; font-size: .8rem; font-size: calc(.8rem * var(--ui)); font-variant-numeric: tabular-nums; opacity: .85; }
.np-time.np-dur { text-align: right; }
.np-seek { flex: 1 1 auto; min-width: 40px; height: 24px; margin: 0; accent-color: var(--title); cursor: pointer; }
.np-status { flex: 1 1 auto; font-size: .85rem; opacity: .9; }
.np-speed { /* 1× → 1.25× → … one tap each */
width: auto;
min-width: 50px; min-width: calc(50px * var(--ui));
height: 32px; height: calc(32px * var(--ui));
padding: 0 8px;
border-radius: 16px;
font-size: .85rem; font-size: calc(.85rem * var(--ui));
font-weight: bold;
font-variant-numeric: tabular-nums;
border: 1px solid #2a4a7e; border: 1px solid var(--panel-border);
}
.np-speed.changed { background-color: #64ffda; background-color: var(--btn-bg); color: #0a192f; color: var(--btn-text); border-color: transparent; }
/* ⏭ and 🎧 are pale grey emoji. On the light themes (1, 8, blank mode) they get a thin dark edge and
less dimming, or they would all but vanish (owner, 2026-09-29: "buttons perfect"). --emoji-edge and
--np-dim are set per theme below; opacity(1) = no edge. */
:root { --emoji-edge: opacity(1); --np-dim: .45; }
.theme-1, .theme-8, .blank-mode { --emoji-edge: drop-shadow(0 0 .5px rgba(0,0,0,.95)) drop-shadow(0 0 .5px rgba(0,0,0,.6)); --np-dim: .75; }
.np-next { font-size: 1.1rem; font-size: calc(1.1rem * var(--ui)); opacity: .45; opacity: var(--np-dim); filter: grayscale(1); filter: grayscale(1) var(--emoji-edge); } /* ⏭ auto-play the next file */
.np-next[aria-pressed="true"] { opacity: 1; filter: none; filter: var(--emoji-edge); background-color: var(--row2); box-shadow: inset 0 0 0 1px var(--panel-border); }
.np-full { font-size: 1.05rem; font-size: calc(1.05rem * var(--ui)); opacity: .55; opacity: calc(var(--np-dim) + .1); filter: var(--emoji-edge); } /* low-key: open in the full Player */
.np-full:hover { opacity: 1; }
.np-line.is-loading .np-toggle { animation: e4-pulse 1s ease-in-out infinite; }
@keyframes e4-pulse { 50% { opacity: .55; } }
/* --------------------------- Picture links Link_1 … Link_9 -------------- */
.picture-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 18px 0 6px; }
.picture-link { display: inline-block; border-radius: 6px; line-height: 0; transition: transform .15s ease-out; }
.picture-link:hover { transform: scale(1.06); }
.picture-link img { display: block; max-width: 100px; height: auto; }
/* --------------------------- Keyboard focus ------------------------------ */
.explorer-container a:focus-visible,
.explorer-container button:focus-visible,
.explorer-container input:focus-visible { outline: 3px solid var(--title); outline-offset: 2px; }
.search-area input:focus-visible { outline: 0; } /* the whole search line shows focus */
/* --------------------------- Theme one-offs ------------------------------ */
.theme-7 .table .row:hover,
.theme-7 .table .row:hover a.item,
.theme-7 .table .row.audio-playing-row a.item { color: #ffffff; }
/* --------------------------- Phones and tablets -------------------------- */
@media (max-width: 768px) {
.explorer-container { margin: 10px; padding: 10px; }
h1.main-title { font-size: var(--title-size-m); }
.second-title { font-size: 1em; }
.navigation-controls { align-items: flex-start; flex-direction: column; }
.table td { padding-left: 5px; padding-right: 5px; }
.table .icon { padding-right: 5px; }
.font-x-small .file-list-table td { font-size: .65rem; }
.font-small .file-list-table td { font-size: .8rem; padding-top: 5px; padding-bottom: 5px; }
.file-list-table td { font-size: .9rem; padding-top: 8px; padding-bottom: 8px; }
.font-large .file-list-table td { font-size: 1rem; padding-top: 10px; padding-bottom: 10px; }
.font-x-large .file-list-table td { font-size: 1.1rem; padding-top: 11px; padding-bottom: 11px; }
.table tr.np-line > td { padding: 4px 5px 6px; }
}
@media (max-width: 480px) {
h1.main-title { margin-top: 4px; font-size: var(--title-size-s); }
.second-title { font-size: .9em; }
.tool-line { gap: 2px 8px; }
.tools { gap: 0; }
.name-cell { gap: 5px; }
.now-playing { gap: 3px; }
.np-track { gap: 5px; }
.np-dur { display: none; } /* phones: current time only, the slider shows the rest */
.np-btn { width: 36px; height: 36px; width: min(calc(38px * var(--ui)), 10.5vw); height: min(calc(38px * var(--ui)), 10.5vw); }
.np-speed { width: auto; min-width: 44px; height: 30px; padding: 0 6px; min-width: min(calc(44px * var(--ui)), 12vw); }
}
/* --------------------------- Reduced motion ------------------------------ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
}
/* ==========================================================================
BLANK MODE (?blank=true — plain page for embedding in an iframe)
Transparent, black text with a soft white halo, large 28 px type.
========================================================================== */
.blank-mode body {
padding: 5px;
background: transparent;
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 28px;
text-shadow: .7px .7px 0 #fff, 0 0 .4px #fff;
transition: none;
}
.blank-mode .explorer-container { max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.blank-mode h1.main-title { margin: 5px auto; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 1.5em; letter-spacing: normal; color: #000; text-shadow: 0 0 .8px #fff, 0 0 1.6px #fff; }
.blank-mode .second-title { margin: 3px auto 10px; font-size: 1.2em; font-style: normal; color: #333; }
.blank-mode .tool-line { margin: 0 0 5px; font-size: 16px; text-shadow: none; }
.blank-mode .tool-line .second-title { margin: 0; font-size: 28px; line-height: 1.3; text-align: center; text-shadow: .7px .7px 0 #fff, 0 0 .4px #fff; }
.blank-mode .tool { color: #000; }
.blank-mode .search-area { background: #fff; border-color: #ccc; }
.blank-mode .filter-box { color: #000; }
.blank-mode .navigation-controls,
.blank-mode .bottom-navigation-controls { margin: 5px 0; }
.blank-mode .back-button { padding: 3px 6px; border: 1px solid #ccc; border-radius: 3px; background: #f0f0f0; font-size: .9em; }
.blank-mode .back-button img { filter: none; }
.blank-mode .breadcrumb,
.blank-mode .breadcrumb a,
.blank-mode .breadcrumb [aria-current] { color: #000; }
.blank-mode .table.file-list-table { margin-top: 5px; }
.blank-mode .table td { padding: 3px 5px; font-size: 1em; line-height: 1.3; color: #000; border-bottom: 1px solid #eee; } /* as many rows as the original in the same window */
.blank-mode .table .row.one,
.blank-mode .table .row.two { background: transparent; }
.blank-mode .table .row:hover { background: #f5f5f5; }
.blank-mode .table .row.audio-playing-row { outline: 0; background: #e8f4ff; }
.blank-mode .table .icon { width: 35px; padding-right: 6px; }
.blank-mode .table a.item,
.blank-mode .table a.item:visited,
.blank-mode .table a.item.dir { color: #000; font-weight: normal; }
.blank-mode .table a.item:hover { color: #333; }
.blank-mode .error-message { padding: 5px; text-align: left; color: #c00; background: #ffe0e0; border: 1px solid #c00; }
.blank-mode .direct-link { clear: both; margin: 15px 0 10px; text-align: center; font-size: 12px; }
.blank-mode .direct-link a { color: #333; }
.blank-mode .table tr.np-line > td { padding: 3px 5px; font-size: 16px; text-shadow: none; color: #000; background: #e8f4ff; }
.blank-mode .np-toggle { background: #1976d2; color: #fff; }
.blank-mode .np-seek { accent-color: #1976d2; }
.blank-mode .np-speed { border-color: #ccc; }
.blank-mode .np-speed.changed { background: #1976d2; color: #fff; border-color: #1976d2; }
/* Blank mode on a DARK page: the JavaScript looks at the colour behind the window (html.on-dark),
e.g. a dark-themed Explorer page showing Link_A windows. White text with a black edge. */
.blank-mode.on-dark { --emoji-edge: opacity(1); --np-dim: .55; }
.blank-mode.on-dark body { color: #fff; text-shadow: .7px .7px 0 #000, 0 0 .4px #000; }
.blank-mode.on-dark h1.main-title { color: #fff; text-shadow: 0 0 .8px #000, 0 0 1.6px #000; }
.blank-mode.on-dark .second-title { color: #e8e8e8; }
.blank-mode.on-dark .tool-line .second-title { text-shadow: .7px .7px 0 #000, 0 0 .4px #000; }
.blank-mode.on-dark .tool,
.blank-mode.on-dark .filter-box,
.blank-mode.on-dark .crumb-more,
.blank-mode.on-dark .breadcrumb,
.blank-mode.on-dark .breadcrumb a,
.blank-mode.on-dark .breadcrumb [aria-current],
.blank-mode.on-dark .table td,
.blank-mode.on-dark .table a.item,
.blank-mode.on-dark .table a.item:visited,
.blank-mode.on-dark .table a.item.dir { color: #fff; }
.blank-mode.on-dark .table a.item:hover { color: #ddd; }
.blank-mode.on-dark .table td { border-bottom-color: rgba(255,255,255,.18); }
.blank-mode.on-dark .table .row:hover { background: rgba(255,255,255,.08); }
.blank-mode.on-dark .table .row.audio-playing-row { background: rgba(120,170,255,.18); }
.blank-mode.on-dark .search-area { background: #1e1e1e; border-color: #555; }
.blank-mode.on-dark .back-button { background: #2b2b2b; border-color: #555; }
.blank-mode.on-dark .back-button img { filter: invert(1); }
.blank-mode.on-dark .direct-link a { color: #ddd; }
.blank-mode.on-dark .table tr.np-line > td { background: #1b2a3c; color: #fff; }
.blank-mode.on-dark .np-speed { border-color: #666; }