codegirl007
/
kiddos
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Update color scheme and enhance button styles across the application

drawing-pad
Stephanie Gredell 1 month ago
parent
b9d4ad84b0
commit
404407643c
5 changed files with 44 additions and 45 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 27
      frontend/src/App.css
  2. 24
      frontend/src/components/Navbar/Navbar.css
  3. 14
      frontend/src/components/SearchFilter/SearchFilter.css
  4. 12
      frontend/src/components/VideoCard/VideoCard.css
  5. 12
      frontend/src/components/VideoGrid/VideoGrid.css

27
frontend/src/App.css
Unescape View File

@ -1,18 +1,17 @@
:root { :root {
--color-bg: #fff8f3; --color-bg: #f6f8fb;
--color-surface: #ffffff; --color-surface: #ffffff;
--color-surface-alt: #ffeef8; --color-surface-alt: #f0f4ff;
--color-surface-muted: #fdf2ff; --color-surface-muted: #e9f2ff;
--color-primary: #f26ba4; --color-primary: #2f80ed;
--color-primary-dark: #d94f89; --color-primary-dark: #1f5fb7;
--color-secondary: #9b8ef6; --color-secondary: #3ab5a8;
--color-secondary-dark: #7a6fe0; --color-secondary-dark: #2d8c82;
--color-accent: #fec89a; --color-accent: #f4c95d;
--color-mint: #b8f2e6; --color-muted: #5a6473;
--color-text: #2c2c3a; --color-text: #1f2a37;
--color-muted: #6f6f81; --color-border: #d4deef;
--color-border: #f3d7ec; --color-shadow: rgba(35, 74, 134, 0.16);
--color-shadow: rgba(242, 107, 164, 0.18);
} }
* { * {
@ -25,7 +24,7 @@ body {
font-family: 'Roboto', 'Arial', sans-serif; font-family: 'Roboto', 'Arial', sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
background: radial-gradient(circle at top, var(--color-surface-alt), var(--color-bg)); background: linear-gradient(180deg, var(--color-bg), #e7edf7);
color: var(--color-text); color: var(--color-text);
} }

24
frontend/src/components/Navbar/Navbar.css
Unescape View File

@ -4,7 +4,7 @@
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 100; z-index: 100;
box-shadow: 0 8px 24px var(--color-shadow); box-shadow: 0 10px 30px var(--color-shadow);
} }
.navbar-container { .navbar-container {
@ -51,7 +51,7 @@
} }
.navbar-link:hover { .navbar-link:hover {
background-color: rgba(242, 107, 164, 0.12); background-color: rgba(47, 128, 237, 0.12);
color: var(--color-primary-dark); color: var(--color-primary-dark);
} }
@ -78,12 +78,12 @@
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
transition: transform 0.2s, box-shadow 0.2s; transition: transform 0.2s, box-shadow 0.2s;
box-shadow: 0 10px 20px rgba(153, 118, 255, 0.2); box-shadow: 0 10px 20px rgba(32, 76, 130, 0.25);
} }
.navbar-button:hover { .navbar-button:hover {
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 12px 24px rgba(153, 118, 255, 0.28); box-shadow: 0 12px 26px rgba(32, 76, 130, 0.32);
} }
/* Search and Filters Section */ /* Search and Filters Section */
@ -119,25 +119,25 @@
.navbar-search-input:focus { .navbar-search-input:focus {
outline: none; outline: none;
border-color: var(--color-secondary); border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(155, 142, 246, 0.25); box-shadow: 0 8px 22px rgba(47, 128, 237, 0.1);
} }
.navbar-search-button { .navbar-search-button {
padding: 10px 18px; padding: 10px 18px;
background-color: var(--color-mint); background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
border: none; border: none;
border-radius: 999px; border-radius: 999px;
cursor: pointer; cursor: pointer;
font-size: 16px; font-size: 16px;
transition: transform 0.2s, box-shadow 0.2s; transition: transform 0.2s, box-shadow 0.2s;
color: var(--color-text); color: white;
box-shadow: 0 8px 16px rgba(184, 242, 230, 0.4); box-shadow: 0 10px 22px rgba(32, 76, 130, 0.25);
} }
.navbar-search-button:hover { .navbar-search-button:hover {
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 12px 18px rgba(184, 242, 230, 0.55); box-shadow: 0 14px 26px rgba(32, 76, 130, 0.32);
} }
.navbar-filter-controls { .navbar-filter-controls {
@ -159,7 +159,7 @@
.navbar-filter-select:focus { .navbar-filter-select:focus {
outline: none; outline: none;
border-color: var(--color-primary); border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(242, 107, 164, 0.25); box-shadow: 0 0 0 3px rgba(47, 128, 237, 0.18);
} }
.navbar-clear-button { .navbar-clear-button {
@ -175,7 +175,7 @@
} }
.navbar-clear-button:hover { .navbar-clear-button:hover {
background-color: rgba(254, 200, 154, 0.4); background-color: rgba(47, 128, 237, 0.08);
color: var(--color-text); color: var(--color-text);
} }

14
frontend/src/components/SearchFilter/SearchFilter.css
Unescape View File

@ -30,25 +30,25 @@
.search-input:focus { .search-input:focus {
outline: none; outline: none;
border-color: var(--color-secondary); border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(155, 142, 246, 0.25); box-shadow: 0 8px 22px rgba(47, 128, 237, 0.1);
} }
.search-button { .search-button {
padding: 10px 18px; padding: 10px 18px;
background: linear-gradient(120deg, var(--color-primary), var(--color-secondary)); background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
border: none; border: none;
border-radius: 999px; border-radius: 999px;
cursor: pointer; cursor: pointer;
font-size: 16px; font-size: 16px;
color: white; color: white;
transition: transform 0.2s, box-shadow 0.2s; transition: transform 0.2s, box-shadow 0.2s;
box-shadow: 0 12px 22px rgba(242, 107, 164, 0.3); box-shadow: 0 12px 24px rgba(32, 76, 130, 0.28);
} }
.search-button:hover { .search-button:hover {
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 16px 24px rgba(242, 107, 164, 0.36); box-shadow: 0 16px 28px rgba(32, 76, 130, 0.32);
} }
.filter-controls { .filter-controls {
@ -70,7 +70,7 @@
.filter-select:focus { .filter-select:focus {
outline: none; outline: none;
border-color: var(--color-primary); border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(242, 107, 164, 0.25); box-shadow: 0 0 0 3px rgba(47, 128, 237, 0.18);
} }
.clear-button { .clear-button {
@ -86,7 +86,7 @@
} }
.clear-button:hover { .clear-button:hover {
background-color: rgba(254, 200, 154, 0.35); background-color: rgba(47, 128, 237, 0.08);
color: var(--color-text); color: var(--color-text);
} }

12
frontend/src/components/VideoCard/VideoCard.css
Unescape View File

@ -2,15 +2,15 @@
cursor: pointer; cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s; transition: transform 0.2s, box-shadow 0.2s;
background: var(--color-surface); background: var(--color-surface);
border-radius: 18px; border-radius: 20px;
padding: 12px; padding: 16px;
border: 1px solid rgba(255, 255, 255, 0.7); border: 1px solid rgba(212, 222, 239, 0.8);
box-shadow: 0 10px 24px rgba(242, 107, 164, 0.08); box-shadow: 0 14px 32px rgba(32, 76, 130, 0.08);
} }
.video-card:hover { .video-card:hover {
transform: translateY(-4px); transform: translateY(-4px);
box-shadow: 0 16px 32px rgba(155, 142, 246, 0.2); box-shadow: 0 18px 40px rgba(32, 76, 130, 0.12);
} }
.video-thumbnail-container { .video-thumbnail-container {
@ -37,7 +37,7 @@
position: absolute; position: absolute;
bottom: 8px; bottom: 8px;
right: 8px; right: 8px;
background-color: rgba(44, 44, 58, 0.85); background-color: rgba(31, 42, 55, 0.85);
color: white; color: white;
padding: 2px 6px; padding: 2px 6px;
border-radius: 4px; border-radius: 4px;

12
frontend/src/components/VideoGrid/VideoGrid.css
Unescape View File

@ -93,20 +93,20 @@
.pagination-button { .pagination-button {
padding: 8px 16px; padding: 8px 16px;
background-color: var(--color-mint); background-color: var(--color-secondary);
border: none; border: none;
border-radius: 999px; border-radius: 999px;
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
transition: transform 0.2s, box-shadow 0.2s; transition: transform 0.2s, box-shadow 0.2s;
color: var(--color-text); color: white;
box-shadow: 0 10px 20px rgba(184, 242, 230, 0.4); box-shadow: 0 12px 26px rgba(32, 76, 130, 0.2);
} }
.pagination-button:hover:not(:disabled) { .pagination-button:hover:not(:disabled) {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 14px 26px rgba(184, 242, 230, 0.55); box-shadow: 0 16px 30px rgba(32, 76, 130, 0.28);
} }
.pagination-button:disabled { .pagination-button:disabled {
@ -133,8 +133,8 @@
} }
.pagination-number:hover { .pagination-number:hover {
background-color: rgba(242, 107, 164, 0.12); background-color: rgba(47, 128, 237, 0.12);
border-color: rgba(242, 107, 164, 0.5); border-color: rgba(47, 128, 237, 0.5);
} }
.pagination-number.active { .pagination-number.active {

Write Preview
Loading…
Cancel
Save