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

hotspots: Change styling of intro to reply hotspot. 

Updated the styling so that it looks like other hotspots.
This commit is contained in:
Akash Nimare 2018-10-01 21:35:47 +05:30 committed by Tim Abbott
parent b27201056c
commit 138cef0906
3 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
static/styles/hotspots.scss
View File

@ -248,18 +248,22 @@
width: 350px;
max-width: 95%;
box-shadow: 0 5px 10px rgba(133, 136, 142, 0.1);
border: 1px solid #f2f2f2;
border-radius: 4px;
background: #f9f9f9;
margin: 0 auto;
position: relative;
}
.hotspot-inline-top {
height: 10px;
.hotspot-inline-top .hotspot-title {
background: #00b08d;
margin: 0;
color: hsl(0, 0%, 100%);
font-weight: 600;
line-height: 24px;
padding: 5px 13px;
font-size: 1.15em;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
background-color: #43ad90;
}
.hotspot-inline-left {
@ -276,6 +280,7 @@
#hotspot_intro_reply_icon {
position: relative;
background: hsl(0, 0%, 100%);
top: 50%;
transform: perspective(1px) translateY(-75%);
}

4
static/styles/night_mode.scss
View File

@ -402,7 +402,8 @@ on a dark background, and don't change the dark labels dark either. */
}
/* Popover: */
.hotspot.overlay .hotspot-popover {
.hotspot.overlay .hotspot-popover,
#hotspot_intro_reply_icon {
border-color: hsla(0, 0%, 0%, 0.2) !important;
/* Based on the `.hotspot-popover` shadow in `hotspots.css`, but with a new
color. */
@ -444,6 +445,7 @@ on a dark background, and don't change the dark labels dark either. */
/* Content: */
.hotspot.overlay .hotspot-popover .hotspot-popover-content,
#hotspot_intro_reply_icon,
.hotspot.overlay .hotspot-popover .hotspot-popover-bottom {
background-color: hsl(212, 28%, 18%);
}

2
static/templates/intro_reply_hotspot.handlebars
View File

@ -1,5 +1,5 @@
<div class="hotspot-inline trailing_bookend bookend hotspot-message" id="hotspot_intro_reply_icon">
<div class="hotspot-inline-top"></div>
<div class="hotspot-inline-top"><h1 class="hotspot-title">Send a reply</h1></div>
<div class="hotspot-inline-left">
<img class="hotspot-img" alt="" src="/static/images/hotspots/whale.svg">
</div>