User:Nikki/narrow.css
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/**
* This is some minimal proof-of-concept CSS which attempts to make the Wikidata
* desktop interface work better on narrower screens.
*
* See [[User:Nikki/NarrowUI]] for a more polished version.
*
* This can be used with any skin but on mobile, it works best with the Minerva,
* Timeless or Monobook skins because they have a mobile-friendly mode.
*
* To use it, add the following line to the top of your common.css:
* @import url("//www.wikidata.org/w/index.php?title=User:Nikki/narrow.css&action=raw&ctype=text/css");
*
* @license CC0-1.0
*/
/*** Display property labels above the list of statements ***/
.wikibase-statementgrouplistview .wikibase-statementgroupview-property .wikibase-statementgroupview-property-label {
/* remove float so that things stack vertically */
float: none; /* was: left (ltr), right (rtl) */
}
.wikibase-statementgrouplistview .wikibase-statementgroupview:not(.wb-new) .wikibase-statementgroupview-property {
/* make the property label use the full width now that the property label is above the statements */
width: 100%; /* was: 15em */
/* absolute positioning = chaos */
position: static; /* was: absolute */
}
.wikibase-statementgroupview .wikibase-statementgroupview-property {
/* fix the borders: the one between the property and statements should be 0 */
/* the property was to the left (or right), so it was the right (or left) border */
/* but the property is now above, so it's now the bottom border */
border: 1px solid #c8ccd1;
border-bottom: 0;
}
.wikibase-statementgrouplistview .wikibase-statementgroupview:not(.wb-new) .wikibase-statementlistview {
/* fix border (see above) */
border: 1px solid #c8ccd1;
/* make statements use the full width now that the property label is above the statements */
margin-inline-start: auto; /* was: margin-left: 15em (ltr), margin-right: 15em (rtl) */
width: 100%; /* was: calc(100% - 15em - 2px) */
}
.wikibase-statementgrouplistview .wikibase-statementgroupview-property .wikibase-statementgroupview-property-label {
/* distribute the padding above and below the property label evenly so that it is positioned in the middle of the line */
padding-block: 5px; /* was: padding: 10px; padding-bottom: 0; */
}
/*** Make sitelinks section sizing more dynamic ***/
.wikibase-sitelinklistview .wikibase-sitelinkview.wb-edit .wikibase-sitelinkview-siteid-container,
.wikibase-sitelinklistview .wikibase-sitelinkview.wb-edit .wikibase-sitelinkview-link {
/* display the site ID and page name on separate lines when editing */
display: block; /* was: inline-block, inline */
}
.wikibase-sitelinkview .wikibase-sitelinkview-page input {
/* the width gets set dynamically and it doesn't work well, force override it */
width: auto !important;
}
/*** Main statement toolbar ***/
.wikibase-entityview .wikibase-statementview .wikibase-toolbar-container {
/* remove absolute positioning for the main edit toolbar */
position: static; /* was: absolute */
}
div.wikibase-statementview-mainsnak {
/* remove space that was reserved for the edit toolbar */
margin-right: 0; /* was: 18em */
}
/*** Gridify qualifiers and references ***/
.wikibase-statementview-qualifiers .wikibase-snaklistview .wikibase-snaklistview-listview .wikibase-snakview,
.wikibase-referenceview .wikibase-snaklistview-listview .wikibase-snakview {
/* display qualifiers and references as a grid: */
/* | property | value ... ... | edit buttons | */
display: grid;
grid-template-columns: auto 1fr auto;
}
.wikibase-statementview-qualifiers .wikibase-snaklistview .wikibase-snaklistview-listview .wikibase-snakview-value-container,
.wikibase-referenceview .wikibase-snaklistview-listview .wikibase-snakview-value-container {
/* uncomment to put qualifier/reference values below the property */
/* grid-row: 2; */
}
.wikibase-statementview-qualifiers .wikibase-snaklistview .wikibase-snaklistview-listview .wikibase-snakview-value-container,
.wikibase-referenceview .wikibase-snaklistview-listview .wikibase-snakview-value-container {
/* remove space that was reserved for absolutely positioned property label */
margin-inline-start: 0; /* was: margin-left: 12em (ltr), margin-right: 12em (rtl) */
}
.wikibase-statementview-qualifiers .wikibase-snaklistview .wikibase-snaklistview-listview .wikibase-snakview-value-container .wikibase-snakview-body,
.wikibase-referenceview .wikibase-snaklistview-listview .wikibase-snakview-value-container .wikibase-snakview-body {
/* remove space that was reserved for absolutely positioned edit buttons */
margin-inline-end: 0; /* was: margin-right: 18em (ltr), margin-left: 18em (rtl) */
}
.wikibase-statementview-qualifiers .wikibase-snaklistview .wikibase-snaklistview-listview .wikibase-snakview-property,
.wikibase-referenceview .wikibase-snaklistview-listview .wikibase-snakview-property {
/* don't position the property label absolutely */
position: static; /* was: absolute */
/* uncomment the following line to have variable width property names instead */
/* width: auto; */ /* was: 12em */
}
.wikibase-statementview-qualifiers .wikibase-toolbar-container,
.wikibase-referenceview .wikibase-toolbar-container {
/* don't position edit buttons absolutely */
position: static; /* was: absolute */
/* variable width edit buttons that only take as much space as they need */
width: auto; /* was: 18em */
/* uncomment to set a minimum width for the edit buttons for less variability */
/* min-width: 8em; */
/* add a small amount of padding so that the text doesn't touch the side */
padding-inline-end: 0.5em;
}
.wikibase-statementview-qualifiers .wikibase-snaklistview .wikibase-snaklistview-listview .wikibase-snakview-property input,
.wikibase-referenceview .wikibase-snaklistview-listview .wikibase-snakview-property input {
/* don't position the property input field when adding new qualifiers/references absolutely */
position: static; /* was: absolute */
}