2020-05-27 22:21:32 +02:00
|
|
|
/*
|
|
|
|
This is the header, aka the navbar.
|
|
|
|
*/
|
|
|
|
$header_height: 40px;
|
|
|
|
|
|
|
|
/*
|
|
|
|
We have a 10px gutter below the header,
|
|
|
|
which often needs to be respected by both
|
|
|
|
the elements above it and below it on
|
|
|
|
the y-axis, due to absolute positioning.
|
|
|
|
*/
|
|
|
|
$header_padding_bottom: 10px;
|
|
|
|
|
|
|
|
/*
|
|
|
|
Our sidebars (and anything that top-align
|
|
|
|
with them such as floating recipient bars)
|
|
|
|
go beneath the header.
|
|
|
|
*/
|
|
|
|
$sidebar_top: calc($header_height + $header_padding_bottom);
|
|
|
|
|
2021-04-30 20:11:03 +02:00
|
|
|
/* These need to agree with scroll_bar.js */
|
2021-04-30 20:53:02 +02:00
|
|
|
$left_sidebar_width: 270px;
|
2021-04-30 20:11:03 +02:00
|
|
|
$right_sidebar_width: 250px;
|
|
|
|
|
2013-08-23 07:31:38 +02:00
|
|
|
body,
|
|
|
|
html {
|
2013-08-13 12:52:26 +02:00
|
|
|
width: 100%;
|
2014-01-15 20:13:41 +01:00
|
|
|
height: 100%;
|
2013-08-16 17:29:37 +02:00
|
|
|
overflow-x: hidden;
|
2014-01-15 20:13:41 +01:00
|
|
|
overflow-y: hidden;
|
2017-07-31 20:03:54 +02:00
|
|
|
|
|
|
|
touch-action: manipulation;
|
2013-08-13 12:52:26 +02:00
|
|
|
}
|
|
|
|
|
2019-09-20 06:43:04 +02:00
|
|
|
#app-loading.loaded {
|
2013-11-25 23:05:08 +01:00
|
|
|
display: none !important; /* We are now loaded, by definition. */
|
|
|
|
}
|
|
|
|
|
2012-09-10 20:31:53 +02:00
|
|
|
body {
|
2021-06-11 23:14:08 +02:00
|
|
|
font-size: 14px;
|
|
|
|
line-height: calc(20 / 14);
|
2021-04-03 03:37:00 +02:00
|
|
|
font-family: "Source Sans 3", sans-serif;
|
2012-09-11 20:25:29 +02:00
|
|
|
}
|
|
|
|
|
2013-07-04 23:01:38 +02:00
|
|
|
/* Common background color */
|
2013-08-23 07:31:38 +02:00
|
|
|
body,
|
2020-07-08 23:44:01 +02:00
|
|
|
#message_view_header_underpadding {
|
2017-11-13 16:34:06 +01:00
|
|
|
background-color: hsl(0, 0%, 100%);
|
2019-04-14 15:21:40 +02:00
|
|
|
transition: background-color 200ms linear;
|
2013-07-17 00:52:18 +02:00
|
|
|
}
|
|
|
|
|
2013-08-23 07:31:38 +02:00
|
|
|
input,
|
|
|
|
button,
|
|
|
|
select,
|
|
|
|
textarea {
|
2021-04-03 03:37:00 +02:00
|
|
|
font-family: "Source Sans 3", sans-serif;
|
2021-06-12 01:13:12 +02:00
|
|
|
/* Disable bootstrap size CSS; we want to use our default font size on
|
|
|
|
body for input elements. */
|
2013-05-07 19:32:12 +02:00
|
|
|
line-height: normal;
|
2021-06-12 01:13:12 +02:00
|
|
|
font-size: inherit;
|
2013-05-07 19:32:12 +02:00
|
|
|
}
|
|
|
|
|
2013-05-14 21:11:22 +02:00
|
|
|
blockquote p {
|
|
|
|
font-weight: normal;
|
|
|
|
}
|
|
|
|
|
2013-06-05 22:43:07 +02:00
|
|
|
a {
|
|
|
|
cursor: pointer;
|
|
|
|
|
2020-05-19 12:09:07 +02:00
|
|
|
&.message_label_clickable:hover {
|
|
|
|
cursor: pointer;
|
|
|
|
color: hsl(200, 100%, 40%);
|
|
|
|
}
|
2020-05-19 12:08:23 +02:00
|
|
|
}
|
|
|
|
|
2020-09-18 20:00:21 +02:00
|
|
|
code,
|
|
|
|
pre {
|
2021-04-03 04:01:40 +02:00
|
|
|
font-family: "Source Code Pro", monospace;
|
2020-09-18 20:00:21 +02:00
|
|
|
}
|
|
|
|
|
2021-04-21 03:10:20 +02:00
|
|
|
[data-tippy-root] {
|
|
|
|
/* Since tooltip elements are sometimes inside elements
|
|
|
|
* which have different font-family, we force font-family
|
|
|
|
* for tooltips here.
|
|
|
|
*/
|
|
|
|
font-family: "Source Sans 3", sans-serif !important;
|
2021-04-21 03:41:25 +02:00
|
|
|
|
2022-02-18 14:29:39 +01:00
|
|
|
/* Affects all tippy tooltips not using any theme. */
|
2022-03-02 07:02:28 +01:00
|
|
|
.tippy-box:not([data-theme]) {
|
2022-02-12 08:46:34 +01:00
|
|
|
background-color: hsl(0, 0%, 12%);
|
|
|
|
|
|
|
|
&[data-placement^="top"] {
|
|
|
|
> .tippy-arrow {
|
|
|
|
&::before {
|
|
|
|
border-top-color: hsl(0, 0%, 12%);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&[data-placement^="bottom"] {
|
|
|
|
> .tippy-arrow {
|
|
|
|
&::before {
|
|
|
|
border-bottom-color: hsl(0, 0%, 12%);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&[data-placement^="left"] {
|
|
|
|
> .tippy-arrow {
|
|
|
|
&::before {
|
|
|
|
border-left-color: hsl(0, 0%, 12%);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&[data-placement^="right"] {
|
|
|
|
> .tippy-arrow {
|
|
|
|
&::before {
|
|
|
|
border-right-color: hsl(0, 0%, 12%);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-05-19 04:49:41 +02:00
|
|
|
.tippy-content {
|
|
|
|
font-size: 13px;
|
|
|
|
}
|
|
|
|
|
2021-04-21 03:41:25 +02:00
|
|
|
.tippy-arrow::before {
|
|
|
|
/* `.tippy-arrow:before` element sometimes
|
|
|
|
* inherits the height of the parent, we
|
|
|
|
* don't want any height here since we
|
|
|
|
* want it to remain an triangle.
|
|
|
|
* The bug was only found in Firefox.
|
|
|
|
*/
|
|
|
|
height: 0 !important;
|
|
|
|
}
|
2021-04-17 11:39:02 +02:00
|
|
|
/* If the text in the tooltips stretches to multiple lines,
|
|
|
|
* we want the lines to be left-indented and not right-indented
|
|
|
|
* by default.
|
|
|
|
*/
|
|
|
|
text-align: left;
|
2021-04-21 03:10:20 +02:00
|
|
|
}
|
|
|
|
|
2017-03-19 01:51:20 +01:00
|
|
|
.no-select {
|
2019-08-27 01:23:48 +02:00
|
|
|
user-select: none;
|
2017-03-19 01:51:20 +01:00
|
|
|
}
|
|
|
|
|
2017-08-23 19:39:48 +02:00
|
|
|
.auto-select {
|
2019-08-27 01:23:48 +02:00
|
|
|
user-select: auto;
|
2017-08-23 19:39:48 +02:00
|
|
|
}
|
|
|
|
|
2018-01-11 11:19:32 +01:00
|
|
|
.text-select {
|
2019-08-27 01:23:48 +02:00
|
|
|
user-select: text;
|
2018-01-11 11:19:32 +01:00
|
|
|
}
|
|
|
|
|
2016-08-27 01:47:30 +02:00
|
|
|
p.n-margin {
|
2021-11-05 03:33:16 +01:00
|
|
|
margin: 10px 0 0;
|
2016-08-27 01:47:30 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.small-line-height {
|
|
|
|
line-height: 1.1;
|
|
|
|
}
|
|
|
|
|
|
|
|
.float-left {
|
|
|
|
float: left;
|
|
|
|
}
|
|
|
|
|
|
|
|
.float-right {
|
|
|
|
float: right;
|
|
|
|
}
|
|
|
|
|
|
|
|
.float-clear {
|
|
|
|
clear: both;
|
|
|
|
}
|
|
|
|
|
|
|
|
.no-margin {
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.border-radius {
|
|
|
|
border-radius: 4px;
|
|
|
|
}
|
|
|
|
|
2018-10-01 20:27:22 +02:00
|
|
|
.history-limited-box {
|
|
|
|
color: hsl(16, 60%, 45%);
|
|
|
|
border: 1px solid hsl(16, 60%, 45%);
|
|
|
|
box-shadow: 0 0 2px hsl(16, 60%, 45%);
|
2019-08-13 21:03:48 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.all-messages-search-caution {
|
|
|
|
border: 1px solid hsla(192, 19%, 75%, 0.2);
|
|
|
|
box-shadow: 0 0 2px hsla(192, 19%, 75%, 0.2);
|
|
|
|
}
|
|
|
|
|
|
|
|
.history-limited-box,
|
|
|
|
.all-messages-search-caution {
|
|
|
|
border-radius: 4px;
|
2018-10-01 20:27:22 +02:00
|
|
|
display: none;
|
2020-07-12 20:12:00 +02:00
|
|
|
height: 28px;
|
2018-10-01 20:27:22 +02:00
|
|
|
font-size: 16px;
|
|
|
|
margin: 0 auto 12px;
|
|
|
|
padding: 5px;
|
2021-10-16 21:57:26 +02:00
|
|
|
|
2018-12-14 01:45:32 +01:00
|
|
|
i {
|
|
|
|
margin: 0 3px 0 1px;
|
|
|
|
}
|
2021-10-16 21:57:26 +02:00
|
|
|
|
2018-10-01 20:27:22 +02:00
|
|
|
p {
|
|
|
|
margin: 0;
|
2018-12-14 01:45:32 +01:00
|
|
|
padding: 4px;
|
2018-10-01 20:27:22 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-05-26 16:27:06 +02:00
|
|
|
.bottom-messages-logo {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
.top-messages-logo,
|
|
|
|
.bottom-messages-logo {
|
2017-01-05 22:22:21 +01:00
|
|
|
width: 24px;
|
|
|
|
height: 24px;
|
2018-07-08 09:13:47 +02:00
|
|
|
margin: 0 auto 12px;
|
2017-01-05 22:22:21 +01:00
|
|
|
|
2020-05-16 12:25:29 +02:00
|
|
|
svg {
|
|
|
|
circle {
|
|
|
|
fill: hsl(0, 0%, 27%);
|
|
|
|
stroke: hsl(0, 0%, 27%);
|
|
|
|
}
|
2017-11-30 01:01:51 +01:00
|
|
|
|
2020-05-16 12:25:29 +02:00
|
|
|
path {
|
|
|
|
fill: hsl(0, 0%, 100%);
|
|
|
|
stroke: hsl(0, 0%, 100%);
|
|
|
|
}
|
|
|
|
}
|
2017-11-30 01:01:51 +01:00
|
|
|
}
|
|
|
|
|
2018-12-20 19:48:37 +01:00
|
|
|
#feedback_container {
|
2016-08-27 01:47:30 +02:00
|
|
|
display: none;
|
|
|
|
position: absolute;
|
|
|
|
width: 400px;
|
2020-08-06 02:42:07 +02:00
|
|
|
top: 0;
|
2016-08-27 01:47:30 +02:00
|
|
|
left: calc(50vw - 220px);
|
|
|
|
padding: 15px;
|
|
|
|
|
2017-06-21 09:15:29 +02:00
|
|
|
background-color: hsl(0, 0%, 98%);
|
2016-08-27 01:47:30 +02:00
|
|
|
border-radius: 5px;
|
2020-08-06 02:42:07 +02:00
|
|
|
box-shadow: 0 0 30px hsla(0, 0%, 0%, 0.25);
|
2016-10-28 22:50:56 +02:00
|
|
|
z-index: 110;
|
2016-08-27 01:47:30 +02:00
|
|
|
|
|
|
|
animation-name: pulse;
|
|
|
|
animation-iteration-count: infinite;
|
|
|
|
animation-duration: 2s;
|
|
|
|
|
|
|
|
transition-property: top, bottom;
|
|
|
|
transition-duration: 0.5s;
|
|
|
|
|
2020-05-16 12:28:05 +02:00
|
|
|
&.show {
|
|
|
|
top: 50px;
|
|
|
|
}
|
2016-08-27 01:47:30 +02:00
|
|
|
|
2020-05-16 12:28:05 +02:00
|
|
|
h3 {
|
|
|
|
font-size: 16pt;
|
|
|
|
margin-top: 2px;
|
|
|
|
}
|
2016-08-27 01:47:30 +02:00
|
|
|
|
2020-05-16 12:28:05 +02:00
|
|
|
.exit-me {
|
2021-07-31 23:44:26 +02:00
|
|
|
font-size: 20pt;
|
2020-05-16 12:28:05 +02:00
|
|
|
font-weight: 200;
|
2021-07-31 23:44:26 +02:00
|
|
|
margin: 0 0 0 10px;
|
2020-05-16 12:28:05 +02:00
|
|
|
cursor: pointer;
|
|
|
|
}
|
2020-05-16 12:31:55 +02:00
|
|
|
}
|
|
|
|
|
2016-08-27 01:47:30 +02:00
|
|
|
@keyframes pulse {
|
|
|
|
0% {
|
2020-08-06 02:42:07 +02:00
|
|
|
box-shadow: 0 0 30px hsla(0, 0%, 0%, 0.35);
|
2016-08-27 01:47:30 +02:00
|
|
|
}
|
2017-11-13 17:26:11 +01:00
|
|
|
|
2016-08-27 01:47:30 +02:00
|
|
|
50% {
|
2020-08-06 02:42:07 +02:00
|
|
|
box-shadow: 0 0 30px hsla(0, 0%, 0%, 0.15);
|
2016-08-27 01:47:30 +02:00
|
|
|
}
|
2017-11-13 17:26:11 +01:00
|
|
|
|
2016-08-27 01:47:30 +02:00
|
|
|
100% {
|
2020-08-06 02:42:07 +02:00
|
|
|
box-shadow: 0 0 30px hsla(0, 0%, 0%, 0.35);
|
2016-08-27 01:47:30 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-04-13 22:33:26 +02:00
|
|
|
.fade-in-message {
|
|
|
|
animation-name: fadeInMessage;
|
|
|
|
animation-duration: 1s;
|
|
|
|
animation-iteration-count: 1;
|
|
|
|
|
2020-05-16 12:43:31 +02:00
|
|
|
.message_edit_notice {
|
|
|
|
animation-name: fadeInEditNotice;
|
|
|
|
animation-duration: 1s;
|
|
|
|
animation-iteration-count: 1;
|
|
|
|
}
|
2017-04-13 22:33:26 +02:00
|
|
|
}
|
|
|
|
|
2019-08-04 19:38:28 +02:00
|
|
|
.message_edit_notice_hover:hover {
|
2020-08-04 23:58:56 +02:00
|
|
|
opacity: 1;
|
2019-08-04 19:38:28 +02:00
|
|
|
}
|
|
|
|
|
2013-08-13 12:52:26 +02:00
|
|
|
.header {
|
|
|
|
position: fixed;
|
2016-10-28 08:09:04 +02:00
|
|
|
z-index: 102; /* Needs to be higher than .alert-bar-container */
|
2013-08-13 12:52:26 +02:00
|
|
|
width: 100%;
|
2020-05-27 22:21:32 +02:00
|
|
|
height: $header_height;
|
|
|
|
padding-bottom: $header_padding_bottom;
|
2019-02-07 23:36:08 +01:00
|
|
|
background-color: inherit;
|
|
|
|
}
|
|
|
|
|
|
|
|
#top_navbar {
|
|
|
|
border-bottom: 1px solid hsla(0, 0%, 0%, 0.2);
|
2013-08-13 12:52:26 +02:00
|
|
|
}
|
|
|
|
|
2021-05-17 10:01:02 +02:00
|
|
|
#navbar_alerts_wrapper {
|
2017-09-23 11:27:18 +02:00
|
|
|
font-size: 1rem;
|
2020-08-25 10:02:47 +02:00
|
|
|
position: relative;
|
2017-09-23 11:27:18 +02:00
|
|
|
|
2020-05-16 12:46:32 +02:00
|
|
|
.alert {
|
2021-06-05 11:16:17 +02:00
|
|
|
/* Since alerts are only rendered into the DOM when they are first
|
|
|
|
displayed, display: block is the right default for this setting. */
|
|
|
|
display: block;
|
2020-05-16 12:46:32 +02:00
|
|
|
margin: 0;
|
|
|
|
padding-top: 12px;
|
|
|
|
padding-bottom: 12px;
|
2017-09-23 11:27:18 +02:00
|
|
|
|
2020-05-16 12:46:32 +02:00
|
|
|
border: none;
|
|
|
|
border-radius: 0;
|
2017-09-23 11:27:18 +02:00
|
|
|
|
2020-05-16 12:46:32 +02:00
|
|
|
text-align: center;
|
|
|
|
text-shadow: none;
|
|
|
|
color: hsl(0, 0%, 100%);
|
2017-09-23 11:27:18 +02:00
|
|
|
|
2020-05-16 12:46:32 +02:00
|
|
|
&.alert-info {
|
|
|
|
background-color: hsl(170, 46%, 54%);
|
2017-09-23 11:27:18 +02:00
|
|
|
|
2020-05-16 12:46:32 +02:00
|
|
|
&.red {
|
|
|
|
background-color: hsl(0, 46%, 54%);
|
|
|
|
}
|
|
|
|
}
|
2018-01-26 22:10:30 +01:00
|
|
|
|
2020-05-16 12:46:32 +02:00
|
|
|
.close {
|
|
|
|
line-height: 24px;
|
2020-08-25 10:02:47 +02:00
|
|
|
position: absolute;
|
|
|
|
right: 18px;
|
|
|
|
top: 50%;
|
|
|
|
transform: translateY(-50%);
|
2020-05-16 12:46:32 +02:00
|
|
|
}
|
2017-09-23 11:27:18 +02:00
|
|
|
|
2020-05-16 12:46:32 +02:00
|
|
|
.alert-link {
|
|
|
|
color: hsl(169, 100%, 88%);
|
|
|
|
font-weight: 600;
|
|
|
|
}
|
2017-09-23 11:27:18 +02:00
|
|
|
|
2020-05-16 12:46:32 +02:00
|
|
|
&.red .alert-link {
|
|
|
|
color: hsl(0, 100%, 88%);
|
|
|
|
}
|
2018-01-26 22:10:30 +01:00
|
|
|
|
2020-05-16 12:46:32 +02:00
|
|
|
.buttons .alert-link {
|
2020-08-06 02:42:07 +02:00
|
|
|
margin: 0 5px;
|
2020-05-16 12:46:32 +02:00
|
|
|
}
|
|
|
|
}
|
2017-09-23 11:27:18 +02:00
|
|
|
}
|
|
|
|
|
2013-08-13 12:52:26 +02:00
|
|
|
.app {
|
|
|
|
width: 100%;
|
2014-01-15 20:13:41 +01:00
|
|
|
height: 100%;
|
2014-02-13 21:04:26 +01:00
|
|
|
overflow-y: scroll;
|
2013-08-13 12:52:26 +02:00
|
|
|
z-index: 99;
|
2017-03-08 23:49:37 +01:00
|
|
|
-webkit-overflow-scrolling: touch;
|
2013-08-13 12:52:26 +02:00
|
|
|
}
|
|
|
|
|
2013-08-23 07:31:38 +02:00
|
|
|
.app-main,
|
|
|
|
.header-main {
|
2014-01-08 16:12:22 +01:00
|
|
|
width: 100%;
|
2022-01-06 07:04:52 +01:00
|
|
|
/* `max-width` is changed based on `fluid_layout_width` setting in
|
|
|
|
`scroll_bar.js`. User may or may not see a flash of mispositioned content
|
|
|
|
based on how quickly the JS code is executed. */
|
2014-01-31 21:36:31 +01:00
|
|
|
max-width: 1400px;
|
2013-08-13 12:52:26 +02:00
|
|
|
min-width: 950px;
|
2020-08-06 02:42:07 +02:00
|
|
|
margin: 0 auto;
|
|
|
|
padding: 0;
|
2013-08-13 12:52:26 +02:00
|
|
|
position: relative;
|
2018-09-27 21:57:07 +02:00
|
|
|
background-color: hsl(0, 0%, 100%);
|
2013-08-13 12:52:26 +02:00
|
|
|
}
|
|
|
|
|
2014-01-09 16:58:51 +01:00
|
|
|
.fixed-app {
|
|
|
|
width: 100%;
|
|
|
|
position: fixed;
|
|
|
|
z-index: 98;
|
2020-08-06 02:42:07 +02:00
|
|
|
left: 0;
|
2014-01-09 16:58:51 +01:00
|
|
|
}
|
|
|
|
|
2013-08-23 07:31:38 +02:00
|
|
|
.column-right {
|
2021-04-30 20:11:03 +02:00
|
|
|
width: $right_sidebar_width;
|
|
|
|
max-width: $right_sidebar_width;
|
2014-01-08 16:12:22 +01:00
|
|
|
position: absolute;
|
2021-04-30 20:11:03 +02:00
|
|
|
right: 0;
|
2020-08-06 02:42:07 +02:00
|
|
|
top: 0;
|
2013-08-13 12:52:26 +02:00
|
|
|
}
|
|
|
|
|
2021-04-30 20:11:03 +02:00
|
|
|
.column-left {
|
|
|
|
width: $left_sidebar_width;
|
|
|
|
max-width: $left_sidebar_width;
|
2014-01-08 16:12:22 +01:00
|
|
|
position: absolute;
|
2021-04-30 20:11:03 +02:00
|
|
|
left: 0;
|
2020-08-06 02:42:07 +02:00
|
|
|
top: 0;
|
2013-08-13 12:52:26 +02:00
|
|
|
}
|
|
|
|
|
2020-05-16 12:54:44 +02:00
|
|
|
.app-main {
|
|
|
|
height: 100%;
|
|
|
|
min-height: 100%;
|
|
|
|
|
2020-05-16 12:56:11 +02:00
|
|
|
.column-left .left-sidebar,
|
|
|
|
.column-right .right-sidebar {
|
|
|
|
position: fixed;
|
2020-05-27 22:21:32 +02:00
|
|
|
margin-top: $sidebar_top;
|
2020-05-16 12:56:11 +02:00
|
|
|
z-index: 100;
|
|
|
|
}
|
2014-01-09 16:58:51 +01:00
|
|
|
|
2020-05-16 12:56:11 +02:00
|
|
|
.column-left .left-sidebar {
|
2021-04-30 20:11:03 +02:00
|
|
|
width: $left_sidebar_width;
|
2020-08-06 02:42:07 +02:00
|
|
|
padding-left: 0;
|
2020-05-16 12:56:11 +02:00
|
|
|
}
|
2013-08-13 12:52:26 +02:00
|
|
|
|
2020-05-16 12:56:11 +02:00
|
|
|
.column-right .right-sidebar {
|
|
|
|
padding-left: 10px;
|
|
|
|
width: 240px;
|
|
|
|
}
|
2013-08-13 12:52:26 +02:00
|
|
|
|
2020-05-16 12:56:11 +02:00
|
|
|
.column-middle {
|
|
|
|
min-height: 100%;
|
|
|
|
}
|
2014-01-31 21:36:31 +01:00
|
|
|
}
|
|
|
|
|
2021-04-30 20:11:03 +02:00
|
|
|
.column-middle,
|
2021-06-10 16:52:29 +02:00
|
|
|
#compose-content {
|
2021-04-30 20:11:03 +02:00
|
|
|
margin-right: $right_sidebar_width;
|
|
|
|
margin-left: $left_sidebar_width;
|
2014-01-09 16:58:51 +01:00
|
|
|
position: relative;
|
2013-08-13 12:52:26 +02:00
|
|
|
}
|
|
|
|
|
2013-08-23 07:31:38 +02:00
|
|
|
textarea,
|
|
|
|
input {
|
2021-04-03 03:37:00 +02:00
|
|
|
font-family: "Source Sans 3", sans-serif;
|
2012-10-24 23:16:43 +02:00
|
|
|
}
|
|
|
|
|
2013-02-13 23:23:26 +01:00
|
|
|
/* Override Bootstrap's fixed sizes for various elements */
|
2013-08-23 07:31:38 +02:00
|
|
|
textarea,
|
|
|
|
label {
|
2017-03-14 16:36:22 +01:00
|
|
|
font-size: inherit;
|
2013-02-13 23:23:26 +01:00
|
|
|
line-height: inherit;
|
|
|
|
}
|
|
|
|
|
2020-07-15 11:12:05 +02:00
|
|
|
/* Bootstrap's focus outline uses -webkit-focus-ring-color which doesn't exist in Firefox */
|
2021-07-13 08:15:05 +02:00
|
|
|
a:not(:active):focus,
|
|
|
|
button:focus,
|
|
|
|
.new-style label.checkbox input[type="checkbox"]:focus ~ span,
|
|
|
|
i.fa:focus,
|
|
|
|
i.zulip-icon:focus,
|
2022-03-08 07:22:44 +01:00
|
|
|
.auto-select:focus,
|
|
|
|
[role="button"]:focus {
|
2020-07-15 11:12:05 +02:00
|
|
|
outline: 2px solid hsl(215, 47%, 50%);
|
2020-09-15 22:23:01 +02:00
|
|
|
/* TODO: change solid to auto once the Chromium bug #1105822 is fixed */
|
2020-07-15 11:12:05 +02:00
|
|
|
}
|
|
|
|
|
2013-02-13 23:23:26 +01:00
|
|
|
/* List of text-like input types taken from Bootstrap */
|
2020-05-16 12:58:43 +02:00
|
|
|
input {
|
|
|
|
&[type="text"],
|
|
|
|
&[type="password"],
|
|
|
|
&[type="datetime"],
|
|
|
|
&[type="datetime-local"],
|
|
|
|
&[type="date"],
|
|
|
|
&[type="month"],
|
|
|
|
&[type="time"],
|
|
|
|
&[type="week"],
|
|
|
|
&[type="number"],
|
|
|
|
&[type="email"],
|
|
|
|
&[type="url"],
|
|
|
|
&[type="search"],
|
|
|
|
&[type="tel"],
|
|
|
|
&[type="color"] {
|
|
|
|
font-size: inherit;
|
|
|
|
height: 1.4em;
|
|
|
|
}
|
2013-02-13 23:23:26 +01:00
|
|
|
}
|
|
|
|
|
2013-08-23 07:31:38 +02:00
|
|
|
li,
|
|
|
|
.table th,
|
|
|
|
.table td {
|
2013-02-13 23:23:26 +01:00
|
|
|
line-height: inherit;
|
|
|
|
}
|
|
|
|
|
|
|
|
.btn {
|
2017-03-14 16:36:22 +01:00
|
|
|
font-size: inherit;
|
|
|
|
height: auto;
|
2013-05-07 19:32:12 +02:00
|
|
|
line-height: 100%;
|
2013-02-13 23:23:26 +01:00
|
|
|
}
|
|
|
|
|
2020-08-27 16:41:30 +02:00
|
|
|
/* Classes which style copy buttons */
|
|
|
|
.copy_button_base {
|
|
|
|
outline-color: hsl(0, 0%, 73%);
|
|
|
|
height: 18px;
|
|
|
|
width: 10px;
|
2021-11-05 03:33:16 +01:00
|
|
|
padding: 6px;
|
2020-08-27 16:41:30 +02:00
|
|
|
display: block;
|
|
|
|
/* The below two avoids the padded element from displaying
|
2022-02-08 00:13:33 +01:00
|
|
|
its own border and background color */
|
2020-08-27 16:41:30 +02:00
|
|
|
border: none;
|
|
|
|
background-clip: content-box;
|
2020-08-28 04:13:23 +02:00
|
|
|
/* The z-index here ensures that the copy-message
|
|
|
|
icon is clickable and is needed because of reduced
|
|
|
|
opacity of readonly textarea */
|
|
|
|
z-index: 2;
|
2020-08-27 16:41:30 +02:00
|
|
|
|
|
|
|
&:hover svg path {
|
|
|
|
fill: hsl(200, 100%, 40%);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-08-28 04:13:23 +02:00
|
|
|
.copy_message {
|
2017-01-17 20:51:30 +01:00
|
|
|
position: relative;
|
2020-08-28 15:49:24 +02:00
|
|
|
top: 27px;
|
|
|
|
left: -10px;
|
2017-04-21 08:48:27 +02:00
|
|
|
margin-top: -24px;
|
2017-01-17 20:51:30 +01:00
|
|
|
}
|
|
|
|
|
2020-10-13 18:17:20 +02:00
|
|
|
#copy_generated_invite_link {
|
|
|
|
position: relative;
|
|
|
|
margin-right: -32px;
|
|
|
|
margin-top: -1px;
|
2021-09-28 21:57:50 +02:00
|
|
|
padding: 6px 3px 6px 13px;
|
2021-01-25 03:33:29 +01:00
|
|
|
|
|
|
|
/* This property nullifies the box-shadow rendered by .btn class */
|
|
|
|
&:active {
|
|
|
|
box-shadow: none;
|
|
|
|
}
|
2020-10-13 18:17:20 +02:00
|
|
|
}
|
|
|
|
|
2017-03-26 12:15:50 +02:00
|
|
|
#clipboard_image {
|
2017-04-06 15:57:50 +02:00
|
|
|
margin-top: -5px;
|
|
|
|
margin-left: -8px;
|
|
|
|
}
|
|
|
|
|
2013-02-13 23:23:26 +01:00
|
|
|
.btn-large {
|
|
|
|
font-size: 115%;
|
|
|
|
}
|
|
|
|
|
2013-04-24 00:40:47 +02:00
|
|
|
/* Classes for hiding and showing controls */
|
|
|
|
|
|
|
|
.notdisplayed {
|
|
|
|
display: none !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
.notvisible {
|
|
|
|
visibility: hidden !important;
|
2020-08-06 02:42:07 +02:00
|
|
|
width: 0 !important;
|
|
|
|
min-width: 0 !important;
|
|
|
|
min-height: 0 !important;
|
|
|
|
height: 0 !important;
|
2013-04-25 23:08:05 +02:00
|
|
|
overflow: hidden !important;
|
|
|
|
position: absolute !important;
|
2013-04-24 00:40:47 +02:00
|
|
|
}
|
2013-02-13 23:23:26 +01:00
|
|
|
|
2013-05-21 17:47:44 +02:00
|
|
|
/* Lighter strong */
|
|
|
|
|
|
|
|
strong {
|
|
|
|
font-weight: 600;
|
|
|
|
}
|
|
|
|
|
2012-11-29 18:38:18 +01:00
|
|
|
.preserve_spaces {
|
|
|
|
white-space: pre-wrap;
|
|
|
|
}
|
|
|
|
|
2017-09-26 19:52:18 +02:00
|
|
|
.sp-input {
|
|
|
|
width: calc(100% - 14px);
|
|
|
|
box-sizing: initial !important;
|
|
|
|
}
|
|
|
|
|
2012-11-02 22:19:12 +01:00
|
|
|
.logout {
|
|
|
|
white-space: nowrap;
|
|
|
|
}
|
2012-10-12 05:10:48 +02:00
|
|
|
|
2016-10-28 07:12:32 +02:00
|
|
|
.sidebar-title {
|
2017-06-09 16:52:05 +02:00
|
|
|
color: hsl(0, 0%, 43%);
|
2021-06-11 23:01:11 +02:00
|
|
|
font-size: inherit;
|
2013-07-12 17:00:32 +02:00
|
|
|
font-weight: normal;
|
|
|
|
display: inline;
|
|
|
|
}
|
|
|
|
|
2020-05-16 13:09:26 +02:00
|
|
|
.tooltip {
|
|
|
|
&.in {
|
|
|
|
font-size: 12px;
|
|
|
|
line-height: 1.3;
|
2017-09-16 01:51:59 +02:00
|
|
|
|
2020-05-16 13:09:26 +02:00
|
|
|
opacity: 1;
|
2017-09-16 01:51:59 +02:00
|
|
|
|
2020-05-16 13:09:26 +02:00
|
|
|
&.left {
|
|
|
|
margin-left: -12px;
|
|
|
|
margin-top: 3px;
|
|
|
|
}
|
|
|
|
}
|
2017-09-16 01:51:59 +02:00
|
|
|
|
2020-05-16 13:09:26 +02:00
|
|
|
.tooltip-inner {
|
|
|
|
background-color: hsla(0, 0%, 7%, 0.8);
|
|
|
|
padding: 3px 5px;
|
|
|
|
}
|
2020-12-17 13:20:39 +01:00
|
|
|
|
|
|
|
/*
|
|
|
|
Since hover and click are activated together on touchscreen
|
|
|
|
devices, the hover state persists until the next click, creating
|
|
|
|
awkward UI where the tooltip sticks around forever :(.
|
|
|
|
|
|
|
|
To resolve this, we just hide the tooltip for touch-events on
|
|
|
|
touch-enabled devices resolving the above problem. This means
|
|
|
|
that tooltips will never appear on touchscreen devices, but that's
|
2021-12-28 18:36:59 +01:00
|
|
|
probably a reasonable tradeoff here.
|
2020-12-17 13:20:39 +01:00
|
|
|
|
|
|
|
Source: https://drafts.csswg.org/mediaqueries-4/#mf-interaction
|
|
|
|
*/
|
|
|
|
|
|
|
|
@media (hover: none) {
|
|
|
|
visibility: hidden !important;
|
|
|
|
}
|
2017-09-16 01:51:59 +02:00
|
|
|
}
|
|
|
|
|
2019-08-04 14:57:32 +02:00
|
|
|
.buddy_list_tooltip_content {
|
|
|
|
text-align: left;
|
2022-02-16 21:59:38 +01:00
|
|
|
word-wrap: break-word;
|
2019-08-04 14:57:32 +02:00
|
|
|
}
|
|
|
|
|
2016-10-28 07:12:32 +02:00
|
|
|
#message_edit_tooltip {
|
2013-07-12 17:00:32 +02:00
|
|
|
float: right;
|
2017-06-21 09:15:29 +02:00
|
|
|
color: hsl(0, 0%, 0%);
|
2021-06-12 00:51:57 +02:00
|
|
|
margin-top: 2px;
|
2016-06-13 22:06:12 +02:00
|
|
|
margin-left: 6px;
|
2016-02-25 22:44:20 +01:00
|
|
|
opacity: 0.5;
|
2018-04-08 15:51:01 +02:00
|
|
|
cursor: pointer;
|
2013-07-12 17:00:32 +02:00
|
|
|
|
2020-05-16 13:13:51 +02:00
|
|
|
&:hover {
|
2020-08-04 23:58:56 +02:00
|
|
|
opacity: 1;
|
2020-05-16 13:13:51 +02:00
|
|
|
}
|
2016-06-13 22:06:12 +02:00
|
|
|
}
|
|
|
|
|
2016-07-08 02:25:55 +02:00
|
|
|
.message-edit-tooltip-inner {
|
|
|
|
width: 200px;
|
|
|
|
position: absolute;
|
|
|
|
right: 7px;
|
|
|
|
top: -18px;
|
|
|
|
}
|
|
|
|
|
2013-08-12 23:05:20 +02:00
|
|
|
.narrow-filter {
|
|
|
|
display: block;
|
2013-06-12 21:25:49 +02:00
|
|
|
position: relative;
|
|
|
|
}
|
|
|
|
|
2016-10-28 07:12:32 +02:00
|
|
|
.message_header_stream a.message_label_clickable {
|
2017-11-16 01:36:24 +01:00
|
|
|
color: inherit;
|
2013-02-06 19:48:26 +01:00
|
|
|
}
|
|
|
|
|
2022-02-10 16:06:55 +01:00
|
|
|
#gear-menu .light-theme {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
2020-09-15 22:23:01 +02:00
|
|
|
/* .dropdown-menu from v2.3.2
|
|
|
|
+ https://github.com/zulip/zulip/commit/7a3a3be7e547d3e8f0ed00820835104867f2433d
|
|
|
|
basic idea of this fix is to remove decorations from :hover and apply them only
|
|
|
|
on :focus. */
|
2020-08-14 16:04:42 +02:00
|
|
|
.typeahead-menu {
|
|
|
|
li {
|
|
|
|
a {
|
|
|
|
display: block;
|
|
|
|
padding: 3px 20px;
|
|
|
|
clear: both;
|
|
|
|
font-weight: normal;
|
|
|
|
line-height: 20px;
|
|
|
|
color: hsl(0, 0%, 20%);
|
|
|
|
white-space: nowrap;
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
text-decoration: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:focus {
|
|
|
|
color: hsl(0, 0%, 100%);
|
|
|
|
text-decoration: none;
|
|
|
|
background-color: hsl(200, 100%, 38%);
|
|
|
|
background-image: linear-gradient(
|
|
|
|
to bottom,
|
|
|
|
hsl(200, 100%, 40%),
|
|
|
|
hsl(200, 100%, 35%)
|
|
|
|
);
|
|
|
|
}
|
2021-02-26 09:24:04 +01:00
|
|
|
/* styles defined for user_circle here only deal with positioning of user_presence_circle
|
2021-12-28 18:36:59 +01:00
|
|
|
in typeahead list in order to ensure they are rendered correctly in in all screen sizes.
|
2021-02-26 09:24:04 +01:00
|
|
|
Most of the style rules related to color, gradient etc. which are generally common throughout
|
|
|
|
the app are defined in user_circles.css and are not overridden here. */
|
|
|
|
.user_circle {
|
|
|
|
width: 8px;
|
|
|
|
height: 8px;
|
|
|
|
margin: 0 5px 0 -6px;
|
|
|
|
position: relative;
|
|
|
|
top: 6px;
|
2021-03-10 22:06:39 +01:00
|
|
|
right: 8px;
|
2021-02-26 09:24:04 +01:00
|
|
|
display: inline-block;
|
|
|
|
}
|
2020-08-14 16:04:42 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.active > a {
|
|
|
|
color: hsl(0, 0%, 100%);
|
|
|
|
text-decoration: none;
|
|
|
|
background-color: hsl(200, 100%, 38%);
|
|
|
|
background-image: linear-gradient(
|
|
|
|
to bottom,
|
|
|
|
hsl(200, 100%, 40%),
|
|
|
|
hsl(200, 100%, 35%)
|
|
|
|
);
|
|
|
|
outline: 0;
|
2021-02-26 09:24:04 +01:00
|
|
|
|
|
|
|
.user_circle_empty {
|
|
|
|
border-color: hsl(0, 0%, 25%);
|
|
|
|
}
|
2020-08-14 16:04:42 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.active > a:hover {
|
|
|
|
text-decoration: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-08-25 13:34:02 +02:00
|
|
|
/* Copied from bootstrap 2.1.1 CSS for dropdown-menu li > a:focus */
|
|
|
|
li.actual-dropdown-menu > a:focus {
|
|
|
|
color: hsl(0, 0%, 100%);
|
|
|
|
text-decoration: none;
|
2022-03-02 07:02:28 +01:00
|
|
|
background-color: transparent;
|
2020-08-25 13:34:02 +02:00
|
|
|
background-image: none;
|
|
|
|
filter: none;
|
|
|
|
outline: 0;
|
|
|
|
}
|
|
|
|
|
2013-08-16 21:08:43 +02:00
|
|
|
li.actual-dropdown-menu i {
|
|
|
|
/* In gear menu, make icons the same width so labels line up. */
|
|
|
|
display: inline-block;
|
|
|
|
width: 14px;
|
2017-02-01 03:04:10 +01:00
|
|
|
text-align: center;
|
2017-02-01 03:09:43 +01:00
|
|
|
margin-right: 3px;
|
2013-02-12 20:41:01 +01:00
|
|
|
}
|
|
|
|
|
2021-02-09 11:16:52 +01:00
|
|
|
#gear_menu_about_zulip {
|
|
|
|
.white_zulip_icon_without_text {
|
|
|
|
position: relative;
|
|
|
|
top: 3px;
|
|
|
|
width: 14px;
|
|
|
|
height: 14px;
|
|
|
|
margin-right: 3px;
|
|
|
|
filter: invert(20%) sepia(11%) saturate(0%) hue-rotate(272deg)
|
|
|
|
brightness(20%) contrast(95%);
|
|
|
|
}
|
2021-10-16 21:57:26 +02:00
|
|
|
|
2021-02-09 11:16:52 +01:00
|
|
|
.about_zulip_text {
|
|
|
|
position: relative;
|
|
|
|
top: 1.4px;
|
|
|
|
}
|
|
|
|
|
|
|
|
:hover {
|
|
|
|
.white_zulip_icon_without_text {
|
|
|
|
filter: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-05-10 20:55:32 +02:00
|
|
|
.settings-dropdown-cog {
|
2020-06-21 18:59:37 +02:00
|
|
|
padding: 6px 12px;
|
2020-05-10 20:55:32 +02:00
|
|
|
}
|
|
|
|
|
2013-02-28 19:04:58 +01:00
|
|
|
.message_area_padder {
|
2020-07-08 23:44:01 +02:00
|
|
|
/* The height of the header and the message_view_header plus a small gap */
|
2018-07-08 09:13:47 +02:00
|
|
|
margin-top: 57px;
|
2013-02-28 19:04:58 +01:00
|
|
|
/* This is needed for the floating recipient bar
|
2017-03-23 20:37:08 +01:00
|
|
|
in Firefox only, for some reason;
|
|
|
|
otherwise it gets a scrollbar */
|
2013-02-28 19:04:58 +01:00
|
|
|
overflow: visible;
|
2012-09-25 22:18:25 +02:00
|
|
|
}
|
2013-06-22 00:21:55 +02:00
|
|
|
|
2012-09-10 21:14:01 +02:00
|
|
|
td.pointer {
|
|
|
|
vertical-align: top;
|
2012-09-10 21:16:17 +02:00
|
|
|
padding-top: 10px;
|
2017-11-13 16:34:06 +01:00
|
|
|
background-color: hsl(0, 0%, 100%);
|
2012-10-02 20:47:01 +02:00
|
|
|
}
|
|
|
|
|
2013-05-31 19:07:59 +02:00
|
|
|
.new_messages {
|
2017-11-13 16:34:06 +01:00
|
|
|
background-color: hsl(194, 53%, 79%);
|
2013-05-31 19:07:59 +02:00
|
|
|
}
|
|
|
|
|
2013-08-23 07:31:38 +02:00
|
|
|
.new_messages,
|
|
|
|
.new_messages_fadeout {
|
2019-04-14 15:21:40 +02:00
|
|
|
transition: all 3s ease-in-out;
|
2013-05-16 23:40:07 +02:00
|
|
|
}
|
|
|
|
|
2020-05-16 13:54:11 +02:00
|
|
|
.include-sender {
|
|
|
|
.message_edit_notice {
|
|
|
|
display: inline-block;
|
|
|
|
vertical-align: top;
|
|
|
|
line-height: 14px;
|
2022-02-10 22:46:05 +01:00
|
|
|
/* A bit of margin here helps these not look associated with the name. */
|
|
|
|
margin-left: 4px;
|
2020-05-16 13:54:11 +02:00
|
|
|
position: static;
|
2020-08-06 02:42:07 +02:00
|
|
|
padding: 0;
|
2020-05-16 13:54:11 +02:00
|
|
|
width: auto;
|
|
|
|
}
|
2014-01-31 21:36:31 +01:00
|
|
|
|
2020-05-16 13:54:11 +02:00
|
|
|
.message_time {
|
|
|
|
top: -4px;
|
|
|
|
}
|
2020-05-16 13:52:27 +02:00
|
|
|
|
2020-05-16 13:54:11 +02:00
|
|
|
.alert-msg {
|
|
|
|
top: -3px;
|
|
|
|
}
|
2020-05-16 13:52:27 +02:00
|
|
|
|
2020-05-16 13:54:11 +02:00
|
|
|
.message_controls {
|
2020-07-04 02:13:10 +02:00
|
|
|
top: -5px;
|
2020-05-16 13:54:11 +02:00
|
|
|
}
|
2020-05-16 13:52:27 +02:00
|
|
|
|
2020-05-16 13:54:11 +02:00
|
|
|
.message_top_line {
|
|
|
|
margin-top: 6px;
|
|
|
|
}
|
2020-05-16 13:52:27 +02:00
|
|
|
|
2020-05-16 13:54:11 +02:00
|
|
|
.message_content:not(:empty) {
|
|
|
|
margin-top: -18px;
|
|
|
|
}
|
2020-05-16 13:52:27 +02:00
|
|
|
|
2020-05-16 13:54:11 +02:00
|
|
|
.message_edit {
|
|
|
|
margin-top: -14px;
|
|
|
|
}
|
2020-05-16 13:52:27 +02:00
|
|
|
}
|
|
|
|
|
2020-05-16 13:55:40 +02:00
|
|
|
.sender-status {
|
|
|
|
display: inline-block;
|
2020-08-06 02:42:07 +02:00
|
|
|
margin: 8px 0 8px -3px;
|
2020-05-16 13:55:40 +02:00
|
|
|
/* this normalizes the margin of the emoji reactions with normal messages. */
|
|
|
|
padding-bottom: 5px;
|
|
|
|
vertical-align: middle;
|
2021-06-11 23:01:11 +02:00
|
|
|
|
2020-05-16 13:55:40 +02:00
|
|
|
position: relative;
|
|
|
|
max-width: calc(100% - 50px);
|
|
|
|
|
2020-05-16 13:56:31 +02:00
|
|
|
.message_edit_notice {
|
|
|
|
line-height: 18px;
|
|
|
|
}
|
2016-06-01 19:57:04 +02:00
|
|
|
}
|
|
|
|
|
2014-01-31 21:36:31 +01:00
|
|
|
.message_edit_notice {
|
|
|
|
font-size: 10px;
|
2017-11-30 22:35:07 +01:00
|
|
|
opacity: 0.5;
|
2014-01-31 21:36:31 +01:00
|
|
|
line-height: 0px;
|
|
|
|
text-align: right;
|
2021-09-16 21:53:09 +02:00
|
|
|
padding-left: 5px;
|
|
|
|
width: 40px;
|
2014-03-12 19:08:03 +01:00
|
|
|
position: absolute;
|
2020-08-06 02:42:07 +02:00
|
|
|
left: 0;
|
2014-03-12 19:08:03 +01:00
|
|
|
top: 16px;
|
2019-08-27 01:23:48 +02:00
|
|
|
user-select: none;
|
2021-09-16 21:53:09 +02:00
|
|
|
white-space: nowrap;
|
|
|
|
overflow-x: clip;
|
2014-01-31 21:36:31 +01:00
|
|
|
}
|
|
|
|
|
2013-05-24 00:03:39 +02:00
|
|
|
.message_time {
|
2014-03-10 16:11:34 +01:00
|
|
|
display: block;
|
2017-03-08 03:55:47 +01:00
|
|
|
font-size: 12px;
|
2017-11-30 21:48:10 +01:00
|
|
|
opacity: 0.4;
|
2014-02-07 00:50:23 +01:00
|
|
|
padding: 1px;
|
2017-03-07 19:17:32 +01:00
|
|
|
font-weight: 400;
|
2014-01-31 21:36:31 +01:00
|
|
|
position: absolute;
|
2017-02-23 23:33:57 +01:00
|
|
|
right: -105px;
|
2014-03-10 16:11:34 +01:00
|
|
|
line-height: 20px;
|
2014-01-31 21:36:31 +01:00
|
|
|
text-align: right;
|
2021-06-15 21:30:10 +02:00
|
|
|
/* Disable blue link styling for the message timestamp link. */
|
|
|
|
color: hsl(0, 0%, 20%);
|
2019-04-14 15:21:40 +02:00
|
|
|
transition: background-color 1.5s ease-in, color 1.5s ease-in;
|
2014-02-07 00:50:23 +01:00
|
|
|
}
|
|
|
|
|
2017-03-27 11:07:04 +02:00
|
|
|
/* The way this overrides the menus with a background-color and a high
|
|
|
|
z-index is kinda hacky, and requires some annoying color-matching,
|
|
|
|
but it works. */
|
2018-01-16 01:12:12 +01:00
|
|
|
.alert-msg {
|
2017-03-27 11:07:04 +02:00
|
|
|
position: absolute;
|
|
|
|
right: -110px;
|
2018-10-12 07:22:46 +02:00
|
|
|
color: hsl(170, 48%, 54%);
|
2017-11-13 16:34:06 +01:00
|
|
|
background-color: hsl(0, 0%, 100%);
|
2017-03-27 11:07:04 +02:00
|
|
|
z-index: 999;
|
|
|
|
padding-left: 20px;
|
|
|
|
padding-right: 40px;
|
|
|
|
font-weight: 400;
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
2014-03-10 16:11:34 +01:00
|
|
|
.status-time {
|
|
|
|
top: 8px !important;
|
2014-01-31 23:52:18 +01:00
|
|
|
}
|
|
|
|
|
2013-05-21 17:47:44 +02:00
|
|
|
.message_controls {
|
2013-05-24 00:03:39 +02:00
|
|
|
display: inline-block;
|
|
|
|
position: absolute;
|
2020-07-04 02:13:10 +02:00
|
|
|
top: -1px;
|
2017-03-08 03:55:47 +01:00
|
|
|
right: -56px;
|
2020-07-04 02:13:10 +02:00
|
|
|
width: 54px;
|
|
|
|
height: 22px;
|
2017-02-23 23:33:57 +01:00
|
|
|
z-index: 1;
|
|
|
|
|
2020-09-15 22:23:01 +02:00
|
|
|
/* This is a bit tricky; we need to reserve space for the message
|
|
|
|
controls even when the message isn't hovered, so that hover
|
|
|
|
doesn't disturb the layout. Usually that would be just
|
|
|
|
visibility: hidden, but that cannot be animated, so we set
|
|
|
|
opacity as well, which can be animated. */
|
2021-04-14 09:24:35 +02:00
|
|
|
.message_control_button {
|
2019-03-19 21:17:48 +01:00
|
|
|
opacity: 0;
|
message_controls: Prevent clicks via visibility & not pointer-events.
Previously, the message controls had a bug where they would trigger on
mobile with a single tap over the area they occupy when visible. This
is wrong because a user would expect to first see the controls and
only trigger them once they are visible (with a second tap).
The above bug is caused by the fact that we were using "opacity: 0" on
".message_controls > div" to hide the controls and "opacity: 1" on
".messagebox &:hover .message_controls > div" to show the controls on
hover, however, this would not effect the click action because
"opacity". So we used "pointer-events: none;" and "pointer-events:
all;" with the hopes that it would prevented the above bug, but in
practice, it didn't.
(the most probable explanation being that tapping the message_control
area would cause the "&:hover" rule to trigger and change the
"pointer-event" to "all" before it could prevent the click trigger,
But that explanation is just conjecture.)
This commit replaces both "pointer-events" attributes with
"visibility: hidden" and "visibility: visible" respectively. The
result being that the message_controls behave identically to before,
except without the above bug.
The addition to the ".has_actions_popover .info" selector is important
because without it, we would regress on issue #3172.
Trivia:
An alternate approach to using "opacity" is to set the
"display" attribute to "none", however, using "display" prevents the
transition from animating (which is probably why we were using opacity
here in the first place). "visibility" does not prevent the transition
from animating.
History: The "pointer-events" attribute was introduced in
4d5aa3ddc9e603d2216738f3dffa59ec09ffd830 and it replaced prior code
which relied on the "visibility" attribute... But it seems PR #3792
was mostly focused on improving the positioning through removal of
`display: none`, but introduced opacity to make the animations work
rather than visibility as the replacement solution, which requires the
pointer-events hack and resulted in the bug described here.
Fixes the second bug described in #13642.
2020-06-20 11:11:58 +02:00
|
|
|
visibility: hidden;
|
2019-03-19 21:17:48 +01:00
|
|
|
transition: all 0.2s ease;
|
2020-07-04 02:13:10 +02:00
|
|
|
width: 16px;
|
|
|
|
text-align: center;
|
2021-06-12 00:00:45 +02:00
|
|
|
display: inline-block;
|
|
|
|
position: relative;
|
|
|
|
color: hsl(0, 0%, 73%);
|
2020-07-04 02:13:10 +02:00
|
|
|
|
|
|
|
> i {
|
|
|
|
vertical-align: middle;
|
|
|
|
}
|
2019-03-19 21:17:48 +01:00
|
|
|
}
|
2017-02-23 23:33:57 +01:00
|
|
|
|
2021-04-10 19:20:51 +02:00
|
|
|
/* Tooltips should not follow the width restrictions of their parent element. */
|
|
|
|
[data-tippy-root] {
|
|
|
|
width: max-content;
|
|
|
|
word-wrap: unset;
|
|
|
|
}
|
|
|
|
|
2019-03-19 21:17:48 +01:00
|
|
|
> .reaction_button {
|
|
|
|
&:hover {
|
|
|
|
color: hsl(200, 100%, 40%);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-06-12 00:00:45 +02:00
|
|
|
.edit_content {
|
|
|
|
width: 12px;
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
cursor: pointer;
|
|
|
|
color: hsl(200, 100%, 40%);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-03-19 21:17:48 +01:00
|
|
|
&.sender-status-controls {
|
|
|
|
top: 10px;
|
|
|
|
}
|
2019-03-19 21:19:47 +01:00
|
|
|
|
|
|
|
.message_failed {
|
2019-03-19 21:26:42 +01:00
|
|
|
opacity: 1 !important;
|
2019-03-19 21:25:44 +01:00
|
|
|
display: inline-flex;
|
|
|
|
justify-content: space-between;
|
|
|
|
/* error icon width is 11px, gap between icons equals 28px - 2*11px = 6px */
|
|
|
|
width: 30px;
|
2019-03-19 21:19:47 +01:00
|
|
|
cursor: pointer;
|
|
|
|
position: relative;
|
2021-03-19 00:11:44 +01:00
|
|
|
vertical-align: middle;
|
2019-03-19 21:19:47 +01:00
|
|
|
|
|
|
|
.rotating {
|
|
|
|
display: inline-block;
|
|
|
|
|
|
|
|
animation: rotate 1s infinite linear;
|
|
|
|
}
|
2021-07-17 15:00:38 +02:00
|
|
|
|
|
|
|
.failed_message_action {
|
|
|
|
opacity: 1 !important;
|
|
|
|
color: hsl(0, 100%, 50%);
|
|
|
|
font-weight: bold;
|
|
|
|
}
|
2021-12-12 14:32:32 +01:00
|
|
|
|
|
|
|
.message_control_button {
|
|
|
|
visibility: inherit;
|
|
|
|
}
|
2019-03-19 21:19:47 +01:00
|
|
|
}
|
2020-07-03 17:49:19 +02:00
|
|
|
|
|
|
|
.star_container {
|
|
|
|
&:not(.empty-star) {
|
|
|
|
color: hsl(106, 77%, 29%);
|
|
|
|
|
2020-09-15 22:23:01 +02:00
|
|
|
/* Opacity/visibility as though the message is hovered. */
|
2020-07-03 17:49:19 +02:00
|
|
|
opacity: 1 !important;
|
|
|
|
visibility: visible !important;
|
|
|
|
}
|
|
|
|
}
|
2017-02-23 23:33:57 +01:00
|
|
|
}
|
|
|
|
|
2019-03-19 21:17:48 +01:00
|
|
|
.star {
|
|
|
|
&:hover {
|
|
|
|
cursor: pointer;
|
|
|
|
color: hsl(153, 80%, 25%);
|
|
|
|
}
|
2017-02-23 23:33:57 +01:00
|
|
|
}
|
|
|
|
|
2020-05-16 14:23:29 +02:00
|
|
|
.messagebox {
|
2020-05-16 14:24:27 +02:00
|
|
|
position: relative;
|
2020-05-16 14:23:29 +02:00
|
|
|
word-wrap: break-word;
|
|
|
|
cursor: pointer;
|
|
|
|
vertical-align: top;
|
|
|
|
border: none;
|
|
|
|
|
2020-07-28 05:44:57 +02:00
|
|
|
&:hover .message_controls,
|
2021-07-17 15:00:38 +02:00
|
|
|
&:focus-within .message_controls,
|
|
|
|
&:hover .message_failed,
|
|
|
|
&:focus-within .message_failed {
|
2020-05-16 14:25:42 +02:00
|
|
|
.empty-star:hover {
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
2019-03-19 21:17:48 +01:00
|
|
|
|
2020-05-16 14:25:42 +02:00
|
|
|
> div {
|
|
|
|
opacity: 1;
|
message_controls: Prevent clicks via visibility & not pointer-events.
Previously, the message controls had a bug where they would trigger on
mobile with a single tap over the area they occupy when visible. This
is wrong because a user would expect to first see the controls and
only trigger them once they are visible (with a second tap).
The above bug is caused by the fact that we were using "opacity: 0" on
".message_controls > div" to hide the controls and "opacity: 1" on
".messagebox &:hover .message_controls > div" to show the controls on
hover, however, this would not effect the click action because
"opacity". So we used "pointer-events: none;" and "pointer-events:
all;" with the hopes that it would prevented the above bug, but in
practice, it didn't.
(the most probable explanation being that tapping the message_control
area would cause the "&:hover" rule to trigger and change the
"pointer-event" to "all" before it could prevent the click trigger,
But that explanation is just conjecture.)
This commit replaces both "pointer-events" attributes with
"visibility: hidden" and "visibility: visible" respectively. The
result being that the message_controls behave identically to before,
except without the above bug.
The addition to the ".has_actions_popover .info" selector is important
because without it, we would regress on issue #3172.
Trivia:
An alternate approach to using "opacity" is to set the
"display" attribute to "none", however, using "display" prevents the
transition from animating (which is probably why we were using opacity
here in the first place). "visibility" does not prevent the transition
from animating.
History: The "pointer-events" attribute was introduced in
4d5aa3ddc9e603d2216738f3dffa59ec09ffd830 and it replaced prior code
which relied on the "visibility" attribute... But it seems PR #3792
was mostly focused on improving the positioning through removal of
`display: none`, but introduced opacity to make the animations work
rather than visibility as the replacement solution, which requires the
pointer-events hack and resulted in the bug described here.
Fixes the second bug described in #13642.
2020-06-20 11:11:58 +02:00
|
|
|
visibility: visible;
|
2020-05-16 14:25:42 +02:00
|
|
|
}
|
2019-03-19 21:17:48 +01:00
|
|
|
}
|
2013-11-21 12:11:50 +01:00
|
|
|
|
2020-05-16 14:25:42 +02:00
|
|
|
.message_top_line {
|
|
|
|
position: relative;
|
|
|
|
}
|
2020-05-16 14:23:29 +02:00
|
|
|
}
|
|
|
|
|
2012-10-17 22:03:00 +02:00
|
|
|
.message_header {
|
2012-09-27 21:34:15 +02:00
|
|
|
vertical-align: middle;
|
2017-03-14 16:36:22 +01:00
|
|
|
text-align: left;
|
2013-02-13 23:23:26 +01:00
|
|
|
/* We can overflow-y if the font size gets big */
|
2017-03-14 16:36:22 +01:00
|
|
|
overflow: hidden;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
white-space: nowrap;
|
|
|
|
font-weight: 600;
|
|
|
|
line-height: 14px;
|
2014-02-21 19:40:13 +01:00
|
|
|
position: relative;
|
|
|
|
z-index: 0;
|
2013-12-09 20:15:33 +01:00
|
|
|
}
|
|
|
|
|
2020-05-16 14:31:55 +02:00
|
|
|
.message_list {
|
|
|
|
.recipient_row {
|
|
|
|
border-bottom: 1px solid hsl(0, 0%, 88%);
|
|
|
|
margin-bottom: 10px;
|
|
|
|
}
|
2020-05-16 14:30:24 +02:00
|
|
|
}
|
|
|
|
|
2020-05-16 15:58:09 +02:00
|
|
|
.floating_recipient {
|
|
|
|
.recipient_row {
|
|
|
|
border-top: 1px solid hsl(0, 0%, 88%);
|
|
|
|
}
|
2017-05-16 23:46:11 +02:00
|
|
|
|
2020-05-16 15:58:09 +02:00
|
|
|
.recipient_row_date.hide-date {
|
|
|
|
display: block;
|
|
|
|
}
|
2020-05-16 15:56:28 +02:00
|
|
|
|
2020-05-16 15:58:09 +02:00
|
|
|
/*
|
|
|
|
We can't collapse the floating recipient bar yet, so this is
|
|
|
|
just a temporary hack.
|
|
|
|
*/
|
|
|
|
.messages-collapse {
|
|
|
|
display: none;
|
|
|
|
}
|
2020-05-16 15:56:28 +02:00
|
|
|
|
2020-05-16 15:58:09 +02:00
|
|
|
.message_header_private_message {
|
2020-08-06 02:42:07 +02:00
|
|
|
border-bottom: 0;
|
|
|
|
border-left: 0;
|
2020-05-16 15:58:09 +02:00
|
|
|
}
|
2020-05-16 15:56:28 +02:00
|
|
|
}
|
|
|
|
|
2014-01-15 17:11:37 +01:00
|
|
|
.stream_label {
|
|
|
|
display: inline-block;
|
2021-11-05 03:33:16 +01:00
|
|
|
padding: 4px 6px 3px;
|
2014-01-15 17:11:37 +01:00
|
|
|
font-weight: normal;
|
2014-01-17 16:11:18 +01:00
|
|
|
height: 17px;
|
|
|
|
line-height: 17px;
|
2021-11-05 03:16:06 +01:00
|
|
|
border-color: hsla(0, 0%, 0%, 0) hsla(0, 0%, 0%, 0) hsla(0, 0%, 0%, 0)
|
|
|
|
hsl(0, 0%, 88%);
|
2017-06-21 09:15:29 +02:00
|
|
|
background-color: hsl(0, 0%, 88%);
|
2020-08-06 02:42:07 +02:00
|
|
|
border-width: 0;
|
2014-01-15 17:11:37 +01:00
|
|
|
position: relative;
|
|
|
|
text-decoration: none;
|
2014-01-17 16:11:18 +01:00
|
|
|
|
2021-11-19 18:56:24 +01:00
|
|
|
.recipient-row-stream-icon {
|
2020-05-16 16:00:24 +02:00
|
|
|
font-size: 12px;
|
2022-03-01 11:25:40 +01:00
|
|
|
line-height: 12px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.zulip-icon.zulip-icon-globe {
|
|
|
|
position: relative;
|
|
|
|
top: 1px;
|
2020-05-16 16:00:24 +02:00
|
|
|
}
|
2014-01-15 17:11:37 +01:00
|
|
|
|
2020-05-16 16:00:24 +02:00
|
|
|
&:hover {
|
|
|
|
text-decoration: none;
|
|
|
|
}
|
2018-02-16 01:47:38 +01:00
|
|
|
|
2020-05-16 16:00:24 +02:00
|
|
|
&::after {
|
|
|
|
left: 100%;
|
|
|
|
top: 50%;
|
|
|
|
content: " ";
|
2020-08-06 02:42:07 +02:00
|
|
|
height: 0;
|
|
|
|
width: 0;
|
2020-05-16 16:00:24 +02:00
|
|
|
position: absolute;
|
|
|
|
pointer-events: none;
|
|
|
|
margin-top: -11px;
|
|
|
|
border-style: solid;
|
|
|
|
border-width: 11px 0 11px 5px;
|
|
|
|
border-color: inherit;
|
|
|
|
z-index: 2;
|
2020-08-04 23:58:56 +02:00
|
|
|
transform: scale(0.9999);
|
2020-05-16 16:00:24 +02:00
|
|
|
}
|
2018-02-16 01:47:38 +01:00
|
|
|
}
|
|
|
|
|
2014-01-17 16:11:18 +01:00
|
|
|
.stream_topic {
|
|
|
|
display: inline-block;
|
2020-07-06 15:56:45 +02:00
|
|
|
padding: 3px 3px 2px 9px;
|
2014-01-17 16:11:18 +01:00
|
|
|
height: 17px;
|
|
|
|
line-height: 17px;
|
2020-07-06 15:56:45 +02:00
|
|
|
overflow: hidden;
|
|
|
|
text-overflow: ellipsis;
|
2014-01-17 16:11:18 +01:00
|
|
|
}
|
|
|
|
|
2020-07-06 15:56:45 +02:00
|
|
|
.recipient_bar_controls {
|
|
|
|
flex-grow: 1;
|
|
|
|
}
|
2016-08-18 22:18:33 +02:00
|
|
|
|
2020-07-06 15:56:45 +02:00
|
|
|
.recipient_row_date {
|
2017-06-21 09:15:29 +02:00
|
|
|
color: hsl(0, 0%, 53%);
|
2017-03-08 03:55:47 +01:00
|
|
|
font-size: 12px;
|
2016-08-18 22:18:33 +02:00
|
|
|
font-weight: 600;
|
2017-03-08 03:55:47 +01:00
|
|
|
padding: 3px 11px 2px 10px;
|
2016-08-18 22:18:33 +02:00
|
|
|
height: 17px;
|
|
|
|
line-height: 17px;
|
|
|
|
|
2020-05-16 16:01:27 +02:00
|
|
|
&.hide-date {
|
|
|
|
display: none;
|
|
|
|
}
|
2016-08-18 22:18:33 +02:00
|
|
|
}
|
|
|
|
|
2020-04-01 20:00:43 +02:00
|
|
|
.recipient_bar_icon {
|
|
|
|
padding-left: 2px;
|
|
|
|
padding-right: 2px;
|
|
|
|
}
|
|
|
|
|
2021-08-02 20:09:56 +02:00
|
|
|
#mark_as_read_turned_off_banner {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
|
|
#mark_as_read_turned_off_content {
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.mark_as_read_close {
|
|
|
|
margin-top: 6px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-05-16 16:10:32 +02:00
|
|
|
.summary_row {
|
|
|
|
.message_header {
|
2020-08-06 02:42:07 +02:00
|
|
|
padding: 5px 0 4px 5px;
|
2020-05-16 16:10:32 +02:00
|
|
|
border-radius: 0;
|
|
|
|
}
|
2013-08-07 23:50:49 +02:00
|
|
|
|
2020-05-16 16:10:32 +02:00
|
|
|
&.last_message {
|
|
|
|
.message_header {
|
|
|
|
border-bottom-right-radius: 3px;
|
2020-08-06 02:42:07 +02:00
|
|
|
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%);
|
2020-05-16 16:10:32 +02:00
|
|
|
}
|
2013-08-07 23:50:49 +02:00
|
|
|
|
2020-05-16 16:10:32 +02:00
|
|
|
.summary_colorblock {
|
|
|
|
border-bottom-left-radius: 3px;
|
|
|
|
}
|
|
|
|
}
|
2013-08-07 23:50:49 +02:00
|
|
|
}
|
|
|
|
|
2020-05-16 16:12:01 +02:00
|
|
|
.bookend_tr + .summary_row {
|
|
|
|
.message_header {
|
|
|
|
border-top-right-radius: 3px;
|
|
|
|
}
|
2020-05-16 16:08:39 +02:00
|
|
|
|
2020-05-16 16:12:01 +02:00
|
|
|
.summary_colorblock {
|
|
|
|
border-top-left-radius: 3px;
|
|
|
|
}
|
2020-05-16 16:08:39 +02:00
|
|
|
}
|
|
|
|
|
2013-07-17 22:53:07 +02:00
|
|
|
.copy-paste-text {
|
|
|
|
/* Hide the text that we want copy paste to capture */
|
|
|
|
position: absolute;
|
|
|
|
text-indent: -99999px;
|
|
|
|
float: left;
|
2020-08-06 02:42:07 +02:00
|
|
|
width: 0;
|
2013-07-17 22:53:07 +02:00
|
|
|
}
|
|
|
|
|
2013-08-07 23:50:49 +02:00
|
|
|
.summary_row_private_message .summary_colorblock {
|
2018-10-08 22:31:26 +02:00
|
|
|
background-color: hsl(0, 0%, 0%);
|
2013-08-07 23:50:49 +02:00
|
|
|
}
|
|
|
|
|
2013-09-11 20:42:25 +02:00
|
|
|
.messages-expand,
|
|
|
|
.messages-collapse {
|
2016-09-28 02:42:55 +02:00
|
|
|
cursor: pointer;
|
2013-09-11 18:47:45 +02:00
|
|
|
}
|
|
|
|
|
2014-01-03 20:39:12 +01:00
|
|
|
@keyframes rotate {
|
2017-03-18 23:49:11 +01:00
|
|
|
from {
|
|
|
|
transform: rotate(0deg);
|
|
|
|
}
|
2017-11-13 17:26:11 +01:00
|
|
|
|
2017-03-18 23:49:11 +01:00
|
|
|
to {
|
|
|
|
transform: rotate(359deg);
|
|
|
|
}
|
2014-01-03 20:39:12 +01:00
|
|
|
}
|
|
|
|
|
2017-04-13 22:33:26 +02:00
|
|
|
@keyframes fadeInMessage {
|
|
|
|
0% {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
2017-11-13 17:26:11 +01:00
|
|
|
|
2017-04-13 22:33:26 +02:00
|
|
|
100% {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes fadeInEditNotice {
|
|
|
|
0% {
|
|
|
|
transform: translateX(-10px);
|
|
|
|
}
|
2017-11-13 17:26:11 +01:00
|
|
|
|
2017-04-13 22:33:26 +02:00
|
|
|
100% {
|
2020-08-06 02:42:07 +02:00
|
|
|
transform: translateX(0);
|
2017-04-13 22:33:26 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-05-16 16:19:36 +02:00
|
|
|
.message_header_private_message {
|
|
|
|
.message_label_clickable {
|
|
|
|
background-color: hsl(0, 0%, 27%);
|
|
|
|
display: inline-block;
|
2021-11-05 03:33:16 +01:00
|
|
|
padding: 3px 6px 2px;
|
2020-05-16 16:19:36 +02:00
|
|
|
font-weight: normal;
|
|
|
|
height: 17px;
|
|
|
|
line-height: 17px;
|
|
|
|
border-left-color: hsl(0, 0%, 27%);
|
|
|
|
}
|
2013-06-27 08:49:38 +02:00
|
|
|
|
2022-02-08 00:13:33 +01:00
|
|
|
/* Base color backgrounds for message boxes,
|
2020-05-16 16:19:36 +02:00
|
|
|
private messages, mentions, and unread messages */
|
2013-07-18 21:30:37 +02:00
|
|
|
|
2020-05-16 16:19:36 +02:00
|
|
|
.message-header-contents {
|
|
|
|
background-color: hsla(192, 19%, 75%, 0.2);
|
2020-08-06 02:42:07 +02:00
|
|
|
box-shadow: inset 1px 1px 0 hsl(0, 0%, 88%);
|
2020-05-16 16:19:36 +02:00
|
|
|
}
|
2013-07-17 20:52:19 +02:00
|
|
|
}
|
|
|
|
|
2020-05-16 16:23:28 +02:00
|
|
|
.private-message {
|
|
|
|
.alert-msg {
|
|
|
|
background-color: hsl(192, 20%, 95%);
|
|
|
|
}
|
2020-05-16 16:21:50 +02:00
|
|
|
|
2020-05-16 16:23:28 +02:00
|
|
|
.messagebox,
|
|
|
|
.date_row {
|
|
|
|
background-color: hsla(192, 19%, 75%, 0.2);
|
2020-08-06 02:42:07 +02:00
|
|
|
box-shadow: inset 2px 0 0 0 hsl(0, 0%, 27%), -1px 0 0 0 hsl(0, 0%, 27%);
|
2020-05-16 16:23:28 +02:00
|
|
|
}
|
2019-05-02 08:45:40 +02:00
|
|
|
}
|
|
|
|
|
2017-05-16 23:42:04 +02:00
|
|
|
.message-header-contents {
|
2020-07-06 15:56:45 +02:00
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
2020-07-13 21:41:44 +02:00
|
|
|
justify-content: space-between;
|
2017-06-21 09:15:29 +02:00
|
|
|
border-right: 1px solid hsl(0, 0%, 88%);
|
2020-05-16 16:27:55 +02:00
|
|
|
background-color: hsl(0, 0%, 88%);
|
2014-02-24 19:30:22 +01:00
|
|
|
}
|
|
|
|
|
2019-02-14 00:30:19 +01:00
|
|
|
.mention .messagebox {
|
2017-06-21 09:15:29 +02:00
|
|
|
background-color: hsl(8, 94%, 94%);
|
2013-06-27 08:49:38 +02:00
|
|
|
}
|
|
|
|
|
2014-02-21 19:40:13 +01:00
|
|
|
.recipient_row .message_row:first-child .unread_marker {
|
2020-08-06 02:42:07 +02:00
|
|
|
top: 0;
|
2014-02-21 19:40:13 +01:00
|
|
|
}
|
|
|
|
|
2014-01-06 18:01:21 +01:00
|
|
|
.unread_marker {
|
2013-07-18 22:16:01 +02:00
|
|
|
display: block;
|
2013-07-08 23:25:07 +02:00
|
|
|
position: absolute;
|
2022-01-29 07:20:37 +01:00
|
|
|
height: 100%;
|
2014-02-24 19:30:22 +01:00
|
|
|
left: 2px;
|
2020-08-06 02:42:07 +02:00
|
|
|
top: 0;
|
2014-02-24 19:30:22 +01:00
|
|
|
opacity: 0;
|
2014-02-18 17:05:27 +01:00
|
|
|
z-index: 1;
|
2019-02-22 22:01:03 +01:00
|
|
|
bottom: 1px;
|
2019-04-14 15:21:40 +02:00
|
|
|
transition: all 0.3s ease-out;
|
2014-02-18 17:05:27 +01:00
|
|
|
|
2020-05-17 04:22:38 +02:00
|
|
|
&.slow_fade {
|
|
|
|
transition: all 2s ease-out;
|
|
|
|
}
|
2020-05-17 04:20:14 +02:00
|
|
|
|
2020-05-17 04:22:38 +02:00
|
|
|
&.fast_fade {
|
|
|
|
transition: all 0.3s ease-out;
|
|
|
|
}
|
2020-05-17 04:20:14 +02:00
|
|
|
}
|
|
|
|
|
2014-02-18 17:05:27 +01:00
|
|
|
.unread-marker-fill {
|
2018-10-08 22:31:26 +02:00
|
|
|
background-color: hsl(107, 74%, 29%);
|
2014-02-24 19:30:22 +01:00
|
|
|
width: 3px;
|
2014-02-18 17:05:27 +01:00
|
|
|
height: 100%;
|
2014-02-21 19:40:13 +01:00
|
|
|
}
|
|
|
|
|
2020-05-17 04:26:30 +02:00
|
|
|
.last_message {
|
|
|
|
.unread_marker {
|
|
|
|
bottom: 0;
|
|
|
|
}
|
2014-02-18 17:05:27 +01:00
|
|
|
|
2020-05-17 04:26:30 +02:00
|
|
|
.messagebox-content {
|
|
|
|
padding-bottom: 1px;
|
|
|
|
}
|
2020-05-17 04:25:24 +02:00
|
|
|
}
|
|
|
|
|
2014-02-18 17:05:27 +01:00
|
|
|
.unread .unread_marker {
|
2019-04-14 15:21:40 +02:00
|
|
|
transition: all 0.3s ease-out;
|
2014-02-18 17:05:27 +01:00
|
|
|
opacity: 1;
|
2013-07-26 17:19:13 +02:00
|
|
|
}
|
|
|
|
|
2020-05-17 04:28:41 +02:00
|
|
|
.selected_message {
|
|
|
|
.messagebox {
|
|
|
|
z-index: 1;
|
|
|
|
}
|
2013-07-22 20:08:53 +02:00
|
|
|
|
2020-05-17 04:28:41 +02:00
|
|
|
.messagebox-content {
|
2020-08-06 02:42:07 +02:00
|
|
|
box-shadow: inset 0 0 0 2px hsl(215, 47%, 50%),
|
|
|
|
-1px -1px 0 0 hsl(215, 47%, 50%), 1px 1px 0 0 hsl(215, 47%, 50%),
|
|
|
|
-1px 1px 0 0 hsl(215, 47%, 50%), 1px -1px 0 0 hsl(215, 47%, 50%);
|
2020-05-17 04:28:41 +02:00
|
|
|
}
|
2014-02-24 19:30:22 +01:00
|
|
|
}
|
2013-07-22 20:08:53 +02:00
|
|
|
|
2013-05-10 22:48:02 +02:00
|
|
|
.message_sender {
|
2020-08-06 02:42:07 +02:00
|
|
|
height: 0;
|
2013-05-10 22:48:02 +02:00
|
|
|
vertical-align: top;
|
2013-05-21 17:47:44 +02:00
|
|
|
position: relative;
|
2013-05-10 22:48:02 +02:00
|
|
|
|
2021-04-29 02:13:54 +02:00
|
|
|
i.zulip-icon.zulip-icon-bot {
|
2020-05-17 04:58:44 +02:00
|
|
|
font-size: 12px;
|
|
|
|
}
|
2020-05-17 04:57:44 +02:00
|
|
|
}
|
|
|
|
|
2012-10-09 23:58:24 +02:00
|
|
|
.sender_name {
|
2013-05-10 22:48:02 +02:00
|
|
|
display: inline-block;
|
2014-03-01 05:01:24 +01:00
|
|
|
font-weight: 700;
|
2013-06-28 01:35:19 +02:00
|
|
|
vertical-align: top;
|
2014-01-31 21:36:31 +01:00
|
|
|
line-height: 12px;
|
2013-05-10 22:48:02 +02:00
|
|
|
}
|
|
|
|
|
2014-06-10 22:34:36 +02:00
|
|
|
.sender_name-in-status {
|
2014-01-31 23:52:18 +01:00
|
|
|
margin-right: 3px;
|
2014-06-10 22:34:36 +02:00
|
|
|
font-weight: 700;
|
2013-11-12 17:21:58 +01:00
|
|
|
}
|
|
|
|
|
2020-05-17 05:00:44 +02:00
|
|
|
.sender_name_hovered {
|
|
|
|
.sender_name,
|
|
|
|
.sender_name-in-status {
|
|
|
|
color: hsl(200, 100%, 40%);
|
|
|
|
}
|
2013-05-21 17:47:44 +02:00
|
|
|
}
|
|
|
|
|
2021-04-29 02:13:54 +02:00
|
|
|
.popover_info i.zulip-icon.zulip-icon-bot {
|
2017-10-16 05:40:09 +02:00
|
|
|
margin-top: 3px;
|
|
|
|
}
|
|
|
|
|
2013-07-11 23:06:58 +02:00
|
|
|
.actions_hover:hover {
|
2017-06-21 09:15:29 +02:00
|
|
|
color: hsl(200, 100%, 40%);
|
2013-07-11 23:06:58 +02:00
|
|
|
}
|
|
|
|
|
2022-03-04 21:53:28 +01:00
|
|
|
.always_visible_topic_edit,
|
2021-04-30 07:44:43 +02:00
|
|
|
.on_hover_topic_unmute {
|
|
|
|
opacity: 0.7;
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
cursor: pointer;
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-03-01 07:07:28 +01:00
|
|
|
.on_hover_topic_edit,
|
|
|
|
.on_hover_topic_read,
|
2021-07-13 18:12:02 +02:00
|
|
|
.on_hover_topic_unresolve,
|
2021-06-27 09:16:03 +02:00
|
|
|
.on_hover_topic_resolve,
|
2021-04-30 07:44:43 +02:00
|
|
|
.on_hover_topic_mute {
|
|
|
|
opacity: 0.2;
|
2021-10-16 21:57:26 +02:00
|
|
|
|
2021-04-30 07:44:43 +02:00
|
|
|
&:hover {
|
|
|
|
cursor: pointer;
|
|
|
|
opacity: 0.7;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-02-17 15:51:49 +01:00
|
|
|
.has_actions_popover .info {
|
2017-02-23 23:33:57 +01:00
|
|
|
opacity: 1;
|
message_controls: Prevent clicks via visibility & not pointer-events.
Previously, the message controls had a bug where they would trigger on
mobile with a single tap over the area they occupy when visible. This
is wrong because a user would expect to first see the controls and
only trigger them once they are visible (with a second tap).
The above bug is caused by the fact that we were using "opacity: 0" on
".message_controls > div" to hide the controls and "opacity: 1" on
".messagebox &:hover .message_controls > div" to show the controls on
hover, however, this would not effect the click action because
"opacity". So we used "pointer-events: none;" and "pointer-events:
all;" with the hopes that it would prevented the above bug, but in
practice, it didn't.
(the most probable explanation being that tapping the message_control
area would cause the "&:hover" rule to trigger and change the
"pointer-event" to "all" before it could prevent the click trigger,
But that explanation is just conjecture.)
This commit replaces both "pointer-events" attributes with
"visibility: hidden" and "visibility: visible" respectively. The
result being that the message_controls behave identically to before,
except without the above bug.
The addition to the ".has_actions_popover .info" selector is important
because without it, we would regress on issue #3172.
Trivia:
An alternate approach to using "opacity" is to set the
"display" attribute to "none", however, using "display" prevents the
transition from animating (which is probably why we were using opacity
here in the first place). "visibility" does not prevent the transition
from animating.
History: The "pointer-events" attribute was introduced in
4d5aa3ddc9e603d2216738f3dffa59ec09ffd830 and it replaced prior code
which relied on the "visibility" attribute... But it seems PR #3792
was mostly focused on improving the positioning through removal of
`display: none`, but introduced opacity to make the animations work
rather than visibility as the replacement solution, which requires the
pointer-events hack and resulted in the bug described here.
Fixes the second bug described in #13642.
2020-06-20 11:11:58 +02:00
|
|
|
visibility: visible;
|
2013-08-15 23:43:16 +02:00
|
|
|
}
|
|
|
|
|
2013-02-16 09:43:27 +01:00
|
|
|
/* Brighten text because of the dark background */
|
2013-10-03 23:05:46 +02:00
|
|
|
.dark_background a,
|
2014-02-21 19:40:13 +01:00
|
|
|
.dark_background a:hover,
|
|
|
|
a.dark_background:hover,
|
2013-02-16 09:43:27 +01:00
|
|
|
.dark_background {
|
2018-09-27 21:57:07 +02:00
|
|
|
color: hsl(0, 0%, 100%) !important;
|
2013-02-16 09:43:27 +01:00
|
|
|
}
|
|
|
|
|
2013-10-03 23:05:46 +02:00
|
|
|
.dark_background a.message_label_clickable:hover {
|
2017-06-21 09:15:29 +02:00
|
|
|
color: hsl(200, 99%, 60%);
|
2012-10-23 00:29:40 +02:00
|
|
|
}
|
|
|
|
|
2013-02-09 08:11:08 +01:00
|
|
|
.message_top_line {
|
2013-05-24 00:03:39 +02:00
|
|
|
position: relative;
|
2013-02-09 08:11:08 +01:00
|
|
|
}
|
|
|
|
|
2013-04-04 17:25:05 +02:00
|
|
|
.small {
|
|
|
|
font-size: 80%;
|
|
|
|
}
|
|
|
|
|
2013-07-15 23:50:53 +02:00
|
|
|
.tiny {
|
|
|
|
font-size: 60%;
|
|
|
|
}
|
|
|
|
|
2020-05-19 12:15:47 +02:00
|
|
|
.actions_hovered {
|
|
|
|
.message_time,
|
|
|
|
.info {
|
|
|
|
color: hsl(200, 100%, 40%);
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
2013-02-11 19:21:58 +01:00
|
|
|
|
2020-05-19 12:15:47 +02:00
|
|
|
.actions_link {
|
|
|
|
text-decoration: underline;
|
|
|
|
}
|
2020-05-19 12:15:02 +02:00
|
|
|
}
|
|
|
|
|
2021-06-11 23:36:38 +02:00
|
|
|
.settings-forgot-password {
|
2016-11-09 01:26:15 +01:00
|
|
|
display: inline-block;
|
|
|
|
position: relative;
|
2017-06-21 09:15:29 +02:00
|
|
|
color: hsl(0, 0%, 73%);
|
2021-07-22 17:50:43 +02:00
|
|
|
bottom: 4px;
|
2016-11-09 01:26:15 +01:00
|
|
|
}
|
|
|
|
|
2013-12-09 20:15:33 +01:00
|
|
|
div.message_table {
|
2013-06-22 00:21:55 +02:00
|
|
|
border-collapse: separate;
|
2012-09-11 19:42:06 +02:00
|
|
|
margin-left: auto;
|
2012-09-13 22:00:11 +02:00
|
|
|
display: none;
|
2012-10-02 20:47:01 +02:00
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
|
2014-01-06 18:01:21 +01:00
|
|
|
.message_row {
|
|
|
|
position: relative;
|
2020-08-04 23:58:56 +02:00
|
|
|
border-left: 1px solid hsla(0, 0%, 0%, 0.1);
|
|
|
|
border-right: 1px solid hsla(0, 0%, 0%, 0.1);
|
2014-02-21 19:40:13 +01:00
|
|
|
|
2020-05-19 12:19:24 +02:00
|
|
|
&.selected_message {
|
|
|
|
z-index: 2;
|
|
|
|
}
|
2014-01-06 18:01:21 +01:00
|
|
|
|
2020-05-19 12:19:24 +02:00
|
|
|
.date_row {
|
|
|
|
/* We only want padding for the date rows between recipient blocks */
|
2020-08-06 02:42:07 +02:00
|
|
|
padding-bottom: 0;
|
2020-05-19 12:19:24 +02:00
|
|
|
}
|
2020-05-19 12:18:33 +02:00
|
|
|
}
|
|
|
|
|
2013-12-09 20:15:33 +01:00
|
|
|
div.focused_table {
|
2014-01-06 16:24:26 +01:00
|
|
|
display: block;
|
2012-09-11 17:56:34 +02:00
|
|
|
}
|
|
|
|
|
2012-10-10 00:02:28 +02:00
|
|
|
.message_content {
|
2019-07-09 01:12:33 +02:00
|
|
|
line-height: 1.214;
|
2017-11-17 11:01:17 +01:00
|
|
|
min-height: 17px;
|
2017-03-23 23:22:06 +01:00
|
|
|
margin-left: 46px;
|
2013-12-09 20:15:33 +01:00
|
|
|
display: block;
|
2014-01-31 21:36:31 +01:00
|
|
|
position: relative;
|
2019-09-19 22:31:00 +02:00
|
|
|
overflow: hidden;
|
2014-03-12 19:08:03 +01:00
|
|
|
|
2020-05-19 12:21:44 +02:00
|
|
|
&:empty {
|
|
|
|
display: none;
|
|
|
|
}
|
2017-04-20 23:17:42 +02:00
|
|
|
|
2020-05-19 12:21:44 +02:00
|
|
|
&.condensed {
|
|
|
|
max-height: 8.5em;
|
2020-08-06 02:42:07 +02:00
|
|
|
min-height: 0;
|
2020-05-19 12:21:44 +02:00
|
|
|
overflow: hidden;
|
|
|
|
}
|
2020-05-19 12:20:55 +02:00
|
|
|
|
2020-05-19 12:21:44 +02:00
|
|
|
&.collapsed {
|
2020-08-06 02:42:07 +02:00
|
|
|
max-height: 0;
|
|
|
|
min-height: 0;
|
2020-05-19 12:21:44 +02:00
|
|
|
overflow: hidden;
|
|
|
|
}
|
2020-05-19 12:20:55 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.rtl {
|
|
|
|
direction: rtl;
|
|
|
|
}
|
|
|
|
|
2013-07-16 23:40:01 +02:00
|
|
|
.message_edit_content {
|
|
|
|
line-height: 18px;
|
2018-07-27 00:58:50 +02:00
|
|
|
resize: vertical !important;
|
2017-04-26 04:30:35 +02:00
|
|
|
max-height: 24em;
|
2013-07-16 23:40:01 +02:00
|
|
|
}
|
2014-01-17 16:11:18 +01:00
|
|
|
|
2016-07-08 02:25:55 +02:00
|
|
|
.message_edit_countdown_timer {
|
|
|
|
text-align: right;
|
|
|
|
display: inline;
|
2017-06-21 09:15:29 +02:00
|
|
|
color: hsl(0, 0%, 63%);
|
2016-07-08 02:25:55 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.message_edit_tooltip {
|
|
|
|
display: inline;
|
2017-06-21 09:15:29 +02:00
|
|
|
color: hsl(0, 0%, 63%);
|
2016-07-08 02:25:55 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.message-edit-timer-control-group {
|
|
|
|
float: right;
|
|
|
|
display: none;
|
2018-12-16 21:53:15 +01:00
|
|
|
margin-top: 5px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.message-edit-feature-group {
|
2020-10-02 07:42:00 +02:00
|
|
|
display: inline-flex;
|
2021-11-12 06:29:37 +01:00
|
|
|
margin: 0 auto -5px 10px;
|
2020-10-02 07:42:00 +02:00
|
|
|
align-items: baseline;
|
2016-07-08 02:25:55 +02:00
|
|
|
}
|
|
|
|
|
2021-07-03 19:18:57 +02:00
|
|
|
.message_edit_save .loader {
|
|
|
|
display: none;
|
|
|
|
vertical-align: top;
|
|
|
|
position: relative;
|
|
|
|
height: 28px;
|
|
|
|
margin-top: -10px;
|
|
|
|
top: 6px;
|
|
|
|
width: 30px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.edit-controls {
|
|
|
|
.btn-wrapper {
|
|
|
|
cursor: not-allowed;
|
|
|
|
}
|
2021-10-16 21:57:26 +02:00
|
|
|
|
2021-07-03 19:18:57 +02:00
|
|
|
.disable-btn {
|
|
|
|
pointer-events: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2014-01-17 16:11:18 +01:00
|
|
|
.topic_edit {
|
|
|
|
display: none;
|
|
|
|
line-height: 22px;
|
2021-10-16 21:57:26 +02:00
|
|
|
|
2020-04-13 12:39:50 +02:00
|
|
|
.alert {
|
|
|
|
display: inline-block;
|
|
|
|
margin: 0;
|
|
|
|
padding: 0 10px;
|
|
|
|
line-height: 17px;
|
|
|
|
}
|
2014-01-17 16:11:18 +01:00
|
|
|
}
|
|
|
|
|
2020-05-12 11:02:13 +02:00
|
|
|
#inline_topic_edit {
|
2016-08-26 21:36:10 +02:00
|
|
|
margin-bottom: 5px;
|
|
|
|
|
2020-05-19 12:24:12 +02:00
|
|
|
&.header-v {
|
|
|
|
height: 18px;
|
|
|
|
display: inline-block;
|
2020-08-06 02:42:07 +02:00
|
|
|
padding: 0 3px;
|
2020-05-19 12:24:12 +02:00
|
|
|
vertical-align: baseline;
|
|
|
|
line-height: 0px;
|
|
|
|
box-shadow: none;
|
|
|
|
}
|
2020-05-19 12:23:34 +02:00
|
|
|
}
|
|
|
|
|
2020-05-12 11:02:13 +02:00
|
|
|
#message_edit_topic {
|
|
|
|
margin: 0 5px 5px 0;
|
2021-09-15 11:37:21 +02:00
|
|
|
width: auto;
|
2020-05-06 12:07:34 +02:00
|
|
|
}
|
|
|
|
|
2020-05-12 11:02:13 +02:00
|
|
|
.message_edit_header {
|
|
|
|
display: flex;
|
|
|
|
flex-wrap: wrap;
|
|
|
|
justify-content: flex-start;
|
|
|
|
}
|
|
|
|
|
|
|
|
.select_edit_stream {
|
|
|
|
margin-bottom: 5px !important;
|
2020-08-06 02:42:07 +02:00
|
|
|
border-left: 0;
|
|
|
|
padding-left: 0;
|
2020-06-05 16:08:50 +02:00
|
|
|
border-radius: 3px;
|
|
|
|
margin-left: -10px;
|
2020-05-12 11:02:13 +02:00
|
|
|
text-indent: 10px;
|
2020-05-06 12:07:34 +02:00
|
|
|
}
|
|
|
|
|
2016-10-25 23:19:43 +02:00
|
|
|
#inline_topic_edit:focus,
|
2014-01-17 16:11:18 +01:00
|
|
|
#message_edit_topic:focus {
|
|
|
|
outline: none;
|
|
|
|
}
|
|
|
|
|
2016-07-11 02:29:36 +02:00
|
|
|
.message_edit_topic_propagate {
|
2021-09-15 11:37:21 +02:00
|
|
|
width: auto;
|
2016-08-26 21:36:10 +02:00
|
|
|
margin-bottom: 5px !important;
|
|
|
|
max-width: 100%;
|
2013-09-03 22:07:59 +02:00
|
|
|
}
|
2012-09-11 19:06:07 +02:00
|
|
|
|
2020-06-03 16:44:57 +02:00
|
|
|
.topic_move_breadcrumb_messages,
|
|
|
|
.message_edit_breadcrumb_messages {
|
|
|
|
margin: 0 5px 5px 0 !important;
|
|
|
|
align-self: center;
|
2020-07-06 10:36:31 +02:00
|
|
|
width: 100%;
|
2020-09-28 07:37:12 +02:00
|
|
|
white-space: nowrap;
|
2020-06-03 16:44:57 +02:00
|
|
|
|
|
|
|
label.checkbox {
|
2021-10-12 00:32:27 +02:00
|
|
|
/* Place the checkboxes on their own lines. */
|
|
|
|
display: block;
|
2021-10-16 21:57:26 +02:00
|
|
|
|
2020-06-03 16:44:57 +02:00
|
|
|
input {
|
|
|
|
margin: 0;
|
|
|
|
vertical-align: baseline;
|
|
|
|
}
|
2021-10-12 00:32:27 +02:00
|
|
|
|
|
|
|
& + label.checkbox {
|
|
|
|
margin-top: 10px;
|
|
|
|
}
|
2020-06-03 16:44:57 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
label {
|
|
|
|
display: inline-block;
|
|
|
|
margin-right: 10px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2013-03-13 22:47:38 +01:00
|
|
|
.message_length_controller {
|
|
|
|
display: none;
|
|
|
|
text-align: center;
|
2017-06-21 09:15:29 +02:00
|
|
|
color: hsl(200, 100%, 40%);
|
2013-03-20 23:08:39 +01:00
|
|
|
|
|
|
|
/* to match .message_content */
|
|
|
|
margin-left: 5px;
|
|
|
|
margin-right: 35px;
|
2017-02-05 12:14:43 +01:00
|
|
|
/* to make message-uncollapse easier */
|
|
|
|
margin-top: 10px;
|
2013-03-13 22:47:38 +01:00
|
|
|
|
2020-05-19 12:26:01 +02:00
|
|
|
&:hover {
|
|
|
|
text-decoration: underline;
|
|
|
|
}
|
2013-03-13 22:47:38 +01:00
|
|
|
}
|
|
|
|
|
2019-04-12 21:19:11 +02:00
|
|
|
.messagebox-content {
|
|
|
|
padding: 4px 115px 1px 10px;
|
|
|
|
}
|
|
|
|
|
2012-09-24 22:28:02 +02:00
|
|
|
.bookend {
|
2017-06-06 01:27:32 +02:00
|
|
|
margin-top: 10px;
|
2013-06-22 00:21:55 +02:00
|
|
|
background-color: transparent;
|
2012-08-29 18:29:01 +02:00
|
|
|
}
|
|
|
|
|
2012-09-24 22:28:02 +02:00
|
|
|
.next_is_same_sender {
|
2020-08-06 02:42:07 +02:00
|
|
|
border-bottom: 0;
|
|
|
|
padding-bottom: 0;
|
2012-09-13 22:00:11 +02:00
|
|
|
}
|
|
|
|
|
2013-05-10 22:48:02 +02:00
|
|
|
.inline_profile_picture {
|
|
|
|
display: inline-block;
|
2014-01-31 21:36:31 +01:00
|
|
|
width: 35px;
|
|
|
|
height: 35px;
|
|
|
|
margin-right: 11px;
|
2013-06-28 01:35:19 +02:00
|
|
|
vertical-align: top;
|
2017-06-15 21:13:47 +02:00
|
|
|
border-radius: 4px;
|
2017-06-26 16:12:49 +02:00
|
|
|
overflow: hidden;
|
2018-12-16 02:24:52 +01:00
|
|
|
|
|
|
|
&.guest-avatar::after {
|
|
|
|
outline: 2px solid hsl(0, 0%, 100%);
|
|
|
|
}
|
2013-01-07 23:41:36 +01:00
|
|
|
}
|
2012-08-29 18:29:01 +02:00
|
|
|
|
2012-10-17 20:43:20 +02:00
|
|
|
.home-error-bar {
|
2012-08-31 21:33:04 +02:00
|
|
|
margin-top: 5px;
|
|
|
|
display: none;
|
|
|
|
|
2020-05-19 12:28:32 +02:00
|
|
|
.alert {
|
|
|
|
margin-bottom: auto;
|
|
|
|
}
|
2012-08-31 21:33:04 +02:00
|
|
|
}
|
2012-09-10 20:31:53 +02:00
|
|
|
|
2020-05-19 12:27:32 +02:00
|
|
|
.streamname {
|
|
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
|
2013-01-16 21:42:35 +01:00
|
|
|
.brand.skinny-user-gravatar {
|
2013-03-06 20:46:33 +01:00
|
|
|
display: table-cell;
|
2020-08-06 02:42:07 +02:00
|
|
|
padding-top: 0;
|
|
|
|
padding-bottom: 0;
|
|
|
|
margin-bottom: 0;
|
2013-01-16 21:42:35 +01:00
|
|
|
white-space: nowrap;
|
|
|
|
}
|
|
|
|
|
2020-02-21 20:02:49 +01:00
|
|
|
.top-navbar-border {
|
|
|
|
border-right: 1px solid hsl(0, 0%, 88%);
|
|
|
|
border-left: 1px solid hsl(0, 0%, 88%);
|
|
|
|
}
|
|
|
|
|
2020-04-18 12:09:26 +02:00
|
|
|
.search_icon {
|
2021-07-02 03:07:40 +02:00
|
|
|
/* These rules match the .dropdown-toggle CSS for the gear menu. */
|
|
|
|
color: inherit;
|
|
|
|
opacity: 0.5;
|
2020-04-18 12:09:26 +02:00
|
|
|
text-decoration: none;
|
2021-10-16 21:57:26 +02:00
|
|
|
|
2020-04-18 12:09:26 +02:00
|
|
|
&:hover {
|
2021-07-02 03:07:40 +02:00
|
|
|
opacity: 1;
|
2020-04-18 12:09:26 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-07-08 23:44:01 +02:00
|
|
|
#message_view_header {
|
2013-05-09 21:12:53 +02:00
|
|
|
z-index: 2;
|
2016-04-09 05:50:24 +02:00
|
|
|
float: left;
|
2020-06-28 03:06:22 +02:00
|
|
|
height: $header_height;
|
|
|
|
width: 100%;
|
|
|
|
line-height: $header_height;
|
|
|
|
font-size: 16px;
|
|
|
|
display: flex;
|
|
|
|
align-content: flex-start;
|
|
|
|
flex-wrap: nowrap;
|
2021-11-05 03:33:16 +01:00
|
|
|
margin: 0;
|
2020-06-28 03:06:22 +02:00
|
|
|
border: none;
|
|
|
|
white-space: nowrap;
|
|
|
|
cursor: default;
|
2021-10-16 21:57:26 +02:00
|
|
|
|
2020-06-28 03:06:22 +02:00
|
|
|
.hidden {
|
|
|
|
display: none;
|
|
|
|
}
|
2021-10-16 21:57:26 +02:00
|
|
|
|
2022-03-01 11:25:40 +01:00
|
|
|
.zulip-icon.zulip-icon-globe {
|
|
|
|
font-size: 14px;
|
2022-03-25 08:25:33 +01:00
|
|
|
position: relative;
|
|
|
|
top: 1px;
|
2022-03-01 11:25:40 +01:00
|
|
|
}
|
|
|
|
|
2020-06-28 03:06:22 +02:00
|
|
|
.sub_count,
|
|
|
|
.stream,
|
|
|
|
& > span {
|
2019-03-10 19:08:36 +01:00
|
|
|
white-space: nowrap;
|
2020-06-28 03:06:22 +02:00
|
|
|
list-style-type: none;
|
|
|
|
display: inline-block;
|
|
|
|
vertical-align: top;
|
|
|
|
position: relative;
|
|
|
|
font-weight: 600;
|
|
|
|
font-size: 16px;
|
|
|
|
line-height: 16px;
|
|
|
|
margin: 0 -4px 0 0;
|
|
|
|
padding: 12px 6px;
|
2020-10-23 15:13:13 +02:00
|
|
|
overflow: hidden;
|
2020-10-23 15:33:50 +02:00
|
|
|
text-overflow: ellipsis;
|
2021-02-04 02:49:05 +01:00
|
|
|
@media (width < $sm_min) {
|
2020-09-15 22:23:01 +02:00
|
|
|
padding: 7px 3.5px; /* based on having ~41.66% decrease */
|
2020-06-28 03:06:22 +02:00
|
|
|
}
|
2021-10-16 21:57:26 +02:00
|
|
|
|
2020-06-28 03:06:22 +02:00
|
|
|
i {
|
|
|
|
margin-right: 3px;
|
|
|
|
}
|
2021-10-16 21:57:26 +02:00
|
|
|
|
2020-06-28 03:06:22 +02:00
|
|
|
.fa {
|
2020-08-06 02:42:07 +02:00
|
|
|
margin: 0 3px 0 5px;
|
2021-10-16 21:57:26 +02:00
|
|
|
|
2022-03-25 08:25:33 +01:00
|
|
|
&.fa-lock {
|
|
|
|
position: relative;
|
|
|
|
top: 0.5px;
|
|
|
|
}
|
|
|
|
|
2020-06-28 03:06:22 +02:00
|
|
|
.fa-envelope {
|
|
|
|
font-size: 14px;
|
2021-11-05 03:33:16 +01:00
|
|
|
margin: 0 5px;
|
2020-02-03 17:01:11 +01:00
|
|
|
}
|
2021-10-16 21:57:26 +02:00
|
|
|
|
2020-06-28 03:06:22 +02:00
|
|
|
.fa-hashtag {
|
|
|
|
font-size: 1.2rem;
|
2020-09-15 22:23:01 +02:00
|
|
|
/* font-weight: 800; */
|
2020-08-06 02:42:07 +02:00
|
|
|
margin: 0 2px 0 5px;
|
2020-02-03 17:01:11 +01:00
|
|
|
}
|
2019-03-10 19:08:36 +01:00
|
|
|
}
|
2020-06-28 03:06:22 +02:00
|
|
|
}
|
2014-01-08 16:12:22 +01:00
|
|
|
|
2020-06-28 03:06:22 +02:00
|
|
|
.stream {
|
|
|
|
text-overflow: clip;
|
|
|
|
color: inherit;
|
|
|
|
text-decoration: none;
|
2020-09-15 22:23:01 +02:00
|
|
|
/* The first ~3px of padding here overlaps with the left padding from sub_count for some reason. */
|
2020-06-28 03:06:22 +02:00
|
|
|
padding-right: calc(3px + 10px);
|
|
|
|
}
|
2013-05-09 21:12:53 +02:00
|
|
|
|
2020-06-28 03:06:22 +02:00
|
|
|
.sub_count,
|
|
|
|
.narrow_description {
|
|
|
|
background: none;
|
|
|
|
font-size: 14px;
|
|
|
|
color: hsl(0, 0%, 40%);
|
|
|
|
font-weight: 400;
|
|
|
|
line-height: 20px;
|
|
|
|
}
|
2020-02-03 17:01:11 +01:00
|
|
|
|
2020-06-28 03:06:22 +02:00
|
|
|
.sub_count {
|
|
|
|
padding-left: 10px;
|
|
|
|
margin-left: 1px;
|
|
|
|
padding-right: 10px;
|
|
|
|
margin-right: 1px;
|
2020-10-23 15:13:13 +02:00
|
|
|
overflow: visible;
|
2021-10-16 21:57:26 +02:00
|
|
|
|
2020-06-28 03:06:22 +02:00
|
|
|
.fa.fa-user-o {
|
2020-08-06 02:42:07 +02:00
|
|
|
margin-left: 0;
|
2020-06-28 03:06:22 +02:00
|
|
|
}
|
2020-05-11 09:37:40 +02:00
|
|
|
|
2020-06-28 03:06:22 +02:00
|
|
|
&::before,
|
|
|
|
&::after {
|
|
|
|
content: "|";
|
|
|
|
position: absolute;
|
|
|
|
top: 25%;
|
|
|
|
height: 50%;
|
|
|
|
color: hsl(0, 0%, 88%);
|
|
|
|
font-size: 20px;
|
2021-02-04 02:49:05 +01:00
|
|
|
@media (width < $sm_min) {
|
2020-06-28 03:06:22 +02:00
|
|
|
top: 10%;
|
2020-02-03 17:01:11 +01:00
|
|
|
}
|
2020-06-28 03:06:22 +02:00
|
|
|
}
|
2020-05-11 09:37:40 +02:00
|
|
|
|
2020-06-28 03:06:22 +02:00
|
|
|
&::before {
|
|
|
|
left: -3px;
|
2021-02-04 02:49:05 +01:00
|
|
|
@media (width < $sm_min) {
|
2020-09-15 22:23:01 +02:00
|
|
|
/* this ensures the before "|" doesn't overlap
|
|
|
|
with the stream name text on small narrows */
|
2020-08-06 02:42:07 +02:00
|
|
|
left: 0;
|
2020-05-11 09:37:40 +02:00
|
|
|
}
|
2020-06-28 03:06:22 +02:00
|
|
|
}
|
2020-05-11 09:37:40 +02:00
|
|
|
|
2020-06-28 03:06:22 +02:00
|
|
|
&::after {
|
|
|
|
right: -3px;
|
2020-02-03 17:01:11 +01:00
|
|
|
}
|
2020-06-28 03:06:22 +02:00
|
|
|
}
|
2020-02-03 17:01:11 +01:00
|
|
|
|
2020-06-28 03:06:22 +02:00
|
|
|
.narrow_description {
|
2020-09-15 22:23:01 +02:00
|
|
|
/* the actual value of flex shrink does not matter, it is the
|
|
|
|
ratio of this value to other flex items that determines the
|
|
|
|
behavior while shrinking, here the other item has the .stream
|
|
|
|
class and a flex of 1, so the value here *is* the ratio, and
|
|
|
|
is chosen such that the narrow description shrinks to close
|
|
|
|
before the stream name must begin to shrink */
|
2020-06-28 03:06:22 +02:00
|
|
|
flex-shrink: 100;
|
|
|
|
white-space: nowrap;
|
|
|
|
margin: 0;
|
2020-08-06 02:42:07 +02:00
|
|
|
padding: 12px 0;
|
2020-06-28 03:06:22 +02:00
|
|
|
padding-left: 10px;
|
2020-02-03 17:01:11 +01:00
|
|
|
|
2021-02-04 02:49:05 +01:00
|
|
|
@media (width < $sm_min) {
|
2020-06-28 03:06:22 +02:00
|
|
|
padding: 7px 0;
|
|
|
|
padding-left: 10px;
|
|
|
|
}
|
2020-04-22 19:24:52 +02:00
|
|
|
|
2020-06-28 03:06:22 +02:00
|
|
|
& > a {
|
2020-08-06 02:42:07 +02:00
|
|
|
padding: 12px 0;
|
2019-03-10 19:08:36 +01:00
|
|
|
}
|
2020-06-28 03:06:22 +02:00
|
|
|
}
|
2014-01-08 16:12:22 +01:00
|
|
|
|
2020-06-28 03:06:22 +02:00
|
|
|
.search_closed {
|
2020-10-23 15:13:13 +02:00
|
|
|
overflow: visible;
|
2020-09-15 22:23:01 +02:00
|
|
|
flex: 0; /* makes sure search icon is always visible */
|
2020-04-18 12:41:08 +02:00
|
|
|
|
2020-06-28 03:06:22 +02:00
|
|
|
cursor: pointer;
|
|
|
|
font-size: 20px;
|
2020-02-03 17:01:11 +01:00
|
|
|
|
2020-08-06 02:42:07 +02:00
|
|
|
padding: 10px 15px 0 0;
|
2021-02-04 02:49:05 +01:00
|
|
|
@media (width < $sm_min) {
|
2020-08-06 02:42:07 +02:00
|
|
|
padding: 5px 15px 0 0;
|
2019-03-10 19:08:36 +01:00
|
|
|
}
|
2020-06-28 03:06:22 +02:00
|
|
|
}
|
2020-06-12 00:00:52 +02:00
|
|
|
|
2020-09-15 22:23:01 +02:00
|
|
|
/* The very last element in the navbar is the search icon, the second
|
|
|
|
last element is either the narrow description (for stream narrows) or
|
|
|
|
the "title" (for other narrows). The flex-grow property ensures these
|
|
|
|
elements take up the entirety of the white space. */
|
2021-07-06 03:20:22 +02:00
|
|
|
.navbar-click-opens-search {
|
2020-06-28 03:06:22 +02:00
|
|
|
flex-grow: 1;
|
|
|
|
|
2021-07-06 03:20:22 +02:00
|
|
|
/* Provide the visual cue that clicking this will work as expected. */
|
2020-06-28 03:06:22 +02:00
|
|
|
cursor: pointer;
|
2021-10-16 21:57:26 +02:00
|
|
|
|
2021-10-06 17:58:11 +02:00
|
|
|
&:hover ~ .search_closed {
|
2021-10-05 20:24:15 +02:00
|
|
|
opacity: 1;
|
2020-06-12 00:00:52 +02:00
|
|
|
}
|
2019-03-10 19:08:36 +01:00
|
|
|
}
|
2014-01-08 16:12:22 +01:00
|
|
|
}
|
|
|
|
|
2020-05-15 13:13:50 +02:00
|
|
|
#searchbox,
|
|
|
|
#searchbox_legacy {
|
2014-01-08 16:12:22 +01:00
|
|
|
width: 100%;
|
2020-05-27 22:21:32 +02:00
|
|
|
height: $header_height;
|
2013-06-19 23:40:31 +02:00
|
|
|
|
2020-05-15 09:44:31 +02:00
|
|
|
.navbar-search:not(.expanded) {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
.navbar-search.expanded {
|
2018-07-14 11:59:32 +02:00
|
|
|
overflow: hidden;
|
2020-08-06 02:42:07 +02:00
|
|
|
margin-top: 0;
|
2020-05-15 09:44:31 +02:00
|
|
|
width: calc(100% - 2px);
|
|
|
|
position: absolute;
|
2021-10-16 21:57:26 +02:00
|
|
|
|
2020-05-15 09:44:31 +02:00
|
|
|
.search_button {
|
|
|
|
display: inline;
|
2020-06-09 19:38:34 +02:00
|
|
|
margin-right: 15px;
|
2020-05-15 09:44:31 +02:00
|
|
|
}
|
2018-07-14 11:59:32 +02:00
|
|
|
}
|
2013-06-19 23:40:31 +02:00
|
|
|
|
2018-07-14 11:59:32 +02:00
|
|
|
.input-append {
|
|
|
|
position: relative;
|
2020-05-15 09:44:31 +02:00
|
|
|
width: 100%;
|
2020-06-21 10:25:16 +02:00
|
|
|
width: max-content;
|
|
|
|
min-width: 100%;
|
2020-05-15 09:44:31 +02:00
|
|
|
|
|
|
|
.fa-search {
|
2020-08-06 02:42:07 +02:00
|
|
|
padding: 0;
|
2020-05-15 09:44:31 +02:00
|
|
|
font-size: 20px;
|
|
|
|
position: absolute;
|
|
|
|
left: 10px;
|
|
|
|
top: 10px;
|
|
|
|
z-index: 5;
|
|
|
|
}
|
|
|
|
|
|
|
|
.fa-search:not(.deactivated) {
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
2018-07-14 11:59:32 +02:00
|
|
|
}
|
2013-06-19 23:40:31 +02:00
|
|
|
|
2018-07-14 11:59:32 +02:00
|
|
|
#search_query {
|
|
|
|
width: 100%;
|
|
|
|
font-size: 16px;
|
2020-05-27 22:21:32 +02:00
|
|
|
height: $header_height;
|
2020-08-06 02:42:07 +02:00
|
|
|
padding: 0;
|
2018-07-14 16:10:00 +02:00
|
|
|
padding-left: 5px;
|
2018-07-14 11:59:32 +02:00
|
|
|
padding-right: 20px;
|
2018-07-14 12:26:31 +02:00
|
|
|
border: none;
|
2020-08-06 02:42:07 +02:00
|
|
|
border-radius: 0;
|
2021-04-03 03:37:00 +02:00
|
|
|
font-family: "Source Sans 3", sans-serif;
|
2018-07-14 12:26:31 +02:00
|
|
|
font-weight: 300;
|
2020-05-27 22:21:32 +02:00
|
|
|
line-height: $header_height;
|
2018-07-14 12:26:31 +02:00
|
|
|
}
|
|
|
|
|
2020-05-15 13:13:50 +02:00
|
|
|
#search_arrows:focus {
|
2020-08-06 02:42:07 +02:00
|
|
|
box-shadow: inset 0 0 0 2px hsl(204, 20%, 74%);
|
2020-05-15 09:44:31 +02:00
|
|
|
}
|
|
|
|
|
2018-07-14 12:26:31 +02:00
|
|
|
.search_button,
|
2020-10-30 00:26:54 +01:00
|
|
|
.search_button:disabled:hover {
|
2020-05-15 09:44:31 +02:00
|
|
|
position: absolute;
|
2020-06-09 19:38:34 +02:00
|
|
|
right: 35px;
|
2020-05-15 09:44:31 +02:00
|
|
|
top: 6px;
|
2018-07-14 12:26:31 +02:00
|
|
|
background: none;
|
2020-08-06 02:42:07 +02:00
|
|
|
border-radius: 0;
|
2020-05-15 09:44:31 +02:00
|
|
|
border: none;
|
|
|
|
height: 30px;
|
|
|
|
text-align: center;
|
2018-07-14 12:26:31 +02:00
|
|
|
padding: 4px;
|
2021-10-06 02:50:04 +02:00
|
|
|
color: inherit;
|
|
|
|
opacity: 0.5;
|
2018-07-14 12:26:31 +02:00
|
|
|
font-size: 18px;
|
|
|
|
box-shadow: none;
|
|
|
|
text-shadow: none;
|
|
|
|
z-index: 5;
|
|
|
|
}
|
|
|
|
|
|
|
|
.search_button:hover {
|
2021-10-06 02:50:04 +02:00
|
|
|
opacity: 1;
|
2018-07-14 12:26:31 +02:00
|
|
|
}
|
|
|
|
|
2020-10-30 00:26:54 +01:00
|
|
|
.search_button:disabled {
|
2018-07-14 12:26:31 +02:00
|
|
|
visibility: hidden;
|
|
|
|
}
|
|
|
|
|
2020-01-23 02:41:38 +01:00
|
|
|
.search_icon {
|
2020-05-15 13:13:50 +02:00
|
|
|
position: absolute;
|
2018-07-14 16:10:00 +02:00
|
|
|
height: 100%;
|
2018-07-14 12:26:31 +02:00
|
|
|
text-decoration: none;
|
2018-07-14 16:10:00 +02:00
|
|
|
padding: 0 10px;
|
|
|
|
font-size: 20px;
|
|
|
|
z-index: 5;
|
2020-08-06 02:42:07 +02:00
|
|
|
left: 0;
|
2018-07-14 12:26:31 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
#search_arrows {
|
2020-06-09 19:54:42 +02:00
|
|
|
padding-left: 35px;
|
2018-07-14 12:26:31 +02:00
|
|
|
font-size: 90%;
|
2018-07-14 16:10:00 +02:00
|
|
|
letter-spacing: normal;
|
|
|
|
}
|
|
|
|
|
2020-05-15 13:13:50 +02:00
|
|
|
.pill-container {
|
2020-06-20 15:16:13 +02:00
|
|
|
display: flex;
|
|
|
|
flex-wrap: nowrap;
|
|
|
|
align-items: center;
|
2020-05-15 13:13:50 +02:00
|
|
|
border: none;
|
2020-08-06 02:42:07 +02:00
|
|
|
padding: 0;
|
2020-05-15 13:13:50 +02:00
|
|
|
}
|
|
|
|
|
2021-02-04 02:49:05 +01:00
|
|
|
@media (width >= $sm_min) {
|
2018-07-14 16:10:00 +02:00
|
|
|
.pill {
|
2021-11-05 03:33:16 +01:00
|
|
|
padding: 2px 0 !important;
|
2018-07-14 16:10:00 +02:00
|
|
|
font-size: 14px;
|
|
|
|
}
|
|
|
|
}
|
2021-02-04 02:49:05 +01:00
|
|
|
@media (width < $sm_min) {
|
2018-07-14 16:10:00 +02:00
|
|
|
#search_arrows .pill {
|
|
|
|
line-height: 20px;
|
|
|
|
|
|
|
|
.exit {
|
|
|
|
top: 0;
|
|
|
|
}
|
|
|
|
}
|
2018-07-14 12:26:31 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-06-09 19:54:42 +02:00
|
|
|
#searchbox_legacy {
|
|
|
|
#search_arrows {
|
2020-08-06 02:42:07 +02:00
|
|
|
padding-left: 0;
|
2020-06-09 19:54:42 +02:00
|
|
|
}
|
2021-10-16 21:57:26 +02:00
|
|
|
|
2020-06-09 19:54:42 +02:00
|
|
|
#search_query {
|
|
|
|
padding-left: 35px;
|
|
|
|
}
|
2021-10-16 21:57:26 +02:00
|
|
|
|
2020-06-09 19:38:34 +02:00
|
|
|
.search_button {
|
2020-08-06 02:42:07 +02:00
|
|
|
right: 0;
|
2020-06-09 19:38:34 +02:00
|
|
|
}
|
2021-10-16 21:57:26 +02:00
|
|
|
|
2020-06-09 19:38:34 +02:00
|
|
|
.navbar-search.expanded {
|
|
|
|
.search_button {
|
|
|
|
margin-right: 14px;
|
|
|
|
}
|
|
|
|
}
|
2020-06-09 19:54:42 +02:00
|
|
|
}
|
|
|
|
|
2020-07-08 23:44:01 +02:00
|
|
|
#message_view_header_underpadding {
|
2020-03-27 20:48:20 +01:00
|
|
|
position: absolute;
|
|
|
|
width: 100%;
|
2020-05-27 22:21:32 +02:00
|
|
|
top: $header_height;
|
|
|
|
height: $header_padding_bottom;
|
2020-03-27 20:48:20 +01:00
|
|
|
z-index: 99;
|
|
|
|
}
|
|
|
|
|
|
|
|
#navbar-buttons {
|
|
|
|
white-space: nowrap;
|
|
|
|
margin-left: 15px;
|
|
|
|
margin-top: 7px;
|
|
|
|
display: inline-block;
|
|
|
|
float: right;
|
|
|
|
|
2020-05-19 12:39:16 +02:00
|
|
|
ul.nav {
|
2020-08-06 02:42:07 +02:00
|
|
|
margin: 0;
|
2020-03-27 20:48:20 +01:00
|
|
|
|
2020-05-19 12:39:16 +02:00
|
|
|
.dropdown-toggle,
|
|
|
|
li.active .dropdown-toggle {
|
|
|
|
font-size: 20px;
|
|
|
|
color: inherit;
|
|
|
|
opacity: 0.5;
|
|
|
|
text-shadow: none;
|
2020-08-06 02:42:07 +02:00
|
|
|
padding-left: 0 !important;
|
2020-05-19 12:39:16 +02:00
|
|
|
background-color: inherit;
|
|
|
|
box-shadow: inherit;
|
|
|
|
display: block;
|
|
|
|
position: absolute;
|
2020-06-21 18:59:37 +02:00
|
|
|
right: 6px;
|
|
|
|
top: -3px;
|
2020-05-19 12:39:16 +02:00
|
|
|
}
|
2020-05-19 12:37:31 +02:00
|
|
|
|
2021-03-08 22:21:53 +01:00
|
|
|
.dropdown-toggle:hover,
|
2020-05-19 12:39:16 +02:00
|
|
|
li.active .dropdown-toggle:hover {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
2020-05-19 12:37:31 +02:00
|
|
|
|
2020-05-19 12:39:16 +02:00
|
|
|
li.dropdown.open .dropdown-toggle {
|
|
|
|
background: none;
|
|
|
|
opacity: 1;
|
|
|
|
text-shadow: none;
|
|
|
|
}
|
2020-05-19 12:37:31 +02:00
|
|
|
|
2020-05-19 12:39:16 +02:00
|
|
|
li.dropdown li.divider {
|
|
|
|
margin-left: 15px;
|
|
|
|
margin-right: 15px;
|
|
|
|
}
|
2020-05-19 12:37:31 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-03-27 20:48:20 +01:00
|
|
|
#streamlist-toggle {
|
|
|
|
display: none;
|
|
|
|
position: absolute;
|
2020-08-06 02:42:07 +02:00
|
|
|
top: 0;
|
|
|
|
left: 0;
|
2020-03-27 20:48:20 +01:00
|
|
|
text-align: center;
|
|
|
|
vertical-align: middle;
|
2020-09-15 22:23:01 +02:00
|
|
|
/* border-right: 2px solid hsl(204, 20%, 74%); */
|
2020-03-27 20:48:20 +01:00
|
|
|
}
|
|
|
|
|
2021-06-30 16:20:43 +02:00
|
|
|
.hide-streamlist-toggle-visibility,
|
|
|
|
.hide-navbar-buttons-visibility {
|
|
|
|
visibility: hidden;
|
|
|
|
}
|
|
|
|
|
2020-03-27 20:48:20 +01:00
|
|
|
#streamlist-toggle-button {
|
|
|
|
text-decoration: none;
|
|
|
|
color: hsl(0, 0%, 52%);
|
|
|
|
display: block;
|
|
|
|
position: relative;
|
|
|
|
background-color: hsl(0, 0%, 89%);
|
|
|
|
width: 40px;
|
|
|
|
height: 19px;
|
|
|
|
padding-top: 12px;
|
|
|
|
padding-bottom: 9px;
|
|
|
|
}
|
|
|
|
|
|
|
|
#streamlist-toggle-unreadcount,
|
|
|
|
#userlist-toggle-unreadcount {
|
|
|
|
position: absolute;
|
|
|
|
display: none;
|
|
|
|
height: 12px;
|
|
|
|
min-width: 12px;
|
|
|
|
line-height: 12px;
|
|
|
|
background-color: hsl(0, 100%, 20%);
|
|
|
|
top: 4px;
|
|
|
|
right: 4px;
|
|
|
|
border: 1px solid hsl(0, 0%, 93%);
|
2020-08-06 02:42:07 +02:00
|
|
|
box-shadow: 0 0 1px hsla(0, 0%, 0%, 0.2);
|
2020-03-27 20:48:20 +01:00
|
|
|
border-radius: 12px;
|
2021-11-05 03:33:16 +01:00
|
|
|
padding: 1px;
|
2020-03-27 20:48:20 +01:00
|
|
|
font-size: 9px;
|
|
|
|
z-index: 15;
|
|
|
|
font-weight: normal;
|
|
|
|
color: hsl(0, 0%, 100%);
|
|
|
|
}
|
|
|
|
|
|
|
|
.nav .dropdown-menu {
|
|
|
|
left: auto;
|
2020-08-06 02:42:07 +02:00
|
|
|
right: 0;
|
2020-03-27 20:48:20 +01:00
|
|
|
top: 30px;
|
2021-02-11 16:13:18 +01:00
|
|
|
/* 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;
|
2020-08-06 02:42:07 +02:00
|
|
|
box-shadow: 0 0 5px hsla(0, 0%, 0%, 0.2);
|
2020-03-27 20:48:20 +01:00
|
|
|
|
2020-05-19 12:43:59 +02:00
|
|
|
&::after {
|
|
|
|
position: absolute;
|
2020-08-06 02:42:07 +02:00
|
|
|
width: 0;
|
|
|
|
height: 0;
|
2020-05-19 12:43:59 +02:00
|
|
|
top: -7px;
|
2020-06-21 18:59:37 +02:00
|
|
|
right: 19px;
|
2020-05-19 12:43:59 +02:00
|
|
|
display: inline-block;
|
|
|
|
border-right: 7px solid transparent;
|
|
|
|
border-bottom: 7px solid hsl(0, 0%, 67%);
|
|
|
|
border-left: 7px solid transparent;
|
2020-08-04 23:58:56 +02:00
|
|
|
content: "";
|
2020-05-19 12:43:59 +02:00
|
|
|
z-index: 10;
|
|
|
|
}
|
2020-05-19 12:42:52 +02:00
|
|
|
}
|
|
|
|
|
2020-03-27 20:48:20 +01:00
|
|
|
.nav .dropdown-menu a,
|
|
|
|
.typeahead.dropdown-menu a {
|
|
|
|
color: inherit;
|
|
|
|
}
|
|
|
|
|
2020-05-19 12:46:21 +02:00
|
|
|
.typeahead.dropdown-menu {
|
|
|
|
.active {
|
|
|
|
color: hsl(0, 0%, 100%);
|
2020-03-27 20:48:20 +01:00
|
|
|
|
2020-05-19 12:46:21 +02:00
|
|
|
.unsubscribed_icon {
|
|
|
|
display: block;
|
|
|
|
float: right;
|
|
|
|
margin-top: 5px;
|
|
|
|
margin-right: -12px;
|
|
|
|
font-size: 0.8em;
|
|
|
|
color: hsl(96, 7%, 73%);
|
|
|
|
}
|
|
|
|
}
|
2020-03-27 20:48:20 +01:00
|
|
|
|
2020-05-19 12:46:21 +02:00
|
|
|
.unsubscribed_icon {
|
|
|
|
display: none;
|
|
|
|
}
|
2020-05-19 12:45:13 +02:00
|
|
|
}
|
|
|
|
|
2020-03-27 20:48:20 +01:00
|
|
|
.typeahead-image {
|
|
|
|
display: inline-block;
|
|
|
|
height: 21px;
|
|
|
|
width: 21px;
|
|
|
|
position: relative;
|
2021-03-05 01:45:25 +01:00
|
|
|
margin-top: -4px;
|
2020-03-27 20:48:20 +01:00
|
|
|
vertical-align: middle;
|
|
|
|
top: 2px;
|
|
|
|
right: 8px;
|
|
|
|
border-radius: 4px;
|
|
|
|
|
|
|
|
/* For FontAwesome icons used in place of images for some users. */
|
|
|
|
font-size: 19px;
|
|
|
|
text-align: center;
|
2021-02-26 09:24:04 +01:00
|
|
|
|
2021-03-10 22:51:53 +01:00
|
|
|
&.no-presence-circle {
|
2021-02-26 09:24:04 +01:00
|
|
|
margin-left: 9px;
|
|
|
|
top: 3px;
|
|
|
|
}
|
2020-03-27 20:48:20 +01:00
|
|
|
}
|
|
|
|
|
2020-05-19 12:50:20 +02:00
|
|
|
nav {
|
|
|
|
.column-left {
|
|
|
|
text-align: center;
|
2020-03-27 20:48:20 +01:00
|
|
|
|
2020-05-19 12:50:20 +02:00
|
|
|
.nav-logo {
|
|
|
|
display: inline-block;
|
|
|
|
vertical-align: top;
|
|
|
|
margin-top: 8px;
|
|
|
|
height: 25px;
|
|
|
|
max-width: 200px;
|
|
|
|
}
|
2020-03-27 20:48:20 +01:00
|
|
|
|
2020-05-19 12:50:20 +02:00
|
|
|
.company-name {
|
|
|
|
display: inline-block;
|
|
|
|
vertical-align: top;
|
|
|
|
text-transform: uppercase;
|
|
|
|
margin-top: 12px;
|
|
|
|
margin-left: 8px;
|
|
|
|
font-size: 1.2rem;
|
|
|
|
font-weight: 600;
|
|
|
|
color: hsl(170, 48%, 54%);
|
|
|
|
letter-spacing: 0.1em;
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
}
|
2020-03-27 20:48:20 +01:00
|
|
|
|
2020-05-19 12:50:20 +02:00
|
|
|
a {
|
|
|
|
&.no-style:hover {
|
|
|
|
text-decoration: none;
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
2020-05-19 12:48:41 +02:00
|
|
|
|
2020-05-19 12:50:20 +02:00
|
|
|
.no-style {
|
|
|
|
text-decoration: none;
|
|
|
|
}
|
|
|
|
}
|
2020-03-27 20:48:20 +01:00
|
|
|
}
|
|
|
|
|
2013-12-09 20:15:33 +01:00
|
|
|
div.floating_recipient {
|
2013-06-22 00:21:55 +02:00
|
|
|
border-collapse: separate;
|
2012-10-15 16:53:48 +02:00
|
|
|
width: 100%;
|
2014-01-15 17:11:37 +01:00
|
|
|
position: relative;
|
2012-10-14 04:13:27 +02:00
|
|
|
}
|
|
|
|
|
2014-02-06 23:36:45 +01:00
|
|
|
#floating_recipient_bar {
|
2020-05-27 22:21:32 +02:00
|
|
|
top: $sidebar_top;
|
2014-02-06 23:36:45 +01:00
|
|
|
}
|
|
|
|
|
2012-09-13 22:20:07 +02:00
|
|
|
#bottom_whitespace {
|
2016-07-18 03:10:51 +02:00
|
|
|
display: block;
|
|
|
|
height: 300px;
|
2012-09-11 20:12:39 +02:00
|
|
|
}
|
2012-09-11 23:37:46 +02:00
|
|
|
|
2013-12-02 22:51:03 +01:00
|
|
|
.operator_value {
|
2021-04-03 04:01:40 +02:00
|
|
|
font-family: "Source Code Pro", monospace;
|
2017-11-30 22:43:27 +01:00
|
|
|
color: hsl(353, 70%, 65%);
|
2013-12-02 22:51:03 +01:00
|
|
|
}
|
2017-11-13 17:26:11 +01:00
|
|
|
|
2013-12-02 22:51:03 +01:00
|
|
|
.operator {
|
2021-04-03 04:01:40 +02:00
|
|
|
font-family: "Source Code Pro", monospace;
|
2013-12-02 22:51:03 +01:00
|
|
|
}
|
|
|
|
|
2020-05-26 16:27:06 +02:00
|
|
|
#loading_older_messages_indicator,
|
|
|
|
#loading_newer_messages_indicator {
|
2013-07-12 18:31:26 +02:00
|
|
|
margin: 10px;
|
|
|
|
}
|
|
|
|
|
2020-05-26 16:27:06 +02:00
|
|
|
#loading_older_messages_indicator_box_container,
|
|
|
|
#loading_newer_messages_indicator_box_container {
|
2013-07-12 18:31:26 +02:00
|
|
|
position: absolute;
|
|
|
|
left: 50%;
|
|
|
|
}
|
|
|
|
|
2020-05-26 16:27:06 +02:00
|
|
|
#loading_older_messages_indicator_box,
|
|
|
|
#loading_newer_messages_indicator_box {
|
2013-07-12 18:31:26 +02:00
|
|
|
position: relative;
|
|
|
|
left: -50%;
|
2017-05-16 23:29:26 +02:00
|
|
|
top: -43px;
|
2013-07-12 18:31:26 +02:00
|
|
|
z-index: 1;
|
2017-03-18 23:49:11 +01:00
|
|
|
border-radius: 6px;
|
2013-01-15 21:41:16 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
#page_loading_indicator {
|
|
|
|
margin: 10px auto;
|
2012-11-28 22:17:57 +01:00
|
|
|
}
|
2012-11-29 17:22:00 +01:00
|
|
|
|
2017-04-05 03:55:28 +02:00
|
|
|
#page_loading_indicator_box_container {
|
|
|
|
position: absolute;
|
|
|
|
left: 50%;
|
|
|
|
}
|
|
|
|
|
|
|
|
#page_loading_indicator_box {
|
|
|
|
position: relative;
|
|
|
|
left: -50%;
|
2017-05-16 23:29:26 +02:00
|
|
|
top: -43px;
|
2017-04-05 03:55:28 +02:00
|
|
|
z-index: 1;
|
|
|
|
border-radius: 6px;
|
|
|
|
}
|
|
|
|
|
2012-11-29 17:22:00 +01:00
|
|
|
.table-striped thead th {
|
2017-06-21 09:15:29 +02:00
|
|
|
background-color: hsl(0, 0%, 27%);
|
2017-11-13 16:34:06 +01:00
|
|
|
color: hsl(0, 0%, 100%);
|
2012-11-29 17:22:00 +01:00
|
|
|
}
|
2012-11-29 18:44:43 +01:00
|
|
|
|
2022-02-08 18:56:40 +01:00
|
|
|
#create_stream_subscribers {
|
2016-08-23 22:23:56 +02:00
|
|
|
margin-top: 10px;
|
|
|
|
|
2020-05-19 12:56:29 +02:00
|
|
|
.checkbox {
|
|
|
|
display: block;
|
2016-07-07 00:58:11 +02:00
|
|
|
|
2020-08-04 23:58:56 +02:00
|
|
|
input[type="checkbox"] {
|
2020-08-06 02:42:07 +02:00
|
|
|
margin: 5px 0;
|
2020-05-19 12:56:29 +02:00
|
|
|
float: none;
|
|
|
|
}
|
|
|
|
}
|
2016-08-23 22:23:56 +02:00
|
|
|
}
|
|
|
|
|
2016-03-22 16:50:09 +01:00
|
|
|
.sub_button_row {
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
|
2019-01-14 07:10:55 +01:00
|
|
|
.small_square_button {
|
|
|
|
padding: 0;
|
2014-01-17 16:11:18 +01:00
|
|
|
border: none;
|
2019-01-14 07:10:55 +01:00
|
|
|
font-size: 12px;
|
|
|
|
width: 18px;
|
|
|
|
height: 18px;
|
|
|
|
border-radius: 4px;
|
|
|
|
margin-bottom: 3px;
|
2014-01-17 16:11:18 +01:00
|
|
|
|
2019-07-17 21:30:39 +02:00
|
|
|
&:focus {
|
|
|
|
outline: none;
|
|
|
|
}
|
2014-01-17 16:11:18 +01:00
|
|
|
|
2019-07-17 21:30:39 +02:00
|
|
|
&.small_square_x {
|
|
|
|
background-color: hsl(0, 0%, 100%);
|
|
|
|
color: hsl(0, 0%, 47%);
|
2019-07-16 12:48:45 +02:00
|
|
|
|
2019-07-17 21:30:39 +02:00
|
|
|
&:hover {
|
|
|
|
color: hsl(0, 0%, 18%);
|
|
|
|
}
|
|
|
|
}
|
2014-01-17 16:11:18 +01:00
|
|
|
}
|
|
|
|
|
2018-03-23 08:44:55 +01:00
|
|
|
div.topic_edit_spinner {
|
|
|
|
display: inline-block;
|
|
|
|
width: 18px;
|
|
|
|
height: 18px;
|
|
|
|
margin-top: -1px;
|
|
|
|
padding: 2px;
|
|
|
|
vertical-align: middle;
|
|
|
|
}
|
|
|
|
|
|
|
|
div.topic_edit_spinner .loading_indicator_spinner {
|
|
|
|
width: 14px;
|
|
|
|
height: 14px;
|
|
|
|
}
|
|
|
|
|
2020-08-21 07:34:21 +02:00
|
|
|
.message_edit_spinner {
|
|
|
|
margin-right: 8px;
|
|
|
|
padding-top: 5px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.message_edit_spinner .loading_indicator_spinner {
|
|
|
|
width: 20px;
|
|
|
|
height: 20px;
|
|
|
|
}
|
|
|
|
|
2021-07-05 19:25:15 +02:00
|
|
|
.topic_move_spinner {
|
2019-01-24 20:51:10 +01:00
|
|
|
margin: 0 auto;
|
|
|
|
}
|
|
|
|
|
2020-05-19 13:09:00 +02:00
|
|
|
#invitee_emails {
|
|
|
|
min-height: 40px;
|
|
|
|
max-height: 300px;
|
|
|
|
width: 96%;
|
|
|
|
max-width: 96%;
|
|
|
|
}
|
|
|
|
|
2020-05-19 13:10:22 +02:00
|
|
|
#invite-user {
|
|
|
|
.modal-header {
|
|
|
|
padding: 7px 15px;
|
|
|
|
border-color: hsl(0, 0%, 87%);
|
2017-03-14 22:06:56 +01:00
|
|
|
|
2020-05-19 13:10:22 +02:00
|
|
|
.exit {
|
|
|
|
font-size: 1.5rem;
|
|
|
|
font-weight: 600;
|
|
|
|
background-color: transparent;
|
|
|
|
border: none;
|
|
|
|
position: absolute;
|
|
|
|
top: 6px;
|
|
|
|
right: 5px;
|
|
|
|
color: hsl(0, 0%, 67%);
|
|
|
|
}
|
|
|
|
}
|
2017-03-14 22:06:56 +01:00
|
|
|
|
2020-05-19 13:10:22 +02:00
|
|
|
.overlay-content {
|
|
|
|
position: relative;
|
|
|
|
width: 500px;
|
|
|
|
border-radius: 4px;
|
|
|
|
}
|
2017-03-14 23:22:46 +01:00
|
|
|
|
2020-05-19 13:10:22 +02:00
|
|
|
.modal-body {
|
|
|
|
margin-bottom: 58px;
|
|
|
|
position: relative;
|
|
|
|
}
|
2017-03-14 23:22:46 +01:00
|
|
|
|
2020-05-19 13:10:22 +02:00
|
|
|
.modal-footer {
|
|
|
|
position: absolute;
|
2020-08-06 02:42:07 +02:00
|
|
|
bottom: 0;
|
2020-05-19 13:10:22 +02:00
|
|
|
width: calc(100% - 30px);
|
|
|
|
}
|
2017-03-14 23:22:46 +01:00
|
|
|
|
2020-05-19 13:10:22 +02:00
|
|
|
.invite-stream-controls {
|
|
|
|
margin-top: 5px;
|
|
|
|
}
|
2020-05-19 13:09:00 +02:00
|
|
|
}
|
|
|
|
|
2012-12-05 22:48:15 +01:00
|
|
|
#invite_status {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
2019-02-06 20:31:45 +01:00
|
|
|
#invite-user-label {
|
2017-03-14 22:06:56 +01:00
|
|
|
font-size: 1em;
|
|
|
|
font-weight: 700;
|
|
|
|
text-align: center;
|
|
|
|
text-transform: uppercase;
|
|
|
|
}
|
|
|
|
|
2019-02-06 20:32:06 +01:00
|
|
|
#multiuse_invite_status {
|
|
|
|
display: none;
|
|
|
|
margin-top: 7px;
|
|
|
|
margin-bottom: -5px;
|
|
|
|
text-align: left;
|
|
|
|
}
|
|
|
|
|
2021-09-28 21:57:50 +02:00
|
|
|
#multiuse_invite_link {
|
|
|
|
width: 350px;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
white-space: nowrap;
|
|
|
|
display: inline-block;
|
|
|
|
overflow: hidden;
|
|
|
|
vertical-align: bottom;
|
|
|
|
}
|
|
|
|
|
2019-02-06 20:32:06 +01:00
|
|
|
#invite-stream-checkboxes {
|
|
|
|
padding-bottom: 26px;
|
|
|
|
}
|
|
|
|
|
2019-02-06 20:31:45 +01:00
|
|
|
#invite-method-choice {
|
|
|
|
margin-top: 2px;
|
|
|
|
}
|
|
|
|
|
|
|
|
#multiuse_radio_section {
|
|
|
|
margin-top: 4px;
|
|
|
|
margin-bottom: -2px;
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
#generate_multiuse_invite_button {
|
|
|
|
position: relative;
|
|
|
|
top: 1px;
|
|
|
|
}
|
|
|
|
|
2013-02-23 19:38:25 +01:00
|
|
|
.empty_feed_notice {
|
2017-08-24 22:40:27 +02:00
|
|
|
padding: 3em 1em;
|
2013-02-23 19:38:25 +01:00
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
|
2017-03-16 19:26:26 +01:00
|
|
|
.message-fade,
|
2017-03-16 20:33:02 +01:00
|
|
|
.user_sidebar_entry.user-fade {
|
2013-07-24 22:32:20 +02:00
|
|
|
opacity: 0.4;
|
2013-02-13 21:30:17 +01:00
|
|
|
}
|
|
|
|
|
2013-03-01 22:07:27 +01:00
|
|
|
.emoji {
|
2014-03-06 22:10:45 +01:00
|
|
|
height: 25px;
|
|
|
|
width: 25px;
|
|
|
|
position: relative;
|
|
|
|
margin-top: -7px;
|
2017-08-28 21:56:19 +02:00
|
|
|
vertical-align: middle;
|
2017-05-03 22:11:35 +02:00
|
|
|
top: 3px;
|
|
|
|
}
|
|
|
|
|
2022-02-05 18:02:04 +01:00
|
|
|
.status_emoji {
|
|
|
|
height: 16px;
|
|
|
|
width: 16px;
|
|
|
|
/* We are setting minimum width here because when the user's name is very long,
|
|
|
|
emoji's width decreases and causes it to break. */
|
|
|
|
min-width: 16px;
|
2022-02-11 22:04:28 +01:00
|
|
|
/* In most contexts, status emoji appear immediately after a name
|
2022-03-06 07:09:19 +01:00
|
|
|
field with no margin. Position the status emoji with 3px of left
|
2022-02-11 22:04:28 +01:00
|
|
|
margin to space it from the name, and set no right margin so
|
|
|
|
that any components to the right appear equally distant as they
|
|
|
|
would be from a name. */
|
2022-03-06 07:09:19 +01:00
|
|
|
margin-left: 3px;
|
2022-02-11 22:04:28 +01:00
|
|
|
margin-right: 0;
|
2022-02-05 18:02:04 +01:00
|
|
|
}
|
|
|
|
|
2013-04-04 00:55:36 +02:00
|
|
|
/* FIXME: Combine this rule with the one in portico.css somehow? */
|
2013-04-08 20:21:20 +02:00
|
|
|
#pw_strength {
|
2017-12-24 19:00:29 +01:00
|
|
|
width: 100%;
|
|
|
|
height: 10px;
|
2020-08-06 02:42:07 +02:00
|
|
|
margin-bottom: 0;
|
2013-04-04 00:55:36 +02:00
|
|
|
}
|
2013-04-08 19:15:20 +02:00
|
|
|
|
|
|
|
/* Override padding-top on form labels when they label only text */
|
|
|
|
.form-horizontal .label_for_text {
|
|
|
|
padding-top: 0;
|
|
|
|
}
|
2013-04-08 20:03:21 +02:00
|
|
|
|
|
|
|
#pw_change_controls {
|
|
|
|
display: none;
|
|
|
|
}
|
2013-04-12 22:08:49 +02:00
|
|
|
|
2013-08-23 07:31:38 +02:00
|
|
|
.sub-unsub-message,
|
|
|
|
.date_row {
|
2013-04-17 05:52:20 +02:00
|
|
|
text-align: center;
|
2019-02-14 00:30:19 +01:00
|
|
|
padding-bottom: 10px;
|
2013-04-05 16:44:29 +02:00
|
|
|
}
|
|
|
|
|
2019-02-15 16:00:24 +01:00
|
|
|
.date_row {
|
2019-02-15 20:12:59 +01:00
|
|
|
padding-left: 2px;
|
2019-02-15 16:00:24 +01:00
|
|
|
|
2020-05-19 13:11:48 +02:00
|
|
|
.date-direction {
|
|
|
|
display: inline-block;
|
|
|
|
padding-right: 5px;
|
|
|
|
}
|
2013-09-10 18:40:31 +02:00
|
|
|
|
2020-05-19 13:11:48 +02:00
|
|
|
.date-line {
|
|
|
|
display: inline-block;
|
|
|
|
vertical-align: middle;
|
|
|
|
width: 33%;
|
|
|
|
border-top: 1px solid hsl(0, 0%, 88%);
|
|
|
|
border-bottom: 1px solid hsl(0, 0%, 100%);
|
2021-11-05 03:33:16 +01:00
|
|
|
margin: 0 5px;
|
2020-05-19 13:11:48 +02:00
|
|
|
}
|
2013-09-10 18:40:31 +02:00
|
|
|
}
|
|
|
|
|
2017-06-04 23:19:07 +02:00
|
|
|
.sub-unsub-message span,
|
2013-08-29 01:34:10 +02:00
|
|
|
.date_row span {
|
2013-06-24 23:16:50 +02:00
|
|
|
display: block;
|
|
|
|
padding: 4px;
|
|
|
|
overflow: hidden;
|
2013-07-02 20:41:10 +02:00
|
|
|
text-transform: uppercase;
|
|
|
|
font-size: 0.8em;
|
2021-11-04 07:11:19 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
.sub-unsub-message .stream-status,
|
|
|
|
.date_row span {
|
2017-11-30 22:21:17 +01:00
|
|
|
opacity: 0.5;
|
2013-06-24 23:16:50 +02:00
|
|
|
}
|
|
|
|
|
2017-06-04 23:19:07 +02:00
|
|
|
.sub-unsub-message span {
|
|
|
|
font-size: 1em;
|
|
|
|
text-transform: none;
|
|
|
|
}
|
|
|
|
|
2018-07-27 00:58:50 +02:00
|
|
|
.sub-unsub-message span::before,
|
|
|
|
.sub-unsub-message span::after,
|
|
|
|
.date_row span::before,
|
|
|
|
.date_row span::after {
|
2013-06-24 23:16:50 +02:00
|
|
|
display: inline-block;
|
|
|
|
position: relative;
|
|
|
|
content: " ";
|
|
|
|
vertical-align: middle;
|
|
|
|
width: 50%;
|
2020-08-06 02:42:07 +02:00
|
|
|
height: 0;
|
2017-06-21 09:15:29 +02:00
|
|
|
border-top: 1px solid hsl(0, 0%, 88%);
|
2018-09-27 21:57:07 +02:00
|
|
|
border-bottom: 1px solid hsl(0, 0%, 100%);
|
2013-06-24 23:16:50 +02:00
|
|
|
}
|
|
|
|
|
2018-07-27 00:58:50 +02:00
|
|
|
.sub-unsub-message span::before,
|
|
|
|
.date_row span::before {
|
2013-06-24 23:16:50 +02:00
|
|
|
right: 0.5em;
|
|
|
|
margin-left: -50%;
|
|
|
|
}
|
|
|
|
|
2018-07-27 00:58:50 +02:00
|
|
|
.sub-unsub-message span::after,
|
|
|
|
.date_row span::after {
|
2013-06-24 23:16:50 +02:00
|
|
|
left: 0.5em;
|
|
|
|
margin-right: -50%;
|
|
|
|
}
|
|
|
|
|
2013-05-15 00:22:16 +02:00
|
|
|
.message_edit {
|
|
|
|
display: none;
|
2013-07-22 20:19:35 +02:00
|
|
|
margin-top: 5px;
|
2014-01-31 23:52:18 +01:00
|
|
|
margin-left: 47px;
|
2019-07-26 02:32:30 +02:00
|
|
|
position: relative;
|
2013-05-15 00:22:16 +02:00
|
|
|
}
|
2013-05-21 19:12:27 +02:00
|
|
|
|
|
|
|
/* Reduce some of the heavy padding from Bootstrap. */
|
2021-04-21 16:20:16 +02:00
|
|
|
.message_edit_form {
|
2017-01-31 22:01:49 +01:00
|
|
|
margin-bottom: 10px;
|
2018-04-08 15:51:01 +02:00
|
|
|
cursor: default;
|
2017-11-13 17:26:11 +01:00
|
|
|
|
2020-05-19 13:12:54 +02:00
|
|
|
.edit-controls {
|
2020-08-06 02:42:07 +02:00
|
|
|
margin-left: 0;
|
|
|
|
margin-top: 0;
|
2020-05-19 13:12:54 +02:00
|
|
|
}
|
2017-11-13 17:26:11 +01:00
|
|
|
|
2021-07-16 20:14:08 +02:00
|
|
|
/* Override the default border-radius to properly align
|
|
|
|
the button corners with `stream_header_colorblock`. */
|
|
|
|
.dropdown-toggle {
|
|
|
|
border-radius: 1px 4px 4px 1px !important;
|
|
|
|
}
|
|
|
|
|
2021-09-15 11:37:21 +02:00
|
|
|
.dropdown-list-widget,
|
2021-07-16 13:12:05 +02:00
|
|
|
.stream_header_colorblock {
|
2021-09-15 11:37:21 +02:00
|
|
|
margin-bottom: 10px;
|
2021-07-16 13:12:05 +02:00
|
|
|
}
|
|
|
|
|
2020-05-19 13:12:54 +02:00
|
|
|
textarea {
|
|
|
|
width: 100%;
|
|
|
|
min-width: 206px;
|
|
|
|
box-sizing: border-box;
|
2020-08-27 05:34:54 +02:00
|
|
|
/* Setting resize as none hides the bottom right diagonal box
|
|
|
|
(which even has a background color of its own!). */
|
|
|
|
resize: none !important;
|
2020-05-19 13:12:54 +02:00
|
|
|
}
|
2017-11-13 17:26:11 +01:00
|
|
|
|
2020-05-19 13:12:54 +02:00
|
|
|
.control-group.no-margin {
|
2020-08-06 02:42:07 +02:00
|
|
|
margin-bottom: 0;
|
2020-05-19 13:12:54 +02:00
|
|
|
}
|
2013-05-21 17:48:46 +02:00
|
|
|
|
2020-05-19 13:12:54 +02:00
|
|
|
.action-buttons {
|
2020-08-06 02:42:07 +02:00
|
|
|
margin: 10px 0;
|
2020-05-19 13:12:54 +02:00
|
|
|
}
|
2017-01-31 22:01:49 +01:00
|
|
|
}
|
|
|
|
|
2013-08-16 23:45:13 +02:00
|
|
|
#topic_edit_form {
|
2014-01-17 16:11:18 +01:00
|
|
|
display: inline-block;
|
2021-11-05 03:33:16 +01:00
|
|
|
margin: 0;
|
2014-01-17 16:11:18 +01:00
|
|
|
height: 22px;
|
|
|
|
padding-left: 20px;
|
|
|
|
padding-right: 3px;
|
|
|
|
line-height: 22px;
|
|
|
|
margin-left: -15px;
|
2013-08-16 23:45:13 +02:00
|
|
|
}
|
|
|
|
|
2020-07-04 16:25:41 +02:00
|
|
|
#message_feed_container {
|
2013-08-16 17:29:37 +02:00
|
|
|
margin-top: 41px;
|
2013-08-15 21:38:37 +02:00
|
|
|
}
|
|
|
|
|
2013-06-27 20:32:08 +02:00
|
|
|
.screen {
|
|
|
|
position: absolute;
|
|
|
|
left: 0;
|
|
|
|
top: 0;
|
2018-10-08 22:31:26 +02:00
|
|
|
background-color: hsl(0, 0%, 0%);
|
2013-06-27 20:32:08 +02:00
|
|
|
z-index: 20000;
|
|
|
|
}
|
2013-06-27 22:18:28 +02:00
|
|
|
|
|
|
|
.tutorial-done-button {
|
|
|
|
text-align: right;
|
2016-06-21 20:30:34 +02:00
|
|
|
margin-top: 9px;
|
|
|
|
margin-bottom: 8px;
|
2013-06-27 22:18:28 +02:00
|
|
|
}
|
2013-07-05 22:51:41 +02:00
|
|
|
|
2016-06-04 01:12:24 +02:00
|
|
|
.btn-skip {
|
2016-06-21 20:30:34 +02:00
|
|
|
position: relative;
|
|
|
|
left: -10px;
|
|
|
|
margin-right: 25px;
|
2016-06-04 01:12:24 +02:00
|
|
|
}
|
|
|
|
|
2019-05-16 10:36:20 +02:00
|
|
|
.deactivated_user .deactivated-user-icon {
|
|
|
|
color: inherit;
|
|
|
|
margin-left: 2px;
|
2020-08-04 23:58:56 +02:00
|
|
|
font-size: 0.9em;
|
2013-11-16 16:26:40 +01:00
|
|
|
}
|
2013-11-13 19:40:02 +01:00
|
|
|
|
2017-06-26 16:12:49 +02:00
|
|
|
.no-drag {
|
2020-08-06 00:16:29 +02:00
|
|
|
-webkit-user-drag: none;
|
2017-06-26 16:12:49 +02:00
|
|
|
user-select: none;
|
|
|
|
}
|
2017-12-07 15:47:23 +01:00
|
|
|
|
2018-03-12 20:23:49 +01:00
|
|
|
.user_popover_email {
|
2017-12-07 15:47:23 +01:00
|
|
|
text-overflow: ellipsis;
|
|
|
|
white-space: nowrap;
|
|
|
|
overflow: hidden;
|
2018-02-03 17:38:35 +01:00
|
|
|
transition: all 0.4s ease;
|
2017-12-07 15:47:23 +01:00
|
|
|
|
2018-05-08 01:06:48 +02:00
|
|
|
i {
|
|
|
|
cursor: pointer;
|
2020-05-19 13:14:13 +02:00
|
|
|
|
2020-05-19 13:15:01 +02:00
|
|
|
&.hide_copy_icon {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
}
|
2020-05-19 13:14:13 +02:00
|
|
|
}
|
|
|
|
|
2018-02-03 17:38:35 +01:00
|
|
|
.email_copied,
|
2018-03-12 20:23:49 +01:00
|
|
|
.user_popover_email i:hover {
|
2018-10-12 07:22:46 +02:00
|
|
|
color: hsl(170, 48%, 54%);
|
2018-02-03 17:38:35 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
.email_copied i {
|
|
|
|
display: none !important;
|
|
|
|
}
|
|
|
|
|
2017-12-07 15:47:23 +01:00
|
|
|
.display-tooltip {
|
|
|
|
display: block !important;
|
|
|
|
}
|
|
|
|
|
2017-08-25 11:09:51 +02:00
|
|
|
.hotkey-hint {
|
|
|
|
opacity: 0.75;
|
|
|
|
}
|
2018-02-23 15:45:25 +01:00
|
|
|
|
2020-02-19 01:38:34 +01:00
|
|
|
select.inline_select_topic_edit {
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
|
2021-11-09 17:25:24 +01:00
|
|
|
.flatpickr-calendar {
|
|
|
|
/* Hide the up and down arrows in the Flatpickr datepicker year */
|
|
|
|
.flatpickr-months .numInputWrapper span {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
.flatpickr-time-separator {
|
|
|
|
position: relative;
|
|
|
|
left: 5px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.flatpickr-time input {
|
|
|
|
margin: 0 5px;
|
|
|
|
}
|
|
|
|
|
2021-11-11 15:15:01 +01:00
|
|
|
.flatpickr-confirm {
|
|
|
|
color: hsl(0, 0%, 100%);
|
|
|
|
background-color: hsl(213, 90%, 65%);
|
|
|
|
font-size: 18px;
|
|
|
|
font-weight: 600;
|
|
|
|
}
|
|
|
|
|
2021-11-09 17:25:24 +01:00
|
|
|
@media (width < $md_min) {
|
|
|
|
/* Center align flatpickr on mobile
|
|
|
|
* devices so that it doesn't go out of
|
|
|
|
* the viewport. */
|
|
|
|
left: 0 !important;
|
|
|
|
right: 0 !important;
|
|
|
|
margin: auto;
|
|
|
|
|
|
|
|
&::after,
|
|
|
|
&::before {
|
2021-11-23 19:17:51 +01:00
|
|
|
border-top-width: 0 !important;
|
2021-11-09 17:25:24 +01:00
|
|
|
}
|
|
|
|
}
|
2018-07-06 19:00:15 +02:00
|
|
|
}
|
2019-10-24 05:38:18 +02:00
|
|
|
|
2021-02-09 11:16:52 +01:00
|
|
|
#about-zulip {
|
|
|
|
.exit {
|
|
|
|
font-size: 1.5rem;
|
|
|
|
font-weight: 600;
|
|
|
|
background-color: transparent;
|
|
|
|
border: none;
|
|
|
|
position: absolute;
|
|
|
|
right: 8px;
|
|
|
|
z-index: 1;
|
|
|
|
color: hsl(0, 0%, 67%);
|
|
|
|
}
|
|
|
|
|
|
|
|
.overlay-content {
|
2021-05-13 02:50:42 +02:00
|
|
|
width: 440px;
|
2021-02-09 11:16:52 +01:00
|
|
|
border-radius: 4px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.about-zulip-logo {
|
2021-05-13 02:50:42 +02:00
|
|
|
text-align: center;
|
|
|
|
margin: 30px;
|
2021-02-09 11:16:52 +01:00
|
|
|
}
|
|
|
|
|
2021-05-13 02:50:42 +02:00
|
|
|
.about-zulip-logo img {
|
|
|
|
height: 40px;
|
2021-02-09 11:16:52 +01:00
|
|
|
}
|
2021-07-12 19:28:17 +02:00
|
|
|
|
|
|
|
i.fa-copy {
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
2021-02-09 11:16:52 +01:00
|
|
|
}
|
|
|
|
|
2019-10-24 05:38:18 +02:00
|
|
|
/* This max-width must be synced with message_viewport.is_narrow */
|
2021-02-04 02:49:05 +01:00
|
|
|
@media (width < $xl_min) {
|
2019-10-24 05:38:18 +02:00
|
|
|
.app-main,
|
|
|
|
.header-main {
|
|
|
|
min-width: 750px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.column-right {
|
|
|
|
display: none;
|
|
|
|
|
2020-05-19 13:16:25 +02:00
|
|
|
&.expanded {
|
|
|
|
display: block;
|
|
|
|
position: absolute;
|
|
|
|
float: none;
|
|
|
|
right: 15px;
|
2020-08-06 02:42:07 +02:00
|
|
|
top: 0;
|
2020-05-19 13:16:25 +02:00
|
|
|
|
|
|
|
.right-sidebar {
|
2020-08-04 23:58:56 +02:00
|
|
|
background-color: hsla(0, 0%, 100%, 1);
|
2020-08-06 02:42:07 +02:00
|
|
|
box-shadow: 0 -2px 3px 0 hsla(0, 0%, 0%, 0.1);
|
2020-05-19 13:16:25 +02:00
|
|
|
border-left: 1px solid hsl(0, 0%, 87%);
|
2020-05-27 22:21:32 +02:00
|
|
|
|
2020-09-15 22:23:01 +02:00
|
|
|
/* We use both margin and padding to
|
|
|
|
hide little artifacts from showing up in
|
|
|
|
the gutter below the navbar. */
|
2020-05-27 22:21:32 +02:00
|
|
|
margin-top: $header_height;
|
2021-11-05 03:16:06 +01:00
|
|
|
padding: $header_padding_bottom 15px 0 15px;
|
2020-05-19 13:16:25 +02:00
|
|
|
height: 100%;
|
2020-08-06 02:42:07 +02:00
|
|
|
right: 0;
|
2020-05-19 13:16:25 +02:00
|
|
|
}
|
|
|
|
}
|
2019-10-24 05:38:18 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.header-main .column-right {
|
|
|
|
display: inline-block;
|
|
|
|
width: 30px;
|
|
|
|
}
|
|
|
|
|
|
|
|
#top_navbar.rightside-userlist #navbar-buttons {
|
|
|
|
margin-right: 41px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.nav .dropdown-menu {
|
|
|
|
min-width: 180px;
|
2020-08-06 02:42:07 +02:00
|
|
|
box-shadow: 0 0 5px hsla(0, 0%, 0%, 0.2);
|
2019-10-24 05:38:18 +02:00
|
|
|
|
2020-05-19 13:19:33 +02:00
|
|
|
&::after {
|
2020-08-06 02:34:58 +02:00
|
|
|
right: 21px;
|
2020-05-19 13:19:33 +02:00
|
|
|
}
|
2019-10-24 05:38:18 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.column-middle {
|
|
|
|
margin-right: 7px;
|
|
|
|
}
|
2020-02-03 17:01:11 +01:00
|
|
|
|
|
|
|
.top-navbar-container,
|
2020-05-15 13:13:50 +02:00
|
|
|
#searchbox_legacy .navbar-search.expanded,
|
|
|
|
#searchbox .navbar-search.expanded {
|
2020-06-21 18:59:37 +02:00
|
|
|
width: calc(100% - 84px);
|
2020-02-03 17:01:11 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
.search_closed .fa-search {
|
|
|
|
right: 115px;
|
|
|
|
}
|
|
|
|
|
|
|
|
#top_navbar:not(.rightside-userlist) {
|
|
|
|
.search_closed .fa-search {
|
|
|
|
right: 72px;
|
|
|
|
}
|
2021-10-16 21:57:26 +02:00
|
|
|
|
2020-02-03 17:01:11 +01:00
|
|
|
.top-navbar-border,
|
2020-05-15 13:13:50 +02:00
|
|
|
#searchbox_legacy .navbar-search.expanded,
|
|
|
|
#searchbox .navbar-search.expanded {
|
2020-02-03 17:01:11 +01:00
|
|
|
width: calc(100% - 50px);
|
|
|
|
}
|
|
|
|
}
|
2019-10-24 05:38:18 +02:00
|
|
|
}
|
|
|
|
|
2021-02-04 02:49:05 +01:00
|
|
|
@media (width < $md_min) {
|
2019-10-24 05:38:18 +02:00
|
|
|
body {
|
2020-08-06 02:42:07 +02:00
|
|
|
padding: 0;
|
2019-10-24 05:38:18 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.column-left {
|
|
|
|
display: none;
|
|
|
|
|
2020-05-19 13:20:39 +02:00
|
|
|
&.expanded {
|
|
|
|
display: block;
|
|
|
|
position: absolute;
|
|
|
|
float: none;
|
2020-08-06 02:42:07 +02:00
|
|
|
left: 0;
|
|
|
|
top: 0;
|
2019-10-24 05:38:18 +02:00
|
|
|
|
2020-05-19 13:20:39 +02:00
|
|
|
.left-sidebar {
|
2020-08-04 23:58:56 +02:00
|
|
|
background-color: hsla(0, 0%, 100%, 1);
|
2020-08-06 02:42:07 +02:00
|
|
|
box-shadow: 0 2px 3px 0 hsla(0, 0%, 0%, 0.1);
|
2020-05-19 13:20:39 +02:00
|
|
|
border-right: 1px solid hsl(0, 0%, 87%);
|
2020-05-27 22:21:32 +02:00
|
|
|
|
2020-09-15 22:23:01 +02:00
|
|
|
/* We use both margin and padding to
|
|
|
|
hide little artifacts from showing up in
|
|
|
|
the gutter below the navbar. */
|
2020-05-27 22:21:32 +02:00
|
|
|
margin-top: $header_height;
|
|
|
|
padding-top: $header_padding_bottom;
|
|
|
|
|
2020-05-19 13:20:39 +02:00
|
|
|
height: 100%;
|
|
|
|
padding-left: 10px;
|
2021-04-30 20:11:03 +02:00
|
|
|
width: $left_sidebar_width;
|
2020-05-19 13:20:39 +02:00
|
|
|
}
|
|
|
|
}
|
2019-10-24 05:38:18 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
body,
|
|
|
|
html,
|
|
|
|
.app-main,
|
|
|
|
.header-main {
|
|
|
|
min-width: 350px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.column-middle,
|
|
|
|
.app-main .column-middle {
|
|
|
|
margin-left: 7px;
|
|
|
|
margin-right: 7px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.header-main .column-middle {
|
2020-08-06 02:42:07 +02:00
|
|
|
margin-left: 0;
|
2019-10-24 05:38:18 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.column-middle-inner {
|
2020-08-06 02:42:07 +02:00
|
|
|
margin-left: 0;
|
2019-10-24 05:38:18 +02:00
|
|
|
margin-right: 15px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.app-main .column-middle .column-middle-inner {
|
2020-08-06 02:42:07 +02:00
|
|
|
margin-right: 0;
|
2019-10-24 05:38:18 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.skinny-user-gravatar {
|
|
|
|
position: absolute;
|
2020-08-06 02:42:07 +02:00
|
|
|
top: 0;
|
2019-10-24 05:38:18 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
#streamlist-toggle {
|
|
|
|
display: block;
|
|
|
|
}
|
|
|
|
|
2020-02-03 17:01:11 +01:00
|
|
|
.top-navbar-border {
|
|
|
|
margin-left: 40px;
|
2020-06-21 18:59:37 +02:00
|
|
|
width: calc(100% - 108px);
|
2020-02-03 17:01:11 +01:00
|
|
|
}
|
2020-09-15 22:23:01 +02:00
|
|
|
/* todo: Figure out why this has to be different
|
2021-10-07 07:44:06 +02:00
|
|
|
from above at this width and resolve it */
|
2020-05-15 13:13:50 +02:00
|
|
|
#searchbox_legacy .navbar-search.expanded,
|
|
|
|
#searchbox .navbar-search.expanded {
|
2020-06-21 18:59:37 +02:00
|
|
|
width: calc(100% - 123px);
|
2019-10-24 05:38:18 +02:00
|
|
|
}
|
|
|
|
|
2020-02-03 17:01:11 +01:00
|
|
|
.search_closed .fa-search {
|
|
|
|
right: 115px;
|
|
|
|
}
|
|
|
|
|
|
|
|
#top_navbar:not(.rightside-userlist) {
|
|
|
|
.top-navbar-border {
|
|
|
|
width: calc(100% - 75px);
|
|
|
|
}
|
2021-10-16 21:57:26 +02:00
|
|
|
|
2020-05-15 13:13:50 +02:00
|
|
|
#searchbox_legacy .navbar-search.expanded,
|
|
|
|
#searchbox .navbar-search.expanded {
|
2020-02-03 17:01:11 +01:00
|
|
|
width: calc(100% - 90px);
|
|
|
|
}
|
2019-10-24 05:38:18 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-02-04 02:49:05 +01:00
|
|
|
@media (width < $sm_min) {
|
2019-10-24 05:38:18 +02:00
|
|
|
.column-right.expanded .right-sidebar,
|
|
|
|
.column-left.expanded .left-sidebar {
|
|
|
|
margin-top: 31px;
|
|
|
|
}
|
|
|
|
|
2020-05-19 13:23:40 +02:00
|
|
|
.column-left.expanded {
|
|
|
|
.left-sidebar {
|
2020-08-06 02:42:07 +02:00
|
|
|
padding: 0;
|
2019-10-24 05:38:18 +02:00
|
|
|
|
2020-05-19 13:23:40 +02:00
|
|
|
#streams_header {
|
|
|
|
padding-right: 10px;
|
|
|
|
}
|
|
|
|
}
|
2019-10-24 05:38:18 +02:00
|
|
|
|
2020-05-19 13:23:40 +02:00
|
|
|
.narrows_panel {
|
|
|
|
margin-top: 10px;
|
|
|
|
}
|
2019-10-24 05:38:18 +02:00
|
|
|
}
|
|
|
|
|
2020-02-03 17:01:11 +01:00
|
|
|
.search_closed .fa-search {
|
|
|
|
top: 5px;
|
|
|
|
}
|
|
|
|
|
2019-10-24 05:38:18 +02:00
|
|
|
#streamlist-toggle,
|
|
|
|
#navbar-buttons,
|
|
|
|
.navbar-search,
|
2020-07-08 23:44:01 +02:00
|
|
|
#message_view_header,
|
2019-10-24 05:38:18 +02:00
|
|
|
#searchbox,
|
|
|
|
#searchbox_legacy,
|
|
|
|
.header {
|
|
|
|
height: 30px;
|
|
|
|
line-height: 30px;
|
|
|
|
}
|
|
|
|
|
|
|
|
#search_query {
|
|
|
|
height: 30px !important;
|
|
|
|
vertical-align: text-bottom;
|
|
|
|
}
|
|
|
|
|
|
|
|
#streamlist-toggle-button {
|
|
|
|
height: 30px;
|
2020-08-06 02:42:07 +02:00
|
|
|
padding-top: 0;
|
|
|
|
padding-bottom: 0;
|
2019-10-24 05:38:18 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
#navbar-buttons ul.nav .dropdown-toggle,
|
|
|
|
#navbar-buttons ul.nav li.active .dropdown-toggle {
|
2020-06-21 18:59:37 +02:00
|
|
|
top: -8px;
|
2019-10-24 05:38:18 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
#searchbox,
|
|
|
|
#searchbox_legacy {
|
|
|
|
.input-append .fa-search {
|
|
|
|
top: 5px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.search_button,
|
2020-10-30 00:26:54 +01:00
|
|
|
.search_button:disabled:hover {
|
2020-08-06 02:42:07 +02:00
|
|
|
top: 0;
|
2019-10-24 05:38:18 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-07-08 23:44:01 +02:00
|
|
|
#message_view_header_underpadding {
|
2019-10-24 05:38:18 +02:00
|
|
|
top: 30px;
|
2020-08-06 02:34:58 +02:00
|
|
|
height: 10px;
|
2019-10-24 05:38:18 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.messagebox-content {
|
|
|
|
padding-right: 15px;
|
|
|
|
}
|
|
|
|
|
2020-07-04 02:13:10 +02:00
|
|
|
/* In mobile views we place it just to the right of the time element */
|
2019-10-24 05:38:18 +02:00
|
|
|
.message_controls {
|
2020-05-19 15:35:34 +02:00
|
|
|
right: 40px;
|
2019-10-24 05:38:18 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.include-sender .message_controls {
|
|
|
|
background: none !important;
|
2022-03-02 07:02:28 +01:00
|
|
|
padding: 0 !important;
|
2019-10-24 05:38:18 +02:00
|
|
|
border: none !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
.message_time {
|
|
|
|
left: auto;
|
|
|
|
right: -5px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.sender_name {
|
|
|
|
max-width: 250px;
|
|
|
|
overflow: hidden;
|
|
|
|
white-space: nowrap;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
line-height: 15px;
|
|
|
|
}
|
|
|
|
|
|
|
|
#floating_recipient_bar {
|
|
|
|
top: 40px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.message_content {
|
|
|
|
padding-right: 50px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-02-04 02:49:05 +01:00
|
|
|
@media (width < $mm_min) {
|
2019-10-24 05:38:18 +02:00
|
|
|
html {
|
|
|
|
overflow-x: hidden;
|
|
|
|
}
|
|
|
|
|
|
|
|
body,
|
|
|
|
html,
|
|
|
|
.app-main,
|
|
|
|
.header-main {
|
|
|
|
min-width: 320px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-02-04 02:49:05 +01:00
|
|
|
@media (width < $md_min) {
|
2019-10-24 05:38:18 +02:00
|
|
|
#feedback_container {
|
|
|
|
width: calc(90% - 30px);
|
|
|
|
left: 5%;
|
|
|
|
top: 5%;
|
|
|
|
}
|
|
|
|
}
|
2020-10-05 16:09:25 +02:00
|
|
|
|
|
|
|
#login_to_access_modal {
|
2021-11-28 08:37:15 +01:00
|
|
|
.modal__content p {
|
|
|
|
margin: 0;
|
2020-10-05 16:09:25 +02:00
|
|
|
}
|
|
|
|
}
|
2022-02-14 17:43:32 +01:00
|
|
|
|
|
|
|
#scroll-to-bottom-button-container {
|
|
|
|
display: none;
|
|
|
|
z-index: 3;
|
|
|
|
position: absolute;
|
|
|
|
bottom: 41px;
|
|
|
|
right: 0;
|
|
|
|
|
|
|
|
#scroll-to-bottom-button-clickable-area {
|
|
|
|
width: 60px;
|
|
|
|
height: 60px;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
&:hover #scroll-to-bottom-button {
|
|
|
|
background: hsl(240, 96%, 68%);
|
|
|
|
}
|
|
|
|
|
|
|
|
#scroll-to-bottom-button {
|
|
|
|
text-align: center;
|
|
|
|
width: 40px;
|
|
|
|
height: 40px;
|
|
|
|
background: hsl(240, 96%, 68%, 0.5);
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
|
|
i {
|
|
|
|
color: hsl(0, 0%, 100%);
|
|
|
|
margin: 0 auto;
|
|
|
|
font-size: 21px;
|
|
|
|
position: relative;
|
|
|
|
top: 8px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2022-02-21 09:56:30 +01:00
|
|
|
|
|
|
|
.tooltip_right_arrow {
|
|
|
|
position: relative;
|
|
|
|
top: -1px;
|
|
|
|
font-weight: 600;
|
|
|
|
}
|
2021-11-02 15:45:43 +01:00
|
|
|
|
|
|
|
.spectator_login_for_image_button {
|
|
|
|
max-width: 250px;
|
|
|
|
height: 50px;
|
|
|
|
|
|
|
|
:hover {
|
|
|
|
text-decoration: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
.login_button {
|
|
|
|
padding: 5px;
|
|
|
|
margin-top: 5px;
|
|
|
|
|
|
|
|
.fa {
|
|
|
|
top: 1px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|