187 lines
2.9 KiB
CSS
187 lines
2.9 KiB
CSS
@import url("../fonts/inter.css");
|
|
|
|
:root {
|
|
--contrast: #eee;
|
|
--contrast2: #fff;
|
|
--invertdm: 0%;
|
|
--bar: #f4f4f4;
|
|
--editor: #ffffff;
|
|
--text-color: #000000;
|
|
--border-color: #dadada;
|
|
--theme-color: #157efb;
|
|
--theme-text-color: #ffffff;
|
|
--exit-color: #e9e9e9;
|
|
--session-color: #f4f4f4;
|
|
--note-button: #ffffff;
|
|
--note-button-text-color: #ffffff;
|
|
--unselected-note-button-text-color: #000000;
|
|
--option-background: #ffffff;
|
|
--invert: 100%;
|
|
--bottomBarHover: #e4e4e4;
|
|
}
|
|
|
|
/* dark mode */
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--invertdm: 100%;
|
|
--contrast: #2d2f21;
|
|
--contrast2: #2d2f21;
|
|
--bar: #2d2f31;
|
|
--editor: #202124;
|
|
--text-color: #ffffff;
|
|
--border-color: #393b3d;
|
|
--theme-color: #157efb;
|
|
--theme-text-color: #ffffff;
|
|
--exit-color: #454649;
|
|
--session-color: #2d2f31;
|
|
--note-button: #202124;
|
|
--note-button-text-color: #ffffff;
|
|
--unselected-note-button-text-color: #ffffff;
|
|
--option-background: #202124;
|
|
--invert: 100%;
|
|
--bottomBarHover: #e4e4e4;
|
|
}
|
|
|
|
.inoutdiv p {
|
|
color: white !important;
|
|
}
|
|
|
|
.inoutdiv a {
|
|
color: #969696 !important;
|
|
}
|
|
|
|
.inoutdiv input {
|
|
color: white;
|
|
background-color: var(--editor);
|
|
}
|
|
}
|
|
|
|
p,
|
|
li,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
color: var(--text-color);
|
|
white-space: break-spaces;
|
|
}
|
|
|
|
h7 {
|
|
display: block;
|
|
font-size: 20px;
|
|
margin-top: 0.67em;
|
|
margin-bottom: 0.67em;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background-color: var(--editor);
|
|
font-family: "Inter", sans-serif;
|
|
}
|
|
|
|
/* Sign up/log in div */
|
|
|
|
.inoutdiv {
|
|
border-radius: 8px;
|
|
margin: 10%;
|
|
padding: 30px;
|
|
border: solid 1px var(--border-color);
|
|
background-color: var(--bar);
|
|
}
|
|
|
|
.inoutdiv input {
|
|
width: calc(100% - 120px);
|
|
height: 30px;
|
|
margin-bottom: 10px;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
|
|
border: solid;
|
|
border-color: var(--border-color);
|
|
border-width: 1px;
|
|
border-radius: 8px;
|
|
|
|
}
|
|
|
|
.inoutdiv button {
|
|
background-color: var(--theme-color);
|
|
color: white;
|
|
padding: 10px;
|
|
margin-right: 5px;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
|
|
border: none;
|
|
border-radius: 8px;
|
|
|
|
font-size: 14px;
|
|
|
|
}
|
|
|
|
.inoutdiv a {
|
|
color: grey;
|
|
text-align: center;
|
|
}
|
|
|
|
.background {
|
|
position: fixed;
|
|
z-index: -2;
|
|
top: 0;
|
|
width: 100%;
|
|
min-height: 100%;
|
|
}
|
|
|
|
.credit {
|
|
position: fixed;
|
|
left: 5px;
|
|
color: white;
|
|
z-index: -1;
|
|
margin: 0;
|
|
bottom: 5px;
|
|
}
|
|
|
|
.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
.w100 {
|
|
font-weight: 300;
|
|
}
|
|
|
|
.w200 {
|
|
font-weight: 300;
|
|
}
|
|
|
|
.w300 {
|
|
font-weight: 300;
|
|
}
|
|
|
|
.w400 {
|
|
font-weight: 400;
|
|
}
|
|
|
|
.w500 {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.w600 {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.w700 {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.w800 {
|
|
font-weight: 800;
|
|
}
|
|
|
|
.w900 {
|
|
font-weight: 900;
|
|
}
|