diff --git a/e2e/avpFixtures.js b/e2e/avpFixtures.js
index 68c0f0df3d..6f8989aa0e 100644
--- a/e2e/avpFixtures.js
+++ b/e2e/avpFixtures.js
@@ -34,7 +34,7 @@
  */
 
 import AxeBuilder from '@axe-core/playwright';
-import fs from 'fs';
+import fs from 'fs/promises';
 import path from 'path';
 import { fileURLToPath } from 'url';
 
@@ -87,6 +87,27 @@ const extendedTest = test.extend({
   }
 });
 
+/**
+ * Writes the accessibility report to the specified path.
+ *
+ * @param {string} reportPath - The path to write the report to.
+ * @param {Object} accessibilityScanResults - The results of the accessibility scan.
+ * @returns {Promise<Object>} The accessibility scan results.
+ * @throws Will throw an error if writing the report fails.
+ */
+async function writeAccessibilityReport(reportPath, accessibilityScanResults) {
+  try {
+    await fs.mkdir(path.dirname(reportPath), { recursive: true });
+    const data = JSON.stringify(accessibilityScanResults, null, 2);
+    await fs.writeFile(reportPath, data);
+    console.log(`Accessibility report with violations saved successfully as ${reportPath}`);
+    return accessibilityScanResults;
+  } catch (err) {
+    console.error(`Error writing the accessibility report to file ${reportPath}:`, err);
+    throw err;
+  }
+}
+
 /**
  * Scans for accessibility violations on a page and writes a report to disk if violations are found.
  * Automatically asserts that no violations should be present.
@@ -104,25 +125,29 @@ export async function scanForA11yViolations(page, testCaseName, options = {}) {
   const accessibilityScanResults = await builder.analyze();
 
   // Assert that no violations should be present
-  expect(
-    accessibilityScanResults.violations,
-    `Accessibility violations found in test case: ${testCaseName}`
-  ).toEqual([]);
+  expect
+    .soft(
+      accessibilityScanResults.violations,
+      `Accessibility violations found in test case: ${testCaseName}`
+    )
+    .toEqual([]);
 
   // Check if there are any violations
   if (accessibilityScanResults.violations.length > 0) {
-    let reportName = options.reportName || testCaseName;
-    let sanitizedReportName = reportName.replace(/\//g, '_');
-    const reportPath = path.join(TEST_RESULTS_DIR, `${sanitizedReportName}.json`);
+    const reportName = options.reportName || testCaseName;
+    const sanitizedReportName = reportName.replace(/\//g, '_');
+    const reportPath = path.join(
+      TEST_RESULTS_DIR,
+      'a11y-json-reports',
+      `${sanitizedReportName}.json`
+    );
 
     try {
-      if (!fs.existsSync(TEST_RESULTS_DIR)) {
-        fs.mkdirSync(TEST_RESULTS_DIR);
-      }
+      await page.screenshot({
+        path: path.join(TEST_RESULTS_DIR, 'a11y-screenshots', `${sanitizedReportName}.png`)
+      });
 
-      fs.writeFileSync(reportPath, JSON.stringify(accessibilityScanResults, null, 2));
-      console.log(`Accessibility report with violations saved successfully as ${reportPath}`);
-      return accessibilityScanResults;
+      return await writeAccessibilityReport(reportPath, accessibilityScanResults);
     } catch (err) {
       console.error(`Error writing the accessibility report to file ${reportPath}:`, err);
       throw err;
diff --git a/e2e/helper/useDarkmatterTheme.js b/e2e/helper/useDarkmatterTheme.js
new file mode 100644
index 0000000000..6a6998266d
--- /dev/null
+++ b/e2e/helper/useDarkmatterTheme.js
@@ -0,0 +1,29 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+// This should be used to install the Darkmatter theme for Open MCT.
+// e.g.
+// await page.addInitScript({ path: path.join(__dirname, 'useDarkmatterTheme.js') });
+document.addEventListener('DOMContentLoaded', () => {
+  const openmct = window.openmct;
+  openmct.install(openmct.plugins.DarkmatterTheme());
+});
diff --git a/e2e/playwright-visual-a11y.config.js b/e2e/playwright-visual-a11y.config.js
index 17ed06c775..594bdb11af 100644
--- a/e2e/playwright-visual-a11y.config.js
+++ b/e2e/playwright-visual-a11y.config.js
@@ -41,7 +41,7 @@ const config = {
       name: 'darkmatter-theme', //Runs the same visual tests but with darkmatter-theme
       use: {
         browserName: 'chromium',
-        theme: 'darkmatter-theme'
+        theme: 'darkmatter'
       }
     }
   ],
diff --git a/e2e/pluginFixtures.js b/e2e/pluginFixtures.js
index ea46a19b31..655e7087f7 100644
--- a/e2e/pluginFixtures.js
+++ b/e2e/pluginFixtures.js
@@ -127,6 +127,11 @@ const extendedTest = test.extend({
       await page.addInitScript({
         path: fileURLToPath(new URL('./helper/useSnowTheme.js', import.meta.url))
       });
+    } else if (theme === 'darkmatter') {
+      //inject darkmatter theme
+      await page.addInitScript({
+        path: fileURLToPath(new URL('./helper/useDarkmatterTheme.js', import.meta.url))
+      });
     }
 
     // Attach info about the currently running test and its project.
diff --git a/e2e/tests/visual-a11y/a11y.visual.spec.js b/e2e/tests/visual-a11y/a11y.visual.spec.js
index d981b3a8a8..bbe7264201 100644
--- a/e2e/tests/visual-a11y/a11y.visual.spec.js
+++ b/e2e/tests/visual-a11y/a11y.visual.spec.js
@@ -20,15 +20,14 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import { test } from '../../avpFixtures.js';
+import { scanForA11yViolations, test } from '../../avpFixtures.js';
 import { VISUAL_FIXED_URL } from '../../constants.js';
 
-test.describe('a11y - Default', () => {
+test.describe('a11y - Default @a11y', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto(VISUAL_FIXED_URL, { waitUntil: 'domcontentloaded' });
   });
   test('main view', async ({ page }, testInfo) => {
-    //Skipping for https://github.com/nasa/openmct/issues/7421
-    //await scanForA11yViolations(page, testInfo.title);
+    await scanForA11yViolations(page, testInfo.title);
   });
 });
diff --git a/e2e/tests/visual-a11y/components/header.visual.spec.js b/e2e/tests/visual-a11y/components/header.visual.spec.js
index 0c3d44c8a8..bbbdc5b4a6 100644
--- a/e2e/tests/visual-a11y/components/header.visual.spec.js
+++ b/e2e/tests/visual-a11y/components/header.visual.spec.js
@@ -27,7 +27,7 @@ Tests the branding associated with the default deployment. At least the about mo
 import percySnapshot from '@percy/playwright';
 import { fileURLToPath } from 'url';
 
-import { expect, test } from '../../../avpFixtures.js';
+import { expect, scanForA11yViolations, test } from '../../../avpFixtures.js';
 import { VISUAL_FIXED_URL } from '../../../constants.js';
 
 //Declare the component scope of the visual test for Percy
@@ -69,14 +69,26 @@ test.describe('Visual - Header @a11y', () => {
   });
 
   test('show snapshot button', async ({ page, theme }) => {
+    test.slow(true, 'We have to wait for the snapshot indicator to stop flashing');
     await page.getByLabel('Open the Notebook Snapshot Menu').click();
 
     await page.getByRole('menuitem', { name: 'Save to Notebook Snapshots' }).click();
 
+    await expect(page.getByLabel('Show Snapshots')).toBeVisible();
+
+    /**
+     * We have to wait for the snapshot indicator to stop flashing. This happens
+     * for a really long time (15 seconds 😳).
+     * TODO: Either reduce the length of the animation, convert this to a
+     * Playwright snapshot test (and disable animations), or augment the `waitForAnimations`
+     * fixture to adjust the timeout.
+     */
+    await expect(page.locator('.has-new-snapshot')).not.toBeAttached({
+      timeout: 30 * 1000
+    });
     await percySnapshot(page, `Notebook Snapshot Show button (theme: '${theme}')`, {
       scope: header
     });
-    await expect(page.getByLabel('Show Snapshots')).toBeVisible();
   });
 });
 
@@ -99,7 +111,6 @@ test.describe('Mission Header @a11y', () => {
     });
   });
 });
-// Skipping for https://github.com/nasa/openmct/issues/7421
-// test.afterEach(async ({ page }, testInfo) => {
-//   await scanForA11yViolations(page, testInfo.title);
-// });
+test.afterEach(async ({ page }, testInfo) => {
+  await scanForA11yViolations(page, testInfo.title);
+});
diff --git a/e2e/tests/visual-a11y/components/inspector.visual.spec.js b/e2e/tests/visual-a11y/components/inspector.visual.spec.js
index 90e641fed4..bf573e5a51 100644
--- a/e2e/tests/visual-a11y/components/inspector.visual.spec.js
+++ b/e2e/tests/visual-a11y/components/inspector.visual.spec.js
@@ -22,7 +22,7 @@
 
 import percySnapshot from '@percy/playwright';
 
-import { test } from '../../../avpFixtures.js';
+import { scanForA11yViolations, test } from '../../../avpFixtures.js';
 import { MISSION_TIME, VISUAL_FIXED_URL } from '../../../constants.js';
 
 //Declare the scope of the visual test
@@ -55,7 +55,6 @@ test.describe('Visual - Inspector @ally @clock', () => {
     });
   });
 });
-// Skipping for https://github.com/nasa/openmct/issues/7421
-// test.afterEach(async ({ page }, testInfo) => {
-//   await scanForA11yViolations(page, testInfo.title);
-// });
+test.afterEach(async ({ page }, testInfo) => {
+  await scanForA11yViolations(page, testInfo.title);
+});
diff --git a/e2e/tests/visual-a11y/notebook.visual.spec.js b/e2e/tests/visual-a11y/notebook.visual.spec.js
index b42ea15258..ddf7da39c4 100644
--- a/e2e/tests/visual-a11y/notebook.visual.spec.js
+++ b/e2e/tests/visual-a11y/notebook.visual.spec.js
@@ -23,7 +23,7 @@
 import percySnapshot from '@percy/playwright';
 
 import { createDomainObjectWithDefaults, expandTreePaneItemByName } from '../../appActions.js';
-import { expect, test } from '../../avpFixtures.js';
+import { expect, scanForA11yViolations, test } from '../../avpFixtures.js';
 import { VISUAL_FIXED_URL } from '../../constants.js';
 import { enterTextEntry, startAndAddRestrictedNotebookObject } from '../../helper/notebookUtils.js';
 
@@ -163,8 +163,7 @@ test.describe('Visual - Notebook @a11y', () => {
     // Take a snapshot
     await percySnapshot(page, `Notebook Selected Entry Text Area Active (theme: '${theme}')`);
   });
-  // Skipping for https://github.com/nasa/openmct/issues/7421
-  // test.afterEach(async ({ page }, testInfo) => {
-  //   await scanForA11yViolations(page, testInfo.title);
-  // });
+  test.afterEach(async ({ page }, testInfo) => {
+    await scanForA11yViolations(page, testInfo.title);
+  });
 });
diff --git a/e2e/tests/visual-a11y/planning.visual.spec.js b/e2e/tests/visual-a11y/planning.visual.spec.js
index fbd9151a6e..bed4838870 100644
--- a/e2e/tests/visual-a11y/planning.visual.spec.js
+++ b/e2e/tests/visual-a11y/planning.visual.spec.js
@@ -178,8 +178,8 @@ test.describe('Visual - Gantt Chart', () => {
     );
   });
 });
-
-// Skipping for https://github.com/nasa/openmct/issues/7421
+// FIXME: https://github.com/nasa/openmct/issues/7421
+// Currently has contrast failures
 // test.afterEach(async ({ page }, testInfo) => {
 //   await scanForA11yViolations(page, testInfo.title);
 // });
diff --git a/src/plugins/inspectorViews/annotations/tags/tags.scss b/src/plugins/inspectorViews/annotations/tags/tags.scss
index 1310bd6302..4aa4e7dc92 100644
--- a/src/plugins/inspectorViews/annotations/tags/tags.scss
+++ b/src/plugins/inspectorViews/annotations/tags/tags.scss
@@ -181,3 +181,7 @@
     }
   }
 }
+
+.c-tag-applier__add-btn.c-icon-button.c-icon-button--major.icon-plus {
+  color: $colorKey !important;
+}
diff --git a/src/styles/_constants-darkmatter.scss b/src/styles/_constants-darkmatter.scss
index 9607d200f7..c86a6530e0 100644
--- a/src/styles/_constants-darkmatter.scss
+++ b/src/styles/_constants-darkmatter.scss
@@ -22,9 +22,9 @@
 
 /************************************************** DARKMATTER THEME*/
 // Fonts
-@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap'); // Header font, Roboto Condensed. This is an alternative to the DIN Alt font, which is not available on Google Fonts. 
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap'); // Header font, Roboto Condensed. This is an alternative to the DIN Alt font, which is not available on Google Fonts.
 @import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&display=swap'); // Body Font, Exo
-@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch&family=Roboto+Condensed&display=swap');// Temporary numeric font, Chakra Petch (need to import local font instead).
+@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch&family=Roboto+Condensed&display=swap'); // Temporary numeric font, Chakra Petch (need to import local font instead).
 $heroFont: 'Teko', sans-serif;
 $headerFont: 'Cabin Condensed', sans-serif;
 $bodyFont: 'Exo', sans-serif;
@@ -45,7 +45,7 @@ $numericFont: 'Chakra Petch', sans-serif;
   font-size: $size;
 }
 
-@mixin numericFont($size: 1em){
+@mixin numericFont($size: 1em) {
   font-family: $numericFont;
   font-size: $size;
 }
@@ -70,16 +70,17 @@ $numericFont: 'Chakra Petch', sans-serif;
 }
 
 @mixin themedButton($c: $colorBtnBg) {
-  background: radial-gradient(rgba($c, 1) , rgba($c, .7));
+  background: radial-gradient(rgba($c, 1), rgba($c, 0.7));
   box-shadow: rgba(black, 0.5) 0 0.5px 2px;
 }
 
-@mixin telemetryView(){
+@mixin telemetryView() {
   border: 1px solid $colorBodyFg;
   border-radius: $controlCr;
 }
 
-@mixin browseFrameBorder() { // Used on main object container to add highlighted corners to non-hidden frames.
+@mixin browseFrameBorder() {
+  // Used on main object container to add highlighted corners to non-hidden frames.
   border-image: radial-gradient(circle, #575757, #6c6c6c, #818181, #979797, #aeaeae);
   border-style: solid;
   padding: 10px;
@@ -93,7 +94,7 @@ $numericFont: 'Chakra Petch', sans-serif;
     linear-gradient(to bottom, $browseFrameCornerColor, transparent $browseFrameCornerWidth) 100% 0,
     linear-gradient(to top, $browseFrameCornerColor, transparent $browseFrameCornerWidth) 0 100%,
     linear-gradient(to top, $browseFrameCornerColor, transparent $browseFrameCornerWidth) 100% 100%,
-    rgb(0, 0, 0, .4);
+    rgb(0, 0, 0, 0.4);
 
   background-repeat: no-repeat;
   background-size: 35px 35px;
@@ -101,10 +102,9 @@ $numericFont: 'Chakra Petch', sans-serif;
   box-shadow: 0px 0px 20px 2px rgb(140 140 140 / 20%);
 }
 
-
 // Functions
 @function buttonBg($c: $colorBtnBg) {
-  @return radial-gradient(rgba($colorBodyBg, 1) , rgba($colorBodyBg, .6));
+  @return radial-gradient(rgba($colorBodyBg, 1), rgba($colorBodyBg, 0.6));
 }
 
 @function pullForward($val, $amt) {
@@ -124,26 +124,28 @@ $shdwBtns: rgba(black, 0.2) 0 1px 2px;
 $shdwBtnsOverlay: rgba(black, 0.5) 0 1px 5px;
 
 // Base colors
-$colorBodyBg: #17171B;
+$colorBodyBg: #17171b;
 $colorBodyBgSubtle: pullForward($colorBodyBg, 5%);
 $colorBodyBgSubtleHov: pullForward($colorBodyBg, 10%);
 $colorBodyFg: #aaaaaa;
 $colorBodyFgSubtle: #9c9c9c;
 $colorBodyFgEm: #fff;
 $colorGenBg: #222;
-$colorHeadBg: rgba($colorBodyBg, .5);
+$colorHeadBg: rgba($colorBodyBg, 0.5);
 $colorHeadFg: $colorBodyFg;
-$colorKey: #1C67E3;
+$colorKey: #1c67e3;
 $colorKeyBg: #015fca;
 $colorKeyFg: #fff; // Darker version of colorKey for use in major buttons
 $colorKeyHov: lighten($colorKey, 10%);
 $colorKeyBgHov: lighten($colorKeyBg, 10%);
-$colorKeyFilter: invert(36%) sepia(10%) saturate(2512%) hue-rotate(170deg) brightness(100%) contrast(200%);
+$colorKeyFilter: invert(36%) sepia(10%) saturate(2512%) hue-rotate(170deg) brightness(100%)
+  contrast(200%);
 $colorKeyFilterHov: invert(63%) sepia(88%) saturate(3029%) hue-rotate(154deg) brightness(101%)
   contrast(100%);
 $colorKeySelectedBg: $colorKey;
 $uiColor: #0093ff; // Resize bars, splitter bars, etc.
 $colorInteriorBorder: rgba($colorBodyFg, 0.2);
+$colorInteriorBorderNotebook: rgba($colorBodyFg, 0.5);
 $colorA: #ccc;
 $colorAHov: #fff;
 $filterHov: brightness(1.3) contrast(1.5); // Tree, location items
@@ -173,11 +175,14 @@ $sideBarHeaderFg: rgba($colorBodyFg, 0.7);
 $colorStatusFg: #888;
 $colorStatusDefault: #ccc;
 $colorStatusInfo: #60ba7b;
-$colorStatusInfoFilter: invert(58%) sepia(44%) saturate(405%) hue-rotate(85deg) brightness(102%) contrast(92%);
+$colorStatusInfoFilter: invert(58%) sepia(44%) saturate(405%) hue-rotate(85deg) brightness(102%)
+  contrast(92%);
 $colorStatusAlert: #ffb66c;
-$colorStatusAlertFilter: invert(78%) sepia(26%) saturate(1160%) hue-rotate(324deg) brightness(107%) contrast(101%);
+$colorStatusAlertFilter: invert(78%) sepia(26%) saturate(1160%) hue-rotate(324deg) brightness(107%)
+  contrast(101%);
 $colorStatusError: #da0004;
-$colorStatusErrorFilter: invert(10%) sepia(96%) saturate(4360%) hue-rotate(351deg) brightness(111%) contrast(115%);
+$colorStatusErrorFilter: invert(10%) sepia(96%) saturate(4360%) hue-rotate(351deg) brightness(111%)
+  contrast(115%);
 $colorStatusBtnBg: #666; // Where is this used?
 $colorStatusPartialBg: #3f5e8b;
 $colorStatusCompleteBg: #457638;
@@ -235,24 +240,27 @@ $timeConductorActivePanBg: #226074;
 
 // Browse
 $browseFrameColor: pullForward($colorBodyBg, 10%);
-$browseFrameBorder: 1px solid rgb(89, 89, 89, .4); // Frames in Disp and Flex Layouts when frame is showing
+$browseFrameBorder: 1px solid rgb(89, 89, 89, 0.4); // Frames in Disp and Flex Layouts when frame is showing
 $browseSelectableShdwHov: rgba($colorBodyFg, 0.3) 0 0 3px;
 $browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.4);
 $filterItemHoverFg: brightness(1.2) contrast(1.1);
 $interiorMarginObjectFrameVertical: 10px;
 $interiorMarginObjectFrameHorizontal: 10px;
 
-// Missing Items 
+// Missing Items
 $filterItemMissing: brightness(0.6) grayscale(1);
 $opacityMissing: 0.5;
 $borderMissing: 1px dashed $colorAlert !important;
 $browseFrameCornerColor: $colorKey 4px; //Color used for the corners of frames
-  
+
 // Edit
 $editUIColor: $uiColor; // Base color
 $editUIColorBg: $editUIColor;
 $editUIColorFg: #fff;
-$editUIColorHov: pullForward(saturate($uiColor, 10%), 10%); // Hover color when $editUIColor is applied as a base color
+$editUIColorHov: pullForward(
+  saturate($uiColor, 10%),
+  10%
+); // Hover color when $editUIColor is applied as a base color
 $editUIBaseColor: #344b8d; // Base color, toolbar bg
 $editUIBaseColorHov: pullForward($editUIBaseColor, 20%);
 $editUIBaseColorFg: #ffffff; // Toolbar button icon colors, etc.
@@ -271,7 +279,10 @@ $editFrameColorHandleBg: $colorBodyBg; // Resize handle 'offset' color to make h
 $editFrameColorHandleFg: $editFrameColorSelected; // Resize handle main color
 $editFrameSelectedShdw: rgba(black, 0.4) 0 1px 5px 1px;
 $editFrameMovebarColorBg: $editFrameColor; // Movebar bg color
-$editFrameMovebarColorFg: pullForward($editFrameMovebarColorBg, 20%); // Grippy lines, container size text
+$editFrameMovebarColorFg: pullForward(
+  $editFrameMovebarColorBg,
+  20%
+); // Grippy lines, container size text
 $editFrameHovMovebarColorBg: pullForward($editFrameMovebarColorBg, 10%); // Hover style
 $editFrameHovMovebarColorFg: pullForward($editFrameMovebarColorFg, 10%);
 $editFrameSelectedMovebarColorBg: pullForward($editFrameMovebarColorBg, 15%); // Selected style
@@ -376,13 +387,13 @@ $colorInspectorBg: pullForward($colorBodyBg, 5%);
 $colorInspectorFg: $colorBodyFg;
 $colorInspectorPropName: $colorBodyFg;
 $colorInspectorPropVal: pullForward($colorInspectorFg, 15%);
-$colorInspectorSectionHeaderBg: rgba($colorBodyBg, .75);
+$colorInspectorSectionHeaderBg: rgba($colorBodyBg, 0.75);
 $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
 
 // Tabs
 $colorTabBg: $colorBodyBg;
 $colorTabFg: $colorBodyFgEm;
-$colorTabCurrentBg: rgba($colorKey, .71);
+$colorTabCurrentBg: rgba($colorKey, 0.71);
 $colorTabCurrentFg: $colorBodyFgEm;
 $colorTabsBaseline: $colorBodyBg;
 
@@ -413,7 +424,7 @@ $colorLimitYellowIc: #fdc707;
 $colorLimitOrangeBg: #b36b00;
 $colorLimitOrangeFg: #ffe0b2;
 $colorLimitOrangeIc: #ff9900;
-$colorLimitRedBg: #B60109;
+$colorLimitRedBg: #b60109;
 $colorLimitRedFg: #ffa489;
 $colorLimitRedIc: #ff4222;
 $colorLimitPurpleBg: #891bb3;
@@ -424,7 +435,7 @@ $colorLimitCyanFg: #d3faff;
 $colorLimitCyanIc: #6bedff;
 
 // Events
-$colorEventPurpleFg: #aB8fff;
+$colorEventPurpleFg: #ab8fff;
 $colorEventRedFg: #ff9999;
 $colorEventOrangeFg: #ff8800;
 $colorEventYellowFg: #ffdb63;
@@ -475,17 +486,17 @@ $colorPlotLimitLineBg: rgba($colorBodyBg, 0.2);
 
 // Gauges
 $colorGaugeBase: $colorKeyBg;
-$colorGaugeBg: rgba($colorGaugeBase, .35); // Gauge radial area background, meter background
+$colorGaugeBg: rgba($colorGaugeBase, 0.35); // Gauge radial area background, meter background
 $colorGaugeValue: $colorKeyBg; // Gauge value graphic (radial sweep, bar) color
 $colorGaugeTextValue: #fff; // Radial gauge text value
 $colorGaugeMeterTextValue: #fff; // Meter text value, overlaid on value bar
 $colorGaugeRange: $colorBodyFg; // Range text color
-$colorGaugeLimitHigh: rgba($colorLimitRedBg, .5);
+$colorGaugeLimitHigh: rgba($colorLimitRedBg, 0.5);
 $colorGaugeLimitLow: $colorGaugeLimitHigh;
 $colorGaugeNeedle: $colorGaugeBase; // Color of needle in a needle gauge.
 $transitionTimeGauge: 150ms; // CSS transition time used to smooth needle gauge and meter value transitions
 $marginGaugeMeterValue: 10%; // Margin between meter value bar and bounds edges
-$gaugeMeterValueShadow: rgba(255, 255, 255, .5);
+$gaugeMeterValueShadow: rgba(255, 255, 255, 0.5);
 // TODO: This is some code regarding how we can make Gauges include a border or glow. We may need to revisit this.
 // padding: 5%;
 // background: radial-gradient(circle, transparent 0%, transparent 65%, rgba(255, 255, 255,0.4) 64%, rgba(255,255,255,0) 70%)
diff --git a/src/styles/_constants-espresso.scss b/src/styles/_constants-espresso.scss
index 4d823c3ea6..0d53aaf38f 100644
--- a/src/styles/_constants-espresso.scss
+++ b/src/styles/_constants-espresso.scss
@@ -66,8 +66,10 @@ $numericFont: $heroFont;
   box-shadow: rgba(black, 0.5) 0 0.5px 2px;
 }
 
-@mixin telemetryView(){}
-@mixin browseFrameBorder() {}
+@mixin telemetryView() {
+}
+@mixin browseFrameBorder() {
+}
 
 // Functions
 @function buttonBg($c: $colorBtnBg) {
@@ -100,17 +102,20 @@ $colorBodyFgEm: #fff;
 $colorGenBg: #222;
 $colorHeadBg: #000;
 $colorHeadFg: $colorBodyFg;
-$colorKey: #009fd4;
+$colorKey: #03ace4;
 $colorKeyBg: #007fad; // Darker version of colorKey for use in major buttons
 $colorKeyFg: #fff;
 $colorKeyHov: lighten($colorKey, 10%);
 $colorKeyBgHov: lighten($colorKeyBg, 10%);
-$colorKeyFilter: invert(36%) sepia(76%) saturate(2514%) hue-rotate(170deg) brightness(99%) contrast(101%);
-$colorKeyFilterHov: invert(63%) sepia(88%) saturate(3029%) hue-rotate(154deg) brightness(101%) contrast(100%);
+$colorKeyFilter: invert(36%) sepia(76%) saturate(2514%) hue-rotate(170deg) brightness(99%)
+  contrast(101%);
+$colorKeyFilterHov: invert(63%) sepia(88%) saturate(3029%) hue-rotate(154deg) brightness(101%)
+  contrast(100%);
 $colorKeySelectedBg: $colorKeyBg;
 $colorKeySubtle: pushBack($colorKey, 10%);
 $uiColor: #0093ff; // Resize bars, splitter bars, etc.
 $colorInteriorBorder: rgba($colorBodyFg, 0.2);
+$colorInteriorBorderNotebook: rgba($colorBodyFg, 0.2);
 $colorA: #ccc;
 $colorAHov: #fff;
 $filterHov: brightness(1.3) contrast(1.5); // Tree, location items
@@ -140,11 +145,14 @@ $sideBarHeaderFg: rgba($colorBodyFg, 0.7);
 $colorStatusFg: #888;
 $colorStatusDefault: #ccc;
 $colorStatusInfo: #60ba7b;
-$colorStatusInfoFilter: invert(58%) sepia(44%) saturate(405%) hue-rotate(85deg) brightness(102%) contrast(92%);
+$colorStatusInfoFilter: invert(58%) sepia(44%) saturate(405%) hue-rotate(85deg) brightness(102%)
+  contrast(92%);
 $colorStatusAlert: #ffb66c;
-$colorStatusAlertFilter: invert(78%) sepia(26%) saturate(1160%) hue-rotate(324deg) brightness(107%) contrast(101%);
+$colorStatusAlertFilter: invert(78%) sepia(26%) saturate(1160%) hue-rotate(324deg) brightness(107%)
+  contrast(101%);
 $colorStatusError: #da0004;
-$colorStatusErrorFilter: invert(10%) sepia(96%) saturate(4360%) hue-rotate(351deg) brightness(111%) contrast(115%);
+$colorStatusErrorFilter: invert(10%) sepia(96%) saturate(4360%) hue-rotate(351deg) brightness(111%)
+  contrast(115%);
 $colorStatusBtnBg: #666; // Where is this used?
 $colorStatusPartialBg: #3f5e8b;
 $colorStatusCompleteBg: #457638;
@@ -218,7 +226,10 @@ $borderMissing: 1px dashed $colorAlert !important;
 $editUIColor: $uiColor; // Base color
 $editUIColorBg: $editUIColor;
 $editUIColorFg: #fff;
-$editUIColorHov: pullForward(saturate($uiColor, 10%), 10%); // Hover color when $editUIColor is applied as a base color
+$editUIColorHov: pullForward(
+  saturate($uiColor, 10%),
+  10%
+); // Hover color when $editUIColor is applied as a base color
 $editUIBaseColor: #344b8d; // Base color, toolbar bg
 $editUIBaseColorHov: pullForward($editUIBaseColor, 20%);
 $editUIBaseColorFg: #ffffff; // Toolbar button icon colors, etc.
@@ -237,7 +248,10 @@ $editFrameColorHandleBg: $colorBodyBg; // Resize handle 'offset' color to make h
 $editFrameColorHandleFg: $editFrameColorSelected; // Resize handle main color
 $editFrameSelectedShdw: rgba(black, 0.4) 0 1px 5px 1px;
 $editFrameMovebarColorBg: $editFrameColor; // Movebar bg color
-$editFrameMovebarColorFg: pullForward($editFrameMovebarColorBg, 20%); // Grippy lines, container size text
+$editFrameMovebarColorFg: pullForward(
+  $editFrameMovebarColorBg,
+  20%
+); // Grippy lines, container size text
 $editFrameHovMovebarColorBg: pullForward($editFrameMovebarColorBg, 10%); // Hover style
 $editFrameHovMovebarColorFg: pullForward($editFrameMovebarColorFg, 10%);
 $editFrameSelectedMovebarColorBg: pullForward($editFrameMovebarColorBg, 15%); // Selected style
@@ -390,7 +404,7 @@ $colorLimitCyanFg: #d3faff;
 $colorLimitCyanIc: #6bedff;
 
 // Events
-$colorEventPurpleFg: #aB8fff;
+$colorEventPurpleFg: #ab8fff;
 $colorEventRedFg: #ff9999;
 $colorEventOrangeFg: #ff8800;
 $colorEventYellowFg: #ffdb63;
diff --git a/src/styles/_constants-maelstrom.scss b/src/styles/_constants-maelstrom.scss
index 76290fa255..8935dfb65b 100644
--- a/src/styles/_constants-maelstrom.scss
+++ b/src/styles/_constants-maelstrom.scss
@@ -66,8 +66,10 @@ $numericFont: $heroFont;
   box-shadow: rgba(black, 0.5) 0 0.5px 2px;
 }
 
-@mixin telemetryView(){}
-@mixin browseFrameBorder() {}
+@mixin telemetryView() {
+}
+@mixin browseFrameBorder() {
+}
 
 /**************************************************** OVERRIDES */
 .c-frame {
@@ -121,12 +123,15 @@ $colorKeyBg: #007fad; // Darker version of colorKey for use in major buttons
 $colorKeyFg: #fff;
 $colorKeyHov: #26d8ff;
 $colorKeyBgHov: lighten($colorKeyBg, 10%);
-$colorKeyFilter: invert(36%) sepia(76%) saturate(2514%) hue-rotate(170deg) brightness(99%) contrast(101%);
-$colorKeyFilterHov: invert(63%) sepia(88%) saturate(3029%) hue-rotate(154deg) brightness(101%) contrast(100%);
+$colorKeyFilter: invert(36%) sepia(76%) saturate(2514%) hue-rotate(170deg) brightness(99%)
+  contrast(101%);
+$colorKeyFilterHov: invert(63%) sepia(88%) saturate(3029%) hue-rotate(154deg) brightness(101%)
+  contrast(100%);
 $colorKeySelectedBg: $colorKey;
 $colorKeySubtle: pushBack($colorKey, 10%);
 $uiColor: #0093ff; // Resize bars, splitter bars, etc.
 $colorInteriorBorder: rgba($colorBodyFg, 0.2);
+$colorInteriorBorderNotebook: rgba($colorBodyFg, 0.5);
 $colorA: #ccc;
 $colorAHov: #fff;
 $filterHov: brightness(1.3) contrast(1.5); // Tree, location items
@@ -156,11 +161,14 @@ $sideBarHeaderFg: rgba($colorBodyFg, 0.7);
 $colorStatusFg: #999;
 $colorStatusDefault: #ccc;
 $colorStatusInfo: #60ba7b;
-$colorStatusInfoFilter: invert(58%) sepia(44%) saturate(405%) hue-rotate(85deg) brightness(102%) contrast(92%);
+$colorStatusInfoFilter: invert(58%) sepia(44%) saturate(405%) hue-rotate(85deg) brightness(102%)
+  contrast(92%);
 $colorStatusAlert: #ffb66c;
-$colorStatusAlertFilter: invert(78%) sepia(26%) saturate(1160%) hue-rotate(324deg) brightness(107%) contrast(101%);
+$colorStatusAlertFilter: invert(78%) sepia(26%) saturate(1160%) hue-rotate(324deg) brightness(107%)
+  contrast(101%);
 $colorStatusError: #da0004;
-$colorStatusErrorFilter: invert(10%) sepia(96%) saturate(4360%) hue-rotate(351deg) brightness(111%) contrast(115%);
+$colorStatusErrorFilter: invert(10%) sepia(96%) saturate(4360%) hue-rotate(351deg) brightness(111%)
+  contrast(115%);
 $colorStatusBtnBg: #666; // Where is this used?
 $colorStatusPartialBg: #3f5e8b;
 $colorStatusCompleteBg: #457638;
@@ -234,7 +242,10 @@ $borderMissing: 1px dashed $colorAlert !important;
 $editUIColor: $uiColor; // Base color
 $editUIColorBg: $editUIColor;
 $editUIColorFg: #fff;
-$editUIColorHov: pullForward(saturate($uiColor, 10%), 10%); // Hover color when $editUIColor is applied as a base color
+$editUIColorHov: pullForward(
+  saturate($uiColor, 10%),
+  10%
+); // Hover color when $editUIColor is applied as a base color
 $editUIBaseColor: #344b8d; // Base color, toolbar bg
 $editUIBaseColorHov: pullForward($editUIBaseColor, 20%);
 $editUIBaseColorFg: #ffffff; // Toolbar button icon colors, etc.
@@ -253,7 +264,10 @@ $editFrameColorHandleBg: $colorBodyBg; // Resize handle 'offset' color to make h
 $editFrameColorHandleFg: $editFrameColorSelected; // Resize handle main color
 $editFrameSelectedShdw: rgba(black, 0.4) 0 1px 5px 1px;
 $editFrameMovebarColorBg: $editFrameColor; // Movebar bg color
-$editFrameMovebarColorFg: pullForward($editFrameMovebarColorBg, 20%); // Grippy lines, container size text
+$editFrameMovebarColorFg: pullForward(
+  $editFrameMovebarColorBg,
+  20%
+); // Grippy lines, container size text
 $editFrameHovMovebarColorBg: pullForward($editFrameMovebarColorBg, 10%); // Hover style
 $editFrameHovMovebarColorFg: pullForward($editFrameMovebarColorFg, 10%);
 $editFrameSelectedMovebarColorBg: pullForward($editFrameMovebarColorBg, 15%); // Selected style
@@ -406,7 +420,7 @@ $colorLimitCyanFg: #d3faff;
 $colorLimitCyanIc: #6bedff;
 
 // Events
-$colorEventPurpleFg: #aB8fff;
+$colorEventPurpleFg: #ab8fff;
 $colorEventRedFg: #ff9999;
 $colorEventOrangeFg: #ff8800;
 $colorEventYellowFg: #ffdb63;
@@ -567,4 +581,4 @@ $createBtnTextTransform: uppercase;
 $colorDiscreteItemBg: rgba($colorBodyFg, 0.1);
 $colorDiscreteItemBgHov: rgba($colorBodyFg, 0.2);
 $colorDiscreteItemCurrentBg: rgba($colorOk, 0.3);
-$scrollContainer: $colorBodyBg;
\ No newline at end of file
+$scrollContainer: $colorBodyBg;
diff --git a/src/styles/_constants-snow.scss b/src/styles/_constants-snow.scss
index e0a4e179d9..3bc73d0184 100644
--- a/src/styles/_constants-snow.scss
+++ b/src/styles/_constants-snow.scss
@@ -65,8 +65,10 @@ $numericFont: $heroFont;
   background: $c;
 }
 
-@mixin telemetryView(){}
-@mixin browseFrameBorder() {}
+@mixin telemetryView() {
+}
+@mixin browseFrameBorder() {
+}
 
 // Functions
 @function buttonBg($c: $colorBtnBg) {
@@ -104,12 +106,15 @@ $colorKeyBg: #007fad; // Darker version of colorKey for use in major buttons
 $colorKeyFg: #fff;
 $colorKeyHov: lighten($colorKey, 10%); //#00c0f6;
 $colorKeyBgHov: lighten($colorKeyBg, 10%);
-$colorKeyFilter: invert(37%) sepia(100%) saturate(686%) hue-rotate(157deg) brightness(102%) contrast(102%);
-$colorKeyFilterHov: invert(69%) sepia(87%) saturate(3243%) hue-rotate(151deg) brightness(97%) contrast(102%);
+$colorKeyFilter: invert(37%) sepia(100%) saturate(686%) hue-rotate(157deg) brightness(102%)
+  contrast(102%);
+$colorKeyFilterHov: invert(69%) sepia(87%) saturate(3243%) hue-rotate(151deg) brightness(97%)
+  contrast(102%);
 $colorKeySelectedBg: $colorKey;
 $colorKeySubtle: pushBack($colorKey, 20%);
 $uiColor: #289fec; // Resize bars, splitter bars, etc.
 $colorInteriorBorder: rgba($colorBodyFg, 0.2);
+$colorInteriorBorderNotebook: rgba($colorBodyFg, 0.5);
 $colorA: $colorBodyFg;
 $colorAHov: $colorKey;
 $filterHov: hue-rotate(-10deg) brightness(0.8) contrast(2); // Tree, location items
@@ -139,11 +144,14 @@ $sideBarHeaderFg: rgba($colorBodyFg, 0.7);
 $colorStatusFg: #999;
 $colorStatusDefault: #ccc;
 $colorStatusInfo: #60ba7b;
-$colorStatusInfoFilter: invert(64%) sepia(42%) saturate(416%) hue-rotate(85deg) brightness(93%) contrast(93%);
+$colorStatusInfoFilter: invert(64%) sepia(42%) saturate(416%) hue-rotate(85deg) brightness(93%)
+  contrast(93%);
 $colorStatusAlert: #ff8a0d;
-$colorStatusAlertFilter: invert(89%) sepia(26%) saturate(5035%) hue-rotate(316deg) brightness(114%) contrast(107%);
+$colorStatusAlertFilter: invert(89%) sepia(26%) saturate(5035%) hue-rotate(316deg) brightness(114%)
+  contrast(107%);
 $colorStatusError: #da0004;
-$colorStatusErrorFilter: invert(8%) sepia(96%) saturate(4511%) hue-rotate(352deg) brightness(136%) contrast(114%);
+$colorStatusErrorFilter: invert(8%) sepia(96%) saturate(4511%) hue-rotate(352deg) brightness(136%)
+  contrast(114%);
 $colorStatusBtnBg: #666; // Where is this used?
 $colorStatusPartialBg: #c9d6ff;
 $colorStatusCompleteBg: #a4e4b4;
@@ -217,7 +225,10 @@ $borderMissing: 1px dashed $colorAlert !important;
 $editUIColor: $uiColor; // Base color
 $editUIColorBg: $editUIColor;
 $editUIColorFg: #fff;
-$editUIColorHov: pullForward(saturate($uiColor, 10%),20%); // Hover color when $editUIColor is applied as a base color
+$editUIColorHov: pullForward(
+  saturate($uiColor, 10%),
+  20%
+); // Hover color when $editUIColor is applied as a base color
 $editUIBaseColor: #cae1ff; // Base color, toolbar bg
 $editUIBaseColorHov: pushBack($editUIBaseColor, 20%);
 $editUIBaseColorFg: #4c4c4c; // Toolbar button icon colors, etc.
@@ -236,7 +247,10 @@ $editFrameColorHandleBg: $colorBodyBg; // Resize handle 'offset' color to make h
 $editFrameColorHandleFg: $editFrameColorSelected; // Resize handle main color
 $editFrameSelectedShdw: rgba(black, 0.5) 0 1px 5px 2px;
 $editFrameMovebarColorBg: $editFrameColor; // Movebar bg color
-$editFrameMovebarColorFg: pullForward($editFrameMovebarColorBg, 20%); // Grippy lines, container size text
+$editFrameMovebarColorFg: pullForward(
+  $editFrameMovebarColorBg,
+  20%
+); // Grippy lines, container size text
 $editFrameHovMovebarColorBg: pullForward($editFrameMovebarColorBg, 10%); // Hover style
 $editFrameHovMovebarColorFg: pullForward($editFrameMovebarColorFg, 10%);
 $editFrameSelectedMovebarColorBg: pullForward($editFrameMovebarColorBg, 15%); // Selected style
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index 44003e5ade..d4830220f1 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -312,12 +312,17 @@
     $impStr: !important;
   }
 
-  background-image: linear-gradient(45deg, $color 25%, transparent 25%),
+  background-image:
+    linear-gradient(45deg, $color 25%, transparent 25%),
     linear-gradient(45deg, transparent 75%, $color 75%),
     linear-gradient(45deg, transparent 75%, $color 75%),
     linear-gradient(45deg, $color 25%, transparent 25%) $impStr;
   background-size: $size $size;
-  background-position: 0 0, 0 0, -1 * $bgPos -1 * $bgPos, $bgPos $bgPos;
+  background-position:
+    0 0,
+    0 0,
+    -1 * $bgPos -1 * $bgPos,
+    $bgPos $bgPos;
 }
 
 @mixin disabled() {
@@ -350,7 +355,9 @@
 @mixin dropDownArrowBg() {
   background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3e%3cpath fill='%23#{svgColorFromHex($colorSelectArw)}' d='M5 5l5-5H0z'/%3e%3c/svg%3e");
   background-repeat: no-repeat, no-repeat;
-  background-position: right 0.4em top 80%, 0 0;
+  background-position:
+    right 0.4em top 80%,
+    0 0;
 }
 
 @mixin noColor() {
@@ -613,24 +620,24 @@
 }
 
 @mixin cButton() {
-    @include cControl();
-    @include cControlHov();
-    @include themedButton();
-    @include cButtonLayout();
-    border-radius: $controlCr;
-    color: $colorBtnFg;
-    cursor: pointer;
+  @include cControl();
+  @include cControlHov();
+  @include themedButton();
+  @include cButtonLayout();
+  border-radius: $controlCr;
+  color: $colorBtnFg;
+  cursor: pointer;
 
-    &[class*="--major"],
-    &[class*='is-active']{
-        background: $colorBtnMajorBg !important;
-        color: $colorBtnMajorFg !important;
-    }
+  &[class*='--major'],
+  &[class*='is-active'] {
+    background: $colorBtnMajorBg !important;
+    color: $colorBtnMajorFg !important;
+  }
 
-    &[class*='--caution'] {
-        background: $colorBtnCautionBg !important;
-        color: $colorBtnCautionFg !important;
-    }
+  &[class*='--caution'] {
+    background: $colorBtnCautionBg !important;
+    color: $colorBtnCautionFg !important;
+  }
 }
 
 @mixin cClickIcon() {
@@ -929,4 +936,4 @@
 // @mixin telemetryView(){
 //   border: 1px solid $colorBodyFg;
 //   border-radius: $controlCr;
-// }
\ No newline at end of file
+// }
diff --git a/src/styles/notebook.scss b/src/styles/notebook.scss
index 53e9d00d36..44427e1599 100644
--- a/src/styles/notebook.scss
+++ b/src/styles/notebook.scss
@@ -22,873 +22,884 @@
 
 /*********************************************** NOTEBOOK */
 @mixin searchHighlight {
-    background: rgba($colorBtnSelectedBg, 0.4);
-    color: $colorBtnSelectedFg;
-    font-weight: bold;
+  background: rgba($colorBtnSelectedBg, 0.4);
+  color: $colorBtnSelectedFg;
+  font-weight: bold;
 }
 
 .c-notebook {
-    $headerFontSize: 1.3em;
+  $headerFontSize: 1.3em;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  overflow: hidden;
+  height: 100%;
+
+  /****************************** CONTENT */
+  &__body {
+    // Holds __nav and __page-view
     display: flex;
-    flex-direction: column;
     flex: 1 1 auto;
     overflow: hidden;
-    height: 100%;
+  }
 
-    /****************************** CONTENT */
-    &__body {
-        // Holds __nav and __page-view
-        display: flex;
-        flex: 1 1 auto;
-        overflow: hidden;
+  &__nav {
+    flex: 0 0 auto;
+
+    * {
+      overflow: hidden;
+    }
+  }
+
+  .c-sidebar {
+    .c-sidebar__pane {
+      flex-basis: 50%;
+    }
+  }
+
+  body.mobile & {
+    .c-list-button,
+    &-snapshot-menubutton {
+      display: none;
+    }
+  }
+
+  /****************************** CONTENT */
+  &__contents {
+    width: 70%;
+  }
+
+  &__page-view {
+    // Holds __header, __drag-area and __entries
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    width: 100%;
+
+    > * {
+      flex: 0 0 auto;
+
+      + * {
+        margin-top: $interiorMargin;
+      }
+    }
+  }
+
+  > * + * {
+    margin-top: $interiorMargin;
+  }
+
+  &__head,
+  &__controls,
+  &__drag-area,
+  &__entries {
+    display: flex;
+    flex-wrap: nowrap;
+  }
+
+  &__head,
+  &__drag-area,
+  &__controls {
+    flex: 0 0 auto;
+  }
+
+  &__head {
+    [class*='__'] + [class*='__'] {
+      margin-left: $interiorMargin;
+    }
+  }
+
+  &__search {
+    flex: 1 1 auto;
+  }
+
+  &__page-locked-message,
+  &__drag-area {
+    border-radius: $controlCr;
+    padding: 10px;
+
+    &:before {
+      margin-right: 7px !important;
+    }
+  }
+
+  &__drag-area {
+    background: rgba($colorKey, 0.02);
+    border: 1px dashed rgba($colorKey, 0.7);
+    color: $colorKey;
+    cursor: pointer;
+    justify-content: center;
+
+    [class*='__label'] {
+      font-style: italic;
+      @include ellipsize();
     }
 
-    &__nav {
-        flex: 0 0 auto;
-
-        * {
-            overflow: hidden;
-        }
+    &:hover {
+      background: rgba($colorBodyFg, 0.2);
     }
 
-    .c-sidebar {
-        .c-sidebar__pane {
-            flex-basis: 50%;
-        }
+    &.drag-active,
+    &.is-active {
+      // Not currently working
+      border-color: $colorKey;
     }
 
     body.mobile & {
-        .c-list-button,
-        &-snapshot-menubutton {
-            display: none;
+      display: none;
+    }
+  }
+
+  /***** PAGE VIEW */
+  &__page-view {
+    &__header {
+      display: flex;
+      flex-wrap: wrap; // Allows wrapping in mobile portrait and narrow placements
+      line-height: 220%;
+
+      > * {
+        flex: 0 0 auto;
+      }
+    }
+
+    &__path {
+      flex: 1 1 auto;
+      margin: 0 $interiorMargin;
+      overflow: hidden;
+      white-space: nowrap;
+      font-size: $headerFontSize;
+
+      > * {
+        // Section
+        flex: 0 0 auto;
+
+        + * {
+          // Page
+          display: inline;
+          flex: 1 1 auto;
+          @include ellipsize();
         }
+      }
+    }
+  }
+
+  &__entries {
+    flex-direction: column;
+    flex: 1 1 auto;
+    overflow-x: hidden;
+    overflow-y: scroll;
+
+    @include desktop() {
+      padding-right: $interiorMarginSm; // Scrollbar kickoff
     }
 
-    /****************************** CONTENT */
-    &__contents {
-        width: 70%;
+    [class*='__entry'] + [class*='__entry'] {
+      margin-top: $interiorMarginSm;
     }
 
-    &__page-view {
-        // Holds __header, __drag-area and __entries
-        display: flex;
-        flex: 1 1 auto;
-        flex-direction: column;
-        width: 100%;
-
-        > * {
-            flex: 0 0 auto;
-
-            + * {
-                margin-top: $interiorMargin;
-            }
-        }
+    .commit-button {
+      @include cButton();
+      position: absolute;
+      right: 5px;
+      bottom: 5px;
     }
+  }
+
+  /***** SEARCH RESULTS */
+  &__search-results {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    overflow-y: auto;
 
     > * + * {
+      margin-top: 5px;
+    }
+
+    &__header {
+      font-size: $headerFontSize;
+      flex: 0 0 auto;
+    }
+
+    .c-notebook__entries {
+      flex: 1 1 auto;
+    }
+
+    .c-ne {
+      flex-direction: column;
+
+      > * + * {
         margin-top: $interiorMargin;
+      }
+    }
+  }
+
+  /***** RESTRICTED NOTEBOOK */
+  &__page-locked-message {
+    background: rgba($colorAlert, 0.2);
+    display: flex;
+    padding: 5px;
+
+    > * + * {
+      margin-left: $interiorMargin;
     }
 
-    &__head,
-    &__controls,
-    &__drag-area,
-    &__entries {
-        display: flex;
-        flex-wrap: nowrap;
+    [class*='icon'] {
+      flex: 0 0 auto;
     }
 
-    &__head,
-    &__drag-area,
-    &__controls {
-        flex: 0 0 auto;
+    [class*='__message'] {
+      flex: 1 1 auto;
     }
+  }
 
-    &__head {
-        [class*='__'] + [class*='__'] {
-            margin-left: $interiorMargin;
-        }
-    }
-
-    &__search {
-        flex: 1 1 auto;
-    }
-
-    &__page-locked-message,
-    &__drag-area {
-        border-radius: $controlCr;
-        padding: 10px;
-
-        &:before {
-            margin-right: 7px !important;
-        }
-    }
-
-    &__drag-area {
-        background: rgba($colorKey, 0.1);
-        border: 1px dashed rgba($colorKey, 0.7);
-        color: $colorKey;
-        cursor: pointer;
-        justify-content: center;
-
-        [class*='__label'] {
-            font-style: italic;
-            @include ellipsize();
-        }
-
-        &:hover {
-            background: rgba($colorBodyFg, 0.1);
-        }
-
-        &.drag-active,
-        &.is-active {
-            // Not currently working
-            border-color: $colorKey;
-        }
-
-        body.mobile & {
-            display: none;
-        }
-    }
-
-    /***** PAGE VIEW */
-    &__page-view {
-        &__header {
-            display: flex;
-            flex-wrap: wrap; // Allows wrapping in mobile portrait and narrow placements
-            line-height: 220%;
-
-            > * {
-                flex: 0 0 auto;
-            }
-        }
-
-        &__path {
-            flex: 1 1 auto;
-            margin: 0 $interiorMargin;
-            overflow: hidden;
-            white-space: nowrap;
-            font-size: $headerFontSize;
-
-            > * {
-                // Section
-                flex: 0 0 auto;
-
-                + * {
-                    // Page
-                    display: inline;
-                    flex: 1 1 auto;
-                    @include ellipsize();
-                }
-            }
-        }
-    }
-
-    &__entries {
-        flex-direction: column;
-        flex: 1 1 auto;
-        overflow-x: hidden;
-        overflow-y: scroll;
-
-        @include desktop() {
-            padding-right: $interiorMarginSm; // Scrollbar kickoff
-        }
-
-        [class*='__entry'] + [class*='__entry'] {
-            margin-top: $interiorMarginSm;
-        }
-
-        .commit-button {
-            @include cButton();
-            position: absolute;
-            right: 5px;
-            bottom: 5px;
-        }
-    }
-
-    /***** SEARCH RESULTS */
-    &__search-results {
-        display: flex;
-        flex: 1 1 auto;
-        flex-direction: column;
-        overflow-y: auto;
-
-        > * + * {
-            margin-top: 5px;
-        }
-
-        &__header {
-            font-size: $headerFontSize;
-            flex: 0 0 auto;
-        }
-
-        .c-notebook__entries {
-            flex: 1 1 auto;
-        }
-
-        .c-ne {
-            flex-direction: column;
-
-            > * + * {
-                margin-top: $interiorMargin;
-            }
-        }
-    }
-
-    /***** RESTRICTED NOTEBOOK */
-    &__page-locked-message {
-        background: rgba($colorAlert, 0.2);
-        display: flex;
-        padding: 5px;
-
-        > * + * {
-            margin-left: $interiorMargin;
-        }
-
-        [class*='icon'] {
-            flex: 0 0 auto;
-        }
-
-        [class*='__message'] {
-            flex: 1 1 auto;
-        }
-    }
-
-    &__commit-entries-control {
-        display: flex;
-        justify-content: flex-end;
-    }
+  &__commit-entries-control {
+    display: flex;
+    justify-content: flex-end;
+  }
 }
 
 .is-notebook-default,
 .is-status--notebook-default {
-    &:after {
-        color: $colorFilter;
-        font-family: symbolsfont;
-        font-size: 0.9em;
-    }
+  &:after {
+    color: $colorFilter;
+    font-family: symbolsfont;
+    font-size: 0.9em;
+  }
 
-    &.c-list__item:after {
-        content: $glyph-icon-notebook-page;
-        flex: 1 0 auto;
-        text-align: right;
-    }
+  &.c-list__item:after {
+    content: $glyph-icon-notebook-page;
+    flex: 1 0 auto;
+    text-align: right;
+  }
 }
 
 /****************************** ENTRIES */
 .c-ne {
-    // A Notebook entry
-    $p: $interiorMarginSm;
-    @include discreteItem();
-    cursor: pointer;
+  // A Notebook entry
+  $p: $interiorMarginSm;
+  @include discreteItem();
+  cursor: pointer;
+  display: flex;
+  padding: $interiorMarginSm $interiorMarginSm $interiorMarginSm $interiorMargin;
+
+  @include hover() {
+    background: $colorDiscreteItemBgHov;
+  }
+
+  &.is-selected {
+    background: rgba($colorKey, 0.1);
+
+    .c-ne__text {
+      .c-notebook--page-unlocked & {
+        cursor: text;
+
+        @include hover() {
+          &:not(.locked) {
+            background: $colorInputBgHov;
+          }
+        }
+      }
+    }
+  }
+
+  &__text,
+  &__local-controls {
+    padding-top: $p;
+    padding-bottom: $p;
+  }
+
+  &__creator,
+  &__embed__time {
+    opacity: 0.9;
+  }
+
+  &__time-and-creator-and-delete,
+  &__text,
+  &__input {
+    padding: $p;
+  }
+
+  &__time-and-creator-and-delete {
     display: flex;
-    padding: $interiorMarginSm $interiorMarginSm $interiorMarginSm $interiorMargin;
+    align-items: center;
 
-    @include hover() {
-        background: $colorDiscreteItemBgHov;
+    > * + * {
+      float: right;
+      margin-left: auto;
+    }
+  }
+
+  &__time-and-creator {
+    color: $colorA;
+  }
+
+  &__creator [class*='icon'] {
+    font-size: 0.95em;
+  }
+
+  &__time-and-content {
+    display: block;
+    flex: 1 1 auto;
+    overflow: visible;
+
+    > * + * {
+      margin-top: $interiorMarginSm;
+    }
+  }
+
+  &__time {
+    * {
+      white-space: nowrap;
+    }
+  }
+
+  &__content {
+    flex-direction: column;
+    flex: 1 1 auto;
+    margin-right: $interiorMarginSm;
+    margin-top: $interiorMargin;
+
+    > [class*='__'] + [class*='__'] {
+      margin-top: $interiorMarginSm;
+    }
+  }
+
+  &__text,
+  &__input {
+    color: $colorBodyFgEm !important;
+  }
+
+  &__text {
+    min-height: 22px; // Needed in Firefox when field is blank
+    white-space: normal;
+
+    .search-highlight {
+      @include searchHighlight();
     }
 
-    &.is-selected {
-        background: rgba($colorKey, 0.2);
-
-        .c-ne__text {
-            .c-notebook--page-unlocked & {
-                cursor: text;
-
-                @include hover() {
-                    &:not(.locked) {
-                        background: $colorInputBgHov;
-                    }
-                }
-            }
-        }
+    // Resets and styling for markdown
+    h1,
+    h2,
+    h3,
+    h4,
+    h5 {
+      margin: unset !important;
+      padding: unset !important;
     }
 
-    &__text,
-    &__local-controls {
-        padding-top: $p;
-        padding-bottom: $p;
+    a {
+      text-decoration: underline;
     }
 
-    &__creator,
-    &__embed__time {
-        opacity: 0.7;
+    em {
+      font-style: italic;
     }
 
-    &__time-and-creator-and-delete,
-    &__text,
-    &__input {
-        padding: $p;
+    > * {
+      &:not(:first-child) {
+        margin-top: $interiorMarginSm;
+      }
     }
 
-    &__time-and-creator-and-delete {
-        display: flex;
-        align-items: center;
+    p,
+    blockquote,
+    pre {
+      margin: 0;
 
-        > * + * {
-            float: right;
-            margin-left: auto;
-        }
+      &:not(:first-child) {
+        margin-top: $interiorMarginLg;
+      }
     }
 
-    &__creator [class*='icon'] {
-        font-size: 0.95em;
+    blockquote {
+      $m: 16px;
+      margin-left: $m;
+      margin-right: $m;
     }
 
-    &__time-and-content {
-        display: block;
-        flex: 1 1 auto;
-        overflow: visible;
-
-        > * + * {
-            margin-top: $interiorMarginSm;
-        }
+    ul,
+    ol {
+      padding: 0 0 0 16px;
     }
 
-    &__time {
-        * {
-            white-space: nowrap;
-        }
+    ul {
+      list-style: square;
     }
 
-    &__content {
-        flex-direction: column;
-        flex: 1 1 auto;
-        margin-right: $interiorMarginSm;
-        margin-top: $interiorMargin;
-
-        > [class*='__'] + [class*='__'] {
-            margin-top: $interiorMarginSm;
-        }
+    ol {
+      list-style: decimal;
     }
 
-    &__text,
-    &__input {
-        color: $colorBodyFgEm !important;
+    li {
+      list-style-type: inherit;
     }
 
-    &__text {
-        min-height: 22px; // Needed in Firefox when field is blank
-        white-space: normal;
-
-        .search-highlight {
-            @include searchHighlight();
-        }
-
-        // Resets and styling for markdown
-        h1, h2, h3, h4, h5 {
-            margin: unset !important;
-            padding: unset !important;
-        }
-
-        a {
-            text-decoration: underline;
-        }
-
-        em {
-            font-style: italic;
-        }
-
-        > * {
-            &:not(:first-child) {
-                margin-top: $interiorMarginSm;
-            }
-        }
-
-        p, blockquote, pre {
-            margin: 0;
-
-            &:not(:first-child) {
-                margin-top: $interiorMarginLg;
-            }
-        ;
-        }
-
-        blockquote {
-            $m: 16px;
-            margin-left: $m;
-            margin-right: $m;
-        }
-
-        ul, ol {
-            padding: 0 0 0 16px;
-        }
-
-        ul {
-            list-style: square;
-        }
-
-        ol {
-            list-style: decimal;
-        }
-
-        li {
-            list-style-type: inherit;
-        }
-
-        table {
-            width: auto;
-        }
-
-        th, td {
-            border: 1px solid rgba($colorBodyFg, 0.7);
-        }
-
-        th {
-            background: rgba($colorBodyFg, 0.2);
-        }
+    table {
+      width: auto;
     }
 
-    &__input {
-        // Textarea
-        //@include inlineInput;
-        @include reactive-input();
-        padding-left: $p;
-        padding-right: $p;
-        overflow: unset;
-        margin-bottom: $interiorMargin;
-        min-height: 5rem;
-        resize: vertical;
-        width: 100%;
+    th,
+    td {
+      border: 1px solid rgba($colorBodyFg, 0.7);
     }
 
-    &__save-button {
-        display: flex;
-        justify-content: flex-end;
+    th {
+      background: rgba($colorBodyFg, 0.2);
+    }
+  }
 
-        .c-button {
-            $lrP: 15px;
-            padding-left: $lrP;
-            padding-right: $lrP;
-        }
+  &__input {
+    // Textarea
+    //@include inlineInput;
+    @include reactive-input();
+    padding-left: $p;
+    padding-right: $p;
+    overflow: unset;
+    margin-bottom: $interiorMargin;
+    min-height: 5rem;
+    resize: vertical;
+    width: 100%;
+  }
+
+  &__save-button {
+    display: flex;
+    justify-content: flex-end;
+
+    .c-button {
+      $lrP: 15px;
+      padding-left: $lrP;
+      padding-right: $lrP;
+    }
+  }
+
+  &__section-and-page {
+    // Shown when c-ne within search results
+    background: rgba($colorBodyFg, 0.1); //$colorInteriorBorder;
+    border-radius: $controlCr;
+    display: inline-flex;
+    align-items: center;
+    align-self: flex-start;
+    padding: $interiorMargin;
+
+    .search-highlight {
+      @include searchHighlight();
     }
 
-    &__section-and-page {
-        // Shown when c-ne within search results
-        background: rgba($colorBodyFg, 0.1); //$colorInteriorBorder;
-        border-radius: $controlCr;
-        display: inline-flex;
-        align-items: center;
-        align-self: flex-start;
-        padding: $interiorMargin;
-
-        .search-highlight {
-            @include searchHighlight();
-        }
-
-        > * + * {
-            margin-left: $interiorMargin;
-        }
-
-        [class*='icon'] {
-            font-size: 0.8em;
-            opacity: 0.7;
-        }
+    > * + * {
+      margin-left: $interiorMargin;
     }
 
-    &__remove {
-        float: right;
+    [class*='icon'] {
+      font-size: 0.8em;
+      opacity: 0.7;
     }
+  }
+
+  &__remove {
+    float: right;
+  }
 }
 
 /****************************** EMBEDS */
 @mixin snapThumb() {
-    // LEGACY: TODO: refactor when .snap-thumb in New Entry dialog is refactored
-    $d: 40px;
-    border: 1px solid $colorInteriorBorder;
-    cursor: pointer;
-    width: $d;
-    height: $d;
-    border-radius: 5px;
-    overflow: hidden;
+  // LEGACY: TODO: refactor when .snap-thumb in New Entry dialog is refactored
+  $d: 40px;
+  border: 1px solid $colorInteriorBorder;
+  cursor: pointer;
+  width: $d;
+  height: $d;
+  border-radius: 5px;
+  overflow: hidden;
 
-    img {
-        height: 100%;
-        width: 100%;
-    }
+  img {
+    height: 100%;
+    width: 100%;
+  }
 }
 
 .snap-thumb {
-    // LEGACY,
-    @include snapThumb();
+  // LEGACY,
+  @include snapThumb();
 }
 
 .c-ne__embeds-wrapper {
-    max-height: 75px;
-    padding-left: $interiorMargin;
-    padding-top: $interiorMargin;
-    display: flex;
+  max-height: 75px;
+  padding-left: $interiorMargin;
+  padding-top: $interiorMargin;
+  display: flex;
 }
 
 .c-ne__embed {
-    @include discreteItemInnerElem();
-    display: inline-flex;
-    flex: 0 0 auto;
-    padding: $interiorMargin;
-    border: 1px solid $colorInteriorBorder;
+  @include discreteItemInnerElem();
+  display: inline-flex;
+  flex: 0 0 auto;
+  padding: $interiorMargin;
+  border: 1px solid $colorInteriorBorderNotebook;
 
-    &__info {
-        display: flex;
-        flex-direction: column;
-        margin-left: $interiorMargin;
+  &__info {
+    display: flex;
+    flex-direction: column;
+    margin-left: $interiorMargin;
 
-        a {
-            color: $colorKey;
-        }
+    a {
+      color: $colorKey;
+    }
+  }
+
+  &__name,
+  &__link {
+    // Holds __link and __context-available
+    display: flex;
+    align-items: center;
+  }
+
+  &__link {
+    flex: 1 1 auto;
+
+    &:before {
+      display: block;
+      font-size: 1em;
+      margin-right: $interiorMarginSm;
+    }
+  }
+
+  &__context-available {
+    font-size: 0.7em;
+    margin-left: $interiorMarginSm;
+  }
+
+  &__snap-thumb {
+    @include snapThumb();
+  }
+
+  &__actions {
+    margin: $interiorMarginSm;
+  }
+
+  &__actions-menu {
+    width: 55vh;
+    max-width: 500px;
+    height: 130px;
+    z-index: 70;
+
+    [class*='__icon'] {
+      filter: $colorKeyFilter;
+      margin: 0%;
+      height: 4vh;
     }
 
-    &__name,
-    &__link {
-        // Holds __link and __context-available
-        display: flex;
-        align-items: center;
-    }
-
-    &__link {
-        flex: 1 1 auto;
-
-        &:before {
-            display: block;
-            font-size: 1em;
-            margin-right: $interiorMarginSm;
-        }
-    }
-
-    &__context-available {
-        font-size: 0.7em;
-        margin-left: $interiorMarginSm;
-    }
-
-    &__snap-thumb {
-        @include snapThumb();
-    }
-
-    &__actions {
-        margin: $interiorMarginSm;
-    }
-
-    &__actions-menu {
-        width: 55vh;
-        max-width: 500px;
-        height: 130px;
-        z-index: 70;
-
-        [class*='__icon'] {
-            filter: $colorKeyFilter;
-            margin: 0%;
-            height: 4vh;
-        }
-
-        [class*='__item-description'] {
-            min-width: 200px;
-        }
+    [class*='__item-description'] {
+      min-width: 200px;
     }
+  }
 }
 
 /****************************** SNAPSHOTTING */
 // LEGACY: TODO: refactor these names
 .t-contents,
 .snap-annotation {
-    overflow: hidden;
+  overflow: hidden;
 }
 
 .s-status-taking-snapshot,
 .overlay.snapshot {
-    // Handle overflow-y issues with tables and html2canvas
-    background: $colorBodyBg; // Prevent html2canvas from using white background
-    color: $colorBodyFg;
-    padding: $interiorMarginSm !important; // Prevents items from going right to the edge of the image
+  // Handle overflow-y issues with tables and html2canvas
+  background: $colorBodyBg; // Prevent html2canvas from using white background
+  color: $colorBodyFg;
+  padding: $interiorMarginSm !important; // Prevents items from going right to the edge of the image
 
-    .l-sticky-headers .l-tabular-body {
-        overflow: auto;
-    }
+  .l-sticky-headers .l-tabular-body {
+    overflow: auto;
+  }
 
-    .l-browse-bar {
-        display: none; // Suppress browse-bar when snapshotting from view-large overlay
-        + * {
-            margin-top: 0 !important; // Remove margin from any following elements
-        }
+  .l-browse-bar {
+    display: none; // Suppress browse-bar when snapshotting from view-large overlay
+    + * {
+      margin-top: 0 !important; // Remove margin from any following elements
     }
+  }
 
-    * {
-        box-shadow: none !important; // Prevent html2canvas problems with box-shadow
-    }
+  * {
+    box-shadow: none !important; // Prevent html2canvas problems with box-shadow
+  }
 }
 
 .c-notebook-snapshot {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+
+  > * + * {
+    margin-top: $interiorMargin;
+  }
+
+  &__header {
+    flex: 0 0 auto;
+  }
+
+  &__image {
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center center;
     flex: 1 1 auto;
-    display: flex;
-    flex-direction: column;
-
-    > * + * {
-        margin-top: $interiorMargin;
-    }
-
-    &__header {
-        flex: 0 0 auto;
-    }
-
-    &__image {
-        background-size: contain;
-        background-repeat: no-repeat;
-        background-position: center center;
-        flex: 1 1 auto;
-    }
+  }
 }
 
 /****************************** SNAPSHOT CONTAINER */
 .c-snapshots-h {
-    // Is hidden when the parent div l-shell__drawer is collapsed, so no worries about padding, etc.
+  // Is hidden when the parent div l-shell__drawer is collapsed, so no worries about padding, etc.
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: $interiorMargin $interiorMarginLg;
+
+  > * + * {
+    margin-top: $interiorMargin;
+  }
+
+  .l-browse-bar {
+    flex: 0 0 auto;
+  }
+
+  .c-snapshots-h__title {
     display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    padding: $interiorMargin $interiorMarginLg;
+  }
 
-    > * + * {
-        margin-top: $interiorMargin;
-    }
-
-    .l-browse-bar {
-        flex: 0 0 auto;
-    }
-
-    .c-snapshots-h__title {
-        display: flex;
-    }
-
-    .c-snapshots {
-        flex: 1 1 auto;
-    }
+  .c-snapshots {
+    flex: 1 1 auto;
+  }
 }
 
 .c-snapshots {
-    flex-wrap: wrap;
-    overflow: auto;
+  flex-wrap: wrap;
+  overflow: auto;
 
-    .c-snapshot {
-        margin: 0 $interiorMarginSm $interiorMarginSm 0;
-    }
+  .c-snapshot {
+    margin: 0 $interiorMarginSm $interiorMarginSm 0;
+  }
 
-    .hint {
-        font-size: 1.25em;
-        font-style: italic;
-        opacity: 0.7;
-        padding: $interiorMarginLg;
-        text-align: center;
-    }
+  .hint {
+    font-size: 1.25em;
+    font-style: italic;
+    opacity: 0.7;
+    padding: $interiorMarginLg;
+    text-align: center;
+  }
 }
 
 /****************************** PAINTERRO OVERRIDES */
 .annotation-dialog .abs.editor {
-    border-radius: 0;
+  border-radius: 0;
 }
 
 #snap-annotation {
-    $m: 0; //$interiorMargin;
-    display: flex;
-    flex-direction: column;
-    position: absolute;
-    top: $m;
-    right: 0;
-    bottom: $m;
-    left: 0; // LEGACY, deal with .editor border-radius clipping stuff
+  $m: 0; //$interiorMargin;
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: $m;
+  right: 0;
+  bottom: $m;
+  left: 0; // LEGACY, deal with .editor border-radius clipping stuff
 }
 
 #snap-annotation-wrapper,
 #snap-annotation-bar {
-    position: relative;
-    top: auto;
-    right: auto;
-    bottom: auto;
-    left: auto;
+  position: relative;
+  top: auto;
+  right: auto;
+  bottom: auto;
+  left: auto;
 }
 
 #snap-annotation-wrapper {
-    background: rgba($colorBodyFg, 0.1);
-    border: 1px solid $colorInteriorBorder;
-    order: 2;
-    flex: 10 0 auto;
+  background: rgba($colorBodyFg, 0.1);
+  border: 1px solid $colorInteriorBorder;
+  order: 2;
+  flex: 10 0 auto;
 }
 
 #snap-annotation-bar {
-    // Holds tool buttons, color selectors, etc.
-    $h: 22px;
-    $fs: 0.8rem;
-    $m: $interiorMarginSm;
+  // Holds tool buttons, color selectors, etc.
+  $h: 22px;
+  $fs: 0.8rem;
+  $m: $interiorMarginSm;
 
+  display: flex;
+  align-items: center;
+  height: $h + ($m * 2) !important;
+  margin-bottom: $interiorMarginLg;
+  order: 1;
+  flex: 0 0 auto;
+  background-color: transparent !important;
+  padding: $interiorMarginSm;
+
+  > div {
+    display: contents;
+
+    > * + * {
+      margin-left: $interiorMargin !important;
+    }
+  }
+
+  .ptro-tool-controls {
     display: flex;
-    align-items: center;
-    height: $h + ($m * 2) !important;
-    margin-bottom: $interiorMarginLg;
-    order: 1;
-    flex: 0 0 auto;
-    background-color: transparent !important;
-    padding: $interiorMarginSm;
+    margin-left: $interiorMarginLg !important;
 
-    > div {
-        display: contents;
+    > * + * {
+      margin-left: $interiorMargin !important;
+    }
+  }
 
-        > * + * {
-            margin-left: $interiorMargin !important;
-        }
+  .ptro-icon-btn,
+  .ptro-named-btn,
+  .ptro-color-btn,
+  .ptro-bordered-btn,
+  .ptro-tool-ctl-name,
+  .ptro-color-btn,
+  .tool-controls,
+  .ptro-input {
+    // Lot of resets for crappy CSS in Painterro
+    font-family: inherit;
+    font-size: $fs !important;
+    height: $h !important;
+    margin: 0;
+    position: relative;
+    line-height: $h !important;
+  }
+
+  .ptro-tool-ctl-name {
+    border-radius: 0;
+    background: none;
+    color: $colorBodyFg;
+    top: auto;
+    font-family: inherit;
+    padding: 0;
+  }
+
+  .ptro-color-btn {
+    width: $h !important;
+  }
+
+  .ptro-check,
+  .ptro-color-control,
+  .ptro-icon-btn,
+  .ptro-named-btn {
+    // Buttons in toolbar
+    border-radius: $smallCr;
+    box-shadow: rgba($colorBtnFg, 0.3) 0 0 0 1px;
+    color: $colorBtnFg !important;
+    padding: 1px $interiorMargin;
+
+    &:hover {
+      background: $colorBtnBgHov;
+      color: $colorBtnFgHov;
     }
 
-    .ptro-tool-controls {
-        display: flex;
-        margin-left: $interiorMarginLg !important;
-
-        > * + * {
-            margin-left: $interiorMargin !important;
-        }
+    i {
+      display: contents;
+      font-size: $fs * 1.2;
+      line-height: inherit;
     }
+  }
 
-    .ptro-icon-btn,
-    .ptro-named-btn,
-    .ptro-color-btn,
-    .ptro-bordered-btn,
-    .ptro-tool-ctl-name,
-    .ptro-color-btn,
-    .tool-controls,
-    .ptro-input {
-        // Lot of resets for crappy CSS in Painterro
-        font-family: inherit;
-        font-size: $fs !important;
-        height: $h !important;
-        margin: 0;
-        position: relative;
-        line-height: $h !important;
-    }
+  .ptro-color-control,
+  .ptro-icon-btn,
+  .ptro-named-btn {
+    // Buttons in toolbar
+    background-color: $colorBtnBg;
+  }
 
-    .ptro-tool-ctl-name {
-        border-radius: 0;
-        background: none;
-        color: $colorBodyFg;
-        top: auto;
-        font-family: inherit;
-        padding: 0;
-    }
+  .ptro-color-active-control {
+    background: $colorBtnMajorBg !important;
+    color: $colorBtnMajorFg !important;
+  }
 
-    .ptro-color-btn {
-        width: $h !important;
-    }
-
-    .ptro-check,
-    .ptro-color-control,
-    .ptro-icon-btn,
-    .ptro-named-btn {
-        // Buttons in toolbar
-        border-radius: $smallCr;
-        box-shadow: rgba($colorBtnFg, 0.3) 0 0 0 1px;
-        color: $colorBtnFg !important;
-        padding: 1px $interiorMargin;
-
-        &:hover {
-            background: $colorBtnBgHov;
-            color: $colorBtnFgHov;
-        }
-
-        i {
-            display: contents;
-            font-size: $fs * 1.2;
-            line-height: inherit;
-        }
-    }
-
-    .ptro-color-control,
-    .ptro-icon-btn,
-    .ptro-named-btn {
-        // Buttons in toolbar
-        background-color: $colorBtnBg;
-    }
-
-    .ptro-color-active-control {
-        background: $colorBtnMajorBg !important;
-        color: $colorBtnMajorFg !important;
-    }
-
-    .ptro-info,
-    .ptro-btn-color-checkers-bar,
-    *[title='Font name'],
-    *[title='Stroke color'],
-    *[title='Stroke width'],
-    *[data-id='fontName'],
-    *[data-id='fontStrokeSize'],
-    *[data-id='stroke'] {
-        display: none;
-    }
+  .ptro-info,
+  .ptro-btn-color-checkers-bar,
+  *[title='Font name'],
+  *[title='Stroke color'],
+  *[title='Stroke width'],
+  *[data-id='fontName'],
+  *[data-id='fontStrokeSize'],
+  *[data-id='stroke'] {
+    display: none;
+  }
 }
 
 /****************************** MOBILE */
 body.mobile {
-    .c-notebook__drag-area {
-        display: none;
+  .c-notebook__drag-area {
+    display: none;
+  }
+
+  .c-notebook__entry {
+    [class*='local-controls'] {
+      display: none;
+      height: fit-content;
+    }
+  }
+
+  &.phone.portrait {
+    .c-notebook__head,
+    .c-notebook__entry,
+    .c-ne__time-and-content {
+      flex-direction: column;
+
+      > [class*='__'] + [class*='__'] {
+        margin-left: 0;
+        margin-top: $interiorMargin;
+      }
     }
 
     .c-notebook__entry {
-        [class*='local-controls'] {
-            display: none;
-            height: fit-content;
-        }
-    }
-
-    &.phone.portrait {
-        .c-notebook__head,
-        .c-notebook__entry,
-        .c-ne__time-and-content {
-            flex-direction: column;
-
-            > [class*='__'] + [class*='__'] {
-                margin-left: 0;
-                margin-top: $interiorMargin;
-            }
-        }
-
-        .c-notebook__entry {
-            [class*='text'] {
-                min-height: 0;
-                pointer-events: none;
-            }
-        }
+      [class*='text'] {
+        min-height: 0;
+        pointer-events: none;
+      }
     }
+  }
 }
 
 /****************************** INDICATOR */
 .c-indicator.has-new-snapshot {
-    $c: $colorOk;
-    @include pulseProp(
-            $animName: flashSnapshot,
-            $dur: 500ms,
-            $iter: infinite,
-            $prop: background,
-            $valStart: rgba($c, 0.4),
-            $valEnd: rgba($c, 0)
-    );
+  $c: $colorOk;
+  @include pulseProp(
+    $animName: flashSnapshot,
+    $dur: 500ms,
+    $iter: infinite,
+    $prop: background,
+    $valStart: rgba($c, 0.4),
+    $valEnd: rgba($c, 0)
+  );
 }
 
 /****************************** RESTRICTED NOTEBOOK / SHIFT LOG */
 .c-notebook--restricted {
-    .c-notebook__pages {
-        .c-list__item {
-            // Can display lock icon when a page is committed.
-            &:before {
-                $s: 0.8em;
-                color: $colorAlert;
-                display: block;
-                font-size: $s;
-                width: $s;
-                margin-right: $interiorMarginSm;
-            }
+  .c-notebook__pages {
+    .c-list__item {
+      // Can display lock icon when a page is committed.
+      &:before {
+        $s: 0.8em;
+        color: $colorAlert;
+        display: block;
+        font-size: $s;
+        width: $s;
+        margin-right: $interiorMarginSm;
+      }
 
-            &:not([class*='lock']) {
-                &:before {
-                    content: '';
-                }
-            }
+      &:not([class*='lock']) {
+        &:before {
+          content: '';
         }
+      }
     }
+  }
 }
 
 .c-list__item {
-    &__name:focus {
-        text-overflow: clip;
-    }
+  &__name:focus {
+    text-overflow: clip;
+  }
 }
diff --git a/src/ui/layout/status-bar/indicators.scss b/src/ui/layout/status-bar/indicators.scss
index 957356f9e9..669e62eba2 100644
--- a/src/ui/layout/status-bar/indicators.scss
+++ b/src/ui/layout/status-bar/indicators.scss
@@ -47,7 +47,7 @@
     // Make <a> in label look like buttons
     @include transition(background-color);
     background-color: transparent;
-    border: 1px solid rgba($colorIndicatorMenuFg, 0.5);
+    border: 1px solid rgba($colorIndicatorMenuFg, 0.8);
     border-radius: $controlCr;
     box-sizing: border-box;
     color: inherit;