mirror of
https://github.com/neon443/neon443.github.io.git
synced 2026-03-11 07:09:12 +00:00
Nihaal Sharma
98f5fe3d38
toast slill lags when animation is done, dunno how to fix added shadow and bg blur to make the toast fit in cleaned up code aswell
200 lines
3.9 KiB
CSS
200 lines
3.9 KiB
CSS
/*regular text (body, p, b, h*) styles*/
|
|
* {
|
|
margin: 0px;
|
|
font-family: system-ui;
|
|
transition: 0.2s;
|
|
color: #222;
|
|
|
|
}
|
|
b {
|
|
color: #ff6200
|
|
}
|
|
a {
|
|
color: #007AFF
|
|
}
|
|
body {
|
|
background-color: #ddd;
|
|
}
|
|
p {
|
|
font-size: 20px;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
}
|
|
h1 {
|
|
font-size: 40px;
|
|
font-weight: 750;
|
|
padding-top: 0px;
|
|
padding-top: 0px;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
}
|
|
h2 {
|
|
font-size: 30px;
|
|
font-weight: 400;
|
|
padding-top: 0px;
|
|
padding-top: 0px;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
}
|
|
h3 {
|
|
font-size: 25px;
|
|
font-weight: 400;
|
|
padding-top: 0px;
|
|
padding-top: 0px;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
}
|
|
/* regular text (body, p, b, h*) styles*/
|
|
|
|
.contentPush{
|
|
height: 65px;
|
|
}
|
|
.notLink {
|
|
position: fixed;
|
|
top: 47.5px;
|
|
width: 100%;
|
|
border-radius: 0% 0% 15% 15%;
|
|
text-align: center;
|
|
font-size: 0px;
|
|
}
|
|
/* Bar styling*/
|
|
.bar {
|
|
width: 100%;
|
|
position: fixed;
|
|
display: flex;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
z-index: 2;
|
|
background-color: rgba(255, 255, 255, 0.25);
|
|
|
|
-webkit-backdrop-filter: blur(2.5px);
|
|
-moz-backdrop-filter: blur(2.5px);
|
|
backdrop-filter: blur(2.5px);
|
|
}
|
|
.barItem {
|
|
float: left;
|
|
flex: 1;
|
|
text-align: center;
|
|
}
|
|
.barItem * {
|
|
display: block;
|
|
color: #222;
|
|
text-decoration: none;
|
|
font-size: 20px;
|
|
padding: 9.2px 12px;
|
|
}
|
|
.barItem h1 {
|
|
font-size: 30px;
|
|
padding-top: 2.5px;
|
|
padding-bottom: 2.5px;
|
|
border-right-style: solid;
|
|
border-width: 1.5px;
|
|
border-color: #222;
|
|
}
|
|
.barItem:hover {
|
|
flex: 1.5;
|
|
background-color: #fff;
|
|
}
|
|
.barItem *:hover {
|
|
font-size: 30px;
|
|
font-weight: 600;
|
|
padding-top: 2.5px;
|
|
padding-bottom: 2.5px;
|
|
}
|
|
.barItem a:hover {
|
|
background-color: #111;
|
|
color: #eee;
|
|
|
|
-webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.25);
|
|
-moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.25);
|
|
box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.25);
|
|
}
|
|
html:has(.barItem a:hover) . {}
|
|
/* not Link toast*/
|
|
#notLinkToast {
|
|
visibility: hidden;
|
|
min-width: 250px;
|
|
margin-left: -125px;
|
|
background-color: rgba(255, 255, 255, 0.25);
|
|
text-align: center;
|
|
border-radius: 0px 0px 10px 10px;
|
|
padding: 16px;
|
|
position: fixed;
|
|
z-index: 1;
|
|
left: 50%;
|
|
top: 45px;
|
|
font-size: 20px;
|
|
|
|
-webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.25);
|
|
-moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.25);
|
|
box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.25);
|
|
|
|
-webkit-backdrop-filter: blur(2.5px);
|
|
-moz-backdrop-filter: blur(2.5px);
|
|
backdrop-filter: blur(2.5px);
|
|
|
|
}
|
|
#notLinkToast.show {
|
|
visibility: visible;
|
|
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s forwards;
|
|
animation: fadein 0.5s, fadeout 0.5s 2.5s forwards;
|
|
}
|
|
@-webkit-keyframes fadein {
|
|
from {top: 0; opacity: 0;}
|
|
to {top: 45px; opacity: 1;}
|
|
}
|
|
@keyframes fadein {
|
|
from {top: 0; opacity: 0;}
|
|
to {top: 45px; opacity: 1;}
|
|
}
|
|
@-webkit-keyframes fadeout {
|
|
from {top: 45px; opacity: 1;}
|
|
to {top: 0; opacity: 0;}
|
|
}
|
|
@keyframes fadeout {
|
|
from {top: 45px; opacity: 1;}
|
|
to {top: 0; opacity: 0;}
|
|
}
|
|
/* not Link toast */
|
|
/* Bar styling */
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
* {
|
|
color: #ddd;
|
|
}
|
|
body {
|
|
background-color: #222;
|
|
color: #ddd;
|
|
}
|
|
.bar {
|
|
background-color: rgba(0, 0, 0, 0.25);
|
|
}
|
|
.barItem * {
|
|
color: #ddd;
|
|
}
|
|
.barItem h1 {
|
|
border-color: #ddd;
|
|
}
|
|
.barItem:hover {
|
|
background-color: #555;
|
|
}
|
|
.barItem a:hover {
|
|
background-color: #eee;
|
|
color: #111;
|
|
|
|
-webkit-box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.25);
|
|
-moz-box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.25);
|
|
box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.25);
|
|
}
|
|
#notLinkToast {
|
|
background-color: rgba(0, 0, 0, 0.25);
|
|
-webkit-box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.25);
|
|
-moz-box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.25);
|
|
box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.25);
|
|
}
|
|
}
|
|
@media screen and (max-width: 600px) {
|
|
img {
|
|
width: 100%;
|
|
}
|
|
} |