1berry/kutt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update css to use more css variables for colors instead of hardcoded values

Browse Source
This commit is contained in:
Pouria Ezzati 2025-01-16 11:15:20 +03:30
parent f332658c99
commit 318ec02d07
1 changed files with 50 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
static/css/styles.css
View File

@ -8,26 +8,39 @@
:root {
--bg-color: hsl(206, 12%, 95%);
--text-color: hsl(200, 35%, 25%);
--color-primary: #2196f3;
--outline-color: #14e0ff;
--color-primary: hsl(207, 90%, 54%);
--outline-color: hsl(188, 100%, 54%);
--button-bg: linear-gradient(to right, #e0e0e0, #bdbdbd);
--button-bg-box-shadow-color: rgba(160, 160, 160, 0.5);
--button-bg-primary: linear-gradient(to right, #42a5f5, #2979ff);
--button-bg-primary-box-shadow-color: rgba(66, 165, 245, 0.5);
--button-bg-secondary: linear-gradient(to right, #7e57c2, #6200ea);
--button-bg-secondary-box-shadow-color: rgba(81, 45, 168, 0.5);
--button-bg-danger: linear-gradient(to right, #ee3b3b, #e11c1c);
--button-bg-danger-box-shadow-color: rgba(168, 45, 45, 0.5);
--button-bg-success: linear-gradient(to right, #31b647, #26be3f);
--button-bg-success-box-shadow-color: rgba(25, 221, 51, 50%);
--features-bg: hsl(230, 15%, 92%);
--extensions-bg: hsl(230, 15%, 20%);
--send-icon-hover-color: #673ab7;
--button-bg-primary: linear-gradient(to right, hsl(207, 90%, 61%), hsl(218, 100%, 58%));
--button-bg-primary-box-shadow-color: hsla(207, 90%, 61%, 0.5);
--button-bg-secondary: linear-gradient(to right, hsl(262, 47%, 55%), hsl(265, 100%, 46%));
--button-bg-secondary-box-shadow-color: hsla(258, 58%, 42%, 0.5);
--button-bg-danger: linear-gradient(to right, hsl(0, 84%, 58%), hsl(0, 78%, 50%));
--button-bg-danger-box-shadow-color: hsla(0, 58%, 42%, 0.5);
--button-bg-success: linear-gradient(to right, hsl(130, 58%, 45%), hsl(130, 67%, 45%));
--button-bg-success-box-shadow-color: hsla(128, 80%, 48%, 0.5);
--button-action-shadow-color: hsla(200, 15%, 60%, 0.12);
--underline-color: hsl(200, 35%, 65%);
--secondary-text-color: hsl(200, 14%, 60%);
--send-icon-hover-color: hsl(262, 52%, 47%);
--send-spinner-icon-color: hsl(200, 15%, 70%);
--success-icon-color: hsl(144, 40%, 57%);
--error-icon-color: #f24f4f;
--error-icon-color: hsl(0, 86%, 63%);
--copy-icon-color: hsl(144, 40%, 57%);
--copy-icon-bg-color: hsl(144, 100%, 96%);
--copy-icon-shadow-color: hsla(200, 15%, 60%, 0.12);
--focus-outline-color: hsla(207, 90%, 61%, 0.5);
--checkbox-bg-color: hsl(262, 47%, 63%);
--input-shadow-color: hsla(200, 15%, 70%, 0.2);
--input-hover-shadow-color: hsla(200, 15%, 70%, 0.4);
--input-label-color: hsl(200, 35%, 25%);
--table-bg-color: hsl(200, 12%, 95%);
--table-shadow-color: hsla(200, 20%, 70%, 0.3);
--table-tr-border-color: hsl(200, 14%, 94%);
--table-tr-hover-bg-color: hsl(200, 14%, 98%);
--table-head-tr-border-color: hsl(200, 14%, 90%);
--table-status-gray-bg-color: hsl(200, 12%, 95%);
--keyframe-slidey-offset: 0;
}
@ -233,7 +246,7 @@ button.action {
padding: 5px;
width: 24px;
height: 24px;
box-shadow: 0 2px 1px hsla(200, 15%, 60%, 0.12);
box-shadow: 0 2px 1px var(--button-action-shadow-color);
}
a.button.action:disabled,
@ -441,7 +454,7 @@ input[type="password"] {
border-radius: 100px;
border-bottom: 5px solid #f5f5f5;
border-bottom-width: 5px;
box-shadow: 0 10px 35px hsla(200, 15%, 70%, 0.2);
box-shadow: 0 10px 35px var(--input-shadow-color);
transition: all 0.5s ease-out;
}
@ -450,7 +463,7 @@ input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
outline: none;
box-shadow: 0 20px 35px hsla(200, 15%, 70%, 0.4);
box-shadow: 0 20px 35px var(--input-hover-shadow-color);
}
input[type="text"]::placeholder,
@ -478,7 +491,7 @@ select {
letter-spacing: 0.05em;
color: #444;
background-color: white;
box-shadow: 0 10px 35px hsla(200, 15%, 70%, 0.2);
box-shadow: 0 10px 35px var(--input-shadow-color);
border: none;
border-radius: 100px;
border-bottom: 5px solid #f5f5f5;
@ -493,7 +506,7 @@ select {
select:focus {
outline: none;
box-shadow: 0 20px 35px hsla(200, 15%, 70%, 0.4);
box-shadow: 0 20px 35px var(--input-hover-shadow-color)
}
.error select {
@ -518,7 +531,7 @@ input[type="checkbox"] {
}
input[type="checkbox"]:focus {
outline: 3px solid rgba(65, 164, 245, 0.5);
outline: 3px solid var(--focus-outline-color);
}
input[type="checkbox"]::after {
@ -530,7 +543,7 @@ input[type="checkbox"]::after {
height: 80%;
display: block;
border-radius: 2px;
background-color: #9575cd;
background-color: var(--checkbox-bg-color);
box-shadow: 0 2px 4px rgba(50, 50, 50, 0.2);
cursor: pointer;
opacity: 0;
@ -568,7 +581,7 @@ select:has(option[value=""]:checked) {
label {
display: flex;
color: rgb(41, 71, 86);
color: var(--input-label-color);
font-size: 1rem;
flex-direction: column;
align-items: flex-start;
@ -607,7 +620,7 @@ table {
flex-direction: column;
background-color: white;
border-radius: 12px;
box-shadow: 0 6px 15px hsla(200, 20%, 70%, 0.3);
box-shadow: 0 6px 15px var(--table-shadow-color);
text-align: center;
overflow: auto;
}
@ -638,7 +651,7 @@ table tfoot {
table tr {
padding: 0 0.5rem;
border-bottom: 1px solid hsl(200, 14%, 94%);
border-bottom: 1px solid var(--table-tr-border-color);
}
table th,
@ -665,18 +678,18 @@ table tbody + tfoot {
}
table thead {
background-color: hsl(200, 12%, 95%);
background-color: var(--table-bg-color);
border-top-right-radius: 12px;
border-top-left-radius: 12px;
font-weight: bold;
}
table thead tr {
border-bottom: 1px solid hsl(200, 14%, 90%);
border-bottom: 1px solid var(--table-head-tr-border-color);
}
table tfoot {
background-color: hsl(200, 12%, 95%);
background-color: var(--table-bg-color);
border-bottom-right-radius: 12px;
border-bottom-left-radius: 12px;
}
@ -1159,7 +1172,7 @@ main #shorturl h1 {
main #shorturl h1.link {
cursor: pointer;
border-bottom-color: hsl(200, 35%, 65%);
border-bottom-color: var(--underline-color);
transition: opacity 0.3s ease-in-out;
--keyframe-slidey-offset: -10px;
animation: fadein 0.2s ease-in-out, slidey 0.2s ease-in-out;
@ -1189,7 +1202,7 @@ main #shorturl h1.link:hover {
border-radius: 100%;
background-color: var(--copy-icon-bg-color);
transition: transform 0.4s ease-out;
box-shadow: 0 2px 1px hsla(200, 15%, 60%, 0.12);
box-shadow: 0 2px 1px var(--copy-icon-shadow-color);
cursor: pointer;
--keyframe-slidey-offset: -10px;
animation: slidey 0.2s ease-in-out;
@ -1204,7 +1217,7 @@ main #shorturl h1.link:hover {
}
.clipboard button:focus {
outline: 3px solid rgba(65, 164, 245, 0.5);
outline: 3px solid var(--focus-outline-color);
}
.clipboard svg {
@ -1469,7 +1482,7 @@ table .short-link-wrapper { display: flex; align-items: center; }
margin-top: 0;
}
#main-table-wrapper table .status.gray { background-color: hsl(200, 12%, 95%); }
#main-table-wrapper table .status.gray { background-color: var(--table-status-gray-bg-color); }
#main-table-wrapper table .status.green { background-color: hsl(102.4, 100%, 93.3%); }
#main-table-wrapper table .status.red { background-color: hsl(0, 100%, 96.7%); }
@ -1547,7 +1560,7 @@ table .short-link-wrapper { display: flex; align-items: center; }
}
#main-table-wrapper table tbody tr:hover {
background-color: hsl(200, 14%, 98%);
background-color: var(--table-tr-hover-bg-color);
}
#main-table-wrapper table tbody td.right-fade:after {
@ -1561,10 +1574,9 @@ table .short-link-wrapper { display: flex; align-items: center; }
}
#main-table-wrapper table tbody tr:hover td.right-fade:after {
background: linear-gradient(to left, hsl(200, 14%, 98%), rgba(255, 255, 255, 0.001));
background: linear-gradient(to left, var(--table-tr-hover-bg-color), rgba(255, 255, 255, 0.001));
}
#main-table-wrapper table .clipboard { margin-right: 0.5rem; }
#main-table-wrapper table .clipboard svg.check { width: 24px; }
@ -1858,7 +1870,7 @@ form#delete-account.htmx-request .spinner { display: block; }
align-items: stretch;
background-color: white;
border-radius: 12px;
box-shadow: 0 6px 15px hsla(200, 20%, 70%, 0.3);
box-shadow: 0 6px 15px var(--table-shadow-color);
overflow: hidden;
padding: 0;
}
@ -1867,7 +1879,7 @@ form#delete-account.htmx-request .spinner { display: block; }
width: 100%;
display: flex;
align-items: center;
background-color: hsl(200, 12%, 95%);
background-color: var(--table-bg-color);
justify-content: space-between;
padding: 0.75rem 1.5rem;
}
@ -1894,12 +1906,12 @@ form#delete-account.htmx-request .spinner { display: block; }
.stats-period span.total-in-period {
font-weight: bold;
border-bottom: 1px dotted hsl(200, 35%, 65%);
border-bottom: 1px dotted var(--underline-color);
}
p.last-update {
font-size: 14px;
color: hsl(200, 14%, 60%);
color: var(--secondary-text-color);
margin: 0.75rem 0 0;
}