From a27d4136aeee19c5623105517e8aeeeeca903d96 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 4 Jun 2025 02:54:32 +0000 Subject: [PATCH 1/4] Initial plan for issue From d535e4cbad5c509674f6fc6460feca6208fc3cb4 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 4 Jun 2025 03:03:10 +0000 Subject: [PATCH 2/4] Implement search bar height increase to 56px with proportional font scaling Co-authored-by: unbug <799578+unbug@users.noreply.github.com> --- dist/css/app.css | 384 +++++++++++++----------------------- styles/_main-container.scss | 3 + 2 files changed, 135 insertions(+), 252 deletions(-) diff --git a/dist/css/app.css b/dist/css/app.css index 34a920dd..d6935824 100644 --- a/dist/css/app.css +++ b/dist/css/app.css @@ -5,8 +5,7 @@ *, :after, :before { - -webkit-box-sizing: border-box; - /*size not include padding and margin*/ + -webkit-box-sizing: border-box; /*size not include padding and margin*/ } html, body { @@ -22,7 +21,6 @@ body { color: #373a3c; transition: all 350ms cubic-bezier(0.4, 0, 0.2, 1); } - body.dark { background: #272b38; color: #fff; @@ -33,83 +31,74 @@ body.dark { https://everythingfonts.com/ttf-to-svg */ @font-face { - font-family: 'Dressedless Three'; + font-family: "Dressedless Three"; src: url("../fonts/Dressedless_Three.ttf") format("truetype"), url("../fonts/Dressedless_Three.svg") format("svg"); /* Legacy iOS */ } - /* latin-ext */ @font-face { - font-family: 'Lato'; + font-family: "Lato"; font-style: italic; font-weight: 400; src: local("Lato Italic"), local("Lato-Italic"), url("../fonts/LatoLatin-Italic.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } - /* latin */ @font-face { - font-family: 'Lato'; + font-family: "Lato"; font-style: italic; font-weight: 400; src: local("Lato Italic"), local("Lato-Italic"), url("../fonts/LatoLatin-Italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } - /* latin-ext */ @font-face { - font-family: 'Lato'; + font-family: "Lato"; font-style: italic; font-weight: 700; src: local("Lato Bold Italic"), local("Lato-BoldItalic"), url("../fonts/LatoLatin-BoldItalic.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } - /* latin */ @font-face { - font-family: 'Lato'; + font-family: "Lato"; font-style: italic; font-weight: 700; src: local("Lato Bold Italic"), local("Lato-BoldItalic"), url("../fonts/LatoLatin-BoldItalic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } - /* latin-ext */ @font-face { - font-family: 'Lato'; + font-family: "Lato"; font-style: normal; font-weight: 400; src: local("Lato Regular"), local("Lato-Regular"), url("../fonts/LatoLatin-Regular.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } - /* latin */ @font-face { - font-family: 'Lato'; + font-family: "Lato"; font-style: normal; font-weight: 400; src: local("Lato Regular"), local("Lato-Regular"), url("../fonts/LatoLatin-Regular.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } - /* latin-ext */ @font-face { - font-family: 'Lato'; + font-family: "Lato"; font-style: normal; font-weight: 700; src: local("Lato Bold"), local("Lato-Bold"), url("../fonts/LatoLatin-Bold.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } - /* latin */ @font-face { - font-family: 'Lato'; + font-family: "Lato"; font-style: normal; font-weight: 700; src: local("Lato Bold"), local("Lato-Bold"), url("../fonts/LatoLatin-Bold.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } - .up-first::first-letter { text-transform: uppercase; } @@ -121,7 +110,6 @@ body.dark { .hidden-link.hidden-link { color: #000; } - .hidden-link.hidden-link:hover { color: #1e70bf; } @@ -130,8 +118,7 @@ body.dark { word-break: break-all; word-break: break-word; -webkit-hyphens: auto; - -ms-hyphens: auto; - hyphens: auto; + hyphens: auto; } .fix-modal.fix-modal.fix-modal.fix-modal { @@ -140,7 +127,6 @@ body.dark { overflow: hidden; transform: translate3d(0, 0, 0); } - .fix-modal.fix-modal.fix-modal.fix-modal.fix-modal.fix-modal.fix-modal.fix-modal > .content { padding: 0.4rem 1rem; margin: 0; @@ -164,26 +150,20 @@ body.dark { overflow-y: visible; } } - .fix-dropdown-menu { -webkit-overflow-scrolling: touch; } .app .main-container .title.animated span { - -webkit-animation-duration: 0.6s; - animation-duration: 0.6s; - -webkit-animation-iteration-count: 1; - animation-iteration-count: 1; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + animation-duration: 0.6s; + animation-iteration-count: 1; + animation-fill-mode: both; + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } /*https://github.com/tobiasahlin/SpinKit*/ .spinner { - -webkit-animation: sk-rotateplane 1.2s infinite cubic-bezier(0.4, 0, 0.2, 1); - animation: sk-rotateplane 1.2s infinite cubic-bezier(0.4, 0, 0.2, 1); + animation: sk-rotateplane 1.2s infinite cubic-bezier(0.4, 0, 0.2, 1); } @-webkit-keyframes sk-rotateplane { @@ -197,7 +177,6 @@ body.dark { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg); } } - @keyframes sk-rotateplane { 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); @@ -212,17 +191,14 @@ body.dark { -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } - .app { position: relative; } - .logo { margin: 1rem auto; width: 3rem; height: 3rem; } - .logo img { display: inherit; width: 100%; @@ -234,22 +210,18 @@ body.dark { padding: 2rem 0; text-align: center; } - .app .donate form { display: inline-block; } - .app .donate .hd { - padding-bottom: .8rem; + padding-bottom: 0.8rem; text-align: center; } - .app .donate .bd { display: flex; flex-direction: row; align-items: center; } - .app .donate .zhifubao, .app .donate .wechatpay, .app .donate .paypal { @@ -258,13 +230,11 @@ body.dark { background: #fff; border-radius: 0.1rem; } - .app .nav-bar-container { position: relative; top: 0; z-index: 10; } - .app .nav-bar-container .bd { top: -0.25rem; right: 0; @@ -272,18 +242,15 @@ body.dark { display: inline-block; transition: all 1s; } - .app .nav-bar-container .bd > * { float: left; display: inline-block; cursor: pointer; margin-right: 0.4rem; } - .app .nav-bar-container .bd:last-child { margin-right: 0; } - .app .nav-bar-container .bd i { width: auto; height: auto; @@ -291,58 +258,38 @@ body.dark { font-size: 2rem; color: #70B7FD; } - .app .nav-bar-container .bd i:hover, .app .nav-bar-container .bd i:active { color: #59AAF9; } - .app .nav-bar-container .bd .github-corner { margin-top: -0.2rem; } - .app .nav-bar-container .bd .github-corner i { font-size: 2.3rem; } - .app .nav-bar-container .bd .copybook-btn { display: none; } - .app .nav-bar-container .bd > *:nth-child(1) { - -webkit-animation-duration: 500ms; - animation-duration: 500ms; - -webkit-animation-delay: 500ms; - animation-delay: 500ms; + animation-duration: 500ms; + animation-delay: 500ms; } - .app .nav-bar-container .bd > *:nth-child(2) { - -webkit-animation-duration: 500ms; - animation-duration: 500ms; - -webkit-animation-delay: 650ms; - animation-delay: 650ms; + animation-duration: 500ms; + animation-delay: 650ms; } - .app .nav-bar-container .bd > *:nth-child(3) { - -webkit-animation-duration: 500ms; - animation-duration: 500ms; - -webkit-animation-delay: 800ms; - animation-delay: 800ms; + animation-duration: 500ms; + animation-delay: 800ms; } - .app .nav-bar-container .bd > *:nth-child(4) { - -webkit-animation-duration: 500ms; - animation-duration: 500ms; - -webkit-animation-delay: 950ms; - animation-delay: 950ms; + animation-duration: 500ms; + animation-delay: 950ms; } - .app .nav-bar-container .bd > *:nth-child(5) { - -webkit-animation-duration: 500ms; - animation-duration: 500ms; - -webkit-animation-delay: 1100ms; - animation-delay: 1100ms; + animation-duration: 500ms; + animation-delay: 1100ms; } - @media screen and (min-width: 50rem) { .app .nav-bar-container { top: -0.25rem; @@ -362,26 +309,21 @@ body.dark { font-size: 3.3rem; } } - .source-code.source-code > .header { padding: 0.8rem 1rem; } - .source-code > .content pre { display: inline-block; margin: 0; padding: 0; } - .source-code > .content code { display: inline-block; color: #000; } - .source-code.source-code .ui.dropdown .menu > .item { padding: 0.4rem 0 0 0.4rem !important; } - .source-code.source-code .ui.dropdown .menu > .item:last-child { padding-bottom: 0.4rem !important; } @@ -390,114 +332,108 @@ css-doodle { position: fixed; z-index: -1; } - css-doodle.fish { --color: @p(#FDFFFC, #2EC4B6, #E71D36, #FF9F1C); --color-fade: var(--color)@repeat2(@p([0-9a-b])); --noise: @svg-filter( - - - - - - - ); + + + + + + + ); --rule: ( - :doodle { - @grid: 12x1 / 100vw 100vh; - background-position: 50%; - filter: var(--noise); - } - - @size: 100% 50%; - position: absolute; top: 25%; - transform: rotate(calc((@i() - 1) * 360deg / @size())); - - :after { - --c: var(--color); - --s: @r(5); - content: ''; - position: absolute; - @size: @r(40vmin, 61vmin) @r(12vmin, 17vmin); - border-left: @r(3px) solid @var(--c); - border-radius: 50vmin; - background: - radial-gradient(@var(--c) 50%, transparent 0%) 1vmin 42% / 3px 6px no-repeat, - radial-gradient(@var(--c) 50%, transparent 0%) 1vmin 58% / 3px 6px no-repeat, - @m20(linear-gradient(to right, @var(--c), transparent @r(50%, 80%)) 0 @r(100%) / @r(20%) 1px no-repeat), - linear-gradient(to right, @var(--c), transparent @r(50%, 80%)) 0 50% / @r(40%, 60%) 1px no-repeat, - linear-gradient(to right, rgba(255, 255, 255, .015), transparent); - transform: rotateY(0) scaleX(@var(--s)) translateZ(50vmin); - transform-origin: 0 50%; - will-change: transform; - animation: r @r(10s, 20s) linear infinite; - animation-delay: -@r(50s); - } - - @keyframes r { - to { transform: rotateY(-1turn) scaleX(@var(--s)) translateZ(50vmin) } - } - ); + :doodle { + @grid: 12x1 / 100vw 100vh; + background-position: 50%; + filter: var(--noise); + } + @size: 100% 50%; + position: absolute; top: 25%; + transform: rotate(calc((@i() - 1) * 360deg / @size())); + :after { + --c: var(--color); + --s: @r(5); + content: ""; + position: absolute; + @size: @r(40vmin, 61vmin) @r(12vmin, 17vmin); + border-left: @r(3px) solid @var(--c); + border-radius: 50vmin; + background: + radial-gradient(@var(--c) 50%, transparent 0%) 1vmin 42% / 3px 6px no-repeat, + radial-gradient(@var(--c) 50%, transparent 0%) 1vmin 58% / 3px 6px no-repeat, + @m20(linear-gradient(to right, @var(--c), transparent @r(50%, 80%)) 0 @r(100%) / @r(20%) 1px no-repeat), + linear-gradient(to right, @var(--c), transparent @r(50%, 80%)) 0 50% / @r(40%, 60%) 1px no-repeat, + linear-gradient(to right, rgba(255, 255, 255, .015), transparent); + transform: rotateY(0) scaleX(@var(--s)) translateZ(50vmin); + transform-origin: 0 50%; + will-change: transform; + animation: r @r(10s, 20s) linear infinite; + animation-delay: -@r(50s); + } + @keyframes r { + to { transform: rotateY(-1turn) scaleX(@var(--s)) translateZ(50vmin) } + } + ); } - css-doodle.candy { --rule: ( :doodle { - position: absolute; - width: 100%; - @grid: 10 / 101% 100vh; - overflow: hidden; - } - animation: bounce linear @r(7s, 15s) @r(-1s, -5s) infinite; - opacity: @r(0.3, 1); + position: absolute; + width: 100%; + @grid: 10 / 101% 100vh; + overflow: hidden; + } + animation: bounce linear @r(7s, 15s) @r(-1s, -5s) infinite; + opacity: @r(0.3, 1); + @place-cell: @r(100%) @r(100%); + @random(.3) { + :after { + content: "🍭"; + position: absolute; + font-size: @r(25px, 35px); + transform: rotate(@r(360deg)); + } + } + @random(.2) { + :after { + content: "🍫"; + position: absolute; @place-cell: @r(100%) @r(100%); - @random(.3) { - :after { - content: '🍭'; - position: absolute; - font-size: @r(25px, 35px); - transform: rotate(@r(360deg)); - } - } - @random(.2) { - :after { - content: '🍫'; - position: absolute; - @place-cell: @r(100%) @r(100%); - font-size: @r(15px, 25px); - z-index: @p(1, 2); - transform: rotate(@r(360deg)); - } - } - @random(.2) { - :before { - content: '🧁'; - position: absolute; - @place-cell: @r(100%) @r(100%); - font-size: @r(15px, 25px); - z-index: @p(1, 2); - transform: rotate(@r(360deg)); - } - } - @random(.2) { - :before { - content: '🍪'; - position: absolute; - @place-cell: @r(100%) @r(100%); - font-size: @r(15px, 25px); - z-index: @p(1, 2); - transform: rotate(@r(360deg)); - } - } - - @keyframes bounce { - 0% { - transform: translateY(@r(-101vh, -110vh)); - } - 100% { - transform: translateY(@r(101vh, 110vh)); - } - } - ); + font-size: @r(15px, 25px); + z-index: @p(1, 2); + transform: rotate(@r(360deg)); + } + } + @random(.2) { + :before { + content: "🧁"; + position: absolute; + @place-cell: @r(100%) @r(100%); + font-size: @r(15px, 25px); + z-index: @p(1, 2); + transform: rotate(@r(360deg)); + } + } + @random(.2) { + :before { + content: "🍪"; + position: absolute; + @place-cell: @r(100%) @r(100%); + font-size: @r(15px, 25px); + z-index: @p(1, 2); + transform: rotate(@r(360deg)); + } + } + @keyframes bounce { + 0% { + transform: translateY(@r(-101vh, -110vh)); + } + 100% { + transform: translateY(@r(101vh, 110vh)); + } + } + ); } .app .main-container { @@ -507,50 +443,40 @@ css-doodle.candy { flex-direction: column; padding-bottom: 3rem; } - .app .main-container .title { text-align: center; margin-top: 5rem; margin-bottom: 2rem; transition: margin 0.35s cubic-bezier(0.4, 0, 0.2, 1); } - @media screen and (min-width: 50rem) { .app .main-container .title { margin-top: 8rem; } } - .app .main-container .title a { color: inherit; text-decoration: none; } - .app .main-container .title a:visited, .app .main-container .title a:link, .app .main-container .title a:active, .app .main-container .title a:hover { color: inherit; text-decoration: none; } - .app .main-container .title span { - font-family: "Dressedless Three", Lato, Roboto, 'Helvetica Neue', Arial, Helvetica, sans-serif; + font-family: "Dressedless Three", Lato, Roboto, "Helvetica Neue", Arial, Helvetica, sans-serif; text-transform: uppercase; font-size: 3.5rem; font-weight: 100; } - @media screen and (min-width: 50rem) { .app .main-container .title span { font-size: 5rem; } } - .app .main-container .title.animated span { - -webkit-animation-name: fadeIn; - animation-name: fadeIn; - -webkit-animation-duration: 250ms; - animation-duration: 250ms; - -webkit-animation-delay: 100ms; - animation-delay: 100ms; + animation-name: fadeIn; + animation-duration: 250ms; + animation-delay: 100ms; /*C*/ /*O*/ /*D*/ @@ -558,60 +484,48 @@ css-doodle.candy { /*L*/ /*F*/ } - .app .main-container .title.animated span:nth-child(1) { color: #4285F4; } - .app .main-container .title.animated span:nth-child(2) { color: #DB4437; } - .app .main-container .title.animated span:nth-child(3) { color: #F4B400; } - .app .main-container .title.animated span:nth-child(4) { color: #4285F4; } - .app .main-container .title.animated span:nth-child(5) { color: #0F9D58; } - .app .main-container .title.animated span:nth-child(6) { color: #DB4437; } - body.dark .app .main-container .title { margin-top: 3rem; margin-bottom: 0; } - @media screen and (min-width: 50rem) { body.dark .app .main-container .title { margin-top: 5rem; margin-bottom: 1rem; } } - .app .main-container .search-bar { padding: 1rem 0; width: 100%; } - @media screen and (min-width: 50rem) { .app .main-container .search-bar { width: 45rem; } } - .app .main-container .search-bar form { padding: 0; margin: 0; border: 0; } - .app .main-container .search-bar__desc { opacity: 0.5; padding-left: 0.8rem; @@ -619,7 +533,6 @@ body.dark .app .main-container .title { line-height: 1; margin-bottom: 0.2rem; } - @media screen and (min-width: 50rem) { .app .main-container .search-bar__desc { padding-left: 1.4rem; @@ -628,23 +541,22 @@ body.dark .app .main-container .title { margin-bottom: 0; } } - .app .main-container .search-bar__input { + height: 56px; + font-size: 1.3em; background: #F1F3F4; border-radius: 5rem; transition: box-shadow 350ms cubic-bezier(0.4, 0, 0.2, 1); } - .app .main-container .search-bar__input:focus, .app .main-container .search-bar__input:active, .app .main-container .search-bar__input:hover { box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.08); } - .app .main-container .search-bar__input input { + height: 56px !important; background: #F1F3F4; border-radius: 5rem; border: 0 !important; } - .app .main-container .search-bar__dropdown { display: flex; justify-content: center; @@ -652,114 +564,91 @@ body.dark .app .main-container .title { margin-top: -0.4rem; margin-left: 1rem; } - .app .main-container .search-bar__dropdown i { opacity: 0.5; font-size: 1rem; } - .app .main-container .search-bar__dropdown i:hover { opacity: 1; } - @media screen and (min-width: 50rem) { .app .main-container .search-bar__dropdown i { font-size: 1.2rem; } } - .app .main-container .search-bar__plugins { padding-left: 0.8rem; color: inherit; opacity: 0.5; font-size: 0.8rem; } - .app .main-container .search-bar__plugins a, .app .main-container .search-bar__plugins a:hover, .app .main-container .search-bar__plugins a:link, .app .main-container .search-bar__plugins a:active, .app .main-container .search-bar__plugins a:focus, .app .main-container .search-bar__plugins a:visited { color: inherit; } - .app .main-container .search-bar__plugins a:hover { text-decoration: underline; } - @media screen and (min-width: 50rem) { .app .main-container .search-bar__plugins { padding-left: 1.4rem; font-size: 1rem; } } - body.dark .app .main-container .search-bar__input:focus, body.dark .app .main-container .search-bar__input:active, body.dark .app .main-container .search-bar__input:hover { - box-shadow: #bbbbbb 0px 2px 8px !important; + box-shadow: rgb(187, 187, 187) 0px 2px 8px !important; } - .app .main-container .suggestion { padding-bottom: 2rem; max-width: 100%; } - @media screen and (min-width: 50rem) { .app .main-container .suggestion { min-width: 43rem; } } - .app .main-container .suggestion a:hover { text-decoration: underline; } - .app .main-container .variable-list { width: 100%; text-align: center; } - .app .main-container .variable-list .label { margin: 0.4rem 0.4rem 0 0; } - .app .main-container .variable-list .label:hover { - box-shadow: #bbbbbb 0px 2px 8px !important; + box-shadow: rgb(187, 187, 187) 0px 2px 8px !important; } - .app .main-container .variable-list .label.animated { transform: translateZ(0); will-change: transform; } - .app .main-container .variable-list hr { width: 70%; border-color: rgba(0, 0, 0, 0.16); margin-top: 1rem; } - .app .main-container .search-error { margin: 1rem 0; } - .app .main-container .slogan-image { padding: 2rem 1rem; } - @media screen and (min-width: 50rem) { .app .main-container .slogan-image { padding: 4rem 1rem; } } - .app .main-container .slogan-image img { max-width: 100%; height: auto; } - .copybook-container.copybook-container > .header { padding: 0.8rem 1rem; } - .copybook-container > .content { position: relative; } - .copybook-container > .content:after { content: ""; position: absolute; @@ -770,11 +659,9 @@ body.dark .app .main-container .search-bar__input:focus, body.dark .app .main-co z-index: 1; transition: background 0.6s cubic-bezier(0.4, 0, 0.2, 1); } - .copybook-container > .content:hover:after, .copybook-container > .content:focus:after { background: rgba(255, 255, 255, 0.76); } - .copybook-container > .content pre { position: relative; display: inline-block; @@ -782,28 +669,23 @@ body.dark .app .main-container .search-bar__input:focus, body.dark .app .main-co padding: 0; min-width: 98%; } - .copybook-container > .content code { display: inline-block; color: #000; } - .copybook-container .ui.search.selection.dropdown { - font-size: .8rem; + font-size: 0.8rem; min-width: 30rem; } - .copybook-container .ui.search.selection.dropdown .menu > .item { - font-size: .8rem; + font-size: 0.8rem; } - .copybook-container .title { text-align: center; font-size: 1rem; margin-bottom: -0.2rem; margin-top: -1rem; } - .copybook-container .editor { position: absolute; top: 0; @@ -827,7 +709,6 @@ body.dark .app .main-container .search-bar__input:focus, body.dark .app .main-co background-color: #fff; transition: background-color 150ms ease-in-out; } - body.dark .app .notice-container { background-color: #272b38; } @@ -836,9 +717,8 @@ body.dark .app .notice-container { display: none; color: #70B7FD; } - .app .notice-container a.show { display: block; } -/*# sourceMappingURL=../app.css.map */ \ No newline at end of file +/*# sourceMappingURL=test_app.css.map */ diff --git a/styles/_main-container.scss b/styles/_main-container.scss index ab04b478..e6a3b36e 100644 --- a/styles/_main-container.scss +++ b/styles/_main-container.scss @@ -110,6 +110,8 @@ } &__input { + height: 56px; + font-size: 1.3em; background: #F1F3F4; border-radius: 5rem; transition: box-shadow 350ms $anim-cubic-bezier; @@ -119,6 +121,7 @@ } input { + height: 56px !important; background: #F1F3F4; border-radius: 5rem; border: 0 !important; From 2862cac884f769b2ac83d9857e6cf47ef0dd5d04 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 4 Jun 2025 03:05:03 +0000 Subject: [PATCH 3/4] Fine-tune dropdown margin for taller search bar Co-authored-by: unbug <799578+unbug@users.noreply.github.com> --- dist/css/app.css | 4 ++-- styles/_main-container.scss | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/dist/css/app.css b/dist/css/app.css index d6935824..d353e985 100644 --- a/dist/css/app.css +++ b/dist/css/app.css @@ -561,7 +561,7 @@ body.dark .app .main-container .title { display: flex; justify-content: center; align-items: center; - margin-top: -0.4rem; + margin-top: -0.2rem; margin-left: 1rem; } .app .main-container .search-bar__dropdown i { @@ -721,4 +721,4 @@ body.dark .app .notice-container { display: block; } -/*# sourceMappingURL=test_app.css.map */ +/*# sourceMappingURL=test_app_v2.css.map */ diff --git a/styles/_main-container.scss b/styles/_main-container.scss index e6a3b36e..3873e21b 100644 --- a/styles/_main-container.scss +++ b/styles/_main-container.scss @@ -132,7 +132,7 @@ display: flex; justify-content: center; align-items: center; - margin-top: -0.4rem; + margin-top: -0.2rem; margin-left: 1rem; i { From 6bed80daee01101e656c5379bf0b12d2691bb826 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 4 Jun 2025 04:08:56 +0000 Subject: [PATCH 4/4] Add permanent shadow to search bar for enhanced visibility Co-authored-by: unbug <799578+unbug@users.noreply.github.com> --- dist/css/app.css | 6 +++++- styles/_main-container.scss | 3 +++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/dist/css/app.css b/dist/css/app.css index d353e985..7da09b31 100644 --- a/dist/css/app.css +++ b/dist/css/app.css @@ -546,6 +546,7 @@ body.dark .app .main-container .title { font-size: 1.3em; background: #F1F3F4; border-radius: 5rem; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.04); transition: box-shadow 350ms cubic-bezier(0.4, 0, 0.2, 1); } .app .main-container .search-bar__input:focus, .app .main-container .search-bar__input:active, .app .main-container .search-bar__input:hover { @@ -594,6 +595,9 @@ body.dark .app .main-container .title { font-size: 1rem; } } +body.dark .app .main-container .search-bar__input { + box-shadow: 0 2px 4px 0 rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.05); +} body.dark .app .main-container .search-bar__input:focus, body.dark .app .main-container .search-bar__input:active, body.dark .app .main-container .search-bar__input:hover { box-shadow: rgb(187, 187, 187) 0px 2px 8px !important; } @@ -721,4 +725,4 @@ body.dark .app .notice-container { display: block; } -/*# sourceMappingURL=test_app_v2.css.map */ +/*# sourceMappingURL=app.css.map */ diff --git a/styles/_main-container.scss b/styles/_main-container.scss index 3873e21b..59c76dce 100644 --- a/styles/_main-container.scss +++ b/styles/_main-container.scss @@ -114,6 +114,7 @@ font-size: 1.3em; background: #F1F3F4; border-radius: 5rem; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.04); transition: box-shadow 350ms $anim-cubic-bezier; &:focus, &:active, &:hover { @@ -168,6 +169,8 @@ #{$dark-theme} { .search-bar { &__input { + box-shadow: 0 2px 4px 0 rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.05); + &:focus, &:active, &:hover { box-shadow: $box-shadow; }