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

#144

Browse source
This commit is contained in:
isUnknown 2025-04-04 14:58:49 +02:00
parent 806bc993da
commit c29906f306
5 changed files with 77 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -26,7 +26,8 @@
}
/* Header */
.dialog [data-pc-section="header"] {
.dialog [data-pc-section='header'] {
height: var(--dialog-header-h);
padding: 1rem;
color: var(--color-white);
@ -34,7 +35,14 @@
display: flex;
gap: var(--space-16);
}
.dialog:not(#physical-sample) [data-pc-section="header"] h2 {
@media screen and (max-width: 96rem) {
.dialog#virtual-sample.with-dtl [data-pc-section='header'] h2 {
text-align: left;
left: 27.5rem;
right: 9.5rem;
}
}
.dialog:not(#physical-sample) [data-pc-section='header'] h2 {
font-family: var(--font-serif);
position: absolute;
left: 15rem;
@ -47,7 +55,7 @@
text-overflow: ellipsis;
margin: 0 auto;
}
.dialog [data-pc-name="pcclosebutton"] {
.dialog [data-pc-name='pcclosebutton'] {
color: var(--color-white);
}
.dialog__tabs {
@ -66,7 +74,7 @@
.dialog__tabs .btn:hover {
--btn-background: var(--color-white-10);
}
.dialog__tabs .btn[aria-pressed="true"] {
.dialog__tabs .btn[aria-pressed='true'] {
--btn-background: var(--color-white);
--btn-color: var(--color-text);
--btn-border-color: var(--color-white);
@ -100,17 +108,21 @@
overflow-x: auto;
padding: var(--space-8) 1.5rem var(--space-8) var(--space-8);
margin: calc(-1 * var(--space-8));
-webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 3rem);
mask-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 3rem);
-webkit-mask-image: linear-gradient(
to left,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 1) 3rem
);
mask-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 3rem);
}
/* Windows fix */
[data-browser*="Windows"] .dialog__inner .tracks {
[data-browser*='Windows'] .dialog__inner .tracks {
transform: translateY(0.46875rem); /* 7.5px */
}
.dialog__inner .tracks > *:last-child {
margin-right: 1rem;
}
.dialog [data-pc-section="content"] [role="tablist"] {
.dialog [data-pc-section='content'] [role='tablist'] {
height: 3.5rem;
width: 100%;
display: flex;
@ -120,7 +132,7 @@
border-bottom: 1px solid var(--color-grey-700);
padding-top: 7px;
}
.dialog [data-pc-section="content"] [role="tab"] {
.dialog [data-pc-section='content'] [role='tab'] {
--tab-h: 3rem;
--tab-min-w: none;
--tab-py: var(--space-8);
@ -144,14 +156,14 @@
height: var(--tab-h);
border-bottom: var(--tab-border-w) solid var(--tab-border-color);
}
.dialog [data-pc-section="content"] [role="tab"][aria-selected="true"] {
.dialog [data-pc-section='content'] [role='tab'][aria-selected='true'] {
--tab-border-color: var(--color-white);
--tab-color: var(--color-white);
}
.dialog [data-pc-section="content"] [role="tab"]:focus-visible {
.dialog [data-pc-section='content'] [role='tab']:focus-visible {
z-index: 20;
}
.dialog [data-pc-section="content"] [role="tab"] .label {
.dialog [data-pc-section='content'] [role='tab'] .label {
flex-grow: 1;
font-weight: 500;
letter-spacing: 0.01em;
@ -159,7 +171,7 @@
}
/* Footer */
.dialog [data-pc-section="footer"] {
.dialog [data-pc-section='footer'] {
display: flex;
gap: var(--space-16);
height: var(--dialog-footer-h);
@ -172,7 +184,7 @@
.dialog#virtual-sample {
--dialog-inner-background: #f7f7f7;
}
.dialog#virtual-sample [data-pc-section="header"] h2 {
.dialog#virtual-sample [data-pc-section='header'] h2 {
left: 22.5rem;
right: 22.5rem;
}
@ -185,14 +197,13 @@
.dialog#virtual-sample.static #comments-container {
top: 8rem;
}
.dialog#virtual-sample.static [data-pc-section="footer"] {
.dialog#virtual-sample.static [data-pc-section='footer'] {
display: none;
}
.dialog#virtual-sample.static .dialog__inner {
height: calc(100% - 3.5rem) !important;
}
/* Physical Sample */
.dialog#physical-sample {
--dialog-header-h: 15rem;
@ -200,7 +211,7 @@
padding: var(--space-32) var(--space-32) 0;
overflow-y: auto;
}
.dialog#physical-sample [data-pc-section="header"] {
.dialog#physical-sample [data-pc-section='header'] {
display: flex;
flex-direction: column;
text-align: center;
@ -220,7 +231,7 @@
background-size: cover;
border-radius: var(--rounded-xl);
}
.dialog#physical-sample [data-pc-name="pcclosebutton"] {
.dialog#physical-sample [data-pc-name='pcclosebutton'] {
top: var(--space-40);
right: var(--space-40);
}
@ -251,7 +262,7 @@
--dialog-max-h: 676px;
--dialog-header-h: 8rem;
}
#optimization-request-dialog [data-pc-section="header"] {
#optimization-request-dialog [data-pc-section='header'] {
flex-direction: column;
align-items: center;
gap: 0;
@ -262,8 +273,8 @@
color: var(--color-black);
margin-block: var(--space-16) !important;
}
#project-request-dialog [data-pc-name="pcclosebutton"],
#optimization-request-dialog [data-pc-name="pcclosebutton"] {
#project-request-dialog [data-pc-name='pcclosebutton'],
#optimization-request-dialog [data-pc-name='pcclosebutton'] {
display: none;
}
#project-request-dialog #project-dtl {
@ -274,7 +285,7 @@
border-color: var(--color-primary-20);
background-color: var(--color-primary-10);
}
#project-request-dialog #project-dtl input[type="checkbox"] {
#project-request-dialog #project-dtl input[type='checkbox'] {
width: 1.75rem;
height: 1.75rem;
border-radius: var(--rounded-md);
@ -286,8 +297,8 @@
background-position: center right 1rem;
background-repeat: no-repeat;
}
#project-request-dialog [data-icon="leaf"],
#optimization-request-dialog [data-icon="leaf"] {
#project-request-dialog [data-icon='leaf'],
#optimization-request-dialog [data-icon='leaf'] {
--column-gap: var(--space-4);
padding: 0.25rem var(--space-8) 0.375rem;
background: var(--color-dtl-15);
@ -296,7 +307,7 @@
line-height: 1;
font-weight: 500;
}
#project-request-dialog [data-icon="leaf"]::before,
#optimization-request-dialog [data-icon="leaf"]::before {
#project-request-dialog [data-icon='leaf']::before,
#optimization-request-dialog [data-icon='leaf']::before {
transform: translateY(0.125rem);
}