User:Toad64/Sandbox: Difference between revisionsGive feedback
No edit summary |
No edit summary |
||
| Line 2: | Line 2: | ||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
// gemini code | |||
// In your Common.js | // In your Common.js | ||
$(document).ready(function() { | $(document).ready(function() { | ||
| Line 33: | Line 35: | ||
align-items: center; | align-items: center; | ||
gap: 12px; | gap: 12px; | ||
width: 100%; | width: 100%; | ||
max-width: 400px; | max-width: 400px; | ||
padding: 10px 15px; | |||
border-radius: 50px; | |||
background: var(--background-color-base-subtle); | background: var(--background-color-base-subtle); | ||
color: var(--color-base); | color: var(--color-base); | ||
font-family: sans-serif; | font-family: sans-serif; | ||
box-sizing: border-box; | |||
overflow: hidden; | |||
} | } | ||
.playBtn { | .playBtn { | ||
flex-shrink: 0; | |||
width: 30px; | width: 30px; | ||
height: 30px; | height: 30px; | ||
border: none; | |||
border-radius: 50%; | |||
background: var(--background-color-interactive); | background: var(--background-color-interactive); | ||
color: var(--color-base); | color: var(--color-base); | ||
cursor: pointer; | cursor: pointer; | ||
} | } | ||
.seek { | .seek { | ||
flex: 1; | |||
-webkit-appearance: none; | |||
appearance: none; | |||
height: 6px; | height: 6px; | ||
border-radius: 5px; | |||
background: var(--color-base); | background: var(--color-base); | ||
cursor: pointer; | cursor: pointer; | ||
} | } | ||
.seek::-webkit-slider-thumb { | .seek::-webkit-slider-thumb { | ||
-webkit-appearance: none; | -webkit-appearance: none; | ||
appearance: none; | appearance: none; | ||
width: 15px; | width: 15px; | ||
height: 15px; | height: 15px; | ||
border-radius: 50px; | |||
background: var(--link-color); | background: var(--link-color); | ||
cursor: pointer; | cursor: pointer; | ||
| Line 71: | Line 86: | ||
.seek::-moz-range-thumb { | .seek::-moz-range-thumb { | ||
-webkit-appearance: none; | |||
appearance: none; | |||
width: 15px; | width: 15px; | ||
height: 15px; | height: 15px; | ||
border-radius: 50px; | |||
background: var(--link-color); | background: var(--link-color); | ||
cursor: pointer; | cursor: pointer; | ||
} | } | ||
.time { font-size: 12px; opacity: 0.8; white-space: nowrap; } | .time { | ||
font-size: 12px; | |||
opacity: 0.8; | |||
white-space: nowrap; | |||
} | |||
</style> | </style> | ||