Project import generated by Copybara.
GitOrigin-RevId: d9e9e3fb4e31372ec1fb43b178994ca78fa8fe70
diff --git a/static/css/chopsui-normal.css b/static/css/chopsui-normal.css
new file mode 100644
index 0000000..981d12e
--- /dev/null
+++ b/static/css/chopsui-normal.css
@@ -0,0 +1,164 @@
+:root {
+ /* Subset of https://material.io/design/color/the-color-system.html */
+ --chops-red-50: #ffebee;
+ --chops-red-700: #d32f2f;
+ --chops-purple-50: #f3e5f5;
+ --chops-purple-700: #7b1fa2;
+ --chops-blue-50: #e3f2fd;
+ /*
+ Additional blue added on top of the 2014 Material Design palette because
+ blue 50 is too low contrast for backgrounds. Made from mixing blue 50
+ and blue 100.
+ */
+ --chops-blue-75: #d9edfc;
+ --chops-blue-100: #bbdefb;
+ --chops-blue-300: #64b5f6;
+ --chops-blue-700: #1976d2;
+ --chops-blue-900: #01579b;
+ --chops-green-50: #e8f5e9;
+ --chops-green-800: #2e7d32;
+ --chops-light-green-10: #f6fff5;
+ --chops-light-green-50: #f1f8e9;
+ --chops-yellow-50: #fffde7;
+ --chops-orange-50: #fff3e0;
+ --chops-orange-200: #ffcc80;
+ --chops-gray-50: #fafafa;
+ --chops-gray-200: #eee;
+ --chops-gray-300: #e0e0e0;
+ --chops-gray-400: #bdbdbd;
+ --chops-gray-500: #9e9e9e;
+ --chops-gray-600: #757575;
+ --chops-gray-700: #616161;
+ --chops-gray-800: #424242;
+ --chops-gray-850: #303030;
+ --chops-gray-900: #212121;
+ /* Making these variables makes it easier to add user-side scripts in a reasonable way. */
+ --chops-white: #ffffff;
+ --chops-black: #000000;
+
+ /* To make grays used for font styles and icons maintain consistent
+ * contrast ratios across colored backgrounds, we repesent them as pure black
+ * with opacity set. */
+ --chops-gray-700-alpha: hsla(0, 0%, 0%, 0.62);
+ --chops-gray-800-alpha: hsla(0, 0%, 0%, 0.74);
+ --chops-gray-900-alpha: hsla(0, 0%, 0%, 0.87);
+
+ --chops-blue-gray-25: #f1f3f4;
+ --chops-blue-gray-50: #eceff1; /* Similar to grimoire. */
+
+ --chops-primary-header-bg: var(--chops-white);
+ --chops-secondary-header-bg: var(--chops-blue-gray-25);
+ --chops-sidebar-bg: var(--chops-blue-gray-25);
+ --chops-page-bg: var(--chops-white);
+ --chops-footer-bg: transparent;
+ --chops-primary-icon-color: var(--chops-gray-700-alpha);
+
+ --chops-normal-border: 1px solid hsl(0, 0%, 85%);
+ /* Border color for situations when contrast is important. */
+ --chops-accessible-border: 1px solid var(--chops-gray-400);
+ --chops-radius: 6px;
+ --chops-shadow: none;
+
+ --chops-primary-font-color: var(--chops-gray-900-alpha);
+ --chops-font-family: 'Roboto', 'Noto', sans-serif;
+ --chops-link-color: var(--chops-primary-accent-color);
+ --chops-link-font-weight: 500;
+ --chops-light-accent-color: var(--chops-blue-300);
+ --chops-primary-accent-color: var(--chops-blue-700);
+ --chops-primary-accent-bg: var(--chops-blue-50);
+ --chops-primary-button-bg: var(--chops-primary-accent-color);
+ --chops-primary-button-color: var(--chops-white);
+ --chops-button-bg: var(--chops-gray-200);
+ --chops-button-color: var(--chops-black);
+ --chops-button-disabled-bg: var(--chops-gray-300);
+ --chops-button-disabled-color: var(--chops-gray-600);
+ --chops-button-border: none;
+ --chops-button-radius: 4px;
+ --chops-choice-bg: var(--chops-blue-gray-50);
+ --chops-choice-color: var(--chops-gray-600);
+ --chops-active-choice-bg: var(--chops-blue-75);
+ --chops-active-choice-color: var(--chops-primary-accent-color);
+ --chops-transition-time: 0.1s;
+
+ --chops-error-bubble-bg: var(--chops-red-50);
+ --chops-notice-bubble-bg: var(--chops-orange-50);
+ --chops-notice-border: 1px solid var(--chops-orange-200);
+ --chops-help-bubble-bg: var(--chops-blue-50);
+ --chops-field-error-color: var(--chops-red-700);
+ --chops-selected-bg: var(--chops-yellow-50);
+
+ --chops-card-heading-bg: var(--chops-secondary-header-bg);
+ --chops-card-details-bg: var(--chops-gray-50);
+ --chops-card-border: var(--chops-normal-border);
+ --chops-card-content-bg: var(--chops-white);
+
+ --chops-table-header-bg: var(--chops-secondary-header-bg);
+ --chops-table-row-bg: var(--chops-white);
+ --chops-table-divider: var(--chops-normal-border);
+
+ --chops-main-font-size: 13px;
+ --chops-large-font-size: 15px;
+ --chops-icon-font-size: 20px;
+
+ /* A few Monorail-specific CSS variables. */
+ --monorail-header-height: 44px;
+ --monorail-metadata-open-bg: var(--chops-light-green-10);
+ --monorail-metadata-closed-bg: var(--chops-sidebar-bg);
+}
+
+
+body {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ font-family: var(--chops-font-family);
+ line-height: 1.4;
+ font-size: var(--chops-main-font-size);
+ min-width: 300px;
+ background: var(--chops-page-bg);
+ color: var(--chops-primary-font-color);
+}
+
+/* Global styles for the EZT pages. */
+a {
+ color: var(--chops-link-color);
+ text-decoration: none;
+ font-weight: var(--chops-link-font-weight);
+}
+
+a:hover {
+ text-decoration: underline;
+}
+
+/* Legacy CSS used by both the SPA and the EZT pages. */
+#footer {
+ clear: both;
+ text-align: right;
+ padding-top: 1em;
+ margin: 3.5em 0em;
+ color: var(--chops-gray-500);
+ background: var(--chops-footer-bg);
+}
+
+#footer a,
+#footer a:visited {
+ text-decoration: none;
+ margin-right: 2em;
+}
+
+#ac-list {
+ border: 1px solid var(--chops-gray-400);
+ background: var(--chops-white);
+ color: var(--chops-link-color);
+ padding: 2px;
+ z-index: 999;
+ max-height: 18em;
+ overflow-x: hidden;
+ overflow-y: auto;
+}
+#ac-list { font-size: 95%; }
+#ac-list tr { margin: 1px; cursor: pointer; padding: 0 10px; }
+#ac-list th { color: var(--chops-gray-850); text-align: left; }
+#ac-list .selected,
+#ac-list .selected td { background: var(--chops-active-choice-bg); }
+#ac-list td, #ac-list th { white-space: nowrap; padding-right: 22px}