mirror of
https://github.com/zyqunix/tools.git
synced 2025-07-06 14:30:31 +02:00
added pinkpantheress, hover tooltips, css mobile change (and fixed devtool)
This commit is contained in:
zyqunix
parent
a953037413
commit
e9b6ddf1ae
4 changed files with 203 additions and 63 deletions
194
bio/style.css
194
bio/style.css
|
|
@ -1,4 +1,5 @@
|
|||
html, body {
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
|
|
@ -21,7 +22,20 @@ html, body {
|
|||
|
||||
@font-face {
|
||||
font-family: 'Pixel';
|
||||
src: url('Pixel.ttf');
|
||||
src: url('Pixel.ttf');
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: #fefefe;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
:visited {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.phone {
|
||||
|
|
@ -43,6 +57,14 @@ html, body {
|
|||
transition: 1s;
|
||||
}
|
||||
|
||||
.clickToEnter > p {
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
font-size: 16px;
|
||||
transition: 1s;
|
||||
}
|
||||
|
||||
.click123 {
|
||||
margin-bottom: 45%;
|
||||
font-size: 0.5em;
|
||||
|
|
@ -116,7 +138,8 @@ html, body {
|
|||
font-size: 16px;
|
||||
}
|
||||
|
||||
#enter, #video {
|
||||
#enter,
|
||||
#video {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -157,7 +180,13 @@ html, body {
|
|||
filter: drop-shadow(#000000 1px 0 7px) !important;
|
||||
}
|
||||
|
||||
.dc, .ig, .lk, .bc, .et, .lc, .xm {
|
||||
.dc,
|
||||
.ig,
|
||||
.lk,
|
||||
.bc,
|
||||
.et,
|
||||
.lc,
|
||||
.xm {
|
||||
bottom: 50%;
|
||||
left: 50%;
|
||||
pointer-events: none;
|
||||
|
|
@ -165,14 +194,26 @@ html, body {
|
|||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.dci, .igi, .lki, .bci, .eti, .lci, .xmi {
|
||||
.dci,
|
||||
.igi,
|
||||
.lki,
|
||||
.bci,
|
||||
.eti,
|
||||
.lci,
|
||||
.xmi {
|
||||
pointer-events: all;
|
||||
transition: transform 0.2s;
|
||||
transition: transform 0.2s;
|
||||
width: 2.75em;
|
||||
height: 2.75em;
|
||||
}
|
||||
|
||||
.dci:hover, .igi:hover, .lki:hover, .bci:hover, .eti:hover, .lci:hover, .xmi:hover {
|
||||
.dci:hover,
|
||||
.igi:hover,
|
||||
.lki:hover,
|
||||
.bci:hover,
|
||||
.eti:hover,
|
||||
.lci:hover,
|
||||
.xmi:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
|
|
@ -220,7 +261,8 @@ html, body {
|
|||
transition: 100ms;
|
||||
}
|
||||
|
||||
.slider::-webkit-slider-thumb, #volumeSlider::-webkit-slider-thumb {
|
||||
.slider::-webkit-slider-thumb,
|
||||
#volumeSlider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 12px;
|
||||
|
|
@ -235,7 +277,8 @@ html, body {
|
|||
transition: 100ms;
|
||||
}
|
||||
|
||||
.slider::-moz-range-thumb, #volumeSlider::-moz-range-thumb {
|
||||
.slider::-moz-range-thumb,
|
||||
#volumeSlider::-moz-range-thumb {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
|
|
@ -305,7 +348,8 @@ html, body {
|
|||
border: 1px solid #ffffff;
|
||||
}
|
||||
|
||||
#currentTime, #totalDuration {
|
||||
#currentTime,
|
||||
#totalDuration {
|
||||
text-shadow: #000000 3px 2px 7px !important;
|
||||
}
|
||||
|
||||
|
|
@ -335,39 +379,11 @@ html, body {
|
|||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#video {
|
||||
display: none !important;
|
||||
}
|
||||
.pc {
|
||||
display: none;
|
||||
}
|
||||
.phone {
|
||||
display: block;
|
||||
}
|
||||
.slider {
|
||||
width: 80%;
|
||||
max-width: 300px;
|
||||
}
|
||||
#volumeSlider {
|
||||
width: 120px;
|
||||
}
|
||||
.volume_Percent {
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.dci, .igi, .lki, .bci, .eti, .lci, .xmi {
|
||||
pointer-events: all;
|
||||
transition: 0.2s;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
div.duration-info {
|
||||
display: flex;
|
||||
gap: 277px;
|
||||
margin-left: 20px;
|
||||
justify-content: space-between;
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
button {
|
||||
|
|
@ -383,4 +399,102 @@ button {
|
|||
|
||||
svg {
|
||||
filter: drop-shadow(#cccccc 0.4px 0 7px) !important;
|
||||
}
|
||||
|
||||
.tooltip::after {
|
||||
content: attr(data-tooltip);
|
||||
position: absolute;
|
||||
bottom: 125%;
|
||||
transform: translateX(-60%);
|
||||
background-color: rgb(51, 51, 51, 0.5);
|
||||
border: 2px solid rgba(150, 150, 150, 0.1);
|
||||
color: #fff;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.3s, visibility 0.3s;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.tooltip[data-tooltip*="big"]::after {
|
||||
content: attr(data-tooltip);
|
||||
position: absolute;
|
||||
bottom: 87%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-color: rgb(51, 51, 51, 0.5);
|
||||
border: 2px solid rgba(150, 150, 150, 0.1);
|
||||
color: #fff;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.3s, visibility 0.3s;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.tooltip:hover::after {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
#video {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.pc {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.phone {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.slider {
|
||||
width: 80%;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
#volumeSlider {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.volume_Percent {
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dci,
|
||||
.igi,
|
||||
.lki,
|
||||
.bci,
|
||||
.eti,
|
||||
.lci,
|
||||
.xmi {
|
||||
pointer-events: all;
|
||||
transition: 0.2s;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
}
|
||||
|
||||
div.duration-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-right: 35px;
|
||||
margin-left: 35px;
|
||||
}
|
||||
|
||||
.clickToEnter > p {
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
font-size: 12px;
|
||||
transition: 1s;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue