65 lines
2 KiB
SCSS
65 lines
2 KiB
SCSS
// Rôle : fournit les mixins Sass partagés du thème.
|
|
@mixin border-mask {
|
|
mask-image:
|
|
linear-gradient(#000 0 0),
|
|
linear-gradient(#000 0 0);
|
|
mask-origin:
|
|
content-box,
|
|
border-box;
|
|
mask-clip:
|
|
content-box,
|
|
border-box;
|
|
mask-composite: exclude;
|
|
-webkit-mask-image:
|
|
linear-gradient(#000 0 0),
|
|
linear-gradient(#000 0 0);
|
|
-webkit-mask-origin:
|
|
content-box,
|
|
border-box;
|
|
-webkit-mask-clip:
|
|
content-box,
|
|
border-box;
|
|
-webkit-mask-composite: xor;
|
|
}
|
|
|
|
@mixin gold-panel-frame($transition: false) {
|
|
&::before,
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
padding: 1px;
|
|
border-radius: inherit;
|
|
pointer-events: none;
|
|
|
|
@include border-mask;
|
|
|
|
@if $transition {
|
|
transition: background var(--duration-fast) var(--ease-standard);
|
|
}
|
|
}
|
|
|
|
&::before {
|
|
background: rgba(165, 180, 252, 0.14);
|
|
}
|
|
|
|
&::after {
|
|
background:
|
|
radial-gradient(circle at calc(100% - var(--radius-lg)) calc(100% - var(--radius-lg)), rgba(246, 196, 83, 0.52) 0 18px, transparent 27px),
|
|
linear-gradient(90deg, transparent 0 30%, rgba(246, 196, 83, 0.08) 42%, rgba(246, 196, 83, 0.38) 72%, rgba(246, 196, 83, 0.52) 100%),
|
|
linear-gradient(180deg, transparent 0 30%, rgba(246, 196, 83, 0.08) 42%, rgba(246, 196, 83, 0.38) 72%, rgba(246, 196, 83, 0.52) 100%);
|
|
}
|
|
}
|
|
|
|
@mixin temporary-toggle-active($text-color: var(--color-text-primary)) {
|
|
border-color: rgba(246, 196, 83, 0.46);
|
|
background:
|
|
radial-gradient(circle at 100% 100%, rgba(139, 92, 246, 0.16), transparent 48%) padding-box,
|
|
linear-gradient(135deg, rgba(246, 196, 83, 0.12), rgba(246, 196, 83, 0.02) 42%, rgba(21, 26, 48, 0.04)) padding-box,
|
|
linear-gradient(135deg, rgba(13, 17, 34, 0.92), rgba(21, 26, 48, 0.82)) padding-box,
|
|
linear-gradient(120deg, rgba(246, 196, 83, 0.86), rgba(255, 244, 196, 0.76), rgba(246, 196, 83, 0.72)) border-box;
|
|
color: $text-color;
|
|
box-shadow:
|
|
inset 0 -2px 0 rgba(246, 196, 83, 0.34),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
|
}
|