104 lines
2.1 KiB
SCSS
104 lines
2.1 KiB
SCSS
// sass assets/scss/main.scss:assets/css/main.css --style=expanded --watch
|
|
|
|
/* Color Theme Swatches in Hex */
|
|
$color-theme1: #f7eedf;
|
|
$color-theme2: #b7cfb7;
|
|
$color-theme3: #ffcdb6;
|
|
$color-theme4: #feaea5;
|
|
$color-theme5: #ffc7a2;
|
|
|
|
$primary-color: #efefef;
|
|
|
|
// Allgemeine Formatierung =================================
|
|
|
|
*,
|
|
html {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
background-color: $color-theme1;
|
|
}
|
|
|
|
// Module cutey cat ======================
|
|
|
|
.m-cutey-cat {
|
|
h2 {
|
|
color: darken($color-theme2, 20);
|
|
}
|
|
|
|
.box-cat-selection {
|
|
position: fixed;
|
|
}
|
|
|
|
ul.list {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
font-family: Georgia, 'Times New Roman', Times, serif;
|
|
font-size: 2rem;
|
|
|
|
li {
|
|
min-width: 400px;
|
|
background-color: $color-theme4;
|
|
margin: 0 0 10px;
|
|
user-select: none;
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
|
|
transition: all 0.4s cubic-bezier(0.52, 0.02, 0.43, 1.39);
|
|
&:not(.selected):hover {
|
|
background-color: darken($color-theme4, 10);
|
|
box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
|
|
transform: scale(1.1);
|
|
|
|
img {
|
|
border-width: 0;
|
|
}
|
|
}
|
|
|
|
img {
|
|
width: 120px;
|
|
border: 10px solid rgba(white, 0.6);
|
|
transition: all 0.4s;
|
|
}
|
|
|
|
span {
|
|
color: white;
|
|
padding: 0 1rem;
|
|
letter-spacing: 2px;
|
|
}
|
|
}
|
|
|
|
&.list-cat-vote {
|
|
li {
|
|
&.selected {
|
|
background-color: lighten($color-theme4, 10);
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.list-cat-selection {
|
|
li {
|
|
background-color: $color-theme2;
|
|
&:hover {
|
|
background-color: darken($color-theme2, 10);
|
|
|
|
&::after {
|
|
position: absolute;
|
|
top: 30px;
|
|
right: 1.5rem;
|
|
content: '\f1f8';
|
|
font-family: 'Font Awesome 5 Free';
|
|
font-weight: 900;
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|