/* /css/pages/help.css (12.15 KB) */
/* /css/pages/help_api.css (0.58 KB) */
#content { padding-right: 0; padding-left: 0; } #help { font-size: 14px; } #help .wrapper { width: 100%; display: flex; } #help.help-main .wrapper { justify-content: center; } #help > .wrapper { padding: 0 !important;} #help #footer .top .wrapper { display: block; } #help_header .help_headerContent > .title, #help_menu, #help .mce-toc { min-width: 320px; } #help i.phrases_group { cursor: pointer; border-radius: 3px; border: 1px solid #C5CBCF; width: 22px; height: 20px; padding: 2px 0 0 0; min-height: 0px; margin: 0 0 0 1px; text-align: center; color: var(--color-text-3); line-height: 20px; display: inline-block; vertical-align: middle; background: #E1E3E4; } #help .icon-invoice.receipt { position: relative; } #help .icon-invoice.receipt:after { content: " "; border-radius: 100%; box-shadow: 0 0 0 1px var(--color-cyan); width: 6px; height: 6px; background-color: var(--color-cyan); border: 1px solid #fff; box-sizing: border-box; position: absolute; bottom: 0; right: 0; } #help #help_header .help_headerText .title { padding: 25px 0; margin-left: 35px; min-width: 320px; font-size: 24px; font-weight: 700;} #help_header .help_headerContent { width: 100%; display: flex; align-items: center; } #help_header .help_headerContent .search_form { max-width: 800px; width: 100%;} html[data-submod=""][data-mod="support"] { --body-background-color: var(--color-layout-front-3); } html[data-submod=""] #help .article { max-width: 900px !important; } html[data-submod=""] #help #help_header {padding: 80px var(--top-padding-4) 64px var(--top-padding-4); display: flex; justify-content: center;} html[data-submod=""] #help #help_header .help_headerContent { max-width: 560px; display: flex; justify-content: center; flex-wrap: wrap; gap: var(--top-padding-6);} html[data-submod=""] #help #help_header .help_headerText {display: flex; flex-direction: column; gap: var(--top-gap-3);} html[data-submod=""] #help #help_header .help_headerText .title { width: auto; padding: 0; margin: 0; font-size: 32px; text-align: center; font-weight: 700;} html[data-submod=""] #help #help_header .help_headerText .intro { max-width: 480px; color: var(--color-text-2); text-align: center; font-size: 16px; font-weight: 600; line-height: 24px;} html[data-submod=""] #help #help_header .search_form { width: 560px; } html[data-submod=""] #help #help_header .search_form label { border: 1px solid var(--top-forms-border-color);} html[data-submod=""] #help #help_header .faq_links { margin-bottom: 35px; display: flex; justify-content: space-between; flex-wrap: wrap; } html[data-submod=""] #help #help_header .faq_links a { width: 48%; margin: 8px 2% 8px 0; color: #37485d; text-decoration: none; } html[data-submod=""] #help #help_header .faq_links a:before { content: "•"; margin-right: 5px; } html[data-submod=""] #help #help_header .faq_links a:after { content: initial; } html[data-submod=""] #help .landingContentBlock { box-shadow: none; width: 100%; } html[data-submod=""] #help .landingContentBlock_title { font-size: 28px; font-weight: 700; } html[data-submod=""] #help .landingContentBlock_description { font-size: 16px; } html[data-submod=""] #help .landingContentBlock_media { height: 340px; width: 360px; overflow: hidden; position: relative; } html[data-submod=""] #help .landingContentBlock_media img { display: block; width: 100%; height: 200%; position: absolute; object-fit: cover; } html[data-submod=""].top-theme-dark #help .landingContentBlock_media img { display: block; width: 100%; position: absolute; bottom: 0; } @media only screen and (max-width: 740px) { html[data-submod=""] #help .landingContentBlock { max-width: 100%; flex-direction: row-reverse; } html[data-submod=""] #help .landingContentBlock .top-button { width: 100%; } html[data-submod=""] #help .landingContentBlock .top-button .top-ellipsis { text-align: center; } html[data-submod=""] #help .landingContentBlock { flex-direction: column; max-width: var(--supportSection_gridItem-base-width); } } @media only screen and (max-width: 600px) { html[data-submod=""] #help #help_header { padding: var(--top-padding-12) var(--top-padding-4); } html[data-submod=""] #help #help_header .help_headerContent { gap: var(--top-gap-4); max-width: 100%; } html[data-submod=""] #help #help_header .help_headerText { gap: var(--top-gap-2); } html[data-submod=""] #help #help_header .help_headerContent .help_headerText .title { font-size: 28px; } html[data-submod=""] #help #help_header .help_headerText .intro { font-size: 14px; max-width: 424px; line-height: 20px; } html[data-submod=""] #help #help_header .search_form { width: 100%; } } #help_header { background: url("/controller/file/?src=/cloud/common/pages/support/main/support-header.svg&v=4") var(--color-layer-primary-2); background-position: center 0; background-size: cover; display: flex; align-items: center; position: relative; z-index: 102; } html.top-theme-dark #help_header { background-position: center bottom; } #help_header .help_headerContent > .help_headerText .title a { color: inherit; text-decoration: none; } #help_header h1 { margin: 0;} #help_header .search_form { position: relative; flex: 1 1 auto; } #help_header .search_form .icon { position: absolute; top: calc(50% - 9px); left: 12px; color: #B2BCC5; font-size: 18px; z-index: 1; } #help_header .search_form label { width: 100%; } #help_header .search_form input { border: none; width: 100%; height: 36px; position: relative; } #help_header .autocomplete-results a { display: block; } #help_menu_bar { cursor: pointer; min-height: 50px; border-bottom: 1px solid var(--color-bg-shading-2); background: var(--color-bg-shading-1); position: relative; right: 0; z-index: 101;} #help aside { } #help aside + aside { order: 2; margin-left: 30px; } #help_menu, #help .topTableOfContents { max-height: calc(var(--100vh) - var(--header-height) - var(--toolbar-height)); position: sticky; top: var(--header-height); } #help .topTableOfContents { padding: 12px 0; } #help_menu { border: 1px solid var(--color-line-1-opacity); border-left: 0; margin: -1px 30px -1px 0; overflow: auto; top: calc(var(--header-height) - 1px); } #help_menu ul { margin: 0; position: relative; } #help_menu ul ul { margin: 0; display: none; } #help_menu li { list-style: none; } #help_menu .dropdown { cursor: pointer; margin: var(--top-padding-3) 0 var(--top-padding-3) var(--top-dropdown-margin-left); padding: 5px; color: var(--color-text-2); text-align: center; font-size: 12px; display: none; align-items: center; justify-content: center; position: absolute; z-index: 1; } #help_menu li:not(.opened) > .dropdown-open { display: flex; } #help_menu li.opened > .dropdown-close { display: flex; } #help_menu .dropdown.active { color: var(--color-text-white); } #help_menu li a { min-height: 24px; padding: var(--top-padding-3); padding-left: var(--top-link-padding-left); color: var(--color-text-2); text-decoration: none; display: flex; align-items: center; position: relative; } #help_menu li a:hover { background-color: var(--color-layout-front-3); } #help_menu li a.active { background-color: var(--color-bg-primary-1); color: var(--color-text-white); } #help_menu a.state_dev { opacity: 0.5; } #help_menu li.depth-1 { --top-dropdown-margin-left: var(--top-padding-2); --top-link-padding-left: var(--top-padding-8); } #help_menu li.depth-2 { --top-dropdown-margin-left: calc(var(--top-padding-2) + var(--top-padding-7)); --top-link-padding-left: calc(var(--top-padding-8) + var(--top-padding-7)); } #help_menu li.depth-3 { --top-dropdown-margin-left: calc(var(--top-padding-2) + var(--top-padding-7) + var(--top-padding-4)); --top-link-padding-left: calc(var(--top-padding-8) + var(--top-padding-7) + var(--top-padding-4)); } #help_menu li.depth-4 { --top-dropdown-margin-left: calc(var(--top-padding-2) + var(--top-padding-7) + 2 * var(--top-padding-4)); --top-link-padding-left: calc(var(--top-padding-8) + var(--top-padding-7) + 2 * var(--top-padding-4)); } #help_menu li.depth-5 { --top-dropdown-margin-left: calc(var(--top-padding-2) + var(--top-padding-7) + 3 * var(--top-padding-4)); --top-link-padding-left: calc(var(--top-padding-8) + var(--top-padding-7) + 3 * var(--top-padding-4)); } html[data-submod=""] .help_content { padding-top: 64px; padding-bottom: var(--top-padding-8); max-width: 900px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 64px; } @media only screen and (max-width: 1670px) { html[data-submod=""] #help_header { background-size: auto 201%; } } @media only screen and (min-width: 1400px) { .top-content > .mce-toc { display: none; } .topTableOfContents > menu { border-left: 1px solid var(--color-theme-75); } #help main menu { display: none; } #help main menu + h2, #help main menu + a[name] + h2 { margin-top: 0; } #help main menu + a[name] { top: -70px; } } @media only screen and (max-width: 1400px) { .top-content > .mce-toc { border-radius: 12px; margin: 25px 0; display: block; } .topTableOfContents { display: none; } } @media only screen and (min-width: 1024px) { #help .article { min-width: 800px; max-width: 800px; } } @media only screen and (min-width: 900px) and (max-width: 1024px) { html[data-submod=""] #help .icons a, html[data-submod=""] #help .icons a:nth-child(4n) { margin-right: 15%; } html[data-submod=""] #help .icons a:nth-child(3n) { margin-right: 0; } #help .article { min-width: 600px; max-width: 600px; } } @media only screen and (min-width: 900px) { #help_menu { width: 320px; } } @media only screen and (max-width: 933px) { #help .article { padding: 0 var(--top-padding-4); transition: filter 0.3s; } } @media only screen and (max-width: 900px) { html[data-submod=""] #help .icons { justify-content: space-around; } html[data-submod=""] #help .icons a, html[data-submod=""] #help .icons a:nth-child(4n) { margin-right: 15%; } html[data-submod=""] #help .icons a:nth-child(3n) { margin-right: 0; } #help_header { transition: filter 0.3s; } #help_header .help_headerContent { justify-content: center; flex-wrap: wrap; padding: var(--top-padding-4); } #help_menu_bar { position: sticky; top: var(--header-height); } #help_menu_bar .wrapper { min-height: inherit; display: flex; align-items: center; } #help_menu_bar .opener { margin-right: 10px; color: #CACED1; font-size: 14px; position: absolute; top: 19px; left: 15px; } #help_menu_bar .h1 { font-size: 14px; overflow: hidden; } #help_menu_bar .nav { margin-left: auto; white-space: nowrap; } #help_menu_bar .nav a { padding: 15px 3px; color: #cfcfcf; font-size: 14px; text-decoration: none; } #help > .wrapper { flex-wrap: wrap; transition: background 0.3s; } #help .article { box-sizing: border-box; width: 100%; padding: 0 var(--top-padding-4); transition: filter 0.3s; } #help .article h1 { display: none; } #help .content_editor_config { margin-top: 30px; } #help_menu { border: none; margin: 0; position: absolute; top: 0; left: -320px; bottom: 100%; z-index: 1; transition: bottom 0.3s; } #help.menu-opened #help_menu { height: 100%; background: var(--color-layout-front-1); left: 0; } #help.menu-opened > .wrapper { background: rgba(0, 0, 0, 0.5); } #help.menu-opened #help_header, #help.menu-opened .article { filter: brightness(50%); } } @media only screen and (max-width: 700px) { html[data-submod=""] #help .icons a, html[data-submod=""] #help .icons a:nth-child(4n) { margin-right: 0; } #help_header { background-size: auto 201%; } } @media only screen and (max-width: 613px) { html[data-submod=""] #help .icons a, html[data-submod=""] #help .icons a:nth-child(3n), html[data-submod=""] #help .icons a:nth-child(4n) { margin-right: 15%; } html[data-submod=""] #help .icons a:nth-child(2n) { margin-right: 0; } } @media only screen and (max-width: 479px) { html[data-submod=""] #help .icons a { width: 60%; margin-right: 0 !important; font-size: 16px; text-align: center; } html[data-submod=""] #help .icons a i { margin-right: -20%; margin-left: -20%; font-size: 14px; } #help_menu_bar .opener { position: static; } } #help p a.github_example, #help p a.api_explorer{ text-align: right; display: block; position: relative; top: -5px; } #help table{ width:100% } #help .left_col{ width:680px; } #help .right_col{ width:400px; } #help .right_col .icons{ margin: 0 !important; text-align: center; justify-content: flex-start; } #help .right_col .icons a{ margin: 0 10px 10px 0; display: block; } #help .right_col .icons a img{ width: 100px; height: 100px; margin: 0 auto; display: block; }