XeNote/styles/global.css
Triston Armstrong fd51f273f4 Change a lot of things (see description)
- removes tailwind (was cool but dont need it)
- reworks a lot of the html
- utilize a no css... library? css file? idk
- add a few details
- rework the navigation on the built notes pages
- write a bunch of tailwind like css classes
- ... maybe some more, too lazy
2024-01-06 21:04:57 -06:00

250 lines
3.2 KiB
CSS

:root {
/* PUT OVERRIDES HERE */
/*--links: #ff0000 !important;*/
--elevated: #ffffff0a;
}
* {
transition: all .1s ease-in-out;
}
.flex-row {
display: flex;
flex-direction: row;
width: 100%;
flex: 1;
}
.flex-col {
display: flex;
flex-direction: column;
width: 100%;
flex: 1;
}
.flex-1 {
flex: 1
}
.wrap {
flex-wrap: wrap;
}
/* WIDTH HEIGHT ---------------------------------*/
.sm {
width: 1rem;
height: 1rem;
}
.md {
width: 2rem;
height: 2rem;
}
.lg {
width: 3rem;
height: 3rem;
}
.xl {
width: 4rem;
height: 4rem;
}
.w-full {
width: 100dvw;
}
.h-full {
height: 100dvh;
}
.x-center {
align-items: center;
}
.y-center {
justify-content: center;
}
.y-bottom {
align-items: baseline;
}
.flex-between {
justify-content: space-between;
}
.flex {
display: flex;
}
.gap-05 {
gap: .5rem;
}
.gap-1 {
gap: 1rem;
}
.bg-grey {
background-color: grey;
}
.p-sm {
padding: 4px;
}
.p-md {
padding: 8px;
}
.p-lg {
padding: 1rem;
}
.p-xl {
padding: 2rem;
}
.text-sm {
font-size: 1rem;
}
.text-md {
font-size: 1.2rem;
}
.text-lg {
font-size: 1.4rem;
}
.font-muted {
color: var(--text-muted);
}
.font-main {
color: var(--text-main);
}
.font-bold {
font-weight: bold;
}
.h-0 {
height: 0;
}
/* BORDER ---------------------------------- */
.border-dashed {
border-style: dashed;
}
.border-grey {
border-color: grey;
}
.border-1 {
border-width: 1px;
}
.rounded {
border-radius: 100%;
}
.rounded-sm {
border-radius: 10px;
}
/* MARGIN ----------------------------------*/
.mt-4 {
margin-top: 4rem;
}
.m-0 {
margin: 0;
}
/* HOVER ----------------------------------*/
.hover-scale:hover {
transform: scale(1.2);
}
.hover-font-yellow:hover {
color: var(--links);
}
.hover-pointer:hover {
cursor: pointer;
}
/* BACKGROUND ----------------------------------*/
.bg-elevated {
background-color: var(--elevated);
}
/* OVERRIDES ----------------------------------*/
article {
@apply bg-elevated;
}
body nav:first-of-type::before {
backdrop-filter: unset;
-webkit-backdrop-filter: unset;
content: unset;
position: unset;
z-index: unset;
top: unset;
left: unset;
right: unset;
bottom: unset;
}
body nav:first-of-type {
position: unset;
padding: 1rem !important;
align-items: unset !important;
width: unset !important;
min-height: 100dvh !important;
flex-direction: column !important;
overflow-y: auto !important;
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Safari */
-khtml-user-select: none;
/* Konqueror HTML */
-moz-user-select: none;
/* Old versions of Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
backdrop-filter: saturate(180%) blur(5px);
-webkit-backdrop-filter: saturate(180%) blur(5px);
}
body nav:first-of-type ul {
list-style-type: unset !important;
margin: unset !important;
padding: unset !important;
overflow: unset !important;
display: unset !important;
}
body nav:first-of-type ul li {
float: unset !important;
}
body nav:first-of-type ul li ul {
display: unset !important;
position: unset !important;
background: unset !important;
backdrop-filter: unset !important;
-webkit-backdrop-filter: unset !important;
}