ui: botões light — flat, sem gradientes/brilho/sombra e sem cantos arredondados
- .btn: fundo sólido var(--panel), borda fina, hover/active só tingem o fundo (panel-2 / mix com fg); removidos ::after 'vidro', text-shadow, inset shadows, glow, lift no hover - .btn-primary/.btn-danger: accent/danger sólidos, hover escurece - .segmented/.seg: container com borda única, segs justos com divisor, ativo em accent sólido (sem gradiente/sombra) - select da toolbar, #btn-sidebar, .tag-chip, .tab-close, .ftree-act, .tree-menu button: radius 0 - sw v12
This commit is contained in:
lgcosta committed
1 parent
b7583c7593
commit
2106ea14f0
2 files changed
+35
-125
No files matched your search
+34
-124
@@ -91,7 +91,7 @@ code { font-family: var(--mono); font-size: 0.92em; }
|
||||
border-radius: 0;
|
||||
}
|
||||
.menu-btn:hover, .menu.open .menu-btn { background: var(--accent); color: #fff; }
|
||||
#btn-sidebar { width: 34px; border-radius: 3px; margin: 3px 0; }
|
||||
#btn-sidebar { width: 34px; border-radius: 0; margin: 3px 0; }
|
||||
#btn-sidebar:hover { background: #e0dcd8; }
|
||||
|
||||
.menu-dropdown {
|
||||
@@ -143,107 +143,34 @@ code { font-family: var(--mono); font-size: 0.92em; }
|
||||
.tb-label { font-size: 12px; margin-left: 4px; }
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
Sistema de botões "rich" (mesma linguagem visual do Rich Button do
|
||||
spell.sh — gradientes, brilho interno, glow e micro-interações — porém 100%
|
||||
CSS puro, sem React/Tailwind, derivado dos tokens de tema via color-mix +
|
||||
light-dark, portanto compatível com os 21 temas e com CSP estrita).
|
||||
Sistema de botões "light": flat e sóbrio — sem gradientes, brilhos, sombras
|
||||
internas ou cantos arredondados. Fundo sólido derivado dos tokens de tema
|
||||
(compatível com os 21 temas e CSP estrita); hover/active apenas tingem o
|
||||
fundo com o tom de painel imediatamente mais escuro.
|
||||
--------------------------------------------------------------------------- */
|
||||
.btn {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
font: inherit;
|
||||
font-size: 13px;
|
||||
color: var(--fg);
|
||||
border: 1px solid color-mix(in oklab, var(--border) 70%, var(--fg) 30%);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0;
|
||||
padding: 4px 12px;
|
||||
cursor: pointer;
|
||||
background:
|
||||
linear-gradient(180deg,
|
||||
color-mix(in oklab, var(--panel-2), white 55%) 0%,
|
||||
var(--panel-2) 48%,
|
||||
color-mix(in oklab, var(--panel-2), var(--fg) 10%) 100%);
|
||||
box-shadow:
|
||||
inset 0 1px 0 light-dark(rgba(255, 255, 255, .85), rgba(255, 255, 255, .14)),
|
||||
inset 0 -1px 0 color-mix(in oklab, var(--panel-2), var(--fg) 14%),
|
||||
0 1px 2px rgba(0, 0, 0, .12),
|
||||
0 2px 6px -2px rgba(0, 0, 0, .10);
|
||||
text-shadow: 0 1px 0 light-dark(rgba(255, 255, 255, .7), rgba(0, 0, 0, .35));
|
||||
transition: transform .12s ease, box-shadow .16s ease, filter .16s ease;
|
||||
}
|
||||
.btn::after { /* reflexo superior estilo "vidro" */
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 1px 1px 50% 1px;
|
||||
z-index: -1;
|
||||
border-radius: 7px 7px 10px 10px;
|
||||
background: linear-gradient(180deg, light-dark(rgba(255, 255, 255, .5), rgba(255, 255, 255, .07)), transparent);
|
||||
pointer-events: none;
|
||||
}
|
||||
.btn:hover {
|
||||
transform: translateY(-1px);
|
||||
filter: brightness(1.04) saturate(1.05);
|
||||
box-shadow:
|
||||
inset 0 1px 0 light-dark(rgba(255, 255, 255, .9), rgba(255, 255, 255, .18)),
|
||||
inset 0 -1px 0 color-mix(in oklab, var(--panel-2), var(--fg) 16%),
|
||||
0 3px 8px -1px rgba(0, 0, 0, .18),
|
||||
0 6px 16px -6px rgba(0, 0, 0, .14);
|
||||
}
|
||||
.btn:active {
|
||||
transform: translateY(1px) scale(.98);
|
||||
filter: brightness(.97);
|
||||
box-shadow:
|
||||
inset 0 2px 5px rgba(0, 0, 0, .22),
|
||||
inset 0 -1px 0 light-dark(rgba(255, 255, 255, .5), rgba(255, 255, 255, .08));
|
||||
}
|
||||
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|
||||
.btn:disabled {
|
||||
opacity: .45;
|
||||
cursor: default;
|
||||
transform: none;
|
||||
filter: saturate(.4);
|
||||
box-shadow: inset 0 1px 0 light-dark(rgba(255, 255, 255, .6), rgba(255, 255, 255, .1));
|
||||
background: var(--panel);
|
||||
transition: background .12s ease, border-color .12s ease, color .12s ease;
|
||||
}
|
||||
.btn:hover { background: var(--panel-2); border-color: color-mix(in oklab, var(--border), var(--fg) 20%); }
|
||||
.btn:active { background: color-mix(in oklab, var(--panel-2), var(--fg) 8%); }
|
||||
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
|
||||
.btn:disabled { opacity: .5; cursor: default; background: var(--panel); border-color: var(--border); }
|
||||
.btn-icon { display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; }
|
||||
.btn-primary {
|
||||
color: #fff;
|
||||
text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
|
||||
border-color: color-mix(in oklab, var(--accent), black 28%);
|
||||
background:
|
||||
linear-gradient(180deg,
|
||||
color-mix(in oklab, var(--accent), white 26%) 0%,
|
||||
var(--accent) 48%,
|
||||
color-mix(in oklab, var(--accent), black 14%) 100%);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, .38),
|
||||
inset 0 -1px 0 color-mix(in oklab, var(--accent), black 24%),
|
||||
0 2px 8px -1px color-mix(in oklab, var(--accent) 55%, transparent),
|
||||
0 1px 2px rgba(0, 0, 0, .18);
|
||||
}
|
||||
.btn-primary::after { background: linear-gradient(180deg, rgba(255, 255, 255, .28), transparent); }
|
||||
.btn-primary:hover {
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, .45),
|
||||
inset 0 -1px 0 color-mix(in oklab, var(--accent), black 26%),
|
||||
0 4px 14px -2px color-mix(in oklab, var(--accent) 65%, transparent),
|
||||
0 2px 4px rgba(0, 0, 0, .2);
|
||||
}
|
||||
.btn-danger {
|
||||
color: #fff;
|
||||
text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
|
||||
border-color: color-mix(in oklab, var(--danger), black 26%);
|
||||
background:
|
||||
linear-gradient(180deg,
|
||||
color-mix(in oklab, var(--danger), white 24%) 0%,
|
||||
var(--danger) 48%,
|
||||
color-mix(in oklab, var(--danger), black 12%) 100%);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, .35),
|
||||
inset 0 -1px 0 color-mix(in oklab, var(--danger), black 22%),
|
||||
0 2px 8px -1px color-mix(in oklab, var(--danger) 50%, transparent);
|
||||
}
|
||||
.btn-danger::after { background: linear-gradient(180deg, rgba(255, 255, 255, .25), transparent); }
|
||||
.btn-small { font-size: 12px; padding: 2px 9px; border-radius: 6px; }
|
||||
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
|
||||
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
|
||||
.btn-primary:active { background: color-mix(in oklab, var(--accent-dark), black 12%); border-color: color-mix(in oklab, var(--accent-dark), black 12%); color: #fff; }
|
||||
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
|
||||
.btn-danger:hover { background: color-mix(in oklab, var(--danger), black 12%); border-color: color-mix(in oklab, var(--danger), black 12%); color: #fff; }
|
||||
.btn-danger:active { background: color-mix(in oklab, var(--danger), black 20%); color: #fff; }
|
||||
.btn-small { font-size: 12px; padding: 2px 9px; }
|
||||
.fmt { min-width: 32px; justify-content: center; font-size: 13px; }
|
||||
#fmt-tools.disabled { opacity: .45; pointer-events: none; }
|
||||
|
||||
@@ -251,49 +178,32 @@ code { font-family: var(--mono); font-size: 0.92em; }
|
||||
font: inherit;
|
||||
font-size: 13px;
|
||||
color: var(--fg);
|
||||
background:
|
||||
linear-gradient(180deg,
|
||||
color-mix(in oklab, var(--panel), white 40%) 0%,
|
||||
var(--panel) 50%,
|
||||
color-mix(in oklab, var(--panel), var(--fg) 6%) 100%);
|
||||
border: 1px solid color-mix(in oklab, var(--border) 70%, var(--fg) 30%);
|
||||
border-radius: 8px;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0;
|
||||
padding: 4px 8px;
|
||||
box-shadow: inset 0 1px 0 light-dark(rgba(255, 255, 255, .8), rgba(255, 255, 255, .12)), 0 1px 2px rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
.segmented {
|
||||
display: inline-flex;
|
||||
border: 1px solid color-mix(in oklab, var(--border) 70%, var(--fg) 30%);
|
||||
border-radius: 9px;
|
||||
border: 1px solid var(--border);
|
||||
overflow: hidden;
|
||||
background: color-mix(in oklab, var(--panel-2), var(--fg) 6%);
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .12);
|
||||
padding: 2px;
|
||||
gap: 2px;
|
||||
background: var(--panel);
|
||||
}
|
||||
.segmented .seg {
|
||||
border: 0;
|
||||
border-right: 1px solid var(--border-soft);
|
||||
background: transparent;
|
||||
font: inherit;
|
||||
font-size: 12px;
|
||||
padding: 4px 14px;
|
||||
cursor: pointer;
|
||||
color: var(--muted);
|
||||
border-radius: 7px;
|
||||
transition: background .15s ease, color .15s ease, box-shadow .15s ease;
|
||||
}
|
||||
.segmented .seg:hover { color: var(--fg); background: color-mix(in oklab, var(--panel), transparent 35%); }
|
||||
.segmented .seg.active {
|
||||
background:
|
||||
linear-gradient(180deg,
|
||||
color-mix(in oklab, var(--accent), white 22%) 0%,
|
||||
var(--accent) 55%,
|
||||
color-mix(in oklab, var(--accent), black 10%) 100%);
|
||||
color: #fff;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 1px 4px color-mix(in oklab, var(--accent) 50%, transparent);
|
||||
text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
|
||||
transition: background .15s ease, color .15s ease;
|
||||
}
|
||||
.segmented .seg:last-child { border-right: 0; }
|
||||
.segmented .seg:hover { color: var(--fg); background: var(--panel-2); }
|
||||
.segmented .seg.active { background: var(--accent); color: #fff; }
|
||||
|
||||
/* ---------------------------------------------------------------- layout */
|
||||
#layout { display: flex; flex: 1 1 auto; min-height: 0; }
|
||||
@@ -336,7 +246,7 @@ body.sidebar-off #sidebar { display: none; }
|
||||
border: 1px solid var(--border);
|
||||
background: var(--panel);
|
||||
color: var(--accent-dark);
|
||||
border-radius: 10px;
|
||||
border-radius: 0;
|
||||
padding: 1px 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -686,7 +596,7 @@ body.no-gutter #gutter { display: none; }
|
||||
height: 16px;
|
||||
line-height: 15px;
|
||||
text-align: center;
|
||||
border-radius: 3px;
|
||||
border-radius: 0;
|
||||
font-size: 10px;
|
||||
}
|
||||
.tab-close:hover { background: var(--danger); color: #fff; }
|
||||
@@ -731,7 +641,7 @@ body.no-gutter #gutter { display: none; }
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
padding: 0 4px;
|
||||
border-radius: 3px;
|
||||
border-radius: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
.tree-row:hover .tree-menu, .tree-row.active .tree-menu { visibility: visible; }
|
||||
@@ -1861,7 +1771,7 @@ html[data-theme="carbon-paper"] #revisions-list li:hover { background: #e6e5dd;
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
padding: 1px 4px;
|
||||
border-radius: 4px;
|
||||
border-radius: 0;
|
||||
}
|
||||
.ftree-act:hover { background: var(--accent); color: #fff; }
|
||||
.files-list {
|
||||
|
||||
Reference in new issue
Block a user