mirror of
https://github.com/siyuan-note/siyuan.git
synced 2026-03-10 14:42:33 +01:00
421 lines
7.5 KiB
SCSS
421 lines
7.5 KiB
SCSS
@import "content";
|
||
@import "toolbar";
|
||
@import "wysiwyg";
|
||
@import "attr";
|
||
|
||
.protyle-scroll {
|
||
--b3-dynamicscroll-width: 200px;
|
||
position: absolute;
|
||
right: 0;
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
|
||
.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;
|
||
transition: var(--b3-transition);
|
||
cursor: pointer;
|
||
|
||
&:hover svg {
|
||
color: var(--b3-theme-on-surface);
|
||
}
|
||
|
||
&:active {
|
||
cursor: grabbing;
|
||
}
|
||
}
|
||
|
||
svg {
|
||
height: 14px;
|
||
color: var(--b3-theme-on-surface-light);
|
||
width: 14px;
|
||
float: left;
|
||
transition: var(--b3-transition);
|
||
}
|
||
}
|
||
|
||
.protyle-select {
|
||
position: fixed;
|
||
background-color: var(--b3-theme-primary-lightest);
|
||
}
|
||
|
||
.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;
|
||
|
||
&__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 {
|
||
margin-right: 8px;
|
||
opacity: 1;
|
||
border: 0;
|
||
background-color: transparent;
|
||
color: var(--b3-theme-on-surface);
|
||
line-height: 24px;
|
||
border-radius: var(--b3-border-radius);
|
||
align-self: center;
|
||
padding: 0 4px;
|
||
font-size: 12px;
|
||
white-space: nowrap;
|
||
|
||
&:hover {
|
||
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: 4px;
|
||
line-height: 16px;
|
||
height: 16px;
|
||
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;
|
||
|
||
&--transition {
|
||
.protyle-wysiwyg {
|
||
transition: padding .3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms;
|
||
}
|
||
|
||
.protyle-title {
|
||
transition: margin .3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms;
|
||
}
|
||
|
||
.protyle-background__iconw {
|
||
transition: left .3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms;
|
||
}
|
||
}
|
||
}
|
||
|
||
.protyle-background {
|
||
position: relative;
|
||
padding-bottom: 40px;
|
||
|
||
&--enable {
|
||
.protyle-background__img:hover .protyle-icons,
|
||
&:hover > .protyle-background__iconw > .protyle-icons,
|
||
.protyle-background__icon:hover {
|
||
opacity: .86;
|
||
}
|
||
}
|
||
|
||
|
||
&--mobileshow {
|
||
.protyle-background__iconw > .protyle-icons,
|
||
.protyle-background__img .protyle-icons {
|
||
opacity: .86;
|
||
}
|
||
}
|
||
|
||
&__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);
|
||
margin-right: 16px;
|
||
|
||
img, svg {
|
||
height: 80px;
|
||
width: 80px;
|
||
float: left;
|
||
border-radius: var(--b3-border-radius);
|
||
}
|
||
|
||
&:not(.fn__none) + .protyle-icons {
|
||
margin-top: 56px;
|
||
}
|
||
}
|
||
|
||
&__img {
|
||
position: absolute;
|
||
width: 100%;
|
||
|
||
img {
|
||
object-fit: cover;
|
||
width: 100%;
|
||
height: 30vh;
|
||
opacity: 1;
|
||
object-position: center;
|
||
}
|
||
|
||
.protyle-icons {
|
||
bottom: 8px;
|
||
top: auto;
|
||
margin-left: -44px;
|
||
left: auto;
|
||
right: 32px; // 仅 iPone，设置 index 也无效 https://github.com/siyuan-note/siyuan/issues/6926
|
||
|
||
&:nth-child(3) {
|
||
right: auto;
|
||
left: 48%;
|
||
opacity: .86;
|
||
top: 50%;
|
||
bottom: auto;
|
||
margin-top: -11px;
|
||
}
|
||
}
|
||
}
|
||
|
||
&__iconw {
|
||
bottom: 0;
|
||
display: flex;
|
||
position: absolute;
|
||
|
||
.protyle-icons {
|
||
position: initial;
|
||
}
|
||
}
|
||
}
|
||
|
||
.protyle-title {
|
||
margin: 34px 16px 0 24px;
|
||
position: relative;
|
||
font-size: 16px;
|
||
border-radius: var(--b3-border-radius);
|
||
|
||
&:hover .protyle-title__icon {
|
||
opacity: 1;
|
||
}
|
||
|
||
&[custom-riff-decks] {
|
||
box-shadow: -3px 0px 0px -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);
|
||
cursor: text;
|
||
}
|
||
|
||
&:focus {
|
||
outline: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
.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;
|
||
|
||
&: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);
|
||
}
|
||
}
|