wiki:lesscss_test

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

両方とも前のリビジョン 前のリビジョン
次のリビジョン		 前のリビジョン
wiki:lesscss_test [2023/04/18 13:43] – [CodeMirror test 🤔] ともやんwiki:lesscss_test [2025/02/24 11:52] (現在) – [顔文字] ともやん
行 3: 行 3:
 ===== Dark mode test ===== ===== Dark mode test =====
 <html> <html>
-<style> +<input type="checkbox" id="chkDark"> <span>ダークモード</span>&nbsp; 
-#dw__pagetools ul.nav li a { +<input type="checkbox" id="chkVertical"> <span>縦書き</span>
-  color: inherit; +
-} +
-#dw__pagetools .menuitem svg { +
-  color: var(--text-color); +
-  fill: currentColor !important; +
-} +
-.table-striped>tbody>tr:nth-of-type(odd) { +
-  /*background-color: #f9f9f9;*/ +
-  background-color: unset; +
-} +
- +
-body.default.dw-page-on-panel, +
-div.panel { +
-  color: var(--text-color); +
-  background: var(--background-color); +
-  border-color: var(--border-color); +
-} +
-hr, .panel-default { +
-  border-color: var(--border-color); +
-} +
-.light-mode { +
-  --text-color: #333; +
-  --background-color: #fff; +
-  --border-color: #ddd; +
-} +
-.dark-mode{ +
-  --text-color: #eee; +
-  --background-color: #202124; +
-  --border-color: #666; +
-} +
-</style> +
-<input type="checkbox" id="chkDark"> <span>ダークモード</span>+
 <script> <script>
 jQuery(() =>{ jQuery(() =>{
   const chkDark = document.querySelector("#chkDark");   const chkDark = document.querySelector("#chkDark");
 +  const chkVertical = document.querySelector("#chkVertical");
  
   const setDarkAndLightMode = () => {   const setDarkAndLightMode = () => {
行 49: 行 18:
       document.body.classList.remove('dark-mode');       document.body.classList.remove('dark-mode');
       document.body.classList.add('light-mode');       document.body.classList.add('light-mode');
 +    }
 +  };
 +
 +  const setVerticalMode = () => {
 +    if (chkVertical.checked === true) {
 +      document.body.classList.add('vertical-mode');
 +    }
 +    else {
 +      document.body.classList.remove('vertical-mode');
     }     }
   };   };
行 54: 行 32:
   chkDark.addEventListener("change", () => {   chkDark.addEventListener("change", () => {
     setDarkAndLightMode();     setDarkAndLightMode();
 +  });
 +  chkVertical.addEventListener("change", () => {
 +    setVerticalMode();
   });   });
      
行 65: 行 46:
 ==== ケース 1 (color_term, color_mincode, mincode) ==== ==== ケース 1 (color_term, color_mincode, mincode) ====
 <html><style> <html><style>
-  .wrap_column {+  .wrap_grp_test .wrap_column {
     height: 290px;     height: 290px;
 +    border: 1px solid red;
 +    border-radius: 5px;
   }   }
 </style></html> </style></html>
-<WRAP group>+<WRAP group grp_test>
 <WRAP column 45% mincode> <WRAP column 45% mincode>
 ^ テーマを Dark にする  ^ ^ テーマを Dark にする  ^
行 100: 行 83:
 } }
 </code></WRAP> </code></WRAP>
 +</WRAP>
 +
  
-<WRAP column 45%> 
 ==== Notebook のセルの通し番号を振る ==== ==== Notebook のセルの通し番号を振る ====
 +<WRAP group>
 +
 +<WRAP column 45%>
 **Advanced Settings Editor:** - [Notebook]\\ **Advanced Settings Editor:** - [Notebook]\\
 +
 <WRAP color_term> <WRAP color_term>
 <WRAP color_mincode> <WRAP color_mincode>
行 121: 行 109:
 </code></WRAP> </code></WRAP>
 </WRAP> </WRAP>
 +
 </WRAP> </WRAP>
  
行 527: 行 516:
 </code></WRAP> </code></WRAP>
  
 +==== ケース 6 (.wrap_tip, .wrap_info, .wrap_important, .wrap_alert, .wrap_help 内の pre を 30% 透過) ====
 +<WRAP group>
 +<WRAP round tip column>
 +Python環境が見つかりません。バンドルされたインストーラーを使用してインストールするか、デフォルトの Python 環境を変更します
 +<html><pre>
 +⚠ Python environment not found. <code>Install using the bundled installer</code> or <code>Change the default Python environment</code>
 +</pre></html>
 +</WRAP>
 +<WRAP round info column half>
 +<html><pre>情報枠</pre></html>
 +</WRAP>
 +<WRAP round important column half>
 +<html><pre>重要枠</pre></html>
 +</WRAP>
 +<WRAP round alert column half>
 +<html><pre>警告枠</pre></html>
 +</WRAP>
 +<WRAP round help column half>
 +<html><pre>ヘルプ枠</pre></html>
 +</WRAP>
 +</WRAP>
 ==== GeSHi code test 🤔 ==== ==== GeSHi code test 🤔 ====
 <WRAP color_term> <WRAP color_term>
行 1088: 行 1098:
 </pre></html></WRAP> </pre></html></WRAP>
 </WRAP> </WRAP>
 +
 +===== 顔文字 =====
 +<html>
 +<span style="font-size: 500px">🤪</span>
 +</html>
  
 ===== 参考文献 ===== ===== 参考文献 =====
  • wiki/lesscss_test.1681793016.txt.gz
  • 最終更新: 2023/04/18 13:43
  • by ともやん