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-id-pattern": null,
// Compatibility with older browsers
"alpha-value-notation": "number",
"color-function-notation": "legacy",
"hue-degree-notation": "number",
// Limit language features
"color-no-hex": true,
"color-named": "never",
@ -35,9 +30,8 @@ module.exports = {
],
},
"function-disallowed-list": [
// We use hsl(a) instead of rgb(a)
// We use hsl instead of rgb
"rgb",
"rgba",
],
// 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-error-red: hsl(0, 80%, 40%);
$alert-red: hsl(16deg 60% 45%);
$alert-error-red: hsl(0deg 80% 40%);
.alert-display {
display: none;
@ -43,15 +43,15 @@ $alert-error-red: hsl(0, 80%, 40%);
@extend .alert-display, .alert-animations;
font-size: 1rem;
color: hsl(0, 80%, 40%);
color: hsl(0deg 80% 40%);
margin-top: 5px;
padding: 1rem 0;
background-color: hsl(0, 100%, 98%);
background-color: hsl(0deg 100% 98%);
border-radius: 4px;
border: 1px solid hsl(0, 80%, 40%);
box-shadow: 0 0 2px hsl(0, 80%, 40%);
border: 1px solid hsl(0deg 80% 40%);
box-shadow: 0 0 2px hsl(0deg 80% 40%);
.stacktrace-header {
display: flex;
@ -89,22 +89,22 @@ $alert-error-red: hsl(0, 80%, 40%);
.expand {
cursor: pointer;
color: hsl(0, 32%, 83%);
color: hsl(0deg 32% 83%);
&:hover {
color: hsl(0, 0%, 20%);
color: hsl(0deg 0% 20%);
}
}
.subtle {
color: hsl(0, 7%, 45%);
color: hsl(0deg 7% 45%);
}
.code-context {
color: hsl(0, 7%, 15%);
background-color: hsl(0, 7%, 98%);
box-shadow: inset 0 11px 10px -10px hsl(0, 7%, 70%),
inset 0 -11px 10px -10px hsl(0, 7%, 70%);
color: hsl(0deg 7% 15%);
background-color: hsl(0deg 7% 98%);
box-shadow: inset 0 11px 10px -10px hsl(0deg 7% 70%),
inset 0 -11px 10px -10px hsl(0deg 7% 70%);
margin-top: 1em;
margin-bottom: 1em;
@ -119,11 +119,11 @@ $alert-error-red: hsl(0, 80%, 40%);
width: 3rem;
display: inline-block;
text-align: right;
color: hsl(0, 7%, 35%);
color: hsl(0deg 7% 35%);
}
.focus-line {
background-color: hsl(0, 7%, 90%);
background-color: hsl(0deg 7% 90%);
width: 100%;
}
}
@ -134,7 +134,7 @@ $alert-error-red: hsl(0, 80%, 40%);
font-size: 1rem;
border-radius: 4px;
background-color: hsl(0, 0%, 100%);
background-color: hsl(0deg 0% 100%);
position: relative;
@ -157,7 +157,7 @@ $alert-error-red: hsl(0, 80%, 40%);
overflow: hidden;
content: "\f071";
color: hsl(16, 60%, 55%);
color: hsl(16deg 60% 55%);
}
&::after {
@ -261,11 +261,11 @@ $alert-error-red: hsl(0, 80%, 40%);
&.alert-loading,
&.alert-success {
border-color: hsl(156, 28%, 70%);
box-shadow: 0 0 2px hsl(156, 28%, 70%);
border-color: hsl(156deg 28% 70%);
box-shadow: 0 0 2px hsl(156deg 28% 70%);
.exit {
color: hsl(156, 30%, 50%);
color: hsl(156deg 30% 50%);
}
}
@ -296,13 +296,13 @@ $alert-error-red: hsl(0, 80%, 40%);
padding: 7px;
font-size: 1.5em;
line-height: 0;
color: hsl(156, 30%, 50%);
color: hsl(156deg 30% 50%);
}
.alert-content {
grid-column: 2 / 3;
grid-row-start: 1;
color: hsl(0, 0%, 20%);
color: hsl(0deg 0% 20%);
}
.exit {

184
web/styles/app_components.css
View File

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

10
web/styles/components.css
View File

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

114
web/styles/compose.css
View File

@ -52,11 +52,11 @@
/* Main geometry for this element is in zulip.css */
#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;
padding: 4px 4px 8px;
border-left: 1px solid hsl(0, 0%, 93%);
border-right: 1px solid hsl(0, 0%, 93%);
border-left: 1px solid hsl(0deg 0% 93%);
border-right: 1px solid hsl(0deg 0% 93%);
height: 100%;
display: flex;
flex-flow: column;
@ -92,7 +92,7 @@
&.message_header_private_message {
border-radius: 3px 0 0 3px;
border-bottom: 0;
background-color: hsl(0, 0%, 27%);
background-color: hsl(0deg 0% 27%);
}
}
@ -157,7 +157,7 @@
.message_header {
background: none;
background-color: hsl(0, 0%, 92%);
background-color: hsl(0deg 0% 92%);
border: none;
border-radius: 0;
box-shadow: none !important;
@ -213,11 +213,11 @@
#compose_limit_indicator {
margin-right: 8px;
font-size: 12px;
color: hsl(39, 100%, 50%);
color: hsl(39deg 100% 50%);
align-self: center;
&.over_limit {
color: hsl(0, 76%, 65%);
color: hsl(0deg 76% 65%);
font-weight: bold;
}
}
@ -229,7 +229,7 @@
z-index: 4;
width: 100%;
background-color: hsl(0, 0%, 100%);
background-color: hsl(0deg 0% 100%);
}
#compose-container {
@ -321,100 +321,100 @@
}
&.success {
background-color: hsl(147, 43%, 92%);
border: 1px solid hsla(147, 57%, 25%, 0.4);
color: hsl(147, 57%, 25%);
background-color: hsl(147deg 43% 92%);
border: 1px solid hsl(147deg 57% 25% / 40%);
color: hsl(147deg 57% 25%);
.compose_banner_close_button {
color: hsla(147, 57%, 25%, 0.5);
color: hsl(147deg 57% 25% / 50%);
&:hover {
color: hsl(147, 57%, 25%);
color: hsl(147deg 57% 25%);
}
&:active {
color: hsla(147, 57%, 25%, 0.75);
color: hsl(147deg 57% 25% / 75%);
}
}
}
&.warning {
background-color: hsl(50, 75%, 92%);
border-color: hsla(38, 44%, 27%, 0.4);
color: hsl(38, 44%, 27%);
background-color: hsl(50deg 75% 92%);
border-color: hsl(38deg 44% 27% / 40%);
color: hsl(38deg 44% 27%);
.compose_banner_close_button {
color: hsla(38, 44%, 27%, 0.5);
color: hsl(38deg 44% 27% / 50%);
&:hover {
color: hsl(38, 44%, 27%);
color: hsl(38deg 44% 27%);
}
&:active {
color: hsla(38, 44%, 27%, 0.75);
color: hsl(38deg 44% 27% / 75%);
}
}
.compose_banner_action_button {
background-color: hsla(38, 44%, 27%, 0.1);
background-color: hsl(38deg 44% 27% / 10%);
color: inherit;
&:hover {
background-color: hsla(38, 44%, 27%, 0.12);
background-color: hsl(38deg 44% 27% / 12%);
}
&:active {
background-color: hsla(38, 44%, 27%, 0.15);
background-color: hsl(38deg 44% 27% / 15%);
}
}
}
&.error {
background-color: hsl(4, 35%, 90%);
border-color: hsla(3, 57%, 33%, 0.4);
color: hsl(4, 58%, 33%);
background-color: hsl(4deg 35% 90%);
border-color: hsl(3deg 57% 33% / 40%);
color: hsl(4deg 58% 33%);
.compose_banner_close_button {
color: hsla(4, 58%, 33%, 0.5);
color: hsl(4deg 58% 33% / 50%);
&:hover {
color: hsl(4, 58%, 33%);
color: hsl(4deg 58% 33%);
}
&:active {
color: hsla(4, 58%, 33%, 0.75);
color: hsl(4deg 58% 33% / 75%);
}
}
.compose_banner_action_button {
background-color: hsla(3, 57%, 33%, 0.1);
background-color: hsl(3deg 57% 33% / 10%);
color: inherit;
&:hover {
background-color: hsla(3, 57%, 33%, 0.12);
background-color: hsl(3deg 57% 33% / 12%);
}
&:active {
background-color: hsla(3, 57%, 33%, 0.15);
background-color: hsl(3deg 57% 33% / 15%);
}
}
}
&.info {
background-color: hsl(204, 58%, 92%);
border-color: hsla(204, 49%, 29%, 0.4);
background-color: hsl(204deg 58% 92%);
border-color: hsl(204deg 49% 29% / 40%);
position: relative;
color: hsl(204, 49%, 29%);
color: hsl(204deg 49% 29%);
.compose_banner_close_button {
color: hsla(204, 49%, 29%, 0.5);
color: hsl(204deg 49% 29% / 50%);
&:hover {
color: hsl(204, 49%, 29%);
color: hsl(204deg 49% 29%);
}
&: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,
so this is the smoothest it can probably get. */
transition: width 1s ease-in-out;
background: hsl(204, 63%, 85%);
background: hsl(204deg 63% 85%);
top: 0;
bottom: 0;
}
@ -456,7 +456,7 @@
}
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;
margin-top: 5px;
border-radius: 4px;
color: hsl(0, 0%, 33%);
background-color: hsl(0, 0%, 100%);
color: hsl(0deg 0% 33%);
background-color: hsl(0deg 0% 100%);
&.over_limit,
&.over_limit:focus {
box-shadow: 0 0 0 1pt hsl(0, 76%, 65%);
box-shadow: 0 0 0 1pt hsl(0deg 76% 65%);
&.flash {
animation: message-limit-flash 0.5s ease-in-out infinite;
@ -485,25 +485,25 @@ textarea.new_message_textarea {
&:read-only,
&:disabled {
cursor: not-allowed;
background-color: hsl(0, 0%, 93%);
background-color: hsl(0deg 0% 93%);
}
&.invalid,
&.invalid:focus {
border: 1px solid hsl(3, 57%, 33%);
box-shadow: 0 0 2px hsl(3, 57%, 33%);
border: 1px solid hsl(3deg 57% 33%);
box-shadow: 0 0 2px hsl(3deg 57% 33%);
}
}
textarea.new_message_textarea,
.compose_table .recipient_box {
border: 1px solid hsla(0, 0%, 0%, 0.2);
border: 1px solid hsl(0deg 0% 0% / 20%);
box-shadow: none;
transition: border 0.2s ease;
&:focus {
outline: 0;
border: 1px solid hsl(0, 0%, 67%);
border: 1px solid hsl(0deg 0% 67%);
box-shadow: none;
}
}
@ -572,7 +572,7 @@ input.recipient_box {
margin: 4px 0 0;
&:focus {
outline: 1px dotted hsl(0, 0%, 20%);
outline: 1px dotted hsl(0deg 0% 20%);
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
@ -580,7 +580,7 @@ input.recipient_box {
&:first-child {
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 {
opacity: 0.9;
font-size: 11px;
color: hsl(0, 0%, 50%);
color: hsl(0deg 0% 50%);
}
}
@ -694,7 +694,7 @@ input.recipient_box {
}
.divider {
color: hsl(0, 0%, 88%);
color: hsl(0deg 0% 88%);
font-size: 20px;
margin: 0 3px;
}
@ -764,9 +764,9 @@ a.compose_control_button.hide {
min-height: 42px;
overflow: auto;
border: 1px solid hsl(0, 0%, 67%);
border: 1px solid hsl(0deg 0% 67%);
border-radius: 4px;
background-color: hsla(0, 0%, 0%, 0.02);
background-color: hsl(0deg 0% 0% / 2%);
cursor: not-allowed;
}
@ -778,7 +778,7 @@ a.compose_control_button.hide {
& ul {
list-style: none;
margin: 0;
background: hsl(0, 0%, 100%);
background: hsl(0deg 0% 100%);
}
.typeahead-header {
@ -786,7 +786,7 @@ a.compose_control_button.hide {
padding-left: 20px;
padding-right: 20px;
padding-top: 4px;
border-top: 1px solid hsla(0, 0%, 0%, 0.2);
border-top: 1px solid hsl(0deg 0% 0% / 20%);
display: flex;
align-items: center;
}
@ -796,7 +796,7 @@ a.compose_control_button.hide {
}
&.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 {
position: relative;
height: 95%;
background-color: hsl(0, 0%, 100%);
background-color: hsl(0deg 0% 100%);
border-radius: 4px;
padding: 0;
width: 58%;
@ -21,7 +21,7 @@
padding-top: 4px;
padding-bottom: 8px;
text-align: center;
border-bottom: 1px solid hsl(0, 0%, 87%);
border-bottom: 1px solid hsl(0deg 0% 87%);
& h1 {
margin: 0;
@ -34,7 +34,7 @@
position: absolute;
top: 10px;
right: 10px;
color: hsl(0, 0%, 67%);
color: hsl(0deg 0% 67%);
cursor: pointer;
.exit-sign {
@ -58,7 +58,7 @@
margin-top: calc(45vh - 30px - 1.5em);
text-align: center;
font-size: 1.5em;
color: hsl(0, 0%, 67%);
color: hsl(0deg 0% 67%);
pointer-events: none;
}
@ -66,7 +66,7 @@
display: block;
text-align: center;
font-size: 1em;
color: hsl(0, 0%, 67%);
color: hsl(0deg 0% 67%);
pointer-events: none;
}
@ -88,11 +88,11 @@
.draft-info-box {
width: 100%;
border: 1px solid hsl(0, 0%, 88%);
border: 1px solid hsl(0deg 0% 88%);
margin-bottom: 10px;
&.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 */
outline-offset: -1px;
}
@ -134,7 +134,7 @@
.restore-draft {
cursor: pointer;
margin-right: 5px;
color: hsl(170, 48%, 54%);
color: hsl(170deg 48% 54%);
opacity: 0.7;
&:hover {
@ -145,7 +145,7 @@
.delete-draft {
cursor: pointer;
margin-left: 5px;
color: hsl(357, 52%, 57%);
color: hsl(357deg 52% 57%);
opacity: 0.7;
&:hover {

46
web/styles/hotspots.css
View File

@ -10,8 +10,8 @@
margin: -12.5px 0 0 -12.5px;
border-radius: 50%;
position: absolute;
background-color: hsla(196, 100%, 82%, 0.3);
border: 2px solid hsl(215, 47%, 50%);
background-color: hsl(196deg 100% 82% / 30%);
border: 2px solid hsl(215deg 47% 50%);
top: 50%;
left: 50%;
}
@ -23,9 +23,9 @@
position: absolute;
top: 50%;
left: 50%;
background-color: hsl(0, 0%, 100%);
background-color: hsl(0deg 0% 100%);
border-radius: 50%;
border: 1px solid hsl(205, 100%, 70%);
border: 1px solid hsl(205deg 100% 70%);
transform: scale(2.2);
opacity: 0;
animation: pulsate 5s ease-out 0.375s 5;
@ -39,7 +39,7 @@
left: -5px;
bottom: 3px;
transform: rotate(7deg);
color: hsl(215, 47%, 50%);
color: hsl(215deg 47% 50%);
font-size: 2.75em;
font-weight: 600;
}
@ -74,14 +74,14 @@
/* popover */
.hotspot.overlay {
z-index: 104;
background-color: hsla(191, 7%, 20%, 0.15);
background-color: hsl(191deg 7% 20% / 15%);
.hotspot-popover {
position: fixed;
width: 250px;
text-align: left;
box-shadow: 0 5px 10px hsla(223, 4%, 54%, 0.2);
border: 1px solid hsl(0, 0%, 80%);
box-shadow: 0 5px 10px hsl(223deg 4% 54% / 20%);
border: 1px solid hsl(0deg 0% 80%);
border-radius: 4px;
/* arrows */
@ -111,12 +111,12 @@
}
&::after {
border-bottom-color: hsl(164, 44%, 47%);
border-bottom-color: hsl(164deg 44% 47%);
margin-right: -12px;
}
&::before {
border-bottom-color: hsl(0, 0%, 80%);
border-bottom-color: hsl(0deg 0% 80%);
margin-right: -13px;
}
}
@ -129,12 +129,12 @@
}
&::after {
border-right-color: hsl(0, 0%, 100%);
border-right-color: hsl(0deg 0% 100%);
margin-top: -12px;
}
&::before {
border-right-color: hsl(0, 0%, 80%);
border-right-color: hsl(0deg 0% 80%);
margin-top: -13px;
}
}
@ -147,12 +147,12 @@
}
&::after {
border-top-color: hsl(0, 0%, 100%);
border-top-color: hsl(0deg 0% 100%);
margin-right: -12px;
}
&::before {
border-top-color: hsl(0, 0%, 80%);
border-top-color: hsl(0deg 0% 80%);
margin-right: -13px;
}
}
@ -165,12 +165,12 @@
}
&::after {
border-left-color: hsl(0, 0%, 100%);
border-left-color: hsl(0deg 0% 100%);
margin-top: -12px;
}
&::before {
border-left-color: hsl(0, 0%, 80%);
border-left-color: hsl(0deg 0% 80%);
margin-top: -13px;
}
}
@ -180,23 +180,23 @@
padding: 0 15px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
background-color: hsl(164, 44%, 47%);
background-color: hsl(164deg 44% 47%);
}
.hotspot-title {
margin: 0;
font-size: 1.15em;
font-weight: 600;
color: hsl(0, 0%, 100%);
color: hsl(0deg 0% 100%);
}
.hotspot-popover-content {
background-color: hsl(0, 0%, 100%);
background-color: hsl(0deg 0% 100%);
padding: 15px;
}
.hotspot-popover-bottom {
background-color: hsl(0, 0%, 100%);
background-color: hsl(0deg 0% 100%);
height: 90px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
@ -225,15 +225,15 @@
border: none;
font-size: 1.15em;
font-weight: 600;
color: hsl(0, 0%, 100%);
background-color: hsl(164, 44%, 47%);
color: hsl(0deg 0% 100%);
background-color: hsl(164deg 44% 47%);
border-radius: 4px;
white-space: normal;
padding: 7px 20px;
outline: none;
&: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 {
position: relative;
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;
transition: all 0.3s ease;
@ -14,7 +14,7 @@
.image-hover-background {
content: "";
background-color: hsla(0, 0%, 0%, 0.6);
background-color: hsl(0deg 0% 0% / 60%);
height: 100%;
width: 100%;
z-index: 99;
@ -31,7 +31,7 @@
align-items: center;
text-align: 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;
}
@ -39,7 +39,7 @@
background: none;
border: none;
cursor: pointer;
color: hsl(0, 0%, 75%);
color: hsl(0deg 0% 75%);
opacity: 0;
padding: 0;
position: absolute;
@ -51,7 +51,7 @@
}
.image-disabled-text {
color: hsl(0, 0%, 100%);
color: hsl(0deg 0% 100%);
cursor: not-allowed;
position: absolute;
text-align: center;
@ -69,7 +69,7 @@
.image-delete-button:focus,
.image-delete-button:hover {
color: hsl(0, 0%, 100%);
color: hsl(0deg 0% 100%);
}
.image-delete-button:hover ~ .image-upload-text {
@ -81,7 +81,7 @@
}
.image-delete-text {
color: hsl(0, 0%, 100%);
color: hsl(0deg 0% 100%);
font-size: 0.85rem;
position: absolute;
visibility: hidden;
@ -91,21 +91,21 @@
.image-upload-text {
cursor: pointer;
font-size: 0.85rem;
color: hsl(0, 0%, 85%);
color: hsl(0deg 0% 85%);
position: absolute;
z-index: 99;
visibility: hidden;
}
.image-upload-text:hover {
color: hsl(0, 0%, 100%);
color: hsl(0deg 0% 100%);
}
.upload-spinner-background {
display: flex;
justify-content: center;
align-items: center;
background-color: hsl(0, 0%, 10%);
background-color: hsl(0deg 0% 10%);
font-size: 0.8rem;
width: 100%;
opacity: 0.8;
@ -164,7 +164,7 @@
#realm-icon-upload-widget {
width: 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 {
top: 5px;
@ -186,11 +186,11 @@
}
#realm-day-logo-upload-widget {
background-color: hsl(0, 100%, 100%);
background-color: hsl(0deg 100% 100%);
}
#realm-night-logo-upload-widget {
background-color: hsl(212, 28%, 18%);
background-color: hsl(212deg 28% 18%);
}
.realm-logo-block {

6
web/styles/informational_overlays.css
View File

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

22
web/styles/input_pill.css
View File

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

32
web/styles/left_sidebar.css
View File

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

24
web/styles/lightbox.css
View File

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

8
web/styles/message_edit_history.css
View File

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

40
web/styles/modal.css
View File

@ -3,14 +3,14 @@
}
.modal-bg {
background-color: hsl(0, 0%, 98%);
background-color: hsl(0deg 0% 98%);
}
/* Styles for the Micromodal-based modals */
.modal__overlay {
position: fixed;
inset: 0;
background: hsla(0, 0%, 0%, 0.6);
background: hsl(0deg 0% 0% / 60%);
display: flex;
justify-content: center;
align-items: center;
@ -20,7 +20,7 @@
.modal__container {
display: flex;
flex-direction: column;
background-color: hsl(0, 0%, 100%);
background-color: hsl(0deg 0% 100%);
max-width: calc(100% - 32px);
max-height: 96%;
width: 32.5rem;
@ -75,7 +75,7 @@
border: 0;
&:hover {
background: hsl(0, 0%, 90%);
background: hsl(0deg 0% 90%);
}
}
@ -87,14 +87,14 @@
line-height: 1.5;
&.simplebar-scrollable-y + .modal__footer {
border-top: 1px solid hsl(0, 0%, 87%);
border-top: 1px solid hsl(0deg 0% 87%);
}
}
.modal__btn {
font-size: 0.875rem;
padding: 0.5rem 1rem;
background-color: hsl(0, 0%, 90%);
background-color: hsl(0deg 0% 90%);
border-radius: 0.25rem;
border-width: 0;
cursor: pointer;
@ -122,21 +122,21 @@
}
.dialog_cancel_button {
background: hsl(0, 0%, 100%);
border: 1px solid hsla(300, 2%, 11%, 0.3);
background: hsl(0deg 0% 100%);
border: 1px solid hsl(300deg 2% 11% / 30%);
&:hover {
background: hsl(0, 0%, 97%);
background: hsl(0deg 0% 97%);
}
}
.dialog_submit_button {
margin-left: 12px;
background-color: hsl(240, 96%, 68%);
color: hsl(0, 0%, 100%) !important;
background-color: hsl(240deg 96% 68%);
color: hsl(0deg 0% 100%) !important;
&:disabled {
background-color: hsl(0, 0%, 65%);
background-color: hsl(0deg 0% 65%);
}
}
@ -212,12 +212,12 @@
line-height: 26px;
&:hover {
background-color: hsla(0, 0%, 0%, 0.05);
background-color: hsl(0deg 0% 0% / 5%);
}
&:active,
&:focus {
background-color: hsla(0, 0%, 0%, 0.1);
background-color: hsl(0deg 0% 0% / 10%);
outline: none;
}
}
@ -234,7 +234,7 @@
}
.border-top {
border-top: 1px solid hsla(300, 2%, 11%, 0.3);
border-top: 1px solid hsl(300deg 2% 11% / 30%);
padding-top: 10px;
}
@ -304,7 +304,7 @@
height: 16px;
& path {
fill: hsl(0, 0%, 100%);
fill: hsl(0deg 0% 100%);
}
}
@ -333,17 +333,17 @@
height: 30px;
width: 220px;
padding: 4px 6px;
color: hsl(0, 0%, 33%);
color: hsl(0deg 0% 33%);
border-radius: 4px;
border: 1px solid hsl(0, 0%, 80%);
border: 1px solid hsl(0deg 0% 80%);
cursor: pointer;
background-color: hsl(0, 0%, 100%);
background-color: hsl(0deg 0% 100%);
&:disabled {
cursor: not-allowed;
/* 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. */
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;
.sp-container {
background-color: hsl(0, 0%, 100%);
background-color: hsl(0deg 0% 100%);
cursor: pointer;
border: none;
@ -163,11 +163,11 @@
}
& button {
background-color: hsl(0, 0%, 100%);
background-color: hsl(0deg 0% 100%);
background-image: none;
border: 1px solid hsl(0, 0%, 80%);
border: 1px solid hsl(0deg 0% 80%);
border-radius: 4px;
color: hsl(0, 0%, 25%);
color: hsl(0deg 0% 25%);
font-size: 12px;
padding: 6px;
text-transform: capitalize;
@ -176,7 +176,7 @@
}
.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-weight: 550;
margin-right: 2px;
background-color: hsl(200, 100%, 40%);
background-color: hsl(200deg 100% 40%);
/* Override random undesired bootstrap style */
text-shadow: none;
/* Not center aligned but looks better. */
@ -266,7 +266,7 @@ ul {
.popover-title {
padding: 0;
border-color: hsla(0, 0%, 0%, 0.2);
border-color: hsl(0deg 0% 0% / 20%);
}
.popover_info li {
@ -281,7 +281,7 @@ ul {
.popover-title {
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;
.bot {
color: hsl(180, 5%, 74%);
color: hsl(180deg 5% 74%);
vertical-align: top;
width: 20px;
padding-top: 3.5px;
@ -332,7 +332,7 @@ ul {
&:hover {
cursor: pointer;
color: hsl(200, 100%, 40%);
color: hsl(200deg 100% 40%);
}
}
@ -344,7 +344,7 @@ ul {
position: relative;
&.guest-avatar::after {
outline: 10px solid hsl(0, 0%, 100%);
outline: 10px solid hsl(0deg 0% 100%);
}
.popover-inner {
@ -380,7 +380,7 @@ ul {
}
.name {
color: hsl(0, 0%, 20%);
color: hsl(0deg 0% 20%);
width: 120px;
font-weight: 600;
margin-right: 10px;
@ -421,10 +421,10 @@ ul {
background-size: cover;
background-position: center;
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 {
outline: 9px solid hsl(0, 0%, 100%);
outline: 9px solid hsl(0deg 0% 100%);
}
}
@ -447,7 +447,7 @@ ul {
}
& hr {
border: 1px solid hsl(0, 0%, 93%);
border: 1px solid hsl(0deg 0% 93%);
margin: 5px 0;
}
@ -456,7 +456,7 @@ ul {
margin-bottom: 10px;
.name {
color: hsl(0, 0%, 20%);
color: hsl(0deg 0% 20%);
font-weight: 600;
}
@ -530,7 +530,7 @@ ul {
.subscription-group-list,
.subscription-stream-list {
position: relative;
border: 1px solid hsl(0, 0%, 83%);
border: 1px solid hsl(0deg 0% 83%);
border-radius: 4px;
overflow: auto;
text-align: left;
@ -549,7 +549,7 @@ ul {
border-radius: 6px;
& 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
those without one. */
height: 34px;
@ -581,7 +581,7 @@ ul {
display: block;
text-align: center;
color: hsl(0, 0%, 67%);
color: hsl(0deg 0% 67%);
}
&:empty {
@ -606,14 +606,14 @@ ul {
width: 100%;
height: 100%;
background-color: hsla(0, 0%, 0%, 0.7);
background-color: hsl(0deg 0% 0% / 70%);
border-radius: 0;
border: none;
pointer-events: none;
.popover-inner {
background-color: hsl(0, 0%, 100%);
background-color: hsl(0deg 0% 100%);
pointer-events: all;
}
}
@ -630,14 +630,14 @@ ul {
width: 100%;
height: 100%;
background-color: hsla(0, 0%, 0%, 0.7);
background-color: hsl(0deg 0% 0% / 70%);
border-radius: 0;
border: none;
pointer-events: none;
.popover-inner {
background-color: hsl(0, 0%, 100%);
background-color: hsl(0deg 0% 100%);
pointer-events: all;
}
@ -664,7 +664,7 @@ ul {
justify-content: 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
emoji picker can render on top of the user status picker. */
@ -728,7 +728,7 @@ ul {
/* Red outline for clear visibility
* of which image is in focus.
*/
outline-color: hsl(0, 100%, 50%);
outline-color: hsl(0deg 100% 50%);
}
.search-box {
@ -750,7 +750,7 @@ ul {
&:focus {
.fa-remove {
outline: 2px solid hsl(215, 47%, 50%);
outline: 2px solid hsl(215deg 47% 50%);
}
}
}
@ -764,7 +764,7 @@ ul {
.popover-footer {
text-align: center;
background-color: hsl(0, 0%, 0%);
background-color: hsl(0deg 0% 0%);
border-radius: 0 0 6px 6px;
& img {

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

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

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

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

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

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

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

@ -1,11 +1,11 @@
$light-blue-border: hsl(208, 46%, 93%);
$border-green: hsl(170, 47%, 53%);
$hover-green: hsl(170, 65%, 85%);
$text-green: hsl(170, 72%, 32%);
$category-text: hsl(219, 23%, 33%);
$light-blue-border: hsl(208deg 46% 93%);
$border-green: hsl(170deg 47% 53%);
$hover-green: hsl(170deg 65% 85%);
$text-green: hsl(170deg 72% 32%);
$category-text: hsl(219deg 23% 33%);
.portico-landing.integrations {
color: hsl(0, 0%, 27%);
color: hsl(0deg 0% 27%);
font-weight: normal;
& h1,
@ -25,7 +25,7 @@ $category-text: hsl(219, 23%, 33%);
max-width: 1170px;
margin: 0 auto;
border-radius: 10px;
background-color: hsl(0, 0%, 100%);
background-color: hsl(0deg 0% 100%);
visibility: hidden;
& img {
@ -91,7 +91,7 @@ $category-text: hsl(219, 23%, 33%);
.portico-page-subheading {
font-weight: 400;
font-size: 1.1em;
color: hsl(0, 0%, 67%);
color: hsl(0deg 0% 67%);
line-height: 1.2;
text-align: center;
}
@ -109,7 +109,7 @@ $category-text: hsl(219, 23%, 33%);
position: relative;
& 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-family: inherit;
@ -334,7 +334,7 @@ $category-text: hsl(219, 23%, 33%);
font-size: 0.85em;
margin-top: 5px;
font-weight: 400;
color: hsla(216, 23%, 13%, 0.5);
color: hsl(216deg 23% 13% / 50%);
}
&.without-category {
@ -591,20 +591,20 @@ $category-text: hsl(219, 23%, 33%);
}
.portico-page-heading {
color: hsl(0, 0%, 0%);
color: hsl(0deg 0% 0%);
font-size: 44px;
}
.portico-page-subheading {
font-weight: 300;
color: hsl(0, 0%, 20%);
color: hsl(0deg 0% 20%);
max-width: 800px;
line-height: 150%;
margin: auto;
}
.integration-categories-sidebar h3 {
color: hsl(0, 0%, 0%);
color: hsl(0deg 0% 0%);
font-size: 20px;
font-weight: 600;
}
@ -626,7 +626,7 @@ $category-text: hsl(219, 23%, 33%);
border-radius: 4px;
&:hover {
border: 1px solid hsl(167, 34%, 56%);
border: 1px solid hsl(167deg 34% 56%);
}
.eligible_realm_logo {
@ -644,7 +644,7 @@ $category-text: hsl(219, 23%, 33%);
.eligible_realm_name {
font-weight: 400;
font-size: 21px;
color: hsl(220.6, 20%, 33.3%);
color: hsl(220.6deg 20% 33.3%);
line-height: 23px;
margin: 0 0 2px;
}
@ -652,7 +652,7 @@ $category-text: hsl(219, 23%, 33%);
.eligible_realm_description {
font-weight: 400;
font-size: 15px;
color: hsl(220, 2.7%, 56.5%);
color: hsl(220deg 2.7% 56.5%);
line-height: 19px;
margin: 0;
/* 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-right: 3%;
padding: 20px 10px 15px;
background-color: hsla(0, 0%, 100%, 0.48);
box-shadow: 0 0 40px hsla(0, 0%, 0%, 0.06);
background-color: hsl(0deg 0% 100% / 48%);
box-shadow: 0 0 40px hsl(0deg 0% 0% / 6%);
& textarea {
color: hsl(0, 0%, 33%);
background-color: hsl(0, 0%, 100%);
color: hsl(0deg 0% 33%);
background-color: hsl(0deg 0% 100%);
border-radius: 4px;
vertical-align: middle;
border: 1px solid hsl(0, 0%, 80%);
border: 1px solid hsl(0deg 0% 80%);
padding: 4px 6px;
margin-bottom: 10px;
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;
&:focus {
border-color: hsla(206.5, 80%, 62%, 0.8);
border-color: hsl(206.5deg 80% 62% / 80%);
outline: 0;
box-shadow: inset 0 1px 1px hsla(0, 0%, 0%, 0.075),
0 0 8px hsla(206.5, 80%, 62%, 0.6);
box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%),
0 0 8px hsl(206.5deg 80% 62% / 60%);
}
&:read-only {
@ -49,12 +49,12 @@
padding: 4px 6px;
width: 220px;
font-size: 14px;
color: hsl(0, 0%, 33%);
color: hsl(0deg 0% 33%);
border-radius: 4px;
border: 1px solid hsl(0, 0%, 80%);
border: 1px solid hsl(0deg 0% 80%);
margin-bottom: 10px;
cursor: pointer;
background-color: hsl(0, 0%, 100%);
background-color: hsl(0deg 0% 100%);
vertical-align: middle;
}
}
@ -69,7 +69,7 @@
width: 100%;
height: 500px;
resize: vertical;
background-color: hsl(0, 0%, 100%);
background-color: hsl(0deg 0% 100%);
}
.top-navbar {
@ -101,7 +101,7 @@
}
.optional {
color: hsl(0, 0%, 50%);
color: hsl(0deg 0% 50%);
}
.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 {
border-bottom: 1px solid hsl(0, 0%, 93%);
border-bottom: 1px solid hsl(0deg 0% 93%);
padding-bottom: 10px;
margin-bottom: 15px;
@ -133,8 +133,8 @@
vertical-align: top;
padding: 3px 6.5px 3px 7.5px;
margin-right: 5px;
background-color: hsl(170, 48%, 54%);
color: hsl(0, 0%, 100%);
background-color: hsl(170deg 48% 54%);
color: hsl(0deg 0% 100%);
border-radius: 100%;
font-size: 0.9em;
line-height: 1.1;
@ -142,7 +142,7 @@
}
.codehilite {
background-color: hsl(0, 0%, 100%);
background-color: hsl(0deg 0% 100%);
& pre {
white-space: pre;
@ -190,7 +190,7 @@
.content {
padding: 30px;
max-width: 700px;
background-color: hsl(0, 0%, 100%);
background-color: hsl(0deg 0% 100%);
& ol li p:not(:first-child) {
display: block;
@ -215,11 +215,11 @@
}
& a {
color: hsl(176, 46%, 41%);
color: hsl(176deg 46% 41%);
font-weight: 600;
& code {
color: hsl(176, 46%, 41%);
color: hsl(176deg 46% 41%);
}
}
@ -229,8 +229,8 @@
& img {
vertical-align: top;
box-shadow: 0 0 4px hsla(0, 0%, 0%, 0.05);
border: 1px solid hsl(0, 0%, 87%);
box-shadow: 0 0 4px hsl(0deg 0% 0% / 5%);
border: 1px solid hsl(0deg 0% 87%);
border-radius: 4px;
&.inline {
@ -263,8 +263,8 @@
.keyboard_tip {
position: relative;
display: block;
background-color: hsl(210, 22%, 96%);
border: 1px solid hsl(210, 22%, 90%);
background-color: hsl(210deg 22% 96%);
border: 1px solid hsl(210deg 22% 90%);
border-radius: 4px;
padding: 10px;
margin: 5px 0;
@ -280,8 +280,8 @@
.tip,
.keyboard_tip {
background-color: hsl(46, 63%, 95%);
border: 1px solid hsl(46, 63%, 84%);
background-color: hsl(46deg 63% 95%);
border: 1px solid hsl(46deg 63% 84%);
}
.tip::before {
@ -306,16 +306,16 @@
border-radius: 6px;
&.grey {
border: 1px solid hsl(0, 0%, 80%);
border: 1px solid hsl(0deg 0% 80%);
}
&.grey-line {
border: 1px solid hsl(0, 0%, 80%);
border: 1px solid hsl(0deg 0% 80%);
top: 2px;
&::after {
content: "";
background: hsl(0, 0%, 80%);
background: hsl(0deg 0% 80%);
height: 1.5px;
width: 6px;
display: block;
@ -324,34 +324,34 @@
}
&.orange {
border: 1px solid hsl(29, 84%, 51%);
border: 1px solid hsl(29deg 84% 51%);
background: linear-gradient(
to bottom,
hsla(0, 0%, 100%, 0) 50%,
hsla(29, 84%, 51%, 1) 50%
hsl(0deg 0% 100% / 0%) 50%,
hsl(29deg 84% 51%) 50%
);
}
&.green {
border: 1px solid hsl(106, 74%, 44%);
background-color: hsla(106, 74%, 44%, 0.3);
border: 1px solid hsl(106deg 74% 44%);
background-color: hsl(106deg 74% 44% / 30%);
}
&.green.solid {
background-color: hsl(106, 74%, 44%);
background-color: hsl(106deg 74% 44%);
}
}
& kbd {
/* Same as kbd in app_components.css */
display: inline-block;
border: 1px solid hsl(0, 0%, 80%);
border: 1px solid hsl(0deg 0% 80%);
border-radius: 4px;
font-weight: 600;
white-space: nowrap;
background-color: hsl(0, 0%, 98%);
color: hsl(0, 0%, 20%);
text-shadow: 0 1px 0 hsl(0, 0%, 100%);
background-color: hsl(0deg 0% 98%);
color: hsl(0deg 0% 20%);
text-shadow: 0 1px 0 hsl(0deg 0% 100%);
/* Different from app_components.css */
/* Removed margin setting */
font-size: 0.85em;
@ -373,12 +373,12 @@
font-size: 0.825em;
unicode-bidi: embed;
direction: ltr;
color: hsl(0, 0%, 0%);
color: hsl(0deg 0% 0%);
border-radius: 3px;
/* Different from base rules for code elements in rendered_markdown.css */
white-space: initial;
padding: 0 4px;
background-color: hsl(0, 0%, 93%);
background-color: hsl(0deg 0% 93%);
}
& pre {
@ -409,11 +409,11 @@
cursor: pointer;
&.active {
color: hsl(176, 46%, 41%);
color: hsl(176deg 46% 41%);
margin-bottom: -1px;
border: 1px solid hsl(0, 0%, 87%);
border-bottom: 1px solid hsl(0, 0%, 100%);
border: 1px solid hsl(0deg 0% 87%);
border-bottom: 1px solid hsl(0deg 0% 100%);
border-radius: 4px 4px 0 0;
}
}
@ -426,7 +426,7 @@
.blocks {
padding: 10px;
margin-bottom: 10px;
border: 1px solid hsl(0, 0%, 87%);
border: 1px solid hsl(0deg 0% 87%);
& > div {
display: none;

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

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

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

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

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

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

124
web/styles/pygments.css
View File

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

56
web/styles/reactions.css
View File

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

42
web/styles/recent_topics.css
View File

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

88
web/styles/rendered_markdown.css
View File

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

2
web/styles/search.css
View File

@ -81,7 +81,7 @@
}
#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,

144
web/styles/settings.css
View File

@ -148,7 +148,7 @@ h3,
.user-avatar-section {
.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 {
& 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
keep the color of the icon same even when the setting is disabled. */
#id_realm_enable_spectator_access_label a {
color: hsl(0, 0%, 20%);
color: hsl(0deg 0% 20%);
}
.settings_select,
@ -369,15 +369,15 @@ td .button {
.settings_select {
padding: 4px 6px;
color: hsl(0, 0%, 33%);
color: hsl(0deg 0% 33%);
border-radius: 4px;
border: 1px solid hsl(0, 0%, 80%);
border: 1px solid hsl(0deg 0% 80%);
cursor: pointer;
background-color: hsl(0, 0%, 100%);
background-color: hsl(0deg 0% 100%);
&:disabled {
cursor: not-allowed;
background-color: hsl(0, 0%, 93%);
background-color: hsl(0deg 0% 93%);
}
}
@ -456,7 +456,7 @@ input[type="checkbox"] {
top: 2px;
&:hover {
color: hsl(0, 0%, 20%);
color: hsl(0deg 0% 20%);
cursor: pointer;
}
}
@ -483,7 +483,7 @@ input[type="checkbox"] {
.language_selection_button {
text-decoration: none;
color: hsl(0, 0%, 20%);
color: hsl(0deg 0% 20%);
.fa.fa-pencil {
margin-left: 5px;
@ -520,16 +520,16 @@ input[type="checkbox"] {
border-radius: 4px;
margin-top: 14px;
margin-left: 10px;
color: hsl(156, 30%, 50%);
color: hsl(156deg 30% 50%);
padding: 3px 10px;
&:not(:empty) {
border: 1px solid hsl(156, 30%, 50%);
border: 1px solid hsl(156deg 30% 50%);
}
&.alert-error {
color: hsl(2, 46%, 68%);
border-color: hsl(2, 46%, 68%);
color: hsl(2deg 46% 68%);
border-color: hsl(2deg 46% 68%);
}
.loading_indicator_spinner {
@ -540,7 +540,7 @@ input[type="checkbox"] {
/* make the spinner green like the text and box. */
.loading_indicator_spinner svg path {
fill: hsl(178, 100%, 40%);
fill: hsl(178deg 100% 40%);
}
.loading_indicator_text {
@ -611,10 +611,10 @@ input[type="checkbox"] {
}
.control-label-disabled {
color: hsl(0, 0%, 82%);
color: hsl(0deg 0% 82%);
&.enabled {
color: hsl(0, 0%, 20%);
color: hsl(0deg 0% 20%);
}
}
@ -665,7 +665,7 @@ input[type="checkbox"] {
white-space: nowrap;
height: 1rem;
font-style: italic;
color: hsl(0, 0%, 67%);
color: hsl(0deg 0% 67%);
}
#emoji_preview_text {
@ -704,7 +704,7 @@ input[type="checkbox"] {
cursor: move;
.fa-ellipsis-v {
color: hsl(0, 0%, 75%);
color: hsl(0deg 0% 75%);
position: relative;
top: 1px;
@ -758,11 +758,11 @@ input[type="checkbox"] {
.regenerate_bot_api_key {
position: relative;
margin-left: 5px;
color: hsl(0, 0%, 67%);
color: hsl(0deg 0% 67%);
transition: all 0.3s ease;
&:hover {
color: hsl(0, 0%, 27%);
color: hsl(0deg 0% 27%);
}
}
@ -778,23 +778,23 @@ input[type="checkbox"] {
}
.sea-green {
color: hsl(177, 70%, 46%);
color: hsl(177deg 70% 46%);
}
.blue {
color: hsl(203, 77%, 56%);
color: hsl(203deg 77% 56%);
}
.danger-red {
color: hsl(0, 56%, 73%);
color: hsl(0deg 56% 73%);
}
.copy-gold {
color: hsl(51, 90%, 50%);
color: hsl(51deg 90% 50%);
}
.purple {
color: hsl(278, 62%, 68%);
color: hsl(278deg 62% 68%);
}
}
@ -822,7 +822,7 @@ input[type="checkbox"] {
width: 50px;
border-radius: 4px;
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,
@ -852,12 +852,12 @@ input[type="checkbox"] {
.field {
text-transform: uppercase;
font-weight: 600;
color: hsl(0, 0%, 67%);
color: hsl(0deg 0% 67%);
}
}
#bots_lists_navbar .active a {
background-color: hsl(0, 0%, 98%);
background-color: hsl(0deg 0% 98%);
}
#inactive_bots_list .bot_info .reactivate_bot {
@ -955,7 +955,7 @@ input[type="checkbox"] {
}
#download_zuliprc {
color: hsl(0, 0%, 100%);
color: hsl(0deg 0% 100%);
text-decoration: none;
}
@ -992,7 +992,7 @@ input[type="checkbox"] {
}
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;
&:last-of-type {
@ -1007,7 +1007,7 @@ label.display-settings-radio-choice-label {
cursor: pointer;
&:focus {
outline: 1px dotted hsl(0, 0%, 20%);
outline: 1px dotted hsl(0deg 0% 20%);
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
@ -1120,7 +1120,7 @@ $option_title_width: 180px;
& span[contenteditable]:focus,
span[contenteditable="true"]:hover {
border-bottom: 1px solid hsl(0, 0%, 80%);
border-bottom: 1px solid hsl(0deg 0% 80%);
margin-bottom: -1px;
outline: none;
}
@ -1157,7 +1157,7 @@ $option_title_width: 180px;
display: none;
&:hover {
border-color: hsl(4, 56%, 82%);
border-color: hsl(4deg 56% 82%);
}
}
}
@ -1184,7 +1184,7 @@ $option_title_width: 180px;
.save-instructions {
display: none;
opacity: 0;
color: hsl(0, 0%, 20%);
color: hsl(0deg 0% 20%);
font-size: 0.9em;
}
}
@ -1230,14 +1230,14 @@ $option_title_width: 180px;
box-sizing: border-box;
height: $settings_header_height;
padding: 6px;
border-bottom: 1px solid hsl(0, 0%, 87%);
border-bottom: 1px solid hsl(0deg 0% 87%);
}
}
.sidebar {
height: calc(100% - $settings_header_height);
overflow-y: auto;
border-right: 1px solid hsl(0, 0%, 93%);
border-right: 1px solid hsl(0deg 0% 93%);
.header {
height: auto;
@ -1247,8 +1247,8 @@ $option_title_width: 180px;
text-align: center;
text-transform: uppercase;
background-color: hsl(180, 6%, 93%);
border-bottom: 1px solid hsl(0, 0%, 87%);
background-color: hsl(180deg 6% 93%);
border-bottom: 1px solid hsl(0deg 0% 87%);
}
& ul {
@ -1262,14 +1262,14 @@ $option_title_width: 180px;
outline: none;
cursor: pointer;
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 {
border-bottom: none;
}
&.active {
background-color: hsl(0, 0%, 93%);
background-color: hsl(0deg 0% 93%);
border-bottom: 1px solid transparent;
}
@ -1292,7 +1292,7 @@ $option_title_width: 180px;
text-align: center;
font-size: 1.4em;
color: hsl(0, 0%, 53%);
color: hsl(0deg 0% 53%);
background-size: cover;
background-repeat: no-repeat;
@ -1304,7 +1304,7 @@ $option_title_width: 180px;
margin: 14px 8px 6px;
font-size: 1em;
color: hsl(0, 0%, 62%);
color: hsl(0deg 0% 62%);
background-size: cover;
background-repeat: no-repeat;
@ -1323,7 +1323,7 @@ $option_title_width: 180px;
.settings-sticky-bar {
position: sticky;
z-index: 1;
background-color: hsl(0, 0%, 100%);
background-color: hsl(0deg 0% 100%);
top: 0;
}
}
@ -1333,7 +1333,7 @@ $option_title_width: 180px;
&.mobile {
display: none;
border-bottom: 1px solid hsl(0, 0%, 87%);
border-bottom: 1px solid hsl(0deg 0% 87%);
.fa-chevron-left {
float: left;
@ -1356,7 +1356,7 @@ $option_title_width: 180px;
position: absolute;
top: 10px;
right: 10px;
color: hsl(0, 0%, 67%);
color: hsl(0deg 0% 67%);
cursor: pointer;
}
@ -1383,7 +1383,7 @@ $option_title_width: 180px;
width: 100%;
height: $settings_header_height;
box-sizing: border-box;
border-bottom: 1px solid hsl(0, 0%, 87%);
border-bottom: 1px solid hsl(0deg 0% 87%);
& h1 .section {
font-weight: 400;
@ -1400,7 +1400,7 @@ $option_title_width: 180px;
float: left;
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;
.field_hint {
color: hsl(0, 0%, 67%);
color: hsl(0deg 0% 67%);
}
& textarea {
@ -1477,7 +1477,7 @@ $option_title_width: 180px;
position: relative;
top: 2px;
padding-left: 5px;
color: hsl(0, 0%, 58%);
color: hsl(0deg 0% 58%);
font-weight: lighter;
}
@ -1551,17 +1551,17 @@ $option_title_width: 180px;
clear: both;
font-weight: normal;
line-height: 20px;
color: hsl(0, 0%, 20%);
color: hsl(0deg 0% 20%);
white-space: nowrap;
&:hover {
color: hsl(0, 0%, 100%);
color: hsl(0deg 0% 100%);
text-decoration: none;
background-color: hsl(200, 100%, 38%);
background-color: hsl(200deg 100% 38%);
background-image: linear-gradient(
to bottom,
hsl(200, 100%, 40%),
hsl(200, 100%, 35%)
hsl(200deg 100% 40%),
hsl(200deg 100% 35%)
);
}
}
@ -1569,7 +1569,7 @@ $option_title_width: 180px;
}
.subsection-failed-status p {
background-color: hsl(0, 43%, 91%);
background-color: hsl(0deg 43% 91%);
padding: 2px 6px;
border-radius: 4px;
margin: 0 0 0 5px;
@ -1594,7 +1594,7 @@ $option_title_width: 180px;
display: block;
font-style: italic;
color: hsl(0, 0%, 67%);
color: hsl(0deg 0% 67%);
}
&.thick:empty::after {
@ -1616,7 +1616,7 @@ $option_title_width: 180px;
@supports (-moz-appearance: none) {
#settings_page select {
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;
padding-right: 20px;
}
@ -1653,15 +1653,15 @@ $option_title_width: 180px;
padding: 2px 6px;
min-height: 24px;
max-width: 206px;
background-color: hsl(0, 0%, 100%);
background-color: hsl(0deg 0% 100%);
&:focus-within {
border-color: hsla(206, 80%, 62%, 0.8);
border-color: hsl(206deg 80% 62% / 80%);
outline: 0;
outline: 1px dotted \9;
box-shadow: inset 0 1px 1px hsla(0, 0%, 0%, 0.075),
0 0 8px hsla(206, 80%, 62%, 0.6);
box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%),
0 0 8px hsl(206deg 80% 62% / 60%);
}
}
}
@ -1682,11 +1682,11 @@ $option_title_width: 180px;
.collapse-settings-btn {
margin: 10px 0 0 10px;
color: hsl(200, 100%, 40%);
color: hsl(200deg 100% 40%);
&:hover {
cursor: pointer;
color: hsl(208, 56%, 38%);
color: hsl(208deg 56% 38%);
}
}
@ -1700,27 +1700,27 @@ $option_title_width: 180px;
}
.settings_textarea {
color: hsl(0, 0%, 33%);
background-color: hsl(0, 0%, 100%);
color: hsl(0deg 0% 33%);
background-color: hsl(0deg 0% 100%);
border-radius: 4px;
vertical-align: middle;
border: 1px solid hsl(0, 0%, 80%);
border: 1px solid hsl(0deg 0% 80%);
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;
&:focus {
border-color: hsla(206.5, 80%, 62%, 0.8);
border-color: hsl(206.5deg 80% 62% / 80%);
outline: 0;
box-shadow: inset 0 1px 1px hsla(0, 0%, 0%, 0.075),
0 0 8px hsla(206.5, 80%, 62%, 0.6);
box-shadow: inset 0 1px 1px hsl(0deg 0% 0% / 7.5%),
0 0 8px hsl(206.5deg 80% 62% / 60%);
}
&:disabled {
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 {
/* Don't highlight the active section in the settings list. */
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;
padding: 10px;
font-size: 0.85rem;
background-color: hsl(0, 0%, 98%);
border: 1px solid hsl(0, 0%, 87%);
background-color: hsl(0deg 0% 98%);
border: 1px solid hsl(0deg 0% 87%);
border-radius: 4px;
}
.sp-preview {
width: 20px;
border: none;
box-shadow: 0 0 1px hsla(0, 0%, 0%, 1);
box-shadow: 0 0 1px hsl(0deg 0% 0%);
}
.sp-replacer {
margin-right: 12px;
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 {
@ -51,7 +51,7 @@
.muted-sub,
.control-label-disabled {
color: hsl(0, 0%, 64%);
color: hsl(0deg 0% 64%);
}
.sub_setting_checkbox .muted-sub label,
@ -79,15 +79,15 @@
font-weight: 500;
position: relative;
top: 2px;
border: 1px solid hsl(0, 0%, 80%);
border: 1px solid hsl(0deg 0% 80%);
border-radius: 5px;
background-color: hsl(0, 0%, 100%);
color: hsl(0, 0%, 0%);
background-color: hsl(0deg 0% 100%);
color: hsl(0deg 0% 0%);
margin: 0 0 0 5px;
height: 27px;
&:hover {
border: 1px solid hsl(0, 0%, 47%);
border: 1px solid hsl(0deg 0% 47%);
}
& span {
@ -111,7 +111,7 @@
.stream_creation_error {
display: none;
margin-left: 2px;
color: hsl(0, 100%, 50%);
color: hsl(0deg 100% 50%);
}
/* TODO: Unify with settings.css definition */
@ -134,8 +134,8 @@ h4.user_group_setting_subsection_title {
.member-list-box,
.subscriber-list-box {
text-align: center;
border-left: 1px solid hsl(0, 0%, 87%);
border-right: 1px solid hsl(0, 0%, 87%);
border-left: 1px solid hsl(0deg 0% 87%);
border-right: 1px solid hsl(0deg 0% 87%);
border-radius: 4px;
.member_list_container,
@ -162,7 +162,7 @@ h4.user_group_setting_subsection_title {
}
& tr {
border-bottom: 1px solid hsl(0, 0%, 93%);
border-bottom: 1px solid hsl(0deg 0% 93%);
& td,
th {
@ -184,7 +184,7 @@ h4.user_group_setting_subsection_title {
content: "No subscribers to this stream.";
display: block;
color: hsl(0, 0%, 67%);
color: hsl(0deg 0% 67%);
padding: 5px 5px 5px 10px;
}
@ -272,7 +272,7 @@ h4.user_group_setting_subsection_title {
position: relative;
transform: translate(-50px, 0);
opacity: 0;
color: hsl(0, 0%, 67%);
color: hsl(0deg 0% 67%);
float: left;
padding: 2px 10px;
@ -312,7 +312,7 @@ h4.user_group_setting_subsection_title {
text-align: center;
text-transform: uppercase;
font-weight: 700;
border-bottom: 1px solid hsl(0, 0%, 87%);
border-bottom: 1px solid hsl(0deg 0% 87%);
.fa-chevron-left {
display: none;
@ -330,7 +330,7 @@ h4.user_group_setting_subsection_title {
position: absolute;
top: 10px;
right: 10px;
color: hsl(0, 0%, 67%);
color: hsl(0deg 0% 67%);
cursor: pointer;
}
}
@ -356,11 +356,11 @@ h4.user_group_setting_subsection_title {
}
.left {
border-right: 1px solid hsl(0, 0%, 87%);
border-right: 1px solid hsl(0deg 0% 87%);
.search-container {
padding: 6px 8px;
border-bottom: 1px solid hsl(0, 0%, 87%);
border-bottom: 1px solid hsl(0deg 0% 87%);
display: flex;
justify-content: space-between;
}
@ -378,7 +378,7 @@ h4.user_group_setting_subsection_title {
margin-right: 2em;
& span {
color: hsl(0, 0%, 67%);
color: hsl(0deg 0% 67%);
}
& button {
@ -392,7 +392,7 @@ h4.user_group_setting_subsection_title {
padding: 2px;
text-align: center;
font-weight: 600;
border-bottom: 1px solid hsl(0, 0%, 87%);
border-bottom: 1px solid hsl(0deg 0% 87%);
&.preview::after {
content: "Preview";
@ -426,11 +426,11 @@ h4.user_group_setting_subsection_title {
}
& input[type="text"].small {
border: 1px solid hsl(0, 0%, 80%);
border: 1px solid hsl(0deg 0% 80%);
border-radius: 4px;
padding: 3px;
outline: none;
color: hsl(0, 0%, 27%);
color: hsl(0deg 0% 27%);
text-align: center;
&:focus {
@ -467,7 +467,7 @@ h4.user_group_setting_subsection_title {
justify-content: center;
margin-bottom: 0;
height: auto;
border-bottom: 1px solid hsl(0, 0%, 87%);
border-bottom: 1px solid hsl(0deg 0% 87%);
}
.user-groups-list,
@ -517,7 +517,7 @@ h4.user_group_setting_subsection_title {
.stream-row,
.group-row {
padding: 15px 10px 11px;
border-bottom: 1px solid hsl(0, 0%, 93%);
border-bottom: 1px solid hsl(0deg 0% 93%);
cursor: pointer;
.check {
@ -557,13 +557,13 @@ h4.user_group_setting_subsection_title {
}
.loading_indicator_spinner svg path {
fill: hsl(178, 100%, 40%);
fill: hsl(178deg 100% 40%);
}
}
}
.checked svg {
fill: hsl(170, 48%, 54%);
fill: hsl(170deg 48% 54%);
}
.icon {
@ -571,9 +571,9 @@ h4.user_group_setting_subsection_title {
height: 35px;
margin-right: 8px;
margin-top: 4px;
background-color: hsl(300, 100%, 25%);
background-color: hsl(300deg 100% 25%);
border-radius: 4px;
color: hsl(0, 0%, 100%);
color: hsl(0deg 0% 100%);
.symbol {
font-weight: 600;
@ -613,7 +613,7 @@ h4.user_group_setting_subsection_title {
.top-bar .subscriber-count,
.bottom-bar .stream-message-count {
white-space: nowrap;
color: hsl(0, 0%, 67%);
color: hsl(0deg 0% 67%);
}
.top-bar .subscriber-count-text,
@ -644,7 +644,7 @@ h4.user_group_setting_subsection_title {
}
&.active {
background-color: hsl(0, 0%, 93%);
background-color: hsl(0deg 0% 93%);
}
> div {
@ -654,12 +654,12 @@ h4.user_group_setting_subsection_title {
&: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,
&.active .check:not(.checked):hover svg {
fill: hsl(0, 0%, 72%);
fill: hsl(0deg 0% 72%);
}
&::selection,
@ -672,7 +672,7 @@ h4.user_group_setting_subsection_title {
.group-row .group-info-box .description:empty::after {
content: attr(data-no-description);
font-style: italic;
color: hsl(0, 0%, 67%);
color: hsl(0deg 0% 67%);
}
#groups_overlay,
@ -736,7 +736,7 @@ h4.user_group_setting_subsection_title {
display: flex !important;
justify-content: center;
align-items: center;
background-color: hsla(0, 0%, 100%, 0.9);
background-color: hsl(0deg 0% 100% / 90%);
z-index: 1;
}
@ -814,11 +814,11 @@ h4.user_group_setting_subsection_title {
}
.subscribe-button.unsubscribed {
color: hsl(156, 39%, 54%);
border-color: hsl(156, 39%, 77%);
color: hsl(156deg 39% 54%);
border-color: hsl(156deg 39% 77%);
&: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 {
font-style: italic;
color: hsl(0, 0%, 67%);
color: hsl(0deg 0% 67%);
}
}
.checkmark {
display: none;
margin-left: 5px;
color: hsl(0, 0%, 67%);
color: hsl(0deg 0% 67%);
cursor: pointer;
@ -937,7 +937,7 @@ h4.user_group_setting_subsection_title {
}
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;
padding: 2px 0;
@ -957,7 +957,7 @@ div.settings-radio-input-parent {
margin: 3.5px 0 1px;
&:focus {
outline: 1px dotted hsl(0, 0%, 20%);
outline: 1px dotted hsl(0deg 0% 20%);
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
@ -1091,7 +1091,7 @@ div.settings-radio-input-parent {
left: 101%;
top: 45px;
background-color: hsl(0, 0%, 98%);
background-color: hsl(0deg 0% 98%);
border-top: none;
transition: all 0.3s ease;

16
web/styles/tooltips.css
View File

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

2
web/styles/typing_notifications.css
View File

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

12
web/styles/user_circles.css
View File

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

4
web/styles/user_status.css
View File

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

52
web/styles/widgets.css
View File

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