on-codemerge
Version:
A WYSIWYG editor for on-codemerge is a user-friendly interface that allows users to edit and view their code in real time, exactly as it will appear in the final product
3 lines (2 loc) • 2.14 kB
CSS
/*! on-codemerge v1.3.1 @author Pavel Kuzmin @license MIT @homepage https://s00d.github.io/on-codemerge/ @repository git+https://github.com/s00d/on-codemerge.git Copyright (c) 2026 Pavel Kuzmin - Built on 2026-07-02T13:39:17.947Z */
.timer-widget{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;border:1px solid #e5e7eb;border-radius:8px;margin:1rem 0;background:#fff;box-shadow:0 1px 3px #0000001a;padding:1rem;position:relative}.timer-widget *{box-sizing:border-box}.timer-widget:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--timer-color, #3b82f6);border-radius:2px}.timer-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.timer-title{margin:0;font-size:1.125rem;font-weight:600;color:#374151}.timer-category{font-size:.75rem;font-weight:500;color:#fff;padding:.25rem .5rem;border-radius:12px}.timer-description{font-size:.875rem;color:#6b7280;line-height:1.4;margin-bottom:.75rem}.timer-target-date{font-size:.875rem;color:#6b7280;margin-bottom:1rem;font-weight:500}.timer-countdown{display:flex;gap:1rem;justify-content:center;margin-bottom:1rem}.timer-unit{display:flex;flex-direction:column;align-items:center;min-width:60px}.timer-value{font-size:1.5rem;font-weight:700;color:#374151;line-height:1}.timer-label{font-size:.75rem;color:#6b7280;margin-top:.25rem;text-transform:uppercase;letter-spacing:.5px}.timer-expired{text-align:center;font-size:1.25rem;font-weight:600;color:#dc2626;padding:1rem;background:#fef2f2;border-radius:6px;margin-bottom:1rem}.timer-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}.timer-tag{font-size:.75rem;padding:.25rem .5rem;background-color:#f3f4f6;color:#374151;border-radius:12px;white-space:nowrap}html.dark .timer-widget{background:#1f2937;border-color:#374151;color:#f9fafb}html.dark .timer-title{color:#f9fafb}html.dark .timer-description,html.dark .timer-target-date{color:#9ca3af}html.dark .timer-value{color:#f9fafb}html.dark .timer-label{color:#9ca3af}html.dark .timer-expired{background:#7f1d1d;color:#fca5a5}html.dark .timer-tag{background-color:#374151;color:#d1d5db}