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

add some colors

drawing-pad
Stephanie Gredell 1 month ago
parent
41e1e3b2b0
commit
b9d4ad84b0
5 changed files with 146 additions and 91 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. 34
      frontend/src/App.css
  2. 86
      frontend/src/components/Navbar/Navbar.css
  3. 51
      frontend/src/components/SearchFilter/SearchFilter.css
  4. 22
      frontend/src/components/VideoCard/VideoCard.css
  5. 44
      frontend/src/components/VideoGrid/VideoGrid.css

34
frontend/src/App.css
Unescape View File

@ -1,3 +1,20 @@
:root {
--color-bg: #fff8f3;
--color-surface: #ffffff;
--color-surface-alt: #ffeef8;
--color-surface-muted: #fdf2ff;
--color-primary: #f26ba4;
--color-primary-dark: #d94f89;
--color-secondary: #9b8ef6;
--color-secondary-dark: #7a6fe0;
--color-accent: #fec89a;
--color-mint: #b8f2e6;
--color-text: #2c2c3a;
--color-muted: #6f6f81;
--color-border: #f3d7ec;
--color-shadow: rgba(242, 107, 164, 0.18);
}
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -8,8 +25,8 @@ 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-color: #fff; background: radial-gradient(circle at top, var(--color-surface-alt), var(--color-bg));
color: #030303; color: var(--color-text);
} }
.app { .app {
@ -36,27 +53,30 @@ body {
.error-container h1 { .error-container h1 {
font-size: 24px; font-size: 24px;
margin-bottom: 16px; margin-bottom: 16px;
color: #d00; color: var(--color-primary-dark);
} }
.error-container p { .error-container p {
font-size: 14px; font-size: 14px;
color: #606060; color: var(--color-muted);
margin-bottom: 24px; margin-bottom: 24px;
} }
.error-container button { .error-container button {
padding: 10px 20px; padding: 10px 20px;
background-color: #065fd4; background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
color: white; color: white;
border: none; border: none;
border-radius: 4px; border-radius: 999px;
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
transition: transform 0.2s, box-shadow 0.2s;
} }
.error-container button:hover { .error-container button:hover {
background-color: #0556c4; transform: translateY(-1px);
box-shadow: 0 16px 28px rgba(0, 0, 0, 0.12);
} }

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

@ -1,10 +1,10 @@
.navbar { .navbar {
background-color: #fff; background: linear-gradient(120deg, var(--color-surface), var(--color-surface-alt));
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid var(--color-border);
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 100; z-index: 100;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: 0 8px 24px var(--color-shadow);
} }
.navbar-container { .navbar-container {
@ -21,7 +21,7 @@
align-items: center; align-items: center;
gap: 8px; gap: 8px;
text-decoration: none; text-decoration: none;
color: #030303; color: var(--color-primary-dark);
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 600;
} }
@ -42,16 +42,17 @@
.navbar-link { .navbar-link {
text-decoration: none; text-decoration: none;
color: #030303; color: var(--color-text);
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
padding: 8px 12px; padding: 8px 12px;
border-radius: 4px; border-radius: 999px;
transition: background-color 0.2s; transition: background-color 0.2s, color 0.2s;
} }
.navbar-link:hover { .navbar-link:hover {
background-color: #f2f2f2; background-color: rgba(242, 107, 164, 0.12);
color: var(--color-primary-dark);
} }
.navbar-user { .navbar-user {
@ -62,32 +63,34 @@
.navbar-username { .navbar-username {
font-size: 14px; font-size: 14px;
color: #606060; color: var(--color-muted);
} }
.navbar-button { .navbar-button {
background-color: #065fd4; background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
color: white; color: white;
border: none; border: none;
padding: 8px 16px; padding: 10px 20px;
border-radius: 18px; border-radius: 999px;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 600;
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
transition: background-color 0.2s; transition: transform 0.2s, box-shadow 0.2s;
box-shadow: 0 10px 20px rgba(153, 118, 255, 0.2);
} }
.navbar-button:hover { .navbar-button:hover {
background-color: #0556c4; transform: translateY(-1px);
box-shadow: 0 12px 24px rgba(153, 118, 255, 0.28);
} }
/* Search and Filters Section */ /* Search and Filters Section */
.navbar-filters { .navbar-filters {
background-color: #f9f9f9; background-color: var(--color-surface-muted);
border-top: 1px solid #e5e5e5; border-top: 1px solid var(--color-border);
padding: 12px 24px; padding: 16px 24px;
} }
.navbar-filters-container { .navbar-filters-container {
@ -107,29 +110,34 @@
.navbar-search-input { .navbar-search-input {
flex: 1; flex: 1;
padding: 8px 12px; padding: 10px 14px;
border: 1px solid #ccc; border: 1px solid var(--color-border);
font-size: 14px; font-size: 14px;
background-color: #fff; background-color: var(--color-surface);
border-radius: 999px;
} }
.navbar-search-input:focus { .navbar-search-input:focus {
outline: none; outline: none;
border-color: #065fd4; border-color: var(--color-secondary);
box-shadow: 0 0 0 3px rgba(155, 142, 246, 0.25);
} }
.navbar-search-button { .navbar-search-button {
padding: 8px 16px; padding: 10px 18px;
background-color: #f2f2f2; background-color: var(--color-mint);
border: 1px solid #ccc; border: none;
border-radius: 20px; border-radius: 999px;
cursor: pointer; cursor: pointer;
font-size: 16px; font-size: 16px;
transition: background-color 0.2s; transition: transform 0.2s, box-shadow 0.2s;
color: var(--color-text);
box-shadow: 0 8px 16px rgba(184, 242, 230, 0.4);
} }
.navbar-search-button:hover { .navbar-search-button:hover {
background-color: #e5e5e5; transform: translateY(-1px);
box-shadow: 0 12px 18px rgba(184, 242, 230, 0.55);
} }
.navbar-filter-controls { .navbar-filter-controls {
@ -140,31 +148,35 @@
.navbar-filter-select { .navbar-filter-select {
padding: 8px 12px; padding: 8px 12px;
border: 1px solid #ccc; border: 1px solid var(--color-border);
border-radius: 4px; border-radius: 999px;
font-size: 14px; font-size: 14px;
background-color: white; background-color: var(--color-surface);
cursor: pointer; cursor: pointer;
color: var(--color-text);
} }
.navbar-filter-select:focus { .navbar-filter-select:focus {
outline: none; outline: none;
border-color: #065fd4; border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(242, 107, 164, 0.25);
} }
.navbar-clear-button { .navbar-clear-button {
padding: 8px 12px; padding: 8px 12px;
background-color: #fff; background-color: transparent;
border: 1px solid #ccc; border: 1px solid var(--color-border);
border-radius: 4px; border-radius: 999px;
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 14px;
white-space: nowrap; white-space: nowrap;
transition: background-color 0.2s; transition: background-color 0.2s, color 0.2s;
color: var(--color-muted);
} }
.navbar-clear-button:hover { .navbar-clear-button:hover {
background-color: #f2f2f2; background-color: rgba(254, 200, 154, 0.4);
color: var(--color-text);
} }
/* Mobile Responsive - Second Row Layout */ /* Mobile Responsive - Second Row Layout */

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

@ -1,6 +1,6 @@
.search-filter { .search-filter {
background-color: #f9f9f9; background-color: var(--color-surface-muted);
border-bottom: 1px solid #e5e5e5; border-bottom: 1px solid var(--color-border);
padding: 16px 24px; padding: 16px 24px;
} }
@ -21,29 +21,34 @@
.search-input { .search-input {
flex: 1; flex: 1;
padding: 8px 12px; padding: 10px 14px;
border: 1px solid #ccc; border: 1px solid var(--color-border);
border-radius: 4px; border-radius: 999px;
font-size: 14px; font-size: 14px;
background-color: var(--color-surface);
} }
.search-input:focus { .search-input:focus {
outline: none; outline: none;
border-color: #065fd4; border-color: var(--color-secondary);
box-shadow: 0 0 0 3px rgba(155, 142, 246, 0.25);
} }
.search-button { .search-button {
padding: 8px 16px; padding: 10px 18px;
background-color: #f2f2f2; background: linear-gradient(120deg, var(--color-primary), var(--color-secondary));
border: 1px solid #ccc; border: none;
border-radius: 4px; border-radius: 999px;
cursor: pointer; cursor: pointer;
font-size: 16px; font-size: 16px;
transition: background-color 0.2s; color: white;
transition: transform 0.2s, box-shadow 0.2s;
box-shadow: 0 12px 22px rgba(242, 107, 164, 0.3);
} }
.search-button:hover { .search-button:hover {
background-color: #e5e5e5; transform: translateY(-1px);
box-shadow: 0 16px 24px rgba(242, 107, 164, 0.36);
} }
.filter-controls { .filter-controls {
@ -54,31 +59,35 @@
.filter-select { .filter-select {
padding: 8px 12px; padding: 8px 12px;
border: 1px solid #ccc; border: 1px solid var(--color-border);
border-radius: 4px; border-radius: 999px;
font-size: 14px; font-size: 14px;
background-color: white; background-color: var(--color-surface);
cursor: pointer; cursor: pointer;
color: var(--color-text);
} }
.filter-select:focus { .filter-select:focus {
outline: none; outline: none;
border-color: #065fd4; border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(242, 107, 164, 0.25);
} }
.clear-button { .clear-button {
padding: 8px 12px; padding: 8px 12px;
background-color: #fff; background-color: transparent;
border: 1px solid #ccc; border: 1px solid var(--color-border);
border-radius: 4px; border-radius: 999px;
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 14px;
white-space: nowrap; white-space: nowrap;
transition: background-color 0.2s; transition: background-color 0.2s, color 0.2s;
color: var(--color-muted);
} }
.clear-button:hover { .clear-button:hover {
background-color: #f2f2f2; background-color: rgba(254, 200, 154, 0.35);
color: var(--color-text);
} }
@media (max-width: 768px) { @media (max-width: 768px) {

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

@ -1,10 +1,16 @@
.video-card { .video-card {
cursor: pointer; cursor: pointer;
transition: transform 0.2s; transition: transform 0.2s, box-shadow 0.2s;
background: var(--color-surface);
border-radius: 18px;
padding: 12px;
border: 1px solid rgba(255, 255, 255, 0.7);
box-shadow: 0 10px 24px rgba(242, 107, 164, 0.08);
} }
.video-card:hover { .video-card:hover {
transform: translateY(-2px); transform: translateY(-4px);
box-shadow: 0 16px 32px rgba(155, 142, 246, 0.2);
} }
.video-thumbnail-container { .video-thumbnail-container {
@ -12,7 +18,8 @@
width: 100%; width: 100%;
aspect-ratio: 16 / 9; aspect-ratio: 16 / 9;
overflow: hidden; overflow: hidden;
background-color: #f0f0f0; background-color: var(--color-surface-muted);
border-radius: 12px;
} }
.video-thumbnail { .video-thumbnail {
@ -30,7 +37,7 @@
position: absolute; position: absolute;
bottom: 8px; bottom: 8px;
right: 8px; right: 8px;
background-color: rgba(0, 0, 0, 0.8); background-color: rgba(44, 44, 58, 0.85);
color: white; color: white;
padding: 2px 6px; padding: 2px 6px;
border-radius: 4px; border-radius: 4px;
@ -58,12 +65,13 @@
.video-title { .video-title {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 600;
line-height: 1.4; line-height: 1.4;
color: #030303; color: var(--color-text);
margin: 0 0 6px 0; margin: 0 0 6px 0;
overflow: hidden; overflow: hidden;
display: -webkit-box; display: -webkit-box;
line-clamp: 2;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
} }
@ -71,7 +79,7 @@
.video-metadata { .video-metadata {
margin: 0; margin: 0;
font-size: 12px; font-size: 12px;
color: #606060; color: var(--color-muted);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 2px; gap: 2px;

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

@ -2,7 +2,7 @@
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 24px; gap: 24px;
padding: 24px 0px; padding: 32px 24px;
max-width: 1600px; max-width: 1600px;
margin: 0 auto; margin: 0 auto;
} }
@ -14,8 +14,8 @@
.skeleton-thumbnail { .skeleton-thumbnail {
width: 100%; width: 100%;
aspect-ratio: 16 / 9; aspect-ratio: 16 / 9;
background-color: #e5e5e5; background-color: var(--color-surface-muted);
border-radius: 12px; border-radius: 16px;
} }
.skeleton-info { .skeleton-info {
@ -28,7 +28,7 @@
width: 36px; width: 36px;
height: 36px; height: 36px;
border-radius: 50%; border-radius: 50%;
background-color: #e5e5e5; background-color: var(--color-surface-muted);
} }
.skeleton-text { .skeleton-text {
@ -37,7 +37,7 @@
.skeleton-title { .skeleton-title {
height: 16px; height: 16px;
background-color: #e5e5e5; background-color: var(--color-surface-muted);
border-radius: 4px; border-radius: 4px;
margin-bottom: 8px; margin-bottom: 8px;
} }
@ -45,7 +45,7 @@
.skeleton-meta { .skeleton-meta {
height: 12px; height: 12px;
width: 60%; width: 60%;
background-color: #e5e5e5; background-color: var(--color-surface-muted);
border-radius: 4px; border-radius: 4px;
} }
@ -61,13 +61,13 @@
.error-message { .error-message {
text-align: center; text-align: center;
padding: 48px 24px; padding: 48px 24px;
color: #d00; color: var(--color-primary-dark);
} }
.empty-state { .empty-state {
text-align: center; text-align: center;
padding: 48px 24px; padding: 48px 24px;
color: #606060; color: var(--color-muted);
} }
.empty-state h2 { .empty-state h2 {
@ -86,24 +86,27 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
padding: 24px; padding: 32px 24px 48px;
margin: 0 auto; margin: 0 auto;
max-width: 1600px; max-width: 1600px;
} }
.pagination-button { .pagination-button {
padding: 8px 16px; padding: 8px 16px;
background-color: #f2f2f2; background-color: var(--color-mint);
border: none; border: none;
border-radius: 4px; border-radius: 999px;
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
transition: background-color 0.2s; transition: transform 0.2s, box-shadow 0.2s;
color: var(--color-text);
box-shadow: 0 10px 20px rgba(184, 242, 230, 0.4);
} }
.pagination-button:hover:not(:disabled) { .pagination-button:hover:not(:disabled) {
background-color: #e5e5e5; transform: translateY(-2px);
box-shadow: 0 14px 26px rgba(184, 242, 230, 0.55);
} }
.pagination-button:disabled { .pagination-button:disabled {
@ -119,22 +122,25 @@
.pagination-number { .pagination-number {
width: 36px; width: 36px;
height: 36px; height: 36px;
background-color: #f2f2f2; background-color: var(--color-surface);
border: none; border: 1px solid transparent;
border-radius: 4px; border-radius: 999px;
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
transition: background-color 0.2s; transition: background-color 0.2s, color 0.2s, border-color 0.2s;
color: var(--color-text);
} }
.pagination-number:hover { .pagination-number:hover {
background-color: #e5e5e5; background-color: rgba(242, 107, 164, 0.12);
border-color: rgba(242, 107, 164, 0.5);
} }
.pagination-number.active { .pagination-number.active {
background-color: #065fd4; background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
color: white; color: white;
border-color: transparent;
} }
@media (max-width: 768px) { @media (max-width: 768px) {

Write Preview
Loading…
Cancel
Save