@codoxhq/codox-cu-client
Version:
Codox client for Clickup FE
651 lines (645 loc) • 16.2 kB
CSS
/**
* Copyright (c) 2023 Codox Inc. All rights reserved.
*/
.codox-styles div,
.codox-styles span,
.codox-styles applet,
.codox-styles object,
.codox-styles iframe,
.codox-styles h1,
.codox-styles h2,
.codox-styles h3,
.codox-styles h4,
.codox-styles h5,
.codox-styles h6,
.codox-styles p,
.codox-styles blockquote,
.codox-styles pre,
.codox-styles a,
.codox-styles abbr,
.codox-styles acronym,
.codox-styles address,
.codox-styles big,
.codox-styles cite,
.codox-styles code,
.codox-styles del,
.codox-styles dfn,
.codox-styles em,
.codox-styles img,
.codox-styles ins,
.codox-styles kbd,
.codox-styles q,
.codox-styles s,
.codox-styles samp,
.codox-styles small,
.codox-styles strike,
.codox-styles strong,
.codox-styles sub,
.codox-styles sup,
.codox-styles tt,
.codox-styles var,
.codox-styles b,
.codox-styles u,
.codox-styles i,
.codox-styles center,
.codox-styles input,
.codox-styles dl,
.codox-styles dt,
.codox-styles dd,
.codox-styles ol,
.codox-styles ul,
.codox-styles li,
.codox-styles fieldset,
.codox-styles form,
.codox-styles label,
.codox-styles legend,
.codox-styles table,
.codox-styles caption,
.codox-styles tbody,
.codox-styles tfoot,
.codox-styles thead,
.codox-styles tr,
.codox-styles th,
.codox-styles td,
.codox-styles article,
.codox-styles aside,
.codox-styles canvas,
.codox-styles details,
.codox-styles embed,
.codox-styles figure,
.codox-styles figcaption,
.codox-styles footer,
.codox-styles header,
.codox-styles hgroup,
.codox-styles menu,
.codox-styles nav,
.codox-styles output,
.codox-styles ruby,
.codox-styles section,
.codox-styles summary,
.codox-styles time,
.codox-styles mark,
.codox-styles audio,
.codox-styles video {
margin: 0;
padding: 0;
border: 0;
white-space: initial;
font-family: sans-serif, "Open Sans", serif;
font-weight: 400;
line-height: 1.4;
-webkit-font-smoothing: antialiased;
}
.codox-styles i {
color: #fff;
}
.codox-styles ol,
.codox-styles ul {
list-style: none;
}
.codox-styles .codox-container {
overflow: visible;
position: relative;
background-color: transparent;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.codox-styles .codox-container .vertical {
margin-right: -30.8px;
}
.codox-styles .codox-container .vertical .codox-session-info-avatar {
margin-left: 5px;
}
.codox-styles .codox-container.left {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.codox-styles .codox-container.left .vertical {
margin-left: -30.8px;
}
.codox-styles .codox-container.left .vertical .codox-session-info-avatar {
margin-left: -5px;
}
.codox-styles .codox-container .codox-branding {
font-size: 11px;
position: absolute;
}
.codox-styles .codox-container .codox-branding a {
color: inherit;
cursor: pointer;
}
.codox-styles .codox-container .codox-branding a:hover {
text-decoration: underline;
}
.codox-styles .codox-container .codox-branding .codox-branding-logo {
width: 36px;
display: inline-block;
}
.codox-styles .codox-container .codox-branding .codox-branding-txt {
display: inline-block;
color: #637282;
font-weight: 400;
vertical-align: text-bottom;
line-height: 40px;
}
.codox-styles .codox-notify {
position: relative;
}
.codox-styles .codox-toastify {
width: 500px ;
font-size: 14px ;
}
.codox-styles .codox-session-info-list.vertical {
position: relative;
overflow: visible;
cursor: pointer;
}
.codox-styles .codox-session-info-list.vertical .codox-session-info-avatar:nth-child(1) {
position: absolute;
display: block;
z-index: 999;
border: none;
padding-left: 28px/2;
}
@media screen and (max-width: 1024px) {
.codox-styles .codox-session-info-list.vertical .codox-session-info-avatar:nth-child(1) {
top: 0px;
}
}
@media screen and (min-width: 1025px) {
.codox-styles .codox-session-info-list.vertical .codox-session-info-avatar:nth-child(1) {
top: 0px;
}
}
.codox-styles .codox-session-info-list.vertical .codox-session-info-avatar:nth-child(1) .codox-avatar:hover .codox-session-tooltip {
z-index: 999;
}
.codox-styles .codox-session-info-list.vertical .codox-session-info-avatar:nth-child(2) {
position: absolute;
display: block;
z-index: 998;
border: none;
padding-left: 28px/2;
}
@media screen and (max-width: 1024px) {
.codox-styles .codox-session-info-list.vertical .codox-session-info-avatar:nth-child(2) {
top: 28px;
}
}
@media screen and (min-width: 1025px) {
.codox-styles .codox-session-info-list.vertical .codox-session-info-avatar:nth-child(2) {
top: 28px;
}
}
.codox-styles .codox-session-info-list.vertical .codox-session-info-avatar:nth-child(2) .codox-avatar:hover .codox-session-tooltip {
z-index: 998;
}
.codox-styles .codox-session-info-list.vertical .codox-session-info-avatar:nth-child(3) {
position: absolute;
display: block;
z-index: 997;
border: none;
padding-left: 28px/2;
}
@media screen and (max-width: 1024px) {
.codox-styles .codox-session-info-list.vertical .codox-session-info-avatar:nth-child(3) {
top: 56px;
}
}
@media screen and (min-width: 1025px) {
.codox-styles .codox-session-info-list.vertical .codox-session-info-avatar:nth-child(3) {
top: 56px;
}
}
.codox-styles .codox-session-info-list.vertical .codox-session-info-avatar:nth-child(3) .codox-avatar:hover .codox-session-tooltip {
z-index: 997;
}
.codox-styles .codox-session-info-list.vertical .codox-session-info-avatar:nth-child(4) {
position: absolute;
display: block;
z-index: 996;
border: none;
padding-left: 28px/2;
}
@media screen and (max-width: 1024px) {
.codox-styles .codox-session-info-list.vertical .codox-session-info-avatar:nth-child(4) {
top: 84px;
}
}
@media screen and (min-width: 1025px) {
.codox-styles .codox-session-info-list.vertical .codox-session-info-avatar:nth-child(4) {
top: 84px;
}
}
.codox-styles .codox-session-info-list.vertical .codox-session-info-avatar:nth-child(4) .codox-avatar:hover .codox-session-tooltip {
z-index: 996;
}
.codox-styles .codox-session-info-list.vertical .codox-session-info-avatar:nth-child(5) {
position: absolute;
display: block;
z-index: 995;
border: none;
padding-left: 28px/2;
}
@media screen and (max-width: 1024px) {
.codox-styles .codox-session-info-list.vertical .codox-session-info-avatar:nth-child(5) {
top: 112px;
}
}
@media screen and (min-width: 1025px) {
.codox-styles .codox-session-info-list.vertical .codox-session-info-avatar:nth-child(5) {
top: 112px;
}
}
.codox-styles .codox-session-info-list.vertical .codox-session-info-avatar:nth-child(5) .codox-avatar:hover .codox-session-tooltip {
z-index: 995;
}
.codox-styles .codox-session-info-list.vertical .codox-session-info-avatar:nth-child(6) {
position: absolute;
display: block;
z-index: 994;
border: none;
padding-left: 28px/2;
}
@media screen and (max-width: 1024px) {
.codox-styles .codox-session-info-list.vertical .codox-session-info-avatar:nth-child(6) {
top: 140px;
}
}
@media screen and (min-width: 1025px) {
.codox-styles .codox-session-info-list.vertical .codox-session-info-avatar:nth-child(6) {
top: 140px;
}
}
.codox-styles .codox-session-info-list.vertical .codox-session-info-avatar:nth-child(6) .codox-avatar:hover .codox-session-tooltip {
z-index: 994;
}
.codox-styles .codox-session-info-list.horizontal .codox-session-info-avatar {
vertical-align: bottom;
z-index: 1000;
display: inline-block;
margin-bottom: 28px/2;
position: static;
top: 2px;
padding-left: 0px;
transition: top ease-out 200ms, -webkit-transform ease-out 200ms;
}
.codox-styles .codox-session-info-list.horizontal .codox-session-info-avatar .codox-session-tooltip {
z-index: 1000;
}
.codox-styles .codox-avatar {
position: relative;
-webkit-box-sizing: content-box;
box-sizing: content-box;
border: none;
display: inline-block;
}
.codox-styles .codox-avatar .codox-avatar-img,
.codox-styles .codox-avatar .codox-avatar-initials {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
vertical-align: bottom;
cursor: default;
display: inline-block;
-webkit-box-sizing: content-box;
box-sizing: content-box;
-webkit-box-shadow: white 0px 0px 1px;
box-shadow: white 0px 0px 1px;
background: #FFFFFF;
font-size: 11px;
font-weight: 600;
text-align: center;
text-transform: uppercase;
border-radius: 50%;
}
@media screen and (max-width: 1024px) {
.codox-styles .codox-avatar .codox-avatar-img,
.codox-styles .codox-avatar .codox-avatar-initials {
width: 28px;
height: 28px;
line-height: 28px;
font-size: 11px;
}
}
@media screen and (min-width: 1025px) {
.codox-styles .codox-avatar .codox-avatar-img,
.codox-styles .codox-avatar .codox-avatar-initials {
width: 28px;
height: 28px;
line-height: 28px;
font-size: 13px;
}
}
.codox-styles .codox-avatar .codox-avatar-img.clickable,
.codox-styles .codox-avatar .codox-avatar-initials.clickable {
cursor: pointer;
}
.codox-styles .codox-avatar .codox-avatar-img:not(.clicked),
.codox-styles .codox-avatar .codox-avatar-initials:not(.clicked) {
color: #FFF;
}
.codox-styles .codox-avatar .codox-avatar-img.clicked,
.codox-styles .codox-avatar .codox-avatar-initials.clicked {
background: #FFF;
}
.codox-styles .codox-avatar .codox-avatar-img.disconnected,
.codox-styles .codox-avatar .codox-avatar-initials.disconnected {
background: hsl(0, 0%, 60%);
}
.codox-styles .codox-avatar .codox-session-tooltip {
-webkit-transition: opacity 300ms ease 100ms;
transition: opacity 300ms ease 100ms;
position: absolute;
visibility: hidden;
opacity: 0;
color: #FFFFFF;
border: 1px solid;
border-radius: 3px;
}
@media screen and (max-width: 1024px) {
.codox-styles .codox-avatar .codox-session-tooltip {
width: 100px;
padding: 4px 1px;
font-size: 10px;
line-height: 14px;
}
}
@media screen and (min-width: 1025px) {
.codox-styles .codox-avatar .codox-session-tooltip {
width: 120px;
padding: 6px 3px;
font-size: 12px;
line-height: 16px;
}
}
.codox-styles .codox-avatar .codox-session-tooltip.disconnected {
background: hsl(0, 0%, 60%);
border-left-color: hsl(0, 0%, 60%);
}
.codox-styles .codox-avatar .codox-session-tooltip .codox-session-tooltip-contact-name {
display: block;
overflow: hidden;
margin-bottom: 3px;
font-weight: 600;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
}
.codox-styles .codox-avatar .codox-session-tooltip .codox-session-tooltip-contact-status {
display: block;
overflow: hidden;
font-weight: 300;
color: inherit;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
}
.codox-styles .codox-avatar .codox-session-tooltip:after {
content: '';
position: absolute;
top: -5px;
left: 10px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid;
border-bottom-color: inherit;
width: 0;
height: 0;
}
.codox-styles .codox-avatar:hover .codox-session-tooltip {
visibility: visible;
margin-top: 10px;
opacity: 1;
background-color: #ffffff;
}
.codox-styles .codox-avatar [class*="codox-session-status"] {
position: absolute;
right: 0px;
right: -3px;
bottom: -3px;
border: 1px solid #fff;
border-radius: 50%;
}
@media screen and (max-width: 1024px) {
.codox-styles .codox-avatar [class*="codox-session-status"] {
height: 10px;
width: 10px;
}
}
@media screen and (min-width: 1025px) {
.codox-styles .codox-avatar [class*="codox-session-status"] {
height: 10px;
width: 10px;
}
}
.codox-styles .codox-avatar .codox-session-status-joined {
background: #1EC01E;
}
.codox-styles .codox-avatar .codox-session-status-offline {
background: #EF3F3F;
}
.codox-styles .codox-pointer-layer {
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: absolute;
top: 0;
left: 0;
z-index: 3;
}
.codox-styles .codox-pointer-layer .codox-pointer-click {
z-index: 2;
-webkit-transform-origin: center;
transform-origin: center;
position: absolute;
width: 50px;
height: 50px;
left: 0px;
top: 0px;
opacity: 0;
border-radius: 50%;
}
.codox-styles .codox-pointer-layer .codox-user-pointer {
position: absolute;
z-index: 1;
}
.codox-styles .codox-pointer-layer .codox-user-pointer-svg {
display: block;
width: 20px;
height: 20px;
}
.codox-styles .codox-pointer-layer .codox-user-pointer-label {
display: block;
position: absolute;
z-index: 1;
font-size: 11px;
font-weight: 700;
color: #fff;
text-overflow: ellipsis;
text-align: center;
border: 0;
border-radius: 2px;
white-space: nowrap;
pointer-events: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.codox-styles .codox-selection-layer {
pointer-events: none;
z-index: 2;
position: absolute;
top: 0;
left: 0;
}
.codox-styles .codox-selection-layer .selections {
position: relative;
opacity: 0.7;
z-index: 1;
}
.codox-styles .codox-selection-layer .selections .selection {
opacity: 0.5;
position: absolute;
z-index: 1;
}
.codox-styles .codox-caret-layer {
z-index: 100;
position: absolute;
top: 0;
left: 0;
}
.codox-styles .codox-caret-layer .codox-user-caret {
position: absolute;
width: 0;
height: 0;
line-height: 0px;
text-align: center;
opacity: 0;
}
.codox-styles .codox-caret-layer .codox-user-caret.codox-user-caret-visible {
opacity: 0.7;
}
.codox-styles .codox-caret-layer .codox-user-caret .codox-user-caret-label {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: absolute;
top: -16px;
left: -50%;
-webkit-box-sizing: content-box;
box-sizing: content-box;
overflow: hidden;
height: 14px;
left: -1px;
text-align: center;
padding: 1px 4px;
opacity: 0;
font-weight: 500;
font-size: 10px;
color: #fff;
line-height: 12px;
text-overflow: ellipsis;
border: 0;
border-radius: 2px;
white-space: nowrap;
pointer-events: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.codox-styles .codox-caret-layer .codox-user-caret .codox-user-caret-label.codox-user-caret-label-visible {
opacity: 1;
}
.codox-styles .codox-caret-layer .codox-user-caret .codox-user-caret-marker {
position: absolute;
width: 0;
border: 1px solid transparent;
}
.codox-styles .codox-caret-layer .codox-user-caret .codox-user-caret-top {
position: absolute;
width: 4px;
height: 4px;
top: -4px;
z-index: 1;
}
.codox-styles .codox-wave-logo path {
-webkit-transition: opacity 0.1 0.5, fill 0.3s 0.5s;
transition: opacity 0.1 0.5, fill 0.3s 0.5s;
}
.codox-styles .codox-wave-logo .p1 {
fill: #fbb040;
opacity: 1;
}
.codox-styles .codox-wave-logo .p2 {
fill: #00a651;
opacity: 1;
}
.codox-styles .codox-wave-logo .p3 {
fill: #1b75bc;
opacity: 1;
}
.codox-styles .codox-wave-logo .p4 {
fill: #da1c5c;
opacity: 1;
}
.codox-styles .codox-wave-logo.disabled {
/*
& .p1{
fill: #d6d6d6 ;
}
& .p2{
fill: #d6d6d6 ;
}
& .p3{
fill: #d6d6d6 ;
}
& .p4{
fill: #d6d6d6 ;
}
*/
}
.codox-styles .codox-wave-logo.disabled .p1 {
fill: #fbb040;
opacity: 0.3;
}
.codox-styles .codox-wave-logo.disabled .p2 {
fill: #00a651;
opacity: 0.3;
}
.codox-styles .codox-wave-logo.disabled .p3 {
fill: #1b75bc;
opacity: 0.3;
}
.codox-styles .codox-wave-logo.disabled .p4 {
fill: #da1c5c;
opacity: 0.3;
}
.codox-styles .header {
width: 100%;
height: 63px;
z-index: 10000;
-webkit-box-shadow: 0 1px rgba(99, 114, 130, 0.16);
box-shadow: 0 1px rgba(99, 114, 130, 0.16);
margin: 0;
margin-right: 40px ;
padding: 0 16px ;
position: relative;
background-color: #fff;
font-family: sans-serif, "Open Sans", serif;
}
.codox-styles .mce-tinymce {
left: 0;
right: 0;
margin: auto ;
}
.codox-styles body {
background-color: white ;
}