Moves some styling related to relationship and compound metadata across blocks.

This commit is contained in:
mateuswetah 2024-05-28 21:30:56 -03:00
parent a90fbc813d
commit 4d1d17f031
3 changed files with 142 additions and 73 deletions

View File

@ -594,4 +594,73 @@ export default {
// Vue Blurhash transtition effect // Vue Blurhash transtition effect
@import '../../../../../node_modules/another-vue3-blurhash/dist/style.css'; @import '../../../../../node_modules/another-vue3-blurhash/dist/style.css';
.metadata-value {
.tainacan-compound-group {
margin-left: 2px;
padding-left: 0.875em;
border-left: 1px solid var(--tainacan-gray3);
.tainacan-compound-metadatum .label {
margin-bottom: 0.25em;
font-size: 1em !important;
color: var(--tainacan-info-color);
}
.tainacan-compound-metadatum p {
margin-bottom: 0.75em;
font-size: 1em;
}
.tainacan-metadatum .label {
font-size: 1em;
}
.multivalue-separator {
display: block;
max-height: 1px;
width: 80px;
background: var(--tainacan-gray3);
content: none;
color: transparent;
margin: 1em auto 1em -0.875em;
}
}
.tainacan-relationship-group {
.tainacan-relationship-metadatum {
.tainacan-relationship-metadatum-header {
display: flex;
align-items: center;
img {
margin-right: 12px;
max-width: 22px;
max-height: 22px;
}
.label {
font-weight: normal;
font-size: 1em !important;
margin-top: 0;
margin-left: 0;
margin-bottom: 0;
margin-right: 0;
}
}
.tainacan-metadatum {
margin-left: 40px;
.label {
color: var(--tainacan-gray4);
font-size: 1em !important;
line-height: 1em;
margin-top: 8px;
margin-bottom: 2px;
}
}
}
&>.multivalue-separator {
display: block;
max-height: 1px;
width: calc(100% - 40px);
background: var(--tainacan-gray2);
content: none;
color: transparent;
margin: 0.5em 0 0.5em 40px;
}
}
}
</style> </style>

View File

@ -272,5 +272,78 @@ export default {
transform: scale(1.0); transform: scale(1.0);
} }
} }
.tainacan-table {
.tainacan-relationship-group {
.tainacan-relationship-metadatum {
display: inline-block;
.tainacan-relationship-metadatum-header {
img {
display: none;
}
.label {
font-weight: normal;
font-size: 1em !important;
margin-top: 0;
margin-left: 0;
margin-bottom: 0;
margin-right: 0;
padding: 0;
}
}
.tainacan-metadatum {
display: none;
}
}
&>.multivalue-separator {
display: inline-block;
max-height: 100%;
width: 1px;
background: var(--tainacan-gray2);
content: none;
color: transparent;
margin: 0 6px;
}
}
.column-large-width {
.tainacan-compound-group {
display: inline-block;
font-size: 1.125em;
margin-top: -0.25em;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
max-width: 100%;
& * {
display: inline-block;
}
.label {
font-size: 1em !important;
padding: 0;
color: var(--tainacan-info-color);
&:not(:first-child)::before {
content: ', ';
font-size: 1em;
font-weight: normal;
color: var(--tainacan-info-color);
display: inline-block;
margin-right: 0.35em;
margin-left: -0.15em;
}
&::after {
content: ': ';
font-size: 1em;
color: var(--tainacan-info-color);
display: inline-block;
margin-right: 0.15em;
}
}
p {
font-size: 1em !important;
line-height: 1.65em !important;
}
}
}
}
</style> </style>

View File

@ -1757,79 +1757,6 @@
} }
} }
.tainacan-table {
.tainacan-relationship-group {
.tainacan-relationship-metadatum {
display: inline-block;
.tainacan-relationship-metadatum-header {
img {
display: none;
}
.label {
font-weight: normal;
font-size: 1em !important;
margin-top: 0;
margin-left: 0;
margin-bottom: 0;
margin-right: 0;
padding: 0;
}
}
.tainacan-metadatum {
display: none;
}
}
&>.multivalue-separator {
display: inline-block;
max-height: 100%;
width: 1px;
background: var(--tainacan-gray2);
content: none;
color: transparent;
margin: 0 6px;
}
}
}
.column-large-width {
.tainacan-compound-group {
display: inline-block;
font-size: 1.125em;
margin-top: -0.25em;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
max-width: 100%;
& * {
display: inline-block;
}
.label {
font-size: 1em !important;
padding: 0;
color: var(--tainacan-info-color);
&:not(:first-child)::before {
content: ', ';
font-size: 1em;
font-weight: normal;
color: var(--tainacan-info-color);
display: inline-block;
margin-right: 0.35em;
margin-left: -0.15em;
}
&::after {
content: ': ';
font-size: 1em;
color: var(--tainacan-info-color);
display: inline-block;
margin-right: 0.15em;
}
}
p {
font-size: 1em !important;
line-height: 1.65em !important;
}
}
}
.metadata-value { .metadata-value {
.tainacan-compound-group { .tainacan-compound-group {
margin-left: 2px; margin-left: 2px;