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

css: Convert colors from rgba to hsla format.

This commit is contained in:
Aman Agrawal 2019-06-19 08:23:16 +05:30 committed by Tim Abbott
parent 3e589cf65e
commit 904422d8bc
15 changed files with 51 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend_tests/node_tests/copy_and_paste.js
View File

@ -39,7 +39,7 @@ run_test('paste_handler', () => {
assert.equal(copy_and_paste.paste_handler_converter(input),
'love the **Zulip****Organization**.');
input = '<meta http-equiv="content-type" content="text/html; charset=utf-8"><span style="color: hsl(210, 12%, 16%); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: hsl(0, 0%, 100%); text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">The<span> </span></span><code style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, &quot;Liberation Mono&quot;, Menlo, Courier, monospace; font-size: 13.6px; padding: 0.2em 0.4em; margin: 0px; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px; color: hsl(210, 12%, 16%); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">JSDOM</code><span style="color: hsl(210, 12%, 16%); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: hsl(0, 0%, 100%); text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;"><span> </span>constructor</span>';
input = '<meta http-equiv="content-type" content="text/html; charset=utf-8"><span style="color: hsl(210, 12%, 16%); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: hsl(0, 0%, 100%); text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">The<span> </span></span><code style="box-sizing: border-box; font-family: SFMono-Regular, Consolas, &quot;Liberation Mono&quot;, Menlo, Courier, monospace; font-size: 13.6px; padding: 0.2em 0.4em; margin: 0px; background-color: hsla(210, 13%, 12%, 0.05); border-radius: 3px; color: hsl(210, 12%, 16%); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">JSDOM</code><span style="color: hsl(210, 12%, 16%); font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Helvetica, Arial, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: hsl(0, 0%, 100%); text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;"><span> </span>constructor</span>';
assert.equal(copy_and_paste.paste_handler_converter(input),
'The `JSDOM` constructor');

2
static/styles/components.scss
View File

@ -71,7 +71,7 @@ a.no-underline:hover {
.simplebar-track {
.simplebar-scrollbar::before {
background-color: hsl(0, 0%, 0%);
box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.33);
box-shadow: 0px 0px 0px 1px hsla(0, 0%, 100%, 0.33);
}
&.simplebar-vertical {

2
static/styles/hotspots.scss
View File

@ -246,7 +246,7 @@
.hotspot-inline {
width: 350px;
max-width: 95%;
box-shadow: 0 5px 10px rgba(133, 136, 142, 0.1);
box-shadow: 0 5px 10px hsla(220, 4%, 54%, 0.1);
border-radius: 4px;
background-color: hsl(0, 0%, 98%);
margin: 0 auto;

2
static/styles/lightbox.scss
View File

@ -89,7 +89,7 @@
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.6);
border: 1px solid hsla(0, 0%, 100%, 0.6);
text-align: center;
color: hsl(0, 0%, 100%);

4
static/styles/night_mode.scss
View File

@ -513,7 +513,7 @@ on a dark background, and don't change the dark labels dark either. */
}
.history-limited-box {
background-color: rgba(0, 0, 0, 0.2);
background-color: hsla(0, 0%, 0%, 0.2);
}
#feedback_container,
@ -576,7 +576,7 @@ on a dark background, and don't change the dark labels dark either. */
.simplebar-track .simplebar-scrollbar::before {
background-color: hsl(0, 0%, 100%);
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.33);
box-shadow: 0px 0px 0px 1px hsla(0, 0%, 0%, 0.33);
}
.collapse-settings-btn:hover {

2
static/styles/popovers.scss
View File

@ -314,7 +314,7 @@ ul.remind_me_popover .remind_icon {
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.7);
background-color: hsla(0, 0%, 0%, 0.7);
z-index: 103;

4
static/styles/portico/billing.scss
View File

@ -121,7 +121,7 @@
color: hsl(0, 0%, 100%);
background-color: hsl(185, 38%, 55%);
background: linear-gradient(145deg, hsl(191, 56%, 55%), hsl(169, 65%, 42%));
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0px 3px 10px hsla(0, 0%, 0%, 0.2);
border: 0;
height: 40px;
margin: 5px 0 0 0;
@ -137,7 +137,7 @@
.stripe-button-el:hover {
background-color: hsl(169, 65%, 42%);
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
box-shadow: 0px 3px 10px hsla(0, 0%, 0%, 0.3);
}
.stripe-button-el:active,

6
static/styles/portico/integrations.scss
View File

@ -88,9 +88,9 @@
}
.portico-landing.integrations .searchbar input {
-webkit-box-shadow: 0px 0px 7px 2px rgba(0, 0, 0, 0.03);
-moz-box-shadow: 0px 0px 7px 2px rgba(0, 0, 0, 0.03);
box-shadow: 0px 0px 7px 2px rgba(0, 0, 0, 0.03);
-webkit-box-shadow: 0px 0px 7px 2px hsla(0, 0%, 0%, 0.03);
-moz-box-shadow: 0px 0px 7px 2px hsla(0, 0%, 0%, 0.03);
box-shadow: 0px 0px 7px 2px hsla(0, 0%, 0%, 0.03);
font-size: 1em;
font-family: inherit;

2
static/styles/portico/integrations_dev_panel.css
View File

@ -28,7 +28,7 @@ button {
padding-left: 10px;
padding-right: 10px;
background-color: hsl(173, 100%, 98%);
box-shadow: 8px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
box-shadow: 8px 4px 8px 0 hsla(0, 0%, 0%, 0.2), 0 6px 20px 0 hsla(0, 0%, 0%, 0.19);
}
#fixture_body {

52
static/styles/portico/landing-page.scss
View File

@ -461,7 +461,7 @@ nav ul li.active::after {
.portico-landing.features-app section.hero .image {
height: 400px;
width: 40%;
background-color: rgba(0, 0, 0, 0.05);
background-color: hsla(0, 0%, 0%, 0.05);
}
.portico-landing.features-app section.keyboard-shortcuts {
@ -553,7 +553,7 @@ nav ul li.active::after {
background-color: hsl(0, 0%, 100%);
border-radius: 10px;
box-shadow: 10px 20px 80px rgba(0, 0, 0, 0.15);
box-shadow: 10px 20px 80px hsla(0, 0%, 0%, 0.15);
}
.portico-landing.features-app section.notifications .envelope {
@ -621,7 +621,7 @@ nav ul li.active::after {
width: 400px;
height: 280px;
background: linear-gradient(135deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.2));
background: linear-gradient(135deg, hsla(0, 0%, 0%, 0.05), hsla(0, 0%, 0%, 0.2));
border-radius: 4px;
background-image: url(/static/images/landing-page/notifications.jpg);
@ -702,7 +702,7 @@ nav ul li.active::after {
}
.portico-landing.hello .gradients .gradient.dark-blue {
background: linear-gradient(10deg, rgba(15, 46, 57, 0) 50%, rgba(15, 46, 57, 0.7));
background: linear-gradient(10deg, hsla(196, 58%, 14%, 0) 50%, hsla(196, 58%, 14%, 0.7));
}
.portico-landing.hello .gradients .gradient.green {
@ -818,7 +818,7 @@ nav ul li.active::after {
font-size: 3em;
font-weight: 400;
text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.2);
text-shadow: 0px 0px 20px hsla(0, 0%, 100%, 0.2);
}
.portico-landing.hello .hero header p {
@ -827,7 +827,7 @@ nav ul li.active::after {
font-size: 1.5em;
font-weight: 300;
line-height: 1.4;
text-shadow: 0px 0px 5px rgba(10, 66, 51, 0.3), 0px 0px 20px rgba(255, 255, 255, 0.2);
text-shadow: 0px 0px 5px hsla(164, 74%, 15%, 0.3), 0px 0px 20px hsla(0, 0%, 100%, 0.2);
}
.portico-landing.hello .hero header a {
@ -847,17 +847,17 @@ nav ul li.active::after {
font-weight: 500;
color: hsl(148, 23%, 51%);
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0px 3px 10px hsla(0, 0%, 0%, 0.2);
transition: all 0.2s ease;
}
.portico-landing.hello .hero header button:hover {
box-shadow: 0px 3px 10px rgba(255, 255, 255, 0.2);
box-shadow: 0px 3px 10px hsla(0, 0%, 100%, 0.2);
}
.portico-landing.hello .hero header button:active {
box-shadow: 0px 3px 20px rgba(255, 255, 255, 0.5);
box-shadow: 0px 3px 20px hsla(0, 0%, 100%, 0.5);
}
.portico-landing.hello .hero header .download-button {
@ -1361,10 +1361,10 @@ nav ul li.active::after {
height: 520px;
margin: 20px auto;
padding: 30px 20px;
background-color: rgba(246, 247, 249, 0.6);
background: linear-gradient(rgba(246, 247, 249, 0.4), rgba(246, 247, 249, 0.9));
background-color: hsla(220, 20%, 97%, 0.6);
background: linear-gradient(hsla(220, 20%, 97%, 0.4), hsla(220, 20%, 97%, 0.9));
border-radius: 12px;
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.02);
box-shadow: 0px 3px 10px hsla(0, 0%, 0%, 0.02);
position: relative;
}
@ -1375,7 +1375,7 @@ nav ul li.active::after {
color: hsl(0, 0%, 100%);
background-color: hsl(185, 38%, 55%);
background: linear-gradient(145deg, hsl(191, 56%, 55%), hsl(169, 65%, 42%));
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
box-shadow: 0px 3px 10px hsla(0, 0%, 0%, 0.3);
border: 0;
position: absolute;
left: 50%;
@ -1389,7 +1389,7 @@ nav ul li.active::after {
.tour .carousel-inner .start-button:hover {
background-color: hsl(169, 65%, 42%);
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
box-shadow: 0px 3px 10px hsla(0, 0%, 0%, 0.3);
}
.tour .carousel-inner .start-image {
@ -1549,13 +1549,13 @@ nav ul li.active::after {
background-color: hsl(185, 38%, 55%);
background: linear-gradient(145deg, hsl(191, 56%, 55%), hsl(169, 65%, 42%));
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0px 3px 10px hsla(0, 0%, 0%, 0.2);
border: 0;
}
.tour .carousel-inner button.call-to-action:hover {
background-color: hsl(169, 65%, 42%);
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
box-shadow: 0px 3px 10px hsla(0, 0%, 0%, 0.3);
}
.tour .carousel-control {
@ -1716,7 +1716,7 @@ nav ul li.active::after {
width: 60%;
margin: 0 auto;
border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
border-bottom: 1px solid hsla(0, 0%, 100%, 0.2);
}
.portico-landing .testimonials .company-container {
@ -2103,7 +2103,7 @@ nav ul li.active::after {
}
.portico-landing.apps .hero .info .cta {
text-shadow: 0px 0px 60px rgba(0, 0, 0, 0.3);
text-shadow: 0px 0px 60px hsla(0, 0%, 0%, 0.3);
max-width: 600px;
}
@ -2346,7 +2346,7 @@ nav ul li.active::after {
top: 0;
left: 0;
background-color: rgba(15, 24, 48, 0.7);
background-color: hsla(224, 52%, 12%, 0.7);
z-index: 0;
}
@ -2501,7 +2501,7 @@ nav ul li.active::after {
}
.gradients .gradient.dark-blue {
background: linear-gradient(10deg, rgba(15, 46, 57, 0) 50%, rgba(15, 46, 57, 0.7));
background: linear-gradient(10deg, hsla(196, 58%, 14%, 0) 50%, hsla(196, 58%, 14%, 0.7));
}
.gradients .gradient.green {
@ -2571,7 +2571,7 @@ nav ul li.active::after {
width: 300px;
height: 500px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 10px hsla(0, 0%, 0%, 0.1);
text-align: left;
@ -2741,7 +2741,7 @@ nav ul li.active::after {
.pricing-overlay.pricing-model.active {
opacity: 1;
pointer-events: all;
background-color: rgba(0, 0, 0, 0.6);
background-color: hsla(0, 0%, 0%, 0.6);
}
.pricing-overlay.pricing-model .price-box {
@ -2842,15 +2842,15 @@ nav ul li.active::after {
@keyframes box-shadow-pulse {
0% {
box-shadow: 0px 0px 0px rgba(106, 201, 185, 0);
box-shadow: 0px 0px 0px hsla(170, 47%, 60%, 1);
}
50% {
box-shadow: 0px 0px 25px rgba(106, 201, 185, 0.8);
box-shadow: 0px 0px 25px hsla(170, 47%, 60%, 0.8);
}
100% {
box-shadow: 0px 0px 0px rgba(106, 201, 185, 0);
box-shadow: 0px 0px 0px hsla(170, 47%, 60%, 1);
}
}
@ -3491,7 +3491,7 @@ nav ul li.active::after {
}
nav .content > ul.show {
outline-color: rgba(32, 62, 80, 0.7);
outline-color: hsla(203, 43%, 22%, 0.7);
}
nav ul .exit {

10
static/styles/portico/portico.scss
View File

@ -52,7 +52,7 @@ body {
height: 29px;
background-color: hsl(0, 0%, 100%);
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 4px hsla(0, 0%, 0%, 0.1);
z-index: 100;
}
@ -183,7 +183,7 @@ body {
.app.help {
display: inline-flex;
box-shadow: 0px -20px 50px rgba(0, 0, 0, 0.04);
box-shadow: 0px -20px 50px hsla(0, 0%, 0%, 0.04);
overflow: auto;
color: hsl(0, 0%, 27%);
@ -776,7 +776,7 @@ input.text-error {
border-radius: 4px;
border: 1px solid hsl(0, 0%, 87%);
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
box-shadow: 0px 2px 5px hsla(0, 0%, 0%, 0.1);
}
.portico-header .dropdown.show ul {
@ -835,7 +835,7 @@ input.text-error {
}
.portico-header .dropdown-pill {
border: 1px solid rgba(0, 0, 0, 0.2);
border: 1px solid hsla(0, 0%, 0%, 0.2);
border-radius: 4px;
margin-left: 10px;
font-weight: 400;
@ -928,7 +928,7 @@ a.bottom-signup-button {
.table.table-striped {
background-color: hsl(0, 0%, 100%);
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 4px hsla(0, 0%, 0%, 0.1);
}
.team-profiles {

8
static/styles/settings.scss
View File

@ -1907,13 +1907,13 @@ thead .actions {
}
.custom_user_field .pill-container:focus-within {
border-color: rgba(82, 168, 236, 0.8);
border-color: hsla(206, 80%, 62%, 0.8);
outline: 0;
outline: 1px dotted \9;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-webkit-box-shadow: inset 0 1px 1px hsla(0, 0%, 0%, 0.075), 0 0 8px hsla(206, 80%, 62%, 0.6);
-moz-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 hsla(0, 0%, 0%, 0.075), 0 0 8px hsla(206, 80%, 62%, 0.6);
}
#get_api_key_button {

2
static/styles/zulip.scss
View File

@ -1579,7 +1579,7 @@ a:hover code {
height: 80px;
padding: 5px;
z-index: 1;
text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
text-shadow: hsla(0, 0%, 0%, 0.01) 0 0 1px;
.message_embed_title {
padding-top: 0px;

2
static/templates/group_pms.handlebars
View File

@ -3,7 +3,7 @@
<li data-user-ids="{{user_ids_string}}" class="group-pms-sidebar-entry narrow-filter">
<div class="selectable_sidebar_block">
{{#if fraction_present}}
<span class="user_circle_fraction" style="background:rgba(68,194,29,{{fraction_present}});"></span>
<span class="user_circle_fraction" style="background:hsla(106, 74%, 44%, {{fraction_present}});"></span>
{{else}}
<span class="user_circle_fraction" style="background:none; border-color:hsl(0, 0%, 50%);"></span>
{{/if}}

2
static/templates/sidebar_private_message_list.handlebars
View File

@ -6,7 +6,7 @@
<div class="pm_left_col">
{{#if is_group}}
{{#if fraction_present}}
<span class="{{user_circle_class}} user_circle" style="background:rgba(68,194,29,{{fraction_present}});"></span>
<span class="{{user_circle_class}} user_circle" style="background:hsla(106, 74%, 44%, {{fraction_present}});"></span>
{{else}}
<span class="{{user_circle_class}} user_circle" style="background:none; border-color:hsl(0, 0%, 50%);"></span>
{{/if}}