diff --git a/public/css/_icons.css b/public/css/_icons.css index f603d68319..67f2208674 100644 --- a/public/css/_icons.css +++ b/public/css/_icons.css @@ -174,6 +174,16 @@ } } +.copy { + &.bg-icon { + background-image: url("../icons/icon-copy.svg"); + } + &.mask-icon { + -webkit-mask-image: url("../icons/icon-copy.svg"); + mask-image: url("../icons/icon-copy.svg"); + } +} + .close { &.bg-icon { background-image: url("../icons/icon-close.svg"); diff --git a/public/css/ui.css b/public/css/ui.css index d5d2e5e1cd..fddfc92a5c 100644 --- a/public/css/ui.css +++ b/public/css/ui.css @@ -19,91 +19,73 @@ button { outline: none; background: none; text-align: center; - &.mask-icon, - &>.mask-icon { + & > .mask-icon { background-color: var(--color-primary); } - &.mask-icon.active, - &.active>.mask-icon, - &>.mask-icon.active { + &.active > .mask-icon, + & > .mask-icon.active { background-color: var(--color-on); } - &:hover { cursor: pointer; } - &:disabled { opacity: 0.3; - &:hover { cursor: not-allowed; } } - &.wide { width: 100%; } - &.flat { border-radius: 3px; border-bottom: 1px solid var(--color-light-secondary); padding: 0.3em; - &.active { border-bottom: 3px solid var(--color-on); } } - &.raised { border-radius: 3px; border: 1px solid var(--color-light-secondary); box-shadow: 1px 1px 2px var(--color-light-secondary); padding: 0.3em; - &.active { box-shadow: none; } } - &.active { background-color: var(--color-on); } } - .btn-column { display: grid; grid-auto-rows: minmax(min-content, 4em); padding: 0.7em; - & button, - &>div, - &>a { + & > div, + & > a { width: 2em; height: 2em; } - - & a>div, - & button>div { + & a > div, + & button > div { height: 100%; } - & button:disabled, & a:disabled { cursor: not-allowed; } } - .btn-row { display: flex; - - &>* { + & > * { margin: 10px 5px; } } - .btn-panel { width: 100%; padding: 0.3em 0.5em; @@ -111,27 +93,23 @@ button { border: 1px solid var(--color-light-secondary); border-radius: 3px; box-shadow: 1px 1px 3px var(--color-primary-light); - & .header { display: flex; justify-content: space-between; align-items: center; overflow: hidden; pointer-events: none; - & h3 { text-overflow: ellipsis; overflow: hidden; } } - & .mask-icon { width: 1.5em; height: 1.5em; -webkit-mask-position: right; mask-position: right; } - & .panel { display: block; position: absolute; @@ -149,124 +127,100 @@ button { box-shadow: 1px 1px 3px var(--color-primary-light); pointer-events: none; transition: 0.2s ease-in-out; - & .content { padding: 1em; } - &::after { content: initial; } } - &.active { background-color: var(--color-primary); color: #fff; - & .mask-icon { background-color: #fff; } - & .panel { bottom: 2em; pointer-events: auto; opacity: 1; } - &.downward .panel { bottom: -7em; } } - &.downward .panel { bottom: -15em; } } /* public/css/_drawer.css */ -.disabled>.drawer { +.disabled > .drawer { opacity: 0.4; pointer-events: none; } - .drawer { padding: 5px; background-color: var(--color-light-tertiary); - - &.expandable:not(.empty)>.header:hover { + &.expandable:not(.empty) > .header:hover { cursor: pointer; } - - &.expandable.empty>.header>.mask-icon.expander { + &.expandable.empty > .header > .mask-icon.expander { display: none; } - - &.expandable>.header>.mask-icon.expander { - -webkit-mask-image: url('data:image/svg+xml,%0A %0A'); - mask-image: url('data:image/svg+xml,%0A %0A'); + &.expandable > .header > .mask-icon.expander { + -webkit-mask-image: url('data:image/svg+xml,%0D%0A %0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A %0D%0A'); } - - &.expandable:not(.expanded)>*:not(.header) { + &.expandable:not(.expanded) > *:not(.header) { display: none; } - - &.expanded>.header>.mask-icon.expander { - -webkit-mask-image: url('data:image/svg+xml,%0A %0A'); - mask-image: url('data:image/svg+xml,%0A %0A'); + &.expanded > .header > .mask-icon.expander { + -webkit-mask-image: url('data:image/svg+xml,%0D%0A %0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A %0D%0A'); } - &.disabled { opacity: 0.4; pointer-events: none; } - - &>.header { + & > .header { display: flex; align-items: center; - - &> :not(button):not(label):not(input) { + & > :not(button):not(label):not(input) { pointer-events: none; } - - &>div, - &>button { + & > div, + & > button { margin-left: 5px; width: 1.5em; height: 1.5em; } - - &> :nth-child(1) { + & > :nth-child(1) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } - - &> :nth-child(2) { + & > :nth-child(2) { margin-left: auto; } - - &>.mask-icon { + & > .mask-icon { mask-position: right; -webkit-mask-position: right; } } - &.flat { border-radius: 2px; border: 1px solid var(--color-light-secondary); } - &.raised { border-radius: 2px; box-shadow: 1px 1px 3px var(--color-primary-light); border: 1px solid var(--color-light-secondary); } - &.raised.empty { box-shadow: none; border: none; } - &.expandable.expanded { box-shadow: none; border: none; @@ -279,32 +233,26 @@ body { font-size: 0.8em; color: var(--color-off-black); } - a { text-decoration: none; font-weight: bold; color: var(--color-primary); } - li { list-style-type: none; } - h1 { font-size: 120%; font-weight: 700; } - h2 { font-size: 110%; font-weight: 600; } - h3 { font-size: 105%; font-weight: 600; } - .bold { font-weight: bold; } @@ -314,829 +262,688 @@ h3 { background-repeat: no-repeat; background-size: contain; -webkit-background-size: contain; - &.pos-center { background-position: center; } - &.pos-right { background-position: right; } - &.pos-left { background-position: left; } } - .mask-icon { mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-size: contain; -webkit-mask-size: contain; - &.pos-center { mask-position: center; -webkit-mask-position: center; } - &.pos-right { mask-position: right; -webkit-mask-position: right; } - &.pos-left { mask-position: left; -webkit-mask-position: left; } } - .add { &.bg-icon { - background-image: url('data:image/svg+xml,%0A%0A'); + background-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A%0A'); - mask-image: url('data:image/svg+xml,%0A%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } } - .add-chart { &.bg-icon { - background-image: url('data:image/svg+xml,%0A%0A'); + background-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A%0A'); - mask-image: url('data:image/svg+xml,%0A%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } } - .add-document { &.bg-icon { - background-image: url('data:image/svg+xml,%0A%0A'); + background-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A%0A'); - mask-image: url('data:image/svg+xml,%0A%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } } - .add-photo { &.bg-icon { - background-image: url('data:image/svg+xml,%0A%0A'); + background-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A%0A'); - mask-image: url('data:image/svg+xml,%0A%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } } - .area { &.bg-icon { - background-image: url('data:image/svg+xml,%0A'); + background-image: url('data:image/svg+xml,%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A'); - mask-image: url('data:image/svg+xml,%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A'); } } - .arrow-down { &.bg-icon { - background-image: url('data:image/svg+xml,%0A %0A'); + background-image: url('data:image/svg+xml,%0D%0A %0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A %0A'); - mask-image: url('data:image/svg+xml,%0A %0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A %0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A %0D%0A'); } } - .arrow-up { &.bg-icon { - background-image: url('data:image/svg+xml,%0A %0A'); + background-image: url('data:image/svg+xml,%0D%0A %0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A %0A'); - mask-image: url('data:image/svg+xml,%0A %0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A %0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A %0D%0A'); } } - .bar-chart { &.bg-icon { - background-image: url('data:image/svg+xml,%0A%0A'); + background-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A%0A'); - mask-image: url('data:image/svg+xml,%0A%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } } - .bubble-chart { &.bg-icon { - background-image: url('data:image/svg+xml,%0A%0A%0A%0A'); + background-image: url('data:image/svg+xml,%0D%0A%0D%0A%0D%0A%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A%0A%0A%0A'); - mask-image: url('data:image/svg+xml,%0A%0A%0A%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A%0D%0A%0D%0A%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A%0D%0A%0D%0A%0D%0A'); } } - .bug-report { &.bg-icon { - background-image: url('data:image/svg+xml,%0A%0A'); + background-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A%0A'); - mask-image: url('data:image/svg+xml,%0A%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } } - .build { &.bg-icon { background-image: url('data:image/svg+xml,'); } - &.mask-icon { -webkit-mask-image: url('data:image/svg+xml,'); mask-image: url('data:image/svg+xml,'); } } - .car { &.bg-icon { - background-image: url('data:image/svg+xml,%0A'); + background-image: url('data:image/svg+xml,%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A'); - mask-image: url('data:image/svg+xml,%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A'); } } - .circle-dot { &.bg-icon { - background-image: url('data:image/svg+xml,%0A%0A'); + background-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A%0A'); - mask-image: url('data:image/svg+xml,%0A%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } } - .city { &.bg-icon { - background-image: url('data:image/svg+xml,%0A'); + background-image: url('data:image/svg+xml,%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A'); - mask-image: url('data:image/svg+xml,%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A'); + } +} +.copy { + &.bg-icon { + background-image: url('data:image/svg+xml,'); + } + &.mask-icon { + -webkit-mask-image: url('data:image/svg+xml,'); + mask-image: url('data:image/svg+xml,'); } } - .close { &.bg-icon { background-image: url('data:image/svg+xml,'); } - &.mask-icon { -webkit-mask-image: url('data:image/svg+xml,'); mask-image: url('data:image/svg+xml,'); } } - .cloud-upload { &.bg-icon { - background-image: url('data:image/svg+xml,%0A%0A'); + background-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A%0A'); - mask-image: url('data:image/svg+xml,%0A%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } } - .description { &.bg-icon { - background-image: url('data:image/svg+xml,%0A%0A'); + background-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A%0A'); - mask-image: url('data:image/svg+xml,%0A%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } } - .done { &.bg-icon { background-image: url('data:image/svg+xml,'); } - &.mask-icon { -webkit-mask-image: url('data:image/svg+xml,'); mask-image: url('data:image/svg+xml,'); } } - .donut-small { &.bg-icon { - background-image: url('data:image/svg+xml,%0A%0A'); + background-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A%0A'); - mask-image: url('data:image/svg+xml,%0A%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } } - .drop-down { &.bg-icon { - background-image: url('data:image/svg+xml,%0A%0A'); + background-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A%0A'); - mask-image: url('data:image/svg+xml,%0A%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } } - .drop-up { &.bg-icon { - background-image: url('data:image/svg+xml,%0A%0A'); + background-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A%0A'); - mask-image: url('data:image/svg+xml,%0A%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } } - .edit { &.bg-icon { background-image: url('data:image/svg+xml,'); } - &.mask-icon { -webkit-mask-image: url('data:image/svg+xml,'); mask-image: url('data:image/svg+xml,'); } } - .event-note { &.bg-icon { - background-image: url('data:image/svg+xml,%0A%0A'); + background-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A%0A'); - mask-image: url('data:image/svg+xml,%0A%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } } - .face { &.bg-icon { - background-image: url('data:image/svg+xml,%0A%0A'); + background-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A%0A'); - mask-image: url('data:image/svg+xml,%0A%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } } - .filter-list { &.bg-icon { - background-image: url('data:image/svg+xml,%0A%0A'); + background-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A%0A'); - mask-image: url('data:image/svg+xml,%0A%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } } - .fullscreen { &.bg-icon { - background-image: url('data:image/svg+xml,%0A%0A'); + background-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A%0A'); - mask-image: url('data:image/svg+xml,%0A%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } } - .gps-not-fixed { &.bg-icon { - background-image: url('data:image/svg+xml,%0A%0A'); + background-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A%0A'); - mask-image: url('data:image/svg+xml,%0A%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } } - .layers { &.bg-icon { - background-image: url('data:image/svg+xml,%0A%0A'); + background-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A%0A'); - mask-image: url('data:image/svg+xml,%0A%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } } - .line { &.bg-icon { - background-image: url('data:image/svg+xml,%0A%0A'); + background-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A%0A'); - mask-image: url('data:image/svg+xml,%0A%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } } - .location { &.bg-icon { - background-image: url('data:image/svg+xml,%0A%0A'); + background-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A%0A'); - mask-image: url('data:image/svg+xml,%0A%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } } - .location-tick { &.bg-icon { - background-image: url('data:image/svg+xml,%0A%0A'); + background-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A%0A'); - mask-image: url('data:image/svg+xml,%0A%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } } - .lock-closed { &.bg-icon { - background-image: url('data:image/svg+xml,%0A%0A'); + background-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A%0A'); - mask-image: url('data:image/svg+xml,%0A%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } } - .lock-open { &.bg-icon { - background-image: url('data:image/svg+xml,%0A%0A'); + background-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A%0A'); - mask-image: url('data:image/svg+xml,%0A%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } } - .logout { &.bg-icon { - background-image: url('data:image/svg+xml,%0A %0A'); + background-image: url('data:image/svg+xml,%0D%0A %0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A %0A'); - mask-image: url('data:image/svg+xml,%0A %0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A %0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A %0D%0A'); } } - .map { &.bg-icon { background-image: url('data:image/svg+xml,'); } - &.mask-icon { -webkit-mask-image: url('data:image/svg+xml,'); mask-image: url('data:image/svg+xml,'); } } - .maps-ugc { &.bg-icon { background-image: url('data:image/svg+xml,'); } - &.mask-icon { -webkit-mask-image: url('data:image/svg+xml,'); mask-image: url('data:image/svg+xml,'); } } - .multiline-chart { &.bg-icon { - background-image: url('data:image/svg+xml,%0A%0A'); + background-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A%0A'); - mask-image: url('data:image/svg+xml,%0A%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } } - .notes { &.bg-icon { - background-image: url('data:image/svg+xml,%0A%0A%0A'); + background-image: url('data:image/svg+xml,%0D%0A%0D%0A%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A%0A%0A'); - mask-image: url('data:image/svg+xml,%0A%0A%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A%0D%0A%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A%0D%0A%0D%0A'); } } - .open-in-new { &.bg-icon { - background-image: url('data:image/svg+xml,%0A%0A'); + background-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A%0A'); - mask-image: url('data:image/svg+xml,%0A%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } } - .pageview { &.bg-icon { - background-image: url('data:image/svg+xml,%0A'); + background-image: url('data:image/svg+xml,%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A'); - mask-image: url('data:image/svg+xml,%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A'); } } - .people { &.bg-icon { background-image: url('data:image/svg+xml,'); } - &.mask-icon { -webkit-mask-image: url('data:image/svg+xml,'); mask-image: url('data:image/svg+xml,'); } } - .pie-chart { &.bg-icon { - background-image: url('data:image/svg+xml,%0A%0A'); + background-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A%0A'); - mask-image: url('data:image/svg+xml,%0A%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } } - .radio-button-checked { &.bg-icon { background-image: url('data:image/svg+xml,'); } - &.mask-icon { -webkit-mask-image: url('data:image/svg+xml,'); mask-image: url('data:image/svg+xml,'); } } - .remove { &.bg-icon { - background-image: url('data:image/svg+xml,%0A%0A'); + background-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A%0A'); - mask-image: url('data:image/svg+xml,%0A%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } } - .reply { &.bg-icon { - background-image: url('data:image/svg+xml,%0A'); + background-image: url('data:image/svg+xml,%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A'); - mask-image: url('data:image/svg+xml,%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A'); } } - .restore { &.bg-icon { background-image: url('data:image/svg+xml,'); } - &.mask-icon { -webkit-mask-image: url('data:image/svg+xml,'); mask-image: url('data:image/svg+xml,'); } } - .room { &.bg-icon { - background-image: url('data:image/svg+xml,%0A%0A'); + background-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A%0A'); - mask-image: url('data:image/svg+xml,%0A%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } } - .save { &.bg-icon { background-image: url('data:image/svg+xml,'); } - &.mask-icon { -webkit-mask-image: url('data:image/svg+xml,'); mask-image: url('data:image/svg+xml,'); } } - .scatter-plot { &.bg-icon { - background-image: url('data:image/svg+xml,%0A%0A%0A%0A%0A%0A'); + background-image: url('data:image/svg+xml,%0D%0A%0D%0A%0D%0A%0D%0A%0D%0A%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A%0A%0A%0A%0A%0A'); - mask-image: url('data:image/svg+xml,%0A%0A%0A%0A%0A%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A%0D%0A%0D%0A%0D%0A%0D%0A%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A%0D%0A%0D%0A%0D%0A%0D%0A%0D%0A'); } } - .school { &.bg-icon { - background-image: url('data:image/svg+xml,%0A%0A'); + background-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A%0A'); - mask-image: url('data:image/svg+xml,%0A%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } } - .search { &.bg-icon { - background-image: url('data:image/svg+xml,%0A%0A'); + background-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A%0A'); - mask-image: url('data:image/svg+xml,%0A%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } } - .settings { &.bg-icon { - background-image: url('data:image/svg+xml,%0A%0A'); + background-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A%0A'); - mask-image: url('data:image/svg+xml,%0A%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } } - .show-chart { &.bg-icon { - background-image: url('data:image/svg+xml,%0A%0A'); + background-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A%0A'); - mask-image: url('data:image/svg+xml,%0A%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } } - .straighten { &.bg-icon { - background-image: url('data:image/svg+xml,%0A'); + background-image: url('data:image/svg+xml,%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A'); - mask-image: url('data:image/svg+xml,%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A'); } } - .supervisor-account { &.bg-icon { - background-image: url('data:image/svg+xml,%0A%0A'); + background-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A%0A'); - mask-image: url('data:image/svg+xml,%0A%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } } - .tick-done { &.bg-icon { - background-image: url('data:image/svg+xml,%0A%0A'); + background-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A%0A'); - mask-image: url('data:image/svg+xml,%0A%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } } - .tick-done-all { &.bg-icon { - background-image: url('data:image/svg+xml,%0A%0A'); + background-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A%0A'); - mask-image: url('data:image/svg+xml,%0A%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } } - .toggle { &.bg-icon { - background-image: url('data:image/svg+xml,%0A%0A'); + background-image: url('data:image/svg+xml,%0D%0A%0D%0A'); &.on { - background-image: url('data:image/svg+xml,%0A%0A'); + background-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A%0A'); - mask-image: url('data:image/svg+xml,%0A%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); &.on { - -webkit-mask-image: url('data:image/svg+xml,%0A%0A'); - mask-image: url('data:image/svg+xml,%0A%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } } - &.disabled { opacity: 0.5; pointer-events: none; } } - .touch-app { &.bg-icon { - background-image: url('data:image/svg+xml,%0A%0A'); + background-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A%0A'); - mask-image: url('data:image/svg+xml,%0A%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } } - .translate { &.bg-icon { - background-image: url('data:image/svg+xml,%0A%0A'); + background-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A%0A'); - mask-image: url('data:image/svg+xml,%0A%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } } - .trash { &.bg-icon { - background-image: url('data:image/svg+xml,%0A%0A'); + background-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A%0A'); - mask-image: url('data:image/svg+xml,%0A%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } } - .vertical-align-bottom { &.bg-icon { - background-image: url('data:image/svg+xml,%0A%0A'); + background-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A%0A'); - mask-image: url('data:image/svg+xml,%0A%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } } - .vertical-align-top { &.bg-icon { - background-image: url('data:image/svg+xml,%0A%0A'); + background-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A%0A'); - mask-image: url('data:image/svg+xml,%0A%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } } - .view-list { &.bg-icon { - background-image: url('data:image/svg+xml,%0A%0A'); + background-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A%0A'); - mask-image: url('data:image/svg+xml,%0A%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } } - .visibility-off { &.bg-icon { - background-image: url('data:image/svg+xml,%0A%0A%0A'); + background-image: url('data:image/svg+xml,%0D%0A%0D%0A%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A%0A%0A'); - mask-image: url('data:image/svg+xml,%0A%0A%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A%0D%0A%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A%0D%0A%0D%0A'); } } - .warning { &.bg-icon { - background-image: url('data:image/svg+xml,%0A%0A'); + background-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A%0A'); - mask-image: url('data:image/svg+xml,%0A%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A%0D%0A'); } } - .wysiwyg { &.bg-icon { - background-image: url('data:image/svg+xml,%0A%0A%0A%0A%0A'); + background-image: url('data:image/svg+xml,%0D%0A%0D%0A%0D%0A%0D%0A%0D%0A'); } - &.mask-icon { - -webkit-mask-image: url('data:image/svg+xml,%0A%0A%0A%0A%0A'); - mask-image: url('data:image/svg+xml,%0A%0A%0A%0A%0A'); + -webkit-mask-image: url('data:image/svg+xml,%0D%0A%0D%0A%0D%0A%0D%0A%0D%0A'); + mask-image: url('data:image/svg+xml,%0D%0A%0D%0A%0D%0A%0D%0A%0D%0A'); } } - .info { &.bg-icon { background-image: url('data:image/svg+xml,'); } - &.mask-icon { -webkit-mask-image: url('data:image/svg+xml,'); mask-image: url('data:image/svg+xml,'); } } - .question-mark { &.bg-icon { background-image: url('data:image/svg+xml,'); } - &.mask-icon { -webkit-mask-image: url('data:image/svg+xml,'); mask-image: url('data:image/svg+xml,'); } } - .lightbulb { &.bg-icon { background-image: url('data:image/svg+xml,'); } - &.mask-icon { -webkit-mask-image: url('data:image/svg+xml,'); mask-image: url('data:image/svg+xml,'); } } - .info-report { &.bg-icon { background-image: url('data:image/svg+xml,'); } - &.mask-icon { -webkit-mask-image: url('data:image/svg+xml,'); mask-image: url('data:image/svg+xml,'); @@ -1146,37 +953,30 @@ h3 { /* public/css/_inputs.css */ input { width: 100%; - &:focus { outline: none; } } - input::placeholder { text-align: left; } - input::-moz-focus-inner, input::-moz-focus-outer { border: 0; } - textarea { width: 100%; resize: none; } - input[type=number] { -moz-appearance: textfield; text-align: right; } - input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } - input[type=text], input[type=search], input[type=number], @@ -1185,42 +985,33 @@ input[type=time], input[type=datetime-local] { border: 1px solid #ccc; padding: 5px; - &:focus { cursor: text; } } - -input[type=search]:focus+ul, -input[type=search]+ul:active { +input[type=search]:focus + ul, +input[type=search] + ul:active { display: block; } - label.checkbox { display: block; - &.disabled { opacity: 0.3; pointer-events: none; } - &.inline { display: inline-block; } - - &>span { + & > span { vertical-align: middle; } - - &.inline+span { + &.inline + span { vertical-align: middle; } - - &>input { + & > input { display: none; } - - &>div { + & > div { display: inline-block; vertical-align: middle; height: 1em; @@ -1232,55 +1023,46 @@ label.checkbox { background-position: center; background-size: contain; -webkit-background-size: contain; - background-image: url('data:image/svg+xml,%0A %0A%0A %0A%0A'); + background-image: url('data:image/svg+xml,%0D%0A %0D%0A%0D%0A %0D%0A%0D%0A'); } - - &>div:hover { + & > div:hover { cursor: pointer; } - - & input:checked+div { - background-image: url('data:image/svg+xml,%0A %0A%0A'); + & input:checked + div { + background-image: url('data:image/svg+xml,%0D%0A %0D%0A%0D%0A'); } - - & input:disabled~* { + & input:disabled ~ * { opacity: 0.4; } } - .dropdown { width: 100%; overflow: visible; position: relative; background-color: white; box-shadow: var(--color-mid) 0px 8px 24px; - &:disabled { pointer-events: none; opacity: 0.4; } - - &>.head { + & > .head { padding: 5px; display: flex; align-items: center; - - &> :first-child { + & > :first-child { pointer-events: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } - - &>.icon { + & > .icon { pointer-events: none; margin-left: auto; width: 1.5em; - content: url('data:image/svg+xml,%0A%0A'); + content: url('data:image/svg+xml,%0D%0A%0D%0A'); } } - - &>ul { + & > ul { display: none; position: absolute; max-height: 500px; @@ -1291,20 +1073,16 @@ label.checkbox { text-align: left; background-color: white; z-index: 999; - - &>li { + & > li { padding: 5px; } - - &>li:hover { + & > li:hover { background-color: var(--color-light); cursor: pointer; } - - &>li.selected { + & > li.selected { background-color: var(--color-light-secondary); } - & .label { padding: 0 6px; border-radius: 2px; @@ -1314,54 +1092,48 @@ label.checkbox { background-color: var(--color-primary); } } - - &.active>ul { + &.active > ul { display: block; - - &>.head>.icon { - content: url('data:image/svg+xml,%0A%0A'); + & > .head > .icon { + content: url('data:image/svg+xml,%0D%0A%0D%0A'); } } } - @media print { .dropdown { box-shadow: none; - - &>.head>.icon { + & > .head > .icon { display: none; } } } - .input-range { --dif: calc(var(--max) - var(--min)); display: grid; grid-template-columns: 50% 50%; position: relative; width: 100%; - & .label-row { grid-row: 1; grid-column: 1/3; } - & .track-bg { grid-row: 2; grid-column: 1/3; background: - linear-gradient(0deg, + linear-gradient( + 0deg, transparent 0 45%, var(--color-primary-light) 45% 55%, transparent 55% 100%); z-index: 1; } - &.single::after { grid-column: 1/3; grid-row: 2; background: - linear-gradient(0deg, + linear-gradient( + 0deg, transparent 0 45%, var(--color-primary) 45% 55%, transparent 55% 100%); @@ -1369,42 +1141,37 @@ label.checkbox { z-index: 2; width: calc((var(--a) - var(--min)) / var(--dif) * (100% - 10px)); } - &.multi { - &>.label-row { + & > .label-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); grid-gap: 5px; - - &>div { + & > div { flex-grow: 1; } } - &::before, &::after { grid-column: 1/3; grid-row: 2; background: - linear-gradient(0deg, + linear-gradient( + 0deg, transparent 0 45%, var(--color-primary) 45% 55%, transparent 55% 100%); content: ""; z-index: 2; } - &::before { margin-left: calc(10px + (var(--a) - var(--min)) / var(--dif) * (100% - 10px)); width: calc((var(--b) - var(--a)) / var(--dif) * (100% - 10px)); } - &::after { margin-left: calc(10px + (var(--b) - var(--min)) / var(--dif) * (100% - 10px)); width: calc((var(--a) - var(--b)) / var(--dif) * (100% - 10px)); } } - & input[type=range] { -webkit-appearance: none; grid-column: 1/3; @@ -1416,25 +1183,21 @@ label.checkbox { background: none; pointer-events: none; } - &.disabled { opacity: 0.5; pointer-events: none; } } - .input-range input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 100%; background: none; } - .input-range input[type=range]::-moz-range-track { width: 100%; height: 100%; background: none; } - .input-range input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; border: none; @@ -1443,12 +1206,11 @@ label.checkbox { border-radius: 0; pointer-events: auto; cursor: pointer; - background: url('data:image/svg+xml,%0A%0A %0A'); + background: url('data:image/svg+xml,%0D%0A%0D%0A %0D%0A'); background-repeat: no-repeat; background-position: center; box-shadow: none; } - .input-range input[type=range]::-moz-range-thumb { border: none; width: 20px; @@ -1456,7 +1218,7 @@ label.checkbox { border-radius: 0; pointer-events: auto; cursor: pointer; - background: url('data:image/svg+xml,%0A%0A %0A'); + background: url('data:image/svg+xml,%0D%0A%0D%0A %0D%0A'); background-repeat: no-repeat; background-position: center; box-shadow: none; @@ -1467,60 +1229,49 @@ label.checkbox { .drawer.layer-view { margin-top: 7px; border-radius: 3px; - - &>.header { - &~.drawer.layer-view { + & > .header { + & ~ .drawer.layer-view { margin-top: 0; } - - &~.drawer.layer-view~.drawer.layer-view { + & ~ .drawer.layer-view ~ .drawer.layer-view { margin-top: 7px; } } - - &>.meta { + & > .meta { padding-bottom: 5px; } - &.expanded { padding-bottom: 5px; } } - .drawer.layer-view { padding-left: 5px; padding-right: 5px; - - &>*:not(.header) { + & > *:not(.header) { margin-top: 5px; } } - .drawer.layer-group { padding-left: 3px; padding-right: 3px; background: var(--color-light); - - &>* { + & > * { padding-left: 4px; padding-right: 4px; } } - -#layers>.drawer.layer-group .drawer.layer-view { +#layers > .drawer.layer-group .drawer.layer-view { background: var(--color-light); border: none; box-shadow: none; border-top: 2px solid var(--color-light-secondary); } - -#layers>.layer-view>.drawer, +#layers > .layer-view > .drawer, #layers .drawer.layer-view .drawer { border: none; box-shadow: none; } - -#layers>.layer-view>.drawer { +#layers > .layer-view > .drawer { background: var(--color-light); } @@ -1529,49 +1280,40 @@ label.checkbox { margin-top: 5px; border-radius: 5px; } - .location-view-grid { display: grid; align-items: stretch; grid-gap: 5px 10px; padding: 5px 0; grid-template-columns: 1fr 1fr; - & pre { background-color: var(--color-light-secondary); } - & .contents { display: contents; - - &:not(.inline)>* { + &:not(.inline) > * { grid-column: 1 / 3; } - - &.inline>.label { + &.inline > .label { grid-column: 1; } - - &.inline>.val { + &.inline > .val { grid-column: 2; text-align: right; word-break: break-word; } } - & .label { align-items: center; display: flex; font-weight: bold; } - - & .label>.tooltip { + & .label > .tooltip { -webkit-user-select: none; user-select: none; height: 1.5em; width: 1.5em; } - & .drawer.group { grid-column: 1 / 3; display: grid; @@ -1579,21 +1321,17 @@ label.checkbox { grid-gap: 5px 10px; font-size: 90%; padding: 0; - - &>.header { + & > .header { grid-column: 1 / 3; } - & .label, & .val { margin-left: 1em; } } - & .layer-key { grid-column: 1 / 3; - - &>span { + & > span { float: right; padding: 3px; cursor: help; @@ -1604,40 +1342,33 @@ label.checkbox { background-color: var(--color-mid); } } - & .textarea { white-space: break-spaces; } - & .streetview { & img { width: 100%; } } - & .dataview { text-align: left; } } - .images-grid { position: relative; display: flex; flex-wrap: wrap; - - &>div { + & > div { position: relative; width: 90px; height: 90px; flex-grow: 1; padding: 2px; - & img { width: 100%; height: 100%; object-fit: cover; } - & .trash { position: absolute; width: 2em; @@ -1645,15 +1376,13 @@ label.checkbox { right: 0.5em; top: 0.5em; } - & input { height: 100%; opacity: 0; cursor: pointer; } } - - &>div:first-child { + & > div:first-child { width: 100%; height: 180px; } @@ -1668,7 +1397,6 @@ label.checkbox { background-color: white; display: grid; grid-template-rows: 50px auto; - &.disabled::after { content: ""; height: 100%; @@ -1679,15 +1407,13 @@ label.checkbox { background-color: #fff; opacity: 0.7; } - - &>.tabs { + & > .tabs { width: 100%; height: 50px; overflow-x: auto; display: flex; background-color: var(--color-light-secondary); - - &>.tab>.header { + & > .tab > .header { height: 100%; display: flex; align-items: center; @@ -1699,38 +1425,31 @@ label.checkbox { -ms-user-select: none; user-select: none; } - - &>.tab.active>.header { + & > .tab.active > .header { background-color: white; font-weight: bold; } - - &>.tab:not(.active)>.header:hover { + & > .tab:not(.active) > .header:hover { cursor: pointer; } } - - &>.panel { + & > .panel { position: relative; - - &>.flex-col { + & > .flex-col { position: absolute; width: 100%; height: 100%; } - & .dataview-target { width: 100%; height: 100%; overflow-y: auto; } - - &>.dataview-target { + & > .dataview-target { position: absolute; } } - - & .dropdown>ul { + & .dropdown > ul { position: fixed; } } @@ -1743,36 +1462,30 @@ label.checkbox { -ms-user-select: none; user-select: none; } - .flex-spacer { display: flex; align-items: center; - - &> :nth-child(2) { + & > :nth-child(2) { margin-left: auto; } } - -.link-with-img>* { +.link-with-img > * { height: 1.2em; line-height: 1.2em; display: inline-block; vertical-align: middle; } - -.link-with-img>button, -.link-with-img>.mask-icon, -.link-with-img>.bg-icon { +.link-with-img > button, +.link-with-img > .mask-icon, +.link-with-img > .bg-icon { width: 1.5em; } - .dataview-mask { width: 100%; height: 100%; text-align: center; line-height: 2; } - .interface-mask { position: fixed; top: 0; @@ -1780,16 +1493,14 @@ label.checkbox { height: 100%; z-index: 999999; background-color: #eeea; - - &>.bg-image { + & > .bg-image { margin: 5%; height: 90%; width: 90%; background-repeat: no-repeat; background-size: contain; background-position: center; - - &>.btn-close { + & > .btn-close { position: absolute; top: 5%; right: 5%; @@ -1799,21 +1510,18 @@ label.checkbox { } } } - .flex-col { display: flex; flex-direction: column; gap: 5px; } - .modal { position: absolute; background-color: #fff; box-shadow: 1px 1px 3px var(--color-primary-light); cursor: grab; user-select: none; - - &>button.close { + & > button.close { position: absolute; top: 1em; right: 1em; @@ -1821,7 +1529,6 @@ label.checkbox { width: 1em; } } - .modal-dialog { margin: 20%; z-index: 9999; @@ -1829,49 +1536,38 @@ label.checkbox { text-wrap: wrap; font-size: large; } - .mask-icon { background-color: var(--color-primary-light); - &.on { background-color: var(--color-on); } - &.no { background-color: var(--color-no); } } - .primary-colour { color: var(--color-primary); } - .primary-background { color: white; background-color: var(--color-primary); } - .light-background { background-color: var(--color-light); } - .lighter-background { background-color: var(--color-light-secondary); } - .off-black { color: var(--color-off-black); } - .off-black-background { color: white; background-color: var(--color-off-black); } - .on-colour { color: var(--color-on); } - .no-colour { color: var(--color-no); -} \ No newline at end of file +} diff --git a/public/icons/icon-copy.svg b/public/icons/icon-copy.svg new file mode 100644 index 0000000000..d875c84491 --- /dev/null +++ b/public/icons/icon-copy.svg @@ -0,0 +1 @@ + \ No newline at end of file