add accesibility stuff and add webkit backdorp for ios/safari

This commit is contained in:
zyqunix 2025-03-20 07:36:20 +01:00
parent 38d6c901ff
commit d03b4c2419
6 changed files with 19 additions and 10 deletions

View file

@ -54,6 +54,7 @@ body {
font-weight: bold; font-weight: bold;
background-color: rgba(9, 9, 9, 0.95); background-color: rgba(9, 9, 9, 0.95);
backdrop-filter: blur(20px); backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
transition: 1s; transition: 1s;
} }
@ -96,6 +97,7 @@ body {
transition-duration: 1s; transition-duration: 1s;
background: rgba(255, 255, 255, 0.02); background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 15px; border-radius: 15px;
padding: 20px; padding: 20px;
text-align: center; text-align: center;
@ -246,6 +248,7 @@ body {
height: 30px; height: 30px;
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: #000000 3px 3px 20px !important; box-shadow: #000000 3px 3px 20px !important;
border: 2px solid rgba(150, 150, 150, 0.25); border: 2px solid rgba(150, 150, 150, 0.25);
text-shadow: #000000 3px 2px 7px !important; text-shadow: #000000 3px 2px 7px !important;
@ -384,6 +387,7 @@ body {
.blurBG { .blurBG {
backdrop-filter: blur(0px); backdrop-filter: blur(0px);
-webkit-backdrop-filter: blur(0px);
width: 105%; width: 105%;
height: 110%; height: 110%;
border-radius: 10px; border-radius: 10px;
@ -453,6 +457,7 @@ div[id="name"]::after {
font-family: monospace; font-family: monospace;
bottom: 87% !important; bottom: 87% !important;
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
left: 50%; left: 50%;
text-wrap: pretty; text-wrap: pretty;
} }

View file

@ -30,7 +30,7 @@
</svg> </svg>
</button> </button>
<select name="Language" id="langauge-selector"> <select title="Change Language" name="Language" id="langauge-selector">
<option value="en">English 🇬🇧</option> <option value="en">English 🇬🇧</option>
<option value="de">Deutsch 🇩🇪</option> <option value="de">Deutsch 🇩🇪</option>
</select> </select>
@ -56,4 +56,4 @@
<script src="translate.js"></script> <script src="translate.js"></script>
</body> </body>
</html> </html>

View file

@ -109,6 +109,7 @@ p, h6, h1, h3 {
justify-content: left; justify-content: left;
background-color: rgb(42,42,42,0.775); background-color: rgb(42,42,42,0.775);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
width: 100%; width: 100%;
} }
@ -140,4 +141,4 @@ p, h6, h1, h3 {
border-radius: 10px; border-radius: 10px;
background-color: #747474; background-color: #747474;
} }

View file

@ -11,6 +11,7 @@ div.top {
position: fixed; position: fixed;
background-color: #242424dd; background-color: #242424dd;
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
user-select: none; user-select: none;
z-index: 9999; z-index: 9999;
} }

View file

@ -16,6 +16,7 @@ div.header-main {
left: 0; left: 0;
background-color: rgba(59, 59, 59, 0.885); background-color: rgba(59, 59, 59, 0.885);
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
} }
div.header-main { div.header-main {
@ -233,4 +234,4 @@ h2 {
margin-top: 5px; margin-top: 5px;
margin-right: 10px; margin-right: 10px;
} }
} }

View file

@ -46,6 +46,7 @@ html {
position: fixed; position: fixed;
background-color: rgba(59, 59, 59, 0.885); background-color: rgba(59, 59, 59, 0.885);
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
font-size: large; font-size: large;
top: 0; top: 0;
border-bottom: 1px solid rgba(70, 70, 70, 0.885); border-bottom: 1px solid rgba(70, 70, 70, 0.885);
@ -84,8 +85,8 @@ html {
.tool-div { .tool-div {
bottom: 20px !important; bottom: 20px !important;
background-color: rgba(75, 75, 75, 1); background-color: rgba(50, 50, 50, 1);
border: 2px solid rgba(80, 80, 80, 1); border: 2px solid rgba(65, 65, 65, 1);
border-radius: 7px; border-radius: 7px;
transition: 0.3s; transition: 0.3s;
text-align: center; text-align: center;
@ -121,8 +122,8 @@ html {
.visit-tool { .visit-tool {
padding: 10px 20px; padding: 10px 20px;
background-color: rgb(60, 120, 85); background-color: rgb(40, 100, 65);
color: #f0f0f0; color: #fff;
border: 2px solid rgb(75, 135, 100); border: 2px solid rgb(75, 135, 100);
border-radius: 4px; border-radius: 4px;
transition: 0.1s; transition: 0.1s;
@ -132,7 +133,7 @@ html {
} }
.visit-tool:hover { .visit-tool:hover {
background-color: rgb(75, 135, 100); background-color: rgb(35, 95, 60);
border-color: rgb(90, 150, 115); border-color: rgb(90, 150, 115);
} }
@ -227,4 +228,4 @@ html {
width: 100%; width: 100%;
margin-top: 70px; margin-top: 70px;
} }
} }