Burgernotes/static/css/style.css

669 lines
12 KiB
CSS

@import url("../fonts/inter.css");
:root {
--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%;
--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: #202124;
}
.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;
}
/* 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;
}
.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;
}
.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 .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 {
padding-left: 12px;
}
.topBar .usernameBox {
text-align: right;
position: absolute;
cursor: pointer;
right: 12px;
}
.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 {
width: calc(100% - 5px - 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: none;
border-radius: 8px;
border: solid;
border-color: var(--border-color);
border-width: 1px;
font-size: 15px;
text-align: left;
cursor: pointer;
}
.notesBar .loadingStuff {
border: none;
background:
linear-gradient(0.25turn, transparent, #fff, transparent),
linear-gradient(#eee, #eee),
radial-gradient(38px circle at 19px 19px, #eee 50%, transparent 51%),
linear-gradient(#eee, #eee);
background-repeat: no-repeat;
background-size: 315px 250px, 315px 180px, 100px 100px, 225px 30px;
background-position: -315px 0, 0 0, 0px 190px, 50px 195px;
animation: loading 1.5s infinite;
}
@keyframes loading {
to {
background-position: 315px 0, 0 0, 0 190px, 50px 195px;
}
}
.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 {
resize: none;
position: fixed;
right: 0;
top: 55px;
padding: 4px;
border: none;
font-size: 16px;
color: var(--text-color);
background-color: var(--editor);
width: calc(100% - 180px - 7px - 6px);
height: calc(100% - 50px - 6px - 8px - 30px);
font-family: "Inter", sans-serif;
}
.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%);
width: 300px;
position: fixed;
background-color: var(--option-background);
padding: 10px;
color: var(--text-color);
border-radius: 8px;
min-width: 338.5px;
z-index: 3;
}
.optionsDiv button {
width: 100%;
padding: 10px;
padding-bottom: 13px;
margin-right: 5px;
margin-bottom: 7px;
padding-left: 15px;
padding-right: 15px;
color: var(--theme-text-color);
border: none;
text-decoration: none;
background-color: var(--theme-color);
border-radius: 8px;
cursor: pointer;
}
.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));
transform: translateY(3.25px);
}
.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;
height: 35px;
}
.sessionDiv div p {
display: inline;
position: absolute;
transform: translateY(-7.5px);
}
.sessionDiv div button {
position: absolute;
border-radius: 99px;
right: 15px;
width: 40px;
height: 40px;
font-size: 16px;
transform: translateY(-2px);
}
.sessionDiv img {
display: inline;
filter: none;
height: 100%;
}
/* Sign up/log in div */
.inoutdiv {
margin: 10%;
padding: 15px;
}
.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;
}
.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;
}
.links a:hover {
text-decoration: dashed;
}