You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
RnQ/Distro/Template/chat.css

1568 lines
29 KiB
CSS

@const mainFontSize: 14dip;
@const tabStrokeColor: #a0a0a0;
@const textColorMain: #333;
@const textColorAlt: #666;
@const textColorMy: #844103;
@const chatTabsColorActive: var(chatTabsColorActive, #fbfbfb);
@const chatTabsColorActiveHover: var(chatTabsColorActiveHover, #f6f6f6);
@set v-scroll-indicator < base-scroll-indicator {
.slider {
margin: 1dip;
}
}
html {
background-color: @chatBkgColor;
}
body {
prototype: FileDropZone;
flow: vertical;
padding: 0;
margin: 0;
line-height: normal;
overflow: hidden;
text-selection: @textColorMain #dedede;
position: relative;
}
@keyframes loading {
0% {
color: #283593;
text-shadow: 0px 0px 0px rgba(119,129,188,0);
}
100% {
color: #7781BC;
text-shadow: 0px 0px 4px rgba(119,129,188,0.2);
}
}
a, a:visited, #videotime {
color: #283593;
fill: #283593 !important;
stroke: #283593 !important;
text-decoration: none;
animation: none;
}
a.checking {
animation: 0.5s infinite alternate loading;
}
a.uinLink, a.uinLink:visited {
color: #06091E;
}
a:hover, a:focus, #videotime:hover {
color: #5c6bc0;
fill: #5c6bc0 !important;
stroke: #5c6bc0 !important;
}
div {
padding: 0;
margin: 0;
min-height: 0;
min-width: 0;
}
div.codeDiv {
position: relative;
width: calc(100vw - 41dip);
margin-top: 4dip;
}
span.bold {
font-weight: 500;
}
span.underlined {
text-decoration: underline;
}
.codeCopyAll {
width: 16px;
height: 16px;
background: url(resource:source_code) 0 0 no-repeat;
display: inline-block;
position: absolute;
right: 5dip;
top: 3dip;
cursor: pointer;
}
.codeLang {
position: absolute;
right: 2dip;
top: 15dip;
font-size: 40dip;
font-weight: bold;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.08);
z-index: -1;
white-space: nowrap;
}
.smileyDiv {
white-space: nowrap;
//color: transparent;
font-size: 0;
overflow: hidden;
display: none;
vertical-align: middle;
background-repeat: no-repeat;
background-position: 0 0;
}
.smileySpan {
display: none;
width: max-content;
}
#pages.smileAsText .smileySpan {
display: inline-block;
}
#pages.smileAsImg .smileyDiv {
display: inline-block;
}
.history {
padding: 0;
padding-top: 6dip;
margin: 0;
opacity: 1;
height: max-content;
}
.history.hidden {
opacity: 0;
height: 0;
}
.history.removed {
display: none !important;
}
body.msgPreview .history {
display: none !important;
}
.history .curtime {
font-family: 'Verdana';
font-size: 13dip;
text-align: center;
}
.serverHist {
position: absolute;
top: 7dip;
right: 29dip;
width: 16dip;
height: 16dip;
cursor: pointer;
opacity: 0;
display: none;
background: url(resource:server_hist) 0 0 no-repeat;
transform: translate(0, -10dip);
z-index: 9999;
}
.serverHist.visible {
transition: opacity 0.3s cubic-in-out, transform 0.3s cubic-in-out;
transform: translate(0, 0);
display: block;
opacity: 0.43;
}
.serverHist.visible.inactive {
opacity: 0.23;
}
#pages {
size: *;
flow: stack;
margin-top: 28dip;
image-rendering: auto;
scroll-manner: scroll-manner(animation: true, wheel-step: 10%);
}
body.msgPreview #pages {
margin-top: 0 !important;
}
.page {
visibility: hidden;
size: *;
}
.page:current {
visibility: visible;
}
.page[plugin="true"] {
margin: 5dip;
}
.chatBackground {
size: *;
position: relative;
border-bottom: 1dip solid @frameBorderColor;
overflow: hidden;
}
body.msgPreview .chatBackground {
border-bottom: none !important;
}
.chatHist {
prototype: HistScroller;
size: *;
background-repeat: no-repeat;
position: relative;
overflow-x: hidden;
overflow-y: auto;
}
body.msgPreview .chatHist {
overflow-y: scroll-indicator;
vertical-scrollbar: "v-scroll-indicator";
}
body.msgPreview .chatHist,
body.msgPreview .chatBackground {
background-image: none !important;
}
.chat {
height: auto;
white-space: normal;
word-wrap: normal;
padding: 0;
}
body:not(.msgPreview) .chat > div.msgFull:first-child {
padding-top: 4dip;
}
body:not(.msgPreview) .chat > div.msgFull:last-child {
padding-bottom: 4dip;
}
.indicator {
font-family: 'Verdana';
font-size: 13dip;
color: @textColorAlt;
white-space: nowrap;
position: absolute;
bottom: 0;
left: 0;
margin-left: *;
margin-right: *;
transition: background-color 0.5s quint-out, bottom 0.3s quint-out, opacity 0.3s quint-out;
opacity: 1;
background-color: rgba(246, 246, 246, 0.7);
padding: 5dip 10dip;
border-top-left-radius: 3dip;
border-top-right-radius: 3dip;
border: 1dip solid @frameBorderColor;
border-bottom-width: 0;
cursor: pointer;
z-index: 10001;
}
.indicator:hover {
background-color: rgba(255, 255, 255, 0.9);
}
.indicator.hidden {
opacity: 0;
bottom: -10dip;
}
.loading {
display: none;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 10000;
}
.loading.visible {
display: block;
}
a[kind="youtube"],
a[kind="vimeo"],
a[kind="other"] {
display: inline-block;
vertical-align: middle;
}
a[kind="youtube"],
a[kind="vimeo"] {
size: 20px;
}
a[kind="other"] {
height: 14px;
width: 16px;
}
a[kind="other"]:hover .infoimg {
filter: brightness(10%);
}
.infoimg {
display: inline-block;
vertical-align: middle;
background: url(resource:info) 50% 50% no-repeat;
background-size: contain;
size: 14dip;
margin-left: 3dip;
}
.youtubeimg {
background: url(resource:youtube) 50% 50% no-repeat;
size: *;
margin-left: 5dip;
margin-top: 1dip;
}
.vimeoimg {
background: url(resource:vimeo) 50% 50% no-repeat;
size: *;
margin-left: 5dip;
}
.youtubeimg:hover,
.vimeoimg:hover {
filter: brightness(10%);
}
#videoview {
text-align: center;
vertical-align: middle;
display: none;
flow: stack;
font-family: @baseFontEmoji;
font-size: @mainFontSize;
color: @textColorMain;
background-color: rgba(246, 246, 246, 0.9);
backdrop-filter: blur(8dip);
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 10001;
opacity: 0;
transition: opacity 0.2s quint-out, display 0.2s linear;
}
#videoview.visible {
display: block;
opacity: 1;
}
#videoformats {
flow: horizontal;
border-spacing: 5dip;
margin: 0 *;
margin-top: 10dip;
text-align: center;
width: max-content;
}
#videoformats div {
border: 1dip solid #ddd;
padding: 2dip 10dip 4dip 10dip;
vertical-align: middle;
text-align: center;
border-spacing: 5dip;
background-color: @chatBkgColor;
line-height: 19px;
width: max-content;
height: max-content;
}
#videoformats div:hover {
color: #999;
cursor: pointer;
}
#videoplayer {
size: *;
margin: 20dip;
margin-bottom: 5dip;
flow: vertical;
}
#video {
size: *;
image-rendering: auto;
}
#videoload {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
white-space: nowrap;
text-align: center;
}
#videoload a[close] {
display: inline-block;
margin-left: *;
margin-right: *;
margin-top: 10dip;
}
#playerdisplay {
size: *;
text-align: center;
vertical-align: middle;
position: relative;
}
#playercontrols {
width: *;
height: 30dip;
margin-top: 10dip;
position: relative;
}
#controls {
position: absolute;
display: none;
bottom: 5dip;
margin-left: *;
margin-right: *;
flow: horizontal;
vertical-align: middle;
min-width: 300dip;
transition: opacity 0.3s quint-out, display 0.3s linear;
opacity: 0;
}
#controls.visible {
display: block;
opacity: 1;
}
#videopos {
width: 2* !important;
}
#videovol {
width: 1* !important;
max-width: 120dip;
}
#videotime {
line-height: 14px;
margin: 0 15dip;
cursor: pointer;
}
#videoinfo {
popup-position: top-center bottom-center;
margin-top: 14dip;
margin-left: 15dip;
padding: 8dip 10dip;
color: @textColorMain;
}
#play, #pause {
position: absolute;
display: none;
top: 50%;
left: 50%;
white-space: nowrap;
background: #000;
fill: #fff;
stroke: none;
size: 100dip;
border-radius: 50dip;
opacity: 0.6;
z-index: 10002;
transform: scale(1.0) translate(-50dip, -50dip);
transform-origin: left top;
}
#upload,
#close,
#info {
size: max-content;
}
#upload > svg,
#close > svg,
#info > svg {
background: transparent;
display: block;
size: 24dip;
fill: #ddd;
stroke: none;
margin-left: 10dip;
}
#upload > svg {
size: 20dip;
margin-top: 1dip;
}
#info > svg {
size: 20dip;
}
#upload:hover,
#upload:focus,
#close:hover,
#close:focus,
#info:hover,
#info:focus {
cursor: pointer;
}
#upload:hover > svg,
#upload:focus > svg,
#close:hover > svg,
#close:focus > svg,
#info:hover > svg,
#info:focus > svg {
fill: #bbb;
}
b, strong {
font-weight: 500;
}
div.hr {
margin-top: 5dip;
height: 1dip;
background-color: rgba(0, 0, 0, 0.1);
}
.msgFull {
padding: 2dip 8dip;
margin: 0;
border-bottom: solid 3dip transparent;
border-top: solid 3dip transparent;
font-family: @baseFontEmoji;
font-size: @mainFontSize;
color: @textColorMain;
}
//.msgFull.hidden > * {
// display: none !important;
//}
.msgFull.selected {
background-color: rgba(0, 0, 0, 0.1) !important;
}
.msgFull.lastevent::marker {
border-top: 1dip dotted rgba(169, 64, 67, 0.5);
width: *;
height: 1dip;
padding: 0;
margin: -3dip 8dip 0 8dip;
z-index: -1;
}
.msgPreview .msgFull {
padding: 3dip 8dip;
border-bottom-color: transparent;
border-top-color: transparent;
}
.msgTitle {
cursor: pointer;
white-space: nowrap;
overflow: hidden;
flow: horizontal;
width: max-content;
vertical-align: middle;
}
.msgTitle:hover {
prototype: TitleHover;
}
.msgTitle > * {
size: max-content;
}
:not(.my) > .msgTitle > div {
color: @textColorMy;
}
.msgTitle div.msgEventImg, .msgTitle div.msgCryptImg, .msgTitle div.msgReactBtn {
min-width: 16dip;
min-height: 16dip;
width: auto;
height: auto;
background-position: 0 0;
background-repeat: no-repeat;
}
.msgTitle div.msgCryptImg {
margin-left: 1dip;
}
.msgTitle .msgMulti {
margin-left: 10dip;
font-size: 11dip;
}
.msgTitle .msgMulti.updated {
display: inline-block;
}
.msgTitle .msgMulti.updated:hover {
color: #5c6bc0;
}
.msgTitle .msgWhat {
margin-left: 10dip;
font-size: 15dip;
margin-bottom: 3dip;
}
.msgTitle .msgStatusImages > div {
display: inline-block;
padding: 0;
margin: 0;
}
.msgTitle .msgStatusImages .msgStatusImg {
margin-left: 10dip;
}
.msgTitle .msgStatusImages .msgStatusExtImg {
margin-left: 5dip;
}
.msgTitle .msgDate {
margin-left: 10dip;
font-size: 11dip;
margin-bottom: -3dip;
}
.msgTitle .msgReactBtn {
margin-left: 7dip;
margin-right: 10dip;
opacity: 0.7;
transition: opacity 0.2s cubic-out;
cursor: pointer;
filter: grayscale(100%) brightness(33%);
}
.msgTitle .msgReactBtn:hover {
opacity: 1.0;
filter: none;
}
.msgTitle .msgReactBtn.hidden {
opacity: 0;
transition: opacity 0.3s quint-out;
}
.msgBody {
behavior: selectable;
width: max-content;
max-width: calc(100vw - 41dip);
white-space: pre-wrap;
word-wrap: break-word;
}
//.msgBody text {
// width: max-content;
// height: max-content;
// overflow: hidden;
//}
.msgBody .linkedImgWrapper {
position: relative;
margin: 0;
padding: 0;
}
.msgBody .linkedImgWrapper.hidden {
display: inline-block;
float: all;
clear: none;
overflow: hidden;
font-size: 0;
line-height: 0;
size: 0;
}
.msgBody .linkedImg {
foreground-image-cursor: pointer;
foreground-size: contain;
foreground-position: 0 0;
background-image: none;
max-width: 100%;
height: auto;
vertical-align: top;
margin: 5dip 0;
opacity: 0;
transition: opacity 0.3s quint-out;
}
.msgBody lottie.linkedImg {
foreground-image-cursor: default !important;
}
.msgBody .linkedImg[cached] {
transition: none !important;
opacity: 1;
}
.msgBody .msgEmbeddedImages {
width: auto;
height: auto;
margin: 0;
padding: 0;
margin-top: 5dip;
}
.msgBody .embeddedImg {
foreground-image-cursor: pointer;
foreground-size: contain;
foreground-position: 0 0;
background-image: none;
max-width: 100%;
vertical-align: top;
opacity: 1;
}
.msgBody .linkedImg.loaded,
.msgBody .embeddedImg.loaded {
opacity: 1 !important;
prototype: LoadedImage;
}
.searchHere {
font-size: @mainFontSize;
text-align: center;
vertical-align: middle;
flow: vertical;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.searchHere.hidden {
display: none;
}
.imgoverlay {
background-color: rgba(0, 0, 0, 0.85);
opacity: 0;
horizontal-align: center;
vertical-align: middle;
position: absolute;
transition: opacity 0.2s cubic-out;
}
.imgoverlay.active {
opacity: 1;
}
.imgoverlay img {
foreground-size: contain;
max-width: max-content;
max-height: max-content;
size: *;
margin: 30dip;
display: none;
transform: translate(0, 20dip);
transition: opacity 0.2s cubic-out, transform 0.3s cubic-out;
}
.imgoverlay img.visible {
display: block;
transform: translate(0, 0);
}
.snaplayer {
background-color: rgba(127, 127, 127, 0.01);
position: absolute;
cursor: crosshair;
}
#monIndicator {
flow: vertical;
position: absolute;
size: 256dip;
display: none;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 1dip;
margin: 0;
padding: 0;
}
#monIndicator > * {
color: white;
size: max-content;
line-height: 80%;
margin: *;
font-family: @baseFontEmoji;
font-size: 210dip;
font-weight: bold;
font-rendering-mode: sub-pixel;
text-align: center;
vertical-align: middle;
}
#tabs, #backTabs {
flow: horizontal;
padding-top: 3dip;
margin: 0;
height: 25dip;
background-color: transparent;
vertical-align: top;
position: absolute;
top: 0;
left: 0;
right: -1dip;
z-index: 9000;
overflow-x: hidden-scroll;
}
@media old-windows {
#tabs, #backTabs {
height: 26dip;
padding-top: 0;
top: -1dip;
}
}
body.msgPreview #tabs,
body.msgPreview #backTabs {
display: none !important;
}
//#tabs::marker {
// background-image: url(icon:right);
// background-repeat: no-repeat;
// background-size: 100% 100%;
// fill: red;
// stroke: green;
// height: *;
// width: 7dip;
// margin: 5dip 2dip 2dip *;
// z-index: 1;
//}
#backTabs {
border-bottom: 1dip solid @frameBorderColor;
background-color: window;
z-index: 8000;
overflow-y: hidden;
}
#backTabs > .tab {
z-index: 0 !important;
}
//.tab {
// flow: horizontal;
// fill: #fbfbfb;
// color: #0C0C0C;
// height: *;
// width: auto;
// max-width: 250dip;
// margin: 0 -13dip;
// border: none;
// background-image: url(path:E M0,-0 C1,-1,2,-0,4,-3.5 L10.5,3.75 C13,0,15,1,18,1 L-18,1 C-15,1,-13,0,-10.5,3.75 L-4,-3.5 C-2,-0,-1,-1,-0,-0);
// background-repeat: no-repeat;
// background-size: 100% 100%;
// stroke: rgba(160, 160, 160, 0.43);
// stroke-width: 1dip;
// stroke-linecap: round;
// stroke-linejoin: round;
// white-space: nowrap;
// padding: 0 10dip;
// position: relative;
// //transform: translate(0.5dip, 0.5dip); // fix blurred background
// transition: stroke 0.2s cubic-out, fill 0.2s cubic-out;
// opacity: 1;
// overflow: hidden;
//}
.tab {
flow: horizontal;
background-color: rgba(246, 246, 246, 0.25);
color: #0C0C0C;
height: *;
width: auto;
max-width: 250dip;
margin: 0 -1dip;
border: 1dip solid rgba(171, 173, 179, 0.5);
border-bottom: none;
white-space: nowrap;
padding: 0 5dip;
position: relative;
transition: background-color 0.2s cubic-out, border-color 0.2s cubic-out;
opacity: 1;
overflow: hidden;
}
.tab:first-child {
margin-left: 0;
}
.tab:not(.capture):first-child {
border-left: none;
}
.tab:last-child {
margin-right: 0;
}
.tab.capture {
position: absolute;
pointer-events: none;
z-index: 10001;
}
//.tab > * {
// transform: translate(-0.5dip, -0.5dip); // revert for all children
//}
.tab:hover {
background-color: rgba(246, 246, 246, 0.75);
border-color: rgba(171, 173, 179, 0.75);
transition: background-color 0.3s cubic-out, border-color 0.3s cubic-out;
// transition: stroke 0.3s cubic-out, fill 0.3s cubic-out;
// fill: #f6f6f6;
// stroke: rgba(160, 160, 160, 0.85);
}
.tab:checked {
background-color: @chatBkgColor !important;
border-color: @frameBorderColor !important;
transition: background-color 0.3s cubic-out, border-color 0.3s cubic-out;
// transition: stroke 0.3s cubic-out, fill 0.3s cubic-out;
z-index: 10000;
// fill: @chatBkgColor !important;
// stroke: @tabStrokeColor;
}
@media ui-accented-window-decoration or old-windows {
.tab {
background-color: rgba(246, 246, 246, 0.85);
border-color: rgba(171, 173, 179, 0.85);
}
.tab:hover {
background-color: rgba(246, 246, 246, 0.95);
border-color: rgba(171, 173, 179, 0.95);
}
}
//.tab.closed {
// transition: opacity 0.3s cubic-out, width 0.3s cubic-out !important;
// width: 20dip !important;
// opacity: 0 !important;
//}
.tab .tab-icon {
foreground-size: contain;
foreground-position: 0 0;
vertical-align: middle;
size: max-content;
max-width: 16dip;
max-height: 16dip;
overflow-x: hidden;
}
.tab .tab-icon-add {
foreground-size: contain;
foreground-position: 0 0;
size: max-content;
max-width: 16dip;
max-height: 16dip;
overflow-x: hidden;
position: absolute;
display: block;
right: -4dip;
bottom: -3dip;
}
.tab .tab-icon-group {
size: 16dip;
margin: 1dip 5dip 0 5dip;
position: relative;
vertical-align: middle;
}
.tab .tab-icon-group.hidden,
.tab .tab-icon.hidden,
.tab .tab-icon-add.hidden {
width: 0;
overflow: hidden;
margin-right: 0;
}
.tab .tab-text {
width: auto;
min-width: 64dip;
height: 16dip;
padding-top: 1dip;
padding-right: 5dip;
vertical-align: middle;
font-size: 12dip;
font-family: @baseFontEmoji;
overflow-x: hidden;
font-rendering-mode: snap-pixel;
}
.tab .tab-close {
opacity: 0.5;
vertical-align: middle;
size: 15dip;
padding: 0;
margin: 2dip 0 0 0;
foreground-image: url(resource:tab_close);
foreground-repeat: no-repeat;
foreground-position: center center;
foreground-size: auto;
}
.tab:hover .tab-close,
.tab:checked .tab-close {
opacity: 1.0;
transition: opacity 0.3s cubic-out;
}
.tab .tab-close:hover {
foreground-image-transformation: colorize(#8D0E27) saturation(0.6);
}
.tab .tab-close:active {
foreground-image-transformation: colorize(#8D0E27) saturation(0.6) opacity(0.5);
}
@media ui-accented-window-decoration or old-windows {
#backTabs {
background-color: @inactiveColor;
}
html:owns-focus #backTabs {
background-color: @activeColor;
}
html:owns-focus .tab {
fill: @chatTabsColorActive;
}
html:owns-focus .tab:hover {
fill: @chatTabsColorActiveHover;
}
}
.inputPanel {
flow: vertical;
padding: 0 3dip 2dip 6dip;
size: *;
min-height: 40dip;
}
body.msgPreview .inputPanel {
display: none !important;
}
.input {
prototype: GlobalCaretPos;
color: @textColorMain;
size: *;
min-width: 100dip;
font-family: @baseFontEmoji;
font-size: @mainFontSize;
padding: 2dip;
background-color: #fff;
border: 1dip solid @frameBorderColor;
context-menu: selector(menu#inputmenu);
scroll-manner: scroll-manner(animation: true, wheel-step: 20%);
}
.input:focus {
text-selection: #fff @activeColor;
}
.input text {
margin: 0;
display: block;
}
.input text:last-child {
padding-bottom: *;
}
.smartReplies {
flow: horizontal;
height: max-content;
padding: 0;
border-spacing: 5dip;
font-size: @baseFontSize;
font-family: @baseFontEmoji;
font-rendering-mode: snap-pixel;
}
.smartReplies > div {
size: max-content;
margin-top: 5dip;
padding: 1dip 5dip;
border: 1dip solid @btnBackColor;
}
.smartReplies > div:hover {
background-color: @btnBackColor;
border: 1dip solid @frameBorderColor;
cursor: pointer;
}
frameset[rows] > splitter {
margin: 0 6dip;
height: 3dip;
background: transparent;
border-bottom: 3dip solid transparent;
transition: blend 0.3s cubic-out;
}
frameset[rows] > splitter:hover {
border-bottom: 3dip solid #e0e0e0;
}
frameset[cols] > splitter {
width: 3dip;
background: transparent;
hit-margin: 0 3dip;
transition: blend 0.3s cubic-out;
}
frameset[cols] > splitter:hover {
background: #e0e0e0;
}
body.msgPreview frameset > splitter {
display: none !important;
}
.avatar {
flow: horizontal;
vertical-align: middle;
min-width: 0;
min-height: 32dip;
padding: 10dip 0;
}
.avatar.hidden {
display: none;
}
.avatar > img {
foreground-image-cursor: pointer;
foreground-size: contain;
foreground-position: center center;
max-width: max-content;
max-height: max-content;
margin: 0 auto;
size: *;
display: block;
}
#buttonBar {
flow: horizontal;
height: 35dip;
overflow: hidden;
vertical-align: middle;
padding: 0 6dip 1dip 6dip;
}
#buttonBar > * {
width: max-content;
}
body.msgPreview #buttonBar {
display: none !important;
}
#chatButtons,
#plugButtons {
flow: horizontal;
height: 22dip;
margin-left: 10dip;
}
#chatButtons > div,
#plugButtons > div {
size: 16px;
padding: 2dip;
border: 1px solid transparent;
overflow: hidden;
max-width: 16px;
max-height: 16px;
}
#chatButtons > div:hover,
#plugButtons > div:hover,
#chatButtons > div:expanded,
#plugButtons > div:expanded {
border: 1px solid @btnBorderColor;
background-color: @btnBackColor;
}
#chatButtons > div:active > *,
#plugButtons > div:active > * {
transform: translate(0, 1dip);
}
#chatButtons > div:disabled,
#plugButtons > div:disabled {
opacity: 0.5;
}
#chatButtons > div:checked {
background: #ddd;
}
#chatButtons > .checkable {
behavior: check;
}
.ddgroup {
border: 1dip solid transparent;
margin: 0 5dip;
white-space: nowrap;
height: 24dip;
flow: horizontal;
font-rendering-mode: snap-pixel;
}
.ddgroup.first {
margin: 0;
}
.ddgroup:hover {
border: 1dip solid @btnBorderColor;
background-color: @btnBackColor;
}
.ddbutton {
appearance: none;
height: 24dip;
background: none;
padding: 0 6dip 0 28dip;
position: relative;
flow: horizontal;
}
.ddbutton > div {
position: absolute;
left: 7dip;
top: 4dip;
}
.ddbutton > span {
margin: 0;
vertical-align: middle;
padding-top: 2dip;
}
.ddbutton:active > * {
transform: translate(0, 1dip);
}
.ddpopup {
@uwpStroke;
width: 18dip;
height: 24dip;
padding: 0;
foreground-position: 50% calc(50%+1dip);
foreground-size: 9dip;
foreground-image: @uwpDown;
stroke-width: 0.5dip;
stroke: #333;
}
.ddpopup:hover {
background-color: #ddd;
}
.ddpopup:active {
foreground-position: 50% calc(50%+2dip);
}
select > popup.list {
border-radius: 1dip;
padding: 1dip;
}
select > popup.list option {
padding: 5dip 15dip;
}
select > popup.list option:current {
color: inherit;
background: inherit;
}
select > popup.list option:hover {
color: @textColorMain;
background: #D9D9D9;
}
status-bar {
flow: horizontal;
display: block;
height: 22dip;
border-top: 1dip solid #D7D7D7;
font-rendering-mode: snap-pixel;
}
status-bar > div {
height: *;
vertical-align: middle;
position: relative;
border-right: 1dip solid #D7D7D7;
margin: 1dip 0;
padding: 0 5dip;
font-size: 11dip;
font-family: @baseFontEmoji;
color: @textColorMain;
}
status-bar > div:last-child {
border: none;
}
body.msgPreview status-bar {
display: none !important;
}
#sbChars {
width: 120dip;
}
#sbOutbox,
#sbTrlt,
sbCrypt {
width: max-content;
}
#sbOutbox > div {
opacity: 0.5;
}
#sbTrlt > div {
font-weight: 600;
opacity: 0.4;
transition: opacity 0.3s cubic-out;
}
#sbCrypt {
min-width: 16dip;
//border-spacing: 5dip;
}
#sbHint {
width: *;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
#sbHint > span {
font-rendering-mode: sub-pixel;
font-size: @baseFontSize;
}
[hint] {
aspect: ShowHint;
}
.imagegrid {
prototype: ImageGrid;
flow: vertical;
padding: 0;
margin-bottom: 5dip;
width: max-content;
border-radius: 1px;
}
.imagegrid#smilesGrid {
font-family: @baseFontEmoji;
font-size: 9pt;
}
.imagegrid#emojiGrid {
height: 271dip;
}
.imagegrid#stickersGrid {
height: 430dip;
flow: vertical;
}
.imagecat {
flow: horizontal;
width: *;
height: max-content;
background-color: #e3e3e3;
border: 1dip solid @btnBorderColor;
border-bottom: none;
border-spacing: 5dip;
padding: 6dip;
overflow-x: hidden-scroll;
}
.imagecat .catbtn {
prototype: CatButton;
size: 31dip;
border: 1dip solid transparent;
}
.imagecat .catbtn:hover {
border: 1dip solid @btnBorderColor;
background-color: @btnBackColor;
cursor: pointer;
}
.imagecat .catbtn:checked {
border: 1dip solid @btnBorderColor;
background-color: @chatBkgColor2;
}
.imagecat .catbtn > div {
margin: *;
background-position: 0 0;
background-repeat: no-repeat;
}
.imagecat#stickersCat {
prototype: NoFocus;
width: 500dip;
height: max-content;
overflow-x: hidden-scroll;
overflow-y: hidden;
scroll-manner: scroll-manner(animation: true, wheel-step: 10%);
}
.imagecat#stickersCat .catbtn {
size: 41dip;
flow: horizontal;
}
.imagecat#stickersCat .catbtn > img {
margin: *;
size: 32dip;
foreground-size: contain;
foreground-position: center center;
image-rendering: optimize-quality;
}
.imagelist {
prototype: ControlledList;
vertical-scrollbar: "v-scroll-indicator";
overflow-y: scroll-indicator;
background-color: @chatBkgColor2;
border: 1dip solid @btnBorderColor;
size: *;
padding: 2dip;
padding-right: 0;
}
.imagelist > div {
flow: row(div, div, div, div, div, div, div);
border-spacing: 3dip;
padding: 5dip;
padding-right: 7dip;
size: *;
}
.imagelist .sesbtn {
padding: 5dip;
border-radius: 5dip;
hit-margin: 2dip;
size: max-content;
}
.imagelist .sesbtn > div {
flow: horizontal;
text-align: left;
margin: *;
size: max-content;
background-position: 0 0;
background-repeat: no-repeat;
}
.imagelist .sesbtn > img,
.imagelist .sesbtn > lottie {
display: block;
margin: *;
size: 102dip;
foreground-size: contain;
}
.imagelist .sesbtn:hover {
prototype: MakeCurrent;
cursor: pointer;
}
.imagelist .sesbtn:current {
background-color: #dfdfdf;
}
.imagelist > div.captions {
flow: row(div, div, div, div, div, div);
border-spacing: 5dip;
}
.imagelist > div.captions .sesbtn {
hit-margin: 3dip;
}
.imagelist > div.captions .sesbtn > div {
text-align: center;
}
.imagelist > div > .caption {
display: none;
}
.imagelist > div.captions .caption {
display: block;
color: @textColorAlt;
white-space: nowrap;
text-align: left;
vertical-align: middle;
size: max-content;
}
.imagelist .caption:hover {
color: #000;
prototype: MakeCurrent;
cursor: pointer;
}
.imagelist > div.emlist {
padding: 8dip;
border-spacing: 11dip;
}
.imagelist > div.emlist .sesbtn {
hit-margin: 6dip;
}
.imagegrid#stickersGrid .imagelist > div.emlist {
flow: row(div, div, div, div);
border-spacing-y: 8dip;
}
.imagegrid#smilesGrid .imagelist {
height: auto;
max-height: 232dip;
}
.imagegrid#emojiGrid .imagelist > div.emlist {
flow: row(div, div, div, div, div, div, div, div);
}
.imagegrid#stickersGrid .stinputdiv {
margin: -2dip 0 0 -2dip;
padding: 0;
border-bottom: 1dip solid @btnBorderColor;
height: max-content;
background-color: #EAEAEA;
}
.imagegrid#stickersGrid .stinput {
color: @textColorAlt;
background-image: none;
background-color: #EAEAEA;
border: none;
margin: 0 2dip 2dip 2dip;
padding: 5dip;
height: 18dip;
width: *;
font-size: 16dip;
font-rendering-mode: sub-pixel;
}
.imagegrid#stickersGrid .nothingfound {
size: *;
text-align: center;
vertical-align: middle;
font-rendering-mode: sub-pixel;
font-size: 16dip;
color: @textColorAlt;
}
.dragHint {
display: none;
flow: horizontal;
border-spacing: 4dip;
padding-left: 4dip;
padding-right: 5dip;
vertical-align: middle;
}
.dragHint b {
font-weight: 500;
color: @activeColor;
}
.dragHint > div[pic] {
margin-top: -1dip;
}
.dragHint:expanded {
display: block;
}
#dragHtml {
size: max-content;
padding-right: 4dip;
}
#dragHtml > span {
display: inline-block;
padding: 0;
size: max-content;
max-width: 200dip;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.patchesHint {
flow: vertical;
padding: 0;
cursor: default;
size: max-content;
max-height: 300dip;
max-width: 500dip;
overflow-y: scroll-indicator;
vertical-scrollbar: "v-scroll-indicator";
font-family: @baseFontEmoji;
}
.patchesHint div:not(pic) {
size: *;
}
.patchesHint > div {
flow: horizontal;
border-spacing: 10dip;
padding: 8dip 10dip 8dip 8dip;
border-bottom: 1dip solid @popupBorderColor;
}
.patchesHint > div.grayedout {
color: #999;
}
.patchesHint .patchText {
white-space: pre-wrap;
}
.patchesHint > div:last-child {
border-bottom: none;
}
.reactionsHint {
flow: horizontal;
padding: 5dip 2dip;
cursor: default;
size: max-content;
font-family: @baseFontEmoji;
font-size: 14dip;
}
.reactionsHint > div {
size: 20dip;
line-height: 20dip;
padding: 0 5dip;
text-align: center;
vertical-align: middle;
font-rendering-mode: sub-pixel;
}
.reactionsHint > div.my {
position: relative;
}
.reactionsHint > div.my > div.delete {
position: absolute;
bottom: -3dip;
right: 0dip;
}
.reactionsHint > div:hover {
cursor: pointer;
}
.reactionsHint > div > div:first-child {
transition: transform 0.2s quint-out;
}
.reactionsHint > div:hover > div:first-child {
transform: scale(1.2);
}
.infoHint {
flow: horizontal;
vertical-align: top;
cursor: default;
size: max-content;
font-rendering-mode: snap-pixel;
padding: 3dip;
border-color: @frameBorderColor;
}
.infoHint div.table {
flow: table;
size: max-content;
margin: 0 2dip;
}
.infoHint div.row {
flow: table-row;
size: max-content;
}
.infoHint span {
white-space: nowrap;
}
.infoHint span:not(.spinner):first-child {
padding-right: 10dip;
}
.infoHint .param {
font-weight: 500;
}
.infoHint .param.separated {
padding-top: 5dip;
}
.infoHint .safe {
color: #359610;
}
.infoHint .unsafe {
color: #A30000;
}
.infoHint .spinner img {
opacity: 0.4;
margin: 6dip 4dip;
foreground-size: contain;
size: 24dip;
}
.infoHint .miniavatar {
size: max-content;
}
.infoHint .miniavatar img {
foreground-size: contain;
max-width: 48dip;
max-height: 48dip;
margin-left: 10dip;
}
.msgReaction {
display: inline-block;
border-radius: 5dip;
background-color: @btnBackColor;
border: 1dip solid @btnBackColor;
padding: 2dip 4dip 4dip 4dip;
margin-top: 5dip;
margin-right: 5dip;
font-size: 13dip;
}
.msgReaction.my {
border: 1dip solid @btnBorderColor;
}
.msgReaction > span {
font-size: 11dip;
}
.renderOption {
font-rendering-mode: sub-pixel;
}