mirror of
https://github.com/siyuan-note/siyuan.git
synced 2026-01-06 00:38:49 +01:00
将 SCSS 中使用的 @import 改为 @use (#15114)
* 将 SCSS 中使用的 @import 改为 @use * 更新 SCSS 相关依赖
This commit is contained in:
Jeffrey Chen
GitHub
parent
d968055aa7
commit
a4ee654cb2
23 changed files with 1085 additions and 1032 deletions
|
|
@ -56,8 +56,8 @@
|
|||
"@typescript-eslint/parser": "^8.15.0",
|
||||
"blueimp-md5": "^2.19.0",
|
||||
"clean-webpack-plugin": "^4.0.0",
|
||||
"css-loader": "^6.7.1",
|
||||
"dayjs": "^1.11.5",
|
||||
"css-loader": "^7.1.2",
|
||||
"electron": "37.2.0",
|
||||
"electron-builder": "26.0.12",
|
||||
"encoding": "^0.1.13",
|
||||
|
|
@ -69,14 +69,14 @@
|
|||
"html-webpack-plugin": "^5.5.0",
|
||||
"iconv-lite": "^0.6.3",
|
||||
"ifdef-loader": "^2.3.2",
|
||||
"mini-css-extract-plugin": "2.7.6",
|
||||
"mini-css-extract-plugin": "2.9.2",
|
||||
"path-browserify": "^1.0.1",
|
||||
"safer-buffer": "^2.1.2",
|
||||
"sass": "^1.53.0",
|
||||
"sass-loader": "^12.6.0",
|
||||
"typescript": "^4.7.4",
|
||||
"webpack": "^5.94.0",
|
||||
"webpack-bundle-analyzer": "^4.5.0",
|
||||
"sass": "^1.89.2",
|
||||
"sass-loader": "^16.0.5",
|
||||
"webpack-cli": "^4.10.0"
|
||||
},
|
||||
"dependencies": {
|
||||
|
|
|
|||
350
app/src/assets/scss/_base-styles.scss
Normal file
350
app/src/assets/scss/_base-styles.scss
Normal file
|
|
@ -0,0 +1,350 @@
|
|||
@use "util/mixin" as *;
|
||||
|
||||
/*
|
||||
.status: 2
|
||||
|
||||
.protyle-util: 4
|
||||
|
||||
.protyle-hint: 5
|
||||
|
||||
.side-mask: 6
|
||||
|
||||
Mobile #menu & .side-panel: 7
|
||||
|
||||
.fullscreen: 8
|
||||
|
||||
#windowControls: 9
|
||||
|
||||
window.siyuan.zIndex: 10
|
||||
|
||||
.b3-tooltips: 1000000
|
||||
*/
|
||||
|
||||
html {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.fullscreen {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100% !important;
|
||||
left: 0;
|
||||
height: 100vh !important;
|
||||
z-index: 8;
|
||||
border-radius: 0;
|
||||
|
||||
& > .protyle-breadcrumb,
|
||||
& > .block__icons { // 关系图、card
|
||||
padding-left: var(--b3-toolbar-left-mac);
|
||||
height: 32px;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.protyle-breadcrumb > .protyle-breadcrumb__space,
|
||||
& > .block__icons > .fn__flex-1 {
|
||||
-webkit-app-region: drag;
|
||||
min-width: 32px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
border-radius: var(--b3-border-radius-b);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--b3-theme-surface-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.toolbar {
|
||||
background-color: var(--b3-toolbar-background);
|
||||
box-sizing: border-box;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0 5px 0 var(--b3-toolbar-left-mac);
|
||||
overflow: hidden; // 最小化后右上角显示不全
|
||||
border-bottom: .5px solid var(--b3-border-color);
|
||||
|
||||
&--browser {
|
||||
padding-left: env(titlebar-area-x, 0);
|
||||
padding-right: calc(100% - env(titlebar-area-width, 100%) - env(titlebar-area-x, 0));
|
||||
height: calc(env(titlebar-area-height, 31px) + 1px);
|
||||
}
|
||||
|
||||
#windowControls {
|
||||
top: 0;
|
||||
// https://github.com/siyuan-note/siyuan/issues/11275#issuecomment-2112416383
|
||||
z-index: 9;
|
||||
right: 0;
|
||||
position: relative;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
#drag {
|
||||
-webkit-app-region: drag;
|
||||
color: var(--b3-toolbar-color);
|
||||
user-select: none;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
align-self: center;
|
||||
font-size: 12px;
|
||||
min-width: 148px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&__item {
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
color: var(--b3-toolbar-color);
|
||||
padding: 5px;
|
||||
margin: 2px;
|
||||
border-radius: var(--b3-border-radius);
|
||||
box-sizing: border-box;
|
||||
transition: var(--b3-transition);
|
||||
display: flex;
|
||||
align-self: center;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
line-height: 13.5px;
|
||||
height: 23.5px;
|
||||
|
||||
&:not(.toolbar__item--disabled):not(.toolbar__item--close):hover,
|
||||
&--active {
|
||||
background-color: var(--b3-toolbar-hover);
|
||||
color: var(--b3-theme-on-background);
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 13.5px;
|
||||
width: 13.5px;
|
||||
}
|
||||
|
||||
svg.toolbar__svg {
|
||||
width: 8px;
|
||||
height: 13.5px;
|
||||
margin-left: 4px;
|
||||
opacity: .54;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
opacity: .54;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&--win {
|
||||
padding: 9px;
|
||||
margin: 0;
|
||||
height: 31.5px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&--close {
|
||||
padding: 9px 16px;
|
||||
margin: 0;
|
||||
height: 31.5px;
|
||||
border-radius: 0;
|
||||
|
||||
svg {
|
||||
width: 10px !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--b3-theme-on-error);
|
||||
background-color: var(--b3-theme-error)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__window {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
z-index: 502;
|
||||
|
||||
.toolbar__item {
|
||||
padding: 14.25px;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
|
||||
&:not(.toolbar__item--disabled):not(.toolbar__item--close):hover,
|
||||
&--active {
|
||||
background-color: var(--b3-theme-background-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
font-size: 12px;
|
||||
max-width: 96px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
background-color: var(--b3-theme-surface);
|
||||
box-sizing: border-box;
|
||||
z-index: 2;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
border-top: .5px solid var(--b3-border-color);
|
||||
padding: 0 5px;
|
||||
|
||||
.toolbar__item {
|
||||
color: var(--b3-theme-on-surface);
|
||||
|
||||
&:hover {
|
||||
color: var(--b3-theme-on-background);
|
||||
background-color: var(--b3-theme-background-light) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&__msg {
|
||||
color: var(--b3-theme-on-surface);
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
padding-left: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&__counter {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&__backgroundtask {
|
||||
display: flex;
|
||||
color: var(--b3-theme-on-surface);
|
||||
font-size: 12px;
|
||||
|
||||
& > div {
|
||||
height: 4px;
|
||||
border-radius: var(--b3-border-radius);
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
width: 64px;
|
||||
align-self: center;
|
||||
margin: 0 8px 0 4px;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
|
||||
& > div {
|
||||
background-color: var(--b3-theme-primary-light);
|
||||
height: 4px;
|
||||
background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
|
||||
animation: stripMove 450ms linear infinite;
|
||||
background-size: 50px 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fn__space:last-child {
|
||||
width: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.asset {
|
||||
overflow: auto;
|
||||
box-sizing: border-box;
|
||||
margin: 16px;
|
||||
|
||||
&--pdf {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
img, video, audio, canvas {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.file-tree {
|
||||
&:hover .block__icons .block__icon:not([disabled]),
|
||||
&.fullscreen .block__icons .block__icon:not([disabled]) {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:hover .block__icons .block__icon[disabled] {
|
||||
opacity: .38;
|
||||
}
|
||||
|
||||
&__close {
|
||||
min-height: auto;
|
||||
transition: var(--b3-transition);
|
||||
}
|
||||
|
||||
&__sliderDown {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition: var(--b3-transition);
|
||||
}
|
||||
}
|
||||
|
||||
.counter {
|
||||
margin-left: 4px;
|
||||
line-height: 22px;
|
||||
padding: 0 8px;
|
||||
color: var(--b3-theme-on-surface-light);
|
||||
border-radius: var(--b3-border-radius);
|
||||
font-size: 12px;
|
||||
user-select: none;
|
||||
height: 22px;
|
||||
|
||||
&--right {
|
||||
width: 32px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&--bg {
|
||||
background-color: var(--b3-theme-surface);
|
||||
}
|
||||
}
|
||||
|
||||
.reveal {
|
||||
font-family: var(--b3-font-family);
|
||||
}
|
||||
|
||||
.backlink--more {
|
||||
.b3-list-item__text {
|
||||
-webkit-line-clamp: initial;
|
||||
}
|
||||
|
||||
.b3-list-item__graphic.popover__block {
|
||||
align-self: flex-start;
|
||||
margin-top: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
.switch-doc {
|
||||
max-height: 70vh;
|
||||
max-width: 100%;
|
||||
min-width: 426px;
|
||||
|
||||
.b3-list {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.b3-list:last-child {
|
||||
border-left: 1px solid var(--b3-theme-surface-lighter);
|
||||
}
|
||||
|
||||
&__path {
|
||||
padding: 4px 8px;
|
||||
border-top: 1px solid var(--b3-theme-surface-lighter);
|
||||
color: var(--b3-theme-on-surface);
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
line-height: 18px;
|
||||
min-height: 18px;
|
||||
}
|
||||
}
|
||||
509
app/src/assets/scss/_mobile-styles.scss
Normal file
509
app/src/assets/scss/_mobile-styles.scss
Normal file
|
|
@ -0,0 +1,509 @@
|
|||
@use "util/mixin";
|
||||
@use "util/function";
|
||||
|
||||
.block__popover {
|
||||
width: 80vw;
|
||||
}
|
||||
|
||||
.fn__flex-column[data-type="sidebar-file"] {
|
||||
.b3-list-item {
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
.b3-list--mobile {
|
||||
|
||||
& > .fn__flex-column {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.b3-list-item {
|
||||
font-size: 16px;
|
||||
line-height: 40px;
|
||||
|
||||
&__icon {
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
height: auto;
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&__graphic {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
&__toggle {
|
||||
height: 32px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
&__arrow {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
&__action {
|
||||
padding: 8px;
|
||||
height: 16px;
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-tree__sliderDown {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition: var(--b3-transition);
|
||||
}
|
||||
|
||||
.counter {
|
||||
margin-left: 4px;
|
||||
padding: 0 8px;
|
||||
color: var(--b3-theme-on-surface-light);
|
||||
border-radius: var(--b3-border-radius);
|
||||
user-select: none;
|
||||
background-color: var(--b3-theme-background-light);
|
||||
line-height: 24px;
|
||||
height: 24px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: 100vw;
|
||||
background: var(--b3-theme-background);
|
||||
|
||||
&--border {
|
||||
border-bottom: .5px solid var(--b3-theme-background-light);
|
||||
}
|
||||
|
||||
&--dark {
|
||||
background-color: var(--b3-theme-surface);
|
||||
}
|
||||
|
||||
&__icon {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
padding: 10px;
|
||||
flex-shrink: 0;
|
||||
margin: 6px 4px;
|
||||
color: var(--b3-theme-on-surface);
|
||||
border-radius: var(--b3-border-radius);
|
||||
|
||||
&[disabled] {
|
||||
opacity: .38;
|
||||
}
|
||||
|
||||
&--active,
|
||||
&:not(.toolbar__icon-deactivate):focus,
|
||||
&:not(.toolbar__icon-deactivate):hover {
|
||||
background-color: var(--b3-list-hover);
|
||||
}
|
||||
|
||||
&--history {
|
||||
height: 36px;
|
||||
width: 36px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
flex: 1;
|
||||
box-shadow: none;
|
||||
min-width: 1px;
|
||||
line-height: 30px;
|
||||
font-size: 17px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
color: var(--b3-theme-on-background);
|
||||
}
|
||||
|
||||
&__text {
|
||||
@include mixin.text-clamp(1);
|
||||
flex: 1;
|
||||
font-size: 17px;
|
||||
min-height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.side-panel {
|
||||
position: fixed;
|
||||
background-color: var(--b3-theme-surface);
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
z-index: 7;
|
||||
transform: translateX(-100vw);
|
||||
transition: transform .15s cubic-bezier(0, 0, .2, 1) 0ms;
|
||||
|
||||
&--all {
|
||||
transform: translateY(-200vh);
|
||||
}
|
||||
}
|
||||
|
||||
.side-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 6;
|
||||
background-color: #000;
|
||||
opacity: 0;
|
||||
transition: opacity 150ms linear;
|
||||
}
|
||||
|
||||
#model {
|
||||
box-sizing: border-box;
|
||||
|
||||
.toolbar__text {
|
||||
min-height: 48px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.config-about__logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.config-account {
|
||||
&__bg {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__cover {
|
||||
width: 100vw;
|
||||
height: 50vh;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
position: absolute;
|
||||
top: 50vh;
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
left: 50%;
|
||||
margin: -160px 0 0 -64px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50%;
|
||||
background-size: cover;
|
||||
border-radius: 90px;
|
||||
background-color: rgba(255, 255, 255, .8);
|
||||
box-shadow: var(--b3-point-shadow);
|
||||
border: 1px solid var(--b3-theme-surface-lighter);
|
||||
}
|
||||
|
||||
&__info {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
&__name {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.config-assets {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
&__list {
|
||||
overflow: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__preview {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: auto;
|
||||
flex: 1;
|
||||
margin-top: 8px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#menu {
|
||||
z-index: 7;
|
||||
transform: translateX(100vw);
|
||||
top: 0;
|
||||
|
||||
// for plugin
|
||||
.b3-menu__item > svg:not(.b3-menu__icon) {
|
||||
height: 17px;
|
||||
width: 17px;
|
||||
margin: 0 16px 0 8px;
|
||||
border-radius: var(--b3-border-radius);
|
||||
align-self: center;
|
||||
color: var(--b3-theme-on-surface);
|
||||
}
|
||||
}
|
||||
|
||||
.keyboard {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
height: 42px;
|
||||
background: var(--b3-theme-background);
|
||||
display: flex;
|
||||
border-top: 1px solid var(--b3-theme-surface-lighter);
|
||||
overflow: hidden;
|
||||
flex-direction: column;
|
||||
z-index: 1;
|
||||
|
||||
&__dynamic {
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__bar {
|
||||
border-bottom: 1px solid var(--b3-theme-surface-lighter);
|
||||
}
|
||||
|
||||
&__util {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
background-color: var(--b3-theme-surface);
|
||||
}
|
||||
|
||||
&__split {
|
||||
width: 1px;
|
||||
height: 28px;
|
||||
background-color: var(--b3-theme-surface-lighter);
|
||||
align-self: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__action {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
color: var(--b3-theme-on-surface);
|
||||
|
||||
span {
|
||||
padding: 6px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
opacity: .38;
|
||||
}
|
||||
|
||||
&.protyle-toolbar__item--current svg {
|
||||
background-color: var(--b3-list-hover);
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
float: left;
|
||||
padding: 6px;
|
||||
margin: 6px;
|
||||
border-radius: var(--b3-border-radius);
|
||||
|
||||
&.keyboard__svg--big {
|
||||
width: 30px;
|
||||
padding: 2px 6px;
|
||||
height: 32px;
|
||||
margin: 2px 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__slash {
|
||||
&-title {
|
||||
height: 24px;
|
||||
padding: 0 8px;
|
||||
line-height: 24px;
|
||||
color: var(--b3-theme-on-surface);
|
||||
}
|
||||
|
||||
&-block {
|
||||
display: flex;
|
||||
padding-left: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
&-item {
|
||||
background-color: var(--b3-theme-background);
|
||||
border-radius: var(--b3-border-radius);
|
||||
width: calc(50% - 8px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 4px 8px 4px 0;
|
||||
position: relative;
|
||||
box-shadow: inset 0 0 0 .6px var(--b3-theme-on-surface);
|
||||
border: 0;
|
||||
color: var(--b3-theme-on-background);
|
||||
min-height: 50px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin: 6px;
|
||||
flex-shrink: 0;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
&-text {
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.svg {
|
||||
fill: currentColor;
|
||||
display: inline-block;
|
||||
stroke-width: 0;
|
||||
stroke: currentColor;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
flex-shrink: 0;
|
||||
|
||||
&--mid {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
&--small {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
&--smaller {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
#empty {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.b3-list-item {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.b3-menu {
|
||||
&__accelerator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__item--warning {
|
||||
color: var(--b3-theme-error);
|
||||
|
||||
& > .b3-menu__icon {
|
||||
color: var(--b3-theme-error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#historyContainer {
|
||||
& > div {
|
||||
flex-direction: column;
|
||||
|
||||
& > ul {
|
||||
width: auto !important;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
position: fixed;
|
||||
bottom: -30px;
|
||||
transition: var(--b3-transition);
|
||||
font-size: 12px;
|
||||
color: var(--b3-theme-on-surface);
|
||||
padding: 4px;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background-color: var(--b3-theme-background);
|
||||
@extend %fn__ellipsis;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.protyle {
|
||||
&-font {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
// iPhone 右上角属性中对不齐
|
||||
&-wysiwyg--attr .protyle-attr > div:not(.protyle-attr--memo):not(.protyle-attr--refcount) {
|
||||
max-width: 26vw;
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
}
|
||||
|
||||
// 移动端键盘弹起和点击加号需保持滚动高度一致
|
||||
&-background__img img {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
&-scroll {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&-hint {
|
||||
min-width: 100vw;
|
||||
max-height: 70vh;
|
||||
}
|
||||
}
|
||||
|
||||
.b3-dialog__container {
|
||||
max-width: 100vw;
|
||||
}
|
||||
|
||||
@media (max-width: 620px) {
|
||||
.protyle-wysiwyg [data-node-id].sb[data-sb-layout="col"] {
|
||||
flex-direction: column;
|
||||
flex-wrap: initial;
|
||||
|
||||
& > div {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,389 +1,38 @@
|
|||
@import "util/keyframes";
|
||||
@import "util/mixin";
|
||||
@import "util/function";
|
||||
@import "business/history";
|
||||
@import "component/chip";
|
||||
@import "component/slider";
|
||||
@import "component/switch";
|
||||
@import "util/scroll";
|
||||
@import "component/tooltips";
|
||||
@import "component/dialog";
|
||||
@import "component/button";
|
||||
@import "component/snackbar";
|
||||
@import "component/form";
|
||||
@import "component/text-field";
|
||||
@import "component/select";
|
||||
@import "component/list";
|
||||
@import "business/graph";
|
||||
@import "business/layout";
|
||||
@import "business/block";
|
||||
@import "util/reset";
|
||||
@import "component/card";
|
||||
@import "component/menu";
|
||||
@import "business/color";
|
||||
@import "protyle/protyle";
|
||||
@import "component/typography";
|
||||
@import "pdf/pdf";
|
||||
@import "business/config";
|
||||
@import "business/search";
|
||||
@import "pickr/pcr";
|
||||
@import "viewerjs/viewer";
|
||||
@import "business/export";
|
||||
@import "business/card";
|
||||
@import "business/custom";
|
||||
@import "business/resize";
|
||||
@import "business/av";
|
||||
@import "business/emojis";
|
||||
@import "component/svg";
|
||||
|
||||
/*
|
||||
.status: 2
|
||||
|
||||
.protyle-util: 4
|
||||
|
||||
.protyle-hint: 5
|
||||
|
||||
.side-mask: 6
|
||||
|
||||
Mobile #menu & .side-panel: 7
|
||||
|
||||
.fullscreen: 8
|
||||
|
||||
#windowControls: 9
|
||||
|
||||
window.siyuan.zIndex: 10
|
||||
|
||||
.b3-tooltips: 1000000
|
||||
*/
|
||||
|
||||
html {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.fullscreen {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100% !important;
|
||||
left: 0;
|
||||
height: 100vh !important;
|
||||
z-index: 8;
|
||||
border-radius: 0;
|
||||
|
||||
& > .protyle-breadcrumb,
|
||||
& > .block__icons { // 关系图、card
|
||||
padding-left: var(--b3-toolbar-left-mac);
|
||||
height: 32px;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.protyle-breadcrumb > .protyle-breadcrumb__space,
|
||||
& > .block__icons > .fn__flex-1 {
|
||||
-webkit-app-region: drag;
|
||||
min-width: 32px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
border-radius: var(--b3-border-radius-b);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--b3-theme-surface-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.toolbar {
|
||||
background-color: var(--b3-toolbar-background);
|
||||
box-sizing: border-box;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0 5px 0 var(--b3-toolbar-left-mac);
|
||||
overflow: hidden; // 最小化后右上角显示不全
|
||||
border-bottom: .5px solid var(--b3-border-color);
|
||||
|
||||
&--browser {
|
||||
padding-left: env(titlebar-area-x, 0);
|
||||
padding-right: calc(100% - env(titlebar-area-width, 100%) - env(titlebar-area-x, 0));
|
||||
height: calc(env(titlebar-area-height, 31px) + 1px);
|
||||
}
|
||||
|
||||
#windowControls {
|
||||
top: 0;
|
||||
// https://github.com/siyuan-note/siyuan/issues/11275#issuecomment-2112416383
|
||||
z-index: 9;
|
||||
right: 0;
|
||||
position: relative;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
#drag {
|
||||
-webkit-app-region: drag;
|
||||
color: var(--b3-toolbar-color);
|
||||
user-select: none;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
align-self: center;
|
||||
font-size: 12px;
|
||||
min-width: 148px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&__item {
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
color: var(--b3-toolbar-color);
|
||||
padding: 5px;
|
||||
margin: 2px;
|
||||
border-radius: var(--b3-border-radius);
|
||||
box-sizing: border-box;
|
||||
transition: var(--b3-transition);
|
||||
display: flex;
|
||||
align-self: center;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
line-height: 13.5px;
|
||||
height: 23.5px;
|
||||
|
||||
&:not(.toolbar__item--disabled):not(.toolbar__item--close):hover,
|
||||
&--active {
|
||||
background-color: var(--b3-toolbar-hover);
|
||||
color: var(--b3-theme-on-background);
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 13.5px;
|
||||
width: 13.5px;
|
||||
}
|
||||
|
||||
svg.toolbar__svg {
|
||||
width: 8px;
|
||||
height: 13.5px;
|
||||
margin-left: 4px;
|
||||
opacity: .54;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
opacity: .54;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&--win {
|
||||
padding: 9px;
|
||||
margin: 0;
|
||||
height: 31.5px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&--close {
|
||||
padding: 9px 16px;
|
||||
margin: 0;
|
||||
height: 31.5px;
|
||||
border-radius: 0;
|
||||
|
||||
svg {
|
||||
width: 10px !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--b3-theme-on-error);
|
||||
background-color: var(--b3-theme-error)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__window {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
z-index: 502;
|
||||
|
||||
.toolbar__item {
|
||||
padding: 14.25px;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
|
||||
&:not(.toolbar__item--disabled):not(.toolbar__item--close):hover,
|
||||
&--active {
|
||||
background-color: var(--b3-theme-background-light);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
font-size: 12px;
|
||||
max-width: 96px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
background-color: var(--b3-theme-surface);
|
||||
box-sizing: border-box;
|
||||
z-index: 2;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
border-top: .5px solid var(--b3-border-color);
|
||||
padding: 0 5px;
|
||||
|
||||
.toolbar__item {
|
||||
color: var(--b3-theme-on-surface);
|
||||
|
||||
&:hover {
|
||||
color: var(--b3-theme-on-background);
|
||||
background-color: var(--b3-theme-background-light) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&__msg {
|
||||
color: var(--b3-theme-on-surface);
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
padding-left: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&__counter {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&__backgroundtask {
|
||||
display: flex;
|
||||
color: var(--b3-theme-on-surface);
|
||||
font-size: 12px;
|
||||
|
||||
& > div {
|
||||
height: 4px;
|
||||
border-radius: var(--b3-border-radius);
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
width: 64px;
|
||||
align-self: center;
|
||||
margin: 0 8px 0 4px;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
|
||||
& > div {
|
||||
background-color: var(--b3-theme-primary-light);
|
||||
height: 4px;
|
||||
background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
|
||||
animation: stripMove 450ms linear infinite;
|
||||
background-size: 50px 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fn__space:last-child {
|
||||
width: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.asset {
|
||||
overflow: auto;
|
||||
box-sizing: border-box;
|
||||
margin: 16px;
|
||||
|
||||
&--pdf {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
img, video, audio, canvas {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.file-tree {
|
||||
&:hover .block__icons .block__icon:not([disabled]),
|
||||
&.fullscreen .block__icons .block__icon:not([disabled]) {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:hover .block__icons .block__icon[disabled] {
|
||||
opacity: .38;
|
||||
}
|
||||
|
||||
&__close {
|
||||
min-height: auto;
|
||||
transition: var(--b3-transition);
|
||||
}
|
||||
|
||||
&__sliderDown {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition: var(--b3-transition);
|
||||
}
|
||||
}
|
||||
|
||||
.counter {
|
||||
margin-left: 4px;
|
||||
line-height: 22px;
|
||||
padding: 0 8px;
|
||||
color: var(--b3-theme-on-surface-light);
|
||||
border-radius: var(--b3-border-radius);
|
||||
font-size: 12px;
|
||||
user-select: none;
|
||||
height: 22px;
|
||||
|
||||
&--right {
|
||||
width: 32px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&--bg {
|
||||
background-color: var(--b3-theme-surface);
|
||||
}
|
||||
}
|
||||
|
||||
.reveal {
|
||||
font-family: var(--b3-font-family);
|
||||
}
|
||||
|
||||
.backlink--more {
|
||||
.b3-list-item__text {
|
||||
-webkit-line-clamp: initial;
|
||||
}
|
||||
|
||||
.b3-list-item__graphic.popover__block {
|
||||
align-self: flex-start;
|
||||
margin-top: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
.switch-doc {
|
||||
max-height: 70vh;
|
||||
max-width: 100%;
|
||||
min-width: 426px;
|
||||
|
||||
.b3-list {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.b3-list:last-child {
|
||||
border-left: 1px solid var(--b3-theme-surface-lighter);
|
||||
}
|
||||
|
||||
&__path {
|
||||
padding: 4px 8px;
|
||||
border-top: 1px solid var(--b3-theme-surface-lighter);
|
||||
color: var(--b3-theme-on-surface);
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
line-height: 18px;
|
||||
min-height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
// 需放置最后，否则 https://github.com/siyuan-note/siyuan/issues/7056
|
||||
@import "util/responsive";
|
||||
@use "util/keyframes" as *;
|
||||
@use "util/function" as *;
|
||||
@use "business/history" as *;
|
||||
@use "component/chip" as *;
|
||||
@use "component/slider" as *;
|
||||
@use "component/switch" as *;
|
||||
@use "util/scroll" as *;
|
||||
@use "component/tooltips" as *;
|
||||
@use "component/dialog" as *;
|
||||
@use "component/button" as *;
|
||||
@use "component/snackbar" as *;
|
||||
@use "component/form" as *;
|
||||
@use "component/text-field" as *;
|
||||
@use "component/select" as *;
|
||||
@use "component/list" as *;
|
||||
@use "business/graph" as *;
|
||||
@use "business/layout" as *;
|
||||
@use "business/block" as *;
|
||||
@use "util/reset" as *;
|
||||
@use "component/card" as *;
|
||||
@use "component/menu" as *;
|
||||
@use "business/color" as *;
|
||||
@use "protyle/protyle" as *;
|
||||
@use "component/typography" as *;
|
||||
@use "pdf/pdf" as *;
|
||||
@use "business/config" as *;
|
||||
@use "business/search" as *;
|
||||
@use "pickr/pcr" as *;
|
||||
@use "viewerjs/viewer" as *;
|
||||
@use "business/export" as *;
|
||||
@use "business/card" as *;
|
||||
@use "business/custom" as *;
|
||||
@use "business/resize" as *;
|
||||
@use "business/av" as *;
|
||||
@use "business/emojis" as *;
|
||||
@use "component/svg" as *;
|
||||
@use "base-styles" as *;
|
||||
@use "util/responsive" as *; // 需放置最后，否则 https://github.com/siyuan-note/siyuan/issues/7056
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
@use "../util/function";
|
||||
|
||||
.card {
|
||||
&__main {
|
||||
@extend .fn__flex-column;
|
||||
@extend %fn__flex-column;
|
||||
box-sizing: border-box;
|
||||
max-height: 100%;
|
||||
background-color: var(--b3-theme-surface);
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@use "../util/mixin";
|
||||
|
||||
.graph {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -57,7 +59,7 @@
|
|||
color: var(--b3-theme-on-surface);
|
||||
max-width: 10vw;
|
||||
white-space: break-spaces;
|
||||
@include text-clamp(3);
|
||||
@include mixin.text-clamp(3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
@use "../util/function";
|
||||
@use "../component/form";
|
||||
|
||||
.search {
|
||||
&__layout {
|
||||
display: flex;
|
||||
|
|
@ -78,7 +81,7 @@
|
|||
}
|
||||
|
||||
&__history-icon {
|
||||
@extend .fn__a;
|
||||
@extend %fn__a;
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
display: block;
|
||||
|
|
@ -141,7 +144,7 @@
|
|||
}
|
||||
|
||||
&__rmpath {
|
||||
@extend .b3-form__icon-clear;
|
||||
@extend %b3-form__icon-clear;
|
||||
}
|
||||
|
||||
&__tip {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@use "../util/mixin";
|
||||
|
||||
.b3-card {
|
||||
box-shadow: var(--b3-point-shadow);
|
||||
background-color: var(--b3-theme-surface);
|
||||
|
|
@ -60,7 +62,7 @@
|
|||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
max-height: 54px;
|
||||
@include text-clamp(3);
|
||||
@include mixin.text-clamp(3);
|
||||
}
|
||||
|
||||
&__actions {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,17 @@
|
|||
%b3-form__icon-clear {
|
||||
position: absolute;
|
||||
height: 18px;
|
||||
width: 16px;
|
||||
opacity: .68;
|
||||
transition: var(--b3-transition);
|
||||
right: 0;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.b3-form {
|
||||
&__space {
|
||||
margin: 16px 24px;
|
||||
|
|
@ -47,17 +61,7 @@
|
|||
}
|
||||
|
||||
&__icon-clear {
|
||||
position: absolute;
|
||||
height: 18px;
|
||||
width: 16px;
|
||||
opacity: .68;
|
||||
transition: var(--b3-transition);
|
||||
right: 0;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
@extend %b3-form__icon-clear;
|
||||
}
|
||||
|
||||
// repo password & av description
|
||||
|
|
|
|||
|
|
@ -1,3 +1,32 @@
|
|||
@use "../util/mixin";
|
||||
|
||||
%b3-list-item__icon {
|
||||
svg, img {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
color: var(--b3-theme-on-surface);
|
||||
}
|
||||
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-family: var(--b3-font-family-emoji);
|
||||
margin-right: 4px;
|
||||
line-height: 22px;
|
||||
transition: var(--b3-transition);
|
||||
height: 22px;
|
||||
padding: 0 4px;
|
||||
flex-shrink: 0;
|
||||
border-radius: var(--b3-border-radius);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:hover {
|
||||
color: var(--b3-theme-on-background);
|
||||
background-color: var(--b3-list-icon-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.b3-list {
|
||||
mark {
|
||||
background-color: var(--b3-protyle-inline-mark-background);
|
||||
|
|
@ -156,30 +185,7 @@
|
|||
}
|
||||
|
||||
&__icon {
|
||||
svg, img {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
color: var(--b3-theme-on-surface);
|
||||
}
|
||||
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-family: var(--b3-font-family-emoji);
|
||||
margin-right: 4px;
|
||||
line-height: 22px;
|
||||
transition: var(--b3-transition);
|
||||
height: 22px;
|
||||
padding: 0 4px;
|
||||
flex-shrink: 0;
|
||||
border-radius: var(--b3-border-radius);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:hover {
|
||||
color: var(--b3-theme-on-background);
|
||||
background-color: var(--b3-list-icon-hover);
|
||||
}
|
||||
@extend %b3-list-item__icon;
|
||||
}
|
||||
|
||||
&__hinttext {
|
||||
|
|
@ -233,7 +239,7 @@
|
|||
border: 0;
|
||||
padding: 0;
|
||||
color: var(--b3-theme-on-background);
|
||||
@include text-clamp(1);
|
||||
@include mixin.text-clamp(1);
|
||||
|
||||
// 搜索列表中自定义图标
|
||||
& > img:not(.emoji),
|
||||
|
|
|
|||
|
|
@ -1,3 +1,6 @@
|
|||
@use "../util/mixin";
|
||||
@use "../component/list";
|
||||
|
||||
.b3-menu {
|
||||
position: fixed;
|
||||
border-radius: var(--b3-border-radius-b);
|
||||
|
|
@ -157,7 +160,7 @@
|
|||
}
|
||||
|
||||
.b3-menu__label {
|
||||
@include text-clamp(1);
|
||||
@include mixin.text-clamp(1);
|
||||
max-width: 30vw;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
|
@ -309,7 +312,7 @@
|
|||
}
|
||||
|
||||
&__avemoji {
|
||||
@extend .b3-list-item__icon;
|
||||
@extend %b3-list-item__icon;
|
||||
align-self: center;
|
||||
margin-left: -4px;
|
||||
font-size: 14px;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.b3-text-field {
|
||||
%b3-text-field {
|
||||
border: 0;
|
||||
border-radius: var(--b3-border-radius);
|
||||
box-shadow: inset 0 0 0 .6px var(--b3-theme-on-surface);
|
||||
|
|
@ -33,3 +33,7 @@
|
|||
box-shadow: 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.b3-text-field {
|
||||
@extend %b3-text-field;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@use "../util/function";
|
||||
|
||||
@font-face {
|
||||
font-family: 'JetBrainsMono-Regular';
|
||||
/*! /* webpackIgnore: true */
|
||||
|
|
@ -261,7 +263,7 @@
|
|||
|
||||
code:not(.hljs),
|
||||
span[data-type~="code"] {
|
||||
@extend .fn__code;
|
||||
@extend %fn__code;
|
||||
tab-size: 4;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
@import "util/mixin";
|
||||
@import "component/tooltips";
|
||||
@import "protyle/wysiwyg";
|
||||
@import "component/typography";
|
||||
@import "protyle/attr";
|
||||
@import "util/function";
|
||||
@import "business/history";
|
||||
@import "component/button";
|
||||
@import "component/select";
|
||||
@import "component/switch";
|
||||
@import "component/slider";
|
||||
@import "component/text-field";
|
||||
@use "util/mixin" as *;
|
||||
@use "component/tooltips" as *;
|
||||
@use "protyle/wysiwyg" as *;
|
||||
@use "component/typography" as *;
|
||||
@use "protyle/attr" as *;
|
||||
@use "util/function" as *;
|
||||
@use "business/history" as *;
|
||||
@use "component/button" as *;
|
||||
@use "component/select" as *;
|
||||
@use "component/switch" as *;
|
||||
@use "component/slider" as *;
|
||||
@use "component/text-field" as *;
|
||||
|
||||
.protyle-wysiwyg a,
|
||||
.b3-typography a {
|
||||
|
|
|
|||
|
|
@ -1,539 +1,32 @@
|
|||
@import "util/keyframes";
|
||||
@import "util/mixin";
|
||||
@import "component/chip";
|
||||
@import "component/slider";
|
||||
@import "component/switch";
|
||||
@import "component/dialog";
|
||||
@import "component/button";
|
||||
@import "component/menu";
|
||||
@import "component/snackbar";
|
||||
@import "component/form";
|
||||
@import "component/text-field";
|
||||
@import "component/select";
|
||||
@import "component/list";
|
||||
@import "business/graph";
|
||||
@import "business/layout";
|
||||
@import "business/block";
|
||||
@import "util/reset";
|
||||
@import "util/function";
|
||||
@import "business/history";
|
||||
@import "business/color";
|
||||
@import "protyle/protyle";
|
||||
@import "component/typography";
|
||||
@import "viewerjs/viewer";
|
||||
@import "business/export";
|
||||
@import "business/card";
|
||||
@import "business/custom";
|
||||
@import "business/av";
|
||||
@import "business/search";
|
||||
@import "business/emojis";
|
||||
@import "component/svg";
|
||||
|
||||
.block__popover {
|
||||
width: 80vw;
|
||||
}
|
||||
|
||||
.fn__flex-column[data-type="sidebar-file"] {
|
||||
.b3-list-item {
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
.b3-list--mobile {
|
||||
|
||||
& > .fn__flex-column {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.b3-list-item {
|
||||
font-size: 16px;
|
||||
line-height: 40px;
|
||||
|
||||
&__icon {
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
height: auto;
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&__graphic {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
&__toggle {
|
||||
height: 32px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
&__arrow {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
&__action {
|
||||
padding: 8px;
|
||||
height: 16px;
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-tree__sliderDown {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition: var(--b3-transition);
|
||||
}
|
||||
|
||||
.counter {
|
||||
margin-left: 4px;
|
||||
padding: 0 8px;
|
||||
color: var(--b3-theme-on-surface-light);
|
||||
border-radius: var(--b3-border-radius);
|
||||
user-select: none;
|
||||
background-color: var(--b3-theme-background-light);
|
||||
line-height: 24px;
|
||||
height: 24px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: 100vw;
|
||||
background: var(--b3-theme-background);
|
||||
|
||||
&--border {
|
||||
border-bottom: .5px solid var(--b3-theme-background-light);
|
||||
}
|
||||
|
||||
&--dark {
|
||||
background-color: var(--b3-theme-surface);
|
||||
}
|
||||
|
||||
&__icon {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
padding: 10px;
|
||||
flex-shrink: 0;
|
||||
margin: 6px 4px;
|
||||
color: var(--b3-theme-on-surface);
|
||||
border-radius: var(--b3-border-radius);
|
||||
|
||||
&[disabled] {
|
||||
opacity: .38;
|
||||
}
|
||||
|
||||
&--active,
|
||||
&:not(.toolbar__icon-deactivate):focus,
|
||||
&:not(.toolbar__icon-deactivate):hover {
|
||||
background-color: var(--b3-list-hover);
|
||||
}
|
||||
|
||||
&--history {
|
||||
height: 36px;
|
||||
width: 36px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
flex: 1;
|
||||
box-shadow: none;
|
||||
min-width: 1px;
|
||||
line-height: 30px;
|
||||
font-size: 17px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
color: var(--b3-theme-on-background);
|
||||
}
|
||||
|
||||
&__text {
|
||||
@include text-clamp(1);
|
||||
flex: 1;
|
||||
font-size: 17px;
|
||||
min-height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.side-panel {
|
||||
position: fixed;
|
||||
background-color: var(--b3-theme-surface);
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
z-index: 7;
|
||||
transform: translateX(-100vw);
|
||||
transition: transform .15s cubic-bezier(0, 0, .2, 1) 0ms;
|
||||
|
||||
&--all {
|
||||
transform: translateY(-200vh);
|
||||
}
|
||||
}
|
||||
|
||||
.side-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 6;
|
||||
background-color: #000;
|
||||
opacity: 0;
|
||||
transition: opacity 150ms linear;
|
||||
}
|
||||
|
||||
#model {
|
||||
box-sizing: border-box;
|
||||
|
||||
.toolbar__text {
|
||||
min-height: 48px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.config-about__logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.config-account {
|
||||
&__bg {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__cover {
|
||||
width: 100vw;
|
||||
height: 50vh;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
position: absolute;
|
||||
top: 50vh;
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
left: 50%;
|
||||
margin: -160px 0 0 -64px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50%;
|
||||
background-size: cover;
|
||||
border-radius: 90px;
|
||||
background-color: rgba(255, 255, 255, .8);
|
||||
box-shadow: var(--b3-point-shadow);
|
||||
border: 1px solid var(--b3-theme-surface-lighter);
|
||||
}
|
||||
|
||||
&__info {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
&__name {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.config-assets {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
&__list {
|
||||
overflow: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__preview {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: auto;
|
||||
flex: 1;
|
||||
margin-top: 8px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#menu {
|
||||
z-index: 7;
|
||||
transform: translateX(100vw);
|
||||
top: 0;
|
||||
|
||||
// for plugin
|
||||
.b3-menu__item > svg:not(.b3-menu__icon) {
|
||||
height: 17px;
|
||||
width: 17px;
|
||||
margin: 0 16px 0 8px;
|
||||
border-radius: var(--b3-border-radius);
|
||||
align-self: center;
|
||||
color: var(--b3-theme-on-surface);
|
||||
}
|
||||
}
|
||||
|
||||
.keyboard {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
height: 42px;
|
||||
background: var(--b3-theme-background);
|
||||
display: flex;
|
||||
border-top: 1px solid var(--b3-theme-surface-lighter);
|
||||
overflow: hidden;
|
||||
flex-direction: column;
|
||||
z-index: 1;
|
||||
|
||||
&__dynamic {
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__bar {
|
||||
border-bottom: 1px solid var(--b3-theme-surface-lighter);
|
||||
}
|
||||
|
||||
&__util {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
background-color: var(--b3-theme-surface);
|
||||
}
|
||||
|
||||
&__split {
|
||||
width: 1px;
|
||||
height: 28px;
|
||||
background-color: var(--b3-theme-surface-lighter);
|
||||
align-self: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__action {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
color: var(--b3-theme-on-surface);
|
||||
|
||||
span {
|
||||
padding: 6px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
opacity: .38;
|
||||
}
|
||||
|
||||
&.protyle-toolbar__item--current svg {
|
||||
background-color: var(--b3-list-hover);
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
float: left;
|
||||
padding: 6px;
|
||||
margin: 6px;
|
||||
border-radius: var(--b3-border-radius);
|
||||
|
||||
&.keyboard__svg--big {
|
||||
width: 30px;
|
||||
padding: 2px 6px;
|
||||
height: 32px;
|
||||
margin: 2px 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__slash {
|
||||
&-title {
|
||||
height: 24px;
|
||||
padding: 0 8px;
|
||||
line-height: 24px;
|
||||
color: var(--b3-theme-on-surface);
|
||||
}
|
||||
|
||||
&-block {
|
||||
display: flex;
|
||||
padding-left: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
&-item {
|
||||
background-color: var(--b3-theme-background);
|
||||
border-radius: var(--b3-border-radius);
|
||||
width: calc(50% - 8px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 4px 8px 4px 0;
|
||||
position: relative;
|
||||
box-shadow: inset 0 0 0 .6px var(--b3-theme-on-surface);
|
||||
border: 0;
|
||||
color: var(--b3-theme-on-background);
|
||||
min-height: 50px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin: 6px;
|
||||
flex-shrink: 0;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
&-text {
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.svg {
|
||||
fill: currentColor;
|
||||
display: inline-block;
|
||||
stroke-width: 0;
|
||||
stroke: currentColor;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
flex-shrink: 0;
|
||||
|
||||
&--mid {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
&--small {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
&--smaller {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
#empty {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.b3-list-item {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.b3-menu {
|
||||
&__accelerator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__item--warning {
|
||||
color: var(--b3-theme-error);
|
||||
|
||||
& > .b3-menu__icon {
|
||||
color: var(--b3-theme-error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#historyContainer {
|
||||
& > div {
|
||||
flex-direction: column;
|
||||
|
||||
& > ul {
|
||||
width: auto !important;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
position: fixed;
|
||||
bottom: -30px;
|
||||
transition: var(--b3-transition);
|
||||
font-size: 12px;
|
||||
color: var(--b3-theme-on-surface);
|
||||
padding: 4px;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background-color: var(--b3-theme-background);
|
||||
@extend .fn__ellipsis;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.protyle {
|
||||
&-font {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
// iPhone 右上角属性中对不齐
|
||||
&-wysiwyg--attr .protyle-attr > div:not(.protyle-attr--memo):not(.protyle-attr--refcount) {
|
||||
max-width: 26vw;
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
}
|
||||
|
||||
// 移动端键盘弹起和点击加号需保持滚动高度一致
|
||||
&-background__img img {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
&-scroll {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&-hint {
|
||||
min-width: 100vw;
|
||||
max-height: 70vh;
|
||||
}
|
||||
}
|
||||
|
||||
.b3-dialog__container {
|
||||
max-width: 100vw;
|
||||
}
|
||||
|
||||
@media (max-width: 620px) {
|
||||
.protyle-wysiwyg [data-node-id].sb[data-sb-layout="col"] {
|
||||
flex-direction: column;
|
||||
flex-wrap: initial;
|
||||
|
||||
& > div {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@import "util/responsive";
|
||||
@use "util/keyframes" as *;
|
||||
@use "util/function" as *;
|
||||
@use "component/chip" as *;
|
||||
@use "component/slider" as *;
|
||||
@use "component/switch" as *;
|
||||
@use "component/dialog" as *;
|
||||
@use "component/button" as *;
|
||||
@use "component/menu" as *;
|
||||
@use "component/snackbar" as *;
|
||||
@use "component/form" as *;
|
||||
@use "component/text-field" as *;
|
||||
@use "component/select" as *;
|
||||
@use "component/list" as *;
|
||||
@use "business/graph" as *;
|
||||
@use "business/layout" as *;
|
||||
@use "business/block" as *;
|
||||
@use "util/reset" as *;
|
||||
@use "util/function" as *;
|
||||
@use "business/history" as *;
|
||||
@use "business/color" as *;
|
||||
@use "protyle/protyle" as *;
|
||||
@use "component/typography" as *;
|
||||
@use "viewerjs/viewer" as *;
|
||||
@use "business/export" as *;
|
||||
@use "business/card" as *;
|
||||
@use "business/custom" as *;
|
||||
@use "business/av" as *;
|
||||
@use "business/search" as *;
|
||||
@use "business/emojis" as *;
|
||||
@use "component/svg" as *;
|
||||
@use "mobile-styles" as *;
|
||||
@use "util/responsive" as *;
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
* limitations under the License.
|
||||
*/
|
||||
|
||||
@import "pdf_viewer";
|
||||
@use "pdf_viewer" as *;
|
||||
|
||||
.pdf {
|
||||
&__toolbar {
|
||||
|
|
|
|||
|
|
@ -22,6 +22,12 @@
|
|||
--input-hover-border-color: black;
|
||||
--link-outline: none;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
transform-origin: 0 0;
|
||||
|
||||
@media screen and (forced-colors: active) {
|
||||
--input-focus-border-color: CanvasText;
|
||||
--input-unfocused-border-color: ActiveText;
|
||||
|
|
@ -71,12 +77,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
transform-origin: 0 0;
|
||||
|
||||
&[data-main-rotation="90"] .norotate {
|
||||
transform: rotate(270deg) translateX(-100%);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,9 +12,9 @@
|
|||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
@import "annotation_layer_builder";
|
||||
@import "text_layer_builder";
|
||||
@import "xfa_layer_builder";
|
||||
@use "annotation_layer_builder" as *;
|
||||
@use "text_layer_builder" as *;
|
||||
@use "xfa_layer_builder" as *;
|
||||
|
||||
:root {
|
||||
--viewer-container-height: 0;
|
||||
|
|
|
|||
|
|
@ -63,6 +63,12 @@
|
|||
--highlight-backdrop-filter: none;
|
||||
--highlight-selected-backdrop-filter: none;
|
||||
|
||||
margin: -1px;
|
||||
padding: 1px;
|
||||
background-color: var(--highlight-bg-color);
|
||||
backdrop-filter: var(--highlight-backdrop-filter);
|
||||
border-radius: 4px;
|
||||
|
||||
@media screen and (forced-colors: active) {
|
||||
--highlight-bg-color: transparent;
|
||||
--highlight-selected-bg-color: transparent;
|
||||
|
|
@ -72,12 +78,6 @@
|
|||
);
|
||||
}
|
||||
|
||||
margin: -1px;
|
||||
padding: 1px;
|
||||
background-color: var(--highlight-bg-color);
|
||||
backdrop-filter: var(--highlight-backdrop-filter);
|
||||
border-radius: 4px;
|
||||
|
||||
&.appended {
|
||||
position: initial;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
@use "../component/text-field";
|
||||
|
||||
.pcr-app {
|
||||
box-shadow: var(--b3-dialog-shadow);
|
||||
border: 1px solid var(--b3-theme-surface-lighter);
|
||||
border-radius: var(--b3-border-radius);
|
||||
|
||||
.pcr-interaction .pcr-result {
|
||||
@extend .b3-text-field;
|
||||
@extend %b3-text-field;
|
||||
background: transparent;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@import "content";
|
||||
@import "toolbar";
|
||||
@import "wysiwyg";
|
||||
@import "attr";
|
||||
@use "content" as *;
|
||||
@use "toolbar" as *;
|
||||
@use "wysiwyg" as *;
|
||||
@use "attr" as *;
|
||||
|
||||
.protyle-scroll {
|
||||
--b3-dynamicscroll-width: 200px;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@use "../util/mixin";
|
||||
|
||||
.protyle-wysiwyg {
|
||||
padding: 16px 16px 16px 24px;
|
||||
cursor: text;
|
||||
|
|
@ -582,7 +584,7 @@
|
|||
|
||||
& > div:not(.protyle-attr--memo):not(.protyle-attr--refcount) {
|
||||
cursor: pointer;
|
||||
@include text-clamp(1);
|
||||
@include mixin.text-clamp(1);
|
||||
max-width: 25vw;
|
||||
}
|
||||
}
|
||||
|
|
@ -614,7 +616,7 @@
|
|||
}
|
||||
|
||||
[data-node-id][fold="1"]:not(.li):not([data-type="NodeHeading"]) {
|
||||
@include text-clamp(1);
|
||||
@include mixin.text-clamp(1);
|
||||
opacity: .38;
|
||||
font-size: 16px;
|
||||
height: 26px;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,46 @@
|
|||
@use "mixin";
|
||||
|
||||
%fn {
|
||||
&__ellipsis {
|
||||
@include mixin.text-clamp(1);
|
||||
display: block; // 集市挂件名称过长遮挡星标 https://github.com/siyuan-note/siyuan/issues/4782
|
||||
}
|
||||
|
||||
&__flex-column {
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__a {
|
||||
color: var(--b3-theme-on-surface);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: var(--b3-theme-on-background);
|
||||
}
|
||||
}
|
||||
|
||||
&__code {
|
||||
padding: .2em .4em;
|
||||
margin: 0;
|
||||
font-size: 85%;
|
||||
border-radius: var(--b3-border-radius);
|
||||
font-family: var(--b3-font-family-code);
|
||||
word-break: break-word;
|
||||
background-size: 20px 20px;
|
||||
white-space: pre-wrap;
|
||||
background-color: var(--b3-protyle-code-background);
|
||||
}
|
||||
}
|
||||
|
||||
.fn {
|
||||
&__hidescrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__ellipsis {
|
||||
@include text-clamp(1);
|
||||
display: block; // 集市挂件名称过长遮挡星标 https://github.com/siyuan-note/siyuan/issues/4782
|
||||
@extend %fn__ellipsis;
|
||||
}
|
||||
|
||||
&__space {
|
||||
|
|
@ -52,9 +87,7 @@
|
|||
}
|
||||
|
||||
&-column {
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@extend %fn__flex-column;
|
||||
}
|
||||
|
||||
&-shrink {
|
||||
|
|
@ -83,12 +116,7 @@
|
|||
}
|
||||
|
||||
&__a {
|
||||
color: var(--b3-theme-on-surface);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: var(--b3-theme-on-background);
|
||||
}
|
||||
@extend %fn__a;
|
||||
}
|
||||
|
||||
&__block {
|
||||
|
|
@ -125,15 +153,7 @@
|
|||
}
|
||||
|
||||
&__code {
|
||||
padding: .2em .4em;
|
||||
margin: 0;
|
||||
font-size: 85%;
|
||||
border-radius: var(--b3-border-radius);
|
||||
font-family: var(--b3-font-family-code);
|
||||
word-break: break-word;
|
||||
background-size: 20px 20px;
|
||||
white-space: pre-wrap;
|
||||
background-color: var(--b3-protyle-code-background);
|
||||
@extend %fn__code;
|
||||
}
|
||||
|
||||
&__kbd {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue