Max/Main
1
0
Fork 0
forked from Simnation/Main
Code Pull requests Activity
Main/resources/[notify]/rtx_notify/html/styles.css
Nordi98 b31336d080 ed
2025-08-13 18:02:58 +02:00

479 lines
No EOL
8.1 KiB
CSS
Raw Blame History

:root {
--color: var(--color);
}
*{
user-select: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
@font-face {
font-family: BebasNeuePro-Bold;
src: url(BebasNeuePro-Bold.ttf);
}
html {
overflow: hidden;
font-family: 'Open Sans', sans-serif;
}
body{
display: none;
color: #a8a8aa;
}
::-webkit-scrollbar
{
width: 4px;
}
::-webkit-scrollbar-thumb
{
background-color: rgba(0, 0, 0, 0);
}
.notify-container {
width: 16%;
height: 95%;
background-color: rgba(0, 0, 0, 0.0);
margin: 0;
position: absolute;
top: 2%;
left: 82%;
overflow: hidden;
z-index: 9999999;
display: block;
transform: scale(1.0);
transform-origin: 0 0;
border-radius: 10px;
}
.notify {
display: block;
border-radius: 5px;
overflow: hidden;
margin: 0;
z-index: 9999999;
width: 100%;
background-color: rgba(0, 0, 0, 0.70);
color: #fff;
margin-bottom: 3%;
-moz-animation: fadein 1s;
-webkit-animation: fadein 1s;
-o-animation: fadein 1s;
position: relative;
}
.notifytitle {
padding-top: 10px;
vertical-align: middle;
text-align: center;
font-size: 30px;
font-family: BebasNeuePro-Bold;
}
.notifytext {
padding-top: 2px;
padding-bottom: 15px;
vertical-align: middle;
text-align: center;
font-size: 20px;
padding-left: 15px;
padding-right: 15px;
font-family: BebasNeuePro-Bold;
}
.notifyprogress {
display: block;
height: 3px;
width: 100%;
text-align: center;
background-color: var(--color);
vertical-align: bottom;
transform: rotate(180deg);
float: right;
}
.notifysettings-container {
width: 20%;
height: 30%;
background-color: rgba(0, 0, 0, 0.70);
border-bottom: 3px solid var(--color);
border-radius: 10px;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
overflow: hidden;
z-index: 99999999;
display: none;
}
.closenotifyedit {
position: absolute;
margin: 0;
top: 10%;
left: 92%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
.notifysettingsmaintext {
position: absolute;
margin: 0;
text-decoration: none;
text-align: center;
top: 10%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
font-size: 35px;
color: var(--color);
text-align:center;
font-family: BebasNeuePro-Bold;
}
.notifysettingsscale {
position: absolute;
margin: 0;
text-decoration: none;
text-align: center;
top: 25%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
font-size: 25px;
color: #ffffff;
text-align:center;
font-family: BebasNeuePro-Bold;
}
.scaleslidercontainer {
position: absolute;
margin: 0;
background-color: rgba(0, 0, 0, 1);
border-bottom: 3px solid var(--color);
color: #ffffff;
font-size: 35px;
text-decoration: none;
text-align: center;
top: 37%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
overflow: hidden;
z-index: 9999999;
width: 80%;
height: 11%;
border-radius: 5px;
font-family: BebasNeueBold;
}
.scaleslider {
-webkit-appearance: none;
appearance: none;
position: absolute;
margin: 0;
background-color: rgba(255, 255, 255, 0.0);
color: #ffffff;
font-size: 35px;
text-decoration: none;
text-align: center;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
overflow: hidden;
z-index: 9999999;
width: 90%;
height: 80%;
border-radius: 5px;
font-family: BebasNeueBold;
outline: none;
}
.scalesliderline {
-webkit-appearance: none;
appearance: none;
position: absolute;
margin: 0;
background-color: rgba(255, 255, 255, 1.0);
color: #ffffff;
font-size: 35px;
text-decoration: none;
text-align: center;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
overflow: hidden;
z-index: 9999999;
width: 90%;
height: 8%;
border-radius: 5px;
font-family: BebasNeueBold;
outline: none;
}
.scaleslider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 17px;
height: 17px;
border-radius: 50%;
cursor: pointer;
background-color: var(--color);
}
.scaleslider::-moz-range-thumb {
width: 17px;
height: 17px;
border-radius: 50%;
cursor: pointer;
background-color: var(--color);
}
input[type=range]:focus {
outline: none;
}
.notifysettingssound {
position: absolute;
margin: 0;
text-decoration: none;
text-align: center;
top: 52%;
left: 25%;
margin-right: -50%;
transform: translate(-50%, -50%);
font-size: 25px;
color: #ffffff;
text-align:center;
font-family: BebasNeuePro-Bold;
}
.notifysettingshide {
position: absolute;
margin: 0;
text-decoration: none;
text-align: center;
top: 52%;
left: 75%;
margin-right: -50%;
transform: translate(-50%, -50%);
font-size: 25px;
color: #ffffff;
text-align:center;
font-family: BebasNeuePro-Bold;
}
.notifyvolumeswitch {
display: inline-block;
width: 30%;
height: 11%;
position: absolute;
margin: 0;
text-decoration: none;
text-align: center;
top: 64%;
left: 25%;
margin-right: -50%;
transform: translate(-50%, -50%);
text-align:center;
}
.notifyvolumeswitch input {
opacity: 0;
width: 0;
height: 0;
}
.slidervolumeswitch {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 1);
border-bottom: 3px solid var(--color);
border-radius: 5px;
-webkit-transition: .4s;
transition: .4s;
}
.slidervolumeswitch:before {
position: absolute;
content: "";
width: 25%;
height: 70%;
top: 50%;
left: 25%;
margin-right: -50%;
transform: translate(-50%, -50%);
background-color: #ffffff;
border-radius: 5px;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slidervolumeswitch:before {
top: 50%;
left: 75%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
.notifyhideswitch {
display: inline-block;
width: 30%;
height: 11%;
position: absolute;
margin: 0;
text-decoration: none;
text-align: center;
top: 64%;
left: 75%;
margin-right: -50%;
transform: translate(-50%, -50%);
text-align:center;
}
.notifyhideswitch input {
opacity: 0;
width: 0;
height: 0;
}
.sliderhideswitch {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 1);
border-bottom: 3px solid var(--color);
border-radius: 5px;
-webkit-transition: .4s;
transition: .4s;
}
.sliderhideswitch:before {
position: absolute;
content: "";
width: 25%;
height: 70%;
top: 50%;
left: 25%;
margin-right: -50%;
transform: translate(-50%, -50%);
background-color: #ffffff;
border-radius: 5px;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .sliderhideswitch:before {
top: 50%;
left: 75%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
.buttonsettingsreset {
position: absolute;
margin: 0;
background-color: rgba(0, 0, 0, 1);
border-bottom: 3px solid var(--color);
color: #ffffff;
font-size: 27px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
text-decoration: none;
text-align: center;
top: 85%;
left: 25%;
margin-right: -50%;
transform: translate(-50%, -50%);
overflow: hidden;
z-index: 99999999;
width: 30%;
border-radius: 8px;
font-family: BebasNeuePro-Bold;
}
.buttonsettingsreset:hover {
background: var(--color);
text-decoration: none;
}
.buttonsettingssave {
position: absolute;
margin: 0;
background-color: rgba(0, 0, 0, 1);
border-bottom: 3px solid var(--color);
color: #ffffff;
font-size: 27px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
text-decoration: none;
text-align: center;
top: 85%;
left: 75%;
margin-right: -50%;
transform: translate(-50%, -50%);
overflow: hidden;
z-index: 99999999;
width: 30%;
border-radius: 8px;
font-family: BebasNeuePro-Bold;
}
.buttonsettingssave:hover {
background: var(--color);
text-decoration: none;
}
.full-screen {
width: 100%;
height:100%;
display: flex;
align-items: center;
}
.notifications {
width: 100%;
left: 50%;
overflow: auto;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
@keyframes progressanim {
from {
width 100%;
}
to {
width:0%;
}
}
@keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
View git blame Copy permalink