MaketTahta/assets/scss/main.scss

253 lines
4.7 KiB
SCSS
Raw Normal View History

2023-10-26 01:26:55 +03:00
/* 2023 Aliberk Sandıı*/
@use "button" as b;
@use "animation" as a;
* {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
}
body,
html {
display: flex;
flex-direction: column;
margin: 0px;
height: 100%;
width: 100%;
background-color: black;
color: aliceblue;
font-family: "Montserrat", Arial, Helvetica, sans-serif;
}
section {
// SECTION TOP
&#top {
display: flex;
justify-content: space-around;
user-select: none;
width: 100%;
height: 100px;
.class {
display: flex;
flex-direction: column;
column-gap: 10px;
2023-10-26 01:26:55 +03:00
margin: 5px;
min-width: 20vw;
margin-right: auto;
font-weight: 800;
font-style: oblique;
}
.clock {
display: flex;
#time {
display: flex;
//UNNECESSARY LINES?
align-items: center;
align-self: center;
align-content: center;
justify-items: center;
justify-self: center;
justify-content: center;
font-size: 80px;
}
}
.toolbox {
2023-10-26 01:26:55 +03:00
min-width: 20vw;
margin-left: auto;
text-align: right;
display: block;
button {
height: 30px;
width: 30px;
line-height: 20px;
}
}
.settings-box {
min-width: min-content;
margin-left: 0;
text-align: right;
2023-10-26 01:26:55 +03:00
button {
height: 30px;
width: 30px;
line-height: 20px;
}
#settings {
display: none;
flex-direction: column;
align-items: end;
font-size: small;
margin-top: 5px;
form {
display: flex;
flex-direction: column;
position: absolute;
min-width: 10vw;
2023-10-26 01:26:55 +03:00
background-color: grey;
.cell {
float: left;
display: flex;
flex-direction: row;
margin-bottom: 1vh;
input[type="checkbox"] {
//UNNECESSARY LINES?
appearance: none;
background-color: #fff;
margin: 0;
width: 1.15em;
height: 1.15em;
border: 0.15em solid darkslateblue;
border-radius: 0.15em;
transform: translateY(-0.075em);
display: grid;
place-content: center;
outline: 0px solid white;
outline-offset: 0px;
&::before {
//UNNECESSARY LINES?
content: "";
width: 0.65em;
height: 0.65em;
transform: scale(0);
transition: 120ms transform ease-in-out;
box-shadow: inset 1em 1em green;
transform-origin: bottom left;
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
&:checked::before {
transform: scale(1);
}
&:focus {
outline: max(2px, 0.15em) solid white;
outline-offset: max(2px, 0.15em);
}
}
label {
padding-left: 5px;
display: block;
text-align: left;
align-self: center;
}
}
}
}
}
}
// SECTION MID
&#mid {
display: flex;
flex-direction: column;
text-align: center;
user-select: none;
#timers {
display: none;
flex-direction: column;
#timers-menu {
ul {
display: flex;
justify-content: center;
padding: 0;
li {
// padding: 1px;
list-style-type: none;
box-sizing: border-box;
@include b.button-effect;
.front {
font-size: medium;
font-weight: 500;
}
}
}
}
#stopwatch {
display: none;
flex-direction: column;
.timer {
font-size: 150px;
2023-10-26 01:26:55 +03:00
display: flex;
align-self: center;
.min,
.sec,
.msec {
width: 12vw;
2023-10-26 01:26:55 +03:00
}
}
}
#timer {
display: none;
flex-direction: column;
.timer {
font-size: xx-large;
}
}
}
#yemek-listesi {
display: none;
flex-direction: column;
}
#animations {
display: none;
flex-direction: column;
}
}
// SECTION BOTTOM
&#bottom {
margin-top: auto;
#rainbow {
width: 100%;
height: 20px;
animation: rain 4.72s ease infinite;
}
}
}
.kronometre {
text-align: center;
margin: auto;
font-size: 50px;
}