MediaWiki:Common.less/smw.less

/**

* Semantic MediaWiki
*/

root {

--smw-ask-options-even-bg: @BODY_MID; --smw-ask-options-odd-bg: @BODY_LIGHT; --smw-ask-action-btn-lblue-bg: @BODY_MAIN; --smw-ask-action-btn-lblue-color: @black; --smw-ask-action-btn-lblue-border-color: @OSRSW_BROWN; --smw-ask-action-btn-dblue-bg: @OSRSW_BROWN; --smw-ask-action-btn-dblue-color: @white; --smw-ask-action-btn-dblue-border-color: @BUTTON_BORDER; }

// fieldset borders .smw-ask-condition fieldset, .smw-ask-printhead fieldset { border-color: var(--sidebar); }

.smw-ask-search fieldset, .smw-ask-format fieldset, .smw-ask-options fieldset { border-color: var(--sidebar); }

.strike > span:before, .strike > span:after { background: var(--sidebar); }

.smw-ask-options-fields { tr td { background-color: var(--smw-ask-options-even-bg); }

tr:nth-child(odd) td { background-color: var(--smw-ask-options-odd-bg); } }

.smw-ask-action-btn { &.smw-ask-action-btn-lblue, &.smw-ask-action-btn-lblue:hover, &.smw-ask-action-btn-lblue:visited { background-color: var(--smw-ask-action-btn-lblue-bg); color: var(--smw-ask-action-btn-lblue-color); border-color: var(--smw-ask-action-btn-lblue-border-color); }

&.smw-ask-action-btn-dblue, &.smw-ask-action-btn-dblue:hover, &.smw-ask-action-btn-dblue:visited { background-color: var(--smw-ask-action-btn-dblue-bg); color: var(--smw-ask-action-btn-dblue-color); border-color: var(--smw-ask-action-btn-dblue-border-color); } }

/* =====================================

      SMW search, ask and property pages
  ===================================== */

.smw-ask-query, .smw-ask-actions { textarea { background-color: var(--ooui-interface); border-color: var(--ooui-interface-border); color: var(--ooui-text); } }

.smw-ask-query-format { select { background-color: var(--ooui-interface); border: 1px solid var(--ooui-interface-border); color: var(--ooui-text); } }

/* .smw-ask-sorting, .smw-ask-options-fields { select { background-color: darken( var(--body-mid), 2% ); border: 1px solid #4c5574; // this is how it looks with 'rgba(250, 250, 255, .25)' color: var(--ooui-text); }

input { background-color: darken( var(--body-mid), 2% ); border: 1px solid #4c5574; // this is how it looks with 'rgba(250, 250, 255, .25)' color: var(--ooui-text); padding: 2px 1px; } }

• /

.smw-ask-toplinks { background-color: var(--body-mid);

span.smw-icon-info { background: none; padding: 0 !important; // beat inline styles

&::before { content: ; background: var(--text-color); .mask("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3Einfo%3C/title%3E%3Cpath d='M10 0C4.477 0 0 4.477 0 10s4.477 10 10 10 10-4.477 10-10S15.523 0 10 0zM9 5h2v2H9zm0 4h2v6H9z'/%3E%3C/svg%3E"); padding: 0 0 3px 18px; } } }

.smw-ask-options-row-odd { background-color: var(--body-light); }

.smw-ask-options-row-even { background-color: var(--body-mid); }

1. options-toggle:not(:checked) + #options-list .options-parameter-list:after {

background-image: linear-gradient(to bottom,transparent,var(--body-mid) 90%); }

.smw-ask-button-submit input { background-color: var(--ooui-normal); border-color: var(--ooui-normal-border); color: var(--text-color); }

.smw-ask-button-submit input:hover, .smw-ask-button-lgrey:hover { background-color: var(--ooui-normal--hover); border-color: var(--ooui-normal-border); }

// buttons input { &.smw-ask-action-btn { &.smw-ask-action-btn-dblue { background-color: var(--ooui-normal); border-color: var(--ooui-normal-border); color: var(--ooui-text); } } }

a { &.smw-ask-action-btn { &.smw-ask-action-btn-lblue { background-color: var(--body-mid); border-color: var(--body-mid); color: var(--ooui-text);

&:visited { background-color: var(--body-mid); border-color: var(--body-mid); color: var(--ooui-text); }

&:hover { background-color: var(--body-mid); border-color: var(--body-mid); color: var(--ooui-text); } } }

&.smw-ask-action-btn-lgrey { background-color: var(--ooui-normal); border-color: var(--ooui-normal-border); color: var(--ooui-text);

&:hover { background-color: var(--ooui-normal--hover); border-color: var(--ooui-normal-border); color: var(--ooui-text); } } }

// Callout messages .smw-callout { // why dont these just use mediawiki core ones... &-error { background-color: var(--errorbox-bg); border-color: var(--errorbox-border); }

&-info { background-color: var(--body-light); border-color: var(--body-dark); }

&-success { background-color: var(--successbox-bg); border-color: var(--successbox-border); }

&-warning { background-color: var(--warningbox-bg); border-color: var(--warningbox-bg); } }

// Property page usage count indicators .smw-tabs input.nav-tab:checked + label.nav-label { &, &:hover { color: inherit; } }

1. tab-smw-property-value:checked + label.nav-label .usage-count {

color: @white; background-color: var(--ooui-progressive);

&.moderate { color: @white; background-color: @korma; border-color: @korma; }

&.high { color: @white; background-color: @old-brick; border-color: @old-brick; } }

// Property:Foo pages .smw-property-page-results { // Property page results headers .header-title { background-color: var(--ooui-interface); border-color: var(--ooui-interface-border); color: var(--ooui-text); }

// Property page results headers (again) .header-row > .header-title { border-color: var(--ooui-interface-border); }

// Property page result rows hover .value-row:hover { background-color: var(--ooui-normal--hover); }

// Property page alphabetic headers .smw-table .header-row { color: var(--text-color); } }

// Tooltips .tippy-tooltip.light-border-theme { background-color: var(--body-light); color: var(--text-color);

.tippy-arrow { border-top-color: var(--body-light);

&:after { // dont want to define the colours again for different placements so lets just cheat with !important border-top-color: var(--body-light) !important; } } }

.tippy-header { background-color: var(--body-dark); border-bottom-color: var(--body-mid); }

.smw-ui-input-filter { background-color: var(--ooui-interface); border-color: var(--ooui-interface-border); color: var(--ooui-text);

input { border-left-color: var(--ooui-interface-border) !important; // beating !important on default style color: var(--ooui-text) !important; } }

/* Special:Concepts & Property: */ .smw-ui-pagination .page-link.link-disabled { background-color: var(--ooui-disabled); border-color: var(--ooui-disabled-border); color: var(--subtle-color); }

.smw-ui-pagination .page-link { background-color: var(--ooui-normal); border-color: var(--ooui-normal-border); color: var(--link-color); }

.smw-ui-pagination .page-link:hover { background-color: var(--ooui-normal--hover); border-color: var(--ooui-normal-border); color: var(--link-color); }

.smw-ui-pagination .page-link.link-active { color: @white; background-color: var(--ooui-progressive); border-color: var(--ooui-progressive); }

.smw-tabs input.nav-tab:checked + label.nav-label { border-color: var(--ooui-normal-border); }

.smw-tabs section, .smw-tabs .subtab-content { border-top-color: var(--ooui-normal-border); }

.smw-column-header { color: var(--text-color); }

/* ===================

   FACTS under edits
  ==================== */

.smw-factbox { background: var(--body-main); border-color: transparent; }

// is this still needed .mw-body .mw-indicators #mw-indicator-smw-entity-examiner.mw-indicator .smw-indicator-vertical-bar-loader { display: none; }

/* ---------------------------------

           Special:Browse
  --------------------------------- */

.smwb-theme-light { .smwb-title, .smwb-center, .smwb-actions, .smwb-prophead { background-color: @BODY_MID; }

.smwb-factbox { border-left-color: @BODY_MID; }

.smwb-ifactbox { border-right-color: @BODY_MID; }

.smwb-propval { background-color: @BODY_LIGHT; } }

.smwb-action-separator { border-color: var(--wikitable-border); }

.smwb-bottom { border-bottom: 1px solid var(--wikitable-border); }

.smwb-ifactbox, .smwb-factbox { .smwb-cell { border-top: 1px solid var(--wikitable-border); } }

.smwb-propvalue, .smwb-ipropvalue { .smwb-prophead, .smwb-propval { font-size: 0.9em; } }

// Override very specific link styles

root {

--filter-black-to-link: invert(36%) sepia(58%) saturate(433%) hue-rotate(344deg) brightness(100%) contrast(91%); }

1. bodyContent {

span.smwbrowse { a { color: black; background-image: url('/images/rss/Smwbrowse.svg'); filter: var(--filter-black-to-link); }

a:hover { color: black; background-image: url('/images/rss/Smwbrowse-hover.svg'); text-decoration: underline; } }

span.smwsearch { a { color: black; filter: var(--filter-black-to-link); background-image: url('/images/rss/Smwsearch.svg'); }

a:hover { color: black; background-image: url('/images/rss/Smwsearch-hover.svg'); text-decoration: underline; } } }