@d-i-t-a/reader 2.1.0-alpha.1 → 2.1.0-beta.1

package/dist/reader.css

@@ -82,12 +82,14 @@ ol li {
   list-style: none; }
 
 button {
-  background: #fff;
+  background: none;
   border: 0;
   color: #5B5852;
   padding: 0.35rem 0.35rem 0.2rem;
   margin: 0;
   -webkit-appearance: none; }
+  button:focus {
+    background: none; }
 
 a {
   color: #5B5852;
@@ -144,7 +146,7 @@ a {
 
 #iframe-wrapper iframe {
   border: none;
-  overflow: hidden;
+  overflow: auto;
   opacity: 0; }
 
 [data-viewer-theme="day"] {
@@ -152,22 +154,12 @@ a {
 
 [data-viewer-theme="sepia"] {
   background-color: #faf4e8; }
-  [data-viewer-theme="sepia"] button {
-    background: #faf4e8;
-    color: #5B5852; }
-  [data-viewer-theme="sepia"] a {
-    color: #5B5852; }
   [data-viewer-theme="sepia"] .info {
     color: #5B5852; }
 
 [data-viewer-theme="night"] {
   background-color: #000000;
   color: #fff; }
-  [data-viewer-theme="night"] button {
-    background: #000000;
-    color: #DADADA; }
-  [data-viewer-theme="night"] a {
-    color: #DADADA; }
   [data-viewer-theme="night"] .info {
     color: #DADADA; }
 
@@ -205,9 +197,9 @@ a {
   animation: load 1s ease-in-out infinite; }
 
 .loading {
-  position: fixed;
+  position: sticky;
   width: 100%;
-  height: 100vh;
+  height: 100%;
   top: 0;
   z-index: 10;
   background-color: rgba(255, 255, 255, 0.9);
@@ -218,12 +210,11 @@ a {
   user-select: none;
   cursor: default; }
   .loading .icon {
-    display: block;
-    position: absolute;
+    position: sticky;
     top: 50%;
     left: 50%;
-    width: 3rem;
-    height: 3rem;
+    width: 4rem;
+    height: 4rem;
     transform: translate(-50%, -50%);
     fill: #9e9e9e; }
 
@@ -255,13 +246,13 @@ a {
  * Licensed to: Bokbasen AS and CAST under one or more contributor license agreements.
  */
 .error {
+  position: relative;
   z-index: 20;
   background-color: rgba(255, 255, 255, 0.875);
   color: #d0343a;
   height: 100%;
   top: 0;
   padding-top: 40vh;
-  position: fixed;
   text-align: center;
   width: 100%;
   -webkit-user-select: none;
@@ -321,16 +312,20 @@ a {
  * Developed on behalf of: Bokbasen AS (https://www.bokbasen.no)
  * Licensed to: Bokbasen AS and CAST under one or more contributor license agreements.
  */
-.sidenav-toc .chapter-link {
-  display: block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis; }
+.sidenav-toc {
+  padding-inline-start: 0px; }
+  .sidenav-toc .chapter-link {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis; }
+  .sidenav-toc .chapter-title {
+    padding: 0 16px;
+    font-size: 14px;
+    color: lightgray; }
 
-.sidenav-toc .chapter-title {
-  padding: 0 16px;
-  font-size: 14px;
-  color: lightgray; }
+.collapsible-header {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
 
 .contents-view, .pageList-view, .landmarks-view {
   background-color: #fff;
@@ -360,7 +355,7 @@ a {
         .contents-view ul li a:hover, .pageList-view ol li a:hover,
         .pageList-view ul li a:hover, .landmarks-view ol li a:hover,
         .landmarks-view ul li a:hover {
-          background: #5B5852;
+          background: #E0E0E0;
           color: #111; } }
       .contents-view ol li a.active,
       .contents-view ul li a.active, .pageList-view ol li a.active,
@@ -372,7 +367,7 @@ a {
       .contents-view ul li a.active:hover, .pageList-view ol li a.active:hover,
       .pageList-view ul li a.active:hover, .landmarks-view ol li a.active:hover,
       .landmarks-view ul li a.active:hover {
-        background: #111;
+        background: #5B5852;
         color: #DADADA; }
     .contents-view ol li span,
     .contents-view ul li span, .pageList-view ol li span,
@@ -398,7 +393,7 @@ a {
       [data-viewer-theme="sepia"] .contents-view ul li a:hover, [data-viewer-theme="sepia"] .pageList-view ol li a:hover,
       [data-viewer-theme="sepia"] .pageList-view ul li a:hover, [data-viewer-theme="sepia"] .landmarks-view ol li a:hover,
       [data-viewer-theme="sepia"] .landmarks-view ul li a:hover {
-        background: #5B5852;
+        background: #E0E0E0;
         color: #faf4e8; } }
     [data-viewer-theme="sepia"] .contents-view ol li a.active,
     [data-viewer-theme="sepia"] .contents-view ul li a.active, [data-viewer-theme="sepia"] .pageList-view ol li a.active,
@@ -410,7 +405,7 @@ a {
     [data-viewer-theme="sepia"] .contents-view ul li a.active:hover, [data-viewer-theme="sepia"] .pageList-view ol li a.active:hover,
     [data-viewer-theme="sepia"] .pageList-view ul li a.active:hover, [data-viewer-theme="sepia"] .landmarks-view ol li a.active:hover,
     [data-viewer-theme="sepia"] .landmarks-view ul li a.active:hover {
-      background: #111;
+      background: #5B5852;
       color: #DADADA; }
   [data-viewer-theme="sepia"] .contents-view ol li span,
   [data-viewer-theme="sepia"] .contents-view ul li span, [data-viewer-theme="sepia"] .pageList-view ol li span,
@@ -432,7 +427,7 @@ a {
       [data-viewer-theme="night"] .contents-view ul li a:hover, [data-viewer-theme="night"] .pageList-view ol li a:hover,
       [data-viewer-theme="night"] .pageList-view ul li a:hover, [data-viewer-theme="night"] .landmarks-view ol li a:hover,
       [data-viewer-theme="night"] .landmarks-view ul li a:hover {
-        background: #5B5852;
+        background: #E0E0E0;
         color: #fff; } }
     [data-viewer-theme="night"] .contents-view ol li a.active,
     [data-viewer-theme="night"] .contents-view ul li a.active, [data-viewer-theme="night"] .pageList-view ol li a.active,
@@ -444,7 +439,7 @@ a {
     [data-viewer-theme="night"] .contents-view ul li a.active:hover, [data-viewer-theme="night"] .pageList-view ol li a.active:hover,
     [data-viewer-theme="night"] .pageList-view ul li a.active:hover, [data-viewer-theme="night"] .landmarks-view ol li a.active:hover,
     [data-viewer-theme="night"] .landmarks-view ul li a.active:hover {
-      background: #000000;
+      background: #5B5852;
       color: #DADADA; }
   [data-viewer-theme="night"] .contents-view ol li span,
   [data-viewer-theme="night"] .contents-view ul li span, [data-viewer-theme="night"] .pageList-view ol li span,
@@ -674,7 +669,7 @@ a {
         .bookmarks-view ol li a:hover,
         .bookmarks-view ul li a:hover, .highlights-view ol li a:hover,
         .highlights-view ul li a:hover {
-          background: #5B5852;
+          background: #E0E0E0;
           color: #111; } }
       .bookmarks-view ol li a.active,
       .bookmarks-view ul li a.active, .highlights-view ol li a.active,
@@ -684,7 +679,7 @@ a {
       .bookmarks-view ol li a.active:hover,
       .bookmarks-view ul li a.active:hover, .highlights-view ol li a.active:hover,
       .highlights-view ul li a.active:hover {
-        background: #111;
+        background: #5B5852;
         color: #DADADA; }
 
 [data-viewer-theme="sepia"] .bookmarks-view, [data-viewer-theme="sepia"] .highlights-view {
@@ -698,7 +693,7 @@ a {
       [data-viewer-theme="sepia"] .bookmarks-view ol li a:hover,
       [data-viewer-theme="sepia"] .bookmarks-view ul li a:hover, [data-viewer-theme="sepia"] .highlights-view ol li a:hover,
       [data-viewer-theme="sepia"] .highlights-view ul li a:hover {
-        background: #5B5852;
+        background: #E0E0E0;
         color: #faf4e8; } }
     [data-viewer-theme="sepia"] .bookmarks-view ol li a.active,
     [data-viewer-theme="sepia"] .bookmarks-view ul li a.active, [data-viewer-theme="sepia"] .highlights-view ol li a.active,
@@ -713,8 +708,7 @@ a {
   [data-viewer-theme="sepia"] .bookmarks-view ol li span,
   [data-viewer-theme="sepia"] .bookmarks-view ul li span, [data-viewer-theme="sepia"] .highlights-view ol li span,
   [data-viewer-theme="sepia"] .highlights-view ul li span {
-    color: #5B5852;
-    border-bottom: 1px solid #e8cc94; }
+    color: #5B5852; }
 
 [data-viewer-theme="night"] .bookmarks-view, [data-viewer-theme="night"] .highlights-view {
   background-color: #000000; }
@@ -727,7 +721,7 @@ a {
       [data-viewer-theme="night"] .bookmarks-view ol li a:hover,
       [data-viewer-theme="night"] .bookmarks-view ul li a:hover, [data-viewer-theme="night"] .highlights-view ol li a:hover,
       [data-viewer-theme="night"] .highlights-view ul li a:hover {
-        background: #5B5852;
+        background: #E0E0E0;
         color: #fff; } }
     [data-viewer-theme="night"] .bookmarks-view ol li a.active,
     [data-viewer-theme="night"] .bookmarks-view ul li a.active, [data-viewer-theme="night"] .highlights-view ol li a.active,
@@ -737,7 +731,7 @@ a {
     [data-viewer-theme="night"] .bookmarks-view ol li a.active:hover,
     [data-viewer-theme="night"] .bookmarks-view ul li a.active:hover, [data-viewer-theme="night"] .highlights-view ol li a.active:hover,
     [data-viewer-theme="night"] .highlights-view ul li a.active:hover {
-      background: #000000;
+      background: #5B5852;
       color: #DADADA; }
   [data-viewer-theme="night"] .bookmarks-view ol li span,
   [data-viewer-theme="night"] .bookmarks-view ul li span, [data-viewer-theme="night"] .highlights-view ol li span,
@@ -766,47 +760,46 @@ a {
 :root {
   --RS__highlightColor: rgba(255, 255, 0, 0.5); }
 
-.sidenav-annotations .chapter-link {
-  display: block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis; }
-
-.sidenav-annotations .chapter-title {
-  padding: 0 16px;
-  font-size: 14px;
-  color: lightgray; }
-
-.sidenav-annotations ol {
-  padding-left: 24px; }
-
-.sidenav-annotations li {
-  position: relative; }
-  .sidenav-annotations li .delete {
-    position: absolute;
-    right: 10px;
-    top: 50%;
-    transform: translate(0, -50%); }
-  .sidenav-annotations li .bookmark-link, .sidenav-annotations li .highlight-link {
+.sidenav-annotations {
+  padding-inline-start: 0px; }
+  .sidenav-annotations .chapter-link {
     display: block;
-    position: relative;
-    padding-top: 8px !important;
-    padding-bottom: 8px !important;
-    line-height: 1.25; }
-    .sidenav-annotations li .bookmark-link svg, .sidenav-annotations li .bookmark-link i, .sidenav-annotations li .highlight-link svg, .sidenav-annotations li .highlight-link i {
-      left: 4px;
-      top: 8px;
-      position: absolute; }
-    .sidenav-annotations li .bookmark-link .title, .sidenav-annotations li .highlight-link .title {
-      display: block; }
-    .sidenav-annotations li .bookmark-link .subtitle, .sidenav-annotations li .highlight-link .subtitle {
-      display: block;
-      line-height: 20px;
-      font-size: 10px; }
-    .sidenav-annotations li .bookmark-link .timestamp, .sidenav-annotations li .highlight-link .timestamp {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis; }
+  .sidenav-annotations .chapter-title {
+    padding: 0 16px;
+    font-size: 14px;
+    color: lightgray; }
+  .sidenav-annotations ol {
+    padding-left: 24px; }
+  .sidenav-annotations li {
+    position: relative; }
+    .sidenav-annotations li .delete {
+      position: absolute;
+      right: 10px;
+      top: 50%;
+      transform: translate(0, -50%); }
+    .sidenav-annotations li .bookmark-link, .sidenav-annotations li .highlight-link {
       display: block;
-      line-height: 20px;
-      font-size: 8px; }
+      position: relative;
+      padding-top: 8px !important;
+      padding-bottom: 8px !important;
+      line-height: 1.25; }
+      .sidenav-annotations li .bookmark-link svg, .sidenav-annotations li .bookmark-link i, .sidenav-annotations li .highlight-link svg, .sidenav-annotations li .highlight-link i {
+        left: 4px;
+        top: 8px;
+        position: absolute; }
+      .sidenav-annotations li .bookmark-link .title, .sidenav-annotations li .highlight-link .title {
+        display: block; }
+      .sidenav-annotations li .bookmark-link .subtitle, .sidenav-annotations li .highlight-link .subtitle {
+        display: block;
+        line-height: 20px;
+        font-size: 10px; }
+      .sidenav-annotations li .bookmark-link .timestamp, .sidenav-annotations li .highlight-link .timestamp {
+        display: block;
+        line-height: 20px;
+        font-size: 8px; }
 
 /*
  * Copyright 2018-2020 DITA (AM Consulting LLC)
@@ -831,9 +824,10 @@ a {
   animation: toolsAnimateIn 100ms ease-out both;
   transform-origin: bottom;
   z-index: 999;
-  position: absolute;
+  position: relative;
   background: gainsboro;
-  display: none; }
+  display: none;
+  width: fit-content; }
   .highlight-toolbox:before {
     content: '';
     position: absolute;
@@ -846,9 +840,6 @@ a {
   .highlight-toolbox > div > button {
     display: inline-block; }
 
-.color-option {
-  background-color: gainsboro; }
-
 .color-option span {
   display: inline-block;
   border-radius: 50%;
@@ -1084,7 +1075,7 @@ input::-moz-focus-outer {
  * Licensed to: Bibliotheca LLC, Bokbasen AS and CAST under one or more contributor license agreements.
  */
 @media only screen and (max-width: 600px) {
-  .timeline, .scrubber > input, #nav-mobile-left > li > a[rel=next], #nav-mobile-left > li > a[rel=prev] {
+  .timeline, .scrubber > input {
     display: none; } }
 
 .scrubber {
@@ -1097,7 +1088,9 @@ input::-moz-focus-outer {
   top: 1.5rem;
   left: 2.5rem;
   bottom: 1.5rem;
-  width: 1.25rem; }
+  width: 1.25rem;
+  display: flex;
+  flex-direction: column; }
   .timeline .chapter {
     border-left: 6px solid transparent;
     transition: border-color 300ms ease-out;
@@ -1124,4 +1117,102 @@ input::-moz-focus-outer {
     text-overflow: ellipsis;
     max-width: 22rem; }
 
+[data-viewer-theme="night"] .timeline .chapter {
+  border: 1px solid #111; }
+
+[data-viewer-theme="sepia"] .timeline .chapter {
+  border: 1px solid #faf4e8; }
+
+.collection {
+  border-radius: 2px;
+  overflow: hidden;
+  position: relative; }
+  .collection .collection-item {
+    padding: 10px 20px;
+    margin: 0; }
+    .collection .collection-item.avatar {
+      min-height: 84px;
+      padding-left: 72px;
+      position: relative; }
+      .collection .collection-item.avatar:not(.circle-clipper) > .circle,
+      .collection .collection-item.avatar :not(.circle-clipper) > .circle {
+        position: absolute;
+        width: 42px;
+        height: 42px;
+        overflow: hidden;
+        left: 15px;
+        display: inline-block;
+        vertical-align: middle; }
+      .collection .collection-item.avatar i.circle {
+        font-size: 18px;
+        line-height: 42px;
+        color: #fff;
+        background-color: #999;
+        text-align: center; }
+      .collection .collection-item.avatar .title {
+        font-size: 16px; }
+      .collection .collection-item.avatar p {
+        margin: 0; }
+      .collection .collection-item.avatar .secondary-content {
+        position: absolute;
+        top: 16px;
+        right: 16px; }
+    .collection .collection-item:last-child {
+      border-bottom: none; }
+    .collection .collection-item.active .secondary-content {
+      color: #fff; }
+  .collection a.collection-item {
+    display: block;
+    transition: .25s; }
+  .collection.with-header .collection-header {
+    padding: 10px 20px; }
+  .collection.with-header .collection-item {
+    padding-left: 30px; }
+  .collection.with-header .collection-item.avatar {
+    padding-left: 72px; }
+
+.pagination {
+  display: inline-block; }
+  .pagination li {
+    display: inline-block;
+    border-radius: 2px;
+    text-align: center;
+    vertical-align: top;
+    height: 30px;
+    clear: unset !important;
+    width: unset !important; }
+    .pagination li a {
+      color: #444;
+      display: inline-block !important;
+      font-size: 1.2rem;
+      padding: 0 10px;
+      line-height: 30px; }
+    .pagination li.active a {
+      color: #999; }
+    .pagination li.disabled a {
+      cursor: default;
+      color: #999; }
+    .pagination li i {
+      font-size: 2rem; }
+  .pagination li.pages ul li {
+    display: inline-block;
+    float: none; }
+
+.search-wrapper {
+  display: flex;
+  align-items: center; }
+
+.sidenav.expanded {
+  width: 992px !important; }
+  @media only screen and (max-width: 992px) {
+    .sidenav.expanded {
+      width: 100% !important; } }
+
+.logo-container i.editAnnotations {
+  transform: rotate(-90deg);
+  margin-top: 12px;
+  font-size: 32px;
+  margin-right: 6px;
+  float: right; }
+
 /*# sourceMappingURL=reader.css.map */