decentraland-ui/dist/components/WearablePreview/EmoteControls.css

Decentraland's UI components and styles

.EmoteControls {
  display: flex;
  margin: 16px 0;
  padding: 0 24px;
  position: absolute;
  bottom: 0;
  width: 100%;
}

.EmoteControls .ui.button.play-control {
  width: 56px;
  height: 44px;
  padding: 0;
  min-width: unset;
  margin-right: 16px;
  background: rgba(0, 0, 0, 0.64) !important;
}

.EmoteControls .ui.button.sound-control {
  margin-left: 20px;
  min-width: 25px;
  background: none;
  padding: 0;
}

.EmoteControls .ui.button.sound-control::after {
  content: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url%28%23clip0_1321_19516%29'%3E%3Cpath d='M10 7.21999L6.603 9.99999H3V14H6.603L10 16.78V7.21999ZM5.889 16H2C1.73478 16 1.48043 15.8946 1.29289 15.7071C1.10536 15.5196 1 15.2652 1 15V8.99999C1 8.73477 1.10536 8.48042 1.29289 8.29288C1.48043 8.10535 1.73478 7.99999 2 7.99999H5.889L11.183 3.66799C11.2563 3.60794 11.3451 3.56993 11.4391 3.55838C11.5331 3.54684 11.6284 3.56224 11.714 3.60279C11.7996 3.64334 11.872 3.70737 11.9226 3.78742C11.9732 3.86748 12.0001 3.96027 12 4.05499V19.945C12.0001 20.0397 11.9732 20.1325 11.9226 20.2126C11.872 20.2926 11.7996 20.3566 11.714 20.3972C11.6284 20.4377 11.5331 20.4531 11.4391 20.4416C11.3451 20.4301 11.2563 20.392 11.183 20.332L5.89 16H5.889ZM19.406 20.134L17.99 18.718C18.938 17.8745 19.6964 16.8397 20.2152 15.6817C20.734 14.5237 21.0015 13.2689 21 12C21.0012 10.6661 20.7054 9.34864 20.1339 8.14336C19.5624 6.93808 18.7296 5.87523 17.696 5.03199L19.116 3.61199C20.3345 4.64354 21.3132 5.92847 21.9841 7.37719C22.6549 8.8259 23.0016 10.4035 23 12C23 15.223 21.614 18.122 19.406 20.134ZM15.863 16.591L14.441 15.169C14.9265 14.7957 15.3196 14.3157 15.5899 13.7662C15.8602 13.2167 16.0006 12.6124 16 12C16 10.57 15.25 9.31499 14.12 8.60799L15.559 7.16899C16.3165 7.72618 16.9321 8.45384 17.3562 9.29311C17.7802 10.1324 18.0008 11.0597 18 12C18 13.842 17.17 15.49 15.863 16.591Z' fill='%23ECEBED'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1321_19516'%3E%3Crect width='24' height='24' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

.EmoteControls .ui.button.sound-control.muted::after {
  content: url("data:image/svg+xml;charset=utf-8,%3Csvg width='23' height='18' viewBox='0 0 23 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 4.22002L5.603 7.00002H2V11H5.603L9 13.78V4.22002ZM4.889 13H1C0.734784 13 0.48043 12.8947 0.292893 12.7071C0.105357 12.5196 0 12.2652 0 12V6.00002C0 5.73481 0.105357 5.48045 0.292893 5.29291C0.48043 5.10538 0.734784 5.00002 1 5.00002H4.889L10.183 0.668021C10.2563 0.607968 10.3451 0.569958 10.4391 0.558415C10.5331 0.546871 10.6284 0.56227 10.714 0.602819C10.7996 0.643367 10.872 0.707397 10.9226 0.787454C10.9732 0.867511 11.0001 0.960301 11 1.05502V16.945C11.0001 17.0397 10.9732 17.1325 10.9226 17.2126C10.872 17.2926 10.7996 17.3567 10.714 17.3972C10.6284 17.4378 10.5331 17.4532 10.4391 17.4416C10.3451 17.4301 10.2563 17.3921 10.183 17.332L4.89 13H4.889ZM19.414 9.00002L22.95 12.536L21.536 13.95L18 10.414L14.464 13.95L13.05 12.536L16.586 9.00002L13.05 5.46402L14.464 4.05002L18 7.58602L21.536 4.05002L22.95 5.46402L19.414 9.00002Z' fill='%23ECEBED'/%3E%3C/svg%3E");
}

.EmoteControls input {
  flex: 1;
}

.EmoteControls input[type='range'] {
  width: 100%;
  background: none;
}

.EmoteControls input[type='range'] {
  -webkit-appearance: none;
}

.EmoteControls input[type='range']:focus {
  outline: none;
}

.EmoteControls input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 10px;
  background-color: #736e7d;
  overflow: visible;
  cursor: pointer;
  padding-bottom: 5px;
  margin-top: -4px;
}

.EmoteControls input[type='range']::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 20px;
  background-color: #736e7d;
  overflow: visible;
  cursor: pointer;
}

.EmoteControls input[type='range']::-ms-thumb {
  width: 24px;
  height: 24px;
  border-radius: 20px;
  background-color: #736e7d;
  overflow: visible;
  cursor: pointer;
}

.EmoteControls input[type='range']::-webkit-slider-runnable-track {
  width: 300px;
  height: 15px;
  background: rgba(115, 110, 125, 0.32);
  border: none;
  border-radius: 10px;
}

.EmoteControls input[type='range']::-moz-range-track {
  width: 100%;
  height: 15px;
  border-radius: 10px;
  cursor: pointer;
  background: rgba(115, 110, 125, 0.32);
}

.EmoteControls .WearablePreview {
  background: #1d1b22;
}

.EmoteControls .frame-control input {
  width: 56px;
  height: 44px;
  border-radius: 5px;
  background: transparent;
  border: 1px solid rgba(115, 110, 125, 0.4);
  color: white;
  text-align: center;
  margin-left: 16px;
}

.EmoteControls .frame-control input:focus-visible {
  outline: 1px solid;
}

.EmoteControls .ui.button.play-control .play.icon {
  padding-left: 7px;
}

.EmoteControls .ui.button.play-control .pause.icon {
  padding-left: 6px;
}