Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

styles: Use modern color notation. 

postcss-preset-env transpiles this back as necessary.  (It does a
better job than we did, in fact: we had several four-argument hsl()
calls that should have been hsla().)

Signed-off-by: Anders Kaseorg <anders@zulip.com>
This commit is contained in:
Anders Kaseorg 2023-03-20 14:08:47 -07:00
parent 4853a9a736
commit d274583d8f
41 changed files with 1623 additions and 1601 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
stylelint.config.js
View File

@ -20,11 +20,6 @@ module.exports = {
"selector-class-pattern": null, "selector-class-pattern": null,
"selector-id-pattern": null, "selector-id-pattern": null,
// Compatibility with older browsers
"alpha-value-notation": "number",
"color-function-notation": "legacy",
"hue-degree-notation": "number",
// Limit language features // Limit language features
"color-no-hex": true, "color-no-hex": true,
"color-named": "never", "color-named": "never",
@ -35,9 +30,8 @@ module.exports = {
], ],
}, },
"function-disallowed-list": [ "function-disallowed-list": [
// We use hsl(a) instead of rgb(a) // We use hsl instead of rgb
"rgb", "rgb",
"rgba",
], ],
// Zulip CSS should have no dependencies on external resources // Zulip CSS should have no dependencies on external resources

44
web/styles/alerts.css
View File

@ -1,5 +1,5 @@
$alert-red: hsl(16, 60%, 45%); $alert-red: hsl(16deg 60% 45%);
$alert-error-red: hsl(0, 80%, 40%); $alert-error-red: hsl(0deg 80% 40%);
.alert-display { .alert-display {
display: none; display: none;
@ -43,15 +43,15 @@ $alert-error-red: hsl(0, 80%, 40%);
@extend .alert-display, .alert-animations; @extend .alert-display, .alert-animations;
font-size: 1rem; font-size: 1rem;
color: hsl(0, 80%, 40%); color: hsl(0deg 80% 40%);
margin-top: 5px; margin-top: 5px;
padding: 1rem 0; padding: 1rem 0;
background-color: hsl(0, 100%, 98%); background-color: hsl(0deg 100% 98%);
border-radius: 4px; border-radius: 4px;
border: 1px solid hsl(0, 80%, 40%); border: 1px solid hsl(0deg 80% 40%);
box-shadow: 0 0 2px hsl(0, 80%, 40%); box-shadow: 0 0 2px hsl(0deg 80% 40%);
.stacktrace-header { .stacktrace-header {
display: flex; display: flex;
@ -89,22 +89,22 @@ $alert-error-red: hsl(0, 80%, 40%);
.expand { .expand {
cursor: pointer; cursor: pointer;
color: hsl(0, 32%, 83%); color: hsl(0deg 32% 83%);
&:hover { &:hover {
color: hsl(0, 0%, 20%); color: hsl(0deg 0% 20%);
} }
} }
.subtle { .subtle {
color: hsl(0, 7%, 45%); color: hsl(0deg 7% 45%);
} }
.code-context { .code-context {
color: hsl(0, 7%, 15%); color: hsl(0deg 7% 15%);
background-color: hsl(0, 7%, 98%); background-color: hsl(0deg 7% 98%);
box-shadow: inset 0 11px 10px -10px hsl(0, 7%, 70%), box-shadow: inset 0 11px 10px -10px hsl(0deg 7% 70%),
inset 0 -11px 10px -10px hsl(0, 7%, 70%); inset 0 -11px 10px -10px hsl(0deg 7% 70%);
margin-top: 1em; margin-top: 1em;
margin-bottom: 1em; margin-bottom: 1em;
@ -119,11 +119,11 @@ $alert-error-red: hsl(0, 80%, 40%);
width: 3rem; width: 3rem;
display: inline-block; display: inline-block;
text-align: right; text-align: right;
color: hsl(0, 7%, 35%); color: hsl(0deg 7% 35%);
} }
.focus-line { .focus-line {
background-color: hsl(0, 7%, 90%); background-color: hsl(0deg 7% 90%);
width: 100%; width: 100%;
} }
} }
@ -134,7 +134,7 @@ $alert-error-red: hsl(0, 80%, 40%);
font-size: 1rem; font-size: 1rem;
border-radius: 4px; border-radius: 4px;
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
position: relative; position: relative;
@ -157,7 +157,7 @@ $alert-error-red: hsl(0, 80%, 40%);
overflow: hidden; overflow: hidden;
content: "\f071"; content: "\f071";
color: hsl(16, 60%, 55%); color: hsl(16deg 60% 55%);
} }
&::after { &::after {
@ -261,11 +261,11 @@ $alert-error-red: hsl(0, 80%, 40%);
&.alert-loading, &.alert-loading,
&.alert-success { &.alert-success {
border-color: hsl(156, 28%, 70%); border-color: hsl(156deg 28% 70%);
box-shadow: 0 0 2px hsl(156, 28%, 70%); box-shadow: 0 0 2px hsl(156deg 28% 70%);
.exit { .exit {
color: hsl(156, 30%, 50%); color: hsl(156deg 30% 50%);
} }
} }
@ -296,13 +296,13 @@ $alert-error-red: hsl(0, 80%, 40%);
padding: 7px; padding: 7px;
font-size: 1.5em; font-size: 1.5em;
line-height: 0; line-height: 0;
color: hsl(156, 30%, 50%); color: hsl(156deg 30% 50%);
} }
.alert-content { .alert-content {
grid-column: 2 / 3; grid-column: 2 / 3;
grid-row-start: 1; grid-row-start: 1;
color: hsl(0, 0%, 20%); color: hsl(0deg 0% 20%);
} }
.exit { .exit {

184
web/styles/app_components.css
View File

@ -15,15 +15,15 @@
kbd { kbd {
display: inline-block; display: inline-block;
border: 1px solid hsl(0, 0%, 80%); border: 1px solid hsl(0deg 0% 80%);
border-radius: 4px; border-radius: 4px;
font-weight: 600; font-weight: 600;
white-space: nowrap; white-space: nowrap;
background-color: hsl(0, 0%, 98%); background-color: hsl(0deg 0% 98%);
color: hsl(0, 0%, 20%); color: hsl(0deg 0% 20%);
margin: 0.25em 0.1em; margin: 0.25em 0.1em;
padding: 0.1em 0.4em; padding: 0.1em 0.4em;
text-shadow: 0 1px 0 hsl(0, 0%, 100%); text-shadow: 0 1px 0 hsl(0deg 0% 100%);
/* Prevent selection */ /* Prevent selection */
user-select: none; user-select: none;
} }
@ -76,7 +76,7 @@ kbd {
} }
.box-shadow { .box-shadow {
box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.1); box-shadow: 0 0 10px hsl(0deg 0% 0% / 10%);
} }
.clear-float { .clear-float {
@ -110,7 +110,7 @@ evidence Edge may have bugs in its handling of placeholder opacity
CSS: https://github.com/necolas/normalize.css/issues/741 CSS: https://github.com/necolas/normalize.css/issues/741
*/ */
.placeholder { .placeholder {
color: hsl(0, 0%, 45%); color: hsl(0deg 0% 45%);
opacity: 1; opacity: 1;
} }
@ -130,10 +130,10 @@ input::placeholder {
line-height: normal; line-height: normal;
text-align: center; text-align: center;
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
color: inherit; color: inherit;
outline: none; outline: none;
border: 1px solid hsl(0, 0%, 80%); border: 1px solid hsl(0deg 0% 80%);
border-radius: 2px; border-radius: 2px;
box-shadow: none; box-shadow: none;
@ -157,11 +157,11 @@ input::placeholder {
} }
&.green { &.green {
background-color: hsl(150, 31%, 53%); background-color: hsl(150deg 31% 53%);
} }
&.grey { &.grey {
background-color: hsl(0, 0%, 67%); background-color: hsl(0deg 0% 67%);
} }
&.small { &.small {
@ -172,83 +172,83 @@ input::placeholder {
&:hover, &:hover,
&:focus { &:focus {
border-color: hsl(0, 0%, 60%); border-color: hsl(0deg 0% 60%);
} }
&:active { &:active {
border-color: hsl(0, 0%, 60%); border-color: hsl(0deg 0% 60%);
color: inherit; color: inherit;
background-color: hsl(0, 0%, 95%); background-color: hsl(0deg 0% 95%);
} }
&.sea-green { &.sea-green {
color: hsl(156, 41%, 40%); color: hsl(156deg 41% 40%);
border-color: hsl(156, 28%, 70%); border-color: hsl(156deg 28% 70%);
&:hover, &:hover,
&:focus { &:focus {
border-color: hsl(156, 30%, 50%); border-color: hsl(156deg 30% 50%);
} }
&:active { &:active {
border-color: hsl(156, 30%, 40%); border-color: hsl(156deg 30% 40%);
color: hsl(156, 44%, 43%); color: hsl(156deg 44% 43%);
background-color: hsl(154, 33%, 96%); background-color: hsl(154deg 33% 96%);
} }
} }
&.btn-warning { &.btn-warning {
color: hsl(35, 70%, 56%); color: hsl(35deg 70% 56%);
border-color: hsl(35, 98%, 84%); border-color: hsl(35deg 98% 84%);
&:hover, &:hover,
&:focus { &:focus {
border-color: hsl(35, 55%, 70%); border-color: hsl(35deg 55% 70%);
} }
&:active { &:active {
color: hsl(35, 82%, 40%); color: hsl(35deg 82% 40%);
border-color: hsl(35, 55%, 70%); border-color: hsl(35deg 55% 70%);
background-color: hsl(33, 48%, 96%); background-color: hsl(33deg 48% 96%);
} }
} }
&.btn-danger { &.btn-danger {
color: hsl(357, 64%, 72%); color: hsl(357deg 64% 72%);
border-color: hsl(4, 56%, 82%); border-color: hsl(4deg 56% 82%);
&:hover, &:hover,
&:focus { &:focus {
border-color: hsl(2, 46%, 68%); border-color: hsl(2deg 46% 68%);
} }
&:active { &:active {
color: hsl(357, 55%, 63%); color: hsl(357deg 55% 63%);
border-color: hsl(2, 46%, 68%); border-color: hsl(2deg 46% 68%);
background-color: hsl(7, 82%, 98%); background-color: hsl(7deg 82% 98%);
} }
} }
&.btn-link { &.btn-link {
color: hsl(208, 56%, 53%); color: hsl(208deg 56% 53%);
text-decoration: none; text-decoration: none;
&:hover, &:hover,
&:focus { &:focus {
color: hsl(208, 56%, 38%); color: hsl(208deg 56% 38%);
} }
} }
&:disabled { &:disabled {
cursor: not-allowed; cursor: not-allowed;
filter: saturate(0); filter: saturate(0);
background-color: hsl(0, 0%, 93%); background-color: hsl(0deg 0% 93%);
color: hsl(0, 3%, 52%); color: hsl(0deg 3% 52%);
&:hover { &:hover {
background-color: hsl(0, 0%, 93%); background-color: hsl(0deg 0% 93%);
color: hsl(156, 39%, 54%); color: hsl(156deg 39% 54%);
border-color: hsl(156, 39%, 77%); border-color: hsl(156deg 39% 77%);
} }
} }
} }
@ -270,7 +270,7 @@ input::placeholder {
overflow: hidden; overflow: hidden;
vertical-align: bottom; /* See https://stackoverflow.com/a/43266155/ */ vertical-align: bottom; /* See https://stackoverflow.com/a/43266155/ */
padding: 3px 10px; padding: 3px 10px;
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
cursor: pointer; cursor: pointer;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -280,7 +280,7 @@ input::placeholder {
} }
&:not(.selected) { &:not(.selected) {
border: 1px solid hsl(0, 0%, 80%); border: 1px solid hsl(0deg 0% 80%);
} }
&.first { &.first {
@ -298,16 +298,16 @@ input::placeholder {
&.selected { &.selected {
position: relative; position: relative;
background-color: hsl(0, 0%, 53%); background-color: hsl(0deg 0% 53%);
color: hsl(0, 0%, 100%); color: hsl(0deg 0% 100%);
border: 1px solid hsl(0, 0%, 47%); border: 1px solid hsl(0deg 0% 47%);
z-index: 2; z-index: 2;
} }
&.disabled { &.disabled {
pointer-events: none; pointer-events: none;
color: hsl(0, 0%, 80%); color: hsl(0deg 0% 80%);
border-color: hsl(0, 0%, 87%); border-color: hsl(0deg 0% 87%);
} }
} }
@ -341,7 +341,7 @@ div.overlay {
height: 100%; height: 100%;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
background-color: hsla(0, 0%, 13%, 0.8); background-color: hsl(0deg 0% 13% / 80%);
z-index: 105; z-index: 105;
pointer-events: none; pointer-events: none;
@ -385,7 +385,7 @@ div.overlay {
.clear_search_button { .clear_search_button {
&:hover { &:hover {
color: hsl(0, 0%, 0%); color: hsl(0deg 0% 0%);
} }
&:disabled { &:disabled {
@ -403,7 +403,7 @@ div.overlay {
text-align: center; text-align: center;
padding-top: 8px; padding-top: 8px;
padding-left: 4px; padding-left: 4px;
color: hsl(0, 0%, 80%); color: hsl(0deg 0% 80%);
text-shadow: none; text-shadow: none;
outline: none !important; outline: none !important;
box-shadow: none; box-shadow: none;
@ -420,16 +420,16 @@ div.overlay {
.grey-box { .grey-box {
margin: 0; margin: 0;
padding: 5px 10px; padding: 5px 10px;
background-color: hsl(0, 0%, 98%); background-color: hsl(0deg 0% 98%);
border: 1px solid hsl(0, 0%, 87%); border: 1px solid hsl(0deg 0% 87%);
border-radius: 4px; border-radius: 4px;
list-style-type: none; list-style-type: none;
} }
.white-box { .white-box {
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
border: 1px solid hsl(0, 0%, 87%); border: 1px solid hsl(0deg 0% 87%);
} }
.guest-avatar { .guest-avatar {
@ -438,7 +438,7 @@ div.overlay {
&::after { &::after {
content: " "; content: " ";
background-color: hsl(0, 0%, 47%); background-color: hsl(0deg 0% 47%);
position: absolute; position: absolute;
bottom: -30%; bottom: -30%;
right: -30%; right: -30%;
@ -480,9 +480,9 @@ div.overlay {
.stream-selection-header-colorblock { .stream-selection-header-colorblock {
/* box-shadow: 0px 2px 3px hsl(0, 0%, 80%); */ /* box-shadow: 0px 2px 3px hsl(0, 0%, 80%); */
box-shadow: inset 0 2px 1px -2px hsl(0, 0%, 20%), box-shadow: inset 0 2px 1px -2px hsl(0deg 0% 20%),
inset 2px 0 1px -2px hsl(0, 0%, 20%), inset 2px 0 1px -2px hsl(0deg 0% 20%),
inset 0 -2px 1px -2px hsl(0, 0%, 20%); inset 0 -2px 1px -2px hsl(0deg 0% 20%);
width: 10px; width: 10px;
border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px;
border-bottom: 0; border-bottom: 0;
@ -532,9 +532,9 @@ div.overlay {
} }
.upgrade-tip:hover { .upgrade-tip:hover {
color: hsl(0, 0%, 20%); color: hsl(0deg 0% 20%);
border: 1px solid hsl(49, 20%, 60%); border: 1px solid hsl(49deg 20% 60%);
box-shadow: 0 0 4px hsla(199, 79%, 56%, 0.2); box-shadow: 0 0 4px hsl(199deg 79% 56% / 20%);
text-decoration: none; text-decoration: none;
} }
@ -544,14 +544,14 @@ div.overlay {
.tip { .tip {
position: relative; position: relative;
display: block; display: block;
background-color: hsl(46, 63%, 95%); background-color: hsl(46deg 63% 95%);
border: 1px solid hsl(49, 20%, 84%); border: 1px solid hsl(49deg 20% 84%);
border-radius: 4px; border-radius: 4px;
padding: 10px; padding: 10px;
margin: 10px 0; margin: 10px 0;
font-size: 1rem; font-size: 1rem;
line-height: 1.5; line-height: 1.5;
color: hsl(0, 0%, 40%); color: hsl(0deg 0% 40%);
&::before { &::before {
display: inline; display: inline;
@ -579,8 +579,8 @@ div.overlay {
font-weight: normal; font-weight: normal;
letter-spacing: 0.6px; letter-spacing: 0.6px;
border-radius: 4px; border-radius: 4px;
background-color: hsl(105, 2%, 50%); background-color: hsl(105deg 2% 50%);
color: hsl(0, 0%, 100%); color: hsl(0deg 0% 100%);
} }
.unread_mention_info:not(:empty) { .unread_mention_info:not(:empty) {
@ -635,11 +635,11 @@ div.overlay {
} }
.animated-purple-button { .animated-purple-button {
color: hsl(0, 0%, 100%); color: hsl(0deg 0% 100%);
transition: all 80ms linear; transition: all 80ms linear;
box-shadow: none; box-shadow: none;
/* This color just passes WCAG AA */ /* This color just passes WCAG AA */
background-color: hsl(240, 96%, 68%); background-color: hsl(240deg 96% 68%);
cursor: pointer; cursor: pointer;
border: none; border: none;
border-radius: 4px; border-radius: 4px;
@ -648,13 +648,13 @@ div.overlay {
&:hover { &:hover {
/* This color passes WCAG AAA */ /* This color passes WCAG AAA */
background-color: hsl(240, 41%, 50%); background-color: hsl(240deg 41% 50%);
box-shadow: 0 1px 4px hsl(0, 0%, 0%, 0.3); box-shadow: 0 1px 4px hsl(0deg 0% 0% / 30%);
} }
&:focus { &:focus {
background-color: hsl(240, 41%, 50%); background-color: hsl(240deg 41% 50%);
box-shadow: 0 1px 4px 0 hsl(235, 18%, 7%); box-shadow: 0 1px 4px 0 hsl(235deg 18% 7%);
outline: none; outline: none;
} }
} }
@ -662,21 +662,21 @@ div.overlay {
.color_animated_button { .color_animated_button {
display: flex; display: flex;
justify-content: center; justify-content: center;
background-color: hsl(0, 0%, 90%); background-color: hsl(0deg 0% 90%);
color: hsl(0, 0%, 0%); color: hsl(0deg 0% 0%);
border-radius: 4px; border-radius: 4px;
& span { & span {
color: hsl(0, 0%, 0%); color: hsl(0deg 0% 0%);
} }
&:hover { &:hover {
cursor: pointer; cursor: pointer;
background-color: hsl(240, 96%, 68%); background-color: hsl(240deg 96% 68%);
color: hsl(0, 0%, 100%); color: hsl(0deg 0% 100%);
& span { & span {
color: hsl(0, 0%, 100%); color: hsl(0deg 0% 100%);
transition: all 0.2s ease; transition: all 0.2s ease;
} }
@ -699,9 +699,9 @@ div.overlay {
& thead th { & thead th {
color: inherit; color: inherit;
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
border-top: 1px solid hsla(0, 0%, 0%, 0.2) !important; border-top: 1px solid hsl(0deg 0% 0% / 20%) !important;
border-bottom: 1px solid hsla(0, 0%, 0%, 0.2) !important; border-bottom: 1px solid hsl(0deg 0% 0% / 20%) !important;
&.active::after, &.active::after,
&[data-sort]:hover::after { &[data-sort]:hover::after {
@ -725,7 +725,7 @@ div.overlay {
&[data-sort]:hover { &[data-sort]:hover {
cursor: pointer; cursor: pointer;
background-color: hsla(0, 0%, 95%) !important; background-color: hsl(0deg 0% 95%) !important;
transition: background-color 100ms ease-in-out; transition: background-color 100ms ease-in-out;
&:not(.active)::after { &:not(.active)::after {
@ -752,10 +752,10 @@ div.overlay {
.save-discard-widget-button { .save-discard-widget-button {
border-radius: 5px; border-radius: 5px;
border: 1px solid hsl(0, 0%, 80%); border: 1px solid hsl(0deg 0% 80%);
padding: 3px 14px 4px 11px; padding: 3px 14px 4px 11px;
text-decoration: none; text-decoration: none;
color: hsl(0, 0%, 47%); color: hsl(0deg 0% 47%);
min-width: 80px; min-width: 80px;
/* Limit the height of the button */ /* Limit the height of the button */
line-height: 1.2; line-height: 1.2;
@ -763,32 +763,32 @@ div.overlay {
&:hover, &:hover,
&:focus { &:focus {
border: 1px solid hsl(0, 0%, 61%); border: 1px solid hsl(0deg 0% 61%);
.discard-button.save-discard-widget-button-text { .discard-button.save-discard-widget-button-text {
color: hsl(0, 0%, 18%); color: hsl(0deg 0% 18%);
} }
} }
&.primary { &.primary {
background-color: hsl(156, 30%, 50%); background-color: hsl(156deg 30% 50%);
color: hsl(0, 0%, 100%); color: hsl(0deg 0% 100%);
border: 1px solid hsl(155, 30%, 50%); border: 1px solid hsl(155deg 30% 50%);
&:hover, &:hover,
&:focus { &:focus {
background-color: hsl(166, 35%, 57%); background-color: hsl(166deg 35% 57%);
border: 1px solid hsl(166, 35%, 57%); border: 1px solid hsl(166deg 35% 57%);
} }
.save-discard-widget-button-icon { .save-discard-widget-button-icon {
font-weight: lighter; font-weight: lighter;
color: hsl(0, 0%, 100%); color: hsl(0deg 0% 100%);
} }
&.saving { &.saving {
background-color: hsl(156, 14%, 40%); background-color: hsl(156deg 14% 40%);
border-color: hsl(156, 14%, 40%); border-color: hsl(156deg 14% 40%);
} }
} }

10
web/styles/components.css
View File

@ -28,7 +28,7 @@
line-height: 0.8; line-height: 0.8;
font-size: 1.3rem; font-size: 1.3rem;
text-align: center; text-align: center;
border: 1px solid hsla(0, 0%, 0%, 0.6); border: 1px solid hsl(0deg 0% 0% / 60%);
border-radius: 4px; border-radius: 4px;
filter: brightness(0.8); filter: brightness(0.8);
@ -70,8 +70,8 @@ a.no-underline:hover {
.simplebar-track { .simplebar-track {
.simplebar-scrollbar::before { .simplebar-scrollbar::before {
background-color: hsl(0, 0%, 0%); background-color: hsl(0deg 0% 0%);
box-shadow: 0 0 0 1px hsla(0, 0%, 100%, 0.33); box-shadow: 0 0 0 1px hsl(0deg 0% 100% / 33%);
} }
&.simplebar-vertical { &.simplebar-vertical {
@ -94,7 +94,7 @@ a.no-underline:hover {
} }
i.zulip-icon.zulip-icon-bot { i.zulip-icon.zulip-icon-bot {
color: hsl(180, 5%, 74%); color: hsl(180deg 5% 74%);
vertical-align: top; vertical-align: top;
padding: 0 2px; padding: 0 2px;
} }
@ -129,7 +129,7 @@ input::-ms-reveal {
select.bootstrap-focus-style { select.bootstrap-focus-style {
&:focus { &:focus {
outline: 1px dotted hsl(0, 0%, 20%); outline: 1px dotted hsl(0deg 0% 20%);
outline: 5px auto -webkit-focus-ring-color; outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px; outline-offset: -2px;
} }

114
web/styles/compose.css
View File

@ -52,11 +52,11 @@
/* Main geometry for this element is in zulip.css */ /* Main geometry for this element is in zulip.css */
#compose-content { #compose-content {
border-top: 1px solid hsla(0, 0%, 0%, 0.07); border-top: 1px solid hsl(0deg 0% 0% / 7%);
transition: background-color 200ms linear; transition: background-color 200ms linear;
padding: 4px 4px 8px; padding: 4px 4px 8px;
border-left: 1px solid hsl(0, 0%, 93%); border-left: 1px solid hsl(0deg 0% 93%);
border-right: 1px solid hsl(0, 0%, 93%); border-right: 1px solid hsl(0deg 0% 93%);
height: 100%; height: 100%;
display: flex; display: flex;
flex-flow: column; flex-flow: column;
@ -92,7 +92,7 @@
&.message_header_private_message { &.message_header_private_message {
border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px;
border-bottom: 0; border-bottom: 0;
background-color: hsl(0, 0%, 27%); background-color: hsl(0deg 0% 27%);
} }
} }
@ -157,7 +157,7 @@
.message_header { .message_header {
background: none; background: none;
background-color: hsl(0, 0%, 92%); background-color: hsl(0deg 0% 92%);
border: none; border: none;
border-radius: 0; border-radius: 0;
box-shadow: none !important; box-shadow: none !important;
@ -213,11 +213,11 @@
#compose_limit_indicator { #compose_limit_indicator {
margin-right: 8px; margin-right: 8px;
font-size: 12px; font-size: 12px;
color: hsl(39, 100%, 50%); color: hsl(39deg 100% 50%);
align-self: center; align-self: center;
&.over_limit { &.over_limit {
color: hsl(0, 76%, 65%); color: hsl(0deg 76% 65%);
font-weight: bold; font-weight: bold;
} }
} }
@ -229,7 +229,7 @@
z-index: 4; z-index: 4;
width: 100%; width: 100%;
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
} }
#compose-container { #compose-container {
@ -321,100 +321,100 @@
} }
&.success { &.success {
background-color: hsl(147, 43%, 92%); background-color: hsl(147deg 43% 92%);
border: 1px solid hsla(147, 57%, 25%, 0.4); border: 1px solid hsl(147deg 57% 25% / 40%);
color: hsl(147, 57%, 25%); color: hsl(147deg 57% 25%);
.compose_banner_close_button { .compose_banner_close_button {
color: hsla(147, 57%, 25%, 0.5); color: hsl(147deg 57% 25% / 50%);
&:hover { &:hover {
color: hsl(147, 57%, 25%); color: hsl(147deg 57% 25%);
} }
&:active { &:active {
color: hsla(147, 57%, 25%, 0.75); color: hsl(147deg 57% 25% / 75%);
} }
} }
} }
&.warning { &.warning {
background-color: hsl(50, 75%, 92%); background-color: hsl(50deg 75% 92%);
border-color: hsla(38, 44%, 27%, 0.4); border-color: hsl(38deg 44% 27% / 40%);
color: hsl(38, 44%, 27%); color: hsl(38deg 44% 27%);
.compose_banner_close_button { .compose_banner_close_button {
color: hsla(38, 44%, 27%, 0.5); color: hsl(38deg 44% 27% / 50%);
&:hover { &:hover {
color: hsl(38, 44%, 27%); color: hsl(38deg 44% 27%);
} }
&:active { &:active {
color: hsla(38, 44%, 27%, 0.75); color: hsl(38deg 44% 27% / 75%);
} }
} }
.compose_banner_action_button { .compose_banner_action_button {
background-color: hsla(38, 44%, 27%, 0.1); background-color: hsl(38deg 44% 27% / 10%);
color: inherit; color: inherit;
&:hover { &:hover {
background-color: hsla(38, 44%, 27%, 0.12); background-color: hsl(38deg 44% 27% / 12%);
} }
&:active { &:active {
background-color: hsla(38, 44%, 27%, 0.15); background-color: hsl(38deg 44% 27% / 15%);
} }
} }
} }
&.error { &.error {
background-color: hsl(4, 35%, 90%); background-color: hsl(4deg 35% 90%);
border-color: hsla(3, 57%, 33%, 0.4); border-color: hsl(3deg 57% 33% / 40%);
color: hsl(4, 58%, 33%); color: hsl(4deg 58% 33%);
.compose_banner_close_button { .compose_banner_close_button {
color: hsla(4, 58%, 33%, 0.5); color: hsl(4deg 58% 33% / 50%);
&:hover { &:hover {
color: hsl(4, 58%, 33%); color: hsl(4deg 58% 33%);
} }
&:active { &:active {
color: hsla(4, 58%, 33%, 0.75); color: hsl(4deg 58% 33% / 75%);
} }
} }
.compose_banner_action_button { .compose_banner_action_button {
background-color: hsla(3, 57%, 33%, 0.1); background-color: hsl(3deg 57% 33% / 10%);
color: inherit; color: inherit;
&:hover { &:hover {
background-color: hsla(3, 57%, 33%, 0.12); background-color: hsl(3deg 57% 33% / 12%);
} }
&:active { &:active {
background-color: hsla(3, 57%, 33%, 0.15); background-color: hsl(3deg 57% 33% / 15%);
} }
} }
} }
&.info { &.info {
background-color: hsl(204, 58%, 92%); background-color: hsl(204deg 58% 92%);
border-color: hsla(204, 49%, 29%, 0.4); border-color: hsl(204deg 49% 29% / 40%);
position: relative; position: relative;
color: hsl(204, 49%, 29%); color: hsl(204deg 49% 29%);
.compose_banner_close_button { .compose_banner_close_button {
color: hsla(204, 49%, 29%, 0.5); color: hsl(204deg 49% 29% / 50%);
&:hover { &:hover {
color: hsl(204, 49%, 29%); color: hsl(204deg 49% 29%);
} }
&:active { &:active {
color: hsla(204, 49%, 29%, 0.75); color: hsl(204deg 49% 29% / 75%);
} }
} }
} }
@ -433,7 +433,7 @@
/* The progress updates seem to come every second or so, /* The progress updates seem to come every second or so,
so this is the smoothest it can probably get. */ so this is the smoothest it can probably get. */
transition: width 1s ease-in-out; transition: width 1s ease-in-out;
background: hsl(204, 63%, 85%); background: hsl(204deg 63% 85%);
top: 0; top: 0;
bottom: 0; bottom: 0;
} }
@ -456,7 +456,7 @@
} }
100% { 100% {
box-shadow: 0 0 0 1pt hsl(0, 76%, 65%); box-shadow: 0 0 0 1pt hsl(0deg 76% 65%);
} }
} }
@ -470,12 +470,12 @@ textarea.new_message_textarea {
resize: vertical !important; resize: vertical !important;
margin-top: 5px; margin-top: 5px;
border-radius: 4px; border-radius: 4px;
color: hsl(0, 0%, 33%); color: hsl(0deg 0% 33%);
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
&.over_limit, &.over_limit,
&.over_limit:focus { &.over_limit:focus {
box-shadow: 0 0 0 1pt hsl(0, 76%, 65%); box-shadow: 0 0 0 1pt hsl(0deg 76% 65%);
&.flash { &.flash {
animation: message-limit-flash 0.5s ease-in-out infinite; animation: message-limit-flash 0.5s ease-in-out infinite;
@ -485,25 +485,25 @@ textarea.new_message_textarea {
&:read-only, &:read-only,
&:disabled { &:disabled {
cursor: not-allowed; cursor: not-allowed;
background-color: hsl(0, 0%, 93%); background-color: hsl(0deg 0% 93%);
} }
&.invalid, &.invalid,
&.invalid:focus { &.invalid:focus {
border: 1px solid hsl(3, 57%, 33%); border: 1px solid hsl(3deg 57% 33%);
box-shadow: 0 0 2px hsl(3, 57%, 33%); box-shadow: 0 0 2px hsl(3deg 57% 33%);
} }
} }
textarea.new_message_textarea, textarea.new_message_textarea,
.compose_table .recipient_box { .compose_table .recipient_box {
border: 1px solid hsla(0, 0%, 0%, 0.2); border: 1px solid hsl(0deg 0% 0% / 20%);
box-shadow: none; box-shadow: none;
transition: border 0.2s ease; transition: border 0.2s ease;
&:focus { &:focus {
outline: 0; outline: 0;
border: 1px solid hsl(0, 0%, 67%); border: 1px solid hsl(0deg 0% 67%);
box-shadow: none; box-shadow: none;
} }
} }
@ -572,7 +572,7 @@ input.recipient_box {
margin: 4px 0 0; margin: 4px 0 0;
&:focus { &:focus {
outline: 1px dotted hsl(0, 0%, 20%); outline: 1px dotted hsl(0deg 0% 20%);
outline: 5px auto -webkit-focus-ring-color; outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px; outline-offset: -2px;
} }
@ -580,7 +580,7 @@ input.recipient_box {
&:first-child { &:first-child {
padding: 0 0 4px; padding: 0 0 4px;
border-bottom: 1px solid hsla(0, 0%, 0%, 0.2); border-bottom: 1px solid hsl(0deg 0% 0% / 20%);
} }
} }
@ -593,7 +593,7 @@ input.recipient_box {
.enter_sends_minor kbd { .enter_sends_minor kbd {
opacity: 0.9; opacity: 0.9;
font-size: 11px; font-size: 11px;
color: hsl(0, 0%, 50%); color: hsl(0deg 0% 50%);
} }
} }
@ -694,7 +694,7 @@ input.recipient_box {
} }
.divider { .divider {
color: hsl(0, 0%, 88%); color: hsl(0deg 0% 88%);
font-size: 20px; font-size: 20px;
margin: 0 3px; margin: 0 3px;
} }
@ -764,9 +764,9 @@ a.compose_control_button.hide {
min-height: 42px; min-height: 42px;
overflow: auto; overflow: auto;
border: 1px solid hsl(0, 0%, 67%); border: 1px solid hsl(0deg 0% 67%);
border-radius: 4px; border-radius: 4px;
background-color: hsla(0, 0%, 0%, 0.02); background-color: hsl(0deg 0% 0% / 2%);
cursor: not-allowed; cursor: not-allowed;
} }
@ -778,7 +778,7 @@ a.compose_control_button.hide {
& ul { & ul {
list-style: none; list-style: none;
margin: 0; margin: 0;
background: hsl(0, 0%, 100%); background: hsl(0deg 0% 100%);
} }
.typeahead-header { .typeahead-header {
@ -786,7 +786,7 @@ a.compose_control_button.hide {
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
padding-top: 4px; padding-top: 4px;
border-top: 1px solid hsla(0, 0%, 0%, 0.2); border-top: 1px solid hsl(0deg 0% 0% / 20%);
display: flex; display: flex;
align-items: center; align-items: center;
} }
@ -796,7 +796,7 @@ a.compose_control_button.hide {
} }
&.typeahead { &.typeahead {
background: hsl(0, 0%, 100%); background: hsl(0deg 0% 100%);
} }
} }

598
web/styles/dark_theme.css
View File

File diff suppressed because it is too large Load Diff

18
web/styles/drafts.css
View File

@ -1,7 +1,7 @@
.drafts-container { .drafts-container {
position: relative; position: relative;
height: 95%; height: 95%;
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
border-radius: 4px; border-radius: 4px;
padding: 0; padding: 0;
width: 58%; width: 58%;
@ -21,7 +21,7 @@
padding-top: 4px; padding-top: 4px;
padding-bottom: 8px; padding-bottom: 8px;
text-align: center; text-align: center;
border-bottom: 1px solid hsl(0, 0%, 87%); border-bottom: 1px solid hsl(0deg 0% 87%);
& h1 { & h1 {
margin: 0; margin: 0;
@ -34,7 +34,7 @@
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 10px; right: 10px;
color: hsl(0, 0%, 67%); color: hsl(0deg 0% 67%);
cursor: pointer; cursor: pointer;
.exit-sign { .exit-sign {
@ -58,7 +58,7 @@
margin-top: calc(45vh - 30px - 1.5em); margin-top: calc(45vh - 30px - 1.5em);
text-align: center; text-align: center;
font-size: 1.5em; font-size: 1.5em;
color: hsl(0, 0%, 67%); color: hsl(0deg 0% 67%);
pointer-events: none; pointer-events: none;
} }
@ -66,7 +66,7 @@
display: block; display: block;
text-align: center; text-align: center;
font-size: 1em; font-size: 1em;
color: hsl(0, 0%, 67%); color: hsl(0deg 0% 67%);
pointer-events: none; pointer-events: none;
} }
@ -88,11 +88,11 @@
.draft-info-box { .draft-info-box {
width: 100%; width: 100%;
border: 1px solid hsl(0, 0%, 88%); border: 1px solid hsl(0deg 0% 88%);
margin-bottom: 10px; margin-bottom: 10px;
&.active { &.active {
outline: 2px solid hsl(215, 47%, 50%); outline: 2px solid hsl(215deg 47% 50%);
/* this offset ensures no gap between the blue box and the draft in active state */ /* this offset ensures no gap between the blue box and the draft in active state */
outline-offset: -1px; outline-offset: -1px;
} }
@ -134,7 +134,7 @@
.restore-draft { .restore-draft {
cursor: pointer; cursor: pointer;
margin-right: 5px; margin-right: 5px;
color: hsl(170, 48%, 54%); color: hsl(170deg 48% 54%);
opacity: 0.7; opacity: 0.7;
&:hover { &:hover {
@ -145,7 +145,7 @@
.delete-draft { .delete-draft {
cursor: pointer; cursor: pointer;
margin-left: 5px; margin-left: 5px;
color: hsl(357, 52%, 57%); color: hsl(357deg 52% 57%);
opacity: 0.7; opacity: 0.7;
&:hover { &:hover {

46
web/styles/hotspots.css
View File

@ -10,8 +10,8 @@
margin: -12.5px 0 0 -12.5px; margin: -12.5px 0 0 -12.5px;
border-radius: 50%; border-radius: 50%;
position: absolute; position: absolute;
background-color: hsla(196, 100%, 82%, 0.3); background-color: hsl(196deg 100% 82% / 30%);
border: 2px solid hsl(215, 47%, 50%); border: 2px solid hsl(215deg 47% 50%);
top: 50%; top: 50%;
left: 50%; left: 50%;
} }
@ -23,9 +23,9 @@
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
border-radius: 50%; border-radius: 50%;
border: 1px solid hsl(205, 100%, 70%); border: 1px solid hsl(205deg 100% 70%);
transform: scale(2.2); transform: scale(2.2);
opacity: 0; opacity: 0;
animation: pulsate 5s ease-out 0.375s 5; animation: pulsate 5s ease-out 0.375s 5;
@ -39,7 +39,7 @@
left: -5px; left: -5px;
bottom: 3px; bottom: 3px;
transform: rotate(7deg); transform: rotate(7deg);
color: hsl(215, 47%, 50%); color: hsl(215deg 47% 50%);
font-size: 2.75em; font-size: 2.75em;
font-weight: 600; font-weight: 600;
} }
@ -74,14 +74,14 @@
/* popover */ /* popover */
.hotspot.overlay { .hotspot.overlay {
z-index: 104; z-index: 104;
background-color: hsla(191, 7%, 20%, 0.15); background-color: hsl(191deg 7% 20% / 15%);
.hotspot-popover { .hotspot-popover {
position: fixed; position: fixed;
width: 250px; width: 250px;
text-align: left; text-align: left;
box-shadow: 0 5px 10px hsla(223, 4%, 54%, 0.2); box-shadow: 0 5px 10px hsl(223deg 4% 54% / 20%);
border: 1px solid hsl(0, 0%, 80%); border: 1px solid hsl(0deg 0% 80%);
border-radius: 4px; border-radius: 4px;
/* arrows */ /* arrows */
@ -111,12 +111,12 @@
} }
&::after { &::after {
border-bottom-color: hsl(164, 44%, 47%); border-bottom-color: hsl(164deg 44% 47%);
margin-right: -12px; margin-right: -12px;
} }
&::before { &::before {
border-bottom-color: hsl(0, 0%, 80%); border-bottom-color: hsl(0deg 0% 80%);
margin-right: -13px; margin-right: -13px;
} }
} }
@ -129,12 +129,12 @@
} }
&::after { &::after {
border-right-color: hsl(0, 0%, 100%); border-right-color: hsl(0deg 0% 100%);
margin-top: -12px; margin-top: -12px;
} }
&::before { &::before {
border-right-color: hsl(0, 0%, 80%); border-right-color: hsl(0deg 0% 80%);
margin-top: -13px; margin-top: -13px;
} }
} }
@ -147,12 +147,12 @@
} }
&::after { &::after {
border-top-color: hsl(0, 0%, 100%); border-top-color: hsl(0deg 0% 100%);
margin-right: -12px; margin-right: -12px;
} }
&::before { &::before {
border-top-color: hsl(0, 0%, 80%); border-top-color: hsl(0deg 0% 80%);
margin-right: -13px; margin-right: -13px;
} }
} }
@ -165,12 +165,12 @@
} }
&::after { &::after {
border-left-color: hsl(0, 0%, 100%); border-left-color: hsl(0deg 0% 100%);
margin-top: -12px; margin-top: -12px;
} }
&::before { &::before {
border-left-color: hsl(0, 0%, 80%); border-left-color: hsl(0deg 0% 80%);
margin-top: -13px; margin-top: -13px;
} }
} }
@ -180,23 +180,23 @@
padding: 0 15px; padding: 0 15px;
border-top-left-radius: 4px; border-top-left-radius: 4px;
border-top-right-radius: 4px; border-top-right-radius: 4px;
background-color: hsl(164, 44%, 47%); background-color: hsl(164deg 44% 47%);
} }
.hotspot-title { .hotspot-title {
margin: 0; margin: 0;
font-size: 1.15em; font-size: 1.15em;
font-weight: 600; font-weight: 600;
color: hsl(0, 0%, 100%); color: hsl(0deg 0% 100%);
} }
.hotspot-popover-content { .hotspot-popover-content {
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
padding: 15px; padding: 15px;
} }
.hotspot-popover-bottom { .hotspot-popover-bottom {
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
height: 90px; height: 90px;
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
@ -225,15 +225,15 @@
border: none; border: none;
font-size: 1.15em; font-size: 1.15em;
font-weight: 600; font-weight: 600;
color: hsl(0, 0%, 100%); color: hsl(0deg 0% 100%);
background-color: hsl(164, 44%, 47%); background-color: hsl(164deg 44% 47%);
border-radius: 4px; border-radius: 4px;
white-space: normal; white-space: normal;
padding: 7px 20px; padding: 7px 20px;
outline: none; outline: none;
&:hover { &:hover {
background-color: hsl(164, 44%, 56%); background-color: hsl(164deg 44% 56%);
} }
} }

26
web/styles/image_upload_widget.css
View File

@ -2,7 +2,7 @@
.image_upload_widget { .image_upload_widget {
position: relative; position: relative;
border-radius: 5px; border-radius: 5px;
box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.1); box-shadow: 0 0 10px hsl(0deg 0% 0% / 10%);
overflow: hidden; overflow: hidden;
transition: all 0.3s ease; transition: all 0.3s ease;
@ -14,7 +14,7 @@
.image-hover-background { .image-hover-background {
content: ""; content: "";
background-color: hsla(0, 0%, 0%, 0.6); background-color: hsl(0deg 0% 0% / 60%);
height: 100%; height: 100%;
width: 100%; width: 100%;
z-index: 99; z-index: 99;
@ -31,7 +31,7 @@
align-items: center; align-items: center;
text-align: center; text-align: center;
justify-content: center; justify-content: center;
box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.1); box-shadow: 0 0 10px hsl(0deg 0% 0% / 10%);
z-index: 99; z-index: 99;
} }
@ -39,7 +39,7 @@
background: none; background: none;
border: none; border: none;
cursor: pointer; cursor: pointer;
color: hsl(0, 0%, 75%); color: hsl(0deg 0% 75%);
opacity: 0; opacity: 0;
padding: 0; padding: 0;
position: absolute; position: absolute;
@ -51,7 +51,7 @@
} }
.image-disabled-text { .image-disabled-text {
color: hsl(0, 0%, 100%); color: hsl(0deg 0% 100%);
cursor: not-allowed; cursor: not-allowed;
position: absolute; position: absolute;
text-align: center; text-align: center;
@ -69,7 +69,7 @@
.image-delete-button:focus, .image-delete-button:focus,
.image-delete-button:hover { .image-delete-button:hover {
color: hsl(0, 0%, 100%); color: hsl(0deg 0% 100%);
} }
.image-delete-button:hover ~ .image-upload-text { .image-delete-button:hover ~ .image-upload-text {
@ -81,7 +81,7 @@
} }
.image-delete-text { .image-delete-text {
color: hsl(0, 0%, 100%); color: hsl(0deg 0% 100%);
font-size: 0.85rem; font-size: 0.85rem;
position: absolute; position: absolute;
visibility: hidden; visibility: hidden;
@ -91,21 +91,21 @@
.image-upload-text { .image-upload-text {
cursor: pointer; cursor: pointer;
font-size: 0.85rem; font-size: 0.85rem;
color: hsl(0, 0%, 85%); color: hsl(0deg 0% 85%);
position: absolute; position: absolute;
z-index: 99; z-index: 99;
visibility: hidden; visibility: hidden;
} }
.image-upload-text:hover { .image-upload-text:hover {
color: hsl(0, 0%, 100%); color: hsl(0deg 0% 100%);
} }
.upload-spinner-background { .upload-spinner-background {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: hsl(0, 0%, 10%); background-color: hsl(0deg 0% 10%);
font-size: 0.8rem; font-size: 0.8rem;
width: 100%; width: 100%;
opacity: 0.8; opacity: 0.8;
@ -164,7 +164,7 @@
#realm-icon-upload-widget { #realm-icon-upload-widget {
width: 100px; width: 100px;
height: 100px; height: 100px;
box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.1); box-shadow: 0 0 10px hsl(0deg 0% 0% / 10%);
.image-delete-button { .image-delete-button {
top: 5px; top: 5px;
@ -186,11 +186,11 @@
} }
#realm-day-logo-upload-widget { #realm-day-logo-upload-widget {
background-color: hsl(0, 100%, 100%); background-color: hsl(0deg 100% 100%);
} }
#realm-night-logo-upload-widget { #realm-night-logo-upload-widget {
background-color: hsl(212, 28%, 18%); background-color: hsl(212deg 28% 18%);
} }
.realm-logo-block { .realm-logo-block {

6
web/styles/informational_overlays.css
View File

@ -9,12 +9,12 @@
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
} }
.overlay-tabs { .overlay-tabs {
padding: 10px 0; padding: 10px 0;
border-bottom: 1px solid hsla(0, 0%, 0%, 0.2); border-bottom: 1px solid hsl(0deg 0% 0% / 20%);
.tab-switcher { .tab-switcher {
margin-left: 15px; margin-left: 15px;
@ -23,7 +23,7 @@
.exit { .exit {
float: right; float: right;
font-size: 1.5rem; font-size: 1.5rem;
color: hsl(0, 0%, 67%); color: hsl(0deg 0% 67%);
font-weight: 600; font-weight: 600;
margin: 0 15px; margin: 0 15px;
cursor: pointer; cursor: pointer;

22
web/styles/input_pill.css
View File

@ -3,7 +3,7 @@
flex-wrap: wrap; flex-wrap: wrap;
padding: 2px; padding: 2px;
border: 1px solid hsla(0, 0%, 0%, 0.15); border: 1px solid hsl(0deg 0% 0% / 15%);
border-radius: 4px; border-radius: 4px;
align-items: center; align-items: center;
@ -17,16 +17,16 @@
margin: 1px 2px; margin: 1px 2px;
color: inherit; color: inherit;
border: 1px solid hsla(0, 0%, 0%, 0.15); border: 1px solid hsl(0deg 0% 0% / 15%);
border-radius: 4px; border-radius: 4px;
background-color: hsla(0, 0%, 0%, 0.07); background-color: hsl(0deg 0% 0% / 7%);
cursor: pointer; cursor: pointer;
&:focus { &:focus {
color: hsl(0, 0%, 100%); color: hsl(0deg 0% 100%);
border: 1px solid hsl(176, 78%, 28%); border: 1px solid hsl(176deg 78% 28%);
background-color: hsl(176, 49%, 42%); background-color: hsl(176deg 49% 42%);
outline: none; outline: none;
} }
@ -63,8 +63,8 @@
&:focus { &:focus {
color: inherit; color: inherit;
border: 1px solid hsla(0, 0%, 0%, 0.15); border: 1px solid hsl(0deg 0% 0% / 15%);
background-color: hsla(0, 0%, 0%, 0.07); background-color: hsl(0deg 0% 0% / 7%);
} }
.exit { .exit {
@ -109,7 +109,7 @@
padding: 0 2px; padding: 0 2px;
flex-grow: 1; flex-grow: 1;
align-content: center; align-content: center;
border: 1px solid hsla(0, 0%, 0%, 0.2); border: 1px solid hsl(0deg 0% 0% / 20%);
.input { .input {
height: 20px; height: 20px;
@ -127,12 +127,12 @@
} }
.deactivated-pill { .deactivated-pill {
background-color: hsl(0, 86%, 86%) !important; background-color: hsl(0deg 86% 86%) !important;
} }
.add_subscribers_container .pill-container { .add_subscribers_container .pill-container {
width: 100%; width: 100%;
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
.input:first-child:empty::before { .input:first-child:empty::before {
opacity: 0.5; opacity: 0.5;

32
web/styles/left_sidebar.css
View File

@ -124,7 +124,7 @@ li.show-more-topics {
position: sticky; position: sticky;
top: calc($sections_vertical_gutter + 43px); top: calc($sections_vertical_gutter + 43px);
z-index: 2; z-index: 2;
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
} }
} }
} }
@ -180,7 +180,7 @@ li.show-more-topics {
} }
.private_messages_container { .private_messages_container {
background: hsl(0, 0%, 100%); background: hsl(0deg 0% 100%);
margin-right: 16px; margin-right: 16px;
margin-left: 6px; margin-left: 6px;
z-index: 1; z-index: 1;
@ -271,7 +271,7 @@ li.show-more-topics {
#private_messages_section, #private_messages_section,
#private_messages_list, #private_messages_list,
#hide_more_private_messages { #hide_more_private_messages {
background-color: hsl(202, 56%, 91%); background-color: hsl(202deg 56% 91%);
} }
#private_messages_section { #private_messages_section {
@ -291,7 +291,7 @@ li.show-more-topics {
&.top_left_row:hover, &.top_left_row:hover,
&.bottom_left_row:hover, &.bottom_left_row:hover,
&#stream_filters li.highlighted_stream { &#stream_filters li.highlighted_stream {
background-color: hsla(120, 12.3%, 71.4%, 0.38); background-color: hsl(120deg 12.3% 71.4% / 38%);
border-radius: 4px; border-radius: 4px;
} }
} }
@ -347,7 +347,7 @@ ul.filters {
li.active-filter, li.active-filter,
li.active-sub-filter { li.active-sub-filter {
font-weight: 600 !important; font-weight: 600 !important;
background-color: hsl(202, 56%, 91%); background-color: hsl(202deg 56% 91%);
position: relative; position: relative;
border-radius: 4px; border-radius: 4px;
} }
@ -355,7 +355,7 @@ li.active-sub-filter {
#stream_filters .narrow-filter.active-filter { #stream_filters .narrow-filter.active-filter {
.topic-list .filter-topics, .topic-list .filter-topics,
> .bottom_left_row { > .bottom_left_row {
background-color: hsl(202, 56%, 91%); background-color: hsl(202deg 56% 91%);
border-radius: 4px; border-radius: 4px;
} }
} }
@ -379,7 +379,7 @@ li.active-sub-filter {
.top_left_drafts .unread_count { .top_left_drafts .unread_count {
background-color: inherit; background-color: inherit;
color: inherit; color: inherit;
border: 0.5px solid hsl(105, 2%, 50%); border: 0.5px solid hsl(105deg 2% 50%);
/* The border takes up space, so we need to /* The border takes up space, so we need to
subtract 1px from the usual 2px margin-top */ subtract 1px from the usual 2px margin-top */
margin-top: 1px !important; margin-top: 1px !important;
@ -483,7 +483,7 @@ li.top_left_recent_topics {
*/ */
&:hover { &:hover {
color: hsl(0, 0%, 0%) !important; color: hsl(0deg 0% 0%) !important;
} }
/* /*
@ -537,7 +537,7 @@ li.top_left_drafts:hover .drafts-sidebar-menu-icon,
li.topic-list-item:hover .topic-sidebar-menu-icon { li.topic-list-item:hover .topic-sidebar-menu-icon {
display: inline; display: inline;
cursor: pointer; cursor: pointer;
color: hsl(0, 0%, 53%); color: hsl(0deg 0% 53%);
} }
ul.topic-list { ul.topic-list {
@ -591,11 +591,11 @@ li.topic-list-item {
#topics_header { #topics_header {
position: sticky; position: sticky;
top: 0; top: 0;
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
z-index: 2; z-index: 2;
margin-right: 10px; margin-right: 10px;
padding-top: $sections_vertical_gutter; padding-top: $sections_vertical_gutter;
color: hsl(0, 0%, 43%); color: hsl(0deg 0% 43%);
.show-all-streams { .show-all-streams {
color: inherit; color: inherit;
@ -619,7 +619,7 @@ li.topic-list-item {
/* Ideally, 0px should work here, but maybe simplebar is doing something /* Ideally, 0px should work here, but maybe simplebar is doing something
that is creating `0.5px` extra gap in zoomed-in windows. */ that is creating `0.5px` extra gap in zoomed-in windows. */
top: -0.5px; top: -0.5px;
background: hsl(0, 0%, 100%); background: hsl(0deg 0% 100%);
z-index: 1; z-index: 1;
& input { & input {
@ -650,8 +650,8 @@ li.topic-list-item {
flex: 1 1; flex: 1 1;
vertical-align: middle; vertical-align: middle;
margin: auto; margin: auto;
border-top: 1px solid hsl(0, 0%, 88%); border-top: 1px solid hsl(0deg 0% 88%);
border-bottom: 1px solid hsl(0, 0%, 100%); border-bottom: 1px solid hsl(0deg 0% 100%);
} }
& span::before { & span::before {
@ -693,7 +693,7 @@ li.topic-list-item {
top: calc($sections_vertical_gutter + 20px); top: calc($sections_vertical_gutter + 20px);
z-index: 2; z-index: 2;
padding-bottom: 1px; padding-bottom: 1px;
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
} }
#subscribe-to-more-streams, #subscribe-to-more-streams,
@ -722,7 +722,7 @@ li.topic-list-item {
&:hover { &:hover {
& span { & span {
background-color: hsla(120, 12.3%, 71.4%, 0.38); background-color: hsl(120deg 12.3% 71.4% / 38%);
border-radius: 4px; border-radius: 4px;
} }
} }

24
web/styles/lightbox.css
View File

@ -1,5 +1,5 @@
#lightbox_overlay { #lightbox_overlay {
background-color: hsl(227, 40%, 16%); background-color: hsl(227deg 40% 16%);
.image-preview { .image-preview {
display: flex; display: flex;
@ -33,7 +33,7 @@
.exit { .exit {
flex-shrink: 0; flex-shrink: 0;
color: hsla(0, 0%, 100%, 0.8); color: hsl(0deg 0% 100% / 80%);
font-size: 2rem; font-size: 2rem;
margin: 6px 20px 0 0; margin: 6px 20px 0 0;
@ -70,18 +70,18 @@
font-size: 0.9rem; font-size: 0.9rem;
min-width: inherit; min-width: inherit;
padding: 4px 10px; padding: 4px 10px;
border: 1px solid hsla(0, 0%, 100%, 0.6); border: 1px solid hsl(0deg 0% 100% / 60%);
background-color: transparent; background-color: transparent;
color: hsl(0, 0%, 100%); color: hsl(0deg 0% 100%);
border-radius: 4px; border-radius: 4px;
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
margin: 0 5px; margin: 0 5px;
&:hover { &:hover {
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
border-color: hsl(0, 0%, 100%); border-color: hsl(0deg 0% 100%);
color: hsl(227, 40%, 16%); color: hsl(227deg 40% 16%);
} }
} }
@ -91,8 +91,8 @@
&:hover { &:hover {
background-color: transparent; background-color: transparent;
color: hsl(0, 0%, 100%); color: hsl(0deg 0% 100%);
border: 1px solid hsla(0, 0%, 100%, 0.6); border: 1px solid hsl(0deg 0% 100% / 60%);
} }
} }
} }
@ -107,7 +107,7 @@
margin-bottom: 15px; margin-bottom: 15px;
font-size: 1.1rem; font-size: 1.1rem;
color: hsl(0, 0%, 100%); color: hsl(0deg 0% 100%);
.title { .title {
vertical-align: top; vertical-align: top;
@ -156,7 +156,7 @@
margin-top: 25px; margin-top: 25px;
padding: 5px 10px; padding: 5px 10px;
color: hsl(0, 0%, 100%); color: hsl(0deg 0% 100%);
font-size: 1.8em; font-size: 1.8em;
font-weight: 100; font-weight: 100;
@ -189,7 +189,7 @@
height: 50px; height: 50px;
margin: 0 2px; margin: 0 2px;
background-color: hsla(0, 0%, 94%, 0.2); background-color: hsl(0deg 0% 94% / 20%);
opacity: 0.5; opacity: 0.5;
background-size: cover; background-size: cover;

8
web/styles/message_edit_history.css
View File

@ -36,13 +36,13 @@
.message_edit_history_content { .message_edit_history_content {
.highlight_text_inserted { .highlight_text_inserted {
color: hsl(122, 72%, 30%); color: hsl(122deg 72% 30%);
background-color: hsl(120, 64%, 95%); background-color: hsl(120deg 64% 95%);
} }
.highlight_text_deleted { .highlight_text_deleted {
color: hsl(0, 100%, 50%); color: hsl(0deg 100% 50%);
background-color: hsl(7, 90%, 92%); background-color: hsl(7deg 90% 92%);
text-decoration: line-through; text-decoration: line-through;
word-break: break-all; word-break: break-all;
} }

40
web/styles/modal.css
View File

@ -3,14 +3,14 @@
} }
.modal-bg { .modal-bg {
background-color: hsl(0, 0%, 98%); background-color: hsl(0deg 0% 98%);
} }
/* Styles for the Micromodal-based modals */ /* Styles for the Micromodal-based modals */
.modal__overlay { .modal__overlay {
position: fixed; position: fixed;
inset: 0; inset: 0;
background: hsla(0, 0%, 0%, 0.6); background: hsl(0deg 0% 0% / 60%);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -20,7 +20,7 @@
.modal__container { .modal__container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
max-width: calc(100% - 32px); max-width: calc(100% - 32px);
max-height: 96%; max-height: 96%;
width: 32.5rem; width: 32.5rem;
@ -75,7 +75,7 @@
border: 0; border: 0;
&:hover { &:hover {
background: hsl(0, 0%, 90%); background: hsl(0deg 0% 90%);
} }
} }
@ -87,14 +87,14 @@
line-height: 1.5; line-height: 1.5;
&.simplebar-scrollable-y + .modal__footer { &.simplebar-scrollable-y + .modal__footer {
border-top: 1px solid hsl(0, 0%, 87%); border-top: 1px solid hsl(0deg 0% 87%);
} }
} }
.modal__btn { .modal__btn {
font-size: 0.875rem; font-size: 0.875rem;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
background-color: hsl(0, 0%, 90%); background-color: hsl(0deg 0% 90%);
border-radius: 0.25rem; border-radius: 0.25rem;
border-width: 0; border-width: 0;
cursor: pointer; cursor: pointer;
@ -122,21 +122,21 @@
} }
.dialog_cancel_button { .dialog_cancel_button {
background: hsl(0, 0%, 100%); background: hsl(0deg 0% 100%);
border: 1px solid hsla(300, 2%, 11%, 0.3); border: 1px solid hsl(300deg 2% 11% / 30%);
&:hover { &:hover {
background: hsl(0, 0%, 97%); background: hsl(0deg 0% 97%);
} }
} }
.dialog_submit_button { .dialog_submit_button {
margin-left: 12px; margin-left: 12px;
background-color: hsl(240, 96%, 68%); background-color: hsl(240deg 96% 68%);
color: hsl(0, 0%, 100%) !important; color: hsl(0deg 0% 100%) !important;
&:disabled { &:disabled {
background-color: hsl(0, 0%, 65%); background-color: hsl(0deg 0% 65%);
} }
} }
@ -212,12 +212,12 @@
line-height: 26px; line-height: 26px;
&:hover { &:hover {
background-color: hsla(0, 0%, 0%, 0.05); background-color: hsl(0deg 0% 0% / 5%);
} }
&:active, &:active,
&:focus { &:focus {
background-color: hsla(0, 0%, 0%, 0.1); background-color: hsl(0deg 0% 0% / 10%);
outline: none; outline: none;
} }
} }
@ -234,7 +234,7 @@
} }
.border-top { .border-top {
border-top: 1px solid hsla(300, 2%, 11%, 0.3); border-top: 1px solid hsl(300deg 2% 11% / 30%);
padding-top: 10px; padding-top: 10px;
} }
@ -304,7 +304,7 @@
height: 16px; height: 16px;
& path { & path {
fill: hsl(0, 0%, 100%); fill: hsl(0deg 0% 100%);
} }
} }
@ -333,17 +333,17 @@
height: 30px; height: 30px;
width: 220px; width: 220px;
padding: 4px 6px; padding: 4px 6px;
color: hsl(0, 0%, 33%); color: hsl(0deg 0% 33%);
border-radius: 4px; border-radius: 4px;
border: 1px solid hsl(0, 0%, 80%); border: 1px solid hsl(0deg 0% 80%);
cursor: pointer; cursor: pointer;
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
&:disabled { &:disabled {
cursor: not-allowed; cursor: not-allowed;
/* The background-color of select elements inside modal is different than the others in /* The background-color of select elements inside modal is different than the others in
settings pages, because the background of the modal is brighter than the setting page. */ settings pages, because the background of the modal is brighter than the setting page. */
background-color: hsla(0, 0%, 90%, 1); background-color: hsl(0deg 0% 90%);
} }
} }

54
web/styles/popovers.css
View File

@ -147,7 +147,7 @@
margin-right: 10px; margin-right: 10px;
.sp-container { .sp-container {
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
cursor: pointer; cursor: pointer;
border: none; border: none;
@ -163,11 +163,11 @@
} }
& button { & button {
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
background-image: none; background-image: none;
border: 1px solid hsl(0, 0%, 80%); border: 1px solid hsl(0deg 0% 80%);
border-radius: 4px; border-radius: 4px;
color: hsl(0, 0%, 25%); color: hsl(0deg 0% 25%);
font-size: 12px; font-size: 12px;
padding: 6px; padding: 6px;
text-transform: capitalize; text-transform: capitalize;
@ -176,7 +176,7 @@
} }
.sp-picker-container { .sp-picker-container {
border-left: solid 1px hsl(0, 0%, 88%); border-left: solid 1px hsl(0deg 0% 88%);
} }
} }
} }
@ -244,7 +244,7 @@ ul {
font-size: 11px; font-size: 11px;
font-weight: 550; font-weight: 550;
margin-right: 2px; margin-right: 2px;
background-color: hsl(200, 100%, 40%); background-color: hsl(200deg 100% 40%);
/* Override random undesired bootstrap style */ /* Override random undesired bootstrap style */
text-shadow: none; text-shadow: none;
/* Not center aligned but looks better. */ /* Not center aligned but looks better. */
@ -266,7 +266,7 @@ ul {
.popover-title { .popover-title {
padding: 0; padding: 0;
border-color: hsla(0, 0%, 0%, 0.2); border-color: hsl(0deg 0% 0% / 20%);
} }
.popover_info li { .popover_info li {
@ -281,7 +281,7 @@ ul {
.popover-title { .popover-title {
padding: 0; padding: 0;
border-color: hsla(0, 0%, 0%, 0.2); border-color: hsl(0deg 0% 0% / 20%);
} }
} }
@ -306,7 +306,7 @@ ul {
margin-left: 0; margin-left: 0;
.bot { .bot {
color: hsl(180, 5%, 74%); color: hsl(180deg 5% 74%);
vertical-align: top; vertical-align: top;
width: 20px; width: 20px;
padding-top: 3.5px; padding-top: 3.5px;
@ -332,7 +332,7 @@ ul {
&:hover { &:hover {
cursor: pointer; cursor: pointer;
color: hsl(200, 100%, 40%); color: hsl(200deg 100% 40%);
} }
} }
@ -344,7 +344,7 @@ ul {
position: relative; position: relative;
&.guest-avatar::after { &.guest-avatar::after {
outline: 10px solid hsl(0, 0%, 100%); outline: 10px solid hsl(0deg 0% 100%);
} }
.popover-inner { .popover-inner {
@ -380,7 +380,7 @@ ul {
} }
.name { .name {
color: hsl(0, 0%, 20%); color: hsl(0deg 0% 20%);
width: 120px; width: 120px;
font-weight: 600; font-weight: 600;
margin-right: 10px; margin-right: 10px;
@ -421,10 +421,10 @@ ul {
background-size: cover; background-size: cover;
background-position: center; background-position: center;
border-radius: 5px; border-radius: 5px;
box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.2); box-shadow: 0 0 0 1px hsl(0deg 0% 0% / 20%);
&.guest-avatar::after { &.guest-avatar::after {
outline: 9px solid hsl(0, 0%, 100%); outline: 9px solid hsl(0deg 0% 100%);
} }
} }
@ -447,7 +447,7 @@ ul {
} }
& hr { & hr {
border: 1px solid hsl(0, 0%, 93%); border: 1px solid hsl(0deg 0% 93%);
margin: 5px 0; margin: 5px 0;
} }
@ -456,7 +456,7 @@ ul {
margin-bottom: 10px; margin-bottom: 10px;
.name { .name {
color: hsl(0, 0%, 20%); color: hsl(0deg 0% 20%);
font-weight: 600; font-weight: 600;
} }
@ -530,7 +530,7 @@ ul {
.subscription-group-list, .subscription-group-list,
.subscription-stream-list { .subscription-stream-list {
position: relative; position: relative;
border: 1px solid hsl(0, 0%, 83%); border: 1px solid hsl(0deg 0% 83%);
border-radius: 4px; border-radius: 4px;
overflow: auto; overflow: auto;
text-align: left; text-align: left;
@ -549,7 +549,7 @@ ul {
border-radius: 6px; border-radius: 6px;
& tr { & tr {
border-bottom: 1px solid hsl(0, 0%, 87%); border-bottom: 1px solid hsl(0deg 0% 87%);
/* Ensure equal height for rows with a remove-subscription-button and /* Ensure equal height for rows with a remove-subscription-button and
those without one. */ those without one. */
height: 34px; height: 34px;
@ -581,7 +581,7 @@ ul {
display: block; display: block;
text-align: center; text-align: center;
color: hsl(0, 0%, 67%); color: hsl(0deg 0% 67%);
} }
&:empty { &:empty {
@ -606,14 +606,14 @@ ul {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: hsla(0, 0%, 0%, 0.7); background-color: hsl(0deg 0% 0% / 70%);
border-radius: 0; border-radius: 0;
border: none; border: none;
pointer-events: none; pointer-events: none;
.popover-inner { .popover-inner {
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
pointer-events: all; pointer-events: all;
} }
} }
@ -630,14 +630,14 @@ ul {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: hsla(0, 0%, 0%, 0.7); background-color: hsl(0deg 0% 0% / 70%);
border-radius: 0; border-radius: 0;
border: none; border: none;
pointer-events: none; pointer-events: none;
.popover-inner { .popover-inner {
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
pointer-events: all; pointer-events: all;
} }
@ -664,7 +664,7 @@ ul {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: hsla(0, 0%, 0%, 0.7); background-color: hsl(0deg 0% 0% / 70%);
/* Needs to be higher than the 105 for div.overlay so that the /* Needs to be higher than the 105 for div.overlay so that the
emoji picker can render on top of the user status picker. */ emoji picker can render on top of the user status picker. */
@ -728,7 +728,7 @@ ul {
/* Red outline for clear visibility /* Red outline for clear visibility
* of which image is in focus. * of which image is in focus.
*/ */
outline-color: hsl(0, 100%, 50%); outline-color: hsl(0deg 100% 50%);
} }
.search-box { .search-box {
@ -750,7 +750,7 @@ ul {
&:focus { &:focus {
.fa-remove { .fa-remove {
outline: 2px solid hsl(215, 47%, 50%); outline: 2px solid hsl(215deg 47% 50%);
} }
} }
} }
@ -764,7 +764,7 @@ ul {
.popover-footer { .popover-footer {
text-align: center; text-align: center;
background-color: hsl(0, 0%, 0%); background-color: hsl(0deg 0% 0%);
border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px;
& img { & img {

28
web/styles/portico/activity.css
View File

@ -1,5 +1,5 @@
.activity_head { .activity_head {
background-color: hsl(208, 100%, 97%); background-color: hsl(208deg 100% 97%);
} }
.table td { .table td {
@ -11,11 +11,11 @@
.table-striped { .table-striped {
& tr.recently_active { & tr.recently_active {
& td { & td {
background-color: hsl(120, 97%, 83%); background-color: hsl(120deg 97% 83%);
} }
&:nth-child(odd) td { &:nth-child(odd) td {
background-color: hsl(120, 70%, 76%); background-color: hsl(120deg 70% 76%);
} }
} }
} }
@ -31,43 +31,43 @@ td.number {
tr.admin td:first-child { tr.admin td:first-child {
font-weight: bold; font-weight: bold;
color: hsl(240, 100%, 50%); color: hsl(240deg 100% 50%);
font-size: 110%; font-size: 110%;
} }
.good { .good {
font-weight: bold; font-weight: bold;
color: hsl(120, 100%, 33%); color: hsl(120deg 100% 33%);
} }
.bad { .bad {
font-weight: bold; font-weight: bold;
color: hsl(0, 100%, 39%); color: hsl(0deg 100% 39%);
} }
.support-query-result { .support-query-result {
background-color: hsl(210, 100%, 97%); background-color: hsl(210deg 100% 97%);
padding-left: 15px; padding-left: 15px;
padding-top: 14px; padding-top: 14px;
border-radius: 7px; border-radius: 7px;
box-shadow: 0 10px 7px -6px hsl(0, 2%, 45%); box-shadow: 0 10px 7px -6px hsl(0deg 2% 45%);
& select { & select {
height: 30px; height: 30px;
width: 220px; width: 220px;
padding: 4px 6px; padding: 4px 6px;
font-size: 14px; font-size: 14px;
color: hsl(0, 0%, 33%); color: hsl(0deg 0% 33%);
border-radius: 4px; border-radius: 4px;
border: 1px solid hsl(0, 0%, 80%); border: 1px solid hsl(0deg 0% 80%);
margin-bottom: 10px; margin-bottom: 10px;
cursor: pointer; cursor: pointer;
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
vertical-align: middle; vertical-align: middle;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
&:focus { &:focus {
outline: 1px dotted hsl(0, 0%, 20%); outline: 1px dotted hsl(0deg 0% 20%);
outline: 5px auto -webkit-focus-ring-color; outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px; outline-offset: -2px;
} }
@ -130,13 +130,13 @@ tr.admin td:first-child {
} }
.support-search-button { .support-search-button {
border-color: hsl(0, 0%, 83%); border-color: hsl(0deg 0% 83%);
border-radius: 2px; border-radius: 2px;
} }
.support-submit-button { .support-submit-button {
position: relative; position: relative;
top: -3px; top: -3px;
border-color: hsl(0, 0%, 83%); border-color: hsl(0deg 0% 83%);
border-radius: 2px; border-radius: 2px;
} }

76
web/styles/portico/billing.css
View File

@ -1,11 +1,11 @@
.billing-upgrade-page { .billing-upgrade-page {
font-family: "Source Sans 3", sans-serif; font-family: "Source Sans 3", sans-serif;
background-color: hsl(0, 0%, 98%); background-color: hsl(0deg 0% 98%);
height: 100vh; height: 100vh;
.hero { .hero {
background-color: hsl(153, 32%, 55%); background-color: hsl(153deg 32% 55%);
color: hsl(153, 32%, 55%); color: hsl(153deg 32% 55%);
position: absolute; position: absolute;
top: 0; top: 0;
width: 100%; width: 100%;
@ -40,11 +40,11 @@
} }
.tab-content { .tab-content {
border: 1px solid hsl(0, 0%, 87%); border: 1px solid hsl(0deg 0% 87%);
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
padding: 20px; padding: 20px;
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
font-size: 1.1em; font-size: 1.1em;
} }
@ -54,7 +54,7 @@
& a, & a,
a:hover, a:hover,
a:visited { a:visited {
color: hsl(170, 47%, 33%); color: hsl(170deg 47% 33%);
font-weight: 500; font-weight: 500;
} }
} }
@ -70,9 +70,9 @@
&:checked { &:checked {
+ .box { + .box {
background-color: hsl(153, 32%, 55%); background-color: hsl(153deg 32% 55%);
color: hsl(0, 0%, 100%); color: hsl(0deg 0% 100%);
border-color: hsl(152, 33%, 39%); border-color: hsl(152deg 33% 39%);
} }
} }
} }
@ -80,21 +80,21 @@
.box { .box {
width: 120px; width: 120px;
height: 70px; height: 70px;
background-color: hsl(0, 0%, 94%); background-color: hsl(0deg 0% 94%);
transition: all 0.2s ease; transition: all 0.2s ease;
display: inline-block; display: inline-block;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
border: 1px solid hsl(0, 0%, 91%); border: 1px solid hsl(0deg 0% 91%);
border-radius: 8px; border-radius: 8px;
margin: 0 10px 5px 0; margin: 0 10px 5px 0;
padding: 30px 20px; padding: 30px 20px;
vertical-align: top; vertical-align: top;
&:hover { &:hover {
background-color: hsl(0, 0%, 91%); background-color: hsl(0deg 0% 91%);
border-color: hsl(0, 0%, 80%); border-color: hsl(0deg 0% 80%);
} }
.schedule-time { .schedule-time {
@ -129,13 +129,13 @@
.stripe-button-el { .stripe-button-el {
padding: 11px 25px; padding: 11px 25px;
font-weight: 400; font-weight: 400;
color: hsl(0, 0%, 100%); color: hsl(0deg 0% 100%);
background: linear-gradient( background: linear-gradient(
145deg, 145deg,
hsl(191, 56%, 55%), hsl(191deg 56% 55%),
hsl(169, 65%, 42%) hsl(169deg 65% 42%)
); );
box-shadow: 0 3px 10px hsla(0, 0%, 0%, 0.2); box-shadow: 0 3px 10px hsl(0deg 0% 0% / 20%);
border: 0; border: 0;
height: 40px; height: 40px;
margin: 5px 0 0; margin: 5px 0 0;
@ -149,13 +149,13 @@
} }
.stripe-button-el:hover { .stripe-button-el:hover {
background-color: hsl(169, 65%, 42%); background-color: hsl(169deg 65% 42%);
box-shadow: 0 3px 10px hsla(0, 0%, 0%, 0.3); box-shadow: 0 3px 10px hsl(0deg 0% 0% / 30%);
} }
.stripe-button-el:active, .stripe-button-el:active,
.stripe-button-el:enabled:active { .stripe-button-el:enabled:active {
background-color: hsl(169, 70%, 32%); background-color: hsl(169deg 70% 32%);
& span { & span {
background: 0; background: 0;
@ -171,7 +171,7 @@
.stripe-button-el:hover:disabled { .stripe-button-el:hover:disabled {
box-shadow: none; box-shadow: none;
background-color: hsl(0, 0%, 78%); background-color: hsl(0deg 0% 78%);
pointer-events: none; pointer-events: none;
} }
@ -247,13 +247,13 @@
} }
.zulip-loading-logo svg circle { .zulip-loading-logo svg circle {
fill: hsl(0, 0%, 27%); fill: hsl(0deg 0% 27%);
stroke: hsl(0, 0%, 27%); stroke: hsl(0deg 0% 27%);
} }
.zulip-loading-logo svg path { .zulip-loading-logo svg path {
fill: hsl(0, 0%, 100%); fill: hsl(0deg 0% 100%);
stroke: hsl(0, 0%, 100%); stroke: hsl(0deg 0% 100%);
} }
#restartsession_loading_indicator, #restartsession_loading_indicator,
@ -335,29 +335,29 @@ input[name="licenses"] {
& textarea { & textarea {
box-sizing: border-box; box-sizing: border-box;
color: hsl(0, 0%, 33%); color: hsl(0deg 0% 33%);
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
border-radius: 4px; border-radius: 4px;
vertical-align: middle; vertical-align: middle;
border: 1px solid hsl(0, 0%, 80%); border: 1px solid hsl(0deg 0% 80%);
padding: 4px 6px; padding: 4px 6px;
margin-bottom: 10px; margin-bottom: 10px;
line-height: 20px; line-height: 20px;
box-shadow: inset 0 1px 1px hsla(0, 0%, 0%, 0.075); box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%);
transition: border linear 0.2s, box-shadow linear 0.2s; transition: border linear 0.2s, box-shadow linear 0.2s;
&:focus { &:focus {
border-color: hsla(206.5, 80%, 62%, 0.8); border-color: hsl(206.5deg 80% 62% / 80%);
outline: 0; outline: 0;
box-shadow: inset 0 1px 1px hsla(0, 0%, 0%, 0.075), box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%),
0 0 8px hsla(206.5, 80%, 62%, 0.6); 0 0 8px hsl(206.5deg 80% 62% / 60%);
&:invalid { &:invalid {
border-color: hsl(2, 81%, 55%); border-color: hsl(2deg 81% 55%);
box-shadow: 0 0 6px hsl(2, 82%, 85%); box-shadow: 0 0 6px hsl(2deg 82% 85%);
color: hsl(1, 45%, 50%); color: hsl(1deg 45% 50%);
} }
} }
} }
@ -367,11 +367,11 @@ input[name="licenses"] {
width: 100%; width: 100%;
padding: 4px 6px; padding: 4px 6px;
font-size: 14px; font-size: 14px;
color: hsl(0, 0%, 33%); color: hsl(0deg 0% 33%);
border-radius: 4px; border-radius: 4px;
border: 1px solid hsl(0, 0%, 80%); border: 1px solid hsl(0deg 0% 80%);
margin-bottom: 10px; margin-bottom: 10px;
cursor: pointer; cursor: pointer;
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
} }
} }

4
web/styles/portico/email_log.css
View File

@ -29,7 +29,7 @@
line-height: normal; line-height: normal;
&:focus { &:focus {
outline: 1px dotted hsl(0, 0%, 20%); outline: 1px dotted hsl(0deg 0% 20%);
outline: 5px auto -webkit-focus-ring-color; outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px; outline-offset: -2px;
} }
@ -41,7 +41,7 @@
cursor: pointer; cursor: pointer;
&:focus { &:focus {
outline: 1px dotted hsl(0, 0%, 20%); outline: 1px dotted hsl(0deg 0% 20%);
outline: 5px auto -webkit-focus-ring-color; outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px; outline-offset: -2px;
} }

12
web/styles/portico/footer.css
View File

@ -1,9 +1,9 @@
:root { :root {
--color-footer-background: hsl(238, 28%, 27%); --color-footer-background: hsl(238deg 28% 27%);
--color-links: hsl(238, 100%, 82%); --color-links: hsl(238deg 100% 82%);
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
--color-footer-background: hsl(238, 28%, 21%); --color-footer-background: hsl(238deg 28% 21%);
} }
} }
@ -38,7 +38,7 @@
font-size: 18px; font-size: 18px;
line-height: 133%; line-height: 133%;
letter-spacing: 0.1em; letter-spacing: 0.1em;
color: hsl(0, 0%, 100%); color: hsl(0deg 0% 100%);
opacity: 0.8; opacity: 0.8;
text-transform: uppercase; text-transform: uppercase;
border-bottom: 0; border-bottom: 0;
@ -85,7 +85,7 @@
.footer__legal { .footer__legal {
margin: 24px 0 5px; margin: 24px 0 5px;
padding: 0 52px; padding: 0 52px;
border-top: 1px solid hsl(0, 0%, 100%, 0.1); border-top: 1px solid hsl(0deg 0% 100% / 10%);
& a { & a {
margin-bottom: 10px; margin-bottom: 10px;
@ -121,7 +121,7 @@
} }
.footer__legal-container .copyright { .footer__legal-container .copyright {
color: hsl(0, 0%, 100%, 0.5); color: hsl(0deg 0% 100% / 50%);
margin-bottom: 8px; margin-bottom: 8px;
} }

32
web/styles/portico/integrations.css
View File

@ -1,11 +1,11 @@
$light-blue-border: hsl(208, 46%, 93%); $light-blue-border: hsl(208deg 46% 93%);
$border-green: hsl(170, 47%, 53%); $border-green: hsl(170deg 47% 53%);
$hover-green: hsl(170, 65%, 85%); $hover-green: hsl(170deg 65% 85%);
$text-green: hsl(170, 72%, 32%); $text-green: hsl(170deg 72% 32%);
$category-text: hsl(219, 23%, 33%); $category-text: hsl(219deg 23% 33%);
.portico-landing.integrations { .portico-landing.integrations {
color: hsl(0, 0%, 27%); color: hsl(0deg 0% 27%);
font-weight: normal; font-weight: normal;
& h1, & h1,
@ -25,7 +25,7 @@ $category-text: hsl(219, 23%, 33%);
max-width: 1170px; max-width: 1170px;
margin: 0 auto; margin: 0 auto;
border-radius: 10px; border-radius: 10px;
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
visibility: hidden; visibility: hidden;
& img { & img {
@ -91,7 +91,7 @@ $category-text: hsl(219, 23%, 33%);
.portico-page-subheading { .portico-page-subheading {
font-weight: 400; font-weight: 400;
font-size: 1.1em; font-size: 1.1em;
color: hsl(0, 0%, 67%); color: hsl(0deg 0% 67%);
line-height: 1.2; line-height: 1.2;
text-align: center; text-align: center;
} }
@ -109,7 +109,7 @@ $category-text: hsl(219, 23%, 33%);
position: relative; position: relative;
& input { & input {
box-shadow: 0 0 7px 2px hsla(0, 0%, 0%, 0.03); box-shadow: 0 0 7px 2px hsl(0deg 0% 0% / 3%);
font-size: 1em; font-size: 1em;
font-family: inherit; font-family: inherit;
@ -334,7 +334,7 @@ $category-text: hsl(219, 23%, 33%);
font-size: 0.85em; font-size: 0.85em;
margin-top: 5px; margin-top: 5px;
font-weight: 400; font-weight: 400;
color: hsla(216, 23%, 13%, 0.5); color: hsl(216deg 23% 13% / 50%);
} }
&.without-category { &.without-category {
@ -591,20 +591,20 @@ $category-text: hsl(219, 23%, 33%);
} }
.portico-page-heading { .portico-page-heading {
color: hsl(0, 0%, 0%); color: hsl(0deg 0% 0%);
font-size: 44px; font-size: 44px;
} }
.portico-page-subheading { .portico-page-subheading {
font-weight: 300; font-weight: 300;
color: hsl(0, 0%, 20%); color: hsl(0deg 0% 20%);
max-width: 800px; max-width: 800px;
line-height: 150%; line-height: 150%;
margin: auto; margin: auto;
} }
.integration-categories-sidebar h3 { .integration-categories-sidebar h3 {
color: hsl(0, 0%, 0%); color: hsl(0deg 0% 0%);
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 600;
} }
@ -626,7 +626,7 @@ $category-text: hsl(219, 23%, 33%);
border-radius: 4px; border-radius: 4px;
&:hover { &:hover {
border: 1px solid hsl(167, 34%, 56%); border: 1px solid hsl(167deg 34% 56%);
} }
.eligible_realm_logo { .eligible_realm_logo {
@ -644,7 +644,7 @@ $category-text: hsl(219, 23%, 33%);
.eligible_realm_name { .eligible_realm_name {
font-weight: 400; font-weight: 400;
font-size: 21px; font-size: 21px;
color: hsl(220.6, 20%, 33.3%); color: hsl(220.6deg 20% 33.3%);
line-height: 23px; line-height: 23px;
margin: 0 0 2px; margin: 0 0 2px;
} }
@ -652,7 +652,7 @@ $category-text: hsl(219, 23%, 33%);
.eligible_realm_description { .eligible_realm_description {
font-weight: 400; font-weight: 400;
font-size: 15px; font-size: 15px;
color: hsl(220, 2.7%, 56.5%); color: hsl(220deg 2.7% 56.5%);
line-height: 19px; line-height: 19px;
margin: 0; margin: 0;
/* For restricting text to only two lines. /* For restricting text to only two lines.

28
web/styles/portico/integrations_dev_panel.css
View File

@ -8,29 +8,29 @@
margin-left: 3%; margin-left: 3%;
margin-right: 3%; margin-right: 3%;
padding: 20px 10px 15px; padding: 20px 10px 15px;
background-color: hsla(0, 0%, 100%, 0.48); background-color: hsl(0deg 0% 100% / 48%);
box-shadow: 0 0 40px hsla(0, 0%, 0%, 0.06); box-shadow: 0 0 40px hsl(0deg 0% 0% / 6%);
& textarea { & textarea {
color: hsl(0, 0%, 33%); color: hsl(0deg 0% 33%);
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
border-radius: 4px; border-radius: 4px;
vertical-align: middle; vertical-align: middle;
border: 1px solid hsl(0, 0%, 80%); border: 1px solid hsl(0deg 0% 80%);
padding: 4px 6px; padding: 4px 6px;
margin-bottom: 10px; margin-bottom: 10px;
font-size: 14px; font-size: 14px;
box-shadow: inset 0 1px 1px hsla(0, 0%, 0%, 0.075); box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%);
transition: border linear 0.2s, box-shadow linear 0.2s; transition: border linear 0.2s, box-shadow linear 0.2s;
&:focus { &:focus {
border-color: hsla(206.5, 80%, 62%, 0.8); border-color: hsl(206.5deg 80% 62% / 80%);
outline: 0; outline: 0;
box-shadow: inset 0 1px 1px hsla(0, 0%, 0%, 0.075), box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%),
0 0 8px hsla(206.5, 80%, 62%, 0.6); 0 0 8px hsl(206.5deg 80% 62% / 60%);
} }
&:read-only { &:read-only {
@ -49,12 +49,12 @@
padding: 4px 6px; padding: 4px 6px;
width: 220px; width: 220px;
font-size: 14px; font-size: 14px;
color: hsl(0, 0%, 33%); color: hsl(0deg 0% 33%);
border-radius: 4px; border-radius: 4px;
border: 1px solid hsl(0, 0%, 80%); border: 1px solid hsl(0deg 0% 80%);
margin-bottom: 10px; margin-bottom: 10px;
cursor: pointer; cursor: pointer;
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
vertical-align: middle; vertical-align: middle;
} }
} }
@ -69,7 +69,7 @@
width: 100%; width: 100%;
height: 500px; height: 500px;
resize: vertical; resize: vertical;
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
} }
.top-navbar { .top-navbar {
@ -101,7 +101,7 @@
} }
.optional { .optional {
color: hsl(0, 0%, 50%); color: hsl(0deg 0% 50%);
} }
.pad-small { .pad-small {

522
web/styles/portico/landing_page.css
View File

File diff suppressed because it is too large Load Diff

64
web/styles/portico/markdown.css
View File

@ -25,7 +25,7 @@
} }
& h1 { & h1 {
border-bottom: 1px solid hsl(0, 0%, 93%); border-bottom: 1px solid hsl(0deg 0% 93%);
padding-bottom: 10px; padding-bottom: 10px;
margin-bottom: 15px; margin-bottom: 15px;
@ -133,8 +133,8 @@
vertical-align: top; vertical-align: top;
padding: 3px 6.5px 3px 7.5px; padding: 3px 6.5px 3px 7.5px;
margin-right: 5px; margin-right: 5px;
background-color: hsl(170, 48%, 54%); background-color: hsl(170deg 48% 54%);
color: hsl(0, 0%, 100%); color: hsl(0deg 0% 100%);
border-radius: 100%; border-radius: 100%;
font-size: 0.9em; font-size: 0.9em;
line-height: 1.1; line-height: 1.1;
@ -142,7 +142,7 @@
} }
.codehilite { .codehilite {
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
& pre { & pre {
white-space: pre; white-space: pre;
@ -190,7 +190,7 @@
.content { .content {
padding: 30px; padding: 30px;
max-width: 700px; max-width: 700px;
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
& ol li p:not(:first-child) { & ol li p:not(:first-child) {
display: block; display: block;
@ -215,11 +215,11 @@
} }
& a { & a {
color: hsl(176, 46%, 41%); color: hsl(176deg 46% 41%);
font-weight: 600; font-weight: 600;
& code { & code {
color: hsl(176, 46%, 41%); color: hsl(176deg 46% 41%);
} }
} }
@ -229,8 +229,8 @@
& img { & img {
vertical-align: top; vertical-align: top;
box-shadow: 0 0 4px hsla(0, 0%, 0%, 0.05); box-shadow: 0 0 4px hsl(0deg 0% 0% / 5%);
border: 1px solid hsl(0, 0%, 87%); border: 1px solid hsl(0deg 0% 87%);
border-radius: 4px; border-radius: 4px;
&.inline { &.inline {
@ -263,8 +263,8 @@
.keyboard_tip { .keyboard_tip {
position: relative; position: relative;
display: block; display: block;
background-color: hsl(210, 22%, 96%); background-color: hsl(210deg 22% 96%);
border: 1px solid hsl(210, 22%, 90%); border: 1px solid hsl(210deg 22% 90%);
border-radius: 4px; border-radius: 4px;
padding: 10px; padding: 10px;
margin: 5px 0; margin: 5px 0;
@ -280,8 +280,8 @@
.tip, .tip,
.keyboard_tip { .keyboard_tip {
background-color: hsl(46, 63%, 95%); background-color: hsl(46deg 63% 95%);
border: 1px solid hsl(46, 63%, 84%); border: 1px solid hsl(46deg 63% 84%);
} }
.tip::before { .tip::before {
@ -306,16 +306,16 @@
border-radius: 6px; border-radius: 6px;
&.grey { &.grey {
border: 1px solid hsl(0, 0%, 80%); border: 1px solid hsl(0deg 0% 80%);
} }
&.grey-line { &.grey-line {
border: 1px solid hsl(0, 0%, 80%); border: 1px solid hsl(0deg 0% 80%);
top: 2px; top: 2px;
&::after { &::after {
content: ""; content: "";
background: hsl(0, 0%, 80%); background: hsl(0deg 0% 80%);
height: 1.5px; height: 1.5px;
width: 6px; width: 6px;
display: block; display: block;
@ -324,34 +324,34 @@
} }
&.orange { &.orange {
border: 1px solid hsl(29, 84%, 51%); border: 1px solid hsl(29deg 84% 51%);
background: linear-gradient( background: linear-gradient(
to bottom, to bottom,
hsla(0, 0%, 100%, 0) 50%, hsl(0deg 0% 100% / 0%) 50%,
hsla(29, 84%, 51%, 1) 50% hsl(29deg 84% 51%) 50%
); );
} }
&.green { &.green {
border: 1px solid hsl(106, 74%, 44%); border: 1px solid hsl(106deg 74% 44%);
background-color: hsla(106, 74%, 44%, 0.3); background-color: hsl(106deg 74% 44% / 30%);
} }
&.green.solid { &.green.solid {
background-color: hsl(106, 74%, 44%); background-color: hsl(106deg 74% 44%);
} }
} }
& kbd { & kbd {
/* Same as kbd in app_components.css */ /* Same as kbd in app_components.css */
display: inline-block; display: inline-block;
border: 1px solid hsl(0, 0%, 80%); border: 1px solid hsl(0deg 0% 80%);
border-radius: 4px; border-radius: 4px;
font-weight: 600; font-weight: 600;
white-space: nowrap; white-space: nowrap;
background-color: hsl(0, 0%, 98%); background-color: hsl(0deg 0% 98%);
color: hsl(0, 0%, 20%); color: hsl(0deg 0% 20%);
text-shadow: 0 1px 0 hsl(0, 0%, 100%); text-shadow: 0 1px 0 hsl(0deg 0% 100%);
/* Different from app_components.css */ /* Different from app_components.css */
/* Removed margin setting */ /* Removed margin setting */
font-size: 0.85em; font-size: 0.85em;
@ -373,12 +373,12 @@
font-size: 0.825em; font-size: 0.825em;
unicode-bidi: embed; unicode-bidi: embed;
direction: ltr; direction: ltr;
color: hsl(0, 0%, 0%); color: hsl(0deg 0% 0%);
border-radius: 3px; border-radius: 3px;
/* Different from base rules for code elements in rendered_markdown.css */ /* Different from base rules for code elements in rendered_markdown.css */
white-space: initial; white-space: initial;
padding: 0 4px; padding: 0 4px;
background-color: hsl(0, 0%, 93%); background-color: hsl(0deg 0% 93%);
} }
& pre { & pre {
@ -409,11 +409,11 @@
cursor: pointer; cursor: pointer;
&.active { &.active {
color: hsl(176, 46%, 41%); color: hsl(176deg 46% 41%);
margin-bottom: -1px; margin-bottom: -1px;
border: 1px solid hsl(0, 0%, 87%); border: 1px solid hsl(0deg 0% 87%);
border-bottom: 1px solid hsl(0, 0%, 100%); border-bottom: 1px solid hsl(0deg 0% 100%);
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
} }
} }
@ -426,7 +426,7 @@
.blocks { .blocks {
padding: 10px; padding: 10px;
margin-bottom: 10px; margin-bottom: 10px;
border: 1px solid hsl(0, 0%, 87%); border: 1px solid hsl(0deg 0% 87%);
& > div { & > div {
display: none; display: none;

118
web/styles/portico/portico.css
View File

@ -1,5 +1,5 @@
body { body {
background-color: hsl(0, 0%, 98%); background-color: hsl(0deg 0% 98%);
font-family: "Source Sans 3", sans-serif; font-family: "Source Sans 3", sans-serif;
line-height: 150%; line-height: 150%;
height: 100%; height: 100%;
@ -18,7 +18,7 @@ html {
.digest-address-link { .digest-address-link {
margin-top: 10px; margin-top: 10px;
color: hsl(0, 0%, 60%); color: hsl(0deg 0% 60%);
font-size: 12px; font-size: 12px;
text-align: center; text-align: center;
} }
@ -37,8 +37,8 @@ html {
padding: 15px 0; padding: 15px 0;
height: 29px; height: 29px;
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
box-shadow: 0 0 4px hsla(0, 0%, 0%, 0.1); box-shadow: 0 0 4px hsl(0deg 0% 0% / 10%);
z-index: 100; z-index: 100;
} }
@ -62,13 +62,13 @@ html {
which look nicer against a different background */ which look nicer against a different background */
.api-center .code-section { .api-center .code-section {
.blocks { .blocks {
background-color: hsl(0, 0%, 98%); background-color: hsl(0deg 0% 98%);
} }
& ul.nav { & ul.nav {
& li.active { & li.active {
background-color: hsl(0, 0%, 98%); background-color: hsl(0deg 0% 98%);
border-bottom: 1px solid hsl(0, 0%, 98%); border-bottom: 1px solid hsl(0deg 0% 98%);
} }
} }
} }
@ -86,17 +86,17 @@ html {
.digest-email-html { .digest-email-html {
padding: 20px; padding: 20px;
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
border-radius: 5px; border-radius: 5px;
} }
.app.help { .app.help {
display: inline-flex; display: inline-flex;
box-shadow: 0 -20px 50px hsla(0, 0%, 0%, 0.04); box-shadow: 0 -20px 50px hsl(0deg 0% 0% / 4%);
overflow: auto; overflow: auto;
color: hsl(0, 0%, 27%); color: hsl(0deg 0% 27%);
.hamburger { .hamburger {
display: none; display: none;
@ -120,11 +120,11 @@ html {
/* 100vh - navbar - paddingTop - paddingBottom - bottomNav */ /* 100vh - navbar - paddingTop - paddingBottom - bottomNav */
height: calc(100vh - 59px); height: calc(100vh - 59px);
border-right: 1px solid hsl(219, 10%, 97%); border-right: 1px solid hsl(219deg 10% 97%);
overflow: auto; overflow: auto;
background-color: hsl(153, 32%, 55%); background-color: hsl(153deg 32% 55%);
color: hsl(0, 0%, 100%); color: hsl(0deg 0% 100%);
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
@ -235,7 +235,7 @@ html {
& a { & a {
&.highlighted { &.highlighted {
background-color: hsl(152, 40%, 42%); background-color: hsl(152deg 40% 42%);
/* Don't show the focus outline for the highlighted page. */ /* Don't show the focus outline for the highlighted page. */
outline: 0; outline: 0;
@ -245,7 +245,7 @@ html {
} }
.help .markdown { .help .markdown {
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
width: calc(100vw - 300px); width: calc(100vw - 300px);
height: calc(100vh - 59px); height: calc(100vh - 59px);
} }
@ -286,15 +286,15 @@ html {
font-size: 0.9rem; font-size: 0.9rem;
&.text-error { &.text-error {
color: hsl(1.1, 44.7%, 50.4%); color: hsl(1.1deg 44.7% 50.4%);
} }
} }
a.title { a.title {
color: hsl(0, 0%, 0%); color: hsl(0deg 0% 0%);
&:hover { &:hover {
color: hsl(0, 0%, 50%); color: hsl(0deg 0% 50%);
text-decoration: none; text-decoration: none;
} }
} }
@ -353,8 +353,8 @@ label.text-error {
} }
input.text-error { input.text-error {
border-color: hsl(0, 100%, 50%); border-color: hsl(0deg 100% 50%);
outline-color: hsl(0, 100%, 50%); outline-color: hsl(0deg 100% 50%);
} }
.portico-container { .portico-container {
@ -395,13 +395,13 @@ input.text-error {
a:focus, a:focus,
a:hover { a:hover {
text-decoration: none; text-decoration: none;
color: hsl(0, 0%, 20%); color: hsl(0deg 0% 20%);
} }
.light { .light {
font-size: 1.2rem; font-size: 1.2rem;
font-weight: 400; font-weight: 400;
color: hsl(0, 0%, 20%); color: hsl(0deg 0% 20%);
opacity: 0.7; opacity: 0.7;
} }
} }
@ -425,11 +425,11 @@ input.text-error {
margin: 10px 0 0; margin: 10px 0 0;
list-style-type: none; list-style-type: none;
width: fit-content; width: fit-content;
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
padding: 5px 0; padding: 5px 0;
border-radius: 4px; border-radius: 4px;
border: 1px solid hsl(0, 0%, 87%); border: 1px solid hsl(0deg 0% 87%);
box-shadow: 0 2px 5px hsla(0, 0%, 0%, 0.1); box-shadow: 0 2px 5px hsl(0deg 0% 0% / 10%);
&::before { &::before {
content: "\25B2"; content: "\25B2";
@ -437,7 +437,7 @@ input.text-error {
top: -4px; top: -4px;
right: 9px; right: 9px;
font-size: 0.5em; font-size: 0.5em;
color: hsl(0, 0%, 87%); color: hsl(0deg 0% 87%);
line-height: 0; line-height: 0;
transform: scale(1.8, 1); transform: scale(1.8, 1);
} }
@ -451,7 +451,7 @@ input.text-error {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background-color: hsl(190, 10%, 90%); background-color: hsl(190deg 10% 90%);
transition: none; transition: none;
} }
@ -462,7 +462,7 @@ input.text-error {
transition: none; transition: none;
font-size: 0.9em; font-size: 0.9em;
font-weight: 400; font-weight: 400;
color: hsl(0, 0%, 27%); color: hsl(0deg 0% 27%);
} }
&:hover a { &:hover a {
@ -492,7 +492,7 @@ input.text-error {
} }
.dropdown-pill { .dropdown-pill {
border: 1px solid hsla(0, 0%, 0%, 0.2); border: 1px solid hsl(0deg 0% 0% / 20%);
border-radius: 4px; border-radius: 4px;
margin-left: 10px; margin-left: 10px;
font-weight: 400; font-weight: 400;
@ -548,8 +548,8 @@ input.text-error {
} }
.table.table-striped { .table.table-striped {
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
box-shadow: 0 0 4px hsla(0, 0%, 0%, 0.1); box-shadow: 0 0 4px hsl(0deg 0% 0% / 10%);
} }
.team-profiles { .team-profiles {
@ -613,9 +613,9 @@ input.text-error {
display: none; display: none;
&:checked + label { &:checked + label {
border: 1px solid hsl(0, 0%, 93%); border: 1px solid hsl(0deg 0% 93%);
border-top: 2px solid hsl(80, 61%, 50%); border-top: 2px solid hsl(80deg 61% 50%);
border-bottom-color: hsl(0, 0%, 100%); border-bottom-color: hsl(0deg 0% 100%);
} }
} }
@ -643,7 +643,7 @@ input.text-error {
.person { .person {
box-sizing: border-box; box-sizing: border-box;
padding: 10px; padding: 10px;
border: 1px solid hsl(0, 0%, 93%); border: 1px solid hsl(0deg 0% 93%);
border-radius: 4px; border-radius: 4px;
transition: all 0.3s ease; transition: all 0.3s ease;
@ -652,7 +652,7 @@ input.text-error {
} }
&:hover { &:hover {
border: 1px solid hsl(0, 0%, 73%); border: 1px solid hsl(0deg 0% 73%);
} }
.avatar { .avatar {
@ -701,7 +701,7 @@ input#terminal:checked ~ #tab-terminal {
.tab-loading, .tab-loading,
.last-updated { .last-updated {
color: hsl(0, 0%, 67%); color: hsl(0deg 0% 67%);
font-size: 0.9em !important; font-size: 0.9em !important;
padding-top: 30px; padding-top: 30px;
text-align: center; text-align: center;
@ -795,7 +795,7 @@ input.new-organization-button {
& a { & a {
display: inline-block; display: inline-block;
color: hsl(0, 0%, 100%); color: hsl(0deg 0% 100%);
padding: 2px 7px 1px 8px; padding: 2px 7px 1px 8px;
font-weight: 600; font-weight: 600;
font-size: 16px; font-size: 16px;
@ -804,8 +804,8 @@ input.new-organization-button {
&:hover { &:hover {
text-decoration: none; text-decoration: none;
background-color: hsla(0, 0%, 100%, 1); background-color: hsl(0deg 0% 100%);
color: hsl(170, 50%, 40%); color: hsl(170deg 50% 40%);
} }
} }
} }
@ -902,7 +902,7 @@ input.new-organization-button {
&.grid { &.grid {
padding: 10px 0; padding: 10px 0;
border-bottom: 1px solid hsl(0, 0%, 87%); border-bottom: 1px solid hsl(0deg 0% 87%);
& label.inline-block { & label.inline-block {
width: 200px; width: 200px;
@ -960,7 +960,7 @@ input.new-organization-button {
.error_page { .error_page {
min-height: calc(100vh - 290px); min-height: calc(100vh - 290px);
height: 100%; height: 100%;
background-color: hsl(163, 42%, 85%); background-color: hsl(163deg 42% 85%);
font-family: "Source Sans 3", sans-serif; font-family: "Source Sans 3", sans-serif;
} }
@ -982,10 +982,10 @@ input.new-organization-button {
.error_page .errorbox { .error_page .errorbox {
margin: auto; margin: auto;
border: 2px solid hsl(163, 43%, 46%); border: 2px solid hsl(163deg 43% 46%);
max-width: 500px; max-width: 500px;
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
box-shadow: 0 0 4px hsl(163, 43%, 46%); box-shadow: 0 0 4px hsl(163deg 43% 46%);
font-size: 18px; font-size: 18px;
&.config-error { &.config-error {
@ -994,7 +994,7 @@ input.new-organization-button {
} }
.error_page p { .error_page p {
color: hsl(0, 0%, 20%); color: hsl(0deg 0% 20%);
} }
.error_page .errorcontent { .error_page .errorcontent {
@ -1003,7 +1003,7 @@ input.new-organization-button {
} }
.error_page .lead { .error_page .lead {
color: hsl(163, 49%, 44%); color: hsl(163deg 49% 44%);
font-size: 35px; font-size: 35px;
margin-bottom: 20px; margin-bottom: 20px;
line-height: normal; line-height: normal;
@ -1030,7 +1030,7 @@ input.new-organization-button {
position: fixed; position: fixed;
top: 70px; top: 70px;
left: 9px; left: 9px;
fill: hsl(0, 0%, 100%); fill: hsl(0deg 0% 100%);
z-index: 2; z-index: 2;
transition: all 0.3s ease; transition: all 0.3s ease;
cursor: pointer; cursor: pointer;
@ -1244,7 +1244,7 @@ label.label-title {
&:hover .api-argument-hover-link i.fa { &:hover .api-argument-hover-link i.fa {
opacity: 1; opacity: 1;
color: hsl(0, 0%, 0%); color: hsl(0deg 0% 0%);
cursor: pointer; cursor: pointer;
} }
} }
@ -1263,26 +1263,26 @@ label.label-title {
text-transform: uppercase; text-transform: uppercase;
font-weight: 600; font-weight: 600;
font-size: 12px; font-size: 12px;
color: hsl(14, 75%, 60%); color: hsl(14deg 75% 60%);
} }
.api-argument-optional { .api-argument-optional {
text-transform: uppercase; text-transform: uppercase;
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
color: hsl(0, 0%, 47%); color: hsl(0deg 0% 47%);
} }
.api-argument-deprecated { .api-argument-deprecated {
text-transform: uppercase; text-transform: uppercase;
font-weight: 600; font-weight: 600;
font-size: 12px; font-size: 12px;
color: hsl(0, 50%, 60%); color: hsl(0deg 50% 60%);
} }
} }
.api-field-type { .api-field-type {
color: hsl(176, 46.4%, 41%); color: hsl(176deg 46.4% 41%);
} }
.desktop-redirect-box { .desktop-redirect-box {
@ -1308,18 +1308,22 @@ label.label-title {
#navbar-custom-message { #navbar-custom-message {
font-size: 1rem; font-size: 1rem;
background: linear-gradient(145deg, hsl(191, 56%, 55%), hsl(169, 65%, 42%)); background: linear-gradient(
color: hsl(0, 0%, 100%); 145deg,
hsl(191deg 56% 55%),
hsl(169deg 65% 42%)
);
color: hsl(0deg 0% 100%);
font-weight: 600; font-weight: 600;
text-align: center; text-align: center;
position: relative; position: relative;
top: 0; top: 0;
padding: 10px; padding: 10px;
border-bottom: 1px solid hsl(177, 52%, 55%); border-bottom: 1px solid hsl(177deg 52% 55%);
z-index: 5; z-index: 5;
& a { & a {
color: hsl(0, 0%, 100%); color: hsl(0deg 0% 100%);
text-decoration: underline; text-decoration: underline;
} }
} }

140
web/styles/portico/portico_signin.css
View File

@ -24,9 +24,9 @@ html {
padding: 30px; padding: 30px;
min-width: 0; min-width: 0;
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
box-shadow: 0 0 4px hsla(0, 0%, 0%, 0.1); box-shadow: 0 0 4px hsl(0deg 0% 0% / 10%);
border: 1px solid hsl(0, 0%, 87%); border: 1px solid hsl(0deg 0% 87%);
border-radius: 4px; border-radius: 4px;
} }
@ -37,11 +37,11 @@ html {
font-size: 0.9em; font-size: 0.9em;
& a { & a {
color: hsl(164, 100%, 23%); color: hsl(164deg 100% 23%);
&:hover { &:hover {
text-decoration: none; text-decoration: none;
color: hsl(156, 62%, 61%); color: hsl(156deg 62% 61%);
} }
} }
} }
@ -53,17 +53,17 @@ html {
font-size: 1.2em; font-size: 1.2em;
& a { & a {
color: hsl(164, 100%, 23%); color: hsl(164deg 100% 23%);
&:hover { &:hover {
text-decoration: none; text-decoration: none;
color: hsl(156, 62%, 61%); color: hsl(156deg 62% 61%);
} }
} }
} }
.grey { .grey {
color: hsl(0, 0%, 67%); color: hsl(0deg 0% 67%);
} }
.find-account-page-container #find_account i { .find-account-page-container #find_account i {
@ -105,12 +105,12 @@ html {
padding: 4px 6px; padding: 4px 6px;
width: 220px; width: 220px;
font-size: 14px; font-size: 14px;
color: hsl(0, 0%, 33%); color: hsl(0deg 0% 33%);
border-radius: 4px; border-radius: 4px;
border: 1px solid hsl(0, 0%, 80%); border: 1px solid hsl(0deg 0% 80%);
margin-bottom: 10px; margin-bottom: 10px;
cursor: pointer; cursor: pointer;
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
} }
} }
@ -150,13 +150,13 @@ html {
} }
.form-inline .outline { .form-inline .outline {
border: 2px inset hsl(213, 23%, 25%); border: 2px inset hsl(213deg 23% 25%);
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
color: hsl(213, 23%, 25%); color: hsl(213deg 23% 25%);
padding: 13px 20px 11px; padding: 13px 20px 11px;
&:hover { &:hover {
background-color: hsl(213, 65%, 97%); background-color: hsl(213deg 65% 97%);
} }
} }
@ -182,8 +182,8 @@ html {
} }
.dev-button { .dev-button {
color: hsl(170, 41%, 52%); color: hsl(170deg 41% 52%);
border: 1px solid hsl(170, 41%, 52%); border: 1px solid hsl(170deg 41% 52%);
border-radius: 4px; border-radius: 4px;
background-color: transparent; background-color: transparent;
font-family: inherit; font-family: inherit;
@ -196,8 +196,8 @@ html {
transition: color 0.3s ease, border 0.3s ease; transition: color 0.3s ease, border 0.3s ease;
&:hover { &:hover {
color: hsl(156, 62%, 61%); color: hsl(156deg 62% 61%);
border-color: hsl(156, 62%, 61%); border-color: hsl(156deg 62% 61%);
} }
&.dev-login-button { &.dev-login-button {
@ -235,7 +235,7 @@ html {
.invite-required { .invite-required {
display: block; display: block;
color: hsl(0, 0%, 67%); color: hsl(0deg 0% 67%);
font-weight: normal; font-weight: normal;
} }
} }
@ -272,22 +272,22 @@ html {
} }
.header { .header {
color: hsl(0, 0%, 27%); color: hsl(0deg 0% 27%);
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
position: fixed; position: fixed;
width: 100%; width: 100%;
top: 0; top: 0;
.top-links a, .top-links a,
.header-main .logo span { .header-main .logo span {
color: hsl(0, 0%, 27%); color: hsl(0deg 0% 27%);
} }
} }
.register-form { .register-form {
&.new-style { &.new-style {
text-align: left; text-align: left;
color: hsl(0, 0%, 45%); color: hsl(0deg 0% 45%);
} }
#errors { #errors {
@ -395,8 +395,8 @@ html {
font-weight: 400; font-weight: 400;
box-sizing: border-box; box-sizing: border-box;
outline: none; outline: none;
color: hsl(0, 0%, 100%); color: hsl(0deg 0% 100%);
background-color: hsl(213, 23%, 25%); background-color: hsl(213deg 23% 25%);
margin: 25px 0 5px; margin: 25px 0 5px;
height: 50px; height: 50px;
@ -407,15 +407,15 @@ html {
transition: all 0.3s ease; transition: all 0.3s ease;
&:hover { &:hover {
background-color: hsl(213, 33%, 31%); background-color: hsl(213deg 33% 31%);
} }
&:active { &:active {
background-color: hsl(214, 28%, 16%); background-color: hsl(214deg 28% 16%);
} }
&:focus { &:focus {
outline: 3px solid hsl(213, 81%, 79%); outline: 3px solid hsl(213deg 81% 79%);
} }
&.full-width { &.full-width {
@ -430,15 +430,15 @@ html {
.demo-organization-warning { .demo-organization-warning {
position: relative; position: relative;
display: block; display: block;
background-color: hsl(360, 100%, 93%); background-color: hsl(360deg 100% 93%);
border: 1px solid hsl(0, 0%, 80%); border: 1px solid hsl(0deg 0% 80%);
border-radius: 4px; border-radius: 4px;
padding: 10px; padding: 10px;
margin: 10px 0; margin: 10px 0;
font-size: 1rem; font-size: 1rem;
font-weight: 500; font-weight: 500;
line-height: 1.5; line-height: 1.5;
color: hsl(0, 0%, 27%); color: hsl(0deg 0% 27%);
& a { & a {
text-decoration: none; text-decoration: none;
@ -464,7 +464,7 @@ html {
background-color: transparent; background-color: transparent;
border: none; border: none;
color: hsl(0, 44%, 54%); color: hsl(0deg 44% 54%);
} }
&.alert-error { &.alert-error {
@ -479,7 +479,7 @@ html {
.get-started { .get-started {
font-size: 2.5rem; font-size: 2.5rem;
text-align: center; text-align: center;
color: hsl(0, 0%, 40%); color: hsl(0deg 0% 40%);
margin-bottom: 20px; margin-bottom: 20px;
} }
@ -507,21 +507,21 @@ html {
width: 280px; width: 280px;
border: 1px solid hsl(0, 0%, 87%); border: 1px solid hsl(0deg 0% 87%);
box-shadow: none; box-shadow: none;
border-radius: 4px; border-radius: 4px;
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
color: hsl(0, 0%, 33%); color: hsl(0deg 0% 33%);
transition: border 0.3s ease; transition: border 0.3s ease;
&:focus:invalid { &:focus:invalid {
box-shadow: none; box-shadow: none;
color: hsl(0, 0%, 27%); color: hsl(0deg 0% 27%);
} }
&:focus { &:focus {
border: 1px solid hsl(0, 0%, 53%); border: 1px solid hsl(0deg 0% 53%);
} }
} }
@ -546,7 +546,7 @@ html {
transform: translateY(39px) translateX(14px); transform: translateY(39px) translateX(14px);
font-size: 1.2rem; font-size: 1.2rem;
font-weight: 400; font-weight: 400;
color: hsl(0, 0%, 67%); color: hsl(0deg 0% 67%);
pointer-events: none; pointer-events: none;
} }
@ -567,7 +567,7 @@ html {
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
color: hsl(0, 0%, 27%); color: hsl(0deg 0% 27%);
} }
/* The width of the "Organization name" text box /* The width of the "Organization name" text box
@ -581,7 +581,7 @@ html {
display: block; display: block;
padding: 0; padding: 0;
color: hsl(1.1, 44.7%, 50.4%); color: hsl(1.1deg 44.7% 50.4%);
font-size: 0.7em; font-size: 0.7em;
font-weight: 600; font-weight: 600;
text-align: left; text-align: left;
@ -597,7 +597,7 @@ html {
top: 0; top: 0;
right: 0; right: 0;
text-align: right; text-align: right;
color: hsl(1.1, 44.7%, 50.4%); color: hsl(1.1deg 44.7% 50.4%);
font-size: 0.7em; font-size: 0.7em;
font-weight: 600; font-weight: 600;
padding-left: 0; padding-left: 0;
@ -675,7 +675,7 @@ html {
& p { & p {
font-weight: 400; font-weight: 400;
color: hsl(0, 0%, 67%); color: hsl(0deg 0% 67%);
} }
} }
@ -683,7 +683,7 @@ html {
width: 100%; width: 100%;
display: block; display: block;
margin: 10px auto; margin: 10px auto;
color: hsl(0, 0%, 34%); color: hsl(0deg 0% 34%);
font-weight: 600; font-weight: 600;
text-align: center; text-align: center;
position: relative; position: relative;
@ -699,11 +699,11 @@ html {
left: 0; left: 0;
z-index: -1; z-index: -1;
border-bottom: 2px solid hsl(0, 0%, 87%); border-bottom: 2px solid hsl(0deg 0% 87%);
} }
& span { & span {
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
padding: 0 5px; padding: 0 5px;
} }
} }
@ -732,7 +732,7 @@ html {
.left-side { .left-side {
width: 500px; width: 500px;
border-right: 1px solid hsl(0, 0%, 93%); border-right: 1px solid hsl(0deg 0% 93%);
position: relative; position: relative;
left: -1px; left: -1px;
@ -745,7 +745,7 @@ html {
} }
+ .right-side { + .right-side {
border-left: 1px solid hsl(0, 0%, 93%); border-left: 1px solid hsl(0deg 0% 93%);
/* this is to make sure the borders of the left and right side overlap /* this is to make sure the borders of the left and right side overlap
each other. */ each other. */
padding-left: 15px; padding-left: 15px;
@ -790,7 +790,7 @@ html {
.organization-path { .organization-path {
font-weight: 400; font-weight: 400;
color: hsl(0, 0%, 47%); color: hsl(0deg 0% 47%);
margin-top: 5px; margin-top: 5px;
} }
} }
@ -818,21 +818,21 @@ button.login-social-button {
background-size: auto 60%; background-size: auto 60%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 13px 50%; background-position: 13px 50%;
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
box-shadow: 0 1px 3px hsla(0, 0%, 0%, 0.3), 0 0 5px hsla(0, 0%, 0%, 0.1); box-shadow: 0 1px 3px hsl(0deg 0% 0% / 30%), 0 0 5px hsl(0deg 0% 0% / 10%);
margin-left: 0; margin-left: 0;
margin-top: 0; margin-top: 0;
color: hsl(0, 0%, 34%); color: hsl(0deg 0% 34%);
&:hover { &:hover {
background-color: hsl(0, 0%, 98%); background-color: hsl(0deg 0% 98%);
box-shadow: 1px 2px 5px hsla(0, 0%, 0%, 0.2); box-shadow: 1px 2px 5px hsl(0deg 0% 0% / 20%);
} }
&:active { &:active {
background-color: hsl(0, 0%, 93%); background-color: hsl(0deg 0% 93%);
box-shadow: 0 1px 1px hsla(0, 0%, 0%, 0.3); box-shadow: 0 1px 1px hsl(0deg 0% 0% / 30%);
} }
} }
@ -862,7 +862,7 @@ button#register_auth_button_gitlab {
.split-view .actions a, .split-view .actions a,
.back-to-login { .back-to-login {
color: hsl(164, 100%, 23%); color: hsl(164deg 100% 23%);
text-decoration: none; text-decoration: none;
font-weight: 600; font-weight: 600;
font-size: 0.8em; font-size: 0.8em;
@ -873,7 +873,7 @@ button#register_auth_button_gitlab {
&:hover { &:hover {
text-decoration: none; text-decoration: none;
color: hsl(156, 62%, 61%); color: hsl(156deg 62% 61%);
} }
} }
@ -933,9 +933,9 @@ button#register_auth_button_gitlab {
} }
& textarea { & textarea {
color: hsl(0, 0%, 33%); color: hsl(0deg 0% 33%);
vertical-align: middle; vertical-align: middle;
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
&:focus { &:focus {
outline: 0; outline: 0;
@ -1016,7 +1016,7 @@ button#register_auth_button_gitlab {
max-width: none; max-width: none;
margin: 2px 0; margin: 2px 0;
text-align: left; text-align: left;
color: hsl(0, 0%, 47%); color: hsl(0deg 0% 47%);
font-size: 0.9rem; font-size: 0.9rem;
font-weight: 400; font-weight: 400;
line-height: 1.2; line-height: 1.2;
@ -1033,9 +1033,9 @@ button#register_auth_button_gitlab {
margin-bottom: 0; margin-bottom: 0;
font-size: 21px; font-size: 21px;
line-height: 40px; line-height: 40px;
color: hsla(0, 0%, 0%, 0.5); color: hsl(0deg 0% 0% / 50%);
border: 0; border: 0;
border-bottom: 1px solid hsla(0, 0%, 90%, 1); border-bottom: 1px solid hsl(0deg 0% 90%);
+ .input-box { + .input-box {
margin-top: 20px; margin-top: 20px;
@ -1081,7 +1081,7 @@ button#register_auth_button_gitlab {
#profile_info_section { #profile_info_section {
#profile_avatar { #profile_avatar {
border: 1px solid hsl(0, 0%, 80%); border: 1px solid hsl(0deg 0% 80%);
border-radius: 8px; border-radius: 8px;
width: 120px; width: 120px;
height: 120px; height: 120px;
@ -1138,11 +1138,11 @@ button#register_auth_button_gitlab {
margin: 0; margin: 0;
&.select-email-form:hover { &.select-email-form:hover {
background-color: hsl(202, 56%, 91%); background-color: hsl(202deg 56% 91%);
cursor: pointer; cursor: pointer;
& i.fa { & i.fa {
color: hsl(203, 63%, 76%); color: hsl(203deg 63% 76%);
} }
} }
} }
@ -1150,7 +1150,7 @@ button#register_auth_button_gitlab {
.choose-email-box { .choose-email-box {
padding: 13px 0; padding: 13px 0;
margin: 0 30px; margin: 0 30px;
border-bottom: 1px solid hsl(0, 0%, 95%); border-bottom: 1px solid hsl(0deg 0% 95%);
display: flex; display: flex;
align-items: center; align-items: center;
@ -1177,7 +1177,7 @@ button#register_auth_button_gitlab {
} }
& i.fa { & i.fa {
color: hsl(0, 0%, 67%); color: hsl(0deg 0% 67%);
text-align: center; text-align: center;
line-height: 38px; line-height: 38px;
@ -1259,7 +1259,7 @@ button#register_auth_button_gitlab {
margin: 20px 0; margin: 20px 0;
& a { & a {
color: hsl(200, 100%, 36%); color: hsl(200deg 100% 36%);
} }
} }
} }

22
web/styles/portico/stats.css
View File

@ -1,6 +1,6 @@
body { body {
font-family: "Source Sans 3", sans-serif !important; font-family: "Source Sans 3", sans-serif !important;
background-color: hsl(0, 0%, 98%); background-color: hsl(0deg 0% 98%);
} }
p { p {
@ -30,8 +30,8 @@ p {
vertical-align: top; vertical-align: top;
margin: 0 auto; margin: 0 auto;
padding: 20px; padding: 20px;
border: 2px solid hsl(0, 0%, 93%); border: 2px solid hsl(0deg 0% 93%);
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
width: 395px; width: 395px;
& h1 { & h1 {
@ -50,8 +50,8 @@ p {
vertical-align: top; vertical-align: top;
margin: 10px 0; margin: 10px 0;
padding: 20px; padding: 20px;
border: 2px solid hsl(0, 0%, 93%); border: 2px solid hsl(0deg 0% 93%);
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
& button { & button {
position: relative; position: relative;
@ -101,10 +101,10 @@ p {
} }
.buttons button { .buttons button {
background-color: hsl(0, 0%, 94%); background-color: hsl(0deg 0% 94%);
&.selected { &.selected {
background-color: hsl(0, 0%, 85%); background-color: hsl(0deg 0% 85%);
} }
} }
@ -116,7 +116,7 @@ p {
padding: 2px 6px; padding: 2px 6px;
&:hover { &:hover {
background-color: hsl(0, 0%, 84%) !important; background-color: hsl(0deg 0% 84%) !important;
} }
} }
@ -142,7 +142,7 @@ p {
font-size: 0.8em; font-size: 0.8em;
font-weight: 400; font-weight: 400;
text-align: center; text-align: center;
color: hsl(0, 0%, 67%); color: hsl(0deg 0% 67%);
} }
#users_hover_humans, #users_hover_humans,
@ -211,8 +211,8 @@ p {
margin-top: -15px; margin-top: -15px;
margin-left: -15px; margin-left: -15px;
border-radius: 50%; border-radius: 50%;
border: 1px solid hsl(0, 0%, 80%); border: 1px solid hsl(0deg 0% 80%);
border-top-color: hsl(155, 93%, 42%); border-top-color: hsl(155deg 93% 42%);
animation: spinner 1s linear infinite; animation: spinner 1s linear infinite;
} }

124
web/styles/pygments.css
View File

@ -1,214 +1,214 @@
.codehilite pre { .codehilite pre {
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
} }
.codehilite .hll { .codehilite .hll {
background-color: hsl(60, 100%, 90%); background-color: hsl(60deg 100% 90%);
} }
.codehilite { .codehilite {
background-color: hsl(0, 0%, 98%); background-color: hsl(0deg 0% 98%);
} }
.codehilite .c { .codehilite .c {
color: hsl(180, 33%, 37%); color: hsl(180deg 33% 37%);
font-style: italic; font-style: italic;
} /* Comment */ } /* Comment */
.codehilite .err { .codehilite .err {
border: 1px solid hsl(0, 100%, 50%); border: 1px solid hsl(0deg 100% 50%);
} /* Error */ } /* Error */
.codehilite .k { .codehilite .k {
color: hsl(332, 70%, 38%); color: hsl(332deg 70% 38%);
} /* Keyword */ } /* Keyword */
.codehilite .o { .codehilite .o {
color: hsl(332, 70%, 38%); color: hsl(332deg 70% 38%);
} /* Operator */ } /* Operator */
.codehilite .cm { .codehilite .cm {
color: hsl(180, 33%, 37%); color: hsl(180deg 33% 37%);
font-style: italic; font-style: italic;
} /* Comment.Multiline */ } /* Comment.Multiline */
.codehilite .cp { .codehilite .cp {
color: hsl(38, 100%, 36%); color: hsl(38deg 100% 36%);
} /* Comment.Preproc */ } /* Comment.Preproc */
.codehilite .c1 { .codehilite .c1 {
color: hsl(0, 0%, 67%); color: hsl(0deg 0% 67%);
font-style: italic; font-style: italic;
} /* Comment.Single */ } /* Comment.Single */
.codehilite .cs { .codehilite .cs {
color: hsl(180, 33%, 37%); color: hsl(180deg 33% 37%);
font-style: italic; font-style: italic;
} /* Comment.Special */ } /* Comment.Special */
.codehilite .gd { .codehilite .gd {
color: hsl(0, 100%, 31%); color: hsl(0deg 100% 31%);
} /* Generic.Deleted */ } /* Generic.Deleted */
.codehilite .ge { .codehilite .ge {
font-style: italic; font-style: italic;
} /* Generic.Emph */ } /* Generic.Emph */
.codehilite .gr { .codehilite .gr {
color: hsl(0, 100%, 50%); color: hsl(0deg 100% 50%);
} /* Generic.Error */ } /* Generic.Error */
.codehilite .gh { .codehilite .gh {
color: hsl(240, 100%, 25%); color: hsl(240deg 100% 25%);
font-weight: bold; font-weight: bold;
} /* Generic.Heading */ } /* Generic.Heading */
.codehilite .gi { .codehilite .gi {
color: hsl(120, 100%, 31%); color: hsl(120deg 100% 31%);
} /* Generic.Inserted */ } /* Generic.Inserted */
.codehilite .go { .codehilite .go {
color: hsl(0, 0%, 50%); color: hsl(0deg 0% 50%);
} /* Generic.Output */ } /* Generic.Output */
.codehilite .gp { .codehilite .gp {
color: hsl(240, 100%, 25%); color: hsl(240deg 100% 25%);
font-weight: bold; font-weight: bold;
} /* Generic.Prompt */ } /* Generic.Prompt */
.codehilite .gs { .codehilite .gs {
font-weight: bold; font-weight: bold;
} /* Generic.Strong */ } /* Generic.Strong */
.codehilite .gu { .codehilite .gu {
color: hsl(300, 100%, 25%); color: hsl(300deg 100% 25%);
font-weight: bold; font-weight: bold;
} /* Generic.Subheading */ } /* Generic.Subheading */
.codehilite .gt { .codehilite .gt {
color: hsl(221, 100%, 40%); color: hsl(221deg 100% 40%);
} /* Generic.Traceback */ } /* Generic.Traceback */
.codehilite .kc { .codehilite .kc {
color: hsl(332, 70%, 38%); color: hsl(332deg 70% 38%);
font-weight: bold; font-weight: bold;
} /* Keyword.Constant */ } /* Keyword.Constant */
.codehilite .kd { .codehilite .kd {
color: hsl(332, 70%, 38%); color: hsl(332deg 70% 38%);
} /* Keyword.Declaration */ } /* Keyword.Declaration */
.codehilite .kn { .codehilite .kn {
color: hsl(332, 70%, 38%); color: hsl(332deg 70% 38%);
font-weight: bold; font-weight: bold;
} /* Keyword.Namespace */ } /* Keyword.Namespace */
.codehilite .kp { .codehilite .kp {
color: hsl(332, 70%, 38%); color: hsl(332deg 70% 38%);
} /* Keyword.Pseudo */ } /* Keyword.Pseudo */
.codehilite .kr { .codehilite .kr {
color: hsl(332, 70%, 38%); color: hsl(332deg 70% 38%);
font-weight: bold; font-weight: bold;
} /* Keyword.Reserved */ } /* Keyword.Reserved */
.codehilite .kt { .codehilite .kt {
color: hsl(332, 70%, 38%); color: hsl(332deg 70% 38%);
} /* Keyword.Type */ } /* Keyword.Type */
.codehilite .m { .codehilite .m {
color: hsl(0, 0%, 40%); color: hsl(0deg 0% 40%);
} /* Literal.Number */ } /* Literal.Number */
.codehilite .s { .codehilite .s {
color: hsl(86, 57%, 40%); color: hsl(86deg 57% 40%);
} /* Literal.String */ } /* Literal.String */
.codehilite .na { .codehilite .na {
color: hsl(71, 55%, 36%); color: hsl(71deg 55% 36%);
} /* Name.Attribute */ } /* Name.Attribute */
.codehilite .nb { .codehilite .nb {
color: hsl(195, 100%, 35%); color: hsl(195deg 100% 35%);
} /* Name.Builtin */ } /* Name.Builtin */
.codehilite .nc { .codehilite .nc {
color: hsl(264, 27%, 50%); color: hsl(264deg 27% 50%);
font-weight: bold; font-weight: bold;
} /* Name.Class */ } /* Name.Class */
.codehilite .no { .codehilite .no {
color: hsl(0, 100%, 26%); color: hsl(0deg 100% 26%);
} /* Name.Constant */ } /* Name.Constant */
.codehilite .nd { .codehilite .nd {
color: hsl(276, 100%, 56%); color: hsl(276deg 100% 56%);
} /* Name.Decorator */ } /* Name.Decorator */
.codehilite .ni { .codehilite .ni {
color: hsl(0, 0%, 60%); color: hsl(0deg 0% 60%);
font-weight: bold; font-weight: bold;
} /* Name.Entity */ } /* Name.Entity */
.codehilite .ne { .codehilite .ne {
color: hsl(2, 62%, 52%); color: hsl(2deg 62% 52%);
font-weight: bold; font-weight: bold;
} /* Name.Exception */ } /* Name.Exception */
.codehilite .nf { .codehilite .nf {
color: hsl(264, 27%, 50%); color: hsl(264deg 27% 50%);
} /* Name.Function */ } /* Name.Function */
.codehilite .nl { .codehilite .nl {
color: hsl(60, 100%, 31%); color: hsl(60deg 100% 31%);
} /* Name.Label */ } /* Name.Label */
.codehilite .nn { .codehilite .nn {
color: hsl(264, 27%, 50%); color: hsl(264deg 27% 50%);
font-weight: bold; font-weight: bold;
} /* Name.Namespace */ } /* Name.Namespace */
.codehilite .nt { .codehilite .nt {
color: hsl(120, 100%, 25%); color: hsl(120deg 100% 25%);
font-weight: bold; font-weight: bold;
} /* Name.Tag */ } /* Name.Tag */
.codehilite .nv { .codehilite .nv {
color: hsl(241, 68%, 28%); color: hsl(241deg 68% 28%);
} /* Name.Variable */ } /* Name.Variable */
.codehilite .nx { .codehilite .nx {
color: hsl(0, 0%, 26%); color: hsl(0deg 0% 26%);
} /* Not sure? */ } /* Not sure? */
.codehilite .ow { .codehilite .ow {
color: hsl(276, 100%, 56%); color: hsl(276deg 100% 56%);
font-weight: bold; font-weight: bold;
} /* Operator.Word */ } /* Operator.Word */
.codehilite .w { .codehilite .w {
color: hsl(0, 0%, 73%); color: hsl(0deg 0% 73%);
} /* Text.Whitespace */ } /* Text.Whitespace */
.codehilite .mf { .codehilite .mf {
color: hsl(195, 100%, 35%); color: hsl(195deg 100% 35%);
} /* Literal.Number.Float */ } /* Literal.Number.Float */
.codehilite .mh { .codehilite .mh {
color: hsl(195, 100%, 35%); color: hsl(195deg 100% 35%);
} /* Literal.Number.Hex */ } /* Literal.Number.Hex */
.codehilite .mi { .codehilite .mi {
color: hsl(195, 100%, 35%); color: hsl(195deg 100% 35%);
} /* Literal.Number.Integer */ } /* Literal.Number.Integer */
.codehilite .mo { .codehilite .mo {
color: hsl(195, 100%, 35%); color: hsl(195deg 100% 35%);
} /* Literal.Number.Oct */ } /* Literal.Number.Oct */
.codehilite .sb { .codehilite .sb {
color: hsl(86, 57%, 40%); color: hsl(86deg 57% 40%);
} /* Literal.String.Backtick */ } /* Literal.String.Backtick */
.codehilite .sc { .codehilite .sc {
color: hsl(86, 57%, 40%); color: hsl(86deg 57% 40%);
} /* Literal.String.Char */ } /* Literal.String.Char */
.codehilite .sd { .codehilite .sd {
color: hsl(86, 57%, 40%); color: hsl(86deg 57% 40%);
font-style: italic; font-style: italic;
} /* Literal.String.Doc */ } /* Literal.String.Doc */
.codehilite .s2 { .codehilite .s2 {
color: hsl(225, 71%, 33%); color: hsl(225deg 71% 33%);
} /* Literal.String.Double */ } /* Literal.String.Double */
.codehilite .se { .codehilite .se {
color: hsl(26, 69%, 43%); color: hsl(26deg 69% 43%);
font-weight: bold; font-weight: bold;
} /* Literal.String.Escape */ } /* Literal.String.Escape */
.codehilite .sh { .codehilite .sh {
color: hsl(86, 57%, 40%); color: hsl(86deg 57% 40%);
} /* Literal.String.Heredoc */ } /* Literal.String.Heredoc */
.codehilite .si { .codehilite .si {
color: hsl(336, 38%, 56%); color: hsl(336deg 38% 56%);
font-weight: bold; font-weight: bold;
} /* Literal.String.Interpol */ } /* Literal.String.Interpol */
.codehilite .sx { .codehilite .sx {
color: hsl(120, 100%, 25%); color: hsl(120deg 100% 25%);
} /* Literal.String.Other */ } /* Literal.String.Other */
.codehilite .sr { .codehilite .sr {
color: hsl(189, 54%, 49%); color: hsl(189deg 54% 49%);
} /* Literal.String.Regex */ } /* Literal.String.Regex */
.codehilite .s1 { .codehilite .s1 {
color: hsl(86, 57%, 40%); color: hsl(86deg 57% 40%);
} /* Literal.String.Single */ } /* Literal.String.Single */
.codehilite .ss { .codehilite .ss {
color: hsl(241, 68%, 28%); color: hsl(241deg 68% 28%);
} /* Literal.String.Symbol */ } /* Literal.String.Symbol */
.codehilite .bp { .codehilite .bp {
color: hsl(120, 100%, 25%); color: hsl(120deg 100% 25%);
} /* Name.Builtin.Pseudo */ } /* Name.Builtin.Pseudo */
.codehilite .vc { .codehilite .vc {
color: hsl(241, 68%, 28%); color: hsl(241deg 68% 28%);
} /* Name.Variable.Class */ } /* Name.Variable.Class */
.codehilite .vg { .codehilite .vg {
color: hsl(241, 68%, 28%); color: hsl(241deg 68% 28%);
} /* Name.Variable.Global */ } /* Name.Variable.Global */
.codehilite .vi { .codehilite .vi {
color: hsl(241, 68%, 28%); color: hsl(241deg 68% 28%);
} /* Name.Variable.Instance */ } /* Name.Variable.Instance */
.codehilite .il { .codehilite .il {
color: hsl(0, 0%, 40%); color: hsl(0deg 0% 40%);
} /* Literal.Number.Integer.Long */ } /* Literal.Number.Integer.Long */

56
web/styles/reactions.css
View File

@ -9,17 +9,17 @@
margin: 0.15em; margin: 0.15em;
padding: 0 2px 0 0; padding: 0 2px 0 0;
cursor: pointer; cursor: pointer;
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
border: 1px solid hsl(194, 37%, 84%); border: 1px solid hsl(194deg 37% 84%);
border-radius: 4px; border-radius: 4px;
align-items: center; align-items: center;
&.reacted { &.reacted {
background-color: hsl(195, 50%, 95%); background-color: hsl(195deg 50% 95%);
} }
&:hover { &:hover {
border: 1px solid hsl(200, 100%, 40%); border: 1px solid hsl(200deg 100% 40%);
} }
+ .reaction_button { + .reaction_button {
@ -30,7 +30,7 @@
height: 13px; height: 13px;
border-radius: 4px; border-radius: 4px;
padding-left: 0.3em; padding-left: 0.3em;
border: 1px solid hsl(0, 0%, 73%); border: 1px solid hsl(0deg 0% 73%);
padding-right: 0.3em; padding-right: 0.3em;
float: left; float: left;
} }
@ -58,19 +58,19 @@
} }
.message_reaction:hover .message_reaction_count { .message_reaction:hover .message_reaction_count {
color: hsl(200, 100%, 40%); color: hsl(200deg 100% 40%);
} }
& i { & i {
font-size: 1.3em; font-size: 1.3em;
float: left; float: left;
color: hsl(0, 0%, 33%); color: hsl(0deg 0% 33%);
} }
&:hover .message_reaction + .reaction_button { &:hover .message_reaction + .reaction_button {
visibility: visible; visibility: visible;
pointer-events: all; pointer-events: all;
background-color: hsl(0, 0%, 98%); background-color: hsl(0deg 0% 98%);
} }
.reaction_button { .reaction_button {
@ -82,7 +82,7 @@
} }
&:hover i { &:hover i {
color: hsl(200, 100%, 40%); color: hsl(200deg 100% 40%);
} }
/* Configure the reaction button to appear if and only if there's an /* Configure the reaction button to appear if and only if there's an
@ -95,31 +95,31 @@
} }
&:hover { &:hover {
border: 1px solid hsl(200, 100%, 40%); border: 1px solid hsl(200deg 100% 40%);
background-color: hsl(195, 50%, 95%); background-color: hsl(195deg 50% 95%);
cursor: pointer; cursor: pointer;
opacity: 1; opacity: 1;
color: hsl(200, 100%, 40%); color: hsl(200deg 100% 40%);
} }
.message_reaction_count { .message_reaction_count {
font-size: 1.1em; font-size: 1.1em;
color: hsl(0, 0%, 33%); color: hsl(0deg 0% 33%);
margin-right: 0; margin-right: 0;
} }
&:hover .message_reaction_count { &:hover .message_reaction_count {
color: hsl(200, 100%, 40%); color: hsl(200deg 100% 40%);
} }
} }
} }
.private-message .message_reactions .message_reaction { .private-message .message_reactions .message_reaction {
background-color: hsl(192, 20%, 95%); background-color: hsl(192deg 20% 95%);
&.reacted { &.reacted {
background-color: hsl(196, 51%, 93%); background-color: hsl(196deg 51% 93%);
border-color: hsl(193, 38%, 70%); border-color: hsl(193deg 38% 70%);
} }
} }
@ -139,11 +139,11 @@
} }
&.bottom .arrow { &.bottom .arrow {
border-bottom-color: hsl(0, 0%, 93%); border-bottom-color: hsl(0deg 0% 93%);
} }
&.top .arrow { &.top .arrow {
border-top-color: hsl(0, 0%, 93%); border-top-color: hsl(0deg 0% 93%);
} }
.emoji-popover { .emoji-popover {
@ -151,8 +151,8 @@
width: 250px; width: 250px;
.reacted { .reacted {
background-color: hsl(195, 50%, 95%); background-color: hsl(195deg 50% 95%);
border-color: hsl(195, 52%, 79%); border-color: hsl(195deg 52% 79%);
} }
.emoji-popover-top { .emoji-popover-top {
@ -161,13 +161,13 @@
padding: 8px 10px; padding: 8px 10px;
margin-bottom: 0; margin-bottom: 0;
background-color: hsl(0, 0%, 93%); background-color: hsl(0deg 0% 93%);
border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0;
.fa-search { .fa-search {
position: absolute; position: absolute;
color: hsl(0, 0%, 73%); color: hsl(0deg 0% 73%);
top: 15px; top: 15px;
left: 17px; left: 17px;
z-index: 3; z-index: 3;
@ -184,7 +184,7 @@
.emoji-popover-category-tabs { .emoji-popover-category-tabs {
/* Flex needed here to work around #7511 (90% zoom issues in firefox) */ /* Flex needed here to work around #7511 (90% zoom issues in firefox) */
display: flex; display: flex;
background-color: hsl(0, 0%, 93%); background-color: hsl(0deg 0% 93%);
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
@ -201,7 +201,7 @@
flex-grow: 1; flex-grow: 1;
&.active { &.active {
background-color: hsla(0, 0%, 100%, 0.2); background-color: hsl(0deg 0% 100% / 20%);
} }
} }
} }
@ -246,12 +246,12 @@
width: 25px; width: 25px;
&.reacted.reaction:focus { &.reacted.reaction:focus {
background-color: hsl(195, 55%, 88%); background-color: hsl(195deg 55% 88%);
outline: none; outline: none;
} }
&:not(.reacted):focus { &:not(.reacted):focus {
background-color: hsl(0, 0%, 93%); background-color: hsl(0deg 0% 93%);
outline: none; outline: none;
} }
@ -267,7 +267,7 @@
.emoji-showcase-container { .emoji-showcase-container {
position: relative; position: relative;
background-color: hsl(0, 0%, 93%); background-color: hsl(0deg 0% 93%);
min-height: 44px; min-height: 44px;
width: 250px; width: 250px;

42
web/styles/recent_topics.css
View File

@ -1,7 +1,7 @@
.recent_topics_container { .recent_topics_container {
padding: 0; padding: 0;
border-radius: 4px; border-radius: 4px;
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -14,7 +14,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-style: solid; border-style: solid;
border-color: hsl(0, 0%, 88%); border-color: hsl(0deg 0% 88%);
border-width: 0 1px; border-width: 0 1px;
border-radius: 0; border-radius: 0;
margin-top: 40px; margin-top: 40px;
@ -39,16 +39,16 @@
&:focus-within { &:focus-within {
/* Use the same color as the message feed pointer */ /* Use the same color as the message feed pointer */
box-shadow: 0 3px 0 hsl(215, 47%, 50%); box-shadow: 0 3px 0 hsl(215deg 47% 50%);
} }
} }
& a { & a {
color: hsl(205, 47%, 42%); color: hsl(205deg 47% 42%);
text-decoration: none; text-decoration: none;
&:hover { &:hover {
color: hsl(214, 40%, 58%); color: hsl(214deg 40% 58%);
} }
} }
@ -56,7 +56,7 @@
content: attr(data-empty); content: attr(data-empty);
display: block; display: block;
font-style: italic; font-style: italic;
color: hsl(0, 0%, 67%); color: hsl(0deg 0% 67%);
position: absolute; position: absolute;
} }
@ -129,7 +129,7 @@
margin: 0 5px 10px 0; margin: 0 5px 10px 0;
&:focus { &:focus {
background-color: hsl(0, 0%, 80%); background-color: hsl(0deg 0% 80%);
outline: 0; outline: 0;
} }
@ -138,14 +138,14 @@
opacity: 0.5; opacity: 0.5;
&:hover { &:hover {
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
border-color: hsl(0, 0%, 80%); border-color: hsl(0deg 0% 80%);
} }
} }
} }
.btn-recent-selected { .btn-recent-selected {
background-color: hsl(0, 11%, 93%); background-color: hsl(0deg 11% 93%);
} }
.unread_count { .unread_count {
@ -153,7 +153,7 @@
margin-right: 1px; margin-right: 1px;
margin-left: 1px; margin-left: 1px;
align-self: center; align-self: center;
background-color: hsl(105, 2%, 50%); background-color: hsl(105deg 2% 50%);
} }
.unread_mention_info:not(:empty) { .unread_mention_info:not(:empty) {
@ -253,28 +253,28 @@
.recent_topics_participant_overflow { .recent_topics_participant_overflow {
border: 0; border: 0;
border-radius: 6px; border-radius: 6px;
color: hsl(0, 0%, 100%); color: hsl(0deg 0% 100%);
display: block; display: block;
height: 24px; height: 24px;
text-align: center; text-align: center;
background-color: hsl(0, 0%, 88%); background-color: hsl(0deg 0% 88%);
} }
.recent_topics_participant_overflow { .recent_topics_participant_overflow {
color: hsl(0, 0%, 0%); color: hsl(0deg 0% 0%);
line-height: 24px; line-height: 24px;
} }
& tr { & tr {
background-color: hsl(100, 11%, 96%); background-color: hsl(100deg 11% 96%);
&:hover { &:hover {
background-color: hsl(210, 100%, 97%); background-color: hsl(210deg 100% 97%);
} }
} }
.unread_topic { .unread_topic {
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
} }
.last_msg_time { .last_msg_time {
@ -283,10 +283,10 @@
} }
& thead th { & thead th {
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
color: inherit; color: inherit;
border-top: 1px solid hsla(0, 0%, 0%, 0.2) !important; border-top: 1px solid hsl(0deg 0% 0% / 20%) !important;
border-bottom: 1px solid hsla(0, 0%, 0%, 0.2) !important; border-bottom: 1px solid hsl(0deg 0% 0% / 20%) !important;
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1; z-index: 1;
@ -313,7 +313,7 @@
&[data-sort]:hover { &[data-sort]:hover {
cursor: pointer; cursor: pointer;
background-color: hsla(0, 0%, 95%); background-color: hsl(0deg 0% 95%);
transition: background-color 100ms ease-in-out; transition: background-color 100ms ease-in-out;
&:not(.active)::after { &:not(.active)::after {

88
web/styles/rendered_markdown.css
View File

@ -41,8 +41,8 @@
} }
& hr { & hr {
border-bottom: 1px solid hsl(0, 0%, 87%); border-bottom: 1px solid hsl(0deg 0% 87%);
border-top: 1px solid hsl(0, 0%, 87%); border-top: 1px solid hsl(0deg 0% 87%);
} }
/* Headings */ /* Headings */
@ -101,7 +101,7 @@
margin-left: 10px; margin-left: 10px;
margin-top: 5px; margin-top: 5px;
margin-bottom: 6px; margin-bottom: 6px;
border-left-color: hsl(0, 0%, 87%); border-left-color: hsl(0deg 0% 87%);
& p { & p {
line-height: inherit; line-height: inherit;
@ -115,7 +115,7 @@
margin-left: unset; margin-left: unset;
margin-right: 10px; margin-right: 10px;
border-left: unset; border-left: unset;
border-right: 5px solid hsl(0, 0%, 87%); border-right: 5px solid hsl(0deg 0% 87%);
} }
/* Formatting for Markdown tables */ /* Formatting for Markdown tables */
@ -130,7 +130,7 @@
} }
& thead { & thead {
background-color: hsl(0, 0%, 93%); background-color: hsl(0deg 0% 93%);
} }
& tr { & tr {
@ -139,13 +139,13 @@
} }
& tr th { & tr th {
border: 1px solid hsl(0, 0%, 80%); border: 1px solid hsl(0deg 0% 80%);
padding: 4px; padding: 4px;
text-align: left; text-align: left;
} }
& tr td { & tr td {
border: 1px solid hsl(0, 0%, 80%); border: 1px solid hsl(0deg 0% 80%);
padding: 4px; padding: 4px;
} }
@ -157,36 +157,36 @@
/* Mentions and alert words */ /* Mentions and alert words */
.user-mention-me :not(.silent) { .user-mention-me :not(.silent) {
background-color: hsl(112, 88%, 87%); background-color: hsl(112deg 88% 87%);
} }
.user-group-mention, .user-group-mention,
.user-mention { .user-mention {
border-radius: 3px; border-radius: 3px;
padding: 0 0.2em; padding: 0 0.2em;
box-shadow: 0 0 0 1px hsl(0, 0%, 80%); box-shadow: 0 0 0 1px hsl(0deg 0% 80%);
margin-right: 2px; margin-right: 2px;
margin-left: 2px; margin-left: 2px;
white-space: nowrap; white-space: nowrap;
background: linear-gradient( background: linear-gradient(
to bottom, to bottom,
hsla(0, 0%, 0%, 0.1) 0%, hsl(0deg 0% 0% / 10%) 0%,
hsla(0, 0%, 0%, 0) 100% hsl(0deg 0% 0% / 0%) 100%
); );
display: inline-block; display: inline-block;
margin-bottom: 1px; margin-bottom: 1px;
} }
.alert-word { .alert-word {
background-color: hsla(102, 85%, 57%, 0.5); background-color: hsl(102deg 85% 57% / 50%);
} }
/* Timestamps */ /* Timestamps */
& time { & time {
background: hsl(0, 0%, 93%); background: hsl(0deg 0% 93%);
border-radius: 3px; border-radius: 3px;
padding: 0 0.2em; padding: 0 0.2em;
box-shadow: 0 0 0 1px hsl(0, 0%, 80%); box-shadow: 0 0 0 1px hsl(0deg 0% 80%);
white-space: nowrap; white-space: nowrap;
margin-left: 2px; margin-left: 2px;
margin-right: 2px; margin-right: 2px;
@ -205,12 +205,12 @@
} }
.tex-error { .tex-error {
color: hsl(0, 0%, 50%); color: hsl(0deg 0% 50%);
} }
/* Spoiler styling */ /* Spoiler styling */
.spoiler-block { .spoiler-block {
border: hsl(0, 0%, 50%) 1px solid; border: hsl(0deg 0% 50%) 1px solid;
padding: 2px 8px 2px 10px; padding: 2px 8px 2px 10px;
border-radius: 10px; border-radius: 10px;
position: relative; position: relative;
@ -225,14 +225,14 @@
.spoiler-content { .spoiler-content {
overflow: hidden; overflow: hidden;
border-top: hsl(0, 0%, 50%) 0 solid; border-top: hsl(0deg 0% 50%) 0 solid;
transition: height 0.4s ease-in-out, border-top 0.4s step-end, transition: height 0.4s ease-in-out, border-top 0.4s step-end,
padding 0.4s step-end; padding 0.4s step-end;
padding: 0; padding: 0;
height: 0; height: 0;
&.spoiler-content-open { &.spoiler-content-open {
border-top: hsl(0, 0%, 50%) 1px solid; border-top: hsl(0deg 0% 50%) 1px solid;
transition: height 0.4s ease-in-out, border-top 0.4s step-start, transition: height 0.4s ease-in-out, border-top 0.4s step-start,
padding 0.4s step-start; padding 0.4s step-start;
padding: 5px; padding: 5px;
@ -248,7 +248,7 @@
&:hover .spoiler-arrow { &:hover .spoiler-arrow {
&::before, &::before,
&::after { &::after {
background-color: hsl(0, 0%, 50%); background-color: hsl(0deg 0% 50%);
} }
} }
} }
@ -273,7 +273,7 @@
display: inline-block; display: inline-block;
width: 12px; width: 12px;
height: 3px; height: 3px;
background-color: hsl(0, 0%, 83%); background-color: hsl(0deg 0% 83%);
transition: 0.4s ease; transition: 0.4s ease;
} }
@ -339,10 +339,10 @@
container. */ container. */
border: solid 1px transparent; border: solid 1px transparent;
transition: background 0.3s ease; transition: background 0.3s ease;
background: hsla(0, 0%, 0%, 0.03); background: hsl(0deg 0% 0% / 3%);
&:hover { &:hover {
background: hsla(0, 0%, 0%, 0.15); background: hsl(0deg 0% 0% / 15%);
} }
& a { & a {
@ -359,7 +359,7 @@
} }
.twitter-tweet { .twitter-tweet {
border: 1px solid hsl(0, 0%, 87%); border: 1px solid hsl(0deg 0% 87%);
padding: 0.5em 0.75em; padding: 0.5em 0.75em;
margin-bottom: 0.25em; margin-bottom: 0.25em;
word-break: break-word; word-break: break-word;
@ -435,8 +435,8 @@
padding: 5px 8px 5px 10px; padding: 5px 8px 5px 10px;
font-size: 12px; font-size: 12px;
border-radius: 4px; border-radius: 4px;
background-color: hsl(0, 0%, 0%); background-color: hsl(0deg 0% 0%);
color: hsl(0, 0%, 100%); color: hsl(0deg 0% 100%);
opacity: 0.7; opacity: 0.7;
top: 0; top: 0;
left: 0; left: 0;
@ -447,11 +447,11 @@
position: relative; position: relative;
margin: 5px 0; margin: 5px 0;
border: none; border: none;
border-left: 3px solid hsl(0, 0%, 93%); border-left: 3px solid hsl(0deg 0% 93%);
height: 80px; height: 80px;
padding: 5px; padding: 5px;
z-index: 1; z-index: 1;
text-shadow: hsla(0, 0%, 0%, 0.01) 0 0 1px; text-shadow: hsl(0deg 0% 0% / 1%) 0 0 1px;
.message_embed_title { .message_embed_title {
padding-top: 0; padding-top: 0;
@ -503,7 +503,7 @@
background: linear-gradient( background: linear-gradient(
0deg, 0deg,
hsl(0, 0%, 100%), hsl(0deg 0% 100%),
transparent 100% transparent 100%
); );
} }
@ -511,7 +511,7 @@
&.rtl .message_embed { &.rtl .message_embed {
border-left: unset; border-left: unset;
border-right: 3px solid hsl(0, 0%, 93%); border-right: 3px solid hsl(0deg 0% 93%);
} }
.message_embed > * { .message_embed > * {
@ -521,20 +521,20 @@
} }
& a { & a {
color: hsl(200, 100%, 40%); color: hsl(200deg 100% 40%);
text-decoration: none; text-decoration: none;
& code { & code {
color: hsl(200, 100%, 40%); color: hsl(200deg 100% 40%);
} }
&:hover, &:hover,
&:focus { &:focus {
color: hsl(200, 100%, 25%); color: hsl(200deg 100% 25%);
text-decoration: underline; text-decoration: underline;
& code { & code {
color: hsl(200, 100%, 25%); color: hsl(200deg 100% 25%);
} }
} }
} }
@ -550,9 +550,9 @@
word-wrap: normal; word-wrap: normal;
margin: 5px 0; margin: 5px 0;
padding: 5px 7px 3px; padding: 5px 7px 3px;
color: hsl(0, 0%, 20%); color: hsl(0deg 0% 20%);
display: block; display: block;
border: 1px solid hsla(0, 0%, 0%, 0.15); border: 1px solid hsl(0deg 0% 0% / 15%);
border-radius: 4px; border-radius: 4px;
&:hover .copy_codeblock, &:hover .copy_codeblock,
@ -577,11 +577,11 @@
font-size: 0.825em; font-size: 0.825em;
unicode-bidi: embed; unicode-bidi: embed;
direction: ltr; direction: ltr;
color: hsl(0, 0%, 0%); color: hsl(0deg 0% 0%);
white-space: pre-wrap; white-space: pre-wrap;
padding: 0 4px; padding: 0 4px;
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
border: 1px solid hsl(240, 13%, 90%); border: 1px solid hsl(240deg 13% 90%);
border-radius: 3px; border-radius: 3px;
} }
@ -603,10 +603,10 @@
font-size: 17px; font-size: 17px;
/* The default icon and on-hover colors are inherited from <a> tag. /* The default icon and on-hover colors are inherited from <a> tag.
so we set our own to match the copy-to-clipbord icon */ so we set our own to match the copy-to-clipbord icon */
color: hsl(0, 0%, 47%); color: hsl(0deg 0% 47%);
&:hover { &:hover {
color: hsl(200, 100%, 40%); color: hsl(200deg 100% 40%);
} }
} }
} }
@ -670,21 +670,21 @@
&::-webkit-scrollbar { &::-webkit-scrollbar {
height: 8px; height: 8px;
width: 10px; width: 10px;
background-color: hsla(0, 0%, 0%, 0.05); background-color: hsl(0deg 0% 0% / 5%);
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: hsla(0, 0%, 0%, 0.3); background-color: hsl(0deg 0% 0% / 30%);
border-radius: 20px; border-radius: 20px;
transition: all 0.2s ease; transition: all 0.2s ease;
} }
&::-webkit-scrollbar-thumb:hover { &::-webkit-scrollbar-thumb:hover {
background-color: hsla(0, 0%, 0%, 0.6); background-color: hsl(0deg 0% 0% / 60%);
} }
} }
/* Search highlight used in both topics and rendered_markdown */ /* Search highlight used in both topics and rendered_markdown */
.highlight { .highlight {
background-color: hsl(51, 94%, 74%); background-color: hsl(51deg 94% 74%);
} }

10
web/styles/right_sidebar.css
View File

@ -47,7 +47,7 @@ $user_status_emoji_width: 24px;
&:hover { &:hover {
display: inline; display: inline;
cursor: pointer; cursor: pointer;
color: hsl(0, 0%, 0%) !important; color: hsl(0deg 0% 0%) !important;
} }
/* /*
@ -66,13 +66,13 @@ $user_status_emoji_width: 24px;
.user-list-sidebar-menu-icon { .user-list-sidebar-menu-icon {
display: inline; display: inline;
cursor: pointer; cursor: pointer;
color: hsl(0, 0%, 53%); color: hsl(0deg 0% 53%);
} }
} }
&:hover, &:hover,
&.highlighted_user { &.highlighted_user {
background-color: hsla(120, 12.3%, 71.4%, 0.38); background-color: hsl(120deg 12.3% 71.4% / 38%);
} }
} }
@ -193,12 +193,12 @@ $user_status_emoji_width: 24px;
right: 0; right: 0;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
border-left: 1px solid hsl(0, 0%, 88%); border-left: 1px solid hsl(0deg 0% 88%);
} }
#userlist-toggle-button { #userlist-toggle-button {
text-decoration: none; text-decoration: none;
color: hsl(0, 0%, 60%); color: hsl(0deg 0% 60%);
display: block; display: block;
width: 45px; width: 45px;
height: 19px; height: 19px;

2
web/styles/search.css
View File

@ -81,7 +81,7 @@
} }
#search_arrows:focus { #search_arrows:focus {
box-shadow: inset 0 0 0 2px hsl(204, 20%, 74%); box-shadow: inset 0 0 0 2px hsl(204deg 20% 74%);
} }
.search_close_button, .search_close_button,

144
web/styles/settings.css
View File

@ -148,7 +148,7 @@ h3,
.user-avatar-section { .user-avatar-section {
.inline-block { .inline-block {
box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.1); box-shadow: 0 0 10px hsl(0deg 0% 0% / 10%);
} }
} }
@ -207,7 +207,7 @@ h3,
.table { .table {
& tbody { & tbody {
border-bottom: 1px solid hsl(0, 0%, 87%); border-bottom: 1px solid hsl(0deg 0% 87%);
} }
} }
@ -356,7 +356,7 @@ td .button {
too light. So, we set the color explicitly to original color of label to too light. So, we set the color explicitly to original color of label to
keep the color of the icon same even when the setting is disabled. */ keep the color of the icon same even when the setting is disabled. */
#id_realm_enable_spectator_access_label a { #id_realm_enable_spectator_access_label a {
color: hsl(0, 0%, 20%); color: hsl(0deg 0% 20%);
} }
.settings_select, .settings_select,
@ -369,15 +369,15 @@ td .button {
.settings_select { .settings_select {
padding: 4px 6px; padding: 4px 6px;
color: hsl(0, 0%, 33%); color: hsl(0deg 0% 33%);
border-radius: 4px; border-radius: 4px;
border: 1px solid hsl(0, 0%, 80%); border: 1px solid hsl(0deg 0% 80%);
cursor: pointer; cursor: pointer;
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
&:disabled { &:disabled {
cursor: not-allowed; cursor: not-allowed;
background-color: hsl(0, 0%, 93%); background-color: hsl(0deg 0% 93%);
} }
} }
@ -456,7 +456,7 @@ input[type="checkbox"] {
top: 2px; top: 2px;
&:hover { &:hover {
color: hsl(0, 0%, 20%); color: hsl(0deg 0% 20%);
cursor: pointer; cursor: pointer;
} }
} }
@ -483,7 +483,7 @@ input[type="checkbox"] {
.language_selection_button { .language_selection_button {
text-decoration: none; text-decoration: none;
color: hsl(0, 0%, 20%); color: hsl(0deg 0% 20%);
.fa.fa-pencil { .fa.fa-pencil {
margin-left: 5px; margin-left: 5px;
@ -520,16 +520,16 @@ input[type="checkbox"] {
border-radius: 4px; border-radius: 4px;
margin-top: 14px; margin-top: 14px;
margin-left: 10px; margin-left: 10px;
color: hsl(156, 30%, 50%); color: hsl(156deg 30% 50%);
padding: 3px 10px; padding: 3px 10px;
&:not(:empty) { &:not(:empty) {
border: 1px solid hsl(156, 30%, 50%); border: 1px solid hsl(156deg 30% 50%);
} }
&.alert-error { &.alert-error {
color: hsl(2, 46%, 68%); color: hsl(2deg 46% 68%);
border-color: hsl(2, 46%, 68%); border-color: hsl(2deg 46% 68%);
} }
.loading_indicator_spinner { .loading_indicator_spinner {
@ -540,7 +540,7 @@ input[type="checkbox"] {
/* make the spinner green like the text and box. */ /* make the spinner green like the text and box. */
.loading_indicator_spinner svg path { .loading_indicator_spinner svg path {
fill: hsl(178, 100%, 40%); fill: hsl(178deg 100% 40%);
} }
.loading_indicator_text { .loading_indicator_text {
@ -611,10 +611,10 @@ input[type="checkbox"] {
} }
.control-label-disabled { .control-label-disabled {
color: hsl(0, 0%, 82%); color: hsl(0deg 0% 82%);
&.enabled { &.enabled {
color: hsl(0, 0%, 20%); color: hsl(0deg 0% 20%);
} }
} }
@ -665,7 +665,7 @@ input[type="checkbox"] {
white-space: nowrap; white-space: nowrap;
height: 1rem; height: 1rem;
font-style: italic; font-style: italic;
color: hsl(0, 0%, 67%); color: hsl(0deg 0% 67%);
} }
#emoji_preview_text { #emoji_preview_text {
@ -704,7 +704,7 @@ input[type="checkbox"] {
cursor: move; cursor: move;
.fa-ellipsis-v { .fa-ellipsis-v {
color: hsl(0, 0%, 75%); color: hsl(0deg 0% 75%);
position: relative; position: relative;
top: 1px; top: 1px;
@ -758,11 +758,11 @@ input[type="checkbox"] {
.regenerate_bot_api_key { .regenerate_bot_api_key {
position: relative; position: relative;
margin-left: 5px; margin-left: 5px;
color: hsl(0, 0%, 67%); color: hsl(0deg 0% 67%);
transition: all 0.3s ease; transition: all 0.3s ease;
&:hover { &:hover {
color: hsl(0, 0%, 27%); color: hsl(0deg 0% 27%);
} }
} }
@ -778,23 +778,23 @@ input[type="checkbox"] {
} }
.sea-green { .sea-green {
color: hsl(177, 70%, 46%); color: hsl(177deg 70% 46%);
} }
.blue { .blue {
color: hsl(203, 77%, 56%); color: hsl(203deg 77% 56%);
} }
.danger-red { .danger-red {
color: hsl(0, 56%, 73%); color: hsl(0deg 56% 73%);
} }
.copy-gold { .copy-gold {
color: hsl(51, 90%, 50%); color: hsl(51deg 90% 50%);
} }
.purple { .purple {
color: hsl(278, 62%, 68%); color: hsl(278deg 62% 68%);
} }
} }
@ -822,7 +822,7 @@ input[type="checkbox"] {
width: 50px; width: 50px;
border-radius: 4px; border-radius: 4px;
vertical-align: top; vertical-align: top;
box-shadow: 0 0 4px hsla(0, 0%, 0%, 0.1); box-shadow: 0 0 4px hsl(0deg 0% 0% / 10%);
} }
.email, .email,
@ -852,12 +852,12 @@ input[type="checkbox"] {
.field { .field {
text-transform: uppercase; text-transform: uppercase;
font-weight: 600; font-weight: 600;
color: hsl(0, 0%, 67%); color: hsl(0deg 0% 67%);
} }
} }
#bots_lists_navbar .active a { #bots_lists_navbar .active a {
background-color: hsl(0, 0%, 98%); background-color: hsl(0deg 0% 98%);
} }
#inactive_bots_list .bot_info .reactivate_bot { #inactive_bots_list .bot_info .reactivate_bot {
@ -955,7 +955,7 @@ input[type="checkbox"] {
} }
#download_zuliprc { #download_zuliprc {
color: hsl(0, 0%, 100%); color: hsl(0deg 0% 100%);
text-decoration: none; text-decoration: none;
} }
@ -992,7 +992,7 @@ input[type="checkbox"] {
} }
label.display-settings-radio-choice-label { label.display-settings-radio-choice-label {
border-bottom: 1px solid hsla(0, 0%, 0%, 0.2); border-bottom: 1px solid hsl(0deg 0% 0% / 20%);
padding: 8px 0 10px; padding: 8px 0 10px;
&:last-of-type { &:last-of-type {
@ -1007,7 +1007,7 @@ label.display-settings-radio-choice-label {
cursor: pointer; cursor: pointer;
&:focus { &:focus {
outline: 1px dotted hsl(0, 0%, 20%); outline: 1px dotted hsl(0deg 0% 20%);
outline: 5px auto -webkit-focus-ring-color; outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px; outline-offset: -2px;
} }
@ -1120,7 +1120,7 @@ $option_title_width: 180px;
& span[contenteditable]:focus, & span[contenteditable]:focus,
span[contenteditable="true"]:hover { span[contenteditable="true"]:hover {
border-bottom: 1px solid hsl(0, 0%, 80%); border-bottom: 1px solid hsl(0deg 0% 80%);
margin-bottom: -1px; margin-bottom: -1px;
outline: none; outline: none;
} }
@ -1157,7 +1157,7 @@ $option_title_width: 180px;
display: none; display: none;
&:hover { &:hover {
border-color: hsl(4, 56%, 82%); border-color: hsl(4deg 56% 82%);
} }
} }
} }
@ -1184,7 +1184,7 @@ $option_title_width: 180px;
.save-instructions { .save-instructions {
display: none; display: none;
opacity: 0; opacity: 0;
color: hsl(0, 0%, 20%); color: hsl(0deg 0% 20%);
font-size: 0.9em; font-size: 0.9em;
} }
} }
@ -1230,14 +1230,14 @@ $option_title_width: 180px;
box-sizing: border-box; box-sizing: border-box;
height: $settings_header_height; height: $settings_header_height;
padding: 6px; padding: 6px;
border-bottom: 1px solid hsl(0, 0%, 87%); border-bottom: 1px solid hsl(0deg 0% 87%);
} }
} }
.sidebar { .sidebar {
height: calc(100% - $settings_header_height); height: calc(100% - $settings_header_height);
overflow-y: auto; overflow-y: auto;
border-right: 1px solid hsl(0, 0%, 93%); border-right: 1px solid hsl(0deg 0% 93%);
.header { .header {
height: auto; height: auto;
@ -1247,8 +1247,8 @@ $option_title_width: 180px;
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
background-color: hsl(180, 6%, 93%); background-color: hsl(180deg 6% 93%);
border-bottom: 1px solid hsl(0, 0%, 87%); border-bottom: 1px solid hsl(0deg 0% 87%);
} }
& ul { & ul {
@ -1262,14 +1262,14 @@ $option_title_width: 180px;
outline: none; outline: none;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
border-bottom: 1px solid hsl(0, 0%, 93%); border-bottom: 1px solid hsl(0deg 0% 93%);
&:last-of-type .text { &:last-of-type .text {
border-bottom: none; border-bottom: none;
} }
&.active { &.active {
background-color: hsl(0, 0%, 93%); background-color: hsl(0deg 0% 93%);
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
} }
@ -1292,7 +1292,7 @@ $option_title_width: 180px;
text-align: center; text-align: center;
font-size: 1.4em; font-size: 1.4em;
color: hsl(0, 0%, 53%); color: hsl(0deg 0% 53%);
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1304,7 +1304,7 @@ $option_title_width: 180px;
margin: 14px 8px 6px; margin: 14px 8px 6px;
font-size: 1em; font-size: 1em;
color: hsl(0, 0%, 62%); color: hsl(0deg 0% 62%);
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1323,7 +1323,7 @@ $option_title_width: 180px;
.settings-sticky-bar { .settings-sticky-bar {
position: sticky; position: sticky;
z-index: 1; z-index: 1;
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
top: 0; top: 0;
} }
} }
@ -1333,7 +1333,7 @@ $option_title_width: 180px;
&.mobile { &.mobile {
display: none; display: none;
border-bottom: 1px solid hsl(0, 0%, 87%); border-bottom: 1px solid hsl(0deg 0% 87%);
.fa-chevron-left { .fa-chevron-left {
float: left; float: left;
@ -1356,7 +1356,7 @@ $option_title_width: 180px;
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 10px; right: 10px;
color: hsl(0, 0%, 67%); color: hsl(0deg 0% 67%);
cursor: pointer; cursor: pointer;
} }
@ -1383,7 +1383,7 @@ $option_title_width: 180px;
width: 100%; width: 100%;
height: $settings_header_height; height: $settings_header_height;
box-sizing: border-box; box-sizing: border-box;
border-bottom: 1px solid hsl(0, 0%, 87%); border-bottom: 1px solid hsl(0deg 0% 87%);
& h1 .section { & h1 .section {
font-weight: 400; font-weight: 400;
@ -1400,7 +1400,7 @@ $option_title_width: 180px;
float: left; float: left;
overflow: auto; overflow: auto;
background-color: hsla(0, 0%, 0%, 0.02); background-color: hsl(0deg 0% 0% / 2%);
} }
} }
@ -1415,7 +1415,7 @@ $option_title_width: 180px;
padding-bottom: 20px; padding-bottom: 20px;
.field_hint { .field_hint {
color: hsl(0, 0%, 67%); color: hsl(0deg 0% 67%);
} }
& textarea { & textarea {
@ -1477,7 +1477,7 @@ $option_title_width: 180px;
position: relative; position: relative;
top: 2px; top: 2px;
padding-left: 5px; padding-left: 5px;
color: hsl(0, 0%, 58%); color: hsl(0deg 0% 58%);
font-weight: lighter; font-weight: lighter;
} }
@ -1551,17 +1551,17 @@ $option_title_width: 180px;
clear: both; clear: both;
font-weight: normal; font-weight: normal;
line-height: 20px; line-height: 20px;
color: hsl(0, 0%, 20%); color: hsl(0deg 0% 20%);
white-space: nowrap; white-space: nowrap;
&:hover { &:hover {
color: hsl(0, 0%, 100%); color: hsl(0deg 0% 100%);
text-decoration: none; text-decoration: none;
background-color: hsl(200, 100%, 38%); background-color: hsl(200deg 100% 38%);
background-image: linear-gradient( background-image: linear-gradient(
to bottom, to bottom,
hsl(200, 100%, 40%), hsl(200deg 100% 40%),
hsl(200, 100%, 35%) hsl(200deg 100% 35%)
); );
} }
} }
@ -1569,7 +1569,7 @@ $option_title_width: 180px;
} }
.subsection-failed-status p { .subsection-failed-status p {
background-color: hsl(0, 43%, 91%); background-color: hsl(0deg 43% 91%);
padding: 2px 6px; padding: 2px 6px;
border-radius: 4px; border-radius: 4px;
margin: 0 0 0 5px; margin: 0 0 0 5px;
@ -1594,7 +1594,7 @@ $option_title_width: 180px;
display: block; display: block;
font-style: italic; font-style: italic;
color: hsl(0, 0%, 67%); color: hsl(0deg 0% 67%);
} }
&.thick:empty::after { &.thick:empty::after {
@ -1616,7 +1616,7 @@ $option_title_width: 180px;
@supports (-moz-appearance: none) { @supports (-moz-appearance: none) {
#settings_page select { #settings_page select {
appearance: none; appearance: none;
background: hsl(0, 0%, 100%) url("../images/dropdown.png") right / 20px background: hsl(0deg 0% 100%) url("../images/dropdown.png") right / 20px
no-repeat; no-repeat;
padding-right: 20px; padding-right: 20px;
} }
@ -1653,15 +1653,15 @@ $option_title_width: 180px;
padding: 2px 6px; padding: 2px 6px;
min-height: 24px; min-height: 24px;
max-width: 206px; max-width: 206px;
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
&:focus-within { &:focus-within {
border-color: hsla(206, 80%, 62%, 0.8); border-color: hsl(206deg 80% 62% / 80%);
outline: 0; outline: 0;
outline: 1px dotted \9; outline: 1px dotted \9;
box-shadow: inset 0 1px 1px hsla(0, 0%, 0%, 0.075), box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%),
0 0 8px hsla(206, 80%, 62%, 0.6); 0 0 8px hsl(206deg 80% 62% / 60%);
} }
} }
} }
@ -1682,11 +1682,11 @@ $option_title_width: 180px;
.collapse-settings-btn { .collapse-settings-btn {
margin: 10px 0 0 10px; margin: 10px 0 0 10px;
color: hsl(200, 100%, 40%); color: hsl(200deg 100% 40%);
&:hover { &:hover {
cursor: pointer; cursor: pointer;
color: hsl(208, 56%, 38%); color: hsl(208deg 56% 38%);
} }
} }
@ -1700,27 +1700,27 @@ $option_title_width: 180px;
} }
.settings_textarea { .settings_textarea {
color: hsl(0, 0%, 33%); color: hsl(0deg 0% 33%);
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
border-radius: 4px; border-radius: 4px;
vertical-align: middle; vertical-align: middle;
border: 1px solid hsl(0, 0%, 80%); border: 1px solid hsl(0deg 0% 80%);
padding: 4px 6px; padding: 4px 6px;
box-shadow: inset 0 1px 1px hsla(0, 0%, 0%, 0.075); box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%);
transition: border linear 0.2s, box-shadow linear 0.2s; transition: border linear 0.2s, box-shadow linear 0.2s;
&:focus { &:focus {
border-color: hsla(206.5, 80%, 62%, 0.8); border-color: hsl(206.5deg 80% 62% / 80%);
outline: 0; outline: 0;
box-shadow: inset 0 1px 1px hsla(0, 0%, 0%, 0.075), box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%),
0 0 8px hsla(206.5, 80%, 62%, 0.6); 0 0 8px hsl(206.5deg 80% 62% / 60%);
} }
&:disabled { &:disabled {
cursor: not-allowed; cursor: not-allowed;
background-color: hsl(0, 0%, 93%); background-color: hsl(0deg 0% 93%);
} }
} }
@ -1795,7 +1795,7 @@ $option_title_width: 180px;
& li.active { & li.active {
/* Don't highlight the active section in the settings list. */ /* Don't highlight the active section in the settings list. */
background: inherit; background: inherit;
border-bottom: 1px solid hsl(0, 0%, 93%); border-bottom: 1px solid hsl(0deg 0% 93%);
} }
} }
} }

86
web/styles/subscriptions.css
View File

@ -24,21 +24,21 @@
font-family: "Source Code Pro", monospace; font-family: "Source Code Pro", monospace;
padding: 10px; padding: 10px;
font-size: 0.85rem; font-size: 0.85rem;
background-color: hsl(0, 0%, 98%); background-color: hsl(0deg 0% 98%);
border: 1px solid hsl(0, 0%, 87%); border: 1px solid hsl(0deg 0% 87%);
border-radius: 4px; border-radius: 4px;
} }
.sp-preview { .sp-preview {
width: 20px; width: 20px;
border: none; border: none;
box-shadow: 0 0 1px hsla(0, 0%, 0%, 1); box-shadow: 0 0 1px hsl(0deg 0% 0%);
} }
.sp-replacer { .sp-replacer {
margin-right: 12px; margin-right: 12px;
border: none; border: none;
box-shadow: 0 0 2px hsla(0, 0%, 0%, 0.8); box-shadow: 0 0 2px hsl(0deg 0% 0% / 80%);
} }
.stream-email .email-address { .stream-email .email-address {
@ -51,7 +51,7 @@
.muted-sub, .muted-sub,
.control-label-disabled { .control-label-disabled {
color: hsl(0, 0%, 64%); color: hsl(0deg 0% 64%);
} }
.sub_setting_checkbox .muted-sub label, .sub_setting_checkbox .muted-sub label,
@ -79,15 +79,15 @@
font-weight: 500; font-weight: 500;
position: relative; position: relative;
top: 2px; top: 2px;
border: 1px solid hsl(0, 0%, 80%); border: 1px solid hsl(0deg 0% 80%);
border-radius: 5px; border-radius: 5px;
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
color: hsl(0, 0%, 0%); color: hsl(0deg 0% 0%);
margin: 0 0 0 5px; margin: 0 0 0 5px;
height: 27px; height: 27px;
&:hover { &:hover {
border: 1px solid hsl(0, 0%, 47%); border: 1px solid hsl(0deg 0% 47%);
} }
& span { & span {
@ -111,7 +111,7 @@
.stream_creation_error { .stream_creation_error {
display: none; display: none;
margin-left: 2px; margin-left: 2px;
color: hsl(0, 100%, 50%); color: hsl(0deg 100% 50%);
} }
/* TODO: Unify with settings.css definition */ /* TODO: Unify with settings.css definition */
@ -134,8 +134,8 @@ h4.user_group_setting_subsection_title {
.member-list-box, .member-list-box,
.subscriber-list-box { .subscriber-list-box {
text-align: center; text-align: center;
border-left: 1px solid hsl(0, 0%, 87%); border-left: 1px solid hsl(0deg 0% 87%);
border-right: 1px solid hsl(0, 0%, 87%); border-right: 1px solid hsl(0deg 0% 87%);
border-radius: 4px; border-radius: 4px;
.member_list_container, .member_list_container,
@ -162,7 +162,7 @@ h4.user_group_setting_subsection_title {
} }
& tr { & tr {
border-bottom: 1px solid hsl(0, 0%, 93%); border-bottom: 1px solid hsl(0deg 0% 93%);
& td, & td,
th { th {
@ -184,7 +184,7 @@ h4.user_group_setting_subsection_title {
content: "No subscribers to this stream."; content: "No subscribers to this stream.";
display: block; display: block;
color: hsl(0, 0%, 67%); color: hsl(0deg 0% 67%);
padding: 5px 5px 5px 10px; padding: 5px 5px 5px 10px;
} }
@ -272,7 +272,7 @@ h4.user_group_setting_subsection_title {
position: relative; position: relative;
transform: translate(-50px, 0); transform: translate(-50px, 0);
opacity: 0; opacity: 0;
color: hsl(0, 0%, 67%); color: hsl(0deg 0% 67%);
float: left; float: left;
padding: 2px 10px; padding: 2px 10px;
@ -312,7 +312,7 @@ h4.user_group_setting_subsection_title {
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
font-weight: 700; font-weight: 700;
border-bottom: 1px solid hsl(0, 0%, 87%); border-bottom: 1px solid hsl(0deg 0% 87%);
.fa-chevron-left { .fa-chevron-left {
display: none; display: none;
@ -330,7 +330,7 @@ h4.user_group_setting_subsection_title {
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 10px; right: 10px;
color: hsl(0, 0%, 67%); color: hsl(0deg 0% 67%);
cursor: pointer; cursor: pointer;
} }
} }
@ -356,11 +356,11 @@ h4.user_group_setting_subsection_title {
} }
.left { .left {
border-right: 1px solid hsl(0, 0%, 87%); border-right: 1px solid hsl(0deg 0% 87%);
.search-container { .search-container {
padding: 6px 8px; padding: 6px 8px;
border-bottom: 1px solid hsl(0, 0%, 87%); border-bottom: 1px solid hsl(0deg 0% 87%);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
@ -378,7 +378,7 @@ h4.user_group_setting_subsection_title {
margin-right: 2em; margin-right: 2em;
& span { & span {
color: hsl(0, 0%, 67%); color: hsl(0deg 0% 67%);
} }
& button { & button {
@ -392,7 +392,7 @@ h4.user_group_setting_subsection_title {
padding: 2px; padding: 2px;
text-align: center; text-align: center;
font-weight: 600; font-weight: 600;
border-bottom: 1px solid hsl(0, 0%, 87%); border-bottom: 1px solid hsl(0deg 0% 87%);
&.preview::after { &.preview::after {
content: "Preview"; content: "Preview";
@ -426,11 +426,11 @@ h4.user_group_setting_subsection_title {
} }
& input[type="text"].small { & input[type="text"].small {
border: 1px solid hsl(0, 0%, 80%); border: 1px solid hsl(0deg 0% 80%);
border-radius: 4px; border-radius: 4px;
padding: 3px; padding: 3px;
outline: none; outline: none;
color: hsl(0, 0%, 27%); color: hsl(0deg 0% 27%);
text-align: center; text-align: center;
&:focus { &:focus {
@ -467,7 +467,7 @@ h4.user_group_setting_subsection_title {
justify-content: center; justify-content: center;
margin-bottom: 0; margin-bottom: 0;
height: auto; height: auto;
border-bottom: 1px solid hsl(0, 0%, 87%); border-bottom: 1px solid hsl(0deg 0% 87%);
} }
.user-groups-list, .user-groups-list,
@ -517,7 +517,7 @@ h4.user_group_setting_subsection_title {
.stream-row, .stream-row,
.group-row { .group-row {
padding: 15px 10px 11px; padding: 15px 10px 11px;
border-bottom: 1px solid hsl(0, 0%, 93%); border-bottom: 1px solid hsl(0deg 0% 93%);
cursor: pointer; cursor: pointer;
.check { .check {
@ -557,13 +557,13 @@ h4.user_group_setting_subsection_title {
} }
.loading_indicator_spinner svg path { .loading_indicator_spinner svg path {
fill: hsl(178, 100%, 40%); fill: hsl(178deg 100% 40%);
} }
} }
} }
.checked svg { .checked svg {
fill: hsl(170, 48%, 54%); fill: hsl(170deg 48% 54%);
} }
.icon { .icon {
@ -571,9 +571,9 @@ h4.user_group_setting_subsection_title {
height: 35px; height: 35px;
margin-right: 8px; margin-right: 8px;
margin-top: 4px; margin-top: 4px;
background-color: hsl(300, 100%, 25%); background-color: hsl(300deg 100% 25%);
border-radius: 4px; border-radius: 4px;
color: hsl(0, 0%, 100%); color: hsl(0deg 0% 100%);
.symbol { .symbol {
font-weight: 600; font-weight: 600;
@ -613,7 +613,7 @@ h4.user_group_setting_subsection_title {
.top-bar .subscriber-count, .top-bar .subscriber-count,
.bottom-bar .stream-message-count { .bottom-bar .stream-message-count {
white-space: nowrap; white-space: nowrap;
color: hsl(0, 0%, 67%); color: hsl(0deg 0% 67%);
} }
.top-bar .subscriber-count-text, .top-bar .subscriber-count-text,
@ -644,7 +644,7 @@ h4.user_group_setting_subsection_title {
} }
&.active { &.active {
background-color: hsl(0, 0%, 93%); background-color: hsl(0deg 0% 93%);
} }
> div { > div {
@ -654,12 +654,12 @@ h4.user_group_setting_subsection_title {
&:hover .check:not(.checked) svg, &:hover .check:not(.checked) svg,
&.active:hover .check:not(.checked) svg { &.active:hover .check:not(.checked) svg {
fill: hsl(0, 0%, 87%); fill: hsl(0deg 0% 87%);
} }
.check:not(.checked):hover svg, .check:not(.checked):hover svg,
&.active .check:not(.checked):hover svg { &.active .check:not(.checked):hover svg {
fill: hsl(0, 0%, 72%); fill: hsl(0deg 0% 72%);
} }
&::selection, &::selection,
@ -672,7 +672,7 @@ h4.user_group_setting_subsection_title {
.group-row .group-info-box .description:empty::after { .group-row .group-info-box .description:empty::after {
content: attr(data-no-description); content: attr(data-no-description);
font-style: italic; font-style: italic;
color: hsl(0, 0%, 67%); color: hsl(0deg 0% 67%);
} }
#groups_overlay, #groups_overlay,
@ -736,7 +736,7 @@ h4.user_group_setting_subsection_title {
display: flex !important; display: flex !important;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: hsla(0, 0%, 100%, 0.9); background-color: hsl(0deg 0% 100% / 90%);
z-index: 1; z-index: 1;
} }
@ -814,11 +814,11 @@ h4.user_group_setting_subsection_title {
} }
.subscribe-button.unsubscribed { .subscribe-button.unsubscribed {
color: hsl(156, 39%, 54%); color: hsl(156deg 39% 54%);
border-color: hsl(156, 39%, 77%); border-color: hsl(156deg 39% 77%);
&:active { &:active {
background-color: hsla(156, 39%, 54%, 0.2); background-color: hsl(156deg 39% 54% / 20%);
} }
} }
@ -853,14 +853,14 @@ h4.user_group_setting_subsection_title {
.no-description { .no-description {
font-style: italic; font-style: italic;
color: hsl(0, 0%, 67%); color: hsl(0deg 0% 67%);
} }
} }
.checkmark { .checkmark {
display: none; display: none;
margin-left: 5px; margin-left: 5px;
color: hsl(0, 0%, 67%); color: hsl(0deg 0% 67%);
cursor: pointer; cursor: pointer;
@ -937,7 +937,7 @@ h4.user_group_setting_subsection_title {
} }
div.settings-radio-input-parent { div.settings-radio-input-parent {
border-bottom: 1px solid hsl(0, 0%, 87%); border-bottom: 1px solid hsl(0deg 0% 87%);
margin: 2px 0 2px 5px; margin: 2px 0 2px 5px;
padding: 2px 0; padding: 2px 0;
@ -957,7 +957,7 @@ div.settings-radio-input-parent {
margin: 3.5px 0 1px; margin: 3.5px 0 1px;
&:focus { &:focus {
outline: 1px dotted hsl(0, 0%, 20%); outline: 1px dotted hsl(0deg 0% 20%);
outline: 5px auto -webkit-focus-ring-color; outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px; outline-offset: -2px;
} }
@ -1091,7 +1091,7 @@ div.settings-radio-input-parent {
left: 101%; left: 101%;
top: 45px; top: 45px;
background-color: hsl(0, 0%, 98%); background-color: hsl(0deg 0% 98%);
border-top: none; border-top: none;
transition: all 0.3s ease; transition: all 0.3s ease;

16
web/styles/tooltips.css
View File

@ -10,7 +10,7 @@
/* Affects all tippy tooltips not using any theme. */ /* Affects all tippy tooltips not using any theme. */
.tippy-box:not([data-theme]) { .tippy-box:not([data-theme]) {
background: hsla(0, 0%, 20%, 1); background: hsl(0deg 0% 20%);
border-radius: 5px; border-radius: 5px;
min-height: 25px; min-height: 25px;
box-sizing: border-box; box-sizing: border-box;
@ -22,7 +22,7 @@
padding: 5px 10px; padding: 5px 10px;
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
color: hsla(0, 0%, 100%, 1); color: hsl(0deg 0% 100%);
} }
.tippy-arrow::before { .tippy-arrow::before {
@ -38,19 +38,19 @@
} }
&[data-placement^="top"] > .tippy-arrow::before { &[data-placement^="top"] > .tippy-arrow::before {
border-top-color: hsla(0, 0%, 20%, 1); border-top-color: hsl(0deg 0% 20%);
} }
&[data-placement^="bottom"] > .tippy-arrow::before { &[data-placement^="bottom"] > .tippy-arrow::before {
border-bottom-color: hsla(0, 0%, 20%, 1); border-bottom-color: hsl(0deg 0% 20%);
} }
&[data-placement^="left"] > .tippy-arrow::before { &[data-placement^="left"] > .tippy-arrow::before {
border-left-color: hsla(0, 0%, 20%, 1); border-left-color: hsl(0deg 0% 20%);
} }
&[data-placement^="right"] > .tippy-arrow::before { &[data-placement^="right"] > .tippy-arrow::before {
border-right-color: hsla(0, 0%, 20%, 1); border-right-color: hsl(0deg 0% 20%);
} }
} }
@ -79,9 +79,9 @@
.tooltip-hotkey-hint { .tooltip-hotkey-hint {
box-sizing: inherit; box-sizing: inherit;
border: 1px solid hsla(225, 100%, 84%, 1); border: 1px solid hsl(225deg 100% 84%);
border-radius: 3px; border-radius: 3px;
color: hsla(225, 100%, 84%, 1); color: hsl(225deg 100% 84%);
padding: 2px 5px; padding: 2px 5px;
min-width: 20px; min-width: 20px;
text-align: center; text-align: center;

2
web/styles/typing_notifications.css
View File

@ -2,7 +2,7 @@
display: none; display: none;
margin-left: 10px; margin-left: 10px;
font-style: italic; font-style: italic;
color: hsl(0, 0%, 53%); color: hsl(0deg 0% 53%);
} }
#typing_notification_list { #typing_notification_list {

12
web/styles/user_circles.css
View File

@ -1,5 +1,5 @@
$active_color: hsl(106, 74%, 44%); $active_color: hsl(106deg 74% 44%);
$idle_color: hsl(29, 84%, 51%); $idle_color: hsl(29deg 84% 51%);
.user_circle_green, .user_circle_green,
.user_circle_idle, .user_circle_idle,
@ -21,22 +21,22 @@ $idle_color: hsl(29, 84%, 51%);
border-color: $idle_color; border-color: $idle_color;
background: linear-gradient( background: linear-gradient(
to bottom, to bottom,
hsla(0, 0%, 100%, 0) 50%, hsl(0deg 0% 100% / 0%) 50%,
$idle_color 50% $idle_color 50%
); );
} }
.user_circle_empty { .user_circle_empty {
background-color: transparent; background-color: transparent;
border-color: hsl(0, 0%, 50%); border-color: hsl(0deg 0% 50%);
} }
.user_circle_empty_line { .user_circle_empty_line {
border-color: hsl(0, 0%, 50%); border-color: hsl(0deg 0% 50%);
&::after { &::after {
content: ""; content: "";
background: hsl(0, 0%, 50%); background: hsl(0deg 0% 50%);
height: 1.5px; /* 1px is too thin, 2px is too thick */ height: 1.5px; /* 1px is too thin, 2px is too thick */
width: 6px; width: 6px;
display: block; display: block;

4
web/styles/user_status.css
View File

@ -5,7 +5,7 @@
.user_status_content_wrapper { .user_status_content_wrapper {
display: flex; display: flex;
border: 1px solid; border: 1px solid;
border-color: hsla(0, 0%, 0%, 0.6); border-color: hsl(0deg 0% 0% / 60%);
border-radius: 5px; border-radius: 5px;
& input.user_status { & input.user_status {
@ -65,7 +65,7 @@
& button.user-status-value:hover { & button.user-status-value:hover {
/* Important is required for generic night them styling to not /* Important is required for generic night them styling to not
have precedence over this. */ have precedence over this. */
color: hsl(200, 100%, 40%) !important; color: hsl(200deg 100% 40%) !important;
} }
.user-status-value { .user-status-value {

52
web/styles/widgets.css
View File

@ -10,7 +10,7 @@
& button { & button {
font-weight: 700; font-weight: 700;
color: hsl(240, 100%, 50%); color: hsl(240deg 100% 50%);
} }
.widget-choices-heading { .widget-choices-heading {
@ -36,7 +36,7 @@
~ span { ~ span {
height: 12px; height: 12px;
width: 12px; width: 12px;
border: 2px solid hsl(156, 28%, 70%); border: 2px solid hsl(156deg 28% 70%);
border-radius: 4px; border-radius: 4px;
filter: brightness(1); filter: brightness(1);
@ -49,8 +49,8 @@
background-size: 75%; background-size: 75%;
background-position: 50% 50%; background-position: 50% 50%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-color: hsl(156, 41%, 40%); background-color: hsl(156deg 41% 40%);
border: 2px solid hsl(156, 41%, 40%); border: 2px solid hsl(156deg 41% 40%);
} }
&:disabled ~ span { &:disabled ~ span {
@ -59,11 +59,11 @@
} }
&:hover ~ span { &:hover ~ span {
border-color: hsl(156, 30%, 50%); border-color: hsl(156deg 30% 50%);
} }
&:focus ~ span { &:focus ~ span {
outline-color: hsla(0, 0%, 100%, 0); outline-color: hsl(0deg 0% 100% / 0%);
} }
} }
} }
@ -114,8 +114,8 @@
position: relative; position: relative;
z-index: 1; z-index: 1;
color: hsl(156, 41%, 40%); color: hsl(156deg 41% 40%);
border-color: hsl(156, 28%, 70%); border-color: hsl(156deg 28% 70%);
border-style: solid; border-style: solid;
font-weight: 600; font-weight: 600;
border-radius: 3px; border-radius: 3px;
@ -125,20 +125,20 @@
min-width: 25px; min-width: 25px;
height: 25px; height: 25px;
font-size: 13px; font-size: 13px;
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
&:hover { &:hover {
border-color: hsl(156, 30%, 50%); border-color: hsl(156deg 30% 50%);
} }
&:focus { &:focus {
outline: 0; outline: 0;
background-color: hsl(156, 41%, 90%); background-color: hsl(156deg 41% 90%);
} }
} }
.poll-names { .poll-names {
color: hsl(0, 0%, 45%); color: hsl(0deg 0% 45%);
padding-left: 4px; padding-left: 4px;
padding-top: 28px; padding-top: 28px;
font-size: 14px; font-size: 14px;
@ -150,22 +150,22 @@ button {
height: 20px; height: 20px;
width: 20px; width: 20px;
background-color: transparent; background-color: transparent;
border-color: hsl(156, 28%, 70%); border-color: hsl(156deg 28% 70%);
margin-right: 4px; margin-right: 4px;
border-radius: 3px; border-radius: 3px;
&:hover { &:hover {
border: 1px solid hsl(194, 60%, 40%); border: 1px solid hsl(194deg 60% 40%);
} }
} }
&.add-task, &.add-task,
&.poll-option { &.poll-option {
color: hsl(156, 41%, 40%); color: hsl(156deg 41% 40%);
border: 1px solid hsl(156, 28%, 70%); border: 1px solid hsl(156deg 28% 70%);
width: 100px; width: 100px;
border-radius: 3px; border-radius: 3px;
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
padding: 4px; padding: 4px;
padding-left: 14px; padding-left: 14px;
padding-right: 14px; padding-right: 14px;
@ -174,13 +174,13 @@ button {
&:hover, &:hover,
&:focus { &:focus {
outline: 0; outline: 0;
border-color: hsl(156, 30%, 50%); border-color: hsl(156deg 30% 50%);
} }
&:active { &:active {
border-color: hsl(156, 30%, 40%); border-color: hsl(156deg 30% 40%);
color: hsl(156, 44%, 43%); color: hsl(156deg 44% 43%);
background-color: hsl(154, 33%, 96%); background-color: hsl(154deg 33% 96%);
} }
} }
} }
@ -197,7 +197,7 @@ button {
} }
.widget-error { .widget-error {
color: hsl(1, 45%, 50%); color: hsl(1deg 45% 50%);
font-size: 12px; font-size: 12px;
} }
@ -206,11 +206,11 @@ button {
width: 28px !important; width: 28px !important;
height: 28px; height: 28px;
border-radius: 3px; border-radius: 3px;
border: 1px solid hsl(0, 0%, 80%); border: 1px solid hsl(0deg 0% 80%);
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
&:hover { &:hover {
border-color: hsl(0, 0%, 60%); border-color: hsl(0deg 0% 60%);
} }
} }
@ -229,5 +229,5 @@ button {
} }
.current-user-vote { .current-user-vote {
background-color: hsla(156, 10%, 90%, 0.9); background-color: hsl(156deg 10% 90% / 90%);
} }

306
web/styles/zulip.css
View File

@ -21,15 +21,15 @@ body {
/* Common background color */ /* Common background color */
body, body,
#message_view_header_underpadding { #message_view_header_underpadding {
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
transition: background-color 200ms linear; transition: background-color 200ms linear;
} }
:root { :root {
color-scheme: light; color-scheme: light;
--color-default-text: hsl(0, 0%, 15%); --color-default-text: hsl(0deg 0% 15%);
--color-date: hsl(0, 0%, 15%, 0.75); --color-date: hsl(0deg 0% 15% / 75%);
/* /*
This is the header, aka the navbar. This is the header, aka the navbar.
@ -59,8 +59,8 @@ body,
} }
%dark-theme { %dark-theme {
--color-default-text: hsl(0, 0%, 100%); --color-default-text: hsl(0deg 0% 100%);
--color-date: hsl(0, 0%, 100%, 0.75); --color-date: hsl(0deg 0% 100% / 75%);
} }
:root.dark-theme { :root.dark-theme {
@ -93,7 +93,7 @@ a {
&.message_label_clickable:hover { &.message_label_clickable:hover {
cursor: pointer; cursor: pointer;
color: hsl(200, 100%, 40%); color: hsl(200deg 100% 40%);
} }
} }
@ -139,14 +139,14 @@ p.n-margin {
} }
.history-limited-box { .history-limited-box {
color: hsl(16, 60%, 45%); color: hsl(16deg 60% 45%);
border: 1px solid hsl(16, 60%, 45%); border: 1px solid hsl(16deg 60% 45%);
box-shadow: 0 0 2px hsl(16, 60%, 45%); box-shadow: 0 0 2px hsl(16deg 60% 45%);
} }
.all-messages-search-caution { .all-messages-search-caution {
border: 1px solid hsla(192, 19%, 75%, 0.2); border: 1px solid hsl(192deg 19% 75% / 20%);
box-shadow: 0 0 2px hsla(192, 19%, 75%, 0.2); box-shadow: 0 0 2px hsl(192deg 19% 75% / 20%);
} }
.history-limited-box, .history-limited-box,
@ -190,13 +190,13 @@ p.n-margin {
& svg { & svg {
& circle { & circle {
fill: hsl(0, 0%, 27%); fill: hsl(0deg 0% 27%);
stroke: hsl(0, 0%, 27%); stroke: hsl(0deg 0% 27%);
} }
& path { & path {
fill: hsl(0, 0%, 100%); fill: hsl(0deg 0% 100%);
stroke: hsl(0, 0%, 100%); stroke: hsl(0deg 0% 100%);
} }
} }
} }
@ -209,9 +209,9 @@ p.n-margin {
left: calc(50vw - 220px); left: calc(50vw - 220px);
padding: 15px; padding: 15px;
background-color: hsl(0, 0%, 98%); background-color: hsl(0deg 0% 98%);
border-radius: 5px; border-radius: 5px;
box-shadow: 0 0 30px hsla(0, 0%, 0%, 0.25); box-shadow: 0 0 30px hsl(0deg 0% 0% / 25%);
z-index: 110; z-index: 110;
animation-name: pulse; animation-name: pulse;
@ -240,15 +240,15 @@ p.n-margin {
@keyframes pulse { @keyframes pulse {
0% { 0% {
box-shadow: 0 0 30px hsla(0, 0%, 0%, 0.35); box-shadow: 0 0 30px hsl(0deg 0% 0% / 35%);
} }
50% { 50% {
box-shadow: 0 0 30px hsla(0, 0%, 0%, 0.15); box-shadow: 0 0 30px hsl(0deg 0% 0% / 15%);
} }
100% { 100% {
box-shadow: 0 0 30px hsla(0, 0%, 0%, 0.35); box-shadow: 0 0 30px hsl(0deg 0% 0% / 35%);
} }
} }
@ -275,11 +275,11 @@ p.n-margin {
height: var(--header-height); height: var(--header-height);
padding-bottom: var(--header-padding-bottom); padding-bottom: var(--header-padding-bottom);
/* Since the headers are sticky, we need non-transparent background. */ /* Since the headers are sticky, we need non-transparent background. */
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
} }
#top_navbar { #top_navbar {
border-bottom: 1px solid hsla(0, 0%, 0%, 0.2); border-bottom: 1px solid hsl(0deg 0% 0% / 20%);
} }
#navbar_alerts_wrapper { #navbar_alerts_wrapper {
@ -299,13 +299,13 @@ p.n-margin {
text-align: center; text-align: center;
text-shadow: none; text-shadow: none;
color: hsl(0, 0%, 100%); color: hsl(0deg 0% 100%);
&.alert-info { &.alert-info {
background-color: hsl(170, 46%, 54%); background-color: hsl(170deg 46% 54%);
&.red { &.red {
background-color: hsl(0, 46%, 54%); background-color: hsl(0deg 46% 54%);
} }
} }
@ -318,12 +318,12 @@ p.n-margin {
} }
.alert-link { .alert-link {
color: hsl(169, 100%, 88%); color: hsl(169deg 100% 88%);
font-weight: 600; font-weight: 600;
} }
&.red .alert-link { &.red .alert-link {
color: hsl(0, 100%, 88%); color: hsl(0deg 100% 88%);
} }
.buttons .alert-link { .buttons .alert-link {
@ -353,7 +353,7 @@ p.n-margin {
.org-url { .org-url {
line-height: 100%; line-height: 100%;
color: hsl(0, 0%, 52%); color: hsl(0deg 0% 52%);
} }
.org-version { .org-version {
@ -362,7 +362,7 @@ p.n-margin {
} }
.org-upgrade { .org-upgrade {
color: hsl(226, 82%, 60%); color: hsl(226deg 82% 60%);
& a { & a {
padding: 0; padding: 0;
@ -404,7 +404,7 @@ p.n-margin {
margin: 0 auto; margin: 0 auto;
padding: 0; padding: 0;
position: relative; position: relative;
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
} }
.column-right { .column-right {
@ -425,11 +425,11 @@ p.n-margin {
& a { & a {
font-size: calc(16em / 14); font-size: calc(16em / 14);
font-weight: 600; font-weight: 600;
color: hsl(0, 0%, 20%); color: hsl(0deg 0% 20%);
&:hover { &:hover {
text-decoration: none; text-decoration: none;
color: hsl(0, 0%, 0%); color: hsl(0deg 0% 0%);
} }
& i { & i {
@ -438,7 +438,7 @@ p.n-margin {
} }
.divider { .divider {
color: hsl(0, 0%, 88%); color: hsl(0deg 0% 88%);
font-size: 20px; font-size: 20px;
line-height: 1; line-height: 1;
} }
@ -452,7 +452,7 @@ p.n-margin {
height: 40px; height: 40px;
/* Width of userlist-toggle button. */ /* Width of userlist-toggle button. */
width: 45px; width: 45px;
border-left: 1px solid hsl(0, 0%, 88%); border-left: 1px solid hsl(0deg 0% 88%);
.login_button { .login_button {
display: flex; display: flex;
@ -467,7 +467,7 @@ p.n-margin {
} }
& i { & i {
color: hsl(0, 0%, 20%); color: hsl(0deg 0% 20%);
font-size: 1.6em; font-size: 1.6em;
} }
} }
@ -538,7 +538,7 @@ i.fa:focus,
i.zulip-icon:focus, i.zulip-icon:focus,
.auto-select:focus, .auto-select:focus,
[role="button"]:focus { [role="button"]:focus {
outline: 2px solid hsl(215, 47%, 50%); outline: 2px solid hsl(215deg 47% 50%);
/* TODO: change solid to auto once the Chromium bug #1105822 is fixed */ /* TODO: change solid to auto once the Chromium bug #1105822 is fixed */
} }
@ -577,7 +577,7 @@ li,
/* Classes which style copy buttons */ /* Classes which style copy buttons */
.copy_button_base { .copy_button_base {
outline-color: hsl(0, 0%, 73%); outline-color: hsl(0deg 0% 73%);
height: 18px; height: 18px;
width: 10px; width: 10px;
padding: 6px; padding: 6px;
@ -592,7 +592,7 @@ li,
z-index: 2; z-index: 2;
&:hover svg path { &:hover svg path {
fill: hsl(200, 100%, 40%); fill: hsl(200deg 100% 40%);
} }
} }
@ -656,7 +656,7 @@ strong {
} }
.sidebar-title { .sidebar-title {
color: hsl(0, 0%, 43%); color: hsl(0deg 0% 43%);
font-size: inherit; font-size: inherit;
font-weight: normal; font-weight: normal;
display: inline; display: inline;
@ -676,7 +676,7 @@ strong {
} }
.tooltip-inner { .tooltip-inner {
background-color: hsla(0, 0%, 7%, 0.8); background-color: hsl(0deg 0% 7% / 80%);
padding: 3px 5px; padding: 3px 5px;
} }
@ -705,7 +705,7 @@ strong {
#message_edit_tooltip { #message_edit_tooltip {
float: right; float: right;
color: hsl(0, 0%, 0%); color: hsl(0deg 0% 0%);
margin-top: 2px; margin-top: 2px;
margin-left: 6px; margin-left: 6px;
opacity: 0.5; opacity: 0.5;
@ -741,7 +741,7 @@ strong {
clear: both; clear: both;
font-weight: normal; font-weight: normal;
line-height: 20px; line-height: 20px;
color: hsl(0, 0%, 20%); color: hsl(0deg 0% 20%);
white-space: nowrap; white-space: nowrap;
&:hover { &:hover {
@ -749,13 +749,13 @@ strong {
} }
&:focus { &:focus {
color: hsl(0, 0%, 100%); color: hsl(0deg 0% 100%);
text-decoration: none; text-decoration: none;
background-color: hsl(200, 100%, 38%); background-color: hsl(200deg 100% 38%);
background-image: linear-gradient( background-image: linear-gradient(
to bottom, to bottom,
hsl(200, 100%, 40%), hsl(200deg 100% 40%),
hsl(200, 100%, 35%) hsl(200deg 100% 35%)
); );
} }
@ -776,18 +776,18 @@ strong {
} }
.active > a { .active > a {
color: hsl(0, 0%, 100%); color: hsl(0deg 0% 100%);
text-decoration: none; text-decoration: none;
background-color: hsl(200, 100%, 38%); background-color: hsl(200deg 100% 38%);
background-image: linear-gradient( background-image: linear-gradient(
to bottom, to bottom,
hsl(200, 100%, 40%), hsl(200deg 100% 40%),
hsl(200, 100%, 35%) hsl(200deg 100% 35%)
); );
outline: 0; outline: 0;
.user_circle_empty { .user_circle_empty {
border-color: hsl(0, 0%, 25%); border-color: hsl(0deg 0% 25%);
} }
} }
@ -798,7 +798,7 @@ strong {
/* Copied from bootstrap 2.1.1 CSS for dropdown-menu li > a:focus */ /* Copied from bootstrap 2.1.1 CSS for dropdown-menu li > a:focus */
li.actual-dropdown-menu > a:focus { li.actual-dropdown-menu > a:focus {
color: hsl(0, 0%, 100%); color: hsl(0deg 0% 100%);
text-decoration: none; text-decoration: none;
background-color: transparent; background-color: transparent;
background-image: none; background-image: none;
@ -844,11 +844,11 @@ li.actual-dropdown-menu i {
td.pointer { td.pointer {
vertical-align: top; vertical-align: top;
padding-top: 10px; padding-top: 10px;
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
} }
.new_messages { .new_messages {
background-color: hsl(194, 53%, 79%); background-color: hsl(194deg 53% 79%);
} }
.new_messages, .new_messages,
@ -925,8 +925,8 @@ td.pointer {
z-index is kinda hacky, and requires some annoying color-matching, z-index is kinda hacky, and requires some annoying color-matching,
but it works. */ but it works. */
.alert-msg { .alert-msg {
color: hsl(170, 48%, 54%); color: hsl(170deg 48% 54%);
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
z-index: 999; z-index: 999;
font-weight: 400; font-weight: 400;
display: none; display: none;
@ -953,7 +953,7 @@ td.pointer {
text-align: center; text-align: center;
display: inline-block; display: inline-block;
position: relative; position: relative;
color: hsl(0, 0%, 73%); color: hsl(0deg 0% 73%);
> i { > i {
vertical-align: middle; vertical-align: middle;
@ -977,7 +977,7 @@ td.pointer {
> .reaction_button { > .reaction_button {
&:hover { &:hover {
color: hsl(200, 100%, 40%); color: hsl(200deg 100% 40%);
} }
} }
@ -986,7 +986,7 @@ td.pointer {
height: 16px; height: 16px;
&:hover { &:hover {
color: hsl(200, 100%, 40%); color: hsl(200deg 100% 40%);
} }
} }
@ -995,7 +995,7 @@ td.pointer {
&:hover { &:hover {
cursor: pointer; cursor: pointer;
color: hsl(200, 100%, 40%); color: hsl(200deg 100% 40%);
} }
} }
@ -1024,7 +1024,7 @@ td.pointer {
.failed_message_action { .failed_message_action {
opacity: 1 !important; opacity: 1 !important;
color: hsl(0, 100%, 50%); color: hsl(0deg 100% 50%);
font-weight: bold; font-weight: bold;
padding: 1px; padding: 1px;
} }
@ -1036,7 +1036,7 @@ td.pointer {
.star_container { .star_container {
&:not(.empty-star) { &:not(.empty-star) {
color: hsl(106, 77%, 29%); color: hsl(106deg 77% 29%);
/* Opacity/visibility as though the message is hovered. */ /* Opacity/visibility as though the message is hovered. */
opacity: 1 !important; opacity: 1 !important;
@ -1048,7 +1048,7 @@ td.pointer {
.star { .star {
&:hover { &:hover {
cursor: pointer; cursor: pointer;
color: hsl(153, 80%, 25%); color: hsl(153deg 80% 25%);
} }
} }
@ -1089,7 +1089,7 @@ td.pointer {
.message_list { .message_list {
.recipient_row { .recipient_row {
border-bottom: 1px solid hsl(0, 0%, 88%); border-bottom: 1px solid hsl(0deg 0% 88%);
/* This value should be in sync with `margin_between_recipient_rows` /* This value should be in sync with `margin_between_recipient_rows`
in `message_list_view`. */ in `message_list_view`. */
margin-bottom: 10px; margin-bottom: 10px;
@ -1099,7 +1099,7 @@ td.pointer {
position: sticky; position: sticky;
top: var(--sidebar-top); top: var(--sidebar-top);
z-index: 3; z-index: 3;
box-shadow: 0 -1px 0 0 hsl(0, 0%, 100%); box-shadow: 0 -1px 0 0 hsl(0deg 0% 100%);
} }
} }
@ -1109,9 +1109,9 @@ td.pointer {
font-weight: normal; font-weight: normal;
height: 17px; height: 17px;
line-height: 17px; line-height: 17px;
border-color: hsla(0, 0%, 0%, 0) hsla(0, 0%, 0%, 0) hsla(0, 0%, 0%, 0) border-color: hsl(0deg 0% 0% / 0%) hsl(0deg 0% 0% / 0%) hsl(0deg 0% 0% / 0%)
hsl(0, 0%, 88%); hsl(0deg 0% 88%);
background-color: hsl(0, 0%, 88%); background-color: hsl(0deg 0% 88%);
border-width: 0; border-width: 0;
position: relative; position: relative;
text-decoration: none; text-decoration: none;
@ -1259,35 +1259,35 @@ td.pointer {
} }
.message_header_private_message { .message_header_private_message {
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
.message_label_clickable { .message_label_clickable {
background-color: hsl(0, 0%, 27%); background-color: hsl(0deg 0% 27%);
display: inline-block; display: inline-block;
padding: 3px 6px 2px; padding: 3px 6px 2px;
font-weight: normal; font-weight: normal;
height: 17px; height: 17px;
line-height: 17px; line-height: 17px;
border-left-color: hsl(0, 0%, 27%); border-left-color: hsl(0deg 0% 27%);
} }
/* Base color backgrounds for message boxes, /* Base color backgrounds for message boxes,
private messages, mentions, and unread messages */ private messages, mentions, and unread messages */
.message-header-contents { .message-header-contents {
background-color: hsla(192, 19%, 75%, 0.2); background-color: hsl(192deg 19% 75% / 20%);
box-shadow: inset 1px 1px 0 hsl(0, 0%, 88%); box-shadow: inset 1px 1px 0 hsl(0deg 0% 88%);
} }
} }
.private-message { .private-message {
.alert-msg { .alert-msg {
background-color: hsl(192, 20%, 95%); background-color: hsl(192deg 20% 95%);
} }
.messagebox, .messagebox,
.date_row { .date_row {
background-color: hsla(192, 19%, 75%, 0.2); background-color: hsl(192deg 19% 75% / 20%);
/* The 5th parameter here is a spread-radius, which, when negative, /* The 5th parameter here is a spread-radius, which, when negative,
* causes the shadow to shrink (be smaller than the target * causes the shadow to shrink (be smaller than the target
* element), resulting in a visual width of 3px-1px=2px. This * element), resulting in a visual width of 3px-1px=2px. This
@ -1301,8 +1301,8 @@ td.pointer {
* Handlebars templates, since the color used there is the * Handlebars templates, since the color used there is the
* stream's configured color. * stream's configured color.
*/ */
box-shadow: inset 3px 0 0 -1px hsl(0, 0%, 27%), box-shadow: inset 3px 0 0 -1px hsl(0deg 0% 27%),
-1px 0 0 0 hsl(0, 0%, 27%); -1px 0 0 0 hsl(0deg 0% 27%);
} }
} }
@ -1310,13 +1310,13 @@ td.pointer {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
border-right: 1px solid hsl(0, 0%, 88%); border-right: 1px solid hsl(0deg 0% 88%);
background-color: hsl(0, 0%, 88%); background-color: hsl(0deg 0% 88%);
} }
.group_mention .messagebox, .group_mention .messagebox,
.direct_mention .messagebox { .direct_mention .messagebox {
background-color: hsl(8, 94%, 94%); background-color: hsl(8deg 94% 94%);
} }
.recipient_row .message_row:first-child .unread_marker { .recipient_row .message_row:first-child .unread_marker {
@ -1344,7 +1344,7 @@ td.pointer {
} }
.unread-marker-fill { .unread-marker-fill {
background-color: hsl(107, 74%, 29%); background-color: hsl(107deg 74% 29%);
width: 3px; width: 3px;
height: 100%; height: 100%;
} }
@ -1358,15 +1358,15 @@ td.pointer {
/* Sticky message header overlaps 1px with the box-shadow, so we add another /* Sticky message header overlaps 1px with the box-shadow, so we add another
2px wide box-shadow 1px below from top to compensate for that. */ 2px wide box-shadow 1px below from top to compensate for that. */
.messagebox-content { .messagebox-content {
box-shadow: inset 0 1px 0 2px hsl(215, 47%, 50%), box-shadow: inset 0 1px 0 2px hsl(215deg 47% 50%),
inset 0 0 0 2px hsl(215, 47%, 50%), 0 0 0 1px hsl(215, 47%, 50%); inset 0 0 0 2px hsl(215deg 47% 50%), 0 0 0 1px hsl(215deg 47% 50%);
} }
} }
.selected_message { .selected_message {
.messagebox-content { .messagebox-content {
box-shadow: inset 0 0 0 2px hsl(215, 47%, 50%), box-shadow: inset 0 0 0 2px hsl(215deg 47% 50%),
0 0 0 1px hsl(215, 47%, 50%); 0 0 0 1px hsl(215deg 47% 50%);
} }
} }
@ -1389,12 +1389,12 @@ td.pointer {
.sender_name_hovered { .sender_name_hovered {
.sender_name, .sender_name,
.sender_name-in-status { .sender_name-in-status {
color: hsl(200, 100%, 40%); color: hsl(200deg 100% 40%);
} }
} }
.actions_hover:hover { .actions_hover:hover {
color: hsl(200, 100%, 40%); color: hsl(200deg 100% 40%);
} }
.always_visible_topic_edit, .always_visible_topic_edit,
@ -1444,11 +1444,11 @@ td.pointer {
.dark_background a:hover, .dark_background a:hover,
a.dark_background:hover, a.dark_background:hover,
.dark_background { .dark_background {
color: hsl(0, 0%, 100%) !important; color: hsl(0deg 0% 100%) !important;
} }
.dark_background a.message_label_clickable:hover { .dark_background a.message_label_clickable:hover {
color: hsl(200, 99%, 60%); color: hsl(200deg 99% 60%);
} }
.small { .small {
@ -1462,7 +1462,7 @@ a.dark_background:hover,
.settings-forgot-password { .settings-forgot-password {
display: inline-block; display: inline-block;
position: relative; position: relative;
color: hsl(0, 0%, 73%); color: hsl(0deg 0% 73%);
bottom: 4px; bottom: 4px;
} }
@ -1475,8 +1475,8 @@ div.message_table {
.message_row { .message_row {
position: relative; position: relative;
border-left: 1px solid hsla(0, 0%, 0%, 0.1); border-left: 1px solid hsl(0deg 0% 0% / 10%);
border-right: 1px solid hsla(0, 0%, 0%, 0.1); border-right: 1px solid hsl(0deg 0% 0% / 10%);
.date_row { .date_row {
/* We only want padding for the date rows between recipient blocks */ /* We only want padding for the date rows between recipient blocks */
@ -1535,12 +1535,12 @@ div.focused_table {
.message_edit_countdown_timer { .message_edit_countdown_timer {
text-align: right; text-align: right;
display: inline; display: inline;
color: hsl(0, 0%, 63%); color: hsl(0deg 0% 63%);
} }
.message_edit_tooltip { .message_edit_tooltip {
display: inline; display: inline;
color: hsl(0, 0%, 63%); color: hsl(0deg 0% 63%);
} }
.message-edit-timer { .message-edit-timer {
@ -1655,7 +1655,7 @@ div.focused_table {
.message_length_controller { .message_length_controller {
display: none; display: none;
text-align: center; text-align: center;
color: hsl(200, 100%, 40%); color: hsl(200deg 100% 40%);
/* to make message-uncollapse easier */ /* to make message-uncollapse easier */
margin-top: 10px; margin-top: 10px;
@ -1680,7 +1680,7 @@ div.focused_table {
overflow: hidden; overflow: hidden;
&.guest-avatar::after { &.guest-avatar::after {
outline: 2px solid hsl(0, 0%, 100%); outline: 2px solid hsl(0deg 0% 100%);
} }
} }
@ -1698,8 +1698,8 @@ div.focused_table {
} }
.top-navbar-border { .top-navbar-border {
border-right: 1px solid hsl(0, 0%, 88%); border-right: 1px solid hsl(0deg 0% 88%);
border-left: 1px solid hsl(0, 0%, 88%); border-left: 1px solid hsl(0deg 0% 88%);
} }
.search_icon { .search_icon {
@ -1790,7 +1790,7 @@ div.focused_table {
} }
.divider { .divider {
color: hsl(0, 0%, 88%); color: hsl(0deg 0% 88%);
font-size: 20px; font-size: 20px;
margin: 0 3px; margin: 0 3px;
} }
@ -1799,7 +1799,7 @@ div.focused_table {
.narrow_description { .narrow_description {
background: none; background: none;
font-size: 14px; font-size: 14px;
color: hsl(0, 0%, 40%); color: hsl(0deg 0% 40%);
font-weight: 400; font-weight: 400;
line-height: 20px; line-height: 20px;
} }
@ -1821,7 +1821,7 @@ div.focused_table {
position: absolute; position: absolute;
top: 25%; top: 25%;
height: 50%; height: 50%;
color: hsl(0, 0%, 88%); color: hsl(0deg 0% 88%);
font-size: 20px; font-size: 20px;
@media (width < $sm_min) { @media (width < $sm_min) {
@ -1957,10 +1957,10 @@ div.focused_table {
#streamlist-toggle-button { #streamlist-toggle-button {
text-decoration: none; text-decoration: none;
color: hsl(0, 0%, 52%); color: hsl(0deg 0% 52%);
display: block; display: block;
position: relative; position: relative;
background-color: hsl(0, 0%, 89%); background-color: hsl(0deg 0% 89%);
width: 40px; width: 40px;
height: 19px; height: 19px;
padding-top: 12px; padding-top: 12px;
@ -1974,17 +1974,17 @@ div.focused_table {
height: 12px; height: 12px;
min-width: 12px; min-width: 12px;
line-height: 12px; line-height: 12px;
background-color: hsl(0, 100%, 20%); background-color: hsl(0deg 100% 20%);
top: 4px; top: 4px;
right: 4px; right: 4px;
border: 1px solid hsl(0, 0%, 93%); border: 1px solid hsl(0deg 0% 93%);
box-shadow: 0 0 1px hsla(0, 0%, 0%, 0.2); box-shadow: 0 0 1px hsl(0deg 0% 0% / 20%);
border-radius: 12px; border-radius: 12px;
padding: 1px; padding: 1px;
font-size: 9px; font-size: 9px;
z-index: 15; z-index: 15;
font-weight: normal; font-weight: normal;
color: hsl(0, 0%, 100%); color: hsl(0deg 0% 100%);
} }
.nav .dropdown-menu { .nav .dropdown-menu {
@ -1994,7 +1994,7 @@ div.focused_table {
/* Match the width of the right sidebar so that we don't have /* Match the width of the right sidebar so that we don't have
the presence dots distracting you when looking at this. */ the presence dots distracting you when looking at this. */
min-width: 240px; min-width: 240px;
box-shadow: 0 0 5px hsla(0, 0%, 0%, 0.2); box-shadow: 0 0 5px hsl(0deg 0% 0% / 20%);
&::after { &::after {
position: absolute; position: absolute;
@ -2004,7 +2004,7 @@ div.focused_table {
right: 19px; right: 19px;
display: inline-block; display: inline-block;
border-right: 7px solid transparent; border-right: 7px solid transparent;
border-bottom: 7px solid hsl(0, 0%, 67%); border-bottom: 7px solid hsl(0deg 0% 67%);
border-left: 7px solid transparent; border-left: 7px solid transparent;
content: ""; content: "";
z-index: 10; z-index: 10;
@ -2024,7 +2024,7 @@ div.focused_table {
.typeahead.dropdown-menu { .typeahead.dropdown-menu {
.active { .active {
color: hsl(0, 0%, 100%); color: hsl(0deg 0% 100%);
.unsubscribed_icon { .unsubscribed_icon {
display: block; display: block;
@ -2032,7 +2032,7 @@ div.focused_table {
margin-top: 5px; margin-top: 5px;
margin-right: -12px; margin-right: -12px;
font-size: 0.8em; font-size: 0.8em;
color: hsl(96, 7%, 73%); color: hsl(96deg 7% 73%);
} }
} }
@ -2094,7 +2094,7 @@ nav {
.operator_value { .operator_value {
font-family: "Source Code Pro", monospace; font-family: "Source Code Pro", monospace;
color: hsl(353, 70%, 65%); color: hsl(353deg 70% 65%);
} }
.operator { .operator {
@ -2169,11 +2169,11 @@ nav {
} }
&.small_square_x { &.small_square_x {
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
color: hsl(0, 0%, 47%); color: hsl(0deg 0% 47%);
&:hover { &:hover {
color: hsl(0, 0%, 18%); color: hsl(0deg 0% 18%);
} }
} }
} }
@ -2209,27 +2209,27 @@ textarea.invitee_emails {
max-width: 96%; max-width: 96%;
resize: vertical !important; resize: vertical !important;
color: hsl(0, 0%, 33%); color: hsl(0deg 0% 33%);
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
border-radius: 4px; border-radius: 4px;
vertical-align: middle; vertical-align: middle;
border: 1px solid hsl(0, 0%, 80%); border: 1px solid hsl(0deg 0% 80%);
padding: 4px 6px; padding: 4px 6px;
box-shadow: inset 0 1px 1px hsla(0, 0%, 0%, 0.075); box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%);
transition: border linear 0.2s, box-shadow linear 0.2s; transition: border linear 0.2s, box-shadow linear 0.2s;
&:focus { &:focus {
border-color: hsla(206.5, 80%, 62%, 0.8); border-color: hsl(206.5deg 80% 62% / 80%);
outline: 0; outline: 0;
box-shadow: inset 0 1px 1px hsla(0, 0%, 0%, 0.075), box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%),
0 0 8px hsla(206.5, 80%, 62%, 0.6); 0 0 8px hsl(206.5deg 80% 62% / 60%);
} }
&:disabled { &:disabled {
cursor: not-allowed; cursor: not-allowed;
background-color: hsl(0, 0%, 93%); background-color: hsl(0deg 0% 93%);
} }
} }
@ -2246,11 +2246,11 @@ select.invite-as {
width: 220px; width: 220px;
height: 30px; height: 30px;
padding: 4px 6px; padding: 4px 6px;
color: hsl(0, 0%, 33%); color: hsl(0deg 0% 33%);
border-radius: 4px; border-radius: 4px;
border: 1px solid hsl(0, 0%, 80%); border: 1px solid hsl(0deg 0% 80%);
cursor: pointer; cursor: pointer;
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
vertical-align: middle; vertical-align: middle;
} }
@ -2381,7 +2381,7 @@ select.invite-as {
vertical-align: middle; vertical-align: middle;
height: 0; height: 0;
opacity: 0.35; opacity: 0.35;
border-bottom: 1px solid hsl(0, 0%, 0%); border-bottom: 1px solid hsl(0deg 0% 0%);
} }
.sub-unsub-message span::before, .sub-unsub-message span::before,
@ -2441,29 +2441,29 @@ select.invite-as {
/* Setting resize as none hides the bottom right diagonal box /* Setting resize as none hides the bottom right diagonal box
(which even has a background color of its own!). */ (which even has a background color of its own!). */
resize: none !important; resize: none !important;
color: hsl(0, 0%, 33%); color: hsl(0deg 0% 33%);
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
border-radius: 4px; border-radius: 4px;
vertical-align: middle; vertical-align: middle;
border: 1px solid hsl(0, 0%, 80%); border: 1px solid hsl(0deg 0% 80%);
padding: 4px 6px; padding: 4px 6px;
margin-bottom: 10px; margin-bottom: 10px;
box-shadow: inset 0 1px 1px hsla(0, 0%, 0%, 0.075); box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%);
transition: border linear 0.2s, box-shadow linear 0.2s; transition: border linear 0.2s, box-shadow linear 0.2s;
&:focus { &:focus {
border-color: hsla(206.5, 80%, 62%, 0.8); border-color: hsl(206.5deg 80% 62% / 80%);
outline: 0; outline: 0;
box-shadow: inset 0 1px 1px hsla(0, 0%, 0%, 0.075), box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%),
0 0 8px hsla(206.5, 80%, 62%, 0.6); 0 0 8px hsl(206.5deg 80% 62% / 60%);
} }
&:read-only, &:read-only,
&:disabled { &:disabled {
cursor: not-allowed; cursor: not-allowed;
background-color: hsl(0, 0%, 93%); background-color: hsl(0deg 0% 93%);
} }
} }
} }
@ -2486,7 +2486,7 @@ select.invite-as {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
background-color: hsl(0, 0%, 0%); background-color: hsl(0deg 0% 0%);
z-index: 20000; z-index: 20000;
} }
@ -2518,7 +2518,7 @@ select.invite-as {
.email_copied, .email_copied,
.user_popover_email i:hover { .user_popover_email i:hover {
color: hsl(170, 48%, 54%); color: hsl(170deg 48% 54%);
} }
.email_copied i { .email_copied i {
@ -2542,8 +2542,8 @@ select.invite-as {
} }
.flatpickr-confirm { .flatpickr-confirm {
color: hsl(0, 0%, 100%); color: hsl(0deg 0% 100%);
background-color: hsl(213, 90%, 65%); background-color: hsl(213deg 90% 65%);
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
} }
@ -2572,7 +2572,7 @@ select.invite-as {
position: absolute; position: absolute;
right: 8px; right: 8px;
z-index: 1; z-index: 1;
color: hsl(0, 0%, 67%); color: hsl(0deg 0% 67%);
} }
.overlay-content { .overlay-content {
@ -2611,9 +2611,9 @@ select.invite-as {
top: 0; top: 0;
.right-sidebar { .right-sidebar {
background-color: hsla(0, 0%, 100%, 1); background-color: hsl(0deg 0% 100%);
box-shadow: 0 -2px 3px 0 hsla(0, 0%, 0%, 0.1); box-shadow: 0 -2px 3px 0 hsl(0deg 0% 0% / 10%);
border-left: 1px solid hsl(0, 0%, 87%); border-left: 1px solid hsl(0deg 0% 87%);
/* We use both margin and padding to /* We use both margin and padding to
hide little artifacts from showing up in hide little artifacts from showing up in
@ -2637,7 +2637,7 @@ select.invite-as {
.nav .dropdown-menu { .nav .dropdown-menu {
min-width: 180px; min-width: 180px;
box-shadow: 0 0 5px hsla(0, 0%, 0%, 0.2); box-shadow: 0 0 5px hsl(0deg 0% 0% / 20%);
&::after { &::after {
right: 21px; right: 21px;
@ -2673,9 +2673,9 @@ select.invite-as {
top: 0; top: 0;
.left-sidebar { .left-sidebar {
background-color: hsla(0, 0%, 100%, 1); background-color: hsl(0deg 0% 100%);
box-shadow: 0 2px 3px 0 hsla(0, 0%, 0%, 0.1); box-shadow: 0 2px 3px 0 hsl(0deg 0% 0% / 10%);
border-right: 1px solid hsl(0, 0%, 87%); border-right: 1px solid hsl(0deg 0% 87%);
/* We use both margin and padding to /* We use both margin and padding to
hide little artifacts from showing up in hide little artifacts from showing up in
@ -2845,18 +2845,18 @@ select.invite-as {
cursor: pointer; cursor: pointer;
&:hover #scroll-to-bottom-button { &:hover #scroll-to-bottom-button {
background: hsl(240, 96%, 68%); background: hsl(240deg 96% 68%);
} }
#scroll-to-bottom-button { #scroll-to-bottom-button {
text-align: center; text-align: center;
width: 40px; width: 40px;
height: 40px; height: 40px;
background: hsl(240, 96%, 68%, 0.5); background: hsl(240deg 96% 68% / 50%);
border-radius: 50%; border-radius: 50%;
& i { & i {
color: hsl(0, 0%, 100%); color: hsl(0deg 0% 100%);
margin: 0 auto; margin: 0 auto;
font-size: 21px; font-size: 21px;
position: relative; position: relative;
@ -2897,13 +2897,13 @@ select.invite-as {
.date_row { .date_row {
position: relative; position: relative;
z-index: 3; z-index: 3;
background-color: hsl(0, 0%, 100%); background-color: hsl(0deg 0% 100%);
} }
} }
.private-message.unread { .private-message.unread {
.date_row { .date_row {
background-color: hsl(192, 20%, 95%); background-color: hsl(192deg 20% 95%);
} }
} }
@ -2919,7 +2919,7 @@ select.invite-as {
.private-message.unread ~ .private-message.unread { .private-message.unread ~ .private-message.unread {
.date_row { .date_row {
background-color: hsl(192, 20%, 95%); background-color: hsl(192deg 20% 95%);
} }
} }
} }