Difference between revisions of "MediaWiki:Common.css"
From LINKS Community Center
(70 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
/* CSS placed here will be applied to all skins */ | /* CSS placed here will be applied to all skins */ | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | /* Styling for filtered results format */ | + | /* Styling for filtered results format start */ |
+ | |||
.filtered { | .filtered { | ||
display: flex; | display: flex; | ||
− | flex-direction: | + | flex-direction: column; |
− | } | + | } |
− | + | ||
− | .filtered .filtered-views { | + | .filtered .filtered-views { |
flex: auto; | flex: auto; | ||
− | } | + | margin: 1em 0; |
− | + | } | |
− | .filtered .filtered-filters { | + | |
− | + | .filtered .filtered-filters { | |
− | margin: 1em 0 0 1em; | + | /* width: 300px; |
− | } | + | margin: 1em 0 0 1em;*/ |
− | + | margin: 0; | |
− | /* Width for discourse topics list on front-page */ | + | } |
− | d-topics-list iframe{ | + | |
− | width: | + | .filtered-filters, |
+ | .filtered-value, | ||
+ | .filtered-value-scrollable { | ||
+ | overflow: auto; | ||
+ | } | ||
+ | |||
+ | /* Styling for filtered results format end */ | ||
+ | |||
+ | |||
+ | /* Width for discourse topics list on front-page */ | ||
+ | d-topics-list iframe { | ||
+ | width: 100% !important; | ||
margin-left: auto; | margin-left: auto; | ||
margin-right: auto; | margin-right: auto; | ||
− | } | + | } |
− | + | ||
− | /* NEW HOMEPAGE CSS START */ | + | /* Hide extra info in search results */ |
− | :root { | + | .mw-search-result-data { display: none !important; } |
+ | /* Hide section editing */ | ||
+ | .mw-editsection { display: none !important; } | ||
+ | |||
+ | /* NEW HOMEPAGE CSS START */ | ||
+ | :root { | ||
--links-grey: #415262; | --links-grey: #415262; | ||
− | --links-orange: | + | --links-orange: rgb(238, 120, 2); |
--links-blue: #1980c3; | --links-blue: #1980c3; | ||
--links-cyan: #34b8b8; | --links-cyan: #34b8b8; | ||
+ | } | ||
+ | |||
+ | #links-homepage { | ||
+ | color: var(--links-grey); | ||
} | } | ||
.links-tile { | .links-tile { | ||
display: flex; | display: flex; | ||
+ | padding: 1em; | ||
flex-direction: column; | flex-direction: column; | ||
justify-content: center; | justify-content: center; | ||
align-items: center; | align-items: center; | ||
background-color: var(--links-grey); | background-color: var(--links-grey); | ||
− | color: | + | color: rgba(255, 255, 255, .8) !important; |
− | height: | + | height: 150px; |
text-decoration: none !important; | text-decoration: none !important; | ||
transition: all 400ms; | transition: all 400ms; | ||
Line 73: | Line 66: | ||
.links-tile svg { | .links-tile svg { | ||
− | + | fill: rgba(255, 255, 255, .8); | |
− | height: | + | transition: all 400ms; |
+ | height: 70px; | ||
} | } | ||
− | .links-tile:hover { | + | .links-tile:hover { |
+ | background-color: var(--links-orange); | ||
+ | color: var(--links-grey) !important; | ||
+ | transform: scale(1.05); | ||
+ | } | ||
+ | |||
+ | .links-tile:hover svg { | ||
+ | fill: var(--links-grey); | ||
+ | } | ||
+ | |||
+ | .links-tile-title { | ||
+ | font-variant: small-caps; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .links-divider { | ||
+ | height: 4px; | ||
+ | background-color: var(--links-blue); | ||
+ | background-image: linear-gradient(to right, var(--links-orange), var(--links-cyan), var(--links-blue)); | ||
+ | } | ||
+ | |||
+ | .links-button { | ||
+ | display: inline-block; | ||
+ | padding: .5em 1em; | ||
+ | text-align: center; | ||
+ | font-variant: small-caps; | ||
+ | border-radius: 7px; | ||
+ | background-color: var(--links-blue); | ||
+ | color: rgba(255, 255, 255, .8) !important; | ||
+ | transition: all 400ms; | ||
+ | text-decoration: none !important; | ||
+ | box-shadow: rgba(25, 128, 195, .3) 3px 3px 4px 0px; | ||
+ | } | ||
+ | |||
+ | .links-button:hover { | ||
background-color: var(--links-orange); | background-color: var(--links-orange); | ||
color: var(--links-grey); | color: var(--links-grey); | ||
} | } | ||
− | /* NEW HOMEPAGE CSS | + | |
+ | .recent-change { | ||
+ | border-bottom: 2px solid #e9e9e9; | ||
+ | padding: .5rem; | ||
+ | color: #212529; | ||
+ | } | ||
+ | |||
+ | .change-time { | ||
+ | color: #919191; | ||
+ | padding-left: 5px; | ||
+ | } | ||
+ | /* NEW HOMEPAGE CSS END */ |
Latest revision as of 17:09, 9 October 2023
/* CSS placed here will be applied to all skins */ /* Styling for filtered results format start */ .filtered { display: flex; flex-direction: column; } .filtered .filtered-views { flex: auto; margin: 1em 0; } .filtered .filtered-filters { /* width: 300px; margin: 1em 0 0 1em;*/ margin: 0; } .filtered-filters, .filtered-value, .filtered-value-scrollable { overflow: auto; } /* Styling for filtered results format end */ /* Width for discourse topics list on front-page */ d-topics-list iframe { width: 100% !important; margin-left: auto; margin-right: auto; } /* Hide extra info in search results */ .mw-search-result-data { display: none !important; } /* Hide section editing */ .mw-editsection { display: none !important; } /* NEW HOMEPAGE CSS START */ :root { --links-grey: #415262; --links-orange: rgb(238, 120, 2); --links-blue: #1980c3; --links-cyan: #34b8b8; } #links-homepage { color: var(--links-grey); } .links-tile { display: flex; padding: 1em; flex-direction: column; justify-content: center; align-items: center; background-color: var(--links-grey); color: rgba(255, 255, 255, .8) !important; height: 150px; text-decoration: none !important; transition: all 400ms; } .links-tile svg { fill: rgba(255, 255, 255, .8); transition: all 400ms; height: 70px; } .links-tile:hover { background-color: var(--links-orange); color: var(--links-grey) !important; transform: scale(1.05); } .links-tile:hover svg { fill: var(--links-grey); } .links-tile-title { font-variant: small-caps; text-align: center; } .links-divider { height: 4px; background-color: var(--links-blue); background-image: linear-gradient(to right, var(--links-orange), var(--links-cyan), var(--links-blue)); } .links-button { display: inline-block; padding: .5em 1em; text-align: center; font-variant: small-caps; border-radius: 7px; background-color: var(--links-blue); color: rgba(255, 255, 255, .8) !important; transition: all 400ms; text-decoration: none !important; box-shadow: rgba(25, 128, 195, .3) 3px 3px 4px 0px; } .links-button:hover { background-color: var(--links-orange); color: var(--links-grey); } .recent-change { border-bottom: 2px solid #e9e9e9; padding: .5rem; color: #212529; } .change-time { color: #919191; padding-left: 5px; } /* NEW HOMEPAGE CSS END */