121 lines
2.0 KiB
SCSS
121 lines
2.0 KiB
SCSS
.entry-meta {
|
|
color: var(--theme-text-color);
|
|
--theme-link-initial-color: var(--theme-text-color);
|
|
|
|
li {
|
|
display: inline-block;
|
|
|
|
&:not(:last-of-type) {
|
|
margin-inline-end: 9px;
|
|
}
|
|
|
|
&:after {
|
|
margin-inline-start: 9px;
|
|
}
|
|
|
|
svg,
|
|
&:after,
|
|
[class*='ct-media-container'] {
|
|
position: relative;
|
|
top: -0.1em;
|
|
vertical-align: var(--vertical-align, middle);
|
|
}
|
|
|
|
[class*='ct-media-container'] {
|
|
border-radius: 100%;
|
|
margin-inline-end: 0.5em;
|
|
|
|
+ svg {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
svg {
|
|
fill: currentColor;
|
|
margin-inline-end: 7px;
|
|
}
|
|
|
|
> span {
|
|
margin-inline-end: 0.27em;
|
|
}
|
|
}
|
|
|
|
// meta style
|
|
&[data-type*='none'] li:not(:last-of-type) {
|
|
margin-inline-end: 20px;
|
|
}
|
|
|
|
&[data-type*='slash'] li:not(:last-of-type) {
|
|
&:after {
|
|
content: '/';
|
|
--vertical-align: baseline;
|
|
}
|
|
}
|
|
|
|
&[data-type*='line'] li:not(:last-of-type) {
|
|
&:after {
|
|
content: '-';
|
|
}
|
|
}
|
|
|
|
&[data-type*='circle'] li:not(:last-of-type) {
|
|
&:after {
|
|
content: '●';
|
|
font-size: 0.35em;
|
|
}
|
|
}
|
|
|
|
&[data-type*='icons'] svg {
|
|
width: 13px;
|
|
height: 13px;
|
|
}
|
|
|
|
// categories type
|
|
:is([data-type='pill'], [data-type='underline']) {
|
|
a {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
margin-top: 2px;
|
|
margin-bottom: 2px;
|
|
}
|
|
}
|
|
|
|
[data-type='pill'] a {
|
|
min-height: 25px;
|
|
padding: 0 8px;
|
|
border-radius: 3px;
|
|
background: var(--theme-button-background-initial-color);
|
|
|
|
--theme-link-initial-color: var(--theme-button-text-initial-color);
|
|
--theme-link-hover-color: var(--theme-button-text-hover-color);
|
|
|
|
&:hover {
|
|
background: var(--theme-button-background-hover-color);
|
|
}
|
|
|
|
&:not(:last-of-type) {
|
|
margin-inline-end: 4px;
|
|
}
|
|
}
|
|
|
|
[data-type='underline'] a {
|
|
position: relative;
|
|
|
|
&:before {
|
|
position: absolute;
|
|
bottom: -0.1em;
|
|
content: '';
|
|
width: 100%;
|
|
height: 1px;
|
|
opacity: 0.5;
|
|
background: currentColor;
|
|
transform: opacity 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);
|
|
}
|
|
|
|
&:hover {
|
|
&:before {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
} |