135 lines
5.9 KiB
SCSS
135 lines
5.9 KiB
SCSS
// Rôle : génère le fond nebula et le champ d'étoiles global.
|
|
@use "sass:list";
|
|
|
|
$bright-stars:
|
|
(12% 19% rgba(255, 255, 255, 0.98) 1.4px rgba(255, 255, 255, 0.2) 3.8px 6px),
|
|
(38% 27% rgba(246, 196, 83, 0.94) 1.5px rgba(246, 196, 83, 0.18) 4px 7px),
|
|
(73% 17% rgba(255, 255, 255, 0.96) 1.5px rgba(167, 139, 250, 0.2) 4.5px 7px),
|
|
(87% 61% rgba(255, 255, 255, 0.96) 1.4px rgba(255, 255, 255, 0.18) 4px 6.5px),
|
|
(52% 71% rgba(246, 196, 83, 0.9) 1.3px rgba(246, 196, 83, 0.16) 3.8px 6.5px),
|
|
(29% 62% rgba(255, 255, 255, 1) 1.6px rgba(255, 255, 255, 0.18) 4.8px 8px),
|
|
(68% 52% rgba(246, 196, 83, 0.98) 1.6px rgba(246, 196, 83, 0.18) 4.8px 8px),
|
|
(92% 19% rgba(255, 255, 255, 1) 1.5px rgba(167, 139, 250, 0.18) 4.6px 7.5px);
|
|
|
|
$stars:
|
|
(7% 12% rgba(255, 255, 255, 0.95) 1.1px 1.8px),
|
|
(14% 68% rgba(167, 139, 250, 0.72) 1.2px 2px),
|
|
(19% 34% rgba(255, 255, 255, 0.72) 0.9px 1.5px),
|
|
(24% 86% rgba(246, 196, 83, 0.68) 1.2px 2.1px),
|
|
(31% 18% rgba(255, 255, 255, 0.82) 1px 1.7px),
|
|
(37% 57% rgba(255, 255, 255, 0.6) 0.9px 1.5px),
|
|
(43% 9% rgba(246, 196, 83, 0.62) 1.2px 2px),
|
|
(48% 77% rgba(167, 139, 250, 0.66) 1px 1.8px),
|
|
(54% 29% rgba(255, 255, 255, 0.92) 1.1px 1.8px),
|
|
(61% 63% rgba(255, 255, 255, 0.62) 0.9px 1.5px),
|
|
(66% 14% rgba(167, 139, 250, 0.74) 1.2px 2px),
|
|
(71% 84% rgba(255, 255, 255, 0.76) 1px 1.7px),
|
|
(76% 42% rgba(246, 196, 83, 0.76) 1.2px 2.1px),
|
|
(83% 23% rgba(255, 255, 255, 0.68) 0.9px 1.5px),
|
|
(89% 72% rgba(167, 139, 250, 0.62) 1px 1.8px),
|
|
(94% 48% rgba(255, 255, 255, 0.86) 1.1px 1.8px),
|
|
(11% 45% rgba(255, 255, 255, 0.5) 0.8px 1.4px),
|
|
(28% 51% rgba(246, 196, 83, 0.56) 0.9px 1.6px),
|
|
(58% 92% rgba(255, 255, 255, 0.58) 0.8px 1.4px),
|
|
(97% 8% rgba(255, 255, 255, 0.78) 1px 1.7px),
|
|
(4% 78% rgba(255, 255, 255, 0.55) 0.8px 1.4px),
|
|
(17% 5% rgba(246, 196, 83, 0.5) 0.9px 1.6px),
|
|
(22% 23% rgba(255, 255, 255, 0.46) 0.7px 1.3px),
|
|
(33% 72% rgba(167, 139, 250, 0.5) 0.9px 1.6px),
|
|
(41% 39% rgba(255, 255, 255, 0.54) 0.8px 1.4px),
|
|
(52% 54% rgba(246, 196, 83, 0.44) 0.8px 1.5px),
|
|
(63% 36% rgba(255, 255, 255, 0.48) 0.7px 1.3px),
|
|
(69% 96% rgba(255, 255, 255, 0.5) 0.8px 1.4px),
|
|
(81% 6% rgba(246, 196, 83, 0.52) 0.9px 1.6px),
|
|
(91% 89% rgba(255, 255, 255, 0.56) 0.8px 1.4px),
|
|
(3% 31% rgba(167, 139, 250, 0.42) 0.7px 1.3px),
|
|
(45% 96% rgba(246, 196, 83, 0.42) 0.8px 1.5px),
|
|
(74% 59% rgba(255, 255, 255, 0.46) 0.7px 1.3px),
|
|
(86% 37% rgba(255, 255, 255, 0.5) 0.8px 1.4px),
|
|
(99% 66% rgba(167, 139, 250, 0.46) 0.8px 1.5px),
|
|
(6% 92% rgba(255, 255, 255, 0.42) 0.7px 1.2px),
|
|
(13% 27% rgba(255, 255, 255, 0.34) 0.6px 1.1px),
|
|
(21% 74% rgba(246, 196, 83, 0.34) 0.7px 1.2px),
|
|
(26% 11% rgba(167, 139, 250, 0.36) 0.7px 1.2px),
|
|
(32% 44% rgba(255, 255, 255, 0.38) 0.6px 1.1px),
|
|
(39% 88% rgba(255, 255, 255, 0.34) 0.6px 1.1px),
|
|
(46% 16% rgba(255, 255, 255, 0.4) 0.7px 1.2px),
|
|
(57% 41% rgba(167, 139, 250, 0.36) 0.7px 1.2px),
|
|
(64% 79% rgba(246, 196, 83, 0.34) 0.7px 1.2px),
|
|
(72% 31% rgba(255, 255, 255, 0.36) 0.6px 1.1px),
|
|
(79% 93% rgba(255, 255, 255, 0.4) 0.7px 1.2px),
|
|
(88% 12% rgba(246, 196, 83, 0.36) 0.7px 1.2px),
|
|
(93% 78% rgba(255, 255, 255, 0.38) 0.6px 1.1px),
|
|
(98% 28% rgba(167, 139, 250, 0.34) 0.7px 1.2px),
|
|
(2% 7% rgba(255, 255, 255, 0.34) 0.6px 1.1px),
|
|
(8% 56% rgba(246, 196, 83, 0.32) 0.6px 1.1px),
|
|
(15% 82% rgba(255, 255, 255, 0.38) 0.7px 1.2px),
|
|
(18% 91% rgba(167, 139, 250, 0.32) 0.6px 1.1px),
|
|
(23% 39% rgba(255, 255, 255, 0.3) 0.5px 1px),
|
|
(27% 67% rgba(255, 255, 255, 0.36) 0.6px 1.1px),
|
|
(34% 6% rgba(246, 196, 83, 0.34) 0.7px 1.2px),
|
|
(36% 81% rgba(255, 255, 255, 0.32) 0.6px 1.1px),
|
|
(42% 66% rgba(167, 139, 250, 0.34) 0.7px 1.2px),
|
|
(49% 4% rgba(255, 255, 255, 0.36) 0.6px 1.1px),
|
|
(51% 24% rgba(246, 196, 83, 0.3) 0.6px 1.1px),
|
|
(56% 83% rgba(255, 255, 255, 0.34) 0.6px 1.1px),
|
|
(62% 7% rgba(255, 255, 255, 0.3) 0.5px 1px),
|
|
(67% 68% rgba(167, 139, 250, 0.32) 0.6px 1.1px),
|
|
(70% 25% rgba(246, 196, 83, 0.32) 0.6px 1.1px),
|
|
(78% 11% rgba(255, 255, 255, 0.34) 0.6px 1.1px),
|
|
(82% 82% rgba(255, 255, 255, 0.38) 0.7px 1.2px),
|
|
(86% 51% rgba(246, 196, 83, 0.34) 0.7px 1.2px),
|
|
(90% 33% rgba(255, 255, 255, 0.32) 0.6px 1.1px),
|
|
(96% 94% rgba(167, 139, 250, 0.32) 0.6px 1.1px);
|
|
|
|
@function star-gradient($star) {
|
|
@return radial-gradient(circle at #{list.nth($star, 1)} #{list.nth($star, 2)}, #{list.nth($star, 3)} 0 #{list.nth($star, 4)}, transparent #{list.nth($star, 5)});
|
|
}
|
|
|
|
@function bright-star-gradient($star) {
|
|
@return radial-gradient(circle at #{list.nth($star, 1)} #{list.nth($star, 2)}, #{list.nth($star, 3)} 0 #{list.nth($star, 4)}, #{list.nth($star, 5)} calc(#{list.nth($star, 4)} + 0.3px) #{list.nth($star, 6)}, transparent #{list.nth($star, 7)});
|
|
}
|
|
|
|
@function star-field($bright, $normal) {
|
|
$gradients: ();
|
|
|
|
@each $star in $bright {
|
|
$gradients: list.append($gradients, bright-star-gradient($star), comma);
|
|
}
|
|
|
|
@each $star in $normal {
|
|
$gradients: list.append($gradients, star-gradient($star), comma);
|
|
}
|
|
|
|
@return $gradients;
|
|
}
|
|
|
|
body::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
opacity: 0.88;
|
|
background:
|
|
radial-gradient(ellipse at 18% 22%, rgba(124, 58, 237, 0.3), transparent 34%),
|
|
radial-gradient(ellipse at 82% 10%, rgba(59, 130, 246, 0.18), transparent 30%),
|
|
radial-gradient(ellipse at 78% 72%, rgba(217, 70, 239, 0.18), transparent 36%),
|
|
radial-gradient(ellipse at 36% 92%, rgba(246, 196, 83, 0.1), transparent 34%),
|
|
linear-gradient(118deg, transparent 0 22%, rgba(139, 92, 246, 0.1) 36%, transparent 55%),
|
|
linear-gradient(62deg, transparent 0 32%, rgba(246, 196, 83, 0.06) 48%, transparent 68%);
|
|
filter: saturate(1.18);
|
|
}
|
|
|
|
body::after {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
opacity: 0.82;
|
|
background-image: star-field($bright-stars, $stars);
|
|
background-size: 100% 100%;
|
|
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.36));
|
|
-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.36));
|
|
}
|