This repository has been archived on 2022-07-28. You can view files and clone it, but cannot push or open issues or pull requests.
md-cms/themes/default/mdEmbeds.css
Joshua Ramon Enslin bb8fa74cd6 Added option to switch themes.
Added standalone pages for:
 - Exhibitions
 - Events
 - Institutions
 - Collections
Added option to limit display to only a given set of institutions.
2018-06-18 10:43:22 +02:00

81 lines
3.3 KiB
CSS

/**
* Default theme for the backend of md:cms:
* Styles for data embedded from museum-digital.
*/
/**********
* Objects in search results.
*/
.searchGrid { }
.searchGrid .objTile { margin-bottom: 1em; vertical-align: top; }
.searchGrid .objTile img { max-height: 180px; }
/******
* Pagination bars
*/
.paginationBar { margin: 0 0 2em 0; background: #F2F2F2; border: 1px solid #D6D6D6; text-align: center; }
.paginationBar a { display: inline-block; padding: .3em .8em; transition: background .4s, color .4s; }
.paginationBar a.current:hover,
.paginationBar a:hover { background: #646464; color: #FFF; }
.paginationBar a.current,
a.navicurrent { background: #D6D6D6; }
/**********
* Simple tiles for displaying an object.
* This class also builds the base for other tiles.
*/
div.objTile { display: inline-block; width: 200px; border: 1px solid #D6D6D6; text-align: center;
transition: background .4s, box-shadow .4s; }
div.objTile > div { position: relative; padding: .5em .5em 1.5em .5em; }
div.objTile h4 { margin: 0; padding: 0 .5em; text-align: center; }
div.objTile img { max-width: 198px; }
div.objTile:hover { background: #F2F2F2; box-shadow: 1px 1px 3px #D6D6D6, -1px -1px 3px #D6D6D6; }
div.objTile > div > div { color: #888; font-size: .8em; }
div.objTile > div > div > a { position: absolute; top: 100%; left: -1px;
display: none; max-width: 50%; padding: .3em;
background: #FFF; text-align: left; border: 1px solid #D6D6D6;
transition: background .4s, color .4s; }
div.objTile:hover > div > div > a { display: block; animation: fade-in .4s; }
div.objTile > div > div > a:last-child { left: initial; right: -1px; text-align: right; }
div.objTile > div > div > a:hover { background: #EEE; color: #212121; }
/**********
* Object details.
*/
div.objDetails { }
div.objDetails dt { font-weight: bold; margin-top: .5em; }
div.objDetails dd { margin-left: 0; padding-left: 0; }
div.objDetails .objMainImg { max-width: 200px; margin: .5em 1em 1em 0; float: left;
border: 1px solid #D6D6D6; transition: max-width .4s; }
div.objDetails .objMainImg:hover { max-width: 100vw; max-height: 80vh; float: initial; }
.metadataLine { margin-top: 2.5em; color: #666; border-top: 1px solid #D6D6D6; }
.metadataLine > span { margin-right: 2em; font-size: .95em; font-style: italic; }
/**********
* Collection tiles.
*/
.objTile.collectionTile { text-align: left; }
.objTile.collectionTile h4 { padding: 0 0; }
/*****
* Events on object detail page.
*/
.events { display: block; max-width: 100%; width: auto; margin: 0 0 1em 0; }
.events > * { display: inline-block; margin: 0 1em 1em 0; padding: 0 1em; border: 1px solid #D6D6D6;
vertical-align: top; transition: box-shadow .4s; }
.events h5 { margin: 0; padding: .5em 1em; font-size: .9em; background: #F2F2F2; color: #646464; }
.events tr * { padding: .1em .5em; vertical-align: middle; font-size: .95em; }
.events th { font-weight: normal; color: #646464; }
.events table { margin: .5em 0; }
.events > *:hover { box-shadow: 1px 1px 3px #D6D6D6, -1px -1px 3px #D6D6D6; }
.events tr:hover { background: initial; }