171 lines
7.8 KiB
CSS
171 lines
7.8 KiB
CSS
:root {
|
|
--bg: 15 15 18;
|
|
--fg: 235 235 240;
|
|
--muted: 180 180 190;
|
|
--accent: 80 160 255;
|
|
--card: 28 28 34 / 0.55;
|
|
--border: 255 255 255 / 0.12;
|
|
--glass-blur: 14px;
|
|
--radius: 14px;
|
|
<<<<<<< HEAD
|
|
/* Scrollbar */
|
|
--sb-size: 10px;
|
|
--sb-thumb: rgba(255, 159, 203, 0.55);
|
|
--sb-thumb-hover: rgba(255, 159, 203, 0.75);
|
|
--sb-thumb-active: rgba(255, 127, 187, 0.9);
|
|
--sb-track: rgba(255,255,255,0.05);
|
|
=======
|
|
>>>>>>> c92df7bb9a1b22aee21d2c083ea163d21ab1a722
|
|
}
|
|
:root.light {
|
|
--bg: 245 245 248;
|
|
--fg: 20 20 22;
|
|
--muted: 110 110 120;
|
|
--accent: 18 108 242;
|
|
--card: 255 255 255 / 0.6;
|
|
--border: 0 0 0 / 0.08;
|
|
<<<<<<< HEAD
|
|
--sb-thumb: rgba(255, 127, 187, 0.65);
|
|
--sb-thumb-hover: rgba(255, 127, 187, 0.82);
|
|
--sb-thumb-active: rgba(255, 110, 178, 0.95);
|
|
--sb-track: rgba(0,0,0,0.06);
|
|
=======
|
|
>>>>>>> c92df7bb9a1b22aee21d2c083ea163d21ab1a722
|
|
}
|
|
* { box-sizing: border-box; }
|
|
html, body, #app { height: 100%; }
|
|
html, body { margin: 0; padding: 0; background: rgb(var(--bg)); color: rgb(var(--fg)); }
|
|
body { font: 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; }
|
|
button { cursor: pointer; }
|
|
a { color: inherit; }
|
|
|
|
/* Top bar */
|
|
.topbar {
|
|
position: sticky; top: 0; z-index: 10;
|
|
display: flex; flex-wrap: wrap; align-items: center;
|
|
gap: 10px; padding: 10px 14px; backdrop-filter: blur(var(--glass-blur));
|
|
<<<<<<< HEAD
|
|
border: 1px solid transparent;
|
|
background:
|
|
linear-gradient(rgba(var(--card)), rgba(var(--card))) padding-box,
|
|
linear-gradient(135deg,
|
|
rgba(255, 159, 203, 0.95) 0%,
|
|
rgba(255, 159, 203, 0.60) 10%,
|
|
rgba(255, 127, 187, 0.45) 18%,
|
|
rgba(0, 0, 0, 0.20) 28%,
|
|
rgba(0, 0, 0, 0.06) 50%,
|
|
rgba(0, 0, 0, 0.00) 70%
|
|
) border-box;
|
|
}
|
|
:root:not(.light) .topbar {
|
|
background:
|
|
linear-gradient(rgba(var(--card)), rgba(var(--card))) padding-box,
|
|
linear-gradient(135deg,
|
|
rgba(255, 46, 134, 0.95) 0%,
|
|
rgba(255, 46, 134, 0.60) 10%,
|
|
rgba(255, 107, 176, 0.45) 18%,
|
|
rgba(0, 0, 0, 0.28) 28%,
|
|
rgba(0, 0, 0, 0.10) 50%,
|
|
rgba(0, 0, 0, 0.00) 70%
|
|
) border-box;
|
|
border-width: 0.5px; /* borde más delgado en dark */
|
|
=======
|
|
background: linear-gradient(180deg, rgba(var(--card)), rgba(var(--card)) 60%, rgba(0,0,0,0));
|
|
border-bottom: 1px solid rgba(var(--border));
|
|
>>>>>>> c92df7bb9a1b22aee21d2c083ea163d21ab1a722
|
|
}
|
|
.title { font-size: 16px; font-weight: 700; letter-spacing: .2px; flex: 1 1 auto; }
|
|
.actions { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
|
|
.icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(var(--border)); background: rgba(var(--card)); color: inherit; transition: transform .12s ease, background .2s;
|
|
backdrop-filter: blur(var(--glass-blur)); }
|
|
.icon-btn:hover { transform: translateY(-1px); background: rgba(var(--card)); }
|
|
.icon { width: 16px; height: 16px; opacity: .9; }
|
|
.dropdown { position: relative; }
|
|
.menu { position: absolute; right: 0; top: calc(100% + 6px); background: rgba(var(--card)); border: 1px solid #ffcfe4; border-radius: 10px; padding: 6px; backdrop-filter: blur(var(--glass-blur)); min-width: 180px; box-shadow: 0 10px 24px rgba(0,0,0,.18); }
|
|
.menu button { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(var(--border)); background: rgba(var(--card)); }
|
|
.menu button:hover { transform: none; background: rgba(255,255,255,0.06); }
|
|
|
|
/* Layout */
|
|
.shell { height: calc(100vh - 54px); display: grid; grid-template-columns: 360px 1fr; gap: 12px; padding: 12px; }
|
|
<<<<<<< HEAD
|
|
.panel {
|
|
border: 1px solid #ffcfe4; /* light más claro */
|
|
background: linear-gradient(rgba(var(--card)), rgba(var(--card))) padding-box;
|
|
border-radius: var(--radius);
|
|
backdrop-filter: blur(var(--glass-blur));
|
|
overflow: hidden; display: flex; flex-direction: column; min-height: 0;
|
|
}
|
|
:root:not(.light) .panel { border-color: #ff2e86; border-width: 0.5px; /* borde más delgado en dark */ }
|
|
=======
|
|
.panel { border: 1px solid rgba(var(--border)); background: rgba(var(--card)); border-radius: var(--radius); backdrop-filter: blur(var(--glass-blur)); overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
|
|
>>>>>>> c92df7bb9a1b22aee21d2c083ea163d21ab1a722
|
|
.panel-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid rgba(var(--border)); }
|
|
.panel-title { font-weight: 600; }
|
|
.panel-actions { display: inline-flex; flex-wrap: wrap; gap: 6px; }
|
|
.scroll { overflow: auto; padding: 10px; }
|
|
|
|
/* Cards */
|
|
.card { border: 1px solid rgba(var(--border)); background: rgba(var(--card)); border-radius: 12px; padding: 10px; transition: transform .12s ease, box-shadow .2s ease; box-shadow: 0 4px 14px rgba(0,0,0,.08); }
|
|
.card:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,0,0,.12); }
|
|
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
|
|
|
|
/* Responsive */
|
|
@media (max-width: 980px) {
|
|
.shell { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
/* Collapse helpers: keep headers visible when collapsed */
|
|
.panel.collapsed .scroll { display: none; }
|
|
|
|
/* Modal */
|
|
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.35); backdrop-filter: blur(4px); display: grid; place-items: center; z-index: 20; animation: fadeIn .15s ease;
|
|
}
|
|
.modal { width: min(680px, 92vw); border-radius: 14px; border: 1px solid rgba(var(--border)); background: rgba(var(--card)); padding: 14px; box-shadow: 0 10px 32px rgba(0,0,0,.2); }
|
|
.modal.fullscreen { width: 96vw; max-width: 96vw; height: 92vh; max-height: 92vh; display: flex; flex-direction: column; }
|
|
.modal.fullscreen > .modal-header { position: sticky; top: 0; background: rgba(var(--card)); z-index: 1; }
|
|
.modal.fullscreen > .modal-footer { position: sticky; bottom: 0; background: rgba(var(--card)); z-index: 1; }
|
|
.modal.fullscreen > div:nth-child(2) { flex: 1 1 auto; overflow: auto; }
|
|
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
|
|
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
|
|
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
|
|
|
/* Small bits */
|
|
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid rgba(var(--border)); border-radius: 999px; background: rgba(var(--card)); font-size: 12px; }
|
|
.muted { color: rgb(var(--muted)); }
|
|
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
|
|
.spacer { flex: 1; }
|
|
.toggle { padding: 6px 10px; border-radius: 8px; border: 1px solid rgba(var(--border)); background: rgba(var(--card)); }
|
|
<<<<<<< HEAD
|
|
|
|
/* Scrollbars */
|
|
/* Firefox */
|
|
html, body, .scroll {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--sb-thumb) transparent;
|
|
}
|
|
/* WebKit */
|
|
html::-webkit-scrollbar, body::-webkit-scrollbar, .scroll::-webkit-scrollbar {
|
|
width: var(--sb-size);
|
|
height: var(--sb-size);
|
|
}
|
|
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, .scroll::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, .scroll::-webkit-scrollbar-thumb {
|
|
background: var(--sb-thumb);
|
|
border-radius: 999px;
|
|
border: 2px solid transparent; /* creates inset padding */
|
|
background-clip: content-box;
|
|
box-shadow: 0 0 10px rgba(255, 46, 134, 0.15);
|
|
}
|
|
html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover, .scroll::-webkit-scrollbar-thumb:hover {
|
|
background: var(--sb-thumb-hover);
|
|
background-clip: content-box;
|
|
}
|
|
html::-webkit-scrollbar-thumb:active, body::-webkit-scrollbar-thumb:active, .scroll::-webkit-scrollbar-thumb:active {
|
|
background: var(--sb-thumb-active);
|
|
background-clip: content-box;
|
|
}
|
|
=======
|
|
>>>>>>> c92df7bb9a1b22aee21d2c083ea163d21ab1a722
|