ghost-portal/packages/apps/public/index.html
MiZiet 5b65c111d1
Add new menu styling (#4317)
* POC displaying route in Tabs

* WIP Add new menu style

Co-authored-by: Krzysztof Jelski <krzysztof-jelski@users.noreply.github.com>

* Rename Section to CurrentSection

* Add new Tabs styling

* WIP Add new menu styling

* Set menu's max-width

* Add theme styles to menu

* Change font size and font weight

* Remove r

* Remove console logs

* Update header styles

* Fix settings link padding

* Change nav link font weight

* Change settings link font weight

* Fix settings link paddings

* Change nav links font size

* Add menu padding

* Change badge paddings

* Change counter badge color to grey

* Add space between menu items

* Change chain name font styles

* Remove color setting from chain css class

* Restore previous whitish color

* Move NodeInfo component to .menuContainer

* Restore font-weights

* Increase the max-width of chain name

* Set darker color for TabsSectionDelimiter

* Center vertically the left chain icon

* Change ChainInfo's elements align and font-sizes

* storke highlight

* Restore ChainInfo alignment

* Revert badges colors

* Align right search bar

* Change menu styling to prevent menu lists blending

* Remove scrollbar from tabs

* Resolve problem with search bar placement

* Add margin-bottom to settings tab

* Change setting padding when there is no badge

* Make tab underline to ignore badge and move it under tabs bar

* WIP Change menu

* Apply contrast to menu hover

* Add bright menu hover for chains with dark chain color

* Add chain color to menu list

* Set menu list hover

* Add badge styles

* Align items badge

Co-authored-by: Krzysztof Jelski <krzysztof-jelski@users.noreply.github.com>
Co-authored-by: Krzysztof Jelski <krzysztof@ethworks.io>
Co-authored-by: alexcherman <sashacherman@gmail.com>
Co-authored-by: Jaco Greeff <jacogr@gmail.com>
Co-authored-by: Ewa Kowalska <ewcia.kowalska@gmail.com>
2021-03-24 10:27:37 +01:00

74 lines
2.6 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="manifest.json">
<link rel="shortcut icon" href="favicon.ico">
<title><%= htmlWebpackPlugin.options.PAGE_TITLE %></title>
<script type="text/javascript" src="/env-config.js"></script>
<style>
:root {
--font-mono: 0.9em Consolas, monaco, "Ubuntu Mono", "Liberation Mono", "Courier New", Courier, monospace;
--font-sans: 1em "-apple-system", BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--font-weight-bold: 700;
--font-weight-light: 200;
--font-weight-normal: 400;
--width-full: 1750px;
--width-half: 875px;
--bg-menu-hover: rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] {
--bg-input: #38393f;
--bg-input-error: #48393f;
--bg-inverse: rgba(78, 78, 78, 0.66);
--bg-menu: #26272c;
--bg-page: #26272c;
--bg-table: #3b3d3f;
--bg-tabs: #38393f;
--bg-toggle: #58595f;
--border-table: #343536;
--border-tabs: #343536;
--color-checkbox: rgba(78, 78, 78, 0.66);
--color-error: rgba(255, 83, 83, 0.8);
--color-label: rgba(244, 242, 240, 0.45);
--color-summary: rgba(244, 242, 240, 0.75);
--color-table-foot: rgba(254, 240, 240, 0.66);
--color-table-head: rgba(254, 240, 240, 0.66);
--color-text: rgba(244, 242, 240, 0.9);
}
[data-theme="light"] {
--bg-input: #ffffff;
--bg-input-error: #fff6f6;
--bg-inverse: rgba(244, 242, 240, 0.91);
--bg-menu: #ffffff;
--bg-page: #f5f3f1;
--bg-table: #ffffff;
--bg-tabs: #ffffff;
--bg-toggle: #e4e5e6;
--border-table: #f1efed;
--border-tabs: #f1efed;
--color-checkbox: rgba(34, 36, 38, 0.15);
--color-error: rgba(139, 0, 0);
--color-label: rgba(78, 78, 78, 0.66);
--color-summary: rgba(0, 0, 0, 0.6);
--color-table-foot: rgba(78, 78, 78, 0.66);
--color-table-head: rgba(78, 78, 78, 0.66);
--color-text: #4e4e4e;
}
</style>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<div id="tooltips"></div>
<script>
if (window.self !== window.top) {
window.top.location.href = window.location.href;
}
</script>
</body>
</html>