MediaWiki:Common.less/smw.less: Difference between revisions

Jump to navigation Jump to search

MediaWiki:Common.less/smw.less (view source)

Revision as of 17:12, 17 October 2024

425 bytes removed ,  17 October
no edit summary
VisualWikitext
(Created page with "→‎* * 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-printh...")
 
No edit summary
Line 1:
/** * 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);}#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);}// buttonsinput { &.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; }}#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%);}#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; } }}
/**
* 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 mw.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);
}
 
#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;
}
}
 
#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 mw.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%);
}
 
#bodyContent {
span.smwbrowse {
a {
color: black;
background-image: url('filepath://Smwbrowse.svg');
filter: var(--filter-black-to-link);
}
 
a:hover {
color: black;
background-image: url('filepath://Smwbrowse-hover.svg');
text-decoration: underline;
}
}
 
span.smwsearch {
a {
color: black;
filter: var(--filter-black-to-link);
background-image: url('filepath://Smwsearch.svg');
}
 
a:hover {
color: black;
background-image: url('filepath://Smwsearch-hover.svg');
text-decoration: underline;
}
}
}
Retrieved from "https://wiki2.runerealm.org/w/Special:MobileDiff/38854"

Navigation menu