mirror of
https://github.com/FranP-code/Pomodoro-Timer-with-Clockify-integration.git
synced 2025-10-12 23:52:30 +00:00
583 lines
12 KiB
CSS
583 lines
12 KiB
CSS
.header-main-page {
|
|
background-color: #62D2A2;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 17vh;
|
|
}
|
|
.header-main-page a {
|
|
text-decoration: none;
|
|
}
|
|
.header-main-page h1 {
|
|
color: #ffffff;
|
|
font-size: 7vh;
|
|
font-family: "Raleway", sans-serif;
|
|
font-weight: 700;
|
|
margin: 0;
|
|
padding: 0;
|
|
user-select: none;
|
|
}
|
|
.header-main-page h3 {
|
|
color: rgba(255, 255, 255, 0.75);
|
|
font-size: 2vh;
|
|
font-family: "Raleway", sans-serif;
|
|
font-weight: 700;
|
|
margin: 0;
|
|
padding: 0;
|
|
user-select: none;
|
|
}
|
|
.header-main-page h3 .selectable {
|
|
user-select: all;
|
|
}
|
|
.header-main-page h3 .selectable a,
|
|
.header-main-page h3 .selectable a:link,
|
|
.header-main-page h3 .selectable a:visited,
|
|
.header-main-page h3 .selectable a:hover,
|
|
.header-main-page h3 .selectable a:active {
|
|
color: inherit;
|
|
text-decoration: inherit;
|
|
font-weight: inherit;
|
|
}
|
|
.header-main-page h3 .selectable a::selection {
|
|
background-color: #ffe83d;
|
|
color: #000000;
|
|
}
|
|
|
|
.banner-login {
|
|
background-color: #D17262;
|
|
color: white;
|
|
font-family: "Rambla", sans-serif;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0px 5vw;
|
|
height: 7vh;
|
|
}
|
|
.banner-login p {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.banner-login .button-container {
|
|
width: 20vw;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
.banner-login .button-container button {
|
|
background: none;
|
|
border: none;
|
|
width: 8vw;
|
|
font-size: 2.6vh;
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
height: 6vh;
|
|
cursor: pointer;
|
|
}
|
|
.banner-login .button-container .register {
|
|
border: solid 1px #ffffff;
|
|
border-radius: 24px;
|
|
}
|
|
.banner-login .button-container .login {
|
|
background-color: #00000057;
|
|
border-radius: 24px;
|
|
}
|
|
|
|
.blank {
|
|
opacity: 0%;
|
|
}
|
|
|
|
.main-pomodoro {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 68vh;
|
|
}
|
|
.main-pomodoro .timer {
|
|
display: flex;
|
|
justify-content: center;
|
|
font-family: "Rambla", sans-serif;
|
|
font-weight: bold;
|
|
font-size: 130pt;
|
|
color: #1FAB89;
|
|
}
|
|
.main-pomodoro .style-display {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
font-family: "Rambla", sans-serif;
|
|
}
|
|
.main-pomodoro .style-display h4 {
|
|
font-size: 24pt;
|
|
margin: 0;
|
|
padding: 0;
|
|
color: #1FAB89;
|
|
user-select: none;
|
|
}
|
|
.main-pomodoro .style-display h3 {
|
|
font-size: 30pt;
|
|
margin: 0;
|
|
padding: 0;
|
|
color: #1FAB89;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
.main-pomodoro .start-pomodoro {
|
|
background: none;
|
|
border: none;
|
|
width: 8vw;
|
|
font-family: "Raleway", sans-serif;
|
|
font-weight: 700;
|
|
margin-top: 6vh;
|
|
width: 30vw;
|
|
height: 8vh;
|
|
background: #1FAB89;
|
|
border-radius: 24px;
|
|
font-size: 5vh;
|
|
color: white;
|
|
}
|
|
|
|
.style-selector {
|
|
width: calc(20vw - 1px);
|
|
padding-left: 3vw;
|
|
padding-bottom: 12vh;
|
|
position: absolute;
|
|
top: 29vh;
|
|
left: 75vw;
|
|
box-shadow: 1px 6px 15px #00000020;
|
|
z-index: 50;
|
|
transition: 0.2s ease-in-out;
|
|
}
|
|
.style-selector h2 {
|
|
font-family: "Rambla", sans-serif;
|
|
color: #1FAB89;
|
|
font-size: 30pt;
|
|
text-align: center;
|
|
margin-left: -3vw;
|
|
margin-top: 1vh;
|
|
margin-bottom: 3vh;
|
|
}
|
|
.style-selector .style-selection-container .style-container {
|
|
display: flex;
|
|
height: 10vh;
|
|
align-items: center;
|
|
}
|
|
.style-selector .style-selection-container .style-container label {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
.style-selector .style-selection-container .style-container label .title {
|
|
font-family: "Rambla", sans-serif;
|
|
font-size: 13pt;
|
|
}
|
|
.style-selector .style-selection-container .style-container label .times {
|
|
font-family: "Rambla", sans-serif;
|
|
color: #1FAB89;
|
|
font-size: 13pt;
|
|
}
|
|
.style-selector .style-selection-container input {
|
|
width: 65px;
|
|
opacity: 0;
|
|
}
|
|
.style-selector .style-selection-container .checkbox__input {
|
|
display: grid;
|
|
grid-template-areas: "checkbox";
|
|
}
|
|
.style-selector .style-selection-container .checkbox__input > * {
|
|
grid-area: checkbox;
|
|
}
|
|
.style-selector .style-selection-container .checkbox_control {
|
|
display: inline-grid;
|
|
width: 45px;
|
|
height: 45px;
|
|
border: 3px solid #62D2A2;
|
|
border-radius: 0.25em;
|
|
border-radius: 100%;
|
|
transition: ease-in-out 0.2s;
|
|
}
|
|
.style-selector .style-selection-container .checkbox__input input:checked + .checkbox_control {
|
|
background-color: #9DF3C4;
|
|
}
|
|
|
|
.style-selector-show {
|
|
opacity: 100%;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.style-selector-hidden {
|
|
opacity: 0%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.go-down {
|
|
height: 7vh;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.go-down svg {
|
|
height: 6vh;
|
|
width: 6vh;
|
|
cursor: pointer;
|
|
}
|
|
.go-down svg path {
|
|
fill: #aaaaaa;
|
|
}
|
|
|
|
#about-this {
|
|
height: 95vh;
|
|
padding: 0px 3vw;
|
|
padding-top: 5vh;
|
|
}
|
|
#about-this .titles {
|
|
display: flex;
|
|
}
|
|
#about-this .titles h3 {
|
|
width: 50%;
|
|
font-family: "Raleway", sans-serif;
|
|
font-weight: 700;
|
|
margin: 0;
|
|
padding: 0;
|
|
user-select: none;
|
|
font-size: 22pt;
|
|
}
|
|
#about-this .titles h3 .line-through {
|
|
text-decoration: line-through;
|
|
text-decoration-thickness: 5px;
|
|
text-decoration-color: #73b7ff;
|
|
}
|
|
#about-this .information {
|
|
display: flex;
|
|
}
|
|
#about-this .information ul {
|
|
width: 50%;
|
|
}
|
|
#about-this .information ul li h4 {
|
|
margin: 0;
|
|
padding: 0;
|
|
user-select: none;
|
|
font-family: "Rambla", sans-serif;
|
|
font-size: 18pt;
|
|
}
|
|
#about-this .information ul li p {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: "Rambla", sans-serif;
|
|
font-size: 13pt;
|
|
margin-left: 2vw;
|
|
margin-top: 1vh;
|
|
}
|
|
|
|
.history-button {
|
|
background: none;
|
|
border: none;
|
|
width: 8vw;
|
|
height: 9vh;
|
|
width: 9vh;
|
|
padding: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: absolute;
|
|
left: 6vh;
|
|
border-radius: 100%;
|
|
background-color: #9DF3C4;
|
|
}
|
|
.history-button svg {
|
|
cursor: pointer;
|
|
width: 6vh;
|
|
height: 6vh;
|
|
}
|
|
.history-button svg path {
|
|
fill: #aaaaaa;
|
|
}
|
|
.history-button svg path {
|
|
fill: rgba(80, 80, 80, 0.556);
|
|
}
|
|
.history-button:hover {
|
|
animation: spin 0.4s ease-in-out;
|
|
}
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.pomodoro-counter {
|
|
position: absolute;
|
|
top: 29vh;
|
|
}
|
|
.pomodoro-counter ul li {
|
|
display: flex;
|
|
font-family: "Rambla", sans-serif;
|
|
list-style-type: none;
|
|
margin-top: 2vh;
|
|
font-size: 15pt;
|
|
color: #00000070;
|
|
}
|
|
.pomodoro-counter ul li .separator {
|
|
user-select: none;
|
|
margin: 0px 0.5vw;
|
|
}
|
|
.pomodoro-counter ul li .quantity {
|
|
font-family: "Raleway", sans-serif;
|
|
font-weight: 700;
|
|
user-select: none;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 30px;
|
|
width: 30px;
|
|
border-radius: 100%;
|
|
color: #1FAB89;
|
|
background-color: #9DF3C4;
|
|
}
|
|
|
|
.identify-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.identify-container .identify {
|
|
width: 70vw;
|
|
}
|
|
.identify-container .identify .options-container {
|
|
display: flex;
|
|
}
|
|
.identify-container .identify .options-container .option {
|
|
width: 35vw;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
padding: 5vh 0px;
|
|
background-color: #1FAB89;
|
|
cursor: pointer;
|
|
transition: 0.4s ease-in-out;
|
|
}
|
|
.identify-container .identify .options-container .option h2 {
|
|
font-family: "Raleway", sans-serif;
|
|
font-weight: 700;
|
|
margin: 0;
|
|
padding: 0;
|
|
user-select: none;
|
|
color: #ffffff;
|
|
}
|
|
.identify-container .identify .options-container .active-option {
|
|
cursor: initial;
|
|
background-color: #15745c;
|
|
}
|
|
.identify-container .identify .form-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.identify-container .identify .form-container form {
|
|
width: 50vw;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding-top: 1vh;
|
|
}
|
|
.identify-container .identify .form-container form input {
|
|
height: 4vh;
|
|
width: 60%;
|
|
margin-bottom: 1vh;
|
|
border: none;
|
|
border-bottom: 1px solid #969696;
|
|
outline: none;
|
|
}
|
|
.identify-container .identify .form-container form input[type=submit] {
|
|
width: 50%;
|
|
border: #969696 solid 1px;
|
|
}
|
|
|
|
.dark-mode {
|
|
position: absolute;
|
|
left: calc(100% - 5vw);
|
|
}
|
|
.dark-mode #dark-mode_toogle-switch {
|
|
width: 0;
|
|
height: 0;
|
|
visibility: hidden;
|
|
}
|
|
.dark-mode label {
|
|
display: block;
|
|
width: 4vw;
|
|
height: 4vh;
|
|
background-color: #D7FBE8;
|
|
border-radius: 100px;
|
|
position: relative;
|
|
cursor: pointer;
|
|
transition: 0.5s;
|
|
box-shadow: 0 0 20px #477a8550;
|
|
}
|
|
.dark-mode label::after {
|
|
content: "";
|
|
width: 3.5vh;
|
|
height: 3.5vh;
|
|
background-color: #b632eb;
|
|
position: absolute;
|
|
border-radius: 100%;
|
|
top: 0.25vh;
|
|
left: 0.25vh;
|
|
transition: 0.5s;
|
|
}
|
|
.dark-mode input:checked + label:after {
|
|
left: calc(100% - 0.25vh);
|
|
transform: translateX(-100%);
|
|
background-color: #D7FBE8;
|
|
}
|
|
.dark-mode input:checked + label {
|
|
background-color: #b632eb;
|
|
}
|
|
|
|
.account-container #message {
|
|
padding-left: 5vw;
|
|
background-color: #ff6a6a;
|
|
}
|
|
.account-container #message h1 {
|
|
font-family: "Raleway", sans-serif;
|
|
font-weight: 700;
|
|
margin: 0;
|
|
padding: 0;
|
|
user-select: none;
|
|
color: #ffffff;
|
|
padding: 2vh 0px;
|
|
}
|
|
.account-container .successfully {
|
|
background-color: #75b7ff !important;
|
|
}
|
|
.account-container .successfully h1 {
|
|
color: #3a3a3a !important;
|
|
}
|
|
.account-container .next-step .disabled {
|
|
user-select: none;
|
|
cursor: initial;
|
|
pointer-events: none;
|
|
opacity: 30%;
|
|
}
|
|
.account-container .next-step .next-step-title {
|
|
padding-left: 5vw;
|
|
padding-top: 5vh;
|
|
background-color: #9DF3C4;
|
|
}
|
|
.account-container .next-step .next-step-title h1, .account-container .next-step .next-step-title h2 {
|
|
margin: 0;
|
|
padding: 0;
|
|
user-select: none;
|
|
font-family: "Raleway", sans-serif;
|
|
font-weight: 700;
|
|
color: #1FAB89;
|
|
padding-bottom: 3vh;
|
|
}
|
|
.account-container .next-step form {
|
|
width: 50vw;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding-top: 1vh;
|
|
}
|
|
.account-container .next-step form input {
|
|
height: 4vh;
|
|
width: 60%;
|
|
margin-bottom: 1vh;
|
|
border: none;
|
|
border-bottom: 1px solid #969696;
|
|
outline: none;
|
|
}
|
|
.account-container .next-step form input[type=submit] {
|
|
width: 50%;
|
|
border: #969696 solid 1px;
|
|
}
|
|
.account-container .next-step form .disabled {
|
|
opacity: 0%;
|
|
}
|
|
.account-container .next-step .flex-container-change-api-container {
|
|
padding-left: 5vw;
|
|
}
|
|
.account-container .next-step .flex-container-change-api-container .change-api-container {
|
|
width: 50vw;
|
|
background-color: #D7FBE8;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-top: 1vh;
|
|
border-radius: 5%;
|
|
}
|
|
.account-container .next-step .flex-container-change-api-container .change-api-container .api-preview-container .title {
|
|
margin: 0;
|
|
padding: 0;
|
|
user-select: none;
|
|
font-family: "Raleway", sans-serif;
|
|
font-weight: 700;
|
|
}
|
|
.account-container .next-step .flex-container-change-api-container .change-api-container .api-preview-container .api-preview {
|
|
font-weight: bold;
|
|
}
|
|
.account-container .next-step .flex-container-change-api-container .change-api-container #change-API-button {
|
|
height: 4vh;
|
|
width: 20vw;
|
|
margin-bottom: 1vh;
|
|
border: none;
|
|
outline: none;
|
|
border: #969696 solid 1px;
|
|
}
|
|
|
|
.loading-container {
|
|
width: 100%;
|
|
height: 83vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.go-to-account {
|
|
width: 3vw;
|
|
height: 3vw;
|
|
position: absolute;
|
|
left: 5vw;
|
|
background-color: #1FAB89;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 100%;
|
|
}
|
|
.go-to-account .go-to-account-text {
|
|
font-family: "Raleway", sans-serif;
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
user-select: none;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.close-session {
|
|
width: 6vw;
|
|
height: 3vw;
|
|
position: absolute;
|
|
left: 10vw;
|
|
background-color: #1FAB89;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 5%;
|
|
}
|
|
.close-session .close-session-text {
|
|
font-family: "Raleway", sans-serif;
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
user-select: none;
|
|
color: #ffffff;
|
|
}
|
|
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
height: 100%;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
/*# sourceMappingURL=styles.css.map */
|