From 346cd18db851922179efc5644b0e9edefe19c789 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 9 Jul 2018 16:43:28 +0200 Subject: [PATCH] fixes for Hyper v2 * css variables dont work for whatever reason so move to css in js only --- README.md | 2 +- index.js | 13 +---- styles.css | 164 ---------------------------------------------------- styles.js | 166 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 168 insertions(+), 177 deletions(-) delete mode 100644 styles.css create mode 100644 styles.js diff --git a/README.md b/README.md index 766b2fe..7edcb74 100644 --- a/README.md +++ b/README.md @@ -44,4 +44,4 @@ Install dependencies with `npm install` and hack away. Run the tests using `npm ## Author -- [Matthias Kretschmann](https://matthiaskretschmann.com) ([@kremalicious](https://twitter.com/kremalicious)) +- [Matthias Kretschmann](https://matthiaskretschmann.com) ([@kremalicious](https://github.com/kremalicious)) diff --git a/index.js b/index.js index 1f41781..0496bc0 100644 --- a/index.js +++ b/index.js @@ -1,15 +1,4 @@ -'use strict' - -const fs = require('fs') -const path = require('path') - -let styles = '' - -try { - styles = fs.readFileSync(path.join(__dirname, 'styles.css'), 'utf8') -} catch (err) { - throw err -} +const styles = require('./styles') exports.decorateConfig = config => Object.assign({}, config, { css: (config.css || '') + styles diff --git a/styles.css b/styles.css deleted file mode 100644 index 47b3961..0000000 --- a/styles.css +++ /dev/null @@ -1,164 +0,0 @@ -:root { - --tab-height: 35px; - --tab-background: linear-gradient(to bottom, #898989 0%, #676767 100%); - --tab-background-hover: linear-gradient(to bottom, #777 0%, #595959 100%); - --tab-background-inactive: linear-gradient(to bottom, #7d7d7d 0%, #5e5e5e 100%); - --tab-background-blur: linear-gradient(to bottom, #606060 0%, #555 100%); - --tab-background-blur-active: linear-gradient(to bottom, #666 0%, #595959 100%); - --tab-border-color: #5e5e5e; - --tab-text-color: #030303; - --tab-text-color-inactive: #363636; -} - -.hyper_main { border: none; } - -.header_header { - top: 0; - left: 0; - right: 0; -} - -/* Create a half pixel top border */ -.header_header::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 1px; - z-index: 2; - background: #cfcfcf; - transform: scaleY(.5); -} - -.tabs_nav { - background: var(--tab-background-inactive); - height: var(--tab-height); - line-height: var(--tab-height); -} - -.no-tabs .tabs_nav { - background: var(--tab-background); -} - -.blur .tabs_nav, -.no-tabs.blur .tabs_nav { - background: var(--tab-background-blur); -} - -.tabs_list { - max-height: var(--tab-height); -} - -.fullscreen .tabs_list { - margin-left: 0; -} - -.tabs_nav .tab_tab { - background: var(--tab-background-inactive); - border-left: 1px solid var(--tab-border-color) !important; - border-bottom: 0; - transition: background .25s ease-out; -} - -.no-tabs .tabs_nav .tab_tab { - background: var(--tab-background); -} - -.blur .tabs_nav .tab_tab, -.no-tabs.blur .tabs_nav .tab_tab { - background: var(--tab-background-blur); -} - -.tabs_nav .tab_text, -.tabs_nav .tabs_title { - height: var(--tab-height); - color: var(--tab-text-color-inactive); - text-shadow: 0 1px 0 rgba(255, 255, 255, .1); - transition: .25s ease-out; -} - -.tabs_nav .tabs_title, -.fullscreen .tabs_nav .tab_text { - font-size: 13px; -} - -.tabs_nav .tabs_title, -.tabs_nav .tabs_list .tab_active .tab_text { - color: var(--tab-text-color); -} - -.tabs_nav .tab_tab.tab_first:not(.tab_active) { - border-left: 0 !important; -} - -.tabs_nav .tab_tab.tab_first:not(.tab_active):hover { - box-shadow: -1px 0 0 var(--tab-border-color); -} - -.tabs_nav .tab_tab:not(.tab_active):hover { - background: var(--tab-background-hover); -} - -.tabs_nav .tabs_list .tab_active { - background: var(--tab-background); -} - -.tabs_nav .tabs_list .tab_active .tab_text { - transition: none; - box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1); - text-shadow: 0 1px 0 rgba(255, 255, 255, .15); - z-index: 1; -} - -.blur .tabs_nav .tabs_list .tab_active { - background: var(--tab-background-blur-active); -} - -.blur .tabs_nav .tabs_title, -.blur .tabs_nav .tabs_list .tab_active .tab_text { - transition: none; - color: var(--tab-text-color-inactive); -} - -.tabs_nav .tabs_borderShim { - display: none; -} - -/* The close icon */ -.tabs_nav .tabs_list .tab_icon { - z-index: 2; - right: auto; - left: 7px; - top: 11px; - color: var(--tab-text-color); - border-radius: 3px; - padding: 4px; - background-color: transparent; - filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .15)); -} - -.tabs_nav .tabs_list .tab_icon:hover { - color: var(--tab-text-color); - background-color: rgba(0, 0, 0, .12); - filter: none; -} - -.tabs_nav .tabs_list .tab_icon:active { - filter: none; - transition: none; - background-color: rgba(0, 0, 0, .2); -} - -.tabs_nav .tabs_list .tab_active .tab_icon:active { - background-color: rgba(0, 0, 0, .22); -} - -.tabs_nav .tabs_list .tab_active .tab_icon:hover { - background-color: rgba(0, 0, 0, .15); -} - -.terms_terms { - margin-top: var(--tab-height); - border-top: 1px solid #181818; -} diff --git a/styles.js b/styles.js new file mode 100644 index 0000000..ce034f4 --- /dev/null +++ b/styles.js @@ -0,0 +1,166 @@ +const config = { + tabHeight: '35px', + tabBackground: 'linear-gradient(to bottom, #898989 0%, #676767 100%)', + tabBackgroundHover: 'linear-gradient(to bottom, #777 0%, #595959 100%)', + tabBackgroundInactive: 'linear-gradient(to bottom, #7d7d7d 0%, #5e5e5e 100%)', + tabBackgroundBlur: 'linear-gradient(to bottom, #606060 0%, #555 100%)', + tabBackgroundBlurActive: 'linear-gradient(to bottom, #666 0%, #595959 100%)', + 'tabBorder-color': '#5e5e5e', + tabTextColor: '#030303', + tabTextColorInactive: '#363636' +} + +module.exports = ` + .hyper_main { border: none; } + + .header_header { + top: 0; + left: 0; + right: 0; + } + + /* Create a half pixel top border */ + .header_header::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 1px; + z-index: 2; + background: #cfcfcf; + transform: scaleY(.5); + } + + .tabs_nav { + background: ${config.tabBackgroundInactive}; + height: ${config.tabHeight}; + line-height: ${config.tabHeight}; + } + + .no-tabs .tabs_nav { + background: ${config.tabBackground}; + } + + .blur .tabs_nav, + .no-tabs.blur .tabs_nav { + background: ${config.tabBackgroundBlur}; + } + + .tabs_list { + max-height: ${config.tabHeight}; + } + + .fullscreen .tabs_list { + margin-left: 0; + } + + .tabs_nav .tab_tab { + background: ${config.tabBackgroundInactive}; + border-left: 1px solid ${config.tabBorderColor} !important; + border-bottom: 0; + transition: background .25s ease-out; + } + + .no-tabs .tabs_nav .tab_tab { + background: ${config.tabBackground}; + } + + .blur .tabs_nav .tab_tab, + .no-tabs.blur .tabs_nav .tab_tab { + background: ${config.tabBackgroundBlur}; + } + + .tabs_nav .tab_text, + .tabs_nav .tabs_title { + height: ${config.tabHeight}; + color: ${config.tabTextColorInactive}; + text-shadow: 0 1px 0 rgba(255, 255, 255, .1); + transition: .25s ease-out; + } + + .tabs_nav .tabs_title, + .fullscreen .tabs_nav .tab_text { + font-size: 13px; + } + + .tabs_nav .tabs_title, + .tabs_nav .tabs_list .tab_active .tab_text { + color: ${config.tabTextColor}; + } + + .tabs_nav .tab_tab.tab_first:not(.tab_active) { + border-left: 0 !important; + } + + .tabs_nav .tab_tab.tab_first:not(.tab_active):hover { + box-shadow: -1px 0 0 ${config.tabBorderColor}; + } + + .tabs_nav .tab_tab:not(.tab_active):hover { + background: ${config.tabBackgroundHover}; + } + + .tabs_nav .tabs_list .tab_active { + background: ${config.tabBackground}; + } + + .tabs_nav .tabs_list .tab_active .tab_text { + transition: none; + box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1); + text-shadow: 0 1px 0 rgba(255, 255, 255, .15); + z-index: 1; + } + + .blur .tabs_nav .tabs_list .tab_active { + background: ${config.tabBackgroundBlurActive}; + } + + .blur .tabs_nav .tabs_title, + .blur .tabs_nav .tabs_list .tab_active .tab_text { + transition: none; + color: ${config.tabTextColorInactive}; + } + + .tabs_nav .tabs_borderShim { + display: none; + } + + /* The close icon */ + .tabs_nav .tabs_list .tab_icon { + z-index: 2; + right: auto; + left: 7px; + top: 11px; + color: ${config.tabTextColor}; + border-radius: 3px; + padding: 4px; + background-color: transparent; + filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .15)); + } + + .tabs_nav .tabs_list .tab_icon:hover { + color: ${config.tabTextColor}; + background-color: rgba(0, 0, 0, .12); + filter: none; + } + + .tabs_nav .tabs_list .tab_icon:active { + filter: none; + transition: none; + background-color: rgba(0, 0, 0, .2); + } + + .tabs_nav .tabs_list .tab_active .tab_icon:active { + background-color: rgba(0, 0, 0, .22); + } + + .tabs_nav .tabs_list .tab_active .tab_icon:hover { + background-color: rgba(0, 0, 0, .15); + } + + .terms_terms { + margin-top: ${config.tabHeight}; + border-top: 1px solid #181818; + } +`