studio-variable/designtopack
3
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

fix some styling issues

Browse source
This commit is contained in:
Timothée Goguely 2025-06-06 11:15:48 +02:00
parent 83247f1a96
commit a6238199e5
2 changed files with 22 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/assets/css/src/2.blocks.dialog.css
View file

@ -100,17 +100,31 @@
top: 0;
z-index: 1;
}
.dialog__inner .tracks-header .btn::before {
content: '';
display: block;
position: absolute;
top: -.75rem;
left: -3rem;
bottom: -.75rem;
width: 2.5rem;
background: linear-gradient(to right, transparent, var(--dialog-inner-background, #f7f7f7));
}
.dialog__inner .tracks {
display: flex;
gap: var(--space-8);
width: 100%;
margin-left: calc(-1 * var(--space-16));
padding: var(--space-16);
overflow-x: scroll;
position: relative;
}
/* Windows fix */
[data-browser*='Windows'] .dialog__inner .tracks {
transform: translateY(0.46875rem); /* 7.5px */
}
/*[data-browser*='Windows'] .dialog__inner .tracks {
transform: translateY(0.46875rem);
}*/
.dialog__inner .tracks > *:last-child {
margin-right: 1rem;
margin-right: var(--space-8);
}
.dialog [data-pc-section='content'] [role='tablist'] {
height: 3.5rem;

9
src/components/Selector.vue
View file

@ -113,15 +113,14 @@ function getFrontViewUrl(item) {
<style>
#selector-dropdown {
--selector-width: fit-content;
--selector-width: 21rem;
--row-gap: 0;
align-items: flex-start;
position: relative;
background: var(--color-background);
border-radius: var(--rounded-lg);
height: 3.75rem;
width: var(--selector-width, 20rem);
max-width: 20rem;
min-width: var(--selector-width, 21rem);
padding: var(--space-8) var(--space-48) var(--space-8) var(--space-64);
}
#selector-dropdown::before {
@ -143,8 +142,8 @@ function getFrontViewUrl(item) {
border: 1px solid var(--color-grey-200);
}
[role='combobox']:hover {
outline: 1px solid var(--color-grey-400);
border-color: var(--color-background);
outline: 0px solid var(--color-grey-400);
border-color: var(--color-grey-400);
}
[role='combobox'][aria-expanded='true'] {
outline: 2px solid var(--color-focus-ring);