mirror of
https://github.com/siyuan-note/siyuan.git
synced 2025-05-18 01:50:58 +08:00
♻️ scss
This commit is contained in:
Vanessa
parent
62efb18021
commit
406c820432
@ -125,7 +125,7 @@ export const initAnno = (file: string, element: HTMLElement, annoId: string, pdf
|
||||
let target = event.target as HTMLElement;
|
||||
while (target && !target.classList.contains("pdf__outer")) {
|
||||
const type = target.getAttribute("data-type");
|
||||
if (target.classList.contains("b3-color__square")) {
|
||||
if (target.classList.contains("color__square")) {
|
||||
const color = target.style.backgroundColor;
|
||||
if (rectElement) {
|
||||
const config = getConfig(pdf);
|
||||
|
||||
@ -396,13 +396,13 @@ export class Asset extends Model {
|
||||
</div>
|
||||
<div class="pdf__util b3-menu fn__none pdf__util--hide">
|
||||
<div class="fn__flex" style="padding: 0 4px">
|
||||
<button class="b3-color__square" style="background-color:var(--b3-pdf-background1)"></button>
|
||||
<button class="b3-color__square" style="background-color:var(--b3-pdf-background2)"></button>
|
||||
<button class="b3-color__square" style="background-color:var(--b3-pdf-background3)"></button>
|
||||
<button class="b3-color__square" style="background-color:var(--b3-pdf-background4)"></button>
|
||||
<button class="b3-color__square" style="background-color:var(--b3-pdf-background5)"></button>
|
||||
<button class="b3-color__square" style="background-color:var(--b3-pdf-background6)"></button>
|
||||
<button class="b3-color__square" style="background-color:var(--b3-pdf-background7)"></button>
|
||||
<button class="color__square" style="background-color:var(--b3-pdf-background1)"></button>
|
||||
<button class="color__square" style="background-color:var(--b3-pdf-background2)"></button>
|
||||
<button class="color__square" style="background-color:var(--b3-pdf-background3)"></button>
|
||||
<button class="color__square" style="background-color:var(--b3-pdf-background4)"></button>
|
||||
<button class="color__square" style="background-color:var(--b3-pdf-background5)"></button>
|
||||
<button class="color__square" style="background-color:var(--b3-pdf-background6)"></button>
|
||||
<button class="color__square" style="background-color:var(--b3-pdf-background7)"></button>
|
||||
</div>
|
||||
<div class="b3-menu__separator pdf__util__hide" style="margin-top: 8px"></div>
|
||||
<button class="b3-menu__item pdf__util__hide" data-type="toggle">
|
||||
|
||||
@ -1,23 +0,0 @@
|
||||
.b3-color {
|
||||
&__square {
|
||||
height: 16px;
|
||||
margin-right: 4px;
|
||||
width: 16px;
|
||||
border: 0;
|
||||
transition: var(--b3-transition);
|
||||
box-shadow: 0 0 0 2px var(--b3-theme-surface-lighter) inset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
background-color: var(--b3-theme-background);
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 1px var(--b3-theme-on-background) inset, 0 0 0 2px var(--b3-theme-background) inset;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,11 +0,0 @@
|
||||
.b3-tab-container {
|
||||
overflow: auto;
|
||||
box-sizing: border-box;
|
||||
flex: 1;
|
||||
background-color: var(--b3-theme-background);
|
||||
|
||||
.b3-label {
|
||||
padding: 16px 0;
|
||||
margin: 0 24px;
|
||||
}
|
||||
}
|
||||
@ -1,32 +1,34 @@
|
||||
@import "keyframes";
|
||||
@import "mixin";
|
||||
@import "function";
|
||||
@import "chip";
|
||||
@import "slider";
|
||||
@import "switch";
|
||||
@import "scroll";
|
||||
@import "tooltips";
|
||||
@import "dialog";
|
||||
@import "button";
|
||||
@import "snackbar";
|
||||
@import "form";
|
||||
@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 "node_modules/@simonwep/pickr/src/scss/themes/nano.scss";
|
||||
@import "text-field";
|
||||
@import "select";
|
||||
@import "list";
|
||||
@import "tab";
|
||||
@import "graph";
|
||||
@import "layout";
|
||||
@import "block";
|
||||
@import "reset";
|
||||
@import "card";
|
||||
@import "menu";
|
||||
@import "color";
|
||||
// un refactor
|
||||
@import "protyle";
|
||||
@import "typography";
|
||||
@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 "viewer";
|
||||
@import "business/config";
|
||||
@import "business/search";
|
||||
@import "pickr/pcr";
|
||||
@import "viewerjs/viewer";
|
||||
|
||||
/*
|
||||
.status: 3
|
||||
@ -143,26 +145,6 @@ html {
|
||||
}
|
||||
}
|
||||
|
||||
.pcr-app {
|
||||
box-shadow: var(--b3-dialog-shadow);
|
||||
border: 1px solid var(--b3-theme-surface-lighter);
|
||||
border-radius: 4px;
|
||||
|
||||
.pcr-interaction .pcr-result {
|
||||
@extend .b3-text-field;
|
||||
background: transparent;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.pcr-selection .pcr-picker {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
border: 1px solid var(--b3-theme-surface-lighter);
|
||||
box-shadow: var(--b3-point-shadow);
|
||||
transition: transform 100ms ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
.svg {
|
||||
fill: currentColor;
|
||||
display: inline-block;
|
||||
@ -355,216 +337,6 @@ html {
|
||||
}
|
||||
}
|
||||
|
||||
.config {
|
||||
&__panel {
|
||||
& > .b3-tab-bar {
|
||||
user-select: none;
|
||||
width: 180px;
|
||||
overflow: auto;
|
||||
padding: 8px 0;
|
||||
box-sizing: border-box
|
||||
}
|
||||
}
|
||||
|
||||
&-query {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
label {
|
||||
width: 16%;
|
||||
margin: 8px 17% 0 0;
|
||||
color: var(--b3-theme-on-surface);
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
&-repos__sync {
|
||||
margin: 0 0 -16px 16px;
|
||||
overflow: hidden;
|
||||
max-height: 180px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
&-account {
|
||||
height: 100%;
|
||||
|
||||
&__center {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
min-width: 1px;
|
||||
align-items: center;
|
||||
|
||||
&--text {
|
||||
background-color: var(--b3-theme-surface);
|
||||
padding: 16px 24px;
|
||||
|
||||
.b3-button--outline {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__form {
|
||||
max-width: 298px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__bg {
|
||||
position: relative;
|
||||
margin-bottom: 82px;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
min-height: 128px;
|
||||
}
|
||||
|
||||
&__info {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 16px 24px;
|
||||
}
|
||||
|
||||
&__cover {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
position: absolute;
|
||||
bottom: 24px;
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
left: 50%;
|
||||
margin-left: -64px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50%;
|
||||
background-size: cover;
|
||||
border-radius: 90px;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
box-shadow: var(--b3-point-shadow);
|
||||
border: 1px solid var(--b3-theme-surface-lighter);
|
||||
}
|
||||
|
||||
&__name {
|
||||
bottom: -58px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&-about__logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
img {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&-assets {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
#assetsList {
|
||||
overflow: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__preview {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: auto;
|
||||
flex: 1;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&-keymap li .b3-text-field {
|
||||
width: 124px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-bazaar__readme {
|
||||
position: absolute;
|
||||
transition: var(--b3-transition);
|
||||
right: -100%;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--b3-theme-background);
|
||||
display: flex;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.item {
|
||||
&__side {
|
||||
text-align: center;
|
||||
width: 260px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&__main {
|
||||
flex: 1;
|
||||
margin-left: 16px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 30px;
|
||||
word-break: break-all;
|
||||
color: var(--b3-theme-on-background);
|
||||
}
|
||||
|
||||
&__nav {
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
line-height: 26px;
|
||||
font-size: 16px;
|
||||
color: var(--b3-theme-on-surface);
|
||||
}
|
||||
|
||||
&__preview {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 16px;
|
||||
cursor: pointer;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transition: var(--b3-transition);
|
||||
|
||||
&--fullscreen {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
height: 100%;
|
||||
background-size: contain;
|
||||
background-color: var(--b3-mask-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.asset {
|
||||
overflow: auto;
|
||||
box-sizing: border-box;
|
||||
@ -646,4 +418,4 @@ html {
|
||||
}
|
||||
|
||||
// 需放置最后，否则 https://github.com/siyuan-note/siyuan/issues/7056
|
||||
@import "responsive";
|
||||
@import "util/responsive";
|
||||
|
||||
21
app/src/assets/scss/business/_color.scss
Normal file
21
app/src/assets/scss/business/_color.scss
Normal file
@ -0,0 +1,21 @@
|
||||
.color__square {
|
||||
height: 16px;
|
||||
margin-right: 4px;
|
||||
width: 16px;
|
||||
border: 0;
|
||||
transition: var(--b3-transition);
|
||||
box-shadow: 0 0 0 2px var(--b3-theme-surface-lighter) inset;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
background-color: var(--b3-theme-background);
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 1px var(--b3-theme-on-background) inset, 0 0 0 2px var(--b3-theme-background) inset;
|
||||
}
|
||||
}
|
||||
220
app/src/assets/scss/business/_config.scss
Normal file
220
app/src/assets/scss/business/_config.scss
Normal file
@ -0,0 +1,220 @@
|
||||
.config {
|
||||
&__tab-container {
|
||||
overflow: auto;
|
||||
box-sizing: border-box;
|
||||
flex: 1;
|
||||
background-color: var(--b3-theme-background);
|
||||
|
||||
.b3-label {
|
||||
padding: 16px 0;
|
||||
margin: 0 24px;
|
||||
}
|
||||
}
|
||||
&__panel {
|
||||
& > .b3-tab-bar {
|
||||
user-select: none;
|
||||
width: 180px;
|
||||
overflow: auto;
|
||||
padding: 8px 0;
|
||||
box-sizing: border-box
|
||||
}
|
||||
}
|
||||
|
||||
&-query {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
label {
|
||||
width: 16%;
|
||||
margin: 8px 17% 0 0;
|
||||
color: var(--b3-theme-on-surface);
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
&-repos__sync {
|
||||
margin: 0 0 -16px 16px;
|
||||
overflow: hidden;
|
||||
max-height: 180px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
&-account {
|
||||
height: 100%;
|
||||
|
||||
&__center {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
min-width: 1px;
|
||||
align-items: center;
|
||||
|
||||
&--text {
|
||||
background-color: var(--b3-theme-surface);
|
||||
padding: 16px 24px;
|
||||
|
||||
.b3-button--outline {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__form {
|
||||
max-width: 298px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__bg {
|
||||
position: relative;
|
||||
margin-bottom: 82px;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
min-height: 128px;
|
||||
}
|
||||
|
||||
&__info {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 16px 24px;
|
||||
}
|
||||
|
||||
&__cover {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
position: absolute;
|
||||
bottom: 24px;
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
left: 50%;
|
||||
margin-left: -64px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50%;
|
||||
background-size: cover;
|
||||
border-radius: 90px;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
box-shadow: var(--b3-point-shadow);
|
||||
border: 1px solid var(--b3-theme-surface-lighter);
|
||||
}
|
||||
|
||||
&__name {
|
||||
bottom: -58px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&-about__logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
img {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&-assets {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
#assetsList {
|
||||
overflow: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__preview {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: auto;
|
||||
flex: 1;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&-keymap li .b3-text-field {
|
||||
width: 124px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-bazaar__readme {
|
||||
position: absolute;
|
||||
transition: var(--b3-transition);
|
||||
right: -100%;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--b3-theme-background);
|
||||
display: flex;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.item {
|
||||
&__side {
|
||||
text-align: center;
|
||||
width: 260px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&__main {
|
||||
flex: 1;
|
||||
margin-left: 16px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 30px;
|
||||
word-break: break-all;
|
||||
color: var(--b3-theme-on-background);
|
||||
}
|
||||
|
||||
&__nav {
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
line-height: 26px;
|
||||
font-size: 16px;
|
||||
color: var(--b3-theme-on-surface);
|
||||
}
|
||||
|
||||
&__preview {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 16px;
|
||||
cursor: pointer;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transition: var(--b3-transition);
|
||||
|
||||
&--fullscreen {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
height: 100%;
|
||||
background-size: contain;
|
||||
background-color: var(--b3-mask-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
45
app/src/assets/scss/business/_history.scss
Normal file
45
app/src/assets/scss/business/_history.scss
Normal file
@ -0,0 +1,45 @@
|
||||
.history {
|
||||
&__text {
|
||||
background-color: var(--b3-theme-background);
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
border: 0;
|
||||
border-radius: 0 0 4px 0;
|
||||
resize: none;
|
||||
color: var(--b3-theme-on-background);
|
||||
}
|
||||
|
||||
&__repo {
|
||||
background-color: var(--b3-theme-background);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
border-radius: 0 0 4px 4px;
|
||||
overflow: hidden;
|
||||
|
||||
.b3-chip--secondary {
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&__repoheader {
|
||||
padding: 8px 16px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.block__icon {
|
||||
opacity: 1;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__date {
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
color: var(--b3-theme-on-surface);
|
||||
background: var(--b3-theme-background);
|
||||
}
|
||||
}
|
||||
@ -1,12 +1,13 @@
|
||||
@import "mixin";
|
||||
@import "tooltips";
|
||||
@import "typography";
|
||||
@import "wysiwyg";
|
||||
@import "function";
|
||||
@import "button";
|
||||
@import "select";
|
||||
@import "switch";
|
||||
@import "slider";
|
||||
@import "util/mixin";
|
||||
@import "component/tooltips";
|
||||
@import "component/typography";
|
||||
@import "protyle/wysiwyg";
|
||||
@import "util/function";
|
||||
@import "business/history";
|
||||
@import "component/button";
|
||||
@import "component/select";
|
||||
@import "component/switch";
|
||||
@import "component/slider";
|
||||
|
||||
.protyle-wysiwyg {
|
||||
font-family: var(--b3-font-family);
|
||||
|
||||
@ -1,27 +1,26 @@
|
||||
@import "keyframes";
|
||||
@import "mixin";
|
||||
@import "chip";
|
||||
@import "slider";
|
||||
@import "switch";
|
||||
@import "dialog";
|
||||
@import "button";
|
||||
@import "menu";
|
||||
@import "snackbar";
|
||||
@import "form";
|
||||
@import "text-field";
|
||||
@import "select";
|
||||
@import "list";
|
||||
@import "tab";
|
||||
@import "graph";
|
||||
@import "layout";
|
||||
@import "block";
|
||||
@import "reset";
|
||||
@import "function";
|
||||
@import "color";
|
||||
// un refactor
|
||||
@import "protyle";
|
||||
@import "typography";
|
||||
@import "viewer";
|
||||
@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";
|
||||
|
||||
.block__popover {
|
||||
width: 80vw;
|
||||
@ -331,4 +330,4 @@
|
||||
}
|
||||
}
|
||||
|
||||
@import "responsive";
|
||||
@import "util/responsive";
|
||||
|
||||
19
app/src/assets/scss/pickr/pcr.scss
Normal file
19
app/src/assets/scss/pickr/pcr.scss
Normal file
@ -0,0 +1,19 @@
|
||||
.pcr-app {
|
||||
box-shadow: var(--b3-dialog-shadow);
|
||||
border: 1px solid var(--b3-theme-surface-lighter);
|
||||
border-radius: 4px;
|
||||
|
||||
.pcr-interaction .pcr-result {
|
||||
@extend .b3-text-field;
|
||||
background: transparent;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.pcr-selection .pcr-picker {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
border: 1px solid var(--b3-theme-surface-lighter);
|
||||
box-shadow: var(--b3-point-shadow);
|
||||
transition: transform 100ms ease-out;
|
||||
}
|
||||
}
|
||||
@ -1,7 +1,6 @@
|
||||
@import "content";
|
||||
@import "toolbar";
|
||||
@import "wysiwyg";
|
||||
@import "search";
|
||||
|
||||
.protyle-scroll {
|
||||
--b3-dynamicscroll-width: 200px;
|
||||
@ -164,49 +164,3 @@
|
||||
color: var(--b3-theme-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.history {
|
||||
&__text {
|
||||
background-color: var(--b3-theme-background);
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
border: 0;
|
||||
border-radius: 0 0 4px 0;
|
||||
resize: none;
|
||||
color: var(--b3-theme-on-background);
|
||||
}
|
||||
|
||||
&__repo {
|
||||
background-color: var(--b3-theme-background);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
border-radius: 0 0 4px 4px;
|
||||
overflow: hidden;
|
||||
|
||||
.b3-chip--secondary {
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&__repoheader {
|
||||
padding: 8px 16px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.block__icon {
|
||||
opacity: 1;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__date {
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
color: var(--b3-theme-on-surface);
|
||||
background: var(--b3-theme-background);
|
||||
}
|
||||
}
|
||||
@ -61,7 +61,10 @@ export const openCardByData = (cardsData: ICard[], html = "") => {
|
||||
<div class="fn__flex b3-dialog__cardaction fn__none">
|
||||
<div>
|
||||
<span></span>
|
||||
<button data-type="0" aria-label="1 / j" class="b3-button b3-button--error b3-tooltips__s b3-tooltips">Again</button>
|
||||
<button data-type="0" aria-label="1 / j" class="b3-button b3-button--error b3-tooltips__s b3-tooltips">
|
||||
<span class="">❌</span>
|
||||
Again
|
||||
</button>
|
||||
</div>
|
||||
<span class="fn__flex-1"></span>
|
||||
<div>
|
||||
|
||||
@ -14,7 +14,7 @@ import {Dialog} from "../dialog";
|
||||
|
||||
export const openSetting = () => {
|
||||
const exitDialog = window.siyuan.dialogs.find((item) => {
|
||||
if (item.element.querySelector(".b3-tab-container")) {
|
||||
if (item.element.querySelector(".config__tab-container")) {
|
||||
item.destroy();
|
||||
return true;
|
||||
}
|
||||
@ -40,17 +40,17 @@ export const openSetting = () => {
|
||||
<li data-name="repos" class="b3-list-item b3-list-item--big"><svg class="b3-list-item__graphic"><use xlink:href="#iconCloud"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.cloud}</span></li>
|
||||
<li data-name="about" class="b3-list-item b3-list-item--big"><svg class="b3-list-item__graphic"><use xlink:href="#iconInfo"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.about}</span></li>
|
||||
</ul>
|
||||
<div class="b3-tab-container" style="height:${height}px" data-name="editor">${editor.genHTML()}</div>
|
||||
<div class="b3-tab-container fn__none" style="height:${height}px" data-name="filetree"></div>
|
||||
<div class="b3-tab-container fn__none" style="height:${height}px" data-name="image"></div>
|
||||
<div class="b3-tab-container fn__none" style="height:${height}px" data-name="export"></div>
|
||||
<div class="b3-tab-container fn__none" style="height:${height}px" data-name="appearance"></div>
|
||||
<div class="b3-tab-container fn__none" style="height:${height}px" data-name="bazaar"></div>
|
||||
<div class="b3-tab-container fn__none" style="height:${height}px" data-name="search"></div>
|
||||
<div class="b3-tab-container fn__none" style="height:${height}px;overflow: scroll" data-name="keymap"></div>
|
||||
<div class="b3-tab-container fn__none" style="height:${height}px" data-name="account"></div>
|
||||
<div class="b3-tab-container fn__none" style="height:${height}px" data-name="repos"></div>
|
||||
<div class="b3-tab-container fn__none" style="height:${height}px" data-name="about"></div>
|
||||
<div class="config__tab-container" style="height:${height}px" data-name="editor">${editor.genHTML()}</div>
|
||||
<div class="config__tab-container fn__none" style="height:${height}px" data-name="filetree"></div>
|
||||
<div class="config__tab-container fn__none" style="height:${height}px" data-name="image"></div>
|
||||
<div class="config__tab-container fn__none" style="height:${height}px" data-name="export"></div>
|
||||
<div class="config__tab-container fn__none" style="height:${height}px" data-name="appearance"></div>
|
||||
<div class="config__tab-container fn__none" style="height:${height}px" data-name="bazaar"></div>
|
||||
<div class="config__tab-container fn__none" style="height:${height}px" data-name="search"></div>
|
||||
<div class="config__tab-container fn__none" style="height:${height}px;overflow: scroll" data-name="keymap"></div>
|
||||
<div class="config__tab-container fn__none" style="height:${height}px" data-name="account"></div>
|
||||
<div class="config__tab-container fn__none" style="height:${height}px" data-name="repos"></div>
|
||||
<div class="config__tab-container fn__none" style="height:${height}px" data-name="about"></div>
|
||||
</div>
|
||||
</div>`,
|
||||
width: "90vw",
|
||||
@ -61,8 +61,8 @@ export const openSetting = () => {
|
||||
dialog.element.querySelectorAll(".b3-tab-bar .b3-list-item").forEach(item => {
|
||||
item.addEventListener("click", () => {
|
||||
const type = item.getAttribute("data-name");
|
||||
const containerElement = dialog.element.querySelector(`.b3-tab-container[data-name="${type}"]`);
|
||||
dialog.element.querySelectorAll(".b3-tab-container").forEach((container) => {
|
||||
const containerElement = dialog.element.querySelector(`.config__tab-container[data-name="${type}"]`);
|
||||
dialog.element.querySelectorAll(".config__tab-container").forEach((container) => {
|
||||
container.classList.add("fn__none");
|
||||
});
|
||||
dialog.element.querySelector(".b3-tab-bar .b3-list-item.b3-list-item--focus").classList.remove("b3-list-item--focus");
|
||||
@ -72,52 +72,52 @@ export const openSetting = () => {
|
||||
switch (type) {
|
||||
case "filetree":
|
||||
containerElement.innerHTML = fileTree.genHTML();
|
||||
fileTree.element = dialog.element.querySelector('.b3-tab-container[data-name="filetree"]');
|
||||
fileTree.element = dialog.element.querySelector('.config__tab-container[data-name="filetree"]');
|
||||
fileTree.bindEvent();
|
||||
break;
|
||||
case "image":
|
||||
containerElement.innerHTML = image.genHTML();
|
||||
image.element = dialog.element.querySelector('.b3-tab-container[data-name="image"]');
|
||||
image.element = dialog.element.querySelector('.config__tab-container[data-name="image"]');
|
||||
image.bindEvent();
|
||||
break;
|
||||
case "export":
|
||||
containerElement.innerHTML = exportConfig.genHTML();
|
||||
exportConfig.element = dialog.element.querySelector('.b3-tab-container[data-name="export"]');
|
||||
exportConfig.element = dialog.element.querySelector('.config__tab-container[data-name="export"]');
|
||||
exportConfig.bindEvent();
|
||||
break;
|
||||
case "appearance":
|
||||
containerElement.innerHTML = appearance.genHTML();
|
||||
appearance.element = dialog.element.querySelector('.b3-tab-container[data-name="appearance"]');
|
||||
appearance.element = dialog.element.querySelector('.config__tab-container[data-name="appearance"]');
|
||||
appearance.bindEvent();
|
||||
break;
|
||||
case "keymap":
|
||||
containerElement.innerHTML = keymap.genHTML();
|
||||
keymap.element = dialog.element.querySelector('.b3-tab-container[data-name="keymap"]');
|
||||
keymap.element = dialog.element.querySelector('.config__tab-container[data-name="keymap"]');
|
||||
keymap.bindEvent();
|
||||
break;
|
||||
case "bazaar":
|
||||
bazaar.element = dialog.element.querySelector('.b3-tab-container[data-name="bazaar"]');
|
||||
bazaar.element = dialog.element.querySelector('.config__tab-container[data-name="bazaar"]');
|
||||
containerElement.innerHTML = bazaar.genHTML();
|
||||
bazaar.bindEvent();
|
||||
break;
|
||||
case "account":
|
||||
containerElement.innerHTML = account.genHTML();
|
||||
account.element = dialog.element.querySelector('.b3-tab-container[data-name="account"]');
|
||||
account.element = dialog.element.querySelector('.config__tab-container[data-name="account"]');
|
||||
account.bindEvent(account.element);
|
||||
break;
|
||||
case "repos":
|
||||
containerElement.innerHTML = repos.genHTML();
|
||||
repos.element = dialog.element.querySelector('.b3-tab-container[data-name="repos"]');
|
||||
repos.element = dialog.element.querySelector('.config__tab-container[data-name="repos"]');
|
||||
repos.bindEvent();
|
||||
break;
|
||||
case "about":
|
||||
containerElement.innerHTML = about.genHTML();
|
||||
about.element = dialog.element.querySelector('.b3-tab-container[data-name="about"]');
|
||||
about.element = dialog.element.querySelector('.config__tab-container[data-name="about"]');
|
||||
about.bindEvent();
|
||||
break;
|
||||
case "search":
|
||||
containerElement.innerHTML = query.genHTML();
|
||||
query.element = dialog.element.querySelector('.b3-tab-container[data-name="search"]');
|
||||
query.element = dialog.element.querySelector('.config__tab-container[data-name="search"]');
|
||||
query.bindEvent();
|
||||
break;
|
||||
default:
|
||||
@ -126,7 +126,7 @@ export const openSetting = () => {
|
||||
}
|
||||
});
|
||||
});
|
||||
editor.element = dialog.element.querySelector('.b3-tab-container[data-name="editor"]');
|
||||
editor.element = dialog.element.querySelector('.config__tab-container[data-name="editor"]');
|
||||
editor.bindEvent();
|
||||
return dialog;
|
||||
};
|
||||
|
||||
@ -107,7 +107,7 @@ export const initConfigSearch = (element: HTMLElement) => {
|
||||
}
|
||||
});
|
||||
|
||||
const tabPanelElements = element.querySelectorAll(".b3-tab-container");
|
||||
const tabPanelElements = element.querySelectorAll(".config__tab-container");
|
||||
if (currentTabElement) {
|
||||
currentTabElement.click();
|
||||
} else {
|
||||
|
||||
@ -1575,7 +1575,7 @@ export class Gutter {
|
||||
"var(--b3-font-background13)"].forEach((item, index) => {
|
||||
styles.push({
|
||||
label: `<div class="fn__flex" data-type="a" aria-label="${window.siyuan.languages.colorPrimary} ${index + 1}">
|
||||
<span style="background-color:${item};" class="b3-color__square fn__flex-center"></span>
|
||||
<span style="background-color:${item};" class="color__square fn__flex-center"></span>
|
||||
</div>`,
|
||||
click: () => {
|
||||
this.genClick(nodeElements, protyle, (e: HTMLElement) => {
|
||||
@ -1589,7 +1589,7 @@ export class Gutter {
|
||||
});
|
||||
styles.push({
|
||||
label: `<div class="fn__flex" data-type="a" aria-label="${window.siyuan.languages.clearFontStyle}">
|
||||
<span class="b3-color__square fn__flex-center">A</span>
|
||||
<span class="color__square fn__flex-center">A</span>
|
||||
</div>`,
|
||||
click: () => {
|
||||
this.genClick(nodeElements, protyle, (e: HTMLElement) => {
|
||||
@ -1690,7 +1690,7 @@ export class Gutter {
|
||||
"var(--b3-font-color13)"].forEach((item, index) => {
|
||||
styles.push({
|
||||
label: `<div class="fn__flex" data-type="a" aria-label="${window.siyuan.languages.colorFont} ${index + 1}">
|
||||
<span style="color:${item};" class="b3-color__square fn__flex-center">A</span>
|
||||
<span style="color:${item};" class="color__square fn__flex-center">A</span>
|
||||
</div>`,
|
||||
click: () => {
|
||||
this.genClick(nodeElements, protyle, (e: HTMLElement) => {
|
||||
@ -1710,7 +1710,7 @@ export class Gutter {
|
||||
["error", "warning", "info", "success"].forEach((item) => {
|
||||
styles.push({
|
||||
label: `<div class="fn__flex" data-type="a" aria-label="${window.siyuan.languages[item + "Style"]}">
|
||||
<span style="color: var(--b3-card-${item}-color);background-color: var(--b3-card-${item}-background);" class="b3-color__square fn__flex-center">A</span>
|
||||
<span style="color: var(--b3-card-${item}-color);background-color: var(--b3-card-${item}-background);" class="color__square fn__flex-center">A</span>
|
||||
</div>`,
|
||||
click: () => {
|
||||
this.genClick(nodeElements, protyle, (e: HTMLElement) => {
|
||||
@ -1725,7 +1725,7 @@ export class Gutter {
|
||||
});
|
||||
return styles.concat([{
|
||||
label: `<div class="fn__flex" data-type="a" aria-label="${window.siyuan.languages.hollow}">
|
||||
<span style="-webkit-text-stroke: 0.2px var(--b3-theme-on-background);-webkit-text-fill-color : transparent;" class="b3-color__square fn__flex-center">A</span>
|
||||
<span style="-webkit-text-stroke: 0.2px var(--b3-theme-on-background);-webkit-text-fill-color : transparent;" class="color__square fn__flex-center">A</span>
|
||||
</div>`,
|
||||
click: () => {
|
||||
this.genClick(nodeElements, protyle, (e: HTMLElement) => {
|
||||
@ -1735,7 +1735,7 @@ export class Gutter {
|
||||
}
|
||||
}, {
|
||||
label: `<div class="fn__flex" data-type="a" aria-label="${window.siyuan.languages.shadow}">
|
||||
<span style="text-shadow: 1px 1px var(--b3-theme-surface-lighter), 2px 2px var(--b3-theme-surface-lighter), 3px 3px var(--b3-theme-surface-lighter), 4px 4px var(--b3-theme-surface-lighter)" class="b3-color__square fn__flex-center">A</span>
|
||||
<span style="text-shadow: 1px 1px var(--b3-theme-surface-lighter), 2px 2px var(--b3-theme-surface-lighter), 3px 3px var(--b3-theme-surface-lighter), 4px 4px var(--b3-theme-surface-lighter)" class="color__square fn__flex-center">A</span>
|
||||
</div>`,
|
||||
click: () => {
|
||||
this.genClick(nodeElements, protyle, (e: HTMLElement) => {
|
||||
|
||||
@ -215,23 +215,23 @@ export const hintSlash = (key: string, protyle: IProtyle) => {
|
||||
}, {
|
||||
filter: ["信息样式", "xinxiyangshi", "xxys", "info style"],
|
||||
value: `style${Constants.ZWSP}color: var(--b3-card-info-color);background-color: var(--b3-card-info-background);`,
|
||||
html: `<div class="b3-list-item__first"><div style="color: var(--b3-card-info-color);background-color: var(--b3-card-info-background);" class="b3-color__square">A</div><span class="b3-list-item__text">${window.siyuan.languages.infoStyle}</span></div>`,
|
||||
html: `<div class="b3-list-item__first"><div style="color: var(--b3-card-info-color);background-color: var(--b3-card-info-background);" class="color__square">A</div><span class="b3-list-item__text">${window.siyuan.languages.infoStyle}</span></div>`,
|
||||
}, {
|
||||
filter: ["成功样式", "chenggongyangshi", "cgys", "success style"],
|
||||
value: `style${Constants.ZWSP}color: var(--b3-card-success-color);background-color: var(--b3-card-success-background);`,
|
||||
html: `<div class="b3-list-item__first"><div style="color: var(--b3-card-success-color);background-color: var(--b3-card-success-background);" class="b3-color__square">A</div><span class="b3-list-item__text">${window.siyuan.languages.successStyle}</span></div>`,
|
||||
html: `<div class="b3-list-item__first"><div style="color: var(--b3-card-success-color);background-color: var(--b3-card-success-background);" class="color__square">A</div><span class="b3-list-item__text">${window.siyuan.languages.successStyle}</span></div>`,
|
||||
}, {
|
||||
filter: ["警告样式", "jinggaoyangshi", "jgys", "warning style"],
|
||||
value: `style${Constants.ZWSP}color: var(--b3-card-warning-color);background-color: var(--b3-card-warning-background);`,
|
||||
html: `<div class="b3-list-item__first"><div style="color: var(--b3-card-warning-color);background-color: var(--b3-card-warning-background);" class="b3-color__square">A</div><span class="b3-list-item__text">${window.siyuan.languages.warningStyle}</span></div>`,
|
||||
html: `<div class="b3-list-item__first"><div style="color: var(--b3-card-warning-color);background-color: var(--b3-card-warning-background);" class="color__square">A</div><span class="b3-list-item__text">${window.siyuan.languages.warningStyle}</span></div>`,
|
||||
}, {
|
||||
filter: ["错误样式", "cuowuyangshi", "cwys", "error style"],
|
||||
value: `style${Constants.ZWSP}color: var(--b3-card-error-color);background-color: var(--b3-card-error-background);`,
|
||||
html: `<div class="b3-list-item__first"><div style="color: var(--b3-card-error-color);background-color: var(--b3-card-error-background);" class="b3-color__square">A</div><span class="b3-list-item__text">${window.siyuan.languages.errorStyle}</span></div>`,
|
||||
html: `<div class="b3-list-item__first"><div style="color: var(--b3-card-error-color);background-color: var(--b3-card-error-background);" class="color__square">A</div><span class="b3-list-item__text">${window.siyuan.languages.errorStyle}</span></div>`,
|
||||
}, {
|
||||
filter: ["移除样式", "yichuyangshi", "ycys", "remove style"],
|
||||
value: `style${Constants.ZWSP}`,
|
||||
html: `<div class="b3-list-item__first"><div class="b3-color__square">A</div><span class="b3-list-item__text">${window.siyuan.languages.clearFontStyle}</span></div>`,
|
||||
html: `<div class="b3-list-item__first"><div class="color__square">A</div><span class="b3-list-item__text">${window.siyuan.languages.clearFontStyle}</span></div>`,
|
||||
}];
|
||||
allList.splice(1, 0, {
|
||||
filter: ["挂件", "widget", "gj", "guajian"],
|
||||
|
||||
@ -34,14 +34,14 @@ const fontMenu = (protyle: IProtyle) => {
|
||||
"var(--b3-font-color5)", "var(--b3-font-color6)", "var(--b3-font-color7)", "var(--b3-font-color8)",
|
||||
"var(--b3-font-color9)", "var(--b3-font-color10)", "var(--b3-font-color11)", "var(--b3-font-color12)",
|
||||
"var(--b3-font-color13)"].forEach((item) => {
|
||||
colorHTML += `<button class="b3-color__square" data-type="color" style="color:${item}">A</button>`;
|
||||
colorHTML += `<button class="color__square" data-type="color" style="color:${item}">A</button>`;
|
||||
});
|
||||
let bgHTML = "";
|
||||
["var(--b3-font-background1)", "var(--b3-font-background2)", "var(--b3-font-background3)", "var(--b3-font-background4)",
|
||||
"var(--b3-font-background5)", "var(--b3-font-background6)", "var(--b3-font-background7)", "var(--b3-font-background8)",
|
||||
"var(--b3-font-background9)", "var(--b3-font-background10)", "var(--b3-font-background11)", "var(--b3-font-background12)",
|
||||
"var(--b3-font-background13)"].forEach((item) => {
|
||||
bgHTML += `<button class="b3-color__square" data-type="backgroundColor" style="background-color:${item}"></button>`;
|
||||
bgHTML += `<button class="color__square" data-type="backgroundColor" style="background-color:${item}"></button>`;
|
||||
});
|
||||
|
||||
const element = document.createElement("div");
|
||||
@ -57,10 +57,10 @@ const fontMenu = (protyle: IProtyle) => {
|
||||
const lastFontStatus = item.split(Constants.ZWSP);
|
||||
switch (lastFontStatus[0]) {
|
||||
case "color":
|
||||
lastColorHTML += `<button class="b3-color__square" data-type="${lastFontStatus[0]}" style="color:${lastFontStatus[1]}">A</button>`;
|
||||
lastColorHTML += `<button class="color__square" data-type="${lastFontStatus[0]}" style="color:${lastFontStatus[1]}">A</button>`;
|
||||
break;
|
||||
case "backgroundColor":
|
||||
lastColorHTML += `<button class="b3-color__square" data-type="${lastFontStatus[0]}" style="background-color:${lastFontStatus[1]}"></button>`;
|
||||
lastColorHTML += `<button class="color__square" data-type="${lastFontStatus[0]}" style="background-color:${lastFontStatus[1]}"></button>`;
|
||||
break;
|
||||
case "style2":
|
||||
lastColorHTML += `<button data-type="${lastFontStatus[0]}" class="protyle-font__style" style="-webkit-text-stroke: 0.2px var(--b3-theme-on-background);-webkit-text-fill-color : transparent;">${window.siyuan.languages.hollow}</button>`;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user