These dang .save files man
This commit is contained in:
parent
3e83b7fc5f
commit
1c8d0bcf6b
|
|
@ -1,765 +0,0 @@
|
|||
@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;
|
||||
}
|
||||
|
||||
.startDiv p {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.topBar p {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.newNote {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.newNote img {
|
||||
filter: invert(100%);
|
||||
}
|
||||
|
||||
#errorDiv p {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.optionsCoverDiv p {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.burgerSession img {
|
||||
filter: invert(100%) !important;
|
||||
}
|
||||
|
||||
.links a {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.inoutdiv p {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.inoutdiv a {
|
||||
color: #969696 !important;
|
||||
}
|
||||
|
||||
.inoutdiv input {
|
||||
color: white;
|
||||
background-color: var(--editor);
|
||||
}
|
||||
|
||||
.flathubLogo {
|
||||
filter: invert(100%);
|
||||
}
|
||||
|
||||
.feature {
|
||||
background-color: rgba(0, 0, 0, 0) !important;
|
||||
color: var(--text-color);
|
||||
}
|
||||
.mainDiv .yellow {
|
||||
border-color: #e9e98d !important;
|
||||
}
|
||||
.mainDiv .green {
|
||||
border-color: #a9f9a9 !important;
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.hiddenButton {
|
||||
right: 0px;
|
||||
position: fixed;
|
||||
background-color: var(--editor);
|
||||
color: var(--editor);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* Web app */
|
||||
.topBar {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
|
||||
background-color: var(--bar);
|
||||
|
||||
border: solid;
|
||||
border-color: var(--border-color);
|
||||
border-width: 0px;
|
||||
border-bottom-width: 1px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.bottomBar {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 29px;
|
||||
bottom: 0;
|
||||
|
||||
background-color: var(--bar);
|
||||
|
||||
border: solid;
|
||||
border-color: var(--border-color);
|
||||
border-width: 0px;
|
||||
border-top-width: 1px;
|
||||
display: flex;
|
||||
text-wrap: nowrap;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
.bottomBar button {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
color: var(--text-color);
|
||||
height: 100%;
|
||||
border: none;
|
||||
font-size: 14px;
|
||||
padding-left: 7.5px;
|
||||
padding-right: 7.5px;
|
||||
}
|
||||
|
||||
.bottomBar .markdownButton {
|
||||
filter: invert(var(--invertdm));
|
||||
padding-left: 17.5px;
|
||||
padding-right: 17.5px;
|
||||
background-image: url("../../static/svg/markdown.svg");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 55%;
|
||||
}
|
||||
|
||||
.bottomBar .removeButton {
|
||||
filter: invert(var(--invertdm));
|
||||
padding-left: 17.5px;
|
||||
padding-right: 17.5px;
|
||||
background-image: url("../../static/svg/delete.svg");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 55%;
|
||||
}
|
||||
|
||||
.bottomBar .textManipulator {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.bottomBar button:hover {
|
||||
background-color: var(--bottomBarHover);
|
||||
}
|
||||
|
||||
.bottomBar .right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.burgerDropdown {
|
||||
position: fixed;
|
||||
z-index: 2;
|
||||
left: 7px;
|
||||
top: 30px;
|
||||
width: 160px;
|
||||
height: 90px;
|
||||
|
||||
background-color: var(--bar);
|
||||
|
||||
border: solid;
|
||||
border-color: var(--border-color);
|
||||
border-width: 1px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.burgerDropdown a {
|
||||
position: absolute;
|
||||
width: calc(100% - 14px - 4px - 7px);
|
||||
color: var(--text-color);
|
||||
background-color: #ffffff;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
margin: 7px;
|
||||
padding-left: 7px;
|
||||
border: solid;
|
||||
border-color: var(--border-color);
|
||||
border-width: 1px;
|
||||
border-radius: 8px;
|
||||
font-size: 15px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.topBar p {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.topBar .logo {
|
||||
margin-left: 12px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: var(--text-color);
|
||||
white-space: break-spaces;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.topBar .usernameBox {
|
||||
text-align: right;
|
||||
margin-left: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.topBar img {
|
||||
scale: 0.5;
|
||||
filter: invert(var(--invertdm));
|
||||
}
|
||||
|
||||
.notesBar {
|
||||
position: fixed;
|
||||
width: 180px;
|
||||
top: 50px;
|
||||
height: calc(100% - 50px - 30px - 1px);
|
||||
|
||||
background-color: var(--bar);
|
||||
border: solid;
|
||||
border-color: var(--border-color);
|
||||
border-width: 0px;
|
||||
border-right-width: 1px;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.notesDiv {
|
||||
height: calc(100% - 50px);
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.notesBar .noteButton, .notesBar .loadingStuff {
|
||||
width: calc(100% - 7px - 7px - 3.5px);
|
||||
height: 35px;
|
||||
line-height: 0px;
|
||||
padding: 10px;
|
||||
margin: 5px;
|
||||
margin-bottom: 0;
|
||||
background-color: var(--note-button);
|
||||
color: var(--unselected-note-button-text-color);
|
||||
border-radius: 8px;
|
||||
|
||||
border: solid;
|
||||
border-color: var(--border-color);
|
||||
border-width: 1px;
|
||||
font-size: 15px;
|
||||
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.notesBar .loadingStuff {
|
||||
border: none;
|
||||
background:
|
||||
linear-gradient(0.25turn, transparent, var(--contrast2), transparent),
|
||||
linear-gradient(var(--contrast), var(--contrast)),
|
||||
radial-gradient(38px circle at 19px 19px, #eee 50%, transparent 51%),
|
||||
linear-gradient(var(--contrast), var(--contrast));
|
||||
background-repeat: no-repeat;
|
||||
background-size: 200% 200%, 100% 200%, 50% 50%, 140% 12%;
|
||||
background-position: -200% 0, 0 0, 0 76%, 16% 78%;
|
||||
animation: loading 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes loading {
|
||||
to {
|
||||
background-position: 200% 0, 0 0, 0 76%, 16% 78%;
|
||||
}
|
||||
}
|
||||
|
||||
.notesBar .selected {
|
||||
background-color: var(--theme-color) !important;
|
||||
border: none;
|
||||
color: var(--note-button-text-color);
|
||||
}
|
||||
|
||||
.notesBar .newNote {
|
||||
height: 41px;
|
||||
line-height: 41px;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
margin-bottom: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.notesBar .newNote img {
|
||||
height: 32px;
|
||||
padding-right: 5px;
|
||||
transform: translateY(30%);
|
||||
}
|
||||
|
||||
.noteBox {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 50px;
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
color: var(--text-color);
|
||||
background-color: var(--editor);
|
||||
width: calc(100% - 180px);
|
||||
height: calc(100% - 50px - 30px);
|
||||
font-family: "Inter", sans-serif;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.noteBox.mobile {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.noteBoxText {
|
||||
resize: none;
|
||||
background-color: var(--editor);
|
||||
color: var(--text-color);
|
||||
border: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
|
||||
iframe#markdown {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
border-left: solid var(--bar) 1px;
|
||||
}
|
||||
|
||||
.noteBox:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.optionsCoverDiv {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
transition: opacity 1s;
|
||||
}
|
||||
|
||||
.optionsDiv {
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
position: fixed;
|
||||
background-color: var(--option-background);
|
||||
padding: 10px;
|
||||
color: var(--text-color);
|
||||
border-radius: 8px;
|
||||
width: 300px;
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 90%;
|
||||
max-height: 90%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.optionsDiv button {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
margin-bottom: 7px;
|
||||
color: var(--theme-text-color);
|
||||
border: none;
|
||||
text-decoration: none;
|
||||
background-color: var(--theme-color);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.optionsDiv .normalButton {
|
||||
width: auto;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.optionsDiv .lastButton {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.optionsDiv input {
|
||||
width: calc(100% - 12px);
|
||||
height: 25px;
|
||||
background-color: #ffffff;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
margin-bottom: 7px;
|
||||
border: solid;
|
||||
border-color: var(--border-color);
|
||||
border-width: 1px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.optionsDiv .mfacheckbox {
|
||||
display: inline;
|
||||
margin: 0;
|
||||
margin-left: 5px;
|
||||
margin-bottom: 12px;
|
||||
padding: 0;
|
||||
height: 17px;
|
||||
width: 17px;
|
||||
}
|
||||
|
||||
.optionsDiv input:focus {
|
||||
outline: 0;
|
||||
border-color: var(--theme-color);
|
||||
}
|
||||
|
||||
.optionsDiv code {
|
||||
padding: 7px;
|
||||
font-size: 14px;
|
||||
border-radius: 8px;
|
||||
background-color: var(--session-color);
|
||||
}
|
||||
|
||||
.optionsDiv progress {
|
||||
width: 100%;
|
||||
background-color: var(--session-color);
|
||||
border: none;
|
||||
border-radius: 99px;
|
||||
height: 7px;
|
||||
}
|
||||
|
||||
.optionsDiv progress::-moz-progress-bar {
|
||||
background: var(--theme-color);
|
||||
}
|
||||
|
||||
.optionsDiv progresss::-webkit-progress-value {
|
||||
background: var(--theme-color);
|
||||
}
|
||||
|
||||
.optionsDiv .exit {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 16px;
|
||||
background-color: var(--exit-color);
|
||||
color: var(--text-color);
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.optionsDiv img {
|
||||
height: 18px;
|
||||
padding-right: 5px;
|
||||
filter: invert(var(--invert));
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
scale: 1.3;
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
.optionsDiv .section {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: var(--border-color);
|
||||
margin-top: 2px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.sessionDiv {
|
||||
max-height: 255px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.sessionDiv div {
|
||||
position: relative;
|
||||
background-color: var(--session-color);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 5px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.sessionDiv div p {
|
||||
display: inline;
|
||||
transform: translateY(-20px);
|
||||
overflow-wrap: anywhere;
|
||||
margin-left: 10px;
|
||||
margin-right: 10o
|
||||
}
|
||||
|
||||
.sessionDiv div button {
|
||||
position: static;
|
||||
border-radius: 99px;
|
||||
max-width: 40px;
|
||||
min-width: 40px;
|
||||
margin-left: auto;
|
||||
height: 40px;
|
||||
font-size: 16px;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.sessionDiv img {
|
||||
display: inline;
|
||||
filter: none;
|
||||
height: 100%;
|
||||
position: static;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
.alertDiv {
|
||||
position: fixed;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
background-color: #ffffeb;
|
||||
height: 25px;
|
||||
z-index: 9999;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* main */
|
||||
|
||||
.mainDiv {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.startDiv {
|
||||
text-align: left;
|
||||
margin-top: 8vh;
|
||||
margin-left: 7vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.startDiv h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mainDiv a {
|
||||
padding: 15px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
margin-right: auto;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
background-color: var(--theme-color);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.mainDiv .feature {
|
||||
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;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.mainDiv .green {
|
||||
background-color: #ebffeb;
|
||||
}
|
||||
|
||||
.mainDiv .yellow {
|
||||
background-color: #ffffeb;
|
||||
}
|
||||
|
||||
.links {
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.links a {
|
||||
margin-left: 5px;
|
||||
text-decoration: none;
|
||||
background-color: var(--bar);
|
||||
color: var(--text-color);
|
||||
padding: 10px;
|
||||
padding-top: 2.5px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 10px;
|
||||
transition: background-color .2s;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.links a:hover {
|
||||
background-color: var(--editor);
|
||||
}
|
||||
|
||||
.links a img {
|
||||
transform: translateY(5px);
|
||||
padding-right: 10px;
|
||||
filter: invert(var(--invertdm));
|
||||
}
|
||||
|
||||
.links a:hover {
|
||||
text-decoration: dashed;
|
||||
}
|
||||
Reference in New Issue