mirror of
https://github.com/GoogleChromeLabs/squoosh.git
synced 2025-11-11 16:26:20 +00:00
76 lines
1.5 KiB
CSS
76 lines
1.5 KiB
CSS
.options-scroller {
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
--horizontal-padding: 15px;
|
|
border-radius: var(--scroller-radius);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|