style.less

// Query Service style.less file

// Import Codex Design Tokens.
// For a list of available tokens,
// see: https://doc.wikimedia.org/codex/latest/design-tokens/overview.html
@import ( reference ) 'node_modules/@wikimedia/codex-design-tokens/theme-wikimedia-ui.less';
@import ( reference ) './css-icon.less';
@import ( less ) 'node_modules/@wikimedia/codex/dist/codex.style.css';

// == Colors =================================================================
// Codex “WikimediaUI” color palette
// Don't use those variables directly, instead define your vars
// referring to them as applied further below

// 'Progressive' Color, Background Color and states
@color-progressive-90:            rgba( 51, 102, 204, 0.9 );
@color-progressive-80:            rgba( 51, 102, 204, 0.8 );
@color-progressive-75:            rgba( 51, 102, 204, 0.75 );
@color-progressive-70:            rgba( 51, 102, 204, 0.7 );
@color-progressive-65:            rgba( 51, 102, 204, 0.65 );
@color-progressive-60:            rgba( 51, 102, 204, 0.6 );
@color-progressive-55:            rgba( 51, 102, 204, 0.55 );
@color-progressive-50:            rgba( 51, 102, 204, 0.5 );
@color-progressive-45:            rgba( 51, 102, 204, 0.45 );

// Border Colors
@border-color-soft:               #eaecf0;
@border-soft:                     @border-width-base @border-style-base @border-color-soft;

// CodeMirror
@codemirror-color-atom:       #2a4b8d;
@codemirror-color-builtin:    #b32424;
@codemirror-color-comment:    #72777d;
@codemirror-color-keyword:    @codemirror-color-builtin;
@codemirror-color-string:     #ac6600;
@codemirror-color-variable-2: #14866d;

// == Rules ==================================================================

html {
	background-color: @background-color-base;
	// override Bootstrap's html font-size (10px), which is way too small
	// (this is relevant for rem elsewhere, especially in Leaflet: T311139)
	font-size: 1em;
}

body {
	height: 100%;
	overflow-y: scroll;
	width: 100%;
}

pre {
	background: @background-color-interactive-subtle;
	border-radius: @border-radius-base;
	color: @color-base;
}

a {
	color: @color-progressive;

	&:hover {
		color: @color-progressive--hover;
	}

	&:active {
		color: @color-progressive--active;
	}
}

#empty-query-error,
#hide-explorer,
#loading-spinner,
#query-error,
#query-error-short,
#query-result,
.action-bar,
.explorer-panel,
.result {
	display: none;
}

.banner {
	background-color: @background-color-interactive;
	border: @border-subtle;
	padding: 15px 25px;
	display: flex;
	align-items: center;
	justify-content: space-between;

	&__text {
		display: flex;
		align-items: center;
	}

	button {
		margin-top: -2px;
		padding-left: 15px;
	}

	.glyphicon {
		padding: 0 0.5em 0 0;
		font-size: 18px;
	}
}

.navbar,
.toolbar {
	box-shadow: none;
	white-space: nowrap;
}

.navbar {
	margin-bottom: 0;

	.dropdown-menu {
		background: @background-color-interactive-subtle;
		z-index: 1001; /* above the Leaflet control containers */
		& > li > a {
			border-radius: @border-radius-base;
			padding: 5px 20px;
		}

		& > li > a:hover {
			background: @background-color-base;
		}
	}

	.help {
		padding-left: 0;
	}

	&-brand {
		line-height: 35px;
		padding: 5px 15px;
		vertical-align: middle;

		a {
			text-decoration: none;
		}

		img {
			margin-left: 2px;
			margin-right: 10px;
			height: 31px;
			width: auto;
		}
	}

	&-btn {
		margin-left: 15px;
	}

	&-default {
		background: @background-color-interactive-subtle;
		border-bottom: @border-subtle;
		border-radius: @border-radius-base;
	}

	&-right {
		margin-right: 0;
	}

	&-toggle {
		z-index: 100;
	}
}

a.disabled {
	color: @color-disabled;
}

.btn:active {
	box-shadow: none;
}

.btn-default {
	background: @background-color-interactive-subtle;
	border-radius: @border-radius-base;
	border: @border-subtle;
	box-shadow: none;
	text-shadow: none;

	&:active {
		background: @background-color-interactive;
	}

	&:hover {
		background: @background-color-base;
	}
}

.cdx-css-icon {
	&--play {
		.cdx-mixin-css-icon( @cdx-icon-play, @param-fill-color: @color-inverted );
	}

	&--stop {
		.cdx-mixin-css-icon( @cdx-icon-stop, @param-fill-color: @color-inverted );
	}
}

.form-control {
	border-radius: @border-radius-base;
}

.wikibase-queryservice {
	background-color: @background-color-base;
}

.action-bar {
	.progress {
		font-size: 30px;
		height: 30px;
	}

	.progress-bar {
		font-size: 16px;
		font-weight: bold;
		line-height: 30px;
	}

	.label {
		display: block;
		font-size: 16px;
		line-height: 20px;
	}
}

#empty-query-error {
	color: @color-error;
	font-size: 1.5em;
	margin-top: 5%;
}

.error {
	font-family: @font-family-monospace--fallback;
	margin: 20px;
	overflow-x: scroll;
	white-space: pre;
}

.label,
.progress {
	border-radius: @border-radius-base;
}

.label-danger {
	background: @color-error;
}

.graph-iframe {
	border: 0;
	height: 90vh;
	margin: 0;
	width: 100%;
}

#layout-options {
	margin-top: -35px;
	text-align: center;
}

.error-line {
	border-bottom: @border-width-thick dotted @border-color-error;
}

.error-character {
	background: @background-color-error;
	color: @color-inverted;
}

#query-result {
	width: 100%;

	pre {
		background-color: inherit;
		border: 0;
		display: inline;
		font-family: @font-family-serif--fallback;
		font-size: 12px;
		margin: 10px 30px;
		overflow: auto;
		tab-size: 21;
		width: 900px;
	}
	/* MultiDimensionResultBrowser */
	.foreground path {
		fill: none;
		pointer-events: none;
		stroke-opacity: 0.4;
		stroke-width: 3px;
		stroke: #222;
	}
	/* MultiDimensionResultBrowser */
	.axis {
		line,
		path {
			fill: none;
			stroke-width: 1px;
			stroke: #000;
		}

		.title {
			font-size: 8px;
			font-weight: bold;
			text-transform: uppercase;
			transform: rotate( -12deg ) translate( -5px, -6px );
		}
	}
	/* MultiDimensionResultBrowser */
	.brush .extent {
		fill-opacity: 0.3;
		stroke-width: 1px;
		stroke: @background-color-base;
	}
	/* Tree */
	.jstree {
		padding: 1em;

		&-default .jstree-wholerow {
			&-hovered {
				background: @background-color-progressive--hover;
				border-radius: @border-radius-base;
				color: @color-inverted;
			}

			&-clicked {
				background: @background-color-progressive;
				border-radius: @border-radius-base;
				color: @color-inverted;
			}
		}

		a.jstree-anchor.jstree-clicked {
			color: @color-inverted;
		}
	}
	/* Treemap */
	.labelbody {
		background: @background-color-transparent;
		cursor: pointer;
		overflow: hidden;
	}
	/* ImageGrid */
	.img-grid {
		font-size: 0.85em;
		margin: 2em auto;
		padding: 0;
		width: 95%;
	}
}

#response-summary {
	font-size: 100%;
}

#result-browser-menu {
	.fa,
	.glyphicon {
		padding: 0 0.5em 0 0;
	}
}

.toolbar-label {
	position: absolute;
}

.toolbar-icon {
	position: relative;
	left: 105px;
}

.table-cell-selected {
	background-color: @background-color-progressive-subtle;
}

.fixed-table-pagination {
	margin-bottom: 2.5em;
}

a.item-link {
	overflow-wrap: anywhere;
}

.CodeMirror {
	border-left: @border-subtle;
	border: 0;
	height: 100%;

	.cm-atom {
		color: @codemirror-color-atom;
	}

	.cm-bracket {
		color: inherit;
	}

	.cm-builtin {
		color: @codemirror-color-builtin;
	}

	.cm-comment {
		color: @codemirror-color-comment;
	}

	.cm-keyword {
		color: @codemirror-color-keyword;
	}

	.cm-operator {
		color: inherit;
	}

	.cm-string {
		color: @codemirror-color-string;
	}

	.cm-variable-2 {
		color: @codemirror-color-variable-2;
	}

	&-scroll {
		min-height: 320px;
	}

	&-hints {
		direction: ltr;
	}

	&-hint {
		max-width: 19em;
	}
}

pre.CodeMirror-placeholder {
	color: @color-placeholder;
}

.queryEditor {
	border: 0;
	font-family: @font-family-monospace--fallback;
	min-height: 273px;
	padding: 0;
	width: 100%;
}

.exampleQueries {
	width: 160px;
}

.exampleIcons {
	width: 0;
}

iframe.shortUrl {
	border: 0;
	height: 40px;
	width: 250px;
}

div.shortUrl {
	height: 40px;
	width: 250px;
}

.dropdown-menu {
	border-radius: @border-radius-base;
}

.query-main {
	display: flex;
	flex-direction: row;
	max-width: 100%;

	& > .toolbar {
		display: flex;
		flex-direction: column;
		flex: 0 0 55px;

		.dropdown-menu {
			padding-left: 0.8em;
			padding-right: 0.8em;
		}
	}
}

.query-helper-and-editor {
	display: flex;
	flex-direction: row;
	flex: 1 1 auto;
}

#query-box {
	position: relative;

	.status {
		color: @color-subtle;
		font-size: 12px;
		margin-bottom: 5px;
		min-height: 25px;
		padding: 3px;

		.badge {
			border-radius: @border-radius-base;
			border: @border-soft;
		}

		.list-group-item-danger {
			background-color: @background-color-destructive-subtle;
			color: @color-notice;
			text-decoration-color: @color-notice;
		}

		.list-group-item-success {
			background-color: @background-color-success-subtle;
			color: @color-notice;
			text-decoration-color: @color-notice;
		}

		.list-group-item-warning {
			background-color: @background-color-warning-subtle;
			color: @color-notice;
			text-decoration-color: @color-notice;
		}
	}

	.nav {
		margin-left: 0;
	}

	.toolbar {
		border-right: @border-subtle;

		.fa {
			font-size: 1.5em;
		}

		&-bottom {
			flex-grow: 0;
			padding-bottom: 0.5rem;
			padding-top: 0.5rem;
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;

			.fa {
				font-size: 1.8em;
			}

			.query-action-button {
				&:first-child {
					margin-bottom: 0.5rem;
				}
			}
		}

		&-top {
			flex-grow: 1;
			opacity: 0.5;
			padding-top: 0.5em;
			text-align: center;
			visibility: hidden;
			margin-right: 4px;

			&:hover {
				opacity: 1;
			}
		}
	}
}

.dataUpdated > span:nth-child( 1 ) {
	padding: 5px;
}

.query-editor-container {
	flex: 1 1 auto;
	width: 100%;
}

.splitter {
	background-color: @background-color-progressive-subtle;
	background-image: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAhCAQAAABOpSL+AAAAIklEQVR4AWMwbb/PdR+JZDD9f1/oPhI5sgVGBSruc9xHIgGdSQqqQJGkRgAAAABJRU5ErkJggg== ); /* node_modules/jquery-resizable-dom/assets/vsizegrip.png */
	background-position: center center;
	background-repeat: no-repeat;
	cursor: col-resize;
	flex: 0 0 auto;
	width: 1em;
}

.jq-toast-single a {
	border: 0;
}

.alert {
	margin-bottom: 0;
}

.popover {
	border-radius: @border-radius-base;
	max-width: 80vw;
	width: auto;
}

.popover-title {
	border-radius: @border-radius-base;
}

.dropdown-toggle {
	.fa::before,
	.glyphicon::before {
		margin-right: 3px;
	}
}

.nav > li {
	float: left;
}

.nav-tabs > li > a {
	border-radius: @border-radius-base @border-radius-base 0 0;
}

/**
	To allow dropdown to function normally in small screens
	and allow buttons display the same way as in full size
**/
@media ( max-width: 768px ) {
	.navbar {
		&-left {
			float: left !important;
			margin: 0;
		}

		&-right {
			float: right !important;
		}

		&-nav .open .dropdown-menu {
			background-color: @background-color-base;
			border: @border-soft;
			box-shadow: @box-shadow-drop-medium;
			position: absolute;
			width: auto;
		}

		&-collapse.in {
			overflow-y: visible;
		}
	}

	.panel-body .table td {
		display: inline-block;
	}
}

/*
	editor hint style
*/
.wikibase-rdf-hint {
	border-bottom: @border-subtle;
	white-space: normal;
}

/**
	Keyboard Shortcut Help dialog
**/
.keyboard-shortcut-help td,
.keyboard-shortcut-help th {
	padding: 8px;
	vertical-align: middle;
}

/**
	Query example dialog
**/
.QueryExamples {
	.modal-content {
		border-radius: @border-radius-base;
		padding: 20px 15px;

		.tag {
			background-color: @background-color-progressive;
			background-image: none;
			padding: 0.4em 0.6em;
			text-shadow: none;

			&:hover,
			&:active {
				background: @background-color-progressive;
			}
		}

		.tagCloud {
			height: 200px;
			width: 100%;
		}

		input.tags-input {
			visibility: hidden;
		}

		.tagFilter {
			padding-bottom: 5px !important;
		}

		.exampleTable {
			border: @border-base;
			max-height: 500px;
			overflow: hidden auto;

			td {
				padding: 8px 10px;
			}

			.glyphicon-pencil {
				margin-left: 0.3em;
			}
		}

		.input-group-addon {
			border-radius: @border-radius-base;
			border: @border-base;
		}
	}
}

.modal-content {
	border-radius: @border-radius-base;
}

.explorer-dialog {
	position: absolute !important;
	display: none;
	z-index: 1000;
	background-color: @background-color-base;
	resize: both;
	overflow: none;
}

.explorer-dialog iframe {
	height: 100%;
	width: 100%;
}

.explorer-body {
	height: 100%;
	width: 100%;
	padding: 0 0 15px 0;
}

.explorer-header {
	height: 55px;
	background-image: linear-gradient( to bottom, #f5f5f5 0, #e8e8e8 100% );
	background-repeat: repeat-x;
}

.explorer-title {
	font-size: 1.3em;
}

/* Disable resizing from all sides except bottom right corner */
.gj-resizable-e,
.gj-resizable-n,
.gj-resizable-w,
.gj-resizable-s,
.gj-resizable-nw,
.gj-resizable-ne,
.gj-resizable-sw {
	display: none;
}

.disable-selection {
	-moz-user-select: none;
	-ms-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	user-select: none;
}

/**
	Code example dialog
**/
.CodeExamples .tab-content .url {
	margin: 2em;
	word-wrap: break-word;
}

/* Tag cloud, words are more @background-color-transparent when less important */
div.jqcloud {
	color: @color-progressive;

	a {
		color: inherit;
	}

	a:hover {
		color: @color-progressive--hover;
	}

	span.w10 {
		color: @color-progressive;
	}

	span.w9 {
		color: @color-progressive-90;
	}

	span.w8 {
		color: @color-progressive-80;
	}

	span.w7 {
		color: @color-progressive-75;
	}

	span.w6 {
		color: @color-progressive-70;
	}

	span.w5 {
		color: @color-progressive-65;
	}

	span.w4 {
		color: @color-progressive-60;
	}

	span.w3 {
		color: @color-progressive-55;
	}

	span.w2 {
		color: @color-progressive-50;
	}

	span.w1 {
		color: @color-progressive-45;
	}
}

.item {
	background: @background-color-base;
	box-shadow: @box-shadow-drop-medium;
	box-sizing: border-box;
	display: inline-block;
	margin: 0 0.75em 1.5em;
	padding: 1em;
}

.item.hidden {
	visibility: hidden;
}

.item-row {
	width: 100%;
}

.hidden-row {
	height: 50px;
	visibility: hidden;

	& > .item {
		display: none;
	}
}

.item-img {
	width: 100%;
}

.summary {
	.glyphicon {
		display: inline;
	}

	& > div {
		height: 1.5em;

		& > span {
			display: block;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
}

/* loading spinner */
#loading-spinner {
	color: @color-subtle;

	& > .fa-spinner {
		display: block;
		margin: 0 auto 20px;
	}
}

/*
	Query Helper
*/
#query-box .query-helper {
	flex: 0 0 auto;
	max-width: 80vw;
	min-width: 300px;
	width: 30vw;
	z-index: 100;

	.panel {
		border: 0;
		box-shadow: none;

		&-heading {
			background: @background-color-base;
			border-bottom: @border-soft;
			padding: 8px 10px;
		}

		&-body {
			font-size: 11pt;
			padding: 10px 0;

			& > span {
				padding: 10px;
			}

			&-sub {
				.query-helper-data {
					margin-bottom: 10px;
					margin-top: 10px;
					width: auto;

					tbody > tr > td {
						padding: 6px;
					}

					tr {
						padding: 0.8em;
					}

					tr:first-child,
					tr:last-child {
						border-bottom: 0;
					}

					tr:hover {
						background: inherit;
					}

					td {
						border: 0;
						vertical-align: middle;
					}

					.fa {
						font-size: 1.25em;
						margin: 0 6px 0 0;
						text-decoration: none;
					}
				}

				.query-helper-limit-section {
					padding: 12px;
				}

				.query-helper-section {
					border-bottom: @border-soft;
					height: 3em;
					padding: 10px 0;
					width: 100%;

					& > tr > td:first-child {
						min-width: 95px;
						width: 0;
					}
				}
			}
		}

		.close {
			float: inline-end;
		}
	}

	tr:hover > .toolbar {
		opacity: 1;
	}

	.popover {
		min-width: 250px;
		white-space: nowrap;
	}

	&-hidden,
	&-hidden + .splitter {
		display: none;
	}
}

.select2-container {
	min-width: 150px;
	margin: 2px;

	.select2-dropdown {
		border-radius: 0 0 @border-radius-base @border-radius-base;
		background: @background-color-interactive-subtle;
	}

	.select2-results__option[ aria-selected='true' ] {
		background: inherit;
	}

	.select2-results__option--highlighted[ aria-selected ] {
		background: @background-color-base;
		color: @color-base;
	}

	.select2-selection--single {
		border-radius: @border-radius-base;

		.select2-selection__rendered {
			color: @color-base;
		}
	}
}

.popover .select2-container {
	min-width: 200px;
}

/*
	ULS
*/
.nav .uls-trigger {
	display: none;
	padding-left: 30px;
}

/*
	VIS
*/
.vis-item {
	color: @color-base;
	padding: 15px;
}

.vis-item.vis-selected {
	background: @background-color-interactive;
	border-color: @border-color-base;
	color: @color-emphasized;
}

.vis-item,
.vis-item.vis-line {
	background: @background-color-interactive-subtle;
	border-color: @border-color-base;
}

/* T163984 */
.vis-item.vis-range:hover {
	/*
	 * let hovered timeline ranges expand to fit their content
	 * (needs !important because width is set directly on the element)
	 */
	width: unset !important;
	/* also draw them over other, non-hovered ranges */
	z-index: 100;
}

@media ( max-width: 900px ) {
	.CodeMirror {
		border: 0;
		border-top: @border-subtle;
	}

	.CodeMirror-scroll {
		min-height: 150px;
	}

	#query-box .query-helper {
		max-width: none;
		min-width: 0;
		width: 100%;

		.panel {
			margin: 0;
		}
	}

	.query-helper-and-editor {
		flex-direction: column;

		& > .splitter {
			display: none;
		}
	}
}

.ekko-lightbox-nav-overlay a span {
	padding: 0;
}