mediawiki-skin-crystal/resources/parts/portableinfobox.less
2025-10-12 21:41:53 +11:00

57 lines
1.7 KiB
Plaintext

.portable-infobox {
--pi-item-spacing: calc(var(--space));
margin-left: var(--space);
color: var(--gold-7);
}
.pi-title.pi-title, .pi-header.pi-header {
border-bottom: 2px solid;
border-image: linear-gradient(90deg, var(--gold-7), transparent 80%) 30;
font-family: 'Libre Caslon';
line-height: 1em;
padding-bottom: .5em;
}
.pi-horizontal-group *:not(.pi-header), .pi-data, .pi-media{
background: var(--white) border-box;
}
.pi-horizontal-group .pi-horizontal-group-item:not(:first-child) {
border: none;
}
.pi-data-label {
text-align: center;
}
@media (min-width: 1081px) {
.portable-infobox {
margin-right: calc(var(--space) * 20 * -1);
}
}
@media (min-width: 721px) {
.portable-infobox {
background: linear-gradient(80deg, var(--gold-3) 0%, var(--white) 40% 0%, var(--gold-1) 60%, transparent 80%);
// conic-gradient(from 15deg at 20% -80%, var(--gold-4) 25%, var(--white) 40%, var(--white) 44%, var(--gold-4) 50%) padding-box;
// background: var(--gold-4)
// background: conic-gradient(from 15deg at 20% -80%, var(--gold-4) 25%, var(--white) 40% 0%, var(--white) 44% 0%, var(--gold-4) 50%);
// background: conic-gradient(
// from 339deg at 20% -60%,
// var(--gold-3) 40%, var(--white) 47% 0%, var(--gold-2) 49%,
// var(--white) 51% 0%, var(--white) 51% 0%, var(--gold-3) 52%,
// var(--gold-3) 53%, var(--white) 54% 0%, var(--white) 55% 0%, var(--gold-3) 56%)
}
}
@media (max-width: 720px) {
.portable-infobox {
background: linear-gradient(85deg, var(--gold-3) 0%, var(--white) 70% 0%, var(--gold-1) 100%);
margin-left: 0;
margin-right: 0;
}
.pi-title:first-child {
display: none;
}
}