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,');
- mask-image: url('data:image/svg+xml,');
+ &.expandable > .header > .mask-icon.expander {
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
-
- &.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,');
- mask-image: url('data:image/svg+xml,');
+ &.expanded > .header > .mask-icon.expander {
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
-
&.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,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.add-chart {
&.bg-icon {
- background-image: url('data:image/svg+xml,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.add-document {
&.bg-icon {
- background-image: url('data:image/svg+xml,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.add-photo {
&.bg-icon {
- background-image: url('data:image/svg+xml,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.area {
&.bg-icon {
- background-image: url('data:image/svg+xml,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.arrow-down {
&.bg-icon {
- background-image: url('data:image/svg+xml,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.arrow-up {
&.bg-icon {
- background-image: url('data:image/svg+xml,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.bar-chart {
&.bg-icon {
- background-image: url('data:image/svg+xml,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.bubble-chart {
&.bg-icon {
- background-image: url('data:image/svg+xml,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.bug-report {
&.bg-icon {
- background-image: url('data:image/svg+xml,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.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,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.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,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.description {
&.bg-icon {
- background-image: url('data:image/svg+xml,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.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,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.drop-down {
&.bg-icon {
- background-image: url('data:image/svg+xml,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.drop-up {
&.bg-icon {
- background-image: url('data:image/svg+xml,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.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,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.face {
&.bg-icon {
- background-image: url('data:image/svg+xml,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.filter-list {
&.bg-icon {
- background-image: url('data:image/svg+xml,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.fullscreen {
&.bg-icon {
- background-image: url('data:image/svg+xml,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.gps-not-fixed {
&.bg-icon {
- background-image: url('data:image/svg+xml,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.layers {
&.bg-icon {
- background-image: url('data:image/svg+xml,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.line {
&.bg-icon {
- background-image: url('data:image/svg+xml,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.location {
&.bg-icon {
- background-image: url('data:image/svg+xml,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.location-tick {
&.bg-icon {
- background-image: url('data:image/svg+xml,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.lock-closed {
&.bg-icon {
- background-image: url('data:image/svg+xml,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.lock-open {
&.bg-icon {
- background-image: url('data:image/svg+xml,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.logout {
&.bg-icon {
- background-image: url('data:image/svg+xml,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.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,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.notes {
&.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');
}
}
-
.open-in-new {
&.bg-icon {
- background-image: url('data:image/svg+xml,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.pageview {
&.bg-icon {
- background-image: url('data:image/svg+xml,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.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,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.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,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.reply {
&.bg-icon {
- background-image: url('data:image/svg+xml,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.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,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.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,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.school {
&.bg-icon {
- background-image: url('data:image/svg+xml,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.search {
&.bg-icon {
- background-image: url('data:image/svg+xml,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.settings {
&.bg-icon {
- background-image: url('data:image/svg+xml,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.show-chart {
&.bg-icon {
- background-image: url('data:image/svg+xml,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.straighten {
&.bg-icon {
- background-image: url('data:image/svg+xml,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.supervisor-account {
&.bg-icon {
- background-image: url('data:image/svg+xml,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.tick-done {
&.bg-icon {
- background-image: url('data:image/svg+xml,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.tick-done-all {
&.bg-icon {
- background-image: url('data:image/svg+xml,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.toggle {
&.bg-icon {
- background-image: url('data:image/svg+xml,');
+ background-image: url('data:image/svg+xml,');
&.on {
- background-image: url('data:image/svg+xml,');
+ background-image: url('data:image/svg+xml,');
}
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
&.on {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
&.disabled {
opacity: 0.5;
pointer-events: none;
}
}
-
.touch-app {
&.bg-icon {
- background-image: url('data:image/svg+xml,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.translate {
&.bg-icon {
- background-image: url('data:image/svg+xml,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.trash {
&.bg-icon {
- background-image: url('data:image/svg+xml,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.vertical-align-bottom {
&.bg-icon {
- background-image: url('data:image/svg+xml,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.vertical-align-top {
&.bg-icon {
- background-image: url('data:image/svg+xml,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.view-list {
&.bg-icon {
- background-image: url('data:image/svg+xml,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.visibility-off {
&.bg-icon {
- background-image: url('data:image/svg+xml,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.warning {
&.bg-icon {
- background-image: url('data:image/svg+xml,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.wysiwyg {
&.bg-icon {
- background-image: url('data:image/svg+xml,');
+ background-image: url('data:image/svg+xml,');
}
-
&.mask-icon {
- -webkit-mask-image: url('data:image/svg+xml,');
- mask-image: url('data:image/svg+xml,');
+ -webkit-mask-image: url('data:image/svg+xml,');
+ mask-image: url('data:image/svg+xml,');
}
}
-
.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');
+ background-image: url('data:image/svg+xml,%0D%0A');
}
-
- &>div:hover {
+ & > div:hover {
cursor: pointer;
}
-
- & input:checked+div {
- background-image: url('data:image/svg+xml,%0A');
+ & input:checked + div {
+ background-image: url('data:image/svg+xml,%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,');
+ content: url('data:image/svg+xml,');
}
}
-
- &>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,');
+ & > .head > .icon {
+ content: url('data:image/svg+xml,');
}
}
}
-
@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');
+ background: url('data:image/svg+xml,%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');
+ background: url('data:image/svg+xml,%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