mirror of
https://github.com/GoogleChromeLabs/squoosh.git
synced 2025-11-11 16:26:20 +00:00
119 lines
2.1 KiB
CSS
119 lines
2.1 KiB
CSS
.options-scroller {
|
|
--horizontal-padding: 15px;
|
|
border-radius: var(--scroller-radius);
|
|
overflow: hidden;
|
|
|
|
/* At smaller widths, the multi-panel handles the scrolling */
|
|
@media (min-width: 600px) {
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
}
|
|
|
|
.options-title {
|
|
background-color: var(--main-theme-color);
|
|
color: var(--header-text-color);
|
|
margin: 0;
|
|
padding: 10px var(--horizontal-padding);
|
|
font-weight: bold;
|
|
font-size: 1.4rem;
|
|
border-bottom: 1px solid var(--off-black);
|
|
transition: all 300ms ease-in-out;
|
|
transition-property: background-color, color;
|
|
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
.original-image .options-title {
|
|
background-color: var(--black);
|
|
color: var(--white);
|
|
}
|
|
|
|
.option-text-first {
|
|
display: grid;
|
|
align-items: center;
|
|
grid-template-columns: 87px 1fr;
|
|
gap: 0.7em;
|
|
padding: 10px var(--horizontal-padding);
|
|
}
|
|
|
|
.option-toggle {
|
|
cursor: pointer;
|
|
display: grid;
|
|
align-items: center;
|
|
grid-template-columns: 1fr auto;
|
|
gap: 0.7em;
|
|
padding: 10px var(--horizontal-padding);
|
|
}
|
|
|
|
.option-reveal {
|
|
composes: option-toggle;
|
|
grid-template-columns: auto 1fr;
|
|
gap: 1em;
|
|
}
|
|
|
|
.option-one-cell {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
padding: 10px var(--horizontal-padding);
|
|
}
|
|
|
|
.section-enabler {
|
|
composes: option-toggle;
|
|
background: var(--dark-gray);
|
|
padding: 15px var(--horizontal-padding);
|
|
border-bottom: 1px solid var(--off-black);
|
|
}
|
|
|
|
.options-section {
|
|
background: var(--off-black);
|
|
}
|
|
|
|
.text-field {
|
|
background: var(--white);
|
|
color: var(--black);
|
|
font: inherit;
|
|
border: none;
|
|
padding: 6px 0 6px 10px;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.title-and-buttons {
|
|
grid-template-columns: 1fr;
|
|
grid-auto-columns: max-content;
|
|
grid-auto-flow: column;
|
|
display: grid;
|
|
gap: 0.8rem;
|
|
}
|
|
|
|
.title-button {
|
|
composes: unbutton from global;
|
|
svg {
|
|
--size: 20px;
|
|
display: block;
|
|
width: var(--size);
|
|
height: var(--size);
|
|
}
|
|
}
|
|
|
|
.cli-button {
|
|
composes: title-button;
|
|
|
|
svg {
|
|
stroke: var(--header-text-color);
|
|
}
|
|
}
|
|
|
|
.copy-over-button {
|
|
composes: title-button;
|
|
|
|
svg {
|
|
fill: var(--header-text-color);
|
|
}
|
|
}
|