色廃止 線だけ

Author: penicillin0

js/scrapboxCssScript.js

@@ -64,25 +64,18 @@ const insertIndentCSSRule = (scrapboxIndentOptions) => {
   });
 };
 
-const indentColorCSS = [
+const indentLineCSS = [
   `.app:not(.presentation) .indent-mark .char-index:not(:nth-last-child(1)):not(:nth-last-child(2)) { position: relative; }`,
   `.app:not(.presentation) .indent-mark .char-index:not(:nth-last-child(1)):not(:nth-last-child(2))::before {
       content: " ";
       position: absolute;
-      left: 44%;
+      left: 43%;
+      margin: -4px 0;
       border-left: 2px solid #dcdcdc;
-      z-index: 999;
-    }`,
-  `.app:not(.presentation) .indent-mark .char-index:not(:nth-last-child(1)):not(:nth-last-child(2))::after {
-      background-color: #f5f5f5;
-      content: " ";
-      width: 24px;
-      left: 0;
-      position: absolute;
     }`,
 ];
 
-const insertIndentColorCSSRule = (isColoring) => {
+const insertIndentLineCSSRule = (isLining) => {
   // delete existing rules
   const cssRules = document.styleSheets[0].cssRules;
   const cssRulesNum = cssRules.length;
@@ -102,8 +95,8 @@ const insertIndentColorCSSRule = (isColoring) => {
   }
 
   // insert new rules
-  if (isColoring) {
-    indentColorCSS.map((css) => {
+  if (isLining) {
+    indentLineCSS.map((css) => {
       document.styleSheets[0].insertRule(css);
     });
   }
@@ -116,10 +109,10 @@ const makerAttachment = () => {
   });
 };
 
-const coloringAttachment = () => {
-  chrome.storage.local.get('scrapboxIndentColoring', (result) => {
-    const isColoring = result.scrapboxIndentColoring;
-    insertIndentColorCSSRule(isColoring);
+const liningAttachment = () => {
+  chrome.storage.local.get('scrapboxIndentLining', (result) => {
+    const isLining = result.scrapboxIndentLining;
+    insertIndentLineCSSRule(isLining);
   });
 };
 
@@ -128,11 +121,11 @@ chrome.runtime.onMessage.addListener((request) => {
   if (request === 'scrapbox_list_maker') {
     makerAttachment();
   }
-  if (request === 'scrapbox_indent_coloring') {
-    coloringAttachment();
+  if (request === 'scrapbox_indent_lining') {
+    liningAttachment();
   }
 });
 
 // initialize
 makerAttachment();
-coloringAttachment();
+liningAttachment();

src/components/Console.tsx

@@ -24,7 +24,7 @@ type Props = Record<string, never>;
 export const Console: React.FC<Props> = () => {
   const [indentOptions, setIndentOptions] =
     useState<IndentOptionsType>(initialState);
-  const [indentColoring, setIndentColoring] = useState<boolean>(false);
+  const [indentLining, setIndentLining] = useState<boolean>(false);
 
   useEffect(() => {
     chrome.storage.local.get('scrapboxIndentOption', (result) => {
@@ -38,28 +38,28 @@ export const Console: React.FC<Props> = () => {
       }
     });
 
-    chrome.storage.local.get('scrapboxIndentColoring', (result) => {
-      const scrapboxIndentColoring = result.scrapboxIndentColoring;
+    chrome.storage.local.get('scrapboxIndentLining', (result) => {
+      const scrapboxIndentLining = result.scrapboxIndentLining;
 
-      if (!scrapboxIndentColoring) {
-        chrome.storage.local.set({ scrapboxIndentColoring: false });
-        setIndentColoring(false);
+      if (!scrapboxIndentLining) {
+        chrome.storage.local.set({ scrapboxIndentLining: false });
+        setIndentLining(false);
       } else {
-        setIndentColoring(scrapboxIndentColoring);
+        setIndentLining(scrapboxIndentLining);
       }
     });
   }, []);
 
-  const handleIndentColoringChange = (checked: boolean) => {
-    chrome.storage.local.set({ scrapboxIndentColoring: checked });
-    setIndentColoring(checked);
+  const handleIndentLiningChange = (checked: boolean) => {
+    chrome.storage.local.set({ scrapboxIndentLining: checked });
+    setIndentLining(checked);
 
     chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
       tabs.forEach((tab) => {
         if (tab.url === undefined || tab.id === undefined) return;
         const url = new URL(tab.url);
         if (url.hostname === 'scrapbox.io') {
-          chrome.tabs.sendMessage(tab.id, 'scrapbox_indent_coloring');
+          chrome.tabs.sendMessage(tab.id, 'scrapbox_indent_lining');
         }
       });
     });
@@ -107,8 +107,8 @@ export const Console: React.FC<Props> = () => {
         <Title>Select Favorite List Maker</Title>
         <SwitchLabel>
           <Switch
-            checked={indentColoring}
-            onChange={handleIndentColoringChange}
+            checked={indentLining}
+            onChange={handleIndentLiningChange}
             onColor="#00b428"
             boxShadow="0px 1px 5px rgba(0, 0, 0, 0.6)"
             height={16}
@@ -144,7 +144,7 @@ export const Console: React.FC<Props> = () => {
           );
         })}
       </IndentContainer>
-      <Demonstration isGrey={indentColoring} indentOptions={indentOptions} />
+      <Demonstration hasLine={indentLining} indentOptions={indentOptions} />
     </MainContainer>
   );
 };

src/components/Demonstration.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { IndentOptionsType } from '../utils/types';
 
 type Props = {
-  isGrey: boolean;
+  hasLine: boolean;
   indentOptions: IndentOptionsType;
 };
 
@@ -21,8 +21,8 @@ export const Demonstration: React.FC<Props> = (props) => {
                   {[...Array(spaceNum)].map((j) => {
                     return (
                       <VerticalLineIndentContainer key={j}>
-                        {props.isGrey && <VerticalLine />}
-                        <Indent isGrey={props.isGrey} />
+                        {props.hasLine && <VerticalLine />}
+                        <Indent hasLine={props.hasLine} />
                       </VerticalLineIndentContainer>
                     );
                   })}
@@ -75,18 +75,17 @@ const VerticalLineIndentContainer = styled.div`
 `;
 
 const VerticalLine = styled.div`
-  width: 0.2px;
-  height: 27px;
+  width: 1px;
+  height: 23px;
   position: absolute;
-  top: -40%;
-  left: 50%;
+  top: 0;
+  left: 45%;
   background-color: #dcdcdc;
 `;
 
-const Indent = styled.div<{ isGrey: boolean }>`
+const Indent = styled.div<{ hasLine: boolean }>`
   width: 24px;
-  height: 15px;
-  background-color: ${(props) => (props.isGrey ? '#f5f5f5' : '#fff')};
+  height: 23px;
 `;
 
 const IndentContent = styled.div`
@@ -99,7 +98,9 @@ const IndentContent = styled.div`
 
 const IndentValue = styled.span`
   font-size: 10px;
-  transform: scale(0.8);
+  transform: scale(0.75);
+  font-weight: bold;
+  color: rgba(0, 0, 0, 0.65);
 `;
 
 const IndentOption = styled.span`