Last active
August 16, 2023 20:12
-
-
Save ooliver1/3da0ca0c1bc22e17638950f06f2427da to your computer and use it in GitHub Desktop.
Discord dark theme for https://next.elu.pages.dev/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
:root { | |
--brand-260: hsl(235, 86.2%, 88.6%); | |
--brand-500-hsl: 235 85.6% 64.7%; | |
--primary-230: hsl(210, 9.1%, 87.1%); | |
--primary-560: hsl(225, 6.3%, 23.5%); | |
--primary-600: hsl(223, 6.7%, 20.6%); | |
--primary-630: hsl(220, 6.5%, 18.0%); | |
--primary-700: hsl(225, 6.3%, 12.5%); | |
--primary-730: hsl(225, 7.1%, 11%); | |
--primary-860-hsl: 240 7.7% 2.5%; | |
--primary-900-hsl: 0 0% 0.8%; | |
--yellow-300: hsl(var(--yellow-300-hsl)); | |
--yellow-300-hsl: 40 86.4% 56.9%; | |
--info-warning-foreground: var(--yellow-300); | |
--color-bg: var(--primary-600); | |
--color-text: var(--primary-230); | |
--interactive: hsl(215, 8.8%, 73.3%); | |
--interactive-hover: hsl(210, 9.1%, 87.1%); | |
--interactive-hover-bg: hsla(228, 6%, 32.5%, 0.6); | |
--message-hover-bg: hsla(0, 0%, 0.8%, 0.06); | |
--mention-background: hsl(var(--brand-500-hsl)/0.3); | |
--background-mentioned: hsl(var(--yellow-300-hsl)/0.1); | |
--background-mentioned-hover: hsl(var(--yellow-300-hsl)/0.08); | |
--scrollbar-color-track: var(--primary-730); | |
--scrollbar-color-thumb: var(--primary-630); | |
--elevation-low: 0 1px 0 hsl(var(--primary-900-hsl)/0.2), 0 1.5px 0 hsl(var(--primary-860-hsl)/0.05), 0 2px 0 hsl(var(--primary-900-hsl)/0.05); | |
} | |
#settings-link { | |
width: 20px; | |
height: 20px; | |
padding: 6px; | |
border-radius: 4px; | |
font-size: 0; | |
background-repeat: no-repeat; | |
background-position: center; | |
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20role%3D%22img%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22hsl%28215%2C%208.8%25%2C%2073.3%25%29%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M19.738%2010H22V14H19.739C19.498%2014.931%2019.1%2015.798%2018.565%2016.564L20%2018L18%2020L16.565%2018.564C15.797%2019.099%2014.932%2019.498%2014%2019.738V22H10V19.738C9.069%2019.498%208.203%2019.099%207.436%2018.564L6%2020L4%2018L5.436%2016.564C4.901%2015.799%204.502%2014.932%204.262%2014H2V10H4.262C4.502%209.068%204.9%208.202%205.436%207.436L4%206L6%204L7.436%205.436C8.202%204.9%209.068%204.502%2010%204.262V2H14V4.261C14.932%204.502%2015.797%204.9%2016.565%205.435L18%203.999L20%205.999L18.564%207.436C19.099%208.202%2019.498%209.069%2019.738%2010ZM12%2016C14.2091%2016%2016%2014.2091%2016%2012C16%209.79086%2014.2091%208%2012%208C9.79086%208%208%209.79086%208%2012C8%2014.2091%209.79086%2016%2012%2016Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E); | |
} | |
#settings-link:hover { | |
background-color: var(--interactive-hover-bg); | |
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20role%3D%22img%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22hsl%28210%2C%209.1%25%2C%2087.1%25%29%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M19.738%2010H22V14H19.739C19.498%2014.931%2019.1%2015.798%2018.565%2016.564L20%2018L18%2020L16.565%2018.564C15.797%2019.099%2014.932%2019.498%2014%2019.738V22H10V19.738C9.069%2019.498%208.203%2019.099%207.436%2018.564L6%2020L4%2018L5.436%2016.564C4.901%2015.799%204.502%2014.932%204.262%2014H2V10H4.262C4.502%209.068%204.9%208.202%205.436%207.436L4%206L6%204L7.436%205.436C8.202%204.9%209.068%204.502%2010%204.262V2H14V4.261C14.932%204.502%2015.797%204.9%2016.565%205.435L18%203.999L20%205.999L18.564%207.436C19.099%208.202%2019.498%209.069%2019.738%2010ZM12%2016C14.2091%2016%2016%2014.2091%2016%2012C16%209.79086%2014.2091%208%2012%208C9.79086%208%208%209.79086%208%2012C8%2014.2091%209.79086%2016%2012%2016Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E); | |
} | |
#logout-button { | |
font-size: 0; | |
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20role%3D%22img%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22hsl%28215%2C%208.8%25%2C%2073.3%25%29%22%20d%3D%22M18%202H7C5.897%202%205%202.898%205%204V11H12.59L10.293%208.708L11.706%207.292L16.414%2011.991L11.708%2016.706L10.292%2015.294L12.582%2013H5V20C5%2021.103%205.897%2022%207%2022H18C19.103%2022%2020%2021.103%2020%2020V4C20%202.898%2019.103%202%2018%202Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E); | |
background-position: right 6px center; | |
background-color: transparent !important; | |
box-shadow: none !important; | |
background-repeat: no-repeat; | |
color: var(--interactive) !important; | |
padding: 6px !important; | |
padding-right: 38px !important; | |
border-radius: 4px !important; | |
} | |
#logout-button:hover { | |
background-color: var(--interactive-hover-bg) !important; | |
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20role%3D%22img%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22hsl%28210%2C%209.1%25%2C%2087.1%25%29%22%20d%3D%22M18%202H7C5.897%202%205%202.898%205%204V11H12.59L10.293%208.708L11.706%207.292L16.414%2011.991L11.708%2016.706L10.292%2015.294L12.582%2013H5V20C5%2021.103%205.897%2022%207%2022H18C19.103%2022%2020%2021.103%2020%2020V4C20%202.898%2019.103%202%2018%202Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E); | |
} | |
#logout-button::after { | |
content: 'Log Out'; | |
font-size: initial; | |
} | |
#logout-button:hover { | |
background-color: var(--interactive-hover); | |
} | |
#users { | |
background-color: var(--primary-630); | |
margin: 0; | |
} | |
.message:hover { | |
background-color: var(--message-hover-bg) !important; | |
} | |
#messages { | |
scrollbar-width: auto; | |
scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track); | |
} | |
#messages::-webkit-scrollbar { | |
width: 16px; | |
height: 16px; | |
} | |
#messages::-webkit-scrollbar-track { | |
background-color: var(--scrollbar-color-track); | |
} | |
#messages::-webkit-scrollbar-thumb, | |
#messages::-webkit-scrollbar-track { | |
border: 4px solid transparent; | |
background-clip: padding-box; | |
border-radius: 8px; | |
} | |
#messages::-webkit-scrollbar-thumb { | |
background-color: var(--scrollbar-auto-thumb); | |
min-height: 40px; | |
} | |
#messages::-webkit-scrollbar-corner { | |
background-color: transparent; | |
} | |
#options-div { | |
background-color: var(--primary-600) !important; | |
box-shadow: var(--elevation-low); | |
} | |
#settings-div textarea { | |
border: none !important; | |
background-color: var(--primary-700) !important; | |
color: var(--text-normal) !important; | |
} | |
#message-input-form { | |
background-color: var(--primary-560) !important; | |
color: var(--color-text) !important; | |
} | |
.mention { | |
color: var(--mention-foreground) !important; | |
background: var(--mention-background) !important; | |
} | |
.message.mentioned { | |
background-color: var(--background-mentioned) !important; | |
position: relative; | |
} | |
.message.mentioned:hover { | |
background-color: var(--background-mentioned-hover) !important; | |
} | |
.message.mentioned::before { | |
content: ''; | |
position: absolute; | |
display: block; | |
top: 0; | |
left: 0; | |
bottom: 0; | |
pointer-events: none; | |
width: 2px; | |
background-color: var(--info-warning-foreground); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment