@cherry-markdown/cherry-markdown-dev 0.9.4-dev.202507290127.ccd7524 → 0.9.4-dev.202507290844.e106755

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -5583,7 +5583,6 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
5583
5583
  .cherry-mask-code-block {
5584
5584
  width: 100%;
5585
5585
  padding-top: 50px;
5586
- display: none;
5587
5586
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(#fff));
5588
5587
  background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
5589
5588
  text-align: center;
@@ -5592,6 +5591,9 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
5592
5591
  right: 0;
5593
5592
  bottom: 0.5em;
5594
5593
  z-index: 10;
5594
+ opacity: 0;
5595
+ visibility: hidden;
5596
+ transition: opacity 0.7s ease-in-out, height 0.7s ease-in-out;
5595
5597
  }
5596
5598
  .cherry-mask-code-block .expand-btn {
5597
5599
  width: 25px;
@@ -5601,13 +5603,13 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
5601
5603
  border-radius: 5px;
5602
5604
  transition: all 0.3s;
5603
5605
  z-index: 12;
5604
- color: #3582fb;
5605
- background-color: #d7e6fe;
5606
+ color: var(--toolbar-btn-color);
5607
+ background-color: var(--toolbar-bg);
5606
5608
  display: inline-block;
5607
5609
  }
5608
5610
  .cherry-mask-code-block .expand-btn:hover {
5609
- color: #eee;
5610
- background-color: #3582fb;
5611
+ color: var(--toolbar-btn-hover-color);
5612
+ background-color: var(--toolbar-btn-hover-bg);
5611
5613
  border-color: #eee;
5612
5614
  }
5613
5615
 
@@ -5617,6 +5619,8 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
5617
5619
  }
5618
5620
  .cherry-code-unExpand .cherry-mask-code-block {
5619
5621
  display: inline-block;
5622
+ opacity: 1;
5623
+ visibility: visible;
5620
5624
  }
5621
5625
 
5622
5626
  .cherry-previewer-codeBlock-hover-handler {
@@ -5635,35 +5639,36 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
5635
5639
  width: 25px;
5636
5640
  text-align: center;
5637
5641
  height: 25px;
5638
- border: 1px solid #3582fb;
5639
5642
  cursor: pointer;
5640
5643
  float: right;
5641
5644
  top: 15px;
5642
5645
  border-radius: 5px;
5646
+ box-shadow: 5px 0 5px rgba(0, 0, 0, 0.05);
5643
5647
  transition: all 0.3s;
5644
5648
  z-index: 2;
5645
- color: #3582fb;
5646
- background-color: #eee;
5647
- border-color: #3582fb;
5649
+ color: var(--base-font-color);
5650
+ background-color: var(--toolbar-bg);
5651
+ border: 1px solid var(--base-border-color);
5648
5652
  }
5649
5653
  .cherry-previewer-codeBlock-hover-handler .cherry-code-block-custom-btn {
5650
5654
  width: auto;
5655
+ padding: 0 5px;
5651
5656
  }
5652
5657
  .cherry-previewer-codeBlock-hover-handler .cherry-expand-code-block {
5653
5658
  position: absolute;
5659
+ box-shadow: 5px 0 5px rgba(0, 0, 0, 0.05);
5654
5660
  width: 25px;
5655
5661
  text-align: center;
5656
5662
  height: 25px;
5657
- border: 1px solid #3582fb;
5658
5663
  cursor: pointer;
5659
5664
  float: right;
5660
5665
  border-radius: 5px;
5661
5666
  margin-left: -27px;
5662
5667
  transition: all 0.3s;
5663
5668
  z-index: 2;
5664
- color: #3582fb;
5665
- background-color: #eee;
5666
- border-color: #3582fb;
5669
+ color: var(--toolbar-btn-color);
5670
+ background-color: var(--primary-color);
5671
+ border: 1px solid var(--base-border-color);
5667
5672
  }
5668
5673
  .cherry-previewer-codeBlock-hover-handler .cherry-expand-code-block {
5669
5674
  top: 45px;
@@ -5675,18 +5680,80 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
5675
5680
  .cherry-previewer-codeBlock-hover-handler .cherry-unExpand-code-block.hidden {
5676
5681
  display: none;
5677
5682
  }
5683
+ .cherry-previewer-codeBlock-hover-handler .cherry-code-block-custom-btn,
5684
+ .cherry-previewer-codeBlock-hover-handler .cherry-copy-code-block,
5685
+ .cherry-previewer-codeBlock-hover-handler .cherry-expand-code-block,
5686
+ .cherry-previewer-codeBlock-hover-handler .cherry-unExpand-code-block,
5687
+ .cherry-previewer-codeBlock-hover-handler .cherry-edit-code-block {
5688
+ cursor: pointer;
5689
+ transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
5690
+ transform: translateY(0);
5691
+ outline: none;
5692
+ }
5678
5693
  .cherry-previewer-codeBlock-hover-handler .cherry-code-block-custom-btn:hover,
5679
5694
  .cherry-previewer-codeBlock-hover-handler .cherry-copy-code-block:hover,
5680
5695
  .cherry-previewer-codeBlock-hover-handler .cherry-expand-code-block:hover,
5681
5696
  .cherry-previewer-codeBlock-hover-handler .cherry-unExpand-code-block:hover,
5682
5697
  .cherry-previewer-codeBlock-hover-handler .cherry-edit-code-block:hover {
5683
- color: #eee;
5684
- background-color: #3582fb;
5685
- border-color: #eee;
5698
+ color: var(--toolbar-btn-hover-color);
5699
+ background-color: var(--toolbar-btn-hover-bg);
5700
+ border-color: transparent;
5701
+ transform: translateY(-2px);
5702
+ }
5703
+ .cherry-previewer-codeBlock-hover-handler .cherry-code-block-custom-btn:active,
5704
+ .cherry-previewer-codeBlock-hover-handler .cherry-copy-code-block:active,
5705
+ .cherry-previewer-codeBlock-hover-handler .cherry-expand-code-block:active,
5706
+ .cherry-previewer-codeBlock-hover-handler .cherry-unExpand-code-block:active,
5707
+ .cherry-previewer-codeBlock-hover-handler .cherry-edit-code-block:active {
5708
+ color: var(--toolbar-btn-hover-color);
5709
+ transform: translateY(0);
5710
+ box-shadow: none;
5711
+ background-color: var(--toolbar-btn-active-bg);
5712
+ transition-duration: 0.1s;
5713
+ }
5714
+ .cherry-previewer-codeBlock-hover-handler .cherry-code-block-custom-btn:focus-visible,
5715
+ .cherry-previewer-codeBlock-hover-handler .cherry-copy-code-block:focus-visible,
5716
+ .cherry-previewer-codeBlock-hover-handler .cherry-expand-code-block:focus-visible,
5717
+ .cherry-previewer-codeBlock-hover-handler .cherry-unExpand-code-block:focus-visible,
5718
+ .cherry-previewer-codeBlock-hover-handler .cherry-edit-code-block:focus-visible {
5719
+ box-shadow: 0 0 0 2px var(--base-previewer-bg), 0 0 0 4px var(--primary-color);
5686
5720
  }
5687
5721
  .cherry-previewer-codeBlock-hover-handler .cherry-code-preview-lang-select {
5688
- position: absolute;
5689
- transform: translate(2px, -50%);
5722
+ appearance: none;
5723
+ -webkit-appearance: none;
5724
+ font-size: 14px;
5725
+ color: var(--base-font-color);
5726
+ background-color: var(--toolbar-bg);
5727
+ border: 1px solid var(--base-border-color);
5728
+ border-radius: 6px;
5729
+ padding: 6px 36px 6px 12px;
5730
+ cursor: pointer;
5731
+ transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
5732
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23495057' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
5733
+ background-repeat: no-repeat;
5734
+ background-position: right 12px center;
5735
+ background-size: 12px 12px;
5736
+ }
5737
+ .cherry-previewer-codeBlock-hover-handler .cherry-code-preview-lang-select:focus {
5738
+ border-color: var(--primary-color);
5739
+ outline: 0;
5740
+ box-shadow: 0 0 0 2px var(--base-previewer-bg), 0 0 0 4px var(--primary-color);
5741
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23495057' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 11 6-6 6 6'/%3e%3c/svg%3e");
5742
+ }
5743
+ .cherry-previewer-codeBlock-hover-handler .cherry-code-preview-lang-select option {
5744
+ color: var(--base-font-color);
5745
+ font-size: 14px;
5746
+ background-color: var(--toolbar-bg);
5747
+ cursor: cursor;
5748
+ }
5749
+ .cherry-previewer-codeBlock-hover-handler .cherry-code-preview-lang-select option:hover {
5750
+ background-color: var(--toolbar-btn-hover-bg);
5751
+ color: var(--toolbar-btn-hover-color);
5752
+ }
5753
+ .cherry-previewer-codeBlock-hover-handler .cherry-code-preview-lang-select:disabled {
5754
+ background-color: var(--base-border-color);
5755
+ color: var(--base-font-color);
5756
+ cursor: not-allowed;
5690
5757
  }
5691
5758
 
5692
5759
  .float-previewer-wrap {
@@ -6216,7 +6283,7 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
6216
6283
  /* ========== 基础色彩变量覆盖 ========== */
6217
6284
  --primary-color: var(--oc-blue-6);
6218
6285
  --secondary-color: var(--oc-blue-0);
6219
- --base-font-color: var(--oc-gray-7);
6286
+ --base-font-color: var(--oc-gray-4);
6220
6287
  --base-editor-bg: var(--oc-white);
6221
6288
  --base-previewer-bg: var(--oc-white);
6222
6289
  --base-border-color: var(--oc-gray-3);
@@ -6225,6 +6292,7 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
6225
6292
  --toolbar-btn-color: var(--oc-gray-4);
6226
6293
  --toolbar-btn-hover-bg: var(--oc-gray-2);
6227
6294
  --toolbar-btn-hover-color: var(--oc-blue-4);
6295
+ --toolbar-btn-active-bg:var(--oc-gray-5);
6228
6296
  --toolbar-split-color: var(--oc-blue-5);
6229
6297
  /* ========== 编辑器相关变量 ========== */
6230
6298
  --editor-header-color: var(--primary-color);
@@ -6302,6 +6370,7 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
6302
6370
  --toolbar-btn-color: var(--oc-gray-4);
6303
6371
  --toolbar-btn-hover-bg: var(--oc-gray-6);
6304
6372
  --toolbar-btn-hover-color: var(--oc-white);
6373
+ --toolbar-btn-active-bg:var(--oc-gray-8);
6305
6374
  --toolbar-split-color: var(--oc-gray-5);
6306
6375
  /* ========== 编辑器相关变量 ========== */
6307
6376
  --editor-header-color: var(--primary-color);
@@ -6450,6 +6519,7 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
6450
6519
  --toolbar-btn-color: var(--oc-gray-8);
6451
6520
  --toolbar-btn-hover-bg: var(--primary-color);
6452
6521
  --toolbar-btn-hover-color: var(--oc-white);
6522
+ --toolbar-btn-active-bg: var(--primary-color);
6453
6523
  --toolbar-split-color: var(--oc-blue-5);
6454
6524
  /* ========== 编辑器相关变量 ========== */
6455
6525
  --editor-header-color: var(--primary-color);
@@ -6503,6 +6573,7 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
6503
6573
  --toolbar-btn-color: var(--primary-color);
6504
6574
  --toolbar-btn-hover-bg: var(--oc-green-5);
6505
6575
  --toolbar-btn-hover-color: var(--secondary-color);
6576
+ --toolbar-btn-active-bg:var(--oc-green-7);
6506
6577
  --toolbar-split-color: var(--oc-green-8);
6507
6578
  /* ========== 编辑器相关变量 ========== */
6508
6579
  --editor-header-color: var(--oc-green-7);
@@ -6579,6 +6650,7 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
6579
6650
  --toolbar-btn-color: var(--oc-pink-8);
6580
6651
  --toolbar-btn-hover-bg: var(--oc-pink-5);
6581
6652
  --toolbar-btn-hover-color: var(--oc-pink-0);
6653
+ --toolbar-btn-active-bg: var(--oc-pink-7);
6582
6654
  --toolbar-split-color: var(--oc-pink-8);
6583
6655
  --dropdown-bg: var(--oc-white);
6584
6656
  /* ========== 编辑器相关变量 ========== */
@@ -6637,6 +6709,7 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
6637
6709
  --toolbar-btn-color: var(--primary-color);
6638
6710
  --toolbar-btn-hover-bg: var(--oc-violet-5);
6639
6711
  --toolbar-btn-hover-color: var(--oc-violet-0);
6712
+ --toolbar-btn-active-bg: var(--oc-violet-7);
6640
6713
  --toolbar-split-color: var(--oc-violet-8);
6641
6714
  /* ========== 编辑器相关变量 ========== */
6642
6715
  --editor-header-color: var(--oc-violet-7);
@@ -6700,6 +6773,7 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
6700
6773
  --toolbar-btn-color: var(--oc-indigo-7);
6701
6774
  --toolbar-btn-hover-bg: var(--oc-violet-3);
6702
6775
  --toolbar-btn-hover-color: var(--oc-white);
6776
+ --toolbar-btn-active-bg:var(--oc-blue-5);
6703
6777
  --toolbar-split-color: var(--oc-indigo-4);
6704
6778
  --dropdown-bg: var(--oc-white);
6705
6779
  /* ========== 编辑器相关变量 ========== */