No edit summary |
No edit summary |
||
(14 intermediate revisions by the same user not shown) | |||
Line 9: | Line 9: | ||
padding: .5em; | padding: .5em; | ||
overflow: hidden; | overflow: hidden; | ||
position:relative; | |||
} | } | ||
Line 61: | Line 62: | ||
.card-indicator { | .card-indicator { | ||
float: right; | float: right; | ||
position: | position: absolute; | ||
width: 36px; | |||
height: 36px; | |||
top: 6px; | |||
right: 8px; | |||
opacity: .75; | |||
} | } | ||
/* Live Excerpt Indicator */ | /* Live Excerpt Indicator */ | ||
.circle { | .circle { | ||
width: | width: 10px; | ||
height: | height: 10px; | ||
background-color: # | background-color: #D29B31; | ||
border-radius: 50%; | border-radius: 50%; | ||
position: absolute; | position: absolute; | ||
top: | top: 13px; | ||
left: | left: 13px; | ||
} | } | ||
.pulse { | .pulse { | ||
border: | border: 2px solid #D29B31; | ||
border-radius: | border-radius: 25px; | ||
height: | height: 16px; | ||
width: | width: 16px; | ||
position: absolute; | position: absolute; | ||
left: | left: 10px; | ||
top: | top: 10px; | ||
animation: pulsate | animation: pulsate 5s ease-out; | ||
animation-iteration-count: infinite; | animation-iteration-count: infinite; | ||
opacity: 0.0 | opacity: 0.0; | ||
} | } | ||
@keyframes pulsate { | @keyframes pulsate { | ||
0% {transform: scale(0.1, 0.1); opacity: 0.0;} | 0% {transform: scale(0.1, 0.1); opacity: 0.0;} | ||
50% {opacity: | 50% {opacity: .5;} | ||
100% {transform: scale(1. | 100% {transform: scale(1.15, 1.15); opacity: 0.0;} | ||
} | } | ||
Line 123: | Line 126: | ||
margin-top:0; | margin-top:0; | ||
} | } | ||
Latest revision as of 18:05, 5 February 2024
.card {
background: #f8f9fa;
border: 1px solid #a2a9b1;
border-left: 1em solid #a2a9b1;
box-sizing: border-box;
break-inside: avoid;
margin: 1em 0;
padding: .5em;
overflow: hidden;
position:relative;
}
.card .right {
float: right;
}
.card-icon {
float: left;
margin: .5em;
}
.card-icon img{
height: 1.3em;
width: 1.3em;
}
.card-tooltip {
float: right;
margin: .5em;
}
.card-title {
font-weight: bold;
margin: .5em;
}
.card-content {
margin: .5em;
}
.card-content img {
vertical-align: middle;
max-width: 100%;
height: auto;
}
.card-content .thumb {
background: transparent;
border: none;
}
.card-content .thumbinner {
margin: 0;
}
.card-content .template-video {
background: transparent;
border: none;
padding: 0;
}
.card-grid {
display: grid;
grid-auto-rows: minmax( 100px, auto );
grid-gap: 10px;
grid-template-columns: repeat( auto-fit, minmax( 300px, 1fr ) );
margin: 1em 0;
width: auto;
}
.card-indicator {
float: right;
position: absolute;
width: 36px;
height: 36px;
top: 6px;
right: 8px;
opacity: .75;
}
/* Live Excerpt Indicator */
.circle {
width: 10px;
height: 10px;
background-color: #D29B31;
border-radius: 50%;
position: absolute;
top: 13px;
left: 13px;
}
.pulse {
border: 2px solid #D29B31;
border-radius: 25px;
height: 16px;
width: 16px;
position: absolute;
left: 10px;
top: 10px;
animation: pulsate 5s ease-out;
animation-iteration-count: infinite;
opacity: 0.0;
}
@keyframes pulsate {
0% {transform: scale(0.1, 0.1); opacity: 0.0;}
50% {opacity: .5;}
100% {transform: scale(1.15, 1.15); opacity: 0.0;}
}
/**
* Dark mode
*/
html.skin-citizen-dark .card {
background: #303134;
border-color: #3c4043;
color: #bdc1c6;
}
html.skin-citizen-dark .card-icon {
filter: invert( 1 );
}
/* Interwiki inclusion modifications */
.wikipedia-excerpt .error,.infobox,.navigation-not-searchable {
display:none;
}
.wikipedia-excerpt .mw-references-wrap {
height:0;
overflow:hidden;
margin-top:0;
}