From 074d9156771a8d2ce005dd5ed7ec3889bbe01eae Mon Sep 17 00:00:00 2001 From: francesco Date: Fri, 16 Feb 2024 16:24:51 +0100 Subject: [PATCH] fix background gray colors --- css/crisp.css | 40 +++++++++++++++++++++++++++------------- css/crisp.css.map | 2 +- css/crisp.min.css | 2 +- css/crisp.scss | 34 ++++++++++++++++++++++++++++++---- 4 files changed, 59 insertions(+), 19 deletions(-) diff --git a/css/crisp.css b/css/crisp.css index 96877fa..580eb0c 100644 --- a/css/crisp.css +++ b/css/crisp.css @@ -102,39 +102,30 @@ th, td { background: #111; color: #bbb; } - a:link { color: #9bf; } - a:visited { color: #caf; } - a:focus, a:hover { color: #9cf; } - a:active { color: #faa; } - pre, code, samp, kbd { color: #6cf; } - pre kbd { color: #9c6; } - pre, blockquote { background: #000; } - blockquote { border-color: #333; } - th, td { border-color: #666; } @@ -160,7 +151,7 @@ input:focus, textarea:focus, select:focus { } input, textarea { - padding: 4px 5px; + padding: 5px 5px; width: calc(100% - 14px); } @@ -170,7 +161,7 @@ pre, textarea { select { width: 100%; - padding: 3px 1px; + padding: 5px 1px; } input, select, button { @@ -195,18 +186,35 @@ pre, code, samp, kbd { color: #555555; } +@media (prefers-color-scheme: dark) { + pre, code, samp, kbd { + color: #555555 !important; + } +} pre, blockquote { background: #f2f2f2; padding: 0.5em 0.75em 0.6em 0.75em; } +@media (prefers-color-scheme: dark) { + pre, blockquote { + color: #555555; + background: #d2d2d2; + } +} section { border-radius: 8px; - border: 2px dashed #cccccc; + border: 2px dashed #aaaaaa; background: #f2f2f2; - padding: 1em; + padding: 0.9em 1.2em; } +@media (prefers-color-scheme: dark) { + section { + color: #555555; + background: #d2d2d2; + } +} figcaption { color: #999999; } @@ -215,4 +223,10 @@ blockquote { border-left: 4px solid #ccc; } +@media (prefers-color-scheme: dark) { + input, textarea, select { + background: #d2d2d2; + } +} + /*# sourceMappingURL=crisp.css.map */ diff --git a/css/crisp.css.map b/css/crisp.css.map index eb5395d..7db3a87 100644 --- a/css/crisp.css.map +++ b/css/crisp.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../node_modules/spcss/sp.css","crisp.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;AAAA;EAEE;;;AAEF;EACE;EACA;;;AAEF;AAAA;EAEE;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;IACE;IACA;;;EAEF;IACE;;;EAEF;IACE;;;EAEF;IACE;;;EAEF;IACE;;;EAEF;IACE;;;EAEF;IACE;;;EAEF;IACE;;;EAEF;IACE;;;EAEF;IACE;;;ACzGJ;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE","file":"crisp.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../node_modules/spcss/sp.css","crisp.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;AAAA;EAEE;;;AAEF;EACE;EACA;;;AAEF;AAAA;EAEE;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;IACE;IACA;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;;;ACzGJ;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;IACE;;;AAIJ;EACE;EACA;;;AAGF;EACE;IACE;IACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;IACE;IACA;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;IACE","file":"crisp.css"} \ No newline at end of file diff --git a/css/crisp.min.css b/css/crisp.min.css index b330e0c..b1e280c 100644 --- a/css/crisp.min.css +++ b/css/crisp.min.css @@ -1 +1 @@ -body{color:#333;font-family:helvetica,arial,sans-serif;line-height:1.5;margin:0 auto;max-width:40em;padding:0 1em}h1,h2,h3,h4,h5,h6{margin:1.25em 0 .5em;line-height:1.2}a:link{color:#00e}a:visited{color:#518}a:focus,a:hover{color:#03f}a:active{color:#e00}h1 a:empty:before,h2 a:empty:before,h3 a:empty:before,h4 a:empty:before,h5 a:empty:before,h6 a:empty:before{content:"#"}h1 a:empty,h2 a:empty,h3 a:empty,h4 a:empty,h5 a:empty,h6 a:empty{visibility:hidden;padding-left:.25em}h1:hover a:empty,h2:hover a:empty,h3:hover a:empty,h4:hover a:empty,h5:hover a:empty,h6:hover a:empty{visibility:visible}img{max-width:100%}figure{margin:1em 0;text-align:center}figcaption{font-size:small;color:#999}code,kbd,pre,samp{font-family:monospace,monospace}pre kbd{color:#060}blockquote,pre{background:#eee}pre{overflow:auto}blockquote{margin:1em 0}blockquote :first-child{margin-top:0}blockquote :last-child{margin-bottom:0}table{border-collapse:collapse}td,th{border:thin solid #999;padding:.3em .4em;text-align:left}@media (prefers-color-scheme:dark){body{background:#111;color:#bbb}a:link{color:#9bf}a:visited{color:#caf}a:focus,a:hover{color:#9cf}a:active{color:#faa}code,kbd,pre,samp{color:#6cf}pre kbd{color:#9c6}blockquote,pre{background:#000}blockquote{border-color:#333}td,th{border-color:#666}}body{font-size:16px}a>img{vertical-align:middle}input,select,textarea{border:2px solid #ccc;background:#fff;border-radius:4px;display:block;margin-bottom:1em}input:focus,select:focus,textarea:focus{outline:0!important;border-color:#999}input,textarea{padding:4px 5px;width:calc(100% - 14px)}pre,textarea{font-size:15px}select{width:100%;padding:3px 1px}button,input,select{font-size:16px}button{border:2px solid #ccc;border-radius:4px;padding:4px 32px}button:active{background:#ddd}button,pre,section{background:#f2f2f2}blockquote,pre{padding:.5em .75em .6em}pre{border:1px solid #ccc}code,kbd,pre,samp{color:#555}blockquote{background:#f2f2f2;border-left:4px solid #ccc}section{border-radius:8px;border:2px dashed #ccc;padding:1em} \ No newline at end of file +body{color:#333;font-family:helvetica,arial,sans-serif;line-height:1.5;margin:0 auto;max-width:40em;padding:0 1em}h1,h2,h3,h4,h5,h6{margin:1.25em 0 .5em;line-height:1.2}a:link{color:#00e}a:visited{color:#518}a:focus,a:hover{color:#03f}a:active{color:#e00}h1 a:empty:before,h2 a:empty:before,h3 a:empty:before,h4 a:empty:before,h5 a:empty:before,h6 a:empty:before{content:"#"}h1 a:empty,h2 a:empty,h3 a:empty,h4 a:empty,h5 a:empty,h6 a:empty{visibility:hidden;padding-left:.25em}h1:hover a:empty,h2:hover a:empty,h3:hover a:empty,h4:hover a:empty,h5:hover a:empty,h6:hover a:empty{visibility:visible}img{max-width:100%}figure{margin:1em 0;text-align:center}figcaption{font-size:small;color:#999}code,kbd,pre,samp{font-family:monospace,monospace}pre kbd{color:#060}blockquote,pre{background:#eee}pre{overflow:auto}blockquote{margin:1em 0}blockquote :first-child{margin-top:0}blockquote :last-child{margin-bottom:0}table{border-collapse:collapse}td,th{border:thin solid #999;padding:.3em .4em;text-align:left}@media (prefers-color-scheme:dark){body{background:#111;color:#bbb}a:link{color:#9bf}a:visited{color:#caf}a:focus,a:hover{color:#9cf}a:active{color:#faa}code,kbd,pre,samp{color:#6cf}pre kbd{color:#9c6}blockquote,pre{background:#000}blockquote{border-color:#333}td,th{border-color:#666}}body{font-size:16px}a>img{vertical-align:middle}input,select,textarea{border:2px solid #ccc;background:#fff;border-radius:4px;display:block;margin-bottom:1em}input:focus,select:focus,textarea:focus{outline:0!important;border-color:#999}input,textarea{padding:5px;width:calc(100% - 14px)}pre,textarea{font-size:15px}select{width:100%;padding:5px 1px}button,input,select{font-size:16px}button{border:2px solid #ccc;border-radius:4px;background:#f2f2f2;padding:4px 32px}button:active{background:#ddd}pre{border:1px solid #ccc}code,kbd,pre,samp{color:#555}@media (prefers-color-scheme:dark){code,kbd,pre,samp{color:#555!important}}blockquote,pre,section{background:#f2f2f2;padding:.5em .75em .6em}@media (prefers-color-scheme:dark){blockquote,pre{color:#555;background:#d2d2d2}}section{border-radius:8px;border:2px dashed #aaa;padding:.9em 1.2em}@media (prefers-color-scheme:dark){section{color:#555;background:#d2d2d2}}blockquote{border-left:4px solid #ccc}@media (prefers-color-scheme:dark){input,select,textarea{background:#d2d2d2}} \ No newline at end of file diff --git a/css/crisp.scss b/css/crisp.scss index d0b6af9..ad9d963 100644 --- a/css/crisp.scss +++ b/css/crisp.scss @@ -23,7 +23,7 @@ input, textarea, select { } input, textarea { - padding: 4px 5px; + padding: 5px 5px; width: calc(100% - 14px); } @@ -33,7 +33,7 @@ pre, textarea { select { width: 100%; - padding: 3px 1px; + padding: 5px 1px; } input, select, button { @@ -59,16 +59,36 @@ pre, code, samp, kbd { color: #555555; } +@media (prefers-color-scheme: dark) { + pre, code, samp, kbd { + color: #555555 !important; + } +} + pre, blockquote { background: #f2f2f2; padding: 0.5em 0.75em 0.6em 0.75em; } +@media (prefers-color-scheme: dark) { + pre, blockquote { + color: #555555; + background: #d2d2d2; + } +} + section { border-radius: 8px; - border: 2px dashed #cccccc; + border: 2px dashed #aaaaaa; background: #f2f2f2; - padding: 1em; + padding: 0.9em 1.2em; +} + +@media (prefers-color-scheme: dark) { + section { + color: #555555; + background: #d2d2d2; + } } figcaption { @@ -78,3 +98,9 @@ figcaption { blockquote { border-left: 4px solid #ccc; } + +@media (prefers-color-scheme: dark) { + input, textarea, select { + background: #d2d2d2; + } +}