mirror of
https://github.com/zulip/zulip.git
synced 2026-06-24 21:08:25 +08:00
b20a24875a
Without changing how we render emoji in messages or changing the data set used for emoji names, this switches us to the superior percentage-based system for choosing which emoji from the spritesheet to select and the iamcal sprite sheets. It requires some small changes to CSS to ensure emoji are centered properly in the new design. Based on Harshit Gupta's work on "Interrelated emoji infrastructure changes".
2680 lines
48 KiB
CSS
2680 lines
48 KiB
CSS
body,
|
|
html {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow-x: hidden;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
#css-loading {
|
|
display: none !important; /* We are now loaded, by definition. */
|
|
}
|
|
|
|
body {
|
|
font-family: 'Humbug', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
}
|
|
|
|
/* Common background color */
|
|
body,
|
|
#tab_bar_underpadding {
|
|
background-color: #ffffff;
|
|
-webkit-transition: background-color 200ms linear;
|
|
-moz-transition: background-color 200ms linear;
|
|
-o-transition: background-color 200ms linear;
|
|
-ms-transition: background-color 200ms linear;
|
|
transition: background-color 200ms linear;
|
|
}
|
|
|
|
input,
|
|
button,
|
|
select,
|
|
textarea {
|
|
font-family: 'Humbug', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
line-height: normal;
|
|
}
|
|
|
|
blockquote p {
|
|
font-weight: normal;
|
|
}
|
|
|
|
a {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.no-select {
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
p.n-margin {
|
|
margin: 10px 0px 0px 0px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.modal-backdrop {
|
|
z-index: 102;
|
|
}
|
|
|
|
.top-messages-logo {
|
|
position: absolute;
|
|
left: calc(50% - 12px);
|
|
top: 67px;
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
#unmute_muted_topic_notification {
|
|
display: none;
|
|
position: absolute;
|
|
width: 400px;
|
|
top: 0px;
|
|
left: calc(50vw - 220px);
|
|
padding: 15px;
|
|
|
|
background-color: #FAFAFA;
|
|
border-radius: 5px;
|
|
box-shadow: 0px 0px 30px rgba(0,0,0,0.25);
|
|
z-index: 110;
|
|
|
|
animation-name: pulse;
|
|
animation-iteration-count: infinite;
|
|
animation-duration: 2s;
|
|
|
|
transition-property: top, bottom;
|
|
transition-duration: 0.5s;
|
|
}
|
|
|
|
#unmute_muted_topic_notification.show {
|
|
top: 50px;
|
|
}
|
|
|
|
#unmute_muted_topic_notification h3 {
|
|
font-size: 16pt;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
box-shadow: 0px 0px 30px rgba(0,0,0,0.35);
|
|
}
|
|
50% {
|
|
box-shadow: 0px 0px 30px rgba(0,0,0,0.15);
|
|
}
|
|
100% {
|
|
box-shadow: 0px 0px 30px rgba(0,0,0,0.35);
|
|
}
|
|
}
|
|
|
|
.fade-in-message {
|
|
animation-name: fadeInMessage;
|
|
animation-duration: 1s;
|
|
animation-iteration-count: 1;
|
|
}
|
|
|
|
.fade-in-message .message_edit_notice {
|
|
animation-name: fadeInEditNotice;
|
|
animation-duration: 1s;
|
|
animation-iteration-count: 1;
|
|
}
|
|
|
|
#unmute_muted_topic_notification .btn {
|
|
background-color: transparent;
|
|
border: 1px solid #444;
|
|
outline: none;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
#unmute_muted_topic_notification .btn:hover {
|
|
background-color: #444;
|
|
color: #FAFAFA;
|
|
}
|
|
|
|
#unmute_muted_topic_notification .exit-me {
|
|
font-size: 30pt;
|
|
font-weight: 200;
|
|
margin: 5px 0px 0px 10px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.header {
|
|
position: fixed;
|
|
z-index: 102; /* Needs to be higher than .alert-bar-container */
|
|
width: 100%;
|
|
background: #ffffff;
|
|
border-bottom: 1px solid #dadada;
|
|
height: 40px;
|
|
}
|
|
|
|
.app {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow-y: scroll;
|
|
z-index: 99;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.app-main,
|
|
.header-main {
|
|
width: 100%;
|
|
max-width: 1400px;
|
|
min-width: 950px;
|
|
margin: 0px auto;
|
|
padding: 0px;
|
|
position: relative;
|
|
}
|
|
|
|
.app-main {
|
|
height: 100%;
|
|
min-height: 100%;
|
|
}
|
|
|
|
.fixed-app {
|
|
width: 100%;
|
|
position: fixed;
|
|
z-index: 98;
|
|
left: 0px;
|
|
}
|
|
|
|
.column-left,
|
|
.column-right {
|
|
width: 250px;
|
|
max-width: 250px;
|
|
}
|
|
|
|
.column-left {
|
|
position: absolute;
|
|
left: 0px;
|
|
top: 0px;
|
|
}
|
|
|
|
.column-right {
|
|
position: absolute;
|
|
right: 0px;
|
|
top: 0px;
|
|
}
|
|
|
|
.app-main .column-left .left-sidebar,
|
|
.app-main .column-right .right-sidebar {
|
|
position: fixed;
|
|
margin-top: 50px;
|
|
z-index: 100;
|
|
}
|
|
|
|
.app-main .column-left .left-sidebar {
|
|
width: 242px;
|
|
padding-left: 0px;
|
|
}
|
|
|
|
.app-main .column-right .right-sidebar {
|
|
padding-left: 15px;
|
|
width: 235px;
|
|
}
|
|
|
|
.app-main .column-middle {
|
|
min-height: 100%;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.column-middle {
|
|
margin-right: 250px;
|
|
margin-left: 250px;
|
|
position: relative;
|
|
}
|
|
|
|
textarea,
|
|
input {
|
|
font-family: 'Humbug', Helvetica, Arial, sans-serif;
|
|
}
|
|
|
|
/* Override Bootstrap's fixed sizes for various elements */
|
|
|
|
textarea,
|
|
label {
|
|
font-size: inherit;
|
|
line-height: inherit;
|
|
}
|
|
|
|
/* List of text-like input types taken from Bootstrap */
|
|
|
|
input[type="text"],
|
|
input[type="password"],
|
|
input[type="datetime"],
|
|
input[type="datetime-local"],
|
|
input[type="date"],
|
|
input[type="month"],
|
|
input[type="time"],
|
|
input[type="week"],
|
|
input[type="number"],
|
|
input[type="email"],
|
|
input[type="url"],
|
|
input[type="search"],
|
|
input[type="tel"],
|
|
input[type="color"] {
|
|
font-size: inherit;
|
|
height: 1.4em;
|
|
}
|
|
|
|
li,
|
|
.table th,
|
|
.table td {
|
|
line-height: inherit;
|
|
}
|
|
|
|
.btn {
|
|
font-size: inherit;
|
|
height: auto;
|
|
line-height: 100%;
|
|
}
|
|
|
|
.copy_message,
|
|
.copy_message:focus {
|
|
background-color: white;
|
|
height: 20px;
|
|
width: 15px;
|
|
padding: 5px 10px;
|
|
border: none;
|
|
position: relative;
|
|
top: 28px;
|
|
left: -5px;
|
|
margin-top: -24px;
|
|
display: block;
|
|
}
|
|
|
|
#clipboard_image {
|
|
margin-top: -5px;
|
|
margin-left: -8px;
|
|
}
|
|
|
|
.copy_message:hover svg path {
|
|
fill: black;
|
|
}
|
|
|
|
.btn-large {
|
|
font-size: 115%;
|
|
}
|
|
|
|
.header-main .logo {
|
|
display: inline-block;
|
|
font-size: 120%;
|
|
font-weight: 900;
|
|
text-shadow: none;
|
|
color: #ffffff;
|
|
font-variant: small-caps;
|
|
letter-spacing: 2px;
|
|
line-height: 18px;
|
|
text-decoration: none;
|
|
position: relative;
|
|
}
|
|
|
|
.header-main .logoimage {
|
|
height: 40px;
|
|
width: auto;
|
|
}
|
|
|
|
#user-settings-avatar {
|
|
width: 100px;
|
|
height: 100px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
/* Classes for hiding and showing controls */
|
|
|
|
.notdisplayed {
|
|
display: none !important;
|
|
}
|
|
|
|
.notvisible {
|
|
visibility: hidden !important;
|
|
width: 0px !important;
|
|
min-width: 0px !important;
|
|
min-height: 0px !important;
|
|
height: 0px !important;
|
|
overflow: hidden !important;
|
|
position: absolute !important;
|
|
}
|
|
|
|
/* Relative positioning */
|
|
|
|
.position-relative {
|
|
position: relative;
|
|
}
|
|
|
|
/* Lighter strong */
|
|
|
|
strong {
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Inline and block code */
|
|
|
|
code {
|
|
/* 12/14 em, so bootstrap's default 12 px,
|
|
when body is the default 14 px */
|
|
font-size: 0.857em;
|
|
}
|
|
|
|
.message_content code {
|
|
white-space: pre-wrap;
|
|
padding: 0px 4px;
|
|
background-color: #fff;
|
|
}
|
|
|
|
/* This ensures bulleted lists are nicely centered in 1-line messages */
|
|
.message_content ul {
|
|
margin: 5px 0 5px 20px;
|
|
}
|
|
|
|
.codehilite {
|
|
display: block !important;
|
|
border: none !important;
|
|
background: none !important;
|
|
}
|
|
|
|
pre {
|
|
/* code block text is a bit smaller than normal text */
|
|
font-size: 0.8em;
|
|
line-height: 1.4;
|
|
white-space: pre;
|
|
overflow-x: auto;
|
|
word-wrap: normal;
|
|
/* Bootstrap's default here is top: 0px, bottom: 10px */
|
|
margin-top: 5px;
|
|
margin-bottom: 5px;
|
|
/* Bootstrap's default here is 9.5 on all sides */
|
|
padding-top: 5px;
|
|
padding-bottom: 3px;
|
|
padding-left: 7px;
|
|
padding-right: 7px;
|
|
}
|
|
|
|
/* Ensure the horizontal scrollbar is visible on Mac */
|
|
pre::-webkit-scrollbar {
|
|
height: 8px;
|
|
|
|
background-color: rgba(0,0,0,0.05);
|
|
}
|
|
|
|
pre::-webkit-scrollbar-thumb {
|
|
background-color: rgba(0,0,0,0.3);
|
|
border-radius: 20px;
|
|
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
pre::-webkit-scrollbar-thumb:hover {
|
|
background-color: rgb(0,0,0,0.6);
|
|
}
|
|
|
|
pre code {
|
|
overflow-x: scroll;
|
|
white-space: pre;
|
|
}
|
|
|
|
/* Style inline code inside a link
|
|
to look more like a normal link */
|
|
a code {
|
|
color: #08C;
|
|
border-color: #08C;
|
|
}
|
|
|
|
a:hover code {
|
|
color: #005580;
|
|
border-color: #005580;
|
|
}
|
|
|
|
.preserve_spaces {
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.sidebar-nav {
|
|
padding: 0px 10px 20px 0px;
|
|
margin-top: 1em;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
/* This is a little hacky, but for whatever reason, span2 in a row-fluid
|
|
doesn't consistently take on the right width when it's in an affix, so
|
|
we need to specify a max size. */
|
|
max-width: 250px;
|
|
}
|
|
|
|
.edit-profile {
|
|
font-weight: 300;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.logout {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sidebar-title {
|
|
font-size: 1em;
|
|
color: #aaa;
|
|
font-weight: normal;
|
|
display: inline;
|
|
}
|
|
|
|
#message_edit_tooltip {
|
|
float: right;
|
|
color: #000;
|
|
font-size: 13px;
|
|
margin-top: 3px;
|
|
margin-left: 6px;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
#message_edit_tooltip:hover {
|
|
opacity: 1.0;
|
|
}
|
|
|
|
.message-edit-tooltip-inner {
|
|
width: 200px;
|
|
position: absolute;
|
|
right: 7px;
|
|
top: -18px;
|
|
}
|
|
|
|
.narrow-filter {
|
|
display: block;
|
|
position: relative;
|
|
}
|
|
|
|
.message_header_stream a.message_label_clickable {
|
|
color: #333;
|
|
}
|
|
|
|
li.actual-dropdown-menu i {
|
|
/* In gear menu, make icons the same width so labels line up. */
|
|
display: inline-block;
|
|
width: 14px;
|
|
text-align: center;
|
|
margin-right: 3px;
|
|
}
|
|
|
|
.message_area_padder {
|
|
/* The height of the header and the tabbar plus a small gap */
|
|
margin-top: 100px;
|
|
/* This is needed for the floating recipient bar
|
|
in Firefox only, for some reason;
|
|
otherwise it gets a scrollbar */
|
|
overflow: visible;
|
|
}
|
|
|
|
td.pointer {
|
|
vertical-align: top;
|
|
padding-top: 10px;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.new_messages {
|
|
background-color: lightblue;
|
|
}
|
|
|
|
.new_messages,
|
|
.new_messages_fadeout {
|
|
-webkit-transition: all 3s ease-in-out;
|
|
-moz-transition: all 3s ease-in-out;
|
|
-o-transition: all 3s ease-in-out;
|
|
transition: all 3s ease-in-out;
|
|
}
|
|
|
|
.include-sender .message_edit_notice {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
line-height: 14px;
|
|
margin-left: 0px;
|
|
position: static;
|
|
padding: 0px;
|
|
width: auto;
|
|
}
|
|
|
|
.sender-status .message_edit_notice {
|
|
line-height: 18px;
|
|
}
|
|
|
|
.message_edit_notice {
|
|
font-size: 10px;
|
|
color: #a1a1a1;
|
|
font-weight: 300;
|
|
line-height: 0px;
|
|
text-align: right;
|
|
width: 45px;
|
|
position: absolute;
|
|
left: 0px;
|
|
top: 16px;
|
|
}
|
|
|
|
.include-sender .message_edit_notice:before {
|
|
content: "(";
|
|
}
|
|
|
|
.include-sender .message_edit_notice:after {
|
|
content: ")";
|
|
}
|
|
|
|
.include-sender .message_time {
|
|
top: -4px;
|
|
}
|
|
|
|
.message_time {
|
|
display: block;
|
|
font-size: 12px;
|
|
color: #b1b1b1;
|
|
vertical-align: middle;
|
|
padding: 1px;
|
|
font-weight: 400;
|
|
position: absolute;
|
|
right: -105px;
|
|
line-height: 20px;
|
|
text-align: right;
|
|
-webkit-transition: background-color 2.7s ease-in, color 2.7s ease-in;
|
|
-moz-transition: background-color 2.7s ease-in, color 2.7s ease-in;
|
|
-o-transition: background-color 2.7s ease-in, color 2.7s ease-in;
|
|
transition: background-color 2.7s ease-in, color 2.7s ease-in;
|
|
}
|
|
|
|
/* 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. */
|
|
.alert-copied {
|
|
position: absolute;
|
|
right: -110px;
|
|
font-size: 14px;
|
|
color: #52c2af;
|
|
background-color: white;
|
|
z-index: 999;
|
|
padding-left: 20px;
|
|
padding-right: 40px;
|
|
font-weight: 400;
|
|
display: none;
|
|
}
|
|
|
|
.private-message .alert-copied {
|
|
background-color: #feffe0;
|
|
}
|
|
|
|
.include-sender .alert-copied {
|
|
top: -3px;
|
|
}
|
|
|
|
.status-time {
|
|
top: 8px !important;
|
|
}
|
|
|
|
.message_controls {
|
|
display: inline-block;
|
|
position: absolute;
|
|
top: 2px;
|
|
right: -56px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.message_controls > div {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.messagebox:hover .message_controls > div {
|
|
opacity: 1;
|
|
pointer-events: all;
|
|
}
|
|
|
|
.message_controls > div {
|
|
padding: 0px 1px;
|
|
}
|
|
|
|
.include-sender .message_controls {
|
|
top: -3px;
|
|
}
|
|
|
|
.message_data {
|
|
vertical-align: top;
|
|
text-align: left;
|
|
padding: 0px;
|
|
background-color: #fff;
|
|
position: relative;
|
|
}
|
|
|
|
.message_header {
|
|
vertical-align: middle;
|
|
text-align: left;
|
|
/* We can overflow-y if the font size gets big */
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-weight: 600;
|
|
line-height: 14px;
|
|
position: relative;
|
|
z-index: 0;
|
|
}
|
|
|
|
.message_list .recipient_row {
|
|
background: #f1f1f1;
|
|
border-bottom: 1px solid #e2e2e2;
|
|
border-top: 1px solid #e2e2e2;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.stream_label {
|
|
display: inline-block;
|
|
padding: 3px 4px 2px 4px;
|
|
font-weight: normal;
|
|
height: 17px;
|
|
line-height: 17px;
|
|
border-top-color: rgba(0, 0, 0, 0);
|
|
border-right-color: rgba(0, 0, 0, 0);
|
|
border-bottom-color: rgba(0, 0, 0, 0);
|
|
background-color: #e2e2e2;
|
|
border-left-color: #e2e2e2;
|
|
border-width: 0px;
|
|
position: relative;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.stream_label .invite-stream-icon {
|
|
font-size: 12px;
|
|
line-height: 17px;
|
|
}
|
|
|
|
.message_list .stream_label {
|
|
margin-left: 0px;
|
|
}
|
|
|
|
.stream_label:hover {
|
|
color: inherit !important;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.stream_label:after {
|
|
left: 100%;
|
|
top: 50%;
|
|
content: " ";
|
|
height: 0px;
|
|
width: 0px;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
margin-top: -11px;
|
|
border-style: solid;
|
|
border-width: 11px 0 11px 5px;
|
|
border-color: inherit;
|
|
z-index: 2;
|
|
-moz-transform: scale(.9999);
|
|
}
|
|
|
|
.stream_label:before {
|
|
left: 100%;
|
|
top: 50%;
|
|
content: " ";
|
|
height: 0px;
|
|
width: 0px;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
margin-top: -14px;
|
|
border-style: solid;
|
|
border-width: 14px 0 14px 6px;
|
|
border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #ffffff;
|
|
z-index: 1;
|
|
-moz-transform: scale(.9999);
|
|
}
|
|
|
|
.stream_topic {
|
|
display: inline-block;
|
|
padding: 3px 6px 2px 12px;
|
|
margin-left: -5px;
|
|
height: 17px;
|
|
line-height: 17px;
|
|
}
|
|
|
|
.recipient_row_date {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
|
|
color: #888;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
padding: 3px 11px 2px 10px;
|
|
height: 17px;
|
|
line-height: 17px;
|
|
}
|
|
|
|
.recipient_row_date.hide-date {
|
|
display: none;
|
|
}
|
|
|
|
.floating_recipient .recipient_row_date.hide-date {
|
|
display: block;
|
|
}
|
|
|
|
.summary_row .message_header {
|
|
padding: 5px 0px 4px 5px;
|
|
}
|
|
|
|
.summary_row .message_header {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.bookend_tr + .summary_row .message_header {
|
|
border-top-right-radius: 3px;
|
|
}
|
|
|
|
.bookend_tr + .summary_row .summary_colorblock {
|
|
border-top-left-radius: 3px;
|
|
}
|
|
|
|
.summary_row.last_message .message_header {
|
|
border-bottom-right-radius: 3px;
|
|
box-shadow: inset 0px 2px 1px -2px #333, inset -2px 0px 1px -2px #333, inset 0px -2px 1px -2px #333;
|
|
}
|
|
|
|
.summary_row.last_message .summary_colorblock {
|
|
border-bottom-left-radius: 3px;
|
|
}
|
|
|
|
.message_header .icon-vector-narrow {
|
|
font-size: 0.6em;
|
|
position: relative;
|
|
top: -1px;
|
|
}
|
|
|
|
.copy-paste-text {
|
|
/* Hide the text that we want copy paste to capture */
|
|
position: absolute;
|
|
text-indent: -99999px;
|
|
float: left;
|
|
width: 0px;
|
|
}
|
|
|
|
.message_header_colorblock {
|
|
border-radius: 3px 0px 0px 0px;
|
|
/* box-shadow: 0px 2px 3px #ccc; */
|
|
box-shadow: inset 0px 2px 1px -2px #333, inset 2px 0px 1px -2px #333 !important;
|
|
}
|
|
|
|
.summary_row_private_message .summary_colorblock {
|
|
background: #000;
|
|
}
|
|
|
|
.messages-expand,
|
|
.messages-collapse {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/*
|
|
We can't collapse the floating recipient bar yet, so this is
|
|
just a temporary hack.
|
|
*/
|
|
.floating_recipient .messages-collapse {
|
|
display: none;
|
|
}
|
|
|
|
.message_failed .rotating {
|
|
display: inline-block;
|
|
|
|
-webkit-animation: rotate 1s infinite linear;
|
|
-moz-animation: rotate 1s infinite linear;
|
|
-ms-animation: rotate 1s infinite linear;
|
|
-o-animation: rotate 1s infinite linear;
|
|
animation: rotate 1s infinite linear;
|
|
}
|
|
|
|
@-webkit-keyframes rotate {
|
|
from {
|
|
-webkit-transform: rotate(0deg);
|
|
}
|
|
to {
|
|
-webkit-transform: rotate(359deg);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes rotate {
|
|
from {
|
|
-moz-transform: rotate(0deg);
|
|
}
|
|
to {
|
|
-moz-transform: rotate(359deg);
|
|
}
|
|
}
|
|
|
|
@-ms-keyframes rotate {
|
|
from {
|
|
-ms-transform: rotate(0deg);
|
|
}
|
|
to {
|
|
-ms-transform: rotate(359deg);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes rotate {
|
|
from {
|
|
-o-transform: rotate(0deg);
|
|
}
|
|
to {
|
|
-o-transform: rotate(359deg);
|
|
}
|
|
}
|
|
|
|
@keyframes rotate {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(359deg);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes fadeInMessage {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes fadeInMessage {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInMessage {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes fadeInEditNotice {
|
|
0% {
|
|
transform: translateX(-10px);
|
|
}
|
|
100% {
|
|
transform: translateX(0px);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes fadeInEditNotice {
|
|
0% {
|
|
transform: translateX(-10px);
|
|
}
|
|
100% {
|
|
transform: translateX(0px);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInEditNotice {
|
|
0% {
|
|
transform: translateX(-10px);
|
|
}
|
|
100% {
|
|
transform: translateX(0px);
|
|
}
|
|
}
|
|
|
|
.messagebox-bottom {
|
|
height: 3px;
|
|
background-color: #fff;
|
|
border-radius: 0px 0px 3px 0px;
|
|
/* box-shadow: 0px 2px 2px -1px #ccc; */
|
|
border: 1px solid #c1dbd5;
|
|
border-top: none;
|
|
border-left: none;
|
|
}
|
|
|
|
.messagebox-bottom-colorblock {
|
|
border-radius: 0px 0px 0px 3px;
|
|
/* box-shadow: 0px 2px 2px -1px #ccc; */
|
|
border: 1px solid #c1dbd5;
|
|
border-top: none;
|
|
border-right: none;
|
|
}
|
|
|
|
.floating_recipient .message_header_private_message {
|
|
border-bottom: 0px;
|
|
border-left: 0px;
|
|
}
|
|
|
|
.message_header_private_message .message_label_clickable {
|
|
background-color: #444444;
|
|
display: inline-block;
|
|
padding: 3px 4px 2px 4px;
|
|
font-weight: normal;
|
|
font-size: 14px;
|
|
height: 17px;
|
|
line-height: 17px;
|
|
border-left-color: #444;
|
|
}
|
|
|
|
/* Base color backgrounds for messageboxes,
|
|
private messages, mentions, and unread messages */
|
|
|
|
.messagebox {
|
|
background-color: #ffffff;
|
|
position: relative;
|
|
}
|
|
|
|
.private-message .messagebox,
|
|
.message_header_private_message .message-header-contents {
|
|
background-color: #feffe0;
|
|
}
|
|
|
|
.floating_recipient .message-header-contents {
|
|
border-right: 1px solid #e2e2e2;
|
|
}
|
|
|
|
.mention .messagebox-content {
|
|
background-color: #ffe4e0;
|
|
}
|
|
|
|
.messagebox .message_top_line {
|
|
position: relative;
|
|
}
|
|
|
|
.recipient_row .message_row:first-child .unread_marker {
|
|
top: 0px;
|
|
}
|
|
|
|
.unread_marker {
|
|
display: block;
|
|
position: absolute;
|
|
left: 2px;
|
|
top: 0px;
|
|
padding-bottom: 2px;
|
|
opacity: 0;
|
|
z-index: 1;
|
|
height: 100%;
|
|
-webkit-transition: all 0.3s ease-out;
|
|
-moz-transition: all 0.3s ease-out;
|
|
-o-transition: all 0.3s ease-out;
|
|
transition: all 0.3s ease-out;
|
|
}
|
|
|
|
.unread-marker-fill {
|
|
background: #2b8213;
|
|
width: 3px;
|
|
height: 100%;
|
|
box-shadow: inset 0px -1px 0px 0px #ffffff;
|
|
}
|
|
|
|
.last_message .unread-marker-fill {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.unread .unread_marker {
|
|
-webkit-transition: all 0.3s ease-out;
|
|
-moz-transition: all 0.3s ease-out;
|
|
-o-transition: all 0.3s ease-out;
|
|
transition: all 0.3s ease-out;
|
|
opacity: 1;
|
|
}
|
|
|
|
.unread_marker.slow_fade {
|
|
-webkit-transition: all 2s ease-out;
|
|
-moz-transition: all 2s ease-out;
|
|
-o-transition: all 2s ease-out;
|
|
transition: all 2s ease-out;
|
|
}
|
|
|
|
.unread_marker.fast_fade {
|
|
-webkit-transition: all 0.3s ease-out;
|
|
-moz-transition: all 0.3s ease-out;
|
|
-o-transition: all 0.3s ease-out;
|
|
transition: all 0.3s ease-out;
|
|
}
|
|
|
|
.selected_message .messagebox {
|
|
z-index: 1;
|
|
}
|
|
|
|
.selected_message .messagebox-content {
|
|
box-shadow: inset 0px 0px 0px 2px #4577bc,
|
|
-1px -1px 0px 0px #4577bc,
|
|
1px 1px 0px 0px #4577bc,
|
|
-1px 1px 0px 0px #4577bc,
|
|
1px -1px 0px 0px #4577bc;
|
|
}
|
|
|
|
.message_sender {
|
|
height: 0px;
|
|
vertical-align: top;
|
|
position: relative;
|
|
}
|
|
|
|
.sender_name {
|
|
color: #333;
|
|
display: inline-block;
|
|
font-weight: 700;
|
|
vertical-align: top;
|
|
line-height: 12px;
|
|
font-size: 14px;
|
|
margin-left: -3px;
|
|
}
|
|
|
|
.sender-status {
|
|
display: inline-block;
|
|
margin: 8px 0px 8px -3px;
|
|
/* this normalizes the margin of the emoji reactions with normal messages. */
|
|
padding-bottom: 5px;
|
|
vertical-align: middle;
|
|
line-height: 18px;
|
|
font-size: 14px;
|
|
position: relative;
|
|
max-width: calc(100% - 50px);
|
|
}
|
|
|
|
.message_controls.sender-status-controls {
|
|
top: 10px;
|
|
}
|
|
|
|
.sender_name-in-status {
|
|
margin-right: 3px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.sender_name_hovered .sender_name,
|
|
.sender_name_hovered .sender_name-in-status {
|
|
color: #0088CC;
|
|
}
|
|
|
|
.sender_name_hovered .inline_profile_picture {
|
|
border-color: #0088CC;
|
|
}
|
|
|
|
.message_sender .bot-icon {
|
|
position: relative;
|
|
vertical-align: top;
|
|
top: -4px;
|
|
|
|
height: 20px;
|
|
width: 20px;
|
|
}
|
|
|
|
.message_sender .sender-status .bot-icon {
|
|
top: -1px;
|
|
margin-left: -3px;
|
|
}
|
|
|
|
.actions_hover:hover {
|
|
color: #0088CC;
|
|
}
|
|
|
|
.message_failed,
|
|
.message_local {
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.message_failed {
|
|
font-weight: bold;
|
|
color: red;
|
|
position: relative;
|
|
}
|
|
|
|
a.message_label_clickable:hover {
|
|
cursor: pointer;
|
|
color: #08C;
|
|
}
|
|
|
|
.on_hover_topic_edit {
|
|
opacity: .1;
|
|
}
|
|
|
|
.always_visible_topic_edit {
|
|
opacity: .7;
|
|
}
|
|
|
|
.on_hover_topic_edit:hover,
|
|
.always_visible_topic_edit:hover {
|
|
cursor: pointer;
|
|
opacity: 1.0;
|
|
}
|
|
|
|
.on_hover_topic_mute {
|
|
opacity: .1;
|
|
}
|
|
|
|
.on_hover_topic_mute:hover {
|
|
cursor: pointer;
|
|
opacity: 1.0;
|
|
}
|
|
|
|
.edit_content {
|
|
width: 12px;
|
|
display: inline-block;
|
|
position: relative;
|
|
color: #bbb;
|
|
}
|
|
|
|
.edit_content:hover {
|
|
cursor: pointer;
|
|
color: #0088CC;
|
|
}
|
|
|
|
.reactions_hover {
|
|
display: inline-block;
|
|
position: relative;
|
|
color: #bbb;
|
|
}
|
|
|
|
.reactions_hover:hover {
|
|
color: #0088CC;
|
|
}
|
|
|
|
.message_hovered .reactions_hover,
|
|
.has_emoji_popover .reactions_hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.message_hovered .info,
|
|
.has_actions_popover .info,
|
|
.message_hovered .empty-star {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Brighten text because of the dark background */
|
|
.dark_background a,
|
|
.dark_background a:hover,
|
|
a.dark_background:hover,
|
|
.dark_background {
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.dark_background a.message_label_clickable:hover {
|
|
color: #3BF;
|
|
}
|
|
|
|
.message_top_line {
|
|
pointer-events: none;
|
|
position: relative;
|
|
}
|
|
|
|
.message_top_line * {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.include-sender .message_top_line {
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.message-right {
|
|
float: right;
|
|
}
|
|
|
|
.small {
|
|
font-size: 80%;
|
|
}
|
|
|
|
.tiny {
|
|
font-size: 60%;
|
|
}
|
|
|
|
.actions_hovered .message_time,
|
|
.actions_hovered .info {
|
|
color: #0088CC;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.info {
|
|
display: inline-block;
|
|
position: relative;
|
|
font-size: 15px;
|
|
color: #bbb;
|
|
}
|
|
|
|
.actions_hovered .actions_link {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
div.message_table {
|
|
border-collapse: separate;
|
|
margin-left: auto;
|
|
display: none;
|
|
width: 100%;
|
|
}
|
|
|
|
.message_row {
|
|
position: relative;
|
|
border-left: 1px solid #e2e2e2;
|
|
border-right: 1px solid #e2e2e2;
|
|
}
|
|
|
|
.message_row.selected_message {
|
|
z-index: 2;
|
|
}
|
|
|
|
div.focused_table {
|
|
display: block;
|
|
}
|
|
|
|
.include-sender .message_content:not(:empty) {
|
|
margin-top: -16px;
|
|
}
|
|
|
|
.message_content {
|
|
line-height: 17px;
|
|
font-size: 14px;
|
|
margin-left: 46px;
|
|
display: block;
|
|
position: relative;
|
|
}
|
|
|
|
.message_content:empty {
|
|
display: none;
|
|
}
|
|
|
|
.message_edit_content {
|
|
line-height: 18px;
|
|
resize: vertical!important;
|
|
max-height: 24em;
|
|
}
|
|
|
|
.message_edit_countdown_timer {
|
|
text-align: right;
|
|
display: inline;
|
|
color: #a1a1a1;
|
|
}
|
|
|
|
.message_edit_tooltip {
|
|
display: inline;
|
|
color: #a1a1a1;
|
|
}
|
|
|
|
.message-edit-timer-control-group {
|
|
float: right;
|
|
display: none;
|
|
}
|
|
|
|
.topic_edit {
|
|
display: none;
|
|
line-height: 22px;
|
|
}
|
|
|
|
#inline_topic_edit,
|
|
#message_edit_topic {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
#inline_topic_edit.header-v {
|
|
height: 18px;
|
|
display: inline-block;
|
|
margin: -2px 0 0 0;
|
|
padding: 0px 3px;
|
|
|
|
line-height: 0px;
|
|
font-size: 14px;
|
|
|
|
border-radius: 0px;
|
|
border: 1px solid #afbfca;
|
|
box-shadow: none;
|
|
}
|
|
|
|
#inline_topic_edit:focus,
|
|
#message_edit_topic:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.message_edit_topic_propagate {
|
|
display: inline-block;
|
|
width: 300px;
|
|
margin-bottom: 5px !important;
|
|
max-width: 100%;
|
|
}
|
|
|
|
#message-edit-history .message_author {
|
|
position: relative;
|
|
}
|
|
|
|
#message-edit-history .author_details {
|
|
display: block;
|
|
font-size: 12px;
|
|
vertical-align: middle;
|
|
padding: 1px;
|
|
font-weight: 300;
|
|
position: absolute;
|
|
right: -80px;
|
|
line-height: 20px;
|
|
text-align: right;
|
|
}
|
|
|
|
.message_content.condensed {
|
|
max-height: 8.5em;
|
|
overflow: hidden;
|
|
}
|
|
.message_content.collapsed {
|
|
max-height: 0em;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.message_length_controller {
|
|
display: none;
|
|
text-align: center;
|
|
color: #0088CC;
|
|
|
|
/* to match .message_content */
|
|
margin-left: 5px;
|
|
margin-right: 35px;
|
|
/* to make message-uncollapse easier */
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.message_length_controller:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
div.message_content table {
|
|
padding-right: 10px;
|
|
margin: 5px 5px 5px 5px;
|
|
width: 99%;
|
|
}
|
|
|
|
div.message_content thead {
|
|
background-color: #EFEFEF;
|
|
}
|
|
|
|
div.message_content div {
|
|
display: table-row;
|
|
vertical-align: inherit;
|
|
}
|
|
|
|
div.message_content div {
|
|
border: 1px solid #cccccc;
|
|
padding: 4px;
|
|
text-align: left;
|
|
}
|
|
|
|
div.message_content div {
|
|
border: 1px solid #cccccc;
|
|
padding: 4px;
|
|
}
|
|
|
|
blockquote {
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
blockquote p {
|
|
line-height: inherit;
|
|
font-size: inherit;
|
|
}
|
|
|
|
.messagebox {
|
|
word-wrap: break-word;
|
|
cursor: pointer;
|
|
vertical-align: top;
|
|
border: none;
|
|
}
|
|
|
|
.messagebox-content {
|
|
padding: 4px 115px 1px 10px;
|
|
}
|
|
|
|
.last_message .messagebox-content {
|
|
padding-bottom: 1px;
|
|
}
|
|
|
|
.messagebox p {
|
|
margin: 3px 0px 10px 0px;
|
|
}
|
|
|
|
.messagebox p:last-of-type {
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.messagebox blockquote {
|
|
padding-left: 5px;
|
|
margin-left: 10px;
|
|
border-left-color: #ddd;
|
|
}
|
|
|
|
.bookend {
|
|
padding-top: 10px;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.prev_is_same_sender.messagebox {
|
|
padding-top: 0px;
|
|
}
|
|
|
|
.prev_is_same_sender.message_data {
|
|
padding-top: 0px;
|
|
}
|
|
|
|
.next_is_same_sender {
|
|
border-bottom: 0px;
|
|
padding-bottom: 0px;
|
|
}
|
|
|
|
.inline_profile_picture {
|
|
display: inline-block;
|
|
width: 35px;
|
|
height: 35px;
|
|
margin-right: 11px;
|
|
background-size: 35px 35px;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.home-error-bar {
|
|
margin-top: 5px;
|
|
display: none;
|
|
}
|
|
|
|
.streamname {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.home-error-bar .alert {
|
|
margin-bottom: auto;
|
|
}
|
|
|
|
.brand.skinny-user-gravatar {
|
|
display: table-cell;
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
margin-bottom: 0px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#searchbox {
|
|
width: 100%;
|
|
height: 40px;
|
|
}
|
|
|
|
#tab_bar {
|
|
z-index: 2;
|
|
padding-top: 0px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
float: left;
|
|
letter-spacing: normal;
|
|
height: 40px;
|
|
}
|
|
|
|
#tab_list {
|
|
list-style: none;
|
|
margin: 0px 0px 0px 0px;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
font-size: 16px;
|
|
border: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#tab_list li {
|
|
white-space: nowrap;
|
|
list-style-type: none;
|
|
display: inline-block;
|
|
position: relative;
|
|
font-weight: 300;
|
|
background-color: #f9f9f9;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
text-overflow: ellipsis;
|
|
height: 40px;
|
|
}
|
|
|
|
#tab_list li.inactive {
|
|
border-top-color: rgba(0, 0, 0, 0);
|
|
border-right-color: rgba(0, 0, 0, 0);
|
|
border-bottom-color: rgba(0, 0, 0, 0);
|
|
background-color: #e2e2e2;
|
|
border-left-color: #e2e2e2;
|
|
border-width: 0px;
|
|
}
|
|
|
|
#tab_list li.private_message a {
|
|
color: #ffffff;
|
|
}
|
|
|
|
#tab_list li.inactive:after {
|
|
left: 100%;
|
|
top: 50%;
|
|
content: " ";
|
|
height: 0px;
|
|
width: 0px;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
margin-top: -25px;
|
|
border-style: solid;
|
|
border-width: 25px 0 25px 12px;
|
|
border-color: inherit;
|
|
z-index: 2;
|
|
-moz-transform: scale(.9999);
|
|
}
|
|
|
|
#tab_list li.inactive:before {
|
|
left: 100%;
|
|
top: 50%;
|
|
content: " ";
|
|
height: 0px;
|
|
width: 0px;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
margin-top: -28px;
|
|
border-style: solid;
|
|
border-width: 28px 0 28px 14px;
|
|
border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #ffffff;
|
|
z-index: 1;
|
|
-moz-transform: scale(.9999);
|
|
}
|
|
|
|
#tab_list a {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
border-color: inherit;
|
|
width: 100%;
|
|
display: inline-block;
|
|
padding: 0px 8px;
|
|
max-width: 120px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
#tab_list li.active {
|
|
padding-left: 17px;
|
|
padding-right: 10px;
|
|
background-color: #e2e2e2;
|
|
max-width: 120px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
#tab_list li.active.root {
|
|
padding-left: 10px;
|
|
}
|
|
|
|
#tab_list li.private_message {
|
|
border-top-color: rgba(0, 0, 0, 0);
|
|
border-right-color: rgba(0, 0, 0, 0);
|
|
border-bottom-color: rgba(0, 0, 0, 0);
|
|
background-color: #111111;
|
|
border-left-color: #111111;
|
|
color: #ffffff;
|
|
border-width: 0px;
|
|
}
|
|
|
|
#tab_list .root {
|
|
border-color: #e2e2e2;
|
|
background-color: #e2e2e2;
|
|
margin: 0px;
|
|
}
|
|
|
|
#tab_list li.stream a,
|
|
#tab_list li.private_message a {
|
|
padding-left: 17px;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
#tab_list li.root a {
|
|
color: #858585;
|
|
padding-right: 2px;
|
|
}
|
|
|
|
|
|
#tab_list .root a:hover {
|
|
color: #000000;
|
|
}
|
|
|
|
#tab_bar_underpadding {
|
|
position: absolute;
|
|
width: 100%;
|
|
top: 40px;
|
|
height: 20px;
|
|
z-index: 99;
|
|
}
|
|
|
|
#navbar-buttons {
|
|
white-space: nowrap;
|
|
margin-left: 15px;
|
|
margin-top: 7px;
|
|
display: inline-block;
|
|
float: right;
|
|
}
|
|
|
|
#navbar-buttons ul.nav {
|
|
margin: 0px;
|
|
}
|
|
|
|
#streamlist-toggle {
|
|
display: none;
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
border-right: 2px solid #afbfca;
|
|
}
|
|
|
|
#streamlist-toggle-button {
|
|
text-decoration: none;
|
|
color: #858585;
|
|
display: block;
|
|
position: relative;
|
|
background-color: #e4e4e4;
|
|
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: #670000;
|
|
top: 4px;
|
|
right: 4px;
|
|
border: 1px solid #eee;
|
|
box-shadow: 0px 0px 1px rgba(0,0,0,0.2);
|
|
border-radius: 12px;
|
|
padding: 1px 1px 1px 1px;
|
|
font-size: 9px;
|
|
z-index: 15;
|
|
font-weight: normal;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.nav .dropdown-menu {
|
|
left: auto;
|
|
right: 0px;
|
|
top: 30px;
|
|
min-width: 180px;
|
|
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
|
|
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
|
|
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.nav .dropdown-menu:after {
|
|
position: absolute;
|
|
width: 0px;
|
|
height: 0px;
|
|
top: -7px;
|
|
right: 10px;
|
|
display: inline-block;
|
|
border-right: 7px solid transparent;
|
|
border-bottom: 7px solid #aaa;
|
|
border-left: 7px solid transparent;
|
|
content: '';
|
|
z-index: 10;
|
|
}
|
|
|
|
#navbar-buttons ul.nav .dropdown-toggle,
|
|
#navbar-buttons ul.nav li.active .dropdown-toggle {
|
|
font-size: 20px;
|
|
color: #858585;
|
|
text-shadow: none;
|
|
padding-left: 0px !important;
|
|
background-color: inherit;
|
|
box-shadow: inherit;
|
|
-webkit-box-shadow: inherit;
|
|
-moz-box-shadow: inherit;
|
|
display: block;
|
|
position: absolute;
|
|
right: 0px;
|
|
top: 3px;
|
|
}
|
|
|
|
#navbar-buttons ul.nav .dropdown-toggle,
|
|
#navbar-buttons ul.nav li.active .dropdown-toggle:hover {
|
|
color: #111111;
|
|
}
|
|
|
|
#navbar-buttons ul.nav li.dropdown.open .dropdown-toggle {
|
|
background: none;
|
|
color: #111111;
|
|
text-shadow: none;
|
|
}
|
|
|
|
#searchbox .input-append {
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
#searchbox .input-append .icon-vector-search {
|
|
padding: 0px;
|
|
font-size: 20px;
|
|
position: absolute;
|
|
left: 10px;
|
|
top: 10px;
|
|
z-index: 5;
|
|
}
|
|
|
|
|
|
nav .column-left {
|
|
text-align: center;
|
|
}
|
|
|
|
nav a.no-style:hover {
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
nav .column-left .nav-logo {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
margin-top: 8px;
|
|
width: 25px;
|
|
height: 25px;
|
|
background-image: url(../images/logo/zulip-icon-128x128.png);
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
}
|
|
|
|
nav .column-left .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: #52c2af;
|
|
letter-spacing: 0.1em;
|
|
cursor: pointer;
|
|
}
|
|
|
|
nav a .no-style {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.navbar-search {
|
|
margin-top: 0px;
|
|
width: auto;
|
|
float: none;
|
|
overflow: hidden;
|
|
border-right: 1px solid #dadada;
|
|
height: 40px;
|
|
}
|
|
|
|
#search_query {
|
|
width: 100%;
|
|
font-size: 18px;
|
|
height: 40px;
|
|
padding: 0px;
|
|
color: #222;
|
|
box-shadow: inset 2px 0px 0px 0px #afbfca;
|
|
padding-left: 35px;
|
|
padding-right: 20px;
|
|
background: rgb(255,255,255); /* Old browsers */
|
|
border: none;
|
|
border-radius: 0px;
|
|
font-family: 'Humbug';
|
|
font-weight: 300;
|
|
line-height: 27px;
|
|
}
|
|
|
|
|
|
#search_query:focus {
|
|
box-shadow: inset 0px 0px 0px 2px #afbfca;
|
|
}
|
|
|
|
#searchbox .search_button,
|
|
#searchbox .search_button[disabled]:hover {
|
|
position: absolute;
|
|
right: 2px;
|
|
top: 6px;
|
|
background: none;
|
|
border-radius: 0px;
|
|
border: none;
|
|
height: 30px;
|
|
text-align: center;
|
|
padding: 4px;
|
|
color: #ccc;
|
|
font-size: 18px;
|
|
box-shadow: none;
|
|
-webkit-box-shadow: none;
|
|
-moz-box-shadow: none;
|
|
text-shadow: none;
|
|
z-index: 5;
|
|
}
|
|
|
|
#searchbox .search_button:hover {
|
|
color: #000;
|
|
}
|
|
|
|
#searchbox .search_button[disabled] {
|
|
visibility: hidden;
|
|
}
|
|
|
|
#searchbox a.search_icon {
|
|
color: #ccc;
|
|
text-decoration: none;
|
|
}
|
|
|
|
#searchbox a.search_icon:hover {
|
|
color: #000;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.highlight {
|
|
background-color: #FCEA81;
|
|
}
|
|
|
|
.highlight_text_inserted {
|
|
background-color: #E6EDFF;
|
|
}
|
|
|
|
.highlight_text_deleted {
|
|
background-color: #FFE6E6;
|
|
}
|
|
|
|
.highlight_text_replaced {
|
|
background-color: #F5E6FF;
|
|
}
|
|
|
|
#search_arrows {
|
|
margin-bottom: 5px;
|
|
|
|
/* Bootstrap wants font-size: 0 to eliminate space between
|
|
the buttons. We need to inherit the font size, so we
|
|
remove the button gap by adjusting "letter" spacing. */
|
|
font-size: 90%;
|
|
letter-spacing: -.3em;
|
|
}
|
|
|
|
#search_arrows input {
|
|
/* Chrome and Firefox do this already via default browser stylesheet;
|
|
but Opera needs this to avoid smushed letters in the search box. */
|
|
letter-spacing: normal;
|
|
}
|
|
|
|
div.floating_recipient {
|
|
border-collapse: separate;
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
#floating_recipient_bar {
|
|
top: 50px;
|
|
}
|
|
|
|
.message-header-contents {
|
|
background: #e2e2e2;
|
|
}
|
|
|
|
.recipient_row.sticky {
|
|
margin-top: 22px;
|
|
}
|
|
|
|
.sticky .message_header {
|
|
position: fixed;
|
|
z-index: 99;
|
|
top: 50px;
|
|
width: 100%;
|
|
left: 0px;
|
|
}
|
|
|
|
.sticky .message-header-wrapper {
|
|
max-width: 1400px;
|
|
margin: auto;
|
|
}
|
|
|
|
.sticky .message-header-contents {
|
|
margin-left: 250px;
|
|
margin-right: 251px;
|
|
}
|
|
|
|
#bottom_whitespace {
|
|
display: block;
|
|
height: 300px;
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-khtml-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.loading_indicator_spinner {
|
|
/* If you change these, make sure to adjust the constants in
|
|
loading.make_indicator as well */
|
|
height: 38px;
|
|
width: 38px;
|
|
float: left;
|
|
}
|
|
|
|
.loading_indicator_text {
|
|
/* If you change these, make sure to adjust the constants in
|
|
loading.make_indicator as well */
|
|
margin-left: 5px;
|
|
font-size: 1.2em;
|
|
font-weight: 300;
|
|
line-height: 38px;
|
|
}
|
|
|
|
.settings-section #admin_page_users_loading_indicator,
|
|
.settings-section #admin_page_deactivated_users_loading_indicator,
|
|
.settings-section #admin_page_bots_loading_indicator,
|
|
.settings-section #admin_page_streams_loading_indicator {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.settings-section .loading_indicator_text {
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
vertical-align: middle;
|
|
line-height: 20px;
|
|
display: inline-block;
|
|
float: none;
|
|
margin-top: 9px;
|
|
}
|
|
|
|
.settings-section .loading_indicator_spinner {
|
|
width: 20%;
|
|
height: 20px;
|
|
margin-top: 7px;
|
|
vertical-align: middle;
|
|
display: inline-block;
|
|
}
|
|
|
|
.settings-section #default_language {
|
|
text-decoration: none;
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
.settings-section #default_language_modal table {
|
|
width: 90%;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.settings-section #default_language_modal td {
|
|
padding-left: 80px;
|
|
}
|
|
|
|
.settings-section .inline {
|
|
display: inline !important;
|
|
}
|
|
|
|
.twitter-image,
|
|
.message_inline_image {
|
|
margin-bottom: 5px;
|
|
margin-left: 5px;
|
|
height: 100px;
|
|
display: block !important;
|
|
border: none !important;
|
|
}
|
|
|
|
.message_inline_ref {
|
|
margin-bottom: 5px;
|
|
margin-left: 5px;
|
|
height: 50px;
|
|
display: block !important;
|
|
border: none !important;
|
|
}
|
|
|
|
.twitter-image img,
|
|
.message_inline_image img,
|
|
.message_inline_ref img {
|
|
height: auto;
|
|
max-height: 100%;
|
|
float: left;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.message_inline_image_title {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.katex-html {
|
|
line-height: initial;
|
|
white-space: initial;
|
|
}
|
|
|
|
.tex-error {
|
|
color: red;
|
|
}
|
|
|
|
.hotkeys_table {
|
|
width: 245px;
|
|
margin-right: 10px;
|
|
font-size: 90%;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.hotkeys_table th {
|
|
width: 245px;
|
|
}
|
|
|
|
.hotkeys_table .hotkey {
|
|
font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
|
|
text-align: right;
|
|
font-weight: bold;
|
|
font-size: 90%;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.operator_value {
|
|
font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
|
|
color: maroon;
|
|
}
|
|
.operator {
|
|
font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
|
|
}
|
|
|
|
#loading_more_messages_indicator {
|
|
margin: 10px;
|
|
}
|
|
|
|
#loading_more_messages_indicator_box_container {
|
|
position: absolute;
|
|
left: 50%;
|
|
}
|
|
|
|
#loading_more_messages_indicator_box {
|
|
position: relative;
|
|
left: -50%;
|
|
top: -40px;
|
|
z-index: 1;
|
|
-webkit-border-radius: 6px;
|
|
-moz-border-radius: 6px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
#page_loading_indicator {
|
|
margin: 10px auto;
|
|
}
|
|
|
|
#page_loading_indicator_box_container {
|
|
position: absolute;
|
|
left: 50%;
|
|
}
|
|
|
|
#page_loading_indicator_box {
|
|
position: relative;
|
|
left: -50%;
|
|
top: -40px;
|
|
z-index: 1;
|
|
-webkit-border-radius: 6px;
|
|
-moz-border-radius: 6px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.table-striped thead th {
|
|
background-color: #444;
|
|
color: white;
|
|
}
|
|
|
|
.help-table {
|
|
table-layout: fixed;
|
|
}
|
|
|
|
.conversation-partners {
|
|
display: inline-block;
|
|
line-height: 1.2;
|
|
width: 90%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#user-checkboxes {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
#user-checkboxes .checkbox {
|
|
display: block;
|
|
}
|
|
|
|
#user-checkboxes .checkbox input[type=checkbox] {
|
|
margin: 5px 0px;
|
|
float: none;
|
|
}
|
|
|
|
#stream-checkboxes {
|
|
margin-top: 10px;
|
|
display: none;
|
|
}
|
|
|
|
#stream-checkboxes .checkbox {
|
|
display: block;
|
|
}
|
|
|
|
#stream-checkboxes .checkbox input[type=checkbox] {
|
|
margin: 5px 0px;
|
|
float: none;
|
|
}
|
|
|
|
#copy-from-stream-expand-collapse {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.stream_sub_unsub_button {
|
|
min-width: 140px;
|
|
margin-top: 9px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.sub_button_row {
|
|
text-align: center;
|
|
}
|
|
|
|
button.primary {
|
|
background-color: #89a0b3;
|
|
padding: 2px;
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 0px;
|
|
}
|
|
|
|
button.primary:hover {
|
|
background-color: #91aabe;
|
|
}
|
|
|
|
button.primary:focus {
|
|
outline: none;
|
|
}
|
|
|
|
button.topic_edit_save,
|
|
button.topic_edit_cancel {
|
|
font-size: 12px;
|
|
width: 18px;
|
|
height: 18px;
|
|
margin-top: -1px;
|
|
}
|
|
|
|
.modal {
|
|
overflow: hidden;
|
|
margin-top: 0;
|
|
top: 5%;
|
|
/* Bootstrap uses tabindex=-1 on modals for focus and ESC handling,
|
|
so avoid the outline it causes */
|
|
outline: 0;
|
|
}
|
|
|
|
.modal-body {
|
|
max-height: 60vh;
|
|
}
|
|
|
|
.modal form {
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
#invite-user {
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
#invite-user .modal-header {
|
|
padding: 7px 15px;
|
|
border-color: #ddd;
|
|
}
|
|
|
|
#invite-user .modal-header .exit {
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
background-color: transparent;
|
|
border: none;
|
|
position: absolute;
|
|
top: 6px;
|
|
right: 5px;
|
|
color: #aaa;
|
|
}
|
|
|
|
#invitee_emails {
|
|
min-height: 40px;
|
|
max-height: 300px;
|
|
}
|
|
|
|
#invite-user .custom_invite_body {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
#invite-user .overlay-content {
|
|
position: relative;
|
|
width: 500px;
|
|
background-color: #fff;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
#invite-user .modal-body {
|
|
margin-bottom: 58px;
|
|
}
|
|
|
|
#invite-user .modal-footer {
|
|
position: absolute;
|
|
bottom: 0px;
|
|
width: calc(100% - 30px);
|
|
}
|
|
|
|
#invite_status {
|
|
display: none;
|
|
}
|
|
|
|
#invite-user #invite-user-label {
|
|
font-size: 1em;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.settings-dropdown-caret {
|
|
margin-left: 8px;
|
|
margin-right: 8px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
#notifications-area {
|
|
position: fixed;
|
|
z-index: 10;
|
|
bottom: 0px;
|
|
right: 20px;
|
|
width: 200px;
|
|
height: auto;
|
|
}
|
|
|
|
.notifications-gravatar img {
|
|
max-width: 25px;
|
|
max-height: 25px;
|
|
padding-left: 4px;
|
|
padding-top: 4px;
|
|
}
|
|
|
|
.empty_feed_notice {
|
|
padding: 3em 4em;
|
|
display: none;
|
|
}
|
|
|
|
.empty_feed_notice h4 {
|
|
text-align: center;
|
|
}
|
|
|
|
.notification {
|
|
cursor: pointer;
|
|
}
|
|
|
|
#empty_narrow_private_message p,
|
|
#empty_narrow_message p {
|
|
text-align: center;
|
|
}
|
|
|
|
.message-fade,
|
|
.user_sidebar_entry.user-fade {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.emoji {
|
|
height: 25px;
|
|
width: 25px;
|
|
position: relative;
|
|
top: 3px;
|
|
margin-top: -7px;
|
|
}
|
|
|
|
div.emoji {
|
|
/* This is needed when using the sprite sheets */
|
|
top: 6px;
|
|
}
|
|
|
|
img.emoji {
|
|
/* This is the right offset for <img> style emoji */
|
|
top: 3px;
|
|
}
|
|
|
|
.emoji.realm-emoji {
|
|
background-size: contain;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.twitter-tweet {
|
|
border: 1px solid #ddd;
|
|
padding: .5em .75em;
|
|
margin-bottom: 0.25em;
|
|
}
|
|
|
|
.twitter-avatar {
|
|
float: left;
|
|
width: 48px;
|
|
height: 48px;
|
|
margin-right: .75em;
|
|
}
|
|
|
|
.star {
|
|
display: inline-block;
|
|
font-size: 14px;
|
|
color: #2c8211;
|
|
}
|
|
|
|
.star:not(.empty-star) {
|
|
opacity: 1 !important;
|
|
pointer-events: all !important;
|
|
}
|
|
|
|
.empty-star {
|
|
color: #bbb;
|
|
}
|
|
|
|
.empty-star:hover {
|
|
cursor: pointer;
|
|
color: #565656;
|
|
}
|
|
|
|
.star:hover {
|
|
cursor: pointer;
|
|
color: #0d7245;
|
|
}
|
|
|
|
/* FIXME: Combine this rule with the one in portico.css somehow? */
|
|
#pw_strength {
|
|
width: 220px;
|
|
height: 25px;
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
/* Override padding-top on form labels when they label only text */
|
|
.form-horizontal .label_for_text {
|
|
padding-top: 0;
|
|
}
|
|
|
|
#pw_change_controls {
|
|
display: none;
|
|
}
|
|
|
|
.sub-unsub-message,
|
|
.date_row {
|
|
text-align: center;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.date_row .date-direction {
|
|
display: inline-block;
|
|
padding-right: 5px;
|
|
}
|
|
|
|
.date_row .date-line {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
width: 33%;
|
|
border-top: 1px solid #e2e2e2;
|
|
border-bottom: 1px solid #fff;
|
|
margin: 0px 5px 0px 5px;
|
|
}
|
|
|
|
.date_row span {
|
|
display: block;
|
|
background: inherit;
|
|
padding: 4px;
|
|
overflow: hidden;
|
|
text-transform: uppercase;
|
|
font-size: 0.8em;
|
|
color: #bbb;
|
|
text-shadow: 1px 1px 0px #fff;
|
|
}
|
|
|
|
.date_row span:before,
|
|
.date_row span:after {
|
|
display: inline-block;
|
|
position: relative;
|
|
content: " ";
|
|
vertical-align: middle;
|
|
width: 50%;
|
|
height: 0px;
|
|
border-top: 1px solid #e2e2e2;
|
|
border-bottom: 1px solid #fff;
|
|
}
|
|
|
|
.date_row span:before {
|
|
right: 0.5em;
|
|
margin-left: -50%;
|
|
}
|
|
|
|
.date_row span:after {
|
|
left: 0.5em;
|
|
margin-right: -50%;
|
|
}
|
|
|
|
.include-sender .message_edit {
|
|
margin-top: -14px;
|
|
}
|
|
|
|
.message_edit {
|
|
display: none;
|
|
margin-top: 5px;
|
|
margin-left: 47px;
|
|
}
|
|
|
|
/* Reduce some of the heavy padding from Bootstrap. */
|
|
#message_edit_form {
|
|
margin-bottom: 10px;
|
|
}
|
|
#message_edit_form .edit-controls {
|
|
margin-left: 0px;
|
|
margin-top: 0px;
|
|
}
|
|
#message_edit_form textarea {
|
|
width: 100%;
|
|
min-width: 206px;
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
#message_edit_form .control-group.no-margin {
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
#message_edit_form a.message-control-button {
|
|
display: inline;
|
|
color: #777;
|
|
text-decoration: none;
|
|
font-size: 12px;
|
|
width: 12px;
|
|
height: 14px;
|
|
text-align: center;
|
|
float: right;
|
|
padding-left: 5px;
|
|
padding-top: 3px;
|
|
}
|
|
|
|
#message_edit_form .action-buttons {
|
|
margin: 10px 0px;
|
|
}
|
|
|
|
#topic_edit_form {
|
|
display: inline-block;
|
|
margin: 0 0 0 0;
|
|
height: 22px;
|
|
background: #e2e2e2;
|
|
padding-left: 20px;
|
|
padding-right: 3px;
|
|
line-height: 22px;
|
|
margin-left: -15px;
|
|
}
|
|
|
|
.message_body_gravatar {
|
|
width: 20px;
|
|
height: 20px;
|
|
margin: 2px 2px 2px 0px;
|
|
vertical-align: text-bottom;
|
|
}
|
|
|
|
.user-mention {
|
|
background-color: #eee;
|
|
border-radius: 3px;
|
|
padding: 0 0.2em;
|
|
box-shadow: 0px 0px 0px 1px #ccc;
|
|
margin-right: 2px;
|
|
white-space: nowrap;
|
|
background-image: -moz-linear-gradient(top, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
|
|
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.1)), color-stop(100%,rgba(0,0,0,0)));
|
|
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 100%);
|
|
background-image: -o-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 100%);
|
|
background-image: -ms-linear-gradient(top, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 100%);
|
|
background-image: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 100%);
|
|
display: inline-block;
|
|
margin-bottom: 1px;
|
|
}
|
|
|
|
.user-mention-me {
|
|
background-color: #c9fcc1;
|
|
}
|
|
|
|
.alert-word {
|
|
background-color: #c9fcc1;
|
|
}
|
|
|
|
#organization h1,
|
|
#settings h1 {
|
|
font-size: 25px;
|
|
font-weight: 300;
|
|
}
|
|
|
|
#organization .organization-icon,
|
|
#settings .settings-icon {
|
|
margin-right: 10px;
|
|
font-size: 20px;
|
|
}
|
|
|
|
#home {
|
|
margin-top: 41px;
|
|
}
|
|
|
|
.message-pane {
|
|
padding-left: 0.3em;
|
|
}
|
|
|
|
.screen {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
background: #000;
|
|
z-index: 20000;
|
|
}
|
|
|
|
#tutorial-stream {
|
|
width: 250px;
|
|
}
|
|
|
|
#tutorial-subject {
|
|
width: 250px;
|
|
}
|
|
|
|
.tutorial-done-button {
|
|
text-align: right;
|
|
margin-top: 9px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.btn-skip {
|
|
position: relative;
|
|
left: -10px;
|
|
margin-right: 25px;
|
|
}
|
|
|
|
.deactivated_user .user_name,
|
|
.deactivated_user .email {
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
/* embed */
|
|
.message_content .message_embed {
|
|
display: block;
|
|
position: relative;
|
|
margin: 5px 0px;
|
|
border: none;
|
|
border-left: 3px solid #eee;
|
|
height: 70px;
|
|
padding: 5px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.message_content .message_embed > * {
|
|
display: inherit;
|
|
padding: 5px;
|
|
border: none;
|
|
}
|
|
|
|
.message_embed .message_embed_title {
|
|
padding-top: 0px;
|
|
/* to remove the spacing that the font has from the top of the container. */
|
|
margin-top: -1px;
|
|
|
|
font-size: 1em;
|
|
font-weight: 600;
|
|
line-height: normal;
|
|
}
|
|
|
|
.message_embed .message_embed_description {
|
|
position: relative;
|
|
margin-top: -5px;
|
|
max-width: 500px;
|
|
|
|
/* to put it below the container gradient. */
|
|
z-index: -1;
|
|
}
|
|
|
|
.message_embed .message_embed_image {
|
|
display: inline-block;
|
|
width: 60px;
|
|
height: 60px;
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
|
|
.message_embed .data-container {
|
|
padding: 0px 5px;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
max-width: calc(100% - 115px);
|
|
max-height: 70px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.message_embed .data-container div {
|
|
display: block;
|
|
border: none;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.message_content .message_embed {
|
|
height: auto;
|
|
}
|
|
|
|
.message_embed .message_embed_image {
|
|
width: 100%;
|
|
height: 100px;
|
|
}
|
|
|
|
.message_embed .data-container {
|
|
display: block;
|
|
max-width: 100%;
|
|
margin-top: 10px;
|
|
}
|
|
}
|