mirror of
https://github.com/zyqunix/tools.git
synced 2025-07-06 06:20:30 +02:00
add accesibility stuff and add webkit backdorp for ios/safari
This commit is contained in:
parent
38d6c901ff
commit
d03b4c2419
6 changed files with 19 additions and 10 deletions
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
13
style.css
13
style.css
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue