Difference between revisions of "MediaWiki:HealdImageCollection.css"
[http://www.nga.gov/content/ngaweb/research/casva/research-projects.html A Project of the National Gallery of Art, Center for Advanced Study in the Visual Arts ]
(Update package: HEALD Images) |
(Update package: HEALD Images) |
||
(4 intermediate revisions by the same user not shown) | |||
Line 178: | Line 178: | ||
.irs-grid-text { | .irs-grid-text { | ||
font-size: 15px; | font-size: 15px; | ||
+ | color: #01443e; | ||
} | } | ||
.irs-to, .irs-from { | .irs-to, .irs-from { |
Latest revision as of 19:05, August 25, 2021
/** * Image collection */ .card-columns .card { overflow: hidden; } .heald-collection .card:after { content:""; width:100%; height:100%; /* background:rgba(255,255,255,.15); */ position:absolute; top:0; left:0; opacity:1; transition:all .5s ease 0s } .heald-collection .card:hover:after { opacity:0 } .heald-collection .card a { position: relative; z-index: 0; height: 100%; display: block; } .heald-collection .card img { transition:all .5s ease 0s; } .heald-collection .card:hover a { z-index: 1; } .heald-collection .card:hover img { transform:scale(1.1) } .heald-collection .card .caption-wrapper { position:absolute; transition:all .5s ease 0s } .heald-collection .card .caption-wrapper { width:100%; padding:20px 10px; background:rgba(255,255,255,.75); bottom:-100%; left:0; z-index:1; text-align: center; } .heald-collection .card:hover .caption-wrapper{ bottom:0 } .heald-collection .card .caption { display:block; font-size:1.1rem; font-weight:bold; color:#222; text-align:center; } .heald-collection .filtered .filtered-filters { margin: 0; display: flex; flex-wrap: wrap; background: #f7f7f7; } .heald-collection .filtered .filtered-filters .filtered-filter .filtered-filter-label { background: #f7f7f7; } .heald-collection .filtered-views, .heald-collection .filtered-filters { border: 0; } .heald-collection .filtered .filtered-views .filtered-views-container { padding: 0; } .heald-collection .filtered-filter-container { background: #f7f7f7; padding: .5rem 1rem; border-radius: 5px; text-align: center; } .heald-collection .filtered-filters .filtered-number { margin: 1em 0 0 0; } .heald-collection .filtered-filters .filtered-number, .heald-collection .filtered-filters .filtered-value { border: 0; } .heald-collection .filtered-filters .filtered-number { flex: 0 0 100%; } .heald-collection .filtered-filters .filtered-value .filtered-value-option { width: 100%; text-align: left; } .heald-collection .filtered-value-andor label { text-transform: lowercase; } .heald-collection .filtered-value .filtered-filter-container, .heald-collection .filtered-value-checkboxes, .heald-collection .filtered-value-checkboxes *, .heald-collection .filtered-value-switches, .heald-collection .filtered-value-switches * { display: flex !important; flex-direction: row !important; white-space: nowrap !important; align-items: center !important; padding: .15rem .25rem !important; margin: 0 .15rem !important; } .heald-collection .filtered-filters .filtered-value .filtered-value-switches { border-bottom: 0; order: 1 !important; } .heald-collection .filtered-filters .filtered-value .filtered-value-checkboxes { order: 0 !important; } .heald-collection .filtered-filters .filtered-value { border: 0 !important; padding: 1em; margin: 1em 0 0 0; } .heald-collection .card .badges { position: absolute; height: 40px; width: auto; z-index: 2; border-radius: 5px; background: #ffffffa3; margin: .25rem; padding-left: .5rem; right: 0; display: flex; } .has-person::before, .has-keyword::before, .has-place::before { margin: 0 .5rem 0 0 !important; } .heald-collection .card .has-person::before, .heald-collection .card .has-keyword::before, .heald-collection .card .has-place::before { margin: .5rem .5rem 0 0 !important; } .heald-collection .card .has-person::before, .heald-collection .card .has-keyword::before, .heald-collection .card .has-place::before, input[value="Has person"] + .filtered-value-option-label::before, input[value="Has place"] + .filtered-value-option-label::before, .filtered-filter:nth-child(2) .filtered-filter-label::before, .has-person::before, .has-keyword::before, .has-place::before { content: ''; display: inline-block; width: 24px; height: 24px; background: #fff; background-size: contain; background-repeat: no-repeat; background-size: contain; margin: 0 .25rem 0 -.25rem; border-radius: 50%; opacity: .75; z-index: 2; filter: invert(1); } .heald-collection .card .has-person::before, .has-person::before, input[value="Has person"] + .filtered-value-option-label::before { background-image: url(https://www.svgrepo.com/show/307863/graphic-designer-creative-draw-artist.svg); } .heald-collection .card .has-place::before, .has-place::before, input[value="Has place"] + .filtered-value-option-label::before { background-image: url(https://www.svgrepo.com/show/161749/earth-globe.svg); } .heald-collection .card .has-keyword::before, .has-keyword::before, .filtered-filter:nth-child(2) .filtered-filter-label::before { background-image: url(https://www.svgrepo.com/show/166933/key.svg) !important; } .filtered-filter:nth-child(2) .filtered-filter-label::before { margin-bottom: -6px; } .irs-grid-text { font-size: 15px; color: #01443e; } .irs-to, .irs-from { background-color: #01443e !important; } .irs-to, .irs-from, .irs-min, .irs-max { font-size: 15px; top: -8px !important; } @media only screen and (max-width:990px){.heald-collection .card{margin-bottom:30px} }