Hugging Face's logo

Spaces:
authorizedcabal
/
chatterbox-frenzy
Running

App Files Community
authorizedcabal commited on
Commit
408328a
·
verified ·
1 Parent(s): 1e11cda

can you change this to minimalist black and white

Browse files
Files changed (2) hide show
  1. index.html +2 -3
  2. style.css +43 -42
index.html CHANGED
@@ -11,10 +11,9 @@
11
  </head>
12
  <body class="bg-gray-50 dark:bg-gray-900">
13
  <custom-navbar></custom-navbar>
14
-
15
  <main class="container mx-auto px-4 py-8 max-w-7xl">
16
- <div class="flex flex-col md:flex-row gap-6 rounded-xl overflow-hidden shadow-lg bg-white dark:bg-gray-800 h-[calc(100vh-180px)]">
17
- <!-- Left Pane - Contacts List -->
18
  <div class="w-full md:w-1/3 border-r border-gray-200 dark:border-gray-700 overflow-y-auto">
19
  <div class="p-4 border-b border-gray-200 dark:border-gray-700">
20
  <h2 class="text-xl font-bold text-gray-800 dark:text-white">Conversations</h2>
 
11
  </head>
12
  <body class="bg-gray-50 dark:bg-gray-900">
13
  <custom-navbar></custom-navbar>
 
14
  <main class="container mx-auto px-4 py-8 max-w-7xl">
15
+ <div class="flex flex-col md:flex-row gap-6 overflow-hidden border border-black dark:border-white bg-white dark:bg-black h-[calc(100vh-180px)]">
16
+ <!-- Left Pane - Contacts List -->
17
  <div class="w-full md:w-1/3 border-r border-gray-200 dark:border-gray-700 overflow-y-auto">
18
  <div class="p-4 border-b border-gray-200 dark:border-gray-700">
19
  <h2 class="text-xl font-bold text-gray-800 dark:text-white">Conversations</h2>
style.css CHANGED
@@ -1,88 +1,89 @@
1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2
  /* Custom scrollbar */
3
  ::-webkit-scrollbar {
4
- width: 6px;
5
  }
6
 
7
  ::-webkit-scrollbar-track {
8
- background: #f8f8f8;
9
- border-radius: 3px;
10
  }
11
 
12
  ::-webkit-scrollbar-thumb {
13
- background: #aaa;
14
- border-radius: 3px;
15
- }
16
-
17
- ::-webkit-scrollbar-thumb:hover {
18
- background: #888;
19
  }
20
 
21
  .dark ::-webkit-scrollbar-track {
22
- background: #222;
23
  }
24
 
25
  .dark ::-webkit-scrollbar-thumb {
26
- background: #555;
27
- }
28
-
29
- .dark ::-webkit-scrollbar-thumb:hover {
30
- background: #777;
31
  }
32
 
33
  /* Message bubbles */
34
  .message-bubble {
35
  max-width: 80%;
36
  word-wrap: break-word;
37
- border-radius: 12px;
38
- border: 1px solid #eee;
39
- box-shadow: 0 1px 2px rgba(0,0,0,0.05);
40
- }
41
-
42
- .message-bubble.received {
43
- background-color: white;
44
- color: #111;
45
- border-color: #ddd;
46
  }
47
 
48
  .message-bubble.sent {
49
- background-color: black;
50
- color: white;
51
- border-color: #333;
52
  }
53
 
54
  .dark .message-bubble.received {
55
- background-color: #222;
56
- color: #eee;
57
- border-color: #333;
58
  }
59
 
60
  .dark .message-bubble.sent {
61
- background-color: #444;
62
- color: white;
63
- border-color: #555;
64
  }
65
 
66
- /* Contact item hover */
67
  .contact-item:hover {
68
- background-color: #f5f5f5;
69
  }
70
 
71
  .dark .contact-item:hover {
72
- background-color: #333;
73
  }
74
 
75
  /* Image messages */
76
  .message-image {
77
  max-width: 300px;
78
  max-height: 300px;
79
- border-radius: 8px;
80
- margin: 5px 0;
81
- box-shadow: 0 2px 4px rgba(0,0,0,0.1);
82
- border: 1px solid #eee;
83
  }
84
 
85
  .dark .message-image {
86
- border-color: #444;
87
- box-shadow: 0 2px 4px rgba(0,0,0,0.3);
88
  }
 
1
 
2
+ /* Minimalist Black & White Styles */
3
+ :root {
4
+ --black: #000000;
5
+ --white: #ffffff;
6
+ --light-gray: #f5f5f5;
7
+ --dark-gray: #333333;
8
+ }
9
+
10
+ body {
11
+ background: var(--white);
12
+ color: var(--black);
13
+ }
14
+
15
+ .dark body {
16
+ background: var(--black);
17
+ color: var(--white);
18
+ }
19
+
20
  /* Custom scrollbar */
21
  ::-webkit-scrollbar {
22
+ width: 4px;
23
  }
24
 
25
  ::-webkit-scrollbar-track {
26
+ background: var(--light-gray);
 
27
  }
28
 
29
  ::-webkit-scrollbar-thumb {
30
+ background: var(--dark-gray);
 
 
 
 
 
31
  }
32
 
33
  .dark ::-webkit-scrollbar-track {
34
+ background: var(--black);
35
  }
36
 
37
  .dark ::-webkit-scrollbar-thumb {
38
+ background: var(--white);
 
 
 
 
39
  }
40
 
41
  /* Message bubbles */
42
  .message-bubble {
43
  max-width: 80%;
44
  word-wrap: break-word;
45
+ border-radius: 1px;
46
+ border: 1px solid var(--black);
47
+ background: var(--white);
48
+ color: var(--black);
 
 
 
 
 
49
  }
50
 
51
  .message-bubble.sent {
52
+ background: var(--black);
53
+ color: var(--white);
54
+ border-color: var(--black);
55
  }
56
 
57
  .dark .message-bubble.received {
58
+ background: var(--black);
59
+ color: var(--white);
60
+ border-color: var(--white);
61
  }
62
 
63
  .dark .message-bubble.sent {
64
+ background: var(--white);
65
+ color: var(--black);
66
+ border-color: var(--white);
67
  }
68
 
69
+ /* Contact items */
70
  .contact-item:hover {
71
+ background: var(--light-gray);
72
  }
73
 
74
  .dark .contact-item:hover {
75
+ background: var(--dark-gray);
76
  }
77
 
78
  /* Image messages */
79
  .message-image {
80
  max-width: 300px;
81
  max-height: 300px;
82
+ border-radius: 0;
83
+ margin: 8px 0;
84
+ border: 1px solid var(--black);
 
85
  }
86
 
87
  .dark .message-image {
88
+ border-color: var(--white);
 
89
  }