96 lines
3.3 KiB
CSS
96 lines
3.3 KiB
CSS
@tailwind components;
|
|
|
|
@layer components {
|
|
:root {
|
|
--fo-facility-info-flow-year-bg: color-mix(in srgb, var(--chart-4) 18%, var(--background));
|
|
--fo-facility-info-water-year-bg: color-mix(in srgb, var(--chart-3) 18%, var(--background));
|
|
--fo-facility-info-phosphorus-year-bg: color-mix(in srgb, var(--chart-1) 18%, var(--background));
|
|
--fo-facility-info-flow-summer-bg: color-mix(in srgb, var(--chart-4) 28%, var(--background));
|
|
--fo-facility-info-water-summer-bg: color-mix(in srgb, var(--chart-3) 28%, var(--background));
|
|
--fo-facility-info-phosphorus-summer-bg: color-mix(in srgb, var(--chart-1) 28%, var(--background));
|
|
--fo-facility-info-flow-winter-bg: color-mix(in srgb, var(--chart-4) 38%, var(--background));
|
|
--fo-facility-info-water-winter-bg: color-mix(in srgb, var(--chart-3) 38%, var(--background));
|
|
--fo-facility-info-phosphorus-winter-bg: color-mix(in srgb, var(--chart-1) 38%, var(--background));
|
|
--fo-rain-impact-row-bg: color-mix(in srgb, var(--chart-1) 10%, var(--background));
|
|
--fo-facility-info-header-bg: #eaf3fb;
|
|
--fo-facility-info-header-fg: #647784;
|
|
--fo-facility-info-header-border: var(--border);
|
|
}
|
|
|
|
.card {
|
|
@apply relative m-[0.6rem] box-border min-h-[2rem] rounded-[0.5rem] p-[0.6rem] text-[1.3rem] text-[#666];
|
|
}
|
|
.card-border {
|
|
@apply border border-[#dbe2e6] bg-[rgba(255,255,255,0.6)] shadow-blur;
|
|
}
|
|
.card-header {
|
|
@apply -mx-[0.6rem] flex items-center justify-between border-b border-b-[#e1e7eb] p-4;
|
|
}
|
|
.card-footer {
|
|
@apply -mx-[0.6rem] mt-2 flex items-center justify-center border-t border-t-[#e1e7eb] py-4;
|
|
}
|
|
|
|
.fo-facility-info-flow-year,
|
|
.fo-facility-info-water-year,
|
|
.fo-facility-info-phosphorus-year,
|
|
.fo-facility-info-flow-summer,
|
|
.fo-facility-info-water-summer,
|
|
.fo-facility-info-phosphorus-summer,
|
|
.fo-facility-info-flow-winter,
|
|
.fo-facility-info-water-winter,
|
|
.fo-facility-info-phosphorus-winter {
|
|
color: var(--foreground);
|
|
}
|
|
|
|
.fo-facility-info-flow-year {
|
|
background-color: var(--fo-facility-info-flow-year-bg);
|
|
}
|
|
|
|
.fo-facility-info-water-year {
|
|
background-color: var(--fo-facility-info-water-year-bg);
|
|
}
|
|
|
|
.fo-facility-info-phosphorus-year {
|
|
background-color: var(--fo-facility-info-phosphorus-year-bg);
|
|
}
|
|
|
|
.fo-facility-info-flow-summer {
|
|
background-color: var(--fo-facility-info-flow-summer-bg);
|
|
}
|
|
|
|
.fo-facility-info-water-summer {
|
|
background-color: var(--fo-facility-info-water-summer-bg);
|
|
}
|
|
|
|
.fo-facility-info-phosphorus-summer {
|
|
background-color: var(--fo-facility-info-phosphorus-summer-bg);
|
|
}
|
|
|
|
.fo-facility-info-flow-winter {
|
|
background-color: var(--fo-facility-info-flow-winter-bg);
|
|
}
|
|
|
|
.fo-facility-info-water-winter {
|
|
background-color: var(--fo-facility-info-water-winter-bg);
|
|
}
|
|
|
|
.fo-facility-info-phosphorus-winter {
|
|
background-color: var(--fo-facility-info-phosphorus-winter-bg);
|
|
}
|
|
|
|
.fo-rain-impact-row td {
|
|
background-color: var(--fo-rain-impact-row-bg);
|
|
}
|
|
|
|
|
|
.fo-facility-info-header-surface {
|
|
border: 1px solid var(--fo-facility-info-header-border);
|
|
background-color: var(--fo-facility-info-header-bg);
|
|
color: var(--fo-facility-info-header-fg);
|
|
}
|
|
|
|
input[type="file"] {
|
|
@apply w-[200px] h-[40px] px-3 py-2 border border-[#d1d5db] rounded-md bg-white text-sm cursor-pointer;
|
|
}
|
|
}
|