aboutsummaryrefslogtreecommitdiffstats
path: root/src/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'src/style.css')
-rw-r--r--src/style.css1022
1 files changed, 1022 insertions, 0 deletions
diff --git a/src/style.css b/src/style.css
new file mode 100644
index 0000000..c051103
--- /dev/null
+++ b/src/style.css
@@ -0,0 +1,1022 @@
+@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&display=swap");
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ /* DARK MODE (DEFAULT) */
+ --bg: #000000;
+ --fg: #ffffff;
+ --gray: #666666;
+ --panel: #0a0a0a;
+ --border-color: #ffffff;
+ --border-thin-color: #333333;
+ --input-ph: #333333;
+ --hover-bg: #111111;
+}
+
+body.light-mode {
+ /* LIGHT MODE (INVERTED) */
+ --bg: #f4f4f5;
+ --fg: #09090b;
+ --gray: #52525b;
+ --panel: #e4e4e7;
+ --border-color: #09090b;
+ --border-thin-color: #a1a1aa;
+ --input-ph: #a1a1aa;
+ --hover-bg: #d4d4d8;
+}
+
+/* Variables used in CSS */
+:root {
+ --border: 3px solid var(--border-color);
+ --border-thin: 1px solid var(--border-thin-color);
+}
+
+::selection {
+ background: var(--fg);
+ color: var(--bg);
+}
+
+html {
+ font-size: 14px;
+}
+
+body {
+ font-family: "IBM Plex Mono", monospace;
+ background: var(--bg);
+ color: var(--fg);
+ min-height: 100vh;
+ cursor: crosshair;
+ transition:
+ background 0.2s,
+ color 0.2s;
+}
+
+a {
+ color: inherit;
+ text-decoration: none;
+}
+
+/* HERO SEARCH */
+.hero {
+ min-height: 50vh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 40px 20px;
+ border-bottom: var(--border);
+ position: relative;
+}
+
+.hero.compact {
+ min-height: auto;
+ padding: 20px;
+ position: sticky;
+ top: 0;
+ background: var(--bg);
+ z-index: 1000;
+}
+
+.logo-large {
+ font-size: 72px;
+ font-weight: 700;
+ letter-spacing: -4px;
+ margin-bottom: 10px;
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+.hero.compact .logo-large {
+ font-size: 24px;
+ letter-spacing: -1px;
+ margin-bottom: 0;
+ position: absolute;
+ left: 30px;
+ top: 50%;
+ transform: translateY(-50%);
+}
+
+.logo-large::before {
+ content: ">";
+ animation: blink 1s infinite;
+}
+
+@keyframes blink {
+ 0%,
+ 49% {
+ opacity: 1;
+ }
+ 50%,
+ 100% {
+ opacity: 0;
+ }
+}
+
+.tagline {
+ font-size: 12px;
+ color: var(--gray);
+ letter-spacing: 4px;
+ text-transform: uppercase;
+ margin-bottom: 50px;
+}
+
+.hero.compact .tagline {
+ display: none;
+}
+
+.search-container {
+ width: 100%;
+ max-width: 800px;
+}
+
+.search-box {
+ display: flex;
+ border: var(--border);
+ background: var(--bg);
+}
+
+.search-prefix {
+ padding: 25px 25px;
+ font-size: 28px;
+ font-weight: 700;
+ border-right: var(--border);
+ background: var(--fg);
+ color: var(--bg);
+}
+
+#search-input {
+ flex: 1;
+ padding: 25px 30px;
+ font-size: 24px;
+ font-family: inherit;
+ font-weight: 600;
+ background: transparent;
+ color: var(--fg);
+ border: none;
+ outline: none;
+ letter-spacing: -0.5px;
+}
+
+#search-input::placeholder {
+ color: var(--input-ph);
+}
+
+.search-actions {
+ display: flex;
+}
+
+.action-btn {
+ width: 80px;
+ background: transparent;
+ border: none;
+ border-left: var(--border);
+ color: var(--fg);
+ font-size: 20px;
+ cursor: pointer;
+ transition: all 0.1s;
+ font-family: inherit;
+}
+
+.action-btn:hover {
+ background: var(--fg);
+ color: var(--bg);
+}
+
+.hero.compact .search-container {
+ max-width: 600px;
+}
+
+.hero.compact .search-box {
+ border-width: 2px;
+}
+
+.hero.compact .search-prefix {
+ padding: 15px 20px;
+ font-size: 20px;
+ border-width: 2px;
+}
+
+.hero.compact #search-input {
+ padding: 15px 20px;
+ font-size: 18px;
+}
+
+.hero.compact .action-btn {
+ width: 60px;
+ border-width: 2px;
+}
+
+/* SHORTCUTS */
+.shortcuts {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: 10px;
+ margin-top: 30px;
+}
+
+.hero.compact .shortcuts {
+ display: none;
+}
+
+.shortcut {
+ padding: 12px 20px;
+ border: 2px solid var(--border-thin-color);
+ font-size: 11px;
+ letter-spacing: 2px;
+ cursor: pointer;
+ transition: all 0.1s;
+ text-transform: uppercase;
+}
+
+.shortcut:hover {
+ border-color: var(--fg);
+ background: var(--fg);
+ color: var(--bg);
+}
+
+/* STATS BAR */
+.stats-bar {
+ display: none;
+ justify-content: center;
+ gap: 40px;
+ padding: 15px;
+ font-size: 11px;
+ letter-spacing: 2px;
+ color: var(--gray);
+ border-bottom: var(--border-thin);
+}
+
+.stats-bar.visible {
+ display: flex;
+}
+
+.stat-item {
+ display: flex;
+ gap: 10px;
+}
+
+.stat-value {
+ color: var(--fg);
+ font-weight: 700;
+}
+
+/* MAIN LAYOUT */
+.main {
+ display: grid;
+ grid-template-columns: 300px 1fr 300px;
+ min-height: 50vh;
+}
+
+@media (max-width: 1200px) {
+ .main {
+ grid-template-columns: 1fr;
+ }
+ .sidebar-left,
+ .sidebar-right {
+ border: none;
+ border-bottom: var(--border);
+ }
+}
+
+/* SIDEBARS */
+.sidebar-left,
+.sidebar-right {
+ border-right: var(--border);
+}
+
+.sidebar-right {
+ border-right: none;
+ border-left: var(--border);
+}
+
+/* WIDGET */
+.widget {
+ border-bottom: var(--border-thin);
+}
+
+.widget-header {
+ padding: 15px 20px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ cursor: pointer;
+ transition: background 0.1s;
+}
+
+.widget-header:hover {
+ background: var(--hover-bg);
+}
+
+.widget-title {
+ font-size: 10px;
+ text-transform: uppercase;
+ letter-spacing: 3px;
+ color: var(--gray);
+}
+
+.widget-toggle {
+ font-size: 16px;
+ color: var(--gray);
+ transition: transform 0.2s;
+}
+
+.widget.open .widget-toggle {
+ transform: rotate(45deg);
+}
+
+.widget-body {
+ display: none;
+ padding: 20px;
+ border-top: var(--border-thin);
+}
+
+.widget.open .widget-body {
+ display: block;
+}
+
+/* TOOLS GRID */
+.tools-grid {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 8px;
+}
+
+.tool-btn {
+ padding: 15px 10px;
+ border: 2px solid var(--border-thin-color);
+ background: transparent;
+ color: var(--gray);
+ font-family: inherit;
+ font-size: 9px;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ cursor: pointer;
+ transition: all 0.1s;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 8px;
+}
+
+.tool-btn:hover {
+ background: var(--fg);
+ color: var(--bg);
+ border-color: var(--fg);
+}
+
+.tool-btn .icon {
+ font-size: 20px;
+}
+
+/* BANGS */
+.bangs-grid {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 6px;
+}
+
+.bang {
+ padding: 6px 10px;
+ border: 1px solid var(--border-thin-color);
+ font-size: 10px;
+ cursor: pointer;
+ transition: all 0.1s;
+}
+
+.bang:hover {
+ background: var(--fg);
+ color: var(--bg);
+}
+
+/* CALCULATOR */
+.calc-display {
+ background: var(--hover-bg);
+ padding: 15px;
+ margin-bottom: 15px;
+ border: 1px solid var(--border-thin-color);
+}
+
+.calc-expr {
+ font-size: 12px;
+ color: var(--gray);
+ min-height: 16px;
+}
+
+.calc-result {
+ font-size: 28px;
+ font-weight: 700;
+}
+
+.calc-grid {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 4px;
+}
+
+.calc-btn {
+ padding: 12px;
+ border: 1px solid var(--border-thin-color);
+ background: transparent;
+ color: var(--fg);
+ font-family: inherit;
+ font-size: 14px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.1s;
+}
+
+.calc-btn:hover {
+ background: var(--fg);
+ color: var(--bg);
+}
+
+.calc-btn.op {
+ background: var(--hover-bg);
+}
+
+/* CLOCKS */
+.clocks-grid {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 10px;
+}
+
+.clock {
+ padding: 12px;
+ border: 1px solid var(--border-thin-color);
+ text-align: center;
+}
+
+.clock-time {
+ font-size: 16px;
+ font-weight: 700;
+ font-variant-numeric: tabular-nums;
+}
+
+.clock-label {
+ font-size: 8px;
+ text-transform: uppercase;
+ letter-spacing: 2px;
+ color: var(--gray);
+ margin-top: 4px;
+}
+
+/* HISTORY */
+.history-item {
+ padding: 10px 0;
+ border-bottom: 1px solid var(--border-thin-color);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-size: 12px;
+ cursor: pointer;
+ color: var(--gray);
+}
+
+.history-item:hover {
+ color: var(--fg);
+}
+
+.history-item:last-child {
+ border-bottom: none;
+}
+
+.history-time {
+ font-size: 9px;
+}
+
+/* SOURCES LIST */
+.sources-list {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+}
+
+.source-item {
+ padding: 10px 12px;
+ border: 1px solid var(--border-thin-color);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-size: 10px;
+ letter-spacing: 1px;
+ cursor: pointer;
+ transition: all 0.1s;
+}
+
+.source-item:hover {
+ border-color: var(--fg);
+}
+
+.source-item.active {
+ background: var(--fg);
+ color: var(--bg);
+}
+
+.source-count {
+ font-weight: 700;
+}
+
+/* WATCHLIST (Editable) */
+.watchlist-input-row {
+ display: flex;
+ margin-bottom: 10px;
+ border: 1px solid var(--border-thin-color);
+}
+
+#watchlist-input {
+ flex: 1;
+ background: transparent;
+ border: none;
+ color: var(--fg);
+ font-family: inherit;
+ font-size: 10px;
+ padding: 8px;
+ outline: none;
+ text-transform: uppercase;
+}
+
+#watchlist-add-btn {
+ padding: 0 10px;
+ background: var(--hover-bg);
+ border: none;
+ border-left: 1px solid var(--border-thin-color);
+ color: var(--fg);
+ cursor: pointer;
+ font-size: 14px;
+}
+
+#watchlist-add-btn:hover {
+ background: var(--fg);
+ color: var(--bg);
+}
+
+.watchlist-item-row {
+ padding: 10px 12px;
+ border: 1px solid var(--border-thin-color);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-size: 10px;
+ letter-spacing: 1px;
+ cursor: pointer;
+ transition: all 0.1s;
+ margin-bottom: 4px;
+}
+
+.watchlist-item-row:hover {
+ border-color: var(--fg);
+}
+
+.watchlist-del-btn {
+ color: var(--gray);
+ padding: 0 5px;
+ cursor: pointer;
+ font-size: 14px;
+}
+
+.watchlist-del-btn:hover {
+ color: var(--fg);
+ font-weight: bold;
+}
+
+/* RESULTS */
+.results-section {
+ min-height: 400px;
+}
+
+.results-header {
+ display: flex;
+ justify-content: space-between;
+ padding: 15px 25px;
+ border-bottom: var(--border-thin);
+ font-size: 10px;
+ text-transform: uppercase;
+ letter-spacing: 2px;
+ color: var(--gray);
+}
+
+.results-container {
+ display: flex;
+ flex-direction: column;
+}
+
+/* STOCK WIDGET */
+.stock-widget {
+ border-bottom: var(--border);
+ background: var(--panel);
+}
+
+.stock-header {
+ padding: 30px;
+ border-bottom: var(--border-thin);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.stock-info h2 {
+ font-size: 32px;
+ font-weight: 700;
+ letter-spacing: -1px;
+}
+
+.stock-info .ticker {
+ font-size: 12px;
+ color: var(--gray);
+ letter-spacing: 2px;
+ margin-top: 5px;
+}
+
+.stock-actions-top {
+ display: flex;
+ gap: 10px;
+}
+
+.stock-btn {
+ padding: 10px 20px;
+ border: 2px solid var(--border-thin-color);
+ background: transparent;
+ color: var(--fg);
+ font-family: inherit;
+ font-size: 10px;
+ letter-spacing: 1px;
+ cursor: pointer;
+ transition: all 0.1s;
+}
+
+.stock-btn:hover {
+ background: var(--fg);
+ color: var(--bg);
+ border-color: var(--fg);
+}
+
+.tradingview-widget-container {
+ height: 500px;
+}
+
+/* RESULT CARD */
+.result {
+ border-bottom: var(--border-thin);
+ display: grid;
+ grid-template-columns: 50px 1fr;
+ transition: background 0.1s;
+}
+
+.result:hover {
+ background: var(--hover-bg);
+}
+
+.result-index {
+ padding: 20px 15px;
+ border-right: var(--border-thin);
+ font-size: 11px;
+ color: var(--gray);
+ text-align: center;
+ font-weight: 700;
+}
+
+.result-body {
+ padding: 20px 25px;
+}
+
+.result-source {
+ font-size: 9px;
+ text-transform: uppercase;
+ letter-spacing: 2px;
+ color: var(--gray);
+ margin-bottom: 8px;
+}
+
+.result-title {
+ font-size: 16px;
+ font-weight: 600;
+ letter-spacing: -0.5px;
+ margin-bottom: 8px;
+ line-height: 1.4;
+ cursor: pointer;
+}
+
+.result-title:hover {
+ text-decoration: underline;
+ text-underline-offset: 3px;
+}
+
+.result-url {
+ font-size: 11px;
+ color: var(--gray);
+ margin-bottom: 10px;
+ word-break: break-all;
+}
+
+.result-snippet {
+ font-size: 12px;
+ line-height: 1.7;
+ color: var(--gray);
+}
+
+.result-snippet mark {
+ background: var(--fg);
+ color: var(--bg);
+ padding: 0 2px;
+}
+
+.result-meta {
+ display: flex;
+ gap: 15px;
+ margin-top: 12px;
+ font-size: 10px;
+ color: var(--gray);
+ text-transform: uppercase;
+ letter-spacing: 1px;
+}
+
+/* INSTANT ANSWER */
+.instant-box {
+ border-bottom: var(--border);
+ padding: 40px;
+ background: var(--panel);
+}
+
+.instant-label {
+ font-size: 9px;
+ text-transform: uppercase;
+ letter-spacing: 3px;
+ color: var(--gray);
+ margin-bottom: 20px;
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+.instant-label::before {
+ content: "■";
+ animation: blink 0.5s infinite;
+}
+
+.instant-title {
+ font-size: 28px;
+ font-weight: 700;
+ letter-spacing: -1px;
+ margin-bottom: 20px;
+ line-height: 1.2;
+}
+
+.instant-content {
+ font-size: 14px;
+ line-height: 1.8;
+ color: var(--gray);
+ max-width: 700px;
+}
+
+.instant-content p {
+ margin-bottom: 12px;
+}
+
+.instant-meta {
+ margin-top: 25px;
+ padding-top: 20px;
+ border-top: var(--border-thin);
+ display: flex;
+ gap: 25px;
+ font-size: 10px;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ color: var(--gray);
+}
+
+.instant-meta a {
+ border-bottom: 1px solid var(--gray);
+}
+
+.instant-meta a:hover {
+ border-color: var(--fg);
+ color: var(--fg);
+}
+
+/* EMPTY STATE */
+.empty-state {
+ padding: 60px 30px;
+ text-align: center;
+}
+
+.empty-title {
+ font-size: 18px;
+ font-weight: 700;
+ margin-bottom: 15px;
+ color: var(--gray);
+}
+
+.empty-text {
+ color: var(--gray);
+ font-size: 12px;
+ line-height: 1.8;
+}
+
+/* LOADING */
+.loading-row {
+ display: flex;
+ padding: 25px;
+ border-bottom: var(--border-thin);
+ gap: 20px;
+ align-items: center;
+}
+
+.loading-bar {
+ height: 2px;
+ background: var(--hover-bg);
+ flex: 1;
+ position: relative;
+ overflow: hidden;
+}
+
+.loading-bar::after {
+ content: "";
+ position: absolute;
+ left: -50%;
+ width: 50%;
+ height: 100%;
+ background: var(--fg);
+ animation: loading 1s infinite;
+}
+
+@keyframes loading {
+ to {
+ left: 150%;
+ }
+}
+
+.loading-text {
+ font-size: 10px;
+ text-transform: uppercase;
+ letter-spacing: 2px;
+ color: var(--gray);
+}
+
+/* TOOL MODAL */
+.tool-modal {
+ padding: 30px;
+ background: var(--panel);
+}
+
+.tool-modal textarea {
+ width: 100%;
+ padding: 15px;
+ background: var(--bg);
+ border: 2px solid var(--border-thin-color);
+ color: var(--fg);
+ font-family: inherit;
+ font-size: 13px;
+ resize: vertical;
+ min-height: 100px;
+ margin: 15px 0;
+}
+
+.tool-modal textarea:focus {
+ outline: none;
+ border-color: var(--fg);
+}
+
+.tool-btn-row {
+ display: flex;
+ gap: 10px;
+}
+
+.tool-action {
+ padding: 12px 25px;
+ border: 2px solid var(--border-thin-color);
+ background: transparent;
+ color: var(--fg);
+ font-family: inherit;
+ font-size: 11px;
+ text-transform: uppercase;
+ letter-spacing: 2px;
+ cursor: pointer;
+}
+
+.tool-action:hover {
+ background: var(--fg);
+ color: var(--bg);
+}
+
+.tool-output {
+ margin-top: 20px;
+ padding: 20px;
+ background: var(--bg);
+ border: 2px solid var(--border-thin-color);
+ font-size: 12px;
+ word-break: break-all;
+}
+
+/* TOAST */
+.toast-container {
+ position: fixed;
+ bottom: 20px;
+ left: 50%;
+ transform: translateX(-50%);
+ z-index: 3000;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+}
+
+.toast {
+ padding: 15px 30px;
+ border: 3px solid var(--fg);
+ background: var(--bg);
+ font-size: 12px;
+ letter-spacing: 2px;
+ animation: toastIn 0.2s ease;
+}
+
+@keyframes toastIn {
+ from {
+ transform: translateY(20px);
+ opacity: 0;
+ }
+ to {
+ transform: translateY(0);
+ opacity: 1;
+ }
+}
+
+/* FOOTER */
+.footer {
+ border-top: var(--border);
+ padding: 20px 30px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 40px;
+ font-size: 10px;
+ color: var(--gray);
+ text-transform: uppercase;
+ letter-spacing: 2px;
+}
+
+.theme-btn {
+ background: transparent;
+ border: 1px solid var(--gray);
+ color: var(--gray);
+ padding: 5px 10px;
+ cursor: pointer;
+ font-family: inherit;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ font-size: 9px;
+}
+
+.theme-btn:hover {
+ border-color: var(--fg);
+ color: var(--fg);
+}
+
+/* SCROLLBAR */
+::-webkit-scrollbar {
+ width: 8px;
+ height: 8px;
+}
+
+::-webkit-scrollbar-track {
+ background: var(--bg);
+}
+
+::-webkit-scrollbar-thumb {
+ background: #222;
+}
+
+body.light-mode ::-webkit-scrollbar-thumb {
+ background: #ccc;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: var(--gray);
+}
+
+/* RESPONSIVE */
+@media (max-width: 768px) {
+ .logo-large {
+ font-size: 48px;
+ }
+ .hero.compact .logo-large {
+ display: none;
+ }
+ #search-input {
+ font-size: 18px;
+ padding: 20px;
+ }
+ .search-prefix {
+ padding: 20px;
+ font-size: 20px;
+ }
+ .main {
+ grid-template-columns: 1fr;
+ }
+}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2026-01-28 23:43:46 +0000