mirror of
https://github.com/muerwre/orchidmap-front.git
synced 2025-04-24 18:46:40 +07:00
made global less styles
This commit is contained in:
Fedor Katurov
parent
c2f42ea721
commit
4e18eba558
15 changed files with 2846 additions and 2799 deletions
|
|
@ -1,4 +1,5 @@
|
|||
.button {
|
||||
:global {
|
||||
.button {
|
||||
background: #444444;
|
||||
padding: 4px 16px;
|
||||
height: 18px;
|
||||
|
|
@ -10,7 +11,7 @@
|
|||
align-items: center;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
box-shadow: inset rgba(100,100,100, 0.3) 1px 0, inset rgba(0,0,0, 0.1) -1px 0;
|
||||
box-shadow: inset rgba(100, 100, 100, 0.3) 1px 0, inset rgba(0,0,0, 0.1) -1px 0;
|
||||
color: white;
|
||||
font-weight: 400;
|
||||
border: none;
|
||||
|
|
@ -50,9 +51,9 @@
|
|||
height: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-group {
|
||||
.button-group {
|
||||
display: flex;
|
||||
|
||||
.button {
|
||||
|
|
@ -67,4 +68,5 @@
|
|||
border-radius: 0 @button_radius @button_radius 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
.dialog {
|
||||
:global {
|
||||
.dialog {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
|
@ -36,9 +37,9 @@
|
|||
background: rgba(19, 45, 53, 0.95);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-close-button {
|
||||
.dialog-close-button {
|
||||
position: absolute;
|
||||
right: -38px;
|
||||
bottom: 68px;
|
||||
|
|
@ -71,9 +72,9 @@
|
|||
height: 68px;
|
||||
background: @dialog_background;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-content {
|
||||
.dialog-content {
|
||||
background: @dialog_background;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
|
@ -91,21 +92,21 @@
|
|||
&.full {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-flex-scroll {
|
||||
.dialog-flex-scroll {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
// height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.nominatim-dialog-content {
|
||||
.nominatim-dialog-content {
|
||||
padding-bottom: 48px;
|
||||
min-height: 25vh;
|
||||
}
|
||||
}
|
||||
|
||||
.nominatim-list-item {
|
||||
.nominatim-list-item {
|
||||
padding: 10px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
|
|
@ -124,9 +125,9 @@
|
|||
font-size: 12px;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-shader {
|
||||
.dialog-shader {
|
||||
&::before,
|
||||
&::after {
|
||||
content: ' ';
|
||||
|
|
@ -145,32 +146,32 @@
|
|||
bottom: 0;
|
||||
background: linear-gradient(0deg, rgba(39, 21, 53, 1), rgba(39, 21, 53, 0));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-maplist {
|
||||
.dialog-maplist {
|
||||
box-sizing: border-box;
|
||||
padding: 10px 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-maplist-pulse {
|
||||
.dialog-maplist-pulse {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
|
@ -186,9 +187,9 @@
|
|||
opacity: 1;
|
||||
animation: pulse 500ms 250ms infinite alternate;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-maplist-loader {
|
||||
.dialog-maplist-loader {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
text-transform: uppercase;
|
||||
|
|
@ -211,6 +212,7 @@
|
|||
.spin {
|
||||
animation: spin infinite reverse 2s linear;
|
||||
}
|
||||
|
||||
.dialog-maplist-icon {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
|
|
@ -224,9 +226,9 @@
|
|||
fill: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.route-row-wrapper {
|
||||
.route-row-wrapper {
|
||||
padding: 0 10px;
|
||||
position: relative;
|
||||
margin-bottom: 10px;
|
||||
|
|
@ -251,21 +253,21 @@
|
|||
width: 120px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.route-row-editor {
|
||||
.route-row-editor {
|
||||
color: white;
|
||||
padding: 5px 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.route-row-buttons {
|
||||
.route-row-buttons {
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.route-row-view {
|
||||
.route-row-view {
|
||||
overflow: hidden;
|
||||
transition: height 500ms;
|
||||
position: relative;
|
||||
|
|
@ -274,21 +276,21 @@
|
|||
&.has_menu {
|
||||
padding-right: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.route-row-edit {
|
||||
.route-row-edit {
|
||||
background: fade(@green_secondary, 30%);
|
||||
}
|
||||
}
|
||||
|
||||
.route-row-drop {
|
||||
.route-row-drop {
|
||||
background: fade(@red_secondary, 20%);
|
||||
|
||||
.route-row {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.route-row {
|
||||
.route-row {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
padding: 10px 10px 5px 10px;
|
||||
color: white;
|
||||
|
|
@ -313,9 +315,9 @@
|
|||
touch-action: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.route-row-edit-button {
|
||||
.route-row-edit-button {
|
||||
width: 32px;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
fill: rgba(255, 255, 255, 0.5);
|
||||
|
|
@ -331,9 +333,9 @@
|
|||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.route-row-fav {
|
||||
.route-row-fav {
|
||||
width: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -346,9 +348,9 @@
|
|||
&:hover {
|
||||
background: fade(white, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.route-row-edit-menu {
|
||||
.route-row-edit-menu {
|
||||
width: 0;
|
||||
height: 100%;
|
||||
right: 32px;
|
||||
|
|
@ -381,9 +383,9 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.route-title {
|
||||
.route-title {
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
|
||||
|
|
@ -401,9 +403,9 @@
|
|||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.route-description {
|
||||
.route-description {
|
||||
font-size: 0.9em;
|
||||
opacity: 0.3;
|
||||
margin-bottom: 5px;
|
||||
|
|
@ -425,15 +427,15 @@
|
|||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-head {
|
||||
.dialog-head {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
padding: 10px;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-tabs {
|
||||
.dialog-tabs {
|
||||
background: rgba(255, 255, 255, 0);
|
||||
border-radius: @panel_radius @panel_radius 0 0;
|
||||
height: 32px;
|
||||
|
|
@ -464,14 +466,14 @@
|
|||
height: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-head-title {
|
||||
.dialog-head-title {
|
||||
font-size: 20px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
.app-info-changelog {
|
||||
.app-info-changelog {
|
||||
color: white;
|
||||
padding: 10px;
|
||||
font-size: 0.8em;
|
||||
|
|
@ -480,13 +482,13 @@
|
|||
div {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-info-number {
|
||||
.app-info-number {
|
||||
width: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.app-info-changelog-item {
|
||||
.app-info-changelog-item {
|
||||
text-transform: uppercase;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
|
|
@ -497,28 +499,28 @@
|
|||
display: inline;
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-info-version {
|
||||
.app-info-version {
|
||||
padding-bottom: 5px;
|
||||
flex: 1;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
.app-info-release {
|
||||
.app-info-release {
|
||||
padding-bottom: 5px;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.app-info-build {
|
||||
.app-info-build {
|
||||
padding-bottom: 5px;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.app-info-change {
|
||||
.app-info-change {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding-bottom: 5px;
|
||||
|
|
@ -530,12 +532,13 @@
|
|||
span {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-info-list {
|
||||
.app-info-list {
|
||||
padding: 5px 0;
|
||||
|
||||
div {
|
||||
padding: 5px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
.gpx-title {
|
||||
:global {
|
||||
.gpx-title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.gpx-row {
|
||||
.gpx-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
|
|
@ -58,9 +59,9 @@
|
|||
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gpx-buttons {
|
||||
.gpx-buttons {
|
||||
padding: 10px;
|
||||
|
||||
& > * {
|
||||
|
|
@ -83,9 +84,9 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gpx-confirm {
|
||||
.gpx-confirm {
|
||||
position: absolute;
|
||||
bottom: 5%;
|
||||
left: 5%;
|
||||
|
|
@ -95,5 +96,6 @@
|
|||
border-radius: @panel_radius;
|
||||
box-sizing: border-box;
|
||||
background: lighten(@bar_background, 10%);
|
||||
box-shadow: rgba(0,0,0,0.5) 0 5px 5px 10px;
|
||||
box-shadow: rgba(0, 0, 0, 0.5) 0 5px 5px 10px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
.logo-preview {
|
||||
:global {
|
||||
.logo-preview {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 58px;
|
||||
|
|
@ -19,6 +20,5 @@
|
|||
transform: scale(0.5);
|
||||
transform-origin: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -15,49 +15,50 @@
|
|||
@import 'switch.less';
|
||||
@import 'gpx.less';
|
||||
|
||||
body {
|
||||
:global {
|
||||
body {
|
||||
font-family: 'Rubik', sans-serif;
|
||||
font-size: 15px;
|
||||
// letter-spacing: 0.4px;
|
||||
padding: 0;
|
||||
font-weight: 400;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
}
|
||||
|
||||
.gray {
|
||||
.gray {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.big {
|
||||
.big {
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.upper {
|
||||
.upper {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
.small {
|
||||
.small {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
|
||||
.white {
|
||||
.white {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.success {
|
||||
.success {
|
||||
color: @color_success;
|
||||
}
|
||||
}
|
||||
|
||||
.primary {
|
||||
.primary {
|
||||
color: @color_primary;
|
||||
}
|
||||
}
|
||||
|
||||
.danger {
|
||||
.danger {
|
||||
color: @color_danger;
|
||||
}
|
||||
}
|
||||
|
||||
.cursor-tooltip {
|
||||
.cursor-tooltip {
|
||||
position: fixed;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
|
|
@ -73,28 +74,28 @@ body {
|
|||
fill: black;
|
||||
}
|
||||
|
||||
@media(hover: none) {
|
||||
@media (hover: none) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cursor-icon-sticker {
|
||||
.cursor-icon-sticker {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-size: cover;
|
||||
background-position: 0 50%;
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
}
|
||||
}
|
||||
|
||||
.track-vertical {
|
||||
.track-vertical {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
width: 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.thumb-vertical {
|
||||
.thumb-vertical {
|
||||
position: absolute;
|
||||
width: 20px !important;
|
||||
left: -10px;
|
||||
|
|
@ -116,35 +117,39 @@ body {
|
|||
border-radius: 4px 0 0 4px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pointer {
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: @mobile_breakpoint) {
|
||||
.desktop-only { display: none; }
|
||||
}
|
||||
@media (max-width: @mobile_breakpoint) {
|
||||
.desktop-only {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: @mobile_breakpoint) {
|
||||
.mobile-only { display: none; }
|
||||
}
|
||||
@media (min-width: @mobile_breakpoint) {
|
||||
.mobile-only {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
h2 {
|
||||
font: inherit;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
hr {
|
||||
border: none;
|
||||
height: 2px;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 5px 10px 5px 10px;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
|
|
@ -156,12 +161,13 @@ input {
|
|||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
font-weight: 200;
|
||||
}
|
||||
}
|
||||
|
||||
.relative {
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.justify-end {
|
||||
.justify-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
#map {
|
||||
:global {
|
||||
#map {
|
||||
width: 50% !important;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
|
|
@ -7,26 +8,26 @@
|
|||
top: 0;
|
||||
|
||||
cursor: crosshair;
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-control-zoom {
|
||||
.leaflet-control-zoom {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-touch .leaflet-bar a {
|
||||
.leaflet-touch .leaflet-bar a {
|
||||
border-radius: @panel_radius !important;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes vertex_spin {
|
||||
@keyframes vertex_spin {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-vertex-drag-helper {
|
||||
.leaflet-vertex-drag-helper {
|
||||
pointer-events: none !important;
|
||||
background: fade(red, 50%);
|
||||
border-radius: 12px;
|
||||
|
|
@ -42,9 +43,9 @@
|
|||
left: -9px;
|
||||
animation: vertex_spin 500ms infinite linear alternate;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vertex-icon-mixin(@left, @right) {
|
||||
.vertex-icon-mixin(@left, @right) {
|
||||
&::after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
|
|
@ -58,9 +59,9 @@
|
|||
transform: scale(1);
|
||||
transition: transform 150ms;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-vertex-icon {
|
||||
.leaflet-vertex-icon {
|
||||
outline: none !important;
|
||||
border-radius: 10px;
|
||||
opacity: 1;
|
||||
|
|
@ -99,23 +100,23 @@
|
|||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-arrow {
|
||||
.leaflet-arrow {
|
||||
position: absolute;
|
||||
left: -18px;
|
||||
top: -18px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-arrow-icon {
|
||||
.leaflet-arrow-icon {
|
||||
pointer-events: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-km-marker,
|
||||
.leaflet-km-marker-2 {
|
||||
.leaflet-km-marker,
|
||||
.leaflet-km-marker-2 {
|
||||
position: absolute;
|
||||
z-index: 0 !important;
|
||||
|
||||
|
|
@ -148,17 +149,17 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.start-marker {
|
||||
.start-marker {
|
||||
svg {
|
||||
position: absolute;
|
||||
left: -4px;
|
||||
top: -4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.end-marker {
|
||||
.end-marker {
|
||||
.leaflet-km-dist {
|
||||
left: auto;
|
||||
right: -3px;
|
||||
|
|
@ -192,9 +193,9 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.router-marker {
|
||||
.router-marker {
|
||||
div {
|
||||
background: @router_line;
|
||||
color: white;
|
||||
|
|
@ -215,33 +216,33 @@
|
|||
left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-km-marker-2 {
|
||||
.leaflet-km-marker-2 {
|
||||
.leaflet-km-dist {
|
||||
background: green;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.touch-hinter-poly {
|
||||
.touch-hinter-poly {
|
||||
stroke: rgba(255, 50, 0, 0.1);
|
||||
cursor: grab;
|
||||
|
||||
@media (max-width: @mobile_breakpoint) {
|
||||
stroke: rgba(255, 50, 0, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-control-container .leaflet-routing-container-hide {
|
||||
.leaflet-control-container .leaflet-routing-container-hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-bar {
|
||||
.leaflet-bar {
|
||||
box-shadow: @bar_shadow !important;
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-bar a {
|
||||
.leaflet-bar a {
|
||||
background: @bar_background;
|
||||
color: white;
|
||||
text-shadow: none;
|
||||
|
|
@ -253,9 +254,9 @@
|
|||
color: white;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.location-marker {
|
||||
.location-marker {
|
||||
width: 20px;
|
||||
height: 3px;
|
||||
margin-left: -10px;
|
||||
|
|
@ -286,18 +287,18 @@
|
|||
top: -9px;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-top {
|
||||
.leaflet-top {
|
||||
top: 42px;
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-div-icon {
|
||||
.leaflet-div-icon {
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-marker-cluster {
|
||||
.custom-marker-cluster {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: @cluster_small;
|
||||
|
|
@ -332,9 +333,9 @@
|
|||
border-radius: 8px;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#canvas {
|
||||
#canvas {
|
||||
background: #eeeeee;
|
||||
z-index: 0;
|
||||
|
||||
|
|
@ -342,13 +343,13 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-pane {
|
||||
.leaflet-pane {
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
.current-location {
|
||||
.current-location {
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: relative;
|
||||
|
|
@ -362,5 +363,5 @@
|
|||
stroke: white;
|
||||
stroke-width: 0.2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
.control-bar {
|
||||
:global {
|
||||
.control-bar {
|
||||
background: @bar_background;
|
||||
border-radius: @panel_radius;
|
||||
display: flex;
|
||||
|
|
@ -9,13 +10,13 @@
|
|||
@media (max-width: @mobile_breakpoint) {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.control-bar-padded {
|
||||
.control-bar-padded {
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.control-sep {
|
||||
.control-sep {
|
||||
height: 36px;
|
||||
background: #222222;
|
||||
width: 4px;
|
||||
|
|
@ -25,9 +26,9 @@
|
|||
margin-right: -1px;
|
||||
width: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.secondary-bar {
|
||||
.secondary-bar {
|
||||
background: #222222;
|
||||
margin: 0 -1px;
|
||||
padding: 0 1px;
|
||||
|
|
@ -56,9 +57,9 @@
|
|||
touch-action: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel {
|
||||
.panel {
|
||||
position: fixed;
|
||||
left: 10px;
|
||||
bottom: 10px;
|
||||
|
|
@ -178,9 +179,9 @@
|
|||
stroke-width: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel-tooltip {
|
||||
.panel-tooltip {
|
||||
position: absolute;
|
||||
bottom: 58px;
|
||||
left: 50%;
|
||||
|
|
@ -220,19 +221,19 @@
|
|||
transform: translate(-50%, -5px) rotate(45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel button,
|
||||
.tooltip-container {
|
||||
.panel button,
|
||||
.tooltip-container {
|
||||
position: relative;
|
||||
|
||||
&:hover .panel-tooltip {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.control-bar-counter {
|
||||
.control-bar-counter {
|
||||
color: white;
|
||||
min-width: 12px;
|
||||
height: 12px;
|
||||
|
|
@ -245,15 +246,15 @@
|
|||
box-sizing: border-box;
|
||||
transform: translate(50%, 50%);
|
||||
line-height: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-separator {
|
||||
.panel-separator {
|
||||
height: 48px;
|
||||
width: 4px;
|
||||
background: #222222;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-user {
|
||||
.panel-user {
|
||||
@media (max-width: @mobile_breakpoint) {
|
||||
z-index: 3;
|
||||
flex-direction: column-reverse;
|
||||
|
|
@ -268,9 +269,9 @@
|
|||
@media (max-width: @micro_breakpoint) {
|
||||
bottom: 68px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.control-dialog {
|
||||
.control-dialog {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 68px;
|
||||
|
|
@ -340,9 +341,9 @@
|
|||
width: calc(100% - 78px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.control-dialog-provider {
|
||||
.control-dialog-provider {
|
||||
width: 500px;
|
||||
|
||||
@media (max-width: @mobile_breakpoint) {
|
||||
|
|
@ -350,9 +351,9 @@
|
|||
left: 0;
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.helper {
|
||||
.helper {
|
||||
// width: 500px;
|
||||
padding: 12px;
|
||||
font-weight: 200;
|
||||
|
|
@ -366,13 +367,13 @@
|
|||
@media (max-width: @mobile_breakpoint) {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.helper-prefetch {
|
||||
.helper-prefetch {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.helper__text {
|
||||
.helper__text {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -407,13 +408,13 @@
|
|||
fill: @color_danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flex_1 {
|
||||
.flex_1 {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.helper__icon_button {
|
||||
.helper__icon_button {
|
||||
width: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -437,9 +438,9 @@
|
|||
fill: url(#activeButtonGradient);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.helper__buttons {
|
||||
.helper__buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
|
|
@ -460,9 +461,9 @@
|
|||
&:hover svg {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.trash-buttons {
|
||||
.trash-buttons {
|
||||
@media (max-width: @mobile_breakpoint) {
|
||||
flex-direction: column;
|
||||
|
||||
|
|
@ -470,17 +471,17 @@
|
|||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logo-helper {
|
||||
.logo-helper {
|
||||
width: 200px;
|
||||
flex-direction: column;
|
||||
padding: 16px 0 16px 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.helper-back {
|
||||
.helper-back {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
z-index: -1;
|
||||
|
|
@ -491,9 +492,9 @@
|
|||
svg {
|
||||
fill: @bar_background;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.helper-menu-item {
|
||||
.helper-menu-item {
|
||||
padding: 8px 20px;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
|
|
@ -514,9 +515,9 @@
|
|||
background: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.provider-helper {
|
||||
.provider-helper {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
grid-column-gap: 10px;
|
||||
|
|
@ -549,9 +550,9 @@
|
|||
padding: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status-panel {
|
||||
.status-panel {
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
|
|
@ -573,9 +574,9 @@
|
|||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
.status-bar {
|
||||
background: #222222;
|
||||
display: flex;
|
||||
font-weight: 200;
|
||||
|
|
@ -637,9 +638,9 @@
|
|||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status-bar-tip {
|
||||
.status-bar-tip {
|
||||
position: absolute;
|
||||
background: @bar_background;
|
||||
top: 100%;
|
||||
|
|
@ -651,35 +652,35 @@
|
|||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 250ms;
|
||||
}
|
||||
}
|
||||
|
||||
.status-bar-sep {
|
||||
.status-bar-sep {
|
||||
height: 24px;
|
||||
width: 1px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
margin: 0 8px 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-prefetch-stage {
|
||||
.dialog-prefetch-stage {
|
||||
font-size: 1em;
|
||||
text-transform: uppercase;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-prefetch-progress {
|
||||
.dialog-prefetch-progress {
|
||||
padding: 10px 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.speed-helper {
|
||||
.speed-helper {
|
||||
width: 300px;
|
||||
padding: 0 20px;
|
||||
|
||||
.rc-slider {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title-dialog-wrapper {
|
||||
.title-dialog-wrapper {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
|
@ -693,16 +694,16 @@
|
|||
align-items: flex-end;
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
}
|
||||
}
|
||||
|
||||
.title-dialog-sizer {
|
||||
.title-dialog-sizer {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.title-dialog {
|
||||
.title-dialog {
|
||||
z-index: 2;
|
||||
transition: opacity 500ms, transform 1s;
|
||||
transform: translate(0, 68px);
|
||||
|
|
@ -775,20 +776,21 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.location-bar {
|
||||
.location-bar {
|
||||
width: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.nominatim-panel {
|
||||
.nominatim-panel {
|
||||
position: fixed;
|
||||
bottom: 53px;
|
||||
left: 10px;
|
||||
width: 272px;
|
||||
}
|
||||
}
|
||||
|
||||
.nominatim-search-input {
|
||||
.nominatim-search-input {
|
||||
padding-left: 10px;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
.progress {
|
||||
:global {
|
||||
.progress {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 5px;
|
||||
|
|
@ -13,4 +14,5 @@
|
|||
border-radius: @panel_radius;
|
||||
transition: width 500ms;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
.renderer-shade {
|
||||
:global {
|
||||
.renderer-shade {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -41,13 +42,14 @@
|
|||
border: none;
|
||||
box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.renderer-logo {
|
||||
.renderer-logo {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
pointer-events: none;
|
||||
|
||||
transform-origin: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
.router-waypoint {
|
||||
:global {
|
||||
.router-waypoint {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-left: -20px;
|
||||
|
|
@ -31,11 +32,12 @@
|
|||
top: 18px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.router-helper {
|
||||
}
|
||||
.router-helper {
|
||||
}
|
||||
|
||||
.router-helper__button {
|
||||
.router-helper__button {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
.save-helper {
|
||||
:global {
|
||||
.save-helper {
|
||||
padding: 0;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.save-title {
|
||||
.save-title {
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
background: linear-gradient(175deg, #abc837 -50%, #009c80 150%);
|
||||
|
|
@ -11,14 +12,18 @@
|
|||
border-radius: @panel_radius @panel_radius 0 0;
|
||||
font-weight: 200;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes jump {
|
||||
0% { transform: translate3d(0, 0, 0) scale(0.5); }
|
||||
100% { transform: translate3d(0, -20px, 0) scale(1); }
|
||||
}
|
||||
@keyframes jump {
|
||||
0% {
|
||||
transform: translate3d(0, 0, 0) scale(0.5);
|
||||
}
|
||||
100% {
|
||||
transform: translate3d(0, -20px, 0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.save-loader {
|
||||
.save-loader {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -40,8 +45,13 @@
|
|||
svg {
|
||||
fill: white;
|
||||
|
||||
&:nth-child(2) { animation-delay: 200ms; }
|
||||
&:nth-child(3) { animation-delay: 400ms; }
|
||||
&:nth-child(2) {
|
||||
animation-delay: 200ms;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
animation-delay: 400ms;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
|
|
@ -53,13 +63,13 @@
|
|||
animation: jump infinite alternate 600ms;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.save-description {
|
||||
.save-description {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.save-title-input {
|
||||
.save-title-input {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: @panel_radius;
|
||||
display: flex;
|
||||
|
|
@ -76,16 +86,16 @@
|
|||
font-size: 14px;
|
||||
font-weight: 200;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.save-title-label {
|
||||
.save-title-label {
|
||||
display: flex;
|
||||
padding: 5px 10px;
|
||||
background: rgba(0,0,0,0.1);
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.save-address-input {
|
||||
.save-address-input {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
|
|
@ -95,17 +105,17 @@
|
|||
padding: 5px 5px 5px 2px;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.save-address-label {
|
||||
.save-address-label {
|
||||
display: flex;
|
||||
padding: 5px 0 5px 10px;
|
||||
height: 100%;
|
||||
opacity: 0.5;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.save-address-copy {
|
||||
.save-address-copy {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
padding: 0 5px;
|
||||
border-radius: 0 @panel_radius @panel_radius 0;
|
||||
|
|
@ -122,15 +132,16 @@
|
|||
svg {
|
||||
fill: white;
|
||||
}
|
||||
}
|
||||
.save-text {
|
||||
}
|
||||
|
||||
.save-text {
|
||||
padding: 10px;
|
||||
line-height: 1.1em;
|
||||
min-height: 2.2em;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
|
||||
.save-buttons {
|
||||
.save-buttons {
|
||||
display: flex;
|
||||
padding: 0px;
|
||||
margin-top: 20px;
|
||||
|
|
@ -139,9 +150,9 @@
|
|||
.button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.save-buttons-text {
|
||||
.save-buttons-text {
|
||||
flex: 1;
|
||||
padding: 0 10px 2px 10px;
|
||||
align-items: center;
|
||||
|
|
@ -150,11 +161,11 @@
|
|||
.switch {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.save-description {
|
||||
.save-description {
|
||||
textarea {
|
||||
background: rgba(0,0,0,0.3);
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
outline: none;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
|
|
@ -165,9 +176,10 @@
|
|||
padding: 5px 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.save-controls {
|
||||
.save-controls {
|
||||
padding: 5px 10px;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,8 @@
|
|||
@ease-out-quint : cubic-bezier(0.23, 1, 0.32, 1);
|
||||
@ease-in-quint : cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
||||
|
||||
.borderBox() {
|
||||
:global {
|
||||
.borderBox() {
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // remove tap highlight color for mobile safari
|
||||
|
||||
|
|
@ -19,9 +20,9 @@
|
|||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // remove tap highlight color for mobile safari
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{prefixClass} {
|
||||
.@{prefixClass} {
|
||||
position: relative;
|
||||
height: 40px;
|
||||
padding: 15px 0;
|
||||
|
|
@ -138,6 +139,7 @@
|
|||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
vertical-align: middle;
|
||||
|
||||
&-active {
|
||||
// border-color: tint(@primary-color, 50%);
|
||||
background-color: white;
|
||||
|
|
@ -159,13 +161,13 @@
|
|||
}
|
||||
|
||||
.@{prefixClass}-mark-text, .@{prefixClass}-dot, .@{prefixClass}-track {
|
||||
cursor: not-allowed!important;
|
||||
cursor: not-allowed !important;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{prefixClass}-vertical {
|
||||
.@{prefixClass}-vertical {
|
||||
width: 14px;
|
||||
height: 100%;
|
||||
padding: 0 5px;
|
||||
|
|
@ -204,23 +206,25 @@
|
|||
&-dot {
|
||||
left: 2px;
|
||||
margin-bottom: -4px;
|
||||
|
||||
&:first-child {
|
||||
margin-bottom: -4px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: -4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.motion-common() {
|
||||
.motion-common() {
|
||||
animation-duration: .3s;
|
||||
animation-fill-mode: both;
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
.make-motion(@className, @keyframeName) {
|
||||
.make-motion(@className, @keyframeName) {
|
||||
.@{className}-enter, .@{className}-appear {
|
||||
.motion-common();
|
||||
animation-play-state: paused;
|
||||
|
|
@ -237,8 +241,8 @@
|
|||
animation-name: ~"@{keyframeName}Out";
|
||||
animation-play-state: running;
|
||||
}
|
||||
}
|
||||
.zoom-motion(@className, @keyframeName) {
|
||||
}
|
||||
.zoom-motion(@className, @keyframeName) {
|
||||
.make-motion(@className, @keyframeName);
|
||||
.@{className}-enter, .@{className}-appear {
|
||||
transform: scale(0, 0); // need this by yiminghe
|
||||
|
|
@ -247,10 +251,10 @@
|
|||
.@{className}-leave {
|
||||
animation-timing-function: @ease-in-quint;
|
||||
}
|
||||
}
|
||||
.zoom-motion(rc-slider-tooltip-zoom-down, rcSliderTooltipZoomDown);
|
||||
}
|
||||
.zoom-motion(rc-slider-tooltip-zoom-down, rcSliderTooltipZoomDown);
|
||||
|
||||
@keyframes rcSliderTooltipZoomDownIn {
|
||||
@keyframes rcSliderTooltipZoomDownIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 50% 100%;
|
||||
|
|
@ -260,9 +264,9 @@
|
|||
transform-origin: 50% 100%;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rcSliderTooltipZoomDownOut {
|
||||
@keyframes rcSliderTooltipZoomDownOut {
|
||||
0% {
|
||||
transform-origin: 50% 100%;
|
||||
transform: scale(1, 1);
|
||||
|
|
@ -272,9 +276,9 @@
|
|||
transform-origin: 50% 100%;
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{prefixClass}-tooltip {
|
||||
.@{prefixClass}-tooltip {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
top: -9999px;
|
||||
|
|
@ -319,9 +323,9 @@
|
|||
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
|
||||
border-top-color: @tooltip-arrow-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.range-placeholder {
|
||||
.range-placeholder {
|
||||
height: 40px;
|
||||
padding: 15px 0;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -336,4 +340,5 @@
|
|||
border-radius: 6px;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
.leaflet-dragging .sticker-container {
|
||||
:global {
|
||||
.leaflet-dragging .sticker-container {
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.sticker-container {
|
||||
.sticker-container {
|
||||
outline: none;
|
||||
position: relative;
|
||||
transition: transform 250ms;
|
||||
|
|
@ -55,12 +56,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media(hover: hover) {
|
||||
@media (hover: hover) {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sticker-label {
|
||||
.sticker-label {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
position: absolute;
|
||||
|
|
@ -107,18 +108,18 @@
|
|||
right: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sticker-wrapper {
|
||||
.sticker-wrapper {
|
||||
will-change: transform;
|
||||
transition: transform 250ms;
|
||||
|
||||
@media (hover: hover) {
|
||||
transition: transform 0ms;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sticker-arrow {
|
||||
.sticker-arrow {
|
||||
position: absolute;
|
||||
transform-origin: 0 0;
|
||||
left: 0;
|
||||
|
|
@ -136,9 +137,9 @@
|
|||
top: 0;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sticker-delete {
|
||||
.sticker-delete {
|
||||
position: absolute;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
|
@ -170,25 +171,25 @@
|
|||
&::after {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-control-container .leaflet-routing-container-hide {
|
||||
.leaflet-control-container .leaflet-routing-container-hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.stickers-helper {
|
||||
.stickers-helper {
|
||||
flex-direction: column;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.stickers-grid {
|
||||
.stickers-grid {
|
||||
// display: grid;
|
||||
// grid-template-columns: repeat( auto-fit , minmax(48px, 1fr) );
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
.stickers-set-title {
|
||||
.stickers-set-title {
|
||||
opacity: 0.3;
|
||||
font-size: 0.8em;
|
||||
padding: 10px 0;
|
||||
|
|
@ -203,9 +204,9 @@
|
|||
background-color: #666666;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sticker-preview {
|
||||
.sticker-preview {
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
transform: scale(1);
|
||||
|
|
@ -221,9 +222,9 @@
|
|||
transform: scale(1.5);
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sticker-desc {
|
||||
.sticker-desc {
|
||||
min-width: 60px;
|
||||
z-index: -1;
|
||||
height: auto;
|
||||
|
|
@ -235,13 +236,13 @@
|
|||
color: white;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 10px 10px 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.sticker-desc-sizer {
|
||||
.sticker-desc-sizer {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: rgba(0,0,0,0);
|
||||
color: rgba(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
padding: 1px;
|
||||
|
||||
|
|
@ -260,4 +261,5 @@
|
|||
outline: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
.switch {
|
||||
:global {
|
||||
.switch {
|
||||
height: 1em;
|
||||
width: 2em;
|
||||
border-radius: 0.5em;
|
||||
|
|
@ -29,4 +30,5 @@
|
|||
background: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,20 @@
|
|||
.user-bar {
|
||||
:global {
|
||||
.user-bar {
|
||||
// width: 160px;
|
||||
|
||||
.button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.user-bar-guest {
|
||||
}
|
||||
|
||||
.user-bar-guest {
|
||||
// width: 168px;
|
||||
@media (min-width: @mobile_breakpoint) {
|
||||
width: 158px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-button {
|
||||
.user-button {
|
||||
width: 120px;
|
||||
padding-left: 48px;
|
||||
height: 48px;
|
||||
|
|
@ -28,9 +30,9 @@
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-button-picture {
|
||||
.user-button-picture {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background-size: cover;
|
||||
|
|
@ -39,9 +41,9 @@
|
|||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.user-button-fields {
|
||||
.user-button-fields {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -56,25 +58,25 @@
|
|||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-button-name {
|
||||
.user-button-name {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-button-text {
|
||||
.user-button-text {
|
||||
font-size: 12px;
|
||||
opacity: 0.5;
|
||||
padding-top: 2px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.user-panel {
|
||||
.user-panel {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.user-panel-menu {
|
||||
.user-panel-menu {
|
||||
position: absolute;
|
||||
bottom: 58px;
|
||||
left: 0;
|
||||
|
|
@ -89,27 +91,28 @@
|
|||
left: 0;
|
||||
z-index: 4;
|
||||
}
|
||||
}
|
||||
.user-panel-title {
|
||||
}
|
||||
|
||||
.user-panel-title {
|
||||
font-size: 20px;
|
||||
padding: 10px;
|
||||
|
||||
background: rgba(0,0,0, 0.5);
|
||||
box-shadow: inset rgba(255,255,255,0.1) 0 -1px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
box-shadow: inset rgba(255, 255, 255, 0.1) 0 -1px;
|
||||
border-radius: @panel_radius @panel_radius 0 0;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
.user-panel-ver {
|
||||
.user-panel-ver {
|
||||
font-size: 12px;
|
||||
vertical-align: text-top;
|
||||
opacity: 0.5;
|
||||
padding-left: 3px;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-panel-item {
|
||||
.user-panel-item {
|
||||
padding: 10px 10px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
|
@ -119,7 +122,7 @@
|
|||
box-sizing: border-box;
|
||||
user-select: none;
|
||||
display: block;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.1);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
text-decoration: none;
|
||||
|
||||
&:first-child::after {
|
||||
|
|
@ -142,15 +145,16 @@
|
|||
&:hover::after {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-panel-text {
|
||||
.user-panel-text {
|
||||
padding: 10px;
|
||||
opacity: 0.5;
|
||||
font-weight: 200;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.1);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
|
||||
div {
|
||||
padding-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue