mirror of
https://github.com/rsms/inter.git
synced 2024-12-25 08:33:40 +03:00
338 lines
8.0 KiB
CSS
338 lines
8.0 KiB
CSS
:root {
|
|
--strip-height: 40px;
|
|
}
|
|
|
|
#ctxedit-ui {
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
display: flex;
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
padding: 0 0;
|
|
height: var(--strip-height);
|
|
|
|
background: #111;
|
|
color: #ccc;
|
|
font-size: 12px;
|
|
/*border-top-left-radius: 4px;
|
|
border-bottom-left-radius: 4px;*/
|
|
|
|
padding: 0 50px;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
opacity:0;
|
|
transition: 90ms all cubic-bezier(0.25, 0.47, 0.44, 0.93);
|
|
transform: translate(0, var(--strip-height));
|
|
|
|
outline: none;
|
|
pointer-events: none;
|
|
}
|
|
#ctxedit-ui.visible {
|
|
opacity:1;
|
|
transform: translate(0, 0);
|
|
pointer-events: initial;
|
|
}
|
|
#ctxedit-ui .wrapper {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: stretch;
|
|
justify-content: center;
|
|
width: 100%;
|
|
max-width: 888px; /* same as base.css .row > * */
|
|
flex: 1 0 100%;
|
|
}
|
|
#ctxedit-ui .control {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
min-height: 30px;
|
|
margin: 0 16px;
|
|
}
|
|
#ctxedit-ui .control:first-child {
|
|
margin-left:0;
|
|
}
|
|
#ctxedit-ui .control.range {
|
|
flex: 1 1 auto;
|
|
max-width: 200px;
|
|
}
|
|
#ctxedit-ui .control > * {
|
|
flex: 1 1 auto;
|
|
margin:0;
|
|
box-sizing: border-box;
|
|
}
|
|
#ctxedit-ui .control > :last-child {
|
|
margin-right: 0;
|
|
}
|
|
#ctxedit-ui .control > select {
|
|
min-width: 8em;
|
|
flex: 0 1 auto;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
#ctxedit-ui .control > input,
|
|
#ctxedit-ui .control > select {
|
|
width: 0;
|
|
outline: none;
|
|
color: inherit;
|
|
}
|
|
#ctxedit-ui .control.popup {
|
|
margin-right: 0px;
|
|
}
|
|
#ctxedit-ui .control > select {
|
|
font: inherit;
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
border: none;
|
|
background-color: #111;
|
|
margin: 0;
|
|
padding: 0;
|
|
height: var(--strip-height);
|
|
background-image: url(popup.svg);
|
|
background-repeat: no-repeat;
|
|
width: 120px;
|
|
color: white;
|
|
opacity: 0.6;
|
|
background-position: left center;
|
|
padding-left: 20px;
|
|
line-height: var(--strip-height);
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
#ctxedit-ui .control > select::-ms-expand {
|
|
display: none;
|
|
}
|
|
#ctxedit-ui .control > select:-moz-focusring {
|
|
color: transparent;
|
|
text-shadow: 0 0 0 #fff;
|
|
background-color: #111;
|
|
font: inherit;
|
|
font-size: inherit;
|
|
}
|
|
#ctxedit-ui .control > select:hover {
|
|
opacity: 1;
|
|
}
|
|
#ctxedit-ui .control > input[type="number"],
|
|
#ctxedit-ui .control > input[type="text"] {
|
|
background: none;
|
|
border: none;
|
|
padding: 4px 0;
|
|
font-size: inherit;
|
|
/*border-radius: 2px;*/
|
|
}
|
|
#ctxedit-ui .control > input[type="number"] {
|
|
max-width: 48px;
|
|
text-align: left;
|
|
-moz-appearance: textfield;
|
|
-moz-font-feature-settings: 'tnum' 1;
|
|
-ms-font-feature-settings: 'tnum' 1;
|
|
-o-font-feature-settings: 'tnum' 1;
|
|
-webkit-font-feature-settings: 'tnum' 1;
|
|
font-feature-settings: 'tnum' 1;
|
|
}
|
|
#ctxedit-ui .control > input[type=number]::-webkit-inner-spin-button,
|
|
#ctxedit-ui .control > input[type=number]::-webkit-outer-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
#ctxedit-ui .control > input[type="range"] {
|
|
/*max-width: 80%;*/
|
|
flex: 1 1 auto;
|
|
display: block;
|
|
}
|
|
#ctxedit-ui .control > input[type="color"] {
|
|
width:20px;
|
|
height:20px;
|
|
border: none;
|
|
background: transparent;
|
|
}
|
|
#ctxedit-ui .control > img.icon,
|
|
#ctxedit-ui .control > label {
|
|
user-select: none;
|
|
font-family: georgia, serif;
|
|
font-style: italic;
|
|
color: white;
|
|
width: 16px;
|
|
height: 16px;
|
|
flex: 0 0 auto;
|
|
margin-right: 16px;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
#ctxedit-ui .button {
|
|
width: var(--strip-height);
|
|
height: var(--strip-height);
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
opacity: 0.6;
|
|
margin:0;
|
|
}
|
|
#ctxedit-ui .button:hover {
|
|
opacity: 1;
|
|
background-color: #292929;
|
|
}
|
|
#ctxedit-ui .button:active {
|
|
background-color: #444;
|
|
}
|
|
#ctxedit-ui .button.features-button { background-image: url(settings.svg); }
|
|
#ctxedit-ui .button.reset-button { background-image: url(reset.svg); }
|
|
#ctxedit-ui .button.dismiss-button { background-image: url(dismiss.svg); }
|
|
|
|
|
|
|
|
/* narrow viewports */
|
|
@media only screen and (max-width: 639px) {
|
|
#ctxedit-ui {
|
|
background: black;
|
|
height: calc(var(--strip-height) * 4);
|
|
}
|
|
#ctxedit-ui .wrapper {
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
|
|
|
|
.font-preload {
|
|
position: fixed;
|
|
display: block;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
|
|
.slider-value-tip {
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
position: fixed;
|
|
text-align: center;
|
|
width: 100px;
|
|
/*background: hotpink;*/
|
|
left: 500px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
z-index: 9;
|
|
transition: opacity 120ms ease-out;
|
|
filter: drop-shadow(0px 2px 6px rgba(0,0,0,0.2));
|
|
--fgcolor: #fff;
|
|
--bgcolor: #444;
|
|
}
|
|
.slider-value-tip .value {
|
|
padding: 4px 10px;
|
|
border-radius: 2px;
|
|
font-size: 11px;
|
|
letter-spacing: 0.013em;
|
|
color: var(--fgcolor);
|
|
background: var(--bgcolor);
|
|
-moz-font-feature-settings: 'tnum' 1;
|
|
-ms-font-feature-settings: 'tnum' 1;
|
|
-o-font-feature-settings: 'tnum' 1;
|
|
-webkit-font-feature-settings: 'tnum' 1;
|
|
font-feature-settings: 'tnum' 1;
|
|
z-index: 1;
|
|
}
|
|
.slider-value-tip .callout {
|
|
background: var(--bgcolor);
|
|
width:10px;
|
|
height:10px;
|
|
transform: translate(0, -6px) rotate(45deg);
|
|
z-index: 0;
|
|
}
|
|
.slider-value-tip.visible {
|
|
opacity: 1;
|
|
}
|
|
|
|
.styled-inputs-neg {
|
|
--track-thickness: 2px;
|
|
--track-color: rgba(255, 255, 255, 0.3);
|
|
|
|
--thumb-outline-thickness: 2px;
|
|
--thumb-outline-color: #111; /* match control strip */
|
|
--thumb-diameter: 10px;
|
|
--thumb-color: white;
|
|
|
|
--active-color: rgb(95, 170, 255);
|
|
}
|
|
|
|
.styled-inputs-neg input[type=range] {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
width: 100%;
|
|
height: var(--strip-height);
|
|
background: transparent;
|
|
}
|
|
.styled-inputs-neg input[type=range]:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.styled-inputs-neg input[type=range]::-webkit-slider-runnable-track {
|
|
width: 100%;
|
|
margin: 0;
|
|
animate: 0.2s;
|
|
background: var(--track-color);
|
|
height: var(--track-thickness);
|
|
}
|
|
.styled-inputs-neg input[type=range]:focus::-webkit-slider-runnable-track {
|
|
background: var(--active-color);
|
|
}
|
|
.styled-inputs-neg input[type=range]::-moz-range-track {
|
|
width: 100%;
|
|
margin: 0;
|
|
animate: 0.2s;
|
|
background: var(--track-color);
|
|
height: var(--track-thickness);
|
|
}
|
|
.styled-inputs-neg input[type=range]:focus::-moz-range-track {
|
|
background: var(--active-color);
|
|
}
|
|
|
|
.styled-inputs-neg input[type=range]::-webkit-slider-thumb {
|
|
--thumb-diameter2: calc(var(--thumb-diameter) + var(--thumb-outline-thickness) * 2);
|
|
width: var(--thumb-diameter2);
|
|
height: var(--thumb-diameter2);
|
|
border: var(--thumb-outline-thickness) solid var(--thumb-outline-color);
|
|
border-radius: 100%;
|
|
background: var(--thumb-color);
|
|
-webkit-appearance: none;
|
|
margin-top: calc(((var(--thumb-diameter2) / 2) - (var(--track-thickness) / 2)) * -1);
|
|
}
|
|
.styled-inputs-neg input[type=range]::-moz-range-thumb {
|
|
width: var(--thumb-diameter);
|
|
height: var(--thumb-diameter);
|
|
border: var(--thumb-outline-thickness) solid var(--thumb-outline-color);
|
|
border-radius: 100%;
|
|
background: var(--thumb-color);
|
|
margin-top: calc(((var(--thumb-diameter) / 2) - (var(--track-thickness) / 2)) * -1);
|
|
}
|
|
|
|
/* MS Edge -- note that we can't use CSS variables here */
|
|
.styled-inputs-neg input[type=range]::-ms-track {
|
|
background: transparent;
|
|
border-color: transparent;
|
|
border-width: 0 0;
|
|
color: transparent; /* markings */
|
|
height: 2px;
|
|
animate: 0.2s;
|
|
margin: 0;
|
|
}
|
|
.styled-inputs-neg input[type=range]::-ms-fill-lower,
|
|
.styled-inputs-neg input[type=range]::-ms-fill-upper {
|
|
background: white;
|
|
opacity: 0.3;
|
|
}
|
|
.styled-inputs-neg input[type=range]::-ms-thumb {
|
|
width: 9px;
|
|
height: 9px;
|
|
/*border: 2px solid rgba(0,0,0,0.8);*/
|
|
box-shadow: 0px 0px 0px 2px #111;
|
|
border-radius: 100%;
|
|
background: white;
|
|
}
|
|
/* Note: :focus selectors are buggy in Edge, so we skip that */
|