User:Nikki/narrow.css

/**
 * 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 */
}