278 lines
6.7 KiB
CSS
278 lines
6.7 KiB
CSS
@charset "UTF-8";
|
||
/* 2023 Aliberk Sandıkçı*/
|
||
/* 2023 Aliberk Sandıkçı*/
|
||
@keyframes rain {
|
||
0% {
|
||
background-color: white;
|
||
}
|
||
25% {
|
||
background-color: red;
|
||
}
|
||
50% {
|
||
background-color: green;
|
||
}
|
||
100% {
|
||
background-color: yellow;
|
||
}
|
||
}
|
||
* {
|
||
-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#top {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
user-select: none;
|
||
width: 100%;
|
||
height: 100px;
|
||
}
|
||
section#top .class {
|
||
margin: 5px;
|
||
min-width: 20vw;
|
||
margin-right: auto;
|
||
font-weight: 800;
|
||
font-style: oblique;
|
||
}
|
||
section#top .clock {
|
||
display: flex;
|
||
}
|
||
section#top .clock #time {
|
||
display: flex;
|
||
align-items: center;
|
||
align-self: center;
|
||
align-content: center;
|
||
justify-items: center;
|
||
justify-self: center;
|
||
justify-content: center;
|
||
font-size: 80px;
|
||
}
|
||
section#top .settings-box {
|
||
min-width: 20vw;
|
||
margin-left: auto;
|
||
text-align: right;
|
||
}
|
||
section#top .settings-box button {
|
||
height: 30px;
|
||
width: 30px;
|
||
line-height: 20px;
|
||
}
|
||
section#top .settings-box #settings {
|
||
display: none;
|
||
flex-direction: column;
|
||
align-items: end;
|
||
font-size: small;
|
||
margin-top: 5px;
|
||
}
|
||
section#top .settings-box #settings form {
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
background-color: grey;
|
||
}
|
||
section#top .settings-box #settings form .cell {
|
||
float: left;
|
||
display: flex;
|
||
flex-direction: row;
|
||
margin-bottom: 1vh;
|
||
}
|
||
section#top .settings-box #settings form .cell input[type=checkbox] {
|
||
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;
|
||
}
|
||
section#top .settings-box #settings form .cell input[type=checkbox]::before {
|
||
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%);
|
||
}
|
||
section#top .settings-box #settings form .cell input[type=checkbox]:checked::before {
|
||
transform: scale(1);
|
||
}
|
||
section#top .settings-box #settings form .cell input[type=checkbox]:focus {
|
||
outline: max(2px, 0.15em) solid white;
|
||
outline-offset: max(2px, 0.15em);
|
||
}
|
||
section#top .settings-box #settings form .cell label {
|
||
padding-left: 5px;
|
||
display: block;
|
||
text-align: left;
|
||
align-self: center;
|
||
}
|
||
section#mid {
|
||
display: flex;
|
||
flex-direction: column;
|
||
text-align: center;
|
||
user-select: none;
|
||
}
|
||
section#mid #timers {
|
||
display: none;
|
||
flex-direction: column;
|
||
}
|
||
section#mid #timers #timers-menu ul {
|
||
display: flex;
|
||
justify-content: center;
|
||
padding: 0;
|
||
}
|
||
section#mid #timers #timers-menu ul li {
|
||
list-style-type: none;
|
||
box-sizing: border-box;
|
||
}
|
||
section#mid #timers #timers-menu ul li .pushable {
|
||
position: relative;
|
||
border: none;
|
||
background: transparent;
|
||
padding: 0;
|
||
cursor: pointer;
|
||
outline-offset: 4px;
|
||
transition: filter 250ms;
|
||
}
|
||
section#mid #timers #timers-menu ul li .shadow {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: hsla(0, 0%, 0%, 0.25);
|
||
will-change: transform;
|
||
transform: translateY(2px);
|
||
transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
|
||
}
|
||
section#mid #timers #timers-menu ul li .edge {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(to left, hsl(235, 84%, 26%) 0%, hsl(235, 84%, 26%) 8%, hsl(235, 84%, 26%) 92%, hsl(235, 84%, 26%) 100%);
|
||
}
|
||
section#mid #timers #timers-menu ul li .front {
|
||
display: block;
|
||
position: relative;
|
||
padding: 12px 42px;
|
||
color: white;
|
||
background: hsl(188, 88%, 29%);
|
||
will-change: transform;
|
||
transform: translateY(-4px);
|
||
transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
|
||
}
|
||
section#mid #timers #timers-menu ul li .pushable:hover {
|
||
filter: brightness(110%);
|
||
}
|
||
section#mid #timers #timers-menu ul li .pushable:hover .front {
|
||
transform: translateY(-6px);
|
||
transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
|
||
}
|
||
section#mid #timers #timers-menu ul li .pushable:active .front {
|
||
transform: translateY(-2px);
|
||
transition: transform 34ms;
|
||
}
|
||
section#mid #timers #timers-menu ul li .pushable:hover .shadow {
|
||
transform: translateY(4px);
|
||
transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
|
||
}
|
||
section#mid #timers #timers-menu ul li .pushable:active .shadow {
|
||
transform: translateY(1px);
|
||
transition: transform 34ms;
|
||
}
|
||
section#mid #timers #timers-menu ul li .pushable:focus:not(:focus-visible) {
|
||
outline: none;
|
||
}
|
||
section#mid #timers #timers-menu ul li .pushable-f .front,
|
||
section#mid #timers #timers-menu ul li .pushable-f .edge,
|
||
section#mid #timers #timers-menu ul li .pushable-f .shadow {
|
||
border-top-left-radius: 13px;
|
||
border-bottom-left-radius: 13px;
|
||
}
|
||
section#mid #timers #timers-menu ul li .pushable-f .edge {
|
||
background: linear-gradient(to left, hsl(235, 84%, 26%) 0%, hsl(235, 84%, 26%) 8%, hsl(235, 84%, 26%) 92%, hsl(193, 100%, 30%) 100%);
|
||
}
|
||
section#mid #timers #timers-menu ul li .pushable-l .front,
|
||
section#mid #timers #timers-menu ul li .pushable-l .edge,
|
||
section#mid #timers #timers-menu ul li .pushable-l .shadow {
|
||
border-top-right-radius: 13px;
|
||
border-bottom-right-radius: 13px;
|
||
}
|
||
section#mid #timers #timers-menu ul li .pushable-l .edge {
|
||
background: linear-gradient(to left, hsl(193, 100%, 30%) 0%, hsl(235, 84%, 26%) 8%, hsl(235, 84%, 26%) 92%, hsl(235, 84%, 26%) 100%);
|
||
}
|
||
section#mid #timers #timers-menu ul li .front {
|
||
font-size: medium;
|
||
font-weight: 500;
|
||
}
|
||
section#mid #timers #stopwatch {
|
||
display: none;
|
||
flex-direction: column;
|
||
}
|
||
section#mid #timers #stopwatch .timer {
|
||
font-size: 100px;
|
||
display: flex;
|
||
align-self: center;
|
||
}
|
||
section#mid #timers #stopwatch .timer .min,
|
||
section#mid #timers #stopwatch .timer .sec,
|
||
section#mid #timers #stopwatch .timer .msec {
|
||
width: 10vw;
|
||
}
|
||
section#mid #timers #timer {
|
||
display: none;
|
||
flex-direction: column;
|
||
}
|
||
section#mid #timers #timer .timer {
|
||
font-size: xx-large;
|
||
}
|
||
section#mid #yemek-listesi {
|
||
display: none;
|
||
flex-direction: column;
|
||
}
|
||
section#mid #animations {
|
||
display: none;
|
||
flex-direction: column;
|
||
}
|
||
section#bottom {
|
||
margin-top: auto;
|
||
}
|
||
section#bottom #rainbow {
|
||
width: 100%;
|
||
height: 20px;
|
||
animation: rain 4.72s ease infinite;
|
||
}
|
||
|
||
.kronometre {
|
||
text-align: center;
|
||
margin: auto;
|
||
font-size: 50px;
|
||
}
|
||
|
||
/*# sourceMappingURL=main.css.map */
|