mirror of
https://github.com/blakeblackshear/frigate.git
synced 2024-11-21 19:07:46 +01:00
7bec162353
* add scrubber and ui playground when running dev * fix mobile dropdown menu width * timeline scrubber and revamp for all event handlers
671 lines
20 KiB
CSS
671 lines
20 KiB
CSS
.vis-time-axis {
|
|
@apply overflow-hidden relative;
|
|
}
|
|
.vis-time-axis.vis-foreground {
|
|
@apply w-full left-0 top-0;
|
|
}
|
|
.vis-time-axis.vis-background {
|
|
@apply h-full absolute w-full left-0 top-0;
|
|
}
|
|
.vis-time-axis .vis-text {
|
|
@apply box-border text-muted-foreground overflow-hidden absolute whitespace-nowrap p-[3px];
|
|
}
|
|
.vis-time-axis .vis-text.vis-measure {
|
|
@apply absolute invisible mx-0 px-0;
|
|
}
|
|
.vis-time-axis .vis-grid.vis-vertical {
|
|
@apply absolute border-l border-dashed border-muted-foreground;
|
|
}
|
|
.vis-time-axis .vis-grid.vis-vertical-rtl {
|
|
@apply absolute border-r border-dashed border-muted-foreground;
|
|
}
|
|
.vis-time-axis .vis-grid.vis-minor {
|
|
@apply border-foreground;
|
|
}
|
|
.vis-time-axis .vis-grid.vis-major {
|
|
@apply border-muted-foreground;
|
|
}
|
|
.vis .overlay {
|
|
@apply h-full absolute w-full z-10 left-0 top-0;
|
|
}
|
|
.vis-active {
|
|
@apply shadow-[0_0_10px_#86d5f8];
|
|
}
|
|
.vis-custom-time {
|
|
@apply bg-[#6e94ff] cursor-move w-0.5 z-[1];
|
|
}
|
|
.vis-custom-time > .vis-custom-time-marker {
|
|
@apply bg-inherit text-white cursor-auto text-xs whitespace-nowrap z-[inherit] px-[5px] py-[3px] top-0;
|
|
}
|
|
.vis-current-time {
|
|
@apply bg-[#ff7f6e] pointer-events-none w-0.5 z-[1];
|
|
}
|
|
.vis-rolling-mode-btn {
|
|
@apply text-white cursor-pointer text-[28px] font-bold h-10 opacity-80 absolute text-center w-10 rounded-[50%] right-5 top-[7px] before:content-["\26F6"] hover:opacity-100;
|
|
background: #3876c2;
|
|
}
|
|
.vis-panel {
|
|
@apply box-border absolute m-0 p-0;
|
|
}
|
|
.vis-panel.vis-bottom,
|
|
.vis-panel.vis-center,
|
|
.vis-panel.vis-left,
|
|
.vis-panel.vis-right,
|
|
.vis-panel.vis-top {
|
|
@apply border;
|
|
}
|
|
.vis-panel.vis-center,
|
|
.vis-panel.vis-left,
|
|
.vis-panel.vis-right {
|
|
@apply overflow-hidden;
|
|
border-bottom-style: solid;
|
|
border-top-style: solid;
|
|
}
|
|
.vis-left.vis-panel.vis-vertical-scroll,
|
|
.vis-right.vis-panel.vis-vertical-scroll {
|
|
@apply h-full overflow-x-hidden overflow-y-scroll;
|
|
}
|
|
.vis-left.vis-panel.vis-vertical-scroll {
|
|
direction: rtl;
|
|
}
|
|
.vis-left.vis-panel.vis-vertical-scroll .vis-content,
|
|
.vis-right.vis-panel.vis-vertical-scroll {
|
|
direction: ltr;
|
|
}
|
|
.vis-right.vis-panel.vis-vertical-scroll .vis-content {
|
|
direction: rtl;
|
|
}
|
|
.vis-panel.vis-bottom,
|
|
.vis-panel.vis-center,
|
|
.vis-panel.vis-top {
|
|
border-left-style: solid;
|
|
border-right-style: solid;
|
|
}
|
|
.vis-background {
|
|
@apply overflow-hidden;
|
|
}
|
|
.vis-panel > .vis-content {
|
|
@apply relative;
|
|
}
|
|
.vis-panel .vis-shadow {
|
|
@apply shadow-[0_0_10px_rgba(0,0,0,0.8)] h-px absolute w-full;
|
|
}
|
|
.vis-panel .vis-shadow.vis-top {
|
|
@apply left-0 -top-px;
|
|
}
|
|
.vis-panel .vis-shadow.vis-bottom {
|
|
@apply left-0 -bottom-px;
|
|
}
|
|
.vis-graph-group0 {
|
|
@apply fill-[#4f81bd] stroke-[2px] stroke-[#4f81bd];
|
|
fill-opacity: 0;
|
|
}
|
|
.vis-graph-group1 {
|
|
@apply fill-[#f79646] stroke-[2px] stroke-[#f79646];
|
|
fill-opacity: 0;
|
|
}
|
|
.vis-graph-group2 {
|
|
@apply fill-[#8c51cf] stroke-[2px] stroke-[#8c51cf];
|
|
fill-opacity: 0;
|
|
}
|
|
.vis-graph-group3 {
|
|
@apply fill-[#75c841] stroke-[2px] stroke-[#75c841];
|
|
fill-opacity: 0;
|
|
}
|
|
.vis-graph-group4 {
|
|
@apply fill-[#ff0100] stroke-[2px] stroke-[#ff0100];
|
|
fill-opacity: 0;
|
|
}
|
|
.vis-graph-group5 {
|
|
@apply fill-[#37d8e6] stroke-[2px] stroke-[#37d8e6];
|
|
fill-opacity: 0;
|
|
}
|
|
.vis-graph-group6 {
|
|
@apply fill-[#042662] stroke-[2px] stroke-[#042662];
|
|
fill-opacity: 0;
|
|
}
|
|
.vis-graph-group7 {
|
|
@apply fill-[#00ff26] stroke-[2px] stroke-[#00ff26];
|
|
fill-opacity: 0;
|
|
}
|
|
.vis-graph-group8 {
|
|
@apply fill-[#f0f] stroke-[2px] stroke-[#f0f];
|
|
fill-opacity: 0;
|
|
}
|
|
.vis-graph-group9 {
|
|
@apply fill-[#8f3938] stroke-[2px] stroke-[#8f3938];
|
|
fill-opacity: 0;
|
|
}
|
|
.vis-timeline .vis-fill {
|
|
@apply stroke-none;
|
|
fill-opacity: 0.1;
|
|
}
|
|
.vis-timeline .vis-bar {
|
|
@apply stroke-[1px];
|
|
fill-opacity: 0.5;
|
|
}
|
|
.vis-timeline .vis-point {
|
|
@apply stroke-[2px];
|
|
fill-opacity: 1;
|
|
}
|
|
.vis-timeline .vis-legend-background {
|
|
@apply stroke-[1px] fill-white stroke-[#c2c2c2];
|
|
fill-opacity: 0.9;
|
|
}
|
|
.vis-timeline .vis-outline {
|
|
@apply stroke-[1px] fill-white stroke-neutral-200;
|
|
fill-opacity: 1;
|
|
}
|
|
.vis-timeline .vis-icon-fill {
|
|
@apply stroke-none;
|
|
fill-opacity: 0.3;
|
|
}
|
|
.vis-timeline {
|
|
@apply border box-border overflow-hidden relative m-0 p-0 border-solid border-[#bfbfbf];
|
|
}
|
|
.vis-loading-screen {
|
|
@apply h-full absolute w-full left-0 top-0;
|
|
}
|
|
.vis [class*="span"] {
|
|
@apply min-h-0 w-auto;
|
|
}
|
|
.vis-item {
|
|
@apply bg-accent border text-foreground inline-block absolute z-[1] border-border;
|
|
}
|
|
.vis-item.vis-selected {
|
|
@apply bg-muted-foreground z-[2] border-muted text-muted;
|
|
}
|
|
.vis-editable.vis-selected {
|
|
@apply cursor-move;
|
|
}
|
|
.vis-item.vis-point.vis-selected {
|
|
@apply bg-muted-foreground;
|
|
}
|
|
.vis-item.vis-box {
|
|
@apply text-center rounded-sm border-solid;
|
|
}
|
|
.vis-item.vis-point {
|
|
background: none;
|
|
}
|
|
.vis-item.vis-dot {
|
|
@apply rounded absolute p-0 border-solid border-4;
|
|
}
|
|
.vis-item.vis-range {
|
|
@apply box-border rounded-sm border-solid;
|
|
}
|
|
.vis-item.vis-background {
|
|
@apply bg-[rgba(213,221,246,0.4)] box-border m-0 p-0 border-[none];
|
|
}
|
|
.vis-item .vis-item-overflow {
|
|
@apply h-full overflow-hidden relative w-full m-0 p-0;
|
|
}
|
|
.vis-item-visible-frame {
|
|
@apply whitespace-nowrap;
|
|
}
|
|
.vis-item.vis-range .vis-item-content {
|
|
@apply inline-block relative;
|
|
}
|
|
.vis-item.vis-background .vis-item-content {
|
|
@apply inline-block absolute;
|
|
}
|
|
.vis-item.vis-line {
|
|
@apply absolute w-0 p-0 border-l border-solid text-muted;
|
|
}
|
|
.vis-item .vis-item-content {
|
|
@apply box-border whitespace-nowrap p-[5px];
|
|
}
|
|
.vis-item .vis-onUpdateTime-tooltip {
|
|
@apply text-white absolute text-center transition-[0.4s] whitespace-nowrap w-[200px] p-[5px] rounded-[1px];
|
|
background: #4f81bd;
|
|
-o-transition: 0.4s;
|
|
-moz-transition: 0.4s;
|
|
-webkit-transition: 0.4s;
|
|
}
|
|
.vis-item .vis-delete,
|
|
.vis-item .vis-delete-rtl {
|
|
@apply box-border cursor-pointer h-6 absolute transition-[background] duration-200 ease-linear w-6 px-[5px] py-0 top-0;
|
|
-webkit-transition: background 0.2s linear;
|
|
-moz-transition: background 0.2s linear;
|
|
-ms-transition: background 0.2s linear;
|
|
-o-transition: background 0.2s linear;
|
|
}
|
|
.vis-item .vis-delete {
|
|
@apply -right-6;
|
|
}
|
|
.vis-item .vis-delete-rtl {
|
|
@apply -left-6;
|
|
}
|
|
.vis-item .vis-delete-rtl:after,
|
|
.vis-item .vis-delete:after {
|
|
@apply text-[red] content-["\00D7"] text-[22px] font-bold transition-[color] duration-200 ease-linear;
|
|
font-family: arial, sans-serif;
|
|
-webkit-transition: color 0.2s linear;
|
|
-moz-transition: color 0.2s linear;
|
|
-ms-transition: color 0.2s linear;
|
|
-o-transition: color 0.2s linear;
|
|
}
|
|
.vis-item .vis-delete-rtl:hover,
|
|
.vis-item .vis-delete:hover {
|
|
background: red;
|
|
}
|
|
.vis-item .vis-delete-rtl:hover:after,
|
|
.vis-item .vis-delete:hover:after {
|
|
@apply text-white;
|
|
}
|
|
.vis-item .vis-drag-center {
|
|
@apply cursor-move h-full absolute w-full left-0 top-0;
|
|
}
|
|
.vis-item.vis-range .vis-drag-left {
|
|
@apply cursor-w-resize -left-1;
|
|
}
|
|
.vis-item.vis-range .vis-drag-left,
|
|
.vis-item.vis-range .vis-drag-right {
|
|
@apply h-full max-w-[20%] min-w-[2px] absolute w-6 top-0;
|
|
}
|
|
.vis-item.vis-range .vis-drag-right {
|
|
@apply cursor-e-resize -right-1;
|
|
}
|
|
.vis-range.vis-item.vis-readonly .vis-drag-left,
|
|
.vis-range.vis-item.vis-readonly .vis-drag-right {
|
|
@apply cursor-auto;
|
|
}
|
|
.vis-item.vis-cluster {
|
|
@apply text-center rounded-sm border-solid;
|
|
vertical-align: center;
|
|
}
|
|
.vis-item.vis-cluster-line {
|
|
@apply absolute w-0 p-0 border-l;
|
|
border-left-style: solid;
|
|
}
|
|
.vis-item.vis-cluster-dot {
|
|
@apply rounded absolute p-0 border-solid border-4;
|
|
}
|
|
div.vis-tooltip {
|
|
@apply bg-[#f5f4ed] border shadow-[3px_3px_10px_rgba(0,0,0,0.2)] text-black text-sm pointer-events-none absolute invisible whitespace-nowrap z-[5] p-[5px] rounded-[3px] border-solid border-[#808074];
|
|
-moz-border-radius: 3px;
|
|
-webkit-border-radius: 3px;
|
|
font-family: verdana;
|
|
}
|
|
.vis-itemset {
|
|
@apply box-border relative m-0 p-0;
|
|
}
|
|
.vis-itemset .vis-background,
|
|
.vis-itemset .vis-foreground {
|
|
@apply h-full overflow-visible absolute w-full;
|
|
}
|
|
.vis-axis {
|
|
@apply h-0 absolute w-full z-[1] left-0;
|
|
}
|
|
.vis-foreground .vis-group {
|
|
@apply box-border relative border-b-[#bfbfbf] border-b border-solid last:border-b-[none];
|
|
}
|
|
.vis-nesting-group {
|
|
@apply cursor-pointer;
|
|
}
|
|
.vis-label.vis-nested-group.vis-group-level-unknown-but-gte1 {
|
|
background: #f5f5f5;
|
|
}
|
|
.vis-label.vis-nested-group.vis-group-level-0 {
|
|
@apply bg-white;
|
|
}
|
|
.vis-ltr .vis-label.vis-nested-group.vis-group-level-0 .vis-inner {
|
|
@apply pl-0;
|
|
}
|
|
.vis-rtl .vis-label.vis-nested-group.vis-group-level-0 .vis-inner {
|
|
@apply pr-0;
|
|
}
|
|
.vis-label.vis-nested-group.vis-group-level-1 {
|
|
@apply bg-[rgba(0,0,0,0.05)];
|
|
}
|
|
.vis-ltr .vis-label.vis-nested-group.vis-group-level-1 .vis-inner {
|
|
@apply pl-[15px];
|
|
}
|
|
.vis-rtl .vis-label.vis-nested-group.vis-group-level-1 .vis-inner {
|
|
@apply pr-[15px];
|
|
}
|
|
.vis-label.vis-nested-group.vis-group-level-2 {
|
|
@apply bg-[rgba(0,0,0,0.1)];
|
|
}
|
|
.vis-ltr .vis-label.vis-nested-group.vis-group-level-2 .vis-inner {
|
|
@apply pl-[30px];
|
|
}
|
|
.vis-rtl .vis-label.vis-nested-group.vis-group-level-2 .vis-inner {
|
|
@apply pr-[30px];
|
|
}
|
|
.vis-label.vis-nested-group.vis-group-level-3 {
|
|
@apply bg-[rgba(0,0,0,0.15)];
|
|
}
|
|
.vis-ltr .vis-label.vis-nested-group.vis-group-level-3 .vis-inner {
|
|
@apply pl-[45px];
|
|
}
|
|
.vis-rtl .vis-label.vis-nested-group.vis-group-level-3 .vis-inner {
|
|
@apply pr-[45px];
|
|
}
|
|
.vis-label.vis-nested-group.vis-group-level-4 {
|
|
@apply bg-[rgba(0,0,0,0.2)];
|
|
}
|
|
.vis-ltr .vis-label.vis-nested-group.vis-group-level-4 .vis-inner {
|
|
@apply pl-[60px];
|
|
}
|
|
.vis-rtl .vis-label.vis-nested-group.vis-group-level-4 .vis-inner {
|
|
@apply pr-[60px];
|
|
}
|
|
.vis-label.vis-nested-group.vis-group-level-5 {
|
|
@apply bg-[rgba(0,0,0,0.25)];
|
|
}
|
|
.vis-ltr .vis-label.vis-nested-group.vis-group-level-5 .vis-inner {
|
|
@apply pl-[75px];
|
|
}
|
|
.vis-rtl .vis-label.vis-nested-group.vis-group-level-5 .vis-inner {
|
|
@apply pr-[75px];
|
|
}
|
|
.vis-label.vis-nested-group.vis-group-level-6 {
|
|
@apply bg-[rgba(0,0,0,0.3)];
|
|
}
|
|
.vis-ltr .vis-label.vis-nested-group.vis-group-level-6 .vis-inner {
|
|
@apply pl-[90px];
|
|
}
|
|
.vis-rtl .vis-label.vis-nested-group.vis-group-level-6 .vis-inner {
|
|
@apply pr-[90px];
|
|
}
|
|
.vis-label.vis-nested-group.vis-group-level-7 {
|
|
@apply bg-[rgba(0,0,0,0.35)];
|
|
}
|
|
.vis-ltr .vis-label.vis-nested-group.vis-group-level-7 .vis-inner {
|
|
@apply pl-[105px];
|
|
}
|
|
.vis-rtl .vis-label.vis-nested-group.vis-group-level-7 .vis-inner {
|
|
@apply pr-[105px];
|
|
}
|
|
.vis-label.vis-nested-group.vis-group-level-8 {
|
|
@apply bg-[rgba(0,0,0,0.4)];
|
|
}
|
|
.vis-ltr .vis-label.vis-nested-group.vis-group-level-8 .vis-inner {
|
|
@apply pl-[120px];
|
|
}
|
|
.vis-rtl .vis-label.vis-nested-group.vis-group-level-8 .vis-inner {
|
|
@apply pr-[120px];
|
|
}
|
|
.vis-label.vis-nested-group.vis-group-level-9 {
|
|
@apply bg-[rgba(0,0,0,0.45)];
|
|
}
|
|
.vis-ltr .vis-label.vis-nested-group.vis-group-level-9 .vis-inner {
|
|
@apply pl-[135px];
|
|
}
|
|
.vis-rtl .vis-label.vis-nested-group.vis-group-level-9 .vis-inner {
|
|
@apply pr-[135px];
|
|
}
|
|
.vis-label.vis-nested-group {
|
|
@apply bg-[rgba(0,0,0,0.5)];
|
|
}
|
|
.vis-ltr .vis-label.vis-nested-group .vis-inner {
|
|
@apply pl-[150px];
|
|
}
|
|
.vis-rtl .vis-label.vis-nested-group .vis-inner {
|
|
@apply pr-[150px];
|
|
}
|
|
.vis-group-level-unknown-but-gte1 {
|
|
@apply border border-solid border-[red];
|
|
}
|
|
.vis-label.vis-nesting-group:before {
|
|
@apply inline-block w-[15px];
|
|
}
|
|
.vis-label.vis-nesting-group.expanded:before {
|
|
@apply content-["\25BC"];
|
|
}
|
|
.vis-label.vis-nesting-group.collapsed:before {
|
|
@apply content-["\25B6"];
|
|
}
|
|
.vis-rtl .vis-label.vis-nesting-group.collapsed:before {
|
|
@apply content-["\25C0"];
|
|
}
|
|
.vis-ltr .vis-label:not(.vis-nesting-group):not(.vis-group-level-0) {
|
|
@apply pl-[15px];
|
|
}
|
|
.vis-rtl .vis-label:not(.vis-nesting-group):not(.vis-group-level-0) {
|
|
@apply pr-[15px];
|
|
}
|
|
.vis-overlay {
|
|
@apply h-full absolute w-full z-10 left-0 top-0;
|
|
}
|
|
.vis-labelset {
|
|
@apply overflow-hidden;
|
|
}
|
|
.vis-labelset,
|
|
.vis-labelset .vis-label {
|
|
@apply box-border relative;
|
|
}
|
|
.vis-labelset .vis-label {
|
|
@apply text-[#4d4d4d] w-full border-b-[#bfbfbf] border-b border-solid left-0 top-0 last:border-b-[none];
|
|
}
|
|
.vis-labelset .vis-label.draggable {
|
|
@apply cursor-pointer;
|
|
}
|
|
.vis-group-is-dragging {
|
|
background: rgba(0, 0, 0, 0.1);
|
|
}
|
|
.vis-labelset .vis-label .vis-inner {
|
|
@apply inline-block p-[5px];
|
|
}
|
|
.vis-labelset .vis-label .vis-inner.vis-hidden {
|
|
@apply p-0;
|
|
}
|
|
div.vis-configuration {
|
|
@apply block float-left text-xs relative;
|
|
}
|
|
div.vis-configuration-wrapper {
|
|
@apply block w-[700px] after:clear-both after:content-[""] after:block;
|
|
}
|
|
div.vis-configuration.vis-config-option-container {
|
|
@apply bg-white rounded block w-[495px] mt-5 pl-[5px] border-2 border-solid border-[#f7f8fa] left-2.5;
|
|
}
|
|
div.vis-configuration.vis-config-button {
|
|
@apply bg-[#f7f8fa] rounded cursor-pointer block h-[25px] leading-[25px] align-middle w-[495px] mt-5 mb-[30px] pl-[5px] border-2 border-solid border-[#ceced0] left-2.5;
|
|
}
|
|
div.vis-configuration.vis-config-button.hover {
|
|
@apply bg-[#4588e6] text-white border-2 border-solid border-[#214373];
|
|
}
|
|
div.vis-configuration.vis-config-item {
|
|
@apply block float-left h-[25px] leading-[25px] align-middle w-[495px];
|
|
}
|
|
div.vis-configuration.vis-config-item.vis-config-s2 {
|
|
@apply bg-[#f7f8fa] pl-[5px] rounded-[3px] left-2.5;
|
|
}
|
|
div.vis-configuration.vis-config-item.vis-config-s3 {
|
|
@apply bg-[#e4e9f0] pl-[5px] rounded-[3px] left-5;
|
|
}
|
|
div.vis-configuration.vis-config-item.vis-config-s4 {
|
|
@apply bg-[#cfd8e6] pl-[5px] rounded-[3px] left-[30px];
|
|
}
|
|
div.vis-configuration.vis-config-header {
|
|
@apply text-lg font-bold;
|
|
}
|
|
div.vis-configuration.vis-config-label {
|
|
@apply h-[25px] leading-[25px] w-[120px];
|
|
}
|
|
div.vis-configuration.vis-config-label.vis-config-s3 {
|
|
@apply w-[110px];
|
|
}
|
|
div.vis-configuration.vis-config-label.vis-config-s4 {
|
|
@apply w-[100px];
|
|
}
|
|
div.vis-configuration.vis-config-colorBlock {
|
|
@apply border cursor-pointer h-[19px] w-[30px] m-0 p-0 rounded-sm border-solid border-[#444] top-px;
|
|
}
|
|
input.vis-configuration.vis-config-checkbox {
|
|
@apply left-[-5px];
|
|
}
|
|
input.vis-configuration.vis-config-rangeinput {
|
|
@apply pointer-events-none relative top-[-5px] w-[60px] m-0 p-px;
|
|
}
|
|
input.vis-configuration.vis-config-range {
|
|
@apply bg-transparent h-5 w-[300px] border-0 border-solid border-white;
|
|
-webkit-appearance: none;
|
|
}
|
|
input.vis-configuration.vis-config-range::-webkit-slider-runnable-track {
|
|
@apply border shadow-[0_0_3px_0_#aaa] h-[5px] w-[300px] rounded-[3px] border-solid border-[#999];
|
|
background: #dedede;
|
|
background: -moz-linear-gradient(top, #dedede 0, #c8c8c8 99%);
|
|
background: -webkit-gradient(
|
|
linear,
|
|
left top,
|
|
left bottom,
|
|
color-stop(0, #dedede),
|
|
color-stop(99%, #c8c8c8)
|
|
);
|
|
background: -webkit-linear-gradient(top, #dedede, #c8c8c8 99%);
|
|
background: -o-linear-gradient(top, #dedede 0, #c8c8c8 99%);
|
|
background: -ms-linear-gradient(top, #dedede 0, #c8c8c8 99%);
|
|
background: linear-gradient(180deg, #dedede 0, #c8c8c8 99%);
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#dedede",endColorstr="#c8c8c8",GradientType=0);
|
|
}
|
|
input.vis-configuration.vis-config-range::-webkit-slider-thumb {
|
|
@apply border shadow-[0_0_1px_0_#111927] h-[17px] mt-[-7px] w-[17px] rounded-[50%] border-solid border-[#14334b];
|
|
-webkit-appearance: none;
|
|
background: #3876c2;
|
|
background: -moz-linear-gradient(top, #3876c2 0, #385380 100%);
|
|
background: -webkit-gradient(
|
|
linear,
|
|
left top,
|
|
left bottom,
|
|
color-stop(0, #3876c2),
|
|
color-stop(100%, #385380)
|
|
);
|
|
background: -webkit-linear-gradient(top, #3876c2, #385380);
|
|
background: -o-linear-gradient(top, #3876c2 0, #385380 100%);
|
|
background: -ms-linear-gradient(top, #3876c2 0, #385380 100%);
|
|
background: linear-gradient(180deg, #3876c2 0, #385380);
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3876c2",endColorstr="#385380",GradientType=0);
|
|
}
|
|
input.vis-configuration.vis-config-range:focus {
|
|
outline: none;
|
|
}
|
|
input.vis-configuration.vis-config-range:focus::-webkit-slider-runnable-track {
|
|
background: #9d9d9d;
|
|
background: -moz-linear-gradient(top, #9d9d9d 0, #c8c8c8 99%);
|
|
background: -webkit-gradient(
|
|
linear,
|
|
left top,
|
|
left bottom,
|
|
color-stop(0, #9d9d9d),
|
|
color-stop(99%, #c8c8c8)
|
|
);
|
|
background: -webkit-linear-gradient(top, #9d9d9d, #c8c8c8 99%);
|
|
background: -o-linear-gradient(top, #9d9d9d 0, #c8c8c8 99%);
|
|
background: -ms-linear-gradient(top, #9d9d9d 0, #c8c8c8 99%);
|
|
background: linear-gradient(180deg, #9d9d9d 0, #c8c8c8 99%);
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#9d9d9d",endColorstr="#c8c8c8",GradientType=0);
|
|
}
|
|
input.vis-configuration.vis-config-range::-moz-range-track {
|
|
@apply border shadow-[0_0_3px_0_#aaa] h-2.5 w-[300px] rounded-[3px] border-solid border-[#999];
|
|
background: #dedede;
|
|
background: -moz-linear-gradient(top, #dedede 0, #c8c8c8 99%);
|
|
background: -webkit-gradient(
|
|
linear,
|
|
left top,
|
|
left bottom,
|
|
color-stop(0, #dedede),
|
|
color-stop(99%, #c8c8c8)
|
|
);
|
|
background: -webkit-linear-gradient(top, #dedede, #c8c8c8 99%);
|
|
background: -o-linear-gradient(top, #dedede 0, #c8c8c8 99%);
|
|
background: -ms-linear-gradient(top, #dedede 0, #c8c8c8 99%);
|
|
background: linear-gradient(180deg, #dedede 0, #c8c8c8 99%);
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#dedede",endColorstr="#c8c8c8",GradientType=0);
|
|
}
|
|
input.vis-configuration.vis-config-range::-moz-range-thumb {
|
|
@apply h-4 w-4 rounded-[50%] border-[none];
|
|
background: #385380;
|
|
}
|
|
input.vis-configuration.vis-config-range:-moz-focusring {
|
|
@apply -outline-offset-1;
|
|
outline: 1px solid #fff;
|
|
}
|
|
input.vis-configuration.vis-config-range::-ms-track {
|
|
@apply text-transparent h-[5px] w-[300px] border-[6px_0];
|
|
background: transparent;
|
|
}
|
|
input.vis-configuration.vis-config-range::-ms-fill-lower {
|
|
@apply rounded-[10px];
|
|
background: #777;
|
|
}
|
|
input.vis-configuration.vis-config-range::-ms-fill-upper {
|
|
@apply rounded-[10px];
|
|
background: #ddd;
|
|
}
|
|
input.vis-configuration.vis-config-range::-ms-thumb {
|
|
@apply h-4 w-4 rounded-[50%] border-[none];
|
|
background: #385380;
|
|
}
|
|
input.vis-configuration.vis-config-range:focus::-ms-fill-lower {
|
|
background: #888;
|
|
}
|
|
input.vis-configuration.vis-config-range:focus::-ms-fill-upper {
|
|
background: #ccc;
|
|
}
|
|
.vis-configuration-popup {
|
|
@apply rounded text-white text-sm h-[30px] leading-[30px] absolute text-center transition-opacity duration-300 ease-in-out w-[150px] border-2 border-solid border-[#f2faff] after:-mt-2 after:border-[rgba(136,183,213,0)_rgba(136,183,213,0)_rgba(136,183,213,0)_rgba(57,76,89,0.85)] after:border-8 before:-mt-3 before:border-[rgba(194,225,245,0)_rgba(194,225,245,0)_rgba(194,225,245,0)_#f2faff] before:border-[12px];
|
|
background: rgba(57, 76, 89, 0.85);
|
|
-webkit-transition: opacity 0.3s ease-in-out;
|
|
-moz-transition: opacity 0.3s ease-in-out;
|
|
}
|
|
.vis-configuration-popup:after,
|
|
.vis-configuration-popup:before {
|
|
@apply content-["_"] h-0 pointer-events-none absolute w-0 border-[solid] left-full top-2/4;
|
|
}
|
|
.vis-panel.vis-background.vis-horizontal .vis-grid.vis-horizontal {
|
|
@apply h-0 absolute w-full border-b border-solid;
|
|
}
|
|
.vis-panel.vis-background.vis-horizontal .vis-grid.vis-minor {
|
|
@apply border-neutral-200;
|
|
}
|
|
.vis-panel.vis-background.vis-horizontal .vis-grid.vis-major {
|
|
@apply border-[#bfbfbf];
|
|
}
|
|
.vis-data-axis .vis-y-axis.vis-major {
|
|
@apply text-[#4d4d4d] absolute whitespace-nowrap w-full;
|
|
}
|
|
.vis-data-axis .vis-y-axis.vis-major.vis-measure {
|
|
@apply invisible w-auto m-0 p-0 border-0;
|
|
}
|
|
.vis-data-axis .vis-y-axis.vis-minor {
|
|
@apply text-[#bebebe] absolute whitespace-nowrap w-full;
|
|
}
|
|
.vis-data-axis .vis-y-axis.vis-minor.vis-measure {
|
|
@apply invisible w-auto m-0 p-0 border-0;
|
|
}
|
|
.vis-data-axis .vis-y-axis.vis-title {
|
|
@apply text-[#4d4d4d] absolute text-center whitespace-nowrap bottom-5;
|
|
}
|
|
.vis-data-axis .vis-y-axis.vis-title.vis-measure {
|
|
@apply invisible w-auto m-0 p-0;
|
|
}
|
|
.vis-data-axis .vis-y-axis.vis-title.vis-left {
|
|
@apply -rotate-90 origin-[left_bottom] bottom-0;
|
|
-webkit-transform: rotate(-90deg);
|
|
-moz-transform: rotate(-90deg);
|
|
-ms-transform: rotate(-90deg);
|
|
-o-transform: rotate(-90deg);
|
|
-webkit-transform-origin: left top;
|
|
-moz-transform-origin: left top;
|
|
-ms-transform-origin: left top;
|
|
-o-transform-origin: left top;
|
|
}
|
|
.vis-data-axis .vis-y-axis.vis-title.vis-right {
|
|
@apply rotate-90 origin-[right_bottom] bottom-0;
|
|
-webkit-transform: rotate(90deg);
|
|
-moz-transform: rotate(90deg);
|
|
-ms-transform: rotate(90deg);
|
|
-o-transform: rotate(90deg);
|
|
-webkit-transform-origin: right bottom;
|
|
-moz-transform-origin: right bottom;
|
|
-ms-transform-origin: right bottom;
|
|
-o-transform-origin: right bottom;
|
|
}
|
|
.vis-legend {
|
|
@apply bg-[rgba(247,252,255,0.65)] border shadow-[2px_2px_10px_hsla(0,0%,60%,0.55)] p-[5px] border-solid border-[#b3b3b3];
|
|
}
|
|
.vis-legend-text {
|
|
@apply inline-block whitespace-nowrap;
|
|
}
|