contrapunctus/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

UX: change styling of dotmenu to make it more visible

Browse source
This commit is contained in:
Pieter Vander Vennet 2024-12-17 04:12:31 +01:00
parent b272c1cda7
commit b2915bdc4d
2 changed files with 69 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

64
public/css/index-tailwind-output.css
View file

@ -1324,20 +1324,20 @@ input[type="range"].range-lg::-moz-range-thumb {
margin: 0px; margin: 0px;
} }
.m-8 { .m-1 {
margin: 2rem; margin: 0.25rem;
} }
.m-2 { .m-2 {
margin: 0.5rem; margin: 0.5rem;
} }
.m-0\.5 { .m-8 {
margin: 0.125rem; margin: 2rem;
} }
.m-1 { .m-0\.5 {
margin: 0.25rem; margin: 0.125rem;
} }
.m-11 { .m-11 {
@ -1698,14 +1698,14 @@ input[type="range"].range-lg::-moz-range-thumb {
height: 6rem; height: 6rem;
} }
.h-screen {
height: 100vh;
}
.h-full { .h-full {
height: 100%; height: 100%;
} }
.h-screen {
height: 100vh;
}
.h-fit { .h-fit {
height: -webkit-fit-content; height: -webkit-fit-content;
height: -moz-fit-content; height: -moz-fit-content;
@ -2028,6 +2028,10 @@ input[type="range"].range-lg::-moz-range-thumb {
width: max-content; width: max-content;
} }
.w-48 {
width: 12rem;
}
.w-auto { .w-auto {
width: auto; width: auto;
} }
@ -2121,10 +2125,6 @@ input[type="range"].range-lg::-moz-range-thumb {
width: 0.25rem; width: 0.25rem;
} }
.w-48 {
width: 12rem;
}
.w-9\/12 { .w-9\/12 {
width: 75%; width: 75%;
} }
@ -2244,14 +2244,14 @@ input[type="range"].range-lg::-moz-range-thumb {
flex: 1 1 0%; flex: 1 1 0%;
} }
.flex-shrink {
flex-shrink: 1;
}
.flex-shrink-0 { .flex-shrink-0 {
flex-shrink: 0; flex-shrink: 0;
} }
.flex-shrink {
flex-shrink: 1;
}
.shrink-0 { .shrink-0 {
flex-shrink: 0; flex-shrink: 0;
} }
@ -2509,6 +2509,10 @@ input[type="range"].range-lg::-moz-range-thumb {
row-gap: 0.25rem; row-gap: 0.25rem;
} }
.gap-x-2 {
column-gap: 0.5rem;
}
.gap-y-2 { .gap-y-2 {
row-gap: 0.5rem; row-gap: 0.5rem;
} }
@ -2517,10 +2521,6 @@ input[type="range"].range-lg::-moz-range-thumb {
row-gap: 1rem; row-gap: 1rem;
} }
.gap-x-2 {
column-gap: 0.5rem;
}
.gap-x-1 { .gap-x-1 {
column-gap: 0.25rem; column-gap: 0.25rem;
} }
@ -3045,11 +3045,6 @@ input[type="range"].range-lg::-moz-range-thumb {
border-color: rgb(107 114 128 / var(--tw-border-opacity)); border-color: rgb(107 114 128 / var(--tw-border-opacity));
} }
.border-subtle {
--tw-border-opacity: 1;
border-color: rgb(219 234 254 / var(--tw-border-opacity));
}
.border-black { .border-black {
--tw-border-opacity: 1; --tw-border-opacity: 1;
border-color: rgb(0 0 0 / var(--tw-border-opacity)); border-color: rgb(0 0 0 / var(--tw-border-opacity));
@ -3065,6 +3060,11 @@ input[type="range"].range-lg::-moz-range-thumb {
border-color: rgb(209 213 219 / var(--tw-border-opacity)); border-color: rgb(209 213 219 / var(--tw-border-opacity));
} }
.border-gray-600 {
--tw-border-opacity: 1;
border-color: rgb(75 85 99 / var(--tw-border-opacity));
}
.border-gray-800 { .border-gray-800 {
--tw-border-opacity: 1; --tw-border-opacity: 1;
border-color: rgb(31 41 55 / var(--tw-border-opacity)); border-color: rgb(31 41 55 / var(--tw-border-opacity));
@ -4045,18 +4045,14 @@ input[type="range"].range-lg::-moz-range-thumb {
padding-bottom: 0.75rem; padding-bottom: 0.75rem;
} }
.pl-4 { .pt-2 {
padding-left: 1rem; padding-top: 0.5rem;
} }
.pr-4 { .pr-4 {
padding-right: 1rem; padding-right: 1rem;
} }
.pt-2 {
padding-top: 0.5rem;
}
.pl-1 { .pl-1 {
padding-left: 0.25rem; padding-left: 0.25rem;
} }
@ -5067,6 +5063,8 @@ input[type="range"].range-lg::-moz-range-thumb {
@font-face { @font-face {
font-family: "Source Sans Pro"; font-family: "Source Sans Pro";
/*This path might seem incorrect. However, 'index.css' will be compiled and placed in 'public/css', from where this path _is_ correct*/
src: url("../assets/fonts/source-sans-pro.regular.ttf") format("woff"); src: url("../assets/fonts/source-sans-pro.regular.ttf") format("woff");
} }

74
src/UI/Base/DotMenu.svelte
View file

@ -45,46 +45,48 @@
</div> </div>
<style> <style>
.dots-menu { .dots-menu {
z-index: 50; z-index: 50;
} }
:global(.dots-menu > path) { :global(.dots-menu > path) {
fill: var(--button-background-hover); fill: var(--button-background-hover);
transition: fill 350ms linear; transition: fill 350ms linear;
cursor: pointer; cursor: pointer;
} stroke-width: 0.8;
stroke: white;
}
:global(.dots-menu:hover > path, .dots-menu-opened > path) { :global(.dots-menu:hover > path, .dots-menu-opened > path) {
fill: var(--interactive-foreground); fill: var(--interactive-foreground);
} }
.collapsable { .collapsable {
max-width: 50rem; max-width: 50rem;
max-height: 10rem; max-height: 10rem;
transition: max-width 500ms linear, max-height 500ms linear, border 500ms linear; transition: max-width 500ms linear, max-height 500ms linear, border 500ms linear;
overflow: hidden; overflow: hidden;
flex-wrap: nowrap; flex-wrap: nowrap;
text-wrap: none; text-wrap: none;
width: max-content; width: max-content;
box-shadow: #ccc; box-shadow: #ccc;
white-space: nowrap; white-space: nowrap;
border: 1px solid var(--button-background); border: 1px solid var(--button-background);
background-color: white; background-color: white;
} }
.transition-background { .transition-background {
transition: background-color 150ms linear; transition: background-color 150ms linear;
} }
.transition-background.collapsed { .transition-background.collapsed {
background-color: #00000000; background-color: #00000000;
} }
.collapsed { .collapsed {
max-width: 0; max-width: 0;
max-height: 0; max-height: 0;
border: 2px solid #00000000; border: 2px solid #00000000;
pointer-events: none; pointer-events: none;
} }
</style> </style>