.material-icons { direction: unset; } .material-icons.md-18 { font-size: 18px; } :root { --primary-700: #2c3e50; --primary-700-rgb: 65, 102, 245; --primary-light-700: #4b6fff; --primary-dark-700: #001e94; --primary-200: #738fff; --secondary-200: #ffab91; --secondary-dark-200: #c97b63; --secondary-light-200: #ffddc1; --secondary-100: #ffccbc; --on-primary-700: #ffffff; --on-secondary-200: #000000; --padding-lr: 16px; --border: 10px; --btn-border: 20px; color-scheme: light dark; scroll-padding-top: 60px; } @media (max-width: 767px) { :root { --padding-lr: 10px; } } body { --primary-rgb: var(--primary-700-rgb); --primary: var(--primary-700); --primary-dark: var(--primary-dark-700); --primary-light: var(--primary-light-700); --secondary: var(--secondary-200); --secondary-dark: var(--secondary-dark-200); --secondary-light: var(--secondary-light-200); --background: #eeeeee; --surface: #ffffff; --error: #b00020; --on-primary: var(--on-primary-700); --on-secondary: var(--on-secondary-200); --on-background: #000000; --on-surface: #0f0e0e; --on-error: #ffffff; --selected: var(--primary); --on-selected: white; --link: #005085; --shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); --appbar-shadow: 0px 4px 4px -1px rgba(0, 0, 0, 0.2), 0px 5px 5px 0px rgba(0, 0, 0, 0.14), 0px 10px 10px 0px rgba(0, 0, 0, 0.12); --fab-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12); } body.dark-theme { --primary-rgb: 255, 255, 255; --primary: #35363a; --primary-dark: rgba(255, 255, 255, 0.14); --primary-light: rgba(255, 255, 255, 0.1); --secondary: #2c2c2c; --secondary-dark: rgba(255, 255, 255, 0.13); --secondary-light: rgba(255, 255, 255, 0.09); --background: #121212; --surface: rgba(255, 255, 255, 0.05); --surface-solid: #1e1e1e; --error: #cf6679; --on-secondary: var(--on-surface); --on-background: #ffffff; --on-surface: rgba(225, 223, 223, 0.87); --on-error: #ffffff; --selected: var(--primary-200); --on-selected: black; --link: #65c2ff; --shadow: 0 transparent; --appbar-shadow: 0 transparent; --fab-shadow: 0 transparent; } body.dark-theme img { filter: brightness(0.9) contrast(1.2); } @media (prefers-color-scheme: dark) { body { --primary-rgb: 255, 255, 255; --primary: #35363a; --primary-dark: rgba(255, 255, 255, 0.14); --primary-light: rgba(255, 255, 255, 0.1); --secondary: #2c2c2c; --secondary-dark: rgba(255, 255, 255, 0.13); --secondary-light: rgba(255, 255, 255, 0.09); --background: #121212; --surface: rgba(255, 255, 255, 0.05); --surface-solid: #1e1e1e; --error: #cf6679; --on-secondary: var(--on-surface); --on-background: #ffffff; --on-surface: rgba(225, 223, 223, 0.87); --on-error: #ffffff; --selected: var(--primary-200); --on-selected: black; --link: #65c2ff; --shadow: 0 transparent; --appbar-shadow: 0 transparent; --fab-shadow: 0 transparent; } img { filter: brightness(0.9) contrast(1.2); } body.light-theme { --primary-rgb: var(--primary-700-rgb); --primary: var(--primary-700); --primary-dark: var(--primary-dark-700); --primary-light: var(--primary-light-700); --secondary: var(--secondary-200); --secondary-dark: var(--secondary-dark-200); --secondary-light: var(--secondary-light-200); --background: #eeeeee; --surface: #ffffff; --surface-solid: unset; --error: #b00020; --on-secondary: var(--on-secondary-200); --on-background: #000000; --on-surface: #293949; --on-error: #ffffff; --selected: var(--primary); --on-selected: white; --link: #005085; --shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); --appbar-shadow: 0px 4px 4px -1px rgba(0, 0, 0, 0.2), 0px 5px 5px 0px rgba(0, 0, 0, 0.14), 0px 10px 10px 0px rgba(0, 0, 0, 0.12); --fab-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12); } body.light-theme img { filter: unset; } } body { font-family: Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; background-color: var(--background); width: 100%; overflow: hidden; overflow-y: auto; } * { padding: 0; margin: 0; box-sizing: border-box; color: var(--on-surface); } a { color: var(--link); text-decoration: none; } hr { background-color: #bdc3c7; display: block; margin: 20px 0; border: none; height: 1px; } input[type='text'], input[type='password'], select, textarea { width: 100%; padding: 5px 10px; font-size: 1.2em; border-radius: 4px; background-color: var(--surface); } input[type='checkbox'], input[type='radio'] { margin-right: 10px; } input[type='submit'] { padding: 7px 16px; font-size: 1em; border-radius: var(--btn-border); cursor: pointer; text-transform: capitalize; } input[type='file'] { width: 100%; margin: 5px 0; font-size: 1.2em; } button { cursor: pointer; } select { margin-top: 10px; } select option { background-color: var(--surface-solid); } .qa-header { position: sticky; top: 0; z-index: 3; } .qa-header-clear { height: 56px; } .qa-logo { position: absolute; top: 0; left: 0; width: 100%; height: 56px; padding-top: 13px; background-color: var(--primary); box-shadow: var(--appbar-shadow); z-index: 4; } .qa-logo-link { margin-left: 60px; font-size: 24px; color: var(--on-primary); } #menu-toggle { position: absolute; top: 13px; left: 10px; color: var(--on-primary); font-size: 30px; cursor: pointer; z-index: 4; } #search-toggle { position: absolute; top: 14px; right: 60px; color: var(--on-primary); font-size: 30px; z-index: 6; cursor: pointer; } #user-toggle { position: absolute; top: 10px; right: 10px; color: var(--on-primary); font-size: 30px; width: 36px; height: 36px; overflow: hidden; border-radius: 50%; cursor: pointer; z-index: 4; } #user-toggle img { width: 100%; height: auto; } #user-toggle .login-person { border: 2px solid var(--on-primary); border-radius: 50%; height: 36px; width: 36px; } #user-toggle i { font-size: 36px; margin-left: -2px; color: var(--on-primary); } #search-toggle.active { left: 10px; right: unset; color: var(--selected); } .qa-nav-user { position: fixed; visibility: hidden; top: 40px; right: 40px; transform: scale(0.2); background-color: var(--surface-solid, var(--surface)); border-radius: 30px; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); max-height: 360px; min-width: 240px; max-width: 240px; z-index: 4; padding: 10px 0; transition: transform 0.25s; transform-origin: 100% 0; } #qa-nav-user.active #qa-nav-user-clear { z-index: 6; background-color: rgba(0, 0, 0, 0.32); position: fixed; height: 100vh; width: 100%; top: 0; left: 0; } #qa-nav-user.active .qa-nav-user { top: 40%; right: 50%; visibility: visible; transform: translate(50%, -50%) scale(1); transition: transform 0.5s cubic-bezier(0.65, 0.05, 0.36, 1), top 0.3s, right 0.3s; z-index: 7; } .qa-nav-user .qa-logged-in { font-size: 1.25rem; font-weight: 500; letter-spacing: 0.0125em; padding: 10px 24px; } .qa-nav-user-list { list-style: none; } .qa-nav-user-item { padding: 0; } .qa-nav-user-link { position: relative; display: block; padding-top: 10px; padding-bottom: 10px; padding-left: 64px; padding-right: 0; color: var(--on-surface); border-radius: 20px; margin: 4px; } .qa-nav-user-link.qa-nav-user-selected { background-color: rgba(var(--primary-rgb), 0.12); color: var(--selected); } .qa-nav-user-link:hover { background-color: rgba(var(--primary-rgb), 0.12); } .qa-search { visibility: hidden; position: absolute; transform: scale(0.4); transform-origin: right; top: 1px; left: 0; width: 100%; background-color: var(--primary); height: 55px; z-index: 5; transition: 0.25s transform ease; } #qa-search.active .qa-search { visibility: visible; transform: scale(1); } .qa-search-field, .qa-search-button { margin-top: 10px; border: none; } .qa-search-field { margin-top: 5px; margin-left: 5px; width: calc(100% - 10px) !important; background-color: unset; font-size: 20px; color: var(--on-surface); padding: 10px 46px !important; border-radius: 20px !important; } .qa-search-field:focus { outline: none; } .qa-search-field::placeholder { color: #9e9e9e; } .qa-search-button { position: fixed; top: 3px; right: 10px; width: 30px; background-color: unset; color: var(--on-primary); } .qa-search-button i { font-size: 30px; color: var(--on-surface); } .qa-nav-main, #qa-nav-main .qa-logo { transform: translateX(-255px); will-change: visibility; visibility: hidden; position: absolute; left: 0; width: 255px; background-color: var(--surface-solid, var(--surface)); transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.25s; } .qa-nav-main { z-index: 7; top: 56px; height: calc(100vh - 56px); box-shadow: var(--shadow); overflow: hidden; overflow-y: auto; } #qa-nav-main .qa-logo { z-index: 8; top: 0; height: 56px; padding-top: 13px; box-shadow: unset; border-start-end-radius: 30px; } #qa-nav-main .qa-logo .qa-logo-link { color: var(--on-surface); margin-left: 16px; } .menu-active .qa-nav-main { transform: translateX(0); visibility: visible; transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s; } .qa-nav-main-list { margin-top: 10px; list-style: none; width: 100%; } .qa-nav-main-item { width: 100%; } .qa-nav-main-link { display: block; padding-top: 13px; padding-bottom: 13px; padding-left: 60px; padding-right: 0; margin: 4px 0; width: calc(100% - 4px); color: var(--on-surface); border-start-end-radius: 25px; border-end-end-radius: 25px; } .qa-nav-main-link.qa-nav-main-selected { color: var(--selected); background-color: rgba(var(--primary-rgb), 0.12); } .qa-nav-main-link:hover, .qa-nav-sub-link:hover { background-color: rgba(var(--primary-rgb), 0.2); transition: 0.25s; } .qa-nav-main-link::before { font-family: 'Material Icons'; font-size: 24px; position: absolute; margin-top: -3px; margin-left: -46px; } #qa-cke-prev img { max-width: 100%; height: auto !important; } .qa-nav-user-link::before { font-family: 'Material Icons'; font-size: 24px; position: absolute; margin-top: -3px; margin-left: -41px; } .qa-favorite-image { padding: 6px; } .qa-favorite-image::before { font-family: 'Material Icons'; color: var(--link); position: absolute; margin-left: -7px; font-size: 18px; } .qa-nav-sub-clear { height: 42px; } .qa-nav-sub-list { position: absolute; top: 56px; left: 0; width: 100%; background-color: var(--primary); display: flex; overflow: hidden; overflow-x: auto; list-style: none; box-shadow: var(--appbar-shadow); z-index: 4; transition: 0.25s; } .qa-nav-sub-list::-webkit-scrollbar, .qa-q-item-tag-list::-webkit-scrollbar, .qa-nav-main::-webkit-scrollbar { display: none; } .qa-nav-sub-item { min-width: max-content; padding: 10px 0 13px 0; } .qa-nav-sub-link { min-width: max-content; padding: 10px; color: var(--on-primary); } .qa-nav-sub-link.qa-nav-sub-selected { border-bottom: 3px solid var(--on-primary); } .qa-sidebar, .qa-widget-side, .qa-feed, .qa-suggest-next, .qa-part-custom, .qa-part-form-activity, .qa-template-user .qa-part-message-list, .qa-template-account .qa-part-message-list, .qa-template-user-wall .qa-message-list-form .qa-form-tall-table, .qa-template-messages .qa-message-list-form .qa-form-tall-table, .qa-template-message .qa-message-list-form .qa-form-tall-table, .qa-part-form-message, .qa-part-form-profile, .qa-part-form-password, .qa-q-view-follows, .qa-q-view-closed { margin: 10px 0; background-color: var(--surface); padding: 16px var(--padding-lr) 8px var(--padding-lr); border-radius: var(--border); box-shadow: var(--shadow); } .qa-q-view-follows a, .qa-q-view-closed span { display: block; margin-top: 10px; margin-left: -24px; } .qa-q-view-follows, .qa-q-view-closed { padding-left: 40px; position: relative; } .qa-q-view-follows::before, .qa-q-view-closed::before { font-family: 'Material Icons'; font-size: 24px; position: absolute; top: 12px; left: 12px; } .qa-part-form, .qa-part-form-2 form, [class^='qa-part-form-plugin-'], .qa-part-form-q-edit, .qa-a-form { margin: 10px 0; background-color: var(--surface); padding: 4px var(--padding-lr) 16px var(--padding-lr); border-radius: var(--border); box-shadow: var(--shadow); } .qa-part-form-plugin-options { margin: 0 8px 20px; background-color: rgba(255, 255, 255, 0.15); } .qam-admin-plugins .qa-part-form { background-color: unset; box-shadow: unset; padding: unset; } .qa-sidebar, .qa-suggest-next { background-color: var(--secondary-light); color: var(--on-secondary); } .qa-activity-count { display: flex; flex-wrap: wrap; } .qa-activity-count-item { flex: 1; margin: 10px; text-align: center; } .qa-activity-count-item span { display: block; font-size: 1.3em; font-weight: 700; background: var(--secondary); border-radius: 22px; padding: 8px 16px; margin-bottom: 8px; max-width: 120px; margin-left: auto; margin-right: auto; } .qam-main-sidepanel { transition: 0.25s; } .qa-sidepanel, .qa-main { padding: 0 10px; min-height: 75vh; } .qa-widgets-full { transition: 0.25s; } .qa-widgets-full-top { margin-left: 0 !important; } .qa-main-heading { display: flex; flex-direction: row-reverse; justify-content: space-between; background: var(--surface); padding: 16px var(--padding-lr) 8px var(--padding-lr); border-radius: var(--border); box-shadow: var(--shadow); margin-bottom: 20px !important; } .qa-main-heading h1 { width: 100%; font-size: 24px; margin-right: 10px; line-height: 1.15; font-weight: 500; } .qa-main-heading, #a_list_title, .qa-widget-main h2, .qa-part-form-2 h2 { margin-top: 20px; margin-bottom: 10px; line-height: 1.15; font-weight: 500; } [class^='qa-widget-'] h2 { line-height: 1.15; font-weight: 500; margin-bottom: 10px; } .qa-q-list-item { position: relative; margin: 8px 0; background-color: var(--surface); padding: 16px var(--padding-lr) 0 var(--padding-lr); border-radius: var(--border); box-shadow: var(--shadow); } .qa-q-list-item.qa-q-favorited { border-left: 3px solid var(--selected); border-start-start-radius: 0; border-start-end-radius: var(--border); border-end-start-radius: 0; border-end-end-radius: var(--border); padding-left: 13px; } .qa-q-item-title { font-size: 1.2rem; font-weight: normal; letter-spacing: 0.0125em; margin-bottom: 5px; } .qa-q-item-title a { color: var(--on-surface); } .qa-q-item-title a:visited, .qa-q-item-title a:visited p { color: #293949; } .dark-theme .qa-q-item-title a:visited, .dark-theme .qa-q-item-title a:visited p { color:var(--on-surface); } @media (prefers-color-scheme: dark) { .qa-q-item-title a:visited, .qa-q-item-title a:visited p { color:var(--on-surface); } } .qa-q-item-title .material-icons, .qa-main-heading h1 span { vertical-align: middle; margin-right: 6px; } .qam-q-post-meta { min-height: 50px; padding-left: 50px; margin-right: 18px; } .qa-q-view-main > .qam-q-post-meta { min-height: 60px; padding-left: 60px; } .qa-template-user-questions .qam-q-post-meta, .qa-template-user-answers .qam-q-post-meta, .qa-template-user-activity .qam-q-post-meta { min-height: 30px; padding-left: 0; } .qa-q-item-avatar-meta, .qa-q-view-avatar-meta, .qa-a-item-avatar-meta { font-size: 1rem; line-height: 1.25rem; font-weight: 400; letter-spacing: 0.03125em; } .qa-q-item-avatar, .qa-q-view-avatar, .qa-a-item-avatar, .qa-message-avatar, .qa-c-item-avatar { position: absolute; height: 40px; width: 40px; margin-left: -50px; border-radius: 50%; overflow: hidden; } .qa-c-item-avatar { height: 20px; width: 20px; margin-left: -30px; } .qa-c-list-item .qam-q-post-meta { min-height: 30px; padding-left: 30px; } .qa-q-view-avatar { height: 50px; width: 50px; margin-left: -60px; } .qa-part-form-profile .qa-avatar-link { position: absolute; height: 200px; width: 200px; border-radius: 50%; overflow: hidden; transform: translateX(-50%); display: unset; } .qa-avatar-image { width: 100%; height: auto; } .qa-q-item-when, .qa-q-view-when, .qa-a-item-when, .qa-c-item-when, .qa-q-item-where-data, .qa-q-view-where-data, .qa-q-item-who-data, .qa-q-view-who-data, .qa-a-item-who-data, .qa-c-item-who-data, .qa-message-who-data, .qa-view-count { font-weight: 500; } .qa-view-count::before { position: relative; top: -2px; content: '.'; font-size: 18px; font-weight: 700; } .qa-q-item-tag-list, .qa-q-view-tag-list { list-style: none; display: flex; margin-top: 10px; margin-bottom: 4px; overflow: hidden; overflow-x: auto; } .qa-q-view-tag-list { margin-top: 14px; margin-bottom: 10px; } .qa-q-item-tag-item,.qa-q-view-tag-item { background-color: var(--secondary); border-radius: 8px; margin-right: 8px; height: 32px; min-width: max-content } .qa-tag-link { padding: 6px 16px; border-radius: 8px; color: var(--on-secondary); font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: .1px; display: block } body.light-theme .qa-q-item-tag-item,body.light-theme .qa-q-view-tag-item { background-color: var(--surface); border-radius: 5px; min-width: max-content; padding: 4px; } body.light-theme .qa-tag-link { background: #e67e22 !important; color: #fff !important; display: inline-block; font-family: "Ubuntu", "Helvetica", "Arial", "FreeSans", sans-serif; font-size: 11px !important; line-height: 1.5em !important; padding: 2px 8px !important; margin-bottom: 3px !important; text-decoration: none !important; transition: background 0.25s ease-in-out; display: block; } .qa-tag-link.qa-tag-favorited::before { font-family: 'Material Icons'; font-size: 18px; margin-right: 8px; margin-left: -8px; vertical-align: bottom; } .qa-q-item-stats { display: flex; color: var(--link); min-height: 10px; margin: 0; border-top: 1px solid transparent; } .qa-voting { display: flex; margin-right: auto; align-items: center; } .qa-q-list-vote-disabled .qa-voting { display: none; } .qa-a-count { padding: 10px; padding-right: 0; } .qa-a-count-selected { padding-right: 22px; } .qa-template-user-activity .qa-a-count { padding-left: 0; padding-right: 20px; } .qa-a-count-zero span { color: var(--error); } .qa-a-count-selected span { color: var(--selected); } .qa-a-count-selected::after { font-family: 'Material Icons'; text-transform: none; color: var(--selected); position: absolute; margin-left: 5px; font-size: 18px; } .qa-suggest-next { margin-bottom: 20px; text-align: center; } .qam-ask { z-index: 4; background-color: var(--primary); border-radius: 16px; height: 56px; position: fixed; box-shadow: var(--fab-shadow); bottom: 16px; right: 16px; } .qam-ask-link { padding: 18px; padding-right: 20px; border-radius: 16px; color: var(--on-primary); font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: 0.1px; display: block; } .qam-ask .material-icons { margin-right: 12px; color: var(--on-primary); vertical-align: middle; line-height: 14px; } .qa-footer { margin-top: 20px; padding: 10px; transition: 0.25s; } .qa-nav-footer-list { display: flex; list-style: none; flex-wrap: wrap; margin-bottom: 16px; } .qa-nav-footer-item { margin-right: 16px; margin-bottom: 8px; } .qa-attribution { margin-right: 10px; margin-bottom: 10px; } #theme-toggle { position: absolute; top: 14px; right: 70px; color: var(--on-primary); font-size: 30px; z-index: 5; cursor: pointer; } .qa-form-tall-table, .qa-top-tags-table, .qa-top-users-table, .qa-form-wide-table { width: 100%; width: -moz-available; width: -webkit-fill-available; width: stretch; border-spacing: 0; } .qa-part-form-profile .qa-form-wide-label { min-width: max-content; } .qa-form-tall-label, .qa-form-wide-label { padding-top: 20px; } .qa-form-tall-ok, .qa-form-wide-ok { background-color: var(--primary-dark); color: var(--on-primary); margin-top: 10px; padding: 8px 10px !important; border-radius: var(--border); box-shadow: var(--shadow); } .qa-form-tall-ok { display: block; } .qa-form-tall-ok::before, .qa-form-wide-ok::before { font-family: 'Material Icons'; font-size: 18px; margin-right: 10px; vertical-align: bottom; } .qa-form-tall-ok span, .qa-form-wide-ok span { color: var(--on-primary); } .qa-form-tall-data { padding-top: 10px; } .qa-form-wide-data { padding-top: 20px; } .qa-form-tall-note { margin-top: 5px; } .qa-form-tall-buttons, .qa-form-wide-buttons { padding-top: 10px; } .qa-form-tall-error { color: var(--error); } .qa-form-tall-data ul { margin-left: 20px; } .qa-form-tall-data ul li { margin-top: 10px; } .qa-form-tall-data small, .qa-form-tall-static a { line-height: 28px; } .qa-form-tall-button, .qa-form-wide-button, .qa-form-basic-button, .qa-form-light-button { border: none; border-radius: var(--btn-border); cursor: pointer; } .qa-form-tall-button-save, .qa-form-wide-button-save, .qa-form-wide-button-saverecalc, .qa-form-wide-button-dosave, .qa-form-tall-button-0, .qa-form-tall-button-ask, .qa-form-tall-button-login, .qa-form-tall-button-register, .qa-form-wide-button-setbonus, .qa-form-tall-button-post, .qa-form-wide-button-edit, .qa-form-wide-button-unblock, .qa-form-wide-button-change, .qa-form-tall-button-saveview, .qa-form-wide-button-account, .qa-form-tall-button-comment, .qa-form-tall-button-answer, .qa-form-light-button-answer, .qa-form-light-button-follow, .qa-form-tall-button-send, .qa-form-light-button-reply, .qa-form-tall-button-close, .qa-form-light-button-reshow, .qa-form-light-button-clearflags { margin-top: 10px; background-color: var(--selected); color: var(--on-selected); } .qa-form-tall-button-reset, .qa-form-wide-button-reset, .qa-form-tall-button-addpage, .qa-form-tall-button-addlink, .qa-form-wide-button-showdefaults, [class*='qa-form-basic-button-re'], .qa-form-tall-button-add, .qa-form-tall-button-cancel, .qa-form-wide-button-block, .qa-form-wide-button-hideall, .qa-form-light-button-comment, .qa-form-tall-button-1 { margin-top: 10px; background-color: transparent; border: 1px solid var(--selected); color: var(--selected); padding-top: 6px !important; padding-bottom: 6px !important; } .qa-form-wide-button-delete_expired, .qa-form-wide-button-delete_all, .qa-form-wide-button-delete, .qa-form-light-button-delete, .qa-form-basic-button-delete_hidden { margin-top: 10px; background-color: var(--error); color: var(--on-error); } .qa-form-basic-button { margin-top: 20px; } .qa-c-list-item .qa-form-light-button-comment { margin-top: 2px; font-size: 0.9em; padding: 3px 10px !important; } .qa-form-light-button-answer, .qa-q-view-buttons .qa-form-light-button-comment { min-width: 146px; } .qa-part-q-view, .qa-a-list-item, .qa-message-item, .qa-c-list-item { margin: 8px 0; background-color: var(--surface); padding: 16px var(--padding-lr) 8px var(--padding-lr); border-radius: var(--border); box-shadow: var(--shadow); } .qa-c-list-item { padding: 12px 12px 6px 12px; } .qa-a-list-item-selected { border: 3px solid var(--selected); border-top-width: 8px; } .qam-stats-buttons { display: flex; flex-wrap: wrap; } .qam-stats-buttons .qa-voting { margin-top: 10px; } .qa-a-selection { background: var(--secondary); border-radius: 8px; max-width: fit-content; margin-bottom: 16px; } .qa-a-selection input { position: absolute; z-index: 4; opacity: 0; width: 40px; height: 32px; cursor: pointer; } .qa-a-selection input.qa-a-unselect-button { width: 136px; height: 32px; } .qa-a-selected { display: none; } .qa-a-selected-text { display: inline-block; color: var(--selected); vertical-align: middle; margin-right: 8px; } .qa-a-selection i { font-size: 24px; vertical-align: middle; } .qa-a-selection i.unselect { color: var(--error); } .qa-a-selection i.select { color: var(--selected); padding: 4px 8px; } .qa-a-selection i.selected { color: var(--selected); margin-left: 8px; margin-right: 4px; margin-top: 4px; margin-bottom: 4px; } .qa-q-view-content, .qa-a-item-content { font-size: 16px; line-height: 1.5; font-family: Roboto; padding: 20px 0; border-top: 1px solid #4b4c4c; border-bottom: 1px solid #2c2c2d; } body.light-theme .qa-q-view-content, body.light-theme .qa-a-item-content { border-top: 1px solid #bdc3c7 !important; border-bottom: 1px solid #dee1e3 !important; } .qa-c-item-content { font-size: 0.85em; margin-left: 30px; } .qa-post-content p, .qa-part-custom p { padding: 5px 0; } .qa-post-content img { max-width: 100%; height: auto !important; } .qa-post-content li, .qa-part-custom li { margin-left: 25px; } .qa-post-content ul, .qa-part-custom ul, .qa-post-content ol, .qa-part-custom ol { margin: 5px 0; } .qa-post-content blockquote { background-color: rgba(var(--primary-rgb), 0.12); padding: 5px; padding-left: 20px; border-left: 5px solid var(--primary-light); } .qa-q-view-content table, .qa-a-item-content table, .qa-c-item-content table { width: 100%; border-collapse: collapse; margin-bottom: 20px; } .qa-q-view-content tr:hover, .qa-a-item-content tr:hover, .qa-c-item-content tr:hover { background-color: var(--primary); } body.light-theme .qa-q-view-content tr:hover, body.light-theme .qa-a-item-content tr:hover, body.light-theme .qa-c-item-content tr:hover { background-color: #f4f4f4 !important; } .qa-q-view-content th, .qa-a-item-content th, .qa-c-item-content th, .qa-q-view-content td, .qa-a-item-content td, .qa-c-item-content td { padding: 10px; border: 1px solid #e0e0e0; text-align: left; } .qa-q-view-content th, .qa-a-item-content th, .qa-c-item-content th { background-color: #eaeaea; font-weight: 700; } .qa-q-view-content td, .qa-a-item-content td, .qa-c-item-content td { } .qa-q-view-content ul, .qa-a-item-content ul, .qa-c-item-content ul, .qa-q-view-content ol, .qa-a-item-content ol, .qa-c-item-content ol { margin-left: 20px; padding: 0; } .qa-post-content table { max-width: 100%; min-width: 50%; border-collapse: collapse; } .qa-post-content th, .qa-post-content td { padding: 5px; } .qa-template-admin .qa-q-item-content img { max-width: 100%; height: auto !important; } .qa-c-item-link { display: block; padding: 10px 0; line-height: 1.4em; font-size: 1.2em; } .qa-error { background-color: var(--error); color: var(--on-error); padding: 10px; margin: 10px 0; border-radius: var(--border); box-shadow: var(--shadow); } .qa-error::before { font-family: 'Material Icons'; font-size: 18px; margin-right: 10px; vertical-align: bottom; } .qa-error a { color: var(--primary-light-700); } .qa-form-wide-label { font-weight: 700; display: block; margin-right: 10px; } .qa-form-tall-image { text-align: center; min-height: 200px; } .qa-part-form-profile .qa-form-wide-label::before { font-family: 'Material Icons'; font-size: 18px; font-weight: normal; vertical-align: middle; padding-right: 8px; } #level .qa-form-wide-static a[href*='message'] { margin-top: 10px; background-color: var(--selected); color: var(--on-selected); padding: 7px 16px; border-radius: var(--btn-border); cursor: pointer; white-space: nowrap; display: block; width: min-content; } #level .qa-form-wide-static a[href*='message']::before { font-family: 'Material Icons'; font-size: 18px; vertical-align: middle; margin-left: -5px; margin-right: 10px; } .qa-category-link.qa-cat-favorited { margin-left: 20px; } .qa-category-link.qa-cat-favorited::before { font-family: 'Material Icons'; position: absolute; margin-left: -20px; font-size: 18px; } .qa-browse-cat-list, .qa-nav-cat-list { list-style: none; } .qa-browse-cat-list-2, .qa-browse-cat-list-3, .qa-nav-cat-list-2, .qa-nav-cat-list-3 { margin-top: 10px; } .qa-browse-cat-item, .qa-nav-cat-item { padding: 10px; margin: 5px 0; background-color: var(--surface); border-radius: var(--border); box-shadow: var(--shadow); display: flex; } .qa-nav-cat-item { display: block; background-color: rgba(0, 0, 0, 0.025); } .qa-browse-cat-open { background-color: rgba(0, 0, 0, 0.075); display: block; padding-bottom: 1px; } .qa-browse-cat-note a { min-width: max-content; } .qa-browse-cat-link { margin-left: 20px; margin-right: auto; } .qa-browse-cat-link.qa-browse-cat-favorited { margin-left: 40px; } .qa-browse-cat-link::before { font-family: 'Material Icons'; font-size: 24px; position: absolute; margin-left: -26px; margin-top: -3px; } .qa-browse-cat-link.qa-browse-cat-favorited::before { margin-left: -46px; } .qa-browse-cat-nolink { margin-right: auto; } .qa-browse-cat-favorited, .qa-nav-cat-favorited { position: relative; margin-left: 20px; } .qa-browse-cat-favorited::after, .qa-nav-cat-favorited::after { position: absolute; font-family: 'Material Icons'; font-size: 18px; left: 0; margin-left: -22px; } .qa-top-tags-table tbody { display: grid; grid-template-columns: repeat(2, calc(50% - 5px)); column-gap: 10px; } .qa-top-tags-table .qa-tag-link { display: inline-block; padding: 0; padding-left: 5px; } .qa-top-tags-table tr { margin: 5px 0; background-color: var(--surface); padding: 10px 5px; border-radius: var(--border); box-shadow: var(--shadow); display: flex; } .qa-top-tags-count { margin-top: -10px; margin-bottom: -10px; margin-left: -5px; margin-right: 0; padding: 10px; padding-right: 5px; border-start-start-radius: var(--border); border-start-end-radius: 0; border-end-start-radius: var(--border); border-end-end-radius: 0; min-width: max-content; background-color: var(--primary-light); color: var(--on-primary); } .qa-top-users-table tbody { width: 100%; display: grid; grid-template-columns: repeat(3, calc(100% / 3 - 10px / 3)); gap: 5px; margin: 8px 0; } .qa-top-users-table tr { width: 100%; position: relative; aspect-ratio: 1 / 1; overflow: hidden; padding-top: 75%; border-radius: var(--border); } .qa-avatar-link { display: block; } .qa-top-users-label img { position: absolute; top: 0; left: 0; aspect-ratio: 1 / 1; object-fit: cover; } .qa-top-users-table .qa-user-link { position: absolute; bottom: 0; text-align: center; width: 100%; background-color: rgba(0, 0, 0, 0.5); padding: 5px 0 20px 0; font-size: 1.25em; color: white; line-height: 20px; } .qa-user-link.qa-user-favorited { padding-left: 20px; } .qa-user-link.qa-user-favorited::before { font-family: 'Material Icons'; position: absolute; margin-left: -20px; font-size: 18px; } .qa-top-users-score { position: absolute; width: 100%; bottom: 2px; text-align: center; color: white; white-space: nowrap; } .qa-ranking-users-level tr { aspect-ratio: 2 / 1; } .qa-part-q-list h2, .qa-part-ranking-users h2, .qa-part-ranking-tags h2, .qa-part-nav-list-categories h2 { margin-top: 20px; margin-bottom: 10px; line-height: 1.15; font-weight: 500; font-size: 20px; } .qa-part-q-list h2::before, .qa-part-ranking-users h2::before, .qa-part-ranking-tags h2::before, .qa-part-nav-list-categories h2::before { font-family: 'Material Icons'; font-size: 24px; vertical-align: middle; margin-right: 16px; } .qa-c-form h2, .qa-a-form h2 { padding-top: 20px; margin-bottom: 10px; line-height: 1.15; font-weight: 500; } .qa-part-form-activity h2, .qa-part-message-list h2, .qa-part-form-password h2 { margin-bottom: 10px; line-height: 1.15; font-weight: 500; } .qa-part-nav-list-categories .qa-browse-cat-item { background-color: var(--surface); } .qa-part-nav-list-categories .qa-browse-cat-open { padding-bottom: 10px; } .qa-favoriting input { position: absolute; z-index: 4; opacity: 0; width: 30px; margin-left: -2px; cursor: pointer; height: 30px; } .qa-favoriting i { margin-top: 5px; padding-top: 5px; font-size: 30px; color: var(--link); } .qa-waiting { display: none !important; } .qa-page-links { margin: 10px 0; background-color: var(--surface); padding: 8px var(--padding-lr); border-radius: var(--border); box-shadow: var(--shadow); } .qa-page-links .qa-page-links-label { display: none; } .qa-page-links-list { display: flex; flex-wrap: wrap; justify-content: center; list-style: none; } .qa-page-links-item { margin: 2px; padding: 6px 0 2px 0; } .qa-page-selected { padding: 6px 8px; border-radius: var(--border); background-color: var(--secondary); color: var(--on-secondary); } .qa-page-ellipsis { padding: 6px 4px; } .qa-page-link { padding: 6px 8px; border-radius: var(--border); color: var(--link); } .qa-page-links-item a:hover { background-color: var(--secondary-light); color: var(--on-secondary); } .qa-page-prev, .qa-page-next { visibility: hidden; font-size: 1px; letter-spacing: -1px; } .qa-page-prev::before, .qa-page-next::before { font-size: 18px; letter-spacing: initial; font-family: 'Material Icons'; visibility: visible; background-color: var(--primary); color: var(--on-primary); padding: 6px; border-radius: var(--border); } .qa-vote-buttons input { position: absolute; z-index: 1; opacity: 0; cursor: pointer; width: 0; height: 32px; } .qa-vote-buttons i { margin: 5px; color: gray; vertical-align: middle; } .qa-vote-buttons i.enabled { color: var(--on-surface); } .qa-vote-buttons i.voted_up { color: var(--link); } .qa-vote-buttons i.voted_down { color: var(--error); } .qa-upvote-count-pad, .qa-downvote-count-pad { display: none; } .qa-upvote-count.disabled, .qa-downvote-count.disabled { color: gray; } .qa-upvote-count.enabled, .qa-downvote-count.enabled { color: black; } .qa-upvote-count.selected { color: var(--link); } .qa-downvote-count.selected { color: var(--error); } .qam-vote-info { margin-left: 12px; cursor: help; } .qa-template-user .qa-main, .qa-template-account .qa-main, .qa-template-admin .qa-main, .qa-template-ask .qa-main, .qa-template-feedback .qa-main { width: 100%; } .qa-template-login .qa-main, .qa-template-register .qa-main, .qa-template-forgot .qa-main { max-width: 400px; margin: 10px auto; } .qa-template-user .qa-sidepanel, .qa-template-account .qa-sidepanel, .qa-template-login .qa-sidepanel, .qa-template-register .qa-sidepanel, .qa-template-forgot .qa-sidepanel, .qa-template-admin .qa-sidepanel, .qa-template-ask .qa-sidepanel, .qa-template-feedback .qa-sidepanel { display: none; } .qa-ask-box input { width: 100% !important; } .qa-related-qs .qa-related-q-list, .qa-ask-similar .qa-q-title-list { margin-left: 0; list-style: none; } .qa-related-qs .qa-related-q-item, .qa-ask-similar .qa-q-title-item { padding: 8px 0; display: block; border-bottom: 0.1px solid var(--on-surface); } .qa-related-qs .qa-related-q-item:last-child, .qa-ask-similar .qa-q-title-item:last-child { border-bottom: none; } .qam-rest-buttons { margin-left: auto; } .qam-stats-buttons .qa-form-light-button-edit, .qam-stats-buttons .qa-form-light-button-close, .qam-stats-buttons .qa-form-light-button-hide, .qam-stats-buttons .qa-form-light-button-flag, .qam-stats-buttons .qa-form-light-button-unflag, .qam-stats-buttons .qa-form-light-button-clearflags, .qam-stats-buttons .qa-form-light-button-retagcat, .qam-stats-buttons .qa-form-light-button-reopen, .qam-stats-buttons .qa-form-light-button-reshow, .qam-stats-buttons .qa-form-light-button-delete, .qam-stats-buttons .qa-form-light-button-claim { display: none; } .qa-q-view-main, .qa-c-list-item, .qa-a-list-item { position: relative; } .qam-q-extra-menu { display: inline-block; position: absolute; top: 19px; right: 19px; } .qa-c-list-item .qam-q-extra-menu, .qa-a-list-item .qam-q-extra-menu { top: 29px; right: 29px; } .qam-q-extra-menu .qa-form-light-button-answer, .qam-q-extra-menu .qa-form-light-button-comment, .qam-q-extra-menu .qa-form-light-button-follow { display: none; } .qam-q-extra-menu .qa-q-view-buttons, .qam-q-extra-menu .qa-c-item-buttons, .qam-q-extra-menu .qa-a-item-buttons { position: absolute; right: 0px; padding: 8px 0; box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.302), 0 1px 3px 1px rgba(60, 64, 67, 0.149); background-color: var(--surface-solid, var(--surface)); min-width: 150px; will-change: opacity, transform; transition: opacity 0.3s cubic-bezier(0.175, 0.885, 0.22, 1.105), transform 0.3s cubic-bezier(0.175, 0.885, 0.22, 1.105); transform: scale(0.2); transform-origin: 100% 0; pointer-events: none; visibility: hidden; opacity: 0; border-radius: var(--border); z-index: 3; } .qam-q-extra-menu.active .qa-q-view-buttons, .qam-q-extra-menu.active .qa-c-item-buttons, .qam-q-extra-menu.active .qa-a-item-buttons { transform: scale(1); pointer-events: auto; visibility: visible; opacity: 1; } .qam-q-extra-menu .qa-form-light-button { background-color: unset; width: 100%; margin: 0; border-radius: unset; text-align: unset; padding: 0.8rem 16px; color: var(--on-surface); } .qam-q-extra-menu .qa-form-light-button:hover { background-color: rgba(var(--primary-rgb), 0.12); } .qam-q-extra-menu-toggle { position: absolute; top: -20px; right: -25px; cursor: pointer; } .qam-q-extra-menu-toggle::before { content: ''; width: 32px; height: 32px; background-color: rgba(var(--primary-rgb), 0.12); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.22, 1.105); position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-56%) scale(0.2); border-radius: 50px; opacity: 0; } .qam-q-extra-menu-toggle::after { z-index: 3; content: ''; top: 0; left: 0; width: 100%; height: 100%; position: fixed; visibility: hidden; } .qam-q-extra-menu.active .qam-q-extra-menu-toggle::before { opacity: 1; transform: translateX(-50%) translateY(-56%) scale(1); } .qam-q-extra-menu.active .qam-q-extra-menu-toggle::after { visibility: visible; } .qa-q-view-who-pad, .qa-q-item-who-pad, .qa-a-item-who-pad, .qa-c-item-who-pad, .qa-message-who-pad { display: none; } .qa-user-link span { color: var(--link); } .qa-q-view-where-pad, .qa-q-item-where-pad { visibility: hidden; } .qa-q-view-where-pad::before, .qa-q-item-where-pad::before { visibility: visible; font-family: 'Material Icons'; position: absolute; margin-left: -5px; font-size: 24px; } .qa-q-item-what::before, .qa-q-view-what::before, .qa-a-item-what::before { content: '\A'; display: block; } .qa-message-what { display: block; } .qa-q-item-what, .qa-q-view-what, .qa-a-item-what, .qa-c-item-what, .qa-q-item-when, .qa-q-view-when, .qa-a-item-when, .qa-c-item-when, .qa-message-when, .qa-view-count { font-size: 0.85em; opacity: 0.75; color: var(--on-surface); letter-spacing: 0.02px; } .qam-what-2 { position: absolute; top: 40px; right: -2px; } .qa-c-list-item .qam-what-2, .qa-a-list-item .qam-what-2 { top: 45px; right: 8px; } .qam-what-2 .qa-q-item-what::before, .qam-what-2 .qa-q-view-what::before, .qam-what-2 .qa-a-item-what::before { content: ''; display: unset; } .qam-what-2 i { position: absolute; top: -6px; right: 0; z-index: 1; cursor: pointer; } .qam-what-2-body { position: absolute; top: -9px; right: -2px; padding: 1px 7px; padding-right: 26px; width: max-content; background-color: var(--secondary); color: var(--on-secondary); border-radius: 20px; transform: scale(0.02); transform-origin: 100% 50%; pointer-events: none; visibility: hidden; opacity: 0; transition: opacity 0.3s cubic-bezier(0.175, 0.885, 0.22, 1.105), transform 0.3s cubic-bezier(0.175, 0.885, 0.22, 1.105); } .qam-what-2.active .qam-what-2-body { transform: scale(1); pointer-events: auto; visibility: visible; opacity: 1; } .qa-q-view-flags span, .qa-a-item-flags span, .qa-c-item-flags span { color: var(--error); font-size: 0.85em; opacity: 0.75; letter-spacing: 0.02px; } .qa-q-view-flags::before, .qa-a-item-flags::before, .qa-c-item-flags::before { position: relative; top: -2px; content: '.'; font-size: 18px; font-weight: 700; } .qa-q-view-hidden, .qa-a-list-item-hidden, .qa-c-item-hidden { opacity: 0.4; } .tag-cloud a, #tag_hints .qa-tag-link, #tag_search_hints .qa-tag-link { display: inline-block; background-color: var(--secondary); color: var(--on-secondary); margin-right: 5px; margin-top: 5px; margin-bottom: 5px; padding: 6px 16px; border-radius: 8px; font-size: 14px; line-height: 20px; font-weight: 500; } .qa-feed-link { margin-left: 36px; margin-bottom: 6px; display: block; } .qa-feed-link::before { font-family: 'Material Icons'; font-size: 24px; position: absolute; margin-left: -36px; margin-top: -3px; } .qa-notice { background-color: var(--secondary); color: var(--on-secondary); padding: calc(1.2 * var(--padding-lr)) calc(1.6 * var(--padding-lr)); padding-right: 40px; position: relative; margin-top: 16px; border-radius: var(--border); box-shadow: var(--shadow); line-height: 1.2em; } .qa-notice-close-button { position: absolute; right: 0; top: 2px; background: none; border: none; padding-right: 12px !important; } @media (max-width: 360px) { #menu-toggle { left: 4px; } .qa-logo-link { margin-left: 40px; } #user-toggle { right: 4px; } #search-toggle { right: 44px; } } @media (min-width: 515px) { .qa-top-users-table tbody { grid-template-columns: repeat(4, calc(100% / 4 - 15px / 4)); } } @media (max-width: 767px) { .qa-main { margin-bottom: 40px; } .qa-sidepanel, .qa-main { padding: 0 8px; } .qa-footer { padding-bottom: 70px; } .qa-q-list-item.qa-q-favorited { padding-left: 7px; } .qa-nav-main, #qa-nav-main .qa-logo { width: calc(100% - 56px); max-width: 340px; } .qa-part-form-profile .qa-form-wide-data { display: block; padding: 10px 0; } .qa-q-view-main > .qam-stats-buttons .qam-rest-buttons { width: 100%; } .qa-q-view-buttons { display: flex; flex-wrap: wrap; column-gap: 8px; } .qa-form-light-button-answer, .qa-q-view-buttons .qa-form-light-button-comment { flex: 1; min-width: 200px; } } @media (min-width: 768px) { .qam-main-sidepanel { display: flex; } .qa-main { width: calc(100% - 300px); max-width: 1000px; } .qa-sidepanel { width: 300px; } .qa-attribution { float: left; } .qa-attribution:nth-child(3) { padding-left: 10px; border-left: 1px solid var(--on-surface); } .qa-top-users-table tbody { grid-template-columns: repeat(3, calc(100% / 3 - 10px / 3)); } } @media (max-width: 1023px) { .qa-nav-main { top: 0; box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); padding-top: 56px; height: 100vh; border-start-end-radius: 30px; border-end-end-radius: 30px; } .menu-active #qa-nav-main-clear { z-index: 6; background-color: rgba(0, 0, 0, 0.32); position: fixed; height: 100vh; width: 100%; top: 0; left: 0; } .menu-active #qa-nav-main .qa-logo { transform: translateX(0); visibility: visible; transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s; } .fab { position: fixed; bottom: 0; right: 0; text-align: end; margin-right: 16px; } #theme-toggle { position: unset; font-size: 26px; background: var(--secondary); color: var(--on-secondary); border-radius: 16px; box-shadow: var(--fab-shadow); padding: 10px; margin-bottom: 16px; } .qam-ask { position: unset; margin-bottom: 16px; } } @media (min-width: 1024px) { .qa-search { visibility: visible; transform: scale(1); } .qa-search { left: 310px; right: 310px; width: auto; max-width: 980px; margin: 0 auto; } .qa-search-field { width: 100% !important; background-color: var(--surface); margin-left: 0; padding-left: 16px !important; color: var(--on-surface); } #search-toggle { display: none; } .qa-part-form-profile { width: calc(60% - 10px); margin-right: 10px; float: left; } .qa-part-form-activity, .qa-part-form-password { width: 40%; float: right; } .qa-part-message-list { width: 40%; float: right; margin-top: 0; } .menu-active .qa-part-form-profile, .menu-active .qa-part-form-activity, .menu-active .qa-part-form-password, .menu-active .qa-part-message-list { width: unset; float: unset; margin: 10px 0; } .qa-template-user-wall .qa-part-message-list, .qa-template-messages .qa-part-message-list, .qa-template-message .qa-part-message-list { width: unset; float: unset; margin: 10px 0; } .qa-nav-main { z-index: 4; } .menu-active .qa-nav-sub-list { width: calc(100% - 255px); } .menu-active .qa-nav-sub-list, .menu-active .qam-main-sidepanel, .menu-active .qa-footer, .menu-active .qa-widgets-full { margin-left: 255px; } .qa-top-tags-table tbody { grid-template-columns: repeat(3, calc(33.3% - 7px)); } .menu-active .qa-top-tags-table tbody { grid-template-columns: repeat(2, calc(50% - 5px)); } .qa-top-users-table tbody { grid-template-columns: repeat(4, calc(100% / 4 - 15px / 4)); } .menu-active .qa-top-users-table tbody { grid-template-columns: repeat(3, calc(100% / 3 - 10px / 3)); } } @media (min-width: 1280px) { .qa-search { left: 340px; right: 480px; } .menu-active .qa-part-form-profile { width: calc(60% - 10px); margin-right: 10px; float: left; } .menu-active .qa-part-form-activity, .menu-active .qa-part-form-password { width: 40%; float: right; } .menu-active .qa-part-message-list { width: 40%; float: right; margin-top: 0; } .qa-template-user-wall.menu-active .qa-part-message-list, .qa-template-messages.menu-active .qa-part-message-list, .qa-template-message.menu-active .qa-part-message-list { width: unset; float: unset; margin: 10px 0; } .qa-nav-main { transform: translateX(0); visibility: visible; transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s; } .menu-active .qa-nav-main { transform: translateX(-255px); } .qa-nav-sub-list { margin-left: 255px; width: calc(100% - 255px); } .menu-active .qa-nav-sub-list { margin-left: 0; width: 100%; } .qam-main-sidepanel, .qa-footer, .qa-widgets-full { margin-left: 255px; } .menu-active .qam-main-sidepanel, .menu-active .qa-footer, .menu-active .qa-widgets-full { margin-left: 0; } .qa-main { width: calc(100% - 400px); } .qa-sidepanel { width: 400px; } } @media (min-width: 1440px) { .qa-top-tags-table tbody { grid-template-columns: repeat(3, calc(33.3% - 6.6px)); } .menu-active .qa-top-tags-table tbody { grid-template-columns: repeat(4, calc(25% - 7.5px)); } .menu-active .qa-top-users-table tbody { grid-template-columns: repeat(5, calc(100% / 5 - 20px / 5)); } } .qa-a-list-item:target { animation: answer-highlight 2s ease-in-out; } .qa-c-list-item:target { animation: comment-highlight 2s ease-in-out; } @keyframes answer-highlight { 0% { background-color: var(--selected); } 100% { background-color: var(--surface); } } @keyframes comment-highlight { 0% { background-color: var(--selected); } 100% { background-color: var(--surface); } } .qa-nav-main-link::before, .qa-q-view-follows::before, #userfield-3 .qa-form-wide-label::before { content: 'link'; } .qa-nav-main- .qa-nav-main-link::before { content: 'home'; } .qa-nav-main-activity .qa-nav-main-link::before { content: 'bar_chart'; } .qa-nav-main-qa .qa-nav-main-link::before { content: 'question_answer'; } .qa-nav-main-questions .qa-nav-main-link::before { content: 'live_help'; } .qa-nav-main-hot .qa-nav-main-link::before { content: 'local_fire_department'; } .qa-nav-main-unanswered .qa-nav-main-link::before { content: 'speaker_notes_off'; } .qa-nav-main-tag .qa-nav-main-link::before { content: 'local_offer'; } .qa-nav-main-categories .qa-nav-main-link::before, .qa-part-nav-list-categories h2::before { content: 'category'; } .qa-nav-main-user .qa-nav-main-link::before, .qa-part-ranking-users h2::before { content: 'groups'; } .qa-nav-main-ask .qa-nav-main-link::before, #lastwrite .qa-form-wide-label::before { content: 'edit'; } .qa-nav-main-admin .qa-nav-main-link::before, #permits .qa-form-wide-label::before { content: 'admin_panel_settings'; } .qa-nav-main-jee-neet-qna-books .qa-nav-main-link::before { content: 'book'; } .qa-nav-main-previous-year-papers .qa-nav-main-link::before { content: 'history'; } .qa-nav-user-updates .qa-nav-user-link::before { content: 'update'; } .qa-nav-user-logout .qa-nav-user-link::before { content: 'logout'; } .qa-nav-user-login .qa-nav-user-link::before, #lastlogin .qa-form-wide-label::before { content: 'login'; } .qa-nav-user-register .qa-nav-user-link::before { content: 'person_add'; } .qa-nav-user-messages .qa-nav-user-link::before { content: 'mail_outline'; } .qa-nav-user-points .qa-nav-user-link::before { content: 'payments'; } .qa-nav-user-favorites .qa-nav-user-link::before, .qa-favorite-image::before { content: 'star_border'; } .qa-nav-user-settings .qa-nav-user-link::before { content: 'brightness_medium'; } .qa-q-view-closed::before { content: 'lock'; } .qa-a-count-selected::after { content: 'check_circle'; } .qa-form-tall-ok::before, .qa-form-wide-ok::before { content: 'done'; } .qa-error::before { content: 'error_outline'; } #duration .qa-form-wide-label::before { content: 'date_range'; } #level .qa-form-wide-label::before { content: 'assignment_ind'; } #email .qa-form-wide-label::before { content: 'alternate_email'; } #userfield-1 .qa-form-wide-label::before { content: 'badge'; } #userfield-2 .qa-form-wide-label::before { content: 'location_on'; } #userfield-4 .qa-form-wide-label::before { content: 'account_circle'; } #userfield-5 .qa-form-wide-label::before { content: 'stars'; } #level .qa-form-wide-static a[href*='message']::before { content: 'mail_outline'; } .qa-browse-cat-closed .qa-browse-cat-link::before, .qa-browse-cat-open .qa-browse-cat-closed .qa-browse-cat-link::before { content: 'expand_more'; } .qa-browse-cat-open .qa-browse-cat-link::before { content: 'expand_less'; } .qa-tag-link.qa-tag-favorited::before, .qa-category-link.qa-cat-favorited::before, .qa-browse-cat-favorited::after, .qa-nav-cat-favorited::after, .qa-user-link.qa-user-favorited::before { content: 'star'; } .qa-part-q-list h2::before { content: 'chat'; } .qa-part-ranking-tags h2::before { content: 'local_offer'; } .qa-page-prev::before { content: 'arrow_back_ios_new'; } .qa-page-next::before { content: 'arrow_forward_ios'; } .qa-q-view-where-pad::before, .qa-q-item-where-pad::before { content: 'arrow_right'; } .qa-feed-link::before { content: 'rss_feed'; } body, body.light-theme, .qa-body-wrapper { --afk-accent: #2563EB; --afk-accent-2: #7C3AED; --afk-accent-ink: #ffffff; --afk-accent-soft: rgba(37, 99, 235, .10); --afk-accent-softer: rgba(37, 99, 235, .06); --afk-cyan: #22D3EE; --afk-success: #16A34A; --background: #F1F5F9; --surface: #ffffff; --surface-2: #F1F5F9; --on-surface: #0F172A; --on-background: #0F172A; --afk-muted: #64748B; --afk-border-c: #E2E8F0; --link: #2563EB; --primary: #2563EB; --primary-rgb: 37, 99, 235; --on-primary: #ffffff; --selected: #2563EB; --border: 14px; --btn-border: 10px; --afk-header: linear-gradient(120deg, #2563EB 0%, #7C3AED 100%); --shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 10px 26px rgba(15, 23, 42, .08); --appbar-shadow: 0 2px 14px rgba(37, 99, 235, .28); --fab-shadow: 0 10px 24px rgba(37, 99, 235, .40); } body.dark-theme, body.dark-theme .qa-body-wrapper { --afk-accent: #60A5FA; --afk-accent-2: #a78bfa; --afk-accent-soft: rgba(96, 165, 250, .16); --afk-accent-softer: rgba(96, 165, 250, .08); --afk-cyan: #22D3EE; --afk-success: #4ADE80; --background: #0F172A; --surface: #1B2537; --surface-solid: #1B2537; --surface-2: #253044; --on-surface: #E2E8F0; --on-background: #E2E8F0; --afk-muted: #94A3B8; --afk-border-c: #2B3A52; --link: #60A5FA; --primary: #3B82F6; --primary-rgb: 96, 165, 250; --on-primary: #ffffff; --selected: #60A5FA; --afk-header: linear-gradient(120deg, #1E40AF 0%, #6D28D9 100%); --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .45); --appbar-shadow: 0 2px 16px rgba(0, 0, 0, .6); --fab-shadow: 0 10px 24px rgba(0, 0, 0, .55); } @media (prefers-color-scheme: dark) { body:not(.light-theme), body:not(.light-theme) .qa-body-wrapper { --afk-accent: #60A5FA; --afk-accent-2: #a78bfa; --afk-accent-soft: rgba(96,165,250,.16); --afk-accent-softer: rgba(96,165,250,.08); --afk-cyan: #22D3EE; --afk-success: #4ADE80; --background: #0F172A; --surface: #1B2537; --surface-solid: #1B2537; --surface-2: #253044; --on-surface: #E2E8F0; --on-background: #E2E8F0; --afk-muted: #94A3B8; --afk-border-c: #2B3A52; --link: #60A5FA; --primary: #3B82F6; --primary-rgb: 96,165,250; --on-primary: #fff; --selected: #60A5FA; --afk-header: linear-gradient(120deg, #1E40AF 0%, #6D28D9 100%); --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45); --appbar-shadow: 0 2px 16px rgba(0,0,0,.6); --fab-shadow: 0 10px 24px rgba(0,0,0,.55); } } body { background: var(--background); line-height: 1.55; -webkit-font-smoothing: antialiased; } .qa-logo { background: var(--afk-header) !important; box-shadow: var(--appbar-shadow); height: 60px; } .qa-header-clear { height: 60px; } .qa-logo-link { color: #fff !important; font-weight: 800; letter-spacing: .2px; } #menu-toggle, #search-toggle, #user-toggle, #user-toggle i { color: #fff !important; } #user-toggle { top: 12px; } #menu-toggle, #search-toggle { top: 15px; } .qa-search-field { background: rgba(255,255,255,.16) !important; color: #fff !important; border-radius: 999px !important; border: 1px solid rgba(255,255,255,.28) !important; } .qa-search-field::placeholder { color: rgba(255,255,255,.8) !important; } .qa-search-button .material-icons, .qa-search-button { color: #fff !important; } .qa-nav-main-list { padding: 6px; } .qa-nav-main-link { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 10px; color: var(--on-surface); font-weight: 600; transition: background .15s ease, color .15s ease; } .qa-nav-main-link:hover { background: var(--afk-accent-soft); color: var(--afk-accent); } .qa-nav-main-link .material-icons { color: var(--afk-accent); } .qa-nav-main-selected > .qa-nav-main-link, .qa-nav-main-link.qa-nav-main-selected { background: var(--afk-accent); color: #fff; } .qa-nav-main-selected > .qa-nav-main-link .material-icons { color: #fff; } .qa-nav-main-link::before { position: static !important; margin: 0 !important; font-size: 20px !important; line-height: 1; color: var(--afk-accent); width: 22px; text-align: center; } .qa-nav-main-selected > .qa-nav-main-link::before, .qa-nav-main-link.qa-nav-main-selected::before { color: #fff; } .qa-main-heading { background: none !important; box-shadow: none !important; border-radius: 0 !important; font-size: 1.4rem; font-weight: 800; letter-spacing: -.01em; padding: 6px 2px 6px !important; color: var(--on-surface); } .qa-q-list-item { background: var(--surface); border: 1px solid var(--afk-border-c); border-radius: var(--border); box-shadow: var(--shadow); padding: 16px 18px; margin: 12px 0; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .qa-q-list-item:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(20,25,45,.12); border-color: rgba(var(--primary-rgb), .35); } .qa-q-item-avatar-meta, .qa-q-view-avatar-meta, .qa-a-item-avatar-meta { font-size: .875rem; line-height: 1.3rem; } .qa-q-item-title { font-size: 1.15rem; font-weight: 700; line-height: 1.4; margin: 4px 0 8px; } .qa-q-item-title a { color: var(--on-surface); transition: color .15s ease; } .qa-q-item-title a:hover { color: var(--afk-accent); } .qa-q-item-when, .qa-q-item-who-data, .qa-q-item-where-data, .qa-view-count, .qa-q-item-who-points-data { color: var(--afk-muted); font-weight: 500; } .qa-category-link { color: var(--afk-accent) !important; font-weight: 600; } .qa-user-link { color: var(--afk-accent); font-weight: 700; } .qa-q-item-tag-item, .qa-q-view-tag-item, body.light-theme .qa-q-item-tag-item, body.light-theme .qa-q-view-tag-item { background: none !important; padding: 0 !important; height: auto !important; margin-right: 8px !important; } .qa-q-item-tag-list, .qa-q-view-tag-list { align-items: center; margin-top: 4px; } .qa-tag-link, body.light-theme .qa-tag-link { background: var(--afk-accent-soft) !important; color: var(--afk-accent) !important; border: none !important; border-radius: 8px !important; font-weight: 600 !important; font-family: inherit !important; font-size: 12px !important; line-height: 1.4 !important; padding: 4px 10px !important; letter-spacing: .2px !important; transition: background .15s ease, color .15s ease !important; } .qa-tag-link:hover, body.light-theme .qa-tag-link:hover { background: var(--afk-accent) !important; color: #fff !important; } .qa-q-item-stats { align-items: center; padding-top: 4px; } .qa-voting { background: none !important; padding: 0 !important; border-radius: 0 !important; } .qa-vote-first-button, .qa-vote-second-button, .qa-vote-up-button, .qa-vote-down-button { color: var(--afk-muted); } .material-icons.voted_up, .material-icons.voted_down { color: var(--afk-accent) !important; } .qa-a-count { padding: 8px 0 !important; font-weight: 600; } .qa-a-count span, .qa-a-count-data { color: var(--afk-muted) !important; } .qa-a-count-zero span { color: var(--afk-muted) !important; } .qa-a-count-selected span, .qa-a-count-selected .qa-a-count-data { color: #16a34a !important; } body.dark-theme .qa-a-count-selected span, body.dark-theme .qa-a-count-selected .qa-a-count-data { color: #4ade80 !important; } .qa-form-tall-button, .qa-form-light-button, .qa-form-wide-button { background: var(--afk-accent); color: #fff; border: none; border-radius: var(--btn-border); padding: 10px 22px; font-weight: 700; box-shadow: 0 4px 14px rgba(var(--primary-rgb), .35); transition: filter .15s ease, box-shadow .15s ease, transform .05s ease; } .qa-form-tall-button:hover, .qa-form-light-button:hover, .qa-form-wide-button:hover { filter: brightness(1.07); box-shadow: 0 6px 18px rgba(var(--primary-rgb), .45); } .qa-form-tall-button:active, .qa-form-light-button:active, .qa-form-wide-button:active { transform: translateY(1px); } .qa-sidepanel > .qa-part-custom, .qa-sidepanel > .qa-part-nav-categories, .qa-sidepanel > form, .qa-sidepanel > div { background: var(--surface); border: 1px solid var(--afk-border-c); border-radius: var(--border); box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 16px; } .qa-widget-side { margin-bottom: 0; } .qa-part-title, .qa-widget-title { font-weight: 800; font-size: 1.1rem; margin-bottom: 8px; } .qa-nav-cat-link { color: var(--afk-accent); font-weight: 600; } .qa-nav-cat-link:hover { text-decoration: underline; } .qa-activity-count-item span { background: var(--afk-accent-soft) !important; color: var(--afk-accent) !important; border-radius: 14px; } input[type='text'], input[type='password'], input[type='email'], textarea, select { border: 1px solid var(--afk-border-c); border-radius: 10px; transition: border-color .15s ease, box-shadow .15s ease; } input[type='text']:focus, input[type='password']:focus, input[type='email']:focus, textarea:focus, select:focus { border-color: var(--afk-accent); box-shadow: 0 0 0 3px var(--afk-accent-soft); outline: none; } .qam-ask { background: var(--afk-header) !important; box-shadow: var(--fab-shadow); border-radius: 999px; } .qam-ask-link, .qam-ask .material-icons { color: #fff !important; } .qa-avatar-image { border-radius: 50%; } ::selection { background: rgba(var(--primary-rgb), .85); color: #fff; } a:focus-visible, button:focus-visible, input:focus-visible, [onclick]:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--afk-accent); outline-offset: 2px; border-radius: 6px; } .qa-nav-main-wl_ask .qa-nav-main-link::before { content: 'help_outline'; } .qa-nav-main-wl_build .qa-nav-main-link::before { content: 'rocket_launch'; } .qa-nav-main-wl_discuss .qa-nav-main-link::before { content: 'forum'; } .qa-nav-main-wl_connect .qa-nav-main-link::before { content: 'group'; } .qa-nav-main-wl_ask .qa-nav-main-link, .qa-nav-main-wl_build .qa-nav-main-link, .qa-nav-main-wl_discuss .qa-nav-main-link, .qa-nav-main-wl_connect .qa-nav-main-link { font-weight: 700; } .qa-nav-main-wl_connect { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--afk-border-c); } .wlb-btn{display:inline-flex;align-items:center;gap:6px;font-weight:700;text-decoration:none;border-radius:var(--btn-border,10px);padding:9px 16px;line-height:1.2;font-size:.9rem;cursor:pointer;transition:transform .06s ease,box-shadow .2s ease} .wlb-btn:hover{transform:translateY(-1px)} .wlb-btn-primary{background:var(--afk-header);color:#fff;box-shadow:var(--fab-shadow)} .wlb-btn-demo{background:var(--afk-accent);color:#fff} .wlb-btn-repo{background:var(--surface-2);color:var(--on-surface);border:1px solid var(--afk-border-c)} .wlb-hero{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:8px 0 22px;padding:22px 24px;border-radius:var(--border,14px);background:var(--afk-header);color:#fff;box-shadow:var(--shadow)} .wlb-hero-title{margin:0;font-size:2rem;font-weight:800;color:#fff} .wlb-hero-tagline{margin:6px 0 0;color:rgba(255,255,255,.88);max-width:60ch} .wlb-hero .wlb-btn-primary{background:#fff;color:var(--afk-accent);box-shadow:none} .wlb-hero .wlb-btn-primary:hover{box-shadow:0 6px 18px rgba(0,0,0,.18)} .wlb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;margin:0 0 24px} .wlb-card{background:var(--surface);border:1px solid var(--afk-border-c);border-radius:var(--border,14px);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .12s ease,box-shadow .2s ease} .wlb-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(15,23,42,.14)} .wlb-card-cover{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--surface-2)} .wlb-card-cover img{width:100%;height:100%;object-fit:cover;display:block} .wlb-card-cover-empty{display:block;width:100%;height:100%;background:var(--afk-header);opacity:.9} .wlb-card-body{padding:14px 15px 15px;display:flex;flex-direction:column;gap:10px;flex:1} .wlb-card-title{margin:0;font-size:1.02rem;font-weight:700;line-height:1.3} .wlb-card-title a{color:var(--on-surface);text-decoration:none} .wlb-card-title a:hover{color:var(--afk-accent)} .wlb-card-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} .wlb-card-author{color:var(--afk-muted);font-size:.82rem} .wlb-chips{display:flex;flex-wrap:wrap;gap:6px} .wlb-chip{display:inline-block;font-size:.74rem;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--afk-accent-soft);color:var(--afk-accent);text-decoration:none;border:1px solid transparent} a.wlb-chip:hover{border-color:var(--afk-accent)} .wlb-chip-more{background:transparent;color:var(--afk-muted)} .wlb-links{display:flex;gap:8px;flex-wrap:wrap} .wlb-links-sm .wlb-btn{padding:6px 12px;font-size:.8rem} .wlb-links-lg .wlb-btn{padding:10px 18px} .wlb-project-banner{margin:0 0 18px} .wlb-project-cover{border-radius:var(--border,14px);overflow:hidden;border:1px solid var(--afk-border-c);box-shadow:var(--shadow);max-height:440px} .wlb-project-cover img{width:100%;height:auto;display:block;object-fit:cover} .wlb-project-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px} .wlb-featured{margin:6px 0 26px} .wlb-featured-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px} .wlb-featured-title{margin:0;font-size:1.3rem;font-weight:800;color:var(--afk-accent)} .wlb-featured-all{font-weight:700;text-decoration:none;color:var(--afk-accent)} .wlb-featured-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px} .wlb-featured-card{display:flex;flex-direction:column;gap:8px;text-decoration:none;background:var(--surface);border:1px solid var(--afk-border-c);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);transition:transform .12s ease} .wlb-featured-card:hover{transform:translateY(-3px)} .wlb-featured-cover{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--surface-2)} .wlb-featured-cover img{width:100%;height:100%;object-fit:cover;display:block} .wlb-featured-name{padding:0 11px 12px;font-weight:700;font-size:.9rem;color:var(--on-surface);line-height:1.3} .wlb-form-intro{color:var(--afk-muted);margin:-4px 0 6px} .wlb-field-note{color:var(--afk-muted);font-size:.82rem;margin-top:5px} .wlb-optional{color:var(--afk-muted);font-weight:400;font-size:.85em} .wlb-file-input{display:block;margin-top:4px} @media (max-width:600px){ .wlb-hero-title{font-size:1.6rem} .wlb-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px} } body { font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; } pre, code, kbd, .qa-q-view-content pre, tt { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .wl-shell { display: flex; align-items: flex-start; width: 100%; } .wl-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .wl-body .qam-main-sidepanel { max-width: 1520px; width: 100%; margin: 0 auto; padding: 22px 28px 40px; box-sizing: border-box; } .wl-body .qa-header-clear { display: none; } .qa-widgets-full-top:empty { display: none; } .wl-sidebar { flex: none; width: 252px; align-self: stretch; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--afk-border-c); overflow-y: auto; z-index: 50; } .wl-sidebar-brand { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 10px; } .wl-sidebar .qa-logo { position: static !important; background: none !important; box-shadow: none !important; height: auto !important; padding: 0 !important; width: auto; flex: 1; } .wl-sidebar .qa-logo-link { color: var(--on-surface) !important; margin: 0 !important; font-weight: 800 !important; font-size: 20px; letter-spacing: -.02em; } .wl-sidebar-close { display: none; color: var(--afk-muted); cursor: pointer; font-size: 22px; } .wl-ask-cta { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 14px 12px; height: 44px; border-radius: 12px; background: var(--afk-accent); color: #fff !important; font-weight: 700; font-size: 14px; box-shadow: 0 8px 18px -8px rgba(var(--primary-rgb), .7); transition: filter .15s ease; } .wl-ask-cta:hover { filter: brightness(.96); } .wl-ask-cta .material-icons { font-size: 20px; } .wl-sidebar .wl-sidebar-nav { padding: 0 8px; } .wl-sidebar .qa-nav-main { position: static !important; transform: none !important; visibility: visible !important; left: auto; top: auto; width: auto !important; max-width: none !important; height: auto !important; background: none !important; box-shadow: none !important; overflow: visible !important; } .wl-sidebar .qa-nav-main-list { margin: 0; padding: 4px; } .wl-sidebar-foot { margin-top: auto; padding: 12px 14px 16px; } .wl-user-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); color: var(--on-surface) !important; transition: background .15s ease; } .wl-user-card:hover { background: var(--afk-accent-soft); } .wl-user-card-av { flex: none; width: 40px; height: 40px; border-radius: 12px; overflow: hidden; } .wl-user-card-av img, .wl-user-card-av .qa-avatar-image, .wl-user-card-av a { width: 40px !important; height: 40px !important; max-width: 40px !important; max-height: 40px !important; border-radius: 12px; object-fit: cover; display: block; } .wl-user-card-info { min-width: 0; line-height: 1.2; display: flex; flex-direction: column; } .wl-user-card-name { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wl-user-card-rep { font-size: 11.5px; color: var(--afk-accent); font-weight: 600; } .wl-user-card-guest { justify-content: center; font-weight: 700; } .wl-user-card-guest .material-icons { font-size: 20px; color: var(--afk-accent); } .wl-topbar { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 0 22px; background: color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--afk-border-c); } .wl-topbar #menu-toggle, .wl-topbar #search-toggle, .wl-topbar #user-toggle { position: static !important; top: auto !important; left: auto !important; right: auto !important; color: var(--afk-muted) !important; font-size: 26px; } .wl-topbar #user-toggle i { color: var(--afk-muted) !important; } .wl-topbar .wl-hamburger { order: 0; } .wl-topbar #qa-search { order: 1; flex: 1 1 auto; min-width: 0; max-width: 520px; position: static; } .wl-topbar #search-toggle { order: 2; } .wl-topbar .fab { order: 3; position: static !important; display: flex; align-items: center; gap: 10px; margin: 0 !important; bottom: auto !important; right: auto !important; } .wl-topbar #user-toggle { order: 4; width: 40px; height: 40px; } .wl-topbar #qa-nav-user { order: 5; } .wl-topbar .qa-search, .wl-topbar #qa-search .qa-search { position: static !important; visibility: visible !important; transform: none !important; background: none !important; height: auto !important; width: 100% !important; left: auto !important; right: auto !important; max-width: none !important; margin: 0 !important; } .wl-topbar .qa-search-field { width: 100% !important; height: 42px; margin: 0 !important; padding: 0 16px !important; background: var(--surface-2) !important; color: var(--on-surface) !important; border: 1px solid transparent !important; border-radius: 999px !important; } .wl-topbar .qa-search-field::placeholder { color: var(--afk-muted) !important; } .wl-topbar .qa-search-field:focus { background: var(--surface) !important; border-color: var(--afk-accent) !important; box-shadow: 0 0 0 4px var(--afk-accent-soft) !important; } .wl-topbar .qa-search-button { position: static !important; margin: 0 0 0 -40px !important; background: none !important; } .wl-topbar .qa-search-button .material-icons { color: var(--afk-muted) !important; } .wl-topbar #theme-toggle { position: static !important; margin: 0 !important; padding: 0 !important; width: 42px; height: 42px; display: grid; place-items: center; background: var(--surface) !important; color: var(--afk-muted) !important; border: 1px solid var(--afk-border-c); border-radius: 999px; font-size: 22px; box-shadow: none !important; cursor: pointer; } .wl-topbar #theme-toggle:hover { color: var(--afk-accent) !important; border-color: var(--afk-accent); } .wl-topbar .qam-ask { position: static !important; height: 42px; margin: 0 !important; border-radius: 12px; background: var(--afk-accent) !important; box-shadow: 0 8px 18px -9px rgba(var(--primary-rgb), .7); } .wl-topbar .qam-ask-link { display: flex; align-items: center; padding: 0 16px; height: 42px; } .wl-topbar .qam-ask .material-icons { margin-right: 6px; font-size: 20px; } .wl-body > .qa-nav-sub { max-width: 1520px; width: 100%; margin: 0 auto; padding: 12px 28px 0; box-sizing: border-box; } .qa-nav-sub-list { display: flex; gap: 4px; flex-wrap: wrap; list-style: none; border-bottom: 1px solid var(--afk-border-c); } .qa-nav-sub-link { display: block; padding: 8px 14px; border-radius: 8px 8px 0 0; color: var(--afk-muted); font-weight: 600; border-bottom: 2px solid transparent; } .qa-nav-sub-link.qa-nav-sub-selected { color: var(--afk-accent); border-bottom-color: var(--afk-accent); } @media (min-width: 1024px) { .wl-body .qa-sidepanel { position: sticky; top: 84px; align-self: flex-start; } } .wl-scrim { display: none; } @media (max-width: 900px) { .wl-sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: 260px; max-width: 82vw; transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--appbar-shadow); z-index: 70; } body.menu-active .wl-sidebar { transform: none; } .wl-sidebar-close { display: block; } body.menu-active .wl-scrim { display: block; position: fixed; inset: 0; background: rgba(2,6,23,.45); z-index: 60; } .wl-body .qam-main-sidepanel { padding: 16px 14px 40px; } .wl-body > .qa-nav-sub { padding: 10px 14px 0; } } @media (min-width: 901px) { .wl-hamburger, .wl-topbar #search-toggle { display: none !important; } body.menu-active .qam-main-sidepanel, body.menu-active .qa-widgets-full { transform: none !important; } } body.dark-theme .wl-topbar { background: color-mix(in srgb, var(--surface) 90%, transparent); } body.dark-theme .wl-user-card { background: var(--surface-2); } .wl-body .qa-nav-sub-list { position: static !important; top: auto !important; left: auto !important; width: auto !important; background: none !important; box-shadow: none !important; overflow-x: auto; z-index: auto; gap: 2px; } .wl-body .qa-nav-sub-item { padding: 0 !important; min-width: 0; } .wl-body .qa-nav-sub-link { min-width: 0 !important; color: var(--afk-muted) !important; padding: 9px 14px !important; border-radius: 8px 8px 0 0; border-bottom: 2px solid transparent !important; white-space: nowrap; font-weight: 600; } .wl-body .qa-nav-sub-link:hover { color: var(--afk-accent) !important; background: var(--afk-accent-softer); } .wl-body .qa-nav-sub-link.qa-nav-sub-selected { color: var(--afk-accent) !important; border-bottom: 2px solid var(--afk-accent) !important; background: none !important; } .wl-body .qa-nav-sub-clear { display: none !important; } .wl-topbar #user-toggle { width: 42px; height: 42px; border-radius: 999px; overflow: hidden; border: 1px solid var(--afk-border-c); background: var(--surface); display: grid !important; place-items: center; } .wl-topbar #user-toggle:hover { border-color: var(--afk-accent); } .wl-topbar #user-toggle img { width: 42px !important; height: 42px !important; border-radius: 999px; object-fit: cover; } .wl-topbar #user-toggle .login-person { border: 0 !important; width: auto !important; height: auto !important; display: grid; place-items: center; } .wl-topbar #user-toggle .login-person i { color: var(--afk-muted) !important; font-size: 24px; } .wl-topbar #user-toggle:hover .login-person i { color: var(--afk-accent) !important; } .wl-topbar #qa-search .qa-search { position: relative !important; } .wl-topbar .qa-search-field { padding-right: 42px !important; } .wl-topbar .qa-search-button { position: absolute !important; right: 6px; top: 50%; transform: translateY(-50%); margin: 0 !important; width: 30px; height: 30px; display: grid; place-items: center; border: none; background: none !important; } #qa-nav-user.active .qa-nav-user { top: 66px !important; right: 16px !important; left: auto !important; bottom: auto !important; transform: none !important; border-radius: 14px !important; min-width: 230px; max-width: 260px; box-shadow: var(--shadow) !important; border: 1px solid var(--afk-border-c); } #qa-nav-user.active #qa-nav-user-clear { background: rgba(2,6,23,.25) !important; } .qa-error { background: var(--wl-rose-soft, #fff1f3) !important; color: #b4384a !important; border: 1px solid rgba(180,56,74,.22); border-radius: var(--border); box-shadow: none !important; } .qa-error a { color: var(--afk-accent) !important; font-weight: 700; } body.dark-theme .qa-error { background: rgba(251,113,133,.12) !important; color: #fca5b0 !important; border-color: rgba(251,113,133,.3); } .qa-main .qa-top-tags-table, .qa-main .qa-top-users-table, .qa-main .qa-form-wide-table { width: 100% !important; max-width: 100%; } .qa-top-tags-table tbody { grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)) !important; } .qa-top-tags-table tr { border: 1px solid var(--afk-border-c); min-width: 0; overflow: hidden; } .qa-top-tags-table .qa-tag-link { white-space: normal !important; overflow-wrap: break-word; } .qa-top-tags-count { background: var(--afk-accent) !important; color: #fff !important; font-weight: 700; } .qa-top-users-table tbody { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; gap: 10px !important; } .qa-top-users-table tr { aspect-ratio: 1 / 1; padding-top: 0 !important; border: 1px solid var(--afk-border-c); } .qa-top-users-table .qa-user-link { font-size: .9rem !important; line-height: 1.2 !important; padding: 22px 8px 26px !important; background: linear-gradient(transparent, rgba(0,0,0,.82)) !important; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .qa-top-users-score { bottom: 7px !important; font-size: .78rem; font-weight: 600; } .qa-footer { color: var(--afk-muted); } .qa-nav-footer-link, .qa-footer a { color: var(--afk-accent); } .qa-body-wrapper { --afk-shadow-card: 0 1px 2px rgba(15,23,42,.04), 0 4px 14px rgba(15,23,42,.05); --afk-shadow-hover: 0 8px 20px rgba(15,23,42,.10), 0 3px 8px rgba(15,23,42,.06); } body.dark-theme .qa-body-wrapper { --afk-shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.35); --afk-shadow-hover: 0 10px 26px rgba(0,0,0,.5); } .wl-sidebar-brand { padding: 18px 18px 12px; } .wl-sidebar .qa-logo-link { display: inline-flex !important; align-items: center; gap: 11px; font-size: 19px !important; letter-spacing: -.02em; } .wl-sidebar .qa-logo-link::before { content: "Ai"; flex: none; width: 34px; height: 34px; border-radius: 10px; display: inline-grid; place-items: center; color: #fff; font-weight: 800; font-size: 13px; letter-spacing: -.03em; background: linear-gradient(135deg, var(--afk-accent), var(--afk-accent-2)); box-shadow: 0 6px 14px -4px rgba(37,99,235,.55); } .wl-sidebar .wl-sidebar-nav { padding: 4px 10px; } .wl-sidebar .qa-nav-main-list { padding: 2px; } .qa-nav-main-link { padding: 9px 12px !important; border-radius: 10px; font-size: 14px; } .qa-nav-main-link .material-icons, .qa-nav-main-link::before { font-size: 19px !important; } .qa-nav-main-wl_connect { margin-bottom: 10px; padding-bottom: 10px; } .wl-ask-cta { box-shadow: 0 8px 18px -8px rgba(37,99,235,.6); } .qa-main-heading { font-size: 1.5rem !important; letter-spacing: -.02em; margin: 2px 0 6px !important; } .qa-q-list-item { padding: 18px 20px !important; margin: 12px 0 !important; box-shadow: var(--afk-shadow-card) !important; border-color: var(--afk-border-c) !important; } .qa-q-list-item:hover { box-shadow: var(--afk-shadow-hover) !important; border-color: rgba(var(--primary-rgb), .32) !important; } .qam-q-post-meta { min-height: 44px; } .qa-q-item-title { margin: 6px 0 10px !important; } .qa-q-item-stats { border-top: 1px solid var(--afk-border-c); margin-top: 14px; padding-top: 12px !important; } .qa-voting .material-icons { font-size: 20px; } .qa-a-count { font-size: .92rem; } .qa-q-view-content, .qa-a-item-content { border-top: none !important; border-bottom: none !important; padding: 14px 0 6px !important; font-family: inherit !important; font-size: 15px !important; color: #334155; } body.dark-theme .qa-q-view-content, body.dark-theme .qa-a-item-content { color: var(--on-surface); } .qa-q-view { box-shadow: var(--afk-shadow-card) !important; border: 1px solid var(--afk-border-c); border-radius: var(--border); padding: 4px 20px 16px !important; } .qa-a-list-item { box-shadow: var(--afk-shadow-card) !important; border: 1px solid var(--afk-border-c); border-radius: var(--border); } .qa-a-list-item-selected { border-color: rgba(34,197,94,.4) !important; } .qa-q-view-buttons .qa-form-light-button, .qa-a-item-buttons .qa-form-light-button { border-radius: 10px; } .qa-sidepanel h2, .qa-part-title, .qa-widget-title { font-size: 1.05rem !important; font-weight: 800 !important; letter-spacing: -.01em; margin: 0 0 10px !important; } .qa-nav-cat-item { box-shadow: none !important; background: none !important; padding: 0 !important; margin: 1px 0 !important; } .qa-nav-cat-link { display: block; padding: 8px 10px !important; border-radius: 8px; font-weight: 600; } .qa-nav-cat-link:hover { background: var(--afk-accent-softer); text-decoration: none !important; } .qa-nav-cat-selected, .qa-nav-cat-link.qa-nav-cat-selected { background: var(--afk-accent-soft) !important; } .qa-browse-cat-open { background: none !important; } .qa-nav-cat-list-2, .qa-nav-cat-list-3 { margin-left: 10px; padding-left: 6px; border-left: 1px solid var(--afk-border-c); } .qa-activity-count { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; } .qa-activity-count-item { flex: none !important; margin: 0 !important; } .qa-activity-count-item span { max-width: none !important; margin: 0 0 6px !important; padding: 13px 8px !important; border-radius: 12px !important; font-size: 1.35em !important; background: var(--afk-accent-soft) !important; color: var(--afk-accent) !important; } .qa-sidebar input[type='text'], .qa-sidebar-field { width: 100%; height: 42px; border-radius: 10px; } .qa-a-selected-text, .qa-a-count-selected span { color: var(--afk-success) !important; } .qa-q-item-who-points-data, .qa-q-view-who-points-data { color: var(--afk-accent) !important; font-weight: 600; } .qa-q-item-where .material-icons, .qa-q-view-where .material-icons { font-size: 15px; color: var(--afk-muted); }