/* os-theme-round-dark|os-theme-round-light | os-theme-minimal-dark|os-theme-minimal-light | os-theme-thin-dark|os-theme-thin-light | os-theme-thick-dark|os-theme-thick-light | os-theme-block-dark|os-theme-block-light */ /* os-theme-round-dark */ .os-theme-round-dark > .os-scrollbar { padding: 0; } .os-theme-round-dark > .os-scrollbar-horizontal { right: 20px; height: 20px; } .os-theme-round-dark > .os-scrollbar-vertical { bottom: 20px; width: 20px; } .os-theme-round-dark.os-host-rtl > .os-scrollbar-horizontal { left: 20px; right: 0; } .os-theme-round-dark > .os-scrollbar-corner { height: 20px; width: 20px; background-color: transparent; } .os-theme-round-dark > .os-scrollbar > .os-scrollbar-track { background: transparent; } .os-theme-round-dark > .os-scrollbar-horizontal > .os-scrollbar-track:before, .os-theme-round-dark > .os-scrollbar-vertical > .os-scrollbar-track:before { content: ''; display: block; position: absolute; background: rgba(0, 0, 0, 0.15); } .os-theme-round-dark > .os-scrollbar-horizontal > .os-scrollbar-track:before { left: 3px; right: 3px; height: 2px; top: 50%; margin-top: -1px; } .os-theme-round-dark > .os-scrollbar-vertical > .os-scrollbar-track:before { top: 3px; bottom: 3px; width: 2px; left: 50%; margin-left: -1px; } .os-theme-round-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle { background: transparent; } .os-theme-round-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before { content: ''; display: block; position: absolute; background: #000; border-radius: 100%; top: 3px; bottom: 3px; left: 3px; right: 3px; transform: scale(1); } .os-theme-round-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:hover:before, .os-theme-round-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active:before { transform: scale(1.3); } .os-theme-round-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle { height: 100%; min-width: 20px; max-width: 20px; } .os-theme-round-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle { width: 100%; min-height: 20px; max-height: 20px; } .os-theme-round-dark.os-host-transition > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before { transition: transform 0.3s; } /* os-theme-round-light */ .os-theme-round-light > .os-scrollbar { padding: 0; } .os-theme-round-light > .os-scrollbar-horizontal { right: 20px; height: 20px; } .os-theme-round-light > .os-scrollbar-vertical { bottom: 20px; width: 20px; } .os-theme-round-light.os-host-rtl > .os-scrollbar-horizontal { left: 20px; right: 0; } .os-theme-round-light > .os-scrollbar-corner { height: 20px; width: 20px; background-color: transparent; } .os-theme-round-light > .os-scrollbar > .os-scrollbar-track { background: transparent; } .os-theme-round-light > .os-scrollbar-horizontal > .os-scrollbar-track:before, .os-theme-round-light > .os-scrollbar-vertical > .os-scrollbar-track:before { content: ''; display: block; position: absolute; background: rgba(255, 255, 255, 0.15); } .os-theme-round-light > .os-scrollbar-horizontal > .os-scrollbar-track:before { left: 3px; right: 3px; height: 2px; top: 50%; margin-top: -1px; } .os-theme-round-light > .os-scrollbar-vertical > .os-scrollbar-track:before { top: 3px; bottom: 3px; width: 2px; left: 50%; margin-left: -1px; } .os-theme-round-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle { background: transparent; } .os-theme-round-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before { content: ''; display: block; position: absolute; background: #fff; border-radius: 100%; top: 3px; bottom: 3px; left: 3px; right: 3px; transform: scale(1); } .os-theme-round-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:hover:before, .os-theme-round-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active:before { transform: scale(1.3); } .os-theme-round-light > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle { height: 100%; min-width: 20px; max-width: 20px; } .os-theme-round-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle { width: 100%; min-height: 20px; max-height: 20px; } .os-theme-round-light.os-host-transition > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before { transition: transform 0.3s; } /* os-theme-minimal-dark */ .os-theme-minimal-dark > .os-scrollbar { padding: 0px; } .os-theme-minimal-dark > .os-scrollbar-horizontal { right: 16px; height: 16px; } .os-theme-minimal-dark > .os-scrollbar-vertical { bottom: 16px; width: 16px; } .os-theme-minimal-dark.os-host-rtl > .os-scrollbar-horizontal { left: 16px; right: 0; } .os-theme-minimal-dark > .os-scrollbar-corner { height: 16px; width: 16px; background-color: transparent; } .os-theme-minimal-dark > .os-scrollbar > .os-scrollbar-track, .os-theme-minimal-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle { background: transparent; } .os-theme-minimal-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before { content: ''; display: block; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: #000; opacity: 0.48; } .os-theme-minimal-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:hover:before { opacity: 0.68; } .os-theme-minimal-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active:before { opacity: 0.7; } .os-theme-minimal-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle { min-width: 15px; } .os-theme-minimal-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle { min-height: 15px; } .os-theme-minimal-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:before { height: 6px; bottom: 0; top: auto; } .os-theme-minimal-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before { width: 6px; right: 0; left: auto; } .os-theme-minimal-dark.os-host-rtl > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before { left: 0; right: auto; } .os-theme-minimal-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:hover:before, .os-theme-minimal-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle.active:before { height: 100%; } .os-theme-minimal-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:hover:before, .os-theme-minimal-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle.active:before { width: 100%; } .os-theme-minimal-dark.os-host-transition > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:before { transition: opacity 0.3s, height 0.3s; } .os-theme-minimal-dark.os-host-transition > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before { transition: opacity 0.3s, width 0.3s; } /* os-theme-minimal-light */ .os-theme-minimal-light > .os-scrollbar { padding: 0px; } .os-theme-minimal-light > .os-scrollbar-horizontal { right: 16px; height: 16px; } .os-theme-minimal-light > .os-scrollbar-vertical { bottom: 16px; width: 16px; } .os-theme-minimal-light.os-host-rtl > .os-scrollbar-horizontal { left: 16px; right: 0; } .os-theme-minimal-light > .os-scrollbar-corner { height: 16px; width: 16px; background-color: transparent; } .os-theme-minimal-light > .os-scrollbar > .os-scrollbar-track, .os-theme-minimal-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle { background: transparent; } .os-theme-minimal-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before { content: ''; display: block; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: #fff; opacity: 0.48; } .os-theme-minimal-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:hover:before { opacity: 0.68; } .os-theme-minimal-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active:before { opacity: 0.7; } .os-theme-minimal-light > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle { min-width: 15px; } .os-theme-minimal-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle { min-height: 15px; } .os-theme-minimal-light > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:before { height: 6px; bottom: 0; top: auto; } .os-theme-minimal-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before { width: 6px; right: 0; left: auto; } .os-theme-minimal-light.os-host-rtl > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before { left: 0; right: auto; } .os-theme-minimal-light > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:hover:before, .os-theme-minimal-light > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle.active:before { height: 100%; } .os-theme-minimal-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:hover:before, .os-theme-minimal-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle.active:before { width: 100%; } .os-theme-minimal-light.os-host-transition > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:before { transition: opacity 0.3s, height 0.3s; } .os-theme-minimal-light.os-host-transition > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before { transition: opacity 0.3s, width 0.3s; } /* os-theme-thin-dark */ .os-theme-thin-dark > .os-scrollbar-horizontal { right: 14px; height: 14px; padding: 0px 6px; } .os-theme-thin-dark > .os-scrollbar-vertical { bottom: 14px; width: 14px; padding: 6px 0px; } .os-theme-thin-dark.os-host-rtl > .os-scrollbar-horizontal { left: 14px; right: 0; } .os-theme-thin-dark > .os-scrollbar-corner { height: 14px; width: 14px; background-color: transparent; } .os-theme-thin-dark > .os-scrollbar > .os-scrollbar-track { background: transparent; } .os-theme-thin-dark > .os-scrollbar-horizontal > .os-scrollbar-track:before, .os-theme-thin-dark > .os-scrollbar-vertical > .os-scrollbar-track:before { content: ''; display: block; position: absolute; background: rgba(0, 0, 0, 0.15); } .os-theme-thin-dark > .os-scrollbar-horizontal > .os-scrollbar-track:before, .os-theme-thin-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:before { left: 0; right: 0; height: 2px; top: 50%; margin-top: -1px; } .os-theme-thin-dark > .os-scrollbar-vertical > .os-scrollbar-track:before, .os-theme-thin-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before { top: 0; bottom: 0; width: 2px; left: 50%; margin-left: -1px; } .os-theme-thin-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before { content: ''; display: block; position: absolute; background: rgba(0, 0, 0, 0.5); border-radius: 10px; } .os-theme-thin-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:hover:before, .os-theme-thin-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle.active:before { height: 4px; margin-top: -2px; } .os-theme-thin-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:hover:before, .os-theme-thin-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle.active:before { width: 4px; margin-left: -2px; } .os-theme-thin-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:hover:before, .os-theme-thin-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:hover:before { background: rgba(0, 0, 0, 0.7); } .os-theme-thin-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle.active:before, .os-theme-thin-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle.active:before { background: #000; } .os-theme-thin-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle { height: 100%; min-width: 30px; } .os-theme-thin-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle { width: 100%; min-height: 30px; } .os-theme-thin-dark.os-host-transition > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:before { transition: height 0.3s, margin-top 0.3s, background 0.2s; } .os-theme-thin-dark.os-host-transition > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before { transition: width 0.3s, margin-left 0.3s, background 0.2s; } /* os-theme-thin-light */ .os-theme-thin-light > .os-scrollbar-horizontal { right: 14px; height: 14px; padding: 0px 6px; } .os-theme-thin-light > .os-scrollbar-vertical { bottom: 14px; width: 14px; padding: 6px 0px; } .os-theme-thin-light.os-host-rtl > .os-scrollbar-horizontal { left: 14px; right: 0; } .os-theme-thin-light > .os-scrollbar-corner { height: 14px; width: 14px; background-color: transparent; } .os-theme-thin-light > .os-scrollbar > .os-scrollbar-track { background: transparent; } .os-theme-thin-light > .os-scrollbar-horizontal > .os-scrollbar-track:before, .os-theme-thin-light > .os-scrollbar-vertical > .os-scrollbar-track:before { content: ''; display: block; position: absolute; background: rgba(255, 255, 255, 0.15); } .os-theme-thin-light > .os-scrollbar-horizontal > .os-scrollbar-track:before, .os-theme-thin-light > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:before { left: 0; right: 0; height: 2px; top: 50%; margin-top: -1px; } .os-theme-thin-light > .os-scrollbar-vertical > .os-scrollbar-track:before, .os-theme-thin-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before { top: 0; bottom: 0; width: 2px; left: 50%; margin-left: -1px; } .os-theme-thin-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before { content: ''; display: block; position: absolute; background: rgba(255, 255, 255, 0.5); border-radius: 10px; } .os-theme-thin-light > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:hover:before, .os-theme-thin-light > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle.active:before { height: 4px; margin-top: -2px; } .os-theme-thin-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:hover:before, .os-theme-thin-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle.active:before { width: 4px; margin-left: -2px; } .os-theme-thin-light > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:hover:before, .os-theme-thin-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:hover:before { background: rgba(255, 255, 255, 0.7); } .os-theme-thin-light > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle.active:before, .os-theme-thin-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle.active:before { background: #fff; } .os-theme-thin-light > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle { height: 100%; min-width: 30px; } .os-theme-thin-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle { width: 100%; min-height: 30px; } .os-theme-thin-light.os-host-transition > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:before { transition: height 0.3s, margin-top 0.3s, background 0.2s; } .os-theme-thin-light.os-host-transition > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before { transition: width 0.3s, margin-left 0.3s, background 0.2s; } /* os-theme-thick-dark */ .os-theme-thick-dark > .os-scrollbar { padding: 5px; } .os-theme-thick-dark > .os-scrollbar:before { content: ''; display: block; position: absolute; background: rgba(0, 0, 0, 0.05); border-radius: 15px; top: 2px; bottom: 2px; right: 2px; left: 2px; border: 1px solid rgba(0, 0, 0, 0.08); } .os-theme-thick-dark > .os-scrollbar:hover:before { border: 1px solid rgba(0, 0, 0, 0.16); } .os-theme-thick-dark > .os-scrollbar.active:before { border: 1px solid rgba(0, 0, 0, 0.24); } .os-theme-thick-dark > .os-scrollbar-horizontal { right: 18px; height: 18px; } .os-theme-thick-dark > .os-scrollbar-vertical { bottom: 18px; width: 18px; } .os-theme-thick-dark.os-host-rtl > .os-scrollbar-horizontal { left: 18px; right: 0; } .os-theme-thick-dark > .os-scrollbar-corner { height: 18px; width: 18px; background-color: transparent; } .os-theme-thick-dark > .os-scrollbar > .os-scrollbar-track { background: transparent; } .os-theme-thick-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle { background: rgba(0, 0, 0, 0.4); border-radius: 15px; } .os-theme-thick-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:hover { background: rgba(0, 0, 0, 0.6); } .os-theme-thick-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active { background: rgba(0, 0, 0, 0.8); } .os-theme-thick-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle { min-width: 30px; } .os-theme-thick-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle { min-height: 30px; } .os-theme-thick-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before { content: ''; position: absolute; left: 0; right: 0; top: -3px; bottom: -5px; display: block; } .os-theme-thick-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:before { top: -3px; bottom: -5px; } .os-theme-thick-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before { left: -3px; right: -5px; } .os-theme-thick-dark.os-host-rtl > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before { right: -3px; left: -5px; } .os-theme-thick-dark.os-host-transition > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle { transition: background 0.3s; } .os-theme-thick-dark.os-host-transition > .os-scrollbar:before { transition: border 0.3s; } /* os-theme-thick-light */ .os-theme-thick-light > .os-scrollbar { padding: 5px; } .os-theme-thick-light > .os-scrollbar:before { content: ''; display: block; position: absolute; background: rgba(255, 255, 255, 0.04); border-radius: 15px; top: 2px; bottom: 2px; right: 2px; left: 2px; border: 1px solid rgba(255, 255, 255, 0.1); } .os-theme-thick-light > .os-scrollbar:hover:before { border: 1px solid rgba(255, 255, 255, 0.2); } .os-theme-thick-light > .os-scrollbar.active:before { border: 1px solid rgba(255, 255, 255, 0.3); } .os-theme-thick-light > .os-scrollbar-horizontal { right: 18px; height: 18px; } .os-theme-thick-light > .os-scrollbar-vertical { bottom: 18px; width: 18px; } .os-theme-thick-light.os-host-rtl > .os-scrollbar-horizontal { left: 18px; right: 0; } .os-theme-thick-light > .os-scrollbar-corner { height: 18px; width: 18px; background-color: transparent; } .os-theme-thick-light > .os-scrollbar > .os-scrollbar-track { background: transparent; } .os-theme-thick-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle { background: rgba(255, 255, 255, 0.4); border-radius: 15px; } .os-theme-thick-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:hover { background: rgba(255, 255, 255, 0.6); } .os-theme-thick-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active { background: rgba(255, 255, 255, 0.8); } .os-theme-thick-light > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle { min-width: 30px; } .os-theme-thick-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle { min-height: 30px; } .os-theme-thick-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before { content: ''; position: absolute; left: 0; right: 0; top: -3px; bottom: -5px; display: block; } .os-theme-thick-light > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle:before { top: -3px; bottom: -5px; } .os-theme-thick-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before { left: -3px; right: -5px; } .os-theme-thick-light.os-host-rtl > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle:before { right: -3px; left: -5px; } .os-theme-thick-light.os-host-transition > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle { transition: background 0.3s; } .os-theme-thick-light.os-host-transition > .os-scrollbar:before { transition: border 0.3s; } /* os-theme-block-dark */ .os-theme-block-dark > .os-scrollbar { padding: 0; } .os-theme-block-dark > .os-scrollbar-horizontal { right: 16px; height: 16px; } .os-theme-block-dark > .os-scrollbar-vertical { bottom: 16px; width: 16px; } .os-theme-block-dark.os-host-rtl > .os-scrollbar-horizontal { left: 16px; right: 0; } .os-theme-block-dark > .os-scrollbar-corner { height: 16px; width: 16px; background-color: transparent; } .os-theme-block-dark > .os-scrollbar > .os-scrollbar-track { background: transparent; } .os-theme-block-dark > .os-scrollbar-horizontal > .os-scrollbar-track:before, .os-theme-block-dark > .os-scrollbar-vertical > .os-scrollbar-track:before { content: ''; display: block; position: absolute; background: rgba(0, 0, 0, 0.15); } .os-theme-block-dark > .os-scrollbar-horizontal > .os-scrollbar-track:before { left: 4px; right: 4px; height: 2px; top: 50%; margin-top: -1px; } .os-theme-block-dark > .os-scrollbar-vertical > .os-scrollbar-track:before { top: 4px; bottom: 4px; width: 2px; left: 50%; margin-left: -1px; } .os-theme-block-dark > .os-scrollbar-horizontal:hover > .os-scrollbar-track:before, .os-theme-block-dark > .os-scrollbar-horizontal.active > .os-scrollbar-track:before { left: 0; right: 0; height: 100%; top: 0; margin-top: 0; } .os-theme-block-dark > .os-scrollbar-vertical:hover > .os-scrollbar-track:before, .os-theme-block-dark > .os-scrollbar-vertical.active > .os-scrollbar-track:before { top: 0; bottom: 0; width: 100%; left: 0; margin-left: 0; } .os-theme-block-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle { background: transparent; } .os-theme-block-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle { min-width: 100px; max-width: 100px; } .os-theme-block-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle { min-height: 100px; max-height: 100px; } .os-theme-block-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before { content: ''; display: block; position: absolute; top: 4px; bottom: 4px; left: 4px; right: 4px; background: #6e6e6e; } .os-theme-block-dark.os-host-scrolling > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before { background: #454545; } .os-theme-block-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:hover:before, .os-theme-block-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active:before { background: #000; } .os-theme-block-dark > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle { height: 100%; min-width: 16px; } .os-theme-block-dark > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle { width: 100%; min-height: 16px; } .os-theme-block-dark.os-host-transition > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before { transition: background 0.3s; } .os-theme-block-dark.os-host-transition > .os-scrollbar > .os-scrollbar-track:before { transition: margin 0.3s, height 0.3s, width 0.3s, top 0.3s, right 0.3s, bottom 0.3s, left 0.3s; } /* os-theme-block-light */ .os-theme-block-light > .os-scrollbar { padding: 0; } .os-theme-block-light > .os-scrollbar-horizontal { right: 16px; height: 16px; } .os-theme-block-light > .os-scrollbar-vertical { bottom: 16px; width: 16px; } .os-theme-block-light.os-host-rtl > .os-scrollbar-horizontal { left: 16px; right: 0; } .os-theme-block-light > .os-scrollbar-corner { height: 16px; width: 16px; background-color: transparent; } .os-theme-block-light > .os-scrollbar > .os-scrollbar-track { background: transparent; } .os-theme-block-light > .os-scrollbar-horizontal > .os-scrollbar-track:before, .os-theme-block-light > .os-scrollbar-vertical > .os-scrollbar-track:before { content: ''; display: block; position: absolute; background: rgba(255, 255, 255, 0.15); } .os-theme-block-light > .os-scrollbar-horizontal > .os-scrollbar-track:before { left: 4px; right: 4px; height: 2px; top: 50%; margin-top: -1px; } .os-theme-block-light > .os-scrollbar-vertical > .os-scrollbar-track:before { top: 4px; bottom: 4px; width: 2px; left: 50%; margin-left: -1px; } .os-theme-block-light > .os-scrollbar-horizontal:hover > .os-scrollbar-track:before, .os-theme-block-light > .os-scrollbar-horizontal.active > .os-scrollbar-track:before { left: 0; right: 0; height: 100%; top: 0; margin-top: 0; } .os-theme-block-light > .os-scrollbar-vertical:hover > .os-scrollbar-track:before, .os-theme-block-light > .os-scrollbar-vertical.active > .os-scrollbar-track:before { top: 0; bottom: 0; width: 100%; left: 0; margin-left: 0; } .os-theme-block-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle { background: transparent; } .os-theme-block-light > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle { min-width: 100px; max-width: 100px; } .os-theme-block-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle { min-height: 100px; max-height: 100px; } .os-theme-block-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before { content: ''; display: block; position: absolute; top: 4px; bottom: 4px; left: 4px; right: 4px; background: #afafaf; } .os-theme-block-light.os-host-scrolling > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before { background: #cecece; } .os-theme-block-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:hover:before, .os-theme-block-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active:before { background: #fff; } .os-theme-block-light > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle { height: 100%; min-width: 16px; } .os-theme-block-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle { width: 100%; min-height: 16px; } .os-theme-block-light.os-host-transition > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle:before { transition: background 0.3s; } .os-theme-block-light.os-host-transition > .os-scrollbar > .os-scrollbar-track:before { transition: margin 0.3s, height 0.3s, width 0.3s, top 0.3s, right 0.3s, bottom 0.3s, left 0.3s; }