NixReaperandClaude Opus 4.8
b3ff365483
Consolidate ~140 scattered hardcoded border-radius values (and the old
--aurora-radius/--aurora-radius-lg vars) onto one four-step scale defined in
shell-frame.css:
--aurora-radius-sm 10px (chips, small/icon controls; was 5-8px)
--aurora-radius-md 14px (buttons, inputs, search, list rows; was 9-14px)
--aurora-radius-lg 20px (cards, panels, larger buttons; was 15-20px)
--aurora-radius-xl 28px (page frames: content card, dashboard, sidebar,
editor; was the 24px --aurora-radius-lg)
Everything is one notch rounder, and the whole UI's roundness is now tunable
from four lines instead of 35 files.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
42 lines
892 B
Vue
42 lines
892 B
Vue
<script setup>
|
|
// stats: [{ value, label }]
|
|
defineProps({
|
|
stats: { type: Array, required: true },
|
|
boxed: { type: Boolean, default: true },
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="statrow" :class="{ 'statrow--boxed': boxed }">
|
|
<div v-for="(s, i) in stats" :key="i" class="statrow__item">
|
|
<div class="statrow__value">{{ s.value }}</div>
|
|
<div class="statrow__label">{{ s.label }}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.statrow {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
grid-auto-columns: 1fr;
|
|
text-align: center;
|
|
}
|
|
.statrow--boxed {
|
|
background: var(--aurora-bg-subtle);
|
|
border-radius: var(--aurora-radius-md);
|
|
padding: 16px 8px;
|
|
}
|
|
.statrow__value {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: var(--aurora-text);
|
|
line-height: 1.1;
|
|
}
|
|
.statrow__label {
|
|
margin-top: 4px;
|
|
font-size: 0.75rem;
|
|
color: var(--aurora-text-muted);
|
|
}
|
|
</style>
|