mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
147 lines
3.8 KiB
HTML
147 lines
3.8 KiB
HTML
<div class="info-panels">
|
|
<div class="input-color-group-one">
|
|
<input class="input-color" autocomplete="on" name="text" type="text" required="" placeholder="255, 255, 255, 0.5">
|
|
<label class="color-label">RGBA</label>
|
|
<button class="btn-copy">
|
|
<svg class="svgs" id="icon-btn-copy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.98,13.96h-4.74c-.13,0-.24-.11-.24-.24V7.07c0-.13,.11-.24,.24-.24h4.74c.13,0,.24,.11,.24,.24v6.64c0,.13-.11,.24-.24,.24Zm-6.77-7.72V14.55c0,.66,.53,1.19,1.19,1.19h6.41c.66,0,1.19-.53,1.19-1.19V6.24c0-.66-.53-1.19-1.19-1.19h-6.41c-.66,0-1.19,.53-1.19,1.19Z"></path><path d="M15.68,18.95H7.19c-.66,0-1.19-.53-1.19-1.19V7.37c0-.49,.4-.89,.89-.89s.89,.4,.89,.89v9.57c0,.13,.1,.23,.23,.23h7.67c.49,0,.89,.4,.89,.89s-.4,.89-.89,.89Z"></path></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by Li-Deheng - Tags: button, input, copy, color, line, hover effect, input effect , hover button */
|
|
.info-panels {
|
|
--color-icon: #fff;
|
|
--color-input: #ccc;
|
|
--color-border: #9e9e9e;
|
|
--color-border-hover: #1a73e8;
|
|
--all-transition: all .2s ease-out;
|
|
--input-focus-opacity: .3;
|
|
}
|
|
|
|
.input-color-group-one {
|
|
position: relative;
|
|
}
|
|
|
|
.input-color {
|
|
max-width: 230px;
|
|
min-width: 150px;
|
|
border: 1.5px solid var(--color-border);
|
|
border-radius: 80px;
|
|
background: none;
|
|
padding: 16px;
|
|
font-size: 16px;
|
|
transition: var(--all-transition);
|
|
}
|
|
|
|
.input-color:focus {
|
|
color: var(--color-input);
|
|
outline: none;
|
|
border: 1.5px solid var(--color-border-hover);
|
|
}
|
|
|
|
.input-color:valid {
|
|
color: var(--color-input);
|
|
outline: none;
|
|
}
|
|
|
|
.input-color::-webkit-input-placeholder {
|
|
color: var(--color-input);
|
|
}
|
|
|
|
.input-color::-moz-input-placeholder {
|
|
color: var(--color-input);
|
|
}
|
|
|
|
.input-color::-ms-input-placeholder {
|
|
color: var(--color-input);
|
|
}
|
|
|
|
.input-color:focus::-webkit-input-placeholder, input-color:valid::-webkit-input-placeholder {
|
|
opacity: var(--input-focus-opacity);
|
|
}
|
|
|
|
.input-color:focus::-moz-input-placeholder, input-color:valid::-moz-input-placeholder {
|
|
opacity: var(--input-focus-opacity);
|
|
}
|
|
|
|
.input-color:focus::-ms-input-placeholder, input-color:valid::-ms-input-placeholder {
|
|
opacity: var(--input-focus-opacity);
|
|
}
|
|
|
|
.color-label {
|
|
position: absolute;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: var(--color-border);
|
|
font-weight: 600;
|
|
padding: 0 5px;
|
|
border: 1.5px solid var(--color-border);
|
|
border-radius: 20px;
|
|
top: -11.5px;
|
|
left: 25px;
|
|
background-color: transparent;
|
|
cursor: default;
|
|
backdrop-filter: blur(10px);
|
|
transition: var(--all-transition);
|
|
}
|
|
|
|
.input-color:focus ~ .color-label, input-color:valid ~ .color-label {
|
|
color: var(--color-border-hover);
|
|
border: 1.5px solid var(--color-border-hover);
|
|
}
|
|
|
|
.btn-copy {
|
|
position: absolute;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
border: 1.5px solid var(--color-border);
|
|
border-radius: 50%;
|
|
top: -11.5px;
|
|
right: 25px;
|
|
background-color: transparent;
|
|
cursor: pointer;
|
|
backdrop-filter: blur(10px);
|
|
transition: var(--all-transition);
|
|
}
|
|
|
|
.btn-copy:hover {
|
|
background-color: var(--color-border);
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
.btn-copy:active {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.input-color:focus ~ .btn-copy {
|
|
border: 1.5px solid var(--color-border-hover);
|
|
}
|
|
|
|
.input-color:valid .input-color:focus ~ .btn-copy {
|
|
border: 1.5px solid var(--color-border);
|
|
}
|
|
|
|
.input-color:focus ~ .btn-copy:hover {
|
|
background-color: var(--color-border-hover);
|
|
}
|
|
|
|
#icon-btn-copy {
|
|
fill: var(--color-border);
|
|
}
|
|
|
|
.btn-copy:hover #icon-btn-copy {
|
|
fill: var(--color-icon);
|
|
}
|
|
|
|
.input-color:focus ~ .btn-copy #icon-btn-copy {
|
|
fill: var(--color-border-hover);
|
|
}
|
|
|
|
.input-color:focus ~ .btn-copy:hover #icon-btn-copy, .input-color:valid ~ .btn-copy:hover #icon-btn-copy {
|
|
fill: var(--color-icon);
|
|
}
|
|
</style>
|