1
0
Fork 0
mirror of https://github.com/uhIgnacio/igna.rocks.git synced 2024-08-15 02:23:12 +00:00
igna.rocks/style.css
in the moon 0c1f4e1c79 a
2021-09-10 12:12:43 +00:00

469 lines
6.4 KiB
CSS

@font-face {
font-family: 'Brandon Light';
src: url('font-webfont.woff2') format('woff2'),
url('font-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
:root {
--color: red;
}
div.brandon {
text-decoration: none;
padding: 0;
font-family: "Brandon Light";
}
h1 {
font-size: 25px;
}
body {
margin: 0;
padding: 0;
background-color: black;
overflow: hidden;
font-family: "Brandon Light";
color: white;
user-select: none;
}
a {
color: white;
text-decoration: none;
padding: 0;
}
a2 {
position: relative;
top: 25px;
}
.center {
position: absolute;
text-align: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#border {
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
pointer-events: none;
z-index: -1;
}
#borderTop, #borderBottom {
position: absolute;
width: 0%;
height: 4px;
background-color: purple;
}
#borderRight, #borderLeft {
position: absolute;
width: 3px;
height: 0%;
background-color: purple;
}
img {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
z-index: -2;
filter: blur(5px) brightness(30%);
pointer-events: none;
}
#main {
opacity: 0;
transition: 5s;
}
@keyframes rainbow-text {
0% {
color: #e87d7d;
}
2% {
color: #e88a7d;
}
4% {
color: #e8977d;
}
6% {
color: #e8a47d;
}
8% {
color: #e8b07d;
}
10% {
color: #e8bd7d;
}
12% {
color: #e8ca7d;
}
14% {
color: #e8d77d;
}
16% {
color: #e8e47d;
}
18% {
color: #dfe87d;
}
20% {
color: #d3e87d;
}
22% {
color: #c6e87d;
}
24% {
color: #b9e87d;
}
26% {
color: #ace87d;
}
28% {
color: #9fe87d;
}
30% {
color: #92e87d;
}
32% {
color: #86e87d;
}
34% {
color: #7de881;
}
36% {
color: #7de88e;
}
38% {
color: #7de89b;
}
40% {
color: #7de8a8;
}
42% {
color: #7de8b5;
}
44% {
color: #7de8c1;
}
46% {
color: #7de8ce;
}
48% {
color: #7de8db;
}
50% {
color: #7de8e8;
}
52% {
color: #7ddbe8;
}
54% {
color: #7dcee8;
}
56% {
color: #7dc1e8;
}
58% {
color: #7db5e8;
}
60% {
color: #7da8e8;
}
62% {
color: #7d9be8;
}
64% {
color: #7d8ee8;
}
66% {
color: #7d81e8;
}
68% {
color: #867de8;
}
70% {
color: #927de8;
}
72% {
color: #9f7de8;
}
74% {
color: #ac7de8;
}
76% {
color: #b97de8;
}
78% {
color: #c67de8;
}
80% {
color: #d37de8;
}
82% {
color: #df7de8;
}
84% {
color: #e87de4;
}
86% {
color: #e87dd7;
}
88% {
color: #e87dca;
}
90% {
color: #e87dbd;
}
92% {
color: #e87db0;
}
94% {
color: #e87da4;
}
96% {
color: #e87d97;
}
98% {
color: #e87d8a;
}
100% {
color: #e87d7d;
}
}
.rainbow-text {
animation: rainbow-text 8s infinite;
}
#widgetContainer {
opacity: 0;
position: absolute;
right: 20px;
top: 20px;
width: 400px;
height: 38px;
background: repeating-linear-gradient(120deg, slategrey 5%, blanchedalmond 70%);
background-size: 60vw 60vw;
animation: slide 1s linear infinite forwards;
transition: 1s;
}
#widget {
position: absolute;
width: 394px;
height: 29px;
margin: 3px;
background-color: purple;
z-index: 1;
transition: 2s;
}
#widgetMain {
position: absolute;
display: inline-flex;
justify-content: space-between;
margin-top: 3px;
padding-right: 10px;
padding-left: 10px;
width: 374px;
height: 29px;
z-index: 2;
background-color: purple;
}
#burgerMenu {
cursor: pointer;
}
#dropDownContent {
display: none;
opacity: 0;
transition: 2s;
width: 100%;
height: 100%;
position: absolute;
margin-top: 30px;
}
#links {
right: 5px;
width: 100px;
float: left;
margin-top: -4px;
}
#groups {
float: right;
margin-top: 5px;
}
#dropDownContent div a {
opacity: 0;
transition: 1s;
line-height: 18px;
}
#dropDownContent div span {
margin-left: 10px;
margin-right: 10px;
}
#groups a, #groups span {
float: right;
}
.hitCount {
position: fixed;
bottom: 5px;
right: 5px;
transition: 3s;
color: var(--color);
font-size: 24px;
opacity: 0;
bottom: -3px;
}
a.hitCounter.badge-done0 {
display: none!important;
}
@mixin border-left-radius($radius) {
-webkit-border-top-left-radius: $radius;
-moz-border-top-left-radius: $radius;
-ms-border-top-left-radius: $radius;
-o-border-top-left-radius: $radius;
border-top-left-radius: $radius;
-webkit-border-bottom-left-radius: $radius;
-moz-border-bottom-left-radius: $radius;
-ms-border-bottom-left-radius: $radius;
-o-border-bottom-left-radius: $radius;
border-bottom-left-radius: $radius;
}
body {
padding: 0;
margin: 0;
.nowplayingcard {
width: 20%;
margin: 0 auto;
margin-top: 3%;
font-family: $globalFontFamily;
font-size: $globalFontSize;
.nowplayingcontainer-inner {
width: 100%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
display: inline-block;
@include border-left-radius($globalBorderRadius);
&:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
img#trackart {
max-width: 30%;
float: left;
left: 0;
@include border-left-radius($globalBorderRadius);
}
.trackInfo {
width: 70%;
float: left;
display: block;
a {
max-width: 90%;
display: block;
font-size: 14px;
text-align: left;
text-decoration: none;
vertical-align: middle;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
&:nth-child(odd) {
img {
width: 15px;
height: 15px;
vertical-align: middle;
margin: -2% 3px 0 0;
}
color: black;
font-weight: bold;
vertical-align: middle;
line-height: 15px;
letter-spacing: 0.2px;
padding: 10% 0 0 5%;
}
&:nth-child(even) {
img {
width: 15px;
height: 15px;
vertical-align: middle;
margin: -2% 3px 0 0;
}
color: gray;
font-size: $globalFontSize - 1px;
letter-spacing: 0.1px;
padding: 5% 0 0 5%;
}
}
}
}
}
}