blocksy-tainacan/sass/tainacan-item-single.scss

189 lines
4.9 KiB
SCSS

/* Single Item Page */
.single-item-data-section {
h1 {
--fontSize: 30px;
}
h2 {
--fontSize: 26px;
}
h3 {
--fontSize: 22px;
}
h4 {
--fontSize: 20px;
}
h5 {
--fontSize: 18px;
}
h6 {
--fontSize: 16px;
}
.tainacan-item-file-download {
position: absolute;
opacity: 0;
transform: scale(0);
border-radius: 24px;
width: 36px;
height: 36px;
bottom: -18px;
right: calc(50% - 18px);
cursor: pointer;
font-size: 0;
background-color: var(--paletteColor1, #3eaf7c);
color: white;
transition: opacity 0.3s ease, transform 0.3s ease, font-size 0.3s ease;
a {
height: 38px;
width: 38px;
display: block;
position: relative;
z-index: 99;
}
&::after {
position: relative;
top: -38px;
display: inline-block;
font: normal normal normal 20px/1 "TainacanIcons";
font-size: 1.25rem !important;
line-height: 2.25rem;
text-rendering: auto;
vertical-align: middle;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 1.25em;
text-transform: none !important;
letter-spacing: normal !important;
content: 'download';
display: flex;
justify-content: center;
align-items: center;
}
}
.single-item-collection--document {
&:hover {
.tainacan-item-file-download {
opacity: 1;
transform: scale(1);
}
}
display: flex;
justify-content: center;
> iframe, img.attachment-large {
display: block;
height: auto;
margin: 0 auto;
border: none;
}
> audio {
width: 100%;
}
> iframe {
@media only screen and (min-width: 768px){
min-height: 600px;
}
@media only screen and (max-width: 576px){
min-height: 429px;
}
}
.tainacan-embed-container{
width: 100%;
iframe {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
}
.s-item-collection--metadata {
height: 100%;
div {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
display: inline-block;
width: 100%;
&:last-child {
-webkit-column-break-inside: auto;
page-break-inside: auto;
break-inside: auto;
display: inline-block;
width: 100%;
}
}
@media only screen and (min-width: 768px) {
-moz-column-count: 2;
-moz-column-gap: 0;
-moz-column-rule: none;
-webkit-column-count: 2;
-webkit-column-gap: 0;
-webkit-column-rule: none;
column-count: 2;
column-gap: 4rem;;
column-rule: none;
}
@media only screen and (min-width: 1366px) {
-moz-column-count: 3;
-moz-column-gap: 7rem;
-moz-column-rule: none;
-webkit-column-count: 3;
-webkit-column-gap: 7rem;
-webkit-column-rule: none;
column-count: 3;
column-gap: 7rem;
column-rule: none;
}
h3 {
padding-right: 1rem;
margin-bottom: 0.25rem;
width: 100%;
&:first-of-type:last-of-type {
display: inline-block;
}
}
h4,
label {
padding-right: 0.875rem;
width: 100%;
&:first-of-type:last-of-type {
display: inline-block;
}
}
p {
word-wrap: break-word;
}
// Metadata type textarea has different separator
.multivalue-separator {
color: #cbcbcb;
margin: 0 8px;
}
.hierarchy-separator {
color: #cbcbcb;
}
.metadata-type-compound,
.metadata-type-textarea {
.multivalue-separator {
display: block;
max-height: 1px;
width: 35px;
background: #cbcbcb;
content: none;
color: transparent;
margin: 0.875rem auto;
}
}
.tainacan-compound-group {
padding-left: 1.5rem;
border-left: 1px solid #f2f2f2;
}
}
}