diff --git a/src/styles/starlight.css b/src/styles/starlight.css index f4231e0..53cb3b2 100644 --- a/src/styles/starlight.css +++ b/src/styles/starlight.css @@ -1,8 +1,8 @@ /* Dark mode colors. */ :root { - --sl-color-accent-low: #3f1505; - --sl-color-accent: #b43c00; - --sl-color-accent-high: #f2b9a6; + --sl-color-accent-low: #562800; + --sl-color-accent: #FF801F; + --sl-color-accent-high: #FFA057; --sl-color-white: #ffffff; --sl-color-gray-1: #eeeeee; --sl-color-gray-2: #c2c2c2; @@ -16,9 +16,9 @@ } /* Light mode colors. */ :root[data-theme="light"] { - --sl-color-accent-low: #f7ccbd; + --sl-color-accent-low: #FFA057; --sl-color-accent: #b73d00; - --sl-color-accent-high: #5a1a00; + --sl-color-accent-high: #562800; --sl-color-white: #181818; --sl-color-gray-1: #272727; --sl-color-gray-2: #383838; @@ -45,16 +45,20 @@ select:focus-visible { outline: -webkit-focus-ring-color auto 1px; } +article.card { + border-radius: 0.5rem; +} + .starlight-aside--tip { border: none; - border-radius: 0.25rem; + border-radius: 0.5rem; color: #66350c; background: linear-gradient(45deg, #ff512f, #f09819); } .starlight-aside--note { border: none; - border-radius: 0.25rem; + border-radius: 0.5rem; color: #004558; background: linear-gradient(45deg, #00b4db, #2193b0); } diff --git a/src/styles/starlight_main.css b/src/styles/starlight_main.css index b3df1b4..8497f16 100644 --- a/src/styles/starlight_main.css +++ b/src/styles/starlight_main.css @@ -1,8 +1,9 @@ /* Dark mode colors. */ :root { - --sl-color-accent-low: #3f1505; - --sl-color-accent: #b43c00; - --sl-color-accent-high: #f2b9a6; + --sl-color-accent-low: #562800; + --sl-color-accent: #FF801F; + --sl-color-accent-high: #FFA057; + --primary-button-hover: #FF801F; --sl-color-white: #ffffff; --sl-color-gray-1: #eeeeee; --sl-color-gray-2: #c2c2c2; @@ -17,9 +18,10 @@ } /* Light mode colors. */ :root[data-theme='light'] { - --sl-color-accent-low: #f7ccbd; - --sl-color-accent: #b73d00; - --sl-color-accent-high: #5a1a00; + --sl-color-accent-low: #FFA057; + --sl-color-accent: #F76B15; + --sl-color-accent-high: #562800; + --primary-button-hover: #FF801F; --sl-color-white: #181818; --sl-color-gray-1: #272727; --sl-color-gray-2: #383838; @@ -41,12 +43,18 @@ header { backdrop-filter: blur(12px) !important; background-color: var(--backdrop-color) !important; -} - -ol { - list-style: circle; } select { background-image: none; +} + +.sl-flex.action.primary:hover { + background-color: var(--primary-button-hover); + transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1); +} + +.sl-flex.action.primary:hover svg { + transform: translateX(0.25rem); + transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1); } \ No newline at end of file