Jump to content

Template:Filter/styles.css: Difference between revisions

From The Petit Planet Wiki
Created Template:Filter/styles.css
 
Added hover styling
 
(One intermediate revision by the same user not shown)
Line 2: Line 2:
     border-radius: 4px;
     border-radius: 4px;
     margin: 2px;
     margin: 2px;
     color: var(--page-text-color) !important;
     color: var(--color-base) !important;
     background-color: var(--theme-color-2) !important;
     background-color: var(--background-color-2) !important;
     border: 1px solid var(--theme-border-color-subtle) !important;  
     border: 1px solid var(--border-color-subtle) !important;  
}
}


.mw-ui-button-group > *:first-child, .mw-ui-button-group > *:last-child {
.mw-ui-button:hover {
background-color: var(--background-color-3) !important;
}
 
.mw-ui-button-group > *:first-child,
.mw-ui-button-group > *:last-child {
     border-radius: 4px;
     border-radius: 4px;
}
}
Line 16: Line 21:


.mw-ui-button-group > *:not(:first-child) {
.mw-ui-button-group > *:not(:first-child) {
     border-left: 1px solid var(--theme-border-color-subtle) !important;
     border-left: 1px solid var(--border-color-subtle) !important;
}
}


.mw-ui-button-group .filter-button-selected, .filter-button-selected:hover {
.mw-ui-button-group .filter-button-selected,
     background: var(--theme-link-color) !important;
.filter-button-selected:hover {
     color: var(--page-background-color) !important;
     background: var(--color-progressive) !important;
     color: var(--background-color-base) !important;
}
}



Latest revision as of 11:19, 20 November 2025

.mw-ui-button {
    border-radius: 4px;
    margin: 2px;
    color: var(--color-base) !important;
    background-color: var(--background-color-2) !important;
    border: 1px solid var(--border-color-subtle) !important; 
}

.mw-ui-button:hover {
	background-color: var(--background-color-3) !important;
}

.mw-ui-button-group > *:first-child,
.mw-ui-button-group > *:last-child {
    border-radius: 4px;
}

.mw-ui-button:not(.mw-ui-icon-element) {
    min-width: 30px;
}

.mw-ui-button-group > *:not(:first-child) {
    border-left: 1px solid var(--border-color-subtle) !important;
}

.mw-ui-button-group .filter-button-selected,
.filter-button-selected:hover {
    background: var(--color-progressive) !important;
    color: var(--background-color-base) !important;
}

.mw-ui-button:not(.mw-ui-icon-element) {
    padding: 5px 10px;
}