72 lines
1.1 KiB
CSS
72 lines
1.1 KiB
CSS
|
:root {
|
||
|
|
--primary-colour: #E50914;
|
||
|
|
--shadow-colour: black;
|
||
|
|
--shadow-intensity: 0.6;
|
||
|
|
--UIControlsSize: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ---------- Netflix SVG ---------- */
|
||
|
|
|
||
|
|
.base {
|
||
|
|
fill: var(--primary-colour);
|
||
|
|
transition: fill 0.4s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.shadow-start {
|
||
|
|
stop-color: var(--shadow-colour);
|
||
|
|
stop-opacity: var(--shadow-intensity);
|
||
|
|
|
||
|
|
}
|
||
|
|
.shadow-end {
|
||
|
|
stop-color: var(--shadow-colour);
|
||
|
|
stop-opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
height: 100vh;
|
||
|
|
background: black;
|
||
|
|
overflow: hidden;
|
||
|
|
transition: background 0.4s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.netflix-container {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
height: 80vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
svg {
|
||
|
|
margin: 15vmin;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ---------- UI Controls ---------- */
|
||
|
|
|
||
|
|
.themesContainer {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.theme {
|
||
|
|
width: var(--UIControlsSize);
|
||
|
|
height: var(--UIControlsSize);
|
||
|
|
margin: 20px;
|
||
|
|
border-radius: 50%;
|
||
|
|
border: 3px solid white;
|
||
|
|
background: lightgray;
|
||
|
|
transition: transform 0.2s;
|
||
|
|
cursor: pointer;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.theme:hover {
|
||
|
|
transform: scale(1.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.bg-colour {
|
||
|
|
height: 100%;
|
||
|
|
width: 50%;
|
||
|
|
transform-origin: 100% 50%;
|
||
|
|
transform: rotate(225deg);
|
||
|
|
}
|