franpcode/Pomodoro-Timer-with-Clockify-integration
1
0
Fork 0
mirror of https://github.com/FranP-code/Pomodoro-Timer-with-Clockify-integration.git synced 2025-10-12 23:52:30 +00:00
Code Issues 1 Packages Projects Releases Wiki Activity

Dark mode done

Browse Source
This commit is contained in:
Francisco Pessano
2021-10-02 15:49:23 -03:00
parent fdbd8a1be6
commit e4f3bccd8c
33 changed files with 604 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
public/css_styles/styles.css
View File

@@ -5,6 +5,7 @@
align-items: center;
justify-content: center;
height: 17vh;
box-sizing: border-box;
}
.header-main-page a {
text-decoration: none;
@@ -56,6 +57,11 @@
font-size: 13pt;
}
}
.header-main-page.dark-mode-component {
background-color: #303841;
border-bottom: 1px solid #ffffff72;
}
.banner-login {
background-color: #D17262;
color: white;
@@ -94,7 +100,7 @@
border-radius: 24px;
}
.blank {
.banner-login.blank {
opacity: 0%;
}
@@ -128,6 +134,11 @@
margin: 10px;
}
}
.banner-login.blank.dark-mode-component {
opacity: 100%;
background-color: #303841;
}
.main-pomodoro {
display: flex;
flex-direction: column;
@@ -187,6 +198,19 @@
font-size: 13pt;
}
}
.main-pomodoro-container.dark-mode-component {
background-color: #303841;
}
.main-pomodoro-container.dark-mode-component .main-pomodoro .timer {
color: #ffffff;
}
.main-pomodoro-container.dark-mode-component .main-pomodoro .style-display h3, .main-pomodoro-container.dark-mode-component .main-pomodoro .style-display h4 {
color: #ffffff;
}
.main-pomodoro-container.dark-mode-component .main-pomodoro .start-pomodoro {
background-color: #4c8ad5;
}
.style-selector {
width: calc(20vw - 1px);
padding-left: 3vw;
@@ -301,9 +325,24 @@
width: 100%;
}
}
.style-selector-container.dark-mode-component .style-selector h2 {
color: #ffffff;
}
.style-selector-container.dark-mode-component .style-selector .style-selection-container .style-container label .title {
color: #ffffff;
}
.style-selector-container.dark-mode-component .style-selector .style-selection-container .style-container label .times {
color: #4c8ad5;
}
.style-selector-container.dark-mode-component .style-selector .style-selection-container .checkbox_control {
border: 3px solid #3e70ae;
}
.style-selector-container.dark-mode-component .style-selector .style-selection-container .checkbox__input input:checked + .checkbox_control {
background-color: #4c8ad5;
}
.go-down {
height: 7vh;
width: 100%;
height: 8vh;
display: flex;
justify-content: center;
}
@@ -328,10 +367,26 @@
border-top: 1px solid #b8b8b8;
}
.go-down-separator-line.dark-mode-component {
background-color: #303841;
}
.go-down.dark-mode-component {
background-color: #303841;
}
.go-down.dark-mode-component#go-to-credits {
background-color: #3A4750;
}
#about-this, #credits {
height: 83vh;
padding: 0px 3vw;
padding-top: 5vh;
padding-bottom: 5vh;
display: flex;
flex-direction: column;
align-items: stretch;
}
#about-this .titles, #credits .titles {
display: flex;
@@ -384,6 +439,17 @@
padding-bottom: 5vh;
}
}
#about-this.dark-mode-component, #credits.dark-mode-component {
background-color: #3A4750;
color: #ffffff;
}
#about-this.dark-mode-component .information, #credits.dark-mode-component .information {
display: flex;
}
#about-this.dark-mode-component .information ul li p a, #credits.dark-mode-component .information ul li p a {
color: #4c8ad5;
}
.history-button {
background: none;
border: none;
@@ -458,10 +524,26 @@
padding-bottom: 5vh;
}
}
.pomodoro-counter.dark-mode-component ul li {
color: #ffffff;
}
.pomodoro-counter.dark-mode-component ul li .quantity {
color: #4c8ad5;
background: #3A4750;
}
html, body {
height: 100%;
}
.identify-container {
display: flex;
flex-direction: column;
align-items: center;
flex-grow: 1;
}
.identify-container:has {
height: 100%;
}
.identify-container .error-message-container {
width: 70vw;
@@ -529,6 +611,23 @@
border: #969696 solid 1px;
}
.identify-container.dark-mode-component {
background-color: #3A4750;
}
.identify-container.dark-mode-component .identify .options-container .option {
background-color: #D72323;
}
.identify-container.dark-mode-component .identify .options-container .active-option {
background-color: #7c1414;
}
.identify-container.dark-mode-component .identify .form-container form input {
color: white;
background: none;
}
.identify-container.dark-mode-component .identify .form-container form input[type=submit] {
background-color: #303841;
}
.dark-mode {
position: absolute;
left: calc(100% - 5vw);
@@ -587,6 +686,13 @@
height: 15px;
}
}
html, body {
height: 100%;
}
.account-container {
height: 100%;
}
.account-container #message {
padding-left: 5vw;
background-color: #ff6a6a;
@@ -657,7 +763,8 @@
display: flex;
flex-direction: column;
padding-top: 1vh;
border-radius: 5%;
border-radius: 2px;
padding-left: 1vw;
}
.account-container .next-step .flex-container-change-api-container .change-api-container .api-preview-container .title {
margin: 0;
@@ -686,6 +793,46 @@
align-items: center;
}
@media (max-width: 991.98px) {
.account-container .next-step {
display: flex;
}
.account-container .next-step .next-step-title h1 {
font-size: 15pt;
}
.account-container .next-step .next-step-title h2 {
font-size: 12pt;
}
.account-container .next-step .flex-container-change-api-container .change-api-container {
width: auto;
}
}
.account-container.dark-mode-component {
background-color: #3A4750;
}
.account-container.dark-mode-component .next-step .next-step-title {
background-color: #4c8ad5;
}
.account-container.dark-mode-component .next-step .next-step-title h1, .account-container.dark-mode-component .next-step .next-step-title h2 {
color: #ffffff;
}
.account-container.dark-mode-component .next-step .next-step-title h1 a, .account-container.dark-mode-component .next-step .next-step-title h2 a {
color: #D7FBE8;
}
.account-container.dark-mode-component .next-step .next-step-title h1 a:visited, .account-container.dark-mode-component .next-step .next-step-title h2 a:visited {
color: #9DF3C4;
}
.account-container.dark-mode-component .next-step .flex-container-change-api-container .change-api-container {
background-color: #4c8ad5;
}
.account-container.dark-mode-component .next-step .flex-container-change-api-container .change-api-container .api-preview-container p {
color: white;
}
.loading-container.dark-mode-component {
background-color: #3A4750;
}
.go-to-account {
width: 3vw;
height: 3vw;
@@ -755,6 +902,10 @@
margin: 10px 10px;
}
}
.go-to-account.dark-mode-component, .close-session.dark-mode-component {
background-color: #3A4750;
}
.clockify-tasks-display {
width: 20vw;
position: absolute;
@@ -764,6 +915,7 @@
.clockify-tasks-display.loading-container {
width: 20vw;
height: auto;
background: none;
}
.clockify-tasks-display.disabled {
user-select: none;
@@ -808,7 +960,7 @@
width: auto;
display: flex;
justify-content: space-around;
padding: 0px 5vw;
padding: 3vh 5vw;
}
.clockify-tasks-display.loading-container {
width: 90%;
@@ -837,6 +989,10 @@
margin-top: 1vh;
}
}
.clockify-tasks-display-container.dark-mode-container {
background-color: #3A4750;
}
.made-with-love a {
color: #ff8787;
}
@@ -845,11 +1001,16 @@
color: #b9b9b9;
margin-top: auto;
width: 100%;
padding-bottom: 3vw;
padding-top: 5vh;
padding-bottom: 5vh;
padding-left: 3vw;
box-sizing: border-box;
}
.made-with-love.dark-mode-component {
background-color: #303841;
}
html, body {
margin: 0;
padding: 0;

2
public/css_styles/styles.css.map
View File

File diff suppressed because one or more lines are too long

32
public/sass_styles/_aboutThis.scss
View File

@@ -3,6 +3,11 @@
padding: 0px 3vw;
padding-top: 5vh;
padding-bottom: 5vh;
display: flex;
flex-direction: column;
align-items: stretch;
.titles {
@@ -62,4 +67,29 @@
padding-bottom: 5vh;
}
}
}
#about-this.dark-mode-component, #credits.dark-mode-component {
background-color: $second-color-dark;
color: #ffffff;
.information {
display: flex;
ul {
li {
p {
a {
color: $lightest-color-dark;
}
}
}
}
}
}

82
public/sass_styles/_account.scss
View File

@@ -1,5 +1,11 @@
html, body {
height: 100%;
}
.account-container {
height: 100%;
#message {
padding-left: 5vw;
@@ -91,7 +97,9 @@
padding-top: 1vh;
border-radius: 5%;
border-radius: 2px;
padding-left: 1vw;
.api-preview-container {
@@ -129,5 +137,77 @@
display: flex;
justify-content: center;
align-items: center;
}
@media (max-width: 991.98px) {
.account-container {
.next-step {
display: flex;
.next-step-title {
h1 {
font-size: 15pt;
}
h2 {
font-size: 12pt;
}
}
.flex-container-change-api-container{
.change-api-container {
width: auto;
}
}
}
}
}
.account-container.dark-mode-component {
background-color: $second-color-dark;
.next-step {
.next-step-title {
background-color: $lightest-color-dark;
h1, h2 {
color: #ffffff;
a {
color: $lightest-color;
}
a:visited {
color: $light-color;
}
}
}
.flex-container-change-api-container {
.change-api-container {
background-color: $lightest-color-dark;
.api-preview-container {
p {
color: rgb(255, 255, 255)
}
}
}
}
}
}
.loading-container.dark-mode-component {
background-color: $second-color-dark
}

8
public/sass_styles/_banner-login.scss
View File

@@ -49,8 +49,9 @@
}
.blank {
.banner-login.blank {
opacity: 0%;
}
@media (max-width: 918px) {
@@ -95,4 +96,9 @@
}
}
}
}
.banner-login.blank.dark-mode-component {
opacity: 100%;
background-color: $main-color-dark;
}

10
public/sass_styles/_clockify-tasks-display.scss
View File

@@ -9,6 +9,7 @@
&.loading-container {
width: 20vw;
height: auto;
background: none;
}
&.disabled {
@@ -67,7 +68,7 @@
display: flex;
justify-content:space-around;
padding: 0px 5vw;
padding: 3vh 5vw;
&.loading-container {
width: 90%;
@@ -103,4 +104,11 @@
margin-top: 1vh;
}
}
}
.clockify-tasks-display-container.dark-mode-container {
background-color: $second-color-dark;
}

17
public/sass_styles/_goDownArrow.scss
View File

@@ -1,6 +1,5 @@
.go-down {
height: 7vh;
width: 100%;
height: 8vh;
display: flex;
justify-content: center;
@@ -33,4 +32,18 @@
border: none;
border-top: 1px solid rgb(184, 184, 184);
}
}
.go-down-separator-line.dark-mode-component {
background-color: $main-color-dark;
}
.go-down.dark-mode-component {
background-color: $main-color-dark;
}
.go-down.dark-mode-component#go-to-credits {
background-color: $second-color-dark;
}

4
public/sass_styles/_goToAccount.scss
View File

@@ -95,4 +95,8 @@
margin:10px 10px;
}
}
.go-to-account.dark-mode-component, .close-session.dark-mode-component {
background-color: $second-color-dark;
}

6
public/sass_styles/_header.scss
View File

@@ -8,6 +8,7 @@
justify-content: center;
height: 17vh;
box-sizing: border-box;
a {
text-decoration: none;
@@ -69,4 +70,9 @@
font-size: 13pt;
}
}
}
.header-main-page.dark-mode-component {
background-color: $main-color-dark;
border-bottom: 1px solid #ffffff72;
}

47
public/sass_styles/_identify.scss
View File

@@ -1,7 +1,17 @@
html, body {
height: 100%;
}
.identify-container {
&:has {
height: 100%;
}
display: flex;
flex-direction: column;
align-items: center;
flex-grow: 1;
.error-message-container {
width: 70vw;
@@ -94,4 +104,41 @@
}
}
.identify-container.dark-mode-component {
background-color: $second-color-dark;
.identify {
.options-container {
.option {
background-color: $light-color-dark;
}
.active-option{
background-color: $light-color-dark-darker;
}
}
.form-container {
form {
input {
color: white;
background: none;
}
input[type=submit] {
background-color: $main-color-dark;
}
}
}
}
}

11
public/sass_styles/_made-with-love.scss
View File

@@ -6,8 +6,15 @@
color:rgb(185, 185, 185);
margin-top: auto;
width: 100%;
padding-bottom: 3vw;
padding-top: 5vh;
padding-bottom: 5vh;
padding-left: 3vw;
box-sizing: border-box;
}
}
.made-with-love.dark-mode-component {
background-color: $main-color-dark;
}

26
public/sass_styles/_mainPomodoro.scss
View File

@@ -78,4 +78,30 @@
font-size: 13pt;
}
}
}
.main-pomodoro-container.dark-mode-component {
background-color: $main-color-dark;
.main-pomodoro {
.timer {
color: #ffffff;
}
.style-display {
h3, h4 {
color: #ffffff;
}
}
.start-pomodoro{
background-color: $lightest-color-dark;
}
}
}

16
public/sass_styles/_pomodoro-counter.scss
View File

@@ -52,4 +52,20 @@
position: initial;
padding-bottom: 5vh;
}
}
.pomodoro-counter.dark-mode-component {
ul {
li {
color: #ffffff;
.quantity {
color: $lightest-color-dark;
background: $second-color-dark;
}
}
}
}

39
public/sass_styles/_styleSelector.scss
View File

@@ -173,4 +173,43 @@
}
}
}
.style-selector-container.dark-mode-component {
.style-selector {
h2 {
color: #ffffff;
}
.style-selection-container {
.style-container{
label {
.title {
color: #ffffff;
}
.times {
color: $lightest-color-dark;
}
}
}
.checkbox_control {
border: 3px solid $lightest-color-dark-darker;
}
.checkbox__input input:checked + .checkbox_control {
background-color: $lightest-color-dark;
}
}
}
}

4
public/sass_styles/styles.scss
View File

@@ -47,7 +47,9 @@ $lightest-color: #D7FBE8;
$main-color-dark: #303841;
$second-color-dark: #3A4750;
$light-color-dark: #D72323;
$lightest-color-dark: #EEEEEE;
$light-color-dark-darker: #7c1414;
$lightest-color-dark: #4c8ad5;
$lightest-color-dark-darker: #3e70ae;
@import 'header';
@import 'banner-login';