MediaWiki:Common.less/ooui.less

// <pre>
/* =====================
       general fixes
   ===================== */

// fix placeholder text being 1px higher than actual text
.oo-ui-textInputWidget input,
.oo-ui-textInputWidget > .oo-ui-labelElement-label {
    line-height: initial;
}

// fix modals with sticky wiki header
body.wgl-stickyheader .oo-ui-defaultOverlay,
body.wgl-stickyheader.skin-vector .oo-ui-windowManager-modal > .oo-ui-dialog,
body.wgl-stickyheader.skin-vector .ve-ui-overlay-global {
	z-index: 501;
}

// lighten grey background on disabled buttons
.oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button {
	background-color: #dfe2e6;
	border-color: #d7dadd;
}

/* =====================
       custom icons
   ===================== */
   
// destructive version of clear icon
.oo-ui-image-destructive.oo-ui-icon-clear, .mw-ui-icon-clear-destructive::before {
	background-image: url(/load.php?format=rasterized&image=clear&lang=en-gb&modules=oojs-ui.styles.icons-interactions&skin=vector&variant=destructive&version=1xdd7g0);
	background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Cg fill=%22%23d33%22%3E%3Ctitle%3Eclear%3C/title%3E%3Cpath d=%22M10 0a10 10 0 1 0 10 10A10 10 0 0 0 10 0zm5.66 14.24l-1.41 1.41L10 11.41l-4.24 4.25-1.42-1.42L8.59 10 4.34 5.76l1.42-1.42L10 8.59l4.24-4.24 1.41 1.41L11.41 10z%22/%3E%3C/g%3E%3C/svg%3E");
}

/* =============================================
       [[MediaWiki:Gadget-exchangeCreate.js]]
   ============================================= */

// entire modal
.rs-ex-modal {

    // override inline styles
	.oo-ui-window-frame {
        width: 600px !important; // medium is too narrow, large is too wide
        height: 540px !important; // increase height to make up for "data loaded" line
	}

	// submit button
	.oo-ui-flaggedElement-primary {
		margin-left: 15px;
	}

}

// "data loaded" message
#rs-ex-status {
	color: @gray-chateau;
	margin: 10px 15px 5px;
}

// form area
#rs-ex-form {

	// heading
	.oo-ui-fieldsetLayout-header {
		font-family: @serif-stack;
		font-size: 1.3em;
		margin: 0 15px 10px;
	}

	// fields
	.oo-ui-fieldsetLayout-group {
		margin-bottom: 15px;
	}

	// field label
	.oo-ui-fieldLayout-header {
		width: 15%;
		margin-right: 23px;
	}
	
	// field input box
	.oo-ui-fieldLayout-field {
		width: 70%;
	}

	// help icon
	.oo-ui-fieldLayout-help {
		margin-right: 1em;
		margin-left: -1.8em;
	}

}

// fixes for inventory icon field
#rs-ex-icon {

	// original padding covered the end of the input and made it unclickable
	.oo-ui-labelElement-label {
		padding-right: 0;
	}

	// not sure why padding doesn't account for "File:" label
	// override inline style
	.oo-ui-inputWidget-input {
		padding-left: 33px !important;
	}

}

/* ================================
     [[Template:Form calculator]]
   ================================ */

#repairForm {
    padding: 7px;
    
    // Left side width
    .oo-ui-fieldLayout-header {
        width: 45%;
    }
    
    // Centered left side text
    .oo-ui-fieldLayout-header .oo-ui-labelElement-label {
        margin-top:3px
    }
    
    // Right side width
    .oo-ui-fieldLayout-field {
        width: 50%;
    }
    
    // Submit button, autosubmit toggle
    .jsCalc-field-submit .oo-ui-buttonElement,
    .jsCalc-field-autosubmit .oo-ui-toggleSwitchWidget {
        margin: 0 auto;
        display: block;
        padding-top:5px;
    }
    
    // Removes the top calculator (unable to find this in LUA)
    .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label {
        display:none;
    }
}

/* =============================
           VisualEditor
   ============================= */

.ve-ui-overlay {
	font-family: @sans-serif-stack;
}

.ve-ui-mwSaveDialog-license {
	line-height: 1.65em;
}

// reviewing diffs in "Save your changes" modal
.ve-ui-mwSaveDialog-savePanel .mw-summary-preview {
	border-bottom: 1px solid @silver;
	line-height: 1.65em;
	padding-bottom: 1em;
	margin-bottom: 1.5em;
}

[data-diff-action='remove'],
table[data-diff-action='remove'] > caption,
figure[data-diff-action='remove'] > figcaption {
	background: @apricot-peach !important;
	box-shadow: 0 0 0 1px @apricot-peach;
}

// remove line-through
del[data-diff-action='remove'],
[data-diff-action='remove'] > del {
	text-decoration: initial;
}

[data-diff-action='insert'],
table[data-diff-action='insert'] > caption,
figure[data-diff-action='insert'] > figcaption {
	background: @caper !important;
	box-shadow: 0 0 0 1px @caper;
}