studio-variable/designtopack
4
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; top: 0;
z-index: 1; 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 { .dialog__inner .tracks {
display: flex; display: flex;
gap: var(--space-8); gap: var(--space-8);
width: 100%; width: 100%;
margin-left: calc(-1 * var(--space-16));
padding: var(--space-16);
overflow-x: scroll;
position: relative;
} }
/* Windows fix */ /* Windows fix */
[data-browser*='Windows'] .dialog__inner .tracks { /*[data-browser*='Windows'] .dialog__inner .tracks {
transform: translateY(0.46875rem); /* 7.5px */ transform: translateY(0.46875rem);
} }*/
.dialog__inner .tracks > *:last-child { .dialog__inner .tracks > *:last-child {
margin-right: 1rem; margin-right: var(--space-8);
} }
.dialog [data-pc-section='content'] [role='tablist'] { .dialog [data-pc-section='content'] [role='tablist'] {
height: 3.5rem; height: 3.5rem;

9
src/components/Selector.vue
View file

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