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

252 lines
4.8 KiB
SCSS
Raw Normal View History

hotspots: Style hotspots.
2017-07-14 03:16:50 +02:00
/* icon */
.hotspot-icon {
position: fixed;
cursor: pointer;
hotspots: Decrease default hotspot icon z-index to 100. This keeps hotspot icons positioned at the front of the message viewport but behind sidebars (i.e. the left sidebar has a z-index of 103). Hotspots associated with elements outside of the message viewport should be individually adjusted at the bottom of hotspots.css.
2017-08-02 03:13:31 +02:00
z-index: 100;
hotspots: Style hotspots.
2017-07-14 03:16:50 +02:00
}
.hotspot-icon .dot {
width: 25px;
height: 25px;
margin: -12.5px 0 0 -12.5px;
border-radius: 50%;
position: absolute;
background: hsla(196, 100%, 82%, 0.3);
border: 2px solid hsl(215, 47%, 50%);
top: 50%;
left: 50%;
}
.hotspot-icon .pulse {
width: 25px;
height: 25px;
margin: -11.5px 0 0 -11.5px;
position: absolute;
top: 50%;
left: 50%;
css: Convert colors to hsl() format. This changes most of the app-related CSS files, but leaves things like landing pages and bootstrap alone.
2017-11-13 16:34:06 +01:00
background: hsl(0, 0%, 100%);
hotspots: Style hotspots.
2017-07-14 03:16:50 +02:00
border-radius: 50%;
border: 1px solid hsl(205, 100%, 70%);
animation: pulsate 1.5s ease-out;
animation-iteration-count: infinite;
}
@keyframes pulsate {
0% {
-webkit-transform: scale(1.0, 1.0);
opacity: 0.8;
}
100% {
-webkit-transform: scale(2.2, 2.2);
opacity: 0.0;
}
}
onboarding: Add bouncing ? next to hotspots. Fixes #8124. Adds bouncing question mark with twice the frequency of the pulse.
2018-02-28 23:22:02 +01:00
.hotspot-icon .bounce {
-moz-animation: bounce 0.75s infinite;
-webkit-animation: bounce 0.75s infinite;
animation: bounce 0.75s infinite;
}
.hotspot-icon .bounce .bounce-icon {
position: absolute;
left: -5px;
bottom: 3px;
transform: rotate(7deg);
color: hsl(215, 47%, 50%);
font-size: 2.75em;
font-weight: 600;
}
@keyframes bounce {
0%, 100% {
-webkit-transform: translateY(0px);
}
50% {
-webkit-transform: translateY(4px);
}
}
hotspots: Style hotspots.
2017-07-14 03:16:50 +02:00
/* popover */
.hotspot.overlay {
z-index: 104;
hotspots.css: Change overlay color.
2017-08-31 05:33:36 +02:00
background-color: hsla(191, 7%, 20%, 0.15);
Fix up the hostpot styling. This changes the box shadow to be less bold than currently, makes the button target larger, the text larger, and the hotspots anti-aliased.
2017-09-28 00:36:35 +02:00
-webkit-font-smoothing: antialiased;
hotspots: Style hotspots.
2017-07-14 03:16:50 +02:00
}
.hotspot.overlay .hotspot-popover {
position: fixed;
width: 250px;
text-align: left;
css: Convert colors to hsl() format. This changes most of the app-related CSS files, but leaves things like landing pages and bootstrap alone.
2017-11-13 16:34:06 +01:00
box-shadow: 0 5px 10px hsla(223, 4%, 54%, 0.2);
hotspots: Style hotspots.
2017-07-14 03:16:50 +02:00
border: 1px solid hsl(0, 0%, 80%);
border-radius: 4px;
}
.hotspot.overlay .hotspot-popover-top {
padding: 0 15px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
background-color: hsl(164, 44%, 47%);
}
.hotspot.overlay .hotspot-title {
margin: 0;
font-size: 1.15em;
font-weight: 600;
css: Convert colors to hsl() format. This changes most of the app-related CSS files, but leaves things like landing pages and bootstrap alone.
2017-11-13 16:34:06 +01:00
color: hsl(0, 0%, 100%);
hotspots: Style hotspots.
2017-07-14 03:16:50 +02:00
}
hotspots: Add friendly whale illustration to popover.
2017-08-02 02:25:52 +02:00
.hotspot.overlay .hotspot-popover-content {
css: Convert colors to hsl() format. This changes most of the app-related CSS files, but leaves things like landing pages and bootstrap alone.
2017-11-13 16:34:06 +01:00
background-color: hsl(0, 0%, 100%);
hotspots: Style hotspots.
2017-07-14 03:16:50 +02:00
padding: 15px;
hotspots: Add friendly whale illustration to popover.
2017-08-02 02:25:52 +02:00
}
.hotspot.overlay .hotspot-popover-bottom {
css: Convert colors to hsl() format. This changes most of the app-related CSS files, but leaves things like landing pages and bootstrap alone.
2017-11-13 16:34:06 +01:00
background-color: hsl(0, 0%, 100%);
hotspots: Add friendly whale illustration to popover.
2017-08-02 02:25:52 +02:00
height: 90px;
hotspots: Style hotspots.
2017-07-14 03:16:50 +02:00
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
hotspots: Add friendly whale illustration to popover.
2017-08-02 02:25:52 +02:00
.hotspot.overlay .hotspot-img {
hotspots: Style hotspots.
2017-07-14 03:16:50 +02:00
position: absolute;
hotspots: Add friendly whale illustration to popover.
2017-08-02 02:25:52 +02:00
bottom: 10px;
left: 4px;
height: 83px;
}
.hotspot.overlay .hotspot-confirm {
position: absolute;
bottom: 15px;
right: 15px;
hotspots: Fix resizing of ``Got It!`` box. This dynamically resizes the box to fit the variable text size present with different languages. At the same time, it adds padding to the English version to make it look similar to previous versions. Fixes #8275.
2018-02-14 07:36:01 +01:00
max-width: 125px;
max-height: 70px;
Fix up the hostpot styling. This changes the box shadow to be less bold than currently, makes the button target larger, the text larger, and the hotspots anti-aliased.
2017-09-28 00:36:35 +02:00
border: none;
font-size: 1.15em;
font-weight: 600;
css: Convert colors to hsl() format. This changes most of the app-related CSS files, but leaves things like landing pages and bootstrap alone.
2017-11-13 16:34:06 +01:00
color: hsl(0, 0%, 100%);
Fix up the hostpot styling. This changes the box shadow to be less bold than currently, makes the button target larger, the text larger, and the hotspots anti-aliased.
2017-09-28 00:36:35 +02:00
background-color: hsl(164, 44%, 47%);
border-radius: 4px;
hotspots: Fix resizing of ``Got It!`` box. This dynamically resizes the box to fit the variable text size present with different languages. At the same time, it adds padding to the English version to make it look similar to previous versions. Fixes #8275.
2018-02-14 07:36:01 +01:00
white-space: normal;
padding: 7px 20px;
hotspots: Style hotspots.
2017-07-14 03:16:50 +02:00
}
/* arrows */
.hotspot-popover:after,
.hotspot-popover:before {
border: solid transparent;
content: '';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.hotspot-popover:after {
border-width: 12px;
}
Simplify CSS linter and clean up CSS. The CSS linter was pretty hard to reason about. It was pretty flexible about certain things, but then it would prevent seemingly innocuous code from getting checked in. This commit overhauls the pretty-printer to be more composable, where every object in the AST knows how to render itself. It also cleans up a little bit of the pre_fluff/post_fluff logic in the parser itself, so comments are more likely to be "attached" to the AST node that make sense. The linter is actually a bit more finicky about newlines, but this is mostly a good thing, as most of the variations before this commit were pretty arbitrary.
2017-11-13 17:26:11 +01:00
hotspots: Style hotspots.
2017-07-14 03:16:50 +02:00
.hotspot-popover:before {
border-width: 13px;
}
.hotspot-popover.arrow-top:before,
.hotspot-popover.arrow-top:after {
bottom: 100%;
right: 50%;
}
Simplify CSS linter and clean up CSS. The CSS linter was pretty hard to reason about. It was pretty flexible about certain things, but then it would prevent seemingly innocuous code from getting checked in. This commit overhauls the pretty-printer to be more composable, where every object in the AST knows how to render itself. It also cleans up a little bit of the pre_fluff/post_fluff logic in the parser itself, so comments are more likely to be "attached" to the AST node that make sense. The linter is actually a bit more finicky about newlines, but this is mostly a good thing, as most of the variations before this commit were pretty arbitrary.
2017-11-13 17:26:11 +01:00
hotspots: Style hotspots.
2017-07-14 03:16:50 +02:00
.hotspot-popover.arrow-top:after {
border-bottom-color: hsl(164, 44%, 47%);
margin-right: -12px;
}
Simplify CSS linter and clean up CSS. The CSS linter was pretty hard to reason about. It was pretty flexible about certain things, but then it would prevent seemingly innocuous code from getting checked in. This commit overhauls the pretty-printer to be more composable, where every object in the AST knows how to render itself. It also cleans up a little bit of the pre_fluff/post_fluff logic in the parser itself, so comments are more likely to be "attached" to the AST node that make sense. The linter is actually a bit more finicky about newlines, but this is mostly a good thing, as most of the variations before this commit were pretty arbitrary.
2017-11-13 17:26:11 +01:00
hotspots: Style hotspots.
2017-07-14 03:16:50 +02:00
.hotspot-popover.arrow-top:before {
border-bottom-color: hsl(0, 0%, 80%);
margin-right: -13px;
}
.hotspot-popover.arrow-left:before,
.hotspot-popover.arrow-left:after {
right: 100%;
top: 50%;
}
Simplify CSS linter and clean up CSS. The CSS linter was pretty hard to reason about. It was pretty flexible about certain things, but then it would prevent seemingly innocuous code from getting checked in. This commit overhauls the pretty-printer to be more composable, where every object in the AST knows how to render itself. It also cleans up a little bit of the pre_fluff/post_fluff logic in the parser itself, so comments are more likely to be "attached" to the AST node that make sense. The linter is actually a bit more finicky about newlines, but this is mostly a good thing, as most of the variations before this commit were pretty arbitrary.
2017-11-13 17:26:11 +01:00
hotspots: Style hotspots.
2017-07-14 03:16:50 +02:00
.hotspot-popover.arrow-left:after {
css: Convert colors to hsl() format. This changes most of the app-related CSS files, but leaves things like landing pages and bootstrap alone.
2017-11-13 16:34:06 +01:00
border-right-color: hsl(0, 0%, 100%);
hotspots: Style hotspots.
2017-07-14 03:16:50 +02:00
margin-top: -12px;
}
Simplify CSS linter and clean up CSS. The CSS linter was pretty hard to reason about. It was pretty flexible about certain things, but then it would prevent seemingly innocuous code from getting checked in. This commit overhauls the pretty-printer to be more composable, where every object in the AST knows how to render itself. It also cleans up a little bit of the pre_fluff/post_fluff logic in the parser itself, so comments are more likely to be "attached" to the AST node that make sense. The linter is actually a bit more finicky about newlines, but this is mostly a good thing, as most of the variations before this commit were pretty arbitrary.
2017-11-13 17:26:11 +01:00
hotspots: Style hotspots.
2017-07-14 03:16:50 +02:00
.hotspot-popover.arrow-left:before {
border-right-color: hsl(0, 0%, 80%);
margin-top: -13px;
}
.hotspot-popover.arrow-bottom:before,
.hotspot-popover.arrow-bottom:after {
top: 100%;
right: 50%;
}
Simplify CSS linter and clean up CSS. The CSS linter was pretty hard to reason about. It was pretty flexible about certain things, but then it would prevent seemingly innocuous code from getting checked in. This commit overhauls the pretty-printer to be more composable, where every object in the AST knows how to render itself. It also cleans up a little bit of the pre_fluff/post_fluff logic in the parser itself, so comments are more likely to be "attached" to the AST node that make sense. The linter is actually a bit more finicky about newlines, but this is mostly a good thing, as most of the variations before this commit were pretty arbitrary.
2017-11-13 17:26:11 +01:00
hotspots: Style hotspots.
2017-07-14 03:16:50 +02:00
.hotspot-popover.arrow-bottom:after {
css: Convert colors to hsl() format. This changes most of the app-related CSS files, but leaves things like landing pages and bootstrap alone.
2017-11-13 16:34:06 +01:00
border-top-color: hsl(0, 0%, 100%);
hotspots: Style hotspots.
2017-07-14 03:16:50 +02:00
margin-right: -12px;
}
Simplify CSS linter and clean up CSS. The CSS linter was pretty hard to reason about. It was pretty flexible about certain things, but then it would prevent seemingly innocuous code from getting checked in. This commit overhauls the pretty-printer to be more composable, where every object in the AST knows how to render itself. It also cleans up a little bit of the pre_fluff/post_fluff logic in the parser itself, so comments are more likely to be "attached" to the AST node that make sense. The linter is actually a bit more finicky about newlines, but this is mostly a good thing, as most of the variations before this commit were pretty arbitrary.
2017-11-13 17:26:11 +01:00
hotspots: Style hotspots.
2017-07-14 03:16:50 +02:00
.hotspot-popover.arrow-bottom:before {
border-top-color: hsl(0, 0%, 80%);
margin-right: -13px;
}
.hotspot-popover.arrow-right:before,
.hotspot-popover.arrow-right:after {
left: 100%;
top: 50%;
}
Simplify CSS linter and clean up CSS. The CSS linter was pretty hard to reason about. It was pretty flexible about certain things, but then it would prevent seemingly innocuous code from getting checked in. This commit overhauls the pretty-printer to be more composable, where every object in the AST knows how to render itself. It also cleans up a little bit of the pre_fluff/post_fluff logic in the parser itself, so comments are more likely to be "attached" to the AST node that make sense. The linter is actually a bit more finicky about newlines, but this is mostly a good thing, as most of the variations before this commit were pretty arbitrary.
2017-11-13 17:26:11 +01:00
hotspots: Style hotspots.
2017-07-14 03:16:50 +02:00
.hotspot-popover.arrow-right:after {
css: Convert colors to hsl() format. This changes most of the app-related CSS files, but leaves things like landing pages and bootstrap alone.
2017-11-13 16:34:06 +01:00
border-left-color: hsl(0, 0%, 100%);
hotspots: Style hotspots.
2017-07-14 03:16:50 +02:00
margin-top: -12px;
}
Simplify CSS linter and clean up CSS. The CSS linter was pretty hard to reason about. It was pretty flexible about certain things, but then it would prevent seemingly innocuous code from getting checked in. This commit overhauls the pretty-printer to be more composable, where every object in the AST knows how to render itself. It also cleans up a little bit of the pre_fluff/post_fluff logic in the parser itself, so comments are more likely to be "attached" to the AST node that make sense. The linter is actually a bit more finicky about newlines, but this is mostly a good thing, as most of the variations before this commit were pretty arbitrary.
2017-11-13 17:26:11 +01:00
hotspots: Style hotspots.
2017-07-14 03:16:50 +02:00
.hotspot-popover.arrow-right:before {
border-left-color: hsl(0, 0%, 80%);
margin-top: -13px;
}
hotspots: Decrease default hotspot icon z-index to 100. This keeps hotspot icons positioned at the front of the message viewport but behind sidebars (i.e. the left sidebar has a z-index of 103). Hotspots associated with elements outside of the message viewport should be individually adjusted at the bottom of hotspots.css.
2017-08-02 03:13:31 +02:00
/* individual icon z-indexing */
hotspots: Replace stream_settings with intro_streams and intro_topics.
2017-08-30 02:19:55 +02:00
#hotspot_intro_streams_icon,
#hotspot_intro_topics_icon {
hotspots: Decrease default hotspot icon z-index to 100. This keeps hotspot icons positioned at the front of the message viewport but behind sidebars (i.e. the left sidebar has a z-index of 103). Hotspots associated with elements outside of the message viewport should be individually adjusted at the bottom of hotspots.css.
2017-08-02 03:13:31 +02:00
z-index: 103;
}
onboarding: Redesign intro_reply hotspot in bottom whitespace. This is a trial to have the first reply hotspot in the bottom whitespace (and stick there until "Got it!" is pressed). Tweaked by tabbott to clean it up a bit. Still needs more work on the visuals.
2018-05-15 23:21:12 +02:00
/* hacked together intro_reply styles */
#bottom_whitespace .hotspot-message {
text-align: center;
margin-top: 30px;
span {
vertical-align: middle;
}
button {
padding: 3px 9px;
min-width: 0px;
margin-left: 7px;
margin-bottom: 0px;
border: none;
font-size: .97em;
font-weight: 600;
color: white;
background-color: hsl(164, 44%, 47%);
border-radius: 4px;
white-space: normal;
}
}