XeNote/styles/global.css

265 lines
3.6 KiB
CSS
Raw Normal View History

: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;
}
.bg-gradient {
background: radial-gradient(circle at top right,
var(--background) 0%, var(--background-body) 50%, var(--background-body) 90%)
}
/* 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;
}
.h-0 {
height: 0;
}
.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 ---------------------------------------------*/
.text-sm {
font-size: 1rem;
}
.text-md {
font-size: 1.2rem;
}
.text-lg {
font-size: 1.4rem;
}
/* FONT ---------------------------------------------*/
.font-muted {
color: var(--text-muted);
}
.font-main {
color: var(--text-main);
}
.font-bold {
font-weight: bold;
}
/* 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 {
2024-01-09 05:29:18 +00:00
padding-top: .8rem;
padding-bottom: .8rem;
background-color: var(--elevated);
background: radial-gradient(circle at top right,
var(--elevated) 0%, var(--background) 90%)
}
2024-01-09 05:29:18 +00:00
;
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;
}