jalil/achat-maison-albi-fr
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Update accent colors and enhance interactive elements

Browse source 
Modified accent colors in both dark and light modes for better visibility and consistency across the application. Included a hover effect for primary action buttons to improve user interaction. Also, adjustments were made to the border radius for certain elements, giving them a more modern and rounded appearance. These changes aim to enhance the overall user experience and the visual design of the application.
This commit is contained in:
Emil Gulamov 2024-03-21 22:31:54 +04:00
parent 36695d3340
commit 7b5776662c
2 changed files with 29 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/styles/starlight.css
View file

@ -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);
}

28
src/styles/starlight_main.css
View file

@ -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);
}