├── hyperterm-mactabs.png ├── package.json ├── README.md ├── LICENSE └── index.js /hyperterm-mactabs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/insanityfarm/hyperterm-mactabs/HEAD/hyperterm-mactabs.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hyperterm-mactabs", 3 | "version": "1.0.7", 4 | "description": "Better tab styles for Hyper.app on macOS", 5 | "main": "index.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "git+ssh://git@github.com/insanityfarm/hyperterm-mactabs.git" 9 | }, 10 | "scripts": { 11 | "test": "echo \"Error: no test specified\" && exit 1" 12 | }, 13 | "author": "Parker Smith ", 14 | "bugs": { 15 | "url": "https://github.com/insanityfarm/hyperterm-mactabs/issues" 16 | }, 17 | "license": "MIT", 18 | "homepage": "https://github.com/insanityfarm/hyperterm-mactabs#readme" 19 | } 20 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | hyperterm-mactabs 2 | ======================== 3 | 4 | Tab style enhancements for [Hyper.app] inspired by macOS, featuring subtle gradients, drop shadows, and the Lucida Grande typeface. Tab close buttons have been moved to the left side for consistency with other Mac programs. This plugin is intended to be compatible with other themes and will attempt to override any tab styles implemented by other plugins. It has only been tested on macOS and cannot be guaranteed to work on other platforms. 5 | 6 | ![Screenshot](hyperterm-mactabs.png) 7 | 8 | How to use 9 | ---------- 10 | 11 | Add `hyperterm-mactabs` to `plugins` in `~/.hyper.js`. Hyper.app should automatically load the plugin. If it does not, perform a "Full Reload" for the change to take effect. 12 | 13 | [Hyper.app]: https://hyper.is/ 14 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Parker Smith 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 16 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 17 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 18 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, 19 | DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR 20 | OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE 21 | OR OTHER DEALINGS IN THE SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | const tabShadowSize = '15px'; 4 | const css = ` 5 | .hyperterm_main { 6 | border: none !important; 7 | } 8 | .header_header { 9 | overflow: hidden !important; 10 | top: 0 !important; 11 | left: 0 !important; 12 | right: 0 !important; 13 | } 14 | .tabs_nav { 15 | background: linear-gradient(to bottom, #ececec 0%,#e2e2e2 100%) !important; 16 | } 17 | .tabs_nav .tabs_title { 18 | height: 34px !important; 19 | border-bottom: 1px solid #cacaca !important; 20 | } 21 | .tabs_nav .tabs_title, .tabs_nav .tab_tab { 22 | color: #333 !important; 23 | font-family: "Lucida Grande" !important; 24 | border-color: #cacaca !important; 25 | background: linear-gradient(to bottom, #ececec 0%,#e2e2e2 100%) !important; 26 | } 27 | .tabs_nav .tab_tab:not(.tab_active) { 28 | color: #888 !important; 29 | border-left: 1px solid #ddd !important; 30 | } 31 | .tabs_nav .tab_tab.tab_first:after, .tabs_nav .tab_tab:last-of-type:after { 32 | content: "" !important; 33 | display: block !important; 34 | background: linear-gradient(to bottom, #ececec 0%,#e2e2e2 100%) !important; 35 | width: 256px !important; 36 | position: absolute !important; 37 | top: 0 !important; 38 | bottom: 1px !important; 39 | z-index: 1 !important; 40 | } 41 | .tabs_nav .tab_tab.tab_first:after { 42 | left: -257px !important; 43 | right: auto !important; 44 | } 45 | .tabs_nav .tab_tab:last-of-type:after { 46 | right: -257px !important; 47 | left: auto !important; 48 | } 49 | .tabs_nav .tab_tab:last_of_type.tab_active:after { 50 | right: -256px !important; 51 | } 52 | .tabs_nav .tab_tab.tab_first:not(.tab_active):not(:hover) { 53 | border-left: 1px solid transparent !important; 54 | } 55 | .tabs_nav .tab_tab:not(.tab_active):hover { 56 | color: #333 !important; 57 | background: linear-gradient(to bottom, #efefef 0%,#eaeaea 100%) !important; 58 | } 59 | .tabs_nav .tabs_list .tab_active { 60 | background: linear-gradient(to bottom, #fff 0%,#f3f3f3 100%) !important; 61 | } 62 | .tabs_nav .tabs_list .tab_active:before { 63 | border-bottom-color: #f3f3f3 !important; 64 | border-bottom-color: #e6e6e6 !important; 65 | } 66 | .tabs_nav .tabs_list .tab_active .tab_text { 67 | border-right: none !important; 68 | border-right: 1px solid transparent !important; 69 | box-shadow: 0 0 ${tabShadowSize} 0 rgba(0,0,0,0.1) !important; 70 | z-index: 1 !important; 71 | } 72 | .tabs_nav .tabs_list .tab_icon { 73 | right: auto !important; 74 | left: 7px !important; 75 | z-index: 2 !important; 76 | color: #333 !important; 77 | } 78 | .tabs_nav .tabs_list .tab_icon:hover { 79 | color: #fff !important; 80 | padding: 4px !important; 81 | background-color: #aaa !important; 82 | } 83 | .tabs_nav .tabs_borderShim { 84 | border-color: #ccc !important; 85 | } 86 | `; 87 | exports.decorateConfig = config => { 88 | return Object.assign({}, config, { 89 | css: (config.css || '') + css 90 | }); 91 | } 92 | exports.decorateBrowserOptions = defaults => { 93 | return Object.assign({}, defaults, { 94 | titleBarStyle: '', 95 | transparent: true, 96 | frame: false 97 | }); 98 | } 99 | --------------------------------------------------------------------------------