ixbrl-viewer 1.4.39__py3-none-any.whl → 1.4.40__py3-none-any.whl

iXBRLViewerPlugin/viewer/src/less/inspector.less

@@ -3,6 +3,7 @@
 @import url("core.less");
 @import url("fonts.less");
 @import url("colours.less");
+@import url("colours-dark-mode.less");
 @import url("common.less");
 @import (reference) "components.less";
 @import url("form-controls.less");
@@ -21,22 +22,102 @@
 
 @top-bar-height: 3.5rem;
 
+:root {
+  --colour-bg-selected: @colour-bg-selected;
+  --colour-bg-tag: @colour-bg-tag;
+  --colour-bg: @colour-bg;
+  --colour-bg-fade: @colour-bg-fade;
+  --colour-border-grey: @colour-border-grey;
+  --colour-button-bg: @colour-button-bg;
+  --colour-button-primary-bg: @colour-button-primary-bg;
+  --colour-button-primary-border: @colour-button-primary-border;
+  --colour-foreground: @colour-foreground;
+  --colour-highlight-1: @colour-highlight-1;
+  --colour-highlight-2: @colour-highlight-2;
+  --colour-highlight-default: @colour-highlight-default;
+  --colour-icon-grey: @colour-icon-grey;
+  --colour-linked-fact: @colour-linked-fact;
+  --colour-loader: @colour-loader;
+  --colour-primary-focus: @colour-primary-focus;
+  --colour-primary: @colour-primary;
+  --colour-related-fact: @colour-related-fact;
+  --colour-row-odd: @colour-row-odd;
+  --colour-row-hover: @colour-row-hover;
+  --colour-text-form-value: @colour-text-form-value;
+  --colour-text-light: @colour-text-light;
+  --colour-text-title: @colour-text-title;
+  --colour-text: @colour-text;
+  --colour-warning: @colour-warning;
+  --top-bar-height: @top-bar-height;
+
+  .only-dark {
+    display: none;
+  }
+}
+
+:root[data-theme="theme-dark"] {
+  --colour-bg-selected: @colour-bg-selected-d;
+  --colour-bg-tag: @colour-bg-tag-d;
+  --colour-bg: @colour-bg-d;
+  --colour-bg-fade: @colour-bg-fade-d;
+  --colour-border-grey: @colour-border-grey-d;
+  --colour-button-bg: @colour-button-bg-d;
+  --colour-button-primary-bg: @colour-button-primary-bg-d;
+  --colour-button-primary-border: @colour-button-primary-border-d;
+  --colour-foreground: @colour-foreground-d;
+  --colour-highlight-1: @colour-highlight-1-d;
+  --colour-highlight-2: @colour-highlight-2-d;
+  --colour-highlight-default: @colour-highlight-default-d;
+  --colour-icon-grey: @colour-icon-grey-d;
+  --colour-linked-fact: @colour-linked-fact-d;
+  --colour-loader: @colour-loader-d;
+  --colour-primary-focus: @colour-primary-focus-d;
+  --colour-primary: @colour-primary-d;
+  --colour-related-fact: @colour-related-fact-d;
+  --colour-row-odd: @colour-row-odd-d;
+  --colour-row-hover: @colour-row-hover-d;
+  --colour-text-form-value: @colour-text-form-value-d;
+  --colour-text-light: @colour-text-light-d;
+  --colour-text-title: @colour-text-title-d;
+  --colour-text: @colour-text-d;
+  --colour-warning: @colour-warning-d;
+  --top-bar-height: @top-bar-height;
+
+  .only-dark {
+    display: initial;
+  }
+
+  .only-light {
+    display: none;
+  }
+}
+
 #ixv {
   /* Specify these here, not on body in case the iXBRL document has its own
    * style attribute */
   &,
-  table {
+  table,
+  dialog {
     .default-font();
     .text-md();
   }
 
+  a {
+    text-decoration: none;
+    color: var(--colour-primary);
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
   #ixv-progress {
     position: fixed;
     top: 20px;
     left: 20px;
     width: 500px;
     height: 200px;
-    background-color: #fff;
+    background-color: var(--colour-bg);
     border: solid #000 1px;
     text-align: center;
   }
@@ -46,7 +127,7 @@
     box-sizing: border-box;
     position: fixed;
     left: 0;
-    top: @top-bar-height;
+    top: var(--top-bar-height);
     bottom: 0;
     z-index: 0;
     display: flex;
@@ -58,6 +139,8 @@
     }
 
     #iframe-container {
+      background-color:white;
+      color:black;
       position: relative;
       flex: 1 1 auto;
 
@@ -134,53 +217,66 @@
     .default-font();
     .text-md();
 
-    color: @text;
+    display: flex;
+    align-items: center;
+    color: var(--colour-text);
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
-    height: @top-bar-height;
+    height: var(--top-bar-height);
     border-bottom: solid 1px #ccc;
     z-index: 5;
 
+    #home-link {
+      font-size: 2.2rem;
+      font-weight: bold;
+      margin-left: 1rem;
+    }
+
     .header {
-      position: absolute;
-      top: 0;
-      left: 0;
-      bottom: 0;
       height: 100%;
     }
 
     .document-title {
-      position: absolute;
       box-sizing: border-box;
-      left: 160px;
-      top: 0;
       padding-right: 1.6rem;
-      padding-top: 1.3rem;
+      line-height: var(--top-bar-height);
       border-right: solid 0.1rem #ccc;
-      height: @top-bar-height;
+      height: var(--top-bar-height);
       overflow: hidden;
+      font-size: inherit;
+      font-weight: inherit;
+      margin: 0;
     }
 
     .top-bar-controls {
       position: absolute;
-      right: 1.8rem;
+      display: flex;
+      right: 0;
       top: 0;
-      line-height: @top-bar-height;
+      line-height: var(--top-bar-height);
+      height: var(--top-bar-height);
+      background: var(--colour-bg);
+      padding-left: 1.8rem;
 
-      * {
-        vertical-align: middle;
+      & > * {
+        margin-right: 0.8rem;
       }
 
-      .content {
-        input {
+      .horizontal-menu {
+        * {
+          vertical-align: middle;
+        }
+
+        .content > * {
           position: relative;
           top: -0.1rem;
           margin-right: 0.6rem;
         }
       }
 
+
       .highlight-key {
         margin-left: 0.6rem;
         margin-right: 1.5rem;
@@ -196,8 +292,9 @@
           position: absolute;
           top: 3.2rem;
           left: -2rem;
-          background: #fff;
-          border: solid 1px @text;
+          background: white;
+          color: black;
+          border: solid 1px black;
           border-radius: 0.3rem;
           line-height: 1.6rem;
 
@@ -207,10 +304,10 @@
             left: 1.1rem;
             width: 1.5rem;
             height: 1.5rem;
-            border-top: solid 0.1rem @text;
-            border-left: solid 0.1rem @text;
+            border-top: solid 0.1rem black;
+            border-left: solid 0.1rem black;
             transform: translate(50%, -50%) rotate(45deg);
-            background: #fff;
+            background: white;
           }
 
           .item {
@@ -226,15 +323,15 @@
             }
 
             .sample-0 {
-              background: @highlight-default;
+              background: var(--colour-highlight-default);
             }
 
             .sample-1 {
-              background: @highlight-1;
+              background: var(--colour-highlight-1);
             }
 
             .sample-2 {
-              background: @highlight-2;
+              background: var(--colour-highlight-2);
             }
           }
         }
@@ -250,6 +347,22 @@
           .icon-warning();
         }
       }
+
+      #toggle-dark-mode {
+        border: none;
+
+        &::before {
+          .icon-dark-mode();
+
+          cursor: pointer;
+        }
+      }
+
+      .menu .menu-title::before {
+        .icon-cog();
+
+        font-size: 2rem;
+      }
     }
   }
 
@@ -261,15 +374,16 @@
     h2,
     h3 {
       font-weight: normal;
-      border-bottom: solid 1px @border-grey;
       width: 100%;
       box-sizing: border-box;
-      padding-bottom: 5px;
-      color: @text-title;
+      color: var(--colour-text-title);
     }
 
     h2 {
       text-align: center;
+      font-size: 1.8rem;
+      line-height: 3.2rem;
+      margin: 0.8rem 0;
     }
 
     h3 {
@@ -278,65 +392,28 @@
 
     h4 {
       font-weight: bold;
-      color: @text-title;
+      color: var(--colour-text-title);
       margin-bottom: 1.4em;
     }
 
     #inspector-head {
       padding: 0;
       position: relative;
-      border-bottom: solid 1px @border-grey;
-
-      .title {
-        text-align: center;
-        position: relative;
-        border-bottom: @simple-border;
-
-        h1 {
-          margin: 0.8rem 0;
-          border: none;
-          padding: 0;
-          font-size: 1.8rem;
-          line-height: 3.2rem;
-        }
-
-        .back {
-          .square-button-bare();
-
-          top: 0;
-          left: 0;
-          position: absolute;
-
-          &::before {
-            .icon-chevron-left();
-          }
-        }
-
-        .menu {
-          top: 0;
-          right: 0;
-          position: absolute;
-
-          .menu-title::before {
-            .icon-cog();
-
-            font-size: 2rem;
-          }
-        }
-      }
+      border-bottom: solid 1px var(--colour-border-grey);
 
       .controls {
         position: relative;
         height: 3.2rem;
-        margin: 0.8rem 0.9rem;
+        padding: 0.8rem 0.9rem;
+        display: flex;
+
+        & > * {
+          margin: 0.8rem 0.9rem;
+        }
 
         .search-button {
           .square-button();
 
-          position: absolute;
-          top: 0;
-          left: 7.7rem;
-
           &::before {
             .icon-search();
 
@@ -347,10 +424,6 @@
         .outline-button {
           .square-button();
 
-          position: absolute;
-          top: 0;
-          left: 3.6rem;
-
           &::before {
             .icon-outline();
 
@@ -361,10 +434,6 @@
         .summary-button {
           .square-button();
 
-          position: absolute;
-          top: 0;
-          left: 0;
-
           &::before {
             .icon-summary();
 
@@ -372,35 +441,61 @@
           }
         }
 
-        .next-prev {
-          position: absolute;
-          top: 0;
-          right: 0;
+        .ixbrl-prev-tag {
+          .square-button();
 
-          .ixbrl-next-tag,
-          .ixbrl-prev-tag {
-            .square-button();
+          margin-left: auto;
 
-            position: relative;
-            display: inline-block;
+          &::before {
+            .icon-chevron-left();
           }
+        }
+
+        .ixbrl-next-tag {
+          .square-button();
 
-          .ixbrl-next-tag::before {
+          &::before {
             .icon-chevron-right();
           }
+        }
+      }
+    }
+
+    .inspector-container {
+      flex-grow: 1;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+
+      .inspector-title {
+        text-align: center;
+        position: relative;
+        margin: 0.8rem 0;
+
+        h2 {
+          margin: 0;
+          padding: 0;
+        }
+
+        .back {
+          .square-button-bare();
+
+          top: 0;
+          left: 0.9rem;
+          position: absolute;
 
-          .ixbrl-prev-tag::before {
+          &::before {
             .icon-chevron-left();
           }
         }
       }
 
       .search-controls {
-        margin: 0.8rem 0.9rem;
+        margin: 0 0 0.8rem;
 
         .search-input {
           display: flex;
-          padding: 0;
+          padding: 0 0.9rem;
 
           input#ixbrl-search {
             flex-grow: 1;
@@ -416,12 +511,32 @@
           }
         }
 
+        .filter-info {
+          text-align: center;
+          font-style: italic;
+          margin-top: 0.8rem;
+          position: relative;
+
+          .reset {
+            .bare-button();
+            .text-md();
+
+            position: absolute;
+            right: 0.8rem;
+            top: -0.3rem;
+          }
+        }
+
         &:not(.show-filters) .search-filters {
           display: none;
         }
 
-        &.show-filters .filter-toggle {
-          color: @primary;
+        &.active-filters .filter-toggle {
+          color: var(--colour-primary);
+        }
+
+        &:not(.active-filters) .reset {
+          display: none;
         }
 
         .search-filters {
@@ -429,19 +544,17 @@
           // Ensure the filter pane never grows too large to hide the results pane
           max-height: 60vh;
           overflow-y: auto;
+          padding: 0 0.9rem;
 
-          .reset {
-            .clickable();
-
-            position: absolute;
-            right: 0;
-            top: 0;
-          }
 
           h3 {
             border: none;
             font-weight: bold;
             padding-bottom: 0;
+
+            button {
+              font-weight: inherit;
+            }
           }
 
           .filter-group {
@@ -488,123 +601,130 @@
             }
           }
 
-          .filter-info {
-            text-align: center;
-            font-style: italic;
-            font-size: 1.1rem;
+
+          .datatype-conflict-warning {
+            margin: 1rem 0;
+            color: var(--colour-warning);
+            display: none;
           }
         }
       }
-    }
 
-    .inspector-body {
-      flex-grow: 1;
-      width: 100%;
-      position: relative;
-      overflow: hidden;
+      .inspector-body {
+        border-top: solid 1px var(--colour-border-grey);
+        width: 100%;
+        position: relative;
+        overflow-y: auto;
+        flex-grow: 1;
 
-      .no-fact-overlay,
-      .no-outline-overlay {
-        display: block;
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        width: 80%;
-        text-align: center;
-        color: @text-light;
+        .no-fact-overlay,
+        .no-outline-overlay {
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%, -50%);
+          width: 80%;
+          text-align: center;
+          color: var(--colour-text-light);
 
-        .no-fact-overlay-icon::before {
-          .icon-tag();
+          .no-fact-overlay-icon::before {
+            .icon-tag();
 
-          font-size: 10rem;
-        }
+            font-size: 10rem;
+            line-height: normal;
+          }
 
-        .no-outline-overlay-icon::before {
-          .icon-outline();
+          .no-outline-overlay-icon::before {
+            .icon-outline();
 
-          font-size: 10rem;
-        }
+            font-size: 10rem;
+            line-height: normal;
+          }
 
-        .title {
-          font-size: x-large;
+          .title {
+            font-size: x-large;
+            line-height: normal;
+          }
         }
-      }
 
-      .inspector-body-fact {
-        overflow-y: auto;
-        height: 100%;
-        position: relative;
-      }
+        .inspector-body {
+          overflow-y: auto;
+          height: 100%;
+          position: relative;
+        }
 
-      .search-results {
-        overflow-y: auto;
-        height: 100%;
-        .panel-indent();
+        .search-results {
+          overflow-y: auto;
+          height: 100%;
+          .panel-indent();
 
-        .search-overlay {
-          transform: translate(-50%, -50%);
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          color: @text-light;
-          width: 85%;
+          .search-overlay {
+            transform: translate(-50%, -50%);
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            color: var(--colour-text-light);
+            width: 85%;
+
+            .search-overlay-icon {
+              text-align: center;
+              font-size: 10rem;
+              line-height: normal;
+
+              &::before {
+                .icon-search();
+              }
+            }
 
-          .search-overlay-icon {
-            text-align: center;
-            font-size: 10rem;
+            .search-overlay-text {
+              text-align: center;
+              font-size: medium;
+              line-height: normal;
 
-            &::before {
-              .icon-search();
+              .title {
+                font-size: x-large;
+                line-height: normal;
+              }
             }
           }
 
-          .search-overlay-text {
-            text-align: center;
-            font-size: medium;
+          .select-icon {
+            float: right;
+            .square-button();
+            .clickable();
 
-            .title {
-              font-size: x-large;
+            &:first-of-type {
+              margin-left: 0.5rem;
+            }
+
+            &::before {
+              .icon-select();
             }
           }
-        }
 
-        .select-icon {
-          float: right;
-          .square-button();
-          .clickable();
+          .more-results {
+            .clickable();
 
-          &:first-of-type {
-            margin-left: 0.5rem;
+            padding: 1rem;
+            text-align: center;
           }
+        } /* search results */
 
-          &::before {
-            .icon-select();
-          }
+        .outline {
+          overflow-y: auto;
+          height: 100%;
         }
 
-        .more-results {
-          .clickable();
-
-          padding: 1rem;
-          text-align: center;
+        .summary {
+          overflow-y: auto;
+          height: 100%;
         }
-      } /* search results */
-
-      .outline {
-        overflow-y: auto;
-        height: 100%;
-      }
 
-      .summary {
-        overflow-y: auto;
-        height: 100%;
-      }
-
-      .body {
-        .panel-indent();
-      }
-    } /* inspector body */
+        .body {
+          .panel-indent();
+        }
+      } /* inspector body */
+    } /* inspector container */
 
     .std-label {
       margin-left: 30px;
@@ -612,15 +732,25 @@
       position: relative;
 
       &::before {
-        color: @primary;
+        color: var(--colour-primary);
         content: "\2022";
         position: absolute;
-        top: -5px;
         left: -20px;
         font-size: x-large;
       }
     }
 
+    dt {
+      font-weight: bold;
+      color: var(--colour-text-title);
+      margin-bottom: 1.4rem;
+      margin-top: 1.4rem;
+    }
+
+    dd {
+      margin-inline-start: 2rem;
+    }
+
     #concept {
       margin-top: 20px;
       font-size: small;
@@ -639,7 +769,7 @@
         &::before {
           .icon-dimension();
 
-          color: @primary;
+          color: var(--colour-primary);
           position: absolute;
           top: 0;
           left: -2.3rem;
@@ -655,7 +785,7 @@
           .icon-dimension-member();
 
           position: absolute;
-          color: @primary;
+          color: var(--colour-primary);
           top: 0;
           left: -2.3rem;
           font-size: 120%;
@@ -663,10 +793,16 @@
       }
     }
 
-    .analyse {
+    .inline-button {
+      display: inline;
       cursor: pointer;
-      padding-left: 0.7rem;
-      color: @primary;
+      color: var(--colour-primary);
+      padding: 0.3rem;
+      border: none;
+    }
+
+    .analyse {
+      margin-left: 0.4rem;
     }
 
     .analyse::before {
@@ -676,7 +812,7 @@
       top: 1px;
     }
 
-    .inspector-body-fact .tags {
+    .inspector-body .tags {
       position: absolute;
       top: 1.5rem;
       right: 0.9rem;
@@ -695,53 +831,6 @@
       }
     }
 
-    table.fact-properties {
-      table-layout: fixed;
-      width: 100%;
-
-      th {
-        width: 75px;
-        text-align: right;
-        padding-right: 20px;
-        color: @text-title;
-      }
-
-      th,
-      td {
-        padding-top: 2px;
-        padding-bottom: 2px;
-      }
-
-      tr.value {
-        .show-all {
-          color: @primary;
-          cursor: pointer;
-        }
-
-        &:not(.truncated) .show-all {
-          display: none;
-        }
-
-        &.text-block .expand-text-block {
-          color: @primary;
-          cursor: pointer;
-
-          &::before {
-            .icon-text-block();
-          }
-        }
-      }
-
-      td {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        color: @text-form-value;
-      }
-
-      tr.uri > td {
-        white-space: nowrap;
-      }
-    }
 
     .duplicates {
       text-align: center;
@@ -805,21 +894,12 @@
 
     width: 25%;
     position: absolute;
-    top: @top-bar-height;
+    top: var(--top-bar-height);
     right: 0;
     bottom: 0;
     box-sizing: border-box;
     overflow: hidden;
-    border-left: @simple-border;
-
-    a {
-      text-decoration: none;
-      color: @primary;
-
-      &:hover {
-        text-decoration: underline;
-      }
-    }
+    border-left: solid 0.1rem var(--colour-border-grey);
 
     .inspector-section {
       padding-left: 0.9rem;
@@ -833,21 +913,32 @@
 
       .collapsible-header {
         position: relative;
-        padding-left: 12px;
+        padding: 0 0 0.5rem 1.2rem;
         cursor: pointer;
         user-select: none;
         white-space: nowrap;
+        border-bottom: solid 1px var(--colour-border-grey);
 
-        &::before {
-          .icon-chevron-right();
+        button:first-of-type {
+            .text-md();
 
-          font-size: 1.8rem;
-          position: relative;
-          top: 0.4rem;
-          left: -0.3rem;
-          transform: rotate(90deg);
-          transition: all 0.25s ease;
-          display: inline-block;
+            border: none;
+            color: var(--colour-text-title);
+            text-align: left;
+            position: relative;
+            padding: 0.4rem 0.9rem 0.4rem 2.3rem;
+
+            &::before {
+              .icon-chevron-right();
+
+              font-size: 1.8rem;
+              position: absolute;
+              top: 0.4rem;
+              left: 0;
+              transform: rotate(90deg);
+              transition: all 0.25s ease;
+              display: inline-block;
+            }
         }
 
         .collapsible-subheader {
@@ -855,19 +946,19 @@
           font-weight: normal;
           font-style: italic;
           font-size: 1.3rem;
-          color: @text-form-value;
+          color: var(--colour-text-form-value);
         }
       }
 
       &.collapsed {
-        .collapsible-header::before {
+        .collapsible-header button::before {
           transform: rotate(0);
           top: 0.3rem;
           left: -0.2rem;
         }
 
         .collapsible-subheader {
-          color: @primary;
+          color: var(--colour-primary);
         }
       }
 
@@ -883,7 +974,7 @@
             padding-right: 0.75rem;
             position: relative;
             top: 0.2rem;
-            color: @warning-orange;
+            color: var(--colour-warning);
 
             &::before {
               .icon-circle-cross();
@@ -894,7 +985,7 @@
             padding-right: 0.75rem;
             position: relative;
             top: 0.2rem;
-            color: @workiva-green;
+            color: var(--colour-primary);
 
             &::before {
               .icon-circle-tick();
@@ -919,9 +1010,13 @@
 
           tr.item {
             td {
-              padding: 5px 0;
+              padding: 0.2rem 0;
               line-height: 1.8rem;
 
+              &.weight {
+                text-align: center;
+              }
+
               &.value {
                 text-align: right;
               }
@@ -931,12 +1026,27 @@
               color: #777;
             }
 
+            &:not(.calc-fact-link) {
+              td {
+                .text-md();
+
+                &.concept-name {
+                  // Compensate for padding that gets added by button on clickable rows.
+                  padding: 0.3rem;
+                }
+              }
+            }
+
             &.calc-fact-link {
               cursor: pointer;
 
               .concept-name,
               .value {
-                color: @primary;
+                color: var(--colour-primary);
+
+                button {
+                  .text-md();
+                }
               }
             }
 
@@ -946,28 +1056,34 @@
             }
 
             &.total td {
-              border-top: solid 1px @border-grey;
+              border-top: solid 1px var(--colour-border-grey);
               padding-bottom: 1.2rem;
             }
           }
         }
 
         .calculation-details-link {
-          color: @primary;
-          cursor: pointer;
+          .inline-button();
+          .text-md();
         }
       }
     }
 
-    .reset-multiselect {
-      float: right;
-      line-height: 0;
+    .resetable-multiselect {
       position: relative;
-      bottom: 1rem;
-      cursor: pointer;
 
-      &::after {
-        .icon-close();
+      .reset-multiselect {
+        position: absolute;
+        top: -2.5rem;
+        right: -0.5rem;
+        cursor: pointer;
+        border: none;
+        padding: 0.3rem;
+
+
+        &::after {
+          .icon-close();
+        }
       }
     }
 
@@ -1030,12 +1146,12 @@
 
       text-align: center;
       flex-shrink: 0;
-      background: #fff;
+      background: var(--colour-bg);
       width: 100%;
       height: 3rem;
       margin: 0;
       box-sizing: border-box;
-      border-top: @simple-border;
+      border-top: solid 0.1rem var(--colour-border-grey);
       position: relative;
 
       img {
@@ -1050,7 +1166,7 @@
         right: 5px;
         font-size: small;
         line-height: 3rem;
-        color: #999;
+        color: var(--colour-text-light);
       }
     }
 
@@ -1086,7 +1202,7 @@
 
     &.failed-to-load .failed-to-load-mask {
       display: block;
-      background-color: rgb(0 0 0 / 50%);
+      background-color: var(--colour-bg-fade);
       position: absolute;
       width: 100%;
       height: 100%;
@@ -1107,14 +1223,71 @@
         background-color: rgb(0 0 0 / 50%);
       }
     }
+
+    table.property-table {
+      &:not(.numeric) {
+        table-layout: fixed;
+        width: 100%;
+      }
+
+      td, th {
+        padding: 0;
+        line-height: 2.6rem;
+      }
+
+      th {
+        width: 90px;
+        text-align: right;
+        padding-right: 30px;
+        color: var(--colour-text-title);
+
+        &.has-tooltip {
+          padding-right: 10px;
+        }
+      }
+
+      tr.value {
+        .show-all {
+          color: var(--colour-primary);
+          cursor: pointer;
+        }
+
+        &:not(.truncated) .show-all {
+          display: none;
+        }
+
+        &.text-block .expand-text-block {
+          color: var(--colour-primary);
+          cursor: pointer;
+
+          &::before {
+            .icon-text-block();
+          }
+        }
+      }
+
+      td {
+        overflow: clip visible;
+        text-overflow: ellipsis;
+        color: var(--colour-text-form-value);
+      }
+
+      tr.uri > td {
+        white-space: nowrap;
+      }
+
+      &.numeric td {
+        text-align: right;
+      }
+    }
   }
 
   .fact-link {
     cursor: pointer;
-    color: @primary;
+    color: var(--colour-primary);
 
     &:hover {
-      outline: solid 0.125em @linked-fact;
+      outline: solid 0.125em var(--colour-linked-fact);
       outline-offset: 0.0625em;
     }
   }
@@ -1124,15 +1297,21 @@
       .block-list-item();
 
       .title {
-        color: @text-title;
+        color: var(--colour-text-title);
         font-weight: bold;
       }
 
       .dimension {
-        color: @text;
+        color: var(--colour-text);
         margin: 0.6rem 0;
       }
 
+      .datatype {
+        color: var(--colour-text);
+        margin: 0.6rem 0;
+        font-style: italic;
+      }
+
       .hidden {
         .tag();
       }
@@ -1143,14 +1322,16 @@
         }
 
         .dimension {
-          color: @text;
+          color: var(--colour-text);
         }
       }
+
     }
   }
 
+
   .dialog-mask {
-    background-color: rgb(0 0 0 / 60%);
+    background-color: var(--colour-bg-fade);
     position: fixed;
     inset: 0;
     z-index: 10;
@@ -1162,12 +1343,12 @@
   }
 
   .copy-icon {
-    color: @primary;
+    color: var(--colour-primary);
     border-radius: 0.3rem;
 
     &:active {
-      background-color: @primary;
-      color: #fff;
+      background-color: var(--colour-primary);
+      color: var(--colour-bg);
     }
 
     &::before {
@@ -1176,4 +1357,62 @@
       cursor: pointer;
     }
   }
+
+  .has-tooltip {
+    white-space: nowrap;
+    
+    & > * {
+      vertical-align: middle;
+    }
+
+    .tooltip-icon {
+      .inline-button();
+
+      cursor: help;
+      margin-left: -0.3rem;
+      vertical-align: middle;
+
+      &::after {
+        content: "\24d8"; 
+      }
+    }
+
+    button + .tooltip-icon {
+      margin-left: -1rem;
+    }
+  }
+
+  .tooltip {
+    position: fixed;
+    visibility: hidden;
+    transition: all 0.5s ease;
+    background-color: var(--colour-bg);
+    z-index: 1;
+    border: solid 0.1rem var(--colour-border-grey);
+    border-radius: 0.4rem;
+    padding: 0.8rem;
+    box-shadow: rgb(0 0 0 / 30%) 0.2rem 0.2rem 0.2rem;
+    font-weight: normal;
+    opacity: 0;
+    cursor: default;
+    color: var(--colour-text);
+    text-align: left;
+
+    &.show,
+    &.hover-show {
+      visibility: visible;
+      opacity: 1;
+      transition: opacity 0.5s ease;
+    }
+
+    &.with-glossary-link .glossary-link {
+      display: block;
+    }
+
+    .glossary-link {
+      margin-top: 0.8rem;
+      font-size: smaller;
+      display: none;
+    }
+  }
 }