mirror of
https://github.com/thelounge/thelounge
synced 2024-11-26 05:50:22 +00:00
Introduce some CSS variables to simplify writing themes that stay close to the default style
This commit is contained in:
Jérémie Astori
parent
8137ece450
commit
f814d7369c
2 changed files with 33 additions and 60 deletions
|
|
@ -2,8 +2,23 @@
|
|||
@import "bootstrap.css";
|
||||
|
||||
:root {
|
||||
/* Main text color */
|
||||
--body-color: #222;
|
||||
|
||||
/* Background color of the whole page */
|
||||
--body-bg-color: #415364;
|
||||
|
||||
/* Links and link-looking buttons */
|
||||
--link-color: #50a656;
|
||||
|
||||
/* Background color of the main window */
|
||||
--window-bg-color: #fff;
|
||||
|
||||
/* Color of the date marker, text and separator */
|
||||
--date-marker-color: rgba(0, 107, 59, 0.5);
|
||||
|
||||
/* Color of the unread message marker, text and separator */
|
||||
--unread-marker-color: rgba(231, 76, 60, 0.5);
|
||||
}
|
||||
|
||||
/* Samsung Internet <7.0 and Microsoft Edge support (yes, both of them use webkit prefix) */
|
||||
|
|
@ -23,8 +38,8 @@ body {
|
|||
}
|
||||
|
||||
body {
|
||||
background: #415364;
|
||||
color: #222;
|
||||
background: var(--body-bg-color);
|
||||
color: var(--body-color);
|
||||
font: 16px -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
margin: 0;
|
||||
-webkit-user-select: none;
|
||||
|
|
@ -481,7 +496,7 @@ kbd {
|
|||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid white;
|
||||
border: 2px solid var(--window-bg-color);
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
background-clip: padding-box; /* Fix border-radius bleeding color */
|
||||
|
|
@ -866,7 +881,7 @@ background on hover (unless active) */
|
|||
}
|
||||
|
||||
#windows .window {
|
||||
background: #fff;
|
||||
background: var(--window-bg-color);
|
||||
display: none;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
|
|
@ -1036,7 +1051,6 @@ background on hover (unless active) */
|
|||
}
|
||||
|
||||
#chat .userlist {
|
||||
background: #fff;
|
||||
border-left: 1px solid #e7e7e7;
|
||||
width: 180px;
|
||||
display: flex;
|
||||
|
|
@ -1113,13 +1127,13 @@ background on hover (unless active) */
|
|||
left: 0;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
border-top: 1px solid rgba(231, 76, 60, 0.5);
|
||||
border-top: 1px solid var(--unread-marker-color);
|
||||
}
|
||||
|
||||
#chat .unread-marker-text::before {
|
||||
content: "New messages";
|
||||
background-color: white;
|
||||
color: rgba(231, 76, 60, 0.5);
|
||||
background-color: var(--window-bg-color);
|
||||
color: var(--unread-marker-color);
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
|
|
@ -1143,13 +1157,13 @@ background on hover (unless active) */
|
|||
left: 0;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
border-top: 1px solid rgba(0, 107, 59, 0.5);
|
||||
border-top: 1px solid var(--date-marker-color);
|
||||
}
|
||||
|
||||
#chat .date-marker-text::before {
|
||||
content: attr(data-label);
|
||||
background-color: white;
|
||||
color: rgba(0, 107, 59, 0.5);
|
||||
background-color: var(--window-bg-color);
|
||||
color: var(--date-marker-color);
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
|
|
@ -1489,7 +1503,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
|
|||
}
|
||||
|
||||
#chat .userlist .search {
|
||||
color: #222;
|
||||
color: var(--body-color);
|
||||
border: 0;
|
||||
background: none;
|
||||
font: inherit;
|
||||
|
|
@ -2309,7 +2323,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
|
|||
}
|
||||
|
||||
#sidebar {
|
||||
background: #415364;
|
||||
background: var(--body-bg-color);
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: -220px;
|
||||
|
|
@ -2370,6 +2384,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
|
|||
}
|
||||
|
||||
#chat .userlist {
|
||||
background-color: var(--window-bg-color);
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
@import 'default.css';
|
||||
|
||||
:root {
|
||||
--body-color: #f3f3f3;
|
||||
--link-color: #77abd9;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #f3f3f3;
|
||||
--window-bg-color: #303e4a;
|
||||
--date-marker-color: #97ea70;
|
||||
--unread-marker-color: #f92772;
|
||||
}
|
||||
|
||||
#windows .logo {
|
||||
|
|
@ -16,13 +16,6 @@ body {
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
#main,
|
||||
#chat .userlist,
|
||||
#windows .chan,
|
||||
#windows .window {
|
||||
background: #303e4a;
|
||||
}
|
||||
|
||||
#chat .userlist .count {
|
||||
background-color: #28333d;
|
||||
}
|
||||
|
|
@ -31,10 +24,6 @@ body {
|
|||
color: #b7c5d1;
|
||||
}
|
||||
|
||||
#chat .userlist .search {
|
||||
color: #f3f3f3;
|
||||
}
|
||||
|
||||
/* Borders */
|
||||
#chat .content,
|
||||
#windows #chat .header,
|
||||
|
|
@ -44,10 +33,6 @@ body {
|
|||
}
|
||||
|
||||
/* User list */
|
||||
#chat .user-mode {
|
||||
color: #f3f3f3;
|
||||
}
|
||||
|
||||
#chat .userlist .user.active {
|
||||
background-color: #28333d;
|
||||
}
|
||||
|
|
@ -99,7 +84,7 @@ body {
|
|||
#windows #form .input {
|
||||
background-color: #28333d;
|
||||
border-color: #28333d;
|
||||
color: #f3f3f3;
|
||||
color: var(--body-color);
|
||||
}
|
||||
|
||||
#form #nick {
|
||||
|
|
@ -115,10 +100,6 @@ body {
|
|||
color: #b7c5d1;
|
||||
}
|
||||
|
||||
#windows .header {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#windows .header .topic {
|
||||
color: #b7c5d1;
|
||||
}
|
||||
|
|
@ -130,29 +111,6 @@ body {
|
|||
color: #b7c5d1;
|
||||
}
|
||||
|
||||
/* Notification dot on the top right corner of the menu icon */
|
||||
#viewport .lt::after {
|
||||
border-color: #303e4a;
|
||||
}
|
||||
|
||||
#chat .unread-marker-text::before {
|
||||
background-color: #303e4a;
|
||||
border-color: #f92772;
|
||||
}
|
||||
|
||||
#chat .unread-marker::before {
|
||||
border-color: #f92772;
|
||||
}
|
||||
|
||||
#chat .date-marker::before {
|
||||
border-color: #97ea70;
|
||||
}
|
||||
|
||||
#chat .date-marker-text::before {
|
||||
background-color: #303e4a;
|
||||
color: #97ea70;
|
||||
}
|
||||
|
||||
/* Setup text colors */
|
||||
#chat .message {
|
||||
color: #f3f3f3;
|
||||
|
|
|
|||
Loading…
Reference in a new issue