@tindtechnologies/universalviewer/dist/cjs/content-handlers/iiif/modules/uv-shared-module/css/iiif-metadata-component.less

The Universal Viewer is a community-developed open source project on a mission to help you share your 📚📜📰📽️📻🗿 with the 🌎

.iiif-metadata-component {
  .groups {
    .group {
      .header {
        font-weight: bold;
      }

      .items {
        .header {
          color: @brand-secondary;
          border-bottom: 1px solid @brand-secondary;
          margin: @margin-large-vertical @margin-medium-horizontal 0 0;
        }

        .item {
          padding: 0;
          margin: 0 0 @margin-xlarge-vertical;

          .label {
            color: @gray-light;
            border-bottom: 1px solid @gray-dark;
            margin: @margin-large-vertical @margin-medium-horizontal 0 0;

            .copyText {
              position: relative;
              float: right;
              display: none;
              width: 15px;
              height: 15px;
              cursor: pointer;
              background-image: data-uri("../img/copy.png");
            }
            .copiedText {
              display: none;
              position: absolute;
              top: 18px;
              right: -10px;
              white-space: nowrap;
              padding: 4px;
              text-transform: none;
              background-color: @gray-dark;
              z-index: 1;
              border: 1px solid @gray-light;
              border-radius: 2px;
              color: @text-color;
            }
          }

          .value {
            color: @text-color;
            margin: @margin-small-vertical @margin-medium-horizontal 0 0;
            overflow: hidden;
            word-wrap: break-word;
            line-height: 1.6em;

            [data-uv-navigate] {
              color: @link-secondary-color;
              cursor: pointer;

              &:hover {
                text-decoration: underline;
                color: @link-secondary-hover-color;
              }
            }

            a.toggle {
              color: @link-secondary-color;
              font-weight: normal;

              &:hover {
                color: @link-secondary-hover-color;
              }
            }

            a.toggle.more,
            a.toggle.less {
              font-variant: small-caps;
            }

            img {
              max-width: 100px;
            }
          }

          a.value {
            display: block;
            color: @link-color;
          }
        }
      }
    }
  }
}