mirror of
https://github.com/siyuan-note/siyuan.git
synced 2025-09-22 00:20:47 +02:00
1003 lines
19 KiB
SCSS
1003 lines
19 KiB
SCSS
.av {
|
||
user-select: none;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
max-width: 100%;
|
||
margin-top: 4px !important;
|
||
margin-bottom: 4px !important;
|
||
|
||
&:hover {
|
||
.av__views .block__icon,
|
||
.av__group-icon--hover {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
&--touch {
|
||
.av__views .block__icon,
|
||
.av__group-icon--hover,
|
||
.av__row--footer .av__calc {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
&__cursor {
|
||
width: .1px;
|
||
height: 0;
|
||
opacity: 0;
|
||
}
|
||
|
||
&__container {
|
||
overflow-x: auto;
|
||
overflow-y: hidden;
|
||
cursor: auto;
|
||
|
||
&.fn__block {
|
||
overflow: visible;
|
||
}
|
||
}
|
||
|
||
&__pulse {
|
||
width: 70%;
|
||
height: 22px;
|
||
display: block;
|
||
position: relative;
|
||
overflow: hidden;
|
||
background: var(--b3-border-color);
|
||
border-radius: var(--b3-border-radius);
|
||
|
||
&::after {
|
||
content: " ";
|
||
border-radius: var(--b3-border-radius);
|
||
position: absolute;
|
||
z-index: 1;
|
||
animation: 1s linear infinite keyframes-pulse;
|
||
background: linear-gradient(90deg, transparent 0, rgba(255, 255, 255, .4) 50%, transparent 100%);
|
||
display: block;
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
&__header {
|
||
position: relative;
|
||
|
||
.layout-tab-bar {
|
||
background-color: transparent;
|
||
|
||
.item__graphic {
|
||
height: calc(1.625em - 10px);
|
||
width: calc(1.625em - 10px);
|
||
padding: 10px 5px 10px 8px;
|
||
line-height: calc(1.625em - 10px);
|
||
font-size: inherit;
|
||
text-align: center;
|
||
}
|
||
|
||
.item__text {
|
||
padding-left: 5px;
|
||
line-height: normal;
|
||
}
|
||
}
|
||
}
|
||
|
||
&__views {
|
||
align-items: center;
|
||
box-shadow: 0 -1px inset var(--b3-theme-background-light);
|
||
font-size: 87.5%;
|
||
|
||
&--show .block__icon {
|
||
opacity: 1;
|
||
}
|
||
|
||
.block__icon svg {
|
||
height: 1em;
|
||
width: 1em;
|
||
}
|
||
|
||
.b3-text-field {
|
||
transition: var(--b3-width-transition);
|
||
}
|
||
}
|
||
|
||
&__title {
|
||
outline: none;
|
||
font-weight: bold;
|
||
|
||
&:empty::after {
|
||
color: var(--b3-theme-on-surface-light);
|
||
content: attr(data-tip);
|
||
}
|
||
}
|
||
|
||
&__counter {
|
||
position: absolute;
|
||
bottom: 0;
|
||
height: 26px;
|
||
padding: 0 5px;
|
||
background-color: var(--b3-parent-background);
|
||
font-size: 87.5%;
|
||
}
|
||
|
||
&__mask {
|
||
position: fixed;
|
||
top: 0;
|
||
bottom: 0;
|
||
right: 0;
|
||
left: 0;
|
||
}
|
||
|
||
&__scroll {
|
||
overflow: auto hidden;
|
||
}
|
||
|
||
&__row {
|
||
display: flex;
|
||
border-bottom: 1px solid var(--b3-theme-surface-lighter);
|
||
position: relative;
|
||
font-size: 87.5%;
|
||
|
||
&.dragover__top::after,
|
||
&.dragover__bottom::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
height: 4px;
|
||
background-color: var(--b3-theme-primary-lighter);
|
||
z-index: 3;
|
||
}
|
||
|
||
&.dragover__top::after {
|
||
top: -2.5px;
|
||
}
|
||
|
||
&.dragover__bottom::after {
|
||
bottom: -2.5px;
|
||
}
|
||
|
||
&:hover [data-type="block-more"] {
|
||
display: block;
|
||
}
|
||
|
||
&--select,
|
||
&--hl {
|
||
&:not(.av__row--header) .av__cell,
|
||
&:not(.av__row--header) .av__firstcol {
|
||
background-color: var(--b3-theme-primary-lightest);
|
||
}
|
||
|
||
.av__firstcol svg {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
&--header {
|
||
z-index: 3;
|
||
|
||
& > .block__icons > .block__icon svg {
|
||
height: 1em;
|
||
width: 1em;
|
||
}
|
||
}
|
||
|
||
&--header,
|
||
&--footer {
|
||
background-color: var(--b3-parent-background);
|
||
}
|
||
|
||
&--footer {
|
||
display: flex;
|
||
border-top: 1px solid var(--b3-theme-surface-lighter);
|
||
color: var(--b3-theme-on-surface);
|
||
position: relative;
|
||
z-index: 2;
|
||
|
||
&:hover .av__calc,
|
||
&.av__row--show .av__calc {
|
||
opacity: 1;
|
||
}
|
||
|
||
.av__calc {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 5px 6px 5px 5px;
|
||
border-right: 1px;
|
||
flex-direction: row-reverse;
|
||
box-sizing: border-box;
|
||
opacity: 0;
|
||
overflow: hidden;
|
||
font-size: 87.5%;
|
||
white-space: nowrap;
|
||
line-height: 1.625em;
|
||
cursor: pointer;
|
||
|
||
&[data-dtype="lineNumber"] {
|
||
cursor: inherit;
|
||
}
|
||
|
||
&:first-child {
|
||
padding-left: calc(1.625em - 6px);
|
||
box-sizing: initial;
|
||
}
|
||
|
||
&.av__calc--ashow {
|
||
opacity: 1;
|
||
}
|
||
|
||
svg {
|
||
margin-left: 5px;
|
||
height: 1.625em;
|
||
width: calc(1.625em - 14px);
|
||
}
|
||
|
||
span {
|
||
color: var(--b3-theme-on-background);
|
||
margin-left: 5px;
|
||
}
|
||
|
||
&:hover {
|
||
background-color: var(--b3-list-hover);
|
||
}
|
||
}
|
||
}
|
||
|
||
&--util {
|
||
display: flex;
|
||
|
||
.b3-button {
|
||
margin: 5px 0 5px 1.625em;
|
||
}
|
||
}
|
||
}
|
||
|
||
&__gallery {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||
gap: 16px;
|
||
width: 100%;
|
||
margin-top: 8px;
|
||
|
||
&--top {
|
||
margin-top: 16px;
|
||
}
|
||
|
||
&--small {
|
||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||
}
|
||
|
||
&--big {
|
||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||
}
|
||
|
||
&-item {
|
||
box-shadow: var(--b3-av-gallery-shadow);
|
||
border-radius: var(--b3-border-radius);
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
min-height: 40px;
|
||
|
||
&:hover {
|
||
.av__gallery-cover {
|
||
background-color: var(--b3-theme-surface-light);
|
||
}
|
||
|
||
.av__gallery-fields {
|
||
background-color: var(--b3-theme-surface);
|
||
}
|
||
|
||
.av__gallery-actions {
|
||
opacity: .86;
|
||
}
|
||
}
|
||
|
||
&--select:before {
|
||
content: "";
|
||
background-color: var(--b3-theme-primary-lightest);
|
||
height: 100%;
|
||
width: 100%;
|
||
z-index: 1;
|
||
position: absolute;
|
||
}
|
||
}
|
||
|
||
&-cover {
|
||
border-bottom: 1px solid var(--b3-border-color);
|
||
background-color: var(--b3-theme-surface);
|
||
border-radius: var(--b3-border-radius) var(--b3-border-radius) 0 0;
|
||
overflow: hidden;
|
||
transition: background 100ms ease-out;
|
||
position: relative;
|
||
cursor: pointer;
|
||
|
||
&--0 {
|
||
aspect-ratio: 16/9;
|
||
}
|
||
|
||
&--1 {
|
||
aspect-ratio: 9/16;
|
||
}
|
||
|
||
&--2 {
|
||
aspect-ratio: 4/3;
|
||
}
|
||
|
||
&--3 {
|
||
aspect-ratio: 3/4;
|
||
}
|
||
|
||
&--4 {
|
||
aspect-ratio: 3/2;
|
||
}
|
||
|
||
&--5 {
|
||
aspect-ratio: 2/3;
|
||
}
|
||
|
||
&--6 {
|
||
aspect-ratio: 1;
|
||
}
|
||
}
|
||
|
||
&-img {
|
||
height: 100%;
|
||
object-fit: cover;
|
||
width: 100%;
|
||
object-position: center;
|
||
pointer-events: none;
|
||
|
||
&--fit {
|
||
object-fit: contain;
|
||
}
|
||
}
|
||
|
||
&-content {
|
||
margin: 8px 8px 0;
|
||
color: var(--b3-theme-on-surface);
|
||
transform: scale(0.85);
|
||
left: 0;
|
||
right: 0;
|
||
transform-origin: 0 0;
|
||
width: calc(100% / 0.85 - 16px);
|
||
|
||
& ~ div {
|
||
position: absolute;
|
||
content: "";
|
||
left: 0;
|
||
height: 100%;
|
||
width: 100%;
|
||
top: 0;
|
||
}
|
||
|
||
.render-node {
|
||
overflow: hidden !important;
|
||
}
|
||
}
|
||
|
||
&-fields {
|
||
border-radius: 0 0 var(--b3-border-radius) var(--b3-border-radius);
|
||
flex: 1;
|
||
transition: background 100ms ease-out;
|
||
white-space: nowrap;
|
||
font-size: 85%;
|
||
min-height: 23px;
|
||
padding: 5px 4px;
|
||
|
||
&:hover {
|
||
.b3-chip[data-type="block-more"] {
|
||
top: 4px;
|
||
display: block;
|
||
z-index: 1;
|
||
}
|
||
}
|
||
|
||
.av__cell {
|
||
padding: 2px 4px;
|
||
border-right: 0;
|
||
min-height: calc(1.625em + 4px);
|
||
|
||
&:hover {
|
||
background-color: var(--b3-list-hover);
|
||
border-radius: var(--b3-border-radius);
|
||
}
|
||
|
||
.block__icon {
|
||
display: none;
|
||
top: 1px;
|
||
}
|
||
|
||
&[data-dtype="created"],
|
||
&[data-dtype="updated"],
|
||
&[data-dtype="lineNumber"] {
|
||
cursor: default;
|
||
}
|
||
|
||
&[data-dtype="mAsset"] .av__cellassetimg:first-child,
|
||
&[data-dtype="mAsset"] .b3-chip:first-child,
|
||
&[data-dtype="mSelect"] .b3-chip:first-child,
|
||
&[data-dtype="select"] .b3-chip:first-child {
|
||
margin-left: 0;
|
||
}
|
||
}
|
||
|
||
&--edit .av__gallery-field[data-empty="true"] .av__gallery-tip {
|
||
display: block;
|
||
}
|
||
|
||
&:not(.av__gallery-fields--edit) [data-empty="true"] {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
&-field {
|
||
position: relative;
|
||
}
|
||
|
||
&-name {
|
||
opacity: 0.38;
|
||
padding: 2px 4px;
|
||
width: 100%;
|
||
white-space: normal;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
&-tip {
|
||
box-sizing: border-box;
|
||
display: none;
|
||
opacity: 0.38;
|
||
padding: 2px 4px;
|
||
width: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
}
|
||
|
||
&-tip,
|
||
&-name {
|
||
img:first-child, svg:first-child, svg.ariaLabel {
|
||
height: 1.625em;
|
||
width: calc(1.625em - 10px);
|
||
margin: 0 5px 0 0;
|
||
font-size: 1em;
|
||
vertical-align: bottom;
|
||
}
|
||
|
||
img:first-child {
|
||
height: calc(1.625em - 10px);
|
||
float: left;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
span:first-child {
|
||
width: calc(1.9em - 10px);
|
||
margin: 0 5px 0 0;
|
||
height: 1.625em;
|
||
font-size: .85em;
|
||
}
|
||
}
|
||
|
||
&-add {
|
||
box-shadow: var(--b3-av-gallery-shadow);
|
||
border-radius: var(--b3-border-radius);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: var(--b3-theme-on-surface);
|
||
cursor: pointer;
|
||
transition: background 100ms ease-out, color 100ms ease-out;
|
||
position: relative;
|
||
|
||
&:hover {
|
||
background-color: var(--b3-list-hover);
|
||
color: var(--b3-theme-on-background);
|
||
}
|
||
}
|
||
|
||
&-load {
|
||
border-top: 1px solid var(--b3-border-color);
|
||
margin-top: 5px;
|
||
}
|
||
|
||
&-actions {
|
||
position: absolute;
|
||
right: 8px;
|
||
top: 8px;
|
||
display: flex;
|
||
opacity: 0;
|
||
transition: var(--b3-transition);
|
||
z-index: 2;
|
||
}
|
||
|
||
&-item, &-add {
|
||
&.dragover__left::after,
|
||
&.dragover__right::after {
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 4px;
|
||
content: '';
|
||
position: absolute;
|
||
background-color: var(--b3-theme-primary-lighter);
|
||
z-index: 3;
|
||
}
|
||
|
||
&.dragover__left::after {
|
||
left: -10px;
|
||
}
|
||
|
||
&.dragover__right::after {
|
||
right: -10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
&__layout {
|
||
display: flex;
|
||
gap: 8px;
|
||
width: 100%;
|
||
margin: 8px 0;
|
||
|
||
&-item {
|
||
border: 1px solid var(--b3-border-color);
|
||
border-radius: var(--b3-border-radius);
|
||
text-align: center;
|
||
color: var(--b3-theme-on-surface);
|
||
font-size: 12px;
|
||
flex: 1;
|
||
cursor: pointer;
|
||
transition: var(--b3-transition);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
line-height: 1;
|
||
padding: 8px;
|
||
|
||
&:not(.av__layout-item--select):hover {
|
||
color: var(--b3-theme-on-background);
|
||
}
|
||
|
||
svg {
|
||
height: 14px;
|
||
width: 14px;
|
||
}
|
||
|
||
&--select {
|
||
color: var(--b3-theme-primary);
|
||
border-color: var(--b3-theme-primary);
|
||
}
|
||
}
|
||
}
|
||
|
||
&__cell {
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
padding: 5px 8px;
|
||
flex-shrink: 0;
|
||
border-right: 1px solid var(--b3-theme-surface-lighter);
|
||
overflow: hidden;
|
||
cursor: pointer;
|
||
// display: flex; 不需要使用，否则 av__celltext 会占满单元格，导致链接列点击空白无法进行编辑
|
||
|
||
[data-type="block-more"] {
|
||
display: none;
|
||
position: absolute;
|
||
right: 5px;
|
||
font-size: 85% !important;
|
||
top: 7.5px;
|
||
}
|
||
|
||
.popover__block {
|
||
color: var(--b3-protyle-inline-blockref-color);
|
||
}
|
||
|
||
&[data-wrap="true"] {
|
||
white-space: pre-wrap;
|
||
}
|
||
|
||
&[data-wrap="false"] {
|
||
white-space: nowrap;
|
||
}
|
||
|
||
&[data-dtype="block"] > .block__icon[data-type="copy"] {
|
||
display: none;
|
||
}
|
||
|
||
&.dragover__left::after,
|
||
&.dragover__right::after {
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 4px;
|
||
content: '';
|
||
position: absolute;
|
||
background-color: var(--b3-theme-primary-lighter);
|
||
z-index: 3;
|
||
}
|
||
|
||
&.dragover__left::after {
|
||
left: -2.5px;
|
||
}
|
||
|
||
&.dragover__right::after {
|
||
right: -2.5px;
|
||
}
|
||
|
||
&--select {
|
||
background-color: var(--b3-theme-primary-lightest);
|
||
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 2px;
|
||
left: 2px;
|
||
right: 2px;
|
||
bottom: 2px;
|
||
border-radius: var(--b3-border-radius-s);
|
||
box-shadow: 0 0 0 2px var(--b3-theme-primary-lighter);
|
||
pointer-events: none;
|
||
}
|
||
}
|
||
|
||
&--active {
|
||
background-color: var(--b3-theme-primary-lightest);
|
||
}
|
||
|
||
&--header {
|
||
padding: 5px 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
overflow: inherit; // 保证列宽和顺序调整的拖拽点样式
|
||
border-right-color: transparent;
|
||
|
||
&:hover {
|
||
background-color: var(--b3-list-hover);
|
||
}
|
||
|
||
.av__celltext {
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
img.av__cellheadericon {
|
||
height: calc(1.625em - 8px);
|
||
}
|
||
|
||
.av__cellheadericon {
|
||
height: 1.625em;
|
||
width: calc(1.625em - 8px);
|
||
color: var(--b3-theme-on-surface);
|
||
margin: 0 5px 0 0;
|
||
flex-shrink: 0;
|
||
font-size: inherit;
|
||
font-family: var(--b3-font-family-emoji);
|
||
|
||
&--pin {
|
||
margin: 0 0 0 5px;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
&--relation {
|
||
margin-right: 12px;
|
||
|
||
&:last-child {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
|
||
.block__icon {
|
||
position: absolute;
|
||
right: 5px;
|
||
top: 5px;
|
||
}
|
||
|
||
&:hover .block__icon {
|
||
opacity: 1;
|
||
background-color: var(--b3-theme-background-light) !important;
|
||
}
|
||
|
||
.b3-chip {
|
||
margin: 1px 2px;
|
||
padding: 2px 6px;
|
||
line-height: calc(1.625em - 6px);
|
||
font-size: inherit;
|
||
}
|
||
}
|
||
|
||
&__drag-fill {
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: 0;
|
||
width: 9px;
|
||
height: 9px;
|
||
border: 2px solid var(--b3-theme-primary-lighter);
|
||
border-radius: 50%;
|
||
box-sizing: border-box;
|
||
cursor: ns-resize;
|
||
}
|
||
|
||
&__celltext {
|
||
overflow: hidden;
|
||
|
||
&--url,
|
||
&--ref {
|
||
border-bottom: .5px solid var(--b3-border-color);
|
||
}
|
||
|
||
&--url.b3-chip {
|
||
max-width: 120px;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
border-bottom: 0;
|
||
}
|
||
|
||
& > .av__cellicon {
|
||
margin: 0 5px;
|
||
height: 10px;
|
||
width: 10px;
|
||
}
|
||
}
|
||
|
||
&__checkbox {
|
||
color: var(--b3-theme-on-surface);
|
||
height: 1.625em;
|
||
width: calc(1.625em - 10px);
|
||
box-sizing: border-box;
|
||
padding: 5px 0;
|
||
display: block;
|
||
|
||
&:hover {
|
||
color: var(--b3-theme-on-background);
|
||
}
|
||
}
|
||
|
||
&__firstcol {
|
||
svg {
|
||
@extend .av__checkbox;
|
||
opacity: 0;
|
||
margin: 5px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
&:hover svg {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
&__colsticky {
|
||
position: sticky;
|
||
left: 0;
|
||
z-index: 2; // 需大于 av__widthdrag，否则横行滚动后，拖拽会悬浮于 stick 列上
|
||
display: flex;
|
||
background-color: var(--b3-parent-background);
|
||
}
|
||
|
||
&__widthdrag {
|
||
position: absolute;
|
||
cursor: col-resize;
|
||
width: 5px;
|
||
height: 100%;
|
||
right: -2.5px;
|
||
transition: var(--b3-background-transition);
|
||
z-index: 1;
|
||
|
||
&:hover {
|
||
background-color: var(--b3-theme-primary);
|
||
}
|
||
}
|
||
|
||
&__panel {
|
||
position: relative;
|
||
|
||
.b3-menu {
|
||
min-width: 290px;
|
||
max-width: 290px;
|
||
|
||
&__item .b3-chip {
|
||
max-width: 100%;
|
||
margin: 3px 0;
|
||
padding-top: 4px;
|
||
padding-bottom: 4px;
|
||
float: left;
|
||
|
||
.icon {
|
||
width: 12px;
|
||
flex-shrink: 0;
|
||
margin-right: 6px;
|
||
margin-left: -5px;
|
||
}
|
||
}
|
||
|
||
.b3-chips {
|
||
padding: 0;
|
||
|
||
input {
|
||
outline: none;
|
||
border: 0;
|
||
background-color: var(--b3-menu-background);
|
||
flex: 1;
|
||
height: 30px;
|
||
color: var(--b3-theme-on-background);
|
||
}
|
||
}
|
||
|
||
.block__icon {
|
||
line-height: 20px;
|
||
padding: 0 4px;
|
||
font-size: 12px;
|
||
align-self: center;
|
||
opacity: 1;
|
||
}
|
||
|
||
&__label {
|
||
overflow: hidden;
|
||
min-height: 30px;
|
||
}
|
||
|
||
&__icon.fn__grab {
|
||
color: var(--b3-theme-on-surface-light);
|
||
}
|
||
|
||
&__item {
|
||
transition: margin .2s cubic-bezier(0, 0, .2, 1) 0ms;
|
||
|
||
&[disabled] {
|
||
opacity: .38;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
&.dragover__top::after,
|
||
&.dragover__bottom::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
height: 4px;
|
||
background-color: var(--b3-theme-primary-lighter);
|
||
z-index: 3;
|
||
}
|
||
|
||
&.dragover__top::after {
|
||
top: -2.5px;
|
||
}
|
||
|
||
&.dragover__bottom::after {
|
||
bottom: -2.5px;
|
||
}
|
||
}
|
||
|
||
&__item:hover .b3-menu__action {
|
||
opacity: 1;
|
||
}
|
||
|
||
&__item[data-type="nobg"] {
|
||
cursor: auto;
|
||
}
|
||
|
||
&__item:not([data-type="nobg"]):hover,
|
||
&__item--current:not([data-type="nobg"]) {
|
||
background-color: var(--b3-list-hover);
|
||
}
|
||
}
|
||
}
|
||
|
||
&__button {
|
||
margin: 5px;
|
||
color: var(--b3-theme-on-surface);
|
||
background-color: transparent;
|
||
font-size: 75%;
|
||
|
||
&:hover,
|
||
&:focus {
|
||
background-color: var(--b3-list-hover);
|
||
box-shadow: none;
|
||
}
|
||
|
||
svg {
|
||
height: 1.625em;
|
||
width: calc(1.625em - 8px);
|
||
|
||
&[data-type="set-page-size"] {
|
||
margin: 0 0 0 4px;
|
||
border-radius: var(--b3-border-radius);
|
||
padding: 0 4px;
|
||
|
||
&:hover {
|
||
background-color: var(--b3-theme-background);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
&__group {
|
||
&-title {
|
||
position: sticky;
|
||
left: 0;
|
||
clear: both;
|
||
padding: 16px 0 8px 0;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.b3-chip {
|
||
padding: 2px 6px;
|
||
line-height: calc(1.625em - 6px);
|
||
font-size: 87.5%;
|
||
}
|
||
|
||
& + .av__body .av__gallery {
|
||
margin-top: 0;
|
||
}
|
||
}
|
||
|
||
&-counter {
|
||
font-size: 87.5%;
|
||
color: var(--b3-theme-on-surface-light);
|
||
margin: 0 8px;
|
||
}
|
||
|
||
&-icon {
|
||
cursor: pointer;
|
||
color: var(--b3-theme-on-surface-light);
|
||
transition: var(--b3-transition), opacity 0.3s cubic-bezier(0, 0, 0.2, 1) 0ms;
|
||
border-radius: var(--b3-border-radius);
|
||
|
||
&:hover {
|
||
color: var(--b3-theme-on-background);
|
||
background-color: var(--b3-list-icon-hover);
|
||
}
|
||
|
||
svg {
|
||
padding: 5px;
|
||
float: left;
|
||
width: calc(1.625em - 12px);
|
||
height: calc(1.625em - 12px);
|
||
transition: transform 0.15s cubic-bezier(0, 0, 0.2, 1);
|
||
font-size: 87.5%;
|
||
}
|
||
|
||
&--hover {
|
||
opacity: 0;
|
||
|
||
svg {
|
||
padding: 4px;
|
||
width: calc(1.625em - 10px);
|
||
height: calc(1.625em - 10px);
|
||
}
|
||
}
|
||
}
|
||
|
||
&-arrow--open {
|
||
transform: rotate(90deg);
|
||
}
|
||
}
|
||
}
|
||
|
||
img.av__cellassetimg {
|
||
max-height: calc(1.625em - 2px);
|
||
border-radius: var(--b3-border-radius);
|
||
margin: 1px 2px;
|
||
max-width: none;
|
||
vertical-align: top;
|
||
font-size: inherit;
|
||
cursor: zoom-in;
|
||
}
|
||
|
||
.av__cell,
|
||
.custom-attr__avvalue {
|
||
.b3-menu__avemoji {
|
||
font-size: 1em;
|
||
line-height: 1.625;
|
||
height: auto;
|
||
margin: 0 5px 0 -4px;
|
||
vertical-align: top;
|
||
|
||
img {
|
||
height: calc(1.625em - 8px);
|
||
font-size: 1em;
|
||
width: calc(1.625em - 8px);
|
||
margin: 4px 0;
|
||
}
|
||
}
|
||
}
|