mirror of
https://github.com/kremalicious/hyper-mac-pro.git
synced 2024-12-10 03:27:16 +01:00
🥃 initial commit
This commit is contained in:
commit
85c6239e3b
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
node_modules
|
||||
yarn.lock
|
128
.stylelintrc
Normal file
128
.stylelintrc
Normal file
@ -0,0 +1,128 @@
|
||||
{
|
||||
"rules": {
|
||||
"at-rule-empty-line-before": [ "always", {
|
||||
except: [
|
||||
"blockless-after-same-name-blockless",
|
||||
"first-nested",
|
||||
],
|
||||
ignore: ["after-comment"],
|
||||
} ],
|
||||
"at-rule-name-case": "lower",
|
||||
"at-rule-name-space-after": "always-single-line",
|
||||
"at-rule-semicolon-newline-after": "always",
|
||||
"block-closing-brace-empty-line-before": "never",
|
||||
"block-closing-brace-newline-after": "always",
|
||||
"block-closing-brace-newline-before": "always-multi-line",
|
||||
"block-closing-brace-space-before": "always-single-line",
|
||||
"block-no-empty": true,
|
||||
"block-opening-brace-newline-after": "always-multi-line",
|
||||
"block-opening-brace-space-after": "always-single-line",
|
||||
"block-opening-brace-space-before": "always",
|
||||
"color-hex-case": "lower",
|
||||
"color-hex-length": "short",
|
||||
"color-no-invalid-hex": true,
|
||||
"comment-empty-line-before": [ "always", {
|
||||
except: ["first-nested"],
|
||||
ignore: ["stylelint-commands"],
|
||||
} ],
|
||||
"comment-no-empty": true,
|
||||
"comment-whitespace-inside": "always",
|
||||
"custom-property-empty-line-before": [ "always", {
|
||||
except: [
|
||||
"after-custom-property",
|
||||
"first-nested",
|
||||
],
|
||||
ignore: [
|
||||
"after-comment",
|
||||
"inside-single-line-block",
|
||||
],
|
||||
} ],
|
||||
"declaration-bang-space-after": "never",
|
||||
"declaration-bang-space-before": "always",
|
||||
"declaration-block-no-duplicate-properties": [ true, {
|
||||
ignore: ["consecutive-duplicates-with-different-values"],
|
||||
} ],
|
||||
"declaration-block-no-redundant-longhand-properties": true,
|
||||
"declaration-block-no-shorthand-property-overrides": true,
|
||||
"declaration-block-semicolon-newline-after": "always-multi-line",
|
||||
"declaration-block-semicolon-space-after": "always-single-line",
|
||||
"declaration-block-semicolon-space-before": "never",
|
||||
"declaration-block-trailing-semicolon": "always",
|
||||
"declaration-colon-newline-after": "always-multi-line",
|
||||
"declaration-colon-space-after": "always-single-line",
|
||||
"declaration-colon-space-before": "never",
|
||||
"declaration-empty-line-before": [ "always", {
|
||||
except: [
|
||||
"after-declaration",
|
||||
"first-nested",
|
||||
],
|
||||
ignore: [
|
||||
"after-comment",
|
||||
"inside-single-line-block",
|
||||
],
|
||||
} ],
|
||||
"font-family-no-duplicate-names": true,
|
||||
"function-calc-no-unspaced-operator": true,
|
||||
"function-comma-newline-after": "always-multi-line",
|
||||
"function-comma-space-after": "always-single-line",
|
||||
"function-comma-space-before": "never",
|
||||
"function-linear-gradient-no-nonstandard-direction": true,
|
||||
"function-max-empty-lines": 0,
|
||||
"function-name-case": "lower",
|
||||
"function-parentheses-newline-inside": "always-multi-line",
|
||||
"function-parentheses-space-inside": "never-single-line",
|
||||
"function-whitespace-after": "always",
|
||||
"indentation": 4,
|
||||
"keyframe-declaration-no-important": true,
|
||||
"length-zero-no-unit": true,
|
||||
"max-empty-lines": 1,
|
||||
"media-feature-colon-space-after": "always",
|
||||
"media-feature-colon-space-before": "never",
|
||||
"media-feature-name-case": "lower",
|
||||
"media-feature-name-no-unknown": true,
|
||||
"media-feature-parentheses-space-inside": "never",
|
||||
"media-feature-range-operator-space-after": "always",
|
||||
"media-feature-range-operator-space-before": "always",
|
||||
"media-query-list-comma-newline-after": "always-multi-line",
|
||||
"media-query-list-comma-space-after": "always-single-line",
|
||||
"media-query-list-comma-space-before": "never",
|
||||
"no-empty-source": true,
|
||||
"no-eol-whitespace": true,
|
||||
"no-extra-semicolons": true,
|
||||
"no-invalid-double-slash-comments": true,
|
||||
"no-missing-end-of-source-newline": true,
|
||||
"number-leading-zero": "never",
|
||||
"number-no-trailing-zeros": true,
|
||||
"property-case": "lower",
|
||||
"property-no-unknown": true,
|
||||
"rule-empty-line-before": [ "always-multi-line", {
|
||||
except: ["first-nested"],
|
||||
ignore: ["after-comment"],
|
||||
} ],
|
||||
"selector-attribute-brackets-space-inside": "never",
|
||||
"selector-attribute-operator-space-after": "never",
|
||||
"selector-attribute-operator-space-before": "never",
|
||||
"selector-combinator-space-after": "always",
|
||||
"selector-combinator-space-before": "always",
|
||||
"selector-descendant-combinator-no-non-space": true,
|
||||
"selector-list-comma-newline-after": "always",
|
||||
"selector-list-comma-space-before": "never",
|
||||
"selector-max-empty-lines": 0,
|
||||
"selector-pseudo-class-case": "lower",
|
||||
"selector-pseudo-class-no-unknown": true,
|
||||
"selector-pseudo-class-parentheses-space-inside": "never",
|
||||
"selector-pseudo-element-case": "lower",
|
||||
"selector-pseudo-element-colon-notation": "double",
|
||||
"selector-pseudo-element-no-unknown": true,
|
||||
"selector-type-case": "lower",
|
||||
"selector-type-no-unknown": true,
|
||||
"shorthand-property-no-redundant-values": true,
|
||||
"string-no-newline": true,
|
||||
"unit-case": "lower",
|
||||
"unit-no-unknown": true,
|
||||
"value-list-comma-newline-after": "always-multi-line",
|
||||
"value-list-comma-space-after": "always-single-line",
|
||||
"value-list-comma-space-before": "never",
|
||||
"value-list-max-empty-lines": 0,
|
||||
}
|
||||
}
|
22
LICENSE
Normal file
22
LICENSE
Normal file
@ -0,0 +1,22 @@
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2017 Matthias Kretschmann
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
|
||||
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
|
||||
DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
|
||||
OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE
|
||||
OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
|
27
README.md
Normal file
27
README.md
Normal file
@ -0,0 +1,27 @@
|
||||
# hyper-mac-pro
|
||||
|
||||
> Cause you deserve native & pro. Tab style for [Hyper](https://hyper.is/) inspired by Apple's pro apps on macOS.
|
||||
|
||||
![Screenshot](hyper-mac-pro.png)
|
||||
|
||||
This has only been tested on macOS and is not guaranteed to work on other operating systems.
|
||||
|
||||
## Usage
|
||||
|
||||
Install by adding `hyper-mac-pro` to the `plugins` property in your `~/.hyper.js`. If you're using [hpm](https://github.com/zeit/hpm):
|
||||
|
||||
```bash
|
||||
hpm install hyper-mac-pro
|
||||
```
|
||||
|
||||
## Contribute
|
||||
|
||||
1. [Fork](https://help.github.com/articles/fork-a-repo/) this repository to your own GitHub account and then [clone](https://help.github.com/articles/cloning-a-repository/) it to your local device (make sure that it's located in `~/.hyper-plugins/local`)
|
||||
2. Add `hyper-mac-pro` to the `localPlugins` property within `~/.hyper.js`
|
||||
3. Restart Hyper
|
||||
|
||||
Install dependencies with `npm install` and hack away. Run the tests using `npm test`. Running tests will happen automatically before every commit.
|
||||
|
||||
## Author
|
||||
|
||||
- Matthias Kretschmann ([@kremalicious](https://twitter.com/kremalicious))
|
BIN
hyper-mac-pro.png
Normal file
BIN
hyper-mac-pro.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 37 KiB |
47
index.js
Normal file
47
index.js
Normal file
@ -0,0 +1,47 @@
|
||||
'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
|
||||
}
|
||||
|
||||
exports.decorateConfig = config => Object.assign({}, config, {
|
||||
css: (config.css || '') + styles
|
||||
})
|
||||
|
||||
// Fix native fullscreen titlebar
|
||||
exports.decorateBrowserOptions = defaults => Object.assign({}, defaults, {
|
||||
transparent: false
|
||||
})
|
||||
|
||||
// Tabs/no tabs body class
|
||||
exports.getTabsProps = (parentProps, props) => {
|
||||
const bodyClasses = document.body.classList
|
||||
|
||||
if (props.tabs.length <= 1) {
|
||||
bodyClasses.add('no-tabs')
|
||||
} else {
|
||||
bodyClasses.remove('no-tabs')
|
||||
}
|
||||
|
||||
return Object.assign({}, parentProps, props)
|
||||
}
|
||||
|
||||
// Fullscreen body class
|
||||
exports.mapHyperState = (state, map) => {
|
||||
const bodyClasses = document.body.classList
|
||||
|
||||
if (window.innerHeight === screen.height) {
|
||||
bodyClasses.add('fullscreen')
|
||||
} else {
|
||||
bodyClasses.remove('fullscreen')
|
||||
}
|
||||
|
||||
return Object.assign({}, state, map)
|
||||
}
|
42
package.json
Normal file
42
package.json
Normal file
@ -0,0 +1,42 @@
|
||||
{
|
||||
"name": "hyper-mac-pro",
|
||||
"version": "1.0.0",
|
||||
"description": "Tab style for Hyper inspired by Apple's pro apps on macOS",
|
||||
"license": "MIT",
|
||||
"author": "Matthias Kretschmann <m@kretschmann.io>",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "xo && stylelint *.css",
|
||||
"precommit": "npm run test"
|
||||
},
|
||||
"files": [
|
||||
"index.js",
|
||||
"styles.css"
|
||||
],
|
||||
"repository": "kremalicious/hyper-mac-pro",
|
||||
"xo": {
|
||||
"esnext": true,
|
||||
"space": 4,
|
||||
"semicolon": false,
|
||||
"globals": [
|
||||
"document",
|
||||
"window",
|
||||
"screen"
|
||||
]
|
||||
},
|
||||
"keywords": [
|
||||
"hyper",
|
||||
"hyperterm",
|
||||
"theme",
|
||||
"ui",
|
||||
"native",
|
||||
"mac",
|
||||
"dark",
|
||||
"pro"
|
||||
],
|
||||
"devDependencies": {
|
||||
"husky": "^0.13.1",
|
||||
"xo": "^0.17.1",
|
||||
"stylelint": "^7.10.1"
|
||||
}
|
||||
}
|
119
styles.css
Normal file
119
styles.css
Normal file
@ -0,0 +1,119 @@
|
||||
:root {
|
||||
--tab-height: 34px;
|
||||
--tab-gradient: linear-gradient(to bottom, #898989 0%, #676767 100%);
|
||||
--tab-gradient-hover: linear-gradient(to bottom, #777 0%, #595959 100%);
|
||||
--tab-gradient-inactive: linear-gradient(to bottom, #7d7d7d 0%, #5e5e5e 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;
|
||||
border-top: 1px solid #cfcfcf;
|
||||
}
|
||||
|
||||
.tabs_nav {
|
||||
background: var(--tab-gradient-inactive);
|
||||
height: var(--tab-height);
|
||||
line-height: var(--tab-height);
|
||||
}
|
||||
|
||||
.no-tabs .tabs_nav {
|
||||
background: var(--tab-gradient);
|
||||
}
|
||||
|
||||
.tabs_list {
|
||||
max-height: var(--tab-height);
|
||||
}
|
||||
|
||||
.fullscreen .tabs_list {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.tabs_nav .tab_tab {
|
||||
background: var(--tab-gradient-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-gradient);
|
||||
}
|
||||
|
||||
.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-gradient-hover);
|
||||
}
|
||||
|
||||
.tabs_nav .tabs_list .tab_active {
|
||||
background: var(--tab-gradient);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.tabs_nav .tabs_borderShim {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tabs_nav .tabs_list .tab_icon {
|
||||
z-index: 2;
|
||||
right: auto;
|
||||
left: 7px;
|
||||
top: 11px;
|
||||
color: var(--tab-text-color);
|
||||
border-radius: 3px;
|
||||
filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .15));
|
||||
}
|
||||
|
||||
.tabs_nav .tabs_list .tab_icon:hover {
|
||||
color: var(--tab-text-color);
|
||||
padding: 4px;
|
||||
background-color: #676767;
|
||||
filter: none;
|
||||
}
|
||||
|
||||
.tabs_nav .tabs_list .tab_icon:active {
|
||||
transition: none;
|
||||
background-color: #5e5e5e;
|
||||
}
|
||||
|
||||
.terms_terms {
|
||||
margin-top: var(--tab-height);
|
||||
border-top: 1px solid #181818;
|
||||
}
|
Loading…
Reference in New Issue
Block a user