mirror of
https://github.com/Dolibarr/dolibarr.git
synced 2025-12-07 01:58:09 +01:00
136 lines
8.8 KiB
CSS
136 lines
8.8 KiB
CSS
:root {
|
|
--flex-gap: 24px; /* Variable for gap */
|
|
}
|
|
|
|
body.dolibarr-doc {
|
|
background: rgb(232, 232, 232);font-family: "Segoe UI", sans-serif;font-weight: 400;font-style: normal;font-size: 0.9em;margin: 0;
|
|
}
|
|
|
|
/***************************/
|
|
/* SIDEBAR */
|
|
/***************************/
|
|
.doc-sidebar {background: rgb(38,60,92); position: fixed; max-width: 260px; width: 260px; top: 0; left: 0;bottom:0; box-shadow: 6px 0 12px rgba(0, 0, 0, 0.1);height: 100%;}
|
|
|
|
/* Logo */
|
|
.doc-sidebar .sidebar-logo {background: #fff;width: 100%;display: flex;height: 75px;}
|
|
.doc-sidebar .sidebar-logo img {height:50px;width: auto;display: block;margin:auto;}
|
|
|
|
/* Navigation */
|
|
.doc-sidebar nav {height: calc(100% - 85px);overflow-y: auto;box-sizing: border-box;}
|
|
.doc-sidebar nav::-webkit-scrollbar {width: 6px;}
|
|
.doc-sidebar nav::-webkit-scrollbar-track {background-color: rgba(38,60,92,1);}
|
|
.doc-sidebar nav::-webkit-scrollbar-thumb {background-color: rgba(38,60,92,1);}
|
|
.doc-sidebar nav:hover::-webkit-scrollbar-thumb {background-color: rgba(0,0,0,0.25);}
|
|
|
|
.doc-sidebar nav ul {margin: 12px 0 ;padding: 0;list-style: none;}
|
|
.doc-sidebar nav ul li {}
|
|
.doc-sidebar nav ul li.li-withsubmenu {}
|
|
.doc-sidebar nav ul li.li-withseparator {border-bottom:1px solid rgba(255,255,255,0.25);margin-bottom: 16px; padding-bottom: 16px}
|
|
.doc-sidebar nav ul li a {text-decoration: none; color: rgba(255, 255, 255, 0.5);display: block;padding: 12px 24px;display: flex;align-items: baseline;justify-content: center;}
|
|
.doc-sidebar nav ul li a i.menu-icon {margin-right: 12px; color: rgba(255, 255, 255, 1);}
|
|
.doc-sidebar nav ul li a i.submenu-toggle {text-align: right;color: rgba(255, 255, 255, .25);margin-right: 0;font-size: 0.9em;}
|
|
.doc-sidebar nav ul li a:hover i.submenu-toggle {color: rgba(255,255,255,1);}
|
|
.doc-sidebar nav ul li a .label {flex: 1;}
|
|
.doc-sidebar nav ul li a:hover {color:#fff;}
|
|
.doc-sidebar nav ul li.active a {color: rgba(255, 255, 255, 1);}
|
|
.doc-sidebar nav ul li.active a i.submenu-toggle {transform: rotate(90deg);color: rgba(255, 255, 255, 1);}
|
|
|
|
.doc-sidebar nav ul li.li-withsubmenu ul {margin: 0 0 0 16px;display: none;}
|
|
.doc-sidebar nav ul li.li-withsubmenu ul li {}
|
|
.doc-sidebar nav ul li.li-withsubmenu ul li a {padding: 12px 24px;}
|
|
.doc-sidebar nav ul li.li-withsubmenu.active ul {display: block;}
|
|
.doc-sidebar nav ul li.li-withsubmenu.active ul li {}
|
|
.doc-sidebar nav ul li.li-withsubmenu.active ul li a {color: rgba(255, 255, 255, .5);}
|
|
.doc-sidebar nav ul li.li-withsubmenu.active ul li a:hover {color: rgba(255, 255, 255, 1);}
|
|
.doc-sidebar nav ul li.li-withsubmenu.active ul li.active a {color: rgba(255, 255, 255, 1);}
|
|
.doc-sidebar nav ul li.li-withsubmenu.active ul li a i.submenu-toggle {color: rgba(255, 255, 255, .25);transform: rotate(0);}
|
|
.doc-sidebar nav ul li.li-withsubmenu.active ul li.li-withsubmenu ul {display: none;}
|
|
.doc-sidebar nav ul li.li-withsubmenu.active ul li.li-withsubmenu.active ul {display: block;}
|
|
|
|
/***************************/
|
|
/* MAIN WRAPPER */
|
|
/***************************/
|
|
.doc-wrapper {margin: 0;margin-left: 260px;}
|
|
.doc-wrapper .fa-info-circle {padding-left: 0;}
|
|
.doc-wrapper .fa-at, .doc-wrapper .fa-external-link-alt, .doc-wrapper .fa-share-alt {color: inherit;opacity: 1;}
|
|
|
|
/* Breadcrumb */
|
|
.doc-wrapper .doc-breadcrumbs {display: flex;margin: 0;padding: 0;list-style: none;background: #fff;height: 75px;box-sizing: border-box;}
|
|
.doc-wrapper .doc-breadcrumbs ul {display: flex;margin: auto 32px;padding: 0;list-style: none;}
|
|
.doc-wrapper .doc-breadcrumbs ul li {color:rgba(64, 64, 64, 1);}
|
|
.doc-wrapper .doc-breadcrumbs ul li.breadcrumb-item:not(:last-child):after {display: inline-block;content:'/';margin: 0 8px;}
|
|
.doc-wrapper .doc-breadcrumbs ul li a {color: rgba(38,60,92,1);text-decoration: none;font-weight: 500;}
|
|
|
|
.doc-wrapper .doc-content-wrapper {padding: 24px 32px;max-width: 960px;box-sizing: border-box; }
|
|
.doc-wrapper .doc-content-wrapper h1.documentation-title {margin: 0;margin-bottom:16px;padding: 0;color: rgb(38,60,92);}
|
|
.doc-wrapper .doc-content-wrapper p.documentation-text {margin: 0;margin-bottom:16px;line-height: 1.6;color:rgba(64, 64, 64, 1);}
|
|
|
|
.doc-wrapper .doc-content-wrapper .warning p.documentation-text {color: #887711;}
|
|
.doc-wrapper .doc-content-wrapper .warning p.documentation-text:first-child {margin-top:6px;}
|
|
.doc-wrapper .doc-content-wrapper .warning p.documentation-text:last-child {margin-bottom:6px;}
|
|
|
|
/* Documentation block links */
|
|
.doc-wrapper .doc-content-wrapper .doclinks-section {margin: 24px 0 32px 0;}
|
|
.doc-wrapper .doc-content-wrapper .doclinks-title {margin: 0;margin-bottom:12px;padding: 0;color: rgb(38,60,92);font-size: 1.3em;}
|
|
.doc-wrapper .doc-content-wrapper .doclinks-wrapper {display: flex;flex-wrap: wrap; gap: var(--flex-gap);}
|
|
.doc-wrapper .doc-content-wrapper .doclinks-wrapper .doc-link {display:block; background: #fff;padding: 16px 16px 20px 16px;box-sizing: border-box;border-radius: 5px;box-shadow: rgba(149, 157, 165, 0.2) 0px 4px 16px; cursor: pointer; transition: all .1s ease-in-out;}
|
|
|
|
.doc-wrapper .doc-content-wrapper .doclinks-wrapper .doc-link.size-default {flex: 1; min-width: 280px;}
|
|
.doc-wrapper .doc-content-wrapper .doclinks-wrapper .doc-link.size-small {
|
|
--doclinks-items: 5;
|
|
width: calc((100% / var(--doclinks-items)) - (((var(--doclinks-items) - 1) / var(--doclinks-items)) * var(--flex-gap)));text-align: center;
|
|
}
|
|
.doc-wrapper .doc-content-wrapper .doclinks-wrapper .doc-link .link-icon {font-size: 2.4em; color: rgba(220, 220, 220, 1);margin-bottom: 8px;transition: all .1s ease-in-out;}
|
|
.doc-wrapper .doc-content-wrapper .doclinks-wrapper .doc-link .link-title {color: rgb(38,60,92);font-weight: 500;font-size: 1.1em;transition: all .1s ease-in-out;}
|
|
.doc-wrapper .doc-content-wrapper .doclinks-wrapper .doc-link.size-default .link-title {margin-bottom: 8px;}
|
|
.doc-wrapper .doc-content-wrapper .doclinks-wrapper .doc-link .link-content {color: rgba(64, 64, 64, 1); transition: all .1s ease-in-out;}
|
|
|
|
.doc-wrapper .doc-content-wrapper .doclinks-wrapper .doc-link:hover {background: rgb(38,60,92);text-decoration: none;}
|
|
.doc-wrapper .doc-content-wrapper .doclinks-wrapper .doc-link:hover .link-icon {color: rgba(255, 255, 255, 0.75);}
|
|
.doc-wrapper .doc-content-wrapper .doclinks-wrapper .doc-link:hover .link-title {color: #fff;}
|
|
.doc-wrapper .doc-content-wrapper .doclinks-wrapper .doc-link:hover .link-content {color: #fff;}
|
|
|
|
@media (max-width: 1200px) {
|
|
.doc-wrapper .doc-content-wrapper .doclinks-wrapper .doc-link.size-small {
|
|
--doclinks-items: 4;
|
|
}
|
|
}
|
|
@media (max-width: 860px) {
|
|
.doc-wrapper .doc-content-wrapper .doclinks-wrapper .doc-link.size-small {
|
|
--doclinks-items: 3;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 660px) {
|
|
.doc-wrapper .doc-content-wrapper .doclinks-wrapper .doc-link.size-small {
|
|
--doclinks-items: 2;
|
|
}
|
|
}
|
|
|
|
/* Documentation summary */
|
|
.doc-wrapper .doc-content-wrapper .summary-wrapper {margin-bottom: 32px;}
|
|
.doc-wrapper-bis .doc-content-wrapper .summary-wrapper {margin-bottom: 32px;}
|
|
.doc-wrapper .doc-content-wrapper ul.documentation-summary {margin: 0;padding: 0;color: rgba(0, 0, 0, .25);}
|
|
.doc-wrapper .doc-content-wrapper ul.documentation-summary li {list-style: disc;margin-left: 16px;}
|
|
.doc-wrapper .doc-content-wrapper ul.documentation-summary li ul {margin: 0;padding: 0 ;color: rgba(0, 0, 0, .25);}
|
|
.doc-wrapper .doc-content-wrapper ul.documentation-summary li a {color: rgb(38, 60, 92); text-decoration: none;font-weight: 500;}
|
|
.doc-wrapper .doc-content-wrapper ul.documentation-summary li a:hover {color: rgb(0, 123, 140);}
|
|
|
|
.doc-wrapper .doc-content-wrapper ul.documentation-summary li.summary-title {margin: 0;padding: 0;list-style: none;}
|
|
.doc-wrapper .doc-content-wrapper ul.documentation-summary li.summary-title h3 {color: rgb(38,60,92);margin: 12px 0 6px 0;padding: 0;font-size: 1.2em;text-decoration: underline;}
|
|
|
|
/* Documentation section */
|
|
.doc-wrapper .doc-content-wrapper .documentation-section {background: #fff;padding: 16px;border-radius: 4px;margin-bottom: 24px;}
|
|
.doc-wrapper .doc-content-wrapper .documentation-section h2.documentation-title {margin: 0;margin-bottom:16px;padding: 0;color: rgb(38,60,92);}
|
|
.doc-wrapper .doc-content-wrapper .documentation-section .documentation-example {border:1px dashed #ccc;box-sizing: border-box;padding: 16px;margin-bottom: 16px;}
|
|
.doc-wrapper .doc-content-wrapper .documentation-section .documentation-code {background: var(--colorbacklinepairchecked);border:1px dashed #ccc;box-sizing: border-box;padding: 16px;margin-bottom: 16px;overflow: auto;}
|
|
.doc-wrapper .doc-content-wrapper .documentation-section .info-box .documentation-code {padding: 3px 16px; margin-bottom: 5px;}
|
|
.doc-wrapper .doc-content-wrapper .documentation-section .documentation-code pre {margin: 0;padding: 0;tab-size: 24px;}
|
|
|
|
/* Documentation scroll indicator */
|
|
#documentation-scrollwrapper {height: 5px;position: fixed;bottom: 0;left: 260px;right:0;z-index: 99;}
|
|
#documentation-scroll {background: rgb(0, 123, 140);height: 5px;position: absolute;top: 0;left:0}
|
|
|
|
/* component icons */
|
|
.documentation-fontawesome-icon-list span {color: #333;}
|