hdoc-tools 0.1.0

package/ui/css/theme-default/styles/components/sidebar.css

@@ -0,0 +1,178 @@
+.DocSidebar {
+    position:relative;  
+    width: 0px;
+    opacity: 0;
+    box-shadow: var(--htl-c-shadow-3);
+    transform: translateX(-100%);
+    --transition: opacity 0.5s, transform 0.25s ease;
+    border-right: 1px solid var(--htl-c-divider-light);
+  }
+  
+  .dark .DocSidebar {
+    box-shadow: var(--htl-shadow-1);
+  }
+
+/* when screen is 1019px wide and less */
+@media (max-width: 1019px) {
+  
+  .DocSidebar.open {
+    width:100%;
+    height: -webkit-fill-available;
+    overflow: auto;
+    background-color: var(--htl-c-bg);
+    max-width:420px; /* will goto max-width above */
+    opacity: 1;
+    position:absolute;
+    z-index:999;
+    visibility: visible;
+    transform: translateX(0);
+    transition: opacity 0.25s,
+                transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
+  }
+}
+
+  /* when screen is 1020px wide and more */
+  @media (min-width: 1020px) {
+    .DocSidebar {
+      min-width:320px;      
+      max-width:320px; 
+      z-index: 1;
+      opacity: 1;
+      visibility: visible;
+      box-shadow: none;
+      transform: translateX(0);
+    }
+
+
+    .toolbar-layout .mobile-menu-btn
+    {
+      display:none;
+    }
+
+  }
+
+  /* when screen is 1720px wide and more */
+  @media (min-width: 1720px) {
+    .DocSidebar {
+      min-width:420px;
+    }
+
+  }
+  
+  
+  .DocSidebar .nav {
+    background-color: var(--htl-c-bg);
+    outline: 0;
+    padding: 0 20px 20px;
+  }
+
+  .DocSidebar .group {
+    margin-top: 5px;
+    margin-bottom: 5px;
+    padding-top: 10px;
+  }
+
+  .DocSidebar .group + .group {
+    margin-top: 5px;
+    margin-bottom: 5px;
+    border-top: 1px solid var(--htl-c-divider-light);
+  }
+ 
+
+  /*DocSidebarGroup*/
+  .DocSidebarGroup 
+  {
+    padding-bottom:5px;
+  }
+  .DocSidebarGroup .title {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    z-index: 2;
+  }
+  
+  .DocSidebarGroup .title-text {
+    width:100%;
+    display: block;
+    padding-top: 2px;
+    padding-bottom: 2px;
+    margin: 4px 0;
+    transition: color 0.5s;
+    line-height: 20px;
+  }
+  
+  .DocSidebarGroup .action {
+    /*display: none;*/
+    position: relative;
+    margin-right: -8px;
+    border-radius: 4px;
+    width: 32px;
+    height: 32px;
+  }
+  
+  .DocSidebarGroup.collapsible .action {
+    display: block;
+  }
+  
+  .DocSidebarGroup.collapsible .title {
+    cursor: pointer;
+  }
+  
+  .DocSidebarGroup .title:hover .action {
+    color: var(--htl-c-text-2);
+  }
+  
+  .DocSidebarGroup .icon {
+    position: absolute;
+    top: 10px;
+    left: 0px;
+    width: 16px;
+    height: 16px;
+    font-size: 12px;
+    
+  }
+
+  .DocSidebarGroup .items
+  {
+    padding-left: 20px;
+  }
+
+
+  /*.DocLink */
+  .DocLink.link {
+    display: block;
+    padding-top: 2px;
+    padding-bottom: 2px;
+    margin: 4px 0;
+    transition: color 0.5s;
+  }
+  
+  .DocLink.link:hover {
+    color: var(--htl-c-text-1);
+    text-decoration: underline;
+  }
+  
+  .DocLink.link.active {
+    color: var(--htl-c-brand);
+  }
+  
+  .DocLink.link :deep(.icon) {
+    width: 12px;
+    height: 12px;
+    fill: currentColor;
+  }
+  
+  .DocLink.noitems {
+    margin-left: 23px;
+  }
+
+  .DocLink .link-text {
+    line-height: 20px;
+    font-size: var(--htl-default-font-size);
+  }
+  
+  .DocLink .link-text.light {
+    font-size: var(--htl-default-font-size);
+    font-weight: 400;
+  }
+  

package/ui/css/theme-default/styles/fonts.css

@@ -0,0 +1,221 @@
+/* webfont-marker-begin */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
+/* webfont-marker-end */
+
+@font-face {
+  font-family: 'Inter var';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: 'Regular';
+  src: url('../fonts/inter-roman-cyrillic.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+@font-face {
+  font-family: 'Inter var';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: 'Regular';
+  src: url('../fonts/inter-roman-cyrillic-ext.woff2') format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+    U+FE2E-FE2F;
+}
+
+@font-face {
+  font-family: 'Inter var';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: 'Regular';
+  src: url('../fonts/inter-roman-greek.woff2') format('woff2');
+  unicode-range: U+0370-03FF;
+}
+
+@font-face {
+  font-family: 'Inter var';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: 'Regular';
+  src: url('../fonts/inter-roman-greek-ext.woff2') format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+
+@font-face {
+  font-family: 'Inter var';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: 'Regular';
+  src: url('../fonts/inter-roman-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: 'Inter var';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: 'Regular';
+  src: url('../fonts/inter-roman-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+  font-family: 'Inter var';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: 'Regular';
+  src: url('../fonts/inter-roman-vietnamese.woff2') format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
+    U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+
+@font-face {
+  font-family: 'Inter var';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  font-named-instance: 'Italic';
+  src: url('../fonts/inter-italic-cyrillic.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+@font-face {
+  font-family: 'Inter var';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  font-named-instance: 'Italic';
+  src: url('../fonts/inter-italic-cyrillic-ext.woff2') format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+    U+FE2E-FE2F;
+}
+
+@font-face {
+  font-family: 'Inter var';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  font-named-instance: 'Italic';
+  src: url('../fonts/inter-italic-greek.woff2') format('woff2');
+  unicode-range: U+0370-03FF;
+}
+
+@font-face {
+  font-family: 'Inter var';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  font-named-instance: 'Italic';
+  src: url('../fonts/inter-italic-greek-ext.woff2') format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+
+@font-face {
+  font-family: 'Inter var';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  font-named-instance: 'Italic';
+  src: url('../fonts/inter-italic-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: 'Inter var';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  font-named-instance: 'Italic';
+  src: url('../fonts/inter-italic-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+  font-family: 'Inter var';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  font-named-instance: 'Italic';
+  src: url('../fonts/inter-italic-vietnamese.woff2') format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
+    U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+
+@font-face {
+  font-family: 'Inter var experimental';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: oblique 0deg 10deg;
+  src: url('../fonts/inter-cyrillic.woff2') format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+@font-face {
+  font-family: 'Inter var experimental';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: oblique 0deg 10deg;
+  src: url('../fonts/inter-cyrillic-ext.woff2') format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
+    U+FE2E-FE2F;
+}
+
+@font-face {
+  font-family: 'Inter var experimental';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: oblique 0deg 10deg;
+  src: url('../fonts/inter-greek.woff2') format('woff2');
+  unicode-range: U+0370-03FF;
+}
+
+@font-face {
+  font-family: 'Inter var experimental';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: oblique 0deg 10deg;
+  src: url('../fonts/inter-greek-ext.woff2') format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+
+@font-face {
+  font-family: 'Inter var experimental';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: oblique 0deg 10deg;
+  src: url('../fonts/inter-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: 'Inter var experimental';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: oblique 0deg 10deg;
+  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
+    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+  font-family: 'Inter var experimental';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: oblique 0deg 10deg;
+  src: url('../fonts/inter-vietnamese.woff2') format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
+    U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}

package/ui/css/theme-default/styles/htldoc.layouts.css

@@ -0,0 +1,244 @@
+/* put htl styles here */
+
+/* LAYOUT */
+.hb-container-vertical,
+.hb-container-horizontal{
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.hb-container-horizontal{
+  flex-direction: row;
+}
+.hb-container-vertical > *,
+.hb-container-horizontal > *{
+  flex-shrink: 1;
+}
+.hb-container-vertical > .hb-container-expand,
+.hb-container-horizontal > .hb-container-expand{
+  flex-grow: 1;
+  overflow: auto;
+}
+.hb-full-height{
+  height: 100%;
+}
+.hb-min-height{
+  height: auto;
+}
+.hb-overflow-hidden{
+  overflow: hidden !important;
+}
+.hb-center-v
+{
+  margin-top: auto;
+  margin-bottom: auto;
+}
+.hb-text-overflow
+{
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* toolbar */
+.toolbar-layout
+{
+    height: 58px;
+    line-height: 58px;
+    border-bottom: 1px solid var(--htl-c-divider-light);
+}
+
+.toolbar-logo
+{
+  width: 200px;
+  min-width: 200px;
+  height: 100%;
+  padding: 0px 20px;
+}
+
+.toolbar-logo-image
+{
+    background: url(/css/images/hornbill-logo-full.svg) no-repeat left center;
+    height:100%;
+}
+
+.toolbar-split {
+  margin-top: auto;
+  margin-bottom: auto;
+  height: 50%;
+  border-left: 2px solid var(--htl-c-divider-light);
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+  display: block;
+}
+
+.toolbar-middle
+{
+    padding: 0px 20px
+}
+
+.toolbar-right
+{
+  padding: 0px 20px;
+}
+
+
+/* toolbar title and desc */
+.toolbar-layout .title
+{
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.toolbar-layout .description
+{
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.toolbar-layout .mobile-menu-btn
+{
+   border-radius: 4px 4px;
+   margin-left:10px;
+   padding: 4 4;
+   font-size: var(--htl-massive-font-size);
+   border-color: var(--htl-button-brand-border);
+   color:var(--htl-c-brand-dark);
+}
+
+.toolbar-layout .mobile-menu-btn:hover
+{
+   border: var(--htl-button-brand-lighter);
+   color:var(--htl-c-text-dark-1);
+   background:var(--htl-c-brand);
+}
+
+/* top nav bar */
+.nav-bar-nav-list {
+  align-items: stretch;
+  display: flex;
+}
+
+.nav-bar-nav-list .nav-bar-item {
+  flex-shrink: 0;
+  align-items: center;
+  display: flex;
+  
+}
+
+.nav-bar-nav-list .nav-bar-item > a{
+  padding:0 0.5rem;
+  font-size: var(--htl-default-font-size);
+}
+
+.nav-bar-nav-list .nav-bar-item:hover {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.nav-bar-nav-list .nav-bar-item.active {
+  text-decoration: underline;
+}
+
+/* panel headers */
+.panel-header
+{
+  background-color: var(--htl-c-white-soft);
+  padding:10px;
+  border: 1px solid  var(--htl-c-divider-light);  
+  border-radius: 4px 4px 0 0;
+}
+.panel-header .icon
+{
+  font-size: 20px;
+  font-weight: normal;
+
+  display: inline-block;
+  position: relative;
+  top: 3px;
+  
+  margin-right:5px;
+  
+
+}
+.panel-header .title
+{
+  width:32px;height:32px;
+  font-size: var(--htl-default-font-size);
+  font-weight: 600;
+
+}
+.dark .panel-header
+{
+  background-color: var(--htl-c-black);
+}
+.panel-content
+{
+  padding:10px;
+  border: 1px solid  var(--htl-c-divider-light);  
+  border-top-width: 0px;
+}
+
+
+/* theme switcher */
+.theme-switch {
+  position:relative;
+  display: inline-block;
+  width: 30px;
+  height: 20px;
+  
+}
+
+.theme-switch input { 
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 13px;
+  width: 13px;
+  left: 2px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: #2196F3;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(13px);
+  -ms-transform: translateX(13px);
+  transform: translateX(13px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}