SebinNyshkim/sebin-reference
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: new paint job

Browse source
This commit is contained in:
Sebin Nyshkim 2022-01-28 23:54:58 +01:00
parent 320e8e7589
commit 88361c95bf
2 changed files with 36 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/components/NsfwWarning.vue
View file

@ -77,13 +77,22 @@ export default {
align-content: center;
margin: auto;
border: 0.25em solid $bg-color-warning;
border: 0.25em solid $sebin-secondary;
border-radius: 1em;
padding: 1em;
z-index: 9002;
background-color: $bg-color-dark;
@include theme(light) {
@include radial-background($bg-color-light, $bg-color-dark);
}
@include theme(dark) {
@include radial-background(
darken($bg-color-light, 20%),
darken($bg-color-dark, 5%)
);
}
> * {
flex: 0 1 100%;
@ -103,11 +112,11 @@ export default {
margin: 0.75em 0;
&.positive {
@include button($btn-color-positive);
@include button(darken($sebin-eyes, 10%));
}
&.negative {
@include button($btn-color-negative);
@include button(darken($bg-color-lighter, 20%));
}
}
</style>

29
src/components/QuickFacts.vue
View file

@ -25,12 +25,34 @@ export default {
<style lang="scss">
@import "@/scss/_variables.scss";
@import "@/scss/_mixins.scss";
.quickfacts {
border-radius: 1em;
overflow: hidden;
margin: 1em 0;
position: relative;
box-shadow: 0.125em 0.125em 0.5em rgba(#000, 0.7);
background: radial-gradient(
circle at bottom right,
$bg-color-lighter 5%,
transparent 50%
),
radial-gradient(circle at top left, $bg-color-light 5%, $bg-color-dark 100%);
@include theme(dark) {
background: radial-gradient(
circle at bottom right,
darken($bg-color-lighter, 30%) 5%,
transparent 50%
),
radial-gradient(
circle at top left,
darken($bg-color-light, 10%) 5%,
darken($bg-color-dark, 10%) 100%
);
}
&:before {
position: absolute;
@ -55,18 +77,14 @@ export default {
}
&.open & {
&__head {
background-color: $bg-color-light;
}
&__list {
max-height: 25em;
border-top: 0.125em solid $sebin-secondary;
padding: 1.5rem;
}
}
&__head {
background-color: $bg-color-dark;
margin: 0;
border: 0;
padding: 0.75rem 1.5rem;
@ -75,7 +93,6 @@ export default {
}
&__list {
background-color: rgba($bg-color-dark, 0.5);
max-height: 0em;
padding: 0 1.5rem;
transition: 0.3s all ease-in-out;