XeNote/styles/global.css

326 lines
4.8 KiB
CSS

:root {
/* PUT OVERRIDES HERE */
/*--links: #ff0000 !important;*/
--elevated: #ffffff0a;
--background-transparent: #161b22aa;
}
* {
transition: all 0.1s ease-in-out;
}
html {
overflow-x: hidden;
}
.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: 0.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 {
padding-top: 0.8rem;
padding-bottom: 0.8rem;
background-color: var(--elevated);
background: radial-gradient(
circle at top right,
var(--elevated) 0%,
var(--background) 90%
);
}
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;
}
.frosted {
backdrop-filter: blur(20px);
border-right: 1px solid #fff1;
border-top: 1px solid #fff1;
border-left: 1px solid var(--background-transparent);
border-bottom: 1px solid var(--background-transparent);
}
.bubble {
background-color: white;
position: absolute;
border-radius: 50%;
opacity: 0.3;
z-index: -1;
background: radial-gradient(
circle at top right,
white 0%,
grey 50%,
var(--background-body) 90%
);
}
div.bubble {
width: 400px;
height: 400px;
bottom: calc(50vh - 220px);
right: calc(50vw - 0px);
animation: myAnim 5s ease-in-out 0s infinite normal forwards;
}
div.bubble:nth-of-type(2) {
width: 200px;
height: 200px;
bottom: calc(50vh - -200px);
right: calc(50vw - 300px);
animation: myAnim 4s ease-in-out 0s infinite normal forwards;
}
div.bubble:nth-of-type(3) {
width: 100px;
height: 100px;
bottom: calc(50vh - 0px);
right: calc(50vw - 200px);
animation: myAnim 3s ease-in-out 0s infinite normal forwards;
}
@keyframes myAnim {
0% {
transform: scale(0.9);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0.9);
}
}