diff --git a/static/css/style.css b/static/css/style.css
index 43aefbc..451d583 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1,7 +1,23 @@
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
+:root {
+ --bar: #f4f4f4;
+ --editor: #ffffff;
+ --text-color: #000000;
+ --border-color: #dadada;
+ --theme-color: #157efb;
+ --theme-text-color: #ffffff;
+ --exit-color: #e9e9e9;
+ --session-color: #f4f4f4;
+}
+
+p, h1, h2, h3, h4, h5, h6 {
+ color: var(--text-color);
+}
+
body {
margin: 0;
+ background-color: var(--editor);
font-family: "Inter", sans-serif;
}
@@ -11,12 +27,10 @@ body {
width: 100%;
height: 50px;
- background-color: rgba(233, 233, 233, 0.5);
- backdrop-filter: blur(20px);
- -webkit-backdrop-filter: blur(20px);
+ background-color: var(--bar);
border: solid;
- border-color: #dadada;
+ border-color: var(--border-color);
border-width: 0px;
border-bottom-width: 1px;
}
@@ -29,12 +43,10 @@ body {
width: 160px;
height: 90px;
- background-color: rgba(233, 233, 233, 0.5);
- backdrop-filter: blur(20px);
- -webkit-backdrop-filter: blur(20px);
+ background-color: var(--bar);
border: solid;
- border-color: #dadada;
+ border-color: var(--border-color);
border-width: 1px;
border-radius: 8px;
}
@@ -42,7 +54,7 @@ body {
.burgerDropdown a {
position: absolute;
width: calc(100% - 14px - 4px - 7px);
- color: black;
+ color: var(--text-color);
background-color: #ffffff;
height: 35px;
@@ -51,7 +63,7 @@ body {
padding-left: 7px;
border: solid;
- border-color: #dadada;
+ border-color: var(--border-color);
border-width: 1px;
border-radius: 8px;
@@ -82,12 +94,10 @@ body {
bottom: 0;
height: calc(100% - 50px - 1px);
- background-color: rgba(233, 233, 233, 0.5);
- backdrop-filter: blur(20px);
- -webkit-backdrop-filter: blur(20px);
+ background-color: var(--bar);
border: solid;
- border-color: #dadada;
+ border-color: var(--border-color);
border-width: 0px;
border-right-width: 1px;
border-top-width: 1px;
@@ -101,12 +111,12 @@ body {
margin: 7px;
margin-bottom: 0;
background-color: #ffffff;
- color: black;
+ color: var(--text-color);
border: none;
border-radius: 8px;
border: solid;
- border-color: #dadada;
+ border-color: var(--border-color);
border-width: 1px;
font-size: 15px;
@@ -135,7 +145,8 @@ body {
}
.notesBar .selected {
- background-color: #157efb !important;
+ background-color: var(--theme-color) !important;
+ border: none;
color: white
}
@@ -186,7 +197,7 @@ body {
position: fixed;
background-color: white;
padding: 10px;
- color: black;
+ color: var(--text-color);
border-radius: 8px;
min-width: 338.5px
}
@@ -198,10 +209,10 @@ body {
margin-bottom: 7px;
padding-left: 15px;
padding-right: 15px;
- color: white;
+ color: var(--theme-text-color);
border: none;
text-decoration: none;
- background-color: #157efb;
+ background-color: var(--theme-color);
border-radius: 8px;
}
@@ -222,30 +233,30 @@ body {
padding-right: 5px;
margin-bottom: 7px;
border: solid;
- border-color: #dadada;
+ border-color: var(--border-color);
border-width: 1px;
border-radius: 8px;
}
.optionsDiv input:focus {
outline: 0;
- border-color: #157efb;
+ border-color: var(--theme-color);
}
.optionsDiv progress {
width: 100%;
- background-color: #d8d8d8;
+ background-color: var(--session-color);
border: none;
border-radius: 99px;
height: 7px;
}
.optionsDiv progress::-moz-progress-bar {
- background: #157efb;
+ background: var(--theme-color);
}
.optionsDiv progresss::-webkit-progress-value {
- background: #157efb;
+ background: var(--theme-color);
}
.optionsDiv .exit {
@@ -254,8 +265,8 @@ body {
width: 40px;
height: 40px;
font-size: 16px;
- background-color: #e9e9e9;
- color: black;
+ background-color: var(--exit-color);
+ color: var(--text-color);
border-radius: 100%;
}
@@ -268,23 +279,25 @@ body {
.optionsDiv .section {
width: 100%;
height: 1px;
- background-color: #d8d8d8;
+ background-color: var(--border-color);
margin-top: 2px;
margin-bottom: 10px;
}
.sessionDiv div {
- background-color: #f4f4f4;
+ background-color: var(--session-color);
border-radius: 8px;
margin-bottom: 5px;
padding: 10px;
height: 35px;
}
+
.sessionDiv div p {
display: inline;
position: absolute;
transform: translateY(-7.5px);
}
+
.sessionDiv div button {
position: absolute;
border-radius: 99px;
@@ -294,6 +307,7 @@ body {
font-size: 16px;
transform: translateY(-2px);
}
+
.sessionDiv img {
display: inline;
filter: none;
@@ -315,13 +329,13 @@ body {
padding-right: 10px;
border: solid;
- border-color: rgb(207, 207, 207);
+ border-color: var(--border-color);
border-width: 1px;
border-radius: 8px;
}
.inoutdiv button {
- background-color: #157efb;
+ background-color: var(--theme-color);
color: white;
padding: 10px;
padding-left: 20px;
@@ -397,16 +411,23 @@ body {
margin-right: 5px;
color: white;
text-decoration: none;
- background-color: #157efb;
+ background-color: var(--theme-color);
border-radius: 8px;
}
.mainDiv .feature {
- width: calc(100% - 20px);
+ width: calc(100% - 7vh - 7vh - 3.5vh);
margin-bottom: 10px;
+ margin-left: 7vh;
+ margin-right: 7vh;
padding-left: 10px;
padding-right: 10px;
+ border: solid;
+ border-radius: 8px;
+ border-width: 1px;
+ border-color: var(--border-color);
+
padding-top: 15px;
padding-bottom: 15px;
font-size: 17px;
@@ -431,10 +452,12 @@ body {
text-align: center;
padding: 10px;
}
+
.links a {
margin-left: 5px;
text-decoration: none;
}
+
.links a:hover {
text-decoration: dashed;
}
diff --git a/templates/main.html b/templates/main.html
index e7ce64c..df6a779 100644
--- a/templates/main.html
+++ b/templates/main.html
@@ -8,25 +8,25 @@
-
+
-
secure
-
all your notes are fully end-to-end encrypted. only you can read your notes, not anyone else.
+
secure
+
all your notes are fully end-to-end encrypted. only you can read your notes, not anyone else.
-
always up-to-date
+
always up-to-date
your notes seamlessly sync across your devices.