mirror of
https://github.com/Universal-Omega/PortableInfobox.git
synced 2024-12-18 11:10:29 +00:00
386 lines
6.7 KiB
Plaintext
386 lines
6.7 KiB
Plaintext
:root {
|
|
--pi-background: #f8f9fa;
|
|
--pi-secondary-background: #eaecf0;
|
|
--pi-border-color: #a2a9b1;
|
|
--pi-item-spacing: 5px 10px;
|
|
--pi-margin: 15px;
|
|
--pi-width: 270px
|
|
}
|
|
|
|
.portable-infobox {
|
|
background: var(--pi-background);
|
|
clear: right;
|
|
float: right;
|
|
font-size: .85em;
|
|
margin: 0 0 var(--pi-margin) var(--pi-margin);
|
|
width: var(--pi-width);
|
|
|
|
.pi-border-color {
|
|
border-color: var(--pi-border-color);
|
|
}
|
|
.pi-secondary-background {
|
|
background-color: var(--pi-secondary-background);
|
|
}
|
|
.pi-secondary-font {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.pi-item-spacing {
|
|
padding: var(--pi-item-spacing);
|
|
}
|
|
|
|
.pi-title {
|
|
border: 0;
|
|
margin: 0;
|
|
font-family: inherit;
|
|
font-size: 1.75em;
|
|
line-height: 1.5;
|
|
}
|
|
.pi-header {
|
|
border: 0;
|
|
margin: 0;
|
|
font-family: inherit;
|
|
font-size: 1.2em;
|
|
font-weight: bold;
|
|
line-height: 1.3;
|
|
}
|
|
.pi-image {
|
|
margin: 0;
|
|
max-width: 100%;
|
|
text-align: center;
|
|
}
|
|
.pi-data-label {
|
|
font-size: inherit;
|
|
line-height: inherit;
|
|
}
|
|
.pi-data-value {
|
|
>:not(ul), li {
|
|
margin: 0;
|
|
}
|
|
ol {
|
|
list-style-position: inside;
|
|
}
|
|
}
|
|
>.pi-item:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
}
|
|
.pi {
|
|
&-image {
|
|
&-thumbnail{
|
|
max-width: var(--pi-width);
|
|
height: auto;
|
|
}
|
|
&-collection-tabs {
|
|
list-style: none;
|
|
margin: 0 -1px -1px 0;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
text-align: center;
|
|
li {
|
|
border: 1px solid var(--pi-border-color);
|
|
box-sizing: border-box;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
margin: -1px -1px 0 0;
|
|
max-width: 50%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
vertical-align: bottom;
|
|
white-space: nowrap;
|
|
}
|
|
li.current {
|
|
background: var(--pi-border-color);
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
&-collection-tab-content {
|
|
display: none;
|
|
.video-thumbnail {
|
|
display: block;
|
|
}
|
|
&.current {
|
|
display: inherit;
|
|
}
|
|
}
|
|
}
|
|
&-caption {
|
|
-webkit-hyphens: auto;
|
|
-moz-hyphens: auto;
|
|
-ms-hyphens: auto;
|
|
hyphens: auto;
|
|
color: #808080;
|
|
font-size: 1em;
|
|
font-style: italic;
|
|
word-wrap: break-word;
|
|
}
|
|
&-data {
|
|
border-bottom-style: solid;
|
|
border-bottom-width: 1px;
|
|
display: -webkit-box;
|
|
display: -moz-box;
|
|
display: -ms-flexbox;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
-ms-box-orient: horizontal;
|
|
-webkit-box-orient: horizontal;
|
|
-ms-flex-direction: row;
|
|
-webkit-flex-direction: row;
|
|
flex-direction: row;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
&-label {
|
|
-ms-flex-preferred-size: 90px;
|
|
-webkit-flex-basis: 90px;
|
|
-moz-flex-basis: 90px;
|
|
flex-basis: 90px;
|
|
-webkit-hyphens: auto;
|
|
-moz-hyphens: auto;
|
|
-ms-hyphens: auto;
|
|
hyphens: auto;
|
|
overflow: hidden;
|
|
word-wrap: break-word;
|
|
}
|
|
&-value {
|
|
-ms-flex: 1;
|
|
-webkit-flex: 1;
|
|
-moz-flex: 1;
|
|
flex: 1;
|
|
-webkit-hyphens: auto;
|
|
-moz-hyphens: auto;
|
|
-ms-hyphens: auto;
|
|
hyphens: auto;
|
|
padding-left: 0;
|
|
word-break: break-word;
|
|
&:not(:first-child) {
|
|
padding-left: 10px;
|
|
}
|
|
}
|
|
}
|
|
&-group {
|
|
border-bottom-style: solid;
|
|
border-bottom-width: 1px;
|
|
>.pi-item:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
}
|
|
&-horizontal-group {
|
|
border-spacing: 0;
|
|
table-layout: fixed;
|
|
text-align: center;
|
|
width: 100%;
|
|
.pi-header {
|
|
text-align: left;
|
|
}
|
|
thead + tbody .pi-data-value {
|
|
padding-top: 0;
|
|
}
|
|
.pi-horizontal-group-item {
|
|
vertical-align: top;
|
|
&:not(:first-child) {
|
|
border-left-style: solid;
|
|
border-left-width: 1px;
|
|
}
|
|
}
|
|
.pi-data-label {
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
&-smart {
|
|
&-data {
|
|
&-label:not(:first-child),
|
|
&-value:not(:first-child) {
|
|
border-color: var(--pi-border-color);
|
|
border-left-style: solid;
|
|
border-left-width: 1px;
|
|
}
|
|
}
|
|
&-group {
|
|
border-bottom-style: solid;
|
|
border-bottom-width: 1px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
text-align: center;
|
|
&:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
&-head {
|
|
display: flex;
|
|
& + .pi-smart-group-body .pi-data-value {
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
&-body {
|
|
display: flex;
|
|
}
|
|
.pi-smart-data-label {
|
|
padding-bottom: 0;
|
|
box-sizing: border-box;
|
|
flex-basis: auto;
|
|
}
|
|
.pi-smart-data-value {
|
|
box-sizing: border-box;
|
|
flex-basis: auto;
|
|
}
|
|
}
|
|
}
|
|
&-layout-stacked {
|
|
.pi-data {
|
|
display: block;
|
|
}
|
|
.pi-data-value:not(:only-child) {
|
|
padding-left: 10px;
|
|
}
|
|
}
|
|
|
|
}
|
|
@media screen and (min-width: 720px) {
|
|
.pi-collapse .pi-header:first-child {
|
|
padding-right: 25px;
|
|
position: relative;
|
|
&::after {
|
|
border-color: currentColor;
|
|
border-style: solid;
|
|
border-width: 2px 2px 0 0;
|
|
content: '';
|
|
display: block;
|
|
height: 5px;
|
|
right: 10px;
|
|
position: absolute;
|
|
top: 50%;
|
|
width: 5px;
|
|
-webkit-transform: rotate(-45deg);
|
|
transform: rotate(-45deg);
|
|
margin-top: -3px;
|
|
}
|
|
}
|
|
.pi-collapse-closed {
|
|
.pi-header:first-child::after {
|
|
transform: rotate(135deg);
|
|
-webkit-transform: rotate(135deg);
|
|
-moz-transform: rotate(135deg);
|
|
-ms-transform: rotate(135deg);
|
|
margin-top: -5px;
|
|
}
|
|
> :nth-child(n+2) {
|
|
display: none;
|
|
}
|
|
.pi-horizontal-group {
|
|
thead {
|
|
display: none;
|
|
}
|
|
tbody {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 720px) {
|
|
.portable-infobox {
|
|
float: none;
|
|
width: initial;
|
|
font-size: initial;
|
|
margin: 0;
|
|
|
|
.skin-minerva & {
|
|
margin: 0 -16px;
|
|
}
|
|
|
|
.pi-title {
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.skin-minerva {
|
|
.pi-caption {
|
|
margin: var(--pi-item-spacing);
|
|
}
|
|
|
|
.pi-horizontal-group {
|
|
display: table;
|
|
margin: 0;
|
|
width: 100% !important;
|
|
|
|
.pi-header {
|
|
display: table-caption;
|
|
}
|
|
}
|
|
|
|
.pi-navigation {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
float: none;
|
|
}
|
|
}
|
|
|
|
/* PI errors */
|
|
p.pi-error-info {
|
|
background-color: #f33;
|
|
color: #fff;
|
|
font-size: 18px;
|
|
line-height: 28px;
|
|
margin: 0;
|
|
padding: 30px 50px;
|
|
}
|
|
ul.pi-debug {
|
|
background-color: #e6e6e6;
|
|
font-family: monospace;
|
|
list-style: none;
|
|
margin: 0;
|
|
width: 100%;
|
|
li {
|
|
margin: 0;
|
|
}
|
|
.error {
|
|
font-size: inherit;
|
|
}
|
|
}
|
|
.pi-debug-line {
|
|
display: -webkit-box;
|
|
display: -moz-box;
|
|
display: -ms-flexbox;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
&-number {
|
|
box-sizing: border-box;
|
|
-ms-flex-preferred-size: 50px;
|
|
-webkit-flex-basis: 50px;
|
|
-moz-flex-basis: 50px;
|
|
flex-basis: 50px;
|
|
-ms-flex-negative: 0;
|
|
-webkit-flex-shrink: 0;
|
|
-moz-flex-shrink: 0;
|
|
flex-shrink: 0;
|
|
padding-left: 10px;
|
|
}
|
|
&-code {
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
.pi-debug-error-message {
|
|
background-color: #000;
|
|
color: #fff;
|
|
font-family: Helvetica,Arial,sans-serif;
|
|
margin: 20px 0 10px 25px;
|
|
padding: 10px 15px;
|
|
position: relative;
|
|
width: 400px;
|
|
&:before {
|
|
border-bottom: 15px solid black;
|
|
border-left: 15px solid transparent;
|
|
border-right: 15px solid transparent;
|
|
content: '';
|
|
display: block;
|
|
height: 0;
|
|
left: 25px;
|
|
position: absolute;
|
|
top: -15px;
|
|
width: 0;
|
|
}
|
|
.pi-debug-error-message-item {
|
|
margin: 5px 0;
|
|
}
|
|
} |