style.less

// Query Service style.less file

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

@wmui-color-base0:    #000;    // = HSB 0°, 0%, 0%
@wmui-color-base10:   #222;    // = HSB 0°, 0%, 13%
@wmui-color-base20:   #54595d; // = HSB 207°, 10%, 36%; WCAG 2.0 level AAA 7.09:1 contrast ratio on `#fff`
@wmui-color-base30:   #72777d; // = HSB 210°, 9%, 49%; WCAG 2.0 level AA at 4.52:1 contrast ratio on `#fff`
@wmui-color-base50:   #a2a9b1; // = HSB 212°, 8%, 69%
@wmui-color-base70:   #c8ccd1; // = HSB 213°, 4%, 82%
@wmui-color-base80:   #eaecf0; // = HSB 220°, 3%, 94%
@wmui-color-base90:   #f8f9fa; // = HSB 210°, 1%, 98%
@wmui-color-base100:  #fff;    // = HSB 0°, 0%, 100%

@wmui-color-accent30: #2a4b8d; // = HSB 220°, 70%, 55%
@wmui-color-accent50: #36c;    // = HSB 220°, 75%, 80%
@wmui-color-accent90: #eaf3ff; // = HSB 214°, 8%, 100%

@wmui-color-red30:    #b32424; // = HSB 360°, 80%, 70%
@wmui-color-red50:    #d33;    // = HSB 360°, 77%, 87%
@wmui-color-red90:    #fee7e6; // = HSB 3°, 9%, 100%

@wmui-color-yellow30: #ac6600; // = HSB 36°, 100%, 67%
@wmui-color-yellow50: #fc3;    // = HSB 45°, 80%, 100%
@wmui-color-yellow90: #fef6e7; // = HSB 39°, 9%, 100%

@wmui-color-green30:  #14866d; // = HSB 167°, 85%, 53%
@wmui-color-green50:  #00af89; // = HSB 167°, 100%, 69%
@wmui-color-green90:  #d5fdf4; // = HSB 166°, 16%, 99%

// Background Colors
@background-color-base:       @wmui-color-base100;
@background-color-code:       @wmui-color-base90;
@background-color-heading:    @wmui-color-base90;

// 'Framed' UI elements (Framed Buttons, Dropdowns, ToggleSwitches...)
@background-color-framed:     @wmui-color-base90;
@background-color-framed--hover: @wmui-color-base100;
@background-color-framed--active: @wmui-color-base70;

// Tabs Navigation Background Color
@background-color-tabs:       @wmui-color-base80;

// Highlight Colors, RGBA Colors include hex fallback on `#fff` for IE 6/7/8
@background-color-highlight:  rgba( 255, 182, 13, 0.4 );
@background-color-highlight--fallback: #ffe29e;

// Foreground Colors
@color-base:                  @wmui-color-base10;
@color-base--hover:           #444;
@color-base--active:          @wmui-color-base0;
@color-base--inverted:        @wmui-color-base100;
@color-base--emphasized:      @wmui-color-base0;
@color-base--subtle:          @wmui-color-base30;
@color-base--disabled:        @wmui-color-base30;
@color-filled--disabled:      @color-base--inverted;
@color-placeholder:           @wmui-color-base30;

// Primary 'Progressive' Color, Background Color and states
@background-color-primary:    @wmui-color-accent90;
@background-color-primary--hover: rgba( 41, 98, 204, 0.1 );
@color-primary:               @wmui-color-accent50;
@color-primary--hover:        #447ff5; // = `lighten( @color-primary, 3 )`
@color-primary--active:       @wmui-color-accent30;
@color-primary--focus:        @color-primary;
@color-primary-90:            rgba( 51, 102, 204, 0.9 );
@color-primary-80:            rgba( 51, 102, 204, 0.8 );
@color-primary-75:            rgba( 51, 102, 204, 0.75 );
@color-primary-70:            rgba( 51, 102, 204, 0.7 );
@color-primary-65:            rgba( 51, 102, 204, 0.65 );
@color-primary-60:            rgba( 51, 102, 204, 0.6 );
@color-primary-55:            rgba( 51, 102, 204, 0.55 );
@color-primary-50:            rgba( 51, 102, 204, 0.5 );
@color-primary-45:            rgba( 51, 102, 204, 0.45 );

// 'Destructive' Color, Background Color and states
@background-color-destructive: @wmui-color-red90;
@color-destructive:           @wmui-color-red50;
@color-destructive--hover:    #ff4242;
@color-destructive--active:   @wmui-color-red30;
@color-destructive--focus:    @color-destructive;

// Validation error feedback
@color-erroneous:             @wmui-color-red50;

// Border Colors
@border-color-base:           @wmui-color-base50;
@border-color-base--hover:    @wmui-color-base50;
@border-color-base--active:   @wmui-color-base30;
@border-color-base--disabled: @wmui-color-base70;
@border-color-filled--disabled: @color-filled--disabled;
@border-color-primary--active: #859dcc;
@border-color-destructive--active: #b77c79;
@border-color-inset--focus:   @color-base--inverted;
@border-color-heading:        @wmui-color-base70;
@border-color-soft:           @wmui-color-base80;
@border-color-wikitable:      rgba( 84, 89, 93, 0.3 ); // See T168029

// CodeMirror
@codemirror-color-atom:       @wmui-color-accent30;
@codemirror-color-builtin:    @wmui-color-red30;
@codemirror-color-comment:    @wmui-color-base30;
@codemirror-color-keyword:    @codemirror-color-builtin;
@codemirror-color-string:     @wmui-color-yellow30;
@codemirror-color-variable-2: @wmui-color-green30;

// Update
@update-background-color-danger: @wmui-color-red90;
@update-foreground-color-danger: @wmui-color-red30;
@update-background-color-success: @wmui-color-green90;
@update-foreground-color-success: @wmui-color-green30;
@update-background-color-warning: @wmui-color-yellow90;
@update-foreground-color-warning: @wmui-color-yellow30;

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

html {
	background-color: @background-color-base;
}

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

pre {
	background: @background-color-code;
	border-radius: 2px;
	color: @color-base;
}

a {
	color: @color-primary;
	&:hover {
		color: @color-primary--hover;
	}
	&:active {
		color: @color-primary--active;
	}
}

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

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

.navbar {
	margin-bottom: 0;
	.dropdown-menu {
		background: @background-color-framed;
		z-index: 1001; /* above the Leaflet control containers */
		& > li > a {
			border-radius: 2px;
			padding: 5px 20px;
		}
		& > li > a:hover {
			background: @background-color-framed--hover;
		}
	}
	.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;
		}
	}
	&-btn {
		margin-left: 15px;
	}
	&-default {
		background: @background-color-heading;
		border-bottom: 1px solid @border-color-heading;
		border-radius: 2px;
	}
	&-right {
		margin-right: 0;
	}
	&-toggle {
		z-index: 100;
	}
}

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

.btn-default {
	-webkit-box-shadow: none;
	background: @background-color-framed;
	border-radius: 2px;
	border: 1px solid @border-color-heading;
	box-shadow: none;
	text-shadow: none;
	&:active {
		background: @background-color-framed--active;
	}
	&:hover {
		background: @background-color-framed--hover;
	}
}

.form-control {
	border-radius: 2px;
}

.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-erroneous;
	font-size: 1.5em;
	margin-top: 5%;
}

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

.label,
.progress {
	border-radius: 2px;
}

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

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

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

.error-line {
	border-bottom: 2px dotted @color-erroneous;
}

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

#execute-button {
	-webkit-box-shadow: none;
	background: @color-primary;
	border-radius: 2px;
	border: 2px solid @color-primary;
	box-shadow: none;
	margin-bottom: 5px;
	padding-bottom: 7px;
	padding-top: 7px;
	width: 46px;
	&:hover {
		background: @color-primary--hover;
		border-color: @color-primary--hover;
	}
	&:active {
		background: @color-primary--active;
		border-color: @color-primary--active;
	}
}

#query-result {
	width: 100%;
	pre {
		background-color: inherit;
		border: none;
		display: inline;
		font-family: serif;
		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: @color-primary--hover;
				border-radius: 2px;
				color: @color-base--inverted;
			}
			&-clicked {
				background: @color-primary;
				border-radius: 2px;
				color: @color-base--inverted;
			}
		}
		a.jstree-anchor.jstree-clicked {
			color: @color-base--inverted;
		}
	}
	/* Treemap */
	.labelbody {
		background: transparent;
		cursor: pointer;
		overflow: hidden;
	}
	/* ImageGrid */
	.img-grid {
		font-size: 0.85em;
		margin: 2em auto;
		padding: 0;
		width: 95%;
	}
}

#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-primary;
}

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

.CodeMirror {
	border-left: 1px solid @border-color-heading;
	border: none;
	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: monospace;
	min-height: 273px;
	padding: 0;
	width: 100%;
}

.exampleQueries {
	width: 160px;
}

.exampleIcons {
	width: 0;
}

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

.dropdown-menu {
	border-radius: 2px;
}

.query-main {
	display: flex;
	flex-direction: row;
	max-width: 100%;
	& > .toolbar {
		display: flex;
		flex-direction: column;
		flex: 0 0 55px;
		z-index: 1001; /* above */
		.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-base--subtle;
		font-size: 12px;
		margin-bottom: 5px;
		min-height: 25px;
		padding: 3px;
		.badge {
			border-radius: 2px;
			border: 1px solid @border-color-soft;
		}
		.list-group-item-danger {
			background-color: @update-background-color-danger;
			color: @update-foreground-color-danger;
			text-decoration-color: @update-foreground-color-danger;
		}
		.list-group-item-success {
			background-color: @update-background-color-success;
			color: @update-foreground-color-success;
			text-decoration-color: @update-foreground-color-success;
		}
		.list-group-item-warning {
			background-color: @update-background-color-warning;
			color: @update-foreground-color-warning;
			text-decoration-color: @update-foreground-color-warning;
		}
	}
	.nav {
		margin-left: 0;
	}
	.toolbar {
		border-right: 1px solid @border-color-heading;
		.fa {
			font-size: 1.5em;
		}
		&-bottom {
			flex-grow: 0;
			padding-bottom: 0.2em;
			padding-top: 1em;
			text-align: center;
			.fa {
				font-size: 1.8em;
			}
		}
		&-top {
			flex-grow: 1;
			opacity: 0.5;
			padding-top: 0.5em;
			text-align: left;
			visibility: hidden;
			&:hover {
				opacity: 1;
			}
		}
	}
}

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

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

.splitter {
	background-color: @background-color-primary;
	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: none;
}

.alert {
	margin-bottom: 0;
}

.popover {
	border-radius: 2px;
	max-width: 80vw;
	width: auto;
}

.popover-title {
	border-radius: 2px;
}

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

.nav > li {
	float: left;
}

.nav-tabs > li > a {
	border-radius: 2px 2px 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 {
			-webkit-box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.175 );
			background-color: @background-color-base;
			border: 1px solid @border-color-soft;
			box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.175 );
			position: absolute;
			width: auto;
		}
		&-collapse.in {
			overflow-y: visible;
		}
	}
	.panel-body .table td {
		display: inline-block;
	}
}

/*
	editor hint style
*/
.wikibase-rdf-hint {
	border-bottom: 1px solid @border-color-heading;
	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: 2px;
		padding: 20px 15px;
		.tag {
			background-color: @color-primary;
			background-image: none;
			padding: 0.4em 0.6em;
			text-shadow: none;
			&:hover,
			&:active {
				background: @color-primary;
			}
		}
		.tagCloud {
			height: 200px;
			width: 100%;
		}
		input.tags-input {
			visibility: hidden;
		}
		.tagFilter {
			padding-bottom: 5px !important;
		}
		.exampleTable {
			border: 1px solid @border-color-base;
			max-height: 500px;
			overflow-x: hidden;
			overflow-y: auto;
			td {
				padding: 8px 10px;
			}
			.glyphicon-pencil {
				margin-left: 0.3em;
			}
		}
		.input-group-addon {
			border-radius: 2px;
			border: 1px solid @border-color-base;
		}
	}
}

.modal-content {
	border-radius: 2px;
}

.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 transparent when less important */
div.jqcloud {
	color: @color-primary;
	a {
		color: inherit;
	}
	a:hover {
		color: @color-primary--hover;
	}
	span.w10 {
		color: @color-primary;
	}
	span.w9 {
		color: @color-primary-90;
	}
	span.w8 {
		color: @color-primary-80;
	}
	span.w7 {
		color: @color-primary-75;
	}
	span.w6 {
		color: @color-primary-70;
	}
	span.w5 {
		color: @color-primary-65;
	}
	span.w4 {
		color: @color-primary-60;
	}
	span.w3 {
		color: @color-primary-55;
	}
	span.w2 {
		color: @color-primary-50;
	}
	span.w1 {
		color: @color-primary-45;
	}
}
.item {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	background: @background-color-base;
	box-shadow: 2px 2px 4px 0 #ccc;
	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-base--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 {
		-webkit-box-shadow: none;
		border: none;
		box-shadow: none;
		&-heading {
			background: @background-color-base;
			border-bottom: 1px solid @border-color-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: none;
					}
					tr:hover {
						background: inherit;
					}
					td {
						border: none;
						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: 1px solid @border-color-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 2px 2px;
		background: @background-color-framed;
	}
	.select2-results__option[aria-selected='true'] {
		background: inherit;
	}
	.select2-results__option--highlighted[aria-selected] {
		background: @background-color-framed--hover;
		color: @color-base;
	}
	.select2-selection--single {
		border-radius: 2px;
		.select2-selection__rendered {
			color: @color-base;
		}
	}
}

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

.query-helper-tag-cloud .tagCloud {
	height: 200px;
	width: 45vw;
}

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

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

.vis-item.vis-selected {
	background: @background-color-framed--active;
	border-color: @border-color-base;
	color: @color-base--active;
}

.vis-item,
.vis-item.vis-line {
	background: @background-color-framed;
	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: none;
		border-top: 1px solid @border-color-heading;
	}

	.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;
}