TheLounge OLED Stylesheet

thelounge-oled.css · 1.7 KiB · CSS Raw

/* Variables */
:root {
  --body-bg-color: #1c1e26;
  --window-bg-color: #191b20;
  --border-color: #2e2e2e;
  --time-color: #444;
  --time-color-hover: #444;
  --body-color-muted: #666;
  --font-size: 16px;
  --font-size-msg: 16px;
  --font-size-nick: 16px;
  --font-size-chat-timestamp: 16px;
  --font-size-channel-list: 16px;
  --font-size-embed-text: 16px;
}

/* Amoled on mobile */
@media (max-width: 680px) {
  :root {
    --font-size-chat-timestamp: 12px;
    --body-bg-color: #000;
    --window-bg-color: #000;
    --background-color-msg-self-conversation-layout: #121212;
    --highlight-bg-color-mobile-conversation-layout: #2c2c20;
    --chat-bubble-background: #000;
    --color-timestamp-self-mobile-conversation-layout: #666;
    --color-timestamp-highlight-mobile-conversation-layout: #666;
    --time-color: #666;
    --time-color-hover: #666;
    --body-color-muted: #888;
    --border-color: #222;
  }

.msg:not(.self) {
    max-width: calc(100% - 10px) !important;
    width: 100% !important;
  }
}

/* Amoled on desktop */
:root {
  --font-size-chat-timestamp: 12px;
  --body-bg-color: #000;
  --window-bg-color: #000;
  --background-color-msg-self-conversation-layout: #121212;
  --highlight-bg-color-mobile-conversation-layout: #2c2c20;
  --chat-bubble-background: #000;
  --color-timestamp-self-mobile-conversation-layout: #666;
  --color-timestamp-highlight-mobile-conversation-layout: #666;
  --time-color: #666;
  --time-color-hover: #666;
  --body-color-muted: #888;
  --border-color: #222;
}

button::before,
button {
  color: var(--body-color-muted) !important;
}

.settings-menu li {
  font-size: 16px;
}

form.message-search input {
  color: #0d162d !important;
}

1	/* Variables */
2	:root {
3	--body-bg-color: #1c1e26;
4	--window-bg-color: #191b20;
5	--border-color: #2e2e2e;
6	--time-color: #444;
7	--time-color-hover: #444;
8	--body-color-muted: #666;
9	--font-size: 16px;
10	--font-size-msg: 16px;
11	--font-size-nick: 16px;
12	--font-size-chat-timestamp: 16px;
13	--font-size-channel-list: 16px;
14	--font-size-embed-text: 16px;
15	}
16
17	/* Amoled on mobile */
18	@media (max-width: 680px) {
19	:root {
20	--font-size-chat-timestamp: 12px;
21	--body-bg-color: #000;
22	--window-bg-color: #000;
23	--background-color-msg-self-conversation-layout: #121212;
24	--highlight-bg-color-mobile-conversation-layout: #2c2c20;
25	--chat-bubble-background: #000;
26	--color-timestamp-self-mobile-conversation-layout: #666;
27	--color-timestamp-highlight-mobile-conversation-layout: #666;
28	--time-color: #666;
29	--time-color-hover: #666;
30	--body-color-muted: #888;
31	--border-color: #222;
32	}
33
34	.msg:not(.self) {
35	max-width: calc(100% - 10px) !important;
36	width: 100% !important;
37	}
38	}
39
40	/* Amoled on desktop */
41	:root {
42	--font-size-chat-timestamp: 12px;
43	--body-bg-color: #000;
44	--window-bg-color: #000;
45	--background-color-msg-self-conversation-layout: #121212;
46	--highlight-bg-color-mobile-conversation-layout: #2c2c20;
47	--chat-bubble-background: #000;
48	--color-timestamp-self-mobile-conversation-layout: #666;
49	--color-timestamp-highlight-mobile-conversation-layout: #666;
50	--time-color: #666;
51	--time-color-hover: #666;
52	--body-color-muted: #888;
53	--border-color: #222;
54	}
55
56	button::before,
57	button {
58	color: var(--body-color-muted) !important;
59	}
60
61	.settings-menu li {
62	font-size: 16px;
63	}
64
65	form.message-search input {
66	color: #0d162d !important;
67	}
68