WiredLabel.css 3.5 Ko
Télécharger le fichier
/* Official AIR furniture labels (wf_label): a coloured speech bubble above the furni. */
.octane-wired-label-overlay {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
}
.octane-wired-label {
--octane-wired-label-color: #414a80;
position: absolute;
transform-origin: bottom center;
/* The official bubble's margins (8 / 8 / 9, the tail below) and minimum size 142x80. */
min-width: 142px;
min-height: 66px;
padding: 8px 9px 8px 8px;
background: var(--octane-wired-label-color);
border: 1px solid rgba(0, 0, 0, 0.8);
border-radius: 6px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
pointer-events: none;
}
/* The tail pointing at the furni. */
.octane-wired-label::after {
content: '';
position: absolute;
left: 50%;
bottom: -7px;
width: 12px;
height: 12px;
margin-left: -6px;
background: var(--octane-wired-label-color);
border-right: 1px solid rgba(0, 0, 0, 0.8);
border-bottom: 1px solid rgba(0, 0, 0, 0.8);
transform: rotate(45deg);
}
.octane-wired-label.is-preview {
opacity: 0.7;
}
.octane-wired-label.is-interactive,
.octane-wired-label.is-preview {
pointer-events: auto;
}
.octane-wired-label__text {
display: block;
position: relative;
z-index: 1;
padding: 0;
background: transparent;
border: 0;
outline: none;
resize: none;
color: #fff;
/* The official label input: Habbo's Ubuntu at 11px. */
font-family: HabboAirUbuntu, UbuntuRegular, Ubuntu, sans-serif;
font-size: 11px;
line-height: 14px;
white-space: pre-wrap;
overflow-wrap: anywhere;
user-select: none;
}
.octane-wired-label.is-interactive .octane-wired-label__text {
user-select: text;
}
.octane-wired-label__text[readonly] {
cursor: default;
}
.octane-wired-label__text::placeholder {
color: rgba(255, 255, 255, 0.5);
}
/* Settings window */
.octane-wired-label-settings {
width: 320px;
}
.octane-wired-label-settings__color {
width: 226px;
}
.octane-wired-label-settings__cancel {
min-width: 61px;
}
/* AIR save_button keeps its right edge and shrinks to its caption with the label margins (60px for "Ready"),
white button_shiny_bold on the green style-5 button. */
.octane-wired-label-settings__ready {
width: auto;
min-width: 0;
padding: 0 5px 0 4px;
color: #fff;
}
/* Checkbox style 102 has no element entry, so AIR draws the default 15x15 checkbox skin, at half alpha while disabled. */
.octane-wired-label-settings__checkbox {
flex: 0 0 15px;
width: 15px;
height: 15px;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
appearance: none;
background: url('../../assets/images/wired/label/checkbox-default.png') 0 0 no-repeat;
box-shadow: none;
image-rendering: pixelated;
}
.octane-wired-label-settings__checkbox:checked {
background-image: url('../../assets/images/wired/label/checkbox-checked.png');
}
.octane-wired-label-settings__checkbox:disabled {
opacity: 0.5;
}
.octane-wired-label-settings__preview {
position: relative;
width: 52px;
height: 28px;
background: var(--octane-wired-label-color);
border: 1px solid #000;
border-radius: 4px;
}
.octane-wired-label-settings__preview::after {
content: '';
position: absolute;
left: 50%;
bottom: -4px;
width: 6px;
height: 6px;
margin-left: -3px;
background: var(--octane-wired-label-color);
border-right: 1px solid #000;
border-bottom: 1px solid #000;
transform: rotate(45deg);
}
