/* Base layout variables */ :root { --app-sa-bot: var(--sa-bot); --keyboard-height: 0px; --visualViewport-offsetTop: 0px; --visualViewport-offsetBottom: calc(-1 * var(--visualViewport-offsetTop)); --visualViewport-top: var(--visualViewport-offsetTop); --visualViewport-bottom: calc(var(--keyboard-height) - var(--visualViewport-offsetTop)); --desktop-primary-menu-width: 64px; --mobile-primary-menu-half-opened-conent-height: 310px; --mobile-primary-menu-full-opened-conent-height: 549px; --mobile-primary-menu-swipe-zone-height: 9px; --mobile-primary-menu-tap-bar-height: 48px; --desktop-task-panel-height: 40px; --mobile-task-panel-height: 52px; --mobile-head-height: 44px; } /* Viewport-specific positioning variables */ @media screen and (min-width: 481px) { :root { --task-panel-height: 0px; --primary-menu-height: 0px; } body.withTaskPanel { --task-panel-height: var(--desktop-task-panel-height); } body { --footerMobile-height: 0px; --innerFooterMobile-height: 0px; } } @media screen and (max-width: 480px) { :root { --task-panel-height: 0px; --primary-menu-height: calc(var(--mobile-primary-menu-tap-bar-height) + 1px + max(var(--sa-bot), 13px)); } body.withTaskPanel { --task-panel-height: var(--mobile-task-panel-height); } body { --footerMobile-height: calc(var(--primary-menu-height) + var(--task-panel-height)); --innerFooterMobile-height: 0px; } body.withModal, body[data-page=search] { --footerMobile-height: 0px; --innerFooterMobile-height: var(--sa-bot); } body.w_keyboard { --innerFooterMobile-height: 0px; --app-sa-bot: 0px; } } html { margin: 0; padding: 0; -webkit-overflow-scrolling: auto } body { background: var(--base-cont-low); margin: 0; padding: 0; font: 13px/20px var(--font-base); color: var(--base-txt-primary); min-width: 320px; overscroll-behavior: none; /* відключаємо нативне оновлення свайпом вниз */ -webkit-overflow-scrolling: auto; overflow-x: hidden; /* -webkit-user-select: none; */ user-select: none; touch-action: none; /* пробую позбавитись залипання "свайпу" на мобілі + це пофіксило проблему, коли можна було ускролить контент кудись за область вікна */ } @media (max-width: 480px) { body { background: var(--base-cont-mod-low); } body[data-page="search"] #content:has(#empty_search) { touch-action: none; /* щоб не скролилось поза екран на ios */ } } body[data-page=tasks], body[data-page=users_tasks], body[data-page=kanban], body[data-page=kanban_days], body[data-page=task_edit], body[data-page=project_edit], body[data-page=projects], body[data-page=projects_kanban], body[data-page=users], body[data-page=contacts], body[data-page=project_log], body[data-page=bill] { background: var(--base-cont-low); } body[data-page=report], body[data-page=contacts], body[data-page=users], body[data-page=projects_grid], body[data-page=files_grid], body[data-page=tasks_grid], body[data-page=task_schedule] { background: var(--base-cont-top); } body[data-page=search] { background: var(--base-cont-low); } body[data-page=none] { background: var(--base-cont-low); } body[data-page=contacts] #mass_n_filt, body[data-page=users] #mass_n_filt, body[data-page=projects_grid] #mass_n_filt, body[data-page=files_grid] #mass_n_filt, body[data-page=tasks_grid] #mass_n_filt { box-shadow: none; } body[data-page=contacts] #content, body[data-page=users] #content, body[data-page=projects_grid] #content, body[data-page=files_grid] #content, body[data-page=tasks_grid] #content { padding-top: 0; } body.withModal > *:not(.modal) * {-webkit-user-select: none;user-select: none;} body.grabbing {cursor: grabbing} body.col-resize {cursor: col-resize} [data-allow-select] {-webkit-user-select: text !important; user-select: text !important} font {font:inherit} input, textarea, option, select {font:12px var(--font-base);color:var(--base-txt-accent)} input:focus, textarea:focus {outline:none;} input:-webkit-autofill {color:var(--base-txt-accent) !important;background-color:var(--inp-cont-top) !important;-webkit-box-shadow:0 0 0 50px var(--inp-cont-top) inset;transition: background-color 5000s ease-in-out 0s,color 5000s ease-in-out 0s;} .modal input:-webkit-autofill {background-color:var(--menu-inp-cont) !important;-webkit-box-shadow:0 0 0 50px var(--menu-inp-cont) inset;} textarea {resize:vertical} input.inp_load_pre, input.inp_load {background:var(--base-hlt-hover) !important} input.inp_error{color:var(--base-btn-alert-primary-minor) !important} input.input_error {border-color: var(--inp-cont-top) !important; box-shadow: var(--shadow-brd-error) !important;} optgroup { font-weight:normal; font-style:normal} optgroup.gr { color:var(--base-txt-secondary); padding:7px 0; font:bold 14px/20px var(--font-base); text-indent:7px; border-top:2px solid var(--base-line-alt-cardbrd); background:var(--base-cont-low); } optgroup.gr:first-child {border-top:none} optgroup.sgr { background:var(--base-cont-top); color:var(--base-txt-ghost); padding:5px 0; text-indent:7px; font:12px var(--font-base);border-top:1px solid var(--base-cont-low) } optgroup.sgr option:first-child {margin-top:5px} option { padding:0 4px; background: var(--inp-cont-top);} optgroup option { text-transform:none; background:var(--base-cont-top); color:var(--base-txt-accent); font-weight:normal; text-indent:2px; padding:2px 5px; } optgroup.gr option { text-indent:4px} input, textarea { padding:2px} ::selection, ::-moz-selection {background:var(--inp-selection)} .massPanel ::selection, .massPanel ::-moz-selection, .menu ::selection, .menu ::-moz-selection, .modal ::selection, .modal ::-moz-selection, #sidePanel__wrapper ::selection, #sidePanel__wrapper ::-moz-selection {background:var(--menu-inp-selection)} p, h1, h2, h3, h4, h5, ul { margin:0; padding:0; margin-bottom:15px } h1 {font:21px/28px var(--font-base); margin-right:20px; color:var(--base-txt-accent);} h1 a { color:var(--base-txt-accent)} h1 a:hover { color:var(--base-txt-max)} h2 { font-size:18px; font-weight:normal} h3 { font-size:17px; font-weight:normal} h3 a { color:var(--base-txt-accent); padding:2px; margin:-2px } h3 a:hover { color:var(--base-txt-max); background:var(--base-cont-low) } h4 {font: bold 14px var(--font-base);line-height:130%;} h4 b { font:inherit} h5 {font: var(--font-ui-13-small-bold);} h4.ns { padding-top:10px; margin-bottom:5px} .gray { color:var(--base-txt-secondary)} .gray_alt { color:var(--base-txt-tertiary)} p.gray a { color:var(--base-txt-secondary)} span.gray a.onch { color:var(--base-txt-tertiary); border-bottom:1px dashed var(--base-txt-tertiary)} p.ah4, div.ah4 { margin-top:-15px} p.content, div.content, .blockadd p { font-size:14px; line-height:20px; margin-bottom:15px } div.content font { font:14px var(--font-base)} p.nomarg, h5.nomarg, h4.nomarg { margin-bottom:0 !important} p.nomarg2, h5.nomarg2, h4.nomarg2 { margin-bottom:5px !important} form { margin:0; padding:0} ul{margin:6px 0 24px 20px;} ol{margin:6px 0 24px 40px;padding-inline-start: 0;} ul li{margin:0 0 6px;padding:0;list-style-type:none;} ul li:before {content:'\2022'; float:left;font:bold 20px/14px var(--font-base); color:var(--base-txt-link-minor); margin:3px 0 -3px -16px;} ol li{margin:0 0 6px;padding:0;list-style-type:none;} ol {counter-reset: ol-counter;} ol li:before {float:left; content: counter(ol-counter);counter-increment: ol-counter;font:bold 13px/20px var(--font-base); color:var(--base-txt-link-minor); margin:0 5px 0 -40px; width:27px; text-align:right;white-space: nowrap;} label {padding:2px;position:relative;} label.act {background:var(--base-hlt-alt-label);color: var(--base-txt-primary);} a {color: var(--base-txt-link-minor);text-decoration:none;cursor:pointer;} a:hover {color:var(--base-txt-link-major);} a.inherit {color:inherit} a.inline {color:inherit;border-bottom: 1px dashed;} a.inline:hover {color:var(--base-txt-link-minor);border-bottom: 1px dashed;} a.inline_dotted { color: inherit; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; transition: text-decoration-color .2s ease-out; } a.inline_dotted:hover { color: inherit; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; text-decoration-color: var(--base-txt-link-minor); transition: text-decoration-color .2s ease-in; } a.dashed_font font {color:inherit;border-bottom:1px dashed inherit;} a.dashed_font:hover font { color:var(--base-txt-link-minor); border-bottom:1px dashed var(--base-txt-link-minor)} a.inline_fnt, span.inline2 {color:inherit; cursor:pointer;} a.inline_fnt:hover font, span.inline2:hover {color:var(--base-txt-link-minor)} .content span[style]:not(.av_sm) { margin:-2px -1px; padding:2px 1px} .content strike { color:var(--base-txt-secondary)} input.wide { width:95%} input.wide2 { width:90%} .input2, .button2 { padding:1px 2px} input.inputmain {width: 100%;font:21px/28px var(--font-base) !important;border-radius:4px;box-sizing: border-box;} input.inputmain:focus {box-shadow:var(--shadow-brd-focus); border-color:transparent; outline: none} input[type=text].inputmain { border-radius:4px;} input.inputbig { font:18px var(--font-base) !important} input.empty { color:var(--base-txt-secondary)} /* -------------------------------------------------------------------------------------------------------------------*/ input[type=text], input[type=number], input[type=password], input[type=number], input[type=email], textarea, select {border:1px solid var(--inp-cont-brd);border-radius:2px;background:var(--inp-cont-top);} .modal .setup input[type=text], .modal .setup input[type=number], .modal .setup input[type=password], .modal .setup input[type=number], .modal .setup input[type=email], .modal .setup textarea, .modal .setup select {border:1px solid var(--menu-inp-brd);border-radius:2px;background:var(--menu-inp-cont);} .modal .setup input:focus {border-color:transparent} select {padding:3px; border-width:1px;/*-webkit-appearance: none;*/} .setup input[type=text], .setup input[type=number], .setup input[type=email], .setup input[type=tel] {} .settings input[type=text], .newsletter input[type=text], .newsletter textarea, .dataadd input[type=text], .dataadd input[type=email], .dataadd input[type=tel], .dataadd textarea { padding:3px 4px} input[type=submit], input[type=button] {cursor: pointer; padding:6px 15px; font:bold 14px/20px var(--font-base); border-radius:4px; height:32px} .setup input[type=number] {width:40px} a.button, span.button {display:inline-block;padding:6px 15px;font:bold 14px/20px var(--font-base);border-radius:4px;} a.button .ico_l {margin:0 10px 0 0} a.button .ico_l.ico_svg30 {margin:-5px 10px -5px -5px} a.button .ico_r {margin:0 0 0 10px} a.button .ico_r.ico_user_add, a.button .ico_r.ico_project_add {margin:-5px 0 -5px 10px} a.button_blue_brd {font-weight:normal;padding: 10px 20px;border-radius: 20px;} input.button_s2_alt {display:none} input.button_sm {height:24px; padding:2px 10px; font:12px/20px var(--font-base)} a.button_sm, span.button_sm {padding:2px 10px; font:12px/20px var(--font-base)} input.button_big {height:40px; padding:10px 15px; font:bold 15px/20px var(--font-base);box-sizing: border-box;border-radius: 8px} a.button_big, span.button_big {padding:10px 15px;font: bold 15px/20px var(--font-base);border-radius: 8px} a.button_big .ico_activate {margin:-5px 10px -5px 0} a.button_round {border-radius:20px;} a.button_big.button_round {padding:10px 25px;} input.button_white, a.button_white, a.button_white2red, span.button_white {font-weight:normal} input.button_white_act, a.button_white_act, span.button_white_act {font-weight:normal} input.button_trans, a.button_trans, span.button_trans {font-weight:normal} .button .button_part {background: var(--base-btn-primary-minor); float:right; margin: -6px -15px;padding: 6px 15px;} .button .button_part:hover {background: var(--base-btn-primary-major);} .button .button_dots {color:transparent;float:right;width:0;white-space:nowrap;text-align:center;overflow:hidden;margin: -6px -15px -6px 15px;border-radius:0 4px 4px 0;padding: 6px 0;font: bold 10px/20px var(--font-base);transition: 0.5s all 0.5s ease, color 0.5s ease;} .button .button_dots:before {content:''; float:left; border-left:1px solid var(--white-ghost); margin:-1px -9px; height:20px; } .button:hover .button_dots:before {opacity:0} /* -------------------------------------------------------------------------------------------------------------------*/ /* checkboxes and radio buttons */ .wcheckbox {cursor:pointer; display:inline-block} .wcheckbox input[type=checkbox] {display:none} .wcheckbox input[type=checkbox] ~ span {float:left; width:20px; height:20px; margin:0 4px 0 -4px; background:url(/assets/img/color/iconset.svg) no-repeat -20px -1360px} .wcheckbox:hover input[type=checkbox] + span {background-position:-40px -1360px} .wcheckbox input[type=checkbox]:checked + span {background-position:0 -1360px} .checkbox {margin:1px 5px 1px 1px;padding:0;vertical-align:middle} label input[type=checkbox].w_ico {opacity:0; width:20px; height:20px; padding:0; float:left; margin:0 -20px 0 0;cursor: pointer;} label input[type=checkbox].w_ico + i {display:inline-block; width:20px;height:20px;margin:0;cursor: pointer;background: url(/assets/img/color/iconset.svg) no-repeat -20px -1300px; vertical-align:bottom} label:hover input[type=checkbox].w_ico + i {background-position: -20px -1320px;} label input[type=checkbox].w_ico:checked + i {background-position: 0 -1320px;} label input[type=checkbox].w_ico:disabled:checked + i {background-position: 0 -1300px;} label input[type=checkbox].w_bico {opacity:0; width:20px; height:20px; padding:0; float:left; margin:0 -20px 0 0;cursor: pointer;} label input[type=checkbox].w_bico + i {display:inline-block; width:20px;height:20px;margin: 0;background:url(/assets/img/color/iconset.svg) no-repeat -20px -1280px; vertical-align:bottom} label:hover input[type=checkbox].w_bico + i {background-position:-40px -1280px} label input[type=checkbox].w_bico:checked + i {background-position:0 -1220px} label input[type=checkbox].w_sico {opacity:0; width:20px; height:20px; padding:0; float:left; margin:0 -20px 0 0;cursor: pointer;} label input[type=checkbox].w_sico + i {display:inline-block;width:20px;height:20px;margin: 0;background: url(/assets/img/color/iconset.svg) no-repeat -20px -1360px;vertical-align: top;} label:hover input[type=checkbox].w_sico + i {background-position:-40px -1360px} label input[type=checkbox].w_sico:checked + i {background-position: 0 -1360px;} p.wlabel {margin-bottom: 5px;font: 13px/20px var(--font-base);color: var(--base-txt-tertiary);} p.wlabel label {white-space:normal !important;line-height: 20px;vertical-align: top;} p.wlabel ~ p.wlabel:last-child {margin-bottom: 12px !important;} .wlabel label input {margin:3px 5px 0 0;padding:0;border:none;vertical-align: top;} p.wlabel label input[type=checkbox].w_sico + i {margin:-1px 2px 0 0} p.fld_ { margin:0 0 5px 0} p.fld_ span { color:var(--base-txt-tertiary); margin-left:5px} p.fld_ span a { color:var(--base-txt-tertiary); margin-left:5px; border-bottom:1px dashed var(--base-txt-tertiary); } p.graysmall {font:italic 12px/16px var(--font-base);color:var(--base-txt-tertiary); padding:15px 15px 5px 25px; margin:0;} p.graysmall a.inline_r {float:right; margin:0 10px;} p.tip { background:var(--base-hlt-w-pressed); padding:7px 5px 7px 50px; position:relative; min-height:40px; border-radius:5px} p.tip b { color:var(--base-btn-notice-minor); font:bold 14px var(--font-base)} p.gray b { color:var(--base-txt-primary)} p.gray span.gray {color:var(--base-txt-tertiary)} /* -------------------------------------------------------------------------------------------------------------------*/ body::-webkit-scrollbar {width: 12px;} body::-webkit-scrollbar:horizontal {height: 12px;} body::-webkit-scrollbar-track {background-color:var(--base-surf-top)} body::-webkit-scrollbar-track:hover {background-color:var(--base-cont-top)} body::-webkit-scrollbar-track:horizontal {} body::-webkit-scrollbar-thumb {background-color: var(--base-cont-top);border:1px solid var(--base-line-alt-cardbrd);border-radius:10px;} ::-webkit-scrollbar-button { display:none;} ::-webkit-scrollbar-corner {display:none;} body.sidePanelShown::-webkit-scrollbar-thumb:vertical {background-color:var(--base-cont-mod-top);border:1px solid var(--base-cont-mod-top); } body.sidePanelShown::-webkit-scrollbar-track:vertical, body.sidePanelShown::-webkit-scrollbar-track:vertical:hover {background-color:var(--base-cont-mod-top)} div::-webkit-scrollbar {width: 6px;} div::-webkit-scrollbar-track {background-color: var(--scroll-easy); box-shadow: -1px 0 var(--scroll-minor)} div::-webkit-scrollbar-track:hover {background-color:var(--base-cont-low)} div::-webkit-scrollbar-thumb:vertical {background-color:var(--base-cont-low)} div:hover::-webkit-scrollbar-thumb:vertical {background-color:var(--base-surf-top)} div#preview_import::-webkit-scrollbar {width: 6px;} div#preview_import::-webkit-scrollbar-track {background-color: transparent;} div#preview_import::-webkit-scrollbar-track:hover {background-color:var(--base-surf-top)} div#preview_import::-webkit-scrollbar-thumb:vertical {background-color:var(--base-surf-top)} div#preview_import:hover::-webkit-scrollbar-thumb:vertical {background-color:var(--base-line-alt-cardbrd)} div.verticalScroll, textarea.verticalScroll { overflow: auto; overflow-x: hidden; position: relative; } div.verticalScroll::-webkit-scrollbar, textarea.verticalScroll::-webkit-scrollbar { height: 12px; width: 12px; } div.verticalScroll::-webkit-scrollbar-track, textarea.verticalScroll::-webkit-scrollbar-track { background-color: transparent; border: 0; } div.verticalScroll::-webkit-scrollbar-track:hover, textarea.verticalScroll::-webkit-scrollbar-track:hover, body.mobile div.verticalScroll::-webkit-scrollbar-track.mobile_hover, body.mobile textarea.verticalScroll::-webkit-scrollbar-track.mobile_hover { background-color: transparent; } div.verticalScroll::-webkit-scrollbar-button, textarea.verticalScroll::-webkit-scrollbar-button { display: none; height: 0; width: 0 } div.verticalScroll::-webkit-scrollbar-corner, textarea.verticalScroll::-webkit-scrollbar-corner { background-color: transparent } div.verticalScroll::-webkit-scrollbar-thumb, textarea.verticalScroll::-webkit-scrollbar-thumb { background-color: transparent; border: 3px solid var(--base-cont-top); border-radius: 8px; min-height: 20%; } .modal div.verticalScroll::-webkit-scrollbar-thumb, textarea.verticalScroll::-webkit-scrollbar-thumb { border-color: var(--base-cont-mod-top); } div.verticalScroll:hover::-webkit-scrollbar-thumb, textarea.verticalScroll:hover::-webkit-scrollbar-thumb, body.mobile div.verticalScroll.mobile_hover::-webkit-scrollbar-thumb, body.mobile textarea.verticalScroll.mobile_hover::-webkit-scrollbar-thumb, body.mobile textarea.verticalScroll:focus::-webkit-scrollbar-thumb { background-color: var(--scroll-minor); } div.verticalScroll::-webkit-scrollbar-thumb:hover, textarea.verticalScroll::-webkit-scrollbar-thumb:hover, body.mobile div.verticalScroll::-webkit-scrollbar-thumb.mobile_hover, body.mobile textarea.verticalScroll::-webkit-scrollbar-thumb.mobile_hover { background-color: var(--scroll-major); } code::-webkit-scrollbar {width: 8px; opacity:0.2;} code:hover::-webkit-scrollbar {opacity:1;} code::-webkit-scrollbar:horizontal {height: 8px;} code::-webkit-scrollbar-track {background-color:var(--base-cont-low)} code::-webkit-scrollbar-track:hover {background-color:var(--base-cont-low)} code::-webkit-scrollbar-thumb {background-color:var(--base-surf-low);border-width:0} #sidePanel__wrapper div::-webkit-scrollbar-track {background-color:var(--base-cont-mod-low)} #sidePanel__wrapper div::-webkit-scrollbar-track:hover {background-color:var(--base-cont-mod-low)} #sidePanel__wrapper div::-webkit-scrollbar-thumb {background-color:var(--menu-cont-line);border-width:0} textarea::-webkit-scrollbar {width: 8px;} textarea::-webkit-scrollbar-track {background-color:var(--base-cont-low)} textarea::-webkit-scrollbar-track:hover {background-color:var(--base-cont-low)} textarea::-webkit-scrollbar-thumb {background-color:var(--base-surf-low);border-width:0} /* -------------------------------------------------------------------------------------------------------------------*/ textarea::-moz-placeholder { color:var(--base-txt-tertiary); opacity:1; font-style:italic; white-space: nowrap} textarea::-webkit-input-placeholder { color:var(--base-txt-tertiary); opacity:1;font-style:italic; white-space: nowrap} #sidePanel__wrapper textarea::-moz-placeholder {white-space: normal;} #sidePanel__wrapper textarea::-webkit-input-placeholder {white-space: normal;} input::-moz-placeholder { color:var(--base-txt-tertiary); opacity:1; font-style:italic; white-space: nowrap} input::-webkit-input-placeholder {color:var(--base-txt-tertiary);opacity:1;font-style:italic;white-space: nowrap} input.normholder::-moz-placeholder { color:inherit; opacity:1; font-style:normal} input.normholder::-webkit-input-placeholder { color:inherit; opacity:1;font-style:normal} input.inputmain::-moz-placeholder {font:20px/28px var(--font-base);} input.inputmain::-webkit-input-placeholder {font:20px/28px var(--font-base);} input.timepicker::-moz-placeholder {font-style:normal} input.timepicker::-webkit-input-placeholder {font-style:normal} /* -------------------------------------------------------------------------------------------------------------------*/ button.bookmark-active use:first-child { display:none } button.bookmark use:last-child { fill: var(--base-btn-notice-minor); } button.bookmark:not(.bookmark-active) use:last-child { display:none } .menu__item.bookmark-active ws-icon use:first-child { display:none } .menu__item.bookmark ws-icon use:last-child { fill: var(--base-btn-notice-minor); } .menu__item.bookmark:not(.bookmark-active) ws-icon use:last-child { display:none } ws-icon.star-toggle { transition: all 0.2s ease-in-out; } ws-icon.star-toggle svg use:last-child { opacity: 0; transition: opacity 0.3s ease-in-out; } ws-icon.star-toggle.star-starred { --icon-color: var(--base-btn-notice-minor); } .menu__item:hover ws-icon.star-toggle, .menu__item.selected ws-icon.star-toggle { rotate: 72deg; } ws-icon.star-toggle.star-starred svg use:last-child, .menu__item:hover ws-icon.star-toggle:not(.star-starred) svg use:last-child, .menu__item.selected ws-icon.star-toggle:not(.star-starred) svg use:last-child{ opacity: 1; } .menu__item:hover ws-icon.star-toggle.star-starred svg use:last-child, .menu__item.selected ws-icon.star-toggle.star-starred svg use:last-child{ opacity: 0; } /* BASE */ .sidePanel__list__item-task .menu__item ws-icon.star-toggle { opacity: 0; } .sidePanel__list__item-task .menu__item ws-icon.star-toggle svg use:nth-child(1) { opacity: 1 !important; } .sidePanel__list__item-task .menu__item ws-icon.star-toggle svg use:nth-child(2) { opacity: 0 !important; } .sidePanel__list__item-task .menu__item ws-icon.star-toggle svg use:nth-child(3) { opacity: 0 !important; } .sidePanel__list__item-task:hover .menu__item ws-icon.star-toggle { opacity: 1; --icon-color: var(--base-txt-tertiary); } /* INITIAL OPEN */ .sidePanel__list__item-task .menu__item ws-icon.star-toggle.star-initial, .sidePanel__list__item-task .menu__item ws-icon.star-toggle.star-initial.star-starred { opacity: 1; --icon-color: var(--base-txt-tertiary); } /* INITIAL OPEN STARED */ .sidePanel__list__item-task .menu__item ws-icon.star-toggle.star-initial.star-starred svg use:nth-child(1) { opacity: 1 !important; } .sidePanel__list__item-task .menu__item ws-icon.star-toggle.star-initial.star-starred svg use:nth-child(2) { opacity: 0 !important; } .sidePanel__list__item-task .menu__item ws-icon.star-toggle.star-initial.star-starred svg use:nth-child(3) { opacity: 0 !important; } /* INITIAL OPEN STARED HOVER */ .sidePanel__list__item-task .menu__item:hover ws-icon.star-toggle.star-initial.star-starred { rotate: none; } /* INITIAL OPEN UNSTARED */ .sidePanel__list__item-task .menu__item ws-icon.star-toggle.star-initial.star-starred svg use:nth-child(1) { opacity: 0 !important; } .sidePanel__list__item-task .menu__item ws-icon.star-toggle.star-initial.star-starred svg use:nth-child(2) { opacity: 0 !important; } .sidePanel__list__item-task .menu__item ws-icon.star-toggle.star-initial.star-starred svg use:nth-child(3) { opacity: 1 !important; } /* INITIAL OPEN UNSTARED HOVER */ .sidePanel__list__item-task .menu__item:hover ws-icon.star-toggle.star-initial { --icon-color: var(--colorize-lbl-yelloworange); } .sidePanel__list__item-task .menu__item ws-icon.star-toggle.star-initial.star-starred svg use:nth-child(1) { opacity: 1 !important; } .sidePanel__list__item-task .menu__item ws-icon.star-toggle.star-initial.star-starred svg use:nth-child(2) { opacity: 0 !important; } .sidePanel__list__item-task .menu__item ws-icon.star-toggle.star-initial.star-starred svg use:nth-child(3) { opacity: 0 !important; } /* STARRED */ .sidePanel__list__item-task .menu__item ws-icon.star-toggle.star-starred { opacity: 1; transition: none; --icon-color: var(--colorize-lbl-yelloworange); } .sidePanel__list__item-task .menu__item ws-icon.star-toggle.star-starred svg use:nth-child(1) { opacity: 0 !important; } .sidePanel__list__item-task .menu__item ws-icon.star-toggle.star-starred svg use:nth-child(2) { opacity: 1 !important; } .sidePanel__list__item-task .menu__item ws-icon.star-toggle.star-starred svg use:nth-child(3) { opacity: 0 !important; } /* STARRED HOVER */ .sidePanel__list__item-task .menu__item:hover ws-icon.star-toggle.star-starred { --icon-color: var(--base-txt-btn-w); } .sidePanel__list__item-task .menu__item:hover ws-icon.star-toggle.star-starred svg use:nth-child(1) { opacity: 0 !important; } .sidePanel__list__item-task .menu__item:hover ws-icon.star-toggle.star-starred svg use:nth-child(2) { opacity: 0 !important; } .sidePanel__list__item-task .menu__item:hover ws-icon.star-toggle.star-starred svg use:nth-child(3) { opacity: 1 !important; } /* UNSTARRED */ .sidePanel__list__item-task .menu__item ws-icon.star-toggle svg use:nth-child(1) { opacity: 1 !important; } .sidePanel__list__item-task .menu__item ws-icon.star-toggle svg use:nth-child(2) { opacity: 0 !important; } .sidePanel__list__item-task .menu__item ws-icon.star-toggle svg use:nth-child(3) { opacity: 0 !important; } /* UNSTARRED HOVER */ .sidePanel__list__item-task .menu__item:hover ws-icon.star-toggle { --icon-color: var(--colorize-lbl-yelloworange); } .sidePanel__list__item-task .menu__item:hover ws-icon.star-toggle.star-starred { --icon-color: var(--base-txt-btn-w); } .sidePanel__list__item-task .menu__item:hover ws-icon.star-toggle.star-starred svg use:nth-child(1) { opacity: 0 !important; } .sidePanel__list__item-task .menu__item:hover ws-icon.star-toggle.star-starred svg use:nth-child(2) { opacity: 0 !important; } .sidePanel__list__item-task .menu__item:hover ws-icon.star-toggle.star-starred svg use:nth-child(3) { opacity: 1 !important; } .sidePanel__list__item-task .menu__item:has(.star-toggle) { margin-left: -4px; margin-right: -2px; } ws-icon.pin-toggle { transition: all 0.2s ease-in-out; } ws-icon.pin-toggle svg use:last-child { opacity: 0; transition: opacity 0.3s ease-in-out; } ws-icon.pin-toggle.pin-pinned { --icon-color: var(--base-btn-notice-minor); } .menu__item:hover ws-icon.pin-toggle:not(.pin-pinned) svg, .menu__item.selected ws-icon.pin-toggle:not(.pin-pinned) svg { animation: ws-icon-pin-set 0.3s ease-in-out 1; --icon-color: var(--base-btn-notice-minor); } .menu__item:hover ws-icon.pin-toggle.pin-pinned svg, .menu__item.selected ws-icon.pin-toggle.pin-pinned svg { animation: ws-icon-pin-unset 0.3s ease-in-out 1; --icon-color: var(--base-txt-primary); } ws-icon.pin-toggle.pin-pinned svg use:last-child, .menu__item:hover ws-icon.pin-toggle:not(.pin-pinned) svg use:last-child, .menu__item.selected ws-icon.pin-toggle:not(.pin-pinned) svg use:last-child{ opacity: 1; } .menu__item:hover ws-icon.pin-toggle.pin-pinned svg use:last-child, .menu__item.selected ws-icon.pin-toggle.pin-pinned svg use:last-child{ opacity: 0; } a.bookmark-withIcon.bookmark { ws-icon[name="star:star-solid"] { use { transition: fill .2s ease; } use:first-child { fill: var(--base-txt-muted); } use:last-child { fill: transparent; } } &:not(.clicked) { ws-icon[name="star:star-solid"]:hover { use:first-child { fill: transparent; } use:last-child { fill: var(--base-txt-muted); } } } &.bookmark-active { ws-icon[name="star:star-solid"] { use:first-child { fill: transparent; } use:last-child { fill: var(--colorize-lbl-yelloworange); } } &:not(.clicked) { ws-icon[name="star:star-solid"]:hover { use:first-child { fill: transparent; } use:last-child { fill: var(--colorize-lbl-orange); } } } } } span.bookmark-withIcon.bookmark { &:not(.bookmark-active) { display: none; } &.bookmark-active ws-icon[name="star-solid"] { --icon-color: var(--colorize-lbl-yelloworange); } } /* -------------------------------------------------------------------------------------------------------------------*/ span.ico, i.ico, a.ico, span.seen, a.seen, span.unseen, a.unseen { display: inline-block; width: 20px; height: 20px; vertical-align: middle; margin: -3px 2px -1px; } span.ico_r, span.ico_r2, i.ico_r, a.ico_r {float:right;margin: 0 0 0 4px;vertical-align:initial} span.ico_l, span.ico_l2, i.ico_l, a.ico_l { float:left; margin: 0 4px 0 0; vertical-align:initial} span.ico_c, i.ico_c, a.ico_c { display:block; margin: 0; vertical-align:initial} span.ico_a { position:absolute; right:-2px; top:0; margin:0} h1 span.unseen, h1 span.seen { margin-right:-5px} /* -------------------------------------------------------------------------------------------------------------------*/ #content {padding: 24px 32px 12px 32px;flex-grow: 1; position: relative; } body.withTaskPanel #content {padding: 24px 32px 64px 32px;} body[data-page=users_tasks] #content, body[data-page=calendar] #content, body[data-page=kanban] #content, body[data-page=kanban_days] #content, body[data-page=projects_kanban] #content, body[data-page=gantt] #content {padding:0;} body[data-page=report] #content { padding-top:0 } /* -------------------------------------------------------------------------------------------------------------------*/ .clear {clear:both;height:0;overflow:hidden;font-size:0} .line {height:1px;overflow:hidden;font-size:1px;background:var(--base-line-alt-cardbrd);margin-bottom:15px} .line0 { height:1px; overflow:hidden} .line2 {height:2px;overflow:hidden;font-size:1px;background:var(--base-line-alt-cardbrd);margin:15px 0 15px 0} .line2__ {margin:-15px 0 -1px 0;height:1px;overflow:hidden} .line-withDots { margin: 8px 32px; position:relative; overflow: visible; background:var(--base-hlt-g-notr-focus); opacity:0.6; } .line-withDots:before, .line-withDots:after { content:''; position:absolute; border:2px solid var(--base-hlt-g-notr-focus); top:-2px; border-radius:4px; width: 1px; height: 1px; } .line-withDots:after { right:0; } .line-withTextDots { margin: 8px 0; position: relative; overflow: visible; opacity: unset; color: var(--base-txt-tertiary); font: 12px/20px var(--font-base); height: unset; background: unset; text-align: center; display: flex; align-items: center; gap: 4px; padding: 0 5px; &:before, &:after { content: ''; border-top: var(--screen-px) solid var(--base-hlt-g-notr-focus); opacity: .6; flex: 1; } .in { &:before, &:after { content:''; position: absolute; border: 2px solid var(--base-hlt-g-notr-focus); background: var(--base-hlt-g-notr-focus); border-radius: 4px; width: 1px; height: 1px; opacity: .6; top: 50%; transform: translateY(-50%); } &:before { left: 0; } &:after { right: 0; } } } /* -------------------------------------------------------------------------------------------------------------------*/ ol.todo { padding:10px 0; margin:0 0 0 0; } ol.todo li {margin:0 0 0 20px; font-size:14px; padding:5px 0 5px 47px; color:var(--base-txt-muted); border-bottom:1px dashed var(--base-line-primary); list-style:none; cursor:pointer} ol.todo li:first-child {border-top:1px dashed var(--base-line-primary)} ol.todo li input {float:left;margin:2px; opacity:0;position: absolute;} ol.todo li label {float:left;margin:0 0 -5px -25px; width:20px; height:20px;padding:0;position:relative;background: none !important;} ol.todo li label ws-icon { position: absolute; svg { fill: var(--base-hlt-w-invert-minor); use:first-child { display: inline; } } } ol.todo li:hover label ws-icon { svg { fill: var(--base-hlt-invert); use { display: none; } use:nth-child(3) { display: inline; } } } ol.todo li.done label, ol.todo li.done:hover label { svg { use { display: none; } use:nth-child(3) { display: none; } use:nth-child(8) { display: inline; fill: var(--base-hlt-invert); } use:nth-child(11) { display: inline; fill: var(--base-txt-accent); } } } ol.todo li.done_td label, ol.todo li.done_td:hover label { svg { use { display: none; } use:nth-child(3) { display: none; } use:nth-child(9) { display: inline; fill: var(--lbl-today-minor); } use:nth-child(11) { display: inline; fill: var(--base-txt-accent); } } } ol.todo li.done_yd label, ol.todo li.done_yd:hover label { svg { use { display: none; } use:nth-child(3) { display: none; } use:nth-child(9) { display: inline; fill: var(--lbl-yesterday-minor); } use:nth-child(11) { display: inline; fill: var(--base-txt-accent); } } } ol.todo li {color:var(--base-txt-secondary)} ol.todo li span.todo_status {font:11px var(--font-base); margin:0 0 0 5px} ol.todo li span.todo_status b {font:11px var(--font-base); color:var(--base-txt-primary); background:var(--base-cont-low); padding:2px 10px; border-radius:3px; margin:0 5px 0 0} ol.todo li.done {} ol.todo li.done {color:var(--base-txt-tertiary); text-decoration:line-through; text-decoration-color:var(--base-txt-tertiary);} ol.todo li:hover {color:var(--base-txt-link-major)} ol.todo li.done:hover {color:var(--base-txt-tertiary)} ol.todo li:before {content: counter(ol-counter); font:12px/20px var(--font-base); color:var(--base-txt-ghost); margin:0 0 0 -47px; width:16px; } ol.todo li:first-child:last-child:before {display:none} ol.todo li:first-child:last-child {padding:5px 0 5px 25px} ol.todo .ani_time {user-select: none;float: left;padding: 0;width: 20px;height: 20px;box-shadow: none;--icon-size: 16px;background: none;--icon-color: var(--base-txt-tertiary);margin-right: -3px; } ol.todo .ani_time:hover {background: none;box-shadow: none;} ol.todo .time_space {float:right;margin: 0 0 0 8px;} ol.todo li:not(:hover) .ani_time {visibility: hidden} ol.todo .ani_time:not(:hover) ws-icon use:last-child { display: none; } ol.todo .ani_time:hover ws-icon use:first-child { display: none; } ol.todo .ani_time:hover ws-icon { --icon-color: var(--costs-money-major); } ol.todo .time { font: 9px / 12px var(--font-base); font-family: monospace; border: 1px solid var(--costs-time-major); color: var(--costs-time-major); padding: 1px 4px 0; border-radius:3px; margin: 2px 0; display:inline-block; } ol.todo .time:empty {display: none} ol.todo .time:hover { background:var(--costs-time-major); color:var(--white-primary); border-color: var(--costs-time-major); } ol.todo .time:not(:empty) ~ .ani_time { display:none; } span.invite { box-shadow: var(--shadow-cont-major-lineonly-inside); color: var(--colorize-lbl-txt-primary); border-radius: 12px; display: inline-block; font: 12px/18px var(--font-base); margin: -1px 0 0 0; padding: 3px 12px 3px 5px; white-space: nowrap; max-width: 260px; text-overflow: ellipsis; overflow: hidden; vertical-align: middle; background: var(--base-hlt-hover); } span.invite ws-icon[name=mail] { margin-right: 4px; } span.invite .av_sm {transform: scale(0.9166); float: left; margin: -3px 6px -3px -5px; } span.invite > ws-icon:first-child { float: left; margin: -2px 6px -3px -4px; width: 22px; height: 22px; background: var(--base-hlt-g-selected); border-radius: 100%; --icon-size: 16px; } span.invite > ws-icon[name=block]:first-child { background: var(--base-hlt-w-selected); --icon-color: var(--base-txt-btn-w); } span.invite.invite_me { background:var(--base-hlt-w-hover); color: var(--colorize-lbl-txt-primary); } .page_content span.invite:hover {color: var(--base-txt-accent);cursor:pointer;background: var(--post-ment-hover);} .page_content span.invite.invite_me:hover { background:var(--base-hlt-w-pressed); color: var(--colorize-lbl-txt-accent); } .page_content .ico + span.invite:before {display:none} span.contact { box-shadow: var(--shadow-cont-major-lineonly-inside); color: var(--colorize-lbl-txt-primary); border-radius: 4px 12px 12px 4px; display: inline-block; font: 12px/18px var(--font-base); margin: -1px 0 0 0; padding: 3px 12px 3px 5px; white-space: nowrap; max-width: 260px; text-overflow: ellipsis; overflow: hidden; vertical-align: middle; background: var(--post-contact-bg); } span.contact:hover {color: var(--colorize-lbl-txt-accent);cursor:pointer;background: var(--post-contact-hover);} a.inline_task { box-shadow: var(--shadow-cont-major-lineonly-inside); color: var(--colorize-lbl-txt-primary); border-radius: 4px 12px 12px 4px; display: inline-flex; font: 12px/18px var(--font-base); margin: -1px 0 0 0; padding: 3px 12px 3px 5px; white-space: nowrap; max-width: 260px; text-overflow: ellipsis; overflow: hidden; vertical-align: middle; background: var(--base-hlt-hover); } a.inline_task ws-icon, a.inline_task ws-icon svg, span.contact ws-icon, span.contact ws-icon svg { width: 18px; height: 18px; --icon-size: 18px; } a.inline_task ws-icon:first-child, span.contact ws-icon:first-child { margin-right: 4px; } .page_content a.inline_task { display: inline-flex; gap: 4px; ws-icon:first-child { margin: 0; } } a.inline_task ws-icon[name="cancel_sm:cancel_sm-solid"], span.invite ws-icon[name="cancel_sm:cancel_sm-solid"], span.contact ws-icon[name="cancel_sm:cancel_sm-solid"] {display:none} a.inline_task:hover, span.invite:hover {color: var(--colorize-lbl-txt-accent) !important;background: var(--base-hlt-pressed);} a.inline_task span { overflow: hidden; text-overflow: ellipsis; } /* ----------- MinifyCSS: LIGHT THEMEMinifyCSS: LIGHT THEME ----------- *//*----------- MinifyCSS: STOPMinifyCSS: STOP ----------- */ a.inline_file { color:var(--base-txt-link-minor); border-bottom:1px dashed var(--base-txt-link-minor)} a.inline_file:hover { color:var(--base-txt-link-major); border-bottom:1px dashed var(--base-txt-link-major)} /* -------------------------------------------------------------------------------------------------------------------*/ /* Emotions */ .taskView__group .likes { margin: 0; display: flex; gap: 16px; } .menu__like { height: 32px; width:48px; display: flex; align-items: center; justify-content: center; } @media (max-width: 480px) { .menu__like { padding:16px; } .menu__like ws-icon { transform:scale(1.6) } } @media (max-width: 400px) { .menu__like { padding: 10px; } } .menu__like ws-icon, .menu__like ws-icon svg { height: 24px; width:24px; } .menu-likes .likes:not(.like_details) { display: flex; flex-wrap: wrap; justify-content: space-between; } .menu-likes .likes a.active { box-shadow: 0 0 0 1px var(--base-txt-primary) inset; border-radius: 6px; } .menu-likes .likes a:hover { background: var(--base-hlt-g-hover); border-radius: 6px; } .likes a.like_ { float: left; font: 12px/24px var(--font-base); color: var(--base-txt-tertiary) } .likes ws-icon, .likes a.like_ ws-icon svg { width: 24px; height: 24px; } .likes a.like_:hover { border-radius: 4px; color: var(--base-txt-link-minor) } .likes a.like_:hover ws-icon { /* transform: scale(1.4, 1.4); */ transition: all 0.2s ease; } .likes a.like_.like_act:hover ws-icon { /* transform: scale(0.8, 0.8); */ transition: all 0.2s ease; } .like_details { padding: 0 0 0 28px; font: 13px/24px var(--font-base); color: var(--base-txt-secondary); overflow: hidden; } .menu-likes .like_details { height: auto; } .my_likes .menu__item .flex_gap + .space ws-icon { --icon-size: 16px; --icon-color: var(--base-txt-btn-w); } .menu-likes .like_details div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .menu-likes .like_details .av_sm { transform: scale(0.8) } .like_details i { display: block; color: var(--base-txt-tertiary); margin: 0 0 5px -24px; } .likes a.like_ i { font-style: normal; margin: 0 5px 0 2px } .likes a.ico_l { margin: 2px 0 2px 2px !important; } .likes a.ico_l_emo { margin: 17px 0 2px 17px !important } body.desktop .commentList__item .likes a.ico_l { opacity: 0; transition: opacity 0.3s ease; } body.desktop .commentList__item:hover .likes a.ico_l { opacity: 1 } .commentList__item .likes, .task .likes { margin-left: -5px; margin-top: 10px; display: flex; flex-wrap: wrap; gap: 4px; height: 40px; align-items: center; } .likes a.emotion { font: italic 13px/30px var(--font-base); color: var(--base-txt-tertiary) } .likes a.emotion span.ico_l { margin: 0 5px 0 0 !important } .it_likes { float: left; margin: -2px 0 0 5px; } #log .it_likes { margin: -5px -7px; } .content_replace { display: none } .taskView__params__item .likes a.like_ span { transform: scale(0.8, 0.8); margin:-3px; } .taskView__params__item .likes a.like_:hover span { transform: scale(1, 1); transition: all 0.2s ease; } .taskView__params__item .likes a.like_:hover span.like_act { transform: scale(0.64, 0.64); transition: all 0.2s ease; } .taskView__params__item .likes .av_sm { transform: scale(0.833, 0.833); margin: -2px; } /* -------------------------------------------------------------------------------------------------------------------*/ /* Avatars*/ img.av_sm { border-radius:12px} img.av_nm { border-radius:24px} img.av_36 { width:36px;height:36px;border-radius: 25%; } .av_svg {width: 24px;height: 24px;border: 1px solid var(--base-txt-tertiary);border-radius: 14px;box-sizing: border-box} .av_svg {border:1.5px dotted var(--base-txt-secondary);} .av_svg[name=people] {border:1px solid var(--base-txt-secondary);} .av_svg svg {width: 14px;height: 14px;} span.av_nm { display: inline-block; width:48px; height:48px; background: var(--base-cont-top); border-radius:24px; text-align: center; font: 18px/48px var(--font-base) !important; color: var(--white-accent); overflow: hidden; text-transform: uppercase; -webkit-user-select: none; user-select: none; } span.av_sm {display:inline-block;width:24px;height:24px;background:var(--base-cont-top);border-radius: 24px;text-align:center;font: 600 10px/25px var(--font-base) !important;letter-spacing: 0.5px;color:var(--white-accent);overflow:hidden;text-transform:uppercase;} span.av_36 {display:inline-block;width:36px;height:36px;background:var(--base-cont-top);border-radius: 25%;text-align:center;font: 600 14px/36px var(--font-base) !important;letter-spacing: 0.5px;color:var(--white-accent);overflow:hidden;text-transform:uppercase;} span.av_s { background-image:url(/assets/img/color/pro_avatars.svg); background-size:120px 336px;} img.av_nm { background-image:url(/assets/img/color/pro_avatars.svg); } span.av_def0, span.av_def1 { background:url(/assets/img/color/separators_iconset.svg) -63px -363px; border-radius: 24px !important } span.av_def2 { background:url(/assets/img/color/separators_iconset.svg) -33px -363px; } span.av_def6 { background:var(--base-hlt-hover) url(/assets/img/color/iconset.svg) 0 -1200px; width:20px; height:20px; border:2px solid var(--base-hlt-hover)} span.av_def4 { background:var(--base-hlt-hover) url(/assets/img/color/iconset.svg) -120px -740px; width:20px; height:20px; border:2px solid var(--base-hlt-hover); box-shadow:0 0 0 1px var(--base-hlt-hover)} span.av_def3 {width:24px;height:24px;} span.av_def3:before {content:'';display:block; margin:2px; } span.av_def_big3:before {content:'';display:block; margin:14px; } span.av_def3:before, span.av_def_big3:before {background: url(/assets/img/color/iconset.svg) -80px -920px;width:20px;height:20px;} span.av_def5 {background:var(--base-cont-low);} .modal span.av_def5 { background:var(--base-cont-mod-low)} span.av_def5:before {content:''; margin:14px; display:block;width: 20px;height: 20px;background: url(/assets/img/color/iconset.svg) no-repeat -60px -560px;} span.av_def7 {width:24px;height:24px; background:var(--base-hlt-easy); border-radius:12px;} span.av_def7:before {content:'';display:block; margin:2px; } span.av_def7:before {background: url(/assets/img/color/iconset.svg) -40px -540px;width:20px;height:20px;} span.av_def_big0 {width:20px;height:20px;background: var(--base-hlt-hover) url(/assets/img/color/iconset.svg) no-repeat -40px -540px;margin: 14px;transform: scale(1.5);box-shadow: 0 0 0 6px var(--base-hlt-hover);position: static;display: block;border-radius: 100% !important;} span.av_def_big3 {background: var(--base-hlt-hover);width:48px;height:48px;} /* -------------------------------------------------------------------------------------------------------------------*/ .drop_select { display: flex; height: 32px; background: var(--inp-hlt-bg); border-radius: 6px; box-shadow: 0 0 0 1px var(--inp-hlt-brd) inset; margin: 0 0 15px 0; font: 14px/20px var(--font-base); color: var(--base-txt-primary); white-space: nowrap; overflow: hidden; position: relative; padding: 0 8px; flex-wrap: nowrap; flex-direction: row; align-items: center; } .drop_select.flex_wrap { flex-wrap: wrap; } .drop_select .in { padding: 0 8px; flex-grow: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .drop_seldel { background: var(--base-hlt-w-pressed); } .drop_seldel small { color: var(--base-txt-btn-w) } a.drop_select_gray { background: var(--inp-cont-low); box-shadow: 0 0 0 1px var(--inp-cont-brd) inset; color: var(--base-txt-primary); } span.drop_select { background: var(--inp-cont-low); box-shadow: 0 0 0 1px var(--inp-cont-brd) inset; color: var(--base-txt-primary); } a.select_h4 { float: right; width: 110px; margin: -7px 0; } a.select_h4a { float: right; width: 180px; margin: -7px 0; } .drop_select .ico_l { margin: 0 7px 0 0 } .drop_select .av_sm { float: left; margin: -2px 10px -2px 0 } .drop_select .r { position: absolute; right: 30px; top: 5px; font: 13px/20px var(--font-base); background: var(--inp-hlt-bg); padding: 0 0 0 5px } a.select_h4 .r { right: 8px; } a.drop_select:hover { color: var(--base-txt-link-minor) } a.drop_select_gray:hover { color: var(--base-txt-primary); } a.drop_seldel:hover { color: var(--base-txt-max) } .drop_select span.drop { background-color: var(--inp-hlt-bg); } .drop_select_gray span.drop { background-color: var(--inp-cont-low); background-position: -365px -155px } .drop_select_gray:hover span.drop { background-position: -365px -95px } .drop_seldel span.drop { background-color: var(--base-hlt-w-pressed); border-color: var(--base-hlt-w-pressed); background-position: -365px -155px } .drop_big_select .drop_select { padding: 12px 30px 12px 15px; background: var(--base-cont-mod-top); } .drop_big_select .drop_select .drop { background-color: var(--base-cont-mod-top); border-color: var(--base-cont-mod-top); } .drop_select.drop_select--auto-height { padding-right: 36px; } .drop_select.drop_select--auto-height .in { display: block; overflow: initial; white-space: normal; } .drop_select.drop_select--auto-height .in + ws-icon { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); } /* -------------------------------------------------------------------------------------------------------------------*/ .button_r { float:right; margin:0 0 0 12px} .button_l { float:left; margin:0 12px 0 0} .button_w480 .button_r {margin-top:0} .buttons_center {text-align:center;padding:15px 0;} .setup_wide .buttons_center { padding:0} .form_wbutton .buttons_center {display:none} .buttons .ico_clear {margin-top:1px} .buttons a.inline { color:var(--base-txt-secondary)} .buttons a.inline:hover { color:var(--base-txt-link-minor)} .buttons_r {text-align:right;} .buttons_r span.or {display:none } .buttons_r input[type="submit"], .buttons_r input[type="button"] {padding:3px 20px} .button b.but_cnt, ws-btn .but_cnt {color:var(--base-txt-link-minor); /* border-left:1px solid var(--base-line-primary); */ padding: 6px 0; margin: -6px -15px -6px 5px;width: 50px;text-align: center;display: inline-block;} .buttons_checkboxes {background:var(--base-cont-mod-low); padding:15px 15px 10px} .buttons_center_white {background:var(--base-cont-top);font:12px/40px var(--font-base);height: 48px;width:400px;margin:0 auto;padding:14px 20px 14px 10px;border-radius:8px;} .buttons_center_white .notify_block {margin: 14px 10px;} .buttons_center.tagsAdmListing__buttons {position:relative; width:450px; margin:0 auto; height:40px; padding:10px 0 ;} a.button_slider {position: relative; font-weight: normal; max-width: 190px; padding: 0 5px; margin: -6px 2px 0 12px !important; box-shadow: 0 0 4px var(--base-line-secondary) !important} /*whitout button_reopen?????*/ a.button_slider.short {max-width: 160px; margin: -6px 2px 0 10px !important} span.button_slider {position: relative; left: -6px; padding: 6px 10px 6px 10px; border-radius: 4px; color: var(--base-txt-secondary); background: var(--base-cont-mod-top); width: calc(100% - 20px); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: 0.4s} a.button_slider:hover span.button_slider {left: 6px} .modal__content .modal__taskClose .sum_progress {padding: 12px 20px; background: none;} .modal__content .modal__taskClose .sum_progress .td_name {width: 110px} .modal__content .modal__taskClose .progress, .modal__content .modal__taskClose .progress_na {width: 100px} .modal__content .modal__taskClose .sum_progress_b .bar .progress_na, .modal__content .modal__taskClose .sum_progress_bm .bar .progress, .modal__content .modal__taskClose .sum_progress_b .bar .progress {margin: 0} .modal__content .modal__taskClose .data_list_body {padding: 12px 28px;} .modal__content .modal__taskClose .data_list_body .in {transition: all .15s;cursor: pointer;border-radius: 12px;background: var(--base-cont-mod-trans-low);/* box-shadow: var(--shadow-cont-minor-outline); */} .modal__content .modal__taskClose .data_list_body .in:hover {background: var(--base-hlt-hover); box-shadow: var(--shadow-brd-focus-alt)} .modal__content .modal__taskClose .sum_progress_b { padding: 12px 16px; height: unset; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; margin: 0; align-items: center; .td_name { grid-row: 1 / -1; display: flex; flex-direction: column; justify-content: space-around; .bar { margin: 0; } } .td_time, .td_money { font: var(--font-ui-18-title-2-bold); line-height: 18px; font-variant-numeric: proportional-nums; height: 18px; padding-right: 0; i { font: var(--font-ui-12-mini-reg); line-height: 18px; padding: 0 5px 0 0; } } } .modal__content .modal__taskClose.time_or_money .sum_progress_b { grid-template-rows: auto; } .modal__content .modal__taskClose .buttons_info {padding: 10px; background: var(--base-cont-mod-top); border-bottom-left-radius: 8px; border-top: 1px solid var(--base-cont-mod-low); border-bottom-right-radius: 8px} .modal__content .modal__taskClose .buttons_info a {display: inline-block; vertical-align: top; font: 13px/20px var(--font-base); padding: 3px 10px 3px 6px; border-radius: 3px; white-space: nowrap; border: none; float: right; margin: -2px 0 0 10px; box-shadow: none; background: none} .modal__content .modal__taskClose .buttons_info a span.ico_summ {text-align: center; transform: scale(0.9); margin-top: -1px} .modal__content .modal__taskClose .sum_progress_b .bar .b_fl {margin: 0} .modal__content .modal__taskClose .sum_progress_b:hover .bar.bar_max_money .b_fl, .modal__content .modal__taskClose .sum_progress_b:hover .bar.bar_max_time .b_fl {display: block} .modal__content .modal__taskClose .buttons_info a:hover span.ico_summ {color: var(--base-txt-link-major)} .modal__content .modal__taskClose .buttons_a {padding-bottom: 30px} .modal__content .buttons {margin:0;padding: 12px 28px 28px;height: 36px;overflow:hidden;clear:both} .modal__content .buttons.flex_row { gap: 12px; } .modal__content .buttons_wline {border-top: 0.5px solid var(--base-line-tertiary);} .modal__content .buttons_r .button, .modal__content .button_r { margin:0 0 0 10px} .modal__content .buttons_center {height:40px; padding-top:10px;} .modal__content .buttons_gray {background:var(--base-cont-mod-low);} .modal__content div.buttons_a {position:relative;} .modal__content div.buttons_a .button {float:right;margin: -6px 0 -6px 12px;} .modal__content div.buttons_a .button ~ .button {margin-right:10px;} .modal__content div.buttons_a .button_l {float:left; margin:-6px 12px -6px 0} .modal__content div.buttons_a .button_close {margin-left: 0} .modal__content .buttons p.wlabel {padding:2px 0} .modal__content .buttons p.wlabel label {padding:5px 8px; } .modal__content .buttons p.wlabel label.act {background:var(--base-hlt-alt-label); color:var(--base-txt-primary)} .modal__content .button { margin:0 10px 0 0} .modal__content .button_grad {margin:0 auto;min-width:240px;} .modal__content .or { font:11px var(--font-base); color:var(--base-txt-tertiary)} .modal__content .or a { margin:0 6px; color:var(--base-txt-secondary); padding:1px 4px; } .modal__content .or a:hover { background:var(--base-txt-tertiary); color:var(--white-max); } .modal__content .or a.delete:hover { background:var(--base-txt-alert-minor); color:var(--white-max); } .newsletter_buttons { margin:0 0 15px 0; padding:15px 0 5px 0} .newsletter_buttons .button {width:240px} .modal[data-group=nohead] .buttons {padding:15px 26px 26px;} @media (max-width: 480px) { .modal__content .buttons.buttons-hide { display: none; } } span.cnt_all { font: var(--font-ui-12-mini-reg);padding: 2px 4px;border-radius: 4px;margin:0 0 0 4px; } span.cnt_unseen { padding: 2px 4px; border-radius: 12px; font-family: var(--font-base); font-size: 10px; font-style: normal; font-weight: 510; line-height: 12px; letter-spacing: 0.12px; } body.mobile #mass_n_filt, body.mobile .listing__days {transition: all 1s ease !important} span.cnt_fav {font:bold 11px/20px var(--font-base); padding:1px 5px; border-radius:4px; margin:0 0 0 4px; cursor:pointer} .commentListPanel__filter .cnt {font:bold 14px/20px var(--font-base); float:left; margin:0 10px 0 0; min-width:20px; text-align:center} .commentListPanel__filter span.cnt_more {border-radius:8px 0 0 8px} .commentListPanel__filter span.cnt_more2 {margin:0; border-radius:0 8px 8px 0} span.cnt_warm, a.cnt_warm, span.cnt_hot, a.cnt_hot, span.cnt_arch, a.cnt_arch, span.cnt_new, span.cnt_queue {font: var(--font-ui-12-mini-reg);padding: 2px 4px;border-radius: 4px;margin:0 0 0 4px;} span.cnt_pro {font: 11px/20px var(--font-base);padding: 0px 5px;border-radius:4px;margin:0 0 0 4px;} span.free { font: 500 10px/16px var(--font-base); padding: 0 6px; border-radius: 6px; margin: 0 0 0 4px; background: var(--base-txt-btn-c); color: var(--base-txt-alt-light); } span.cnt_all.no_border {border-color: transparent;} /* -------------------------------------------------------------------------------------------------------------------*/ span.terms_label_warm, span.terms_label_hot, span.terms_label_today, span.terms_label_remain, span.terms_label_wait, span.terms_label_related, span.common_label_progress, span.zzz, span.label_arch3 { padding: 0 6px; white-space:nowrap; font: var(--font-ui-10-nano-reg); border-radius: 12px; display:inline-block; line-height: 15px; } span.terms_label_warm_easy, span.terms_label_hot_easy, span.terms_label_wait_easy, span.terms_label_related_easy, span.terms_label_done_delay, span.terms_label_today_easy, span.terms_label_tomorrow_easy, span.terms_label_normal { white-space:nowrap; font: var(--font-ui-12-mini-med); border-radius: 4px; display:inline-block; padding: 0 2px; } span.terms_label_today_easy, span.terms_label_tomorrow_easy { padding: 0 4px; } span.zzz { border-radius:4px } span.common_label_progress { white-space:nowrap; font-size:12px } span.zzz, span.label_arch3 { vertical-align:bottom; } span.label_wait2 { background:var(--projcond-muted-bg); color:var(--projcond-muted-txt); font:12px/22px var(--font-base); height:22px; padding:1px 7px; vertical-align:top; margin:-1px 0; display:inline-block; border-radius:4px; vertical-align:top } span.label_wait2 span.ico_l { margin:0 !important } span.label_arch2, a.label_arch2 { background:var(--projcond-archive-bg); color:var(--projcond-archive-txt) !important; font:12px/22px var(--font-base); padding:4px 7px; vertical-align:top; margin:-1px 0 } .alert_archive { background:var(--projcond-archive-bg); border-top:2px solid var(--projcond-archive-txt); padding:10px 0; font:13px/20px var(--font-base); text-align:center; color:var(--projcond-archive-txt); position:fixed; bottom:0; left:0; width:100%; z-index:1010; } .alert_archive a { color:var(--projcond-archive-txt); border-bottom:1px dashed } .but_archive { float:right; background:var(--projcond-archive-bg); border-bottom:2px solid var(--projcond-archive-txt); padding:2px 15px 2px 5px; font:bold 15px/30px var(--font-base); text-align:center; color:var(--projcond-archive-txt); text-shadow:none; border-radius:5px } .but_archive:hover { color:var(--projcond-archive-txt) } .but_archive .ico_archive2 { margin-right:10px } /* -------------------------------------------------------------------------------------------------------------------*/ .page_content {word-wrap: break-word;overflow:hidden;line-height: 24px;} .page_content li {line-height:20px;} .page_content b {font-weight:bold} .page_content ws-emoji {width: 18px;height: 18px;} .page_content scode { display: inline-block; background: var(--post-code-bg); color: var(--base-txt-alert-major); padding: 2px 4px; box-shadow: var(--shadow-brd-enable); border-radius: 4px; word-break: break-word; font: 400 0.8125rem/123.08% var(--font-mono); } .page_content hr { margin: 20px auto; width: 12px; height: 2px; background: var(--base-txt-muted); border: none; position: relative; overflow: visible; border-radius: 1px; } .page_content hr:before, .page_content hr:after { position: absolute; content: ''; display: block; width: 12px; height: 2px; background: var(--base-txt-muted); border-radius: 1px; } .page_content hr:after { left: 20px; } .page_content hr:before { left: -20px; } blockquote, address {background: var(--post-quote-bg);margin: 12px 0 12px 0; padding:12px 12px 12px 16px; font:13px/20px var(--font-base); color:var(--post-quote-txt);border-radius: 12px;} blockquote a, address a {color:var(--base-txt-secondary)} blockquote:before, address:before{content: '\201d';font:bold 80px/30px var(--font-serif);color:var(--post-quote-bg);float:right; margin:14px -6px 0 -48px; } pre { position:relative;max-width:100%;padding:0;margin:12px 0 12px 0;border-radius: 12px; background: var(--post-code-bg); color:var(--base-txt-primary); font-family: var(--font-mono); font-size: 13px; line-height: 20px; tab-size:4;-moz-tab-size:4;-o-tab-size:4;overflow: visible;user-select: text;white-space: pre-wrap;word-wrap: break-word;text-size-adjust: 100%;-webkit-text-size-adjust: 100%; } @media screen and (min-width: 481px) { .page_content pre::after {content: ''; position: absolute; top: 0; left: 100%; width: 46px; height: 100%;} } pre code {display:block;padding: 10px 15px;} code.hljs {padding:10px 15px; background: none;color:inherit; font:inherit;} .page_content code.hljs {padding: 12px 12px 12px 16px;} #modal__previewFrame pre {margin:0; border-radius: 0; background:var(--base-cont-mod-top);} #modal__previewFrame code.hljs { box-sizing: border-box; -webkit-user-select: text; user-select: text; * { -webkit-user-select: text; user-select: text; } > :last-child {padding-bottom: 24px;} } pre ws-btn {position: absolute; left: calc(100% + 8px); z-index: 1; opacity: 0; transition: 0.2s ease;} pre:hover ws-btn {opacity: 1;} pre .btn {height: 44px; padding: 0 8px; border-radius: 12px;} pre .btn.btn-plain:hover {background: var(--post-code-bg);} @media (max-width: 480px) { pre ws-btn {right: calc(100% + 6px); left: unset; opacity: 1;} } /* -------------------------------------------------------------------------------------------------------------------*/ /* Unsorted */ .item_opac, .item_opac2 { opacity:0.5 } /* ----------- MinifyCSS: LIGHT THEMEMinifyCSS: LIGHT THEME ----------- */span.ico_plus_blue2:before, a.ico_plus_blue2:before {content:''; display:block; width:20px; height:20px; margin:0 0 -20px 0; background-color:var(--base-hlt-notr-hover); border-radius:10px; } a.ico_plus_blue:hover:before, a:hover span.ico_plus_blue:before, a:hover span.ico_plus_blue2:before, a.ico_plus_blue2:hover:before {content:''; display:block; width:24px; height:24px; margin:-2px -2px -22px -2px; background-color:var(--base-hlt-notr-hover); border-radius:12px; } /*----------- MinifyCSS: STOPMinifyCSS: STOP ----------- */ b.me, strong.me { background:var(--base-hlt-alt-notice); padding:1px 4px; margin:-1px 0; color:var(--base-txt-secondary); border-radius:10px;} a.delete {color:var(--base-txt-alert-minor);} a.delete:hover {color:var(--base-txt-alert-major);} span.date2 small { text-transform:none; font-size:10px} #tasks {position:relative;overflow: hidden;} #restrict_group_to .clear, #mailing_to .clear, #project_to .clear{ margin:5px 0 0 0} .modal__content #mailing_to, .modal__content #restrict_group_to {overflow:auto;} .modal__content #project_to {margin-top:0;position: relative;max-width: 640px;} span.nodate {color:transparent} span.join {font:italic 11px var(--font-base); color:var(--base-txt-muted)} span.ti {font:10px/20px var(--font-base); background:var(--base-txt-tertiary); color:var(--white-accent); padding:0 2px; vertical-align:top; margin:0 0 -10px 0} #file_links { background:var(--base-hlt-hover); color:var(--base-txt-link-minor); font:bold 12px/20px "courier new"; margin:0 0 0 5px; height:125px} #clip_link { font:bold 14px/20px var(--font-base); padding:10px !important; margin:-10px 0; height:80px;} .modal__content #tasks { border-bottom:none; min-height:300px} .modal__content .task #files_new {margin-bottom:1px} .drop_vis a.div, .file_links a.div {width:23px; height:20px; float:right; padding:5px 10px; margin:0 -10px -5px 0} .drop_vis a.div:last-child, .file_links a.div:last-child {border-left:1px solid var(--base-line-secondary); } .modal__content__block-gray {background:var(--base-cont-mod-low);} .modal[data-group=nohead] .modal__content__block {padding:26px 26px 0 26px;} .massdo_dis a.button {display:none} .master_ops2 {padding-bottom:0;} .modal__errorLine {padding:10px 15px;} .modal__content__block {padding: 12px 28px;} .modal__content__block-noPaddings {padding:0 28px;} .modal__content__block--pt8 {padding-top: 8px;} .modal__content__block--pi12 {padding-left: 12px; padding-right: 12px;} .ico_privbig .cnt {float:left; font:11px/14px var(--font-base); margin:15px -20px 0 20px; border:2px solid var(--base-btn-fresh-minor); background:var(--base-cont-top); padding:0 4px; border-radius:10px; color:var(--base-txt-tertiary)} .ico_privbig_act .cnt {border:2px solid var(--base-btn-alert-primary-minor); margin:15px -20px 0 18px; } .modal__content .scrollZone {overflow:auto;overflow-x: hidden;flex-grow: 1;flex-shrink: 1; align-content: flex-start;} .subtitle span.ico_act_sm {opacity:0; margin-left:-3px; transition:opacity 0.2s ease; -webkit-transition:opacity 0.2s ease} .subtitle:hover span.ico_act_sm, .subtitle.selected span.ico_act_sm {opacity:1} .subtitle a.ani_on span.ico_act_sm, .subtitle a.ani_off span.ico_act_sm {opacity:0; transition:opacity 1s ease 0.2s; -webkit-transition:opacity 1s ease 0.2s} .gtitle span.ico_act_sm {opacity:0; margin-left:-3px; transition:opacity 0.2s ease; -webkit-transition:opacity 0.2s ease} .gtitle:hover span.ico_act_sm, .gtitle.selected span.ico_act_sm {opacity:1} .gtitle a.ani_on span.ico_act_sm, .gtitle a.ani_off span.ico_act_sm {opacity:0; transition:opacity 1s ease 0.2s; -webkit-transition:opacity 1s ease 0.2s} div.reason {padding:0 20px 0 0; color:var(--base-txt-tertiary)} div.reason textarea {display:none; width:100%; padding:8px; resize:vertical; height:60px;background: var(--menu-inp-cont); border-color:var(--menu-inp-brd);} div.reason a {margin:0 0 0 5px; font:14px/20px var(--font-base);} .modal__header .av_place {display:none} .drop_v1 .v2, .drop_v2 .v1 { display:none} .data-context {height:0; overflow:hidden} body.mobile [data-right-click] {-webkit-user-select: none;-webkit-touch-callout: none; } .modal #setup {padding:0 18px; background:var(--base-cont-mod-low)} .modal #setup .setup_ {background:var(--base-cont-mod-top);border-radius: 4px;} .modal .setup .logo {} .group span.ico_group, .group span.ico_company {display:none} .label_client {background:var(--projcond-muted-bg);color:var(--projcond-muted-txt);font: 12px/20px var(--font-base);height: 20px;padding: 0 7px;margin: 0 8px 0 0;display: inline-block;border-radius: 4px;vertical-align:1px; float: left;} .label_client, .line_title_client span {background-color:var(--colors-pink-desat-500) !important; color:var(--colors-pink-desat-920) !important} .label_client_sm {background:var(--base-hlt-b-selected);color:var(--base-txt-btn-b);font: var(--font-ui-10-nano-med);height: 16px;padding: 0 4px;margin: 0 0 0 4px;display: inline-block;border-radius: 8px;vertical-align:1px;} font + .label_client {float:none} .project_members_big {text-align:center; height:48px;} .project_members_big .ico_user_add {transform:scale(2); margin:10px 10px 10px 30px; vertical-align:top} #super_error {position:fixed;left: 97px;top:20px;width:480px;padding:20px;background:var(--base-cont-note-major);box-shadow: 0 0 20px 2px var(--colors-alpha-dark-20);border-radius:10px;z-index:9999;white-space:pre;max-height: 90vh;overflow: auto;user-select: text;-webkit-user-select: text;} #super_debug {position:fixed;top: 0;left: 50%;padding: 5px 20px 10px;background:var(--base-txt-alt-dark-major);color: var(--colors-amber-500);border-radius: 0 0 16px 16px;z-index:9999;white-space:nowrap;margin: 0 0 0 -40px;font: 14px/20px var(--font-base);} #super_error ws-btn { position: absolute; top: 15px; right: 15px; z-index: 9999; } #drag_notice { background:var(--base-hlt-alt-notice); font: 14px/20px var(--font-base); position:fixed; left:50%; bottom: -120px; height: 70px; width:480px; margin:0 0 0 -240px; padding: 14px 20px 14px 20px; border-radius:8px; z-index:1001; box-sizing: border-box; box-shadow:0 2px 2px var(--colors-alpha-dark-20); transition: bottom 0.3s ease; } #drag_notice.act {bottom:20px} .ani_plus {transform:scale(2.2)} .ani_minus {transform:scale(0.8)} .user_workday_adjustDate { display: flex; gap: 8px; align-items: center; } .user_workday_adjustDate .picker_year.thickbox { cursor: pointer; box-sizing: border-box; border-bottom: 1px solid transparent; } .user_workday_adjustDate .picker_year.thickbox:hover { border-bottom: 1px dashed var(--base-txt-accent); } .workday_head {padding: 15px 24px;/* border-bottom: 0.5px solid var(--base-line-tertiary); */color:var(--base-txt-secondary)} .workday_head .img {float:right; padding:8px 0} .workday_head .r {float:right; text-align:right;padding:12px 10px 12px 0 } .workday_head .name {font:16px/20px var(--font-base); } .workday_head .name_1str {padding-top: 12px;} .workday_head .name span { font-weight:normal; color:var(--base-txt-secondary);} .workday_head .name b { font-weight:normal; color:var(--base-txt-accent); } .workday_head .total {float:right; font:14px/20px var(--font-base); margin:4px 0 0 0} .workday_head .total b {font:20px/20px var(--font-serif); color:var(--base-btn-alert-primary-minor); float:left; margin:-2px 8px 0 0} .workday_head .total span {color:var(--base-txt-primary)} .workday_head .info {font:12px/24px var(--font-base);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding: 10px;margin: -10px;} .workday_head .info input {border:none; background:var(--inp-hlt-bg); color:var(--base-txt-link-minor); font:bold 14px/28px var(--font-base); height:28px; width:30px; text-align:center; padding:0; border-radius:4px; margin:-10px 0; } .workday_head .info input::-webkit-outer-spin-button, .workday_head .info input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0;} .workday_head .info span.wd_cnt {font-weight:bold; color:var(--base-txt-primary)} .workday_head .legend {float:left; width:16px; height:16px; background:var(--base-hlt-hover); margin:2px 10px 2px 0; border-radius:4px; position:relative; transition:0.3s ease; box-shadow:0 0 0 0.5px var(--base-cont-mod-top)} .workday_head .legend + .legend {margin:2px 10px 2px -26px; } .workday_head .legend1 {background:var(--base-hlt-w-pressed); left:-2px; top:-2px;} .workday_head .legend2 {background: var(--cal-set-holiday);} .workday_head .legend3 {background: var(--cal-set-sickleave);left:-8px;top:-8px;} .workday_head .legend4 {background:var(--cal-set-vacation); left:8px; top:8px;} .workday_head .set_type2 .legend3 {z-index:1; left:2px; top:2px;} .workday_head .set_type2 .legend4 {left:-2px; top:-2px; opacity:0.5} .workday_head .set_type1 .legend3 {left:-2px; top:-2px; opacity:0.5} .workday_head .set_type1 .legend4 {left:2px; top:2px;} .workday_head a.set {color:inherit} .workday_head .set_type1 a.set_type2 {border-bottom:1px dashed} .workday_head .set_type2 a.set_type1 {border-bottom:1px dashed} .workday_head .sw_pre {float:none;display: inline-block;vertical-align: middle;height: 12px;margin: 0 4px 0 8px;} .workday_head .sw {margin:0;} .workday_head .gray {color:var(--base-txt-tertiary)} .workday_head .calendarLegend-holiday use { fill: var(--cal-set-vacation); } .workday_head .calendarLegend-illday use { fill: var(--cal-set-sickleave); } .workday_head .calendarLegend-dayoff use { fill: var(--cal-set-dayoff); } .workday_head .calendarLegend-holidays use { fill: var(--cal-set-holiday); } .workday_foot {padding: 15px 30px 15px;color:var(--base-txt-secondary);height:20px;text-align: center;} .workday_foot i {font-style:normal; color:var(--base-txt-primary) } .workday_foot input {border:none; width:0; height:0; padding:0; margin:0; overflow:hidden} .workday_foot .ico_remove {transform:scale(0.5); margin:-8px -8px -6px;} /** PLAN **/ .full_plan_tm .plan {font: 10px/20px var(--font-base); border: 1px solid var(--base-txt-tertiary); padding: 0 3px; border-radius: 2px; color: var(--base-txt-tertiary); margin: 0 0 0 5px} .modal__header .full_plan_tm .plan {vertical-align: middle} a.full_plan_tm:hover {color: var(--base-txt-link-minor)} a.full_plan_tm:hover .plan_set {border-color: var(--base-btn-primary-minor); background: var(--base-btn-primary-minor); color: var(--white-max)} a.full_plan_tm:hover .plan_time {border-color: var(--costs-time-major); background: var(--costs-time-major); color: var(--white-max)} a.full_plan_tm:hover .plan_money {border-color: var(--costs-money-major); background: var(--costs-money-major); color: var(--white-max)} .full_plan_tm.plan_m .plan_time {border-color: var(--costs-time-major); color: var(--costs-time-major)} .full_plan_tm.plan_m .plan_money {border-color: var(--costs-money-major); color: var(--costs-money-major)} /** PLAN **/ @media (max-width:600px) { .workday_head .r {float:none; text-align:left; margin:0 0 0 60px; padding:8px 0 24px} .workday_head .total {float:none; } .workday_head .img {float:left} } @media (max-width:480px) { .workday_foot {background: var(--base-cont-mod-top); border-top:0; height:40px;} } @media (min-width: 481px) { body.hide_header #mass_n_filt, body.hide_header .listing__days {transform: translateY(-83px)} } #pageFilter_range_embedded .menu {position: relative;margin: -50px auto 0;top: 0;left: 0;z-index: 0;} #hint span.leg_illday {color:var(--costs-time-minor)} #hint span.leg_holiday {color:var(--cal-set-vacation)} #hint span.leg_dayoff {color:var(--cal-set-dayoff)} #hint span.leg_extraday {color:var(--base-btn-alert-primary-minor)} #modal__alertOnError {display:none} .templates__wrapper { display:flex; gap: 20px; } .templates { display:flex; flex-direction: column; } .templates .template { border: 1px dashed #ddd; padding: 10px; margin: 0 0 -1px; } .swapper_pre { width: 20px; height: 20px; margin: 0 auto; } .swapper_v { display: none; opacity: 0; height: 100px; width: 20px; float: left; position: relative; margin: 10px 0; cursor: e-resize; } .swapper_v:hover { opacity: 1 } .swapper_v span { color: var(--base-txt-link-minor); background: var(--base-cont-top); width: 16px; height: 16px; display: block; border-radius: 10px; text-align: center; line-height: 15px; margin: 2px; position: relative } .swapper_v span:before { content: '↔'; } .swapper_v:before { display: block; content: ''; width: 4px; height: 100px; position: absolute; background: linear-gradient(0deg, var(--trans), var(--base-cont-top)); top: 8px; left: 8px } .swapper_h { display: none; opacity: 0; height: 20px; width: 200px; position: relative; margin: 0 -90px; cursor: n-resize; } .swapper_h:hover { opacity: 1 } .swapper_h span { color: var(--base-txt-link-minor); background: var(--base-cont-top); width: 16px; height: 16px; display: block; border-radius: 10px; text-align: center; line-height: 15px; position: relative; margin: 0 auto; top: 2px; } .swapper_h span:before { content: '↕' } .swapper_h:before { display: block; content: ''; height: 4px; position: absolute; background: linear-gradient(90deg, var(--trans) 0%, var(--base-cont-top) 50%, var(--trans) 100%); top: 8px; left: 0; right: 0; } .dashboard_flex_col { display: flex; flex-direction: column; } @media screen and (min-width: 1024px) { .swapper_v, .swapper_h { display:block } } .dashboard_bars { position: relative; /*height: 90px;*/ display: flex; } .dashboard_bars b { font: 600 18px/21px var(--font-base); } .dashboard_bars .bar { width: 50%; /*float: left;*/ padding: 10px; box-sizing: border-box; height: 90px; flex-grow: 1; } .dashboard_bars .bar > .bar_head { padding: 0 0 0 6px; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; } .dashboard_bars .bar > .bar_head .sum { padding-left: 8px; } .dashboard_bars .bar > .bar_head .gap { flex-shrink: 1; flex-grow: 1; } .dashboard_bars .bar > .bar_content { padding: 0 6px; } /*.dashboard_bars .bar > .bar_head ws-btn {*/ /* opacity: 0;*/ /* transition: opacity 0.3s ease-in-out;*/ /*}*/ /*.dashboard_bars .bar:hover > .bar_head ws-btn {*/ /* opacity: 1;*/ /*}*/ .dashboard_bars .bar_task { width: 100%; } .dashboard_bars .bar_task_add { font: 500 12px/20px var(--font-base); gap: 2px; padding: 0 2px; display: inline-flex; border-radius: 4px; cursor: pointer; } .dashboard_bars .bar_task_add:hover { background: var(--costs-task-highlight); } .dashboard_bars .bar_task_add ws-icon { margin: 0; width: 16px; height: 16px; } .dashboard_bars .bar + .bar { box-shadow: -1px 0 var(--CHART_GRID_LINE); } .dashboard_bars.bars1 .bar { /*float: none;*/ /*width: auto;*/ } .dashboard_bars .r { margin-top: 8px; } .dashboard_bars > ws-icon, .dashboard_bars > div > ws-icon { margin: 0 5px 0 0; } .dashboard_bars > ws-icon svg, .dashboard_bars > div > ws-icon svg { fill: var(--base-txt-tertiary) } .dashboard_bars .ico_dynamics { margin: 0 0 0 5px; } .dashboard_bars .sum { font: var(--font-ui-18-title-2-semi); } .dashboard_bars .sum-unit { font: var(--font-ui-18-title-2-semi); } .dashboard_bars .sum-unit { padding-top: 2px; padding-left: 2px; } .dashboard_bars .sum-unit > b { font: var(--font-ui-13-small-reg); } .dashboard_bars .sum-unit.sm { padding-left: 4px; } .dashboard_bars .sum i { font: 14px var(--font-base); color: var(--base-txt-tertiary) } .dashboard_bars .progress, .dashboard_bars .progress_na { clear: both; width: auto; height: 10px; margin-top: 8px; } .dashboard_bars .progress div, .dashboard_bars .progress_na div { height: 10px; position: relative; } .dashboard_bars .progress div u { height: 10px; display: block; margin: 0 0 0 auto; background: var(--colors-alpha-dark-15); position: relative; } .dashboard_bars .progress div i { position: absolute; right: 100%; top: 0; height: 10px; display: block; background: var(--colors-alpha-dark-30); } .dashboard_bars .progress div.over u { margin: 0 auto 0 0; } .dashboard_bars .progress div u font { position: absolute; right: 0; top: 18px; font: bold 11px/14px var(--font-base); width: 100px; text-align: right; } .dashboard_bars span.det { color: var(--base-txt-muted); display: block; margin: 8px 0 0 0; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .dashboard_bars a.hot { float:right; color: var(--base-txt-alert-minor); display: block; margin: 8px 0 0 0; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .dashboard_bars span.det b { font-weight: normal; color: var(--base-txt-secondary) } .dashboard_bars .week { float: right; font: 13px/20px var(--font-base); } .dashboard_bars .bar_time { border-radius: 8px 0 0 8px; outline: 4px solid var(--trans); transition: all .3s ease } /*.dashboard_bars .bar_time:hover {box-shadow: 1px 1px 0 var(--costs-time-minor), -1px 1px 0 var(--costs-time-minor), -1px -1px 0 var(--costs-time-minor), 1px -1px 0 var(--costs-time-minor); outline: 4px solid var(--costs-time-easy)}*/ /*.dashboard_bars .bar_money:hover {box-shadow: 1px 1px 0 var(--costs-money-minor), -1px 1px 0 var(--costs-money-minor), -1px -1px 0 var(--costs-money-minor), 1px -1px 0 var(--costs-money-minor); outline: 4px solid var(--costs-money-easy)}*/ .dashboard_bars .bar_money { border-radius: 0 8px 8px 0; outline: 4px solid var(--trans); transition: all .3s ease } .dashboard_bars .bar_time:hover .chart { opacity: 1; } .dashboard_bars .bar_time .week, .dashboard_bars .bar_money .week { margin-right: 8px; } .dashboard_bars .bar_time .bar_head .btn:hover { background: var(--costs-time-highlight); } .dashboard_bars .bar_time .bar_head .btn:focus { background: var(--costs-time-easy); } .dashboard_bars .bar_time .bar_head .btn svg { fill: var(--costs-time-major); } .dashboard_bars .bar_time .sum, .dashboard_bars .bar_time .sum-unit { color: var(--costs-time-major) } .dashboard_bars .bar_time svg { fill: var(--costs-time-major); } .dashboard_bars .bar_money .sum, .dashboard_bars .bar_money .sum-unit { color: var(--costs-money-major) } .dashboard_bars .bar_money svg { fill: var(--costs-money-major); } .dashboard_bars .bar_money .bar_head { padding: 1px 0; } .dashboard_bars .bar_task svg { fill: var(--base-txt-act-minor); } .dashboard_bars-nodata .sum { font: 400 13px/20px var(--font-base); } .dashboard_bars-nodata .progress_na { margin-bottom : 8px; } .dashboard_bars .limit { display: inline-flex; cursor: pointer; padding: 0 4px; margin: 8px 0 0 -2px; } .dashboard_bars .limit ws-icon { margin: 0; } .dashboard_bars .bar_time .limit { color: var(--costs-time-major); } .dashboard_bars .bar_time .limit:hover { background: var(--costs-time-highlight); border-radius: 4px; } .dashboard_bars .bar_money .limit { color: var(--costs-money-major); } .dashboard_bars .bar_money .limit:hover { background: var(--costs-money-highlight); border-radius: 4px; } .dashboard_bars .bar_time .week { color: var(--costs-time-major) } .dashboard_bars .bar_money .week { color: var(--costs-money-major) } .dashboard_bars .bar_time .chart { cursor: pointer; color: var(--costs-time-major); float: right; font: 500 13px/20px var(--font-base); } .dashboard_bars .bar_money .chart { display: none; cursor: pointer; color: var(--costs-money-major); float: right; font: 500 13px/20px var(--font-base) } @media (hover: none) { .dashboard_bars .bar_time .chart { opacity: 1; } .dashboard_bars .bar_time .week:not(:empty) ~ .chart { display: none; } .dashboard_bars ws-icon[name*=arrow_expand_sm] { margin: 0; } } .dashboard_bars .bar_time .progress div u font { color: var(--costs-time-major) } .dashboard_bars .bar_money .progress div u font { color: var(--costs-money-major) } .dashboard_bars a.dynamics { float: right; padding: 2px; margin: 10px 10px 0 -10px; border: 1px solid var(--base-txt-link-minor); border-radius: 15px; transform: scale(0.9); } .dashboard_bars a.dynamics .ico { margin: 0; } .dashboard_bars .dynamic { float: right; margin: 10px -5px 0 0; } .dashboard_bars span.det .onch { color: var(--base-txt-secondary); } .dashboard_bars:hover span.det .onch { border-bottom: 1px dashed } .dashboard_bars span.det .onch:hover { color: var(--base-txt-link-minor) } .dashboard_bars span.det .s2 { display: none } .dashboard__modal .dashboard_bars { border-bottom: 2px solid var(--base-line-alt-gap-major); margin: 0 0 10px 0; } .modal__content .buttons-asFooter { height:24px; padding: 0; } .modal__content .buttons-asFooter { display: none } ws-emoji::part(icon) { fill: var(--base-txt-tertiary); } #__ybug-app .page--left { background: red; } ws-menu, .display_contents { display: contents; } .av--user-blocked { width: 24px; height: 24px; margin: 0 4px; border-radius: 12px; background: var(--base-hlt-w-invert); --icon-size: 20px; --icon-color: var(--base-txt-alt-light); } .av--user-blocked-sm { width: 28px; height: 28px; border-radius: 8px; background: var(--base-hlt-w-invert); --icon-size: 20px; --icon-color: var(--base-txt-alt-light); } .items-center { align-items: center; } #fakeKeyboard { position: fixed; bottom: 0px; left: 0px; right: 0px; height: var(--keyboard-height); --nr: 8; --nc: 10; --b: 2px; background: conic-gradient(from 90deg at var(--b) var(--b), rgb(0 0 0 / .5) 90deg, #0000 0) calc(-1 * var(--b)) calc(-1 * var(--b)) / calc(100% / var(--nc)) calc(100% / var(--nr)); z-index: 999999; }.alertblock_contact-info { padding: 16px; border-radius: 6px; box-shadow: 0px 0px 0px 2px var(--base-cont-top), 0px 0px 0px 4px var(--base-line-act-minor); .title, .text, .buts { margin: 0 auto; max-width: 448px; box-sizing: content-box; } .title { display: flex; padding: 8px 12px; gap: 10px; align-items: center; .msg_ico { margin: 0; transform: unset; background-size: 288px 96px; background-position: -128px 0; width: 32px; height: 32px; } } .text { display: grid; gap: 12px; padding: 4px 12px; border-radius: unset; text-wrap-style: pretty; p { margin: 0; } } .buts { display: flex; padding: 24px 12px 12px; gap: 12px; align-items: center; .button { font-size: 14px; font-weight: 510; line-height: 20px; padding: 10px 24px; border-radius: 24px; &:not(:hover) { color: var(--base-txt-primary); box-shadow: 0 0 0 1px var(--base-line-secondary); } } .inline { margin: 0; margin-left: auto; text-decoration-line: underline; text-decoration-style: dotted; text-underline-position: under; border: unset; font-size: 14px; font-weight: 400; line-height: 20px; text-align: right; text-wrap-style: balance; } } .thickbox .users { pointer-events: none; } .users { display: flex; gap: 4px; .av_wrap { position: relative; .av_wrap__alert { position: absolute; top: 0; right: 0; width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 0 0 1px #fff; background: var(--colors-amber-500); display: flex; align-items: center; justify-content: center; &:before { content: '!'; color: #fff; font-size: 11px; } } } } } /* .heading {} */ .heading__title { color: var(--base-txt-primary); font: var(--font-ui-16-title-3-semi); } .heading__body { color: var(--base-txt-secondary); font: var(--font-ui-11-micro-reg); text-wrap-style: balance; } .item-setup-wrapper { display: grid; grid-template-columns: 1fr; gap: 24px; } .item-setup-message { padding: 0 24px 20px; } .item-setup { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; align-items: center; } .item-setup__heading { width: 100%; padding-top: 0; padding-bottom: 5px; display: flex; flex-direction: column; gap: 4px; } .info-card { width: 100%; box-sizing: border-box; display: flex; padding: 16px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; border-radius: 12px; background: var(--base-cont-top-elevated); box-shadow: 0px 0px 0px 1px var(--base-line-ghost), 0px 2px 8px -2px var(--colors-graphite-trans-300); transition: box-shadow .15s ease-in-out; .info-card__dropdown-placeholder { display: none; } .info-card__input-group .ico_alert_sm { display: none; } .info-card__dropdown-caret svg { use:last-child { display: none; } } &.info-card-empty { .info-card__dropdown-placeholder { display: flex; } .info-card__dropdown-value { display: none; } } &.info-card-empty-phone { .info-card__input-group .ico_alert_sm { display: block; } } ws-icon[data-role="alert-icon"] { cursor: help; --icon-color: var(--base-txt-notice-minor); } .av_wrap ws-icon[data-role="alert-icon"] { position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); } .av_wrap ws-icon[data-role="alert-icon"] + .av_sm { visibility: hidden; } } .info-card__dropdown { width: 100%; &:focus-visible { overflow: hidden; } } .info-card__dropdown-placeholder, .info-card__dropdown-value { display: flex; align-items: center; gap: 8px; width: 100%; flex-wrap: nowrap; .av_sm { flex-shrink: 0; /* border-radius: 6px; */ } } .info-card__dropdown .flex_group { gap: 4px; } .info-card__dropdown .role_ico { --icon-color: var(--base-txt-secondary); --icon-size: 16px; } .info-card__dropdown-value > .in { color: var(--base-txt-max); font: var(--font-ui-15-large-med); } .info-card__dropdown-placeholder > .in { font: var(--font-ui-15-large-reg); color: var(--base-txt-tertiary); } .info-card:has(a.info-card__dropdown:focus-within), .info-card:has(a.info-card__dropdown:hover) { box-shadow: 0px 0px 0px 1px var(--base-line-secondary), 0px 2px 8px -2px var(--colors-graphite-trans-300); } .info-card.has-error .info-card__input-group input { background: var(--base-hlt-w-easy); box-shadow: var(--shadow-brd-error); } .info-card__input-group { display: flex; flex-direction: column; gap: 2px; width: 100%; input { padding: 6px 10px; border: unset; color: var(--base-txt-secondary); font-size: 13px; height: 32px; box-sizing: border-box; border-radius: 8px; background: var(--base-cont-mod-trans-low); &:disabled { background: var(--base-cont-trans-mid); color: var(--base-txt-muted); width: 100%; } &:hover { box-shadow: var(--shadow-brd-enable-hover); } &:focus { box-shadow: var(--shadow-brd-focus); } } .info-card__input-wrapper { position: relative; ws-icon[data-role="alert-icon"] { --icon-size: 16px; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); margin: 0; cursor: help; } ws-btn[data-role="copy"] { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); } } .iti { height: 32px; } .iti__country-list { max-width: 216px; } .iti__selected-flag { padding-left: 5px; } .iti__flag { transform: scale(0.8); } .iti--allow-dropdown input, .iti--allow-dropdown input[type=text] { padding-left: 46px; } } .info-card-empty .info-card__dropdown { color: var(--base-txt-secondary) !important; font-size: 13px; } .info-card-empty .info-card__input-group { display: none; } .info-card-empty .av_wrap .ico.ico_delete, .info-card .av_wrap .ico.ico_delete { display: none; } .info-card:hover .av_wrap .ico.ico_delete, .info-card:focus-within .av_wrap .ico.ico_delete { display: block; } @media (hover: none) { .info-card .av_wrap .ico.ico_delete { display: block; } } .av_wrap { position: relative; .ico.ico_delete { position: absolute; top: -7px; right: -10px; margin: 0; transition: opacity .2s ease-out; opacity: .6; &:focus-visible { opacity: 1; } } &:hover { .ico.ico_delete { opacity: 1; } } } .info-card-disabled .iti--allow-dropdown .iti__flag-container { cursor: auto; pointer-events: none; } .modal__content .item-setup-buttons { display: flex; padding: 24px 28px; gap: 16px; height: unset; flex-direction: column; align-items: stretch; border-top: 0.5px solid var(--base-line-tertiary); background: var(--base-cont-mod-mid); } .item-setup-buttons__checkbox-wrapper { display: none; &:has(input[required]) { display: block; } .error-text { position: absolute; padding-left: 32px; } ws-icon { --icon-color: var(--base-txt-alert-major); } } .item-setup-buttons__checkbox { display: flex; padding: 0; align-items: flex-start; gap: 8px; align-self: stretch; background: unset !important; input { opacity: 0; width: 24px; height: 24px; padding: 0; float: left; margin: 0 -24px 0 0; cursor: pointer; } input + ws-icon { --icon-size: 16px; width: 24px; height: 24px; svg use:nth-child(1) { display: block; } svg use:nth-child(2) { display: none; } svg use:nth-child(3) { display: none; } } &:hover input + ws-icon { svg use:nth-child(1) { display: none; } svg use:nth-child(2) { display: block; } svg use:nth-child(3) { display: none; } } input:checked + ws-icon { --icon-color: var(--base-hlt-b-invert); svg use:nth-child(1) { display: none; } svg use:nth-child(2) { display: none; } svg use:nth-child(3) { display: block; } } &:hover input:checked + ws-icon { --icon-color: var(--base-hlt-b-invert-major); } &.has-error input+i { box-shadow: var(--shadow-brd-error); border-radius: 2px; &:focus-visible { box-shadow: unset; border-radius: unset; } } .in { padding: 2px 0; font: var(--font-ui-14-regular-reg); color: var(--base-txt-secondary); text-wrap-style: balance; } } .item-setup-buttons__required { color: var(--base-txt-alert-major); } .error-text { color: var(--base-txt-alert-major); font: var(--font-ui-11-micro-reg); padding: 2px 0; &.error-text-hidden { display: none; } } #setup .setup_.with-users { padding-top: 9px; padding-bottom: 9px; container-type: inline-size; container-name: buttons-container; h4 { display: flex; height: unset; gap: 8px; padding: 0; align-items: flex-start; } .title { display: flex; flex-grow: 1; flex-shrink: 0; align-items: center; gap: 8px; min-height: 32px; .ico, .h4 { margin-right: 0; } } .buttons { display: flex; flex-grow: 0; flex-shrink: 1; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: end; .button { margin: 0; } .thickbox .users { pointer-events: none; } .users { display: flex; gap: 2px; .av_wrap { position: relative; .av_wrap__alert { position: absolute; top: 0; right: 0; width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 0 0 1px #fff; background: var(--colors-amber-500); display: flex; align-items: center; justify-content: center; &:before { content: '!'; color: #fff; font-size: 11px; } } } } } @container buttons-container (max-width: 390px) { .buttons { flex-direction: column-reverse; } } } @keyframes placeholder-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .item-setup-wrapper.ws-placeholder { .ws-placeholder__text { border-radius: 4px; background: linear-gradient(100deg, currentColor 20%, rgba(255, 255, 255, 0.2) 50%, currentColor 80%); background-size: 200% 100%; animation: placeholder-loading 1.5s infinite; height: 1lh; opacity: .2; } .ws-placeholder__icon { border-radius: 4px; background: linear-gradient(100deg, var(--icon-color) 20%, rgba(255, 255, 255, 0.2) 50%, var(--icon-color) 80%); background-size: 200% 100%; animation: placeholder-loading 1.5s infinite; height: 1lh; opacity: .2; } .ws-placeholder__text-w50 { width: 50%; } .ws-placeholder__text-w75 { width: 75%; } .ws-placeholder__fix-w100 { width: 100%; box-sizing: border-box; } } #account-contacts { padding-bottom: 40px; .item-setup-buttons { padding-top: 32px; gap: 8px; display: none; &.item-setup-buttons--alwaysVisible, &:has(.item-setup-buttons__checkbox-wrapper input[required]) { display: flex; } } .item-setup-buttons__checkbox-wrapper .error-text { padding-left: 24px; } .item-setup-buttons__checkbox { gap: 0; .in { font: var(--font-ui-13-small-reg); } } } @media (min-width: 901px) { #account-contacts { .item-setup-wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; } .item-setup { display: flex; flex-direction: column; padding: 0; justify-content: space-between; min-width: 0; } } } #billingContacts ~ #account-contacts { padding-top: 64px; } #billingContacts:has( ~ #account-contacts) { margin-bottom: 0; } #account-contacts:has(+ #billingContacts) { border-bottom: 1px solid var(--base-LINE-tertiary, rgba(0, 31, 61, 0.10)); margin-bottom: 0; } .space-lock ws-icon + .av_sm { display: none; } .info-card ws-btn[data-role="copy"] { display: none; } .info-card:has(input:focus, .info-card__input-wrapper:hover) ws-btn[data-role="copy"] { display: block; } .info-card.has-error.has-error ws-btn[data-role="copy"], .info-card.info-card-empty-phone.info-card-empty-phone ws-btn[data-role="copy"] { display: none; } ws-btn[data-role="copy"]:hover { display: block !important; } @media (min-width: 481px) { .modal__content .info-card { background: var(--base-cont-mod-top-elevated); } } .modal__content .heading__title { gap: 4px; .flex_content { flex-grow: 0; } } @media (max-width: 480px) { .heading__title { font: var(--font-ui-18-title-2-semi); } .info-card ws-btn[data-role="copy"] { display: block; } .item-setup-buttons__checkbox-wrapper .error-text { position: static; display: flex; align-items: center; overflow: hidden; padding-top: 0; padding-bottom: 0; transition: height .2s ease-in-out .2s, opacity .2s ease-in-out .2s; height: 20px; opacity: 1; &.error-text-hidden { height: 0; opacity: 0; } } } .menu .iti { ul { margin: 0; } li { margin: 0; &:before { content: unset; } } .iti__country { outline: unset; } } @media screen and (max-width: 480px) { .menu { .iti__flag-box { margin: 0; padding: 0 6px; } .iti__country-name { margin: 0; } .iti__dial-code { padding-right: 6px; } } } /* This file must contain only utility classes for $.fn.animate_css */ :root { --animate-duration: 1s; } .worksection__animated { animation-duration: var(--animate-duration); animation-fill-mode: both; } .worksection__animated.worksection__infinite { animation-iteration-count: infinite; } .worksection__animated.worksection__fastest { animation-duration: calc(var(--animate-duration) / 3); } .worksection__animated.worksection__fast { animation-duration: calc(var(--animate-duration) / 2); } .worksection__animated.worksection__slow { animation-duration: calc(var(--animate-duration) * 2); } .worksection__animated.worksection__slowest { animation-duration: calc(var(--animate-duration) * 3); } @media print, (prefers-reduced-motion: reduce) { .worksection__animated { animation-duration: 1ms !important; } } @keyframes ws-head-shake { 0% { transform: translateX(0); } 6.5% { transform: translateX(-6px); } 18.5% { transform: translateX(5px); } 31.5% { transform: translateX(-3px); } 43.5% { transform: translateX(2px); } 50% { transform: translateX(0); } } .worksection__head-shake { --animate-duration: .5s; animation-timing-function: ease-in-out; animation-name: ws-head-shake; } @keyframes ws-pulse { from { transform: scale3d(1, 1, 1); } 50% { transform: scale3d(1.05, 1.05, 1.05); } to { transform: scale3d(1, 1, 1); } } .worksection__pulse { animation-name: ws-pulse; animation-timing-function: ease-in-out; } @keyframes ws-blink { from { opacity: 1; } 50% { opacity: 0.1; } to { opacity: 1; } } .worksection__blink { animation-name: ws-blink; animation-timing-function: ease-in-out; } @keyframes ws-slide-in-down { from { transform: translateY(-100%); } to { transform: translateY(0); } } .worksection__slide-in-down { animation-name: ws-slide-in-down; } @keyframes ws-hithere { 30% { transform: scale(1.2); } 40%, 60% { transform: rotate(-20deg) scale(1.2); } 50% { transform: rotate(20deg) scale(1.2); } 70% { transform: rotate(0deg) scale(1.2); } 100% { transform: scale(1); } } @keyframes ws-dropready { 10% { transform: rotate(35deg); } 20% { transform: rotate(-35deg); } 30% { transform: rotate(0); } 60% { transform: scale(1.15); } 70% { transform: scale(0.9); } 80% { transform: scale(1.3); } 90% { transform: scale(0.8); } 100% { transform: scale(1); } } @keyframes ws-bg-blink-and-fadeout { 0% { background: none; } 20% { background: var(--anim-bg-color); } 40% { background: var(--anim-bg-color); } 100% { background: none; } } @keyframes ws-icon-pin-set { 0% { translate: 0 0; --icon-color: var(--base-txt-primary); } 50% { translate: 5px -6px; --icon-color: var(--base-txt-primary); } 100% { translate: 0 0; --icon-color: var(--base-btn-notice-minor); } } @keyframes ws-icon-pin-unset { 0% { translate: 0 0; --icon-color: var(--base-btn-notice-minor); } 50% { translate: 5px -6px; --icon-color: var(--base-btn-notice-minor); } 100% { translate: 0 0; --icon-color: var(--base-txt-primary); } } @keyframes ws-spin { 0% { rotate: 0; } 100% { rotate: 360deg } } ws-icon.ws-icon-spinner > svg { animation-name: ws-spin; animation-iteration-count: infinite; animation-duration: 1s; animation-timing-function: linear; } /** body.w_keyboard xxx { } */ body.mobile { -webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */ -webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */ -webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */ user-select: none; /* pointer-events: none; */ -webkit-user-drag: none; user-drag: none; } body.mobile .page_content { -webkit-user-select: text; user-select: text; } @media (max-width: 480px) { #content { --swipeReload-top: 0px; --swipeReload-add-top: 0px; transform: translateY(calc(var(--swipeReload-top) + var(--swipeReload-add-top))); } body.withSwipeReloadTransition #content { transition: transform 0.2s ease-out; } } #swipeReload { --swipeReload-top: 0px; --swipeReload-add-top: 0px; --swipeReload-opacity: 0; --swipeReload-rotate: 45deg; --swipeReload-headerHeight: var(--mobile-head-height); position: fixed; inset: 0; z-index: 9999; padding-top: var(--swipeReload-headerHeight); pointer-events: none; display: none; } #swipeReload.swipeReload--shown { display: block; } /* debug */ /* #swipeReload { display: block; --swipeReload-top: 60px !important; --swipeReload-opacity: 1 !important; } */ .swipeReload__body { display: flex; justify-content: center; width: 100%; height: 100%; overflow: clip; } .swipeReload--addTop .swipeReload__body { background: linear-gradient(var(--base-cont-mod-low), transparent calc(var(--swipeReload-top) + var(--swipeReload-add-top))); } .swipeReload__loader { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--base-cont-top); border-radius: 50%; box-shadow: 0 1px var(--base-line-alt-cardbrd); transform: translateY(calc(var(--swipeReload-top) - 100%)); overflow: clip; &:after { content: ''; position: absolute; inset: 0; z-index: 1; background: conic-gradient( from 45deg, transparent 0deg var(--swipeReload-rotate), var(--base-cont-top) var(--swipeReload-rotate) 360deg ); } } body.withSwipeReloadTransition .swipeReload__loader { transition: transform 0.2s ease-out; } #swipeReload .loader { width: 20px; height: 20px; animation-name: swipeLoader; animation-duration: .4s; animation-delay: .5s; opacity: var(--swipeReload-opacity); } #swipeReload.swipeReload-state .swipeReload__loader:after { /* стан, коли почнеться релоад, якщо відпустити свайп */ display: none; } #swipeReload:not(.swipeReload-state2) .loader { animation: unset; transform: rotate(var(--swipeReload-rotate)); } #swipeReload.swipeReload-state2 .loader { transition: transform .5s linear; transform: rotate(920deg); /* check swype.js (140 * 2 - 80) + 360 * 2 */ } #swipeReload.swipeReload-state2 { transition: top 0.5s ease; } @-webkit-keyframes swipeLoader { 0% { -webkit-transform:rotate(920deg); transform:rotate(920deg); } 100% { -webkit-transform:rotate(1280deg); transform:rotate(1280deg); } } @keyframes swipeLoader { 0% { -webkit-transform:rotate(920deg); transform:rotate(920deg); } 100% { -webkit-transform:rotate(1280deg); transform:rotate(1280deg); } }:root { --CAT_COLOR_DEF:#66c4ff; --CAT_COLOR_DEF_OPAC:#e5f5ff; --CAT_COLOR:#07d; --CAT_OPAC1:#0077dd1a; --CAT_OPAC2:#0077dd33; --CAT_COLOR0:#07d; --CAT_COLOR1:#329a98; --CAT_COLOR2:#55a; --CAT_COLOR3:#c42a67; --CAT_COLOR4:#825c2c; --GROUP_COLOR1:#099; --GROUP_COLOR2:#939; --GROUP_COLOR3:#090; --GROUP_COLOR4:#d33; --GROUP_COLOR1_OPAC:#0099991a; --GROUP_COLOR2_OPAC:#9933991a; --GROUP_COLOR3_OPAC:#0099001a; --GROUP_COLOR4_OPAC:#dd33331a; --TXT_LO3:#00000066; --TXT_LO2:#00000088; --TXT_LO1:#000000aa; --TXT:#333; --TXT_HI:#000; --GREEN:#7b0; --GREEN_HI1:#6a0; --GREEN_HI2:#590; --GREEN_OPAC1:#77bb001a; --GREEN_OPAC2:#77bb0033; --GREEN_OPAC3:#77bb004d; --BLUE:#09f; --BLUE_HI1:#07d; --BLUE_HI2:#06c; --BLUE_OPAC1:#0099ff1a; --BLUE_OPAC2:#0099ff33; --BLUE_OPAC3:#0099ff4d; --MAGENTA:#f20470; --MAGENTA_OPAC2:#f2047033; --YELLOW:#f90; --YELLOW_OPAC2:#ff990033; --HINT_COLOR:#6655ddcc; --LAVENDEL:#65d; --EGG_BLUE:#0cc; --FONT1:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Helvetica Neue", Arial, sans-serif; --FONT2:'Fira sans', sans-serif; --FONT3:Georgia, serif; --FONT4:"Trebuchet MS", 'Fira sans', sans-serif; } #auth .input:-webkit-autofill { background-color:#fff !important; -webkit-box-shadow:0 0 0 50px #fff inset; transition:background-color 5000s ease-in-out 0s, color 5000s ease-in-out 0s; } #auth { position:fixed; left:calc(50% - 200px + var(--desktop-primary-menu-width) / 2); top:100px; width:400px; z-index:1020; display:none; overflow:hidden; background:#fff; border-radius:30px; transition: height 0.5s ease 0.5s, opacity 0.5s ease 0.5s; box-shadow:var(--shadow-cont-major); } #auth .btn { border-radius:30px; padding:12px 24px; background-color:#fff; border:1px solid #00000033; cursor:pointer; white-space:nowrap; display:inline-block; color:#333; font-size:14px; height:20px; font-family:inherit; position:relative; } #auth .btn svg { width: 40px; height:40px; } #auth .btn:hover { color:#000; border-color:#777 } #auth .register_multy .btn { margin-bottom:5px; } #auth.loading .btn font { opacity:0; } #auth .register .color-schema-info { } #auth_overlay { position:fixed; top:0; left:0; bottom:100%; right:0; background-color:rgba(20, 30, 40, 0.25); z-index:1019; opacity:0; transition:bottom 0.01s linear 0.4s, opacity 0.3s ease 0.1s; } .bd_auth #auth_overlay { opacity:1; bottom:0; transition:opacity 0.5s ease } #auth .block-auth { display:inline-block; position:absolute; top:30px; right:368px; } #auth .block { transition:all .7s ease-in-out; -webkit-transition:all .7s ease-in-out; left:0; position:absolute; top:0; width:400px; } #auth.register .register, #auth.register_success .register_success, #auth.register_final .register_final, #auth.login .login, #auth.secure1 .secure1, #auth.secure2 .secure2, #auth.login_multy .login_multy, #auth.register_multy .register_multy, #auth.forgot .forgot, #auth.forgot_success .forgot_success, #auth.forgot_multy .forgot_multy, #auth.forgot_final .forgot_final, #auth.logged .logged { z-index:1 } #auth .hidden { display:none; } #auth .effect2 { position:relative; left:100%; opacity:0; transition:all 0.5s ease 0.5s; } #auth.register .register .effect2 { opacity:1; left:0 } #auth.login .register .effect2 { opacity:0; left:-100%; transition:0.5s; } #auth.login .login .effect2 { opacity:1; left:0 } #auth.secure1 .secure1 .effect2 { opacity:1; left:0 } #auth.secure2 .secure2 .effect2 { opacity:1; left:0 } #auth.login .forgot .effect2 { opacity:0; left:100%; transition:0.5s; } #auth.register_success .register .effect2 { opacity:0; left:-100%; transition:0.5s; } #auth.register_success .register_success .effect2 { opacity:1; left:0 } #auth.register_final .register .effect2, #auth.register_final .register_success .effect2 { opacity:0; left:-100%; transition:0.5s; } #auth.register_final .register_final .effect2 { opacity:1; left:0 } #auth.forgot .login .effect2, #auth.forgot .register .effect2 { opacity:0; left:-100%; transition:0.5s; } #auth.forgot .forgot .effect2 { opacity:1; left:0 } #auth.forgot_multy .login .effect2, #auth.forgot_multy .register .effect2, #auth.forgot_multy .forgot .effect2 { opacity:0; left:-100%; transition:0.5s; } #auth.forgot_multy .forgot_multy .effect2 { opacity:1; left:0 } #auth.forgot_success .login .effect2, #auth.forgot_success .register .effect2, #auth.forgot_success .forgot .effect2, #auth.forgot_success .forgot_multy .effect2 { opacity:0; left:-100%; transition:0.5s; } #auth.forgot_success .forgot_success .effect2 { opacity:1; left:0 } #auth.forgot_final .login .effect2, #auth.forgot_final .register .effect2, #auth.forgot_final .forgot .effect2, #auth.forgot_final .forgot_multy .effect2, #auth.forgot_final .forgot_success .effect2 { opacity:0; left:-100%; transition:0.5s; } #auth.forgot_final .forgot_final .effect2 { opacity:1; left:0 } #auth.login_multy .login .effect2, #auth.login_multy .register .effect2 { opacity:0; left:-100%; transition:0.5s; } #auth.login_multy .login_multy .effect2 { opacity:1; left:0 } #auth.logged .login .effect2, #auth.logged .register .effect2 { opacity:0; left:-100%; transition:0.5s; } #auth.logged .logged .effect2 { opacity:1; left:0 } #auth.register_multy .login .effect2, #auth.register_multy .register .effect2 { opacity:0; left:-100%; transition:0.5s; } #auth.register_multy .register_multy .effect2 { opacity:1; left:0 } #auth .register .effect2 { } #auth .effect1 { opacity:0; transition:opacity 0.5s ease 0.5s; } #auth.register .register .effect1 { opacity:1 } #auth.login .register .effect1 { opacity:0; transition:0.5s; } #auth.login .login .effect1 { opacity:1 } #auth.secure1 .secure1 .effect1 { opacity:1 } #auth.secure2 .secure2 .effect1 { opacity:1 } #auth.login .forgot .effect1 { opacity:0; transition:0.5s; } #auth.forgot_success .forgot_success .effect1 { opacity:1 } #auth.register_success .register .effect1 { opacity:0; transition:0.5s; } #auth.register_success .register_success .effect1 { opacity:1 } #auth.register_final .register .effect1, #auth.register_final .register_success .effect1 { opacity:0; transition:0.5s; } #auth.register_final .register_final .effect1 { opacity:1 } #auth.forgot .login .effect1, #auth.forgot .register .effect1 { opacity:0; transition:0.5s; } #auth.forgot .forgot .effect1 { opacity:1 } #auth.forgot_success .login .effect1, #auth.forgot_success .register .effect1, #auth.forgot_success .forgot .effect1, #auth.forgot_success .forgot_multy .effect1 { opacity:0; transition:0.5s; } #auth.forgot_success .forgot_success .effect1 { opacity:1 } #auth.forgot_multy .login .effect1, #auth.forgot_multy .register .effect1, #auth.forgot_multy .forgot .effect1 { opacity:0; transition:0.5s; } #auth.forgot_multy .forgot_multy .effect1 { opacity:1 } #auth.forgot_final .login .effect1, #auth.forgot_final .register .effect1, #auth.forgot_final .forgot .effect1, #auth.forgot_final .forgot_multy .effect1, #auth.forgot_final .forgot_success .effect1 { opacity:0; transition:0.5s; } #auth.forgot_final .forgot_final .effect1 { opacity:1 } #auth.login_multy .login .effect1, #auth.login_multy .register .effect1 { opacity:0; transition:0.5s; } #auth.login_multy .login_multy .effect1 { opacity:1 } #auth.register_multy .login .effect1, #auth.register_multy .register .effect1 { opacity:0; transition:0.5s; } #auth.register_multy .register_multy .effect1 { opacity:1 } #auth.logged .login .effect1, #auth.logged .register .effect1 { opacity:0; transition:0.5s; } #auth.logged .logged .effect1 { opacity:1 } #auth .register .effect1 { } #auth .close { position:absolute; z-index:2; cursor:pointer; border-radius:24px; padding:9px; right:20px; top:20px; } #auth .close ws-icon { width:40px; height:40px; --icon-size:40px; margin:-5px; position:relative } #auth .back { position:relative; float:left; cursor:pointer; border-radius:24px; margin:0 -50px 0 0; padding:9px; } #auth .back ws-icon { position:relative; width:40px; height:40px; --icon-size:40px; margin:-5px; } #auth .close:before, #auth .back:before { content:''; position:absolute; left:24px; top:24px; width:0; height:0; transition:0.3s; border-radius:24px } #auth .close:hover:before, #auth .back:hover:before { content:''; position:absolute; left:0; top:0; width:48px; height:48px; background:#f4f4f4; } #auth .auth-social { display:flex; flex-direction:column; justify-content:center; align-items:center; /* height: 150px; */ padding:32px 0; } #auth .auth-social .btn { text-indent:10px; width:170px; font-family:var(--FONT1); } #auth .auth-social .btn-center { text-align:center; } #auth .auth-social .btn ws-icon { float:left; width:40px; height:40px; --icon-size:40px; margin:-10px -7px -10px -10px; } #auth .auth-social .btn_small { text-indent:0px; text-align:center; width:70px; } #auth .auth-social .btn ~ .btn { margin-top:20px; } #auth .part-header, #auth .part-main, #auth .part-title { padding:0 44px; } #auth .login .part-title, #auth .register .part-title, #auth .login_multy .part-title, #auth .logged .part-title, #auth .register_multy .part-title, #auth .register_success .part-title, #auth .register_final .part-title, #auth .forgot_success .part-title, #auth .forgot_multy .part-title, #auth .forgot_final .part-title, #auth .forgot .part-title, #auth .secure1 .part-title, #auth .secure2 .part-title { text-align:center; } #auth .part-space { height:20px; } #auth .part-header { padding:20px 20px 0 20px; justify-content:flex-end; height:48px; margin:0 0 -24px; } #auth .part-title { font-size:16px; font-family:var(--FONT2), sans-serif !important; } #auth .fira { font-family:var(--FONT2), sans-serif !important; font-style:italic } #auth .part-title div:first-child { font-size:36px; font-weight:400; padding-bottom:14px; } #auth .part-title span { background-color:var(--GREEN_OPAC3); color:var(--GREEN_HI2); padding:2px 4px; border-radius:4px; } .text-on-line { position:relative; z-index:1; overflow:hidden; text-align:center; font-style:italic; font-size:12px; font-family:var(--FONT2); padding:5px 0; margin:-5px 0 } .text-on-line:before, .text-on-line:after { content:''; display:inline-block; width:100%; height:1px; background:#dedede; z-index:-1; position:relative; vertical-align:middle } .text-on-line:before { right:15px; margin:0 0 0 -100% } .text-on-line:after { left:15px; margin:0 -100% 0 0 } #auth .text-on-line { } #auth .text-on-line ws-icon { width:24px; height:24px; --icon-size:24px; margin:-2px; vertical-align:bottom; display:inline-block; --icon-color: var(--sidebar-cont-base); } #auth .text-on-line i { float:left; background:#ccc; width:5px; height:5px; border-radius:50%; margin:8px -5px 0 0 } #auth .text-on-line i ~ i { float:right; margin:8px 0 0 -5px; } #auth .text-on-line:before, #auth .text-on-line:after { content:''; display:inline-block; width:100%; height:1px; background:#dedede; z-index:-1; position:relative; vertical-align:middle; } #auth .text-on-line:before { right:15px; margin:0 0 0 -100%; } #auth .text-on-line:after { left:15px; margin:0 -100% 0 0; } #auth .input { padding:15px 15px; border-radius:4px; font:400 16px/20px var(--FONT1); width:44%; height:56px; box-sizing:border-box; } #auth .remember { float:right; margin-top:16px; color:var(--BLUE_HI1) CC; font-style:italic; line-height:24px; } #auth .remember:hover { color:var(--BLUE_HI1); } #auth .input-group { position:relative; padding:38px 0 32px 0; } #auth .color-schema-info .input { border:1px solid var(--BLUE); } #auth .color-schema-info .btn { background:var(--MAGENTA); border-color:var(--MAGENTA); color:#fff; transition:0.3s; box-shadow:0 0 0 12px transparent; } #auth .color-schema-info .btn:active { transition:none; box-shadow:0 0 0 6px var(--MAGENTA_OPAC3); } #auth .color-schema-info .btn:hover { box-shadow:0 0 0 50px #0000001a inset; } #auth .color-schema-info .btn.effect-yellow { background-color:var(--YELLOW); box-shadow:0 0 0 12px transparent; } #auth .color-schema-info .btn.effect-yellow:active { transition:none; box-shadow:0 0 0 6px var(--YELLOW_OPAC3); } #auth .color-schema-info .btn.effect-yellow:hover { box-shadow:0 0 0 50px #0000001a inset; } #auth .color-schema-info .btn.effect-green { background-color:var(--BLUE); border-color:var(--BLUE); box-shadow:0 0 0 12px transparent; } #auth .color-schema-info .btn.effect-green:active { transition:none; box-shadow:0 0 0 6px var(--BLUE_OPAC3); } #auth .color-schema-info .btn.effect-green:hover { box-shadow:0 0 0 50px #0000001a inset; } /*.color-schema-success .input { border: 1px solid #0b9dff; } #auth .color-schema-success .btn { border: 1px solid var(--BLUE); background-color: var(--BLUE); }*/ #auth .part-bottom, #register_multy .part-bottom { display:flex; flex-direction:column; justify-content:center; align-items:center; padding:20px 0; } #auth .part-bottom div:first-child, #register_multy .part-bottom div:first-child { margin-bottom:14px; } #auth .btn-auth { background:none; font-style:normal; font-weight:600; padding:0 24px; border-color:var(--BLUE); height:48px; line-height:46px; box-sizing:border-box; border-width:2px; } #auth .btn-auth:hover { background-color:#fff; border-color:var(--BLUE); } #auth .input-group input:placeholder-shown + label { opacity:0; transform:translateY(100%); } #auth .input-group input + label { position:absolute; top:14px; left:12px; transition:all 0.1s; opacity:1; background:white; padding:0 5px; transform:translateY(calc(50% + 5px)); font-size:12px; color:#a6a6a6; } #auth .input-group input:focus { outline:0; } #auth .link-yellow { background-color:#ffff6a; padding:2px 5px; font-weight:bold; color:#000; margin:0 -5px; } #auth .div-line { display:block; height:1px; border-bottom:1px solid #dedede; width:50%; margin:0 auto; } #auth .text-email { background-color:#f1ebf3; color:#a27bb0; padding:2px 5px; border-radius:4px; } #auth .success .part-main { border-bottom-left-radius:20px; border-bottom-right-radius:20px; } #auth .success .text-info { margin:30px 0 15px; text-align:center; font-size:14px; line-height:25px; } #auth .success .text-info a { color:#37afff; text-decoration:underline; } #auth .ico_success { width:60px; height:60px; float:left; margin:-5px -55px -5px -5px; } #auth .ico_help { width:21px; height:21px; } #auth .register .part-bottom, #auth .login_multy .part-bottom, #auth .forgot .part-bottom { display:flex; flex-direction:row; justify-content:space-between; padding:20px; transition:background 0.2s } #auth .register .part-bottom { font-style:italic; color:#555; padding:28px 0 40px; } #auth .register .part-bottom, #auth .login .part-bottom, #auth .login_multy .part-bottom, #auth .register_multy .part-bottom, #auth .forgot .part-bottom, #auth .forgot_multy .part-bottom { background-color:#fff; } #auth.register .register .part-bottom, #auth.login .login .part-bottom, #auth.login_multy .login_multy .part-bottom, #auth.register_multy .register_multy .part-bottom, #auth.forgot_multy .forgot_multy .part-bottom, #auth.forgot .forgot .part-bottom { background-color:#f4f4f4; transition:background 1s ease 1s; } #auth .login .part-bottom a:hover, #auth .login_multy .part-bottom a:hover, #auth .forgot .part-bottom a:hover { background-color:#fff; opacity:1; } #auth .login .part-main .part-title, #auth .forgot .part-main .part-title { } #auth .auth_message { background-color:#fe7; padding:20px; font-style:italic; text-align:center; font-weight:bold; font-size:13px; display:none; margin:16px 0 0; } #auth .register .part-bottom a, #auth .login_multy .part-bottom a, #auth .forgot .part-bottom a { padding:8px 15px; border-radius:20px; display:flex; align-items:center; color:#000; opacity:0.5; } #auth .register_multy .part-bottom a.btn { background:none; font-style:normal; font-weight:600; padding:0 24px; border-color:var(--BLUE); height:48px; line-height:46px; box-sizing:border-box; border-width:2px; } #auth .fira-italic { font-style:italic; font-size:14px; } #auth .text-description { padding:18px 0 30px; line-height:25px; text-align:center; } #auth .text-description a { text-decoration:underline } #auth .login form, #auth .secure1 form, #auth .secure2 form, #auth .forgot form, #auth .register_final form, #auth .forgot_final form { padding:38px 16px 32px; } #auth input { } #auth .login form .input, #auth .forgot form .input, #auth .secure1 form .input, #auth .secure2 form .input, #auth .code_step2 form .input, #auth .register_final form .input, #auth .forgot_final form .input { width:100%; border:1px solid #dadada; } #auth .login form input:focus { border-color:#029aff; box-shadow:0 0 0px 3px #0099ff66; } #auth .forgot form input:focus { border-color:#029aff; box-shadow:0 0 0px 3px #0099ff66; } #auth .input-remember { width:100px; display:block; background-color:#f5f5f5; padding:17px 5px 17px 15px; position:absolute; right:1px; top:1px; bottom:1px; border-top-right-radius:2px; border-bottom-right-radius:2px; } #auth .forgot form .control-button { display:flex; justify-content:space-between; } #auth .icon-arrow { width:40px !important; height:40px !important; margin-left:-10px; } #auth .icon-arrow ws-icon { width:44px; height:44px; --icon-size:44px; } #auth .login form input[type="checkbox"] { width:auto; } #auth .color-blue { fill:var(--BLUE); display:flex; } #auth .element { margin-bottom:16px; position:relative; } #auth .pull-right { text-align:right; } #auth .btn-blue { background-color:var(--BLUE); color:#fff; border:1px solid var(--BLUE); height:56px; padding:16px 25px; font-weight:bold; transition:0.3s; -webkit-tap-highlight-color: transparent; } #auth .btn-blue:hover { background-color:var(--BLUE_HI2) !important; border:1px solid var(--BLUE_HI2) !important; color:#fff; } #auth .btn-blue:active { box-shadow:0 0 0 6px var(--BLUE_OPAC3); transition:none; } #auth .register .input { width:100%; box-sizing:border-box; height:56px; } #auth .register .input:focus { box-shadow:0 0 0px 3px #0099ff66; } #auth .register .sign { padding:16px 24px; border-radius:30px; color:#fff; cursor:pointer; font-weight:bold; font-size:14px; height:56px; border:none; } #auth .auth-social .btn { padding:13px 30px; border-radius:50px; } #auth .auth-social a.small { color:#999; margin-top:20px } #auth .auth-social a.small:hover { border-bottom:1px dashed } #auth .register form { display:flex; flex-direction:row; align-items:center; justify-content:space-between; padding:0; } #auth .register form div ~ div { margin-left:10px; } #auth .accounts { overflow-y:auto; max-height:400px; margin:20px -10px; } #auth .accounts a { display:block; cursor:pointer; padding:8px; overflow:hidden; position:relative; } #auth .accounts a.logout_ { transition:0.3s; -webkit-transition:0.3s; opacity:0; margin-left:-300px; } #auth .accounts a i { display:block; font-style:normal; margin:-7px -8px -7px 60px; padding:8px 50px 6px 10px; } #auth .accounts a img { float:left; } #auth .accounts a:hover i { background-color:#d6eefe; border-radius:10px; } #auth .accounts a .url { text-decoration:none; color:var(--BLUE); font:14px/14px var(--FONT1); text-overflow:ellipsis; display:block; overflow:hidden; margin:0 0 6px; } #auth .accounts a b { font-size:18px; line-height:26px; color:#000; display:block; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; } #auth .accounts a ws-icon:not(.ws) { width:40px; height:40px; --icon-size:44px; margin:3px -40px 0 0; float:right; opacity:0.2; transition:all 0.3s ease; transform:rotate(180deg); } #auth .accounts a:hover ws-icon:not(.ws) { opacity:1; margin-right:-45px } #auth .accounts a ws-icon.ws { float:left; opacity:0.2; width:48px; height:48px; --icon-size:48px; fill:#333; margin:0 5px; } #auth .accounts .line { margin:6px 8px 6px 78px; background:#eee; } #auth .accounts_invis { text-align:center; padding:20px 0; font:italic 14px/20px var(--FONT2); } #auth .accounts_invis .btn { margin:20px 0 10px; } #auth.noani * { transition:none !important } @media (max-width:480px) { body.bd_auth > :not(#auth) { display:none !important } #auth { position:absolute; width:100%; margin:0; left:0; top:0; border-radius:0; box-shadow:0 400px var(--base-cont-top); } #auth .register, #auth .register_success, #auth .register_final, #auth .login, #auth .login_multy, #auth .register_multy, #auth .forgot, #auth .forgot_multy, #auth .forgot_final, #auth .forgot_success { width:100% } #auth .input-remember { display:none; } #auth.register { /* box-shadow: 0 0 0 100% #F4F4F4; */ } } @media (max-width:400px) { #auth { width:100%; left:0; } #auth .register, #auth .register_success, #auth .register_final, #auth .login, #auth .forgot, #auth .login_multy, #auth .register_multy, #auth .forgot_multy, #auth .forgot_final, #auth .forgot_success { margin:0; width:100%; } } /* Effects */ .liner, .liner2, .liner3, .liner4 { width:0; height:3px; background-color:var(--BLUE); animation:line-animation 0.3s linear infinite; -webkit-animation:line-animation 0.3s linear infinite; animation-direction:normal; float:left; } #auth .checkbox ws-icon { width:20px; height:20px; --icon-size:20px; } @-webkit-keyframes line-animation { 0% { width:0; } 100% { width:100%; } } @keyframes input-animation { 0% { width:0; } 100% { width:100%; } } /*--------------------------*/ .liner2 { animation:line-animation-rigth 0.3s linear infinite; -webkit-animation:line-animation-rigth 0.3s linear infinite; float:right; } @-webkit-keyframes line-animation-rigth { 0% { width:100%; } 100% { width:0; } } @keyframes line-animation-rigth { 0% { width:100%; } 100% { width:0; } } /*--------------------------*/ .liner3 { animation:line-animation-right-left 0.3s linear infinite; -webkit-animation:line-animation-right-left 0.3s linear infinite; float:right; } @-webkit-keyframes line-animation-right-left { 0% { width:0; } 100% { width:100%; } } @keyframes line-animation-right-left { 0% { width:0; } 100% { width:100%; } } /*--------------------------*/ .liner4 { animation:line-animation-left 0.3s linear infinite; -webkit-animation:line-animation-left 0.3s linear infinite; } @-webkit-keyframes line-animation-left { 0% { width:100%; } 100% { width:0; } } @keyframes line-animation-left { 0% { width:100%; } 100% { width:0; } } /*--------------------------*/ /* End Effects */ /* new checkbox */ #auth .label-cbx { user-select:none; cursor:pointer; margin-bottom:0; } #auth .label-cbx input:checked + .checkbox { border-color:var(--BLUE); } #auth .label-cbx input:checked + .checkbox svg path { fill:var(--BLUE); } #auth .label-cbx input:checked + .checkbox svg polyline { stroke-dashoffset:0; } #auth .label-cbx:hover .checkbox svg path { stroke-dashoffset:0; } #auth .label-cbx .checkbox { position:relative; top:0; float:left; margin-right:7px; width:18px; height:18px; border:1px solid #c8ccd4; border-radius:3px; } #auth .label-cbx .checkbox svg { position:absolute; top:-1px; left:-1px; } #auth .label-cbx .checkbox svg path { fill:none; stroke:var(--BLUE); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:71px; stroke-dashoffset:71px; transition:all 0.6s ease; } #auth .label-cbx .checkbox svg polyline { fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:18px; stroke-dashoffset:18px; transition:all 0.3s ease; } #auth .label-cbx > span { pointer-events:none; vertical-align:middle; font-size:12px; } #auth .invisible { position:absolute; z-index:-1; width:0; height:0; opacity:0; } #auth .part-header img { width:48px; height:48px; border-radius:24px; float:left; margin:0 -48px 0 0; } #incline-left, #incline-right { width:20px; height:50px; padding:2px 0; flex:none; } #incline-left { float:left; margin:0 0 0 -25px; } #incline-right { float:right; margin:0 -25px 0 0; } #incline-left > div, #incline-right > div { margin:10px 0; } #incline-left > div div, #incline-right > div div { border-radius:50%; } .incline-top, .incline-center, .incline-bottom, .incline-top-left, .incline-bottom-left { display:block; width:100%; height:3px; border-radius:3px; } .incline-top { -webkit-transform:rotate(-26deg); -ms-transform:rotate(-26deg); transform:rotate(-26deg); } .incline-bottom { -webkit-transform:rotate(26deg); -ms-transform:rotate(26deg); transform:rotate(26deg); } .incline-top-left { -webkit-transform:rotate(26deg); -ms-transform:rotate(26deg); transform:rotate(26deg); } .incline-bottom-left { -webkit-transform:rotate(-26deg); -ms-transform:rotate(-26deg); transform:rotate(-26deg); } /* ------------------------------------------------------------------------------------------------*/ /** * ============================================== * Dot Falling * ============================================== */ #auth .btn .loader_dots { position:absolute; text-align:center; left:0; top:0; right:0; bottom:0; display:none } #auth.loading .btn .loader_dots { display:block; } #auth .disable_reg .part-main { pointer-events:none; filter:grayscale(80%); opacity:0.4; } #auth .element-code .ws-code-input input, .code_4digit input { display:inline-block; height:80px !important; width:50px !important; border:1px solid #00000033 !important; border-radius:8px !important; margin:0 8px !important; background:#fff; font:bold 60px/60px Consolas, monospace !important; padding:0 !important; text-align:center; } #auth .element-code .ws-code-input { --gap: 8px; gap: var(--gap); } #auth .element-code .ws-code-input input { margin: 0 !important; max-width: calc( (100% - var(--gap) * 5) / 6); box-sizing: border-box; height:64px !important; font:bold 36px/36px Consolas, monospace !important; } .activation_code_block .code_4digit { height:120px; position:relative; margin-top:30px } .activation_code_block input.btn { transition:none !important } .activation_code_block input.btn:focus { box-shadow:0 0 0 6px var(--BLUE_OPAC3); transition:none !important } .activation_code_block .code_4digit input:focus { box-shadow:0 0 0 3px #0099ff66; border-color:transparent } @media (max-width:480px) { .activation_code_block .code_4digit { margin:30px -100px 0 } .activation_code_block .code_4digit input { margin:0 4px !important; } } .code_step1 { text-align:center; } .code_step2 { text-align:center; width:260px; margin:0 auto; display:none } .code_step2 form { margin:20px 0 10px } #auth .disable_reg_alert { color:white; flex-direction:column; align-items:flex-start; padding:20px; background:linear-gradient(102.07deg, #f94b00 0%, #fa6400 100%); border-radius:8px; font:12px/16px var(--FONT2); margin:30px 40px 10px; } #auth .disable_reg_alert h3 { font:500 16px/20px var(--FONT2); margin:0; padding:0 0 10px; } #auth .disable_reg_alert .txt { color:#fff; text-decoration:underline; } #auth .disable_reg_alert ws-icon { width:20px; height:20px; --icon-size:20px; float:right; } #auth .disable_reg_alert .but { display:block; text-align:center; padding:12px 22px; height:40px; margin:15px 0 0 0; background:#fff; box-shadow:0px 2px 8px -2px rgba(6, 35, 55, 0.29); border-radius:4px; font:600 16px/16px var(--FONT2); color:#333; box-sizing:border-box; } #auth .register_success .part-main, #auth .register_final .part-main, #auth .forgot_success .part-main, #auth .secure1 .part-main, #auth .secure2 .part-main, #auth .forgot_final .part-main { text-align:center; } #auth .reg_docs { border-radius:8px; background:#f4f4f4; overflow:hidden; margin:30px -60px -55px -60px; text-align:center; font:14px/20px var(--FONT1); padding:15px 50px; } #auth .reg_docs .title { background:transparent; padding:10px 10px 10px 35px; position:relative; display:inline-block; cursor:pointer; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; } #auth .reg_docs .title:focus-within { color:#07d; } #auth .reg_docs #is_confirm:not(:checked) + span { color:#000; } #auth .reg_docs input { position:absolute; left:10px; top:14px; padding:0; margin:0; } #auth .reg_docs .text { padding:10px 0px 10px 20px; line-height:22px; text-align:left; } #auth .reg_docs-active .text { display:none } #auth .reg_docs-active { background:#f4f4f4; height:40px; } #auth .reg_docs-active .title { background:none } #auth .reg_docs .text a { color:var(--BLUE); font:15px/24px var(--FONT1); } #auth .reg_docs .text a:before { content:'\2022'; color:#b26; margin:0 5px 0 0; font:bold 20px/20px var(--FONT1); vertical-align:top; } #auth .reg_docs .text a:hover { color:var(--BLUE_HI2); background:none; } #auth .reg_docs .text a:focus span { text-decoration:underline; text-decoration-style:dotted; } #auth .reg_docs .text small { display:block; font:12px/16px var(--FONT1); color:#999; margin:10px 0 0 10px; } #auth .reg_docs .text small:before { content:'*'; margin:0 0 0 -8px; float:left; } @media (max-width:480px) { #auth .reg_docs, #auth .reg_docs-active { background:#fff; } } span.ico_pass { background:url(/assets/img/color/pro_iconset_sm.svg) no-repeat -28px -178px; cursor:pointer; transform:scale(1.5); opacity:0.6; } input[type=password] ~ span.ico_pass { background-position:-3px -176px } span.ico_pass ~ span.ico_ok, span.ico_pass ~ span.ico_pass_week { background-color:#fff; box-shadow:0 0 0 2px #fff } span.ico_pass ~ span.ico_ok:hover { opacity:0 } span.ico_pass ~ span.ico_pass_week:hover { opacity:0 } #auth .element { position:relative } #auth .element .ico { position:absolute; right:16px; top:22px; z-index:1; display:none; } #auth .element .ico.inline-block { display:inline-block } #auth .element .gender_select ~ .ico { right:66px; } #auth .element .ico_pass, #auth .element .ico_pass_on { display:block; } #auth .element label { position:absolute; top:4px; left:10px; color:#bbb; transition:0.2s all ease; -webkit-transition:0.2s all ease; font:12px/20px var(--FONT1) } #auth .element label.label-cbx { top:15px; left:12px; } #auth .element input:placeholder-shown + label { top:20px; left:16px; color:#aaa; font:15px/20px var(--FONT1) } #auth .element[data-password=week] label i, .inputBlock__label input[data-password=week] + .label i { color:#f76470 } #auth .element[data-password=medium] label i, .inputBlock__label input[data-password=medium] + .label i { color:#ffc61a } #auth .element[data-password=strong] label i, .inputBlock__label input[data-password=strong] + .label i { color:#6c3 } #auth .promocode-anchor { margin:15px 0 0; } #auth .promocode-anchor a { color:#07d; } #auth .register_final .input { height:64px; padding:25px 15px 15px; } #auth .register_final .input:placeholder-shown { padding:20px 15px 20px; } #auth .register_final .input.incomplete, #auth .forgot_final .input.incomplete { border-color:#f66; box-shadow:0 0 0 3px rgba(255, 0, 0, 0.2) } #auth .register_final div.incomplete { box-shadow:0 0 2px 1px #f00 } @media (max-width:480px) { #auth .part-bottom { background:#fff !important; border-top:2px solid #eee; } } #auth .register_final .part-title div:nth-child(2), #auth .register .part-title div:nth-child(2) { padding-top:20px } #auth .element-ip .input { text-align:center; font:28px var(--font-mono) } #auth .secure1 .part-main, #auth .secure2 .part-main { margin-top:25px; } #auth .secure1 .control-button, #auth .secure2 .control-button { justify-content:center; } #auth_lang_sel { position:absolute; cursor:pointer; right:0; top:0; z-index:10; } #auth_lang_sel b { position:relative; font:1rem/4.4rem var(--font-base); display:inline-block; white-space:nowrap; background:var(--base-cont-low); color:var(--base-txt-primary); border-radius:100%; width:32px; height:32px; padding:0; margin:16px; line-height:32px; text-align:center; font-size:0.75rem; } #auth_lang_sel div { display:none; position:absolute; right:10px; top:58px; background:var(--colors-alpha-light-100); padding:10px 0 20px; box-shadow:0 16px 48px var(--colors-graphite-trans-300); border-radius:16px; z-index:1001; width:180px; } #auth_lang_sel:hover div { display:block; } #auth_lang_sel div a { display:block; float:none; font:1rem/2.125rem var(--font-base); padding:2px 24px; color:var(--base-txt-secondary); } #auth_lang_sel div a .ico { float:left; margin:7px 10px 7px 0; display: none; } #auth_lang_sel div a:hover { background:var(--base-hlt-easy) } .message_2fa { background:var(--base-surf-sidebar); border-bottom:1px solid var(--base-cont-top); font:13px/20px var(--font-base); padding:10px 30px 10px 30px; color:var(--white-secondary); margin:-50px 0 50px } .step2fa { padding:0 0 10px 60px; color:var(--base-txt-primary); position:relative; text-align:left; } .step2fa.step1:before, .step2fa.step2:before { content:''; position:absolute; border-left:2px solid var(--base-cont-top); top:42px; left:19px; bottom:2px } .step2fa .num { background:var(--colors-blue-desat-750); width:40px; height:40px; text-align:center; float:left; margin:0 0 0 -60px; color:var(--white-accent); font:18px/40px var(--font-base); border-radius:20px; } .step2fa a:not(.asLink) { color:var(--base-txt-primary); border:1px solid var(--base-line-alt-cardbrd); border-radius:4px; padding:7px 15px; background:var(--base-cont-top) } .step2fa a:not(.asLink):hover { border:1px solid var(--base-btn-primary-major); color:var(--base-txt-max) } .step2fa .muted { color: var(--base-txt-secondary); padding-right: 16px; text-wrap-style: balance; } .step2fa img { /* border: 10px solid var(--base-cont-top); */ border-radius:4px; width:200px; height:200px; } .step2fa p.sm { margin-bottom:10px; } .step2fa .message { margin:-10px -30px 0 -60px; } .step2fa .msg_ico { left:0; top:5px; } #userpic { width:48px; height:48px; background:var(--base-cont-top); border-radius:100px; position:absolute; right:4px; top:6px; transform:scale(0.7); } #auth .secure2 form { padding-top: 8px; } #blockingState.blockingState-shown { position:fixed; left: 64px; top:0; right:0; bottom:0; background:var(--base-cont-top); z-index: 2999; } @media (max-width:480px) { #blockingState.blockingState-shown { left:0 } } .bill_out { width:66%; min-width:800px; margin:0 auto 15px auto; } .bill_out .bill {background:var(--base-cont-top); padding:20px; position:relative; } .bill_out .bill a.button_r {margin:7px 0;} .bill_out .self .it_name {font:24px/28px var(--font-base); margin:0 200px 18px 0; } .bill_out .self .it_sum {position:absolute; right:0; bottom:0; font:28px/20px var(--font-base); color:var(--base-txt-primary); border-bottom:2px solid var(--base-btn-primary-minor); padding:5px 15px 2px 15px; width:120px; text-align:right} .bill_out .self .it_sum_usd {padding-bottom:15px;} .bill_out .self .it_sum i {font:12px/20px var(--font-base); color:var(--base-txt-tertiary)} .bill_out .self .it_name a {color:var(--base-txt-accent)} .bill_out .self .it_name a:hover, body.mobile .bill_out .self .it_name a {border-bottom:2px dashed var(--base-txt-max)} .bill_out .self form {padding:0 61px 0 0; position:relative; margin:-3px 0;} .bill_out .self input.wide2 {width:100%; font:24px/28px var(--font-base); padding:0 5px; height:32px; margin:0 -5px;} .bill_out .self input.button2 {padding:0; font:16px/22px var(--font-base);position:absolute; right:0; top:0; height:34px; background:var(--base-btn-primary-minor); border-radius:0; width:55px} .bill_out .self .it_project {color:var(--base-txt-tertiary);font:13px var(--font-base);margin: -10px 0 20px -10px;} .bill_out .bill .info {font:13px/20px var(--font-base); color:var(--base-txt-tertiary)} .bill_out .bill .info b {font:13px/20px var(--font-base); color:var(--base-txt-accent); margin:0 5px;} .bill_out .time {margin:0 0 25px 0;background: var(--base-cont-top);} .bill_out .time .it { position:relative; font:13px/20px var(--font-base);background:var(--base-cont-top); border-top:1px solid var(--base-line-alt-gap-minor)} .bill_out .time .it .it_name {margin:0 150px 0 0; padding:7px 20px 7px 20px;} .bill_out_t .time .it .it_name, .bill_out_m .time .it .it_name {padding-right:120px;} .bill_out_tm .time .it .it_name {padding-right:220px;} body.mobile .bill_out .time .it .it_name {padding-left:30px;} .bill_out .time .it .it_name a {color:var(--base-txt-accent)} .bill_out .time .it:hover .it_name a, body.mobile .bill_out .time .it .it_name a {border-bottom:1px dashed} .bill_out .time .it .it_sum {position:absolute; right:15px; top:7px; font:18px/20px var(--font-base); color:var(--base-txt-primary)} .bill_out .time .it .it_time, .bill_out .time .it .it_money {position:absolute; right:165px; top:7px; font:14px/20px var(--font-base)} .bill_out_tm .time .it .it_time {right:265px;} .bill_out .time .it label {position:absolute; left:-32px; top:0; padding:8px; transform:scale(0.8)} body.desktop .bill_out .time .it label {display:none } body.withMass .bill_out .time .it label {display:block } .bill_out .time .it label.act {background:none} .bill_out .time .it .input { text-align:right; width:100px; padding:1px 4px; margin:-1px -4px;font:inherit; border:none; background:transparent; color:inherit} .bill_out .time .it:hover .input {background:var(--inp-hlt-bg);} .bill_out .time .it .input:focus {outline:none; box-shadow: var(--shadow-brd-focus) !important;border-color:transparent !important;} .bill_out .time .it .inp_load_pre {outline:none; box-shadow: var(--shadow-brd-focus) !important;border-color:transparent !important;} .bill_out .time form {padding:0 40px 0 0; position:relative; margin:-7px 0} .bill_out .time input.wide2 {width:100%; border:none; font:13px/34px var(--font-base); padding:0 5px; height:34px; margin:0 -5px; } .bill_out .time ws-btn {position:absolute; right:0; top:3px; width:35px} @media (min-width: 481px) { body.desktop .bill_out .time .it:hover label, body.desktop .bill_out .time .it.pre_act label {display: block;} .bill_out .time .pre_act { background:var(--base-hlt-hover); box-shadow: -2px 0 var(--base-hlt-invert); } .bill_out .time .pre_act .it_name {box-shadow: -2px 0 var(--base-hlt-invert);} } a.label_st, span.label_st {color:var(--white-accent); font:12px/20px var(--font-base); padding:2px 7px; border-radius:3px; border-bottom:none} a.label_st:hover {background:var(--base-txt-accent)} #label_popup { display:none; position:absolute; left:0; top:0; width:100px; background:var(--base-cont-top); padding:2px 2px 1px 2px; border:1px solid var(--base-line-alt-gap-minor); z-index:2000; } #label_popup a { display:block; float:none;border-radius:0;font:12px/18px var(--font-base); text-align:center; margin:0 0 1px 0; cursor:pointer; } .bill_out .bill_add {background: var(--base-cont-top);border-top: 1px solid var(--base-line-alt-gap-major);} .time_add {font:italic 13px/20px var(--font-base); padding:7px 15px; position:relative;} .time_add a {color:var(--base-txt-secondary); margin:0 0 0 3px} .time_add:hover a, body.mobile .time_add a {border-bottom:1px dashed} .time_add a:hover {color:var(--base-txt-link-minor); border-bottom:1px dashed;} .time_add .it_time, .time_add .it_money {position:absolute; right:160px; top:7px; font:italic 13px/20px var(--font-base); color:var(--base-txt-secondary)} .bill_out_tm .time_add .it_time {right:260px;} .time_add .ico_lock2 {padding:0} .bill_out .time_edit {} .bill_out .bill_add form {position:relative; padding:0 0 30px 0;} .bill_out .time_edit .it { position:relative; font:13px/20px var(--font-base);} .bill_out .time_edit .it .it_name {margin:0 150px 0 0;padding: 0 10px 15px 20px;} .bill_out .time_edit .it:first-child .it_name {padding-top:15px;} .bill_out .time_edit .it .inputmain {width:100%;padding: 4px 10px;border: none;/* border-bottom: 2px solid var(--base-line-tertiary); */border-radius: 0;box-shadow: 0 1px var(--base-line-secondary);font-size: 18px !important;} .bill_out .time_edit .it .it_sum {position:absolute;right: 45px;top:0;font:18px/20px var(--font-base);color:var(--base-txt-primary);} .bill_out .time_edit .it:first-child .it_sum { top:15px;} .bill_out .time_edit .it .it_sum .inputmain {width:93px;text-align:right;} .bill_out .time_edit .it_opac {opacity:0.5} .bill_out .time_edit .it .inputmain:focus {box-shadow: 0 2px var(--base-hlt-focus);outline: none;} .bill_out .bill_add .button_sq {position:absolute;right: 0;bottom: 0;width:150px;padding:0;border-radius: 0;height:30px;font:16px/30px var(--font-base);text-align:center;} .bill_out .time_edit .it .ico_delete2 {display:none;position:absolute;right:15px;bottom: 24px;} .bill_out .time_edit .it:hover .ico_delete2 { display:inline} .bill_out .time_edit .it_opac:hover .ico_delete2 { display:none} .bill_out .time_edit_ {background: var(--base-cont-top); margin:40px 0 20px 0;border-radius: 8px;padding: 10px 0;} .massPanel .ops_rate span, .massPanel .ops_rate b, .massPanel .ops_rate em, .massPanel .ops_rate input {float:left;} .massPanel .ops_rate span.or {font:11px/20px var(--font-base); margin:15px 0 0 10px} .massPanel .ops_rate input.button {height:30px;padding:5px 15px; margin:5px 0 0 10px} .massPanel .ops_rate span.mult {margin:0 5px;} .massPanel .ops_rate span.gray {margin:0 0 0 10px;font:13px/40px var(--font-base);} @media (max-width: 768px) { .massPanel .ops_rate span.gray {display:none} } .massPanel input.op_rate_real {background:var(--base-btn-notice-minor); border-radius:3px; font:16px/20px var(--font-base); padding:2px 10px; margin:2px 10px 0 10px; } .massPanel input.op_rate_real:hover {background:var(--base-btn-notice-major); box-shadow:none} .massPanel .formula1, .massPanel .formula2 {color:var(--base-txt-primary); font:13px/40px var(--font-base);} .massPanel .ops_rate span.rate_pl {color:var(--base-txt-primary); font:24px/40px var(--font-base); margin:0 5px;} .massPanel .formula1 b {color:var(--costs-time-major); font:24px/38px var(--font-base); margin:0 5px;} .massPanel .formula2 b {color:var(--costs-money-major); font:24px/38px var(--font-base); margin:0 5px;} .massPanel .formula1 input.input {color:var(--base-txt-primary); background:var(--costs-time-highlight); border:none; padding:5px; margin:8px 0 0 0} .massPanel .formula2 input.input {color:var(--base-txt-primary); background:var(--costs-money-highlight); border:none; padding:5px; margin:8px 0 0 0;} .massPanel .formula1 input.input::-moz-placeholder, .massPanel .formula2 input.input::-moz-placeholder { color:var(--base-txt-primary); opacity:1; font:12px/16px var(--font-base);} .massPanel .formula1 input.input::-webkit-input-placeholder, .massPanel .formula2 input.input::-webkit-input-placeholder { color:var(--base-txt-primary); opacity:1; font:12px/16px var(--font-base);} .bill_out h4 {margin:20px 0 5px 0;} .bill_out .bill_name {margin:0 105px 0 0;position:relative; } .bill_out .bill_name input.inputmain:focus {box-shadow:var(--shadow-brd-focus); border-color:transparent; outline: none;} .bill_out .bill_name .inputmain {padding-right:100px;width:100%;font:21px/26px var(--font-base) !important;padding: 4px 10px;height: 40px;} a.bill_status { position:absolute; right:-103px; top: 0; font: 14px/40px var(--font-base); height: 40px; text-align:right; padding:0 10px; width:80px; color:var(--white-accent); border-radius: 4px; } a.bill_status:hover { color: var(--white-max); background:var(--base-txt-accent)} .bill_status span { } .bill_status_sel { display:none; position:absolute; right:-3px; top:1px; font:14px/32px var(--font-base); background:var(--base-cont-low); width:102px; z-index:1010;} .bill_status_sel a {display:block;color:var(--white-accent);padding:0 10px;text-align:right;border: 1px solid var(--base-line-alt-gap-minor);border-top:none;height: 40px;line-height: 40px;} .bill_status_sel a:hover { background:var(--base-txt-accent) } .bill_out .massPanel {position:absolute; left:0; right:0; top:0} @media (max-width: 900px) { .bill_out {width:auto; min-width:0} } @media (max-width: 768px) { .it_time, .it_money {display:none} .bill_out_tm .time .it .it_name {padding-right:20px;} .bill_out .self .it_name {margin-right:0;} } @media (max-width: 480px) { .bill_out .self .it_project {margin:-20px 0 5px 0;} } @media (max-width: 400px) { .bill_out .time .it .it_name {margin-right:100px;} .bill_out .bill .info {margin:-10px 0 40px;} .bill_out .time .it .it_sum {font:14px/20px var(--font-base)} .bill_out .time .it .input {width:70px} .bill_out .bill_add {display:none;} .bill_out .self .it_sum {width:70px;} } @media print { .bill_out {width:100%; min-width:0} .bill_out .it_money, .bill_out .it_time, .bill_out .bill_add, .bill_out .info {display:none} .bill_out .time .it {border-top:1px solid var(--base-txt-tertiary); margin:0;} .bill_out .bill {padding:20px 0;} .bill_out .time .it .it_name {background:var(--base-cont-top); padding-left:0;} .bill_out .self .it_project {margin:-10px 0 0 0;} .bill_out .self .it_name {margin:0 200px 0 0;} #header_normal {display:none} .bill_out .self .it_sum {border-bottom:3px solid var(--base-txt-accent);} } .bill { position:relative; } .bill ws-btn[name*=export] { position:absolute; right:10px; top:10px; }.badge { display: inline-flex; border-radius: 12px; padding: 0 6px; align-items: center; justify-content: center; box-sizing: border-box; } .badge.badge-digit { padding: 0 4px; font-family: var(--font-mono) !important; } .badge.badge-costs { padding: 0 4px; font: var(--font-ui-10-nano-reg); border-radius: 4px; box-sizing: border-box; box-shadow: inset 0 0 0 1px var(--base-txt-tertiary); color: var(--base-txt-tertiary); margin-left: 4px; } .badge.badge-costs:hover, a:hover .badge.badge-costs { background: var(--base-txt-tertiary); color: var(--base-txt-alt-light); } .badge.badge-costs.badge-time { box-shadow: inset 0 0 0 1px var(--costs-time-major); color: var(--costs-time-major); } .badge.badge-costs.badge-time:hover, a:hover .badge.badge-costs.badge-time { border: none; background: var(--costs-time-major); color: var(--base-txt-btn-flip); } .badge.badge-costs.badge-money { box-shadow: inset 0 0 0 1px var(--costs-money-major); color: var(--costs-money-major); } .badge.badge-costs.badge-money:hover, a:hover .badge.badge-costs.badge-money { border: none; background: var(--costs-money-major); color: var(--base-txt-btn-flip); } .badge.badge-16 { height: 16px; line-height: 16px; } .badge.badge-20 { height: 20px; } .badge.badge-pro { background: var(--base-btn-notice-major); color: var(--base-txt-alt-light); font: var(--font-ui-10-nano-reg); } .badge.badge-pro.badge-invert { border: 1px solid var(--base-btn-notice-major); color: var(--base-btn-notice-major); background: none; font: var(--font-ui-10-nano-med); } .badge.badge-promo { background: var(--base-btn-notice-major); color: var(--base-txt-btn-flip); font: var(--font-ui-10-nano-reg); } .badge.badge-promo.badge-invert { border: 1px solid var(--base-btn-notice-major); background: none; color: var(--base-btn-notice-major); font: var(--font-ui-10-nano-med); } .badge.badge-promo.badge-invert:hover { background: var(--base-btn-notice-major); color: var(--base-txt-btn-flip); } .badge.badge-pending { background: var(--base-hlt-w-selected); color: var(--base-txt-btn-w); font: var(--font-ui-10-nano-reg); } .badge.badge-pending.badge-invert { border: 1px solid var(--base-txt-btn-w); background: none; color: var(--base-txt-btn-w); font: var(--font-ui-10-nano-med); } .badge.badge-waiting { background: var(--base-txt-notice-minor); color: var(--base-txt-alt-light); font: var(--font-ui-10-nano-reg); } .badge.badge-waiting.badge-invert { border: 1px solid var(--base-txt-notice-minor); background: none; color: var(--base-txt-notice-minor); font: var(--font-ui-10-nano-med); } .badge.badge-new { background: var(--base-txt-new-minor); color: var(--base-txt-alt-light); font: var(--font-ui-10-nano-reg); } .badge.badge-new.badge-invert { border: 1px solid var(--base-txt-new-minor); background: none; color: var(--base-txt-new-minor); font: var(--font-ui-10-nano-reg); } .badge.badge-g { background: var(--base-hlt-g-hover); color: var(--base-txt-tertiary); font: var(--font-ui-10-nano-reg); } .badge.badge-g.badge-invert { border: 1px solid var(--base-txt-tertiary); color: var(--base-txt-tertiary); background: none; font: var(--font-ui-10-nano-reg); } .badge.badge-b { background: var(--base-hlt-b-hover); color: var(--base-txt-btn-b); font: var(--font-ui-10-nano-reg); } .badge.badge-b.badge-invert { border: 1px solid var(--base-txt-btn-b); background: none; color: var(--base-txt-btn-b); font: var(--font-ui-10-nano-reg); } .badge.badge-b.badge-fill { background: var(--base-txt-btn-b); color: var(--base-cont-top); } .badge.badge-primary { background: var(--base-txt-primary); color: var(--base-txt-alt-light); font: var(--font-ui-10-nano-reg); } .badge.badge-primary.badge-invert { border: 1px solid var(--base-txt-primary); background: none; color: var(--base-txt-primary); font: var(--font-ui-10-nano-reg); } .badge.badge-events{ --icon-color: var(--base-txt-muted); font: bold 11px/20px var(--font-mono); padding: 0 4px; border-radius: 4px; border: 1px solid var(--base-hlt-g-hover); min-width: 28px; height: 20px; } .badge.badge-events i{ font-weight: 400; font-style:normal; } .badge.badge-events:hover{ --icon-color: var(--base-txt-tertiary); background: var(--base-hlt-g-hover); } .badge.badge-events:hover ws-icon{ --icon-color: var(--base-txt-tertiary) !important; } .badge.badge-events.badge-outline{ border-color: var(--base-hlt-selected); background: var(--base-hlt-hover); color: var(--base-txt-btn-a); } .badge.badge-events.badge-outline:hover{ border-color: var(--base-hlt-pressed); background: var(--base-hlt-pressed); } .badge.badge-events.badge-solid{ border-color: var(--base-hlt-invert); background: var(--base-hlt-invert); color: var(--base-txt-alt-light); } .badge.badge-events.badge-solid:hover{ border-color: var(--base-hlt-invert-major); background: var(--base-hlt-invert-major); } /* -------------------------------------------------------------------------------------------------------------------*/ .token_row button ws-icon:first-child svg { fill: var(--base-txt-btn-b) !important; } .token_row button ws-icon:last-child svg { fill: var(--base-txt-btn-a) !important; } /* .img_2fa { border: 2px solid var(--colors-alpha-light-100); border-radius: 2px; } */ .api_btn { display: flex; width: 100%; height: 60px; background: var(--base-hlt-g-hover); border-radius: 12px; justify-content: center; align-items: center; cursor: pointer; font: var(--font-ui-15-large-semi); color: var(--base-txt-btn-a); } .api_btn:hover { box-shadow: var(--shadow-brd-enable); } .api_btn ws-icon { padding: 0 0 0 6px; } .api_btn ws-icon svg { fill: var(--base-txt-btn-a); } .api_empty { width: 100%; height: 32px; display: flex; gap: 12px; justify-content: flex-end; align-items: center; } .delete_me { border-top: 2px solid var(--base-line-alt-cardbrd); padding: 20px 0; margin: 20px auto -50px auto; width: 66%; min-width: 900px; text-align: center; font: 14px/20px var(--font-base); position: relative; min-height: 70px } .delete_me_freeze { border-top: 2px solid var(--base-cont-top); margin-bottom: 0; } .delete_me:before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 0; background: var(--base-line-alt-cardbrd) } .delete_me h4 { font: bold 18px/20px var(--font-base); margin: 10px 0; } .delete_me .in { position: relative; display: none; } .delete_me_act .in { display: block; padding: 0 20px; } .delete_me_act:before { height: 100%; transition: height 0.5s ease; -webkit-transition: height 0.5s ease } .delete_me_act .buttons { display: none; } .delete_me_act { border-top: 2px solid var(--base-btn-alert-primary-major); } .delete_me .esc { float: right; width: 20px; height: 20px; background: var(--base-cont-top); padding: 14px; border-radius: 24px; position: absolute; right: 15px; top: -15px; } .buts_2fa { padding: 10px 0; } /* -------------------------------------------------------------------------------------------------------------------*/ div.project_note .loader_sm { float: right; display: none } div.project_note { padding: 15px 35px 25px 50px; /* border-top: 2px solid var(--base-cont-low); */ } div.project_note .note { margin: 0 30px 0 0; } div.project_note .note textarea { background: var(--base-cont-low); border: none; width: 100%; padding: 5px 15px; height: 190px; resize: none; line-height: 20px; border-radius: 8px; box-sizing: border-box; } div.project_note .note textarea.empty { font-style: italic; color: var(--base-txt-tertiary); } div.project_note .note textarea.full { background: var(--base-cont-note-major); color: var(--base-txt-primary); } .project_links { padding: 15px 20px; background: var(--base-cont-mod-low); } .title_note span { margin: 0 -100px 0 0; float: left } .title_note a.ico_l { margin-top: 4px } /* -------------------------------------------------------------------------------------------------------------------*/ /* Personal notes */ #notebook_top { height: 20px } #notebook_top a.tab { float: left; height: 20px; background: var(--base-cont-mod-top); font: 11px/20px var(--font-base); padding: 5px 10px; color: var(--base-txt-tertiary); } #notebook_top a.tab:hover { color: var(--base-txt-link-minor) } #notebook_top a.taba, #notebook_top a.taba:hover { border-bottom: none; background: var(--base-cont-note-minor); color: var(--base-txt-secondary) !important; } #notebook { clear: both } #notebook .title { font-size: 13px; color: var(--base-txt-secondary); padding: 5px 0; } #notebook .title span a { color: var(--base-txt-tertiary) } #notebook .text { background: var(--base-cont-note-minor); padding: 0 20px 0 0; } #notebook .text textarea { width: 100%; height: 150px; border: 0 solid var(--base-cont-note-minor); background: var(--base-cont-note-minor); color: var(--base-txt-accent); overflow: auto; font: 12px/18px var(--font-base); resize: none; padding: 10px; } /* -------------------------------------------------------------------------------------------------------------------*/ #mouse_help { position: fixed; bottom: -135px; left: 0; right: 0; z-index: 1025; padding: 10px 0 20px; height: 100px; text-align: center; transition: bottom 0.3s ease; -webkit-transition: bottom 0.3s ease; background: var(--base-cont-trans-low); backdrop-filter: blur(50px); border-top: 1px solid var(--base-line-secondary); } #mouse_help.help_big { height: 300px; bottom: -340px; } #mouse_help.help_shown { bottom: 0 } #mouse_help.help_hidden { bottom: -135px } #mouse_help.help_big.help_hidden { bottom: -340px } #mouse_help .in_l { float: left; margin: 0 80px 0 50px } #mouse_help .r { float: right; padding: 0 30px; margin: 0 0 0 -100% } #mouse_help .r .esc { float: right; width: 20px; height: 20px; background: var(--base-cont-top); padding: 14px; border-radius: 24px; margin: 12px 0 18px; } #mouse_help .r ws-btn { margin: 12px 0 18px; } #mouse_help .r .inline { font: var(--font-ui-13-small-reg); color: var(--base-txt-primary); border-color: var(--base-txt-accent) } #mouse_help.help_hidden_ .r .inline { display: none } #mouse_help_float.help_hidden, body.mobile #mouse_help_float { display: none } .mouse_help div { display: inline-block; text-align: center; color: var(--base-txt-tertiary); font: italic 13px/18px var(--font-base); width: 150px; white-space: nowrap; padding-left: 8px; } #mouse_help_float .mouse_help div { text-align: left; } .mouse_help div b { display: block; color: var(--base-txt-primary); font: bold 13px/18px var(--font-base) } .mouse_help div.mouse_scroll { /* margin-top: -5px; */ width: 100px } .mouse_help ws-icon:not([name=hint]):not([name=close_sm]) { display: block; width: 60px; height: 60px; margin: 0 auto 8px; opacity: 0.7; --icon-size: 60px; --icon-color: var(--base-txt-btn-a); } .mouse_help .mouseico { display: block; width: 60px; height: 60px; background: url(/assets/img/color/drop_file_here.svg) 0 -180px; margin: 0 auto 8px; opacity: 0.7 } .mouse_help .mouseico2 { background-position: -60px -180px } .mouse_help .mouseico3 { background-position: -120px -180px } .mouse_help .mouseico4 { background-position: -180px -180px } .mouse_help .mouseico4_ { background-position: -180px -192px; height: 52px; margin-top: 8px; } .mouse_help .mouseico5 { background-position: -240px -180px } .mouse_help .mouseico6 { background-position: 0 0 } .mouse_help .mouseico7 { background-position: -300px -180px } .mouse_help .mouseico8 { background-position: -300px -240px } .mouse_help .mouseico9 { background-position: -240px -240px } .eye_conf .mouse_help { float: left; margin: 0 0 -215px -300px; border-right: 1px solid var(--base-line-alt-cardbrd); padding: 5px 10px 110px 0; background: var(--base-cont-low) } .eye_conf .mouse_help div { width: 130px } .eye_conf .mouse_help div, .eye_conf .mouse_help div b { font-size: 12px; } #mouse_help .help_menu { background: none; padding: 0; } #mouse_help .help_menu a { display: inline-block; border-width: 0; padding: 10px 0; height: auto; color: var(--base-txt-secondary); font: 14px/20px var(--font-base); width: 150px; white-space: nowrap; } #mouse_help .help_menu a:hover { border-radius: 16px; color: var(--base-txt-link-minor); background: var(--menu-item-selected); } #mouse_help .help_menu .ico_r { margin: 0; float: none; display: block; } #mouse_help .help_menu .ico_place { width: 30px; height: 30px; display: block; float: none; margin: 0 auto 10px; background-color: var(--base-cont-top); padding: 15px; border-radius: 35px; } body[data-page=files] mouse_help div { width: 300px; } body.mouse_v2, body.mouse_v2 * { cursor: wait !important; } body.mouse_v1, body.mouse_v1 * { cursor: wait !important; } div.mouse_v3, div.mouse_v3 a { cursor: no-drop !important; } #mouse_help_float { position: fixed; bottom: -100px; right: 20px; z-index: 1015; padding: 18px; display: flex; transition: bottom 0.3s ease 2s; -webkit-transition: bottom 0.3s ease 2s; height: 24px; background: var(--base-cont-top); box-shadow: var(--shadow-cont-minor-outline); border-radius: 32px; align-items: center; } #mouse_help_float.vis, #mouse_help_float:hover { bottom: 20px; transition: bottom 0.3s ease; -webkit-transition: bottom 0.3s ease; } #mouse_help_float span { float: left; margin: -20px -10px; transform: scale(0.7); -webkit-transform: scale(0.7) } #mouse_help_float i { float: left; font: 20px/20px var(--font-base); margin: 0 0 0 5px } #mouse_help_float a.ico_r { width: 28px; height: 28px; text-align: center; box-shadow: var(--shadow-brd-enable); border-radius: 16px; display: flex; justify-content: center; align-items: center; position: relative; } #mouse_help .ico_feature { background: url(/assets/img/color/feature_illustration_pack.svg); width: 176px; height: 96px; display: block; margin: 0 0 10px; } #mouse_help .ico_feature2 { background-position: 0 -116px } #mouse_help .ico_feature3 { background-position: 0 -232px } #mouse_help .help_menu a.feature { width: 176px; padding: 10px; margin: 10px 10px 10px; border-radius: 12px; border: none; } #mouse_help .help_menu a.feature:hover { background: var(--menu-item-selected); border: none; color: var(--base-txt-link-minor); } #mouse_help .help_menu a.feature .ico { margin: 0 0 0 5px } @media (max-width: 1024px) { #mouse_help .in {text-align:left;} .eye_conf .mouse_help {display:none} } @media (max-width: 900px) { #mouse_help .in div {width:130px;font:italic var(--font-ui-13-small-reg)} #mouse_help .in div b, #mouse_help .r .inline {font:var(--font-ui-13-small-reg)} } @media (max-width: 768px) { #mouse_help {display:none !important} } @media print { #mouse_help {display:none} } /* -------------------------------------------------------------------------------------------------------------------*/ #preview_place { display: none; position: absolute; z-index: 1024; } #preview_place img { position: absolute; bottom: 0; left: 0; z-index: 1024; background: var(--base-cont-top); border: 1px solid var(--base-line-alt-cardbrd); padding: 10px; box-shadow: 0 0 15px var(--colors-alpha-dark-20); max-width: 192px; } #preview_place.preview_place_bot img { bottom: auto; top: 0 } #preview_place.ava_big img { width: 160px; height: 160px; border-radius: 160px; top: -10px; right: -10px; left: auto; } #preview_place.ava_right img { left: -10px; right: auto; } /* -------------------------------------------------------------------------------------------------------------------*/ .upgrade_msg { font: italic 13px/18px var(--font-base); color: var(--base-txt-tertiary); padding: 8px; text-align: center; h2 { font: 16px/20px var(--font-base); color: var(--base-txt-primary); .cnt_pro { font: bold 14px/20px var(--font-base); } } p { margin: 0 0 6px 0; } .usage_info { display: flex; justify-content: center; margin: 0 auto; font: var(--font-ui-22-title-1-med); column-gap: 4px; } .usage_info.usage_info-overdraft > span:first-child { color: var(--base-txt-btn-w); } .row + .row { margin-top: 8px; } .button_upgrade { padding: 12px 24px; border-radius: 30px; } .row:last-child { margin-bottom: 12px; } } /* -------------------------------------------------------------------------------------------------------------------*/ /* Messages from Worksection */ .alertblock { margin-bottom: 20px } .alertblock .title { background: var(--base-cont-top); color: var(--base-txt-primary); padding: 7px 10px 7px 10px; font: bold 14px/24px var(--font-base); margin: 0 0 1px; border-radius: 8px 8px 0 0; } .alertblock .it { padding: 0 0 5px 0; font: 14px/20px var(--font-base) } .alertblock .it2 { padding: 0 0 5px 0; font: 14px/20px var(--font-base) } .alertblock .it .ico_l { margin: 0 0 0 -24px; display: none } .alertblock .title .ico_r { margin: 2px 0 0 0 } .alertblock .text { padding: 15px; font: 14px/20px var(--font-base); background: var(--base-cont-top); border-radius: 0 0 8px 8px; } .alertblock_news .text { font: var(--font-ui-13-small-reg); } .alertblock form { padding: 10px 100px 0 0; } .alertblock form a.pay { float: right; margin: 0 -100px 0 -2px; width: 100px; text-align: center; color: var(--white-accent); /* border-radius:0 4px 4px 0 */ position: relative; z-index: 1; } .alertblock form .drop_select { color: var(--base-txt-accent); border-radius: 4px 0 0 4px; padding: 9px; background: var(--base-cont-top); border-color: var(--inp-cont-brd); } .alertblock form .drop_select:hover { color: var(--base-txt-max) } .alertblock form .drop_select .ico_l { margin: -12px 10px -12px 0 } .alertblock form .drop_select .ico_l { display: none } .alertblock form .drop_select small { color: var(--base-txt-secondary); font: 12px/20px var(--font-base); } .alertblock form .drop_select span.drop { background-color: var(--base-cont-top); border-color: var(--base-cont-top); } .alertblock div.it a:hover, .alertblock div.it2 a:hover { background: var(--base-hlt-hover); color: var(--base-txt-link-major); padding: 2px 5px; margin: -2px -5px; border-radius: 5px; } .alertblock .status { font: 12px/16px var(--font-base) } .alertblock .progress, .alertblock .progress_na { margin: 3px 0; max-width: 350px; width: auto; } .alertblock .text .ico_flag { vertical-align: -5px; } /* -------------------------------------------------------------------------------------------------------------------*/ .alertblock_demo .text { text-align: center; padding: 20px 20px 25px; border-radius: 20px; background: var(--base-cont-low); margin: 20px 0 0; } .alertblock_demo .text .ico_r { margin: -12px; } .alertblock_demo .button { margin: 15px 0; border-radius: 20px } .alertblock_help { background: var(--base-cont-top); border-radius: 20px; margin: 0 0 15px; padding: 16px 24px; box-shadow: 0 0 0 1px var(--base-line-secondary); } .alertblock_help .title { margin: 0 auto 24px; max-width: 360px; font: bold 16px/20px var(--font-base); box-sizing: border-box; padding: 6px 0 6px 40px; } .alertblock_help .title .msg_ico { background: url(/assets/img/color/notifier_iconset.svg) no-repeat -160px 0; width: 40px; height: 40px; margin: -10px 0 -10px -46px; transform: scale(0.8); } .alertblock_help .text { border-radius: 0 0 15px 15px; background: var(--base-cont-top); padding-top: 0; font: 14px/20px var(--font-base); margin: 0 auto; max-width: 360px; padding: 0 16px; box-sizing: border-box } .alertblock_help .text .in { max-width: 360px; margin: 0 auto; } .alertblock_help iframe { margin: 10px auto; width: 100%; height: 17.5vw; max-width: 360px; max-height: 200px; display: block } .alertblock_help img { width: 110%; width: calc(100% + 32px); height: auto; margin: 0 -16px; } .alertblock_help .video { display: block; padding: 15px 0 0; position: relative; text-align: center; } .alertblock_help .video img { max-width: 370px; border-radius: 15px; } .alertblock_help .video:before { cursor: pointer; content: ''; position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; transition: 0.3s; background: url(/assets/img/color/ws_allset_xy.svg) -240px -480px; background-size: 600px 600px; margin: -30px; transform: scale(1.5); -webkit-transform: scale(1.5) } .alertblock_help .video:hover:before { transform: scale(2); -webkit-transform: scale(2); } .alertblock_help .inline { float: right; margin: 5px 0; color: var(--base-txt-tertiary) } .alertblock_help .buts { padding-top: 15px; clear: both; max-width: 360px; margin: 0 auto; font: var(--font-ui-13-small-reg); } .alertblock_help .buts .button { border-radius: 20px; } .alertblock_help .likes { margin-top: 10px; } .alertblock_help .likes a.like_ { margin: 0 5px; float: none; display: inline-block; padding: 6px 10px; } .alertblock_help .likes a.like_ span { margin: 0 10px 0 0 } .alertblock_help .deleted { display: none; background: var(--base-cont-low); padding: 7px 15px; font: 14px/32px var(--font-base); } .alertblock_help.deleted .deleted { display: block; } .alertblock_help.deleted .text, .alertblock_help.deleted .title { display: none; } .alertblock_help .rule { font: 12px/20px Courier; padding: 10px 20px; background: var(--base-cont-low); border-radius: 0 0 20px 20px; margin: 24px -24px -16px; } /* -------------------------------------------------------------------------------------------------------------------*/ /* New account */ #start { width: 480px; margin: 30px auto; text-align: center; } #start h1 { margin-bottom: 30px; } #start .f1 { font: italic 16px/30px var(--font-base); padding: 30px 0 0 0 } #start .f1 b { display: inline-block; background: var(--base-hlt-w-pressed); font: bold 12px/20px var(--font-base); padding: 2px 10px; border: 1px solid var(--base-btn-alert-primary-minor); border-radius: 4px; margin: 0 0 0 5px; cursor: pointer } #start .msg_ico { background-position: -240px -40px; margin: 20px auto 30px auto; display: block; float: none } #start .button_big { width: 380px; text-align: left } body[data-lang="2"] #start .button_big { max-width: 240px; } #start .button_big { width: auto } #start .or_line { border-top: 1px solid var(--base-line-alt-cardbrd); margin: 60px 0 0 0; text-align: center; font: 16px/22px var(--font-base); color: var(--base-txt-secondary) } #start .or_line .or { display: block; width: 40px; background: var(--base-surf-top); margin: -13px auto 30px; color: var(--base-txt-muted); font: 14px/22px var(--font-base) !important } #start .or_line .button { font-weight: normal; background: var(--base-cont-top); margin: 30px 0 0 0; padding: 10px 25px } @media (max-width: 640px) { #start .start {font:14px/20px var(--font-base)} } @media (max-width: 560px) { #start {width:auto; margin:30px 10px;} #start .button_big {width:auto} } @media (max-width: 480px) { #start .start {font:var(--font-ui-13-small-reg);} } @media (max-width: 360px) { #start .start {font:12px/14px var(--font-base);} #start .start br {display:none} } /* -------------------------------------------------------------------------------------------------------------------*/ #migrate { } #migrate .migrate { } #migrate .inputBlock { padding: 0; } #migrate .migrte_ { /* background: var(--base-cont-top); */ display: none; } #migrate .migrte_.act { display: block } #migrate .mig_title { margin: 8px 0; } #migrate .mig_hint { padding: 8px 16px; display: flex; flex-direction: row; gap: 12px; font: var(--font-ui-14-regular-reg); color: var(--base-txt-primary); align-items: center; } #migrate .mig_hint > span { font: var(--font-ui-14-regular-semi); } #migrate .mig_content { } #migrate .migrte_ .mig_btn { padding: 12px 0; } #migrate .inputBlock__wrapper { padding: 8px 0; } #migrate .mig_content input[type=checkbox] { /* vertical-align: middle; */ } #migrate input:-webkit-autofill { color: var(--base-txt-accent) !important; background: var(--inp-cont-top) !important; -webkit-box-shadow: none !important } #migrate .mig_content a.get_ico { position: relative } #migrate .mig_content a.get_ico:after { content: ' '; position: absolute; width: 20px; height: 20px; background: url(/assets/img/color/iconset.svg) no-repeat -40px -640px } #migrate.home { width: auto; min-width: initial; padding: 20px 0; margin: 0 -40px; } #migrate .ico_mig { width: 150px; height: 50px; margin: auto; display: block } #migrate ws-logo { display: flex; margin: auto; } #migrate .ico_mig_bc { background: url(/assets/img/color/ws_migration_logos.svg) no-repeat; background-size: 150px 700px } #migrate .ico_mig_mp { background: url(/assets/img/color/ws_migration_logos.svg) no-repeat 0 -50px; background-size: 150px 700px } #migrate .ico_mig_ms { background: url(/assets/img/color/ws_migration_logos.svg) no-repeat 0 -100px; background-size: 150px 700px } #migrate .ico_mig_ji { background: url(/assets/img/color/ws_migration_logos.svg) no-repeat 0 -150px; background-size: 150px 700px; } #migrate .ico_mig_as { background: url(/assets/img/color/ws_migration_logos.svg) no-repeat 0 -200px; background-size: 150px 700px; } #migrate .ico_mig_px { background: url(/assets/img/color/ws_migration_logos.svg) no-repeat 0 -250px; background-size: 150px 700px; } #migrate .ico_mig_bx { background: url(/assets/img/color/ws_migration_logos.svg) no-repeat 0 -300px; background-size: 150px 700px; } #migrate .ico_mig_tr { background: url(/assets/img/color/ws_migration_logos.svg) no-repeat 0 -350px; background-size: 150px 700px; } #migrate .ico_mig_wr { background: url(/assets/img/color/ws_migration_logos.svg) no-repeat 0 -400px; background-size: 150px 700px; } #migrate .ico_mig_ws { background: url(/assets/img/color/ws_migration_logos.svg) no-repeat 0 -450px; background-size: 150px 700px; } #migrate .migrate p.note { padding-left: 30px; color: var(--base-txt-secondary) } #migrate .migrate p.note b { color: var(--base-txt-accent) } #migrate .migrate span.ico_l { margin: 0 0 0 -30px } #migrate .mig_buts { text-align: center; padding: 12px 0; border-radius: 8px } #migrate .mig_buts .button, #migrate .mig_buts ws-btn { min-width: 240px } #migrate_start { float: right; width: 50%; margin: 0 -52% 0; text-align: center; font: 16px/24px var(--font-base); color: var(--base-txt-secondary); padding: 100px 0 0 0; } #migrate_start .button { margin-top: 10px } #migrate .title { font: bold 16px/20px var(--font-base); padding: 12px 0; display: flex; align-items: center; justify-content: space-between; } #migrate .migrate_icons { flex-direction: initial; display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 12px; padding: 8px 0; } #migrate .migrate_icons a { display: block; width: calc((100% - 24px) / 3); height: 50px; background: var(--base-cont-top); padding: 10px 0; border-radius: 12px; box-shadow: 0 0 0 1px var(--base-line-alt-cardbrd) inset; } #migrate .migrate_icons a:hover { box-shadow: var(--shadow-brd-hover); } #migrate .migrate_icons a[rel=ws] { display: none } #migrate .migrate_worksection { padding: 8px 0; } #migrate .migrate_icons a { box-shadow: var(--shadow-cont-minor-outline); } #migrate .migrate_worksection a, #migrate .mig_title { display: block; width: 100%; height: 50px; background: var(--base-cont-top); padding: 10px 0; border-radius: 12px; box-shadow: var(--shadow-cont-minor-outline); } #migrate .migrate_worksection a:hover, #migrate .migrate_icons a:hover { box-shadow: var(--shadow-cont-major-outline); background: var(--base-cont-top-elevated); } .setupPage#migrate .separatorLine { height: 20px; padding: 16px 0; display: flex; flex-direction: row; align-items: center; } .setupPage#migrate .separatorLine-left, .setupPage#migrate .separatorLine-right { flex-grow: 1; height: 1px; background: var(--base-line-tertiary); display: flex; align-items: center; } .setupPage#migrate .separatorLine-left { margin-left: 4px; } .setupPage#migrate .separatorLine-right { flex-direction: row-reverse; margin-right: 4px; } .setupPage#migrate .separatorLine-left:before, .setupPage#migrate .separatorLine-right:after { content: ''; display: inline-flex; background: var(--base-line-tertiary); width: 6px; height: 6px; border-radius: 3px; } .setupPage#migrate .separatorLine-left:before { margin-left: -6px; } .setupPage#migrate .separatorLine-right:after { margin-right: -6px; } .setupPage#migrate .separatorLine-text { color: var(--base-txt-secondary); font: var(--font-ui-12-mini-reg); padding: 0 8px; } #migrate.act .migrate_worksection { display: none } #migrate.act .migrate_request { display: none } #migrate.act .migrate_icons a[rel=ws] { display: block } #migrate.act .title { display: none } #migrate .migrate_request { flex-direction: initial; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 12px 0; } #migrate .migrate_icons a.act { box-shadow: var(--shadow-brd-focus); } #migrate.home .migrate_icons a { width: calc(100% / 3 - 40px / 3); } @media (min-width: 900px) { #migrate .migrate.act ~ .migrate_icons { flex-direction:row; float: left; width: calc(100% / 3 - 10px); } #migrate .migrate.act ~ .migrate_icons a { width: 100% } } @media (max-width: 900px) { #migrate .migrate { float:none; width: auto; margin: 0 0 35px } #migrate .migrate_icons a { width: calc(50% - 10px) } #migrate.home { margin: 0 } #migrate.home .migrate_icons a { width: calc(100% / 2 - 10px); } } @media (max-width: 480px) { #migrate .migrate { margin: 0; } #migrate .migrate_icons a .ico_mig { transform:scale(0.8) } #migrate .title ws-btn { display: none; } } /* IMPORT */ /* -------------------------------------------------------------------------------------------------------------------*/ .item.preview_import:hover a.onch { border-bottom: none } .import_selection, .export_action { display: flex; justify-content: center; padding: 10px 20px 10px 20px; text-align: center; background-color: var(--base-cont-mod-top) } .import_selection .label, .export_action .label { padding-top: 10px; color: var(--base-txt-secondary) } .import_selection .ms, .import_selection .csv, .export_action .ms, .export_action .csv, .export_action .xls, .export_action .vcf { display: inline-table; cursor: pointer; padding: 10px; border-radius: 8px; width: 110px; } .export_action .csv div:has(.loader_sm), .export_action .xls div:has(.loader_sm) { margin: auto; height: 80px; display: flex; justify-content: center; align-items: center; } .import_selection .ms:hover, .import_selection .csv:hover, .export_action .ms:hover, .export_action .csv:hover, .export_action .xls:hover, .export_action .vcf:hover { background-color: var(--menu-item-selected) } .import_selection .ms .image, .export_action .ms .image { margin: auto; height: 50px; width: 50px; background: url(/assets/img/color/ws_migration_logos.svg) no-repeat -50px -100px; background-size: 150px 850px } .import_selection .csv .image, .export_action .csv .image { margin: auto; height: 50px; width: 50px; background: url(/assets/img/color/ws_migration_logos.svg) no-repeat -50px -550px; background-size: 150px 850px } .export_action .xls .image { margin: auto; height: 50px; width: 50px; background: url(/assets/img/color/ws_migration_logos.svg) no-repeat -50px -600px; background-size: 150px 850px; } .export_action .vcf .image { margin: auto; height: 50px; width: 50px; background: url(/assets/img/color/ws_migration_logos.svg) no-repeat -50px -800px; background-size: 150px 850px; } .export_action .disabled { opacity: 0.5; cursor: default; pointer-events: none } .export_action:hover .disabled { background-color: transparent } .import_content { padding: 15px 20px 15px 30px; } .import_content .hkey { box-shadow: 0 0 0 1px var(--base-hlt-selected) inset; background: var(--base-hlt-selected); color: var(--base-txt-primary); line-height: inherit; border-radius: 4px; margin: 0 2px; padding: 2px 5px; white-space: nowrap; font-weight: 400 } .import_content span.ico_l { margin: 0 0 0 -30px } .import_content p.note { padding-left: 30px; color: var(--base-txt-secondary) } .import_content p.note b { color: var(--base-txt-accent) } .import_btn { text-align: center; padding: 10px 10px 25px; } .import_btn .button { min-width: 200px } .import_btn.preview { box-shadow: none; position: relative; height: 30px; padding: 25px; } .import_btn.preview .add_actions { display: inline-block; float: left; font: var(--font-ui-13-small-reg); padding: 0; } .import_btn.preview .add_actions b { color: var(--base-txt-primary) } .import_btn.preview .add_actions label { padding: 4px 4px 4px 0 } .import_btn.preview .add_actions input { vertical-align: top } /* PREVIEW OF IMPORT */ #preview_import { min-height: 300px; padding-top: 0 !important; } /* ----------- MinifyCSS: LIGHT THEMEMinifyCSS: LIGHT THEME ----------- */#preview_import{border-left: 1px solid var(--base-cont-mod-top);border-right: 1px solid var(--base-cont-mod-top);} /*----------- MinifyCSS: STOPMinifyCSS: STOP ----------- */ .ms_project .preview_import { height: 20px } .ms_project .preview_import.tags_high { height: 40px } .csv .preview_import { } .csv .preview_import.tags_high { height: 90px } .preview_import { } .preview_import.item_error, .preview_import.sub_task.item_error { background: var(--base-hlt-w-easy); } .preview_import.title { border: none !important; background: var(--base-cont-mid); height: 32px; display: flex; font: var(--font-ui-11-micro-med); box-shadow: 0 0.5px 0 0 var(--base-line-tertiary) inset, 0 -0.5px 0 0 var(--base-line-tertiary) inset; padding: 0px 20px 0 28px; } .preview_import.title .import_field { font: var(--font-ui-11-micro-med); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; height: 32px; } .preview_import.title ~ form > .scrollZone-bottom.scrollZone-top { box-shadow: none } .preview_import.title .import_field.import_priority { text-align: center } .preview_import.sub_task { } .ms_project .preview_import.sub_task.tags_high:before { height: 40px !important } .csv .preview_import.tags_high.sub_task:before { height: 80px !important } .preview_import.sub_task.level2 .import_title:before { color:var(--base-txt-ghost); font: var(--font-ui-14-regular-reg); letter-spacing:4px; margin:0 4px; content: '•'; } .preview_import.sub_task.level3 .import_title:before { color:var(--base-txt-ghost); font: var(--font-ui-14-regular-reg); letter-spacing:4px; margin:0 4px; content: '• •'; } .preview_import.sub_task .import_title { font: var(--font-ui-14-regular-reg); } .import_field { height:40px; padding: 0 8px; display: flex; align-items: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; align-content: center; } .import_field:not(.import_title) { box-shadow:0.5px 0 0 var(--base-line-tertiary) inset; } .import_title { padding: 0 4px 0 8px; } .import_field:hover a.onch { border-bottom: 1px dashed var(--base-txt-accent) !important } .import_field.import_title:hover a.onch { } .import_field .hide { display: none !important } .import_field .input2 { border: 1px solid var(--inp-cont-brd); border-radius: 2px } .import_field span.ico_alert_sm,.import_field span.ico_yes { } .import_field span.value { display: block; overflow: hidden; text-overflow: ellipsis; } .import_field span.value a.onch { overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .import_field .ico_remove { display: none; transform: scale(0.4); margin-left: -5px !important; cursor: pointer } .import_field .ico_info { top: -1px !important; left: 0 !important; margin: 0 5px 0 -25px !important } .import_field:hover .ico_remove { display: inline-block } .import_field:hover .ico_remove.hide { display: none } .import_field .date_clear { color: var(--base-txt-primary); padding-left: 2px; cursor: pointer } .import_title { font: var(--font-ui-14-regular-reg); color: var(--base-txt-primary); } .import_title ._tags span { box-shadow: 0 0 0 2px var(--base-cont-mod-top) } .tags_high .import_title ._tags { position: absolute; width: 35% } .sub_task .import_title ._tags span { box-shadow: 0 0 0 2px var(--base-cont-mid) } .import_title a.onch { } .item_error .import_title ._tags span { box-shadow: 0 0 0 2px var(--base-cont-note-major) } .import_field ws-icon[name=exclam_triangle-solid] { --icon-color: var(--base-btn-notice-minor);); width: 20px !important; --icon-size:16px; } .import_field ws-icon[name=check_alt] { --icon-color: var(--base-btn-notice-minor);); width:32px; --icon-size:16px; display: none; } .import_field:has(ws-icon[name=exclam_triangle-solid]) { background:var(--base-hlt-w-hover); display: flex; } .import_field:has(ws-icon[name=check_alt]) { background: var(--base-hlt-alt-notice); } .import_user_from { width: 15%; font: var(--font-ui-13-small-reg); } .import_user_to { width: 15%; font: var(--font-ui-13-small-reg); } .import_priority { width: 32px; } .import_priority span { margin: auto 10px auto auto } .import_start_date { width: 10%; } .import_end_date { width: 10%; } .import_error { background: var(--base-cont-note-major) !important } .import_ajax_title { margin: 0 !important; padding: 0 !important } .import_ajax_title .ico_project_big { margin: -7px 10px -3px 0; } .modal__dataTable__item:hover .import_field a.onch { } #preview_import .modal__dataTable__item:first-child { box-shadow: none } .import_title ._tags { height:18px; } /* PREVIEW OF IMPORT */ /* EXPORT */ /* -------------------------------------------------------------------------------------------------------------------*/ .export_content { padding: 15px 20px 15px 40px; background-color: var(--base-cont-low); } .export_content .hkey { box-shadow: 0 0 0 1px var(--base-hlt-selected) inset; background: var(--base-hlt-selected); color: var(--base-txt-primary); line-height: inherit; border-radius: 4px; margin: 0 2px; padding: 2px 5px; white-space: nowrap; font-weight: 400 } .export_content span.ico_l { margin: 0 0 0 -30px } .export_content p.note { padding-left: 30px; color: var(--base-txt-secondary) } .export_content p.note b { color: var(--base-txt-accent) } .export_btn { text-align: center; padding: 15px; background: var(--base-cont-mod-top) url(/assets/img/color/alert_bg.svg) repeat-x left top } .export_btn .button:disabled { background: lightgrey; cursor: default } .export_btn .button:hover:disabled { background: lightgrey; cursor: default } .export.csv #filter_tasks, .export.xls #filter_tasks { min-height: 90px } .export #filter_author, .export #filter_assignee, .export #filter_project, .export #filter_costs { height: 35px } .export .title { font-weight: bold; cursor: pointer; margin: 0 0 10px 25px; width: 120px; -webkit-touch-callout: none; -webkit-text-size-adjust: none; -webkit-user-select: none; user-select: none } .export .title.checked { text-decoration: underline } .export .title span { margin: 0 5px 1px } .export .row { margin-left: 50px; width: 80% } .export .field { display: inline-block; width: 20%; float: left } .export .field.margin_left { margin-left: 50px } .export .field label, .export .row label { padding: 0; cursor: pointer } .export .field div { display: flex; align-items: center; padding: 0 0 5px 0 } .export .row div { display: inline-flex; width: 24% } .export .field div.empty { height: 20px } .export .field div i, .export .row div i { float: left } .export .field div span, .export .row div span { white-space: nowrap; padding: 0 5px 0 0; float: left; max-width: 90px } .export .line { border-top: 1px dashed var(--base-line-secondary); background: var(--base-line-alt-cardbrd); height: 0; margin: 0 30px 10px 20px } /* -------------------------------------------------------------------------------------------------------------------*/ /* CLIENT QUESTIONS FORM */ .modal.client_questions_modal { border-radius: 40px; } .client_questions { padding: 40px; border-radius: 40px; background: var(--base-cont-low); form { display: flex; gap: 40px; } .welcome { width: 300px; padding-right: 20px; display: flex; flex-direction: column; gap: 20px; .logo { display: flex; gap: 8px; align-items: center; --icon-size: 38px; ws-icon { width: 38px; height: 38px; } span { color: var(--base-txt-primary); font: bold 18px/20px "Work Sans"; letter-spacing: 0.234px; } } .title { display: flex; flex-direction: column; .name { font: 28px/40px var(--font-base); font-weight: 590; overflow: hidden; text-overflow: ellipsis; } .hello { font: 24px/32px var(--font-base); font-weight: 510; letter-spacing: 0.312px; } } .text { font: var(--font-ui-13-small-med); color: var(--base-txt-secondary); } } .info { width: 480px; min-height: 320px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; .setup { display: flex; padding-top: 32px; background: var(--base-cont-top-elevated); box-shadow: var(--shadow-cont-major-outline); border-radius: 24px; .step1, .step2 { display: flex; flex-direction: column; gap: 8px; padding: 0 32px 32px 32px; flex-grow: 1; .title { font: var(--font-ui-16-title-3-semi); display: flex; align-items: center; gap: 8px; } .step_labels { display: flex; gap: 8px; flex-grow: 1; padding-top: 8px; label { background: var(--base-cont-low); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; align-items: center; cursor: pointer; &:hover { box-shadow: inset 0 0 0 1px var(--base-line-primary); } &.act { background: var(--base-cont-top); box-shadow: inset 0 0 0 2px var(--base-hlt-invert-major); pointer-events: none; .step_icon { background: var(--base-hlt-invert-major); } } .step_icon { padding: 8px; background: radial-gradient(circle, var(--base-hlt-g-active) 0%, var(--base-cont-trans-mid) 100%); border-radius: 12px; margin: 0 auto; border: 1px solid var(--base-line-tertiary); box-shadow: 0 1px 1px -0.5px rgba(22, 54, 70, 0.06), 0 3px 3px -1.5px rgba(22, 54, 70, 0.06), 0 8px 8px -4px rgba(22, 54, 70, 0.06); --icon-size: 28px; --icon-color: var(--white-accent); ws-icon { width: 28px; height: 28px; } } span.title { font: var(--font-ui-14-regular-semi); letter-spacing: -0.32px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } } } .options { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; ws-btn.act button { background: var(--base-cont-top); box-shadow: inset 0 0 0 1.5px var(--base-hlt-invert-major); } input[type="text"] { width: 100%; height: 32px; background: var(--base-cont-low); border-radius: 8px; box-shadow: inset 0 0 0 1px var(--base-line-secondary); padding: 0 8px; &:not(:placeholder-shown) { box-shadow: inset 0 0 0 1.5px var(--base-hlt-invert-major); } &:focus { box-shadow: inset 0 0 0 1.5px var(--base-hlt-invert-major); background: var(--base-cont-top); } } } .line { width: calc(100% + 64px); height: 1px; background: var(--base-line-tertiary); margin: 12px -32px; } .demo { width: calc(100% + 64px); margin: 12px -32px -32px -32px; padding: 20px 32px 32px; background: var(--base-cont-low); border-radius: 0 0 24px 24px; box-sizing: border-box; border-top: 1px solid var(--base-line-ghost); .title { margin-bottom: 16px; } } } } .questions_buttons { background: none; display: flex; justify-content: flex-end; gap: 12px; } } .hidden { display: none !important; } } body.mobile .client_questions_modal { box-shadow: 0 200px 0 200px 0 var(--base-cont-low); top: 0; border-radius: 0; .modal__swipe { display: none;} .client_questions { border-radius: 0; padding: 20px; height: 100%; form { flex-direction: column; gap: 20px; } .welcome { padding: 0; width: 100%; .logo { justify-content: center; } .text { font-size: 12px; } } .info { width: 100%; flex: 1; .setup { padding-top: 16px; .step1, .step2 { padding: 0 16px 16px 16px; .step_labels { label { padding: 12px 0 8px 0; .title { font: 12px/16px var(--font-base); } } } .line { width: calc(100% + 32px); margin: 12px -16px; } .demo { width: calc(100% + 32px); margin: 12px -16px -16px -16px; padding: 16px; } } } .questions_buttons button { flex: 1; } } } } /* CLIENT QUESTIONS FORM */ /* -------------------------------------------------------------------------------------------------------------------*/ #api_key .input { background: var(--inp-cont-top); padding: 7px 10px; margin: 0 10px 0 0; border-radius: 4px; white-space: nowrap; overflow: hidden; float: left; border: 1px solid var(--inp-cont-brd); font: var(--font-ui-13-small-reg); color: var(--base-txt-secondary) } #api_key .button { padding: 8px 10px; } #api_key p { padding-top: 15px; } .file_api { float: left; margin: 9px 0 7px 0 !important; padding: 0 !important; } .file_api a { color: var(--base-txt-secondary); font: 12px/20px var(--font-base) } .file_api a:hover { color: var(--base-txt-link-minor) } /* -------------------------------------------------------------------------------------------------------------------*/ #hotkey { padding: 20px 40px; } #hotkey .l { float: left; width: 320px; margin: 10px 15px } #hotkey .l div { height: 28px; font: var(--font-ui-13-small-reg); color: var(--base-txt-secondary); } #hotkey hr { height: 10px; border: none; border-top: 1px solid var(--base-cont-low) } #hotkey div.sp { height: 15px; } #hotkey span { float: left; width: 120px; } #hotkey i, #hotkey.hotkey-active .alt i { border: 1px solid var(--inp-cont-brd); background: var(--inp-cont-top); padding: 2px 4px; font: 14px/20px var(--font-base); border-radius: 4px; color: var(--base-txt-accent); } #hotkey .alt i { border-color: var(--base-cont-low); background: none; box-shadow: none; color: var(--base-txt-muted) } #hotkey .alt span { color: var(--base-txt-muted) } #hotkey.hotkey-active .alt span { color: inherit } #hotkey h2 { font: 16px/20px var(--font-serif); color: var(--costs-money-major); border-bottom: 1px solid var(--base-line-alt-cardbrd); padding: 0 0 5px; margin: 0 0 15px 0 } .hotkey { color: var(--base-txt-alert-minor) } /* -------------------------------------------------------------------------------------------------------------------*/ /* Trackktor ICON */ #tio-msg-wdgt { z-index: 1010 !important } #tio-msg-wdgt-toggle-btn { bottom: 20px !important; left: 20px !important; } #tio-msg-wdgt-icon:before { content: ''; display: block; width: 30px; height: 30px; background: var(--base-cont-top) url(/assets/img/color/separators_iconset.svg) no-repeat -90px -240px; border-radius: 20px; border: 2px solid var(--base-cont-top) } #tio-msg-wdgt-icon:hover:before { transform: rotate(360deg); transition: transform 0.6s ease; -webkit-transform: rotate(360deg); transition: -webkit-transform 0.6s ease } #tio-msg-wdgt-icon img { display: none !important } body[data-page=report] #tio-msg-wdgt-toggle-btn { bottom: 70px !important; left: 20px !important; } body[data-page=report] #fc_override, body.bd_freeze #fc_override { bottom: 60px } body[data-page=report] #fc_frame, body[data-freeze=on] #fc_override { bottom: 60px !important } @media print { #fc_frame, #fc_override { display: none !important } } /* -------------------------------------------------------------------------------------------------------------------*/ .reg_text { color: var(--base-txt-secondary); font: 18px/28px var(--font-base); padding: 30px; text-align: center } .reg_text b { color: var(--base-txt-primary) } .reg_text .ico_c { margin: 20px auto; } /* -------------------------------------------------------------------------------------------------------------------*/ .hot_dot, .warm_dot { position: relative; margin-left: 8px } .hot_dot::after, .warm_dot::after { content: "\00a0" } .hot_dot::before, .warm_dot::before { content: ''; position: absolute; background: var(--base-txt-btn-w); display: inline-block; width: 2px; height: 2px; border: 2px solid var(--base-txt-btn-w); border-radius: 4px; top: 50%; left: 0; margin: -3px 0; } .warm_dot::before { background: var(--lbl-upcoming-invert); border-color: var(--lbl-upcoming-invert) } .hot_dot:hover:before { background: var(--base-txt-btn-w); } .warm_dot:hover:before { background: var(--lbl-upcoming-invert) } /* -------------------------------------------------------------------------------------------------------------------*/ .mail_error { padding: 0 18px; height: 1%; position: relative; margin-bottom: 15px; } .mail_error .text { margin-left: 95px; margin-bottom: 15px; color: var(--base-txt-secondary); } .mail_error .text a { font-size: 14px } .mail_error .clear { margin-left: 95px; background: var(--base-surf-top) } .mail_error p { margin: 4px 0; font-size: 12px } .mail_error div.item { font: 12px/20px var(--font-base); margin: 15px 0 0 -5px; padding-left: 32px; } .mail_error div.item:first-child { margin-top: 0 } .mail_error span.date { float: right; font: 11px/20px var(--font-base); color: var(--base-txt-tertiary) } .mail_error a { font: bold 14px/20px var(--font-base) } .mail_error .av_sm { float: left; margin: -2px 0 -2px -32px; cursor: pointer } .mail_error .button_sm { margin: 5px 0 0 0; } /* -------------------------------------------------------------------------------------------------------------------*/ .account_delete { border: 1px solid var(--colors-graphite-trans-200); cursor: pointer; background: var(--colors-graphite-trans-200); padding: 7px 0; margin: 0 auto 15px auto; height: 45px; -webkit-transition: background 2s ease; transition: background 2s ease; } .account_delete:hover { background: var(--base-txt-accent) } .account_delete_bot { position: relative; top: 50px; z-index: 1000 } .modal__content .account_delete { width: auto; margin: 0; padding: 15px 30px 30px; border-width: 0 } .account_delete_on { background: var(--base-txt-accent); height: auto } .account_delete span.delete_ico { width: 45px; height: 45px; display: block; margin: 0 auto; background: url(/assets/img/secure_iconset.png) no-repeat -225px 0; } .account_delete_on span.delete_ico { background: url(/assets/img/secure_iconset.png) no-repeat -225px -45px } .account_delete .text { display: none } .account_delete_on .text { display: block; color: var(--white-accent); text-align: center; padding: 10px 0 15px 0; } .account_delete a.delete { background: var(--colors-red-vivid-800); font: bold 14px var(--font-base); color: var(--white-accent); padding: 5px 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .account_delete a.delete:hover { background: var(--base-txt-alert-minor) } .account_delete p { margin: 0 0 20px 0 } .account_delete h4 { color: var(--colors-red-vivid-800); font: bold 14px var(--font-base) } /* -------------------------------------------------------------------------------------------------------------------*/ task-wait:not(.wait_short) { background: var(--base-hlt-hover); font: 11px/20px var(--font-base); display: inline-block; vertical-align: middle; color: var(--base-txt-link-major) !important; padding: 0 7px 0 5px; border-radius: 3px; cursor: pointer; box-shadow: 0 0 1px var(--inp-hlt-brd) inset; } task-wait:not(.wait_short):hover { background: var(--inp-hlt-bg) } task-wait:not(.wait_short):before { content: ''; float: left; width: 20px; height: 20px; background: url(/assets/img/color/iconset.svg) no-repeat -20px -1120px; transform: scale(0.6); -webkit-transform: scale(0.6); margin: 0 0 0 -5px; } task-wait:not(.wait_short) { margin: 0 0 -4px 0; vertical-align: top; } task-wait ~ .pubdate { display: none } div#wait_post { display: none } a.wait_plus.wait_long:not(.wait_seconds) { display: none } a.wait_plus { position: relative } a.wait_plus:hover:after { content: '+3 min'; position: absolute; left: 28px; top: 5px; color: var(--base-btn-primary-minor) } a.wait_plus:hover:before { transform: scale(0.8) !important; -webkit-transform: scale(0.8) !important; position: relative; left: -5px } a.wait_plus:hover { color: transparent !important } .notify_block task-wait { color: var(--base-txt-link-major) !important; box-shadow: 0 0 0 1px var(--inp-hlt-brd) inset; font: 12px/20px var(--font-base); padding: 5px 15px 5px 10px; margin: -6px 0; } .notify_block a.wait_plus:hover { color: transparent !important } .notify_block task-wait:before { transform: scale(1); -webkit-transform: scale(1); margin: 0 5px 0 0 ; } /* -------------------------------------------------------------------------------------------------------------------*/ .notify_block { font: var(--font-ui-13-small-reg); padding: 0; float: left; height: 20px; color: var(--base-txt-ghost) } .menu__group > .notify_block { float: none; padding: 0 4px; height: 32px; background: none !important; color: var(--base-txt-tertiary); } .menu__group > .notify_block_act { color: var(--base-txt-primary); } .search_started .menu__group-notify { display: none } .notify_block:not(.menu__item) ws-icon { margin:-2px 10px -2px -2px; width: 24px; height: 24px; } .notify_block ws-icon svg { width: 24px; height: 24px; } .notify_block.menu__item ws-icon svg { width: 20px; height: 20px; } .notify_block:not(.notify_block_act) ws-icon use:last-child { display: none } .notify_block_act ws-icon use:first-child { display: none } .notify_btn:not(.notify_btn_act) ws-icon use:last-child { display: none } .notify_btn_act ws-icon use:first-child { display: none } .notify_block:not(.menu__item) ws-icon use:last-child { fill: var(--base-btn-notice-minor); } .notify_block ws-icon use:first-child { fill: var(--base-txt-secondary); } .notify_block ws-icon use:first-child:last-child { display:block; } .modal .notify_block .ico_l { margin-left: -2px; } .notify_block_act .ico_l, .modal__content .notify_block .ico_l, .floatingButtons-gantt .notify_block .ico_l, .notify_block a:hover .ico_l { opacity: 1 } .notify_block_act { color: var(--base-txt-primary) } /*body.bd_session .notify_block_act .ico_l {filter:hue-rotate(-150deg);}*/ .notify_block a { color: inherit !important } .modal__content .notify_block a span.inline, .floatingButtons-gantt .notify_block a span.inline { color: var(--base-txt-primary); opacity: 0.5 } .notify_block_act a:not(task-wait) { color: var(--base-txt-primary) !important } .modal__content .notify_block_act a span.inline, .modal__content .notify_block a:hover span.inline, .floatingButtons-gantt .notify_block_act a span.inline, .floatingButtons-gantt .notify_block a:hover span.inline { opacity: 1 } .notify_block b { color: var(--base-txt-tertiary) !important; font-weight: normal; margin: 0 0 0 2px; opacity: 0 } .notify_block_act b { opacity: 1 } .notify_block_act a:hover b { opacity: 0 } .notify_block a:not(task-wait):hover { color: var(--base-txt-secondary) !important } .notify_block_xs { position: relative; } .notify_block_xs .inline { display: none; position: absolute; left: 35px; top: -7px; white-space: nowrap; padding: 7px 10px; z-index: 10; background: var(--base-txt-max); background: var(--colors-alpha-dark-70); color: var(--white-accent) !important; border-radius: 4px; } .notify_block_xs:hover .inline { display: inline } .massPanel .notify_block { float: left; margin: 5px 10px 5px 0; } /* -------------------------------------------------------------------------------------------------------------------*/ #confirmMenu .text { white-space: pre-wrap } /* ---------------------------------------------------- Slider --------------------------------------------------------*/ .eye_conf { padding: 0 10px 0 15px; position: relative; margin: 0 0 1px 0; display: none; } .eye_conf_2line form { min-height: 91px } .eye_conf form { padding: 15px 50px 15px 0 } .eye_conf h4 { padding: 0; margin: 0 0 5px 0; font: bold 13px var(--font-base) } .eye_conf .eye_line { font: 12px/20px var(--font-base); padding: 13px 3px 13px 30px; white-space: nowrap; -webkit-transform: translateZ(0); position: relative; height: 20px } .eye_conf .eye_noico { padding-left: 0 } .eye_conf .eye_line b { display: block; padding: 14px 0 0 0; font: 12px/20px var(--font-base) } .eye_conf .eye_line .ico_l { position: absolute; top: 7px; left: 0 } .eye_conf .eye_line div { position: relative; height: 20px; display: inline-block; padding: 3px 0; margin-right: 10px; border-radius: 6px; } .eye_conf .eye_line a { padding: 3px 8px; margin: 0 1px 0 0; position: relative; white-space: nowrap; font: var(--font-ui-13-small-reg); } .eye_conf .eye_line i { position: absolute; left: -5px; top: -6px; border-radius: 6px; width: 30px; height: 30px; display: none; margin-top: 2px; } .eye_conf .eye_line i.ani { transition: all 0.2s ease; -webkit-transition: all 0.2s ease } .eye_conf .button { position: absolute; right: 15px; bottom: 27px; border-radius: 5px; display: none; width: 60px; text-align: center } .eye_conf .reset { position: absolute; right: 15px; bottom: 73px; display: none; width: 40px; text-align: center } .eye_conf .reset_1line { bottom: 27px; right: 85px } .eye_conf .eye_l { float: left; margin: 0 10px 0 0 } .eye_conf .eye_r { float: right; margin: 0 0 0 10px; text-align: right } .eye_hint { float: right; color: var(--base-txt-muted); font: 11px/20px var(--font-base); display: none } .eye_hint2 { position: absolute; right: 20px; top: 0; color: var(--base-txt-muted); font: 11px/20px var(--font-base); padding: 0 10px 0 0; white-space: nowrap; } a.eye_hint { color: var(--base-txt-muted) !important } a.eye_hint:hover, a:hover .eye_hint2, .eye_act2 .eye_hint2 { color: var(--base-txt-link-minor) !important } .modal__content .eye_conf { margin: 0 -10px 0 -50px; } .modal__content .eye_line { float: none; padding: 13px 0; } .modal__content .eye_name { font: 14px/20px var(--font-base); margin: 0 10px 0 0; color: var(--base-txt-secondary) } .eye_containter { height: 45px; } .eye_containter label { float: left; color: var(--base-txt-secondary); float: left; padding: 11px 0; } .eye_containter .eye_conf { display: block; float: left; padding: 0; margin-right: -35px; } .eye_containter .eye_conf .eye_line { padding: 10px 0 10px 10px; } .eye_containter .eye_nolabel .eye_line { padding-left: 0; /* margin-right:-100px; */ } .eye_conf .eye_line { color: var(--base-txt-secondary) } .eye_conf .eye_line b { color: var(--base-txt-tertiary) } .eye_conf .eye_line div { background: var(--base-cont-low); } .eye_conf .eye_line a { color: var(--base-txt-primary) } .eye_conf .eye_line a:hover { color: var(--base-txt-link-major); } .eye_conf .eye_line a.act { color: var(--base-txt-link-major); } .eye_conf .eye_line i { background: var(--inp-hlt-bg); border: 1px solid var(--inp-hlt-brd); box-shadow: var(--shadow-cont-minor); } #drophomemenu .ico_l { top: 13px; } .modal__content #drophomemenu { padding: 12px 28px; margin: 0 !important } .modal__content #dashboard_modal_sliders { padding: 0 20px 20px; margin: 0 !important; } .modal__content #drophomemenu .eye_line { padding: 13px 3px 13px 30px } #drophomemenu h4:before { content: ''; display: block; position: absolute; left: 0; right: 0; top: 10px; border-top: 1px solid var(--base-line-primary) } #drophomemenu h4 { position: relative; margin: 20px 0 10px 0; color: var(--base-txt-secondary); } #drophomemenu h4 b { color: var(--base-txt-primary); font: bold 14px/20px var(--font-base); } #drophomemenu h4 span { background: var(--base-cont-mod-top); padding: 0 10px 0 0; position: relative; font: 14px/20px var(--font-base); } /* -------------------------------------------------------------------------------------------------------------------*/ a.moredots, span.moredots { display: block; text-align: center; width: 36px; height: 20px; background: var(--flt-act-bg); color: var(--base-txt-primary) !important; border-radius: 10px; margin: 2px 0 0 95px; font: bold 14px/14px var(--font-base); letter-spacing: 2px; text-indent: 2px; padding: 0 !important; } ws-btn.moredots { display: block; width: fit-content; } a.moreico { display: inline-block; text-align: center; overflow: hidden; width: 36px; height: 14px; background: var(--flt-act-bg); color: var(--base-txt-primary) !important; border-radius: 10px; font: bold 14px/8px var(--font-base); letter-spacing: 2px; text-indent: 2px; vertical-align: -2px; } a.moredots:before, span.moredots:before, a.moreico:before { content: '...'; } a.moredots:hover, .more:hover span.moredots { background: var(--base-txt-link-minor); color: var(--white-accent) !important; } a.moredots_hid { background: var(--base-hlt-w-pressed) } a.moredots_hid:hover { background: var(--base-btn-alert-primary-minor) } a.moredots.but:before { display: none } a.moredots.but { font: 12px/20px var(--font-base); width: 100px } .morereload { background: var(--base-cont-top); padding: 10px; margin: 1px 0 0 0; } .commentList__item-active .morereload { background: var(--base-cont-mid) } .morereload a.moredots { margin: 0; } /* -------------------------------------------------------------------------------------------------------------------*/ #project_to { overflow-y: scroll; } .projects__group {padding: 0 12px 0 24px;} .projects__group ws-icon use:first-child { display: inline-block; } .projects__group ws-icon use:last-child { display: none; } .projects__group-collapsed .projects__group__content { display: none; } .projects__group-collapsed .projects__group__title use:first-child { display: none; } .projects__group-collapsed .projects__group__title use:last-child { display: inline-block; } .projects__group__title { display: flex; width: 100%; } .projects__group__title__name ws-icon:first-child { padding: 0 6px; } .projects__group__title__name ws-icon:first-child + ws-icon { padding-right: 6px; transform: scale(1.3) translate(2px, -1px); } .projects__group__title__name ws-icon:first-child + ws-icon svg { fill:var(--folder-color); } .projects__group__title__name, .projects__group__title__name:hover { flex: 1; color: var(--base-txt-primary); font: 700 16px/20px var(--font-base); } .projects__group__title__sw { color: var(--base-txt-secondary); font: 400 11px/20px var(--font-base); padding: 0 10px 0 4px; } .projects__group__title__sw .sw { margin-top: 2px; } .projects__group .proj_color { border-radius: 5px; margin: auto 6px; width: 20px; height: 20px; } .projects__group .proj_color ws-emoji { width: 16px; height: 16px; padding: 2px; } .projects__group .proj ws-icon[name="project_xl-invert"] { } .projects__group .proj ws-icon[name="project_xl-invert"] svg use { display: inline-block !important; } .projects__group .proj.act ws-icon[name="project_xl-invert"] svg use { } .projects__group__content { padding: 8px 0 16px 34px; } .projects__group__content .proj { font-size: 14px; height: 32px; line-height: 32px; color: var(--base-txt-primary); box-sizing: border-box; padding: 0 8px 0 0; border-radius: inherit; border-width: 0.5px 0px; border-style: solid; border-color: var(--base-hlt-g-hover); } .projects__group__content .proj .proj_text { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 2px; } .projects__group__content .proj.act { background: var(--base-hlt-hover); } .projects__group__content .proj.act:hover { background: var(--base-hlt-selected); } .projects__group__content .proj:not(.act):hover { background: var(--base-hlt-g-easy); } .projects__group__content .proj font { } .projects__group__content .inputCheckbox { /* float: left; */ /* padding: 1px 4px 0; */ } .projects__group__content .inputCheckbox span { background: none !important; transform: scale(0.8) translate(2px, 0px); } .projects__group__title .pg_counter { font-size: 14px; padding-left: 4px; color: var(--base-txt-act-major); } .projects__group__title .pg_counter span { color: var(--base-txt-tertiary); } .projects__group hr { margin: 17px 0 18px; border: none; border-top: 1px solid var(--base-line-secondary); } .projects__group span.label_arch3 { vertical-align: inherit; } #master_hid .buttons_checkboxes { background: var(--base-cont-note-major); margin-right: 24px; margin-left: 24px; border: 1px solid var(--base-line-tertiary); border-radius: 8px; padding: 16px; } .projects__group .proj_folder_my svg use { fill: var(--base-btn-fresh-minor); } .projects__group .proj_folder_user svg use { fill: var(--base-btn-primary-minor); } .projects__group-hidden, .proj-hidden { display: none !important; } /* -------------------------------------------------------------------------------------------------------------------*/ #admrole { padding: 0 24px; } #modProfile #admrole_out { padding: 0; } #admrole_descr { padding: 0 24px; overflow-y: scroll; } #admrole_descr .setupBlock + .setupBlock__content { padding-top: 16px; } #admrole_descr .setupBlock__item { flex-wrap: wrap; } #admrole_descr .setupBlock__title { height: auto; } #admrole_descr .setupBlock__title .in { display: inline-block; line-height: 24px; padding: 0 4px; } #admrole_descr .setupBlock__item .setupBlock__explain { padding-left: 40px; flex-basis: 100%; } #admrole_descr .setupBlock__text { padding: 0 8px 8px; } #admrole_descr .setupBlock__text:not(:first-child) { padding: 8px; } #admrole_out [data-role]::before { content: " "; display: table; } #admrole_out .roleBox { padding: 16px; background: var(--base-hlt-b-easy); border-radius: 12px; } #admrole_out .setupBlock__simple { padding: 18px 26px; box-sizing: border-box; font: var(--font-ui-14-regular-reg); } #admrole_out .setupBlock__bg-alert .setupBlock__simple { font: var(--font-ui-14-regular-reg); } #admrole_out .setupBlock__text + .setupBlock__line, #admrole_out .setupBlock__item + .setupBlock__line { margin: 12px 0 8px 0; } #dropaccessmenu .menu__item-delete .in, #dropaccessmenu .menu__item-delete .gray { color: var(--base-txt-btn-w); } #dropaccessmenu .menu__item-delete .gray { background: var(--base-hlt-w-easy); border-radius: 4px; } #dropaccessmenu .menu__item-delete.selected, #dropaccessmenu .menu__item-delete.selected:hover { background: var(--base-hlt-w-easy); } .roleBox .roleIcon { background: var(--base-hlt-b-selected); border-radius: 8px; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; margin-right: 18px; } .roleBox > .flex_row { gap: 8px; } .roleBox .roleIcon ws-icon { width: 28px; height: 28px; } .roleBox .roleIcon ws-icon svg { width: 28px; height: 28px; fill: var(--base-txt-btn-b); } .roleBox .roleName { white-space: nowrap; flex: 1; } .roleBox .roleName .roleUser { font: 400 12px/16px var(--font-base); color: var(--base-txt-secondary); } .roleBox .roleName .roleTitle { font: 600 16px/24px var(--font-base); color: var(--base-txt-btn-b); text-overflow: ellipsis; } .roleBox .drop_select { height: auto; background: none; box-shadow: none; padding: 0; } .roleBox.roleBox-contact .roleIcon { background: var(--base-hlt-w-hover); } .roleBox.roleBox-contact .roleIcon ws-icon svg { fill: var(--base-txt-alert-major); } .roleBox.roleBox-contact .roleTitle { color: var(--base-txt-alert-major); } /* #admrole_out .role { color: var(--base-txt-secondary); font: 13px/18px var(--font-base); } #admrole_out .note { color: var(--base-txt-alert-minor) } #admrole span.ico { float: left; margin: 0 5px } #admrole_out p.grayx { margin: 15px 0; } #admrole_out p.gray:first-child { margin: 0 } #admrole_out .drop_select { padding: 8px 10px; border-radius: 20px; margin: -5px 12px 20px; } #admrole_out .drop_select span.drop { transform: scale(1.5); margin-right: 5px; } #admrole_descr { padding: 0 0 10px 0; } #admrole_descr p.wlabel { font-weight: bold; margin-left: 15px; color: var(--base-txt-primary) } #admrole_descr .role p.wlabel { font-weight: normal } #admrole_descr p.wlabel b { font-weight: bold } #admrole_descr p.wlabel.dis b { color: var(--base-txt-tertiary); font-weight: normal } #admrole_out .help1 .help { float: left; margin: 0 0 0 -30px; width: 24px; font-size: 18px; line-height: 24px; text-align: right; letter-spacing: -1px; } #admrole_out .help1 { color: var(--base-txt-tertiary); font: italic 13px/16px var(--font-base); padding: 10px 0 0 15px; } #admrole_ { padding: 15px 0 0 } /* -------------------------------------------------------------------------------------------------------------------*/ .card_link, .card_link:hover { color: var(--base-txt-max) } .card_place { height: 0; transition: height 0.3s ease; -webkit-transition: height 0.3s ease; overflow: hidden } .card_place_ { background: var(--base-line-alt-cardbrd); box-shadow: 0 2px var(--base-line-tertiary) inset; padding: 10px; } .user_card { position: relative; } /*.user_card0 {background:var(--base-cont-low); border:1px dashed var(--base-line-tertiary)}*/ .user_card .img, .user_card .img_big { margin: 8px 0; text-align: center; position: relative; height: 160px; } .user_card .img > span { width: 160px; height: 160px; border-radius: 100%; font: 48px / 160px var(--font-base) !important; } .user_card .img > img.av { transform: scale(3.33); transform-origin: top; } .user_card .img .editmask > a { display: block; width: 100%; height: 100%; } .user_card .img .editmask, .user_card .img_big .editmask { position: absolute; left: calc(50% - 77px); top: 3px; width: 154px; height: 154px; border-radius: 100%; overflow: hidden; } .user_card .img .edit ws-icon, .user_card .img_big .edit ws-icon {width: 24px;height: 24px;} .user_card .img .edit ws-icon svg, .user_card .img_big .edit ws-icon svg {width: 24px;height: 24px;} @media (max-width: 480px) { .user_card .img, .user_card .img_big { .edit ws-icon, .edit ws-icon svg {width: 20px;height: 20px;} } } .user_card .img .edit, .user_card .img_big .edit { position: absolute; background: var(--base-cont-retrans-mid); border-radius: 20px; bottom: -50px; left: calc(50% - 60px); width: 120px; padding: 8px 0; text-align: center; transition: all 300ms ease-in-out; color: var(--base-txt-accent); --icon-color: var(--base-txt-max); } .user_card .img .editmask:hover .edit, .user_card .img_big .editmask:hover .edit { bottom: 0; } @media (max-width: 480px) { .user_card .img .edit, .user_card .img_big .edit { border-radius: 50%; left: calc(50% - 50px); width: 100px; padding: 4px 0; } } .user_card .logo { margin: 30px -20px 10px; text-align: center; } .user_card .logo .ico_c { margin: 0 auto 25px; transform: scale(2); opacity: 0.3 } .user_card .img_big img { width: 160px; height: 160px; border-radius: 80px; } .user_card .topic_status:has(user-topic-status:not(:empty)) { text-align: center; margin: 8px 0; } .user_card .topic_status ws-emoji { width: 16px; height: 16px; } .user_card .topic_status .cross-attr { border-left: 1px solid transparent; } .user_card .name { margin: 8px 0 2px; white-space: nowrap; font: 18px/24px var(--font-base); color: var(--base-txt-primary); text-align: center; overflow: hidden; text-overflow: ellipsis; font-weight: 510; } .user_card .position { color: var(--base-txt-tertiary); font: 15px/20px var(--font-base); font-weight: 400; text-align: center; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .user_card:not(.flex_column) .name {margin: 16px 0 0;} .user_card:not(.flex_column) .topic_status {margin-top: 16px;} .user_card:not(.flex_column) .position {margin-top: 4px;} .user_card .actions { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 14px 0 20px; } .user_card .w .name { margin-right: 40px; } .user_card .top_info { justify-content: space-between; /*align-items: self-start;*/ padding: 0 0 8px 4px; } .user_card .dept { font: 13px/16px var(--font-base); flex-shrink: 1; max-width: 80%; width: 80%; } .user_card .dept > div:first-child { color: var(--base-txt-tertiary); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user_card .dept > div:last-child { color: var(--base-txt-secondary); font-weight: 590; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user_card .dept b { font: 11px/14px var(--font-base); color: var(--base-txt-primary); display: inline-block; max-width: 50%; overflow: hidden; text-overflow: ellipsis; vertical-align: top } .user_card .contact { font: 12px/20px var(--font-base) } .user_card .contact span { color: var(--base-txt-tertiary) } .user_card .contact a { display: inline; padding: 0; font: inherit; color: var(--base-txt-link-minor) } .user_card .status { font: 11px var(--font-base); padding: 0; margin: 0 } .user_card .link { background: var(--base-cont-low); margin: 10px -10px -10px -10px; padding: 10px; font: 11px/14px var(--font-base); color: var(--base-txt-secondary) } .user_card .link .ico_r { margin: -3px 0 -3px 5px } .user_card .link .s2 { display: none } .user_card .link:hover .s1 { display: none } .user_card .link:hover .s2 { display: block } .user_card .link .r { float: right } .user_card .moredots { float: none; margin: 10px auto 0 } div.hidcon { color: var(--base-txt-secondary); font: 11px/16px var(--font-base); margin: 10px 0 0 0 } div.hidcon span.ico { margin: 0 2px 0 -3px } div.hidcon a.moredots { float: none; margin: -12px 0 0 auto } div.hidcon span.hid1 { color: var(--base-btn-alert-primary-major) } div.hidcon span.hid2 { color: var(--base-txt-tertiary) } /* -------------------------------------------------------------------------------------------------------------------*/ #buttons_floating { height: 70px } #buttons_floating .in { background: var(--base-hlt-alt-overlap); font: 12px/40px var(--font-base); position: fixed; left: 50%; bottom: -100px; height: 48px; width: 340px; margin: 0 0 0 -185px; padding: 14px 15px 14px 15px; border-radius: 8px; z-index: 1001; box-shadow: 0 1px 2px 1px var(--colors-alpha-dark-20); text-align: center; transition: bottom 0.3s ease; -webkit-transition: bottom 0.3s ease; } #buttons_floating.buttons_floating_a .in { bottom: 20px; } body.bodyWithMenu #buttons_floating .in { display: none; } #buttons_floating a.reset { float: left; color: var(--base-txt-tertiary); margin: 5px 0; } #buttons_floating a.reset:hover { color: var(--base-txt-max) } #buttons_floating a.reset .ico_l { margin: 10px; } #buttons_floating a.button_orange { float: right; width: 120px; margin: 5px 0; } /* -------------------------------------------------------------------------------------------------------------------*/ div.note_in { background: var(--base-cont-note-minor); padding: 10px; line-height: 14px; margin-bottom: 15px; } div.note_in b { color: var(--base-txt-alert-minor) } /* -------------------------------------------------------------------------------------------------------------------*/ .archive { padding: 0 0 0 8px; color: var(--base-txt-tertiary); } .archive_open { background: var(--base-cont-top) } .archive a { color: var(--base-txt-tertiary); padding: 0 3px; } .archive a:hover { color: var(--base-txt-secondary) } #st_show2.archive { background: var(--base-cont-top); font: var(--font-ui-13-small-reg) } .archive .r { float: left; margin: 0 -100% 0 10px } .archive .r b { color: var(--base-txt-primary) } .archive .moredots { margin: 3px auto; } /* -------------------------------------------------------------------------------------------------------------------*/ .files_actions { padding: 20px 0; text-align: center } .files_actions .button_white { margin: 0 5px; vertical-align: top; } .files_actions .button { margin-bottom: 4px; } #empty_files2 + .files_actions { margin-top: -50px; } #empty_page + .files_actions { margin-top: -50px; } /* -------------------------------------------------------------------------------------------------------------------*/ span.ico_a_alt { display: none; position: absolute; right: -2px; top: -1px } span.text_a_alt { background: var(--base-cont-low); font: 11px/20px var(--font-base); display: none; position: absolute; right: 30px; top: 7px; padding: 0 5px; color: var(--base-txt-btn-w) } label.act span.ico_a { display: none } label.act span.ico_a_alt, label.act span.text_a_alt { display: inline-block } /* -------------------------------------------------------------------------------------------------------------------*/ .nl2br { padding: 2px 0; } .task .text .nl2br { font-size: 13px; margin-bottom: 15px } .task .comments .nl2br { margin-top: 15px } /* -------------------------------------------------------------------------------------------------------------------*/ div.status { padding-bottom: 15px; color: var(--base-txt-secondary); line-height: 140% } .status b { font-weight: normal; color: var(--base-txt-accent) } .status a { color: var(--base-txt-tertiary); } .status a.onch { color: var(--base-txt-accent); border-bottom: 1px dashed var(--base-txt-max) } .status a.onch:hover { color: var(--base-txt-link-minor); border-bottom: 1px dashed var(--base-txt-link-minor) } /* -------------------------------------------------------------------------------------------------------------------*/ a.drop, span.drop { height: 20px; width: 20px; float: right; overflow: hidden; background: url(/assets/img/color/ws_emoji_new.svg) no-repeat -365px -95px; background-size: 480px 480px; } a.drop_bl, span.drop_bl { background-position: -365px -155px } span.drag { float: left; height: 20px; width: 15px; margin: -10px -5px -10px -16px; overflow: hidden; background: url(/assets/img/color/iconset.svg) -102px -60px; border: 2px solid var(--base-cont-top); border-width: 10px 0; cursor: move; cursor: grabbing; } div.sub span.drag { border-color: var(--base-cont-mid); } span.drag:hover { background: url(/assets/img/color/iconset.svg) -122px -60px; } /* -------------------------------------------------------------------------------------------------------------------*/ .datablock .title a.r { float: right; font: 12px/20px var(--font-base); color: var(--base-txt-ghost) } body.desktop .datablock .title a.r { opacity: 0 } body.desktop .datablock:hover .title a.r { opacity: 1 } .datablock .title a.r:hover { color: var(--base-txt-link-minor) } /* -------------------------------------------------------------------------------------------------------------------*/ body.body_white { background: var(--base-cont-top) } body.body_white #content { background: var(--base-cont-low) } body.body_white .freeze2 ~ #content { background: var(--base-surf-setup) } /* -------------------------------------------------------------------------------------------------------------------*/ #log_delete { background: var(--base-cont-mod-low); height: 34px; padding: 7px 15px; font: 12px/20px var(--font-base); overflow: hidden; box-shadow: 0 -1px var(--base-surf-top); border-bottom: 1px solid var(--base-line-alt-gap-minor); margin: 0; position: relative; z-index: 100; transition: height 0.3s ease; -webkit-transition: height 0.3s ease } .log_delete_ { background: var(--base-cont-mod-low); height: 49px; position: relative; z-index: 100; } .log_delete__ { transition: height 0.3s ease 1s; -webkit-transition: height 0.3s ease 1s } #log_delete a { margin: 6px 0 0 0 } #log_delete a.redo { float: right; color: var(--base-txt-secondary); margin-top: 8px; } #log_delete a.redo .ico_r { margin: -2px 0 0 10px } #log_delete a.redo:hover { color: var(--base-txt-link-minor) } /* -------------------------------------------------------------------------------------------------------------------*/ .setup .app_load { /* background:var(--base-cont-low); */ height: 90px; margin: 0 0 -16px -16px; } .app_load_ico { background: url(/assets/img/get_ws_app.png) 0 -60px; float: left; width: 60px; height: 60px; /* opacity:0.1; */ margin: 30px 20px 0 0; } .app_load a { float: left; padding: 8px 15px; margin: 0 10px 0 0; /* opacity:0.5; */ transition: opacity 0.3s ease; -webkit-transition: opacity 0.3s ease; box-shadow: var(--shadow-brd-hover); border-radius: 10px; } .app_load a:hover { opacity: 1; } .app_load_ico1 { background: url(/assets/img/get_ws_app.png) -130px -60px; float: left; width: 130px; height: 60px; } .app_load_ico2 { background: url(/assets/img/get_ws_app.png) -260px -60px; float: left; width: 130px; height: 60px; } @media (max-width: 400px) { #setup .app_load_ico {display:none} #setup .app_load {padding-left:10px;} #setup .app_load a {padding:15px 10px;} } /* -------------------------------------------------------------------------------------------------------------------*/ .p404 { text-align: center; padding: 50px 10px; font: italic 18px var(--font-serif); color: var(--base-txt-secondary) } .p404 a { color: var(--base-txt-link-minor); } .p404 img { max-width: 90%; margin: 0 0 20px 0 } .p404 span { font: 24px var(--font-base); color: var(--base-txt-primary); } .p404 a.go_home { font: 18px var(--font-base); color: var(--base-btn-primary-major); padding: 10px 30px; background: var(--base-cont-top); border-radius: 30px } .p404 a.go_home:hover { color: var(--white-max); background: var(--base-btn-primary-major); } /* -------------------------------------------------------------------------------------------------------------------*/ div.notify { text-align: left; padding: 0 0 0 25px } .modal__content div.notify { width: 180px } div.notify span.ico_notify { margin: -4px 0 0 -30px; opacity: 0.5 } div.notify:hover span.ico_notify { opacity: 1 } div.notify label { display: inline-block; padding: 2px 5px; margin: 0 0 2px 0; color: var(--base-txt-secondary); cursor: pointer } .modal__content div.notify label { display: block } div.notify label input { float: left; margin: 2px 5px 0 0 } /* -------------------------------------------------------------------------------------------------------------------*/ .task_delay_pub { text-align: center; padding: 10px 0; width: 250px; margin: 0 auto; } .task_delay_pub a { color: inherit; font-style: italic; color: var(--base-txt-primary); opacity: 0.5; transition: opacity 0.3s ease } .task_delay_pub:hover a { opacity: 0.8 } .task_delay_pub a:hover font { color: var(--base-txt-link-minor) } .task_opts .moredots { margin: 10px auto; background: var(--base-cont-top) } /* -------------------------------------------------------------------------------------------------------------------*/ p.task_email { padding: 30px 0 10px 0; text-align: center; font: italic 13px/18px var(--font-base); color: var(--base-txt-secondary); } p.task_email a { color: var(--base-txt-link-minor) } p.task_email_opac { opacity: 0.5; transition: opacity 0.5s ease; -webkit-transition: opacity 0.5s ease } p.task_email_opac:hover { opacity: 1 } /* -------------------------------------------------------------------------------------------------------------------*/ .mass_select_all { position: absolute; left: -30px; top: 0; padding: 6px 0; opacity: 0.7 } .mass_select_all label { display: block; width: 20px; height: 12px; padding: 8px 8px 8px 1px } .filter:hover .mass_select_all, .mass_select_all.pre_act { opacity: 1 } .mass_select_all label.act { background: none } body.withMass .mass_select_all:after { display: none !important } /* -------------------------------------------------------------------------------------------------------------------*/ .drag_clone { box-shadow: var(--shadow-cont-minor) !important; transform: rotate(-1deg); -webkit-transform: rotate(-1deg); } .tag.drag_clone { transform: rotate(-3deg); -webkit-transform: rotate(-3deg); } .drag.drag_clone { background: var(--base-cont-top) !important; padding: 7px 10px; font: 14px/16px var(--font-base); } .drag.drag_clone a { color: inherit } body.body-dragInProgress { overflow-x: hidden; user-select: none; -webkit-user-select: none; cursor: grabbing !important; } /* -------------------------------------------------------------------------------------------------------------------*/ .modal.tb_task, .tb_task .modal__header { background: var(--base-cont-mod-top); } .filter a.sel { float: right; height: 24px; width: 30px; border-radius: 4px; margin: -2px 0 -2px 8px } .filter a.sel { margin: 8px 0 0 10px } .filter a.sel .ico_l { margin: 2px 5px } /* -------------------------------------------------------------------------------------------------------------------*/ .secure_confirm { padding-bottom: 50px; text-align: center; color: var(--base-txt-tertiary) } .secure_confirm .input { padding: 10px; height: 40px; box-sizing: border-box; font: 18px/20px var(--font-base); width: 200px; } .secure_confirm .input::placeholder { font: 14px/20px var(--font-base); } .secure_confirm .input::-moz-placeholder { font: 14px/20px var(--font-base); } .secure_confirm .button { height: 40px; } /* -------------------------------------------------------------------------------------------------------------------*/ .recent_tasks { display: block; height: 40px; margin: 8px 24px 16px; } .recent_tasks .in { backdrop-filter: blur(0px); font: 13px / 40px var(--font-base); color: var(--font-base); display: flex; white-space: nowrap; } .recent_tasks i { display: block; height: 40px; border: 1px solid var(--base-hlt-invert-major); border-radius: 12px; margin: 4px -4px -46px 4px; background: var(--base-cont-mod-top); backdrop-filter: blur(0); } .recent_tasks i:first-child { background: var(--base-hlt-hover); backdrop-filter: blur(50px); } /* ----------- MinifyCSS: LIGHT THEMEMinifyCSS: LIGHT THEME ----------- */.recent_tasks i {box-shadow:0 0 0 1px var(--base-txt-muted)} /*----------- MinifyCSS: STOPMinifyCSS: STOP ----------- */ .recent_tasks i + i { margin: 0 0 -40px; } .recent_tasks .cnt { margin: 0 10px 0 20px; color: var(--base-txt-accent); font: bold 14px / 40px var(--font-base); } .recent_tasks:hover i { box-shadow: 0 0 0 1px var(--base-hlt-active); } /* -------------------------------------------------------------------------------------------------------------------*/ .pickerInput-projects { min-height: 35px; margin: -10px 0 20px 0; background: var(--menu-inp-cont); } .dataadd_sp .pickerInput-projects { background: var(--inp-cont-top) } .pickerInput-projects .ico_r { margin: 5px; } .pickerInput-projects .in a { max-width: 160px; } .pickerInput-projects .in a.gr { border-radius: 20px; } .pickerInput-projects .in a.gr + span { display: none } .pickerInput-projects .in .input { width: 200px; } .pickerInput-projects .in .in_ { max-height: 400px; overflow: auto; } @media (max-width: 480px) { .pickerInput-projects .in { overflow-x: auto } .pickerInput-projects .in::-webkit-scrollbar:horizontal { display: none; } .pickerInput-projects .in .input { width: 140px; } } /* -------------------------------------------------------------------------------------------------------------------*/ .user_delete_head { padding: 52px 28px 20px; } .user_delete_head .in { background: var(--base-cont-mod-top-elevated); text-align: center; position: relative; font: var(--font-ui-13-small-reg); color: var(--base-txt-secondary); padding: 44px 0 12px; border-radius: 12px; box-shadow: var(--shadow-brd-error-focus); } .user_delete_head .img { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; } .user_delete_head .img > * { --ava-scale: calc(64 / 48); scale: var(--ava-scale); transform-origin: top center; border: calc(4px / var(--ava-scale)) solid var(--base-cont-mod-top); border-radius: 50%; box-shadow: var(--shadow-cont-major); } .user_delete_head .name { font: 20px/20px var(--font-base); color: var(--base-txt-primary); padding: 0 0 8px; } .user_delete_head .info > .help { vertical-align: top; } .user_delete_head .info a { font-weight: bold } .user_delete_head .info b { color: var(--base-txt-primary) } .user_delete_head .info b.err { color: var(--base-txt-alert-minor) } .user_delete_head .in .help2 { text-align: right; font: italic 12px/20px var(--font-base); margin: 10px 0 -10px 10px; color: var(--base-txt-tertiary) } /* ----------- MinifyCSS: LIGHT THEMEMinifyCSS: LIGHT THEME ----------- */.user_delete_head {background:var(--base-cont-mod-low)} /*----------- MinifyCSS: STOPMinifyCSS: STOP ----------- */ /* -------------------------------------------------------------------------------------------------------------------*/ .floatingButtons-gantt { /*background: var(--base-cont-mod-top);*/ /* background: var(--base-cont-trans-low); */ backdrop-filter: blur(20px); font: 12px/40px var(--font-base); display: none; position: fixed; left: 50%; transform: translateX(-50%); bottom: 20px; width: auto; padding: 28px; border-radius: 16px; z-index: 1005; box-shadow: var(--shadow-cont-major-outline); } #taskPanel:not(:empty) ~ .floatingButtons-gantt { bottom: 60px; } @media (max-width: 760px) { .floatingButtons-gantt { display:none !important } } .floatingButtons-gantt .button_r { float: right; margin: 4px 0 0 10px; } .floatingButtons-gantt .ico_r { margin: 10px 10px 0 0; } .floatingButtons-gantt label { padding: 0 2px; } .floatingButtons-gantt span.num {padding: 0;} .floatingButtons-gantt div label { float: left; padding: 2px 5px; margin: 0 5px 0 0; } .floatingButtons-gantt div label.act { background: transparent } .floatingButtons-gantt .btns-row { padding: 0; width: 100%; gap: 24px; } /* -------------------------------------------------------------------------------------------------------------------*/ .listing__card__moreItems { cursor: pointer; padding: 0; height: 40px; background: var(--lbl-date); text-align: center; margin: 1px 0 0 0; position: relative } .listing__card__moreItems span.date { display: inline-block; color: var(--base-txt-secondary); font: 11px/20px var(--font-base); padding: 0 10px; margin: 10px auto 10px 0; white-space: nowrap; border-radius: 10px; background: var(--base-cont-top); position: relative } /* -------------------------------------------------------------------------------------------------------------------*/ .code_4msg { font: italic 14px/20px var(--font-base); margin: 0 0 20px; color: var(--base-txt-secondary); text-wrap-style: balance; } .code_4msg b { font: bold 14px/20px var(--font-base); background: var(--base-cont-note-minor); padding: 3px 5px; border-radius: 4px; color: var(--base-txt-primary); white-space: nowrap } ws-code-input.code_digit_big, #code_4digit_ { height: 100px; position: relative; } ws-code-input.code_digit_big .ws-code-input { display: inline-flex; } ws-code-input.code_digit_big .ws-code-input .ws-code-input__input, #code_4digit_ input { display: inline-block; height: 80px; width: 50px; border: 1px solid var(--inp-cont-brd); border-radius: 8px; margin: 0 8px; background: var(--inp-cont-top); font: bold 60px/60px var(--font-mono); padding: 0; text-align: center; } ws-code-input.code_digit_big .ws-code-input .ws-code-input__input:focus, #code_4digit_ input:focus { box-shadow: var(--shadow-brd-focus); border-color: transparent } /* -------------------------------------------------------------------------------------------------------------------*/ .modal__massSelected .data_place { height: 32px; border: 1px dashed var(--base-txt-tertiary); padding: 0 4px; border-radius: 16px; display: inline-flex; overflow: hidden; align-items: center; } .modal__massSelected .data_place > .in { padding: 0 6px; color: var(--base-txt-secondary); font: var(--font-ui-13-small-med); } .modal__massSelected .data { color: var(--base-txt-secondary); height: 32px; border-radius: 16px; background: var(--base-cont-mod-low); max-width: 190px; overflow: hidden; padding: 0 6px 0 0; cursor: pointer; } .modal__massSelected .data > .in { padding: 0 6px; color: var(--base-txt-primary); font: var(--font-ui-13-small-med); } .modal__massSelected .prior > .in { width:20px; text-align: center; padding:0; color:var(--white-primary); } .modal__massSelected .data > ws-icon { --icon-size: 16px; height:16px; } .modal__massSelected .data > ws-icon[name=close_sm] {width: 20px;height: 20px;} .modal__massSelected .av_sm { margin: 4px; transform:scale(1.3333) } .modal__massSelected .data > ws-icon[name=people], .modal__massSelected .data > ws-icon[name=workflow_group] { margin: 4px 4px 4px 8px; --icon-size:20px; border: none !important; } .modal__massSelected ws-icon.tag { margin: 4px 4px 4px 8px; transform:scale(1.333); --icon-size: 20px; } /* -------------------------------------------------------------------------------------------------------------------*/ .menuFake__countersHead { font: 12px/20px var(--font-base); color: var(--base-txt-tertiary); height: 26px; padding: 2px 0; border-radius: 4px; z-index: 1; padding: 4px 42px 8px 0; box-shadow:0 var(--screen-px) var(--base-line-tertiary); display: flex; justify-content: flex-end; } .menuFake__countersHead div { float: left; width: 48px; height: 20px; text-align: center; padding: 3px 0; cursor: pointer; } .menuFake__countersHead div ws-icon { margin: 0 auto; --icon-color:var(--base-txt-secondary) } @media (max-width: 480px) { .menuFake__countersHead, .menuFake .counters { display: none } } .menu__item .counters { width: 200px; border-radius: 4px; font: 12px/24px var(--font-base); color: var(--base-txt-primary); padding: 0; height: 30px; } .menu__item .counters > * { float: left; width: 48px; text-align: center; padding: 3px 0; } .menu__item .counters b { color: var(--base-txt-primary); font-weight: inherit } .menu__item:hover .counters, .menu__item-selected .counters { } .menu__item-active .counters { font-weight: bold; } .modalNotice { border: 1px solid var(--base-line-ghost); border-radius: 12px; color: var(--base-txt-accent); padding-bottom: 20px; background: var(--base-hlt-alt-notice); margin: 8px 16px 8px; font: var(--font-ui-13-small-reg); padding: 8px 12px; gap: 4px; display: flex; align-items: flex-start !important; } .modalNotice ws-icon { --icon-color: var( --base-txt-notice-major) !important; --icon-size:24px; width: 36px; height: 36px; } #dragNotifySwitch {display: none} body.drag_do #dragNotifySwitch { position:relative; } body.drag_do #dragNotifySwitch:before { content:attr(data-hint); position:absolute; right:110%; top:0; font:italic var(--font-ui-13-small-reg); color:var(--base-txt-secondary) } body.drag_do #dragNotifySwitch:after { content:attr(data-hint2); position:absolute; right:110%; top:20px; font:italic 10px/10px var(--font-base); color:var(--base-txt-ghost) } /* -------------------------------------------------------------------------------------------------------------------*/ .massPanel .ico_esc { margin: 8px 10px; text-transform: lowercase; /*color:var(--base-txt-accent); opacity:0.5*/ } /* -------------------------------------------------------------------------------------------------------------------*/ .floatIcons { position: absolute; right: 0; top: 0; padding: 6px; z-index: 1001; overflow: hidden; box-shadow: var(--shadow-cont-minor-outline); border-radius: 12px; gap: 4px; background: var(--base-cont-retrans-low); backdrop-filter: blur(8px); } .floatIcons .floatIcons__group { box-shadow: var(--shadow-cont-minor-outline); border-radius: 12px; padding: 6px; gap: 4px; background: var(--base-cont-top-elevated); backdrop-filter: blur(8px); overflow: hidden; } .floatIcons .floatIcons__group > *, .floatIcons:not(.floatIcons-grouped) > *, .floatIcons ws-icon { transition: .2s ease; } .floatIcons ws-icon { width: 28px; height: 28px; border-radius:4px; } .floatIcons a:not(.menu_open):not(:hover) ws-icon svg { fill: var(--base-txt-secondary) } .floatIcons a:hover ws-icon, .floatIcons a.menu_open ws-icon { background: var(--base-hlt-g-hover); --icon-color: var(--base-txt-accent); } .floatIcons a ws-icon use { display:none; } .floatIcons a:hover ws-icon use:last-child { display:block; } .floatIcons a:not(:hover) ws-icon use:first-child { display:block; } .floatIcons:has(.menu_open) { display:flex; } .floatIcons:has(.menu_open) > a:not(.menu_open) { opacity: .6; } .floatIcons-sm { border-radius: 11px; } .floatIcons-sm ws-icon { --icon-size: 16px; width: 24px; height: 24px; border-radius: 5px; } .floatIcons.floatIcons-grouped { background: none; box-shadow: none; backdrop-filter: none; padding: 0; overflow: unset; gap: 8px; } /* -------------------------------------------------------------------------------------------------------------------*/ .fake_listing .item_fake {height: 20px;margin: var(--sp_fix_08) var(--sp_fix_16) 0;padding: 0 0 var(--sp_fix_08);position:relative;} .fake_listing .item_fake * {position:absolute; background:var(--colors-alpha-dark-02); border-radius:4px;} .fake_listing .item_fake .s1 {left:0;top: 2px;width:50px;height:16px;} .fake_listing .item_fake .s2 {left:90px;top: 0;width:50%;height:20px;} .fake_listing .item_fake .s3 {left:60px;top: 0;width:20px;height:20px;background: var(--colors-alpha-dark-05);} .fake_listing .item_fake .s4 {right:0;top: -2px;width:24px;height:24px;border-radius:12px;} .fake_listing .item_fake:nth-child(3) .s2 {width:40%} .fake_listing .item_fake:nth-child(4) .s2 {width:60%} .fake_listing .item_fake:nth-child(3) .s1 {width:40px; left:10px;} .fake_listing .item_fake:nth-child(5) .s1 {width:40px; left:10px;} .fake_listing2 .item_fake {display: none; height: 20px;padding: 0 0 var(--sp_fix_08);margin: var(--sp_fix_08) var(--sp_fix_16) 0;position:relative;} .fake_listing2 .item_fake * {position:absolute;background: var(--base-cont-mid);border-radius:4px;} .fake_listing2 .item_fake .s1 {left:0; top:5px; width:50px; height:16px; } .fake_listing2 .item_fake .s2 {left:90px; top:3px; width:50%; height:20px; } .fake_listing2 .item_fake .s3 {left:60px;top:3px;width:20px;height:20px;background: var(--base-cont-low);} .fake_listing2 .item_fake .s4 {right:0; top:0; width:24px; height:24px; border-radius:12px;} .fake_listing2 .item_fake:nth-child(3) .s2 {width:40%} .fake_listing2 .item_fake:nth-child(4) .s2 {width:60%} .fake_listing2 .item_fake:nth-child(3) .s1 {width:40px; left:10px;} .fake_listing2 .item_fake:nth-child(5) .s1 {width:40px; left:10px;} .fakePage { padding: 40px; display: flex; flex-wrap: wrap; flex-direction: row; gap: 32px; } .fakePage__group { width: calc(50% - 20px); min-height: calc(25% + 10px); /* border: 1px solid var(--base-line-tertiary); */ padding:24px; border-radius:16px; box-sizing: border-box; box-shadow: 0 2px 6px 1px var(--base-line-ghost); } /* .keyboardZone { outline: 1px dashed } .keyboardZone-active { outline: 1px solid } */ @media (max-width: 480px) { .fakePage { padding: 20px; } .fakePage__group { width: 100%; min-height: unset; } .token_row { overflow: hidden; } } @media (max-width: 410px) { .fake_listing .item_fake:nth-child(4) .s2 { width: 55%; } } @media (max-width: 380px) { .fake_listing .item_fake:nth-child(4) .s2 { width: 50%; } } .taskStageList { margin: 12px 28px; border-radius: 12px; overflow: hidden; box-sizing: border-box; background: var(--base-cont-mod-trans-low); padding: 12px 16px 16px; } .taskStageList__title { color: var(--base-txt-tertiary); padding: 0 0 0 32px; line-height: 28px; } .taskStageList__title b { color: var(--base-txt-primary); font-weight: inherit; } .taskStageList__title ~ .taskStageList__title { margin-top:16px; } .taskStageList__item { margin: 6px 0 0; gap:4px; } .taskStageList__item .in { background: var(--base-cont-mod-top); height: 36px; border-radius: 8px; box-shadow: var(--shadow-cont-major-lineonly-outside); cursor: pointer } .taskStageList__item label:has(input:checked) ~ .in { box-shadow: var(--shadow-brd-focus-alt-mini); } .taskStageList__item .inputRadio input:checked ~ span { background: none !important; } .taskStageList__item .in > ws-icon.tag { width: 28px; } .taskStageList__item .in .name {font: var(--font-txt-13-small-semi);} .taskStageList__item .in .div { padding: 0 4px; } .taskStageList__item .in .div:before { content: '::'; color: var(--base-txt-alert-minor); letter-spacing: 1px; } .taskStageList__item .in .av_sm { transform: scale(0.8); margin:-2px; } .taskStageList__item-empty { --tag-color: var(--base-txt-tertiary); color: var(--base-txt-tertiary); } .taskDone-form.taskStageList-move { .modal__content__block-subtasks, .modal__content__block-subtasks + .line {display: none !important} } .taskDone-form:not(.taskStageList-move) .buttons ws-btn.ws-btn-type1, .taskDone-form.taskStageList-move .buttons ws-btn.ws-btn-type2 { display: none } .taskStageList__item .div-line { height: calc(100% + 4px); display: block; border-right: 1px solid var(--base-line-secondary); } .taskStageList__item .type { height:36px; font: var(--font-ui-11-micro-reg); color: var(--base-txt-tertiary); line-height: 36px; padding: 0 8px 0 4px; } .taskStageList__item .type:last-child { border-right: none } .taskStageList__item .in > ws-icon:last-child { width:36px; height: 36px; } #stageSubtasks__menu .menu__item .data:has(ws-icon:not(:only-child)) { display: flex; gap: 4px; padding: 0 6px; height: 24px; border-radius: 8px; box-shadow: 0 0 0 1px var(--base-line-secondary) inset; justify-items: center; align-items: center; border-radius: 13px; border: 1px dashed var(--base-txt-secondary); box-shadow: unset; > * { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transform: unset; } .av_svg { border: unset; } .tag { --icon-size: 16px; } } .taskStageList__item:has(.data-toggle > * + *) { &:not(&:hover, &.pre_act) .data-toggle > *:last-child { display: none; } &:not(&.pre_act):hover .data-toggle > *:first-child { display: none; } &.pre_act:not(:hover) .data-toggle > *:first-child { display: none; } &.pre_act:hover .data-toggle > *:last-child { display: none; } } .menu__item:has(.data-toggle > * + *) { &:not(.selected) .data-toggle > *:last-child { display: none; } &.selected .data-toggle > *:first-child { display: none; } } /* -------------------------------------------------------------------------------------------------------------------*/ #total_summ_placer { height:90px; } #total_summ { background: var(--base-cont-top); height:50px; border-top:3px solid var(--base-line-alt-gap-minor); transition: bottom 0.2s ease; -webkit-transition:bottom 0.2s ease; padding:0 30px; margin-bottom: 40px; } #total_summ.total_summ_stat { height:60px; } #total_summ .in { position:relative; height:50px; } body[data-freeze=on] #total_summ { bottom:62px } body.withMass #total_summ { bottom:-60px } #total_summ .td_time, #total_summ .td_money, #total_summ .td_done { position:absolute; font:24px/20px var(--font-base); color:var(--base-txt-secondary); text-align:right; top:0; margin:0 0 0 0; padding:15px 0 25px } #total_summ .td_time { color:var(--costs-time-major); left:42%; width:10% } #total_summ .td_money { color:var(--costs-money-major); left:54%; min-width:6%; } #total_summ .td_done { left:50px } #total_summ .td_click { cursor:pointer } #total_summ .td_click_act:before, #total_summ .td_click:hover:before { position:absolute; content:''; width:130px; bottom:0; right:-10px; height:2px; background:var(--base-btn-primary-major) } #total_summ .td_time:before { background:var(--costs-time-major) !important } #total_summ .td_money:before { background:var(--costs-money-major) !important } #total_summ .td_pie:before, #total_summ .td_pie:hover:before, #total_summ .td_pie:after { right:-50px; width:155px; } #total_summ.total_summ_stat .td_time { color:var(--costs-time-major); left:38%; width:15%; } #total_summ.total_summ_stat .td_money { color:var(--costs-money-major); left:58%; min-width:15%; } #total_summ.total_summ_stat .td_tm { left:58%; } #total_summ.total_summ_stat .td_done { color:var(--base-txt-secondary); left:77%; min-width:15%; } #total_summ .td_tm { left:52% } #total_summ .ico_summ { float:left; font:30px/45px var(--font-serif); color:var(--base-txt-tertiary); width:60px; height:50px; padding:0; text-align:center; margin:0 0 0 -30px; } #total_summ.total_summ_stat .ico_summ { padding:5px 0; } #total_summ .td_stat_ { top:34px; color:var(--base-txt-tertiary) !important; font:12px/12px var(--font-base); } #total_summ .td_time i, #total_summ .td_money i, #total_summ .td_done i { position:absolute; color:var(--base-txt-tertiary); font:14px/16px var(--font-base); right:-35px; top:20px; width:30px; text-align:left; white-space:nowrap } #total_summ.total_summ_stat .td_time i, #total_summ.total_summ_stat .td_money i, #total_summ.total_summ_stat .td_done i { font:11px/16px var(--font-base); right:0; top:37px; width:auto; text-align:right } #total_summ .td_time i b, #total_summ .td_money i b, #total_summ .td_done i b { text-transform:uppercase; font-weight:normal } #total_summ.total_summ_stat [data-title]:after { top:50%; left:100%; text-transform:none; margin:-18px 0 0 3px } #total_summ.total_summ_stat .data-title-t[data-title]:after { top:auto; bottom:0; left:100%; text-transform:none; margin:0 0 0 3px } #total_summ .pie { position:absolute; right:-40px; top:20px; } #total_summ .pie i { top:-1px !important; right:-1px !important; border-color:var(--base-cont-top) } #total_summ .pie i { top:-2px !important; right:-2px !important; border-color:var(--base-cont-top) } #total_summ .pie_pre { position:absolute; right:90px; top:10px; width:40px; height:40px; } #total_summ .percent { position:absolute; left:0; top:15px; width:100%; text-align:center; z-index:1; color:var(--base-txt-tertiary); font:12px/12px var(--font-base); } #total_summ .percent span { font:9px/12px var(--font-base); opacity:0.7 } #total_summ .pie_svg { left:0; top:0; width:100%; height:100%; } #total_summ font.dec, .dataTable font.dec { font-size:90%; opacity:0.7 } #total_summ span.dd { background:var(--colors-amber-400); color:var(--white-accent); position:absolute; right:-12px; top:22px; width:6px; height:6px; text-align:center; border-radius:3px !important; padding:0 !important } #total_summ span.dfm { background:var(--base-btn-alert-primary-major); } #total_summ span.dfp { background:var(--base-btn-fresh-minor); } #total_summ span.ddp { top:42px; } @media screen and (max-width:900px) { #total_summ .td_time { left:48%; width:10% } #total_summ .td_money { left:60%; min-width:10%; } } @media screen and (max-width:768px) { #total_summ .td_time { left:54%; width:15% } #total_summ .td_money { left:72%; min-width:13%; } #total_summ.total_summ_stat .td_time { left:43%; width:15% } #total_summ.total_summ_stat .td_money { left:60%; min-width:15%; } #total_summ.total_summ_stat .td_done { left:77%; min-width:15%; } #total_summ.total_summ_stat .pie { display:none } } @media screen and (max-width:640px) { #total_summ { display:none } } @media print { #total_summ { position:static; margin:-10px 0 0; border-top:0; border-bottom:3px solid var(--base-line-alt-gap-minor); } } .fakePage-dashboard { position: relative; gap: 24px; padding: 0; max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; .dashboard__block__header { .avatar i { width: 48px; height: 48px; &:before {border-radius: 100%;} } h4 {padding: 2px 0;width:30%;margin: 0;} h4 i {height: 20px;width:100%;} .tabs { i {width:75px; height: 16px;} i + i {padding-left: 12px;} } } .dashboard__block__body > div { padding: 8px 12px 8px 20px; display: flex; column-gap: 12px; align-items: center; height: 28px; i {height: 16px;flex-shrink: 1;width: 100%;} } .dashboard__block__body-i2 > div > i:first-child, .dashboard__block__body-i3 > div > i:first-child {width: 28px; flex-shrink: 0;} .dashboard__block__body-i3 > div > i:last-child {width: 28px; flex-shrink: 0;} .dashboard__block__body-iBig > div > i { height: 28px; } } .tableFake div { display: flex; padding: 16px; column-gap: 16px; i { flex-grow: 1; flex-shrink: 1; height: 16px; width: 100%;} } @media (max-width: 1200px) { .fakePage-dashboard { grid-template-columns: 1fr; } } #content.content-fake { padding-top: 64px !important; .dashboard__header { .dashboard__motto .ws-skeleton-place { margin-top: 8px; height: 30px; width: 25vw; } .daily-overview__date.ws-skeleton-place { margin-top: 8px; height: 16px; width: 10vw; } } } #headerGeneral.headerGeneral-fake { .headerGeneral__center { .logo { opacity: .5; } .tree .ws-skeleton-place { width: 20vw; height: 12px; margin: 4px 0; } .name .ws-skeleton-place { padding: 0; margin: 4px 0; width: 40vw; height: 20px; } .viewsList .viewsList__item i { width: 64px; height: 20px; } } .headerGeneral__right { .users i { width: 24px; height: 24px; &:before {border-radius: 100%;} } .headerGeneral__buttons i { width: 54px; height: 32px; &:before {border-radius: 20px;} } } } ws-btn {display: inline-block} .button:not(.btns-row) ws-btn + ws-btn {margin:0 0 0 6px} .flex_row > ws-btn + ws-btn {margin:0} .menu__title > ws-btn + ws-btn:not(:has(button.btn-hide)), .editBlock-close-buttons > ws-btn + ws-btn {margin:0 0 0 8px;} ws-btn.ws-btn-right {float: right} ws-btn.ws-btn-left {float: left} ws-btn.fake {pointer-events: none !important;} .btns-row {display: flex;align-items: center;flex-direction: row;gap: 10px;} .btns-row.btns-row-right {justify-content: flex-end} .btns-row.btns-row-center {justify-content: center} .btns-row ws-btn {margin: 0} .btns-row ws-btn.ws-btn-right {margin-left: auto} /** BAD CSS NEED REWORK FOR DIFF CASES **/ /* .modal__header ws-btn ~ ws-btn {margin: 0} .modal__content ws-btn, .modal__content ws-btn ~ button {margin: 0 0 0 6px;} .modal__content ws-btn:first-child {margin: 0} .btns-row ws-btn.ws-btn-right ~ ws-btn.ws-btn-right {margin: 0} */ .btn-double:has(> *:nth-child(2)) { display: inline-flex; } .btn-double:has(> *:nth-child(2)) .btn:focus, .btn-double:has(> *:nth-child(2)) .btn:hover { z-index: 1; } .btn-double:has(> *:nth-child(2)) button:first-child:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .btn-double:has(> *:nth-child(2)) button:last-child:not(:first-child), .btn-double:has(> *:nth-child(2)) button:nth-child(2):not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .btn-double:has(> *:nth-child(2)) button:nth-child(2):not(:last-child) { border-radius: 0; } /*.btn-double button:not(.selected, :focus, :focus-visible):last-child,*/ /*.btn-double button:not(.selected, :focus, :focus-visible):nth-child(2)*/ /*{*/ /* box-shadow: 1px 0 0 0 var(--btn-bg-color-3) inset;*/ /*}*/ .btn-double:has(> *:nth-child(2)) button:first-child:focus + button:last-child, .btn-double:has(> *:nth-child(2)) button:first-child:focus + button:nth-child(2) { box-shadow: none; } .btn-double:not(.btn-fill-double):has(> *:nth-child(2)) button:first-child:focus { border-top-right-radius: 2px; border-bottom-right-radius: 2px; } .btn-double:not(.btn-fill-double):has(> *:nth-child(2)) button:last-child:focus { border-top-left-radius: 2px; border-bottom-left-radius: 2px; } .btn-double .btn-32.notify_btn .btn-right-icon { --icon-size: 16px; } button.btn {width: 100%;} .btn { --btn-bg-color-0: var( --trans); -webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline-flex; flex-direction: row; flex-wrap: nowrap; border: 0; cursor: pointer; text-decoration: none; text-align: center; border-radius: 7px; height: 32px; font-family: var(--font-base); font-size: 13px; line-height: 20px; color: var(--base-txt-alt-light); background: var(--btn-bg-color-0); vertical-align: middle; align-items: center; justify-content: center; transition: box-shadow ease 80ms; } .btn svg { fill: var(--base-txt-alt-light); } .btn:focus-visible { outline: none; } .modal .btn.btn-bg, .menu .btn.btn-bg { --btn-bg-color-0: var(--base-cont-mod-top); } .btn.btn-bg { --btn-bg-color-0: var(--base-cont-top); } .btn.btn-disabled, .btn[disabled] { opacity: 0.5; cursor: default; } .btn.btn-hide { display: none; } .btn.btn-g.btn-solid {color: var(--base-txt-btn-flip)} .btn.btn-g.btn-solid svg, .btn.btn-g.btn-solid:hover svg, .btn.btn-g.btn-solid.hover svg, .btn.btn-g.btn-solid:focus svg {fill: var(--base-txt-btn-flip)} .btn.btn-g.btn-solid:focus {box-shadow: 0 0 0 1px var(--btn-bg-color-5), 0 0 0 4px var(--btn-bg-color-3)} .btn.btn-g.btn-invert {color: var(--base-hlt-g-invert-major)} .btn.btn-g.btn-invert svg {fill: var(--base-hlt-g-invert-major)} .btn.btn-g.btn-invert:hover, .btn.btn-g.btn-invert:focus {color: var(--base-txt-btn-flip)} .btn.btn-g.btn-invert:hover svg, .btn.btn-g.btn-invert.hover svg, .btn.btn-g.btn-invert:focus svg {fill: var(--base-txt-btn-flip)} .btn.btn-g.btn-fill {color: var(--base-hlt-g-invert)} .btn.btn-g.btn-fill svg {fill: var(--base-hlt-g-invert)} .btn.btn-g.btn-outline {box-shadow: 0 0 0 1px var(--base-line-secondary) inset} .btn.btn-g.btn-outline:hover, .btn.btn-g.btn-outline.hover {color: var(--base-hlt-g-invert-major);/* box-shadow: 0 0 0 1px var(--base-line-accent) inset; */} .btn.btn-g.btn-outline:focus {color: var(--base-txt-max);/* box-shadow: 0 0 0 1px var(--btn-bg-color-4), 0 0 0 4px var(--btn-bg-color-2); */} .btn.btn-g.btn-outline:hover svg, .btn.btn-g.btn-outline.hover svg {fill: var(--base-hlt-g-invert-major)} .btn.btn-g.btn-outline:focus svg {fill: var(--btn-bg-color-4)} .btn.btn-g.btn-plain:hover, .btn.btn-g.btn-plain.hover {color: var(--base-hlt-g-invert)} .btn.btn-g.btn-plain:focus {color: var(--base-hlt-g-invert-major)} .btn.btn-g.btn-plain:hover svg, .btn.btn-g.btn-plain.hover svg, .withBtnHover:hover .btn.btn-plain svg {fill: var(--base-hlt-g-invert)} .btn.btn-g.btn-plain:focus svg {fill: var(--base-hlt-g-invert-major)} .btn.btn-g.btn-skeleton {color: var(--btn-txt-color)} .btn.btn-g.btn-skeleton svg {fill: var(--btn-txt-color)} .btn.btn-g.btn-skeleton:hover, .btn.btn-g.btn-skeleton.hover {color: var(--base-hlt-g-invert-major);box-shadow: 0 0 0 1px var(--base-line-accent) inset;} .btn.btn-g.btn-skeleton:hover svg, .btn.btn-g.btn-skeleton.hover svg {fill: var(--base-hlt-g-invert-major);} .btn.btn-g.btn-skeleton:focus {color: var(--base-txt-max); box-shadow: 0 0 0 1px var(--base-hlt-g-focus) inset} .btn.btn-g.btn-skeleton:focus svg {fill: var(--base-txt-max)} .btn.btn-g.btn-skeleton.selected, .btn.btn-g.btn-skeleton.selected:hover, .btn.btn-g.btn-skeleton.selected:focus, .btn.btn-g.btn-skeleton:focus-visible, .btn.btn-g.btn-skeleton:focus-visible:hover, .btn.btn-g.btn-skeleton:focus-visible:focus {color: var(--base-txt-accent)} .btn.btn-g.btn-skeleton.selected svg, .btn.btn-g.btn-skeleton.selected:hover svg, .btn.btn-g.btn-skeleton.selected.hover svg, .btn.btn-g.btn-skeleton.selected:focus svg, .btn.btn-g.btn-skeleton:focus-visible svg, .btn.btn-g.btn-skeleton:focus-visible:hover svg, .btn.btn-g.btn-skeleton:focus-visible.hover svg, .btn.btn-g.btn-skeleton:focus-visible:focus svg {fill: var(--btn-txt-color)} .btn.btn-w.btn-skeleton svg, .btn.btn-w.btn-skeleton:hover svg, .btn.btn-w.btn-skeleton.hover svg, .btn.btn-w.btn-skeleton:focus svg {fill: var(--btn-txt-color)} .btn.btn-g.btn-ghost:hover, .btn.btn-g.btn-ghost.hover, .btn.btn-g.btn-ghost:focus {color: var(--base-txt-accent)} .btn.btn-g.btn-ghost:hover svg, .btn.btn-g.btn-ghost.hover svg, .btn.btn-g.btn-ghost:focus svg {fill: var(--base-txt-accent)} .btn.btn-g.btn-ghost:focus-visible, .btn.btn-g.btn-ghost:focus-visible:hover, .btn.btn-g.btn-ghost:focus-visible:focus {color: var(--base-txt-accent)} .btn.btn-g.btn-ghost.selected svg, .btn.btn-g.btn-ghost.selected:hover svg, .btn.btn-g.btn-ghost.selected.hover svg, .btn.btn-g.btn-ghost.selected:focus svg, .btn.btn-g.btn-ghost:focus-visible svg, .btn.btn-g.btn-ghost:focus-visible:hover svg, .btn.btn-g.btn-ghost:focus-visible.hover svg, .btn.btn-g.btn-ghost:focus-visible:focus svg {fill: var(--base-txt-accent)} .btn.btn-w.btn-ghost svg, .btn.btn-w.btn-ghost:hover svg, .btn.btn-w.btn-ghost.hover svg, .btn.btn-w.btn-ghost:focus svg {fill: var(--btn-txt-color)} /*.btn-double button.btn.btn-g.btn-outline:not(.selected, :focus, :focus-visible):last-child {box-shadow: 0 0 0 1px var(--base-line-secondary) inset}*/ .btn.btn-l.btn-solid {color: var(--colors-graphite-990)} .btn.btn-l.btn-solid svg {fill: var(--colors-graphite-990)} .btn.btn-l.btn-solid:focus { box-shadow: 0 0 0 1px var(--btn-bg-color-4), 0 0 0 4px var(--btn-bg-color-3);} .btn.btn-l.btn-invert:hover { color: var(--colors-graphite-990); } .btn.btn-l.btn-invert:hover svg { fill: var(--colors-graphite-990); } .btn.btn-l.btn-fill {color: var(--btn-bg-color-4);} .btn.btn-l.btn-fill svg {fill: var(--btn-bg-color-4);} .btn.btn-l.btn-fill:hover {color: var(--btn-bg-color-4);background: linear-gradient(0, var(--trans) 0%, var(--colors-alpha-light-40) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%); } .btn.btn-l.btn-fill:hover svg {color: var(--btn-bg-color-4);} .btn.btn-l.btn-outline {color: var(--btn-bg-color-4); box-shadow: 0 0 0 1px var(--btn-bg-color-4) inset;} .btn.btn-l.btn-outline svg {fill: var(--btn-bg-color-4);} .btn.btn-l.btn-outline:hover, .btn.btn-l.btn-skeleton:hover {box-shadow: 0 0 0 1px var(--btn-bg-color-4) inset;background: linear-gradient(0, var(--trans) 0%, var(--colors-alpha-light-40) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%);} .btn.btn-l.btn-outline:focus { background: none; box-shadow: 0 0 0 1px var(--btn-bg-color-0) inset, 0 0 0 1px var(--btn-bg-color-3), 0 0 0 4px var(--btn-bg-color-3); } .btn.btn-l.btn-plain, .btn.btn-l.btn-ghost { color: var(--btn-bg-color-4); } .btn.btn-l.btn-plain svg, .btn.btn-l.btn-ghost svg { fill: var(--btn-bg-color-4); } .btn.btn-l.btn-skeleton { color: var(--btn-bg-color-2); box-shadow: 0 0 0 1px var(--btn-bg-color-1) inset; } .btn.btn-l.btn-skeleton svg { fill: var(--btn-bg-color-4)} .btn.btn-l.btn-skeleton:hover { color: var(--btn-bg-color-4); } .btn.btn-l.btn-skeleton:hover svg { fill: var(--btn-bg-color-4); } .btn.btn-l.btn-ghost:hover { color: var(--btn-bg-color-4); background: linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-1) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%);} .btn.btn-l.btn-ghost:hover svg { fill: var(--btn-bg-color-4);} /* color: var(--btn-txt-color); box-shadow: 0 0 0 1px var(--btn-txt-color) inset; */ /* button type A */ .btn.btn-a { --btn-txt-color: var(--base-txt-btn-a); --btn-bg-color-1: var(--base-hlt-hover); --btn-bg-color-2: var(--base-hlt-selected); --btn-bg-color-3: var(--base-hlt-pressed); --btn-bg-color-4: var(--base-hlt-invert); --btn-bg-color-5: var(--base-hlt-invert-major); } /* button type B */ .btn.btn-b { --btn-txt-color: var(--base-txt-btn-b); --btn-bg-color-1: var(--base-hlt-b-hover); --btn-bg-color-2: var(--base-hlt-b-selected); --btn-bg-color-3: var(--base-hlt-b-pressed); --btn-bg-color-4: var(--base-hlt-b-invert); --btn-bg-color-5: var(--base-hlt-b-invert-major); } /* button type DARK */ .btn.btn-g { --btn-txt-color: var(--base-txt-secondary); --btn-bg-color-1: var(--base-hlt-g-hover); --btn-bg-color-2: var(--base-hlt-g-selected); --btn-bg-color-3: var(--base-hlt-g-pressed); --btn-bg-color-4: var(--base-hlt-g-invert); --btn-bg-color-5: var(--base-hlt-g-invert-major); } /* button type WARN */ .btn.btn-w { --btn-txt-color: var(--base-txt-btn-w); --btn-bg-color-1: var(--base-hlt-w-hover); --btn-bg-color-2: var(--base-hlt-w-selected); --btn-bg-color-3: var(--base-hlt-w-pressed); --btn-bg-color-4: var(--base-hlt-w-invert); --btn-bg-color-5: var(--base-hlt-w-invert-major); } /* button type LIGHT */ .btn.btn-l { --btn-txt-color: var(--colors-graphite-990); --btn-bg-color-1: var(--colors-alpha-light-20); --btn-bg-color-2: var(--colors-alpha-light-90); --btn-bg-color-3: var(--colors-alpha-light-70); --btn-bg-color-4: var(--colors-alpha-light-100); --btn-bg-color-5: var(--colors-alpha-light-90); } .btn.btn-solid { font: var(--font-ui-13-small-bold); background: var(--btn-bg-color-4); } .btn.btn-solid:hover, .btn.btn-solid.hover { background: var(--btn-bg-color-5); } .btn.btn-solid:focus { background: var(--btn-bg-color-4); box-shadow: 0 0 0 1px var(--btn-txt-color), 0 0 0 4px var(--btn-bg-color-3); } @media screen and (min-width: 481px) { /* to disable box shadow on mobile */ .btn.btn-solid.selected, .btn.btn-solid.selected:hover, .btn.btn-solid.selected:focus, .btn.btn-solid:focus-visible, .btn.btn-solid:focus-visible:hover, .btn.btn-solid:focus-visible:focus { background: var(--btn-bg-color-5); box-shadow: 0 0 0 2px var(--base-cont-top), 0 0 0 4px var(--btn-bg-color-4); } } .btn.btn-solid.btn-disabled, .btn.btn-solid[disabled] { background: var(--btn-bg-color-4); box-shadow: none; } .btn-double:has(> *:nth-child(2)) button.btn.btn-solid:not(.selected, :focus, :focus-visible, :first-child) { box-shadow: 1px 0 0 0 var(--btn-bg-color-5) inset; } .btn-double:has(> *:nth-child(2)) button.btn.btn-fill:not(.selected, :focus, :focus-visible, :first-child) { box-shadow: 1px 0 0 0 var(--btn-bg-color-3) inset; } .btn.btn-invert { font: var(--font-ui-13-small-semi); color: var(--btn-txt-color); background: linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-3) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%); } .btn.btn-invert:hover, .btn.btn-invert.hover { color: var(--base-txt-alt-light); background: var(--btn-bg-color-4); } .btn.btn-invert:focus { background: var(--btn-bg-color-5); color: var(--base-txt-alt-light); } .btn.btn-invert svg { fill: var(--btn-txt-color); } .btn.btn-invert:hover svg, .btn.btn-invert.hover svg, .btn.btn-invert:focus svg { fill: var(--base-txt-alt-light); } @media screen and (min-width: 481px) { /* to disable box shadow on mobile */ .btn.btn-invert.selected, .btn.btn-invert.selected:hover, .btn.btn-invert.selected:focus, .btn.btn-invert:focus-visible { background: linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-4) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%); color: var(--base-txt-alt-light); box-shadow: 0 0 0 2px var(--base-cont-top), 0 0 0 4px var(--btn-bg-color-4); } .btn.btn-invert.selected svg, .btn.btn-invert.selected:hover svg, .btn.btn-invert.selected.hover svg, .btn.btn-invert.selected:focus svg, .btn.btn-invert:focus-visible svg { fill: var(--base-txt-alt-light); } } .btn.btn-invert.btn-disabled, .btn.btn-invert[disabled] { background: linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-3) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%); box-shadow: none; } .btn-double:has(*:nth-child(2)) button.btn.btn-invert:first-child:not(.selected, :focus, :focus-visible):hover + button.btn.btn-invert:last-child, .btn-double:has(*:nth-child(2)) button.btn.btn-invert:not(.selected, :focus, :focus-visible):last-child:hover { box-shadow: 1px 0 0 0 var(--btn-bg-color-4) inset } .btn.btn-fill { font: var(--font-ui-13-small-med); color: var(--btn-txt-color); background: linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-1) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%); } /* TODO implement .withBtnHover:hover for another buttons */ .btn.btn-fill:hover, .btn.btn-fill.hover, .withBtnHover:hover .btn.btn-fill { background: linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-2) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%); } .btn.btn-fill:focus { background: linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-3) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%); } .btn.btn-fill svg { fill: var(--btn-txt-color); } @media screen and (min-width: 481px) { /* to disable box shadow on mobile */ .btn.btn-fill.selected, .btn.btn-fill.selected:hover, .btn.btn-fill.selected:focus, .btn.btn-fill:focus-visible { background: linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-2) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%); box-shadow: 0 0 0 2px var(--base-cont-top), 0 0 0 4px var(--btn-bg-color-4); } } .btn.btn-fill.btn-disabled, .btn.btn-fill[disabled] { background: linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-1) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%); box-shadow: none; } .btn.btn-outline { font: var(--font-ui-13-small-med); color: var(--btn-txt-color); box-shadow: 0 0 0 1px var(--btn-txt-color) inset; } .btn.btn-outline:hover, .btn.btn-outline.hover { background: linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-1) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%); box-shadow: 0 0 0 1px var(--btn-txt-color) inset; } .btn.btn-outline:focus { /*box-shadow: 0 0 0 1px var(--btn-bg-color-0) inset, 0 0 0 1px var(--btn-bg-color-5), 0 0 0 4px var(--btn-bg-color-3);*/ box-shadow: 0 0 0 1px var(--btn-bg-color-0) inset, 0 0 0 1px var(--btn-txt-color), 0 0 0 4px var(--btn-bg-color-3); background: var(--btn-bg-color-0); } .btn.btn-outline svg { fill: var(--btn-txt-color); } @media screen and (min-width: 481px) { /* to disable box shadow on mobile */ .btn.btn-outline.selected, .btn.btn-outline.selected:hover, .btn.btn-outline.selected:focus, .btn.btn-outline:focus-visible, .btn.btn-outline:focus-visible:hover, .btn.btn-outline:focus-visible:focus { background: linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-1) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%); box-shadow: 0 0 0 2px var(--base-cont-top), 0 0 0 4px var(--btn-bg-color-4); } } .btn.btn-outline.btn-disabled, .btn.btn-outline[disabled], .btn.btn-outline.btn-disabled:hover, .btn.btn-outline[disabled]:hover, .btn.btn-outline.btn-disabled:focus, .btn.btn-outline[disabled]:focus { background: var(--btn-bg-color-0); box-shadow: 0 0 0 1px var(--base-line-secondary) inset; color: var(--btn-txt-color); } .btn.btn-outline.btn-disabled svg, .btn.btn-outline[disabled] svg, .btn.btn-outline.btn-disabled:hover svg, .btn.btn-outline[disabled]:hover svg, .btn.btn-outline.btn-disabled:focus svg, .btn.btn-outline[disabled]:focus svg { fill: var(--btn-txt-color); } /*.btn-double button.btn.btn-outline:not(.selected, :focus, :focus-visible):last-child {*/ /* box-shadow: 0 0 0 1px var(--btn-txt-color) inset;*/ /*}*/ .btn-double:has(*:nth-child(2)) button.btn.btn-outline:first-child { transform: translateX(1px); } .btn.btn-bg.btn-outline:hover, .btn.btn-outline.hover { background: var(--btn-bg-color-0); } .btn.btn-bg.btn-outline:focus { background: linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-1) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%); } /* .btn-double button.btn-outline:first-child:focus { box-shadow: 0 0 0 1px var(--btn-bg-color-0) inset, 0 0 0 1px var(--btn-bg-color-5), 0 0 0 4px var(--btn-bg-color-3), -1px 0 0 0 #fffffff2 inset; z-index: 1; } .btn-double button.btn-outline:last-child:focus { box-shadow: 0 0 0 1px var(--btn-bg-color-0) inset, 0 0 0 1px var(--btn-bg-color-5), 0 0 0 4px var(--btn-bg-color-3), 1px 0 0 0 #fffffff2 inset; z-index: 1; } .btn-double button.btn-outline:first-child:focus-visible { box-shadow: 0 0 0 1px var(--btn-bg-color-0) inset, 0 0 0 1px var(--btn-bg-color-5), 0 0 0 4px var(--btn-bg-color-3), -1px 0 0 0 #ffffffe0 inset; z-index: 1; } .btn-double button.btn-outline:last-child:focus-visible { box-shadow: 0 0 0 1px var(--btn-bg-color-0) inset, 0 0 0 1px var(--btn-bg-color-5), 0 0 0 4px var(--btn-bg-color-3), 1px 0 0 0 #ffffffe0 inset; z-index: 1; } */ .btn.btn-plain { font: var(--font-ui-13-small-med); color: var(--btn-txt-color); } /* TODO implement .withBtnHover:hover for another buttons */ .btn.btn-plain:hover, .btn.btn-plain.hover, .withBtnHover:hover .btn.btn-plain { background: linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-1) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%); } .btn.btn-plain:focus { background: linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-3) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%); } .btn.btn-plain svg { fill: var(--btn-txt-color); } @media screen and (min-width: 481px) { /* to disable box shadow on mobile */ .btn.btn-plain.selected, .btn.btn-plain.selected:hover, .btn.btn-plain.selected:focus, .btn.btn-plain:focus-visible { background: linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-1) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%); box-shadow: 0 0 0 2px var(--base-cont-top), 0 0 0 4px var(--btn-bg-color-4); } } .btn.btn-plain.btn-disabled, .btn.btn-plain[disabled] { background: var(--btn-bg-color-0); box-shadow: none; } .btn.btn-skeleton { font: var(--font-ui-13-small-reg); color: var(--base-txt-primary); box-shadow: 0 0 0 1px var(--base-line-secondary) inset; } .btn.btn-skeleton:hover, .btn.btn-skeleton.hover { background: linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-1) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%); box-shadow: 0 0 0 1px var(--btn-txt-color) inset; color: var(--btn-txt-color); } .btn.btn-skeleton:hover svg, .btn.btn-skeleton.hover svg { fill: var(--btn-txt-color); } .btn.btn-skeleton:focus { background: linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-2) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%); box-shadow: 0 0 0 1px var(--btn-txt-color) inset; color: var(--btn-txt-color); } .btn.btn-skeleton svg { fill: var(--base-txt-primary); } .btn.btn-skeleton:focus svg { fill: var(--btn-txt-color); } @media screen and (min-width: 481px) { /* to disable box shadow on mobile */ .btn.btn-skeleton.selected, .btn.btn-skeleton.selected:hover, .btn.btn-skeleton.selected:focus, .btn.btn-skeleton:focus-visible, .btn.btn-skeleton:focus-visible:hover, .btn.btn-skeleton:focus-visible:focus { color: var(--btn-txt-color); background: linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-1) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%); box-shadow: 0 0 0 2px var(--base-cont-top), 0 0 0 4px var(--btn-bg-color-4); } .btn.btn-skeleton.selected svg, .btn.btn-skeleton.selected:hover svg, .btn.btn-skeleton.selected.hover svg, .btn.btn-skeleton.selected:focus svg, .btn.btn-skeleton:focus-visible svg, .btn.btn-skeleton:focus-visible:hover svg, .btn.btn-skeleton:focus-visible.hover svg, .btn.btn-skeleton:focus-visible:focus svg { fill: var(--btn-txt-color); } } .btn.btn-skeleton.btn-disabled, .btn.btn-skeleton[disabled] { background: var(--btn-bg-color-0); box-shadow: 0 0 0 1px var(--base-line-secondary) inset; } .btn-double:has(*:nth-child(2)) button.btn.btn-skeleton:not(.selected, :focus, :focus-visible):last-child { box-shadow: 0 0 0 1px var(--base-line-secondary) inset; } .btn-double:has(*:nth-child(2)) button.btn.btn-skeleton:not(.selected, :focus, :focus-visible):last-child:hover { box-shadow: 0 0 0 1px var(--base-line-accent) inset; } .btn-double:has(*:nth-child(2)) button.btn.btn-skeleton:first-child { transform: translateX(1px); } .btn.btn-bg.btn-skeleton:hover, .btn.btn-skeleton.hover { background: var(--btn-bg-color-0); } .btn.btn-bg.btn-skeleton:focus { background: linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-1) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%); } .btn.btn-ghost { font: var(--font-ui-13-small-reg); color: var(--base-txt-primary); } .btn.btn-ghost:hover, .btn.btn-ghost.hover { background: linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-1) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%); color: var(--btn-txt-color); } .btn.btn-ghost:hover svg, .btn.btn-ghost.hover svg { fill: var(--btn-txt-color); } .btn.btn-ghost:focus { background: linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-3) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%); color: var(--btn-txt-color); } .btn.btn-ghost:focus svg { fill: var(--btn-txt-color); } .btn.btn-ghost svg { fill: var(--base-txt-primary); } @media screen and (min-width: 481px) { /* to disable box shadow on mobile */ .btn.btn-ghost.selected, .btn.btn-ghost.selected:hover, .btn.btn-ghost.selected:focus, .btn.btn-ghost:focus-visible { background: linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-1) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%); color: var(--btn-txt-color); } .btn.btn-ghost.selected svg, .btn.btn-ghost.selected:hover svg, .btn.btn-ghost.selected:focus svg, .btn.btn-ghost:focus-visible svg { fill: var(--btn-txt-color); } } .btn.btn-ghost.btn-disabled, .btn.btn-ghost[disabled] { background: var(--btn-bg-color-0); box-shadow: none; } .btn.btn-promo { color: var(--base-btn-notice-major); background: var(--btn-bg-color-0); box-shadow: 0 0 0 1px var(--base-btn-notice-major) inset; } .btn.btn-promo svg { fill: var(--base-btn-notice-major); } .btn.btn-promo:hover svg { fill: var(--base-txt-alt-light); } .btn.btn-promo:hover, .btn.btn-promo.hover { background: linear-gradient(0, var(--trans) 0%, var(--base-btn-notice-minor) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%); box-shadow: 0 0 0 1px var(--base-btn-notice-minor) inset; color: var(--base-txt-alt-light); } .btn.btn-promo:focus { background: linear-gradient(0, var(--trans) 0%, var(--base-btn-notice-major) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%); box-shadow: 0 0 0 1px var(--base-btn-notice-major) inset; color: var(--base-txt-alt-light); } .btn.btn-promo:hover svg, .btn.btn-promo.hover svg, .btn.btn-promo:focus svg { fill: var(--base-txt-alt-light) !important; } @media screen and (min-width: 481px) { /* to disable box shadow on mobile */ .btn.btn-promo.selected, .btn.btn-promo.selected:hover, .btn.btn-promo.selected:focus, .btn.btn-promo:focus-visible { background: linear-gradient(0, var(--trans) 0%, var(--colors-amber-50) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%); box-shadow: 0 0 0 2px var(--base-cont-top), 0 0 0 4px var(--base-btn-notice-minor); color: var(--base-btn-notice-major); } .btn.btn-promo.selected:hover svg, .btn.btn-promo.selected.hover svg, .btn.btn-promo:focus-visible svg, .btn.btn-promo:focus-visible:hover svg, .btn.btn-promo:focus-visible:hover svg { fill: var(--base-btn-notice-major) !important; } } .btn.btn-promo.btn-disabled, .btn.btn-promo[disabled] { background: var(--btn-bg-color-0); color: var(--base-btn-notice-major); } .btn.btn-promo.btn-disabled svg, .btn.btn-promo[disabled] svg { fill: var(--base-btn-notice-major); } .btn.btn-time { font: var(--font-ui-13-small-med); color: var(--base-txt-primary); background: var(--btn-bg-color-0); box-shadow: 0 0 0 1px var(--base-txt-ghost) inset; } .btn.btn-time svg { fill: var(--base-txt-max); } .btn.btn-time:hover, .btn.btn-time.hover { background: linear-gradient(0, var(--trans) 0%, var(--costs-time-highlight) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%); box-shadow: 0 0 0 1px var(--costs-time-text) inset; } .btn.btn-time:focus { background: linear-gradient(0, var(--trans) 0%, var(--costs-time-easy) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%); box-shadow: 0 0 0 1px var(--costs-time-text) inset; } .btn.btn-time ws-icon.btn-left-icon svg { width: 16px; height: 16px; } .btn-double:has(*:nth-child(2)) button.btn.btn-time:not(.selected, :focus, :focus-visible):last-child { box-shadow: 0 0 0 1px var(--base-txt-ghost) inset; } .btn-double:has(*:nth-child(2)) button.btn.btn-time:not(.selected, :focus, :focus-visible):last-child:hover { box-shadow: 0 0 0 1px var(--costs-time-text) inset; } .btn.btn-time.selected, .btn.btn-time.selected:hover, .btn.btn-time.selected:focus, .btn.btn-time:focus-visible { background: linear-gradient(0, var(--trans) 0%, var(--costs-time-highlight) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%); box-shadow: 0 0 0 2px var(--base-cont-top), 0 0 0 4px var(--costs-time-text); } .btn.btn-time.btn-disabled, .btn.btn-time[disabled] { background: var(--btn-bg-color-0); box-shadow: 0 0 0 1px var(--base-txt-ghost) inset; } .btn.btn-money { font: var(--font-ui-13-small-med); color: var(--base-txt-primary); background: var(--btn-bg-color-0); box-shadow: 0 0 0 1px var(--base-txt-ghost) inset; } .btn.btn-money svg { fill: var(--base-txt-max); } .btn.btn-money:hover, .btn.btn-money.hover { background: linear-gradient(0, var(--trans) 0%, var(--costs-money-highlight) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%); box-shadow: 0 0 0 1px var(--costs-money-text) inset; } .btn.btn-money:focus { background: linear-gradient(0, var(--trans) 0%, var(--costs-money-easy) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%); box-shadow: 0 0 0 1px var(--costs-money-text) inset; } .btn.btn-money ws-icon.btn-left-icon svg { width: 16px; height: 16px; } .btn-double:has(*:nth-child(2)) button.btn.btn-money:not(.selected, :focus, :focus-visible):last-child { box-shadow: 0 0 0 1px var(--base-txt-ghost) inset; } .btn-double:has(*:nth-child(2)) button.btn.btn-money:not(.selected, :focus, :focus-visible):last-child:hover { box-shadow: 0 0 0 1px var(--costs-money-text) inset; } .btn.btn-money.selected, .btn.btn-money.selected:hover, .btn.btn-money.selected:focus, .btn.btn-money:focus-visible { background: linear-gradient(0, var(--trans) 0%, var(--costs-money-highlight) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%); box-shadow: 0 0 0 2px var(--base-cont-top), 0 0 0 4px var(--costs-money-text); } .btn.btn-money.btn-disabled, .btn.btn-money[disabled] { background: var(--btn-bg-color-0); box-shadow: 0 0 0 1px var(--base-txt-ghost) inset; } .btn.btn-timer, .btn.btn-sum { font: var(--font-ui-13-small-bold); color: var(--base-txt-alt-light); background: var(--costs-timer-play); box-shadow: 0 0 0 1px var(--colors-graphite-trans-500) inset; } .btn.btn-timer:hover, .btn.btn-sum:hover, .btn.btn-sum:focus, .btn.btn-sum:focus-visible { box-shadow: 0 0 0 2px var(--base-cont-top), 0 0 0 4px var(--colors-graphite-trans-300); } .btn.btn-timer:focus { box-shadow: 0 0 0 1px var(--colors-graphite-trans-500) inset; } .btn.btn-timer.btn-timer-play { background: var(--costs-timer-play); } .btn.btn-timer.btn-timer-warning { background: var(--costs-timer-warning); } .btn.btn-timer.btn-timer-alert { background: var(--costs-timer-alert); } .btn.btn-timer.btn-timer-pause { background: var(--costs-timer-pause); } @media screen and (min-width: 481px) { /* to disable box shadow on mobile */ .btn.btn-timer.selected, .btn.btn-timer.selected:hover, .btn.btn-timer.selected:focus, .btn.btn-timer:focus-visible, .btn.btn-sum.selected, .btn.btn-sum.selected:hover, .btn.btn-sum.selected:focus, .btn.btn-sum:focus-visible { box-shadow: 0 0 0 2px var(--base-cont-top), 0 0 0 4px var(--colors-graphite-trans-300); } } .btn.btn-sum { background: var(--costs-timer-pause); } .btn.btn-timer.btn-disabled, .btn.btn-timer[disabled] { background: var(--costs-timer-play); box-shadow: 0 0 0 1px var(--colors-graphite-trans-500) inset; } .btn.btn-sum.btn-disabled, .btn.btn-sum[disabled] { background: var(--costs-timer-pause); box-shadow: 0 0 0 1px var(--colors-graphite-trans-500) inset; } .btn.btn-editor { padding: 0 4px; height: 28px; border-radius: 6px; font: var(--font-ui-12-mini-med); color: var(--base-txt-primary); } .btn.btn-editor:hover, .btn.btn-editor.hover { background: var(--base-hlt-b-hover); color: var(--base-txt-btn-b); } .btn.btn-editor:focus { background: var(--base-hlt-b-pressed); } .btn.btn-editor.btn_act, .btn.btn-editor.btn_act:focus, .btn.btn-editor.btn_act:focus-visible { background: var(--base-hlt-b-pressed); box-shadow: var(--shadow-brd-hover-b); } .btn.btn-editor ws-icon { width: 20px; height: 20px; } .btn.btn-editor svg { width: 16px; height: 16px; fill: var(--base-txt-primary); } .btn.btn-editor:hover svg, .btn.btn-editor.hover svg, .btn.btn-editor:focus svg, .btn.btn-editor.btn_act svg{ fill: var(--base-txt-btn-b); } .btn.btn-editor > span:not([class]) {padding: 0 6px;} .btn {padding: 0 6px;} .btn > span:not([class]) {padding: 0 6px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis} .btn ws-icon.btn-left-icon {width: 28px; height: 28px;} .btn ws-icon.btn-right-icon {width: 20px; height: 20px;} .btn.btn-same-left-right-icon ws-icon.btn-right-icon {width: 28px; height: 28px;} .btn ws-icon.btn-box-small {width: 20px; height: 20px;} .btn ws-icon.btn-box-big {width: 28px; height: 28px;} .btn ws-icon {--icon-size: 20px;} .btn > span:not([class]) i {font-style:normal;font-weight:100;font-variant-numeric: tabular-nums;} .btn.btn-16 {height: 16px;font-size: 11px;padding: 0 2px;border-radius: 5px;} .btn.btn-16 > span:not([class]) {padding: 0 4px;} .btn.btn-16 ws-icon.btn-left-icon {width: 16px; height: 16px;} .btn.btn-16 ws-icon.btn-right-icon {width: 14px; height: 14px;} .btn.btn-16 ws-icon.btn-box-small {width: 14px; height: 14px;} .btn.btn-16 ws-icon.btn-box-big {width: 16px; height: 16px;} .btn.btn-16 ws-icon {--icon-size: 14px;} .btn.btn-20 {height: 20px;font-size: 11px;padding: 0 2px;border-radius: 5px;} .btn.btn-20 > span:not([class]) {padding: 0 4px;} .btn.btn-20 ws-icon.btn-left-icon {width: 20px; height: 20px;} .btn.btn-20 ws-icon.btn-right-icon {width: 16px; height: 16px;} .btn.btn-20 ws-icon.btn-box-small {width: 16px; height: 16px;} .btn.btn-20 ws-icon.btn-box-big {width: 20px; height: 20px;} .btn.btn-20 ws-icon {--icon-size: 16px;} .btn.btn-24 {height: 24px;font-size: 11px;padding: 0 4px;border-radius: 5px;} .btn.btn-24 > span:not([class]) {padding: 0 4px;} .btn.btn-24 ws-icon.btn-left-icon {width: 24px; height: 24px;} .btn.btn-24 ws-icon.btn-right-icon {width: 16px; height: 16px;} .btn.btn-same-left-right-icon.btn-24 ws-icon.btn-right-icon {width: 24px; height: 24px;} .btn.btn-24 ws-icon.btn-box-small {width: 16px; height: 16px;} .btn.btn-24 ws-icon.btn-box-big {width: 24px; height: 24px;} .btn.btn-24 ws-icon {--icon-size: 16px;} .btn.btn-28 { --btn-size: 28px; height: 28px;font-size: 12px;padding: 0 4px; border-radius: 6px;} .btn.btn-28 > span:not([class]) {padding: 0 4px} .btn.btn-28 ws-icon.btn-left-icon {width: 28px; height: 28px;} .btn.btn-28 ws-icon.btn-right-icon {width: 20px; height: 20px;} .btn.btn-28 ws-icon.btn-box-small {width: 20px; height: 20px;} .btn.btn-28 ws-icon.btn-box-big {width: 28px; height: 28px;} .btn.btn-28 ws-icon {--icon-size: 16px;} .btn.btn-32 { --btn-size: 32px; height: 32px; font-size: 13px; padding: 0 6px; border-radius: 7px;} .btn.btn-32 > span:not([class]) {padding: 0 6px} .btn.btn-32 ws-icon.btn-left-icon {width: 28px; height: 28px;} .btn.btn-32 ws-icon.btn-right-icon {width: 20px; height: 20px;} .btn.btn-32 ws-icon.btn-box-small {width: 20px; height: 20px;} .btn.btn-32 ws-icon.btn-box-big {width: 28px; height: 28px;} .btn.btn-32 ws-icon {--icon-size: 20px;} .btn.btn-36 { --btn-size: 36px; height: 36px;font-size: 13px;padding: 0 8px;border-radius: 8px;} .btn.btn-36 > span:not([class]) {padding: 0 8px} .btn.btn-36 ws-icon.btn-left-icon {width: 28px; height: 28px;} .btn.btn-36 ws-icon.btn-right-icon {width: 20px; height: 20px;} .btn.btn-36 ws-icon.btn-box-small {width: 20px; height: 20px;} .btn.btn-36 ws-icon.btn-box-big {width: 28px; height: 28px;} .btn.btn-36 ws-icon {--icon-size: 20px;} .btn.btn-40 { --btn-size: 40px; height: 40px;font-size: 14px;padding: 0 10px;border-radius: 9px;} .btn.btn-40 > span:not([class]) {padding: 0 8px;} .btn.btn-40 ws-icon.btn-left-icon {width: 32px; height: 32px;} .btn.btn-40 ws-icon.btn-right-icon {width: 20px; height: 20px;} .btn.btn-40 ws-icon.btn-box-small {width: 20px; height: 20px;} .btn.btn-40 ws-icon.btn-box-big {width: 32px; height: 32px;} .btn.btn-40 ws-icon {--icon-size: 20px;} .btn.btn-48 { --btn-size: 48px; height: 48px;font-size: 14px;padding: 0 12px;border-radius: 10px;} .btn.btn-48 > span:not([class]) {padding: 0 8px} .btn.btn-48 ws-icon.btn-left-icon {width: 32px; height: 32px;} .btn.btn-48 ws-icon.btn-right-icon {width: 24px; height: 24px;} .btn.btn-48 ws-icon {--icon-size: 24px;} .btn.btn-56 { --btn-size: 56px; height: 56px;font-size: 15px;padding: 0 16px;border-radius: 12px;} .btn.btn-56 > span:not([class]) {padding: 0 12px} .btn.btn-56 ws-icon.btn-left-icon {width: 32px; height: 32px;} .btn.btn-56 ws-icon.btn-right-icon {width: 24px; height: 24px;} .btn.btn-56 ws-icon.btn-box-small {width: 24px; height: 24px;} .btn.btn-56 ws-icon.btn-box-big {width: 32px; height: 32px;} .btn.btn-56 ws-icon {--icon-size: 24px;} .btn.btn-time.btn-48 ws-icon, .btn.btn-time.btn-48 ws-icon, .btn.btn-money.btn-48 ws-icon, .btn.btn-money.btn-48 ws-icon {--icon-size: 24px; } .btn.btn-time.btn-56 ws-icon, .btn.btn-time.btn-56 ws-icon, .btn.btn-money.btn-56 ws-icon, .btn.btn-money.btn-56 ws-icon {--icon-size: 24px; } .btn.btn-24.btn-promo ws-icon.btn-left-icon, .btn.btn-28.btn-promo ws-icon.btn-left-icon, .btn.btn-36.btn-promo ws-icon.btn-left-icon, .btn.btn-40.btn-promo ws-icon.btn-left-icon, .btn.btn-promo ws-icon.btn-left-icon {width: 20px; height: 20px;} .btn.btn-rounded {border-radius: 50px;} .btn.btn-g.btn-invert.btn-disabled, .btn.btn-g.btn-invert[disabled] {color: var(--base-hlt-g-invert-major)} .btn.btn-g.btn-invert.btn-disabled:hover svg, .btn.btn-g.btn-invert.btn-disabled.hover svg, .btn.btn-g.btn-invert.btn-disabled:focus svg, .btn.btn-g.btn-invert[disabled]:hover svg, .btn.btn-g.btn-invert[disabled].hover svg, .btn.btn-g.btn-invert[disabled]:focus svg {fill: var(--base-hlt-g-invert-major)} /** SPECIAL CASES **/ .btn ws-icon[name=spark] svg { /* fill: var(--btn-bg-color-4); */ } .editor__toolbar .btn svg { fill: var(--base-txt-primary); } button.btn.pull-right, button.btn.btn-blue { width: auto; } .btn:hover span.ico_equalizer { background-position: -335px -35px; } .btn span.loader_sm { width: 12px; height: 12px; padding: 0; margin: 6px; } .btn ws-icon { pointer-events: none; flex-shrink: 0; } ws-btn.date button:nth-child(2) span { width:70px; } ws-btn.date.date-paginal .btn-double { box-shadow: 0 0 0 1px var(--base-txt-btn-b) inset; gap: 2px; padding: 2px; border-radius: 8px; } ws-btn.date.date-paginal .btn-double .btn.btn-24 { padding: 0 0; } ws-btn.date.date-paginal .btn-double .btn.btn-24:nth-child(2) { padding: 0 2px; } ws-btn.date.date-paginal .btn-double:has(> *:nth-child(2)) button.btn.btn-fill:not(.selected, :focus, :focus-visible, :first-child) { box-shadow: none; } ws-btn.date.date-paginal .btn-double:has(> *:nth-child(2)) button:last-child:not(:first-child), ws-btn.date.date-paginal .btn-double:has(> *:nth-child(2)) button:nth-child(2):not(:first-child) { border-top-left-radius: inherit; border-bottom-left-radius: inherit; } ws-btn.date.date-paginal .btn-double:has(> *:nth-child(2)) button:nth-child(2):not(:last-child) { border-radius: inherit; } ws-btn.date.date-paginal .btn-double:has(> *:nth-child(2)) button:first-child:not(:last-child) { border-top-right-radius: inherit; border-bottom-right-radius: inherit; } .btn.btn-sp-time, .btn.btn-sp-money { font: var(--font-ui-12-mini-med); color: var(--base-txt-secondary); box-shadow: 0 0 0 1px var(--base-line-secondary) inset; } .btn.btn-sp-time svg, .btn.btn-sp-money svg { fill: var(--base-txt-secondary); } .btn.btn-sp-time:hover { color: var(--costs-time-text); box-shadow: 0 0 0 1px var(--costs-time-text) inset; background: var(--costs-time-highlight); } .btn.btn-sp-time:hover svg { fill: var(--costs-time-text); } .btn.btn-sp-time:focus { color: var(--base-txt-primary); background: var(--costs-time-easy); box-shadow: 0 0 0 1px var(--costs-time-major) inset; } .btn.btn-sp-money:hover { color: var(--costs-money-text); box-shadow: 0 0 0 1px var(--costs-money-text) inset; background: var(--costs-money-highlight); } .btn.btn-sp-money:hover svg { fill: var(--costs-money-text); } .btn.btn-sp-money:focus { color: var(--base-txt-primary); background: var(--costs-money-easy); box-shadow: 0 0 0 1px var(--costs-money-major) inset; } .btn.btn-sp-time:focus svg, .btn.btn-sp-money:focus svg { fill: var(--base-txt-primary); } /** quantum cases **/ .btn.btn-quantum-a-fill { --qnt-txt-color: var(--base-txt-btn-a); --qnt-bg-color: var(--base-hlt-hover); --qnt-shadow: inherit; } .btn.btn-quantum-a-solid { --qnt-txt-color: var(--base-txt-alt-light); --qnt-bg-color: var(--base-hlt-invert); --qnt-shadow: none; } .btn.btn-quantum-w-solid { --qnt-txt-color: var(--base-txt-alt-light); --qnt-bg-color: var(--base-hlt-w-invert); --qnt-shadow: none; } .btn.btn-quantum { position: relative; overflow: hidden; } .btn.btn-quantum:before, .btn.btn-quantum:after { box-sizing: border-box;z-index: 1;content: "";position: absolute;top: 0;right: 0;bottom: 0;left: 0; } .btn.btn-quantum > * { z-index: 2; } .btn.btn-quantum, .btn.btn-quantum:before, .btn.btn-quantum:after, .btn.btn-quantum svg { transition: 0.2s ease-in-out; } .btn.btn-quantum:not([disabled]):hover, .btn.btn-quantum:focus, .btn.btn-quantum.focus { box-shadow: var(--qnt-shadow) !important; } .btn.btn-quantum:not([disabled]):hover svg, .btn.btn-quantum:focus svg, .btn.btn-quantum.focus svg { fill: var(--qnt-txt-color) !important; } .btn.btn-quantum.btn-diagonal-close:before { right: calc(0 - var(--btn-size)); border-right: var(--btn-size) solid transparent; border-bottom: var(--btn-size) solid var(--qnt-bg-color); transform: translateX(-100%); width: 100%; } .btn.btn-quantum.btn-diagonal-close:after { left: calc(0 - var(--btn-size)); border-left: var(--btn-size) solid transparent; border-top: var(--btn-size) solid var(--qnt-bg-color); transform: translateX(100%); width: 100%; } .btn.btn-quantum.btn-diagonal-close:not([disabled]):hover, .btn.btn-quantum.btn-diagonal-close:focus, .btn.btn-quantum.btn-diagonal-close.focus { color: var(--qnt-txt-color); } .btn.btn-quantum.btn-diagonal-close:not([disabled]):hover:before, .btn.btn-quantum.btn-diagonal-close:focus:before, .btn.btn-quantum.btn-diagonal-close.focus:before { transform: translateX(calc(-50% + var(--btn-size) / 2)); } .btn.btn-quantum.btn-diagonal-close:not([disabled]):hover:after, .btn.btn-quantum.btn-diagonal-close:focus:after, .btn.btn-quantum.btn-diagonal-close.focus:after { transform: translateX(calc(50% - var(--btn-size) / 2)); } .btn.btn-quantum.btn-swipe-from-left:before, .btn.btn-quantum.btn-swipe-from-right:before {background-color: var(--qnt-bg-color);} .btn.btn-quantum.btn-swipe-from-left:before {transform: translateX(-101%);} .btn.btn-quantum.btn-swipe-from-right:before {transform: translateX(101%);} .btn.btn-quantum.btn-swipe-from-left:not([disabled]):hover, .btn.btn-quantum.btn-swipe-from-right:not([disabled]):hover, .btn.btn-quantum.btn-swipe-from-left:focus, .btn.btn-quantum.btn-swipe-from-right:focus, .btn.btn-quantum.btn-swipe-from-left.focus, .btn.btn-quantum.btn-swipe-from-right.focus { color: var(--qnt-txt-color); } .btn.btn-quantum.btn-swipe-from-left:not([disabled]):hover:before, .btn.btn-quantum.btn-swipe-from-right:not([disabled]):hover:before, .btn.btn-quantum.btn-swipe-from-left:focus:before, .btn.btn-quantum.btn-swipe-from-right:focus:before, .btn.btn-quantum.btn-swipe-from-left.focus:before, .btn.btn-quantum.btn-swipe-from-right.focus:before { transform: translateX(0); } .btn.btn-quantum.btn-fade-both:before {background-color: var(--qnt-bg-color); opacity: 0; } .btn.btn-quantum.btn-fade-both:not([disabled]):hover, .btn.btn-quantum.btn-fade-both:focus, .btn.btn-quantum.btn-fade-both.focus { color: var(--qnt-txt-color); } .btn.btn-quantum.btn-fade-both:not([disabled]):hover:before, .btn.btn-quantum.btn-fade-both:focus:before, .btn.btn-quantum.btn-fade-both.focus:before { transform: translateX(0); opacity: 1; } .btn.btn-skeleton.btn-no-hover { pointer-events: auto; cursor: initial; } .btn.btn-skeleton.btn-no-hover:not([disabled]):hover, .btn.btn-skeleton.btn-no-hover:focus, .btn.btn-skeleton.btn-no-hover:active { --btn-bg-color-0: var(--base-cont-top); background: var(--base-cont-top); color: unset; box-shadow: 0 0 0 1px var(--base-line-secondary) inset; } body.mobile .btn.btn-solid:focus-visible, body.mobile .btn.btn-solid:focus-within { box-shadow: none; } body.mobile .btn.btn-invert:focus-visible, body.mobile .btn.btn-invert:focus-within { box-shadow: none; } body.mobile .btn.btn-fill:focus-visible, body.mobile .btn.btn-fill:focus-within { box-shadow: none; } body.mobile .btn.btn-plain:focus-visible, body.mobile .btn.btn-plain:focus-within { box-shadow: none; } body.mobile .btn.btn-ghost:focus-visible, body.mobile .btn.btn-ghost:focus-within { box-shadow: none; } body.mobile .btn.btn-skeleton:focus-visible, body.mobile .btn.btn-skeleton:focus-within { box-shadow: 0 0 0 1px var(--base-line-secondary) inset; } body.mobile .btn.btn-outline:focus-visible, body.mobile .btn.btn-outline:focus-within { box-shadow: 0 0 0 1px var(--btn-txt-color) inset; } .btn.btn-mini { font: var(--font-ui-10-nano-semi); } .btn.btn-g.btn-outline.btn-shadow-outside {box-shadow: 0 0 0 1px var(--base-line-secondary) !important;} .btn.btn-justify-start { justify-content: flex-start; } .btn.btn-justify-end { justify-content: flex-end; } .btn.focus-visible { box-shadow: 0 0 0 2px var(--base-cont-top), 0 0 0 4px var(--btn-bg-color-4); } @media (max-width: 480px) { /* компактна кнопка на мобілі (без тексту) */ .btn.btn-mobile-compact span:not([class]) { display: none !important; } /* ЗАГОТОВКА: якщо треба приховати іконки */ /* .btn.btn-mobile-hide-left .btn-icon-left { display: none !important; } .btn.btn-mobile-hide-right .btn-icon-right { display: none !important; } */ } .btn-ripple { --ripple-color: var(--btn-bg-color-3); position: relative; -webkit-tap-highlight-color: transparent; } .btn { position: relative; } .btn-right-indicator-a:after, .btn-right-indicator-b:after, .btn-right-indicator-g:after, .btn-right-indicator-w:after, .btn-left-indicator-a:before, .btn-left-indicator-b:before, .btn-left-indicator-g:before, .btn-left-indicator-w:before { position: absolute; display: block; content: ''; width: 5px; height: 5px; border-radius: 5px; } .btn-right-indicator-a:after, .btn-right-indicator-b:after, .btn-right-indicator-g:after, .btn-right-indicator-w:after { top: 4px; right: 4px; } .btn-left-indicator-a:before, .btn-left-indicator-b:before, .btn-left-indicator-g:before, .btn-left-indicator-w:before { top: 4px; left: 4px; } .btn-right-indicator-a:after, .btn-left-indicator-a:before { background: var(--base-txt-btn-a); } .btn-right-indicator-b:after, .btn-left-indicator-b:before { background: var(--base-txt-btn-b); } .btn-right-indicator-g:after, .btn-left-indicator-g:before { background: var(--base-txt-primary); } .btn-right-indicator-w:after, .btn-left-indicator-w:before { background: var(--base-txt-btn-w); } .btn-36, .btn-40 { &.btn-right-indicator-a:after, &.btn-right-indicator-b:after, &.btn-right-indicator-g:after, &.btn-right-indicator-w:after, &.btn-left-indicator-a:before, &.btn-left-indicator-b:before, &.btn-left-indicator-g:before, &.btn-left-indicator-w:before { width: 6px; height: 6px; border-radius: 6px; } &.btn-right-indicator-a:after, &.btn-right-indicator-b:after, &.btn-right-indicator-g:after, &.btn-right-indicator-w:after { top: 6px; right: 6px; } &.btn-left-indicator-a:before, &.btn-left-indicator-b:before, &.btn-left-indicator-g:before, &.btn-left-indicator-w:before { top: 6px; left: 6px; } } .btn-48, .btn-56 { &.btn-right-indicator-a:after, &.btn-right-indicator-b:after, &.btn-right-indicator-g:after, &.btn-right-indicator-w:after, &.btn-left-indicator-a:before, &.btn-left-indicator-b:before, &.btn-left-indicator-g:before, &.btn-left-indicator-w:before { width: 8px; height: 8px; border-radius: 8px; } &.btn-right-indicator-a:after, &.btn-right-indicator-b:after, &.btn-right-indicator-g:after, &.btn-right-indicator-w:after { top: 8px; right: 8px; } &.btn-left-indicator-a:before, &.btn-left-indicator-b:before, &.btn-left-indicator-g:before, &.btn-left-indicator-w:before { top: 8px; left: 8px; } } .btn-left-icon-180deg .btn-left-icon svg { rotate: 180deg; } ws-btn.activity__hot .btn .btn-left-icon svg, ws-btn.activity__today .btn .btn-left-icon svg { fill: var(--base-btn-notice-minor) !important; } ws-btn.activity__hot .btn .btn-left-icon svg { fill: var(--base-btn-notice-major) !important; } ws-btn.activity__warm .btn .btn-left-icon svg, ws-btn.activity__yesterday .btn .btn-left-icon svg { fill: var(--lbl-yesterday-major) !important; } ws-btn.activity__hot .btn .btn-left-icon, ws-btn.activity__today .btn .btn-left-icon { background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--lbl-today-major) 15%, transparent) 32%, rgba(0, 255, 0, 0) 100%); } ws-btn.activity__yesterday .btn .btn-left-icon { background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--lbl-yesterday-major) 15%, transparent) 32%, rgba(0, 255, 0, 0) 100%); } .btn.btn-proj-folder { background: var(--folder-color); } @media screen and (max-width: 480px) { .menu-h48 { /* 32(default) -> 36 */ .btn { --btn-size: 36px; height: 36px;font-size: 13px;padding: 0 8px;border-radius: 8px;} .btn > span:not([class]) {padding: 0 8px} .btn ws-icon.btn-left-icon {width: 28px; height: 28px;} .btn ws-icon.btn-right-icon {width: 20px; height: 20px;} .btn ws-icon.btn-box-small {width: 20px; height: 20px;} .btn ws-icon.btn-box-big {width: 28px; height: 28px;} .btn ws-icon {--icon-size: 20px;} /* 24 -> 32 */ .btn.btn-24 { --btn-size: 32px; height: 32px; font-size: 13px; padding: 0 6px; border-radius: 7px;} .btn.btn-24 > span:not([class]) {padding: 0 6px} .btn.btn-24 ws-icon.btn-left-icon {width: 28px; height: 28px;} .btn.btn-24 ws-icon.btn-right-icon {width: 20px; height: 20px;} .btn.btn-24 ws-icon.btn-box-small {width: 20px; height: 20px;} .btn.btn-24 ws-icon.btn-box-big {width: 28px; height: 28px;} .btn.btn-24 ws-icon {--icon-size: 20px;} /* 28 -> 36 */ .btn.btn-28 { --btn-size: 36px; height: 36px;font-size: 13px;padding: 0 8px;border-radius: 8px;} .btn.btn-28 > span:not([class]) {padding: 0 8px} .btn.btn-28 ws-icon.btn-left-icon {width: 28px; height: 28px;} .btn.btn-28 ws-icon.btn-right-icon {width: 20px; height: 20px;} .btn.btn-28 ws-icon.btn-box-small {width: 20px; height: 20px;} .btn.btn-28 ws-icon.btn-box-big {width: 28px; height: 28px;} .btn.btn-28 ws-icon {--icon-size: 20px;} /* 32 -> 36 */ .btn.btn-32 { --btn-size: 36px; height: 36px;font-size: 13px;padding: 0 8px;border-radius: 8px;} .btn.btn-32 > span:not([class]) {padding: 0 8px} .btn.btn-32 ws-icon.btn-left-icon {width: 28px; height: 28px;} .btn.btn-32 ws-icon.btn-right-icon {width: 20px; height: 20px;} .btn.btn-32 ws-icon.btn-box-small {width: 20px; height: 20px;} .btn.btn-32 ws-icon.btn-box-big {width: 28px; height: 28px;} .btn.btn-32 ws-icon {--icon-size: 20px;} /* special buttons */ .menu__group-taskButs { .btn { --btn-size: 48px; height: 48px;font-size: 14px;padding: 0 12px;border-radius: 10px;} .btn > span:not([class]) {padding: 0 8px} .btn ws-icon.btn-left-icon {width: 32px; height: 32px;} .btn ws-icon.btn-right-icon {width: 24px; height: 24px;} .btn ws-icon {--icon-size: 24px;} } } }/* SWITCHER */ .sw_off, .sw_on { min-width: 90px; float: right; text-align: right; font: 14px/20px var(--font-base) !important; } .sw_off span, .sw_on span { font: 14px/20px var(--font-base) !important; } .sw_off { display: inline-block; } .sw_on { display: none } h4.sw_pre { color: var(--base-txt-tertiary) } h4.sw_act { color: var(--base-txt-accent) } .sw_act .sw_on { display: inline-block } .sw_act .sw_off { display: none } .sw_on span, .sw_off span { color: inherit !important; font-weight: inherit !important } .sw_on, .sw_hover .sw_off { color: var(--base-btn-fresh-minor) !important; font-weight: bold !important } .sw_off, .sw_hover .sw_on { color: var(--base-txt-btn-w) !important; font-weight: bold !important } .sw_hover .sw_off span { border-bottom: 1px dashed var(--base-btn-fresh-minor) } .sw_hover .sw_on span { border-bottom: 1px dashed var(--base-btn-alert-primary-minor) } .sw_txt:before { content: attr(data-txt-off); color: var(--base-txt-tertiary); text-transform:uppercase; } .sw_act .sw_txt:before { content: attr(data-txt-on); color: var(--base-btn-togg-on); } .sw { float: right; width: 20px; height: 12px; padding: 2px; border-radius: 8px; transition: all 0.2s ease; -webkit-transition: all 0.2s ease; margin: 0 0 0 10px; } .sw span { float: left; width: 6px; height: 6px; margin: 3px; border-radius: 10px; transition: all 0.2s ease; -webkit-transition: all 0.2s ease; } .sw_act .sw span { background: var(--base-txt-alt-light); width: 10px; height: 10px; margin: 1px 0 1px 9px; } .sw { /* background: var(--base-cont-top); */ box-shadow: 0 0 0 1px var(--base-btn-togg-ghost) inset; } .sw span { background: var(--base-btn-togg-ghost); } .sw_act .sw { background: var(--base-btn-togg-on); box-shadow: none; } .sw_act_always .sw { /*background: var(--base-txt-muted);*/ opacity: 0.25; } /* new sw color classes with backward compatibility (if not present) */ a.sw[class*="sw_color_"], .sw_pre[class*="sw_color_"] a.sw { box-shadow: 0 0 0 1px var(--base-txt-tertiary) inset; } /* all off switches border */ a.sw[class*="sw_color_"] span, .sw_pre[class*="sw_color_"] a.sw span { background: var(--base-txt-tertiary); } /* all off switches toggle pill bg */ a.sw[class*="sw_color_"] .sw_txt:before, .sw_pre[class*="sw_color_"] .sw_txt:before { color: var(--base-txt-tertiary); font: var(--font-ui-12-mini-med); } /* all off switches txt (on|off) */ a:hover.sw[class*="sw_color_"], .sw_pre[class*="sw_color_"]:hover a.sw { box-shadow: 0 0 0 1px var(--base-txt-secondary) inset; background: var(--base-hlt-g-hover); } /* all off HOVERED switches border & background */ a:hover.sw[class*="sw_color_"] span, .sw_pre[class*="sw_color_"]:hover a.sw span { background: var(--base-txt-secondary); } /* all off HOVERED switches toggle pill bg */ a:hover.sw[class*="sw_color_"] .sw_txt:before, .sw_pre[class*="sw_color_"]:hover .sw_txt:before { color: var(--base-txt-secondary); font: var(--font-ui-12-mini-med); } /* all off HOVERED switches txt (on|off) */ span.sw[class*="sw_color_"], .sw_pre[class*="sw_color_"] span.sw { box-shadow: 0 0 0 1px var(--base-txt-ghost) inset; } /* all off INACTIVE switches border */ span.sw[class*="sw_color_"] span, .sw_pre[class*="sw_color_"] span.sw span { background: var(--base-txt-ghost); } /* all off INACTIVE switches toggle pill bg */ /* ------ COLOR A ------ */ span.sw.sw_color_a.sw_def, .sw_pre.sw_color_a.sw_def span.sw {background: var(--base-hlt-g-focus);} /* all off INACTIVE switches border */ span.sw.sw_color_a.sw_def span, .sw_pre.sw_color_a.sw_def span.sw span { background: var(--base-txt-alt-light); } /* all off INACTIVE switches toggle pill bg */ a.sw.sw_color_a.sw_act, .sw_pre.sw_color_a.sw_act a.sw { box-shadow: none; background: var(--base-hlt-invert); } a.sw.sw_color_a.sw_act span, .sw_pre.sw_color_a.sw_act a.sw span { background: var(--base-txt-alt-light); } a.sw.sw_color_a.sw_act .sw_txt:before, .sw_pre.sw_color_a.sw_act .sw_txt:before { color: var(--base-hlt-invert); font: var(--font-ui-14-regular-semi); } a.sw.sw_color_a.sw_act:hover, .sw_pre.sw_color_a.sw_act:hover a.sw { background: var(--base-hlt-invert-major); } a.sw.sw_color_a.sw_act:hover .sw_txt:before, .sw_pre.sw_color_a.sw_act:hover .sw_txt:before { color: var(--base-hlt-invert-major); } span.sw.sw_color_a.sw_act, .sw_pre.sw_color_a.sw_act span.sw { background: var(--base-hlt-invert); } /* all off INACTIVE switches border */ span.sw.sw_color_a.sw_act span, .sw_pre.sw_color_a.sw_act span.sw span { background: var(--base-txt-alt-light); } /* all off INACTIVE switches toggle pill bg */ /* ------ COLOR A ------ */ /* ------ COLOR B ------ */ a.sw.sw_color_b.sw_act, .sw_pre.sw_color_b.sw_act a.sw { box-shadow: none; background: var(--base-hlt-b-invert); } a.sw.sw_color_b.sw_act span, .sw_pre.sw_color_b.sw_act a.sw span { background: var(--base-txt-alt-light); } a.sw.sw_color_b.sw_act .sw_txt:before, .sw_pre.sw_color_b.sw_act .sw_txt:before { color: var(--base-hlt-b-invert); font: var(--font-ui-14-regular-semi); } a.sw.sw_color_b.sw_act:hover, .sw_pre.sw_color_b.sw_act:hover a.sw { background: var(--base-hlt-b-invert-major); } a.sw.sw_color_b.sw_act:hover .sw_txt:before, .sw_pre.sw_color_b.sw_act:hover .sw_txt:before { color: var(--base-hlt-b-invert-major); } /* ------ COLOR B ------ */ /* ------ COLOR C ------ */ a.sw.sw_color_c.sw_act, .sw_pre.sw_color_c.sw_act a.sw { box-shadow: none; background: var(--base-txt-new-minor); } a.sw.sw_color_c.sw_act span, .sw_pre.sw_color_c.sw_act a.sw span { background: var(--base-txt-alt-light); } a.sw.sw_color_c.sw_act .sw_txt:before, .sw_pre.sw_color_c.sw_act .sw_txt:before { color: var(--base-txt-new-minor); font: var(--font-ui-14-regular-semi); } a.sw.sw_color_c.sw_act:hover, .sw_pre.sw_color_c.sw_act:hover a.sw { background: var(--base-txt-new-major); } a.sw.sw_color_c.sw_act:hover .sw_txt:before, .sw_pre.sw_color_c.sw_act:hover .sw_txt:before { color: var(--base-txt-new-major); } span.sw.sw_color_c.sw_act, .sw_pre.sw_color_c.sw_act span.sw { background: var(--base-txt-new-minor); } /* all off INACTIVE switches border */ span.sw.sw_color_c.sw_act span, .sw_pre.sw_color_c.sw_act span.sw span { background: var(--base-txt-alt-light); } /* all off INACTIVE switches toggle pill bg */ /* ------ COLOR C ------ */ /* ------ COLOR W ------ */ a.sw.sw_color_w.sw_act, .sw_pre.sw_color_w.sw_act a.sw { box-shadow: none; background: var(--base-hlt-w-invert); } a.sw.sw_color_w.sw_act span, .sw_pre.sw_color_w.sw_act a.sw span { background: var(--base-txt-alt-light); } a.sw.sw_color_w.sw_act .sw_txt:before, .sw_pre.sw_color_w.sw_act .sw_txt:before { color: var(--base-hlt-w-invert); font: var(--font-ui-14-regular-semi); } a.sw.sw_color_w.sw_act:hover, .sw_pre.sw_color_w.sw_act:hover a.sw { background: var(--base-hlt-w-invert-major); } a.sw.sw_color_w.sw_act:hover .sw_txt:before, .sw_pre.sw_color_w.sw_act:hover .sw_txt:before { color: var(--base-hlt-w-invert-major); } /* ------ COLOR W ------ */ /* TODO: add active unclickable classes when new colors arrive */ .sw_disabled { opacity: 0.5; pointer-events: none; } .sw_small:not(.flex_row) { display: inline-block; vertical-align: bottom; } .menu .sw, .menuFake .sw, .sw_small .sw { width: 18px; height: 12px; margin: 4px 0 4px 5px; padding: 0; } .menu .sw, .menuFake .sw { margin:0 4px; } .menu .sw span, .menuFake .sw span, .sw_small .sw span { width: 4px; height: 4px; margin: 4px; } .menu .sw_act .sw span, .menuFake .sw_act .sw span, .sw_small.sw_act .sw span { margin: 2px 2px 2px 8px; width: 8px; height: 8px; } .sw_pre.sw_act .sw_lim { background: var(--base-btn-alert-primary-minor) } body.mobile #filterButton__config__menu .sw { width: 20px } .fileItem .sw { margin: 1px; float: left; padding: 0; } .fileItem .sw_act .sw { background: var(--base-txt-link-minor); } .sw_off .a2, .sw_on .a2 { display: none } .sw_hover .sw_off .a1, .sw_hover .sw_on .a1 { display: none } .sw_hover .sw_off .a2, .sw_hover .sw_on .a2 { display: inline } .sw.sw_big { width: 20px; padding: 2px; margin: 0 2px 0 0; } .sw.sw_big span { width: 6px!important; height: 6px!important; margin: 3px!important; } .sw_act .sw.sw_big span { width: 10px!important; height: 10px!important; margin: 1px 0 1px 9px!important; } .switch_block { background: var(--base-cont-mid); padding: 15px; color: var(--base-txt-secondary); font: 13px/20px var(--font-base); } .commentForm .switch_block { border-radius: 10px; } #google_data .switch_block { margin: -8px 0; border-top: none; display: inline-block; padding: 8px 15px; background: var(--base-cont-mod-top) } .ws-btn-reset {display: none;} @media (max-width: 480px) { .setupPage .ws-btn-reset {max-width: 80px;} } .sw_loading { pointer-events: none; } .sw_loading .sw { position: relative; } .sw_loading .sw span { opacity: 0; } /* like .loader--curling but css only */ .sw_loading .sw::after { position: absolute; display: block; content: ""; border: unset; animation: loader .6s linear infinite; border-radius: 50%; padding: 2px; background: conic-gradient(from 90deg at 50.17% 50%, #73C7FF -7.5deg, rgba(255, 255, 255, 0) 41.25deg, rgba(255, 255, 255, 0) 93.75deg, #FFFFFF 179.31deg, #FFD6F6 258.75deg, #73C7FF 352.5deg, rgba(255, 255, 255, 0) 401.25deg); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; width: 6px; height: 6px; top: calc(50% - 5px); /* left: calc(50% - 5px); */ left: 2px; } .sw_loading.sw_act .sw::after { left: unset; right: 2px; }.taskView-chat .taskView__head:first-child { padding-top: 0; } .taskView-chat .taskView__head .fullscreen { margin: 0 8px 0 0; } .taskView-chat .taskView__head .avatar { width: 40px; height: 40px; display: block; } .taskView-chat .taskView__head .avatar .av_nm { transform: scale(0.83333); transform-origin: 0 0; } .taskView__wrapper-withoutFullscreen .taskView-chat .taskView__head { padding-left: 18px; } .taskView-chat .taskView__head > .symbol { margin-left: -12px; .proj_color:not([data-project]) { border-radius: 100%; } } .taskView-chat .taskView__head .ht { padding: 0; font: inherit; } .taskView-chat .taskView__head .name .space { width: 28px; height: 28px; display: flex; justify-content: center; align-items: center; } .taskView-chat .taskView__head .name .space ws-icon { width: 20px; height: 20px; } .taskView-chat .taskView__head .name[onclick]:hover { cursor: pointer; background: var(--base-cont-trans-low); } .taskView-chat .taskView__content { min-height: 100%; display: flex; flex-direction: column; } .taskView-chat .commentList__gap { flex-grow: 1 } .taskView.taskView-chat .taskView__head > .in { cursor: default; } .taskView-chat .taskView__head .componentTeamAvatars { padding: 0 4px 0 8px; } .taskView.taskView-chat .taskView__head .componentTeamAvatars span.av_sm, .taskView.taskView-chat .taskView__head .componentTeamAvatars span img, .taskView.taskView-chat .taskView__head .componentTeamAvatars span.more { transform: scale(0.8333); transform-origin: 0 center; } .taskView.taskView-chat .commentListPanel .commentListPanel__filter { padding: 0 14px 0 16px; } .taskView-chat .commentListPanel__wrapper { margin-bottom: 0; max-width: none; } .taskView-chat .commentListPanel { transition: all .3s linear; z-index: 5; box-shadow: 0 var(--screen-px) var(--base-line-tertiary); opacity: 1; transform: translateY(0px); } .taskView-chat:not(.taskView-withCommentSearch,.taskView-withCommentPanel) .commentListPanel { transform: translateY(-50px); pointer-events: none; opacity: 0; } .taskView-chat .taskView__head ws-btn.search { opacity: 1; transition: opacity .2s ease-in-out; } .taskView-chat.taskView-withCommentSearch .taskView__head ws-btn.search, .taskView-chat.taskView-withCommentPanel .taskView__head ws-btn.search { opacity: 0; pointer-events: none; } .taskView-chat .taskView__head { box-shadow: 0 var(--screen-minus-px) var(--base-line-tertiary) inset; } .chatView__users .taskView__viewing.taskView__viewing-active + .users, .taskView-chat .taskView__typing.taskView__typing-active + .chatView__users { display: none; } .chatView__users .taskView__viewing { float: left; height: 20px; margin-right: 0; } .chatView__users .taskView__viewing > span { height: 20px; width: 20px; } .chatView__users .taskView__viewing > span .av_sm { transform: scale(0.8333); box-shadow: 0 0 0 1px var(--base-cont-top), 0 0 0 2px var(--costs-timer-play); } .chatView__users .componentTeamAvatars { opacity: 0; transition: opacity .2s ease-in-out; pointer-events: none; } .chatView__users.chatView__users-withTeam .componentTeamAvatars { opacity: 1; pointer-events: auto; } .taskView-chat .commentList > .comment_day_line:first-child { display: block; } .taskView-withCommentFilter .taskView__intro, .taskView-withCommentSearch .taskView__intro { display: none; } .taskView-chat .commentList label.mass_, .taskView-chat ol.todo .time_space { display: none; } .mobile-head--chatView { user-topic-status .chip { padding: 0 2px; } .sub_in:has( + .taskView__typing-active) { display: none; } .taskView__typing:not(.taskView__typing-active) { display: none; } .taskView__typing__item { font: var(--font-ui-10-nano-reg); .place { display: none; } .typing { padding: 0; max-width: 100%; gap: .5ch; } .in { display: block; &.flex_row { display: flex; } color: var(--base-txt-link-minor); } .in > span + span::before { content: ', '; } .dot-pulse { margin-top: 0px; } } .taskView__typing__item .in, .taskView__typing__item .typing { font: var(--font-ui-10-nano-reg); } .last_seen--active { color: var(--base-txt-link-minor); } } @media screen and (max-width: 480px) { .taskView-chat { .commentListPanel__filter__search .prenav { display: none; } .commentListPanel__filter__search .nav { display: block !important; } .commentListPanel__search__actions, .commentListPanel__filter__actions { display: none; } } } ws-chip { display: inline-flex; overflow: hidden; } .chip { display: inline-flex; align-items: center; height: 24px; padding: 0 4px; box-sizing: border-box; border-radius: 8px; overflow: hidden; cursor: pointer; transition: all .15s ease-in-out; transition-property: box-shadow, outline; --icon-size: 16px; } .chip.chip-no-pointer { cursor: auto; } .chip * {flex-shrink: 0} .chip > span:not([class]) { flex-shrink: 1; flex-grow: 1; padding: 0 4px; font: var(--font-ui-12-mini-reg); color: var(--base-txt-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chip.chip-bold > span:not([class]) {font-weight: 590} .chip:not(.chip-info, .chip-no-hover):hover > span:not([class]) {color: var(--base-txt-accent)} .chip ws-icon, .chip svg {width: 16px; height: 16px;} .chip.chip-16 ws-icon, .chip.chip-16 svg {width: 8px; height: 8px;} .chip.chip-20 ws-icon, .chip.chip-20 svg {width: 12px; height: 12px;} .chip.chip-28 ws-icon, .chip.chip-28 svg {width: 20px; height: 20px;} .chip.chip-32 ws-icon, .chip.chip-32 svg {width: 24px; height: 24px;} .chip ws-icon {--icon-color: var(--base-txt-secondary)} .chip ws-icon.av_sm {border: none;background: var(--base-hlt-g-selected);overflow: hidden} .chip:hover ws-icon {--icon-color: var(--base-txt-accent)} .chip ws-icon.delete:not(.withHover, .cross-attr):hover {background: var(--base-hlt-g-selected); border-radius: 100%} .chip ws-icon.chevron-attr {margin-left: -2px} .chip ws-icon.chevron-attr:has(+ ws-icon.cross-attr) {padding-right: 4px} .chip ws-icon.cross-attr { height: 100%; margin-right: -3px; padding-left: 3px; padding-right: 4px; border-left: 1px solid var(--base-line-tertiary); } .chip:not(.chip-disabled) ws-icon.cross-attr:hover {background: var(--base-hlt-g-hover)} .chip:has(ws-icon.chip-left-icon.chip-box-big) {padding-left: 0} .chip ws-icon.chip-box-big {--icon-color: var(--base-txt-btn-flip); background: var(--base-hlt-g-hover)} .chip ws-icon.av_svg {width: 24px; height: 24px; border-radius: 100px; } .chip.chip-28 ws-icon.chip-box-big, .chip.chip-28 ws-icon.av_svg {width: 28px; height: 28px} .chip.chip-32 ws-icon.chip-box-big, .chip.chip-32 ws-icon.av_svg {width: 32px; height: 32px} .chip.chip-28 ws-icon.chip-box-big svg, .chip.chip-32 ws-icon.chip-box-big svg {width: 20px; height: 20px} .chip.chip-28 ws-icon.av_svg svg, .chip.chip-32 ws-icon.av_svg svg {width: 20px; height: 20px} .chip ws-icon.chip-box-big.chip-box-color-green {background: var(--base-txt-new-major)} .chip ws-icon.chip-box-big.chip-box-color-red {background: var(--base-txt-alert-major)} .chip ws-icon.chip-left-icon.chip-left-icon-color-red {--icon-color: var(--base-txt-alert-major);} .chip .proj_color { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 4px; } .chip .proj_color ws-emoji {width: 14px; height: 14px} .chip.chip-plain:not(.chip-disabled, .chip-info):hover {background: var(--base-hlt-g-hover)} .chip.chip-plain ws-icon.cross-attr {border-left: 1px solid transparent} .chip.chip-plain:not(.chip-info):hover ws-icon.cross-attr {border-left: 1px solid var(--base-line-tertiary)} .chip.chip-plain > span:not([class]) {color: var(--base-txt-primary)} .chip.chip-outline {box-shadow: 0 0 0 1px var(--base-line-secondary) inset} .chip.chip-outline:not(.chip-disabled, .chip-info, .chip-no-hover):hover {box-shadow: 0 0 0 1px var(--base-line-accent) inset} .chip.chip-outline:has([class*="av_sm"]) {outline: 1px solid var(--base-line-secondary);outline-offset: -1px;box-shadow: none} .chip.chip-outline:not(.chip-disabled, .chip-info):has([class*="av_sm"]):hover {outline: 1px solid var(--base-line-accent);outline-offset: -1px} .chip.chip-outline.chip-disabled {box-shadow: 0 0 0 1px var(--colors-graphite-trans-300) inset} .chip.chip-fill {background: var(--base-hlt-g-hover)} .chip.chip-fill:not(.chip-disabled, .chip-info,.chip-bg-blue):hover {box-shadow: 0 0 0 1px var(--base-line-accent) inset} .chip.chip-fill:has([class*="av_sm"]) {outline: 1px solid transparent;outline-offset: -1px;box-shadow: none} .chip.chip-fill:not(.chip-disabled, .chip-info):has([class*="av_sm"]):hover {outline: 1px solid var(--base-line-accent);outline-offset: -1px} .chip.chip-fill.chip-disabled {background: var(--base-hlt-g-easy)} .chip.chip-dashed {outline: 1px dashed var(--base-line-primary); outline-offset: -1px} .chip.chip-dashed:not(.chip-disabled, .chip-info, .chip-no-hover):hover {outline: 1px dashed var(--base-line-accent)} .chip.chip-dashed.chip-disabled {outline: 1px dashed var(--base-txt-ghost); outline-offset: -1px} .chip.chip-alert {outline: 1px dashed var(--base-txt-alert-minor); outline-offset: -1px} .chip.chip-alert:hover {outline: 1px dashed var(--base-txt-alert-major)} .chip.chip-alert ws-icon {--icon-color: var(--base-txt-btn-w)} .chip.chip-alert:hover ws-icon {--icon-color: var(--base-txt-alert-major)} .chip.chip-alert ws-icon.cross-attr {border-left: 1px solid var(--base-txt-btn-w)} .chip.chip-alert ws-icon.cross-attr:hover {background: var(--base-hlt-w-hover)} .chip.chip-alert > span:not([class]) {color: var(--base-txt-btn-w)} .chip.chip-alert:hover > span:not([class]) {color: var(--base-txt-alert-major)} .chip.chip-disabled {pointer-events: none; cursor: default} .chip.chip-disabled ws-icon, .chip.chip-disabled:hover ws-icon {--icon-color: var(--base-txt-muted)} .chip.chip-disabled > span:not([class]), .chip.chip-disabled:hover > span:not([class]) {color: var(--base-txt-muted)} .chip.chip-16 {height: 16px; padding-left: 2px; border-radius: 5px} .chip.chip-16 ws-icon, .chip.chip-16 svg {width: 12px; height: 12px} .chip.chip-16 > span:not([class]) {padding: 0 3px; font: var(--font-ui-10-nano-reg)} .chip.chip-20 {height: 20px; padding-left: 2px; border-radius: 6px} .chip.chip-20 > span:not([class]) {padding: 0 3px} .chip.chip-28 {height: 28px; padding-left: 6px; border-radius: 8px} .chip.chip-28 > span:not([class]) {padding: 0 5px} .chip.chip-32 {height: 32px; padding-left: 6px; border-radius: 10px} .chip.chip-32 ws-icon, .chip.chip-32 svg {width: 20px; height: 20px} .chip.chip-32 > span:not([class]) {padding: 0 6px; font: var(--font-ui-13-small-reg)} .chip.chip-rounded {border-radius: 24px} .chip.chip-bg {background: var(--base-cont-mod-top)} .chip.chip-bg-blue{background: var(--base-hlt-hover); border-radius: 12px;} .chip.chip-bg-blue:hover{box-shadow: 0 0 0 1px var(--base-txt-btn-a) inset;} /*.chip:not(.chip-disabled, .chip-info)[class*="chip-bg-"]:hover {box-shadow: 0 0 0 1px var(--colorize-lbl-txt-ghost) inset}*/ .chip.chip-info {cursor: default} .chip.chip-group {height: 28px;padding: 0 6px 0 2px;border-radius: 24px;box-shadow: var(--shadow-cont-major-lineonly-inside);} .chip.chip-group:not(.chip-info):hover {box-shadow: 0 0 0 1px var(--base-line-accent) inset} .chip.chip-group ws-icon.chip-left-icon {width: 24px; height: 24px; --icon-color: var(--base-txt-primary)} .chip.chip-group.chip-group-team ws-icon {--icon-color: var(--base-txt-alt-light)} .chip.chip-group.chip-group-dept ws-icon.chip-left-icon {border-radius: 100px; background: var(--base-hlt-invert); --icon-color: var(--base-txt-alt-light)} .chip.chip-group.chip-group-dept.chip-group-dept-client ws-icon.chip-left-icon {background: var(--base-hlt-b-invert)} .chip.chip-group.chip-group-dept > span:not([class]) {padding-left: 6px} .chip.chip-group > span:not([class]) {padding: 0 4px 0 2px; font: var(--font-ui-12-mini-semi); color: var(--base-txt-primary)} .chip.chip-group.chip-group-team > span:not([class]) {color: var(--base-txt-alt-light)} .chip.chip-group.chip-group-team {background: var(--base-hlt-invert)} .chip.chip-group.chip-group-team:not(.chip-info):hover {box-shadow: 0 0 0 1px var(--base-line-accent) inset} .chip.chip-group.chip-group-team-client {background: var(--base-hlt-b-invert)} .chip.chip-group.chip-group-team-all { background: var(--base-txt-btn-c); ws-icon { --icon-color: var(--base-txt-alt-light); } &> span:not([class]) { color: var(--base-txt-alt-light); } } ws-chip:has(.chip-invite) {overflow: unset;} .chip.chip-invite {height: 28px;padding: 0 6px;border-radius: 6px;box-shadow: var(--shadow-cont-major-lineonly-inside);background: var(--base-cont-mod-top)} .chip.chip-invite:has(ws-icon.chip-left-icon) {padding-left: 4px} .chip.chip-invite:hover {box-shadow: var(--shadow-cont-major-lineonly-outside);} .chip.chip-invite ws-icon.chip-left-icon {width: 20px; height: 20px} .chip.chip-invite > span:not([class]) {font: var(--font-ui-13-small-reg); color: var(--base-txt-accent)} .chip.chip-invite:has(ws-icon.chip-left-icon[name^="folder"]) > span:not([class]) {font-weight: 590} .chip.chip-invite:not(:has(ws-icon.chip-left-icon)) > span:not([class]) {font-weight: 510} .chip.chip-invite.chip-bg-green {background: #4FBE2933} .chip.chip-invite.chip-bg-red {background: var(--base-hlt-w-pressed)} .chip.chip-filter {height: 28px; padding: 0 6px; border-radius: 24px; outline: 1px solid var(--base-hlt-b-active); outline-offset: -1px; background: var(--base-hlt-b-selected)} .chip.chip-filter:hover {background: var(--base-hlt-b-invert-major)} .chip.chip-filter .av_sm {display: flex; align-items: center; justify-content: center; width: 28px; height: 28px} .chip.chip-filter ws-icon {width: 20px;height: 20px;--icon-color: var(--base-txt-btn-b);} .chip.chip-filter:hover ws-icon {--icon-color: var(--base-txt-alt-light);} .chip.chip-filter > span:not([class]), .chip.chip-filter:has([class*="av_sm"]) > span:not([class]) {padding: 0 6px; font: var(--font-ui-12-mini-med); color: var(--base-txt-btn-b)} .chip.chip-filter:hover > span:not([class]) {color: var(--base-txt-alt-light)} .chip.chip-filter-trans {outline: 1px solid var(--base-hlt-b-invert-major); outline-offset: -1px; background: transparent} .chip:has([class*="av_sm"]) {padding-left: 0} .chip:has([class*="av_sm"]) > span:not([class]) {color: var(--base-txt-primary)} .chip:has([class*="av_sm"]).chip-28 > span:not([class]) {padding: 0 4px; font: var(--font-ui-12-mini-med)} .chip:has([class*="av_sm"]).chip-32 > span:not([class]) {padding: 0 4px; font: var(--font-ui-13-small-med)} /*.chip.chip-28 img.av_sm {display: flex;align-items: center;justify-content: center;width: 28px;height: 28px}*/ /*.chip.chip-32 img.av_sm {display: flex; align-items: center; justify-content: center; width: 32px; height: 32px}*/ .chip.chip-32.chip-bg-blue ws-icon { width: 32px; height: 32px; border-left: 1px solid transparent; } .chip.chip-bg-blue ws-icon.cross-attr:hover { background: var(--base-txt-btn-a); --icon-color: var(--base-txt-btn-flip); } .chip.chip-av {padding-left: 4px;} .chip.chip-16.chip-av {padding-left: 2px;} .chip.chip-20.chip-av {padding-left: 3px;} .chip.chip-16.chip-av img.av_sm, .chip.chip-av ws-icon.av_sm {width: 12px;height: 12px} .chip.chip-16.chip-av span.av_sm {scale: 0.5;margin: 0 -6px} .chip.chip-16.chip-av ws-icon.av_sm svg {width: 8px;height: 8px} .chip.chip-20.chip-av img.av_sm, .chip.chip-av ws-icon.av_sm {width: 14px;height: 14px} .chip.chip-20.chip-av span.av_sm {scale: 0.583;margin: 0 -5px} .chip.chip-20.chip-av ws-icon.av_sm svg {width: 10px;height: 10px} .chip.chip-av img.av_sm, .chip.chip-av ws-icon.av_sm {width: 16px;height: 16px} .chip.chip-av span.av_sm {scale: 0.666;margin: 0 -4px} .chip.chip-av ws-icon.av_sm svg {width: 10px;height: 10px} .chip.chip-28.chip-av img.av_sm, .chip.chip-28.chip-av ws-icon.av_sm {width: 20px;height: 20px} .chip.chip-28.chip-av span.av_sm {scale: 0.833;margin: 0 -2px} .chip.chip-28.chip-av ws-icon.av_sm svg {width: 14px;height: 14px} .chip.chip-32.chip-av .av_sm {width: 24px;height: 24px;scale: 1;margin: 0} .chip.chip-32.chip-av ws-icon.av_sm svg {width: 16px;height: 16px} .chip.chip-16:has([class="dot_tags"]) {padding-left: 2px; padding-right: 2px} .chip.chip-20:has([class="dot_tags"]) {padding-left: 0; padding-right: 2px} .chip.chip-16 ws-icon, .chip.chip-16 svg {width: 12px; height: 12px} .chip:has([class="dot_tags"]) > span:not([class]) {padding: 0 2px; font: var(--font-ui-12-mini-med)} .chip:has([class="dot_tags"]) > span:not([class]):has(+ ws-icon.cross-attr) {padding-right: 4px} .chip.chip-16:has([class="dot_tags"]) > span:not([class]) {font: var(--font-ui-10-nano-med)} .chip.chip-20:has([class="dot_tags"]) > span:not([class]) {font: var(--font-ui-12-mini-reg)} .chip .dot_tags {padding: 0 5px 0 3px} .chip .dot_tags span {width: 10px; height: 10px; border-radius: 5px} .chip.chip-16 .dot_tags {padding: 0 3px} .chip.chip-16 .dot_tags span {width: 8px; height: 8px; border-radius: 4px} .chip.chip-mono > span:not([class]) { font-family: var(--font-mono); } .chip .space {width: 32px;} .chip ws-emoji {width: 20px;height: 20px;} .chip.chip-16 ws-emoji {width: 16px; height: 16px;} /* TERM */ .chip--term-pending { font: var(--font-ui-12-mini-med); color: var(--base-txt-tertiary); } .chip--term-regular { font: var(--font-ui-12-mini-med); color: var(--base-txt-secondary); } .chip--term-on-week { font: var(--font-ui-12-mini-med); color: var(--base-txt-primary); } .chip--term-days-left { font: var(--font-ui-12-mini-reg); color: var(--base-txt-btn-b); background-color: var(--base-hlt-b-selected); } .chip--term-tomorrow { font: var(--font-ui-12-mini-med); color: var(--base-txt-btn-b); } .chip--term-today, .chip--term-hours-left { font: var(--font-ui-12-mini-med); color: var(--colorize-lbl-txt-accent); background-color: var(--lbl-today-minor); } .chip--term-overdue { font: var(--font-ui-12-mini-reg); color: var(--base-txt-alert-major); background-color: var(--base-hlt-w-hover); } .chip--term-short-overdue { font: var(--font-ui-12-mini-med); color: var(--base-txt-alert-major); } .chip.chip--term > span:not([class]), .chip.chip--term:hover > span:not([class]) { color: inherit; font-weight: inherit; } /* /TERM */ .chip.chip-a { --chip-content-color: var(--base-btn-primary-minor); &> span:not([class]) { color: var(--chip-content-color) !important; } ws-icon { --icon-color: var(--chip-content-color) !important; } &:hover { --chip-content-color: var(--base-btn-primary-major); } &.chip-dashed { outline-color: var(--base-hlt-pressed) !important; &:hover { outline-color: var(--base-hlt-active); } } } @media (max-width: 480px) { /* компактні чіпси на мобілі (без тексту) */ .chip.chip-mobile-compact span:not([class]) { display: none !important; } } .commandTool__body { padding: 0; } .modal .commandTool__body .menu__group { padding: 8px 16px 16px 16px; } .modal .commandTool__body .menu-inModal { padding-bottom: 4px; } .commandTool__footer { border-top: 0.5px solid var(--base-line-secondary); padding: 8px 12px 12px; background: var(--base-cont-mod-mid); } .modal__content .commandTool__footer { flex-shrink: 0; flex-grow: 0; } .modal[data-group=command_tool] .scrollZone-bottom { box-shadow: none; } .modal[data-group=command_tool] .scrollZone-bottom.scrollZone-top { box-shadow: 0 var(--screen-minus-px) var(--base-line-tertiary); } .modal[data-group=command_tool] .modal__header { align-items: flex-start; padding-bottom: 12px; } .modal[data-group=command_tool] .modal__header .modal__closeButton { margin-top: 8px; } .modal[data-group=command_tool] .modal__header > .in { overflow: visible; align-items: flex-start; flex-shrink: 2; flex-grow: 2; height: auto; padding-bottom: 0; width: 100%; } .modal[data-group=command_tool] .modal__header .commandTool__back { margin-top: 8px; } .modal[data-group=command_tool] .modal__title__search { width: 100%; display: flex; flex-direction: column; gap: 4px; justify-content: center; } .modal[data-group=command_tool] .modal__title__search .context { margin: -8px 0 0 -20px; display: flex; column-gap: 4px; row-gap: 2px; max-width: 440px; } .modal[data-group=command_tool] .modal__title__search.sublevel .context { margin-left: 0; } .modal[data-group=command_tool] .commandTool__back + .modal__title__search > .context { margin-left: 0; max-width: 420px; } .modal[data-group=command_tool] .modal__title__search .context > div { padding-left: 4px; display: flex; align-items: center; gap: 4px; border: 1px solid var(--base-line-secondary); border-radius: 8px; flex-shrink: 1; overflow: hidden; } .modal[data-group=command_tool] .modal__title__search .context > ws-icon { padding: 2px 0; margin: 0 -4px; --icon-color: var(--base-txt-tertiary); } .modal[data-group=command_tool] .modal__title__search .context > div .in { font: var(--font-ui-12-mini-reg); color: var(--base-txt-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 20px; max-width: 200px; } .modal[data-group=command_tool] .modal__title__search .context > div ws-icon[name="close_sm"] { width: 22px;height: 22px; --icon-color: var(--base-txt-secondary); border-top-right-radius: 8px; border-bottom-right-radius: 8px; --icon-size: 16px; } .modal[data-group=command_tool] .modal__title__search .context > div > ws-icon, .modal[data-group=command_tool] .modal__title__search .context > div task-stage { flex-shrink: 0; } .modal[data-group=command_tool] .modal__title__search .context > div .tag ws-icon { --icon-size: 16px; } .modal[data-group=command_tool] .modal__title__search .context > div ws-icon[name="close_sm"]:hover {cursor: pointer;--icon-color: var(--base-txt-accent);background: var(--base-hlt-g-hover)} .modal[data-group=command_tool] .modal__title__search .context > div ws-icon[data-project], .modal[data-group=command_tool] .modal__title__search .context > div ws-icon[data-project] svg, .modal[data-group=command_tool] .modal__title__search .context > div ws-icon[data-project] ws-emoji { width: 16px; height: 16px; } .commandTool__footer > .flex_row { padding: 5px 6px; } .commandTool__footer .hotKey { margin: 0; } .commandTool__footer .hotKey .text { color: var(--base-txt-tertiary); font-size: 12px; font-style: normal; font-weight: 400; line-height: 20px; padding: 0 6px; } .commandTool__footer .hotKey .key:last-child { margin-right: 0; } .commandTool__footer > .flex_row:last-child { gap: 16px } .commandTool__body .menu__group .group_name { padding: 0 12px; } .commandTool__body .menu__group .group_name span { color: var(--base-txt-primary); font-size: 16px; font-style: normal; font-weight: 590; line-height: 40px; } .commandTool__body .menu__group:first-child, .commandTool__body .menu__group[data-key=no_results] { padding-top: 4px; } .commandTool__body .menu__item { padding: 4px 10px 4px 6px; } .commandTool__body .menu__item .hint { font-size: 12px; color: var(--base-txt-secondary); } .commandTool__body .menu__group[data-key=no_results] .menu__item .flex_row > span:first-child { color: var(--base-txt-secondary); } .commandTool__body .menu__group[data-key=no_results] .menu__item .flex_row > ws-icon { --icon-color: var(--base-txt-secondary); margin-right: 6px; } .commandTool__body .menu__item.menu__item-2lines ws-icon[name=radio], .commandTool__body .menu__item.menu__item-2lines ws-icon[name=checkbox] { width: 40px; height: 40px; } .commandTool__body .menu__item .hotKey { display: none; } .commandTool__body .menu__item .hotKey span:empty { display: none; } .commandTool__body .menu__item:hover .hotKey { display: flex; } .commandTool__body .menu__item.menu__item-hashotkey:hover .cnt { display: none; } .commentForm { background:var(--base-cont-mid); padding: 8px 0 8px 12px; border-top: var(--screen-px) solid var(--base-line-tertiary); height: 100%; } @media (min-width: 481px) { .commentForm.commentForm-add:before, .taskViewCommentExpanded .commentForm.commentForm-edit:before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: calc(100% + 40px); background: var(--base-cont-mid); z-index: -1; } } .taskView-chat .commentForm { padding-left:16px; } .commentForm__main { display: flex; flex-direction: row; flex-wrap: nowrap; padding-top: 8px; } .commentForm__left { padding: 0 8px; width: 40px; flex-shrink: 0; } .commentForm__right { padding-left: 4px; flex-shrink: 1; width: calc(100% - 60px); padding-right: 24px; position: relative; min-width: 0; } .commentForm__main .av_nm { transform: scale(0.83333); border-radius: calc(8px / 0.83333); margin: -4px; } .commentForm__reply { padding: 0 24px 0 60px; } .commentForm__reply .reply { padding: 0 14px 0 0; } .commentForm__reply .reply .cancel_reply { float: right; } .commentForm__reply .reply .cancel_reply button { height: 20px; background: none !important; } .commentForm__reply .reply_body { padding-left: 8px; } .reply_wrapper { border-radius: 4px 8px 8px 4px; background: var(--base-hlt-hover); border-left: 4px solid var(--base-txt-btn-a); } .commentForm__reply .reply_body:hover { background: var(--base-hlt-hover); cursor: pointer; } .commentForm__reply .reply_body .quote_reply { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: -4px; font: var(--font-ui-12-mini-reg); } .commentForm__reply .reply_body .quote_reply ws-emoji {width: 14px;height: 14px;} .commentForm__reply .cancel_reply { display: block; padding: 8px; --icon-size: 16px; border-radius: 0 8px 8px 0; --icon-color: var(--base-txt-btn-a); } .commentForm__reply .cancel_reply:hover { background: var(--base-hlt-hover); --icon-color: var(--base-txt-accent); cursor: pointer; } .commentForm__reply .reply .in2 { color: inherit; padding: 2px 5px; margin: -2px -5px; white-space: nowrap; display: inline-block } .commentForm__reply .reply .in2 font { color: var(--base-txt-btn-a); font: var(--font-ui-11-micro-bold); } .commentForm__reply .reply .in2 b, .commentForm__reply .reply .in2 .me { color: var(--base-txt-primary); font: var(--font-ui-11-micro-bold); background: none; } .commentForm__reply .com_reply small { color: var(--base-txt-secondary); font: var(--font-ui-11-micro-reg); } .taskView-chat .commentForm .commentForm__left { /* display:none; */ } .commentForm__content-wrapper { border: 1px solid var(--base-line-tertiary); background: var(--base-cont-input); border-radius:8px; flex-shrink: 2; overflow: hidden; position: relative; } .commentForm__content-wrapper:focus-within { border: 1px solid var(--base-line-secondary); } .commentForm:not(.commentForm-start) .commentForm__content-wrapper { background: var(--base-cont-top); } .commentForm__reply.commentForm__reply-hidden .reply_wrapper { background: var(--base-hlt-w-hover); border-left: 4px solid var(--base-txt-btn-w); } .commentForm__reply.commentForm__reply-hidden .reply_body:hover { background: var(--base-hlt-w-hover); } .commentForm__reply.commentForm__reply-hidden .reply .in2 font { color: var(--base-txt-btn-w); } .commentForm__reply.commentForm__reply-hidden .cancel_reply { --icon-color: var(--base-txt-btn-w); } .commentForm__reply.commentForm__reply-hidden .cancel_reply:hover { background: var(--base-hlt-w-hover); --icon-color: var(--base-txt-accent); } .commentForm__content { overflow: auto; } .commentForm__main .input_expand, .taskView__descr .input_expand { position: absolute; top: 0; right: 0; z-index: 10; } .commentForm__main .input_expand .btn, .taskView__descr .input_expand .btn { background: none !important; } .taskView__descr .input_expand { right: 0; } .commentForm__files .fileItem__content .name:has(input) { padding: 0 2px; } .commentForm__files .fileItem__content .links ws-icon { opacity: 1; } .commentForm__content__editor { padding: 0; } .commentForm__content .editor__toolbar-fixed { border-radius: 7px 7px 0 0; background: linear-gradient(0deg, var(--base-cont-input-opac), var(--base-cont-input)); backdrop-filter: blur(4px); } .commentForm__content .editor .editor_summary { padding: 3px 4px; display: none; align-items: center; width: 100%; max-width: 100%; box-sizing: border-box; } .commentForm__content .editor .editor_summary > div:first-child { flex-grow: 1; overflow: hidden; padding: 5px 12px; } .commentForm__content .editor .editor_summary > div:first-child > span { display: block; font: var(--font-txt-15-large-reg); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .commentForm:not(.commentForm-start) .editor .editor_summary { display: flex; height: 40px; } .commentForm:not(.commentForm-start) .commentForm__buttons, .commentForm:not(.commentForm-start) .commentForm__files { display:none; } .commentForm:not(.commentForm-start) .editor .editor__toolbar { display: none !important; } .commentForm__content .editor .editor_summary { cursor:text; min-height:22px !important; } .commentForm:not(.commentForm-start) .editor .editor__data { display: none; } .commentForm-start .editor .placeholder, .commentForm-start .editor .editor__data { padding-top: 16px; padding-bottom: 16px; } .commentForm__content:has(.editor.with-topToolbar) { --topToolbarHeight: 40px; } .commentForm__content { scroll-padding-top: calc(var(--topToolbarHeight, 0px) + 16px); scroll-padding-bottom: 16px; } .commentForm__content .editor .editor__data:focus { outline:none; } .commentForm__content .editor__data:empty:before { content:attr(data-placeholder); color:var(--base-txt-tertiary); white-space: nowrap; overflow: hidden; } .commentForm__buttons { padding: 4px 6px 6px; position: sticky; bottom: 0; border-radius: 0 0 8px 8px; background: var(--base-cont-input); margin-top: auto; } .commentForm__buttons .place_button { gap: 8px; padding-right: 6px; } .commentForm__buttons .place_button .place_button-actions { gap: 8px; } .commentForm__buttons .place_button .button, .commentForm__buttons .place_button ws-btn { margin:0; } .commentForm__buttons .place_button .button, .commentForm__buttons .place_button .hidden button svg, .commentForm__buttons .place_button .button, .commentForm__buttons .place_button .hidden_remove button svg { width: 16px; height: 16px; } .commentForm__buttons .place_button .button, .commentForm__buttons .place_button .hidden button { --icon-color: var(--base-txt-tertiary); --btn-txt-color: var(--base-txt-tertiary); } .commentForm__buttons .place_button .button, .commentForm__buttons .place_button .hidden button:hover, .commentForm__buttons .place_button .button, .commentForm__buttons .place_button .hidden button.hover, .commentForm__buttons .place_button .button, .commentForm__buttons .place_button .hidden button:focus { box-shadow: 0 0 0 1px var(--base-line-accent) inset; background: var(--colors-alpha-light-00); --icon-color: var(--base-txt-primary); --btn-txt-color: var(--base-txt-primary); } .commentForm__buttons .place_button .button, .commentForm__buttons .place_button .hidden_remove button { --icon-color: var(--base-txt-alert-minor); --btn-txt-color: var(--base-txt-alert-minor); background: var(--base-hlt-w-easy); } .commentForm__buttons .place_button .button, .commentForm__buttons .place_button .hidden_remove button:hover, .commentForm__buttons .place_button .button, .commentForm__buttons .place_button .hidden_remove button.hover, .commentForm__buttons .place_button .button, .commentForm__buttons .place_button .hidden_remove button:focus { box-shadow: 0 0 0 1px var(--base-line-alert) inset; background: var(--base-hlt-w-pressed); --icon-color: var(--base-txt-alert-major); --btn-txt-color: var(--base-txt-alert-major); } .commentForm .place_button:not(:hover) button { transition: opacity,background 300ms ease; } .commentForm:not(.commentForm-haveAnyData) .place_button .hidden, .commentForm:not(.commentForm-haveAnyData) .place_button .hidden_remove { opacity: 0; pointer-events: none } .commentForm:not(.commentForm-haveAnyData) .place_button .btn-double button { background: none; pointer-events: none; } .commentForm:not(.commentForm-haveAnyData) .place_button .btn-double button svg { fill: var(--base-txt-secondary) !important; } .commentForm:not(.commentForm-haveAnyData) .place_button .btn-double:has(> *:nth-child(2)) button.btn.btn-solid:not(.selected, :focus, :focus-visible):last-child { box-shadow: 1px 0 0 0 var(--base-line-secondary) inset; } .commentForm .btn-double button ws-icon[name=send] { display: none; } .commentForm:not(.commentForm-haveAnyData) .btn-double button ws-icon[name=send-solid] { display: none; } .commentForm:not(.commentForm-haveAnyData) .btn-double button ws-icon[name=send] { display: block; } .commentForm:not(.commentForm-haveAnyData) .mobile-head__btn .btn-double button { pointer-events: none; opacity: 0.6; } .commentForm__buttons > .flex_content { gap: 6px; position: relative; } .commentForm__foot { padding: 16px 0 8px 0; height: 28px; } .commentForm__foot-placeholder { padding: 0; height: 16px; } .commentForm__foot-notify.commentForm__foot-silent > div:not(.commentForm__notify-off) { display: none; } .commentForm__foot-notify:not(.commentForm__foot-silent) > div:not(.commentForm__notify-on) { display: none; } .commentForm__foot .but { color:var(--base-txt-secondary); } .commentForm__foot .but .in { padding:0 4px; font: var(--font-ui-12-mini-med) } .commentForm__foot .but ws-icon { height:16px; width:16px; --icon-color:var(--base-txt-secondary) } .commentForm__foot-keyInfo { font: var(--font-ui-10-nano-reg); color: var(--base-txt-tertiary); padding-top: 4px; } .commentForm__foot-keyInfo[onclick] { cursor: pointer; } .commentForm__foot-keyInfo[onclick]:hover .change { text-decoration: underline; } @media (max-width:560px) { .commentForm-edit .av_nm { display:none !important } .commentForm { padding:10px 0 0; } .commentForm.commentForm-withHidden #member { margin:0 } } #comment_overlay { background:var(--colors-alpha-dark-20); position:fixed; left:0; top:0; bottom:50px; right:0; z-index:1004; display:none } .commentForm #member { display:none; } .commentForm.commentForm-withHidden #member { display:block; margin:0 -10px 0 -65px; } @media (max-width:640px) { .commentForm input.button_s1 { float:none } } @media (max-width:480px) { .commentForm:not(.commentForm-start) .commentForm__foot { display: none; } .commentForm { padding: 6px 0 max(16px, calc(8px + var(--app-sa-bot) + var(--keyboard-height))) 0; box-sizing: border-box; } .commentForm.commentForm-start { padding: 8px 0 calc(var(--app-sa-bot) + var(--keyboard-height)) 0; } .commentForm.commentForm-start.commentForm-chat { background: var(--base-cont-input); } .commentForm__main { padding-top: 0; } .commentForm__right { padding-left: 0; padding-right: 8px; } .commentForm__foot-placeholder { display: none; } .commentForm__buttons .place_button { position: sticky; right: 0; background: var(--base-cont-input-opac); backdrop-filter: blur(4px); } .commentForm.swype { height: var(--comment-form-height); } .commentForm.swype .commentForm__content { max-height: calc(var(--comment-form-height) - 48px - 2px - 8px - 9px - var(--app-sa-bot) - var(--keyboard-height)) !important; } .commentForm.commentForm-showNotify.swype .commentForm__content { max-height: calc(var(--comment-form-height) - 48px - 2px - 8px - 45px - var(--app-sa-bot) - var(--keyboard-height)) !important; } .commentForm .input_expand { display: none; } .commentForm__main { position: static !important; } .toggleCommentFormNotify { padding: 4px; margin: -4px; border-radius: 8px; align-items: center; } .toggleCommentFormNotify__chevron { --icon-color: var(--base-txt-tertiary); transition: transform .2s ease; transform: rotate(var(--toggleCommentFormNotify__chevron-rotate, 0deg)); } .commentForm__right { position: static; } .commentForm__contentAndPreviewButtonsWrapper { flex-shrink: 1; flex-grow: 1; overflow: hidden; } .commentForm__contentAndPreviewButtonsWrapper .commentForm__content-wrapper { flex-grow: 1; } .commentForm__previewButtons { padding-left: 4px; } .commentForm.commentForm-start .commentForm__previewButtons { display: none; } .taskView:not(.taskView-comment_expanded) .commentForm__foot-notify { transition: transform .2s ease; transform: translateY(0); position: absolute; left: 57px; right: 9px; padding-top: 8px; } .taskView:not(.taskView-comment_expanded) .commentForm:not(.commentForm-showNotify) .commentForm__foot-notify { transform: translateY(100%); bottom: 0; } .taskView:not(.taskView-comment_expanded) .commentForm.commentForm-start { transition: padding-bottom .2s ease; } .taskView:not(.taskView-comment_expanded) .commentForm.commentForm-start:not(.commentForm-showNotify) { padding-bottom: calc(8px + var(--app-sa-bot) + var(--keyboard-height)); } .taskView:not(.taskView-comment_expanded) .commentForm.commentForm-start.commentForm-showNotify { padding-bottom: calc(44px + var(--app-sa-bot) + var(--keyboard-height)); } .taskView:not(.taskView-comment_expanded) .commentForm.commentForm-start.commentForm-showNotify { --toggleCommentFormNotify__chevron-rotate: -180deg; } .taskView:not(.taskView-comment_expanded) .commentForm.commentForm-start .editor__data { padding: 9px 16px 9px 12px; min-height: unset; line-height: 22px; } .commentForm:not(.commentForm-start) .placeholder { width: unset; left: 0; right: 0; } .commentForm.commentForm__withAttachments:not(.commentForm-start) .placeholder { right: 66px; } .taskView:not(.taskView-comment_expanded) .commentForm.commentForm-start .placeholder { padding: 9px 16px 9px 12px; box-sizing: border-box; line-height: 22px; } .commentForm:not(.commentForm-start) .toggleCommentFormNotify__chevron { display: none; } .taskView.taskView-comment_expanded .editor-btn.toolbar { display: none; } .commentForm__content-wrapper { border-radius: 10px; } .commentForm__buttons .editor__toolbar { padding: 0; } .commentForm__buttons { padding: 8px; } .commentForm__buttons > .flex_content { gap: 8px; } .commentForm__buttons .place_button { padding: 0; } .commentForm__buttons .editor__toolbar .editor-btn { display: inline-flex; justify-content: center; align-items: center; box-sizing: border-box; margin: 0; } .commentForm__buttons .editor__toolbar .editor-btn > ws-icon { width: 20px; height: 20px; } /* .commentFormPlaceholder {} */ .commentForm.commentForm-start { position: relative; } .commentForm.swype { position: absolute; bottom: 0; width: 100%; z-index: 9999; } .commentForm.commentForm-start .commentForm__swipe { --mobile-primary-menu-swipe-width: var(--mobile-primary-menu-default-opened-swipe-width); position: absolute; height: 2px; border-radius: 2px; top: 3px; left: 50%; transform: translateX(-50%); background-color: var(--base-txt-tertiary); width: var(--mobile-primary-menu-swipe-width); } .commentForm.commentForm-start.swype .commentForm__swipe { background-color: var(--base-txt-accent); } .taskView.taskView-comment_expanded .commentForm { padding-top: 0; } .taskView.taskView-comment_expanded .commentForm__swipe { display: none; } .taskView:not(.taskView-comment_expanded) .commentForm .commentForm__main .commentForm__right .commentForm__content { max-height: 160px; /* 6.5 rows */ } } /* -------------------------------------------------------------------------------------------------------------------*/ .commentForm__subscribers { height:24px; font:12px/24px var(--font-base); color:var(--base-txt-tertiary); position:relative; white-space:nowrap; gap: 4px; width: 100%; } .commentForm__foot { gap: 0px; } .commentForm__foot-subscribed .subscribe_me { display:none } .commentForm__foot:not(.commentForm__foot-subscribed) .unsubscribe_me { display:none } .commentForm__subscribers .plus { background: var(--base-hlt-g-hover); backdrop-filter: blur(4px); border-radius: 24px; width:24px; height:24px; box-sizing:border-box; padding: 2px; --icon-color: var(--base-txt-secondary); --icon-size: 16px; box-shadow: 0 0 0 2px var(--base-cont-mid); margin-left: -6px; z-index: 1; cursor: pointer; } .commentForm__subscribers[data-empty="yes"] .plus {display: none !important;} .commentForm__subscribers:not([data-empty="yes"]) .wave {display: none;} .commentForm__subscribers[data-empty="yes"] .wave span {padding: 0 4px;} .commentForm__subscribers[data-empty="yes"] {gap: 0;} .commentForm__subscribers[data-empty="yes"] .in {padding-right: 0;} .commentForm__invites:has(.commentForm__subscribers__item) ~ .commentForm__subscribers[data-empty="yes"] { padding-left: 12px; } .commentForm__subscribers__item:not(.commentForm__subscribers__item-hidden) ws-icon[name=lock_sm] { display:none; } .commentForm__subscribers__item { position:relative; margin-right: -2px; } .commentForm__subscribers .commentForm__subscribers__item:nth-child(n+6) { display: none } .commentForm__subscribers .commentForm__subscribers__item:nth-child(n+5):last-child { display: inline-block } .commentForm__subscribers__item .av_sm { box-shadow: 0 0 0 2px var(--base-cont-mid); } .commentForm__subscribers__item ws-icon[name=lock_sm] { position:absolute; width:12px; height:12px; bottom: -6px; left: 6px; border-radius: 8px; background: var(--base-hlt-w-invert-major); box-shadow: 0 0 0 1px var(--base-cont-mid); --icon-size: 16px; --icon-color:var(--white-primary) !important; } .commentForm__invites .more, .commentForm__subscribers .more { box-sizing: border-box; display: inline-block; height: 24px; line-height: 20px !important; text-align: center; font: var(--font-ui-10-nano-med); border-radius: 12px; background: var(--base-hlt-g-hover); backdrop-filter: blur(4px); vertical-align: top; position: relative; padding: 2px 6px; box-shadow: 0 0 0 2px var(--base-cont-mid); color: var(--base-txt-secondary); cursor: pointer; } .commentForm__subscribers .in { padding-right:4px; } .commentForm__subscribers__item.commentForm__subscribers__item-mention .av_sm, .commentForm__invites .commentForm__subscribers__item .av_sm { box-shadow: 0 0 0 1px var(--base-cont-mid), 0 0 0 2px var(--base-txt-btn-w); } .commentForm__invites .more { padding: 2px; color: var(--base-txt-secondary); --icon-color: var(--base-txt-secondary); } .commentForm__invites .commentForm__subscribers__item:nth-child(n+3) { display: none } .commentForm__invites .commentForm__subscribers__item:nth-child(n+2):last-child { display: inline-block } #comment_new { position:relative; } .taskView__typing { background:var(--base-cont-top); opacity:0; transition:opacity 0.3s ease; } .taskView__typing__item { padding: 8px 8px 8px 35px; border-top: 1px solid var(--base-line-ghost); } .taskView__typing-active { opacity: 1; } .taskView__typing .in { font:bold 13px/20px var(--font-base); padding: 0 8px 0 20px; } .taskView__typing .typing { color:var(--base-txt-link-minor); font:13px/20px var(--font-base); } @keyframes ellipsis { to { width:1.15em; } } @-webkit-keyframes ellipsis { to { width:1.15em; } } .commentForm .button {float:right; margin:0; overflow:hidden} .commentForm-haveAnyData .button_dots {padding: 6px 10px 6px 9px;width:20px;color: var(--white-secondary); transition: all 0.5s ease, color 0.5s ease 0.5s;} .commentForm-haveAnyData .button_dots:hover:before {display:none} .commentForm-haveAnyData.button_dots ~ .button {border-radius:4px 0 0 4px} .taskView__viewing { height: 24px; position: relative; float:right; margin-right: 12px; border-radius:4px; color:var(--base-txt-secondary) } .taskView__viewing > span {position:relative; display: inline-block;margin: 0 0 0 -4px;} .taskView__viewing > span .av_sm { transform: scale(0.9); box-shadow: 0 0 0 1px var(--base-cont-top), 0 0 0 2px var(--costs-timer-play); } .taskView__viewing .typing { position: absolute; bottom: -4px; left: -1px; background: var(--base-cont-top); height: 12px; width: 24px; border-radius: 100%; opacity: 0.9; } .taskView__viewing .dot-pulse { margin: 6px 18px 0 5px; } .taskView-comment_expanded .commentForm { box-sizing: border-box; } .taskView-comment_expanded .commentForm .commentForm__main { height: 100%; box-sizing: border-box; } .taskView-comment_expanded .commentForm .commentForm__main .commentForm__content-wrapper { height: 100%; display: flex; flex-direction: column; } .taskView-comment_expanded .commentForm .commentForm__main .commentForm__right { display: flex; flex-direction: column; height: 100%; } .taskView-comment_expanded .commentForm .commentForm__main .commentForm__right .commentForm__content { flex-grow: 1; display: flex; flex-direction: column; max-height: calc(100% - 50px); } .commentForm .commentForm__main .commentForm__right .commentForm__content { max-height: 300px; } .commentForm__content .commentForm__files:has(.attachWrapper > div) { padding: 12px; } .commentForm__content.scrollZone .ps__rail-y { margin: 4px 0; } .commentForm__content.scrollZone:has(.with-topToolbar) .ps__rail-y { margin-top: 40px !important; } .projectView__group__contentEdit .commentForm__content.scrollZone .ps__rail-y { margin-top: 40px !important; } .commentForm[data-comment] .commentForm__foot { display: none; } .commentForm.sent .commentForm__content-wrapper, .commentForm.sent .mobile-head { pointer-events: none; } .commentForm.sent .mobile-head .mobile-head__btn, .commentForm.sent .commentForm__content-wrapper .place_button .btn-double button { opacity: 0.75; } .commentList__log { border-top: 1px solid var(--base-line-ghost); background: var(--base-cont-top); position: relative; } .commentList .commentList__log-final { padding: 10px 7px; } .commentList__log .ind { color: var(--base-txt-tertiary); padding: 0 0 0 15px; } .commentList__log .ind a.go { color: var(--base-txt-tertiary); border-bottom: 1px dashed var(--base-txt-tertiary) } .commentList__log .ico_l { margin: 0 23px 0 29px; } .commentList__log:hover .ico_l { display: none } body.desktop .commentList__log .ico_l { opacity: 0.5 } body.desktop .commentList__log .ico_repeat { opacity: 1 } .commentList__log .in.flex_row { gap: 4px; margin: 0; height: 20px; } /*.commentList__log .av {*/ /* float: left;*/ /* margin: 0 20px 0 28px;*/ /* display: none*/ /*}*/ /*.commentList__log:hover .av {*/ /* display: block*/ /*}*/ .commentList__log .user { position: absolute; right: 0; top: 7px; background: var(--base-cont-top); padding: 0 10px; white-space: nowrap; max-width: 180px; text-overflow: ellipsis; overflow: hidden } .commentList__log .user b { opacity: 0.5 } .commentList__log .user b { font-weight: normal } .commentList__log .user b.me { background: none; font-weight: bold } .commentList .commentList__log-final .user { display: none; } body.desktop .commentList__item.commentList__item-collapsed:hover, body.desktop .commentList__log:not(.pre_act):hover { background: var(--base-cont-mid); } body.desktop .commentList__log:hover .user { background: var(--base-cont-top); } body.desktop .commentList__log:hover .user_vs { display: none; } body.desktop .commentList__log:hover .user b, body.desktop .commentList__log:hover .ico_l { opacity: 1 } body.desktop .commentList__log:hover .user b.me { background: var(--base-hlt-alt-notice) } .commentList__log .date { color: var(--base-txt-secondary); font: 11px/20px var(--font-base); min-width: 118px; } .commentList__log .name { float: left; margin: 0 0 0 10px; } .commentList__log .it { display: inline-block; margin: 0 0 0 15px } .commentList__log .it.it_tags { position: relative; max-width: calc(100% - 180px); white-space: pre-line } .commentList__log .it b { font-weight: normal; color: var(--base-txt-secondary); } .commentList__log .it i { font: italic 12px/20px var(--font-base); color: var(--base-txt-tertiary); } .commentList__log .it strike { opacity: 0.5; white-space: nowrap; position: relative; overflow: hidden; padding: 0 5px; margin: 0 0 0 -5px; text-decoration: none } .commentList__log .it strike:after { content: ''; width: 100%; border-top: 1px solid var(--base-txt-max); display: block; position: absolute; left: 0; top: 7px } .commentList__log .it .av_sm { display: inline-block; margin: -8px 5px -8px 0 } .commentList__log a.log_delete { float: right; margin: 0; padding: 7px 5px } .commentList__log .tags span.tag { margin-bottom: 0; } .commentList__log a.link { color: var(--base-txt-primary); font: 14px/20px var(--font-base); } .commentList__log a.link:hover { color: var(--base-txt-link-major); } .commentList__log a.but_delete2 { float: right; background: var(--base-btn-alert-primary-minor); color: var(--white-accent); font: 11px/16px var(--font-base); padding: 2px 10px; border-radius: 10px; display: none } .commentList__log .pre_delete a.but_delete2 { display: inline } .commentList__log .pre_delete .td_name { opacity: 0 } .commentList__item { border-top: 1px solid var(--base-line-ghost); background: var(--base-cont-top); position: relative; transition: background .15s ease; -webkit-transition: background .15s ease; } .commentList__item:has(.menu_open), .commentList__item:has(.floatIcons:hover) { background: var(--base-cont-mid); } .commentList__item.selected { background: var(--base-cont-mid); } .commentList__item.commentList__item-activeEffect blockquote, .commentList__item.commentList__item-activeEffect address, .commentList__item.commentList__item-activeEffect pre, .commentList__item.commentList__item-activeEffect { transition: background 1s ease; -webkit-transition: background 1s ease; } .commentList__item.commentList__item-activeEffect blockquote:before, .commentList__item.commentList__item-activeEffect pre:before { transition: color 1s ease; -webkit-transition: color 1s ease; } @media screen { .commentList__item-withTodo.commentList__item-missFilter { box-shadow: 2px 0 var(--base-line-alt-cardbrd) inset } .commentList__item-withStar, .commentList__item-withStar.commentList__item-missFilter { box-shadow: 2px 0 var(--base-btn-notice-minor) inset } .commentList__item-withHidden, .commentList__item-withHidden.commentList__item-missFilter { box-shadow: 2px 0 var(--base-btn-alert-primary-minor) inset } } .commentList__item-withStar .star svg use:last-child { fill: var(--base-btn-notice-minor); display: block !important; } .commentList__log > .in { padding: 7px 16px 7px 84px; position: relative; } .commentList__item > .in { padding: 15px 16px 23px 84px; position: relative; } .commentList__item .page_content { padding: 0 42px 0 0 } .commentList__item .page_content span[style*="background"] { border-radius: 6px; } @media screen and (min-width: 481px) { .commentList__item .page_content blockquote, .commentList__item .page_content pre { margin-right: 16px; } } .page_content table { background: var(--base-cont-mid); font: 13px/16px var(--font-base); border-radius: 8px; padding: 5px; max-width: 100%; box-sizing: border-box; overflow-x: auto; display: block; width: fit-content } .page_content td, .page_content th { padding: 10px 10px; border-left: 1px dashed var(--base-line-alt-gap-major); border-top: 1px dashed var(--base-line-alt-gap-major) } .page_content td:first-child, .page_content th:first-child { border-left: none } .page_content tr:first-child td, .page_content tr:first-child th { border-top: none } .page_content table::-webkit-scrollbar { width: 8px; height: 8px } .page_content table::-webkit-scrollbar-track { background-color: var(--base-cont-low) } .page_content table::-webkit-scrollbar-track:hover { background-color: var(--base-cont-low) } .page_content table::-webkit-scrollbar-thumb { background-color: var(--base-surf-low); border-width: 0 } body.commentList__item-active .commentList .commentList__item-active { box-shadow: 2px 0 var(--base-hlt-invert) inset, -2px 0 var(--base-hlt-invert) inset } .commentList__log .in > .av_nm, .commentList__item .in > .av_nm { float: left; border-radius: 8px; margin: -4px 0 0 -56px; transform: scale(0.83); } .commentList__item .av_nm[onclick] { cursor: pointer } .commentList__item .text { color: var(--base-txt-secondary) } .commentList__item a.drop { margin-top: -3px } .commentList__item .text small, .commentList__item .text a.small { font: 11px/20px var(--font-base); } .commentList__item .text small a { color: var(--base-txt-secondary); } .commentList__item .text small a:hover { color: var(--base-txt-link-minor); } .commentList__item .text b.me { background: var(--base-hlt-alt-notice); padding: 2px 5px } .commentList__item span.ico_attach { display: none } /*.commentList__item-collapsed span.ico_attach {*/ /* display: inline-block*/ /*}*/ /*.commentList__item-collapsed .likes, .commentList__item-collapsed .ico_edited {*/ /* display: none*/ /*}*/ .commentList__item .text .notme { margin-right: 90px } .commentList__item .text .notme a.inline { border-width: 0 } .commentList__item .text .notme a.inline_notme { color: var(--base-txt-primary); font: bold 13px/20px var(--font-base); } .commentList__item .text .notme a.inline_notme:hover { color: var(--base-txt-link-minor) } .commentList__item .text .notme:hover a.inline { border-width: 1px } .commentList__item .text .notme:hover a.inline_me { border-width: 0 } .commentList__item .text p, .commentList__item .text .content { color: var(--base-txt-primary); margin-top: 4px; font: var(--font-txt-15-large-reg); } .commentList__item small { font: 11px/14px var(--font-base); margin-left: 5px } .commentList__item-collapsed .in { padding: 7px 16px 7px 84px; height: 20px; } .commentList__item div.av, .commentList__item .ico_seen { display: none } .commentList__item-collapsed .ico_seen { display: block; margin: 7px 5px 0 0; opacity: 0.6 } .commentList__item-collapsed:hover .ico_seen { opacity: 1 } .commentList__log div.av, .commentList__item-collapsed div.av { display: block; float: left; margin: 7px 10px 0 47px; position: relative; z-index: 1; } .commentList__log > .av .av_sm, .commentList__item-collapsed > .av .av_sm { float: left; margin: -2px -2px -2px 0; box-shadow: 0 0 0 2px var(--base-cont-top); border-radius: 8px; } .commentList__log .head .label { --icon-size: 14px; height: 20px; padding: 0 4px; font: var(--font-ui-11-micro-reg); border-radius: 6px; } .commentList__log .head .label > span { padding: 0 2px; } .commentList__log div.av .edit { position: absolute; top: 0; left: 0; width: 24px; height: 24px; margin: -2px -2px -2px 0; border-radius: 8px; --icon-size: 14px; color: var(--base-txt-btn-flip); --icon-color: var(--base-txt-btn-flip); background: var(--base-txt-new-major); } .commentList[data-type="log"] .commentList__log div.av .edit, .commentList__log:hover div.av .edit { display: none; } .commentList__log .head .label-reopen { color: var(--base-txt-btn-w); --icon-color: var(--base-txt-btn-w); background: var(--base-hlt-w-selected); } .commentList__log .head .label-close { color: var(--base-txt-primary); --icon-color: var(--base-txt-primary); box-shadow: 0 0 0 1px var(--base-txt-primary) inset; } .commentList__log .head .head__left { column-gap: 4px; row-gap: 4px; align-items: flex-start; } .commentList__log .params { display: flex; overflow: hidden; flex-grow: 1; flex-shrink: 1; column-gap: 12px; row-gap: 4px; flex-wrap: wrap; min-height: 20px; padding: 0 0 0 8px; } .commentList__log .head .uname, .commentList__item .head .uname, .commentList__log .head .uname a, .commentList__item .head .uname a { font: var(--font-ui-13-small-med); color: var(--base-txt-primary); } .commentList__item:not(.commentList__item-collapsed) .head .seen_by_assignee { --icon-color: var(--base-txt-btn-c); } .commentList__log .in > .params { padding: 8px 32px 0 0; } .commentList__log .in > .commentList__item__descr { color: var(--base-txt-primary); padding: 8px 32px 8px 0; font: var(--font-txt-13-small-reg); } .commentList__log .in > .commentList__item__descr .commentList__item__reason-label { display: inline-block; margin-right: 6px; font: var(--font-ui-12-mini-reg); font-variant: all-small-caps; color: var(--base-txt-btn-w); padding: 0 8px; border-radius: 6px; background: var(--base-hlt-w-selected); vertical-align: bottom; } .commentList__log.commentList__log-big > .in { padding-top: 15px; } .commentList__log.commentList__log-big div.av, .commentList__log:not(.commentList__log-big) .in > .av_nm { display: none; } .commentList__log .commentList__item { background: none; } .taskView-withCommentMass .commentList__log .commentList__item { pointer-events: none; } .commentList__log .commentList__item-same:after { top: -10px; height: 26px; } .commentList__item-collapsed .in .head > div { height: 20px; } .commentList__item-collapsed .in .head .uname { display: none } .commentList__item:not(.commentList__item-withStar) .head .is_fav, .commentList__item-collapsed .head .is_fav, .commentList__item-collapsed .av_nm { display: none !important; } .commentList__item .head:has(task-wait) .pubdate, .commentList__item .head:has(task-wait) .date_same { display: none; } .commentList__item .head .is_fav, .commentList__item .head .is_silent, .commentList__item .head .is_hidden, .commentList__item .head .is_edited { --icon-size: 16px; } .commentList__item .head .is_fav { --icon-color: var(--colorize-lbl-yelloworange); } .commentList__item .head .is_hidden { --icon-color: var(--base-txt-alert-minor); } .commentList__item .head task-wait { margin: 0; white-space: nowrap; font-family: monospace; } .commentList__item-collapsed div.text div.me, .commentList__item-collapsed div.text div.notme { padding: 1px 0; color: var(--base-txt-tertiary) } .commentList__item-collapsed .restrict3 { display: none } .commentList__item .reply_to_com { margin: 8px 0; max-width: 60%; } .commentList__item .reply_to_com .reply_to_name { font: var(--font-ui-11-micro-bold); color: var(--base-txt-btn-b); } .commentList__item .reply_to_com .reply_to_dt { font: var(--font-ui-11-micro-reg); color: var(--base-txt-btn-b); opacity: 0; } .commentList__item .reply_to_com .reply_to_av > span, .commentList__item .reply_to_com .reply_to_av > img { border-radius: 4px; scale: 0.83333; } .commentList__item .reply_to_com .reply_to_av { border-radius: 4px 0 0 4px; border-left: 4px solid var(--base-txt-btn-b); padding: 6px; } .commentList__item .reply_to_com > .in { border-radius: 0 4px 4px 0; } .commentList__item .reply_to_text { font: var(--font-ui-12-mini-reg); color: var(--base-txt-primary); margin-top: -6px; overflow: hidden; text-overflow: ellipsis; padding-right: 4px; } .commentList__item .reply_to_com__to .reply_to_av { padding-right: 0; } .commentList__item .reply_to_com__to .reply_to_av > * { visibility: hidden; width: 0; } .commentList__item .reply_to_com .reply_to_av, .commentList__item .reply_to_com > .in { background: var(--base-hlt-b-hover); } .commentList__item .reply_to_com .reply_to_icon ws-icon { rotate: 90deg; } .commentList__item .reply_to_com .reply_to_icon { padding: 4px; --icon-color: var(--base-txt-ghost); --icon-size: 16px; } .commentList__item .reply_to_com:hover .reply_to_av, .commentList__item .reply_to_com:hover > .in { background: var(--base-hlt-b-pressed); } .commentList__item .reply_to_com:hover .reply_to_icon { --icon-color: var(--base-txt-btn-b); } .commentList__item .reply_to_com:hover .reply_to_dt { opacity: 1; } .commentList__item .replies_from .reply_to_com .reply_to_name, .commentList__item .replies_from .reply_to_com .reply_to_dt { color: var(--base-txt-btn-a); } .commentList__item .replies_from .reply_to_com { margin-left: auto; } .commentList__item .replies_from .reply_to_com .reply_to_icon ws-icon { rotate: -90deg; } .commentList__item .replies_from .reply_to_com .reply_to_av, .commentList__item .replies_from .reply_to_com > .in { background: var(--base-hlt-hover); } .commentList__item .replies_from .reply_to_com .reply_to_av { border-color: var(--base-txt-btn-a); } .commentList__item .replies_from .reply_to_com:hover .reply_to_icon { --icon-color: var(--base-txt-btn-a); } .commentList__item .replies_from .reply_to_com:hover .reply_to_av, .commentList__item .replies_from .reply_to_com:hover > .in { background: var(--base-hlt-pressed); } .commentList__item .reply_to_com__to > .in { height: 36px; } .commentList__item .reply_to_com__from > .in { height: 28px; } .commentList__item .reply_to_com__from .reply_to_text { margin-top: 4px; } .commentList__item .reply_to_com__from .reply_to_av { padding: 2px; } .commentList__item .reply_to_text ws-emoji {width: 16px;height: 16px;margin: 2px 0;} .commentList__item p.content, .commentList__item div.content { margin-bottom: 0 } .commentList__item #files { padding-bottom: 0; margin-top: 15px } .commentList__item #files_new { padding: 12px 68px 0 0; } .commentList__item .fileItem { width: 200px; } .commentList__item ol.todo { margin: 0 15px 0 -15px; } .commentList__item .ico_seen2 { margin-left: -2px; margin-right: -2px; } .commentList__item > .in .ico_r { display: none; margin: 0 0 0 5px } .commentList__item > .in .button_r { display: none; margin: 2px 4px !important } body.desktop:not(.withMass) .commentList__item:hover .in .ico_r .ico_r, body.desktop:not(.withMass) .commentList__item:hover .in .button_r, .commentList__item .icons_act .in .button_r { display: inline-block } .commentList__item-collapseSaved .in .ico_rh, .commentList__item-collapseSaved:hover .in .ico_rh { display: none !important; } .commentList__log .floatIcons, .commentList__item .floatIcons { right: 16px; top: -20px; transition: all 0.1s ease; opacity: 0; scale: 0.9; pointer-events: none; transform-origin: center center; visibility: hidden; } .commentList__item:hover .floatIcons, .commentList__item .floatIcons:has(.menu_open), .commentList__log:hover .floatIcons, .commentList__log .floatIcons:has(.menu_open), .commentList__item.commentList__item-collapseSaved:not(.commentList__item-collapsed) .floatIcons { opacity: 1; scale: 1; pointer-events: auto; transition-delay: .6s; visibility: visible; } body.mobile .commentList__item.selected .floatIcons, body.mobile .commentList__log.selected .floatIcons { opacity: 1; scale: 1; pointer-events: auto; transition-delay: .2s; visibility: visible; } .commentList__item-collapsed .floatIcons { display: none; } .taskView:not(.taskView-withCommentSearch, .taskView-withCommentFilter) .commentList__item .floatIcons .to_context, .commentList__item:not(.commentList__item-collapseSaved) .floatIcons .to_expand { display: none; } .commentList__item.commentList__item-collapseSaved .floatIcons > *:not(.to_expand) { display: none; } .commentList__log-collapsed .floatIcons a:not(:last-child) { display: none } .commentList .ico_noview { display: none !important } .commentList__item .seen_big { position: absolute; right: 20px; bottom: 8px; margin: 0; opacity: 0.3 } .commentList__item-collapsed .reply_from { display: none } .reply_from { color: var(--base-txt-secondary); padding: 5px; white-space: nowrap } .reply_from:hover { color: var(--base-txt-secondary); background: var(--base-hlt-hover); border-radius: 4px; } .commentList__item .reply_to { margin: 0; text-align: right; float: right; padding: 15px 0 0 } .reply_to div:hover { color: var(--base-txt-secondary); background: var(--base-hlt-hover); border-radius: 4px; width: auto } .reply_to_af { margin: 20px 0 0 0 } .reply_to div { display: inline; padding: 5px; margin: 10px 0 0 } .reply_to a { color: var(--base-txt-secondary) } .reply_to a:hover { color: var(--base-txt-secondary) } .commentList__item-appearStart { background: var(--base-cont-low); } .commentList__item-appearEnd { background: var(--base-cont-top); } .commentList label.mass_ { left: 4px; position: absolute; top: 10px; z-index: 3; opacity: 0.7; } .taskView-withCommentEdit .commentList label.mass_ {display: none} .commentList__log label.mass_ { top: 2px; } .commentList__item-same label.mass_ { top: 4px; } .commentList__collapsedItems label.mass_ { top: 5px; } .commentList label.inputCheckbox span { background: none !important; } .commentList .commentList__archiveItems label.mass_ {top: 6px;} .commentList .commentList__archiveItems .av .av_sm.more { color: var(--base-txt-secondary); } .commentList label.mass_.act { opacity: 1; background: none } .commentList .commentList__item-collapsed label.mass_ { top: 1px; } body.desktop:not(.withMass) .commentList label.mass_ { opacity: 0; bottom: 0; } body.desktop .commentList label.mass_.act { opacity: 1 } body.desktop .commentList .commentList__item:hover label.mass_, body.desktop .commentList__log:hover label.mass_ { transition: opacity 100ms linear 600ms; opacity: 1; } body.desktop .commentList .commentList__item:hover label.mass_:hover, body.desktop .commentList__log:hover label.mass_:hover { transition: none; opacity: 1; } body.desktop .commentList .commentList__item.pre_act label.mass_, body.desktop .commentList .commentList__item.selected label.mass_, body.desktop .commentList__log.pre_act label.mass_, body.desktop .commentList__log.selected label.mass_ { opacity: 1; } body.desktop .commentList .commentList__archiveItems:hover label.mass_, body.desktop .commentList .commentList__archiveItems.pre_act label.mass_, body.desktop .commentList .commentList__archiveItems.selected label.mass_, body.desktop .commentList .commentList__collapsedItems:hover label.mass_, body.desktop .commentList .commentList__collapsedItems.selected label.mass_ { opacity: 0.7 } .commentList .commentList__item-active { background: var(--base-hlt-hover); } .commentList .pre_edit.commentList__item, .commentList .pre_edit.commentList__log, .commentList .pre_edit.commentList__archiveItems, .commentList .pre_edit.commentList__collapsedItems, body.commentList__item-active .commentList .pre_edit.commentList__item { box-shadow: -2px 0 0 0 var(--base-hlt-invert), 2px 0 0 0 var(--base-hlt-invert); background: var(--base-hlt-hover); } .commentList__log #subscribe_me { padding: 10px 5px 5px; } @media screen and (min-width: 481px) { .commentList .pre_act.commentList__item, .commentList .pre_act.commentList__log, .commentList .pre_act.commentList__archiveItems, .commentList .pre_act.commentList__collapsedItems, body.commentList__item-active .commentList .pre_act.commentList__item { box-shadow: -2px 0 0 0 var(--base-hlt-invert), 2px 0 0 0 var(--base-hlt-invert); background: var(--base-hlt-notr-easy); } .op_act .commentList .no_act.pre_act, .op_act .commentList .no_act.pre_act:hover, .op_show .commentList .pre_act:not(.commentList__item-collapsed), .op_show .commentList .pre_act:not(.commentList__item-collapsed):hover, .op_hide .commentList .commentList__item-collapsed.pre_act, .op_hide .commentList .commentList__item-collapsed.pre_act:hover, .op_hide .commentList .commentList__collapsedItems.pre_act, .op_hide .commentList .commentList__collapsedItems.pre_act:hover { box-shadow: none !important; } .op_act .commentList .commentList__collapsedItems.pre_act, .op_act .commentList .commentList__collapsedItems.pre_act:hover { box-shadow: -2px 0 0 0 var(--base-txt-tertiary), 2px 0 0 0 var(--base-txt-tertiary) !important; } } body.withMass #content .commentList .commentList__item:hover { background: var(--base-hlt-hover); } body.withMass #content .commentList .commentList__item * { pointer-events: none !important } body.withMass #content .commentList .commentList__item input { pointer-events: initial !important } body.withMass #content .commentList__log:hover { background: var(--base-hlt-easy); } body.withMass #content .commentList__log * { pointer-events: none !important } body.withMass #content .commentList__log input { pointer-events: initial !important } body.mobile .commentList__item .ico_r { display: inline } @media (max-width: 560px) { .commentList__item > .in { padding-left: 48px } .commentList__item .av_nm, .commentForm-edit .av_nm { display: none !important } .commentList__item div.av { display: block; float: left; margin: 13px -22px 0 16px } .commentList__item.commentList__item-same div.av { margin: 8px -22px 0 16px } .commentList__item-collapsed div.av { margin: 7px 8px 0 16px } .commentList__item > .in ol.todo li:before { margin-left: -50px } .commentList__item > .in ol.todo li { padding-left: 22px } .commentList__item > .in ol.todo li .inline_clip { margin-left: -22px } .commentList__item .page_content { overflow: visible } .commentList__log div.av { display: block; float: left; margin: 8px -22px 0 16px } .commentList__log > .in { width: auto; padding: 7px 16px 7px 48px; } .commentList__archiveItems label.mass_, .commentList__log label.mass_, .commentList__item label.mass_ { display: none; } .commentList__archiveItems .av { left: 6px !important; } .commentList__item:after, .commentList__item:before { display: none !important; } .commentList__item .reply_to_com { max-width: 80%; } } @media (max-width: 480px) { .commentList__item.commentList__item-same div.av { margin: 13px -22px 0 16px; } .commentList__item #files_new { margin-right: 0; padding-right: 0; } .commentList__item .floatIcons, .commentList__log .floatIcons { padding-right: 10px; } .commentList__log { height: auto; white-space: normal; padding-bottom: 0; min-height: 27px; } .commentList__log .ico_l { margin: 0 0 0 -32px } .commentList__log .date { margin-right: 10px; } .commentList__log .it { float: none; display: inline-block; padding: 2px 0; margin: -2px 10px 5px 0; vertical-align: top; max-width: 90%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden } .commentList__log .it.it_tags { max-width: calc(100% - 120px) } .commentList__item .head .seen_by_assignee { --icon-size: 13px; margin-right: -8px; } .commentList__item .page_content { padding-right: 0; } /* щоб не перекривало дату/аватар */ .commentList__item-same:not(.commentList__item-withStar,.commentList__item-replyTo) .in .text > #files_new:first-child { padding-top: 32px; } } @media (max-width: 479px) { .commentList__item .link b { white-space: normal; word-wrap: break-word } } @media print { } @media print_backup { .commentList__item div.av, .commentList__item .ico_seen { display: none; } .commentList__item .av_nm { display: none } .commentList__item { border-bottom: 1px solid var(--base-cont-low); margin: 0 } .commentList__item > .in { padding: 15px } .commentList__item-collapsed .in { padding: 5px 15px } .commentList__log { background: var(--base-cont-top); border-top: 1px solid var(--base-cont-low) } .commentList__log .user { background: var(--base-cont-top) } .commentList__item .text .notme a b { color: var(--base-txt-accent) } .commentList__item > .in { padding: 15px 0 } } .comment_unseen_line, .comment_day_line { padding: 2px; background: var(--base-cont-top); text-align: center; margin: 1px 0 -1px 0; position: relative; z-index: 3; } .comment_unseen_line:before, .comment_day_line:before { display: block; content: ''; position: absolute; top: calc(50% - 0.75px); left: 0; right: 0; border-bottom: 1.5px dotted transparent; z-index: -1; } .comment_unseen_line span.badge, .comment_day_line span.date { display: inline-block; font: var(--font-ui-12-mini-med); color: var(--colorize-lbl-txt-primary); padding: 2px 12px; white-space: nowrap; box-shadow: var(--shadow-cont-major-lineonly-inside); border-radius: 24px; } .comment_day_line span.date { cursor: pointer; } .comment_unseen_line span.badge { display: inline-flex; align-items: center; column-gap: 4px; padding: 2px 6px; } .comment_unseen_line span.badge ws-icon { --icon-size: 16px; } .comment_unseen_line .avs { scale: 0.83333; margin: 0 -4px 0 -2px; } .comment_unseen_line .avs .av_sm + .av_sm { margin-left: -2px; } .comment_unseen_line .avs .av_sm { box-shadow: 0 0 0 1px var(--base-txt-act-minor); } .comment_unseen_line .avs .av_sm.more { text-align: center; font: var(--font-ui-10-nano-med); backdrop-filter: blur(4px); color: var(--base-txt-btn-a); } .comment_unseen_line > i, .comment_day_line > i { position: absolute; top: 50%; width: 8px; height: 8px; border-radius: 100%; background: var(--base-line-tertiary); margin-top: -4px; left: 0; display: none; } .comment_unseen_line > i:last-child, .comment_day_line > i:last-child { left: unset; right: 0; } @media (min-width: 1024px) { .taskView__wrapper-fullscreen .comment_unseen_line > i, .taskView__wrapper-fullscreen .comment_day_line > i { display: block; } .taskView__wrapper-fullscreen .comment_unseen_line:before, .taskView__wrapper-fullscreen .comment_day_line:before { left: 8px; right: 8px; } } .taskView__wrapper { container-type: inline-size; container-name: comment-line; } @container comment-line (min-width: 960px) { .taskView__wrapper .comment_unseen_line > i, .taskView__wrapper .comment_day_line > i { display: block; } .taskView__wrapper .comment_unseen_line:before, .taskView__wrapper .comment_day_line:before { left: 8px; right: 8px; } } @container comment-line (max-width: 960px) { .taskView__wrapper-fullscreen .comment_unseen_line > i, .taskView__wrapper-fullscreen .comment_day_line > i { display: none; } } .commentList__archiveItems__tmpCounter { height: 1px; background: var(--base-cont-top); text-align: center; margin: 0 0 -1px; position: relative; z-index: 11; background: var(--base-line-primary); } .commentList__archiveItems__tmpCounter span { display: inline-block; font: 11px/14px var(--font-base); padding: 5px 12px; margin: -12px auto 5px 0; white-space: nowrap; border-radius: 14px } .commentList__item-collapsed + .comment_day_line, /*.commentList__log + .comment_day_line, */ .comment_unseen_line + .comment_day_line, .commentList__archiveItems + .comment_day_line, .commentList > .comment_day_line:first-child { display: none; } .commentList__archiveItems:before { content: ''; position: absolute; left: 0; right: 0; top: 22px; bottom: 22px; display: block; background: var(--base-cont-top); transition: all 0.3s ease 0.1s; -webkit-transition: all 0.3s ease 0.1s } .commentList__archiveItems:hover:before { top: 0; bottom: 0; border-color: var(--base-line-alt-cardbrd); } .commentList__archiveItems.pre_act:before { display: none } .commentList__archiveItems span.date { display: inline-block; color: var(--base-txt-secondary); font: var(--font-ui-11-micro-reg); padding: 0 10px; margin: 10px auto 10px 0; white-space: nowrap; border-radius: 10px; /*background: var(--base-cont-top);*/ position: relative } .commentList__archiveItems, .commentList__collapsedItems { cursor: pointer; height: 40px; background: var(--base-hlt-g-easy); text-align: center; position: relative; padding: 0 16px 0 75px; border-top: 1px solid var(--base-line-ghost); } .commentList__archiveItems { .in { display: flex; height: 100%; justify-content: end; align-items: center; text-align: right; span.date { line-height: 24px; margin: 0; } } } .commentList__archiveItems .av, .commentList__collapsedItems .av { float: left; margin: 8px 0 0 -42px; position: relative; text-align: center; min-width: 20px; padding: 0 8px 0 0; } .commentList__archiveItems .av .av_sm, .commentList__collapsedItems .av .av_sm { margin: 0 -2px 0 -2px; box-shadow: 0 0 0 2px var(--base-cont-top); display: inline-block; float: none; border-radius: 8px; } .commentList__collapsedItems .av .av_sm.more { text-align: center; font: var(--font-ui-10-nano-med); background: var(--base-hlt-g-hover); backdrop-filter: blur(4px); color: var(--base-txt-secondary); } .commentList__collapsedItems:before { content: ''; position: absolute; left: 0; right: 0; top: 22px; bottom: 22px; display: block; background: var(--base-cont-top); transition: all 0.3s ease 0.1s; -webkit-transition: all 0.3s ease 0.1s } .commentList__collapsedItems:hover:before { top: 0; bottom: 0; border-color: var(--base-line-alt-cardbrd) } .commentList__collapsedItems.pre_act:before { display: none } .commentList__collapsedItems span.date { color: var(--base-txt-tertiary); --icon-color: var(--base-txt-tertiary); font: var(--font-ui-11-micro-reg); padding: 0; margin: 12px 8px; white-space: nowrap; position: relative; float: right; } .commentList__collapsedItems:hover span.date { color: var(--base-txt-secondary); --icon-color: var(--base-txt-secondary); } .commentList__archiveItems span.date ws-icon, .commentList__collapsedItems span.date ws-icon { margin-right: 8px; --icon-size: 16px; width: 16px; height: 16px; } .commentList__archiveItems span.date ws-icon { height: 24px; } .commentList__archiveItems:not(:hover) span.date ws-icon svg use:last-child, .commentList__collapsedItems:not(:hover) span.date ws-icon svg use:last-child { display: none; } .commentList__archiveItems:hover span.date ws-icon svg use:first-child, .commentList__collapsedItems:hover span.date ws-icon svg use:first-child { display: none; } .commentList__archiveItems .count, .commentList__collapsedItems .count { float: right; color: var(--base-txt-tertiary); font: var(--font-ui-10-nano-reg); padding: 0 6px; margin: 12px 0; border-radius: 20px; position: relative; border: 1px solid var(--base-line-tertiary); } .commentList__archiveItems:hover .count, .commentList__collapsedItems:hover .count { color: var(--base-txt-secondary); border-color: var(--base-txt-secondary); } .commentList__collapsedItems__content { display: none } .commentList__item .likes { height: unset; margin: 0; } .commentList__item .likes:has(> task-reactions > a) { padding: 12px 0 0 0; } .commentList__item-collapseSaved { cursor: pointer } .commentList__item-collapsed .replies_from, .commentList__item-collapsed .likes, .commentList__item-collapsed .reply_to_com, .commentList__item-collapsed div.text { display: none; } .commentList__log .head { align-items: flex-start; gap: 8px; } .commentList__log .head .pubdate, .commentList__item .head .pubdate, .commentList__item .head .date_same { font: var(--font-ui-11-micro-reg); color: var(--base-txt-secondary); } .commentList__log .head .pubdate { padding-top: 2px; } .commentList__item:not(.commentList__item-collapsed) .head .when-collapsed { display: none; } .commentList__item-collapsed .head .pubdate { color: var(--base-txt-tertiary); } .commentList__item-collapsed .head ws-icon { --icon-color: var(--base-txt-secondary); } .commentList__item:not(.commentList__item-collapsed) .head .txt { display: none; } .commentList__item-collapsed div.text div.me, .commentList__item-collapsed div.text div.notme { display: inline; vertical-align: top; } .commentList__item-collapsed:not(:hover) .av { opacity: 0.5; } .commentList__item-collapsed:not(:hover) .head .txt, .commentList__item-collapsed:not(:hover) .head .txt a.inline_file { border-color: var(--base-txt-tertiary); } .commentList__item-collapsed:not(:hover) .head .txt { color: var(--base-txt-tertiary); } .commentList__item-collapsed .head .txt { height: 21px; overflow: hidden; pointer-events: none; } .commentList__item-collapsed .head .txt ul, .commentList__item-collapsed .head .txt ol { padding: 0; margin: 0; color: inherit; } .commentList__item-collapsed .head .txt ul li, .commentList__item-collapsed .head .txt ol li { padding-top: 0; padding-bottom: 0; margin: 0; border: none !important; color: inherit; } .commentList__item-collapsed .head .txt blockquote { margin: 0; padding: 0; background: none; font: inherit; color: inherit; } .commentList__item-collapsed .head .txt ws-emoji { width: 16px; height: 16px; } .commentList__item-collapsed .head .txt .invite { background: none; } .commentList__item-collapsed .head .txt .invite .av_sm { display: none; } .commentList__item-collapsed:not(:hover) .head .pubdate { display: none; } .commentList__item-collapsed div.text div.content { display: inline } body.desktop .commentList__item-collapsed div.text div.content { display: inline; font: 12px/20px var(--font-base); color: var(--base-txt-tertiary) } body.desktop .commentList__item-collapsed div.text div.reply_to { display: none } .commentList__item-collapsed div.text div.content * { vertical-align: top; display: inline; margin: 0; font: 12px/20px var(--font-base); padding: 0; border: none; color: var(--base-txt-tertiary); background: none !important; pointer-events: none } .commentList__item-collapsed div.text div.content label { display: none } .commentList__item-collapsed div.text div.content .inline_clip { display: none } .commentList__item-collapsed div.text div.content div { margin: 0 10px 0 0 } .commentList__item-collapsed div.text div.content br { display: none } .commentList__item-collapsed .text .notme { margin-right: 10px; } .commentList__item .expand_save { display: none } .commentList__item-collapseSaved .expand_save { display: inline; padding: 5px 10px; } .commentList__item-collapsed .expand_save { display: none } .commentList.commentList-withFilesOnly .commentList__item .page_content:not(:has(.inline_clip.inline_vis)), .commentList.commentList-withFilesOnly .commentList__item .likes, .commentList.commentList-withFilesOnly .commentList__item .reply_to_com, .commentList.commentList-withFilesOnly .commentList__item .replies_from { display: none } .commentList__item.pre_edit div.av { display: none; } /* -------------------------------------------------------------------------------------------------------------------*/ .place_button #draft_del { float: right; margin: 5px 0 0 10px; position: relative; z-index: 1010 } .com_reply { color: var(--base-txt-secondary); padding: 0 10px 10px 0; font: 12px/20px var(--font-base); display: none; } .com_reply.reply_act { display: block; } .modal .com_reply { padding-top: 0; background: var(--base-cont-top); } .com_reply small { font: 11px/20px var(--font-base); color: var(--base-txt-tertiary) } .com_reply .in { margin-left: 5px } .com_reply .ico_delete { float: right } a.comments_after { height: 30px; padding: 5px 15px; font: italic 12px/30px var(--font-base); text-align: center; color: var(--base-txt-btn-b); display: block; margin: 1px 0 0; background: var(--base-hlt-b-selected); border-top: 0.5px solid var(--base-line-tertiary); } @media screen and (max-width: 480px) { a.comments_after { padding-bottom: calc(5px + var(--sa-bot)); } } a.comments_after a span.ico_l { margin: 0 10px 0 0 !important } .ico_newcomment { margin: -1px 2px !important } a.ico_newcomment:hover, a:hover span.ico_newcomment { background-position: -210px -60px } a.ico_newcomment2, span.ico_newcomment2 { background: url(/assets/img/color/ws_emoji_new.svg) no-repeat -185px -65px; background-size: 480px 480px; height: 20px; width: 20px; padding: 0; margin: 0 !important; vertical-align: top } a.ico_newcomment2:hover { background-position: -215px -65px } /* --------------------------------------------------- PANEL ------------------------------------------------------- */ .commentListPanel { position: absolute; min-height: 48px; overflow: hidden; left: 0; right: 0; top: 0; background: linear-gradient(180deg, var(--base-cont-top), var(--base-cont-top-opac)); backdrop-filter: blur(4px); z-index: 5; } .commentListPanel__wrapper { height: 48px; position: relative; flex-shrink: 0; } .commentListPanel .commentListPanel__filter { position: relative; top: 0; transition: top 0.3s ease; -webkit-transition: top 0.3s ease; margin: 0; padding: 0 14px 0 16px; } .commentListPanel .massPanel { position: absolute; top: -48px; transition: top 0.3s ease; -webkit-transition: top 0.3s ease; display: flex; left: 0; right: 0; } body.desktop .commentListPanel .ico_equalizer { opacity: 0; transition: opacity 0.2s ease 0.2s; -webkit-transition: opacity 0.2s ease 0.2s } body.desktop .commentListPanel:hover .ico_equalizer { opacity: 1 } .commentListPanel .massPanel { z-index: 1000 } @media (max-width: 480px) { .commentListPanel__filter .r_act ~ .top { display: none } .commentListPanel__filter__item:not([style*="none"]) ~ .top { left: 10px; margin: 0 } } /* -------------------------------------------------------------------------------------------------------------------*/ .commentListPanel__filter { position: relative; } .commentListPanel__filter__active { display: none } .commentListPanel__filter a.inline { font: 12px/14px var(--font-base); margin: 0 0 0 5px } .commentListPanel__filter__item-active { display: none !important; } .commentListPanel__filter__active, .commentListPanel__filter__author, .commentListPanel__filter__possible, .commentListPanel__filter__actions, .commentListPanel__search__actions { gap: 4px; } .commentListPanel__filter__jumpers { gap: 4px; } .commentListPanel__filter__possible, .commentListPanel__search__actions, .commentListPanel__filter__actions { margin-left: 8px; } .commentListPanel__filter__author { margin-left: 8px; } .commentListPanel__filter .ico_equalizer { float: left; position: relative; margin: 0 10px 0 0; z-index: 1000 } .commentListPanel__filter { margin-top: 24px; padding: 0 20px; color: var(--base-txt-tertiary); font: 13px/20px var(--font-base); height: 48px; text-align: center } .commentListPanel__filter .r { float: right; font: 13px/20px var(--font-base); color: var(--base-txt-secondary); margin: 1px 0 0 0 } .commentListPanel__filter .r a { color: var(--base-txt-secondary) } .commentListPanel__filter div.r2 { float: left } .commentListPanel__filter a.day { display: block; padding: 2px 4px; border-radius: 6px; font: var(--font-ui-12-mini-reg); --icon-size: 16px; } .commentListPanel__filter a.day > span { padding: 0 4px; } .taskView-withCommentFilter .commentListPanel__filter div.r2, .taskView-withCommentFilter .commentListPanel__filter .ico_equalizer { display: none } .commentListPanel__filter .button_sm { font: 11px/20px var(--font-base); padding: 4px 10px; float: left; margin: -4px 20px -4px -10px } .commentList__item-same { border-top: none; } .commentList__item-same .text .notme { display: none } .commentList__item-same .av_nm { display: none } .commentList__item-preSame > .in { padding-bottom: 8px; } @media screen and (min-width: 481px) { .commentList__item-same > .in { padding-top: 8px; } .commentList__item-same .text p, .commentList__item-same .text .content { margin-top: 0 } } .commentList__item.commentList__item-sameDate .head .pubdate, .commentList__item:not(.commentList__item-sameDate) .head .date_same { display: none } @media screen and (min-width: 481px) { .commentList__item-same:not(.commentList__item-withStar,.commentList__item-replyTo) .head .head__left { visibility: hidden; pointer-events: none; } .commentList__item-same:not(.commentList__item-withStar,.commentList__item-replyTo) .in .text { margin-top: -20px; } } .commentList__item-preSame:not(.pre_edit):before { content:''; position: absolute; left: 51px; top: 64px; bottom: 0; width: 2px; background: var(--base-line-tertiary); border-top-left-radius: 2px; border-top-right-radius: 2px; } .commentList__item-same:not(.commentList__item-replyTo, .commentList__item-withStar):after { content: ''; position: absolute; left: 48px; top: 16px; height: 8px; width: 8px; border-radius: 100%; background-image: linear-gradient(var(--base-line-tertiary), var(--base-line-tertiary)); background-color: var(--base-cont-top); } .commentList__item-same:not(.commentList__item-replyTo, .commentList__item-withStar, .pre_act):after { transition: background-color .15s ease; } .commentList__item-same.pre_act:after, .taskView-withCommentMass .commentList__item:hover:after { background-color: var(--base-hlt-notr-easy); } .commentList__item-same.selected:after, .commentList__item-same:has(.floatIcons:hover):after { background-color: var(--base-cont-mid); } .commentList__item-same.commentList__item-active:after { background-color: var(--base-hlt-notr-easy); } .pre_edit + .commentList__item-same:after, .pre_edit.commentList__item-same:after { display: none } .commentList__item-same.commentList__item-replyTo .in > .av_nm, .commentList__item-same.commentList__item-withStar .in > .av_nm { display: block; } .commentList__item.pre_edit .commentForm__main { padding: 8px 0; } .commentList__item-same:not(.commentList__item-preSame, .commentList__item-replyTo):before { content: ''; position: absolute; left: 51px; top: 0; height: 16px; width: 2px; background: var(--base-line-tertiary); } .commentList__item-same.commentList__item-preSame:before { top: 0; } .commentList__item-same.commentList__item-preSame.commentList__item-withStar:before, .commentList__item-same.commentList__item-preSame.commentList__item-replyTo:before { top: 56px; } @media (max-width: 640px) { .commentListPanel__filter .r { display: none } } @media (max-width: 480px) { .commentListPanel__filter a.inline { display: none } } @media (max-width: 400px) { .commentListPanel__filter span.cnt_all, .commentListPanel__filter span.cnt_fav { display: none } .commentListPanel__filter a.filtdel { margin: -4px 8px -4px 0 } .commentListPanel__filter .button_sm { margin-left: -5px; max-width: 50px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } } .commentList__item__param { margin-right: 4px; display: inline-flex; gap: 6px; flex-shrink: 1 !important; } .commentList__item__param i { font: var(--font-ui-12-mini-reg); font-variant: all-small-caps; margin-right: 0; color: var(--base-txt-btn-c); padding: 0 8px; border-radius: 12px; background: var(--colorize-lbl-aqua-bg); } .commentList__item__param .in { font: var(--font-ui-12-mini-reg); gap:4px; height: 20px; border-radius: 10px; display: inline-flex; align-items: center; } .commentList__item__param .in .av_sm { scale: 0.83333; } .commentList__item__param strike { text-decoration: none; position:relative; max-height: 20px; opacity: 0.6; } .commentList__item__param strike:after { content: ''; position:absolute; left: 0; right: 0; top: 50%; border: 1px solid var(--base-txt-secondary); } .commentList__item__param .tags span.tag { height: 20px; font: var(--font-ui-12-mini-reg); padding: 0 8px 0 5px; } .commentList__item__param .tags span.tag.tag-stage { background: none; padding: 0; font: var(--font-ui-11-micro-reg); box-shadow: none; } .commentList__item__param .tags span.tag.tag-stage ws-icon { --icon-size: 20px; margin: 0 2px 0 0; } .commentList__log .priorb { margin: 0 } .commentList .empty_placeholder { padding: 28px; color: var(--base-txt-secondary); text-align: center; } .commentList .commentList__item.first_item, .commentList .commentList__log.first_item { border-top-color: transparent; } .taskView-withCommentMass .commentList__log, .taskView-withCommentMass .commentList__item { cursor: pointer !important; } .taskView-withCommentMass .commentList__log:hover, .taskView-withCommentMass .commentList__item:hover { background: var(--base-hlt-notr-easy) !important; } .taskView-withCommentMass .commentList__log .floatIcons, .taskView-withCommentMass .commentList__item .floatIcons { display: none !important; } .taskView-withCommentMass .commentList__log .likes, .taskView-withCommentMass .commentList__item .likes, .taskView-withCommentMass .commentList__log a, .taskView-withCommentMass .commentList__item a, .taskView-withCommentMass .commentList__item .fileItem { pointer-events: none; } .commentList .inputCheckbox ws-icon { --icon-size: 16px; } .commentList__item .inputCheckbox { margin-top: 1px; } .commentList .floatIcons.icons-waitPub + .floatIcons { display: none !important; } .comment_unseen_popup { position: absolute; bottom: 56px; right: 56px; z-index: 99; &.hide { opacity: 0; pointer-events: none; scale: 0.5; } &:not(.has_summarize) .summarize { display: none; } .summarize { position: absolute; right: -20px; bottom: -39px; padding: 7px 28px 7px 7px; border-radius: 4px; box-shadow: var(--shadow-cont-major-outline); background: var(--base-cont-mod-top-opac); backdrop-filter: blur(6px); &.summarize-response { width: 300px; } .controls { margin-top: 6px; } .summary__body { white-space: pre-wrap; } } .floater { position: absolute; width: 40px; height: 40px; transition: all 0.3s ease; background: var(--base-cont-top-elevated); border-radius: 100%; box-shadow: var(--shadow-cont-major-outline); z-index: 1001; cursor: pointer; opacity: 1; scale: 1; .badge { position: absolute; width: 100%; top: -12px; } .badge .in { display: block; padding: 2px 4px; border-radius: 12px; color: var(--base-txt-alt-light); background: var(--colors-graphite-600); font: var(--font-ui-10-nano-med); margin: 0 auto; min-width: 12px; text-align: center; } .badge .in:empty { display: none; } .badge.badge-a .in { background: var(--base-txt-act-minor); } .badge.badge-w .in { background: var(--base-txt-alert-major); } ws-icon { width: 40px; height: 40px; transition: all 0.1s ease-in-out; } } &:hover .floater ws-icon { scale: 1.1; } &.has_unseen .floater { animation: ws-hithere 1s ease 1s 1 normal both; } &.arrow.arrow-reverse .floater ws-icon { transform: rotate(180deg); } &.loading { cursor: wait; .summarize:not(.summarize-response) { display: none; } .floater ws-icon { animation-name: ws-blink; animation-iteration-count: infinite; animation-duration: 1s; animation-timing-function: linear; } .summarize .controls { opacity: 0.5; pointer-events: none; } } } /**** TASK FLOW TIMELINE ****/ .taskFlow { position: relative; margin: 8px 24px 24px; padding: 0 0 0 36px; overflow: unset !important; } .taskFlow:has(.taskFlow__div:first-child):first-child { padding-top: 10px; } .taskFlow__item { min-height: 36px; display: flex; justify-content: space-between; box-shadow: var(--shadow-brd-enable); border-radius: 8px; padding: 0 4px; font: var(--font-txt-13-small-semi); } .taskFlow__item .part { height: 36px; padding: 0 3px; width: calc(50% - 8px); box-sizing: border-box; } .taskFlow__item .ava_place { height: 34px; border-right:1px solid var(--base-line-secondary); display: flex; align-items: center; } .taskFlow__item .av_sm { margin:4px; transform:scale(0.833); } .taskFlow__item ws-icon.tag { width:36px; height:36px; } .taskFlow__item .diff { padding: 0 4px; font: var(--font-ui-11-micro-reg); color: var(--base-txt-tertiary); } .taskFlow__item .diff b { font: var(--font-ui-12-mini-semi); color:var(--base-txt-primary); margin-right:1px; } .taskFlow__item .date { padding: 0 4px; font: var(--font-ui-12-mini-reg); color: var(--base-txt-tertiary); white-space: nowrap; } .taskFlow__item .status { padding:0 4px; font: var(--font-ui-11-micro-reg); color: var(--base-txt-tertiary); } .taskFlow__div { background: var(--base-cont-mod-top); margin-left: -32px; position: relative; height: 28px; gap: 4px; } .taskFlow__div .ava_place { width: calc(26px + var(--screen-px)); height: calc(26px + var(--screen-px)); box-shadow: 0 0 0 var(--screen-px) var(--base-txt-tertiary); border-radius:16px; position: relative; display: flex; align-items: center; justify-content: center; } .taskFlow__div .av_sm:not(img) { transform: scale(0.7916) translateX(0.6px) translateY(-0.6px); } .taskFlow__div img.av_sm { width: 19px; height: 19px; } .taskFlow__div .date, .taskFlow__div .time { color: var(--base-txt-tertiary) !important; background: unset; } .taskFlow__item-wrapper { position: relative; padding-block: 4px; } .taskFlow__item-wrapper:only-child .taskFlow__timeline-start .taskFlow__timeline__line, .taskFlow__item-wrapper:only-child .taskFlow__timeline-end .taskFlow__timeline__line { visibility: hidden; } .taskFlow__item-wrapper:has(+.taskFlow__div) { padding-block-end: 8px; } .taskFlow__action { color: var(--base-txt-tertiary); padding-left: 4px; } .taskFlow__item .date-wrapper { padding: 2px 0; display: flex; flex-shrink: 1; flex-wrap: wrap; justify-content: flex-end; } .taskFlow__timeline { --dot-size: calc(var(--screen-px) + 4px); width: var(--dot-size); height: 100%; position: absolute; left: -21px; top: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; .taskFlow__timeline__line { content: ''; display: block; width: var(--screen-px); background-color: var(--base-txt-tertiary); height: 100%; } &.taskFlow__timeline-start, &.taskFlow__timeline-end { .taskFlow__timeline__dot { content: ''; display: block; width: 100%; aspect-ratio: 1 / 1; background: var(--base-txt-tertiary); border-radius: 50%; } } &.taskFlow__timeline-start { flex-direction: column-reverse; justify-content: flex-start; .taskFlow__timeline__line { height: calc(50% - var(--dot-size) / 2); } } &.taskFlow__timeline-end { justify-content: flex-start; .taskFlow__timeline__line { height: calc(50% - var(--dot-size) / 2); } } } .taskFlow__div { position: relative; .taskFlow__timeline { left: 11px; /* 32px - 21px */ top: -100%; } } .taskFlowEmpty { padding: 18px 28px 28px 28px; } .taskFlowEmpty__title { font: var(--font-ui-16-title-3-reg); color: var(--base-txt-primary); padding: 8px; } .commentList__item-collapsed .head .is_edited, .commentList__item-collapsed .head .is_silent { display: none; } .datepicker-commentsJumpTo .ui-datepicker-inline tbody .ui-datepicker-current-day div { background: none; } .commentListPanel__filter__search { display: flex; flex-direction: row; gap: 12px; padding: 0; height: 32px; width: 100%; } .commentListPanel__filter__search .in { display: flex; background: transparent; padding: 0 6px; border-radius: 16px; height: 32px; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, width .15s ease-in-out; box-shadow: none; /*var(--shadow-cont-minor-lineonly-inside);*/ width: 30%; min-width: 150px; } .commentListPanel__filter__search .in:hover { box-shadow: var(--shadow-cont-minor-lineonly-inside); background: var(--base-cont-top); } .commentListPanel__filter__search.filter_started .in, .commentListPanel__filter__search .in.search_started, .commentListPanel__filter__search .in:focus-within { box-shadow: var(--shadow-cont-major-lineonly-outside); background: var(--base-cont-input); width: 100%; } .taskView:not(.taskView-withCommentFilter) .commentListPanel__filter__search .in:not(.search_started):not(:focus-within) a.delete { display: none; } .commentListPanel__filter__search .in { --icon-color: var(--base-txt-tertiary); } .commentListPanel__filter__search .in:hover { --icon-color: var(--base-txt-secondary); } .commentListPanel__filter__search .in:focus-within { --icon-color: var(--base-txt-primary); } .commentListPanel__filter__search .in a.delete { --icon-color: var(--base-txt-secondary); } .commentListPanel__filter__search .in a.delete:hover { --icon-color: var(--base-txt-primary); } .taskView.taskView-withCommentFilter .commentListPanel__filter__search .in a.delete svg use:first-child, .commentListPanel__filter__search .in.search_started a.delete svg use:first-child, .taskView:not(.taskView-withCommentFilter) .commentListPanel__filter__search .in:not(.search_started) a.delete svg use:last-child { display: none; } .taskView.taskView-withCommentFilter .commentListPanel__filter__search .in a.delete svg use:last-child, .commentListPanel__filter__search .in.search_started a.delete svg use:last-child { display: inline-block; } .commentListPanel__filter__search input { border: none; background: transparent; box-sizing: border-box; padding: 0 6px; height: 20px; width: 100%; font: var(--font-ui-15-large-reg); } .taskView.taskView-withCommentFilter .commentListPanel__filter__search input { padding: 0 6px 0 8px; } .commentListPanel__filter__search input::-webkit-input-placeholder, .commentListPanel__filter__search input::placeholder { opacity: 1; transition: opacity .15s ease-in-out; font: var(--font-ui-13-small-reg); } .commentListPanel__filter__search input:focus::-webkit-input-placeholder, .commentListPanel__filter__search input:focus::placeholder { opacity: .7; } .commentListPanel__filter__search .commentListPanel__filter__active { padding-left: 6px; } .taskView-withCommentSearch .commentList__gap, .taskView-withCommentFilter .commentList__gap { display: none; } .commentListPanel__filter__search .nav, .commentListPanel__filter__search .prenav { gap: 8px; min-width: 64px; } .taskView.taskView-withCommentFilter .commentListPanel__filter__search .prenav, .taskView.taskView-withCommentSearch .commentListPanel__filter__search .prenav, .taskView:not(.taskView-chat) .commentListPanel__filter__search .prenav, .taskView:not(.taskView-withCommentFilter,.taskView-withCommentSearch) .commentListPanel__filter__search .nav { display: none; } .taskView:not(.taskView-withCommentSearch,.taskView.taskView-withCommentFilter) .commentListPanel__search__actions, .taskView.taskView-withCommentSearch .commentListPanel__filter__actions, .taskView.taskView-withCommentFilter .commentListPanel__filter__actions, .taskView.taskView-withCommentSearch .commentListPanel__filter__possible, .taskView.taskView-withCommentFilter .commentListPanel__filter__possible { display: none !important; } .commentList__item.commentList__item-bigEmoji .page_content ws-emoji {width: 42px;height: 42px;} .taskView.taskView-withCommentSearch .commentListPanel__filter > .commentListPanel__filter__type { display: none !important; } .taskView.taskView-reversed .commentList__item { .reply_to_com .reply_to_icon ws-icon { transform: scale(-1, 1); } .replies_from .reply_to_icon ws-icon { transform: scale(-1, 1); } } ws-slider { display: inline-flex; gap: 2px; padding: 2px; background: var(--base-cont-trans-low); border-radius: 6px; border: none; position: relative; overflow: hidden; box-sizing: border-box; } /*ws-slider.string { padding: 7px 7px; }*/ ws-slider a { color: var(--base-txt-tertiary); box-sizing: border-box; display: inline-flex; position: relative; align-items: center; z-index: 2; text-wrap: nowrap; } ws-slider:not(:has(i.bg.ani)) a.act { background: var(--base-cont-top-elevated); } ws-slider a.act { z-index: 3; } .modal__content ws-slider:not(:has(i.bg.ani)) a.act { background: var(--base-cont-mod-top); } /*ws-slider.string a { border-radius: 6px; }*/ ws-slider a svg { fill: var(--base-txt-tertiary); } ws-slider a.act svg { fill: var(--base-txt-tertiary); } ws-slider a:not(.act):hover { color: var(--base-txt-primary); } ws-slider a:not(.act, [disabled]):hover svg { fill: var(--base-txt-primary); } ws-slider a span { padding: 0 4px; } ws-slider i.bg { position: absolute; display: none; background: var(--base-cont-mod-top-elevated); box-shadow: var(--shadow-cont-major); z-index: 1; } .modal__content ws-slider i.bg { background: var(--base-cont-mod-top); } ws-slider a[disabled]:hover { color: var(--base-txt-tertiary); cursor: initial; } /* if something changes in future ws-slider i.br { position: absolute; display: none; border-radius: 4px; box-shadow: 0 0 0 1px var(--base-hlt-b-invert-major) inset; z-index: 4; } ws-slider.string i { border: 2px solid var(--base-hlt-b-invert-major); border-radius: 6px; } */ ws-slider i.ani { transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; } /* COLORS & SIZES */ ws-slider.blue a.act { color: var(--base-txt-btn-a); } ws-slider.blue a.act svg { fill: var(--base-txt-btn-a); } ws-slider.violet a.act { color: var(--base-txt-btn-b); } ws-slider.violet a.act svg { fill: var(--base-txt-btn-b); } ws-slider.black a.act { color: var(--base-txt-accent); } ws-slider.black a.act svg { fill: var(--base-txt-accent); } ws-slider.h24 { border-radius: 6px; } ws-slider.h24 i.bg { border-radius: 4px; } ws-slider.h24 a { font: var(--font-ui-11-micro-med); padding: 0 6px; border-radius: 4px; } ws-slider.h24 a ws-icon { scale: 0.8; } ws-slider.h28 { border-radius: 8px; } ws-slider.h28 i.bg { border-radius: 6px; } ws-slider.h28 a { font: var(--font-ui-11-micro-med); padding: 4px 8px; border-radius: 6px; } ws-slider.h28 a ws-icon { scale: 0.8; } ws-slider.h32 { border-radius: 8px; } ws-slider.h32 i.bg { border-radius: 6px; } ws-slider.h32 a { font: var(--font-ui-12-mini-med); padding: 4px 10px; border-radius: 6px; } ws-slider.h32 a ws-icon { } ws-slider.h36 { border-radius: 10px; } ws-slider.h36 i.bg { border-radius: 8px; } ws-slider.h36 a { font: var(--font-ui-13-small-med); padding: 6px 12px; border-radius: 8px; } ws-slider.h36 a ws-icon { padding: 0 2px; } @media screen and (max-width: 480px) { ws-slider.mobile-h36 { border-radius: 10px; } ws-slider.mobile-h36 i.bg { border-radius: 8px; } ws-slider.mobile-h36 a { font: var(--font-ui-13-small-med); padding: 6px 12px; border-radius: 8px; } ws-slider.mobile-h36 a ws-icon { padding: 0 2px; } } ws-emoji { display: inline-block; vertical-align: text-bottom; } .last_act ws-icon[name="rex"] { display: none; --icon-color: var(--base-txt-ghost); --icon-size: 16px; width: 16px; height: 16px; } .last_act > span { display: block; width: 8px; height: 8px; border: 1.5px solid var(--base-txt-muted); border-radius: 100%; } .last_act + .in { color: var(--base-txt-tertiary); } .last_act.today > span { border-color: var(--lbl-today-major); background: var(--lbl-today-major); } .last_act.yesterday > span { border-color: var(--lbl-yesterday-minor); background: var(--lbl-yesterday-minor); } .last_act.recently > span { border-color: var(--lbl-yesterday-minor); width: 6px; height: 6px; border-width: 3px; } .last_act.online + .in, .last_act.today + .in, .last_act.yesterday + .in, .last_act.recently + .in { color: var(--base-txt-primary); } .last_act.online > span { border-color: var(--base-txt-new-minor); background: var(--base-txt-new-minor); } .last_act.rex > span { display: none; } .last_act.rex ws-icon[name="rex"] { display: block; } .last_act.rex + .in { color: var(--base-txt-muted); } .seen ws-icon:first-child svg { --fill-color: var(--base-txt-tertiary); fill: var(--fill-color) !important; } .unseen ws-icon:first-child svg { --fill-color: var(--base-txt-btn-a); fill: var(--fill-color) !important; } .seen_yesterday ws-icon:first-child svg { --fill-color: var(--lbl-yesterday-major); fill: var(--fill-color) !important; } .seen_today ws-icon:first-child svg { --fill-color: var(--base-txt-notice-minor); fill: var(--fill-color) !important; } .unseen.has_mention ws-icon:first-child svg { --fill-color: var(--base-txt-btn-w); fill: var(--fill-color) !important; } .unseen ws-icon:first-child use:first-child { display: none; } .seen ws-icon:first-child use:last-child { display: none; } .seen_empty ws-icon { opacity: 0; } a.seen:hover ws-icon, a.unseen:hover ws-icon, a.seen_empty:hover ws-icon { opacity: 1; scale: 1.2; transition: all 0.2s ease-in-out; } project-term .data > .indicator, task-term .data > .indicator { display: block; width: 28px; height: 28px; border-radius: 28px; border: 1px solid var(--base-line-secondary); box-sizing: border-box; --icon-color: var(--base-txt-tertiary); padding: 3px; position: relative; } project-term .data.hot > .indicator, task-term .data.hot > .indicator { border-color: transparent; } project-term .data > .indicator > .dot, task-term .data > .indicator > .dot { display: block; width: 20px; height: 20px; background: var(--base-txt-secondary); border-radius: 20px; } project-term .data > .indicator > ws-icon, task-term .data > .indicator > ws-icon, project-term .data > .indicator > .dot > ws-icon, task-term .data > .indicator > .dot > ws-icon { width: 20px; height: 20px; } project-term .data > .indicator > ws-icon, task-term .data > .indicator > ws-icon { --icon-size: 16px; } project-term .data > .indicator > ws-icon[name="hourglass"], task-term .data > .indicator > ws-icon[name="hourglass"] { --icon-size: 12px !important; } project-term.no_indicator .data > .indicator, task-term.no_indicator .data > .indicator { display: none; } project-term .data.today > .indicator > ws-icon, task-term .data.today > .indicator > ws-icon { --icon-color: var(--lbl-today-major); } project-term .data.today > .indicator > .dot, task-term .data.today > .indicator > .dot { background: var(--lbl-today-major); } project-term .data.hot > .indicator > .dot, task-term .data.hot > .indicator > .dot { background: var(--base-hlt-w-selected); --icon-color: var(--base-txt-alert-minor); } project-term .data.muted > .indicator, task-term .data.muted > .indicator, project-term .data.muted span[class*="label"], task-term .data.muted span[class*="label"] { display: none; } project-term .data.muted > .in, task-term .data.muted > .in, project-term .data.muted > .in > span, task-term .data.muted > .in > span { padding-left: 0 !important; color: var(--base-txt-muted) !important; } .pie_svg.pie_deadline circle.fill { stroke: transparent; } .pie_svg.pie_progress circle.fill { stroke: var(--base-hlt-b-invert-minor); } .pie_svg.pie_progress circle.draw, .pie_svg.pie_deadline circle.draw { stroke: var(--lbl-today-major); } project-term .data > .indicator progress-pie, task-term .data > .indicator progress-pie { padding: 0; margin: 0; } project-term .data > .indicator progress-pie .pie_progress, task-term .data > .indicator progress-pie .pie_progress { position: absolute; top: -1px; left: -1px; width: 28px; height: 28px; } span.tag ws-icon svg, ws-icon.tag svg { fill: var(--tag-color) !important; } task-done-date ws-icon svg { fill: var(--base-txt-muted); } task-done-date ws-icon.err svg { fill: var(--base-txt-alert-minor); } task-done-date ws-icon.ok svg { fill: var(--base-txt-new-major); } task-done-date span.ok { color: var(--base-txt-new-major); } a project-term .data_place > ws-icon:first-child svg, a task-term .data_place > ws-icon:first-child svg { fill: var(--base-txt-secondary) } project-term .data > ws-icon:first-child, task-term .data > ws-icon:first-child { --icon-color: var(--base-txt-accent); --icon-size: 16px; border: 3.5px solid var(--base-hlt-b-pressed); } project-term .data > ws-icon[name="calendar_range"], task-term .data > ws-icon[name="calendar_range"] { --icon-color: var(--base-txt-primary); border: none; position: relative; } project-term .wait > ws-icon[name="calendar_range"], task-term .wait > ws-icon[name="calendar_range"], task-term .related > ws-icon[name="calendar_range"] { --icon-color: var(--base-txt-btn-b); background: var(--base-hlt-b-pressed); } project-term .hot > ws-icon:first-child, task-term .hot > ws-icon:first-child { background: var(--base-hlt-w-selected); border: none; } project-term .hot > ws-icon:first-child svg, task-term .hot > ws-icon:first-child svg { fill: var(--base-txt-btn-w); } project-term .hot > .in, task-term .hot > .in { color: var(--base-txt-btn-w); } project-term .today > ws-icon:first-child, task-term .today > ws-icon:first-child { background: var(--lbl-today-minor); border: none; } project-term .tomorrow > ws-icon:first-child, task-term .tomorrow > ws-icon:first-child, project-term .warm > ws-icon:first-child, task-term .warm > ws-icon:first-child { border: none; } task-term .tomorrow > ws-icon:first-child:before, task-term .tomorrow > ws-icon:first-child:after, task-term .warm > ws-icon:first-child:before, task-term .warm > ws-icon:first-child:after, project-term .tomorrow > ws-icon:first-child:before, project-term .tomorrow > ws-icon:first-child:after, project-term .warm > ws-icon:first-child:before, project-term .warm > ws-icon:first-child:after, project-term :not(.hot, .today, .wait, .related) > ws-icon[name="calendar_range"]:before, project-term :not(.hot, .today, .wait, .related) > ws-icon[name="calendar_range"]:after, task-term :not(.hot, .today, .wait, .related) > ws-icon[name="calendar_range"]:before, task-term :not(.hot, .today, .wait, .related) > ws-icon[name="calendar_range"]:after { content: ''; position: absolute; width: 28px; height: 28px; border-radius: 14px; } project-term .tomorrow > ws-icon[name="calendar_date"]:before, task-term .tomorrow > ws-icon[name="calendar_date"]:before { z-index: -1; background: conic-gradient(var(--lbl-today-minor) 83%, transparent 17%); } project-term .tomorrow > ws-icon[name="calendar_date"]:after, task-term .tomorrow > ws-icon[name="calendar_date"]:after { background: conic-gradient(transparent 83%, var(--base-hlt-b-pressed) 17%); mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), white calc(100% - 3.5px)); } project-term .warm > ws-icon[name="calendar_date"]:before, task-term .warm > ws-icon[name="calendar_date"]:before { z-index: -1; background: conic-gradient(var(--lbl-today-minor) 17%, transparent 0%); } project-term .warm > ws-icon[name="calendar_date"]:after, task-term .warm > ws-icon[name="calendar_date"]:after { background: conic-gradient(transparent 17%, var(--base-hlt-b-pressed) 0%); mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), white calc(100% - 3.5px)); } project-term .related > ws-icon:first-child, task-term .related > ws-icon:first-child { background: var(--base-hlt-b-pressed); --icon-color: var(--base-txt-btn-b); border: none; } project-term .wait > .in, task-term .wait > .in { color: var(--base-txt-tertiary); } project-term .data > .in .gray, task-term .data > .in .gray { color: var(--base-txt-tertiary); } project-term .wait > .in .gray, task-term .wait > .in .gray { color: var(--base-txt-primary); } project-term .data > ws-icon[name="calendar_range"]:before, task-term .data > ws-icon[name="calendar_range"]:before { background: conic-gradient(var(--base-hlt-b-invert-minor) 100%, transparent 0%); mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), white calc(100% - 3.5px)); } project-term .data > ws-icon[name="calendar_range"]:after, task-term .data > ws-icon[name="calendar_range"]:after { background: conic-gradient(var(--lbl-today-major) 0%, transparent 0%); mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), white calc(100% - 3.5px)); } project-term .warm > ws-icon[name="calendar_range"]:after, task-term .warm > ws-icon[name="calendar_range"]:after { background: conic-gradient(var(--lbl-today-major) 17%, transparent 0%); } project-term .tomorrow > ws-icon[name="calendar_range"]:after, task-term .tomorrow > ws-icon[name="calendar_range"]:after { background: conic-gradient(var(--lbl-today-major) 83%, transparent 0%); } project-term .today > ws-icon[name="calendar_range"]:after, task-term .today > ws-icon[name="calendar_range"]:after { background: conic-gradient(var(--lbl-today-major) 100%, transparent 0%); } task-term ws-icon[name=repeat] { width: 16px; height: 16px; } project-term span[class^=terms_label] + ws-icon, task-term span[class^=terms_label] + ws-icon { margin-left: 4px; } a project-tags .data_place > ws-icon:first-child svg, a project-stage .data_place > ws-icon:first-child svg, a project-folder .data_place > ws-icon:first-child svg, a project-assignee .data_place > ws-icon:first-child svg { fill: var(--base-txt-secondary) } project-folder ws-icon svg { fill: var(--folder-color); } /*project-term .data_place > ws-icon:first-child, project-term .data > ws-icon:first-child {*/ /* border:1px solid var(--base-txt-tertiary)*/ /*}*/ /*a project-term .data_place > ws-icon:first-child {*/ /* border: 1px dashed var(--base-txt-secondary);*/ /*}*/ /*a project-term .data_place > ws-icon:first-child svg {*/ /* fill: var(--base-txt-secondary)*/ /*}*/ /*project-term .data > ws-icon:first-child {*/ /* border: 3px solid var(--base-hlt-b-pressed);*/ /*}*/ /*project-term .hot > ws-icon:first-child {*/ /* background: var(--base-hlt-w-pressed);*/ /* border: none;*/ /*}*/ /*project-term .hot > ws-icon:first-child svg {*/ /* fill: var(--base-txt-alert-major);*/ /*}*/ /*project-term .hot > .in {*/ /* color: var(--base-txt-alert-major);*/ /*}*/ /*project-term .wait > ws-icon:first-child {*/ /* border:1px solid var(--base-txt-tertiary)*/ /*}*/ /*project-term .wait > ws-icon:first-child svg {*/ /* fill: var(--base-txt-tertiary);*/ /*}*/ /*project-term .wait > .in {*/ /* color: var(--base-txt-tertiary);*/ /*}*/ /*project-term .data > .in .gray {*/ /* color: var(--base-txt-tertiary);*/ /*}*/ /*project-term .wait > .in .gray {*/ /* color: var(--base-txt-primary);*/ /*}*/ ws-slider.width { width: 100%; display: flex; flex-wrap: wrap; } ws-slider.width a { flex-grow:1; text-align:center; place-content: center; } /*************************************************************/ ws-date-input { display: inline-flex; background: var(--base-cont-mod-top); gap: 3px; } ws-date-input .date-segment { border: none; padding: 0; margin: 4px 0; width: 30px; background: transparent; } ws-date-input .date-segment.day { text-align: right; } ws-date-input .date-segment.month { width: 35px; /* щоб вміщалося Июн, Серп тощо */ text-align: center; } ws-date-input .date-segment.year { width: 50px; text-align: left; } ws-date-input, ws-date-input input { font: var(--font-ui-14-regular-semi); font-variant-numeric: tabular-nums; } ws-date-input.nodate, ws-date-input.nodate input { color: var(--base-txt-tertiary) !important; } ws-date-input .separator { display: none; } ws-date-input.focused .separator { display: inline-flex; width: 3px; height: 24px; align-items: flex-end; } ws-date-input.focused .separator:first-of-type { margin-left: 2px; margin-right: -8px; } ws-date-input.focused .separator:last-of-type { margin-right: 2px; margin-left: -8px; } ws-chart { display: block; width:100%; height: 40px; } .modal__header > tags-group-icon ws-icon { padding-left: 6px; width: 24px; height: 24px; --icon-size: 24px; } tags-group-icon ws-icon.tags_group_hidden { --icon-color: var(--base-txt-alert-major); } tags-group-icon ws-icon.tags_group_required { --icon-color: var(--base-txt-btn-w); } tags-group-chips { display: flex; gap: 8px; .chip > span:not([class]) { font: var(--font-ui-11-micro-reg); color: var(--base-txt-tertiary); } .chip.chip-tags-group-hidden:hover ws-icon { --icon-color: var(--base-txt-secondary); } .chip.chip-20.chip-tags-group-hidden { padding: 0 4px; /* to make it round 20x20 */ } } ws-marquee { display: inline-flex; overflow: hidden; white-space: nowrap; max-width: 100%; } ws-code-input { display: block; .ws-code-input { display: flex; gap: 4px; .ws-code-input__input { padding-left: 0; padding-right: 0; text-align: center; width: 2ch; box-sizing: border-box; } } } ws-checkbox { display: inline-block; } task-timers { ws-icon { --icon-color: var(--costs-timer-warning);animation: act-timer-dot 1s ease-in-out infinite alternate; } } @keyframes act-timer-dot { 0% { transform: scale(0.9); } 100% { transform: scale(1.12); } } @container (width < 100px) { task-priority, task-assignee, task-stage { max-width: 100%; .in { max-width: 100%; display: none !important; } } } task-priority, task-assignee, task-stage { max-width: 100%; .data, .data_place { max-width: 100%; } } .member_row {position:relative;height: 20px;padding: 10px 0;font: 13px/20px var(--font-base);white-space:nowrap;color:var(--base-txt-secondary);} .member_row > * {position:absolute; top:10px} .member_row .ava { left:10px; margin:-2px 0} .member_row ws-icon.alt {float:left;} .member_row .mr_name {left:45px;width:100px;width:calc(29% - 45px);font:14px/20px var(--font-base);color:var(--base-txt-accent);} .member_row .mr_name b {font-weight:normal; } .member_row .mr_name span {color:var(--base-txt-secondary);} .member_row .mr_email {left:75%;text-align:right;width: 23%;} .member_row .mr_email a:not(:hover) {color:inherit} .member_row .mr_email ws-icon.alt {display:none} .member_row .mr_phone {left: 55%;text-align:right;width: 18%;} .member_row .mr_phone a:not(:hover) {color:inherit} .member_row .mr_phone ws-icon.alt {display:none} .member_row .mr_address {left:53%; text-align:right; width:45%} .member_row .mr_title {left: 34%;width: 38%;} .member_row .mr_name, .member_row .mr_email, .member_row .mr_phone, .member_row .mr_title, .member_row .mr_address, .member_row .mr_data {overflow:hidden;text-overflow:ellipsis;padding: 0 10px;margin: 0 -10px;-webkit-user-select: text;user-select: text;} .member_row:not(:hover) .mr_name a.inline {border-bottom-width:0} .member_row .ava:hover .av_sm {box-shadow:0 0 0 2px var(--white-accent), 0 0 5px 2px var(--base-btn-primary-minor)} .member_row.selected {background: var(--base-hlt-selected);} .listing__item .member_row .mr_name {font:16px/20px var(--font-base);} .listing__item .member_row .ava { left:30px} .listing__item .member_row .mr_name {left:65px;width: 26%;width: calc(32% - 65px);} .listing__item.t0.item_wtitle .member_row {min-height: 40px; height: auto} .listing__item.t0 .member_row {min-height: 20px; height: auto} .listing__item.t0.item_wtitle .member_row .tags, .listing__item.t0 .member_row .tags {flex-wrap: wrap; display: flex; width: 70%} .listing__item.t0 .member_row .mr_title {position: relative;top: 0} .listing__item .member_row * {/* box-shadow:0 0 1px red; */} .member_row .mr_name a {/* color:inherit */} @media(max-width:900px) { .listing__item .member_row .mr_title {display:none} .listing__item .member_row .mr_name {width:33%;width: calc(39% - 65px);} .listing__item .member_row .mr_email {left:70%;width: 27%;} .listing__item .member_row .mr_phone {left:43%;width:23%} .listing__item .member_row .mr_address {left:43%; width:54%} } @media(max-width:640px) { .listing__item .member_row .mr_email {left:92%; width:30px; padding:0; margin:0} .listing__item .member_row .mr_email font {display:none} .listing__item .member_row .mr_email ws-icon.alt {display:inline-block} .listing__item .member_row .mr_name {width:45%;width: calc(51% - 65px);} .listing__item .member_row .mr_phone, .listing__item .member_row .mr_address {left:55%; width:35%} } @media(max-width:480px) { .listing__item .member_row .ava {left:10px;} .listing__item .member_row .mr_address {display:none} .listing__item .member_row .mr_email {left:90%;} .listing__item .member_row .mr_phone {left:80%; width:30px; padding:0; margin:0} .listing__item .member_row .mr_phone font {display:none} .listing__item .member_row .mr_phone ws-icon.alt {display:inline-block} .listing__item .member_row .mr_name {width:72%;width: calc(76% - 45px);left: 45px;} } .blank {width: 432px;margin: 32px auto;} .blank .head {height: 64px;} .blank .head_big {height:120px;} .blank .head .drop_select {float:right; width:150px; background:var(--base-cont-mod-top);box-shadow: var(--shadow-cont-minor);padding: 9px 10px;margin:5px 0; } .blank .head .drop_select .drop {background-color:var(--base-cont-mod-top); border-color:var(--base-cont-mod-top)} .blank .head .button_r {margin: 6px 0 !important;} .blank .head .ava_click {cursor:pointer} .blank .head .logo {float:left;} .blank .head > .logo .ico_c {margin:10px; transform:scale(2); opacity:0.3} .blank .itm {position:relative;margin: 0 0 8px;} .blank .ico_l {margin:20px 0 0 -30px} .blank .itm_big .ico_a {top:12px; right:5px;} .blank .itm input.input, .blank .itm div.input {width:100%;padding: 15px 15px 0 15px;font: 18px/40px var(--font-base);border:none;border-bottom: 2px solid var(--base-txt-ghost);background:transparent;box-sizing:border-box;border-radius: 0;margin:0;-webkit-user-select: text;user-select: text;} .blank .itm div.input {height:57px;white-space:nowrap;overflow: hidden;text-overflow:ellipsis;border-bottom: 1px solid var(--base-cont-low);} .blank .itm_tag div.input {cursor:pointer;} .blank .itm:not(.itm_tag) div.input.labels_act {white-space: normal;height: auto;min-height: 57px;} .blank .itm textarea {background:var(--base-cont-note-major);color:var(--base-txt-primary);width: 140%;padding: 15px 15px 0 15px;border:none;border-radius:4px;font: 14px/20px var(--font-base);box-sizing:border-box;height: 120px;resize:vertical;margin: 40px -20% 0;} .blank .itm div.textarea {background: var(--base-cont-note-major);color:var(--base-txt-primary);width: 140%;padding: 10px 15px;border:none;border-radius:4px;font: 14px/20px var(--font-base);box-sizing:border-box;height: 120px;resize:vertical;margin: 40px -20% 0;overflow:auto;} /* ----------- MinifyCSS: LIGHT THEMEMinifyCSS: LIGHT THEME ----------- */.blank .itm textarea, .blank .itm div.textarea {background:var(--base-cont-note-minor);} .blank .itm textarea:placeholder-shown {background:var(--base-cont-note-minor)} /* ----------- MinifyCSS: STOPMinifyCSS: STOP ----------- */ @media (max-width:480px) { .blank .itm textarea {width: calc(100% + 30px);margin: 40px -15px 0;} } .blank .itm_big input.input, .blank .itm_big div.input {font:bold 21px/40px var(--font-base)} .blank .itm input.input:focus { background:var(--base-hlt-easy); } .blank .itm input.input::-webkit-input-placeholder {font:inherit; position:relative; top:-5px} .blank .itm input.input::-moz-placeholder {font:inherit; position:relative; top:-5px} .blank .itm:not(.itm_serv) input.input::-webkit-input-placeholder {opacity:0} .blank .itm:not(.itm_serv) input.input::-moz-placeholder {opacity:0} .blank .itm input.input:focus::-webkit-input-placeholder {opacity:0} .blank .itm input.input:focus::-moz-placeholder {opacity:0} .blank .itm input.input:disabled {background:var(--base-cont-top); color:var(--base-txt-tertiary)} .blank .itm.wico {padding-left:30px;} .blank .itm .ico_r {position:absolute; right:10px; top:20px; opacity:0.25} .blank .itm .ico_goto {opacity:1} .blank .itm .input:placeholder-shown ~ .ico_r {display:none} .blank .itm_serv .ico_r {top:10px;} .blank .itm .ico_r:hover {opacity:1} .blank .itm_hid {display:none} .blank .itm .input + label, .blank .itm .drop_select ~ label { position: absolute; top: 5px; left: 10px; transition: all 0.1s; opacity: 1; padding: 0 5px; font: 12px/16px var(--font-base); color: var(--base-txt-tertiary); cursor:text; } .blank .itm .input:placeholder-shown + label, .blank .itm_tag .input:not(.labels_act) + label {opacity: 1;top: 10px;font: 18px/40px var(--font-base)} .blank .itm .input:focus + label {opacity:1; top:5px; color: var(--base-txt-link-minor);font: 12px/16px var(--font-base); } .blank .itm.wico .input + label, .blank .itm.wico .drop_select ~ label {left:40px;} .blank .more {float:right;color:var(--base-txt-tertiary);font:14px/20px var(--font-base);padding: 8px 0;} .blank .more:hover, .blank .more:focus {color:var(--base-txt-link-major); font:14px/20px var(--font-base); outline:none} .blank .more .ico_r {margin:0 10px;} .blank .show-more {margin-block: 20px;} .blank .itm_serv {padding-left:110px; margin-top:20px; height:42px;} .blank .itm_serv + .itm_serv {margin-top:0;} .blank .itm_serv input.input, .blank .itm_serv div.input {padding:0 15px;font: 16px/40px var(--font-base);float: right;} .blank .itm_serv div.input {height:42px;} .blank .itm_serv input.input::-webkit-input-placeholder {top:0;} .blank .itm_serv input.input::-moz-placeholder {top:0;} .blank .itm_serv .drop_select {margin:0 0 0 -110px;width:110px;padding: 10px 10px;box-sizing: border-box;float: left;height: 42px;border: none;border-bottom:2px solid var(--base-txt-ghost);border-radius:0;background: var(--base-cont-mod-top);} .blank .itm_serv div.input ~ .drop_select {border-bottom: 1px solid var(--base-cont-low);} .blank .itm_serv .drop_select .drop {background-color:transparent; border-color:transparent} .blank .itm_serv .drop_select .in {font:14px/20px var(--font-base); color:var(--base-txt-tertiary)} .blank .itm_serv input.input:focus ~ .drop_select {background:var(--base-hlt-selected);} .blank .itm_serv input.input:not(:placeholder-shown) ~ .drop_select .in {color: var(--base-txt-primary);} .blank .itm_serv input.input:focus ~ .drop_select .in {color: var(--base-txt-link-minor);} .blank .itm_select .drop_select {padding: 15px 15px 0 15px;height: 40px;border: none;border-bottom:2px solid var(--base-txt-ghost);border-radius:0;background: var(--base-cont-mod-top);color: var(--base-txt-primary);} .blank .itm_select .drop_select .drop {background-color:transparent;border-color:transparent;background-position: -365px -155px;top: 20px;margin: 0;} .blank .itm_select .drop_select .in {font: 18px/40px var(--font-base);margin-right: 30px;display: block;overflow: hidden;} .blank .itm_select .drop_select .r {background:var(--base-cont-mod-top);top: 25px;color: var(--base-txt-primary);padding-left: 10px;} .blank .itm i {position:absolute;left:0;bottom:0;height:2px;right:0;background: var(--base-txt-ghost);-webkit-transition:right 0.3s ease;z-index:1;} .blank .itm.wico i {left:30px;} .blank .itm .input:placeholder-shown ~ i {right:100%; } .blank .itm .input:not(:placeholder-shown) ~ i {background: var(--base-txt-tertiary);} .blank .itm .input:focus ~ i {background: var(--inp-hlt-focus);right: 0;} .blank .req_error i {right:0 !important; background:var(--base-btn-alert-primary-minor) !important} .blank .itm_select i {background:var(--base-txt-secondary)} .blank .itm_tag .input:not(.labels_act) ~ i {background:var(--base-txt-ghost);} .blank .itm_lock {padding: 10px 0 0 0;margin: 0;position: relative;} .blank .itm_lock .ico_l {position: absolute;right: -20%;top: 20px;margin: 0 10px;} .blank .itm_lock textarea, .blank .itm_lock div.textarea {margin-top: 0;border-top:2px solid var(--base-btn-alert-primary-minor);border-radius:0;padding-right:30px;height: 70px;} .blank .itm_lock div.textarea {} .blank .itm .input:focus ~ .ico_plus_gray {background-color:var(--base-txt-link-major); opacity:1} .step_ani {position:relative; left:0} .step1 .step_ani {left: -500px;transition:left 0.3s ease;-webkit-transition:left 0.3s ease;} .step2 .step_ani {left:500px; transition:none;-webkit-transition:none;} .step3 .step_ani {left:0; transition:left 0.3s ease;-webkit-transition:left 0.3s ease;} .blank ~ #invite {display:none;width: auto;margin: 20px;} .blank_mass {width:auto; margin:20px 20px -30px;} .blank_mass .itm, .blank_mass .more, .blank_mass .more_itms, .blank_mass .head .ava_place {display:none} .blank_mass .head .drop_select {margin:0} .blank label {-webkit-user-select: none; user-select: none; } .blank .logo_pre {float:left;height: 100px;width: 100px; position:relative;} .blank .logo_pre .logo {padding:0;border-radius: 10px;margin: 0;float: left;height: 82px;} .blank .logo_pre .pages {right: 0;top: 24px;width:8px;} .blank .logo_pre .pages a {margin:5px 0;} .blank .logo_pre .ico_a {top: -5px;left: -10px;position: absolute;} .blank .eye_pre {float:right;width: 200px;text-align: right;} .blank .eye_conf {margin: -5px 0 5px !important;display: block;padding: 0;} .blank .eye_conf .eye_line div {margin-right:0} .blank_pre.has_scroll.scr_bot + .buttons {box-shadow:0 -5px 10px var(--base-cont-mod-low)} /* .blank_pre.has_scroll:after {content:''; position:absolute; bottom:0; left:0; right:0; height:50px; background:linear-gradient(to top, var(--base-cont-mod-low) 0%,var(--base-cont-mod-top) 80%)} */ .blank .itm div.input .tags {display:block;margin: 10px 0 10px -5px;line-height: 20px;-webkit-user-select: none;user-select: none;} #search_contact { margin-top: -2px; } ws-icon[name=my_group] use:nth-child(1) { display: none; } ws-icon[name=my_group].act use:nth-child(1) { display: inline-flex; } ws-icon[name=my_group].act use:nth-child(2) { display: none; } .group_ico { width: 64px; height: 64px; border-radius: 8px; background: var(--base-cont-mod-low); display: inline-flex; align-items: center; justify-content: center; } .group_ico ws-icon, .group_ico ws-icon svg { width: 48px; height: 48px; } .in .drop_gmt { } .contacts-img-input-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; width: 100%; } .contacts-img-input-row > *:nth-child(2) { flex: 1; } .contacts-img-input-row .drop_select { margin: 0; }.progress, .progress_na { height: 12px; border-radius: 4px; background: var(--costs-progbar-minor); margin-top: 4px; width: 140px; overflow: hidden; } .progress div, .progress a { height: 12px; background: var(--costs-task-minor); } .progress_hlt_over, .progress_hlt div { background: var(--base-hlt-b-invert-major) } .progress_time_over, .progress_time div { background: var(--costs-time-minor) } .progress_money_over, .progress_money div { background: var(--costs-money-minor) } .progress div.over, .progress a.over { height: 12px; background: var(--costs-progbar-overrun); float: right; } .progress a.over:hover { background: var(--lbl-overdue-major) } .progress_na div { height: 12px; } .progress_task_na div { background: var(--costs-task-highlight); background: linear-gradient(to right, var(--costs-task-highlight) 5%, var(--trans) 15%, var(--trans) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=var(--colors-interblue-400), endColor=0, GradientType=1); } .progress_time_na div { background: var(--costs-time-easy); background: linear-gradient(to right, var(--costs-time-easy) 5%, var(--trans) 15%, var(--trans) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=var(--colors-purple-400), endColor=0, GradientType=1); } .progress_money_na div { background: var(--costs-money-easy); background: linear-gradient(to right, var(--costs-money-easy) 5%, var(--trans) 15%, var(--trans) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=var(--colors-teal-400), endColor=0, GradientType=1); } span.over_cnt { color: var(--base-txt-btn-w); margin: 0 0 0 5px; } a.over_cnt { color: var(--base-txt-btn-w) !important; margin: 0 0 0 5px; } a.over_cnt:hover { color: var(--base-btn-alert-primary-major) } .sum_progress .td_name .limit { float: left; margin: 2px 10px; width: 50px; font: 11px/16px var(--font-base); } .sum_progress .td_name .limit a { color: var(--base-txt-tertiary); border-bottom: 1px dashed } .sum_progress .td_name .limit a:hover { color: var(--base-txt-link-minor) } body.desktop .sum_progress .td_name .limit { opacity: 0 } body.desktop .sum_progress:hover .td_name .limit { opacity: 1 } /*--------------------------------------------------------------------------------------------------------------------*/ .progress2 { height: 2px; display: none } .dataadd_out .limit .time_act .progress2 { display: block } .dataadd_out .limit .money_act .progress2 { display: block } .progress2 div { float: left; height: 1px; background: var(--base-btn-primary-major) } .progress2_over div, .progress2_over2 div { float: right } .progress2_over.progress2_time, .progress2_over2.progress2_time { box-shadow: 0 1px var(--costs-time-minor) inset } .progress2_over.progress2_hlt_b, .progress2_over2.progress2_hlt_b { box-shadow: 0 1px var(--base-hlt-b-invert-major) inset } .progress2_over.progress2_hlt_g, .progress2_over2.progress2_hlt_g { box-shadow: 0 1px var(--base-hlt-g-invert-major) inset } .progress2_over.progress2_money, .progress2_over2.progress2_money { box-shadow: 0 1px var(--costs-money-minor) inset } .progress2 div.p2 { height: 2px } .progress2 div:last-child { margin-right: -100% } .progress2_over div:last-child, .progress2_over2 div:last-child { margin-right: 0; margin-left: -100% } .progress2_time div.p1 { background: var(--costs-time-minor) } .progress2_hlt_b div.p1 { background: var(--base-hlt-b-invert); } .progress2_hlt_g div.p1 { background: var(--base-hlt-g-invert); } .progress2_money div.p1 { background: var(--costs-money-minor) } .progress2_over div.p1 { background: var(--base-btn-alert-primary-minor); height: 1px; } .progress2_over2 div.p1 { background: var(--base-txt-alert-minor); height: 2px; } .progress2_time div.p2 { background: var(--costs-time-major) } .progress2_hlt_b div.p2 { background: var(--colors-pine-700); } .progress2_hlt_g div.p2 { background: var(--costs-timer-play); } .progress2_money div.p2 { background: var(--costs-money-major) } .progress2_over div.p2 { background: var(--base-txt-alert-minor); height: 2px; } .progress2_nofill div { height: 2px !important } .progress2_over.progress2_time.progress2_nofill, .progress2_over2.progress2_time.progress2_nofill { box-shadow: 0 2px var(--costs-time-minor) inset } .progress2_over.progress2_hlt_b.progress2_nofill, .progress2_over2.progress2_hlt_b.progress2_nofill { box-shadow: 0 2px var(--base-hlt-b-invert-major) inset } .progress2_over.progress2_hlt_g.progress2_nofill, .progress2_over2.progress2_hlt_g.progress2_nofill { box-shadow: 0 2px var(--base-hlt-g-invert-major) inset; } .progress2_over.progress2_money.progress2_nofill, .progress2_over2.progress2_money.progress2_nofill { box-shadow: 0 2px var(--costs-money-minor) inset } /*--------------------------------------------------------------------------------------------------------------------*/ .pie { width: 26px; height: 26px; float: right; position: relative } .pie:after { content: ''; position: absolute; left: 5px; top: 5px; width: 16px; height: 16px; position: absolute; overflow: hidden; border-radius: 8px; background: var(--base-cont-low); display: block; } .pie div { position: absolute; left: 0; top: 0; width: 26px; height: 26px; position: relative; overflow: hidden; border-radius: 15px; } .pie u { position: absolute; left: 0; top: 0; border-left: 13px solid transparent; border-right: 13px solid transparent; height: 26px; display: block; } .pie .p1 { border-left-color: var(--costs-progbar-major); border-right-color: var(--costs-time-minor) } .pie .p2 { border-left-color: transparent; border-right-color: var(--costs-progbar-major); } .pie .p3 { border-left-color: var(--costs-time-minor); border-right-color: var(--costs-progbar-major) } .pie .p4 { border-left-color: var(--costs-progbar-major); border-right-color: transparent } .pie .p5 { border-left-color: transparent; border-right-color: var(--costs-time-minor) } .pie_over .p1 { border-left-color: var(--costs-progbar-overrun); border-right-color: var(--costs-time-minor) } .pie_over .p2 { border-left-color: transparent; border-right-color: var(--costs-progbar-overrun) } .pie_over .p3 { border-left-color: var(--costs-time-minor); border-right-color: var(--costs-progbar-overrun) } .pie_over .p4 { border-left-color: var(--costs-progbar-overrun); border-right-color: transparent } .pie_over .p5 { border-left-color: transparent; border-right-color: var(--costs-time-minor) } .pie_money .p1 { border-left-color: var(--costs-progbar-major); border-right-color: var(--costs-money-minor) } .pie_money .p2 { border-left-color: transparent; border-right-color: var(--costs-progbar-major) } .pie_money .p3 { border-left-color: var(--costs-money-minor); border-right-color: var(--costs-progbar-major) } .pie_money .p4 { border-left-color: var(--costs-progbar-major); border-right-color: transparent } .pie_money .p5 { border-left-color: transparent; border-right-color: var(--costs-money-minor) } .pie_money_over .p1 { border-left-color: var(--costs-progbar-overrun); border-right-color: var(--costs-money-minor) } .pie_money_over .p2 { border-left-color: transparent; border-right-color: var(--costs-progbar-overrun) } .pie_money_over .p3 { border-left-color: var(--costs-money-minor); border-right-color: var(--costs-progbar-overrun) } .pie_money_over .p4 { border-left-color: var(--costs-progbar-overrun); border-right-color: transparent } .pie_money_over .p5 { border-left-color: transparent; border-right-color: var(--costs-money-minor) } .pie_done .p1 { border-left-color: var(--costs-progbar-major); border-right-color: var(--costs-task-minor) } .pie_done .p2 { border-left-color: transparent; border-right-color: var(--costs-progbar-major) } .pie_done .p3 { border-left-color: var(--costs-task-minor); border-right-color: var(--costs-progbar-major) } .pie_done .p4 { border-left-color: var(--costs-progbar-major); border-right-color: transparent } .pie_done .p5 { border-left-color: transparent; border-right-color: var(--costs-task-minor) } .pie_done_over .p1 { border-left-color: var(--costs-progbar-overrun); border-right-color: var(--costs-task-minor) } .pie_done_over .p2 { border-left-color: transparent; border-right-color: var(--costs-progbar-overrun) } .pie_done_over .p3 { border-left-color: var(--costs-task-minor); border-right-color: var(--costs-progbar-overrun) } .pie_done_over .p4 { border-left-color: var(--costs-progbar-overrun); border-right-color: transparent } .pie_done_over .p5 { border-left-color: transparent; border-right-color: var(--costs-task-minor) } .pie i { position: absolute; left: -1px; top: -1px; width: 24px; height: 24px; overflow: hidden; border-radius: 16px; border: 2px solid var(--base-cont-low); display: block; } .pie_na { background: var(--costs-progbar-major); width: 24px; height: 24px; margin: 1px; float: right; position: relative; border-radius: 12px; } .pie_na div { position: absolute; background: var(--costs-time-minor); left: 6px; top: 6px; width: 12px; height: 12px; position: relative; overflow: hidden; border-radius: 15px; } .pie_money_na div { background: var(--costs-money-minor); } /* ----------- SVG BAGEL ---------- */ .pie_svg { position: absolute } #pay_history .pie_svg { width: 80px; height: 80px; left: 50%; top: 0; margin: 0 0 0 -40px } .pie_svg circle.fill { stroke: var(--costs-progbar-major) } .pie_svg circle.draw, .path_svg { animation: piesvg 1s ease-out forwards } .pie_svg.pie_time circle.draw, .pie_svg.pie_time_over circle.draw { stroke: var(--costs-time-major) } .pie_svg.pie_done circle.draw, .pie_svg.pie_done_over circle.draw { stroke: var(--costs-task-minor) } .pie_svg.pie_money circle.draw, .pie_svg.pie_money_over circle.draw { stroke: var(--costs-money-major) } .pie_svg.pie_over circle.draw_over { stroke: var(--costs-progbar-overrun); animation: piesvg 1s; animation-delay: 1s; animation-fill-mode: both; } @keyframes piesvg { 0% { stroke-dasharray: var(--dasharray-start) } } .pie_svg.pie_task circle.draw { stroke: var(--costs-task-minor) } .pie_time circle.fill { stroke: var(--costs-time-easy); } .pie_money circle.fill { stroke: var(--costs-money-easy); } /* ----------- SVG BAGEL ---------- */ /*--------------------------------------------------------------------------------------------------------------------*/ /* ----------- NEW CLASSES ------------- */ .inputBlock__costs.inputBlock__task-reopen { padding-bottom: 4px; } .inputBlock__task-reopen .inputBlock__label { border-radius: 8px; } .inputBlock__task-reopen .inputBlock__label.has-textarea textarea { font: 15px / 20px var(--font-base); } .inputBlock__costs { padding: 20px 28px 28px 28px; .inputBlock { padding: 0; } .inputBlock__item { height: 60px; overflow: hidden; padding: 8px; display: grid; align-items: center; background: unset; border: 1px dashed var(--base-txt-muted); border-radius: 12px; box-sizing: border-box; ws-icon { --icon-color: var(--base-txt-muted); } .inputBlock__item__text { display: flex; gap: 4px; font: var(--font-ui-16-title-3-reg); padding: 0 4px 0 8px; grid-area: 1 / 1; transition-property: opacity; transition-duration: .3s; transition-timing-function: ease; color: var(--base-txt-muted); } .inputBlock__item__text-hidden { opacity: 0; } &:hover { .inputBlock__item__text:has(~ .inputBlock__item__text-hidden) { opacity: 0; } .inputBlock__item__text-hidden { color: var(--base-txt-primary); opacity: 1; ws-icon { --icon-color: var(--base-txt-btn-a); } } } } } .inputBlock__special-rate:not(:focus-within) .label-icons-top { display: flex; align-items: center; justify-content: center; } .inputBlock__special-rate .label ws-icon svg { fill: var(--base-txt-tertiary); width: 16px; height: 16px; } .inputBlock__label.inputBlock__special-rate input[type=text] { padding: 25.5px 12px 10.5px 12px; } .inputBlock__special-rate:not(:focus-within) input:not(:placeholder-shown) + .label { display: none; } .inputBlock__special-rate:focus-within .label { display: inline-flex; width: calc(100% + 24px); max-width: calc(100% + 24px); left: 2px; right: 0; flex-grow: 1; align-items: center; justify-content: center; pointer-events: all; gap: 2px; } .inputBlock__special-rate .input { text-align: center; } .inputBlock__special-rate:not(:focus-within) .input { color: var(--base-txt-tertiary) !important; } .inputBlock__special-rate:not(:focus-within) .label ws-icon { display: none; } .inputBlock__special-rate .label-icons-top { top: 3px !important; left: 0 !important; right: 0 !important; display: none; } .inputBlock .inputBlock__special-rate .text-label-left { position: absolute; top: 28.5px; left: 0; right: 0; text-align: center; padding: 0 12px 10.5px 14px; color: transparent; pointer-events: none; } .inputBlock .inputBlock__special-rate .text-label-left::before { content: '×'; display: none; margin-left: -20px; font: var(--font-ui-16-title-3-reg); color: var(--base-txt-tertiary); } .inputBlock .inputBlock__special-rate:not(:focus-within) input:not([type="hidden"]):not(:placeholder-shown) ~ .text-label-left::before { display: inline-block; } .inputBlock__costs:not(.inputBlock__costs-timeListHide) .inputBlock-hideByTimeList { display: none; } .inputBlock__costs-warning { display: none; } .sum_progress { margin: 0; padding: 12px 20px; height: 36px; } .sum_progress + p.graysmall { border-top: 1px dashed var(--base-line-primary); } /*.sum_progress_w {background:var(--base-cont-top); border-top:none;margin:-15px -15px 0; }*/ .sum_progress_b { margin: 0; border-bottom: none; } .sum_progress .r { float: right; text-align: center; margin: 7px 0 0 0 } .sum_progress .ico_summ { float: left; font: 30px/30px var(--font-serif); color: var(--base-txt-tertiary); width: 20px } .sum_progress .bar { float: left; margin: 4px 0 0 15px } .sum_progress_bm .bar { margin: 0 } .sum_progress .td_name { float: left; width: 200px; height: 36px } .sum_progress_b .bar { float: none; height: 12px; margin: 4px 0 } .sum_progress .bar .progress { margin: 4px 0 0 0 } .sum_progress_b .bar .progress { margin: 0 0 0 15px } .sum_progress_bm .bar .progress { margin: 0 0 0 50px } .sum_progress_b .bar .b_br { color: var(--base-txt-secondary); font: 500 12px/12px var(--font-base); margin: 0 0 5px 15px; } .sum_progress_bm .bar .b_br { float: left; width: 40px; text-align: right; margin: 0 5px 0 0 } .sum_progress .bar .b_fl { font: 11px/12px var(--font-base); color: var(--base-txt-secondary) } .sum_progress_b .bar .b_fl { display: none } .sum_progress .bar .b_fl b { font-weight: normal; color: var(--base-txt-primary) } .sum_progress_b:hover .bar .b_fl { margin: 0 0 0 15px; display: block; color: var(--base-txt-tertiary) } .sum_progress_b.sum_progress--bar-visible .bar .b_fl { display: none !important } .sum_progress_b.sum_progress--bar-visible:hover .bar .progress { display: block } .sum_progress_bm:hover .bar .b_fl { margin: 0 0 0 50px } .sum_progress_b:hover .bar .progress { display: none } .sum_progress input.button { float: right; margin: 3px 0 -3px 0 !important; font: 16px var(--font-base) } .sum_progress .td_time, .sum_progress .td_money { min-width: 86px; font: 24px/20px var(--font-base); color: var(--base-txt-secondary); text-align: right; position: relative; box-sizing: border-box; padding: 0 8px; font-variant-numeric: proportional-nums; } .sum_progress .td_money { width: auto; color: var(--costs-money-text); } .sum_progress .td_rate ~ .td_money { min-width: 142px; } .sum_progress .td_time { color: var(--costs-time-text); } .sum_progress .td_time i, .sum_progress .td_money i { position: absolute; color: var(--base-txt-tertiary); font: 14px/16px var(--font-base); right: -35px; top: 5px; width: 30px; text-align: left } .modal__content .sum_progress .td_time i, .sum_progress .td_money i { position: relative; right: 0; top: 0; padding-left: 5px } .sum_progress .bar a.onch { color: inherit; border-bottom: 1px dashed } .sum_progress .bar a.onch:hover { color: var(--base-txt-btn-a); } @media (max-width: 640px) { .modal__dataTable__summary.sum_progress_b .td_name > * { display: none; } } @media (max-width: 480px) { .sum_progress .r { display: none } } @media (max-width: 360px) { .sum_progress { height: auto; padding-bottom: 5px; min-height: 46px; } .sum_progress .bar { float: none; margin: 0 0 10px 40px; } } .inputBlock__costs.inputBlock__costs-timeListHide ~ .buttons ws-btn.time_list_btn { display: none; } .inputBlock__costs ~ .buttons ws-btn.time_list_btn { float: left; display: inline-block; margin: 0 !important } .inputBlock__costs ~ .buttons ws-btn.time_list_btn .progress_block { display: inline-block; margin: -4px 0 0 4px; } .inputBlock__costs ~ .buttons ws-btn.time_list_btn .progress, .inputBlock__costs ~ .buttons ws-btn.time_list_btn .progress_na { width: 50px; height: 3px; border-radius: 10px; margin-top: 5px } .inputBlock__costs ~ .buttons ws-btn.time_list_btn .ico_summ { transform: scale(0.78) } .inputBlock__costs.inputBlock__costs-timeListHide ws-btn.time_list_btn { display: none; } .inputBlock__costs ws-btn.time_list_btn { float: left; display: inline-block; margin: 0 !important } .inputBlock__costs ws-btn.time_list_btn .progress_block { display: inline-block; margin: -4px 0 0 4px; } .inputBlock__costs ws-btn.time_list_btn .progress, .inputBlock__costs ws-btn.time_list_btn .progress_na { width: 50px; height: 3px; border-radius: 10px; margin-top: 5px } .inputBlock__costs.time_or_money ws-btn.time_list_btn { padding: 7px 10px 7px 3px } .inputBlock__costs.time_or_money ws-btn.time_list_btn .progress_block { vertical-align: top } .inputBlock__costs.time_or_money ws-btn.time_list_btn .progress, .inputBlock__costs.time_or_money ws-btn.time_list_btn .progress_na { margin-top: 8px } .inputBlock__costs ws-btn.time_list_btn .ico_summ { transform: scale(0.78) } .inputBlock__costs .inputBlock-tdPlan { cursor: pointer; } .inputBlock__costs .inputBlock-tdPlan .setupBlock__text ws-icon { float: right; } .modal .time_list_body { padding-bottom: 8px; } .modal .time_list_body .modal__dataTable.modal__dataTable-costs { padding: 0; } .modal .time_list_body .modal__dataTable__head { padding: 0 20px; } .modal .time_list_body .modal__dataTable-costs .modal__dataTable__item { padding: 0 20px 0 28px; } .modal .time_list_body .modal__dataTable-costs .modal__dataTable__item:hover { .td_time:not(:focus-within) { background: var(--costs-time-highlight); &:last-child { box-shadow: 20px 20px 0 20px var(--costs-time-highlight); } .input { background: unset; } } .td_money:not(:focus-within) { background: var(--costs-money-highlight); &:last-child { box-shadow: 20px 20px 0 20px var(--costs-money-highlight); } .input { background: unset; } } } body.mobile .modal .time_list_body .modal__dataTable-costs .modal__dataTable__item, .modal .time_list_body .modal__dataTable-costs .modal__dataTable__item:nth-last-child(3) /* skip ps__rail-x/ps_-y */ { height: auto; align-items: stretch; .td_name { textarea { position: static; } } .td_date, .td_name, .td_prior, .td_term, .td_stage, .td_time, .td_money, .td_rate, .td_stage, .td_user { height: auto; min-height: 40px; } } .modal .time_list_body .modal__dataTable-costs .modal__dataTable__item:first-child { box-shadow: 0 -0.5px 0 var(--base-line-tertiary) inset; } .modal .time_list_body .scrollZone-top { box-shadow: none; } .modal .time_list_body .scrollZone-bottom.scrollZone-top { box-shadow: 0 var(--screen-px) var(--base-line-tertiary); } .modal .time_list_body .scrollZone { margin-top: 0; } .modal__dataTable.modal__dataTable-costs { max-height: 600px; padding: 0 20px 0 20px; } .modal__dataTable-costs .modal__dataTable__item.subtask_costs .td_time, .modal__dataTable-costs .modal__dataTable__item.subtask_costs .td_money { font-weight: 600; justify-content: end; } .modal__dataTable-costs .modal__dataTable__item.subtask_costs .td_name { display: flex; align-items: center; font: var(--font-ui-13-small-semi); } .modal__dataTable-costs .modal__dataTable__item.subtask_costs .td_ico { --icon-color: var(--base-txt-btn-a); } .modal__dataTable-costs .modal__dataTable__item .td_ico_vs .button-delete { display: none; width: 24px; } .modal__dataTable-costs .td_name textarea { width: 100%; height: 40px; padding: 12px 9px; min-height: 16px; max-height: 150px; font: var(--font-ui-14-regular-reg); line-height: 16px; background-color: transparent; resize: none; outline: none; border: none; border-radius: 0; box-sizing: border-box; position: absolute; left: 0; top: 0; right: 0; } .modal__dataTable-costs .td_name.editing textarea { box-shadow: 0 0 0 2px var(--base-txt-btn-a) inset; background: var(--base-cont-mod-top) } .modal__dataTable-costs .td_name textarea.hide { display: none } .modal__dataTable-costs .td_name a.costs_comment { white-space: nowrap; text-overflow: ellipsis; line-height: 16px; color: var(--base-txt-secondary); cursor: default } .modal__dataTable-costs .td_name div.costs_comment_block { padding: 4px 0 4px 5px } .modal__dataTable-costs .td_name div.costs_comment_block.hide { padding: 0 } .modal__dataTable-costs .td_name a.costs_comment.onch { cursor: pointer } .modal__dataTable-costs .modal__dataTable__item:hover .td_name a.costs_comment.onch { border-bottom: 1px dashed var(--base-txt-tertiary) } .modal__dataTable-costs .td_name a.hide { display: none } .modal__dataTable-costs .timer_place { --icon-color: var(--costs-time-text); --icon-size: 16px; text-align: right; position: absolute; left: 0; top: 10px; } body.desktop .modal__dataTable-costs .modal__dataTable__item:hover .td_ico_vs .av_sm { display: none } body.desktop .modal__dataTable-costs .modal__dataTable__item:hover .td_ico_vs .button-delete { display: block; } body.mobile .modal__dataTable-costs .modal__dataTable__item .td_ico_vs .button-delete { display: none } body.mobile .modal__dataTable-costs .modal__dataTable__item .td_time .rate { display: none } .modal__dataTable-costs .modal__dataTable__item .td_name { font: var(--font-ui-13-small-reg); color: var(--base-txt-primary); position: relative; height: 40px; } .modal__dataTable-costs .modal__dataTable__item .td_name:has(:focus) { overflow: visible; } .modal__dataTable-costs .modal__dataTable__item .td_name a { color: var(--base-txt-primary) } .modal__dataTable-costs .modal__dataTable__item .td_name i { color: var(--base-txt-tertiary) } .modal__dataTable-costs .modal__dataTable__item .td_name form { padding: 0 40px 0 0; position: relative; margin: -4px 0 -4px 0; } .modal__dataTable-costs .modal__dataTable__item .td_time, .modal__dataTable-costs .modal__dataTable__item .td_money { font: var(--font-ui-13-small-reg); text-align: right; } .modal__dataTable-costs .modal__dataTable__item .td_time { color: var(--costs-time-text); } .modal__dataTable-costs .modal__dataTable__item .td_money { color: var(--costs-money-text); } .modal__dataTable-costs .modal__dataTable__item .td_date { cursor: pointer; width: 60px; font: 11px/20px var(--font-base); color: var(--base-txt-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; justify-content: flex-end; padding: 0 8px; } .modal__dataTable-costs .modal__dataTable__item .td_date span.date1 { display: inline-block; position: relative; padding: 1px 3px; box-shadow: 0 0 0 1px var(--lbl-today-minor); border-radius: 3px; } .modal__dataTable-costs .modal__dataTable__item .td_date span.date2 { display: inline-block; position: relative; padding: 0 3px; box-shadow: 0 0 0 1px var(--lbl-yesterday-minor); border-radius: 3px } .modal__dataTable-costs .modal__dataTable__item .td_date span.detailed_date_day { display: inline-block; width: 12px; text-align: right } .modal__dataTable-costs .modal__dataTable__item .td_date span { font: var(--font-ui-11-micro-reg); } .modal__dataTable-costs .modal__dataTable__item .td_date span.detailed_date_month { display: inline-block } .modal__dataTable-costs .modal__dataTable__item .td_user { display: none !important; position: absolute; top: 5px; right: 200px; width: 110px; font: 11px/20px var(--font-base); color: var(--base-txt-tertiary); text-align: right; white-space: nowrap; overflow: hidden } .modal__dataTable-costs .td_time .input, .modal__dataTable-costs .td_money .input { text-align: right; width: 100%; padding: 0 8px; margin: 0 -8px; font: inherit; border: none; background: transparent; color: inherit; height: 40px; box-sizing: border-box; flex-grow: 1; border-radius: 0; } body.desktop .modal__dataTable-costs .modal__dataTable__item:hover .td_time .input, body.mobile .modal__dataTable-costs .modal__dataTable__item .td_time .input { background: var(--costs-time-highlight) } body.desktop .modal__dataTable-costs .modal__dataTable__item.subtask_costs:hover .td_time .input, body.desktop .modal__dataTable-costs .modal__dataTable__item.subtask_costs:hover .td_money .input { background: none } body.desktop .modal__dataTable-costs .modal__dataTable__item:hover .td_money .input, body.mobile .modal__dataTable-costs .modal__dataTable__item .td_money .input { background: var(--costs-money-highlight) } body.desktop .modal__dataTable-costs .td_time .input:focus { box-shadow: 0 0 0 2px var(--costs-time-text) inset !important; background: var(--menu-inp-cont) !important; position: relative; } body.desktop .modal__dataTable-costs .td_time .input::selection { background: var(--costs-time-easy); } body.desktop .modal__dataTable-costs .td_money .input:focus { box-shadow: 0 0 0 2px var(--costs-money-text) inset !important; background: var(--menu-inp-cont) !important; position: relative; } body.desktop .modal__dataTable-costs .td_money .input::selection { background: var(--costs-money-easy); } body.desktop .modal__dataTable-costs .modal__dataTable__item:hover .td_rate:has(.sw_pre) { background: var(--costs-money-highlight); } body.desktop .modal__dataTable-costs .modal__dataTable__item:has(.sw_act):hover .td_rate { background: linear-gradient(90deg, var(--costs-time-highlight), var(--costs-money-highlight)); } body.mobile .modal__dataTable-costs .modal__dataTable__item .td_rate:has(.sw_pre) { background: var(--costs-money-highlight); } body.mobile .modal__dataTable-costs .modal__dataTable__item:has(.sw_act) .td_rate { background: linear-gradient(90deg, var(--costs-time-highlight), var(--costs-money-highlight)); } .modal__dataTable-costs .modal__dataTable__item:hover .td_date_vs span, .modal__dataTable-costs .modal__dataTable__item.modal__dataTable__item-joinPossible .td_date span { display: none } .modal__dataTable-costs a.join_but { display: none; background: var(--flt-act-bg); color: var(--base-txt-primary); padding: 0 3px; border-radius: 3px; font: 11px/18px var(--font-base) } .modal__dataTable-costs .modal__dataTable__item-joinPossible a.join_but { display: none; } .modal__dataTable-costs .modal__dataTable__item:hover a.join_but { display: inline-block; background: var(--base-txt-link-major); color: var(--white-accent) } .modal__dataTable-costs span.ico_timer { background: url(/assets/img/color/iconset.svg) no-repeat -80px -242px; opacity: 0.8; } .modal__dataTable-costs span.ico_time { background: none; /*url(/img/color/iconset.svg) no-repeat -40px -20px; opacity:0.7*/ } .modal__dataTable-costs .td_time { position: relative } body.desktop .modal__dataTable-costs .modal__dataTable__item:hover .td_time .rate { display: inline } .modal__dataTable-costs .modal__dataTable__item_edited .td_time .rate { display: none !important } .modal[data-group=time] { .modal__content { overflow: unset; } .sum_progress .td_time, .sum_progress .td_money { font: var(--font-ui-22-title-1-semi); } .sum_progress .td_money .cents { color: var(--costs-money-minor); font: var(--font-ui-18-title-2-reg); } } @media (max-width: 640px) { .modal__dataTable-costs.modal__dataTable-costsWithMoney .td_user { display: none } } @media (max-width: 560px) { } @media (max-width: 480px) { .modal__dataTable__summary-costsWithMoney .td_money { min-width: 60px; box-sizing: content-box; } .modal__dataTable__head.modal__dataTable__head-costsWithMoney .td_money, .modal__dataTable-costsWithMoney .modal__dataTable__item .td_money { width: 60px; } .modal__dataTable__summary-costsWithMoney .td_time { min-width: 46px; box-sizing: content-box; } .modal__dataTable__head.modal__dataTable__head-costsWithMoney .td_time, .modal__dataTable-costsWithMoney .modal__dataTable__item .td_time { width: 46px; } .modal__dataTable-costsWithMoney .modal__dataTable__item .td_time .td_ico { width: 20px; } .modal__dataTable__summary-costsWithMoney .td_rate ~ .td_money { min-width: 116px; box-sizing: content-box; } .modal__dataTable__head.modal__dataTable__head-costsWithMoney .td_rate ~ .td_money { width: 116px; } .sum_progress_b, .sum_progress_b { padding-left: 8px; padding-right: 4px; } .modal .time_list_body .modal__dataTable__head { padding: 0 4px 0 8px; } .modal .time_list_body .modal__dataTable-costs .modal__dataTable__item { padding: 0 4px 0 8px; } .modal__dataTable-costs .td_user { display: none } .modal[data-group=time] { background-color: var(--base-cont-mod-low); } .modal[data-group=time] .modal__header { background-color: var(--base-cont-mod-low) } .modal__content .modal__taskClose .sum_progress_bm .td_name, .modal__content .modal__taskClose .sum_progress_b .td_name { display: none } .modal__content .modal__taskClose .sum_progress_bm { height: auto; padding-bottom: 5px; min-height: 46px; } .sum_progress_bm .ico_summ { display: none } .modal__content .modal__taskClose .sum_progress_bm .td_time, .modal__content .modal__taskClose .sum_progress_bm .td_money { margin: 10px 10px 0 0; width: auto } .sum_progress_b { /* padding-bottom: calc(5px + var(--sa-bot)) */ } } /*--------------------------------------------------------------------------------------------------------------------*/ .setLimits.editBlock .editBlock__text svg { fill: var(--base-txt-alt-info); } .setLimits.editBlock .editBlock__text { color: var(--base-txt-alt-info); } .setLimits.editBlock .editBlock__text { padding: 6px 0; } /* new grid styles */ .modal__dataTable-costs .modal__dataTable__item { } .modal__dataTable-costs .modal__dataTable__item .td_time { display: flex; position: relative; } .modal__dataTable-costs .modal__dataTable__item .td_ico { width: 30px; } .modal__dataTable-costs .modal__dataTable__item .td_time .input { width: 60px; } .modal__dataTable-costs .modal__dataTable__item .td_money .input { width: 70px; } .modal__dataTable-costs .modal__dataTable__item .td_ico_vs { position: relative; } .modal__dataTable-costs .td_time .rate { position: relative; display: block; opacity: 0; inset: 0; margin-right: 16px; } .modal__dataTable-costs .modal__dataTable__item:hover .td_time .rate { opacity: 1; } .modal__dataTable-costs .modal__dataTable__item .td_name {} .modal__dataTable-costs .modal__dataTable__item .td_name.editing .costs_comment_block, .modal__dataTable-costs .modal__dataTable__item .td_name.editing .costs_comment.onch { display: none; } .modal__dataTable-costs .modal__dataTable__item .td_name.editing textarea { display: inline-block; } .modal__dataTable-costs .td_name textarea { } .modal__dataTable-costs .td_name a { display: block; } .modal__dataTable-costs .td_time .rate:before { pointer-events: none; } .modal__dataTable-costs .td_time .rate:before, .modal__dataTable-costs .td_time .rate:after { } .modal__dataTable-costs .modal__dataTable__item > *:not(:is(.td_name, .td_user)) { display: flex; align-items: center; } .modal__dataTable-costs .modal__dataTable__item .td_date { gap: 2px; height: 40px; } .modal__dataTable-costs .modal__dataTable__item .td_date a { color: inherit } .modal__dataTable-costs .modal__dataTable__item .timer_place { justify-content: center; } .modal__dataTable-costs .modal__dataTable__item .td_date .detailed_date_wrapper { border-bottom: 1px dashed transparent; line-height: 1; } .modal__dataTable-costs .modal__dataTable__item .td_date:hover .detailed_date_wrapper { border-bottom-color: var(--base-txt-tertiary); } body.mobile .modal__dataTable-costs .modal__dataTable__item .td_name a.costs_comment.onch:not(:has(i)), .modal__dataTable-costs .modal__dataTable__item:hover .td_name a.costs_comment.onch:not(:has(i)) { } .modal__dataTable__inlineDlete { position: absolute; display: none; left: 0; } .modal__dataTable-costs .but_cancel2, .modal__dataTable-costs .but_delete2 { display: flex; align-items: center; justify-content: center; height: 20px; box-sizing: border-box; padding-inline: 10px; font: 11px/16px var(--font-base); border-radius: 10px; } .modal__dataTable-costs .but_cancel2 { /* border: 1px solid var(--base-txt-tertiary); */ color: var(--base-txt-tertiary); } .modal__dataTable-costs .but_delete2 { background: var(--base-btn-alert-primary-minor); color: var(--white-accent); } .modal__dataTable-costs .but_delete2:hover { background: var(--base-btn-alert-primary-major); } .modal__dataTable-costs .pre_delete .modal__dataTable__inlineDlete { display: flex; gap: 4px; z-index: 1; } .modal__dataTable-costs .pre_delete .button-delete, .modal__dataTable-costs .pre_delete .av_sm { display: none !important; } .modal__dataTable-costs .pre_delete .td_name { opacity: 0; } @media (max-width: 640px) { .modal__dataTable-costs .modal__dataTable__item:has(.td_name.editing textarea) .td_ico, .modal__dataTable-costs .modal__dataTable__item:has(.td_name.editing textarea) .td_date, .modal__dataTable-costs .modal__dataTable__item:has(.td_name.editing textarea) .td_time, .modal__dataTable-costs .modal__dataTable__item:has(.td_name.editing textarea) .td_rate, .modal__dataTable-costs .modal__dataTable__item:has(.td_name.editing textarea) .td_money { display: none; } .modal__dataTable-costs .modal__dataTable__item:not(.subtask_costs) .td_name { grid-column: 2 / span 4; grid-row: 2; padding-top: 0; padding-right: 0; } .modal__dataTable-costs .td_name > * { width: 100%; } .modal__dataTable-costs .td_name textarea { margin: 0 0 -2px -5px; } .modal__dataTable-costs .td_name div.costs_comment_block { padding-left: 0; } .modal__dataTable-costs .modal__dataTable__item .td_date { width: unset; } .modal__dataTable-costs .pre_delete .td_date { opacity: 0; } .modal__dataTable-costs .modal__dataTable__item.subtask_costs .td_date { display: none; } } .modal__dataTable-costs .modal__dataTable__item:hover { } .modal__dataTable-costs .modal__dataTable__item .td_rate { justify-content: start; } .modal__dataTable-costs .modal__dataTable__item .td_rate a { color: var(--base-txt-secondary); display: flex; flex-direction: row-reverse; gap: 4px; align-items: center; } .modal__dataTable-costs .modal__dataTable__item .td_rate .sw { /* float:left; */ margin: -1px; transform: scale(0.8); } .modal__dataTable-costs .modal__dataTable__item .td_rate .sw_pre font:before { content: '×'; margin-right: 2px; } .modal__dataTable-costs .modal__dataTable__item:not(:hover) .td_rate .sw_pre .sw { display: none } .modal__dataTable-costs .modal__dataTable__item:not(:hover) .td_rate .sw_pre:not(.sw_act) font { color: var(--base-txt-tertiary); text-decoration: line-through var(--base-txt-alert-major); display: none } .modal__dataTable-costs .td_rate .sw_act .sw { background: var(--costs-money-text); /* var(--costs-money-text);*/ } #setup .slackAutomations { font-size: 14px; } #setup .slackAutomations p { margin: 0 0 10px } #setup .slackAutomations__item { margin: 15px 0 0; padding-top: 40px; position: relative; } #setup .slackAutomations__item:first-child { margin: 5px 0 5px } #setup .slackAutomations__item .name { position: absolute; left: 0; top: 0; height: 32px; line-height: 32px; } #setup .slackAutomations .button_l { margin: 0 8px 0 0 } #setup .slackAutomations .button .av_sm { float: left; margin: -2px 10px -2px -10px; border-radius: 2px } #setup .slackAutomations .delete { display: none } #setup .slackAutomations__item:hover .delete { display: block } #setup .slackAutomations .line { display: none; background: var(--base-line-ghost); margin: 15px 0; } #setup .slackAutomations .line:first-child, #setup .slackAutomations__item ~ .line { display: block; margin-bottom: 15px; } #setup .slackAutomations .line:first-child { margin-top: 0 } #setup .crmAutomations { } #setup .crmAutomations p { margin: 0 0 10px } #setup .crmAutomations__item { margin: 15px 0 0; position: relative; } #setup .crmAutomations__item { padding: 4px 0; } #setup .crmAutomations__item:first-child { margin: 5px 0 5px } #setup .crmAutomations .button_l { margin: 0 8px 0 0 } #setup .crmAutomations .button .av_sm { float: left; margin: -2px 10px -2px -10px; border-radius: 2px } #setup .crmAutomations .stage svg { fill: var(--base-txt-act-major); } #setup .crmAutomations .stage-1 svg { fill: var(--base-btn-fresh-minor); } #setup .crmAutomations .stage-2 svg { fill: var(--base-btn-alert-primary-minor); } #setup .crmAutomations__item ws-emoji { width: 16px; height: 16px; } #setup .crmAutomations__item .project ws-icon { margin: 0 6px 0 8px; } #setup .crmAutomations__item button i { font-style: normal; color: var(--base-txt-tertiary) } #setup .crmAutomations__item ws-icon[name=exclam_triangle-line] svg { fill: var(--base-btn-notice-major); } #setup .crmAutomations .condition { padding: 4px 8px; border-radius: 4px; color: inherit; background: var(--base-cont-low); display: inline-block; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: -8px; } #setup .crmAutomations .in { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0 30px 0 0; color: inherit; gap: 2px; } #setup .crmAutomations .in > ws-icon svg { fill: var(--base-txt-ghost); } #setup .crmAutomations .delete { display: none } #setup .crmAutomations .edit { display: none } #setup .crmAutomations__item:hover .delete, #setup .crmAutomations__item:hover .edit { display: block } #setup .crmAutomations .line { display: none; background: var(--base-line-ghost); margin: 15px 0; } #setup .crmAutomations .line:first-child, #setup .crmAutomations__item ~ .line { display: block; margin-bottom: 15px; } #setup .crmAutomations .line:first-child { margin-top: 0 } .crm_automations_details .stage:before { content: ''; float: left; width: 12px; height: 12px; margin: 4px 8px 0 0; border-radius: 12px; color: var(--white-accent); background: var(--base-btn-primary-minor); } .crm_automations_details .stage:empty:after { content: '. . .' } .crm_automations_details .stage-1:before { background: var(--base-txt-new-minor); } .crm_automations_details .stage-2:before { background: var(--base-btn-alert-primary-minor); } .crm_automations_details .inputBlock__components .date_place { border: 1px dashed var(--base-txt-tertiary); color: var(--base-txt-tertiary); font: 11px/20px var(--font-base); border-radius: 12px; padding: 2px 6px; height: 20px; } .crm_automations_details .inputBlock__components .date_place:not(.date_place-active) span:last-child { display: none; } .crm_automations_details .inputBlock__components .date_place-active span:first-child { display: none; } .crm_automations_details .inputBlock__components .date_place-active { border: 1px solid transparent; background: var(--base-hlt-hover); } .crm_automations_details .inputBlock__components .date_place-active input { width: 25px; text-align: center; border: none; background: transparent; font: bold 13px/20px var(--font-base); padding: 0; height: 20px; } .crm_automations_details .inputBlock__components .av_place { float: right; } .crm_automations_details .inputBlock__components .priorb { font: 11px/16px var(--font-base); height: 16px; width: 22px; } .crm_automations_details .equal { background: var(--base-cont-mod-top); position: relative; margin: 22px -25px 0 -25px; width: 30px; height: 30px; text-align: center; font: 24px/30px var(--font-base); border-radius: 4px; z-index: 1; display: none; } .crm_automations_details #drop_value .in, .crm_automations_details #drop_value_to .in { padding-left: 20px; } .crm_automations_details .inputBlock input.in { -webkit-appearance: none; } .crm_automations_details .inputBlock input.in::-webkit-calendar-picker-indicator { display: none !important } .crm_automations_details .step { margin: 0 0 10px; color: var(--base-txt-primary); font: var(--font-ui-16-title-3-semi); } .crm_automations_details .part { padding-left: 55px; padding-right: 30px; position: relative; padding-bottom: 20px; } .crm_automations_details .part > .ico_l { margin: -5px 0 0 -50px; } .crm_automations_details .part > .ws_grad { margin: -5px 0 0 -50px; width: 30px; height: 30px; float: left; } .crm_automations_details .part > .ws_grad svg { width: 30px; height: 30px; } .crm_automations_details .part-withLine:before { content: ''; position: absolute; top: 30px; bottom: 10px; left: 19px; border-right: 2px solid var(--base-txt-ghost); } .crm_automations_details .options { padding-left: 20px; } .crm_automations_details .field_tag { background: var(--base-cont-mod-top); font: var(--font-ui-12-mini-med); display: inline-block; padding: 2px 8px; border-radius: 12px; margin: 4px 0 0; max-width: 2000px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .crm_automations_details .inputBlock__components { border-top: 1px solid var(--base-line-secondary); display: flex; align-items: center; gap: 8px; padding: 12px 0; margin: 12px 14px 0; } .crm_automations_details .inputBlock__label-withComponents { display: block; height: auto; } .crm_automations_details #drop_project .in ws-icon { margin: 0 6px 0 0; } .crm_automations_details #drop_project .in ws-emoji { width: 16px; height: 16px; } .inputBlock__components > [data-container] { overflow: hidden; height: 40px; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; } .inputBlock__components > [data-container]:not([data-container=priority]) { flex-shrink: 1; } .inputBlock__components > [data-container]:not([data-container=priority]) > * { flex-shrink: 1; } .inputBlock__components > .in { font: 11px/20px var(--font-base); color: var(--base-txt-tertiary); font-variant: small-caps; } .inputBlock__components .data_place { font: 12px/22px var(--font-base); color: var(--base-txt-secondary); height: 22px; border: 1px dashed var(--base-txt-tertiary); padding: 0 10px; border-radius: 12px; display: inline-flex; overflow: hidden; } .inputBlock__components .data_place:hover { background: var(--base-hlt-b-hover); border-color: var(--base-hlt-b-invert); color: var(--base-hlt-b-invert); } .inputBlock__components .data { font: 12px/22px var(--font-base); color: var(--base-txt-secondary); height: 24px; border-radius: 12px; background: var(--base-cont-mod-low); max-width: 200px; overflow: hidden; } .inputBlock__components .data > .in { padding: 0 8px; color: var(--base-txt-tertiary); } .inputBlock__components .prior > .in { color: var(--white-primary); } .inputBlock__components .data > ws-icon { padding: 4px; margin: 0 0 0 -8px; } .inputBlock__components .data > .space ws-icon, .inputBlock__components .data > .space svg { width: 16px; height: 16px; } .inputBlock__components .data > .in b { font-weight: normal; color: var(--base-txt-primary); } .inputBlock__components .data:hover { background: var(--base-hlt-hover); }.dashboard { position: relative; gap: 24px; padding: 0; max-width: 1600px; margin: 0 auto; } .dashboard__none { display: none !important; } .dashboard__block__item-none { display: none !important; } .dashboard__modal { padding: 12px 0 0; } .dashboard__modal .dashboard__block { box-shadow: none; background: none; } .dashboard__row { gap: 24px; align-items: normal; position: relative; } .dashboard__block { position: relative; background: var(--base-cont-top); border-radius: 16px; box-shadow: var(--shadow-cont-minor-outline); width: 100%; box-sizing: border-box; } @keyframes dashboard__block--new { 0% { box-shadow: var(--shadow-brd-focus); } 95% { box-shadow: var(--shadow-brd-focus); } 100% { box-shadow: var(--shadow-cont-minor-outline); } } .dashboard__block--new { animation: dashboard__block--new 2s linear; } /*.dashboard__block:has(.keyboardZone-active) {*/ /* box-shadow: var(--shadow-brd-focus);*/ /*}*/ #content .dashboard-loading .dashboard__block .ps__rail-y { opacity: 0; } .dashboard__block-empty { height: auto !important; background: none; box-shadow: none; place-self: stretch; cursor: pointer; } .dashboard__block50.dashboard__block-empty { background: url(/assets/img/color/funybricks_color.svg) no-repeat center; box-shadow: 0 0 0 1px var(--base-line-tertiary) inset; } .dashboard__block33.dashboard__block-empty, .dashboard__block66.dashboard__block-empty { background: url(/assets/img/color/funybricks_color.svg) no-repeat center; background-size: 130px; box-shadow: 0 0 0 1px var(--base-line-tertiary) inset; } .dashboard__block33.dashboard__block-empty .dashboard__block__swapper ws-icon, .dashboard__block66.dashboard__block-empty .dashboard__block__swapper ws-icon { --icon-size: 100px; top: calc(50% - 100px); left: calc(50% - 50px); } .dashboard__block-gray { background: var(--base-cont-mid); } .dashboard__block-today:before, .dashboard__block-yesterday:before { content: ''; position: absolute; right:10px; top:10px; height:10px; width:10px; border-radius: 10px; } .dashboard__block-today { /* background: var(--lbl-today-major); */ } .dashboard__block-yesterday { background: var(--lbl-yesterday-major); } .dashboard__block50 { width: calc(50% - 12px); height: 350px; } .dashboard__block33 { width: calc(33.33% - 13.33px); } .dashboard__block66 { width: calc(66.67% - 6.67px); } .dashboard__block-selected .dashboard__block__swapper, .dashboard__block-transparent.dashboard__block-selected .dashboard__block__swapper, .dashboard__block-empty.dashboard__block-selected .dashboard__block__swapper { display: block; } .dashboard__block-selected .ps__rail-y, .dashboard__block-transparent.dashboard__block-selected .ps__rail-y, .dashboard__block-empty.dashboard__block-selected .ps__rail-y { display: none; } .dashboard__block-selected.route-updown .dashboard__block__swapper ws-icon[name="arrows/arrow_swap_sm"], .dashboard__block-transparent.dashboard__block-selected.route-updown .dashboard__block__swapper ws-icon[name="arrows/arrow_swap_sm"], .dashboard__block-empty.dashboard__block-selected.route-updown .dashboard__block__swapper ws-icon[name="arrows/arrow_swap_sm"] { display: block; } .dashboard__block-selected.route-leftright .dashboard__block__swapper ws-icon[name="arrows/arrow_swap_sm-turn"], .dashboard__block-transparent.dashboard__block-selected.route-leftright .dashboard__block__swapper ws-icon[name="arrows/arrow_swap_sm-turn"], .dashboard__block-empty.dashboard__block-selected.route-left-ight .dashboard__block__swapper ws-icon[name="arrows/arrow_swap_sm-turn"] { display: block; } .dashboard__block-transparent.dashboard__block-selected:before { box-shadow: none; } .dashboard__block__header { padding: 10px 12px 12px; align-items: flex-start; } .dashboard__block__header:has(.tabs) { padding: 10px 12px 2px; } .dashboard__block__header-bottom, .dashboard__block__header-bottomDynamic { box-shadow: 0 -1px var(--base-line-tertiary) inset; } .dashboard__block__body { height: 100%; max-height: calc(100% - 56px); padding: var(--sp_fix_02) 0 var(--sp_fix_08); overflow: hidden; box-sizing: border-box; } .dashboard__block__content { padding: var(--sp_fix_06) 0 var(--sp_fix_16) 0; } .dashboard__block__content.scrollZone { height: 360px; overflow: auto; } .dashboard__block__body > div { height: 100%; padding: 0 0 var(--sp_fix_08); overflow: hidden; } .dashboard__block__header .avatar { width: 48px; height: 48px; border-radius: 100%; padding: 6px 8px 14px; } .dashboard__block__header .logo { width: 40px; height: 40px; border-radius: 100%; padding: 2px 0 14px 8px; } .dashboard__block__header .changeName { height: 32px; display: flex; align-items: center; border-radius: 6px; } .dashboard__block__header .changeName:has(.ws-utility-cursor-pointer):hover { background: var(--base-hlt-g-hover); cursor: pointer; } .dashboard__block__header a.reset { height: 32px; } .dashboard__block__header a.reset ws-icon { height: 32px; opacity: .8; transition: all 100ms linear; } .dashboard__block__header a.reset:hover ws-icon { opacity: 1; transform: rotate(-90deg); } .dashboard__block__header .logo .proj_color { width: 40px; height: 40px; display: flex; align-content: center; align-items: center; justify-content: center; border-radius: 8px; } .dashboard__block__header .body > div.tree { height: 20px; padding: 0 0 0 4px; gap: 8px; margin: 0 0 -2px; } .dashboard__block__header .tree .info {margin: 0;font: var(--font-ui-13-small-med);} .dashboard__block__header .tree .info ws-icon { width: 16px; height: 16px; --icon-size: 16px; } .dashboard__block__header .tree .info .in { padding: 0 4px; font: var(--font-ui-12-mini-reg); color: var(--base-txt-tertiary) } .dashboard__block__header .logo svg, .dashboard__block__header .logo ws-icon { width: 32px; height: 32px; } .dashboard__block__header .body { padding: 2px 0 0 4px; min-height: 32px; overflow: hidden; } .dashboard__block__header .body > div { height: 32px; } .dashboard__block__header .body .ws-btn-right { margin-left: auto; } .dashboard__block__header .stats-hide{ display: none; cursor: pointer; margin-left: var(--sp_fix_08); } .dashboard__block__header .stats-hide:has(.is-shown) { display: inline-flex; } .dashboard__block__header .rightMenu { margin: 0 0 0 10px; } .dashboard__block-collapsable { cursor: pointer; } .dashboard__block-collapsable:not(.dashboard__block-off):has(.dashboard__block__height-force) { height: 500px; } .dashboard__block-collapsable .dashboard__block__body:has(.dashboard__block__height-force) { max-height: calc(100% - 78px); } .dashboard__block ws-icon.collapse { margin:12px 8px } .dashboard__block:not(.dashboard__block-off) ws-icon.collapse use:last-child { display:none } .dashboard__block-off ws-icon.collapse use:first-child { display:none } .dashboard__block:not(.dashboard__block-off) .expand use:last-child { display:none } .dashboard__block-off .expand use:first-child { display:none } .dashboard__block-off .dashboard__block__header { box-shadow:none } .dashboard__block-off .dashboard__block__content, .dashboard__block-off .dashboard__block__body { display:none } .dashboard__block-demo h4 { color: var(--base-txt-tertiary); } .dashboard__block-gray h4 { display: none; } .dashboard__block-gray .no-activity { display: block; margin: 0; font: var(--font-ui-18-title-2-semi); color: var(--base-txt-tertiary); white-space: nowrap; overflow: hidden; padding: 0 var(--sp_fix_08) 0 var(--sp_fix_04); } .dashboard__block .btn.btn-skeleton:focus-visible, .dashboard__block .btn.btn-skeleton:focus-within { box-shadow: 0 0 0 1px var(--base-line-secondary) inset; } .dashboard__block .tooltip { opacity: 0; pointer-events: none; transition: left .2s ease, top .2s ease; z-index: 100; position: absolute; padding: 6px 10px; background: var(--colors-alpha-dark-70); color: var(--white-accent); font: 13px/20px var(--font-base) !important; border-radius: 4px; white-space: nowrap; box-shadow: 0 0 2px var(--base-cont-top); backdrop-filter: blur(2px); } .dashboard__block .tooltip div { text-align: left; width: 100% } .dashboard__block .tooltip .name { padding: 0 0 6px 0 } .dashboard__block .tooltip .body { color: var(--CHART_TOOLTIP_TXT) } .dashboard__block .tooltip .body span { color: var(--white-accent) } .dashboard__block .tooltip .body span.single { padding-right: 2px } .dashboard__block .tooltip .body span.circle { position: absolute; display: inline-block; height: 8px; width: 8px; border-radius: 100%; margin-top: -3px } .dashboard__block .tooltip .body span.circle.white { background: var(--base-cont-top) } .dashboard__block .tooltip .hot { color: var(--base-txt-btn-w) } .dashboard__block .tooltip td, .dashboard__block .tooltip tr, .dashboard__block .tooltip table { padding: 0; margin: 0 } .dashboard__block .tooltip table { border-spacing: 0; border-collapse: separate; width: 100% } .dashboard__block .tooltip .body table span.cnt { padding-left: 8px; text-align: right } .dashboard__block .tooltip .body table td:first-child { width: 18px } .dashboard__block .tooltip .body table td:last-child { text-align: right } .dashboard__block .tooltip .body table span.tooltipline { display: block; width: 14px; margin: 3px 0 0 -3px; border-top: 2px dashed var(--CHART_SPEED) } .dashboard__block .tooltip span.hot { color: var(--base-txt-btn-w) } .dashboard__block .part canvas { max-height:200px; } .dashboard__block .part { position: relative; width: 50%; float: left; text-align: center; height: 100%; } .dashboard__block .part_r { box-shadow: 1px 0 var(--CHART_GRID_LINE) inset; } .dashboard__block__more, .dashboard__block__expand { height: 24px; padding: 4px 0; left: calc(50% - 20px); display: flex; justify-content: center; } .dashboard__block__more.hidden, .dashboard__block__expand.hidden { display: none; } .dashboard__block__more ws-btn { width: 40px; } .dashboard__block__more .btn svg, .dashboard__block__expand .btn svg { width: 24px; height: 24px; } .dashboard__block__swapper { display: none; position: absolute !important; background: var(--base-cont-mod-top); opacity: 0.9; border-radius: 16px; height: 100%; width: 100%; z-index: 1000; top: 0; } .dashboard__block-empty .dashboard__block__swapper { background: var(--base-cont-low); box-shadow: 0 0 0 1px var(--base-line-tertiary) inset; } .dashboard__block__swapper ws-icon { display: none; --icon-size: 200px; --icon-color: var(--base-txt-secondary); position: absolute; top: calc(50% - 100px); left: calc(50% - 100px); width: 200px; height: 200px; opacity: 1; pointer-events: none; } .dashboard__block-columns-full { display: flex; flex-direction: row; gap: 24px; .dashboard__block-column { width: calc(50% - 12px); .dashboard__block50 { width: 100%; } .dashboard_row-full { height: 100%; .dashboard__block { height: 100% !important; } } } } .dashboard__block-columns.dashboard__block-gray .dashboard__block__swapper ws-icon { --icon-size: 56px; width: 56px; height: 56px; top: 0; left: calc(50% - 28px); } .dashboard__block__loader { display: none; position: absolute !important; background: var(--base-cont-mod-top); border-radius: 0 0 16px 16px; height: 0; width: 100%; z-index: 999; } .dashboard__block-columns.dashboard__block-gray .dashboard__block__loader ws-icon, .dashboard__block-columns.dashboard__block-gray .dashboard__block__loader svg { position: absolute; left: 50%; top: 50%; margin: -28px 0 0 -14px; width: 28px; height: 28px; fill: var(--base-line-tertiary); opacity: 1; pointer-events: none; } .dashboard__block-columns.dashboard__block-gray .dashboard__block__loader .loader { position: absolute; left: 50%; top: 50%; margin: -45px 0 0 -17px; border: 2px solid var(--base-line-tertiary); border-left-color: var(--trans); width: 30px; height: 30px; opacity: 1; pointer-events: none; } .dashboard__block__loader ws-icon, .dashboard__block__loader svg { position: absolute; left: 50%; top: 50%; margin: -35px 0 0 -35px; width: 70px; height: 70px; fill: var(--base-line-tertiary); opacity: 1; pointer-events: none; } .dashboard__block__loader .loader { position: absolute; left: 50%; top: 50%; margin: -40px 0 0 -40px; border: 4px solid var(--base-line-tertiary); border-left-color: var(--trans); width: 72px; height: 72px; opacity: 1; pointer-events: none; } .dashboard__block__dragLine { height: 12px; width: 100%; text-align: center; cursor: ns-resize; position: absolute; bottom: -6px; } .dashboard__row__dragLine { opacity: 0; height: 12px; width: 100%; text-align: center; cursor: ns-resize; position: absolute; bottom: -16px; transition: 0.3s; } .dashboard__row__dragLine:hover { opacity: 1; } .dashboard__row__dragLine ws-icon { margin-top: -4px; } .dashboard__tasks__list, .dashboard__chatList, .dashboard__stats__list { height: 100%; box-sizing: border-box; overflow: hidden; } .dashboard__tasks__list .scrollZone { padding: 0 !important; margin: 0 !important; } .dashboard__tasks__list .item_empty, .dashboard__stats__list .item_empty { display: block; } .dashboard__tasks__list .item_empty.hidden, .dashboard__stats__list .item_empty.hidden { display: none; } .dashboard__tasks__list .empty p, .dashboard__stats__list .empty p { text-align: center; margin-top: 16px; color: var(--base-txt-primary); font-size: 16px; font-style: normal; font-weight: 590; line-height: 20px; } .dashboard__tasks__list .empty .action, .dashboard__stats__list .empty .action { text-align: center; } .dashboard__tasks__list .empty .action ws-btn, .dashboard__stats__list .empty .action ws-btn { margin: 28px auto 0 auto; } .dashboard__tasks__list__group, .dashboard__stats__list__group { padding: 0 12px; } .dashboard__tasks__list .sidePanel__list__item, .dashboard__stats__list .sidePanel__list__item { transition: border-color .15s ease-in-out, box-shadow .1s ease-in-out; } .dashboard__tasks__list .sidePanel__list__item:hover, .dashboard__stats__list .sidePanel__list__item:hover { background: var(--base-hlt-g-easy); box-shadow: 0 var(--screen-px) var(--base-line-secondary), 0 var(--screen-px) var(--base-line-secondary) inset; } .dashboard__tasks__list .sidePanel__list__item.selected, .dashboard__stats__list .sidePanel__list__item.selected { background: var(--base-cont-top) linear-gradient(var(--base-hlt-g-easy), var(--base-hlt-g-hover)) !important; } .dashboard__block__body .dashboard__chatList { box-sizing: border-box; overflow: hidden; } .dashboard__chatList .chatList__item:hover, .dashboard__chatList .chatList__item.selected { background: var(--base-hlt-g-easy); box-shadow: 0 var(--screen-px) var(--base-line-secondary), 0 var(--screen-px) var(--base-line-secondary) inset; } .dashboard__chatList .chatList__item { height: 60px; padding: 0 12px 0 20px; } .dashboard__chatList .chatList__item.selected { background: var(--base-cont-top) linear-gradient(var(--base-hlt-g-easy), var(--base-hlt-g-hover)) !important; } .dashboard__block .dashboard__eventsList { box-sizing: border-box; padding: var(--sp_fix_08) 0; height: 100%; } .dashboard__eventsList .dashboard__list__group { min-height: calc(100% - 24px); } .dashboard__eventsList .eventsList__item { margin: 0 12px; border-radius:8px; } .dashboard__eventsList .eventsList__item ~ .dashboard__eventsList .eventsList__item { padding-top: 8px; } .dashboard__eventsList .eventsList__item:hover, .dashboard__eventsList .eventsList__item.selected { background: var(--base-hlt-g-easy); box-shadow: var(--shadow-cont-minor-lineonly-inside); } .dashboard__block .sleep2 { height: 100%; box-sizing: border-box; margin: 0 auto; padding: 10px 0; } .dashboard__block[data-container^="stats"] .dashboard__block__header .body, .dashboard__block[data-container=tasks] .dashboard__block__header .body, .dashboard__block[data-container=chats] .dashboard__block__header .body { padding-bottom: 2px; margin-bottom: -2px; } .dashboard__block[data-container=tasks] .dashboard__block__body { height: calc(100% - 80px); } .dashboard__block_columns { display: flex; gap: 24px; align-items: flex-start !important; position: relative; z-index: 1; } .dashboard__block-transparent .dashboard__block__columns { margin-top: 10px; } .dashboard__block_column { gap: 24px; flex-grow: 1; flex-shrink: 1; width: calc(50% - 16px); } .dashboard__block-transparent { background: none; box-shadow: none; z-index: 1; } .dashboard__block-transparent > * { position: relative; } .dashboard__block-transparent:before { height: 96px; content: ''; position: absolute; background: linear-gradient(180deg, var(--base-cont-top), transparent); left: 0; right: 0; bottom: 0; top: 0; border-radius: 16px; } .dashboard__block-transparent .no-activity { display: none; } .dashboard__list-fullscreen { height: 100% !important; } .dashboard .pd_in { position: relative; padding: 0 var(--sp_fix_20) var(--sp_fix_16); box-sizing: border-box; } .dashboard .pd_out { height: calc(100% - 56px); } .dashboard h4 { margin: 0; font: var(--font-ui-18-title-2-semi); color: var(--base-txt-primary); white-space: nowrap; overflow: hidden; padding: 0 var(--sp_fix_08) 0 var(--sp_fix_04); } .dashboard ws-icon[name=lock-fill] { --icon-color: var(--base-txt-new-minor); } .dashboard .tabs { font: var(--font-ui-13-small-reg); padding: 0 0 2px; } .dashboard .tabs .tabs__item { position: relative; padding: var(--sp_fix_06); margin: 0 2px 0 0; cursor: pointer; transition: box-shadow 0.3s ease; color: var(--base-txt-secondary); } .dashboard .tabs .tabs__item div { display: inline-block; } .dashboard .tabs .tabs__item.active { font: var(--font-ui-13-small-semi); color: var(--base-txt-primary); } .dashboard .tabs .tabs__item:after { content: ''; opacity: 0; width: 100%; height: 2px; background: var(--base-txt-secondary); border-radius: 1px; position: absolute; left: 0; bottom: -4px; transition: opacity 0.3s ease; } .dashboard .tabs .tabs__item.active:after { opacity: 1; background: var(--base-txt-act-minor); } .dashboard .tabs .tabs__item.empty { color: var(--base-txt-muted); } .dashboard .tabs .tabs__item.empty.active { color: var(--base-txt-primary); } .dashboard .tabs .tabs__item:hover { color: var(--base-txt-max); } .dashboard .tabs .tabs__item:hover:after { opacity: 1; background: var(--base-txt-secondary); } .dashboard .tabs .tabs__item::before { display: block; content: attr(data-title); font-weight: 600; height: 0; overflow: hidden; visibility: hidden; } .dashboard .tabs .tabs__item .tabs__item-counter { font: var(--font-ui-10-nano-med); line-height: 14px; border-radius: 12px; padding: 0 3px; vertical-align: middle; border: 1px solid; min-width: 12px; text-align: center; margin: 0 0 0 2px; } .dashboard .tabs .tabs__item[data-type=overdue] .tabs__item-counter { color: var(--base-txt-alert-major); border-color: var(--base-txt-alert-major); } .dashboard .dashboard__block .zzz { background: var(--projcond-muted-bg); color: var(--base-txt-primary); box-shadow: none; vertical-align: 1px; margin-left: 6px } .dashboard .demo .help, .dashboard .demo .label_top_r, .dashboard .demo .dynamic { display: none } .dashboard_bars .dynamic, .dashboard .dashboard__block .dynamic { margin-left: 6px; font: bold 11px/20px var(--font-base); color: var(--base-txt-secondary); } .dashboard_bars .dynamic.same, .dashboard .dashboard__block .dynamic.same { color: var(--base-btn-notice-minor); } .dashboard_bars .dynamic.up, .dashboard .dashboard__block .dynamic.up { color: var(--base-txt-btn-c); } .dashboard_bars .dynamic.dn, .dashboard .dashboard__block .dynamic.dn { color: var(--base-txt-btn-w) } .dashboard_bars .dynamic:before, .dashboard .dashboard__block .dynamic:before { width: 20px; height: 16px; display: inline-block; text-align: center; border-radius: 10px; font: 12px / 16px var(--font-base); margin: 0 5px 0 0; } .dashboard_bars .dynamic.same:before, .dashboard .dashboard__block .dynamic.same:before { content: '~'; background: var(--base-cont-note-major); } .dashboard_bars .dynamic.up:before, .dashboard .dashboard__block .dynamic.up:before { content: '\2197'; background: var(--base-hlt-alt-fresh); } .dashboard_bars .dynamic.dn:before, .dashboard .dashboard__block .dynamic.dn:before { content: '\2198'; background: var(--base-hlt-w-pressed); } .dashboard_bars .dynamic.no:before, .dashboard .dashboard__block .dynamic.no:before { content: 'Zzz'; background: var(--projcond-muted-bg); color: var(--projcond-muted-txt); font: 10px/16px var(--font-base); width: 28px; } .dashboard .project-name, .dashboard__block .project-name { margin: 4px 0 0; font: var(--font-ui-18-title-2-semi); color: var(--base-txt-primary); white-space: nowrap; overflow: hidden; padding: 0 var(--sp_fix_08) 0 var(--sp_fix_04); cursor: pointer; display: inline-flex; border-radius: 6px; transition: background 0.3s ease; justify-content: flex-start; } .dashboard a.project-name:hover { background: var(--base-cont-trans-low); } #dashboardmenu .menu__columns { padding: var(--sp_fix_12); } #dashboardmenu .menu__group-bottom { flex-direction: column; height: auto; } @media (min-width: 481px) { #dashboardmenu .menu__group-bottom { padding-bottom: 16px; } } #dashboardmenu .menu__group-bottom .in { font: var(--font-ui-12-mini-reg); color: var(--base-txt-secondary); } #dashboard-activity-chart.dashboard__block { display: flex; flex-direction: column; justify-content: space-between; } #dashboard-activity-chart .dashboard__block-activity { height: 260px; } #dashboard-activity-chart .dashboard__block-activity .pd_in { height: calc(100% - 50px); } #dashboard-activity-chart .dashboard__block-activity .users + .pd_in { margin-left: 40px; padding-left: 0 } #dashboard-activity-chart.no_costs .dashboard__block-activity { height: 100%; } #dashboard-activity-chart .dashboard__block-costs { box-shadow: 0 1px 0 var(--CHART_GRID_LINE) inset; height: 90px; } #dashboard-activity-chart canvas { cursor: pointer; } #dashboard-activity-chart .users { float: left; width: 24px; margin: 0 0 -50px; padding: var(--sp_fix_16) 0 0 var(--sp_fix_16); } #dashboard-activity-chart .users * { margin: 0 0 8px; display: block } #dashboard-activity-chart .users *:nth-child(2) { transform: scale(0.9); margin-top: -2px } #dashboard-activity-chart .users *:nth-child(3) { transform: scale(0.8); margin-top: -4px } #dashboard-activity-chart .users span.av_demo { height: 24px; width: 24px; background: var(--base-cont-low); display: block; border-radius: 24px; } .dashboard__modal #dashboard-activity-chart-modal .pd_in { height: 344px; padding-bottom: var(--sp_fix_16); } .dashboard__modal #dashboard-activity-chart-modal .users .scrollZone { margin: 0 -8px; padding: 0 8px; } .dashboard__modal #dashboard-activity-chart-modal > .pd_in:not(.demo), .dashboard__modal .costs_burnout > .pd_in:not(.demo) { margin-left: 410px; padding-right: 0; padding-left: 0; } .dashboard__modal .tasks_burnout .pd_in { height: 400px; padding: 0 var(--sp_fix_32) } .dashboard__modal .tasks_burnout .users .scrollZone { max-height: 300px } .dashboard__modal .legend.demo { display: none } .dashboard__modal .legend { margin: 20px 0 0; color: var(--base-txt-tertiary); font: 400 13px/20px var(--font-base); } .dashboard__modal .legend_top { margin: -25px 0 10px -10px; } .dashboard__modal .legend b { color: var(--base-txt-primary) } .dashboard__modal .legend b i { font-style: normal; opacity: 0.7; font-size: 11px; } .dashboard__modal .legend .part { height: 100%; text-align: inherit } .dashboard__modal .legend .part_l { box-shadow: -2px 0 var(--CHART_GRID_LINE) inset; } .dashboard__modal .legend .part_r { box-shadow: none; } .dashboard__modal .legend .legend_row { width: 70%; height: 20px; margin: var(--sp_fix_16) auto; } .dashboard__modal .legend .legend_row div { display: inline-block; vertical-align: bottom; } .dashboard__modal .legend .legend_row .legend_txt { max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dashboard__modal .legend .legend_row.ontime .legend_line { border-top: 2px dotted var(--CHART_PURPLE) } .dashboard__modal .legend .legend_row.avg .legend_line { border-top: 2px dashed var(--CHART_BLUE_BORDER) } .dashboard__modal .legend .legend_row.best .legend_line { border-top: 2px dashed var(--CHART_PURPLE) } .dashboard__modal .legend .legend_row.best .legend_line.way { border-top: 2px dashed var(--CHART_SPEED) } .dashboard__modal .legend .legend_row .legend_line { width: 24px; margin-top: 10px; padding-top: 3px; overflow: hidden; vertical-align: top; } .dashboard__modal .legend .legend_cnt { float: right; } .dashboard__modal .legend .legend_row .legend_circle { display: inline-block; width: 8px; height: 8px; margin: 0 8px -1px -7px; background: var(--CHART_CIRCLE_WHITE); border-radius: 100%; } .dashboard__modal .legend .legend_row .legend_line ~ .legend_circle { margin-left: -15px; vertical-align: -1px; } .dashboard__modal .legend .legend_row.current .legend_line { border-top: 2px dotted var(--CHART_SPEED) } .dashboard__modal .legend .legend_row.costs .legend_line { box-shadow: 0 2px var(--CHART_COSTS_BORDER) inset; background: var(--CHART_COSTS_GRADIENT); } .dashboard__modal .legend .legend_row.costs .legend_line:before { border: 2px solid var(--CHART_COSTS_BORDER); border-width: 0 2px 2px 0; } .dashboard__modal .legend .legend_row .legend_line.as_chart { padding-top: 16px; margin-top: 2px; } .dashboard__modal .legend .legend_row .legend_line.as_chart:before { content: ''; display: block; background: var(--base-cont-mod-top); width: 6px; height: 8px; margin: -16px 0 0 0; } .dashboard__modal .legend .legend_row.project_plan .legend_line { box-shadow: 0 2px var(--CHART_PROJECT_PLAN_BORDER) inset; background: var(--CHART_PROJECT_PLAN_BG); } .dashboard__modal .legend .legend_row.project_plan .legend_line:before { border: 2px solid var(--CHART_PROJECT_PLAN_BORDER); border-width: 0 2px 2px 0 } .dashboard__modal .legend .legend_row.tasks_plan .legend_line { box-shadow: 0 2px var(--CHART_TASKS_PLAN_BORDER) inset; background: var(--CHART_TASKS_PLAN_BG); } .dashboard__modal .legend .legend_row.tasks_plan .legend_line:before { border: 2px solid var(--CHART_TASKS_PLAN_BORDER); border-width: 0 2px 2px 0 } .dashboard__modal .legend .legend_row.costs .legend_cnt b { display: block; color: var(--costs-time-major); background: var(--costs-time-highlight); padding: 5px 10px; border-radius: 4px; box-shadow: 0 0 0 2px var(--costs-time-minor); margin: -5px -10px; } .dashboard__modal .legend .legend_row.costs .legend_cnt b i { font-style: normal; opacity: 0.7 } .dashboard__modal .legend .legend_row .legend_finish { margin-left: 5% } .dashboard__modal .legend .legend_row .legend_circle.finish { border: 2px solid var(--CHART_PURPLE) } .dashboard__modal .legend .legend_row .legend_circle.way { border: 2px solid var(--CHART_SPEED) } .dashboard__modal .legend .legend_row .legend_circle.future { border: 2px solid var(--CHART_SPEED) } .dashboard__modal .legend .legend_row .legend_today span:first-child { border-left: 2px solid var(--CHART_BLUE_BORDER); padding: 3px 0 2px 0; } .dashboard__modal .legend .legend_row .legend_circle.today { border: 2px solid var(--CHART_BLUE_BORDER); } .dashboard__modal .legend .legend_row .ico_i { margin-left: 6px } .dashboard__modal { padding: 0 var(--sp_fix_32) var(--sp_fix_20) var(--sp_fix_32); min-width: 360px; } .dashboard__modal-autoHeight { height: auto; } .dashboard__modal .dashboard__block { margin-bottom: 0; background: var(--base-cont-mod-top); display: block; } .dashboard__modal .dashboard__block .l { float: left; width: 260px; padding-top: 30px; } .dashboard__modal .dashboard__block .users { float: left; width: 360px; padding-right: 16px; box-shadow: -1px 0 var(--base-line-secondary) inset; height: 360px; overflow: visible; padding: 0 8px; } .dashboard__modal .block.costs_burnout .users { height: 455px; margin-top: 20px; } .dashboard__modal .dashboard__block .users .scrollZone { max-height: 280px; overflow-y: auto; padding-bottom: 10px } .dashboard__modal .block.costs_burnout .users .scrollZone { padding-right: 8px; margin-right: -8px; } .dashboard__modal .scrollZone::-webkit-scrollbar { width: 2px; background-color: transparent } .dashboard__modal .scrollZone:hover::-webkit-scrollbar { background-color: transparent; } .dashboard__modal .scrollZone::-webkit-scrollbar-thumb:vertical { background-color: transparent } .dashboard__modal .scrollZone:hover::-webkit-scrollbar-thumb:vertical { background-color: var(--base-btn-primary-minor) } /** firefox **/ .dashboard__modal .scrollZone:not(.ps) { scrollbar-width: thin; scrollbar-color: transparent transparent } .dashboard__modal .scrollZone:not(.ps):hover { scrollbar-color: var(--base-btn-primary-minor) transparent } .dashboard__modal .dashboard__block .users .menu__group-fixed b { color: var(--base-btn-primary-minor) } .dashboard__modal .dashboard__block .users .counters { width: 155px; border-radius: 4px; font: 12px/24px var(--font-base); color: var(--base-txt-tertiary); padding: 0; height: 32px; } .dashboard__modal .dashboard__block .users .counters > * { float: left; width: 30px; text-align: center; padding: 4px 0; } .dashboard__modal .dashboard__block .users .counters b { color: var(--base-txt-primary); width: 35px; font-weight: bold; } .dashboard__modal .dashboard__block .users .counters_title { float: left; font: italic 13px/20px var(--font-serif); color: var(--base-txt-tertiary) } .dashboard__modal .dashboard__block .users .counters_head { width: 155px; font: 12px/20px var(--font-base); color: var(--base-txt-tertiary); height: 26px; margin: 8px 6px 0 auto; } .dashboard__modal .dashboard__block .users .counters_head div { float: left; width: 24px; height: 20px; text-align: center; padding: 3px 3px; cursor: pointer; } .dashboard__modal .dashboard__block .users .counters_head div:last-child { width: 29px; } .dashboard__modal .dashboard__block .users_whover .menu__item:hover { box-shadow: 0 0 0 1px var(--base-hlt-invert) inset; background: none; } .dashboard__modal .dashboard__block .users .menu__item:hover .counters span.active { box-shadow: 0 1px 0 0 var(--base-hlt-invert) inset, 0 -1px 0 0 var(--base-hlt-invert) inset } .dashboard__modal .dashboard__block .users .menu__item-active { background: var(--base-hlt-selected) !important; box-shadow:none } .dashboard__modal .dashboard__block .users .counters span.active { background: var(--base-hlt-selected) !important } .dashboard__modal .dashboard__block .users .menu__group-fixed .counters span.active { color: white; font-weight: bold; background: var(--base-txt-link-minor) !important } .dashboard__modal .dashboard__block .users .menu__group-fixed .counters span:not(.active):hover { color: var(--base-txt-link-minor) } .dashboard__modal .dashboard__block .users .counters.time_sum { width: auto; top: 2px; text-align: center; padding: 0; } .dashboard__modal .dashboard__block .users .counters.time_sum b { width: auto; background: var(--costs-time-highlight); color: var(--costs-time-major); padding: 1px 8px; border-radius: 8px; margin: 2px 0; } .dashboard__modal .dashboard__block .users .counters.time_sum b i { font-style: normal; opacity: 0.7; font-size: 11px; } .dashboard__modal .dashboard__block .users .counters.time_sum span { color: var(--costs-time-major); padding: 4px 0; text-align: right; width: 36px; padding-right: 8px; font: 11px/20px var(--font-base); margin-left: -10px; } .dashboard__modal .dashboard__block .users .counters.time_sum span i { font-style: normal; opacity: 0.7 } .dashboard__modal .dashboard__block .users .menu__item-empty .counters.time_sum b { display: none } .dashboard__modal .dashboard__block .users .menu__item-empty .counters.time_sum i { width: 60px; padding: 3px 5px; } .dashboard__modal .dashboard__block .users .menu__item-empty .counters.time_sum i:before { content: '\2014'; } .dashboard__modal .block.costs_burnout .users .scrollZone { max-height: 285px; margin-bottom: 50px; } .dashboard__modal .dashboard__block .users .menu__group { padding:0 } /**** DASHBOARD STATS ****/ .dashboard__stats__list .menu__head ws-btn span { overflow: initial; } .dashboard__stats__list .flex_row { height: 28px; padding: 8px 12px 8px 16px; border: none; border-radius: 0; box-shadow: 0 var(--screen-px) var(--base-hlt-g-easy), 0 var(--screen-px) var(--base-hlt-g-easy) inset; } .dashboard__stats__list .menu__group:not(.menu__group-hidden) ~ .menu__group { border-top: none; } .dashboard__stats__list .sidePanel__list__item:hover { background: var(--base-hlt-g-easy); } .dashboard__stats__list .btn:not(.btn-expand) > span:not([class]) { padding: 0; } .dashboard__stats__list .menu__head ws-btn:last-child span { font-weight: 700; } .dashboard__stats__list .menu__item.menu__head:hover, .dashboard__stats__list .menu__item.menu__head { cursor: initial; background: transparent !important; box-shadow: 0 1px var(--base-line-tertiary); } .dashboard__stats__list .menu__head span { font-size: 12px; font-style: normal; font-weight: 400; color: var(--base-txt-tertiary); } .dashboard__stats__list .sidePanel__list__item { /* cursor: initial; */ } .dashboard__stats__list .sidePanel__list__item .space + .space { margin-left: -6px; } .dashboard.modal .dashboard__stats__list .scrollZone { max-height: calc(100% - 70px); } #dashboard-interact .dashboard__block__body{ padding: 0; } .dashboard.modal .dashboard__stats__list .scrollZone { max-height: calc(100% - 44px); } #dashboard-interact .dashboard__stats__list .scrollZone { max-height: calc(100% - 30px); } #dashboard-interact .dashboard__stats__list .scrollZone.scrollZone-short { max-height: calc(100% - 75px); } #dashboard-interact .dashboard__block__header { box-shadow: 0 -1px var(--base-line-tertiary) inset !important; } #dashboard-interact .sidePanel__list__item:first-child { box-shadow: none !important; } #dashboard-interact .space-number{ font-weight: 700; } .dashboard__stats__list .stats { display: inline-flex; flex-direction: row; flex-wrap: nowrap; border: 0; text-decoration: none; text-align: center; vertical-align: middle; align-items: center; justify-content: flex-end; font: var(--font-ui-13-small-med); color: var(--base-txt-primary); width: 96px; height: 28px; /*padding: 0 2px;*/ border-radius: 8px; } .dashboard__stats__list .stats ws-icon:first-of-type { flex-shrink: 1; flex-grow: 1; justify-content: flex-start; margin-left: 8px; } .dashboard__stats__list .stats ws-icon:first-of-type svg { width: 12px; height: 12px; } .dashboard__stats__list .stats span + ws-icon { width: 16px; } .dashboard__stats__list .stats-none span { width: 9px; } .dashboard__stats__list .stats-none { color: var(--base-txt-muted); } .dashboard__stats__list .stats-fill.stats-red { background: var(--base-hlt-w-hover); } .dashboard__stats__list .stats.stats-red ws-icon:first-of-type svg, .dashboard__stats__list .stats-red span + ws-icon svg { fill: var(--base-txt-btn-w); } .dashboard__stats__list .stats-green span + ws-icon svg { fill: var(--base-txt-btn-c); } .dashboard__stats__list .stats.stats-head:last-child span { font-weight: 700; color: var(--base-txt-primary); } .dashboard__stats__list .stats.stats-head span { margin-right: 12px; } .dashboard__stats__list .sidePanel__list__item:hover .stats-green:not(.stats-fill), .dashboard__stats__list .stats-green:not(.stats-fill):hover { background: linear-gradient(0, var(--trans) 0%, #1A9E721F 0%), linear-gradient(0, var(--trans) 0%, var(--trans) 0%); } .dashboard__stats__list .sidePanel__list__item:hover .stats-red:not(.stats-fill), .dashboard__stats__list .stats-red:not(.stats-fill):hover { background: linear-gradient(0, var(--trans) 0%, var(--base-hlt-w-hover) 0%), linear-gradient(0, var(--trans) 0%, var(--trans) 0%); } .dashboard__stats__list .sidePanel__list__item:hover .stats.stats-grey, .dashboard__stats__list .stats.stats-grey:hover { background: linear-gradient(0, var(--trans) 0%, var(--base-hlt-g-hover) 0%), linear-gradient(0, var(--trans) 0%, var(--trans) 0%); } .dashboard__projects__list { height: 100%; box-sizing: border-box; overflow: hidden; } .dashboard__projects__list.dashboard__list-fullscreen { height: 100%; } .dashboard__projects__list__group { min-height: calc(100% - 34px); } .dashboard__projects__list .projectsList__item { display: flex; padding: 0 12px 0 20px; box-sizing:border-box; height: 60px; cursor: pointer; gap: 12px; &:hover { box-shadow: 0 var(--screen-px) var(--base-line-secondary), 0 var(--screen-px) var(--base-line-secondary) inset; } } .dashboard__projects__list .projectsList__item .overdue_dot { position: absolute; top: 0; right: 0; background: var(--base-txt-alert-major); display: inline-block; width: 8px; height: 8px; box-shadow: 0 0 0 2px var(--base-cont-top); border-radius: 100%; z-index: 1; } .dashboard__projects__list .projectsList__item .logo {position: relative;} .dashboard__projects__list .projectsList__item .in { overflow: hidden; } .dashboard__projects__list .projectsList__item .project_status { width: 38px; height: 38px; display: flex; justify-content: center; align-items: center; border-radius: 100%; border: 1.5px solid var(--base-hlt-g-easy); } .dashboard__projects__list .projectsList__item .project_status:hover { background: var(--base-cont-trans-mid); } .dashboard__projects__list .projectsList__item .logo .proj_color { width: 48px; height: 48px; display: flex; align-content: center; align-items: center; justify-content: center; border-radius: 8px; box-shadow: 0 0 0 1px var(--base-line-tertiary) inset; } .dashboard__projects__list .projectsList__item .logo svg, .dashboard__projects__list .projectsList__item .logo ws-icon { width: 32px; height: 32px; } .dashboard__projects__list .projectsList__item .img { background: var(--white-accent); width:48px; height:48px; padding:2px; border-radius:24px; transform: scale(0.66); } .dashboard__projects__list .projectsList__item .img .av_nm { } .dashboard__projects__list .projectsList__item .name .in { font: var(--font-ui-15-large-semi); padding: 0; } .dashboard__projects__list .projectsList__item .project_last_action { padding: 0 4px; font: var(--font-ui-12-mini-reg); color: var(--base-txt-tertiary); display: flex; } .dashboard__projects__list .projectsList__item .info {} .dashboard__projects__list .projectsList__item .info ws-icon { width: 12px; height: 12px; --icon-size: 12px; --icon-color: var(--base-txt-tertiary); } .dashboard__projects__list .projectsList__item .info .in { padding: 0 4px; font: var(--font-ui-12-mini-reg); color: var(--base-txt-tertiary) } .projectsList__item ~ .projectsList__item { border-top: 0.5px solid var(--base-line-ghost); } .dashboard__projects__list .projectsList__item:hover { background: var(--base-hlt-g-easy); } .dashboard__projects__list .projectsList__item.selected { background: var(--base-hlt-selected); } /**** MEDIA ****/ @media (max-width: 1460px) { body.withSidebar { .dashboard__row { flex-direction: column !important; } .dashboard__block-columns-full { flex-direction: column; .dashboard__block-column { width: 100%; } } .dashboard__block50 { width: 100%; } .dashboard__block-empty { display: none; } .dashboard__modal #dashboard-activity-chart-modal .users .scrollZone { position: inherit } .dashboard__modal #dashboard-activity-chart-modal .pd_in:not(.demo), .dashboard__modal .block.costs_burnout .pd_in:not(.demo) { margin-left: 0 } .dashboard__modal .tasks_burnout .pd_in { padding: 0 } .dashboard__modal .tasks_burnout .part { width: 100% !important } .dashboard__modal .tasks_burnout .legend .part_r { box-shadow: 0 1px 0 var(--CHART_GRID_LINE) inset } .dashboard__modal .tasks_burnout .legend .part_l { box-shadow: 0 -1px 0 var(--CHART_GRID_LINE) inset } } } @media (max-width: 1200px) { .dashboard__row { flex-direction: column !important; } .dashboard__block-columns-full { flex-direction: column; .dashboard__block-column { width: 100%; } } .dashboard__block50 { width: 100%; } .dashboard__block-empty { display: none; } .dashboard__modal #dashboard-activity-chart-modal .users .scrollZone { position: inherit } .dashboard__modal #dashboard-activity-chart-modal .pd_in:not(.demo), .dashboard__modal .block.costs_burnout .pd_in:not(.demo) { margin-left: 0 } .dashboard__modal .tasks_burnout .pd_in { padding: 0 } .dashboard__modal .tasks_burnout .part { width: 100% !important } .dashboard__modal .tasks_burnout .legend .part_r { box-shadow: 0 1px 0 var(--CHART_GRID_LINE) inset } .dashboard__modal .tasks_burnout .legend .part_l { box-shadow: 0 -1px 0 var(--CHART_GRID_LINE) inset } body[data-page*=dashboard] .menu .menu__group:not(.menu__group-move) .menu__submenuWrapper .menu__item[data-route="left"], body[data-page*=dashboard] .menu .menu__group:not(.menu__group-move) .menu__submenuWrapper .menu__item[data-route="right"] { display: none; } } @media (max-width: 1024px) { .dashboard__modal { padding:0 10px } .dashboard__modal .dashboard__block .users { margin: 0 0 15px; float: none; width: auto; box-shadow: none; height: auto !important } .dashboard__modal .dashboard__block .users .scrollZone { min-height: auto !important; max-height: unset !important } .dashboard__modal .dashboard__block .users .menu__item-empty { display: none } } @media (max-width: 760px) { .dashboard__modal #dashboard-activity-chart-modal .pd_in:not(.demo) { margin: 0 } .dashboard__modal .tasks_burnout .legend .legend_row { width: 90% !important } .dashboard__modal .dashboard__block .users { position: relative; float: none; margin: 0 0 15px; } .dashboard .dashboard__block[data-container^="stats"] h4 { flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; } .dashboard__block[data-container^="stats"] .dashboard__block__header .body { padding-bottom: 0; } .dashboard__stats__list .stats { width: 65px; } .dashboard__stats__list .stats ws-icon:first-of-type { margin-left: 3px; } .dashboard__stats__list .sidePanel__list__item .flex_content { white-space: nowrap; text-overflow: ellipsis; } dashboard-block-stats-users [name=exclam_triangle-solid]{ display: none; } } @media (max-width: 480px) { .dashboard__modal .dashboard__block .pd_in:not(.demo), #project-dashboard .dashboard__block { margin-left: 0; border-radius: 8px; } .dashboard__block { border-radius: 16px; } .dashboard__block[data-container=tasks] .dashboard__block__header .body { gap: 2px; padding-bottom: 0; } .dashboard .tabs .tabs__item:after { bottom: -2px; } .dashboard #dashboard-priorities h4 { padding-right: 0; } .dashboard__tasks__list { padding: 0; } .dashboard__block__more, .dashboard__block__expand { padding: 12px 0; } .modal { & .dashboard__block__more, .dashboard__block__expand { padding: 12px 0; } } .dashboard__block_columns { flex-direction: column; } .dashboard__block_column { width: 100%; } .dashboard__block__header .body .ws-btn-right ws-icon { display: inline-flex; } .dashboard__block__header .rightMenu { margin: 0 0 0 6px; } .dashboard #dashboard-tasks .dashboard__block__header .body ws-btn[data-menu-id="dashboard-tasks-ordermenu"] { max-width: 80px; } .dashboard #dashboard-tasks .dashboard__block__header .body ws-btn[data-menu-id="dashboard-tasks-selectionmenu"] { max-width: 140px; } .dashboard h4 { font: var(--font-ui-16-title-3-semi); } #dashboard-interact .dashboard__block__header:has(.is-shown) h4 > span:first-child { display: none; } .dashboard__block__header .stats-hide { margin-left: 0; } #dashboard-interact .dashboard__stats__list .scrollZone{ max-height: calc(100% - 20px); } #dashboard-interact .dashboard__stats__list .scrollZone.scrollZone-short{ max-height: calc(100% - 60px); } .dashboard__block--auto-height { height: auto !important; } #dashboard-interact .sidePanel__list__item .space{ width: 24px; height: 24px; } #dashboard-interact .sidePanel__list__item .space + .space{ margin-left: -3px; } #dashboard-interact .sidePanel__list__item ws-icon { width: 16px; height: 16px; } } @media (hover: none) { .dashboard .tabs .tabs__item:hover:after { background: none; } } #dashboard-stats_projects .proj_color { display: flex; justify-content: center; align-items: center; } #dashboard-stats_projects, [id^="dashboard-stats_projects"]{ & .proj_color ws-emoji { width: 16px; height: 16px; } } #dashboard-stats_projects .sidePanel__list__item .in { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 6px; } #dashboard-stats_general .dashboard__stats__list .sidePanel__list__item { cursor: default !important; } .dashboard__block-expand_btn-expand span { display: flex; align-items: center; justify-content: center; padding: 0 !important; } .dashboard__block-expand_btn-expand span span { padding: 0 4px !important; } .dashboard__block-expand_iconset { display: flex; flex-direction: column; } .dashboard__block-expand_iconset ws-icon { --icon-size: 12px; --btn-txt-color: var(--base-txt-tertiary, rgba(9, 32, 52, 0.45)); height: initial; } .dashboard__block-expand_btn-expand { padding: 5px 1px; } .dashboard__block-expand { display: flex; justify-content: center; padding-top: 5px; } body.mobile .dashboard__block:has(.dashboard__block__expand) .dashboard__block__more { display: none; } body.mobile .modal .dashboard__block:has(.dashboard__block__expand) .dashboard__block__more { display: flex; } body.desktop .dashboard__block .dashboard__block__expand, body.mobile .modal .dashboard__block__expand { display: none; } .modal .dashboard__block__header h4 { font: var(--font-ui-18-title-2-semi); text-overflow: ellipsis; overflow: hidden; margin-bottom: 0; margin-right: 5px; } .modal .dashboard__block__header, .modal:has(.dashboard__block__header) .modal__header > .in, .modal .dashboard__block__header .body { padding: 0; height: auto; width: 100%; } .modal .dashboard__block__header .rightMenu { display: none; } .modal:has(.dashboard__block__header) .modal__header > .flex_gap { display: none; } .modal:has(.dashboard__block__header) .modal__header { padding-bottom: 10px; } .modal .dashboard__block__body { max-height: 100%; padding: 0; & .safe-bottom { padding-bottom: 34px; } } .dashboard:not(.modal) { padding-bottom: 12px; & .dashboard__block__body .tabs { display: none; } } .dashboard.modal .dashboard__block__header .tabs { display: none; } .dashboard.modal .dashboard__block__body .tabs { padding: 2px 15px; background: var(--base-cont-mod-top); position: sticky; top: 0; z-index: 1; width: 100%; box-sizing: border-box; } .dashboard.modal .dashboard__block__body .tabs:has(+ .menu__group-fixed) { padding-bottom: 10px; } .modal .dashboard__block__header .avatar { height: auto; padding: 0; } .modal .dashboard__block__header { align-items: center; } .modal .dashboard__block__header-bottom, .modal .dashboard__block__header-bottomDynamic, .modal:has(.tabs) .scrollZone-top { box-shadow: none !important; } .modal:has(.tabs):has(.scrollZone-top) .tabs { box-shadow: 0 1px var(--base-line-tertiary); } .modal.dashboard { gap: 0; } .dashboard__block__header ws-btn { min-width: 0; flex: 0 1 auto; } body.desktop .dashboard__block:not(:hover) .dashboard__block__header .flex_gap + .ws-btn-right:not(.menu_open) { display: none; } .dashboard__block[data-container^="stats"], .dashboard__block[data-container="chats"] { & .dashboard__block__body { flex-shrink: initial; } } .dashboard__stats__list { & .menu__group-fixed { background: linear-gradient(180deg, var(--base-cont-top), var(--base-cont-top-opac)); backdrop-filter: blur(4px); z-index: 1; position: sticky; top: 0; } & .scrollZone { max-height: 100%; } }/*#content:has(.dashboard__header) {*/ /* padding-top: 0;*/ /*}*/ /* >>> replace_has: #content:has(.dashboard__header) */ @media (min-width: 481px) { #content .dashboard__header { margin-top: -24px; } } /* <<< replace_has: #content:has(.dashboard__header) */ /* RESET ws-editable default styles */ .motto ws-editable { width: initial; height: initial; overflow: initial; } .motto .editable-value { display: block; position: initial; height: initial; width: initial; transition: unset; } .motto .editable-value .view { display: block; align-items: initial; gap: initial; } .motto .editable-value .view:hover { box-shadow: unset; } .motto .editable-value .view > span { display: block; flex-grow: initial; overflow: initial; text-overflow: initial; white-space: initial; width: initial; padding: 0; } .motto .editable-value:hover .view .options, .motto .editable-value.errored .view .options { display: block; } .motto .editable-value:not(.readonly):not(.errored) .view:hover { background: unset; } .motto .editable-value .view .options { display: block; padding: 0; align-items: unset; gap: unset; } .motto .editable-value .input { height: initial; background: unset; } .motto .editable-value .input.focus, .motto .editable-value.errored .input.focus, .motto .editable-value.errored .input:hover, .motto .editable-value.errored .view:hover { box-shadow: unset; padding: 0; } .motto .editable-value.errored .view { background: unset; cursor: text; } .motto .editable-value .input input { height: initial; } /* /RESET ws-editable default styles */ /* HEADER */ .dashboard__header { display: flex; flex-direction: column; align-items: center; } .dashboard__date { margin: 6px 0; } .dashboard__motto { margin-bottom: 12px; } .dashboard__iceland { max-width: 928px; margin: 12px 0 24px; } /* /HEADER */ /* DAILY OVERVIEW */ .daily-overview { display: flex; gap: 10px; } .daily-overview__date, .daily-overview__weather { font: var(--font-ui-16-title-3-reg); color: var(--base-txt-secondary); } /* /DAILY OVERVIEW */ /* MOTTO */ .motto { --ws-editable-btn-size: 28px; padding: 0 calc(var(--ws-editable-btn-size) + 8px); box-sizing: border-box; } .motto .editable-value { text-align: center; } .motto .editable-value .view { font-size: 0; /* remove unwanted space */ } .motto .editable-value .view > *, .motto .editable-value .input { font: var(--font-ui-32-title-large-med); color: var(--base-txt-primary); font-weight: 510; vertical-align: middle; } .motto .editable-value .view > span { display: inline; overflow-wrap: anywhere; } .motto .editable-value:hover .view > span { margin-right: 0; } .motto .editable-value .view .options { display: inline-block; opacity: 0; transform: translateX(-100%); margin-left: 8px; margin-right: calc(var(--ws-editable-btn-size) * -1 - 8px); /* ! DEBUG ONLY */ /* opacity: .2; */ } .motto:hover .editable-value .view .options, .motto .editable-value:hover .view .options, .motto .editable-value.errored .view .options { display: inline-block; opacity: 1; } .motto:hover .editable-value .view .options:has(ws-btn), .motto .editable-value:hover .view .options:has(ws-btn) { transform: translateX(0); transition: opacity .15s ease-in, transform .15s ease-in; transition-delay: .08s; } .motto .editable-value.editing .view { pointer-events: none; height: 40px; opacity: 0; overflow: hidden; /* ! DEBUG ONLY */ /* opacity: .2; */ } .motto .editable-value.editing .view .options, .motto .editable-value.readonly .view .options { display: none; } .motto .editable-value.editing .view + .input { position: absolute; top: 0; left: 50%; transform: translateX(-50%); min-width: 200px; } .motto .editable-value .input input { text-align: center; min-width: 200px; } .motto ws-editable:has(.loading) { pointer-events: none; } .motto .editable-value .options:has(.counter) { margin-right: -32px; } .motto .editable-value .input .counter { margin-right: -32px; } .motto .editable-value .counter { min-width: 24px; box-sizing: border-box; } .motto .view.loading:after { content: ''; display: inline-block; margin-left: 8px; width: 16px; height: 16px; animation: loader .6s linear infinite; border-radius: 50%; padding: 2px; background: conic-gradient(from 90deg at 50.17% 50%, #73C7FF -7.5deg, rgba(255, 255, 255, 0) 41.25deg, rgba(255, 255, 255, 0) 93.75deg, #FFFFFF 179.31deg, #FFD6F6 258.75deg, #73C7FF 352.5deg, rgba(255, 255, 255, 0) 401.25deg); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; vertical-align: middle; margin-right: -28px; } @media (min-width: 481px) { .motto .editable-value .view.loading { padding-right: 8px; /* prevent position "jumping" */ } } .motto .editable-value .view.loading .options { display: none; } .mobile .motto.motto .editable-value .view .options:not(:has(.counter)) { display: none; } @media (max-width: 480px) { .motto.motto .editable-value .view .options:not(:has(.counter)) { display: none; } } /* /MOTTO */ /* ICELAND */ .iceland { display: flex; align-items: center; box-sizing: border-box; padding: 8px; min-height: 64px; border-radius: 60px; background: var(--base-cont-top); box-shadow: var(--shadow-cont-minor-outline); width: 100%; } .iceland__wrapper { display: grid; /* grid-template-columns: repeat(4, minmax(150px, 1fr)); */ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: center; overflow: hidden; gap: 12px 0; flex: 1; padding: 0 8px 0 0; } .iceland__item { position: relative; display: flex; padding: 0 12px; justify-content: center; align-items: center; gap: 10px; } .iceland__item[onclick] { cursor: pointer; } .iceland__item--stat::before { content: ''; display: block; width: 1px; height: 28px; background: var(--base-line-secondary); position: absolute; left: -1px; top: 50%; transform: translateY(-50%); } .iceland__num { font: var(--font-ui-18-title-2-semi); color: var(--base-txt-primary); } @keyframes iceland-item-loading { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10%); } } .iceland__item--loading .iceland__num { animation: iceland-item-loading .4s ease-in-out infinite; color: var(--base-txt-tertiary); } .iceland__label { font: var(--font-txt-13-small-reg); color: var(--base-txt-tertiary); transition: color .1s ease; } .iceland__item[onclick]:hover .iceland__label { color: var(--base-txt-primary); } .iceland__label span.short { display: none; } @media screen and (min-width: 781px) and (max-width: 800px) { .iceland__label span:not(.short) { display: none; } .iceland__label span.short { display: inline-block; } } .iceland__dropdown { display: flex; justify-content: center; gap: 8px; cursor: pointer; } .iceland__dropdown .in { font: var(--font-ui-15-large-reg); color: var(--base-txt-primary); } .iceland__switcher { display: none; } /* /ICELAND */ @media (min-width: 481px) { #dashboard-widgets-mobile-wrapper { display: none; } } @media (max-width: 480px) { .daily-overview__date, .daily-overview__weather { font: var(--font-ui-14-regular-med); } .dashboard__date { position: relative; gap: 4px; #dashboard-widgets-mobile-wrapper { display: flex; gap: 4px; color: var(--base-txt-secondary); } } .dashboard__motto { margin-bottom: 0; } .dashboard__iceland { margin-top: 24px; } .motto { --motto-font-size: 32px; padding: 0 var(--ws-editable-btn-size); max-width: 100%; width: 100%; overflow: hidden; padding: 0; } .motto .editable-value .view { height: 40px; } .motto .editable-value .view > *, .motto .editable-value .input { font: var(--font-ui-32-title-large-med); font-size: var(--motto-font-size); /* font: var(--font-ui-22-title-1-med); */ } .motto .editable-value .view .value-field { white-space: nowrap; padding-left: 0; } .motto .editable-value .input .counter { margin-right: 0; position: absolute; right: 0; opacity: .8; } .motto.motto--hasOverflow .view.loading:after { margin-right: 0; position: absolute; right: 0; top: 10px; opacity: .8; } } @media (max-width: 780px) { .iceland { padding: 0; border-radius: 16px; height: 80px; } .iceland__wrapper { grid-template-columns: repeat(3, 1fr); gap: 0; padding: 0; } .iceland .iceland__item::before { height: 36px; } .iceland__item--dropdown { display: none; } .iceland__item--stat { flex-direction: column; gap: 0; padding: 0; } .iceland__num { font: var(--font-ui-22-title-1-semi); } .iceland__label { font: var(--font-ui-13-small-reg); } .iceland__label span:not(.short) { display: none; } .iceland__label span.short { display: inline-block; } .iceland__switcher { --switcher-active-i: 0; --switcher-n: 0; /* кількість контролів */ --switcher-h: 16px; /* висота одного контролу */ --switcher-g: 4px; /* gap між контролами */ display: flex; align-self: stretch; width: 32px; overflow: clip; border-radius: 0 16px 16px 0; } .iceland__switcherTrack { position: relative; z-index: 2; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 12px; background: var(--base-cont-top); border-radius: 0 12px 12px 0; } .iceland__switcherTrack:after { content: ''; position: absolute; --switcher-offset: calc((100% - (var(--switcher-h) * var(--switcher-n) + var(--switcher-g) * (var(--switcher-n) - 1))) / 2); top: calc( var(--switcher-offset) + (var(--switcher-h) + var(--switcher-g)) * (var(--switcher-active-i) - 1) ); bottom: calc( var(--switcher-offset) + (var(--switcher-h) + var(--switcher-g)) * (var(--switcher-n) - var(--switcher-active-i)) ); left: 50%; transform: translateX(-50%); border-radius: 4px; width: 4px; background: var(--base-txt-primary); pointer-events: none; } .iceland__switcher--backward .iceland__switcherTrack:after { transition: top 0.2s ease, bottom 0.2s ease 0.1s; } .iceland__switcher--forward .iceland__switcherTrack:after { transition: top 0.2s ease 0.1s, bottom 0.2s ease; } .iceland__switcherItem { width: 100%; height: calc(var(--switcher-h) + var(--switcher-g)); padding: calc(var(--switcher-g) / 2) 0; box-sizing: border-box; display: flex; flex-direction: row; align-items: center; justify-content: center; flex-grow: 0; flex-shrink: 0; } .iceland__switcherItem:first-child { flex-grow: 1; align-items: flex-end; } .iceland__switcherItem:last-child { flex-grow: 1; align-items: flex-start; } .iceland__switcherItem:after { content: ''; display: block; width: 4px; height: var(--switcher-h); background: var(--base-txt-muted); border-radius: 4px; transition: background-color .2s ease; } /* .iceland__switcherItem--active:after { background: var(--base-txt-primary); } */ .iceland__switcherCaptionWrapper { position: relative; flex-shrink: 0; margin-left: -10px; width: 30px; box-sizing: border-box; border-radius: 0 16px 16px 0; background: var(--base-txt-muted); overflow: hidden; transition: background-color .2s ease; } .iceland__switcherCaption { --switcher-i: 1; position: absolute; left: 0; padding: 6px 0 6px 8px; box-sizing: border-box; width: 100%; height: 100%; color: var(--base-txt-alt-light); font: 10px/20px var(--font-mono); text-align: center; writing-mode: sideways-lr; text-orientation: sideways; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; text-transform: lowercase; transition: transform 0.2s linear; transform: translateY(calc((var(--switcher-i) - var(--switcher-active-i)) * 100% * -1)); } } @media (min-width: 481px) and (max-width: 780px) { .iceland .avatar { width: 64px; height: 64px; margin-left: 8px; .av_nm { border-radius: 8px; scale: calc(64 / 48); transform-origin: left top; } } .iceland__switcherTrack:hover:has(.iceland__switcherItem--active:hover):after { background: var(--base-txt-max); } .iceland__switcherItem:hover:after { background: var(--base-txt-tertiary); } .iceland__switcherCaptionWrapper:hover { background: var(--base-txt-tertiary); } } .dataadd { width: 66%; min-width: 900px; max-width: 1280px; margin: 0 auto 15px auto; } .rightPanel .dataadd { height: calc(100% - 80px); width: auto; min-width: unset; max-width: unset; margin: 0 20px } .rightPanel .dataadd__empty__img { margin-top: 48px; height: 288px; width: 100%; background-repeat: no-repeat; background-position: center center; } .dataadd { } .dataadd .dataadd_sp { margin: 0 0 24px } .dataadd .buttons { text-align: center; margin: 20px 0 10px 0 } .dataadd p { color: var(--base-txt-secondary) } .dataadd p.ah4 { margin-top: -10px } .dataadd .more_links { float: left; margin: 0 0 24px; font: 14px/20px var(--font-base); } .dataadd .more_links a { color: var(--base-txt-primary) } .dataadd .more_links a:hover { color: var(--base-txt-link-minor) } .dataadd .enl_ { margin: 0 0 24px; clear: both; } .dataadd textarea { width: 100%; border: 1px solid var(--base-cont-top) } .dataadd input.inputmain { width: 100%; padding: 9px 10px; border: 1px solid var(--inp-cont-brd); box-sizing: border-box; height: 50px; } .dataadd .proj_name input.inputmain { padding-right: 38px } .dataadd input.inputmain:focus, .todo_act input.inputmain { box-shadow: var(--shadow-brd-focus); border-color: transparent; outline: none } .dataadd input.empty { color: var(--base-txt-tertiary); font: italic 16px/25px var(--font-base) !important } .rightPanel .dataadd_out { height: calc(100% - 80px); background: var(--base-cont-mid); } .dataadd_out .labels { float: right; height: 50px; background: var(--base-cont-top); width: 49%; margin: 0 0 24px 2%; white-space: nowrap; } .dataadd_out .labels a.inline { display: block; overflow: hidden; border: none; font: 14px/20px var(--font-base); white-space: nowrap; position: relative; padding: 16px 10px; height: 20px; color: var(--base-txt-secondary); } .dataadd_out .labels a.inline:hover { color: var(--base-txt-link-minor) } .dataadd_out .labels_act a.inline { padding: 15px 10px 9px 12px; } .dataadd_out .labels .tags { } .dataadd_out .labels .tags b { font: 14px/20px var(--font-base) } .dataadd_out .labels:hover .tags b { border-bottom: 1px dashed } .dataadd_out .labels a.inline span.drop { position: absolute; top: 4px; right: 0; border: 7px solid var(--base-cont-top) } .dataadd_out .labels a.inline label { font: 13px/20px var(--font-base); color: var(--base-txt-secondary); position: absolute; top: 0; right: 30px; background: -moz-linear-gradient(left, var(--trans) 0%, var(--base-cont-top) 25%); background: -webkit-linear-gradient(left, var(--trans) 0%,var(--base-cont-top) 25%); background: linear-gradient(to right, var(--trans) 0%,var(--base-cont-top) 25%); filter: progid:DXImageTransform.Microsoft.gradient( startColor=0, endColorstr='var(--base-cont-top)',GradientType=1 ); padding: 9px 0 9px 40px; cursor: pointer } .dataadd_out .labels a.inline span.ico_l { position: absolute; top: 9px; left: 7px } .dataadd_out span.drop { } .dataadd_out a:hover span.drop { } .dataadd_out .user_to { float: left; background: var(--base-cont-top); width: 49%; height: 50px; margin: 0 0 24px; } .dataadd_out .user_to_r { float: right } .dataadd_out .user_to a.inline { overflow: hidden; display: block; border: none; font: 14px/20px var(--font-base); white-space: nowrap; position: relative; padding: 16px 8px 16px 50px; color: var(--base-txt-secondary); } .dataadd_out .user_to_act a.inline { color: var(--base-txt-accent) } .dataadd_out .user_to a.inline:hover { color: var(--base-txt-link-minor) } .dataadd_out .user_to a.inline b { font: 14px/20px var(--font-base); } .dataadd_out .user_to:hover a.inline b { border-bottom: 1px dashed } .dataadd_out .user_to:hover a.inline_no b { border-bottom: none !important } .dataadd_out .user_to a.inline span.drop { position: absolute; top: 4px; right: 0; border: 7px solid var(--base-cont-top) } .dataadd_out .user_to a.inline label { font: 13px/20px var(--font-base); color: var(--base-txt-secondary); position: absolute; top: 9px; right: 30px; background: -moz-linear-gradient(left, var(--trans) 0%, var(--base-cont-top) 25%); background: -webkit-linear-gradient(left, var(--trans) 0%,var(--base-cont-top) 25%); background: linear-gradient(to right, var(--trans) 0%,var(--base-cont-top) 25%); filter: progid:DXImageTransform.Microsoft.gradient( startColor=0, endColorstr='var(--base-cont-top)',GradientType=1 ); padding: 0 0 0 40px; cursor: pointer } .dataadd_out .user_to a.inline .av_sm { position: absolute; top: 14px; left: 12px; border-radius: 0; } .dataadd_out .user_to .ico_r { margin: 16px 10px; display: none; position: relative; z-index: 10; } .dataadd_out .user_to i.help { float: right; margin: 16px 10px; } .dataadd_out .user_to_act i.help { display: none } .dataadd_out .user_to_act a.ico_r { display: inline } .dataadd_out .labels span.ico_r { float: left; margin: 16px 5px 2px 15px; position: relative; z-index: 10; } .dataadd_out .labels_act span.ico_r { float: right; margin: 8px 10px 2px } .dataadd_out .labels a.ico_r { display: none; margin: 16px 10px 2px; } .dataadd_out .labels_act span.ico_r { display: none } .dataadd_out .labels_act a.ico_r { display: inline } .dataadd_out .labels i.help { float: right; margin: 9px 10px } .dataadd_out .labels_act i.help { display: none } .dataadd_out #dataadd_group .labels .ico_l { margin: 5px 0 0 10px } .dataadd_out #dataadd_group .labels .tags b { font: 13px/20px var(--font-base); } .dataadd_out .labels, .dataadd_out .user_to { position: relative; } .dataadd_out span.norm { display: none; position: absolute; top: 7px; right: 35px; font: 13px/20px var(--font-base); color: var(--base-txt-tertiary); padding: 2px 5px 2px 10px; background-color: var(--base-cont-top); z-index: 1 } .dataadd_out .labels_act span.norm, .dataadd_out .user_to_act span.norm { display: inline; top: 14px; } .dataadd_out .labels_act:hover .data-title-l2[data-title]:after { top: 10px } .modal .dataadd_out span.norm { background-color: var(--base-cont-mod-top) } .dataadd_out .width50 { width: 48%; } .dataadd_out .labels_plain { height: 20px; margin: 0 20px 24px 0; } .dataadd_out .labels_plain .ico_tag { margin: 0 7px 0 2px; } .dataadd_out .labels_plain a font { color: var(--base-txt-primary); } .dataadd_out .labels_plain a:hover font { color: var(--base-txt-link-minor) } .dataadd_out .labels_plain .ico_delete { display: none } .dataadd_out .labels_plain.labels_act .ico_delete { display: block; margin: 0 7px 0 2px; } .dataadd_out .labels_plain.labels_act .ico_tag { display: none } /* ----------- MinifyCSS: LIGHT THEMEMinifyCSS: LIGHT THEME ----------- */.dataadd_out .labels_plain .tags span.tag {filter:contrast(1.2);} /*----------- MinifyCSS: STOPMinifyCSS: STOP ----------- */ .dataadd_out .options { float: left; background: var(--base-cont-top); width: 49%; margin: 0 0 24px; padding: 16px 10px; box-sizing: border-box; font: 14px/20px var(--font-base); color: var(--base-txt-accent); display: block; white-space: nowrap; cursor: pointer; } .dataadd_out .options_r { float: right } .dataadd_out .options:hover .in { border-bottom: 1px dashed } .dataadd_out .options b[rel=workflow] { display: inline-block; max-width: 180px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; vertical-align: top } .dataadd_out .options .ico_l { margin: 0 15px 0 5px; } .dataadd_out .options em { font-style: normal; color: var(--base-txt-tertiary); } .dataadd_out .options:not(.options_r) i.help { float: right; } .dataadd_out .projects { margin: 12px 0 24px; padding: 9px 9px 4px; } .modal .dataadd_out .user_to, .modal .dataadd_out .options { background: var(--base-cont-mod-top); border-radius: 4px; box-shadow: var(--shadow-cont-minor); } .modal .dataadd_out .user_to, .modal .dataadd_out .options_w { float: none; width: auto; margin: 0 0 15px 0 } .modal .dataadd_out .options .in_def { color: var(--base-txt-secondary) } .modal .dataadd_out .options:hover .in_def { color: var(--base-txt-link-minor) } .modal .dataadd_out .options:not(.options_act) .in:not(.in_def) { display: none } .modal .dataadd_out .options:not(.options_act) .dots { display: none } .modal .dataadd_out .options:not(.options_act) .ico_delete { display: none } .modal .dataadd_out .options_act .in_def { display: none } .modal .dataadd_out .options_act .help { display: none } .modal .dataadd_out .options .ico_starbig_a { margin: -2px 12px 0 3px } .dataadd_out .terms { background: var(--base-cont-low); width: 49%; float: left; height: 95px; margin: 0 0 24px } .dataadd_out .terms .inline { border-bottom-width: 0 } .dataadd_out .terms:hover .inline { border-bottom-width: 1px } .dataadd_out .terms_wide { width: 100%; float: none } .dataadd_out .terms h4 { line-height: 20px; margin: 0 } .dataadd_out .terms .in { padding: 18px 15px; height: 20px; background: var(--base-cont-top); font: 14px/20px var(--font-base); color: var(--base-txt-secondary); } .dataadd_out .terms .in a.inline:hover { color: var(--base-txt-link-minor) } .dataadd_out .terms .in a.inline:hover b { color: var(--base-txt-link-minor) } .dataadd_out #dataadd_group .terms .in { padding: 15px 10px; } .dataadd_out #dataadd_group .terms .in a.inline { border-bottom: none } .dataadd_out #dataadd_group .terms .in a.inline:hover { /* color:inherit */ } .dataadd_out #dataadd_group .terms .in a.inline font { } .dataadd_out #dataadd_group .terms:hover .in a.inline { border-bottom: 1px dashed; } .dataadd_out #dataadd_group .limit .time, .dataadd_out #dataadd_group .limit .money { padding: 9px 0; } .dataadd_out #dataadd_group .limit .time_, .dataadd_out #dataadd_group .limit .money_ { margin-left: 40px; } .dataadd_out .terms .in b { color: var(--base-txt-accent) } .dataadd_out .terms .top { background: var(--base-cont-top); padding: 9px 15px; border-bottom: 1px solid var(--base-line-alt-gap-minor) } .dataadd_out .terms .top_tabs { background: var(--base-cont-low); border-bottom: 1px solid var(--base-line-alt-gap-minor); height: 38px } .dataadd_out .terms .top_tabs a { float: left; padding: 9px 15px; color: var(--base-txt-secondary); border-right: 1px solid var(--base-line-alt-gap-minor); font: 13px/20px var(--font-base); } .dataadd_out .terms .top_tabs a:last-child { border-right-width: 0; margin-right: -100px; } .dataadd_out .terms .top_tabs a.act { margin: 0 0 -1px 0; padding-bottom: 10px; background: var(--base-cont-top); border-right-width: 1px; } .dataadd_out .terms .top_tabs a .ico_l { margin: -5px 7px -5px -3px } .dataadd_out .terms .top_tabs a:first-child { padding-right: 5px; } .dataadd_out .terms .term span { float: left; width: 1px; height: 1px; overflow: hidden; margin: -30px 0 0 -10px } .dataadd_out .terms .term span input { margin-left: 1px } .dataadd_out .terms .term a { color: var(--base-txt-secondary); border-bottom: 1px dashed var(--base-txt-secondary); font: 14px/20px var(--font-base) } .dataadd_out .terms .term a.ico { border-bottom: none; margin: 0 -2px 0 -20px } .dataadd_out .terms .start_pre { float: left; width: 30%; margin: -10px 0 -10px 0; white-space: nowrap; overflow: hidden } .dataadd_out .terms .len_pre { float: left; width: 20%; border-left: 1px solid var(--base-line-secondary); margin: -10px 0 -10px -1px; text-align: center; height: 40px; } .dataadd_out .terms .len_pre2 { float: right; margin-right: -15px; } .dataadd_out .terms .end_pre { float: left; width: 46%; border-left: 1px solid var(--base-line-secondary); margin: -10px -10px -10px -1px; padding: 0 0 0 4%; height: 40px; white-space: nowrap; overflow: hidden } .dataadd_out .terms small { text-transform: uppercase; font: 10px/16px var(--font-base); display: block; color: var(--base-txt-tertiary) } .dataadd_out .terms .len_pre small { text-transform: lowercase; font: 10px/10px var(--font-base); margin: -2px 0 4px 0 } .dataadd_out .terms .len_pre .input { border: none; background: var(--inp-hlt-bg); color: var(--base-txt-link-minor); font: 20px/26px var(--font-base); height: 26px; width: 40px; text-align: center; padding: 0 } .dataadd_out .terms a.inline:hover { color: inherit } .dataadd_out .limit { background: var(--base-cont-low); width: 49%; float: right; height: 95px; color: var(--base-txt-secondary); margin: 0 0 24px } .dataadd_out .limit .top { padding: 9px 15px; border-bottom: 1px solid var(--base-line-alt-gap-minor) } .dataadd_out .limit h4 { line-height: 20px; margin: 0; color: var(--base-txt-secondary); font: 13px/20px var(--font-base); } .dataadd_out .limit .time { float: left; width: 50%; height: 32px; padding: 12px 0; position: relative; } .dataadd_out .limit .money { float: left; width: 50%; height: 32px; padding: 12px 0; position: relative } .dataadd_out .limit .arr { float: left; width: 40px; height: 33px; margin: 0 0 0 15px; } .dataadd_out .limit .time .arr2 { position: absolute; right: 0; top: 0; height: 56px; border-right: 1px solid var(--base-line-alt-gap-major) } .dataadd_out .limit .time_, .dataadd_out .limit .money_ { padding: 5px 0 0 0; margin: 0 10px 0 45px; overflow: hidden; position: relative; } .dataadd_out .limit .time_ input, .dataadd_out .limit .money_ input { width: 300px; border: none; background: transparent; font: 18px/24px var(--font-base); padding: 0; } .dataadd_out .limit .time_ input:focus, .dataadd_out .limit .money_ input:focus { outline: none } .dataadd_out .limit .time_ label, .dataadd_out .limit .money_ label { position: absolute; left: 0; top: 0; background: var(--base-cont-low); font: 13px/26px var(--font-base); padding: 3px 0 0 0; color: var(--base-txt-secondary); } .dataadd_out .limit .time_act .time_ label, .dataadd_out .limit .money_act .money_ label { right: 0; left: auto; } .dataadd_out .limit .time_act, .dataadd_out .limit .money_act { background: var(--base-cont-top) } .dataadd_out .limit .time_act .time_ label, .dataadd_out .limit .money_act .money_ label { background: var(--base-cont-top) } .modal .dataadd_out .limit { background: var(--base-cont-mod-low) } .modal .dataadd_out .limit .time_act, .modal .dataadd_out .limit .money_act { background: var(--base-cont-mod-top) } .modal .dataadd_out .limit .time .time_ label, .modal .dataadd_out .limit .money .money_ label { background: var(--base-cont-mod-low) } .modal .dataadd_out .limit .time_act .time_ label, .modal .dataadd_out .limit .money_act .money_ label { background: var(--base-cont-mod-top) } .dataadd_out .limit .time_act input { color: var(--costs-time-major) } .dataadd_out .limit .money_act input { color: var(--costs-money-major) } .dataadd_out .limit .time_wide, .dataadd_out .limit .money_wide { float: none; width: 100%; margin: 0 } .dataadd_out .arr .ico { float: left; margin: 0 } #dataadd_group_out { position: relative } #dataadd_group { position: absolute; right: 0; top: 0; width: 40%; box-shadow: 0 0 2px var(--colors-alpha-dark-20); } .dataadd_out #dataadd_group .user_to { width: auto; float: none; margin: 0; overflow: hidden; } .dataadd_out #dataadd_group .labels { float: none; width: auto; clear: both; border-top: 1px solid var(--base-surf-top); background: var(--base-cont-low); margin: 0; } .dataadd_out #dataadd_group .labels_act, .dataadd_out #dataadd_group .labels_opened { background: var(--base-cont-top) } .dataadd_out #dataadd_group .terms, .dataadd_out #dataadd_group .limit { float: none; width: auto; margin: 0; background: var(--base-cont-low); border-top: 1px solid var(--base-surf-top); height: 50px; } .dataadd_out #dataadd_group .terms .in .ico_l { margin: -5px 10px -5px 0 } .dataadd_out #dataadd_group .terms .in { background: var(--base-cont-low); font: 13px/20px var(--font-base) } .dataadd_out #dataadd_group .terms_act .in { background: var(--base-cont-top) } .dataadd_out #dataadd_group .limit .in { padding: 0 } .dataadd_out #dataadd_group .top { display: none } .dataadd_out #dataadd_group .limit .arr { margin: 1px 0 0 10px } .dataadd_out #dataadd_group .limit .time .arr2 { height: 38px; } .dataadd #mailing { padding: 15px; margin: 0 } .dataadd #mailing .head { margin: 0; white-space: nowrap; overflow: hidden } .dataadd #mailing .head a.all { color: var(--base-txt-tertiary); border-bottom: 1px dashed var(--base-line-tertiary); float: right } .dataadd #mailing .in { margin: 15px 0 0 0 } .dataadd #mailing .head b, .dataadd #mailing .head a.inline { font: 15px/25px var(--font-base); color: var(--base-txt-accent) } .dataadd span.ico_mailing { margin: 0 10px 0 0 } .dataadd #mailing p.gray { margin: 0; padding: 15px 0 0 0 } .dataadd a.hidden { background: var(--base-btn-fresh-minor); float: left; width: 6%; padding: 9px 0 0 0; height: 25px; margin: 0 2% 0 0; text-align: center; border-radius: 5px } .dataadd a.hidden_act, body.desktop .dataadd a.hidden:hover { background: var(--base-hlt-w-pressed) } .dataadd a.hidden_act { border-radius: 5px 5px 0 0 } .dataadd a.hidden_act { padding-bottom: 15px; margin-bottom: -35px } .dataadd .datablock { float: left; width: 49% } .dataadd .datablock_r { float: right; width: 49% } .modal__content .dataadd_out .limit_pre { background: var(--base-cont-mod-low); height: 4px; } .modal__content .dataadd_out .limit { width: auto; float: none; margin: 0; height: 56px; border-top: 1px solid var(--base-line-alt-gap-minor); border-bottom: 1px solid var(--base-line-alt-gap-minor); } .modal__content .dataadd_out .limit .progress2 { margin-top: 0 } #dataadd_group .limit .progress_pre { margin: 0; position: absolute; bottom: -4px; left: 0; right: 0 } .dataadd_out .limit .progress_pre { padding: 0; margin: -17px 0 12px; height: 5px; overflow: hidden } .dataadd_out .limit .time .progress_pre { border-radius: 0 4px 0 0 } .dataadd_out .limit .money .progress_pre { border-radius: 4px 0 0 0 } .dataadd_out .limit .progress2 { height: 5px; background: var(--base-surf-top) } .dataadd_out .limit .progress2.progress2_time { width: calc(100% - 0.5px) } .dataadd_out .limit .progress2 div, .dataadd_out .limit .progress2.progress2_nofill div { height: 5px !important } .dataadd_out .limit .progress2.progress2_over, .dataadd_out .limit .progress2.progress2_over2 { box-shadow: none !important } .dataadd_out .limit .progress2.progress2_time.progress2_over, .dataadd_out .limit .progress2.progress2_time.progress2_over2 { background: var(--costs-time-minor) } .dataadd_out .limit .progress2.progress2_money.progress2_over, .dataadd_out .limit .progress2.progress2_money.progress2_over2 { background: var(--costs-money-minor) } .dataadd .tree { margin: 0 0 15px; font: 14px/20px var(--font-base); color: var(--base-txt-accent) } .dataadd .tree a.p { border-bottom: 1px dashed; color: var(--base-txt-accent); display: inline-block; max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: top } .dataadd .tree a.pb { font-weight: bold; color: inherit; } .dataadd .tree a.pb:hover { border-bottom: 1px dashed; } .dataadd .tree .ico_folder_big { margin: -7px 5px -3px 0; } body.mobile .dataadd .tree a.p { border-bottom: 1px dashed var(--base-line-alt-cardbrd) } .dataadd .tree a.button_white { vertical-align: top; margin-top: -2px } .dataadd .tree i { font-weight: normal; color: var(--base-txt-link-major); margin: 1px 6px -1px; font: 16px/20px var(--font-base); vertical-align: top; display: inline-block; } /*--------------------------------------------------------------------------------------------------------------------*/ .proj_name { position: relative; margin: 0 210px 24px 0 } .proj_name_st { margin: 0 240px 24px 0 } .proj_name .proj_color { position: absolute; right: 50px; top: 2px; height: 46px; width: 8px; z-index: 1; border-radius: 10px 0 0 10px; } .proj_status { position: absolute; right: 1px; top: 1px; font: 14px/48px var(--font-base); height: 38px; background: -moz-linear-gradient(left, var(--trans) 0%, var(--inp-cont-top) 25%); background: -webkit-linear-gradient(left, var(--trans) 0%,var(--inp-cont-top) 25%); background: linear-gradient(to right, var(--trans) 0%,var(--inp-cont-top) 25%); filter: progid:DXImageTransform.Microsoft.gradient( startColor=0, endColorstr='var(--inp-cont-top)',GradientType=1 ); text-align: right; padding: 0 0 0 35px; width: 126px; color: var(--base-txt-secondary); border-radius: 0 3px 3px 0; } .proj_status .in { margin-left: -50px } .proj_statusw { width: 130px } .proj_name span.label { position: absolute; right: 48px; top: 2px; font: 14px/44px var(--font-base); height: 44px; background: -moz-linear-gradient(left, var(--trans) 0%, var(--inp-cont-top) 25%); background: -webkit-linear-gradient(left, var(--trans) 0%,var(--inp-cont-top) 25%); background: linear-gradient(to right, var(--trans) 0%,var(--inp-cont-top) 25%); filter: progid:DXImageTransform.Microsoft.gradient( startColor=0, endColorstr='var(--inp-cont-top)',GradientType=1 ); padding: 0 10px 0 40px; color: var(--base-txt-secondary); } .proj_name .prior_big { position: absolute; right: 1px; top: 1px; font: 18px/48px var(--font-base); height: 48px; width: 48px; text-align: center; color: var(--white-accent); border-radius: 0 3px 3px 0; } .proj_status:hover { color: var(--base-txt-max) } .proj_status span[class*=ico] { background: var(--projcond-active-bg) url(/assets/img/color/separators_iconset.svg) 0 -90px; width: 30px; height: 30px; float: right; margin: 0 0 0 20px; border: 5px solid var(--projcond-active-bg); border-radius: 0 3px 3px 0; border-width: 9px; } .proj_color0 + .proj_status span[class*=ico] { margin-left: 14px } span.ico_proj_archive { background-color: var(--projcond-archive-bg); background-position: -60px -90px !important } span.ico_proj_wait { background-color: var(--projcond-muted-bg-solid); background-position: -30px -90px !important } .ico_l.ico_proj_wait2 { margin: -5px 5px -5px 0; } .proj_status span.ico_proj_archive { border-color: var(--projcond-archive-bg) } .proj_status span.ico_proj_wait { border-color: var(--projcond-muted-bg-solid); } .proj_status_sel { width: 150px; } .proj_statusw_sel { width: 180px } .proj_status_sel a.pra { font: 14px/32px var(--font-base); clear: both; display: block; color: var(--base-txt-accent); background: var(--menu-cont-top); padding: 0 0 0 10px; text-align: left; height: 30px; margin: 4px 0 0; border-radius: 4px; overflow: hidden } .proj_status_sel a.pra span[class*=ico] { background: var(--projcond-active-bg) url(/assets/img/color/separators_iconset.svg) 0 -90px; width: 30px; height: 30px; float: right; margin: 0 0 0 10px; border-radius: 4px; } .proj_status_sel a.pra0:hover, .proj_status_sel a.pra0 span[class*=ico], a.pr_st0, span.pr_st0 { background-color: var(--projcond-archive-bg); color: var(--projcond-archive-txt) } .proj_status_sel a.pra1:hover, .proj_status_sel a.pra1 span[class*=ico], a.pr_st1, span.pr_st1 { background-color: var(--projcond-active-bg); color: var(--projcond-active-txt) } .proj_status_sel a.pra2:hover, .proj_status_sel a.pra2 span[class*=ico], a.pr_st2, span.pr_st2 { background-color: var(--projcond-muted-bg-solid); color: var(--projcond-muted-txt) } .dataadd_ .button_r { margin: 0 } a.button_task { width: 135px; padding: 15px 45px 15px 15px; } a.button_task_edit, a.button_subtask_edit, a.button_project { width: 167px; text-align: center; padding: 14px 15px; } input.button_search { width: 135px; text-align: center; height: 50px; } a.button_subtask_edit { width: 197px; text-align: center } a.button_subtask { width: 165px; padding: 15px 45px 15px 15px; } .place_button a.button_subtask { width: auto; white-space: nowrap } .buttons_center a.button_task { width: auto; white-space: nowrap } a.button_task .ico_r, a.button_subtask .ico_r { margin: 0 -30px 0 0; } a.button_task:hover .ico_r, a.button_subtask:hover .ico_r { opacity: 1 } a.button_task:hover .ico_newtask1, a.button_subtask:hover .ico_newtask1 { transform: scale(0.1,0.1); -webkit-transform: scale(0.1,0.1) } .dataTable__item td > .in { display: flex; align-items: center; overflow: hidden; color: inherit; padding: 2px 8px; height: 100%; white-space: nowrap; width: 100%; box-sizing: border-box; container: sidebar / inline-size; } .dataTable__item td { position: relative; } .dataTable__item td:not(.td_name) > div.in[onclick]:hover, .dataTable__item td:not(.td_name) > div.in:has(.td_onclick):hover, .dataTable__item td:not(.td_name) > a.in:hover { color: var(--base-txt-primary); background: var(--base-hlt-g-easy); } .withMass .dataTable__item td:not(.td_name) > div.in[onclick]:hover, .withMass .dataTable__item td:not(.td_name) > a.in:hover { color: inherit; background: inherit; } .dataTable__item td .b_fl { font: var(--font-ui-13-small-semi); } .dataTable__item td .b_fl { display: none; } .dataTable__item td:hover .b_fl { display: block; } .dataTable__item td:hover .b_br { display: none; } .dataTable__item:not(.dataTable__item-group) td .in ws-btn { margin: 0 0 0 4px; } .dataTable__item td .data { overflow: hidden } .dataTable__item .space-asTD { border-left: var(--screen-px) solid var(--base-line-tertiary); height: 40px; margin: -2px -8px -2px 8px; --icon-color: var(--base-txt-tertiary) } .dataTable__item { td.td_canvas > .in { padding: 0; canvas { height: 40px; pointer-events: none; } } /*td.td_canvas_none ws-chart {*/ /* display: none;*/ /*}*/ } /* following selector refactor >>>> */ .dataTable__item progress-pie { width: 20px; height: 20px; } .dataTable__item .pie i { border-color:var(--base-cont-top); } .dataTable__item .pie:after { background:var(--base-cont-top); } /* <<<< following selector refactor */ .dataTable__item { td { .data > .space { margin-left: -8px; } .space { project-stage, task-stage { display: block; width: auto; flex-grow: 0; } .proj_color { width: 20px; height: 20px; padding: 2px; border-radius: 6px; ws-emoji { width: 20px; height: 20px; } } } } } /* data place > */ .dataTable__item td .data_place { display: none; gap: 4px; overflow: hidden; width: 100%; } .dataTable__item td .data_place > .in { padding: 0 4px; } .dataTable__item.dataTable__item-new td .data_place, .dataTable__item td:hover .data_place { display: flex; font: var(--font-ui-11-micro-reg); color: var(--base-txt-tertiary); } @container (width >= 50px) { .dataTable__item .data_place > .space, .dataTable__item .data_place > ws-icon { display: none; } } @container (width < 50px) { .dataTable__item .data_place { justify-content: center } .dataTable__item .data_place > .in { display: none; } } @container (width >= 100px) { .dataTable__item .data_place > ws-icon { margin-left: -8px; } } /* < data place */ /* NAME > */ .dataTable__item .td_name { .in, .name, .editable-value { font: var(--font-ui-14-regular-med); } } .dataTable__item .td_name .new_dot { --hint-parent: none; --hint-dir: none; --hint-offset: none; svg { fill: var(--base-txt-btn-c); } } .dataTable__item .td_name > .in ws-btn { --hint-color: none; --hint-parent: none; --hint-dir: none; --hint-offset: none; } /* < NAME */ /* STAR > */ .dataTable__item td.td_star { .in { justify-content: center; padding: 0 !important; } } .dataTable__item .td_star .bookmark { width: 100%; height: 100%; align-items: center; justify-content: center; display: none; } .withMass .dataTable__item { ws-editable { pointer-events: none; } &:hover { & .td_star .bookmark { display: none } } } .dataTable__item:hover .td_star .bookmark, .withMass .dataTable__item .td_star .bookmark.bookmark-active, .dataTable__item .td_star .bookmark.bookmark-active { display: flex; } /* < STAR */ /* ASSIGNEE,MANAGER > */ .dataTable__item { .td_manager, .td_assignee { position: relative; .in ws-btn { display: none; margin: 0 0 0 4px; } &:hover .in ws-btn { display: inline-block; } } project-assignee, task-assignee { flex-grow: 1;display: flex;width: 100%; .data {flex-grow: 1;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} .data:has(ws-icon[data-status="free"]) { flex-direction: row-reverse; .space { display: none; } ws-icon[data-status="free"] { margin-right: 8px; } } } } .dataTable__item.dataTable__item-new td:hover { project-assignee, task-assignee { .data > .space { display: none; } } } @container (width >= 100px) { .dataTable__item { project-assignee, task-assignee { .data > .space { margin-left: -8px; } } } } @container (width < 100px) { .dataTable__item-new td:hover { project-assignee, task-assignee { .data > .space { display: none; } } } .dataTable__item { project-assignee, task-assignee { justify-content: center; .in { display:none !important; } .space { width:24px !important; margin-left: 0 !important; } .data { flex-grow: 0; } .data > * {position: relative;z-index: 1;} .in ~ ws-icon { z-index: 0; position: absolute; left: 0; top: 0; width: 100%; height: 100%; &~ws-icon { display: none; } &[data-status="warning"] { background: var(--base-hlt-w-hover); } &[data-status="birthday-today"] { background: var(--colorize-lbl-yellow-bg); } &[data-status="birthday-tomorrow"] { background: var(--colorize-lbl-yellow-bg); } &[data-status="sick-leave"] { background: var(--colorize-lbl-indigo-bg); } &[data-status="vacation"] { background: var(--colorize-lbl-darkaqua-bg); } &[data-status="day-off"] { background: var(--colorize-lbl-darkaqua-bg); } } } .td_manager, .td_assignee { .space:has(~ ws-icon) { opacity: 0; transition: opacity .2s ease; visibility: hidden; } &:has(.ico_holiday_desat), &:hover { .space { opacity: 1; visibility: unset; } } .in ws-btn { margin: 0; } } } } /* < ASSIGNEE,MANAGER */ /* AUTHOR > */ .dataTable__item task-author, .dataTable__item .td_author { display: flex;width: 100%;flex-grow: 1; .data {flex-grow: 1;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} .data .av_sm { scale: 0.8333; } .data .in { font: var(--font-ui-11-micro-reg); color: var(--base-txt-tertiary); } } @container (width >= 100px) { .dataTable__item task-author, .dataTable__item .td_author { .data .space { margin-left: -8px; } } } @container (width < 100px) { .dataTable__item task-author, .dataTable__item .td_author { .data { justify-content: center; flex-grow: 1; } .data .in { display: none !important; } .data .space { width:24px !important; margin-left: 0 } } } .dataTable__item.dataTable__item-newTask .td_author { height: 44px; } /* < AUTHOR */ /* STAGE > */ .dataTable__item { project-stage, task-stage { width: 100%; flex-grow: 1; display: flex; .data {flex-grow: 1;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} span:not(.data_place) ws-icon { position: inherit !important; } span:not(.data_place) ws-icon:before { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: color-mix(in hsl,transparent,var(--tag-bg) 50%); /*z-index: -1;*/ } } } @container (width >= 100px) { .dataTable__item { project-stage, task-stage { .data > ws-icon { width: 40px; margin-left: -8px; } } } } @container (width < 100px) { .dataTable__item { project-stage, task-stage { justify-content: center; .in { display:none !important;} .space { width:24px !important; } .data {flex-grow: 0;} ws-icon {width: 20px;} .in ws-btn {margin: 0;} } .td_stage:hover { .data_place { width: unset; } .data_place > ws-icon { display: inline-flex; } } } } /* < STAGE */ /* LABELS > */ .dataTable__item { task-tags, project-tags { display: flex; flex-grow: 1; .data {flex-grow: 1;} } .td_labels { .tag:before {display:block;} .tags span.tag { margin-bottom: 0; } } } @container (width < 100px) { .dataTable__item { task-tags, project-tags { .data { flex-grow: 0; } } } } /* < LABELS */ /* TERMS > */ .dataTable__item { project-term, task-term { display: flex; flex-grow: 1; height: 100%; padding: 0 8px !important; margin: 0 -8px; .data {gap: 4px;overflow: hidden;flex-grow: 1;} .data > .in {padding: 0 4px;gap: 4px;} } .td_terms ws-icon[name=repeat] { --icon-size: 16px; --icon-color: var(--base-txt-btn-a); } .td_terms .data.muted { padding: 0 4px; } .td_terms .space, .td_terms ws-icon { width: 28px; height: 28px; box-sizing: border-box; border-radius: 14px } .td_terms:has(.hot) { background: var(--base-hlt-w-notr-easy); } .td_terms:has(.warm) { background: var(--base-hlt-b-easy); } .td_terms:has(.today) { background: var(--base-hlt-alt-notice); } &:hover, &.selected { .td_terms:has(.hot) { background: var(--base-hlt-w-notr-easy) linear-gradient(0deg, var(--base-hlt-g-easy), var(--base-hlt-g-easy)); } .td_terms:has(.warm) { background: var(--base-hlt-b-easy) linear-gradient(0deg, var(--base-hlt-g-easy), var(--base-hlt-g-easy)); } .td_terms:has(.today) { background: var(--base-hlt-alt-notice) linear-gradient(0deg, var(--base-hlt-g-easy), var(--base-hlt-g-easy)); } } .td_terms .data > .indicator { --hint-parent: none; --hint-dir: top_right; --hint-offset: none; } .td_terms .data > span:last-child { --hint-parent: none; --hint-dir: top_left; --hint-offset: none; } &.listing__item-done .td_terms:hover div.in { background: var(--base-hlt-g-easy); } } .dataTable__item.listing__item-done .td_terms > .in > task-term .data_place .in { display: none; } @container (width < 100px) { .dataTable__item { project-term, task-term { .data { flex-grow: 0; .terms_label_hot,.terms_label_today,.terms_label_warm { display: none; } } } } } @container (width < 150px) { .dataTable__item { project-term, task-term { .data .indicator { display: none; } } } } @container (width < 180px) { .dataTable__item { project-term, task-term { .data { .terms_label_related, .terms_label_wait { display: none; } .terms_label_today,.terms_label_warm { font-size: 0; width: 4px; } } } } } @container (width < 240px) { .dataTable__item { project-term, task-term { .data { .terms_label_related span:not(.val),.terms_label_wait span:not(.val) { display: none; } } } } } /* < TERMS */ /* FILE SIZE > */ .dataTable__item td .data-size[data-size] { width: 100%; text-align: right; &[data-size="0"] { display: none; } & .value { font: var(--font-ui-14-regular-reg); } & .unit { font: var(--font-ui-10-nano-reg); font-variant: tabular-nums; padding-left: 2px; } &.b .value { font: var(--font-ui-12-mini-reg);} &.b { color: var(--base-txt-muted); } &.kb { color: var(--base-txt-tertiary); } &.mb .value { color: var(--base-txt-primary); } &.gb { .value { font: var(--font-ui-14-regular-bold); } .value, .unit { color: var(--base-btn-alert-primary-major); } } &.huge { .value { font: var(--font-ui-14-regular-bold); } .value, .unit { color: var(--base-hlt-w-invert-minor); } } } /* < DISK SIZE */ /* ROLE > */ .dataTable__item td .data-role { overflow: hidden; flex-shrink: 1; ws-icon { --icon-size:16px; } .in {font: var(--font-ui-12-mini-reg);color: var(--base-txt-secondary);} .space { margin-left: -8px; } } /* < ROLE */ /* NUMBER > */ .dataTable__item td .data-number { width: 100%; text-align: right; } /* < NUMBER */ /* STRING > */ .dataTable__item td .data-string { overflow: hidden; flex-shrink: 1; ws-icon { --icon-size:16px; } .space { margin-left: -8px; } } /* < STRING */ /* DATE > */ .dataTable__item td .data-date { width: 100%; text-align: right; .in { justify-content: end; font: var(--font-ui-11-micro-reg); font-family: var(--font-mono); color: var(--base-txt-tertiary); } } /* < DATE */ /* LAST ACTIVITY > */ .dataTable__item td .data-last-activity { width: 100%; last-activity { width: 100%; } .data { overflow: hidden; .space {width: 32px;margin-left: 0} .in {font: var(--font-ui-11-micro-reg);} } ws-icon { width:16px; --icon-size:12px; --icon-color:var(--base-txt-tertiary); } ws-icon[name=rex] { --icon-size:16px; } ws-icon, ws-icon svg {max-height: 16px;} } .dataTable__item-activeToday .td_last_activity ws-icon { --icon-color:var(--lbl-today-major); } .dataTable__item-activeYesterday .td_last_activity ws-icon { --icon-color:var(--lbl-yesterday-major); } .dataTable__item-inactive .td_last_activity { color:var(--base-txt-tertiary); ws-icon { --icon-color:var(--base-txt-muted); } } @container (width >= 100px) { .dataTable__item .td_last_activity .data > .space { margin-left: -8px; } } @container (width < 100px) { .dataTable__item .td_last_activity { .data { justify-content: center; .in {display: none !important;} } } } /* < LAST ACTIVITY */ /* ACTIVITY CHART > */ .dataTable__item td.td_activity .data-chart { width: 100%; } /* < ACTIVITY CHART */ /* TASKS_PROGRESS_DONE > */ .dataTable__item { .data-tasks-progress-done { width: 100%; .data { font: var(--font-ui-12-mini-reg); } .bar .data b { border-right:1px solid var(--base-line-secondary); padding:0 4px 0 0; margin:0 4px 0 0; } progress-bar, .progress, .progress_na { height:8px; width: 100%; display: block; margin-top: 0; } .data, .bar_sm { display: none; } } td:has(.data-tasks-progress-done .over) { background: var(--base-hlt-w-notr-easy); } &:hover td:has(.data-tasks-progress-done .over) { background: var(--base-hlt-w-notr-easy) linear-gradient(0deg, var(--base-hlt-g-easy), var(--base-hlt-g-easy)); } &.selected td:has(.data-tasks-progress-done .over) { background: var(--base-hlt-w-notr-easy) linear-gradient(0deg, var(--base-hlt-g-easy), var(--base-hlt-g-easy)) !important; } } @container (width < 100px) { .dataTable__item .data-tasks-progress-done { .bar { display: none !important; } .bar_sm { display: flex; justify-content: center; } .bar_sm progress-pie { padding: 0; } } } @container (width >= 150px) { .dataTable__item td:hover .data-tasks-progress-done { .data { display: block; } progress-bar { display: none } } } /* < TASKS_PROGRESS_DONE */ /* COSTS_PROGRESS_MONEY, COSTS_PROGRESS_TIME > */ .dataTable__item { .data-costs-progress-money, .data-costs-progress-time { width: 100%; .data .proc { font-weight: bold; } .data .proc > span { font: var(--font-ui-11-micro-reg); color: var(--base-txt-tertiary); padding-top: 2px; } .data .proc > span:not(.b_fl) { color: var(--costs-time-major); } .data.over .proc > span:not(.b_fl) { color: var(--base-txt-alert-major); } .real { font: var(--font-ui-14-regular-reg); } .unit { font: var(--font-ui-10-nano-reg); color: var(--base-txt-tertiary); padding: 3px 0 0 2px; max-width: 22px; overflow: hidden; } .data .proc > span:last-child { padding-left: 3px; } } .data-costs-progress-money { .data .proc { color: var(--costs-money-major); } } .data-costs-progress-time { .data .proc { color: var(--costs-time-major); } .data.over .proc { color: var(--base-txt-alert-major); } } td:has(.data-costs-progress-money .over, .data-costs-progress-time .over) { background: var(--base-hlt-w-notr-easy); } &:hover td:has(.data-costs-progress-money .over, .data-costs-progress-time .over) { background: var(--base-hlt-w-notr-easy) linear-gradient(0deg, var(--base-hlt-g-easy), var(--base-hlt-g-easy)); } &.selected td:has(.data-costs-progress-money .over, .data-costs-progress-time .over) { background: var(--base-hlt-w-notr-easy) linear-gradient(0deg, var(--base-hlt-g-easy), var(--base-hlt-g-easy)) !important; } } @container (width >= 100px) { .dataTable__item { .data-costs-progress-money, .data-costs-progress-time { .data > .space { margin-left: -8px; } } } } @container (width < 100px) { .dataTable__item { .data-costs-progress-money, .data-costs-progress-time { .data { justify-content: center; } .data .in { display: none !important; } } } } @container (width < 135px) { .dataTable__item { .data-costs-progress-money, .data-costs-progress-time { .proc { display: none; } } } } @container (width < 200px) { .dataTable__item { .data-costs-progress-money, .data-costs-progress-time { .proc .b_fl { display: none !important; } } } } /* < COSTS_PROGRESS_MONEY, COSTS_PROGRESS_TIME */ .td_workflow { project-workflow { flex-shrink: 1; overflow: hidden; span { display: block; } } } .td_checkbox + td.td_name > .in { padding-left: 0; } .withMass .dataTable__item:hover { .td_checkbox .inputCheckbox:not(.act) input:not(:checked) ~ span use:nth-child(2), .inputCheckbox:not(.act).hoverFake input:not(:checked) ~ span use:nth-child(2) { opacity: 1; } } .dataTable { position: relative; padding: 0 0 16px 32px; margin: 0 -32px; height: calc(100% - 16px); transition: opacity 0.1s linear; opacity: 1; } .dataTable.dataTable-onlyHead { height: auto; } .dataTable.dataTable-onlyHead tbody tr.dataTable__item:not(.dataTable__item-empty), .dataTable.dataTable-onlyHead .ps__rail-x, .dataTable.dataTable-onlyHead .ps__rail-y, .dataTable.dataTable-onlyHead thead th.pinned-shadow.pinned-shadow-left:after { display: none; } .dataTable.dataTable-onlyHead thead th.pinned-shadow.pinned-shadow-right:after { box-shadow: 1px 0 0 0 var(--base-surf-top) inset; width: 1px; left: -1px; } .dataTable.columnWidthDraggerStarted { pointer-events: none; cursor: col-resize !important; } .dataTable.containerSwipperStarted { pointer-events: none; cursor: grabbing !important; } .dataTable.rowDraggerStarted { pointer-events: none; cursor: grabbing !important; } .dataTable.columnWidthDraggerStarted .widthDraggerSlider:hover, .dataTable.containerSwipperStarted .widthDraggerSlider:hover, .dataTable.rowDraggerStarted .widthDraggerSlider:hover { background: inherit; } .dataTable-none { opacity: 0; } .dataTable__wrapper { position: relative; box-sizing: border-box; width: 100%; height: 100%; } .dataTable table { border-spacing: 0; display: none; } .dataTable td { overflow: hidden; box-sizing: border-box; height: 40px; padding: 0; background: var(--base-cont-top); box-shadow: var(--screen-minus-px) var(--screen-px) 0 0 var(--base-line-tertiary) inset; } /*.dataTable td.td_editable {*/ /* padding: 0;*/ /*}*/ .dataTable td.plus ws-icon, .dataTable th.plus ws-icon { --icon-size: 16px; --icon-color: var(--base-txt-tertiary); } .dataTable td.plus task-unseen ws-icon svg, .dataTable th.plus ws-icon svg { fill: var(--base-txt-tertiary); } .dataTable td a { color: var(--base-txt-secondary); } .dataTable td a:hover { color: var(--base-txt-link-major); } .dataTable th { position: relative; box-sizing: border-box; background: var(--base-cont-mid); font-weight: normal; text-align: left; height: 32px; } .dataTable th > div.in, .dataTable th > a.in, .dataTable td > div.in, .dataTable td > a.in { display: flex; text-overflow: ellipsis; white-space: nowrap; container: sidebar / inline-size; } .dataTable td > div.in, .dataTable td > a.in { overflow: hidden; } .dataTable td > div.in .space-asTD.space-none, .dataTable td > a.in .space-asTD.space-none { display: none; } .dataTable th.auto-width div.in, .dataTable th.auto-width a.in, .dataTable td.auto-width div.in, .dataTable td.auto-width a.in { container: auto; } .dataTable th > div.in { position: relative; width: 100%; height: 100%; gap: 2px; padding: 2px 4px 2px 8px; box-sizing: border-box; align-items: center; justify-content: flex-start; } .dataTable th div.columnChevron { display: none; } .dataTable th:hover div.columnChevron { display: block; margin-left: auto; } .dataTable th div.columnSorting { --icon-size: 16px; --icon-color: var(--base-txt-btn-b); margin-left: auto; } .dataTable th div.columnSorting ws-icon { display: none; } .dataTable th div.columnSorting.columnSorting-asc ws-icon[name="arrows/arrow_circle_sm-down"] { display: inline-block; } .dataTable th div.columnSorting.columnSorting-desc ws-icon[name="arrows/arrow_circle_sm-up"] { display: inline-block; } .dataTable th:not(.main):hover div.columnSorting { display: none; } /*.dataTable th.main .in.sorted ws-icon[name=subtask] {*/ /* display: none;*/ /*}*/ /*.dataTable th.main:hover .in.sorted ws-icon[name=subtask] {*/ /* display: inline-flex;*/ /*}*/ .dataTable-hierarchy th.main .in.sorted .columnSorting { margin-right: 44px; } .dataTable th[data-width="40"] > div.in { padding: 2px 7px; } .dataTable th[data-width="40"] { cursor: pointer; } .dataTable th[data-width="40"]:hover div.columnChevron { display: none; } .dataTable th[data-width="40"] .in.sorted div.columnValue, .dataTable th[data-width="40"] .in.sorted div.columnChevron, .dataTable th[data-width="40"] .in.sorted div.columnPin { display: none; } .dataTable th[data-width="40"]:hover .in.sorted div.columnPin, .dataTable th[data-width="40"]:hover .in.sorted div.columnValue { display: block; } .dataTable th .widthDraggerSlider { padding: 0; width: 6px; height: calc(100% + 1px); position: absolute; right: -4px; z-index: 1; } .dataTable th:not(.auto-width) .widthDraggerSlider:hover { cursor: col-resize; background: var(--base-hlt-invert); } body.withTaskView .dataTable th:not(.auto-width) .widthDraggerSlider:hover { cursor: inherit; background: inherit; } .dataTable th .columnValue { padding: 0; height: 100%; left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 26px; flex-shrink: 1; } .dataTable th.columnDragger { transform: rotate(-3deg); -webkit-transform: rotate(-3deg); box-shadow: var(--shadow-cont-minor-outline); color: var(--base-hlt-b-invert-major); --icon-color: var(--base-hlt-b-invert-major); --icon-size: 18px; font: var(--font-ui-11-micro-med); text-transform: uppercase; background: var(--base-cont-top); cursor: grabbing; border-radius: 4px; } .dataTable th.columnDragger .in { padding: 2px !important; } .dataTable th.columnDragger:hover { color: var(--base-hlt-b-invert-major); --icon-color: var(--base-hlt-b-invert-major); background: var(--base-cont-top); } .dataTable th.columnDraggerFrom { background: var(--base-cont-mid) linear-gradient(var(--base-hlt-b-hover), var(--base-hlt-b-hover)); } .dataTable th.columnDraggerHover { box-shadow: 0 var(--screen-px) 0 0 var(--base-line-tertiary) inset, var(--screen-minus-px) var(--screen-minus-px) 0 0 var(--base-line-tertiary) inset, 3px 0 0 0 var(--base-hlt-b-invert) inset; } .dataTable th.columnDraggerFrom ~ th.columnDraggerHover { box-shadow: 0 var(--screen-px) 0 0 var(--base-line-tertiary) inset, var(--screen-minus-px) var(--screen-minus-px) 0 0 var(--base-line-tertiary) inset, -3px 0 0 0 var(--base-hlt-b-invert) inset; } .dataTable th { box-shadow: 0 var(--screen-px) 0 0 var(--base-line-tertiary) inset, var(--screen-minus-px) var(--screen-minus-px) 0 0 var(--base-line-tertiary) inset; perspective: 100px; } .dataTable th:not(:has(ws-icon[name="subtask"])):hover { background: var(--base-cont-mid) linear-gradient(var(--base-hlt-g-easy), var(--base-hlt-g-easy)); color: var(--base-txt-primary); } .dataTable th ws-icon[name=pin] { --icon-size: 16px; --icon-color: var(--base-txt-tertiary); width: 22px; } .dataTable th.columnDragger ws-icon[name=pin] { --icon-color: var(--base-hlt-b-invert-major); } .dataTable .rowDragger { opacity: 0; position: fixed; padding: 10px 10px 10px 0; left: 64px; --icon-color: var(--base-txt-tertiary); z-index: 1013; } .dataTable .rowDragger.rowDragger-visible { opacity: 1; } .dataTable tr.rowDraggerFrom td { background: var(--base-hlt-b-notr-hover) !important; } .dataTable tr.rowDraggerFromChild td { background: var(--base-hlt-b-notr-easy); } .dataTable .rowDragger ws-icon { cursor: grab; } .dataTable .rowDragger:hover { display: block !important; opacity: 1; } body.withTaskView .dataTable .rowDragger:hover { opacity: 0; } .dataTable .rowDragger ws-icon:hover { --icon-color: var(--base-hlt-b-invert-major); } .dataTable .rowDraggerLayout { position: absolute; transition: none; z-index: 9999; background: var(--trans); box-shadow: none; height: 40px; width: 40px; } .dataTable .rowDraggerLine { position: absolute; height: 2px; z-index: 99999; left: 0; background: var(--base-txt-btn-b); } .dataTable .rowDraggerLine.rowDraggerLine-error { background: var(--base-txt-btn-w); } .dataTable .rowDraggerBox { position: absolute; height: 40px; z-index: 99999; left: 0; } .dataTable .rowDraggerBox.rowDraggerBox-error { box-shadow: 0 0 0 1px var(--base-txt-alert-minor) inset; } .dataTable .rowDraggerBox.rowDraggerBox-selected { box-shadow: 0 0 0 1px var(--sidebar-ico-promo) inset; } .dataTable thead { position: sticky; top: 0; z-index: 100; } .dataTable thead > th.columnDragger + tr, .dataTable thead tr:first-child { background: var(--base-cont-mid); color: var(--base-txt-tertiary); font: var(--font-ui-11-micro-med); text-transform: uppercase; backface-visibility: hidden; box-shadow: 0 var(--screen-px) 0 0 var(--base-line-tertiary) inset, 0 var(--screen-minus-px) 0 0 var(--base-line-tertiary) inset; } .dataTable td.main { left: 0; padding-left: 0; } .dataTable th.pinned, .dataTable td.pinned { min-width: 20px; position: sticky; z-index: 2; backface-visibility: hidden; } .dataTable th.anchor, .dataTable td.anchor { width: 0; min-width: 0; padding: 0; height: 0; box-shadow: none; & > div { max-width: 100%; } } body.desktop .dataTable th.collapsed, body.desktop .dataTable td.collapsed { width: 32px !important; min-width: 32px !important; max-width: 32px !important; } body.desktop .dataTable .dataTable__item:not(.dataTable__item-added, .dataTable__item-newTask) td.collapsed { /*background: var(--base-cont-top) !important;*/ } body.desktop .dataTable .dataTable__item:not(.dataTable__item-added, .dataTable__item-newTask):hover td.collapsed { /*background: var(--base-hlt-g-notr-easy) !important;*/ } body.desktop .dataTable td.collapsed .in, body.desktop .dataTable th.collapsed .in { display: none; } body.desktop .dataTable th.collapsed ws-icon { padding: 0 4px; --icon-color: var(--base-txt-tertiary); cursor: pointer; } body.desktop .dataTable:before { content: ' '; position: absolute; left: 0; height: 32px; width: 32px; background: var(--base-cont-mid); box-shadow: 0 var(--screen-minus-px) 0 0 var(--base-line-tertiary) inset, 0 var(--screen-px) 0 0 var(--base-line-tertiary) inset; z-index: 1; } .dataTable tr.empty { height: 40px; box-shadow: none; } .dataTable tr.empty td { box-shadow: none; } .dataTable__group, .dataTable__subgroup { position: relative; z-index: 20; height: 68px; box-shadow: none; } .dataTable__group td, .dataTable__subgroup td { height: 68px; box-shadow: none; padding: 0; } .dataTable__group td div, .dataTable__subgroup td div { max-width: 800px; min-width: 0; } .dataTable__group td span.space, .dataTable__subgroup td span.space { flex-shrink: 0; } .dataTable__group td span.name, .dataTable__subgroup td span.name { flex-shrink: 1; text-overflow:ellipsis; overflow: hidden; } .dataTable__group:not(.dataTable__group-role) td span.name[onclick]:hover, .dataTable__subgroup:not(.dataTable__subgroup-role) td span.name[onclick]:hover, .dataTable__subgroup:not(.dataTable__subgroup-role) td span.name[data-menu-url]:hover { text-decoration: underline dotted; cursor: pointer; } .dataTable__group:has(+ .dataTable__group) td, .dataTable__group:has(+ .dataTable__subgroup) td, .dataTable__subgroup:has(+ .dataTable__group) td, .dataTable__subgroup:has(+ .dataTable__subgroup) td, .dataTable__subgroup:has(+ .dataTable__item-collapsedSub) td { /* box-shadow: 0 var(--screen-minus-px) 0 0 var(--base-line-tertiary) inset !important; */ } .dataTable__subgroup:not(+ .dataTable__item-hidden) td { /* box-shadow: 0 var(--screen-minus-px) 0 0 var(--base-line-tertiary) inset !important; */ } .dataTable__group:not(:has(~ .dataTable__group, ~.dataTable__subgroup:not(.dataTable__subgroup-collapsed))) td, .dataTable__subgroup:not(:has(~ .dataTable__subgroup)) td, .dataTable__subgroup:has(+ .dataTable__item:not(.dataTable__item-collapsedSub)) td, .dataTable.dataTable-searchStarted .dataTable__subgroup:has(+ .dataTable__item) td { box-shadow: none !important; } .dataTable__item:not(:has(~ .dataTable__item:not(.dataTable__item-hidden))) td { /* box-shadow: var(--screen-minus-px) var(--screen-px) 0 0 var(--base-line-tertiary) inset, 0 var(--screen-minus-px) 0 0 var(--base-line-tertiary) inset; */ } /*.dataTable__item:not(:has(~ .dataTable__item:not(.dataTable__item-hidden))) td.td_checkbox,*/ /*.dataTable__item:has(+ .dataTable__item.dataTable__item-hidden) td.td_checkbox {*/ /* box-shadow: 0 var(--screen-px) 0 0 var(--base-line-tertiary) inset, 0 var(--screen-minus-px) 0 0 var(--base-line-tertiary) inset;*/ /*}*/ .dataTable__item:not(:has(~ .dataTable__item:not(.dataTable__item-hidden))) td.plus.side-shadow, .dataTable__item:has(+ .dataTable__item.dataTable__item-hidden) td.plus.side-shadow { /* box-shadow: 0 var(--screen-px) 0 0 var(--base-line-tertiary) inset, 0 var(--screen-minus-px) 0 0 var(--base-line-tertiary) inset, var(--screen-px) 0 0 0 var(--base-line-tertiary) inset; */ } .dataTable__item:has(+ .dataTable__item.dataTable__item-hidden) td { /* box-shadow: var(--screen-minus-px) var(--screen-px) 0 0 var(--base-line-tertiary) inset, 0 var(--screen-minus-px) 0 0 var(--base-line-tertiary) inset; */ } .dataTable__item-empty { height: 40px; border-radius:4px; } .dataTable__item-empty:not(.dataTable__item-instead) { pointer-events: none } .dataTable__item-empty td { height: 40px; } .dataTable__tbody-none { display: none; } .dataTable .dataTable__item.dataTable__item-fake td, .dataTable .dataTable__group.dataTable__group-fake td, .dataTable .dataTable__subgroup.dataTable__subgroup-fake td { box-shadow: 0 var(--screen-px) 0 0 var(--base-line-tertiary) inset !important; } .dataTable .dataTable__item.dataTable__item-realLevel0.dataTable__item-name-selected td.td_name { box-shadow: 0 0 0 1px var(--sidebar-ico-promo); } .dataTable .dataTable__item.dataTable__item-realLevel0.dataTable__item-name-selected td.td_checkbox { box-shadow: 1px 1px 0 var(--sidebar-ico-promo) inset, 0 -1px 0 var(--sidebar-ico-promo) inset; } .dataTable .dataTable__item.dataTable__item-realLevel0.dataTable__item-name-selected td.td_checkbox + td.td_name { box-shadow: -1px -1px 0 var(--sidebar-ico-promo) inset, 0 1px 0 var(--sidebar-ico-promo) inset; } .dataTable .dataTable__item.dataTable__item-realLevel1.dataTable__item-name-selected td.td_name { box-shadow: 1px 1px 0 var(--sidebar-ico-promo) inset, -1px -1px 0 var(--sidebar-ico-promo) inset; } .dataTable .dataTable__item.dataTable__item-realLevel0.dataTable__item-name-error td.td_name { box-shadow: 0 0 0 1px var(--base-txt-alert-minor); } .dataTable .dataTable__item.dataTable__item-realLevel0.dataTable__item-name-error td.td_checkbox { box-shadow: 1px 1px 0 var(--base-txt-alert-minor) inset, 0 -1px 0 var(--base-txt-alert-minor) inset; } .dataTable .dataTable__item.dataTable__item-realLevel0.dataTable__item-name-error td.td_checkbox + td.td_name { box-shadow: -1px -1px 0 var(--base-txt-alert-minor) inset, 0 1px 0 var(--base-txt-alert-minor) inset; } .dataTable .dataTable__item.dataTable__item-realLevel1.dataTable__item-name-error td.td_name, .dataTable .dataTable__item.dataTable__item-realLevel2.dataTable__item-name-error td.td_name { box-shadow: 1px 1px 0 var(--base-txt-alert-minor) inset, -1px -1px 0 var(--base-txt-alert-minor) inset; } .dataTable .dataTable__item:first-of-type td { box-shadow: var(--screen-minus-px) 0 0 0 var(--base-line-tertiary) inset; } .dataTable thead .dataTable__item td { box-shadow: var(--screen-minus-px) var(--screen-minus-px) 0 0 var(--base-line-tertiary) inset !important; &.td_checkbox { box-shadow: 0 var(--screen-minus-px) 0 0 var(--base-line-tertiary) inset !important; } } .dataTable .dataTable__item:first-of-type td.td_checkbox { box-shadow: none; } .dataTable__group td.anchor, .dataTable__subgroup td.anchor { position: sticky; left: 0; box-shadow: none; } .dataTable__group td div, .dataTable__subgroup td div { padding: 20px 0 0 0; min-width: 0; position: absolute; top: 6px; display: flex; align-items: center; height: 40px; } /*.dataTable__item .td_checkbox + td.td_name > .in {*/ /* padding-left: 0;*/ /*}*/ .dataTable__group td span.name, .dataTable__subgroup td span.name { font: var(--font-ui-22-title-1-semi); margin-right: 8px; white-space: nowrap; } .dataTable__subgroup, .dataTable__subgroup td { height: 40px; } .dataTable__subgroup td div { padding: 0 0 0 0; top: 0; } .dataTable__subgroup td span.name { font: var(--font-ui-18-title-2-semi); } .dataTable td.plus, .dataTable th.plus { min-width: 50px; position: sticky; right: 0; width: 100% !important; padding: 0 8px; } /*.dataTable th.plus ws-btn {*/ /* cursor: pointer;*/ /*}*/ /*.dataTable th.plus div {*/ /* width: 48px;*/ /* text-align: center;*/ /*}*/ .dataTable td.td_checkbox { box-shadow: 0 var(--screen-px) 0 0 var(--base-line-tertiary) inset; } .dataTable th.td_checkbox { box-shadow: 0 var(--screen-px) 0 0 var(--base-line-tertiary) inset, 0 var(--screen-minus-px) 0 0 var(--base-line-tertiary) inset; } .dataTable td.plus.side-shadow { /* box-shadow: 0 var(--screen-px) 0 0 var(--base-line-tertiary) inset, var(--screen-px) 0 0 0 var(--base-line-tertiary) inset; */ } .dataTable th.plus.side-shadow.pinned-shadow { /*box-shadow: 0 var(--screen-px) 0 0 var(--base-line-tertiary) inset, 0 var(--screen-minus-px) 0 0 var(--base-line-tertiary) inset, var(--screen-px) 0 0 0 var(--base-line-tertiary) inset;*/ } .dataTable__item { cursor: pointer; position: relative; z-index: 0; } .dataTable__item:hover td, .dataTable__item-hover td { background: linear-gradient(var(--base-hlt-g-easy), var(--base-hlt-g-easy)), var(--base-cont-top); } .dataTable__item:has(+ .dataTable__group, + .dataTable__subgroup) td { box-shadow: var(--screen-minus-px) var(--screen-px) 0 0 var(--base-line-tertiary) inset, 0 var(--screen-minus-px) 0 0 var(--base-line-tertiary) inset; } .dataTable__item:has(+ .dataTable__group, + .dataTable__subgroup) td.td_checkbox { box-shadow: 0 var(--screen-px) 0 0 var(--base-line-tertiary) inset, 0 var(--screen-minus-px) 0 0 var(--base-line-tertiary) inset; } .dataTable__item:has(+ .dataTable__group, + .dataTable__subgroup) td.plus.side-shadow { /*box-shadow: 0 var(--screen-px) 0 0 var(--base-line-tertiary) inset, 0 var(--screen-minus-px) 0 0 var(--base-line-tertiary) inset, var(--screen-px) 0 0 0 var(--base-line-tertiary) inset;*/ } .dataTable__item-sticky td { box-shadow: 0 var(--screen-px) 0 0 var(--base-line-tertiary) inset, var(--screen-minus-px) var(--screen-minus-px) 0 0 var(--base-line-tertiary) inset; } .dataTable__group td.td_checkbox { box-shadow: none; } .dataTable .pinned-shadow:after { content: ' '; position: absolute; width: 7px; height: 100%; opacity: 0; transition: opacity 1s ease; top: 0 } .dataTable .pinned-shadow.pinned-shadow-left:after { top: 0; right: -7px; width: 7px; opacity: 1; /*background: linear-gradient(90deg, var(--base-surf-top) -50%, var(--trans) 100%);*/ box-shadow: 1px 0 0 0 var(--base-line-tertiary) inset, 4px 0 0 0 var(--base-cont-trans-low) inset; /* box-shadow: 1px 0 0 0 var(--base-surf-top) inset; */ height: 100%; } .dataTable .pinned-shadow.pinned-shadow-right:after { top: 0; left: -7px; opacity: 1; height: 100%; /*box-shadow: var(--screen-minus-px) 0 0 0 var(--base-surf-top) inset;*/ /*background: linear-gradient(270deg, var(--base-surf-top) -50%, var(--trans) 100%);*/ box-shadow: -4px 0 0 0 var(--base-cont-trans-low) inset, -1px 0 0 0 var(--base-line-tertiary) inset; } /*body[data-color=color] .dataTable .pinned-shadow.pinned-shadow-right:after {*/ /* box-shadow: var(--screen-minus-px) 0 0 0 var(--base-line-tertiary) inset;*/ /*}*/ @media print { .dataTable .pinned-shadow.pinned-shadow-left:after, .dataTable .pinned-shadow.pinned-shadow-right:after { display: none } } .dataTable__fakeTh { display: none; opacity: 0; position: absolute; background: var(--base-cont-mid); box-shadow: 0 var(--screen-minus-px) 0 0 var(--base-line-tertiary) inset, 0 var(--screen-px) 0 0 var(--base-line-tertiary) inset; height: 32px; width: 32px; top: 0; left: 0; } .dataTable__fakeTh-active { display: block; opacity: 0; } .dataTable__shadowLine { display: none; position: absolute; width: 7px; opacity: 0; transition: opacity 0.8s ease; z-index: 101; } .dataTable__shadowLine-left { /*margin-left: -1px;*/ /*background: linear-gradient(90deg, var(--base-surf-top) -50%, var(--trans) 100%);*/ box-shadow: 1px 0 0 0 var(--base-line-tertiary) inset, 4px 0 0 0 var(--base-cont-trans-low) inset; } .dataTable__shadowLine-right { /*box-shadow: var(--screen-minus-px) 0 0 0 var(--base-surf-top) inset;*/ /*background: linear-gradient(270deg, var(--base-surf-top) -50%, var(--trans) 100%);*/ box-shadow: -4px 0 0 0 var(--base-cont-trans-low) inset, -1px 0 0 0 var(--base-line-tertiary) inset; } /*body[data-color=color] .dataTable__shadowLine-left {*/ /* box-shadow: 1px 0 0 0 var(--base-line-tertiary) inset;*/ /*}*/ /*body[data-color=color] .dataTable__shadowLine-right {*/ /* box-shadow: var(--screen-minus-px) 0 0 0 var(--base-line-tertiary) inset;*/ /*}*/ .dataTable__shadowLine-active { display: block; opacity: 1; } .dataTable .widthDraggerLine { display: none; position: absolute; width: 2px; height: 100%; background: var(--base-hlt-invert); z-index: 300; } .dataTable .widthDraggerLine:after { content: ' '; height: 32px; width: 8px; left: -3px; position: absolute; background: var(--base-hlt-invert); cursor: col-resize; } .dataTable__group label, .dataTable__item label { position: relative; } .dataTable__item-active, .dataTable__item.selected, .dataTable .datatable__group-active { box-shadow: none; background: none; } .dataTable__item-active:not(.dataTable__item-warning) td, .dataTable__group-active td, .dataTable__subgroup-active td { background: var(--base-hlt-notr-easy) !important; } .dataTable__item-active.dataTable__item-warning td { background: var(--base-hlt-w-notr-easy) !important; } .dataTable__item.selected td { background: var(--base-cont-top) linear-gradient(var(--base-hlt-g-easy), var(--base-hlt-g-hover)); } .td_checkbox + td.anchor, .td_checkbox + td.main, .th_checkbox + th.main { left: 28px; } /*.td_checkbox + td.anchor{*/ /* padding-left: 8px;*/ /*}*/ /*.td_checkbox + td.main > .in {*/ /* padding-left: 0 !important;*/ /* margin-left: 0 !important;*/ /*}*/ .dataTable .td_checkbox, .dataTable .th_checkbox { width: 24px; box-sizing: border-box; padding: 0 2px; left: 0; } .dataTable .th_checkbox, .dataTable .th_checkbox.pinned { z-index: 100; } .dataTable__item-warning .inputCheckbox input:checked ~ span svg, .dataTable__item-warning .inputCheckbox input:indeterminate ~ span svg, .dataTable__item-warning .inputCheckbox:active input[type=checkbox] ~ span svg { fill: var(--base-txt-alert-major) } .dataTable .inputCheckbox:not(.inputCheckbox-alwaysOn):active input ~ span, .dataTable .inputCheckbox:not(.inputCheckbox-alwaysOn) input:checked ~ span { background: none } .dataTable__item td.main .in .ava { padding: 0 8px; } .dataTable .inputCheckbox span { width: 16px; height: 16px; padding: 4px; background: none !important; } .dataTable .inputCheckbox ws-icon { --icon-size: 16px; width: 16px; height: 16px; } .dataTable td.main:has(.inputCheckbox) { padding: 2px 8px 2px 2px; } .dataTable__group td div:has(.inputCheckbox) { padding: 20px 0 0 0; } .dataTable__subgroup td div:has(.inputCheckbox) { padding: 0; } .dataTable th.main:has(.inputCheckbox) .in { padding: 2px 8px 2px 0; gap: 6px; } .dataTable label.inputCheckbox, .dataTable__item label.inputCheckbox, .dataTable__group label.inputCheckbox, .dataTable__subgroup label.inputCheckbox { opacity: 0; width: 24px; height: 24px; padding: 0; display: flex; justify-content: center; align-items: center; } .dataTable tr:hover th.main label.inputCheckbox, .dataTable__item:hover label.inputCheckbox, .dataTable__group:hover label.inputCheckbox, .dataTable__subgroup:hover label.inputCheckbox, .dataTable tr th.main label.inputCheckbox.act, .dataTable__item-active label.inputCheckbox, .dataTable__item.selected label.inputCheckbox, .dataTable__group-active label.inputCheckbox, .dataTable__subgroup-active label.inputCheckbox { opacity: 1; } .dataTable tr.rowDraggerFrom label.inputCheckbox, .dataTable tr.rowDraggerFromChild label.inputCheckbox, .dataTable tr:hover th.main label.inputCheckbox { opacity: 0; } .dataTable thead tr:hover label.inputCheckbox { opacity: 1; } body.withMass .dataTable tr th label.inputCheckbox, body.withMass .dataTable__item label.inputCheckbox, body.withMass .dataTable__group label.inputCheckbox , body.withMass .dataTable__subgroup label.inputCheckbox { opacity: 1; } body.withMass .dataTable__item:hover td { background: var(--base-hlt-notr-easy); cursor: pointer; } body.withMass .dataTable__item:hover td a.in { background: transparent; cursor: pointer; } #dataTable__menu,.dataTable__menu { width: 330px; } @media screen and (min-width: 481px) { #dataTable__menu .scrollZone { max-height: 80vh; } } #dataTable__menu .dataTable__menu__row { min-height: 32px; padding: 0 2px 0 4px; } #dataTable__menu .dataTable__menu__row-none { display: none; } #dataTable__menu .dataTable__menu__row span { font: var(--font-ui-13-small-med); font-weight: 600; } #dataTable__menu .dataTable__menu__row ws-btn { font-weight: 600; width: 140px; } #dataTable__menu .dataTable__menu__row ws-btn span, #dataTable__menu .menu-secondary span { font: var(--font-ui-13-small-reg); } #dataTable__menu .dataTable__menu__row ws-btn .btn-right-icon { margin-left: auto; } #dataTable__menu .dataTable__menu__row-switchers { } #dataTable__menu .dataTable__menu__row-switchers div { cursor: pointer; /* height: 32px; border-radius: 6px; padding: 0 4px; */ } #dataTable__menu .dataTable__menu__row-switchers div.none { display: none; } /* #dataTable__menu .dataTable__menu__row-switchers ws-icon { width: 32px; height: 32px; } */ #dataTable__menu .dataTable__menu__row-switchers div[data-settings-value]:not([data-settings-value='1']), #dataTable__menu .dataTable__menu__row-switchers div[data-settings-value]:not([data-settings-value='1']) span.in { color: var(--base-txt-tertiary); --icon-color: var(--base-txt-tertiary); } #dataTable__menu .dataTable__menu__row-switchers div[data-settings-name=empty_groups] ws-icon { display: none; } #dataTable__menu .dataTable__menu__row-switchers div[data-settings-name=empty_groups][data-settings-value]:not([data-settings-value='1']) ws-icon[name=eye-close] { display: inline-flex; } #dataTable__menu .dataTable__menu__row-switchers div[data-settings-name=empty_groups][data-settings-value='1'] ws-icon[name=eye-open] { display: inline-flex; } /* #dataTable__menu .dataTable__menu__row-switchers div[data-settings-name]:hover { background: var(--base-hlt-g-hover); } */ #dataTable__menu .menu__group-bottom .btn-plain { font-weight: 600; } #dataTable__menu .menu-secondary { width: 140px; } #dataTable__menu .menu-secondary .menu__group { padding: 4px 6px; } #dataTable__menu .menu-secondary ws-icon { --icon-size: 16px; width: 24px; } #dataTable__menu .dataTable__menu__columns { padding: 0 4px 8px 4px; } #dataTable__menu .dataTable__menu__columns__title { display: flex; font: var(--font-ui-13-small-med); font-weight: 600; height: 32px; align-items: center; } #dataTable__menu .dataTable__menu__columns__body { flex-wrap: wrap; gap: 4px; } #dataTable__menu .dataTable__menu__columns__body ws-btn .btn-skeleton .btn-left-icon, #dataTable__menu .dataTable__menu__columns__body ws-btn .btn-right-icon { display: none; } #dataTable__menu .dataTable__menu__columns__body ws-btn .btn-disabled .btn-right-icon, #dataTable__menu .dataTable__menu__columns__body ws-btn .btn-fill .btn-left-icon, #dataTable__menu .dataTable__menu__columns__body ws-btn[left-icon=labels_group] .btn-left-icon { display: block; } #dataTable__menu .dataTable__menu__columns__body ws-btn.sorted[data-column-enabled="1"] .btn-right-icon { display: block; } #dataTable__menu .dataTable__menu__columns__body ws-btn.sorted ws-icon { --icon-color: var(--base-txt-btn-b); } #dataTable__menu #dataTable__menu-ok:has(.btn-hide) { display: none; } @container (width < 20px) { ws-icon[name=pin] { display: none; } } .dataTable th ws-icon[name=subtask] { position:absolute; right: var(--screen-minus-px); top: 0; width: 40px; height:30px; --icon-color: var(--base-txt-tertiary); --icon-size: 16px; border-left: var(--screen-px) solid var(--base-line-tertiary); &:hover { background: var(--base-cont-mid) linear-gradient(var(--base-hlt-g-easy), var(--base-hlt-g-easy)); color: var(--base-txt-primary); } } .dataTable:not(.dataTable-searchStarted) .dataTable__subgroup-collapsed, .dataTable:not(.dataTable-searchStarted) .dataTable__item-collapsed, .dataTable:not(.dataTable-searchStarted) .dataTable__item-collapsedSub:not(.dataTable__item-empty-spacer) { display: none !important; } .dataTable__group .space, .dataTable__subgroup .space, .dataTable__item .space { width: 40px; display: flex; align-items: center; justify-content: center; } .dataTable__group .space-expand, .dataTable__subgroup .space-expand { --icon-color: var(--base-txt-tertiary); width: auto; } .dataTable__subgroup .space-expand { --icon-size: 16px; } .dataTable__group ws-btn[right-icon=plus_sm], .dataTable__subgroup ws-btn[right-icon=plus_sm] { transition:0.3s opacity } .dataTable__group:not(:hover) ws-btn, .dataTable__subgroup:not(:hover) ws-btn { &[right-icon=plus_sm], &[right-icon=add_box] { opacity: 0; } } .dataTable__group ws-btn[right-icon=add_box] { margin-left: 8px; } .dataTable__group-empty .space-expand { display:none } .dataTable__group .space-expand:not(.space-expand-on) ws-btn:last-child, .dataTable__subgroup .space-expand:not(.space-expand-on) ws-btn:last-child { display: none } .dataTable__group .space-expand-on ws-btn:first-child, .dataTable__subgroup .space-expand-on ws-btn:first-child { display: none } .dataTable__item ws-icon[name=block], .dataTable__group ws-icon[name=block], .dataTable__subgroup ws-icon[name=block] { --icon-color: var(--base-hlt-w-invert-minor); } .dataTable-searchStarted .dataTable__group .space-expand, .dataTable-searchStarted .dataTable__subgroup .space-expand { display: none } .dataTable__group-empty { color:var(--base-txt-tertiary); } .dataTable__group ws-icon.tag { background: var(--tag-bg); width: 28px; height: 28px; --icon-size: 24px; border-radius: 8px; } .dataTable__group .av_sm { transform:scale(1.167); margin-left: 2px; cursor: pointer; } .dataTable__subgroup .av_sm { transform:scale(0.8333); cursor: pointer; } .dataTable__subgroup ws-icon.tag { width: 24px; height: 24px; --icon-size: 20px; border-radius: 6px; } .dataTable__group td .space ws-icon.proj_color { width: 20px; height: 20px; padding: 2px; border-radius: 6px; } .dataTable__group td .space ws-emoji { width: 20px; height: 20px; } .dataTable .moredots { margin: 0 } .dataTable__item-partSearch td > .in { opacity:0.4 } .dataTable__wrapper.ps--scrolling-y, .dataTable__wrapper.ps--scrolling-x { pointer-events: none } body.desktop .dataTable > .ps__rail-x { left: 32px !important; } body.mobile .menu-column .menu__item[data-collapse="1"] { display: none; } body.withDatatable #content { padding: 0 32px 2px 32px; } body.desktop.withDatatable.withTaskPanel #content { padding: 0 32px 42px 32px; } body.mobile.withDatatable #content { padding: 0 12px; } body.mobile.withDatatable.withTaskPanel #content { padding: 0 12px; } body.mobile .dataTable { padding: 0; margin: 0 -12px; height: 100%; } body.mobile.withTaskPanel .dataTable { padding: 0; } body.mobile .dataTable th.plus, body.mobile .dataTable td.plus { position: relative; } body.mobile .dataTable th.pinned { transition: min-width 0.5s ease-out; } body.mobile .dataTable th .widthDraggerSlider:hover { cursor: inherit; background: inherit; } body.mobile .dataTable th:hover div.columnChevron { display: none; } body.mobile .dataTable th.collapsed ws-icon { display: none; } body.mobile .dataTable .ps__rail-x .ps__thumb-x, body.mobile .dataTable .ps__rail-y .ps__thumb-y { transition: opacity 0.5s ease-out; opacity: 0; } body.mobile .dataTable .ps__rail-x.ps__rail-active .ps__thumb-x, body.mobile .dataTable .ps__rail-y.ps__rail-active .ps__thumb-y { opacity: 1; } .dataTable__item-total .td_money span, .dataTable__item-total .td_time span { font: var(--font-ui-22-title-1-semi); justify-content: flex-end; } .dataTable__item-total .td_report_money span, .dataTable__item-total .td_report_time span { font: var(--font-ui-22-title-1-semi); justify-content: flex-end; } .dataTable__item-total .td_max_money span.in, .dataTable__item-total .td_max_time span.in { font: var(--font-ui-18-title-2-semi); color: var(--base-txt-secondary) !important; justify-content: flex-end; } .dataTable__group .td_report_money span, .dataTable__group .td_report_time span { font: var(--font-ui-18-title-2-semi); place-self:end; padding: 20px 8px 0; } .dataTable__group .td_money span, .dataTable__group .td_time span { font: var(--font-ui-18-title-2-semi); place-self:end; padding: 20px 8px 0; } .dataTable__subgroup .td_report_money span, .dataTable__subgroup .td_report_time span { font: var(--font-ui-15-large-reg); place-self:end; padding:0 8px; } .dataTable__subgroup .td_money span, .dataTable__subgroup .td_time span { font: var(--font-ui-16-title-3-semi); place-self:end; padding:0 8px; } .dataTable__item-total td.td_time > span, .dataTable__item-total td.td_report_time > span, .dataTable__item-total td.td_max_time > span.in, .dataTable__group .td_time span, .dataTable__subgroup .td_time span, .dataTable__group .td_report_time span, .dataTable__subgroup .td_report_time span, .dataTable__group .td_max_time span.in, .dataTable__subgroup .td_max_time span.in { color: var(--costs-time-major); font-variant-numeric: tabular-nums; } .dataTable__item-total td.td_money > span, .dataTable__item-total td.td_report_money > span, .dataTable__item-total td.td_max_money > span, .dataTable__group .td_money span, .dataTable__subgroup .td_money span, .dataTable__group .td_report_money span, .dataTable__subgroup .td_report_money span, .dataTable__group .td_max_money span.in, .dataTable__subgroup .td_max_money span.in { color: var(--costs-money-major); font-variant-numeric: tabular-nums; } body.withMass .dataTable__item-total td { background:var(--base-hlt-notr-easy) !important } body.withMass .dataTable__item-total span.not_mass { display:none } body:not(.withMass) .dataTable__item-total span.only_mass { display:none } body.withMass td a, body.withMass td ws-btn, body.withMass td [data-url], body.withMass td [data-id], body.withMass td [data-action] { pointer-events: none; } @media screen and (max-width: 1200px) { .dataTable__group td div, .dataTable__subgroup td div { max-width: 500px; } } @media screen and (max-width: 700px) { .dataTable__group td div, .dataTable__subgroup td div { max-width: 300px; } } body.mobile .dataTable__group td div, body.mobile .dataTable__subgroup td div { min-width: unset; max-width: unset; } .dataTable__item-empty .td_name:before { content: ''; position:absolute; right:40px; top:0; bottom:0; border-left:var(--screen-px) solid var(--base-line-tertiary) } .dataTable__item:hover td.plus ws-btn { display: inline-block; margin: 0; } .dataTable__item td.plus ws-btn, .withMass .dataTable__item td.plus ws-btn { display: none; } datatable-hierarchy-menu { overflow: hidden; &[hierarchy="0"], &[hierarchy="false"] { padding-bottom: 0; } &[hierarchy] .menu__editable-buttons .menu__group-buttons { padding: 0; height: fit-content; gap: 0; & ws-btn { width: 100%; & + ws-btn { border-left: var(--screen-px) solid var(--base-line-secondary); } button { border-radius: 0; } } } } /* --- */ .dataTable__item { font: var(--font-ui-13-small-reg); } /* hints config: */ .dataTable__item td .data, .dataTable__item td .editable-value .view, .dataTable__item td > .in { --hint-color: white; --hint-parent: parent-td; --hint-dir: top_right; --hint-offset: 0 6; } .dataTable__item td .data .in + ws-btn { --hint-dir: top_left; } .dataTable__item .space-asTD { --hint-parent: none; --hint-dir: top; } .dataTable__item .space-asTD > [data-title] { --hint-parent: parent; } .dataTable__item .space-4, .dataTable__subgroup .space-4, .dataTable__group .space-4 { width: 4px; } .dataTable__item .space-8, .dataTable__subgroup .space-8, .dataTable__group .space-8 { width: 8px; } .dataTable__item .space.space-empty { min-height: 36px; } .dataTable-biggerGroupSpace { .dataTable__group .space:not(.space-expand), .dataTable__subgroup .space:not(.space-expand), .dataTable__item .td_name .space:not(.space-expand) { width: 56px; } .dataTable__item .td_name .space-4, .dataTable__subgroup .space-4, .dataTable__group .space-4 { width: 8px; } .dataTable__item .td_name .space-8, .dataTable__subgroup .space-8, .dataTable__group .space-8 { width: 12px; } } .dataTable__group { .space { .group_row_ico { position: relative; width: 32px; height: 32px; ws-icon { width: 32px;height: 32px;--icon-size: 20px; border-radius: 6px; } ws-icon.tag { background: var(--tag-color); svg {fill: var(--base-txt-btn-flip) !important;} &[name="task_workflow/started"]:after, &[name="prj_workflow/progress"]:after { background: conic-gradient(var(--base-txt-btn-flip), var(--base-txt-btn-flip) var(--percent), transparent var(--percent)); } } ws-icon[class^="proj_folder_color"] { background: var(--folder-color); svg {fill: var(--base-txt-btn-flip);} } img.av_nm { border-radius: 6px; } span.av_nm { border-radius: 6px; transform: scale(0.6667); margin: -8px; } tags-group-icon ws-icon { border-radius: 6px; background: var(--base-txt-primary); svg {fill: var(--base-txt-btn-flip);} } /*.proj_folder {*/ /* width: 32px;height: 32px;--icon-size: 20px;*/ /* background: var(--folder-color);*/ /*}*/ button {pointer-events: none;} } } } tr.dataTable__item:has(ws-editable .editing) { & .td_checkbox, & .td_delete { opacity: 0; pointer-events: none; } } .picker_year { font-variant-numeric: tabular-nums; } .ui-datepicker-hidden { display: none !important; } .ui-datepicker-unselectable:not(.ui-datepicker-otherMonth) { color: var(--base-txt-tertiary); cursor: not-allowed; } .ui-datepicker-unselectable:not(.ui-datepicker-otherMonth) div, .ui-datepicker-unselectable:not(.ui-datepicker-otherMonth) a, .ui-datepicker-unselectable:not(.ui-datepicker-otherMonth) span { pointer-events: none; cursor: not-allowed; } .ui-datepicker-days-cell.ui-datepicker-week-end-cell.ui-datepicker-unselectable { --hint-color: gray; } .ui-datepicker-days-cell { --hint-dir: top; /*--hint-color: white;*/ } .hideUnselectableDays .ui-datepicker-unselectable:not(.ui-datepicker-otherMonth):not(.ui-datepicker-today) { pointer-events: none; } .hideUnselectableDays .ui-datepicker-unselectable:not(.ui-datepicker-otherMonth):not(.ui-datepicker-today) span { font-size: 0; } .hideUnselectableDays .ui-datepicker-unselectable:not(.ui-datepicker-otherMonth):not(.ui-datepicker-today) span:after { content: ''; display: flex; width: 4px; height: 4px; background: var(--base-txt-primary); border-radius: 100%; } .hideUnselectableDays .ui-datepicker-unselectable.ui-datepicker-week-end-cell:not(.ui-datepicker-otherMonth):not(.ui-datepicker-today) span:after { background: var(--base-txt-tertiary); } .hideUnselectableDays .ui-datepicker-unselectable.ui-datepicker-unsel2:not(.ui-datepicker-otherMonth):not(.ui-datepicker-today) span:after { opacity: 0.5; } /* ---------------------------------------------- Global Datepicker start ---------------------------------------------- */ #dateend_div, #dateend_div2, .dateend_datepicker { margin: 16px 24px 8px 24px; position: relative; } #ui-datepicker-div { display: none; box-shadow: var(--shadow-cont-major-outline); background: var(--base-cont-mod-top); z-index: 1030; padding: 16px; border-radius: 16px; font: var(--font-ui-14-regular-reg); } @media (max-width: 480px) { #ui-datepicker-div { z-index: 1036; } } .ui-datepicker-control, .ui-datepicker-links, .ui-datepicker-header, .ui-datepicker, .ui-monthpicker { clear: both; float: left; width: 100%; color: var(--white-accent) } .ui-datepicker-control { padding: 0; float: right; width: 50%; background: var(--base-cont-low); line-height: 20px; display: none } .ui-datepicker-links { height: 1px; position: relative; display: flex; justify-content: space-between; } .ui-datepicker { border-width: 0; color: var(--base-txt-primary); } .ui-datepicker-inline:not(.hasMonthPicker) { display: flex; border: 0; min-width: 252px; background: none; margin: 0 auto 0 auto; user-select: none; gap: 12px; position: relative; font: var(--font-ui-14-regular-reg); } .ui-datepicker-inline:not(.hasMonthPicker) > div[style*="clear"] { display: none !important; } .ui-datepicker-multi { width: 516px !important; } .ui-datepicker-inline.ui-datepicker-single .ui-datepicker-links .ui-datepicker-empty { display: none; } .ui-datepicker-inline:not(.hasMonthPicker) .ui-datepicker-links { display: flex; width: 100%; height: auto; position: absolute; lefT: 0; right: 0; justify-content: space-between; } .ui-datepicker-header { display: flex; padding: 0 0 10px 0; height: 32px; gap: 8px; color: var(--base-txt-accent); text-align: center; font: var(--font-ui-16-title-3-reg); align-items: center; justify-content: center; } .ui-datepicker-header i { font-style: normal; font: var(--font-ui-16-title-3-semi); } .ui-datepicker-one-month { float: left; width: 100%; max-width: 252px; } .ui-datepicker-one-month td { min-width: 36px; height: 36px; } .ui-datepicker-one-month td div { display: flex; padding: 4px; box-sizing: border-box; height: 100%; align-items: center; justify-content: center; } .ui-datepicker .ui-datepicker-days-cell div a, .ui-datepicker .ui-datepicker-days-cell span { display: flex; border-radius: 16px; overflow: visible; width: 20px; height: 20px; justify-content: center; align-items: center; padding: 4px; color: var(--base-txt-primary); } .ui-datepicker-title-row { color: var(--base-txt-secondary); font: var(--font-ui-12-mini-reg); } .ui-datepicker-week-end-cell:not(.ui-datepicker-holiday-workday) { background: var(--base-cont-mod-low); } .ui-datepicker-days-cell.ui-datepicker-week-end-cell:not(.ui-datepicker-holiday):not(.ui-datepicker-us-holiday):not(.ui-datepicker-extraday):not(.ui-datepicker-us-extraday) div a, .ui-datepicker-days-cell.ui-datepicker-week-end-cell:not(.ui-datepicker-holiday):not(.ui-datepicker-us-holiday):not(.ui-datepicker-extraday):not(.ui-datepicker-us-extraday) div span { color: var(--base-txt-tertiary); } .ui-datepicker-title-row .ui-datepicker-week-end-cell, .ui-datepicker-otherMonth.ui-datepicker-week-end-cell { background: none; } .first_weekend { border-radius: 8px 8px 0 0; } .last_weekend { border-radius: 0 0 8px 8px; } .ui-datepicker-days-cell a, .ui-datepicker-days-cell span { color: var(--base-txt-primary); } .ui-datepicker-days-cell.ui-datepicker-today a, .ui-datepicker-days-cell.ui-datepicker-today span { box-shadow: none; background: var(--base-txt-primary); color: var(--base-txt-alt-light); border-radius: 50%; } .ui-datepicker-days-cell.ui-datepicker-today.ui-datepicker-holiday:not(.ui-datepicker-us-extraday) a, .ui-datepicker-days-cell.ui-datepicker-today.ui-datepicker-holiday:not(.ui-datepicker-us-extraday) span { box-shadow: 0 0 0 2px var(--cal-set-holiday) !important; } .ui-datepicker-days-cell.ui-datepicker-holiday:not(.ui-datepicker-force-weekend) { background: none; } .ui-datepicker .ui-datepicker-days-cell.ui-datepicker-holiday a, .ui-datepicker-days-cell.ui-datepicker-holiday span { box-shadow: none; background: var(--cal-set-holiday); color: var(--base-txt-alt-light); border-radius: 50%; } .ui-datepicker .ui-datepicker-days-cell.ui-datepicker-holiday.ui-datepicker-us-extraday a, .ui-datepicker-days-cell.ui-datepicker-holiday.ui-datepicker-us-extraday span { color: var(--base-txt-alert-major); } .ui-datepicker-days-cell.ui-datepicker-holiday.ui-datepicker-unselectable span, .ui-datepicker-days-cell.ui-datepicker-holiday.ui-datepicker-unselectable a { background: var(--base-hlt-w-selected); color: var(--base-txt-btn-w); } .ui-datepicker-days-cell.ui-datepicker-extraday div a, .ui-datepicker-days-cell.ui-datepicker-extraday div span, .ui-datepicker-days-cell.ui-datepicker-us-extraday div a, .ui-datepicker-days-cell.ui-datepicker-us-extraday a:hover, .ui-datepicker-days-cell.ui-datepicker-us-extraday div span { border-radius: 4px; background: var(--base-cont-mod-top); color: var(--base-txt-primary); } .ui-datepicker-days-cell.ui-datepicker-current-day.ui-datepicker-extraday div a, .ui-datepicker-days-cell.ui-datepicker-current-day.ui-datepicker-extraday div span, .ui-datepicker-days-cell.ui-datepicker-current-day.ui-datepicker-us-extraday div a, .ui-datepicker-days-cell.ui-datepicker-current-day.ui-datepicker-us-extraday a:hover, .ui-datepicker-days-cell.ui-datepicker-current-day.ui-datepicker-us-extraday div span { background: var(--base-cont-mod-retrans-low); } .ui-datepicker-days-cell.ui-datepicker-extraday { background: var(--base-cont-mod-trans-low); } .ui-datepicker .ui-datepicker-days-cell.ui-datepicker-us-extraday a, .ui-datepicker .ui-datepicker-days-cell.ui-datepicker-us-extraday span, .ui-datepicker .ui-datepicker-days-cell.ui-datepicker-us-extraday.ui-datepicker-today a { border-radius: 4px; box-shadow: inset 0 0 0 2px var(--base-line-alert); background: var(--base-cont-mod-top); } .ui-datepicker-days-cell.ui-datepicker-us-holiday:not(.ui-datepicker-holiday):not(.ui-datepicker-today) div a, .ui-datepicker-days-cell.ui-datepicker-us-holiday:not(.ui-datepicker-holiday):not(.ui-datepicker-today) div span { background: var(--cal-picker-vacation); } .ui-datepicker-days-cell.ui-datepicker-us-illday:not(.ui-datepicker-holiday):not(.ui-datepicker-today) div a, .ui-datepicker-days-cell.ui-datepicker-us-illday:not(.ui-datepicker-holiday):not(.ui-datepicker-today) div span { background: var(--cal-picker-sickleave); } .ui-datepicker-days-cell.ui-datepicker-us-dayoff:not(.ui-datepicker-holiday):not(.ui-datepicker-today) div a, .ui-datepicker-days-cell.ui-datepicker-us-dayoff:not(.ui-datepicker-holiday):not(.ui-datepicker-today) div span { background: var(--cal-picker-dayoff); } .user_workday .ui-datepicker-days-cell.ui-datepicker-week-end-cell.ui-datepicker-us-holiday div, .user_workday .ui-datepicker-days-cell.ui-datepicker-week-end-cell.ui-datepicker-us-illday div, .user_workday .ui-datepicker-days-cell.ui-datepicker-week-end-cell.ui-datepicker-us-dayoff div { box-shadow: 0 0 0 20px var(--colors-alpha-dark-15) inset; } .ui-datepicker-days-cell.first div { border-top-left-radius: 8px; border-bottom-left-radius: 8px; } .ui-datepicker-days-cell.last div { border-top-right-radius: 8px; border-bottom-right-radius: 8px; } .ui-datepicker-full a { background: var(--cal-picker-endpoints); border-radius: 20px; } /* ---------------------------------------------- Global Datepicker end ---------------------------------------------- */ /* ---------------------------------------------- AdmWeekends start ---------------------------------------------- */ .admWeekends .ui-datepicker-multi { width: auto !important; display: flex; gap: 24px 11px; flex-wrap: wrap; justify-content: center; } .admWeekends .ui-datepicker-header { padding-bottom: 4px; justify-content: flex-start; font: var(--font-ui-22-title-1-semi); } .admWeekends .ui-datepicker-header i { font: var(--font-ui-22-title-1-semi); } .admWeekends .ui-datepicker-extraday.ui-datepicker-us-holiday div { background: var(--cal-set-vacation); box-shadow: 0 0 0 20px var(--colors-alpha-dark-15) inset; } .admWeekends .ui-datepicker-extraday.ui-datepicker-us-illday div { background: var(--cal-set-sickleave); box-shadow: 0 0 0 20px var(--colors-alpha-dark-15) inset; } .admWeekends .ui-datepicker-extraday.ui-datepicker-us-dayoff div { background: var(--cal-set-dayoff); box-shadow: 0 0 0 20px var(--colors-alpha-dark-15) inset; } .admWeekends .ui-datepicker-us-holiday div { background: var(--cal-set-vacation); color: var(--white-accent); } .admWeekends .ui-datepicker-us-illday div { background: var(--cal-set-sickleave); color: var(--white-accent); } .admWeekends .ui-datepicker-us-dayoff div { background: var(--cal-set-dayoff); color: var(--white-accent); } .admWeekends .ui-datepicker-us-holiday:not(.ui-datepicker-today):not(.ui-datepicker-holiday) div a, .admWeekends .ui-datepicker-us-holiday:not(.ui-datepicker-today):not(.ui-datepicker-holiday) div span, .admWeekends .ui-datepicker-us-illday:not(.ui-datepicker-today):not(.ui-datepicker-holiday) div a, .admWeekends .ui-datepicker-us-illday:not(.ui-datepicker-today):not(.ui-datepicker-holiday) div span, .admWeekends .ui-datepicker-us-dayoff:not(.ui-datepicker-today):not(.ui-datepicker-holiday) div a, .admWeekends .ui-datepicker-us-dayoff:not(.ui-datepicker-today):not(.ui-datepicker-holiday) div span { color: var(--white-accent) !important; /* overwrites all colors if selected */ background: transparent; } /* ---------------------------------------------- AdmWeekends start ---------------------------------------------- */ /* ---------------------------------------------- Month Picker start ---------------------------------------------- */ .ui-monthpicker { border-radius: 15px; width: 100%; background: var(--base-surf-top); border-spacing: 1px; border-collapse: separate; margin-top: 4px; } .ui-monthpicker td { color: var(--base-txt-primary); padding: 10px 0; cursor: pointer; width: auto; background: var(--base-cont-mod-top); font: var(--font-ui-14-regular-reg); text-align: center; } .ui-monthpicker tr:first-of-type td:first-child { border-radius: 15px 0 0 0; } .ui-monthpicker tr:first-of-type td:last-child { border-radius: 0 15px 0 0; } .ui-monthpicker tr:last-of-type td:first-child { border-radius: 0 0 0 15px; } .ui-monthpicker tr:last-of-type td:last-child { border-radius: 0 0 15px 0; } .hasMonthPicker .ui-datepicker-header { display: flex; padding: 0 0 0 8px; gap: 4px; font: var(--font-ui-16-title-3-reg); text-align: left; cursor: pointer; width: auto; align-items: center; } .ui-monthpicker-header { display: flex; align-items: center; justify-content: space-between; } .ui-monthpicker-header .picker_container { display: flex; flex-wrap: nowrap; gap: 4px; cursor: pointer; } .ui-datepicker-links .ui-datepicker-empty { display: flex; width: 32px; height: 32px; justify-content: center; align-items: center; } .hasMonthPicker .ui-datepicker-links { display: flex; height: auto; position: absolute; right: 16px; width: auto; } .ui-datepicker-links ws-btn[disabled], .ui-datepicker-links ws-btn[disabled] button { opacity: 0.7; cursor: default; } .hasMonthPicker .ui-datepicker-links .ui-datepicker-prev, .hasMonthPicker .ui-datepicker-links .ui-datepicker-next, .hasMonthPicker .ui-datepicker-links .ui-datepicker-current { position: initial; } .hasMonthPicker .ui-datepicker-current-day div { background: var(--base-hlt-b-active); } .hasMonthPicker .ui-datepicker-current-day:not(.ui-datepicker-week-end-cell) div, .hasMonthPicker .ui-datepicker-current-day.ui-datepicker-week-end-cell.ui-datepicker-holiday div { border-radius: 8px; } .hasMonthPicker .ui-datepicker-header i, .ui-monthpicker-header { font: var(--font-ui-16-title-3-semi); color: var(--base-txt-accent); } .ui-monthpicker td.ui-monthpicker-selected { background: var(--base-hlt-b-invert); color: var(--base-txt-alt-light); } .ui-monthpicker td:not(.ui-monthpicker-selected):hover { background: var(--base-hlt-b-pressed); color: var(--base-txt-primary); } .ui-monthpicker td.ui-monthpicker-disabled:hover { cursor: not-allowed; background: none; } /* ---------------------------------------------- Month Picker end ---------------------------------------------- */ /* ---------------------------------------------- Time Picker start ---------------------------------------------- */ .ui-timepicker-wrapper { background: var(--menu-cont-top); border-radius: 12px; box-shadow: var(--shadow-cont-major-outline); box-sizing: border-box; color: var(--base-txt-primary); font: 13px/20px var(--font-base); padding: 12px 0 12px 12px; z-index: 10001; } .ui-timepicker-inner { width: 112px; height: 226px; padding: 0 12px 0 0; overflow: hidden; } .ui-timepicker-wrapper.ui-timepicker-with-duration { width: 13em; } .ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-30, .ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-60 { width: 11em; } .ui-timepicker-list { margin: 0; padding: 0; list-style: inside; } .ui-timepicker-duration { margin-left: 5px; color: var(--base-txt-tertiary); } .ui-timepicker-list:hover .ui-timepicker-duration { color: var(--base-txt-tertiary); } .ui-timepicker-list li { padding: 0 6px; height: 32px; cursor: pointer; white-space: nowrap; margin: 0; border-radius: 6px; font: var(--font-ui-14-regular-reg); color: var(--base-txt-accent); } .ui-timepicker-list li:before { content: ''; display: none; } .ui-timepicker-list li ws-icon { width: 32px; height: 32px; } .ui-timepicker-list li ws-icon svg use:first-child { display: none; } .ui-timepicker-list li ws-icon svg use:last-child { display: inline-flex; } .ui-timepicker-list li.ui-timepicker-selected ws-icon svg use:first-child { display: inline-flex; fill: var(--base-txt-btn-a); } .ui-timepicker-list li.ui-timepicker-dis { color: var(--base-txt-tertiary); cursor: default; } .ui-timepicker-list li:hover { background: var(--base-hlt-g-hover); } li.ui-timepicker-selected, .ui-timepicker-list li:hover, .ui-timepicker-list .ui-timepicker-selected:hover { color: var(--base-txt-accent); } li.ui-timepicker-selected .ui-timepicker-duration, .ui-timepicker-list li:hover .ui-timepicker-duration { color: var(--base-txt-ghost); } .ui-timepicker-list li.ui-timepicker-disabled, .ui-timepicker-list li.ui-timepicker-disabled:hover, .ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled { color: var(--base-txt-tertiary); cursor: default; } .ui-timepicker-list li.ui-timepicker-disabled-fake, .ui-timepicker-list li.ui-timepicker-disabled-fake:hover, .ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled-fake { color: var(--base-txt-tertiary); } .ui-timepicker-list li.ui-timepicker-disabled:hover, .ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled { background: var(--base-cont-mod-low); } /* ---------------------------------------------- Time Picker end ---------------------------------------------- */ /* ---------------------------------------------- Hover start ---------------------------------------------- */ .ui-datepicker .ui-datepicker-days-cell:not(.ui-datepicker-unselectable):hover a, .ui-datepicker .ui-datepicker-days-cell:not(.ui-datepicker-unselectable) a:hover, .ui-datepicker .ui-datepicker-days-cell:not(.ui-datepicker-unselectable):hover span { border-radius: 4px; box-shadow: inset 0 0 0 2px var(--base-txt-primary); } .ui-datepicker-days-cell.ui-datepicker-week-end-cell:not(.ui-datepicker-unselectable):not(.ui-datepicker-extraday):not(.ui-datepicker-us-extraday):not(.ui-datepicker-holiday):not(.ui-datepicker-us-holiday):not(.ui-datepicker-us-illday):not(.ui-datepicker-us-dayoff):hover a, .ui-datepicker-days-cell.ui-datepicker-week-end-cell:not(.ui-datepicker-unselectable):not(.ui-datepicker-extraday):not(.ui-datepicker-us-extraday):not(.ui-datepicker-holiday):not(.ui-datepicker-us-holiday):not(.ui-datepicker-us-illday):not(.ui-datepicker-us-dayoff):hover span { border-radius: 4px; box-shadow: inset 0 0 0 2px var(--base-txt-muted); } .ui-datepicker-days-cell.ui-datepicker-today:not(.ui-datepicker-unselectable):not(.ui-datepicker-extraday):not(.ui-datepicker-us-extraday):hover a, .ui-datepicker-days-cell.ui-datepicker-today:not(.ui-datepicker-unselectable):not(.ui-datepicker-extraday):not(.ui-datepicker-us-extraday):hover span { border-radius: 50%; box-shadow: 0 0 0 2px var(--base-txt-primary); } .ui-datepicker-days-cell.ui-datepicker-holiday:not(.ui-datepicker-unselectable):not(.ui-datepicker-us-extraday):hover a, .ui-datepicker-days-cell.ui-datepicker-holiday:not(.ui-datepicker-unselectable):not(.ui-datepicker-us-extraday):hover span { border-radius: 50%; box-shadow: 0 0 0 2px var(--base-txt-alert-minor); } /* ---------------------------------------------- Hover end ---------------------------------------------- */ /* ---------------------------------------------- Modal terms start ---------------------------------------------- */ .modalTerms__inputs__row { width: 100%; padding: 16px 24px; background: var(--base-cont-mod-low); border-bottom: 0.5px solid var(--base-line-secondary); border-top: 0.5px solid var(--base-line-secondary); box-sizing: border-box; } .daterow { display: flex; justify-content: center; align-items: center; } .daterow .formSimple { background: var(--base-cont-mod-top); border-radius: 7px; } .daterow .formSimple:not(:focus-within):not(:hover) { box-shadow: var(--shadow-cont-minor-outline); } .daterow .formSimple:not(:focus-within):hover { box-shadow: var(--shadow-brd-enable-hover), var(--shadow-cont-minor); } .daterow .formSimple:focus-within { box-shadow: var(--shadow-brd-focus), var(--shadow-cont-minor); } .daterow .formSimple.h32 .separator { height: 26px; } .daterow .formSimple input::placeholder { font-style: normal; } .daterow ws-icon[name="arrow-right"], .daterow ws-icon[name="arrow-left"] { padding: 0 6px; } .daterow ws-icon[name="arrow-right"] svg, .daterow ws-icon[name="arrow-left"] svg { fill:var(--base-line-accent); } .daterow .arrow-line { position: relative; width: calc( 100% - 12px ); height: 1px; background-color: var(--base-line-accent); margin: 0 6px; display: flex; align-items: center; } .daterow .arrow-line::before, .daterow .arrow-line::after { content: ''; position: absolute; width: 0; height: 0; border-style: solid; border-width: 3px 0 3px 6px; border-color: transparent transparent transparent var(--base-line-accent); } .daterow .arrow-line::before { left: -5.5px; } .daterow .arrow-line::after { right: -6px; } .modalTerms__inputs__row .time { align-items: center; padding: 0 12px; flex-direction: row-reverse; gap: 4px; } .modalTerms__inputs__row .time:focus-within { background: var(--base-cont-mod-top); } .modalTerms__inputs__row .time input::placeholder { text-align: center; } .modalTerms__inputs__row .time input { font: var(--font-ui-14-regular-semi); font-variant-numeric: tabular-nums; border: none; box-shadow: none; background: transparent; width: 50px; } .modalTerms__inputs__row .time input.tp_hma { width: 68px; } .modalTerms__inputs__row .time input::placeholder { font-size: 12px; color: var(--base-txt-tertiary); } .modalTerms__inputs__row .time input:placeholder-shown ~ a:last-of-type { display: none; } .modalTerms__inputs__row .time input:not(:placeholder-shown) ~ a:first-of-type { display: none; } .modalTerms__inputs__row .time a ws-icon[name=clockface] svg { fill: var(--base-txt-tertiary); } .modalTerms__inputs__row .time a:hover ws-icon[name=clockface] svg, .modalTerms__inputs__row .time a.menu_open ws-icon[name=clockface] svg { fill: var(--base-txt-act-minor); } .modalTerms .ico_clear { margin: 7px 0 0 -35px; } #dateend_nice { } #dateend_nice b { color: var(--base-txt-primary) } #dateend_nice strong { margin: 0 3px; color: var(--base-txt-accent); } #dateend_nice span.datelen { font: 12px/20px var(--font-base); color: var(--base-txt-tertiary); } #dateend_nice span.datelen input { border: none; background: var(--inp-cont-low); color: var(--base-txt-primary); font: bold 14px/24px var(--font-base); height: 24px; width: 50px; text-align: center; padding: 4px 0; border-radius: 4px; margin: 0 8px 0 0; } #dateend_nice span.datelen input::selection { background: var(--base-hlt-b-selected); } #dateend_nice span.datelen span { font: bold 14px/20px var(--font-base) } .div_more input#rep_name { padding: 3px 5px; font: 14px/20px var(--font-base); width: 340px; } .div_more p { margin: 0 0 5px 0 } .modalTerms__expand { padding: 14px 0 0 0; text-align: center; } .modalTerms__expand.modalTerms__expand-hidden { display: none; } .modalTerms__expand .modalTerms__params__separator { margin-top: 14px; padding-bottom: 10px; } .modalTerms.dt_rel .dt_norelate { display: none; } .modalTerms .option { font: var(--font-ui-13-small-reg); background: var(--base-cont-mod-top); box-shadow:0 0 0 1px var(--base-line-secondary) inset; border-radius: 8px; height: 36px; color: var(--base-txt-primary); white-space: nowrap; } .modalTerms .option .in { overflow: hidden; text-overflow: ellipsis; padding-right: 4px; } .modalTerms .option.noborder { border: none; box-shadow: none; } .modalTerms .option_err { background: var(--base-hlt-w-pressed) } .modalTerms .option_r { float: right; margin: 2px 0 } .modalTerms .option a ws-icon[name=close], .modalTerms .option ws-icon:not(.btn-left-icon):first-of-type { padding: 8px; } .modalTerms .option ws-icon[name=repeat] svg, .modalTerms .option ws-icon[name=dependence] svg, .modalTerms .option ws-icon[name=subtask] svg { fill: var(--base-txt-act-major); } .modalTerms .option .rep_txt { padding-left: 4px; } .modalTerms .option span a.like_text { color: var(--base-txt-primary); font: var(--font-ui-13-small-reg); text-decoration: none; cursor: inherit; } .modalTerms .option span a:not(.like_text) { color: var(--base-txt-link-minor); text-decoration: underline; } .modalTerms .option span a:not(.like_text):hover { color: var(--base-btn-primary-major); } .modalTerms .option span a.clicked { color: var(--base-txt-secondary) !important; text-decoration: none; } .modalTerms .option > input.qty { width: 30px; text-align: center; margin: -2px 0 -2px 5px; border: 1px solid var(--inp-cont-brd); border-radius: 4px; height: 18px; } .modalTerms .option input.timepicker { margin: 0 -5px 0 0; border: none; padding: 0 5px; font: 14px/20px var(--font-base); height: 20px; background: none; color: var(--base-txt-link-minor); width: 40px; } .modalTerms .option input.tp_hma { width: 60px } .modalTerms .option ws-btn button span { max-width: 200px; overflow: hidden; text-overflow: ellipsis; } .modalTerms .option .close ws-icon svg { fill: var(--base-txt-secondary); } .modalTerms .option .close { border-radius: 0 5px 5px 0; } .modalTerms .option .close:hover { background: var(--base-hlt-g-hover); } .modalTerms .option .close:hover ws-icon svg { fill: var(--base-txt-primary); } .modalTerms__repeat__names { font: 14px/20px var(--font-base); color: var(--base-txt-secondary); position: relative; } #rep_namemenu { font: 14px/20px var(--font-base); color: var(--base-txt-secondary); } #rep_namemenu .item { white-space: nowrap; overflow: hidden; position: relative; font: var(--font-ui-13-small-reg); color: var(--base-txt-primary); height:20px; padding: 4px 0; gap:8px; } #rep_namemenu .item span { max-width: 430px; } #rep_namemenu .item i { font-style: normal; padding: 0 2px; background: var(--base-hlt-b-selected); border-radius: 4px; color: var(--base-txt-btn-b); font: var(--font-ui-12-mini-med); } #rep_namemenu .item i:before { content: '~ '; } .modalTerms__repeat__names .item i.we { background: var(--base-hlt-w-selected); color: var(--base-txt-btn-w); } .modalTerms__repeat__names #dr_name_ { padding: 8px 0; height: 25px; font: 14px/20px var(--font-base); color: var(--base-txt-tertiary); position: relative; white-space: nowrap; text-overflow: ellipsis } .modalTerms__repeat__names a.clicked { border-bottom: none; cursor: text } .modalTerms__repeat__names a.clicked:hover { color: inherit } .modalTerms__repeat__names__form { box-shadow: none; height: 28px; padding: 0 6px 0 12px; gap: 4px; border-radius: 6px; margin: 12px 0; background: var(--base-cont-mod-trans-low); overflow: hidden; } .modalTerms__repeat__names__form a { font: var(--font-ui-11-micro-reg); color: var(--base-txt-tertiary); } .modalTerms__repeat__names__form a ws-icon svg { fill: var(--base-txt-tertiary); width: 16px; height: 16px; } .modalTerms__repeat__names__form a:hover { color: var(--base-txt-btn-a); } .modalTerms__repeat__names__form a:hover ws-icon svg { fill: var(--base-txt-btn-a); } .modalTerms__repeat__names__form:focus-within { box-shadow: var(--shadow-brd-focus); background: var(--base-cont-mod-top); } .modalTerms__repeat__names__form .input { border:none; height: 24px; background: none; width: 0; } .modalTerms__repeat__names__form ws-icon { /* width: 24px; */ /* height:24px; */ } .modalTerms__repeat__names__form ws-btn { margin: 0; } .modalTerms__repeat__names__form div { font: var(--font-ui-11-micro-reg); color: var(--base-txt-tertiary); } .modalTerms .div_help { padding: 12px 8px; } .modalTerms .div_help p { color: var(--base-txt-tertiary); font: var(--font-ui-13-small-reg); margin: 0; white-space: normal; } .modalTerms .div_help .help { float: left; margin: -2px 0 0 -30px; } .modalTerms .div_help .help1 { color: var(--base-txt-accent); font: 13px/16px var(--font-base) } .modalTerms .div_help .help2 { font: 12px/16px var(--font-base); margin: 10px 0 0 0 } .modalTerms #dt_relate .in { cursor: pointer; } .modalTerms .dt_relate.dt_relate_del { text-decoration: line-through } .modalTerms .dt_relate_ .dt_relate_del a { color: var(--base-txt-tertiary) } .modalTerms .dt_relate .ico_l, .modalTerms .dt_relate_ .ico_l, .div_more .ico_alert_sm { margin: 0 0 0 -35px; } .modalTerms .dt_relate .ico_r { margin: 0 -30px 0 0 } .modalTerms .dt_relate_ div:not(.dt_relate_del) a.ico_l { display: none } .modalTerms .dt_relate_ div:hover span.ico_l { display: none } .modalTerms .dt_relate_ div:hover a.ico_l { display: block } .modalTerms .dt_relate_ { display: none; border-top: none; padding-left: 20px; } .modalTerms .dt_relate_ a { color: var(--base-txt-primary) } .modalTerms .dt_relate_ a:hover { color: var(--base-txt-btn-a); } .modalTerms .dt_relate_ .priorb, .modalTerms .dt_relate_ .ico_r { float: right; margin: 0 -30px 0 0 } .modalTerms .dt_relate_ i { display: block; font: italic 12px/20px var(--font-base); margin-top: 10px } .modalTerms .dt_relate_ i a { color: var(--base-txt-link-minor) } /*.modalTerms .dt_relate_ a.ico_l {display:none} .modalTerms .dt_relate_ div:hover span.ico_l {display:none} .modalTerms .dt_relate_ div:hover a.ico_l {display:block}*/ /* -------------------------------------------------------------------------------------------------------------------*/ #timeend_nice { float: right; margin: 0 20px 0 10px; } #timeend_nice select { border: 1px solid var(--base-cont-low); width: 70px; font: 14px/20px var(--font-base); color: var(--base-txt-secondary) } #ui-datepicker-div tbody .unexpactable a, .ui-datepicker-inline tbody .unexpactable a { color: var(--base-txt-tertiary) } #ui-datepicker-div tbody .ui-datepicker-today:not(.ui-datepicker-extraday):not(.ui-datepicker-us-extraday) a, .ui-datepicker-inline tbody .ui-datepicker-today:not(.ui-datepicker-extraday):not(.ui-datepicker-us-extraday) a, #ui-datepicker-div tbody .ui-datepicker-today:not(.ui-datepicker-extraday):not(.ui-datepicker-us-extraday) span, .ui-datepicker-inline tbody .ui-datepicker-today:not(.ui-datepicker-extraday):not(.ui-datepicker-us-extraday) span { box-shadow: none; background: var(--base-txt-primary); color: var(--base-txt-btn-flip) !important; border-radius: 50%; } /*#ui-datepicker-div tbody .ui-datepicker-current-day div, .ui-datepicker-inline tbody .ui-datepicker-current-day div, #ui-datepicker-div tbody .ui-datepicker-week-end-cell.ui-datepicker-current-day div, .ui-datepicker-inline tbody .ui-datepicker-week-end-cell.ui-datepicker-current-day div { background: var(--base-hlt-b-active); }*/ /* #dateend_div:not(.rangecal) tbody .ui-datepicker-current-day:not(.ui-datepicker-week-end-cell) div, #ui-datepicker-div:not(.rangecal) tbody .ui-datepicker-current-day:not(.ui-datepicker-week-end-cell) div { border-radius: 8px; } */ .ui-datepicker-inline tbody .ui-datepicker-current-day div { background: var(--base-hlt-b-active); border-radius: 8px; } #dateend_div .ui-datepicker-minday { box-shadow: inset 2px 0 0 var(--base-txt-accent); } #dateend_div .ui-datepicker-maxday { box-shadow: inset -2px 0 0 var(--base-txt-accent); } .rangecal .ui-datepicker-inline tbody .ui-datepicker-current-day div { border-radius: 0; } .rangecal .ui-datepicker-inline tbody .ui-datepicker-current-day-sf-s div { border-top-left-radius: 8px; border-bottom-left-radius: 8px; } .rangecal .ui-datepicker-inline tbody .ui-datepicker-current-day-sf-f div { border-top-right-radius: 8px; border-bottom-right-radius: 8px; } .rangecal .ui-datepicker-inline tbody .ui-datepicker-current-day-sf-s.ui-datepicker-current-day-sf-f div { border-radius: 8px } .rangecal .ui-datepicker-inline tbody .first_weekend.ui-datepicker-current-day:not(.ui-datepicker-current-day-sf-s):not(.ui-datepicker-current-day-sf-f) div, .rangecal .ui-datepicker-inline tbody .last_weekend.ui-datepicker-current-day:not(.ui-datepicker-current-day-sf-s):not(.ui-datepicker-current-day-sf-f) div { border-radius: 0; } .rangecal .ui-datepicker-inline tbody .ui-datepicker-holiday.ui-datepicker-current-day { background: none; } .rangecal .ui-datepicker-inline tbody .ui-datepicker-holiday.ui-datepicker-current-day:not(.ui-datepicker-us-extraday) div > * { background: var(--base-txt-alert-minor); border-radius: 50%; color: var(--base-txt-alt-light); } .ui-datepicker-current-day-sf-s.first div { border-radius: 8px 0 0 8px !important; } .ui-datepicker-current-day-sf-f.last div { border-radius: 0 8px 8px 0 !important; } .ui-datepicker-current-day.ui-datepicker-us-holiday div span { background-color: var(--cal-picker-vacation); } .ui-datepicker-current-day.ui-datepicker-us-illday div span { background-color: var(--cal-picker-sickleave); } .ui-datepicker-current-day.ui-datepicker-us-dayoff div span { background-color: var(--cal-picker-dayoff); } .ui-datepicker-current-day.ui-datepicker-us-illday div span, .ui-datepicker-current-day.ui-datepicker-us-dayoff div span, .ui-datepicker-current-day.ui-datepicker-us-holiday div span { color: var(--base-txt-accent); } .ui-datepicker-current-day.ui-datepicker-us-extraday div a { background: var(--base-hlt-b-hover) } .ui-datepicker-firstday, .ui-datepicker-lastday { position: relative; } .ui-datepicker-firstday:before { content: ''; display: block; width: 2px; height: 100%; position: absolute; left: 0; bottom: 0; background: var(--base-txt-primary); } .ui-datepicker-lastday:after { content: ''; display: block; width: 2px; height: 100%; position: absolute; right: 0; bottom: 0; background: var(--base-txt-primary); } /* .scrollZone:not(.ps--active-y) .onlyscroll { display: none; } */ /* -------------------------------------------------------------------------------------------------------------------*/ #drop_dmdaymenu { width: auto; padding: 12px; } .chech_links { margin: 0 } .chech_links_row { display: flex; gap:4px; } .chech_links a.fix, .chech_links a.fix-1 { width: 36px; height: 36px; border-radius: 8px; padding: 0; font: var(--font-ui-14-regular-reg); color: var(--base-txt-primary); } .chech_links a.fix-1 { width: 100%; } .chech_links a.fix span { text-align: center; } .chech_links .chech_links_row a.fix.menu__item-active, .chech_links .chech_links_row a.fix.menu__item-active:hover { background: var(--base-hlt-b-active) !important; } /* -------------------------------------------------------------------------------------------------------------------*/ .droprepeat { } .droprepeat .buts { background: var(--base-cont-low); margin: 0; padding: 5px 10px; text-align: right; border-top: 2px solid var(--base-line-alt-gap-major) } .droprepeat .buts .button { border-radius: 5px; background: var(--base-txt-primary) } .droprepname { width: 300px } /* -------------------------------------------------------------------------------------------------------------------*/ .modal[data-group=account_holidays] .modal__header > .in { flex-grow: 2; } .modal[data-group=account_holidays] .modal__header > .in + .flex_gap { display: none; } .modal[data-group=account_holidays]:not(.withCalChanges) .modal__header .buttons { display: none; } .modal[data-group=holidays] .modal__header > .in { /*margin-right: 0; padding-right: 20px;*/ } .modal[data-group=holidays] .button_l { margin: -7px -200px -7px 0 } .modal[data-group=holidays] .button_r { margin: -7px 0 -7px -200px } .modal[data-group=holidays].withCalChanges .no_act { display: none } .modal[data-group=holidays]:not(.withCalChanges) .only_act { display: none } .modal[data-group=holidays] .modal__header > .in * { /* vertical-align: top; */ } .modal[data-group=holidays] .modal__header > .in .button_sm { padding: 2px 6px; margin: -2px 10px !important; } .modal[data-group=holidays] .modal__header > .in .modal__header > .in span { color: var(--base-txt-accent) } .modal[data-group=holidays] .modal__header { /*padding: 2px 0*/ } /* ----------- MinifyCSS: LIGHT THEMEMinifyCSS: LIGHT THEME ----------- */.modal[data-group=holidays] .ui-datepicker-unsel2 {color:var(--base-txt-ghost); box-shadow:0 0 0 20px var(--colors-alpha-dark-15) inset} .modal[data-group=holidays] .ui-datepicker-unsel2.ui-datepicker-week-end-cell {color:var(--base-txt-ghost)} /*----------- MinifyCSS: STOPMinifyCSS: STOP ----------- */ #dateend_div, #dateend_div2 { margin: 16px 24px 8px 24px; position: relative; } span.assym:before, div.td_assym:before, .ico_assym:before { content: '\2248 '; color: var(--white-accent); background: var(--base-btn-fresh-minor); float: left; width: 20px; height: 20px; text-align: center; font: 16px/22px var(--font-base); border-radius: 10px; margin: 0 10px 3px 0; } div.td_assym:before { float: none; display: inline-block; vertical-align: top; margin: 0 5px 0 0 } .ico_assym:before { margin: 0 } /* -------------------------------------------------------------------------------------------------------------------*/ .dataadd_out .terms .term_time { display: none; float: right; font: 13px/20px var(--font-base); background: var(--base-hlt-hover); margin: -4px 0 -4px 0; padding: 4px 5px 4px 12px; border-radius: 15px; color: var(--base-txt-primary); white-space: nowrap; } .dataadd_out .wtime .term_time { display: block } .dataadd_out .wtime em { display: none } .dataadd_out .terms .term_time input.timepicker { margin: 0 -5px 0 0; border: none; padding: 0 5px; font: 14px/20px var(--font-base); height: 20px; background: none; color: var(--base-txt-link-minor); width: 40px; } .dataadd_out .terms .term_time input.tp_hma { width: 60px } /* -------------------------------------------------------------------------------------------------------------------*/ .modalTerms { } .modalTerms__params { padding: 4px 20px; } .modalTerms__params.dt_onlyrepsv { padding-bottom: 24px; } .modalTerms__params__separator { border-top: 1px solid var(--base-line-tertiary); padding-bottom: 16px; } .modalTerms__params:first-child { border-top: none; } .modalTerms__params__item { min-height: 40px; /* border-bottom: 1px dashed var(--base-line-tertiary); */ } .modalTerms__params__item.flex_row > .flex_content { max-width: 100%; } .modalTerms__params__item > .in { font: 14px/20px var(--font-base); overflow:hidden; } .modalTerms__params__item:last-child { border-bottom: none } .modalTerms__params__item .param { color: var(--base-txt-secondary); font: var(--font-sp-caption-11-micro-upper-med); text-transform: uppercase; } .modalTerms__params__item .extra { color: var(--base-txt-tertiary); font-style: italic; } .modalTerms__params__item .data, .modalTerms__params__item .link { font: 12px/22px var(--font-base); color: var(--base-txt-primary); height: 32px; border-radius: 4px; padding: 0 2px; max-width: 200px; display: inline-flex; align-items: center; align-content: center; } .modalTerms__params__item .link { color: var(--base-txt-tertiary); } .modalTerms__params__item .data .space, .modalTerms__params__item .data ws-icon, .modalTerms__params__item .data_place ws-icon, .modalTerms__params__item .link ws-icon { width: 28px; height: 28px; box-sizing: border-box; border-radius: 14px } .modalTerms__params__item .link .in { padding: 0 4px; } .modalTerms__params__item .time .data, .modalTerms__params__item .time .data_place { font: 12px/22px var(--font-base); color: var(--base-txt-primary); height: 32px; border-radius: 16px; padding: 0 2px; max-width: 200px; display: inline-flex; align-items: center; align-content: center; } .modalTerms__params__item .btn ws-icon[name=info_circle-line] { width: 16px; height: 16px; } .modalTerms__params__item .btn ws-icon[name=info_circle-line] svg { fill: var(--base-txt-secondary); } .modalTerms__params__item .time svg { fill: var(--base-txt-secondary); } .modalTerms__params__item .time .data { background: var(--base-cont-low); } .modalTerms__params__item .time .data_place { box-shadow: var(--shadow-brd-enable); } .modalTerms__params__item .time .data_place .in { padding: 0 4px; } .modalTerms__params__item .time .data input { padding: 0; background: none; border: none; font: 600 14px/20px var(--font-base); width: 48px; text-align: center; } .modal-setDateOnCreate ws-btn#option_al ws-icon svg, .modal-taskEditTerms ws-btn#option_al ws-icon svg { fill: var(--base-txt-notice-major); } .modalTerms__params__item #dt_rep .formSimple + span { border-bottom: 1px dashed var(--base-txt-primary); cursor: pointer; } .modalTerms__params__item label.datelen span { min-width: 34px; text-align: right; } .modalTerms:not(.dt_rel) .dt_onlyrel { display: none } .modalTerms.dt_rel .dt_norel { display: none } .modalTerms:not(.dt_rep) .dt_onlyrep { display: none } .modalTerms.dt_rep .dt_norep { display: none } .modalTerms:not(.dt_repsv) .dt_onlyrepsv { display: none } .modalTerms.dt_repsv .dt_norepsv { display: none } .modalTerms:not(.dt_rep) .dt_onlyrepany { display: none } .modalTerms.dt_rep .dt_norepany, .modalTerms.dt_repsv .dt_norepany { display: none } .modalTerms:not(.dt_one) .dt_onlyone { display: none } .modalTerms.dt_one .dt_noone { display: none } .modalTerms:not(.dt_date) .dt_onlydate, .modalTerms:not(.dt_date) ~ .buttons .dt_onlydate/*, div:not(:has(.dt_date)) > * div ~ .buttons .dt_onlydate*/ { display: none } .modalTerms.dt_date .dt_nodate { display: none } .modalTerms:not(.dt_endtime) .dt_onlyendtime { display: none } .modalTerms.dt_endtime .dt_noendtime { display: none } .modalTerms:not(.dt_starttime) .dt_onlystarttime { display: none } .modalTerms.dt_starttime .dt_nostarttime { display: none } .modalTerms ws-icon.green { width: 28px; height: 28px; background: var(--colors-green-600); border-radius: 4px; } .modalTerms ws-icon.green svg { fill: var(--white-primary); } .modalTerms__params__item .in_as_block .in { padding: 0 8px; } .modalTerms .expand_button { border-radius: 0 7px 7px 0; margin-left: 4px; } .modalTerms .expand_button:hover { background: var(--base-hlt-g-hover); } .modalTerms .expand_button ws-icon svg { fill: var(--base-txt-secondary); } .modalTerms .expand_button:not(.expand_button-active) use:last-child { display: none } .modalTerms .expand_button-active use:first-child { display: none } .modalTerms__alert { border-top: 1px solid var(--base-line-tertiary); padding: 16px 16px; font: 14px/20px var(--font-base) } .modalTerms__params__item .in_as_block { min-height: 40px; } .modalTerms__params__item .start, .modalTerms__params__item .end { padding: 0 8px; } .modalTerms__params__item .modalTerms__repeat { font: var(--font-ui-13-small-reg); background: var(--base-cont-mod-top); color: var(--base-txt-primary); white-space: nowrap; padding-top: 24px; } .modalTerms__repeat .rep_slider_label { font: var(--font-ui-13-small-med); padding-left: 8px; } .modalTerms__repeat #dt_wsub_ { margin-left: auto; min-width: 0; flex-shrink: 1; } .modalTerms__repeat #dt_wsub_ .option { height: 28px; color: var(--base-txt-tertiary); cursor: pointer; } @media (min-width: 481px) { #btn_rep_name { display: none; } } @media (max-width: 480px) { .modalTerms__repeat #dt_wsub_ { flex-shrink: 0; .option { .flex_overflow { overflow: unset; } .sw_pre { position: sticky; right: -10px; } .sw_pre:not(.sw_act) .sw { background: var(--base-cont-mod-top); } } } .modalTerms__repeat__names__form { padding-left: 0; } } .modalTerms__repeat #dt_wsub_ .option.act { color: var(--base-txt-primary); } .modalTerms__repeat #dt_wsub_ .sw_pre { padding-right: 10px; padding-left: 4px; } .modalTerms__repeat #dt_wsub_ .option ws-icon[name=subtask] { padding: 4px; } .modalTerms__repeat #dt_wsub_ .option ws-icon[name=subtask] svg { width: 16px; height: 16px; fill: var(--base-txt-tertiary); } .modalTerms__repeat #dt_wsub_ .option.act ws-icon[name=subtask] svg { fill: var(--base-txt-primary); } .modalTerms__highlight { animation: hlInOut 1s ease-in-out forwards; } @keyframes hlInOut { 0%, 100% { background-color: inherit; } 50% { background-color: var(--base-hlt-hover); } } .modalTerms .option.hltHover { background: var(--base-hlt-hover); } @media (max-width: 480px) { .modalTerms__params.dt_onlyrep { width: 100%; box-sizing: border-box; } .modalTerms__inputs__row .daterow { position: relative; flex-wrap: wrap; row-gap: 8px; } .modalTerms__inputs__row .daterow-range:before, .modalTerms__inputs__row .daterow-range:after { content: ''; position: absolute; background-color: var(--base-txt-btn-a); } .modalTerms__inputs__row .daterow-range:before { width: 1.5px; height: 40px; top: 50%; left: calc(50% - 160px); transform: translateY(-50%); } .modalTerms__inputs__row .daterow-range:after { width: 6px; height: 6px; border-radius: 50%; top: calc(50% + 40px / 2); left: calc(50% - 160px - 2px); bottom: 0; transform: translateY(-50%); box-shadow: 0 -40px 0 0 var(--base-txt-btn-a); } .modalTerms__inputs__row .daterow .formSimple:not(.time) { justify-content: center; width: 162px; } .modalTerms__inputs__row .time input { text-align: center; } .menu .ui-datepicker-one-month .ui-datepicker-header { justify-content: space-between; padding: 0 42px; width: calc(100% - 84px); } .modal .ui-datepicker-one-month .ui-datepicker-header { justify-content: space-between; padding: 0 42px; width: calc(100% - 84px); } .menu.menu-calendar .l { width: unset; border-right: unset; } .menu.menu-calendar .r { min-height: unset; } .menu.menu-calendar .r .menu__columns { max-width: unset; display: grid; grid-template-columns: 1fr 1fr; } .menu.menu-calendar .r .menu__columns > .menu__group { width: unset; } #pageFilter_range_embedded .menu.menu-calendar { display: flex !important; flex-direction: column; } } @media (max-width: 375px) { #pageFilter_range_embedded .menu.menu-calendar ws-date-input .date-segment.day { width: 24px; } #pageFilter_range_embedded .menu.menu-calendar ws-date-input .date-segment.year { width: 40px; } } /* ---------------------------------------------- Modal terms end ---------------------------------------------- */ /* ---------------------------------------------- Misc start ---------------------------------------------- */ .user_workday .workday_footer { padding: 24px; color: var(--base-txt-primary); font: var(--font-ui-12-mini-reg); flex-wrap: wrap; justify-content: space-between; } .scrollPointer + .workday_footer { padding-top: 0; } .user_workday .workday_footer .workday_footer_switch { min-width: 100px; text-align: right; display: flex; align-items: center; justify-content: flex-end; } .user_workday .workday_footer .workday_footer_text { height: 30px; } .user_workday .workday_footer .workday_footer_text > * { height: 28px; line-height: 28px !important; } .user_workday .workday_footer .workday_footer_text .gray { color: var(--base-txt-tertiary); } .user_workday .workday_footer .workday_footer_text .x_mark { font: var(--font-ui-10-nano-med); } .user_workday .workday_footer.no_w_hrs .no_w_hrs_hide { display: none; } .user_workday .workday_footer #wd_cnt_work, .user_workday .workday_foot #wd_cnt_work { font: var(--font-ui-16-title-3-semi); display: inline-block; transform: translateY(1px); } .user_workday .workday_footer_switch .sw_act .sw { background: var(--base-btn-primary-minor); } /* ---------------------------------------------- Misc end ---------------------------------------------- */ #applause { display:none; position:fixed; top:50%; left:50%; width:0; height:0; z-index:1030; } #applause span { display:block; width:400px; height:400px; margin:-200px; background:url(/assets/img/color/applause_white.svg); background-size:100%; position:relative; opacity:1; } #applause div { display:none; position:absolute; left:0; top:0; margin:-150px; width:300px; height:300px; background:var(--base-btn-fresh-minor); border-radius:1000px; } #applause u { display:none; position:absolute; left:0; top:0; width:2000px; height:2000px; margin:-1000px; opacity:0; transition:all 0.5s ease; -webkit-transition:all 0.5s ease; background:var(--white-accent); border-radius:1000px; } #applause.appl2 span { background-position:0 -100% } #applause.appl2a span { background-position:0 -200% } #applause.appl2b span { background-position:0 -300% } #applause.appl3 span { background-position:0 -400% } #applause.appl_fin1 span { transition:all 0.3s ease; -webkit-transition:all 0.3s ease; } #applause.appl_fin2 span { transform:scale(4); -webkit-transform:scale(4); opacity:0; } #applause.appl1b u { opacity:0.2; margin:0; width:0; height:0; transition:none; -webkit-transition:none; } #applause i { position:absolute; top:350px; left:-250px; width:500px; font:bold italic 50px/60px var(--font-serif); color:var(--white-accent); text-align:center; opacity:0; transition:all 0.5s ease; -webkit-transition:all 0.5s ease; } #applause i.appl1, #applause i.appl2, #applause i.appl3 { opacity:1; top:150px; } #applause ws-btn { display:block; margin-top: -428px; margin-left: -200px; width:400px; } #applause ws-btn button { width: unset; white-space: nowrap; margin: 0 auto; display: block; } /*--------------------------------------------------------------------------------------------------------------------*/ .faded { opacity:0 } .blue_on { background:var(--colors-interblue-50); box-shadow:0 0 0 2px var(--colors-interblue-50); transition:all 0.3s ease; -webkit-transition:all 0.3s ease; } .blue_off { background:var(--trans); box-shadow:0 0 5px 15px var(--trans); transition:all 0.8s ease; -webkit-transition:all 0.8s ease; } .pre_pulse { opacity:0; transition:opacity 0.8s ease 0.2s; -webkit-transition:opacity 0.8s ease 0.2s; } .pre_pulse2 { opacity:1 } .pulse { box-shadow:0 0 0 var(--colors-interblue-100); animation:pulse 1.5s 3; position:relative; z-index:10005 } @-webkit-keyframes pulse { 0% { -webkit-box-shadow:0 0 0 5px var(--colors-interblue-100); } 70% { -webkit-box-shadow:0 0 5px 15px var(--trans); } 100% { -webkit-box-shadow:0 0 0 5px var(--trans); } } @keyframes pulse { 0% { box-shadow:0 0 0 5px var(--colors-interblue-100); } 70% { box-shadow:0 0 5px 15px var(--trans); } 100% { box-shadow:0 0 0 5px var(--trans); } } @-webkit-keyframes pulse2 { 0% { -webkit-box-shadow:0 0 0 5px var(--colors-green-alpha-300-a60); background:var(--colors-green-alpha-300-a60); } 70% { -webkit-box-shadow:0 0 5px 15px var(--trans); background:var(--trans); } 100% { -webkit-box-shadow:0 0 0 5px var(--trans); background:var(--trans); } } @keyframes pulse2 { 0% { box-shadow:0 0 0 5px var(--colors-green-alpha-300-a60); background:var(--colors-green-alpha-300-a60); } 70% { box-shadow:0 0 5px 15px var(--trans); background:var(--trans); } 100% { box-shadow:0 0 0 5px var(--trans); background:var(--trans); } } span.ico_event.pre_pulse2 { opacity:1; background-color:var(--colors-amber-alpha-300-a40); border-radius:20px; } span.ico_event.pulse { box-shadow:0 0 0 var(--colors-amber-alpha-300-a40); animation:pulse2 1.5s 3; border-radius:20px; } @-webkit-keyframes pulse2 { 0% { -webkit-box-shadow:0 0 0 5px var(--colors-amber-alpha-300-a40); background-color:var(--colors-amber-alpha-300-a40); } 70% { -webkit-box-shadow:0 0 5px 15px var(--trans); background-color:var(--trans); } 100% { -webkit-box-shadow:0 0 0 5px var(--trans); background-color:var(--trans); } } @keyframes pulse2 { 0% { box-shadow:0 0 0 5px var(--colors-amber-alpha-300-a40); background-color:var(--colors-amber-alpha-300-a40); } 70% { box-shadow:0 0 5px 15px var(--trans); background-color:var(--trans); } 100% { box-shadow:0 0 0 5px var(--trans); background-color:var(--trans); } } /*--------------------------------------------------------------------------------------------------------------------*/ .bounce { position:fixed; background:var(--base-surf-top); z-index:1030; } .bounce1 { left:-200px; right:-200px; top:-200px; height:200px; background:var(--base-cont-top); } .bounce2 { left:-200px; right:-200px; bottom:-200px; height:200px; } .bounce3 { top:-200px; bottom:-200px; right:-200px; width:200px; } .bounce4 { top:-200px; bottom:-200px; left:-200px; width:200px; } body[data-page=account] .bounce:not(.bounce1) { background:var(--base-surf-setup); } body[data-archive=on] .bounce:not(.bounce1) { background:var(--base-surf-archive); } /*--------------------------------------------------------------------------------------------------------------------*/ div.clipped_wrapper { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); background-color: var(--base-cont-top-elevated); border: 1px solid var(--em-color-border); border-radius: 10px; box-shadow: var(--shadow-cont-major-outline); padding: 12px 96px; position: absolute; z-index: 9999; } div.clipped { padding:20px 0; margin:-8px -10px -8px -10px; text-align:center; font: var(--font-ui-12-mini-semi); color: var(--base-txt-btn-b); } .clipped > ws-icon[name="ui_helper_suite/clipboard"] { --icon-size: 60px; --icon-color: var(--base-txt-btn-b); display: block; width: 60px; height: 60px; margin: 0 auto; } div.clipped_abs { position:fixed; right:25px; bottom:142px; z-index:1020; width:180px; border-radius:10px; box-shadow:2px 2px 4px var(--colors-alpha-dark-20) } div.clipped_abs2 { bottom:57px; } .menu .clipped { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px 0 8px; margin: 0; flex-grow: 1; } .menu .menu__group.clipboard_help { padding: 8px 12px 8px 12px; border-top: var(--screen-px) solid var(--base-line-secondary); background: var(--base-cont-mod-low); color: var(--base-txt-secondary); font: var(--font-ui-11-micro-reg); } .mobile .menu .menu__group.clipboard_help { border-radius: unset; margin-bottom: 0; } .menu.menu-active.menu-clipped { display: flex !important; flex-direction: column; } /*--------------------------------------------------------------------------------------------------------------------*/ #fly { position:absolute; z-index:1020; background:var(--base-btn-primary-major); opacity:0.4 } #fly.fly_animate { transition:all 0.3s ease; -webkit-transition:all 0.3s ease; opacity:0 } #fly.fly_animate2 { transition:all 0.8s ease, border-radius 1ms ease 0.8s; -webkit-transition:all 0.8s ease, border-radius 1ms ease 0.8s; border-radius:20px; opacity:0.2 } /*--------------------------------------------------------------------------------------------------------------------*/ #loadingOverlay, .loading-overlay { position:fixed; left:0; top:0; width:0; height:0; overflow:hidden; z-index:1022; text-align:center; background:var(--trans); color:var(--base-txt-tertiary); } /* TODO auto-size of loader on small blocks (it's possible with css-ONLY) */ .loading-overlay { position: absolute; } body.loading #loadingOverlay, .loading-overlay { width:auto; height:auto; right:0; bottom:0; } body.loading_start #loadingOverlay, .loading-overlay { /* background:var(--colors-alpha-dark-20); */ transition:background 0.5s ease 1s; -webkit-transition:background 0.5s ease 1s; } #loadingOverlay .loader, .loading-overlay .loader:not(.loader--curling) { position:absolute; left:50%; top:50%; margin:-45px 0 0 -45px; border:4px solid var(--loader-color); border-left-color:var(--trans); width:82px; height:82px; opacity:0; pointer-events:none; } #loadingOverlay svg, .loading-overlay svg { position:absolute; left:50%; top:50%; margin:-40px 0 0 -40px; width:80px; height:80px; fill:var(--loader-color); opacity:0; pointer-events:none; } body.loading_start #loadingOverlay .loader, body.loading_start #loadingOverlay svg, .loading-overlay .loader:not(.loader--curling), .loading-overlay svg { opacity:1; transition:opacity 0.5s ease 1s; -webkit-transition:opacity 0.5s ease 1s; } .loading-overlay--light { background: var(--colors-alpha-light-60); } .loading-overlay { display: flex; align-items: center; justify-content: center; } [data-loading=true] { position: relative; overflow: hidden; /* experimental */ } body.withModal.loading_start #loadingOverlay { background: transparent; } body.withModal #loadingOverlay .loader { border:4px solid var(--colors-alpha-dark-20); border-left-color:var(--trans); } body.withModal #loadingOverlay svg { fill:var(--colors-alpha-dark-20); } /*--------------------------------------------------------------------------------------------------------------------*/ .require { position:relative } .require span.req_pulse { content:''; position:absolute; right:18px; bottom:13px; width:16px; height:8px; background:var(--colors-interblue-100); border-radius:12px; box-shadow:0 0 0 var(--colors-interblue-100); animation:require 1.5s infinite; } .require span.req_hint, .require span.req_pulse:hover { } .require span.req_pulse:before { display:none; content:attr(data-txt); position:absolute; white-space:nowrap; background:var(--colors-alpha-light-100); color:var(--base-txt-primary); box-shadow:2px 2px 2px 2px var(--colors-alpha-dark-20); border-radius:4px; padding:6px 15px; right:0; top:18px; z-index:1000; opacity:1; } .require span.req_pulse:before { box-shadow:none; background:var(--colors-alpha-dark-70); color:var(--white-accent) } .require span.req_hint:before, .require span.req_pulse:hover:before { display:block } .require span.req_hint2:before { display:block; opacity:0; transition:opacity 0.5s ease } .require span.req_pulse:after { position:absolute; border:4px solid var(--colors-alpha-dark-60); border-color:transparent var(--colors-alpha-light-100) var(--colors-alpha-light-100) transparent; right:8px; top:16px; box-shadow:2px 2px 2px var(--colors-alpha-dark-20); z-index:1001; } .require.proj_name span.req_pulse { right:52px; bottom:13px; display:none; } .require.todo span.req_pulse:before { right:30px; top:-13px; box-shadow:none; background:var(--colors-alpha-dark-70); color:var(--white-accent) } .require.todo span.req_pulse { right:72px; bottom:auto; top:17px; } .dataadd_out:not(.dataadd_out_sub) .limit.require span.req_pulse { bottom:23px; } .dataadd_out:not(.dataadd_out_sub) .options.require span.req_pulse { bottom:23px; } .dataadd_out:not(.dataadd_out_sub) .terms.require span.req_pulse { bottom:23px; } #dataadd_group .require span.req_pulse { width:8px; } #dataadd_group .require span.req_pulse:before { right:26px; top:-15px; } .modal .require span.req_pulse { right:auto; left:15px; top:13px; } .modal .require span.req_pulse:before { right:auto; left:0 } @-webkit-keyframes require { 0% { -webkit-box-shadow:0 0 0 5px var(--colors-interblue-100); } 70% { -webkit-box-shadow:0 0 5px 15px var(--trans); } 100% { -webkit-box-shadow:0 0 0 5px var(--trans); } } @keyframes require { 0% { box-shadow:0 0 0 0 var(--colors-interblue-100); } 70% { box-shadow:0 0 0 10px var(--trans); } 100% { box-shadow:0 0 0 5px var(--trans); } } /*--------------------------------------------------------------------------------------------------------------------*/ .loader { margin:30px auto; font-size:10px; position:relative; text-indent:-9999em; -webkit-transform:translateZ(0); -ms-transform:translateZ(0); transform:translateZ(0); -webkit-animation:loader 1.1s infinite linear; animation:loader 1.1s infinite linear; border-left-color:transparent; } /* ----------- MinifyCSS: LIGHT THEMEMinifyCSS: LIGHT THEME ----------- */.loader {border: 1.1em solid var(--colors-blue-alpha-500-a50);} /*/* ----------- MinifyCSS: STOPMinifyCSS: STOP ----------- */ #content_loader { margin:100px auto; border:1.1em solid var(--colors-blue-alpha-500-a25); border-left-color:var(--base-btn-primary-minor); } main > #content_loader { margin-top:50%; } .loader { border-radius:50%; width:5em; height:5em; } @-webkit-keyframes loader { 0% { -webkit-transform:rotate(0deg); transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); transform:rotate(360deg); } } @keyframes loader { 0% { -webkit-transform:rotate(0deg); transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); transform:rotate(360deg); } } .loader_sm { display:inline-block; font-size:10px; position:relative; text-indent:-9999em; margin:3px; border:2px solid var(--base-btn-primary-minor); border-left-color:transparent; -webkit-transform:translateZ(0); -ms-transform:translateZ(0); transform:translateZ(0); -webkit-animation:loader 1.1s infinite linear; animation:loader 1.1s infinite linear; } .loader_sm.loader_white { border:2px solid var(--white-accent); border-left-color:transparent; } .loader_sm { border-radius:50%; width:10px; height:10px } .loader_err { border:2px solid var(--base-btn-alert-primary-major); border-left-color:transparent } /* Loader curling + BEM */ .loader--xs { --loader-size-unitless: 10; --loader-size: 10px; display: inline-block; } .loader--sm { --loader-size-unitless: 20; --loader-size: 20px; display: inline-block; } .loader--md { --loader-size-unitless: 30; --loader-size: 30px; display: inline-block; } .loader--lg { --loader-size-unitless: 40; --loader-size: 40px; display: inline-block; } .loader--curling { width: var(--loader-size); height: var(--loader-size); margin: 0; border: unset; position: relative; display: inline-flex; align-items: center; justify-content: center; animation: loader .6s linear infinite; &:after { content: ''; flex-shrink: 0; flex-grow: 0; display: block; width: 20px; height: 20px; /* оригінал */ background: var(--gradien-loader-curling); /* обрізка форми з SVG */ clip-path: path("M10 3C10 2.45 9.55 1.99 9 2.06C7.51 2.25 6.1 2.85 4.92 3.82C3.49 4.99 2.51 6.62 2.15 8.44C1.79 10.25 2.07 12.14 2.94 13.77C3.82 15.4 5.23 16.68 6.94 17.39C8.65 18.1 10.55 18.19 12.32 17.66C14.09 17.12 15.62 15.98 16.65 14.44C17.68 12.91 18.14 11.06 17.96 9.22C17.81 7.71 17.24 6.28 16.32 5.09C15.98 4.66 15.34 4.66 14.95 5.05C14.56 5.44 14.57 6.07 14.89 6.52C15.49 7.37 15.87 8.36 15.97 9.41C16.11 10.79 15.76 12.18 14.99 13.33C14.22 14.49 13.07 15.34 11.74 15.74C10.41 16.14 8.99 16.07 7.7 15.54C6.42 15.01 5.36 14.05 4.71 12.83C4.05 11.6 3.84 10.19 4.12 8.83C4.39 7.47 5.12 6.24 6.19 5.36C7.01 4.69 7.98 4.26 9 4.08C9.55 3.99 10 3.55 10 3Z"); -webkit-clip-path: path("M10 3C10 2.45 9.55 1.99 9 2.06C7.51 2.25 6.1 2.85 4.92 3.82C3.49 4.99 2.51 6.62 2.15 8.44C1.79 10.25 2.07 12.14 2.94 13.77C3.82 15.4 5.23 16.68 6.94 17.39C8.65 18.1 10.55 18.19 12.32 17.66C14.09 17.12 15.62 15.98 16.65 14.44C17.68 12.91 18.14 11.06 17.96 9.22C17.81 7.71 17.24 6.28 16.32 5.09C15.98 4.66 15.34 4.66 14.95 5.05C14.56 5.44 14.57 6.07 14.89 6.52C15.49 7.37 15.87 8.36 15.97 9.41C16.11 10.79 15.76 12.18 14.99 13.33C14.22 14.49 13.07 15.34 11.74 15.74C10.41 16.14 8.99 16.07 7.7 15.54C6.42 15.01 5.36 14.05 4.71 12.83C4.05 11.6 3.84 10.19 4.12 8.83C4.39 7.47 5.12 6.24 6.19 5.36C7.01 4.69 7.98 4.26 9 4.08C9.55 3.99 10 3.55 10 3Z"); } &.loader--xs:after, &.loader--md:after, &.loader--lg:after { transform: scale(calc(var(--loader-size-unitless) / 20)); transform-origin: center center; } } /* TODO flymod якщо новий працюватиме в додатку - то старий видалити */ .loader--curlingOld { border: unset; animation: loader .6s linear infinite; border-radius: 50%; padding: 2px; background: conic-gradient(from 90deg at 50.17% 50%, #73C7FF -7.5deg, rgba(255, 255, 255, 0) 41.25deg, rgba(255, 255, 255, 0) 93.75deg, #FFFFFF 179.31deg, #FFD6F6 258.75deg, #73C7FF 352.5deg, rgba(255, 255, 255, 0) 401.25deg); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; &.loader--sm { width: 10px; height: 10px; } } .ws-loading { position: relative; } .ws-loading__loader { position: absolute; inset: 0; margin: unset; display: flex; width: unset; align-items: center; justify-content: center; } /* .ws-loading__loader { margin-left: -10px; margin-right: 4px; display: inline-block; overflow: hidden; width: 0; opacity: 0; } .ws-loading__loader--visible { width: 14px; opacity: 1; } .ws-loading__loader--reverse { animation-direction: reverse; } */ .ws-loading__loader .loader { margin: 0; } @keyframes ws-loading-push-text { 0% { width: 0; opacity: 0; } 50% { width: 14px; opacity: 0; } 100% { width: 14px; opacity: 1; } } /* .worksection__push-text { --animate-duration: .5s; animation-timing-function: ease-in-out; animation-name: ws-loading-push-text; } */ /*--------------------------------------------------------------------------------------------------------------------*/ .item_ani { -webkit-transition:left 1s ease, top 1s ease; transition:left 1s ease, top 1s ease; } .item_aniq { -webkit-transition:left 0.5s ease, top 0.5s ease; transition:left 0.5s ease, top 0.5s ease; } .item_ania { -webkit-transition:all 0.5s ease; transition:all 0.5s ease; } .item_aniw { -webkit-transition:left 1s ease, top 1s ease, width 1s ease; transition:left 1s ease, top 1s ease, width 1s ease; } /*--------------------------------------------------------------------------------------------------------------------*/ .cnt_zoom { transform:scale(1.5); -webkit-transform:scale(1.5); display:inline-block } /** * ============================================== * Dot Pulse * ============================================== */ .dot-pulse { float:left; position:relative; left:0; width:2px; height:2px; border-radius:4px; background-color:var(--base-txt-link-minor); color:var(--base-txt-link-minor); box-shadow:0 0 0 -2px var(--base-txt-link-minor); animation:dotPulse 1.5s infinite linear; animation-delay:0s; margin:10px 18px 0 0; } .dot-pulse::before, .dot-pulse::after { content:''; display:inline-block; position:absolute; top:0; width:2px; height:2px; border-radius:4px; background-color: var(--base-txt-link-minor); color: var(--base-txt-link-minor); } .dot-pulse::before { left: 12px; box-shadow: 0 0 0 -2px var(--base-txt-link-minor); animation:dotPulseBefore 1.5s infinite linear; animation-delay:.5s; } .dot-pulse::after { left: 6px; box-shadow: 0 0 0 -2px var(--base-txt-link-minor); animation:dotPulseAfter 1.5s infinite linear; animation-delay:.25s; } @keyframes dotPulseBefore { 0% { box-shadow:0 0 0 -2px var(--base-txt-link-minor); } 30% { box-shadow:0 0 0 2px var(--base-txt-link-minor); } 60%, 100% { box-shadow:0 0 0 -2px var(--base-txt-link-minor); } } @keyframes dotPulse { 0% { box-shadow:0 0 0 -2px var(--base-txt-link-minor); } 30% { box-shadow:0 0 0 2px var(--base-txt-link-minor); } 60%, 100% { box-shadow:0 0 0 -2px var(--base-txt-link-minor); } } @keyframes dotPulseAfter { 0% { box-shadow:0 0 0 -2px var(--base-txt-link-minor); } 30% { box-shadow:0 0 0 2px var(--base-txt-link-minor); } 60%, 100% { box-shadow:0 0 0 -2px var(--base-txt-link-minor); } } @keyframes gradient_ani { 0% { background-position-x: 100%; } 100% { background-position:-100% } } @keyframes opacity_ani { 0% { opacity:1 } 50% { opacity:0.5 } 100% { opacity:1 } } ws-icon[name="stopwatch_parts:stopwatch_parts-rotation"] svg use:last-child { transform: rotate(0deg); transform-origin: 50% 55%; animation: 15s linear stopwatch-rotate infinite; } @keyframes stopwatch-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes opacity-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } [data-ask-reload=true] { position: relative; overflow: hidden; /* experimental */ } .askReloadOverlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; } .askReloadOverlay--theme-light { background: var(--colors-alpha-light-60); } .askReloadOverlay--blur { backdrop-filter: blur(4px); } #empty_page {padding:0 90px 0 90px; font:16px/25px var(--font-base); color:var(--base-txt-secondary); position:relative; margin:50px auto; width:450px; text-shadow: 1px 1px 0 var(--base-cont-top); text-align:center; } #empty_page a {color:var(--base-txt-secondary)} #empty_page .msg_ico { background-position:-200px 0; position:static; margin:20px auto; display:block; float:none;} #empty_page .help_arrow {width:114px; height:76px; background:url(/assets/img/big_green_arrow.png) no-repeat; position:absolute; right:0; top:5px} #big_hint {padding:20px 0 20px 60px; font:italic 14px/20px var(--font-base); color:var(--base-txt-secondary); position:relative; text-shadow: 1px 1px 0 var(--base-cont-top)} #big_hint a {color:var(--base-txt-link-minor)} #big_hint a:hover {color:var(--base-txt-link-major)} #big_hint .msg_ico { background-position:0 -40px; top:10px; left:0; display:block; position:absolute; margin:0} #big_hint .msg_ico_2l { top:20px} #empty_div {padding:0 0 0 0; font:25px/25px var(--font-base); color:var(--base-txt-tertiary); position:relative; text-align:center; max-width:800px; margin:50px auto; text-shadow: 1px 1px 0 var(--base-cont-top)} #empty_div.empty_div_ {font:16px/25px var(--font-base); color:var(--base-txt-secondary)} #empty_div a {color:var(--base-txt-secondary)} #empty_div strong, #empty_page strong {font-size: 2rem; font-weight: 500; color: var(--inp-hlt-focus); display:block; margin:10px 0 0 0} #empty_div .empty_img, #empty_page .empty_img {margin:50px auto 0 auto} .empty_img { height:200px; width:200px; padding:0; margin:0 auto; background-image:url(/assets/img/color/ws_emoji_new.svg) !important; background-color:transparent !important; background-size: 3300px 3300px !important; background-position: 0 -300%; } .emptylist { padding:40px 0; font:18px var(--font-base); color:var(--base-txt-secondary); text-align:center; } .emptylist span.advice { display:block; font:14px var(--font-base); margin:15px 0 0 0; } .emptylist a { color:var(--base-txt-secondary)} #empty_files, #empty_files_navigation {position:relative; display:none; padding:50px 0 100px 0; text-align:center; font:16px/25px var(--font-base); color:var(--base-txt-secondary); } .my_empty {position:relative; display:none; padding:0 10px 100px; text-align:center; font:14px/22px var(--font-base); color:var(--base-txt-secondary)} .my_empty .button {margin-bottom:4px } #search_results .my_empty {display:block;} #empty_files2 {padding:0 90px 0 90px; font:16px/25px var(--font-base); color:var(--base-txt-secondary); position:relative; margin:50px auto; width:450px; text-align:center;} .empty_show {display:block !important;padding: 80px 0 40px 0 !important;} .empty_show .empty__img {margin-top: 48px; height: 288px; width: 100%; background-repeat: no-repeat; background-position: center center;} .empty_show .in {display: inline-block;padding: 0 20px;} #empty_files a, #empty_page a, #empty_files2 a, .my_empty a.a {color:var(--base-txt-primary); border-bottom:1px dashed var(--base-txt-accent)} #empty_files .msg_ico, .my_empty .msg_ico { background-position:-200px 0; position:relative; top:0; left:0; display:block; margin:30px auto; float:none} #empty_files2 .msg_ico { background-position:-200px 0; display:block; margin:20px auto; position:static; float:none;} /*#empty_files2 .msg_ico { background-position:-160px 0; top:50%; left:20px; display:block; margin:-20px 0 0 0; position:absolute}*/ #empty_files2 .help_arrow {width:114px; height:76px; background:url(/assets/img/big_green_arrow.png) no-repeat; position:absolute; right:0; top:5px} .eye_always {display:block !important; margin:0 0 30px 0 !important; border-width:0 !important} .eye_always .button {display:block !important} #empty_files a.button_white, #empty_div a.button_white, #empty_page a.button_white, #empty_files ws-btn, #empty_files_navigation ws-btn, #empty_div ws-btn, #empty_page ws-btn{margin-top: 20px} #empty_files a.button_green, #empty_div a.button_green, #empty_page a.button_green {border-bottom:inherit; margin:20px 0 0 0} .my_empty .or_line {border-top:1px solid var(--base-line-secondary); margin:40px -10px 0 -10px; text-align:center} .project_bl .my_empty .or_line {margin:40px 0 0 0;} .my_empty .or_line .or {display:block; width:40px; background:var(--base-cont-mod-top); margin:-13px auto 30px; color:var(--base-txt-ghost); font:14px/22px var(--font-base) !important} .my_empty .or_line .ico_c {margin:30px auto 0} #empty_files .or_line {border-top:1px solid var(--base-line-alt-cardbrd); margin:60px -10px 0 -10px; text-align:center; margin:40px auto 0; width:300px;} #empty_files .or_line .or {display:block;width:40px;background: var(--base-surf-top);margin:-13px auto 30px;color:var(--base-txt-tertiary);font:14px/22px var(--font-base) !important} body[data-archive=on] #empty_files .or_line .or {background:var(--base-surf-archive)} #empty_files .or_line .ico_c {margin:30px auto 0} .modal[data-group=white] .my_empty .or_line {margin:40px 0 0 0;} .modal[data-group=white] .my_empty .or_line .or {background:var(--base-cont-low);} .drop_empty {padding:15px; font:italic 13px/20px var(--font-base); color:var(--base-txt-tertiary); display:none; text-align:center} .project_bl .drop_empty {padding:0} body[data-page=tasks_grid] #empty_files .or_line .or, body[data-page=projects_grid] #empty_files .or_line .or, body[data-page=files_grid] #empty_files .or_line .or, body[data-page=users] #empty_files .or_line .or, body[data-page=contacts] #empty_files .or_line .or { background:var(--base-cont-top) } #empty_search { height: 298px; width: 100%; background-repeat: no-repeat; background-position: center 52px; padding: 100px 0 100px 0; text-align:center; font: var(--font-txt-15-large-reg); color:var(--base-txt-secondary); text-shadow: 0.5px 0.5px 0 var(--base-cont-top); position:relative; } #empty_search a, #empty_files2 a { color: var(--base-txt-btn-a); } #empty_search a:hover, #empty_files2 a:hover { text-decoration: underline; } #empty_search .msg_ico { background-position:-200px 0; position:relative; top:0; left:0; display:block; margin:30px auto; float:none} /* -------------------------------------------------------------------------------------------------------------------*/ .uups_404 {background:url(/assets/img/color/uups_404.svg); width:222px; height:204px; margin:0 auto 20px;} #big_search {height:300px; overflow:hidden} #big_search .ico {transform:scale(8);-webkit-transform:scale(8); margin:120px; opacity:0.25} /* -------------------------------------------------------------------------------------------------------------------*/ #block_error {padding:100px 10px 100px 10px;text-align:center;color:var(--base-txt-accent);font:italic 1rem var(--font-base); background:var(--base-surf-top); box-shadow:0 0 500px 500px var(--base-surf-top)} #block_error h1{font: bold 2rem/1 var(--font-base);padding:20px 0 8px 0} #block_error h2{font: 300 1.5rem/1 var(--font-base);padding:20px 0 8px 0} #block_error p{margin:0 0 40px 0} main:has(.headerGeneral) .page_error_wrapper { padding: 5rem; } main:has(.headerGeneral) #block_error.not_found { box-shadow: none; border-radius: 2rem; } .p404user{font: 7rem var(--font-base)} .p404user div{width: 11rem;height: 11rem;background-color: var(--base-cont-top);border-radius: 50%;font: 5rem/1 var(--font-base);display: inline-flex;align-items: center;justify-content: center;padding-bottom: 1.5rem;box-sizing: border-box} .p404user div span{color: var(--base-txt-btn-w)} #block_error .but404{font: 1rem var(--font-base);background-color: var(--base-txt-link-major);color: var(--colors-alpha-light-100);border-radius: 30px;white-space: nowrap;display: inline-block;padding: 16px 25px;transition: 0.3s} #block_error .but404:hover{background-color: var(--base-txt-link-minor);} #block_error4 .but404:active{box-shadow:0 0 0 6px var(--base-hlt-hover);transition:none} @media(max-width: 500px){#block_error .wrap{padding-top: 75px;padding-bottom: 75px} #block_error h1{font: bold 1.6rem/1 var(--font-base)} .p404user div{width: 7.15rem;height: 7.15rem;font: 3.25rem/1 var(--font-base)} .p404user{font: 4.235rem var(--font-base)} } /* -------------------------------------------------------------------------------------------------------------------*/ .alert_sm, .alert_inline {font:italic 13px/16px var(--font-base); color:var(--base-txt-secondary); padding:10px;} .alert_sm {padding:0 5px;} .alert_inline .ico_alert {margin:0 0 0 15px;} /* -------------------------------------------------------------------------------------------------------------------*/ .empty__state-wrapper { position: absolute; z-index: 1000; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; background: linear-gradient(180deg, transparent 0%, var(--base-cont-top-elevated) 50%); display: none; .empty__state-filter, .empty__state-search, .empty__state-page { display: none; margin: 120px auto 0 auto; ws-btn, a { pointer-events: all; } } } .emptyStateGlobal { width: 100%; height: 100%; max-width: 400px; margin: 0 auto; display: flex; justify-content: center; align-items: center; .emptyStateGlobal__content { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; text-align: initial; min-width: 0; text-wrap-style: balance; &.emptyStateGlobal__content-center { align-items: center; .emptyStateGlobal__row-text_primary, .emptyStateGlobal__row-text_secondary { text-align: center; } .emptyStateGlobal__buttonsGroup, .emptyStateGlobal__row-buttons { flex-wrap: wrap; justify-content: center; } } .emptyStateGlobal__row-icon { ws-icon, svg { width: 32px; height: 32px; } svg { fill: var(--base-txt-secondary); } padding-bottom: 8px; } .emptyStateGlobal__row-text_primary { font: var(--font-ui-15-large-med); color: var(--base-txt-primary); } .emptyStateGlobal__row-text_secondary { font: var(--font-ui-13-small-reg); color: var(--base-txt-tertiary); text-wrap: balance; } .emptyStateGlobal__buttonsGroup, .emptyStateGlobal__row-buttons { display: flex; gap: 8px; } .emptyStateGlobal__row-buttons { padding-top: 16px; } } } .dashboard__block__body .emptyStateGlobal { .emptyStateGlobal__content { gap: 6px; .emptyStateGlobal__row-buttons { padding-top: 12px; } } } @media (max-width: 480px) { .dashboard__block__body .emptyStateGlobal { padding: 40px 16px; box-sizing: border-box; } }.eventsList .moredots { margin: 24px auto; } .eventsList .eventsList__item .moredots { margin: 12px auto 0; } .eventsList__item { padding: 4px 8px 4px 12px; display: flex; position: relative; } .eventsList__item .part_left { width: 32px; flex-grow: 0; flex-shrink: 0; } .eventsList__item .part_left .ico_award { font-size:28px; display: flex; align-items: center; justify-content: center; height: 32px; width: 32px; } .eventsList__item .part_left .ava_pre .av_sm { transform: scale(calc(28 / 24)); margin:4px; border-radius: 8px; } .eventsList__item .part_left .ava_pre .av_sm.av_svg[data-user="3"] { --icon-color: var(--base-txt-btn-a); background: var(--base-hlt-g-hover); border: unset; } .eventsList__item .ava_sm .av_sm { transform: scale(0.83); margin:-2px } .eventsList__item .emotion_pre ws-icon { width:28px; height:28px; margin:2px; --icon-size:28px; } .eventsList__item .part_left .ico_pre { height: 24px; display: flex; align-content: center; align-items: center; justify-content: center; } .eventsList__item .part_left .ico_pre-task { height: 32px; } .eventsList__item .part_left .ico_pre-relate { height: 28px; } .eventsList__item .part_right { flex-grow: 1; flex-shrink: 1; overflow: hidden; } .eventsList__item .part_right > .head { height: 32px; padding: 0 8px; font: var(--font-ui-13-small-reg); gap: 6px; } .eventsList__item .part_right > .head .date { border-radius:4px; font: var(--font-ui-11-micro-reg); } .eventsList__item .part_right > .head .auto { font: var(--font-ui-13-small-semi); color: inherit; } .eventsList__item .part_right > .head .text { color: var(--base-txt-secondary); font-style: italic; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; flex-shrink: 1; } .eventsList__item .head .dot { display: none; width: 8px; height: 8px; border-radius: 8px; } .eventsList__item-new .head .dot { display: block; box-shadow: 0 0 0 1px var(--base-txt-new-minor) inset; } .eventsList__item .head ws-icon[name=star-solid], .eventsList__item .head ws-icon[name=star] { display: none; } .eventsList__item-star .head ws-icon[name=star-solid], .eventsList__item-star .head ws-icon[name=star]{ display:block; --icon-color: var( --base-btn-notice-minor); } .eventsList__item-unseen .head .dot { display: block; background: var(--base-txt-new-minor); } .eventsList__item .user { font: var(--font-ui-13-small-semi); } .eventsList__item .user b { font-weight: inherit } .eventsList__item .eventsList__item__taskSmall { height: 24px; border-radius: 6px 12px 12px 6px; box-shadow: var(--shadow-cont-minor-lineonly-inside); padding: 0 8px 0 2px; background: none; flex-shrink: 1; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; cursor: pointer; } .eventsList__item .eventsList__item__taskSmall:hover { box-shadow: var(--shadow-cont-major-lineonly-outside); color: var(--base-txt-primary); background: var(--base-hlt-g-easy); } .rightPanel .eventsList__item .eventsList__item__taskSmall:hover { background: var(--base-cont-top-elevated); } .eventsList__item .eventsList__item__taskSmall task-stage, .eventsList__item .eventsList__item__param .tag-stage { --icon-size:16px; } .eventsList__item .eventsList__item__taskSmall .in { font: var(--font-ui-12-mini-reg); padding: 0 4px; } .eventsList__item .eventsList__item__taskDigest { height: 32px; border-radius: 6px 12px 12px 6px; box-shadow: var(--shadow-cont-minor-lineonly-inside); padding: 0 6px 0 2px; background: none; flex-shrink: 1; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; cursor: pointer; margin: 1px 0 0 0; background: var(--base-cont-top); span.terms_label_warm_easy, span.terms_label_hot_easy, span.terms_label_wait_easy, span.terms_label_related_easy, span.terms_label_done_delay, span.terms_label_today_easy, span.terms_label_tomorrow_easy, span.terms_label_normal { font: var(--font-ui-11-micro-med); padding: 0 4px; } } .eventsList__item .eventsList__item__taskDigest:hover { box-shadow: var(--shadow-cont-major-lineonly-outside); color: var(--base-txt-primary); background: var(--base-hlt-g-easy); } .rightPanel .eventsList__item .eventsList__item__taskDigest:hover { background: var(--base-cont-top-elevated); } .eventsList__item .eventsList__item__taskDigest .separator { margin: 0 2px; } .eventsList__item .eventsList__item__taskDigest task-stage { --icon-size: 20px; } .eventsList__item .eventsList__item__taskDigest .in { font: var(--font-ui-13-small-reg); padding: 0 4px; } .eventsList__item .eventsList__item__taskDigest .r { gap: 4px; } .eventsList__item .eventsList__item__projectSmall { height: 24px; border-radius: 6px; box-shadow: var(--shadow-cont-minor-lineonly-inside); padding: 0 8px 0 2px; background: none; flex-shrink: 1; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .eventsList__item .eventsList__item__projectSmall[data-project]:hover { box-shadow: var(--shadow-cont-major-lineonly-outside); color: var(--base-txt-primary); background: var(--base-hlt-g-easy); } .eventsList__item .eventsList__item__projectSmall ws-icon[name="project"], .eventsList__item .eventsList__item__projectSmall ws-icon.proj_color, .eventsList__item .eventsList__item__taskSmall ws-icon.proj_color { width: 20px; height: 20px; --icon-size: 16px; } .eventsList__item .eventsList__item__projectSmall ws-icon.proj_color ws-emoji, .eventsList__item .eventsList__item__taskSmall ws-icon.proj_color ws-emoji { width: 16px; height: 16px; } .eventsList__item .eventsList__item__projectSmall .in { font: var(--font-ui-12-mini-reg); padding: 0 4px; } .eventsList__item .part_right > .text { padding: 0px 8px 6px; font: var(--font-ui-14-regular-reg); gap: 8px; } .eventsList__item.eventsList__item-type35 .part_right > .text { font: var(--font-txt-13-small-reg); } .eventsList__item .part_right .text-reason { font: var(--font-txt-13-small-reg); color: var(--base-txt-tertiary); } .eventsList__item .part_right .text-reason .eventsList__item__reason-label { display: inline-block; margin-right: 6px; font: var(--font-ui-12-mini-reg); font-variant: all-small-caps; color: var(--base-txt-btn-w); padding: 0 8px; border-radius: 6px; background: var(--base-hlt-w-selected); vertical-align: bottom; } .eventsList__item-comment .part_right > .text { display: -webkit-box; -webkit-line-clamp: 3; text-overflow: ellipsis; -webkit-box-orient: vertical; overflow: hidden; padding: 0; margin: 0px 8px 6px; } .eventsList__item .part_right > .files { padding: 0 0 8px 8px; font: var(--font-ui-15-large-reg); line-height: 24px; } .eventsList__item .part_right > .text-nowrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .eventsList__item .part_right > .data { display: flex; padding: 2px 8px 6px; flex-wrap: wrap; row-gap: 4px; column-gap: 16px; } .eventsList__item .time { font: var(--font-ui-11-micro-reg); color:var(--base-txt-secondary); } .eventsList__item.eventsList__item-unseen .time { color:var(--base-txt-accent);; font-weight: bold; } .eventsList span.date { display: inline-flex; align-items: center; color:var(--base-txt-primary); font: var(--font-ui-11-micro-med); padding: 0 4px; height: 20px; border-radius: 6px; } .eventsList__item-comment .part_right .text > .user { font-weight: 600; } .eventsList__item .eventsList__item__task { position: relative; border-radius: 4px 16px 16px 4px; display: flex; padding: 0 4px 0 6px; background: none; box-sizing:border-box; cursor: pointer; overflow: hidden; --this-shadow: var(--shadow-cont-minor-lineonly-inside); background: var(--base-cont-top); align-items: flex-start; &> .separator { align-self: center; margin: 0 2px; } &> .space-icon { align-self: center; } } .eventsList__item .eventsList__item__task:hover { background: var(--base-cont-top-elevated); --this-shadow: var(--shadow-cont-major-lineonly-outside); } .rightPanel .eventsList__item .eventsList__item__task:hover { background: var(--base-cont-top-elevated); } .eventsList__item-type1 .eventsList__item__task, .eventsList__item-type9 .eventsList__item__task, .eventsList__item-type10 .eventsList__item__task, .eventsList__item-type21 .eventsList__item__task, .eventsList__item-type30 .eventsList__item__task, .eventsList__item-type31 .eventsList__item__task, .eventsList__item-type35 .eventsList__item__task, .eventsList__item-type40 .eventsList__item__task { box-shadow: var(--this-shadow); } .eventsList__item-type1 .eventsList__item__task:before, .eventsList__item-type9 .eventsList__item__task:before, .eventsList__item-type10 .eventsList__item__task:before, .eventsList__item-type21 .eventsList__item__task:before, .eventsList__item-type30 .eventsList__item__task:before, .eventsList__item-type31 .eventsList__item__task:before, .eventsList__item-type35 .eventsList__item__task:before, .eventsList__item-type40 .eventsList__item__task:before { content: ''; position: absolute; left: 0; width: 4px; height: 100%; } .eventsList__item-type31 .eventsList__item__task:before { background: var(--lbl-date); } .eventsList__item-type1 .eventsList__item__task:before { background: var(--base-txt-act-minor); } .eventsList__item-type10 .eventsList__item__task:before { background: var(--base-txt-alert-major); } .eventsList__item-type40 .eventsList__item__task:before { background: var(--lbl-date); } .eventsList__item-type30 .eventsList__item__task:before, .eventsList__item-type35 .eventsList__item__task:before { background: var(--lbl-today-minor); } .eventsList__item-type9 .eventsList__item__task:before { background: var(--base-txt-accent); } .eventsList__item-type21 .eventsList__item__task:before { background: var(--base-hlt-w-active); } .eventsList__item .eventsList__item__task > task-stage { margin: 6px 6px 6px 2px; flex-grow: 0; flex-shrink: 0; } .eventsList__item .eventsList__item__task > ws-icon { margin: 4px 4px 4px 0; width:24px; height:24px; --icon-size:24px; --icon-color:var(--base-txt-primary); flex-grow: 0; flex-shrink: 0; } .eventsList__item .eventsList__item__task .in { flex-grow: 1; flex-shrink: 1; overflow: hidden; } .eventsList__item .eventsList__item__task .head { height:32px; padding: 0; gap: 4px; } .eventsList__item .priorb { margin: 0 } .eventsList__item .eventsList__item__task .head .in { font: var(--font-ui-13-small-semi); white-space: nowrap; } .eventsList__item .eventsList__item__task > .in { font: var(--font-ui-12-mini-reg); padding: 0; } .eventsList__item .eventsList__item__task .text { font: var(--font-txt-13-small-reg); color: var(--base-txt-secondary); padding: 0 0 8px; } .eventsList__item .eventsList__item__task .data { padding: 0 4px 0 0; display: flex; /* padding: 2px 8px 6px; */ flex-wrap: wrap; row-gap: 4px; column-gap: 6px; } .eventsList__item .eventsList__item__task .data > :last-child { display: inline-flex; margin-bottom: 8px; } .eventsList__item .eventsList__item__label { --icon-size: 14px; height: 22px; padding: 0 2px; font: var(--font-ui-11-micro-reg); display: inline-flex; border-radius: 6px; } .eventsList__item .eventsList__item__label span { padding: 0 6px 0 6px; } .eventsList__item .eventsList__item__label-done span { padding: 0 2px 0 6px; } .eventsList__item .eventsList__item__label-undone { color: var(--base-txt-btn-w); --icon-color: var(--base-txt-btn-w); background: var(--base-hlt-w-selected); } .eventsList__item .eventsList__item__label-done { box-shadow:0 0 0 1px var(--base-txt-primary) inset; --icon-color: var(--base-txt-primary); } .eventsList__item .eventsList__item__label-create { color: var(--base-txt-link-major); --icon-color: var(--base-txt-link-major); } .eventsList__item .eventsList__item__label-edit { color: var(--base-txt-btn-flip); --icon-color: var(--base-txt-btn-flip); background: var(--base-txt-new-major); } .eventsList__item .eventsList__item__label-remove, .eventsList__item .eventsList__item__label-delete { color: var(--base-txt-alert-major); --icon-color: var(--base-txt-alert-major); background: var(--base-hlt-w-selected); } .eventsList__item .eventsList__item__label-mention { background: var(--base-hlt-w-hover); color: var(--base-txt-alert-major); --icon-color: var(--base-txt-alert-major); } .eventsList__item .eventsList__item__label-invite { background: var(--colorize-lbl-blue-bg); color: var(--base-txt-link-major); --icon-color: var(--base-txt-link-major); } .eventsList__item .eventsList__item__label-emotion { background: var(--lbl-date); } .eventsList__item .eventsList__item__label-alarm { --icon-color: var( --base-txt-btn-b); padding: 0 5px; } .eventsList__item .eventsList__item__label-alarm ws-icon { width: 16px; height: 16px; } .eventsList__item .eventsList__item__paramCosts .in { font: var(--font-ui-13-small-reg); } .eventsList__item .eventsList__item__paramCosts .in .value + strike { margin-left: 2px; } .eventsList__item .eventsList__item__paramCosts .in .label { color: var(--base-txt-tertiary); } .eventsList__item .eventsList__item__paramCosts__time .in { color: var(--costs-time-text); } .eventsList__item .eventsList__item__paramCosts__money .in { color: var(--costs-money-text); } .eventsList__item .eventsList__item__paramMini { padding: 0 2px; display: inline-flex; font: var(--font-ui-12-mini-reg); background: var(--base-hlt-g-hover); border-radius: 4px; height: 24px; color: inherit; } .eventsList__item .eventsList__item__paramMini-costs { background: unset; } .eventsList__item .eventsList__item__paramMini-costs-label .badge-costs { margin: 0; padding: 0 4px; pointer-events: none; /* just to prevent hover styles */ } .eventsList__item .eventsList__item__paramMini-users { flex-wrap: wrap; gap: 4px; height: auto; background: none; } .eventsList__item .eventsList__item__paramMini .in { gap: 4px; } .eventsList__item .eventsList__item__paramMini-users .in { height: 20px; border-radius: 10px; background: var(--base-cont-low); } .eventsList__item .eventsList__item__paramMini span { font: inherit; } .eventsList__item .eventsList__item__paramMini > span, .eventsList__item .eventsList__item__paramMini > strike span { padding: 0 6px 0 2px; } .eventsList__item .eventsList__item__paramMini .av_sm { scale: 0.8333; margin: 0 0 0 -4px; padding: 0; } .eventsList__item .eventsList__item__param { display: inline-flex; gap: 6px; flex-shrink: 1; align-items: center; min-width: 0; /* some tricks for text-overflow: ellipsis; */ } .eventsList__item .eventsList__item__param-desc { display: block; } .eventsList__item .eventsList__item__param:has(.tags_wrapper) { align-items: flex-start; } .eventsList__item .eventsList__item__param i { font: var(--font-ui-12-mini-reg); font-variant: all-small-caps; margin-right: 0; color: var(--base-txt-btn-c); padding: 0 8px; border-radius: 12px; background: var(--colorize-lbl-aqua-bg); } .eventsList__item .eventsList__item__param-desc i { display: inline-block; } .eventsList__item-type14 .eventsList__item__param i { background: var(--base-hlt-w-selected); color: var(--base-txt-alert-major); --icon-color: var(--base-txt-alert-major); } .eventsList__item .eventsList__item__param-tags i { align-self: flex-start; } .eventsList__item .eventsList__item__param > .in, .eventsList__item .eventsList__item__param strike .in { font: var(--font-ui-12-mini-reg); gap: 4px; height: 24px; /* border-radius: 12px; */ /* дивно виглядає обрізання коли нема рамки */ /* display: inline-flex; */ /* нам це НЕ треба на всіх пропсах, щоб норм працювало text-overflow */ align-items: center; } .eventsList__item .eventsList__item__param > .in, .eventsList__item .eventsList__item__param strike, .eventsList__item .eventsList__item__param strike .in { flex-shrink: 1; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .eventsList__item .eventsList__item__paramMini .in:empty { display: none; } .eventsList__item .eventsList__item__param strike { text-decoration: none; position:relative; max-height: 24px; opacity: 50%; } .eventsList__item .eventsList__item__paramMini-costs-label { font: var(--font-ui-10-nano-reg); } .eventsList__item .eventsList__item__paramMini-costs strike { text-decoration: none; position: relative; opacity: 50%; } .eventsList__item .eventsList__item__paramMini-costs .in + .in { margin-left: 4px; } .eventsList__item .eventsList__item__paramMini-users strike { text-decoration: none; position: relative; max-height: 20px; } .eventsList__item .eventsList__item__param .tags_wrapper strike { flex-shrink: 0; } .eventsList__item .eventsList__item__param strike:after, .eventsList__item .eventsList__item__paramMini-users strike:after, .eventsList__item .eventsList__item__paramMini-costs strike:after { content: ''; position:absolute; left: 0; right: 0; top: 50%; border: 1px solid var(--base-txt-secondary); } .eventsList__item .eventsList__item__param .tags_wrapper { display: flex; flex-wrap: wrap; flex-shrink: 1; gap: 4px 12px; } .eventsList__item .eventsList__item__param .tags { display: inline-flex; flex-wrap: wrap; row-gap: 2px; } .eventsList__item .eventsList__item__task .tags { flex-shrink: 1; } .eventsList__item .eventsList__item__param .tags span.tag, .eventsList__item .eventsList__item__task .tags span.tag { margin: 0; padding: 0 8px 0 5px; font: var(--font-ui-12-mini-reg); } .eventsList__item .eventsList__item__param .tags span.tag:not(.tag-stage), .eventsList__item .eventsList__item__task .tags span.tag:not(.tag-stage) { margin: 0 -6px 0 0; &:last-child { margin-right: 0; } } .eventsList__item .eventsList__item__param .tags span.tag:not(.tag-stage,.tagDel):before, .eventsList__item .eventsList__item__task .tags span.tag:not(.tag-stage,.tagDel):before { display: block; margin-left: 0; } .eventsList__item .eventsList__item__param .tags em, .eventsList__item .eventsList__item__task .tags em { margin: 0 8px 0 0; } .eventsList__item .eventsList__item__param .tags span.tag.tag-stage, .eventsList__item .eventsList__item__task .tags span.tag.tag-stage { margin: 0; padding: 0; font: var(--font-ui-11-micro-reg); box-shadow: none; background: none; } .eventsList__item .eventsList__item__param .tags span.tag-stage ws-icon { margin: 0 2px 0 0; --icon-size: 20px; } .eventsList__item .ico_pre ws-icon { --icon-color: var(--base-txt-primary); } .eventsList__item-unseen .ico_pre ws-icon[name*=comment] { --icon-color: var(--base-txt-new-minor); } .eventsList__item-unseen .ico_pre ws-icon[name*=comment] use:first-child { display:none; } .eventsList__item:not(.eventsList__item-unseen) .ico_pre ws-icon[name*=comment] use:last-child { display:none; } .eventsList__item .ico_pre ws-icon[name=edit_prop] { --icon-color: var(--base-txt-link-major); } .eventsList__item.eventsList__item-reply_me .ico_pre ws-icon, .eventsList__item.eventsList__item-reply .ico_pre ws-icon { transform: rotate(180deg); } .eventsList__item.eventsList__item-reply_me .ico_pre ws-icon, .eventsList__item .ico_pre ws-icon[name=at_sign] { --icon-color: var(--base-txt-alert-major); } .eventsList__item .ico_pre ws-icon[name="arrows/moved"] { --icon-color: var(--base-txt-btn-c); } .eventsList__item .ico_pre ws-icon[name=calendar_waiting], .eventsList__item .ico_pre ws-icon[name=trash_can] { --icon-color: var(--base-txt-btn-w); } .eventsList__item.eventsList__item-comment.eventsList__item-type12 .ico_pre ws-icon, .eventsList__item .ico_pre ws-icon[name=edit], .eventsList__item .ico_pre ws-icon[name=merge] { --icon-color: var(--base-txt-new-major); } .eventsList__item.eventsList__item-type14 .ico_pre-relate ws-icon { opacity: 50%; } .eventsList__item .ico_bg_pre ws-icon { width: 28px; height: 28px; border-radius: 8px; margin: 2px; } .eventsList__item ws-icon[name=alarm_clock], .eventsList__item ws-icon[name=notifications_alt-solid]{ --icon-color: var(--base-txt-notice-major); background: var(--lbl-today-minor); } .eventsList__item ws-icon[name=reaction-party]{ background: var(--colorize-lbl-lightpink-bg); } .eventsList__item ws-icon[name=notifications_alt]{ --icon-color: var(--base-txt-tertiary); background: var(--lbl-date); } .eventsList__item ws-icon[name=attach-horiz] { --icon-color: var(--base-txt-link-major); } .eventsList__item ws-icon[name=lock_sm] { --icon-color: var(--base-txt-alert-major); } .eventsList__item ws-icon[name=lock_sm_open] { --icon-color: var(--base-txt-new-major); } .eventsList__item ws-icon[name*=guest] { --icon-color: var(--base-txt-new-major); } .eventsList__item ws-icon[name=time] { --icon-color: var(--costs-time-major); } .eventsList__item ws-icon[name=money] { --icon-color: var(--costs-money-major); } .sidePanel__list__item.eventsList__item-unseen:before, .sidePanel__list__item.eventsList__item-type53:before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; border-right: 4px solid var(--base-txt-new-minor); border-radius: 0 4px 4px 0; } .sidePanel__list__item.eventsList__item-type53:before { border-right: 4px solid var(--colorize-lbl-pink); } .eventsList__item-type68 .ico_bg_pre ws-icon { background: var(--base-hlt-b-active); --icon-color: var(--base-txt-btn-b); } .eventsList__item-noNotify { /* background: var(--base-cont-mid); */ } .eventsList__item-my { } .eventsList__item-click { cursor: pointer } .eventsList__item-new div.time { } .eventsList__item-new.log_alarm div.time { /*background: var(--colors-amber-500)*/ } .eventsList__item-new.log_mention div.time { /*background: var(--base-btn-alert-primary-minor)*/ } .eventsList__item span.same { color: var(--base-txt-tertiary) } .eventsList__item span.add { color: var(--base-txt-accent) } .eventsList__item span.del { text-decoration: line-through; text-decoration-color: var(--base-btn-alert-primary-major); } .eventsList__item .eventsList__item__birthday { background: var(--colorize-lbl-lightpink-bg); width: 240px; height: 52px; border-radius: 26px; box-shadow: var(--shadow-cont-minor-lineonly-inside); &:hover { box-shadow: var(--shadow-cont-major-lineonly-outside); } } .eventsList__item .eventsList__item__birthday .img { background: var(--base-cont-top); width:40px; height:40px; padding:2px; border-radius:24px; margin: 4px; } .eventsList__item .eventsList__item__birthday .img .av_nm { margin: -4px; transform: scale(0.85); } .eventsList__item .eventsList__item__birthday .name { font: var(--font-ui-12-mini-reg); color: var(--colorize-lbl-txt-primary); overflow: hidden; padding: 0 4px; } .eventsList__item .eventsList__item__birthday .name b { font: var(--font-ui-15-large-semi); color: var(--colorize-lbl-txt-primary); } .eventsList__item .eventsList__item__birthday .name > b, .eventsList__item .eventsList__item__birthday .name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .eventsList__item .eventsList__item__birthday > ws-icon { --icon-size: 24px; width: 44px; height: 44px } .eventsList__item .eventsList__item__project { border-radius: 12px; box-shadow: var(--shadow-brd-enable); display: flex; padding: 0 0 0 6px; background: none; box-sizing:border-box; height: 52px; } .eventsList__item .eventsList__item__project:hover { box-shadow: var(--shadow-cont-major-lineonly-outside); background: var(--base-cont-top-elevated); } .eventsList__item .eventsList__item__project .logo { padding: 4px 8px 4px 0; } .eventsList__item .eventsList__item__project .logo .proj_color { width: 40px; height: 40px; display: flex; align-content: center; align-items: center; justify-content: center; border-radius: 8px; /*box-shadow: 0 0 0 20px var(--white-tertiary) inset;*/ } .eventsList__item .eventsList__item__project .logo svg, .eventsList__item .eventsList__item__project .logo ws-icon { width: 32px; height: 32px; } .eventsList__item .eventsList__item__project .img { background: none; width:48px; height:48px; padding:2px; border-radius:24px; transform: scale(0.66); } .eventsList__item .eventsList__item__project .img .av_nm { } .eventsList__item .eventsList__item__project .name .in { font: var(--font-ui-15-large-semi); padding: 0; } .eventsList__item .eventsList__item__project .users { margin: 0 8px 0 0; padding-left: 2px; } .eventsList__item .eventsList__item__project .users .av_sm { margin: -4px; transform: scale(0.66); } .eventsList__item .eventsList__item__project .users .more { display: inline-flex; align-items: center; width: auto; height: 16px; padding: 0 4px 0 2px; } .eventsList__item .eventsList__item__project .users i { height: 16px; margin: 0 2px 0 4px; } .eventsList__item .eventsList__item__project .info {margin: 0 0 0 8px;} .eventsList__item .eventsList__item__project .info ws-icon { width: 16px; height: 16px; --icon-size: 16px; } .eventsList__item .eventsList__item__project .info .in { padding: 0 4px; font: var(--font-ui-12-mini-reg); color: var(--base-txt-tertiary) } .eventsList-full { padding: 24px 0; } .eventsList__group__content { margin: 0 0 24px 0; } .eventsList__group__subset { } .eventsList__group__content { background: var(--base-cont-top); border-radius: 16px; } .eventsList__group__title { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 32px 8px; font: var(--font-ui-18-title-2-semi); } .eventsList-full > .eventsList__group:first-child .eventsList__group__title { display: none; } .eventsList__group__title a.moredots { margin: 2px 0 0 10px; display: inline-block; color: var(--white-accent); vertical-align: top; } .eventsList-full .eventsList__item { padding: 8px 24px 8px 32px; } .eventsList-full .eventsList__item:hover, .eventsList-full .eventsList__item.selected { background: var(--base-cont-mid); box-shadow: 0 1px var(--base-line-tertiary) inset, 0 -1px var(--base-line-tertiary) inset; } .eventsList__form:not(.eventsList__form-collapsed) .eventsList__filter-btn use:first-child { display: none; } .eventsList__form.eventsList__form-collapsed .eventsList__filter-btn use:last-child { display: none; } .eventsList__form-collapsed .eventsList__filter { display: none; } .eventsList__filter { height: 42px; gap: 8px; } .eventsList__filter > .cnt { min-width: 24px; font: var(--font-ui-14-regular-semi); } .eventsList__filter button { max-width:200px; } .rightPanel .eventsList__filter { position: absolute; top: 0; left: 0; right: 0; z-index: 1; height: 48px; padding: 0 18px; border-bottom: none; box-shadow: 0 var(--screen-minus-px) var(--base-line-tertiary) inset; background: linear-gradient(180deg, var(--base-cont-top), var(--base-cont-top-opac)); backdrop-filter: blur(4px); } .eventsList__filter ws-btn.range button, .filt_r ws-btn.range button { font: var(--font-ui-15-large-semi); } .eventsList__item .fileItem { width: 210px; box-shadow: var(--shadow-cont-minor-lineonly-inside); } .eventsList__item .part_right .eventsList__item__paramMini, .eventsList__item .part_right .eventsList__item__param > .in, .eventsList__item .part_right .eventsList__item__param strike .in { height: 20px; } .eventsList__item .part_right .eventsList__item__param .in .av_sm { scale: 0.83333; } .eventsList__item-birthday .part_right > .head { height: unset; min-height: 32px; align-items: flex-start; .auto { display: flex; gap: 0 8px; flex-wrap: wrap; flex-shrink: 1; align-items: center; line-height: 32px; } & > .eventsList__item__label { height: 32px; } & > ws-icon[name=star-solid] { margin-top: 6px; } & > .dot { margin-top: 12px; } & > .time { line-height: 32px; } .auto__user { display: inline-flex; align-items: center; padding: 0 4px; margin: 0 -4px; &:hover { box-shadow: var(--shadow-cont-major-lineonly-inside); border-radius: 16px; } } /* .auto__user-ava {} */ .auto__user-name { padding: 0 4px; } } .eventsList__item-birthday-today .part_right > .data { row-gap: 5px; /* exact size to prevent box-shadow overlap */ .eventsList__item__birthday:has( + .eventsList__item__birthday) { margin-right: -65px; } .eventsList__item__birthday + .eventsList__item__birthday { box-shadow: var(--shadow-cont-minor-lineonly-inside), 0 0 0 4px var(--current-background-color); background: var(--current-background-color) linear-gradient(var(--colorize-lbl-lightpink-bg), var(--colorize-lbl-lightpink-bg)); &:hover { box-shadow: var(--shadow-cont-major-lineonly-outside), 0 0 0 4px var(--current-background-color); } } } .eventsList__item-reply_me .part_left .ava_pre .av_sm, .eventsList__item-mention .part_left .ava_pre .av_sm { box-shadow: 0 0 0 1px var(--base-cont-top), 0 0 0 2px var(--base-txt-btn-w); } .eventsList__item-mention .part_right .text .me { background: var(--base-hlt-w-selected); border-radius: 4px; padding-block: 2px; } .eventsList__item-type40 .part_right .text { font: var(--font-ui-13-large-reg); font-style: italic; color: var(--base-txt-tertiary); } .eventsList__item-type9 .eventsList__item__task > .in .head > .in { color: var(--base-txt-tertiary); text-decoration-line: line-through; text-decoration-color: var(--base-line-primary); text-decoration-thickness: calc(var(--screen-px) * 1.5); } .eventsList__item-type21 .eventsList__item__task > .in .head > .in { color: var(--base-txt-tertiary); text-decoration: line-through; text-decoration-color: var(--base-btn-alert-primary-major); } .eventsList__item-type1 .ico_pre ws-icon { --icon-color: var(--base-txt-link-major); } .eventsList__item-type10 .ico_pre ws-icon { --icon-color: var(--base-txt-alert-major); } .eventsList__item__taskSmall .left-icon { margin-right: 4px; } .eventsList__item-type22 .part_right .text, .eventsList__item-type12 .part_right .text, .eventsList__item-type2 .part_right .text { padding-top: 4px; font: var(--font-txt-13-small-reg); } .eventsList__item .part_right .eventsList__item__param-desc .text { display: inline; } .sidePanel__list__item .eventsList__item__taskSmall-deleted .in, .sidePanel__list__item .eventsList__item__taskSmall-done .in { color: var(--base-txt-tertiary); text-decoration-line: line-through; text-decoration-color: var(--base-line-primary); text-decoration-thickness: calc(var(--screen-px)* 1.5); } .eventsList__item .reply_to_item { border-radius: 6px; background: var(--base-hlt-hover); display: flex; align-items: center; box-shadow: inset 0 0 0 var(--screen-px) var(--base-line-primary); margin-bottom: 2px; } .eventsList__item .reply_to_item .in { padding: 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-grow: 1; flex-shrink: 1; font: var(--font-ui-12-mini-reg); color: var(--base-txt-accent); } .eventsList__item .reply_to_item .av_sm { border-radius: 6px 0 0 6px; flex-shrink: 0; } .eventsList-full .eventsList__item.eventsList__item-type33 .eventsList__item__paramMini-users { height: unset; } /* relationIcon */ .eventsList__item .ico_pre .relationIcon, .eventsList__item .ico_pre .relationIcon-info, .eventsList__item .ico_pre .relationIcon-info_by { --icon-color: var(--base-txt-btn-c); } .eventsList__item .ico_pre .relationIcon-block_by, .eventsList__item .ico_pre .relationIcon-start, .eventsList__item .ico_pre .relationIcon-end { --icon-color: var(--base-txt-btn-w); } .eventsList__item .ico_pre .relationIcon-block, .eventsList__item .ico_pre .relationIcon-after_end, .eventsList__item .ico_pre .relationIcon-after_start { --icon-color: var(--base-txt-btn-b); } /* /relationIcon */ @media screen and (max-width: 480px) { .eventsList-full .eventsList__item { padding: 8px 12px 8px 20px; } } @media (min-width: 481px) { .fileCreate__wrapper { position: fixed; bottom: -100%; right: 20px; z-index: 1020; background: var(--base-cont-mod-input); width: 560px; box-shadow: var(--shadow-tray-major); border-radius: 12px 12px 0 0; transition: all 0.3s ease; } .fileCreate__wrapper.top-layer { z-index: 1021; } .fileCreate__wrapper-active { bottom: 0 } .fileCreate__wrapper-fullscreen { width: calc(100% - 64px); right: 0; height: 100%; border-radius: 0; } .fileCreate__wrapper-fullscreen .fileCreate { height: 100%; } } @media (max-width: 480px) { .fileCreate__wrapper { display:none; } body.mobilefileCreate main { display: none; } body.mobilefileCreate .fileCreate__wrapper { display: block; height: 100%; position: relative; background: var(--base-cont-mod-top); } body.mobilefileCreate .fileCreate__wrapper { --layer: 0; --zIndex: 1032; z-index: calc(var(--zIndex) + var(--layer)); } } .fileCreate { min-height: 452px; } .fileCreate > * { flex-shrink: 0; flex-grow: 0; } .fileCreate__head { padding: 6px 8px; height: 44px; box-sizing: border-box; } /*.fileCreate__head .space, .fileCreate__head ws-icon {*/ /* width: 40px;*/ /* height: 40px;*/ /* display: flex;*/ /* justify-content: center;*/ /* align-items: center;*/ /* border-radius: 20px;*/ /*}*/ /*.fileCreate__head .space ~ .space {*/ /* margin-left:4px;*/ /*}*/ .fileCreate__head .minimize { cursor: zoom-out; } .fileCreate__head .space:hover { background: var(--base-hlt-b-notr-hover); } .fileCreate__head .space:hover:active { background: var(--base-hlt-b-notr-selected); } .fileCreate__head > .in { padding: 0 8px; color: var(--base-txt-secondary); } .fileCreate__files { padding: 12px 24px; max-height: 40vh; margin-bottom: auto; } .fileCreate__content { padding: 8px 24px; } .fileCreate__content__title { margin: 0 0 8px; } .fileCreate__content__title textarea { max-height: 84px; min-height: 32px; height: 32px; font: var(--font-ui-22-title-1-semi); width: 100%; box-sizing: border-box; border: none; resize: none; padding: 0; overflow: hidden; background: transparent; } .fileCreate__content__title textarea::placeholder { font: 600 18px/32px var(--font-base); opacity: 1; color: var(--base-txt-tertiary) } .fileCreate__content__title textarea::-webkit-input-placeholder { font: 600 18px/32px var(--font-base); opacity: 1; color: var(--base-txt-tertiary) } .fileCreate__content .editor__data { min-height: 32px; font: 13px/20px var(--font-base); padding: 12px 0; cursor: text; } .fileCreate__content .editor__data:focus { outline: none; } .fileCreate__content__title textarea::placeholder { font: var(--font-ui-22-title-1-semi); opacity: 1; color: var(--base-txt-tertiary) } .fileCreate__content__title textarea::-webkit-input-placeholder { font: var(--font-ui-22-title-1-semi); opacity: 1; color: var(--base-txt-tertiary) } .fileCreate__content .editor__data:empty:before { content: attr(data-placeholder); color: var(--base-txt-tertiary) } .fileCreate__content__item { align-items: flex-start; gap: 12px; overflow: hidden; } .fileCreate__head .fileCreate__content__item { gap: 0 4px; flex-wrap: nowrap; padding: 0 6px 0 2px; box-sizing: border-box; min-height: unset; } .fileCreate__content__item ~ .fileCreate__content__item { border-top: 1px solid var(--base-line-tertiary); } .fileCreate__content__item > [data-container] { overflow: hidden; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; } .fileCreate__content__item > [data-container]:not([data-container=priority]) { flex-shrink: 1; } .fileCreate__content__item > [data-container]:not([data-container=priority]) > * { flex-shrink: 1; } .fileCreate__content__item { padding: 4px 0; } .fileCreate__content__item > .in { font: 11px/20px var(--font-base); color: var(--base-txt-tertiary); font-variant: small-caps; } .fileCreate__content__item .data { font: 12px/22px var(--font-base); color: var(--base-txt-secondary); height: 24px; border-radius: 12px; background: var(--base-cont-mod-low); max-width: 190px; overflow: hidden; padding: 0 2px; } .fileCreate__content__item .data > .in { padding: 0 4px; color: var(--base-txt-tertiary); } .fileCreate__content__item .data > .limit ~ .limit { border-left: 1px solid var(--base-line-secondary); margin-left: 2px; padding-left: 6px; } .fileCreate__content__item .prior > .in { width:20px; text-align: center; padding:0; color:var(--white-primary); } .fileCreate__content__item .data > ws-icon svg { width: 16px; height:16px; } .fileCreate__content__item .data > ws-icon[name=close_sm] {width: 16px;height: 16px;} .fileCreate__content__item .data > .space ws-icon, .fileCreate__content__item .data > .space svg { width: 16px; height: 16px; } .fileCreate__content__item .data > .in b { font-weight: normal; color: var(--base-txt-primary); } .fileCreate__content__item .data:hover { background: var(--base-hlt-hover); } .fileCreate__buttons { padding: 12px 20px calc(var(--app-sa-bot) + 20px) 20px; height: 32px; border-top: var(--screen-px) solid var(--base-line-tertiary); gap: 8px; width: calc(100% - 40px); max-width: 700px; margin: 0 auto; } .fileCreate__buttons > .flex_content { position: relative; } .fileCreate__buttons .but { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 4px; } .fileCreate__buttons .editor__toolbar { overflow: visible; } .fileCreate__buttons .format_toolbar { position: absolute; bottom: 44px; left: -16px; background: var(--base-cont-top); box-shadow: 0 0 4px 1px var(--colors-alpha-dark-20); border-radius: 4px; padding: 4px; display: none; } .fileCreate__buttons .format_toolbar-active { display: flex; flex-wrap: nowrap; flex-direction: row; } .fileCreate__content__editor textarea { } .fileCreate .attachWrapper .fileItem { width: calc(100% / 2 - 19px); background: var(--base-cont-mod-top); } .fileCreate .attachWrapper .fileItem__content .name { padding: 0 2px; } .fileCreate .attachWrapper .fileItem__content .links ws-icon { opacity: 1; } .fileCreate__subscribers { height:24px; font:12px/24px var(--font-base); color:var(--base-txt-tertiary); position:relative; white-space:nowrap; gap: 8px; cursor: pointer; } .fileCreate__subscribers__item:not(.fileCreate__subscribers__item-subscribe) { } .fileCreate__subscribers .plus ws-icon { border:1px dashed var(--base-txt-secondary); width: 24px; height:24px; box-sizing:border-box; border-radius:12px; } .fileCreate__subscribers .plus svg { width: 16px; height: 16px; } .fileCreate__subscribers__item:not(.fileCreate__subscribers__item-hidden) ws-icon { display:none; } .fileCreate__subscribers__item { position:relative; margin-right: -2px; } .fileCreate__subscribers__item:nth-child(n+6) { display: none } .fileCreate__subscribers__item:nth-child(n+5):last-child { display: inline-block } .fileCreate__subscribers__item .av_sm { box-shadow: 0 0 0 2px var(--base-cont-top); } .fileCreate__subscribers__item ws-icon { position:absolute; bottom:-3px; left:-3px; background:var(--base-btn-togg-off); border-radius:3px; width:12px; height:12px; box-shadow:0 0 0 1px var(--base-cont-mod-top); } .fileCreate__subscribers__item ws-icon svg { width:10px; height:10px; fill:var(--white-primary) } .fileCreate__subscribers .more { display: inline-block; width: 24px; height: 24px; text-align: center; font: var(--font-ui-10-nano-med); line-height: 24px; border-radius: 12px; background: var(--base-cont-low); vertical-align: top; position: relative; color: var(--base-txt-primary); box-shadow: 0 0 0 2px var(--base-cont-top); } .fileCreate-initClose > :not(.editBlock-close) { opacity: 0.5; pointer-events: none } .fileCreate-initClose .editBlock-close { position: absolute; z-index:1; bottom: 0; left: 0; right: 0; background: var(--base-cont-mod-top); border-top: 2px solid var(--base-btn-alert-primary-minor); padding:12px 0 24px; } @media (max-width: 480px) { .fileCreate { min-height: unset; height: 100%; } .fileCreate__files { max-height: unset; flex-shrink: 1; } }.ext { width: 38px; height: 18px; padding: 30px 0 0 0; position: relative; text-align: center; } .attachWrapper.attachWrapper-small .fileItem .ext, .fileItem-small .ext { padding-top: 24px; width: 32px; height: 16px; } .ext u { position: absolute; width: 40px; height: 30px; left: 0; top: 0; border-radius: 4px 10px 0 0; opacity: 0.25 } .attachWrapper.attachWrapper-small .fileItem .ext u, .fileItem-small .ext u { width: 32px; height: 24px; } #modal__previewPanel #files_new .fileItem.fileItem-active u, #modal__previewPanel #files_new .fileItem:hover u, a.ext:hover u { opacity: 1 } a.ext.thickbox { cursor: zoom-in } .ext .as_ico { position: absolute; left: 10px; top: 7px; margin: 0 } .attachWrapper.attachWrapper-small .fileItem .ext .ico_l, .fileItem-small .ext .ico_l { left: 6px; top: 4px; } .ext .ico_l ~ .ico_l { display: none } .ext i { font: var(--font-ui-10-nano-semi); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; display: block; padding: 1px 4px; border-radius: 0 0 4px 4px; width: 40px; height: 18px; box-sizing: border-box; } .attachWrapper.attachWrapper-small .fileItem .ext i, .fileItem-small .ext i { padding: 0 4px; width: 32px; height: 16px; font: 8px/16px var(--font-base); } .ext_doc ws-icon, .ext_docx ws-icon, #modfiles .ext_doc ws-icon, #modfiles .ext_docx ws-icon { --icon-color: #00aeef; } .ext_xls ws-icon, .ext_xlsx ws-icon, #modfiles .ext_xls ws-icon, #modfiles .ext_xlsx ws-icon { --icon-color: #49b538; } .ext_ppt ws-icon, .ext_pptx ws-icon, #modfiles .ext_ppt ws-icon, #modfiles .ext_pptx ws-icon { --icon-color: #e9770e; } .ext:hover > ws-icon { --icon-color: var(--base-txt-alt-light); } .attachWrapper.attachWrapper-small .fileItem .ext ws-icon, .fileItem-small .ext ws-icon { --icon-size: 16px; } a.ext_doc_gd:hover, a.ext_xls_gd:hover, a.ext_ppt_gd:hover { background-position: -1000px -150px } .extbig { display: block; width: 190px; height: 90px; padding: 150px 0 0 0; margin: 0 auto 30px; position: relative; text-align: center; } .extbig u { font: bold 14px/20px var(--font-base); text-decoration: none; position: absolute; width: 150px; height: 110px; padding: 20px; left: 0; top: 0; border-radius: 10px 50px 0 0; background: var(--base-txt-ghost); color: var(--base-txt-secondary); text-align: left } .extbig i { font: 50px/90px var(--font-base); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; display: block; padding: 0 10px; border-radius: 0 0 20px 20px; height: 90px; white-space: nowrap; } .ext_fld { width: 42px; height: 30px; padding: 6px 0 0 0; position: relative; text-align: center; } .fileItem:hover .ext_fld *, .fileItem-active .ext_fld * { background: var(--base-btn-primary-minor); } .ext_fld u { position: absolute; width: 20px; height: 6px; left: 0; top: 0; opacity: 0.5; border-radius: 4px 6px 0 0 } .ext_fld i { display: block; height: 30px; border-radius: 0 4px 4px } .ext_fld .ico_l { position: absolute; left: 9px; top: 12px; margin: 0 } .ext_back { width: 20px; height: 20px; background: var(--base-cont-top); padding: 8px; border-radius: 18px; } .ext_back .ico_l { margin: 0; } .ext_hid { display: none } .sm_prog { background: var(--base-txt-tertiary); height: 2px; display: block } /* -------------------------------------------------------------------------------------------------------------------*/ #files_new { margin: 0; } #files_new.inline_hid { display: none } #files_new .files_new {display: flex;flex-wrap: wrap;gap: 6px;} .fileItem { width: 196px; height: 48px; padding: 8px; position: relative; display: inline-flex; flex-direction: row; flex-wrap: nowrap; vertical-align: bottom; } .files_new .fileItem, .attachWrapper .fileItem { width: calc(100% / 3 - 20px); flex-grow: 0; flex-shrink: 1; box-shadow: var(--shadow-cont-minor-outline); border-radius: 8px; gap: 4px; background: var(--base-cont-top-elevated); } .files_new .download_zip { display: none;} .attachWrapper.attachWrapper-small .fileItem, .attachWrapper .fileItem-small { padding: 6px; height: 40px; width: calc(100% / 3 - 16px); } .fileItem__ico { flex-grow: 0; flex-shrink: 0; display: flex; width: 48px; justify-content: center; align-items: center; } .attachWrapper.attachWrapper-small .fileItem .fileItem__ico, .fileItem-small .fileItem__ico { width: 40px; } .fileItem__content { flex-grow: 1; flex-shrink: 1; display: flex; flex-direction: column; overflow: hidden; justify-content: space-around; gap: 8px; } .attachWrapper.attachWrapper-small .fileItem .fileItem__content, .fileItem-small .fileItem__content { gap: 0; } .fileItem__content .name { height: 24px; display: flex; align-items: center; flex-shrink: 1; overflow: visible; } .fileItem__content .links { display: flex; align-items: center; padding-left: 4px; color: var(--base-txt-tertiary); flex-wrap: nowrap; font: var(--font-ui-11-micro-reg); gap: 4px; cursor: default; } #modfiles .fileItem__content .links { cursor: pointer; } .fileItem__content .links .left { position: relative; width: 100%; height: 100%; } #files_panel .fileItem__content .links .left { min-width: 0; gap: 6px; } .fileItem__content .links .left a, .fileItem.figma-preview .fileItem__content .links a { width: 100%; min-width: 0; } .fileItem__content .links .left a, .fileItem__content .links .left .size { position: absolute; transition: opacity .3s ease-in-out; } #files_panel .fileItem__content .links .left .size { position: static; } @media screen and (max-width: 480px) { .fileItem .fileItem__content .links .left { height: 16px; } .fileItem .fileItem__content .links .left .size { display: none; } .commentList .fileItem .fileItem__content .links > .flex_gap, .commentList .fileItem .fileItem__content .links > .flex_gap ~ a { display: none; } } @media screen and (min-width: 481px) { .fileItem .fileItem__content .links:has(.sw_loading) .left .size, .fileItem:hover .fileItem__content .links .left .size, .fileItem .fileItem__content .links .left a { opacity: 0; } .fileItem .fileItem__content .links:has(.sw_loading) .left a, .fileItem:hover .fileItem__content .links .left a { opacity: 1; } #files_panel .fileItem__content .links .left .size { opacity: 1; } .fileItem__content .links ws-icon { opacity: 0; } } .fileItem__content .links ws-icon { width: 16px; height: 16px; --icon-color:var(--base-txt-tertiary); transition: opacity .3s ease-in-out; } .fileItem__content .links ws-icon:hover { --icon-color:var(--base-txt-primary); } .fileItem:hover .fileItem__content .links ws-icon, .fileItem .fileItem__content .links .menu_open ws-icon, #modal__previewPanel .fileItem .fileItem__content .links ws-icon { opacity: 1; } body.withMass .fileItem:hover .fileItem__content .links ws-icon { display: none; } .fileItem__content .links ws-icon[name="input-circle-solid-cancel"] { --icon-color:var(--base-txt-primary); } .fileItem__content .links ws-icon[name="input-circle-solid-cancel"]:hover { --icon-color:var(--base-txt-btn-w); } .fileItem__content .links ws-icon[name="exclam_triangle-solid"] { --icon-color:var(--base-txt-notice-major); } .fileItem__content .links .in { padding-left: 4px; } .fileItem__content .links a:not(.sw_act) .sw { box-shadow: 0 0 0 1px var(--base-txt-tertiary) inset; transition: none; } .fileItem__content .links a:not(.sw_act):hover .sw { box-shadow: 0 0 0 1px var(--base-txt-accent) inset; } .fileItem__content .links a:not(.sw_act) .sw span { background: var(--base-txt-tertiary); transition: none; } .fileItem__content .links a:not(.sw_act):hover .sw span { background: var(--base-txt-accent); } .fileItem__content .links .flex_gap { flex-grow: 1; } .fileCreate__wrapper .fileItem__content .links .pin { display: none } .fileItem__content .links .pin:not(.pin_act) use:first-child { display:none } .fileItem__content .links .pin_act use:last-child { display:none } .files_new .fileItem-wide { /* width: 100%; */ } .files_new .inline_hid { display: none } .fileItem.zoom_in:not(.fileItem-active), .fileItem.zoom_in:not(.fileItem-active) * { cursor: zoom-in; } .fileItem .wimg { overflow: hidden; width: 48px; height: 48px; position: relative; background: var(--base-cont-top); border-radius: 4px; text-align: center; } #modfiles .fileItem .wimg { cursor: pointer; } .fileItem .wimg img { max-height: 48px; max-width: 48px; } .attachWrapper.attachWrapper-small .wimg, .fileItem-small .wimg { width: 40px; height: 40px; } .attachWrapper.attachWrapper-small .wimg img, .fileItem-small .wimg img { max-height: 40px; aspect-ratio: 1; max-width: 40px; } .fileItem .wimg ws-icon[name=lock_sm] { position: absolute; left: 15px; top: 15px; margin: 0 } .fileItem .input { font: var(--font-ui-13-small-semi); color: var(--base-txt-accent); padding: 0 4px; width: 100%; box-sizing: border-box; border: none; box-shadow: var(--shadow-cont-minor-lineonly-outside); background:var(--trans); border-radius: 4px; text-overflow: ellipsis; caret-color: var(--base-txt-act-minor); } .fileItem .input:hover { box-shadow: var(--shadow-cont-major-lineonly-outside); } .fileItem .input:focus { background: var(--base-hlt-easy); box-shadow: var(--shadow-brd-focus-alt-mini); } .fileItem .wimg:hover { border-color: var(--base-cont-top) } .fileItem .name b, .fileItem .name a.b { padding: 0 4px; font: var(--font-ui-13-small-semi); white-space: nowrap; color: var(--base-txt-accent); overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; flex-grow: 1; } .files_new .fileItem-secondary .name b, .files_new .fileItem-secondary .name a.b { color: var(--base-txt-secondary) } .files_new .fileItem-secondary .wimg { border-color: var(--base-cont-low) } .fileItem strike { font: bold 13px var(--font-base); display: block; white-space: nowrap; padding: 8px 0 2px 0; color: var(--base-txt-secondary); } .fileItem a { color: var(--base-txt-tertiary); } .fileItem a:hover { color: var(--base-txt-accent); } .files_new .ico_dload_new { display: none } .fileItem:hover .ico_dload_new { display: inline-block } .fileItem .ico_gdrive { position: absolute; left:10px; top:6px } body.withMass .fileItem:hover .ico_dload_new { display: none } .fileItem ws-icon[name=lock_sm], .fileItem .name ws-icon { margin-left: -6px; margin-right: -2px; --icon-color: var(--base-txt-accent); } .listing__item-card.fileItem .name ws-icon { margin-left: -2px; } #modfiles .fileItem-active .name ws-icon { --icon-color: var(--base-txt-accent); } #modfiles .fileItem-active .name ws-icon use:first-child { display: none; } #modfiles .fileItem-active .name ws-icon use:last-child { display: block; } /* -------------------------------------------------------------------------------------------------------------------*/ div.attach.fileItem-preDeleted { } div.attach.fileItem-preDeleted .input, div.attach.fileItem-preDeleted .sm_name { color: var(--base-txt-tertiary); text-decoration: line-through; border-color: var(--base-cont-low) } div.attach.fileItem-preDeleted .toobig { opacity: 1; } div.attach.fileItem-preDeleted a.preview { display: none } div.attach.fileItem-preDeleted .ico_delete2 { opacity: 0.3 } div.attach .progr { color: var(--base-txt-tertiary) } div.attach { position: relative; max-width: 220px; height: 26px; } div.attach .ico_delete2 { position: absolute; left: 2px; top: 3px; margin: 0; } div.attach .sm_prog_ { position: absolute; right: 40px; bottom: 0; left: 28px; } div.attach .sm_prog { position: absolute; right: 0; bottom: 0 } div.attach .loader_sm { position: absolute; left: 2px; top: 5px; } div.attach .toobig { position: absolute; right: 0; top: 0; color: var(--white-accent); background: var(--base-btn-alert-primary-minor); font: 11px/20px var(--font-base); padding: 3px 0; width: 40px; text-align: center; text-transform: lowercase; border-radius: 0 3px 3px 0 } div.attach .input { width: 100%; margin: 0; padding: 2px 43px 2px 5px; height: 20px; font: 13px/20px var(--font-base); border-radius: 4px; border-color: transparent; background: transparent; position: relative } div.attach .sm_name { width: 100%; margin: 0; display: inline-block; padding: 2px 43px 2px 5px; background: var(--inp-cont-top); border: 1px solid var(--inp-cont-brd); opacity: 0.9; height: 20px; font: 13px/20px var(--font-base); overflow: hidden; vertical-align: middle; white-space: nowrap; } div.attach .input:focus { box-shadow: 0 0 4px 0 var(--base-hlt-invert); border-color: var(--inp-hlt-focus) !important } div.attach .input { } .modal div.attach .input { background: var(--menu-inp-cont); border-color: var(--menu-inp-brd); } div.attach a.preview { position: absolute; right: 0; top: 0; color: var(--base-txt-tertiary); width: 20px; height: 20px; padding: 3px 10px; cursor: pointer; border-radius: 0 3px 3px 0; z-index: 15; } div.attach a.ico_pin { opacity: 0; position: absolute; right: -35px; top: -2px; } div.attach:hover a.ico_pin, div.attach a.ico_pin_act { opacity: 1 } body.desktop div.attach a.preview { display: none; } body.mobile div.attach a.preview { opacity: 0 } body.desktop div.attach:hover a.preview { display: inline } .modal div.attach a.preview { display: none } @media (min-width: 481px) { #modal__previewAudio { background: var(--base-cont-retrans-mid); backdrop-filter: blur(12px); padding: 32px; } } #modal__previewAudio > audio { width: 33vw; } @media (max-width: 1100px) { #modal__previewAudio > audio { width: 50vw; } } @media (max-width: 640px) { #modal__previewAudio > audio { width: 80vw; } } @media (max-width: 480px) { #modal__previewAudio { padding-top: 32px; padding-bottom: 32px; } #modal__previewAudio > audio { display: block; margin: 32px auto; } #modal__previewSvg { margin: 0 auto; } } .file_links { padding: 0 11px 5px; } .attachWrapper { display: flex; flex-wrap: wrap; gap: 6px; } div.attach { margin: 0 0 10px 0; padding: 0 50px 0 28px; } div.attach input { padding: 0; margin: 0 } .attachnew { font: 13px/20px var(--font-base); color: var(--base-txt-tertiary); padding: 5px 0 10px; white-space: nowrap; overflow: hidden; } /* -------------------------------------------------------------------------------------------------------------------*/ #modal__previewImage { position: fixed; left: 50%; top: 50%; margin-top: -80px; /* z-index:1017; */ background: var(--base-cont-retrans-mid); backdrop-filter: blur(12px); box-shadow: 0 0 10px var(--colors-alpha-dark-20); -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */ -webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */ -webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */ user-select: none; } @media (min-width: 481px) { #modal__previewVideo { background: var(--base-cont-retrans-mid); backdrop-filter: blur(12px); box-shadow: 0 0 10px var(--colors-alpha-dark-20); } } @media (max-width: 480px) { #modal__previewVideo video { height: auto; } } #modal__previewPanel { position: fixed; left: 0; bottom: 0; right: 0; z-index: 1025; height: 140px; box-shadow: var(--shadow-brd-enable-outside); text-align: center; } #modal__previewPanel #zoom_data{ margin: initial; } #modal__previewPanel.wlinks { height: 40px; } #modal__previewPanel > .links { padding: 6px 12px; font: 12px/20px var(--font-base); box-shadow: 0 -1px var(--shadow-cont-minor-lineonly-outside), 0 1px var(--shadow-cont-minor-lineonly-outside); background: var(--base-cont-top); } #modal__previewPanel .links .flex_gap { flex-grow: 1; } #modal__previewPanel .nav-button { position: absolute; top: 16px; width: 20px; height: 20px; padding: 22px 5px; background: var(--base-cont-mod-top); border-radius: 8px; background: var(--base-cont-top-elevated); box-shadow: 0px 0px 0px 1px var(--base-line-ghost), 0px 2px 8px -2px var(--colors-graphite-trans-300); display: none; opacity: 0.9; transition: width 0.3s ease, opacity 0.3s ease; } #modal__previewPanel .prev > ws-icon { float: right; } #modal__previewPanel .prev { left: 0; padding-left: 2px; padding-right: 5px; border-radius: 0 8px 8px 0; } #modal__previewPanel .next { right: 0; padding-left: 5px; padding-right: 2px; border-radius: 8px 0 0 8px; } #modal__previewPanel .prev:hover, #modal__previewPanel .next:hover { width: 28px; opacity: 1; } /*#zoom_data, #google_data {*/ /* font: 11px/14px var(--font-base);*/ /* color: var(--base-txt-secondary);*/ /* margin-left: 70px*/ /*}*/ /*#zoom_data a {*/ /* padding: 4px 2px 4px 1px;*/ /* margin: 0 0 0 0*/ /*}*/ #file_central_btn .s2 { display: none } #file_central_btn:hover .s1 { display: none } #file_central_btn:hover .s2 { display: inline } #file_central_btn .sw { float: none; display: inline-block; } #file_central_btn .sw_pre { display: inline-flex; align-items: center; } /*#zoom_data a:hover .s21 {*/ /* padding: 3px;*/ /* background: url(/img/color/iconset.svg) -60px -460px;*/ /* margin: 0 5px 0 0*/ /*}*/ /*#zoom_data a:hover .s22 {*/ /* padding: 3px;*/ /* background: url(/img/color/iconset.svg) -70px -460px;*/ /* margin: 0 0 0 5px*/ /*}*/ /*#zoom_data a:hover .s23 {*/ /* padding: 3px;*/ /* background: url(/img/color/iconset.svg) -80px -460px;*/ /* margin: 0 5px 0 0*/ /*}*/ /*#zoom_data a:hover .s24 {*/ /* padding: 3px;*/ /* background: url(/img/color/iconset.svg) -90px -460px;*/ /* margin: 0 0 0 5px*/ /*}*/ /*#zoom_data a:hover {*/ /* color: var(--base-txt-secondary) !important*/ /*}*/ /*#google_data .switch_block {*/ /* width: 370px;*/ /* text-align: left*/ /*}*/ .zoom_in { cursor: zoom-out; } .zoom_out { cursor: zoom-in } .zoom_in-move {cursor: grab;} .zoom_in-moving {cursor: grabbing;} .zoom_no { cursor: move; cursor: grabbing } .zoom_free { --pan-x: 0px; --pan-y: 0px; --scale: 1; cursor: unset; transform: translate(var(--pan-x), var(--pan-y)) scale(var(--scale)); } .zoom_out img { max-width: 100%; max-height: 100% } #modal__previewPanel #files_panel { margin: 0; position: absolute; left: 0; bottom: 0; width: 100%; text-align: left; height: 100px; overflow: hidden; /*background: var(--base-cont-retrans-mid); backdrop-filter: blur(32px);*/ border-top: 1px solid var(--base-line-secondary); background: var(--base-cont-retrans-mid); backdrop-filter: blur(16px); } #modal__previewPanel #files_panel_ { margin: 0 auto; height: 100px; overflow: hidden; padding: 16px 0 20px; } #modal__previewPanel #files_new { width: 100000px; padding: 0; margin: 0; gap: 8px; } #modal__previewPanel #files_new.ani_panel { transition: margin 0.5s ease; -webkit-transition: margin 0.5s ease } /*#modal__previewPanel #files_new .files_new { gap: initial; }*/ #modal__previewPanel #files_new .fileItem { background: var(--base-cont-top-elevated); box-shadow: 0px 0px 0px 1px var(--base-line-ghost), 0px 2px 8px -2px var(--colors-graphite-trans-300); border-radius: 8px; display: flex; width: 204px; padding: 8px; align-items: center; gap: 4px; } #modal__previewPanel .links { display: flex; align-items: center; } #modal__previewPanel #files_new .fileItem:hover { box-shadow: var(--shadow-cont-major-outline); } #modal__previewPanel #files_new .fileItem-active, #modal__previewPanel #files_new .fileItem-active:hover { box-shadow: var(--shadow-brd-04-focus-mini); } #modal__previewPanel #files_new .fileItem-active, #modal__previewPanel #files_new .fileItem-active:hover { background: var(--base-cont-mod-top); } #modal__previewPanel #files_new .fileItem .pin, #files_new .fileItem .download, #files_new .fileItem .rel, #files_new .fileItem .copy { display: none } #modal__previewPanel #files_new .fileItem.fileItem-active .pin, #files_new .fileItem.fileItem-active .download, #files_new .fileItem.fileItem-active .copy { display: flex; } #modal__previewPanel .more_prev { position: absolute; left: 0; top: 60px; margin: 0 } #modal__previewPanel .more_next { position: absolute; right: 0; top: 60px; margin: 0 } #modal__previewPanel #dlink { float: right; background: var(--base-hlt-hover); padding: 1px 10px; color: var(--base-txt-link-minor); font: bold 12px/20px "courier new"; display: none; margin: -1px 0 0 -100% } @media print { #modal__previewPanel {display:none !important} } @media (max-width: 480px) { #modal__previewPanel .ico_dlink {display:none} #modal__previewPanel { height: unset; } #modal__previewPanel #files_panel { position: relative; height: unset; padding-bottom: var(--sa-bot); inset: auto; } #modal__previewPanel #files_panel_ { padding: 0; height: 85px; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; } #modal__previewPanel #files_new { flex-shrink: 0; } #modal__previewPanel > .links { padding-top: 0; padding-bottom: 0; height: 36px; box-sizing: content-box; position: relative; z-index: 99999; } #modal__previewPanel .nav-button { top: calc( (100% - var(--sa-bot)) / 2 ); transform: translateY(-50%); } #modal__previewPanel.wlinks { height: unset; } #modal__previewPanel.wlinks > .links { padding-top: 0; padding-bottom: var(--sa-bot); } #modal__previewPanel .links .open_in_new, #modal__previewPanel .back span { display: none !important; } .taskView__descr .files_new .fileItem, .commentList .files_new .fileItem, .attachWrapper .fileItem { --fileItem-cols: 2; --fileItem-paddingInline: 16px; --fileItem-gap: 6px; --fileItem-baseWidth: calc(100% / var(--fileItem-cols) - var(--fileItem-paddingInline)); --fileItem-gapsWidth: calc(var(--fileItem-gap) * (var(--fileItem-cols) - 1) / var(--fileItem-cols)); width: calc(var(--fileItem-baseWidth) - var(--fileItem-gapsWidth)) !important; min-width: 115px; } } @media (max-width: 400px) { .taskView__descr .files_new .fileItem .links .left a[onclick^="App.upload.attach.toggle_inline_view"] > .in, .commentList .files_new .fileItem .links .left a[onclick^="App.upload.attach.toggle_inline_view"] > .in, .attachWrapper .fileItem .links .left a[onclick^="App.upload.attach.toggle_inline_view"] > .in { opacity: 0; } } /* -------------------------------------------------------------------------------------------------------------------*/ .drop_zone_out { position: relative; } .drop_zone { z-index: 1025; display: none; position: absolute; left: -5px; top: 28px; right: -15px; bottom: -5px; } .drop_zone_body .drop_zone { position: fixed; left: 0; top: 0; right: 0; bottom: 0; border: none; } .drop_zone_in { display: none; z-index: 1025; background: var(--colors-alpha-light-80); text-align: center; font: 700 22px var(--font-mono); color: var(--base-txt-primary); flex-direction: column; justify-content: center; align-items: center; position: fixed; left: 0; top: 0; right: 0; bottom: 0; border: none; } .drop_zone_move ws-icon, .drop_zone_ready ws-icon { display: block; width: 96px; height: 96px; margin: 0 auto; --icon-size: 96px; --icon-color: var(--base-txt-primary); } .drop_zone_move { display: none; flex-direction: column; justify-content: center; align-items: center; } .drop_zone_move, .drop_zone_ready { background: linear-gradient(0deg, var(--base-cont-mod-top-opac), var(--base-cont-mod-top)); width: 240px; height: 240px; border-radius: 50%; backdrop-filter: blur(4px); } .drop_zone_ready { display: none; color: var(--base-txt-primary); font: var(--font-ui-22-title-1-semi); font-family: monospace; } .drop-hover .drop_zone_ready ws-icon { transform-origin: bottom center; animation: ws-dropready 3s ease 3s 1 normal forwards; } body.withFileDrag .drop_zone, body.withFileDrag .drop_zone_in { display: flex; justify-content: center; align-items: center; } body.withFileDrag #dz-logo #logo { background: var(--colors-interblue-trans-200); border-radius: 20px; box-shadow: 0 0 0 5px var(--base-cont-top) inset } body.withFileDrag #dz-logo .logo { background: var(--colors-interblue-trans-200); } .drop-hover .drop_zone_in, .drop_zone_body .drop_zone_in { background: var(--colors-interblue-trans-200); } .drop-hover .drop_zone_move { display: none !important; } .drop-hover .drop_zone_ready { display: flex !important; flex-direction: column; justify-content: center; align-items: center; gap: 16px; } .drop-zone { margin-bottom: 10px } .drop-zone .drop_hid { display: none } .drop-zhover .drop_vis { display: none } .drop-zhover .drop_hid { display: block; background: var(--base-cont-low); color: var(--base-txt-tertiary); margin: -7px 0 -7px 0; padding: 7px 10px; width: 95%; line-height: 20px; text-align: center; } .drop-zhover .drop-hover { background: var(--base-cont-low); color: var(--base-txt-secondary) } /* -------------------------------------------------------------------------------------------------------------------*/ #modfiles { position: relative; background: var(--base-cont-mod-low); border-top: 1px solid var(--base-line-secondary); } #modfiles ~ .buttons { background: var(--base-cont-mod-low); } #modfiles .fileItem { cursor: pointer } #modfiles .fileItem { margin: 3px 3.5px; width: 202px; float: left; background: var(--base-cont-mod-top); } #modfiles .fileItem-locked { background: var(--base-hlt-w-selected); } #modfiles .files_new .fileItem-levelUp { background: var(--base-cont-low); } #modfiles .fileItem:hover .wimg { border-color: var(--menu-item-selected) } #modfiles .filter .modal__header__tabs { font: 18px/28px var(--font-base); } #modfiles .filter .modal__header__tabs a { color: var(--base-txt-link-minor); border-bottom: 1px dashed var(--base-txt-link-minor); margin: 0 30px 0 0; } #modfiles .filter .modal__header__tabs a:hover { color: var(--base-txt-link-major); border-bottom: 1px dashed var(--base-txt-link-major) } #modfiles .filter .modal__header__tabs span { background: var(--base-cont-top); padding: 14px 15px; margin: 0 15px 0 -20px } #modfiles .files_new { min-height: 370px; padding: 15px } @media screen and (max-width: 480px) { #modfiles .files_new { min-height: unset; } } #modfiles .files_new ws-icon[name=lock_sm] { /* margin: 0 0 0 -6px; */ /* --icon-color: var(--base-txt-alert-major); */ } #modfiles .files_new ws-icon[name=radio] { position: absolute; right: 4px; bottom: 4px; border-right: 0; --icon-size: 16px; } body.desktop #modfiles .fileItem:hover ws-icon[name=radio], body.desktop #modfiles .files_new .selected ws-icon[name=radio] { display: flex } body.desktop #modfiles .fileItem-active ws-icon[name=radio] { display: flex; } @media (min-width: 481px) { #modfiles .fileItem.selected, #modfiles .fileItem-active:hover { box-shadow: var(--shadow-brd-focus-alt-mini); } } #modfiles .fileItem-active { box-shadow: var(--shadow-brd-focus-alt-mini); background: var(--base-hlt-notr-selected); } @media (min-width: 481px) { #modfiles .fileItem-active.selected, #modfiles .fileItem-active:hover { background: var(--base-cont-mod-top); } } #modfiles .fileItem-hidden { display: none } /* -------------------------------------------------------------------------------------------------------------------*/ .file_nopreview { text-align: center; padding: 30px; font: 13px var(--font-base); color: var(--base-txt-tertiary); margin: 0 auto } @media (max-width: 480px) { .file_nopreview { padding: 15px; } } .file_nopreview small { font: 12px var(--font-base); color: var(--base-txt-tertiary) } .file_nopreview small a { font: 12px var(--font-base); color: var(--base-txt-tertiary) } .file_nopreview .ext { display: block; float: none; margin: 20px auto } #modal__alert .extbig { background: var(--base-cont-top); border-radius: 10px 50px 20px 20px; } #modal__alert.file_nopreview { background: var(--base-cont-mod-top); } #modal__alert .button:not(.button_default) { width: 160px; border-radius: 20px } .inline_clip { padding: 8px; border-radius: 16px; margin: 0; position: relative; display: none; max-width: 720px; text-align: center; } .inline_clip.inline_vis { display: block; margin-top: 8px; } .inline_clip.inline_vis:first-child { margin-top: 0; } .inline_clip.inline_vis + .inline_file { display: none } /* .inline_clip {max-width: 720px;max-height: 720px;} .inline_clip img {max-width: 100%;max-height: 720px;object-fit: contain;height: auto;} */ ol.todo .inline_clip { margin-left: -47px; } ol.todo li:first-child:last-child .inline_clip { margin-left: -25px; } ol.todo label + .inline_clip { margin-top: 30px; } .inline_clip { } .inline_clip img, .inline_clip iframe { border-radius: 8px; } .inline_clip.inline_hor img { width: 100%; height: auto } .inline_clip.inline_ver { width: fit-content; min-width: 200px; text-align: center; } .inline_clip.inline_ver img { max-height: 720px !important; width: auto; } @media (max-width: 480px) { .inline_clip.inline_ver img { max-width:100% !important; height: auto; } } .inline_clip div.file { position: absolute; right: 4px; bottom: 4px; padding: 2px 0 0 8px; border-radius: 8px 0 0 0; display: flex; flex-direction: row-reverse; align-items: center; } body.desktop .inline_clip div.file { opacity: 0; pointer-events: none; transition: opacity 0.3s; } body.desktop .inline_clip:has(.sw_loading) div.file, body.desktop .inline_clip:hover div.file { opacity: 1; pointer-events: auto; } /* ----------- MinifyCSS: LIGHT THEMEMinifyCSS: LIGHT THEME ----------- */.inline_clip {background:var(--base-cont-low);} .inline_clip div.file {background:var(--base-cont-low);} /*----------- MinifyCSS: STOPMinifyCSS: STOP ----------- */ .inline_clip div.file .sw_pre { margin: 0 0 0 10px; } .inline_clip.figma-preview div.file .sw_pre { margin: 0 8px 0 10px; } .inline_clip div.file .sw { margin: 2px 6px 2px 0; } .inline_clip div.file a:last-child { color: var(--base-txt-secondary); font: var(--font-ui-11-micro-reg); max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .inline_clip div.file a:last-child:hover { color: var(--base-txt-primary) } .todo .done .inline_clip { /* display:none */ } .fileItem__wrapper { display:flex; border-bottom: 1px solid var(--base-line-tertiary); background: none; } .fileItem__wrapper .fileItem { box-shadow: none; width: 30%; background: var(--base-cont-mod-mid); } .fileItem-preDeleted { opacity: 0.5; } .fileItem-preDeleted .name, .fileItem-preDeleted .input { text-decoration: line-through; } /*.fileItem ws-icon[name=radio] svg, .fileItem:hover ws-icon[name=radio] svg,*/ /*.fileItem.selected ws-icon[name=radio] svg, .fileItem.selected:hover ws-icon[name=radio] svg {*/ /* fill: var(--base-txt-tertiary);*/ /*}*/ .fileItem ws-icon[name=radio] use:nth-child(2) { opacity: 0; transition: opacity .4s ease; } .fileItem ws-icon[name=radio] use:last-child { display: none; } .fileItem ws-icon[name=radio]:hover use:nth-child(2) { opacity: 1; } body.withMass .fileItem ws-icon[name=radio] { pointer-events: visible !important ; } .fileItem-active, .fileItem-active:hover { background: var(--base-hlt-selected); } .fileItem-active ws-icon[name=radio] svg, .fileItem-active:hover ws-icon[name=radio] svg, .fileItem-active.selected ws-icon[name=radio] svg { fill: var(--base-txt-btn-a); } .fileItem-active ws-icon[name=radio] use:last-child { display: block; } .fileItem-active ws-icon[name=radio] use:nth-child(2) { display: none; } .fileItem-links { overflow-x: hidden; } .files_new .figma-preview__placeholder__logo {margin-top: 5px;} /* ----------- MinifyCSS: LIGHT THEMEMinifyCSS: LIGHT THEME ----------- */.figma-preview__inline.inline_clip div.file {background: var(--base-cont-low); padding-left:0px;} /*----------- MinifyCSS: STOPMinifyCSS: STOP ----------- */ #modalFilesListing.modalFilesListing--notFound, #modalFilesListing.modalFilesListing--empty { place-content: center; } #modalFilesListing:not(.modalFilesListing--notFound) .modalFilesListing__notFound { display: none; } #modalFilesListing:not(.modalFilesListing--empty) .modalFilesListing__empty { display: none; } @media (min-width: 481px) { .menu.menu--project-select-in-file-select .scrollZone { max-height: min(440px, calc(50vh - 64px)); } } #filter_more { margin: 0 -32px; background: var(--base-surf-top); cursor: move; text-align: center; } #filter_more form { display: inline-flex; flex-direction: column; padding: 10px 0; max-width: 100%; } .filter_new { display: inline-flex; gap: 16px; position: relative; white-space: nowrap; overflow: hidden; padding: 10px 20px; } .filter_new .fil { display: inline-block; width: 240px; height: fit-content; text-align: left; vertical-align: top; cursor: default; box-shadow: var(--shadow-cont-major-outline); border-radius: 12px; flex-shrink: 0; } .filter_new .fil.fil-withTabs { width: 260px; } .filter_new .fil#fil_op, .filter_new .fil#fil_dt{ width: 225px; } .filter_new .fil h3 { font: var(--font-ui-13-small-bold); margin: 0; padding: 0 8px; height: 44px; background: var(--base-cont-top); overflow: hidden; border-radius: 12px 12px 0 0; border-bottom: var(--screen-px) solid transparent; } .filter_new #fil_pr h3, .filter_new #fil_ptg h3, .filter_new #fil_pst h3 { overflow: visible } .filter_new .fil.fil_pr2 h3 { display: flex; align-items: center; } .filter_new .fil:has(.scrollZone-top) h3 { border-bottom-color: var(--base-line-secondary); } .filter_new .fil h3 span { position: relative; display: inline-block; padding: 12px 8px; } .filter_new .fil h3 a { position: relative; display: inline-block; color: var(--base-txt-tertiary); padding: 10px 8px; background: none; margin: 0; } .filter_new .fil h3 a:hover { color: var(--base-txt-primary) } .filter_new .fil h3 span.a, .filter_new .fil h3 a { padding: 12px 4px; } .filter_new .fil h3 span.a:after, .filter_new .fil h3 a:after { content: ''; opacity: 0; width: 100%; height: 2px; background: var(--base-txt-secondary); border-radius: 1px; position: absolute; left: 0; bottom: 0; transition: opacity 0.3s ease; } .filter_new .fil h3 span.a:after { opacity: 1; background: var(--base-txt-act-minor); } .filter_new .fil h3 span.a:hover:after, .filter_new .fil h3 a:hover:after { opacity: 1; background: var(--base-txt-secondary); } .filter_new .fil > .in { background: var(--base-cont-top); border-radius: 0 0 12px 12px; overflow: hidden; padding: 0 0 8px; } .filter_new #fil_tg2 > .in { padding: 0 } .filter_new #fil_prior { width: 64px; } .filter_new #fil_prior label span { margin: 0 0 0 2px; } .filter_new #fil_prior label span.prior0 { background: none !important; } .filter_new #fil_prior label span.prior0 svg { fill: var(--base-txt-tertiary) !important; } .filter_new .fil .fil_, .filter_new .fil .opts { max-height: 385px; overflow: auto; overflow-x: hidden; padding: 4px 8px; box-sizing: border-box } .filter_new #fil_pr .fil_ { max-height: 345px; padding-top: 12px; } .filter_new .fil .opts { padding: 4px 12px } .filter_new .fil .opts .line:not(.line-withTextDots) { height: var(--screen-px); margin: -2px -12px 15px; background:var(--base-line-secondary); } .filter_new .fil .line-withTextDots { margin: -6px 0 10px; } .filter_new .fil#fil_pr label ws-icon[name="archive"] { margin: 0 4px 0 0; transform: scale(0.8); --icon-color: var(--base-txt-tertiary); } .filter_new .fil#fil_pr label ws-icon[name="archive"] + span { color: var(--base-txt-tertiary); } .filter_new .fil .opts-without_padding { padding: 4px 0; } .filter_new .fil .fil_ div.sub { margin: 0 0 4px 0; position: relative; padding: 0 0 4px 0; } .filter_new .fil .fil_ div.sub:before { /* content:''; */ left: 0; right: 0; top: 10px; position: absolute; border-top: 1px solid var(--base-line-secondary); display: block; } .filter_new .fil:not(.fil_pr2) .fil_ div:not(:nth-last-child(3)) div.sub:not(.flt_h1):last-of-type, .filter_new .fil.fil_pr2 .fil_ div:not(:nth-last-child(2)) div.sub:not(.flt_h1):last-of-type, .filter_new .fil:not(.fil_pr2) .fil_ div:not(:last-child) div.sub2, .filter_new .fil.fil_pr2 .fil_ div:not(:nth-last-child(2)) div.sub2 { padding-bottom: 20px; } .filter_new .fil .fil_ div.sub2 { border-top: none; } .filter_new .fil .fil_ label.t2 { display: inline-block; color: var(--base-txt-tertiary); background: var(--base-cont-top) !important; max-width: 85%; padding: 2px; } .filter_new .fil .fil_ label.t2:before { display: none } .filter_new .fil .fil_ label.t2:hover { color: var(--base-hlt-g-invert); } .filter_new .fil .fil_ label { display: flex; padding: 2px; white-space: nowrap; overflow: hidden; margin: 0 0 1px 0; height: 20px; line-height: 20px; left: 0 !important; cursor:pointer; } .filter_new .fil .fil_ label > * { flex-grow: 0; flex-shrink: 0; } .filter_new .fil .fil_ label span.flex_content{ text-overflow: ellipsis; overflow: hidden; flex-grow: 1; flex-shrink: 1; } .filter_new .fil .fil_ .extra label { gap: 4px; } .filter_new .fil .fil_ .av_sm { float: left; margin: -2px 2px -2px 0; transform: scale(0.75); border-radius: 50%; } .filter_new #fil_pr .fil_ div:not([class^=ps]) { padding-bottom: 15px; } .filter_new #fil_pr .fil_ div:nth-last-child(3) { padding-bottom: 8px; } .filter_new .fil .fil_ label.tl { border-radius: 4px; font: bold 13px/20px var(--font-base); color: var(--base-txt-primary); cursor: pointer; } .filter_new .fil .fil_ label:hover { background: var(--base-hlt-g-hover); border-radius: 4px; } .filter_new .fil .fil_ label.act { background: var(--base-hlt-hover); border-radius: 4px; } .filter_new .fil .fil_ label.act:hover { background: var(--base-hlt-easy); } .filter_new .fil .fil_ label.tl.act { background: var(--base-hlt-invert); color: var(--white-accent) } .filter_new label.tl.act ws-icon { --icon-color: var(--white-accent); } .filter_new .fil .fil_ label.tl span[data-title] { margin-left: 2px; } .filter_new .fil .fil_ label input { opacity: 0 } .filter_new .fil .fil_ label input, .filter_new .fil_task label input { float: left; width: 13px; height: 13px; padding: 0; margin: 1px 7px 0 3px; } .filter_new .fil label input { display: none } .filter_new .fil label:before { opacity: 0.25; content: ''; float: left; width: 20px; height: 20px; background: url(/assets/img/color/iconset.svg) no-repeat -20px -1300px; margin: 0 2px 0 0 } .filter_new .fil label:has(ws-icon):before{ display: none; } .filter_new .fil label:hover:before { opacity: 1; background-position: -40px -1320px } .filter_new .fil .fil_ div.x { padding: 0 0 0 16px; background: var(--base-cont-top) } .filter_new .fil .fil_ div.extra { padding: 8px 8px 4px; margin: 4px -8px -4px; border-top: 1px solid var(--base-line-secondary) } .filter_new2 { background: var(--base-surf-top); height: 40px; padding: 10px 0; } .filter_new2 ws-btn { padding: 0 var(--sp_fix_04); } .filter_new .fil_task label { display: block; font: 13px/20px var(--font-base); margin: 0 0 1px; border-radius: 4px; cursor: pointer; } .filter_new .fil_task label:hover { background: var(--base-hlt-g-hover); } .filter_new .fil_task label.act { background: var(--base-hlt-hover); } .filter_new .fil_task label.act:hover { background: var(--base-hlt-easy); } .filter_new .fil_task .ft1 { margin: 0 0 10px; height: 101px; border-bottom: var(--screen-px) solid var(--base-line-secondary); padding: 0 10px; } .filter_new .fil_task .ft1 label { font: var(--font-ui-13-small-bold); display: block; padding: 4px; } .filter_new .fil_task .ft1 label:nth-child(2) { margin-left: 20px; } .filter_new .fil_task .ft1 label:nth-child(3) { margin-left: 40px; } .filter_new .fil_task .ft1 label input { float: left; margin: 3px 5px; } .filter_new .fil_task .ft2 { padding: 0 10px; } .filter_new .fil_task .ft2 div { /* margin: 0 0 5px; */ } .filter_new .fil_task .ft2 label { /* color:var(--base-txt-secondary); */ display: none; margin-left: 20px; } .filter_new .fil_task .ft2 label input { float: left; margin: 3px 8px; } .filter_new .fil_task .ft2 div.act label { color: var(--base-txt-accent); display: block; } .filter_new .fil_task .ft2 label.ft { display: block; font-weight: bold; padding: 4px; margin: 5px 0 1px; } .filter_new .fil_task .ft2 label.ft.act ~ label{ display: block; } .filter_new .fil .fil_ .proj_color { transform:scale(0.8); margin:0 4px 0 0 } .filter_new .dates label.r { margin: 0 -4px 0 0; display: block; text-align: left; color: var(--base-txt-tertiary); float: right; padding: 0; } .filter_new .dates label { display: flex; gap: 4px; cursor: pointer; } .filter_new .dates label:hover { color: var(--base-txt-primary) } .filter_new .dates label:before { /*d*/ display: none; } .filter_new .dates label.act { background: none } .filter_new .icon-state { --icon-size: 16px; } .filter_new .icon-state use { display: none; } .filter_new label:not(.act):not(:hover) .icon-state use:nth-child(1) { display: inline; } .filter_new label:not(.act):hover .icon-state use:nth-child(2) { display: inline; } .filter_new label.act .icon-state use:nth-child(3) { display: inline; } .filter_new .icon-right{ float: right; } .filter_new .dates h4 { font: var(--font-ui-13-small-semi)​; padding: 0; margin: 8px 0 4px; color: var(--base-txt-primary); text-align: left; } .filter_new .dates h4.ft_cr { margin-top: 0; } .filter_new .dates ws-icon{ vertical-align: middle; } .filter_new .dates .input { border: none; text-align: center; padding: 6px; font: var(--font-ui-13-small-reg); background: var(--base-cont-trans-low); box-shadow: var(--shadow-cont-minor-lineonly-inside); border-radius: 7px; width: 75px; } .filter_new .dates .input:placeholder-shown { background: var(--base-cont-trans-low); } .filter_new .dates > div { margin: 0 0 20px 0; color: var(--base-txt-secondary); } .filter_new .dates > div:has(h4.ft_cr), .filter_new .dates > div:has(h4.fs_st) { margin-bottom: 10px; } .filter_new .dates > div.unset div { display: none } .filter_new .dates > div.unset h4 { text-decoration: line-through; color: var(--base-txt-tertiary); } .filter_new .dates div:last-child { margin-bottom: 0 } .filter_new .empty { float: right; display: none; margin: 10px 10px 0 -100px; cursor: pointer; } .filter_new .empty_act { display: block; --icon-color: var(--base-txt-btn-w); } .filter_new #fil_prior .empty { margin-right: 20px; } .filter_new .fil .gray { background: var(--base-cont-low); margin: 20px -3px -3px; padding: 20px 3px 10px; border-top: 2px solid var(--base-surf-low) } .filter_new .adv_filter_tags_options { font: 13px/20px var(--font-base); padding: 10px 9px 0; height: 50px; border-top: var(--screen-px) solid var(--base-line-secondary); margin: 5px 0 0; overflow: hidden; background: var(--base-cont-mid); } .filter_new .adv_filter_tags_options label { display: flex; gap: 4px; position: relative; padding: 0 10px 0 2px; font: 12px/20px var(--font-base); color: var(--base-txt-secondary); margin: 0 0 1px; border-radius: 4px; cursor: pointer; } .filter_new .adv_filter_tags_options label span{ width: 90%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: inline-block; vertical-align: middle; } .filter_new .adv_filter_tags_options label:hover { background: var(--base-hlt-g-hover) } .filter_new .adv_filter_tags_options label.act { background: var(--base-hlt-hover); } .filter_new .adv_filter_tags_options input { position: absolute; left: 8px; top: 4px; } .filter_new .adv_filter_proj_group_by { font: 13px/20px var(--font-base); padding: 10px 9px 14px; border-top: var(--screen-px) solid var(--base-line-secondary); margin: 5px 0 -9px; overflow: hidden; background: var(--base-cont-mid); } .flt_h0, .flt_h1 { display: none !important } #fil_pr { } #fil_pr .fil_ { margin: 0 0 5px 0 } #fil_pr a.filt_type { font: 13px/20px var(--font-base); margin: 0 0 0 6px; /* display:block; */ color: var(--base-txt-secondary); border-bottom: 1px dashed; } .filter { background: var(--base-cont-top); padding: 0; height: 40px; position: relative; -webkit-user-select: none; user-select: none; } .filter .in { height: 40px; overflow: hidden; white-space: nowrap; } .filter .in_ { width: 10000px; height: 40px } .filter_right { float: right; display: flex; flex-direction: row-reverse; align-items: center; gap: 4px; } .filter a.filter__export { margin: 10px; float: right; } .filter_sp { margin-bottom: 15px } .filter select, .filter input { margin: 0 13px 0 7px } .filter div.filt .av_sm { margin: 1px; } .filter div.filt b, .filter div.filt a.b { float: left; font: 12px/28px var(--font-base); color: var(--base-txt-secondary); padding: 0 2px } .filter div.filt a.b:hover { color: var(--base-txt-primary) } .filter div.filt a.b font b { font: 13px/28px var(--font-base); color: var(--base-txt-accent); vertical-align: top } .filter div.filt { float: left; padding: 6px 10px; font: 12px/28px var(--font-base); height: 28px; color: var(--base-txt-secondary) } .filter div.filt1st { padding-left: 0 } .filter div.filt a.bmain { font: bold 13px/26px var(--font-base); color: var(--base-txt-primary) } .filter div.filt a.b1st { margin-right: 10px; margin-left: -10px } .filter div.filt a.b2nd { margin-right: 10px } .filter div.filt span.bmain { float: left; margin: 0 10px 0 -10px; } .filter div.filt a.bmain font { border-bottom: 1px dashed } .filter div.filt_line { border-right: 1px solid var(--base-line-secondary); float: left; height: 28px; margin: 6px 0; } .filter div.filt_view .b span.ico_r { margin: 1px 0 1px 8px; } .filter div.filt_view .b span.ico_c { margin: 1px 0 1px 0; } .filter div.filt_view .b span.ico_l { margin: 1px 8px 1px -10px; } .filter div.filt_view .b span.ico_drop { margin: 4px 0 4px 4px; } .filter div.filt_r { float: right; gap: 8px; } .filter div.filt_r .button_log { margin: 0 -10px 0 0 } .filter div.filt_r .filt_date, .menu-calendar .menu__group-head .filt_date { font: 14px/28px var(--font-base); margin: 0 8px; } .menu-calendar .menu__group-head .filt_date { margin: 0; } .menu-calendar .menu__group-head { border-bottom: 0.5px solid var(--base-line-primary); padding: 12px; } .menu-calendar .menu__group-head .filt_date .daterow .formSimple:not(:focus-within):not(:hover) { box-shadow: inset 0 0 0 1px var(--base-line-secondary); } .filter div.filt_r .button_sm { float: left; margin: 2px 0 } .filter div.filt_r ws-btn { margin: 2px 0; } .filter div.filt_r .button_sm .ico_c { margin: 0 -4px; } .filter div.filt_r .filt_date { float: left; padding: 0 10px; min-width: 100px; text-align: center; } .filter div.filt_r .filt_date a { color: var(--base-txt-tertiary); padding: 1px } .filter:hover div.filt_r .filt_date a { border-bottom: 1px dashed var(--base-txt-secondary) } .filter div.filt_r .filt_date i, .menu-calendar .menu__group-head .filt_date i { font-style: normal; color: var(--base-txt-primary) } .filter div.filt .tags { float: left; margin: 0; padding: 5px 0 0 0; line-height: 10px; } .filter div.filt .tags a { padding: 5px 1px 6px 8px !important } .filter div.filt a.tag { float: right; margin: 0; line-height: 28px; padding: 0 18px 0 8px; margin: 0 0 0 6px; white-space: nowrap; max-width: 160px; position: relative; overflow: hidden; text-overflow: ellipsis; border-radius: 4px; background: var(--tag-bg) !important; color: var(--tag-color) !important; } .filter div.filt a.tag:hover:before { content: ' x'; font: 11px/28px var(--font-base); padding: 0 6px 0 6px; position: absolute; right: 0; top: 0 } .filter div.filt a.user { float: right; font: 11px/28px var(--font-base); margin: 0 0 0 6px; padding: 0 18px 0 8px; border-radius: 4px } .filter div.filt a.user:hover { padding-right: 6px } .filter div.filt a.user:hover:after { content: ' x'; font: 11px/28px var(--font-base); margin-left: 3px } .filter div.filt a.user .av_sm { display: none } .filter div.filt a.filtdef { margin: 0 2px 0 6px; font: 12px/28px var(--font-base); float: right } .filter div.filt a.filtdel { font: 11px/28px var(--font-base); float: right; padding: 0 18px 0 8px; margin: 0 0 0 6px; border-radius: 4px; max-width: 160px; position: relative; overflow: hidden; text-overflow: ellipsis } .filter div.filt_act a.b:not(#filterItem__user) { display: none } .filter div.filt_act a.filtdel:not(#filterItem__role) { margin-left: 0 } .commentListPanel__filter a.filtdel { font: 11px/28px var(--font-base); float: left; padding: 0 18px 0 8px; margin: -4px 20px -4px 0; border-radius: 4px; max-width: 160px; position: relative; overflow: hidden; text-overflow: ellipsis } .modal .commentListPanel__filter a.filtdel { margin: -4px 16px -4px 0 } .filter div.filt a.filtdel:hover:before, body.mobile .filter div.filt a.filtdel:before, .commentListPanel__filter a.filtdel:hover:before, body.mobile .commentListPanel__filter a.filtdel:before { content: ' x'; font: 11px/28px var(--font-base); padding: 0 6px 0 6px; position: absolute; right: 0; top: 0 } body.mobile .commentListPanel__filter a.filtdel { padding-right: 8px } body.mobile .commentListPanel__filter a.filtdel:before { display: none } .filter_more { color: var(--base-txt-tertiary); float: left; margin: 6px 0 0 10px; font: 12px/28px var(--font-base) } .filter_more i { color: var(--base-txt-tertiary); font-style: normal } .filter_more span { margin: -2px 0 0 0 } .filter_more:hover { color: var(--base-txt-tertiary) } .filter_more:hover i, body.mobile .filter_more i { color: var(--base-txt-tertiary); border-bottom: 1px dashed var(--base-txt-tertiary) } .filt .filthid { display: none } .filter div.filt a.drop, .filter div.filt a.drop:hover { margin: 0 -6px 0 0; border: 4px solid var(--base-cont-top); border-width: 4px 3px; background: url(/assets/img/color/ws_emoji_new.svg) no-repeat -365px -95px; background-size: 480px 480px } .modal__header > .in .filter .ico_r { margin: 3px 0 0 10px } .searchInput_filter { background: var(--base-hlt-g-invert); height: 28px; border-radius: 4px 14px 14px 4px; padding: 0 10px; color: var(--base-txt-alt-light); font: var(--font-ui-12-mini-reg); --icon-size: 16px; --icon-color: var( --base-txt-alt-light); margin: 0 4px 0 0; } .searchInput_filter:hover { color: var(--base-txt-alt-light); } .searchInput_filter .in { padding: 0 4px; } .modal__header > .in .filter { padding: 0; /* display:inline; */ } .modal__header > .in .filter div.filt a.drop { border-color: var(--base-cont-mod-top); } .modal__header > .in .filter .filt { } .filter__paginal { float: left; box-shadow: 0 0 0 1px var(--base-txt-btn-b) inset; border-radius: 6px; height: 28px; cursor: pointer; padding: 0 2px; gap:2px; } .filter__paginal:not([style*=none]) + ws-btn.fake { display: none } .filter__paginal a.count { color: var(--base-txt-btn-b); height: 24px; font: var(--font-ui-11-micro-med); background: var(--base-hlt-b-hover); display: flex; align-content: center; justify-content: center; align-items: center; padding: 0 6px; border-radius: 4px; } .filter__paginal a.count i { font:inherit; opacity:0.5; margin: 0 0 0 4px; } .filter__paginal:hover { border-color: var(--inp-hlt-focus); background: var(--inp-cont-top); } .filter__paginal .ico_place { float: left; margin: 3px 4px 3px 0; width: 20px; height: 20px; padding: 0 4px; border-radius: 4px; } .filter__paginal .ico_place:hover { background: var(--base-hlt-notr-hover); } .filter .filt .count { font: 11px/20px var(--font-base); padding: 0 5px; margin: 3px 0 0 5px; border-radius: 6px; vertical-align: top; display: inline-block } .filter .filt .count i { font-style: normal } .pages_pre { height: 26px; margin: 10px 0 0; position: relative; } .pages_pre .line-withDots { margin: 8px 0; } .pages_pre .pages { box-shadow: 0 0 0 1px var(--base-txt-btn-b) inset; border-radius: 6px; height: 28px; cursor: pointer; padding: 0 2px; background: var(--base-cont-top); position: absolute; gap: 2px; top: -14px; left: 50%; transform: translateX(-50%); } .pages_pre .pages span.count { color: var(--base-txt-btn-b); height: 24px; font: var(--font-ui-11-micro-med); background: var(--base-hlt-b-hover); display: flex; align-content: center; justify-content: center; align-items: center; padding: 0 6px; border-radius: 4px; margin: 0; } .pages_pre .pages:hover { background: var(--inp-cont-top); } .pages_pre .pages .ico_place { float: left; margin: 3px 4px 3px 0; width: 20px; height: 20px; padding: 0 4px; border-radius: 4px; } .pages_pre .pages .ico_place:hover { background: var(--base-hlt-notr-hover); } .pages_pre .count { font: 11px/20px var(--font-base); padding: 0 5px; margin: 3px 0 0 5px; border-radius: 6px; vertical-align: top; display: inline-block } .pages_pre .count i { font: inherit; opacity: 0.5; margin: 0 0 0 4px; } .filter .b_nf { display: none } .filter_empty .b_nf { display: inline; } .filter_empty .b_wf { display: none; } .filter_empty .b_nf { display: inline; } .filter_empty .b_wf { display: none; } .filter-withPaginal .b_wf { display: none; } /* -------------------------------------------------------------------------------------------------------------------*/ #too_many { font: 12px/24px var(--font-base); height: 40px; flex-shrink:0; gap: 4px; padding: 0 30px; transition: opacity 0.3s ease; -webkit-transition: opacity 0.3s ease; } #too_many b, #too_many i { font-weight: 400; font-style: normal; } #too_many ws-btn { margin-left: 16px; } #too_many a.button_gray { padding: 1px 10px; opacity: 0.7 } #too_many a.button_gray:hover { opacity: 1 } #too_many a.button { float: right; margin: -2px 0 -2px -100px } .modal #too_many { margin: 0; padding: 7px 15px; border-top: none } #too_many.memory { text-align: center; font-weight: bold } /* -------------------------------------------------------------------------------------------------------------------*/ .massPanel { font: 13px/40px var(--font-base); display: none; height: 48px; position: relative; white-space: nowrap; box-shadow: 2px 0 var(--base-hlt-invert), -2px 0 0 var(--base-hlt-invert); z-index: 1011; background: var(--base-hlt-notr-hover); } .massPanel.flex_row { display: none; } .massPanel .btn-double { margin: 0 12px 0 0; } .massPanel .btn-double .cnt { padding: 8px; display: flex; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: bold; } .massPanel .btn-double button:last-child { width:44px; } .massPanel .btn-double .cnt b { color: var(--base-txt-act-major); font: var(--font-ui-15-large-semi); margin: 0 8px 0 0; } .massPanel .btn-double .cnt b u { text-decoration: none; font: var(--font-ui-12-mini-med); color: var(--base-txt-btn-w); vertical-align: bottom; } .massPanel .btn-double .cnt b u:before { content: '/ '; } .massPanel .inputCheckbox { width: 24px; height: 24px; padding: 0 4px; } .massPanel .inputCheckbox span, .massPanel .inputCheckbox ws-icon { --icon-size: 16px; } #massdrag { font: 13px/40px var(--font-base); display: none; height: 40px; position: fixed; white-space: nowrap; cursor: move; cursor: grabbing; width: 360px; transform: rotate(-1deg); z-index: 1020 } #massdrag div { z-index: 1000; background: var(--menu-cont-top); content: ''; position: absolute; height: 40px; width: 360px; left: 0; top: 0; border: 1px solid var(--base-txt-link-major); border-radius: 4px } #massdrag div.in { display: flex } #massdrag div.in font { flex-grow: 1 } #massdrag div span { color: var(--base-txt-link-major); margin: 0 10px; } #massdrag div.bor1 { left: -3px; top: 6px; display: none; background: var(--base-hlt-hover); } #massdrag div.bor2 { left: 3px; top: 3px; background: var(--base-hlt-hover); } #massdrag.massdrag_mul div.bor1 { display: block } .massPanel.masserr { box-shadow: 2px 0 var(--base-btn-alert-primary-minor), -2px 0 0 var(--base-btn-alert-primary-minor); } body.withMass main .massPanel { display: block; } body.withMass .filter { display: none; } #massdo_modal { background: var(--base-cont-mod-low); margin: 0; padding: 16px 15px; overflow: hidden; } #massdo_modal.massdo_invite { min-height: 42px } #massdo_modal .cnt { float: right; font: 13px/20px var(--font-base); margin: 6px 10px 0 0 } #massdo_modal .button_grad .cnt { float: none; margin: 0 0 0 5px; color: var(--white-accent); background: var(--white-ghost); padding: 4px 8px; border-radius: 20px; } #massdo_modal .button_grad .cnt b { font-weight: bold } .massdo_dis .cnt { display: none } #massdo_modal .cnt i { font: 13px/20px var(--font-base); color: var(--base-txt-tertiary) } .modal__content .buttons .cnt { float: right; font: 13px/20px var(--font-base); margin: 0 10px 0 0 } .modal__content .buttons .cnt i { font: 13px/20px var(--font-base); color: var(--base-txt-tertiary) } .massPanel div.ops_mail { display: flex; gap: 8px; align-items: center; } .massPanel span.toggle { display: flex; align-items: center; margin-right: 8px; } .massPanel span.ops_mail { display: flex; display: none; padding: 0 0 0 10px; gap: 8px; } .massPanel i, #massdrag i { float: left; color: var(--base-txt-accent); font: bold 14px/40px var(--font-base); width: 70px; margin-right: 4px; cursor: pointer } #massdrag i { width: auto; margin-right: 15px; } .massPanel.masserr i { padding-left: 20px; width: 50px; } #massdrag.masserr i { } .massPanel.masserr i u, #massdrag.masserr i u { color: var(--base-txt-btn-w); font: 12px/40px var(--font-base); text-decoration: none } .massPanel.masserr i u:before, #massdrag.masserr i u:before { content: ' / '; color: var(--base-txt-tertiary) } .massPanel i font { transition: all 0.1s ease; -webkit-transition: all 0.1s ease } .massPanel i.i_big font { font: bold 18px/40px var(--font-base); } .massPanel i b, #massdrag i b { float: left; width: 20px; height: 20px; margin: 10px 10px 0 10px; background: url(/assets/img/color/iconset.svg) 0 -1220px } .massPanel i span, #massdrag i span { float: left; color: var(--base-txt-accent); font: bold 14px/40px var(--font-base) } .massPanel i span b { display: none } .massPanel span.ops { display: flex; height: 48px; white-space: nowrap; overflow: hidden; align-items: center; gap: 4px; /* to compensate btn box-shadow on focus-visible */ padding-left: 4px; padding-right: 4px; } .massPanel span.div { display: inline-block; vertical-align: top; width: 1px; height: 20px; opacity: 0.1; margin: 0 8px; } .massPanel ws-btn[disabled], .massPanel ws-btn[disabled]:hover { display: none } .menu-mass-children a[disabled] { display: none } .massPanel .ico_r { margin: 10px 10px 0 0 } .massPanel span.op_delete span { float: left } .massPanel span.op:hover em.help { color: var(--colors-alpha-light-70); } .massPanel .gray { color: var(--base-txt-secondary) } /*.massPanel label {*/ /* padding: 6px 10px 6px 30px;*/ /* position: relative;*/ /*}*/ /*.massPanel label input {*/ /* position: absolute;*/ /* left: 10px;*/ /* top: 6px;*/ /*}*/ .massPanel .or { font: 11px var(--font-base); color: var(--base-txt-tertiary); margin: 0 0 0 10px } .massPanel .or a { margin: 0 6px; color: var(--base-txt-secondary); padding: 1px 4px } .massPanel .or a:hover { background: var(--base-txt-tertiary); var(--white-max) } .massPanel span.ico_notify { margin: 5px -5px 0 0 } .massdo_walt { height: 80px !important; } .after_filter { border-top: none !important; margin-top: 10px } .filter .today { float: right; background: var(--base-hlt-g-hover); color: var(--base-txt-primary); box-shadow: none; border-radius: 18px; margin: 0 10px 0 0; display: none; font: 11px/20px var(--font-base); } .filter .today:hover { background: var(--base-btn-primary-minor); color: var(--white-accent); } body[data-page=gantt] .filter .today { margin-right: 20px; } .filter div.filt a.tag:hover { background: var(--flt-del-bg) !important; color: var(--flt-del-txt) !important } .filter div.filt a.tag:hover:before { color: var(--flt-del-ico); background: var(--flt-del-bg) } .filter div.filt a.user { color: var(--base-txt-primary); background: var(--flt-act-bg) } .filter div.filt a.user:hover { background: var(--flt-del-bg); color: var(--flt-del-txt) } .filter div.filt a.user:hover:after { color: var(--flt-del-ico) } .filter div.filt a.filtdef { color: var(--base-txt-secondary) } .filter div.filt a.filtdef:hover { color: var(--base-txt-primary) } .filter div.filt a.filtdel { color: var(--base-txt-primary); background: var(--flt-act-bg) } .commentListPanel__filter a.filtdel { background: var(--flt-act-bg); color: var(--base-txt-primary); } .filter div.filt a.filthot { background: var(--lbl-overdue-invert); color: var(--colors-alpha-light-100) } .filter div.filt a.filtdel:hover, .commentListPanel__filter a.filtdel:hover, .modal .commentListPanel__filter a.filtdel:hover { background: var(--flt-del-bg) !important; color: var(--flt-del-txt) !important } .filter div.filt a.filtdel:hover:before, body.mobile .filter div.filt a.filtdel:before, .commentListPanel__filter a.filtdel:hover:before, body.mobile .commentListPanel__filter a.filtdel:before { color: var(--flt-del-ico); background: var(--flt-del-bg) } #title_float a.filtdel:hover { color: var(--flt-del-txt); background: var(--flt-del-bg); } #title_float a.filtdel:hover:after, body.mobile #title_float a.filtdel:after { color: var(--flt-del-ico) } body.mobile .filter div.filt a.filtdel:before, body.mobile .commentListPanel__filter a.filtdel:before { background: transparent; } .filter .buts_place a ws-icon[name=attach-horiz] { transition: transform 0.1s ease; -webkit-transition: -webkit-transform 0.1s ease } .filter .buts_place a:hover ws-icon[name=attach-horiz] { -ms-transform: rotate(-90deg); /* IE 9 */ -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */ transform: rotate(-90deg); } .filter .buts_place { float: right; margin: 6px 0; } .filter .buts_place a { font: 13px/20px var(--font-base); border: 1px solid var(--colors-interblue-trans-400); float: left; padding: 3px 15px; margin: 0 0 0 10px; border-radius: 15px; color: var(--base-txt-secondary) } .filter .buts_place a:hover { border: 1px solid var(--colors-interblue-trans-500); color: var(--base-txt-max) } .filter .buts_place a.b2 .ico { display: none } /* ------------------------------------------------- Tags Select --------------------------------------------------- */ .tagsAdvFilterSelect__group { padding: 7px 0; } .tagsAdvFilterSelect__group:not([style*=none]) ~ .tagsAdvFilterSelect__group, a.showStatuses_button ~ .tagsAdvFilterSelect__group { } .tagsAdvFilterSelect__group__title { } .tagsAdvFilterSelect__group__title .ico_plus { display: none } .tagsAdvFilterSelect__group__title:hover .ico_plus { display: inline } .tagsAdvFilterSelect__group__title { text-align: center; background: var(--base-cont-top); font: 12px/20px var(--font-base); color: var(--base-txt-tertiary); padding: 0 0 5px; } .tagsAdvFilterSelect__group__title font { display: inline-block; color: var(--base-txt-secondary); max-width: 70%; text-overflow: ellipsis; overflow: hidden; font: 12px/16px var(--font-base); padding: 4px 15px; white-space: nowrap; border-radius: 12px; box-shadow: 0 0 0 1px var(--base-line-tertiary) inset; } .tagsAdvFilterSelect__group__title tags-group-icon ws-icon{ --icon-size: 16px; vertical-align: sub; } .tagsAdvFilterSelect__group__title ws-chip{ vertical-align: sub; } .tagsAdvFilterSelect__group__title font > ws-icon{ --icon-color: var(--base-txt-btn-w); } .tagsAdvFilterSelect__group-extra { border-top: var(--screen-px) solid var(--base-line-secondary); padding: 8px 7px 4px; margin: 4px -7px -4px; } .tagsAdvFilterSelect__group-extra label { gap: 4px; } .filter_new .fil .tagsAdvFilterSelect label { } .filter_new .fil .tagsAdvFilterSelect label span.tag { width: 16px; height: 12px; border-radius: 20px; background-color: var(--tag-color); margin-left: 2px; left: 22px; border: 2px solid var(--base-cont-top); } .filter_new .fil .tagsAdvFilterSelect label span.tag-stage { border-radius: 4px } .filter_new .fil .tagsAdvFilterSelect label span.tag_wo { display: none } .filter_new .fil .tagsAdvFilterSelect label ws-icon[data-tag] { margin-left: 2px; } .filter_new .fil .tagsAdvFilterSelect label .in { padding: 0 4px; } .filter_new .fil .tagsAdvFilterSelect-label { max-height: 327px; } .filter_new #fil_ptg .tagsAdvFilterSelect, .filter_new #fil_pst.tagsAdvFilterSelect { max-height: 385px; } @media (max-width: 1024px) { .filter div.filt_act a.b_ { display: none } .filter div.filt_act a.b { padding-right: 10px } .filter div.filt a.filtdel, .filter div.filt a.tag, .filter div.filt a.user { margin-left: 0; } } @media (max-width: 900px) { #modfiles .filter h2, #modfiles .filter .modal__header__tabs { display: none } .filter .buts_place a { padding: 3px 10px; margin: 0 0 0 7px; } .filter .buts_place a ws-icon, .filter .buts_place a.b2 ws-icon { display: block; margin: 0 auto; } .filter .buts_place a font { display: none; } } @media (max-width: 480px) { body[data-page=tasks_grid] #content #filter_more { margin: 0 -12px; } .filter a.sel, .filter a.ico_dots { position: relative } .filter div.filt_act, .filter div.filt_view, .filter div.filt_role { display: block } .filter div.filt_act { box-shadow: none; padding: 6px 6px 6px 0; } .filter div.filt a.drop, .filter div.filt span.ico_drop { display: none } .filter div.filt_order a.drop { display: inline-block } .filter div.filt_line { display: none } /* .filter-haveData #filterItem__order { display: none } */ .filter-haveData div.filt_view #dr_vt font { display: none } .filter-haveData div.filt_view span.ico_r { margin-left: 0 } .filter-haveData:before { width: 40px; } body.mobile .filter div.filt { float: none; display: inline-block; vertical-align: top; margin-right: -10px; } body.mobile .filter .in { overflow-x: auto } body.mobile .filter .in::-webkit-scrollbar:horizontal { display: none; } body.mobile .filter .in_ { width: auto; display: inline-block; } .filter__paginal { margin-left: 10px; } .filter .buts_place { position: relative } .filter .buts_place a.b2, .filter .buts_place a.b3 { display: none } .filter a.ico_dots { margin-right: 13px; } .filter .flex_gap, .filter .filter_line, .filter span[class="space-8"] { display: none; } body[data-page=calendar] .filter > * { order: 3; } body[data-page=calendar] .filter > ws-btn[left-icon*=plus] { order: 0; } body[data-page=calendar] .filter > ws-btn.date { order: 1; } body[data-page=calendar] .filter > ws-btn[left-icon*=input-circle] { order: 2; } } @media print { .filter { display: none } } .filter__item { display: flex; } .filter__item-active:not(.filter__item-simple) > ws-btn { display: none } .filter__item:not(.filter__item-active) > .btn-double { display: none } .filter__item-counter { margin: 0 4px; } .filter__item-counter:not(.filter__item-counterYes) ws-btn.fake { display: none } .filter__item.filter__item-active > .btn-double .proj_color svg use:last-child { fill: var(--base-cont-mod-top); } .filter__item-counter ws-btn span { color: var(--base-txt-accent); font: var(--font-ui-13-small-semi); } .filter__item-search input { padding: 0; background: none; border: none; font: var(--font-ui-12-mini-reg); color: var(--base-txt-btn-b); width: 60px; } .filter__item-search input::placeholder { font: var(--font-ui-13-small-reg); opacity: 1; color: inherit; } .filter__item ws-icon.tag { margin-right: 4px; } .filter__item ws-icon.tag { background: var(--base-cont-top); border-radius: 10px; } .filter__item .btn-double span { max-width:100px; } .filter__item .btn-double span.priorb { margin: 0 2px; } .filter__item ws-icon[name="paint_drop-solid"] { background: var(--base-cont-top); border-radius: 10px; } .filter__item ws-icon[name="paint_drop-solid"] svg{ fill: var(--project-color); } #filterItem__advancedFilter:not(.filter__item-active) { display: none } #filterItem__combine__menu { width: 330px; } #filterItem__combine ~ .filter__item:not(.filter__item-active, .filter__item-search) { display: none } .filter.filter-haveData #filterItem__combine ws-btn button span { display: none; } .filter__menuItem-active > ws-btn:first-child { display: none } .filter__menuItem:not(.filter__menuItem-active) > .btn-double, .filter__menuItem:not(.filter__menuItem-active) > ws-btn:last-child { display: none } .filter ws-btn.date button:nth-child(2) span { width: auto } .filter__item ws-btn span:first-letter { text-transform: uppercase; } .filter__menuItem ws-btn span:first-letter { text-transform: uppercase; } .filter__menuItem > ws-btn:first-child button[disabled] > span:after { display: inline-block; content: '(0)'; margin-left: 4px; } .massPanel.massPanel.massPanel .btn-double button.btn.btn:first-child { transform: translateX(-1px); box-shadow: 0px 0px 0px 1px var(--base-line-secondary); border-top-right-radius: 0px; border-bottom-right-radius: 0px; } .massPanel.massPanel.massPanel .btn-double button.btn.btn:last-child { box-shadow: unset; position: relative; z-index: 1; &:before { content: ''; position: absolute; z-index: 2; height: 30px; /* or calc(100% + 2px) */ width: 1px; left: -1px; background: var(--base-hlt-notr-hover); } &:after { content: ''; position: absolute; z-index: 3; width: 100%; height: 28px; /* or 100% */ border-top-right-radius: 6px; border-bottom-right-radius: 6px; box-shadow: 0px 0px 0px 1px var(--base-line-secondary); } &:hover:after { box-shadow: 0px 0px 0px 1px var(--base-line-accent); } } #too_many.hidden, #filter_paginal.hidden, #footer_paginal.hidden { display: none; } #mass_n_filt { background: var(--base-cont-top); box-shadow: 0 1px var(--base-line-tertiary); overflow: hidden; position: relative; z-index: 1; } body.desktop { #mass_n_filt { min-height: 48px; } } #mass_n_filt .mass_select_all { left:0; top:0; padding:6px 0; opacity:0; z-index:1 } #mass_n_filt:hover .mass_select_all, body.withMass #mass_n_filt .mass_select_all { opacity:0.7 } #mass_n_filt .mass_select_all label { padding:7px 8px; width:14px; } #mass_n_filt .mass_select_all label input:checked { display:none } #mass_n_filt .filter { padding: 0 16px 0 30px; position:relative; top:0; transition:top 0.3s ease; -webkit-transition:top 0.3s ease } #mass_n_filt .filter.flex_row { gap:4px; height: 48px; } #mass_n_filt .massPanel { position:absolute; top: -48px; transition:top 0.3s ease; -webkit-transition:top 0.3s ease; display: flex; left: 0; right:0; padding: 0 24px; visibility: hidden; } body.withMass #mass_n_filt .filter { } body.withMass #mass_n_filt .massPanel { top:0; display: flex; visibility: visible; } #title_float .in_r .add_place .ico_filt_add { float:left; margin:2px; } #title_float .in_r .add_place:hover .ico_filt_add { margin:0; } .project_bl a.add_place, #title_float a.add_place { float:right; margin:-10px -20px -10px 20px; color:var(--base-txt-secondary); padding:10px; } .project_bl a.add_place:hover, #title_float a.add_place:hover { color:var(--base-txt-max) } .project_bl a.add_place_b:hover, #title_float a.add_place_b:hover { box-shadow:0 2px var(--base-txt-link-major) } .project_bl .add_place .ico_r { margin:-5px 0 -5px 10px } /*#title_float a.add_place .ico_r, */ .filter .add_place { float: right; margin: 10px 5px 10px 10px; position: relative; } .filter .add_place ws-btn { margin:-4px 0; } .filter .add_place a { float:right; color:var(--base-txt-secondary); font:13px/20px var(--font-base) } .filter .add_place a:hover { color:var(--base-txt-link-minor) } .filter .add_place span.ico_user_add, .filter .add_place span.ico_project_add { margin:-5px 0 -5px 0 } #title_float a.add_place_usr { margin-right:-45px; } #title_float .ico_equalizer { margin:0 0 0 -30px } body.desktop #title_float .ico_equalizer { opacity:0; transition:opacity 0.2s ease 0.2s; -webkit-transition:opacity 0.2s ease 0.2s } body.desktop #title_float:hover .ico_equalizer { opacity:1 } #title_float { background: var(--base-cont-top); height:40px; /* border-bottom:2px solid var(--base-line-alt-gap-minor); */ padding:0 20px 0 30px; white-space: nowrap; } #title_float .in .ico_r { margin-left:10px; } #title_float .in .ico_menu_usr2 { margin-right:8px; } #title_float .in .ico_r.ico_projects { margin:-6px 1px -5px 4px; } #title_float * { vertical-align:top; } #title_float span.ico_subtasks { margin:0 4px 0 0 } #title_float .in_r a.m { color:var(--base-txt-tertiary); padding:10px; margin:0 -10px } #title_float .in_r a.m:hover { border-bottom:2px solid var(--base-txt-link-minor); padding-bottom:12px; margin-bottom:-2px } #title_float .in_r a.m span { font:bold 13px/20px var(--font-base); color:var(--base-txt-accent) } #title_float .in_r .ico_r, #title_float .in_r3 .ico_r { margin:-5px 0 } #title_float .in_r .ico_equalizer { margin:0 } #title_float .users span { cursor:pointer } #title_float .users .ico { margin:5px 0 5px 15px !important; } #title_float .users_ .ico { margin:0 0 0 10px; } #title_float .in .eye { display:block; } #title_float .in b { display:none } #title_float .in a.name { color:var(--base-txt-accent) } #title_float .in a.name:hover { color:var(--base-txt-link-minor) } #title_float .in { height:40px; background:var(--base-cont-top); width:63%; font:14px/20px var(--font-base); padding:10px; box-sizing:border-box; color:var(--base-txt-secondary) } #title_float .in span.terms_label_wait, #title_float .in span.terms_label_hot, #title_float .in span.terms_label_warm, #title_float .in span.terms_label_remain { margin:0 0 0 10px; position:relative; top:-3px } #title_float .in_r { float:right; width:34%; padding:10px 10px; font:13px/20px var(--font-base); color:var(--base-txt-secondary) } #title_float .in_r3 { font:13px/20px var(--font-base); color:var(--base-txt-secondary) } @media (min-width:900px) { } #title_float .div { display:inline-block; width:1px; height:16px; background:var(--base-line-primary); margin:2px 7px 2px 10px } #title_float .wleft, #title_float .wright_ { display:none; } #title_float .wcenter { display:none } @media (max-width:900px) { #title_float .wleft { display:inline; vertical-align:top } #title_float .wright { display:none } body.bd_right #title_float .wleft, body.bd_right #title_float .in { display:none } body.bd_right #title_float .wright { display:inline; vertical-align:top } body.bd_right #title_float .wleft_ { display:none } body.bd_right #title_float .wright_ { display:inline; vertical-align:top } #title_float .in_r { display:none } body.bd_right #title_float .in_r { display:block; float:left; width:100%; box-sizing:border-box; text-align:center; padding-right:40px; } body.bd_right #title_float .in_r .ico_r { margin-right:-30px; } body.bd_right #title_float .in_r .ico_user_add { margin-right:-35px; } body.bd_right #title_float .in_r .ico_project_add { margin-right:-25px; } body.bd_right #title_float .div.tbl { display:none } #title_float .in_r3 { text-align:center; padding-right:40px; } #title_float .in_r3 .ico_r { margin-right:-30px; } #title_float .in_r3 .ico_plus_blue2 { margin-right:-28px; margin-top:0 } #title_float .in_r3 .ico_user_add { margin-right:-35px; } #title_float .in_r3 .ico_project_add { margin-right:-25px; } #title_float .in_r3 .div.tbl { display:none } #title_float .in { width: auto; } #title_float .in_r .ico_r { margin:-5px 5px; } #title_float .in_r .ico_equalizer { margin:0 } body.bd_right #title_float .in_r .users_ { display:block !important } body.bd_right #title_float .in_r .users, body.bd_right #title_float .in_r .ico_expandh { display:none } } #tback { font:13px/20px var(--font-base); padding:10px; margin:-10px -10px -10px -40px; float:left; white-space:nowrap; color:var(--base-txt-tertiary) } .modal #tback { margin-left:-18px; padding-left:15px; margin-right:0; padding-right:0 } #tback:hover { color:var(--base-txt-max); } #tback.over { color:var(--base-txt-link-minor); } #tback i { font:inherit; color:inherit; margin:0 10px } #tback .ico_l { float:left; margin:-2px 0 2px 0; } #title_float #tback + .div { margin-left:0 } @media (max-width:480px) { #mass_n_filt .filter.flex_row { gap: 8px; } #title_float { padding:0 0 0 10px } #title_float a.a2r { margin:0 10px 0 0 } #tback { margin-left:-20px; padding-left:15px; } #tback i { display:none } } #title_float .in_abs_left { float:left } @media (min-width:900px) { } @media (max-width:1390px) { } @media (max-width:1000px) and (min-width:900px) { } @media (max-width:960px) { } #title_float .users { height:24px; margin:0 20px -4px 0; position:relative; top:-2px; white-space:nowrap; } #title_float .users .av_sm { margin:0 -2px 0 -2px; box-shadow:0 0 0 2px var(--base-cont-top); float:left } #title_float .users .cnt_over { position:absolute; background:var(--base-btn-alert-primary-major); color:var(--white-accent); min-width:6px; padding:0 2px; height:10px; border-radius:3px; font:8px/10px var(--font-base); text-align:center; left:0; top:20px; box-shadow:0 0 0 1.5px var(--base-cont-top); } #title_float .users .cnt_over:hover { background:var(--base-btn-primary-minor); } #title_float .users span { display:inline-block; position:relative; vertical-align:top; cursor:pointer; } #title_float .users span.more { margin:0 5px 0 0; width:24px; height:24px; text-align:center; font:12px/24px var(--font-base); border-radius:12px; background:var(--base-cont-low); color:var(--base-txt-secondary); } #title_float .users span.more:hover { background:var(--base-hlt-hover); color:var(--base-txt-primary) } #title_float .users .user_to .av_sm { border-radius:0 } #title_float .users i { margin:0 7px 0 7px; float:left; border-left:1px solid var(--base-line-primary); width:1px; height:24px; } #title_float a.filtdel { font:11px/28px var(--font-base); color:var(--base-txt-secondary); display:inline-block; padding:0 18px 0 8px; background:var(--flt-act-bg); border-radius:4px; margin:-4px 0 -4px 0 } #title_float a.filtdel:hover { padding-right:6px; box-shadow:none } body.mobile #title_float a.filtdel { padding-right:6px } #title_float a.filtdel:hover:after, body.mobile #title_float a.filtdel:after { content:' x'; font:11px/28px var(--font-base); margin-left:3px } #title_float a.info { float:right; border-left:1px solid var(--base-line-primary); padding:5px 5px 5px 10px; margin:-5px -30px -5px 15px; } #title_float .in_r a.ico_user_add { margin:-5px -5px -5px 30px; } #title_float .in_r a.a, #title_float .in_r a.a2 { vertical-align:top } #title_float .in_r a.a { color:var(--base-txt-secondary); padding:3px 8px; margin:-3px -8px; border-radius:4px; display:inline-block; } #title_float .in_r a.a:hover { background:var(--base-hlt-hover); color:var(--base-txt-primary) } #title_float a.a2 { color:var(--base-txt-secondary); font:13px/20px var(--font-base); display:inline-block; } #title_float a.a2r { float:right } #title_float a.a2:hover { color:var(--base-txt-primary) } /*#title_float .in_r a.a > span {font-weight:bold; color:var(--base-txt-accent); margin-right:-4px;}*/ #title_float span.cnt { font-weight:bold; color:var(--base-txt-accent); margin-right:-4px; } #title_float .part { color:var(--base-txt-tertiary) } #title_float .part:hover { color:var(--base-txt-secondary) } #title_float .part.act { color:var(--base-txt-accent) } #title_float .part.act a { cursor:text } #title_float .part.act a.cnt_hot, #title_float .part.act a.cnt_warm, #title_float .part.act a.ico_expandh { cursor:pointer } #title_float a.cnt_hot, #title_float span.cnt_hot { background:var(--lbl-overdue-invert); box-shadow:none; position:relative; top:0; padding:2px 5px; display:inline } #title_float a.cnt_warm, #title_float span.cnt_warm { background:var(--lbl-upcoming-invert); box-shadow:none; position:relative; top:0; padding:2px 5px; display:inline; } #member_view a.cnt_hot { vertical-align:bottom; margin:0 -2px 0 2px } #title_float a.cnt_hot:hover, #title_float a.cnt_warm:hover, #member_view a.cnt_hot:hover { border-radius:3px; background:var(--base-btn-primary-minor); -webkit-transition:border-radius 0.5s ease; transition:border-radius 0.5s ease } #title_float a.ico_expandh { margin-left:10px; margin-top:2px !important; } #title_float .noscroll { float:left; margin:-10px 0 -10px -40px; padding:10px 10px 10px 40px; cursor:auto } #title_float a.b { color:var(--base-txt-secondary) } body.desktop #title_float a.b .ico { opacity:0 } body.desktop #title_float a.b .ico_plus_blue2 { opacity:1 } #title_float a.b:hover .ico { background-color:var(--base-hlt-hover); border-radius:10px; } #title_float a.b:hover span.ico_plus_blue { background-color:var(--base-hlt-notr-hover); } body.desktop #title_float a.b:hover .ico { opacity:1 } /* -------------------------------------------------------------------------------------------------------------------*/ .headerConfig { margin: 0; border-bottom: var(--screen-px) solid var(--base-line-secondary); background: var(--base-cont-mid); } .headerConfig__title { display: flex; flex-direction: column; } .headerConfig__title-path { padding: 26px 0 0 20px; } .headerConfig__title-path a { font: var(--font-ui-12-mini-med); color: var(--base-txt-tertiary); --icon-color: var(--base-txt-tertiary); --icon-size: 16px; padding: 0 6px 0 2px; display: none; border-radius: 4px; } .headerConfig__title-path a:hover { color: var(--base-txt-primary); --icon-color: var(--base-txt-primary); background: var(--base-hlt-g-hover); } .headerConfig__title-name { display: flex; align-items: center; } .headerConfig__title-name:last-child { padding: 2px 20px 8px 22px; } .headerConfig__title-name > .in { flex-grow: 1; flex-shrink: 0; padding: 0 4px; font: var(--font-ui-22-title-1-bold); color: var(--base-txt-primary); } .headerConfig__title-name .r .in { padding: 0 8px; font: var(--font-ui-12-mini-reg); color: var(--base-txt-secondary); } .headerConfig__title-name .r > ws-icon { margin-right: 8px; --icon-color: var(--base-txt-notice-minor); } .headerConfig__title-name .r > ws-icon.alert { --icon-color: var(--base-txt-btn-w); } .headerConfig__title-name .r ws-btn { margin-left: 12px; } .headerConfig__tabs { padding-left: 20px; white-space: nowrap; overflow: hidden; height: 34px; position: relative; bottom: var(--screen-minus-px); } .headerConfig__tabs::-webkit-scrollbar:horizontal { display: none; } .headerConfig__tabs a { display: flex; color: var(--base-txt-tertiary); font: var(--font-ui-14-regular-reg); padding: 0 4px; margin-top: -2px; margin-bottom: 2px; height: 32px; -webkit-transition: box-shadow 0.3s ease; transition: box-shadow 0.3s ease; align-items: center; overflow: hidden; /* adds rounder corners for tap-highlight */ } .headerConfig__tab-disabled a { cursor: default; } .headerConfig__tabs a .badge { margin: 0 4px; } .headerConfig__tabs .headerConfig__tab { display: flex; float: left; flex-direction: column; margin-right: 4px; letter-spacing: 0.01rem; } .headerConfig__tabs a:hover { color: var(--base-txt-secondary); } .headerConfig__tab-disabled a:hover { color: var(--base-txt-muted); } .headerConfig__tabs a.selected { background: var(--base-hlt-b-hover); } .headerConfig__tabs a:hover + .headerConfig__tab-border { background: var(--base-txt-tertiary); } .headerConfig__tab-disabled a:hover + .headerConfig__tab-border { background: none; } .headerConfig__tabs a.act, .headerConfig__tabs a.act:hover { color: var(--base-txt-accent); } .headerConfig__tabs a.act .in { text-shadow: -0.03ex 0 0 currentColor, 0.03ex 0 0 currentColor; } @supports (-webkit-text-stroke-width: 0.04ex) { .headerConfig__tabs a.act .in { text-shadow: -0.03ex 0 0 currentColor, 0.03ex 0 0 currentColor; -webkit-text-stroke-width: 0.04ex; } } .headerConfig__tabs .headerConfig__tab-border { width: 100%; height: 2px; border-radius: 1px; background: transparent; } .headerConfig__tabs .act + .headerConfig__tab-border { background: var(--base-hlt-b-invert); } .headerConfig__tabs a:hover > ws-icon { --icon-color: var(--base-txt-secondary); } .headerConfig__tabs a > ws-icon { padding: 0 4px; --icon-color: var(--base-txt-tertiary); } .headerConfig__tabs a.act > ws-icon { --icon-color: var(--base-txt-accent); } .headerConfig__tab-disabled a > ws-icon, .headerConfig__tab-disabled a:hover > ws-icon { --icon-color: var(--base-txt-muted); } .headerConfig__tabs a.act .ico { margin-left: -10px; position: relative; left: 10px; top: 2px; } .headerConfig__tabs a .in { padding: 0 2px; } .headerConfig__tab-disabled a .in { color: var(--base-txt-muted); } @media (max-width: 1080px) and (min-width: 481px) { .headerConfig__title-path { padding-top: 6px; } .headerConfig__title-path a { display: inline-flex; } } .headerConfig__title-name .r .in.payment_ok span.hand_ok { font-size: 24px; } .headerConfig__title-name .r .in.payment_ok { display: flex; } @media (max-width: 748px) { .headerConfig__title-name .r .in.trial_notice, .headerConfig__title-name .r .in.payment_notice, .headerConfig__title-name .r .in.freeze_notice { display: none; } } @media (max-width: 600px) { .headerConfig__title-name .r .in.payment_ok, .headerConfig__title-name .r .in.freeze_warn { display: none; } } @media screen and (min-width: 481px) { .headerConfig .mobile-head__left { display: none; } .headerConfig__title-name .name { display: none; } } @media screen and (max-width: 480px) { .headerConfig { z-index: 1; border-bottom: unset; } .headerConfig__tabs { padding: 4px 14px 0; bottom: 0; } .headerConfig__tabs-wrapper { gap: 4px; .headerConfig__tab { margin-right: 0; } } }#headerPrint { display: none } #header_normal { } #logo { float: left; height: 48px; width: 48px; padding: 16px; text-align: center; position: relative; margin: 0 -80px 0 -80px } #logo svg.ws, #logo img.ws { fill: var(--base-txt-primary); width: 48px; height: 48px; margin: 0; opacity: 0.2; } #logo .ico_l { position: absolute; margin: 0; top: 5px; left: 5px; border: 2px solid var(--base-cont-top); background-color: var(--base-cont-top); border-radius: 20px } #logo.nologo .ico_l { display: none } #logo a { } #logo a .loader_sm { margin: 21px 5px 5px } #logo .logo_place { display: block; width: 48px; height: 44px; text-align: center; border: 1px dashed var(--base-txt-link-minor); border-radius: 10px; font: 11px/14px var(--font-base); color: var(--base-txt-link-minor); padding: 4px 2px; margin: -3px; } #logo .logo_place b { color: var(--base-txt-link-minor); font: 12px/14px var(--font-base) } #logo .logo_place i { font: 11px/20px var(--font-base); color: var(--base-txt-tertiary) } #logo a:hover .logo_place { background: var(--base-hlt-hover) } #logo input { opacity: 0; position: absolute; left: -1000px; top: -1000px } .header .path { color: var(--base-txt-ghost); font: 11px/14px var(--font-base); height: 14px; padding: 11px 5px 5px; margin: -5px; } .header .path a.ht { color: var(--base-txt-secondary); display: inline-block; padding: 2px 5px; margin: -2px -5px; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: top } .header .path a.ht:hover, .header .path a.ht.over { background: var(--base-hlt-hover); border-radius: 6px; color: var(--base-txt-link-major); } .header .path .priorb { transform: scale(0.5); -webkit-transform: scale(0.5); color: transparent !important; margin: -3px; vertical-align: top; } .header .path .ico_done_place { width: 10px; height: 10px; } .header .path .ico_done_place:after { top: 15px; } .header .path .ico_done { transform: scale(0.5); -webkit-transform: scale(0.5); margin: -5px; } .header { color: var(--base-txt-accent) } .header .priorb, .dataadd .tree .priorb { border-radius: 4px; } .header .name { font: 20px/20px var(--font-base); padding: 6px 0 2px; height: 20px; } .modal .header .name { padding: 8px 0 0 } .header .name_ { padding: 20px 0 12px; font: 22px/20px var(--font-base); } .header .name a { color: inherit } .header .name a.ht { max-width: 68%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: inline-block; vertical-align: top; padding: 5px 0; margin: -5px 0 } .header .name a:hover { color: var(--base-txt-link-minor) } .header .name .ico_account { margin: -2px 0 0 1px; vertical-align: top } .header .name .ico, .header .name .priorb, .header .name .bookmark { vertical-align: top; margin: 0 0 0 2px } .header .name task-wait { vertical-align: top; margin: 0 0 0 5px } .header .name .av_place { display: inline-block; vertical-align: top; margin: -2px 0 -2px 2px } .modal .header .proj_color:not(.proj_color0) ~ .path { margin-left: 10px; } .modal .header .proj_color:not(.proj_color0) ~ .name { margin-left: 15px; } .modal__header .header .name a.ht { padding: 2px 5px 3px; margin: -2px -5px -3px; border-radius: 4px; max-width: 80%; } .modal__header .header .name a.ht:hover { background: var(--base-hlt-hover); color: var(--base-txt-link-major) } /*--------------------------------------------------------------------------------------------------------------------*/ .menu_notitle { border-bottom: none !important } .primaryMenu__counter { position: absolute; top: -2px; right: 22%; transform: translateX(44%); white-space: nowrap; } #primaryMenu__queue__counter { display: none; position: absolute; right: 18px; top: 3px; width: 15px; height: 15px; padding: 2px; border-radius: 10px; background: var(--base-cont-top); } #primaryMenu__queue__counter.act { display: block } #primaryMenu__queue__counter.act ~ .primaryMenu__counter { display: none } #primaryMenu__queue__counter span { position: absolute; left: 0; top: 0; } #primaryMenu__queue__counter .loader_sm { width: 7px; height: 7px; border-width: 3px; } a.over #primaryMenu__queue__counter { display: none !important; } a.notyet { opacity: 0.35 } /* ----------- MinifyCSS: LIGHT THEMEMinifyCSS: LIGHT THEME ----------- *//*----------- MinifyCSS: STOPMinifyCSS: STOP ----------- */ /*--------------------------------------------------------------------------------------------------------------------*/ body[data-page=account] { background: var(--base-cont-top); } /*body[data-archive=on] {*/ /* background: var(--base-surf-archive);*/ /*}*/ /* XXX Hide header */ @media (max-width: 900px) { #mass_n_filt, .commentListPanel, .listing__days, #title_float { transition: top 0.3s ease; -webkit-transition: top 0.3s ease; -webkit-backface-visibility: hidden; -webkit-perspective: 1000px; -webkit-transform: translate3d(0, 0, 0); } body.hidehead:not(.lockhead) #mass_n_filt { top: 0; } body.hidehead:not(.lockhead) .listing__days { top: 0; } body.hidehead:not(.lockhead) #title_float { top: 0; } } /*--------------------------------------------------------------------------------------------------------------------*/ #back_title .a2 { display: none } #back_title.alt .a2 { display: inline } #back_title.alt .a1 { display: none } /*------------------------------------------------- NEW HINT BADGE ICON ----------------------------------------------*/ ws-icon[name="hint"] {cursor: help;width: 20px !important;height: 20px !important;padding: 0;vertical-align: middle;} ws-icon[name="hint"] svg { fill: var(--base-txt-tertiary); width: 16px !important; height: 16px !important; } ws-icon[name="hint"] svg use:last-child { display: none; } ws-icon[name="hint"]:hover svg use:first-child { display: none; } ws-icon[name="hint"]:hover svg use:last-child { display: inline; } ws-icon[name="hint"]:hover svg { fill: var(--base-txt-alt-info) !important; } ws-icon[name="hint-exclam"] {cursor: help;width: 20px !important;height: 20px !important;padding: 0;vertical-align: middle;} ws-icon[name="hint-exclam"] svg { fill: var(--base-txt-notice-minor); width: 16px !important; height: 16px !important; } ws-icon[name="hint-exclam"]:hover svg { fill: var(--base-txt-notice-major) !important; } /*------------------------------------------------- NEW HINT BADGE ICON ----------------------------------------------*/ i.help, em.help, span.drophelp {color:var(--base-txt-alt-info); font:italic 13px/20px var(--font-serif); position:relative; cursor:help; overflow:hidden} span.help, a.help {position:relative; cursor:help; overflow:hidden} i.help font, em.help font, span.help font, a.help font {display:none} #mobileHintMenu { color:var(--base-txt-secondary); font:13px/20px var(--font-base);} #mobileHintMenu u { text-decoration:none; color:var(--base-btn-notice-minor)} #mobileHintMenu b {color:var(--costs-money-major); font-weight:normal} /*--------------------------------------------------------------------------------------------------------------------*/ #hint {z-index: 3000; position:fixed; left:0; top:0;} #hint .in { box-sizing: border-box;padding:6px 8px;background:var(--colors-alpha-dark-80);color:var(--white-accent);font:13px/20px var(--font-base);border-radius:6px;opacity:0; transition:opacity 0.25s ease;-webkit-transition:opacity 0.5s ease;white-space:pre-wrap;word-break: break-word;box-shadow:0 0 2px var(--base-cont-top);max-width:350px;backdrop-filter:blur(2px); text-wrap: balance; } #hint.hint_gr .in {color:var(--white-tertiary);} #hint.hint_wr .in {white-space:pre-wrap; width:320px;} #hint.ar_l .in:before {content:''; display:block; position:absolute; border:4px solid transparent; border-color:transparent var(--colors-alpha-dark-80) transparent transparent; left:-8px; top:calc(50% - 4px)} #hint.ar_r .in:before {content:''; display:block; position:absolute; border:4px solid transparent; border-color:transparent transparent transparent var(--colors-alpha-dark-80); right:-8px; top:calc(50% - 4px)} #hint.ar_b .in:before {content:''; display:block; position:absolute; border:4px solid transparent; border-color:var(--colors-alpha-dark-80) transparent transparent transparent; bottom:-8px; left:calc(50% - 4px)} #hint.ar_t .in:before {content:''; display:block; position:absolute; border:4px solid transparent; border-color:transparent transparent var(--colors-alpha-dark-80) transparent; top:-8px; left:calc(50% - 4px)} #hint.ar_t.ar_s .in:before, #hint.ar_b.ar_s .in:before {left:10px} #hint.ar_t.ar_e .in:before, #hint.ar_b.ar_e .in:before {left:calc(100% - 18px)} #hint b { font-weight:590; color:var(--white-accent); } #hint span.gray { color:var(--white-tertiary); } #hint small { font:12px/16px var(--font-base); } #hint span.tag { font: 11px/16px var(--font-base);display: inline-block;border-radius:2px;padding: 0 5px;margin: 0 0 1px;background: var(--tag-bg);color: var(--tag-color); } #hint span.red { color:var(--colors-red-600); } #hint span.time { color: var(--costs-time-minor); } #hint span.money { color: var(--costs-money-minor); } #hint span.date { font:12px/16px var(--font-base); color:var(--white-muted); display:block; text-align:right; margin:10px 0 0 0; } #hint span.yellow { color:var(--colors-yellow-100); } #hint span.violet { color:var(--base-txt-btn-b); } #hint span.green { color:var(--colors-pine-500); } #hint span.blue { color:var(--colors-interblue-600); } #hint span.upgrade { color:var(--base-btn-notice-minor); font:14px/16px bold var(--font-base); } #hint span.hkey { border:1px solid var(--white-primary); padding:1px 4px; border-radius:3px; font: 11px / 20px var(--font-base); } #hint .note_normal { font-size:12px; color:var(--base-txt-accent); } #hint .nowrap { white-space:pre-wrap; min-width:0; max-width:300px; } #hint .nowrap2 { white-space:pre-wrap; max-width:300px; } #hint.hint_hp .in { white-space:normal; width:200px; } #hint.hint_hpb .in { width:320px; } #hint.hint_hp u { text-decoration:none; color:var(--colors-yellow-100)} #hint.hint_hp b {color:var(--colors-teal-desat-400); font-weight:normal} #hint font.h { display:block; padding:5px 0;font:bold 14px/20px var(--font-base);margin: 0 0 -25px;} #hint .in ws-icon.inline_ico { --icon-color: var(--white-accent); } #hint.hint_w .in { background:var(--hint-w-bg); box-shadow:var(--shadow-brd-enable);backdrop-filter: blur(6px);max-width:480px } #hint.hint_w.hint_wm .in { background:var(--base-cont-mod-top); } #hint.hint_w.ar_l .in:before { border-color:transparent var(--base-line-secondary) transparent transparent;} #hint.hint_w.ar_r .in:before { border-color:transparent transparent transparent var(--base-line-secondary);} #hint.hint_w.ar_b .in:before { border-color:var(--base-line-secondary) transparent transparent transparent;} #hint.hint_w.ar_t .in:before { border-color:transparent transparent var(--base-line-secondary) transparent;} #hint.hint_w .in { color: var(--base-txt-primary); } #hint.hint_w b { color: var(--base-txt-primary); } #hint.hint_w span.gray { color: var(--base-txt-tertiary); } #hint.hint_w span.red { color:var(--base-txt-alert-major)} #hint.hint_w span.red_opacity {color: var(--base-txt-alert-major); opacity: 0.8} #hint.hint_w span.yellow { color:var(--base-txt-notice-minor)} #hint.hint_w span.green { color:var(--base-btn-fresh-minor)} #hint.hint_w span.hkey { border-color: var(--base-txt-tertiary); color: var(--colorize-lbl-txt-primary); } #hint.hint_w span.money { color: var(--costs-money-text); } #hint.hint_w span.time { color: var(--costs-time-text); } #hint.w_overflow .in, #hint.h_overflow .in { margin: 0 !important; } #hint.w_overflow .in:before, #hint.h_overflow .in:before { display: none; } #hint .av_sm {margin: -2px 4px -2px -2px;vertical-align: bottom;transform:scale(0.8);} #hint .av_svg {--icon-color: var(--white-accent); border-color: var(--white-accent);} #hint .av_def0, #hint .av_def1, #hint .av_def2 {background-color:var(--white-muted); box-shadow:0 0 0 1px var(--white-muted)} .hint_line {border-top:1px solid var(--white-muted); margin:8px 0; height:0} .hint_nline {margin:10px 0; height:0} .hint_txt {display:none} #hint .hint__html { white-space: initial; } #hint .hint__title { --icon-color: var(--colors-alpha-light-90); display: flex; font: var(--font-ui-14-regular-semi); color: var(--colors-alpha-light-90); gap: 4px; padding: 4px 0; } #hint .hint__title-in { flex-grow: 1; } #hint .hint__html .hotKey { display: inline-flex; margin: 0; gap: 2px; flex-shrink: 0; } #hint .hint__html .hotKey .key { margin: 0; padding: 0 6px; border: 1px solid var(--colors-alpha-light-20); border-radius: 4px; background: var(--colors-alpha-light-10); color: var(--colors-alpha-light-90); text-transform: capitalize; } #hint .hint__divider { border: none; height: 1px; background-color: var(--colors-alpha-light-20); margin: 8px 0; } #hint .hint__subtitle { font: var(--font-ui-13-small-semi); color: var(--colors-alpha-light-90); } #hint .hint__text { font: var(--font-txt-13-small-reg); color: var(--colors-alpha-light-70); padding: 2px 0; } .hint__grid { display: grid; align-items: center; gap: 4px; } .hint__grid-2 { grid-template-columns: max-content max-content; } .hint__grid-column-end { justify-self: end; } #hint .cnt_hot { color: var(--colors-red-trans-600); border-color: var(--colors-red-trans-600); } #hint .cnt_warm { color: var(--colors-violet-trans-600); border-color: var(--colors-violet-trans-600); } #hint .cnt_all { color: var(--colors-graphite-600); border-color: var(--colors-graphite-600); } /* DO NOT OVERRIDE INNER content STYLE of HTML hint IT IS breaking height calculations */ #hint .hint__body { padding: 2px; width: 200px; } #hint .hint__title-alert { --icon-color: var(--colors-red-700); color: var(--colors-red-700); } #hint .hint__body .hint__text { display: flex; } /* Guide Tour colorizing and misc */ #hint.hint_tour .in { background: var(--colors-interblue-800); color: var(--white-accent); padding: 16px 20px 8px 20px; border-radius: 16px; box-shadow: 0 1px 1.5px -0.5px rgba(17, 74, 120, 0.40), 0 4px 8px -2px rgba(17, 74, 120, 0.25), 0 6px 16px -4px rgba(17, 74, 120, 0.20); } #hint.hint_tour .hint_close { position: absolute; top: 12px; right: 12px; --icon-color: var(--white-accent); cursor: pointer; } #hint.hint_tour .hint_gap { height: 2px; } #hint.hint_tour .hint_buttons { display: flex; gap: 8px; padding-top: 8px; margin: 0 -12px 0 0; .hint_dots { margin-right: auto; display: flex; gap: 4px; align-items: center; .dot { width: 6px; height: 6px; border-radius: 3px; background: var(--white-accent); &.opa { opacity: 0.4; } } } button { border-radius: 8px; } } #hint.hint_tour.ar_l .in:before { content: ''; position: absolute; left: -8px; top: calc(50% - 8px); border-style: solid; border-width: 8px 8px 8px 0; border-color: transparent var(--colors-interblue-800) transparent transparent; } #hint.hint_tour.ar_r .in:before { content: ''; position: absolute; right: -8px; top: calc(50% - 8px); border-style: solid; border-width: 8px 0 8px 8px; border-color: transparent transparent transparent var(--colors-interblue-800); } #hint.hint_tour.ar_b .in:before { content: ''; position: absolute; bottom: -8px; left: calc(50% - 8px); border-style: solid; border-width: 8px 8px 0 8px; border-color: var(--colors-interblue-800) transparent transparent transparent; } #hint.hint_tour.ar_t .in:before { content: ''; position: absolute; top: -8px; left: calc(50% - 8px); border-style: solid; border-width: 0 8px 8px 8px; border-color: transparent transparent var(--colors-interblue-800) transparent; } #guide_tour_overlay { position: fixed; inset: 0; background-color: var(--colors-alpha-dark-15); pointer-events: auto; z-index: 1050; } a.ico_delete {background:url(/assets/img/color/iconset.svg) no-repeat -60px -420px} a.ico_hide, span.ico_hide {background:url(/assets/img/color/iconset.svg) no-repeat -80px -420px} a.ico_hide2, span.ico_hide2 {background: url(/assets/img/color/iconset.svg) no-repeat -120px -420px;} a.ico_delete:hover, .viewsList a.ico_delete:hover {background:url(/assets/img/color/iconset.svg) no-repeat -20px -420px} a.ico_delete2, span.ico_delete2 {background:url(/assets/img/color/iconset.svg) no-repeat -80px -500px} .pre_delete a.ico_delete2, a.ico_delete2:hover, a:hover span.ico_delete2 {background:url(/assets/img/color/iconset.svg) no-repeat -60px -500px} a.ico_delete5, span.ico_delete5 {background:url(/assets/img/color/iconset.svg) no-repeat -120px -380px} a.ico_delete6, span.ico_delete6 {background:url(/assets/img/color/iconset.svg) no-repeat -40px -440px} a.ico_undelete5, span.ico_undelete5 {background:url(/assets/img/color/iconset.svg) no-repeat -100px -360px} a.ico_delete5:hover, a:hover span.ico_delete5 {background:url(/assets/img/color/iconset.svg) no-repeat -120px -440px} a.ico_delete6:hover, a:hover span.ico_delete6, button:hover span.ico_delete6 {background:url(/assets/img/color/iconset.svg) no-repeat -60px -440px} .pre_delete a.ico_delete5 {background:url(/assets/img/color/iconset.svg) no-repeat -120px -440px} span.ico_delete {background:url(/assets/img/color/iconset.svg) no-repeat -20px -420px} span.ico_edit {background: url(/assets/img/color/iconset.svg) no-repeat -20px -480px;} a:hover span.ico_edit {background:url(/assets/img/color/iconset.svg) no-repeat -20px -480px} a.ico_edit {background:url(/assets/img/color/iconset.svg) no-repeat -40px -480px} a.ico_edit:hover {background:url(/assets/img/color/iconset.svg) no-repeat -20px -480px} span.ico_company {background:url(/assets/img/color/iconset.svg) no-repeat -20px -100px} span.ico_company_sub {background:url(/assets/img/color/iconset.svg) no-repeat -80px -120px} #user_tasks span.ico_company {background:url(/assets/img/color/iconset.svg) no-repeat -40px -100px} #user_tasks span.ico_company_my, .user_list span.ico_company_my {background:url(/assets/img/color/iconset.svg) no-repeat -60px -100px} span.ico_mail {background:url(/assets/img/color/iconset.svg) no-repeat 0 0} .act span.ico_mail, .item:hover span.ico_mail {background:url(/assets/img/color/iconset.svg) no-repeat -20px 0} .sub_inline span.ico_mail, .sub_inline2 span.ico_mail, .ico_mail_new {background:url(/assets/img/color/iconset.svg) no-repeat -40px 0} a:hover .ico_mail_new, a.selected .ico_mail_new {background:url(/assets/img/color/iconset.svg) no-repeat -20px 0} span.ico_comment {background: url(/assets/img/color/iconset.svg) no-repeat -80px -1180px;} span.ico_note2 {background:url(/assets/img/color/iconset.svg) no-repeat -80px -600px} .commentListPanel__filter span.ico_comment {background:url(/assets/img/color/iconset.svg) no-repeat -40px -40px} span.ico_subtask {background:url(/assets/img/color/iconset.svg) no-repeat 0 -20px} span.ico_owner {background:url(/assets/img/color/iconset.svg) no-repeat 0 -700px} span.ico_admin {background:url(/assets/img/color/iconset.svg) no-repeat -40px -700px} span.ico_dep_admin {background:url(/assets/img/color/iconset.svg) no-repeat -120px -700px} span.ico_su_admin {background:url(/assets/img/color/iconset.svg) no-repeat -20px -700px} span.ico_user {background:url(/assets/img/color/iconset.svg) no-repeat -60px -700px;} span.ico_guest {background:url(/assets/img/color/iconset.svg) no-repeat -80px -700px} a:hover span.ico_user, label:hover span.ico_user, .selected span.ico_user, .act span.ico_user {background:url(/assets/img/color/iconset.svg) no-repeat -60px -720px} a:hover span.ico_guest, label:hover span.ico_guest, .selected span.ico_guest, .act span.ico_guest {background:url(/assets/img/color/iconset.svg) no-repeat -80px -720px} a:hover span.ico_contact, a.ico_contact:hover, .selected span.ico_contact, .act span.ico_contact {background:url(/assets/img/color/iconset.svg) no-repeat -100px -720px} a.del:hover span.ico_contact, a.del.ico_contact:hover, a.del.selected span.ico_contact, a.del.act span.ico_contact {background:url(/assets/img/color/iconset.svg) no-repeat -100px -680px} a:hover span.ico_reader, label:hover span.ico_reader, .selected span.ico_reader, .act span.ico_reader {background:url(/assets/img/color/iconset.svg) no-repeat -120px -680px} a:hover span.ico_admin, label:hover span.ico_admin, .selected span.ico_admin, .act span.ico_admin {background:url(/assets/img/color/iconset.svg) no-repeat -40px -720px} a:hover span.ico_su_admin, label:hover span.ico_su_admin, .selected span.ico_su_admin, .act span.ico_su_admin {background:url(/assets/img/color/iconset.svg) no-repeat -20px -720px} a:hover span.ico_owner, label:hover span.ico_owner, .selected span.ico_owner, .act span.ico_owner {background:url(/assets/img/color/iconset.svg) no-repeat 0 -720px} span.ico_users_sm {background:url(/assets/img/color/iconset.svg) no-repeat -80px -520px} span.ico_disk {background:url(/assets/img/color/iconset.svg) no-repeat -60px -520px} span.ico_archive, a.ico_archive {background:url(/assets/img/color/iconset.svg) no-repeat 0 -520px} a:hover span.ico_user, a.selected span.ico_user {background:url(/assets/img/color/iconset.svg) no-repeat -60px -720px} span.ico_user2 {background:url(/assets/img/color/iconset.svg) no-repeat -20px -840px} span.ico_user3 {background: url(/assets/img/color/iconset.svg) no-repeat -60px -560px;} a:hover span.ico_user3 {background: url(/assets/img/color/iconset.svg) no-repeat -80px -560px;} a:hover span.ico_guest, a.selected span.ico_guest {background:url(/assets/img/color/iconset.svg) no-repeat -80px -720px} span.ico_guest2 {background:url(/assets/img/color/iconset.svg) no-repeat -80px -1120px} span.ico_contact, a.ico_contact {background:url(/assets/img/color/iconset.svg) no-repeat -100px -700px} .selected span.ico_contact_blue {background: url(/assets/img/color/iconset.svg) no-repeat -100px -720px;} span.ico_reader {background:url(/assets/img/color/iconset.svg) no-repeat -120px -660px} span.ico_contact_act {background:url(/assets/img/color/iconset.svg) no-repeat -100px -720px} span.ico_manager {background:url(/assets/img/color/iconset.svg) no-repeat -40px -540px} span.ico_managers {background:url(/assets/img/color/iconset.svg) no-repeat 0 -540px} span.ico_contact_add, a.ico_contact_add {background:url(/assets/img/color/iconset.svg) no-repeat -100px -720px; background-color:var(--base-hlt-hover); box-shadow:0 0 0 6px var(--base-hlt-hover); border-radius:10px; color:var(--base-txt-max)} span.ico_contacts {background:url(/assets/img/color/view_types.svg) -52px -338px no-repeat; width:26px; height:26px; margin:-3px;} a.button .ico_l.ico_contacts {margin:-3px 10px -3px 0;} span.ico_nomail {background:url(/assets/img/color/iconset.svg) no-repeat -40px -720px} span.ico_nologin {background:url(/assets/img/color/iconset.svg) no-repeat -40px -780px;} span.ico_nologin2 {background:url(/assets/img/color/iconset.svg) no-repeat -60px -780px} span.ico_invite {background:url(/assets/img/color/iconset.svg) no-repeat -60px 0} span.ico_subtask {background:url(/assets/img/color/iconset.svg) no-repeat 0 -20px} span.ico_hastimer, a.ico_hastimer {background:var(--cal-picker-hover) url(/assets/img/color/iconset.svg) no-repeat -100px -40px; border-radius:10px;} span.ico_pause, a.ico_pause {background:url(/assets/img/color/iconset.svg) no-repeat -100px -60px} span.ico_hastimer2 {background:url(/assets/img/color/iconset.svg) no-repeat -100px -40px} span.ico_overtimer {background-color:var(--costs-timer-warning)} span.ico_overtimer2 {background-color:var(--costs-timer-alert)} span.ico_notimer { box-shadow: 0 0 0 1px inset var(--base-txt-secondary); background: url(/assets/img/color/iconset.svg) no-repeat -80px -20px; border-radius: 10px; } :hover > span.ico_notimer { box-shadow: 0 0 0 1px inset var(--base-line-act-minor); background-position: -80px -40px; } span.ico_timer {background:url(/assets/img/color/iconset.svg) no-repeat -20px -240px} span.ico_but_term {background:url(/assets/img/color/iconset.svg) no-repeat -120px -840px} span.ico_timer_edit {background:url(/assets/img/color/iconset.svg) no-repeat -40px -480px} span.ico_view {background:url(/assets/img/color/iconset.svg) no-repeat -40px -200px} .sum_progress span.ico_view, span.ico_preview {background:url(/assets/img/color/iconset.svg) no-repeat -20px -400px} .preview span.ico_preview {background:url(/assets/img/color/iconset.svg) no-repeat -120px -400px} a.ico_timer {background:url(/assets/img/color/iconset.svg) no-repeat -100px -220px} a.norm span.ico_timer {background:url(/assets/img/color/iconset.svg) no-repeat -100px -200px} a.ico_timer:hover, a.norm:hover span.ico_timer, a.ico_timer_act, a.ico_hastimer:hover {background:url(/assets/img/color/iconset.svg) no-repeat -100px -240px} body.withTimer .ico_timer, body.withTimer .a_timer {opacity:0.5} .no_timers .ico_timer, .no_timers .a_timer {display:none !important} body.withTimer a.ico_timer:hover, body.withTimer a.norm:hover span.ico_timer, body.withTimer a.ico_timer_act, body.withTimer a.ico_hastimer:hover {background:url(/assets/img/color/iconset.svg) no-repeat -100px -180px; opacity:1} body.withTimer span.ico_timer {background:url(/assets/img/color/iconset.svg) no-repeat -40px -240px} span.ico_bmark {background:url(/assets/img/color/iconset.svg) no-repeat -20px -540px} span.ico_rss {background:url(/assets/img/color/iconset.svg) no-repeat 0 -320px} span.ico_google {background:url(/assets/img/color/iconset.svg) no-repeat 0 -300px} span.ico_ws {background:url(/assets/img/color/iconset.svg) no-repeat -20px -140px} span.ico_xlsx {background:url(/assets/img/color/iconset.svg) no-repeat -60px -1100px} span.ico_docx {background:url(/assets/img/color/iconset.svg) no-repeat -40px -1100px} span.ico_pptx {background:url(/assets/img/color/iconset.svg) no-repeat -80px -1100px} span.ico_newsubs {background:url(/assets/img/color/iconset.svg) no-repeat -80px -360px} a:hover span.ico_newsubs, a.norm_act span.ico_newsubs {background:url(/assets/img/color/iconset.svg) no-repeat -100px -360px} span.ico_print, a.ico_print {background:url(/assets/img/color/iconset.svg) no-repeat 0 -280px} /*span.ico_back {background:url(/img/color/iconset.svg) no-repeat 0 -360px}*/ a.ico_user {background:url(/assets/img/color/view_types.svg) no-repeat -30px -340px} a.ico_user:hover {background:url(/assets/img/color/view_types.svg) no-repeat -4px -340px} /*.ico_mention {background:url(/img/color/iconset.svg) no-repeat -20px -1120px}*/ .ico_mention {background:url(/assets/img/color/iconset.svg) no-repeat -120px -760px} /*.ico_subs_on {background:url(/img/color/iconset.svg) no-repeat -100px -760px} .ico_subs_off {background:url(/img/color/iconset.svg) no-repeat -100px -740px}*/ span.ico_arr_rw {background:url(/assets/img/color/iconset.svg) no-repeat -120px -1320px} span.ico_arr_lw {background:url(/assets/img/color/iconset.svg) no-repeat -100px -1320px} span.ico_right3, span.ico_right, span.ico_arr_r {background:url(/assets/img/color/iconset.svg) no-repeat -120px -1300px} span.ico_left3, span.ico_left {background:url(/assets/img/color/iconset.svg) no-repeat -100px -1300px} a.selected span.ico_right3, a:hover span.ico_right3, a:hover span.ico_right, span.ico_right3:hover, a.ico_right3:hover, a.ico_right:hover {background:url(/assets/img/color/iconset.svg) no-repeat -120px -1280px} a.selected span.ico_left3, a:hover span.ico_left3, a:hover span.ico_left, span.ico_left3:hover, a.ico_left3:hover, a.ico_left:hover {background:url(/assets/img/color/iconset.svg) no-repeat -100px -1280px} span.ico_timers {background:url(/assets/img/color/iconset.svg) no-repeat -40px -500px} a:hover span.ico_timers {background:url(/assets/img/color/iconset.svg) no-repeat -20px -500px} span.ico_proj_act {background:url(/assets/img/color/iconset.svg) no-repeat 0 -500px} a.act span.ico_proj_act {background:url(/assets/img/color/iconset.svg) no-repeat -20px -500px} span.ico_proj_arh {background:url(/assets/img/color/iconset.svg) no-repeat 0 -520px} a:hover span.ico_rss {background:url(/assets/img/color/iconset.svg) no-repeat -20px -320px} a:hover span.ico_google {background:url(/assets/img/color/iconset.svg) no-repeat -20px -300px} a:hover span.ico_print, a.ico_print:hover {background:url(/assets/img/color/iconset.svg) no-repeat -40px -280px} span.ico_money, i.ico_money {background:url(/assets/img/color/iconset.svg) no-repeat 0 -220px} .bar:not(.empty):hover span.ico_money {background-position:-20px -220px} span.ico_time, i.ico_time {background:url(/assets/img/color/iconset.svg) no-repeat 0 -200px} .bar:not(.empty):hover span.ico_time {background-position:-20px -200px} a.ico_time {background:url(/assets/img/color/iconset.svg) no-repeat -40px -200px} a.ico_time:hover, a:hover span.ico_time {background:url(/assets/img/color/iconset.svg) no-repeat -120px -240px} a.ico_time_sm, span.ico_time_sm, a.ico_time_pl, span.ico_time_pl {background:url(/assets/img/color/iconset.svg) no-repeat -60px -1260px} a.ico_time_sm:hover, a:hover span.ico_time_sm {background:url(/assets/img/color/iconset.svg) no-repeat -80px -1260px} a.ico_time_over_sm, span.ico_time_over_sm {background:url(/assets/img/color/iconset.svg) no-repeat -100px -1260px} a.ico_time_over_sm:hover, a:hover span.ico_time_over_sm {background:url(/assets/img/color/iconset.svg) no-repeat -120px -1260px} a.norm span.ico_time {background:url(/assets/img/color/iconset.svg) no-repeat -120px -200px} a.norm:hover span.ico_time {background:url(/assets/img/color/iconset.svg) no-repeat -120px -240px} span.ico_subtasks {background:url(/assets/img/color/iconset.svg) no-repeat 0 -180px} span.ico_queue_done {background:url(/assets/img/color/ws_emoji_new.svg) no-repeat -185px -215px; background-size: 480px 480px} span.ico_queue {background:url(/assets/img/color/iconset.svg) no-repeat -100px 0} .bar:hover span.ico_subtasks, a:hover span.ico_subtasks {background-position:-20px -180px} span.ico_subtasks2 {background:url(/assets/img/color/iconset.svg) no-repeat -20px -180px} span.ico_archive_up {background:url(/assets/img/color/iconset.svg) no-repeat 0 -400px} span.ico_archive_up2 {background:url(/assets/img/color/iconset.svg) no-repeat -40px -400px} span.ico_archive_dn {background:url(/assets/img/color/iconset.svg) no-repeat -60px -400px} .modal__dataTable-onCopy span.ico_attach {opacity:0.6} span.ico_inload {background:url(/assets/img/color/iconset.svg) no-repeat -20px -340px} span.ico_lock {background:url(/assets/img/color/iconset.svg) no-repeat 0 -260px} span.ico_lock5 {background:url(/assets/img/color/iconset.svg) no-repeat -81px -261px} span.ico_lock4 {background:url(/assets/img/color/iconset.svg) no-repeat -20px -260px} span.ico_lock8 {background:url(/assets/img/color/iconset.svg) no-repeat 0 -260px} span.ico_lock9, div.hid span.ico_lock5 {background:url(/assets/img/color/iconset.svg) no-repeat -60px -280px} span.ico_lock2 {background:url(/assets/img/color/iconset.svg) no-repeat -64px -261px; width:12px} span.ico_lock7 {background:url(/assets/img/color/iconset.svg) no-repeat -61px -262px} span.ico_lock3, .group_hid span.ico_lock {background:url(/assets/img/color/iconset.svg) no-repeat -40px -260px} span.ico_dload {background:url(/assets/img/color/iconset.svg) no-repeat -20px -380px} span.ico_dload_white {background: url(/assets/img/color/iconset.svg) no-repeat -20px -640px;} span.ico_report {background:url(/assets/img/color/iconset.svg) no-repeat -20px -620px} span.ico_dload_new, a.ico_dload_new {background:url(/assets/img/color/iconset.svg) no-repeat -20px -620px} span.ico_dload_new, a.ico_dload_new:hover, a:hover span.ico_report, a.selected span.ico_report {background:url(/assets/img/color/iconset.svg) no-repeat -20px -600px} span.ico_file, a.ico_file {background:url(/assets/img/color/iconset.svg) no-repeat -60px -380px} a.ico_file:hover {background:url(/assets/img/color/iconset.svg) no-repeat -20px -380px} a:hover span.ico_dload {background:url(/assets/img/color/iconset.svg) no-repeat -20px -380px} .user_list span.ico_star, span.ico_user_to {background:url(/assets/img/color/iconset.svg) no-repeat -40px -520px} span.ico_sort {background:url(/assets/img/color/iconset.svg) no-repeat -100px -80px} span.ico_star, span.ico_user_to_l {background:url(/assets/img/color/iconset.svg) no-repeat -60px -540px} span.ico_profile, a.ico_profile {background:url(/assets/img/color/iconset.svg) no-repeat -20px -800px} a:hover span.ico_profile, a.ico_profile:hover {background:url(/assets/img/color/iconset.svg) no-repeat -20px -820px} a.ico_subtask {background:url(/assets/img/color/iconset.svg) 0 -180px} span.ico_note {background:blue url(/assets/img/color/iconset.svg) no-repeat 0 -780px} span.ico_partner {background:url(/assets/img/color/iconset.svg) no-repeat -100px -820px} span.ico_help2 {background:url(/assets/img/color/iconset.svg) no-repeat 0 -800px} a:hover span.ico_help2 {background:url(/assets/img/color/iconset.svg) no-repeat 0 -820px} a.ico_i, span.ico_i {background: url(/assets/img/color/iconset.svg) no-repeat 0 0} span.ico_online, i.ico_online {} span.ico_online:before, i.ico_online:before {content:''; float:left; width:8px; height:8px; background:var(--base-btn-fresh-minor); border-radius:4px; margin:6px} span.ico_offline, i.ico_offline {background:url(/assets/img/color/iconset.svg) no-repeat -80px -800px} span.ico_invis {background:url(/assets/img/color/iconset.svg) no-repeat -80px -800px} span.ico_online_vis {background:url(/assets/img/color/iconset.svg) no-repeat -60px -720px} span.ico_online_invis {background:url(/assets/img/color/iconset.svg) no-repeat -80px -720px} a.ico_popup2, span.ico_popup2, span.ico_goin, span.ico_levelup, a.ico_levelup {background:url(/assets/img/color/iconset.svg) no-repeat 0 -620px;} span.ico_export {background:url(/assets/img/color/iconset.svg) no-repeat -20px -20px} span.ico_import {background:url(/assets/img/color/iconset.svg) no-repeat -40px -20px} a:hover span.ico_export {background:url(/assets/img/color/iconset.svg) no-repeat -20px -40px} a:hover span.ico_import {background:url(/assets/img/color/iconset.svg) no-repeat -40px -40px} a.ico_goto, span.ico_goto {background: url(/assets/img/color/iconset.svg) no-repeat -40px -640px;} a.ico_levelup {opacity:0.4} span.ico_levelupw {background:url(/assets/img/color/iconset.svg) no-repeat 0 -600px} a.ico_popup2:hover, a:hover span.ico_goin, a:hover span.ico_levelup, a.selected span.ico_levelup, a.ico_levelup_act, span.ico_levelup_act, a:hover span.ico_popup2 {background:url(/assets/img/color/iconset.svg) no-repeat 0 -640px; opacity:1} a.ico_close, span.ico_close {background:url(/assets/img/color/iconset.svg) no-repeat -40px -440px} a.ico_close:hover, a:hover span.ico_close {background:url(/assets/img/color/iconset.svg) no-repeat -60px -440px} a.ico_trash, span.ico_trash {background:url(/assets/img/color/iconset.svg) no-repeat -120px -460px; opacity:0.7} a.ico_trash:hover, a:hover span.ico_trash {opacity:1} a.ico_clear {background:url(/assets/img/color/iconset.svg) no-repeat -40px -440px} a.ico_clear:hover {background:url(/assets/img/color/iconset.svg) no-repeat -60px -440px} a.ico_close_load {background:url(/assets/img/color/iconset.svg) no-repeat -60px -440px} a.ico_esc_mass, .massPanel i:hover b {background:var(--base-hlt-alt-overlap) url(/assets/img/color/iconset.svg) no-repeat -40px -420px; border-radius:10px; box-shadow:0 0 0 2px var(--base-hlt-alt-overlap)} a.ico_esc_mass:hover {background:var(--base-hlt-alt-overlap) url(/assets/img/color/iconset.svg) no-repeat -80px -440px; border-radius:10px; box-shadow:0 0 0 5px var(--base-hlt-alt-overlap)} a.ico_dlink {background:url(/assets/img/color/iconset.svg) no-repeat -40px -660px} a.ico_dlink_act, a.ico_dlink:hover, span.ico_dlink {background:url(/assets/img/color/iconset.svg) no-repeat -20px -660px} span.ico_dn {background:url(/assets/img/color/iconset.svg) no-repeat -40px -80px} span.ico_rev {transform:rotate(180deg); -webkit-transform:rotate(180deg)} a.ico_version, span.ico_version {background:url(/assets/img/color/iconset.svg) no-repeat -20px -720px; cursor:pointer} a.ico_version *, span.ico_version * {cursor:pointer} a.ico_version:hover, span.ico_version:hover {background:url(/assets/img/color/iconset.svg) no-repeat -20px -640px} span.ico_info {background:url(/assets/img/color/notifier_iconset.svg) no-repeat 0 -20px / 180px 60px} span.ico_yes {background:url(/assets/img/color/notifier_iconset.svg) no-repeat 0 0 / 180px 60px} span.ico_warn {background:url(/assets/img/color/notifier_iconset.svg) no-repeat -20px 0 / 180px 60px} span.ico_no {background:url(/assets/img/color/notifier_iconset.svg) no-repeat -40px 0 / 180px 60px} span.ico_calendar {background:url(/assets/img/color/iconset.svg) no-repeat -100px -160px} span.ico_hover {background:none} a:hover span.ico_hover {background:url(/assets/img/color/iconset.svg) no-repeat -80px -184px} span.ico_it {background:url(/assets/img/color/iconset.svg) no-repeat -80px -180px} a.ico_view {background:url(/assets/img/color/iconset.svg) no-repeat 0 -400px} a.ico_view:hover {background:url(/assets/img/color/iconset.svg) no-repeat -20px -400px} a.ico_noview {background:url(/assets/img/color/iconset.svg) no-repeat -60px -400px} a.ico_noview:hover {background:url(/assets/img/color/iconset.svg) no-repeat -60px -360px} span.ico_reply_to, span.ico_reply_to2, span.ico_follow {background:url(/assets/img/color/iconset.svg) no-repeat -120px -1340px} span.ico_reply_from, span.ico_reply_from2 {background:url(/assets/img/color/iconset.svg) no-repeat -100px -1340px} a:hover span.ico_reply_to2, a:hover span.ico_reply_from {background-position:-100px -1360px} a:hover span.ico_reply_to, a:hover span.ico_reply_from2 {background-position:-120px -1360px} span.ico_reply, span.ico_expand_on4, span.ico_expand_on, span.ico_expand_on2, a.ico_expand_on {background:url(/assets/img/color/iconset.svg) no-repeat -120px -1360px} .reply a:hover span.ico_reply {background-position:-100px -1360px} span.ico_expand_on3 {display:none } span.ico_expand_off3, span.ico_expand_off, span.ico_expand_off2, a.ico_expand_off {background:url(/assets/img/color/iconset.svg) no-repeat -100px -1360px} span.ico_hot {background:url(/assets/img/color/iconset.svg) no-repeat -60px -920px} span.ico_tick {background:url(/assets/img/color/iconset.svg) no-repeat 0 -1260px; cursor:pointer} span.ico_user_yes {background:url(/assets/img/color/iconset.svg) no-repeat 0 -1140px; cursor:pointer} span.ico_activity3 {background:url(/assets/img/color/iconset.svg) no-repeat -60px -1060px; cursor:pointer} span.ico_activity4 {background:url(/assets/img/color/iconset.svg) -80px -160px; cursor:pointer} span.ico_activity5 {background:url(/assets/img/color/iconset.svg) -60px -1060px; cursor:pointer; opacity:0.5} .last_projects span.ico_activity3:hover {background:url(/assets/img/color/iconset.svg) no-repeat -60px -1080px} span.ico_activity4:hover {background:url(/assets/img/color/iconset.svg) no-repeat -60px -1040px} span.ico_activity2 {background:url(/assets/img/color/iconset.svg) no-repeat -20px -720px} span.ico_activity {background:url(/assets/img/color/iconset.svg) no-repeat 0 -440px} span.ico_project {background:url(/assets/img/color/iconset.svg) no-repeat 0 -340px} a:hover span.ico_project {background-position: 0 -380px} span.ico_project2 {background:url(/assets/img/color/iconset.svg) no-repeat 0 -380px} a.ico_project {background:url(/assets/img/color/iconset.svg) no-repeat 0 -360px} span.ico_location {background:url(/assets/img/color/iconset.svg) no-repeat -80px -760px} span.ico_url {background:url(/assets/img/color/iconset.svg) no-repeat -40px -740px} span.ico_ap, a.ico_ap {background:url(/assets/img/color/iconset.svg) no-repeat -20px -880px} span.ico_fb, a.ico_fb {background:url(/assets/img/color/iconset.svg) no-repeat 0 -740px} span.ico_tw, a.ico_tw {background:url(/assets/img/color/iconset.svg) no-repeat -20px -740px} span.ico_gp, a.ico_gp {background:url(/assets/img/color/iconset.svg) no-repeat -80px -780px} a.ico_fb:hover {background:url(/assets/img/color/iconset.svg) no-repeat 0 -860px} a.ico_gp:hover {background:url(/assets/img/color/iconset.svg) no-repeat -80px -860px} span.ico_bday_, span.ico_bday {background:url(/assets/img/color/iconset.svg) no-repeat -80px -660px} span.ico_bday_desat, ws-icon.ico_bday_desat svg {filter:grayscale(1); opacity:0.5} span.ico_email {background:url(/assets/img/color/iconset.svg) no-repeat -100px -760px} span.ico_email_req {background:url(/assets/img/color/iconset.svg) no-repeat -120px -760px} span.ico_phone {background:url(/assets/img/color/iconset.svg) no-repeat -20px -760px} span.ico_fax {background:url(/assets/img/color/iconset.svg) no-repeat -40px -760px} span.ico_phone_home {background:url(/assets/img/color/iconset.svg) no-repeat -60px -760px} span.ico_mobile {background:url(/assets/img/color/iconset.svg) no-repeat 0 -760px} span.ico_service {background:url(/assets/img/color/iconset.svg) no-repeat -80px -740px} span.ico_labels {background:url(/assets/img/color/iconset.svg) no-repeat -100px -780px} a.ico_text, span.ico_text {background:url(/assets/img/color/iconset.svg) no-repeat -40px -180px} span.ico_text2 {background:url(/assets/img/color/iconset.svg) no-repeat -40px -180px} a.ico_text:hover, a:hover span.ico_text, span.ico_text_act {background:url(/assets/img/color/iconset.svg) no-repeat -60px -180px} span.ico_text_act {background:url(/assets/img/color/ws_emoji_new.svg) no-repeat -455px -156px; background-size: 480px 480px} span.ico_add {background:url(/assets/img/color/iconset.svg) no-repeat -40px -340px} a:hover span.ico_add {background:url(/assets/img/color/iconset.svg) no-repeat -60px -340px} span.ico_add3, a.ico_add4, a.ico_plus .ico_plus_blue2, span.ico_plus .ico_plus_blue2, span.ico_add6 {background:url(/assets/img/color/iconset.svg) no-repeat -80px -400px} a:hover span.ico_add3, span.ico_add4, a.ico_add4:hover {background:url(/assets/img/color/iconset.svg) no-repeat -100px -400px} a.ico_plus .ico_plus_blue2:hover, a:hover span.ico_plus .ico_plus_blue2 {background:url(/assets/img/color/iconset.svg) no-repeat -100px -400px} span.ico_add2 {background:url(/assets/img/color/iconset.svg) no-repeat -80px -340px} a:hover span.ico_add2 {background:url(/assets/img/color/iconset.svg) no-repeat -100px -340px} span.ico_tag, i.ico_tag , a.ico_tag {background:url(/assets/img/color/ws_emoji_new.svg) no-repeat -425px -214px; background-size: 480px 480px; transform:rotate(90deg)} a:hover span.ico_tag, a:hover i.ico_tag , a.ico_tag:hover, span.ico_tag_act {background-position:-455px -214px} span.ico_tag_act {transform:none} .dataadd .links i.ico_tag {background-position:-455px -214px; transform:none;} span.ico_tag2 {background:url(/assets/img/color/iconset.svg) no-repeat -100px -780px} span.ico_change {background:url(/assets/img/color/iconset.svg) no-repeat 0 -1000px} span.ico_rate {background:url(/assets/img/color/iconset.svg) no-repeat -100px -920px} span.ico_condition {background:url(/assets/img/color/iconset.svg) no-repeat -80px -920px} span.ico_redo {background:url(/assets/img/color/iconset.svg) no-repeat -120px -880px} a:hover span.ico_redo {background:url(/assets/img/color/iconset.svg) no-repeat -120px -900px} span.ico_created {background:url(/assets/img/color/iconset.svg) no-repeat -120px -360px} span.ico_deleted, a.ico_deleted {background:url(/assets/img/color/iconset.svg) no-repeat -100px -460px} span.ico_project_from {background:url(/assets/img/color/iconset.svg) no-repeat -20px -1000px} span.ico_project_to {background:url(/assets/img/color/iconset.svg) no-repeat -40px -1000px} span.ico_move {background:url(/assets/img/color/iconset.svg) no-repeat -60px -1000px} span.ico_prior {background:url(/assets/img/color/iconset.svg) no-repeat -100px -80px} span.ico_filter {background:url(/assets/img/color/iconset.svg) no-repeat -80px -880px;} a:hover span.ico_filter {background:url(/assets/img/color/iconset.svg) no-repeat -100px -900px} span.ico_filter2, a.ico_filter2 {background:url(/assets/img/color/iconset.svg) no-repeat -80px -880px} span.ico_much10, span.ico_much20 {background:url(/assets/img/color/iconset.svg) no-repeat -80px -1020px} span.ico_much11, span.ico_much21 {background:url(/assets/img/color/iconset.svg) no-repeat -40px -1020px} span.ico_much12 {background:url(/assets/img/color/iconset.svg) no-repeat -60px -1020px} span.ico_much22 {background:url(/assets/img/color/iconset.svg) no-repeat -20px -1020px} span.ico_new {width:12px;} span.ico_new:before, i.ico_new:before {content:'';float:left;width:8px;height:8px;background: var(--colors-lime-500);border-radius:4px;margin:6px 2px;} span.ico_sel_fav {background:url(/assets/img/color/iconset.svg) 0 -1040px} span.ico_sel_fav2 {background:url(/assets/img/color/iconset.svg) 0 -1020px} span.ico_sel_file {background:url(/assets/img/color/iconset.svg) -40px -1040px} span.ico_sel_todo {background:url(/assets/img/color/iconset.svg) -20px -1040px} span.ico_sel_invite {background:url(/assets/img/color/iconset.svg) -80px -1040px} span.ico_sel_massdo {background:url(/assets/img/color/iconset.svg) no-repeat -40px -1300px;} span.ico_my_proj {} span.ico_my_proj:before {content:''; float:left; width:8px; height:8px; background:var(--lbl-today-major); border-radius:4px; margin:6px} span.ico_notmy_proj {background:url(/assets/img/color/iconset.svg) -60px -1040px; opacity:0.5} span.ico_notmy {background:url(/assets/img/color/iconset.svg) -60px -1040px} span.ico_notmy_big {background:url(/assets/img/color/iconset.svg) -90px -1560px; background-size: 700% 8000%; width:30px; height:30px;} h1 span.ico_notmy, .user_tasks .item .td_name .ico_notmy, .header .ico_notmy {transform:scale(1.5); opacity:0.8} span.ico_task_many {background:url(/assets/img/color/iconset.svg) -120px -1220px} span.ico_task_single {background:url(/assets/img/color/iconset.svg) -120px -1240px} span.ico_newdoc, a.ico_newdoc {background:url(/assets/img/color/wysiwyg_iconset_new.svg) no-repeat -480px 0} a:hover span.ico_newdoc, a.ico_newdoc:hover {background-position:-480px -20px} span.ico_gdrive, a.ico_gdrive, span.ico_gdrive2 {background:url(/assets/img/color/wysiwyg_iconset_new.svg) no-repeat -460px 0} a:hover span.ico_gdrive, a.ico_gdrive:hover, .ext span.ico_gdrive, span.ico_gdrive2, button:hover .ico_gdrive {background-position:-460px -20px} span.ico_gedit, a.ico_gedit {background:url(/assets/img/color/iconset.svg) no-repeat -20px -480px} .ext_xlsx span.ico_gedit {filter: hue-rotate(-125deg);opacity: 0.8;} .ext_pptx span.ico_gedit {filter: hue-rotate(200deg);opacity: 0.8;} a:hover span.ico_gedit, a.ico_gedit:hover, .ext:hover span.ico_gedit {background-position:-40px -480px; opacity:1} span.ico_attach, a.ico_attach {background:url(/assets/img/color/wysiwyg_iconset_new.svg) no-repeat -440px 0} a.ico_attach:hover, a:hover span.ico_attach {background-position:-440px -20px} .file_links span.ico_newdoc, .file_links span.ico_gdrive {opacity:0.7;} .file_links a:hover span.ico_newdoc, .file_links a:hover span.ico_gdrive {opacity:1;} span.av_sm.ico_no_manager {border:2px solid transparent; width:20px; height:20px; background:url(/assets/img/color/iconset.svg) no-repeat -40px -540px} span.av_sm.ico_no_assignee {border:2px solid transparent; width:20px; height:20px; background:url(/assets/img/color/iconset.svg) no-repeat -80px -560px} .ico_edited {background:url(/assets/img/color/iconset.svg) no-repeat -64px -680px; width:12px !important;} .ico_comm_nb {background:url(/assets/img/color/iconset.svg) no-repeat -100px -1260px} .ico_comm_nt {background:url(/assets/img/color/iconset.svg) no-repeat -120px -1260px} .ico_folder {background:url(/assets/img/color/iconset.svg) no-repeat 0 -60px} .ico_folder_company {background:url(/assets/img/color/iconset.svg) no-repeat -40px -60px} .ico_folder_company_my {background:url(/assets/img/color/iconset.svg) no-repeat -60px -60px} .ico_folder_white {background:url(/assets/img/color/iconset.svg) no-repeat -80px -60px} .ico_collapse {background:url(/assets/img/color/iconset.svg) no-repeat -20px -1340px} .ico_expand {background:url(/assets/img/color/iconset.svg) no-repeat -20px -1380px} a.favs {float:left; width:20px; height:20px; background:url(/assets/img/color/iconset.svg) -80px -140px; margin:10px 0 0 15px} a.favs:hover {background:url(/assets/img/color/iconset.svg) -60px -140px} a.favs_act {background:url(/assets/img/color/iconset.svg) -40px -140px} a.favs_act:hover {background:url(/assets/img/color/iconset.svg) -60px -140px} span.repeat_ico, a.repeat_ico { background:url(/assets/img/color/iconset.svg) no-repeat -21px -681px; font:bold 10px/13px var(--font-base) !important; color:var(--white-accent); padding:2px 14px 2px 1px; } a.repeat_ico:hover { background-position:-41px -681px} a.ico_repeat { background:url(/assets/img/color/iconset.svg) no-repeat -20px -681px} span.ico_repeat, a.ico_repeat_act, a.ico_repeat:hover { background:url(/assets/img/color/iconset.svg) no-repeat -40px -681px} span.ico_repeat_err, a.ico_repeat_err { background:url(/assets/img/color/iconset.svg) no-repeat 0 -681px} span.ico_shift_r {background:url(/assets/img/color/iconset.svg) no-repeat -80px -1220px;} span.ico_shift_l {background:url(/assets/img/color/iconset.svg) no-repeat -60px -1220px;} a:hover span.ico_shift_r {background:url(/assets/img/color/iconset.svg) no-repeat -80px -1240px;} a:hover span.ico_shift_l {background:url(/assets/img/color/iconset.svg) no-repeat -60px -1240px;} span.ico_lang1 {background:url(/assets/img/color/iconset.svg) no-repeat -60px -960px} span.ico_lang2 {background:url(/assets/img/color/iconset.svg) no-repeat 0 -960px} span.ico_lang4 {background:url(/assets/img/color/iconset.svg) no-repeat -40px -960px} span.ico_lang5 {background:url(/assets/img/color/iconset.svg) no-repeat -80px -960px} span.ico_lang6 {background:url(/assets/img/color/iconset.svg) no-repeat -20px -960px} span.ico_lang7 {background:url(/assets/img/color/iconset.svg) no-repeat -100px -960px} span.ico_lang8 {background:url(/assets/img/color/iconset.svg) no-repeat -120px -960px} span.ico_lang9 {background:url(/assets/img/color/iconset.svg) no-repeat -20px -980px} span.ico_lang11 {background:url(/assets/img/color/iconset.svg) no-repeat -40px -980px} .ico_to {background:url(/assets/img/color/iconset.svg) no-repeat 0 -1200px} .do_file_link:hover a.ico_file {background:url(/assets/img/color/iconset.svg) -21px -400px} .dataadd a.hidden span.ico_lock {background:url(/assets/img/color/iconset.svg) no-repeat -60px -300px} .dataadd a.hidden_act span.ico_lock {background:url(/assets/img/color/iconset.svg) no-repeat -20px -260px} body.desktop .dataadd a.hidden:hover span.ico_lock {background:url(/assets/img/color/iconset.svg) no-repeat -20px -260px} body.desktop .dataadd a.hidden_act:hover span.ico_lock {background:url(/assets/img/color/iconset.svg) no-repeat -40px -300px} .ico_pre_alarm {background:url(/assets/img/color/iconset.svg) no-repeat -40px -1180px} .ico_alarm {background:url(/assets/img/color/iconset.svg) no-repeat -60px -1140px} span.ico_act {background:url(/assets/img/color/iconset.svg) no-repeat 0 -1220px} span.ico_act_red {background: url(/assets/img/color/iconset.svg) no-repeat 0 -1180px;} span.ico_subs_list:before, a.ico_subs_list:before {content:''; display:block; width:20px; height:20px; background:url(/assets/img/color/iconset.svg) no-repeat -60px -1120px; } /*.place_empty span.ico_subs_list {background:url(/img/color/iconset.svg) no-repeat -60px -1180px}*/ span.ico_subs_list2, a.ico_subs_list2 {background:url(/assets/img/color/iconset.svg) no-repeat -60px -1120px} .ev_tabs span.ico_subs_list2:hover {background:url(/assets/img/color/iconset.svg) no-repeat -20px -1120px} .ico_subs {background:url(/assets/img/color/iconset.svg) no-repeat -40px -1180px} span.ico_subs2 {background:url(/assets/img/color/iconset.svg) no-repeat -80px -1160px} .ico_subs_off {background:url(/assets/img/color/iconset.svg) no-repeat -60px -1180px} a.ico_subs_off:hover {background:url(/assets/img/color/iconset.svg) no-repeat -80px -1140px} .ico_subs_on {background:url(/assets/img/color/iconset.svg) no-repeat -60px -1140px} .log:hover a.ico_subs_off {background-color:var(--base-hlt-hover); border-radius:20px; box-shadow: 0 0 0 2px var(--base-hlt-hover)} .ev_tabs .ico_subs_off {opacity:0.6} .ev_tabs .ico_subs_off:hover {opacity:1} span.ico_priv {background:url(/assets/img/color/iconset.svg) no-repeat -100px -1160px} #modfiles .fileItem:hover .ico_priv, #modfiles .fileItem.pre_act .ico_priv {background:url(/assets/img/color/iconset.svg) no-repeat -120px -1160px;border-radius:20px;margin: -2px 0 -2px 0;} span.ico_priv_my {background:url(/assets/img/color/iconset.svg) no-repeat -100px -1140px} span.ico_gpriv, .group_hid label:hover span.ico_gpriv {background:url(/assets/img/color/iconset.svg) no-repeat -100px -1140px} span.ico_publ, .group_hid span.ico_gpriv, label:hover span.ico_gpriv {background:url(/assets/img/color/iconset.svg) no-repeat -120px -1160px} span.ico_subs_hint {background:url(/assets/img/color/iconset.svg) no-repeat 0 -1120px; display:none; font:11px/20px var(--font-base); color:var(--base-txt-tertiary); text-align:right} span.ico_check {background:url(/assets/img/color/iconset.svg) no-repeat -20px -1320px} a:hover span.ico_check {background:url(/assets/img/color/iconset.svg) no-repeat -40px -1320px} span.ico_checked {background:url(/assets/img/color/iconset.svg) no-repeat -40px -1320px} a:hover span.ico_checked {background:url(/assets/img/color/iconset.svg) no-repeat -20px -1300px} span.ico_act_sm {background:url(/assets/img/color/iconset.svg) no-repeat -40px -1320px} span.ico_act_sm2 {background:url(/assets/img/color/iconset.svg) no-repeat 0 -1320px} a.ani_on span.ico_act_sm {background:url(/assets/img/color/iconset.svg) no-repeat 0 -1320px} .ico_task_done {background: url(/assets/img/color/iconset.svg) no-repeat -20px -180px; transform:scale(0.85)} .ico_task_add {background: url(/assets/img/color/iconset.svg) no-repeat -20px -1180px;} a.selected .ico_task_add {background:url(/assets/img/color/iconset.svg) no-repeat -20px -1180px} .ico_newtask {background:url(/assets/img/color/iconset.svg) no-repeat -20px -1240px} .ico_newtask1 {background:url(/assets/img/color/iconset.svg) no-repeat -20px -1220px; opacity:0; transition:opacity 0.1s ease, transform 0.3s ease 0.2s; -webkit-transition:opacity 0.1s ease, -webkit-transform 0.3s ease 0.2s;} .ico_newtask2 {background:url(/assets/img/color/iconset.svg) no-repeat -20px -1200px; opacity:0; transition:opacity 0.1s ease 0.2s; -webkit-transition:opacity 0.1s ease 0.2s;} .ico_alert_new {background: url(/assets/img/color/iconset.svg) no-repeat 0 -20px;} .ico_qr {background:url(/assets/img/color/iconset.svg) no-repeat -120px 0} span.ico_qr_big {background:url(/assets/img/color/iconset.svg) no-repeat -180px 0 / 210px 2400px; width:30px; height:30px; transform:scale(0.8)} /*---------------------------------------------------------------------------------------------------------*/ span.ico_vt0, a.ico_vt0 {background:url(/assets/img/color/view_types.svg) -26px -182px no-repeat; width:26px; height:26px; margin:-3px; opacity:0.7} span.ico_vt1, a.ico_vt1 {background:url(/assets/img/color/view_types.svg) 0 -182px no-repeat; width:26px; height:26px; margin:-3px; opacity:0.7} span.ico_vt0_, a.ico_vt0_ {background:url(/assets/img/color/view_types.svg) -26px -364px no-repeat; width:26px; height:26px; margin:-3px;} span.ico_vt1_, a.ico_vt1_ {background:url(/assets/img/color/view_types.svg) 0 -364px no-repeat; width:26px; height:26px; margin:-3px;} span.ico_vt2 {background:url(/assets/img/color/view_types.svg) 0 0 no-repeat; width:26px; height:26px; margin:-3px; opacity:0.7} span.ico_vt3 {background:url(/assets/img/color/view_types.svg) -26px 0 no-repeat; width:26px; height:26px; margin:-3px; opacity:0.7} span.ico_vt2_ {background:url(/assets/img/color/view_types.svg) -52px -364px no-repeat; width:26px; height:26px; margin:-3px; opacity:0.7} span.ico_vt3_ {background:url(/assets/img/color/view_types.svg) -78px -364px no-repeat; width:26px; height:26px; margin:-3px; opacity:0.7} span.ico_vt4 {background:url(/assets/img/color/view_types.svg) -26px -337px no-repeat; width:26px; height:26px; margin:-3px; opacity:0.7} span.ico_vt5 {background:url(/assets/img/color/view_types.svg) -26px -312px no-repeat; width:26px; height:26px; margin:-3px; opacity:0.7} .filt span.ico_vt0, a.act span.ico_vt0, a.selected span.ico_vt0, a:hover span.ico_vt0 {background-position:-26px -208px; opacity:1} .filt span.ico_vt1, a.act span.ico_vt1, a.selected span.ico_vt1, a:hover span.ico_vt1 {background-position:0 -208px; opacity:1} .filt span.ico_vt2, a.act span.ico_vt2, a.selected span.ico_vt2, a:hover span.ico_vt2 {background-position:0 -26px; opacity:1} .filt span.ico_vt3, a.act span.ico_vt3, a.selected span.ico_vt3, a:hover span.ico_vt3 {background-position:-26px -26px; opacity:1} .filt span.ico_vt4, a.act span.ico_vt4, a.selected span.ico_vt4, a:hover span.ico_vt4 {background-position:0 -337px; opacity:1} .filt span.ico_vt5, a.act span.ico_vt5, a.selected span.ico_vt5, a:hover span.ico_vt5 {background-position:0 -312px; opacity:1} span.ico_vt10 {background:url(/assets/img/color/view_types.svg) -78px 0 no-repeat; width:26px; height:26px; margin:-3px} span.ico_vt11 {background:url(/assets/img/color/view_types.svg) -78px -26px no-repeat; width:26px; height:26px; margin:-3px} span.ico_vt12 {background:url(/assets/img/color/view_types.svg) -78px -52px no-repeat; width:26px; height:26px; margin:-3px} span.ico_vt13 {background:url(/assets/img/color/view_types.svg) -78px -78px no-repeat; width:26px; height:26px; margin:-3px} span.ico_vt14 {background:url(/assets/img/color/view_types.svg) -78px -104px no-repeat; width:26px; height:26px; margin:-3px} span.ico_vt15 {background:url(/assets/img/color/view_types.svg) -78px -311px no-repeat; width:26px; height:26px; margin:-3px} span.ico_vt16 {background:url(/assets/img/color/view_types.svg) -78px -338px no-repeat; width:26px; height:26px; margin:-3px} span.ico_l.ico_vt16 {margin:-3px 7px -3px -3px} span.ico_vt17 {background:url(/assets/img/color/view_types.svg) -26px -311px no-repeat; width:26px; height:26px; margin:-3px} span.ico_vt18 {background:url(/assets/img/color/view_types.svg) -78px -287px no-repeat; width:26px; height:26px; margin:-3px} span.ico_vt10_ {background:url(/assets/img/color/view_types.svg) -52px -130px no-repeat; width:26px; height:26px; margin:-3px} span.ico_vt11_ {background:url(/assets/img/color/view_types.svg) -52px -156px no-repeat; width:26px; height:26px; margin:-3px} span.ico_vt12_ {background:url(/assets/img/color/view_types.svg) -52px -182px no-repeat; width:26px; height:26px; margin:-3px} span.ico_vt13_ {background:url(/assets/img/color/view_types.svg) -52px -208px no-repeat; width:26px; height:26px; margin:-3px} span.ico_vt14_ {background:url(/assets/img/color/view_types.svg) -52px -234px no-repeat; width:26px; height:26px; margin:-3px} .filt span.ico_vt10, a:hover span.ico_vt10, a.selected span.ico_vt10{background-position:-52px 0} .filt span.ico_vt11, a:hover span.ico_vt11, a.selected span.ico_vt11{background-position:-52px -26px} .filt span.ico_vt12, a:hover span.ico_vt12, a.selected span.ico_vt12{background-position:-52px -52px} .filt span.ico_vt13, a:hover span.ico_vt13, a.selected span.ico_vt13{background-position:-52px -78px} .filt span.ico_vt14, a:hover span.ico_vt14, a.selected span.ico_vt14{background-position:-52px -104px} .filt span.ico_vt15, a:hover span.ico_vt15, a.selected span.ico_vt15{background-position:-52px -311px} .filt span.ico_vt16, a:hover span.ico_vt16, a.selected span.ico_vt16{background-position:-52px -338px} .filt span.ico_vt17, a:hover span.ico_vt17, a.selected span.ico_vt17{background-position:0 -311px} .filt span.ico_vt18, a:hover span.ico_vt18, a.selected span.ico_vt18{background-position:-52px -287px} /*---------------------------------------------------------------------------------------------------------*/ .ico_relate, .ico_relate_del, .ico_relate_from {position:relative} .ico_relate:before, .ico_relate_from:before {content:'';position:absolute;border:1px solid var(--base-txt-secondary);width:5px;height:5px;top: 6px;left:6px;transform:rotate(45deg);} .ico_relate_del:before { content:''; position: absolute; width: 6px; height: 1px; left: 5px; top: 5px; transform:none; background: var(--white-accent); border: 4px solid var(--base-btn-alert-primary-major); border-width: 4.5px 2px; border-radius: 2px; } .ico_relate_from:before {border-color:var(--base-txt-secondary) var(--base-txt-secondary) transparent transparent} .ico_drop {background:url(/assets/img/color/ws_emoji_new.svg) no-repeat -365px -95px; background-size: 480px 480px} .ico_menu_usr2 {background:url(/assets/img/color/iconset.svg) repeat scroll -80px -520px} .ico_add_user {background:url(/assets/img/color/iconset.svg) repeat scroll -80px -540px} .ico_add_user_act {background:url(/assets/img/color/iconset.svg) repeat scroll -80px -560px} span.ico_alert {background:url(/assets/img/color/pay_iconset.svg) no-repeat -128px -8px; width:25px; height:25px; margin:-5px 5px -2px 0} span.ico_alert_sm {background:url(/assets/img/color/notifier_iconset.svg) no-repeat -20px 0 / 180px 60px} span.ico_ws_big {background:url(/assets/img/addpeople_iconset.png) 0 -180px; width:60px; height:60px; margin:0 10px 0 0} .ico_ava {padding:2px;display: inline-block;} .ico_ava + .av_sm {display:none} .ico_ava span + span {display:none} .ico_ava ws-icon + ws-icon {display:none} .ico_ava .ico_r,.ico_ava .ico_l {margin:0} span.ico_ok {width:30px; height:30px; background:url(/assets/img/color/notifier_iconset.svg) no-repeat 0 0 / 270px 90px; margin:-5px 5px -2px 0} span.ico_pass {background: url(/assets/img/color/pro_iconset_sm.svg) no-repeat -3px -178px;cursor:pointer; opacity: 0.6;} span.ico_pass_on {background-position: -28px -178px;} .ico_clipboard_gray_sm {background:url(/assets/img/color/iconset.svg) no-repeat 0 -460px; } .ico_clipboard_blue_sm {background: url(/assets/img/color/iconset.svg) no-repeat -20px -460px; } .ico_flag { width: 16px; height: 16px; padding: 1px; border: 1px solid var(--base-line-secondary); border-radius: 4px;} .ico_flag ~ .ip_addr {} span.ico_user_no[onclick] {cursor:pointer} ws-icon.desat svg {filter:grayscale(1);opacity:0.5;}.modal__content #inv_buts, .modal[data-group=invite] .modal__content .buttons { height: auto; text-align: center; font: 14px/20px var(--font-base); } .modal[data-group=invite] .modal__content .buttons .button_big { margin: 0 auto 16px; width: 240px; } .modal[data-group=invite] .modal__content .buttons .button_big.button_white { width: 120px; border-radius: 20px; } .modal[data-group=invite] .modal__content #inv_buts { } .modal[data-group=invite] .modal__content #inv_buts .button_big { width: 390px; margin: 16px auto; } .modal[data-group=invite] .modal__content .buttons a.inline { border-bottom-width: 0; font-size: 12px; } #invite { font: 14px/20px var(--font-base); } #invite .projects_contact { font: italic 13px/20px var(--font-serif); color: var(--base-txt-tertiary); margin: 0 0 15px; display: none } #invite.inv_contact .projects_contact { display: block } #invite.inv_contact .projects, #invite.inv_contact .projects_txt, #invite.inv_contact .text { display: none } #invite p.more { font: 13px/20px var(--font-base); color: var(--base-txt-tertiary); padding-right: 24px; } #invite div.more { border: 1px solid var(--menu-inp-brd); background: var(--menu-inp-cont); padding-right: 20px; margin: 0 0 15px 0; display: none } #invite div.more textarea { width: 100%; font: 14px/20px var(--font-base); border-width: 0; border-bottom: 1px solid var(--menu-inp-brd); padding: 5px 10px; height: 80px; resize: vertical; background: transparent; } #invite div.more .buts { height: 32px; padding: 10px 15px; margin: 0 -20px 0 0 } #invite div.more .buts .button_r { float: right; margin: 0 0 0 12px; } #invite.inv_more { margin-bottom: 40px } #invite.inv_more div.more { display: block } #invite.inv_more p.more, #invite.inv_more p.text { display: none } #inv_buts.inv_more { display: none !important } #inv_buts p.task_email { padding: 0 } #invite p { color: var(--base-txt-secondary) } #invite p a { font-weight: bold } #invite p b { color: var(--base-txt-primary) } #invite .projects_txt { font: 13px/20px var(--font-base) } #invite .focus { } #invite p.text { font: italic 14px/20px var(--font-serif); color: var(--base-txt-tertiary); border-top: 1px solid var(--base-line-alt-gap-minor); padding: 15px 0 0 0 } #invite p.text_inp { padding-right: 20px; } #invite p.text textarea { width: 100%; padding: 8px; resize: vertical; font: 14px/20px var(--font-base); height: 60px; background: var(--menu-inp-cont); border: 1px solid var(--menu-inp-brd); } #invite_group { /* font: 13px/20px var(--font-base); */ /* text-align: left; */ /* color: var(--base-txt-secondary); */ } #invite_group div.m, #invite_group div.l { float: left; width: 200px; } #invite_group div.r { float: right; width: 200px; } #invite_group a.drop_select span.r { background: var(--inp-hlt-bg) } #invite_group .r .drop_select_gray, #invite #invite_group .drop_select_gray { } #invite_group .r .drop_select_gray span.drop, #invite #invite_group .drop_select_gray span.drop { background-color: var(--base-cont-mod-low); border-color: var(--base-cont-mod-low); } #invite #invite_group div.m, #invite #invite_group div.l { width: 180px; margin: 0 30px 0 0; } #invite #invite_group div.r { width: 180px; } #invite_group.invite_contact div.l { } #invite_group.invite_contact div.r { display: none } #invite_link { width: 390px; margin: 0 auto 20px; font: var(--font-ui-15-large-reg); text-align: center; } #invite_link input { width: 100%; box-sizing: border-box; text-align: left; padding: 15px 15px; background: var(--base-hlt-easy); border-radius: 8px; border: 1px solid var(--base-hlt-selected); margin: 16px 0; } #invite_link .ico_c { margin: 30px auto -20px; transform: scale(2); } #invite_link img { display: block; margin: 0 auto; width: 200px; height: 200px; } #invite_link .inputBlock__qrCaption { display: block; margin-top: 10px; font: var(--font-ui-13-small-reg); font-family: var(--font-mono); } #invite_link a.deleted span { display: none; color: var(--base-txt-tertiary) } #invite_link a.deleted { color: var(--base-txt-tertiary); cursor: text } @media print { #invite_link a, #invite_link input, #invite_link .ico_c { display: none } #invite_link img { transform: scale(3); margin: 200px 0 } } .modal .only_inv_link, .modal .only_inv_email { display: none } .modal .inv_link .no_inv_link { display: none } .modal .inv_link .only_inv_link { display: inline-block } .modal .inv_link div.only_inv_link { display: block } #invite .ico_qr { margin: 4px; } .modal #invite_group { /* margin:0 -9px 12px; */ } #invite .editBlock__picker { margin: 10px 0 16px; } @media (max-width: 640px) { #invite #invite_group div.m { float:none; width: auto; margin: 0; } #invite #invite_group { height: 180px; } #invite #invite_group div.l, #invite #invite_group div.r { width: 47%; margin: 0; } } @media (max-width: 480px) { #invite { width:auto; margin: 0; max-height: 100%; } #invite .editBlock__picker-inline, #invite .editBlock__picker-fake { /* flex-shrink: 1; */ min-height: 78px; .editBlock__picker__body.scrollZone { max-height: unset; } } #invite_group { height: auto; width: auto; } #invite_group div.l, #invite_group div.r { float: none; width: auto } #invite #invite_group div.l, #invite #invite_group div.r, #invite #invite_group div.m { float: none; width: auto; margin: 0; } #invite #invite_group { flex-direction: column; gap: 0; height: auto; } #invite #invite_group div.r font { opacity: 1 !important } #invite .inputBlock { width: 100%; } #invite .editBlock__picker-emails { order: -1; margin-bottom: 8px; } #invite .editBlock__picker .vcard { display: none !important; } #invite .editBlock__bigSwitch { height: 56px; border-radius: 12px; } #invite p.more { display: none } .modal[data-group=invite] .modal__content #inv_buts .button_big { width: 200px; } .modal[data-group=invite] .modal__content .buttons ws-btn { width: 100%; } #invite_link { width: unset; margin: 0 0 20px; padding: 12px; } #invite_link ws-btn { max-width: 100%; } } #inv_rolemenu .menu__item-disabled { pointer-events: unset; /* cause has info icon inside */ } .modal[data-group=invite] .modal__header > .in { padding-left: 0; }div.gray_dialog {background: var(--base-surf-top); margin: -10px -15px -15px -15px; padding: 10px 15px 15px 15px;} input.input_ip { font: 14px/20px var(--font-mono); box-sizing: border-box; } input.input_ip::-webkit-input-placeholder { font-style: normal; } input.input_ip:-moz-placeholder { font-style: normal; } input.input_ip::-moz-placeholder { font-style: normal; } input.input_ip:-ms-input-placeholder { font-style: normal; } .right_box { display: flex; align-items: center; justify-content: flex-end; color: var(--base-txt-tertiary); font: var(--font-ui-11-micro-reg); } .right_box > :first-child { margin-right: 5px; } .left_box { width: 50%; display: flex; align-items: center; justify-content: left; float: left; margin-top: 10px; min-height: 32px; } .menu .row_hover a.copy.strike { background: none !important; } .menu .row_hover a.copy { max-width: calc(100% - 46px); } .menu .row_hover a.copy span.ico { opacity: 0; transition: .3s; } .menu .row_hover a.copy:hover > span.ico, .menu .row_hover a.copy.selected > span.ico { opacity: 0.7; } .right_box .ico_flag { margin-right: 4px; margin-left: 8px; } .menu .row_hover .ico_flag { margin-right: 8px; transform: scale(0.8) } .menu .row_hover .del { display: inline-block; padding: 4px 6px; } body.desktop .menu .row_hover .del { opacity: 0; transition: 0.3s; } body.desktop .menu .row_hover:hover .del { opacity: 1 } .strike { text-decoration: line-through; color: var(--base-txt-alert-minor) !important; } .control_box-wrapper { /* padding: 0 24px; */ } .control_box { display: flex; flex-direction: row; align-items: center; border-radius: 8px; } .control_box:hover { background: var(--base-hlt-easy); } .control_box > ws-icon { padding: 8px; } .control_box > ws-icon[name=input-circle-solid-check] svg { fill: var(--base-txt-new-major); } .control_box > ws-icon[name=spark] svg { fill: var(--base-txt-btn-a); } .ip_addr { font: 14px/20px var(--font-mono); color: var(--base-txt-primary); } .control_box .ip_addr { padding: 4px 6px; flex-grow: 1; } .control_box .control_text { padding: 2px 6px; font: 14px/20px var(--font-mono); font-weight: 500; } .control_box .ava { white-space:nowrap; } .control_box .ava .av_sm { margin: 0 -2px 0 0; box-shadow:0 0 0 2px var(--base-cont-top); float:left; } .control_box .ava span {display: inline-block; position: relative; vertical-align: top;} .control_box .ava span.more { margin: 0 5px 0 0; height:24px; text-align: center; font: 12px/24px var(--font-base); border-radius: 24px; background: var(--base-hlt-g-hover); color: var(--colorize-lbl-txt-primary); padding: 0 6px; border: none; } .control_box-wrapper .control_box-line { width: 100%; height: 4px; border-top: 0.5px solid var(--base-txt-ghost); margin: 8px 0 0 0; } .membersList { overflow: hidden; } .membersList-search .membersList__group__title, .membersList-search .membersList__subGroup, .membersList-search .membersList__spacer { display: none !important; } .membersList__menu { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; padding: 24px 28px 14px ; gap: 12px; } .membersList__menu__search { flex-grow: 3 } .membersList__menu__search .searchInput { margin: 0; } .membersList__menu__search .searchInput:focus-within { box-shadow: var(--shadow-brd-focus); border-color: var(--trans); background: var(--menu-cont-top); } .membersList__search__results { display: none; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 3px; font: 400 13px/20px var(--font-base); height: 40px; margin-bottom: 8px; margin-top: 24px; } .membersList-search .membersList__search__results, .membersList-search .membersList__search__buttons { display: flex; } .membersList__search__results .word { font-weight: 700; margin-left: 2px; } .membersList__search__buttons { display: none; flex-direction: row; flex-wrap: nowrap; align-items: center; padding: 30px 4px 14px; margin: 0 0 8px; gap: 16px; justify-content: center; } .membersList__menu__add { font: 700 13px/20px var(--font-base); color: var(--base-txt-alt-light); background: var(--base-hlt-invert); gap: 12px; padding: 6px 12px; border-radius: 6px; cursor: pointer; } .membersList__menu__add:hover { background: var(--base-hlt-invert-major); } .membersList__menu__add svg { fill: var(--base-txt-alt-light); } .membersList__menu__people { border-radius: 6px; padding: 6px 12px; box-shadow: 0 0 0 1px var(--base-line-accent); font: 600 13px/20px var(--font-base); gap: 12px; color: var(--base-txt-secondary); cursor: pointer; } .membersList__menu__people:hover { color: var(--base-txt-primary); } .membersList__menu__people:hover svg { fill: var(--base-txt-primary); } .membersList__menu__people svg { fill: var(--base-txt-secondary); } .membersList__spacer { height: 24px; } .membersList__group { padding: 0 24px; } .membersList__group__title { display: flex; font: 700 17px/20px var(--font-base); padding: 8px 12px 7px; flex-direction: row; gap: 10px; align-items: center; } .membersList__group__title .client_label { border-radius: 24px; padding: 0 6px; color: var(--base-txt-primary); background: var(--colors-red-300); font: 500 10px/17px var(--font-base); vertical-align: middle; } .membersList__group__title .dept_btn { display: flex; gap: 4px; margin: 0 0 0 auto; align-items: center; cursor: pointer; border-radius: 4px; padding: 2px 4px 2px 8px; white-space: nowrap; } .membersList__group__title .dept_btn:hover { background: var(--base-hlt-g-hover); } .membersList__group__title .dept_btn .text { font: var(--font-ui-11-micro-med); color: var(--base-txt-secondary); } .membersList__group__title .dept_btn .icon { --icon-color: var(--base-txt-secondary); --icon-size: 16px; } .membersList__subGroup { display: none; padding: 4px 12px; font: var(--font-ui-13-small-reg); color: var(--base-txt-tertiary); } .membersList__user + .membersList__subGroup { margin-top: 8px; } .membersList__group-withDept .membersList__subGroup { display: block; } .membersList__user { position:relative; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; overflow: visible; padding: 8px 12px; margin: 2px 4px 0; cursor: pointer; } .membersList__user > * { position: relative; } .membersList__user:before { content: ''; position:absolute; left:0; right:0; bottom: 0; top:0; background: var(--base-cont-mod-top); box-shadow: var(--shadow-cont-minor); transition: all 0.5s ease; -webkit-transition: all 0.5s ease; border-radius: 12px; } .membersList__user:hover:before { left: -4px; right:-4px; background: var(--base-cont-mod-top-elevated); box-shadow:var(--shadow-cont-minor-outline); } .membersList__user:hover .role .title, .membersList__user:hover .name .online_dt { opacity: 1; } .membersList__user .manager { background: var(--base-txt-act-minor); border-radius: 8px; } .membersList__user .manager ws-icon, .membersList__user .user ws-icon { width: 24px; height: 24px; } .membersList__user .user svg, .membersList__user .manager svg { width: 18px; height: 18px; } .membersList__user .manager svg { fill: var(--base-txt-alt-light); } .membersList__user .role-withHover:hover .manager { background: var(--base-txt-act-major); } .membersList__user .role .invited { margin: 0 2px 0; } .membersList__user .role .invited svg { fill: var(--base-txt-alert-major); } .membersList__user .ava_place .av_nm { border-radius: 8px; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; transform: scale(0.67); margin: -8px; } .membersList__user:hover .ava_place .av_nm { transform: scale(0.75) translateX(-2px); } .membersList__user-online .ava_place:after { position: absolute; content: ' '; height: 8px; width: 8px; margin: -4px 0 0 -8px; border-radius: 100%; background: var(--base-txt-alt-fresh); border: 2px solid var(--base-cont-mod-mid); } .membersList__user .ava_place { position: relative; cursor: pointer; } .membersList__user .name { display: flex; flex-grow: 3; flex-shrink: 1; flex-direction: column; cursor: pointer; overflow: hidden; white-space: nowrap; } .membersList__user .name .fullname { display: flex; font: 600 14px/20px var(--font-base); flex-direction: row; align-items: center; } .membersList__user .name .hot { font: 600 8px/10px var(--font-base); border-radius: 12px; padding: 2px 3px; vertical-align: middle; margin-left: 4px; min-width: 8px; text-align: center; cursor: pointer; transition: transform 0.5s ease; -webkit-transition: transform 0.5s ease; color: var(--base-txt-alert-minor); border: 1px solid var(--base-txt-alert-minor); } .membersList__user .name .hot:hover { color: var(--base-txt-alert-major); border-color: var(--base-txt-alert-major); } .membersList__user .name .position { font: 12px/20px var(--font-base); color: var(--base-txt-secondary); display: flex; gap: 8px; flex-direction: row; align-items: center; } .membersList__user .name .online_dt { opacity: 0; font: 400 10px/16px var(--font-base); color: var(--base-txt-tertiary); transition: opacity 0.5s ease; -webkit-transition: opacity 0.5s ease; } .membersList__user .role { display: flex; flex-direction: row; align-items: center; gap: 16px; text-align: right; } .membersList__user .role span.ico { margin: 0 2px 0 4px; flex-shrink: 0; } .membersList__user .role .title { opacity: 0; font: var(--font-ui-12-mini-reg); color: var(--base-txt-secondary); transition: opacity 0.5s ease; -webkit-transition: opacity 0.5s ease; line-height: 14px; max-width: 160px; } .membersList__user .role-withHover { cursor: pointer; } .membersList__user .role-withHover:hover .title { color: var(--base-txt-primary); } .membersList__user .delete { display: flex; align-items: center; gap: 4px; padding-left: 2px; } .membersList__user .delete:before { display: block; position: relative; content: ' '; height: 32px; width: 1px; background: var(--base-txt-ghost); } .membersList__user .delete .close { padding: 8px; border-radius: 8px; z-index: 2; --icon-color: var(--base-txt-secondary); } .membersList__user .delete:not(.disabled) .close:hover { cursor: pointer; background: var(--base-hlt-g-hover); } .membersList__user .delete.disabled { pointer-events: none; } @media screen and (max-width: 480px) { .membersList-search .membersList__search__results, .membersList-search .membersList__search__buttons { flex-wrap: wrap; } }:root { --menuItem-height: 32px; } #menuOverlay { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1029; display: none; /* background: #00000020; */ } #menuContainer { } #menuContainer .menu__item span::first-letter { text-transform: capitalize; } body { --menu-default-width: 265px; } body[data-lang="1"] .menu, body[data-lang="4"] .menu { --menu-default-width: 280px; } .menu { display: none; position: fixed; background: var(--menu-cont-top); width: var(--menu-default-width); z-index: 1030; border-radius: 12px; box-shadow: var(--shadow-mod-minor); box-sizing: border-box; color: var(--base-txt-primary); font: 13px/20px var(--font-base); padding: 4px 0; } .menu.menu-active { display: block !important; } .menu > form, .menu > .menu__group__wrapper { flex-grow: 1; flex-shrink: 1; min-height: 0; } .menu:has(> .menu__group__wrapper > .menu__title, > .menu__group__wrapper > .menu__group-head, > .menu__group__wrapper > .menu__group-search, > .menu__group__wrapper > .menu__group-wrapButtons:first-child), .menu:has(> .menu__title, > .menu__group-head, > .menu__group-search), .menu:has(> form > .menu__group__wrapper > .menu__title, > form > .menu__group__wrapper > .menu__group-head, > form > .menu__group__wrapper > .menu__group-search), .menu:has(> form > .menu__title, > form > .menu__group-head, > form > .menu__group-search) { padding-top: 0; } .menu:has(> .menu__group__wrapper > .menu__group-bottom), .menu:has(> .menu__group-bottom), .menu:has(form > .menu__group-bottom), .menu:has(form > .menu__group__wrapper > .menu__group-bottom) { padding-bottom: 0; } #confirmMenuV2 { padding-bottom: 0; } .menu-paused .menu__item, .menu-paused .menu__submenuWrapper-auto, .menu-paused .a, .menu-paused ws-btn { pointer-events:none; } .menu-paused .menu:not(.menu-paused), .menu-paused .menu:not(.menu-paused) .menu__item, .menu-paused .menu:not(.menu-paused) .menu__submenuWrapper-auto, .menu-paused .menu:not(.menu-paused) a, .menu-paused .menu:not(.menu-paused) ws-btn { pointer-events: auto; } .menu-2columns .menu__item { width: calc(50% - 4px); box-sizing: border-box; } .menumenu_b { top: auto; bottom: 0 } .menu-autoWidthSmall { width:auto; min-width: 100px; max-width: 200px; } .menu-autoWidthBig { width: fit-content; min-width: 150px; max-width: 400px; } .menu-autoWidthMax { width: auto; min-width: 150px; } .menu-autoWidthForce { width: unset; } @media (min-width: 481px) { .menu[data-load-menu*=task_menu] { max-width: 260px; } } .menu, .menuFake { --icon-color: var(--base-txt-primary); } .menu ws-btn svg, .menuFake ws-btn svg { --icon-color: var(--base-txt-alt-light) } .menu a:not(.menu__item):not(ws-slider a), .menuFake a:not(.menu__item) { color: inherit; } .menu .menu__group__wrapper .menu__title { border-bottom: var(--screen-px) solid var(--base-line-secondary); padding: 8px 12px; height: 35px; } .menu__safeTriangle { position: absolute; width: 100%; height: 100%; top: 0; } .menu__item .flex_content, .menu__itemFake .flex_content { padding: 0 6px; } .menuFake .menu__group, .menu .menu__group, .frm_menu .menu__group { padding: 8px 12px; } .menu__group.menu__group-buttonsFull { padding: 0; } .menu__group-wrapButtons { flex-wrap: wrap !important; gap: 4px; padding: 12px; } .menu__group-wrapButtons .filter__menuItem span::first-letter { text-transform: capitalize; } .menu__group.scrollZone { max-height: 50vh; } .menu__group-search { /* margin-top: -4px; */ } .menu__group ~ .menu__group-search { margin-top: 0; } .menu__group-search:last-child { margin-bottom: -4px; } .menu__group-notify { background: var(--base-cont-mod-mid); border-radius: 0 0 12px 12px; margin-bottom: -4px; } .menu__group-smallPaddings { } .menu__group-scrollZone { position: relative; } .menu__group-bottom { background: var(--base-cont-mod-mid); border-radius: 0 0 12px 12px; border-top: var(--screen-px) solid var(--base-line-secondary); } .menu__group-gray { background: var(--base-hlt-g-hover); } .menu__group-blue { background: var(--base-hlt-hover); } .menu__group-red_gradient { background: linear-gradient(0deg, var(--base-hlt-w-hover) 0%, var(--base-hlt-w-selected) 100%) !important; } .menu__group-blue_gradient { background: linear-gradient(0deg, var(--base-hlt-hover) 0%, var(--base-hlt-selected) 100%) !important; } .menu__group-blue_gradient:first-child, .menu__group-red_gradient:first-child, .menu__group-blue:first-child, .menu__group-gray:first-child { margin-top: -4px; padding-top:12px; border-radius:12px 12px 0 0; } .menu__group-bottom:last-child { padding-bottom:12px; margin-top: auto; } .menu.menu-bottomgray { padding-bottom: 0; overflow: hidden; .scrollZone.scrollZone-top .ps__rail-y .ps__thumb-y { transform: translateY(-4px); } } .menu__group-head { font: var(--font-ui-15-large-semi); height: 36px; } .menu__group-head .in {padding:0 4px;} .menu__group-head .in.checkboxCount { display: flex; align-items: center; gap: 6px; } .menu__group-head .in.checkboxCount .tags-default-once-required { margin-left: 8px; } .menu__group-head .cnt { font: var(--font-ui-15-large-bold); color: var(--base-txt-btn-a); padding: 0 6px; } .menu__group-head .btn.btn-disabled, .menu__group-head .btn[disabled] { display: none } .menu__group__subset { position: relative; } .menu__group__subset-hidden { display: none; } .menu__group__subset:not(:last-child) { } .menu__group__subset.menu__group__subset-empty { margin: 0; } .menu__group__subset:not(.menu__group__subset-empty, .menu__group__subset-hidden) ~ .menu__group__subset:not(.menu__group__subset-empty, .menu__group__subset-hidden):before { content: ' '; display: block; left: 0; height: 1px; width: 100%; margin: 8px 0; /* background: var(--base-line-secondary); */ } .menu__group__subset-fake:before { display: none !important; } .menu__group__subset:nth-last-child(1 of :not(.menu__group__subset-empty)) { margin-bottom: 0; } .menu__group__subset:nth-last-child(1 of :not(.menu__group__subset-empty)):after { display: none; } .menu__item-onDblClick { box-shadow: none !important; background: var(--base-hlt-pressed) !important; } .menu__item-subset { height: 32px; font: var(--font-ui-13-small-med); border-radius: 6px; } .menu__item-subset .in { padding: 0 4px; } .menu__item-subset:has(a.sw.selected) { background: var(--base-hlt-g-hover); } .menu__group.menu__group-collapsed { cursor: pointer; } .menu__group .menu__item-group .ava_group { display: none; } .menu__group .menu__item-group ws-icon[name*=arrows] { display: none; } .menu .search_started .menu__group .ava_group { display: none; } .menu__group.menu__group-collapsed .ava_group { display: flex; } .menu__group.menu__group-collapsed ws-icon[name*=arrows] { display: flex; width: 24px; } .menu__group.menu__group-collapsed:hover ws-icon[name*=arrows] svg { fill: var(--base-txt-act-major); } .menu__group-collapsed .menu__group__subset { display: none; } .menu__group.menu__group-collapsed .space-20 { display: none; } .menu .search_started .menu__group__subset, .menu.search_started .menu__group__subset { margin-bottom: 0; } .menu .search_started .menu__group__subset:after, .menu.search_started .menu__group__subset:after { display: none; } .menu .search_started .sw_pre, .menu.search_started .sw_pre, .menu .search_started .menu__group-checkbox .sw_pre { display: none; } .menu__title { padding: 12px; font: var(--font-ui-15-large-semi); } .menu__title-in-reg { font: var(--font-ui-15-large-reg); } .menu__title .in { margin-left: 8px; } .menu__title ~ .menu__group-search { padding-top:0 } .menu__title ws-icon { width: 28px; height: 28px; } .menu__invite { display: flex; align-items: center; border-radius: 6px; background: var(--base-hlt-hover); color: var(--base-txt-btn-a); font: var(--font-ui-13-small-semi); gap: 12px; padding: 6px 12px; cursor: pointer; } .menu__invite svg { fill: var(--base-txt-btn-a); } .menu__invite:hover { background: var(--base-hlt-selected); } .menu__group-onlySearch { display: none } .menu__group-buttons { gap: 8px; display: flex; justify-content: space-evenly; height: 32px; align-items: center; } .menu__group-buttonsFull { display: flex; align-items: center; margin-bottom: -4px; } .menu__group-buttonsFull .separator { height: 52px; border-right: 0.5px solid var(--base-line-tertiary); } .search_started .menu__group-onlySearch { display: block } .search_started .menu__group-exceptSearch { display: none } .menu__group:not(.menu__group-hidden) ~ .menu__group { border-top: var(--screen-px) solid var(--base-line-secondary); } .search_started .menu__group-exceptSearch ~ .menu__group { border-top: unset; } .menu__group:not(.menu__group-hidden, .clipboard_help) ~ .menu__group__wrapper > .menu__group:first-child { border-top: var(--screen-px) solid var(--base-line-secondary); } @media screen and (min-width: 481px) { .menu-flat-groups .scrollZone .menu__group { border-top: unset; padding-top: 0; padding-bottom: 0; &.menu__group-flat-first-visible { padding-top: 8px; } &.menu__group-flat-last-visible { padding-bottom: 8px; } } } .menu__group ~ .menu__group-noBorder { border-top: none !important; } .menu__group:not(.menu__group-hidden) ~ .scrollZone .menu__group { /* border-top: 1px solid var(--base-line-secondary); */ } .menu__group ~ .scrollZone { max-height: 50vh; overflow-y: scroll; } .menu__group .menu__group__row { justify-content: flex-end; padding: 2px 2px 2px 0; } .menu__group .line { margin: 12px -12px; } .menu__group__title { color: var(--base-txt-tertiary); font-variant: small-caps; height: 32px; border-radius: 6px; font: var(--font-sp-caption-11-micro-upper-med); text-transform: uppercase; padding: 0 6px; } .menu--fixedHeight .menu__group-empty { padding-top: 32px; } .menu__group-empty .menu__group__title { min-height: 32px; height: unset; } .menu__group__title-bold { font-weight: 600; } .menu__group__title:has(ws-btn:last-child) { padding-right: 0; } .menu__group__title:has(+ .tagColors) { color: var(--base-txt-secondary); height: auto; } .menu__group__title + .tagColors { margin-top: 8px; } .menu .ava_group .ava { margin: 0 -4px 0 0; overflow: unset; } .menu .ava_group .av_sm { box-shadow: 0 0 0 2px var(--base-cont-top); vertical-align: top; transform:scale(0.833); margin:-2px; } .menu .ava_group-small .av_sm { transform:scale(0.667); margin:-4px; box-shadow: none; } .menu .ava_group { display: flex; flex-direction: row; align-items: center; margin: 0 4px 0 0; } .menu .ava_group .more { margin: 0 -4px 0 0; display: inline-block; min-width: 20px; padding: 0 4px 0 2px; text-align: center; font-size: 8px; border-radius: 12px; background: var(--base-hlt-g-hover); backdrop-filter: blur(4px); vertical-align: top; position: relative; box-shadow: 0 0 0 2px var(--base-cont-top); color: var(--base-txt-secondary); box-sizing: border-box; } .menu .ava_group-small .more { line-height: 16px; height: 16px; min-width: 16px; box-shadow: unset; } .menu__group:not(.menu__group-collapsed) .menu__item-group:has(a.sw.selected) { background: var(--base-hlt-g-hover); } .menu__group__button { display: flex; flex-direction: row; justify-content: center; border: 1px solid var(--base-txt-tertiary); border-radius: 4px; font: 13px/20px var(--font-base); padding: 5px 8px; } .menu__group.scrollZone { max-height: 200px; overflow: hidden; overflow-y: scroll; } .search_started .menu__group-searchable hr { display: none; } .menu__group.menu__group-hidden { display: none; } .menu__group.menu__group-empty { display: none; } .menu__group.menu__group-emptyAlways { display: block !important; } .menu__group.menu__group-empty .menu__group__title { font-variant: none; color: var(--base-txt-tertiary); font: var(--font-sp-caption-11-micro-upper-med); text-transform: uppercase; } .menu__group.menu__group-empty .menu__group__title > .flex_content { justify-content: center; gap: 8px; & > .flex_row { gap: 8px; } } .menu__group.menu__group-empty .menu__group__button { margin-top: 30px; cursor: pointer; } .menu__group.menu__group-empty .menu__group__button:hover { background: var(--menu-item-invert); color: var(--base-txt-alt-light); border-color: var(--trans); } .menu__group.menu__group-empty .menu__group__button:hover svg { fill: var(--base-txt-alt-light); } .menu__group hr { margin: 8px -12px; border: none; border-top: var(--screen-px) solid var(--base-line-secondary); } .menu__group hr.short {margin: 8px 0;} .menu__group hr.full { margin: 8px -12px; } #sidebarExtraMenu .menu__group hr { margin: 8px -12px; } .menu__item-hidden + hr, hr:has(+ .menu__item-hidden) { display: none; } .menu__group .affiliateBtnWrapper { padding: 0 4px; flex-grow: 1; } .menu__group .affiliateBtn { width: 100%; } .menu__item, .menu__itemFake { white-space: nowrap; color: inherit; font: var(--font-ui-14-regular-reg); border-radius: 6px; /* overflow: hidden; */ } #dataTable-groups .menu__itemFake { padding-right: 0; } .menu__item .form-label, .menu__itemFake .form-label { font: inherit; font-weight: 600; /* font: var(--font-ui-13-small-semi); */ } #sidebarAccOtherMenu .menu__item, #sidebarAccMenu .menu__item { border-radius: 8px; } .menu__item:hover, .menu__itemFake:hover { color: inherit; } .menu__item { cursor: pointer; } .menu__item-team {font: var(--font-ui-14-regular-semi);} .menu-primary { /* background: var(--base-cont-mod-top); */ /* padding: 12px; */ /* border-radius: 12px; */ } .menu-primary .menu__item:where(:not(.menu__item-disabled)).selected, .menu-primary .menu__item:not(.ign_hover):where(:not(.menu__item-disabled)):hover, .menu-primary .menu__item.selected:where(:not(.menu__item-disabled)):hover { background: var(--base-hlt-g-hover); } .menu-primary .menu__item-delete:where(:not(.menu__item-disabled)).selected, .menu-primary .menu__item-delete:not(.ign_hover):where(:not(.menu__item-disabled)):hover, .menu-primary .menu__item-delete.selected:where(:not(.menu__item-disabled)):hover { background: var(--base-hlt-w-easy); } .menu-primary .menu__item-b:where(:not(.menu__item-disabled)).selected, .menu-primary .menu__item-b:not(.ign_hover):where(:not(.menu__item-disabled)):hover, .menu-primary .menu__item-b.selected:where(:not(.menu__item-disabled)):hover { background: linear-gradient(0, var(--trans) 0%, var(--base-hlt-b-hover) 0%), linear-gradient(0, var(--trans) 0%, var( --trans) 0%); } .menu-secondary .menu__item.selected, .menu-secondary .menu__item:not(.ign_hover):hover, .menu-secondary .menu__item.selected:hover, .menu__item.menu_open { background: var(--base-hlt-g-hover); color: inherit; } .menu__group .items-switch-control { display: grid; width: 100%; grid-template-columns: repeat(2, 1fr); } .menu__group .items-switch-control > a { display: inline-flex; justify-content: center; } .menu-primary .menu__item.selected svg, .menu-primary .menu__item:not(.ign_hover):hover svg, .menu-primary .menu__item.selected:hover svg { /* fill: var(--base-txt-primary); */ } .menu-primary .menu__item-light.selected, .menu-primary .menu__item-light:hover, .menu-primary .menu__item-light.selected:hover { background: var(--base-hlt-w-easy) !important; color: var(--base-txt-primary); } .menu-primary .menu__item-light.selected svg, .menu-primary .menu__item-light:hover svg, .menu-primary .menu__item-light.selected:hover svg { fill: var(--base-txt-primary); } .menu-primary .menu__item-light ws-icon[name="logout"] svg, .menu-primary .menu__item-light.selected ws-icon[name="logout"] svg, .menu-primary .menu__item-light:hover ws-icon[name="logout"] svg, .menu-primary .menu__item-light.selected:hover ws-icon[name="logout"] svg { fill: var(--base-txt-btn-w); } .menu-primary .menu__item-light u { text-decoration: none; color: var(--base-txt-act-minor) } .menu__item-displayActiveAsDisabled.menu__item-active, .menu__item-disabled { color: var(--base-txt-muted); } .menu__item-disabled svg { fill: var(--base-txt-muted); } .menu__item-secondary { color: var(--base-txt-secondary); --icon-color:var(--base-txt-secondary) } .menu__item-empty { color: var(--base-txt-tertiary); --icon-color:var(--base-txt-tertiary) } .menu__item-hidden, .flex_row.menu__item-hidden { display: none; } .menu__item-notPossible, .flex_row.menu__item-notPossible { display: none; } .menu__item-picked, .flex_row.menu__item-picked { display: none; } .menu__tip { color: var(--base-txt-tertiary); gap: 10px; padding: 8px 12px; border-radius: 0 0 12px 12px; } .menu__tip svg { fill: var(--base-txt-tertiary); } .menu__tip-tonavigate { display: flex; flex-direction: row; align-items: center; gap: 2px; height: 32px; } .menu__tip-toselect { display: flex; flex-direction: row; align-items: center; margin-left: auto; height: 32px; gap: 2px; } .menu__tip-toexit { display: flex; flex-direction: row; align-items: center; } .menu__tip-ico { border-radius: 4px; box-shadow: 0 0 0 1px var(--base-txt-ghost); box-sizing: border-box; padding: 0; margin: 0 0 0 2px; } .menu__tip-title { margin: 0 6px; font: 400 12px/20px var(--font-base); } .menu__tip-toselect .menu__tip-ico { } .menu__tip-toselect .menu__tip-ico svg { width: 16px; height: 16px; } .menu__tip-toexit .menu__tip-ico { padding: 0 3px; font: 400 12px/20px var(--font-base); } .menu__group-search { min-height: 36px; gap: 4px; } .menu:has(.menu__group-head) .menu__group-search { min-height: 28px; } .menu__group-search .title { font: var(--font-ui-15-large-reg); color: var(--base-txt-tertiary); } .menu__group-search .subtitle { font: var(--font-ui-12-mini-reg); color: var(--base-txt-tertiary); } .menu__group-search:not(.menu__group-searchIco) ws-icon[name=search_sm] { display: none; } .menu__group-searchIco ws-icon[name=search_sm] { --icon-color:var(--base-txt-tertiary); } .menu__group ~ .menu__group-search ws-icon[name=search_sm] { display: flex; --icon-color: var(--base-txt-tertiary); } /* .menu__group-head ~ .menu__group-search { padding:2px 12px } */ .menu__group-search .in { padding:0 2px; } .menu__group-search > ws-icon { width: 24px; height: 24px; } .menu__group-search a.delete { display: none; } .menu__group-search a.button { padding: 4px 12px; border-radius: 6px; color: var(--base-txt-secondary); box-shadow: 0 0 0 1px var(--base-line-secondary); transition: all 0.3s ease; gap: 6px; font: 600 12px/20px var(--font-base); cursor: pointer; background: var(--base-cont-mod-top); } .menu__group-search a.button:hover { color: var(--base-txt-accent); box-shadow: 0 0 0 1px var(--base-line-accent); background: var(--base-cont-mod-top); } .menu__group-search a.delete ws-icon { width: 24px; height: 24px; } .menu__group-search .search_started ~ a.delete { /* display: block */ } .menu__group-search input { border: none; background: transparent; box-sizing: border-box; padding: 0; height: 20px; width: 100%; color: var(--base-txt-primary); font: var(--font-ui-15-large-reg); } .menu__group-search input:placeholder-shown { color: var(--base-txt-tertiary); } .menu__group-search input::placeholder{ font: var(--font-ui-15-large-reg); } .menu__group-search input::-moz-placeholder{ font: var(--font-ui-15-large-reg); } .menu__group-search input::-webkit-input-placeholder{ font: var(--font-ui-15-large-reg); } .menu:has(.menu__group-head) .menu__group-search input { font: var(--font-ui-15-large-reg); } .menu:has(.menu__group-head) .menu__group-search input::placeholder { font: var(--font-ui-13-small-reg); } .menu:has(.menu__group-head) .menu__group-search input::-moz-placeholder{ font: var(--font-ui-13-small-reg); } .menu:has(.menu__group-head) .menu__group-search input::-webkit-input-placeholder{ font: var(--font-ui-13-small-reg); } .menu .menu__searchText { display: inline-block; vertical-align: bottom; max-width: 75px; overflow: hidden; text-overflow: ellipsis; margin: 0; } .menu__group-search .multi-select { font: var(--font-ui-12-mini-med); color: var(--base-txt-tertiary); } .menu__group-search .badge.badge-promo { margin-right: 4px; } body.desktop .menu .menu-colors-emoji { width: 312px !important; } .menu > .menu-colors-emoji { padding: 0; } .menu-colors-emoji .menu__columns { padding: 8px 12px 10px 12px; } .menu__group-projIco ws-emoji { width: 32px; height: 32px; } .menu__group-projIco .menu__item { position: relative; height: 48px !important; width: 48px !important; padding: 0 !important; border-radius: 8px; justify-content: center; align-items: center; background: var(--project-color) !important; overflow: unset; } .menu__group-projIco ws-icon, .menu-colors-emoji .menu__group-projIco svg { width: 32px; height: 32px; } .menu__group-projIco .menu__item a { position: absolute; top: -6px; right: -6px; border-radius: 12px; background: var(--base-cont-top); } .menu__group-projIco .menu__item a ws-icon, .menu__group-projIco .menu__item a svg { width: 20px; height: 20px; --icon-color: var(--base-txt-primary); } .menu__group-projIco .menu__item a:hover { } .menu__group-projIco .menu__item a:hover ws-icon, .menu__group-projIco .menu__item a:hover svg { --icon-color: var(--base-txt-max); } .menu-colors-emoji .menu__group-projColors { padding-left: 0; } .menu-icons .menu__item svg use:nth-child(2) { display: none; } .menu-icons .menu__item.selected svg use:nth-child(2), .menu-icons .menu__item:not(.ign_hover):hover svg use:nth-child(2) { display: block; } .menu-icons .menu__item.selected svg use:nth-child(1), .menu-icons .menu__item:not(.ign_hover):hover svg use:nth-child(1) { display: none; } .menu-icons .menu__item-noselect.selected svg use:nth-child(1), .menu-icons .menu__item-noselect:hover svg use:nth-child(1) { display: block; } .menu__item, .menu__itemFake { height: 32px; padding: 0 6px; display: flex; } .menu__group-buttonsFull .menu__item { flex: 1 1 0; align-items: center; justify-content: center; height: 52px; } .menu__group-buttonsFull .menu__item-cancel { border-radius: 0 0 0 12px; font: var(--font-ui-13-small-reg); color: var(--base-txt-secondary); } .menu__group-buttonsFull .menu__item-cancel.selected, .menu__group-buttonsFull .menu__item-cancel:hover, .menu__group-buttonsFull .menu__item-cancel.selected:hover { background: var(--base-hlt-g-hover); } .menu__group-buttonsFull .menu__item-apply { border-radius: 0 0 12px 0; font: var(--font-ui-13-small-semi); color: var(--base-txt-btn-a); } .menu__group-buttonsFull .menu__item-apply.selected, .menu__group-buttonsFull .menu__item-apply:hover, .menu__group-buttonsFull .menu__item-apply.selected:hover { background: var(--base-hlt-hover); } .menu__group-buttonsFull .menu__item-delete { font: var(--font-ui-13-small-semi); color: var(--base-txt-btn-w); } .menu__group-buttonsFull .menu__item-delete.selected, .menu__group-buttonsFull .menu__item-delete:hover, .menu__group-buttonsFull .menu__item-delete.selected:hover { background: var(--base-hlt-w-hover); } .menu__item span.explain { font:12px/20px var(--font-base); opacity:0.5; padding:0 4px; } .menu__item span { overflow: hidden; text-overflow: ellipsis; } .menu__item span ws-icon[name=help] { --icon-size: 14px; } .menu__item .in ws-icon[name=hint] { margin-left: 6px; } .menu__item span.space { overflow: hidden; text-overflow: ellipsis; } .menu__item span.gray { padding:0 4px; color:var(--base-txt-tertiary); font: var(--font-ui-12-mini-reg); } .menu__item-secondary { } .menu__item ws-icon { width: 32px; height: 32px; } .menu__item ws-icon[name=checkbox], .menu__item ws-icon[name=radio] { width: 24px; height: 24px; } #sidebarAccOtherMenu .menu__item ws-icon[name=gear] { border-radius: 7px; cursor: pointer; } #sidebarAccOtherMenu .menu__item ws-icon[name=gear]:hover { background: var(--base-hlt-g-hover); } .menu__item ws-icon.tag { --icon-size: 24px; } .menu__item ws-icon.av_svg { width: 24px; height: 24px; } .menu__item[data-type="stage"][data-id="1"] ws-icon.av_sm { --icon-color: var(--base-txt-btn-w); } .menu__item[data-type="stage"][data-id="1"] ws-icon.av_svg { background: var(--base-hlt-w-hover); } .menu__item[data-type="stage"] ws-icon.av_svg { border: unset; --icon-color: var(--base-txt-primary); background: var(--base-txt-ghost); } .menu span.space, .menuFake span.space, .menu span.space > .avatar, .menuFake span.space > .avatar { width: 32px; height: 32px; display:flex; justify-content: center; align-items: center; } .menu span.space-20, .menuFake span.space-20 { width:20px; } .menu span.space-24, .menuFake span.space-24 { width:24px; } .menu span.space-20, .menuFake span.space-20 { width: 20px; } .menu-userCard .menu__item > .special_ico ws-icon { width: 20px; } .menu__item .parent_line, .menu__item .parent_arc { --level-dot-size: calc(var(--screen-px) + 4px); overflow: visible; position: relative; width: 20px; height: var(--menuItem-height); display: flex; justify-content: flex-start; align-items: center; flex-direction: column; } .menu__item .parent_line:after, .menu__item .parent_arc:after { content: ''; width: var(--level-dot-size); height: var(--level-dot-size); background: var(--base-txt-tertiary); border-radius: 50%; } .menu__item .parent_arc:before, .menu__item .parent_line:before { --level-line-height: calc(var(--menuItem-height) - var(--level-dot-size)); --level-line-margin-top: calc(-1 * var(--level-line-height) / 2); content: ''; background: var(--base-txt-tertiary); width: var(--screen-px); height: var(--level-line-height); margin-top: var(--level-line-margin-top); } .menu__item-level0 + .menu__item-level1, .menu__item-level1 + .menu__item-level2 { .parent_arc:before { height: calc(var(--level-line-height) - 8px); margin-top: calc(var(--level-line-margin-top) + 8px); } } .parent_line-hidden:before, .parent_line-hidden:after { display: none; } .menu__item-level2 { .parent_line:after { width: var(--screen-px); border-radius: unset; } } .search_started .menu__item span.parent_arc, .search_started .menu__item span.parent_line { justify-content: center; } .search_started .menu__item span.parent_arc:before, .search_started .menu__item span.parent_line:before { display: none; } .search_started .parent_line-hidden:before, .search_started .parent_line-hidden:after { display: block; } .search_started .parent_line:after { width: var(--level-dot-size); border-radius: 50%; } .menu__item .hot_key { display: none; color: var(--base-txt-tertiary); font: var(--font-ui-12-mini-reg); padding: 0 4px; } .menu__item:not(.menu__item-disabled):hover .hot_key, .menu__item.menu__item-hotkeyVisible .hot_key { display: block; } .menu__item.menu__item-hashotkey:not(.menu__item-disabled).selected .cnt_warn, .menu__item.menu__item-hashotkey:not(.menu__item-disabled):hover .cnt_warn, .menu__item.menu__item-hashotkey.menu__item-hotkeyVisible .cnt_warn { display: none; } .menu__item .hot_key-frame { min-width: 16px; box-sizing: border-box; border: 1px solid var(--base-txt-muted); border-radius: 4px; text-align: center; letter-spacing: 0; } .menu__item .hot_key-frame { margin-left: 2px; } .menu__item .cnt_members { color: var(--base-txt-tertiary); font: var(--font-ui-12-mini-reg); padding: 0 4px; } /* .menu__item.selected .cnt_members, .menu__item:not(.ign_hover):hover .cnt_members { display: none; }*/ .menu__item-delete svg { fill: var(--base-txt-btn-w); } .menu__item-delete.selected, .menu__item-delete.selected:hover, .menu-secondary .menu__item-delete:hover, .menu-secondary .menu__item-delete.selected, .menu-secondary .menu__item-delete.selected:hover { color: var(--base-txt-btn-w); background: var(--base-hlt-w-easy) !important; fill: var(--base-txt-btn-w); } .menu__item-delete .in { color: var(--base-txt-alert-major); } .menu__item-delete.selected svg { fill: var(--base-txt-btn-w); } .menu__item-delete.menu__item-disabled > ws-icon:not(.when-disabled), .menu__item-delete.menu__item-disabled > .in { opacity: .5; } .menu__item-b:not(.menu__item-disabled) svg { fill: var(--base-txt-btn-b); } .menu__item-b:not(.menu__item-disabled).selected, .menu__item-b:not(.menu__item-disabled).selected:hover, .menu-secondary .menu__item-b:not(.menu__item-disabled).selected, .menu-secondary .menu__item-b:not(.menu__item-disabled).selected:hover { color: var(--base-txt-btn-b); background: linear-gradient(0, var(--trans) 0%, var(--base-hlt-b-hover) 0%), linear-gradient(0, var(--trans) 0%, var( --trans) 0%); fill: var(--base-txt-btn-b); } .menu__item-b:not(.menu__item-disabled) .in { color: var(--base-txt-btn-b); } .menu__item-b:not(.menu__item-disabled).selected svg { fill: var(--base-txt-btn-b); } .menu__item-noselect.selected, .menu__item-noselect:hover { background: inherit; color: inherit; } .menu__item ws-icon.open_in_new svg { opacity: 0; } .menu__item.selected ws-icon.open_in_new svg { opacity: 1; } .menu__item-color { cursor: pointer; margin-left: 4px; width: 21px; height: 21px; border-radius: 4px; background: var(--project-color); --icon-color: var(--base-txt-max); } .menu__item-color:hover { opacity: 0.8; } .menu__item-color:first-child { margin-left: 0; } .menu__item-folder { padding: 4px; } .menu__item-folder svg { fill: var(--folder-color) } .menu__item-folder ws-icon { width: 32px; height: 32px; } .menu__head-profile { padding: 12px 16px; height: 52px; gap: 12px; border-bottom: var(--screen-px) solid var(--base-line-primary); } .menu__head-profile > :last-child { margin-right: 4px; } .menu__foot-profile { padding: 20px; gap: 8px; border-top: var(--screen-px) solid var(--base-line-primary); } .menu__head-profile .name { display: block; padding: 4px; color: var(--base-txt-accent); font: var( --font-ui-16-title-3-bold); overflow: hidden; text-overflow: ellipsis; } .menu__head-profile .online { font: 12px/12px var(--font-base); color: var(--base-txt-tertiary); } .menu__head-profile .online .ico_l { margin: -4px 0 -4px -4px; } .sidebarProfileMenu__avatar { width: 52px; height: 52px; } .menu__head-profile .av_nm { transform: scale(calc(52 / 48)); transform-origin: left top; border-radius: 8px; cursor: pointer; } .menu__head-profile .av_nm:hover { box-shadow: var(--shadow-brd-focus-alt); } .menu__head-profile .topic_status ws-emoji { width: 16px; height: 16px; } .menu__head-profile ws-icon.cross-attr { border-left: 1px solid transparent } .menu a.partner { background: var(--colors-violet-trans-100); display: flex; fill: var(--colors-violet-600); height: 32px; border-radius: 16px; box-shadow: 0 0 0 1px var(--colors-violet-600) inset; align-content: flex-start; align-items: center; justify-content: center; } .menu a.partner:hover { fill: var(--white-primary); color: var(--white-primary); background: var(--colors-violet-600); box-shadow: none; } .menu a.partner span { padding: 0 8px } .menu a.upgrade { display: flex; fill: var(--base-btn-notice-minor); height: 32px; border-radius: 4px; box-shadow: 0 0 0 1px var(--base-btn-notice-minor) inset; align-content: flex-start; align-items: center; justify-content: center; padding: 0 8px; } .menu a.upgrade:hover { background: var(--base-btn-notice-minor); color: var(--white-primary); fill: var(--white-primary); box-shadow: none; } .menu a.upgrade:hover:active { background: var(--base-btn-notice-major); } .menu a.upgrade span { padding: 0 12px; } .menu__columns { display: flex; gap: 12px; padding: 12px 20px; } #sidebarProfileMenu .menu__columns > .menu__group { width: 204px; } .menu__columns > .menu__group { padding: 0; flex-grow: 1; flex-shrink: 1; border-top: none !important; } .menu-h48 .menu__group .sw, .menu__columns .menu__group .sw, .menu-bigSwitchers .menu__group .sw { width: 20px; padding: 2px; margin: 0 2px 0 0; } .menu-h48 .menu__group .sw { margin-left: 4px; } .menu-h48 .menu__group .sw span, .menu__columns .menu__group .sw span, .menu-bigSwitchers .menu__group .sw span { width: 6px; height: 6px; margin: 3px; } .menu-h48 .menu__group .sw_act .sw span, .menu__columns .menu__group .sw_act .sw span, .menu-bigSwitchers .menu__group .sw_act .sw span { width: 10px; height: 10px; margin: 1px 0 1px 9px; } .menu-smallSwitchers .menu__group .sw { width: 18px; padding: 0; margin: 4px 0 4px 5px; } .menu-smallSwitchers .menu__group .sw span { width: 4px; height: 4px; margin: 4px; } .menu-smallSwitchers .menu__group .sw_act .sw span { margin: 2px 2px 2px 8px; width: 8px; height: 8px; } .menu .menu__submenuWrapper { position: relative; } .menu__item span.cnt { display: flex; min-width: 16px; height: 20px; padding: 0 4px; margin-left: 2px; box-sizing: border-box; justify-content: center; align-items: center; border-radius: 4px; font: var(--font-ui-12-mini-reg); } .menu__item span.cnt:not(.cnt_soon):empty { display: none; } .menu__item span.cnt_new { background: var(--base-txt-alert-minor); color: var(--base-txt-alt-light); } .menu__item span.cnt_arch2 { background: inherit; border: 1px solid var(--base-txt-muted); color: var(--base-txt-tertiary); } .menu__item span.cnt_warn { border: 1px solid var(--base-txt-alert-major); color: var(--base-txt-alert-major); } .menu__item span.cnt.primary { background: var(--base-hlt-invert); color: var(--base-txt-alt-light); min-width: 20px; } .menu__item span.cnt.cnt_soon { background: transparent; border: 1px solid var(--base-txt-muted); color: var(--base-txt-tertiary); } .menu__item span.cnt.cnt_soon:before { display: inline; content: 'soon'; } .menu__item span.cnt.cnt_b { font: var(--font-ui-12-mini-reg); background: var(--base-hlt-b-hover); color: var(--base-txt-btn-b); border-radius: 6px; } @media (min-width: 481px) { .menu .menu-2columns, .menu.menu-2columns { width: 240px; } .menu .menu-2columns .menu__group, .menu.menu-2columns .menu__group { display: flex; flex-direction: column; column-gap: 8px; flex-wrap: wrap; height: 164px; } .menu .menu__submenuWrapper-auto > .menu { left: 150%; top: -8px; pointer-events: none; width: 220px; position: absolute; opacity: 0; } .menu .menu__submenuWrapper-auto .menu-account { width: 240px; } .menu .menu__submenuWrapper-auto .menu-getHelp { top: -160px !important; width: 262px; } .menu .menu__submenuWrapper-auto .menu-notify { width: 240px; overflow: hidden; } .menu .menu__submenuWrapper-auto .menu.menu-autoWidthSmall { width: auto; min-width: 100px; max-width: 200px; } .menu .menu__submenuWrapper-auto .menu.menu-autoWidthBig { width: fit-content; min-width: 150px; max-width: 400px; } .menu .menu__submenuWrapper-auto .menu.menu-autoWidthMax { width: auto; min-width: 150px; } .menu .menu__submenuWrapper-hover > .menu, #globalMenu > .menu__submenuWrapper-auto .menu, #globalMenu > .menu-colors-emoji, .menu .menu__submenuWrapper-auto .menu__item.selected + .menu { opacity: 1; top: -11px; left: calc(100% + 10px); transition: 0.3s opacity 0.3s; pointer-events: initial; display: block; } .menu .menu__submenuWrapper-auto.menu__submenuWrapper-left .menu__item + .menu { left: auto; right: calc(100% + 10px); } } @media (max-width: 480px) { .menu .menu { display: none; } #globalMenu .menu-static { display: block; width: unset; } } .menu__item-emoji span:first-child { width: 14px; height: 14px; margin: 9px; border-radius: 4px } .menu__item-checked { border: 1px solid var(--base-txt-primary); border-radius: 6px; } .menu__item-emoji .checkbox svg { fill: var(--base-hlt-b-notr-selected); } .menu__item-checkbox .checkbox svg { fill: var(--base-txt-primary); } .menu__item-checkbox-blue .checkbox svg { fill: var(--base-txt-act-minor); } .menu__item-checkbox.selected .checkbox svg { fill: var(--white-primary); } .menu__item-checkbox .checkbox use { display: none } .menu__item-checkbox .checkbox use:first-child { display: block } .menu__item-checked .checkbox use:last-child { display: block } .menu__item-checked .checkbox use:first-child { display: none; } .menu__item-checkbox.selected .checkbox use:nth-child(2) { display: block } .menu__item-checkbox.selected .checkbox use:last-child, .menu__item-checkbox.selected .checkbox use:first-child { display: none } .menu__item ws-icon[name=winner_cup] svg, .menu__item:not(.ign_hover):hover ws-icon[name=winner_cup] svg { fill: var(--base-btn-notice-minor); } /**************** MENU MASTER ELEMENTS ***************/ /* menu-checkbox menu-picker menu__group-select menu__group-radio menu__group-checkbox */ .menu-picker { border-radius: 12px; } .menu-picker .menu__item .space-ava ws-icon { width: 24px; height: 24px; } .menu-picker .menu__item .in { } .menu-picker .menu__item .info { font: 400 12px/20px var(--font-base); color: var(--base-txt-tertiary); padding: 0 4px; } .menu__group.menu__group-picker { padding: 12px 6px 12px 18px; flex-shrink: 0; } .menu__group-search.menu__group-picker { padding: 0; } .menu__group-search.menu__group-picker .editBlock__picker { border-radius: 12px 12px 0 0; border: none; } .menu__group-search.menu__group-picker.menu__group-detached .editBlock__picker { border-radius: 12px; } .menu-inModal .menu__group-search.menu__group-picker .editBlock__picker { border-radius: 12px; } .menu__group-head ~ .menu__group-search.menu__group-picker .editBlock__picker { border-radius: 0 } .menu__group-search.menu__group-picker .editBlock__picker__item {} .menu__group-search.menu__group-picker .editBlock__picker__item-group, .menu__group-search.menu__group-picker .editBlock__picker__item-blue { } .menu-picker .menu__group-searchable .menu__item { } .menu__group-picker .editBlock__picker__search .in { height: 24px; background: none; } .menu__group-picker .editBlock__picker__search { width: 100px; } .menu__group-picker .editBlock__picker-projects .editBlock__picker__search { width: 140px; } .menu__group-select .menu__item ws-icon[name=check] { width: 24px; } .menu__group-select .menu__item ws-icon[name=check] svg { opacity: 0; fill: var(--base-txt-act-minor); } .menu__item-active:not(.menu__item-displayActiveAsDisabled) { box-shadow: 0 0 0 1px var(--base-txt-primary) inset; background: transparent; cursor: pointer; } .menu__group-checkbox .menu__item-active { box-shadow: none; background: transparent; } .menu__group-select .menu__item.menu__item-active.selected { background: transparent; } .menu__group-checkbox .menu__item-active:not(.menu__item-disabled) { cursor: pointer; } .menu__group-radio .menu__item-active, .menu__group-noborder .menu__item-active { box-shadow: none; } .menu__group-select .menu__item-active ws-icon[name=check] svg { opacity: 1; } .menu__item ws-icon[name=radio] svg, .menu__item:not(.ign_hover):hover ws-icon[name=radio] svg, .menu__item.selected ws-icon[name=radio] svg, .menu__item.selected:hover ws-icon[name=radio] svg { fill: var(--base-txt-tertiary); } .menu__item-active ws-icon[name=radio] svg, .menu__item-active:hover ws-icon[name=radio] svg, .menu__item-active.selected ws-icon[name=radio] svg, .menu__item-active.selected:hover ws-icon[name=radio] svg { fill: var(--base-hlt-invert); } .menu__item ws-icon[name=radio] use:nth-child(2) { opacity: 0; transition: opacity .4s ease; } .menu__item ws-icon[name=radio] use:last-child { display: none; } .menu__item:not(.ign_hover):hover ws-icon[name=radio] use:nth-child(2) { opacity: 1; } .menu__item-active, .menu__item-active:hover { /* background: var(--base-hlt-selected); */ } .menu__item-active ws-icon[name=radio] svg, .menu__item-active:hover ws-icon[name=radio] svg, .menu__item-active.selected ws-icon[name=radio] svg { fill: var(--base-hlt-invert); } .menu__item-active ws-icon[name=radio] use:last-child { display: block; } .menu__item-active ws-icon[name=radio] use:nth-child(2) { display: none; } .menu__group-checkbox:has(.menu__group__subset:nth-child(2):last-child) .menu__group__subset .sw_pre { display: none; } .menu__group .space .sw { margin: 0; float:none } .menu__group-checkbox .av_sm { transition: all .2s ease; } .menu__group-checkbox .menu__item, .menu__group-checkbox .menu__itemFake { margin-bottom: var(--screen-px); } .menu__group-checkbox .menu__item ws-icon[name=checkbox] svg { fill: var(--base-txt-tertiary); } .menu__group-checkbox .menu__item ws-icon[name=checkbox] use:first-child { transition: opacity .4s ease; } .menu__group-checkbox .menu__item ws-icon[name=checkbox] use:nth-child(2) { opacity: 0; transition: opacity .4s ease; } .menu__group-checkbox .menu__item ws-icon[name=checkbox] use:last-child { display: none; } .menu__group-checkbox .menu__item:not(.ign_hover):hover ws-icon[name=checkbox] use:first-child { opacity: 0; } .menu__group-checkbox .menu__item:not(.ign_hover):hover ws-icon[name=checkbox] use:nth-child(2) { opacity: 1; } .menu__group-checkbox .menu__item-active:not(.menu__item-disabled):hover, .menu__group-checkbox .menu__item-active:not(.menu__item-disabled).selected { background: var(--base-hlt-g-hover); color: var(--base-txt-primary); box-shadow: none; } .menu__group-checkbox .menu__item-active .av_sm { /* box-shadow: 0 0 0 1px var(--colors-interblue-750), 0 0 0 3px var(--colors-interblue-trans-300); */ border-radius: 3px; } .menu__group-checkbox .menu__item-active:not(.menu__item-disabled) ws-icon[name=checkbox] svg, .menu__group-checkbox .menu__item-active:not(.menu__item-disabled):hover ws-icon[name=checkbox] svg, .menu__group-checkbox .menu__item-active:not(.menu__item-disabled).selected ws-icon[name=checkbox] svg { fill: var(--base-hlt-invert); } .menu__group-checkbox .menu__item-active ws-icon[name=checkbox] use:last-child { display: block; } .menu__group-checkbox .menu__item-active ws-icon[name=checkbox] use:nth-child(2) { display: none; } .menu.search_started .menu__group__subset, .menu .search_started .menu__group__subset { display: none; } .menu.search_started .menu__group__subset:has(.menu__item:not(.menu__item-hidden)), .menu .search_started .menu__group__subset:has(.menu__item:not(.menu__item-hidden)) { display: block; } .menu .menu__group-picker + .menu__group__wrapper > .scrollZone, .menu * + .scrollZone, .menu * + .menu__group-scrollZone > .scrollZone { box-shadow: 0 calc(-1 * var(--screen-px)) 0 0 var(--base-line-secondary); border-top: unset; } .menu * + .editBlock__picker__body.scrollZone, .menu__group-scrollZone > .editBlock__picker__body.scrollZone { box-shadow: none; } .menu .scrollZone { max-height: 440px; overflow: hidden; flex-shrink: 1; } .menu__group-checkbox.menu__group:not(.menu__group-empty) .menu__item-group { color: var(--base-txt-primary); font: var(--font-ui-14-regular-semi); text-transform: none; } .menu__group-checkbox.menu__group:has(.menu__item:not(.menu__item-disabled)) .menu__item-group { cursor: pointer; } .menu__item-group { color: var(--base-txt-primary); font: var(--font-ui-14-regular-semi); } .menu__group-checkbox.menu__group:not(.menu__group-empty) .menu__item-group .in { padding: 0 4px; } .menu__group-checkbox .menu__group__subset { padding: 0; } .menu__group-checkbox.menu__group.menu__group-searchable { max-height: none; overflow: unset; position: relative; } .menu__group-checkbox.menu__group:not(.menu__group-search):first-child { } .menu:not(.search_started) .menu__group-checkbox.menu__group-collapsed.menu__group-searchable:hover { background: var(--base-hlt-hover); box-shadow: 0 1px 0 0 var(--base-hlt-invert), 0 -1px 0 0 var(--base-hlt-invert); border-color: var(--trans); } /*.menu__group-checkbox.menu__group-collapsed > * { if its collapsed why do we need this, project add user search shows all collapsed */ /* pointer-events: none;*/ /*}*/ .menu__group-checkbox.menu__group-collapsed > .menu__item-group .space:has(.sw) { display: none; } .menu:not(.search_started) .scrollZone:has(.menu__group-checkbox.menu__group-collapsed:first-child:hover) { border-color: var(--trans); box-shadow: none; } .menu__group-checkbox.menu__group-head {height: 36px;margin-top: -4px;border-top: none;} .menu__group-checkbox.menu__group-head > .in { font: var(--font-ui-14-regular-semi); padding: 0 4px; } .menu__group-checkbox.menu__group-head > .in b { font-weight: inherit; } .menu__group-checkbox .menu__item, .menu__group-checkbox .menu__itemFake { margin-bottom: var(--screen-px); } /**************** MENU MASTER ELEMENTS ***************/ #globalMenu .menu-static { position: static; border: none; box-shadow: none; } #globalMenuBase { position: relative; border-radius: 12px; } #delayedPubMenu { width: 304px; } #projectMenu .proj_folder_my svg use:nth-child(1) { fill: var(--base-btn-fresh-minor); } #projectMenu .proj_folder_user svg use:nth-child(1) { fill: var(--base-btn-primary-minor); } #projectMenu .menu__item-noselect { cursor: inherit; } #projectMenu .menu__item-noselect svg { fill: var(--flt-del-bg); } #projectMenu ws-icon[name=star-solid] svg { fill: var(--base-btn-notice-minor); } #submenuFolderColors { width: 230px; } #menuProjectAddUsers { width: 360px; max-height: 500px; } @supports (-moz-appearance:none) { .menu.search_started .menu__group__subset, .menu .search_started .menu__group__subset { display: block; } .menu.search_started .menu__item-subset, .menu .search_started .menu__item-subset { display: none; } } em-emoji-picker { width: 312px; --border-radius: 5px; --category-icon-size: 14px; --font-family: var( --font-base); --font-size: 14px; --rgb-accent: 0, 100, 100; min-height: 300px; max-height: 370px; } .menu__group-info { background: var(--base-cont-mod-mid); font: var(--font-ui-11-micro-reg); color: var(--base-txt-secondary); } .menu__group-info:last-child { margin-bottom: -4px; padding-bottom: 12px; border-radius: 0 0 12px 12px; } .menu__group-noBackground { background: unset !important; } .menu__group-info .author_name { text-decoration: underline var(--base-txt-tertiary); } .menu__group-info .author_name[onclick]:hover { cursor: pointer; text-decoration: underline var(--base-txt-tertiary) dashed; } .menu__group-info .task_add_date, .menu__group-info .task_close_date { white-space: nowrap; } .menu__group-info .task_id:not(.menu__itemFake) { margin-top: 4px; } .menu__group-info .task_id { font: inherit !important; color: var(--base-txt-muted); } .menu__group-info .task_id > span { border: 1px solid var(--base-txt-ghost); padding: 0 4px; border-radius: 4px; cursor: pointer; } .menu__group-info .task_id > span:hover { border-color: var(--base-txt-secondary); color: var(--base-txt-primary); } .menu__group-fill { padding-bottom: 12px; margin-bottom: -4px; background: var(--base-cont-mod-mid); border-radius: 0 0 12px 12px; } .menu__group-invert { padding: 12px; background: var(--base-hlt-b-hover); } .menu__group-invert:hover { background: var(--base-hlt-b-selected); } .menu__group-invert .menu__item, .menu__group-invert .menu__item:not(.ign_hover):hover, .menu__group-invert .menu__item.selected, .menu__group-invert .menu__item.selected:hover { background: var(--base-cont-mod-top) !important; } .menu__group-invert a { border-radius: 6px; box-shadow: var(--shadow-cont-minor-outline); background: var(--base-cont-mod-top); } .menu .clipboard_help { display: none } .menu__item em { font: var(--font-ui-11-micro-med); color: var(--base-txt-tertiary); } .menu__group-tabs { font: var(--font-ui-13-small-med); padding: 0; margin: -4px 0 0 0; height: 48px; justify-content: center; gap: 8px; background: var(--base-cont-mod-low); border-radius: 8px 8px 0 0; } .menu__group-tabs span.tab { padding: 0 12px; cursor: pointer; color: var(--base-txt-secondary); /* background: var(--base-btn-tertiary-minor); */ border-radius: 6px; height: 32px; line-height: 32px; } .menu__group-tabs span.tab:hover { box-shadow: 0 0 0 1px var(--base-line-secondary); } .menu__group-tabs span.act { background: var(--base-cont-mod-top); box-shadow: 0 0 0 1px var(--base-line-secondary); } .menu__group-tabs span.act { font-weight: bold; color: var(--base-txt-accent); } .menu__item span.proj_color { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; ws-emoji { width: 16px; height: 16px; } } .menu__item ws-icon.proj_color { width: 16px; height: 16px; --icon-size:16px; ws-emoji { width: 14px; height: 14px; } } .menu__item .av_nm { transform: scale(0.41666); box-shadow: 0 0 0 2px var(--white-muted); flex-shrink: 0; } .menu__item ws-icon ~ .proj_color { display: none } .tagColors { display: flex; flex-wrap: wrap; flex-direction: column; height: 96px; align-content: space-between; } .tagColors-statuses { height: 64px; } .tagColors__item { width:32px; height:32px; position:relative; } .tagColors__item ws-icon { width:32px; height:32px; --icon-size: 24px; --icon-color: var(--tag-color); } .tagColors__itemws-icon use:last-child { display: none; } .tagColors__itemws-icon:hover use:first-child, .tagColors__itemws-icon.selected use:first-child, .tagColors__item-active use:first-child { display: none; } .tagColors__itemws-icon:hover use:last-child, .tagColors__itemws-icon.selected use:last-child, .tagColors__item-active use:last-child { display: unset; } .tagColors__item { transition: all 0.2s linear; } .tagColors__item:hover { border-radius: 8px; background: var(--base-hlt-g-hover); cursor: pointer; } .tagColors__item-active { border-radius: 8px; box-shadow: var(--shadow-brd-enable); } .menu .editBlock__input { height:36px; margin-top: -8px; } @media screen and (max-width: 480px) { .menu .menu__group__wrapper .editBlock__input { margin-top: 0; /* cause groups in wrapper have background, so we need balanced padding */ } .menu__group__wrapper .menu__group-smallPaddings:has(.editBlock__input) { padding: 0; } } .editBlock__input:has(.space:first-child, .tag_color:first-child) { padding-left: 6px; } .editBlock__input .space:first-child { padding: 0; width: 28px; } .editBlock__input .space:first-child ws-icon { width: 28px; height: 28px; --icon-size: 20px; } .editBlock__input > .tag_color { width: 28px; height: 28px; } .editBlock__input > .tag_color:after { display: block; content: ''; width: 16px; height: 16px; background: var(--tag-color); border-radius: 8px; margin: 6px; } .menu__item task-done-date ws-icon { width:20px; height:20px; } .menu__item task-done-date .ico { margin:0; } .menu__item .terms { color: var(--base-txt-tertiary); font: var(--font-ui-12-mini-reg); } .menu__item .terms i { font-style: normal } .menu__item .terms b { font-weight: normal; color: var(--base-btn-primary-major); background: var(--base-hlt-notr-hover); padding: 4px; border-radius: 4px; } .menu__item-missFilter .in { color:var(--base-txt-tertiary) } .menu__item-expandHidden .av_sm { display:none } .menu__item-expandHidden ws-icon:first-child { background: var(--base-hlt-w-active); border-radius: 12px; width:24px; height:24px; } .menu__item-expandHidden.menu__item-active ws-icon:first-child { background: var(--base-hlt-alt-notice); } .menu__item-expandHidden ws-icon svg { width:16px; height:16px; } .menu__item-expandHidden:not(.menu__item-active) ws-icon use:last-child { display: none; } .menu__item-expandHidden.menu__item-active ws-icon use:first-child { display: none; } .menu__item span.num { color: var(--base-txt-tertiary); font: var(--font-ui-12-mini-reg); padding: 0 4px; } .menu__item-active span.num { color: var(--white-max); background: var(--base-btn-primary-minor); border-radius: 4px; font: var(--font-ui-12-mini-reg); padding: 0 4px; } .menu__item-active.menu__item-disabled span.num { background: var(--base-txt-tertiary); } .menu .role_ico ws-icon, .menuFake .role_ico ws-icon{ opacity: 0.5; width: 24px; height: 24px; } .menu .role_ico ws-icon svg, .menuFake .role_ico ws-icon svg { width: 16px; height: 16px; } .menu ws-icon[name^=award] svg, .menuFake ws-icon[name^=award] svg { fill: var(--base-btn-notice-major); } .menu__item-displayActiveAsDisabled.menu__item-active .av_sm { opacity: .35; } .menu__item-displayActiveAsDisabled.menu__item-active, .menu__item-disabled { background: none !important; color: var(--base-txt-muted) !important; cursor: default; pointer-events: none; } .menu__item-displayActiveAsDisabled.menu__item-active ws-icon[name^=award], .menu__item-disabled ws-icon[name^=award] { pointer-events:initial; } .menu__group-checkbox .menu__item-disabled.menu__item-active { color: var(--base-txt-secondary) !important; } .menu__item.menu__item-disabled:has(.item_hint.when-disabled) .item_hint:not(.when-disabled), .menu__item:not(.menu__item-disabled) .when-disabled { display: none; } .menu__item-disabled ws-icon[name*=award][data-title], .menu__item-disabled ws-icon[name*=award][onclick], .menu__item-disabled .badge.badge-promo[data-title], .menu__item-disabled .badge.badge-promo[onclick], .menu__item-disabled .item_hint { pointer-events: all; } .menu .menu__item:not(.menu__item-disabled) ws-icon[name^=folder] svg, .menuFake .menu__item:not(.menu__item-disabled) ws-icon[name^=folder] svg { fill: var(--folder-color); } .menu__item > .ico { margin: 2px 4px; transform: scale(0.8); } .menu__item > .special_ico > .ico { transform: scale(0.8); } .menu__item > .flex_content:has(~ .special_ico) { flex-grow: 0; } .menu__item > .special_ico { margin-right: auto; } .menu__item ws-icon[name=lock-fill] { background: var(--base-txt-alert-minor); border-radius:12px; width:24px; height:24px; margin:0 4px; } ws-icon[name=lock] svg { /* fill: var(--base-txt-alert-minor); */ } .btn ws-icon[name=lock_open_alt-fill] svg { fill: var(--base-txt-new-major); } .menu__item ws-icon[name=lock-fill] svg { fill: var(--base-txt-alt-light); width:16px; height:16px; } .menu__item .in ws-icon[name=lock_sm], .menu__item ws-icon[name=lock_sm] { --icon-size:16px; --icon-color: var(--base-btn-alert-primary-major); vertical-align: middle; } .menu__item ws-icon[name=lock_sm] + .in, .menu__item ws-icon[name=lock_sm] + .in span { padding-left: 0; } .menu__group-visibility .menu__item-active ws-icon[name=lock_sm] { display: none } .menu__item .space.space-lock ws-icon[name=lock_sm], .menu__group-visibility .menu__item ws-icon[name=lock_sm] { --icon-size:20px; --icon-color: var(--base-txt-alt-light); background: var(--base-hlt-w-invert); border-radius:12px; width:24px; height:24px; margin:0 4px; } .menu__group-visibility .menu__item:not(.menu__item-active) .space-ava { display: none } /* .menu__group-visibility .menu__item ws-icon[name=checkbox] svg use:first-child { fill: var(--base-txt-btn-w); } .menu__group-visibility .menu__item:hover ws-icon[name=checkbox] use:nth-child(2) { fill: var(--base-txt-btn-w); } */ .menu__group-visibility .menu__item-active:not(.menu__item-default) ws-icon[name=checkbox] use:nth-child(3) { fill: var(--base-txt-primary) !important; } .menu__group-visibility .menu__item-group.sw_act ~ * {} .menu__group-visibility .menu__item-guest .in { color:var(--base-txt-tertiary) } .menu__item-default { pointer-events: none; } .menu__item-default ws-icon[name=checkbox] svg use:first-child, .menu__item-default ws-icon[name=checkbox] svg use:nth-child(2) { display: none; } .menu__item-default ws-icon[name=checkbox] svg { fill: var(--base-txt-tertiary) !important; } .modal .menu__group { padding-left: 0; padding-right: 0; } .menu-tertiary .menu__item .in { font: var(--font-ui-13-small-reg); fonf: none !important; } .menu-tertiary .menu__item-active { background: none !important } .menu-tertiary .menu__item-active ws-icon[name=checkbox] svg { fill: var(--base-txt-primary) !important } .menu__item .cnt_stat { font: var(--font-ui-12-mini-reg); color: var(--base-txt-secondary); margin: 0 8px 0; } .menu__item .cnt_stat-hidden { display: none; } .menu__item.selected .cnt_stat-hidden { display: block; } .menu__item ws-icon[name=logout] + span { color: var(--base-txt-alert-major); } @media screen and (max-width: 496px) { #sidebarProfileMenu.menu { width: 340px; } .menu__head-profile { padding-top: 8px; } #sidebarProfileMenu.menu .menu__columns { flex-direction: column; gap: initial; } #sidebarProfileMenu.menu .menu__columns > .menu__group { width: 300px; } } .menu__item .priorb { margin: 0; ws-icon {width: 20px;height: 20px;} } .menu-compact .menu__item-group, .menu-compact .menu__item-subset { display: none } .menu-cards .menu__item { height: 44px; border-radius: 0; padding: 0; } .menu-cards .menu__item:not(.ign_hover):hover, .menu-cards .menu__item.selected, .menu-cards .menu__item.selected:hover { background: none; cursor: initial; } .menu-cards .menu__item ws-btn[name*=reassign] ~ .role_ico {display: none} .menu-cards .menu__item .menu__item span.space-ava { transform:scale(1.2) } .menu__cardsSplitter { border-bottom: 1px solid var(--base-line-tertiary); display: none } .menu-cards .menu__item ~ .menu__item { border-top: 1px solid var(--base-line-tertiary); } .menu > .scrollZone:first-child { /* margin-top:-4px; */ border-top: none; box-shadow: none; } .menu a.menu__item-zero { color: var(--base-txt-tertiary) } .menu a.menu__item-zero:after { content: ' (0)'; color: var(--base-txt-ghost) } .menu-withEditorSearch .menu__group-search { display: none; } .menu-withEditorSearch .menu__group-empty ws-btn { display: none } .menu-withEditorSearch .scrollZone { /* margin-top:-4px; */ border-top: none; box-shadow: none; } .menu-withEditorSearch .scrollZone .menu__group:first-child { border-top: none; box-shadow: none; } .menu__item span.space-projectIco { width:24px; --icon-size:16px; padding-right:8px; position:relative; } .menu__item span.space-projectIco:after { content:''; position: absolute; right:3px; top: 6px; height:20px; border-right:1px solid var(--base-line-tertiary); } .menu__item span.space-projectIco ws-icon.proj_color, .menu__item span.space-projectIco .proj_color ws-emoji { width: 16px; height: 16px; --icon-size:16px; } .menu__item-icoHover ws-icon use:last-child { display: none; } .menu__item-icoHover:not(.menu__item-active):not(.ign_hover):hover ws-icon use:last-child { display: block; } .menu__item-icoHover:not(.menu__item-active):not(.ign_hover):hover ws-icon use:first-child { display: none; } .menu-userCard .menu__item .cnt_hot:not([onclick=""]):hover { background: var(--base-hlt-w-selected); } .menu-userCard .menu__item .cnt_warm:not([onclick=""]):hover { background: var(--base-hlt-b-selected); } /*.menu__item .cnt_all ~ span.cnt_hot, .menu__item .cnt_all ~ span.cnt_warm, .menu__item .cnt_all ~ span.cnt_arch {*/ /* margin: 0;*/ /* border-radius: 4px;*/ /* padding: 0 4px;*/ /*}*/ /*.menu__item .cnt_more {*/ /* padding-right: 12px;*/ /*}*/ .menu .mouse_help div { display: block; margin: 24px auto; } .menu .mouse_help div { width: 130px } .menu__item-today { background: var(--cal-picker-range); } .menu__item-past span.r { color: var(--base-txt-tertiary) } .menu .menu__item-alt { float: right; color: var(--base-txt-tertiary); display: none; font-size: 11px; } .menu:hover .menu__item-alt { display: flex; } @media (max-width: 480px) { .menu .menu__item-alt { display: flex; } } .menu-calendar { width: 810px; padding-bottom: 0; } .menu-calendar .l { float: left; width: 516px; padding: 12px 12px 8px 12px; border-right: 0.5px solid var(--base-line-primary); } .menu-calendar .r { font: 12px/17px var(--font-base); display: flex; flex-direction: column; justify-content: space-between; min-height: 314px; } .menu-calendar .r .menu__columns { max-width: 244px; padding: 12px; } .menu-calendar .r > .menu__group { border-top: 0.5px solid var(--base-line-primary); } .menu-calendar .r .menu__item{ padding: 0 2px; } .menu-calendar .ui-datepicker-inline { margin: 0 } .menu-calendar .menu__group-hea ws-btn { display: none } .menu__item-2lines { height: 54px; } .menu__group > .acc .acc_name { display: block; padding-left: 8px; padding-right: 4px; font: var(--font-ui-14-regular-semi); } .menu__group > .acc .acc_alias { display: block; padding: 0 8px; font: var(--font-ui-11-micro-reg); color: var(--base-txt-tertiary); } .menu__item-2lines .acc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .menu__group-bold .in { font: var(--font-ui-14-regular-semi); } .menu__item-2lines .acc_name { padding: 0 2px; font: var(--font-ui-14-regular-semi); color: var(--base-txt-primary); } .menu__item .in .hint { font: var(--font-ui-12-mini-reg); color: var(--base-txt-tertiary); } .menu__item-2lines .acc_url { padding-left: 2px; padding-right: 4px; font: var(--font-ui-12-mini-med); color: var(--base-txt-tertiary); } .menu .info_pre { height: 57px; } .menu .info_pre_norate { height: 37px; } .menu .info_pre_lg { height: 76px; } body.mobile .menu .info_pre_lg { display: none; } .menu .info { font: italic 12px/18px var(--font-base); padding: 4px 8px; color: var(--base-txt-tertiary); } .menu .info_bottom { padding: 10px 16px; color: var(--base-txt-tertiary); position: absolute; bottom: 0; right: 0; width: 250px; border-top: var(--screen-px) solid var(--base-line-secondary); box-sizing: border-box; } .menu-timer { width: 318px } .menu-timer .ico_goto { display: block } .menu-timer a.ign_select:hover { } .menu-timer a.ign_select:first-child { } .menu-timer .ico_goto { margin: 2px; cursor: pointer; display: inline-block; opacity: 0.8 } .menu-timer .ico_goto:hover { opacity: 1 } .menu-timer .timer_comment { position: relative; } .menu-timer .timer_comment textarea { box-sizing: border-box; width: 100%; height: 60px; min-height: 60px; max-height: 100px; font: 13px/14px var(--font-base); border-radius: 5px; margin: 0; padding: 8px; background-color: var(--base-cont-mod-low); resize: none; outline: none; border: none } /* ----------- MinifyCSS: LIGHT THEMEMinifyCSS: LIGHT THEME ----------- */.menu-timer .timer_comment textarea:focus {background: var(--base-cont-mod-low)} /*----------- MinifyCSS: STOPMinifyCSS: STOP ----------- */ .menu-timer .loader_sm { position: absolute; top: 12px; right: 7px; display: none } .menu-timer .timer_buttons { } .menu-timer .timer_buttons a b.r { padding: 0; opacity: 1 !important } .menu-timer .timer_buttons a:hover { background: var(--base-txt-link-major); border-radius: 16px; color: var(--white-accent) } .menu-timer .timer_buttons a { padding: 8px 40px; background: var(--base-txt-link-major); color: var(--white-accent); font: 16px/16px var(--font-base); float: right; border-radius: 16px; cursor: pointer } .menu-timer .timer_buttons a.timer_resume { background: var(--costs-timer-pause); padding: 8px 14px; color: var(--white-primary); } .menu-timer .timer_buttons a.timer_stop { background: var(--costs-timer-pause) } .menu-timer .timer_buttons a:hover { box-shadow: 0 0 0 100px var(--colors-alpha-dark-10) inset; } .menu-timer .timer_buttons ws-icon { margin: -2px 0 -2px 8px; transform: scale(1.2); --icon-color:var(--white-primary); } .menu-timer .timer_buttons .ico_pause { margin: -2px 0; transform: scale(1.5) } .menu-timer .timer_buttons span.add_time { cursor: pointer; color: var(--costs-timer-pause); font: 18px/16px var(--font-base); float: right; margin: 8px 10px 0 } .menu-timer span.trash_block { float: left; padding: 2px; cursor: pointer } .menu-timer span.trash_block:hover { border-radius: 24px; background: var(--base-hlt-w-pressed); width: 24px; height: 24px } .menu-timer span.trash_block:hover span.ico { opacity: 1 } .menu-timer span.trash_block span.ico { margin: 2px 0 0 2px } .menu-timer span.trash_block span.ico_close { opacity: 0.8; transform: scale(0.9) } .menu-timer .today_task_timer { } .menu-timer .today_task_timer a.ign_select { } .menu-timer .today_task_timer a.time { display: inline-block; vertical-align: top; float: right; background: var(--costs-timer-pause); opacity: 0.5; color: var(--white-accent); border-radius: 4px; margin-top: 1px; font: var(--font-ui-11-micro-reg); height: 16px; padding: 0 4px; } .menu-timer .today_task_timer a.time ws-icon { display: none } .menu-timer .today_task_timer a.time:hover span.value { opacity: 0; display:block } .menu-timer .today_task_timer a.time:hover ws-icon { display: block; margin: -18px auto -2px auto; --icon-color:var( --white-primary); width: 20px; height: 20px; } .menu-timer .today_task_timer a.time:hover { opacity: 1 } .menu-timer .progress_timer { position: relative; height: 80px; width: 80px; margin: 15px auto 5px auto; cursor: pointer } .menu-timer .progress_timer svg { width: 100%; height: 100% } .menu-timer .progress_timer span { position: absolute; width: 100%; text-align: center; top: 30px; font: bold 19px/19px var(--font-base) } .menu-timer .progress_timer:hover circle.draw { stroke: var(--costs-timer-pause) } .menu__group-alert { display: flex; align-items: flex-start !important; } .menu__group-alert .in { padding: 6px 4px; color: var(--base-txt-btn-b) } .menu__group-alert ws-icon { --icon-color: var( --base-txt-btn-b) !important; width: 32px; height: 32px; } .menu-likes { width: 224px; } .menu-companyCard { min-width: 480px; } .menu-userCard { min-width: 472px; padding: 0; } .menu-userCardMinimal { min-width: 320px; } .menu-userCard.menu-active { display: grid !important; grid-template-areas: "left right"; grid-template-columns: auto auto; } .menu-userCard .r { grid-area: right; width: 224px; padding-top: 4px; } .menu-userCard .l { grid-area: left; background: var(--menu-cont-low); width: 248px; padding: 12px; box-sizing: border-box; border-top-left-radius: 12px; border-bottom-left-radius: 12px; border-right: 1px solid var(--base-line-tertiary); } .menu-userCard .l.mouse_help { height: 344px; border-radius: 12px 0 0 12px; } .menu-userCard .w { grid-area: left; background: var(--base-cont-mid); width: 320px; padding: 12px; box-sizing: border-box; border-radius: 12px; border: 1px solid var(--base-line-tertiary); } .menu-userCard .info_bottom { background: var(--base-cont-mod-mid); color: var(--base-txt-secondary); font: var(--font-ui-11-micro-reg); width: 224px; border-bottom-right-radius: 12px; padding: 8px; } .menu-userCard .info_bottom > div { gap: 2px; } .menu-userCard .info_bottom > div > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; } .menu-userCard .menu__item .cnt_r { display: flex; } .menu-userCard .menu__item .cnt_r > span { padding: 0 4px; line-height: 18px; } .menu div.upgrade { font: 14px/20px var(--font-base); color: var(--base-txt-primary); height: 30px; padding: 12px 8px; } .menu a .num_schedule { border: 1px solid var(--base-line-secondary); min-width: 16px; text-align: center; border-radius: 20px; font: 11px/16px var(--font-base); background: var(--menu-cont-top); } .menu a .num_schedule:empty { display: none } .menu a.menu__item-active .num_schedule { background: var(--base-txt-link-minor); border-color: var(--base-txt-link-minor); color: var(--white-secondary); } @media (max-width: 480px) { .menu-userCard:not(.menu-userCardMinimal) {width:480px;} .menu.menu-userCard.menu-active {min-width:0} .menu-userCard .l, .menu-userCard .info_bottom {border-radius: 0; border-right: none;} .menu.menu-mode-auto.menu-userCard.menu-active { display: grid !important; grid-template-areas: "swipe" "left" "right"; grid-template-columns: minmax(0, 1fr); grid-template-rows: min-content min-content 1fr; align-content: start; } .menu-userCard .menu__swipe { grid-area: swipe; } .menu-userCard .l { margin: 0; width: unset; padding-top: 2px; border-bottom: var(--screen-px) solid var(--base-line-secondary); } .menu-userCard .w { width: unset; padding-top: 2px; border: none; } .menu-userCard .r { width: unset; min-height: 0; display: flex; flex-direction: column; } .menu-userCard .r .info_pre { display: none; } .menu-userCard .info_bottom { position: relative; width: 100%; padding: 24px 32px 48px; } .menu-userCard .scrollZone { max-height: unset; } /* краще не треба, це ж не bottom */ /* .menu__group-fill { margin-top: auto; } */ } @media (hover: none) { .user_card .img .editmask .edit, .user_card .img_big .editmask .edit { bottom: 0; } } @media print { #menuContainer, #menuOverlay {display:none} } .menu__item .space task-stage ws-icon { --icon-size:20px; } .menu__group-picker ~ .tagsSingleSelect .tagsSingleSelect__group__content, .menu-picker .tagsSingleSelect .tagsSingleSelect__group__content { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 6px; } .menu__group-picker ~ .tagsSingleSelect .tagsSingleSelect__group__content:has(.menu__item:not(.menu__item-picked)), .menu-picker .tagsSingleSelect .tagsSingleSelect__group__content:has(.menu__item:not(.menu__item-picked)) { padding-bottom: 8px; } .menu__group-picker ~ .tagsSingleSelect .tagsSingleSelect__item, .menu-picker .tagsSingleSelect .tagsSingleSelect__item { padding: 0; height: 24px; } .menu__group-picker ~ .tagsSingleSelect .tagsSingleSelect__item .flex_content, .menu-picker .tagsSingleSelect .tagsSingleSelect__item .flex_content { padding: 0; } .menu__item ws-icon[name=labels_dot].upd { --icon-size: 14px; --icon-color: var(--base-txt-btn-c); } @media (max-width: 480px) { #menuOverlay { z-index: 1054; } .menu.menu-mode-auto { bottom: 0; left: 0; right: 0; top: 30%; padding: 0; width: unset !important; border-radius: 20px 20px 0 0; box-shadow: 0 -1px var(--base-line-secondary), 0 600px 0 400px var(--base-cont-mod-top), 0 0 40px -2px var(--colors-graphite-trans-400); flex-direction: column; height: auto; transition: top .3s ease; overflow: hidden; } /* trying to fix iphone submenu visibility */ .menu.menu-mode-auto.menu-paused, .menu.menu-mode-auto.menu-paused .scrollZone { overflow: visible !important; } .menu { /* --layer: 0; --zIndex: 1032; z-index: calc(var(--zIndex) + var(--layer)); */ z-index: 1054; } .menu-autoWidthBig.menu-mode-auto { max-width: none; } .menu.menu-mode-auto.menu-fullscreen { top: var(--swipe-window-top); } .menuFake .menu__group__wrapper, .menu-mode-auto .menu__group__wrapper { gap: 8px; padding: 8px 20px 20px; } .menuFake .menu__group__wrapper { padding-left: 0; padding-right: 0; } .menu.menu-mode-auto .menu__group-head + .menu__group__wrapper { padding-top: 0; } #filterItem__project__menu .menu__group__wrapper:not(:last-child), #filterItem__project2menu .menu__group__wrapper:not(:last-child), #filterItem__project3menu .menu__group__wrapper:not(:last-child) { padding-bottom: 0; } #sidebarAccMenu .menu__group:not(.menu__group-hidden) ~ .menu__group__wrapper .menu__group:first-child { border-top: none; } .menu__group__wrapper .menu__group:not(.menu__group-empty) .menu__group__title:not(.tagsSingleSelect__group__title) { display: none; } #taskView__reaction_menu .menu__group__wrapper .menu__group__title { display: flex; } .menuFake .menu__columns, .menu-mode-auto .menu__columns { padding: 20px; } #sidebarProfileMenu > .scrollZone { box-shadow: unset; } #sidebarProfileMenu.menu .menu__columns > .menu__group { width: auto; } .menuFake .menu__group, .menu-mode-auto .menu__group { padding: 16px 20px; } .menu__group[data-hide-on-search-empty] { padding: 8px 12px; } .menu-userCard .menu__group { padding: 8px 12px; } .menuFake .menu__group__wrapper .menu__group, .menu-mode-auto .menu__group__wrapper .menu__group { padding: var(--menuGroup-padding); border-radius: var(--menuGroup-borderRadius); background: var(--base-hlt-g-easy); &.menu__group-invert { background: var(--base-hlt-b-hover); } } .menuFake .menu__group__wrapper .menu__group-select-box, .menu-mode-auto .menu__group__wrapper .menu__group-select-box { background: var(--base-hlt-hover); } .menu__group__wrapper .menu__group-gray { background: var(--base-hlt-g-hover); } .menu__group__wrapper .menu__group-picker { box-shadow: var(--shadow-brd-enable); background: var(--base-hlt-g-hover); } #filterItem__project__menu .menu__group-tabs, #filterItem__project2menu .menu__group-tabs, #filterItem__project3menu .menu__group-tabs { background: var(--base-cont-mod-low); } .menu__group-buttons { justify-content: flex-start; } .menu-mode-auto .menu__group__wrapper .menu__group, .menu-mode-auto .menu__group__wrapper .scrollZone { border-top: none !important; box-shadow: none !important; } .menu-mode-auto .menu__group__wrapper .scrollZone { border-radius: 12px; } .menu-mode-auto .menu__group__wrapper .scrollZone .menu__group:not(:first-child) { margin-top: 8px; } .menu-mode-auto .menu__group__wrapper .menu__group.menu__group-logout, .menu-mode-auto .menu__group__wrapper .menu__group.menu__group-red { /* padding: 4px 12px; */ background: var(--base-hlt-w-easy); } .menu-mode-auto .menu__group__wrapper .menu__group.menu__group-b { background: linear-gradient(0, var(--trans) 0%, var(--base-hlt-b-hover) 0%), linear-gradient(0, var(--trans) 0%, var( --trans) 0%); } .menu__group__wrapper .menu__group .menu__item { padding: 0; font: var(--font-ui-15-large-reg); } .menu__item .r { padding-right: 6px; } /* .menu__group__wrapper .menu__group .menu__item-group { padding: 0 4px; } .menu__group__wrapper .menu__group.menu__group-users .menu__item-group, .menu__group__wrapper .menu__group.menu__group-users .menu__item-subset, .menu__group__wrapper .menu__group.menu__group-projects .menu__item-subset, .menu__group__wrapper .menu__group.menu__group-projects .menu__item-group { padding: 0; } */ /* заточено під .menu-h48 */ #sidebarProfileMenu { .menu__columns { padding: 0px 20px 16px; } .menu__columns > .menu__group { padding: 0; } .menu__head-profile .name { font: var(--font-ui-18-title-2-semi); } .menu__item__wrapper { padding: var(--menuGroup-padding); border-radius: var(--menuGroup-borderRadius); background: var(--base-cont-mod-top); } .menu__item__wrapper:not(:first-child) { margin-top: 8px; } /* поки прибираю, бо Notifications toggle прилипає */ /* .menu__item__wrapper > .menu__submenuWrapper > .menu__item, .menu__item__wrapper > .menu__item { padding: 0; } */ .menu__foot-profile { margin-top: auto; } } .menu__head-profile { border-bottom: unset; padding: 12px 20px; } /* .menu.menu-mode-auto .menu__group-bottom { border-radius: 0; } */ .menu__group .affiliateBtnWrapper { padding-top: 8px; } #sidebarProfileMenu .menu__columns > .menu__group + .menu__group { margin-top: 8px; } #sidebarProfileMenu .menu__group-logout .menu__item__wrapper { background: var(--base-hlt-w-easy); } #sidebarProfileMenu .menu__group-b .menu__item__wrapper { background: linear-gradient(0, var(--trans) 0%, var(--base-hlt-b-hover) 0%), linear-gradient(0, var(--trans) 0%, var( --trans) 0%); } .menu__group > .acc .acc_name { font: var(--font-ui-16-title-3-semi); } .menu__group > .acc .acc_alias { font: var(--font-ui-12-mini-reg); } .menu__swipe { margin: 3px auto; width: var(--mobile-primary-menu-swipe-width); height: 3px; border-radius: 3px; background-color: var(--base-txt-muted); cursor: pointer; transition: width .3s ease, background-color .3s ease; } .menu-userCard:not(.menu-userCardMinimal) .menu__swipe:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 10px; background: var(--menu-cont-low); z-index: -1; } .menu-active .menu__swipe { --mobile-primary-menu-swipe-width: var(--mobile-primary-menu-half-opened-swipe-width); background-color: var(--base-txt-accent); } .menu-fullscreen .menu__swipe { --mobile-primary-menu-swipe-width: var(--mobile-primary-menu-full-opened-swipe-width); background-color: var(--base-txt-accent); } #taskView__reaction_menu .menu__group-head { display: none; } /* щоб був скрол на мобілках, ніби нічого не ламає */ .menu.menu-mode-auto.menu-active { display: flex !important; flex-direction: column; } /* moved to js */ /* .menu .editBlock__picker.scrollZone, .menu .editBlock__picker .editBlock__picker__body.scrollZone { box-sizing: border-box; max-height: 40vh; } */ .menu.menu-mode-auto > * { flex-grow: 0; flex-shrink: 0 } .menu.menu-mode-auto > .scrollZone, .menu.menu-mode-auto > .menu__group__wrapper, .menu.menu-mode-auto > .menu__group__wrapper > .scrollZone { flex-grow: 1; flex-shrink: 1; max-height: unset; } .menu.menu-mode-auto > form > .menu__group__wrapper:has(> .scrollZone) { flex-grow: 0; min-height: 0; } .menu.menu-mode-auto > form { flex-grow: 1; flex-shrink: 1; display: flex; flex-direction: column; overflow: hidden; } .menu.menu-mode-auto > form > * { flex-grow: 0; flex-shrink: 0 } .menu.menu-mode-auto > form > .scrollZone, .menu.menu-mode-auto > form > .menu__group__wrapper, .menu.menu-mode-auto > form > .menu__group__wrapper > .scrollZone { flex-grow: 1; flex-shrink: 1; max-height: unset; } /* спроба фіксанути скроли в меню після додавання .menu__group-scrollZone */ .menu__group__wrapper { min-height: 0; } .menu__group-scrollZone { min-height: 0; display: flex; flex-direction: column; } .menu.menu-mode-auto > .menu__group-scrollZone, .menu.menu-mode-auto > .menu__group-scrollZone > .scrollZone, .menu.menu-mode-auto > .menu__group__wrapper > .menu__group-scrollZone, .menu.menu-mode-auto > .menu__group__wrapper > .menu__group-scrollZone > .scrollZone, .menu.menu-mode-auto > form > .menu__group-scrollZone, .menu.menu-mode-auto > form > .menu__group-scrollZone > .scrollZone, .menu.menu-mode-auto > form > .menu__group__wrapper > .menu__group-scrollZone, .menu.menu-mode-auto > form > .menu__group__wrapper > .menu__group-scrollZone > .scrollZone { flex-grow: 1; flex-shrink: 1; max-height: unset; } /* TODO десь цей клас використовувався не за призначенням, треба знайти і замінити */ .menu .hotKey, .menu .hot_key { display: none !important; } .menu-2columns .menu__item { width: 100%; } .menu__group-anchor .menu__item { font: var(--font-ui-14-regular-bold); } /* small mob menu :: 2-3 level */ .menu.menu-mode-dropdown.menu-active:has(.menu__submenuWrapper .menu.menu-active.menu-collapsed) { transform: scale(1); /* trigger submenu position fixed like absolute */ } .menu.menu-mode-dropdown.menu-active:has(.menu__submenuWrapper .menu.menu-active.menu-collapsed-in), .menu.menu-mode-dropdown.menu-active:has(.menu__submenuWrapper .menu.menu-active.menu-collapsed-in-end) { transition: transform .15s ease-in, background-color .15s ease-in; transform: scale(0.9); transform-origin: right top; background: var(--base-cont-trans-low); backdrop-filter: blur(16px); } .menu.menu-active.menu-collapsed { max-height: 52px; overflow: hidden; } .menu.menu-h44.menu-active.menu-collapsed { max-height: 64px; } .menu.menu-active.menu-collapsed-in { transition: max-height .15s ease-in, transform .15s ease-in, top .15s ease-in; } .menu.menu-active.menu-collapsed-in-end, .menu.menu-active.menu-collapsed-in { max-height: 100vh; transform: scale(1.11111111111) translateY(4px); transform-origin: right top; } .menu.menu-collapsed-in .menu__group-anchor ws-icon[name="arrows/chevron-right"] svg, .menu.menu-collapsed-in-end .menu__group-anchor ws-icon[name="arrows/chevron-right"] svg { transition: transform .15s ease-in; transform: rotate(90deg); } .menu.menu-mode-dropdown.menu-active:has(.menu__submenuWrapper .menu.menu-active.menu-collapsed-out) { transition: transform .15s ease-out, background-color .15s ease-out; transform: scale(1); background: var(--menu-cont-top); } .menu.menu-active.menu-collapsed-out { max-height: 52px; overflow: hidden; transition: max-height .15s ease-out, transform .15s ease-out, top .15s ease-out; transform: scale(1); } .menu.menu-collapsed-out .menu__group-anchor ws-icon[name="arrows/chevron-right"] svg { transition: transform .15s ease-out; transform: rotate(0deg); } } .menu-standard .menu__item { position: relative; margin-bottom: 16px; } .menu-standard .menu__item:not(:last-child):after { content: ''; position: absolute; width: 100%; border-bottom: 1px solid var(--base-line-tertiary); bottom: -8px; left: 0; } .menu-standard .role_ico ws-icon { opacity: initial; } .menu-standard .role_ico ws-icon svg { width: 20px; height: 20px; } .menu-cards:has(.space-ava-28) .menu__item { height: 52px; } .menu__item:has(.space-ava-28) .flex_content, .menu__itemFake:not(.menu__itemFake-userCard):has(.space-ava-28) .flex_content { padding: 0 8px; } @media (min-width: 481px) { .menu__itemFake-userCard { padding-right: 0px; } } .menu__itemFake-userCard .av.space-ava-28 { margin-left: 2px; margin-right: 2px; } .menu span.space.space-ava-28, .menuFake span.space.space-ava-28 { display: block; width: 28px; height: 28px; } .space-ava-28 .av_sm { --ava-scale: calc(28 / 24); scale: var(--ava-scale); transform-origin: top left; } .menu.menu-active:has(.menu__group-bottom) { display: flex !important; flex-direction: column; } .menu--file-attach .menu__group__title { --icon-size: 16px; } @media (max-width: 480px) { .menu__title .btn-close, .menu__title ws-btn[right-icon=close] {display: none;} .menu__group .line, #sidebarProfileMenu .menu__group hr.short {display: none;} } #confirmMenuV2, #confirmMenuNotifyV2 { max-width: 360px; } #confirmMenuV2 .menu__group-head, #confirmMenuNotifyV2 .menu__group-head { height: auto; min-height: 36px; } #confirmMenuV2 .menu__group-head, .menu__group-headConfirm { padding: 8px; font: var(--font-ui-14-regular-semi); border-bottom: var(--screen-px) solid var(--base-line-tertiary); height: unset; } #confirmMenuV2 .menu__group-head > .in, .menu__group-headConfirm > .in { padding: 8px 12px; overflow: hidden; text-wrap: balance; } #confirmMenuV2 .menu__group-buttons, .menu .menu__group-buttonsConfirm { padding: 0; margin-bottom: 0; gap: 0; height: 48px; display: flex; flex-direction: row; flex-wrap: nowrap; position: relative; } #confirmMenuV2 .menu__group__wrapper .menu__group-buttons { border-top: unset; } #confirmMenuV2 .menu__group-buttons > .flex_gap, .menu__group-buttonsConfirm > .flex_gap { width: 0; height: 100%; border-right: var(--screen-px) solid var(--base-line-tertiary); } #confirmMenuV2 .menu__group-buttons > ws-btn, #confirmMenuNotifyV2 .menu__group-buttons > ws-btn, .menu__group-buttonsConfirm > ws-btn { width: 100%; flex-shrink: 1 !important; flex-grow: 0 !important; } #confirmMenuNotifyV2 .confirm_with_notify .btn-double { width: 100%; } #confirmMenuNotifyV2 .confirm_with_notify .btn-double .notify_btn:last-child { width: auto; } #confirmMenuV2 .menu__group-buttons > ws-btn.central, .menu__group-buttonsConfirm > ws-btn.central { position: absolute; left: 50%; margin: 12px 0 0 -12px; width: 24px; } #confirmMenuV2 .menu__group-buttons > ws-btn:first-child button, .menu__group-buttonsConfirm > ws-btn:first-child button { border-radius: 0 0 0 12px !important; } #confirmMenuV2 .menu__group-buttons > ws-btn:last-child button, .menu__group-buttonsConfirm > ws-btn:last-child button { border-radius: 0 0 12px 0 !important; } .menu.menu-embedded { display: block; position: static; width: 100%; border: none; box-shadow: none; background: transparent; padding: 0; } .menu__group-2cols { display: flex; } .menu__group-2cols > .menu__item { flex-grow: 1; flex-shrink: 1; /*overflow: hidden;*/ /*width: 50%;*/ } .menu__group-select-box { padding: 12px; background: var(--base-cont-mod-mid); background: linear-gradient(0deg, var(--base-hlt-g-hover) 0%, var(--base-hlt-g-easy) 100%); & ~ .scrollZone .menu__item-active { outline: 1px dashed var(--base-line-accent); box-shadow: unset; box-sizing: border-box; background: var(--base-cont-top-elevated); &.selected { background: var(--base-hlt-g-hover); } } .menu__item__wrapper { --gap: 8px; gap: var(--gap); &[data-role="placeholder"]:has(+ .menu__item__wrapper) { display: none; } .menu__item { --icon-color: var(--base-txt-accent); box-sizing: border-box; &:not(.flex_content) { max-width: calc(50% - var(--gap)/2); } &.flex_content { min-width: calc(50% - var(--gap)/2); } &.menu__item-active { background: var(--base-cont-mod-top-elevated); } &.menu__item-dropdown { cursor: pointer; @media screen and (min-width: 481px) { &:hover { background: transparent; } } } &> .in { color: var(--base-txt-accent); } /* &:has([data-action="remove"]) { padding-right: 0; } */ [data-action="remove"] { cursor: pointer; &:hover { --icon-color: var(--base-txt-btn-w); } } } } } .menu__group-clients .menu__item-group > .in { flex-grow: 0; } .menu__group-clients .menu__item-group .label_client_sm { margin-left: 0; margin-right: auto; font: var(--font-ui-11-micro-semi); } .menu__group__subset:before { content: unset !important; } .menu, .menuFake { --step-color: var(--base-txt-secondary); } .menu .step, .menuFake .step { height: 32px; display: flex; justify-content: center; align-items: center; position: relative; &.step-32 { width: 32px; } &.step-24 { width: 24px; } &:before { content: ''; position: absolute; width: calc(var(--screen-px) * 2); height: 100%; background: var(--base-txt-ghost); } &:after { content: ''; display: block; background: var(--step-color); width: 6px; height: 6px; border-radius: 50%; } ~ .in { font: var(--font-ui-12-mini-semi); } } .menu .menu__group-single .menu__group__subset:first-child .step::before, .menuFake .menu__group-single .menu__group__subset:first-child .step::before { height: 50%; bottom: 0; } .modal_picker { padding: 8px; min-height: 280px; } .modal_picker .ui-datepicker-links { display: none; } @media (min-width: 481px) { .modal_picker { padding: 0; } .modal_picker .ui-datepicker-inline { padding: 12px; width: 260px; } .modal_picker .ui-datepicker-one-month { min-width: 260px; } .modal_picker .ui-datepicker-links { display: flex; justify-content: flex-end; right: 10px; } } .modal_picker:not(.modal_picker__one) .ui-datepicker-inline .ui-datepicker-current-day div { border-radius: 0; } .modal_picker .ui-datepicker-current-day.first div { border-top-left-radius: 8px; border-bottom-left-radius: 8px; } .modal_picker .ui-datepicker-current-day.last div { border-top-right-radius: 8px; border-bottom-right-radius: 8px; } .modal_picker .ui-datepicker-current-day.first.last div { border-radius: 8px; } .modal_picker .ui-datepicker-empty { opacity: 0.5; } .task_schedule_menu { position: relative; } .task_schedule_menu .menu__title .av_sm { transform: scale(1.167); } .task_schedule_menu .other:hover .in { text-decoration: underline; text-decoration-style: dotted; } .task_schedule_menu .task_schedule_menu__user { overflow: hidden; flex-shrink: 1; } .picker-action-hide .ui-datepicker-prev[disabled], .picker-action-hide .ui-datepicker-next[disabled], .picker-action-hide .ui-datepicker-empty { display: none; } .menu__group-projects.menu__group-checkbox .menu__item > .space:first-child { width: 24px; } .menu__group-users.menu__group-select .menu__item > .space-24:first-child, .menu__group-users.menu__group-select .menu__itemFake > .space-24:first-child, .menu__group-users.menu__group-checkbox.menu__group-collapsed .menu__item > .space-24:nth-child(2), .menu__group-users.menu__group-checkbox.menu__group-collapsed .menu__itemFake > .space-24:nth-child(2), .menu__group-users.menu__group-select .menu__item .step-24, .menu__group-users.menu__group-select .menu__itemFake .step-24 { width: 32px; } .menu__group-users { --step-color: var(--base-txt-btn-a); } .menu__group-users .menu__item-group { --icon-color: var(--base-txt-btn-a); } .menu__group-clients .menu__item-group { --icon-color: var(--base-txt-btn-b); } .menu__group-clients { --step-color: var(--base-txt-btn-b); } .menu__group-users .menu__item[data-picker-group] { --icon-color: var(--base-txt-btn-a); } .menu__group-users .menu__item.pick_all_my_team { --icon-color: var(--base-txt-new-minor); } .menu:not(.menu-no-pickable) [data-show-on-no-pickable="true"] { display: none; } .menu.menu-no-pickable { [data-hide-on-search-empty="true"], .editBlock__picker__search input, .menu__tip { display: none !important; } * + .scrollZone { border-top: unset; box-shadow: none; } } .menu__group-users .menu__item .cnt { border: unset; } .menu__group-users .menu__item .cnt_hot { background: var(--base-hlt-w-easy); color: var(--base-txt-btn-w); border: unset; } .menu__group-users .menu__item .cnt_all { display: none; } .menu__group-users .menu__item.selected .cnt_all { display: flex; } .menu-secondary .menu__item-opacity:hover { background: var(--trans); } .menu__item-opacity { opacity: 0.33; } .menu__item .icon_default-color svg { fill: var(--icon-color); } .menu-type-visibility .menu__group-head .space ws-icon { --icon-color: var(--base-txt-btn-w); } .menu-type-visibility .menu__group-head .cnt { color: var(--base-txt-btn-w); } .menu-type-visibility .menu__group { --step-color: var(--base-txt-primary); } .menu-type-visibility .menu__item-group { --icon-color: var(--base-txt-primary); } .menu-type-visibility .sw_pre.sw_act .sw { background: var(--base-txt-primary); } .menu-type-subscribers .menu__group-head .space ws-icon { --icon-color: var(--base-txt-btn-a); } .menu__toggle-search-chosen { ws-btn[data-role="toggle-on"] { display: none; } ws-btn[data-role="toggle-off"] { display: block; } ws-btn[disabled][data-role="toggle-off"] { display: none; } &.menu__toggle-search-chosen-not-inited { display: none; } &.menu__toggle-search-chosen-active { ws-btn[data-role="toggle-on"] { display: block; } ws-btn[data-role="toggle-off"] { display: none; } } } .menu__group-googleDrive .menu__item { position: relative; cursor: pointer; } .menu__group-googleDrive .menu__item iframe { position: absolute; left: 0; top: 0; right: 0; bottom: 0 } #datepickerMenu div[data-container="calendar"] { min-width: 252px; height: 294px; } #datepickerMenu .menu__text.menu__text-title { font: var(--font-ui-12-mini-reg); color: var(--base-txt-muted); text-align: center; } #datepickerMenu .menu__text.menu__text-title:not(.hiddenBlock) + .menu__group { padding-top: 0; } .menu__item .label_client_sm:first-child { margin-left: 0; } .menu__item.menu__item-task.menu__item-task-completed { .flex_content { color: var(--base-txt-tertiary); text-decoration-line: line-through; text-decoration-color: var(--base-line-primary); text-decoration-thickness: calc(var(--screen-px)* 1.5); } task-stage { opacity: .5; } &:not(.selected) .space-ava { display: none; } } .menu.menu-unloading { pointer-events: none; } .menu.menu-unloading > div { opacity: 0.6; } .menu.menu-unloading:after { position: absolute; display: block; content: ""; border: unset; animation: loader .6s linear infinite; border-radius: 50%; padding: 2px; background: conic-gradient(from 90deg at 50.17% 50%, #73C7FF -7.5deg, rgba(255, 255, 255, 0) 41.25deg, rgba(255, 255, 255, 0) 93.75deg, #FFFFFF 179.31deg, #FFD6F6 258.75deg, #73C7FF 352.5deg, rgba(255, 255, 255, 0) 401.25deg); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; width: 16px; height: 16px; top: calc(50% - 8px); left: calc(50% - 8px); } .has-menu-h40 .menu__item { padding: 4px 10px 4px 6px; /* like .commandTool__body .menu__item */ } .menu__item-task ws-icon[name=checkbox] { --icon-size:16px; margin-right:4px; } .menu__group-checkbox .menu__item-task.menu__item-active { background: var(--base-hlt-hover); } @media (max-width: 480px) { #confirmMenuV2.menu-mode-auto { max-width: unset; .menu__group-head { border-bottom: unset; } .menu__group-buttons { &> ws-btn:first-child button { border-radius: 12px 0 0 12px !important; } &> ws-btn:last-child button { border-radius: 0 12px 12px 0 !important; } } } } .menu__item-menu { padding-left: 0; padding-right: 0; } .menu__group.flex_row > .menu__item { overflow: hidden; } .menu__group.flex_row > .menu__item > .in { overflow: hidden; text-overflow: ellipsis; } .menu__item:not(.selected) .space-onHover { display: none; } .menu__group-projects.menu__group-checkbox .menu__item-group > .space:first-child { width: 24px; } .menu__dashboard .menu__item:last-child ws-icon:last-child{ display: none; } ws-icon[class^="proj_folder_color"] { --icon-color: var(--folder-color); } .menu.menu-active:has(.menu__group-picker) { display: flex !important; flex-direction: column; } .menu__item ws-icon.narrow { width: 24px; } @media (min-width: 481px) { .menu__item .onhover { display: none } .menu__item:hover .onhover, .menu__item.selected .onhover { display: inline-flex; } } .menu-type-account_contacts .menu__item span.gray { flex-shrink: 2; } .task-context-menu .menu__item:not(.menu__item-active) ws-btn { display: none; } .task-context-menu .menu__group { display: grid; grid-template-columns: 1fr 1fr; } /*.task-context-menu .menu__item {*/ /* width: 140px;*/ /*}*/ /* спроба легко фіксанути розмір боксу правої іконки ГЛОБАЛЬНо */ .menu__item .space[data-role="right_icon"], .menu__item > ws-icon:not(:first-child):last-child { width: 20px; } /*#quickTaskMenu, #quickUserMenu, #quickBookmarkMenu,*/ /*#quickUserPhoneMenu, #quickUserMailMenu, #quickProjectMenu,*/ /*#quickExternalLinkMenu*/ /*{*/ /* .menu__item > ws-icon {*/ /* width: 20px;*/ /* }*/ /*}*/ .menu__group-row .menu__item > ws-icon { width: 20px; } /* Деякі правки для меню вибору статусу */ #topicStatus .space{ height: 30px; } #topicStatus ws-emoji{ width: 24px; height: 24px; } .menu__group-taskHead { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 6px; } .menu__group-taskHead .menu__item { --hint-dir: top; justify-content: center; flex: 1; &:first-child { --hint-dir: top_right; } &:last-child { --hint-dir: top_left; } } .menu__group-taskHead .menu__item > .in { display: none; } @media (max-width: 480px) { .menu.menu-mode-auto.menu-picker .menu__group-title { border-top: unset; padding: 0 18px; & + .scrollZone { box-shadow: unset; } } .menu.menu-mode-auto { .menu__group-picker { border-top: unset; padding: 0; /* imitate .menu__group__wrapper */ .editBlock__picker__body { margin: 0 20px; padding: 8px !important; background: var(--base-cont-mod-top); border-radius: 12px; min-height: 36px; align-content: center; } } .menu__group-picker:has(+ .menu__group-title) .editBlock__picker__body { margin-top: 8px; margin-bottom: 8px; } .editBlock__picker { cursor: unset; background: unset !important; /* imitate .menu__group-head */ .editBlock__picker__header { position: relative; inset: unset; background: unset; backdrop-filter: unset; height: var(--menuItem-height); padding: 16px 20px; box-sizing: border-box; } .label { font: var(--font-ui-18-title-2-semi); color: var(--base-txt-primary); &.flex_row { gap: 0; } .editBlock__picker__counter { font: var(--font-ui-18-title-2-bold); color: var(--base-txt-btn-a); padding: 0 6px; } } } } .menu-mode-auto { background: var(--base-cont-mod-mid); } .menu-mode-auto .menu__group__wrapper .menu__group { background: var(--base-cont-mod-top); } .menu-mode-auto .menu__group__wrapper .menu__group-empty { background: none; } .menuFake .menu__group__wrapper .menu__group-delete, .menu-mode-auto .menu__group__wrapper .menu__group-delete { background: var(--base-hlt-w-easy); } .menu-mode-auto .menu__group__wrapper .menu__group.menu__group-wrapSlider { padding: 0; background: unset; } .w_keyboard .menu__group__wrapper + .menu__group-bottom { display: none !important; } .menu-h48 { --menuGroup-padding: 6px; --menuGroup-borderRadius: 16px; --menuItem-height: 48px; --menuItem-iconSizeMd: 48px; --menuItem-iconSizeSm: 36px; --menuItem-borderRadius: 10px; /* 16px - 6px */ --menuBtn32-borderRadius: 8px; /* 16px - (48px - 32px) / 2 */ --menuBtn36-borderRadius: 10px; /* 16px - (48px - 36px) / 2 */ /* це можливо для всіх моб. розмірів підійде */ .menu__group__wrapper:has(+ .menu__group-bottom) { gap: 8px; padding: 8px 20px; } .menu__group__wrapper > .scrollZone, .menu__group-scrollZone > .scrollZone { padding: 8px 0; } .menu__group-title .menu__group__title { height: var(--menuItem-height); } .menu__group-head { font: var(--font-ui-18-title-2-semi); height: var(--menuItem-height); box-sizing: border-box; } .menu__group-head .cnt { font: var(--font-ui-18-title-2-bold); } .menu__group-search input { font: var(--font-ui-18-title-2-reg); height: 24px; /* має відповідати line-height шрифта, щоб літери не обрізалися */ border-radius: unset; } .menu__group-search .in ~ a.delete { opacity: 0; pointer-events: none; display: block; border-radius: 50%; transition: opacity .15s ease-out; } .menu__group-search .search_started ~ a.delete { opacity: 1; pointer-events: auto; transition: opacity .15s ease-in; } .menu__group-search .in ~ a.delete ws-icon { --icon-size: 24px; --icon-color: var(--base-txt-tertiary); width: 32px; height: 32px; transform: rotate(45deg); transition: transform .15s ease-out; } .menu__group-search .search_started ~ a.delete ws-icon { transform: rotate(0deg); transition: transform .15s ease-in; } .menu__group-search input::placeholder{ font: var(--font-ui-18-title-2-reg); } .menu__group-search input::-moz-placeholder{ font: var(--font-ui-18-title-2-reg); } .menu__group-search input::-webkit-input-placeholder{ font: var(--font-ui-18-title-2-reg); } .menu:has(.menu__group-head) .menu__group-search input { font: var(--font-ui-18-title-2-reg); } .menu__group-picker .editBlock__picker__search { width: 120px; } *:not(.chip) > span.av_sm { transform: scale(1.3333333); /* 32/24 */ } *:not(.chip) > ws-icon.av_sm.av_sm { width: 32px; height: 32px; border-radius: 50%; } *:not(.chip) > img.av_sm { width: 32px; height: 32px; border-radius: 50%; } .ava_group .av_sm { transform: unset !important; } .ava_group img.av_sm { width: 24px; height: 24px; } .ava_group .more { min-width: 24px; line-height: 24px; } .ava_group-small .av_sm { transform: scale(calc(20 / 24)) !important; } .ava_group-small img.av_sm { width: 24px; height: 24px; } .ava_group-small .more { min-width: 20px; height: 20px; line-height: 20px; } /* .menu__group__wrapper .menu__group.menu__group-taskHead .menu__item { border-radius: var(--menuGroup-borderRadius); } */ .menu__group__wrapper .menu__group-taskButs { padding: var(--menuGroup-padding) !important; } .menu__group__wrapper .menu__group-taskButs ws-btn:only-child { width: 100%; } .menu__group__wrapper .menu__group .btn-36 { border-radius: var(--menuBtn36-borderRadius); } .menu__group__wrapper .menu__group .btn-32 { border-radius: var(--menuBtn32-borderRadius); } .menu__group__wrapper .menu__toggle-search-chosen:has(.btn-32) { padding-right: 2px; } .menu__group__wrapper .menu__group.menu__group-empty { margin: 0 !important; padding: 10px; } .menu__item, .menu__itemFake, .menu__group__wrapper .menu__group .menu__item { border-radius: var(--menuItem-borderRadius); padding: 0 6px; height: var(--menuItem-height); font: var(--font-ui-16-title-3-reg); } &:has(.menu__group-head) .menu__group-search, .menu__group-search { min-height: var(--menuItem-height); box-sizing: border-box; } .menu__group__wrapper .menu__group-search { padding-top: 0; padding-bottom: 0; } .menu__group-search > ws-icon { --icon-size: 24px; width: var(--menuItem-iconSizeSm); height: var(--menuItem-iconSizeSm); } .menu__item ws-icon { --icon-size: 24px; width: var(--menuItem-iconSizeMd); height: var(--menuItem-height); } .menu__item ws-icon.narrow { width: var(--menuItem-iconSizeSm); } .menu__group-select .menu__item ws-icon[name=check], .menu__item ws-icon[name=checkbox], .menu__item ws-icon[name=radio] { --icon-size: 20px; width: var(--menuItem-iconSizeSm); height: var(--menuItem-height); } .menu__item .space[data-role="right_icon"], .menu__item > ws-icon:last-child, .menu__item > .role_ico:last-child ws-icon { width: var(--menuItem-iconSizeSm); } .menu__item ws-icon[name=lock-fill], .menu__item .space.space-lock ws-icon[name=lock_sm], .menu__group-visibility .menu__item ws-icon[name=lock_sm] { --icon-size: 24px; width: 32px; height: 32px; border-radius: 50%; margin: 0 10px; } .menu__item .flex_content, .menu__itemFake .flex_content { padding: 0 4px 0 6px; } .menu__group__wrapper .menu__group.menu__group-users .menu__item-group, .menu__group__wrapper .menu__group.menu__group-users .menu__item-subset, .menu__group__wrapper .menu__group.menu__group-projects .menu__item-subset, .menu__group__wrapper .menu__group.menu__group-projects .menu__item-group { padding: 0 6px; } .menu__group__wrapper .menu__group-buttons { height: var(--menuItem-height); box-sizing: border-box; } .menu__item span.proj_color ws-emoji, .menu__item ws-icon.proj_color { --icon-size: 24px; width: 32px; height: 32px; } .menu__item span.space-projectIco ws-icon.proj_color, .menu__item span.space-projectIco .proj_color ws-emoji, .menu__item ws-icon.proj_color ws-emoji { --icon-size: 24px; width: 24px; height: 24px; } span.space, span.space > .avatar { width: var(--menuItem-iconSizeMd); height: var(--menuItem-height); } span.space-20 { width: var(--menuItem-iconSizeSm); } span.space-24 { width: var(--menuItem-iconSizeSm); } &.menu-userCard .menu__item > .special_ico ws-icon { width: var(--menuItem-iconSizeSm); } .menu__item .parent_line, .menu__item .parent_arc { --level-dot-size: calc(var(--screen-px) + 6px); width: var(--menuItem-iconSizeSm); } .menu__itemFake-userCard .av.space-ava-28 { margin-left: 6px; margin-right: 6px; } .menu__itemFake-userCard .av.space-ava-28 span.av_sm { transform: unset; } span.space.space-ava-28 { width: var(--menuItem-iconSizeSm); height: var(--menuItem-iconSizeSm); } .space-ava-28 .av_sm { --ava-scale: calc(36 / 24); } .step { height: var(--menuItem-height); &.step-32 { width: var(--menuItem-iconSizeMd); } &.step-24 { width: var(--menuItem-iconSizeSm); } &:after { width: 5px; height: 5px; } ~ .in { font: var(--font-ui-14-regular-semi); } } .menu__group-projects.menu__group-checkbox .menu__item > .space:first-child { width: var(--menuItem-iconSizeSm); } .menu__group-users.menu__group-select .menu__item > .space-24:first-child, .menu__group-users.menu__group-select .menu__itemFake > .space-24:first-child, .menu__group-users.menu__group-checkbox.menu__group-collapsed .menu__item > .space-24:nth-child(2), .menu__group-users.menu__group-checkbox.menu__group-collapsed .menu__itemFake > .space-24:nth-child(2), .menu__group-users.menu__group-select .menu__item .step-24, .menu__group-users.menu__group-select .menu__itemFake .step-24 { width: var(--menuItem-iconSizeMd); } .menu__group-bottom:last-child { padding: 4px 28px calc(4px + var(--sa-bot)); height: var(--menuItem-height); margin-bottom: 0; } .menu__group__wrapper .menu__group-bottom { padding: 8px; } &> .menu__group__wrapper { padding-bottom: max(20px, calc(4px + var(--sa-bot))); } .menu__group-select-box .menu__item__wrapper:not(:has(.btn-user-menu)) { flex-wrap: wrap; .menu__item.menu__item { min-width: unset; max-width: unset; flex-grow: 1; } } .menu__group-picker ~ .tagsSingleSelect .tagsSingleSelect__group__content, &.menu-picker .tagsSingleSelect .tagsSingleSelect__group__content { gap: 8px; padding: 0 6px; } .menu__group-picker ~ .tagsSingleSelect .tagsSingleSelect__group__content:has(.menu__item:not(.menu__item-picked)), &.menu-picker .tagsSingleSelect .tagsSingleSelect__group__content:has(.menu__item:not(.menu__item-picked)) { padding-bottom: 8px; } .menu__group-picker ~ .tagsSingleSelect .tagsSingleSelect__item, &.menu-picker .tagsSingleSelect .tagsSingleSelect__item { padding: 0; height: 32px; } .menu__group-picker ~ .tagsSingleSelect .tagsSingleSelect__item .flex_content, &.menu-picker .tagsSingleSelect .tagsSingleSelect__item .flex_content { padding: 0; } .editBlock__picker-tags .editBlock__picker__item, .tagsSingleSelect__item span.tag { height: 32px; padding: 0 12px 0 9px; border-radius: 16px; } .editBlock__picker-tags .editBlock__picker__item:before, .tagsSingleSelect__item span.tag:before { width: 14px; height: 14px; border-radius: 50%; margin: 0 6px 0 0px; } .editBlock__picker-tags .editBlock__picker__item { padding-right: 6px; } .editBlock__picker-tags .editBlock__picker__item ws-icon[name=lock_sm] { margin-right: -2px; } } .menu-h44 { .menu__item, .menu__itemFake, .menu__group__wrapper .menu__group .menu__item { padding: 0 6px; height: 44px; font: var(--font-ui-16-title-3-reg); } .menu__item ws-icon { --icon-size: 24px; width: 44px; height: 44px; } .menu__group-select .menu__item ws-icon[name=check], .menu__item ws-icon[name=checkbox], .menu__item ws-icon[name=radio] { --icon-size: 20px; width: 32px; height: 44px; } .menu__item .space[data-role="right_icon"], .menu__item > ws-icon:last-child { width: 32px; } .menu__item .flex_content, .menu__itemFake .flex_content { padding: 0 4px 0 6px; } &#quickTaskMenu, &#quickUserMenu { .menu__item > ws-icon { width: 32px; } } } .menu__group-taskHead { gap: 8px; } .menu__group-taskHead .menu__item { flex-direction: column; overflow: hidden; /* height: 60px !important; */ padding: 6px !important; box-sizing: border-box; } .menu .menu__group-taskHead .menu__item ws-icon { --icon-size: 28px; width: 28px; height: 28px; } .menu__group-taskHead .menu__item > .in { display: block; font: var(--font-ui-10-nano-med); text-align: center; max-width: 100%; flex-grow: 0; flex-shrink: 0; box-sizing: border-box; } } .menu__group-taskButs { .btn.btn-sp-time, .btn.btn-sp-money, .btn.btn-g.btn-outline { box-shadow: 0 0 0 1px var(--base-line-secondary); } .btn.btn-sp-time:hover { box-shadow: 0 0 0 1px var(--costs-time-text); } .btn.btn-sp-money:hover { box-shadow: 0 0 0 1px var(--costs-money-text); } } .menuFake.ajax_form_replace { border-radius: 12px; box-shadow: var(--shadow-cont-major-outline); padding: 4px 0; .menu__group { margin: -4px 0; } } @media screen and (min-width: 481px) { #filterItem__order__menu .menu__item .column_hidden { --hint-dir: right; --hint-arrow: 6 0; } } #filterItem__order__menu .menu__item:not(.selected) .column_hidden { --icon-color: var(--base-txt-muted); } .menu__item--toggleDesc:not(.sw_act) { --icon-color: var(--base-txt-tertiary) !important; color: var(--base-txt-tertiary) !important; } #mobileCopiedMenu .clipped { padding: 24px 72px; &> ws-icon[name="ui_helper_suite/clipboard"] { margin: 0; } } .onboardingMenu { background: var(--colors-teal-alpha-750-a20); backdrop-filter: blur(4px); box-shadow: 0 0 1px var(--base-line-ghost); padding: 8px; border-radius: 20px; width: 320px; .menu__head { div { color: var(--base-txt-max); font: var(--font-ui-18-title-2-semi); padding: 6px 0; } span { color: var(--base-txt-secondary); font: var(--font-ui-12-mini-med); cursor: pointer; } } .menu__group-white { border-top: none; background: var(--base-cont-mid); box-shadow: var(--shadow-cont-major-outline); border-radius: 12px; padding: 0 0 4px 0; .menu__group-head { height: auto; padding-bottom: 8px; .flex_content { font: var(--font-ui-16-title-3-semi); } span { font: var(--font-ui-16-title-3-med); color: var(--base-txt-tertiary); b { font: var(--font-ui-16-title-3-bold); color: var(--base-txt-accent); } } } .menu__progress-track { padding: 4px; border-radius: 8px; background: var(--base-cont-mod-trans-low); box-shadow: var(--shadow-cont-minor-lineonly-outside); width: 100%; box-sizing: border-box; .menu__progress-bar { width: 20%; height: 8px; border-radius: 4px; background: var(--colors-teal-600); box-shadow: 0 0 1px var(--base-line-ghost); } } .menu__group__subset { padding: 16px 20px 12px 16px; } } .menu__itemFake { width: 100%; height: 44px; box-sizing: border-box; padding: 10px 16px; gap: 8px; border-top: 1px solid var(--base-line-ghost); cursor: pointer; .in { font: var(--font-ui-14-regular-med); color: var(--base-txt-accent); } ws-icon { display: none; &:first-child { display: inline-block; --icon-color: var(--base-txt-tertiary); } } &.menu__itemFake-done { ws-icon[name="task_done_sm-fill"] { display: inline-block; --icon-color: var(--colors-teal-750); } } &.menu__itemFake-current { &:before { content: ''; display: block; width: 4px; height: 28px; border-radius: 0 4px 4px 0; background: var(--colors-teal-750); margin-left: -16px; margin-right: 4px; } .in { color: var(--colors-teal-750); } ws-icon:first-child, ws-icon[name="arrows/arrow_drop_sm-right"] { display: inline-block; --icon-color: var(--colors-teal-750); } } &:hover:not(.menu__itemFake-current):not(.nohover) { ws-icon:first-child { --icon-color: var(--base-txt-secondary); } &:before { content: ''; display: block; width: 4px; height: 28px; border-radius: 0 4px 4px 0; background: var(--base-txt-ghost); margin-left: -16px; margin-right: 4px; } } &.nohover:hover { cursor: auto; } } } @media screen and (max-width: 480px) { .onboardingMenu { .menu__head { padding: 0 20px 0 16px; } } } .menu.menu-active.menu-type-mention { display: flex !important; flex-direction: column; overflow: hidden; }.message-container { position: fixed; bottom: 28px; left: 80px; z-index: 1024; transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; } .message-wrapper { display: block; transform: translateY(28px); transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; } .message-content { padding-bottom: 14px; } .message { padding: 12px; font: 14px/20px var(--font-base); min-height: 60px; width: 352px; margin: 0; border-radius: 12px; z-index: 1014; box-sizing: border-box; color: var(--base-txt-accent); display: flex; border: 1px solid var(--colors-graphite-500); backdrop-filter: blur(12px); background-color: var(--base-cont-top); background-clip: padding-box; } @media (max-width: 480px) { .message-container { left: 10px; bottom: calc(var(--footerMobile-height) + 4px); width: calc(100% - 20px); z-index: 1064; /* треба завжди бачити помилку */ } .message { width: 100%; } } .message .l {border-top-left-radius: 12px;border-bottom-left-radius: 12px;} .message .l, .message .r {position: relative;width: 36px;flex-shrink: 0;} .message .main {width: 254px;flex-shrink: 0;flex-grow: 0;} .message .main .header {display: flex;align-items: center;justify-content: space-between;} .message .main .header .title { flex-shrink: 1; flex-grow: 1; padding: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: var(--font-ui-16-title-3-bold) } .message-chat .main .header .title { padding: 0 8px; font: var(--font-ui-14-regular-bold); } .message .l.hidden {display: none} .message .l.hidden + .main {width: 290px;} .message .main .header .title:empty {display: none} .message .main .header .action:empty {display: none} .message .main .header .action {flex-shrink: 0;padding: 4px;} .message .main .header .action > div {max-width:100px;} .message .main .header .action ws-btn {max-width:100%;} .message .main .text { padding: 8px; font: var(--font-ui-14-regular-reg); color: var(--base-txt-accent); white-space: pre-wrap; word-break: break-word; } .message-chat .main .text { padding: 0 8px; margin: 2px 0 0 0; } .message .main .text:empty {display: none} .message .main .options {padding: 0 4px;display:flex;gap:4px;} .message .main .options > div {padding: 4px;flex-shrink: 1;/* width: 100%; */overflow: hidden} .message .main .options ws-btn {max-width: 100%} .message .l .indicator svg {width:36px;height:36px;rotate: -90deg} .message .l .indicator svg > circle { transition: all .5s linear; stroke: var(--colors-graphite-500)} .message .l .indicator {position: absolute;top:0;left:0;} .message .l .icon {position: absolute;top:0;left:0;padding:8px} .message .r .close { padding: 4px; } .message .r .close button { padding:0;} .message .l .icon svg {fill: var(--colors-graphite-500);} .message .l span.proj_color, .message .l span.avatar { position: absolute; top:6px; left:6px; width: 24px; height: 24px; border-radius:18px; } .message .l .av_nm { width: 24px; height: 24px; font: 12px / 24px var(--font-base) !important; } .message .l span.proj_color ws-emoji { width: 24px; height: 24px; transform:scale(0.6666) } /*MSG_VARIANT_A*/ .message.message-a {border-color:var(--base-hlt-focus);box-shadow: 0 8px 0 0 var(--base-hlt-focus);background-color: var(--base-hlt-easy);} .message.message-a .l .indicator svg > circle {stroke:var(--base-txt-btn-a);} .message.message-a .l .icon svg {fill:var(--base-txt-btn-a);} .message.message-a .main .header .title {color:var(--base-txt-btn-a);} /*MSG_VARIANT_B*/ .message.message-b {border-color:var(--base-hlt-b-focus);box-shadow: 0 8px 0 0 var(--base-hlt-b-focus);background-color: var(--base-hlt-b-easy)} .message.message-b .l .indicator svg > circle {stroke:var(--base-txt-btn-b);} .message.message-b .l .icon svg {fill:var(--base-txt-btn-b);} .message.message-b .main .header .title {color:var(--base-txt-btn-b);} /*MSG_VARIANT_G*/ .message.message-g {border-color:var(--base-hlt-g-focus);box-shadow: 0 8px 0 0 var(--base-hlt-g-focus);background-color: var(--base-hlt-g-easy)} .message.message-g .l .indicator svg > circle {stroke:var(--base-txt-primary);} .message.message-g .l .icon svg {fill:var(--base-txt-primary);} .message.message-g .main .header .title {color:var(--base-txt-primary);} /*MSG_VARIANT_S*/ .message.message-s {border-color:var(--base-txt-new-minor);box-shadow: 0 8px 0 0 var(--base-txt-new-minor);background-color: var(--base-hlt-alt-fresh)} .message.message-s .l .indicator svg > circle {stroke:var(--base-txt-new-major);} .message.message-s .l .icon svg {fill:var(--base-txt-new-major);} .message.message-s .main .header .title {color:var(--base-txt-new-major);} /*MSG_VARIANT_W*/ .message.message-w {border-color:var(--base-txt-notice-minor);box-shadow: 0 8px 0 0 var(--base-txt-notice-minor);background-color: var(--base-hlt-alt-notice)} .message.message-w .l .indicator svg > circle {stroke:var(--base-txt-notice-major);} .message.message-w .l .icon svg {fill:var(--base-txt-notice-major);} .message.message-w .main .header .title {color:var(--base-txt-notice-major);} /*MSG_VARIANT_D*/ .message.message-d {border-color:var(--base-hlt-w-focus);box-shadow: 0 8px 0 0 var(--base-hlt-w-focus);background-color: var(--base-hlt-w-easy)} .message.message-d .l .indicator svg > circle {stroke:var(--base-txt-alert-major);} .message.message-d .l .icon svg {fill:var(--base-txt-alert-major);} .message.message-d .main .header .title {color:var(--base-txt-alert-major);} /*MSG_VARIANT_INVERT*/ .message.message-i {border-color:var(--base-hlt-g-focus);box-shadow: 0 8px 0 0 var(--base-hlt-g-focus);background-color:var(--base-hlt-g-invert)} .message.message-i .l .indicator svg > circle {stroke:var(--base-txt-btn-flip);} .message.message-i .l .icon svg {fill:var(--base-txt-btn-flip);} .message.message-i .main .header .title {color:var(--base-txt-btn-flip);} .message.message-i .main .text {color:var(--base-txt-btn-flip);} .message.message-long { width: unset; } .message.message-long .main {width: auto;max-width:70vw;} .message.message-long .main .text {font: var(--font-ui-12-mini-reg);} .mobile .message.message-long .main .text {font: var(--font-ui-10-nano-reg);} .msg_ico { float: left; width: 40px; height: 40px; background: url(/assets/img/color/notifier_iconset.svg) no-repeat; margin: -4px 10px -4px 0; } .message .ico_r { margin: -3px -3px -3px 10px; transform: scale(0.8); } .message.shown { bottom: 24px; } #drag_notice .msg_ico { margin: 0 20px 0 0 } .freeze { padding: 15px 0 15px 0; font: bold 15px/20px var(--font-base); min-height: 32px; position: fixed; width: 100%; left: 0; bottom: 0; z-index: 1023; } .freeze2 { padding: 15px 0 15px 0; font: bold 15px/16px var(--font-base); min-height: 32px; } .freeze1line { font: bold 15px/36px var(--font-base); } .freeze i { font: italic 13px/16px var(--font-base) } .freeze a { font: 14px/16px var(--font-base) } .freeze a.button_r, .freeze ws-btn { margin: 0 30px 0 0; } .sleep, .sleep3 { min-height: 32px; position: relative; font: 16px/25px var(--font-base); color: var(--base-txt-secondary); margin: 50px auto 50px auto; width: 66%; } .sleep3 { text-align: center } .dataadd .sleep, .dataadd .sleep3 { width: 100% } .rightPanel .dataadd .sleep { align-items: center; margin-bottom: 28px; height: 100%; } .sleep2 { text-align: center; width: 300px; margin: 30px auto; height: 250px; font: 16px/25px var(--font-base); color: var(--base-txt-secondary); text-shadow: 1px 1px 0 var(--base-cont-top); background: url(/assets/img/color/funybricks.svg) no-repeat center 40px; } .sleep a.log, .sleep3 a.log { color: var(--base-txt-primary); border-bottom: 1px dashed var(--base-txt-accent) } .msg1line { line-height: 24px } .msg_text { margin-top: 4px } .msgstick { margin: 15px 0 -15px 0 } #settings .msgstick { margin: 15px 0 -15px 0 } p.tip .msg_ico { background-position: -280px 0; margin: 0 0 0 -40px; } .message .msg_ico { background-position: 0 0 } .access_denied .msg_ico, #drag_notice .msg_ico { background-position: -80px 0 } .freeze_reader .msg_ico { background: url(/assets/img/color/iconset.svg) no-repeat -240px -1320px / 280px 3200px } .freeze2 .msg_ico { background-position: -120px 0; left: 20px; top: 16px; position: absolute; } .alert .msg_ico { background-position: -40px 0 } .sleep .msg_ico { background-position: -200px -40px; position: static; float: left; margin: 5px 10px 0 0 } .sleep3 .msg_ico { background-position: -200px -40px; position: static; float: none; display: block; margin: 0 auto 30px auto } .access_denied { padding: 20px; font: 14px/20px var(--font-base); color: var(--base-txt-secondary); white-space: nowrap; width: 360px; } .access_denied h3 { margin: 0 0 2px; color: var(--base-txt-primary) } .access_denied .msg_ico { margin: 2px 10px 0 0; } .access_denied .button { margin: 0 0 0 50px } .settings .msg_ico { float: left; position: static; width: 40px; height: 40px; margin: -12px 10px 0 0; background: url(/assets/img/color/notifier_iconset.svg) no-repeat; } /* TODO: PALETTE_FIX */ .message a { color: inherit; text-decoration: underline } .error_sm { color: var(--base-txt-primary); background: var(--base-hlt-alt-notice); font: italic 13px/20px var(--font-base); padding: 10px 15px; /* margin:0 0 10px 0; */ } .error_sm .ico_l { margin: 0 10px 0 0 } .freeze { color: var(--white-accent); background: var(--colors-blue-930) } .freeze2 { color: var(--white-accent); background: var(--colors-blue-930); padding: 15px 20px 15px 80px; font-size: 14px; margin: 12px 0 0 0; position: relative; } .freeze2 b { font: 18px var(--font-base) } .freeze a { color: var(--colors-interblue-400) } .freeze_reader { background: var(--colors-amber-desat-400-ultra); color: var(--base-txt-alt-dark-major); font-weight: normal; } .freeze_reader a { color: var(--colors-interblue-900); font: inherit } .freeze_reader .esc { float: right; transform: scale(1.25); margin: 10px 15px; } @media (max-width: 768px) { .freeze2 {font-size:12px; padding-left:50px;} .freeze2 .msg_ico {left:5px;} .freeze2 b {font-size:16px;} } @media (max-width: 480px) { .freeze2 {font-size:12px; padding-left:50px;} .freeze2 b {font-size:12px; } .freeze2 b:before {content:'. '} .error br, .freeze br, .message br, .alert br,.freeze2 br {display:none;} .message .main {flex-grow: 1; flex-shrink: 1; width: unset; overflow: hidden;} .message .main .text { text-wrap-style: balance; } } @media print { .message { display: none } } /* FOREGROUND MESSAGE */ .foreground-message { position: fixed; padding: 12px 24px 12px 12px; background: var(--base-cont-top-opac); backdrop-filter: blur(8px); z-index: 1030; border-radius: 12px; box-shadow: var(--shadow-cont-minor-lineonly-inside); transition: all .3s ease; -webkit-transition: all .3s ease; display: flex; gap: 12px; width: 360px; margin-left: -180px; left: 50%; top: 0; opacity: 0; transform: scale(0.9); pointer-events: none; overflow: hidden; } .foreground-message.bell { transform: scale(0.5); top: 145px; left: 30px; margin-left: 0; transform-origin: left center; width: auto; max-width: 300px; background: #253341bb; z-index: 1023; color: var(--white-accent); } .foreground-message.bell .body { color: var(--white-secondary); padding: 6px 0 0 4px; font-size: 12px; line-height: 12px; display: flex; flex-wrap: wrap; row-gap: 4px; column-gap: 4px; max-width: 200px; } .foreground-message.bell .icon { display: none; } .foreground-message .progress { height: 1px; background: var(--base-txt-secondary); position: absolute; bottom: 0; left: 0; transition: width 2s linear; -webkit-transition: width 2s linear; } .foreground-message.shown { top: 50px; opacity: 1; transform: scale(1); pointer-events: auto; } .foreground-message.bell.shown { top: 145px; left: 56px; } .foreground-message .icon { flex-grow: 0; flex-shrink: 0; } .foreground-message .in { flex-grow: 1; flex-shrink: 1; overflow: hidden; } .foreground-message .in .title { font: var(--font-ui-14-regular-med); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .foreground-message .in .body { word-break: break-word; } @media (max-width: 480px) { .foreground-message { width: auto; left: 10px; right: 10px; margin: 0; } .foreground-message.shown { top: 10px; } } /* PAGE RELOADER */ .page-reloader { position: fixed; padding: 12px 12px 12px 24px; background: var(--base-cont-top-opac); backdrop-filter: blur(8px); z-index: 1050; top: -40px; border-radius: 40px; box-shadow: var(--shadow-brd-focus-alt); transition: top 0.3s ease; -webkit-transition: top 0.3s ease; } .page-offline > span, .page-reloader > span { margin-right: 12px; font: var(--font-ui-13-small-semi); font-family: monospace; } .page-reloader.forceReload { z-index: 1032; } body.offlineMode .page-reloader { display: none; } .page-offline { position: fixed; backdrop-filter: blur(8px); z-index: 1050; top: -40px; border-radius: 40px; transition: top 0.3s ease; -webkit-transition: top 0.3s ease; box-shadow: var(--shadow-brd-error-focus); background: var(--base-hlt-w-easy); padding: 12px; } .page-offline.page-online { box-shadow: var(--shadow-brd-focus-b); background: var(--base-hlt-b-easy); } .page-offline.page-slow { box-shadow: var(--shadow-brd-focus); background: var(--base-hlt-easy); } @media screen and (max-width: 480px) { /* .page-offline, */ .page-reloader { transform: translateX(-50%); left: 50% !important; right: auto !important; max-width: calc(100% - 6vw); box-sizing: border-box; span { flex-shrink: 1; min-width: 0; } } /* TODO на пробу, але треба кольори проставить нормальні */ .page-offline { pointer-events: none; box-shadow: unset !important; inset: 0 0 auto 0 !important; height: 16px; background: black; color: #fff; border-radius: unset; justify-content: center; padding: 0; z-index: 99999; span { font: var(--font-ui-10-nano-reg); font-family: var(--font-mono); } &.page-online { background: #8162e0; } &.page-slow { background: grey; } } } .freeze { &.freeze--pay { padding: 0; background: var(--colors-graphite-trans-990); backdrop-filter: blur(12px); z-index: 1001; } .alertblock { padding: 0; margin: 0; border-radius: unset; box-shadow: unset; .alertblock__close { position: absolute; right: 14px; top: 12px; color: var(--white-tertiary); font: 12px / 20px var(--font-base); display: flex; gap: 4px; cursor: pointer; &:hover { color: var(--white-secondary); } .alertblock__close-icon { background-position: -100px -440px; filter: invert(1); margin: 0; } } .text { background: unset; margin: 0 auto; display: grid; align-items: center; grid-template-columns: 1fr 1fr; min-height: 108px; box-sizing: border-box; @media (min-width: 1440px) { padding: 18px 0; width: 880px; /* 440px * 2 */ } @media (min-width: 1024px) and (max-width: 1439px) { padding: 10px 0; width: 784px; /* 392px * 2 */ } @media (min-width: 768px) and (max-width: 1023px) { grid-template-columns: 1fr; gap: 20px; padding: 32px 40px 24px; } @media (min-width: 480px) and (max-width: 767px) { grid-template-columns: 1fr; gap: 20px; padding: 32px 40px 24px; } @media (max-width: 479px) { grid-template-columns: 1fr; gap: 20px; padding: 48px 16px 24px; } .text__text-column { text-wrap-style: pretty; } .text__form-column { display: flex; flex-direction: column; gap: 8px; } .text__text-column-secondary { min-height: 68px; display: flex; flex-direction: column; justify-content: center; gap: 2px; } .text__title { margin: 0; color: var(--base-txt-alt-light); font: 18px / 24px var(--font-base); font-weight: 590; margin-bottom: 4px; } .text__text { margin: 0; font: 13px / 20px var(--font-base); color: var(--white-secondary); } form { padding: 0; display: flex; gap: 8px; .drop_select { margin: 0; border-radius: 4px; display: flex; align-items: center; justify-content: space-between; gap: 8px; box-sizing: border-box; width: 100%; height: 40px; color: var(--base-txt-primary); @media (min-width: 768px) and (max-width: 1023px) { max-width: 320px; } @media (min-width: 480px) and (max-width: 767px) { max-width: 266px; } span.drop { position: static; inset: 0; margin: 0; border: unset; background-color: unset; } } a.pay { margin: 0; color: var(--base-txt-alt-light); min-width: 135px; box-sizing: border-box; @media (min-width: 480px) and (max-width: 767px) { min-width: 126px; } @media (max-width: 479px) { min-width: 102px; } } } .text__text-secondary, .text__bullet { font: 13px / 20px var(--font-base); color: var(--white-tertiary); a { text-decoration: underline; text-underline-position: under; color: var(--colors-interblue-600); &:hover { text-decoration: unset; } } .ico_mail { margin: 0; } } .text__bullets { display: flex; flex-wrap: nowrap; min-height: 24px; align-items: center; @media (max-width: 479px) { padding-top: 8px; gap: 8px; flex-direction: column; align-items: flex-start; } .text__bullet { flex-shrink: 0; @media (min-width: 480px) { &:nth-child(n+2):before { content: '•'; width: 25px; display: inline-block; text-align: center; } } } } .whitespace-nowrap { white-space: nowrap; } } } } body[data-color] .freeze--pay .drop_select span.drop { background-position: -365px -215px; } :root { --mobile-primary-menu-default-opened-swipe-width: 40px; --mobile-primary-menu-half-opened-swipe-width: 64px; --mobile-primary-menu-full-opened-swipe-width: 88px; --mobile-primary-menu-swipe-width: var(--mobile-primary-menu-default-opened-swipe-width); } #mobileMenu__overlay { display: none; z-index: 1031; position: fixed; left: 0; top: 0; right: 0; bottom: 0; } body.mobileMenuHidden #mobileMenu__wrapper { display: none; } body.mobileMenuHalfOpen, body.mobileMenuOpen { #mobileMenu__overlay { display: block; } } .mobileMenu__wrapper { position: fixed; z-index: 1032; top: calc(100% - var(--primary-menu-height)); height: 100%; left:0; right:0; display: none; transition: top .3s ease-in-out; box-shadow: 0 -1px 0 var(--base-line-tertiary); } body.mobileMenuHalfOpen .mobileMenu__wrapper { top: calc(100% - var(--mobile-primary-menu-swipe-zone-height) - var(--mobile-primary-menu-half-opened-conent-height) - var(--primary-menu-height)); } body.mobileMenuHalfOpen .mobileMenu__bar { /* display: none */ } body.mobileMenuOpen .mobileMenu__wrapper { top: calc(100% - var(--mobile-primary-menu-swipe-zone-height) - var(--mobile-primary-menu-full-opened-conent-height) - var(--primary-menu-height)); } .mobileMenu { background: var(--base-cont-top-elevated); /* box-shadow: 0 0 40px -2px var(--colors-graphite-trans-400); */ transition: border-radius .3s ease-in-out, box-shadow .15s linear .15s; height: 100%; } .mobileMenu__head { height: var(--mobile-primary-menu-swipe-zone-height); display: flex; align-items: center; justify-content: center; z-index: 1; position: relative; pointer-events: none; } .mobileMenu__swipe { display: block; width: var(--mobile-primary-menu-swipe-width); height: 3px; border-radius: 3px; background-color: var(--base-txt-muted); cursor: pointer; transition: width .3s ease, background-color .3s ease; } body[data-page="none"] .mobileMenu__wrapper { background: var(--base-cont-top-elevated); } @media (max-width: 480px) { .mobileMenu__wrapper { display: block; box-shadow: var(--hairline-top); } .mobileMenu__wrapper-loaded { box-shadow: unset; } } .mobileMenu__wrapper-loaded .mobileMenu { box-shadow: var(--hairline-top); } body.mobileMenuHalfOpen .mobileMenu__wrapper, body.mobileMenuOpen .mobileMenu__wrapper { box-shadow: unset; } body.mobileMenuHalfOpen .mobileMenu, body.mobileMenuOpen .mobileMenu { border-radius: 20px 20px 0 0; box-shadow: var(--hairline-top), 0 600px 0 400px var(--base-cont-mod-top), 0 0 40px -2px var(--colors-graphite-trans-400); } body.mobileMenuHalfOpen .mobileMenu__head, body.mobileMenuOpen .mobileMenu__head { padding: 0 12px; } .mobileMenu__wrapper.swype-self .mobileMenu__swipe { background-color: var(--base-txt-accent); } body.mobileMenuHalfOpen .mobileMenu__swipe { --mobile-primary-menu-swipe-width: var(--mobile-primary-menu-half-opened-swipe-width); background-color: var(--base-txt-accent); } body.mobileMenuOpen .mobileMenu__swipe { --mobile-primary-menu-swipe-width: var(--mobile-primary-menu-full-opened-swipe-width); background-color: var(--base-txt-accent); } .mobileMenu__bar { display: flex; padding: 0 8px; height: var(--mobile-primary-menu-tap-bar-height); box-sizing: border-box; position: fixed; left: 0; right: 0; bottom: calc(1px + max(var(--sa-bot), 13px)); justify-content: center; } .mobileMenu__bar__item { flex-shrink: 0; flex-grow: 0; display: flex; flex-direction: column; align-items: center; width: 20%; height: 48px; font: var(--font-ui-10-nano-med); color: var(--base-txt-secondary); transition: opacity 0.1s ease-out, transform 0.3s ease-out; --item-offset: 0; --item-scale: 1; transform: translateX(var(--item-offset)) scale(var(--item-scale)); &:hover { color: var(--base-txt-secondary); } } .mobileMenu__bar .mobileMenu__bar__item { box-sizing: border-box; padding-top: 8px; line-height: 12px; } .mobileMenu__bar__item--tab { border-radius: 16px; } .mobileMenu__bar__item--general { z-index: 0; } .mobileMenu__bar__item--plus { z-index: 1; padding-top: 0; padding-bottom: 2px; justify-content: flex-end; } .mobileMenu__bar__item--part1 > .ripple-host, .mobileMenu__bar__item--general > .ripple-host { border-radius: 50%; width: 100%; height: auto; aspect-ratio: 1 / 1; top: 50%; left: 50%; transform: translate(-50%, -50%); } .mobileMenu__bar__item--general > .ripple-host { clip-path: inset(calc((100% - 25px) / 2 - 12px) 0 0 0); } .mobileMenu__bar__item--general { transition: opacity .18s ease-out .12s, transform .3s ease-out 0s; &.item1 { transition-duration: .24s, .3s; transition-delay: .06s, 0s; } &.item4 { transition-duration: .24s, .3s; transition-delay: .06s, 0s; } } .mobileMenu__bar.debug .mobileMenu__bar__item--general, body.mobileMenuOpen .mobileMenu__bar__item--general, body.mobileMenuHalfOpen .mobileMenu__bar__item--general { opacity: 0; --item-scale: 0.75; transition: opacity .18s ease-in, transform .3s ease-in; &.item1 { --item-offset: 200%; transition-duration: .24s, .3s; } &.item2 { --item-offset: 100%; } &.item3 { --item-offset: -100%; } &.item4 { --item-offset: -200%; transition-duration: .24s, .3s; } } body[data-page="account_dashboard"] .mobileMenu__bar__item--part1 { display: none; } .mobileMenu__bar__item--part1 { opacity: 0; } body:not(.mobileMenuHalfOpen) .mobileMenu__bar__item--part1 { transition: opacity 0.05s ease-out, transform 0s ease 0.05s; } body.mobileMenuHalfOpen .mobileMenu__bar__item--part1 { opacity: 1; transition: opacity 0.1s ease 0.2s, transform 0.3s ease 0.2s; &.item1 { --item-offset: 100%; } &.item2 { --item-offset: -100%; } } body.mobileMenuHalfOpen .mobileMenu__wrapper.swype-self .mobileMenu__bar__item--part1 { transition-delay: unset; } body.mobileMenuOpen .mobileMenu__bar__item--part1 { opacity: 0; &.item1 { --item-offset: 100%; } &.item2 { --item-offset: -100%; } } .mobileMenu__bar__item.menu_open { color: var(--base-txt-accent); } .mobileMenu__plus { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; width: 32px; height: 32px; border: 1.5px solid transparent; border-radius: 50%; background: linear-gradient(var(--base-cont-top-elevated), var(--base-cont-top-elevated)) padding-box, var(--gradient-btn-secondary) border-box; } .mobileMenu__plus .icon_plus { position: relative; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; transition: transform .25s ease-in-out; &:before, &:after { content: ''; position: absolute; background: var(--base-txt-primary); width: 2px; height: 12px; border-radius: 2px; } &:after { transform: rotate(90deg); } } body.mobileMenuOpen .mobileMenu__plus:before, body.mobileMenuHalfOpen .mobileMenu__plus:before { content: ''; position: absolute; background: var(--base-hlt-g-hover); border-radius: inherit; inset: 0; } body.mobileMenuOpen .mobileMenu__plus .icon_plus, body.mobileMenuHalfOpen .mobileMenu__plus .icon_plus { transform: rotate(135deg); } .mobileMenu__bar__icon { --icon-size: 28px; position: relative; width: var(--icon-size); height: var(--icon-size); } .mobileMenu__bar__icon ws-icon { --icon-color: var(--base-txt-tertiary); width: var(--icon-size); height: var(--icon-size); svg use:last-child:not(:first-child) { display: none; } } .mobileMenu__bar__icon .av_nm { transform: scale(calc(28 / 48)); transform-origin: left top; } .mobileMenu__bar__item.menu_open .mobileMenu__bar__icon ws-icon { --icon-color: var(--base-txt-accent); svg use:first-child { display: none; } svg use:last-child { display: block; } } .mobileMenu__counter { position: absolute; top: -2px; left: 50%; transform: translateX(30%); transition: all .2s ease-in-out; } .mobileMenu__counter span[class] { position: relative; display: inline-block; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 16px; box-shadow: 0 0 0 1px var(--base-line-tertiary) inset, 0 0 0 2px var(--base-cont-top-elevated); font: var(--font-ui-11-micro-semi); color: var(--sidebar-badge-txt); text-align: center; margin: 0; } .mobileMenu__counter span.cnt_new { background: var(--sidebar-badge-base); color: var(--sidebar-badge-txt); border: unset; } .mobileMenu__counter span.cnt_hot { background: var(--sidebar-badge-alert); color: var(--sidebar-badge-txt); border: unset; } .mobileMenu__counter span.cnt_warm { background: var(--sidebar-badge-upcoming); color: var(--sidebar-badge-txt); border: unset; } .mobileMenu__counter span.cnt_all { background: var(--sidebar-badge-ghost); color: var(--sidebar-badge-txt); border: unset; } .mobileMenu__counter team-timer span.cnt_new { background: var(--lbl-today-major); font-size: 0; min-width: unset; width: 8px; height: 8px; padding: 0; } #mobileMenu__event__counter span.cnt_new { background: var(--sidebar-badge-ghost); } #mobileMenu__event__counter span.cnt_mention { background: var(--sidebar-badge-alert); } .mobileMenu__content { position: absolute !important; /* height: calc(100% - var(--primary-menu-height) - var(--swipe-window-top)); */ top:100%; width:100%; padding: 12px 12px 0; overflow: hidden; opacity: 0; transition: opacity 0.5s ease, top 0.1s ease; box-sizing: border-box; } .mobileMenu__content-part1 { display: flex; flex-direction: column; gap: 12px; transition: opacity 0.5s ease, top 0.15s ease 0.15s; } body.mobileMenuHalfOpen .mobileMenu__content-part1 { opacity: 1; top: var(--mobile-primary-menu-swipe-zone-height); transition: opacity 0.5s ease, top 0.1s ease; } .mobileMenu__content-part2 { transition: opacity 0.5s ease, top 0.15s ease 0.15s; padding-top: 0; } body.mobileMenuOpen .mobileMenu__content-part2 { opacity: 1; top: var(--mobile-primary-menu-swipe-zone-height); transition: opacity 0.5s ease, top 0.1s ease; } body.mobileMenuOpen .mobileMenu__content-part1 { transition: opacity 0.1s ease, top 0.5s ease; } .mobileMenu__content__head { padding: 4px 0 calc(4px + var(--mobile-primary-menu-swipe-zone-height)); ws-icon[name="info_circle-line"] { --icon-color: var(--colorize-orange); --icon-size: 16px; width: 16px; height: 16px; } .mobileMenu__content__title { color: var(--base-txt-primary); font: var(--font-ui-16-title-3-bold); } .mobileMenu__content__hint { color: var(--base-txt-secondary); font: var(--font-ui-10-nano-reg); .in { padding: 0 6px; } } } .mobileMenu__plus { /* padding: 12px 24px; */ } .mobileMenu__card { padding: 16px; margin-bottom: 8px; border-radius: 16px; background: var(--base-hlt-g-hover); } .mobileMenu__card__buttons { gap: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--base-line-tertiary); } .mobileMenu__card__buttons ws-btn:first-child { flex-grow: 1; } .mobileMenu__profile { gap: 12px; height: 40px; padding-top: 20px; cursor: pointer; } .mobileMenu__profile .av_nm { transform: scale(0.84); margin: -4px; border-radius: 8px; } .mobileMenu__profile .in span:first-child { font: var(--font-ui-15-large-reg); color: var(--base-txt-accent); } .mobileMenu__profile .in span:last-child { font: var(--font-ui-12-mini-reg); color: var(--base-txt-secondary); } .mobileMenu__profile > ws-icon { width: 28px; height: 28px; margin-right: 6px; } .mobileMenu__pages { display: flex; flex-direction: column; padding: 12px 0; } .mobileMenu__pages-tiles { flex-direction: row; flex-wrap: wrap; gap: 12px; } .mobileMenu__pages__item { overflow: hidden; gap: 8px; padding: 16px; box-sizing: border-box; border-radius: 16px; cursor: pointer; } a.mobileMenu__pages__item { opacity: .15; pointer-events: none; } a.mobileMenu__pages__item[onclick], a.mobileMenu__pages__item[href] { opacity: 1; pointer-events: unset; } .mobileMenu__pages-tiles { --columns: 1; --gap: 12px; gap: var(--gap); .mobileMenu__pages__item { --item-bg-color: var(--base-hlt-g-hover); --ripple-color: var(--item-bg-color); --main-icon-color: var(--base-txt-btn-flip); --main-icon-bg-color: var(--base-hlt-g-invert-minor); --main-icon-border-color: var(--base-line-secondary); flex-grow: 1; flex-basis: calc( ( 100% - var(--gap) * (var(--columns) - 1) ) / var(--columns) ); background: var(--item-bg-color); border-radius: 24px; &.mobileMenu__pages__item--c { --main-icon-color: var(--base-txt-alt-light); --item-bg-color: rgba(20, 138, 108, 0.16); /* TODO var() */ --main-icon-bg-color: var(--colors-pine-800); } &.mobileMenu__pages__item--b { --main-icon-color: var(--base-txt-alt-light); --item-bg-color: rgba(157, 133, 229, 0.16); /* TODO var() */ --main-icon-bg-color: var(--base-hlt-b-invert); } &.mobileMenu__pages__item--a { --main-icon-color: var(--base-txt-alt-light); --item-bg-color: rgba(0, 153, 255, 0.16); /* TODO var() */ --main-icon-bg-color: var(--colors-interblue-700); } &.mobileMenu__pages__item--disabled { --main-icon-color: var(--white-max); --item-bg-color: var(--base-hlt-g-hover); --main-icon-bg-color: var(--base-btn-notice-minor); ws-icon.icon_main { box-shadow: none; } } ws-icon.icon_main { --icon-size: 24px; --icon-color: var(--main-icon-color); width: 40px; height: 40px; border-radius: 12px; background-color: var(--main-icon-bg-color); box-shadow: 0 0 0 1px var(--main-icon-border-color) inset; } .mobileMenu__pages__item__icons { justify-content: space-between; align-items: flex-start; ws-icon:last-child { --icon-color: var(--base-txt-tertiary); } } .in { color: var(--base-txt-accent); font: var(--font-ui-16-title-3-semi); } } &.mobileMenu__pages-tiles--sm { padding: 8px 0; .mobileMenu__pages__item { padding: 16px; border-radius: 16px; gap: 8px; ws-icon.icon_main { --icon-size: 24px; width: 32px; height: 32px; border-radius: 6px; } .in { color: var(--base-txt-accent); font: var(--font-ui-14-regular-med); } &.mobileMenu__pages__item--disabled { .in { color: var(--base-txt-muted); } } &.flex_column { .in { text-wrap-style: balance; } } } } &.mobileMenu__pages-tiles-2cols .mobileMenu__pages__item { --columns: 2; } &.mobileMenu__pages-tiles-3cols .mobileMenu__pages__item { --columns: 3; } } .mobileMenu__pages__item { .icon_main, .in { opacity: 0; transition: opacity .1s ease-out; } } body.mobileMenuOpen .mobileMenu__content-part2 .mobileMenu__pages__item, body.mobileMenuHalfOpen .mobileMenu__content-part1 .mobileMenu__pages__item { .icon_main, .in { opacity: 1; transition: opacity .2s ease-in .25s; } } /* .mobileMenu__pages__item:active, .mobileMenu__pages__item:hover { background: var(--base-hlt-g-pressed); -webkit-tap-highlight-color: transparent; outline: none; user-select: none; } .mobileMenu__pages__item-active { box-shadow: 0 0 0 1.5px var(--base-hlt-b-invert) inset; background: var(--base-cont-top-elevated); -webkit-tap-highlight-color: transparent; outline: none; user-select: none; } .mobileMenu__pages__item ws-icon:first-child { width: 28px; height: 28px; border-radius: 8px; box-shadow: 0 0 0 1px var(--base-line-secondary) inset; background: var(--base-txt-tertiary); --icon-size: 20px; --icon-color: var(--base-txt-alt-light); } .mobileMenu__pages__item-active ws-icon:first-child { background: var(--base-hlt-b-invert); } */ .mobileMenu__pages__item ws-icon[name*='chevron'] { --icon-color: var(--base-txt-secondary); } .mobileMenu__pages__item-active ws-icon[name*='chevron'] { opacity: 0; } .mobileMenu__pages__item .in { font: var(--font-ui-15-large-med); color: var(--base-txt-accent); } .mobileMenu__pages__item-active .in { color: var(--base-txt-btn-b); } .mobileMenu__pages__item .cnt { min-width: 24px; padding: 0 8px; box-sizing: border-box; border-radius: 14px; box-shadow: 0 0 0 1px var(--base-line-tertiary) inset; background: var(--base-hlt-b-invert); font: var(--font-ui-12-mini-bold); color: var(--sidebar-badge-txt); text-align: center; } .mobileMenu__pages .separator { width: 100%; height: 1px; margin: 12px 0; background: var(--base-line-tertiary); } .mobileMenu__foot { display: flex; flex-direction: column; padding-bottom: 28px; } .mobileMenu__foot a.upgrade { position: relative; margin: 10px auto; padding: 0 4px; border: 2px solid var(--sidebar-ico-promo); border-radius: 6px; font: var(--font-ui-12-mini-semi); color: var(--sidebar-ico-promo); text-align: center; text-wrap: nowrap; transition: all 0.1s ease; } .mobileMenu__foot .app_version { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; font: var(--font-ui-13-small-reg); color: var(--base-txt-tertiary); } .mobileMenu__foot .app_version span:last-child { padding: 4px 8px; border-radius: 6px; box-shadow: 0 0 0 1px var(--base-line-secondary) inset; } .footerMobile {} @media (max-width: 480px) { .footerMobile { height: var(--footerMobile-height); flex-shrink: 0; } body.w_keyboard .footerMobile { display: none; } } .headerMobile {} .headerMobile__title { gap: 12px; height: 60px; display: flex; background: var(--base-cont-top-elevated); justify-content: space-between; font: var(--font-ui-16-title-3-med); text-align:center; padding: 0 20px; box-shadow: 0 4px 4px -4px var(--colors-graphite-trans-200), 0 2px 12px -4px var(--colors-graphite-trans-300); } .headerMobile__title .av_nm { transform: scale(0.67); border-radius:12px; margin:-6px; } .headerMobile__title a { color: inherit; } .headerMobile__title a.profile { padding-left: 8px; } .headerMobile__title .ws { width: 40px; height: 40px; --icon-size: 40px; } .headerMobile__title .account { display: flex; justify-content: center; gap: 4px; } @media (max-width: 480px) { body[data-page="user_dashboard"] .headerMain, body[data-page="account_dashboard"] .headerMain { display: none } .menu-autoWidthSmall { max-width: unset; } } @media (min-width: 481px) { .headerMobile { display: none } } @media (max-width: 375px) { .mobileMenu__card__buttons ws-btn.add_new ws-icon { display: none; } .mobileMenu__pages__item .in { font: var(--font-ui-14-regular-med); } } .mobileMenu__tabsBar { gap: 12px; padding-bottom: 2px; } .mobileMenu__tabsBar__btn { width: calc((100% - 12px) / 2); ws-btn { width: 100%; } .btn { border-radius: 16px; span:not([class]) { padding: 0 6px; margin-right: -4px; color: var(--base-txt-primary); font: var(--font-ui-12-mini-reg); } ws-icon.btn-right-icon { --icon-size: 16px; width: 20px; height: 20px; svg { fill: var(--base-txt-primary); } } ws-icon[name="arrows/guillemet-right"] { transform: rotate(-90deg); } } } .mobileMenu__tabsBar__tabs { .mobileMenu__bar__item { flex: 1 0 50%; } } #onboardingMobileHand { position: fixed; bottom: 130px; right: 16px; z-index: 1050; a { width: 40px; height: 40px; border-radius: 20px; box-sizing: border-box; justify-content: center; align-items: center; box-shadow: var(--shadow-cont-major-outline); } }.award_modal { background:var(--base-cont-top); padding: 0 28px 36px; } .award_modal .header { background-position:center; background-repeat:no-repeat; background-size:contain; height:156px; } .award_modal .content { margin-bottom:50px; } .award_modal .content .title { color:var(--base-txt-max); font-size:32px; font-style:normal; font-weight:400; line-height:40px; margin: 24px 0 8px 0; text-align:center; } .award_modal .content .description { color:var(--base-txt-secondary); text-align:center; font-size:16px; font-style:normal; font-weight:400; line-height:20px; } .award_modal .users { margin: 0 0 20px 0; border-radius: 12px; box-shadow: var(--shadow-cont-major-outline); overflow: hidden; } .award_modal .users .row { cursor:pointer; display:flex; align-items:center; padding: 12px 32px 12px 16px; background:var(--base-cont-top-elevated); } .award_modal .users .row .medal { font-size:22px; font-style:normal; font-weight:700; line-height:28px; } .award_modal .users .row .rounded_avatar { display:flex; justify-content:center; align-items:center; width:28px; height:28px; border-radius:50%; margin: 0 12px 0 20px; } .award_modal .users .row .rounded_avatar.av_nm:before { background-position: -60px -560px; margin: 0; } .award_modal .users .row .rounded_avatar.av_nm { font: 11px/24px var(--font-base) !important; } .award_modal .users .row .name { color:var(--base-txt-primary); font-size:14px; font-style:normal; font-weight:400; line-height:20px; margin:0; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; max-width:250px; width:100%; } .award_modal .users .row .team { color:var(--base-txt-secondary); font-size:11px; font-style:normal; font-weight:400; line-height:16px; margin:0; } .award_modal .users .row .tasks_count { margin-left:auto; margin-right:0; color:var(--base-txt-primary); font-size: 14px; font-style:normal; font-weight: 590; line-height:20px; } .award_modal .help_text { color: var(--base-txt-tertiary); text-align: center; font-size: 12px; font-style: normal; font-weight: 400; line-height: 20px; margin: 0; padding-bottom: 20px; text-wrap-style: balance; } .award_modal .modal_buttons { margin-top: 24px; display:flex; justify-content:center; align-items:center; gap:12px; } .award_modal .modal_buttons .success_button { height:40px; border-radius:9px; background:var(--base-hlt-invert); color:var(--base-txt-alt-light); font-size:14px; font-style:normal; font-weight:700; line-height:20px; } .award_modal .modal_buttons .success_button:hover { background:var(--base-btn-primary-major); } .award_modal .modal_buttons .button_clicked_text { color:var(--base-txt-primary); color: var(--base-txt-btn-b); font-size: 22px; font-style: normal; font-weight: 200; line-height: 40px; } /*Active user*/ .award_modal .users .row.active { background: var(--base-hlt-b-easy); } .award_modal .users .row.active .name { font-size:16px; font-weight:510; color:var(--base-txt-max) } .award_modal .users .row.active .tasks_count { color:var(--base-txt-max); font-size: 16px; font-weight: 700; } .award_modal .users .row.active .rounded_avatar { outline:1.5px solid #8162e0; outline-offset:2px; } @media screen and (max-width:480px) { .award_modal .users { margin:0 0 20px 0; } } .modal__header .beta { padding:2px 8px; border-radius:8px; background:var(--base-cont-trans-low); color:var(--base-txt-secondary); font-size:12px; font-style:normal; font-weight:590; margin-left: -12px; }#modalContainer { top: 0; bottom: 0; left: 0; right: 0; z-index: 1024; position: fixed; pointer-events: none; } @media (max-width: 480px) { #modalContainer { --layer: 0; --zIndex: 1032; z-index: calc(var(--zIndex) + var(--layer)); } } #modalContainer > * { pointer-events: auto; } .modal { font: 12px/20px var(--font-base); color: var(--base-txt-primary); overflow: hidden; background: var(--base-cont-mod-top); text-align: left; pointer-events: auto; flex-grow: 0; flex-shrink: 0; border-radius: 16px; display: none; flex-direction: column; box-shadow: var(--shadow-mod-major); } .modal[data-color=gray] { background: var(--base-cont-mod-low); } .modal[data-color=transparent] { background: transparent; } /* .modal[data-deep="1"] { transform:scale(0.8) } .modal[data-deep="2"] { transform:scale(0.6) } .modal[data-deep="3"] { transform:scale(0.4) } */ .modal__overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-content: center; align-items: center; transition: background 0.2s ease-out; -webkit-transition: background 0.2s ease-out; } @media (min-width: 481px) { .modal__overlay { padding-top: calc(0.13 * var(--vh)); padding-left: var(--desktop-primary-menu-width); align-items: flex-start; } .modal__overlay ~ .modal__overlay { padding-top: calc(0.13 * var(--vh) + 8px); } .modal__overlay ~ .modal__overlay ~ .modal__overlay { padding-top: calc(0.13 * var(--vh) + 16px); } .modal { position: relative; max-height: min(calc(var(--vh) - 40px), calc(0.75 * var(--vh))) !important; } .modal__overlay-withPanel .modal { max-height: unset !important; &[data-group=trans] { backdrop-filter: blur(4px); } } } @media (min-width: 481px) and (max-height: 768px) { .modal__overlay { padding-top: calc(0.07 * var(--vh)); align-items: flex-start; } .withModal .menu .scrollZone { max-height: 320px; } .modal { max-height: calc(var(--vh) - 40px) !important; } } /* ----------- MinifyCSS: LIGHT THEMEMinifyCSS: LIGHT THEME ----------- */ .modal__overlay-custom {background-color: rgba(27, 33, 39, 0.75)} .modal__overlay-custom-preApplause {transition: background 1.5s ease; -webkit-transition: background 1.5s ease } .modal__overlay-custom-applause { background-color:var(--colors-pink-desat-920); opacity: 0.3 } .modal__overlay-custom-postApplause {background-color:transparent;transition: background 0.5s ease; -webkit-transition: background 0.5s ease } /* ----------- MinifyCSS: STOPMinifyCSS: STOP ----------- */ .modal__header > .in { flex-shrink: 1; padding: 8px 0 8px 12px; color: var(--base-txt-accent); font: var(--font-ui-22-title-1-bold); flex-direction: row; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; gap: 8px; align-self: stretch; align-items: center; height: 36px; } .modal__header > * + .in { padding-left: 0; } .modal__header > .in ~ ws-btn { /* margin-right: 8px; */ } .modal__header > .in:has(.logo__wrapper) { padding: 8px 0; overflow: initial; } .modal__header > .in .logo__wrapper { margin: -2px; height: 40px; } .modal__header > .icon { padding-left: 6px; width: 24px; height: 24px; --icon-size: 24px; } .modal__title__search { } .modal__title__search input { font: inherit; width: 100%; box-sizing: border-box; border: none; padding: 0; caret-color: var(--base-txt-act-minor); background: var(--base-cont-mod-top); font: var(--font-ui-22-title-1-reg); } .modal__title__search input::placeholder { opacity: 1; color: var(--base-txt-secondary); font: inherit; padding: 2px 0; font: var(--font-ui-22-title-1-reg); } .modal__title__search input::-webkit-input-placeholder { opacity: 1; color: var(--base-txt-secondary); font: inherit; padding: 2px 0; } .modal__header { display: flex; padding: 8px 16px 0; position: relative; flex-grow: 0; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 12px; } .modal__header.modal__header-disable { opacity: 0.2; } .modal__header-forceCenter { &> .in { flex-grow: 1; justify-content: center; } &> .flex_gap { display: none; } } /* Lush центруємо тільки коли нема хрестика, тобто на мобілі */ @media (max-width: 480px) { .modal__header-center > .in { text-align: center; } .modal__header-center > .in.flex_row { flex-grow: 1; justify-content: center; } .modal__header-center > .in + .flex_gap { display: none; } .modal__header-mobileWrap { flex-wrap: wrap; } .modal__header-mobileCenter { justify-content: center; &> .flex_gap { display: none; } } } .modal[data-group=white] .modal__header, .modal[data-group=white] .modal__content .buttons, .modal[data-group=nohead] .modal__content .buttons, .modal[data-group=white] #massdo_modal { background: var(--base-cont-mod-top) !important; } .modal[data-group=white] #massdo_modal { text-align: center; } .modal[data-group=white] .modal__header { /* border-bottom:1px solid var(--base-line-alt-gap-minor); */ } .modal__header-withTabs { background: var(--base-cont-mod-top); padding-bottom: 0; /* box-shadow: 0 -1px var(--base-line-ghost) inset; */ } .modal__header-withShadow { box-shadow: 0 -1px var(--base-line-secondary) inset; } .modal[data-group=delete2] .modal__header { background: var(--base-cont-mod-low); } .modal__content { clear: both; overflow: auto; text-align: left; position: relative; flex-grow: 1; flex-shrink: 1; display: flex; flex-direction: column; flex-wrap: nowrap; flex-flow: column; } .modal__content .projectView { display: flex; flex-direction: column; flex-wrap: nowrap; background: var(--base-cont-mod-low); } .modal__content:not(.flex_column) > * { flex-grow: 1; flex-shrink: 1; overflow: auto; } .modal__content p.fld { font-size: 13px } .modal__content p.fld_float { font-size: 12px; float: left; width: 200px; margin: 0 5px 15px 0; } .modal__content p.fld_float label { position: relative; padding: 2px 5px 2px 24px; display: block; } .modal__content p.fld_float label.act { background: var(--base-hlt-alt-label) } .modal__content p.fld_float input { position: absolute; left: 4px; top: 4px; } .modal__content p.fld input.input { width: 100%; padding: 4px; box-sizing: border-box; margin-top: 0; font: 18px/20px var(--font-base); background: var(--menu-inp-cont); border-color: var(--menu-inp-brd); } .modal__content p.fld input#tg_name { border: none; padding: 7px 15px; background: var(--tag-bg); color: var(--tag-color); } .modal__content p.fld input#tg_name::-moz-placeholder { color: inherit; opacity: 0.5 } .modal__content p.fld input#tg_name::-webkit-input-placeholder { color: inherit; opacity: 0.5 } .modal__content p.fld input.input:focus { box-shadow: var(--shadow-brd-focus); border-color: transparent; outline: none } .modal__content p.fld textarea { width: 100%; padding: 4px; box-sizing: border-box } .modal__content p.fld select { width: 100%; box-sizing: border-box; font-size: 16px; margin-top: 4px; background: var(--menu-inp-cont); border: 1px solid var(--menu-inp-brd); } .modal__content p.fld select option { font-size: 14px; } .modal__content__cap { background: var(--colors-alpha-dark-05); height: 610px; } .modal__content__cap svg { position: absolute; left: 50%; top: 50%; margin: -40px 0 0 -40px; width: 80px; height: 80px; fill: var(--white-max); opacity: 1; pointer-events: none; } .modal__content__cap .loader { position: absolute; left: 50%; top: 50%; margin: -40px 0 0 -40px; border: 4px solid var(--white-max); border-left-color: var(--trans); width: 72px; height: 72px; opacity: 1; pointer-events: none; } .modal__previewObject { position: relative; background: var(--base-cont-low); } @media screen and (min-width: 481px) { .modal__previewObject { box-shadow: 0 0 0 1px var(--base-cont-low); } } .modal__alert { position: relative; } body > .modal__alert { position: absolute; top: -1000px; left: 0 } .modal__header > .in span.ico_tb_big { float: left; margin: -5px 10px -5px 0 } .modal__header > .in .clear { clear: left } .modal__content h2 { /* margin-right:140px; */ } .modal[data-group=white] .modal__header, .modal[data-group=white] .buttons { background: var(--base-cont-mod-top); } .modal[data-group=chart] .modal__header { background: var(--base-cont-mod-top) } .modal[data-group=userto] .modal__header { background: var(--base-cont-mod-top) } .modal[data-group=labels] { } .modal[data-group=trans] { background: transparent; } .modal[data-group=extbig] { border-radius: 30px 80px 30px 30px; } .modal[data-group=labels] .modal__header, .modal[data-group=labels] .buttons { background: transparent } .modal[data-group=dateend] .modal__header { background: transparent; box-shadow: none; } .modal-transparent { background: transparent !important } .modal[data-group=gray] .modal__content { background: var(--base-cont-mod-low) } .modal__header > .in b { color: var(--base-txt-accent) } .modal__header > .in a.inline { color: var(--base-txt-accent) } .modal__header > .in a.inline:hover { color: var(--base-txt-link-minor) } .modal__header > .in span.i { font: italic 14px var(--font-base); color: var(--base-txt-tertiary) } .modal__header > .in a.m { color: var(--base-txt-primary); padding: 2px 5px 3px; margin: -2px -5px -3px; border-radius: 4px; } .modal__header > .in a.m:hover { background: var(--base-hlt-hover); color: var(--base-txt-link-major) } .modal__header__tabs { font: 18px/20px var(--font-base); height: 20px; display: flex; align-items: center; } .modal__header__tabs > span, .modal__header__tabs > a { color: var(--base-txt-tertiary); padding: 0 10px 0 4px; margin-right: 4px; float: left; -webkit-transition: box-shadow 0.3s ease; transition: box-shadow 0.3s ease; font: var(--font-ui-15-large-reg); position: relative; } .modal__header__tabs > a { padding: 14px 10px 14px 4px; } .modal__header__tabs > a ws-icon svg { fill: var(--base-txt-tertiary); } .modal__header__tabs > a:hover { color: var(--base-txt-secondary); } .modal__header__tabs > a:hover ws-icon svg { fill: var(--base-txt-secondary); } .modal__header__tabs > span, .modal__header__tabs > a.act { color: var(--base-txt-accent); text-shadow: -0.03ex 0 0 currentColor, 0.03ex 0 0 currentColor; } @supports (-webkit-text-stroke-width: 0.04ex) { .modal__header__tabs > span, .modal__header__tabs > a.act { text-shadow: -0.03ex 0 0 currentColor, 0.03ex 0 0 currentColor; -webkit-text-stroke-width: 0.04ex; } .modal__header__tabs .badge { text-shadow: initial; -webkit-text-stroke-width: initial; } } .modal__header__tabs > span ws-icon svg, .modal__header__tabs > a.act ws-icon svg { fill: var(--base-txt-accent); } .modal__header__tabs > span:after, .modal__header__tabs > a.act:after { content: ''; display: block; width: 100%; height: 2px; border-radius: 1px; background: var(--base-txt-act-minor); position: absolute; left: 0; bottom: -16px; } .modal__header-withShadow .modal__header__tabs > span:after, .modal__header-withShadow .modal__header__tabs > a.act:after { bottom: -2px; } .modal__header__tabs .ico_l { margin: -5px 10px -5px 0; } .modal__header__tabs ws-icon { margin: 0 6px 0 4px; width: 24px; --icon-size: 24px; } .modal__header > .in .after_filter2 { margin: 0 220px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; gap: 8px; height: 48px; } .modal__header > .in .button { margin-top: -7px; margin-bottom: -7px; } .modal__header > .in .inherit.flex_row { overflow: hidden; } .modal__header > .in .inherit ws-icon { width: 32px; } .modal__header > .in .inherit .av_nm { border-radius:8px; transform:scale(0.75); margin: 0 6px 0 -6px; } .modal__backButton { float: left; } .modal__header__avatar { float: left; width: 36px; height: 36px; } .modal__header__avatar + .in { font-weight: 600; } .modal__header__avatar img, .modal__header__avatar span.av_nm { /*width: 36px;*/ /*height: 36px;*/ scale: 0.75; transform-origin: 0 0; /*line-height: 36px !important;*/ /*font-size: 14px !important;*/ border-radius: 8px; } .modal[data-group=invite] { .modal__header-withTabs {padding-top: 14px;} .modal__header-withTabs .modal__closeButton {margin-bottom:8px;} .modal__header-center > .in { text-align: center; } .modal__header-center > .in.flex_row { flex-grow: 1; justify-content: center; } .modal__header-center > .in + .flex_gap { display: none; } } .modal[data-group=invite] .modal__header > .in .ico_l { margin: -5px 10px -5px 0 } iframe#modal__previewFrame { padding: 0; margin: 0; border: none; } #modal__previewFrame, #modal__previewFrame code { height: calc(var(--vh) - 185px); width: calc(var(--vw) - var(--vw)/7); } @media (max-width: 480px) { #modal__previewFrame, #modal__previewFrame code { /* height: calc(var(--vh) - 155px); */ /* width: calc(var(--vw) - 30px); */ height: unset; width: unset; } .modal__header ws-btn[name*=modal__closeButton], .modal__header ws-btn[right-icon=close] { display: none; } .modal__header.modal__header-withTabs:not(.modal__header-forceCenter) > .in { display: inline-block; padding: 12px 0 4px 12px; gap: 16px; width: 100% !important; } .modal__header.modal__header-withTabs:not(.modal__header-forceCenter) > .in { padding-bottom: 0; } } /* .modal.need_reload > * { filter: blur(1px) } .modal.need_reload:after { content: 'RELOAD'; position: absolute; right: 0; top: 0; background: var(--debug-color); color: #fff; animation: blink 1s infinite; padding: 5px 10px; border-radius: 0 0 0 10px } .modal { --debug-color: #f55 } .modal[data-num="2"] { --debug-color: #0839ff } .modal[data-num="3"] { --debug-color: #0fa300 } .modal[data-num="4"] { --debug-color: #e204c3 } .modal[data-num="5"], #modal__previewImage { --debug-color: #00c2c6 } .modal, #modal__previewImage {box-shadow:0 0 0 1px var(--debug-color);overflow: visible;} .modal:before { content: attr(data-num); position: absolute; left:0; top:0; background: var(--debug-color); color:#fff; padding: 5px 10px; z-index:1; border-radius:0 0 10px } @keyframes blink{ 0%{opacity: 0;} 50%{opacity: 1;} 100%{opacity: 0;} }*/ .modal__options { margin: 0 0 0 0; color: var(--base-txt-secondary); font: 13px/20px var(--font-base) } .modal__options select { width: 200px; margin-top: 3px; font-size: 14px; padding: 3px 5px; } .modal__options p.w select { width: 340px } .modal__options #dateend_div { padding: 0 } .modal__options .trm { font: 14px/20px var(--font-base); text-align: center; margin:0; padding: 16px 0; } .modal__options .trm input { border: none; background: var(--inp-hlt-bg); color: var(--base-txt-link-minor); font: bold 14px/28px var(--font-base); height: 28px; width: 30px; text-align: center; padding: 0; border-radius: 4px; margin: -10px 0; } .modal__content .modal__options .eye_conf { display:block; text-align:center; margin:0 } .modal__content .modal__options .eye_line { display: inline-flex; } .modal__content .modal__options .eye_conf { display: block; text-align: center; margin: 0 } .modal__options #trm_sub_ { padding: 0 20px 10px } .modal__headerMenu { display: flex; gap: 6px; padding: 4px 28px; font: 13px/20px var(--font-base); } .modal__headerMenu ws-icon[name=star-solid] svg { fill: var(--base-btn-notice-minor); } .modal__tabs { padding: 0 24px; box-shadow: 0 -1px var(--base-line-tertiary) inset; font: 13px/20px var(--font-base); } .modal__tabs__item { margin-right: 2px; padding: 8px 6px; cursor: pointer; -webkit-transition: box-shadow 0.3s ease; transition: box-shadow 0.3s ease; color: var(--base-txt-secondary); font: var(--font-ui-13-small-reg); } .modal__tabs__item div { display: inline-block; letter-spacing: 0.01rem; } .modal__tabs__item .modal__tabs__item-counter { display: inline-block; color: var(--base-hlt-invert); font: 600 8px/10px var(--font-base); border-radius: 12px; padding: 1px 4px; vertical-align: middle; border: 1px solid var(--base-hlt-invert); min-width: 8px; text-align: center; margin: -2px 0 0 4px; } .modal__tabs__item.active .modal__tabs__item-counter { color: var(--base-txt-alt-light); background: var(--base-hlt-invert); } .modal__tabs__item.disabled { pointer-events: none; } .modal__tabs__item.disabled .modal__tabs__item-counter { color: var(--base-txt-secondary); border-color: var(--base-txt-secondary); } .modal__tabs__item:hover { color: var(--base-txt-max); box-shadow: 0 2px var(--base-txt-secondary); } .modal__tabs__item.active { color: var(--base-txt-primary); box-shadow: inset 0 -2px var(--base-txt-act-minor); } @supports (-webkit-text-stroke-width: 0.04ex) { .modal__tabs__item.active > div:not(.modal__tabs__item-counter) { text-shadow: -0.03ex 0 0 currentColor, 0.03ex 0 0 currentColor; -webkit-text-stroke-width: 0.04ex; } } .modal .scrollZone { margin-top: var(--screen-px) } .modal .scrollZone-top { box-shadow: 0 var(--screen-minus-px) var(--base-line-tertiary); } .modal .scrollZone-bottom { box-shadow: 0 var(--screen-px) var(--base-line-tertiary); } .modal .scrollZone-bottom.scrollZone-top { box-shadow: 0 var(--screen-minus-px) var(--base-line-tertiary), 0 var(--screen-px) var(--base-line-tertiary); } .modal__massSelected ws-icon.bg { width: 32px; height: 32px; border-radius: 16px; } ws-icon.green_bg { background: var(--base-txt-btn-c); } ws-icon.gray_bg { background: var(--base-txt-tertiary); } ws-icon.red_bg { background: var(--base-hlt-w-invert); } ws-icon.green_bg, ws-icon.red_bg, ws-icon.gray_bg { --icon-color: var(--base-txt-alt-light); } .modal__operationRow { height: 40px; display: flex; justify-content: center; align-items: center; background: var(--base-cont-mod-low); font: var(--font-ui-13-small-semi); } .modal__operationRow-red { background: var(--base-hlt-w-invert); color: var(--base-txt-alt-light); } .modal__operationRow-green { background: var(--base-txt-btn-c); color: var(--base-txt-alt-light); } .modal__footerSpace { height: 24px; } form.frm_dis .btns-row ws-btn:not([name*="whenDisabled"]), form.frm_dis .btns-row .notify_block { display: none } form.frm_dis .btns-row { justify-content: center; } form:not(.frm_dis) .btns-row ws-btn[name~=btn-whenDisabled] { display: none } #modProfileContent { padding-top: var(--screen-px); } .modal__infoRow { padding: 0 24px; min-height: 40px; background: var(--base-hlt-b-hover); font: var(--font-ui-12-mini-reg); color: var(--base-txt-btn-b); gap:8px; } .modal__infoRow-trans { background: none; color: var(--base-txt-secondary); } .modal__infoRow-warning { background: var(--base-hlt-w-hover); color: var(--base-txt-btn-w); } .buttons .modal__infoRow { border-radius: 8px; padding:0 12px; } .modal__infoRow .in { padding: 8px 4px; } .modal__infoRow ws-icon { --icon-color: var(--base-txt-btn-b) !important; } .modal__infoRow-trans ws-icon { --icon-color: var(--base-txt-secondary) !important; } .modal__infoRow-warning ws-icon { --icon-color: var(--base-txt-btn-w) !important; } .modal .btns-row-center { gap: 8px; display: flex; justify-content: space-evenly; } .modal .btns-row-gray { background: var(--base-cont-mod-low); } .modal__visibilityReset { background: var(--base-txt-act-minor); color: var(--base-txt-alt-light); font: var(--font-ui-13-small-semi); text-align: center; padding: 50px 0; } .modal__visibilityReset-labels { background: var(--base-surf-sidebar); color: var(--base-txt-alt-light); } .modal__header > .in .logo { } .modal__header > .in .logo .proj_color { width: 40px; height: 40px; display: flex; align-content: center; align-items: center; justify-content: center; border-radius: 8px; } .modal__header > .in .logo svg, .modal__header > .in .logo ws-icon{ width: 32px; height: 32px; } .modal__inlineSearch { height: 44px; border-bottom: 1px solid var(--base-line-tertiary); } .modal__inlineSearch .multi-select{ color: inherit } .modal__inlineSearch > ws-icon { width: 24px; height: 24px; } .modal__inlineSearch a.delete { display: none; } .modal__inlineSearch a.button { padding: 4px 12px; border-radius: 6px; color: var(--base-txt-secondary); box-shadow: 0 0 0 1px var(--base-line-secondary); transition: all 0.3s ease; gap: 6px; font: 600 12px/20px var(--font-base); cursor: pointer; background: var(--base-cont-mod-top); } .modal__inlineSearch a.button:hover { color: var(--base-txt-accent); box-shadow: 0 0 0 1px var(--base-line-accent); background: var(--base-cont-mod-top); } .modal__inlineSearch a.delete ws-icon { width: 24px; height: 24px; } .modal__inlineSearch input { border: none; background: transparent; box-sizing: border-box; padding: 0; height: 20px; width: 100%; color: var(--base-txt-primary); font: 400 13px/20px var(--font-base); } .modal__inlineSearch input:placeholder-shown { color: var(--base-txt-tertiary); } .modal__inlineSearch input::placeholder{ font: 400 13px/20px var(--font-base); } .modal__inlineSearch input::-moz-placeholder{ font: 400 13px/20px var(--font-base); } .modal__inlineSearch input::-webkit-input-placeholder{ font: 400 13px/20px var(--font-base); } /*.modal__content__block ws-slider.width {margin-bottom: 10px;}*/ .modal .modal__content__block-optional {margin-top: -12px;} .modal .tasksStart input { border: none; background: var(--inp-hlt-bg); color: var(--base-txt-primary); font: bold 14px/20px var(--font-base); height: 28px; width: 100px; text-align: center; border-radius: 4px; margin: -10px 0; padding: 0; } .modal .tasksStart input::placeholder { font:inherit; } .modal .tasksStart input::-webkit-input-placeholder { font:inherit; } .modal__overlay[data-dock=right] { padding-top: 112px; display: flex; justify-content: flex-end; padding-right: 12px; } .modal__overlay[data-dock=right] .modal { height: calc(var(--vh) - 24px); max-height: unset !important; } .modal__header__controls { display: flex; gap: 12px; align-items: center; } /* .modal__header__controls--before {} */ /* .modal__header__controls--after {} */ /* .modal__header__controls--end {} */ @media (max-width: 480px) { .modal { position: fixed; bottom: auto; left: 0; right: 0; top: 100%; width: unset !important; border-radius: 20px 20px 0 0; box-shadow: 0 -1px var(--base-line-secondary), 0 600px 0 400px var(--base-cont-mod-top), 0 0 40px -2px var(--colors-graphite-trans-400); flex-direction: column; max-height: 100%; transition: top .3s ease; } .modal__overlay-withPanel { background: linear-gradient(to top, var(--colors-alpha-dark-10) 50%, var(--trans)); } body.withModal .modal__overlay-withPanel .modal { display: flex !important; flex-direction: column; } #modal__preview { display: flex; flex-direction: column; flex-shrink: 1; min-height: 0; } #modal__previewFrame { flex-shrink: 1; min-height: 0; pre { display: flex; max-height: 100%; code { flex-shrink: 1; } } } .modal__overlay-withPanel .modal { position: static; border-radius: 16px; box-shadow: var(--shadow-mod-major); inset: unset; max-height: unset; max-width: calc(100% - 40px); transition: unset; flex-shrink: 1; margin: 20px 0 calc(122px + 20px + var(--sa-bot)); } .modal__overlay-withPanel .modal-transparent { backdrop-filter: blur(4px); } .modal[data-group=extbig] { border-radius: 30px 80px 30px 30px; } .modal__overlay-withPanel:has(#modal__previewPanel.wlinks) .modal { margin-bottom: calc(36px + 20px + var(--sa-bot)); } .modal.swype { max-height: unset; height: auto; bottom: 0; } .modal-fullscreen { max-height: unset; top: calc(var(--swipe-window-top) + var(--visualViewport-top)); bottom: 0; padding-bottom: var(--visualViewport-bottom) !important; scroll-padding: 200px; height: auto !important; } .modal-fullpage { max-height: unset; inset: 0; border-radius: unset; box-shadow: unset; } .modal-fullpage .modal__header { display: none !important; } .modal-fullpage .modal__content__block { padding-left: 12px; padding-right: 12px; } .modal__swipe { margin: 3px auto; width: var(--mobile-primary-menu-swipe-width); height: 3px; border-radius: 3px; background-color: var(--base-txt-muted); cursor: pointer; transition: width .3s ease, background-color .3s ease; cursor: pointer; } .modal .modal__swipe { --mobile-primary-menu-swipe-width: var(--mobile-primary-menu-half-opened-swipe-width); background-color: var(--base-txt-accent); } .modal-fullscreen .modal__swipe { --mobile-primary-menu-swipe-width: var(--mobile-primary-menu-full-opened-swipe-width); background-color: var(--base-txt-accent); } .modal > * { flex-grow: 0; flex-shrink: 0 } .modal .modal__content { flex-grow: 1; flex-shrink: 1; max-height: unset; min-height: 0; } .modal .buttons_a_pre { flex-grow: 1; flex-shrink: 1; } /* скролл зон сама притискає кнопки до низу */ .modal .scrollZone + .buttons_a_pre { display: none; } .modal-holidays .l { flex-grow: 1; } .modal[data-group=invite] .modal__header-withTabs { box-shadow: 0 -1px var(--base-line-ghost) inset; } .modal[data-group=invite] .modal__header__tabs > a.act:after { bottom: -1px; } .modal__content .buttons { padding-bottom: max(28px, calc(var(--app-sa-bot) + 12px)); } } .modal[data-group=mod_mid] { background-color: var(--base-cont-mod-mid); } .modal__content__wrapper { padding: 8px var(--modal-padding-inline, 28px) 12px; } .modal_footer_buttons { display: flex; gap: 12px; justify-content: center; padding: 12px var(--modal-padding-inline, 28px) 28px; } .modal__content__wrapper--24 { --modal-padding-inline: 24px; } .modal__header > .in { min-width: 0; } .modal__header .other_project { min-width: 0; flex-shrink: 1; } .modal__header .other_project > .in { overflow: hidden; text-overflow: ellipsis; } #root { --task-width: 0px; --task-draft-width: 0px } body.withModalAndTask #modalContainer { z-index:1022; } body.withModalAndTask .modal__overlay { right: var(--task-width); background: linear-gradient(45deg, var(--colors-alpha-dark-20), var(--colors-alpha-dark-10)); } body.withModalAndTask #modal__previewImage { /* transition: all 0.3s ease; */ } body.withModalAndTask #modal__previewImage { left:calc(50% - var(--task-width) / 2); } body.withModalAndTask #modal__previewPanel { right: calc(var(--task-width) + var(--screen-px)); } body.withModalAndTask #taskPanel { opacity:0; bottom:-40px } body.withModalAndTask #modal__previewFrame, body.withModalAndTask #modal__previewFrame code { height: calc(var(--vh) - 185px); width: calc(var(--vw) - var(--task-width) - (var(--vw) - var(--task-width))/7); } body.withModalAndTaskDraft #modalContainer { z-index:1022; } body.withModalAndTaskDraft #taskCreate__wrapper { z-index:1023; } body.withModalAndTaskDraft .modal__overlay { background: linear-gradient(45deg, var(--colors-alpha-dark-20), var(--colors-alpha-dark-10)); } body.withModalAndTaskDraft #modal__previewImage { /* transition: all 0.3s ease; */ z-index: 1024; } body.withModalAndTaskDraft #modal__previewImage { left:calc(50% - var(--task-draft-width) / 2); } body.withModalAndTaskDraft #modal__previewPanel { right: calc(var(--task-draft-width) + var(--screen-px) - 20px); } body.withModalAndTaskDraft #taskPanel { opacity:0; bottom:-40px } body.withModalAndTaskDraft #modal__previewFrame, body.withModalAndTaskDraft #modal__previewFrame code { height: calc(var(--vh) - 185px); width: calc(var(--vw) - var(--task-draft-width) - (var(--vw) - var(--task-draft-width))/7); } #modal__previewSvg { width: calc(var(--vw)/2); aspect-ratio: 1; } #modal__previewSvg iframe { pointer-events: none; /* щоб можна було перемикатися свайпом */ width: 100%; height: 100%; } body.withModalAndTask #modal__previewSvg, body.withModalAndTaskDraft #modal__previewSvg { width: calc((var(--vw) - 60px - var(--task-width))/2); } .modal__content__search { margin: 8px 0 0 0; padding: 0 16px; box-shadow: 0 var(--screen-minus-px) var(--base-line-tertiary); } .modal__content__block + .modal__content__search { margin: 0; } .modal .modal__content__search + .modal__content__block-optional { margin: 0; } .modal__content__search > .modal__inlineSearch { border-bottom: none; } .modal__content__search > .modal__inlineSearch input { font-size: 16px; } .modal__content__search > .modal__inlineSearch > ws-icon { width: 38px; height: 38px; --icon-color: var(--base-txt-tertiary); } .modal__content__search + .scrollZone { box-shadow: 0 var(--screen-minus-px) var(--base-line-tertiary), 0 var(--screen-px) var(--base-line-tertiary); } .modal.loading > div { pointer-events: none; opacity: 0.6; } /* like .loader--curling but css only */ .modal.loading::after { position: absolute; display: block; content: ""; border: unset; animation: loader .6s linear infinite; border-radius: 50%; padding: 2px; background: conic-gradient(from 90deg at 50.17% 50%, #73C7FF -7.5deg, rgba(255, 255, 255, 0) 41.25deg, rgba(255, 255, 255, 0) 93.75deg, #FFFFFF 179.31deg, #FFD6F6 258.75deg, #73C7FF 352.5deg, rgba(255, 255, 255, 0) 401.25deg); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; width: 16px; height: 16px; top: calc(50% - 8px); left: calc(50% - 8px); } .modal-taskDone input + .line-withDots { display: none; } @media (max-width: 480px) { /* тож широкі кнопки робимо колонкою одного розміру */ .modal .btns-row.btns-mobile-grid { display: grid; height: unset; } } .modal__header .button_dis2, .modal__header .button_dis3, .modal .mobile-head .button_dis2, .modal .mobile-head .button_dis3 { opacity: .5; } .modal__safeAreaBottom { height: var(--sa-bot); } .modal.preview__youtube { flex-direction: column-reverse; box-shadow: none; border-radius: 0; .modal__header { .in, .flex_gap { display: none; } justify-content: center; padding-top: 16px; .modal__closeButton { --btn-size: 48px; width: 48px; height: 48px; border-radius: 24px; background: var(--base-cont-mod-top); } } .modal__content { ws-btn { display: none; } } .videoModal { border-radius: 16px; iframe { border-radius: 16px; } } } @media (max-width: 480px) { .modal.preview__youtube { height: 100vh; .modal__content { justify-content: center; align-items: center; .videoModal { width: 100%; padding-bottom: 16px; } ws-btn { display: inline-block; } } } } .modal__dataTable { padding: 12px 20px 20px 20px; } .modal__dataTable-onCopy { /* padding-top:0; */ min-height: 200px; } .modal__dataTable__item { background: var(--base-cont-mod-top); position: relative; height: 40px; display: flex; box-shadow: 0 -0.5px 0 var(--base-line-tertiary) inset; align-items: center; padding: 0 0 0 8px; } .modal__dataTable__item:first-child { box-shadow: 0 -0.5px 0 var(--base-line-tertiary) inset, 0 0.5px 0 var(--base-line-tertiary) inset; } .modal__dataTable__item-comment { background: var(--base-cont-mod-top); margin: 0 0 1px 0; padding: 10px 185px 10px 10px; position: relative } .modal__dataTable__item-sel.selected { background: var(--base-hlt-notr-hover); cursor: pointer; } .modal__dataTable__item-sel.selected .td_prior, .modal__dataTable__item-sel.modal__dataTable__item-active .td_prior { display: none } .modal__dataTable__item-sel a { color: var(--base-txt-accent) } .modal__dataTable__item-sel.selected:before { content: ''; position: absolute; right: 3px; top: 4px; width: 20px; height: 20px; background: var(--base-hlt-notr-hover); padding: 5px; } .modal__dataTable__item-sel.selected:after { content: ''; position: absolute; right: 8px; top: 9px; width: 20px; height: 20px; background: url(/assets/img/color/iconset.svg) no-repeat -40px -1280px; } .modal__dataTable__item-sel.modal__dataTable__item-active { background: var(--base-hlt-notr-easy); } .modal__dataTable__item-sel.modal__dataTable__item-active:before { content: ''; position: absolute; right: 3px; top: 4px; width: 20px; height: 20px; background: var(--base-hlt-notr-easy); padding: 5px } .modal__dataTable__item-sel.modal__dataTable__item-active:after { content: ''; position: absolute; right: 8px; top: 9px; width: 20px; height: 20px; background: url(/assets/img/color/iconset.svg) no-repeat 0 -1220px; } .modal__dataTable .item_divider { border-top: 1px solid var(--base-line-alt-cardbrd); color: var(--base-txt-secondary); font: italic 13px/20px var(--font-base); text-align: center; padding: 0; margin: 20px 0 0; } .search_started .item_divider { display: none } .modal__dataTable .item_divider span { position: relative; top: -12px; background: var(--base-cont-mod-low); padding: 0 15px; } .modal__dataTable__item[onclick] { cursor: pointer } .modal__dataTable__item-nomatch .td_name { color: var(--base-txt-tertiary) } .modal__dataTable-onCopy .modal__dataTable__item label { padding: 0; } .modal__dataTable__item.pre_act { background: var(--base-hlt-notr-easy) !important; border-color: var(--base-hlt-notr-easy); } .modal__dataTable-onCopy .modal__dataTable__item label { opacity: 0.5; } .modal__dataTable-onCopy .modal__dataTable__item:hover label { opacity: 1; background: url(/assets/img/color/iconset.svg) no-repeat -20px -1300px; } .modal__dataTable-onCopy .modal__dataTable__item:hover label { background: url(/assets/img/color/iconset.svg) no-repeat -40px -1300px; } .modal__dataTable-onCopy .modal__dataTable__item label.act { opacity: 1; background-position: 0 -1320px !important } .modal__dataTable-onCopy .modal__dataTable__item label input { opacity: 0; width: 20px; height: 20px; } .modal__dataTable-onCopy .modal__dataTable__item label.label_dis { } .modal__dataTable__item-level2 .td_name:before, .modal__dataTable__item-level3 .td_name:before { color:var(--base-txt-ghost); font: var(--font-ui-14-regular-reg); letter-spacing:4px; margin:0 4px; } [data-group=delete] .modal__dataTable__item-level2 .td_name:before, [data-group=delete] .modal__dataTable__item-level3 .td_name:before { color: var(--base-txt-btn-w); } .modal__dataTable__item-level2 .td_name:before { content: '•'; } .modal__dataTable__item-level3 .td_name:before { content: '• •'; } .modal__dataTable__item .td_name { padding: 0 4px; display: flex; align-items: center; justify-content: flex-start; gap: 4px; } .modal__dataTable__item:not(.modal__dataTable__head-tab) .td_name { font: var(--font-ui-14-regular-reg); } .modal__dataTable__item .ico_expandv { margin: -3px 6px 0 10px; background-color: var(--menu-item-selected); box-shadow: none !important; opacity: 1 } .modal__dataTable__item:hover .ico_expandv { } .modal__dataTable__item:hover .ico_expandv, .modal__dataTable__item.selected .ico_expandv { background-color: var(--base-cont-mod-top) !important; border-shadow: none !important; opacity: 1 } .modal__dataTable__item-comment { padding: 10px 5px 10px 10px; height: 16px; color: var(--base-txt-tertiary); font: var(--font-ui-14-regular-reg); cursor: pointer; overflow: hidden; } .modal__dataTable__item-newComment { color: var(--base-txt-tertiary); } .modal__dataTable__item-comment .td_name { font: var(--font-ui-13-small-reg); color: var(--base-txt-tertiary); display: inline; } .modal__dataTable__item-newComment .td_name { display: flex; } .modal__dataTable__item-comment.pre_act .td_name { color: var(--base-txt-accent); } .modal__dataTable__item-comment .td_ava { float: left; margin: -4px 10px -4px 0 } .modal__dataTable-onCopy .modal__dataTable__item-active .td_name { font: var(--font-ui-14-regular-semi); } .modal__dataTable-onCopy .modal__dataTable__item-operation { background: var(--base-hlt-notr-easy); border-color: var(--trans); } .modal__dataTable-onCopy .modal__dataTable__item-active.itme_lb { border-top: 3px solid var(--base-cont-mod-top); border-bottom: 3px solid var(--base-cont-mod-top); background: var(--base-cont-mod-top) } .modal__dataTable-onCopy .modal__dataTable__item-big .td_name a.onch2 { color: var(--base-txt-primary); border-bottom: 1px dashed var(--base-txt-accent); } .modal__dataTable__item .td_term { width: 90px; font: var(--font-ui-12-mini-reg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .modal__dataTable__item .td_term i { font-style: normal; color: var(--base-txt-tertiary) } .modal__dataTable__item .td_prior { width: 20px; } .modal__dataTable__item .td_stage { width: 20px; } .modal__dataTable__item .td_prior, .modal__dataTable__item .td_term, .modal__dataTable__item .td_stage, .modal__dataTable__item .td_time, .modal__dataTable__item .td_money, .modal__dataTable__item .td_rate, .modal__dataTable__item .td_stage, .modal__dataTable__item .td_user { box-shadow:0.5px 0 0 var(--base-line-tertiary) inset; height:40px; padding: 0 8px; display: flex; align-items: center; } .modal__dataTable__item .td_time, .modal__dataTable__item .td_money { width: 70px; justify-content: end; } .modal__dataTable__item .td_rate { width: 40px; } .modal__dataTable__item .td_rate ~ .td_money, .modal__dataTable__item:hover .td_rate:has(.sw_act) { box-shadow:none } .modal__dataTable__item-simple .td_prior, .modal__dataTable__item-simple2 .td_prior { right: 9px } .modal__dataTable__item-simple2 .td_term { right: 36px; top: 3px; width: 110px; } .modal__dataTable-onCopy .modal__dataTable__item .td_prior { } .modal__dataTable__item .td_user { width: 24px; white-space: nowrap; color: var(--base-txt-secondary); font: var(--font-ui-12-mini-reg); } .modal__dataTable__item, .modal__dataTable__head { .td_user--full { width: 200px; } .td_stage--full { width: 100px; } } .modal__dataTable-onCopy .modal__dataTable__item .td_user { } .modal__dataTable-onCopy .modal__dataTable__item .td_user a.onch { max-width: 140px; overflow: hidden; text-overflow: ellipsis; display: inline-block } .modal__dataTable-onCopy .modal__dataTable__item-big .td_user { } .modal__dataTable-onCopy .modal__dataTable__item-big .td_term { font: var(--font-ui-12-mini-reg); } .modal__dataTable__item .td_prior .priorb { margin: 0; } .modal__dataTable-onCopy .modal__dataTable__item-big .td_prior .priorb { } .modal__dataTable__item a.onch { color: var(--base-txt-primary); } .modal__dataTable__item:hover a.onch { border-bottom: 1px dashed var(--base-txt-accent); margin-bottom: -1px; vertical-align: top; } .modal__dataTable__item span.ico_done { margin: -2px 0 0 3px; opacity: 0.5 } .modal__dataTable__item input.input2 { font: inherit; height: 40px; margin: 0 -4px; padding:0 4px; text-align: inherit; background: transparent; border: none; } .modal__dataTable__item input.wide2 { font: inherit; box-sizing: border-box; flex-grow: 1; } .modal__dataTable__item input.input2:focus { box-shadow: 0 0 0 2px var(--base-txt-btn-a) inset; background:var(--base-cont-mod-top) } .modal__dataTable__item select { font: 12px/20px var(--font-base); margin: -2px 0; height: 22px; padding: 0; width: 140px; background: var(--menu-inp-cont); border-color: var(--menu-inp-brd) } .modal__dataTable .item_group { font: 18px/20px var(--font-base); margin: 0 0 15px 0; color: var(--base-txt-secondary); text-align: center } .modal__header .item_group { font: 18px/20px var(--font-base); margin: -2px 0; color: var(--base-txt-primary); text-align: left; padding: 0 } .modal__dataTable .item_group a, .modal__header .item_group a { color: var(--base-txt-primary); border-bottom: 1px dashed var(--base-txt-accent) } .item_group_center { text-align: center } .modal__header .vs_search .item_group { max-width: 230px; white-space: nowrap; overflow: hidden } .modal__dataTable .itemm_opac .td_name { opacity: 0.5 } .modal__dataTable .itemm_opac .td_prior { display: none } .modal__dataTable .item_subs { display: none } .modal__dataTable .item_subs_act { display: block } .modal__dataTable.search_started .item_subs { display: block } .modal__dataTable.search_started .ico_expandv { display: none } .modal__dataTable-onCopy .td_term2 { display: none } .modal__dataTable-withTerms .td_term2 { display: flex } .modal__dataTable-withTerms .td_term1 { display: none } .modal__dataTable-onCopy .td_stage2 { display: none } .modal__dataTable-withStage .td_stage2 { display: flex } .modal__dataTable-withStage .td_stage1 { display: none } .modal__content .modal__dataTable-onCopy ~ .buttons, .modal__content .modal__optionsCheckboxes ~ .buttons { background: var(--base-cont-mod-top); /* box-shadow: 0 -2px 2px var(--colors-alpha-dark-20); */ } .modal__content .modal__optionsCheckboxes ~ .buttons { box-shadow: none; } .modal__optionsCheckboxes { padding: 8px 24px; margin: 8px 0 0 0; position: relative; /* background: var(--base-hlt-notr-easy); */ } .modal__optionsCheckboxes.flex_row { gap: 8px; } .wlabel.modal__optionsCheckboxes { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; &:not(.modal__optionsCheckboxes-grouped) { flex-wrap: nowrap; .modal__optionsCheckboxes__group, .modal__optionsCheckboxes__body, .modal__optionsCheckboxes__wrapper { flex-wrap: nowrap; } } .modal__optionsCheckboxes__group { display: flex; align-items: flex-start; flex-wrap: nowrap; gap: 8px 4px; } .modal__optionsCheckboxes__body { display: flex; gap: 8px 4px; flex-wrap: wrap; width: 100%; } .modal__optionsCheckboxes__wrapper { display: inline-flex; gap: 8px 4px; } } .wlabel.modal__optionsCheckboxes-grouped { .modal__optionsCheckboxes__group { &> b { width: 125px; text-align: right; } } } .modal__optionsCheckboxes .tasksStart { padding: 2px; } .modal__optionsCheckboxes b { display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant: small-caps; font: var(--font-sp-caption-11-micro-upper-med); text-transform: uppercase; color: var(--base-txt-tertiary); line-height: 32px; flex-shrink: 0; } .modal__optionsCheckboxes .input { margin: -2px 0; } .modal__optionsCheckboxes i { font-style: normal; } .modal__optionsCheckboxes label { display: inline-block; overflow:hidden; vertical-align: middle; cursor:pointer; } .modal__optionsCheckboxes label input[type=checkbox] { float: left; opacity:0; margin:0 0 0 -20px } .modal__optionsCheckboxes label ws-btn { pointer-events:none } .modal__optionsCheckboxes label ws-btn:last-child { display: none } .modal__optionsCheckboxes label input[type=checkbox]:checked ~ ws-btn { display: none } .modal__optionsCheckboxes label input[type=checkbox]:checked ~ ws-btn:last-child { display: inline-flex } .modal__optionsCheckboxes label .btn.btn-28 ws-icon.btn-left-icon { width: 20px; height: 20px; } .modal__optionsCheckboxes label.act { background: none; color: var(--base-txt-primary); } .modal__optionsCheckboxes .drop_select { display: inline-block; margin: 0; width: 200px; } @media (max-width: 480px) { .modal__optionsCheckboxes label { display: block; width: 180px; margin: 5px 0 -5px; } .modal__optionsCheckboxes { padding: 15px; } .modal__optionsCheckboxes font { display: block; padding: 10px 0 10px 22px; } } .modal__dataTable .inputCheckbox span { width: 16px; height: 16px; --icon-size:16px; padding: 4px; background: none !important; } .modal__dataTable .inputCheckbox.label_dis use:first-child { display:none } .modal__dataTable .inputCheckbox.label_dis use:last-child { display:flex; fill: var(--base-hlt-w-invert); } .modal__dataTable__item .space { width:20px; height: 20px; } .modal__dataTable__item .space-28{ width:28px; height:28px; } .modal__dataTable__item ws-icon[name=parent] { width:24px; height: 24px; --icon-color: var(--base-txt-btn-a); --icon-size:16px; border-radius: 6px; background: var(--base-hlt-hover); margin:2px; } .modal__dataTable__item .td_name ws-icon { --icon-color:var(--base-txt-tertiary) } .modal__dataTable__item ws-icon[name=exclam_triangle-solid] { --icon-color: var(--base-btn-notice-minor); width: 32px; --icon-size:16px; } .modal__dataTable:not(.modal__dataTable-withComments) ws-icon[name=comment_bubble-fill] { display: none; } .modal__dataTable .modal__dataTable__item-comment ws-icon[name=comment_bubble-fill] { display: flex; --icon-color: var(--base-txt-btn-c); margin: 0 4px 0 0; --icon-size: 16px; } .modal__dataTable:not(.modal__dataTable-withFiles) ws-icon[name=attach-horiz] { display: none; } .modal__dataTable__item-operation .td_user:has(ws-icon[name=lock-fill]), .modal__dataTable__item.pre_act .td_user:has(ws-icon[name=lock-fill]) { background: var(--base-hlt-w-hover); } .modal__dataTable__item-operation .td_user:has(ws-icon[name=lock-fill]) .av_sm, .modal__dataTable__item.pre_act .td_user:has(ws-icon[name=lock-fill]) .av_sm { display:none } .modal__dataTable__item .td_user { position:relative; } .modal__dataTable__item .td_user ws-icon[name=lock-fill] { background: var(--base-txt-alert-minor); border-radius: 12px; width: 24px; height: 24px; --icon-color:var(--white-primary); --icon-size:16px; display: none } .modal__dataTable__item-operation .td_user ws-icon[name=lock-fill], .modal__dataTable__item.pre_act .td_user ws-icon[name=lock-fill] { display: inline-flex } .modal__dataTable__item:has(:focus) { z-index:1 } .modal__dataTable__item:has(:focus) .td_rate .sw { display: none } .modal__dataTable__item-joinPossible { background: var(--base-hlt-hover); } .modal__dataTable__head { background: var(--base-cont-mod-mid); font: var(--font-ui-11-micro-med); text-transform: uppercase; height: 32px; display: flex; box-shadow: 0 0.5px 0 0 var(--base-line-tertiary) inset, 0 -0.5px 0 0 var(--base-line-tertiary) inset !important; color: var(--base-txt-tertiary); ws-icon { --icon-color: var(--base-txt-tertiary); } } .modal__dataTable__head > * { height: 32px; height: 32px; padding: 0 8px; display: flex; align-items: center; + * { box-shadow:0.5px 0 0 var(--base-line-tertiary) inset; } } .modal__dataTable__head .td_time, .modal__dataTable__head .td_money { width: 70px; justify-content: end; box-shadow:0.5px 0 0 var(--base-line-tertiary) inset; white-space:nowrap } .modal__dataTable__head .td_rate { display:none } .modal__dataTable__head .td_rate ~ .td_money { width: 126px; } .modal__dataTable-tasks, .modal__dataTable-tasks-head { .td_prior, .td_stage { width: 40px; box-sizing: border-box; display: inline-flex; justify-content: center; } } .modal__dataTable-tasks { padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important; .modal__dataTable__item { padding-left: 20px; padding-right: 20px; &:not(.modal__dataTable__head-tab) .td_name { height: 100%; font: var(--font-ui-14-regular-reg); } .td_user .space, .td_stage ws-icon { width: 40px; display: flex; align-items: center; justify-content: center; margin-left: -8px; } > div { container-type: inline-size; &[onclick] { cursor: pointer; } } } } @media (max-width: 480px) { .modal__dataTable-tasks { .modal__dataTable__item { padding: 0 0 0 8px; } } }#rightPanel__wrapper { width: 800px; background: var(--base-cont-top); overflow: hidden; z-index: 1021; position: fixed; right: -1300px; top: 0; bottom: 0; transition: right 0.3s ease; -webkit-transition: right 0.3s ease; box-shadow: var(--shadow-cont-major-outline); } body.withTaskPanel #rightPanel__wrapper:not([data-type=hotkey]) { padding-bottom: 40px; } #rightPanel__wrapper[data-type=hotkey] { width: 460px; background: var(--base-cont-mod-top); z-index: 1030; } #rightPanel__wrapper[data-type=plan] { width: 88%; max-width: 1280px; border-radius: 16px 0 0 16px; margin: 4px 0; box-shadow: 0 0 0 1px var(--base-line-tertiary), -4px 0 8px var(--base-cont-mod-trans-low), -20px 0 40px var(--base-cont-mod-trans-low); background: var(--base-cont-low); display: flex; flex-direction: column; align-items: center; } .rightPanel { padding: 5px 0 0 0; height: 100%; box-sizing: border-box; } .rightPanelShown #rightPanel__wrapper { right: 0; } .rightPanel .taskView__head:first-child { padding-top: 0; margin-top: -5px; border-bottom: none; box-shadow: 0 var(--screen-minus-px) var(--base-line-tertiary) inset; } @media screen { .rightPanel > .contentScrollOut { position: relative; overflow: hidden !important; padding-top: 48px; } } .rightPanel .taskView__head > .in_def, .rightPanel .taskView__head > .in { cursor: default; } #rightPanel__wrapper.no-shadow { box-shadow: var(--shadow-cont-minor-lineonly-outside); } #notebook_top .s1 { display: none } .mymenu_foot { height: 36px; padding: 6px 10px } .mymenu_foot .ico_r { margin: 2px 2px 2px 8px } .mymenu_foot .ico_l { margin: 2px 8px 2px 2px } .mymenu_foot a.theme, .mymenu_foot a.website { float: left; width: 140px; font: 12px/36px var(--font-base); color: var(--base-txt-tertiary) } .mymenu_foot a.theme ~ a.website { width: 34px; margin: 0 auto; float: none; display: block; } .mymenu_foot a.website .ico_c { margin: 2px; } .mymenu_foot a.logout { float: right; width: 140px; font: 12px/36px var(--font-base); text-align: right; color: var(--base-txt-tertiary) } body.desktop .mymenu_foot a font { display: none; } body.desktop .mymenu_foot a:hover font { display: inline; } /*--------------------------------------------------------------------------------------------------------------------*/ .mm_task_list { margin: 0 0 24px; padding: 8px 0 0 0; } .mm_wfloat { padding-top: 0; } .mm_task_list div.item { font: 14px/20px var(--font-base); padding: 4px 0 4px 25px; height: 20px; position: relative; white-space: nowrap; overflow: hidden; cursor: pointer } .mm_task_list div.item_new { background: var(--base-hlt-alt-fresh); border-radius: 4px; } .mm_task_list div.item_new .r, .mm_task_list div.item_new .r2 { background: var(--base-hlt-alt-fresh) } .mm_task_list div.selected, .mm_task_list div.selected:hover { background: var(--base-cont-top); border-radius: 4px; box-shadow: var(--shadow-brd-hover); color: var(--base-txt-accent); } .mm_task_list div.selected .r2 { right: 1px; top: 1px; padding: 3px 3px 3px 4px; } .mm_task_list div.notmy a.t { opacity: 0.5 } .mm_task_list div.notmy .r, .mm_task_list div.notmy .r2 { display: none } .mm_task_list .priorb { margin: 0; border-radius: 4px; } .mm_task_list div.sub { margin-left: 20px } .mm_task_list div.sub2 { margin-left: 40px } .mm_task_list div.inf { background-color: var(--base-cont-top); padding-left: 6px; color: var(--base-txt-secondary) } .mm_task_list div a.t { color: var(--base-txt-primary) } .mm_task_list div a.t:hover { background-color: transparent; } /*body:not(.preview_on) .mm_task_list div a.t:hover{background:var(--base-hlt-hover); padding:3px 5px; margin:-3px -5px; border-radius:6px;}*/ .mm_task_list div a.done:hover { color: var(--base-txt-link-major); text-decoration: line-through } .mm_task_list div.sub, .mm_task_list div.sub2 { font: 13px/20px var(--font-base); } .mm_task_list div a.done { color: var(--base-txt-tertiary) !important; text-decoration: line-through !important } .mm_task_list div strike { color: var(--base-txt-secondary) } .mm_task_list div a.t span.me { background: var(--base-cont-note-minor) } .mm_task_list .ico_lock2, .mm_task_list span.ico_sfav_a, .mm_task_list span.ico_new { float: left; margin: 0 0 0 -18px; } .mm_task_list .ico_page { float: left; margin: 0 0 0 -22px; } .mm_task_list .bookmark { float: left; margin: 0 0 0 -18px; } .mm_task_list div.sub .ico_lock2, .mm_task_list div.sub span.ico_sfav_a, .mm_task_list div.sub span.ico_new { margin-top: -1px } .mm_task_list div.sub .bookmark { margin-top: 2px } .mm_task_list .ico_sfav_a ~ .ico_lock2, .mm_task_list .ico_new ~ .ico_lock2, .mm_task_list .ico_new ~ .ico_sfav_a, .mm_task_list .bookmark ~ .ico_lock2 { display: none } .mm_task_list .r { position: absolute; right: 28px; top: 1px; background: var(--base-cont-top); padding: 6px 0; height: 14px; z-index: 20; } .mm_task_list .r .unseen, .mm_task_list .r .seen { float: left; margin: -2px -2px 0 4px; } .mm_task_list .r2 { position: absolute; right: 0; top: 0; background: var(--base-cont-top); padding: 4px; width: 20px; height: 20px; z-index: 21; border-radius: 3px; } .mm_task_list .r span { margin: 0 0 0 4px; } .mm_task_list .sub .r, .mm_task_list .sub2 .r { margin-top: 1px; } .mm_task_list div a.ico_r { padding: 0 } .mm_task_list div.item .t_vs_p .ico_timer { display: none } .mm_task_list div.item:hover .t_vs_p .ico_timer { display: inline-block; margin: 0 } .mm_task_list div.item:hover .t_vs_p .priorb { display: none } .mm_task_list a.ico_delete2 { display: none; margin: 1px 0 -2px 4px !important; position: relative; background-color: var(--base-cont-top); } .mm_wbookmark .item:hover a.ico_delete2 { display: inline-block; } .mm_task_list .ico_timer { background: var(--base-cont-top) url(/assets/img/color/iconset.svg) no-repeat -100px -20px; border-radius: 4px; } .mm_task_list .ico_timer:hover { background: var(--costs-time-major) url(/assets/img/color/iconset.svg) no-repeat -100px -40px; border-radius: 4px; } .mm_task_list span.dt { font: 11px var(--font-base); background: var(--base-hlt-alt-notice); padding: 1px 3px; margin: 0 0 0 3px; color: var(--base-txt-secondary) } /*--------------------------------------------------------------------------------------------------------------------*/ .log .it_vs3 { color: var(--base-txt-tertiary); white-space: nowrap; } /*--------------------------------------------------------------------------------------------------------------------*/ .mm_float { margin: 0 0 4px 0; height: 28px; background: var(--base-cont-top); text-align: center; display: none; position: relative; } .mm_float > span, .mm_float > a { display: inline-block; color: var(--base-txt-primary); font-weight: 500; max-width: 70%; text-overflow: ellipsis; overflow: hidden; font: 12px/16px var(--font-base); padding: 4px 15px; margin: 0 auto 5px 0; white-space: nowrap; border-radius: 12px; } .mm_float > span i, .mm_float > a i { color: var(--base-txt-tertiary); font: italic 11px/16px var(--font-base); margin: 0 0 0 10px; } .mm_float_line > span, .mm_float_line > a { box-shadow: 0 0 0 1px var(--menu-cont-line) inset; background: var(--base-cont-mid); position: relative } .mm_float_line > a:hover, .mm_float_line > a.selected { background: var(--base-hlt-notr-hover); box-shadow: none; color: var(--base-txt-primary); } .mm_float_line:before { content: ''; display: block; border-top: 1px solid var(--menu-cont-line); position: absolute; left: 0; top: 12px; right: 0 } /*--------------------------------------------------------------------------------------------------------------------*/ .sidePanel__list__group__title .label_client { margin: 0; background:var(--base-hlt-b-selected) !important; color:var(--base-txt-btn-b) !important; } .help_logo { padding: 15px 0; height: 60px; background: var(--colors-blue-600); background: var(--gradient-cont-fresh) } .help_logo div { width: 110px; margin: 0 auto } .help_logo .ico_help_logo { background: url(/assets/img/addpeople_iconset.png) -240px -180px; width: 60px; height: 60px; margin: 0 10px 0 0; float: right } .help_logo .av_nm { float: left; margin: 4px -20px 0 5px; border: 2px solid var(--base-cont-top); border-radius: 30px; } .help_title { font: italic 14px/20px var(--font-serif); padding: 10px 15px; color: var(--base-txt-secondary) } .help_title i { float: left; background: var(--base-hlt-w-easy); font: bold 12px/20px var(--font-base); padding: 2px 10px; border: 1px solid var(--base-btn-alert-primary-minor); border-radius: 4px; margin: -3px 10px -3px 0; color: var(--base-txt-alert-major); } .help_title a { font: 14px/20px Roboto, var(--font-base); color: var(--costs-money-major) } .help_footer { position: absolute; left: 0; bottom: 0; right: 0; background: var(--base-cont-low); } .help_menu { background: var(--base-cont-low); padding: 10px 10px; height: 1000px; margin: 0 0 -1000px 0 } .help_menu a { display: block; color: var(--base-txt-tertiary); font: italic 12px/14px var(--font-base); padding: 10px 15px; height: 38px; border: 1px solid var(--base-cont-low); border-left: 3px solid var(--base-cont-low) } .help_menu a b { font: 14px/20px var(--font-base); color: var(--base-txt-accent) } .help_menu a.selected { border: 1px solid var(--base-line-tertiary); border-left: 3px solid var(--base-btn-alert-primary-minor); border-radius: 4px; } .help_menu a:hover { border: 1px solid var(--base-line-tertiary); border-left: 3px solid var(--base-line-alert); background: var(--base-cont-top); border-radius: 4px; color: var(--base-txt-link-minor) } .help_menu .ico, .help_support .ico { width: 30px; height: 30px; } .help_menu .ico_r { margin: 4px 0 0 0 } .help_menu a .ico_help6 { opacity: 0.6; filter: grayscale(100%); } .help_menu a:hover .ico_help6 { opacity: 1; filter: none; } .help_support { position: relative; padding: 20px; } .help_support div { position: absolute; left: 0; right: 0; top: 45px; background: var(--base-btn-alert-primary-minor); height: 1px; transition: all 0.5s ease; -webkit-transition: all 0.5s ease } .help_support:hover div { top: 0; height: 90px } .help_support a { display: block; width: 240px; white-space: nowrap; font: 13px/30px var(--font-base); color: var(--base-txt-accent); border: 1px solid var(--base-line-tertiary); background: var(--base-cont-low); border-radius: 4px; padding: 9px 15px; margin: 0 auto; position: relative; } .help_footer .app_load { margin: 20px auto 0; width: 320px; opacity: 0.7; height: 90px; } .help_footer .app_load a:hover { border-top: none; padding-top: 15px; opacity: 1; } .help_link { float: right; font: 14px/30px var(--font-base); color: var(--base-txt-accent); border: 1px solid var(--base-line-tertiary); border-radius: 4px; padding: 9px 15px; margin: 0 auto; position: relative } .help_link:hover { border: 1px solid var(--base-btn-alert-primary-minor); color: var(--base-txt-max) } .help_link .ico { width: 30px; height: 30px; } /* chrome */ @supports (-webkit-appearance:none) { body.sidePanelShown480p #sidePanel__wrapper .scrollZone { margin-right: 0; } body.sidePanelShown480p #events { margin-right: 0 } body.sidePanelShown480p .partner_link { padding: 6px 0 6px 10px; } } /* ---- firefox ----- */ @-moz-document url-prefix() { body { overflow-y: scroll; } } .my_task_schedule { height: 60px; padding: 0 0 0 11px; } .my_task_schedule a { float: left; width: 116px; border: 1px solid var(--base-line-ghost); border-radius: 4px; margin: 0 0 0 8px; text-align: center; color: inherit; padding: 8px 0 } .my_task_schedule a:hover { border-color: var(--base-txt-secondary); color: var(--base-txt-secondary); } .my_task_schedule a:last-child { margin-right: -20px; } .my_task_schedule a .num { border: 1px solid var(--base-txt-tertiary); font: 13px/20px var(--font-base); padding: 0 5px; margin: -6px 0 -6px 5px; border-radius: 30px; display: inline-block; min-width: 22px; text-align: center; box-sizing: border-box } .my_task_schedule a .num:empty { display: none } .rightPanel .moreLoad__place {height:20px; padding:10px 0 0;} @media (max-width: 480px) { .rightPanel { padding: 0; } #rightPanel__wrapper[data-type=plan] { margin: 0; } #rightPanel__wrapper { max-width: 800px; width: 100%; padding-bottom: 0 !important; bottom: 0 !important; z-index: 1032 !important; } #rightPanel__wrapper .eventsList-full { padding-bottom: var(--sa-bot); } } .sidePanel__list.sidePanel__list-skeleton { padding: 0 20px; & > .ws-skeleton-place {margin-top: 16px;height: 24px;} } .sidePanel__tabs.sidePanel__tabs-skeleton { pointer-events: none; ul { width: 100%; } li { width: 20%; padding: 12px 0; margin-right: 8px } } .sidePanel:has(.loading-overlay) { .sidePanel__list { opacity: 0.7; } } .componentTeamAvatars {display: flex;align-content: center;align-items: center;} .componentTeamAvatars span { cursor: pointer; position: relative; } .componentTeamAvatars .av_nm, .componentTeamAvatars .av_sm { margin: 0 -4px 0 0; display: flex; box-shadow: 0 0 0 2px var(--base-cont-top); vertical-align: top; justify-content: center; } .componentTeamAvatars ws-icon.av_sm { background-color: var(--base-cont-top) } .componentTeamAvatars__item--online .av_nm, .componentTeamAvatars__item--online .av_sm { box-shadow: 0 0 0 1px var(--base-cont-top), 0 0 0 2px var(--costs-timer-play); } .componentTeamAvatars__item:last-child .av_nm, .componentTeamAvatars__item:last-child .av_sm, .componentTeamAvatars > .av_nm:last-child, .componentTeamAvatars > .av_sm:last-child { margin-right: 0; } .projectView .projectNote .componentTeamAvatars .av_nm, .projectView .projectNote .componentTeamAvatars .av_sm { box-shadow: 0 0 0 2px var(--base-cont-mod-low); } .listing__item-inactive .users .av_nm, .listing__item-inactive .users .av_sm { box-shadow: 0 0 0 2px var(--base-cont-low) } .componentTeamAvatars span.more { box-sizing: border-box; display: inline-block; height: 24px; line-height: 20px !important; text-align: center; font: var(--font-ui-10-nano-med); border-radius: 12px; background: var(--base-hlt-g-hover); backdrop-filter: blur(4px); vertical-align: top; position: relative; padding: 2px 6px; box-shadow: 0 0 0 2px var(--base-cont-top); color: var(--base-txt-secondary); cursor: pointer; } .projectView .projectNote .componentTeamAvatars span.more { box-shadow: 0 0 0 2px var(--base-cont-mod-low); } .componentTeamAvatars .user_to .av_sm { border-radius: 0 } .componentTeamAvatars i { margin: 0 5px 0 9px; border-left: 1px solid var(--base-line-alt-gap-minor); width: 1px; height: 16px; } .componentTeamAvatars .cnt_over { position:absolute; background:var(--lbl-overdue-invert); color:var(--white-accent); min-width:6px; padding:0 2px; height:10px; border-radius:3px; font:8px/10px var(--font-base); text-align:center; left:0; top:20px; box-shadow:0 0 0 1.5px var(--base-cont-top); } .componentTeamAvatars .cnt_over:hover { background:var(--base-btn-primary-minor); } @media (max-width: 480px) { .projectView .projectNote .componentTeamAvatars i { display: none; } } /* overwrite padding helper classes */ /* all sides */ .forceMargin-0px { margin: 0 !important;} .forcePadding-0px { padding: 0 !important;} .forcePadding-2px { padding: 2px !important; } .forcePadding-4px { padding: 4px !important; } .forcePadding-6px { padding: 6px !important; } .forcePadding-8px { padding: 8px !important; } .forcePadding-12px { padding: 12px !important; } .forcePadding-16px { padding: 16px !important; } .forcePadding-20px { padding: 20px !important; } .forcePadding-24px { padding: 24px !important; } .forcePadding-28px { padding: 28px !important; } .forcePadding-32px { padding: 32px !important; } .forcePadding-36px { padding: 36px !important; } .forcePadding-40px { padding: 40px !important; } .forcePadding-44px { padding: 44px !important; } .forcePadding-48px { padding: 48px !important; } /* top side */ .forcePaddingTop-0px { padding-top: 0 !important;} .forcePaddingTop-2px { padding-top: 2px !important; } .forcePaddingTop-4px { padding-top: 4px !important; } .forceMarginTop-4px { margin-top: 4px !important; } .forcePaddingTop-6px { padding-top: 6px !important; } .forcePaddingTop-8px { padding-top: 8px !important; } .forcePaddingTop-12px { padding-top: 12px !important; } .forcePaddingTop-16px { padding-top: 16px !important; } .forcePaddingTop-20px { padding-top: 20px !important; } .forcePaddingTop-24px { padding-top: 24px !important; } .forcePaddingTop-28px { padding-top: 28px !important; } .forcePaddingTop-32px { padding-top: 32px !important; } .forcePaddingTop-36px { padding-top: 36px !important; } .forcePaddingTop-40px { padding-top: 40px !important; } .forcePaddingTop-44px { padding-top: 44px !important; } .forcePaddingTop-48px { padding-top: 48px !important; } /* bottom side */ .forcePaddingBottom-0px { padding-bottom: 0 !important;} .forcePaddingBottom-2px { padding-bottom: 2px !important; } .forcePaddingBottom-4px { padding-bottom: 4px !important; } .forcePaddingBottom-6px { padding-bottom: 6px !important; } .forcePaddingBottom-8px { padding-bottom: 8px !important; } .forcePaddingBottom-12px { padding-bottom: 12px !important; } .forcePaddingBottom-16px { padding-bottom: 16px !important; } .forcePaddingBottom-20px { padding-bottom: 20px !important; } .forcePaddingBottom-24px { padding-bottom: 24px !important; } .forcePaddingBottom-28px { padding-bottom: 28px !important; } .forcePaddingBottom-32px { padding-bottom: 32px !important; } .forcePaddingBottom-36px { padding-bottom: 36px !important; } .forcePaddingBottom-40px { padding-bottom: 40px !important; } .forcePaddingBottom-44px { padding-bottom: 44px !important; } .forcePaddingBottom-48px { padding-bottom: 48px !important; } /* left side */ .forceMarginLeft-auto { margin-left: auto !important;} .forceMarginLeft-4px { margin-left: 4px !important;} .forcePaddingLeft-0px { padding-left: 0 !important;} .forcePaddingLeft-2px { padding-left: 2px !important; } .forcePaddingLeft-4px { padding-left: 4px !important; } .forcePaddingLeft-6px { padding-left: 6px !important; } .forcePaddingLeft-8px { padding-left: 8px !important; } .forcePaddingLeft-12px { padding-left: 12px !important; } .forcePaddingLeft-16px { padding-left: 16px !important; } .forcePaddingLeft-20px { padding-left: 20px !important; } .forcePaddingLeft-24px { padding-left: 24px !important; } .forcePaddingLeft-28px { padding-left: 28px !important; } .forcePaddingLeft-32px { padding-left: 32px !important; } .forcePaddingLeft-36px { padding-left: 36px !important; } .forcePaddingLeft-40px { padding-left: 40px !important; } .forcePaddingLeft-44px { padding-left: 44px !important; } .forcePaddingLeft-48px { padding-left: 48px !important; } /* right side */ .forceMarginRight-auto { margin-right: auto !important;} .forceMarginRight-4px { margin-right: 4px !important;} .forcePaddingRight-0px { padding-right: 0 !important;} .forcePaddingRight-2px { padding-right: 2px !important; } .forcePaddingRight-4px { padding-right: 4px !important; } .forcePaddingRight-6px { padding-right: 6px !important; } .forcePaddingRight-8px { padding-right: 8px !important; } .forcePaddingRight-12px { padding-right: 12px !important; } .forcePaddingRight-16px { padding-right: 16px !important; } .forcePaddingRight-20px { padding-right: 20px !important; } .forcePaddingRight-24px { padding-right: 24px !important; } .forcePaddingRight-28px { padding-right: 28px !important; } .forcePaddingRight-32px { padding-right: 32px !important; } .forcePaddingRight-36px { padding-right: 36px !important; } .forcePaddingRight-40px { padding-right: 40px !important; } .forcePaddingRight-44px { padding-right: 44px !important; } .forcePaddingRight-48px { padding-right: 48px !important; } .flexGap-0px { gap: 0 !important; } .flexGap-2px { gap: 2px !important; } .flexGap-4px { gap: 4px !important; } .flexGap-6px { gap: 6px !important; } .flexGap-8px { gap: 8px !important; } .flexGap-12px { gap: 12px !important; } .flexGap-16px { gap: 16px !important; } .flexGap-20px { gap: 20px !important; } .flexGap-24px { gap: 24px !important; } .flexGap-28px { gap: 28px !important; } .flexGap-32px { gap: 32px !important; } .flexGap-36px { gap: 36px !important; } .flexGap-40px { gap: 40px !important; } .flexGap-44px { gap: 44px !important; } .flexGap-48px { gap: 48px !important; } .spacerH-2px { width: 100%; height: 2px; } .spacerH-4px { width: 100%; height: 4px; } .spacerH-6px { width: 100%; height: 6px; } .spacerH-8px { width: 100%; height: 8px; } .spacerH-12px { width: 100%; height: 12px; } .spacerH-16px { width: 100%; height: 16px; } .spacerH-20px { width: 100%; height: 20px; } .spacerH-24px { width: 100%; height: 24px; } .spacerH-28px { width: 100%; height: 28px; } .spacerH-32px { width: 100%; height: 32px; } .spacerH-36px { width: 100%; height: 36px; } .spacerH-40px { width: 100%; height: 40px; } .spacerH-44px { width: 100%; height: 44px; } .spacerH-48px { width: 100%; height: 48px; } .flexJustifyCenter { justify-content: center;} .textCapitalize, .textCapitalize > * { text-transform: capitalize } .textEllipsis, .textEllipsis > span, .textEllipsis > p, .textEllipsis > div { overflow: hidden; text-overflow: ellipsis } .text-danger { color: var(--base-txt-alert-major); --icon-color: var(--base-txt-alert-major); font: var(--font-ui-13-small-reg) } .setupBlock__warning { position: absolute; top: 0; left: 0; width: calc(100% - 1px); height: calc(100% - 1px); background: var(--base-cont-mod-top); padding-bottom: 0 !important; border-radius: 14px; display: flex; flex-direction: column; justify-content: flex-end; } .setupBlock__warning .setupBlock__warning-title { border-top: 2px solid var(--colors-red-750); font: var(--font-ui-18-title-2-semi); padding: 20px 0 20px 28px; } .setupBlock__warning .setupBlock__warning-text { font: var(--font-ui-15-large-med); padding: 0 28px; } .setupBlock__warning .setupBlock__warning-buttons { display: flex; gap: 16px; padding: 12px 28px 28px 28px; justify-content: flex-end; } .setupBlock__info { display: flex; flex-direction: row; justify-content: space-between; width: 100%; padding: 12px; box-sizing: border-box; border: 1px solid var(--base-line-ghost); border-radius: 12px; } .setupBlock__info-extended { display: block; } .setupBlock__info-extended .setupBlock__info__row { display: flex; flex-direction: row; justify-content: space-between; } .setupBlock__info-extended .setupBlock__info__row > ws-icon, .setupBlock__info > ws-icon { padding: 8px; } .setupBlock__info .setupBlock__info-text { display: flex; flex-direction: column; padding: 8px 6px; gap: 4px; flex-grow: 1; min-width: 0; } .setupBlock__info .setupBlock__info-text .setupBlock__title { font: var(--font-ui-16-title-3-semi); padding: 0; height: auto; text-wrap-style: balance; } .setupBlock__info .setupBlock__info-text .setupBlock__text { font: var(--font-ui-14-regular-reg); color: var(--base-txt-accent); padding: 0; } .setupBlock__info .setupBlock__info-content { margin-left: -36px; } .setupBlock__info .setupBlock__line, .setupBlock__line-full { margin: 8px 0 !important; } /* red */ .setupBlock__info-warning { background: var(--base-hlt-w-hover); } .setupBlock__info-warning .setupBlock__title { color: var(--base-txt-alert-major); } .setupBlock__info-warning .setupBlock__title a.inline:hover { color: var(--base-txt-primary); } .setupBlock__info-warning > ws-icon { --icon-color: var(--base-txt-alert-major); } /* yellow (Lush) */ .setupBlock__info-notice { background: var(--base-hlt-alt-notice); } .setupBlock__info-notice .setupBlock__title { color: var(--base-txt-notice-major); } .setupBlock__info-notice ws-icon { --icon-color: var(--base-txt-notice-major); } /* green (Lush) */ .setupBlock__info-new { background: var(--base-hlt-alt-fresh); } .setupBlock__info-new .setupBlock__title { color: var(--base-txt-new-major); } .setupBlock__info-new ws-icon { --icon-color: var(--base-txt-new-major); } /* blue (Lush) */ .setupBlock__info-a { background: var(--base-hlt-easy); } .setupBlock__info-a .setupBlock__title { color: var(--base-txt-btn-a); } .setupBlock__info-a ws-icon { --icon-color: var(--base-txt-btn-a); } .setupBlock__info-a a { text-decoration: underline; color: var(--base-txt-btn-a); } /* violet (Lush) */ .setupBlock__info-b { background: var(--base-hlt-b-hover); } .setupBlock__info-b .setupBlock__title { color: var(--base-txt-btn-b); } .setupBlock__info-b ws-icon { --icon-color: var(--base-txt-btn-b); } /* stone */ .setupBlock__info-g { background: var(--post-contact-bg); } .setupBlock__info-g .setupBlock__title { color: var(--colorize-lbl-txt-accent); } .setupBlock__info-g ws-icon { --icon-color: var(--colorize-lbl-txt-accent); } .setupBlock__info-g .setupBlock__text { color: var(--colorize-lbl-txt-primary); } .setupBlock__info-g .setupBlock__text-highlight { color: var(--colorize-lbl-txt-accent); } .setupBlock__info-pay { background: var(--base-hlt-alt-notice); } .setupBlock__info-pay .setupBlock__title { color: var(--base-txt-notice-minor); } .setupBlock__info-pay ws-icon { --icon-color: var(--base-txt-notice-minor); } .setupBlock__info-pay-success { background: var(--base-hlt-alt-fresh); } .setupBlock__info-pay-success .setupBlock__title { color: var(--base-txt-alt-fresh); } .setupBlock__info-pay-success ws-icon { --icon-color: var(--base-txt-alt-fresh); } .setupBlock__info-pay-error { background: var(--base-hlt-w-selected); } .setupBlock__info-pay-error .setupBlock__title { color: var(--base-txt-alert-minor); } .setupBlock__info-pay-error ws-icon { --icon-color: var(--base-txt-alert-minor); } .blockDivider-16 { width: 100%; height: var(--sp_fix_16); } .btn.withLoader:before, .btn.withLoader-white:before { content: ''; display:inline-block; width: 10px; height: 10px; border-radius: 10px; border:2px solid var(--base-btn-primary-minor); border-left-color:transparent; -webkit-transform:translateZ(0); -ms-transform:translateZ(0); transform:translateZ(0); -webkit-animation:loader 1.1s infinite linear; animation:loader 1.1s infinite linear; } .btn.withLoader-white:before { border:2px solid var(--white-accent); border-left-color:transparent; } .setupPage:not(.setupPage__wide) { max-width: 636px; margin: 0 auto; } .setupPage__wide { max-width: 1020px; margin: 0 auto; } .setupPage .setup { display: flex; flex-direction: column; gap: 24px } .setupPage .setupBlock { padding: 24px; margin: 0; position: relative; } .paymentPage .setupBlock { padding: 22px 28px; } .setupPage .setupBlock__title { padding: 12px 12px 0 12px; } .planPage .setupBlock__title { padding: 0; } .setupPage.setupPage .setupBlock__title > ws-icon, .setupPage.setupPage .setupBlock__title > .space { padding: 0 4px; width: 28px; height: 28px; } .planPage .setupBlock__title > ws-icon { align-self: flex-start; } .setupPage .setupBlock__title > ws-icon svg, .setupPage .setupBlock__title > .space svg { width: 28px; height: 28px; } .planPage .setupBlock__title ws-icon { width: 36px; height: 36px; } .planPage .setupBlock__title ws-icon svg { width: 20px; height: 20px; } .setupPage .setupBlock__title .in { display: flex; flex-direction: row; gap: 12px; height: fit-content; padding: 6px 8px; font: var(--font-ui-18-title-2-semi); align-items: center; } .planPage .setupBlock__title .in { flex-shrink: 1; padding: 8px 6px; font: var(--font-ui-16-title-3-semi); } .planPage .setupBlock__info ws-btn { margin: 4px 6px 0 24px; } .setupPage .setupBlock .setupBlock__explain { padding: 0 20px 8px 20px; } .setupPage .setupBlock .setupBlock__indent.setupBlock__explain { padding: 0 20px 8px 24px; } .setupPage .setupBlock .setupBlock__explain .in { padding: 0 8px; font: var(--font-ui-14-regular-reg); color: var(--base-txt-primary); } .setupPage .setupBlock__content .setupBlock__line:not(.setupBlock__line-full) { border-top: 0.5px solid var(--base-txt-ghost); margin: 8px 24px 8px 24px; } .setupPage .setupBlock__line { margin: 8px 24px 8px 24px; } .setupPage .setupBlock__content, .setupPage .setupBlock__content:first-child { padding: 0; } .setupPage .setupBlock__indent { padding: 0 20px 0 28px; } .planPage .setupBlock__indent { max-width: 666px; padding: 4px 0 8px 42px; } .setupPage .inputBlock__wrapper { padding: 0; } .setupPage .inputBlock { padding: 0; } .setupPage .setupBlock > .setupBlock__title { /*padding: 0 0 12px 0;*/ padding: 0; margin: -10px -8px -8px -12px; } .setupPage .setupBlock > .setupBlock__title + div { padding-top: 16px !important; } #setup_ftp_storage #ftp_form .setupBlock__explain { padding-top: 16px; } .setupPage .inputBlock__wrapper .setupBlock__label { font: var(--font-sp-caption-11-micro-upper-med); text-transform: uppercase; } .setupPage .inputBlock__wrapper .inputBlock { padding: 0; } .paymentPage .inputBlock__wrapper .inputBlock { padding: 0; } .setupPage .inputBlock__wrapper .inputBlock label:not(.inputBlock__label) { padding: 10px; } .setupPage .inputBlock__wrapper .inputBlock .inputBlock__content { height: auto; } .setupPage .inputBlock__wrapper .inputBlock label a ws-icon[name="content_copy"] svg { fill: var(--base-txt-btn-a); } .setupBlock input.input.tmp-setup-input:not([type="password"]):not(.input_error), .setupPage input.input.tmp-setup-input:not([type="password"]):not(.input_error) { background-color: var(--base-hlt-g-hover); border: none; } .setupPage input.tmp-setup-input { height: 36px; padding: 8px 10px; box-sizing: border-box; } .setupPage input.tmp-setup-input-h32 { height: 32px; padding: 6px 8px; box-sizing: border-box; } .setupPage .input.tmp-setup-input-digit, .setupPage .input.tmp-setup-input-2fa { background: var(--base-hlt-g-hover); border: none; text-align: left; } .setupPage .input.tmp-setup-input-h32.tmp-setup-input-digit { width: 24px; padding-left: 0; padding-right: 0; text-align: center; } .setupPage input.tmp-setup-input[name="currency"], .setupPage input.tmp-setup-input[name="rate"], .setupPage input.tmp-setup-input[name="ftp_size"], .setupPage input.tmp-setup-input[name="ftp_ext"] { height: 28px; padding: 4px 8px; border-radius: 6px; } .setupPage .inputBlock__content:has(input.tmp-setup-input[name="backup_port"]):before, .setupPage .inputBlock__content:has(input.tmp-setup-input[name="ftp_port"]):before { content: ':'; margin-left: -12px; } .setupBlock { background: var(--base-cont-top); box-shadow: var(--shadow-cont-minor-outline); border-radius: 12px; margin: 12px 0; font: var(--font-ui-14-regular-reg); box-sizing: border-box; } .setupBlock[data-collapsed="true"] .setupBlock__content { display: none; } .setupBlock-highlight { box-shadow: var(--shadow-brd-hover-b); } .modal__content .setupBlock { background: var(--base-cont-mod-top); } .setupBlock__muted { background: var(--base-cont-mid); } .setupBlock__muted .setupBlock__title ws-icon { --icon-color: var(--base-txt-tertiary); } .setupBlock__muted .setupBlock__title ws-icon[name*="social"] { filter: saturate(25%); opacity: 0.6; } #emergency_off .setupBlock__muted .setupBlock__title ws-icon[name=hint] svg { fill: var(--base-txt-btn-a); } .setupBlock__muted .setupBlock__title .in { color: var(--base-txt-tertiary); } .setupPage .setupBlock.setupBlock__muted .setupBlock__explain .in { color: var(--base-txt-tertiary); } .setupBlock__muted .ws-btn-reset, .setupBlock__disabled .ws-btn-reset { display: none !important; } .setupBlock__disabled { background: var(--base-cont-mid); color: var(--base-txt-muted); } .setupBlock__disabled .setupBlock__title ws-icon { --icon-color: var(--base-txt-muted); } .setupBlock__disabled .setupBlock__title ws-icon[name*="social"] { filter: saturate(25%); opacity: 0.25; } .setupBlock__disabled .inputCheckbox input:disabled ~ span svg, .setupBlock__item__disabled .inputCheckbox input:disabled ~ span svg { fill: var(--base-txt-muted); } .setupBlock.setupBlock__disabled .setupBlock__explain .in { color: var(--base-txt-muted); } .setupBlock__item__disabled .in { display: flex; align-items: center; gap: 12px; color: var(--base-txt-muted); } .setupBlock__disabled .setupBlock__item .inputCheckbox, .setupBlock__disabled .setupBlock__item .in, .setupBlock .setupBlock__item__disabled .inputCheckbox, .setupBlock .setupBlock__item__disabled .in label { cursor: default; } .setupBlock__item__disabled .in label .badge.badge-promo:first-child { margin-right: 4px; vertical-align: text-top; } .setupPage .setupBlock__item .inputCheckbox + .in, .setupPage .setupBlock__item .inputRadio + .in, .setupPage .in-semibold { font: var(--font-ui-14-regular-semi); } .paymentPage .inputCheckbox.act + .in { color: var(--base-txt-accent); } .setupPage .setupBlock__item .in-only { padding: 0 10px 0 0 !important; } .setupPage .setupBlock .setupBlock__item + .setupBlock__indent { padding: 0 20px 0 38px; } .setupPage .inputBlock__logo { display: flex; flex-direction: row; gap: 16px; } .setupPage .inputBlock__logo .inputBlock__logo-controls { display: flex; flex-direction: column; } .setupPage .inputBlock__logo .inputBlock__logo-controls .logo_buttons { display: flex; gap: 8px; } .setupPage .inputBlock__logo .inputBlock__logo-controls .logo_buttons ws-btn + ws-btn { margin: 0 0 0 0; } .setupPage .inputBlock__logo .inputBlock__logo-controls .logo_buttons ws-icon[name^=award] svg { fill: var(--base-btn-notice-major); } .setupPage .inputBlock__logo .inputBlock__logo-controls .logo_text { padding: 4px 4px 4px 0; } .setupPage .inputBlock__logo .inputBlock__logo-controls .logo_text .in { font: var(--font-ui-12-mini-reg); padding: 0; } .setupPage .inputBlock__logo .inputBlock__logo-controls .logo_text .in span { font: var(--font-ui-14-regular-semi); } .setupPage .inputBlock__logo .inputBlock__imageWrapper { position: relative; #logo_reset { position: absolute; top: -6px; left: -6px; .btn { --icon-size: 20px; --icon-color: 20px; width: unset; height: unset; padding: unset; border-radius: 50%; background: var(--base-cont-top); svg { fill: var(--base-txt-primary); } &:hover svg { fill: var(--base-txt-max); } } } } .setupPage .inputBlock__logo .inputBlock__logo-dark, .setupPage .inputBlock__logo .inputBlock__logo-light { width: 80px; height: 80px; padding: 8px; box-sizing: border-box; border-radius: 12px; cursor: pointer; } .setupPage .inputBlock__logo .inputBlock__logo-image { display: flex; padding: 12px; box-sizing: border-box; border-radius: 6px; width: 64px; height: 64px; justify-content: center; align-items: center; } .setupPage .inputBlock__logo .inputBlock__logo-dark { background: var(--sidebar-cont-base); } .setupPage .inputBlock__logo .inputBlock__logo-light { background: var(--base-cont-mod-low); } .setupPage .inputBlock__logo .inputBlock__logo-dark:not(.logo_vis), .setupPage .inputBlock__logo .inputBlock__logo-light:not(.logo_vis), .setupPage .inputBlock__logo-controls .load_btn_light { display: none; } .setupPage .inputBlock__logo .inputBlock__logo-light .inputBlock__logo-image { background: #FFF; } .setupTime { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 12px; } .setupTime .setupTime-input input { background: var(--base-hlt-g-hover); border-radius: 8px; height: 36px; border: none; } .setupBlock .setupBlock-button { padding: 6px 12px; border-radius: 6px; color: var(--base-txt-secondary); box-shadow: 0 0 0 1px var(--base-line-secondary); transition: all 0.3s ease; gap: 6px; cursor: pointer; } .projectView .setupBlock .setupBlock-button span { font: 600 13px/20px var(--font-base); } .setupBlock .setupBlock-button:hover { color: var(--base-txt-accent); box-shadow: 0 0 0 1px var(--base-line-accent); } /*.form_autoSave-changed .setupBlock {*/ /* box-shadow: var(--shadow-cont-major-outline);*/ /*}*/ .setupBlock input[type=text], .setupBlock input[type=number], .setupBlock input[type=email], .setupBlock input[type=tel] { border: 1px solid var(--inp-hlt-brd); background: var(--inp-hlt-bg); font-size: 14px; } .setupBlock input[type=password], .setupPage input.input_error { box-shadow: var(--shadow-brd-error); background: var(--base-hlt-w-easy); } .setupBlock input.input_gray { border: 1px solid var(--inp-cont-brd); background: var(--inp-cont-low); } .setupBlock input.input_gray:focus { border: 2px solid var(--inp-hlt-brd); background: var(--inp-cont-top); padding-left: 15px; } .setupBlock__title { padding: 12px; } .setupBlock__title .space { width: 40px; display: flex; align-items: center; justify-content: center; } .setupBlock__title .space .ico_l { margin: 0 } .setupBlock__title > .in { font: 590 16px/40px var(--font-base); padding: 0 8px; } .setupBlock__title .r { padding: 0 4px; } .setupBlock__title .sw_pre { display: flex; flex-direction: row; align-items: center; } .setupBlock__title .sw_pre .sw { float: none; margin: 0 4px; } .setupBlock__title .sw_pre .sw_txt { padding: 0 8px; } .setupBlock__title > ws-icon:not(.chip-left-icon), .setupBlock__title .space > ws-icon:not(.chip-left-icon) { width: 40px; } .setupBlock__title .space svg, .setupBlock__title > ws-icon svg { width: 28px; height: 28px; } .setupBlock__title .buts { display: none; } .setupBlock__content { padding: 0 24px 16px 16px; } .profileBlock .setupBlock__content { padding: 24px; } .profileBlock .setupBlock__content + .setupBlock__content, .profileBlock .setupBlock__title + .setupBlock__content { padding: 0 24px 24px; } .setupPage .setupBlock__form.hidden .sw_pre { pointer-events:none } .setupPage .setupBlock__form .hidden { display:none } .setupBlock__content:first-child { padding-top: 16px; } .profileBlock .setupBlock__content:first-child { padding-top: 20px; } .setupBlock__slider { height: auto; } .setupBlock__explain { padding: 0 0 16px; display: flex; flex-direction: row; color: var(--base-txt-secondary); } .setupBlock__text { padding: 0 8px 16px; font: var(--font-ui-13-small-reg); color: var(--base-txt-accent); } .setupBlock__info-notice .setupBlock__text { padding: 8px 16px; } .setupBlock__simple { padding: 12px; } .setupBlock__explain:last-child { padding-bottom: 0 } .setupBlock__explain .in { padding: 0 8px; } .setupBlock__explain .email { color: var(--base-txt-act-major); } .setupBlock__group__title { padding: 6px 0; font-weight: bold; display: flex; flex-direction: row; } .setupBlock__group__title .in { padding: 0 8px; } .setupBlock__slider__title { font-weight: bold; } .setupBlock__slider .eye_conf { float: none; padding: 0; height: 48px; margin: 0; } .setupBlock__item { min-height: 40px; display: flex; align-items: center; } .setupBlock__item-big { height: 40px; } .setupBlock:not(.profileBlock) .setupBlock__item > .in { padding: 0 10px; } .setupBlock__item > .in { flex-grow: 1; } .setupBlock__item > .in label { display: inline-block; /* width: 100%; */ padding: 8px 0; cursor: pointer; } .setupBlock__item .space svg { width: 32px; height: 32px; } .setupBlock__item .input { text-align: center; height: 24px; border-radius: 8px; padding: 0; } .setupBlock hr { border: none; border-top: 0.5px solid var(--base-line-tertiary); margin: 4px 0; } .setupBlock__line { border: none; border-top: 0.5px solid var(--base-line-tertiary); margin: 8px 0; } .setupBlock .drop_select { margin: 0; float: none; } .setupBlock__content-privacy .drop_select[data-value="0"] { background: var(--colors-green-alpha-600-a10); box-shadow: 0 0 0 1px var(--colors-green-alpha-des500-easy-a60) inset; } .setupBlock-primary { box-shadow: none; border: 0; } .setupBlock__notice { border-radius: 12px; display: flex; flex-grow: 1; flex-direction: row; padding: 8px; } .setupBlock__notice .noticeText { display: flex; flex-direction: column; } .setupBlock__notice-info { background: var(--base-hlt-easy); color: var(--base-txt-btn-a); } .setupBlock__notice .noticeIcon { padding: 8px 10px; } .setupBlock__notice .noticeIcon ws-icon { transform-origin: center; transform: scale(1.4); } .setupBlock__notice .noticeTitle { font: var(--font-ui-16-title-3-semi); padding: 8px 4px 4px 4px; } .setupBlock__notice .noticeDesciption { font: var(--font-ui-14-regular-reg); padding: 4px 8px 8px 4px; text-wrap-style: pretty; } .setupBlock__notice-info svg { fill: var(--base-txt-btn-a); } .setupBlock.setupBlock-alert .setupBlock__title svg { fill: var(--base-txt-alert-major); } .setupBlock.setupBlock-alert .setupBlock__content { background: var(--base-hlt-w-easy); border-radius: 0 0 12px 12px; } .setupBlock.setupBlock-alert .inputBlock__wrapper { padding-top: 18px; } .setupBlock__bg-notice { background: var(--base-hlt-alt-notice); } .setupBlock__bg-notice .icon-notice-fill svg { fill: var(--base-txt-notice-major); } .setupBlock__bg-alert { background: var(--base-hlt-w-hover); } .setupBlock__bg-alert .icon-notice-fill svg { fill: var(--base-txt-alert-major); } .inputCheckbox { width: 28px; min-height: 28px; background: none !important; padding: 0; } .paymentPage .inputCheckbox { width: 20px; height: 20px; } .inputCheckbox-h24 { width: 24px; height: 24px; min-height: 24px; } .inputCheckbox-h20 { width: 20px; height: 20px; min-height: 20px; } .inputCheckbox input { display: none; } .inputCheckbox span { display: block; width: 20px; height: 20px; padding: 4px; border-radius: 8px; background: var(--trans); transition: background .4s ease } .paymentPage .inputCheckbox span { padding: 0; } .inputCheckbox-h24 span, .inputCheckbox-h24 span ws-icon, .inputCheckbox-h24 span svg, .inputCheckbox-h20 span, .inputCheckbox-h20 span ws-icon, .inputCheckbox-h20 span svg { width: 16px; height: 16px; } .inputCheckbox-h20 span { padding: 2px; } .inputCheckbox span svg { fill: var(--base-txt-tertiary); } .inputCheckbox:not(.inputCheckbox-alwaysOn) { cursor: pointer } .inputCheckbox.withLabel { width: max-content; display: flex; align-items: center; gap: 10px; } .inputCheckbox:not(.inputCheckbox-alwaysOn):active input:not(:disabled) ~ span, .inputCheckbox:not(.inputCheckbox-alwaysOn) input:checked:not(:disabled) ~ span { background: var(--base-hlt-notr-hover); transition: none; } .inputCheckbox:not(.act):hover input:not(:checked):not(:disabled) ~ span, .inputCheckbox:not(.act).hoverFake input:not(:checked):not(:disabled) ~ span { background: var(--base-hlt-g-hover); } .inputCheckbox input:checked ~ span svg, .inputCheckbox:active input[type=checkbox]:not(:disabled) ~ span svg { fill: var(--base-txt-link-minor) } .dataTable__item-active .inputCheckbox input:indeterminate ~ span use:nth-child(5) { fill: var(--base-txt-link-minor) } .inputCheckbox-alwaysOn svg { fill: var(--base-btn-togg-ghost) !important; } .inputCheckbox use:nth-child(3), .inputCheckbox use:nth-child(4), .inputCheckbox use:nth-child(5) { display: none } .inputCheckbox input:checked ~ span use:nth-child(2), .inputCheckbox input:indeterminate ~ span use:nth-child(2), .inputCheckbox input:disabled ~ span use:nth-child(2) { display: none; } .inputCheckbox use:nth-child(2) { opacity: 0; transition: opacity .4s ease; } .inputCheckbox:not(.act):hover input:not(:checked) ~ span use:nth-child(2), .inputCheckbox:not(.act).hoverFake input:not(:checked) ~ span use:nth-child(2) { opacity: 1; } .inputCheckbox use:first-child { display: inline-block } .inputCheckbox input:checked ~ span use:first-child, .inputCheckbox input[type=hidden] ~ span use:first-child:not(:last-child), .inputCheckbox input[type=hidden] ~ span use:nth-child(2), .inputCheckbox input:indeterminate ~ span use:first-child { display: none } .inputCheckbox input:checked ~ span use:nth-child(3), .inputCheckbox input[type=hidden] ~ span use:nth-child(3) { display: inline-block } .inputCheckbox input:indeterminate ~ span use:nth-child(4) { display: inline-block } .dataTable__item-active .inputCheckbox input:indeterminate ~ span use:nth-child(4), .dataTable__group-active .inputCheckbox input:indeterminate ~ span use:nth-child(4), .dataTable__subgroup-active .inputCheckbox input:indeterminate ~ span use:nth-child(4) { display: none } .dataTable__item-active .inputCheckbox input:indeterminate ~ span use:nth-child(5), .dataTable__group-active .inputCheckbox input:indeterminate ~ span use:nth-child(5), .dataTable__subgroup-active .inputCheckbox input:indeterminate ~ span use:nth-child(5) { display: inline-block } .inputCheckbox input:disabled ~ span svg { fill: var(--base-txt-muted); } .inputRadio { width: 28px; height: 28px; background: none !important; padding: 0; } .paymentPage .inputRadio { width: 20px; height: 20px; } .inputRadio input { display: none; } .inputRadio span { display: block; width: 20px; height: 20px; padding: 4px; border-radius: 8px; background: var(--trans); transition: background .4s ease } .paymentPage .inputRadio span { padding: 0; } .inputRadio span svg { fill: var(--base-txt-tertiary); } .inputRadio:not(.inputRadio-alwaysOn) { cursor: pointer } .inputRadio:not(.inputRadio-alwaysOn):active input ~ span, .inputRadio:not(.inputRadio-alwaysOn) input:checked ~ span { background: var(--base-hlt-hover); transition: none; } .paymentPage .inputRadio:not(.inputRadio-alwaysOn):active input ~ span, .paymentPage .inputRadio:not(.inputRadio-alwaysOn) input:checked ~ span { background: none; } .inputRadio:not(.act):hover input:not(:checked) ~ span, .inputRadio:not(.act).hoverFake input:not(:checked) ~ span { background: var(--base-hlt-g-hover); } .paymentPage .inputRadio:not(.act):hover input:not(:checked) ~ span { background: none; } .inputRadio input:checked ~ span svg, .inputRadio:active input[type=radio] ~ span svg { fill: var(--base-txt-link-minor) } .inputRadio-alwaysOn svg { fill: var(--base-btn-togg-ghost); } .inputRadio use:last-child { display: none } .inputRadio input:checked ~ span use:nth-child(2) { display: none; } .inputRadio use:nth-child(2) { opacity: 0; transition: opacity .4s ease; } .inputRadio:not(.act):hover input:not(:checked) ~ span use:nth-child(2), .inputRadio:not(.act).hoverFake input:not(:checked) ~ span use:nth-child(2) { opacity: 1; } .inputRadio use:first-child { display: inline-block } .inputRadio input:checked ~ span use:first-child { display: none } .inputRadio input:checked ~ span use:last-child { display: inline-block } .setupBlock__button { color: inherit; display: inline-flex; padding: 0 8px; background: var(--inp-cont-low); height: 32px; align-items: center; flex-wrap: nowrap; border-radius: 6px; box-shadow: 0 0 0 1px var(--inp-cont-brd) inset; white-space: nowrap; } .setupBlock__button .in { padding: 0 8px; } .setupBlock__button:hover, .setupBlock__button-active { background: var(--inp-hlt-bg); box-shadow: 0 0 0 1px var(--inp-hlt-brd) inset; color: var(--inp-hlt-txt); } .setupBlock__button-delete, .setupBlock__button-delete:hover { background: var(--base-btn-alert-secondary-minor); color: var(--base-btn-alert-primary-major); box-shadow: 0 0 0 1px var(--base-btn-alert-primary-minor) inset; } .setupBlock__button-delete:hover { } .setupBlock__button-delete svg { fill: var(--base-btn-alert-primary-major); } .setupBlock__avatar { gap: 16px; padding: 0 8px 8px; } .setupBlock__avatar #userpic { transform: scale(1.34); margin-right: 8px; } .setupBlock__avatar .av_nm { border-radius: 8px; } .setupBlock__topicStatus{ align-items: flex-end; gap: 8px; } .setupBlock__topicStatus .title{ color: var(--base-txt-btn-a); font: var(--font-ui-13-small-semi); padding-right: 5px; } .setupBlock__topicStatus ws-icon[name^=award] { --icon-color: var(--base-btn-notice-major); } .setupBlock__topicStatus:has(user-topic-status:empty){ display: none !important; } .setupBlock__modal { /*align-items: flex-start;*/ display: flex; width: 100%; } .setupBlock__modal-wrapper { /* min-height: 554px; */ flex: 1; } .modal:is([data-group=contact], [data-group=invite]) .modal__header > .in { /* font: 700 22px/28px var(--font-base); */ /* letter-spacing: -0.012em; */ /* color: var(--base-txt-accent); */ /* padding: 20px 0 20px 28px; */ } .modal:is([data-group=contact], [data-group=invite]) .blank { /* margin-top: 0; */ margin: initial; width: initial; padding: 8px 28px 12px; } @media (max-width: 430px) { .modal:is([data-group=contact], [data-group=invite]) .blank { padding: 8px 24px; } } .modal:is([data-group=contact], [data-group=invite]) .head { width: 472px; margin: 0 -20px 0 -20px; } .modal:is([data-group=contact], [data-group=invite]) .head .button { margin: 24px 0 0 0 !important; } .button.with_icon_end { padding-right: 10px; } .button.with_icon_end ws-icon { padding-left: 8px; } .setupBlock__notify__title { display: flex; flex-direction: row; min-height: 28px; /* max-height: 40px; */ align-items: center; flex-wrap: nowrap; justify-content: flex-end; box-shadow: inset 0 -0.5px 0 var(--base-line-tertiary); } .setupBlock__notify__title span { display: flex; padding: 10px 8px 12px 8px; justify-content: center; } .setupBlock__notify__title span ws-icon { cursor: help; } .setupBlock__notify__title span svg { fill: var(--base-txt-primary); } .setupBlock__notify__title .chrome_n_push { max-width: 20%; white-space: break-spaces; } .setupBlock__notify__item { display: flex; flex-direction: row; height: 36px; border-top: 1px solid var(--base-line-tertiary); flex-wrap: nowrap; align-items: center; } .setupBlock__notify__item:hover { background: var(--base-hlt-g-easy); } .setupBlock__notify__item:nth-of-type(2) { border-top: none; } .setupBlock__notify__item .inputCheckbox { margin: 0 auto; display: block; } .setupBlock__notify__item .inputCheckbox-alwaysOff { display: none } .setupBlock__notify__item > *, .setupBlock__notify__title > * { flex-grow: 0; flex-shrink: 0; padding: 0 8px; min-width: 15%; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .setupBlock__notify__item > .in, .setupBlock__notify__title > .in { flex-grow: 1; flex-shrink: 1; text-align: left; } .setupBlock__content.collapsed { height: 0; opacity: 0; padding: 0 !important; overflow: hidden; } .ws-btn-collapse span { display: none; } .ws-btn-collapse span.act { display: block; } .ws-btn-collapse span ws-icon { width: 20px; height: 20px} .ws-btn-collapse .btn.btn-skeleton span ws-icon { --icon-size: 20px; --icon-color: var(--base-txt-secondary)} .nopush.nomail .event_opts { padding-top: 0 } .nopush.nomail .push_mail { display: none } .inputBlock__wrapper { display: flex; flex-direction: row; flex-wrap: wrap; gap: 16px; } .inputBlock__wrapper.inputBlock-stages { gap: 8px; .inputBlock-45 { width: calc((100% / 2.2) - (((2.2 - 1) / 2) * 8px)) } .inputBlockSpacer { width: calc(100% - 2*(100% / 2.2) - 2*(((2.2 - 1) / 2)* 8px) - 4px); } .inputBlock-45:first-child .inputBlock__label > ws-icon { transform: translate3d(-2px, 7px, 0); } .inputBlock-subset { .inputBlock__label:not(:has(.label)) ws-icon { transform: none; } .inputBlock__label:not(:has(.label)) ws-icon.border_dashed { border-radius: 50%; --icon-color: var(--base-txt-secondary); --icon-size: 16px; border: 1.5px dotted var(--base-txt-tertiary); padding: 4px; transform: translate(-4px, -4px); } .inputBlock__label:not(:has(.label)) ws-icon + .drop_select .in { padding: 3px 0 0 34px; } .inputBlock__label ws-icon.border_dashed + .drop_select .in { color: var(--base-txt-tertiary); } } } #delayedPubMenu .inputBlock__wrapper { align-items: center; gap: 8px; } .paymentPage .inputBlock__wrapper { gap: 12px; padding-bottom: 20px; } .paymentPage .inputBlock__wrapper:has(+ .inputBlock__wrapper) { padding-bottom: 12px; } .paymentPage .inputBlock__wrapper.address_fact { display: none; margin-top: -8px; } .paymentPage .checkBtns:has(.checkBtns__item.pre_act:last-child) + .inputBlock__wrapper.address_fact { display: block; } .paymentPage .inputBlock__wrapper.name { flex-wrap: nowrap; } .inputBlock__wrapper .inputBlock__wrapper { flex-grow: 1; } .more_itms + .inputBlock__wrapper { padding-top: 16px; } .inputBlock { box-sizing: border-box; padding: 8px 0; } .profileBlock .inputBlock, .blank .inputBlock { padding: 0; } #delayedPubMenu .inputBlock { flex: 1 1 0; padding: 10px 0; } .inputBlock__info { display: flex; flex-direction: row; justify-content: space-between; width: 100%; padding: 12px; box-sizing: border-box; border: 1px solid var(--base-line-ghost); border-radius: 12px; } .inputBlock__info > ws-icon { padding: 8px; } .inputBlock__info .inputBlock__info-group { display: flex; flex-direction: column; padding: 8px 6px; gap: 4px; flex-grow: 1; } .inputBlock__info .inputBlock__info-group .inputBlock__info-title { font: var(--font-ui-16-title-3-semi); padding: 0; height: auto; } .inputBlock__info .inputBlock__info-group .inputBlock__info-text { font: var(--font-ui-14-regular-reg); color: var(--base-txt-accent); padding: 0; } .inputBlock__info .inputBlock__info-content { margin-left: -36px; } .inputBlock__info-warning { background: var(--base-hlt-w-hover); } .inputBlock__info-warning .inputBlock__info-title { color: var(--base-txt-alert-major); } .inputBlock__info-warning > ws-icon { --icon-color: var(--base-txt-alert-major); } .inputBlock-100 { width: 100%; } .inputBlock__wrapper .inputBlock-100 { padding: 0; } .inputBlock-50 { width: calc((100% / 2) - (((2 - 1) / 2) * 16px)); } .paymentPage .inputBlock-50 { width: calc((100% / 2) - (((2 - 1) / 2) * 12px)); } .inputBlock-45 { width: calc((100% / 2.2) - (((2.2 - 1) / 2) * 16px)); } .inputBlockSpacer { --icon-color: var(--base-txt-secondary); justify-content: center; width: calc(100% - 2 * (100% / 2.2) - 2 * (((2.2 - 1) / 2) * 16px)); padding: 0 3px; } .inputBlockSpacer + .inputBlock-45 { place-self: normal; } .inputBlock-33 { width: calc((100% / 3) - (((3 - 1) / 3) * 16px)); } .inputBlock-30 { width: calc(30% - (((3 - 1) / 3) * 16px)); } .inputBlock-40 { width: calc(40% - (((3 - 1) / 3) * 16px)); } .inputBlock-25 { width: calc(25% - (((4 - 1) / 4) * 16px)); } .inputBlock-auto { flex-grow: 1; } .inputBlock-autoWidth { flex: 1; } .inputBlock-min { display: inline-flex; gap: 8px; } .inputBlock__title { height: 20px; padding: 6px 0; } .inputBlock__content { height: 40px; position: relative; } .inputBlock-100 .inputBlock__content { height: auto; } .inputBlock *:not(.inputBlock__label) .input { width: 100%; height: 40px; box-sizing: border-box; margin: 0; padding: 0 16px; border-radius: 6px; } .inputBlock > textarea { width: 100%; height: 80px; box-sizing: border-box; margin: 0; padding: 12px; border-radius: 6px; font: 14px/20px var(--font-base); } .inputBlock > textarea:focus { box-shadow: var(--shadow-brd-focus); } .ava_place.ava_square .av_nm { border-radius: 12px; transform: scale(1.3333); transform-origin: top left; } .modal:is([data-group=contact], [data-group=invite]) .ava_place { display: inline-block; outline: none; } .modal:is([data-group=contact], [data-group=invite]) .ava_click:hover .av_nm, .modal:is([data-group=contact], [data-group=invite]) .ava_click:focus .av_nm, .modal:is([data-group=contact], [data-group=invite]) .ava_click:focus-within .av_nm { box-shadow: var(--shadow-brd-focus-alt); } .modal:is([data-group=contact], [data-group=invite]) .ava_place { width: 60px; aspect-ratio: 1 / 1; } .modal:is([data-group=contact], [data-group=invite]) .ava_place.ava_square .av_nm { display: flex; align-items: center; justify-content: center; transform: scale(1.25); border-radius: 9.6px; /* 9.6px * 1.25 = 12px */ &.av_svg { --icon-color: var(--base-txt-secondary); transform: unset; border: unset; border-radius: 12px; width: 100%; height: 100%; background: var(--base-cont-mod-low); svg { width: 24px; height: 24px; } } } .modal:is([data-group=contact], [data-group=invite]) .ava_place.ava_square span.av_def5:before { margin: 0; } .inputBlock label:not(.inputBlock__label) { position: absolute; right: 0; top: 0; padding: 10px; } .inputBlock__label { position: relative; display: flex; margin: 0; height: 60px; border-radius: 12px; overflow: hidden; box-sizing: border-box; background: var(--base-cont-mod-trans-low); align-items: center; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; } .inputBlock.worksection__head-shake .inputBlock__label { background-color: var(--base-hlt-w-hover); } #delayedPubMenu .inputBlock__label { height: 40px; border-radius: 8px; } .inputBlock__label-compact { display: flex; margin: 0; border-radius: 12px; box-sizing: border-box; background: var(--base-hlt-g-hover); min-height: 48px; padding: 6px 8px; align-items: center; } .inputBlock__label-compact:hover { box-shadow: var(--shadow-brd-enable); } .inputBlock__label-compact .label { display: flex; padding: 8px; font: var(--font-ui-14-regular-reg); color: var(--base-txt-primary); align-items: center; flex-grow: 1; } .inputBlock__label-compact .sw_pre { display: flex; align-items: center; padding: 0 6px 0 8px; } .inputBlock__label-allowGrow { min-height: 60px; height:auto; } .inputBlock__label.inputBlock__label-allowGrow .drop_select { height: auto !important; } .inputBlock__label-allowGrow .drop_select .in { white-space: initial } /* .inputBlock__label-allowGrow .drop_select .in { display:flex; overflow: hidden; gap: 4px; } .inputBlock__label-allowGrow .drop_select .in span { flex-shrink: 1; overflow:hidden; text-overflow:ellipsis } */ .inputBlock__label > ws-icon, .inputBlock__label > .av_sm, .inputBlock__label > .ico { position: absolute !important; top: 20px; left: 14px; transform-origin: 0 0; transform: translate3d(0, 0, 0); transition: all .2s ease; opacity: 1 !important; } .inputBlock__label > .ico { margin: 0; } .inputBlock__label .label { position: absolute; top: 20px; font: var(--font-ui-16-title-3-reg); left: 16px; color: var(--base-txt-tertiary); pointer-events: none; transform-origin: 0 0; transform: translate3d(0, 0, 0); transition: all .2s ease; white-space: nowrap; overflow: hidden; max-width: 100%; text-overflow: ellipsis; } .inputBlock__label .label ws-icon[name=hint] { pointer-events: auto; margin-top: -4px; } .inputBlock__label textarea[name=contact_hidden] + .label ws-icon[name=hint] { scale: 1.33; margin-left: 2px; } .inputBlock__label .label > ws-icon:not([name=hint]) { --icon-color: var(--base-txt-secondary); transform: translateY(-2px); } .inputBlock__label .label > ws-icon:not([name=hint]) + .in { padding-left: 4px; } .inputBlock__label input:focus + .label { pointer-events: all; } .inputBlock__label .label .limit { opacity: 0; font: var(--font-ui-16-title-3-reg); color: var(--base-txt-muted); text-wrap: nowrap; transition: opacity 0s ease-in-out 0s; } .inputBlock__label input:focus + .label .limit { opacity: 1; transition: opacity .125s ease-in-out .2s; } .inputBlock__label .label-has-drop { display: inline-flex; position: absolute; top: 8px; left: 12px; align-items: flex-start; gap: 8px; } .inputBlock__label .label-has-drop i { font-size: 12px; line-height: 16px; } .inputBlock__label .label-has-drop a.drop_select { height: 16px; overflow: hidden; border-radius: 8px; background: var(--base-hlt-b-selected); color: var(--base-txt-btn-b); padding: 0 4px 0 8px; } .inputBlock__label .label-has-drop a.drop_select .in { font-size: 11px; line-height: 16px; color: var(--base-txt-btn-b); font-weight: 510; padding: 0; } .inputBlock__label .label-has-drop a.drop_select ws-icon { width: 16px; height: 16px; --icon-size:16px; --icon-color: var(--base-txt-btn-b); } .inputBlock__label input[type=text], .inputBlock__label input[type=number], .inputBlock__label input[type=email], .inputBlock__label input[type=tel], .inputBlock__label input[type=password] { width: 100%; border: 0; background: none; padding: 25.5px 12px 10.5px 14px; font-size: 16px; line-height: 20px; font-weight: 400; /* height: 56px; */ letter-spacing: -0.02em; border-radius: 12px; color: var(--base-txt-accent); transition: all .15s ease; font-family: var(--font-base); box-sizing: border-box; text-overflow: ellipsis; } .inputBlock__label:has(.inputBlock__icons) input[type=text], .inputBlock__label:has(.inputBlock__icons) input[type=number], .inputBlock__label:has(.inputBlock__icons) input[type=email], .inputBlock__label:has(.inputBlock__icons) input[type=tel], .inputBlock__label:has(.inputBlock__icons) input[type=password] { padding-right: 0; } #delayedPubMenu .inputBlock__label input[type=text] { padding: 0 0 0 16px; font: var(--font-ui-15-large-semi); } .inputBlock__label div.input { width: 100%; border: 0; background: none; padding: 26px 12px 0 14px; height: 60px; font-size: 16px; font-weight: 400; letter-spacing: -0.02em; box-sizing: border-box; border-radius: 12px; color: var(--base-txt-accent); transition: all .15s ease; font-family: var(--font-base); line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .inputBlock__label.has-labels { height: auto; min-height: 60px; } .inputBlock__label.has-labels div.input { white-space: normal; height: auto; padding-bottom: 6px; } .inputBlock__label .input ws-icon { padding-right: 4px; } .inputBlock__label .input ws-icon { --icon-color: var(--base-txt-btn-a); } .inputBlock__label.has-textarea { padding: 26px 4px 2px 0; height: auto; } .inputBlock__label.has-textarea.no-label { padding: 2px 4px 2px 0; height: auto; } .inputBlock__label.has-textarea textarea { width: 100%; min-height: 70px; border: 0; background: none; padding: 0 8px 10px 16px; color: var(--base-txt-primary); font: var(--font-txt-13-small-reg); cursor: auto; } .inputBlock__label.has-textarea.no-label textarea { padding: 10px 8px 10px 16px; } .inputBlock__label.has-textarea.no-label textarea::placeholder { font: var(--font-txt-13-small-reg); } .inputBlock__label.has-textarea.big-size textarea { font: var(--font-txt-15-large-reg); } .inputBlock__label.has-textarea.no-label.big-size textarea::placeholder { font: var(--font-txt-15-large-reg); } .inputBlock__label.has-textarea textarea::-webkit-scrollbar { height: 6px; width: 6px; } .inputBlock__label.has-textarea textarea::-webkit-scrollbar-track { background-color: transparent; border: 0 } .inputBlock__label.has-textarea textarea::-webkit-scrollbar-track:hover { background-color: transparent; } .inputBlock__label.has-textarea textarea::-webkit-scrollbar-button { display: none; height: 0; width: 0 } .inputBlock__label.has-textarea textarea::-webkit-scrollbar-corner { background-color: transparent } .inputBlock__label.has-textarea textarea::-webkit-scrollbar-thumb { background-color: transparent; border-radius: 3px; min-height: 20%; } .inputBlock__label.has-textarea textarea::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-major) !important; } .inputBlock__label.has-textarea textarea:hover::-webkit-scrollbar-thumb { background-color: var(--scroll-minor); } .inputBlock__label.has-textarea textarea::-webkit-resizer { background: transparent; display: none; width: 0; height: 0; } .inputBlock__label > ws-icon + input { padding-left: 38px !important; } .inputBlock__label > ws-icon + input + .label { left: 40px; } .inputBlock__label input.input_bold, .inputBlock__label div.input_bold { font-weight: 590; } .inputBlock__label:not(.inputBlock__label-disabled):has(input, textarea, div.input, a.drop_select):hover { box-shadow: var(--shadow-brd-enable), 0 0 0 0 transparent; } .inputBlock__label input:not(:placeholder-shown) { background: none; box-shadow: none; } .inputBlock__label input:not(:focus):not(.ignore_hide)::-webkit-input-placeholder { color: transparent; } .inputBlock__label input:not(:focus)::-moz-placeholder { color: transparent; } .inputBlock__label > ws-icon + input:not(:placeholder-shown) + .label { transform: translate3d(-24px, -12px, 0) scale(0.75); } label.inputBlock__label:not(.ignore_focus):focus-within { background: var(--base-cont-input); outline: none; box-shadow: 0 0 0 0 transparent inset, var(--shadow-brd-focus); } label.inputBlock__label:not(.ignore_focus):focus-within:has(button:focus) { box-shadow: var(--shadow-brd-enable); } .modal__content label.inputBlock__label:not(.ignore_focus):focus-within { background: var(--base-cont-mod-input); } .inputBlock__label:focus-within > ws-icon { transform: translate3d(0, 6px, 0); } .inputBlock__label-fake > ws-icon, .inputBlock__label-fake > .av_sm, .inputBlock__label:has(input:not(:placeholder-shown)) > ws-icon, .inputBlock__label:has(input:focus) > ws-icon, .inputBlock__label-fake > .ico { transform: translate3d(0, 6px, 0); } .inputBlock__label input:not(:placeholder-shown) + .label, .inputBlock__label textarea + .label, .inputBlock__label .pickerInput ~ .label, .inputBlock__label .block_as_input ~ .label, .inputBlock__label input:focus + .label, .inputBlock__label > .drop_select ~ .label, .inputBlock__label > ws-icon > .drop_select ~ .label, .inputBlock__label div.input + .label, .inputBlock__label input.ignore_hide + .label { transform: translate3d(0, -12px, 0) scale(0.75); } .paymentPage .inputBlock-50 .inputBlock__label input:focus + .label { max-width: none; width: 116%; } .paymentPage .inputBlock-100 .inputBlock__label input:focus + .label { max-width: none; width: 125%; } .inputBlock__label > ws-icon + input:focus + .label { transform: translate3d(-24px, -12px, 0) scale(0.75); } .inputBlock__label label.text-label { position: absolute; top: 28px; right: 16px; pointer-events: none; padding: 0; /* font: var(--font-ui-13-small-reg); */ color: var(--base-txt-secondary); } .inputBlock__label:not(:focus-within) > input:placeholder-shown ~ label { display: none; } .inputBlock__label > ws-icon { --icon-color: var(--base-txt-btn-a); } .inputBlock__label ws-icon[name^=folder] { --icon-color: var(--folder-color); } .inputBlock__label > ws-icon[name=trash_can] { --icon-color: var(--base-txt-alert-major); } .inputBlock__label .label-icons-top { position: absolute; top: 5px; right: 15px; } .inputBlock__label .label-icons-top ws-icon { transform: scale(0.75); } .inputBlock__label .label-icons-top .sw_small { margin: 0; } .inputBlock__label .label-icons-top .sw_small .sw { padding: 0; margin-left: 0; margin-right: 0; } .inputBlock__label ws-icon.text-primary { --icon-color: var(--base-txt-primary); } .inputBlock__label ws-icon.violet { --icon-color: var(--base-hlt-b-invert); } .inputBlock__label ws-icon.blue { --icon-color: var(--base-txt-btn-a); } .inputBlock__label ws-icon.red { --icon-color: var(--base-txt-alert-major); } .inputBlock__label ws-icon.ico_alert_sm, .inputBlock__label ws-icon.ico_email_req { --icon-color: var(--base-txt-alert-major); } label.inputBlock__label .input_error, label.inputBlock__label input[type=password] { box-shadow: none !important; } label.inputBlock__label:not(:focus-within):has(.input_error) { box-shadow: var(--shadow-brd-error); } label.inputBlock__label:focus-within:has(.input_error) { box-shadow: var(--shadow-brd-error-focus); } label.inputBlock__label .inputBlock__label-counter { display: none; } label.inputBlock__label:has(.input_error) .inputBlock__label-counter { position: absolute; top: 4px; right: 4px; border-radius: 4px; display: flex; height: 16px; font: 11px / 16px var(--font-base); font-weight: 600; width: 28px; background: var(--base-txt-alert-minor); color: var(--base-txt-alt-light); align-items: center; justify-content: center; } .sw_violet.sw_act .sw { background: var(--base-hlt-b-invert); } .sw_blue.sw_act .sw { background: var(--base-hlt-invert); } .inputBlock.req_error .inputBlock__label { box-shadow: var(--shadow-brd-error), 0 0 0 0 transparent; background: var(--base-hlt-w-easy); } .inputBlock.req_error .inputBlock__label:focus-within { box-shadow: 0 0 0 0 transparent inset, var(--shadow-brd-error-focus); background: var(--base-cont-mod-top); } .inputBlock__alert { font: 400 13px/20px var(--font-base); color: var(--base-txt-alert-major); padding: 7px 0 12px 0; display: none; } .inputBlock__alert svg { fill: var(--base-txt-alert-major); } .inputBlock .drop_select { width: 100%; height: 40px; box-sizing: border-box; margin: 0; padding: 0 8px; border-radius: 6px; } .inputBlock .drop_select.drop_select--auto-height { padding-right: 36px; } .inputBlock__label .drop_select .in span:has(+ .drop_gmt) { flex: 1; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .inputBlock__label .drop_select .in:not(:has(*)) { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } div#modalContainer {} .inputBlock__label .drop_select { box-shadow: none; flex: 1; height: 100% !important; background: none; font-size: 16px; gap: 8px; } .inputBlock__label .drop_select .in { font-size: 16px; color: var(--base-txt-accent); font-weight: 400; padding: 22px 0 7px 8px; letter-spacing: -0.011em; } .inputBlock__label-disabled .drop_select .in { color: var(--base-txt-tertiary); } .inputBlock__label > ws-icon ~ .drop_select .in, .inputBlock__label .av_sm ~ .drop_select .in, .inputBlock__label .ico ~ .drop_select .in { padding: 15px 0 0 30px; } .inputBlock__label :not(.label-has-drop) .drop_select ws-icon { --icon-color: var(--base-txt-secondary); padding-right: 10px; } .inputBlock__label.drop_select_bold .drop_select .in { font-weight: 590; } .inputBlock__label.drop_select_bold .drop_select .drop { background-color: transparent; } .inputBlock__icons { display: flex; padding-right: 12px; /* padding-left: 14px; */ align-items: center; } .inputBlock__label:focus-within .inputBlock__icons { padding-left: 4px; } #delayedPubMenu .inputBlock__icons ws-icon { width: 16px; height: 16px; --icon-color: var(--base-txt-secondary); } .inputBlock__icons ws-btn, .inputBlock__icons button { margin: 0; } .inputBlock__label input:placeholder-shown + span + .inputBlock__icons ws-btn:not(.alwaysOn), .inputBlock__label input:placeholder-shown + .inputBlock__icons ws-btn:not(.alwaysOn) { display: none; } .inputBlock .setupBlock__button { height: 40px; } .setupBlock__label { width: 160px; display: flex; justify-content: flex-end; align-items: center; text-align: right; } .flex-text-l { display: flex; justify-content: flex-start; align-items: center; } .flex-text-r { display: flex; align-items: center; justify-content: flex-end; } .flex-text-center { display: flex; justify-content: center; align-items: center; } .flex-gap-10 { gap: 10px; } .hiddenBlock, .button.hiddenBlock { display: none !important; } .button.button_circle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 40px; padding: 0; } .button.logo_reset { box-shadow: 0 0 0 1px var(--base-txt-muted) inset; color: var(--base-txt-tertiary); background: var(--white-primary); font-weight: 600; } .button.logo_reset:hover { box-shadow: 0 0 0 1px var(--base-txt-primary) inset; color: var(--base-txt-accent); background: var(--white-primary); } .inputBlock__content .block_as_input { height: 40px; box-shadow: 0 0 0 1px var(--inp-cont-brd); border-radius: 8px; padding: 0 8px; color: inherit; } .inputBlock__label .block_as_input { width: 100%; height: 100%; } .inputBlock__content .block_as_input:hover { box-shadow: var(--shadow-brd-focus); } .inputBlock__content .block_as_input ws-icon { width: 36px; height: 36px; --icon-size:24px; } .inputBlock__content .block_as_input input.hidden, .inputBlock__label .block_as_input input.hidden { position: absolute; left: 0; top: 0; opacity: 0; height: 40px; pointer-events: none !important; padding: 0; } .inputBlock__label .block_as_input input.hidden { width: 0; height: 0; } .inputBlock__content .block_as_input input.timepicker { border: none; padding: 0 4px; font: 14px/20px var(--font-base); height: 38px; background: none; color: inherit; width: 60px; flex-grow: 1; } .inputBlock__content .block_as_input .in { padding: 0 4px; flex-grow: 1; color: inherit } .inputBlock__label .block_as_input .in { position: absolute; top: 26px; left: 38px; font-size: 16px; color: var(--base-txt-accent); font-weight: 400; pointer-events: none; transform-origin: 0 0; transform: translate3d(0, 0, 0); transition: all .2s ease; white-space: nowrap; overflow: hidden; max-width: 100%; text-overflow: ellipsis; padding: 0; } #delayedPubMenu .inputBlock__label .block_as_input .in { position: relative; top: auto; left: 16px; font: var(--font-ui-15-large-semi); } .pickerInput { background: var(--inp-cont-top); min-height: 35px; border: 1px solid var(--inp-cont-brd); padding: 4px 6px 0 6px; border-radius: 8px; } .pickerInput .in a { display: inline-block; font: 13px/20px var(--font-base); padding: 5px 30px 5px 10px; border-radius: 4px; margin: 0 4px 4px 0; overflow: hidden; text-overflow: ellipsis; position: relative; vertical-align: top; white-space: nowrap; max-width: 188px; box-sizing: border-box; } .pickerInput .in .input { vertical-align: top; display: inline-block; padding: 5px; font: 14px/20px var(--font-base); width: 300px; background: transparent; border: none; margin: 0 0 5px; } .pickerInput .in a:after { content: ''; position: absolute; right: 5px; top: 5px; background: url(/assets/img/color/iconset.svg) 0 -420px; width: 20px; height: 20px; } .pickerInput .in a:hover:after { background-position: -80px -420px; opacity: 0.8; } .inputBlock__label .pickerInput { background: transparent; border: none; padding: 0 8px 0 16px; } .inputBlock__label .pickerInput .input { padding-left: 0; } .formSimple { display: inline-flex; padding: 0 2px; margin: 0 4px; height: 28px; border-radius: 6px; background: var(--base-hlt-g-hover); } .formSimple.h24 { height: 24px; border-radius: 5px; } .formSimple.h32 { height: 32px; border-radius: 7px; } .modal__content .formSimple { background: var(--base-cont-mod-trans-low); } .modal__content .daterow .formSimple { background: var(--base-cont-mod-top-elevated); } .modal__content .formSimple:focus-within { background: var(--base-cont-mod-input); } .formSimple label { display: inline-flex; padding: 0 !important; } .formSimple label input { background: transparent !important; box-shadow: none !important; border: none !important; width: 24px; height: 28px; padding: 0; color: var(--base-txt-primary); font: var(--font-txt-13-small-med); text-align: center; } .formSimple.h32 label input { height: 32px; font: var(--font-ui-14-regular-semi); } .formSimple.h24 label input { height: 24px; font: var(--font-ui-13-small-med); } .formSimple label input[size='2'] { width: 24px; } .formSimple label input[size='3'] { width: 32px; } .formSimple label input[size='4'] { width: 40px; } .formSimple label input[size='5'] { width: 48px; } .formSimple label input[size='6'] { width: 56px; } .formSimple label input[size='7'] { width: 64px; } .formSimple label input[size='8'] { width: 72px; } .formSimple label input[size='9'] { width: 80px; } .formSimple label input[size='10'] { width: 88px; } .formSimple label input[size='11'] { width: 96px; } .formSimple label input[size='12'] { width: 104px; } .formSimple label input[size='13'] { width: 112px; } .formSimple label input[size='14'] { width: 120px; } .formSimple label input[size='15'] { width: 128px; } .formSimple label span { color: var(--base-txt-tertiary); font: var(--font-ui-11-micro-med); } .formSimple label > span { padding: 8px 4px 0 4px; } .formSimple.h32 label span { font: var(--font-ui-11-micro-reg); } .formSimple.h32 label > span { padding: 10px 4px 0 4px; } .formSimple .formSimple__icon { color: var(--base-txt-tertiary); display: inline-flex; align-items: center; padding: 2px; height: 24px; border-radius: 4px; } .formSimple .formSimple__icon svg { fill: var(--base-txt-tertiary); } .formSimple:hover { box-shadow: var(--shadow-brd-enable-hover); } .formSimple:hover input, .formSimple input:hover { color: var(--base-txt-accent); } .formSimple:hover .formSimple__icon svg { fill: var(--base-txt-accent); } .formSimple:focus-within { box-shadow: var(--shadow-brd-focus); background: var(--base-cont-input); } .formSimple:focus-within .formSimple__icon { background: var(--base-hlt-easy); } .formSimple:focus-within .formSimple__icon svg { fill: var(--base-txt-btn-a); } .formSimple input.input_error { border: none; box-shadow: none; } .formSimple:has(.input_error), .formSimple-error { box-shadow: var(--shadow-brd-error) !important; background: var(--base-hlt-w-easy) !important; } .formSimple:has(.input_error) .formSimple__icon svg, .formSimple-error .formSimple__icon svg { fill: var(--base-txt-alert-major); } .formSimple:has(.input_error):focus-within .formSimple__icon svg, .formSimple-error:focus-within .formSimple__icon svg { fill: var(--base-txt-alert-major); } .formSimple:has(.input_error):focus-within, .formSimple-error:focus-within { box-shadow: var(--shadow-brd-error-focus) !important; background: var(--base-cont-mod-top) !important; } .formSimple:has(.input_error):focus-within .formSimple__icon, .formSimple-error:focus-within .formSimple__icon { background: transparent; } .formSimple:has(input:disabled) { background: var(--base-hlt-g-easy); box-shadow: none !important; } .formSimple input:disabled, .formSimple:has(input:disabled) span, .formSimple:has(input:disabled) .formSimple__icon svg { color: var(--base-txt-muted); fill: var(--base-txt-muted); } @media (max-width: 640px) { .pickerInput .in a { max-width: calc(50% - 7px); } } @media (max-width: 400px) { .pickerInput .in a { max-width: 100%; } } .pickerInput .in .input::-webkit-input-placeholder { font: italic 14px/20px var(--font-base); } .pickerInput.focus { box-shadow: var(--shadow-brd-focus); border-color: transparent; border-radius: 4px; } .pickerInput-users .in a { border-radius: 16px; background: var(--base-hlt-hover); box-shadow: 0 0 0 1px var(--base-hlt-invert) inset; color: var(--base-txt-primary); display: inline-flex; padding: 4px; } .pickerInput-users .in a.special { background: var(--base-hlt-invert); color: var(--white-primary); box-shadow: none; } .pickerInput-users .in a.special svg { fill: var(--white-primary); } .pickerInput-users .in a .av_sm { margin: -2px; transform: scale(0.833) } .pickerInput-users .in a .in { padding: 0 4px; overflow: hidden; flex-shrink: 1; text-overflow: ellipsis; } .pickerInput-users .in a:after { display: none; } .pickerInput-users .in .input { width: 200px; height: 20px; } #taskReminder__users ws-icon.role { background: var(--menu-item-invert); border-radius: 14px; width: 24px; height: 24px; } #taskReminder__users ws-icon.role svg { fill: var(--white-accent) !important; } #taskReminder__users .menu__item.selected ws-icon.role, #taskReminder__users .menu__item:hover ws-icon.role, #taskReminder__users .menu__item.selected:hover ws-icon.role { background: none } #taskReminder__users .av_sm { margin: 0 0 0 8px; } #taskReminder__users .menu__item-checked { display: none !important; } .inputBlock__qr { background: var(--base-hlt-g-hover); padding: 10px; border-radius: 16px; } .inputBlock__qr img { border-radius: 16px; } .inputBlock__label .dots { } .inputBlock__label .dots i { display: inline-block; width: 8px; height: 8px; border: 1px solid var(--base-line-primary); vertical-align: 0; border-radius: 3px; } .inputBlock__label .dots i.act { background: var(--base-txt-link-major); border-color: var(--base-txt-link-major) } .inputBlock__label .dots i.i2.act, .inputBlock__label .dots i.i3.act { background: var(--base-btn-alert-primary-minor); border-color: var(--base-btn-alert-primary-minor); } .inputBlock__label .dots span { color: var(--base-txt-tertiary); margin: 0 2px; } #setup_api .setupBlock__explain:first-of-type { padding-top: 12px; } @media (max-width: 960px) { .planPage .setupBlock__info { flex-direction: column; } .planPage .setupBlock__info ws-btn { width: fit-content; margin: 12px 0 8px 42px; } } @media (max-width: 768px) { .setupBlock__content.only_time .in { flex-wrap: wrap; } } @media (max-width: 480px) { .planPage .setupBlock__info ws-btn { width: initial; } .setupPage .setupBlock__content .inputCheckbox { align-self: flex-start; padding: 6px 0; } .setupBlock__label { width: 100%; justify-content: flex-start; } .setupPage .setupBlock__indent, .setupPage .setupBlock .setupBlock__indent.setupBlock__explain { padding-right: 0; } .setupPage .setupBlock__form:nth-of-type(2) .inputBlock:last-child .inputBlock__label .label { max-width: 44%; } .setupPage .inputBlock__wrapper { gap: 10px 16px; } #setup_2fa .setupBlock__item { flex-wrap: wrap; } #setup_2fa .setupBlock__item div:first-child { margin: 0 auto; } #setup_2fa .setupBlock__item div:last-child { gap: 8px; } #setup_ip_filter .setupBlock__item { flex-wrap: wrap; } #setup_ip_filter .setupBlock__item .in { width: 70%; } .flex-text-l { text-wrap: nowrap; overflow: hidden; } } @media (max-width: 414px) { #setup_owner .setupBlock__item { flex-direction: column; align-items: flex-start; gap: 10px; } #setup_owner .setupBlock__item .in { padding-left: 0; } #setup_ip_filter .setupBlock__item ws-btn { flex-grow: 1; } } .inputBlock__label > .help { position: absolute; top: 6px; right: 10px; } /*.inputBlock__label .drop_select .in:has(+[value="-1"]) { color: var(--base-txt-tertiary); font-weight: 400; letter-spacing: -0.02em; }*/ .inputBlock__label > .av_sm { --ava-scale: calc(20 / 24); scale: var(--ava-scale); transform-origin: center center; } .inputBlock__label > ws-icon.av_sm { --icon-color: var(--base-txt-secondary); border-style: dashed; } .inputBlock__label.inputBlock__label-upgrade { justify-content: end; } .inputBlock__label.inputBlock__label-upgrade .label { color: var(--base-txt-muted); } .inputBlock__label.inputBlock__label-upgrade div.input { color: var(--base-btn-notice-major); } .inputBlock__label.inputBlock__label-upgrade .inputBlock__icons { --icon-color: var(--base-btn-notice-major); } .inputBlock__parent .inputBlock__label { height: 32px; padding: 0 6px; gap: 0; border-radius: 6px; } .inputBlock__parent .drop_select { margin: auto; padding: 0; gap: 0; } .inputBlock__parent .inputBlock__label .label { display: none; } .inputBlock__parent .inputBlock__label .drop_select .in { padding: 0 6px; font: var(--font-ui-12-mini-med); } .inputBlock__parent .inputBlock__label.inputBlock__label ws-icon { position: static !important; inset: unset; transform: none; width: 32px; height: 32px; --icon-color: var(--base-txt-primary); flex-shrink: 0; } .inputBlock__parent .inputBlock__label.inputBlock__label-client { background: var(--base-hlt-b-easy); } .inputBlock__parent .inputBlock__label.inputBlock__label-client:hover { box-shadow: var(--shadow-brd-hover-b); } .inputBlock__parent .inputBlock__label.inputBlock__label-client .drop_select .in { color: var(--base-txt-btn-b); } .inputBlock__parent .inputBlock__label.inputBlock__label-client ws-icon { --icon-color: var(--base-txt-btn-b); } .fu15lr-bta { font: var(--font-ui-15-large-reg); color: var(--base-txt-accent); } .inputBlock__label.inputBlock__label-h36 { height: 36px; border-radius: 8px; } .inputBlock__label.inputBlock__label-h36 .label { top: 8px; left: 12px; font: var(--font-ui-13-small-reg); } .inputBlock__label.inputBlock__label-h36 input[type=text] { padding: 2px 12px; font: var(--font-ui-15-large-med); } .inputBlock__label.inputBlock__label-h36 input:not(:placeholder-shown) + .label, .inputBlock__label.inputBlock__label-h36 textarea + .label, .inputBlock__label.inputBlock__label-h36 input:focus + .label { transform: translate3d(0, 0, 0) scale(0.75); opacity: 0; } .setupBlock-inline { box-shadow: unset; margin: 0; padding: 0; } .setupBlock-inline .setupBlock__content { padding: 0; } .form-label { display: block; padding: 0; color: var(--base-txt-primary); font: var(--font-ui-15-large-semi); } .form-input { margin: 8px 0; } .inputBlock__label > .loader_sm { position: absolute; top: 4px; right: 4px; } .setupBlock__list__item .setupBlock__text { padding: 0 0 0 calc(40px + 12px + 8px); } .s2fa-step__text { padding: 6px 0; /* 20px(line-height) + 2*6px = 32px(to imitate text with btn-32 size) */ } .s2fa-step__row { column-gap: 8px; row-gap: 2px; /* 6px(padding-bottom) + 2px = 8px(to imitate general row gap) */ } .s2fa-step__row > .flex_row { gap: 8px; } .viewsList { font: 14px/20px var(--font-base); height: 38px; padding-left: 8px; } .viewsList__item ws-icon { width: 16px; height: 16px; --icon-size: 16px; --icon-color: var(--base-txt-tertiary); } .viewsList__star ws-icon { --icon-size: 12px; --icon-color: var(--base-txt-primary); } .viewsList__item ws-icon.upd, .headerGeneral .headerGeneral__content .upd-control ws-icon.upd { --icon-color: var(--base-txt-btn-c); } .viewsList__item:not(.viewsList__item-primary) ws-icon.home { display: none } .viewsList__item:not(.viewsList__item-star) ws-icon.star { display: none } .viewsList__item:not(.viewsList__item-updated) ws-icon.upd { display: none } .viewsList__item-active:hover ws-icon.upd { display: none } .viewsList__item-updated:not(:hover) ws-btn { display: none } .viewsList__item-updated ws-btn { margin: 0 -2px; } .viewsList__item .in { padding: 0 4px; } .viewsList__item { position: relative; float: left; color: var(--base-txt-secondary); padding: 6px 4px 10px; margin: 0 2px 0 0; white-space: nowrap; height: 20px; /*-webkit-transition: box-shadow 0.3s ease;*/ /*transition: box-shadow 0.3s ease;*/ -webkit-transition: color 0.3s ease; transition: color 0.3s ease; cursor: pointer; max-width: 190px; } .viewsList__item:after { content: ''; opacity: 0; width: 100%; height: 2px; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; background: var(--base-txt-secondary); border-radius: 1px; position: absolute; left: 0; bottom: var(--screen-minus-px); } .headerGeneral-collapsed .viewsList__item { padding: 4px 8px 8px; } .viewsList .viewsList__item-more { display: none; } .viewsList__item-disabled { color: var(--base-txt-tertiary); } .viewsList__item:hover { color: var(--base-txt-max); /*box-shadow: 0 -2px var(--base-txt-secondary) inset;*/ } .viewsList__item:hover:after { opacity: 1; } .viewsList__item.menu_open { color: var(--base-txt-max); box-shadow: 0 -2px var(--base-txt-secondary) inset; } .viewsList__item.selected { /* box-shadow: 0 -2px var(--base-txt-act-major) inset !important; */ background: var(--base-hlt-g-hover); } .viewsList__item.viewsList__item-active, .viewsList__item.viewsList__item-active:hover { /* font-weight: 600; */ text-shadow: -0.03ex 0 0 currentColor, 0.03ex 0 0 currentColor; -webkit-text-stroke-width: 0.04ex; color: var(--base-txt-primary); /*box-shadow: 0 -2px var(--base-txt-alt-dark-major) inset;*/ } .viewsList__item.viewsList__item-active:after, .viewsList__item.viewsList__item-active:hover:after { opacity: 1; background: var(--base-txt-primary); } .viewsList__item .upd-control, .headerGeneral .headerGeneral__content .upd-control { display: none; } .viewsList__item.viewsList__item-updated .upd-control, .headerGeneral:has(.viewsList_hidden > .viewsList__item-updated) .headerGeneral__content .upd-control { display: inline-flex; align-content: center; align-items: center; justify-content: center; height: 20px; font-size: 11px; padding: 0 2px; border-radius: 5px; background: none; position: relative; transition: background-color 0.15s ease; transition-delay: 0.1s; } .headerGeneral:has(.viewsList_hidden > .viewsList__item-updated) .headerGeneral__content .upd-control { height: 24px; } .viewsList__item.viewsList__item-updated .upd-control .upd, .headerGeneral .headerGeneral__content .upd-control .upd { display: inline-flex; opacity: 1; transition: opacity 0.3s ease; transition-delay: 0.05s; } .viewsList__item.viewsList__item-updated .upd-control .upd.upd-hover, .headerGeneral .headerGeneral__content .upd-control .upd.upd-hover { opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition-delay: 0.05s; } .viewsList__item.viewsList__item-updated.viewsList__item-active:hover .upd-control, .headerGeneral .headerGeneral__content .name .in:hover > .upd-control { background: var(--colorize-lbl-green-bg); } .viewsList__item.viewsList__item-updated.viewsList__item-active .upd-control:hover .upd.upd-hover , .headerGeneral .headerGeneral__content .name .in:hover > .upd-control .upd.upd-hover { opacity: 1; } .viewsList__item.viewsList__item-plus .btn.btn-ghost svg { fill: var(--base-txt-tertiary); } .viewsList__item.viewsList__item-plus:hover .btn.btn-ghost svg { fill: var(--base-txt-accent); } .viewsList__item.viewsList__item-plus:hover .btn.btn-ghost { background: linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-1) 0%), linear-gradient(0, var(--trans) 0%, var(--btn-bg-color-0) 0%); } .viewsList__item input { height: 20px; width: 120px; box-sizing: border-box; font: 14px/20px var(--font-base); } .viewsList__item input:focus { box-shadow: var(--shadow-brd-focus); border-color: var(--inp-hlt-focus); } .headerGeneral { flex-shrink: 0; height: 86px; padding: 6px 0 0 8px; background: var(--base-cont-top); box-shadow: 0 -0.5px var(--base-line-tertiary) inset; } .headerGeneral-collapsed { height: 64px; padding: 0 0 0 8px; } .headerGeneral__center { overflow: hidden; } .headerGeneral__right { display: flex; flex-direction: column; align-items: flex-end; padding: 0 8px 0 32px; } .headerGeneral__right .users { height: 38px; padding: 0 4px; } @media screen and (max-width:480px) { .headerGeneral__right { padding-top: 3px; } .headerGeneral__right .users { display: none; } .headerGeneral { align-items: flex-start !important } .headerGeneral .viewsList { position: absolute; width: calc(100% - 24px); padding-right: 16px; overflow: hidden; overflow-x: auto; } .headerGeneral .viewsList::-webkit-scrollbar:horizontal { height: 0; } .headerGeneral .name .in { /* width: 65%; */ } } .headerGeneral__content { height: 48px; padding-left: 8px; } .headerGeneral-collapsed .headerGeneral__content { height: 32px; margin: 0; padding: 8px 0 0; box-sizing: border-box; } .headerGeneral-simple .headerGeneral__content { padding-top: 0; } .headerGeneral__content .project-name { display: inline-flex; border-radius: 6px; transition: background 0.3s ease; justify-content: flex-start; overflow: hidden; max-width: 100%; } .headerGeneral__content .project-name[onclick] { cursor: pointer; } .headerGeneral__content .project-name[onclick]:hover { background: var(--base-cont-trans-low); } .headerGeneral .viewsList_hidden { display: none; } .headerGeneral .name .in { font: var(--font-ui-22-title-1-semi); padding: 0 4px; } .headerGeneral-collapsed .name .in { font: var(--font-ui-16-title-3-semi); flex-shrink: 1; } .headerGeneral-collapsed .name .in .gray { color: var(--base-txt-tertiary) } .headerGeneral-collapsed .headerGeneral__center { padding-left: 52px; /* 36px + 8px * 2 */ position: relative; } .headerGeneral-simple .headerGeneral__center { padding-left: 44px; } .headerGeneral__content > .in { padding: 4px 0 0 0; } .headerGeneral-collapsed .headerGeneral__content > .in { display: flex; align-items: center; flex-direction: row-reverse; justify-content: flex-end; gap: 12px; } .headerGeneral-collapsed .headerGeneral__content > .in .tree { } .headerGeneral-collapsed .headerGeneral__content > .in .name { } .headerGeneral-collapsed .headerGeneral__content > .in .tree .topic > span { max-width: 20vw; } .headerGeneral-collapsed:not(:hover) .headerGeneral__content > .in .tree:has(.topic-empty:not(.modal_open)) { display: none; } @media (max-width: 900px) { .headerGeneral-collapsed .headerGeneral__content > .in .tree { display: none; } } .headerGeneral .name .space { width: 28px; text-align: center } .headerGeneral .tree { height: 16px; } .headerGeneral .tree project-tags ws-icon.tag, .headerGeneral .tree project-stage ws-icon.tag { width: 16px; height: 16px; --icon-size: 16px; } .headerGeneral .tree .tags { padding: 0 4px 0 4px; height: 16px; display: none; } .headerGeneral .tree .tags:has(span.tag) { display: block; } .headerGeneral .topic { display: flex; min-width: 0; flex-shrink: 1; box-sizing: border-box; padding: 0 4px; border-radius: 6px; cursor: pointer; font: var(--font-ui-11-micro-reg); color: var(--base-txt-secondary); } .headerGeneral .topic > span { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .headerGeneral .topic ws-icon { display: none; width: 16px; height: 16px; } .headerGeneral .topic svg { fill: var(--base-txt-secondary); } .headerGeneral .topic:hover { background: var(--base-cont-trans-low); } .headerGeneral .topic.topic-empty ws-icon { display: inline-flex; } .headerGeneral .logo { padding: 6px 8px 2px 0; } .headerGeneral-collapsed .logo { position: absolute; left: 0; top: 0; padding: 14px 8px 14px; } .headerGeneral .logo .proj_color { width: 40px; height: 40px; display: flex; align-content: center; align-items: center; justify-content: center; border-radius: 8px; /*box-shadow: 0 0 0 20px var(--white-tertiary) inset;*/ } .headerGeneral-collapsed .logo .proj_color { width: 36px; height: 36px; } .headerGeneral .logo ws-icon { width: 32px; height: 32px; --icon-size: 32px; } .headerGeneral .logo-symbol { box-shadow: var(--shadow-cont-major-lineonly-inside); border-radius: 4px; padding: 8px 4px; margin: 8px 4px; } .headerGeneral .logo-symbol ws-icon { --icon-size: 16px; width: 24px; height: 32px; } .headerGeneral__search { display: flex; flex-direction: row; gap: 12px; height: 32px; width: 135px; } .headerGeneral__search .in { display: flex; background: var(--base-cont-top); padding: 0 6px; box-shadow: var(--shadow-brd-enable); border-radius: 16px; height: 32px; } .headerGeneral__search .in:focus-within { box-shadow: var(--shadow-brd-focus); } .headerGeneral__search .in:not(.search_started) a.delete { display: none } .headerGeneral__search .in svg { } .headerGeneral__search .in a.delete:hover { background: var(--base-cont-trans-low); border-radius: 12px; padding: 1px } .headerGeneral__search input { border: none; background: transparent; box-sizing: border-box; padding: 0 6px; height: 20px; width: 100%; font: 14px/20px var(--font-sidebar); } .headerGeneral__search input::placeholder { opacity: 1; font: 13px/20px var(--font-sidebar); } .headerGeneral__search input::-webkit-input-placeholder { opacity: 1; font: 13px/20px var(--font-sidebar); } .headerGeneral__buttons { height: 48px; gap: 6px; padding: 0 4px; } .headerGeneral__buttons { --icon-color: var(--base-txt-tertiary); } .headerGeneral__button { --icon-color: var(--base-txt-tertiary); display: flex; align-items: center; box-shadow: var(--shadow-brd-enable); border-radius: 20px; box-sizing: border-box; height: 32px; justify-content: center; padding: 0 4px; min-width: 32px; } .headerGeneral__button:is(:hover, .selected) { box-shadow: var(--shadow-brd-enable-hover); } .headerGeneral__button ws-icon { height: 24px; min-width: 23px; } .headerGeneral__button .cnt, .headerGeneral__button > .in { font: var(--font-ui-11-micro-reg); color: var(--base-txt-secondary); margin: 0; padding: 0 4px 0 0; background: unset; min-width: 12px; text-align: center; } .headerGeneral__button-activity.activity__hot, .headerGeneral__button-activity.activity__today { --icon-color: var(--base-btn-notice-minor); } .headerGeneral__button-activity.activity__hot { --icon-color: var(--base-btn-notice-major); } .headerGeneral__button-activity.activity__warm, .headerGeneral__button-activity.activity__yesterday { --icon-color: var(--lbl-yesterday-major); } .headerGeneral__button-activity.activity__hot ws-icon, .headerGeneral__button-activity.activity__today ws-icon { background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--lbl-today-major) 15%, transparent) 32%, rgba(0, 255, 0, 0) 100%); } .headerGeneral__button-activity.activity__yesterday ws-icon { background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--lbl-yesterday-major) 15%, transparent) 32%, rgba(0, 255, 0, 0) 100%); } @media screen and (min-width: 481px) { .headerGeneral__button.headerGeneral__button-chat:has(task-unseen .has_mention) { background: var(--base-txt-btn-w); --icon-color: var(--white-accent); } .headerGeneral__button.headerGeneral__button-chat > ws-icon svg use:last-child, .headerGeneral__button.headerGeneral__button-chat:has(task-unseen .has_mention) > ws-icon svg use:first-child { display: none; } .headerGeneral__button.headerGeneral__button-chat:has(task-unseen .has_mention) > ws-icon svg use:last-child { display: block; } .headerGeneral__button.headerGeneral__button-chat:has(task-unseen .has_mention) task-unseen .has_mention { color: var(--white-accent) !important; } } #dashboard-widgets.headerGeneral__button { --icon-color: var(--base-txt-tertiary); } .headerGeneral-collapsed .headerGeneral__button { height: 28px; } .headerGeneral__buttons .but { width: 28px; height: 28px; text-align: center; box-shadow: var(--shadow-brd-enable); border-radius: 16px; display: flex; justify-content: center; align-items: center; align-content: center; margin: 2px; position: relative; } .headerGeneral__buttons .but_expand, .headerGeneral__buttons .but_widget { width: 32px; height: 32px; display: flex; justify-content: center; align-items: center; } .headerGeneral__buttons .but_expand:hover, .headerGeneral__buttons .but_widget:hover { border-radius: 16px; background: var(--base-hlt-g-hover); } .headerGeneral__buttons .space { } .headerGeneral__buttons .but_search { width: 44px; } .headerGeneral:not(.headerGeneral-collapsed) .headerGeneral__buttons .but_search { display: none; } .headerGeneral-withSearch .headerGeneral__buttons .but_search { display: none; } .headerGeneral-collapsed:not(.headerGeneral-withSearch) .headerGeneral__search { display: none; } .headerGeneral__buttons .but_plus { background: var(--gradient-btn-primary); box-shadow: none } .headerGeneral__buttons .but_plus svg { fill: var(--white-primary) } .headerGeneral:not(.headerGeneral-collapsed) .headerGeneral__buttons .but_expand use:last-child { display: none } .headerGeneral-collapsed .headerGeneral__buttons .but_expand use:first-child { display: none } .headerGeneral-collapsed .headerGeneral__buttons .but_expand, .headerGeneral-collapsed .headerGeneral__buttons .but_widget { width: 28px; height: 28px; } .headerGeneral-collapsed .users { display: none } .headerGeneral-collapsed .headerGeneral__center { flex-direction: column; flex-wrap: nowrap; display: flex; /* align-items: flex-end; */ /* overflow: hidden; */ height: 64px; justify-content: center; } .headerGeneral-collapsed:not(.headerGeneral-task) .headerGeneral__content .name { } .headerGeneral-collapsed:not(.headerGeneral-task) .headerGeneral__content .name .av_nm { transform:scale(0.75); margin:-6px 6px -6px -6px; border-radius:12px } .headerGeneral-collapsed .viewsList { flex-shrink: 1; flex-grow: 1; overflow: hidden; height: 32px; padding-left: 0; } .headerGeneral-collapsed .viewsList > .viewsList__item. hidden { display: none; } .headerGeneral__content .space { width: 32px; height: 32px; display: flex; justify-content: center; align-items: center; } .headerGeneral__content .space ws-icon, .headerGeneral__content .space svg { width: 20px; height: 20px; } .headerGeneral__content .space .priorb { font: 18px/20px var(--font-base); padding: 2px; margin: 0; } .headerGeneral .componentTeamAvatars .av_sm { margin: 0; } .taskView-chat .componentTeamAvatars .cnt_over, .headerGeneral .componentTeamAvatars .cnt_over { inset: unset; top: 0; right: 0; font-size: 0; border-radius: 50%; width: 4px; height: 4px; min-width: unset; box-sizing: border-box; box-shadow: 0 0 0 2px var(--base-cont-mid); background-color: var(--base-txt-alert-major); } .headerGeneral .project-name .in { padding: 0 0 0 4px; } .headerGeneral-collapsed .project-name .in { padding: 0 4px; } .headerGeneral .project-name .space { width: 28px; height: 28px; } .headerGeneral-collapsed .project-name .space { display: none; width: 24px; height: 24px; } .headerGeneral .logo-symbol { display: none; } .headerGeneral-simple .headerGeneral__center { padding-left: 8px; } .headerGeneral__content.flex_row:has(+ .viewsList) { align-items: end; } .viewsList__menu-footer { font: var(--font-ui-12-mini-reg); color: var(--base-txt-secondary); text-wrap-style: balance; text-align: center; } .viewsList-recalc { /* visibility: hidden; */ } .menu__item-view:not(.menu__item-view-updated) ws-icon.upd { display: none } .viewsList__star { } .viewsList__item.viewsList__item-updated .viewsList__star { display: none; } .menu__item-view span.space-star { width: 12px; } .menu__item-view span.space-star ws-icon { --icon-size:12px; } .menu__item-view.menu__item-view-updated .space-star { display: none; } @media screen and (max-width: 480px) { .headerGeneral { padding: 0; height: var(--mobile-head-height); background: var(--mobile-head-bg-color); box-shadow: var(--hairline-bottom); z-index: 1; &:has(.viewsList:not(.viewsList_hidden)) { height: calc(var(--mobile-head-height) + 38px); } &:has(.viewsList_hidden > .viewsList__item-updated) .mobile-head__dropdown ws-icon[name="arrows/chevron-down"] { display: none; } .headerGeneral__center { padding-left: 0; } .but_widget { display: none; /* Lush: Кнопку прибираємо. Як на десктопі налаштував так буде і на мобілі */ } .primaryMenuButton__wrapper.space.space { margin: 0; width: 44px; height: 44px; padding-left: 4px; .btn { width: 36px; height: 36px; padding: 0; ws-icon { --icon-size: var(--mobile-head-left-icon-size); width: var(--mobile-head-left-icon-size); height: var(--mobile-head-left-icon-size); svg { fill: var(--mobile-head-left-icon-color); } } } } .logo { padding: 0; height: 44px; width: 44px; display: flex; align-items: center; justify-content: center; .proj_color { width: 36px; height: 36px; } } .topic { font: var(--font-ui-10-nano-reg); } .project-name .space { width: 20px; height: 20px; } .name { box-sizing: border-box; padding-right: 4px; gap: 2px; .in { padding-left: 2px; font: var(--font-ui-16-title-3-bold); } } .viewsList { left: 0; margin: 0; width: 100%; box-sizing: border-box; } } .headerGeneral__content { height: var(--mobile-head-height); padding: 0; &> .in { padding: 0; } } .headerGeneral__right { padding: 0 4px 0 8px; } .headerGeneral__buttons { height: 44px; padding: 0; gap: 0; } .headerGeneral__button { width: 44px; height: 44px; flex-direction: column; justify-content: center; box-shadow: unset; border-radius: 50%; padding: 0; &:is(:hover, .selected) { box-shadow: unset; } &> ws-icon { width: 24px; height: 24px; margin-bottom: -4px; } .cnt { padding: 0; font: var(--font-ui-10-nano-reg); } } .headerGeneral__button-chat { &:not(.headerGeneral__button-chatMuted):has(task-unseen .cnt_new) > ws-icon { --icon-color: var(--base-txt-btn-a); background: radial-gradient(56.25% 56.25% at 50% 50%, var(--base-hlt-hover) 32%, rgba(255, 255, 255, 0.00) 100%); } &:has(task-unseen .has_mention) > ws-icon { --icon-color: var(--base-txt-btn-w); background: radial-gradient(56.25% 56.25% at 50% 50%, var(--base-hlt-w-hover) 32%, rgba(255, 255, 255, 0.00) 100%); } .has_mention { display: flex; ws-icon { --icon-color: var(--base-txt-btn-flip); --icon-size: 10px; min-width: unset; width: 14px; height: 14px; border-radius: 8px; box-shadow: 0 0 0 1px var(--base-cont-top); background: var(--base-txt-btn-w); z-index: 1; } .space-ava { margin-left: -4px; width: 14px; height: 14px; .av_sm { transform: scale(0.583333); /* 24px -> 14px */ transform-origin: top left; } } } } .headerGeneral-simple { .logo { display: none; } .headerGeneral__right { padding-left: 0; } .headerGeneral__center { padding: 0; } .headerGeneral__content > .in { display: flex; } .name { padding: 0 4px; border-radius: 6px; &[onclick] { cursor: pointer; } &.menu_open { background: var(--base-cont-trans-low); } .in { font: var(--font-ui-18-title-2-bold); padding: 0; } } } } @media (min-width: 481px) { .noteBook__wrapper { position: fixed; bottom: -100%; right: 20px; z-index: 1020; background: var(--base-cont-mod-low); width: 496px; max-height: 100%; box-shadow: var(--shadow-tray-major); border-radius: 12px 12px 0 0; transition: all 0.3s ease; } .noteBook__wrapper.top-layer { z-index: 1021; } .noteBook__wrapper-active { bottom: 0 } } .noteBook { min-height: 352px; } .noteBook__head { padding: 6px; height: 44px; box-sizing: border-box; } .noteBook__head ws-btn, .noteBook__head > ws-icon { padding: 2px; } .noteBook__head .space, .noteBook__head ws-icon { width: 28px; height: 28px; display: flex; justify-content: center; align-items: center; border-radius: 4px; fill: var(--base-txt-primary); font: 14px/20px var(--font-base); font-weight: 400; } .noteBook__head .space ~ .space { margin-left:4px; } .noteBook__head .space ws-icon svg { width: 16px; height: 16px; } .noteBook__head .minimize { /*cursor: zoom-out;*/ } .noteBook__head .space:hover { background: var(--colors-alpha-dark-05); } .noteBook__head .space:hover:active { background: var(--colors-alpha-dark-10); } .noteBook__head > .in { padding: 2px; font: var(--font-ui-16-title-3-semi); color: var(--base-txt-primary); /* color: var(--colors-graphite-700); */ } .noteBook__head .loader_sm { display: none; border: 1px solid var(--colors-graphite-700); border-left-color: transparent; width: 12px; height: 12px } .noteBook.loading .noteBook__head .loader_sm { display: block; } .noteBook.loading .noteBook__head .space > ws-icon { display: none; } .noteBook__content { padding: 12px 24px; border-top: 0.5px solid var(--base-line-tertiary); min-height: 286px; max-height: 50vh; color: var(--base-txt-primary); box-sizing: border-box; } .noteBook__content .editor__data { min-height: 286px; font: 13px/20px var(--font-base); padding: 12px 0; cursor: text; } .noteBook__content .editor__data:focus { outline: none; } .noteBook__content .editor__data:empty:before { content: attr(data-placeholder); color: var(--base-txt-tertiary) } .noteBook__content__editor { /*padding: 4px 0;*/ } .noteBook__content__editor textarea { width: 100%; height:400px; color:inherit; background: transparent; border: none; padding: 0; overflow: hidden; min-height:20px; resize: none; font: 12px / 20px var(--font-mono); } .noteBook__content__editor textarea::placeholder { font: inherit; color:inherit; opacity: 0.7; white-space: pre-wrap; } @media (max-width: 480px) { .noteBook__wrapper { display: none; } body.mobileNoteBook .noteBook__wrapper { --layer: 0; --zIndex: 1032; z-index: calc(var(--zIndex) + var(--layer)); position: fixed; inset: 0; display: block; background: var(--base-cont-top); padding-bottom: var(--sa-bot); } .noteBook { height: 100%; } .noteBook__content { max-height: unset; min-height: unset; border-top: unset; } .noteBook .mobile-head .loader { display: none; margin: 0; width: 20px; height: 20px; box-sizing: border-box; } .noteBook.loading .mobile-head .loader { display: block; } }/* * Container style */ .ps { overflow: scroll !important; overflow-anchor: none; -ms-overflow-style: none; touch-action: auto; -ms-touch-action: auto; position: relative; -webkit-overflow-scrolling: touch; overscroll-behavior: none; scrollbar-width: none; /* це ламало позиціонування підменю menu__submenuWrapper в scrollZone */ /* contain: layout paint; */ } .ps::-webkit-scrollbar { display: none } /* * Scrollbar rail styles */ .ps__rail-x { display: none; opacity: 0; transition: background-color .2s linear, opacity .2s linear; -webkit-transition: background-color .2s linear, opacity .2s linear; height: 10px; /* there must be 'bottom' or 'top' for ps__rail-x */ bottom: 0px; /* please don't change 'position' */ position: absolute; /* margin-bottom: -100vh; */ z-index: 1000; } .ps__rail-y { display: none; opacity: 0; transition: background-color .2s linear, opacity .2s linear; -webkit-transition: background-color .2s linear, opacity .2s linear; width: 10px; /* there must be 'right' or 'left' for ps__rail-y */ right: 0; /* please don't change 'position' */ position: absolute; z-index: 1000; transform:translateY(-1px); } @media (max-width: 480px) { .ps__rail-x, .ps__rail-y { pointer-events: none; } } #content .ps__rail-y, #content .ps__rail-x { opacity: 1 } body.animateSidebar #content .ps__rail-y, body.animateSidebar #content .ps__rail-x { opacity: 0 } /*.menu .ps__rail-y {*/ /* margin: 4px 0;*/ /*}*/ /*.modal .ps__rail-y {*/ /* margin: 4px 0;*/ /*}*/ .menu { --scrollbar-margin: 4; } .modal { --scrollbar-margin: 10; } .menu .ps .ps__rail-y:hover, .menu .ps .ps__rail-y:focus, .menu .ps .ps__rail-y.ps--clicking { box-shadow:none; background: none; } .ps--active-x > .ps__rail-x, .ps--active-y > .ps__rail-y { display: block; background-color: transparent; } .ps--active-x ~ .ps__rail-x, .ps--active-y ~ .ps__rail-y { display: block; background-color: transparent; } .ps.ps-hover:hover > .ps__rail-x, .ps.ps-hover:hover > .ps__rail-y, .ps--focus > .ps__rail-x, .ps--focus > .ps__rail-y, .ps--scrolling-x > .ps__rail-x, .ps--scrolling-y > .ps__rail-y { opacity: 1; } .ps.ps-hover:hover ~ .ps__rail-x, .ps.ps-hover:hover ~ .ps__rail-y, .ps--focus ~ .ps__rail-x, .ps--focus ~ .ps__rail-y, .ps--scrolling-x ~ .ps__rail-x, .ps--scrolling-y ~ .ps__rail-y { opacity: 1; } .ps__rail-y:hover, .ps__rail-y:focus, .ps__rail-y.ps--clicking { box-shadow:-1px 0 var(--scroll-minor); background-color: var(--scroll-easy); opacity: 1; } .ps__rail-x:hover, .ps__rail-x:focus, .ps__rail-x.ps--clicking { box-shadow:0 -1px var(--scroll-minor); background-color: var(--scroll-easy); opacity: 1; } /* * Scrollbar thumb styles */ .ps__thumb-x { background-color: var(--scroll-minor); border-radius: 6px; transition: background-color .2s linear, height .2s ease-in-out; -webkit-transition: background-color .2s linear, height .2s ease-in-out; height: 6px; /* there must be 'bottom' for ps__thumb-x */ bottom: 2px; /* please don't change 'position' */ position: absolute; } .ps__thumb-y { background-color: var(--scroll-minor); border-radius: 6px; transition: background-color .2s linear, width .2s ease-in-out; -webkit-transition: background-color .2s linear, width .2s ease-in-out; width: 6px; /* there must be 'right' for ps__thumb-y */ right: 2px; /* please don't change 'position' */ position: absolute; } .ps .ps__rail-x:hover > .ps__thumb-x, .ps__rail-x:focus > .ps__thumb-x, .ps__rail-x.ps--clicking .ps__thumb-x { background-color: var(--scroll-minor); height: 6px; } .ps .ps__rail-y:hover > .ps__thumb-y, .ps__rail-y:focus > .ps__thumb-y, .ps__rail-y.ps--clicking .ps__thumb-y { background-color: var(--scroll-major); width: 6px; } /* MS supports */ @supports (-ms-overflow-style: none) { .ps { overflow: auto !important; } } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .ps { overflow: auto !important; } } .iti:not(.menu__group__wrapper) { width: 100%; position: relative; display: inline-block; } /* .iti label { left: 15px; } */ .iti:not(.menu__group__wrapper) * { box-sizing: border-box; -moz-box-sizing: border-box; } .iti__hide { display: none; } .iti__v-hide { visibility: hidden; } .iti input, .iti input[type=text], .iti input[type=tel] { position: relative; z-index: 0; width: 100%; height: 100%; margin-top: 0 !important; margin-bottom: 0 !important; padding-right: 36px; margin-right: 0; } .iti__flag-container { position: absolute; top: 0; bottom: 0; right: 0; padding: 1px; } .iti__selected-flag { transition: 0.2s all ease; -webkit-transition: 0.2s all ease; z-index: 1; position: relative; display: flex; align-items: center; height: 100%; padding: 0 6px 0 15px; } .iti__selected-flag.active { padding-top: 15px; } .iti__arrow { margin-left: 6px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 4px solid #555; } .iti__arrow--up { border-top: none; border-bottom: 4px solid #555; } .iti:not(.menu__group__wrapper) .iti__country-list { position: absolute; z-index: 2; list-style: none; text-align: left; padding: 0; margin: 4px 0 0 -1px; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2); background: var(--base-cont-mod-top); border: 1px solid var(--base-line-secondary); white-space: nowrap; max-height: 200px; max-width: 360px; overflow-y: scroll; overflow-x: hidden; -webkit-overflow-scrolling: touch; } .iti__country-list--dropup { bottom: 100%; margin-bottom: -1px; } @media (max-width: 500px) { .iti__country-list { white-space: normal; } } .iti__flag-box { display: inline-block; width: 20px; } .iti__divider { padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid var(--base-line-secondary); } .iti:not(.menu__group__wrapper) .iti__country { padding: 5px 10px; outline: none; } .iti__country:before { content: none; } .iti__dial-code { color: #999; } .iti:not(.menu__group__wrapper) .iti__country.iti__highlight { background-color: rgba(0, 0, 0, 0.05); } .iti__flag-box, .iti__country-name, .iti__dial-code { vertical-align: middle; } .iti__flag-box, .iti__country-name { margin-right: 6px; } .form_new2 p .iti--allow-dropdown input, .iti--allow-dropdown input, .iti--allow-dropdown input[type=text], .iti--allow-dropdown input[type=tel], .iti--separate-dial-code input, .iti--separate-dial-code input[type=text], .iti--separate-dial-code input[type=tel] { padding: 0 6px 0 59px; margin-left: 0; } .iti--allow-dropdown .iti__flag-container, .iti--separate-dial-code .iti__flag-container { right: auto; left: 0; } .iti--allow-dropdown .iti__flag-container:hover { cursor: pointer; } .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag { /*background-color: rgba(0, 0, 0, 0.05); */} .iti--allow-dropdown input[disabled] + .iti__flag-container:hover, .iti--allow-dropdown input[readonly] + .iti__flag-container:hover { cursor: default; } .iti--allow-dropdown input[disabled] + .iti__flag-container:hover .iti__selected-flag, .iti--allow-dropdown input[readonly] + .iti__flag-container:hover .iti__selected-flag { background-color: transparent; } .iti--separate-dial-code .iti__selected-flag:hover { background-color: rgba(0, 0, 0, 0.05); } .iti--separate-dial-code .iti__selected-flag { /*background-color: rgba(0, 0, 0, 0.05); */} .iti--separate-dial-code .iti__selected-dial-code { margin-left: 6px; } .iti--container:not(.menu__group__wrapper) { position: absolute; top: -1000px; left: -1000px; z-index: 1060; padding: 1px; } .iti--container:hover { cursor: pointer; } .iti-mobile .iti--container:not(.menu__group__wrapper) { top: 30px; bottom: 30px; left: 30px; right: 30px; position: fixed; } .iti-mobile .iti__country-list { max-height: 100%; width: 100%; } .iti-mobile .iti__country { padding: 10px 10px; line-height: 1.5em; } .iti__flag { width: 20px; } .iti__flag.iti__be { width: 18px; } .iti__flag.iti__ch { width: 15px; } .iti__flag.iti__mc { width: 19px; } .iti__flag.iti__ne { width: 18px; } .iti__flag.iti__np { width: 13px; } .iti__flag.iti__va { width: 15px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .iti__flag { background-size: 5652px 15px; } } .iti__flag.iti__ac { height: 10px; background-position: 0px 0px; } .iti__flag.iti__ad { height: 14px; background-position: -22px 0px; } .iti__flag.iti__ae { height: 10px; background-position: -44px 0px; } .iti__flag.iti__af { height: 14px; background-position: -66px 0px; } .iti__flag.iti__ag { height: 14px; background-position: -88px 0px; } .iti__flag.iti__ai { height: 10px; background-position: -110px 0px; } .iti__flag.iti__al { height: 15px; background-position: -132px 0px; } .iti__flag.iti__am { height: 10px; background-position: -154px 0px; } .iti__flag.iti__ao { height: 14px; background-position: -176px 0px; } .iti__flag.iti__aq { height: 14px; background-position: -198px 0px; } .iti__flag.iti__ar { height: 13px; background-position: -220px 0px; } .iti__flag.iti__as { height: 10px; background-position: -242px 0px; } .iti__flag.iti__at { height: 14px; background-position: -264px 0px; } .iti__flag.iti__au { height: 10px; background-position: -286px 0px; } .iti__flag.iti__aw { height: 14px; background-position: -308px 0px; } .iti__flag.iti__ax { height: 13px; background-position: -330px 0px; } .iti__flag.iti__az { height: 10px; background-position: -352px 0px; } .iti__flag.iti__ba { height: 10px; background-position: -374px 0px; } .iti__flag.iti__bb { height: 14px; background-position: -396px 0px; } .iti__flag.iti__bd { height: 12px; background-position: -418px 0px; } .iti__flag.iti__be { height: 15px; background-position: -440px 0px; } .iti__flag.iti__bf { height: 14px; background-position: -460px 0px; } .iti__flag.iti__bg { height: 12px; background-position: -482px 0px; } .iti__flag.iti__bh { height: 12px; background-position: -504px 0px; } .iti__flag.iti__bi { height: 12px; background-position: -526px 0px; } .iti__flag.iti__bj { height: 14px; background-position: -548px 0px; } .iti__flag.iti__bl { height: 14px; background-position: -570px 0px; } .iti__flag.iti__bm { height: 10px; background-position: -592px 0px; } .iti__flag.iti__bn { height: 10px; background-position: -614px 0px; } .iti__flag.iti__bo { height: 14px; background-position: -636px 0px; } .iti__flag.iti__bq { height: 14px; background-position: -658px 0px; } .iti__flag.iti__br { height: 14px; background-position: -680px 0px; } .iti__flag.iti__bs { height: 10px; background-position: -702px 0px; } .iti__flag.iti__bt { height: 14px; background-position: -724px 0px; } .iti__flag.iti__bv { height: 15px; background-position: -746px 0px; } .iti__flag.iti__bw { height: 14px; background-position: -768px 0px; } .iti__flag.iti__by { height: 10px; background-position: -790px 0px; } .iti__flag.iti__bz { height: 14px; background-position: -812px 0px; } .iti__flag.iti__ca { height: 10px; background-position: -834px 0px; } .iti__flag.iti__cc { height: 10px; background-position: -856px 0px; } .iti__flag.iti__cd { height: 15px; background-position: -878px 0px; } .iti__flag.iti__cf { height: 14px; background-position: -900px 0px; } .iti__flag.iti__cg { height: 14px; background-position: -922px 0px; } .iti__flag.iti__ch { height: 15px; background-position: -944px 0px; } .iti__flag.iti__ci { height: 14px; background-position: -961px 0px; } .iti__flag.iti__ck { height: 10px; background-position: -983px 0px; } .iti__flag.iti__cl { height: 14px; background-position: -1005px 0px; } .iti__flag.iti__cm { height: 14px; background-position: -1027px 0px; } .iti__flag.iti__cn { height: 14px; background-position: -1049px 0px; } .iti__flag.iti__co { height: 14px; background-position: -1071px 0px; } .iti__flag.iti__cp { height: 14px; background-position: -1093px 0px; } .iti__flag.iti__cr { height: 12px; background-position: -1115px 0px; } .iti__flag.iti__cu { height: 10px; background-position: -1137px 0px; } .iti__flag.iti__cv { height: 12px; background-position: -1159px 0px; } .iti__flag.iti__cw { height: 14px; background-position: -1181px 0px; } .iti__flag.iti__cx { height: 10px; background-position: -1203px 0px; } .iti__flag.iti__cy { height: 14px; background-position: -1225px 0px; } .iti__flag.iti__cz { height: 14px; background-position: -1247px 0px; } .iti__flag.iti__de { height: 12px; background-position: -1269px 0px; } .iti__flag.iti__dg { height: 10px; background-position: -1291px 0px; } .iti__flag.iti__dj { height: 14px; background-position: -1313px 0px; } .iti__flag.iti__dk { height: 15px; background-position: -1335px 0px; } .iti__flag.iti__dm { height: 10px; background-position: -1357px 0px; } .iti__flag.iti__do { height: 14px; background-position: -1379px 0px; } .iti__flag.iti__dz { height: 14px; background-position: -1401px 0px; } .iti__flag.iti__ea { height: 14px; background-position: -1423px 0px; } .iti__flag.iti__ec { height: 14px; background-position: -1445px 0px; } .iti__flag.iti__ee { height: 13px; background-position: -1467px 0px; } .iti__flag.iti__eg { height: 14px; background-position: -1489px 0px; } .iti__flag.iti__eh { height: 10px; background-position: -1511px 0px; } .iti__flag.iti__er { height: 10px; background-position: -1533px 0px; } .iti__flag.iti__es { height: 14px; background-position: -1555px 0px; } .iti__flag.iti__et { height: 10px; background-position: -1577px 0px; } .iti__flag.iti__eu { height: 14px; background-position: -1599px 0px; } .iti__flag.iti__fi { height: 12px; background-position: -1621px 0px; } .iti__flag.iti__fj { height: 10px; background-position: -1643px 0px; } .iti__flag.iti__fk { height: 10px; background-position: -1665px 0px; } .iti__flag.iti__fm { height: 11px; background-position: -1687px 0px; } .iti__flag.iti__fo { height: 15px; background-position: -1709px 0px; } .iti__flag.iti__fr { height: 14px; background-position: -1731px 0px; } .iti__flag.iti__ga { height: 15px; background-position: -1753px 0px; } .iti__flag.iti__gb { height: 10px; background-position: -1775px 0px; } .iti__flag.iti__gd { height: 12px; background-position: -1797px 0px; } .iti__flag.iti__ge { height: 14px; background-position: -1819px 0px; } .iti__flag.iti__gf { height: 14px; background-position: -1841px 0px; } .iti__flag.iti__gg { height: 14px; background-position: -1863px 0px; } .iti__flag.iti__gh { height: 14px; background-position: -1885px 0px; } .iti__flag.iti__gi { height: 10px; background-position: -1907px 0px; } .iti__flag.iti__gl { height: 14px; background-position: -1929px 0px; } .iti__flag.iti__gm { height: 14px; background-position: -1951px 0px; } .iti__flag.iti__gn { height: 14px; background-position: -1973px 0px; } .iti__flag.iti__gp { height: 14px; background-position: -1995px 0px; } .iti__flag.iti__gq { height: 14px; background-position: -2017px 0px; } .iti__flag.iti__gr { height: 14px; background-position: -2039px 0px; } .iti__flag.iti__gs { height: 10px; background-position: -2061px 0px; } .iti__flag.iti__gt { height: 13px; background-position: -2083px 0px; } .iti__flag.iti__gu { height: 11px; background-position: -2105px 0px; } .iti__flag.iti__gw { height: 10px; background-position: -2127px 0px; } .iti__flag.iti__gy { height: 12px; background-position: -2149px 0px; } .iti__flag.iti__hk { height: 14px; background-position: -2171px 0px; } .iti__flag.iti__hm { height: 10px; background-position: -2193px 0px; } .iti__flag.iti__hn { height: 10px; background-position: -2215px 0px; } .iti__flag.iti__hr { height: 10px; background-position: -2237px 0px; } .iti__flag.iti__ht { height: 12px; background-position: -2259px 0px; } .iti__flag.iti__hu { height: 10px; background-position: -2281px 0px; } .iti__flag.iti__ic { height: 14px; background-position: -2303px 0px; } .iti__flag.iti__id { height: 14px; background-position: -2325px 0px; } .iti__flag.iti__ie { height: 10px; background-position: -2347px 0px; } .iti__flag.iti__il { height: 15px; background-position: -2369px 0px; } .iti__flag.iti__im { height: 10px; background-position: -2391px 0px; } .iti__flag.iti__in { height: 14px; background-position: -2413px 0px; } .iti__flag.iti__io { height: 10px; background-position: -2435px 0px; } .iti__flag.iti__iq { height: 14px; background-position: -2457px 0px; } .iti__flag.iti__ir { height: 12px; background-position: -2479px 0px; } .iti__flag.iti__is { height: 15px; background-position: -2501px 0px; } .iti__flag.iti__it { height: 14px; background-position: -2523px 0px; } .iti__flag.iti__je { height: 12px; background-position: -2545px 0px; } .iti__flag.iti__jm { height: 10px; background-position: -2567px 0px; } .iti__flag.iti__jo { height: 10px; background-position: -2589px 0px; } .iti__flag.iti__jp { height: 14px; background-position: -2611px 0px; } .iti__flag.iti__ke { height: 14px; background-position: -2633px 0px; } .iti__flag.iti__kg { height: 12px; background-position: -2655px 0px; } .iti__flag.iti__kh { height: 13px; background-position: -2677px 0px; } .iti__flag.iti__ki { height: 10px; background-position: -2699px 0px; } .iti__flag.iti__km { height: 12px; background-position: -2721px 0px; } .iti__flag.iti__kn { height: 14px; background-position: -2743px 0px; } .iti__flag.iti__kp { height: 10px; background-position: -2765px 0px; } .iti__flag.iti__kr { height: 14px; background-position: -2787px 0px; } .iti__flag.iti__kw { height: 10px; background-position: -2809px 0px; } .iti__flag.iti__ky { height: 10px; background-position: -2831px 0px; } .iti__flag.iti__kz { height: 10px; background-position: -2853px 0px; } .iti__flag.iti__la { height: 14px; background-position: -2875px 0px; } .iti__flag.iti__lb { height: 14px; background-position: -2897px 0px; } .iti__flag.iti__lc { height: 10px; background-position: -2919px 0px; } .iti__flag.iti__li { height: 12px; background-position: -2941px 0px; } .iti__flag.iti__lk { height: 10px; background-position: -2963px 0px; } .iti__flag.iti__lr { height: 11px; background-position: -2985px 0px; } .iti__flag.iti__ls { height: 14px; background-position: -3007px 0px; } .iti__flag.iti__lt { height: 12px; background-position: -3029px 0px; } .iti__flag.iti__lu { height: 12px; background-position: -3051px 0px; } .iti__flag.iti__lv { height: 10px; background-position: -3073px 0px; } .iti__flag.iti__ly { height: 10px; background-position: -3095px 0px; } .iti__flag.iti__ma { height: 14px; background-position: -3117px 0px; } .iti__flag.iti__mc { height: 15px; background-position: -3139px 0px; } .iti__flag.iti__md { height: 10px; background-position: -3160px 0px; } .iti__flag.iti__me { height: 10px; background-position: -3182px 0px; } .iti__flag.iti__mf { height: 14px; background-position: -3204px 0px; } .iti__flag.iti__mg { height: 14px; background-position: -3226px 0px; } .iti__flag.iti__mh { height: 11px; background-position: -3248px 0px; } .iti__flag.iti__mk { height: 10px; background-position: -3270px 0px; } .iti__flag.iti__ml { height: 14px; background-position: -3292px 0px; } .iti__flag.iti__mm { height: 14px; background-position: -3314px 0px; } .iti__flag.iti__mn { height: 10px; background-position: -3336px 0px; } .iti__flag.iti__mo { height: 14px; background-position: -3358px 0px; } .iti__flag.iti__mp { height: 10px; background-position: -3380px 0px; } .iti__flag.iti__mq { height: 14px; background-position: -3402px 0px; } .iti__flag.iti__mr { height: 14px; background-position: -3424px 0px; } .iti__flag.iti__ms { height: 10px; background-position: -3446px 0px; } .iti__flag.iti__mt { height: 14px; background-position: -3468px 0px; } .iti__flag.iti__mu { height: 14px; background-position: -3490px 0px; } .iti__flag.iti__mv { height: 14px; background-position: -3512px 0px; } .iti__flag.iti__mw { height: 14px; background-position: -3534px 0px; } .iti__flag.iti__mx { height: 12px; background-position: -3556px 0px; } .iti__flag.iti__my { height: 10px; background-position: -3578px 0px; } .iti__flag.iti__mz { height: 14px; background-position: -3600px 0px; } .iti__flag.iti__na { height: 14px; background-position: -3622px 0px; } .iti__flag.iti__nc { height: 10px; background-position: -3644px 0px; } .iti__flag.iti__ne { height: 15px; background-position: -3666px 0px; } .iti__flag.iti__nf { height: 10px; background-position: -3686px 0px; } .iti__flag.iti__ng { height: 10px; background-position: -3708px 0px; } .iti__flag.iti__ni { height: 12px; background-position: -3730px 0px; } .iti__flag.iti__nl { height: 14px; background-position: -3752px 0px; } .iti__flag.iti__no { height: 15px; background-position: -3774px 0px; } .iti__flag.iti__np { height: 15px; background-position: -3796px 0px; } .iti__flag.iti__nr { height: 10px; background-position: -3811px 0px; } .iti__flag.iti__nu { height: 10px; background-position: -3833px 0px; } .iti__flag.iti__nz { height: 10px; background-position: -3855px 0px; } .iti__flag.iti__om { height: 10px; background-position: -3877px 0px; } .iti__flag.iti__pa { height: 14px; background-position: -3899px 0px; } .iti__flag.iti__pe { height: 14px; background-position: -3921px 0px; } .iti__flag.iti__pf { height: 14px; background-position: -3943px 0px; } .iti__flag.iti__pg { height: 15px; background-position: -3965px 0px; } .iti__flag.iti__ph { height: 10px; background-position: -3987px 0px; } .iti__flag.iti__pk { height: 14px; background-position: -4009px 0px; } .iti__flag.iti__pl { height: 13px; background-position: -4031px 0px; } .iti__flag.iti__pm { height: 14px; background-position: -4053px 0px; } .iti__flag.iti__pn { height: 10px; background-position: -4075px 0px; } .iti__flag.iti__pr { height: 14px; background-position: -4097px 0px; } .iti__flag.iti__ps { height: 10px; background-position: -4119px 0px; } .iti__flag.iti__pt { height: 14px; background-position: -4141px 0px; } .iti__flag.iti__pw { height: 13px; background-position: -4163px 0px; } .iti__flag.iti__py { height: 11px; background-position: -4185px 0px; } .iti__flag.iti__qa { height: 8px; background-position: -4207px 0px; } .iti__flag.iti__re { height: 14px; background-position: -4229px 0px; } .iti__flag.iti__ro { height: 14px; background-position: -4251px 0px; } .iti__flag.iti__rs { height: 14px; background-position: -4273px 0px; } .iti__flag.iti__ru { height: 14px; background-position: -4295px 0px; } .iti__flag.iti__rw { height: 14px; background-position: -4317px 0px; } .iti__flag.iti__sa { height: 14px; background-position: -4339px 0px; } .iti__flag.iti__sb { height: 10px; background-position: -4361px 0px; } .iti__flag.iti__sc { height: 10px; background-position: -4383px 0px; } .iti__flag.iti__sd { height: 10px; background-position: -4405px 0px; } .iti__flag.iti__se { height: 13px; background-position: -4427px 0px; } .iti__flag.iti__sg { height: 14px; background-position: -4449px 0px; } .iti__flag.iti__sh { height: 10px; background-position: -4471px 0px; } .iti__flag.iti__si { height: 10px; background-position: -4493px 0px; } .iti__flag.iti__sj { height: 15px; background-position: -4515px 0px; } .iti__flag.iti__sk { height: 14px; background-position: -4537px 0px; } .iti__flag.iti__sl { height: 14px; background-position: -4559px 0px; } .iti__flag.iti__sm { height: 15px; background-position: -4581px 0px; } .iti__flag.iti__sn { height: 14px; background-position: -4603px 0px; } .iti__flag.iti__so { height: 14px; background-position: -4625px 0px; } .iti__flag.iti__sr { height: 14px; background-position: -4647px 0px; } .iti__flag.iti__ss { height: 10px; background-position: -4669px 0px; } .iti__flag.iti__st { height: 10px; background-position: -4691px 0px; } .iti__flag.iti__sv { height: 12px; background-position: -4713px 0px; } .iti__flag.iti__sx { height: 14px; background-position: -4735px 0px; } .iti__flag.iti__sy { height: 14px; background-position: -4757px 0px; } .iti__flag.iti__sz { height: 14px; background-position: -4779px 0px; } .iti__flag.iti__ta { height: 10px; background-position: -4801px 0px; } .iti__flag.iti__tc { height: 10px; background-position: -4823px 0px; } .iti__flag.iti__td { height: 14px; background-position: -4845px 0px; } .iti__flag.iti__tf { height: 14px; background-position: -4867px 0px; } .iti__flag.iti__tg { height: 13px; background-position: -4889px 0px; } .iti__flag.iti__th { height: 14px; background-position: -4911px 0px; } .iti__flag.iti__tj { height: 10px; background-position: -4933px 0px; } .iti__flag.iti__tk { height: 10px; background-position: -4955px 0px; } .iti__flag.iti__tl { height: 10px; background-position: -4977px 0px; } .iti__flag.iti__tm { height: 14px; background-position: -4999px 0px; } .iti__flag.iti__tn { height: 14px; background-position: -5021px 0px; } .iti__flag.iti__to { height: 10px; background-position: -5043px 0px; } .iti__flag.iti__tr { height: 14px; background-position: -5065px 0px; } .iti__flag.iti__tt { height: 12px; background-position: -5087px 0px; } .iti__flag.iti__tv { height: 10px; background-position: -5109px 0px; } .iti__flag.iti__tw { height: 14px; background-position: -5131px 0px; } .iti__flag.iti__tz { height: 14px; background-position: -5153px 0px; } .iti__flag.iti__ua { height: 14px; background-position: -5175px 0px; } .iti__flag.iti__ug { height: 14px; background-position: -5197px 0px; } .iti__flag.iti__um { height: 11px; background-position: -5219px 0px; } .iti__flag.iti__un { height: 14px; background-position: -5241px 0px; } .iti__flag.iti__us { height: 11px; background-position: -5263px 0px; } .iti__flag.iti__uy { height: 14px; background-position: -5285px 0px; } .iti__flag.iti__uz { height: 10px; background-position: -5307px 0px; } .iti__flag.iti__va { height: 15px; background-position: -5329px 0px; } .iti__flag.iti__vc { height: 14px; background-position: -5346px 0px; } .iti__flag.iti__ve { height: 14px; background-position: -5368px 0px; } .iti__flag.iti__vg { height: 10px; background-position: -5390px 0px; } .iti__flag.iti__vi { height: 14px; background-position: -5412px 0px; } .iti__flag.iti__vn { height: 14px; background-position: -5434px 0px; } .iti__flag.iti__vu { height: 12px; background-position: -5456px 0px; } .iti__flag.iti__wf { height: 14px; background-position: -5478px 0px; } .iti__flag.iti__ws { height: 10px; background-position: -5500px 0px; } .iti__flag.iti__xk { height: 15px; background-position: -5522px 0px; } .iti__flag.iti__ye { height: 14px; background-position: -5544px 0px; } .iti__flag.iti__yt { height: 14px; background-position: -5566px 0px; } .iti__flag.iti__za { height: 14px; background-position: -5588px 0px; } .iti__flag.iti__zm { height: 14px; background-position: -5610px 0px; } .iti__flag.iti__zw { height: 10px; background-position: -5632px 0px; } .iti__flag { height: 15px; box-shadow: 0px 0px 1px 0px #888; background-image: url("/assets/img/phone_country/flags.png"); background-repeat: no-repeat; background-color: #DBDBDB; background-position: 20px 0; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .iti__flag { background-image: url("/assets/img/phone_country/flags@2x.png"); } } .iti__flag.iti__np { background-color: transparent; } .primaryMenu__wrapper { position: fixed; left: 0; top: 0; bottom: 0; width: var(--desktop-primary-menu-width); background: var(--sidebar-cont-base); z-index: 1022; } @media screen and (max-width:480px) { .primaryMenu__wrapper { display: none; } } .primaryMenu { opacity: 0; transition: opacity 0.3s ease; height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .primaryMenu-loaded { opacity: 1; } .primaryMenu-fake { opacity: 1; } .primaryMenu-fake .primaryMenu__item { opacity: 0.5; pointer-events: none; } .primaryMenu * { user-drag: none; -webkit-user-drag: none; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } .primaryMenu__head { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 12px; margin-bottom: 10px; } body[data-page="account_dashboard"] .primaryMenu__head ws-icon, body[data-page="account_dashboard"] .primaryMenu__head img { /*background: var(--sidebar-cont-active);*/ background: var(--sidebar-cont-active); background: radial-gradient(50% 50% at 50% 50%, #75caff21 42.19%, #75caff00 100%), var(--sidebar-cont-active); box-shadow: 0px 0px 3px 0px var(--colors-alpha-dark-20) inset; } .primaryMenu__head img, .primaryMenu__head ws-icon { width: 40px; height: 40px; --icon-size:40px; padding: 6px; border-radius: 12px; border: 1px solid transparent; transition: all 0.3s ease-in; } .primaryMenu__foot { display: flex; width: 48px; margin: 16px auto; flex-direction: column; align-items: center; } .primaryMenu__foot a.profile { position: relative; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; transition: all 0.1s ease-in; } .primaryMenu__foot a.profile:hover, .primaryMenu__foot a.profile.menu_open { background: var(--sidebar-ico-promo); } .primaryMenu__foot .taskPanel__counter, .primaryMenu__foot a.upgrade { position: relative; margin: 16px 0 0 0; padding: 0 4px; border: 1px solid var(--sidebar-ico-promo); border-radius: 6px; font: var(--font-ui-10-nano-reg); color: var(--sidebar-ico-promo); text-align: center; text-wrap: nowrap; transition: all 0.1s ease; } .primaryMenu__foot .taskPanel__counter:hover, .primaryMenu__foot a.upgrade:hover { background: var(--gradient-volume), var(--sidebar-ico-promo); border: 1px solid transparent; box-shadow: 0 0 0 1px var(--sidebar-cont-active); color: var(--sidebar-cont-active); } .primaryMenu__foot .taskPanel__counter:hover:before, .primaryMenu__foot a.upgrade:hover:before { content: ''; position: absolute; display: block; width: 100%; height: 100%; top: -1px; left: -1px; border-radius: 6px; border: 1px solid transparent; background: linear-gradient(180deg, #ffffff80, transparent) border-box, linear-gradient(180deg, transparent, #00000033) border-box; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude; } .primaryMenu__foot .taskPanel__counter:hover:active:before, .primaryMenu__foot a.upgrade:hover:active:before { border: 0; } .primaryMenu__foot .taskPanel__counter:hover:active, .primaryMenu__foot a.upgrade:hover:active { background: var(--sidebar-ico-promo); box-shadow: 0 0 0 2px var(--sidebar-cont-active); } .primaryMenu__foot .av_nm { border-radius: 8px; transform: scale(0.66); margin: -5px; } .primaryMenu__foot .av_nm + i.online { position: absolute; width: 8px; height: 8px; border-radius: 8px; bottom: -2px; left: -2px; background: var(--base-txt-new-minor); border: 2px solid var(--sidebar-cont-base); } .primaryMenu__foot .av_nm + i.online-off { background: var(--sidebar-cont-hover); box-shadow: 0 0 0 1px var(--sidebar-ico-base) inset; } .primaryMenu__content { flex-direction: column; display: flex; align-items: center; gap: 4px; flex-grow: 1; } .primaryMenu__item { display: flex; width: 20px; height: 20px; padding: 6px; border: 1px solid transparent; border-radius: 8px; position: relative; transition: all 0.3s ease-in; } .primaryMenu__item:not(.menu_open):not(.primaryMenu__item-active):not(.primaryMenu__item-plus):not(.primaryMenu__item-onboarding):hover, body:not([data-page=account_dashboard]) .primaryMenu__head img:hover, body:not([data-page=account_dashboard]) .primaryMenu__head svg:hover, body:not([data-page=account_dashboard]) .primaryMenu__head ws-icon:hover, .primaryMenu__item.selected, .primaryMenu__item.wait { background: var(--sidebar-cont-hover); background-image: linear-gradient(var(--sidebar-cont-hover), var(--sidebar-cont-hover)), var(--gradient-brd-glare); background-origin: border-box; background-clip: padding-box, border-box; box-shadow: 0 0 0 1px var(--sidebar-cont-active); } .primaryMenu__item:not(.primaryMenu__item-plus).menu_open { background: var(--sidebar-cont-hover); box-shadow: 0 0 0 1px var(--sidebar-cont-active); cursor: default; } .primaryMenu__item-optional { transition: all 0.3s ease-in; } .primaryMenu__item-active, .primaryMenu__item.menu_opened /*.primaryMenu__item.primaryMenu__item-optional:hover:active */ { background: var(--sidebar-cont-active); background: radial-gradient(50% 50% at 50% 50%, #75caff21 42.19%, #75caff00 100%), var(--sidebar-cont-active); box-shadow: 0px 0px 3px 0px var(--colors-alpha-dark-20) inset; cursor: default; } .primaryMenu__item-promo, .primaryMenu__item-promo:hover, .primaryMenu__item-promo:hover:active { --icon-color: var(--sidebar-ico-promo); } .primaryMenu__item { --icon-color: var(--sidebar-ico-base); } .primaryMenu__item svg { width: 20px; height: 20px; } .primaryMenu__item.menu_open { --icon-color: var(--sidebar-ico-hover); } .primaryMenu__item:not(.menu_open):not(.primaryMenu__item-active):hover { --icon-color: var(--sidebar-ico-hover); } .primaryMenu__item-active /*.primaryMenu__item.primaryMenu__item-optional:hover:active,*/ /*.primaryMenu__item.wait */ { --icon-color: var(--sidebar-ico-active); } .primaryMenu__item-hasTimer ws-icon[name="stopwatch"] { --icon-color: var(--lbl-today-major) !important; } .primaryMenu__item .timer-animated { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; border-radius: 12px; background: var(--sidebar-cont-base); transition: all 0.3s ease-in; display: none } .primaryMenu__item-hasTimer .timer-animated { display: block } .primaryMenu__item .timer-animated:after { content: ''; position: absolute; left: 5px; width: 2px; height: 7px; background: var(--lbl-today-major); clip-path: path('M1.625 1.5a.625.625 0 1 0-1.25 0v3.72a1 1 0 1 0 1.25 0V1.5Z'); transform-origin: 1px 6px; animation: timer-rotate 10s linear infinite; } .primaryMenu__item-hidden:not(.primaryMenu__item-active) { display: none; } .primaryMenu__content .primaryMenu__gap { min-height: 38px; } .primaryMenu__content:has( > .primaryMenu__item-hidden.primaryMenu__item-active) .primaryMenu__gap { min-height: 0; } @keyframes timer-rotate { to { transform: rotate(360deg); } } .primaryMenu__item.primaryMenu__item-muted:not(.menu_open,:hover,.primaryMenu__item-active) { --icon-color: var(--sidebar-ico-ghost); } .primaryMenu__item:hover .timer-animated, .primaryMenu__item.menu_open .timer-animated { background: var(--sidebar-cont-hover); transition: all 0s; } .primaryMenu__item use:last-child { display: none; } .primaryMenu__item use:first-child { display: inline-block; } /*.primaryMenu__item:hover:active use:first-child,*/ .primaryMenu__item.wait use:first-child { display: none; } /*.primaryMenu__item:hover:active use:last-child,*/ .primaryMenu__item.wait use:last-child { display: inline-block; } .primaryMenu__item-active use:first-child { display: none; } .primaryMenu__item-active use:last-child { display: inline-block; } .primaryMenu__item.menu_open use:first-child { display: none; } .primaryMenu__item.menu_open use:last-child { display: inline-block; } .primaryMenu__item img:last-child { display: none; } .primaryMenu__item img:first-child { display: inline-block; } .primaryMenu__item:hover:active img:first-child { display: none; } .primaryMenu__item:hover:active img:last-child { display: inline-block; } .primaryMenu__item-active img:first-child { display: none; } .primaryMenu__item-active img:last-child { display: inline-block; } .primaryMenu__item.menu_open img:first-child { display: none; } .primaryMenu__item.menu_open img:last-child { display: inline-block; } .primaryMenu__item-plus { width: 22px; height: 22px; border: 0; padding: 9px; border-radius: 14px; transition: all 0.3s ease-in; } .primaryMenu__item-plus .plus_bg { position: relative; width: 100%; background: radial-gradient(141.42% 141.42% at 100% 100%, #ffa8ff 0%, #5c80ff 100%); border-radius: 8px; box-shadow: 0 0 0 1px var(--sidebar-cont-active); } .primaryMenu__item-plus .plus_bg:before { content: ''; position: absolute; display: block; width: 20px; height: 20px; border-radius: 8px; border: 1px solid transparent; background: var(--gradient-brd-glare) border-box; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude; transition: all 0.3s ease-in; } .primaryMenu__item-plus .plus_sign { background: var(--sidebar-cont-base); } .primaryMenu__item-plus .plus_sign::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 2px; height: 10px; border-radius: 2px; background: var(--sidebar-cont-base); } .primaryMenu__item-plus .plus_sign:after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 2px; border-radius: 2px; background: var(--sidebar-cont-base); } .primaryMenu__item-plus:hover { width: 24px; height: 24px; padding: 8px; background: radial-gradient(100% 100% at 50% 100%, rgba(255, 168, 255, 0.20) 0%, rgba(255, 168, 255, 0.00) 100%), var(--sidebar-cont-hover); box-shadow: 0 0 0 1px var(--sidebar-cont-active); transition: all 0.15s ease-in; } .primaryMenu__item-plus:hover .plus_bg:before { width: 22px; height: 22px; transition: all 0.15s ease-in; } .primaryMenu__item-plus:hover .plus_bg { box-shadow: unset; } .primaryMenu__item-plus:hover .plus_bg:before, .primaryMenu__item-plus.menu_open .plus_bg:before { background: var(--gradient-brd-double-glare) border-box; } .primaryMenu__item-plus:hover .plus_sign:before { background: var(--sidebar-cont-active); } .primaryMenu__item-plus.menu_open .plus_sign:before { height: 8px; background: var(--sidebar-cont-base); } .primaryMenu__item-plus:hover .plus_sign:after { background: var(--sidebar-cont-active); } .primaryMenu__item-plus.menu_open .plus_sign:after { width: 8px; background: var(--sidebar-cont-base); } .primaryMenu__item-plus:hover:after { content: ''; position: absolute; z-index: 0; top: 0; left: 0; right: 0; bottom: 0; background: var(--gradient-brd-glare) border-box; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; border-radius: 15px; border: 1px solid transparent; box-shadow: 0 0 0 1px var(--sidebar-cont-active); } .primaryMenu__gap { flex-grow: 2; display: flex; } .primaryMenu hr { display: flex; width: 24px; border: none; border-top: 1px solid var(--sidebar-ico-ghost); margin: 12px auto; } .primaryMenu__counter span[class] { position: relative; display: flex; align-items: center; justify-content: center; min-width: 14px; height: 14px; padding: 0 4px; box-sizing: border-box; box-shadow: 0 0 0 2px var(--sidebar-cont-base); border-radius: 16px; font: var(--font-ui-10-nano-med); } .primaryMenu__counter span.cnt_new { background: var(--sidebar-badge-base); color: var(--sidebar-badge-txt); border: none; } .primaryMenu__counter-muted span.cnt_new { background: var(--sidebar-badge-ghost); } .primaryMenu__counter span.cnt_hot { background: var(--sidebar-badge-alert); color: var(--sidebar-badge-txt); border: none; } .primaryMenu__counter span.cnt_warm { background: var(--sidebar-badge-upcoming); color: var(--sidebar-badge-txt); border: none; } .primaryMenu__counter span.cnt_all { background: var(--sidebar-badge-ghost); color: var(--sidebar-badge-txt); border: none; } .primaryMenu__item-onlyTimer:not(.primaryMenu__item-hasTimer) { display: none; } #primaryMenu__event__counter span.cnt_mention { background: var(--sidebar-badge-alert); } #primaryMenu__timer__counter span.cnt_new { background: var(--sidebar-badge-ghost); } #primaryMenu__timer__counter span.cnt_new[data-over=warning] { background: var(--lbl-today-major); color: var(--sidebar-cont-base); } #primaryMenu__timer__counter span.cnt_new[data-over=alert] { background: var(--sidebar-badge-alert); } #primaryMenu__support__counter span.cnt_new { background: var(--sidebar-badge-alert); } .primaryMenu__item:not(.menu_open):hover .primaryMenu__counter span[class]:after { content: ''; position: absolute; top: 0; left: 0; display: block; width: calc(100% - 2px); height: calc(100% - 2px); border-radius: 12px; border: 1px solid transparent; background: var(--gradient-brd-glare) border-box; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude; transition: all 0.3s ease-in; } .primaryMenu__item.primaryMenu__item-onboarding { background: linear-gradient(180deg, var(--colors-teal-500) 0%, var(--colors-teal-750) 100%); box-shadow: 0 0 0 1px var(--colors-steel-trans-980); transition: none; border: none !important; margin-bottom: 4px; ws-icon { --icon-color: var(--colors-alpha-light-100); svg { filter: drop-shadow(0 1px 6px var(--shadow-color-fx-300)) drop-shadow(0 1px 2px var(--shadow-color-fx-300)); transform-origin: 70% 90%; animation: ws-hand-wave 10s ease-in-out infinite; } } &:hover { background: var(--colors-teal-600); box-shadow: 0 0 0 1px var(--colors-steel-trans-980); } &.menu_open { border: 1px solid var(--colors-teal-500); background: var(--colors-teal-900); box-shadow: 0 0 0 1px var(--colors-steel-trans-980); } } @keyframes ws-hand-wave { 0% { transform: rotate(0deg); } 2% { transform: rotate(0deg); } 4% { transform: rotate(18deg); } 6% { transform: rotate(-14deg); } 8% { transform: rotate(16deg); } 10% { transform: rotate(-12deg); } 12% { transform: rotate(12deg); } 14% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } }@media print { @page { size: A4 portrait; } body { background: var(--base-cont-top) !important; padding: 0; min-width: 1000px; height: auto; overflow: auto; } #content { padding: 0 !important; border: none; } .noprint { display: none !important } .print { display: inline; } #primaryMenu__wrapper, #sidebar__wrapper, #adminMenu__wrapper, #taskCreate__wrapper, #fileCreate__wrapper, #noteBook__wrapper, #queueView__wrapper, #viewsList__wrapper { display: none } ws-btn, #too_many, #taskPanel, .taskView__head, .headerGeneral__right, .primaryMenuButton__wrapper, .ps__rail-x, .ps__rail-y, .dataTable__shadowLine { display: none !important } .headerGeneral { height:64px; padding: 0; } #headerPrint { display: none; margin: 0 0 10px 0; padding: 10px; height: 30px; .path { color: var(--base-txt-tertiary); font: var(--font-ui-11-micro-reg); margin: -3px 0 0; } .date { float: right; margin: 5px; } .name { font: 300 18px/30px var(--font-base); } .date ~ .name { font: var(--font-ui-22-title-1-semi); } ws-icon { float: right; width: 48px; height: 48px; margin: -9px 0; } } main { margin: 0 !important; height: auto; } body.rightPanelShown main { display: none } #rightPanel__wrapper { position: static; box-shadow: none; width: unset; padding-bottom: 0 !important; } body.sidePanelShown main { display: none } #sidePanel__wrapper { position: static; box-shadow: none; width: unset } body.withTaskView main, body.withTaskView #rightPanel__wrapper { display: none } #taskView__wrapper { position: static; box-shadow: none; } #modalContainer { position: static; } body.withModal main, body.withModal #taskView__wrapper { display: none } .modal__overlay { background: none; position: static; padding-top: 0; } .modal__header, .modal__dataTable, .modal__content__block-gray { background: var(--base-cont-top) } .modal__content .commentListPanel__filter, .modal__content .buttons, .modal__header > .in .quick_search { display: none } .modal { position: static; margin: 0 !important; width: 100% !important; max-height: unset !important; box-shadow: none; } .modal__content .scrollZone { height: auto !important } .modal__header > .in { padding-left: 0 } #modal__previewImage { position: static; margin: 0 !important; box-shadow: none; max-width: 100% !important; height: auto !important } /* old styles @todo: refactor*/ .massPanel, #massdo_top, #mass_n_filt, .commentListPanel, #header_normal, #title_float, .bounce, #tio-msg-wdgt, #tio-emoji, #applause, #goto_top, #goto_foot, #preview_place, .comment_day_line { display: none } #projects, #all_files_, #priority_over, #tasks, #tasks2 { border-bottom: none } .floatingButtons-gantt, #gotop { display: none !important } #gantt_legend { display: none } #header_space { display: none !important } #header_normal { position: static !important; height: auto !important; border: none !important } .after_filter { margin-top: 0 } .massPanel, #massdo_top { display: none !important } .floatlist .item .text:after { right: 10px !important; left: 10px !important; } a.moredots, .commentListPanel__filter .ico_dots { display: none } span.av_left { background: var(--base-cont-top); color: var(--base-txt-accent); box-shadow: 0 0 0 1px var(--base-txt-tertiary) inset } span.av_left { background: var(--base-cont-top); color: var(--base-txt-accent); box-shadow: 0 0 0 1px var(--base-txt-tertiary) inset } #files_new, blockquote, address, ol.todo, ol.todo li { page-break-inside: avoid; } .commentListPanel, #mass_n_filt, .download_zip, .likes_min a.ico, .likes_min a.like_ { display: none } .header .name .ico, .header .name .bookmark { display: none } /*MODAL WINDOW PRINT*/ .td_progress .b_fl { display: block; } .td_progress .progress { display: none } .td_progress .progress_na { display: none } } .priorb {display:inline-block;width:20px;height:20px;vertical-align:middle;white-space:nowrap;margin:-3px 2px -1px;text-align:center;font: var(--font-ui-10-nano-med);line-height: 20px;border-radius: 6px;} .priorb b {color:inherit !important; font-weight:bold !important} h1 .priorb {font:18px/20px var(--font-base); padding:2px; margin:-4px 2px -2px; letter-spacing: -2px; text-indent:-2px;} .modal__header > .in .prior_sp .priorb, .modal__header > .in .prior_sp .prior10 {font:bold 16px/25px var(--font-base) !important; padding:0 !important; width:25px; height:25px; float:left; margin:-2px 10px 0 0; text-align:center} .priorb--initial { width: initial; height: initial; margin: 0; padding: 0 6px; } /* -------------------------------------------------------------------------------------------------------------------*/ #prioritySelectMenu { width: 220px; z-index: 2000; } .menu__item.pra span.prior_label, .menu__item.pra span:first-child { display: block; width: 20px; height: 20px; border-radius: 6px; text-align:center; color: var(--prior-txt); font: var(--font-ui-10-nano-reg); font-family: monospace; line-height: 21px; margin: 0 6px; } .menu__item.pra .inputCheckbox { display: flex; align-items: center; } .menu__item.pra .inputCheckbox span { display: flex; align-content: center; align-items: center; } .menu__item.pra .in { display: flex; } .menu__item.pra[data-tasks-count="0"] .in .flex_content { color: var(--base-txt-tertiary); } .menu__item.pra[data-tasks-count="0"] .in .flex_content::after { content: " (0)" } .menu__item.pra0 ws-icon { width: 20px; height: 20px; } .prior0 { } .prior0 svg { width: 16px; height: 16px; fill: var(--white-primary) !important; } ws-icon .prior0 svg { width: var(--icon-size); height: var(--icon-size); } .dataTable .dataTable__item td.td_priority task-priority span.prior0 { background: none !important; svg { fill: var(--base-txt-tertiary) !important; } } .dataTable .dataTable__item td.td_priority task-priority span.prior0 svg { fill: var(--prior-0); } .menu__item.pra span.prior0 { background: none !important; svg { fill: var(--base-txt-tertiary) !important; } } .menu__item.pra span.prior0 svg { fill: var(--prior-0); } /* -------------------------------------------------------------------------------------------------------------------*/ .proj_color[onclick] {cursor:pointer;} span.proj_color { background:var(--project-color); } ws-icon.proj_color:not([name]) { border-radius:4px; background:var(--project-color); } ws-icon[name].proj_color svg { fill: var(--project-color) !important; } .proj_color_sel {min-height: 140px;} .proj_color_sel div.clear {clear:left;} .proj_color_sel .proj_color { float:left; width:26px; height:26px; text-align:center; overflow:hidden; margin: -5px 3px 15px; padding:3px; border-radius:16px; } .proj_color_sel:not(.proj_color_sm) .proj_color[data-color="6"] {clear:left;} .proj_color_sel:not(.proj_color_sm) .proj_color[data-color="5"], .proj_color_sel:not(.proj_color_sm) .proj_color[data-color="10"]{margin-right:-50px !important;} .proj_color_sel a.proj_nocolor {color:var(--base-txt-tertiary); padding:6px; background:transparent} .proj_color_sel a.proj_nocolor span.proj_color0 {float:left; border:1px solid var(--base-line-alt-cardbrd); padding:2px; margin:-3px 10px -3px 0; border-radius:16px;} .proj_color_sel a.proj_nocolor span.proj_color0:before{ content:''; float:left; width:20px; height:20px; background:url(/assets/img/color/wysiwyg_iconset_new.svg) -220px -20px;} .proj_color_sel a.proj_nocolor.selected span.proj_color0 {background: var(--base-cont-top)} .proj_color_sel a.proj_nocolor.selected {color:var(--base-txt-secondary)} .proj_color_sel .proj_color.selected {background: var(--colors-alpha-light-100) !important;border-radius: 16px !important;} .proj_color_sel .proj_color span {float: left;width:26px;height:26px;border-radius:16px;background: var(--project-color);} .proj_color_sel .proj_color.presel span:before {content:''; display:block; background:var(--base-cont-top); width:8px; height:8px; margin:11px; border-radius:50%} .proj_color_sel .proj_color.presel span, .proj_color_sel .proj_color.selected span {width:30px; height:30px; margin:-2px; } .proj_color_sel .proj_color.presel:hover span {width: 20px;height: 20px;margin: 3px;} .proj_color_sel .proj_color.presel:hover span:before {width: 10px;height: 4px;margin: 8px 5px;border-radius: 0;} .proj_color_sm {min-height:0; display:flex;align-items:center; justify-content:space-between;} .proj_color_sm .proj_color {width:16px; height:16px; margin:5px 1px; padding:2px; float:none; display: block} .proj_color_sm .proj_color.menu__item-zero {transform:scale(0.5)} .proj_color_sm .proj_color span {width:16px; height:16px;} .proj_color_sm .proj_color.selected {background: var(--colors-alpha-light-100) !important} .proj_color_sm .proj_color.presel span:before {margin:6px; width:6px; height:6px;} .proj_color_sm .proj_color.presel span, .proj_color_sm .proj_color.selected span {width:18px; height:18px; margin:-1px; } .proj_color_sm .proj_color.presel:hover span {width:16px; height:16px; margin:0; } .proj_color_sm .proj_color.presel:hover span:before {margin: 6px 3px;transform: scale(0.8);} .menu .proj_color_sm .proj_color0 {background:var(--base-cont-top); box-shadow:0 0 0 1px var(--base-line-alt-cardbrd) inset;} .filter div.filt a.filtdel.proj_color0 {background: var(--base-cont-low);box-shadow: 0 0 0 1px var(--base-btn-primary-minor) inset;} .filter div.filt a.filtdel.proj_color {border-radius:25px;background: var(--project-color);} .filter div.filt a.filtdel.proj_color:hover:before, body.mobile .filter div.filt a.filtdel.proj_color:before {right:6px;} .modal__header > .in > .proj_color {position:absolute; width:20px; height:20px; left:-10px; top:-10px; transform:rotate(45deg)} /* -------------------------------------------------------------------------------------------------------------------*/ .prior_sel_sm {height: 24px;} .prior_sel_sm a {float:left; width:18px; height:18px; padding:0; color:var(--white-accent) !important; border-radius:10px; text-align:center; margin:3px; font:9px/19px var(--font-base)} .prior_sel_sm a:hover {padding:1px; margin:2px;} .prior_sel_sm a:last-child {margin-right:-20px;} .filter div.filt a.filtdel.prior {color:var(--white-accent) !important; font-weight: bold} .menu .prior_sel_sm a.menu__item-zero {transform:scale(0.5); background:var(--base-cont-low) !important; color:transparent !important} .menu .prior_sel_sm a.menu__item-zero:after {display:none} /* -------------------------------------------------------------------------------------------------------------------*/ #colors { padding:0; margin:0 0 10px 0; } #colors div.colors { float:left; width:174px; } #colors a { float:left; background:var(--base-cont-low); color:var(--base-txt-secondary); margin:0 2px 2px 0; width:27px; height:25px; font:14px/27px var(--font-base); text-align:center; background: var(--tag-bg); color: var(--tag-color); } #colors a span { visibility:hidden} #colors a:hover span { visibility:visible} #colors a:hover:before {content:'A'} #colors a.tag_act:before { content:'\2022'} #modSidebar { max-width: 240px; min-width: 240px; overflow: hidden; background: var(--base-cont-mod-low); } #modProfile { background: var(--base-cont-mod-top); box-shadow: var(--shadow-cont-minor-outline); padding: 0; min-width: 0; } .modal[data-group=profile] .ps__rail-y { margin: 0; } #modProfile .modal__header { gap: 0; } #modProfile .modal__header .buttons { height: 46px; padding: 0 4px; margin: 0 8px; display: flex; align-items: center; } #modProfile .modal__header.modal__header-big { padding-right: 16px; } #modProfile .buttons .button { margin: 0; } #modProfile span.invited { color: var(--base-txt-tertiary); font: var(--font-ui-12-mini-reg); padding: 12px 16px 0 8px; } #modProfile .not_in_profile { display: none; } #modProfile .modal__header > .in { margin: 0 8px; padding: 0 4px; display: flex; gap: 16px; } #modProfile .modal__header > .in .button { margin: 0; } #modProfile .modal__header > .in .r { margin: 0; align-items: center; gap: 12px; } #modProfile .modal__header > .in .picker_year { font: var(--font-ui-22-title-1-bold); font-variant-numeric: tabular-nums; } #modProfile .modal__header .mobile-head .picker_year { color: var(--base-txt-primary); font: var(--font-ui-18-title-2-bold); font-variant-numeric: tabular-nums; } #modProfile .modal__header > .in { line-height: 40px; padding: 8px 0 8px 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; height: 40px; } #modProfile .user_workday .workday_head .info { margin: 0; padding: 4px 0 0 12px; } #modProfile .user_workday .workday_head .sw_pre { margin-top: -12px; } #modProfile .user_workday .workday_head img { display: none; } #modProfile .user_workday .workday_foot { padding: 24px 24px 0; height: 40px; border: none; bottom: 0; } #modProfile .ui-datepicker-header { margin-left: 4px !important; } #modProfile .ui-datepicker-multi div.ui-datepicker-one-month { /* margin-left: 24px; */ } #modProfile .ui-datepicker-new-row { /* margin-left: 10px; */ } #modProfileContent .space ws-icon ws-emoji { width: 16px; height: 16px; } .profile__block__loader { display: none; position: absolute !important; background: var(--base-cont-mod-top); border-radius: 0 0 16px 16px; height: 0; width: 100%; z-index: 999; } .profile__block__loader ws-icon { position: absolute; left: 50%; top: 50%; margin: -40px 0 0 -40px; width: 80px; height: 80px; --icon-size: 74px; --icon-color: var(--base-line-tertiary); opacity: 1; pointer-events: none; } .profile__block__loader .loader { position: absolute; left: 50%; top: 50%; margin: -40px 0 0 -40px; border: 4px solid var(--base-line-tertiary); border-left-color: var(--trans); width: 72px; height: 72px; opacity: 1; pointer-events: none; } .user_workday .workday_head .workday_controls { } .user_workday .workday_head .workday_controls span { margin-left: auto; } .user_workday .workday_head .workday_controls span a { color: var(--base-txt-btn-a); font: var(--font-txt-13-small-med); line-height: 20px; } .user_workday .workday_head .workday_controls span a svg { fill: var(--base-txt-btn-a); } .user_workday .workday_head .workday_controls ws-btn { margin-left: auto; } .user_workday .profileCalendar.viewonly { table td a { pointer-events: none; } } .flex-text-r .button { margin: 0 0 0 10px; } #modProfile .modal__header-disabled { opacity: 1; } #modProfile .editBlock { padding: 0; } #modProfileContent > * { max-width: 640px; } #modProfileContent .setupBlock:not([class*='setupBlock__']) { background: var(--base-cont-mod-top); } #modProfileContent .setupBlock__muted { background: var(--base-cont-mod-mid); } #modProfileContent ~ .setupBlock:last-child { margin-bottom: 1px; } #modProfile .setupBlock__title .in { display: flex; align-items: center; font: var(--font-ui-18-title-2-semi); gap: 6px; padding: 4px 8px; } #modProfileContent .setupBlock__item .in { display: flex; align-items: center; gap: 6px; width: min-content; } #modProfileContent .setupBlock__muted .setupBlock__title-sub { display: none !important; } #modProfileContent .setupBlock__title-sub .in { font: var(--font-ui-14-regular-reg); } #modProfileContent .setupBlock__title-sub .action { padding: 0 8px; display: block; } @media (max-width: 480px) { #profile_hacks_main .setupBlock__item:has(ws-slider) { flex-wrap: wrap; ws-slider { margin-left: 34px; } } } #modProfile .cnt { background: var(--base-hlt-b-hover); padding: 0 8px; float: left; } #modProfile .cnt .ico { display: none; } #modProfile .cnt b { font-weight: 400; } #modProfile .cnt, #modProfile .cnt i { border-radius: 8px; color: var(--base-txt-btn-b); font: 18px/32px var(--font-base); } #profile_main, #profile_notify_main, #profile_hacks_main, #profile_privacy_main, #profile_sidebar_settings, #profile_apps { padding: 0 24px !important; overflow-y: scroll; } #profile_main label[for=work_hrs]:not(:focus-within):has(input:placeholder-shown) .sw_pre:not(.sw_act), #profile_main label[for=work_hrs]:has(input:placeholder-shown) .sw_pre:not(.sw_act) { display: none; } #modProfileContent .workday_head { padding: 5px 24px 20px 24px !important; } #modProfileContent .setupBlock .setupBlock__content { padding: 20px; } #modProfileContent .setupBlock .setupBlock__content + .setupBlock__content, #modProfileContent .setupBlock .setupBlock__title + .setupBlock__content { padding: 0 20px 20px; } #profile_notify_main, #profile_hacks_main, #profile_privacy_main, #profile_sidebar_settings, #profile_apps { padding-bottom: 24px; } #profile_sidebar_settings .setupBlock__item__disabled ws-icon[name^=award] { width: 28px; height: 28px; --icon-color: var(--base-btn-notice-major); } #profile_sidebar_settings .setupBlock__item .in ws-icon use { fill: var(--base-txt-secondary); } #profile_sidebar_settings .setupBlock__item__disabled .in ws-icon use { fill: var(--base-txt-muted); } #profile_sidebar_settings .setupBlock__item .in ws-icon use:last-child, #profile_sidebar_settings .setupBlock__item.pre_act .in ws-icon use:first-child { display: none; } #profile_sidebar_settings .setupBlock__item.pre_act .in ws-icon[name="eye-close:none"] { display: none; } #profile_sidebar_settings .setupBlock__item.pre_act .in ws-icon use:last-child { fill: var(--base-txt-alt-light); display: inline-block; } #profile_sidebar_settings .setupBlock__item.pre_act .in ws-icon:not([name="eye-close:none"]):not([name="award-fill"]) { background: var(--base-txt-act-minor); border-radius: 8px; } #profile_sidebar_settings .setupBlock__item.pre_act .in label.disabled ws-icon:not([name="eye-close:none"]):not([name="award-fill"]) { background: var(--base-txt-muted); } #profile_sidebar_settings .inputCheckbox.inputCheckbox-alwaysOn span svg { fill: var(--base-txt-muted); } #profile_sidebar_settings .setupBlock__item .in ws-icon[name="eye-close:none"] use { fill: var(--base-txt-tertiary); } #profile_sidebar_settings .setupBlock__item .in .hotKey { display: none; opacity: 0; transition: opacity 0.2s ease-in-out; } #profile_sidebar_settings .setupBlock__item:hover .in .hotKey, #profile_sidebar_settings .setupBlock__item.pre_act .in .hotKey { opacity: 1; } #profile_sidebar_settings .setupBlock__item.pre_act .in .hotKey { display: flex; } #profile_sidebar_settings .setupBlock__item .in { padding: 0 0 0 6px; } #profile_sidebar_settings .setupBlock__item .in ws-icon { margin-left: 8px; padding: 4px; } #profile_sidebar_settings .setupBlock__item .in span.flex_content { padding-left: 6px; flex-grow: 1; } #profile_sidebar_settings .setupBlock__line:last-child { display: none; } #profile_sidebar_settings .setupBlock__group__title { padding: 0; color: var(--base-txt-secondary); font-weight: 400; } #profile_sidebar_settings .setupBlock__item { padding: 0 6px; border-radius: 10px; } #profile_sidebar_settings .setupBlock__item:hover { background: var(--base-hlt-g-easy); } #profile_sidebar_settings .setupBlock__item .in label { color: var(--base-txt-tertiary); display: flex; align-items: center; padding: 6px 0; flex-grow: 1; } #profile_sidebar_settings .setupBlock__item__disabled .in label { color: var(--base-txt-muted); } #profile_sidebar_settings .setupBlock__item.pre_act .in label { color: var(--base-txt-primary); } #profile_sidebar_settings .setupBlock__item .in label.disabled { cursor: auto; } #profile_sidebar_settings .setupBlock__item .badge { margin-left: 8px; } .scrollPointer { width: 100%; height: 24px; text-align: center; flex-shrink: 0; } .scrollPointer * { display: none; } .scrollPointer ws-icon svg { fill: var(--base-txt-tertiary); } .scrollPointer:hover ws-icon svg { fill: var(--base-txt-secondary); } .scrollPointer-on { cursor: s-resize; } .scrollPointer-on * { display: initial; } .user_workday .workday_controls ws-slider, #modProfileContent ws-slider { background: var(--base-cont-mod-low); } #modProfileContent #userpic { position: initial; } body.mobile #modProfileContent { .blank { padding-left: 24px; padding-right: 24px; width: calc(100% - 48px); } .modal__content__block .menuFake .menu__group__wrapper { padding-left: 0 !important; padding-right: 0 !important; } } .avatars h4 { margin:0 0 10px 0; } .ava_controls, .ava_controls > * { gap: 8px; } .ava_controls .flex_row:last-child { height: 24px; } .ava_controls a.ava_prev { display: inline-block; width: 24px; height: 24px; border-radius: 4px; } .ava_controls a.ava_prev.act { box-shadow: var(--shadow-brd-focus-b); } .ava_controls a.ava_prev:not(.act):hover { box-shadow: var(--shadow-brd-hover-b); } .ava_controls .flex_row ws-btn { margin-left: 0; } .dropavatar { border: none; border-radius: 8px; } .avatars a { display: inline-flex; width:48px; height:48px; padding: 0; box-shadow: 0 0 0 1px var(--menu-cont-brd) inset; border-radius: 8px; background:var(--white-tertiary) url(/assets/img/color/pro_avatars.svg); opacity: 0.5; } .avatars a:hover { opacity: 1; box-shadow: none; } .avatars a.act, #avatars a.act:hover { opacity: 1; box-shadow: none; } .avatars_top {padding:10px; margin:0} .avatars_top a {opacity:1} .avatars_set {display: flex;} .avatars_set div { display: flex; gap: 8px; flex-wrap: wrap; } .av_colors_drop a.av1 { background: #ED6E83 !important; } .av_colors_drop a.av2 { background: #FFA600 !important; } .av_colors_drop a.av3 { background: #FFCA00 !important; } .av_colors_drop a.av4 { background: #C8BA00 !important; } .av_colors_drop a.av5 { background: #96AD0D !important; } .av_colors_drop a.av6 { background: #79BBB6 !important; } .av_colors_drop a.av7 { background: #51B4E6 !important; } .av_colors_drop a.av8 { background: #BE9DC8 !important; } .av_colors_drop a.av9 { background: #F9A0C3 !important; } .av_colors_drop a.av10 { background: #B2B2B2 !important; } #drop_choose_avamenu { width: 296px; padding: 0 0 12px 0; } #drop_choose_avamenu .line { margin: 8px 0; background: var(--base-line-tertiary); } .avarats_set > a { background: none !important; } .av_colors_drop { display: flex; gap: 8px; flex-wrap: wrap; } .av_colors_drop a, .av_colors_drop a.selected, .av_colors_drop a.wshover { width: 48px; height: 20px; border-radius: 20px !important; display: inline-flex; justify-content: center; padding: 0; } .av_colors_drop a ws-icon { display: none; } .av_colors_drop a ws-icon svg { fill: var(--base-txt-max); } .av_colors_drop a[class*="act"]:not(:hover) ws-icon[name="check_alt"] { display: inline-flex; } .av_colors_drop a:hover ws-icon[name="input-circle-solid-blank"] svg { transform: scale(0.4); opacity: 0.5; } .av_colors_drop a:hover ws-icon[name="input-circle-solid-blank"] { display: inline-flex; } .no_hover { pointer-events: none; } .modalConfirm { padding: 12px 0 28px 0; } .modalConfirm.modalConfirm-alert { border-top: 2px solid var(--base-btn-alert-primary-minor); } .modalConfirm-text { display: flex; gap: 12px; font: 15px/18px var(--font-base); padding: 12px 28px; } .modalConfirm-w { --icon-color: var(--base-txt-btn-w); color: var(--base-txt-btn-w); } .modalConfirm-buttons { padding: 20px 28px 0; display: flex; justify-content: flex-end; gap: 16px; } .modalConfirm-buttons ws-btn { margin: 0; } #modProfileContent #admrole_descr { height: auto; .setupBlock__item { flex-wrap: wrap; .setupBlock__explain { padding-left: 38px; } > .in label { cursor: default; } .inputCheckbox { align-self: flex-start; padding-top: 4px; cursor: default; &:has(input:not(:disabled)) { cursor: pointer; &+.in label { cursor: pointer; } } } } } .menu-birthday { padding: 0; } .menu-birthday > .flex_row { align-items: flex-start; } .menu-birthday .menu__group { border: none !important; box-shadow: none !important; padding: 12px; } .menu-birthday .chech_links .chech_links_row a.fix.menu__item-active { background: none !important; box-shadow: 0 0 0 1px var(--base-txt-primary) inset; } .menu-birthday-right-col { border-left: 0.5px solid var(--base-line-primary); } .menu-birthday-last-col { border-top: 0.5px solid var(--base-line-primary); } @media (max-width: 480px) { .menu-birthday { .chech_links_row { --gap: 4px; gap: var(--gap); .menu__item { /* width: calc((100% - var(--gap) * 5) / 6) !important; height: auto !important; aspect-ratio: 1; */ width: 40px !important; height: 40px !important; padding: 0 !important; .in { padding: 0; } } } .scrollZone { flex-shrink: 1; } .menu-birthday-right-col { border: unset; &> .flex_row { gap: 8px; & > .menu__group { flex-grow: 1; margin-top: 0 !important; } } } } } #sidebar_profile a.sidebar__menu__item-active { pointer-events: none; } #modProfile .profile-highlight { box-shadow: var(--shadow-brd-focus-alt); } @media (max-height: 586px) { #sidebar_profile .ava { display: none; } } #modProfile .apiBlock { background: var(--base-cont-top); padding: 20px; display: flex; flex-direction: column; gap: 10px; border-radius: 12px; } #modProfile .apiBlock .apiBlock__title { color: var(--base-txt-primary); font-size: 16px; font-style: normal; font-weight: 600; line-height: 20px; } #modProfile .apiBlock .apiBlock__body__text { color: var(--base-txt-secondary); font-size: 12px; font-style: normal; font-weight: 400; line-height: 20px; } #modProfile .apiBlock__body__apps { display: flex; flex-direction: column; gap: 8px; margin: 20px 0 0; max-height: 400px; } #modProfile .apiBlock__body__apps__item { display: flex; align-items: center; border-radius: 4px; padding: 10px 14px; cursor: pointer; background: var(--base-cont-mid); } #modProfile .apiBlock__app__button { margin-left: 10px; } #modProfile .apiBlock__app__button ws-btn { font-size: 11px; padding: 0 10px; } #modProfile .apiBlock__app__body { display: flex; align-items: flex-start; flex-direction: column; gap: 4px; width: 60%; } #modProfile .apiBlock__app__body > div { display: flex; align-items: center; width: 100%; } #modProfile .apiBlock__app__body > div:nth-child(2) { gap: 10px; } #modProfile .apiBlock__app__body div span:not(.apiBlock__app__label) { font-size: 11px; color: var(--base-txt-secondary); } #modProfile .apiBlock__app__date { color: var(--base-txt-tertiary); font: 12px/20px var(--font-base); font-weight: 400; margin-left: auto; } #modProfile .apiBlock__app__name { color: var(--base-txt-accent); font: 14px/20px var(--font-base); font-weight: 510; flex: 1; max-width: 80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #modProfile .apiBlock__app__label { font-size: 11px; border-radius: 4px; padding: 0 4px; color: var(--base-txt-alt-light); } #modProfile .apiBlock__app__label.public { background: var(--base-txt-alt-fresh); } #modProfile .apiBlock__app__label.private { background: var(--base-surf-sidebar); } #modProfile .apiBlock__app__name div { max-width: 500px; overflow: hidden; text-overflow: ellipsis; } #modProfile .apiBlock__app__logo { margin: 0 10px 0 0; } #modProfile .apiBlock__app__logo img { border-radius: 8px; } #modProfile .apiBlock__body__apps__item:hover { background: var(--base-hlt-hover); } #modProfile .default_button { padding-right: 12px; } /* @media (min-width: 901px) { } */ #modProfileContent > form { padding-top: var(--screen-px); /* щоб не обрізало тінь скрол зони */ } @media screen and (min-width: 901px) { .sidebar-profile .sidebar__head .bookmark { position: absolute; margin-top: -10px; } } @media (min-width: 901px) and (hover: hover) { #modProfile .modal__header .bookmark { display: none; } .sidebar-profile .sidebar__head .bookmark { opacity: 0; transition: opacity .2s ease-in-out; } .sidebar-profile:has(.bookmark-active) .sidebar__head .bookmark, .sidebar-profile:hover .sidebar__head .bookmark { opacity: 1; } } @media screen and (min-width: 481px) and (max-width: 900px) { #modSidebar { max-width: 80px; min-width: 80px; .sidebar__head { padding: 8px 0 0; display: flex; flex-direction: column; align-items: center; } .sidebar-profile .sidebar__head .bookmark { display: none; } .sidebar-profile .ava { width: 56px; height: 56px; } .sidebar-profile .img_big { margin: 0; height: 100%; width: 100%; } .sidebar-profile .img_big img, .sidebar-profile .img_big span { transform: scale(1.16667); } .sidebar-profile .sidebar__head .name, .sidebar-profile .sidebar__head .email { display: none; } .sidebar__menu__item { padding: 0; justify-content: center; } .sidebar__menu__item .in { display: none; } } } @media screen and (max-width: 900px) and (hover: hover) { #modProfile .modal__header .bookmark { opacity: 0; transition: opacity .2s ease-in-out; } #modProfile .modal__header:has(.bookmark-active) .bookmark, #modProfile .modal__header:hover .bookmark { opacity: 1; } } @media (max-width: 900px) { #modProfileContent { .profileBlock .inputBlock-50 { width: 100%; } .profileBlock .inputBlock-25 { width: calc((100% / 2) - (((2 - 1) / 2) * 16px)); } #userpic { align-self: flex-start; margin-top: 8px; } } } @media (max-width: 480px) { #modSidebar { display: none } #modProfile { width: 100% } #modProfile .modal__header .mobile-head { display: flex; box-shadow: unset; } #modProfile .modal__header, #modProfile .modal__header.modal__header-big { padding: 0; } #modProfile .modal__header > .in { display: none; } #modProfile .modal__header .mobile-head__btn .buttons, #modProfile .modal__header .mobile-head .default_button { margin: 0; padding: 0; height: unset; &> * { float: unset; } } } @media (max-width: 480px) { #modProfile .sidebar__search + .modal__content__block { padding-top: 0; } } @media (max-width: 480px) { .user_workday .workday_head .workday_controls ws-slider { /* width: 100%; */ } .user_workday .workday_head .workday_controls { border-radius: 6px; } .user_workday .workday_head .workday_controls ws-slider a:not(.act) { overflow: hidden; } .user_workday .workday_head .workday_controls ws-slider a:not(.act) span { overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; } .user_workday .workday_head .workday_controls ws-slider i.ani { transition: none !important; } #modProfile #modal__headerContent { margin-left: auto; } #modProfile .modal__header.withButtons .user_workday_adjustDate { display: none; } #modProfile .workday_footer_text .gray { display: none !important; } } #modProfile .modal__header.withButtons .dashboard_btn { display: none; } #profile_setup_2fa { &[data-collapsed="true"] { .setupBlock__content { display: none; } } &[data-collapsed="false"] { .setupBlock__title .r { display: none; } } .ws-code-input { gap: 8px; input { padding: 0; height: calc(36px * 1.5); width: 36px; font: var(--font-ui-22-title-1-semi); } } .setupBlock__list { margin-left: -20px; margin-right: -20px; padding-bottom: 20px; } .setupBlock__list__item > .setupBlock__title { padding-bottom: 0; } .setupBlock__content > .setupBlock__line:first-child { margin-top: 0 !important; margin-left: -20px !important; margin-right: -20px !important; } } #modProfile .hotKey .text { padding: 6px 8px 0px 4px; font: var(--font-ui-11-micro-reg); color: var(--base-txt-muted); font-family: var(--font-mono); } #sidebarProfileMenu .account-switch ws-icon { transition: transform 0.2s ease; } #sidebarProfileMenu .account-switch.menu_open ws-icon { transform: rotate(90deg); } #profile_setup_2fa_adm .sw_pre:not(.sw_act) { pointer-events: none; } #project_block { background:var(--base-cont-top); padding:0} #project_block .archive {margin:0; padding:10px} .modal__content .project_bl {padding:15px 0} .project_bl .group {padding:12px;border-top:1px solid var(--base-line-primary);margin:0;position:relative;} .project_bl .group:first-child {border-top:none} .project_bl .group:hover {} .project_bl .group .gtitle {font: bold 12px/18px var(--font-base);color: var(--base-txt-secondary);padding: 0 4px 8px 0;white-space:nowrap;overflow:hidden;display: inline-block;letter-spacing: 0.1px;} .project_bl .group .gtitle a { color: var(--base-txt-secondary); } .project_bl .group .gtitle a:hover {color:var(--base-txt-link-minor)} .project_bl .group .item {margin: 0 -12px 1px;padding: 0 12px;} .project_bl .group .item a { display:block; padding: 4px 0 4px 20px; color:var(--base-txt-primary); font: 14px/16px var(--font-base); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; height: 16px; } .project_bl .group .ico_in { margin:-4px 4px -2px -26px; transition:margin 0.3s} .project_bl .drag_do .ico_in, .project_bl .gtitle:hover .ico_in {margin-left:2px} .project_bl .gtitle:hover .ico_in { transition:margin 0.3s ease 0.3s} #sidePanel__wrapper .project_bl .group .item {padding-right:5px} .project_bl .group .proj_color {float:left;width:6px;height: 24px;border-radius:0 4px 4px 0;margin:0 -20px 0 -12px;} .project_bl .group .item:hover .proj_color {width:10px} .project_bl .group .proj_color0:hover {background:var(--menu-item-selected);} .project_bl .group .item_new {background:var(--base-hlt-alt-fresh); border-radius:4px;} .project_bl .group .item a.act {color:var(--base-txt-accent); background:var(--menu-item-selected); border-radius:4px;} .project_bl .group .item a.act.mayact2 {background:var(--menu-item-hover);} .project_bl .group .item a:not(.mayact2).act:before {content:''; float:right; margin:-3px 0; width:20px; height:20px;background: var(--menu-item-selected) url(/assets/img/color/iconset.svg) no-repeat 0 -1240px;} .project_bl .group .item .hot_dot, .item.drag .hot_dot {float:right; margin:0 5px; left:0; width:8px; height:16px} .project_bl .group .waste {} .project_bl .group .item:hover a, .project_bl .group .item.selected a, .project_bl .group .item.selected:hover a {background:var(--menu-item-selected) !important; border-radius:4px; color:var(--base-txt-max) !important} .project_bl .group .item:hover a .tags span.tag {box-shadow: 0 0 0 2px var(--base-hlt-hover);} .project_bl .group .item span.ico_hover { float:left; margin:0 0 0 -20px; padding:0; width:16px; height:12px;display:none} .project_bl .group .item span.ico_fav_p { float:left; margin:-3px -2px -3px -16px} .project_bl .group .item span.ico_new { float:left; margin:-3px -2px -3px -16px; padding:0} .project_bl .group .item span.ico_my_proj, .project_bl .group .item span.ico_notmy_proj { float:left; margin:-3px -2px -3px -20px;} .project_bl .group .item0 a { color:var(--base-txt-tertiary)} .project_bl .group .terms_label_hot, .project_bl .group span.zzz {vertical-align: top;} .project_bl .group .ico_r.ico_plus {display:none;} .project_bl .group:hover .ico_r.ico_plus {display:block; margin:0 0 -20px -100% } #sidePanel__wrapper .project_bl .group {border-top:none; padding:0 12px 24px; position:static;} #sidePanel__wrapper .project_bl .group_notitle .mm_float {display:none !important;} #sidePanel__wrapper .project_bl .group_notitle {padding-top:8px;} #sidePanel__wrapper .input {background: var(--menu-inp-cont);border-color:var(--menu-inp-brd);} #sidePanel__wrapper .input:focus {box-shadow:var(--shadow-brd-focus); border-color:transparent;} #sidePanel__wrapper .project_bl .group .item a {padding:5px 0 5px 25px; margin-left:-10px;} #sidePanel__wrapper .project_bl .group .item .proj_color {margin-left: -22px;} #sidePanel__wrapper .project_bl .group .item span.ico_fav_p, #sidePanel__wrapper .project_bl .group .item span.ico_new { margin-left:-18px;} #sidePanel__wrapper .project_bl .group .item span.ico_my_proj, #sidePanel__wrapper .project_bl .group .item span.ico_notmy_proj { margin-left:-22px;} #sidePanel__wrapper .project_bl .group .item:hover a, #sidePanel__wrapper .project_bl .group .item.selected a, #sidePanel__wrapper .project_bl .group .item.selected:hover a {background: var(--base-cont-mod-top) !important;border-radius: 4px;box-shadow: var(--shadow-brd-hover);color: var(--base-txt-accent) !important;} #sidePanel__wrapper .project_bl .group .item:hover a .tags span.tag {box-shadow: 0 0 0 2px var(--base-cont-mod-top);} .project_bl .group label { float:left; width:auto; position:relative; line-height:120%; padding:2px 5px 2px 28px; } .project_bl .group label input { position:absolute; top:4px; left:8px; margin:0; padding:0; border:none; width:13px; height:13px; } .project_bl .archive { margin:8px -8px -8px -8px} .project_bl .title .ico_r {margin:-5px 0;} .project_bl .title a.m:hover { color:var(--base-txt-primary)} /* -------------------------------------------------------------------------------------------------------------------*/ .last_projects a.proj { color:var(--base-txt-tertiary); font:italic 12px var(--font-base); display:block; padding:5px 25px 5px 20px; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .last_projects a.proj b { color:var(--base-txt-accent); font:bold 13px/16px var(--font-base); margin-right:5px} .last_projects a.proj:hover {} .last_projects a.selected, .last_projects a.selected:hover {background:var(--base-cont-mod-top);border-radius:4px;box-shadow: var(--shadow-brd-hover);} .last_projects a.proj .ico_activity3 {display:none} .last_projects a.selected .ico_activity3, .last_projects a:hover .ico_activity3 {display:block; margin:-2px -20px -2px; opacity:0.5} .last_projects .ico_activity4 {margin:-2px 0} .last_projects .last {height:24px;} /* -------------------------------------------------------------------------------------------------------------------*/ .project_bl_home { background:var(--base-cont-top); margin-bottom:20px} .project_bl_home .text { padding:12px; line-height:140%} .project_bl_home .emptylist { padding:10px 0; font:italic 14px var(--font-base)} .project_bl_home .ico_notmy_proj {display:none} .project_bl_home .item:hover .ico_notmy_proj, .project_bl_home .selected .ico_notmy_proj {display:inline; opacity:1} .project_bl_home .but {float:right;font:11px/14px var(--font-base);color:var(--base-txt-link-minor);display:none;padding:2px 8px;background: var(--base-cont-top) linear-gradient(0deg, var(--menu-item-selected), var(--menu-item-selected));position:relative;margin:-2px 0;} .project_bl_home .but:hover {color:var(--base-txt-link-major)} .project_bl_home .item:hover .but, .project_bl_home .selected .but {display:inline; opacity:1} /* -------------------------------------------------------------------------------------------------------------------*/ .project-topic-textarea.project-topic-textarea { height: 164px; }.projectView { margin-top: 0 !important; height: 630px; --scrollbar-margin-start: 2; --scrollbar-margin-end: 10; } .projectView[data-status="0"] { height: 540px; } .modal__content:has(> .project_archive_line) .modal__content__cap { height: 540px; } .modal__content:has(> .projectView) .modal__content__cap { height: 630px; } div.projectView::-webkit-scrollbar-thumb { border-color: var(--base-cont-mod-low); } .projectView > * { flex-shrink: 0; flex-grow: 0; } .projectView > .membersList { padding-bottom: 4px; } .projectView__group__content.scrollZone .ps__rail-y, .projectView.scrollZone .ps__rail-y { margin-top: 0 !important; } .projectView .projectView__group-task { flex-grow: 0; flex-shrink: 0; flex-basis: calc(100% / 3 - 8px); } .projectView__content { background: var(--base-cont-mod-low); padding: 18px 28px 28px 28px; gap: 16px; height: calc(100% - 46px); } .projectView__head { } .projectView__head ~ .projectView__head { margin-top: -8px; } .projectView__head .space, .projectView__head ws-icon { width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; border-radius: 20px; } .projectView__head .space:hover { background: var(--base-hlt-b-notr-hover); } .projectView__head .space:hover:active { background: var(--base-hlt-b-notr-selected); } .projectView__group { box-shadow: var(--shadow-cont-minor-outline); border-radius: 12px; padding: 8px 16px; background: var(--base-cont-mod-top); } .projectView__group__content .editinfo, .projectView__group__wrapper.projectView__group-info { gap: 4px; font: var(--font-ui-11-micro-reg); color: var(--base-txt-tertiary); margin-top: auto; } .projectView__group__wrapper.projectView__group-info { padding-bottom: 28px; } .projectView__group__content .editinfo { padding: 0 20px 12px 20px; } .projectView[data-type="info"] .projectView__content { padding-bottom: 0; height: calc(100% - 18px); } .projectView__params { padding: 12px 12px 12px 16px; } .projectView__params__item { min-height: 36px; } .projectView__params__item > .in { min-height: 32px; } .projectView__params__item > .in > a[onclick], .projectView__params__item > .in > a[data-modal-url] { width: 100%; display: inline-block; } .projectView__params__item .param { width: 160px; color: var(--base-txt-secondary); padding: 10px 4px; font: var(--font-sp-caption-11-micro-upper-med); text-transform: uppercase; align-self: flex-start; } .projectView__params__item:not([data-key=lead]) .param svg { fill: var(--base-btn-notice-minor); margin: 0; } .projectView__params__item .hoverZone:has(a):hover, .projectView__params__item .hoverZone-hover { background: var(--base-hlt-g-easy); border-radius: 6px; } .projectView__params__item .hoverZone:has(a.primary):hover { cursor: pointer; } .projectView__params__item .hoverZone:not(:hover) .hoverOnly { display: none; } .projectView__params__item[data-key=lead] .param > ws-icon { padding-left: 4px; --icon-color: var(--base-txt-act-minor); --icon-size: 16px; } .projectView__group[onclick] { cursor: pointer; } .projectView__params__item project-assignee img.av_sm, .projectView__params__item project-assignee span.av_sm { transform: scale(1.167); transform-origin: left top; } .projectView__params__item .data { font: var(--font-ui-13-small-med); color: var(--base-txt-primary); border-radius: 4px; padding: 2px 6px; display: inline-flex; align-items: center; align-content: center; width: 100%; gap: inherit; flex-wrap: wrap; } .projectView__params__item .data_place { font: var(--font-ui-13-small-med); color: var(--base-txt-tertiary); border-radius: 4px; padding: 2px 6px; display: flex; align-content: center; align-items: center; overflow: hidden; } .projectView__params__item .data .space, .projectView__params__item .data_place .space, .projectView__params__item .data ws-icon, .projectView__params__item .data_place ws-icon { width: 28px; height: 28px; box-sizing: border-box; border-radius: 14px } .projectView__params__item .data_place ws-icon:last-child { --icon-color: var(--base-txt-secondary); } .projectView__params__item .data .space { display: flex; align-items: center; justify-content: center; } .projectView__params__item project-assignee, .projectView__params__item project-folder { width: 100%; } .projectView__params__item > .hoverZone project-assignee .view { display: none; } .projectView__params__item > .hoverZone:hover project-assignee .view { display: inline; } .projectView__params__item project-assignee ws-icon[name=people] { background: var(--base-cont-mod-low); } .projectView__params__item .data ws-icon:first-child, .projectView__params__item .data_place ws-icon:first-child { --icon-size: 16px; } .projectView__params__item project-stage .data > ws-icon:first-child { --icon-size: 28px; } .projectView__params__item project-folder .data > ws-icon:first-child { --icon-size: 20px; } .projectView__params__item .data_place > .in, .projectView__params__item .data > .in { padding: 0 8px; gap: 4px; } .projectView__params__item .data_place > .in { color: var(--base-txt-secondary) } .projectView__params__item .data > ws-icon { } .projectView__params__item .data > .space ws-icon, .projectView__params__item .data > .space svg { width: 28px; height: 28px; } .projectView__params__item .data > .in b { font-weight: normal; color: var(--base-txt-primary); } .projectView__params__item .data:hover, .projectView__params__item .data_place:hover { } .projectView__params__item.upgrade a .data_place .in { color: var(--base-txt-notice-major); } .projectView__params__item.upgrade a .data_place > ws-icon:first-child { border-color: var(--base-txt-notice-major); } .projectView__params__item.upgrade a .data_place > ws-icon:first-child svg { fill: var(--base-txt-notice-major); } .projectView__params__item project-tags, .projectView__params__item project-stage { font: 12px/22px var(--font-base); color: var(--base-txt-primary); } .projectView__params__item project-tags .data { gap: 4px; padding: 4px 6px; } .projectView__params__item project-tags span.tag, .projectView__params__item project-stage span.tag { background: var(--tag-bg); color: var(--colorize-lbl-txt-primary); border-radius: 14px; height: 20px; font: 11px / 20px var(--font-base); display: flex; align-items: center; padding: 0 4px 0 0; } .projectView__params__item project-tags span.tag:before, .projectView__params__item project-stage span.tag:before { content: ''; float: left; width: 10px; height: 10px; background: var(--tag-color); border-radius: 5px; margin: 5px } .projectView__params__item project-tags span.tag .in, .projectView__params__item project-stage span.tag .in { padding: 0 2px; } .projectView__params__item project-tags > span.stage, .projectView__params__item project-stage > span.stage { border-radius: 4px; } .projectView__params__item [onclick] { cursor: pointer; } .projectView__group .proj_color { width: 48px; height: 48px; box-shadow: -1px 0 var(--base-line-ghost) inset; border-radius: 12px 0 0 12px; display: flex; justify-content: center; align-items: center; } .projectView__group .proj_color0 { background: var(--base-cont-mod-mid); } .projectView__group .proj_color ws-icon { width: 48px; height: 48px; } .projectView__group .proj_color svg { width: 32px; height: 32px; } .projectView__group .setupBlock { margin: 8px 0; } .projectView__group__head > .in { color: var(--base-txt-primary); font: var(--font-ui-14-regular-bold); } .projectView__group-name { padding: 0 8px 0 0; height: 48px; } .projectView__group-topic { padding: 8px; } .projectView__group-topic .projectView__group__head { padding-left: 8px; } .projectView__group-topic .projectView__group__content { padding: 0 24px 12px 8px; } .projectView__group-name > .in { font: bold 16px/20px var(--font-base); padding: 0 12px; } .projectView__group__head > ws-icon { width: 32px; height: 32px; margin: 0 0 0 -10px; } .projectView__group-name .button_place { display: block; height: 100%; box-sizing: border-box; padding-top: 8px; } .projectView__group__head .button_place { display: block; height: 100%; box-sizing: border-box; padding-top: 0; } .projectView__group-users { padding: 8px 8px 8px 16px; } .projectView__group-users .projectView__group__content { padding: 0; } .projectView__group-users .projectView__group__content { gap: 8px; } .projectView__group-users .projectView__group__content .stats { padding: 6px 0; color: var(--base-txt-tertiary); } .projectView__group-costs, .projectView__group-tasks, .projectView__group-costs .projectView__group__content, .projectView__group-tasks .projectView__group__content { padding: 0; } .projectView__group__wrapper { gap: 16px; display: flex; } @media (max-width: 480px) { .projectView__group__wrapper-bars { display: flex; flex-direction: column; } } @media (min-width: 481px) { .projectView__group__wrapper .projectView__group { flex-grow: 1; width: 33%; } .projectView__group__wrapper .projectView__group-costs { flex-grow: 2; width: 66%; } } .projectView__group .page_content.descr { font: var(--font-txt-15-large-reg); color: var(--base-txt-primary); padding: 12px 20px 24px 20px; } .projectView__group .page_content.descr span[style*="background"]{ border-radius: 6px; } .projectView__group-editing { padding: 0; border: none; } .projectView__content.projectNote { gap: 8px; padding-bottom: 18px; height: 580px; } .projectView__content.projectNote .componentTeamAvatars span { cursor: default; } /*.projectView:not(.projectView-chat) .projectView__content.projectDescr {*/ /* height: 580px;*/ /*}*/ .projectView-chat .projectView__content.projectDescr { padding:0 } .projectView-chat .projectView__content.projectDescr .projectView__group__head > .in { padding-left: 8px; } .projectView-chat .projectView__content.projectDescr .projectView__group__content { min-height:20px; padding: 10px 20px; } .projectView .privateNote { color: var(--base-txt-tertiary); } .projectView .adminNote { background: var(--base-cont-mod-low); color: var(--base-txt-tertiary); padding-bottom: 18px; } .note.adminNote { } .projectView .projectNote-user .note { height: 100%; } body.w_keyboard .projectView .projectNote-admin .note { height: 100% !important; } .projectView .note { height: calc(50% - 14px); min-height: 120px; } .projectView .note .note-title { padding: 10px 4px; color: var(--base-txt-primary); font: 600 15px/20px var(--font-base); display: flex; flex-direction: row; } .projectView .note .note-content { height: calc(100% - 50px); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-cont-minor-outline); background: var(--base-cont-mod-top); } .projectView .note .note-content:focus-within { box-shadow: var(--shadow-brd-focus); } .projectView .note .note-title span.loader_sm { width: 8px; height: 8px; position: absolute; margin-left: 12px; } .projectView .note .note-title .loader { margin: 0 3px 0 7px; /* 7px = 4px[hint icon margin-left] + (16px[hint icon size] - 10px[loader size]) / 2 */ display: none; } .projectView .note .note-title ws-icon { margin-left: 4px; } .projectView .note .note-title ws-icon svg { width: 16px; fill: var(--base-txt-tertiary); } .projectView .note textarea { cursor: auto; margin: 16px 2px 16px 14px; padding: 0 10px 0; border: none; width: calc(100% - 16px); resize: none; box-sizing: border-box; color: var(--base-txt-primary); height: calc(100% - 28px); border-radius: 12px; background: var(--base-cont-mod-top); overflow-y: scroll; overflow-x: hidden; font: 15px/22px var(--font-base); } .projectView .note textarea::placeholder { white-space: normal; } .projectView .note .loader_sm { display: none; } .projectView .note textarea::-webkit-resizer { background: transparent; display: none; width: 0; height: 0; } .projectView .note textarea::-moz-placeholder { font: 400 15px/22px var(--font-base); } .projectView .note textarea::-webkit-input-placeholder { font: 400 15px/22px var(--font-base); } .projectView .drag_line { height: 12px; text-align: center; cursor: ns-resize; } .projectView .drag_line ws-icon { height: 8px; } .projectView .drag_line ws-icon svg { fill: var(--base-txt-secondary); } .projectView .setupBlock { box-shadow: none; border: none; } .projectView .setupBlock__item { min-height: 32px; padding-left: 2px; } .projectView .setupBlock__content { padding: 4px 0 0 0; } .projectView .setupBlock__title { padding: 2px 0 2px 4px; } .projectView .setupBlock__title .in { padding: 4px 12px; } .projectView .setupBlock__title ws-icon, .projectView .setupBlock__title ws-icon svg { width: 24px; height: 24px; } .projectView .setupBlock__title .in { font: 600 15px/20px var(--font-base); } .projectView .projectPermissions { padding-bottom: 22px; } .projectView .projectPermissions .projectView__group:hover .setupBlock__title .button_place { display: block; } .projectView .projectPermissions .setupBlock__title .button_place { } .projectView .projectPermissions .setupBlock__title .button_place .in { font: 600 13px/20px var(--font-base); } .projectView__content.projectNote, .projectView__content.projectDescr { flex-grow: 1; flex-shrink: 1; overflow: hidden; } .projectDescr.projectDescr-editing .projectView__group-info { display: none; } .projectDescr .projectView__group { padding: 0; flex-grow: 1; flex-shrink: 1; position: relative; overflow: hidden; } .projectDescr .projectView__group__head { justify-content: space-between; padding: 8px; border-bottom: 1px solid var(--base-line-tertiary); } .projectDescr.projectDescr-editing .projectView__group__head { background: var(--base-cont-mod-top); } .projectView__group__contentEdit form, .projectView__group__contentEdit .commentForm__content { height: 100%; } .projectDescr .projectView__group__contentEdit { flex-shrink: 1; height: 100%; overflow: hidden; } .projectDescr .projectView__group__contentEdit .commentForm__content { display: flex; flex-direction: column; box-shadow: none; border: none; background: var(--base-cont-mod-top); } .projectDescr .editor .placeholder { padding-top: 10px; padding-bottom: 10px; } /* розтягуємо, щоб клік в будь якому місці редактора ставив фокус */ .projectDescr .projectView__group__contentEdit .commentForm__content__editor { flex-grow: 1; .editor__data { height: calc(100% - 40px); box-sizing: border-box; @media (max-width: 480px) { height: calc(100% - 46px); } } } .projectDescr .files_new .fileItem, .projectDescr .attachWrapper .fileItem { background: var(--base-cont-mod-top-elevated); } .projectDescr .projectView__group__contentEdit .editor__toolbar-fixed { background: linear-gradient(0deg, var(--base-cont-mod-top-opac), var(--base-cont-mod-top)); border-radius: 0; } .projectDescr .projectView__group__content .page_files { border-top: 1px solid var(--base-line-tertiary); padding: 12px 20px; } .projectDescr .projectView__btn-edit { margin-left: auto; } .projectDescr .projectView__btn-files-hide { display: none; } @media screen and (max-height: 769px) { .projectNote .drag_line { opacity: 0; pointer-events: none; } .projectDescr .projectView__group__wrapper.projectView__group-info { display: none; } } .projectSettings-labels .projectSettings__item:last-child, .projectSettings-workflow .projectSettings__item:last-child { margin-bottom: 8px; } .projectSettings .projectSettings-workflow, .projectSettings .projectSettings-labels { display: flex; flex-direction: column; } .projectSettings .projectSettings-workflow a { } .projectSettings__item + .projectSettings__item { margin-top: 4px; } .projectSettings.projectSettings-edit .projectSettings-workflow .projectSettings__item { cursor: pointer; } .projectSettings__title { font: var(--font-ui-18-title-2-semi); color: var(--base-txt-accent); } .projectSettings__block { padding: 8px 0; gap: 8px; } .projectSettings__block + div { margin-top: 8px; } .projectSettings__block > .in { gap: 8px; } .projectSettings__button { padding: 4px 12px; border-radius: 6px; color: var(--base-txt-secondary); box-shadow: 0 0 0 1px var(--base-line-secondary); transition: all 0.3s ease; gap: 6px; font: 600 12px/20px var(--font-base); cursor: pointer; background: var(--base-cont-mod-top); } .projectSettings__button svg { fill: var(--base-txt-secondary); } .projectSettings__button:hover { color: var(--base-txt-accent); box-shadow: 0 0 0 1px var(--base-line-accent); } .projectSettings__item { padding: 0 8px 0 12px; border-radius: 12px; background: var(--base-cont-mod-top); box-shadow: var(--shadow-cont-minor-outline); gap: 4px; height: 44px; } .projectSettings__item > .item { gap: 4px; height: 44px; flex-grow: 1; flex-shrink: 1; overflow: hidden; } .projectSettings__item-stage_type { height: unset; background: unset; box-shadow: unset; } .projectSettings__item-small { width: 182px; --icon-color: var( --base-txt-tertiary); color: var(--base-txt-secondary) } .projectSettings__item-small ws-icon { width: 24px; } .projectSettings__item.projectSettings__item-name { padding-left: 0; color: var(--base-txt-muted); } .projectSettings .setupBlock { background: none; margin: 0; padding: 10px 0 32px; } .projectSettings .setupBlock .setupBlock__item .in { flex-grow: 0; } .projectSettings .setupBlock .setupBlock__item ws-icon[name=info_circle-line] svg { fill: var(--base-txt-tertiary); } .projectSettings__item .labels { gap: 4px; overflow: hidden; flex-shrink: 1; border-radius: 6px; padding: 2px; } .projectSettings__item .labels[onclick] { cursor: pointer; } .projectSettings__item .labels[onclick]:hover { background: var(--base-hlt-g-easy); } .projectSettings__item-groupHidden .item > ws-icon:first-child, .projectSettings__item-groupHidden .item > .name > ws-icon:last-child { --icon-color: var(--base-txt-alert-major); } .projectSettings__item .labels .tag { background: var(--tag-bg); color: var(--colorize-lbl-txt-primary); border-radius: 14px; height: 20px; font: 11px / 20px var(--font-base); display: flex; align-items: center; padding: 0 6px 0 2px; margin: 2px 0; } .projectSettings__item .labels + .tag-more { background: var(--tag-bg); color: var(--colorize-lbl-txt-primary); border-radius: 14px; height: 20px; font: 11px / 20px var(--font-base); display: flex; align-items: center; padding: 0 4px; margin: 2px 0; background: var(--base-hlt-g-hover); } .projectSettings__item .labels[onclick]:hover + .tag-more { background: none; } .projectSettings__item .labels .tag:before { content: ''; float: left; width: 10px; height: 10px; background: var(--tag-color); border-radius: 5px; margin: 5px } .projectSettings__item .name { font: var(--font-ui-13-small-semi); width: 142px; flex-shrink: 0; flex-grow: 0; padding-left: 8px; } .projectSettings__item-stage .left_side { width: 190px; gap: 4px; } @media screen and (max-width: 480px) { .projectSettings__item:not(.projectSettings__item-stage) .name { width: 80px; } .projectSettings__item-stage .left_side { width: 158px; } } .projectSettings__item-stage .name { width: unset; flex-shrink: 1; } .projectSettings__item.projectSettings__item-stage.add .name { font: var(--font-ui-13-small-reg); color: var(--base-txt-secondary); width: 140px; } .projectSettings__item.projectSettings__item-stage .ava { padding: 2px; width:24px; } .projectSettings__item.projectSettings__item-stage .ava:has(a >:not(:only-child)) { width: unset; &> .data { display: flex; gap: 4px; padding: 0 6px; height: 24px; border-radius: 8px; box-shadow: 0 0 0 1px var(--base-line-secondary) inset; justify-items: center; align-items: center; &:hover { background: var(--base-hlt-g-hover); } > * { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transform: unset; } .av_svg { border: unset; } .tag { --icon-size: 16px; } } } .projectSettings__item.projectSettings__item-stage .ava:has(ws-icon[name=none]) { display: none; } @media screen and (min-width: 481px) { .projectSettings__item.projectSettings__item-stage > ws-btn:not(.menu_open), .projectSettings__item > .item > ws-btn:not(.menu_open) { opacity: 0; transition: opacity 0.2s ease-in-out; } .projectSettings__item.projectSettings__item-stage:hover > ws-btn, .projectSettings__item:hover > .item > ws-btn { opacity: 1 !important; } } .projectSettings__item .ava ws-icon[name=person] { --icon-color: var(--base-txt-muted); --icon-size:16px; border: 1px dashed var(--base-txt-muted); width:24px; height: 24px; border-radius:12px; box-sizing: border-box } .projectSettings__item > .item tags-group-icon ws-icon, .projectSettings__item > .item > ws-icon:first-child, .projectSettings__item > ws-icon:first-child, .projectSettings__item > ws-icon.tag, .projectSettings__item > .left_side > ws-icon:first-child, .projectSettings__item > .left_side > ws-icon.tag, .projectSettings__item > form ws-icon { width: 28px; height: 28px; --icon-size:24px; } .projectSettings__item > form { width: 100%; padding: 0 !important; gap: 6px; } .projectSettings__item > form .sw_pre { padding-right: 12px; } .projectSettings__item > form .sw_pre .when_act { opacity: 0; transition: opacity 0.2s ease-in-out; } .projectSettings__item > form .sw_pre.sw_act .when_act { opacity: 1; } .projectSettings__item > form .sw_pre:not(.sw_act) .in { color: var(--base-txt-tertiary); } .projectSettings__item > form input.in { background: none; border: none; padding: 0 6px; font: var(--font-ui-13-small-semi); min-width: 0; } .projectSettings__item > form + .item { display: none; } .projectSettings__item.add > ws-icon:first-child { --icon-size: 16px; --icon-color: var(--base-txt-secondary); } .projectSettings__item:not(.projectSettings__item-off) > .left_side > ws-icon[name=eye-close] { display: none; } .projectSettings__item-off > .left_side > ws-icon.tag { display: none; } .projectSettings__item-off { background: var(--base-cont-mod-mid); color: var(--base-txt-tertiary); } .projectSettings__item-off .ava, .projectSettings__item-off .nextStage, .projectSettings__item-off .terms_text, .projectSettings__item-off .div { opacity: 0 !important; pointer-events: none !important; } .projectSettings__item:not(.projectSettings__item-off) ws-btn[name*=show] { display: none; } .projectSettings__item-off ws-btn[name*=more] { display: none; } .projectSettings__item ws-icon[name=eye-close] { --icon-color: var(--base-txt-tertiary); --icon-size: 20px; } .projectSettings__item .nextStage { gap: 4px; margin-right: auto; } .projectSettings__item .nextStage:not(.nextStage-active) * { display:none } .projectSettings__item .nextStage > ws-icon { --icon-size:16px; --icon-color: var(--base-txt-tertiary); } .projectSettings__item > .div, .projectSettings__item > .item > .div { height:28px; background:var(--base-line-tertiary); width:1px; margin:0 2px 0 4px; } @media screen and (max-width: 374px) { .projectSettings__item .name { padding-left: 4px; } .projectSettings__item, .projectSettings__item-stage .left_side, .projectSettings__item .nextStage { gap: 2px; } } @media screen and (max-width: 379px) { .projectSettings__item .terms_text { display: flex; justify-content: center; flex-shrink: 1; min-width: 0; } } /*.projectSettings__item .nextStage .data {*/ /* box-shadow: 0 0 0 1px var(--base-line-ghost);*/ /* border-radius:4px;*/ /* color: var(--base-txt-primary);*/ /* font: var(--font-ui-12-mini-reg);*/ /*}*/ /*.projectSettings__item .nextStage .data ws-icon {*/ /* --icon-size:16px;*/ /*}*/ /*.projectSettings__item .nextStage .data ws-icon.tag {*/ /* width:24px;*/ /*}*/ /*.projectSettings__item .nextStage .data .delete {*/ /*}*/ /*.projectSettings__item .nextStage .data .div {*/ /* height:12px;*/ /* background:var(--base-line-tertiary);*/ /* width:1px;*/ /* margin:0 2px;*/ /*}*/ .projectSettings-assignee { padding-bottom: 50px; } .projectSettings-assignee [data-container=assignee] button ws-icon[name=person], .projectSettings-assignee [data-container=assignee] button ws-icon[name=people] { box-sizing: border-box; padding: 2px; border: none; width: 20px; height: 20px; } .projectSettings-assignee [data-container=assignee][data-empty="1"] button:last-child { display: none; } .projectSettings .divider { display: block; border-bottom: 1px solid var(--base-line-tertiary); width: 100%; } .projectDescr .page_content.descr .button-place { display: flex; justify-content: center; } .projectDescr.projectDescr-empty .projectView__group:not(.projectView__group-editing) .projectView__group__head { display: none !important; } .projectDescr.projectDescr-editing .projectView__group.projectView__group-editing { height: 100%; } .projectDescr.projectDescr-empty .projectView__group { background: var(--base-cont-mod-mid); } .projectDescr .projectView__group__content.scrollZone-top, .projectDescr .projectView__group__content.scrollZone-bottom, .projectDescr .attachWrapper.scrollZone-bottom { box-shadow: none !important; } .projectView__group.projectView__group-editing .projectView__group__content { display: none; } .projectDescr .page_content.descr.hiddenBlock + .page_files { border-top: none; padding-top: 20px; } .projectDescr .projectView__group__head .button_place, .projectDescr .projectView__group__head .place_button { gap: 8px; } @media screen and (max-width:480px) { .projectView__group-topic .projectView__group__content { padding-right: 12px; } .projectView__content { padding: 18px 12px; } .projectView .membersList__menu, .projectView .membersList__group { padding-left: 12px; padding-right: 12px; } .projectView__params { overflow: hidden; } .projectView__params__item { overflow: hidden; } .projectView__params__item .param { width: 104px; } .projectView__params__item > .in { width: calc(100% - 128px); } .projectView__params__item project-term .data { flex-wrap: nowrap; } .projectView__params__item-tags .param { align-self: flex-start; padding-top: 10px; } .projectView__params__item-tags .data { flex-wrap: wrap; padding: 6px; } .projectView__params__item project-assignee ws-btn[right-icon*=contact] span { display: none; } .projectView__params__item project-tags { height: auto; } .projectView__params__item project-tags .data { gap: 2px; } .projectView__params__item project-tags span.tag { padding: 0 8px 0 4px; height: 20px; } .projectDescr .projectView__group { height: 100%; } .projectDescr .projectView__group-info { display: none; } .projectView .membersList__subGroup { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .projectView .membersList__user .name .online_dt, .projectView .membersList__user .role .title { display: none; } .projectView .membersList__spacer { height: 48px; } } @media screen and (max-width: 480px) { .projectView__group-users ws-btn[right-icon=person_add] span { display: none; } } @media screen and (max-width: 414px) { .projectDescr .fileItem { flex-basis: 100%; } } @media screen and (max-width: 480px) { .projectView__group-users .projectView__group__content .stats { display: none; } } @media (hover: none) { .projectView__params__item > .hoverZone project-assignee .view { display: inline; } } .projectDescr .page_content.descr .empty_place { padding: 50px 20px; align-items: center; gap: 12px; } .projectDescr .page_content.descr .text_place { color: var(--base-txt-tertiary); font-style: italic; text-align: center; } .project_archive_line { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; background: var(--projcond-archive-bg); color: var(--projcond-archive-txt); font: var(--font-ui-12-mini-reg); padding: 8px 16px; height: 28px; } .project_archive_line .in:only-child { margin: 0 auto; } .project_archive_line .in ws-icon svg { --icon-color: var(--projcond-archive-txt); } .modal__content .project_archive_line { padding: 8px 16px 8px 24px; } @media screen and (max-width: 419px) { .modal__headerMenu__more { flex-shrink: 1; min-width: 36px; /* 28px[icon] + 8px[padding-inline] */ .btn span:not([class]) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } } } @media screen and (max-width: 369px) { .modal__headerMenu__more .btn span:not([class]) { display: none !important; } } @media screen and (max-width: 480px) { .projectView { flex-grow: 1; height: unset !important; padding-bottom: var(--app-sa-bot) !important; } .projectView__content { flex-grow: 1; height: unset !important; } .projectView__content > .projectDescr { flex-grow: 1; height: unset !important; } } .projectDescr.flex_column.flex_grow.flex_shrink { min-height: 0; } .projectView.projectView-chat[data-type=about] { height: 400px; } .modal[data-view-chat] .modal__content .modal__content__cap[data-type=about] { height: 400px; }#queueView__contentScrollOut { overflow: hidden; } @media (min-width: 481px) { .queueView__wrapper { position: fixed; bottom: -100%; right: 20px; z-index: 1020; background: var(--base-cont-mod-low); width: 416px; max-height: 100%; box-shadow: var(--shadow-tray-major); border-radius: 12px 12px 0 0; transition: all 0.3s ease; } .queueView__wrapper-active { bottom: 0 } .queueView__wrapper.top-layer { z-index: 1021; } .queueView { min-height: 352px; max-height: 65vh; } .queueList { margin: -8px -24px; padding: 8px 24px; height: 100%; box-sizing: border-box; } } @media (max-width: 480px) { .queueView__wrapper { display: none; } body.mobileQueueView main { display: none; } body.mobileQueueView .queueView__wrapper { display: block; --layer: 0; --zIndex: 1021; z-index: calc(var(--zIndex) + var(--layer)); position: fixed; background: var(--base-cont-top); inset: 0 0 var(--footerMobile-height) 0; } } .queueView__head { padding: 6px; height: 44px; box-sizing: border-box; } .queueView__head ws-btn, .queueView__head > ws-icon { padding: 2px; } .queueView__head .space, .queueView__head ws-icon { width: 28px; height: 28px; display: flex; justify-content: center; align-items: center; border-radius: 4px; fill: var(--colors-graphite-700); font: 14px/20px var(--font-base); font-weight: 400; } .queueView__head .space ~ .space { margin-left:4px; } .queueView__head .space ws-icon svg { width: 16px; height: 16px; } .queueView__head .minimize { /*cursor: zoom-out;*/ } .queueView__head .space:hover { background: var(--colors-alpha-dark-05); } .queueView__head .space:hover:active { background: var(--colors-alpha-dark-10); } .queueView__head > .in { padding: 2px; font: var(--font-ui-16-title-3-semi); color: var(--base-txt-primary); } .queueView__head .loader_sm { display: none; border: 1px solid var(--colors-graphite-700); border-left-color: transparent; width: 12px; height: 12px } .queueView__content { padding: 8px 24px; min-height: 286px; } .queueList__item { font: 12px/20px var(--font-base); color: var(--base-txt-primary); min-height: 32px; display: flex; align-items: center; padding: 4px 6px; background: var(--base-cont-mod-top); margin: 0 0 4px; box-shadow: var(--shadow-cont-minor-outline); border-radius: 12px; position: relative; } .queueList__item + .queueList__item { margin-top: 4px; } .queueList__item.done { } .queueList__item.queue_error { } .queueList__item__content { min-height:16px; line-height:16px; padding: 0 6px; flex-shrink: 1; flex-grow: 1; } .queueList__item .text { margin-right: 10px; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 40px); vertical-align: bottom; font: var(--font-ui-11-micro-med); } .queueList__item.process { /* background: var(--queue-bg); */ } .queueList__item { .queueList__item__icon { --icon-color: var(--base-hlt-b-invert-major); width: 32px; height: 32px; flex-shrink: 0; ws-icon {width: 32px;height: 32px;--icon-size: 18px;} .loader_sm { border-width: 1px; width: 16px; height: 16px; margin: 7px; border-color: var(--base-hlt-b-invert-major) var(--base-hlt-b-invert-major) var(--base-hlt-b-invert-major) var(--trans) } } .queueList__item__action { padding-right: 2px; } .queueList__item__result { padding-right: 2px; } .queueList__item__result + .queueList__item__action { margin-left: 4px; } } .queueList__item.canceled .queueList__item__icon { --icon-color: var(--base-txt-notice-major); } .queueList__item.canceling .queueList__item__icon .loader_sm { border-color: var(--base-txt-notice-major) var(--trans) var(--trans) var(--trans); animation: loader 0.8s infinite linear reverse; } .queueList__item.queue_error .queueList__item__icon { --icon-color: var(--base-txt-alert-major); } .queueList__item.done .queueList__item__icon { --icon-color: var(--base-txt-btn-c); } .queueList__item.canceling .progress { opacity: 0.65; } .queueList__item progress-bar { display: block; margin-top: 2px; .progress { height: 4px; border-radius: 10px; background: var(--base-hlt-b-invert-major); overflow: hidden; border: 1px solid var(--base-hlt-b-invert-major); width: auto; div { background: var(--white-primary); border-radius: 4px; height: 8px; overflow: hidden; } div:before { content: ''; display: block; height: 24px; background: repeating-linear-gradient(-45deg, var(--base-hlt-b-notr-selected), var(--base-hlt-b-notr-selected) 8px, var(--white-secondary) 8px, var(--white-secondary) 16px); animation: linear bg_move_ani 1000ms infinite; -webkit-animation: linear bg_move_ani 1000ms infinite; box-shadow: 0 3px 3px var(--white-secondary) inset; border-radius: 4px; } } } .queueList__item progress-bar[real="0"] { opacity: 0.5; } @keyframes bg_move_ani { from { background-position: 0 0; } to { background-position: 0 24px; } } @-webkit-keyframes bg_move_ani { from { background-position: 0 0; } to { background-position: 0 24px; } } @media (max-width: 480px) { .queueView { min-height: unset; max-height: unset; height: 100%; overflow: hidden; } .queueView__content { padding: 20px; min-height: unset; } .queueList { margin: -20px; padding: 20px; } } .task_quick_add { height: 40px; background: var(--base-hlt-alt-overlap); border-bottom: 1px solid var(--base-surf-top); display: none; } .task_quick_add form { display: none; padding: 0 140px 0 2px; height: 40px; } .task_quick_add.begin { display: block } .task_quick_add.begin form { display: block } .task_quick_add.begin a.begin { display: none } .task_quick_add .wysiwyg { float: right; padding: 5px; margin: 5px -70px 0 0; display: none } .task_quick_add .wysiwyg .ico_r { margin: 0; } .task_quick_add ws-btn { float: right; margin: 8px -65px 0 0; } .task_quick_add input.input { background: transparent; font: 14px/20px var(--font-base); margin: 0; padding: 10px 18px; width: 100%; border: none; border-radius: 0; } .task_quick_add .av_place { float: right; margin: 8px -130px 0 0 } .task_quick_add .priorb { float: right; margin: 12px -94px 0 0; font: 11px/16px var(--font-base); height: 16px; width: 22px; } .task_quick_add.focused .wysiwyg { display: block; } .task_quick_add.focused ws-btn { display: none; } #listing .task_quick_add { height: 36px; overflow: hidden; box-shadow: 0 0.5px var(--base-surf-top) inset; border-bottom: 1px solid var(--base-surf-top); /* background: var(--base-cont-low); */ } #listing .task_quick_add form { display: block; /* margin:-2px 0; */ } #listing .task_quick_add .priorb { margin-right: -124px; border-radius: 5px; } #listing .task_quick_add .av_place { margin-right: -96px; border-radius: 3px; } /* -------------------------------------------------------------------------------------------------------------------*/ .project_search { padding: 5px 32px 10px 20px; margin: 0 0 6px 0; height: auto; transition: height 0.3s ease; -webkit-transition: height 0.3s ease; position: relative } .search_started .ico_user { display: none } .project_search .ico_delete { display: none; margin: 0 !important; position: absolute; right: 25px; top: 10px; z-index: 1010 } .search_started .ico_delete { display: inline-block } .project_search .loader_sm { display: none; position: absolute; right: 25px; top: 10px; z-index: 1010 } .search_loading .loader_sm { display: inline-block; } .search_loading .ico_delete { display: none; } .search_started.project_search_wico .ico_delete, .project_search_wico .loader_sm { right: 45px; } .project_search input[type=submit] { width: 0; height: 0; padding: 0; border: none; overflow: hidden; visibility: hidden } .project_search_wico { padding: 5px 52px 10px 20px; margin-right: 7px; } .project_search_wico .ico_r { right: 10px; top: 10px; position: absolute } .project_search_wico .ico_r.ico_svg30 { right: 5px; top: 5px; } .project_search_wico .ico_r.ico_svg30.selected { background-color: var(--menu-item-selected); border-radius: 4px } .project_search_wico .ava { float: right; margin: -1px -46px 0 0; width: 24px; height: 24px; border: 1px solid var(--menu-item-selected); border-radius: 4px; padding: 2px; } .project_search_wico .ava .av_sm { border-radius: 0 } .project_search_wico .ico_blue { background-color: var(--menu-item-selected) !important; padding: 5px; border-radius: 4px; top: 5px; right: 5px; } .project_search_wico a.ico_vt0, .project_search_wico a.ico_vt1 { margin: 0 -42px 0 0 } .project_search input { width: 100%; padding: 2px 5px; height: 24px; font: 16px/20px var(--font-base); border-radius: 4px; } .project_search input::placeholder { font: 13px/24px var(--font-base); } .project_search input::-moz-placeholder { font: 13px/24px var(--font-base); } .project_search input::-webkit-input-placeholder { font: 13px/24px var(--font-base); } .project_search input:focus { box-shadow: var(--shadow-brd-focus); border-color: transparent; outline: none } .project_search a.a_sort { position: absolute; right: 20px; top: 5px; font: 11px/26px var(--font-base); padding: 2px 8px; border-radius: 0 4px 4px 0; } .search_started a.a_sort { display: none; } .project_search_wico a.a_sort { right: 40px; } .project_search a.a_sort { color: var(--base-txt-primary); } .project_search a.a_sort:hover { color: var(--base-txt-link-minor) } .quick_search:not(.quick_search-modal) { padding: 10px 22px 10px 10px } .quick_search:not(.quick_search-modal) input { width: 100%; padding: 1px 5px; height: 24px; font: 13px/20px var(--font-base); } .quick_search:not(.quick_search-modal) input:focus { box-shadow: var(--shadow-brd-focus); border-color: transparent; outline: none } .quick_search:not(.quick_search-modal) input.empty { font-style: italic } .modal__header > .in .quick_search:not(.quick_search-modal) { float: right; margin: -4px 0 -4px auto; height: 28px; padding: 0 } .modal__header > .in .quick_search_l { float: left; } .modal__header > .in .quick_search_l ~ font.vs_search { float: right; } .modal__header > .in .quick_search:not(.quick_search-modal) input { width: 150px; height: 20px; font: 13px/20px var(--font-base); padding: 4px 10px; border-radius: 16px; background: var(--base-cont-mod-mid); } .modal__header > .in .quick_search:not(.quick_search-modal) input:focus { background: var(--inp-cont-top); box-shadow: var(--shadow-brd-focus); border-color: transparent; outline: none } .modal__content .quick_search:not(.quick_search-modal) { padding: 20px 32px 20px 20px; } .quick_search-modal {float: right;margin: 0 4px;} .vs_search { white-space: nowrap; padding: 8px 0; display: inline-block; } /* -------------------------------------------------------------------------------------------------------------------*/ #float_edit_inline { position: absolute; left: -5px; top: -10px; right: -5px; background: var(--menu-cont-top); z-index: 1005; padding: 16px; box-shadow: var(--shadow-cont-major); border-radius: 5px; display: none; text-align: left; } body[data-page=account] #float_edit_inline { max-width: 350px } @media (min-width: 481px) { .listing_actions #float_edit_inline { width:350px; left: 50%; margin: 0 0 0 -195px; } } .task #float_edit_inline { top: -6px; } #float_edit_inline input.inputmain { width: 100%; padding: 0 64px 0 9px; font: 24px/48px var(--font-base) !important; background: var(--menu-inp-cont); border: none; box-sizing: border-box; height: 48px; } #float_edit_inline input.inputmain:focus { box-shadow: none } body[data-page=account] #float_edit_inline input.inputmain { padding-left: 4px } #float_edit_inline .wlabel { padding: 8px 0 0; } #float_edit_inline .notify_block { margin: 8px; } #float_edit_inline .notify_block .ico_l { } #float_edit_inline .ico_delete { margin: -30px 0; float: right; } #float_edit_inline .ico_gpriv { position: absolute; right: 16px; bottom: 16px; display: none !important; } #float_edit_inline span.esc { margin: -30px 25px 0 0; float: right; color: var(--base-txt-tertiary); cursor: pointer; } #float_edit_inline ws-btn { float: right; margin: 0 0 0 -70px; width: 64px; height: 48px; box-sizing: border-box; position: relative; border-radius: 8px; } .floatEditAppended { opacity: 0; } /* -------------------------------------------------------------------------------------------------------------------*/ #form_edit_inline { display: inline-block; background: var(--base-cont-mod-top); box-shadow: var(--shadow-cont-minor); border-radius: 5px; padding: 8px 16px; height: 48px; position: fixed; z-index: 20000; margin: -26px -70px; } #form_edit_inline .wico { padding-left: 46px; } #form_edit_inline .wico .ico_l { margin: 8px 0 8px -40px; } #form_edit_inline input.inputmain { padding: 2px 64px 2px 5px; height: 48px; border-width: 0 !important; box-shadow: none; } #form_edit_inline ws-btn { position: absolute; right: 8px; top: 8px; height: 48px; width: 64px; } #form_edit_inline .menu__group-quick ws-btn { position: relative; right: 0; top: 0; height: initial; width: initial; } #form_edit_inline.frm_menu { margin: 0; height: initial; padding: 0; border-radius: 12px; } /* -------------------------------------------------------------------------------------------------------------------*/ .project_search .ev_tabs { background: var(--base-cont-mod-mid); height: 30px; border: 1px solid var(--base-line-secondary); border-radius: 4px; overflow: hidden; margin: 0 -12px -2px 0 } .project_search .ev_tabs a { font: 12px/20px var(--font-base); float: left; width: 50%; text-align: center; padding: 5px 0; color: var(--base-txt-tertiary) } .project_search .ev_tabs a:hover { color: var(--base-txt-secondary) } .project_search .ev_tabs a font { white-space: nowrap; display: inline-block; max-width: 120px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom } .project_search .ev_tabs a span.ico_l { float: right; margin: 0 15px 0 -40px; opacity: 0.5 } .project_search .ev_tabs a.act span.ico_l { opacity: 1 } .project_search .ev_tabs a.act { background: var(--base-cont-mod-top); color: var(--base-txt-primary); font-weight: 500; box-shadow: 0 0 2px var(--base-cont-mod-trans-low); position: relative; } .rightPanel__header { margin-bottom: 4px; margin-top: 4px; display: flex; align-items: center; justify-content: space-between; padding-left: 16px; padding-right: 16px; } .rightPanel__title { color: var(--base-txt-accent); font-size: 22px; font-style: normal; font-weight: 590; line-height: 28px; display: flex; align-items: center; padding: 0 4px; } .rightPanel__title .sw_pre { gap: 12px; } .rightPanel__title .sw { margin-left: 15px; } .rightPanel__close ws-btn { width: 32px; } .rightPanel .searchInput { margin: 12px 20px 8px; height: 36px; background: var(--base-cont-mod-mid); border-radius: 18px; } .rightPanel .searchInput:focus-within { background: var(--base-cont-mod-input) !important; } .rightPanel .searchInput .in.search_started a.delete { display: flex; height: 20px; min-width: 16px; padding: 0 4px; justify-content: center; align-items: center; gap: 10px; border-radius: 12px; border: 1px solid var(--base-txt-muted); overflow: hidden; color: var(--base-txt-tertiary); text-align: center; text-overflow: ellipsis; font-size: 12px; font-style: normal; font-weight: 400; margin-right: 8px; } .rightPanel__list { gap: 24px; padding: 12px 16px 36px; } .rightPanel__list__group-hidden { display: none; } .rightPanel__list__group__title { padding: 8px; border-bottom: 1px solid var(--base-line-secondary); font: var(--font-ui-18-title-2-bold); color: var(--base-txt-accent); } .rightPanel__list__item { gap: 8px; padding: 10px 8px; border-bottom: 1px solid var(--base-line-secondary); font: var(--font-ui-15-large-med); color: var(--base-txt-primary); } .rightPanel__list__item-off, .rightPanel__list__item-disabled { color: var(--base-txt-muted); } .rightPanel .rightPanel__list__item-hidden { display: none; } .rightPanel .rightPanel__list__item-off .in, .rightPanel .rightPanel__list__item-disabled .in { color: var(--base-txt-muted); } .rightPanel__list__item .hotKey { gap: 4px; } .rightPanel__list__item .hotKey .key { margin-right: 0; padding: 2px 6px; border-radius: 5px; border: 1px solid var(--base-txt-primary); box-shadow: 0 2px 0 0 var(--base-txt-primary); background: var(--base-hlt-notr-hover); font: var(--font-ui-14-regular-reg); color: var(--base-txt-accent); translate: 0 -1px; transform: perspective(3em) rotateX(15deg) scale(0.9); } .rightPanel__list__item .hotKey-off .key, .rightPanel__list__item .hotKey-disabled .key { border: 1px solid var(--base-txt-muted); box-shadow: 0 2px 0 0 var(--base-txt-muted); background: var(--base-hlt-g-notr-selected); color: var(--base-txt-tertiary); } .rightPanel__list__item .hotKey .text { padding: 0 4px; font: var(--font-ui-13-small-reg); color: var(--base-txt-secondary); } .rightPanel__list__item-clickable .in { color: var(--base-txt-act-major); text-decoration: underline; text-decoration-skip-ink: none; text-underline-offset: 2px; cursor: pointer; } .rightPanel__list__item-disabled ws-icon[name^=award] { --icon-color: var(--base-btn-notice-major); } .rightPanel__overlay { position: fixed; pointer-events: auto; background-color: var(--colors-alpha-dark-20); left: 0; top: 0; right: 0; bottom: 0; z-index: 1020; display: none; } body.rightPanelOverlay .rightPanel__overlay { display: block; } .rightPanel__empty { min-height: 304px; width: 100%; background-image: url(/assets/img/color/no_recent_items_light.svg); background-repeat: no-repeat; background-position: center bottom; text-align: center; padding-top: 32px; font: var(--font-ui-15-large-med); color: var(--base-txt-secondary); display: none; } .rightPanel__wrapper[data-type=hotkey] { .rightPanel__list__group__title .sw_pre { display: none; } } .withRipple { --ripple-color: var(--base-hlt-g-hover); position: relative; -webkit-tap-highlight-color: transparent; } .ripple-container { position: relative; } .ripple-host { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; z-index: 0; } .ripple-circle { position: absolute; border-radius: 50%; background: var(--ripple-color); transform: scale(0); transition: transform var(--ripple-duration, 225ms) ease-out, opacity var(--ripple-duration, 225ms) ease-out; pointer-events: none; }span.ico_notify { background: url(/assets/img/color/separators_iconset.svg) no-repeat 0 -150px; width: 30px; height: 30px; margin: -5px 0 } span.ico_newtask_big { background: url(/assets/img/color/separators_iconset.svg) no-repeat -90px -300px; width: 30px; height: 30px } span.ico_logo { background: url(/assets/img/color/separators_iconset.svg) no-repeat 0 -690px; width: 30px; height: 30px } span.ico_work { background: url(/assets/img/color/separators_iconset.svg) no-repeat 0 -420px; width: 30px; height: 30px } span.ico_personal { background: url(/assets/img/color/separators_iconset.svg) no-repeat 0 -450px; width: 30px; height: 30px } a:hover span.ico_logo, span.ico_logo_color { background: url(/assets/img/color/separators_iconset.svg) no-repeat 0 -660px; width: 30px; height: 30px } span.ico_group { background: url(/assets/img/color/separators_iconset.svg) no-repeat 0 0; width: 30px; height: 30px; font: 25px/25px var(--font-base) !important } span.ico_group_my { background: url(/assets/img/color/separators_iconset.svg) no-repeat 0 -60px; width: 30px; height: 30px; font: 25px/25px var(--font-base) !important } span.ico_group_sub { background: url(/assets/img/color/separators_iconset.svg) no-repeat -60px 0; width: 30px; height: 30px; font: 24px var(--font-base) !important } span.ico_setup { background: url(/assets/img/color/separators_iconset.svg) no-repeat -30px 0; width: 30px; height: 30px; font: 25px/25px var(--font-base) !important } span.ico_project_big { background: url(/assets/img/color/separators_iconset.svg) no-repeat -90px -120px; width: 30px; height: 30px; font: 25px/25px var(--font-base) !important } span.ico_invite_big { background: url(/assets/img/color/separators_iconset.svg) no-repeat -60px -150px; width: 30px; height: 30px; font: 25px/25px var(--font-base) !important } span.ico_send_big { background: url(/assets/img/color/separators_iconset.svg) no-repeat -90px -150px; width: 30px; height: 30px; font: 25px/25px var(--font-base) !important } i.ico_cal_sf, a:hover i.ico_cal_sf, a.act i.ico_cal_sf { background: url(/assets/img/color/separators_iconset.svg) no-repeat -120px -480px; width: 30px; height: 30px; opacity: 1 } i.ico_cal_f, a:hover i.ico_cal_f, a.act i.ico_cal_f, span.ico_calendar_big { background: url(/assets/img/color/separators_iconset.svg) no-repeat -90px -480px; width: 30px; height: 30px; opacity: 1 } i.ico_cal_no, a:hover i.ico_cal_no, a.act i.ico_cal_no { background: url(/assets/img/color/separators_iconset.svg) no-repeat 0 -480px; width: 30px; height: 30px; opacity: 1 } a i.ico_cal_sf { background: url(/assets/img/color/separators_iconset.svg) no-repeat -120px -510px; opacity: 0.5 } a i.ico_cal_f { background: url(/assets/img/color/separators_iconset.svg) no-repeat -90px -510px; opacity: 0.5 } a i.ico_cal_no { background: url(/assets/img/color/separators_iconset.svg) no-repeat 0 -510px; opacity: 0.5 } i.ico_cals_sf, a:hover i.ico_cals_sf, a.act i.ico_cals_sf { background: url(/assets/img/color/separators_iconset.svg) no-repeat -120px -540px; width: 30px; height: 30px; opacity: 1 } i.ico_cals_f, a:hover i.ico_cals_f, a.act i.ico_cals_f { background: url(/assets/img/color/separators_iconset.svg) no-repeat -90px -540px; width: 30px; height: 30px; opacity: 1 } i.ico_cals_no, a:hover i.ico_cals_no, a.act i.ico_cals_no { background: url(/assets/img/color/separators_iconset.svg) no-repeat 0 -570px; width: 30px; height: 30px; opacity: 1 } a i.ico_cals_sf { background: url(/assets/img/color/separators_iconset.svg) no-repeat -120px -570px; opacity: 0.5 } a i.ico_cals_f { background: url(/assets/img/color/separators_iconset.svg) no-repeat -90px -570px; opacity: 0.5 } a i.ico_cals_no { background: url(/assets/img/color/separators_iconset.svg) no-repeat 0 -570px; opacity: 0.5 } span.ico_labels2 { background: url(/assets/img/color/separators_iconset.svg) no-repeat -5px -604px; height: 21px } span.ico_labels_mid, span.ico_tags { background: url(/assets/img/color/separators_iconset.svg) no-repeat 0 -600px; width: 30px; height: 30px; transform: scale(1.2) } span.ico_activate { background: url(/assets/img/color/separators_iconset.svg) 0 -90px; width: 30px; height: 30px; } span.favs2, span.ico_import_fixed { float: left; width: 30px; height: 30px; background: url(/assets/img/color/separators_iconset.svg) -60px -60px; margin: -5px 10px -5px 0 } a:hover span.favs2 { background: url(/assets/img/color/separators_iconset.svg) -30px -60px } .unseen_big { background: url(/assets/img/color/separators_iconset.svg) no-repeat -120px -150px; float: left; width: 30px; height: 30px } .seen_big { background: url(/assets/img/color/separators_iconset.svg) no-repeat -90px -150px; float: left; width: 30px; height: 30px } .time_big { background: url(/assets/img/color/separators_iconset.svg) no-repeat -90px -30px; float: left; width: 30px; height: 30px } .close_big { background: url(/assets/img/color/separators_iconset.svg) no-repeat -60px -210px; float: left; width: 30px; height: 30px } .reopen_big { background: url(/assets/img/color/separators_iconset.svg) no-repeat -90px -210px; float: left; width: 30px; height: 30px } span.ico_close_big { background: url(/assets/img/color/separators_iconset.svg) no-repeat -60px -210px; width: 30px; height: 30px } span.ico_reopen_big { background: url(/assets/img/color/separators_iconset.svg) no-repeat -90px -210px; width: 30px; height: 30px } span.ico_done_big { background: url(/assets/img/color/separators_iconset.svg) no-repeat -60px -180px; width: 30px; height: 30px } span.ico_folder_big { background: url(/assets/img/color/separators_iconset.svg) no-repeat 0 -30px; width: 30px; height: 30px } span.ico_folder_big_company { background: url(/assets/img/color/separators_iconset.svg) no-repeat -60px -30px; width: 30px; height: 30px } span.ico_folder_big_company_my { background: url(/assets/img/color/separators_iconset.svg) no-repeat -30px -0; width: 30px; height: 30px } .ico_archive2 { background: var(--projcond-archive-bg) url(/assets/img/color/separators_iconset.svg) no-repeat -60px -90px; width: 30px !important; height: 30px !important; } .download_zip { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; height: 48px; width: 32px; padding: 8px; border-radius: 8px; box-shadow: var(--shadow-cont-minor-outline); background: var(--base-cont-top); } .download_zip .in { padding: 2px; font: var(--font-ui-13-small-semi); color: var(--base-txt-tertiary); } .download_zip:hover .in { animation: zipUpDown .3s ease-in-out; } @keyframes zipUpDown { 0% { transform: translateY(0); } 50% { transform: translateY(2px); } 100% { transform: translateY(0); } } .download_zip ws-icon { width: 16px; height: 16px; --icon-color: var(--base-txt-tertiary); } .help_menu .ico_help1 { background: url(/assets/img/color/separators_iconset.svg) no-repeat -30px -300px } .help_menu .ico_help2 { background: url(/assets/img/color/separators_iconset.svg) no-repeat 0 -300px } .help_menu .ico_help3 { background: url(/assets/img/color/separators_iconset.svg) no-repeat -60px -300px } .help_menu .ico_help4 { background: url(/assets/img/color/separators_iconset.svg) no-repeat -90px -300px } .help_menu .ico_help5 { background: url(/assets/img/color/separators_iconset.svg) no-repeat -120px -300px } .help_support .ico_help6, .help_menu .ico_help6, .help_link .ico_help6 { background: url(/assets/img/color/separators_iconset.svg) no-repeat -90px -240px } .help_menu a:hover .ico_help1 { background: url(/assets/img/color/separators_iconset.svg) no-repeat -30px -330px } .help_menu a:hover .ico_help2 { background: url(/assets/img/color/separators_iconset.svg) no-repeat 0 -330px } .help_menu a:hover .ico_help3 { background: url(/assets/img/color/separators_iconset.svg) no-repeat -60px -330px } .help_menu a:hover .ico_help4 { background: url(/assets/img/color/separators_iconset.svg) no-repeat -90px -330px } .help_menu a:hover .ico_help5 { background: url(/assets/img/color/separators_iconset.svg) no-repeat -120px -330px } span.ico_user_big { background: url(/assets/img/color/separators_iconset.svg) no-repeat 0 -270px; width: 30px; height: 30px } span.ico_users_big { background: url(/assets/img/color/separators_iconset.svg) no-repeat 0 -450px; width: 30px; height: 30px; } span.ico_contacts_big { background: url(/assets/img/color/separators_iconset.svg) no-repeat -120px -390px; width: 30px; height: 30px; } span.ico_users { background: url(/assets/img/color/separators_iconset.svg) no-repeat -120px 0; width: 30px; height: 30px } span.ico_gdrive_big { background: url(/assets/img/color/separators_iconset.svg) no-repeat 0 -240px; width: 30px; height: 30px } span.ico_telegram { background: url(/assets/img/color/separators_iconset.svg) no-repeat 0 -750px; width: 30px; height: 30px } /* ----------- MinifyCSS: LIGHT THEMEMinifyCSS: LIGHT THEME ----------- */ span.ico_pipedrive { background:url(/img/color/separators_iconset.svg) no-repeat -120px -750px; width:30px; height:30px } span.ico_keycrm { background:url(/img/color/separators_iconset.svg) no-repeat -120px -780px; width:30px; height:30px } /*----------- MinifyCSS: STOPMinifyCSS: STOP ----------- */ span.ico_nethunt { background:url(/assets/img/color/separators_iconset.svg) no-repeat 0 -780px; width:30px; height:30px } span.ico_hubspot { background:url(/assets/img/color/separators_iconset.svg) no-repeat -30px -780px; width:30px; height:30px } span.ico_viber { background: url(/assets/img/color/separators_iconset.svg) no-repeat -60px -750px; width: 30px; height: 30px } span.ico_messenger { background: url(/assets/img/color/separators_iconset.svg) no-repeat -30px -750px; width: 30px; height: 30px } span.ico_gdrive_big { background: url(/assets/img/color/separators_iconset.svg) no-repeat 0 -240px; width: 30px; height: 30px } span.ico_event2 { background: url(/assets/img/color/separators_iconset.svg) no-repeat -60px -270px; width: 30px; height: 30px } span.ico_mobile2 { background: url(/assets/img/color/separators_iconset.svg) no-repeat -90px -270px; width: 30px; height: 30px } span.ico_notify_big { background: url(/assets/img/color/separators_iconset.svg) no-repeat -90px -720px; width: 30px; height: 30px } span.ico_chrome_big { background: url(/assets/img/color/separators_iconset.svg) no-repeat -60px -720px; width: 30px; height: 30px } span.ico_deskmob_big { background: url(/assets/img/color/separators_iconset.svg) no-repeat -30px -720px; width: 30px; height: 30px } span.ico_slack_big { background: url(/assets/img/color/separators_iconset.svg) no-repeat 0 -720px; width: 30px; height: 30px } span.ico_theme { background: url(/assets/img/color/separators_iconset.svg) no-repeat -30px -240px; width: 30px; height: 30px } a:hover span.ico_theme { background-position: -30px -180px; } span.ico_theme_act { background: url(/assets/img/color/separators_iconset.svg) no-repeat -120px -240px; width: 30px; height: 30px } a:hover span.ico_theme_act { background-position: -120px -180px; } span.ico_exit { background: url(/assets/img/color/separators_iconset.svg) no-repeat -60px -210px; width: 30px; height: 30px } a:hover span.ico_exit { background-position: -90px -210px; } span.ico_digest { background: url(/assets/img/color/separators_iconset.svg) no-repeat -30px -270px; width: 30px; height: 30px } span.ico_start { background: url(/assets/img/color/separators_iconset.svg) no-repeat 0 -30px; width: 30px; height: 30px } span.ico_finish { background: url(/assets/img/color/separators_iconset.svg) no-repeat -30px -30px; width: 30px; height: 30px } span.ico_userto { background: url(/assets/img/color/separators_iconset.svg) no-repeat -90px -60px; width: 30px; height: 30px } span.ico_api_big { background: url(/assets/img/color/separators_iconset.svg) no-repeat -120px -720px; width: 30px; height: 30px } span.ico_helpdesk_big { background: url(/assets/img/color/separators_iconset.svg) no-repeat -90px -300px; width: 30px; height: 30px } span.ico_owner_big { background: url(/assets/img/color/separators_iconset.svg) no-repeat 0 -690px; width: 30px; height: 30px } span.ico_link_big { background: url(/assets/img/color/separators_iconset.svg) no-repeat -120px -690px; width: 30px; height: 30px } span.ico_ssl_big { background: url(/assets/img/color/separators_iconset.svg) no-repeat -30px -690px; width: 30px; height: 30px } span.ico_2fa_big { background: url(/assets/img/color/separators_iconset.svg) no-repeat -60px -240px; width: 30px; height: 30px } span.ico_dload_big { background: url(/assets/img/color/separators_iconset.svg) no-repeat -30px -300px; width: 30px; height: 30px } span.ico_ftp_big { background: url(/assets/img/color/separators_iconset.svg) no-repeat -60px -690px; width: 30px; height: 30px } span.ico_backup_big { background: url(/assets/img/color/separators_iconset.svg) no-repeat -90px -690px; width: 30px; height: 30px } a.ico_favs_big { background: url(/assets/img/color/separators_iconset.svg) no-repeat -60px -60px; width: 30px; height: 30px } span.ico_favs_big, a.ico_favs_big:hover, span.ico_import_fix { background: url(/assets/img/color/separators_iconset.svg) no-repeat -30px -60px; width: 30px; height: 30px } .dataadd_out .limit span.ico_time, span.ico_time_big { background: url(/assets/img/color/separators_iconset.svg) no-repeat -90px -30px; width: 30px; height: 30px } span.ico_timer_big { background: url(/assets/img/color/separators_iconset.svg) no-repeat -60px -120px; width: 30px; height: 30px; } .dataadd_out .limit span.ico_money, span.ico_money_big { background: url(/assets/img/color/separators_iconset.svg) no-repeat -120px -30px; width: 30px; height: 30px } span.ico_worktime_big { background: url(/assets/img/color/separators_iconset.svg) no-repeat -30px -120px; width: 30px; height: 30px } span.ico_bill_big { background: url(/assets/img/color/separators_iconset.svg) no-repeat 0 -120px; width: 30px; height: 30px } .dataadd_out .limit .time_act span.ico_time { background: url(/assets/img/color/separators_iconset.svg) no-repeat -90px -450px } .dataadd_out .limit .money_act span.ico_money { background: url(/assets/img/color/separators_iconset.svg) no-repeat -120px -450px } span.ico_time_s { background: url(/assets/img/color/separators_iconset.svg) no-repeat -30px -570px; width: 30px; height: 30px } span.ico_money_s { background: url(/assets/img/color/separators_iconset.svg) no-repeat -60px -570px; width: 30px; height: 30px } .time_act span.ico_time_s { background: url(/assets/img/color/separators_iconset.svg) no-repeat -30px -540px } .money_act span.ico_money_s { background: url(/assets/img/color/separators_iconset.svg) no-repeat -60px -540px } a:hover span.ico_time_big { background-position: -90px -450px } a:hover span.ico_money_big { background-position: -120px -450px } a:hover span.ico_done_big { background-position: -30px -420px } a.act span.ico_time_big { background-position: -90px -420px } a.act span.ico_money_big { background-position: -120px -420px } a.act span.ico_done_big { background-position: -60px -420px } span.ico_proj_wait2 { background: url(/assets/img/color/separators_iconset.svg) -30px -90px; width: 30px; height: 30px; } .dataadd span.ico_mailing { background: url(/assets/img/color/separators_iconset.svg) no-repeat -60px -30px; width: 30px; height: 30px; } span.ico_cardbig { background: url(/assets/img/color/separators_iconset.svg) no-repeat 0 -270px; height: 30px; width: 30px; } span.ico_companybig { background: url(/assets/img/color/separators_iconset.svg) no-repeat -60px -450px; height: 30px; width: 30px; } span.ico_companybig_my { background: url(/assets/img/color/separators_iconset.svg) no-repeat -30px -450px; height: 30px; width: 30px; } span.ico_privbig, a.ico_privbig { background: url(/assets/img/color/separators_iconset.svg) no-repeat 0 -630px; height: 30px; width: 30px; } span.ico_privbig_act, a.ico_privbig_act { background: url(/assets/img/color/separators_iconset.svg) no-repeat -30px -630px } .ico_privbig_my { filter: grayscale(1); opacity: 0.7 } span.ico_subsbig { background: url(/assets/img/color/separators_iconset.svg) no-repeat -60px -630px; height: 30px; width: 30px; } span.ico_subsbig_no, .notify_block span.ico_subsbig { background: url(/assets/img/color/separators_iconset.svg) no-repeat -90px -630px; height: 30px; width: 30px; } .modal__content .notify_block span.ico_subsbig, .floatingButtons-gantt .notify_block span.ico_subsbig { background: url(/assets/img/color/separators_iconset.svg) no-repeat -60px -390px } span.ico_subsbig_sleep { background: url(/assets/img/color/separators_iconset.svg) no-repeat -30px -90px; height: 30px; width: 30px; } .notify_block_act a span.ico_subsbig, span.ico_subsbig_act, .modal__content .notify_block_act span.ico_subsbig, .floatingButtons-gantt .notify_block_act span.ico_subsbig { background: url(/assets/img/color/separators_iconset.svg) no-repeat -60px -630px; height: 30px; width: 30px; } .notify_block a:hover span.ico_subsbig { background: url(/assets/img/color/separators_iconset.svg) no-repeat -120px -630px; height: 30px; width: 30px; } a:hover span.ico_subs_list, a.ico_subs_list:hover { width: 30px; height: 30px; border-width: 0 } a:hover span.ico_subs_list:before, a.ico_subs_list:hover:before { background: url(/assets/img/color/separators_iconset.svg) no-repeat -60px -390px; width: 30px; height: 30px; } span.ico_user_add, a.ico_user_add { background: url(/assets/img/color/separators_iconset.svg) -90px -360px; width: 30px; height: 30px; } a:hover span.ico_user_add, a.ico_user_add:hover, button:hover span.ico_user_add { background: url(/assets/img/color/separators_iconset.svg) -90px -390px; width: 30px; height: 30px; } span.ico_project_add, a.ico_project_add { background: url(/assets/img/color/separators_iconset.svg) 0 -390px; width: 30px; height: 30px; } a:hover span.ico_project_add, a.ico_project_add:hover { background: url(/assets/img/color/separators_iconset.svg) 0 -420px; width: 30px; height: 30px; } span.ico_projects, a.ico_projects { background: url(/assets/img/color/separators_iconset.svg) 0 -360px; width: 30px; height: 30px; } span.ico_user_contact, a.ico_user_contact { background: url(/assets/img/color/separators_iconset.svg) -120px -360px; width: 30px; height: 30px; } a:hover span.ico_user_contact, a.ico_user_contact:hover { background: url(/assets/img/color/separators_iconset.svg) -120px -390px } span.ico_user_add2, a.ico_user_add2 { background: url(/assets/img/color/separators_iconset.svg) -30px -360px; width: 30px; height: 30px; } a:hover span.ico_user_add2, a.ico_user_add2:hover { background: url(/assets/img/color/separators_iconset.svg) -30px -390px; width: 30px; height: 30px; } span.ico_user_no, a.ico_user_no { background: url(/assets/img/color/separators_iconset.svg) -60px -390px; width: 30px; height: 30px; } .ico_fired { background: url(/assets/img/color/separators_iconset.svg) no-repeat -123px -213px; position: relative; } span.ico_ip_big { background: url(/assets/img/color/separators_iconset.svg) -119px -60px; width: 30px; height: 30px; } @media (hover: none) { a.ico_user_add:hover { background: url(/assets/img/color/separators_iconset.svg) -90px -360px; } } #setup .setup { } #setup_2col, #setup.setup_2col {width:66%;margin:0 auto;max-width: 1200px;min-width: 900px;} #setup_2col .setup, #setup.setup_2col .setup {} #setup_1col .setup, #setup.setup_1col .setup {width:auto; float:left} #setup.setup_2col .setup_r {} #setup .setup_r, #setup_2col .setup_r, #setup.setup_2col .setup_r {} #setup .setup_, #mailing3col .setup_ {background:var(--base-cont-top);padding:15px 15px 0;margin:0 0 15px 0;box-shadow: 0 0 0 1px var(--base-line-alt-cardbrd);} #setup .setup_:after {content:''; display:block; height:1px; margin:-1px 0 0 0} #setup .setup_gr_, #mailing3col .setup_gr_ {padding:10px 15px; margin:-15px 0 15px 0} #setup_alert br {display:none} #setup_alert .in {} /* ---------------------------------------------------- Members page -------------------------------------------------*/ .membersPage__search { display: flex; gap: 16px; max-width: 50%; padding-bottom: 12px; align-items: center; } .membersPage__search .searchInput { border-radius: 18px; background: var(--base-hlt-g-easy); box-shadow: var(--shadow-brd-enable); margin: 0; height: 36px; } .membersPage__search .searchInput .delete { padding-right: 8px; } .membersPage__search .searchInput .delete svg { fill: var(--base-txt-tertiary); } .membersPage__counters { display: flex; padding: 28px 0; } .membersPage__counters-block { display: flex; flex-direction: column; flex-grow: 1; flex-basis: 0; text-align: center; } .membersPage__counters-block:not(:last-child) { border-right: 0.5px solid var(--base-txt-ghost); } .membersPage__counters-digit { padding: 8px 0; color: var(--base-txt-accent); font: var(--font-ui-32-title-large-semi); } .membersPage__counters-text { padding: 4px 0; color: var(--base-txt-primary); font: var(--font-ui-15-large-reg); } .membersPage__counters-button { display: flex; align-items: center; height: 28px; color: var(--base-txt-tertiary); font: var(--font-ui-12-mini-reg); justify-content: center; } table.membersPage__table { font: var(--font-ui-14-regular-reg); color: var(--base-txt-secondary); margin: 16px 0; border: 0; width: 100%; border-collapse: collapse; } table.membersPage__table tr { transition: all 0.5s; } table.membersPage__table tbody tr, table.membersPage__table tfoot tr { cursor: pointer; } table.membersPage__table tbody tr:hover td, table.membersPage__table tbody tr.active td, table.membersPage__table tfoot tr:hover td, table.membersPage__table tfoot tr.active td { background: var(--base-cont-top); } table.membersPage__table tr { border-top: 0.5px solid var(--base-txt-ghost); } table.membersPage__table td { padding: 8px 4px; background: transparent; white-space: nowrap; } table.membersPage__table th { padding: 0; height: 40px; background: var(--base-cont-top); color: var(--base-txt-accent); font: var(--font-ui-13-small-med); border-top: none; text-align: left; white-space: nowrap; } table.membersPage__table tr th:nth-child(6n + 5) { text-align: center; } table.membersPage__table tr td:nth-child(6n + 1) { padding: 8px 12px; width: 1%; } table.membersPage__table tr td:nth-child(6n + 1) > * { border-radius: 8px; } table.membersPage__table tr td:nth-child(6n + 2) { width: auto; } table.membersPage__table tr td:nth-child(6n + 2) div { color: var(--base-txt-secondary); font: var(--font-ui-13-small-reg); } table.membersPage__table tr td:nth-child(6n + 2) div span { color: var(--base-txt-primary); font: var(--font-ui-16-title-3-semi); } table.membersPage__table tr td:nth-child(6n + 3) { padding-left: 0; padding-right: 40px; } table.membersPage__table tr td:nth-child(6n + 3) div { display: flex; align-items: center; gap: 10px; --icon-color: var(--base-txt-secondary); } table.membersPage__table tr td:nth-child(6n + 3) div > ws-icon { padding-left: 10px; } table.membersPage__table tr td:nth-child(6n + 3) div span { margin: 0; } table.membersPage__table tr td:nth-child(6n + 4) div { display: inline-block; box-sizing: border-box; padding-left: 12px; font: var(--font-ui-12-mini-reg); } table.membersPage__table tr td:nth-child(6n + 4) ws-icon[name=rex] svg, table.membersPage__table tr td:nth-child(6n + 4) *:hover ws-icon[name=rex] svg { fill: var(--base-txt-secondary) } table.membersPage__table tr td:nth-child(6n + 5) { text-align: center; } table.membersPage__table tr td:nth-child(6n) { padding: 8px 8px 8px 4px; width: 1%; } table.membersPage__table .btn ws-icon.online svg { fill: var(--base-txt-new-minor) !important; } table.membersPage__table.search_started .ico_user { display: inline-block !important; } table.membersPage__table th.sortable { --icon-color: var(--base-txt-btn-b); } table.membersPage__table th.sortable ws-icon { margin-left: 4px; margin-right: -24px; transition: transform 0.3s; } table.membersPage__table th.sortable ws-icon.rotated_up { transform: rotate(180deg); } table.membersPage__table th.sortable span:not(:first-child) { padding-left: 40px; } @media screen and (max-width: 1024px) { table.membersPage__table tr *:nth-child(6n + 5) { display: none; } } @media screen and (max-width: 900px) { table.membersPage__table tr *:nth-child(6n + 4) { display: none; } table.membersPage__table tr td:nth-child(6n + 3) { padding-right: 8px; } } .membersPage__inviteRow ws-icon svg { fill: var(--base-txt-btn-b); } .membersPage__inviteRow td span { color: var(--base-txt-btn-b); font: var(--font-ui-14-regular-reg); } .membersPage__inviteAva { display: inline-flex; border: 1px dashed var(--base-txt-btn-b); box-sizing: border-box; width: 48px; height: 48px; justify-content: center; align-items: center; } /* ---------------------------------------------------- Members page end -------------------------------------------------*/ .setup_partner { display: flex; flex-direction: column; gap: 10px; border-radius: 8px; padding: 20px 20px !important; } .setup_partner_title { font-size: 16px; font-weight: 600; color: var(--base-txt-accent); } .setup_partner_text { color: var(--base-txt-secondary); } .setup_partner_text b { color: var(--base-txt-accent); } .setup_partner_body { display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; margin: 10px 0; } .setup_partner_body_item { display: flex; flex-direction: row; gap: 10px; padding: 10px 8px; background: var(--base-cont-low); align-items: center; color: var(--base-txt-accent); cursor: pointer; } .setup_partner_body_item:hover { color: #6a44d9; } .setup_partner_body_item:first-child { border-bottom: 1px solid var(--base-line-secondary); } .setup_partner_buttons { display: flex; flex-direction: row; gap: 16px; width: 100%; justify-content: flex-end; } .setup_partner_buttons a { width: calc((100% - 16px) / 2); text-align: center; font-size: 14px; font-weight: 600; } .setup_partner_help { font-style: italic; color: var(--base-txt-secondary); } #mailing3col .group_out2 .setup_gr_{margin:0} #setup .setup_gr_ .button_r {margin:2px 0 2px 10px;} #setup .setup_gr_ .button_l {margin:2px 10px 2px 0;} #setup .setup_gr_ .eye_containter .eye_conf {margin-right: 0} #setup .setup_gr_ .eye_containter .eye_conf .eye_line div {margin-right: 6px} #setup .setup_gr_ .eye_containter .button_r {margin:4px 0 0 10px;} #setup .setup_gr_ center { color:var(--base-txt-secondary); padding:8px 0; min-height:20px;} #setup .setup_gr_ center .button {margin:-6px 0;} #setup .setup_wt2, #setup .setup_wt_ {margin:-15px 0 15px 0} #setup .setup_gr_ h4 {font-size:12px} .logo_input { display: none; } .setup_but { display:none; margin:0 0 -10px 5px} .form_active {box-shadow: var(--shadow-brd-focus);border-radius: 8px;} .form_active .setup_but {display:inline-block; margin:-6px 5px -6px 0;} .form_active a.select_h4a {float:none; width:auto; margin:0 0 20px 0; } .form_active a.select_h4a:hover {color:var(--base-txt-max)} .form_active h4.select_h4a .ico_l {display:none} .setup_ h4 { font:bold 14px/20px var(--font-base); padding:0 0 15px 0; margin:0; height:20px; white-space:nowrap;} .setup_ h4 .button_r {margin: -6px 0 -6px -40px;} .setup_ h4 .button_r .cnt_queue {vertical-align:1px} .setup_ h4 .button_upgrade {margin:-1px 0} .setup_ h4 span.h4 {font:bold 14px/20px var(--font-base);color:inherit !important;margin-right:5px;} .setup_ h4 span.h4 span.ellips {display: inline-block;max-width: 55%;overflow: hidden;text-overflow: ellipsis;vertical-align: middle;} .setup_ h4 .ico_remove {display:none} .setup_line_ .ico_remove {display:none} .form_active h4 .ico_remove {display:inline-block} .form_active .setup_line_ .ico_remove {display:inline-block} .form_active .sw, .form_active .h4, .form_active h4 .button_white {display:none} .setup_ h4 .loader_sm {float:right; margin: 4px -5px -4px 10px;border-width: 1px;} .setup_line { margin:20px 0 15px 0; position:relative;text-align:center; overflow:hidden} .setup_line_ { position:relative;padding:2px 10px; color:var(--base-txt-secondary); font:22px/36px var(--font-base); } .setup_line_:before {content:''; position:absolute; right:100%; border-top:2px solid var(--base-line-alt-cardbrd); display:block; width:1000px; top:14px;} .setup_line_:after {content:''; position:absolute; left:100%; border-top:2px solid var(--base-line-alt-cardbrd); display:block; width:1000px; top:14px;} .form_active .setup_line_:before, .form_active .setup_line_:after{border-top:2px solid var(--base-btn-notice-minor)} body[data-page=account] .setup_line_ { color:var(--white-accent); text-shadow:1px 1px 0 var(--base-line-tertiary)} body[data-page=account] .setup_line {margin: 50px -500px 30px;} body[data-page=account] .setup_line_:before, body[data-page=account] .setup_line_:after {border-top:2px solid var(--base-line-secondary);} body[data-page=account] .setup_line_ {color:var(--base-txt-accent);text-shadow:none;font:italic 16px/36px var(--font-serif);border: 2px solid var(--base-line-secondary);border-radius: 20px;padding: 6px 20px;} @media screen and (min-width: 481px) { body[data-page=account] #content {padding: 32px 32px 64px;background: var(--base-cont-mid);} } @media screen and (max-width: 480px) { body[data-page=account] {background: var(--base-cont-mid);} body[data-page=account] #content {padding: 32px 32px 64px;} } /*body[data-page=account] #content:has(.paymentPage) {display: flex;flex-direction: column;flex-grow: 1;}*/ /* replace_has: body[data-page=account] #content:has(.paymentPage) */ /* this seems not needed at all */ /* replace_has: body[data-page=account] #content:has(.paymentPage) */ .setup_ h4 span.ico_l {margin:-5px 10px -5px -5px} .setup_ h4 span.ico_l2 {margin:3px 8px 0 -3px} .setup_ h4 span.ico_event {padding:2px 5px} .setup_ h4 span.ico_labels {margin:0 5px 0 -7px} .setup_ h4 span.ico_r {padding:0; margin:-3px 10px -3px;} .setup_ .privacy_opts {background: var(--base-cont-top);margin:0 -15px 15px;padding:15px;} .setup_modal {margin:0; padding:15px;} .setup_modal .privacy_opts {margin:0; padding:0; background:var(--base-cont-mod-top); } .setup_ .privacy_opts .itm {height:30px; border-top:1px solid var(--base-line-secondary); font:14px/20px var(--font-base); padding:0; position:relative;} .setup_ .privacy_opts .itm:first-child {border-top:none} .setup_ .privacy_opts .itm label {height:20px;width:20px;float:right;overflow:hidden;padding:0;margin:0 10px;border: 5px solid var(--base-cont-top);cursor:pointer;} .setup_modal .privacy_opts .itm label {border-color:var(--base-cont-mod-top);} .setup_ .privacy_opts .itm label input {opacity:0} .setup_ .privacy_opts .itm label.act_alw {float:left; margin:0 5px 0 -5px} .setup_ .inact {display:none} .setup_ .privacy_opts .itm label {background:url(/assets/img/color/iconset.svg) no-repeat -100px -1160px;} .setup_ .privacy_opts .itm label:hover {background:url(/assets/img/color/iconset.svg) no-repeat -100px -1140px;} .setup_ .privacy_opts .itm label.act {background:url(/assets/img/color/iconset.svg) no-repeat -120px -1160px} .setup_ .privacy_opts .itm label.act:hover {background:url(/assets/img/color/iconset.svg) no-repeat -120px -1140px} .setup_ .privacy_opts .itm div {margin:0 90px 0 0; white-space:nowrap; overflow:hidden; padding:5px 0; color:var(--base-txt-secondary)} .setup_ .privacy_opts .itm i {position:absolute;right:95px;font:italic 12px/20px var(--font-base);top:2px;white-space:nowrap;display:none;background: var(--base-cont-top);padding:3px 10px;} .setup_modal .privacy_opts .itm i {background:var(--base-cont-mod-top);} .setup_ .privacy_opts .itm2 i.s1 {display:inline; color:var(--base-txt-tertiary)} .setup_ .privacy_opts .itm0 i.s2 {display:inline; color:var(--base-btn-alert-primary-minor)} .setup_ .privacy_opts .itm3 i.s0 {display:inline; color:var(--base-txt-tertiary)} .setup_ .privacy_opts .names {height:30px; padding: 0} .setup_ .privacy_opts .names label {padding:12px 0; height:20px; width:50px; float:right; color:var(--base-txt-tertiary); text-align:center; font:12px/20px var(--font-base);} .setup_ .privacy_opts .names label.my {width:150px; text-align:right; padding-right:10px;} .setup_line_sm span.ico_search {position:absolute; left:10px; top:4px} .setup_line_ .for_info2 { font:bold 14px var(--font-base); color:var(--base-txt-primary); padding:0 0 0 40px} .setup_line_ .for_info2 a { font:13px var(--font-base); margin:0 0 0 8px; border-bottom:1px dashed; white-space:nowrap} .setup_line_ .for_info2 a:hover, .setup_line_ .for_info2 a.act { color:var(--base-txt-max)} .setup_ .line {border-top:1px dashed var(--base-line-alt-cardbrd); background:none; margin:10px 0} .setup_ table { margin:0} .setup_ th, .setup_ td { padding:4px 6px} .setup_ th { text-align:right; white-space:nowrap; font:13px/20px var(--font-base); width: 170px; } .setup_ .input {padding:5px 7px;} .setup_ select {margin:-2px 0;color: var(--inp-hlt-txt);background: var(--inp-hlt-bg);border: 1px solid var(--inp-hlt-brd);border-radius: 4px;} p.winp .input, p.wsel select {margin:-7px 0;} p.winp {padding:4px 0;} .setup_ .help1 .help {float:left; margin:0 0 0 -30px; width:24px;font-size:18px; line-height:24px; text-align:right; letter-spacing:-1px;} .setup_ .help1 {color:var(--base-txt-tertiary); font:italic 13px/16px var(--font-base); padding:15px 0 10px 15px; border-top:1px dashed var(--base-line-alt-cardbrd);margin-top: 10px;} #setup #set_name h4 {display:none} #set_name .itm {margin:0 0 5px} #set_name .itm input.input {font:18px/26px var(--font-base)} #set_name .itm span {font:12px/26px var(--font-base)} #setup .form_active #set_name h4 {display:block} #setup input.timepicker {border:none;border: 1px solid var(--base-hlt-hover);background:var(--inp-hlt-bg);color:var(--base-txt-link-minor);font:14px/28px var(--font-base);height:28px;text-align:center;padding:0 5px;border-radius: 6px;margin:-10px 0;width:50px;} #setup input.timepicker_am {width:70px} #setup .sw_pre input.timepicker {background:var(--base-cont-low);color:var(--base-txt-secondary); } #setup .sw_act input.timepicker {background:var(--inp-hlt-bg);color: var(--inp-hlt-txt);} #setup .sw_pre .onlysw_act {display:none} #setup .sw_act .onlysw_act {display:inline} #setup .sw_act .nosw_act {display:none} #setup #copy_token {font-size:14px; padding-bottom:0;padding-top: 5px;} #setup #copy_token p {margin:0 0 10px} #setup #copy_token .line, #setup #copy_token .item {margin:15px 0 0} #setup #copy_token .item:first-child {margin:0 0 5px} #setup #copy_token .button_l {margin:0 8px 0 0} #setup #copy_token .item ws-btn {margin: 0 8px 0 0} #setup #copy_token .item ws-btn button {height: 33px} #setup #copy_token .item .input {padding: 9px 35px 9px 15px;float:left;border-radius:4px;margin: 0 10px 0 0;width: calc(100% - 205px);} #setup #copy_token .ico_delete {margin: 5px -20px 5px 5px;} #setup #copy_token .ico_pass {float:left; margin:8px 0 0 -38px;} .setup_ .itm { position:relative; padding:0 20px 10px 0; } .setup_ .itm .drop_select {padding:20px;} .setup_ .itm input.input, .setup_ .itm textarea {width:100%;padding: 6px 10px;font:14px/20px var(--font-base);border-radius: 6px;} .setup_ .itm input.input:placeholder-shown:not(:focus) {background: var(--base-cont-top);border: 1px solid var(--inp-cont-brd);} .setup_ .itm input.input_bold {font-weight:bold;} .setup_ .itm textarea { margin:5px 0 0 0; height:80px; resize:vertical} .setup_ .itm input.input:focus, .setup_ .itm textarea:focus{box-shadow: var(--shadow-brd-focus);border-color:transparent;} .setup_ .itm input.input:disabled {background:var(--base-cont-top); color:var(--base-txt-tertiary)} .setup_ .itm span {position:absolute;right:0;top:6px;color: var(--base-txt-tertiary);font:12px/20px var(--font-base);padding: 0 5px;} .setup_ .itm input:placeholder-shown:not(:focus) + span {background: var(--base-cont-top);} .setup_ .itm input.input:disabled ~ span {background: -webkit-linear-gradient(left, var(--trans) 0%,var(--base-cont-top) 25%); background: linear-gradient(to right, var(--trans) 0%,var(--base-cont-top) 25%); filter: progid:DXImageTransform.Microsoft.gradient( startColor=0, endColorstr='var(--base-cont-top)',GradientType=1 );} .modal .setup_ .itm span { background: -webkit-linear-gradient(left, var(--trans) 0%,var(--menu-inp-cont) 25%); background: linear-gradient(to right, var(--trans) 0%,var(--menu-inp-cont) 25%); filter: progid:DXImageTransform.Microsoft.gradient( startColor=0, endColorstr='var(--menu-inp-cont)',GradientType=1 );} .setup_ .sw_small:not(.sw_act) + .itm input.input:not(:focus) {background: var(--base-cont-low);color: var(--base-txt-tertiary);border-color: var(--base-cont-low);} .setup_ .sw_small:not(.sw_act) + .itm input.input:not(:focus) + span {background:var(--base-cont-low)} .addblock5 #ftpblock div, .addblock5 #ftpblock label.act { background:var(--base-hlt-alt-label)} .settings_off .addblock5 #ftpblock div, .settings_off .addblock5 label.act { background:var(--base-cont-mid)} .settings_off .addblock5 { background:var(--base-cont-low)} h4 span.h4_error, .setup span.h4_error { background:var(--base-btn-alert-primary-minor); opacity:0.7; color:var(--white-accent); padding:2px 6px; white-space:nowrap; } .setup_ .itm_upgrade {} .setup_ .itm_upgrade .input{ border:1px solid var(--costs-time-minor) } /* -------------------------------------------------------------------------------------------------------------------*/ #frm_notify .chrome_push {display:none} #frm_notify.nomail .mail {display:none} #frm_notify.yeschrome .push, #frm_notify.yespush .chrome {display:none} #frm_notify.nochrome .chrome, #frm_notify.nopush .push {display:none} #frm_notify.nochrome .chrome_n_push, #frm_notify.nopush .chrome_n_push {display:none} #frm_notify.yespush .chrome_push, #frm_notify.yeschrome .chrome_push {display:inline} form.frm_dis h5.el_dis { color:var(--base-txt-secondary)} form.frm_dis input.el_dis { color:var(--base-txt-secondary)} .input_place {height: 52px;position:relative;margin: 25px 10px 13px 35px;} a.input_place {display:block; color:var(--base-txt-primary)} .logo ~ .input_place {margin: 4px 140px 18px 10px;} .input_place .ico { margin:8px 0 0 -40px;} .input_place .ico_big {transform:scale(1.5); margin:12px 0 0 -34px;} .input_place .drop_select {width: 125px;position:absolute;right: 4px;top: 10px;padding: 10px 10px;border: none;} .input_place .input { padding: 21px 155px 7px 15px; font: 600 15px/20px var(--font-base); border-radius: 4px; box-sizing:border-box; } .input_place input.input[type=text] {width: 100%;font-weight: 600;color: var(--base-txt-primary);} .input_place span.input {display:block;border:1px solid var(--inp-cont-brd);white-space: nowrap;overflow: hidden;} .input_place span.input b {font:bold 16px/20px var(--font-base)} .input_place span.input i {font:13px/20px var(--font-base)} .input_place .ico_edit {position:absolute; right:10px; top:10px; display:none} a.input_place:hover .ico_edit {display:block} a.input_place:hover .input {background: var(--base-hlt-hover);border-color:var(--base-btn-primary-minor)} .input_place label {position:absolute;left:15px;top:0;color: var(--base-txt-secondary);font:11px/20px var(--font-base);} .input_place .input:focus{box-shadow: var(--shadow-brd-focus);border-color:transparent;} .buttons_place {margin: 0 10px 10px 35px;height: 40px;} .buttons_place .button_r {filter:grayscale(0.7)} .form_active2 .buttons_place .button_r {filter:none} #setup .setup_.vs_logo {margin-top:0; display:none} .setup_ input[type=text], .setup_ input[type=number], .setup_ input[type=email], .setup_ input[type=tel] {border: 1px solid var(--inp-hlt-brd);/* color: var(--inp-hlt-txt); */background: var(--inp-hlt-bg);} @media (max-width: 1100px) { #setup .setup_wide {width:48%} } @media (max-width: 1024px) { #setup_2col {width:auto; min-width:0} } @media (max-width: 900px) { #setup_2col, #setup.setup_2col {min-width:480px; width:66%; margin:0 auto} #setup .setup, #setup .setup_r, #setup_2col .setup, #setup.setup_2col .setup, #setup.setup_2col .setup_r {float:none; width:auto; margin:0 0 10px 0;} #setup .setup_wide {float:none; width:auto; margin:0 0 10px 0;} table.membersPage__table tr td:nth-child(6n + 2) div { max-width: 220px; overflow: hidden; text-overflow: ellipsis; } } @media (max-width: 640px) { #setup_alert br {display:initial} #setup_alert {font:bold 14px/20px var(--font-base);} #setup_alert .button_r {margin-top:5px;} table.membersPage__table tr td:nth-child(6n + 2) div { max-width: 185px; } table.membersPage__table tr td:nth-child(6n + 3) span {display: none;} .membersPage__search {padding: 0 14px;max-width: none;} } @media (max-width: 560px) { #setup_2col, #setup.setup_2col {min-width:0; width:auto} #setup ws-slider a span {display: none;} } @media (max-width: 480px) { #setup_alert {margin-left:0; margin-right:0} .membersPage__counters-block:nth-last-child(2) {display: none;} table.membersPage__table { width: calc(100% + 24px); margin-left: -12px; } table.membersPage__table th.sortable {padding-left: 0 !important;} } @media print { #setup .setup_ {border:1px solid var(--base-line-alt-gap-major); border-radius:0} #setup .setup {float:none !important; width:auto !important; margin:0 0 10px 0} } @media screen and (max-width: 480px) { .crmAutomationsConfig { .setupBlock__line + .inputBlock__wrapper { padding-top: 12px; } .inputBlock-50 { width: 100%; } .inputBlock-auto { margin-top: 8px; margin-left: auto; margin-right: auto; flex-grow: 0; } } }.setupGuide__container { padding: 24px; .setupGuide__element, .setupGuide__input { padding: 16px 0; } .setupGuide__input { display: flex; flex-direction: column; gap: 8px; input[type=text] { width: 100%; border-radius: 12px; font: var(--font-ui-18-title-2-semi); padding: 8px; box-sizing: border-box; } } .buttons { padding: 12px 4px 4px 0; margin: 0 -4px -4px 0; } .input-error { box-shadow: var(--shadow-brd-error); } } .setupGuide__highlight { box-shadow: var(--shadow-brd-focus) !important; }:root { --primary-menu-width: 64px; --sidebar-width: 260px; } @media (max-width: 480px) { :root { --primary-menu-width: 0px; --sidebar-width: 320px; } body.mobileSidebarFullscreen{ --sidebar-width: 100%; } } .sidebar__wrapper, .adminMenu__wrapper { position: fixed; left: calc(var(--primary-menu-width) - var(--sidebar-width) - 1px); top: 0; bottom: var(--footerMobile-height); width: var(--sidebar-width); background: var(--base-cont-mid); z-index: 1014; box-shadow: 1px 0 0 var(--base-line-tertiary); transition: left 0.15s linear; } @media screen and (min-width: 481px) { body.mobileSidebar .sidebar__wrapper, body.mobileSidebar .adminMenu__wrapper, body.withSidebarOver .sidebar__wrapper, body.withSidebarOver .adminMenu__wrapper { background: var(--base-cont-mid-opac); backdrop-filter: blur(8px); .sidebar__search .in { background: var(--base-cont-trans-low); } } } @media screen and (max-width:480px) { .sidebar__wrapper, .adminMenu__wrapper { z-index: 1029; } .sidebar__wrapper, .adminMenu__wrapper { transition: left 0.15s linear, width 0.15s linear; background: var(--base-cont-top); } } @media screen and (max-width:48px) { .sidebar__wrapper, .adminMenu__wrapper { display: none; } } .sidebar { opacity: 0; transition: opacity 0.3s ease; font: 14px/20px var(--font-sidebar); height: 100%; display: flex; flex-direction: column; fill: var(--base-txt-primary); overflow: hidden; } .sidebar-fake { opacity: 1; pointer-events: none; } .sidebar svg { } .sidebar-loaded { opacity: 1; } .sidebar * { user-drag: none; -webkit-user-drag: none; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; /*--icon-color: var(--base-txt-primary);*/ } .sidebar__search { display: flex; flex-direction: row; gap: 12px; padding: 4px 14px 16px 14px; height: 32px; } .sidebar__search .in { display: flex; background: var(--base-cont-low); padding: 0 6px; border-radius: 16px; height: 32px; box-shadow: none; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; } .sidebar__search .in:hover { box-shadow: var(--shadow-cont-minor-lineonly-inside); } .sidebar__search .in:focus-within { box-shadow: var(--shadow-cont-minor-lineonly-outside); background: var(--base-cont-input); } .sidebar__search .in:not(.search_started):not(:focus-within) a.delete { display: none; } .sidebar__search .in svg { fill: var(--base-txt-tertiary); } .sidebar__search .in a.delete:hover { --icon-color: var(--base-txt-primary); } .sidebar__search input { border: none; background: transparent; box-sizing: border-box; padding: 0 6px; height: 20px; width: 100%; font: 14px/20px var(--font-sidebar); } .sidebar__search input::placeholder { font: 13px/20px var(--font-sidebar); } .sidebar__search input::-webkit-input-placeholder { font: 13px/20px var(--font-sidebar); } .sidebar__search input:focus::-webkit-input-placeholder { font: 13px/20px var(--font-sidebar); } .sidebar__search input:hover::-webkit-input-placeholder { font: 13px/20px var(--font-sidebar); } @media screen and (min-width: 481px) { .sidebar__search input::placeholder { opacity: 0; transition: opacity .15s ease-in-out; } .sidebar__search input::-webkit-input-placeholder { opacity: 0; transition: opacity .15s ease-in-out; } .sidebar__search input:focus::placeholder { opacity: 1; } .sidebar__search input:hover::placeholder { opacity: 1; } .sidebar__search input:focus::-webkit-input-placeholder { opacity: 1; } .sidebar__search input:hover::-webkit-input-placeholder { opacity: 1; } } .sidebar__search a.add { background: var(--base-cont-top); padding: 6px 10px; box-shadow: var(--shadow-cont-minor); display: flex; border-radius: 6px; position: relative; } .sidebar__search a.add:hover:active { background: var(--base-hlt-notr-hover); } .sidebar__search a.add:after { content: ''; position: absolute; left: -2px; right: -2px; top: -2px; bottom: -2px; background: var(--trans); border-radius: 8px; z-index: -1; transition: all 0.3s ease; } .sidebar__search a.add:hover:after { background: var(--gradient-btn-secondary); } .sidebar__search a.add:hover:active:after { background: var(--base-txt-act-minor); } .sidebar__head { padding: 16px 10px 4px 12px; height: 32px; gap: 8px; } .sidebar__search .switch { display: none; } body.withSidebar .sidebar__wrapper .sidebar__head .switch3, body.withSidebarOver .sidebar__wrapper .sidebar__head .switch, body.withSidebarOver .sidebar__wrapper .sidebar__head .switc2 { display: none; } .sidebar-config .sidebar__head { padding: 6px 15px 6px 0; cursor: pointer; margin-left: 20px; overflow: hidden; height: auto; flex-shrink: 0; } .sidebar-config .sidebar__head .path { font: var(--font-ui-12-mini-med); color: var(--base-txt-secondary); padding: 0 4px; position: relative; height: 20px; } .sidebar-config .sidebar__head .path span {opacity: 0;transition: all 0.25s ease;position: absolute;left: 4px;max-width: 90%;} .sidebar-config .sidebar__head .path span:first-child {opacity: 1;} .sidebar-config .sidebar__head .name { display: flex; flex-direction: row; font: var(--font-ui-22-title-1-bold); color: var(--base-txt-primary); padding: 2px 4px; align-items: center; margin-left: -24px; transition: all 0.5s ease; } .sidebar-config .sidebar__head .name .in { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-config .sidebar__head .name ws-icon svg { fill: var(--base-txt-tertiary); } .sidebar-config .sidebar__head .name ws-icon { transform: scale(1.2); margin-right: 4px; } .sidebar-config .sidebar__head:hover .name, .sidebar-config .sidebar__head.selected .name { margin-left: 0; color: var(--base-txt-tertiary); } .sidebar-config .sidebar__head:hover .path span, .sidebar-config .sidebar__head.selected .path span { color: var(--base-txt-alert-major); } .sidebar-config .sidebar__head:hover .path span:first-child, .sidebar-config .sidebar__head.selected .path span:first-child {opacity: 0;} .sidebar-config .sidebar__head:hover .path span:last-child, .sidebar-config .sidebar__head.selected .path span:last-child { opacity: 1; } a.sidebar-config-back { display: inline-block; margin: 0 auto; padding: 2px 6px; font: var(--font-ui-10-nano-reg); text-align: center; transition: all 0.1s ease; color: var(--base-txt-secondary); box-shadow: inset 0 0 0 1px var(--base-txt-secondary); border-radius: 6px; } a:hover.sidebar-config-back, a.selected.sidebar-config-back { color: var(--base-txt-accent); box-shadow: none; background: var(--base-hlt-g-selected); } .sidebar__head > .flex_content { /* padding: 0 8px; */ /* height: 32px; */ } .sidebar__head .flex_row { height: 32px; } .sidebar__head .account { font: var(--font-ui-18-title-2-semi); color: var(--base-txt-primary); padding: 0 4px; border-radius: 6px; transition: background 0.3s ease; overflow: hidden; } .sidebar__head .account:hover { background: var(--base-cont-trans-low); } .sidebar__head .switch, .sidebar__head .switch2 { transition: background 0.3s ease; } .sidebar__head .account .flex_overflow { padding: 0 4px; } .sidebar__head svg { width: 20px; height: 20px; } @media (max-width: 1080px) { .sidebar__head .switch, .sidebar__head .switch2 { display: none } } @media (min-width: 1080px) { /*body.withSidebarOver .sidebar__head .switch {*/ /* display: none*/ /*}*/ body .sidebar__head .switch2, body.withSidebar .sidebar__head .switch2 { display: none } } /* ----------------------------------------------- */ .sidebar__projects hr { margin: 8px 0; border: none; border-top: 0.5px solid var(--base-line-secondary); } .sidebar__projects:not(.search_started) .sidebar__projects__group:not(.sidebar__projects__group-collapsed):not(.sidebar__projects__group-waste) { padding-bottom: 12px; } /*.sidebar__projects-withFolderDrag .sidebar__projects__group:not(.sidebar__projects__group-extra) {*/ /* padding-bottom: 0 !important;*/ /*}*/ .sidebar__projects__group a { color: inherit; } .sidebar__projects .sidebar__projects__group + hr { transition: all 0.2s ease-in; } .sidebar__projects.search_focused hr, .sidebar__projects.search_started hr { display: none; } .sidebar__projects__group span.space, .sidebar__projects__item span.space { width: 20px; height: 20px; display: block; flex-shrink: 0; position: relative; } .sidebar__projects .item_empty .msg { padding: 0 16px; } .sidebar__projects .item_empty .msg { font: var(--font-txt-13-small-reg); color: var(--base-txt-secondary); } .sidebar__projects .item_empty .actions { display: flex; justify-content: center; padding: 8px 0; gap: 6px; } .sidebar__projects__group__title { font: var(--font-ui-14-regular-semi); display: flex; flex-direction: row; padding: 0 12px 0 8px; height: var(--sidebar-item-height); flex-wrap: nowrap; align-items: center; cursor: pointer; position: relative; } .sidebar__projects__group:not(.sidebar__projects__group-extra) .sidebar__projects__group__title:before { content: ''; position:absolute; width: 8px; height:20px; background: var(--folder-color); left: -4px; border-radius: 4px; } .proj_folder_color0 .sidebar__projects__group__title:before { display: none } .sidebar__projects__group__links { padding: 32px 12px 32px 20px; display: flex; flex-wrap: wrap; row-gap: 4px; column-gap: 6px; } .sidebar__projects__group__title > ws-icon svg { fill: var(--folder-color); } .sidebar__projects__group-archive .sidebar__projects__group__title { color: var(--base-txt-tertiary); } .sidebar__projects__group-archive .sidebar__projects__group__title > ws-icon svg { fill: var(--base-txt-tertiary); } .sidebar__projects__group__title > * { } .sidebar__projects__group-extra .sidebar__projects__group__title { font-weight: normal; padding-left: 4px; } .sidebar__projects__group-archive ws-icon:last-child { width: 24px; height: 24px; } .sidebar__projects__group__title:not(:has(> .menu_open)) .but { display: none; } .sidebar__projects__group__title:not(.inline-edit):hover .but { display: flex; } .sidebar__projects__group__title .but, .sidebar__projects__item .but { width: 20px; height: 20px; border-radius: 4px; padding: 2px; } .sidebar__projects__group__title .but:hover, .sidebar__projects__group__title .but.menu_open, .sidebar__projects__item .but:hover, .sidebar__projects__item .but.menu_open { background: var(--base-hlt-g-hover); } .sidebar__projects__group__title .but:hover:active { background: var(--base-hlt-g-pressed); } .sidebar__projects__group__title:hover { background: linear-gradient(180deg, var(--base-hlt-g-hover), var(--trans)); } .sidebar__projects__group-collapsed .sidebar__projects__group__title:hover { background: var(--base-hlt-g-hover); } .sidebar__projects.search_started .sidebar__projects__group__title { pointer-events: none; } @media screen and (min-width: 481px) { .sidebar__projects__group[data-key="latest"] .sidebar__projects__group__title { display: none; } } .sidebar__projects__group[data-key="latest"] .sidebar__projects__group__title { pointer-events: none; } .sidebar__projects__group[data-key="latest"] .sidebar__projects__group__title ws-icon[name*=arrows] { opacity: 0; } .sidebar__projects__group__title > .in { padding: 0 4px 0 6px; } .sidebar__projects__group__title .in i { font-weight: normal; color: var(--base-txt-secondary); } .sidebar__projects__group__title .in .cnt { color: var(--base-txt-tertiary); display: none; } .sidebar__projects__group__title .in .overdue_dot, .sidebar__projects__group__title .in .new_dot { display: none; } .sidebar__projects__group-collapsed .sidebar__projects__group__title .in .cnt { font: var(--font-ui-14-regular-reg); padding: 0 4px; display: inline-block; } .sidebar__projects__group-collapsed .sidebar__projects__group__title .in .overdue_dot, .sidebar__projects__group-collapsed .sidebar__projects__group__title .in .new_dot { display: inline-block; } .sidebar__projects__group__title .in .cnt_empty { font: var(--font-ui-14-regular-reg); padding: 0 4px; display: inline-block; color: var(--base-txt-tertiary); } .sidebar__projects__group-collapsed:not([data-key="latest"]) .sidebar__projects__group__content { display: none; } .sidebar__projects__group[data-key="latest"] .sidebar__projects__item .but { display: none !important; } .sidebar__projects__group[data-key="latest"] .sidebar__projects__item .r { display: block !important; } .sidebar__projects__group__title input:focus { box-shadow: var(--shadow-brd-focus); } .sidebar__projects__group__title input { margin: 0; flex-grow: 1; padding: 2px 6px; font: 600 14px/20px var(--font-sidebar); height: auto; border: none; box-shadow: var(--shadow-brd-enable); } .sidebar__projects__group__add { margin: 0 0 4px 34px; padding: var(--sidebar-text-padding); } .sidebar__projects__group__add input { padding-right: 32px; } .sidebar__projects__group__add:hover input { display: block; } .sidebar__projects__group__add .wysiwyg { display: flex; border-radius: 4px; width: 20px; height: 20px; padding: 2px; margin: 3px 0 0 -35px; } .sidebar__projects__group__add svg { fill: var(--colors-graphite-trans-700); } .sidebar__projects__group__add .wysiwyg:hover svg { fill: var(--colors-graphite-trans-960); } .sidebar__projects__group__add .wysiwyg:hover { background: var(--colors-graphite-trans-100); } .sidebar__projects__group__add .wysiwyg:active { background: var(--colors-graphite-trans-300); } .sidebar__projects__group__add .wysiwyg:active svg { fill: var(--colors-graphite-trans-960); } .sidebar__projects__group__title > svg:first-child { } .sidebar__projects__group__title svg use:last-child { display: none; } .sidebar__projects__group__title svg use:first-child { display: inline-block; } .sidebar__projects__group-company .sidebar__projects__group__title ws-icon:nth-child(2) svg, .sidebar__projects__group-company .sidebar__projects__group__title svg:nth-child(2) { fill: var(--base-btn-primary-minor); } .sidebar__projects__group-company-my .sidebar__projects__group__title ws-icon:nth-child(2) svg, .sidebar__projects__group-company-my .sidebar__projects__group__title svg:nth-child(2) { fill: var(--base-btn-fresh-minor); } .sidebar__projects__group-collapsed .sidebar__projects__group__title svg use:first-child { display: none; } .sidebar__projects__group-collapsed .sidebar__projects__group__title svg use:last-child { display: inline-block; } .sidebar__projects.search_started .sidebar__projects__group__title .cnt, .sidebar__projects.search_started .sidebar__projects__group__title .but, .sidebar__projects.search_started .sidebar__projects__group__title ws-icon[name*=arrows], .sidebar__projects__group-collapsed:not(.sidebar__projects__group-extra) .sidebar__projects__group__title ws-icon[name*=arrows] { display: none } .sidebar__projects__group .sidebar__projects__group__title ws-icon[name*=arrows], .sidebar__projects__group .sidebar__projects__group__title ws-icon[name*=arrows] svg { width: 16px; height: 16px; } .sidebar__projects__group .sidebar__projects__group__title ws-icon[name*=arrows] svg { margin-left: -2px; } .sidebar__projects__item span.space:first-child ws-icon[name*=shape-circle-6] svg { margin-right: -2px; } .sidebar__projects__item { padding: var(--sidebar-item-padding); height: var(--sidebar-item-height); color: inherit; cursor: pointer; } .sidebar__projects__item-menu__item { padding: var(--sidebar-item-padding); height: var(--sidebar-item-height); color: var(--base-txt-tertiary); --icon-color: var(--base-txt-tertiary); font: var(--font-ui-12-mini-reg); cursor: pointer; } .sidebar__projects__item-menu__item:hover { color: var(--base-txt-accent); --icon-color: var(--base-txt-accent); background: var(--base-hlt-g-hover); } .sidebar__projects__item-menu__item .in { padding: var(--sidebar-text-padding); } .sidebar__projects__group-extra[data-group="-1"] .sidebar__projects__group__title { padding-left: 12px; font: var(--font-ui-12-mini-reg); } .sidebar__projects__group-extra[data-group="-1"] .sidebar__projects__group__title a ws-icon svg { fill: var(--base-txt-tertiary); transition: opacity .15s linear; } .sidebar__projects__group-extra[data-group="-1"] .sidebar__projects__group__title .in { opacity: 0; color: var(--base-txt-tertiary); transition: opacity .15s linear; font: var(--font-ui-12-mini-reg); padding-left: 4px; } .sidebar__projects__group-extra[data-group="-1"] .sidebar__projects__group__title:hover { background: var(--base-hlt-g-hover); } .sidebar__projects__group-extra[data-group="-1"] .sidebar__projects__group__title:hover .in { color: var(--base-txt-accent); opacity: 1; } .sidebar__projects__group-extra[data-group="-1"] .sidebar__projects__group__title:hover a ws-icon svg { fill: var(--base-txt-accent); } .sidebar__projects__group-extra[data-group="-1"] .sidebar__projects__group__title .in.whenDrag, .sidebar__projects-withDrag .sidebar__projects__group-extra[data-group="-1"] .sidebar__projects__group__title .in { display: none; } .sidebar__projects-withDrag .sidebar__projects__group-extra[data-group="-1"] .sidebar__projects__group__title .in.whenDrag { display: block; opacity: 1; color: var(--base-txt-accent) !important; } .sidebar__projects-withDrag .sidebar__projects__group-extra[data-group="-1"] .sidebar__projects__group__title a ws-icon svg { fill: var(--base-txt-accent) !important; } .sidebar__projects .overdue_dot svg { fill: var(--base-txt-btn-w); } .sidebar__projects .new_dot svg { fill: var(--base-txt-btn-c); } .sidebar__projects__group__title .overdue_dot { z-index: 3; } .sidebar__projects__group__title .overdue_dot, .sidebar__projects__group__title .new_dot { margin-left: -6px; position: relative; } .sidebar__projects__group__title .overdue_dot svg, .sidebar__projects__group__title .new_dot svg { z-index: 2; position: relative; } .sidebar__projects__group__title .overdue_dot:before, .sidebar__projects__group__title .new_dot:before { display: block; content: ''; width: 8px; height: 8px; background: var(--base-cont-mid); border-radius: 8px; position: absolute; z-index: 1; top: calc(50% - 4px); left: calc(50% - 4px); } .sidebar__projects__group__title .overdue_dot + .new_dot { margin-left: -16px; } .sidebar__projects__item-waste { color: var(--base-txt-tertiary); } .sidebar__projects__item > .space:first-child ws-icon[name="block"] { --icon-size: 12px; } .sidebar__projects__item:hover, .sidebar__projects__item.selected { box-shadow: var(--shadow-brd-hover); } .sidebar__projects__item .tags span.tag { box-shadow: none; } .sidebar__projects__item:has(.menu_open) .r, .sidebar__projects__item:not(.sidebar__projects__item-waste):hover .r { display: none !important; } .sidebar__projects__item-active { background: var(--base-hlt-g-hover); position: relative; } .sidebar__projects__item-active:not(.drag_clone):before { /* content: ''; */ position: absolute; top: 0; left: 0; border: 0px solid var(--sidebar-cont-base); border-width: 16px 8px; border-color: transparent transparent transparent var(--sidebar-cont-base); } .sidebar__projects__item .ico { margin: 0 0 0 -24px; } .sidebar__projects__item:not(:hover):not(:has(> .menu_open)) .but { display: none; } .sidebar__projects__item .l { margin: 0 0 0 -20px; float: left; width: 20px; } .sidebar__projects__item .r { align-items: center; gap: 2px; display: none; } .sidebar .sidebar__projects__groups:has(.menu_open) .sidebar__projects__item .r, .primaryMenu__wrapper:hover ~ .sidebar__wrapper .sidebar__projects__item .r, .sidebar:hover .sidebar__projects__item .r { display: flex; } .sidebar__projects__item .r span.terms_label_warm, .sidebar__projects__item .r span.terms_label_hot { font: var(--font-ui-11-micro-semi); background: none; padding: 0 4px; } .sidebar__projects__item .r span.terms_label_warm { color: var(--base-txt-btn-b) !important; } .sidebar__projects__item .r span.terms_label_hot {color: var(--base-txt-btn-w) !important;} .sidebar__projects__more { display: flex; flex-direction: row; padding: var(--sidebar-item-padding); height: var(--sidebar-item-height); flex-wrap: nowrap; align-items: center; } .sidebar__projects__more a.in { padding: 2px 8px; margin: -2px 0; font: 12px/20px var(--font-sidebar); color: var(--base-txt-secondary); display: flex; flex-direction: row; background: var(--base-cont-trans-low); border-radius: 13px; } .sidebar__projects__more a.in:hover { color: var(--base-txt-act-minor); background: var(--base-hlt-hover); fill: var(--base-txt-act-minor); } .sidebar__projects__more a.in svg { float: left; transform: scale(0.8); } .sidebar__projects__more a.in span { padding: 0 4px; } .sidebar__projects__moreContent { display: none; } .sidebar__projects__moreContent-active { display: block; } .sidebar__projects__item a { display: flex; flex-direction: row; } .sidebar__projects__item .in { padding: var(--sidebar-text-padding); } .sidebar__projects__item .proj_color { width: 16px; height: 16px; display: block; margin: 2px; border-radius: 3px; } .sidebar__projects__item ws-icon.proj_color, .sidebar__projects__item ws-icon.proj_color svg { width: 16px; height: 16px; } .sidebar__projects__item .proj_color ws-emoji { width: 14px; height: 14px; padding: 1px; } .sidebar__projects__item ws-icon ~ .proj_color { display: none; } .sidebar__projects__item-active .proj_color { } .sidebar__projects__item__dropPlace, .sidebar__projects__group__dropPlace { height: 2px; margin: -1px 22px -1px 22px; position: relative; transition: .1s linear; pointer-events: none; display: none; } .sidebar__projects-withDrag .sidebar__projects__item__dropPlace, .sidebar__projects-withFolderDrag .sidebar__projects__group__dropPlace { display: block; } .sidebar__projects__item-waste + .sidebar__projects__item__dropPlace { display: none; } .sidebar__projects__item-waste .r ws-icon { width: 24px; height: 24px; --icon-size: 16px; } .sidebar__projects__item-waste .r ws-icon svg { fill: var(--base-txt-ghost); } .sidebar__projects__item__dropPlace.dragHover { background: var(--base-hlt-b-invert-major); margin: -1px 11px; } .sidebar__projects__group__dropPlace.dragHover { background: var(--base-hlt-b-invert-major); margin: -1px 0; } .sidebar__projects__item-waste, .sidebar__projects__item-arch, .sidebar__projects__group-waste, .sidebar__projects__group-hidden, .sidebar__projects__item-hidden, .sidebar__projects:not(.with-emptyFolders) .sidebar__projects__group-empty { display: none; } .sidebar__projects.search_started .sidebar__projects__group-waste:not(.sidebar__projects__group-hidden), .sidebar__projects.with-hiddenProjects .sidebar__projects__group-waste:not(.sidebar__projects__group-hidden) { display: block; } .sidebar__projects.search_started .sidebar__projects__item-waste:not(.sidebar__projects__item-hidden), .sidebar__projects.with-hiddenProjects .sidebar__projects__item-waste:not(.sidebar__projects__item-hidden), .sidebar__projects.search_started .sidebar__projects__item-arch:not(.sidebar__projects__item-hidden), .sidebar__projects.with-archProjects .sidebar__projects__item-arch:not(.sidebar__projects__item-hidden), .sidebar__projects .sidebar__projects__group-archOnly .sidebar__projects__item-arch:not(.sidebar__projects__item-hidden) { display: flex; } .sidebar__projects__item-arch .space ws-icon[name=archive] { --icon-color: var(--base-txt-muted); } .sidebar__projects__group-partSearch, .sidebar__projects__item-partSearch { opacity: 0.5; } .sidebar__projects.search_started .sidebar__projects__item-menu__item.skip_search { display: none !important; } /* ----------------------------------------------- */ .primaryMenuButton__wrapper { /* padding: 0 12px; */ display: flex; align-items: center; align-content: center; width: 40px; height: 40px; justify-content: center; } .headerGeneral:not(.headerGeneral-collapsed) .primaryMenuButton__wrapper { place-self: flex-start; margin-top: 6px; } @media (max-width: 480px) { .sidebar__head { display: none; } } #sidebarAccMenu { width: 320px; } #sidebarAccMenu ws-btn { padding: 2px; } body[data-page="account_dashboard"] #sidebarAccMenu .menu__group-homepage { display: none; } #sidebarExtraMenu { left: 0; width: 248px; overflow: hidden; } #sidebarExtraMenu .menu__group:not(.menu__group-fill) .menu__item.selected, #sidebarExtraMenu .menu__group:not(.menu__group-fill) .menu__item:not(.ign_hover):hover, #sidebarExtraMenu.menu-primary .menu__group:not(.menu__group-fill) .menu__item.selected:hover { background: var(--base-hlt-invert); } #sidebarExtraMenu .menu__group:not(.menu__group-fill) .menu__item:not(.menu__item-disabled).selected span, #sidebarExtraMenu .menu__group:not(.menu__group-fill) .menu__item:not(.menu__item-disabled):not(.ign_hover):hover span, #sidebarExtraMenu.menu-primary .menu__group:not(.menu__group-fill) .menu__item:not(.menu__item-disabled).selected:hover span { color: var(--base-txt-alt-light); } #sidebarExtraMenu .menu__group:not(.menu__group-fill) .menu__item:not(.menu__item-disabled).selected svg, #sidebarExtraMenu .menu__group:not(.menu__group-fill) .menu__item:not(.menu__item-disabled):not(.ign_hover):hover svg, #sidebarExtraMenu .menu__group:not(.menu__group-fill) .menu__item:not(.menu__item-disabled).selected:hover svg { fill: var(--base-txt-alt-light); } #sidebarProfileMenu { width: 460px; border-radius: 20px; padding-bottom: 0; } #sidebarAddMenu { width: 280px; padding: 0; overflow: hidden; } #sidebarAddMenu .menu__group { padding: 0; } #sidebarAddMenu .menu__group .menu__item:first-child:hover { background: var(--base-hlt-easy); } #sidebarAddMenu .menu__group .menu__item:first-child ws-icon { background: var(--base-hlt-hover); } #sidebarAddMenu .menu__group .menu__item:first-child:hover ws-icon { background: var(--base-hlt-invert); } #sidebarAddMenu .menu__group .menu__item:first-child ws-icon svg { fill: var(--base-txt-act-minor); } #sidebarAddMenu .menu__group .menu__item:first-child:hover ws-icon svg { fill: var(--base-txt-alt-light); } #sidebarAddMenu .menu__group .menu__item:nth-child(2):hover { background: #18a58114; } #sidebarAddMenu .menu__group .menu__item:nth-child(2):hover .cnt_warn { display: none; } #sidebarAddMenu .menu__group .menu__item:nth-child(2) ws-icon { background: #18a58126; } #sidebarAddMenu .menu__group .menu__item:nth-child(2):hover ws-icon { background: var(--colors-pine-800); } #sidebarAddMenu .menu__group .menu__item:nth-child(2) ws-icon svg { fill: var(--colors-pine-700); } #sidebarAddMenu .menu__group .menu__item:nth-child(2):hover ws-icon svg { fill: var(--base-txt-alt-light); } #sidebarAddMenu .menu__group .menu__item:nth-child(3):hover { background: var(--base-hlt-b-easy); } #sidebarAddMenu .menu__group .menu__item:nth-child(3):hover .cnt_warn { display: none; } #sidebarAddMenu .menu__group .menu__item:nth-child(3) ws-icon { background: var(--base-hlt-b-hover); } #sidebarAddMenu .menu__group .menu__item:nth-child(3):hover ws-icon { background: var(--base-hlt-b-invert); } #sidebarAddMenu .menu__group .menu__item:nth-child(3) ws-icon svg { fill: var(--base-txt-btn-b); } #sidebarAddMenu .menu__group .menu__item:nth-child(3):hover ws-icon svg { fill: var(--base-txt-alt-light); } #sidebarAddMenu .menu__group .menu__item:last-child { padding-bottom: 12px; } #sidebarAddMenu .menu__group .menu__item:last-child:hover { background: var(--base-hlt-g-easy); } #sidebarAddMenu .menu__group .menu__item:last-child ws-icon { background: var(--base-hlt-g-hover); } #sidebarAddMenu .menu__group .menu__item:last-child:hover ws-icon { background: var(--base-hlt-g-invert); } #sidebarAddMenu .menu__group .menu__item:last-child ws-icon svg { fill: var(--base-txt-secondary); } #sidebarAddMenu .menu__group .menu__item:last-child:hover ws-icon svg { fill: var(--base-txt-btn-flip); } #sidebarAddMenu .menu__item { padding: 8px 12px; border-radius: 0; } #sidebarAddMenu .menu__item.selected, #sidebarAddMenu .menu__item:hover, #sidebarAddMenu .menu__item.selected:hover { background: none; } #sidebarAddMenu .menu__item:first-child { padding-top: 12px; } #sidebarAddMenu .menu__item .flex_content { padding-left: 12px; } #sidebarAddMenu .menu__item ws-icon { border-radius: 6px; } .sidebar__projects:not(.search_focused) .sidebar__projects__group[data-key="latest"] { display: none; } .sidebar__projects.search_focused:not(.search_started) .sidebar__projects__group:not([data-key="latest"]) { display: none; } .sidebar__projects.search_focused:not(.search_started) > hr { display: none; } .sidebar__projects.search_started .sidebar__projects__group-extra, .sidebar__projects.search_started .sidebar__projects__more { display: none; } .sidebar__projects.search_started .sidebar__projects__moreContent, .sidebar__projects.search_started .sidebar__projects__group-collapsed .sidebar__projects__group__content { display: block; } .sidebar__projects.search_started svg.is_collapsed { opacity: 0; } .sidebar__projects.search_started hr { display: none; } .sidebar__projects.search_started .item_empty hr { display: block; } .sidebar__menu { padding: 12px 20px 16px 20px; display: flex; flex-direction: column; flex-grow: 1; } .sidebar__menu hr { border: none; border-top: 1px solid var(--base-line-secondary); margin: 8px 0; } .sidebar__menu__item { height: 32px; font: 14px/20px var(--font-sidebar); color: inherit; border-radius: 6px; transition: all 0.3s ease; box-shadow: 0 0 0 20px transparent inset; padding: 0 6px; margin-bottom: 2px; } span.sidebar__menu__item { opacity: 0.5 } .sidebar__menu__item svg { transition: fill 0.3s ease; } .sidebar__menu__item ws-icon[name="award-fill"] svg { fill: var(--colorize-orange); } a.sidebar__menu__item:not(.sidebar__menu__item-active):hover, a.sidebar__menu__item:not(.sidebar__menu__item-active).selected { color: var(--base-txt-btn-b); background: var(--base-hlt-b-pressed); } a.sidebar__menu__item:not(.sidebar__menu__item-active):hover ws-icon svg, a.sidebar__menu__item:not(.sidebar__menu__item-active).selected ws-icon svg { fill: var(--base-txt-btn-b); } a.sidebar__menu__item-active:hover:active { background: var(--base-hlt-g-pressed); fill: var(--white-accent); } .sidebar__menu__item-active, a.sidebar__menu__item-active:hover { background: var(--base-hlt-b-invert); color: var(--white-accent); } a.sidebar__menu__item-active svg, .sidebar__menu__item-active:hover svg { fill: var(--white-accent); } .sidebar__menu__item-disabled { opacity: 0.2; } .sidebar__menu__item .space { width: 20px; height: 20px; padding: 6px; } .sidebar__menu__item ws-icon { width: 32px; height: 32px; } .sidebar__menu__item .in { padding: 0 4px 0 6px; } .sidebar__projects { flex-grow: 1; flex-shrink: 1; position: relative; padding-bottom: 56px; } .sidebar__projects-withDrag, .sidebar__projects-withFolderDrag { pointer-events: none; } .sidebar__projects .sidebar__projects__group__title.dragHover { box-shadow: 0 0 0 1px var(--base-hlt-b-invert-major) inset; z-index: 10; } .sidebar__projects:not(.sidebar__projects-withDrag) .sidebar__projects__group-onlyDrag { display: none; } .sidebar__projects__item.drag_clone, .sidebar__projects__group__title.drag_clone { z-index: 1030; background: var(--base-hlt-notr-hover); height: 32px; color: inherit; display: none; } .search_focused .sidebar__projects__item-draggable, .search_started .sidebar__projects__item-draggable { cursor: pointer; } .sidebar__projects__item-dragThis, .sidebar__projects__group-dragThis { background: var(--base-hlt-b-easy); } .sidebar__projects__item-dragThis2, .sidebar__projects__group-dragThis2 { --anim-bg-color: var(--base-hlt-b-active); animation: ws-bg-blink-and-fadeout 1s ease-in-out infinite; } .sidebar__projects__item-dragThisDone, .sidebar__projects__group-dragThisDone { --anim-bg-color: var(--base-hlt-b-active); animation: ws-bg-blink-and-fadeout 1.5s linear 0s 1 normal none; } .sidebar__projects-withFolderDrag .sidebar__projects__group:not(.sidebar__projects__group-extra) .sidebar__projects__group__title ws-icon:first-child { opacity: 0; } .sidebar-profile .img_big { margin: 0 -20px 16px; height: 160px; text-align: center; } .sidebar-profile .img_big img, .sidebar-profile .img_big span { transform: scale(3.3333); transform-origin: top center; } .sidebar-profile .sidebar__head { height: auto; padding: 28px 20px 0 20px; } .sidebar-profile .sidebar__head .name { text-align: center; font: 600 16px/20px var(--font-base); overflow: hidden; text-overflow: ellipsis; } .sidebar-profile .sidebar__head .name b { font: 600 16px/20px var(--font-base); text-overflow: ellipsis; } .sidebar-profile .sidebar__head .email { cursor: pointer; text-align: center; padding-top: 2px; } .sidebar-profile .sidebar__head .email span { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font: var(--font-ui-11-micro-reg); color: var(--base-txt-tertiary); text-decoration-line: underline; text-decoration-style: dotted; text-decoration-color: transparent; text-decoration-thickness: 0.5px; text-underline-offset: 2px; } .sidebar-profile .sidebar__head .email:hover span, .sidebar-profile .sidebar__head .email.active span { color: var(--base-txt-btn-b); text-decoration-color: var(--base-txt-btn-b); } .sidebar-profile .sidebar__head .email.muted { cursor: auto; pointer-events: none; } @media (min-width: 48px) and (max-width: 1080px) { body.animateSidebar { pointer-events: none; } /* body.mobileSidebar #primaryMenuButton { display: none; } body.mobileSidebar .primaryMenuButton__wrapper { width: 0; } */ body.mobileSidebar .sidebar__wrapper { left: var(--primary-menu-width); } body.mobileAdminMenu .adminMenu__wrapper, body.withAdminMenu .adminMenu__wrapper { left: var(--primary-menu-width); } body.mobileSidebarOver .sidebar__wrapper { left: var(--primary-menu-width); } } @media (max-width: 480px) { body main { left: 0; transition: left 0.15s linear; } .headerGeneral__center { transition: margin-left 0.15s linear; } body.mobileSidebar .headerGeneral__center { margin-left: -44px; } #primaryMenuButton { transition: display 0.15s linear, opacity 0.075s linear 0.075s; transition-behavior: allow-discrete; } body.mobileSidebar #primaryMenuButton { display: none; opacity: 0; } body.mobileSidebar main, body.mobileSidebar main { left: var(--sidebar-width); } } @media (min-width: 481px) { body[data-page=account_dashboard] .sidebar__wrapper .sidebar__head > .account { display: none; } } @media (min-width: 1080px) { body.withSidebar main, body.withAdminMenu main { margin-left: 324px; } body.animateSidebar { pointer-events: none; } #headerGeneral { transition: margin-left 0.15s linear; } body.withSidebar #headerGeneral { margin-left: -44px; /* таким чином іконка проєкту виглядає ніби відступи по 12px зліва і зверху */ } /* такі сторінки мають хрестик, бо там сайдбар відкривається через App.sidebar.slide() */ body:not([data-page=account_dashboard], [data-project="0"]) .sidebar__wrapper .sidebar__head .switch3 { display: none; } body[data-project="0"] .sidebar__wrapper .sidebar__head .switch, body[data-page=account_dashboard] .sidebar__wrapper .sidebar__head .switch { display: none; } #primaryMenuButton { transition: display 0.15s linear; transition-behavior: allow-discrete; } body.withSidebar #primaryMenuButton { display: none; } body.withSidebar .sidebar__wrapper { left: var(--primary-menu-width); } body.withAdminMenu .adminMenu__wrapper { left: var(--primary-menu-width); } body.withSidebarOver .sidebar__wrapper { left: var(--primary-menu-width); } } @media (max-width: 48px) { .sidebar__wrapper, .primaryMenu__wrapper { /* display: none; */ } main { /* margin-left: 0; */ height: 100%; } body.mobileSidebar main { display: none } body.mobileSidebar .sidebar__wrapper { display: block; left: 0; right: 0; width: auto; bottom: 80px; overflow: hidden; } body.mobileSidebar.withTaskPanel .sidebar__wrapper { bottom: 132px; } body.mobileAdminMenu main { display: none } body.mobileAdminMenu .adminMenu__wrapper { display: block; left: 0; right: 0; width: auto; bottom: 76px; overflow: hidden; } .primaryMenu .optional { display: none; } body:not[data-page=search] .searchForm, body:not[data-page=search] #empty_search { margin-left: var(--primary-menu-width); } } @media (min-width: 1080px) { body.withSidebarOver #sidebarOverlay { width: auto; height: auto; right: 0; bottom: 0; /*background: var(--base-cont-trans-low);*/ } } @media (max-width: 1080px) { body.mobileSidebar #sidebarOverlay { width: auto; height: auto; right: 0; bottom: 0; /*background: var(--base-cont-trans-low);*/ } body.mobileAdminMenu #adminMenuOverlay { width: auto; height: auto; right: 0; bottom: 0; /*background: var(--base-cont-trans-low);*/ } } .sidebar-fake .sidebar__projects__group .sidebar__projects__group__title .fake_txt { float: left; background: var(--sidebar-badge-ghost); border-radius: 6px; width: 120px; height: 20px; opacity: 0.1; } .sidebar-fake .sidebar__projects__group:nth-child(3n+1) .sidebar__projects__group__title .fake_txt { width: 160px; } .sidebar-fake .sidebar__projects__group:nth-child(3n+2) .sidebar__projects__group__title .fake_txt { width: 150px; } .sidebar-fake .sidebar__projects__item .fake_txt { float: left; background: var(--colors-alpha-dark-03); border-radius: 8px; width: 120px; height: 16px; } .sidebar-fake .sidebar__projects__item:nth-child(3n+1) .fake_txt { width: 160px; } .sidebar-fake .sidebar__projects__item:nth-child(3n+2) .fake_txt { width: 150px; } .sidebar-fake .sidebar__projects__item:nth-child(4n+1) .fake_txt { opacity: 0.7; } .sidebar-fake .sidebar__projects__group ws-icon { opacity: 0.25; } .sidebar-fake .sidebar__projects__group ws-icon svg { fill: var(--sidebar-ico-ghost); } .sidebar project-tags ws-icon.tag, .sidebar project-stage ws-icon.tag { width:24px; height:24px; --icon-size:16px; } .sidebar project-tags ws-icon.tag0, .sidebar project-stage ws-icon.tag0 { display: none; } @media (max-width: 48px) { .sidebar__projects__group:not(.sidebar__projects__group-extra) .sidebar__projects__group__title { padding-left: 8px; } .sidebar__projects__group__title { height: var(--sidebar-item-height-mobile); overflow: hidden; font: var(--font-ui-16-title-3-bold); } .sidebar__projects__group-extra .sidebar__projects__group__title { font: var(--font-ui-16-title-3-semi); } .sidebar__projects__group-collapsed .sidebar__projects__group__title .in .cnt { padding: 4px 8px 2px; font: var(--font-ui-12-mini-reg); } .sidebar__projects__item { height: var(--sidebar-item-height-mobile); } .sidebar__projects__item .in { font: var(--font-ui-16-title-3-reg); } .sidebar__projects__more { height: var(--sidebar-item-height-mobile); } a.sidebar-config-back { display: none; } } @media (hover: none) { .sidebar__projects__group-collapsed .sidebar__projects__group__title:hover, .sidebar__projects__group__title:hover { background: none; } .sidebar__projects__group__title:not(.inline-edit) .but { display: flex; } .sidebar-config .sidebar__head .path span { opacity: 1; color: var(--base-txt-alert-major); } .sidebar-config .sidebar__head .path span:first-child { opacity: 0; } .sidebar-config .sidebar__head .name { margin-left: 0; color: var(--base-txt-tertiary); } } @media (max-width: 480px) { #sidebar { .sidebar__head { display: none; } .sidebar__search { height: 44px; padding: 0 0 0 14px; gap: 0; flex-shrink: 0; } } .mobile-head__btn--cancelFullscreen { display: none; } #headerMobile { transition: background-color .35s ease-in, box-shadow .35s ease-in; .mobile-head__logo-btn--sidebar { display: none; } } body.mobileSidebar #headerMobile { background: var(--mobile-head-bg-color-gradient-fadeOut); box-shadow: unset; transition: background-color .15s ease-out, box-shadow .15s ease-out; .ws_logo { display: none; } .mobile-head__logo-btn--sidebar { display: flex; } } body.mobileSidebarFullscreen { .mobile-head__right { padding-left: 0; } .mobile-head__right > * { display: none; } .mobile-head__btn--cancelFullscreen { display: flex; } } .mobile-head__btn--cancelFullscreen .btn.btn-plain { font: var(--font-ui-15-large-med); &> span:not([class]) { padding: 0 4px; } } .sidebar .sidebar_trial { padding-bottom: calc(12px + var(--innerFooterMobile-height)); } .sidebar .sidebar__projects__groups { padding-bottom: var(--innerFooterMobile-height); } .sidebar--trial .sidebar__projects__groups { padding-bottom: 0; } } .sidePanel__header { /* margin-bottom: 8px; */ /* margin-top: 4px; */ padding-bottom: 8px; padding-top: 4px; display: flex; align-items: center; justify-content: space-between; padding-left: 16px; padding-right: 14px; height: 32px; gap: 12px; } .sidePanel__header.sidePanel__header-with-date { display: grid; grid-template-columns: 1fr max-content 1fr; .sidePanel__title { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: block; } .sidePanel__close { gap: 12px; margin-left: auto; } } .sidePanel__header .sidePanel__title { color: var(--base-txt-accent); font-size: 22px; font-style: normal; font-weight: 590; line-height: 28px; display: flex; align-items: center; flex-grow: 1; flex-shrink: 1; min-width: 0; } .sidePanel__header .sidePanel__title .date { margin: 0 0 0 12px; } .sidePanel__header .sidePanel__title .av_nm { border-radius: 8px; transform:scale(0.75); transform-origin: 0; margin-right: -2px; } .sidePanel__header .sidePanel__title .hotKey { opacity: 0; transition: opacity 100ms linear; } .sidePanel__header .sidePanel__title:hover .hotKey { opacity: 1; } .sidePanel__titleRows { font: var(--font-ui-12-mini-reg); color: var(--base-txt-secondary); } .sidePanel__titleRows a { font: var(--font-ui-18-title-2-bold); color: var(--base-txt-primary); } @media (max-width: 480px) { body.mobile .sidePanel__header .sidePanel__title .hotKey { display: none; } } .sidePanel-tasks .sidePanel__title a > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidePanel-tasks .sidePanel__title a { color: var(--base-txt-primary); max-width: 300px; } .sidePanel-tasks .sidePanel__title a.act.main:hover { text-decoration: underline; text-decoration-style: dotted; } .sidePanel-tasks .sidePanel__title a.act ws-icon{ margin-left: 6px; } .sidePanel-tasks .sidePanel__title .uname:empty { display: none; } .sidePanel-tasks .sidePanel__title a.act ws-icon { transition: all 100ms linear; } .sidePanel-tasks .sidePanel__title a.act.reset ws-icon { opacity: .8; } .sidePanel-tasks .sidePanel__title a.act.reset:hover ws-icon { transform: rotate(-90deg); opacity: 1; } .sidePanel-tasks .sidePanel__title a.act.open { display: flex; align-items: center; min-width: 0; } .sidePanel-tasks .sidePanel__title a.act.open:hover ws-icon { transform: translateY(2px); } .sidePanel__close ws-btn { /* width: 32px; */ } .sidePanel-tasks .sidePanel__tabs ul { overflow: hidden; flex-shrink: 1; } .sidePanel-recent_tasks .sidePanel__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } #dropmysortmenu .menu__itemFake { padding-right: 0; } #dropmysortmenu, sidepanel-tune-menu-body { & .menu__itemFake > .in { font: var(--font-ui-13-small-semi); } } .sidePanel__list__group.hidden, .sidePanel__list__item.hidden { display: none !important; } .sidePanel-search .scrollZone, .sidePanel-tasks .scrollZone { padding: 0px; margin: 0px; } .sidePanel-search .sidePanel__search__form, .sidePanel-tasks .sidePanel__search__form { padding: 0 0 4px 0; } .sidePanel-search .searchInput, .sidePanel-tasks .searchInput { margin: 12px 20px 0 20px; height: 36px; border-radius: 18px; } .sidePanel-tasks .searchInput { margin: 6px 20px 6px 20px; } .searchInputWrapper { gap: 10px; width: 100%; box-sizing: border-box; padding: 6px 20px 6px 20px; .searchInput { margin: 0; } } .sidePanel.sidePanel--withTopPanel { --top-panel-height: 48px; .sidePanel__topPanel { background: var(--base-cont-mid); backdrop-filter: blur(4px); position: relative; z-index: 1001; transition: margin-top .15s ease; } .sidePanel__header, .sidePanel__tabs { position: relative; z-index: 1002; background: var(--base-cont-mid); /* box-shadow: 0 var(--screen-px) 0 var(--base-line-tertiary); */ } .sidePanel__tabs { padding-right: 8px; .sidePanel__tabs__right + ws-menu > ws-btn { position: absolute; right: 8px; } } .sidePanel__tabs__right.showOnWithoutTopPanel { overflow: hidden; width: 0px; transform: scale(0); transition: width .15s ease, transform .15s ease; /* компенсуємо обводку кнопок при роботі з клавіатури */ padding-block: 4px; margin-block: -4px; } .sidePanel__list.scrollZone { padding-top: var(--top-panel-height) !important; margin-top: calc(-1 * var(--top-panel-height)) !important; transition: margin-top .15s ease; } &.withoutTopPanel { .sidePanel__tabs__right { z-index: 1; width: 44px; transform: scale(1); } .sidePanel__topPanel { margin-top: calc(-1 * var(--top-panel-height)); } .sidePanel__list.scrollZone { margin-top: 0px !important; } } &.sidePanel--withProgress { --top-panel-height: 44px; } } .sidePanel-search .searchInput-mobile { display: none; } .sidePanel-search .searchInput input[type=text], .sidePanel-tasks .searchInput input[type=text] { color: var(--base-txt-primary); font-size: 14px; font-style: normal; font-weight: 590; line-height: 20px; } .sidePanel-search .searchInput input[type=text]::placeholder, .sidePanel-tasks .searchInput input[type=text]::placeholder { overflow: hidden; color: var(--base-txt-tertiary); text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; } .sidePanel-search .searchInput ws-btn, .sidePanel-tasks .searchInput ws-btn { margin-right: 4px; } .sidePanel-search .searchInput ws-btn button, .sidePanel-tasks .searchInput ws-btn button { border-radius: 6px 14px 14px 6px; } .sidePanel-search .searchInput ws-btn .btn-double button, .sidePanel-tasks .searchInput ws-btn .btn-double button { border-radius: 0; padding: 0 6px !important; } .sidePanel-search .searchInput ws-btn .btn-double button:first-child, .sidePanel-tasks .searchInput ws-btn .btn-double button:first-child { border-radius: 14px 0 0 14px; } .sidePanel-search .searchInput ws-btn .btn-double button:last-child, .sidePanel-tasks .searchInput ws-btn .btn-double button:last-child { border-radius: 0 14px 14px 0; } .sidePanel-search .searchInput ws-btn button span, .sidePanel-tasks .searchInput ws-btn button span { font-weight: 400; } .sidePanel-search .searchInput ws-btn button.btn-b, .sidePanel-tasks .searchInput ws-btn button.btn-b { background: var(--base-hlt-b-selected); padding-right: 8px; color: var(--base-txt-btn-b); font-size: 12px; font-style: normal; font-weight: 510; line-height: 20px; } .sidePanel-search .searchInput ws-btn button.btn-b:hover, .sidePanel-tasks .searchInput ws-btn button.btn-b:hover { box-shadow: 0 0 0 1px var(--base-hlt-b-active) inset; background: var(--base-hlt-b-active); } .sidePanel-search .searchInput:focus-within, .sidePanel-tasks .searchInput:focus-within { /* box-shadow: var(--shadow-brd-enable); */ background: none; } .sidePanel-search .searchInput .in.search_started a.delete, .sidePanel-tasks .searchInput .in.search_started a.delete { display: flex; height: 20px; min-width: 16px; padding: 0px 6px; justify-content: center; align-items: center; gap: 10px; border-radius: 12px; border: 1px solid var(--base-txt-muted); overflow: hidden; color: var(--base-txt-tertiary); text-align: center; text-overflow: ellipsis; font-size: 12px; font-style: normal; font-weight: 400; margin-right: 7px; } .sidePanel-search .searchInput .in.search_started a.delete.withIcon, .sidePanel-tasks .searchInput .in.search_started a.delete.withIcon { --icon-color: var(--base-txt-tertiary); border: unset; padding: 0; } .sidePanel-search .searchInput .in.search_started #search_texts, .sidePanel-tasks .searchInput .in.search_started #search_texts { display: none; } .sidePanel-search .searchInput .in.search_loading:has(> .loader) > ws-icon { display: none; } .sidePanel-search .searchInput .in .loader { /* margin: 0 9.5px; */ margin: 0 calc((32px - var(--loader-size)) / 2); } .sidePanel-search .searchInput .in:not(.search_loading) .loader { display: none; } .sidePanel__empty { position: relative; display: none; padding: 0 10px 100px; text-align: center; font: 14px/22px var(--font-base); color: var(--base-txt-secondary) } .sidePanel__empty-visible { display: block } .sidePanel__empty__img { height: 288px; width: 100%; background-repeat: no-repeat; background-position: center center; } .sidePanel__empty__img { margin-top: 48px; } @media screen and (max-width: 480px) { .sidePanel__empty { padding-bottom: 0; } .sidePanel__empty-visible { display: flex; flex-direction: column; } .sidePanel__empty-visible > * { flex-shrink: 0; } .sidePanel__empty__img { height: calc(288px + 48px); min-height: 288px; background-position: center bottom; flex-shrink: 1; margin-top: 0; } } .sidePanel__empty .or_line { border-top: 1px solid var(--base-line-secondary); margin: 40px -10px 0 -10px; text-align: center } .sidePanel__empty .title, .sidePanel__empty-bookmarks .title { font: var(--font-ui-18-title-2-semi); color: var(--base-txt-primary); padding: 8px; } .sidePanel__empty-bookmarks .title { text-align: center; text-wrap: balance; } .sidePanel__empty .hint { font: var(--font-ui-14-regular-reg); color: var(--base-txt-secondary); } .sidePanel__empty .actions { display: flex; gap: 12px; justify-content: center; padding: 16px; } .sidePanel__empty .or_line .or { display: block; width: 40px; background: var(--base-cont-mod-top); margin: -13px auto 30px; color: var(--base-txt-ghost); font: 14px/22px var(--font-base) !important } .sidePanel__empty .or_line .ico_c { margin: 30px auto 0 } .sidePanel__empty a.a { color: var(--base-txt-primary); border-bottom: 1px dashed var(--base-txt-accent) } .sidePanel__empty--not-found, .sidePanel__empty-bookmarks { padding-top: 59px; padding-bottom: 0; font: var(--font-ui-15-large-med); } .sidePanel__empty--not-found img { width:440px; margin:-40px 20px; border-radius:20px; } .sidePanel__empty--not-found + .sidePanel__empty__img { margin-top: 25px; } .sidePanel__empty-buttons { margin-top: 24px; } .sidePanel__search__presets { display: flex; flex-direction: column; padding: 20px 20px 28px 20px; gap: 16px; } .sidePanel__search__presets .sidePanel__search__presets_row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; } .sidePanel__search__presets .sidePanel__search__presets_row .sidePanel__search__preset { flex: 1; flex-shrink: 1; } .sidePanel__search__presets .sidePanel__search__preset { --ripple-color: var(--base-hlt-b-hover); flex-direction: column; color: var(--base-txt-secondary); display: flex; height: 68px; padding: 12px 8px 0; align-items: center; border-radius: 12px; background: var(--base-cont-top); box-shadow: var(--shadow-cont-minor-outline); row-gap: 0; transition: row-gap .15s ease-in-out, border-color .15s ease-in-out,box-shadow .15s ease-in-out; min-width: max-content; } .sidePanel__search__presets .sidePanel__search__preset ws-icon { padding: 8px; border-radius: 50%; background-color: transparent; transition: background-color .15s ease-in-out; } .sidePanel__search__presets .sidePanel__search__preset ws-icon svg { fill: var(--base-txt-secondary); } .sidePanel__search__presets team-timer { flex: 1; padding: 0 8px; .sidePanel__search__preset { margin: 0 -8px; } } .sidePanel__search__preset .symbol { position: relative; } .sidePanel__search__preset .cnt_new { position: absolute; min-width: 14px; height: 14px; padding: 0 4px; box-sizing: border-box; box-shadow: 0 0 0 2px var(--base-cont-top); border-radius: 16px; font: var(--font-ui-10-nano-med); right: 1px; top: 1px; color: var(--sidebar-cont-base); background: var(--lbl-today-major); } .sidePanel__search__presets .sidePanel__search__preset:hover { cursor: pointer; box-shadow: var(--shadow-cont-major-outline); background: var(--base-cont-top-elevated); row-gap: 4px; transition: row-gap .15s ease-in-out, border-color .15s ease-in-out,box-shadow .15s ease-in-out; } .sidePanel__search__presets .sidePanel__search__preset:hover ws-icon { background-color: var(--base-hlt-b-hover); } .sidePanel__search__presets .sidePanel__search__preset:hover ws-icon svg { fill: var(--base-txt-btn-b); } .sidePanel__search__presets .sidePanel__search__preset .in { font-size: 12px; line-height: 20px; margin-top: -4px; } .sidePanel__search__presets .sidePanel__search__presets_footer { flex-direction: column; display: flex; align-items: center; justify-content: space-around; } .sidePanel__search__presets .sidePanel__search__presets_footer > span { color: var(--base-txt-secondary); text-align: center; font-size: 11px; line-height: 16px; margin-bottom: 12px; } .sidePanel__list__group { /* border-bottom: 0.5px solid var(--base-line-ghost); */ padding: 0 0px 0px; margin-bottom: 0px; &:after { content: ''; height: 16px; /* для візуального відступу між групами */ } &[level="2"] { margin-top: 0 !important; margin-bottom: 0 !important; &:after { height: 8px; } } } .sidePanel__list__group.archived .space-icon { --icon-color: var(--base-txt-tertiary); } .sidePanel__list__group.archived .sidePanel__list__item .in { color: var(--base-txt-tertiary); } .sidePanel__list__group.bookmarks .space-icon svg { fill: var(--colorize-lbl-brown); } .sidePanel__list .spacer_h { height:16px } @media (min-width: 481px) { .sidePanel.sidePanel--withTopPanel.withoutTopPanel { --float-title-offset: calc(-1 * var(--top-panel-height)); } .sidePanel__list__group__title.mm_float { position: sticky; top: calc(0px + var(--float-title-offset, 0px)) !important; } .sidePanel__list__group[level="2"] .sidePanel__list__group__title.mm_float { z-index: 998; top: calc(40px + var(--float-title-offset, 0px)) !important; background: var(--base-cont-mid-opac); /* to match gradien bg from level1 title */ } } .sidePanel__list__group { display: flex; flex-direction: column; & .sidePanel__list__group__title { .in:not(.text_overflow) { gap: 5px; display: flex; &[has-action="true"] { &:hover { text-decoration: underline dotted; text-underline-position: from-font; } cursor: pointer; } } } &[level="1"] { & > .sidePanel__list__group__title .in { font: var(--font-ui-18-title-2-semi); } & .sidePanel__list__group { & .sidePanel__list__group__title, & .sidePanel__list__item { padding-left: 28px; } padding-top: 0; padding-bottom: 0; margin-bottom: 2px; margin-top: 6px; } /* відступ є через ::after, для коректного витіснення sticky-заголовка */ /* & + & { margin-top: 20px; } */ } &[level="2"] { & > .sidePanel__list__group__title .in { font: var(--font-ui-16-title-3-semi); } } } .sidePanel__list__group[collapsible="true"] > .sidePanel__list__group__title .in { flex-grow: 0; margin: 0; align-items: center; } .sidePanel__list__group__title { color: var(--base-txt-primary); font: var(--font-ui-18-title-2-semi); padding: 10px 12px 2px 20px; text-align: start; display: flex !important; align-items: center; justify-content: start; } .sidePanel__list__group__clickZone { cursor: pointer; } .sidePanel__list__group__title > span[onclick] { cursor: pointer; } .sidePanel__list__group__title.icon { /* padding-left: 0; */ } .sidePanel__list__group__title-badge { text-align: center; padding-right: 20px; } .sidePanel__list__group__title-badge > a, .sidePanel__list__group__title-badge > span { margin-left: auto; margin-right: auto; } .sidePanel__list__group__title .date1, .sidePanel__list__group__title .date2, .sidePanel__list__group__title .date3, .sidePanel__list__group__title .terms_label_hot, .sidePanel__list__group__title .terms_label_warm, .sidePanel__list__group__title .date3, .sidePanel__list__group__title .date4.prior0, .sidePanel__list__group__title .terms_label_wait, .sidePanel__list__group__title .date4, .sidePanel__list__group__title .sidePanel__list__group__badge-workflow { font-size: 12px; font-style: normal; font-weight: 400; line-height: 16px; display: flex; padding: 4px 12px; justify-content: center; align-items: center; gap: 4px; border-radius: 24px; box-shadow: var(--shadow-cont-minor-lineonly-inside); background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 66%); } .sidePanel__list__group__title .date4 { color: var(--prior-txt); } .sidePanel__list__group__title .date4 ws-icon svg { fill: var(--prior-txt); } .sidePanel__list__group__title .date1.termin, .sidePanel__list__group__title .date2.termin, .sidePanel__list__group__title .date3.termin, .sidePanel__list__group__title .terms_label_hot.termin, .sidePanel__list__group__title .terms_label_warm.termin, .sidePanel__list__group__title .date3.termin, .sidePanel__list__group__title .date4.prior0.termin, .sidePanel__list__group__title .terms_label_wait.termin { color: var(--colorize-lbl-txt-primary) !important; } .sidePanel__list__group__title .termin.date1 { background-color: var(--lbl-today-minor) !important; } .sidePanel__list__group__title .termin.terms_label_hot { background-color: var(--colorize-lbl-red-bg); } .sidePanel__list__group__title .termin.date2, .sidePanel__list__group__title .termin.date1, .sidePanel__list__group__title .termin.terms_label_warm { background-color: var(--colorize-lbl-indigo-bg); } .sidePanel__list__group__title .termin.date3 { background-color: var(--colorize-lbl-green-bg); } .sidePanel__list__group__title .termin.date4.prior0 { background-color: var(--colorize-lbl-coolgrey-bg) !important; } .sidePanel__list__group__title .termin.terms_label_wait { background-color: var(--colorize-lbl-none-bg); } .sidePanel__list__group__title span.activity.date1 { background-color: var(--lbl-today-minor); } .sidePanel__list__group__title span.activity.date2 { background-color: var(--lbl-yesterday-minor); } .sidePanel__list__group__title span.activity.date3 { background-color: var(--lbl-date); } .sidePanel__list__group__title .sidePanel__list__group__badge-workflow { /* background-color: var(--colorize-lbl-coolgrey-bg); */ /* background-color: var(--lbl-today-minor); */ background-color: var(--colorize-lbl-green-bg); color: var(--colorize-lbl-txt-primary); --icon-color: var(--colorize-lbl-txt-primary); } .sidePanel__list__group__title .goTo { display: flex; margin: 0; padding: 0; align-items: center; color: var(--base-txt-tertiary); text-align: center; text-overflow: ellipsis; font-size: 12px; font-style: normal; font-weight: 400; line-height: 20px; overflow: visible; transition: opacity 100ms ease-in-out; gap: 8px; opacity: 0; } .sidePanel__list__group__title:hover .goTo { opacity: 1; } .sidePanel__list__group__title .goTo:hover { color: var(--base-txt-primary); } .sidePanel__list__group__title .goTo ws-btn .btn-24 { width: 24px; } .sidePanel__list__more { height: 24px; padding: 4px 0; text-align: center; display: flex; justify-content: center; margin: 0 0 24px; align-content: center; align-items: center; } .search_started .sidePanel__list__more { display: none; } .sidePanel__list__more ws-btn[name*=more-dots] { width: 40px; } .sidePanel__list__more ws-btn[name*=more-dots] ws-icon { --icon-size: 24px !important; } .sidePanel__list__item { padding: 8px 12px 8px 20px; cursor: pointer; /* overflow: hidden; */ position: relative; } .sidePanel__list__item:not(.sidePanel__list__item-hidden) > .flex_content { overflow:hidden; padding: 0 4px; gap: 4px; } .sidePanel .sidePanel__list__item ~ .sidePanel__list__item { box-shadow: none; } .sidePanel__list__item .space-icon { height: 28px; width: 28px; display: flex; justify-content: center; align-items: center; position: relative; } #project-dashboard dashboard-block-tasks-activity .space-icon{ order: -1; } #project-dashboard dashboard-block-tasks-activity .activity_date{ justify-content: flex-start; } .sidePanel__list__item .space-icon ws-icon ~ ws-icon { display: none } .chatList__item-muted span.cnt_new { background: var(--base-txt-muted); } .sidePanel__list__item .space-icon-alt { display: none; } .sidePanel__list__item-altIcon:hover .space-icon.space-icon-alt { display: flex; } .sidePanel__list__item-altIcon:hover .space-icon:not(.space-icon-alt) { display: none; } .sidePanel__list__item.sidePanel__list__item-empty .in { color: var(--base-txt-tertiary); } .sidePanel__list__item.sidePanel__list__item-empty .space-projectIco { --icon-color: var(--base-hlt-g-pressed); } .space-icon ws-emoji { width: 16px; height: 16px; } .space-icon ws-icon.proj_color:not([name]) { border-radius:4px; background:var(--project-color); } .sidePanel__list__item :is(task-unseen, task-attach, a.child_num):empty { display: none; } .sidePanel__list__item task-unseen, .sidePanel__list__item task-attach, .sidePanel__list__item a.child_num { font-size: 11px; color: var(--base-txt-secondary); line-height: 16px; } .sidePanel__list__item task-unseen a, .sidePanel__list__item task-unseen ws-icon, .sidePanel__list__item task-attach a, .sidePanel__list__item task-attach ws-icon, .sidePanel__list__item a.child_num a, .sidePanel__list__item a.child_num ws-icon { height: 16px; width: 16px; font-size: 11px; color: var(--base-txt-secondary); line-height: 16px; margin: 0; } .sidePanel__list__item task-unseen a svg, .sidePanel__list__item task-unseen ws-icon svg, .sidePanel__list__item task-attach a svg, .sidePanel__list__item task-attach ws-icon svg, .sidePanel__list__item a.child_num a svg, .sidePanel__list__item a.child_num ws-icon svg { fill: var(--base-txt-secondary); } .sidePanel__list__item.completed task-unseen, .sidePanel__list__item.completed task-attach, .sidePanel__list__item.completed a.child_num { color: var(--base-txt-tertiary); } .sidePanel__list__item.completed task-unseen a, .sidePanel__list__item.completed task-unseen ws-icon, .sidePanel__list__item.completed task-attach a, .sidePanel__list__item.completed task-attach ws-icon, .sidePanel__list__item.completed a.child_num a, .sidePanel__list__item.completed a.child_num ws-icon { color: var(--base-txt-tertiary); } .sidePanel__list__item.completed task-unseen a svg, .sidePanel__list__item.completed task-unseen ws-icon svg, .sidePanel__list__item.completed task-attach a svg, .sidePanel__list__item.completed task-attach ws-icon svg, .sidePanel__list__item.completed a.child_num a svg, .sidePanel__list__item.completed a.child_num ws-icon svg { fill: var(--base-txt-tertiary); } /* .sidePanel__list__item a.child_num { } */ .sidePanel__list__item .priorb { margin: 0 2px; } dashboard-block-tasks-activity .sidePanel__list__item .priorb{ display: none; } .sidePanel__list__item .separator { display: flex; height: 20px; margin: 0 6px; flex-direction: column; align-items: flex-start; border-right: 0.5px solid var(--base-line-secondary); } .sidePanel__list__item .in { font: var(--font-ui-15-large-reg); color: var(--base-txt-primary); padding: 0; flex-shrink: 1; margin: 0; align-items: baseline; gap: 0; } .sidePanel__list__item.sidePanel__list__item-user .in { font: var(--font-ui-16-title-3-reg); } .sidePanel__list__item .subtitle { color: var(--base-txt-secondary); font-size: 11px; font-style: normal; font-weight: 400; line-height: 16px; padding: 0 8px; } .sidePanel__list__item.sidePanel__list__item-user ws-icon[name=star-solid] { padding-left: 4px; margin-right: -8px; --icon-color: var(--colorize-lbl-yelloworange); } .sidePanel__list__item.sidePanel__list__item-user .subtitle.user_title { max-width: 14ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--base-txt-tertiary); font: var(--font-ui-11-micro-reg); padding: 4px 12px 0 12px; } .sidePanel__list__item.sidePanel__list__item-user .subtitle.user_group { max-width: 14ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: var(--font-ui-12-mini-reg); padding: 0 8px; } .sidePanel__list__item.sidePanel__list__item-user .s.role { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; } .sidePanel__list__item span.ico.ico_sfav_a { margin-left: 0; } .sidePanel__list__item { --icon-color: var(--base-txt-secondary); } .sidePanel__list__item ws-icon[name="arrows/chevron_sm-right"] { display: none; } .sidePanel__list__item ws-icon[name=calendar_alt] { } .sidePanel__list__item .r { gap: 8px; } .sidePanel__list__item .r > *.av_pre { padding: 0 2px; } .sidePanel__list__item .r ws-icon[name=lock_sm] { --icon-color:var(--base-txt-alert-major); } .sidePanel__list__item .r .date { border-radius:4px; padding: 3px; } .sidePanel__list .sidePanel__list__item.selected, .sidePanel__list .sidePanel__list__item.selected_fake { --current-background-color: var(--base-cont-top); background: var(--base-cont-top); box-shadow: 0 var(--screen-minus-px) var(--base-line-secondary) inset, 0 var(--screen-px) var(--base-line-secondary) inset; transition: background .2s ease-out; transition: border-color .15s ease-in-out,box-shadow .1s ease-in-out; } .sidePanel__list .sidePanel__list__item.selected .dot_tags span, .sidePanel__list .sidePanel__list__item.selected_fake .dot_tags span { box-shadow: 0 0 0 1px var(--base-cont-top); } .sidePanel__list .sidePanel__list__item .dot_tags span:nth-child(n+16) { display: none; } .sidePanel__list__item.selected > div.flex_row { /* box-shadow: 0px 0px 0px 2px var(--base-hlt-invert) inset; */ /* border-radius: 4px; */ } .sidePanel__list__item.completed .in { color: var(--base-txt-tertiary) !important; text-decoration-line: line-through; text-decoration-color: var(--base-line-primary); text-decoration-thickness: calc(var(--screen-px) * 1.5); } .sidePanel__list__item task-term ws-icon { width: 24px; height: 24px; box-sizing:border-box; border-radius: 12px; --icon-size: 16px; } .sidePanel__list__item task-term:has(.terms_label_empty) { display: none; } .sidePanel__list__item.sidePanel__list__item-task .activity { width: 28px; } .sidePanel__list__item.sidePanel__list__item-task .activity svg { --icon-size: 14px; /* fill: var(--base-txt-muted); */ } .sidePanel__list__item.sidePanel__list__item-task .activity_date { display:flex; justify-content: flex-end; margin: 0; min-width: 48px; } .sidePanel__list__item.sidePanel__list__item-task .activity_date span { font: var(--font-ui-11-micro-reg); padding: 2px 4px; border-radius: 4px; text-overflow: ellipsis; overflow: hidden; color: var(--base-txt-secondary); } .sidePanel__list__item.sidePanel__list__item-task .activity button { width: 28px; height: 20px; padding:0; display:flex; overflow: hidden; } .sidePanel__list__item.sidePanel__list__item-task .activity ws-icon { width: 18px; height: 18px; } .sidePanel__list__item.sidePanel__list__item-task .activity button span { flex-shrink:1; text-overflow: unset; } .sidePanel__list__item.sidePanel__list__item-task .activity a { position:relative; display:flex } #sidePanel__wrapper textarea.scrollZone { max-height: none } #sidePanel__wrapper .list { margin-top: 0 } #sidePanel__wrapper .proj_group:not(.proj_group2) { border-top: 1px solid var(--base-line-primary); margin: 10px 0 30px 0; position: relative; padding: 5px 0 0 0; } #sidePanel__wrapper .waste { display: none } #sidePanel__wrapper .proj_group:last-child { padding-bottom: 10px; margin-bottom: 0 } #sidePanel__wrapper .proj_group:last-child .list { margin-bottom: 0 !important } #sidePanel__wrapper .user_list a.user { padding-left: 25px; font: 14px/20px var(--font-base) } #sidePanel__wrapper .user_list a:before { display: none } #sidePanel__wrapper a.proj b { color: var(--base-txt-accent); font: bold italic 13px/16px var(--font-base); margin-right: 5px; } #sidePanel__wrapper a.proj:hover b { /* color:var(--base-txt-link-major); */ } #sidePanel__wrapper .no_mm_float:before { content: ''; display: block; height: 8px; } #sidePanel__wrapper h2 { background: var(--base-cont-low); padding: 5px 10px; margin: 0 0 5px 0; font: bold 13px var(--font-base) } #sidePanel__wrapper .eye_conf { display: block; position: absolute; bottom: 0; right: 0; padding: 0; height: 45px; } #sidePanel__wrapper .eye_conf .eye_line { padding-top: 8px; padding-bottom: 8px } #sidePanel__wrapper .eye_conf .eye_line i { height: 26px; } #sidePanel__wrapper .eye_conf .button { display: block; bottom: 10px; } #sidePanel__wrapper .also .ico_equalizer, #sidePanel__wrapper .also .ico_help_q { margin: 5px 0 0 0; } #sidePanel__wrapper { --current-background-color: var(--base-cont-mid); width: 520px; background: var(--base-cont-mid); overflow: hidden; z-index: 1021; position: fixed; left: -600px; top: 0; bottom: 0; transition: left 0.3s ease; -webkit-transition: left 0.3s ease; box-shadow: var(--shadow-cont-major-outline); } #sidePanel__wrapper.no-shadow { box-shadow: var(--shadow-cont-minor-lineonly-outside); } .sidePanel { --scrollbar-margin-start: var(--top-panel-height); padding: 10px 0 0 0; height: 100%; box-sizing: border-box; } .sidePanel .mm_float { display: block; background: linear-gradient(180deg, var(--base-cont-mid), var(--base-cont-mid-opac)); backdrop-filter: blur(4px); z-index: 999; } .sidePanelShown #sidePanel__wrapper { left: 64px; padding-bottom: 0; } @media (max-width:480px) { #sidePanel__wrapper { --layer: 0; --zIndex: 1021; z-index: calc(var(--zIndex) + var(--layer)); transition: none; } .sidePanelShown #sidePanel__wrapper { left: 0; width: 100%; bottom: var(--footerMobile-height); box-shadow: none; padding-bottom: calc(var(--keyboard-height) - var(--footerMobile-height)); } body.sidePanelShown {background:var(--base-cont-top)} body.sidePanelShown #sidePanel__wrapper {position: fixed !important;} body.sidePanelShown #main, body.sidePanelShown #title_float {display:none} } @media (min-width: 481px) { .sidePanelShown.withTaskPanel #sidePanel__wrapper { padding-bottom: 40px; } /* body.mobile.sidePanelShown {overflow:hidden;} */ } #sidePanel__wrapper .also { font: 11px/14px var(--font-base); padding: 10px; background: var(--base-cont-mod-mid); color: var(--base-txt-secondary); margin: 0; height: 28px; z-index: 22 } #sidePanel__wrapper .also .timer_info { font: 12px/14px var(--font-base); margin: -2px 0 2px } #sidePanel__wrapper .also .timer_info a { color: var(--base-txt-primary) } #sidePanel__wrapper .also .timer_info .tm_on { color: var(--base-btn-fresh-major) } #sidePanel__wrapper .also .timer_info .tm_off { color: var(--base-btn-alert-primary-major) } #sidePanel__wrapper .also a.under { font: 11px var(--font-base); display: inline; color: var(--base-txt-secondary); padding: 0; margin: 0; text-decoration: underline; } #sidePanel__wrapper .also a.under:hover { color: var(--base-txt-link-major) } #sidePanel__wrapper .also a.ico_favs_big { margin: -4px 10px -10px 0 } #sidePanel__wrapper .also .wcheckbox { font: 11px/20px var(--font-base) } #sidePanel__wrapper .also .wcheckbox.act { background: none } #sidePanel__wrapper .also i.help { font: italic 11px/20px var(--font-serif) } #sidePanel__wrapper .also .ico_archive { margin: 5px 0; opacity: 0.5; } #sidePanel__wrapper .also .ico_archive:hover { opacity: 1; } #sidePanel__wrapper span.new { font: bold 9px/20px var(--font-base); padding: 1px 3px; border-radius: 4px; margin: 0 0 0 5px; margin: 0 5px 0 0 } .hotKey { margin-left: 12px; display: flex; } .hotKey .key { overflow: hidden; color: var(--base-txt-tertiary); text-align: center; text-overflow: ellipsis; font-size: 12px; font-style: normal; font-weight: 400; display: flex; height: 20px; min-width: 12px; padding: 0px 4px; justify-content: center; align-items: center; gap: 10px; border-radius: 4px; border: 1px solid var(--base-txt-muted); margin-right: 4px; } .hotKey .text { padding: 0 4px; font: var(--font-ui-13-small-reg); color: var(--base-txt-secondary); } /*# sourceMappingURL=panel_search.css.map */ .sidePanel__list__group-hidden, .sidePanel__list__item-disabled { display: none !important; } .sidePanel__list__group-partSearch { opacity: 0.5; } .sidePanel__list__item-hidden { display: none !important; } .sidePanel__list__item-partSearch { opacity: 0.5; } /* ----------------------------------------------- */ .sidePanel__list__group-chat svg, .sidePanel__list__group-chat span.space, .chatList__item span.space { width: 20px; height: 20px; display: block; flex-shrink: 0; } .sidePanel__list__group__title > * {; } .sidePanel__list__group__title:not(.inline-edit):hover .but { display: flex; } .sidePanel__list__group__title:hover { /* box-shadow:var(--shadow-brd-hover); */; } .sidePanel__list__group__title .in { padding: var(--sidebar-text-padding); border-radius: unset; } .sidePanel__list__group-collapsed .sidePanel__list__group__content { display: none; } .search_started .sidePanel__list__group-collapsed .sidePanel__list__group__content { display: block; } .search_started ws-icon.is_collapsed { opacity: 0.3; } .sidePanel__list__group__title input { margin-left: 5px; font: 600 14px/20px var(--font-sidebar); } .sidePanel__list__group__title > svg:first-child {; } .sidePanel__list__group__title svg use:last-child { display: none; } .sidePanel__list__group__title svg use:first-child { display: inline-block; } .sidePanel__list__group-collapsed .sidePanel__list__group__title svg use:first-child { display: none; } .sidePanel__list__group-collapsed .sidePanel__list__group__title svg use:last-child { display: inline-block; } .sidePanel__list__item-active { background: var(--base-hlt-hover) !important; position: relative; } .sidePanel__list__item-active:not(.sidePanel__list__item-chat) { pointer-events: none; } .sidePanel__wrapper:not(.search_started) .sidePanel__list__item-waste { display: none; } .sidePanel__filter { height: 48px; padding: 0 14px 0 16px; gap: 8px; } .sidePanel-tasks .sidePanel__form { padding: 0; } .sidePanel-tasks .sidePanel__form .sidePanel__title .uname { color: var(--base-txt-accent); padding: 0 8px 0 4px; text-decoration: underline; text-decoration-style: dotted; } .sidePanel-tasks .scrollZone { padding: 0 0 12px !important; margin: 0 !important; } .sidePanel-tasks .item_empty { display: block; } .sidePanel-tasks .item_empty.hidden { display: none; } .sidePanel-tasks .empty p { text-align: center; margin-top: 16px; color: var(--base-txt-secondary); font: var(--font-ui-15-large-reg); padding: 0 32px; } .sidePanel-tasks .empty .action { text-align: center; } .sidePanel-tasks .empty .action ws-btn { margin: 28px auto 0 auto; } @media screen and (min-width: 481px) { .sidePanel__form:has( + .scrollZone-top), .sidePanel__form:has(.eventsList__filter):not(.eventsList__form-collapsed) { box-shadow: 0 var(--screen-px) var(--base-line-tertiary); z-index: 1002; } } .sidePanel__tabs { padding-left: 20px; display: flex; justify-content: space-between; align-items: center; padding-right: 14px; } .sidePanel__tabs > .btn { flex-shrink: 0; } .sidePanel__tabs ul { display: flex; flex-direction: row; padding: 0; margin: 0; } .sidePanel__tabs ul li { list-style: none; display: flex; flex-direction: column; margin: 0; cursor: pointer; } .sidePanel__tabs ul li:before { content: ""; display: none; } .sidePanel__tabs ul li span.title { color: var(--base-txt-tertiary); font: var(--font-ui-14-regular-reg); padding: 8px; display: flex; align-items: center; } .sidePanel__tabs ul li span.title:hover { color: var(--base-txt-primary); transition: 0.3s; } .sidePanel__tabs ul li:hover span.highlight { background: var(--base-hlt-g-focus); transition: 0.3s; } .sidePanel__tabs ul li span.title ws-icon { margin-left: 4px; --icon-color: var(--base-txt-tertiary); --icon-size: 16px; } .sidePanel__tabs ul li span.title:hover ws-icon { --icon-color: var(--base-txt-primary); } .sidePanel__tabs ul li span.title .badge { margin: 0 0 0 6px; text-shadow: initial; -webkit-text-stroke-width: initial; } .sidePanel__tabs ul li span.title .count { display: inline-block; height: 16px; min-width: 8px; text-align: center; font-size: 10px; font-family: monospace; font-style: normal; font-weight: 410; line-height: 16px; border-radius: 16px; border: solid 1px currentColor; background: transparent; color: currentColor; padding: 0; margin: 0 0 0 6px; padding: 0 4px; } .sidePanel__tabs ul li span.title .count:empty { display: none; } .sidePanel__tabs ul li.active span.title .count-new { color: var(--base-txt-new-minor); border-color: var(--base-txt-new-minor); } .sidePanel__tabs ul li.active span.title .count-costs { color: var(--base-txt-btn-b); border-color: var(--base-txt-btn-b); } .sidePanel__tabs ul li.active span.title .count-plan { color: var(--base-txt-tertiary); border-color: var(--base-txt-tertiary); } .sidePanel__tabs ul li.active span.title .count-upcoming { color: var(--base-txt-btn-b); border-color: var(--base-txt-btn-b); } .sidePanel__tabs ul li.active span.title .count-overdue { color: var(--base-txt-alert-major); border-color: var(--base-txt-alert-major); } .sidePanel__tabs ul li span.highlight { height: 2px; border-radius: 1px; } .sidePanel__tabs ul li.active span.title { /* font-weight: 590; */ color: var(--base-txt-accent); text-shadow: -0.03ex 0 0 currentColor, 0.03ex 0 0 currentColor; -webkit-text-stroke-width: 0.04ex; } .sidePanel__tabs ul li.active span.title ws-icon { --icon-color: var(--base-hlt-b-invert); } .sidePanel__tabs ul li.active span.highlight { background: var(--base-hlt-g-invert); } .sidePanel__tabs ul li:not(.active) { cursor: pointer; } .sidePanel__tabs .date { gap: 4px; margin: 0 18px 0 0; } .sidePanel__list__group__title.flex_row { gap: 4px; } .sidePanel__list__group__title-archive:hover { color: var(--base-txt-btn-b); --icon-color: var(--base-txt-btn-b); cursor: pointer; } .sidePanel__list__group__title-archive:hover .in { color: var(--base-txt-btn-b); } .sidePanel__list__group__title-archive:hover svg use:first-child { display: none; } .sidePanel__list__group__title-archive:hover svg use:last-child { display: inline-block !important; } /*.sidePanel__list__group__title .folder-icon ws-icon svg:last-child,*/ /*.sidePanel__list__group__title:hover .folder-icon ws-icon svg:first-child {*/ /* display: none;*/ /*}*/ /*.sidePanel__list__group__title:hover .folder-icon ws-icon svg:last-child {*/ /* display: block;*/ /*}*/ .sidePanel__list__group__title.flex_row div.icon { padding: 6px 6px 6px 0; display: inline-block; } .sidePanel__list__group__title.flex_row div.icon ws-icon:not([name]) { background: var(--project-color); border-radius: 4px; } .sidePanel__list__group__title.flex_row div.icon ws-icon ws-emoji { height: 16px; width: 16px; padding: 2px; } .sidePanel__list__group__title.flex_row div.icon ws-icon[name=bookmark-solid] { background: transparent; } .sidePanel__list__group__title.flex_row div.icon ws-icon[name=bookmark-solid] svg { fill: var(--colorize-lbl-brown); } .sidePanel__list__group__title.flex_row div.icon.stage ws-icon { background: transparent; --icon-size: 28px; width: 28px; height: 28px; } .sidePanel__list__group__title .in { color: var(--base-txt-primary); font-size: 18px; font-style: normal; font-weight: 590; line-height: 24px; /*padding: 0;*/ /*margin: 0;*/ /*text-align: start;*/ } .sidePanel-tasks { margin-bottom: 40px !important; } .sidePanel__footer { height: 32px; padding: 6px 12px; margin: 0; border-top: 0.5px solid var(--base-line-secondary); background: var(--base-cont-mod-mid); display: flex; justify-content: space-between; align-items: center; } .sidePanel__footer > div { color: var(--base-txt-secondary); font-size: 11px; font-style: normal; font-weight: 400; line-height: 16px; display: flex; gap: 4px; align-items: center; } /** Chat List */ .chatList__item { height: 68px; padding: 0; color: var(--base-txt-primary); --icon-color: var(--base-txt-secondary); } .chatList__item:hover { background: var(--base-cont-mid); color: var(--base-txt-primary); } .chatList__item .in { padding: 0 8px 0 0; } .chatList__item > .in { overflow: hidden; } .chatList__item .proj_color { display: block; width: 48px; height: 48px; border-radius: 8px; background: var(--project-color); box-shadow: var(--shadow-cont-major-lineonly-inside); } .chatList__item .proj_color0 { background: var(--colorize-prj-none); } .chatList__item .icon { width: 48px; height: 48px; margin: 8px 10px; position: relative; } .chatList__item .icon:after { box-shadow: var(--shadow-cont-major-lineonly-inside); content: ''; display: block; position: absolute; top: 0; height: 100%; width: 100%; pointer-events: none; } .chatList__item .icon.icon-group, .chatList__item .icon.icon-group:after { border-radius: 8px; } .chatList__item .icon.icon-user, .chatList__item .icon.icon-user:after { border-radius: 48px; } .sidePanel__list__item-active.chatList__item .icon, .chatList__item:hover .icon { box-shadow:0 0 0 2px var(--white-accent), 0 0 5px 2px var(--base-line-secondary) } .chatList__item .proj_color ws-icon { width: 48px; height: 48px; } .chatList__item .proj_color svg { width: 38px; height: 38px; } .chatList__item .proj_color ws-emoji { width: 48px; height: 48px; transform: scale(0.6666); display: inline-block; } .chatList__item > .in > .name { height: 16px; } .chatList__item > .in > .name .in { font: var(--font-ui-15-large-semi); padding: 0 4px; line-height: 16px; } .chatList__item > .in > .name .flex_gap { min-width: 16px; } .chatList__item > .in > .name ws-icon { width: 16px; height: 16px; } .chatList__item .user { font: 500 12px / 16px var(--font-base); color: var(--base-txt-primary); padding: 0 4px; } .chatList__item .user .name { display: block; margin-right: 4px; height: unset; } .chatList__item .user .place { display: block; width: 16px; height: 16px; margin-right: 2px; } .chatList__item .user .av_sm { transform: scale(0.6666); border-bottom-left-radius: 2px; transform-origin: 0 0; } .chatList__item .text { color: var(--base-txt-secondary); font: 13px/16px var(--font-base); padding: 0 4px; } .chatList__item .text ws-emoji { width: 16px; height: 16px; } .chatList__group-user .chatList__item .text { white-space: normal; height: 32px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .chatList__item .time { font: 12px/16px var(--font-base); color: var(--base-txt-tertiary); padding: 0; } .chatList__item task-unseen { display: flex; margin: 0 -2px -2px 0; } .chatList__item task-unseen > .cnt { padding: 2px 4px; margin: 0; border-radius: 12px; min-width: 12px; display: block; text-align: center; font: var(--font-ui-11-micro-reg); border: 2px solid transparent; background-clip: padding-box !important; } .chatList__item task-unseen .cnt_new { background: var(--base-line-act-minor); color: var(--base-txt-alt-light); } .chatList__item task-unseen .cnt_mention { background: var(--base-txt-btn-w); color: var(--base-txt-alt-light); margin-right: -6px; z-index: 1; border-color: var(--base-cont-mod-top); } .chatList__item .details { height: 32px; align-items: flex-end; } .chatList__item .details > .in { overflow: hidden; } .chatList__item .details .text.text-2lines { height: 32px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; line-height: 16px; word-break: break-word; white-space: break-spaces; } .chatList__item[data-type*=empty] .details, .chatList__item[data-type*=inactive] .details { display: none; } .chatList__item .details .pinned { --icon-color: var(--base-txt-tertiary); --icon-size: 16px; } .chatList__item .details .pinned ws-icon {width: 16px; height: 16px;} .chatList__item .details .typing { flex-grow: 1; flex-shrink: 1; height: 32px; } .chatList__item .details .typing ~ .in, .chatList__item[data-user] .typing .user { display: none; } .chatList__item .typing .text { color: var(--base-txt-act-minor); } .chatList__item .typing .av_sm ~ .av_sm { margin-left: -10px; } .chatList__item .typing .text .dot-pulse { margin: 8px 20px 0 2px; } .chatList__item:not([data-pin='1']) .pinned { display: none; } .chatList__item task-unseen:has(> .cnt) ~ .pinned { display: none; } .chatList__item .user-spec-icon ws-icon[name="roles/reader"], .chatList__item .user-spec-icon ws-icon[name=block], .chatList__item .off-icon, .chatList__item .muted-icon { --icon-color: var(--base-txt-btn-w); } .chatList__item:not(.chatList__item-muted) .muted-icon { display: none; } .chatList__item:has(.user-spec-icon [data-status=free]) > .icon, .chatList__item.chatList__item-off > .icon { opacity: .2; } .sidePanel__list__item.chatList__item { padding: 0 12px 0 0; } .sidePanel__list__item.chatList__item:not(.sidePanel__list__item-hidden) > .flex_content { padding: 0 0; } .sidePanel__list__item-active.chatList__item { background: var(--base-hlt-g-hover) !important; box-shadow: 0 var(--screen-minus-px) var(--base-line-tertiary) inset, 0 var(--screen-px) var(--base-line-tertiary) inset !important; } .sidePanel__list__item-active.chatList__item .in { color: inherit } .sidePanel__list__item-chat[data-type=group], .sidePanel__list__item-chat[data-type=self] { .icon.icon-group { border-radius: 100%; &:after, & > span {border-radius: 100%;} } } /* .chatList {position:relative;} .chatList:before { position: absolute; background:#f00a; content: attr(class); color:#fff; top:0px; left:0; padding:2px; border-radius:8px; font-size:11px; z-index:1000 } .chatList__item {position:relative;} .chatList__item:before { position: absolute; background:#000a; content: attr(class); color:#fff; top:0px; left:0; padding:2px; border-radius:8px; font-size:11px; } */ .sidePanel__list__item .floatIcons { right: 12px; top: -20px; z-index: 2000; display:flex; transition: all 0.1s ease; opacity: 0; scale: 0.9; pointer-events: none; transform-origin: center center; visibility: hidden; } .desktop .sidePanel__list__item:hover .floatIcons, .sidePanel__list__item.selected_fake .floatIcons, .sidePanel__list__item .floatIcons:has(.menu_open) { opacity: 1; scale: 1; pointer-events: auto; transition-delay: .6s; visibility: visible; } .sidePanel__list__item:not(.eventsList__item-star) .floatIcons a[data-action=unstar] { display:none; } .eventsList__item-star .floatIcons a[data-action=star] { display:none; } .sidePanel__list__item-costs { height: 52px; padding: 0 20px 0 12px; color: var(--base-txt-primary); } .sidePanel__list__item-costs > a { height: 52px; display: flex; align-items: center; justify-content: center; } .sidePanel__list__item-costs .av_nm { margin: 0 0 0 2px; border-radius:50%; transform:scale(0.75) } .sidePanel__list__item-costs:hover .av_nm { box-shadow: var(--shadow-brd-enable-focus-alt); } .sidePanel__list__item-costs .av_nm:hover { box-shadow: var(--shadow-brd-focus-alt); } .sidePanel__list__item-costs .name { height: 20px; } .sidePanel__list__item-costs .name ws-icon[name=star] { --icon-size: 16px; } .sidePanel__list__item-costs .name .in { font: var(--font-ui-15-large-med); } .sidePanel__list__item-costs .text { font: var(--font-ui-13-small-reg); color: var(--base-txt-secondary); padding: 0 4px; } .sidePanel__list__item-costs .sum { font: var(--font-ui-13-small-semi); font-family: monospace; width: 60px; --icon-color: var(--base-txt-btn-b); color: var(--base-txt-btn-b); margin-right: 4px; padding-right: 4px; margin-left: 8px; } .sidePanel__list__item-costs .sum ws-icon{ width: 16px; height:16px; --icon-size:16px; margin:0 0 0 -2px; visibility: hidden; } .sidePanel__list__item-costs:hover .sum ws-icon{ visibility: visible; } .sidePanel__list__item-costs .sum .data { display: flex; justify-content: space-between; } .sidePanel[data-type=plan] .sidePanel__list__item-costs .sum { --icon-color: var(--base-txt-primary); color: var(--base-txt-primary); } .sidePanel__list__item-costs .sum-noreport, .sidePanel__list__item-costs .sum-empty { --icon-color: var(--base-txt-ghost) !important; color: var(--base-txt-ghost) !important; font: var(--font-ui-13-small-med); font-family: monospace; } .sidePanel__list__item-costs .sum-empty ws-icon { opacity: 0 } .sidePanel__list__item-costs .sum progress-bar2, .sidePanel__list__item-costs .sum .progress2 { width: 60px; height:6px; display: block; border-radius:3px; overflow:hidden; background: var(--base-cont-mod-trans-mid); box-shadow: 0 0 0 1px #00000005 inset; } .sidePanel__list__item-costs .sum .progress2 div { height:6px !important; } .sidePanel__list__item-costs .sum progress-bar2 .progress2_over.progress2_hlt_b, .sidePanel__list__item-costs .sum progress-bar2 .progress2_over2.progress2_hlt_b { box-shadow: 0 6px var(--base-hlt-b-invert) inset; } .sidePanel__list__item-costs .sum progress-bar2 .progress2_over.progress2_hlt_g, .sidePanel__list__item-costs .sum progress-bar2 .progress2_over2.progress2_hlt_g { box-shadow: 0 6px var(--base-hlt-g-invert) inset; } .sidePanel__list__item-costs .progress2_over div.p1 { background: var(--costs-timer-alert); } .timerView__progress progress-bar2 .progress2 div { height: 8px !important; } .sidePanel__list__item-costs .costs { font: var(--font-ui-11-micro-med); font-family: monospace; color: var(--base-txt-tertiary); padding: 2px 6px; border-radius:4px; margin: 0 6px 0 0; box-shadow: 0 0 0 1px var(--base-line-tertiary) inset; } .sidePanel__list__item-costs .details:has(.timer), .sidePanel__list__item-costs .details:has(.costs) { padding-right: 16px; margin-top: -2px; } .sidePanel__list__item-costs .details .in { padding:0; font: var(--font-ui-13-small-reg); color: var(--base-txt-secondary); } .sidePanel__list__item-costs .details .in ws-icon[name=block] { --icon-color: var(--base-hlt-w-invert-minor); --icon-size: 16px; } .sidePanel__list__item-costs .details .in a { color:inherit } .sidePanel__list__item-costs .details .in a:hover { color: var(--base-txt-accent); } .sidePanel__list__item-costs .timer { height: 16px; position: relative; margin: 0 6px 0 0; font: var(--font-ui-13-small-reg); font-family: monospace; font-variant-numeric: tabular-nums; display: flex; align-items: center; justify-content: center; background: var(--costs-timer-play); color: var(--white-accent); padding: 2px 6px; text-align: left; border-radius: 5px; } .sidePanel__list__item-costs .timer b { font: var(--font-ui-11-micro-bold); } .sidePanel__list__item-costs .timer strong { display: none } .sidePanel__list__item-costs .timer i { opacity: 0.7; font: var(--font-ui-10-nano-reg); font-variant-numeric: tabular-nums; margin: 0 0 0 2px; } .sidePanel__list__item-costs .timer[data-over=warning] { background: var(--costs-timer-warning) } .sidePanel__list__item-costs .timer[data-over=alert] { background: var(--costs-timer-alert) } .sidePanel__list__item-costs .timer a:hover { box-shadow: 0 50px var(--base-cont-mod-trans-low) inset; } .sidePanel__list__item-costs .timer_saved a, .sidePanel__list__item-costs .timer_saved a:hover { background: var(--costs-time-major) } .sidePanel__list__item-costs .timer a:hover span.ico_l { display: inline-block } .sidePanel__list__item-costs .timer a strong { display: none } .sidePanel__list__item ws-icon[name="drag_indicator"] { position: absolute; left: 0px; top: 12px; display: none; } body.withTimerView.withTimerView__drag-enabled .sidePanel .sidePanel__list__item[data-task] { cursor: grabbing; } body.withTimerView.withTimerView__drag-enabled .sidePanel__list__item:hover ws-icon[name="drag_indicator"] { display: block } body.withTimerView .sidePanel__list__item.drag_clone ws-icon[name="drag_indicator"] { display: none } body.withTimerView .sidePanel__list__item-dragThis { background: var(--base-hlt-b-pressed); } .sidePanel__list__item.drag_clone { background: var(--base-hlt-b-notr-selected); border: 1px solid var(--base-cont-mod-top); border-radius: 8px; } .sidePanel__list__item.drag_clone.drag_not_allowed { background: var(--base-hlt-w-notr-easy); } .sidePanel__list__item.drag_clone { z-index: 1030; } @media (max-width: 480px) { .sidePanel { padding-top: 0; } .sidePanel__search__form.mobile-head__wrapper { padding: 0; z-index: 1; /* .searchInputWrapper { background: var(--mobile-head-bg-color); padding: 0 12px; height: 48px; .searchInput { margin: 0; } } */ } .mobile-head.mobile-head--searchPanel { height: 48px; .searchInput { margin: 1px; flex-grow: 1; flex-shrink: 1; } } .mobile-head.mobile-head--search { /* transition: margin-top .15s ease; */ } .sidePanel-searchFullscreen { .searchInput { transform: translateZ(0); /* try prevent ios glitch (Todo #3363006) */ } .searchInput .in ws-btn { display: none; } .mobile-head.mobile-head--search { margin-top: -44px; } .mobile-head__btn--cancelFullscreen { display: block; } .mobile-head:not(.mobile-head--searchPanel), .sidePanel__tabs { display: none; } .sidePanel__search__presets { display: none; } } .sidePanel.sidePanel--withTopPanel { .mobile-head.sidePanel__topPanel, .sidePanel__topPanel { z-index: 1; } .timerView__progress { background: unset; padding-top: 4px; padding-bottom: 4px; } } .sidePanel__form.mobile-head__wrapper { background: var(--mobile-head-bg-color); padding-top: 0; /* for hairline visibility... or use inset */ position: relative; z-index: 1; .sidePanel__switcherWrapper { z-index: 3; pointer-events: none; .switcher__track { height: 4px; } } .mobile-head, .sidePanel__tabs { position: relative; z-index: 2; background: var(--mobile-head-bg-color); } .sidePanel__filter, .sidePanel__tabs { box-shadow: unset; padding: 0 4px 0 12px; .sidePanel__tabs__right { position: sticky; right: 0; background: var(--mobile-head-bg-color-opac); backdrop-filter: blur(1px); align-self: stretch; display: flex; } .mobile-head__btn { display: flex; padding-right: 10px; align-items: center; height: 100%; } } .sidePanel__tabs { height: 44px; align-items: flex-end; } .sidePanel__filter { height: 48px; gap: 8px; } .searchInputWrapper { background: var(--mobile-head-bg-color-gradient-opac); } .mobile-head__title .date { padding: 6px; .btns-row { gap: 6px; } button:nth-child(2) { flex-shrink: 0; width: 160px; &.btn-invert { border: 1px solid var(--base-line-tertiary); } &.btn-solid { border: 1px solid var(--base-line-secondary); } span { width: unset; } } } } .sidePanel__tabs__right { translate: 4px; } .sidePanel.sidePanel--withTopPanel.withoutTopPanel { .sidePanel__tabs__right { width: 48px; } } .sidePanel__header { padding-left: 20px; } /*.sidePanel__close {*/ /* display: none;*/ /*}*/ .sidePanel__tabs::-webkit-scrollbar { display: none; } /* .sidePanel__filter > .flex_gap { display: none; } .sidePanel__filter ws-btn:last-child { margin-left: auto; } */ .dashboard .sidePanel__list__item { padding: 6px 8px 6px 16px; } .dashboard .sidePanel__list__item task-attach, .dashboard .sidePanel__list__item a.child_num, .dashboard .sidePanel__list__item task-tags, .dashboard .sidePanel__list__item span.ico_priv { display: none; } .sidePanel-tasks .sidePanel__list__item task-attach, .sidePanel-tasks .sidePanel__list__item a.child_num, .sidePanel-tasks .sidePanel__list__item task-tags, .sidePanel-tasks .sidePanel__list__item span.ico_priv { display: none; } .dashboard .sidePanel__list__item .priorb { margin: 0 4px 0 0; } .sidePanel-tasks .sidePanel__tabs ul { overflow: unset; flex-shrink: 0; } .sidePanel__search__presets .sidePanel__search__preset span { font: var(--font-ui-10-nano-med); color: var(--base-txt-secondary); } .sidePanel-search .sidePanel__empty__img { order: 1; } .sidePanel .mm_float { z-index: 0; /* no float on mobile */ } } @media (hover: none) { .sidePanel__list__group__title .goTo { opacity: unset !important; } } .sidePanel__recent { margin: 8px 16px 8px 20px; } .sidePanel__recent-content { min-height: calc(288px + 48px); @media (max-width: 480px) { min-height: 264px; /* item 44px * 5 + spacing 44px */ height: 336px; /* calc(288px + 48px) */; flex-shrink: 1; } } /* tabs-row */ .tabs-row { display: flex; align-items: center; } .tabs-row__icon { display: flex; width: 28px; height: 32px; align-items: center; justify-content: center; } .tabs-row:not(.tabs-row--loading) .tabs-row__loader { display: none; } .tabs-row--loading .tabs-row__icon ws-icon { display: none; } .tabs-row__label { font: var(--font-ui-14-regular-semi); color: var(--base-txt-primary); line-height: 32px; margin-right: 4px; } .tabs-row__items { display: flex; gap: 13px; } .tabs-row__item { position: relative; color: var(--base-txt-muted); font: var(--font-ui-14-regular-reg); cursor: pointer; } .tabs-row__item:hover { color: var(--base-txt-btn-a); } .tabs-row__item:not(:first-child):before { content: ''; position: absolute; width: 1px; height: 12px; top: 50%; left: -7px; transform: translateY(-50%); background: var(--base-txt-ghost); z-index: 1; } .tabs-row__item > * { display: inline-block; line-height: 32px; color: inherit; } .tabs-row__item:not(.tabs-row__item--active) > * { text-decoration: underline; text-underline-offset: 4px; } .tabs-row__item--active { font: var(--font-ui-14-regular-semi); color: var(--base-txt-accent); pointer-events: none; } /* /tabs-row */ /* tabs-content */ /* .tabs-content {} */ .tabs-content__item:not(.tabs-content__item--active) { display: none; } /* /tabs-content */ .sidePanel__highlight { font-weight: bolder; } task-unseen .btn--task-action-btn { display: flex; } .sidePanel__list__item-project .chip.chip-mono { height: auto; } .sidePanel__list__item-project .chip.chip-mono > span { font-size: 0.625rem; line-height: 2; } .sidePanel__list__filesize { color: var(--base-txt-tertiary); padding: 0; } .sidePanel__list__filesize b { color: var(--base-txt-btn-w); } .sidePanel__list__item-project span[data-container="terms"]:empty { display: none; } .sidePanel__list__item-project span[data-container="terms"] { display: flex; gap: 6px; } .sidePanel-search .sidePanel__list__item-task .ico.ico_priv, .sidePanel-tasks .sidePanel__list__item-task .ico.ico_priv { display: none; } .sidePanel__list__item-contact a:hover ws-icon { --icon-color: var(--base-txt-btn-a); } .sidePanel__list__item-contact a[data-contact], .sidePanel__list__item-contact span[data-contact] { max-width: 50px; overflow: hidden; margin-right: 8px; .tag { min-width: 8px; } } .sidePanel__list__item-contact .r { gap: 0; } .sidePanel__list__item-contact .r a { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; --icon-size: 16px; } .sidePanel__list__item-contact .badge-lock { width: 14px; height: 14px; border-radius: 50%; background: var(--base-hlt-w-notr-easy); --icon-size: 11px; position: absolute; right: -5px; bottom: 0; ws-icon { --icon-color: var(--base-txt-alert-major); } } .sidePanel__list__item-project .in > span { width: 100%; text-overflow: ellipsis; overflow: hidden; } .sidePanel-tasks[data-loading=true] .sidePanel__close { position: relative; z-index: 1021; } .sidePanel__list__item-task { ws-icon.border_dashed, a .av_svg { border: 1.5px dotted var(--base-txt-tertiary); } .btn.btn-g.btn-ghost:hover svg, .btn.btn-g.btn-ghost.hover svg, .btn.btn-g.btn-ghost:focus svg { fill: var(--fill-color, var(--base-txt-accent)); } task-assignee, task-term, task-author, task-priority, task-tags, task-stage, project-assignee, project-term, project-author, project-tags, project-stage, project-folder { align-items: center; } } .timerView__progress.sidePanel__progress { padding: 8px 16px 0 20px; height: unset; margin: unset; display: flex; align-items: center; gap: 16px; & > .in { padding-block: 10px; display: block; flex: 1; } .total { color: var(--base-txt-primary); font: var(--font-ui-16-title-3-semi); } } :is(#dropmysorttasksmenu, #dropmysortpagesmenu) .menu__group-bottom .in { font: var(--font-ui-10-nano-reg); color: var(--base-txt-secondary); line-height: 12px; text-wrap-style: balance; } :is(#dropmysorttasksmenu, #dropmysortpagesmenu) .menu__group-bottom { padding: 8px 16px; } :is(#dropmysorttasksmenu, #dropmysortpagesmenu) .menu__itemFake { padding: 0 2px 0 4px; } :is(#dropmysorttasksmenu, #dropmysortpagesmenu) .menu__itemFake:not(:has(.sw_act)) ws-icon[data-switch-by-switch] use:last-child { display: none; } :is(#dropmysorttasksmenu, #dropmysortpagesmenu) .menu__itemFake:has(.sw_act) ws-icon[data-switch-by-switch] use:first-child { display: none; } .sidePanel:not(.sidePanel-withBack) .sidePanel__back { display: none; } /* menu_activity by_project (aka Project feed) */ .sidePanel__switcherWrapper { position: absolute; inset: 0 0 auto 0; } .sidePanel-events .inline_dotted { text-decoration-color: var(--base-txt-muted); } .sidePanel__projectFeed { padding: 4px 0 12px; /* 12px - 8px(.no_mm_float)*/ background: var(--base-surf-top); } .sidePanel__projectFeedItem { padding: 8px 14px; .dashboard__block { background: var(--base-cont-mid); border-radius: 16px; box-shadow: var(--shadow-cont-minor-outline); overflow: clip; } .dashboard__block-off .dashboard__block__header { background: unset; } .dashboard__block__header { padding: unset; align-items: center; height: 56px; background: linear-gradient(180deg, var(--base-cont-top) 0%, var(--base-cont-mid) 100%), var(--base-cont-top); cursor: pointer; } .dashboard__block__header .logo, .dashboard__block__header .logo .proj_color { padding: unset; width: 36px; height: 36px; border-radius: 8px; } .dashboard__block__header .logo .proj_color { transition: box-shadow .1s ease-in; } .dashboard__block__header .logo ws-emoji { width: 24px; height: 24px; } .dashboard__block__header .logo .proj_color:hover { box-shadow: var(--shadow-brd-focus-alt); transition: box-shadow .1s ease-out; } .dashboard__block__header .logo { margin: 0 4px 0 8px; /* (56px - 36px[.logo]) / 2 = 8px */ } .dashboard__block__header .rightMenu { margin: 0 12px 0 8px; /* (56px - 32px[.btn]) / 2 = 12px */ } .dashboard__block__header .body { padding: unset; min-height: unset; gap: 2px; } .dashboard__block__header .body > div { height: unset; padding-right: 4px; } .dashboard__block__header .body > div.tree { padding: unset; gap: 4px; margin: unset; } .dashboard__block__header .tree .info { font: var(--font-ui-11-micro-reg); } .dashboard__block__header .tree .info ws-icon { --icon-size: 12px; } .dashboard__block__header .tree .info .in { font: inherit; padding: 0 4px 0 0; } .dashboard__block__header .project-name { margin: unset; font: var(--font-ui-16-title-3-bold); box-sizing: border-box; max-width: 100%; padding: 0 2px; border-radius: unset; } .dashboard__block__header .bullet { width: 16px; text-align: center; color: var(--base-txt-secondary); font: var(--font-ui-11-micro-reg); } .dashboard__block__header .btn_openRightPanel .btn { padding-left: 0; } .dashboard__block__header .btn_openRightPanel .btn ws-icon { --icon-size: 12px; } .dashboard__block__header .btn_openRightPanel .btn:not(:hover, :focus, :active) { color: var(--base-txt-secondary); } .dashboard__block__header .btn_openRightPanel .btn:not(:hover, :focus, :active) svg { fill: var(--base-txt-secondary); } @media (hover: hover) { .dashboard__block .dashboard__block__header .btn_openRightPanel .btn:not(:hover, :focus, :active) > span:not([class]) { opacity: 0; transition: opacity .2s ease-out .4s; } .dashboard__block:hover .dashboard__block__header .btn_openRightPanel .btn:not(:hover, :focus, :active) > span:not([class]) { opacity: 1; transition: opacity .2s ease-in; } } .dashboard__block__header .ifExpanded { opacity: 1; transform: translateX(0); transition: opacity .4s ease, transform .2s ease; } .dashboard__block-off .dashboard__block__header .ifExpanded { opacity: 0; transform: translateX(-100%); pointer-events: none; transition: opacity .2s ease, transform .4s ease; } ws-btn.collapse .btn-right-icon { transition: transform .2s ease; } ws-btn.collapse[class*=day] .btn { background: var(--base-cont-top-elevated); } .dashboard__block-off ws-btn.collapse .btn-right-icon { transform: rotate(90deg); } .dashboard__block__body { padding: 0; } .dashboard__block__body > div { padding: 0 0 12px; } .dashboard__block .dashboard__eventsList.no_mm_float::before { content: unset !important; } .dashboard__block .dashboard__eventsList { padding: 0; } .dashboard__eventsList .eventsList__item { margin: unset; border-radius: unset; padding: 4px 4px 4px 8px; } .moredots { margin: 4px auto; } } /* /menu_activity by_project (aka Project feed) */ /* fix conflict with floating topPanel */ @media screen and (min-width: 481px) { .sidePanel__list > .ps__rail-x, .sidePanel__list > .ps__rail-y { z-index: 1004; } } .costsList__group__content { display: flex; flex-direction: column; } .sidePanel-costs-collapse-diff { opacity: .25; } .sidePanel-search { .sidePanel__list__group .eventsList__item { padding: 8px 12px 8px 18px; .eventsList__item .part_left .ava_pre .av_sm { transform: unset; } } } .sidePanel__list__group-semantic { &.sidePanel__list__group-loading .sidePanel__list__item-skeleton { position: relative; .in { background: var(--base-cont-trans-low); height: 14px; width: 80%; border-radius: 4px; display: block; position: absolute; top: 50%; margin-top: -7px; } &:before { position: absolute; top: 8px; right: 12px; bottom: 8px; left: 20px; display: block; content: ''; border-radius: 4px; background: var(--base-cont-low); animation: ws-blink 1.6s infinite ease-in-out; } &:nth-child(n+1):before {animation-delay: 0.3s;} &:nth-child(n+2):before {animation-delay: 0.7s;} } } body, html { height: 100% } main { margin-left: 64px; display: flex; flex-direction: column; transition: margin-left 0.15s linear; height: 100%; position: relative; } @media screen and (max-width:480px) { main { margin-left: 0; } } #content { } main > #content { flex-grow: 1; flex-shrink: 1; overflow: hidden; } #fixed_container, #fixed_container_common, #svg_container { position: absolute; left: 0; top: 0; } #svg_container { left:-1000px; } ws-emoji { width: 26px; height: 26px; } ws-icon ws-emoji { width: 16px; height: 16px; } ws-icon, ws-logo { display: inline-flex; align-content: center; align-items: center; justify-content: center; } ws-icon.w40 { width:40px; height: 40px; } ws-icon.w36 { width:36px; height: 36px; --icon-size: 28px; } ws-icon.w32 { width:32px; height: 32px; } ws-icon.withHover use:last-child { display: none; } ws-icon[name="tickBox-full"] svg use { display: none; } @media (hover: hover) { ws-icon.withHover:hover use:first-child, a:not(.ign_hover):hover ws-icon.withHover use:first-child, .selected ws-icon.withHover use:first-child { display: none; } ws-icon.withHover:hover use:last-child, a:not(.ign_hover):hover ws-icon.withHover use:last-child, .selected ws-icon.withHover use:last-child { display: unset; } } ws-icon.border_solid { border: 1px solid var(--base-txt-secondary); } ws-icon.border_dashed { border: 1px dashed var(--base-txt-tertiary); } .headerMain:has(~ #content.scrollZone-top) { border-bottom: 1px solid var(--base-line-tertiary); } .headerMain { padding: 0 32px; } .headerMain__title { font: 600 24px/24px var(--font-base); height: 40px; padding: 12px 0; } .headerMain__title span.in { cursor: pointer; } .headerMain__title .ws-btn-right { margin-left: auto; } .headerMain__title .primaryMenuButton__wrapper { margin-left: -24px; } .headerMain__main__button { padding: 0 4px; border-radius: 8px; height: 36px; display: flex; align-items: center; justify-content: center; gap: 4px; font: var(--font-ui-22-title-1-semi); color: var(--base-txt-accent); cursor: pointer; } .headerMain__main__button ws-icon[name=home_alt] { --icon-size: 24px; } .headerMain__main__button:hover { background: var(--base-hlt-g-hover); } #sidebarOverlay, #adminMenuOverlay { position:fixed; left:0; top:0; width:0; height:0; overflow:hidden; z-index:1013; background: transparent; transition: all 0.5s ease; } :root { --icon-color:var(--base-txt-primary); --icon-size:20px; } svg, ws-icon { width: 20px; height: 20px; vertical-align: bottom; } ws-icon svg { width: var(--icon-size); height: var(--icon-size); fill: var(--icon-color); pointer-events: none; } ws-icon.proj_folder svg { fill: var(--folder-color); } ws-icon.ws_grad svg { fill: url(#worksection_grad); } ws-icon.s16 { --icon-size: 16px; } ws-icon.s20 { --icon-size: 20px; } @layer flex { .flex_row { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; } .flex-space-between { justify-content: space-between; } @media (max-width: 480px) { .flex_row-scrollable { overflow: hidden; overflow-x: auto; } .flex_row-scrollable::-webkit-scrollbar:horizontal { height: 0; } } .flex_row-forceScrollable { overflow: hidden; overflow-x: auto; } .flex_row-forceScrollable::-webkit-scrollbar:horizontal { height: 0; } .flex_row > * { flex-shrink: 0; flex-grow: 0; } .flex_row > .flex_content, .flex_row > .flex_gap { flex-shrink: 1; flex-grow: 1; /* overflow: hidden; */ } .flex_row.marginLeft-6 { margin-left: 6px; } .flex_column { display: flex; flex-direction: column; align-items: stretch; } .flex_column > * { flex-shrink: 0; flex-grow: 0; flex-basis: auto; } .flex_column > .flex_content, .flex_column > .flex_gap { flex-shrink: 1; flex-grow: 1; overflow: auto; } .flex_column > .flex_fix { flex-shrink: 0; flex-grow: 0; } /* should has only "overflow: hidden;" */ .flex_overflow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* for auto-hint! */ .text_overflow { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .justify_between { justify-content: space-between; } .flex_column > .flex_overflow { overflow: hidden; } .flex_break { flex-basis: 100%; height: 0; } .flex_nogrow, .flex_row > .flex_content.flex_nogrow { flex-grow: 0; } .flex_noshrink, .flex_row > .flex_content.flex_noshrink { flex-shrink: 0; } .flex_grow, .flex_row > .flex_content.flex_grow { flex-grow: 1; } .flex_shrink, .flex_row > .flex_content.flex_shrink { flex-shrink: 1; } .flex_align_start { align-items: start; } .flex_end { justify-content: flex-end; } .flex_column-center, .flex_row-center { justify-content: center; } .flex_row-wrap { flex-wrap: wrap; } .flex_row-nowrap { flex-wrap: nowrap !important; } .flex_space_between { justify-content: space-between; } } /* @layer flex */ .svg_hover use:last-child { display: none; } .svg_hover use:first-child { display: inline-block; } .svg_hover:hover use:first-child { display: none; } .svg_hover:hover use:last-child { display: inline-block; } .svg_hover:hover:active use:first-child { display: none; } .svg_hover:hover:active use:last-child { display: inline-block; } .flex_group { display: flex; min-width: 0; align-items: center; flex-shrink: 1; flex-grow: 1; } /* ----------------------------------------------- */ .inline-edit { display: flex; } .inline-edit input { height: 24px; border-radius: 4px; margin: var(--sidebar-text-padding); font: 14px/20px var(--font-sidebar); } .inline-edit input:focus { box-shadow: var(--shadow-brd-focus); border-color: var(--inp-hlt-focus); } /* ----------------------------------------------- */ .searchInput { display: flex; background: var(--base-cont-mid); box-shadow: var(--shadow-cont-minor-lineonly-inside); height: 36px; border-radius: 24px; margin: 6px 0; transition: background .15s ease-in-out, border-color .15s ease-in-out,box-shadow .15s ease-in-out; } .searchInput:hover { box-shadow: var(--shadow-cont-major-lineonly-outside); } .modal .searchInput { background: var(--base-cont-mod-top); } .modal .searchInput ws-btn { margin-right: 4px; } .modal .searchInput ws-btn button { border-radius: 6px 14px 14px 6px; } body[data-page=search] .searchForm .searchInput { height: 48px; border-radius: 24px; padding: 0 8px; background: var(--base-cont-mid); } .searchInput:focus-within { box-shadow: var(--shadow-cont-major-lineonly-outside); background: var(--base-cont-input) !important; } .modal .searchInput:focus-within { background: var(--base-cont-mod-input) !important; } .searchInput input { border: none; background: transparent; box-sizing: border-box; padding: 0 2px 0 0; height: 20px; width: 100%; font: 14px/20px var(--font-sidebar); } body[data-page=search] .searchInput input { font: 16px/24px var(--font-sidebar); } .searchInput a.delete { display: none; padding: 0 8px; } .searchInput.searchInput-start a.delete { display: block; } .searchInput ws-icon[name="search_sm"] { --icon-color: var(--base-txt-tertiary); --icon-size: 20px; width: 32px; height: 32px; } body[data-page=search] .searchInput ws-icon[name="search_sm"] { --icon-size: 24px; width: 32px; height: 32px; } .searchInput input::placeholder { font: 400 14px/20px var(--font-base); color: var(--base-txt-tertiary); } .searchInput input::-webkit-input-placeholder { font: 400 14px/20px var(--font-base); color: var(--base-txt-tertiary); } body[data-page=search] .searchInput input::-webkit-input-placeholder { font: 400 16px/24px var(--font-base); } /* imitate .inputBlock__label in mixed forms like contact_add, invite etc */ .editBlock__picker-fake { padding: 12px; } .editBlock__picker-fake, .editBlock__picker-inline { transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; } .editBlock__picker-fake:hover, .editBlock__picker-inline:hover { box-shadow: var(--shadow-brd-enable); } .editBlock__picker-fake.editBlock__picker-withHeader:hover, .editBlock__picker-inline.editBlock__picker-withHeader:hover { box-shadow: var(--shadow-brd-enable-outside), 0 0 0 1px var(--base-cont-mod-trans-low); } .editBlock .editBlock__picker-fake, .editBlock .editBlock__picker-inline { transition: unset; } :not(.editBlock-error) > .editBlock__input:not(.editBlock-focused):not(:focus-within):hover, .editBlock .editBlock__picker-fake:not(.menu_open):hover, .editBlock .editBlock__picker-inline:not(.menu_open):hover, :not(.editBlock-error) > .editBlock__textarea:not(.editBlock-focused):not(:focus-within):hover { box-shadow: var(--shadow-brd-enable-hover-outside); } :not(.editBlock-error) > .editBlock__input:has(.proj_color):not(.editBlock-focused):not(:focus-within):hover, :not(.editBlock-error) > .editBlock__textarea:not(.editBlock-focused):not(:focus-within):hover { box-shadow: var(--shadow-brd-enable-hover-outside); } .editBlock { display: flex; flex-direction: column; padding: 16px 28px 28px; } /* такий editBlock має свій контент зі скролЗоною, а кнопки притиснуті до низу */ .editBlock:has(.editBlock__content) { padding: 0; flex-grow: 1; flex-shrink: 1; min-height: 0; } .editBlock .editBlock__content { padding: 16px 28px 2px; } .editBlock:has(.editBlock__content) .editBlock__buttons { padding-left: 28px; padding-right: 28px; padding-bottom: 28px; } .editBlock__spacer-6 { height: 6px; } .editBlock__spacer-8 { height: 8px; } .editBlock__spacer-16 { height: 16px; } .editBlock__inputs { display: flex; align-items: center; flex-direction: row; gap: 16px; } .editBlock__input { box-sizing: border-box; height: 48px; box-shadow: var(--shadow-brd-enable); border-radius: 12px; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; } .editBlock__input:has(.proj_color) { box-shadow: var(--shadow-brd-enable-outside); } .editBlock__input-label .progress_pre, .inputBlock__label .progress_pre { position: absolute; width: calc(100% - 30px); top: 50px; left: 16px; border-radius: 2px !important; overflow: hidden; } .editBlock__input-label .progress_pre .progress2, .inputBlock__label .progress_pre .progress2 { display: block; } .editBlock__input-label .progress2, .inputBlock__label .progress2 {height: 5px;background: var(--base-surf-top);width: calc(100% + 3.5px);} .editBlock__input-label .progress2.progress2_time, .inputBlock__label .progress2.progress2_time {width: calc(100% + 3.5px);} .editBlock__input-label .progress2 div, .editBlock__input-label .progress2.progress2_nofill div, .inputBlock__label .progress2 div, .inputBlock__label .progress2.progress2_nofill div {height: 5px !important} .editBlock__input-label .progress2.progress2_over, .editBlock__input-label .progress2.progress2_over2, .inputBlock__label .progress2.progress2_over, .inputBlock__label .progress2.progress2_over2 {box-shadow: none !important} .editBlock__input-label .progress2.progress2_time.progress2_over, .editBlock__input-label .progress2.progress2_time.progress2_over2, .inputBlock__label .progress2.progress2_time.progress2_over, .inputBlock__label .progress2.progress2_time.progress2_over2 {background: var(--costs-time-minor)} .editBlock__input-label .progress2.progress2_money.progress2_over, .editBlock__input-label .progress2.progress2_money.progress2_over2, .inputBlock__label .progress2.progress2_money.progress2_over, .inputBlock__label .progress2.progress2_money.progress2_over2 {background: var(--costs-money-minor)} .editBlock__input .proj_color { display: flex; width: 48px; height: 100%; align-items: center; justify-content: center; border-radius: 12px 0 0 12px; } .editBlock__input .proj_color ws-emoji { width: 28px; height: 28px; } .editBlock__input input { width: 100%; height: 100%; box-sizing: border-box; padding: 0 0 0 2px; color: var(--base-txt-accent); border: none; font: var(--font-ui-15-large-reg); background: inherit; } .menu .editBlock__input input { background: transparent; } .editBlock__input-label { width: 100%; position: relative; display: flex; align-items: center; flex-direction: row; height: 60px; border-radius: 12px; border: none; background: var(--base-hlt-g-hover); } .editBlock__input-label span.in { width: 100%; display: flex; flex-direction: row; align-items: center; position: relative; padding: 3px; } .editBlock__input-label svg { fill: var(--base-txt-tertiary); } .editBlock__input-label input { padding: 14px 50px 0 40px; background: none; } .editBlock__input-label input:not(:focus):placeholder-shown ~ label.unit { display: none; } .editBlock__input-label:focus-within { background: var(--base-cont-top); } .editBlock__input-label ws-icon { position: absolute; margin: 12px 0 0 11px; } .editBlock__input-label .label { position: absolute; top: 0; padding: 0; margin: 6px 0 0 13px; font: 400 12px/20px var(--font-base); color: var(--base-txt-tertiary); } .editBlock__input-label .unit { position: absolute; right: 0; font: 400 12px/20px var(--font-base); color: var(--base-txt-tertiary); margin: 18px 12px 0; } .editBlock__input.editBlock__input-label input::placeholder { font-weight: 400; } .editBlock__input.editBlock__input-label input::-moz-placeholder { font-weight: 400; } .editBlock__input.editBlock__input-label input::-webkit-input-placeholder { font-weight: 400; } .modal .editBlock__input input:-webkit-autofill { background: none !important; box-shadow: none !important; } .editBlock__input input::placeholder, .editBlock__textarea textarea::placeholder { color: var(--base-txt-tertiary); font-weight: 600; font-size: 16px; font-style: normal; } .editBlock__input input::-moz-placeholder, .editBlock__textarea textarea::-moz-placeholder { color: var(--base-txt-tertiary); font-weight: 600; font-size: 16px; font-style: normal; } .editBlock__input input::-webkit-input-placeholder, .editBlock__textarea textarea::-webkit-input-placeholder { color: var(--base-txt-tertiary); font-weight: 600; font-size: 16px; font-style: normal; } .menu .editBlock__input input::-moz-placeholder, .menu .editBlock__textarea textarea::-moz-placeholder { color: var(--base-txt-tertiary); font:var(--font-ui-14-regular-reg) } .editBlock__input span { height: 100%; box-sizing: border-box; padding: 2px; } .editBlock__input span.flex_content { padding-left: 8px; } .menu .editBlock__input span.flex_content { padding:0 4px; } .editBlock__input:focus-within { background: var(--base-cont-mod-input); box-shadow: var(--shadow-brd-focus); } .editBlock__input:focus-within .editBlock__input__counter{ opacity: 1; } .editBlock__input .editBlock__input__counter { color: var(--base-txt-tertiary); padding: 12px; display: flex; justify-content: center; align-items: center; font-size: 14px; opacity: 0; transition: opacity .1s linear; } .editBlock__textarea { position: relative; box-sizing: border-box; height: 96px; box-shadow: var(--shadow-brd-enable-outside); border: 1px solid transparent; /* this is necessary to avoid glitch with scrolling */ border-radius: 8px; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; } .editBlock__textarea textarea { width: calc(100% - 12px); height: calc(100% - 16px); border: 0; background: none; color: var(--base-txt-accent); font: 15px/20px var(--font-base); font-weight: 400; cursor: auto; margin: 8px 1px 8px 12px; box-sizing: border-box; resize: none; padding: 2px 6px 2px 2px; } .editBlock__textarea:focus-within { background: var(--base-cont-mod-input); box-shadow: var(--shadow-brd-focus); } .editBlock__textarea textarea { overflow: auto; overflow-x: hidden; } .editBlock__textarea textarea::-webkit-scrollbar { height: 12px; width: 12px; } .editBlock__textarea textarea::-webkit-scrollbar-track { background-color: transparent; border: 0; } .editBlock__textarea textarea::-webkit-scrollbar-track:hover { background-color: transparent; } .editBlock__textarea textarea::-webkit-scrollbar-button { display: none; height: 0; width: 0; } .editBlock__textarea textarea::-webkit-scrollbar-corner { background-color: transparent; } .editBlock__textarea textarea::-webkit-scrollbar-thumb { background-color: transparent; border: 3px solid var(--base-cont-top); border-radius: 8px; min-height: 20%; } .editBlock__textarea textarea::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-major) !important; } .editBlock__textarea textarea:hover::-webkit-scrollbar-thumb { background-color: var(--scroll-minor); } .editBlock__textarea textarea::-webkit-resizer { background: transparent; display: none; width: 0; height: 0; } .editBlock__textarea__counter { position: absolute; top: 4px; right: 4px; border-radius: 4px; display: flex; height: 16px; font: 11px/16px var(--font-base); font-weight: 600; width: 28px; background: var(--base-txt-alert-minor); color: var(--base-txt-alt-light); align-items: center; justify-content: center; opacity: 0; } .editBlock-error .editBlock__textarea, .editBlock-error .editBlock__textarea:focus-within { box-shadow: var(--shadow-brd-error-focus); } .editBlock-error .editBlock__textarea__counter { opacity: 1; } .editBlock .editBlock__text, .editBlock .editBlock__hint { padding: 16px 0 0; font-size: 13px; color: var(--base-txt-secondary); } .editBlock .editBlock__text.editBlock__text--error { display: none; } .editBlock.editBlock-error .editBlock__input, .editBlock.editBlock-error .editBlock__input:focus-within { box-shadow: var(--shadow-brd-error-focus); } .editBlock .editBlock__input.editBlock__input-has-error, .editBlock .editBlock__input.editBlock__input-has-error { box-shadow: var(--shadow-brd-error-focus) !important; } .editBlock.editBlock-error .editBlock__text { display: block; color: var(--base-txt-alert-major); --icon-color: var(--base-txt-alert-major); } .editBlock.editBlock-error .editBlock__input__counter { color: var(--base-txt-alert-minor); } .editBlock.editBlock-error .notify_block { display: none; } .menu .editBlock__input .editBlock__input__counter { visibility: hidden; } .menu .editBlock__input .editBlock__input__counter.editBlock__input__counter-error { visibility: visible; color: var(--base-txt-alert-major); } .editBlock.editBlock-error .editBlock__buttons { justify-content: flex-end; } .editBlock__buttons { display: flex; /* padding-top: 44px; */ margin-top: 32px; align-items: center; justify-content: space-between; } .editBlock__buttons-right { margin-left: auto; display: flex; gap: 12px; } .editBlock__buttons .button_dis { cursor: no-drop; } .editBlock-initClose .editBlock-backdrop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--base-cont-mod-top); z-index: 99; opacity: 0.8; } .editBlock-initClose .editBlock-close { position: absolute; left: 0; bottom: 0; right:0; z-index: 100; border-top: 2px solid var(--base-btn-alert-primary-minor); } .editBlock-initClose .editBlock-close > div { background: var(--base-cont-mod-top); opacity: 1; } .editBlock-initClose .editBlock-close-title { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 4px 16px; } .editBlock-initClose .editBlock-close-title .text { padding: 0 16px 0 12px; color: var(--base-txt-accent); font: var(--font-ui-22-title-1-bold); } .editBlock-initClose .editBlock-close-text { font: 15px/22px var(--font-base); padding: 8px 28px; } .editBlock-initClose .editBlock-close-buttons { padding: 12px 28px 28px 28px; display: flex; justify-content: flex-start; } .editBlock__title { padding: 8px 0 2px; margin: 12px 0 0; font: 600 15px/22px var(--font-base); color: var(--base-txt-primary); gap: 4px; } .editBlock__title .editBlock__picker__counter { font: 400 13px/16px var(--font-base); color: var(--base-txt-tertiary); } .editBlock__picker { border-radius: 12px; background: var(--base-cont-mod-trans-low); display: flex; flex-direction: column; /* border: 1px solid var(--trans); */ cursor: pointer; position: relative; } .editBlock__picker.scrollZone { max-height:120px; padding: 12px; } .editBlock__picker .editBlock__picker__body.scrollZone { padding: 12px; } .inputBlock__wrapper .editBlock__picker { width:100%; } .editBlock__picker label { font: 400 12px/20px var(--font-base); color: var(--base-txt-tertiary); cursor: pointer; margin: -6px 0 0 0; padding: 0 4px; } .editBlock__picker .chip.chip-info { cursor: pointer; } .editBlock__picker__body { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 6px; } .editBlock__picker .label ~ .editBlock__picker__body { /* margin-top: 6px; */ } .editBlock__picker.editBlock__picker-withHeader { padding: 0; position: relative; background: var(--base-cont-mod-low); /* background: var(--base-cont-mod-trans-low); */ .editBlock__picker__header, &> .label { position: absolute; top: 0; left: 0; right: 0; background: linear-gradient(180deg, var(--base-cont-mod-low), var(--base-cont-mod-low-opac)); @media (max-width: 480px) { background: linear-gradient(180deg, var(--base-cont-low), var(--base-cont-low-opac)); } z-index: 1; margin: 0; /* padding: 6px 12px 6px; */ padding: 6px 6px 6px 12px; backdrop-filter: blur(4px); border-radius: 12px 12px 0 0; } .editBlock__picker__body { max-height: 100px; margin: 0; padding: 12px; border-top: unset; padding-top: 38px; box-shadow: unset; } &.editBlock__picker-fake .editBlock__picker__body.scrollZone, &.editBlock__picker-inline .editBlock__picker__body.scrollZone { max-height: 100px; } } .editBlock__picker-tags { min-height: 60px; box-sizing: border-box; justify-content: center; } .menu .editBlock__picker-tags:not(.editBlock__picker-withHeader) { background: var(--base-cont-mod-mid); } .menu .editBlock__picker-tags:not(.editBlock__picker-withHeader) .label { padding: 12px 12px 0; } .menu .editBlock__picker-tags:not(.editBlock__picker-withHeader) .label + .editBlock__picker__body { padding-top: 0; } .menu__group-head + .menu__group__wrapper .editBlock__picker-tags { border-radius: 0; } @media (max-width: 480px) { .menu__group__wrapper .editBlock__picker__body { margin-bottom: 6px; } .menu__group__wrapper .editBlock__picker-tags { padding: 0 6px; min-height: auto; background: none; } } .editBlock__picker-tags:not(.editBlock__picker-withHeader) .editBlock__picker__body:not(:has(.editBlock__picker__item, .editBlock__picker__search)) { display: none; } .editBlock__picker-tags:not(.editBlock__picker-withHeader):not(:has(.editBlock__picker__item)) .editBlock__picker-tags__label label { font-size: 16px; } .editBlock__picker-tags:not(.editBlock__picker-withHeader):has(.editBlock__picker__item) .editBlock__picker-tags__label { margin-top: -7px; margin-left: 4px; ws-icon { display: none; } } .editBlock__picker-tags:not(.editBlock__picker-withHeader) .editBlock__picker-tags__label label { margin: initial; padding: initial; } .editBlock__picker__item:not(.picker_chip) { background: var(--base-cont-mod-top); box-shadow: 0 0 0 1px var(--base-txt-ghost) inset; padding: 0 8px 0 0; border-radius: 24px; color: inherit; font: var(--font-ui-12-mini-med); height: 24px; max-width: 200px; -webkit-appearance: none; outline: none; } .editBlock__picker__item.picker_chip { border-radius: 24px; } .editBlock__picker__item:hover { color: inherit; } .editBlock__picker:not(.editBlock__picker-fake) .editBlock__picker__item:hover { /* background:var(--trans); */ } .editBlock__picker__body-h28 .editBlock__picker__add[name*=btn-24] { margin-top: 2px; } .editBlock__picker:not(.editBlock__picker-fake) .editBlock__picker__item-group:hover { /*background: var(--base-hlt-b-invert-major);*/ } .editBlock__picker:not(.editBlock__picker-fake) .editBlock__picker__item-blue:hover { /*background: var(--base-hlt-invert-major);*/ } .editBlock__picker-emails .editBlock__picker__item { /*background: var(--colorize-lbl-green-bg);*/ /*font: var(--font-ui-13-small-med);*/ /*border-radius: 6px;*/ /*height: 28px;*/ /*padding: 0 6px;*/ } .editBlock__picker-emails .editBlock__picker__item.picker_chip { border-radius: 6px; } .editBlock__picker-emails .editBlock__picker__item .chip.chip-invite { background: #4FBE2933; } .editBlock__picker-emails .editBlock__picker__item-error .chip.chip-invite { background: var(--base-hlt-w-pressed); } .editBlock__picker-emails .editBlock__picker__item svg { /*fill: var(--base-txt-primary);*/ } .editBlock__picker-emails .editBlock__picker__item-error { /*background: var(--base-hlt-w-pressed);*/ } .editBlock__picker-emails .editBlock__picker__item-error2 { /*background: var(--base-hlt-alt-notice);*/ } .editBlock__picker-emails .editBlock__picker__item-error2 ws-icon[name*=roles] svg { /*fill: var(--base-txt-alert-minor);*/ } .editBlock__picker-emails .editBlock__picker__item:hover { /*color: var(--base-txt-primary);*/ /*background: var(--base-cont-mod-top);*/ /*box-shadow: 0 0 0 1px var(--base-txt-primary) inset;*/ } .editBlock__picker__item-project, .editBlock__picker__item-folder { /*background: var(--base-cont-mod-top);*/ /*box-shadow: 0 0 0 1px var(--base-txt-muted) inset;*/ /*font: var(--font-ui-13-small-reg);*/ /*border-radius: 6px;*/ /*height: 28px;*/ /*padding: 0 6px;*/ /*color: var(--base-txt-primary);*/ } .editBlock__picker__item-folder, .editBlock__picker__item-project, .editBlock__picker__item-email { max-width: calc(50% - 3px); } .editBlock__picker__item-folder ws-chip, .editBlock__picker__item-project ws-chip, .editBlock__picker__item-email ws-chip { max-width: 100%; } .editBlock__picker__item-project .chip.chip-invite:not(:has(ws-icon.chip-left-icon)) > span:not([class]) { font-weight: 400; } .editBlock__picker__item-project.picker_chip, .editBlock__picker__item-folder.picker_chip { border-radius: 6px; } .editBlock__picker__item-folder .name { /*font: var(--font-ui-13-small-semi);*/ } .editBlock__picker__item-project .proj_color, .editBlock__picker__item-project ws-emoji { /*width: 16px;*/ /*height: 16px;*/ } .editBlock__picker__item-project svg, .editBlock__picker__item-folder svg { /*fill: var(--base-txt-primary);*/ } .editBlock__picker-projects ws-icon[name^=folder] svg { fill: var(--folder-color); } .editBlock__picker-projects:not(.editBlock__picker-fake) .editBlock__picker__item:hover { /*color: var(--base-txt-primary);*/ /*background: var(--trans);*/ /*box-shadow: 0 0 0 1px var(--base-txt-tertiary) inset;*/ } .editBlock__picker-tags .editBlock__picker__item { background: var(--tag-bg); height: 24px; color: var(--colorize-lbl-txt-primary); box-shadow: var(--shadow-cont-major-lineonly-inside); } .editBlock__picker-tags .editBlock__picker__item:hover { /* box-shadow: 0 0 0 1px var(--base-txt-ghost) inset; */ /* background: var(--trans); */ } .editBlock__picker-tags .editBlock__picker__item:before { content: ''; width: 10px; height: 10px; background: var(--tag-color); border-radius: 5px; margin: 0 4px 0 7px; outline: 2px solid var(--base-cont-top); } .editBlock__picker-tags .editBlock__picker__item ws-icon[name=lock_sm] { margin: 0 0 0 -4px; width: 16px; height: 16px; } .editBlock__picker-tags .editBlock__picker__item ws-icon[name=lock_sm] svg { fill: var(--base-txt-secondary) } .editBlock__picker__item-selected { box-shadow: var(--shadow-brd-enable-focus) !important; } .editBlock__picker__item.selected { box-shadow: var(--shadow-brd-04-focus-mini); } .editBlock__picker__item.selected .chip { box-shadow: unset !important; } .editBlock__picker__item { ws-chip { overflow: unset; } .chip.chip-info { outline: unset; box-shadow: var(--shadow-cont-major-lineonly-inside); } .chip.chip-info:hover { box-shadow: var(--shadow-cont-major-lineonly-outside); } } .editBlock__picker__item-group { background: var(--base-hlt-b-invert-minor); color: var(--base-txt-alt-light); padding: 0 10px 0 8px; box-shadow: none; } .editBlock__picker__item-group.editBlock__picker__item-selected { box-shadow: var(--shadow-brd-focus-b); } .editBlock__picker__item-group svg, .editBlock__picker__item-blue svg { fill: var(--white-primary); } .editBlock__picker__item-group .editBlock__picker__item .delete:hover svg { fill: var(--base-hlt-b-invert-major); } .editBlock__picker__item-blue { background: var(--base-hlt-invert); color: var(--base-txt-alt-light); padding: 0 10px 0 8px; box-shadow: none; } .editBlock__picker__item-blue:hover, .editBlock__picker__item-group:hover { color: var(--base-txt-alt-light); } .editBlock__picker__item-blue.editBlock__picker__item-selected { box-shadow: var(--shadow-brd-enable-focus); } .editBlock__picker__item-client .chip.chip { box-shadow: inset 0 0 0 1px var(--base-hlt-b-invert-minor); background: var(--base-hlt-b-hover); } .editBlock__picker__item-client .chip.chip:hover { box-shadow: 0 0 0 1px var(--base-hlt-b-invert-minor); } .editBlock__picker__item span:not([class]) .loader { margin-inline: 4px; } .editBlock__picker__item .icon { min-width: 4px; min-height: 24px; display: flex; align-items: center; } .editBlock__picker__item .name, .editBlock__picker__item .in { padding: 0 4px; } .editBlock__picker__item .cnt { color: inherit; opacity: 0.5; margin:0 6px 0 0; } .editBlock__picker__item:not(.picker_chip) .delete { cursor: pointer; margin: 0 -4px; } .editBlock__picker-tags .editBlock__picker__item { padding-right: 6px; .delete { ws-icon svg { width: 14px; height: 14px; fill: var(--colorize-lbl-txt-accent) !important; opacity: .66; use:nth-child(2) { display: none; } } &:hover { ws-icon svg { opacity: 1; use:nth-child(1) { display: none; } use:nth-child(2) { display: inline; } } } } &.selected { .delete { ws-icon svg { opacity: 1; use:nth-child(1) { display: none; } use:nth-child(2) { display: inline; } } } } } .editBlock__picker-tags.editBlock__picker-fake .editBlock__picker__item { padding-right: 8px; } .editBlock__picker-fake .delete { display: none; } .editBlock__picker__item:not(.picker_chip) .delete svg { width: 16px; height: 16px; fill: var(--base-txt-accent); opacity: 0.5 } .editBlock__picker__item .delete:hover svg { opacity: 1; } .editBlock__picker__item.picker_chip .chip-28 .delete { width: 16px; height: 16px; } .editBlock__picker__item.picker_chip .chip-28 .delete svg { width: 16px; height: 16px; } .editBlock__picker__item-default .delete:hover svg, .editBlock__picker__item-blue .delete:hover svg, .editBlock__picker__item-group .delete:hover svg { background: var(--base-hlt-g-selected); border-radius: 8px; } .editBlock__picker__item-blue .delete svg, .editBlock__picker__item-group .delete svg { fill: var(--white-primary); } .editBlock__picker-emails .editBlock__picker__item .delete svg { /*fill: var(--base-txt-primary); */ } .editBlock__picker__search { min-width: 100px; } .editBlock__picker__search input { border: none; background: transparent; box-sizing: border-box; padding: 4px; height: 24px; width: 100%; color: var(--base-txt-primary); font: 13px/20px var(--font-base); } .editBlock__picker__search input:-webkit-autofill { background: transparent !important; } .editBlock__picker-emails .editBlock__picker__search { min-width:260px; } .editBlock__picker-emails .editBlock__picker__search input, .editBlock__picker-projects .editBlock__picker__search input { font: var(--font-ui-15-large-semi); line-height: 28px; height: 28px; } .editBlock__picker-emails .editBlock__picker__search input::placeholder, .editBlock__picker-projects .editBlock__picker__search input::placeholder { font: inherit; padding:2px 0; } .editBlock__picker #upgr_text { color: var(--base-txt-alert-minor); padding: 0 0 10px; } :where(.projectCreate, .bookmarkCreate) .editBlock__text, .chatEdit .editBlock__text { display: none; } .projectCreate .editBlock__input input[type="text"] { font: var(--font-ui-18-title-2-semi); &::-webkit-input-placeholder { font: inherit; } &::-ms-input-placeholder { font: inherit; } &:-moz-placeholder { font: inherit; } &::placeholder { font: inherit; } } @media (max-height: 1200px) { .primaryMenu__item-optional { /* display: none; */ } .primaryMenu .optional { display: none; } } task-assignee, task-term, task-author, task-priority, task-tags, task-stage, task-todos, project-assignee, project-term, project-author, project-tags, project-stage, project-folder { display: inline-flex; align-items: center; } task-unseen, task-attach, task-timers { display: inline; } .tag_block ws-icon[name="task_workflow/started"] { --tag-color: var(--base-txt-alt-light); } ws-icon[name="task_workflow/started"], [name="prj_workflow/progress"] { position: relative; --percent: 0.5turn; } ws-icon[name="task_workflow/started"]:after, [name="prj_workflow/progress"]:after { content: ''; width: var(--icon-size); height: var(--icon-size); /* margin: 0 0 0 calc(0px - var(--icon-size)); */ position: absolute; background: conic-gradient(var(--tag-color), var(--tag-color) var(--percent), transparent var(--percent)); -webkit-mask-size: cover; } ws-icon[name="task_workflow/started"]:after { /*-webkit-mask-image: url(/img/mask/task_stage.svg);*/ /*mask-image: url(/img/mask/task_stage.svg);*/ -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTExLjc2NzYgMTUuMTEwOEwxNS4xMTA4IDExLjc2NzdDMTYuMDg3MSAxMC43OTEzIDE2LjA4NzEgOS4yMDg0MyAxNS4xMTA4IDguMjMyMTFMMTEuNzY3NiA0Ljg4ODk3QzEwLjc5MTMgMy45MTI2NiA5LjIwODQyIDMuOTEyNjYgOC4yMzIxMSA0Ljg4ODk3TDQuODg4OTcgOC4yMzIxMkMzLjkxMjY2IDkuMjA4NDMgMy45MTI2NiAxMC43OTEzIDQuODg4OTcgMTEuNzY3Nkw4LjIzMjExIDE1LjExMDhDOS4yMDg0MiAxNi4wODcxIDEwLjc5MTMgMTYuMDg3MSAxMS43Njc2IDE1LjExMDhaTTEyLjgyODMgMy44MjgzMUMxMS4yNjYyIDIuMjY2MjEgOC43MzM1NCAyLjI2NjIyIDcuMTcxNDUgMy44MjgzMUwzLjgyODMxIDcuMTcxNDZDMi4yNjYyMSA4LjczMzU2IDIuMjY2MjIgMTEuMjY2MiAzLjgyODMxIDEyLjgyODNMNy4xNzE0NSAxNi4xNzE1QzguNzMzNTQgMTcuNzMzNiAxMS4yNjYyIDE3LjczMzYgMTIuODI4MyAxNi4xNzE1TDE2LjE3MTUgMTIuODI4M0MxNy43MzM2IDExLjI2NjIgMTcuNzMzNiA4LjczMzU1IDE2LjE3MTUgNy4xNzE0NUwxMi44MjgzIDMuODI4MzFaIiBmaWxsPSJibGFjayIvPgogIDxnPgogICAgPHBhdGggZD0iTTkuMjkyOTggNS43MDcyQzkuNjgzNSA1LjMxNjY4IDEwLjMxNjcgNS4zMTY2OCAxMC43MDcyIDUuNzA3MkwxNC4yOTMgOS4yOTI5OUMxNC42ODM1IDkuNjgzNTEgMTQuNjgzNSAxMC4zMTY3IDE0LjI5MyAxMC43MDcyTDEwLjcwNzIgMTQuMjkzQzEwLjMxNjcgMTQuNjgzNSA5LjY4MzUgMTQuNjgzNSA5LjI5Mjk4IDE0LjI5M0w1LjcwNzIgMTAuNzA3MkM1LjMxNjY4IDEwLjMxNjcgNS4zMTY2OCA5LjY4MzUxIDUuNzA3MiA5LjI5Mjk5TDkuMjkyOTggNS43MDcyWiIgZmlsbD0iYmxhY2siLz4KICA8L2c+Cjwvc3ZnPg==); mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTExLjc2NzYgMTUuMTEwOEwxNS4xMTA4IDExLjc2NzdDMTYuMDg3MSAxMC43OTEzIDE2LjA4NzEgOS4yMDg0MyAxNS4xMTA4IDguMjMyMTFMMTEuNzY3NiA0Ljg4ODk3QzEwLjc5MTMgMy45MTI2NiA5LjIwODQyIDMuOTEyNjYgOC4yMzIxMSA0Ljg4ODk3TDQuODg4OTcgOC4yMzIxMkMzLjkxMjY2IDkuMjA4NDMgMy45MTI2NiAxMC43OTEzIDQuODg4OTcgMTEuNzY3Nkw4LjIzMjExIDE1LjExMDhDOS4yMDg0MiAxNi4wODcxIDEwLjc5MTMgMTYuMDg3MSAxMS43Njc2IDE1LjExMDhaTTEyLjgyODMgMy44MjgzMUMxMS4yNjYyIDIuMjY2MjEgOC43MzM1NCAyLjI2NjIyIDcuMTcxNDUgMy44MjgzMUwzLjgyODMxIDcuMTcxNDZDMi4yNjYyMSA4LjczMzU2IDIuMjY2MjIgMTEuMjY2MiAzLjgyODMxIDEyLjgyODNMNy4xNzE0NSAxNi4xNzE1QzguNzMzNTQgMTcuNzMzNiAxMS4yNjYyIDE3LjczMzYgMTIuODI4MyAxNi4xNzE1TDE2LjE3MTUgMTIuODI4M0MxNy43MzM2IDExLjI2NjIgMTcuNzMzNiA4LjczMzU1IDE2LjE3MTUgNy4xNzE0NUwxMi44MjgzIDMuODI4MzFaIiBmaWxsPSJibGFjayIvPgogIDxnPgogICAgPHBhdGggZD0iTTkuMjkyOTggNS43MDcyQzkuNjgzNSA1LjMxNjY4IDEwLjMxNjcgNS4zMTY2OCAxMC43MDcyIDUuNzA3MkwxNC4yOTMgOS4yOTI5OUMxNC42ODM1IDkuNjgzNTEgMTQuNjgzNSAxMC4zMTY3IDE0LjI5MyAxMC43MDcyTDEwLjcwNzIgMTQuMjkzQzEwLjMxNjcgMTQuNjgzNSA5LjY4MzUgMTQuNjgzNSA5LjI5Mjk4IDE0LjI5M0w1LjcwNzIgMTAuNzA3MkM1LjMxNjY4IDEwLjMxNjcgNS4zMTY2OCA5LjY4MzUxIDUuNzA3MiA5LjI5Mjk5TDkuMjkyOTggNS43MDcyWiIgZmlsbD0iYmxhY2siLz4KICA8L2c+Cjwvc3ZnPg==); } [name="prj_workflow/progress"]:after { /*-webkit-mask-image: url(/img/mask/project_stage.svg);*/ /*mask-image: url(/img/mask/project_stage.svg);*/ -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNMTAuNSA1LjI4ODY4QzEwLjE5MDYgNS4xMTAwNCA5LjgwOTQgNS4xMTAwNCA5LjUgNS4yODg2OEw2LjE2OTg3IDcuMjExMzJDNS44NjA0NyA3LjM4OTk2IDUuNjY5ODcgNy43MjAwOCA1LjY2OTg3IDguMDc3MzVWMTEuOTIyNkM1LjY2OTg3IDEyLjI3OTkgNS44NjA0NyAxMi42MSA2LjE2OTg3IDEyLjc4ODdMOS41IDE0LjcxMTNDOS44MDk0IDE0Ljg5IDEwLjE5MDYgMTQuODkgMTAuNSAxNC43MTEzTDEzLjgzMDEgMTIuNzg4N0MxNC4xMzk1IDEyLjYxIDE0LjMzMDEgMTIuMjc5OSAxNC4zMzAxIDExLjkyMjZWOC4wNzczNUMxNC4zMzAxIDcuNzIwMDggMTQuMTM5NSA3LjM4OTk2IDEzLjgzMDEgNy4yMTEzMkwxMC41IDUuMjg4NjhaIiBmaWxsPSJibGFjayIvPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOC45ODk2NCAyLjI3ODczQzkuNjE0ODUgMS45MDcwOSAxMC4zODUxIDEuOTA3MDkgMTEuMDEwNCAyLjI3ODczTDE1Ljk4OTYgNS4yMzg1QzE2LjYxNDkgNS42MTAxNCAxNyA2LjI5Njk1IDE3IDcuMDQwMjNWMTIuOTU5OEMxNyAxMy43MDMgMTYuNjE0OCAxNC4zODk5IDE1Ljk4OTYgMTQuNzYxNUwxMS4wMTA0IDE3LjcyMTNDMTAuMzg1MSAxOC4wOTI5IDkuNjE0ODUgMTguMDkyOSA4Ljk4OTY0IDE3LjcyMTNMNC4wMTAzNiAxNC43NjE1QzMuMzg1MTUgMTQuMzg5OSAzIDEzLjcwMyAzIDEyLjk1OThWNy4wNDAyM0MzIDYuMjk2OTUgMy4zODUxNSA1LjYxMDE0IDQuMDEwMzYgNS4yMzg1TDguOTg5NjQgMi4yNzg3M1pNMTAuMjQzOSAzLjU2ODEzTDE1LjIyMzIgNi41Mjc5QzE1LjM4MTUgNi42MjE5OCAxNS41IDYuODExNzggMTUuNSA3LjA0MDIzVjEyLjk1OThDMTUuNSAxMy4xODgyIDE1LjM4MTUgMTMuMzc4IDE1LjIyMzIgMTMuNDcyMUwxMC4yNDM5IDE2LjQzMTlDMTAuMDkxMSAxNi41MjI3IDkuOTA4OTEgMTYuNTIyNyA5Ljc1NjA4IDE2LjQzMTlMNC43NzY4MSAxMy40NzIxQzQuNjE4NTQgMTMuMzc4IDQuNSAxMy4xODgyIDQuNSAxMi45NTk4VjcuMDQwMjNDNC41IDYuODExNzggNC42MTg1NCA2LjYyMTk4IDQuNzc2ODEgNi41Mjc5TDkuNzU2MDggMy41NjgxM0M5LjkwODkxIDMuNDc3MjkgMTAuMDkxMSAzLjQ3NzI5IDEwLjI0MzkgMy41NjgxM1oiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPg==); mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNMTAuNSA1LjI4ODY4QzEwLjE5MDYgNS4xMTAwNCA5LjgwOTQgNS4xMTAwNCA5LjUgNS4yODg2OEw2LjE2OTg3IDcuMjExMzJDNS44NjA0NyA3LjM4OTk2IDUuNjY5ODcgNy43MjAwOCA1LjY2OTg3IDguMDc3MzVWMTEuOTIyNkM1LjY2OTg3IDEyLjI3OTkgNS44NjA0NyAxMi42MSA2LjE2OTg3IDEyLjc4ODdMOS41IDE0LjcxMTNDOS44MDk0IDE0Ljg5IDEwLjE5MDYgMTQuODkgMTAuNSAxNC43MTEzTDEzLjgzMDEgMTIuNzg4N0MxNC4xMzk1IDEyLjYxIDE0LjMzMDEgMTIuMjc5OSAxNC4zMzAxIDExLjkyMjZWOC4wNzczNUMxNC4zMzAxIDcuNzIwMDggMTQuMTM5NSA3LjM4OTk2IDEzLjgzMDEgNy4yMTEzMkwxMC41IDUuMjg4NjhaIiBmaWxsPSJibGFjayIvPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOC45ODk2NCAyLjI3ODczQzkuNjE0ODUgMS45MDcwOSAxMC4zODUxIDEuOTA3MDkgMTEuMDEwNCAyLjI3ODczTDE1Ljk4OTYgNS4yMzg1QzE2LjYxNDkgNS42MTAxNCAxNyA2LjI5Njk1IDE3IDcuMDQwMjNWMTIuOTU5OEMxNyAxMy43MDMgMTYuNjE0OCAxNC4zODk5IDE1Ljk4OTYgMTQuNzYxNUwxMS4wMTA0IDE3LjcyMTNDMTAuMzg1MSAxOC4wOTI5IDkuNjE0ODUgMTguMDkyOSA4Ljk4OTY0IDE3LjcyMTNMNC4wMTAzNiAxNC43NjE1QzMuMzg1MTUgMTQuMzg5OSAzIDEzLjcwMyAzIDEyLjk1OThWNy4wNDAyM0MzIDYuMjk2OTUgMy4zODUxNSA1LjYxMDE0IDQuMDEwMzYgNS4yMzg1TDguOTg5NjQgMi4yNzg3M1pNMTAuMjQzOSAzLjU2ODEzTDE1LjIyMzIgNi41Mjc5QzE1LjM4MTUgNi42MjE5OCAxNS41IDYuODExNzggMTUuNSA3LjA0MDIzVjEyLjk1OThDMTUuNSAxMy4xODgyIDE1LjM4MTUgMTMuMzc4IDE1LjIyMzIgMTMuNDcyMUwxMC4yNDM5IDE2LjQzMTlDMTAuMDkxMSAxNi41MjI3IDkuOTA4OTEgMTYuNTIyNyA5Ljc1NjA4IDE2LjQzMTlMNC43NzY4MSAxMy40NzIxQzQuNjE4NTQgMTMuMzc4IDQuNSAxMy4xODgyIDQuNSAxMi45NTk4VjcuMDQwMjNDNC41IDYuODExNzggNC42MTg1NCA2LjYyMTk4IDQuNzc2ODEgNi41Mjc5TDkuNzU2MDggMy41NjgxM0M5LjkwODkxIDMuNDc3MjkgMTAuMDkxMSAzLjQ3NzI5IDEwLjI0MzkgMy41NjgxM1oiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPg==); } .buttons-flex { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .buttons-flex .button { } .qr_img { width: 100%; height: auto; } .time_input::-moz-selection { background: var(--base-hlt-pressed); } .time_input::selection { background: var(--base-hlt-pressed); } .time_input-empty { color: var(--base-txt-tertiary) !important; } ws-icon.green { --icon-color: var(--base-txt-new-major) !important; } ws-icon.red { --icon-color: var(--base-txt-alert-major) !important; } ws-icon.orange { --icon-color: var( --base-btn-notice-major) !important; } ws-icon.blue { --icon-color: var(--base-txt-act-major) !important; } ws-icon.gray { --icon-color: var(--base-txt-tertiary) !important; } .menu__item project-tags ws-icon.tag, .menu__item project-stage ws-icon.tag { width:20px; height:20px; --icon-size:16px; } .menu__item ws-icon[name*="box-select"] { --icon-color: var(--base-txt-tertiary); } .menu__item.selected ws-icon[name*="box-select"] { --icon-color: var(--base-txt-primary); } @media (max-width: 480px) { .editBlock__picker.scrollZone { max-height: unset; } .editBlock__picker .editBlock__picker__body.scrollZone { max-height: unset; } } ws-icon.border_solid { border: 1px solid var(--base-txt-secondary); } .data_place ws-icon.border_dashed { border: 1.5px dotted var(--base-txt-tertiary); } ws-icon[name=mail].ico_nologin { --icon-color: var(--base-txt-alert-major); } .projectFolderCreate .editBlock__buttons { margin: 0 !important; } .proj_folder_color_input .flex_row-wrap { gap: 2px 16px; } .editBlock__picker .select-all { position: absolute; right: 6px; top: 6px; font: var(--font-ui-11-micro-med); color: var(--base-txt-secondary); padding:0 4px; z-index: 6; } .editBlock__bigSwitch { height: 56px; padding:0 12px; background: var(--base-txt-btn-c); color: var(--base-txt-alt-light); border-radius: 12px; margin: 10px 0 8px; cursor: pointer; } .editBlock__bigSwitch ws-icon { width:32px; } .editBlock__bigSwitch ws-icon svg { fill: var(--base-txt-alt-light); } .editBlock__bigSwitch .in { padding: 0 4px; font: var(--font-ui-12-mini-reg); line-height: 1.4; text-wrap-style: balance; } .editBlock__bigSwitch .sw_act .sw { background: var(--base-txt-alt-light); } .editBlock__bigSwitch .sw_act .sw span { background: var(--base-txt-new-minor); } .editBlock__picker__header { margin-top: -6px; margin-bottom: 8px; .label { font: var(--font-ui-12-mini-reg); color: var(--base-txt-primary); margin: 0; padding: 0 4px; &.flex_row { gap: 1ch; } &.label-error { color: var(--base-txt-btn-w); } } } .chatEdit .editBlock__bigSwitch, .projectCreate .editBlock__bigSwitch { margin-top: 0; margin-bottom: 0; } .editBlock__picker-users .editBlock__picker__body .chip { padding-right: 6px; &.chip-28 .av_sm { width: 28px; height: 28px; font: 600 11.6667px/30px var(--font-base) !important; border-radius: 50%; } } .editBlock__picker-users { background: var(--base-cont-mod-low) !important; } .taskReminder .editBlock__picker { margin-top: 8px; margin-bottom: 8px; } .menu__group-picker .editBlock__picker-users .editBlock__picker__search { width: 235px; input { font: var(--font-ui-15-large-semi); height: 20px; padding-top: 0; padding-bottom: 0; &::-webkit-input-placeholder { font: inherit; height: 20px; } &::-ms-input-placeholder { font: inherit; height: 20px; } &:-moz-placeholder { font: inherit; height: 20px; } &::placeholder { font: inherit; height: 20px; } } } .menu__group__title.menu__group__title-muted { color: var(--base-txt-muted); } #menuChatMembers .menu__item .cnt_stat, #menuProjectCreateMembers .menu__item .cnt_stat { --icon-color: var(--base-txt-tertiary); } .editBlock__picker.editBlock__picker-no-pickable { .editBlock__picker__add { opacity: .2; } } #menuTaskReminderMembers .chip:not(.chip-group) ws-icon:first-child, .taskReminder .chip:not(.chip-group) ws-icon:first-child { --icon-color: var(--base-txt-primary); } #menuTaskReminderMembers .chip:not(.chip-group) span:not([class]), .taskReminder .chip:not(.chip-group) span:not([class]) { color: var(--base-txt-primary); } .tag_new {--tag-bg:var(--colors-pine-800); --tag-color:var(--colors-pine-800);} form[name=invite_frm] .button_dis2, form[name=invite_frm] .button_dis3 { opacity: .5; } #reassign-tasks { .inputBlock__label > ws-icon { --icon-color: var(--base-txt-accent); } .inputBlock__wrapper { flex-wrap: nowrap; } .inputBlock-auto { min-width: 0; } .inputBlock-200px { width: 200px; flex-shrink: 0; } } #too_many.too_many-w { background: var(--base-hlt-w-hover); color: var(--base-txt-btn-w); } body.withAdvancedFilter { #too_many { display: none; } main > #content { overflow-y:scroll; position:relative } .dataTable__wrapper { height:auto; overflow:hidden !important } .dataTable__shadowLine { top:546px; } .dataTable { height:auto; min-height:calc(100% - 16px) } } body.offlineMode { .inputCheckbox, .rowDragger, [name=drag_indicator] { pointer-events: none; } } .ws-skeleton-container { i {display: inline-block;} i:before { height: 100%; display: block; content: ''; border-radius: 4px; background: var(--base-line-ghost); animation: ws-blink 1.8s infinite ease-in-out; opacity: 0; --delay: 0.16s; --delay-offset: 0.05s; } i:nth-child(n+1):before {animation-delay: calc(var(--delay-offset) + var(--delay) * 1);} i:nth-child(n+2):before {animation-delay: calc(var(--delay-offset) + var(--delay) * 2);} i:nth-child(n+3):before {animation-delay: calc(var(--delay-offset) + var(--delay) * 3);} i:nth-child(n+4):before {animation-delay: calc(var(--delay-offset) + var(--delay) * 4);} i:nth-child(n+5):before {animation-delay: calc(var(--delay-offset) + var(--delay) * 5);} i:nth-child(n+6):before {animation-delay: calc(var(--delay-offset) + var(--delay) * 6);} .i:nth-child(n+1) i:before {animation-delay: calc(var(--delay-offset) + var(--delay) * 1);} .i:nth-child(n+2) i:before {animation-delay: calc(var(--delay-offset) + var(--delay) * 2);} .i:nth-child(n+3) i:before {animation-delay: calc(var(--delay-offset) + var(--delay) * 3);} .i:nth-child(n+4) i:before {animation-delay: calc(var(--delay-offset) + var(--delay) * 4);} .i:nth-child(n+5) i:before {animation-delay: calc(var(--delay-offset) + var(--delay) * 5);} .i:nth-child(n+6) i:before {animation-delay: calc(var(--delay-offset) + var(--delay) * 6);} } .ws-skeleton-place { display: block; position: relative; margin: auto; height: 14px; width: 100%; flex-shrink: 1; --delay: 0.16s; --delay-offset: 0.05s; &:before { height: 100%; display: block; content: ''; border-radius: 4px; background: var(--base-line-ghost); animation: ws-blink 1.8s infinite ease-in-out; opacity: 0; animation-delay: calc(var(--delay-offset)); } } .ws-skeleton-place + .ws-skeleton-place { margin-top: 12px; } .ws-skeleton-place:nth-child(n+1):before {animation-delay: calc(var(--delay-offset) + var(--delay) * 1);} .ws-skeleton-place:nth-child(n+2):before {animation-delay: calc(var(--delay-offset) + var(--delay) * 2);} .ws-skeleton-place:nth-child(n+3):before {animation-delay: calc(var(--delay-offset) + var(--delay) * 3);} .ws-skeleton-place:nth-child(n+4):before {animation-delay: calc(var(--delay-offset) + var(--delay) * 4);} .ws-skeleton-place:nth-child(n+5):before {animation-delay: calc(var(--delay-offset) + var(--delay) * 5);} .ws-skeleton-place:nth-child(n+6):before {animation-delay: calc(var(--delay-offset) + var(--delay) * 6);} .ws-skeleton-place-1:before {animation-delay: calc(var(--delay-offset) + var(--delay) * 1) !important;} .ws-skeleton-place-2:before {animation-delay: calc(var(--delay-offset) + var(--delay) * 2) !important;} .ws-skeleton-place-3:before {animation-delay: calc(var(--delay-offset) + var(--delay) * 3) !important;} .ws-skeleton-place-4:before {animation-delay: calc(var(--delay-offset) + var(--delay) * 4) !important;} .ws-skeleton-place-5:before {animation-delay: calc(var(--delay-offset) + var(--delay) * 5) !important;} .ws-skeleton-place-6:before {animation-delay: calc(var(--delay-offset) + var(--delay) * 6) !important;} .ws-skeleton-error { .ws-skeleton-place-1:before, .ws-skeleton-place-2:before, .ws-skeleton-place-3:before, .ws-skeleton-place-4:before, .ws-skeleton-place-5:before, .ws-skeleton-place-6:before, .ws-skeleton-container i:before, .ws-skeleton-place:before { animation: none !important; opacity: 0.05; background: var(--base-line-alert); } } .listing__card__contentScrollable { overscroll-behavior: auto; } .tag.tagDel ws-icon, ws-icon.tag.tagDel { --icon-size: 14px; } .state_trial_start, .state_trial_end, .state_demo_request, .account_news { position: relative; display: flex; flex-direction: column; ws-btn[right-icon="close"] { position: absolute; right: 8px; top: 8px; } .jumbo { min-height: 200px; display: flex; align-items: center; justify-content: center; background: linear-gradient(90deg, var(--colors-violet-600) 0%, var(--colors-graphite-200) 100%); border-bottom: 1px solid var(--base-line-tertiary); img { width: 480px; height: auto; } } .information { .welcome_title { padding: 32px 80px 24px; display: flex; flex-direction: column; text-align: center; gap: 8px; .h1 { font: var(--font-ui-32-title-large-med); color: var(--base-txt-accent); } .h2 { font: var(--font-ui-14-regular-reg); color: var(--base-txt-primary); } } .nest { padding: 8px 24px 24px; display: flex; flex-direction: column; gap: 40px; text-align: center; .egg { padding: 4px; } .text { font: var(--font-ui-12-mini-reg); color: var(--base-txt-secondary); a { color: var(--base-txt-secondary); text-decoration: underline; } } } } } .state_demo_request { .jumbo { min-height: 332px; background: linear-gradient(180deg, var(--colors-purple-alpha-600-a15) 0%, var(--colors-purple-alpha-800-a40) 100%); .t1, .t2 { background: var(--base-hlt-g-invert); color: var(--white-accent); --icon-color: var(--white-accent); border-radius: 8px; font: var(--font-ui-12-mini-med); padding: 4px 8px; display: flex; gap: 4px; position: absolute; } .t1 { top: 185px; left: 44px; } .t2 { top: 256px; right: 38px; } } .nest { .egg { display: flex; justify-content: center; gap: 14px; } } } .state_trial_end { .jumbo { min-height: 240px; background: linear-gradient(90deg, var(--colorize-lbl-beige-bg) 0%, var(--colors-amber-desat-300-ultra) 100%); border-bottom: none; img { width: 246px; height: auto; } } .nest { .egg { display: flex; justify-content: center; gap: 14px; } } } .account_news { .jumbo { height: 280px; background: var(--base-cont-low); overflow: hidden; img { width: 100%; height: 280px; } } .information { display: flex; flex-direction: row; padding: 32px; gap: 20px; .welcome_title { padding: 0; max-width: 340px; text-align: left; .h1 { font-family: 'Inter', Arial, sans-serif; color: var(--base-txt-accent); font-size: 28px; font-weight: 510; line-height: 36px; letter-spacing: -0.336px; text-wrap: balance; } } .welcome_text { flex-grow: 1; font: var(--font-ui-15-large-reg); color: var(--base-txt-primary); h2 { font: var(--font-ui-22-title-1-med); margin: 0 0 16px 0; } h3 { font: var(--font-ui-18-title-2-med); margin: 0 0 16px 0; } h4 { font: var(--font-ui-16-title-3-bold); margin: 0 0 16px 0; } p { font: var(--font-ui-15-large-reg); margin: 0 0 16px 0; } h6[rel="h6_1"] { font: var(--font-ui-15-large-reg); margin: 8px 0; color: var(--base-txt-tertiary); } h6[rel="h6_2"] { font: var(--font-ui-15-large-reg); padding: 2px 8px; margin: 8px 0; border-left: 1px solid var(--base-line-accent); } pre { font-family: monospace; font-size: 13px; font-style: normal; font-weight: 400; line-height: 20px; letter-spacing: -0.208px; padding: 6px 0 6px 8px; margin: 4px 0 8px 0; border-radius: 8px; border-left: 1px solid var(--base-hlt-g-pressed); background: var(--base-cont-trans-low); &:before { content: ''; } } } } .news_buttons { display: flex; padding: 16px 0 0 0; width: 100%; box-sizing: border-box; align-items: center; gap: 16px; } } .sidebar_trial { padding: 12px; border-top: 1px solid var(--base-line-tertiary); background: var(--base-cont-low); z-index: 1010; .trial_block { padding: 12px; box-shadow: var(--shadow-cont-major-outline); border-radius: 12px; background: var(--base-cont-top-elevated); .trial_info { display: flex; gap: 8px; .space { width: 20px; flex-shrink: 0; .pie_svg.pie_trial circle.draw { stroke: var(--colors-violet-800); } } .trial_text { color: var(--base-txt-tertiary); font: var(--font-ui-13-small-reg); display: flex; flex-direction: column; flex-grow: 1; b { color: var(--base-txt-primary); font: var(--font-ui-14-regular-med); } } ws-icon { align-self: center; cursor: pointer; svg use:last-child { display: none; } } } .trial_button { padding-top: 0; height: 0; overflow: hidden; pointer-events: none; transition: all 0.3s; ws-btn { width: 100%; } } &.w_button { .trial_info ws-icon { svg use:first-child { display: none; } svg use:last-child { display: block; } } .trial_button { opacity: 1; pointer-events: auto; padding-top: 12px; height: 32px; } } &.wo_chevron { .trial_info ws-icon { display: none; } .trial_info .space .pie_svg.pie_trial circle.draw { stroke: var(--colors-red-700); } } } } body.withTaskPanel { .sidebar_trial { margin-bottom: 40px; } } /* ===== Banner wrapper ===== */ .top_banner_wrapper { display: flex; width: 100%; z-index: 1020; } .top_banner_wrapper { transition: margin-left 300ms cubic-bezier(.4,0,.2,1), width 300ms cubic-bezier(.4,0,.2,1); will-change: margin-left, width; } body.withSidebarOver .top_banner_wrapper { margin-left: 260px; width: calc(100% - 260px); } /* ===== BASE BANNER ===== */ .banner { padding: 8px 16px; display: flex; width: 100%; position: relative; gap: 12px; align-items: center; background: var(--base-cont-top); /* alert box */ .wierd_alert { border-radius: 4px; height: 100%; box-sizing: border-box; opacity: 1; display: flex; align-items: center; justify-content: center; --icon-color: var(--white-accent); --icon-size: 16px; z-index: 10; } .wierd_alert.ua { background: #FFD700 !important; position: relative; border: none !important; &:before { content: ''; display: block; position: absolute; top: 0; bottom: 50%; left: 0; right: 0; border-radius: 4px 4px 0 0; background: #0057B7; } } /* content wrapper */ .all_but_alert { display: flex; gap: 12px; align-items: center; width: 100%; span, .buttons { z-index: 10; } span.text { font: var(--font-ui-13-small-reg); a { color: var(--colors-brown-920); text-decoration: underline; } } span.b { font: var(--font-ui-13-small-bold); } .flex_gap { flex-grow: 1; } .buttons { display: flex; gap: 10px; } } &:before, &:after { content: ''; display: block; position: absolute; top: 0; left: 0; bottom: 0; z-index: 1; } &:after { right: 50%; -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0)); mask-image: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0)); -webkit-mask-composite: destination-in; mask-composite: intersect; opacity: 0.3; mask-repeat: no-repeat; mask-size: 100% 100%; } } /* ===== FREEZE BANNER ===== */ .banner.acc_freeze { box-shadow: 0 -8px 24px -8px var(--base-hlt-g-active) inset; background: var(--base-cont-low); .wierd_alert { border: 1px solid var(--colors-alpha-dark-15); background: var(--colors-graphite-700); } .all_but_alert span.text { color: var(--base-txt-secondary); a { :focus, :focus-visible { outline: none; } color: var(--base-txt-accent); font: var(--font-ui-13-small-semi); text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: none; text-decoration-thickness: 0.1em; text-underline-offset: 0.1em; text-underline-position: from-font; } } .all_but_alert span.b { color: var(--base-txt-accent); } &:before { background: linear-gradient(90deg, var(--colors-graphite-500) 0%, var(--colors-graphite-300) 100%); border-bottom: 1px solid var(--base-line-tertiary); opacity: 0.4; } &:after { background-image: repeating-linear-gradient( -45deg, var(--colors-graphite-500), var(--colors-graphite-500) 8px, transparent 8px, transparent 16px ); } } .banner.acc_freeze.user { .two_rows { .text { min-width: 0; max-width: 100%; } .text.b { margin-right: 12px; } flex-wrap: wrap; } } .top_banner_wrapper.nohide .banner .all_but_alert .two_rows { overflow: hidden; .collapse { svg use:nth-of-type(1) { display: none; } } } .top_banner_wrapper.nohide.collapsed .banner .all_but_alert .two_rows { max-height: 1.5em; .collapse { svg use:nth-of-type(1) { display: initial; } svg use:nth-of-type(2) { display: none; } } } /* ===== PAY REMINDER ===== */ .banner.pay_reminder { box-shadow: 0 -8px 24px -8px var(--base-hlt-g-active) inset; background: var(--base-cont-low); .wierd_alert { border: 1px solid var(--colors-alpha-dark-15); background: var(--colors-violet-750); } .all_but_alert .text + ws-btn { z-index: 10; } &:before { background: linear-gradient(90deg, var(--colors-violet-500) 0%, var(--colors-violet-600) 100%); border-bottom: 1px solid var(--base-line-tertiary); right: 0; opacity: 0.4; } &:after { background-image: repeating-linear-gradient( -45deg, var(--colors-violet-500), var(--colors-violet-500) 8px, transparent 8px, transparent 16px ); } } /* ===== PAY REMINDER LAST DAY ===== */ .banner.pay_reminder_last { box-shadow: 0 -8px 24px -8px var(--base-hlt-g-active) inset; background: var(--base-cont-low); .wierd_alert { border: 1px solid var(--colors-alpha-dark-15); background: var(--colors-red-750); } .all_but_alert .text + ws-btn { z-index: 10; } &:before { background: linear-gradient(90deg, var(--colors-red-600) 0%, var(--colors-red-400) 100%); border-bottom: 1px solid var(--base-line-tertiary); right: 0; opacity: 0.4; } &:after { background-image: repeating-linear-gradient( -45deg, var(--colors-red-600), var(--colors-red-600) 8px, transparent 8px, transparent 16px ); } } /* ===== TRIAL BANNER ===== */ .banner.trial { padding: 8px 16px; display: flex; width: 100%; position: relative; background: var(--base-cont-top); gap: 12px; align-items: center; } .banner.trial .wierd_alert { border-radius: 4px; border: 1px solid var(--colors-alpha-dark-10); background: var(--colorize-orange); height: 100%; box-sizing: border-box; opacity: 1; display: flex; align-items: center; justify-content: center; --icon-color: var(--white-accent); --icon-size: 16px; z-index: 10; } .banner .all_but_alert { display: flex; gap: 12px; align-items: center; width: 100%; } .banner .all_but_alert span, .banner .all_but_alert .buttons { z-index: 10; } .banner.trial .all_but_alert span.text { font: var(--font-ui-13-small-reg); color: var(--colors-brown-920); } .banner.trial .all_but_alert span.text a { color: var(--colors-brown-920); text-decoration: underline; } .banner.trial .all_but_alert span.b { font: var(--font-ui-13-small-bold); } .banner .all_but_alert .flex_gap { flex-grow: 1; } .banner .all_but_alert .buttons { display: flex; gap: 10px; } .banner.trial::before { content: ''; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: linear-gradient(90deg, var(--colors-amber-500) 0%, var(--colors-amber-100) 100%); border-bottom: 1px solid var(--base-line-tertiary); opacity: 0.4; z-index: 1; } .banner.trial::after { content: ''; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 50%; z-index: 1; background-image: repeating-linear-gradient( -45deg, var(--colors-amber-500), var(--colors-amber-500) 8px, transparent 8px, transparent 16px ); -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0)); mask-image: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0)); -webkit-mask-composite: destination-in; mask-composite: intersect; opacity: 0.3; mask-repeat: no-repeat; mask-size: 100% 100%; } .banner.trial.trial_user_end .wierd_alert { background: var(--base-hlt-invert); } .banner.trial.trial_user_end::before { background: var(--base-hlt-selected); opacity: 1; } .banner.trial.trial_user_end::after { background-image: repeating-linear-gradient( -45deg, var(--colors-alpha-light-60), var(--colors-alpha-light-60) 8px, transparent 8px, transparent 16px ); opacity: 1; } .banner.trial.trial_user_end span.text { color: var(--base-txt-primary); } .banner.trial.trial_user_end span.b { color: var(--base-txt-accent); } .hide-big { display: none; } @media screen and (max-width: 1024px) { .banner::after { right: 20%; } .banner .all_but_alert { flex-direction: column; gap: 0; align-items: flex-start; } .banner .all_but_alert .flex_gap { height: 12px; } .banner .all_but_alert .buttons { flex-flow: row-reverse; } .hide-small { display: none; } .hide-big { display: inline-block; } .banner .text { width: 100%; justify-content: space-between; align-items: flex-start; } } @media screen and (max-width: 480px) { .top_banner_wrapper { width: calc(100% - 24px); border-radius: 12px; overflow: hidden; position: absolute; margin: 12px; bottom: calc(var(--task-panel-height) + var(--primary-menu-height)); z-index: 1020; box-sizing: border-box; } .banner { padding: 12px 12px 12px 12px; } .banner .buttons { width: 100%; justify-content: space-between; transition: opacity 240ms ease; } .banner.pay_reminder .buttons, .banner.pay_reminder_last .buttons { justify-content: flex-end; } .top_banner_wrapper.nohide { width: 100%; margin: 0; border-radius: 0; bottom: calc(var(--task-panel-height) + var(--primary-menu-height)); } .top_banner_wrapper.nohide.collapsed { z-index: 999; .flex_gap { display: none; } .buttons { display: none; } } } /* ===== COLOR MODE OVERRIDES ===== */ body[data-color="color"] .banner.trial::before { background: linear-gradient(270deg, var(--colors-amber-300) 0%, var(--colors-amber-400) 100%); opacity: 1; } body[data-color="color"] .banner.trial::after { opacity: 0.5; } body[data-color="color"] .banner.trial.trial_user_end::before { background: linear-gradient(0deg, var(--colors-interblue-desat-940) 0%, var(--colors-interblue-desat-940) 100%); opacity: 1; } body[data-color="color"] .banner.trial.trial_user_end::after { opacity: 0.075; } body[data-color="color"] .banner.trial .all_but_alert .buttons .btn-ghost { color: var(--colors-graphite-trans-960); } body[data-color="color"] .banner.trial .all_but_alert .buttons .btn-solid { color: var(--colors-alpha-light-95); background: var(--colors-graphite-trans-960); } body[data-color="color"] .banner.trial .all_but_alert .buttons .btn-solid:hover { background: var(--colors-graphite-trans-990); } body[data-color="color"] .banner.pay_reminder { box-shadow: 0 -8px 24px -8px var(--colors-violet-trans-300) inset; .text { color: var(--colors-violet-200); } &:after { opacity: 0.1;} &:before { background: linear-gradient(90deg, var(--colors-violet-920) 0%, var(--colors-violet-900) 100%); } } body[data-color="color"] .banner.pay_reminder_last { box-shadow: 0 -8px 24px -8px var(--colors-red-920) inset; .text { color: var(--base-txt-max); } &:after { opacity: 0.1;} &:before { background: linear-gradient(90deg, var(--colors-red-850) 0%, var(--colors-red-750) 100%); } } body[data-color="color"] .banner.acc_freeze { .text { color: var(--base-txt-max); } &:after { opacity: 0.1;} &:before { background: linear-gradient(90deg, var(--colors-graphite-600) 0%, var(--colors-graphite-400) 100%); } }.taskView__subtasks__content .subtaskList__item__children { margin: 0 0 0 18px; } .taskView__subtasks .subtaskList__item__children-collapsed { display: none } .taskView__subtasks-empty .subtaskList { display: none } .subtaskList__item { display: flex; color: var(--base-txt-accent); background: var(--base-cont-top); border-bottom: 1px solid var(--base-line-ghost); cursor: pointer; font: var(--font-ui-14-regular-reg); -webkit-user-select: none; user-select: none; position: relative; height: 36px; } .subtaskList { border-top: 1px solid var(--base-line-ghost); } .modal .subtaskList { padding:20px; border-top:none } .subtaskList__item .subtaskList__dropPlace { margin-right: -55px; } .subtaskList__item .space { width: 32px; display: flex; justify-content: center; } .subtaskList__item > .in { padding:0 8px; position: relative; } .subtaskList__item > .in > .isfav { --icon-color: var(--base-btn-notice-minor); --icon-size: 16px; margin-right: 2px; } .subtaskList__item > .in > .vis_hidden { --icon-color: var(--base-txt-alert-major); --icon-size: 16px; margin-right: 2px; } .subtaskList-withDrag .subtaskList__item.subtaskList__item-draggable { cursor: grab; } .subtaskList__item span.terms_label_remain { opacity: 0 } .subtaskList__item:hover span.terms_label_remain { opacity: 1 } .subtaskList__item__children .subtaskList__item { /* background: var(--base-cont-mid); */ } .subtaskList__item__children .subtaskList__item .tags span.tag { box-shadow: 0 0 0 2px var(--base-cont-mid) } .subtaskList__item span.r {} .subtaskList__item .av_pre {width: 32px;} .subtaskList__item .av_pre .av_sm { } .subtaskList__item:hover .av_pre .av_sm { opacity: 1 } .subtaskList__item.selected, .subtaskList__item__children .subtaskList__item.selected { background: var(--base-hlt-easy) } .subtaskList__item .seenh { visibility: hidden } .subtaskList__item:hover .seenh { visibility: visible } body.mobile .subtaskList__item { -webkit-user-select: none; -webkit-touch-callout: none; } .subtaskList__item .priorb { } .subtaskList__item a.drop { margin: 22px -26px 0 5px } .subtaskList__item-done a.drop { margin: 0 2px 0 5px } .subtaskList__item-bookmark { /* box-shadow: 2px 0 var(--base-btn-notice-minor) inset; */ } .subtaskList__item:hover { background: var(--base-hlt-g-easy); } .subtaskList__item-done, .subtaskList__item__children .subtaskList__item-done { /* background: var(--base-cont-low); */ color: var(--base-txt-secondary) } .subtaskList__item-done .tags span.tag, .subtaskList__item__children .subtaskList__item-done .tags span.tag { box-shadow: 0 0 0 2px var(--base-cont-low) } .subtaskList__item-active { background: var(--base-hlt-easy) !important; background: var(--base-cont-top) linear-gradient(to right, var(--base-hlt-hover) 0%, var(--base-hlt-selected) 100%) !important; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= 'var(--base-hlt-hover)', endColorstr='var(--base-hlt-selected)', GradientType=1); } .subtaskList__item-active span.drag { border-color: var(--base-hlt-hover)!important } .subtaskList__item.subtaskList__item-updated, .subtaskList__item__children .subtaskList__item.subtaskList__item-updated { background: var(--base-hlt-b-easy); } .subtaskList__item-done:hover { background: var(--base-cont-mid); color: var(--base-txt-secondary) } .subtaskList__item h2 { margin: 0; font: 14px/20px var(--font-base); } .subtaskList__item h2 .tags { margin: 0 0 0 2px; } .subtaskList__item h2 task-wait { vertical-align: top } .subtaskList__item h2 .tags:empty { display: none } .subtaskList__item h2 .tags span.tag { overflow: hidden; vertical-align: top } .subtaskList__item a.t { color: var(--base-txt-accent); } .subtaskList__item a.t:hover {} .subtaskList__item-done a.t {color: var(--base-txt-tertiary);text-decoration-line: line-through; text-decoration-color: var(--base-line-primary); text-decoration-thickness: var(--screen-px);} .subtaskList__item.subtaskList__item-done a.ico.ico_time_sm {display: none;} .subtaskList__item .bar { float: right; height: 15px; padding: 0; margin: 0 0 -4px 20px; font: 11px/14px var(--font-base); width: 85px; overflow: hidden } .subtaskList__item .bar1 { margin-right: 20px; } .subtaskList__item .bar2 { margin-right: -20px; } .subtaskList__item .b_br { float: left; width: 30px; text-align: right; height: 15px; color: var(--base-txt-secondary) } .subtaskList__item .b_fl { display: none; margin: 0 0 0 0; font: 11px/14px var(--font-base); color: var(--base-txt-secondary); text-align: center; white-space: nowrap } .subtaskList__item .progress, .subtaskList__item .progress_na { margin: 4px 0 0 35px; width: 40px; height: 7px } .subtaskList__item:hover .progress, .subtaskList__item:hover .progress_na, .subtaskList__item:hover .b_br { display: none } .subtaskList__item:hover .b_fl { display: block } .subtaskList__item .progress_na img { width: 10px } .subtaskList__item a.ico, .subtaskList__item span.ico, .subtaskList__item span.ico_done_place { margin: 0; } .subtaskList__item .in .ico.ico_priv { margin-left: 4px; } .subtaskList__item .status b { color: var(--base-txt-secondary) } .subtaskList__item .priorb { font: 11px/20px var(--font-base); width: 20px; height: 20px; margin: 0; } /*--------------------------------------------------------------------------------------------------------------------*/ .subtaskList__dropPlace { height: 2px; margin: -1px 40px -1px 64px; position: relative; z-index: 1; transition: .3s ease; } .subtaskList__dropPlace-hover { background: var(--base-hlt-b-invert-major); } .subtaskList__dropPlace.subtaskList__dropPlace-hover { margin-left: 0; margin-right: 0; } /*--------------------------------------------------------------------------------------------------------------------*/ .taskView__subtasks-empty { display: none } .taskView__subtasks .task_arrow { float: left; width: 1px; height: 1px; border: 10px solid var(--base-cont-top); margin: -9px 0 0 -43px; border-color: transparent var(--base-cont-top) transparent transparent; border-width: 19px 12px } .taskView__subtasks .subtaskList__item__children .task_arrow { border-color: transparent var(--base-cont-mid) transparent transparent; } .taskView__subtasks .subtaskList__item-done .task_arrow { border-color: transparent var(--base-cont-top) transparent transparent } .taskView__subtasks .subtaskList__item-done:hover .task_arrow, .taskView__subtasks .subtaskList__item-done.subtaskList__item-active .task_arrow { border-color: transparent var(--base-cont-mid) transparent transparent } .taskView__subtasks .subtaskList__item-active .task_arrow { border-color: transparent var(--base-hlt-notr-hover) transparent transparent!important; } .subtaskList__item-active h2 { white-space: nowrap; overflow: hidden; color: var(--base-txt-accent) } .taskView__subtasks a.dropmaster { margin: 2px -2px 0 10px; background: url(/assets/img/color/iconset.svg) no-repeat -2px -562px } .taskView__subtasks a.dropmaster:hover { background: url(/assets/img/color/iconset.svg) no-repeat -22px -562px !important } .subtaskList__item.drag_clone { background: var(--base-hlt-notr-hover); opacity: 0.9 !important; border: 1px solid var(--base-cont-top); border-radius: 8px; display:none; } .subtaskList__item.drag_clone .tags span.tag { box-shadow: 0 0 0 2px var(--base-hlt-easy) } .subtaskList__item.drag_clone { z-index: 1030; } .subtaskList__item-fake { height:36px; border-radius:4px; animation: gradient_ani 4s ease infinite; background: var(--base-hlt-b-focus); background: var(--base-cont-mid) linear-gradient(90deg, var(--base-cont-mid) 0%, var(--base-hlt-g-hover) 10%, var(--base-cont-mid) 10%); background-size: 200% 200%; } .subtaskList__item-fake.subtaskList__item-level1 { margin:1px 0 0 20px; } .subtaskList__moreItems { cursor: pointer; padding: 0; height: 36px; background: var(--base-hlt-easy); text-align: center; margin: -1px 0 0 0; position: relative; border-radius: 0 0 12px 12px; } .subtaskList__moreItems:hover { background: var(--base-hlt-hover); } .subtaskList__moreItems span.date { display: inline-block; color: var(--base-txt-secondary); font: 11px/20px var(--font-base); padding: 0 12px; margin: 8px auto 8px 0; white-space: nowrap; border-radius: 10px; background: var(--base-cont-top-elevated); position: relative; box-shadow: var(--shadow-cont-minor-lineonly-outside); } .subtaskList__item .inputCheckbox { width: 24px; height: 24px; min-height: 24px; padding: 0; opacity: 0; } .subtaskList__item .inputCheckbox span { width: 16px; height: 16px; padding: 4px; } .subtaskList__item .inputCheckbox ws-icon { width: 16px; height: 16px; --icon-size: 16px; } .subtaskList__item:hover .inputCheckbox, .subtaskList__item.act .inputCheckbox, .taskView-withSubtaskMass .subtaskList__item .inputCheckbox { opacity: 1 } .subtaskList__item .child_num { color:var(--base-txt-secondary); display: none; align-content: center; line-height: 20px; gap: 4px; } .subtaskList__item .child_num font { font: var(--font-ui-11-micro-reg); } .subtaskList__item .child_num-visible { display: inline-flex; align-items: center; } .subtaskList__item .child_num:hover { color:var(--base-txt-link-major) } .subtaskList__item .child_num:hover svg { fill:var(--base-txt-link-major) } .subtaskList__item .inputCheckbox span { background: none !important; } .subtaskList__item task-assignee { } .subtaskList__item task-assignee ws-icon { width: 24px; height: 24px; box-sizing:border-box; border-radius: 12px; } .subtaskList__item task-assignee ws-icon svg { width:14px; height:14px; } .subtaskList__item task-term > ws-icon.ico_regular { width: 20px; height: 20px; --icon-size: 16px; --icon-color: var(--base-txt-act-major); margin-right: 4px; } .subtaskList__item task-term > ws-icon.ico_regular svg { width: 16px; height: 16px; } .subtaskList__item task-term > ws-icon.border_dashed { width: 24px; height: 24px; box-sizing: border-box; border-radius: 12px; } .subtaskList__item task-term ws-icon svg { width:14px; height:14px; } @media screen and (min-width: 481px) { .subtaskList .pre_act.subtaskList__item { background: var(--base-hlt-notr-easy); } } @media (max-width: 480px) { .subtaskList .subtaskList__item .inputCheckbox, .subtaskList .subtaskList__item ws-icon[name=drag_indicator] { display: none; } } .subtaskList__item-dragThis { background: var(--base-hlt-b-easy); } .subtaskList__item task-term { padding: 0 4px 0 0; } .subtaskList__item task-term > * { margin: 0; padding: 0 4px; } .subtaskList__item task-unseen { width: 24px; } .subtaskList__item task-unseen > * { display: flex; margin: 0; } /*.subtaskList__item task-unseen ws-icon {*/ /* --icon-color: var(--base-txt-muted);*/ /*}*/ /*.subtaskList__item task-unseen .seen ws-icon:first-child svg {*/ /* fill: var(--icon-color);*/ /*}*/ /*.subtaskList__item task-unseen a:hover ws-icon:first-child {*/ /* --icon-color: var(--base-txt-secondary);*/ /*}*/ /*.subtaskList__item task-unseen a:hover ws-icon:last-child {*/ /* --icon-color: var(--base-txt-btn-a);*/ /*}*/ .subtaskList__item task-unseen ws-icon { --icon-size:16px } .subtaskList__item ws-icon[name="drag_indicator"] { float: left; margin: 0 0 0 -20px; opacity: 0; transition: .2s ease; } .subtaskList-withDrag .subtaskList__item-draggable:hover ws-icon[name="drag_indicator"] { opacity: 1; } .subtaskList-withDrag .subtaskList__item.subtaskList__item-dragThis ws-icon[name="drag_indicator"] { opacity: 1; --icon-color: var(--base-hlt-b-invert-major); } body.body-dragInProgress .subtaskList { pointer-events: none } .subtaskForm { display: none } .subtaskForm-active { display: block } .subtaskForm input.button { position: absolute; top: 8px; right: 2px; } .subtaskForm input.input { background: transparent; font: var(--font-ui-14-regular-reg); margin: 0; padding: 0 10px 0 0; flex-grow: 1; border: none; border-radius: 0; box-sizing: border-box; } .subtaskForm .open { width: 24px; --icon-size: 16px; --icon-color: var(--base-txt-secondary); } .subtaskForm .open:hover { --icon-color: var(--base-txt-btn-a); } .subtaskForm .subtaskList__item > .in { padding-right: 2px; } .subtaskForm .inputCheckbox { opacity: 1; } .subtaskForm .inputCheckbox ws-icon { width: 24px; height: 24px; --icon-size: 20px; --icon-color: var(--base-txt-btn-a); } .subtaskList__item task-assignee:has(ws-icon[data-user="1"]), .subtaskList__item task-term:has(.terms_label_empty), .subtaskList__item .priorb.prior1 { opacity: 0; } .subtaskList__item:hover task-assignee:has(ws-icon[data-user="1"]), .subtaskList__item:hover task-term:has(.terms_label_empty), .subtaskList__item:hover .priorb.prior1 { opacity: 1; } .subtaskForm .subtaskList__item task-assignee:has(ws-icon[data-user="1"]), .subtaskForm .subtaskList__item task-term:has(.terms_label_empty), .subtaskForm .subtaskList__item .priorb.prior1 { opacity: 1; } .subtaskList__item ws-icon.border_dashed { --icon-color: var(--base-txt-secondary); border: 1.5px dotted var(--base-txt-tertiary); } .subtaskList__item .inputCheckbox span { display: flex; align-items: center; } .subtaskList__item span[data-container=progress] .btn.btn-plain ws-icon { width: 16px; height: 16px; } .subtaskList__item span[data-container=progress] .time_pl .btn.btn-plain ws-icon svg { fill: var(--base-txt-new-minor); } .subtaskList__item span[data-container=progress] .time_over_sm .btn.btn-plain svg { fill: var(--base-txt-alert-minor); } .subtaskList__item span[data-container=progress]:hover .time_pl .btn.btn-plain ws-icon svg { fill: var(--base-txt-new-major); } .subtaskList__item span[data-container=progress]:hover .time_over_sm .btn.btn-plain svg { fill: var(--base-txt-alert-major); } .subtaskList__item:not(.subtaskList__item-done):not(:hover) span[data-container=progress]:has(.time_sm,.time_pl):not(:focus-within) { display: none; } .subtaskList__item.subtaskList__item-done:not(:hover) span[data-container=progress]:has(.time_sm):not(:focus-within) { display: none; } .subtaskList__item task-wait { margin: 0 4px 0 2px !important; } .taskView-withSubtaskMass .subtaskList-withDrag .subtaskList__item-draggable ws-icon[name="drag_indicator"], .taskView-withSubtaskMass .subtaskList__item span[data-container=progress], .taskView-withSubtaskMass .subtaskList__item task-assignee:has(ws-icon[data-user="1"]), .taskView-withSubtaskMass .subtaskList__item task-term:has(.terms_label_empty), .taskView-withSubtaskMass .subtaskList__item .priorb.prior1 { display: none !important; } .taskView-withSubtaskMass .subtaskList__item task-unseen { opacity: 0; } .taskView-withSubtaskMass .subtaskList__item a { pointer-events: none; } .taskView-withSubtaskMass .subtaskList__item { cursor: pointer !important; } .taskView-withSubtaskMass .subtaskList__item:hover { background: var(--base-hlt-notr-easy) !important; } .taskView-withSubtaskMass .subtaskList__item task-wait { pointer-events: none; } .subtaskList__item:hover task-assignee .ico_place { display: none; } .subtaskList__item:hover task-assignee .ico_place:not(:empty) + .av_sm {display: inline-flex;align-items: center;justify-content: center;} .modal__content .tagsAdmListing { padding: 0 16px 16px 16px; } .modal__content .tagsAdmListing__group, .modal__content .tagsAdmListing__group__content { margin: unset; } .tagsAdmListing__group .labels_empty { color: var(--base-txt-tertiary); float: left; font: 12px/30px var(--font-base); opacity: 0; margin: 0 0 0 5px; display: none } .tagsAdmListing__group-empty .labels_empty { display: block } .tagsAdmListing__group:hover .labels_empty { opacity: 1; } .tagsAdmListing__group.labels_empty a { color: inherit; border-bottom: 1px dashed } .tagsAdmListing__group .labels_empty a:hover { color: var(--base-txt-link-minor) } .tagsAdmListing__group .label_add, .tagsAdmListing__item { height: 32px; padding: 0 4px; border-radius: 10px; background: var(--base-hlt-g-easy); color: var(--colorize-lbl-txt-primary); } @media screen and (min-width: 481px) { .tagsAdmListing__item-backlog { padding-left: 24px; } } .tagsAdmListing__group .label_add { margin: 0 1% 5px 0; } .tagsAdmListing__item-label { background: var(--tag-bg) !important; color: var(--colorize-lbl-txt-primary); margin: 0 1% 5px 0; } .tagsAdmListing__item-stage:hover { background: none } .tagsAdmListing__item:hover { box-shadow: 0 0 0 1px var(--colorize-lbl-txt-ghost) inset; color: var(--colorize-lbl-txt-accent); } .tagsAdmListing__item-stage:hover, .tagsAdmListing__item-stage:has(.menu_open) { box-shadow: var(--shadow-brd-enable); } .tagsAdmListing__item-stage.drag_clone { background: var(--base-hlt-b-notr-hover); box-shadow: var(--shadow-cont-minor-outline) !important; } .tagsAdmListing__item-label.drag_clone { background: var(--base-cont-top) linear-gradient(var(--tag-bg), var(--tag-bg)); box-shadow: var(--shadow-cont-minor-outline) !important; } .withModal .tagsAdmListing__item-stage.drag_clone, .withModal .tagsAdmListing__item-label.drag_clone { z-index: 1050; } @media (min-width: 640px) { .tagsAdmListing__item { margin: 0 4px 4px 0; } .tagsAdmListing__group-status .tagsAdmListing__item { margin-right: 0; } } .tagsAdmListing .label_add { opacity: 0; width: auto !important; padding: 4px 10px 4px 0; margin: 0 !important; border-radius: 24px; height: 20px; } .body-dragInProgress .tagsAdmListing .setupBlock__content ws-btn { visibility: hidden; } .tagsAdmListing__group-status .label_add { border-radius: 6px; } .tagsAdmListing__group:hover .label_add, .tagsAdmListing .tagsAdmListing__group-empty .label_add, body.mobile .tagsAdmListing .label_add { opacity: 1; } .body-dragInProgress .tagsAdmListing__group .label_add, .body-dragInProgress .tagsAdmListing__group .labels_empty { opacity: 0; } .tagsAdmListing .label_add .ico_l { margin: 0 4px 0 6px; opacity: 0.7 } .tagsAdmListing .label_add:hover { background: var(--base-hlt-hover); } .tagsAdmListing .label_add:hover .ico_l { opacity: 1 } .tagsAdmListing__item-label { border-radius: 4px 16px 16px 4px; float: left; } .tagsAdmListing__item .in { overflow: hidden; font: var(--font-ui-13-small-med); white-space: nowrap; text-overflow: ellipsis; padding: 0 4px; } .tagsAdmListing__item-stage .in { font: var(--font-ui-14-regular-med); padding: 0 8px; } .tagsAdmListing__item span.dot { width: 12px; height: 12px; border-radius: 10px; background: var(--tag-color); margin: 0 4px; flex-shrink: 0; } .tagsAdmListing__item .space { width: 20px; } .tagsAdmListing__item.tagsAdmListing__item-stage .space { transform: translateX(-2px); } @media screen and (min-width: 481px) { .tagsAdmListing__item:not(:hover) .space a, .tagsAdmListing__item:not(:hover) .space:not(.menu_open) ws-btn { opacity: 0; } } .tagsAdmListing__group-status .tagsAdmListing__dropPlace { height: 0; overflow: hidden; } .tagsAdmListing__group-label .tagsAdmListing__dropPlace { width: 32%; max-width: 150px; float: left; margin: 0 1% 0 0; height: 0; overflow: hidden; border-radius: 16px; } @media (min-width: 640px) { .tagsAdmListing__group-label .tagsAdmListing__dropPlace { width:15.8%; margin: 0 0.5% 0 0; } .tagsAdmListing__group-status .tagsAdmListing__group__subset .tagsAdmListing__group__subset__title ws-btn { visibility: hidden; } .tagsAdmListing__group-status .tagsAdmListing__group__subset:hover .tagsAdmListing__group__subset__title ws-btn { visibility: visible; } } .body-dragInProgress .tagsAdmListing .label_add { display: none; } .tagsAdmListing__group-status .tagsAdmListing__dropPlace.tagsAdmListing__dropPlace-hover { height: 2px; margin: -4px 0 2px; background: var(--base-txt-btn-b); border-radius: 10px; } .tagsAdmListing__group-label .tagsAdmListing__dropPlace.tagsAdmListing__dropPlace-hover + .tagsAdmListing__item { position: relative; &:before { content: ''; display: block; position: absolute; opacity: 1; left: -3px; width: 2px; height: 100%; background: var(--base-txt-btn-b); } } .tagsAdmListing__group-label .tagsAdmListing__dropPlace-final.tagsAdmListing__dropPlace-hover { content: ''; display: block; width: 2px; height: 32px; margin-left: -2px; background: var(--base-txt-btn-b); } .tagsAdmListing .tagsAdmListing__item-draggable, .tagsAdmListing .tagsAdmListing__item-draggable a { cursor: move; cursor: grabbing } .tagsAdmListing .tagsAdmListing__item-draggable ws-icon[name="drag_indicator"] { --icon-color: var(--base-txt-tertiary); } .tagsAdmListing .tagsAdmListing__item-draggable:hover ws-icon[name="drag_indicator"] { --icon-color: var(--base-txt-primary); } .tagsAdmListing .tagsAdmListing__item.drag_this { opacity: 0.8; } .tagsAdmListing .tagsAdmListing__item.tagsAdmListing__item-label.drag_this { box-shadow: 0 0 0 1px var(--tag-color) inset, 0 0 0 3px var(--base-cont-top) inset; } .tagsAdmListing .tagsAdmListing__item.tagsAdmListing__item-stage.drag_this { box-shadow: 0 0 0 1px var(--base-hlt-b-invert) inset, 0 0 0 3px var(--base-cont-top) inset; } .tagsAdmListing .tagsAdmListing__item.drag_this * { opacity: 0; } @media screen and (min-width: 481px) { .tagsAdmListing .tagsAdmListing__item-empty:not(:hover) .space:not(.menu_open):after { content: '(0)'; opacity: 0.3; font: var(--font-ui-10-nano-reg); display: block; margin: -20px 0 0 4px; } } .tagsAdmListing .tagsAdmListing__item-empty:hover:before { display: none } .tagsAdmListing__group { position: relative; background: var(--base-cont-top); margin: 0 0 32px; } .tagsAdmListing__group-create {display:none} .tagsAdmListing__group-options {margin-bottom: 12px;} .modal__content .tagsAdmListing__group { background: none; } .tagsAdmListing__content { position: relative } .tagsAdmListing__content form .ico_remove { display: none } .tagsAdmListing__content form .button_orange { margin-left: 10px; } .tagsAdmListing__content form.form_active .ico_remove { display: inline } .tagsAdmListing__content form.form_active .ico_plus { display: none } .tagsAdmListing__group a.inline { border-bottom-width: 0 } .tagsAdmListing__group a.inline:hover { border-bottom: 1px dashed; color: inherit } .tagsAdmListing__group-hidden { background: var(--base-cont-retrans-mid); } .tagsAdmListing__group__content { padding: 0 16px 16px; } .tagsAdmListing__group__content:after { content:''; clear:both; display: block; } .tagsAdmListing__group__subset { padding: 8px; } .tagsAdmListing__group__subset__title { height: 40px; font: var(--font-ui-16-title-3-semi); } .tagsAdmListing__group__subset__content { padding: 0; /* min-height: 36px; */ } .tagsAdmListing__group__subset .line-withDots { margin: 8px 0; } @media (max-width: 960px) { .tagsAdmListing__content { min-width:0; width: auto; } } @media (max-width: 480px) { .tagsAdmListing__content { margin:0 10px; width: auto !important } .tagsAdmListing .tagsAdmListing__item-draggable > ws-icon[name="drag_indicator"] { display: none; } .tagsAdmListing .tagsAdmListing__item-empty .space { display: flex; align-items: center; width: unset; &:before { content: '(0)'; opacity: 0.3; font: var(--font-ui-10-nano-reg); display: block; margin-right: 4px; } } } @media (max-width: 360px) { .tagsAdmListing__content { margin:0 10px; width: auto !important } .tagsAdmListing__item { margin: 0 2% 3px 0; } } .tagsAdmListing__group ws-btn.add { float: left; } .tagsAdmListing__group:not(.tagsAdmListing__group-empty) ws-btn.add span { display: none } @media (max-width: 480px) { .tagsAdmListing { width: 100%; min-width: unset; box-sizing: border-box; } .tagsAdmListing__group-status .tagsAdmListing__item { margin-bottom: 4px; } .tagsAdmListing__group-options { margin: 0px 10px 32px 10px; } .tagsAdmListing__group-create { margin: 0 10px 32px 10px; } } ws-icon.group-hidden:first-child { --icon-color: var(--base-txt-alert-major); } .tagsAdmListing__group-has-done .tagsAdmListing__item-done-backlog { display: none; } .tags span.tag, .tags em { font: var(--font-ui-12-mini-reg); white-space: nowrap; vertical-align: top; border-radius: 12px; } .tags span.tag { box-shadow: 0 0 0 2px var(--base-cont-top); padding: 0 8px 0 4px; display: inline-flex; gap: 0; margin: 0 0 2px; margin-right: -6px; background: var(--tag-bg); color: var(--colorize-lbl-txt-primary); align-items: center; backdrop-filter: blur(2px); height: 20px; } .tags span.tag:last-child { margin-right: 0; } .tags span.tag:before { content: ''; float: left; width: 10px; height: 10px; background: var(--tag-color); border-radius: 5px; margin: 5px 5px 5px 1px; display: none; } .listing__item.listing__item-updated .tags span.tag { box-shadow: none; } #main .task_done .tags span.tag { box-shadow: 0 0 0 2px var(--base-cont-mid); } .item_new .tags span.tag { box-shadow: 0 0 0 2px var(--base-hlt-alt-fresh); } .selected .tags span.tag { box-shadow: -1px 0 0 0 var(--base-cont-top); } .tags span.tag-hidden { } .tags span.tag-hidden:last-child { } .tags span.tag-stage { background: var(--base-hlt-g-hover); color: var(--base-txt-primary); font-weight: 600; font: var(--font-ui-13-small-med); margin: 0; } .tags span.tag-stage ws-icon { margin: 0 0 0 -4px; } .tags span.tag-stage svg { fill: var(--tag-color) } .tags span.tag-hidden ws-icon { width: 14px; height: 14px; margin-right: -4px; } .tags span.tag-hidden ws-icon svg { width: 14px; height: 14px; fill: var(--colorize-lbl-txt-primary); } .tags em { margin: 0 16px 0 0; width: 0; height: 12px } .tags em:first-child, .tags em + em { display: none } #labels .tag-hidden { position: relative; padding-right: 22px; } #labels .tag-hidden:after { content: ''; position: absolute; width: 14px; height: 20px; right: 5px; top: 0; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgOCA4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA4IDg7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iOCIgaGVpZ2h0PSI5Ij4KPHBhdGggc3R5bGU9ImZpbGw6I0ZGRkZGRjsiIGQ9Ik02LDRWMi41QzYsMS43LDUuMywxLDQuNSwxaC0xQzIuNywxLDIsMS43LDIsMi41VjRDMS41LDQsMSw0LjUsMSw1djJjMCwwLjUsMC41LDEsMSwxaDQKCWMwLjUsMCwxLTAuNSwxLTFWNUM3LDQuNSw2LjUsNCw2LDR6IE0zLDIuNUMzLDIuMiwzLjIsMiwzLjUsMmgxQzQuOCwyLDUsMi4yLDUsMi41VjRIM1YyLjV6Ii8+Cjwvc3ZnPgo="); background-position: center 5px; background-repeat: no-repeat; } .tagsline { white-space: nowrap } .tagsline span { margin-bottom: 0 } .dot_tags { display: flex; padding: 0 8px; } .dot_tags span { width: 8px; height: 8px; border-radius: 4px; background: var(--tag-color); box-shadow: 0 0 0 1.5px var(--base-cont-top); margin: 0 -1px 0 0 } .minitags span, .minitags { font: 9px/16px var(--font-base); } .minitags .tag-hidden:after { margin: -3px 0 -3px -3px; transform: scale(0.8) } .minitags:not(:empty):after { margin-right: 6px; } .minitags em { margin-right: 10px; } .minitags span { margin-right: -6px; } .minitags span.tag-hidden { margin-right: -18px; } .minitags span.tag-hidden:last-child { margin-right: -6px } .subtaskList:not(.subtaskList-withLabels) .subtaskList__item .tags:not(:empty):after { display: none } .subtaskList:not(.subtaskList-withLabels) .subtaskList__item .tags .tag-stage { margin-right: 0 } .header .path .tags span.tag { margin-top: -2px; } .project_bl .group .item * { vertical-align: top } .project_bl .group .tags { margin-left: 3px; } .subtaskList:not(.subtaskList-withLabels) .subtaskList__item .tags .tag:not(.tag-stage), .subtaskList:not(.subtaskList-withLabels) .subtaskList__item .tags em { display: none } .tags.kanban task-tags { row-gap: 2px; flex-wrap: wrap; padding-top: 4px; } .tags.kanban task-tags:empty { padding: 0; } .kanban task-tags span.tag { margin: 0 -2px 0 0; font: var(--font-ui-10-nano-med); height: 18px; padding: 0 6px 0 6px; } /*----------------------------------------------------------------------------------------- */ .menu-tagSplit { .tagsSingleSelect__group__title { display: none; } .tagsSingleSelect__group.menu__group-searchable { padding-top: 20px; padding-bottom: 20px; } } .tagsSingleSelect__group__title { font: var(--font-ui-14-regular-semi); text-transform: none; color: var(--base-txt-primary); padding: 0 2px; } .tagsSingleSelect__group__title > .flex_content { padding: 4px 4px 4px 0; gap: 6px; &[onclick] { cursor: pointer; &:hover { color: var(--base-txt-max); } } &.menu_open, &:has(.menu_open) { pointer-events: none; } } .tagsSingleSelect__group__title > ws-icon, .tagsSingleSelect__group__title > ws-btn ws-icon, .tagsSingleSelect__group__title > tags-group-icon ws-icon { margin: 6px; } .tagsSingleSelect__group__title svg { fill: var(--base-txt-tertiary); } .tagsSingleSelect__group__title tags-group-icon ws-icon.tags_group_required svg { fill: var(--base-txt-btn-w); } .menu-inModal .tagsSingleSelect__group__title svg { fill: var(--base-txt-primary); } .tagsSingleSelect__group__title ws-icon[name=lock_sm] { width: 16px; height: 16px; } .tagsSingleSelect__group__title ws-icon[name=lock_sm] svg { fill: var(--base-btn-alert-primary-major); width: 16px; height: 16px; } .tagsSingleSelect__group .tagsSingleSelect__group__title ws-btn[right-icon="plus"] { visibility: hidden; } .menu-tagSplit .tagsSingleSelect__group .tagsSingleSelect__group__title ws-btn[right-icon="plus"] { visibility: visible; } .tagsSingleSelect__group:hover .tagsSingleSelect__group__title ws-btn[right-icon="plus"] { visibility: visible; } .menu__group-picker ~ .tagsSingleSelect, .menu-picker .tagsSingleSelect { .tagsSingleSelect__item:hover, .tagsSingleSelect__item.selected { background: initial !important; border-radius: 20px; } /* TODO flymod вирішити конфлікт між клавою і мишею */ .tagsSingleSelect__item:hover { box-shadow: var(--shadow-brd-enable-hover-outside); } .tagsSingleSelect__item.selected { box-shadow: var(--shadow-brd-04-focus-mini); } } .tagsSingleSelect__group__content ws-btn { display: inline-flex; align-items: center; } .tagsSingleSelect__item span.tag { display: inline-flex; border-radius: 20px; padding: 0 8px 0 4px; background: var(--tag-bg) !important; font: var(--font-ui-12-mini-med); height: 24px; align-content: center; align-items: center; } .tagsSingleSelect__item span.tag:before { content: ''; float: left; width: 10px; height: 10px; border-radius: 5px; margin: 5px 5px 5px 3px; background: var(--tag-color) !important; } .tagsSingleSelect__item span.tag-stage { border-radius: 4px; } .tagsSingleSelect__item span.tag_wo { display: none } .tags-default-once-required { display: inline-flex; gap: 4px; font: var(--font-ui-16-title-3-med); color: var(--base-hlt-invert-major); } .tags-default-once-required font { color: var(--base-txt-tertiary); font: var(--font-ui-12-mini-reg); } .menu-inModal .tagsSingleSelect__group__content { display: flex; flex-wrap: wrap; padding: 4px; gap: 6px; } .menu-inModal .tagsSingleSelect__item { padding: 0; height: 24px } .menu-inModal .tagsSingleSelect__item .in { padding: 0; } .menu-inModal .tagsSingleSelect__item:hover, .menu-inModal .tagsSingleSelect__item.selected { background: none !important; box-shadow: var(--shadow-brd-focus-alt); border-radius: 16px; } .menu-inModal .tagsSingleSelect__item:hover .tag, .menu-inModal .tagsSingleSelect__item.selected span.tag { } @media (max-width: 480px) { .menu__group__wrapper .tagsSingleSelect__group { padding-bottom: 12px; } } .menu__group-head .in:has(tags-group-chips) { padding-right: 8px; }@media (min-width: 481px) { .taskCreate__wrapper { position: fixed; bottom: -100%; right: 20px; z-index: 1020; background: var(--base-cont-mod-input); width: 600px; box-shadow: var(--shadow-tray-major); border-radius: 12px 12px 0 0; transition: all 0.3s ease; } .taskCreate__wrapper.top-layer { z-index: 1021; } .taskCreate__wrapper-active { bottom: 0 } .taskCreate__wrapper-fullscreen { width: calc(100% - 64px); right: 0; height: 100%; border-radius: 0; } body.withTaskPanel .taskCreate__wrapper-fullscreen { height: calc(100% - 40px); } .taskCreate__wrapper-fullscreen .taskCreate__head ws-btn[right-icon="peek-compact"] { display: none; } .taskCreate__wrapper-fullscreen .taskCreate__head ws-btn[right-icon="peek-full"] { display: block; } } @media (max-width: 480px) { .taskCreate__wrapper { right: 0; width: 100%; } body.mobileTaskCreate main { display: none; } body.mobileTaskCreate .taskCreate__wrapper { display: block; height: 100%; position: relative; background: var(--base-cont-mod-top); } body.mobileTaskCreate .taskCreate__wrapper { --layer: 0; --zIndex: 1032; z-index: calc(var(--zIndex) + var(--layer)); padding-bottom: var(--keyboard-height); box-sizing: border-box; } .taskCreate__head > ws-btn[right-icon*="peek"] { display: none; } .editor.taskCreate__content__editor .editor__data { max-height: unset; /* прибираємо обмеження, щоб тулбар не зникав при скролі */ } .taskCreate.taskCreate { height: 100%; min-height: unset; } .taskCreate__content .taskCreate__content__item { flex-shrink: 0; } .taskCreate__content .taskCreate__content__editor-wrapper { max-height: unset; } } .taskCreate { min-height: 600px; } .taskCreate .taskCreate__content { width: 100%; max-width: 740px; margin: 0 auto; } .taskCreate .chip > span:not([class]) { font: var(--font-ui-12-mini-reg); color: var(--base-txt-secondary); } .taskCreate__head { padding: 6px 8px; height: 44px; box-sizing: border-box; } .taskCreate__head ws-btn[right-icon="peek-full"] { display: none; } .taskCreate__head .space ~ .space { margin-left:4px; } .taskCreate__head .minimize { cursor: zoom-out; } .taskCreate__head .space:hover { background: var(--base-hlt-b-notr-hover); } .taskCreate__head .space:hover:active { background: var(--base-hlt-b-notr-selected); } .taskCreate__head > .in { padding: 0 8px; color: var(--base-txt-secondary); } .taskCreate__content { padding: 0; display: flex; flex-direction: column; overflow: hidden; } .taskCreate__content > div { padding: 0 24px; } .taskCreate__content .taskCreate__content__editor-wrapper { margin-top: 12px; max-height: 60vh; padding-bottom: 12px; flex-grow: 1; } .taskCreate__content__title textarea { max-height: 84px; min-height: 32px; height: 32px; font: var(--font-ui-22-title-1-semi); width: 100%; box-sizing: border-box; border: none; resize: none; padding: 0; overflow: hidden; background: transparent; position: relative; z-index: 1; } .taskCreate__content__title .taskCreate__content__title-placeholder { font: var(--font-ui-22-title-1-semi); opacity: 1; color: var(--base-txt-tertiary); position: absolute; left: 24px; z-index: 0; white-space: nowrap; } .taskCreate__content__title .taskCreate__content__title-placeholder-sub { font: var(--font-ui-22-title-1-semi); opacity: 1; color: var(--base-txt-muted) } .taskCreate__content__title textarea:not(:placeholder-shown) + .taskCreate__content__title-placeholder { display: none; } .taskCreate__content .editor__data { min-height: 32px; font: var(--font-txt-15-large-reg); padding: 12px 0; cursor: text; } .taskCreate__content .editor__data:focus { outline: none; } .taskCreate__content .editor__data:empty:before { content: attr(data-placeholder); color: var(--base-txt-tertiary) } .taskCreate__content__item { align-items: flex-start; gap: 12px; overflow: hidden; } .taskCreate__head .taskCreate__content__item { gap: 0 4px; flex-wrap: nowrap; padding: 0 24px 0 6px; box-sizing: border-box; min-height: unset; } .taskCreate__content__item + .taskCreate__content__item { border-top: 1px solid var(--base-line-tertiary); } .taskCreate__content__item > [data-container] { overflow: hidden; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; } .taskCreate__content__item > [data-container=priority] .chip { padding: 0 8px; } .taskCreate__content__item > [data-container]:not([data-container=priority]):not([data-container=template]) { flex-shrink: 1; } .taskCreate__content__item > [data-container]:not([data-container=priority]) > * { flex-shrink: 1; } .taskCreate__head [data-container] { max-width: 143px; } .taskCreate__head ws-icon[name="project-solid"] { --icon-color: var(--base-txt-alert-major); } .taskCreate__content__item .params { flex-wrap: wrap; flex-shrink: 1; gap: 4px; padding: 4px 0; } .taskCreate__content__item > .in { padding: 10px 0; font: var(--font-sp-caption-11-micro-upper-med); color: var(--base-txt-tertiary); text-transform: uppercase; } .taskCreate__content__item .data { font: 12px/22px var(--font-base); color: var(--base-txt-secondary); height: 24px; border-radius: 12px; background: var(--base-cont-mod-low); max-width: 190px; overflow: hidden; padding: 0 2px; } .taskCreate__content__item .data > .in { padding: 0 4px; color: var(--base-txt-tertiary); } .taskCreate__content__item .data > .limit ~ .limit { border-left: 1px solid var(--base-line-secondary); margin-left: 2px; padding-left: 6px; } .taskCreate__content__item .prior > .in { width:20px; text-align: center; padding:0; color:var(--white-primary); } .taskCreate__content__item .data > ws-icon svg { width: 16px; height:16px; } .taskCreate__content__item .data > ws-icon[name=close_sm] {width: 16px;height: 16px;} .taskCreate__content__item .data > .space ws-icon, .taskCreate__content__item .data > .space svg { width: 16px; height: 16px; } .taskCreate__content__item .data:hover { background: var(--base-hlt-hover); } .taskCreate__content__item .params a.require .chip.chip-dashed { outline: 1px dashed var(--base-txt-alert-minor); outline-offset: -1px; } .taskCreate__content__item .params a.require .chip.chip-dashed > span:not([class]) { color: var(--base-txt-alert-minor); } .taskCreate__content__item .params a.require .chip.chip-dashed:hover { outline-color: var(--base-txt-alert-major); } .taskCreate__content__item .params a.require .chip.chip-dashed:hover > span:not([class]) { color: var(--base-txt-alert-major); } .taskCreate__buttons { padding: 12px 20px calc(var(--app-sa-bot) + 20px) 20px; height: 32px; border-top: var(--screen-px) solid var(--base-line-tertiary); gap: 8px; width: calc(100% - 40px); max-width: 700px; margin: 0 auto; } .taskCreate__buttons > .flex_content { position: relative; } .taskCreate__buttons .but { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 4px; } .taskCreate__buttons .editor__toolbar { overflow: visible; } .taskCreate__buttons .format_toolbar { position: absolute; bottom: 44px; left: -16px; background: var(--base-cont-top); box-shadow: 0 0 4px 1px var(--colors-alpha-dark-20); border-radius: 4px; padding: 4px; display: none; } .taskCreate__buttons .format_toolbar-active { display: flex; flex-wrap: nowrap; flex-direction: row; } .taskCreate__buttons .btn-primary i{ font: var(--font-ui-13-small-bold) !important; } .taskCreate__buttons .btn-primary i:not(:empty){ padding-left: var(--sp_fix_04); } .taskCreate__content__editor textarea { } .taskCreate .attachWrapper .fileItem { width: calc(100% / 2 - 19px); background: var(--base-cont-mod-top); } .taskCreate .attachWrapper .fileItem__content .name { padding: 0 2px; } .taskCreate .attachWrapper .fileItem__content .links ws-icon { opacity: 1; } .taskCreate__subscribers { height:24px; font:12px/24px var(--font-base); color:var(--base-txt-tertiary); position:relative; white-space:nowrap; gap: 8px; cursor: pointer; } .taskCreate__subscribers__item:not(.taskCreate__subscribers__item-subscribe) { } .taskCreate__subscribers .plus ws-icon { border:1px dashed var(--base-txt-secondary); width: 24px; height:24px; box-sizing:border-box; border-radius:12px; } .taskCreate__subscribers .plus svg { width: 16px; height: 16px; } .taskCreate__subscribers__item:not(.taskCreate__subscribers__item-hidden) ws-icon { display:none; } .taskCreate__subscribers__item { position:relative; margin-right: -2px; } .taskCreate__subscribers__item:nth-child(n+6) { display: none } .taskCreate__subscribers__item:nth-child(n+5):last-child { display: inline-block } .taskCreate__subscribers__item .av_sm { box-shadow: 0 0 0 2px var(--base-cont-top); } .taskCreate__subscribers__item ws-icon { position:absolute; bottom:-3px; left:-3px; background:var(--base-btn-togg-off); border-radius:3px; width:12px; height:12px; box-shadow:0 0 0 1px var(--base-cont-mod-top); } .taskCreate__subscribers__item ws-icon svg { width:10px; height:10px; fill:var(--white-primary) } .taskCreate__subscribers .more { display: inline-block; padding: 0 6px; min-width: 24px; height: 24px; box-sizing: border-box; text-align: center; font: var(--font-ui-10-nano-med); line-height: 24px; border-radius: 12px; background: var(--base-cont-low); vertical-align: top; position: relative; color: var(--base-txt-primary); box-shadow: 0 0 0 2px var(--base-cont-top); } .taskCreate-initClose > :not(.editBlock-close) { opacity: 0.5; pointer-events: none } .taskCreate-initClose .editBlock-close { position: absolute; z-index:1; bottom: 0; left: 0; right: 0; background: var(--base-cont-mod-top); border-top: 2px solid var(--base-btn-alert-primary-minor); padding:12px 0 24px; } .taskCreate__content__item > [data-container=labels]:not(.require):has(.data_place), .taskCreate__content__item > [data-container=limits]:not(.require):has(.data_place) { display: none; } .taskCreate__content__item > [data-container].require .data_place { border-color: var(--base-txt-alert-minor); color: var(--base-txt-alert-minor); } .taskCreate__content__item > [data-container].require .data_place:hover { background: var(--base-hlt-w-hover); } .taskCreate__content__item > [data-container=labels].require ~ [data-container=limits].require ~ [data-container=more] { display:none } .taskCreate__content__editor .editor__toolbar { height: 36px; background: linear-gradient(0deg, var(--base-hlt-g-easy) 0%, var(--base-hlt-g-easy) 100%), var(--base-cont-mod-top); padding: 0 12px; border-radius: 10px; margin: 0 -12px; gap: 2px; } .taskCreate__content__editor .editor__toolbar-active { background: linear-gradient(0deg, var(--base-hlt-g-hover) 0%, var(--base-hlt-g-hover) 100%), var(--base-cont-mod-top); } .taskCreate__content__editor .editor__toolbar .editor-btn { padding:2px; --icon-color:var(--base-txt-tertiary); --icon-size: 16px; } .ai_loading .editor__toolbar .editor-btn[data-btn=ai] { transform:rotate(3600deg); transition:10s transform ease; --icon-color:var(--base-txt-link-minor); } .taskCreate__content__editor .editor__toolbar-active .editor-btn { --icon-color:var(--base-txt-primary); } .taskCreate__content__editor .editor__toolbar .editor-btn:not(.btn_act):hover { background: var(--base-hlt-g-hover); --icon-color:var(--base-txt-primary); } .taskCreate__content__editor .editor__toolbar .editor-btn.btn_act:hover { background: none !important; border-color: var(--base-line-primary) !important; } .taskCreate__content__editor .editor__toolbar .editor-btn.btn_act:hover:active { background: none !important; border-color: transparent !important; } .taskCreate__content__editor .editor__toolbar .editor-btn:not(.btn_act):hover:active { background: none !important; border-color: var(--base-line-primary) !important; } .taskCreate__content .editor .editor__data { margin: 0 -24px; padding: 12px 24px; } .taskCreate__wrapper-fullscreen .taskCreate .taskCreate__content__editor-wrapper { flex-grow: 1; max-height: 100%; } .taskCreate__content .taskCreate__content__item { padding: 4px 24px; } .taskCreate__content .taskCreate__content__title { position: relative; padding: 8px 24px; } .taskCreateMass .subtaskList .subtaskList__item { padding: 0 12px 0 12px; background: var(--base-cont-mod-top); } .taskCreateMass-foot { padding: 16px; gap: 4px; } .taskCreateMass .subtaskList .subtaskList__item .remove { margin:0 -8px 0 2px } .taskCreateMass .subtaskList .subtaskList__item:not(:hover) .remove { opacity:0 } .taskCreateMass .subtaskList__item ws-icon[name=lock-fill] { background: var(--base-txt-alert-minor); --icon-color: var(--base-txt-alt-light); border-radius:12px; width:24px; height:24px; margin:0 4px; --icon-size: 16px; } .taskCreateMass-withInvite ws-icon[name=lock-fill] { display: none } .taskCreateMass:not(.taskCreateMass-withInvite) .subtaskList__item ws-icon[name=lock-fill] ~ .av_sm { display: none } .taskCreateMass ws-icon[name=parent] { width:24px; height: 24px; --icon-color: var(--base-txt-btn-a); --icon-size:16px; border-radius: 6px; background: var(--base-hlt-hover); margin:-2px; } .taskCreateMass .subtaskList__item:not(.subtaskList__item-form) .in { font-weight: bold; } .mobile-head .taskCreate__buttons { height: unset; border: unset; max-width: unset; margin: unset; padding: 0; width: unset; } .td_progress .bar { width:170px; height:38px; color:var(--base-txt-secondary); } .td_progress .barm { height:30px} .td_progress .bar b { color:var(--base-txt-accent); font-weight:normal} .td_progress .bar .ico { float:left; width:20px; height:20px; padding:0; margin:4px 5px 0 0; } .td_progress .progress, .td_progress .progress_na { margin:0 0 5px 0} /* -------------------------------------------------------------------------------------------------------------------*/ .ani_time, .ani_timer {float:right;height: 24px;width: 30px;border-radius: 6px;padding: 4px;} .no_timers .ani_timer, .no_timers [name*=btn-start_timer] {display:none} .ani_time span, .ani_timer span {display:block; width:20px; height:20px; margin:2px 0 0 5px} .ani_time span {background:url(/assets/img/color/iconset.svg) no-repeat -120px -20px} .ani_timer span {background:url(/assets/img/color/iconset.svg) no-repeat -100px -20px} .ani_time:hover span {background:url(/assets/img/color/iconset.svg) no-repeat -120px -40px} .ani_timer:hover span {background:url(/assets/img/color/iconset.svg) no-repeat -100px -40px} .ani_close {float:right;height: 32px;width:140px;position:relative;font: 13px/32px var(--font-base);margin: 0;border-radius: 6px;text-align:center;z-index:1003;padding: 0;overflow: hidden;} .ani_close .s1 {position:absolute;left:0;top:0;right:0;height: 32px;overflow:hidden;border-radius: 6px;display: flex;align-items: center;justify-content: center;gap: 8px;} .ani_close .s2, .ani_close .s3 {position:absolute;top:0;width:0;height: 32px;border-radius:4px 0 0 4px;transition:width 0.3s ease;-webkit-transition:width 0.3s ease} .ani_close .s2 {left: 0;} .ani_close .s3 {right:0; border-radius:0 4px 4px 0} .ani_close:hover .s2, .ani_close:hover .s3 {width:50%} .ani_close .ico {opacity:0;left:50%;margin:0 0 0 -10px;width:20px;height:20px;padding:0;position:absolute;top: 6px;} .ani_close:hover .ico {opacity:1; transition:opacity 0.1s ease 0.3s; -webkit-transition:opacity 0.1s ease 0.3s} .ani_open {float:right; height:24px; width:140px; position:relative; font:13px/24px var(--font-base); margin:8px 0 0 0; border-radius:4px; text-align:center; z-index:1003} .ani_open .s1 {position:absolute; left:0; top:0; right:0; height:24px; border-radius:4px} .ani_open .s2 {position:absolute; left:50%; top:0; width:0; height:24px; overflow:hidden; border-radius:4px; transition:all 0.3s ease; -webkit-transition:all 0.3s ease} .ani_open:hover .s2 {width:100%; left:0} .ani_open .ico {opacity:0; left:50%; width:20px; height:20px; margin:0 0 0 -10px; padding:0; position:absolute; top:2px} .ani_open:hover .ico {opacity:1; transition:opacity 0.1s ease 0.3s; -webkit-transition:opacity 0.1s ease 0.3s} .ani_open .s4, .ani_close .s4 {position:absolute;left:0;top:0;right:0;height: 32px;} .ani_close.ani_close-28 {height: 28px;font: var(--font-ui-12-mini-med)} .ani_close.ani_close-28 .s1,.ani_close.ani_close-28 .s2, .ani_close.ani_close-28 .s3, .ani_close.ani_close-28 .s4 {height: 28px;} .ani_time.ani_time-28, .ani_timer.ani_timer-28 {padding: 2px 4px} .ani_close.ani_close-28 .ico {top:4px} @media (max-width: 560px) { .ani_close, .ani_open {width:110px} } @media (max-width: 400px) { .ani_close {width:90px;} .ani_open {width:110px;} } /* -------------------------------------------------------------------------------------------------------------------*/ .restrict3 { background:var(--base-hlt-w-pressed); color:var(--base-txt-alert-major); font:11px/20px var(--font-base); padding:5px 10px; } .restrict2 { background:var(--base-hlt-w-pressed); font:12px/20px var(--font-base); margin:0 -20px 15px -20px; padding: 8px 20px; } /* ----------- MinifyCSS: LIGHT THEMEMinifyCSS: LIGHT THEME ----------- */.restrict2 {color: var(--base-btn-alert-primary-minor);} /* ----------- MinifyCSS: STOPMinifyCSS: STOP ----------- */ /* -------------------------------------------------------------------------------------------------------------------*/ .modal__content .restrict2 {margin:0 0 10px;} .modal__content .restrict2 ~ .modal__content__block {margin-top:-10px;} .modal__content #task_inside .restrict2 {margin:-20px -20px 20px -20px;} .modal__content .restrict2 a.button {position: absolute;right: 15px;top: 6px;margin: 0;opacity: 0.75;} .modal__content .restrict2 a.button_error:before {content:'+'; font:20px/20px var(--font-base); float:left; margin:0 5px 0 0;} .modal__content .restrict2 a.button_white {box-shadow:none} .modal__content .restrict2 a.button_white .ico_l {margin:0 4px 0 -2px} /* -------------------------------------------------------------------------------------------------------------------*/ #draft_load, #draft_error { display:none; float:right; margin:9px 8px 0 12px} #draft_load.doing,#draft_error.doing {display:inline-block;} #draft_save {display:none; padding:0 5px; font:11px/18px var(--font-base); margin:3px 3px 0 -100px; width:130px; text-align:center; float:right; text-transform:lowercase; border-radius:4px; position:relative} .editor #draft_save.draft_act {display:inline-block} #draft_del {display:none} .editor #draft_del {margin:6px 5px 0 10px} #draft_load.doing ~ .draft, #draft_error.doing ~ .draft {display:none;} #subscribe_me a, #subscribe_me2 a {font:12px/24px var(--font-base); padding:0; border-radius:4px; float:right; width:100px; text-align:center; position:relative} #subscribe_me {height:24px;padding: 15px 5px 0;} .commentForm #subscribe_me {display: none !important;} .task #subscribe_me {float:right; padding:0;margin:20px 40px 0 -100%; } .task #subscribe_me ~ #subscribers_inline {display:none} .commentList__item-collapsed #subscribe_me {display: none !important;} #subscribe_me2 {margin:20px 40px 0 -100%; float:right; } #subscribe_me2 a .ico_r, #subscribe_me a .ico_r {position:absolute; right:-35px; top:2px} #subscribe_me a .ico_r {display:none} .task #subscribe_me a .ico_r {display:block;} #subscribers_inline {float:right; font:13px/20px var(--font-base); color:var(--base-txt-tertiary); padding:9px 10px; height:20px; margin:15px -10px -20px; border-radius:20px;} #subscribers_inline:hover { color:var(--base-txt-link-minor)} #subscribers_inline:hover font { border-bottom:1px dashed} #subscribers_inline span.cnt {font-weight:bold; background:var(--base-hlt-notr-hover); color:var(--base-txt-accent); border-radius:10px; padding:2px 7px; margin:0 0 0 4px;} #subscribers_inline span.cnt:empty {display:none} #subscribers_inline .ico_privbig, #subscribers_inline .ico_subsbig {margin:-5px 0 -5px 10px } .modal__content #task_inside { min-height:200px} @media (min-width:481px) { .modal .task .content {padding-left: 30px;} .modal .task #files_new {margin-left:30px;} .modal .task .page_content {} } @media (max-width:480px) { #draft_load, #draft_error {margin: 0px 11px;} } .taskPanel { position: fixed; right: 0; bottom: 0; z-index: 1022; display: flex; transition: right 0.3s ease, left 0.3s ease; left: 64px; white-space: nowrap; justify-content: flex-end; box-shadow: 0 -1px 0 var(--base-line-tertiary); background: var(--base-cont-top); height: 40px; align-items: center; padding: 0 8px 0 4px; } .taskPanel:not(.taskPanel-active) { display: none } .taskPanel__item-sticky { position: sticky; left: 0; z-index: 1; /*top: 2px;*/ /* xalign-self: flex-start; */ } .taskPanel .taskPanel__item { margin-left: 8px; } .taskPanel .taskPanel__item--clone { margin-left: 0; } @media (max-width: 480px) { .taskPanel { /* display:none; */ bottom: var(--primary-menu-height); left: 0; right: 0; box-shadow: var(--hairline-top); z-index: 1029; overflow: hidden; overflow-x: auto; height: 52px; display: flex; align-items: center; justify-content: flex-start; padding: 0 8px; } .taskPanel > .flex_gap { display: none } .taskPanel > ws-btn.remove use:first-child { display: none } .taskPanel::-webkit-scrollbar:horizontal { height: 0; } .taskPanel > ws-btn.more { display: none } /*.taskPanel__item-sticky {*/ /* position: relative;*/ /* inset: unset;*/ /*}*/ } @media (min-width: 481px) { .taskPanel { overflow: hidden; overflow-x: auto; justify-content: flex-start; } .taskPanel > ws-btn.remove use:last-child { display: none } .taskPanel::-webkit-scrollbar:horizontal { height: 0; } } /*@media (min-width: 800px) {*/ /* body.withSidebar:not(.sidePanelShown,.withTaskView-fullscreen) .taskPanel,*/ /* body.withAdminMenu .taskPanel {*/ /* left: 325px;*/ /* }*/ /* body.withTaskView.rightPanelShown480p .taskPanel {*/ /* left: 64px;*/ /* }*/ /*}*/ /*.body-dragInProgress .taskPanel {*/ /* bottom: -80px;*/ /*}*/ /*.taskView__wrapper-minimize ~ .taskPanel {*/ /* transition: right 0.6s ease;*/ /*}*/ @media (max-width: 480px) { .taskPanel__item { width: 200px; min-width: 120px; background: var(--base-cont-low); padding: 0 8px; color: var(--base-txt-primary); border-radius: 12px; font: 13px/20px var(--font-base); cursor: pointer; flex-shrink: 1; flex-grow: 0; overflow: hidden; height: 36px; box-sizing: border-box; } .taskPanel__item .close.close { aspect-ratio: 1 / 1.5; } .taskPanel__item-timer .badge, .taskPanel__item-costs .badge { top: 6px !important; right: 6px !important; } } @media (hover: none) and (pointer: coarse) { .taskPanel__item .close.close { display: none !important; } } @media (min-width: 481px) { .taskPanel__item { min-width: 160px; max-width: 220px; padding: 0 8px; color: var(--base-txt-primary); border-radius: 8px; font: 13px/20px var(--font-base); cursor: pointer; flex-shrink: 1; flex-grow: 0; overflow: hidden; height: 28px; box-sizing: border-box; } .taskPanel__item:hover { transition: var(--transition-border-and-shadow); box-shadow: 0 0 0 1px var(--base-line-secondary); } } .taskPanel__item-timers { background: var(--costs-timer-play); color: var(--white-primary); } .taskPanel__item:not(.taskPanel__item-timers) [name=stopwatch] { } .taskPanel__item-timers .priorb { display: none } .taskPanel__item-timers [name=stopwatch] svg { fill: var(--white-primary); } .taskPanel__item-timers[data-over=warning] { background: var(--costs-timer-warning) } .taskPanel__item-timers[data-over=alert] { background: var(--costs-timer-alert) } .taskPanel__item { --icon-color: var(--base-txt-primary); } .taskPanel__item a { pointer-events: none; } .taskPanel__item .priorb { margin: 0; } .taskPanel__item > .flex_content { padding: 0 8px; } .taskPanel__item .close { display: none; cursor: pointer; } .taskPanel__item-hover:not(.taskPanel__item-timers) .close { display: inline-flex; } .taskPanel__item .close { text-align: center; height: 100%; width: auto; aspect-ratio: 1 / 1; border-left: 1px solid var(--base-line-secondary); margin-right: -8px; } .taskPanel__item { --hint-dir: top_right; --hint-color: white; } .taskPanel__item-timer:not(.taskPanel__item-sticky), .taskPanel__item-costs:not(.taskPanel__item-sticky) { position: relative; } .taskPanel__item-timer .badge, .taskPanel__item-costs .badge { background: var(--base-txt-btn-w); font-size: 0; margin: 0; position: absolute; right: 5px; top: 5px; padding: 0; width: 5px; height: 5px; display: block; min-width: unset; transition: transform .15s ease-in; box-shadow: 0 0 0 2px var(--white-primary); } .taskPanel__item-timer:hover .badge, .taskPanel__item-costs:hover .badge { transform: scale(0); transition: transform .15s ease-out; } .taskPanel__item-costs:has(.close) .badge { transition: unset; } .taskPanel__item-timer .badge:empty, .taskPanel__item-costs .badge:empty { display: none; } .taskPanel__item-costs .close { margin-right: -12px; } .taskPanel__item-hover .close:hover { background: var(--base-hlt-g-hover); } .taskPanel__item-timers:hover, .taskPanel__item-timers.taskPanel__item-active { /* box-shadow: var(--shadow-brd-enable-focus); */ } .taskPanel__item-timersOver:hover, .taskPanel__item-timersOver.taskPanel__item-active { box-shadow: var(--shadow-brd-error-focus); } .taskPanel__item-timersOver2:hover, .taskPanel__item-timersOver2.taskPanel__item-active { box-shadow: var(--shadow-brd-error-focus); } /* .taskPanel__item-queue:hover, .taskPanel__item-queue.taskPanel__item-active { box-shadow: var(--shadow-brd-focus-b); } */ .taskPanel__item-inactive { background: var(--base-cont-trans-low); } .taskPanel__item-active, .taskPanel__item-active-hover { box-shadow: 0 0 0 1px var(--base-line-secondary); background: var(--base-cont-top); color: var(--base-txt-primary); --icon-color: var(--base-txt-primary); } .taskPanel__item-chat .av_nm { margin: -12px; transform: scale(0.5); box-shadow: 0 0 0 2px var(--white-muted); } .taskPanel__item.taskPanel__item-chat { padding-left: 2px; } .taskPanel__item-chat .proj_color { margin: -12px; transform: scale(0.5); box-shadow: 0 0 0 1px var(--white-muted); width: 48px; height: 48px; display: inline-block; border-radius: 12px; } .taskPanel__item-chat .proj_color ws-icon { width: 48px; height: 48px; } .taskPanel__item-chat .proj_color ws-emoji { width: 48px; height: 48px; transform: scale(0.7) } .taskPanel__item-chat .proj_color svg { width: 32px; height: 32px; } .taskView__wrapper-active ~ .taskPanel .taskPanel__item-active { /*display: none;*/ } .taskPanel .ht { flex-grow: 1; flex-shrink: 1; padding: 0 4px; } .taskPanel__item-queue { gap: 4px; color: var(--base-txt-secondary); } .taskPanel__item-queue .head { font: var(--font-ui-11-micro-med); color: var(--base-txt-secondary); padding: 0 2px; } .taskPanel__item-queue .bot { display: block; font: 500 13px/16px var(--font-base); color: var(--base-hlt-b-invert-major); padding: 0 2px; } .taskPanel__item-queue .bot b { color: var(--base-txt-primary); font-weight: inherit } .taskPanel__item-queue .head .stat { color: var(--base-hlt-b-invert-major); } .taskPanel__item-queue .progress { height: 8px; border-radius: 10px; margin: 3px 0; background: var(--base-surf-low); overflow: hidden; border: 1px solid var(--base-surf-low); width: 100px; box-shadow: 0 2px 2px #0000001a inset; } .taskPanel__item-queue .flex_content .progress { width: unset; } .taskPanel__item-queue .progress div { background: var(--white-primary); border-radius: 4px; height: 8px; overflow: hidden; } .taskPanel__item-queue .progress div:before { content: ''; display: block; height: 24px; background: repeating-linear-gradient(-45deg, var(--base-hlt-b-notr-selected), var(--base-hlt-b-notr-selected) 8px, var(--white-secondary) 8px, var(--white-secondary) 16px); animation: linear bg_move_ani 1000ms infinite; -webkit-animation: linear bg_move_ani 1000ms infinite; box-shadow: 0 3px 3px var(--white-secondary) inset; border-radius: 4px; } .taskPanel__item-queue ws-icon { width: 28px; height: 28px; } .taskPanel__item-queueDone { color: var(--base-txt-btn-c); --icon-color: var(--base-txt-btn-c); padding: 0; background: var(--colorize-lbl-darkaqua-bg); } .taskPanel__item-timer, .taskPanel__item-timer:hover { background: var(--costs-timer-play); color: var(--white-primary); padding: 0 8px 0 0; min-width: 100px; } .taskPanel__item-costs, .taskPanel__item-costs:hover { background: var(--base-hlt-b-invert); color: var(--white-primary); padding: 0 12px 0 0px; } .taskPanel__item-costs.taskPanel__item-hover, .taskPanel__item-costs:hover { background: var(--base-hlt-b-invert-major); } .taskPanel__item-timer ws-icon, .taskPanel__item-costs ws-icon { --icon-color: var(--white-primary); } .taskPanel__item-timer ws-icon:first-child, .taskPanel__item-costs ws-icon:first-child { width: 32px; height: 32px; } .taskPanel__item-timer[data-over=warning] { background: var(--costs-timer-warning) } .taskPanel__item-timer[data-over=alert] { background: var(--costs-timer-alert) } .taskPanel__item-timer .data, .taskPanel__item-costs .data { flex-shrink: 1; flex-grow: 1; overflow: hidden; padding: 0; } .taskPanel__item-timer .data b { font: bold 14px/16px var(--font-base); margin: 0 0 -2px; } .taskPanel__item-timer .data i { font: 11px/16px var(--font-base); opacity: 0.7; } .taskPanel__item-timer .data .t { font: var(--font-ui-11-micro-reg); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .taskPanel__item-costs .data b { font: bold 14px/16px var(--font-base); } .primaryMenu__foot .taskPanel__counter { --icon-color: var(--sidebar-ico-promo); } .primaryMenu__foot .taskPanel__counter:hover { --icon-color: var(--sidebar-cont-active); } body > .taskPanel__counter { width: 40px; height: 40px; transition: all 0.3s ease; background: var(--base-cont-top-elevated); border-radius: 100%; box-shadow: var(--shadow-cont-major-outline); cursor: pointer; opacity: 1; scale: 1; position: fixed; bottom: 83px; right: 16px; z-index: 1016; justify-content: center; color: var(--base-txt-primary); } body > .taskPanel__counter > .in { font: var(--font-ui-11-micro-bold); padding: 0 6px; line-height: 16px; border-radius: 4px; } body > .taskPanel__counter ws-icon { display: none } .taskPanel__counter:not(.taskPanel__counter-active) { display: none !important; } body.withTaskPanel .taskPanel__counter { display: none } body:not(.withTaskPanel) .taskPanel { display: none } @media (max-width: 480px) { .primaryMenu__foot .taskPanel__counter { display: none } } @media (min-width: 481px) { body > .taskPanel__counter { display: none } } .taskPanel__item-costs { } #taskPanel__menu .menu__item .close { display: none; cursor: pointer; height: 100%; width: auto; aspect-ratio: 1 / 1; margin-right: -6px; border-radius: unset !important; } #taskPanel__menu .menu__item:not(.menu__item-timers):hover .close { display: flex } #taskPanel__menu .menu__item { overflow: hidden; } #taskPanel__menu .menu__item:hover .close:hover { background: var(--base-hlt-g-hover); box-shadow: 0 0 0 1px var(--base-line-secondary); } .primaryMenu__timer { padding:0; gap:0; } .primaryMenu__timer .in, .primaryMenu__timer .in:hover { position: relative; border-radius: 6px; font: var(--font-ui-10-nano-reg); --icon-color: var(--sidebar-ico-promo); text-align: center; transition: all 0.1s ease; height: 20px; padding: 1px 4px; background: var(--costs-timer-play); color: var(--sidebar-cont-base); margin: 16px 0 0; } .primaryMenu__timer .in[data-over=warning] { background: var(--costs-timer-warning) } .primaryMenu__timer .in[data-over=alert] { background: var(--costs-timer-alert) } body.withTaskPanel .primaryMenu__timer { display: none } .primaryMenu__timer .in b { color: var(--white-accent); font: var(--font-ui-10-nano-semi); } .primaryMenu__timer .in i { font: var(--font-ui-10-nano-reg); opacity: 0.7 } body:not(.withTaskPanel) .primaryMenu__foot a.upgrade { display: none } @media screen and (max-width: 480px) { .taskPanel__item.taskPanel__item-chat { padding-left: 6px; } } @media (min-width: 481px) { .top-layer { padding-bottom: 0; } body.withTaskPanel .top-layer, body.withTaskPanel .taskView__wrapper, body.withTaskPanel .taskView__wrapper.top-layer { padding-bottom: 40px; } body.withModalAndTask.withImagePreview .taskView__wrapper, body.withModalAndTask.withImagePreview .taskView__wrapper.top-layer { padding-bottom: 0; } body.withModalAndTask.withImagePreview #modal__previewPanel.ws_init { transform: translateY(100%); transition: transform 0.3s; } body.withModal__previewPanel.withModal__previewPanel #modal__previewPanel.ws_init { transform: translateY(0); } } .taskPanel__item-task-completed { .flex_content { color: var(--base-txt-tertiary); text-decoration-line: line-through; text-decoration-color: var(--base-line-primary); text-decoration-thickness: calc(var(--screen-px)* 1.5); } task-stage { opacity: .5; } } .modal__header:has(.schedule-hours-modal__header) { padding: 8px 8px 0 8px; } .modal__header:has(.schedule-hours-modal__header) > .in.flex_row { padding: 4px; } .modal__header:has(.schedule-hours-modal__header) > ws-btn { padding: 4px; } .schedule-hours-modal__header { gap: 12px } .schedule-hours-modal__header-avatar-block span{ border-radius: 8px; transform: scale(0.75); } .schedule-hours-modal__header-text-block_text--primary { align-items: center; font: var(--font-ui-18-title-2-bold); color: var(--base-txt-primary); } .schedule-hours-modal__header-text-block_text--secondary { font: var(--font-ui-12-mini-reg); color: var(--base-txt-secondary); gap: 2px; } .schedule-hours-modal__header-text-block_text--secondary .stage, .schedule-hours-modal__header-text-block_text--secondary .stage { --icon-size: 16px; } .schedule-hours-modal__body { flex: 1 1 auto; min-height: 0; } .modal__content:has(.schedule-hours-modal_body) { overflow: hidden; min-height: 0; } .schedule-hours-modal__scrollzone { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--base-cont-mod-low); } .modal .schedule-hours-modal__scrollzone { margin-top: 0; } .schedule-hours-modal__presets-block { display: flex; padding: 8px 16px 8px 14px; align-items: center; gap: 4px; align-self: stretch; border-bottom: 0.5px solid var(--base-line-secondary); background: var(--base-cont-mod-top); position: sticky; top: 0; z-index: 1; } .schedule-hours-modal__presets-block_checkbox { margin: 6px; } .schedule-hours-modal__presets-block_pie-block { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex: 1 0 0; } .schedule-hours-modal__presets-block_pie-block_main-text { display: flex; padding: 2px 4px; flex-direction: column; justify-content: center; align-items: flex-start; color: var(--base-hlt-invert); font: var(--font-ui-13-small-bold); letter-spacing: -0.078px; font-variant-numeric: tabular-nums; } .schedule-hours-modal__tracking-block { display: flex; padding: 12px 0; flex-direction: column; align-items: flex-start; align-self: stretch; /* background: var(--base-cont-mod-low); */ } .schedule-hours-modal__tracking-block_days-list { display: flex; padding: 0 12px; flex-direction: column; align-items: flex-start; gap: 4px; align-self: stretch; } .schedule-hours-modal__footer { /* background: var(--base-cont-mod-low); */ display: flex; padding: 8px 20px 20px 20px; flex-direction: column; align-items: center; align-self: stretch; @media screen and (max-width: 480px) { padding-bottom: calc(20px + var(--sa-bot)); } } .schedule-hours-modal__footer ws-btn button { height: 20px; font: var(--font-ui-12-mini-reg) !important; border-radius: 50px; } .schedule-hours-modal__footer ws-btn button ws-icon { --icon-size: 12px; } .schedule-hours-modal__footer ws-btn button span { padding: 0 0 0 6px !important; } schedule-hours-pie, schedule-hours-pie > * { box-sizing: border-box; } .schedule-hours-pie { display: flex; width: 36px; height: 36px; flex-direction: column; justify-content: center; align-items: center; flex-shrink: 0; aspect-ratio: 1/1; border-radius: 8px; border: 1px solid var(--base-txt-ghost); } .schedule-hours-pie--text { gap: -8px; } .schedule-hours-pie__text--primary { font: var(--font-ui-15-large-semi); color: var(--base-txt-tertiary); height: 20px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; position: relative; top: 4px; } .schedule-hours-pie__text--secondary { height: 16px; font: var(--font-ui-10-nano-reg); color: var(--base-txt-muted); position: relative; bottom: 4px; } schedule-date-progressbar, schedule-date-progressbar > * { box-sizing: border-box; } schedule-date-progressbar { width: 100%; display: flex; height: 40px; align-items: center; flex: 1 0 0; border-radius: 12px; border: 2px solid var(--base-cont-mod-top); background: var(--base-cont-mod-top); box-shadow: 0 0 0 1px var(--base-line-tertiary); } .schedule-date-progressbar__container { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; flex: 1 0 0; border-radius: 10px; position: relative; } .schedule-date-progressbar__bar { display: flex; width: 100%; height: 100%; border-radius: 10px; overflow: hidden; background: transparent; position: absolute; z-index: 0; } .schedule-date-progressbar__seg { height: 100%; } .schedule-date-progressbar__seg.seg-selected { background: var(--base-hlt-b-selected); } .schedule-date-progressbar__seg.seg-selected-new { background: var(--base-hlt-b-active); } .schedule-date-progressbar__seg.seg-overload { background: var(--base-hlt-w-invert); } .schedule-date-progressbar__seg.seg-rest { background: transparent; } .schedule-date-progressbar__text-container { display: flex; padding: 0 8px; align-items: center; gap: 8px; align-self: stretch; } .schedule-date-progressbar__text-container-inner-left { display: flex; flex-direction: column; justify-content: center; align-items: center; } .schedule-date-progressbar__text-inner-left--primary { display: flex; height: 20px; padding: 0 4px; justify-content: flex-end; align-items: center; align-self: stretch; overflow: hidden; color: var(--base-txt-primary); text-align: center; text-overflow: ellipsis; font: var(--font-ui-15-large-semi); position: relative; top: 2px; } .schedule-date-progressbar__text-inner-left--secondary { display: flex; height: 16px; padding: 0 4px; justify-content: center; align-items: center; align-self: stretch; color: var(--base-txt-tertiary); text-align: center; font: var(--font-ui-10-nano-reg); position: relative; bottom: 2px; } .schedule-date-progressbar__text-container-inner-right { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; flex: 1 0 0; } .schedule-date-progressbar__text-inner-right--primary { display: flex; height: 20px; align-items: center; align-self: stretch; overflow: hidden; color: var(--base-txt-accent); text-overflow: ellipsis; font: var(--font-ui-13-small-reg); position: relative; top: 2px; } .schedule-date-progressbar__text-inner-right--secondary { display: flex; height: 16px; align-items: center; align-self: stretch; text-align: center; font: var(--font-ui-10-nano-reg); position: relative; bottom: 2px; } .schedule-date-progressbar__text-inner-right--secondary-base { font: var(--font-ui-10-nano-reg); color: var(--base-txt-primary); } .schedule-date-progressbar__text-inner-right--secondary-accent { font: var(--font-ui-10-nano-med); color: var(--base-txt-btn-w); } .schedule-date-progressbar__text-container-inner-holiday-icon { width: 16px; height: 16px; } .schedule-date-progressbar__scale { display: none; justify-content: space-between; width: 100%; position: absolute; bottom: 0; align-items: end; } .schedule-date-progressbar__scale { display: none; justify-content: space-between; align-items: flex-end; height: 6px; } .schedule-date-progressbar__scale::before, .schedule-date-progressbar__scale::after, .schedule-date-progressbar__scale { content: ""; position: absolute; bottom: 0; width: 100%; clip-path: inset(-6px 1px 0px 1px); } .schedule-date-progressbar__scale { height: 3px; /* четверть часа */ background: repeating-linear-gradient(to right, var(--base-txt-tertiary) 0 1px, transparent 1px calc(15 * 100% / var(--work-minutes, 480)) ); } .schedule-date-progressbar__scale::before { height: 4px; /* полчаса */ background: repeating-linear-gradient(to right, rgb(from var(--base-txt-tertiary) r g b / 1) 0 1px, transparent 1px calc(30 * 100% / var(--work-minutes, 480)) ); } .schedule-date-progressbar__scale::after { height: 6px; /* часы */ background: repeating-linear-gradient(to right, rgb(from var(--base-txt-tertiary) r g b / 1) 0 1px, transparent 1px calc(60 * 100% / var(--work-minutes, 480)) ); } schedule-date-progressbar:hover .schedule-date-progressbar__scale { display: flex; } .schedule-date-progressbar__end-text { overflow: hidden; color: var(--base-txt-primary); font: var(--font-ui-13-small-semi); text-align: right; text-overflow: ellipsis; } schedule-date-line, schedule-date-line > * { box-sizing: border-box; } schedule-date-line { width: 100%; display: flex; height: 40px; align-items: center; gap: 4px; align-self: stretch; border-radius: 12px; padding: 0 16px 0 2px; } schedule-date-line ws-checkbox { padding: 6px; } schedule-time-picker, schedule-time-picker > * { box-sizing: border-box; } schedule-time-picker { display: flex; height: 40px; padding: 4px; align-items: center; border-radius: 12px; background: var(--base-cont-mod-top); box-shadow: 0 0 0 1px var(--base-line-tertiary); } .schedule-time-picker__container { display: flex; justify-content: flex-end; align-items: center; gap: 4px; } .schedule-time-picker__button { width: 32px !important; height: 32px !important;; color: var(--base-txt-secondary) !important; border-radius: 8px !important; } body.mobile .schedule-time-picker__button { opacity: .5; } body.desktop .schedule-time-picker__button { opacity: .05; } .schedule-time-picker__button svg { fill: var(--base-txt-secondary) !important; } .schedule-time-picker__text { display: flex; align-items: center; justify-content: center; border-radius: 5px; padding: 2px 8px; color: var(--base-txt-muted); font: var(--font-ui-13-small-med); white-space: nowrap; width: 28px; font-variant-numeric: tabular-nums; } schedule-time-picker:hover .schedule-time-picker__button { color: var(--base-txt-btn-a) !important; opacity: 1 !important; } schedule-time-picker:hover .schedule-time-picker__button svg { fill: var(--base-txt-btn-a) !important; } schedule-time-picker:hover .schedule-time-picker__button[disabled], .schedule-time-picker__container--filled .schedule-time-picker__button[disabled] { opacity: 0.25 !important; } schedule-time-picker:hover .schedule-time-picker__text { padding: 2px 6px; border: 2px solid var(--base-line-act-minor); background: var(--base-hlt-easy); color: var(--base-txt-accent); } .schedule-time-picker__container--filled .schedule-time-picker__text { background: var(--base-cont-mod-trans-low); color: var(--base-txt-primary); } .schedule-time-picker__container--filled .schedule-time-picker__button { opacity: 1 !important; } ws-btn:has(.schedule-time-picker__button) { display: none; } schedule-time-picker:hover ws-btn:has(.schedule-time-picker__button--hover) { display: inline-block; } schedule-time-picker:not(:hover) ws-btn:has(.schedule-time-picker__button--no-hover) { display: inline-block; } schedule-week-divider, .schedule-week-divider > * { box-sizing: border-box; } schedule-week-divider { width: 100%; } .schedule-week-divider { display: flex; padding: 8px 20px; flex-direction: row; align-items: center; justify-content: center; align-self: stretch; } .schedule-week-divider--base { --divider-color: var(--base-hlt-g-notr-focus); --divider-text-color: var(--base-txt-tertiary); } .schedule-week-divider--accent { --divider-color: var(--base-txt-btn-w); --divider-text-color: var(--base-txt-btn-w); } .schedule-week-divider__text { display: flex; padding: 0 8px; flex-direction: column; align-items: flex-start; color: var(--divider-text-color); font: var(--font-ui-12-mini-reg); white-space: nowrap; } .schedule-week-divider__line { width: 100%; height: 1px; background: var(--divider-color); display: flex; align-items: center; } .schedule-week-divider__line:first-child { justify-content: flex-start; } .schedule-week-divider__line:first-child::before { background: var(--divider-color); content: ""; display: block; height: 6px; width: 6px; border-radius: 100%; } .schedule-week-divider__line:last-child { justify-content: flex-end; } .schedule-week-divider__line:last-child::after { background: var(--divider-color); content: ""; display: block; height: 6px; width: 6px; border-radius: 100%; } schedule-date-line:hover .schedule-date-progressbar__scale { display: flex; } schedule-date-line:hover .schedule-time-picker__button { color: var(--base-txt-btn-a) !important; opacity: 1 !important; } schedule-date-line:hover .schedule-time-picker__button svg { fill: var(--base-txt-btn-a) !important; } schedule-date-line:hover .schedule-time-picker__button[disabled], .schedule-time-picker__container--filled .schedule-time-picker__button[disabled] { opacity: 0.25 !important; } schedule-date-line:hover .schedule-time-picker__text { padding: 2px 6px; border: 2px solid var(--base-line-act-minor); background: var(--base-hlt-easy); color: var(--base-txt-accent); } schedule-date-line:hover ws-btn:has(.schedule-time-picker__button--hover) { display: inline-block; } schedule-date-line:hover ws-btn:has(.schedule-time-picker__button--no-hover) { display: none; } .schedule-tooltip__container { display: flex; width: 133px; padding: 4px 8px; flex-direction: column; align-items: flex-end; gap: 2px; } .schedule-tooltip__container--tasks { gap: 4px; } .schedule-tooltip__text--first { color: var(--lbl-yesterday-major, #C9C); font: var(--font-ui-10-nano-reg); } .schedule-tooltip__text--second { color: var(--colors-alpha-light-70, rgba(255, 255, 255, 0.70)); font: var(--font-ui-13-small-reg); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; } .schedule-tooltip__text--time { font: var(--font-ui-13-small-semi); color: var(--colors-alpha-light-100); } .schedule-tooltip__text--third { color: var(--colors-alpha-light-90); font: var(--font-ui-13-small-reg); } .schedule-tooltip__text-divider { padding: 6px 0; border-top: solid .5px var(--colors-alpha-light-30); } .schedule-tooltip__text--footer { color: var(--colors-alpha-light-70); font: var(--font-ui-10-nano-reg); } .schedule-tooltip__text--footer-accent { color: var(--base-hlt-w-invert-minor); } .taskView__wrapper { position: fixed; z-index: 1014; background: var(--base-cont-top); display: none; top: 0; left: 0; right: 0; bottom: 0; scale: 1; } @media (min-width: 481px) { .taskView__wrapper.top-layer { z-index: 1021; } .rightPanelShown480p .taskView__wrapper.top-layer { z-index: 1020; } } @media (max-width: 480px) { .taskView__wrapper { --layer: 0; --zIndex: 1032; z-index: calc(var(--zIndex) + var(--layer)); padding-bottom: var(--keyboard-height); } } @media (max-width: 1400px) { .rightPanelShown480p .taskView__wrapper { z-index: 1022; } .rightPanelShown480p .taskView__wrapper.top-layer { z-index: 1022; } } .taskView__wrapper.taskView__wrapper-active { box-shadow: var(--shadow-cont-major-outline); } .taskView__head .fullscreen.active use:first-child { display: none; } .taskView__head .fullscreen:not(.active) use:last-child { display: none } .taskView__wrapper.taskView__wrapper-withoutFullscreen { box-shadow: var(--shadow-cont-minor-lineonly-outside) !important; } .taskView__wrapper.taskView__wrapper-withoutFullscreen .taskView__head .fullscreen, .taskView__wrapper:not(.taskView__wrapper-fullscreen) .taskView__paginal .div, .taskView__wrapper:not(.taskView__wrapper-fullscreen) .taskView__head .in .div, .taskView__wrapper.taskView__wrapper-withoutFullscreen .taskView__paginal .div, .taskView__wrapper.taskView__wrapper-withoutFullscreen .taskView__head .in .div { display: none; } .taskView__wrapper.taskView__wrapper-withoutFullscreen .taskView__tree ws-chip.folder-chip, .taskView__wrapper:not(.taskView__wrapper-fullscreen) .taskView__tree ws-chip.folder-chip, .taskView__wrapper.taskView__wrapper-withoutFullscreen .taskView__tree ws-chip.folder-chip + ws-icon, .taskView__wrapper:not(.taskView__wrapper-fullscreen) .taskView__tree ws-chip.folder-chip + ws-icon { display: none; } @media (max-width: 768px) { .taskView__visibility .in { display: none; } } @media (max-width: 640px) { .taskView__visibility .list { display: none; } } .taskView__tree .folder-chip ws-icon { --icon-color: var(--folder-color); } .taskView { display: flex; flex-direction: column; flex-wrap: nowrap; height: 100%; } .taskView > div { flex-shrink: 0; flex-grow: 0; } .taskView__overlay { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1013; display: none; } .taskView__contentScrollOut.taskView__contentScrollOut { flex-grow: 1; flex-shrink: 1; display: flex; overflow: hidden; position: relative; flex-direction: column; } .taskView__head { padding: 0 16px 0 8px; --hint-dir: bottom; } .taskView__head .buts { gap: 8px; } .taskView__head .buts .btn-reopen ws-icon[name=reopen] { position: absolute; opacity: 0; } .taskView__head .buts .btn-reopen:hover span { opacity: 0; } .taskView__head .buts .btn-reopen:hover ws-icon[name=reopen] { opacity: 1; } .taskView__head .name { display: inline-flex; border-radius: 6px; transition: background 0.3s ease; justify-content: flex-start; } .taskView__head .name > .in { font: var(--font-ui-22-title-1-semi); padding-left: 4px; } .taskView__head .name > .in .gray { color: var(--base-txt-tertiary); } .taskView__head .name.name-proj > .in { font: var(--font-ui-18-title-2-semi); } .taskView__head > .symbol { padding: 12px 12px; } .taskView__head .proj_color { width: 40px; height: 40px; display: flex; align-content: center; align-items: center; justify-content: center; border-radius: 8px; } .taskView__head .proj_color ws-icon { width: 40px; height: 40px; } .taskView__head .proj_color svg { width: 32px; height: 32px; } .taskView__head:first-child { padding-top: 16px; } .taskView__head .space, .taskView__head ws-icon { width: 32px; height: 32px; display: flex; justify-content: center; align-items: center; border-radius: 20px; } .taskView__head .timer ws-icon { width: 20px; height: 20px; } .taskView__head ~ .taskView__head { padding: 10px 16px 10px 18px; box-shadow: 0 -0.5px var(--base-line-tertiary) inset; } .taskView__head ~ .taskView__head .space, .taskView__head ~ .taskView__head ws-icon { width: 28px; height: 28px; } @media (max-width: 860px) { .taskView__head .fullscreen { display: none } .taskView__head .taskView__paginal > .div { display: none } } .taskView__head .minimize { cursor: zoom-out; } .taskView__head .div { height:20px; border-left:1px solid var(--base-line-tertiary); margin:0 6px; } @media (max-width: 480px) { .taskView__paginal { display: none !important; } .taskView__head .div { display: none !important; } } .taskView__paginal {} .taskView__paginal > .in { margin-left: 4px; padding: 0 2px; color:var(--base-txt-muted); font: var(--font-ui-12-mini-reg); } .taskView__paginal > .in b { font-weight: inherit; color:var(--base-txt-secondary); font: var(--font-ui-12-mini-med); } .taskView__paginal-noCounters > .in { display: none; } .taskView__id > ws-btn span { font: var(--font-mono); font-size:13px; } .taskView__id > ws-btn span:before { content: '# '; color:var(--base-txt-tertiary) } .taskView__head > .in, .taskView__head > .in_def { padding: 0; } .taskView:not(.taskView-descr_expanded):not(.taskView-comment_expanded):not(.taskView-taskInvisible):not(.taskView-chat) .taskView__head > .in { display: none; } .taskView.taskView-descr_expanded .taskView__head > .in, .taskView.taskView-comment_expanded .taskView__head > .in, .taskView.taskView-taskInvisible .taskView__head > .in { opacity: 0; animation: .2s linear 1s opacity-fade-in forwards; } .taskView-taskInvisible .taskView__head > .in_def { display: none !important; } .taskView__head > .in_def { color: var(--base-txt-tertiary); cursor: s-resize; height: 100%; } .taskView__head > .in { cursor: n-resize; overflow: hidden; } @media (max-width: 480px) { .taskView__head .fullscreen { display: none } .taskView__head .minimize { display: none } .taskView__head > .in_def { opacity: 0 } } .taskView__head .ht { font: var(--font-ui-18-title-2-semi); padding: 0 6px; flex-shrink: 1; color: var(--base-txt-accent); } .taskView__head .btn-comments ws-icon svg use:last-child { fill: var(--base-txt-btn-c); } .taskView__head .btn-comments:not(.unseen) ws-icon svg use:last-child { display: none; } .taskView__head .btn-comments:not(.unseen) { display: none; } .taskView__head .btn-comments.unseen span { color: var(--base-txt-btn-c); } .taskView-withSubtaskMass .taskView__subtasks__head > .flex_row, .taskView-withSubtaskMass .taskView__subtasks__foot ws-btn.plus { display: none; } .taskView__contentScrollOut > .taskView__subtasks__head { position: absolute; top: 0; right: 0; left: 0; z-index: 4; box-shadow: 0 0.5px var(--base-line-tertiary); background: linear-gradient(180deg, var(--base-cont-top), var(--base-cont-top-opac)); backdrop-filter: blur(4px); } .taskView__contentScrollOut > .taskView__subtasks__head ws-icon[name="arrows/arrow_drop-down"] { opacity: 0; } .taskView .taskView__content .commentListPanel { background: linear-gradient(0deg, var(--base-cont-top) 0%, var(--base-cont-mid) 100%); box-shadow: 0 0.5px 0px var(--base-line-tertiary) inset; } .taskView-withCommentFilter .commentListPanel, .taskView-withCommentMass .commentListPanel, .taskView-comment_massInvisible .commentListPanel { z-index: 5; box-shadow: 0 0.5px var(--base-line-tertiary); } /* FILTER BACKGROUND VIOLET !!! */ /*.taskView.taskView-withCommentFilter .taskView__content .commentListPanel,*/ /*.taskView.taskView-withCommentFilter .commentListPanel {*/ /* background: var(--base-hlt-b-notr-easy);*/ /* box-shadow: 0 0.5px var(--base-line-tertiary);*/ /*}*/ .taskView.taskView-withCommentMass .taskView__content .commentListPanel, .taskView.taskView-withCommentMass .commentListPanel, .taskView.taskView-withSubtaskMass .taskView__subtasks__head { background: var(--base-hlt-notr-hover); box-shadow: 0 0.5px var(--base-line-tertiary); } .taskView.taskView-withSubtaskMass .subtaskListPanel .massPanel { top: 0; display: flex; z-index: 10; box-shadow: none; background: none; padding-right: 16px; } .taskView.taskView-withCommentMass .commentListPanel .commentListPanel__filter { display: none; margin: 0; } .taskView.taskView-withCommentMass .commentListPanel .massPanel { top: 0; display: flex; padding-right: 16px; } .commentListPanel__mass { background: none; box-shadow: none; } .taskView-taskBlockInvisible.taskView-comment_massInvisible .commentListPanel__filter { /*cursor: n-resize;*/ } .taskView__group__head { padding: 8px 16px 8px 24px; background: linear-gradient(0deg, var(--base-cont-top) 0%, var(--base-cont-mid) 100%); box-shadow: 0 0.5px 0px var(--base-line-tertiary) inset; } .taskView__group__head .in { font: 600 14px/20px var(--font-base); color: var(--base-txt-secondary) } .taskView__subtasks__head .cnt { color: var(--base-txt-primary); font-weight: bold; } .taskView__subtasks__head .space { width: 32px; display: flex; text-align: center; justify-content: center; } .taskView__group__head > ws-icon { width: 32px; height: 32px; } .taskView__subtasks__head { padding: 0; } .taskView__subtasks__head > .flex_row { padding: 8px 16px 8px 24px; } /*.taskView__group__wrapper.collapsed {*/ /* background: linear-gradient(0deg, var(--base-cont-top) 0%, var(--base-cont-mid) 100%);*/ /*}*/ .taskView__group__wrapper.collapsed .taskView__group > div:not(.taskView__group__head__wrapper,.taskView__group__head) { display: none !important; } .taskView__group__wrapper .taskView__group__head > .in > .info { opacity: 1; transition: opacity 0.15s linear; } .taskView__group__wrapper:not(.collapsed) .taskView__group__head > .in > .info { opacity: 0; pointer-events: none; } .taskView__subtasks__wrapper .taskView__subtasks__head ws-btn.config { opacity: 1; transition: opacity 0.15s linear; } .taskView__subtasks__wrapper.collapsed .taskView__subtasks__head ws-btn.config { opacity: 0; pointer-events: none; } .taskView__group__head ws-icon[name="arrows/arrow_drop-down"] { width: 16px; height: 16px; } .taskView__group__head ws-icon[name="arrows/arrow_drop-down"]:first-child svg { width: 16px; height: 16px; transition: all .15s ease-in-out; --icon-color: var(--base-txt-btn-a); } .taskView__group__wrapper.collapsed .taskView__group .taskView__group__head ws-icon[name="arrows/arrow_drop-down"]:first-child svg { transform: rotate(-90deg); } .taskView__group__head .name { display: block; flex-shrink: 0; flex-grow: 0; width: 120px; color: var(--base-txt-primary); padding: 10px 4px; border-radius: 6px; font: var(--font-sp-caption-11-micro-upper-med); text-transform: uppercase; } @media (max-width: 480px) { .taskView__group__head .name { width: 84px; } } .taskView__contentScrollOut > .taskView__group__head .name { pointer-events: none; } .taskView__group__head .name:hover { background: var(--base-hlt-g-hover); color: var(--base-txt-accent); cursor: pointer; } .taskView__group__head > .in > .info .chip { padding: 0 4px; } .taskView__group__head > .in > .info .chip ws-icon, .taskView__group__head > .in > .info .chip ws-icon svg { width: 20px; height: 20px; --icon-color: var(--base-txt-primary); } .taskView__group__head > .in > .info .chip > span { color: var(--base-txt-primary); font: var(--font-sp-caption-11-micro-upper-med); padding: 0 4px; } .taskView__group-descr:not(.empty) .button_place .add, .taskView__group-descr.empty .button_place .edit { display: none; } @media (hover: hover) { .taskView__group-descr .edit { opacity: 0; transition: opacity 0.15s linear; } .taskView__group-descr:hover .edit { opacity: 1; } } .taskView__group .taskView__subtasks__head .but { width: 20px; height: 20px; border-radius: 4px; padding: 2px; margin: 4px; } .taskView__subtasks__head .but:hover { background: var(--base-hlt-g-hover); } .taskView__subtasks__head .but:hover:active { background: var(--base-hlt-g-pressed); } .taskView__subtasks .task_quick_add { border-bottom: none; border-top: 1px solid var(--base-line-ghost); } .taskView__visibility { display: flex; height: 36px; align-items: center; justify-content: flex-end; gap: 10px; padding: 0 16px; color: var(--base-txt-primary); } .taskView__visibility:not(.taskView__visibility-hidden) { display: none; } .taskView__visibility ws-icon svg { width: 16px; height: 16px; fill: var(--base-txt-alert-major); } .taskView__visibility ws-icon { padding: 0 4px; height: 16px; width: 16px; } .taskView__visibility .in { flex-grow: 1; font: var(--font-ui-11-micro-reg); color: var(--base-txt-primary); } .taskView__visibility:hover .in { color: var(--base-txt-secondary); } .taskView__visibility:not(.taskView__visibility-hidden) use:last-child { display: none } .taskView__visibility-hidden use:first-child { display: none } .taskView__visibility .in b { color: var(--base-txt-primary); font-weight: 600; } .taskView__visibility-hidden { color: var(--base-txt-secondary); justify-content: flex-start; background: var(--base-hlt-w-easy); } .taskView__visibility .list > span { position:relative; margin-right: -2px; display: block; width: 16px; height: 16px; } .taskView__visibility .list > span .av_sm { box-shadow: 0 0 0 2px var(--base-cont-mid); transform: scale(0.666667); transform-origin: top left; } .taskView__visibility .list > span.more { box-sizing: border-box; display: block; height: 16px; width: auto; text-align: center; font: 600 8px/12px var(--font-base); backdrop-filter: blur(4px); border-radius: 8px; background: var(--base-hlt-w-hover); vertical-align: top; position: relative; padding: 2px 4px; box-shadow: 0 0 0 1px var(--base-cont-mid); color: var(--base-txt-secondary); } .taskView__pathAndVisibility > .taskView__tree { flex-grow: 1; flex-shrink: 1; } .taskView__pathAndVisibility > .taskView__visibility-hidden { background: transparent; background: linear-gradient(90deg, transparent 0%, var(--base-hlt-w-easy) 50%); } .taskView__pathAndVisibility > .taskView__tree task-wait { margin: 2px 8px; } .taskView__pathAndVisibility > .taskView__tree task-wait + ws-chip { display: none; } #quickTaskMenu, #quickUserMenu { width: auto !important; @media screen and (max-width: 480px) { max-width: 94vw; } } .taskView__tree { height: 36px; padding: 0 16px; font: var(--font-ui-12-mini-reg); color: var(--base-txt-tertiary); } .taskView__tree .idTask.chip.chip-plain > span { color: var(--base-txt-muted); } .taskView__tree__item { padding: 0 4px; color: var(--base-txt-primary); gap: 4px; height: 24px; } .taskView__tree__item .in { padding: 0 4px } a.taskView__tree__item:hover { border-radius: 10px; color: var(--base-txt-primary); background: var(--base-hlt-selected); } .taskView__tree__group > ws-icon, .taskView__tree > ws-icon { width: 16px; height: 16px; --icon-size: 16px; --icon-color: var(--base-txt-secondary) } .taskView__tree__item ws-icon { width: 20px; height: 20px; --icon-size: 16px; } .taskView__tree__item ws-emoji { width: 16px; height: 16px; padding: 2px; } .taskView__tree__item span.proj_color {background: none; border-radius: 3px;} .taskView__tree__item ws-icon.project_color-alt { --icon-color: var(--project-color) } .taskView__tree__item.proj_folder_color ws-icon { --icon-color: var(--folder-color); } .taskView__tree__item .av_sm { transform: scale(0.7); margin: -2px; } @media screen and (min-width: 481px) { .taskView__tree > a, .taskView__tree > .folder-chip span { max-width: 180px; flex-shrink: 1; overflow: hidden; } } @media screen and (max-width: 480px) { .taskView__tree > .ws-chip--idTask { background: linear-gradient(to right, transparent 0%, var(--base-cont-top-opac) 20%); background: var(--base-cont-top-opac); position: sticky; right: 0; backdrop-filter: blur(4px); } .taskView__tree { position: relative; } .taskView__tree::after { content: ''; width: 16px; height: 100%; position: sticky; display: block; right: -16px; margin-right: -16px; flex-shrink: 0; background: var(--base-cont-top-opac); backdrop-filter: blur(4px); } .taskView__tree .status-done { display: none; } } .taskView__tree > a ws-chip { width: 100%; } .taskView__name { padding: 4px 16px; position: relative; } .taskView__name h1 { font: var(--font-ui-22-title-1-semi); margin: 0; padding: 8px; } .taskView__name h1 b { font-weight: normal; } .taskView__params { padding: 8px 16px 8px 24px; } .taskView__params__item { min-height: 32px; padding: 2px 0; } .taskView__params__item.hidden { display: none; } .taskView__params__item > ws-icon[name=drag_indicator] { opacity: 0; width: 16px; height: 32px; align-self: flex-start; border-radius: 6px; --icon-color: var(--base-txt-secondary); transition: all .15s ease-out; order: -1; } .taskView__params__item > ws-icon[name=drag_indicator]:hover, .taskView__params__item .param:hover + ws-icon[name=drag_indicator] { opacity: 1; } .taskView__params__item > ws-icon[name=drag_indicator]:hover { background: var(--base-hlt-g-hover); cursor: pointer; transition: all .15s ease-out; opacity: 1; } .taskView__params__item > ws-icon[name=drag_indicator] svg { width: 16px; height: 16px; --icon-color: var(--base-txt-tertiary); } .taskView__params__item .param { width: 120px; align-self: flex-start; color: var(--base-txt-tertiary); padding: 10px 4px; border-radius: 6px; font: var(--font-sp-caption-11-micro-upper-med); text-transform: uppercase; cursor: pointer; transition: all .15s ease-out; } @media (max-width: 480px) { .taskView__params__item .param { width: 100px; } } .taskView__params__item .in { position: relative; } .taskView__params__item .in .hotKey { display: none; } .taskView__params__item[data-key="assignee"] .in.hoverZone .hotKey, .taskView__params__item[data-key="priority"] .in.hoverZone .hotKey, .taskView__params__item[data-key="deadline"] .in.hoverZone .hotKey, .taskView__params__item[data-key="status"]:not(:has(ws-btn)) .in.hoverZone .hotKey, .taskView__params__item[data-key="tags"]:not(:has(.tag:nth-child(4))) .in.hoverZone .hotKey, .taskView__params__item[data-key="costs"] .in.hoverZone .hotKey { display: flex; position: absolute; top: 4px; right: 4px; pointer-events: none; white-space: nowrap; opacity: 0; } .taskView__params__item .in.hoverZone.selected, body.desktop .taskView__params__item .in.hoverZone:hover { a + .hotKey, .value__wrapper:not(.readonly) + .hotKey { animation: opacity-fade-in .2s linear .3s forwards; } } body.mobile .taskView__params__item .hotKey { display: none !important; } body.desktop .taskView__params__item[data-key="status"]:has(ws-btn) .in.hoverZone:hover .hotKey, .taskView__params__item[data-key="status"]:has(ws-btn) .in.hoverZone.selected .hotKey { animation: unset; } .taskView__params__item .param:hover { background: var(--base-hlt-g-hover); color: var(--base-txt-secondary); } .taskView__params__item.drag_clone { z-index: 999999; opacity: 0 !important; cursor: grabbing; } .taskView__params__item .param ws-icon { width: 16px; height: 16px; --icon-color: var(--base-hlt-w-invert-minor); } .taskView__params__item .param svg { /* fill: var(--base-txt-tertiary); */ /* margin: 0 4px 0 -4px; */ } .taskView__params__item.taskView__params__item-dragThis > ws-icon { opacity: 1; } .taskView__params__item.taskView__params__item-dragThis { background: var(--base-cont-mod-trans-low); } .taskView__params__dropPlace { height: 2px; margin: -1px 60px -1px 20px; position: relative; z-index: 1; } .taskView__params__dropPlace-hover { background: var(--base-hlt-b-invert-major); } .taskView__params__add { pointer-events: none; } .taskView__params__add .in { min-width: 120px; color: var(--base-txt-tertiary); padding: 6px 4px; border-radius: 6px; font: var(--font-ui-12-mini-reg); cursor: pointer; gap: 8px; } .taskView__params__add .in .cnt { display: flex; min-width: 16px; height: 16px; padding: 0 4px; margin-left: 2px; box-sizing: border-box; justify-content: center; align-items: center; border-radius: 4px; font: var(--font-ui-10-nano-reg); background: inherit; border: 1px solid var(--base-txt-muted); color: var(--base-txt-tertiary); } .taskView__params.collapsed { background: linear-gradient(0deg, var(--base-cont-top) 0%, var(--base-cont-mid) 100%); box-shadow: 0 0.5px 0px var(--base-line-tertiary) inset; } .taskView__params .taskView__params__hide .in { display: block; color: var(--base-txt-tertiary); padding: 6px 4px; border-radius: 6px; font: var(--font-ui-12-mini-reg); width: 120px; cursor: pointer; } .taskView__params.collapsed .taskView__params__hide .in { color: var(--base-txt-primary); padding: 10px 4px; border-radius: 6px; font: var(--font-sp-caption-11-micro-upper-med); text-transform: uppercase; } .taskView__params__add .in:hover, .taskView__params__hide .in:hover { background: var(--base-hlt-g-hover); color: var(--base-txt-secondary); transition: all .15s ease-out; } .taskView__params__add ws-icon, .taskView__params__add ws-icon svg, .taskView__params__hide ws-icon, .taskView__params__hide ws-icon svg { width: 16px; height: 16px; transition: all .15s ease-in-out; } .taskView__params__add ws-icon, .taskView__params__hide ws-icon { --icon-color: var(--base-txt-tertiary); } .taskView__params__hide-act ws-icon { --icon-color: var(--base-txt-btn-a); transform: rotate(90deg); } .taskView__params__item > .hoverZone { border-radius: 6px; } body.desktop .taskView__params__item .hoverZone:hover, body.desktop .taskView__params__item .hoverZone-hover, body.desktop .taskView__params__item .selected.hoverZone, body.mobile .taskView__params__item .hoverZone-hover:has(a, .value__wrapper:not(.readonly)), body.mobile .taskView__params__item .selected.hoverZone:has(a, .value__wrapper:not(.readonly)) { background: var(--base-hlt-g-easy); } .taskView__params__item .hoverZone:has(a.primary):hover { cursor: pointer; } .taskView__params__item .hoverZone:not(:hover) .hoverOnly { display: none; } .taskView__params__item task-assignee img.av_sm, .taskView__params__item task-assignee span.av_sm, .taskView__params__item task-author img.av_sm, .taskView__params__item task-author span.av_sm { transform: scale(1.167) } .taskView__params__item task-author + ws-icon { --icon-color: var(--base-txt-tertiary); --icon-size: 16px; } .taskView__params__item task-author + ws-icon + span { font: var(--font-ui-11-micro-reg); color: var(--base-txt-secondary); padding-left: 4px; } .taskView__params__item .data { font: var(--font-ui-13-small-med); color: var(--base-txt-primary); border-radius: 4px; padding: 2px 4px 2px 8px; display: inline-flex; align-items: center; gap: 4px; align-content: center; } .taskView__params__item task-term .data.related { color: var(--base-txt-tertiary); } .taskView__params__item task-tags .data { gap: 4px; padding: 6px 8px 6px 12px; flex-wrap: wrap; } .taskView__params__item .data_place, .taskView__params__item .link { width: 100%; font: var(--font-ui-13-small-med); color: var(--base-txt-tertiary); border-radius: 4px; padding: 2px 4px 2px 8px; display: flex; align-content: center; align-items: center; gap: 4px; } .taskView__params__item .data .space, .taskView__params__item .data ws-icon, .taskView__params__item .data_place ws-icon, .taskView__params__item .link ws-icon { width: 28px; height: 28px; box-sizing: border-box; border-radius: 14px; } .taskView__params__item .data > ws-icon { width: 28px; height: 28px; } .taskView__params__item task-stage .data > ws-icon { --icon-size: 28px; } .taskView__params__item .data .icons ws-icon { width: 24px; height: 24px; } .taskView__params__item .data .space { display: flex; align-items: center; justify-content: center; } .taskView__params__item task-assignee ws-icon.ico_seen { border-radius: 6px; background: var(--base-hlt-easy); --icon-color: var(--base-txt-btn-a); } .taskView__params__item .data_place ws-icon:first-child { --icon-size: 16px; } .taskView__params__item .data_place ws-icon:first-child { --icon-color: var(--base-txt-secondary); } .taskView__params__item .data_place > .in, .taskView__params__item .data > .in { padding-left: 4px; gap: 4px; } .taskView__params__item .data_place > .in { color: var(--base-txt-tertiary); padding: 0 4px; } .taskView__params__item .data > .in { padding: 0 4px; } .taskView__params__item .prior > .in { color: var(--white-primary); } .taskView__params__item .data > .in b { font-weight: normal; color: var(--base-txt-primary); } .taskView__subtasks__head .stats { position: relative; box-shadow: var(--shadow-brd-enable); border-radius: 24px; padding: 4px; display: flex; align-items: center; flex-wrap: nowrap; flex-shrink: 0; box-sizing: border-box; height: 28px; background: var(--base-cont-top); } .taskView__subtasks__head .stats:empty { display: none; } .taskView__subtasks__head .stats .in { padding: 0 4px; font: var(--font-ui-11-micro-reg); color: var(--base-txt-tertiary); } .taskView__subtasks__head .stats .in b { padding: 0 4px; color: var(--base-txt-accent); font: var(--font-ui-11-micro-bold); } .taskView__subtasks__head .stats .in .over_cnt { color: var(--base-txt-alert-major); font: var(--font-ui-11-micro-bold); padding: 0 4px; margin: 0; } .taskView__subtasks__head .stats .in i { color: var(--base-txt-secondary); font: var(--font-ui-11-micro-bold); } .taskView__subtasks__head .stats .counters { border: none; padding: 0; font: var(--font-ui-11-micro-reg); color: var(--base-txt-tertiary); border-radius: 0; } .taskView__subtasks__head .stats progress-pie { display: inline-flex; } .taskView__subtasks__head .stats svg { position: static; width: 20px; height: 20px; } .taskView__subtasks__head .button_place { margin-left: 8px; margin-right: 4px; transition: all 0.15s linear; overflow: hidden; width: 28px; opacity: 1; } .taskView__subtasks__wrapper.collapsed .taskView__group__head .button_place { width: 0; margin-right: 0; scale: 0; opacity: 0; } .taskView__subtasks__head .plus { width: 28px; height: 28px; box-sizing: border-box; border-radius: 14px; box-shadow: var(--shadow-brd-enable); background: var(--base-cont-top); --icon-color: var(--base-txt-secondary); color: var(--base-txt-secondary); cursor: pointer; } .taskView__subtasks__head .plus:hover { box-shadow: var(--shadow-brd-enable-hover); background: var(--base-cont-top-elevated); --icon-color: var(--base-txt-accent); color: var(--base-txt-accent); } .taskView__subtasks__content { padding: 12px 16px 0 24px; } .taskView__subtasks__foot { height: 40px; margin-bottom: 24px; padding: 0 16px 0 40px; } .taskView__group__content { padding: 8px 16px 16px 40px; font: 14px/24px var(--font-base); } .taskView__group__contentEdit { position: relative; } .taskView__group-descr.taskView__group-editing .button_place { display: block; } .taskView__params__item task-tags ws-icon, .taskView__params__item task-stage ws-icon { width: 28px; height: 28px; /* --icon-size: 28px !important; */ } .taskView__params__item task-tags span.tag { background: var(--tag-bg); color: var(--colorize-lbl-txt-primary); border-radius: 14px; height: 20px; font: 11px / 20px var(--font-base); display: flex; align-items: center; padding: 0 6px 0 2px; } .taskView__params__item task-tags span.tag:before { content: ''; float: left; width: 10px; height: 10px; background: var(--tag-color); border-radius: 5px; margin: 5px } .taskView__params__item task-tags span.tag .in { padding: 0 2px; white-space: nowrap; } .taskView__params__item task-tags > span.stage, .taskView__params__item task-stage > span.stage { border-radius: 4px; } task-priority .prior, .taskView__params__item task-priority .prior { width: 20px; height: 20px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--white-primary); font: var(--font-ui-10-nano-reg); } .taskView__params__item .data.costs { width: 120px; } .taskView__params__item [onclick] { cursor: pointer; } .taskView__params__item .in > a[onclick], .taskView__params__item .in > a[data-modal-url] { width: 100%; display: inline-flex; align-items: center; } .taskView__params__item .add_val { box-shadow: var(--shadow-brd-enable); background: var(--base-cont-top); --icon-color: var(--base-txt-secondary); color: var(--base-txt-secondary); } .taskView__params__item .add_val:hover { box-shadow: var(--shadow-brd-enable-hover); background: var(--base-cont-top-elevated); --icon-color: var(--base-txt-accent); color: var(--base-txt-accent); } .taskView__params__item .in a.add_val { border-radius: 50px; } .taskView__params__item .in a.add_val ws-icon { width: 28px; height: 28px; } .taskView__params__item .in a.add_val span { padding: 0 4px; font: var(--font-ui-11-micro-reg); } .taskView__params__item .data ws-icon.add_val { border: none; } .taskView__params__item .value__wrapper.readonly .data .add_val { display: none; } .taskView__params__item .data.costs .in { font: bold 13px/20px var(--font-base); } .taskView__params__item .data.costs .label { padding: 0 8px; color: var(--base-txt-tertiary); } .taskView__params__item .adv_params .in { color: var(--base-txt-tertiary); font-variant: small-caps; padding: 0 4px; } .taskView__params__item .adv_params .adv_costs { font: bold 13px/20px var(--font-base); padding: 0 4px; } .taskView__params__item .stats { width: 80px; position: relative; border-left: 2px solid var(--base-line-tertiary); display: flex; justify-content: flex-end; margin: 0 0 0 8px; align-items: center; gap: 8px; } .taskView__params__item .stats svg { position: static; width: 28px; height: 28px; } .taskView__params__item .stats:empty { display: none; } .taskView__params__item .value__wrapper:not(.readonly) { cursor: pointer } .relationsListing { overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding-bottom: 8px; } .taskView__params__item[data-key=costs] .data .cost, .taskView__params__item[data-key=relations] .data .relationsListing__item { background: var(--base-cont-top); } .taskView__params__item[data-key=reminders] .data, .taskView__params__item[data-key=meets] .data, .taskView__params__item[data-key=relations] .data { flex-wrap: nowrap; align-items: flex-start; } .taskView__params__item[data-key=relations] .data .relationsList { width: 100%; display: flex; flex-wrap: wrap; flex-shrink: 1; gap: 4px; } .relationsListing__item { display: flex; box-shadow: var(--shadow-brd-enable); border-radius: 24px; } .relationsListing__item:hover { box-shadow: var(--shadow-brd-enable-hover); } .relationsListing__item .relation_type { border-top-left-radius: 24px; border-bottom-left-radius: 24px; display: flex; align-items: center; border-right: 1px solid var(--base-line-tertiary); height: 28px; padding: 4px 4px 4px 8px; box-sizing: border-box; font: var(--font-ui-11-micro-reg); --icon-size: 18px; } .relationsListing__item .relation_type.hoverZone:hover { cursor: pointer; background: var(--base-hlt-g-hover); } .relationsListing__item.locked .relation_type, .readonly .relationsListing__item .relation_type { cursor: default !important; background: transparent !important; } .relationsListing__item .relation_type > .in { padding: 0 2px; } .relationsListing__item .relation_type ws-icon { width: 20px; height: 20px; } .relationsListing__item .project_icon ws-emoji { width: 18px; height: 18px; } .relationsListing__item .project_icon ws-icon { width: 20px; height: 20px; border-radius: 4px; } .relationsListing__item .relation_type-block { color: var(--base-txt-btn-b); --icon-color: var(--base-txt-btn-b); } .relationsListing__item[data-fulfilled=yes] .relation_type-block { color: var(--base-txt-tertiary); --icon-color: var(--base-txt-tertiary); } .relationsListing__item .relation_type-block_by { color: var(--base-txt-btn-w); --icon-color: var(--base-txt-btn-w); } .relationsListing__item[data-fulfilled=yes] .relation_type-block_by, .relationsListing__item[data-fulfilled=yes] .relation_type-end { color: var(--base-txt-btn-c); --icon-color: var(--base-txt-btn-c); } .relationsListing__item .relation_type-info, .relationsListing__item .relation_type-info_by { color: var(--base-txt-btn-c); --icon-color: var(--base-txt-btn-c); } .relationsListing__item .relation_type-start { color: var(--base-txt-btn-w); --icon-color: var(--base-txt-btn-w); } .relationsListing__item .relation_type-after_start { color: var(--base-txt-btn-b); --icon-color: var(--base-txt-btn-b); } .relationsListing__item .relation_type-end { color: var(--base-txt-btn-w); --icon-color: var(--base-txt-btn-w); } .relationsListing__item .relation_type-after_end { color: var(--base-txt-btn-b); --icon-color: var(--base-txt-btn-b); } .menu__group-relation_types a[data-alias=info] > ws-icon:first-child { --icon-color: var(--base-txt-btn-c); } .menu__group-relation_types a[data-alias=block] > ws-icon:first-child { --icon-color: var(--base-txt-btn-b); } .menu__group-relation_types a[data-alias=block_by] > ws-icon:first-child { --icon-color: var(--base-txt-btn-w); } .menu__group-relation_types a[data-alias=end] > ws-icon:first-child { --icon-color: var(--base-txt-btn-w); } .menu__group-relation_types a[data-alias=after_end] > ws-icon:first-child { --icon-color: var(--base-txt-btn-b); } .menu__group-relation_types a[data-alias=start] > ws-icon:first-child { --icon-color: var(--base-txt-btn-w); } .menu__group-relation_types a[data-alias=after_start] > ws-icon:first-child { --icon-color: var(--base-txt-btn-b); } .taskView__params__item[data-key=relations] .relationsListing__item .relation_data { max-width: 200px; } .relationsListing__item .relation_data { border-top-left-radius: 24px; border-bottom-left-radius: 24px; display: flex; height: 28px; padding: 0 4px; color: var(--base-txt-primary); gap: 2px; box-sizing: border-box; width: 100%; min-width: 0; } .relationsListing__item .relation_data .tag ws-icon { width: 20px; height: 20px; --icon-size: 20px; } .relationsListing__item .relation_data .av_sm { transform: scale(0.8) } .relationsListing__item .relation_data task-term { flex-shrink: 2; } .relationsListing__item .relation_data task-term svg { transform: scale(0.8) } .relationsListing__item .date { font-style: normal; padding: 0 2px; background: var(--base-hlt-b-selected); border-radius: 4px 24px 24px 4px; color: var(--base-txt-btn-b); font: var(--font-ui-12-mini-reg); } .relationsListing__item .date.delay { background: var(--base-hlt-w-selected); color: var(--base-txt-btn-w); } .relationsListing__item .date .in { padding: 0 4px; } .relationsListing__item .relation_data task-stage { width: auto !important; } .relationsListing__item .relation_data .name { text-overflow: ellipsis; width: 100%; flex-shrink: 1; white-space: nowrap; padding: 0 4px 0 0; font: var(--font-ui-12-mini-reg); min-width: 0; } .relationsListing__item .relation_data a { color: inherit; } .relationsListing__item[data-fulfilled=yes][data-alias=block_by] .relation_data ws-icon[name=task_done_sm], .relationsListing__item[data-fulfilled=yes][data-alias=end] .relation_data ws-icon[name=task_done_sm] { --icon-color: var(--base-txt-tertiary); } .relationsListing__item[data-fulfilled=yes][data-alias=block_by] .relation_data a, .relationsListing__item[data-fulfilled=yes][data-alias=end] .relation_data a { color: var(--base-txt-tertiary); text-decoration: line-through; } .relationsListing__item .relation_data .priorb { margin: 0; border-radius: 10px; } .relationsListing__item .date_close { background: var(--base-cont-mod-low); color: var(--base-txt-tertiary); border-top-right-radius: 24px; border-bottom-right-radius: 24px; padding: 0 4px; margin-right: 4px; } .relationsListing__item .delete { display: none; margin-right: 2px; } .relationsListing__item .delete button { border-top-right-radius: 24px; border-bottom-right-radius: 24px; } .relationsListing__item:hover .delete { display: inline-block; } .relationsListing__item.locked .relation_data > ws-icon[name=lock] { width: 20px; height: 20px; --icon-size: 16px; --icon-color: var(--base-txt-alert-major); } .relationsListing__item.locked .relation_data > .name { font: var(--font-ui-10-nano-reg); } .relationsListing__item.archived .relation_data > ws-icon:first-child { --icon-color: var(--base-txt-secondary); } .relationsListing__item.archived .relation_data > .name { color: var(--base-txt-secondary); text-decoration: line-through; } .relationsListing__item.archived .relation_type .in { display: none; } .relationsListing__item.archived[data-fulfilled="no"] .relation_type { --icon-color: var(--base-txt-secondary) !important; } .dt_relate_ > .relationsListing__item + .relationsListing__item { margin-top: 2px; } .reminderListing__wrapper { overflow: hidden; /* padding: 4px 0; */ flex-shrink: 1; } .reminderListing { display: flex; flex-wrap: wrap; gap: 4px; padding: 0; } .reminderListing__wrapper .data_place { cursor: pointer } .data_place ~ .reminderListing { display: none } .reminderListing__item { gap: 4px; font: var(--font-ui-11-micro-med); color: var(--base-txt-primary); } .reminderListing__item-editable { cursor: pointer; } .reminderListing__item .reminder_data { padding: 0 6px 0 4px; height: 28px; background: var(--base-cont-low); border-radius: 16px; flex-grow: 0; flex-shrink: 1; overflow: hidden; box-shadow: var(--shadow-brd-enable); background: var(--base-cont-top); } .reminderListing__item .reminder_data:hover { box-shadow: var(--shadow-brd-enable-hover); } .reminderListing__item .delete { height: 24px; border-radius: 2px; } .reminderListing__item .delete:hover { background: var(--base-hlt-g-selected) } .reminderListing__item .delete ws-icon { height: 24px; width: 24px; } .reminderListing__item .reminder_data task-reminder-term { padding: 0 6px; } .reminderListing__item .reminder_data .for { padding: 0 6px 0 0; color: var(--base-txt-tertiary); } .reminderListing__item .reminder_data .users > * { position: relative; margin: 0 -1px; box-shadow: 0 0 0 1px var(--base-cont-top); } .reminderListing__item .reminder_data .users > ws-icon { background: var(--menu-item-invert); width: 20px; height: 20px; --icon-size: 16px; border-radius: 12px; &[name=language] { background: var(--base-txt-btn-c); } } .reminderListing__item .reminder_data .users > ws-icon svg { fill: var(--white-primary) } .reminderListing__item .reminder_data .users > .av_sm { transform: scale(0.833, 0.833); margin: -3px; } .reminderListing__item .reminder_data a { color: inherit; } .reminderListing__item:not(:hover) a.delete:not(.menu_open) { display: none; } .reminderListing__item a.delete { display: inline-block; --icon-size: 16px; --icon-color: var(--base-txt-btn-w); } .reminderListing__item .reminder_data:hover a.delete:hover { background: var(--base-cont-top); border-radius: 10px; } .reminderListing__item .text { height: 28px; background: var(--base-cont-low); border-radius: 16px; } .reminderListing__item .text ws-icon { height: 28px; width: 28px; } .reminderListing__item .reminder_data .users .more { box-sizing: border-box; display: inline-block; height: 20px; line-height: 16px !important; text-align: center; font: var(--font-ui-10-nano-med); border-radius: 12px; background: var(--base-hlt-g-hover); backdrop-filter: blur(4px); vertical-align: top; position: relative; padding: 2px 6px; color: var(--base-txt-secondary); cursor: pointer; } .meetListing__wrapper { overflow: hidden; /* padding: 4px 0; */ flex-shrink: 1; } .meetListing { display: flex; flex-wrap: wrap; gap: 4px; padding: 0; } .meetListing__wrapper .data_place { cursor: pointer } .data_place ~ .meetListing { display: none } .meetListing__item { gap: 4px; font: var(--font-ui-11-micro-med); color: var(--base-txt-primary); } .meetListing__item-editable { cursor: pointer; } .meetListing__item .meet_data { padding: 0 6px 0 4px; height: 28px; background: var(--base-cont-low); border-radius: 16px; flex-grow: 0; flex-shrink: 1; overflow: hidden; box-shadow: var(--shadow-brd-enable); background: var(--base-cont-top); } .meetListing__item .meet_data:hover { box-shadow: var(--shadow-brd-enable-hover); } .meetListing__item .delete { height: 24px; border-radius: 2px; } .meetListing__item .delete:hover { background: var(--base-hlt-g-selected) } .meetListing__item .delete ws-icon { height: 24px; width: 24px; } .meetListing__item .meet_data task-meet-term { padding: 0 6px; } .meetListing__item .meet_data .for { padding: 0 6px 0 0; color: var(--base-txt-tertiary); } .meetListing__item .meet_data .users > * { position: relative; margin: 0 -1px; box-shadow: 0 0 0 1px var(--base-cont-top); } .meetListing__item .meet_data .users > ws-icon { background: var(--menu-item-invert); width: 20px; height: 20px; --icon-size: 16px; border-radius: 12px; &[name=language] { background: var(--base-txt-btn-c); } } .meetListing__item .meet_data .users > ws-icon svg { fill: var(--white-primary) } .meetListing__item .meet_data .users > .av_sm { transform: scale(0.833, 0.833); margin: -3px; } .meetListing__item .meet_data a { color: inherit; } .meetListing__item:not(:hover) a.delete:not(.menu_open) { display: none; } .meetListing__item a.delete { display: inline-block; --icon-size: 16px; --icon-color: var(--base-txt-btn-w); } .meetListing__item .meet_data:hover a.delete:hover { background: var(--base-cont-top); border-radius: 10px; } .meetListing__item .text { height: 28px; background: var(--base-cont-low); border-radius: 16px; } .meetListing__item .text ws-icon { height: 28px; width: 28px; } .meetListing__item .meet_data .users .more { box-sizing: border-box; display: inline-block; height: 20px; line-height: 16px !important; text-align: center; font: var(--font-ui-10-nano-med); border-radius: 12px; background: var(--base-hlt-g-hover); backdrop-filter: blur(4px); vertical-align: top; position: relative; padding: 2px 6px; color: var(--base-txt-secondary); cursor: pointer; } .taskView__likes { padding: 2px 4px 2px 8px; flex-wrap: wrap; gap: 4px; /* height: 32px; */ font: 13px/20px var(--font-base); /* padding: 0 6px; */ } task-reactions { display: contents; } .taskView__likes .data_place { padding: 0; } .taskView__likes__group__wrapper { gap: 4px; } .taskView__likes__group { padding: 0 5px 0 4px; height: 28px; border-radius: 16px; box-shadow: var(--shadow-brd-enable); background: var(--base-cont-top); flex-grow: 0; flex-shrink: 1; overflow: hidden; gap: 4px; } .taskView__likes__group:hover { box-shadow: var(--shadow-brd-enable-hover); } .taskView__likes__group:last-child { /* margin-right: 8px; */ } .taskView__likes__group .users > * { position: relative; margin: 0 0 0 -2px; box-shadow: 0 0 0 1px var(--base-cont-top); border-radius: 12px; } .taskView__likes__group .users .more { padding: 2px 6px 2px 4px; background: linear-gradient(0deg, var(--base-hlt-g-hover) 0%, var(--base-hlt-g-hover) 100%), var(--base-cont-top); font: var(--font-ui-10-nano-med); color: var(--base-txt-secondary); } .taskView__likes a.emotion.primary:not(.add_val) { width: 100%; } .taskView__likes__group a.like_ ws-icon svg { width:24px; height:24px; } .taskView__group .but { color: var(--base-txt-primary); background: var(--base-hlt-g-hover); height: 32px; padding: 0 8px; border-radius: 16px; } .taskView__group:not(:hover) .but { display: none } .taskView__group .but:hover { background: var(--base-hlt-g-pressed); } .taskView__group .but:hover:active { } .taskView__group .but .in { padding: 0 8px; } .taskView__group-editing .but { display: none; } .taskView__head .buts .taskView__timer { height: 28px; } .taskView__head .buts .taskView__timerContainer:not(:empty) ~ [name*="sp-time"], .taskView__head .buts .taskView__timerContainer:not(:empty) ~ [name*="sp-money"] { display: none; } .taskView__intro { } .taskView__intro-content { background: linear-gradient(175deg, var(--project-color, var(--base-hlt-g-selected)) -80%, var(--base-cont-top) 60%); padding: 24px 0; } .taskView__intro-content > div + div { margin-top: 8px; } .taskView__intro .members { display: flex; justify-content: center; } .taskView__intro .title { text-align: center; } .taskView__intro h1 { color: var(--base-txt-tertiary); font: var(--font-ui-32-title-large-semi); display: inline-block; margin: 0; } .taskView__intro h1[onclick] { cursor: pointer; text-decoration: underline; } .taskView__intro h1 b { color: var(--base-txt-primary); font-weight: 600; text-decoration: underline; } .taskView__intro h1 b[onclick] { cursor: pointer; user-select: none; } .taskView__intro .info { padding: 0 8px; color: var(--base-txt-secondary); font-family: var(--font-mono); font-size: 12px; font-style: normal; font-weight: 400; line-height: 20px; text-align: center; } .taskView__intro .options { padding: 8px; display: flex; align-items: center; justify-content: center; } .taskView__intro .members > .users { justify-content: center; } .taskView__intro .descr[data-empty=yes] { display: none; } .taskView__intro-description { padding: 0 52px 0 84px; max-width: 940px; margin: 0 auto; width: 100%; box-sizing: border-box; } .taskView__intro .descr { font: var(--font-ui-15-large-reg); color: var(--base-txt-primary); padding-top: 40px; margin-bottom: 40px; } .taskView__intro .descr > p:last-child { margin-bottom: 0; } .taskView__intro .descr + #files_new { margin-top: -26px; padding-bottom: 40px; } .taskView__params__item-costs .value__wrapper:not([data-limits-url]) .data > .limit, .taskView__params__item-costs .value__wrapper:not([data-limits-url]) .data_place > .limit { display: none; } .taskView__params__item-costs .value__wrapper[data-limits-url] .data > .limit, .taskView__params__item-costs .value__wrapper[data-limits-url] .data_place > .limit { display: inline-flex; } .taskView__params__item-costs > .in > a { display: inline-flex !important; gap: 4px; } .taskView__params__item-costs .value__wrapper[data-limits-url] .chip.limit:hover { background: var(--base-cont-top); } .taskView__params__item-costs .value__wrapper[data-limits-url] .limit:hover { color: var(--base-txt-primary) } .taskView__params__item-costs .chip.limit > span { font: var(--font-ui-11-micro-reg) !important; } .taskView__params__item-costs .cost .limit { border: none; padding: 0; font: var(--font-ui-11-micro-reg); color: var(--base-txt-tertiary); border-radius: 0; } .taskView__params__item-costs .value__wrapper[data-limits-url] .cost .limit:hover { color: var(--base-txt-primary) } .taskView__params__item-costs .data .cost { position: relative; box-shadow: var(--shadow-brd-enable); border-radius: 24px; padding: 4px; display: flex; align-items: center; flex-wrap: nowrap; flex-shrink: 0; box-sizing: border-box; height: 28px; } .taskView__params__item-costs .data .cost progress-pie { display: block; height: 20px; width: 20px; } .taskView__params__item-costs .data .cost progress-pie svg { height: 20px; width: 20px; } .taskView__params__item-costs .data .cost .in { padding: 0 4px; font: var(--font-ui-11-micro-reg); color: var(--base-txt-tertiary); } .taskView__params__item-costs .data .cost .in > b { padding: 0 4px; color: var(--base-txt-accent); font: var(--font-ui-11-micro-bold); } .taskView__params__item-costs .data .cost .in > i { color: var(--base-txt-secondary); font: var(--font-ui-11-micro-bold); } .taskView__params__item-costs .data .cost .in > a { display: block; } .taskView__params__item-costs .data .cost[data-over=yes] .in b:first-child { color: var(--base-txt-alert-major); } .taskView__params__item-costs .value__wrapper[data-limits-url] .data .cost:hover .limit { border-bottom: 1px dashed } .taskView__params__item-costs .data .cost:hover { box-shadow: var(--shadow-brd-enable-hover); } .taskView__params__item > .in task-assignee, .taskView__params__item > .in task-term, .taskView__params__item > .in task-stage { width: 100%; } .taskView__params__item > .in task-assignee .data > ws-btn, .taskView__params__item > .in task-author .data > ws-btn { display: none; } .taskView__params__item > .in:hover task-assignee .data > ws-btn, .taskView__params__item > .in:hover task-author .data > ws-btn { display: inline-block; } .taskView__params__item > .in task-assignee .author { color: var(--base-txt-tertiary); font: 400 0.6875rem/16px var(--font-mono); } .taskView__params__item > .in a[data-from-url] task-assignee .author > span:first-child:hover { text-decoration: underline var(--base-txt-tertiary) dashed; } .taskView__params__item > .in:not(:hover) task-assignee .author:not(.menu_open) { display: none; } .taskView__params__item > .in task-stage .data > ws-btn, .taskView__params__item > .in task-stage .data_place > ws-btn {display: none;} .taskView__params__item > .in:hover task-stage .data > ws-btn, .taskView__params__item > .in:hover task-stage .data_place > ws-btn, .taskView__params__item > .in.selected task-stage .data > ws-btn, .taskView__params__item > .in.selected task-stage .data_place > ws-btn, body.mobile .taskView__params__item > .in task-stage .data > ws-btn, body.mobile .taskView__params__item > .in task-stage .data_place > ws-btn {display: inline flex;} body.mobile .taskView__params__item > .in task-stage .data > ws-btn span:not([class]), body.mobile .taskView__params__item > .in task-stage .data_place > ws-btn span:not([class]) {display: none;} .taskView__params__item task-term span.terms_label_today, .taskView__params__item task-term span.terms_label_warm, .taskView__params__item task-term span.terms_label_hot, .taskView__params__item task-term span.terms_label_wait, .taskView__params__item task-term span.terms_label_related { margin-right: 2px; padding: 0 8px; font: var(--font-ui-12-mini-reg); } .taskView__params__item task-term span.terms_label_today { color: var(--base-txt-accent); } .taskView__params__item task-term span.terms_label_warm { background: var(--base-hlt-b-pressed); } .taskView__params__item task-term span.terms_label_hot { background: var(--base-hlt-w-selected); color: var(--base-txt-btn-w); } .taskView__params__item task-term span.terms_label_related { border-radius: 12px; background: var(--base-hlt-g-hover); color: var(--base-txt-tertiary); } .taskView.taskView-comment_expanded .taskView__contentScrollOut { height: 0; flex-grow: 0; flex-shrink: 1; } .taskView.taskView-comment_expanded #comment_new { flex-grow: 1; flex-shrink: 1; height: 100%; overflow: hidden; } .taskView.taskView-descr_expanded .taskView__group-descr { position: absolute; top: 36px; left: 0; right: 0; bottom: 0; background: var(--base-cont-top); z-index: 15; overflow: hidden; display: flex; flex-direction: column; width: 100%; box-sizing: border-box; max-width: 940px; margin: auto; } .taskView.taskView-descr_expanded .taskView__group-descr .taskView__group__contentEdit { height: calc(100% - 90px); } .taskView.taskView-descr_expanded .taskView__content, .taskView__group-descr form .commentForm__content, .taskView__group-descr form .commentForm__content-wrapper, .taskView__group-descr form { height: 100%; } /*.taskView__group-descr form .commentForm__content {*/ /* flex-grow: 1;*/ /* display: flex;*/ /* flex-direction: column;*/ /*}*/ .taskView__editing-descr #comment_new, .taskView__editing-descr #comment_closed, .taskView__editing-descr .taskView__subtasks__wrapper, .taskView__editing-descr .commentListPanel__wrapper, .taskView__editing-descr .commentList { display: none; } .taskView-done.taskView-no_subtasks .taskView__subtasks__wrapper { display: none; } .taskView-done .commentList .empty_placeholder { display: none; } .taskView__descr .taskView__group__content .descr { font: var(--font-txt-15-large-reg); } .taskView__descr .button_place { opacity: 1; transition: opacity 0.15s linear; } .taskView__descr.collapsed .button_place { opacity: 0; pointer-events: none; } .taskView__editing-descr .taskView__content { height: 100%; display: flex; flex-direction: column; } .taskView__editing-descr .taskView__params { flex-grow: 1; flex-shrink: 2; overflow-y: auto; } .taskView__editing-descr .taskView__group__wrapper.taskView__descr { flex-grow: 2; flex-shrink: 0; overflow: hidden; box-shadow: 0 1px var(--base-line-tertiary) inset; height: 70%; } .taskView__params.scrollZone-top { box-shadow: 0 1px var(--base-line-tertiary) inset; } .taskView__editing-descr:not(.taskView-descr_expanded) .taskView__descr .taskView__group-descr { height: 100%; display: flex; flex-direction: column; } .taskView__descr .taskView__group__contentEdit { flex-grow: 1; flex-shrink: 1; overflow: hidden; padding: 0 24px 16px 24px; } .taskView__editing-descr .taskView__descr .taskView__group__head .name:hover { background: unset; color: var(--base-txt-primary); cursor: default !important; } .taskView__descr .page_content.descr .text-place { color: var(--base-txt-tertiary); /* font-style: italic; */ margin: 0 1px; } @media screen { .taskView__name,.taskView__params,.taskView__descr,.subtaskListPanel__wrapper,.taskView__subtasks__wrapper, .commentListPanel__wrapper,.commentList,.taskView #comment_new .commentForm__main,.taskView #comment_new .commentForm__reply, .commentListPanel > .in, .taskView__subtasks__head > .flex_row, .commentListPanel__mass { max-width: 940px; margin: 0 auto; width: 100%; box-sizing: border-box; } } .taskView__group-descr .page_content.descr[data-empty=no] { margin-bottom: 16px; } .taskView__group-descr .page_content.descr[data-empty=no] span[style*="background"]{ border-radius: 6px; } .taskView.taskView-done .taskView__name { text-decoration: line-through var(--base-txt-primary) 2px; } .taskView:not(.taskView-done) .idTask .status-done { display: none; } /*.taskView__group__wrapper:not(.taskView__params), .commentListPanel__wrapper .commentListPanel {*/ /* box-shadow: 0 0.5px 0px var(--base-line-tertiary) inset;*/ /*}*/ .taskView .commentListPanel .commentListPanel__filter { background: none; } .taskView__params__item.upgrade a .data_place .in { color: var(--base-txt-notice-minor); } .taskView__params__item.upgrade a .data_place > ws-icon:first-child { border-color: var(--base-txt-notice-minor); } .taskView__params__item.upgrade a .data_place > ws-icon:first-child svg { fill: var(--base-txt-notice-minor); } .taskView__group__wrapper.taskView__params:not(.collapsed) { padding-bottom: 24px; } .taskView__group__wrapper.taskView__descr:not(.collapsed) .taskView__group__content, .taskView__group__wrapper.taskView__subtasks__wrapper:not(.collapsed) .taskView__subtasks, .commentListPanel__wrapper { margin-bottom: 24px; } .taskView-comment_expanded .comments_after { display: none; } .taskView:not(.taskView-withCommentEdit) .commentList { padding-bottom: 80px; } .taskView-withCommentEdit .comment_unseen_popup { display: none; } .taskView__name ws-editable { width: initial; height: initial; overflow: initial; } .taskView__name ws-editable .editable-value { display: block; position: initial; height: initial; width: initial; transition: unset; } /*.taskView__name ws-editable .editable-value.editing {*/ /* padding: 1px 0;*/ /*}*/ .taskView__name .editable-value .view, .taskView__name .editable-value .input { border-radius: 8px; } .taskView__name .editable-value .input { padding: 0; } .taskView__name .editable-value .input.focus { box-shadow: var(--shadow-brd-focus); } .taskView__name .editable-value:not(.readonly):not(.errored) .view:hover { background: none; box-shadow: var(--shadow-brd-enable-hover); } .taskView__name .editable-value.errored .input.focus, .taskView__name .editable-value.errored .input:hover { box-shadow: var(--shadow-brd-error-focus); } .taskView__name .editable-value.errored .input { box-shadow: var(--shadow-brd-error); } .taskView__name .editable-value .input input { font: var(--font-ui-22-title-1-semi); margin: 0; padding: 8px; border-radius: 8px; height: initial; } .taskView__name .editable-value textarea { font: var(--font-ui-22-title-1-semi); resize: none; width: 100%; margin: 0; padding: 8px; border: none; overflow: hidden; border-radius: 8px; background: transparent; box-sizing: border-box; } .taskView__name .editable-value .input .counter, .taskView__name .editable-value .view .counter { position: absolute; top: 4px; left: 4px; } .taskView__resizeHandler { position: absolute; top: 0; width: 9px; bottom: 0; z-index: 5; left: -5px; cursor: ew-resize; } .bodyWithMenu .taskView__resizeHandler, .withModal .taskView__resizeHandler, .taskView__wrapper-withoutFullscreen .taskView__resizeHandler {display:none} @media (max-width: 1300px) { .taskView__resizeHandler {display:none} } .taskView__resizeHandler:hover:after { display: block; content: ''; position: absolute; top: 0; bottom: 0; left: 3px; width: 3px; background: var(--base-line-tertiary); opacity: 0.5; } .body-dragInProgress .taskView__resizeHandler:hover:after { background: none; } .body-dragInProgress .taskView .hoverZone, .body-dragInProgress .taskView__params__item .param, .body-dragInProgress .taskView__params__hide, .body-dragInProgress .taskView__params__add, .body-dragInProgress .taskView__name, .body-dragInProgress .taskView__group__head .name, .body-dragInProgress .taskView .chip, .body-dragInProgress .taskView ws-btn, .body-dragInProgress .taskView .taskView__params__item > ws-icon, .body-dragInProgress.withTaskView main, .body-dragInProgress.withTaskView .sidePanel__wrapper { pointer-events: none; } @media (max-width: 840px) { .taskView__wrapper.top-layer { padding: 0; } } .commentForm .mobile-head { display: none; } @media (min-width: 481px) { .taskView .taskView__head--mobile, .taskView .mobile-head--taskView { display: none; } } @media (max-width: 480px) { .taskView__subtasks__head .config span, .taskView__params__item > ws-icon[name="drag_indicator"], .taskView__head .btn-subtasks, .taskView:not(.taskView-chat) .taskView__head .taskView__viewing, .taskView:not(.taskView-chat) .taskView__head .taskView__typing, .commentListPanel .commentListPanel__filter .commentListPanel__filter__possible > *:not([data-filter="search"]) { display: none !important; } .taskView__head .taskView__typing .typing { font-size: 0; } /* .taskView .taskView__head > .in_def { display: none !important; } .taskView .taskView__head > .in { display: flex !important; opacity: 1 !important; animation: none !important; } */ .taskView .taskView__head--desktop { display: none; } .taskView .mobile-head--taskView .mobile-head__content, .taskView .mobile-head--taskView .mobile-head__title { height: 100%; } .taskView .mobile-head--taskView .mobile-head__title > .in[data-task] { display: none; } /* .taskView .mobile-head--taskView .mobile-head__title > .in_def {} */ .taskView.taskView-taskInvisible .mobile-head--taskView .mobile-head__title > .in_def { display: none; } .taskView.taskView-taskInvisible .mobile-head--taskView .mobile-head__title > .in[data-task] { display: block; } .taskView .mobile-head--taskView { box-shadow: unset; } .taskView .taskView__head--mobile { height: 48px; box-shadow: var(--mobile-head-hairline); opacity: 1; transition: top 0.2s ease-out, opacity 0.2s ease-out; z-index: 6; padding: 0 16px 0 8px !important; width: 100%; box-sizing: border-box; position: absolute; top: 44px; background: var(--mobile-head-bg-color-gradient-opac); backdrop-filter: blur(4px); } .taskView.taskView-withCommentFilter:not(.taskView-headMobileHidden) .commentListPanel, .taskView.taskView-withCommentMass:not(.taskView-headMobileHidden) .commentListPanel, .taskView.taskView-comment_massInvisible:not(.taskView-headMobileHidden) .commentListPanel { opacity: 0; transition: opacity 0.1s linear 0.1s; } body.w_keyboard .taskView .mobile-head--taskView, .taskView .mobile-head--taskView { z-index: 7; } .taskView:not(.taskView-chat, .taskView-withoutHeadMobile) .taskView__content { padding-top: 48px; } .taskView.taskView-withoutHeadMobile:not(.taskView-comment_massInvisible) .mobile-head--taskView, .taskView.taskView-headMobileHidden:not(.taskView-comment_massInvisible) .mobile-head--taskView { box-shadow: var(--mobile-head-hairline); } .taskView.taskView-withoutHeadMobile .taskView__head--mobile, .taskView.taskView-headMobileHidden .taskView__head--mobile { top: -5px; opacity: 1; transition-timing-function: ease-in, ease-in; } .taskView__params__item .in:not(.flex_row-scrollable) { overflow: hidden; } .taskView__subtasks__content { padding: 8px 16px 0; } .taskView__group__head, .taskView__params, .taskView__subtasks__head > .flex_row { padding: 8px 16px 8px 16px; } .taskView__subtasks__head { padding: 0; } .commentListPanel .commentListPanel__filter { padding: 0 16px !important; } .taskView__subtasks__foot { padding: 0 8px; } .taskView__head ~ .taskView__head { padding: 10px 16px; } .taskView__intro-description { padding: 24px; } .taskView__params__item[data-key=reminders] .data .reminderListing, .taskView__params__item[data-key=meets] .data .meetListing, .taskView__params__item[data-key=relations] .data .relationsList { min-width: 0; } .taskView__params__item[data-key=reminders] .data .reminderListing__item, .taskView__params__item[data-key=meets] .data .meetListing__item, .taskView__params__item[data-key=relations] .data .relationsListing__item { min-width: 0; } .taskView__params__item[data-key=reminders] .data, .taskView__params__item[data-key=meets] .data, .taskView__params__item[data-key=relations] .data { max-width: 100%; box-sizing: border-box; } /* new style mobile header */ body.taskViewCommentExpanded .taskView__wrapper.taskView__wrapper.top-layer { z-index: 1032; } .taskView-comment_expanded { .commentForm { border-top: none; } .commentForm-start .mobile-head { display: flex; } .commentForm__buttons .place_button-actions { display: none; } #comment_new { position: absolute; inset: 0; z-index: 8; } .commentForm { display: flex; flex-direction: column; } .commentForm__reply { padding: 4px 16px; } .commentForm__main { padding: 0; min-height: 0; } .commentForm__content-wrapper { border: unset; } /* .commentForm.commentForm-start { padding: 0; } */ .commentForm__left { display: none; } .commentForm__right { width: 100%; padding: 0; } .commentForm__content__editor { flex-grow: 1; } .commentForm__content__editor .editor__data { height: calc(100% - 100px); } .commentForm__foot { padding-left: 16px; padding-right: 16px; } .commentForm__foot-placeholder, .commentForm__foot-keyInfo { display: none; } .commentForm__content-wrapper, .commentForm__content .editor__toolbar-fixed { border-radius: unset; } } body:not(.w_keyboard) .taskView-comment_expanded .commentForm { padding-bottom: var(--sa-bot); } } @media (max-width: 400px) { .taskView__head .buts ws-btn:not(:only-child) button > span { display: none; } .taskView__group__head .button_place ws-btn:not(:only-child) button > span { display: none; } } .commentList .floatIcons { z-index: 4; } .taskView__head .taskView__typing.taskView__typing-active + .taskView__viewing { display: none !important; } .taskView__typing__item { padding: 0 6px; border: none; } .taskView__typing .in { padding: 0; display: none; } .taskView__typing .typing { padding-left: 12px; font: 10px / 20px var(--font-base); } .taskView__typing__item .av_sm { box-shadow: 0 0 0 1px var(--base-cont-top), 0 0 0 2px var(--base-txt-link-minor); } .taskView__typing__item .place { width: 20px; height: 20px; } .taskView__typing__item span.av_sm, .taskView__typing__item span img { transform: scale(0.8333); transform-origin: 0 0; } .taskView__head .minimize, .taskView__head .close { --hint-dir: bottom_left; } @media print { .taskView__subtasks__head .button_place, .taskView__params__item-costs .chip, .taskView__params__item ws-icon[name=plus_sm] { display: none !important; } } .taskView .subtaskListPanel__mass, .taskView .commentListPanel__mass { overflow: hidden; } .taskView.taskView-skeleton { .taskView__name .in {height: 32px;} .taskView__params__item {pointer-events: none;} .taskView__params__item .in {height: 14px; width: 100%;} .taskView__subtasks__content .in, .taskView__descr .page_content .in {height: 14px;} .taskView__tree .ws-skeleton-place {width: 50px;height: 12px;margin: 0;} .taskView__params {padding-left: 40px;} } .taskView.taskView-chat.taskView-skeleton { .taskView__head .name .in {width: 180px;height: 22px;} .taskView__intro-content { min-height: 30vh; background: linear-gradient(180deg, var(--base-cont-low, #E8E2F8) 0%, var(--base-cont-top, #FFF) 100%); .title h1 {height: 20px;width: 50%;} .info .in {height: 18px;margin: 14px auto;width: 65%;} } } .taskView-skeletonPrev { .taskView__head .taskView__head--mobile, .taskView__head + .taskView__head, #comment_new, .taskView__contentScrollOut { opacity: .5; pointer-events: none; } } #timerView__contentScrollOut { overflow: hidden; background: var(--base-cont-mod-low); border-top: var(--screen-px) solid var(--base-line-tertiary); } @media (min-width: 481px) { .timerView__wrapper { position: fixed; bottom: -100%; right: 20px; z-index: 1020; background: var(--base-cont-mod-low); width: 416px; max-height: 100%; box-shadow: var(--shadow-tray-major); border-radius: 12px 12px 0 0; transition: all 0.3s ease; } .timerView__wrapper.top-layer { z-index: 1021; } .timerView__wrapper-active { bottom: 0 } .timerView { max-height: 65vh; height: 590px; } } @media (max-width: 480px) { .timerView__wrapper { display: none; } body.mobileTimerView main { display: none; } body.mobileTimerView .timerView__wrapper { display: block; height: 100%; position: relative; background: var(--base-cont-mod-top); } .timerView__wrapper.top-layer { z-index: 1032; } .timerView { height: 100%; } } .timerView { min-height: 352px; } .timerView__head { padding: 6px 6px 0 6px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } .timerView__head .timerView__head-ava, .timerView__head .timerView__head-loader { width: 32px; height: 32px; display: flex; justify-content: center; align-items: center } .timerView:not(.timerView--loading) .timerView__head-loader { display: none; } .modal:not(.modal--timerViewLoading) .modal__header .timerView__head-loader, .modal.modal--timerViewLoading:has(.ws-loading) .modal__header .timerView__head-loader { display: none !important; } .modal[data-group="timerView"] .modal__header__tabs > a.act:after { background: var(--base-hlt-g-invert); } .modal[data-group="timerView"] .modal__header .timerView__head-ava { width: 36px; height: 36px; .avaWrapper { display: block; width: 36px; height: 36px; .av_nm { transform: scale(calc(36 / 48)); transform-origin: 0 0; border-radius: calc(8px / calc(36 / 48)); transition: box-shadow 0.15s ease; } &:hover .av_nm { box-shadow: var(--shadow-brd-focus-alt); } } } .modal[data-group="timerView"] .modal__header .timerView__head-loader { position: absolute; left: 56px; display: flex; justify-content: center; width: 32px; } .timerView__head .timerView__head-ava .av_nm { transform: scale(calc(28 / 48)); transform-origin: 0 0; border-radius: calc(8px / calc(28 / 48)); } .timerView__head > .in { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .timerView__head .avaWrapper { display: block; width: 28px; height: 28px; } .timerView__head > .buttons { margin-left: auto; } .timerView__head > .buttons ws-btn { padding: 2px; } .timerView__date { display: flex; justify-content: center; padding: 14px 0 2px; ws-btn.date .btns-row { gap: 6px; } ws-btn.date .btns-row .btn { flex-shrink: 0; width: unset; } ws-btn.date .btns-row .btn { span:not([class]) { font: var(--font-ui-12-mini-med); } &.btn-solid { span:not([class]) { font: var(--font-ui-12-mini-bold); } } } .btns-row button:nth-child(2) span { width: 136px; } .btns-row button:nth-child(2) span.ws-loading__loader { width: unset; } } .timerView__tabs { padding: 0 20px; justify-content:center; box-shadow: 0 var(--screen-px) var(--base-line-secondary); } .timerView__progress { padding: 8px 20px 16px; height: 20px; } .modal .timerView__progress { margin-top: 0; } .timerView__progress ws-icon { width: 32px; --icon-size: 16px; --icon-color: var(--base-txt-tertiary); } .timerView__progress progress-bar2 { border:1px solid var(--base-line-secondary); padding:3px; border-radius:8px; height:8px; display: block; } .timerView__progress progress-bar2 .progress2 { display: block; height: 8px; background: var(--base-cont-mod-trans-low); border-radius: 4px; overflow: hidden; margin:0 0 -8px; } .timerView__progress progress-bar2 .progress2_over.progress2_hlt_b, .timerView__progress progress-bar2 .progress2_over2.progress2_hlt_b { box-shadow: 0 8px var(--base-hlt-b-invert) inset; } .timerView__progress progress-bar2 .progress2_over.progress2_hlt_g, .timerView__progress progress-bar2 .progress2_over2.progress2_hlt_g { box-shadow: 0 8px var(--base-hlt-g-invert) inset; } .timerView__progress progress-bar2 i { width:12.5%; border-right:2px solid var(--base-cont-mod-top); height: 8px; float:left; box-sizing:border-box } .timerView__progress progress-bar2 i:last-child { margin-right:-100%; } .timerView__progress progress-bar2 .progress2 div { height: 8px !important; } .timerView__head .space, .timerView__head ws-icon { width: 28px; height: 28px; display: flex; justify-content: center; align-items: center; border-radius: 4px; fill: var(--colors-graphite-700); font: 14px/20px var(--font-base); font-weight: 400; } .timerView__head .space ~ .space { margin-left:4px; } .timerView__head .space ws-icon svg { width: 16px; height: 16px; } .timerView__head .minimize { /*cursor: zoom-out;*/ /*margin-right: 4px;*/ } .timerView__head .space:hover { background: var(--colors-alpha-dark-05); } .timerView__head .space:hover:active { background: var(--colors-alpha-dark-10); } .timerView__head > .in { padding: 0 8px; color: var(--base-txt-primary); font: var(--font-ui-16-title-3-bold); } .timerView__head > .in .date { gap: 4px; } .timerView__head .loader_sm { display: none; border: 1px solid var(--colors-graphite-700); border-left-color: transparent; width: 12px; height: 12px } .timerView__head .costs { color: var(--base-hlt-b-invert); background: var(--base-hlt-b-notr-selected); height: 20px; border-radius: 4px; font: var(--font-ui-12-mini-bold); display: inline-flex; align-items: center; padding: 0 4px; margin: 0 0 0 8px; } .timerView__content { padding: 12px 20px; min-height: 156px; } .timerList__item, .timerList__itemAdd { padding: 6px; background: var(--base-cont-mod-top); margin:0 0 6px; box-shadow: var(--shadow-cont-minor-outline); border-radius: 12px; position: relative; &.completed { cursor: default; } } .timerList__item-failed { background: var(--base-cont-mod-mid); } .timerList__item-failed .in { color: var(--base-txt-tertiary); /* text-decoration:line-through; */ /* text-decoration-color: var(--base-hlt-w-invert-minor); */ } .timerList__item-primary { padding: 12px 6px 12px; } .timerList__item:last-child { margin-bottom: 0; } .timerList__item:not(.timerList__item-primary) .data { display: none; } .timerList__item .space-icon ws-icon.proj_color { width: 24px; height: 24px; border-radius: 5px; } .timerList__item .data { padding: 0 4px; } .timerList__item span.link { color: inherit; overflow: hidden; border-radius: 8px; height: 28px; } .timerList__item span.link:hover { background: var(--base-hlt-g-hover); } .timerList__item:not(.timerList__item-primary) span.link { pointer-events: none; } .timerList__item span.link ws-icon[name=open_in_new] { display: none } .timerList__item span.link:hover ws-icon[name=open_in_new], .timerList__item-primary span.link ws-icon[name=open_in_new] { display: flex; width: 28px; } .timerList__item .loader_sm { display: none } .timerList__item ws-icon[name=open_in_new] { --icon-color: var(--base-txt-act-minor); } .timerList__item .costs { display: flex; height: 24px; min-width: 0; border-radius: 5px; margin: 0 2px 0 8px; --icon-color: var(--base-txt-btn-a); color: var(--base-txt-btn-a); background: var(--base-hlt-selected); justify-content: space-between; align-items: center; font-variant-numeric: tabular-nums; padding: 0 6px; } .timerList__item .costs-empty { background: var(--base-line-ghost); color: var(--base-txt-secondary); --icon-color: var(--base-txt-secondary); } .timerList__item .costs-noText { width: auto; } .timerList__item .costs ws-icon { --icon-size:16px; } .timerList__item .costs .in, .timerList__item .costs-timer b { font: var(--font-ui-11-micro-med); color: inherit; } .timerList__item .costs-fromTimer { --icon-color: var(--base-txt-btn-b); background: var(--base-hlt-b-selected); color: var(--base-txt-btn-b); } .timerList__item-primary .costs-fromTimer { display: none } .timerList__item .costs-timer { --icon-color: var(--white-accent); background: var(--costs-timer-play); } .timerList__item-primary .costs-timer { display: none } .timerList__item .costs-timer b { color: var(--white-accent); font-variant-numeric: tabular-nums; } .timerList__item .costs-timer b i { font: var(--font-ui-10-nano-reg); color: var(--white-accent); font-variant-numeric: tabular-nums; margin: 0; opacity: 0.7 } .timerList__item .costs-plan { background: none; color: var(--base-txt-tertiary); } .timerList__item .costs[data-over=warning] { background: var(--costs-timer-warning); color: var(--white-accent); --icon-color: var(--white-accent); } .timerList__item .costs[data-over=alert] { background: var(--costs-timer-alert); color: var(--white-accent); --icon-color: var(--white-accent); } .timerList__item .timer_buttons { gap: 8px } .timerList__item .timer_buttons .timer, .timerList__item .timer_buttons .pause { height:32px; color: var(--white-accent); --icon-color: var(--white-accent); background: var(--costs-timer-play); display: flex; justify-content: center; align-items: center; border-radius:7px; box-shadow: var(--shadow-brd-enable); gap: 4px; font:14px/16px var(--font-base) } .timerList__item .timer_buttons .pause { background: var(--base-hlt-b-invert); } .timerList__item .timer_buttons .timer b, .timerList__item .timer_buttons .pause b { font: bold 14px/16px var(--font-base); font-variant-numeric: tabular-nums; } .timerList__item .timer_buttons .timer i { margin: 0; color: var(--white-accent); font: 11px/16px var(--font-base); font-variant-numeric: tabular-nums; vertical-align: 0; opacity: 0.7 } .timerList__item .timer_buttons .timer strong { display: none; } .taskView__timer, .taskView__timer:hover { background: var(--costs-timer-play); color: var(--white-primary); width:84px; height:32px; display: flex; align-items: center; justify-content: center; border-radius: 7px; font: 13px/20px var(--font-mono); box-shadow: 0 0 0 1px var(--inp-cont-brd) inset; cursor: pointer; } .timerList__item .timer_buttons .timer[data-over=warning], .taskView__timer[data-over=warning] { background: var(--costs-timer-warning) } .timerList__item .timer_buttons .timer[data-over=alert], .taskView__timer[data-over=alert] { background: var(--costs-timer-alert) } .taskView__timer i { font: 13px/20px var(--font-mono); opacity: 0.5 } .timerList__buttons { padding: 8px 0; } .timerList__item .in { align-items: center; } .timerList__item:not(:hover) ws-btn[right-icon="trash_can"] { display: none; } .timerList__item:hover ws-btn[right-icon="trash_can"] ~ * { display: none; } .timerList__itemDivider { border-top:2px dashed var(--base-line-secondary); width:150px; margin:16px auto } .timerList__item progress-pie { width:20px; height: 20px; display: block; margin:2px 8px 2px 4px; } .timerList__item i { font:inherit; color:var(--base-txt-muted); margin-left: 4px; } .timerList__item .time { gap:4px; margin: 0 4px 0 4px; } .timerList__item .time span { font: var(--font-ui-13-small-semi); background: var(--base-cont-mod-low); padding:2px; border-radius: 5px; display:inline-flex; width:40px; justify-content: center; cursor: pointer; } .timerList__itemAdd { --icon-color: var(--base-txt-tertiary); border: 1px dashed var(--base-line-primary) !important; box-shadow: none; box-sizing: border-box; padding: 6px; margin-top: 16px; /* 12px + 4px */ background: none; } .timerList__itemAdd ws-icon[name*=info] { --icon-size: 16px; } .timerList__itemAdd ws-btn { padding: 2px; } .timerList__itemAdd[data-action="add_plan"]:hover .in { color: var(--base-txt-primary); } .timerList__itemAdd .in { font: var(--font-ui-13-small-reg); padding: 0 4px; align-items: center; color: var(--base-txt-tertiary); } .timerList__itemAdd[data-action="add_fact"] .in { color: var(--base-txt-primary); } .timerList__itemAdd[data-action="add_fact"] ws-btn svg { fill: var(--base-txt-primary); } .timerView ws-slider { background: var(--base-cont-mod-trans-low); } /*--------------------------------------------------------------------------------------------------------------------*/ .timerList__dropPlace { height: 2px; margin: -3px -10px 1px -10px; position: relative; z-index: 1; } .timerList__dropPlace-hover { background: var(--base-hlt-b-invert-major); } body.body-dragInProgress .timerView__wrapper.drag_over, body.body-dragInProgress .timerView__wrapper:has(.timerList__dropPlace-hover) { box-shadow:0 0 0 3px var(--base-hlt-b-invert-major); } .timerList { margin: -12px -20px 0 -20px; padding: 12px 20px 0 20px; border-bottom: var(--screen-px) solid transparent; } .modal .timerList { margin: -12px -20px 0 -20px !important; } .timerView[data-type="fact"] .timerView__content { padding-bottom: 0; } .timerView[data-type="plan"] .timerView__content { padding-bottom: max(12px, var(--sa-bot)); } .modal .timerView[data-type="plan"] .timerView__content { padding-bottom: max(24px, var(--sa-bot)); } .timerView[data-type="fact"] .timerList { padding-bottom: max(24px, calc(12px + var(--sa-bot))); border: unset; } .timerView[data-type="plan"] .timerList { padding-bottom: 12px; } .timerView[data-type="plan"] .timerList.scrollZone-bottom { border-bottom: var(--screen-px) solid var(--base-line-secondary); box-shadow: unset; } body.body-dragInProgress .timerList { pointer-events: none } .timerList__item ws-icon[name="drag_indicator"] { position: absolute; left: -20px; top: 10px; display: none } .timerList__item .costs > .in { font-family: monospace; } .timerList__item.drag_clone { display:none; } .timerView-withDrag .timerList__item:hover ws-icon[name="drag_indicator"] { display: block } .timerView-withDrag .sidePanel__list__item[data-task] { cursor: grab; } #timerStopGoMenu { padding-bottom: 0; .timer { height: 16px; position: relative; margin: 0 6px 0 0; font: var(--font-ui-13-small-reg); font-family: monospace; font-variant-numeric: tabular-nums; display: block; background: var(--costs-timer-play); color: var(--white-accent); padding: 2px 6px; text-align: left; border-radius: 5px; b { font: var(--font-ui-11-micro-bold); } i { opacity: 0.7; font: var(--font-ui-10-nano-reg); font-variant-numeric: tabular-nums; margin: 0 0 0 2px; font-style: normal; } &[data-over="warning"] { background: var(--costs-timer-warning); } &[data-over="alert"] { background: var(--costs-timer-alert); } } .timer ~ span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: var(--font-ui-15-large-reg); } a .timer ~ ws-icon { opacity: 0.2; } a:hover .timer ~ ws-icon { opacity: 1; } } .timerList__item .timer_buttons .pause .not_aval { display: none; } .no_timers { .timerList__item .timer_buttons .pause .aval, .timerList__item .timer_buttons .pause ws-icon, .timerList__item .costs-fromTimer:not(.costs-isTimer), .timerList__item .costs-fromTimer.costs-isTimer ws-icon { display: none; } .timerList__item .costs-fromTimer.costs-isTimer, .timerList__item .timer_buttons .pause { pointer-events: none; opacity: 0.75; } .timerList__item .timer_buttons .pause .not_aval { display: inline; } } .planPage { max-width: 1020px; margin: 0 auto; padding-top: 8px; } .planPage__content { gap: 40px; } .planPage .setupBlock__info-b .setupBlock__text { color: var(--colorize-lbl-txt-primary); } .planPage__details { display: flex; width: 100%; margin: 0; padding: 32px 0; } .planPage__details__group { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 8px; } .planPage__details__group ws-icon[name="input-circle-solid-cancel"] svg { fill: var(--base-btn-alert-primary-minor); } .planPage__details__group ws-btn button.btn.btn-promo:not(:hover) { background: var(--colorize-lbl-yelloworange-bg); } .planPage__details__group ws-btn button.btn.btn-promo:focus:not(:hover) { color: var(--base-btn-notice-major); ws-icon svg { fill: var(--base-btn-notice-major) !important; } } .planPage__details__group:not(:last-child) { border-right: 1px solid var(--base-line-tertiary); } .planPage__details__group__title { font: var(--font-ui-14-regular-reg); color: var(--base-txt-primary); } .planPage__details__group__text { display: flex; align-items: center; font: var(--font-ui-22-title-1-reg); color: var(--base-txt-accent); gap: 4px; } .planPage__details__group__badge { display: inline-flex; align-items: center; gap: 2px; margin-left: 8px; padding: 0 4px; border-radius: 4px; background: var(--base-hlt-g-hover); font: var(--font-ui-12-mini-semi); color: var(--base-txt-tertiary); } .planPage__details__group__badge-red { background: var(--base-hlt-w-selected); color: var(--base-txt-btn-w); } .planPage__details__group__badge-old { background: var(--base-hlt-g-pressed); color: var(--base-txt-accent); } .planPage__details__group__badge ws-icon { width: 14px; height: 14px; --icon-color: var(--base-txt-tertiary); } .planPage__details__group__badge-red ws-icon { --icon-color: var(--base-txt-btn-w); } .planPage__details__group__badge-old ws-icon { --icon-color: var(--base-txt-accent); } .planPage__details__group ws-btn { margin-top: 8px; } .planPage__details__group ws-btn ws-icon[name="award-fill"] svg { fill: var(--colorize-orange); } .planPage__quotas { display: flex; width: 100%; margin: 0; } .planPage__quotas__group { flex: 1 1 0; padding: 24px 24px; } .planPage__quotas__group:not(:last-child) { border-right: 1px solid var(--base-line-tertiary); } .planPage__quotas__group__title { display: flex; align-items: center; gap: 12px; } .planPage__quotas__group__title .in { flex: 1 1 0; font: var(--font-ui-14-regular-reg); color: var(--base-txt-primary); } .planPage__quotas__group__title ws-icon { --icon-color: var(--base-txt-secondary); } .planPage__quotas__group__title ws-icon[name="hint"]:not(:hover) svg { fill: var(--base-txt-muted); } .planPage__quotas__group__number { display: flex; align-items: center; gap: 8px; padding: 24px 0 8px; } .planPage__quotas__group__number .num_current { font: var(--font-ui-32-title-large-med); color: var(--base-txt-accent); } .planPage__quotas__group__number .num_separator { font: var(--font-ui-16-title-3-reg); color: var(--base-txt-muted); } .planPage__quotas__group__number .num_max { font: var(--font-ui-32-title-large-reg); color: var(--base-txt-muted); } .planPage__quotas__group__number .num_max:after, .planPage__quotas__group__number .num_current:after { content: attr(data-size); padding-left: 8px; font: var(--font-ui-16-title-3-med); } .planPage__quotas__group__progress { display: flex; flex-direction: column; gap: 4px; } .planPage__quotas__group__progress .bar_text { font: var(--font-ui-12-mini-reg); color: var(--base-txt-tertiary); } .planPage__quotas__group__progress .bar_percent { font: var(--font-ui-12-mini-bold); color: var(--base-txt-secondary); } .planPage__quotas__group__progress .bar_line { position: relative; height: 10px; border-radius: 4px; background-image: repeating-linear-gradient(45deg, var(--base-cont-top), var(--base-cont-top) 3px, var(--base-cont-trans-low) 3px, var(--base-cont-trans-low) 5px); } .planPage__quotas__group__progress .bar_fill { position: absolute; height: 10px; border-radius: 4px; background: var(--colorize-lbl-lightgrey); box-shadow: 0 0 0 2px var(--base-cont-top), 0 0 0 1px var(--colors-alpha-dark-10) inset; } .planPage__quotas__group__progress .bar_fill-notice { background: var(--colors-amber-alpha-600-a60); } .planPage__quotas__group__progress .bar_fill-alert { background: var(--base-hlt-w-focus); } .planPage__quotas__group__btns { display: flex; justify-content: center; gap: 8px; padding: 20px 0 4px; } .planPage__quotas__group .unlimited { font: var(--font-ui-12-mini-reg); color: var(--base-txt-secondary); } .planPage__help { display: flex; align-items: center; padding: 12px; border-radius: 12px; background: var(--base-cont-low); } .planPage__help .in { flex: 1 1 auto; padding-left: 8px; font: var(--font-ui-13-small-reg); color: var(--base-txt-secondary); } .planChange__card { margin: 32px 6px 6px; padding: 24px; width: 100%; border-radius: 16px; background: var(--base-cont-top); box-shadow: var(--shadow-cont-minor-outline); } .planChange__card-free { box-shadow: 0 0 0 1px var(--base-line-tertiary) inset; background: var(--base-cont-low); } .planChange__card-downgrade { box-shadow: 0 0 0 1px var(--base-line-tertiary) inset; background: transparent; } .planChange__card-recommend { margin-top: 0; box-shadow: 0 0 0 1px var(--base-txt-btn-b) inset, var(--shadow-cont-major-outline); background: var(--base-cont-top-elevated); } .planChange__card-recommend:before { content: attr(data-recom); position: relative; top: -23px; display: inline-flex; align-items: center; justify-content: center; margin-left: -24px; width: calc(100% + 48px); height: 32px; border-radius: 16px 16px 0 0; background: var(--base-hlt-b-easy); font: var(--font-ui-10-nano-bold); color: var(--base-txt-btn-b); text-transform: uppercase; } .planChange__card-current { box-shadow: 0 0 0 2px var(--base-txt-primary), 0 0 0 1px var(--base-txt-primary) inset; } .planChange__card .line { margin: 0 -24px; background: var(--base-line-tertiary); } .planChange__card ws-btn { width: 100%; } .planChange__card__header { gap: 8px; color: var(--base-txt-secondary); } .planChange__card__header > span { height: 64px; } .planChange__card__title { font: var(--font-ui-22-title-1-med); gap: 8px; } .planChange__card__title ws-btn.fake { width: auto; } .planChange__card__title .badge { padding: 0 8px; border-radius: 12px; background: var(--base-txt-secondary); font: var(--font-ui-12-mini-med); color: var(--base-txt-alt-light); font: var(--font-ui-12-mini-med); } .planChange__card__title ws-icon[name*="award"] { --icon-color: var(--base-txt-notice-minor); } .planChange__card__title:has(.badge ~ ws-btn.fake){ font: var(--font-ui-18-title-2-med); gap: 4px; } .planChange__card__title:has(.badge ~ ws-btn.fake) .flex_gap { display: none; } .planChange__card__title:has(.badge ~ ws-btn.fake) .badge { padding: 0 6px; } .planChange__card__price { gap: 12px; padding: 20px 0; } .planChange__card__price .numbers { align-items: center; gap: 12px; font: var(--font-ui-14-regular-bold); color: var(--base-txt-secondary); } .planChange__card__price .numbers .number_pay { font: 500 56px/56px var(--font-base); color: var(--base-txt-accent); } .planChange__card__price .numbers ~ .numbers { gap: 6px; margin:8px 0 0 } .planChange__card__price .description ~ .description { margin:-4px 0 -16px; gap: 0; } .planChange__card__price .numbers ~ .numbers .number_pay { font: 600 26px/26px var(--font-base); } .planChange__card-free .planChange__card__price .numbers .number_pay { color: var(--base-txt-tertiary); } .planChange__card-recommend .planChange__card__price .numbers .number_pay, .planChange__card__price .numbers .number_pay.upgrade { color: var(--base-txt-btn-b); } .planChange__card__price .numbers .number_full { font: var(--font-ui-16-title-3-semi); text-decoration: line-through; text-decoration-thickness: 2px; } .planChange__card__price .description { gap: 4px; height: 40px; } .planChange__card-free .planChange__card__price .numbers .r { margin-top: 20px; color: var(--base-txt-muted); } .planChange__card__price .description span:first-child { font: var(--font-ui-11-micro-reg); color: var(--base-txt-secondary); } .planChange__card-switch { transition: box-shadow 0.3s ease-in-out; } .planChange__card-switch:hover { box-shadow: var(--shadow-cont-major), 0 0 0 1px var(--base-line-primary); } .planChange__card-switch .planChange__card__price .description span:first-child::after { content: attr(data-after-text); opacity: 0; transition: opacity 0.5s ease-in-out; white-space: nowrap; } .planChange__card-switch:has(ws-btn:hover) .planChange__card__price .description span:first-child::after { opacity: 1; } .planChange__card__price .description span.sw_plan_monthly, .planChange__card__price .description span.sw_plan_yearly { align-self: flex-start; display: block; padding: 2px 6px; border-radius: 6px; background: var(--base-hlt-b-hover); font: var(--font-ui-11-micro-med); color: var(--base-txt-btn-b); cursor: pointer; &:hover { background: var(--base-hlt-b-selected); } } .planChange__card__price .description span.sw_plan_monthly { display: none; } .planChange__card__quotas { gap: 4px; padding: 24px 0; } .planChange__card__quotas__item { gap: 10px; padding: 6px 0; } .planChange__card__quotas__item ws-icon { width: 16px; height: 16px; --icon-size: 16px; --icon-color: var(--base-txt-accent); } .planChange__card__quotas__item ws-icon[name=exclam_triangle-line] { --icon-color: var(--base-txt-notice-minor); } .planChange__card__quotas__item .quota_number { font: var(--font-ui-13-small-semi); } .planChange__card__quotas__item .quota_addon { font: var(--font-ui-13-small-reg); } .planChange__card__features { padding-top: 24px; /* height: 468px; */ min-height: 330px; } .planChange__card__features .line { margin: 0 0 12px; background: var(--base-line-secondary); } .planChange__card__features__item { gap: 8px; padding: 6px 0; } .planChange__card__features__item:has(ws-icon[name="close_sm"]) { color: var(--base-txt-tertiary); } .planChange__card__features__item ws-icon[name="check_alt"] { --icon-color: var(--base-txt-btn-c); margin-left: -2px; } .planChange__card__features__item ws-icon[name="close_sm"] { --icon-color: var(--base-txt-tertiary); margin-left: -2px; } .planChange__notice { margin-left: 6px; padding: 24px 0; color: var(--base-txt-tertiary); } .planChange__notice ~ .planChange__notice { padding-top:0; } .planChange { font: var(--font-ui-12-mini-reg); color: var(--base-txt-primary); display: flex; flex-direction: column; align-items: center; width: 100%; } .planChange:has(.planChange__content-wrapper.scrollZone-top) .planChange__header { cursor: n-resize; } .planChange__header { gap: 8px; margin: 0 auto; padding: 20px 0 16px; width: 100%; max-width: 1020px; box-sizing: border-box; color: var(--base-txt-secondary); } .planChange__header > ws-btn[right-icon="arrows/arrow_edge_sm-right"] { position: absolute; left: 17px; width: 40px; height: 40px; --icon-size: 24px; --icon-color: var(--base-txt-tertiary); cursor: pointer; } .planChange__header ws-btn:not([right-icon="arrows/arrow_edge_sm-right"]) { margin-left: 12px; } .planChange__title { font: var(--font-ui-32-title-large-med); color: var(--base-txt-accent); } .planChange__content-wrapper { width: 100%; &.scrollZone-top { box-shadow: 0 -1px 0 var(--base-line-tertiary); } } .planChange__content { position: relative; margin: 0 auto; padding-bottom: 8px; width: 1020px; display: flex; flex-direction: column; } .planChange__content:before, .planChange__content:after { content: ""; display: none; position: absolute; top: 0; z-index: 1; width: 48px; height: 100%; background: linear-gradient(90deg,var(--base-cont-low) 30%,transparent 100%); } .planChange__content:after { right: 0; transform: scaleX(-1); } .planChange__slider { justify-content: center; padding: 16px 0 24px; } .planChange__slider ws-slider { width: 280px; background: var(--base-cont-mod-trans-low); } .planChange__slider ws-slider a { justify-content: center; width: 140px; } .planChange__slider ws-slider a span:last-child { padding: 0; } .planChange__slider ws-slider span[data-discount]:after { content: ' (-'attr(data-discount)'%)'; } /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; margin: 0; padding: 0; overflow: hidden; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: hand; } .slick-slider .slick-list, .slick-slider .slick-track { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { content: ""; display: table; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { float: left; display: none; height: 100%; min-height: 1px; } [dir=rtl] .slick-slide { float: right; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } .planChange__cards .slick-track { display: flex; padding: 2px 0; } .planChange__cards .slick-dots { position: absolute; top: -26px; left: 50%; display: none; margin: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); text-wrap: nowrap; } .planChange__cards .slick-dots li { display: inline-block; width: 40px; height: 6px; border-radius: 4px; background: var(--base-hlt-g-active); cursor: pointer; } .planChange__cards .slick-dots li:before { display: none; } .planChange__cards .slick-dots li:not(:last-child) { margin-right: 8px; } .planChange__cards .slick-dots li.slick-active { background-color: var(--base-hlt-g-invert); } .planChange__cards .slick-dots li button { padding: 0; border: 0; font-size: 0; line-height: 0; } /* Payment plan selection */ @media (max-width: 1366px) { .planChange__header > ws-btn[right-icon="arrows/arrow_edge_sm-right"] { position: relative; left: 0; } } @media (max-width: 1280px) { .planChange__content:where(.four-cards) { width: auto; } .planChange__content:where(.four-cards):before, .planChange__content:where(.four-cards):after { display: block; } .planChange__content:where(.four-cards) .planChange__cards { margin-top: 60px; } .planChange__content:where(.four-cards) .planChange__card { margin-left: 8px; margin-right: 8px; max-width: 320px; box-sizing: border-box; } .planChange__content:where(.four-cards) .planChange__notice { justify-content: center; margin-left: 8px; } .planChange__content:where(.four-cards) .planChange__notice span { max-width: 320px; } } @media (max-width: 1200px) { .planChange__content { width: auto; } .planChange__header { padding: 40px 20px; } .planChange__content:not(.four-cards) .planChange__notice { margin-left: 6px; } } @media (max-width: 960px) { .planChange__content:before, .planChange__content:after { display: block; } .planChange__cards { margin-top: 60px; } .planChange__card { margin-left: 8px; margin-right: 8px; box-sizing: border-box; } .planChange__card, .planChange__content .planChange__notice span { max-width: 320px; } .planChange__content .planChange__notice { justify-content: center; margin-left: 8px; } } @media (max-width: 768px) { #rightPanel__wrapper[data-type=plan] { width: 100%; z-index: 1025; border-radius: 0; } .planChange__header span:has(+ ws-btn) { display: none; } } @media (max-width: 600px) { .planChange__notice { font: var(--font-ui-10-nano-reg); } } @media (max-width: 480px) { .planChange__title { font: var(--font-ui-22-title-1-med); } .planChange__content { padding: 24px 0 0 0; } .planChange__content:before, .planChange__content:after { width: 30px; } .planChange__content .planChange__card, .planChange__content .planChange__notice span { max-width: 320px; } .planChange__slider { padding: 0; } .planChange__notice { padding-bottom: calc(24px + var(--sa-bot)); } } @media (max-width: 390px) { .planChange__header ws-btn:last-child { display: none; } .planChange__content .planChange__card, .planChange__content .planChange__notice span { max-width: 280px; } }/* FYI mobile first */ .user-selector { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; min-width: 0; gap: 2px; /* віддав 2px на гарне обрамлення __name */ } .user-selector__avatar { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; overflow: hidden; } .user-selector__avatar .av_nm { transform: scale(calc(20 / 48)); transform-origin: left top; } .user-selector__name { flex-shrink: 1; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding: 0 2px; /* гарне обрамлення за рахунок gap */ border-radius: 4px; color: var(--base-txt-primary); font: var(--font-ui-18-title-2-bold); } .user-selector__close { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; --icon-size: 16px; }/* * Utility Classes * This file contains utility classes to be used throughout the project. * More utility classes will be added as needed. */ .ws-utility-hidden { display: none !important; } .ws-utility-visibility-hidden { visibility: hidden; } .ws-utility-cursor-pointer { cursor: pointer !important; } .ws-utility-cursor-default { cursor: default; } .ws-utility-cursor[onclick] { cursor: pointer; } .ws-utility-pointer-events-none { pointer-events: none; } .ws-utility-ucfirst { text-transform: capitalize; } .ws-utility-input-search-as-text, .ws-utility-input-search-as-text::-webkit-search-cancel-button, .ws-utility-input-search-as-text::-webkit-search-decoration, .ws-utility-input-search-as-text::-webkit-search-results-button, .ws-utility-input-search-as-text::-webkit-search-results-decoration { -webkit-appearance: none; appearance: none } .ws-w-100 { width: 100%; } .ws-w-33 { width: 33.333%; } .ws-align-right { text-align: right; } .ws-max-w-100 { max-width: 100%; } @media (max-width: 480px) { .ws-desktop-only {display: none !important;} } @media (min-width: 481px) { .ws-mobile-only {display: none !important;} } .ws-ml-auto { margin-left: auto !important; } .ws-my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .ws-mt-0 { margin-top: 0 !important; } .ws-py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .ws-px-0 { padding-left: 0 !important; padding-right: 0 !important; } .ws-px-20 { padding-left: 20px !important; padding-right: 20px !important; } .ws-pt-0 { padding-top: 0 !important; }ws-editable { display: block; position: relative; overflow: hidden; width: 100%; height: 100%; & .value-field { max-width: 100%; text-overflow: ellipsis; overflow: hidden; flex-shrink: initial; } & .task-lock { margin-right: 14px; } &:hover .task-lock { display: none; } } .editable-value { display: block; position: absolute; top: 0;left: 0;bottom: 0;right: 0; height: auto; width: 100%; font: 13px / 20px var(--font-base); } .editable-value .errico { --icon-color: var(--base-txt-btn-w); --icon-size: 16px; flex-shrink: 0; } .editable-value .view { display: flex; align-items: center; height: 100%; gap: 8px; } .editable-value .view:hover { box-shadow: 0 0 0 1px var(--base-hlt-invert-minor) inset; } .editable-value .view .slot { width: 100%; flex-shrink: 1; flex-grow: 1; overflow: hidden; } .editable-value .view > span { flex-grow: 1; flex-shrink: 1; width: 100%; /*height: 100%;*/ /*display: flex;*/ /*align-items: center;*/ min-width: 0; max-height: 100%; & span.inner { display: block; font: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } ws-editable:not([align="right"]) .editable-value .view > span { padding-left: 8px; } ws-editable[align="right"] .editable-value .view > span { padding-right: 8px; } .editable-value .view > span.empty { height: 100%; color: var(--base-txt-tertiary); font: var(--font-ui-11-micro-med); opacity: 0; transition: opacity .1s linear; display: inline-flex; align-items: center; } .editable-value:hover .view > span.empty { opacity: 1; } .editable-value .view .options { flex-shrink: 0; align-items: center; gap: 4px; } ws-editable:not([align="right"]) .editable-value .view .options { padding-right: 8px; } ws-editable[align="right"] .editable-value .view .options { padding-left: 8px; } .editable-value .view .options { display: none; } .editable-value:hover .view .options, .editable-value .view.loading .options, .editable-value.errored .view .options { display: flex; } .editable-value .view .options > ws-btn { display: block !important; margin: 0 !important; } .editable-value.errored .view .options > ws-btn { display: none; } .editable-value .view .options.options-empty { display: none !important; } .editable-value .view .options .spin { width: 16px; height: 16px; animation: 1s linear 0s infinite normal none running loader; } .editable-value .input { display: flex; background: var(--base-cont-top); height: 100%; width: 100%; align-items: center; padding: 0 8px; gap: 8px; box-sizing: border-box; } .editable-value .input .counter, .editable-value .view .counter { display: block; border-radius: 4px; height: 16px; font: 11px / 16px var(--font-base); font-weight: 600; padding: 0 4px; background: var(--base-txt-alert-minor); color: var(--base-txt-alt-light); } .editable-value .input input { display: block; width: 100%; height: 100%; box-sizing: border-box; border: none; border-radius: 0; font: inherit; background: transparent; padding: 0; } .editable-value:not(.readonly):not(.errored) .view:hover { background: var(--base-hlt-g-easy); } /*.editable-value.empty:not(.readonly):not(.errored) .view:hover {*/ /* box-shadow: 0 0 0 2px var(--base-line-secondary) inset;*/ /*}*/ .editable-value.errored .view:hover { box-shadow: 0 0 0 2px var(--base-line-alert) inset; } .editable-value .input.focus { box-shadow: 0 0 0 2px var(--base-txt-btn-a) inset; } .editable-value.errored .view { background: var(--base-hlt-w-easy); } .editable-value.errored .input.focus, .editable-value.errored .input:hover { box-shadow: 0 0 0 2px var(--base-line-alert) inset; } .editable-value ws-btn[right-icon="content_copy:check"]:not(:active) use:last-child {display:none} .editable-value ws-btn[right-icon="content_copy:check"]:active use:first-child {display:none} .editable-value { transition: all 300ms linear; } .editable-value.saved { box-shadow: 0 0 0 2px var(--colors-green-500) inset; background: linear-gradient(0deg, var(--colors-green-alpha-600-a10) 0%, var(--colors-green-alpha-600-a10) 100%), var(--base-cont-top); } /*.dataTable__item td.main .ava {*/ /* padding: 0 8px;*/ /*}*/ /*.dataTable__item .td_name .editable-value .view .fullname,*/ /*.dataTable__item .td_name .editable-value .view .name {*/ /* font: var(--font-ui-15-large-med);*/ /*}*/ body.withMass .dataTable .editable-value .view { pointer-events: none; } body.withMass .dataTable .editable-value .view .options { display: none !important; } .editable-value .unit { font: var(--font-ui-10-nano-reg); color: var(--base-txt-tertiary); padding: 3px 0 0 2px; overflow: hidden; flex: 0 0 auto; } ws-editable[align="right"] .editable-value { text-align: right; .view, .value-field {justify-content: end;} } ws-editable[align="right"] input { text-align: right; } .editable-value .input .unit { margin-left: -8px; } .editable-value:not(:hover) .value-field:not(.filled) .unit { display: none; } ws-editable:not([type="textarea"]) { .view > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } span.ico_svg, span.ico_svg30, a.ico_svg, a.ico_svg30 {background:url(/assets/img/color/ws_emoji_new.svg) no-repeat; background-size: 480px 480px} span.ico_svg30, a.ico_svg30 {width:30px; height:30px;} span.ico_home {background-position: -305px -65px} a:hover span.ico_home { background-position: -335px -65px} span.ico_return {background:url(/assets/img/color/ws_emoji_new.svg) no-repeat -305px -95px; background-size: 480px 480px} a:hover span.ico_return, a.over span.ico_return {background-position: -335px -95px} span.ico_handshake {background-position: -30px -120px} span.ico_wysiwyg {background-position: -300px -120px} a:hover span.ico_wysiwyg { background-position: -330px -120px} span.ico_event {background-position: -300px -150px} span.ico_event_act { background-position: -300px -180px} .over span.ico_event, .over span.ico_event_act, a:hover span.ico_event, a:hover span.ico_event_act, span.ico_event3 { background-position: -330px -150px} a.ico_config, span.ico_config {background-position:-245px -65px} span.ico_filt_add {background:url(/assets/img/color/ws_emoji_new.svg) no-repeat -185px -95px; background-size: 480px 480px; border-radius:10px; width:20px; height:20px} a span.ico_filt_add:hover {background-position:-215px -95px; width:20px; height:20px;} span.ico_dynamics, a.ico_dynamics {background-position: -216px -155px} span.ico_task_add_act, a.ico_task_add_act {background-position: -215px -185px} span.ico_activity_sum, a.ico_activity_sum {background-position: -95px -155px} span.ico_activity_other, a.ico_activity_other {background-position: -95px -125px} span.ico_activity_add, a.ico_activity_create {background-position: -95px -185px} span.ico_activity_done, a.ico_activity_done {background-position: -95px -215px} span.ico_activity_comment, a.ico_activity_comment {background-position: -95px -245px} span.ico_activity_sum:hover, a.ico_activity_sum:hover, .active span.ico_activity_sum {background-position: -125px -155px} span.ico_activity_other:hover, a.ico_activity_other:hover, .active span.ico_activity_other {background-position: -125px -125px} span.ico_activity_add:hover, a.ico_activity_create:hover, .active span.ico_activity_add {background-position: -125px -185px} span.ico_activity_done:hover, a.ico_activity_done:hover, .active span.ico_activity_done {background-position: -125px -215px} span.ico_activity_comment:hover, a.ico_activity_comment:hover, .active span.ico_activity_comment {background-position: -125px -245px} a.ico_config:hover { background-position:-275px -65px; transform: rotate(180deg);-webkit-transform: rotate(180deg); transition:transform 0.6s ease 0.3s;-webkit-transition:-webkit-transform 0.6s ease 0.3s } a:hover span.ico_config {background-position:-275px -65px} a.ico_account, span.ico_account {background: url(/assets/img/color/ws_emoji_new.svg) no-repeat -269px -170px; background-size: 528px 528px; width: 24px; height: 24px;} a.ico_account:hover, a:hover span.ico_account, a.ico_account.over {background-position: -301px -170px;} .alertblock .title .msg_ico {background: url(/assets/img/color/ws_emoji_new.svg) no-repeat -269px -170px;background-size: 528px 528px;width:25px;height: 25px;margin:0 5px 2px 0;} a.ico_dots, span.ico_dots {background:url(/assets/img/color/ws_emoji_new.svg) no-repeat -245px -35px; background-size: 480px 480px} a.ico_dots, span.ico_dots, a.ico_dots_big {transition:transform 0.3s ease;-webkit-transition:-webkit-transform 0.3s ease} .commentList a.ico_dots, .task a.ico_dots, .modal__header a.ico_dots, a.ico_dots_new {background:url(/assets/img/color/ws_emoji_new.svg) no-repeat -185px -35px; background-size: 480px 480px} a.ico_dots:hover, a.ico_dots_big:hover, a:hover span.ico_dots, a.norm_act span.ico_dots { transform: rotate(90deg);-webkit-transform: rotate(90deg) } .ico_equalizer {background:url(/assets/img/color/ws_emoji_new.svg) no-repeat -305px -35px; background-size: 480px 480px} .ico_equalizer:hover, .ico_equalizer.hover { background-position: -335px -35px} a.ico_starbig, span.ico_starbig, span.ico_starbig_a {background:url(/assets/img/color/ws_emoji_new.svg) no-repeat -363px -3px;background-size: 480px 480px;width:25px;height:25px;} a.ico_starbig:hover {background-position: -393px -3px} a.ico_starbig_a, span.ico_starbig_a, a.ico_starbig_a:hover {background-position: -423px -3px} span.ico_gfav {background-position: -360px -180px} .over span.ico_gfav, a:hover span.ico_gfav { background-position: -390px -180px} .blink span.ico_gfav { background-position: -420px -180px} span.ico_page {background:url(/assets/img/color/ws_emoji_new.svg) no-repeat -365px -185px; background-size: 480px 480px; opacity:0.25} a:hover span.ico_page, .selected span.ico_page {background:url(/assets/img/color/ws_emoji_new.svg) no-repeat -395px -185px; background-size: 480px 480px; opacity:1} span.ico_gfav {background-position: -360px -180px} span.ico_search, a.ico_search{background-position: -360px -120px} a:hover span.ico_search, a.ico_search:hover, a.ico_search.selected, a.over span.ico_search, span.ico_search_act { background-position: -390px -120px} a.ico_done, span.ico_done {background-position: -185px -245px;} span.ico_done_ok, a.ico_done_ok {background-position:-215px -245px} span.ico_done_err, a.ico_done_err {background-position:-245px -215px} #hint .ico_done {background-position: -245px -245px; opacity:0.5; transform:scale(0.8) } a.ico_done:hover {background-position:-215px -215px} h1 span.ico_done {margin:3px 10px 0 -4px} span.ico_task_close, span.ico_but_close {background-position:-155px -215px} span.ico_task_reopen, span.ico_but_reopen {background-position:-275px -215px} span.ico_log_close {background-position:-185px -245px} span.ico_log_reopen {background-position:-275px -245px} span.ico_fav, a.ico_fav {background-position:-245px -5px} span.ico_fav_a, a.ico_fav_a {background-position:-185px -5px} span.ico_sfav, a.ico_sfav {background-position:-164px 0; background-size: 320px 320px; width:12px} span.ico_sfav_a, a.ico_sfav_a, span.ico_fav_p {background-position:-124px 0; background-size: 320px 320px; width:12px;} span.ico_today2, span.ico_today {background:url(/assets/img/color/ws_emoji_new.svg) no-repeat -120px 0; background-size: 320px 320px; } span.ico_today {padding:0 11px 0 0; background-position:-123px -3px} span.ico_timer_saved {background:url(/assets/img/color/ws_emoji_new.svg) no-repeat -122px -170px; background-size: 384px 384px} span.ico_attach, a.ico_attach {background:url(/assets/img/color/ws_emoji_new.svg) no-repeat -245px -125px; background-size: 480px 480px} span.ico_subtask_new, a.ico_subtask_new {background:url(/assets/img/color/ws_emoji_new.svg) no-repeat -185px -125px; background-size: 480px 480px} span.ico_subtask_new:hover, a.ico_subtask_new:hover, span.ico_subtask_new_hover, a.ico_subtask_new_hover {background:url(/assets/img/color/ws_emoji_new.svg) no-repeat -215px -125px; background-size: 480px 480px} a.ico_attach:hover, a:hover span.ico_attach {background-position:-275px -125px} span.ico_plus:after, a.ico_plus:after {content:''; display:block; width:20px; height:20px; background:url(/assets/img/color/ws_emoji_new.svg) no-repeat -155px -95px; background-size: 480px 480px} span.ico_plus:after {margin: 0 0 0 1px} a:hover span.ico_plus:after, a.ico_plus:hover:after, .add_place span.ico_plus:after, span.ico_plus_blue2:after, a.ico_plus_blue2:after {background-position:-275px -95px} span.ico_gotop { background:url(/assets/img/color/ws_emoji_new.svg) no-repeat -395px -155px; background-size: 480px 480px;} .ico_emotion {background:url(/assets/img/color/ws_emoji_new.svg) no-repeat -120px 0; background-size: 480px 480px; padding:5px} a.ico_emotion:hover, a:hover span.ico_emotion {background-position:-120px -30px} a.ico_reply {background:url(/assets/img/color/ws_emoji_new.svg) no-repeat -90px -60px; background-size: 480px 480px; padding:5px} a.ico_reply:hover {background:url(/assets/img/color/ws_emoji_new.svg) no-repeat -120px -60px; background-size: 480px 480px} a.ico_dots_big {background:url(/assets/img/color/ws_emoji_new.svg) no-repeat -180px -30px; background-size: 480px 480px; padding:5px; } .ico_newcomment {background:url(/assets/img/color/ws_emoji_new.svg) no-repeat -180px -60px; background-size: 480px 480px; padding:5px; margin:-1px 2px !important} span.ico_addsub {background:url(/assets/img/color/ws_emoji_new.svg) no-repeat -250px -100px; background-size: 480px 480px; width:10px; height:10px; margin:5px;} span.ico_help, a.ico_help {background:url(/assets/img/color/ws_emoji_new.svg) no-repeat -425px -155px; background-size: 480px 480px} a:hover span.ico_help, a.ico_help:hover {background-position: -455px -155px} span.ico_warning, a.ico_warning {background:url(/assets/img/color/ws_emoji_new.svg) no-repeat -425px -275px; background-size: 480px 480px} a:hover span.ico_warning, a.ico_warning:hover {background-position: -455px -275px} span.ico_help_q, a.ico_help_q {background:url(/assets/img/color/ws_emoji_new.svg) no-repeat -425px -125px; background-size: 480px 480px; opacity:0.5} a:hover span.ico_help_q, a.ico_help_q:hover {opacity:1} .ico_expandv {background:url(/assets/img/color/ws_emoji_new.svg) no-repeat -367px -154px; background-size: 480px 480px; opacity:0.8; border-radius:4px; width:16px !important; height:22px !important;} .ico_expandv_on {background-position:-397px -154px} .ico_expandv:hover, .ico_expandv_on:hover {opacity:1} .ico_expandh {background:url(/assets/img/color/ws_emoji_new.svg) no-repeat -364px -157px; background-size: 480px 480px; opacity:0.8; border-radius:4px; width:22px !important; height:16px !important;} .ico_expandh_on {background-position:-394px -157px} .ico_expandh:hover, .ico_expandh_on:hover {opacity:1} span.ico_back_to, a.ico_back_to {background:url(/assets/img/color/ws_emoji_new.svg) no-repeat -365px -35px; background-size: 480px 480px} a:hover span.ico_back_to, a.ico_back_to:hover, #modal__backButton:hover {background-position:-395px -35px} span.ico_move_to, a.ico_move_to {background:url(/assets/img/color/ws_emoji_new.svg) no-repeat -365px -35px; background-size: 480px 480px; transform:rotate(180deg)} span.ico_esc, a.ico_esc, span.ico_remove, a.ico_remove {background:url(/assets/img/color/ws_emoji_new.svg) no-repeat -365px -65px; background-size: 480px 480px} a:hover span.ico_esc, a.ico_esc:hover, a:hover span.ico_remove, a.ico_remove:hover, span.ico_esc:hover {background-position:-395px -65px} .ico_darr {background:url(/assets/img/color/ws_emoji_new.svg) no-repeat -425px -65px; background-size: 480px 480px; background-position:-425px -65px !important} .ico_uarr {background:url(/assets/img/color/ws_emoji_new.svg) no-repeat -425px -95px; background-size: 480px 480px; background-position:-425px -95px !important} .it_likes span, .it_likes1 span { height:30px; width:30px; padding:0; margin:0 2px; float:left; background-image:url(/assets/img/color/ws_emoji_new.svg) !important; background-color:transparent !important; background-size: 480px 480px !important; } #events .it_likes span, #events .it_likes1 span {width:24px; height:24px;background-size: 384px 384px !important;} .likes .like1 {background-position:0 0 !important} .likes .like2 {background-position:-100% 0 !important} .likes .like3 {background-position:-200% 0 !important} .likes .like4 {background-position:0 -100% !important} .likes .like5 {background-position:-100% -100% !important} .likes .like6 {background-position:-200% -100% !important} .likes .like7 {background-position:0 -200% !important} .likes .like8 {background-position:-100% -200% !important} .likes .like9 {background-position:-200% -200% !important} .likes .like10 {background-position:0 -300% !important} .likes .like10 {background-position:0 -300% !important} .likes .like11 {background-position:-100% -300% !important} .likes .like12 {background-position:-200% -300% !important} .likes .like13 {background-position:0 -400% !important} .likes .like14 {background-position:-100% -400% !important} .likes .like15 {background-position:-200% -400% !important} .likes .like16 {background-position:-100% -500% !important} .ico_plus_gray {background:var(--colors-graphite-700) url(/assets/img/color/ws_emoji_new.svg) no-repeat -215px -95px;background-size: 480px 480px; border-radius:10px; } .ico_plus_gray:hover, a:hover .ico_plus_gray, a:focus .ico_plus_gray {background-color:var(--base-txt-link-major)} a.ico_pin {background-position: -390px 0} a.ico_pin:not(.ico_pin_act):hover {transform:rotate(-30deg)} a.ico_pin_act {background-position:-420px 0}.switcher { --switcher-active-i: 0; --switcher-n: 0; /* кількість контролів */ --switcher-h: 16px; /* висота одного контролу */ --switcher-g: 4px; /* gap між контролами */ display: flex; align-self: stretch; overflow: clip; } .switcher__track { position: relative; z-index: 2; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 12px; } .switcher__track:after { content: ''; position: absolute; --switcher-offset: calc((100% - (var(--switcher-h) * var(--switcher-n) + var(--switcher-g) * (var(--switcher-n) - 1))) / 2); top: calc( var(--switcher-offset) + (var(--switcher-h) + var(--switcher-g)) * (var(--switcher-active-i) - 1) ); bottom: calc( var(--switcher-offset) + (var(--switcher-h) + var(--switcher-g)) * (var(--switcher-n) - var(--switcher-active-i)) ); left: 50%; transform: translateX(-50%); border-radius: 4px; width: 4px; background: var(--base-txt-primary); pointer-events: none; } .switcher--backward .switcher__track:after { transition: top 0.2s ease, bottom 0.2s ease 0.1s; } .switcher--forward .switcher__track:after { transition: top 0.2s ease 0.1s, bottom 0.2s ease; } .switcher__item { width: 100%; height: calc(var(--switcher-h) + var(--switcher-g)); padding: calc(var(--switcher-g) / 2) 0; box-sizing: border-box; display: flex; flex-direction: row; align-items: center; justify-content: center; flex-grow: 0; flex-shrink: 0; } .switcher__item:first-child { flex-grow: 1; align-items: flex-end; } .switcher__item:last-child { flex-grow: 1; align-items: flex-start; } .switcher__item:after { content: ''; display: block; width: 4px; height: var(--switcher-h); background: var(--base-txt-muted); border-radius: 4px; transition: background-color .2s ease; } /* .switcher__item--active:after { background: var(--base-txt-primary); } */ .switcher__captionWrapper { position: relative; flex-shrink: 0; margin-left: -10px; width: 30px; box-sizing: border-box; border-radius: 0 16px 16px 0; background: var(--base-txt-muted); overflow: hidden; transition: background-color .2s ease; } .switcher__caption { --switcher-i: 1; position: absolute; left: 0; padding: 6px 0 6px 8px; box-sizing: border-box; width: 100%; height: 100%; color: var(--base-txt-alt-light); font: 10px/20px var(--font-mono); text-align: center; writing-mode: sideways-lr; text-orientation: sideways; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; text-transform: lowercase; transition: transform 0.2s linear; transform: translateY(calc((var(--switcher-i) - var(--switcher-active-i)) * 100% * -1)); } .switcher--horizontal { display: block; .switcher__track { margin: 0 auto; width: fit-content; height: 12px; flex-direction: row; } .switcher__track:after { left: calc( var(--switcher-offset) + (var(--switcher-h) + var(--switcher-g)) * (var(--switcher-active-i) - 1) ); right: calc( var(--switcher-offset) + (var(--switcher-h) + var(--switcher-g)) * (var(--switcher-n) - var(--switcher-active-i)) ); top: 50%; bottom: unset; transform: translateY(-50%); width: unset; height: 4px; } &.switcher--backward .switcher__track:after { transition: left 0.2s ease, right 0.2s ease 0.1s; } &.switcher--forward .switcher__track:after { transition: left 0.2s ease 0.1s, right 0.2s ease; } .switcher__item { width: calc(var(--switcher-h) + var(--switcher-g)); height: 4px; padding: 0 calc(var(--switcher-g) / 2); } .switcher__item:after { width: var(--switcher-h); height: 4px; } } @media (min-width: 481px) { .switcher__track:hover:has(.switcher__item--active:hover):after { background: var(--base-txt-max); } .switcher__item:hover:after { background: var(--base-txt-tertiary); } .switcher__captionWrapper:hover { background: var(--base-txt-tertiary); } }