mirror of
https://github.com/siyuan-note/siyuan.git
synced 2026-02-13 02:34:20 +01:00
447 lines
7.8 KiB
SCSS
447 lines
7.8 KiB
SCSS
@import "content";
|
|
@import "toolbar";
|
|
@import "wysiwyg";
|
|
@import "attr";
|
|
|
|
.protyle-scroll {
|
|
--b3-dynamicscroll-width: 200px;
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 30px;
|
|
width: 16px;
|
|
bottom: 9px; // 下图标 hover 时，需要留出一定的空间
|
|
|
|
svg {
|
|
height: 16px;
|
|
width: 16px;
|
|
display: block;
|
|
}
|
|
|
|
&__down,
|
|
&__up {
|
|
transition: var(--b3-transition);
|
|
position: absolute;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
color: var(--b3-border-color);
|
|
|
|
&:hover {
|
|
color: var(--b3-theme-on-surface);
|
|
}
|
|
}
|
|
|
|
&__up {
|
|
top: calc(50% - var(--b3-dynamicscroll-width) / 2 - 20px);
|
|
}
|
|
|
|
&__down {
|
|
bottom: calc(50% - var(--b3-dynamicscroll-width) / 2 - 20px);
|
|
}
|
|
|
|
&:hover {
|
|
.protyle-scroll__down,
|
|
.protyle-scroll__up {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
&__bar {
|
|
position: absolute;
|
|
right: calc(4px - var(--b3-dynamicscroll-width) / 2);
|
|
top: calc(50% - 8px);
|
|
transform: rotate(90deg);
|
|
z-index: 1;
|
|
|
|
.b3-slider {
|
|
width: var(--b3-dynamicscroll-width);
|
|
display: block;
|
|
|
|
&::-webkit-slider-runnable-track,
|
|
&::-webkit-slider-thumb {
|
|
background-color: var(--b3-border-color);
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.protyle-gutters {
|
|
cursor: pointer;
|
|
user-select: none;
|
|
position: fixed;
|
|
box-sizing: border-box;
|
|
z-index: 1;
|
|
text-align: center;
|
|
|
|
button {
|
|
border: 0;
|
|
background-color: transparent;
|
|
padding: 4px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
|
|
&:hover svg {
|
|
color: var(--b3-theme-on-surface);
|
|
}
|
|
|
|
&:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
span {
|
|
z-index: 2;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
svg {
|
|
height: 14px;
|
|
color: var(--b3-theme-on-surface-light);
|
|
width: 14px;
|
|
float: left;
|
|
transition: var(--b3-color-transition);
|
|
}
|
|
}
|
|
|
|
.protyle-select {
|
|
position: fixed;
|
|
background-color: var(--b3-theme-primary-lightest);
|
|
z-index: 3; // 需大于 database header and footer
|
|
}
|
|
|
|
.protyle-breadcrumb {
|
|
display: flex;
|
|
padding: 0 8px;
|
|
background-color: var(--b3-theme-background);
|
|
flex-shrink: 0;
|
|
box-sizing: border-box;
|
|
min-height: 30px;
|
|
z-index: 1;
|
|
font-size: 14px;
|
|
|
|
.block__icon {
|
|
opacity: 1;
|
|
margin-left: 8px;
|
|
|
|
&:disabled {
|
|
opacity: .38;
|
|
}
|
|
}
|
|
|
|
&__space {
|
|
min-width: 8px;
|
|
transition: var(--b3-transition);
|
|
color: var(--b3-theme-on-surface);
|
|
text-align: center;
|
|
padding: 6px 0;
|
|
line-height: 18px;
|
|
flex: 1;
|
|
}
|
|
|
|
&__bar {
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
display: flex;
|
|
transition: var(--b3-transition);
|
|
overflow: auto;
|
|
min-height: 30px;
|
|
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
&--hide {
|
|
opacity: 0;
|
|
transition: 1s;
|
|
}
|
|
|
|
&--nowrap {
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.b3-tooltips {
|
|
height: 22px;
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
|
|
&__icon {
|
|
opacity: 1;
|
|
border: 0;
|
|
line-height: 24px;
|
|
border-radius: var(--b3-border-radius);
|
|
align-self: center;
|
|
padding: 0 4px;
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
color: var(--b3-theme-on-background);
|
|
background-color: var(--b3-list-hover);
|
|
}
|
|
|
|
&__arrow {
|
|
height: 10px;
|
|
width: 10px;
|
|
color: var(--b3-theme-on-surface-light);
|
|
margin: 0 4px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
&__text--ellipsis {
|
|
max-width: 112px;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
&__text {
|
|
margin-left: 4px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
&__item {
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 4px;
|
|
line-height: 24px;
|
|
height: 24px;
|
|
border-radius: var(--b3-border-radius);
|
|
margin: 3px 0;
|
|
color: var(--b3-theme-on-surface);
|
|
border: 0;
|
|
background-color: transparent;
|
|
box-sizing: inherit;
|
|
|
|
&.b3-tooltips svg {
|
|
margin-right: 0;
|
|
}
|
|
|
|
svg {
|
|
height: 14px;
|
|
width: 14px;
|
|
flex-shrink: 0;
|
|
color: var(--b3-theme-on-surface);
|
|
|
|
&:hover {
|
|
color: var(--b3-theme-on-background);
|
|
}
|
|
}
|
|
|
|
&:hover,
|
|
&--active {
|
|
color: var(--b3-theme-on-background);
|
|
background-color: var(--b3-list-hover);
|
|
}
|
|
}
|
|
}
|
|
|
|
.protyle-content {
|
|
overflow: auto;
|
|
flex: 1;
|
|
scrollbar-gutter: stable;
|
|
|
|
&--transition {
|
|
.protyle-wysiwyg {
|
|
transition: padding .3s cubic-bezier(.25, .46, .45, .94) 0ms;
|
|
}
|
|
|
|
.protyle-title {
|
|
transition: margin .3s cubic-bezier(.25, .46, .45, .94) 0ms;
|
|
}
|
|
}
|
|
}
|
|
|
|
.protyle-top:hover .protyle-background--enable {
|
|
.protyle-background__action,
|
|
.protyle-background__img .protyle-icons {
|
|
opacity: .86;
|
|
}
|
|
}
|
|
|
|
.protyle-background {
|
|
position: relative;
|
|
|
|
&--enable {
|
|
.protyle-background__img:hover .protyle-icons,
|
|
.protyle-background__icon:hover {
|
|
opacity: .86;
|
|
}
|
|
}
|
|
|
|
&--mobileshow {
|
|
.protyle-background__action,
|
|
.protyle-background__img .protyle-icons {
|
|
opacity: .86;
|
|
}
|
|
}
|
|
|
|
&__action {
|
|
transition: opacity 150ms linear;
|
|
opacity: 0;
|
|
|
|
.b3-button {
|
|
margin-top: 8px;
|
|
}
|
|
}
|
|
|
|
&__icon {
|
|
height: 80px;
|
|
width: 80px;
|
|
transition: var(--b3-transition);
|
|
cursor: pointer;
|
|
font-size: 68px; // 🔪显示不完整
|
|
line-height: 80px;
|
|
text-align: center;
|
|
font-family: var(--b3-font-family-emoji);
|
|
z-index: 1;
|
|
position: relative;
|
|
margin-top: -40px;
|
|
margin-bottom: 8px;
|
|
|
|
img, svg {
|
|
height: 80px;
|
|
width: 80px;
|
|
float: left;
|
|
border-radius: var(--b3-border-radius);
|
|
}
|
|
|
|
&:not(.fn__none) + .protyle-icons {
|
|
margin-top: 56px;
|
|
}
|
|
}
|
|
|
|
&__img {
|
|
width: 100%;
|
|
|
|
img {
|
|
object-fit: cover;
|
|
width: 100%;
|
|
height: 30vh;
|
|
opacity: 1;
|
|
object-position: center;
|
|
}
|
|
|
|
.protyle-icons {
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 8px;
|
|
|
|
&:nth-child(3) {
|
|
left: 50%;
|
|
opacity: 0.86;
|
|
top: 15vh;
|
|
margin-top: -12px;
|
|
margin-left: -70px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.protyle-title {
|
|
margin: 34px 16px 0 24px;
|
|
position: relative;
|
|
font-size: 16px;
|
|
border-radius: var(--b3-border-radius);
|
|
font-family: var(--b3-font-family-protyle);
|
|
|
|
&:hover .protyle-title__icon {
|
|
opacity: 1;
|
|
}
|
|
|
|
&[custom-riff-decks] {
|
|
box-shadow: 3px 0 0 -1px var(--b3-protyle-inline-mark-background) inset;
|
|
}
|
|
|
|
&__icon {
|
|
position: absolute;
|
|
left: -24px;
|
|
top: 50%;
|
|
opacity: 0;
|
|
margin: -15px 4px 0 0;
|
|
padding: 8px 4px 8px 4px;
|
|
transition: var(--b3-transition);
|
|
color: var(--b3-theme-on-surface-light);
|
|
cursor: pointer;
|
|
line-height: 20px;
|
|
|
|
&:hover {
|
|
color: var(--b3-theme-on-surface);
|
|
}
|
|
|
|
svg {
|
|
height: 14px;
|
|
width: 14px;
|
|
float: left;
|
|
}
|
|
}
|
|
|
|
&__input {
|
|
width: 100%;
|
|
color: var(--b3-theme-on-background);
|
|
box-sizing: border-box;
|
|
border: 0;
|
|
font-size: 2em;
|
|
font-weight: bold;
|
|
line-height: 1.625;
|
|
padding: 0 4px;
|
|
white-space: break-spaces;
|
|
|
|
&:empty:after {
|
|
content: attr(data-tip);
|
|
color: var(--b3-theme-on-surface-light);
|
|
cursor: text;
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
table[contenteditable="false"] + .protyle-action__table {
|
|
display: none;
|
|
}
|
|
|
|
table[contenteditable="true"] + .protyle-action__table {
|
|
position: absolute;
|
|
top: 4px;
|
|
height: 0;
|
|
width: 0;
|
|
-webkit-user-modify: read-only;
|
|
|
|
.table__resize {
|
|
position: absolute;
|
|
top: 0;
|
|
width: 6px;
|
|
cursor: col-resize;
|
|
z-index: 2;
|
|
|
|
&:hover:after {
|
|
background-color: var(--b3-theme-primary-light);
|
|
}
|
|
|
|
&:after {
|
|
top: 0;
|
|
width: 2px;
|
|
left: 2px;
|
|
height: 100%;
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
transition: var(--b3-transition);
|
|
}
|
|
}
|
|
|
|
.table__select {
|
|
background: var(--b3-theme-primary-lightest);
|
|
position: relative;
|
|
transition: var(--b3-transition);
|
|
z-index: 3;
|
|
}
|
|
}
|