Adds many new settings to the UI

Adds new General section with data/time settings
Moves Keyboard Shortcuts to General
Adds annotation format settings with popup UI
Adds text input support to settings

Author: eamodio

src/ui/scss/main.scss

@@ -105,13 +105,15 @@ header {
     margin-bottom: 1em;
 }
 
-input, select, button {
+input,
+select,
+button {
     font-family: var(--font-family);
     font-size: inherit;
     margin: 0;
 }
 
-input {
+input[type="checkbox"] {
     background: none;
     border: none;
     cursor: pointer;
@@ -130,6 +132,29 @@ input {
     }
 }
 
+input[type="text"] {
+    background: none;
+    border: 1px solid var(--color);
+    color: var(--color);
+    margin: 0 0.75em;
+    padding: 4px;
+    width: 100%;
+    max-width: 300px;
+
+    &:focus {
+        background: rgba(0, 0, 0, 0.1);
+    }
+
+    &[disabled] {
+        color: var(--color--75);
+        cursor: default;
+    }
+
+    &::placeholder {
+        color: var(--color--50);
+    }
+}
+
 label {
     cursor : pointer;
 }
@@ -390,6 +415,15 @@ ul {
 
 .changelog__list-item--version {
     margin: 2em 0 0.5em 0;
+    padding-top: 2em;
+
+    .vscode-dark & {
+        border-top: 1px solid var(--background-color--lighten-30);
+    }
+
+    .vscode-light & {
+        border-top: 1px solid var(--background-color--darken-30);
+    }
 }
 
 .changelog__scroller {
@@ -646,6 +680,13 @@ ul {
     margin-right: 1em;
 }
 
+.section__settings--multi {
+    & >.settings-group {
+        flex-basis: 100%;
+        margin-left: 1em;
+    }
+}
+
 .section__header {
     align-items: baseline;
     cursor: pointer;
@@ -759,6 +800,15 @@ ul {
     min-width: 300px;
 }
 
+.settings-group__header {
+    font-size: 1.2em;
+    margin: 1em 0 1.5em 0;
+
+    &:first-child {
+        margin-top: 0;
+    }
+}
+
 .settings-group__hint {
     color: var(--color--75);
     font-weight: 200;
@@ -776,6 +826,7 @@ ul {
     flex: 100% 1 1;
     flex-wrap: wrap;
     margin-bottom: 0.75em;
+    position: relative;
 
     & input[type="checkbox"] {
         flex: 16px 0 0;
@@ -868,3 +919,5 @@ ul {
 .nowrap {
     flex-wrap: nowrap !important;
 }
+
+@import 'popup';

src/ui/scss/popup.scss

@@ -0,0 +1,100 @@
+.popup {
+    box-shadow: 0px 0px 28px 0 rgba(0, 0, 0, 0.5);
+    cursor: default;
+    padding: 1em;
+    position: absolute;
+    top: 46px;
+    width: 410px;
+    z-index: 1;
+
+    &:before {
+        background: transparent;
+        border: 12px solid transparent;
+        content: "";
+        left: 50%;
+        position: absolute;
+        pointer-events: none;
+        top: -24px;
+        z-index: 1001;
+
+        .vscode-light & {
+            border-bottom-color: var(--background-color--darken-075);
+        }
+
+        .vscode-dark & {
+            border-bottom-color: var(--background-color--lighten-075);
+        }
+    }
+
+    .vscode-light & {
+        background: var(--background-color--darken-075);
+    }
+
+    .vscode-dark & {
+        background: var(--background-color--lighten-075);
+    }
+}
+
+.token-popup__hint {
+    color: var(--color--75);
+    display: inline-block;
+    font-weight: 200;
+    margin: 1.25em 0.5em 0 0.25em;
+}
+
+.token-popup__title {
+    color: var(--color);
+    font-weight: 400;
+    margin: 0.25em 0 1em 0;
+    text-align: center;
+}
+
+.token-popup__table {
+    border-collapse: collapse;
+    color: var(--color--75);
+    table-layout: fixed;
+
+    & tr:nth-child(even) {
+        .vscode-light & {
+            background-color: rgba(0, 0, 0, 0.05);
+        }
+
+        .vscode-dark & {
+            background-color: rgba(255, 255, 255, 0.04);
+        }
+    }
+
+    & td {
+        padding: 6px;
+
+        i {
+            opacity: 0.6;
+        }
+    }
+
+    & td:first-child {
+        padding: 6px 12px;
+    }
+
+    & td:last-child {
+        padding-right: 12px;
+    }
+}
+
+.token {
+    background: var(--link-color--darken-20);
+    border-bottom: 2px solid var(--link-color--darken-20);
+    border-radius: 3px;
+    color: white;
+    cursor: pointer;
+    display: inline-block;
+    padding: 1px 8px !important;
+
+    &:before {
+        content: "${"
+    }
+
+    &:after {
+        content: "}"
+    }
+}