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

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';