Enlarge sidebar logo 20% and fix compile button corner rounding
- Logo (all themes): scale the Verso wordmark to 120% width, centered and clipped to the sidebar column — the word mark visually fills the full sidebar width. Uses overflow:hidden + width:120% !important + margin-left:-10% to override the existing inline width style. - Compile button (Lumière): replace the all-corners border-radius:7px on the split button group with corner-specific rules — .compile-button gets 7px on the left side only, .compile-dropdown-toggle gets 7px on the right side only, so the shared inner edge stays flat as expected for a joined split button. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -241,15 +241,22 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
|
||||
}
|
||||
|
||||
// ── Compile button — teal gradient ────────────────────────────────────────
|
||||
// .compile-button-group wraps the Recompile button in the toolbar actions
|
||||
// .compile-button-group is a split button: main Recompile + dropdown arrow.
|
||||
// Only the outer corners get rounded; the inner shared edge stays flat.
|
||||
|
||||
[data-lumiere='true'] .compile-button-group {
|
||||
.btn-primary,
|
||||
.btn {
|
||||
border-radius: 7px !important;
|
||||
// Main (left) button: round left side, flat right side
|
||||
.compile-button {
|
||||
border-radius: 7px 0 0 7px !important;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
// Dropdown arrow (right button): flat left side, round right side
|
||||
.compile-dropdown-toggle {
|
||||
border-radius: 0 7px 7px 0 !important;
|
||||
}
|
||||
|
||||
// Teal gradient on the main compile button only
|
||||
.compile-button.btn-primary {
|
||||
background: linear-gradient(135deg, $lum-teal 0%, darken($lum-teal, 8%) 100%) !important;
|
||||
border-color: darken($lum-teal, 10%) !important;
|
||||
box-shadow: 0 2px 8px rgba($lum-teal, 0.35) !important;
|
||||
@@ -260,4 +267,12 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
|
||||
box-shadow: 0 4px 14px rgba($lum-teal, 0.45) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown toggle also gets the teal background (same button group, same color)
|
||||
.compile-dropdown-toggle.btn-primary {
|
||||
background: linear-gradient(135deg, darken($lum-teal, 5%) 0%, darken($lum-teal, 12%) 100%) !important;
|
||||
border-color: darken($lum-teal, 10%) !important;
|
||||
border-left-color: rgba(255, 255, 255, 0.2) !important;
|
||||
box-shadow: 0 2px 8px rgba($lum-teal, 0.35) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -244,11 +244,13 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
// Let the Verso wordmark bleed past the lower section's asymmetric
|
||||
// padding so it spans the full width of the sidebar column.
|
||||
// The Verso wordmark bleeds past the lower section's padding to span
|
||||
// the full sidebar column width, then the image is scaled to 120% and
|
||||
// centered so the wordmark fills the available width (all themes).
|
||||
.ds-nav-verso-logo {
|
||||
margin-left: calc(-1 * var(--spacing-05));
|
||||
margin-right: calc(-1 * var(--spacing-08));
|
||||
overflow: hidden;
|
||||
transition: filter 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
@@ -256,7 +258,9 @@ body {
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
width: 120% !important;
|
||||
margin-left: -10%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user