Remove a bunch of form stuff and adjust random things to compensate

* Remove most of the special styles; most things are migrated to ooui
  now, and that thing is soup, but at least mostly matches the skin
  anyway
* Kill the special snowflake content/monospace fonts; these were
  actually messing up the ooui styles more than anything else
* Also make body text smaller, headers bigger to more clearly
  differentiate between them, with some of the larger sans serif
  options people might wind up with
* Override some overrides. Let's override these and then override the
  overrides for the overrides, and add more overrides later?
* Make whole thing slightly wider, because sheesh, this is narrow
* Make toctoggle show up like how rclegend toggle does

Either affects or should resolve the following:

Bug: T207610
Bug: T211360
Bug: T188968
Bug: T196243
Bug: T204780
Bug: T207601
Change-Id: I767562e4bbc0a9cdf13db61ce3ed493322edc054
isekai
Isarra 6 years ago
parent 5022852e92
commit 28a6d31912

@ -1,139 +1,9 @@
@import 'variables.less';
/*
* PREFERENCES AND FIELDSET STUFF
*/
#preferences {
margin: 0;
clear: both;
min-height: 400px;
input[ type='checkbox' ],
input[ type='radio' ] {
margin-left: 0;
}
}
.mw-prefs-buttons {
margin-top: 1em;
}
td.mw-input,
td.mw-label {
vertical-align: middle;
}
fieldset {
.box;
line-height: 1.3em;
margin: 1em 0;
background: @background;
legend {
padding: 0.5em 1.25em;
background: @background;
font-weight: bold;
color: @blue-dark;
}
}
label {
padding-left: 0.5em;
}
.mw-input label {
padding: 0;
margin-right: 1em;
}
.mw-label {
padding-right: 0.5em;
}
.mw-submit {
padding-top: 2em;
}
.htmlform-tip {
font-size: 85%;
color: @text;
line-height: 1.2em;
padding: 1em 0;
}
/*
*
* FORM STUFF
*
*/
/* pile of bad hacks to try to catch all the different ones */
input[ name='target' ],
input[ name='user' ],
input[ name='mime' ],
input[ size$='0' ],
input[ type='text' ],
input[ type='checkbox' ],
input[ type='radio' ],
input#wpTemplateSandboxPage,
input.mw-summary,
input.mw-input,
.mw-input input,
textarea,
.mw-ui-input-inline,
.mw-ui-input,
#searchInput {
box-sizing: border-box;
padding: 0.25em 0.35em;
border: solid 1px @grey;
margin: 0.5em 0;
box-shadow: inset 0 1px 1px 1px rgba( 0, 0, 0, 0.05 );
font-size: 1em;
min-height: 30px;
font-family: @fonts;
}
select {
padding: 0.25em;
margin: 0.5em 0;
}
input[ type='checkbox' ],
input[ type='radio' ] {
margin-left: 1em;
min-height: 0;
}
input[ type='checkbox' ] {
border-radius: 2px;
}
input[ type='radio' ] {
border-radius: 8px;
}
.mw-ui-button.mw-ui-progressive,
.mw-ui-button.mw-ui-progressive:active,
input[ type='submit' ],
input[ type='button' ],
button {
padding: 0.25em 1em 0.1em 1em;
border: solid 1px @grey;
border-bottom-width: @border;
box-sizing: border-box;
border-radius: @radius;
background: @background;
color: @text;
min-height: 30px;
box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.05 );
&:active {
background-color: @grey-bright;
}
&:hover {
background-color: @grey-bright;
}
}
textarea {
@ -141,41 +11,18 @@ textarea {
resize: vertical;
box-sizing: border-box;
line-height: 1.3em;
font-family: @fonts-monospace;
}
textarea#wpTextbox1 {
border-color: @grey;
border: solid 1px @grey;
}
div.editOptions {
padding: 1.25em 1.75em;
padding: 1em;
border: solid @grey;
border-width: 0 1px @border;
background: @background2;
.mw-summary label {
padding-left: 0;
}
input#wpSummary {
box-sizing: border-box;
width: 100%;
}
label {
margin-right: 1.5em;
}
// For Extension:TemplateSandbox and the like
fieldset,
legend {
background: inherit;
border: 0;
box-shadow: none;
padding: 0;
margin-top: 2em;
fieldset {
margin-top: 1em;
}
}
@ -187,54 +34,3 @@ div.editOptions {
#wpTemplateSandboxPreview {
margin-left: 0.5em;
}
/* Recent changes and watchlist options */
.rcoptions hr,
#mw-watchlist-options hr {
clear: both;
}
.rcoptions #namespace,
#mw-watchlist-options .namespaceselector {
margin-right: 2em;
}
/* Watchlist */
#mw-watchlist-options {
label {
padding: 0 1em 0 0;
}
input[ type='submit' ] {
margin: 0 0 0 4em;
}
}
/* Related changes hacks */
.mw-special-Recentchangeslinked {
.rcoptions {
input[ type='submit' ] {
float: right;
margin: 0 0 0 4em;
}
td.mw-label.mw-target-label {
vertical-align: top;
padding-top: 0.75em;
}
input[ name='target' ] {
float: left;
}
}
#showlinkedto {
clear: left;
float: left;
}
label[ for='showlinkedto' ] {
padding: 0.4em;
float: left;
}
}

@ -1,22 +1,5 @@
@import 'variables.less';
.skin-timeless {
.oo-ui-tagMultiselectWidget-handle,
.oo-ui-capsuleMultiselectWidget-handle {
// Same as for regular <input> and <textarea>, copied from form.less
border-color: @grey;
margin: 0.5em 0;
min-height: 0;
> .oo-ui-tagMultiselectWidget-content > input,
> .oo-ui-capsuleMultiselectWidget-content > input {
// OOUI forgets to reset these properties when making the <input> invisible
box-shadow: none;
min-height: 0;
}
}
}
.skin-timeless .oo-ui-windowManager-modal > .oo-ui-dialog,
.skin-timeless .ve-ui-overlay-global {
z-index: 101;

@ -69,16 +69,16 @@ body {
line-height: 1;
a {
padding: 0.2em 1em;
padding: 0.1em 1em 0.2em;
color: @text;
font-family: @fonts-secondary;
font-variant: small-caps;
font-size: 1.75em;
font-size: 1.85em;
display: block;
/* 13+ character names */
&.long {
font-size: 1.45em;
font-size: 1.5em;
padding: 0 0.75em 0 0;
line-height: 0.8;
}
@ -327,7 +327,7 @@ a.mw-selflink {
.mw-indicators {
float: right;
margin: 0.25em 0 0 1em;
margin: 1em 0 0 1em;
}
.mw-indicator {
@ -424,23 +424,23 @@ pre,
}
h1 {
font-size: 2em;
font-size: 2.25em;
}
h2 {
font-size: 1.7em;
font-size: 2em;
}
h3 {
font-size: 1.5em;
font-size: 1.75em;
}
h4 {
font-size: 1.35em;
font-size: 1.5em;
}
h5 {
font-size: 1.25em;
font-size: 1.35em;
}
h6 {
@ -455,6 +455,10 @@ pre,
margin-bottom: 1em;
}
.mw-changeslist-legend dt {
margin: 0 0.5em 0 0;
}
.mw-changeslist-legend dd {
margin-bottom: 0;
}
@ -477,7 +481,6 @@ hr {
pre {
overflow: auto;
white-space: pre-wrap;
font-family: @fonts-monospace;
}
p {
@ -561,19 +564,8 @@ ul#filetoc {
border-bottom-color: @grey;
}
.toctoggle {
color: @background3;
}
// Remove brackets around the show/hide button of the TOC
body :not( :checked ) > .toctogglespan:before,
body :not( :checked ) > .toctogglespan:after {
content: '';
}
.toctogglelabel {
padding-left: 0; // Overwrite label { padding-left: 0.5em; } from forms.less
margin-left: 0.5em; // Create new distance to the TOC title without increasing the focus ring
.toctogglespan {
float: right;
}
.toc li:last-child {
@ -588,11 +580,16 @@ body :not( :checked ) > .toctogglespan:after {
color: @grey-dark;
}
.skin-timeless .mw-body .oo-ui-tagMultiselectWidget-handle,
.skin-timeless .mw-body .oo-ui-capsuleMultiselectWidget-handle {
margin: 0; // wat
}
.mw-body .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend, // wat
.mw-changeslist-legend,
.mw-body .mw-search-profile-tabs,
.mw-body fieldset#mw-searchoptions,
.wikitable {
border: 0;
color: @text;
.box;
}

@ -90,7 +90,7 @@
padding: 0.7em 0 0 25px;
font-family: @fonts-secondary;
font-weight: normal;
font-size: 1.1em;
font-size: 1.25em;
.background-image-svg( 'images/user-grey.svg', 'images/user-grey.png' );
background-position: left 7px;
background-repeat: no-repeat;

@ -37,15 +37,13 @@
// Fonts are chosen for consistent metrics, not necessarily overall prettiness.
// This will NEED fixes for different languages.
@fonts: 'Helvetica Neue', 'Nimbus Sans', 'Helvetica', 'Arial', sans-serif;
@fonts: sans-serif;
@fonts-secondary: 'Linux Libertine', 'Times New Roman', serif;
// Based on information on https://wiki.archlinux.org/index.php/Metric-compatible_fonts
@fonts-monospace: 'Consolas', 'Courier', 'Nimbus Mono', 'Liberation Mono', 'Courier New', monospace;
@border: 0.2em;
@radius: 0.2em;
@font-size: 0.95em;
@font-size: 0.9em;
// Widths
@ -60,7 +58,7 @@
@desktop-large-floor: 1340px;
// The max-width for the content
@content-width: 100em;
@content-width: 110em;
@content-padding: 2em;
@ -113,6 +111,7 @@
margin: 1em 0;
line-height: 1.1;
word-wrap: break-word;
font-size: 95%;
ul,
li {
@ -134,7 +133,7 @@
}
li {
margin: 0 0 0.35em;
padding: 0.25em 0;
}
}

Loading…
Cancel
Save