uTools-Manuals/assets/vue/vue.css

#manual pre { border-radius: 2px; position: relative; } #manual pre code { overflow-x: auto; color: #525252; white-space: pre; padding: 1.2em 1.4em; line-height: 1.5em; font-size: 1em; display: block; } #manual pre code .hljs-tag, #manual pre code .hljs-tag pre code .hljs-title, #manual pre code .hljs-change, #manual pre code .hljs-winutils, #manual pre code .hljs-flow, #manual pre code .hljs-tex pre code .hljs-special { color: #2973b7; } #manual pre code .hljs-symbol, #manual pre code .hljs-symbol pre code .hljs-string, #manual pre code .hljs-value, #manual pre code .hljs-regexp, #manual pre code .hljs-string, #manual pre code .hljs-subst, #manual pre code .hljs-haskell pre code .hljs-type, #manual pre code .hljs-preprocessor, #manual pre code .hljs-ruby pre code .hljs-class pre code .hljs-parent, #manual pre code .hljs-built_in, #manual pre code .hljs-sql pre code .hljs-aggregate, #manual pre code .hljs-django pre code .hljs-template_tag, #manual pre code .hljs-django pre code .hljs-variable, #manual pre code .hljs-smalltalk pre code .hljs-class, #manual pre code .hljs-javadoc, #manual pre code .hljs-django pre code .hljs-filter pre code .hljs-argument, #manual pre code .hljs-smalltalk pre code .hljs-localvars, #manual pre code .hljs-smalltalk pre code .hljs-array, #manual pre code .hljs-attr_selector, #manual pre code .hljs-pseudo, #manual pre code .hljs-addition, #manual pre code .hljs-stream, #manual pre code .hljs-envvar, #manual pre code .hljs-apache pre code .hljs-tag, #manual pre code .hljs-apache pre code .hljs-cbracket, #manual pre code .hljs-tex pre code .hljs-command, #manual pre code .hljs-prompt { color: #42b983; } #manual pre code .hljs-function pre code .hljs-keyword, #manual pre code .hljs-constant { color: #0092db; } #manual pre code .hljs-keyword, #manual pre code .hljs-attribute { color: #e96900; } #manual pre code .hljs-number, #manual pre code .hljs-literal { color: #ae81ff; } #manual pre code .hljs-class pre code .hljs-title { color: #fff; } #manual pre code .hljs-title { color: #a6e22e; } #manual pre code .hljs-tag pre code .hljs-value, #manual pre code .hljs-comment, #manual pre code .hljs-java pre code .hljs-annotation, #manual pre code .hljs-python pre code .hljs-decorator, #manual pre code .hljs-template_comment, #manual pre code .hljs-pi, #manual pre code .hljs-doctype, #manual pre code .hljs-deletion, #manual pre code .hljs-shebang, #manual pre code .hljs-apache pre code .hljs-sqbracket, #manual pre code .hljs-tex pre code .hljs-formula { color: #b3b3b3; } #manual pre code .hljs-coffeescript pre code .hljs-javascript, #manual pre code .hljs-javascript pre code .hljs-xml, #manual pre code .hljs-tex pre code .hljs-formula, #manual pre code .hljs-xml pre code .hljs-javascript, #manual pre code .hljs-xml pre code .hljs-vbscript, #manual pre code .hljs-xml pre code .hljs-css, #manual pre code .hljs-xml pre code .hljs-cdata { opacity: 0.5; } #manual pre code.hljs.html::before, #manual pre code.hljs.js::before, #manual pre code.hljs.bash::before, #manual pre code.hljs.css::before { font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif; position: absolute; top: 0; right: 0; color: #ccc; text-align: right; font-size: 0.9em; padding: 5px 10px 0; line-height: 15px; height: 15px; font-weight: 600; } #manual pre code.hljs.html::before { content: "HTML"; } #manual pre code.hljs.js::before { content: "JS"; } #manual pre code.hljs.bash::before { content: "Shell"; } #manual pre code.hljs.css::before { content: "CSS"; } #manual #ad { width: 150px; position: fixed; z-index: 99; bottom: 10px; right: 10px; padding: 10px; background-color: #fff; border-radius: 3px; font-size: 13px; } #manual #ad a { display: inline-block; color: #7f8c8d; font-weight: normal; } #manual #ad span { color: #7f8c8d; display: inline-block; margin-bottom: 5px; } #manual #ad img { width: 150px; } #manual #ad .carbon-img, #manual #ad .carbon-text { display: block; margin-bottom: 6px; font-weight: normal; color: #34495e; } #manual #ad .carbon-poweredby { color: #aaa; font-weight: normal; } #manual .bsa-cpc { font-size: 1em; background-color: #f8f8f8; } #manual .bsa-cpc a._default_ { text-align: left; display: block; padding: 10px 15px 12px; margin-bottom: 20px; color: #666; font-weight: 400; line-height: 18px; } #manual .bsa-cpc a._default_ .default-image, #manual .bsa-cpc a._default_ .default-title, #manual .bsa-cpc a._default_ .default-description { display: inline; vertical-align: middle; margin-right: 6px; } #manual .bsa-cpc a._default_ .default-image img { height: 20px; border-radius: 3px; vertical-align: middle; position: relative; top: -1px; } #manual .bsa-cpc a._default_ .default-title { font-weight: 600; } #manual .bsa-cpc a._default_ .default-description:after { font-size: 0.85em; content: "Sponsored"; color: #1c90f3; border: 1px solid #1c90f3; border-radius: 3px; padding: 0 4px 1px; margin-left: 6px; } #manual .bsa-cpc .default-ad { display: none; } @media print { #ad { display: none; } } #manual body { font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif; font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #34495e; background-color: #fff; margin: 0; } #manual body.docs { padding-top: 61px; } @media screen and (max-width: 900px) { body.docs { padding-top: 0; } } #manual a { text-decoration: none; color: #34495e; } #manual img { border: none; } #manual h1, #manual h2, #manual h3, #manual h4, #manual strong { font-weight: 600; color: #2c3e50; } #manual code, #manual pre { font-family: "Roboto Mono", Monaco, courier, monospace; font-size: 0.8em; background-color: #f8f8f8; -webkit-font-smoothing: initial; -moz-osx-font-smoothing: initial; } #manual code { color: #e96900; padding: 3px 5px; margin: 0 2px; border-radius: 2px; white-space: nowrap; } #manual em { color: #7f8c8d; } #manual p { word-spacing: 0.05em; } #manual a.button, #manual input.button { padding: 0.75em 2em; border-radius: 2em; display: inline-block; color: #fff; background-color: #4fc08d; transition: all 0.15s ease; box-sizing: border-box; border: 1px solid #4fc08d; } #manual a.button.has-icon, #manual input.button.has-icon { position: relative; text-indent: 1.4em; } #manual a.button.has-icon > svg, #manual input.button.has-icon > svg { position: absolute; left: 0.4em; top: 0.4em; width: 2em; } #manual a.button.white, #manual input.button.white { background-color: #fff; color: #42b983; } #manual a.button.gray, #manual input.button.gray { background-color: #f6f6f6; color: #7f8c8d; border-color: #f6f6f6; } #manual #main { position: relative; z-index: 1; padding: 0 60px 30px; overflow-x: hidden; } #manual #nav .nav-link { cursor: pointer; } #manual #nav .nav-dropdown-container .nav-link:hover:not(.current) { border-bottom: none; } #manual #nav .nav-dropdown-container:hover .nav-dropdown { display: block; } #manual #nav .nav-dropdown-container.language, #manual #nav .nav-dropdown-container.ecosystem { margin-left: 20px; } #manual #nav .nav-dropdown-container .arrow { pointer-events: none; } #manual #nav .nav-dropdown { display: none; box-sizing: border-box; max-height: calc(100vh - 61px); overflow-y: auto; position: absolute; top: 100%; right: -15px; background-color: #fff; padding: 10px 0; border: 1px solid #ddd; border-bottom-color: #ccc; text-align: left; border-radius: 4px; white-space: nowrap; } #manual #nav .nav-dropdown li { line-height: 1.8em; margin: 0; display: block; } #manual #nav .nav-dropdown li > ul { padding-left: 0; } #manual #nav .nav-dropdown li:first-child h4 { margin-top: 0; padding-top: 0; border-top: 0; } #manual #nav .nav-dropdown a, #manual #nav .nav-dropdown h4 { padding: 0 24px 0 20px; } #manual #nav .nav-dropdown h4 { margin: 0.45em 0 0; padding-top: 0.45em; border-top: 1px solid #eee; } #manual #nav .nav-dropdown a { color: #3a5169; font-size: 0.9em; display: block; } #manual #nav .nav-dropdown a:hover { color: #42b983; } #manual #nav .arrow { display: inline-block; vertical-align: middle; margin-top: -1px; margin-left: 6px; margin-right: -14px; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #ccc; } #manual sup.beta.beta { font-size: 0.6em; margin-left: 0.7em; text-transform: uppercase; opacity: 0.6; } @media print { body { color: #000; } .highlight { padding: 0; page-break-inside: avoid; } .highlight .code pre { color: #000; background-color: #fff; border-style: solid; border-width: 2px 2px 2px 2px; border-color: #e8e8e8; page-break-inside: avoid; } h1, h2, h3, h4, h5 { color: #000; page-break-after: avoid; page-break-before: avoid; } img { page-break-inside: avoid; } h2+p { page-break-before: avoid; } a:link:after, a:visited:after { content: " [" attr(href) "] "; } } #manual .content.api h2 > sup, #manual .content.api h3 > sup { margin-left: 0.3em; color: #b9465c; } #manual .rotating-clockwise { animation: 3s rotating-clockwise linear infinite; } #manual i.rotating-clockwise { display: inline-block; animation-duration: 2s; } @-moz-keyframes rotating-clockwise { from { transform: rotate(0); } to { transform: rotate(360deg); } } @-webkit-keyframes rotating-clockwise { from { transform: rotate(0); } to { transform: rotate(360deg); } } @-o-keyframes rotating-clockwise { from { transform: rotate(0); } to { transform: rotate(360deg); } } @keyframes rotating-clockwise { from { transform: rotate(0); } to { transform: rotate(360deg); } } #manual #header { background-color: #fff; height: 40px; padding: 10px 60px; position: relative; z-index: 100; } #manual body.docs #header { position: fixed; width: 100%; top: 0; } #manual body.docs #nav { position: fixed; } #manual #nav { list-style-type: none; margin: 0; padding: 0; position: absolute; right: 30px; top: 10px; height: 40px; line-height: 40px; } #manual #nav .break { display: none; } #manual #nav li { display: inline-block; position: relative; margin: 0 0.6em; } #manual #nav .nav-dropdown .nav-link:hover, #manual #nav .nav-dropdown .nav-link.current { border-bottom: none; } #manual #nav .nav-dropdown .nav-link.current::after { content: ""; width: 0; height: 0; border-left: 5px solid #42b983; border-top: 3px solid transparent; border-bottom: 3px solid transparent; position: absolute; top: 50%; margin-top: -4px; left: 8px; } #manual #nav .nav-dropdown .nav-link.new::before { content: ""; width: 0; height: 0; border: 2px solid #f66; border-radius: 50%; position: absolute; top: calc(50% - 1px); left: 8px; } #manual .nav-link { padding-bottom: 3px; white-space: nowrap; } #manual .nav-link:hover, #manual .nav-link.current { border-bottom: 3px solid #42b983; } #manual .nav-link.team, #manual .nav-link.contribute { margin-left: 10px; } #manual .nav-link.new::before { content: ""; width: 0; height: 0; border: 2px solid #f66; border-radius: 50%; position: absolute; top: calc(50% - 1px); left: -8px; } #manual .new-label { position: absolute; top: 3px; left: 110%; background-color: #42b983; color: #fff; line-height: 16px; height: 16px; font-size: 9px; font-weight: bold; font-family: "Roboto Mono", Monaco, courier, monospace; padding: 1px 4px 0 6px; border-radius: 4px; } #manual .search-query { height: 30px; line-height: 30px; box-sizing: border-box; padding: 0 15px 0 30px; border: 1px solid #e3e3e3; color: #2c3e50; outline: none; border-radius: 15px; margin-right: 10px; transition: border-color 0.2s ease; background: #fff url("../images/search.png") 8px 5px no-repeat; background-size: 20px; vertical-align: middle !important; } #manual .search-query:focus { border-color: #42b983; } #manual #logo { display: inline-block; font-size: 1.5em; line-height: 40px; color: #2c3e50; font-family: "Dosis", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif; font-weight: 500; } #manual #logo img { vertical-align: middle; margin-right: 6px; width: 40px; height: 40px; } #manual #mobile-bar { position: fixed; top: 0; left: 0; width: 100%; height: 40px; background-color: #fff; z-index: 9; display: none; box-shadow: 0 0 2px rgba(0,0,0,0.25); } #manual #mobile-bar .menu-button { position: absolute; width: 24px; height: 24px; top: 8px; left: 12px; background: url("../images/menu.png") center center no-repeat; background-size: 24px; } #manual #mobile-bar .logo { position: absolute; width: 30px; height: 30px; background: url("../images/logo.png") center center no-repeat; top: 5px; left: 50%; margin-left: -15px; background-size: 30px; } @media print { #header { display: none; } } #manual #demo, #manual .demo, #manual .content .demo { border: 1px solid #eee; border-radius: 2px; padding: 25px 35px; margin-top: 1em; margin-bottom: 40px; font-size: 1.2em; line-height: 1.5em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow-x: auto; } #manual #demo h1, #manual .demo h1, #manual .content .demo h1 { margin: 0 0 0.5em; font-size: 1.8em; } #manual #demo h2, #manual .demo h2, #manual .content .demo h2 { padding: 0; border: none; } #manual #demo h2, #manual .demo h2, #manual .content .demo h2, #manual #demo h3, #manual .demo h3, #manual .content .demo h3, #manual #demo h4, #manual .demo h4, #manual .content .demo h4, #manual #demo h5, #manual .demo h5, #manual .content .demo h5, #manual #demo h6, #manual .demo h6, #manual .content .demo h6 { margin: 1em 0; } #manual #demo ul, #manual .demo ul, #manual .content .demo ul, #manual #demo ol, #manual .demo ol, #manual .content .demo ol { padding-left: 1.5em; padding-bottom: 0.2em !important; } #manual #demo ul:first-child, #manual .demo ul:first-child, #manual .content .demo ul:first-child, #manual #demo ol:first-child, #manual .demo ol:first-child, #manual .content .demo ol:first-child { margin-top: 0; } #manual #demo ul:last-child, #manual .demo ul:last-child, #manual .content .demo ul:last-child, #manual #demo ol:last-child, #manual .demo ol:last-child, #manual .content .demo ol:last-child { margin-bottom: 0; } #manual #demo li, #manual .demo li, #manual .content .demo li { color: #34495e; } #manual #demo li.done, #manual .demo li.done, #manual .content .demo li.done { color: #7f8c8d; text-decoration: line-through; } #manual #demo p, #manual .demo p, #manual .content .demo p { margin: 0 !important; padding: 0 !important; } #manual #demo textarea, #manual .demo textarea, #manual .content .demo textarea { width: 100%; resize: vertical; } #manual #demo > :first-child, #manual .demo > :first-child, #manual .content .demo > :first-child { margin-top: 0; } #manual #demo > :last-child, #manual .demo > :last-child, #manual .content .demo > :last-child { margin-bottom: 0; } #manual ul#demo li, #manual ul.demo li { margin-left: 1.5em; } @media screen and (max-width: 900px) { #demo, .demo { margin-left: 0; } } #manual .benchmark-table { margin: 0 auto; text-align: center; } #manual .benchmark-table tbody > tr > th { text-align: right; } #manual .benchmark-table th, #manual .benchmark-table td { padding: 3px 7px; } @media print { #demo, .demo, .content .demo { page-break-inside: avoid; padding: 1em; margin-bottom: 1em; border-width: 2px; } } #manual .content .platinum { text-align: center; } #manual .content .platinum a { display: inline-block; margin: 20px; } #manual .content .platinum img { width: 250px; vertical-align: middle; } #manual .content .sponsor-section { text-align: center; margin-top: 0; margin-bottom: 60px; } #manual .content .patreon-sponsors a, #manual .content .patreon-sponsors img { width: 140px; display: inline-block; vertical-align: middle; } #manual .content .patreon-sponsors a { margin: 10px 20px; } #manual .content .open-collective-sponsors img { max-width: 140px; max-height: 60px; margin-right: 30px; margin-bottom: 20px; } #manual .content .video-sponsors-china a { display: inline-block; margin: 20px; } #manual .content .video-sponsors-china img { width: 250px; } #manual #one-time-donations a, #manual #one-time-donations svg { display: inline-block; vertical-align: middle; } #manual #one-time-donations a { margin: 20px; color: #34495e; } #manual #one-time-donations svg { margin-right: 5px; } #manual #coin-details { text-align: center; border-radius: 4px; padding: 30px; font-weight: bold; } #manual #coin-details img { width: 200px; } #manual #coin-details p { padding: 0; margin: 0 0 20px; } #manual .main-sponsor { color: #7f8c8d; font-size: 0.85em; } #manual .main-sponsor .logo { color: #7f8c8d; margin-top: 10px; text-align: center; font-weight: bold; display: block; } #manual .main-sponsor .logo:first-child { margin-top: 18px; } #manual .main-sponsor .logo:last-child { margin-bottom: 20px; } #manual .main-sponsor img, #manual .main-sponsor a { width: 200px; } #manual .become-backer { border: 1px solid #42b983; border-radius: 2em; display: inline-block; color: #42b983; font-size: 0.8em; width: 125px; padding: 4px 0; text-align: center; margin-bottom: 20px; } #manual #sidebar-sponsors-special { margin-top: -10px; } #manual #sidebar-sponsors-platinum-left { display: block; } #manual #sidebar-sponsors-platinum-right { display: none; position: fixed; z-index: 99; top: 90px; right: 20px; } @media screen and (min-width: 1300px) { #sidebar-sponsors-platinum-left { display: none; } #sidebar-sponsors-platinum-right { display: block; } } #manual #search-page .search-form .search-query { width: 100%; border-radius: 5px; margin-right: 0; } #manual #search-page .search-form .search-footer { display: flex; height: 35px; align-items: center; justify-content: space-between; margin-bottom: 15px; } #manual #search-page .search-form .search-footer p { margin: 0; padding: 0; } #manual #search-page .search-result { margin-bottom: 15px; } #manual #search-page .search-result .title { display: block; font-size: 17.55px; } #manual #search-page .search-result .summary { padding: 0; margin: 0; } #manual #search-page .search-result .breadcrumb { color: #7f8c8d; } #manual #search-page .search-result .breadcrumb + .breadcrumb::before { content: "\203A\A0"; margin-left: 5px; color: #7f8c8d; } #manual .content.guide[class*="migration"] h2 > sup, #manual .content.guide[class*="migration"] h3 > sup { margin-left: 0.3em; color: #b9465c; } #manual .content.guide[class*="migration"] .upgrade-path { margin-top: 2em; padding: 2em; background: rgba(73,195,140,0.1); border-radius: 2px; } #manual .content.guide[class*="migration"] .upgrade-path > h4 { margin-top: 0; } #manual .content.guide[class*="migration"] .upgrade-path > p:last-child { margin-bottom: 0; padding-bottom: 0; } #manual .sidebar { position: absolute; z-index: 10; top: 61px; left: 0; bottom: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; } #manual .sidebar h2 { margin-top: 0.2em; } #manual .sidebar ul { list-style-type: none; margin: 0; line-height: 1.5em; padding-left: 1em; } #manual .sidebar li { margin-top: 0.5em; } #manual .sidebar .sidebar-inner { width: 260px; padding: 40px 20px 60px 60px; } #manual .sidebar .version-select { vertical-align: middle; margin-left: 5px; } #manual .sidebar .menu-root { padding-left: 0; } #manual .sidebar .menu-sub { font-size: 0.85em; } #manual .sidebar .sidebar-link { color: #7f8c8d; } #manual .sidebar .sidebar-link.current { font-weight: 600; color: #42b983; } #manual .sidebar .sidebar-link.new:after { content: "NEW"; display: inline-block; font-size: 10px; font-weight: 600; color: #fff; background-color: #42b983; line-height: 14px; padding: 0 4px; border-radius: 3px; margin-left: 5px; vertical-align: middle; position: relative; top: -1px; } #manual .sidebar .sidebar-link:hover { border-bottom: 2px solid #42b983; } #manual .sidebar .section-link.active { font-weight: bold; color: #42b983; } #manual .sidebar .main-menu { margin-bottom: 20px; display: none; padding-left: 0; } #manual .sidebar .nav-dropdown h4 { font-weight: normal; margin: 0; } @media screen and (max-width: 900px) { .sidebar { position: fixed; z-index: 10; background-color: #f9f9f9; height: 100%; top: 0; left: 0; box-shadow: 0 0 10px rgba(0,0,0,0.2); transition: all 0.4s cubic-bezier(0.4, 0, 0, 1); -webkit-transform: translate(-280px, 0); transform: translate(-280px, 0); } .sidebar .sidebar-inner { padding: 50px 10px 10px 20px; box-sizing: border-box; } .sidebar .sidebar-inner-index { padding: 10px 10px 10px 20px; } .sidebar .search-query { width: 200px; margin-bottom: 10px; } .sidebar .main-menu { display: block; } .sidebar.open { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @media print { .sidebar { display: none; } } #manual .content.menu { font-size: 1.2em; } #manual .content.menu .menu-root { padding-left: 0; } #manual .content.menu #search-form, #manual .content.menu .algolia-autocomplete, #manual .content.menu input { width: 100%; } #manual .content.menu .aa-dropdown-menu { box-sizing: border-box; } #manual .content.menu h3 { margin: 1.5em 0 0.75em; } #manual .content.menu h3:before, #manual .content.menu h3:after { display: none; } #manual .content.menu li { list-style-type: none; margin-top: 0.1em; } #manual #team-members .sort-by-distance-button { display: inline-block; padding: 0.4em 0.7em 0.45em; font-weight: bold; font-size: 0.5em; text-transform: uppercase; line-height: 1; border: none; background: #34495e; color: #fff; border-radius: 3px; position: relative; cursor: pointer; float: right; margin-top: 0.3em; } #manual #team-members .sort-by-distance-button i { margin-right: 0.25em; } #manual #team-members .sort-by-distance-button i:last-child { margin-right: 0; } #manual #team-members .sort-by-distance-button[disabled] { opacity: 0.7; cursor: default; } #manual #team-members .vuer { display: flex; padding: 25px 0; border-bottom: 1px dotted #ddd; } #manual #team-members .vuer:first-of-type { margin-top: 15px; } #manual #team-members .vuer:last-of-type { border-bottom: none; } #manual #team-members .vuer .avatar { flex: 0 0 80px; } #manual #team-members .vuer .avatar img { border-radius: 50%; } #manual #team-members .vuer .profile { padding-left: 26px; flex: 1; } #manual #team-members .vuer .profile h3 { margin: 0; font-size: 1.3em; } #manual #team-members .vuer .profile h3::before, #manual #team-members .vuer .profile h3::after { display: none; } #manual #team-members .vuer .profile h3 > sup { text-transform: uppercase; font-size: 0.7em; letter-spacing: 0.3px; padding: 2px 5px; margin-left: 10px; color: rgba(0,0,0,0.6); background: #f9f7f5; border-radius: 5px; } #manual #team-members .vuer .profile .user-match { cursor: help; color: #4682b4; } #manual #team-members .vuer .profile .user-match:after { content: "\f06a"; font-family: FontAwesome; font-size: 0.75em; vertical-align: super; margin-left: 4px; margin-right: 2px; position: relative; } #manual #team-members .vuer .profile dl { margin: 0.6em 0 0; } #manual #team-members .vuer .profile dt, #manual #team-members .vuer .profile dd, #manual #team-members .vuer .profile ul, #manual #team-members .vuer .profile li { display: inline; padding: 0; margin: 0; line-height: 1.3; } #manual #team-members .vuer .profile dt { text-transform: uppercase; font-size: 0.84em; font-weight: 600; } #manual #team-members .vuer .profile dt::after { content: ""; margin-right: 7px; } #manual #team-members .vuer .profile dt i { width: 14px; text-align: center; } #manual #team-members .vuer .profile dt i.fa-map-marker { font-size: 1.15em; } #manual #team-members .vuer .profile dt i.fa-globe { font-size: 1.2em; } #manual #team-members .vuer .profile dt i.fa-link { font-size: 1.05em; } #manual #team-members .vuer .profile dd { font-weight: 600; } #manual #team-members .vuer .profile dd::after { display: block; content: " "; margin-top: 0.6em; } #manual #team-members .vuer .profile li { display: inline-block; } #manual #team-members .vuer .profile li::after { display: inline-block; content: "·"; margin: 0 8px; } #manual #team-members .vuer .profile li:last-child::after { content: ""; } #manual #team-members .vuer .profile .social a { display: inline-block; line-height: 1; vertical-align: middle; margin-right: 4px; } #manual #team-members .vuer .profile .social a.github, #manual #team-members .vuer .profile .social a.codepen { color: #000; } #manual #team-members .vuer .profile .social a.twitter { color: #1da1f3; } #manual #team-members .vuer .profile .social a.linkedin { color: #0077b5; } #manual #team-members .vuer .profile .social i { vertical-align: text-bottom; font-size: 1.3em; } @media (max-width: 640px) { #team-members .vuer .profile h3 sup { display: inline-block; margin-left: 0; } } #manual .style-guide .style-example, #manual .style-guide details, #manual .style-guide .style-enforcement { border-radius: 2px; margin: 1.6em 0; padding: 1.6em; } #manual .style-guide .style-example h4, #manual .style-guide details h4, #manual .style-guide .style-enforcement h4 { margin-top: 0; } #manual .style-guide .style-example figure:last-child, #manual .style-guide details figure:last-child, #manual .style-guide .style-enforcement figure:last-child, #manual .style-guide .style-example p:last-child, #manual .style-guide details p:last-child, #manual .style-guide .style-enforcement p:last-child { margin-bottom: 0; padding-bottom: 0; } #manual .style-guide .style-example.example-bad { background: #f3eded; } #manual .style-guide .style-example.example-bad h4 { color: #a67878; } #manual .style-guide .style-example.example-good { background: #eaedec; } #manual .style-guide .style-example.example-good h4 { color: #677b72; } #manual .style-guide details, #manual .style-guide .style-enforcement { background-color: #eee; } #manual .style-guide details { display: block; position: relative; } #manual .style-guide details:not([open]) summary::after { content: "..."; } #manual .style-guide details:not([open]) summary:hover { background: rgba(255,255,255,0.3); } #manual .style-guide summary { cursor: pointer; padding: 1.6em; margin: -1.6em; outline: none; } #manual .style-guide summary > h4 { display: inline-block; margin: 0; } #manual .style-guide .style-enforcement table { width: 100%; background-color: #f8f8f8; border-radius: 2px; } #manual .style-guide .style-enforcement th, #manual .style-guide .style-enforcement td { padding: 0.4em; text-align: center; } #manual .style-guide .style-enforcement th { padding-bottom: 0.2em; } #manual .style-guide .style-enforcement td { padding-top: 0.2em; } #manual .style-guide .style-rule-tag { background-color: #f8f8f8; border-radius: 2px; font-size: 0.9em; color: #677b72; font-weight: 600; text-transform: uppercase; padding: 0.1em 0.4em; } #manual .style-guide a > .style-rule-tag { color: #42b983; } #manual .style-guide sup { text-transform: uppercase; font-size: 0.7em; margin-left: 1em; pointer-events: all; position: absolute; } #manual .style-guide [data-p="a"] { color: #6b2a2a; } #manual .style-guide [data-p="b"] { color: #8c480a; } #manual .style-guide [data-p="c"] { color: #2b5a99; } #manual .style-guide [data-p="d"] { content: #3f536d; } #manual .modal { box-sizing: border-box; display: none; position: fixed; width: 80%; height: auto; padding: 0.5em; background-color: #f9f9f9; box-shadow: 0 0 10px rgba(0,0,0,0.2); z-index: 102; } #manual .modal.open { display: block; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1000; } #manual .modal-text { margin-bottom: 0.5em; text-align: center; } #manual .modal-text > a { color: #42b983; font-weight: 600; } #manual .overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.2); z-index: 101; } #manual .stop-scroll { overflow: hidden; height: 100%; } @media screen and (max-width: 400px) { .modal { width: 98%; } } #manual .scrimba { background-color: #e7ecf3; padding: 1em 1.25em; border-radius: 2px; color: #486491; position: relative; } #manual .scrimba a { color: #486491 !important; position: relative; padding-left: 36px; } #manual .scrimba a:before { content: ''; position: absolute; display: block; width: 30px; height: 30px; top: -5px; left: -4px; border-radius: 50%; background-color: #73abfe; } #manual .scrimba a:after { content: ''; position: absolute; display: block; width: 0; height: 0; top: 5px; left: 8px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid #fff; } #manual .ad-pagetop { background: #f8f8f8; padding: 8px 16px; border-radius: 4px; color: $accent; clear: both; position: relative; } #manual .ad-pagetop a { display: block; } #manual .ad-pagetop span { color: #1c90f3; display: inline-block; } #manual .ad-pagetop span.name { color: #1c90f3; font-size: 1.1em; } #manual .ad-pagetop span.description { margin-left: 0.8em; font-size: 0.9em; color: #666; font-weight: normal; } #manual .ad-pagetop span.action { font-size: 0.75em; color: #888; border: 1px solid #888; border-radius: 3px; padding: 2px 6px; margin-left: 1em; } #manual .ad-pagetop:after { content: "广告"; font-size: 10px; position: absolute; top: 50%; color: #aaa; padding: 3px 6px; border: 1px solid #ccc; border-radius: 3px; margin-top: -9px; right: 10px; } @media screen and (max-width: 560px) { .ad-pagetop { display: none; } } #manual .themes-grid { display: flex; flex-wrap: wrap; justify-content: space-between; } #manual .themes-grid .item-preview { width: 290px; margin-bottom: 25px; } #manual .themes-grid .item-preview-img { transition: 0.15s box-shadow, 0.15s transform; border-radius: 0.5rem; box-shadow: 0 2rem 1.5rem -1.5rem rgba(33,37,41,0.15), 0 0 1.5rem 0.5rem rgba(33,37,41,0.05); overflow: hidden; display: block; } #manual .themes-grid .item-preview-img:hover { transform: translateY(-0.25rem); box-shadow: 0 2.25rem 1.5rem -1.5rem rgba(33,37,41,0.2), 0 0 1.5rem 0.5rem rgba(33,37,41,0.05); } #manual .themes-grid img { max-width: 100%; height: auto; border-radius: 0.5rem; vertical-align: middle; border-style: none; } #manual .themes-grid .item-preview-title-container { display: flex; justify-content: space-between; align-items: center; } #manual .themes-grid h3.item-preview-title { margin-top: 0.7rem; margin-bottom: 0; } #manual .themes-grid h3.item-preview-title.free::after { content: "FREE"; display: inline-block; font-size: 10px; font-weight: 600; color: #fff; background-color: #42b983; line-height: 14px; padding: 0 4px; border-radius: 3px; margin-left: 5px; vertical-align: middle; position: relative; top: -1px; } #manual .themes-grid .item-preview-price { margin-top: 0.7rem; } #manual .themes-grid .item-preview-description { font-size: 0.9rem; } #manual .themes-grid .see-more-container { display: flex; justify-content: center; width: 100%; } #manual .themes-grid .see-more-container .see-more-link { color: #42b983; } @media screen and (max-width: 1300px) { .themes-grid { justify-content: center; } .themes-grid .item-preview { justify-content: center; width: 380px; } } #manual #header { box-shadow: 0 0 1px rgba(0,0,0,0.25); transition: background-color 0.3s ease-in-out; } #manual .content { position: relative; /* padding: 2.2em 0; */ /* max-width: 600px; */ margin: 0 auto; /* padding-left: 50px; */ } #manual .content.api > a:first-of-type > h2 { margin-top: 0; padding-top: 0; } #manual .content.api ul { padding-left: 1.25em; line-height: 1.4em; } #manual .content.api ul ul, #manual .content.api ul p:not(.tip) { padding-bottom: 0; margin: 1.2em 0; } #manual .content a.button { font-size: 0.9em; color: #fff; margin: 0.2em 0; width: 200px; text-align: center; padding: 12px 24px; display: inline-block; vertical-align: middle; } #manual .content img { max-width: 100%; } #manual .content span.light { color: #7f8c8d; } #manual .content span.info { font-size: 0.85em; display: inline-block; vertical-align: middle; width: 280px; margin-left: 20px; } #manual .content h1 { margin: 0 0 1em; } #manual .content h2, #manual .content h3 { pointer-events: none; } #manual .content h2 a, #manual .content h3 a, #manual .content h2 button, #manual .content h3 button { pointer-events: auto; color: #2c3e50; } #manual .content h2:before, #manual .content h3:before { content: ""; display: block; margin-top: -91px; height: 91px; visibility: hidden; } #manual .content h2 { margin: 45px 0 0.8em; padding-bottom: 0.7em; border-bottom: 1px solid #ddd; } #manual .content h3 { margin: 52px 0 1.2em; line-height: 1.2; position: relative; } #manual .content h3 > a:before { content: "#"; color: #42b983; position: absolute; left: -0.7em; margin-top: -0.05em; padding-right: 0.5em; font-size: 1.2em; line-height: 1; font-weight: bold; } #manual .content figure { margin: 1.2em 0; } #manual .content p, #manual .content ul, #manual .content ol { line-height: 1.6em; margin: 1.2em 0 -1.2em; padding-bottom: 1.2em; position: relative; z-index: 1; } #manual .content ul, #manual .content ol { padding-left: 1.5em; position: inherit; } #manual .content ul ul, #manual .content ol ul, #manual .content ul ol, #manual .content ol ol { margin: 0; } #manual a { color: #42b983; font-weight: 600; } #manual .content blockquote { margin: 2em 0; padding-left: 20px; border-left: 4px solid #42b983; } #manual .content blockquote p { font-weight: 600; margin-left: 0; margin-bottom: 0; padding-bottom: 0; } #manual .content iframe { margin: 1em 0; } #manual .content > table { border-spacing: 0; border-collapse: collapse; margin: 1.2em auto; padding: 0; display: block; overflow-x: auto; } #manual .content > table td, #manual .content > table th { line-height: 1.5em; padding: 0.4em 0.8em; border: none; border: 1px solid #ddd; } #manual .content > table th { font-weight: bold; text-align: left; } #manual .content > table th, #manual .content > table tr:nth-child(2n) { background-color: #f8f8f8; } #manual .content > table th code, #manual .content > table tr:nth-child(2n) code { background-color: #efefef; } #manual .content p.tip, #manual .content p.success { padding: 12px 24px 12px 30px; margin: 2em 0; border-left-width: 4px; border-left-style: solid; background-color: #f8f8f8; position: relative; border-bottom-right-radius: 2px; border-top-right-radius: 2px; } #manual .content p.tip:before, #manual .content p.success:before { position: absolute; top: 14px; left: -12px; color: #fff; width: 20px; height: 20px; border-radius: 100%; text-align: center; line-height: 20px; font-weight: bold; font-family: "Dosis", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif; font-size: 14px; } #manual .content p.tip code, #manual .content p.success code { background-color: #efefef; } #manual .content p.tip em, #manual .content p.success em { color: #34495e; } #manual .content p.tip { border-left-color: #f66; } #manual .content p.tip:before { content: "!"; background-color: #f66; } #manual .content p.success { border-left-color: #42b983; } #manual .content p.success:before { content: "\f00c"; font-family: FontAwesome; background-color: #42b983; } #manual .guide-links { margin-top: 2em; height: 1em; } #manual .footer { color: #7f8c8d; margin-top: 2em; padding-top: 2em; border-top: 1px solid #e5e5e5; font-size: 0.9em; } #manual #main.fix-sidebar { position: static; } #manual #main.fix-sidebar .sidebar { position: fixed; } @media screen and (min-width: 1590px) { #header { background-color: #fff; } } @media screen and (max-width: 1300px) { .content.with-sidebar { margin-left: 290px; } #ad { z-index: 1; position: relative; padding: 0; bottom: 0; right: 0; float: right; padding: 0 0 20px 30px; } } @media screen and (max-width: 900px) { body { -webkit-text-size-adjust: none; font-size: 16px; } #header { display: none; } #logo { display: none; } .nav-link { padding-bottom: 1px; } .nav-link:hover, .nav-link.current { border-bottom: 2px solid #42b983; } #mobile-bar { display: block; } #main { padding: 2em 1.4em 0; } .highlight pre { padding: 1.2em 1em; } .content { padding-left: 0; } .content.with-sidebar { margin: auto; } .content h2:before, .content h3:before { content: ""; display: block; margin-top: -70px; height: 70px; visibility: hidden; } .footer { margin-left: 0; text-align: center; } } @media screen and (max-width: 560px) { #downloads { text-align: center; margin-bottom: 25px; } #downloads .info { margin-top: 5px; margin-left: 0; } iframe { margin: 0 !important; } } @media print { .footer { display: none; } .content { padding-left: 0px; } .content p { line-height: 1.35em; } .content p.tip { background-color: #fff; border: 2px solid #e8e8e8; border-left: 4px solid #f66; } }