html, body {
overflow-x: hidden;
max-width: 100%;
}
:root {
--bg: #ffffff;
--text: #000000;
--accent: #a200ff;
--header-bg: #ffffff;
--btn-bg: var(--accent);
--btn-hover: #8800cc;
--footer-text: #888;
--surface: #f9f9f9;
--emoji-bg: #f0f0f0;
}
#mainHeader { top: 0; }
body { -webkit-text-size-adjust: 100%; }
/* ✅ Dark mode variables MUST exist on BOTH html + body
Otherwise keeps :root vars and gutters stay white */
html.dark,
body.dark {
--emoji-bg: #222;
--bg: #111;
--text: #f2f2f2;
--header-bg: #181818;
--surface: #1a1a1a;
--btn-bg: #bb33ff;
--btn-hover: #d466ff;
--footer-text: #aaa;
}
/* === GLOBAL === */
html, body {
background: var(--bg);
min-height: 100%;
transition: background 0.3s, color 0.3s;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
background: var(--bg);
color: var(--text);
font-family: "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
margin: 0;
padding: 0;
}
main {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
background: transparent; /* ✅ avoid white sections on pages */
}
* {
box-sizing: border-box;
}
/* === HEADER === */
header {
width: 100%;
background: var(--header-bg);
padding: 20px 0;
border-bottom: 1px solid #e5e5e5;
transition: background 0.3s, border-color 0.3s;
}
body.dark header {
border-bottom: 1px solid #333;
}
/* Some pages use these containers */
.header-inner,
.container-fluid {
background: var(--header-bg);
transition: background 0.3s;
}
/* Logo */
.logo {
font-size: 2em;
font-weight: 700;
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
color: var(--text);
}
.logo span {
color: var(--accent);
}
body.dark .logo {
color: #f8f8f8;
}
/* === SEARCH === */
.search-wrapper,
.search-block {
flex: 1 1 400px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
min-width: 240px;
}
.search-wrapper input,
.search-block input {
width: 100%;
padding: 10px 14px;
font-size: 1.1em;
border: 2px solid #ccc;
border-radius: 8px;
background: var(--surface);
color: var(--text);
outline: none;
transition: border-color 0.2s ease, background 0.3s, color 0.3s;
}
.search-wrapper input:focus,
.search-block input:focus {
border-color: var(--accent);
}
body.dark .search-wrapper input,
body.dark .search-block input {
background: #222;
color: #eee;
border-color: #444;
}
#emojiCount {
color: #777;
font-size: 0.95em;
white-space: nowrap;
}
body.dark #emojiCount {
color: #aaa;
}
/* === THEME TOGGLE === */
#themeToggle,
#themeToggleDesktop {
font-size: 1.6em;
background: none;
border: none;
cursor: pointer;
padding: 5px;
color: var(--text);
transition: transform 0.2s, color 0.3s;
}
#themeToggle:hover,
#themeToggleDesktop:hover {
transform: scale(1.15);
}
body.dark #themeToggle,
body.dark #themeToggleDesktop {
color: #fff;
}
/* === CATEGORY BUTTONS === */
#categories {
margin: 0;
padding: 15px 10px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
background: var(--surface);
transition: background 0.3s;
}
body.dark #categories {
background: #141414;
}
#categories button {
background: var(--btn-bg);
color: #fff;
border: none;
border-radius: 6px;
padding: 8px 14px;
cursor: pointer;
transition: transform 0.1s, background 0.2s;
}
#categories button:hover {
background: var(--btn-hover);
transform: scale(1.05);
}
/* === EMOJI GRID === */
#emojiContainer {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
gap: 6px;
padding: 20px;
justify-items: center;
justify-content: start;
align-items: start;
align-content: start;
background: var(--bg);
color: var(--text);
transition: background 0.3s, color 0.3s;
height: auto !important;
}
/* === EMOJI ITEMS === */
.emoji-item {
width: 52px;
aspect-ratio: 1 / 1;
display: flex;
justify-content: center;
align-items: center;
font-size: 2.6rem;
cursor: pointer;
user-select: none;
transition: transform 0.15s ease;
line-height: 1;
padding: 0;
margin: 0;
}
.emoji-item.hidden {
display: none !important;
}
.emoji-item:hover {
transform: scale(1.25);
}
.emoji-item img,
.emoji-item span {
width: 3.6rem;
height: 3.6rem;
object-fit: contain;
display: block;
vertical-align: middle;
}
/* === Category colors === */
.emoji-item[data-category="Smileys & Emotion"] { background: rgba(255, 204, 229, 0.6); }
.emoji-item[data-category="People & Body"] { background: rgba(255, 223, 186, 0.6); }
.emoji-item[data-category="Animals & Nature"] { background: rgba(204, 255, 204, 0.6); }
.emoji-item[data-category="Food & Drink"] { background: rgba(255, 243, 204, 0.6); }
.emoji-item[data-category="Travel & Places"] { background: rgba(204, 238, 255, 0.6); }
.emoji-item[data-category="Activities"] { background: rgba(255, 229, 204, 0.6); }
.emoji-item[data-category="Objects"] { background: rgba(229, 204, 255, 0.6); }
.emoji-item[data-category="Symbols"] { background: rgba(230, 230, 230, 0.6); }
.emoji-item[data-category="Flags"] { background: rgba(204, 255, 245, 0.6); }
body.dark .emoji-item[data-category] { filter: brightness(0.8); }
.emoji-item[data-category]:hover { filter: brightness(1.15); }
.emoji-item[data-category] {
border-radius: 8px;
border: 1px solid rgba(0,0,0,0.05);
}
body.dark .emoji-item[data-category] {
border-color: rgba(255,255,255,0.05);
}
/* === FOOTER === */
footer {
background: var(--bg);
color: var(--footer-text);
text-align: center;
padding: 20px 0;
transition: background 0.3s, color 0.3s;
border-top: none;
margin-top: auto;
}
/* === COPIED BUBBLE === */
.copied-bubble {
position: absolute;
background: rgba(162, 0, 255, 0.9);
color: #fff;
font-size: 0.8em;
padding: 4px 8px;
border-radius: 6px;
transform: scale(0.8);
opacity: 0;
animation: copied-pop 0.7s ease-out forwards;
pointer-events: none;
z-index: 9999;
}
@keyframes copied-pop {
0% { opacity: 0; transform: translateY(0) scale(0.8); }
20% { opacity: 1; transform: translateY(-10px) scale(1); }
80% { opacity: 1; transform: translateY(-15px) scale(1); }
100% { opacity: 0; transform: translateY(-25px) scale(0.8); }
}
/* === Selection bar === */
.selection-bar{
position: fixed;
bottom: 10px;
left: 12px;
right: 12px;
transform: none;
width: auto;
max-width: 1200px;
margin: 0 auto;
z-index: 10000; /* ✅ aby to bylo nad gridem i mixer boxem */
display: flex; /* ✅ klíčové */
align-items: center;
gap: 8px;
background: var(--header-bg); /* ✅ bar už nebude “neviditelný” */
border: 2px solid rgba(0, 140, 255, 0.6);
border-radius: 12px;
padding: 6px 10px;
box-shadow: 0 0 20px rgba(0, 140, 255, 0.15);
}
body.dark .selection-bar{
background: #000;
border-color: rgba(0, 200, 255, 0.6);
box-shadow: 0 0 20px rgba(0, 200, 255, 0.15);
}
body{
padding-bottom: 80px; /* prostor pro selection-bar */
}
html, body { overflow-x: hidden; max-width: 100%; }
@keyframes pulseBorder {
0% { border-color: rgba(0, 140, 255, 0.5); }
50% { border-color: rgba(0, 200, 255, 1); }
100% { border-color: rgba(0, 140, 255, 0.5); }
}
body.dark .selection-bar {
background: #000;
border-color: rgba(0, 200, 255, 0.6);
box-shadow: 0 0 20px rgba(0, 200, 255, 0.15);
}
/* Selected emoji list */
.selected-emojis {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
flex-grow: 1;
gap: 6px;
font-size: 1.9rem;
scrollbar-width: none;
scroll-behavior: smooth;
}
.selected-emojis::-webkit-scrollbar { display: none; }
.selected-emojis span {
cursor: pointer;
padding: 6px 8px;
border-radius: 8px;
background: var(--surface);
transition: transform 0.2s;
}
.selected-emojis span:hover { transform: scale(1.2); }
/* Copy button */
.btn-accent {
background: var(--accent);
color: #fff;
border: none;
border-radius: 8px;
padding: 8px 16px;
font-weight: 600;
cursor: pointer;
transition: background 0.3s;
}
.btn-accent:hover {
background: var(--btn-hover);
}
/* Scroll arrows */
.scroll-btn {
background: rgba(0, 0, 0, 0.05);
color: var(--text);
border: none;
border-radius: 50%;
width: 28px;
height: 28px;
font-size: 1.1rem;
line-height: 28px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s, background 0.3s, transform 0.2s;
backdrop-filter: blur(6px);
}
.selection-bar:hover .scroll-btn { opacity: 0.8; }
.scroll-btn:hover {
background: var(--accent);
color: #fff;
transform: scale(1.1);
}
body.dark .scroll-btn {
background: rgba(255,255,255,0.08);
color: #ddd;
}
body.dark .scroll-btn:hover {
background: var(--accent);
color: #fff;
}
/* === Logo hover === */
.logo span, .logo {
transition: transform 0.3s ease;
}
.logo:hover {
transform: scale(1.05);
}
/* === EmojiMax logo (pseudo emoji) === */
.logo {
display: flex;
align-items: flex-end;
gap: 8px;
font-weight: 200 !important;
font-family: "Segoe UI", "Noto Sans", "Inter", sans-serif;
color: var(--text);
line-height: 1;
}
.logo::before {
content: "💩";
font-size: 1.9em;
display: inline-block;
transform: translateY(2px);
}
body.dark .logo {
color: #fff;
}
/* =========================
AUTH MODAL DARK SUPPORT
(keep, but only for body.dark)
========================= */
body.dark-mode #mainHeader,
body.dark #mainHeader{
background: #0b1220 !important;
border-bottom-color: rgba(255,255,255,.10) !important;
}
body.dark #search{
background: #111827 !important;
color: #e5e7eb !important;
border-color: rgba(255,255,255,.12) !important;
}
body.dark #search::placeholder{
color: #9ca3af !important;
opacity: 1 !important;
}
body.dark #emAuthBar{ background: transparent !important; }
body.dark #emAuthModal{ background: rgba(0,0,0,.65) !important; }
body.dark #emAuthModal > div{
background: #0b1220 !important;
color: #e5e7eb !important;
}
body.dark #emAuthModal label,
body.dark #emAuthModal p{
color: #9ca3af !important;
}
body.dark #emAuthModal .form-control{
background: #111827 !important;
color: #e5e7eb !important;
border-color: rgba(255,255,255,.12) !important;
}
body.dark #emAuthModal .form-control:focus{
box-shadow: 0 0 0 .2rem rgba(162,0,255,.25) !important;
}
body.dark #emAuthModal a{
color: #c4b5fd !important;
}
body.dark #emAuthModal #mError{
color: #fca5a5 !important;
}
/* =========================
About link (visible in light + dark)
========================= */
#mainHeader .navLink{
display:inline-flex;
align-items:center;
height:44px;
padding:0 10px;
border-radius:10px;
font-weight:600;
text-decoration:none;
color: var(--text) !important; /* ✅ FIX: never invisible */
}
#mainHeader .navLink:hover{
background: rgba(0,0,0,0.06);
}
body.dark #mainHeader .navLink:hover{
background: rgba(255,255,255,0.10);
}
/* ===========================
Emoji Mixer Box (stable)
(kept as you had it)
=========================== */
#emojiMixerBox{
position: fixed;
left: 16px;
top: 120px;
z-index: 9999;
--collapseX: 0px;
transform: translateX(var(--collapseX));
transition: transform 180ms ease;
user-select: none;
-webkit-user-select: none;
touch-action: none;
}
#emojiMixerBox.dragging{ transition: none !important; }
#emojiMixerBox .drag-handle{ cursor: grab; touch-action: none; }
#emojiMixerBox.dragging .drag-handle{ cursor: grabbing; }
/* ===========================
FINAL OVERRIDES (MUST BE LAST)
Fix: white gutters + invisible About
=========================== */
/* 1) Tell Bootstrap to use your theme variables */
:root{
--bs-body-bg: var(--bg);
--bs-body-color: var(--text);
}
html.dark,
body.dark{
--bs-body-bg: var(--bg);
--bs-body-color: var(--text);
}
/* 2) Hard override backgrounds (Bootstrap reboot overrides body bg otherwise) */
html, body{
background-color: var(--bg) !important;
color: var(--text) !important;
}
/* 3) If anything wraps page with white bg, force transparent */
body.dark main,
body.dark .container,
body.dark .container-fluid{
background: transparent !important;
}
/* 4) About link always visible */
#mainHeader .navLink{
color: var(--text) !important;
opacity: 1 !important;
filter: none !important;
mix-blend-mode: normal !important;
}
body.dark #mainHeader .navLink{
color: var(--text) !important;
}
/* (optional) if header itself is dark, ensure logo text is readable */
body.dark #mainHeader .logo-text,
body.dark #mainHeader .logo-wrap{
color: var(--text) !important;
}
/* disable transitions only during theme switch */
html.theme-switching *,
body.theme-switching *{
transition: none !important;
animation: none !important;
}
/* ===============================
FIX: Top auth bar (logged user) in DARK MODE
(#emAuthBar is injected by loginregister.js)
Put this at the VERY END of style.css
=============================== */
body.dark-mode #emAuthBar{
background: #12121400 !important;
border-bottom: 1px solid rgba(255,255,255,0.10) !important;
box-shadow: none !important;
color: rgba(0, 0, 0, 0.92) !important;
}
body.dark-mode #emAuthBar,
body.dark-mode #emAuthBar *{
color: rgba(0, 0, 0, 0.92) !important;
}
/* Links inside auth bar (if any) */
body.dark-mode #emAuthBar a{
color: rgba(0, 0, 0, 0.92) !important;
text-decoration: none !important;
}
/* Buttons in auth bar (Change / Clear / Logout etc.) */
body.dark-mode #emAuthBar button,
body.dark-mode #emAuthBar .btn,
body.dark-mode #emAuthBar input[type="button"],
body.dark-mode #emAuthBar input[type="submit"]{
color: rgba(0, 0, 0, 0.92) !important;
background: rgba(255,255,255,0.08) !important;
border: 1px solid rgba(255,255,255,0.18) !important;
box-shadow: none !important;
}
body.dark-mode #emAuthBar button:hover,
body.dark-mode #emAuthBar .btn:hover{
background: rgba(255,255,255,0.14) !important;
border-color: rgba(255,255,255,0.22) !important;
}
/* Profile emoji thumbnail (if it’s an ![]()
inside the bar) */
body.dark-mode #emAuthBar img{
background: rgba(255,255,255,0.06) !important;
border: 1px solid rgba(255,255,255,0.14) !important;
}
/* Make spacing consistent (prevents “weird” alignment on wide screens) */
body.dark-mode #emAuthBar{
padding-top: 8px !important;
padding-bottom: 8px !important;
}
/* Mobile safety: allow wrapping instead of overflow */
@media (max-width: 768px){
body.dark-mode #emAuthBar{
flex-wrap: wrap !important;
gap: 10px !important;
}
}