From 22794d3f71082cdd10b722fd09d2420e258cfcc5 Mon Sep 17 00:00:00 2001 From: RomEYer-AwELF Date: Sun, 5 Sep 2021 10:16:02 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- view/dark.css | 83 +++++++++++++++++++++++++------------------ view/style.css | 96 +++++++++++++++++++++++++++++--------------------- 2 files changed, 104 insertions(+), 75 deletions(-) diff --git a/view/dark.css b/view/dark.css index bc888e3..595c551 100644 --- a/view/dark.css +++ b/view/dark.css @@ -88,7 +88,7 @@ body { } .mainbtn:hover { - background: rgb(255, 120, 120); + background: #ff7878; color: #fff; transition: all .4s ease 0s; } @@ -154,6 +154,7 @@ body { padding: 0; overflow: auto; transform: translateX(-50%); + text-align: center; } .selectlist > li { @@ -170,23 +171,16 @@ body { user-select: none; } -.grade1b, -.grade2b, -.grade3b { - padding-left: 1.5rem; - box-sizing: border-box; -} - .grade0b { - background-color: rgb(70, 70, 70); + background-color: #464646; border: #f8f8f8 2px solid !important; } .grade1b { - background-color: rgb(116, 191, 255); + background-color: #6495ed; border: #f8f8f8 2px solid !important; } .grade2b { - background-color: rgb(226, 167, 255); + background-color: #e2a7ff; border: #f8f8f8 2px solid !important; } .grade3b { @@ -194,47 +188,65 @@ body { border: #f8f8f8 2px solid !important; } -.grade0b:hover { - background-color: rgb(202, 202, 202); - color: #3b3b3b; - transition: all .4s ease 0s; +@media (min-width:1080px) { + .grade0b:hover { + background-color: #c0c0c0; + color: #3b3b3b; + transition: all .3s ease 0s; + } + .grade1b:hover { + background-color: #87cefa; + color: #3b3b3b; + transition: all .3s ease 0s; + } + .grade2b:hover { + background-color: #e7beff; + color: #3b3b3b; + transition: all .3s ease 0s; + } + .grade3b:hover { + background-color: #f7a989; + color: #3b3b3b; + transition: all .3s ease 0s; + } } -.grade1b:hover { - background-color: rgb(159, 207, 248); - color: #3b3b3b; - transition: all .4s ease 0s; -} -.grade2b:hover { - background-color: rgb(240, 212, 255); - color: #3b3b3b; - transition: all .4s ease 0s; -} -.grade3b:hover { - background-color: #f7a989; - color: #3b3b3b; - transition: all .4s ease 0s; -} - .grade0b.selected { - background-color: rgb(202, 202, 202) !important; + background-color: #c0c0c0 !important; + box-shadow: #ccc 0px 0px 10px; color: #3b3b3b; } .grade1b.selected { - background-color: rgb(198, 229, 255) !important; + background-color: #87cefa !important; + box-shadow: #ccc 0px 0px 10px; color: #3b3b3b; } .grade2b.selected { - background-color: rgb(240, 212, 255) !important; + background-color: #e7beff !important; + box-shadow: #ccc 0px 0px 10px; color: #3b3b3b; } .grade3b.selected { background-color: #f1bfac !important; + box-shadow: #ccc 0px 0px 10px; color: #3b3b3b; } +.judge > li.grade1 span, +.judge > li.grade1{ + background-color: #87cefa; +} +.judge > li.grade2 span, +.judge > li.grade2{ + background-color: #e7beff; +} +.judge > li.grade3 span, +.judge > li.grade3{ + background-color: #f7a989; +} + .propinitial { top: 5rem; bottom: 14rem; @@ -307,13 +319,14 @@ body { width: calc(100% - 9rem); margin: 0.5rem; padding: 0.5rem 1rem 0.5rem 7rem; + border-radius: 10px; } .judge > li > span { - background-color: #393E46; height: calc(100% - 1rem); padding: 0.5rem 0; top: 0; + border-radius: 10px; } diff --git a/view/style.css b/view/style.css index 6f21d5d..1017b2f 100644 --- a/view/style.css +++ b/view/style.css @@ -85,7 +85,7 @@ body { } .mainbtn:hover { - background: rgb(255, 120, 120); + background: #ff7878; color: #fff; transition: all .4s ease 0s; } @@ -150,6 +150,7 @@ body { padding: 0; overflow: auto; transform: translateX(-50%); + text-align: center; } .selectlist > li { @@ -165,23 +166,16 @@ body { user-select: none; } -.grade1b, -.grade2b, -.grade3b { - padding-left: 1.5rem; - box-sizing: border-box; -} - .grade0b { - background-color: rgb(237, 237, 237); + background-color: #ededed; border: #c5c5c5 2px solid !important; } .grade1b { - background-color: rgb(116, 191, 255); + background-color: #7ea5ec; border: #c5c5c5 2px solid !important; } .grade2b { - background-color: rgb(226, 167, 255); + background-color: #e2a7ff; border: #c5c5c5 2px solid !important; } .grade3b { @@ -189,41 +183,62 @@ body { border: #c5c5c5 2px solid !important; } -.grade0b:hover { - background-color: rgb(160, 160, 160); - transition: all .4s ease 0s; -} -.grade1b:hover { - background-color: rgb(159, 207, 248); - transition: all .4s ease 0s; -} -.grade2b:hover { - background-color: rgb(240, 212, 255); - transition: all .4s ease 0s; -} -.grade3b:hover { - background-color: #f7a989; - transition: all .4s ease 0s; -} +@media (min-width:1080px) { + .grade0b:hover { + background-color: #868686; + transition: all .3s ease 0s; + } + .grade1b:hover { + background-color: #5d90ff; + transition: all .3s ease 0s; + } + + .grade2b:hover { + background-color: #bc72ec; + transition: all .3s ease 0s; + } + + .grade3b:hover { + background-color: #e09074; + transition: all .3s ease 0s; + } +} .grade0b.selected { - background-color: rgb(160, 160, 160); - color: #3b3b3b; + background-color: #444; + box-shadow: #bbb 0px 0px 10px; + color: #fff; } .grade1b.selected { - background-color: rgb(159, 207, 248); - color: #3b3b3b; + background-color: #407dec; + box-shadow: #bbb 0px 0px 10px; + color: #fff; } .grade2b.selected { - background-color: rgb(240, 212, 255); - color: #3b3b3b; + background-color: #b362e7; + box-shadow: #bbb 0px 0px 10px; + color: #fff; } .grade3b.selected { - background-color: #f7a989; - color: #3b3b3b; + background-color: #ff7f4d; + box-shadow: #bbb 0px 0px 10px; + color: #fff; +} + +.judge > li.grade1 span, +.judge > li.grade1{ + background-color: #7ea5ec; +} +.judge > li.grade2 span, +.judge > li.grade2{ + background-color: #e2a7ff; +} +.judge > li.grade3 span, +.judge > li.grade3{ + background-color: #ffa07a; } .propinitial { @@ -265,9 +280,9 @@ body { } .lifeTrajectory { - border: 1px lightblue solid; + border: 1px #a7a7a7 solid; border-radius: 10px; - background-color: aliceblue; + background-color: #ffffff; } .judge > li, @@ -277,8 +292,8 @@ body { margin: 0.5rem 0; padding: 0.5rem 1rem 0.5rem 6rem; font-size: 1.4rem; - background-color: white; - box-shadow: lightblue 0 0 0.4rem; + background-color: #fff; + box-shadow: #a7a7a7 0 0 0.4rem; user-select: none; } @@ -295,13 +310,14 @@ body { width: calc(100% - 9rem); margin: 0.5rem; padding: 0.5rem 1rem 0.5rem 7rem; + border-radius: 10px; } .judge > li > span { - background-color: white; height: calc(100% - 1rem); padding: 0.5rem 0; top: 0; + border-radius: 10px; }