@zeesoft/i18n-verify 2.0.2 → 2.1.0

package/dist/utils/reportFactory/html/template/css.js

@@ -3,412 +3,449 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getCssData = void 0;
-const getCssData = () => `
-  * {
-      user-select: none;
-    }
-
-  body {
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    font-family: Arial, sans-serif;
-    font-family: "Helvetica Neue", Arial, sans-serif;
-    -webkit-font-smoothing: antialiased; /* Webkit-based browsers */
-    -moz-osx-font-smoothing: grayscale; /* Firefox on OS X */
-    font-smooth: always; /* Non-standard, some browsers */
-  }
-
-  header {
-    background-color: #333;
-    height: 5rem;
-  }
-
-  main {
-    display: flex;
-    direction: column;
-    width: 100%;
-    height: calc(100vh - 5rem);
-  }
-
-  .sidebar {
-    width: 16rem;
-    height: 100%;
-    background-color: #333;
-    color: #fff;
-    padding: 20px;
-    box-sizing: border-box;
-    float: left;
-  }
-
-  .logo {
-    font-size: 2rem;
-    letter-spacing: 0.1rem;
-    color: #14cf96;
-    font-weight: bold;
-    padding-top: 1.8rem;
-    padding-left: 2rem;
-  }
-
-  .menu {
-    list-style-type: none;
-    padding: 0;
-    margin: 0;
-  }
-
-  .menu-item {
-    margin-bottom: 10px;
-  }
-
-  .menu-item a {
-    color: #fff;
-    text-decoration: none;
-    display: block;
-    padding: 10px;
-    border-radius: 5px;
-    font-size: 1.05rem;
-  }
-
-  .menu-item a:hover {
-    background-color: #555;
-  }
-
-  .submenu {
-    display: none;
-    list-style-type: none;
-    padding-left: 20px;
-  }
-
-  .menu-item.has-submenu > a::after {
-    content: "⯆";
-    float: right;
-    margin-left: 5px;
-  }
-
-  .menu-item.has-submenu.selected > a::after {
-    content: "⯅";
-    float: right;
-    margin-left: 5px;
-  }
-
-  .menu-item.selected > a {
-    background-color: #555;
-  }
-
-  .submenu .sub-menu-item {
-    margin: 3px auto;
-  }
-
-  .submenu .sub-menu-item a:hover {
-    background-color: #777;
-  }
-
-  .submenu .sub-menu-item.selected a {
-    background-color: #555 !important;
-  }
-
-  .submenu.active {
-    display: block !important;
-  }
-
-  .content-wrapper {
-    padding: 1rem;
-    float: left;
-    width: calc(100% - 16rem);
-    background-color: #f4f4f4;
-    overflow: hidden;
-  }
-
-  .content {
-    display: none;
-  }
-
-  .content .title {
-    font-size: 1rem;
-    color: #080404e2;
-    font-weight: 600;
-  }
-
-  .content .title::after {
-    content: ":";
-  }
-
-  .content.active {
-    display: flex !important;
-    flex-direction: column;
-    gap: 0.9rem;
-    flex-wrap: wrap;
-    transition: all 2s ease-in-out;
-  }
-
-  .sidebar .footer {
-    bottom: 5px;
-    position: absolute;
-    font-size: 12.4px;
-    color: #14cf96;
-    font-family: system-ui;
-  }
-
-  #overview {
-    flex-direction: row;
-    justify-content: space-between;
-  }
-
-  #overview .card {
-    display: flex;
-    flex-direction: column;
-    width: 25rem;
-    height: 12.5rem;
-    border: 1px solid #ddd;
-    box-shadow: 0 22px 35px -16px rgba(0, 0, 0, 0.3);
-    border-radius: 5px;
-    background: white;
-    padding: 1rem;
-  }
-
-  #overview .overall-quality {
-    height: 20rem;
-    flex-basis: 100%;
-    line-height: 14px;
-  }
-
-  #overview .overall-quality .section {
-    display: flex;
-    flex-direction: row;
-  }
-
-  #overview .overall-quality .section .block {
-    width: 50%;
-  }
-
-  #overview .overall-quality .section .block article {
-    padding: 5px;
-  }
-
-  #overview .overall-quality .section .block article p.desc {
-    font-size: 0.9em;
-  }
-
-  #overview .overall-quality .section .block article .items li {
-    font-size: 0.87em;
-  }
-
-  #overview .overall-quality .section .block article .items li .detail {
-    margin-top: -10px;
-  }
-
-  #overview .overall-quality .section .block .graph {
-    margin-top: 1.5em;
-  }
-
-  #overview .string-quality,
-  #overview .number-quality,
-  #overview .datetime-quality,
-  #overview .skipped-items {
-    flex-basis: 45%;
-  }
-
-  #overview .string-quality .graph,
-  #overview .number-quality .graph,
-  #overview .datetime-quality .graph,
-  #overview .skipped-items .graph {
-    align-self: center;
-  }
-
-  #overview .string-quality .graph {
-    margin-left: 4rem;
-  }
-
-  #overview .number-quality.card,
-  #overview .datetime-quality.card {
-    height: 13rem;
-  }
-
-  #overview .number-quality .graph,
-  #overview .datetime-quality .graph {
-    margin-top: -0.9rem;
-    margin-left: 4.5rem;
-  }
-
-  #insights .cards {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-  }
-
-  #insights .cards .holder {
-    display: flex;
-    flex-direction: row;
-    gap: 1.5rem;
-    flex-wrap: wrap;
-  }
-
-  #insights .cards .card {
-    display: flex;
-    flex-direction: column;
-    width: 20rem;
-    min-height: 10rem;
-    border: 1px solid #ddd;
-    box-shadow: 0 22px 35px -16px rgba(0, 0, 0, 0.3);
-    border-radius: 5px;
-    background: white;
-  }
-
-  #insights .cards .card:hover {
-    transform: scale(1.015);
-    box-shadow: 0 22px 35px -16px #07ff7d33;
-    cursor: pointer;
-    transition: all 0.1s ease-in-out;
-  }
-
-  #insights .cards .card .title {
-    height: 2.5rem;
-    font-size: 1rem;
-    padding-top: 1rem;
-    font-weight: 500;
-    width: calc(100% - 1rem);
-    background: #0c5ad9d6;
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
-    padding-left: 1rem;
-    color: white;
-  }
-
-  #insights .cards .card .title::after {
-    content: "";
-  }
-
-  #insights .cards .card .card-content {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    padding: 1rem;
-  }
-
-  #insights .cards .card .status-bar {
-    display: flex;
-    flex-direction: column;
-    gap: 0.8rem;
-  }
-
-  #insights .cards .card .status-bar .bar-container .name {
-    font-size: 0.78rem;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  #insights .cards .card .status-bar .bar-container .name::after {
-    content: ":";
-  }
-
-  #insights .cards .card .status-bar .bar-container .bar-holder {
-    width: 100%;
-    height: 10px;
-    border: 1px solid #00000038;
-    border-radius: 2px;
-  }
-
-  #insights .cards .card .status-bar .bar-container .bar-holder .bar {
-    background-color: #14cf96;
-    height: 100%;
-    font-size: 0.63rem;
-    text-align: right;
-    color: white;
-  }
-
-  #insights .cards .card .stat {
-    display: flex;
-    flex-direction: column;
-    gap: 0.3rem;
-    border: 0.5px solid #00000012;
-    border-radius: 6px;
-  }
-
-  #insights .cards .card .stat table td {
-    font-size: 0.78rem;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  #insights .cards .card .stat table td.name {
-    width: 70%;
-  }
-
-  #insights .cards .card .stat table td.value::before {
-    content: ":  ";
-  }
-
-  #locale {
-    background: white;
-    padding: 12px;
-    border-radius: 5px;
-    padding-top: 20px;
-  }
-
-  #locale .title {
-    content: ":";
-  }
-
-  #locale .coverage-info {
-    margin-top: 1rem;
-    width: 100%;
-    height: 80vh;
-    padding-right: 1rem;
-    padding-left: 0.1rem;
-  }
-
-  #locale table thead th select.filter {
-    margin-left: 1rem;
-    max-width: 8rem;
-    text-overflow: ellipsis;
-  }
-
-  #locale .image-viewer {
-    display: none;
-    position: fixed;
-    z-index: 9999;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.8);
-    text-align: center;
-  }
-
-  #locale .image-container {
-    position: relative;
-    top: 50%;
-    transform: translateY(-50%);
-    display: inline-block;
-  }
-
-  #locale .image-viewer img {
-    max-width: 90%;
-    max-height: 90%;
-  }
-
-  #locale .close-button {
-    position: absolute;
-    top: 0.5rem;
-    right: 1rem;
-    color: #ffffffbf;
-    font-size: 3.1rem;
-    cursor: pointer;
-  }
-
-  #locale .close-button:hover {
-    color: white;
-  }
-
-  #locale table td .view-screenshot-btn {
-    color: blue;
-  }
-
-  @media (max-width: 768px) {
-    .sidebar {
-      width: 16rem;
-      padding: 10px;
-    }
-  }`;
-exports.getCssData = getCssData;
+exports.default = getCssData;
+function getCssData() {
+  return `* {
+        user-select: none;
+      }
+
+      body {
+        margin: 0;
+        display: flex;
+        flex-direction: column;
+        font-family: Arial, sans-serif;
+        font-family: 'Helvetica Neue', Arial, sans-serif;
+        -webkit-font-smoothing: antialiased; /* Webkit-based browsers */
+        -moz-osx-font-smoothing: grayscale; /* Firefox on OS X */
+        font-smooth: always; /* Non-standard, some browsers */
+      }
+
+      header {
+        background-color: #333;
+        height: 5rem;
+      }
+
+      main {
+        display: flex;
+        direction: column;
+        width: 100%;
+        height: calc(100vh - 5rem);
+      }
+
+      .sidebar {
+        width: 16rem;
+        height: 100%;
+        background-color: #333;
+        color: #fff;
+        padding: 20px;
+        box-sizing: border-box;
+        float: left;
+      }
+
+      .logo {
+        font-size: 2rem;
+        letter-spacing: 0.1rem;
+        color: #14cf96;
+        font-weight: bold;
+        padding-top: 1.8rem;
+        padding-left: 2rem;
+      }
+
+      .menu {
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
+      }
+
+      .menu-item {
+        margin-bottom: 10px;
+      }
+
+      .menu-item a {
+        color: #fff;
+        text-decoration: none;
+        display: block;
+        padding: 10px;
+        border-radius: 5px;
+        font-size: 1.05rem;
+      }
+
+      .menu-item a:hover {
+        background-color: #555;
+      }
+
+      .submenu {
+        display: none;
+        list-style-type: none;
+        padding-left: 20px;
+      }
+
+      .menu-item.has-submenu > a::after {
+        content: '⯆';
+        float: right;
+        margin-left: 5px;
+      }
+
+      .menu-item.has-submenu.selected > a::after {
+        content: '⯅';
+        float: right;
+        margin-left: 5px;
+      }
+
+      .menu-item.selected > a {
+        background-color: #555;
+      }
+
+      .submenu .sub-menu-item {
+        margin: 3px auto;
+      }
+
+      .submenu .sub-menu-item a:hover {
+        background-color: #777;
+      }
+
+      .submenu .sub-menu-item.selected a {
+        background-color: #555 !important;
+      }
+
+      .submenu.active {
+        display: block !important;
+      }
+
+      .view-screenshot-image {
+        width: 100px;
+        height: 30px;
+        content: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBVcGxvYWRlZCB0bzogU1ZHIFJlcG8sIHd3dy5zdmdyZXBvLmNvbSwgR2VuZXJhdG9yOiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4NCjxzdmcgZmlsbD0iIzAwMDAwMCIgaGVpZ2h0PSI4MDBweCIgd2lkdGg9IjgwMHB4IiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIA0KCSB2aWV3Qm94PSIwIDAgNDkwIDQ5MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8cGF0aCBkPSJNMjQ1LjIwNCwxMDEuMjY3QzY3LjE3MSwxMDEuMjY3LDAsMjQ1LDAsMjQ1czY2Ljc2MywxNDMuNzMzLDI0NC43OTYsMTQzLjczM0M0MjIuODI5LDM4OC43MzMsNDkwLDI0NSw0OTAsMjQ1DQoJCVM0MjMuMjM4LDEwMS4yNjcsMjQ1LjIwNCwxMDEuMjY3eiBNMjQ0Ljc5NiwzNzMuNDIxYy0xNDYuMzkzLDAtMjEyLjM2Ny0xMDEuMDUzLTIyNy41MDYtMTI4LjMzMw0KCQljMTUuMjQ5LTI2Ljc5Niw4Mi43MzMtMTI4LjUwOCwyMjcuOTE0LTEyOC41MDhjMTQ2LjUxNCwwLDIxMi40NzUsMTAxLjIyLDIyNy41NDMsMTI4LjQNCgkJQzQ1Ny41NzgsMjcyLjIwMywzOTEuMzEzLDM3My40MjEsMjQ0Ljc5NiwzNzMuNDIxeiIvPg0KCTxwYXRoIGQ9Ik0yNDUuMDAzLDE0Ni4xMjRjLTU0LjUyMSwwLTk4Ljg4MSw0NC4zNTItOTguODgxLDk4Ljg3M2MwLDU0LjUyMSw0NC4zNiw5OC44ODEsOTguODgxLDk4Ljg4MXM5OC44NzMtNDQuMzYsOTguODczLTk4Ljg4MQ0KCQlDMzQzLjg3NiwxOTAuNDc3LDI5OS41MjQsMTQ2LjEyNCwyNDUuMDAzLDE0Ni4xMjR6IE0yNDUuMDAzLDMyOC41NjZjLTQ2LjA4LDAtODMuNTY4LTM3LjQ4OS04My41NjgtODMuNTY4DQoJCWMwLTQ2LjA3MiwzNy40ODktODMuNTYxLDgzLjU2OC04My41NjFjNDYuMDcyLDAsODMuNTYxLDM3LjQ4OSw4My41NjEsODMuNTYxQzMyOC41NjQsMjkxLjA3NywyOTEuMDc1LDMyOC41NjYsMjQ1LjAwMywzMjguNTY2eiIvPg0KCTxwYXRoIGQ9Ik0yNDUuMDAzLDE3NS41ODNjLTM4LjI4MSwwLTY5LjQyMiwzMS4xNDEtNjkuNDIyLDY5LjQxNWMwLDM4LjI3NCwzMS4xNDEsNjkuNDE1LDY5LjQyMiw2OS40MTUNCgkJYzM4LjI3NCwwLDY5LjQxNS0zMS4xNDEsNjkuNDE1LTY5LjQxNUMzMTQuNDE3LDIwNi43MjQsMjgzLjI3NywxNzUuNTgzLDI0NS4wMDMsMTc1LjU4M3ogTTI0NS4wMDMsMjk5LjENCgkJYy0yOS44MzMsMC01NC4xMS0yNC4yNy01NC4xMS01NC4xMDJjMC0yOS44MzIsMjQuMjc3LTU0LjEwMiw1NC4xMS01NC4xMDJzNTQuMTAyLDI0LjI3LDU0LjEwMiw1NC4xMDINCgkJQzI5OS4xMDUsMjc0LjgzLDI3NC44MzUsMjk5LjEsMjQ1LjAwMywyOTkuMXoiLz4NCgk8cGF0aCBkPSJNMjQ1LjAwMywyMDYuNjc5Yy0yMS4xMywwLTM4LjMyNiwxNy4xODktMzguMzI2LDM4LjMxOWMwLDIxLjEyOSwxNy4xOTcsMzguMzI2LDM4LjMyNiwzOC4zMjZzMzguMzE5LTE3LjE5NywzOC4zMTktMzguMzI2DQoJCUMyODMuMzIxLDIyMy44NjgsMjY2LjEzMiwyMDYuNjc5LDI0NS4wMDMsMjA2LjY3OXogTTI0NS4wMDMsMjY4LjAxMWMtMTIuNjg4LDAtMjMuMDE0LTEwLjMyNi0yMy4wMTQtMjMuMDE0DQoJCWMwLTEyLjY4OCwxMC4zMjUtMjMuMDA2LDIzLjAxNC0yMy4wMDZjMTIuNjg4LDAsMjMuMDA2LDEwLjMxOCwyMy4wMDYsMjMuMDA2QzI2OC4wMDksMjU3LjY4NiwyNTcuNjkxLDI2OC4wMTEsMjQ1LjAwMywyNjguMDExeiIvPg0KPC9nPg0KPC9zdmc+);
+      }
+
+      .content-wrapper {
+        padding: 1rem;
+        float: left;
+        width: calc(100% - 16rem);
+        background-color: #f4f4f4;
+        overflow: hidden;
+      }
+
+      .content {
+        display: none;
+      }
+
+      .content .title {
+        font-size: 1rem;
+        color: #080404e2;
+        font-weight: 600;
+      }
+
+      .content .title::after {
+        content: ':';
+      }
+
+      .content.active {
+        display: flex !important;
+        flex-direction: column;
+        gap: 0.9rem;
+        flex-wrap: wrap;
+        transition: all 2s ease-in-out;
+      }
+
+      .sidebar .footer {
+        bottom: 5px;
+        position: absolute;
+        font-size: 12.4px;
+        color: #14cf96;
+        font-family: system-ui;
+      }
+
+      #overview {
+        flex-direction: row;
+        justify-content: space-between;
+      }
+
+      #overview .card {
+        display: flex;
+        flex-direction: column;
+        width: 25rem;
+        height: 12.5rem;
+        border: 1px solid #ddd;
+        box-shadow: 0 22px 35px -16px rgba(0, 0, 0, 0.3);
+        border-radius: 5px;
+        background: white;
+        padding: 1rem;
+      }
+
+      #overview .overall-quality {
+        height: 20rem;
+        flex-basis: 100%;
+        line-height: 14px;
+      }
+
+      #overview .overall-quality .section {
+        display: flex;
+        flex-direction: row;
+      }
+
+      #overview .overall-quality .section .block {
+        width: 50%;
+      }
+
+      #overview .overall-quality .section .block article {
+        padding: 5px;
+      }
+
+      #overview .overall-quality .section .block article p.desc {
+        font-size: 0.9em;
+      }
+
+      #overview .overall-quality .section .block article .items li {
+        font-size: 0.87em;
+      }
+
+      #overview .overall-quality .section .block article .items li .detail {
+        margin-top: -10px;
+      }
+
+      #overview .overall-quality .section .block .graph {
+        margin-top: 1.5em;
+      }
+
+      #overview .string-quality,
+      #overview .number-quality,
+      #overview .datetime-quality,
+      #overview .skipped-items {
+        flex-basis: 45%;
+      }
+
+      #overview .string-quality .graph,
+      #overview .number-quality .graph,
+      #overview .datetime-quality .graph,
+      #overview .skipped-items .graph {
+        align-self: center;
+      }
+
+      #overview .string-quality .graph {
+        margin-left: 4rem;
+      }
+
+      #overview .number-quality.card,
+      #overview .datetime-quality.card {
+        height: 13rem;
+      }
+
+      #overview .number-quality .graph,
+      #overview .datetime-quality .graph {
+        margin-top: -0.9rem;
+        margin-left: 4.5rem;
+      }
+
+      #insights .cards {
+        display: flex;
+        flex-direction: column;
+        gap: 1.5rem;
+      }
+
+      #insights .cards .holder {
+        display: flex;
+        flex-direction: row;
+        gap: 1.5rem;
+        flex-wrap: wrap;
+      }
+
+      #insights .cards .card {
+        display: flex;
+        flex-direction: column;
+        width: 20rem;
+        min-height: 10rem;
+        border: 1px solid #ddd;
+        box-shadow: 0 22px 35px -16px rgba(0, 0, 0, 0.3);
+        border-radius: 5px;
+        background: white;
+      }
+
+      #insights .cards .card:hover {
+        transform: scale(1.015);
+        box-shadow: 0 22px 35px -16px #07ff7d33;
+        cursor: pointer;
+        transition: all 0.1s ease-in-out;
+      }
+
+      #insights .cards .card .title {
+        height: 2.5rem;
+        font-size: 1rem;
+        padding-top: 1rem;
+        font-weight: 500;
+        width: calc(100% - 1rem);
+        background: #0c5ad9d6;
+        border-top-left-radius: 5px;
+        border-top-right-radius: 5px;
+        padding-left: 1rem;
+        color: white;
+      }
+
+      #insights .cards .card .title::after {
+        content: '';
+      }
+
+      #insights .cards .card .card-content {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        padding: 1rem;
+      }
+
+      #insights .cards .card .status-bar {
+        display: flex;
+        flex-direction: column;
+        gap: 0.8rem;
+      }
+
+      #insights .cards .card .status-bar .bar-container .name {
+        font-size: 0.78rem;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+      }
+
+      #insights .cards .card .status-bar .bar-container .name::after {
+        content: ':';
+      }
+
+      #insights .cards .card .status-bar .bar-container .bar-holder {
+        width: 100%;
+        height: 10px;
+        border: 1px solid #00000038;
+        border-radius: 2px;
+      }
+
+      #insights .cards .card .status-bar .bar-container .bar-holder .bar {
+        height: 100%;
+        font-size: 0.63rem;
+        text-align: right;
+        color: rgb(0, 0, 0);
+      }
+
+      .bar.--green {
+        background-color: #1dedaf;
+      }
+
+      .bar.--red {
+        background-color: #fe3e3e;
+      }
+
+      .bar.--yellow {
+        background-color: #faef1f;
+      }
+
+      .bar.--blue {
+        background-color: #77c2ff;
+      }
+
+      #insights .cards .card .stat {
+        display: flex;
+        flex-direction: column;
+        gap: 0.3rem;
+        border: 0.5px solid #00000012;
+        border-radius: 6px;
+      }
+
+      #insights .cards .card .stat table td {
+        font-size: 0.78rem;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+      }
+
+      #insights .cards .card .stat table td.name {
+        width: 70%;
+      }
+
+      #insights .cards .card .stat table td.value::before {
+        content: ':  ';
+      }
+
+      #locale {
+        background: white;
+        padding: 12px;
+        border-radius: 5px;
+        padding-top: 20px;
+      }
+
+      #locale .title {
+        content: ':';
+      }
+
+      #locale .coverage-info {
+        margin-top: 1rem;
+        width: 100%;
+        height: 80vh;
+        padding-right: 1rem;
+        padding-left: 0.1rem;
+      }
+
+      #locale table thead th select.filter {
+        margin-left: 1rem;
+        max-width: 8rem;
+        text-overflow: ellipsis;
+      }
+
+      #locale .image-viewer {
+        display: none;
+        position: fixed;
+        z-index: 9999;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.8);
+        text-align: center;
+      }
+
+      #locale .image-container {
+        position: relative;
+        top: 50%;
+        transform: translateY(-50%);
+        display: inline-block;
+      }
+
+      #locale .image-viewer img {
+        max-width: 90%;
+        max-height: 90%;
+      }
+
+      #locale .close-button {
+        position: absolute;
+        top: 0.5rem;
+        right: 1rem;
+        color: #ffffffbf;
+        font-size: 3.1rem;
+        cursor: pointer;
+      }
+
+      #locale .close-button:hover {
+        color: white;
+      }
+
+      #locale table tbody td {
+        font-size: 0.9em;
+      }
+
+      #locale table td .view-screenshot-btn {
+        color: blue;
+      }
+
+      .project-info {
+        font-size: 1rem;
+        color: #90a3a9;
+      }
+
+      .project-info .time {
+        float: right;
+        position: relative;
+        top: 1rem;
+        margin-right: 0.5rem;
+      }
+
+      @media (max-width: 768px) {
+        .sidebar {
+          width: 16rem;
+          padding: 10px;
+        }
+      }`;
+}