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) |
Tag: Undo |
||
Line 23: | Line 23: | ||
position: relative; | position: relative; | ||
z-index: 0; | z-index: 0; | ||
− | |||
− | |||
} | } | ||
.heald-collection .card img { | .heald-collection .card img { | ||
Line 144: | Line 142: | ||
.heald-collection .card .has-keyword::before, | .heald-collection .card .has-keyword::before, | ||
.heald-collection .card .has-place::before, | .heald-collection .card .has-place::before, | ||
− | |||
− | |||
− | |||
.has-person::before, | .has-person::before, | ||
.has-keyword::before, | .has-keyword::before, | ||
Line 156: | Line 151: | ||
background: #fff; | background: #fff; | ||
background-size: contain; | background-size: contain; | ||
− | |||
− | |||
− | |||
border-radius: 50%; | border-radius: 50%; | ||
opacity: .75; | opacity: .75; | ||
Line 164: | Line 156: | ||
filter: invert(1); | filter: invert(1); | ||
} | } | ||
− | .heald-collection .card .has-person::before, .has-person | + | .heald-collection .card .has-person::before, .has-person::before { |
background-image: url(https://www.svgrepo.com/show/307863/graphic-designer-creative-draw-artist.svg); | background-image: url(https://www.svgrepo.com/show/307863/graphic-designer-creative-draw-artist.svg); | ||
} | } | ||
− | .heald-collection .card .has-place::before, .has-place | + | .heald-collection .card .has-place::before, .has-place::before { |
background-image: url(https://www.svgrepo.com/show/161749/earth-globe.svg); | background-image: url(https://www.svgrepo.com/show/161749/earth-globe.svg); | ||
} | } | ||
− | .heald-collection .card .has-keyword::before, .has-keyword::before | + | .heald-collection .card .has-keyword::before, .has-keyword::before { |
− | background-image: url(https://www.svgrepo.com/show/166933/key.svg) | + | background-image: url(https://www.svgrepo.com/show/166933/key.svg); |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
@media only screen and (max-width:990px){.heald-collection .card{margin-bottom:30px} | @media only screen and (max-width:990px){.heald-collection .card{margin-bottom:30px} | ||
} | } |
Revision as of 21:09, August 17, 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; } .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, .has-person::before, .has-keyword::before, .has-place::before { content: ''; display: inline-block; width: 24px; height: 24px; background: #fff; background-size: contain; border-radius: 50%; opacity: .75; z-index: 2; filter: invert(1); } .heald-collection .card .has-person::before, .has-person::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 { background-image: url(https://www.svgrepo.com/show/161749/earth-globe.svg); } .heald-collection .card .has-keyword::before, .has-keyword::before { background-image: url(https://www.svgrepo.com/show/166933/key.svg); } @media only screen and (max-width:990px){.heald-collection .card{margin-bottom:30px} }