:root { --bg: #fbfbfb; --text: #111111; --muted: #666666; --card: #f2f2f2; --input-bg: #ffffff; --input-text: #000000; --button: #10b981; --button-hover: #059669; --success: #10b981; } [data-theme="dark"] { --bg: #0f0f0f; --text: #ffffff; --muted: #aaaaaa; --card: rgba(255, 255, 255, 0.05); --input-bg: #1e1e1e; --input-text: #ffffff; --button: #10b981; --button-hover: #059669; --success: #10b981; } body { margin: 0; font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); display: flex; flex-direction: column; align-items: center; min-height: 100vh; transition: background 0.3s, color 0.3s; } h1 { font-size: 2.5rem; margin-bottom: 0.25rem; animation: fadeIn 1.2s ease-out; } p { font-size: 1.1rem; color: var(--muted); margin-bottom: 2rem; animation: fadeIn 1.5s ease-out; } h2, .main > p { text-align: left; } form { background: var(--card); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 2rem; width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: 1rem; animation: fadeIn 2s ease-out; } .main input, .main textarea, .main select, .main button { font-family: inherit; padding: 0.75rem 1rem; font-size: 1rem; border-radius: 8px; border: none; outline: none; } .main input, .main textarea, .main select { background: var(--input-bg); color: var(--input-text); border: 1px solid #ccc; } .main button { background: var(--button); color: white; cursor: pointer; transition: background 0.3s; } .main button:hover { background: var(--button-hover); } .message { margin-top: 1.5rem; text-align: center; font-size: 1.1rem; color: var(--success); display: none; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .abuse-extra { display: none; flex-direction: column; gap: 1rem; } footer { width: 100%; text-align: center; font-size: 0.9rem; color: var(--muted); margin-top: 160px; margin-bottom: 2rem; text-align: center; } #footerMenu { margin-bottom: 1.25rem; } #footerMenu a { color: var(--muted); text-decoration: none; margin: 0 0.25rem; } #footerMenu .dot { margin: 0 0.25rem; } .main textarea { resize: none; padding: 0.75rem 1rem 32px !important; min-height: 136px !important; } * { box-sizing: border-box; transition: all 0.2s ease-in-out; } header { position: relative; height: 60px; margin: 0; display: inline-block; width: 100%; padding: 12px 20px; display: flex; justify-content: space-between; align-items: center; } .logo span { width: 150px; height: 33px; display: inline-block; background-size: contain; background-image: url(/img/FlipClock_921_33b.png); background-repeat: no-repeat; position: absolute; top: 20px; left: 70px; } .language-dropdown select { width: 160px; height: 40px; font-size: 18px; border-radius: 20px; position: relative; padding: 8px 8px 8px 38px; border: 1px solid #e0e0e0; background: #fff; cursor: pointer; outline: none; color: #010101; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url('/img/globe-icon.svg'); background-repeat: no-repeat; background-position: 10px center; background-size: 20px; font-family: auto; } .language-dropdown { display: inline-block; position: relative; position: absolute; right: 5px; top: 10px; } .language-dropdown:after, .category-dropdown:after { content: ''; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 11px; height: 6px; background-image: url('/img/arrow-icon.svg'); background-repeat: no-repeat; background-size: 11px; pointer-events: none; } [data-theme="dark"] { --background-light: #1e1e1e; --background-dark: #fbfbfb; --text-light: #f5f5f5; --text-dark: #333333; --divider-color-light: #444444; --divider-color-dark: #dddddd; --background-card-light: #222; --background-card-dark: #ffffff; } [data-theme="dark"] .post-annotation { color: #ddd; } [data-theme="dark"] .logo span { background-image: url('/img/FlipClock_921_33w.png'); } [data-theme="dark"] .breadcrumbs-section a { background: rgb(255 255 255 / 7%); } [data-theme="dark"] .language-dropdown select { color: #f0f0f0; border-color: #1e1e1e; background-color: #1e1e1e; } body::-webkit-scrollbar { width: 16px; } body::-webkit-scrollbar-thumb { height: 56px; border-radius: 8px; border: 4px solid transparent; background-clip: content-box; background-color: #606060; } body::-webkit-scrollbar-thumb:hover { background-color: #909090; } .theme-toggle { position: absolute; top: 0; right: 170px; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.4s ease; overflow: hidden; z-index: 1969; } [data-theme="light"] { --background-toggle: #fbfbfb; } [data-theme="dark"] { --background-toggle: #2d3436; } .theme-icon { width: 40px; height: 40px; background: url('/img/sun_40.svg?1') 50% 50% no-repeat; background-size: 40px; border-radius: 50%; position: relative; box-shadow: 0 0 15px var(--icon-shadow); transition: all 0.5s ease; } [data-theme="light"] .theme-icon { --icon-color: #f9ca24; --icon-shadow: rgba(255, 255, 255, 0); } [data-theme="dark"] .theme-icon { --icon-color: #636e72; --icon-shadow: rgba(99, 110, 114, 0.5); } .theme-icon::before { content: ''; position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; transform: translate(-50%, -50%) scale(0); border-radius: 50%; opacity: 0.5; transition: transform 0.4s ease, opacity 0.4s ease; } [data-theme="light"] .theme-icon::before { transform: translate(-50%, -50%) scale(1); } .theme-icon::after { content: ''; position: absolute; top: -40%; left: 40%; width: 3px; height: 3px; background: #bdb9ff; border-radius: 50%; opacity: 0; transition: opacity 0.4s ease, transform 0.4s ease; } [data-theme="dark"] .theme-icon::after { opacity: 1; transform: translate(10px, 10px); } [data-theme="dark"] .theme-icon { background: var(--icon-color) url(/img/moon_900.svg) 0 0 no-repeat; background-size: 40px; } [data-theme="light"] .theme-icon { background: url('/img/sun_40.svg?1') 50% 50% no-repeat; background-size: 40px; } input:focus, textarea:focus, select:focus {outline: none;} html[dir="rtl"] .language-dropdown { left: 5px; right: auto; } html[dir="rtl"] .language-dropdown select { padding: 8px 38px 8px 8px; background-position: 130px center; } html[dir="rtl"] .language-dropdown:after, html[dir="rtl"] .category-dropdown:after { left: 12px; right: auto; } html[dir="rtl"] .theme-toggle { left: 170px; right: auto; } .main { margin: 100px 0.8rem 0; text-align: center; } form { margin: 0 auto; } .category-dropdown { position: relative; } .main select { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; } [data-theme="dark"] .language-dropdown:after, [data-theme="dark"] .category-dropdown:after { background-image: url('/img/arrow-icon_white.svg'); opacity: 0.95; } [data-theme="dark"] .language-dropdown select { background-image: url('/img/globe-icon_white.svg'); opacity: 0.95; } [data-theme="dark"] ::placeholder { color: #8a8a8a; } @media screen and (max-width: 480px) { form { margin: 0; padding: 2rem 1rem; width: auto; } .language-dropdown { right: 9px; } .theme-toggle { right: 167px; } header { padding: 12px 10px; } } :root { --primary-color: #4361ee; --secondary-color: #3f37c9; --shadow: 0 4px 20px rgba(0, 0, 0, 0.1); --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); --bg-color: #f5f5f5; --card-color: #ffffff; --accent-color: #6a5acd; --text-color: #333333; --secondary-text: #666666; --border-color: #e0e0e0; --shadow-color: rgba(0, 0, 0, 0.1); --hover-shadow: rgba(106, 90, 205, 0.2); --favorite-color: #ff6b6b; --danger-color: #ff4757; --love-color: #ff6b81; } [data-theme="dark"] { --bg-color: #121212; --card-color: #1e1e1e; --accent-color: #7e57c2; --text-color: #e0e0e0; --secondary-text: #aaaaaa; --border-color: #333333; --shadow-color: rgba(0, 0, 0, 0.3); --hover-shadow: rgba(126, 87, 194, 0.3); --favorite-color: #ff8787; --danger-color: #ff6b81; --love-color: #ff8fab; } .hamburger-menu { display: none; position: absolute; left: 20px; top: 15px; z-index: 2025; cursor: pointer; } .hamburger-icon { width: 30px; height: 3px; background-color: var(--text-color); margin: 6px 0; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transform-origin: center; } .hamburger-menu.active { position: fixed; left: 25px; } .nav-menu { position: fixed; top: 0; left: -300px; width: 250px; height: 100vh; background-color: var(--card-color); box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1); z-index: 2023; transition: all 0.3s ease; padding-top: 70px; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; } .nav-menu.open { left: 0; } .nav-menu a { display: block; padding: 12px 20px; color: var(--text-color); text-decoration: none; transition: background-color 0.3s; } .nav-menu a:hover { background-color: var(--bg-color); } .menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 98; opacity: 0; visibility: hidden; transition: all 0.3s ease; touch-action: none; } .menu-overlay.open { opacity: 1; visibility: visible; } .bottom-nav { display: none; position: fixed; bottom: 0; left: 0; width: 100%; background-color: var(--card-color); box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); z-index: 100; padding: 5px 0; } .bottom-nav-container { display: flex; justify-content: space-around; } .bottom-nav-item { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--text-color); font-size: 0.8rem; width: 25%; } #navMore { cursor: pointer; } .bottom-nav-icon { font-size: 1.5rem; margin-bottom: 1px; width: 24px; height: 24px; background-size: contain; } .bottom-nav-container .bottom-nav-icon[data-id="home"] { background-image: url("/img/nav/home_48b.png"); } .bottom-nav-container .bottom-nav-icon[data-id="time"] { background-image: url("/img/nav/time_48b.png"); } .bottom-nav-container .bottom-nav-icon[data-id="moon"] { background-image: url("/img/moon_v4_48b.png"); } .bottom-nav-container .bottom-nav-icon[data-id="emoji"] { background-image: url("/img/nav/emoji_48b.png"); } .bottom-nav-container .bottom-nav-icon[data-id="more"] { background-image: url("/img/nav/more_48b.png"); } [data-theme="dark"] .bottom-nav-container .bottom-nav-icon { opacity: 0.88; } [data-theme="dark"] .bottom-nav-container .bottom-nav-icon[data-id="home"] { background-image: url("/img/nav/home_48w.png"); } [data-theme="dark"] .bottom-nav-container .bottom-nav-icon[data-id="time"] { background-image: url("/img/nav/time_48w.png"); } [data-theme="dark"] .bottom-nav-container .bottom-nav-icon[data-id="moon"] { background-image: url("/img/moon_v4_48w.png"); } [data-theme="dark"] .bottom-nav-container .bottom-nav-icon[data-id="emoji"] { background-image: url("/img/nav/emoji_48w.png"); } [data-theme="dark"] .bottom-nav-container .bottom-nav-icon[data-id="more"] { background-image: url("/img/nav/more_48w.png"); } .bottom-nav-text { font-size: 0.7rem; text-overflow: ellipsis; white-space: nowrap; } @media (min-width: 769px) { .hamburger-menu { display: block; } } @media (max-width: 768px) { .bottom-nav { display: block; } .main { padding-bottom: 70px; } footer { margin-bottom: 70px; } .logo span { display: none; } .nav-menu .logo span { left: 25px; display: block; } html[dir="rtl"] .nav-menu .logo span { right: 25px; } } .nav-menu > a { position: relative; padding-left: 60px; transition: all 0.3s ease; margin: 0 10px; border-radius: 8px; } .nav-menu > a::before { content: ''; position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; background-size: contain; background-repeat: no-repeat; background-position: center; transition: all 0.3s ease; } .nav-menu a[data-id="main"]::before { background-image: url("/img/nav/home_48b.png"); } .nav-menu a[data-id="time"]::before { background-image: url("/img/nav/time_48b.png"); } .nav-menu a[data-id="emoji"]::before { background-image: url("/img/nav/emoji_48b.png"); } .nav-menu a[data-id="moon"]::before { background-image: url("/img/moon_v4_48b.png"); } .nav-menu a[data-id="blog"]::before { background-image: url("/img/nav/post_48b.png"); } .nav-menu a[data-id="support-us"]::before { background-image: url("/img/nav/support-us_48b.png"); } .nav-menu a[data-id="feedback"]::before { background-image: url("/img/nav/feedback_48b.png"); } .nav-menu .line { border-bottom: 1px solid var(--border-color); margin-top: 20px; } #nav-info { font-size: 0.8rem; padding: 12px 0 12px 25px; } #nav-info a { display: inline-block; padding: 3px 8px 3px 0; border-bottom: none; font-size: 0.85rem; } #nav-info a:hover { background-color: unset; } #nav-copyright { padding: 2px 15px 2px 25px; display: block; color: #333; font-size: 0.75rem; } #nav-copyright { color: #555; } .nav-menu a:hover::before { transform: translateY(-50%) scale(1.1); } .nav-menu a.active { color: var(--accent-color); } .nav-menu a.active::before { filter: brightness(0.8) sepia(1) hue-rotate(200deg) saturate(5); } [data-theme="dark"] .nav-menu a[data-id="main"]::before { background-image: url("/img/nav/home_48w.png"); } [data-theme="dark"] .nav-menu a[data-id="time"]::before { background-image: url("/img/nav/time_48w.png"); } [data-theme="dark"] .nav-menu a[data-id="emoji"]::before { background-image: url("/img/nav/emoji_48w.png"); } [data-theme="dark"] .nav-menu a[data-id="moon"]::before { background-image: url("/img/moon_v4_48w.png"); } [data-theme="dark"] .nav-menu a[data-id="blog"]::before { background-image: url("/img/nav/post_48w.png"); } [data-theme="dark"] .nav-menu a[data-id="support-us"]::before { background-image: url("/img/nav/support-us_48w.png"); } [data-theme="dark"] .nav-menu a[data-id="feedback"]::before { background-image: url("/img/nav/feedback_48w.png"); } html[dir="rtl"] .hamburger-menu { left: auto; right: 20px; } html[dir="rtl"] .nav-menu { left: auto; right: -300px; } html[dir="rtl"] .nav-menu.open { right: 0; } html[dir="rtl"] .nav-menu > a { padding-left: auto; padding-right: 60px; } html[dir="rtl"] .nav-menu > a::before { left: auto; right: 15px; } .share-btn { position: absolute; margin: 0; top: 10px; right: 230px; background: none; border: none; border-radius: 50px; padding: 0.5rem 1rem; display: flex; align-items: center; gap: 0.5rem; cursor: pointer; color: var(--text-color); transition: all 0.3s ease; height: 40px; font-weight: bold; font-family: 'Segoe UI', system-ui, sans-serif; font-size: 0.9rem; } .share-btn:hover { background: var(--card-color); } html[dir="rtl"] .share-btn { left: 230px; right: auto; } html[dir="rtl"] .logo span { left: auto; right: 70px; } html[dir="rtl"] h2, html[dir="rtl"] .main > p { text-align: right; } .main a { text-decoration: none; color: #1360d1; } .main a:hover { text-decoration: underline; } [data-theme="dark"] .main a { color: #9ddfff; } .toast { visibility: hidden; min-width: 250px; background-color: #333; color: #fff; text-align: center; border-radius: 4px; padding: 16px; position: fixed; z-index: 1000; bottom: 30px; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.3s, visibility 0.3s; } .toast.show { visibility: visible; opacity: 1; } .toast.success { background-color: #4CAF50; } .toast.error { background-color: #F44336; } .toast.warning { background-color: #FF9800; }