resources/src/mediawiki.special.apisandbox/apisandbox.less
@import 'mediawiki.skin.variables.less';
@import 'mediawiki.mixins.less';
.mw-apisandbox-toolbar {
background: #fff;
.position-sticky();
top: 0;
padding: 0.5em 0;
box-shadow: 0 2px 0 0 rgba( 0, 0, 0, 0.1 );
text-align: right;
z-index: 1;
}
#mw-apisandbox-ui .mw-apisandbox-link {
display: none;
}
.mw-apisandbox-popup {
.oo-ui-popupWidget-body > .oo-ui-widget {
vertical-align: middle;
}
/* So DateTimeInputWidget's calendar popup works... */
.oo-ui-popupWidget-popup,
.oo-ui-popupWidget-body {
overflow: visible;
}
/* Display contents of the popup on a single line */
& > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-body {
display: table;
}
& > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-body > * {
display: table-cell;
}
& > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-body > .oo-ui-buttonWidget {
padding-left: 0.5em;
width: 1%;
}
&-help {
min-width: 25em;
.oo-ui-popupWidget-body-padded {
// TODO: Upstream this fix (T266223)
margin-top: 5px;
}
}
}
.mw-apisandbox-help-field {
border-bottom: 1px solid rgba( 0, 0, 0, 0.1 );
padding-bottom: 12px;
&:last-child {
border-bottom: 0;
}
}
.mw-apisandbox-optionalWidget {
width: 100%;
&.oo-ui-widget-disabled {
position: relative;
z-index: 0; /* New stacking context to prevent the cover from leaking out */
}
&-cover {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 2;
cursor: pointer;
}
&-fields {
display: table;
width: 100%;
}
&-widget,
&-checkbox {
display: table-cell;
vertical-align: middle;
}
&-checkbox {
width: 1%; /* Will be expanded by content */
white-space: nowrap;
padding-left: 0.5em;
}
}
.mw-apisandbox-textInputCode .oo-ui-inputWidget-input {
font-family: monospace, monospace;
font-size: 0.8125em;
/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
-moz-tab-size: 4;
/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
tab-size: 4;
}
.mw-apisandbox-help-field,
.mw-apisandbox-widget-field {
max-width: 70em;
}
.mw-apisandbox-widget-field {
.oo-ui-textInputWidget {
/* Leave at least enough space for icon, indicator, and a sliver of text */
min-width: 6em;
}
&.oo-ui-labelElement.oo-ui-fieldLayout-align-left > .oo-ui-fieldLayout-body {
& > .oo-ui-fieldLayout-header {
width: 30%;
}
& > .oo-ui-fieldLayout-field {
width: 70%;
}
}
}
/* stylelint-disable selector-class-pattern */
.apihelp-deprecated,
.apihelp-internal {
font-weight: bold;
color: @color-error;
}
/* stylelint-enable selector-class-pattern */
.mw-apisandbox-deprecated-value .oo-ui-labelElement-label {
text-decoration: line-through;
}
.oo-ui-menuOptionWidget .mw-apisandbox-flag {
line-height: 1.42857143em;
color: @color-subtle;
float: right;
}