Bureaucrats, editor, Interface administrators, Administrators (Semantic MediaWiki), Curators (Semantic MediaWiki), Editors (Semantic MediaWiki), Administrators
47,327
edits
MediaWiki:Common.less/tiles.less: Difference between revisions
Jump to navigation
Jump to search
no edit summary
No edit summary Tag: Reverted |
No edit summary Tag: Manual revert |
||
Line 1:
/* ---------------------
tiles
--------------------- */
// mainpage.less relies on this; check before changing anything
:root {
--byline-arrow-filter: invert(29%) sepia(0%) saturate(376%) hue-rotate(172deg) brightness(87%) contrast(80%); // match --byline-color
--tile-border-color: #cabe9b;
--tile-background-color: #f9f3eb;
--tile-link-button-color: #f5e9db;
--tile-link-button-highlight-color: saturate( darken( #e2d2ba, 2.5% ), 2% );
--tile-dark-color: @white;
--tile-dark-bg: @shuttle-gray;
--tile-dark-link-color: #ccc;
--tile-dark-byline-color: fade( @white, 70% );
--tile-dark-header-color: @white;
}
.tile {
background: var(--tile-background-color);
border: 1px solid var(--tile-border-color);
box-shadow: @box-shadow;
padding: 1.5em 2em 1em;
max-width: 40em;
h2 {
font-size: 1.4em;
font-weight: bold;
border: none;
margin: 0 0 .4em;
}
// reduce spacing when byline and heading appear together
// (which should be the only way bylines appear)
.byline + h2 {
margin-top: -0.5em;
}
&.dark {
color: var(--tile-dark-color);
background: var(--tile-dark-bg);
border: none;
box-shadow: @box-shadow-dark;
h2 {
color: var(--tile-dark-header-color);
}
a {
color: var(--tile-dark-link-color);
}
.byline {
color: var(--tile-dark-byline-color);
}
}
}
.byline {
font-size: .9em;
color: var(--byline-color);
a {
color: var(--byline-color);
}
}
/* ---------------------
tile halves
--------------------- */
// contains .tile or .tile-halves
.tile-row {
display: flex;
flex-flow: row wrap;
margin-bottom: 1em;
}
.tile-halves {
display: flex;
flex-flow: row wrap;
border: 1px solid var(--tile-border-color);
background: var(--tile-background-color);
box-shadow: @box-shadow;
h2 {
font-size: 1.4em;
font-weight: bold;
border: none;
margin: 0 0 .4em;
}
.byline + h2 {
margin-top: -0.5em;
}
}
// goes inside .tile-halves
.tile-top {
width: 100%;
padding: 1.3rem 1.5rem .6rem;
&.tile-image {
display: flex;
align-items: center; // vertically center images
background-color: var(--byline-color);
overflow: hidden;
padding: 0;
height: 13vw;
max-height: 12em;
transition: .4s ease-out;
.tile-halves:hover & img {
transform: scale(1.1);
transition: .5s ease-out;
}
span {
width: 100%;
}
img {
width: 100%;
object-fit: cover;
max-height: 200px;
transition: .4s ease-out;
}
}
}
// goes inside .tile-halves
.tile-bottom {
background: var(--tile-background-color);
border-top: 1px solid var(--tile-border-color);
width: 100%;
padding: 1rem 1.5rem .6rem;
&.link-button {
align-self: flex-end; // have link stick to the bottom
padding: 0;
a {
display: block;
text-align: center;
padding: .75em 1.5em .8em;
text-decoration: none;
}
}
// must be used in conjunction with .link-button
&.read-more {
background: var(--tile-link-button-color);
transition: .3s ease-out;
a {
color: var(--byline-color);
font-weight: bold;
text-align: right;
}
&:hover {
background: var(--tile-link-button-highlight-color);
.arrow {
transform: translateX(50%);
}
}
.arrow {
filter: var(--byline-arrow-filter);
margin-left: .4em;
transition: .3s ease-out;
}
}
}
/* ---------------------
oswf tile
--------------------- */
.tile.oswf-day {
margin-left: .5em;
}
.oswf-tile {
margin: 1em;
&.oswf-complete {
opacity: 0.65;
}
.oswf-summary {
font-size: 105%;
line-height: 1.6;
margin-top: -0.4em;
}
.oswf-img {
display: block;
max-width: 75px;
float: right;
img {
max-width: 100%;
height: auto;
}
}
.oswf-guidance {
border-top: 1px solid @gallery;
padding-top: 1em;
}
}
| |||