extension-styles.css

/*--------------------------------------------------------------
>>> FRAME BY FRAME
----------------------------------------------------------------
# Document
# Container
# Surface
# Buttons
    # Toggle
    # Drag And Drop
    # Resize
# Slider
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# DOCUMENT
--------------------------------------------------------------*/

html.looper--pointer,
html.looper--pointer * {
    cursor: pointer !important;
}

html.looper--grab,
html.looper--grab * {
    cursor: grab !important;
}

html.looper--grabbing,
html.looper--grabbing * {
    cursor: grabbing !important;
}

html.looper--resize,
html.looper--resize * {
    cursor: se-resize !important;
}


/*--------------------------------------------------------------
# CONTAINER
--------------------------------------------------------------*/

.looper {
    position: fixed !important;
    z-index: 2147483647 !important;
    visibility: hidden !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
    opacity: 0 !important;
    border: 1px solid rgba(0, 0, 0, .8) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8) !important;
}

.looper--visible,
.looper--busy {
    visibility: visible !important;
    transition: visibility 175ms, opacity 175ms !important;
    opacity: 1 !important;
}

.looper--sleeping-mode {
    visibility: hidden !important;
    opacity: 0 !important;
}


/*--------------------------------------------------------------
# SURFACE
--------------------------------------------------------------*/

.looper__surface {
    font-family: monospace !important;
    font-size: 16px !important;
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    overflow: hidden !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    padding: 16px 24px !important;
    color: #fff !important;
    border: 1px solid rgba(82, 82, 82, .9) !important;
    border-radius: 8px !important;
    background: rgba(41, 41, 41, .8) !important;
    justify-content: space-around !important;
    align-items: stretch !important;
}

.looper__surface--hover {
    visibility: visible !important;
    opacity: 1 !important;
}

.looper__surface--collapsed {
    visibility: hidden !important;
}


/*--------------------------------------------------------------
# BUTTONS
--------------------------------------------------------------*/

.looper__button {
    position: absolute !important;
    visibility: hidden !important;
    width: 24px !important;
    height: 24px !important;
    transition: visibility 225ms, opacity 225ms, border-radius 225ms !important;
    opacity: 0 !important;
    color: #999 !important;
    background: rgb(128, 128, 128, .32) !important;
}

.looper__button--hover {
    color: #fff !important;
}

.looper__surface--hover .looper__button {
    visibility: visible !important;
    opacity: 1 !important;
}

.looper__surface--collapsed .looper__button {
    visibility: hidden !important;
    opacity: 0 !important;
}


/*--------------------------------------------------------------
# TOGGLE
--------------------------------------------------------------*/

.looper__toggle {
    top: 0 !important;
    left: 0 !important;
    border-top-left-radius: 8px !important;
    border-bottom-right-radius: 24px !important;
}

.looper__surface--collapsed .looper__toggle {
    visibility: visible !important;
    opacity: 1 !important;
}

.looper__toggle::before,
.looper__toggle::after {
    position: absolute !important;
    content: '' !important;
    color: inherit !important;
    background: currentColor !important;
}

.looper__toggle::before {
    top: 7px !important;
    left: 7px !important;
    width: 8px !important;
    height: 2px !important;
    transition: transform 175ms !important;
}

.looper__toggle::after {
    top: 7px !important;
    left: 7px !important;
    width: 2px !important;
    height: 8px !important;
    transition: transform 175ms !important;
}

.looper__surface--collapsed .looper__toggle {
    border-radius: 50% !important;
}

.looper__surface--collapsed .looper__toggle::before {
    transform: translate(3px, 3px) rotate(-90deg) !important;
}

.looper__surface--collapsed .looper__toggle::after {
    transform: translate(3px, 3px) rotate(90deg) !important;
}


/*--------------------------------------------------------------
# DRAG AND DROP
--------------------------------------------------------------*/

.looper__drag-and-drop {
    top: 0 !important;
    right: 0 !important;
    border-top-right-radius: 8px !important;
    border-bottom-left-radius: 24px !important;
}

.looper__drag-and-drop::before,
.looper__drag-and-drop::after {
    position: absolute !important;
    content: '' !important;
    color: inherit !important;
    background: currentColor !important;
}

.looper__drag-and-drop::before {
    top: 9px !important;
    right: 5px !important;
    width: 10px !important;
    height: 2px !important;
}

.looper__drag-and-drop::after {
    top: 5px !important;
    right: 9px !important;
    width: 2px !important;
    height: 10px !important;
}


/*--------------------------------------------------------------
# RESIZE
--------------------------------------------------------------*/

.looper__resize {
    right: 0 !important;
    bottom: 0 !important;
    border-top-left-radius: 24px !important;
    border-bottom-right-radius: 8px !important;
}

.looper__resize::before,
.looper__resize::after {
    position: absolute !important;
    content: '' !important;
    color: inherit !important;
    background: currentColor !important;
}

.looper__resize::before {
    top: 9px !important;
    right: 7px !important;
    width: 10px !important;
    height: 2px !important;
    transform: rotate(-45deg) !important;
    transform-origin: center right !important;
}

.looper__resize::after {
    top: 14px !important;
    right: 6px !important;
    width: 5px !important;
    height: 2px !important;
    transform: rotate(-45deg) !important;
    transform-origin: center right !important;
}


/*--------------------------------------------------------------
# SLIDER
--------------------------------------------------------------*/

/*html .looper,
html .looper__button {
    visibility: visible !important;
    transition: visibility 175ms, opacity 175ms !important;
    opacity: 1 !important;
}*/

.looper__surface {
    display: flex !important;
    min-width: 320px !important;
    min-height: 224px !important;
}

.looper__panel {
    position: relative !important;
    height: 48px !important;
    padding: 6px !important;
    border-radius: 8px !important;
    background: rgba(var(--looper-background-color, 0, 0, 0), .24) !important;
}

.looper__block {
    display: flex !important;
    box-sizing: border-box !important;
    width: 96px !important;
    height: 100% !important;
    padding: 4px !important;
    border-radius: 6px !important;
    background: rgba(var(--looper-primary-color, 74, 178, 146), .88) !important;
    flex-wrap: wrap !important;
    align-items: space-between !important;
}

.looper__media-type {
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 18px !important;
    width: max-content !important;
    height: 16px !important;
    margin: 0 4px 0 0 !important;
    padding: 0 4px !important;
    color: rgba(var(--looper-primary-color, 74, 178, 146), .88) !important;
    border-radius: 4px !important;
    background: rgba(var(--looper-background-color, 0, 0, 0), .9) !important;
}

.looper__source-type {
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 14px !important;
    width: max-content !important;
    height: 12px !important;
    padding: 0 2px !important;
    color: rgba(var(--looper-background-color, 0, 0, 0), .9) !important;
    border: 2px solid rgba(var(--looper-background-color, 0, 0, 0), .9) !important;
    border-radius: 4px !important;
}

.looper__current-time {
    font-size: 16px !important;
    height: max-content !important;
    margin: 2px 0 0 !important;
    color: rgba(var(--looper-background-color, 0, 0, 0), .9) !important;
}

.looper__panel>input {
    font-family: monospace !important;
    font-size: 14px !important;
    line-height: 12px !important;
    position: absolute !important;
    right: 6px !important;
    box-sizing: border-box !important;
    width: calc(100% - 114px) !important;
    height: 16px !important;
    height: 20px !important;
    padding: 0 6px !important;
    color: rgb(var(--looper-color, 225, 255, 255)) !important;
    border: 2px solid rgba(var(--looper-color, 225, 255, 255), .1) !important;
    border-radius: 4px !important;
    background: transparent !important;
    outline: none !important;
}

.looper__panel>input:nth-child(2) {
    top: 6px !important;
}

.looper__panel>input:nth-child(3) {
    bottom: 6px !important;
}

.looper__container {
    position: relative !important;
    display: flex !important;
    box-sizing: border-box !important;
    height: 40px !important;
    margin: 16px 8px 0 !important;
    padding: 2px 0 0 !important;
    align-items: center !important;
}

.looper__track {
    position: absolute !important;
    width: 100% !important;
    height: 2px !important;
    background: rgba(var(--looper-color, 225, 255, 255), .2) !important;
}

.looper__track::before {
    position: absolute !important;
    top: -8px !important;
    left: 0 !important;
    width: 2px !important;
    height: 8px !important;
    content: '' !important;
    background: rgba(var(--looper-color, 225, 255, 255), .2) !important;
}

.looper__track::after {
    position: absolute !important;
    top: -8px !important;
    right: 0 !important;
    width: 2px !important;
    height: 8px !important;
    content: '' !important;
    background: rgba(var(--looper-color, 225, 255, 255), .2) !important;
}

.looper__percent {
    position: absolute !important;
    top: -4px !important;
    width: 2px !important;
    height: 4px !important;
    background: rgba(var(--looper-color, 225, 255, 255), .2) !important;
}

.looper__big-percent {
    top: -8px !important;
    height: 8px !important;
}

.looper__thumb {
    position: absolute !important;
    z-index: 999 !important;
    top: -8px !important;
    width: 2px !important;
    height: 16px !important;
    background: rgb(var(--looper-color, 225, 255, 255)) !important;
}

.looper__segment {
    position: absolute !important;
    height: 2px !important;
    background: rgb(var(--looper-primary-color, 74, 178, 146)) !important;
}

.looper__pin {
    position: absolute !important;
    top: -28px !important;
    width: 8px !important;
    height: 8px !important;
    padding: 8px !important;
}

.looper__pin::before {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    width: 8px !important;
    height: 8px !important;
    content: '' !important;
    background: rgb(var(--looper-color, 225, 255, 255)) !important;
}

.looper__pin--hover::before,
.looper__pin[focus]::before {
    background: rgb(var(--looper-primary-color, 74, 178, 146)) !important;
}

.looper__pin::after {
    position: absolute !important;
    top: 16px !important;
    left: 8px !important;
    width: 0 !important;
    height: 0 !important;
    content: '' !important;
    border-top: 4px solid rgb(var(--looper-color, 225, 255, 255)) !important;
    border-right: 4px solid transparent !important;
    border-left: 4px solid transparent !important;
}

.looper__pin--hover::after,
.looper__pin[focus]::after {
    border-top-color: rgb(var(--looper-primary-color, 74, 178, 146)) !important;
}

.looper__pin:first-child {
    left: 0 !important;
    transform: translateX(-50%) !important;
}

.looper__pin:last-child {
    right: 0 !important;
    transform: translateX(50%) !important;
}

.looper__number {
    font-family: monospace !important;
    font-size: 10px !important;
    position: absolute !important;
    top: 0 !important;
    width: auto !important;
    height: 8px !important;
    transform: translateX(-50%) !important;
    color: rgba(var(--looper-color, 225, 255, 255), .16) !important;
}

.looper__controls {
    display: flex !important;
    margin: 16px 0 0 !important;
    justify-content: space-between !important;
}

.looper__control {
    padding: 8px !important;
}

.looper__control>svg {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    fill: rgba(var(--looper-color, 225, 255, 255), .5) !important;
}

.looper__control--play>svg:nth-child(2) {
    display: none !important;
}

.looper--playing .looper__control--play>svg:nth-child(1) {
    display: none !important;
}

.looper--playing .looper__control--play>svg:nth-child(2) {
    display: block !important;
}

.looper__control--hover>svg {
    fill: rgba(var(--looper-color, 225, 255, 255), 1) !important;
}