From d15d6f2883bf3fc5279fa40e0db04c0eb0a7eda2 Mon Sep 17 00:00:00 2001 From: MAEDA Go Date: Sat, 27 Sep 2025 16:48:23 +0900 Subject: [PATCH 3/3] Replace hex color codes with Open Color variables in Wiki syntax help CSS files --- app/assets/stylesheets/wiki_syntax.css | 24 ++++++----- .../stylesheets/wiki_syntax_detailed.css | 41 ++++++++++--------- 2 files changed, 35 insertions(+), 30 deletions(-) diff --git a/app/assets/stylesheets/wiki_syntax.css b/app/assets/stylesheets/wiki_syntax.css index 89b117419..d463bc0b4 100644 --- a/app/assets/stylesheets/wiki_syntax.css +++ b/app/assets/stylesheets/wiki_syntax.css @@ -1,3 +1,5 @@ +@import url('/open-color.css'); + @font-face { font-family: "Noto Sans"; src: url("/NotoSans-Regular.woff2") format("woff2"); @@ -34,36 +36,36 @@ --fonts-main: "Noto Sans", sans-serif; } -h1 { font-family: var(--fonts-main); font-size: 0.875rem; text-align: center; color: #444; } -body { font-family: var(--fonts-main); font-size: 0.75rem; color: #444; } +h1 { font-family: var(--fonts-main); font-size: 0.875rem; text-align: center; color: var(--oc-gray-8); } +body { font-family: var(--fonts-main); font-size: 0.75rem; color: var(--oc-gray-8); } pre, code {font-family: Consolas, Menlo, "Liberation Mono", Courier, monospace; } table th { padding-top: 1em; } table th img { - border: 1px solid #bbb; + border: 1px solid var(--oc-gray-5); opacity: 0.7; } table th .syntax-pre { display: inline-block; - border: 1px solid #bbb; + border: 1px solid var(--oc-gray-5); width: 18px; height: 18px; } table th .syntax-pre:before { content: "pre"; font-size: 0.625rem; - color: #666; + color: var(--oc-gray-7); } -table td { background-color: #f5f5f5; height: 2em; vertical-align: middle;} +table td { background-color: var(--oc-gray-0); height: 2em; vertical-align: middle;} table td code { font-size: 1.2em; } table td h1 { font-size: 1.8em; text-align: left; } table td h2 { font-size: 1.4em; text-align: left; } table td h3 { font-size: 1.2em; text-align: left; } table.sample { border-collapse: collapse; border-spacing: 0; margin: 4px; } -table.sample th, table.sample td { border: solid 1px #bbb; padding: 4px; height: 1em; } +table.sample th, table.sample td { border: solid 1px var(--oc-gray-5); padding: 4px; height: 1em; } -a, a:link, a:visited{ color: #169; text-decoration: none; } -a:hover, a:active{ color: #c61a1a; text-decoration: underline;} +a, a:link, a:visited{ color: var(--oc-blue-9); text-decoration: none; } +a:hover, a:active{ color: var(--oc-red-9); text-decoration: underline;} .syntaxhl .mi { color: #0000DD; font-weight: bold } .syntaxhl .nf { color: #0066BB; font-weight: bold } @@ -81,5 +83,5 @@ span.more_info { font-weight: normal; } .markdown-alert-title { font-weight: bold; } -.markdown-alert-note { border-color: #169; } -.markdown-alert-note .markdown-alert-title { color: #1e40af; } \ No newline at end of file +.markdown-alert-note { border-color: var(--oc-indigo-7); } +.markdown-alert-note .markdown-alert-title { color: var(--oc-indigo-9); } \ No newline at end of file diff --git a/app/assets/stylesheets/wiki_syntax_detailed.css b/app/assets/stylesheets/wiki_syntax_detailed.css index ad3c8c65f..e29c47574 100644 --- a/app/assets/stylesheets/wiki_syntax_detailed.css +++ b/app/assets/stylesheets/wiki_syntax_detailed.css @@ -1,3 +1,5 @@ +@import url('/open-color.css'); + @font-face { font-family: "Noto Sans"; src: url("/NotoSans-Regular.woff2") format("woff2"); @@ -34,25 +36,26 @@ --fonts-main: "Noto Sans", sans-serif; } -body { font-family: var(--fonts-main); font-size: 0.875rem; color:#333; line-height: 1.6;} +body { font-family: var(--fonts-main); font-size: 0.875rem; color: var(--oc-gray-9); line-height: 1.6;} pre, code { font-family: Consolas, Menlo, "Liberation Mono", Courier, monospace; } pre { margin: 1em 1em 1em 1.6em; - padding: 2px; - background-color: #fafafa; - border: 1px solid #e2e2e2; + padding: 8px; + background-color: var(--oc-gray-0); + border: 1px solid var(--oc-gray-4); + border-radius: 3px; width: auto; overflow-x: auto; overflow-y: hidden; line-height: normal; } -a, a:link, a:visited{ color: #169; text-decoration: none; } -a:hover, a:active{ color: #c61a1a; text-decoration: underline;} -a.new { color: #b73535; } +a, a:link, a:visited{ color: var(--oc-blue-9); text-decoration: none; } +a:hover, a:active{ color: var(--oc-red-9); text-decoration: underline;} +a.new { color: var(--oc-red-9); } table.sample { border-collapse: collapse; border-spacing: 0; margin: 4px; margin-left: 30px;} -table.sample th, table.sample td { border: solid 1px #bbb; padding: 4px; height: 1em; } -table.list td { background-color: #f5f5f5; vertical-align: middle; padding: 0.3em;} +table.sample th, table.sample td { border: solid 1px var(--oc-gray-5); padding: 4px; height: 1em; } +table.list td { background-color: var(--oc-gray-0); vertical-align: middle; padding: 0.3em;} .syntaxhl .c1 { color: #888888 } .syntaxhl .k { color: #008800; font-weight: bold } @@ -73,13 +76,13 @@ table.list td { background-color: #f5f5f5; vertical-align: middle; padding: 0.3e .markdown-alert-title { font-weight: bold; } -.markdown-alert-tip { border-color: #5db651; } -.markdown-alert-tip .markdown-alert-title { color: #005f00; } -.markdown-alert-important { border-color: #800080; } -.markdown-alert-important .markdown-alert-title { color: #4b006e; } -.markdown-alert-caution { border-color: #c22; } -.markdown-alert-caution .markdown-alert-title { color: #880000; } -.markdown-alert-warning { border-color: #e4bc4b; } -.markdown-alert-warning .markdown-alert-title { color: #a7760c; } -.markdown-alert-note { border-color: #169; } -.markdown-alert-note .markdown-alert-title { color: #1e40af; } \ No newline at end of file +.markdown-alert-tip { border-color: var(--oc-green-7); } +.markdown-alert-tip .markdown-alert-title { color: var(--oc-green-9); } +.markdown-alert-important { border-color: var(--oc-grape-7); } +.markdown-alert-important .markdown-alert-title { color: var(--oc-grape-9); } +.markdown-alert-caution { border-color: var(--oc-red-7); } +.markdown-alert-caution .markdown-alert-title { color: var(--oc-red-9); } +.markdown-alert-warning { border-color: var(--oc-yellow-7); } +.markdown-alert-warning .markdown-alert-title { color: var(--oc-yellow-9); } +.markdown-alert-note { border-color: var(--oc-indigo-7); } +.markdown-alert-note .markdown-alert-title { color: var(--oc-indigo-9); } -- 2.50.1