REDCODE
be7dc9bb91
- Add gradient-button mixin for color-agnostic metallic button style - Apply to all .btn-* variants via theme-color loop - Reset hover lift inside .btn-group / .navbar to prevent button breakout - Add gradient-surface-deep/shallow mixins for cards, modals, dropdowns - Apply metallic surface gradients to .card, .card-header, .modal-content, .dropdown-menu, .dropdown-item, .list-group-item - Update gradient-accent to brighter stops (lighten 5% / darken 5%) - Fix danger color contrast (#f85149 -> #d41111) - Add --text CSS variable - Clean up Dockerfile (remove unnecessary libc6/libstdc++6) - Fix LactoseBaseUrl IP in docker-compose.yml - Minor UI tweaks: badge spacing in AdminUsers, badge style in SettingRange
83 lines
2.1 KiB
SCSS
83 lines
2.1 KiB
SCSS
// ── Card/image overlay gradient ──
|
|
@mixin gradient-overlay($from: transparent 30%, $to: rgba(0, 0, 0, 0.9)) {
|
|
background: linear-gradient($from, $to);
|
|
}
|
|
|
|
// ── Accent gradient ──
|
|
@mixin gradient-accent {
|
|
background: linear-gradient(135deg, $accent 0%, lighten($accent, 5%) 25%, darken($accent, 5%) 100%);
|
|
}
|
|
|
|
// ── Surface shimmer ──
|
|
@mixin gradient-surface {
|
|
background: linear-gradient(
|
|
135deg,
|
|
rgba(255, 255, 255, 0.08) 0%,
|
|
rgba(255, 255, 255, 0.18) 100%
|
|
);
|
|
}
|
|
|
|
// ── Metallic-style button gradient (color-agnostic) ──
|
|
@mixin gradient-button($color) {
|
|
background: linear-gradient(135deg, $color 0%, lighten($color, 5%) 25%, darken($color, 5%) 100%);
|
|
border-color: darken($color, 10%);
|
|
|
|
&:hover {
|
|
background: linear-gradient(135deg, lighten($color, 8%) 0%, $color 25%, lighten($color, 15%) 100%);
|
|
border-color: darken($color, 15%);
|
|
transform: translateY(-2px);
|
|
box-shadow: $box-shadow;
|
|
}
|
|
|
|
&:active {
|
|
background: linear-gradient(135deg, lighten($color, 15%) 0%, lighten($color, 15%) 100%);
|
|
border-color: darken($color, 20%);
|
|
transform: translateY(0);
|
|
}
|
|
|
|
transition: transform 0.15s, box-shadow 0.15s;
|
|
}
|
|
|
|
// ── Deeper surface metallic (for cards, modals, dropdowns) ──
|
|
@mixin gradient-surface-deep {
|
|
background: linear-gradient(
|
|
135deg,
|
|
rgba(255, 255, 255, 0.05) 0%,
|
|
rgba(255, 255, 255, 0.12) 100%
|
|
);
|
|
}
|
|
|
|
// ── Surface metallic for card headers, list items ──
|
|
@mixin gradient-surface-shallow {
|
|
background: linear-gradient(
|
|
135deg,
|
|
rgba(255, 255, 255, 0.03) 0%,
|
|
rgba(255, 255, 255, 0.08) 100%
|
|
);
|
|
}
|
|
|
|
// ── Gradient border via box-shadow trick ──
|
|
@mixin gradient-border($color: $accent, $width: 2px) {
|
|
box-shadow: inset 0 0 0 $width rgba($color, 0.3);
|
|
&:hover {
|
|
box-shadow: inset 0 0 0 $width $color;
|
|
}
|
|
}
|
|
|
|
// ── Preset classes ──
|
|
.bg-gradient-accent {
|
|
@include gradient-accent;
|
|
}
|
|
|
|
.bg-gradient-surface {
|
|
@include gradient-surface;
|
|
}
|
|
|
|
.bg-gradient-surface-deep {
|
|
@include gradient-surface-deep;
|
|
}
|
|
|
|
.bg-gradient-surface-shallow {
|
|
@include gradient-surface-shallow;
|
|
}
|