├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── CONTRIBUTING.md ├── ISSUE_TEMPLATE.md ├── LICENSE.md ├── PULL_REQUEST_TEMPLATE.md ├── README.md ├── assets ├── fonts │ └── Roboto │ │ ├── roboto-black-webfont.woff2 │ │ ├── roboto-blackitalic-webfont.woff2 │ │ ├── roboto-bold-webfont.woff2 │ │ ├── roboto-bolditalic-webfont.woff2 │ │ ├── roboto-italic-webfont.woff2 │ │ ├── roboto-light-webfont.woff2 │ │ ├── roboto-lightitalic-webfont.woff2 │ │ ├── roboto-medium-webfont.woff2 │ │ ├── roboto-mediumitalic-webfont.woff2 │ │ ├── roboto-regular-webfont.woff2 │ │ ├── roboto-thin-webfont.woff2 │ │ ├── roboto-thinitalic-webfont.woff2 │ │ ├── robotocondensed-bold-webfont.woff2 │ │ ├── robotocondensed-bolditalic-webfont.woff2 │ │ ├── robotocondensed-italic-webfont.woff2 │ │ ├── robotocondensed-light-webfont.woff2 │ │ ├── robotocondensed-lightitalic-webfont.woff2 │ │ └── robotocondensed-regular-webfont.woff2 └── svg │ ├── arrow-drop-down-white.svg │ └── arrow-drop-down.svg ├── index.less ├── lib ├── color-templates.json ├── colors │ ├── build-color-settings.js │ └── index.js ├── fonts │ ├── index.js │ └── set-font-size.js ├── helper │ ├── to-camel-case.js │ ├── toggle-class-name.js │ └── write-config-file.js ├── main.js ├── tab-bar │ └── index.js ├── tree-view │ └── index.js └── user-interface │ └── index.js ├── package.json ├── spec ├── colors │ └── build-color-settings-spec.js ├── fonts │ └── set-font-size-spec.js └── helper │ ├── to-camel-case-spec.js │ └── toggle-class-name-spec.js └── styles ├── alert.less ├── atom.less ├── autocomplete.less ├── background-tips.less ├── buttons.less ├── dock.less ├── dropdowns.less ├── editor.less ├── fonts └── roboto.less ├── fuzzy-finder.less ├── git.less ├── github-panel.less ├── incompatible-packages.less ├── lists.less ├── md-colors.less ├── messages.less ├── nav.less ├── notifications.less ├── overlays.less ├── packages ├── activate-power-mode.less ├── busy-signal.less ├── linter.less ├── main.less ├── nuclide.less ├── open-recent.less ├── platformio.less ├── remote-ftp.less ├── terminal.less ├── tool-bar.less └── vim-mode-plus.less ├── panels.less ├── panes.less ├── progress.less ├── search-replace.less ├── settings ├── checkbox.less ├── main.less ├── package.less ├── radio.less └── table.less ├── sites.less ├── spinner.less ├── tabs.less ├── text.less ├── title-bar.less ├── tooltips.less ├── tree-view.less ├── ui-mixins.less ├── ui-variables.less └── utilities.less /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 4 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | 14 | [package.json] 15 | indent_size = 2 16 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: 'babel-eslint', 4 | parserOptions: { 5 | sourceType: 'module', 6 | }, 7 | extends: 'airbnb', 8 | env: { 9 | browser: true, 10 | jasmine: true, 11 | }, 12 | globals: { 13 | atom: false, 14 | Color: false, 15 | waitsForPromise: false, 16 | }, 17 | rules: { 18 | indent: ['error', 4], 19 | }, 20 | }; 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .npm-debug* 3 | styles/user-settings.less 4 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | ![](http://i.imgur.com/7C2H2mw.png) 2 | --- 3 | # Contributing to Atom Material UI 4 | 5 | Some of this content comes from Atom's Contributing guidelines. Please, don't be intimidated, this is just a *guideline*. All bug reports, feature requests, and questions are **always** welcome. 6 | 7 | ## Code contributions 8 | If you want to get your hands dirty and contribute with some code, you should fork this repository, make your changes, and then send in a pull request. 9 | 10 | ```shell 11 | git clone 12 | cd atom-material-ui/ 13 | apm link -d && npm install 14 | atom -d . 15 | ``` 16 | 17 | I recommend installing the package [editorconfig](https://atom.io/packages/editorconfig) so you don't have to change your global settings for indentation. 18 | 19 | ### Stylesheets 20 | 21 | Use four spaces per indent and leave an empty line between a selector's properties and a nested selector. Also leave a empty line between selectors. The white space helps with readability: 22 | 23 | ```scss 24 | .selector { 25 | property: value; 26 | 27 | .nested { 28 | property: value; 29 | } 30 | } 31 | 32 | .another-selector { 33 | property: value; 34 | } 35 | ``` 36 | 37 | Don't abuse nesting or we'll all regret it in the future. Having `!important` flags all over to fight specificity is nasty. Try using three levels at the most. `!important` is only allowed if you need to override a package's inline styles. 38 | 39 | Don't be afraid to include another level if you want to target a `&.className`: 40 | 41 | ```scss 42 | .selector { 43 | property: value; 44 | 45 | &.className { 46 | property: value; 47 | } 48 | } 49 | ``` 50 | 51 | Using BEM(ish) syntax nesting is OK: 52 | 53 | ```scss 54 | .block { 55 | &__element { 56 | &__sub-element { 57 | &--modifier { 58 | property: value; 59 | } 60 | } 61 | } 62 | } 63 | ``` 64 | 65 | That unholy pyramid doesn't look great, but the output CSS isn't that hard to override. 66 | 67 | ### JavaScript 68 | 69 | In a nutshell, we're following Airbnb's JavaScript style guide, except we use four spaces per indent. Make sure to check the [style guide](https://github.com/airbnb/javascript). Also, we have ESLint to catch bugs and style errors, so make sure to install it along with `linter` and `linter-eslint`. 70 | 71 | ## Trying new features 72 | 73 | ### Getting the development version 74 | 75 | If you'd like to test new features and hunt bugs, follow these simple steps to get the latest (development) version. 76 | 77 | ```shell 78 | git clone git@github.com:silvestreh/atom-material-ui.git 79 | cd atom-material-ui/ 80 | apm link -d && npm install 81 | ``` 82 | 83 | You'll have to run Atom in *developer mode* to test the theme. To do so, open a terminal and run: 84 | 85 | ```shell 86 | atom -d . 87 | ``` 88 | 89 | This way both, the APM published version and the development version, can coexist. 90 | 91 | ### Reporting a bug 92 | 93 | Before opening an issue please search through the existing ones, even those that are marked as closed. Also, please take these into account before submitting an issue: 94 | 95 | - **Which version of Atom are you using?** You can get the exact version by running `atom -v` in your terminal, or by starting Atom and running the Application: About command from the Command Palette. 96 | - **What's the name and version of the OS you're using?** 97 | - **Which packages do you have installed?** You can get that list by running `apm list --installed` in a terminal. 98 | - **Are you using local styles in your user stylesheets?** If so, provide its contents, preferably in a code block or with a link to a gist. 99 | -------------------------------------------------------------------------------- /ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 6 | 7 | [Short description of problem here] 8 | 9 | **Reproduction Steps:** 10 | 11 | 1. [First Step] 12 | 2. [Second Step] 13 | 3. [Other Steps...] 14 | 15 | **Expected behavior:** 16 | 17 | [Describe expected behavior here] 18 | 19 | **Observed behavior:** 20 | 21 | [Describe observed behavior here] 22 | 23 | **Screenshots and GIFs** 24 | 25 | ![Screenshots and GIFs which follow reproduction steps to demonstrate the problem](url) 26 | 27 | **Atom version:** [Enter Atom version here] 28 | **OS and version:** [Enter OS name and version here] 29 | 30 | **Installed packages:** 31 | 32 | [List of installed packages here] 33 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright (c) 2017 Silvestre Herrera. 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining 4 | a copy of this software and associated documentation files (the 5 | "Software"), to deal in the Software without restriction, including 6 | without limitation the rights to use, copy, modify, merge, publish, 7 | distribute, sublicense, and/or sell copies of the Software, and to 8 | permit persons to whom the Software is furnished to do so, subject to 9 | the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be 12 | included in all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 17 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 18 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 19 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 20 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ### Requirements 2 | 3 | * Filling out the template is required. Any pull request that does not include enough information to be reviewed in a timely manner may be closed at the maintainers' discretion. 4 | * All new code requires tests to ensure against regressions 5 | 6 | ### Description of the Change 7 | 8 | 13 | 14 | ### Benefits 15 | 16 | 17 | 18 | ### Possible Drawbacks 19 | 20 | 21 | 22 | ### Applicable Issues 23 | 24 | 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![Build Status](https://img.shields.io/travis/atom-material/atom-material-ui.svg?style=flat-square)](https://travis-ci.org/atom-material/atom-material-ui) 2 | [![apm](https://img.shields.io/apm/dm/atom-material-ui.svg?style=flat-square)](https://atom.io/packages/atom-material-ui) 3 | [![apm](https://img.shields.io/apm/v/atom-material-ui.svg?style=flat-square)](https://atom.io/packages/atom-material-ui) 4 | [![apm](https://img.shields.io/apm/l/atom-material-ui.svg?style=flat-square)]() 5 | [![Gitter](https://img.shields.io/gitter/room/silvestreh/atom-material-ui.svg?style=flat-square)](https://gitter.im/silvestreh/atom-material-ui) 6 | [![Support AMU](https://img.shields.io/badge/donate-on%20paypal-green.svg?style=flat-square)](https://www.paypal.me/silvestreh) 7 | 8 | ![AMU](http://i.imgur.com/7C2H2mw.png) 9 | --- 10 | 11 | A dynamic UI theme for Atom that (kinda) follows Google's Material Design Guidelines. Best with [Atom Material Syntax](https://github.com/atom-material/atom-material-syntax). 12 | 13 | Inspired by Mattia Astorino's [SublimeText theme](https://github.com/equinusocio/material-theme). 14 | 15 | # Installation 16 | 17 | Fire up a console and type: 18 | 19 | ```shell 20 | apm install atom-material-ui 21 | ``` 22 | 23 | Or, inside Atom's settings select Install and then search for this package. 24 | 25 | # Configuration 26 | 27 | Atom Material UI supports different accent colors. To change it, go to Settings > Themes and click the cog icon next to the theme selector. 28 | 29 | ![](http://i.imgur.com/pf3oiZr.png) 30 | 31 | You'll find the color picker there. 32 | 33 | # Screenshots 34 | 35 | Here's the obligatory screenshot. 36 | 37 | ### With [Atom Material Syntax](https://atom.io/packages/atom-material-syntax) 38 | 39 | ```shell 40 | apm install atom-material-syntax 41 | ``` 42 | 43 | ![](http://i.imgur.com/ExPYmJY.png) 44 | 45 | ### With [Light syntax](https://atom.io/packages/atom-material-syntax-light) theme variant 46 | 47 | ```shell 48 | apm install atom-material-syntax-light 49 | ``` 50 | 51 | ![](http://i.imgur.com/q1o78sX.png) 52 | 53 | ### With [Dark syntax](https://atom.io/packages/atom-material-syntax-dark) theme variant 54 | 55 | ```shell 56 | apm install atom-material-syntax-dark 57 | ``` 58 | 59 | ![](http://i.imgur.com/orhIvwS.png) 60 | 61 | # Contributing 62 | 63 | Please check the [CONTRIBUTING.md](https://github.com/atom-material/atom-material-ui/blob/master/CONTRIBUTING.md) file. 64 | 65 | # Extra 66 | 67 | ![](http://i.imgur.com/0tHORB1.png) 68 | 69 | You can download the redesigned icon from [dropbox](https://www.dropbox.com/s/8gyn40sw95626dx/Atom-MD-Icon.zip?dl=0). It's a ZIP file containing multiple resolution PNGs, ICNS and ICO formats. Windows ICO converted by Akshit Tripathi. 70 | 71 | # License 72 | Atom Material UI is licensed under MIT. 73 | 74 | View the license file [here](https://github.com/atom-material/atom-material-ui/blob/master/LICENSE.md) 75 | -------------------------------------------------------------------------------- /assets/fonts/Roboto/roboto-black-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atom-material/atom-material-ui/7273c52f49be7b97df5adc4e83732e5541a41471/assets/fonts/Roboto/roboto-black-webfont.woff2 -------------------------------------------------------------------------------- /assets/fonts/Roboto/roboto-blackitalic-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atom-material/atom-material-ui/7273c52f49be7b97df5adc4e83732e5541a41471/assets/fonts/Roboto/roboto-blackitalic-webfont.woff2 -------------------------------------------------------------------------------- /assets/fonts/Roboto/roboto-bold-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atom-material/atom-material-ui/7273c52f49be7b97df5adc4e83732e5541a41471/assets/fonts/Roboto/roboto-bold-webfont.woff2 -------------------------------------------------------------------------------- /assets/fonts/Roboto/roboto-bolditalic-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atom-material/atom-material-ui/7273c52f49be7b97df5adc4e83732e5541a41471/assets/fonts/Roboto/roboto-bolditalic-webfont.woff2 -------------------------------------------------------------------------------- /assets/fonts/Roboto/roboto-italic-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atom-material/atom-material-ui/7273c52f49be7b97df5adc4e83732e5541a41471/assets/fonts/Roboto/roboto-italic-webfont.woff2 -------------------------------------------------------------------------------- /assets/fonts/Roboto/roboto-light-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atom-material/atom-material-ui/7273c52f49be7b97df5adc4e83732e5541a41471/assets/fonts/Roboto/roboto-light-webfont.woff2 -------------------------------------------------------------------------------- /assets/fonts/Roboto/roboto-lightitalic-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atom-material/atom-material-ui/7273c52f49be7b97df5adc4e83732e5541a41471/assets/fonts/Roboto/roboto-lightitalic-webfont.woff2 -------------------------------------------------------------------------------- /assets/fonts/Roboto/roboto-medium-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atom-material/atom-material-ui/7273c52f49be7b97df5adc4e83732e5541a41471/assets/fonts/Roboto/roboto-medium-webfont.woff2 -------------------------------------------------------------------------------- /assets/fonts/Roboto/roboto-mediumitalic-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atom-material/atom-material-ui/7273c52f49be7b97df5adc4e83732e5541a41471/assets/fonts/Roboto/roboto-mediumitalic-webfont.woff2 -------------------------------------------------------------------------------- /assets/fonts/Roboto/roboto-regular-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atom-material/atom-material-ui/7273c52f49be7b97df5adc4e83732e5541a41471/assets/fonts/Roboto/roboto-regular-webfont.woff2 -------------------------------------------------------------------------------- /assets/fonts/Roboto/roboto-thin-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atom-material/atom-material-ui/7273c52f49be7b97df5adc4e83732e5541a41471/assets/fonts/Roboto/roboto-thin-webfont.woff2 -------------------------------------------------------------------------------- /assets/fonts/Roboto/roboto-thinitalic-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atom-material/atom-material-ui/7273c52f49be7b97df5adc4e83732e5541a41471/assets/fonts/Roboto/roboto-thinitalic-webfont.woff2 -------------------------------------------------------------------------------- /assets/fonts/Roboto/robotocondensed-bold-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atom-material/atom-material-ui/7273c52f49be7b97df5adc4e83732e5541a41471/assets/fonts/Roboto/robotocondensed-bold-webfont.woff2 -------------------------------------------------------------------------------- /assets/fonts/Roboto/robotocondensed-bolditalic-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atom-material/atom-material-ui/7273c52f49be7b97df5adc4e83732e5541a41471/assets/fonts/Roboto/robotocondensed-bolditalic-webfont.woff2 -------------------------------------------------------------------------------- /assets/fonts/Roboto/robotocondensed-italic-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atom-material/atom-material-ui/7273c52f49be7b97df5adc4e83732e5541a41471/assets/fonts/Roboto/robotocondensed-italic-webfont.woff2 -------------------------------------------------------------------------------- /assets/fonts/Roboto/robotocondensed-light-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atom-material/atom-material-ui/7273c52f49be7b97df5adc4e83732e5541a41471/assets/fonts/Roboto/robotocondensed-light-webfont.woff2 -------------------------------------------------------------------------------- /assets/fonts/Roboto/robotocondensed-lightitalic-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atom-material/atom-material-ui/7273c52f49be7b97df5adc4e83732e5541a41471/assets/fonts/Roboto/robotocondensed-lightitalic-webfont.woff2 -------------------------------------------------------------------------------- /assets/fonts/Roboto/robotocondensed-regular-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atom-material/atom-material-ui/7273c52f49be7b97df5adc4e83732e5541a41471/assets/fonts/Roboto/robotocondensed-regular-webfont.woff2 -------------------------------------------------------------------------------- /assets/svg/arrow-drop-down-white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /assets/svg/arrow-drop-down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /index.less: -------------------------------------------------------------------------------- 1 | // Atom Material UI theme 2 | 3 | @import "styles/ui-variables"; 4 | @import "styles/ui-mixins"; 5 | 6 | @import "styles/alert"; 7 | @import "styles/atom"; 8 | @import "styles/autocomplete"; 9 | @import "styles/background-tips"; 10 | @import "styles/buttons"; 11 | @import "styles/dock"; 12 | @import "styles/editor"; 13 | @import "styles/fuzzy-finder"; 14 | @import "styles/git"; 15 | @import "styles/github-panel"; 16 | @import "styles/incompatible-packages"; 17 | @import "styles/lists"; 18 | @import "styles/messages"; 19 | @import "styles/nav"; 20 | @import "styles/notifications"; 21 | @import "styles/overlays"; 22 | @import "styles/panels"; 23 | @import "styles/panes"; 24 | @import "styles/progress"; 25 | @import "styles/search-replace"; 26 | @import "styles/sites"; 27 | @import "styles/spinner"; 28 | @import "styles/tabs"; 29 | @import "styles/text"; 30 | @import "styles/title-bar"; 31 | @import "styles/tooltips"; 32 | @import "styles/tree-view"; 33 | @import "styles/utilities"; 34 | @import "styles/settings/main"; 35 | @import "styles/packages/main"; 36 | 37 | :root { 38 | font-size: @font-size; 39 | } 40 | -------------------------------------------------------------------------------- /lib/color-templates.json: -------------------------------------------------------------------------------- 1 | { 2 | "amber": { 3 | "base": "#FFD54F", 4 | "accent": "#A28832" 5 | }, 6 | "blue": { 7 | "base": "#2196F3", 8 | "accent": "#FFFFFF" 9 | }, 10 | "blueGrey": { 11 | "base": "#607D8B", 12 | "accent": "#FFFFFF" 13 | }, 14 | "brown": { 15 | "base": "#795548", 16 | "accent": "#FFFFFF" 17 | }, 18 | "cyan": { 19 | "base": "#80DEEA", 20 | "accent": "#528C94" 21 | }, 22 | "green": { 23 | "base": "#AAD875", 24 | "accent": "#6F8853" 25 | }, 26 | "grey": { 27 | "base": "#7E7E7E", 28 | "accent": "#FFFFFF" 29 | }, 30 | "indigo": { 31 | "base": "#5C6BC0", 32 | "accent": "#FFFFFF" 33 | }, 34 | "lime": { 35 | "base": "#CDDC39", 36 | "accent": "#737F10" 37 | }, 38 | "orange": { 39 | "base": "#FFA726", 40 | "accent": "#9F6918" 41 | }, 42 | "pink": { 43 | "base": "#EC407A", 44 | "accent": "#46FFC1" 45 | }, 46 | "purple": { 47 | "base": "#7E57C2", 48 | "accent": "#B0E457" 49 | }, 50 | "red": { 51 | "base": "#EF5350", 52 | "accent": "#59FCFF" 53 | }, 54 | "teal": { 55 | "base": "#009688", 56 | "accent": "#FFFFFF" 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /lib/colors/build-color-settings.js: -------------------------------------------------------------------------------- 1 | 'use babel'; 2 | 3 | import tinycolor from 'tinycolor2'; 4 | 5 | export default function buildColorSettings(baseColor = '#009688', accentColor = '#FFFFFF') { 6 | const newAccent = (typeof accentColor === 'object') ? 7 | accentColor.toHexString() : 8 | accentColor; 9 | 10 | const newBase = (typeof baseColor === 'object') ? 11 | baseColor.toHexString() : 12 | baseColor; 13 | 14 | const luminance = tinycolor(newBase).getLuminance(); 15 | let accentTextColor = '#666'; 16 | 17 | if (luminance <= 0.3 && luminance > 0.22) { 18 | accentTextColor = 'rgba(255,255,255,0.9)'; 19 | } else if (luminance <= 0.22) { 20 | accentTextColor = 'rgba(255,255,255,0.8)'; 21 | } else if (luminance > 0.3) { 22 | accentTextColor = 'rgba(0,0,0,0.6)'; 23 | } 24 | 25 | return ` 26 | @accent-color: ${newAccent}; 27 | @accent-text-color: ${accentTextColor}; 28 | @base-color: ${newBase}; 29 | `; 30 | } 31 | -------------------------------------------------------------------------------- /lib/colors/index.js: -------------------------------------------------------------------------------- 1 | 'use babel'; 2 | 3 | import tinycolor from 'tinycolor2'; 4 | import writeConfigFile from '../helper/write-config-file'; 5 | import toggleClassName from '../helper/toggle-class-name'; 6 | import toCamelCase from '../helper/to-camel-case'; 7 | import colorTemplates from '../color-templates.json'; 8 | import buildColorSettings from './build-color-settings'; 9 | 10 | atom.config.onDidChange('atom-material-ui.colors.abaseColor', ({ newValue }) => { 11 | if (atom.config.get('atom-material-ui.colors.genAccent')) { 12 | const accentColor = tinycolor(newValue.toHexString()) 13 | .complement() 14 | .saturate(20) 15 | .lighten(5); 16 | 17 | return atom.config.set('atom-material-ui.colors.accentColor', accentColor.toRgbString()); 18 | } 19 | 20 | return writeConfigFile( 21 | buildColorSettings( 22 | newValue, atom.config.get('atom-material-ui.colors.accentColor'), 23 | ), 24 | true, 25 | ); 26 | }); 27 | 28 | atom.config.onDidChange('atom-material-ui.colors.predefinedColor', (value) => { 29 | const newValue = toCamelCase(value.newValue); 30 | 31 | atom.config.set('atom-material-ui.colors.abaseColor', colorTemplates[newValue].base); 32 | atom.config.set('atom-material-ui.colors.accentColor', colorTemplates[newValue].accent); 33 | }); 34 | 35 | atom.config.onDidChange('atom-material-ui.colors.accentColor', ({ newValue }) => ( 36 | writeConfigFile( 37 | buildColorSettings( 38 | atom.config.get('atom-material-ui.colors.abaseColor'), newValue, 39 | ), 40 | true, 41 | ) 42 | )); 43 | 44 | atom.config.observe('atom-material-ui.colors.paintCursor', value => toggleClassName('amu-paint-cursor', value)); 45 | -------------------------------------------------------------------------------- /lib/fonts/index.js: -------------------------------------------------------------------------------- 1 | 'use babel'; 2 | 3 | import setFontSize from './set-font-size'; 4 | 5 | atom.config.observe('atom-material-ui.fonts.fontSize', size => setFontSize(size)); 6 | -------------------------------------------------------------------------------- /lib/fonts/set-font-size.js: -------------------------------------------------------------------------------- 1 | 'use babel'; 2 | 3 | export default function setFontSize(size) { 4 | const fontSize = size ? `${size}px` : null; 5 | document.documentElement.style.fontSize = fontSize; 6 | } 7 | -------------------------------------------------------------------------------- /lib/helper/to-camel-case.js: -------------------------------------------------------------------------------- 1 | 'use babel'; 2 | 3 | export default function toCamelCase(str) { 4 | return str 5 | .replace(/-/g, ' ') 6 | .replace(/_/g, ' ') 7 | .replace(/\s(.)/g, $1 => $1.toUpperCase()) 8 | .replace(/\s/g, '') 9 | .replace(/^(.)/, $1 => $1.toLowerCase()); 10 | } 11 | -------------------------------------------------------------------------------- /lib/helper/toggle-class-name.js: -------------------------------------------------------------------------------- 1 | 'use babel'; 2 | 3 | export default function toggleClassName(className, mustAddClass) { 4 | const root = document.documentElement; 5 | 6 | if (mustAddClass) { 7 | root.classList.add(className); 8 | } else { 9 | root.classList.remove(className); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /lib/helper/write-config-file.js: -------------------------------------------------------------------------------- 1 | 'use babel'; 2 | 3 | import fs from 'fs'; 4 | 5 | function writeConfigFile(content, reload = false) { 6 | return new Promise((resolve, reject) => { 7 | if (!content) return reject({ success: false, error: 'No content given' }); 8 | 9 | fs.writeFile(`${__dirname}/../../styles/user-settings.less`, content, 'utf8', (error) => { 10 | if (error) return reject({ success: false, error: 'Failed to write settings file' }); 11 | 12 | if (reload) { 13 | const amuPackage = atom.packages.getLoadedPackage('atom-material-ui'); 14 | 15 | if (amuPackage) { 16 | amuPackage.deactivate(); 17 | setImmediate(() => amuPackage.activate()); 18 | } 19 | } 20 | 21 | return resolve({ success: true, error: null }); 22 | }); 23 | 24 | return resolve({ success: true, error: null }); 25 | }); 26 | } 27 | 28 | export default writeConfigFile; 29 | -------------------------------------------------------------------------------- /lib/main.js: -------------------------------------------------------------------------------- 1 | 'use babel'; 2 | 3 | import setFontSize from './fonts/set-font-size'; 4 | import toggleClassName from './helper/toggle-class-name'; 5 | import './colors'; 6 | import './fonts'; 7 | import './tab-bar'; 8 | import './tree-view'; 9 | import './user-interface'; 10 | 11 | const classNames = { 12 | // Fonts 13 | 'amu-paint-cursor': atom.config.get('atom-material-ui.colors.paintCursor'), 14 | 15 | // Tabs settings 16 | 'amu-compact-tab-bar': atom.config.get('atom-material-ui.tabs.compactTabs'), 17 | 'amu-no-tab-min-width': atom.config.get('atom-material-ui.tabs.noTabMinWidth'), 18 | 'amu-tinted-tab-bar': atom.config.get('atom-material-ui.tabs.tintedTabBar'), 19 | 'amu-stretched-tabs': atom.config.get('atom-material-ui.tabs.stretchedTabs'), 20 | 21 | // General UI settings 22 | 'amu-use-animations': atom.config.get('atom-material-ui.ui.useAnimations'), 23 | 'amu-panel-contrast': atom.config.get('atom-material-ui.ui.panelContrast'), 24 | 'amu-panel-shadows': atom.config.get('atom-material-ui.ui.panelShadows'), 25 | }; 26 | 27 | export default { 28 | activate() { 29 | Object.keys(classNames).forEach(className => ( 30 | toggleClassName(className, classNames[className])), 31 | ); 32 | 33 | setFontSize(atom.config.get('atom-material-ui.fonts.fontSize')); 34 | }, 35 | 36 | deactivate() { 37 | // Reset all the things! 38 | Object.keys(classNames).forEach(className => toggleClassName(className, false)); 39 | setFontSize(null); 40 | }, 41 | }; 42 | -------------------------------------------------------------------------------- /lib/tab-bar/index.js: -------------------------------------------------------------------------------- 1 | 'use babel'; 2 | 3 | import toggleClassName from '../helper/toggle-class-name'; 4 | 5 | atom.config.observe('atom-material-ui.tabs.tintedTabBar', (value) => { 6 | toggleClassName('amu-tinted-tab-bar', value); 7 | }); 8 | 9 | atom.config.observe('atom-material-ui.tabs.compactTabs', (value) => { 10 | toggleClassName('amu-compact-tab-bar', value); 11 | }); 12 | 13 | atom.config.observe('atom-material-ui.tabs.noTabMinWidth', (value) => { 14 | toggleClassName('amu-no-tab-min-width', value); 15 | }); 16 | 17 | atom.config.observe('atom-material-ui.tabs.stretchedTabs', (value) => { 18 | toggleClassName('amu-stretched-tabs', value); 19 | }); 20 | -------------------------------------------------------------------------------- /lib/tree-view/index.js: -------------------------------------------------------------------------------- 1 | 'use babel'; 2 | 3 | import toggleClassName from '../helper/toggle-class-name'; 4 | 5 | atom.config.observe('atom-material-ui.treeView.compactTreeView', (value) => { 6 | toggleClassName('amu-compact-tree-view', value); 7 | }); 8 | -------------------------------------------------------------------------------- /lib/user-interface/index.js: -------------------------------------------------------------------------------- 1 | 'use babel'; 2 | 3 | import toggleClassName from '../helper/toggle-class-name'; 4 | 5 | atom.config.observe('atom-material-ui.ui.panelShadows', (value) => { 6 | toggleClassName('amu-panel-shadows', value); 7 | }); 8 | 9 | atom.config.observe('atom-material-ui.ui.panelContrast', (value) => { 10 | toggleClassName('amu-panel-contrast', value); 11 | }); 12 | 13 | atom.config.observe('atom-material-ui.ui.useAnimations', (value) => { 14 | toggleClassName('amu-use-animations', value); 15 | }); 16 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "atom-material-ui", 3 | "theme": "ui", 4 | "version": "2.1.3", 5 | "description": "A dynamic UI theme for Atom that follows Google's Material Design Guidelines", 6 | "main": "./lib/main", 7 | "keywords": [ 8 | "ui", 9 | "theme", 10 | "material", 11 | "md", 12 | "dynamic", 13 | "adaptive", 14 | "adapt to syntax", 15 | "material design" 16 | ], 17 | "repository": "https://github.com/atom-material/atom-material-ui", 18 | "license": "MIT", 19 | "engines": { 20 | "atom": ">=1.17.0 <2.0.0" 21 | }, 22 | "dependencies": { 23 | "tinycolor2": "1.3.0" 24 | }, 25 | "devDependencies": { 26 | "babel-eslint": "^7.1.1", 27 | "eslint": "^3.17.1", 28 | "eslint-config-airbnb": "^14.1.0", 29 | "eslint-plugin-import": "^2.2.0", 30 | "eslint-plugin-jsx-a11y": "^4.0.0", 31 | "eslint-plugin-react": "^6.10.0" 32 | }, 33 | "configSchema": { 34 | "colors": { 35 | "order": 1, 36 | "type": "object", 37 | "title": "Colors", 38 | "properties": { 39 | "abaseColor": { 40 | "title": "Primary color", 41 | "description": "Changes the main theme color.", 42 | "type": "color", 43 | "default": "#009688" 44 | }, 45 | "accentColor": { 46 | "title": "Secondary color", 47 | "description": "This color is used as an accent to the Primary Color.", 48 | "type": "color", 49 | "default": "#FFFFFF" 50 | }, 51 | "genAccent": { 52 | "title": "Generate complementary secondary color", 53 | "description": "Generates a complementary color based on your selected Primary Color.", 54 | "type": "boolean", 55 | "default": false 56 | }, 57 | "predefinedColor": { 58 | "title": "Predefined colors", 59 | "description": "Pick a predefined color from the Material Design palette. If you change the Primary Color it will override this settings.", 60 | "type": "string", 61 | "enum": [ 62 | "Amber", 63 | "Blue", 64 | "Blue Grey", 65 | "Brown", 66 | "Cyan", 67 | "Green", 68 | "Grey", 69 | "Indigo", 70 | "Lime", 71 | "Orange", 72 | "Pink", 73 | "Purple", 74 | "Red", 75 | "Teal" 76 | ], 77 | "default": "Teal" 78 | }, 79 | "paintCursor": { 80 | "title": "Paint text editor's cursor", 81 | "description": "Overrides the syntax theme's cursor color with the selected Primary Color.", 82 | "type": "boolean", 83 | "default": false 84 | } 85 | } 86 | }, 87 | "ui": { 88 | "order": 2, 89 | "type": "object", 90 | "title": "User Interface", 91 | "properties": { 92 | "useAnimations": { 93 | "title": "Use animations", 94 | "description": "Enables animations for clicked tabs and other UI elements.", 95 | "type": "boolean", 96 | "default": true 97 | }, 98 | "panelContrast": { 99 | "title": "Contrasting panels", 100 | "description": "Adds a little contrast between panels to differentiate where one starts and the other ends.", 101 | "type": "boolean", 102 | "default": false 103 | }, 104 | "panelShadows": { 105 | "title": "Panels cast shadows", 106 | "description": "Adds depth to the user interface by using shadows.", 107 | "type": "boolean", 108 | "default": false 109 | } 110 | } 111 | }, 112 | "tabs": { 113 | "order": 3, 114 | "type": "object", 115 | "title": "Tabs", 116 | "properties": { 117 | "compactTabs": { 118 | "title": "Compact tab bar", 119 | "description": "Reduces line height so the tab bar won't be too tall.", 120 | "type": "boolean", 121 | "default": false 122 | }, 123 | "tintedTabBar": { 124 | "title": "Tinted tab bar", 125 | "description": "Paints the tab bar with the chosen primary color.", 126 | "type": "boolean", 127 | "default": false 128 | }, 129 | "noTabMinWidth": { 130 | "title": "No minimum width for tabs", 131 | "description": "Prevents tabs from overflowing off the tab bar.", 132 | "type": "boolean", 133 | "default": false 134 | }, 135 | "stretchedTabs": { 136 | "title": "Stretched tabs", 137 | "description": "Stretch tabs to full available width of the tab bar.", 138 | "type": "boolean", 139 | "default": false 140 | } 141 | } 142 | }, 143 | "treeView": { 144 | "order": 4, 145 | "type": "object", 146 | "title": "Tree View", 147 | "properties": { 148 | "compactTreeView": { 149 | "title": "Compact tree view", 150 | "description": "Reduces indentation in tree views.", 151 | "type": "boolean", 152 | "default": false 153 | } 154 | } 155 | }, 156 | "fonts": { 157 | "order": 5, 158 | "type": "object", 159 | "title": "Fonts", 160 | "properties": { 161 | "fontSize": { 162 | "title": "User interface font size", 163 | "description": "Scales the entire UI based on this value.", 164 | "type": "number", 165 | "default": 16, 166 | "minimum": 10, 167 | "maximum": 32 168 | } 169 | } 170 | } 171 | } 172 | } 173 | -------------------------------------------------------------------------------- /spec/colors/build-color-settings-spec.js: -------------------------------------------------------------------------------- 1 | 'use babel'; 2 | 3 | import buildColorSettings from '../../lib/colors/build-color-settings'; 4 | 5 | describe('Settings string', () => { 6 | it('should return default values when no arguments are given', () => { 7 | const defaultSettings = buildColorSettings(); 8 | 9 | expect(typeof defaultSettings).toBe('string'); 10 | expect(!!defaultSettings).not.toBe(false); 11 | 12 | expect(defaultSettings.indexOf('@base-color: #009688')) 13 | .toBeGreaterThan(-1); 14 | 15 | expect(defaultSettings.indexOf('@accent-color: #FFFFFF')) 16 | .toBeGreaterThan(-1); 17 | 18 | expect(defaultSettings.indexOf('@accent-text-color: rgba(255,255,255,0.9)')) 19 | .toBeGreaterThan(-1); 20 | }); 21 | 22 | it('should return the selected @base-color', () => { 23 | expect(buildColorSettings('#FF0000').indexOf('@base-color: #FF0000')) 24 | .toBeGreaterThan(-1); 25 | }); 26 | 27 | it('should return the selected @base-color and @accent-color', () => { 28 | const customSettings = buildColorSettings('#FF0000', '#FAFAFA'); 29 | 30 | expect(customSettings.indexOf('@base-color: #FF0000')) 31 | .toBeGreaterThan(-1); 32 | 33 | expect(customSettings.indexOf('@accent-color: #FAFAFA')) 34 | .toBeGreaterThan(-1); 35 | }); 36 | }); 37 | -------------------------------------------------------------------------------- /spec/fonts/set-font-size-spec.js: -------------------------------------------------------------------------------- 1 | 'use babel'; 2 | 3 | import setFontSize from '../../lib/fonts/set-font-size'; 4 | 5 | describe('Font size setter', () => { 6 | const root = document.documentElement; 7 | 8 | it('should be able to change root element\'s font-size', () => { 9 | expect(root.style.fontSize).toBe(''); 10 | setFontSize(22); 11 | expect(root.style.fontSize).toBe('22px'); 12 | }); 13 | 14 | it('should be able to unset root element\'s font-size', () => { 15 | setFontSize(22); 16 | expect(root.style.fontSize).toBe('22px'); 17 | setFontSize(null); 18 | expect(root.style.fontSize).toBe(''); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /spec/helper/to-camel-case-spec.js: -------------------------------------------------------------------------------- 1 | 'use babel'; 2 | 3 | import toCamelCase from '../../lib/helper/to-camel-case'; 4 | 5 | describe('camelCaseHelper', () => { 6 | it('should convert spaces to camelCase', () => { 7 | expect(toCamelCase('hello world')).toEqual('helloWorld'); 8 | }); 9 | 10 | it('should convert lisp-case to camelCase', () => { 11 | expect(toCamelCase('hello-world')).toEqual('helloWorld'); 12 | }); 13 | 14 | it('should convert snake_case to camelCase', () => { 15 | expect(toCamelCase('hello_world')).toEqual('helloWorld'); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /spec/helper/toggle-class-name-spec.js: -------------------------------------------------------------------------------- 1 | 'use babel'; 2 | 3 | import toggleClassName from '../../lib/helper/toggle-class-name'; 4 | 5 | describe('className toggle helper', () => { 6 | const root = document.documentElement; 7 | 8 | it('should add a className to the root element', () => { 9 | expect(root.classList.contains('testClass')).toBe(false); 10 | toggleClassName('testClass', true); 11 | expect(root.classList.contains('testClass')).toBe(true); 12 | }); 13 | 14 | it('should remove a className from the root element', () => { 15 | expect(root.classList.contains('testClass')).toBe(true); 16 | toggleClassName('testClass', false); 17 | expect(root.classList.contains('testClass')).toBe(false); 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /styles/alert.less: -------------------------------------------------------------------------------- 1 | .alert, .settings-view .alert { 2 | &-info, &-warning, 3 | &-error, &-success, 4 | &-danger { 5 | border-color: fade(@text-color, 5%); 6 | background-color: fade(@text-color, 2%); 7 | } 8 | 9 | &-info { 10 | color: @text-color-info; 11 | } 12 | 13 | &-warning { 14 | color: @text-color-warning; 15 | } 16 | 17 | &-error, &-danger { 18 | color: @text-color-error; 19 | } 20 | 21 | &-success { 22 | color: @text-color-success; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /styles/atom.less: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | atom-workspace { 6 | background-color: @app-background-color; 7 | font-size: .75rem; 8 | } 9 | 10 | .scrollbars-visible-always { 11 | ::-webkit-scrollbar { 12 | width: 8px; 13 | height: 8px; 14 | } 15 | 16 | ::-webkit-scrollbar-corner, 17 | ::-webkit-scrollbar-track { 18 | background: transparent; 19 | } 20 | 21 | ::-webkit-scrollbar-thumb { 22 | background: @scrollbar-color; 23 | border-radius: 0; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /styles/autocomplete.less: -------------------------------------------------------------------------------- 1 | autocomplete-suggestion-list { 2 | &.select-list.popover-list { 3 | background: lighten(@app-background-color, 1.5%); 4 | .z-depth-2; 5 | 6 | .suggestion-description { 7 | background: darken(@app-background-color, 2.5%); 8 | 9 | span, a { 10 | font-size: 0.8rem; 11 | } 12 | 13 | a { 14 | color: @base-color; 15 | } 16 | } 17 | .suggestion-list-scroller { 18 | background: none; 19 | 20 | ol li { 21 | background: none; 22 | position: relative; 23 | 24 | &::before { 25 | display: none; 26 | } 27 | 28 | &.selected { 29 | background: @base-color; 30 | color: @accent-text-color; 31 | 32 | .word-container span { 33 | color: @accent-text-color; 34 | } 35 | 36 | .left-label { 37 | color: darken(@accent-text-color, 15%); 38 | } 39 | 40 | .icon-container { 41 | i.icon { 42 | background: @accent-text-color; 43 | color: @base-color; 44 | } 45 | } 46 | 47 | .right-label { 48 | color: darken(@accent-text-color, 15%); 49 | } 50 | } 51 | } 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /styles/background-tips.less: -------------------------------------------------------------------------------- 1 | background-tips { 2 | ul.background-message { 3 | color: fade(@text-color, 20%); 4 | font-weight: 200; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /styles/buttons.less: -------------------------------------------------------------------------------- 1 | .btn-background (@color, @hover-color, @selected-color, @text-color) { 2 | color: @text-color; 3 | background: none; 4 | 5 | &:focus { 6 | color: @text-color; 7 | } 8 | 9 | &:hover { 10 | color: @text-color-highlight; 11 | background: none; 12 | .z-depth-2; 13 | } 14 | 15 | &:active, &:focus:active { 16 | outline: none; 17 | } 18 | 19 | &.selected, 20 | &.selected:hover { 21 | color: @accent-text-color; 22 | background-color: @base-color; 23 | } 24 | } 25 | 26 | .btn-variant (@color) { 27 | @bg: darken(@color, 10%); 28 | @hover: @color; 29 | @selected: @color; 30 | .btn-background(@bg, @hover, @selected, @text-color-highlight); 31 | } 32 | 33 | .btn { 34 | outline: none; 35 | transition: box-shadow 250ms; 36 | will-change: box-shadow; 37 | .z-depth-1; 38 | .btn-background(@button-background-color, @button-background-color-hover, @button-background-color-selected, @text-color); 39 | 40 | &:focus, &:active { 41 | outline: none; 42 | } 43 | 44 | .btn-group & { 45 | box-shadow: none; 46 | height: 100%; 47 | } 48 | } 49 | 50 | .btn-group { 51 | align-items: center; 52 | .z-depth-1; 53 | } 54 | 55 | .btn.btn-primary { 56 | .btn-variant(@base-color); 57 | } 58 | 59 | .btn.btn-info { 60 | .btn-variant(@background-color-info); 61 | } 62 | 63 | .btn.btn-success { 64 | .btn-variant(@background-color-success); 65 | } 66 | 67 | .btn.btn-warning { 68 | .btn-variant(@background-color-warning); 69 | } 70 | 71 | .btn.btn-error { 72 | .btn-variant(@background-color-error); 73 | } 74 | 75 | .caret { 76 | border-top: 5px solid #fff; 77 | margin-top: -1px; 78 | } 79 | -------------------------------------------------------------------------------- /styles/dock.less: -------------------------------------------------------------------------------- 1 | atom-dock { 2 | .amu-panel-shadows & { 3 | &.left, &.right { 4 | .item-views::after { 5 | content: ''; 6 | height: 100%; 7 | pointer-events: none; 8 | position: absolute; 9 | opacity: .05; 10 | top: 0; 11 | width: .25rem; 12 | z-index: 5; 13 | } 14 | } 15 | 16 | &.left .item-views::after { 17 | background: linear-gradient(to left, black, transparent); 18 | right: 0; 19 | } 20 | 21 | &.right .item-views::after { 22 | background: linear-gradient(to right, black, transparent); 23 | left: 0; 24 | } 25 | } 26 | } 27 | 28 | .atom-dock { 29 | &-inner { 30 | position: relative; 31 | 32 | &.bottom { 33 | .tab-bar:empty { 34 | display: none; 35 | } 36 | } 37 | } 38 | 39 | &-resize-handle { 40 | position: absolute; 41 | z-index: 10; 42 | 43 | &.left, &.right { 44 | top: 0; 45 | bottom: 0; 46 | } 47 | 48 | &.left { 49 | right: 0; 50 | } 51 | 52 | &.right { 53 | left: 0; 54 | } 55 | 56 | &.top, &.bottom { 57 | left: 0; 58 | right: 0; 59 | } 60 | 61 | &.top { 62 | bottom: 0; 63 | } 64 | 65 | &.bottom { 66 | top: 0; 67 | } 68 | } 69 | 70 | &-toggle-button { 71 | .atom-dock-toggle-button-inner { 72 | background-color: @base-color; 73 | color: @accent-text-color; 74 | } 75 | } 76 | 77 | .amu-use-animations & { 78 | &-mask:not(:active) { 79 | transition: 80 | height 250ms @md-timing-function, 81 | width 250ms @md-timing-function; 82 | } 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /styles/dropdowns.less: -------------------------------------------------------------------------------- 1 | .dropdown-menu { 2 | background-color: @overlay-background-color; 3 | border-radius: 0; 4 | border: 1px solid @base-border-color; 5 | padding: 0; 6 | 7 | > li > a { 8 | .text(normal); 9 | } 10 | 11 | > li > a:hover { 12 | .text(highlight); 13 | background-color: @background-color-highlight; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /styles/editor.less: -------------------------------------------------------------------------------- 1 | atom-text-editor[mini] { 2 | position: relative; 3 | color: @text-color-highlight; 4 | background-color: transparent; 5 | line-height: @component-line-height + @component-padding; 6 | max-height: none; 7 | box-shadow: inset 0 -1px 0 fade(@text-color, 5%); 8 | .md-underline(@base-color); 9 | 10 | .amu-paint-cursor & { 11 | .cursor { 12 | border-color: @base-color; 13 | } 14 | } 15 | } 16 | 17 | atom-text-editor { 18 | .amu-paint-cursor & { 19 | .cursor { 20 | border-color: @base-color; 21 | } 22 | 23 | .gutter .cursor-line { 24 | color: @accent-color; 25 | } 26 | 27 | .gutter .cursor-line-no-selection { 28 | color: @base-color; 29 | } 30 | 31 | .bracket-matcher .region { 32 | border-color: @base-color; 33 | box-shadow: inset 0 -1px 0 @base-color; 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /styles/fonts/roboto.less: -------------------------------------------------------------------------------- 1 | // Thin 2 | @font-face { 3 | font-family: 'Roboto'; 4 | src: url('atom://atom-material-ui/assets/fonts/Roboto/roboto-thin-webfont.woff2') format('woff2'); 5 | font-weight: 200; 6 | font-style: normal; 7 | } 8 | @font-face { 9 | font-family: 'Roboto'; 10 | src: url('atom://atom-material-ui/assets/fonts/Roboto/roboto-thinitalic-webfont.woff2') format('woff2'); 11 | font-weight: 200; 12 | font-style: italic; 13 | } 14 | // Light 15 | @font-face { 16 | font-family: 'Roboto'; 17 | src: url('atom://atom-material-ui/assets/fonts/Roboto/roboto-light-webfont.woff2') format('woff2'); 18 | font-weight: 300; 19 | font-style: normal; 20 | } 21 | @font-face { 22 | font-family: 'Roboto'; 23 | src: url('atom://atom-material-ui/assets/fonts/Roboto/roboto-lightitalic-webfont.woff2') format('woff2'); 24 | font-weight: 300; 25 | font-style: italic; 26 | } 27 | // Regular 28 | @font-face { 29 | font-family: 'Roboto'; 30 | src: url('atom://atom-material-ui/assets/fonts/Roboto/roboto-regular-webfont.woff2') format('woff2'); 31 | font-weight: 500; 32 | font-style: normal; 33 | } 34 | @font-face { 35 | font-family: 'Roboto'; 36 | src: url('atom://atom-material-ui/assets/fonts/Roboto/roboto-italic-webfont.woff2') format('woff2'); 37 | font-weight: 500; 38 | font-style: italic; 39 | } 40 | // Medium 41 | @font-face { 42 | font-family: 'Roboto'; 43 | src: url('atom://atom-material-ui/assets/fonts/Roboto/roboto-medium-webfont.woff2') format('woff2'); 44 | font-weight: 600; 45 | font-style: normal; 46 | } 47 | @font-face { 48 | font-family: 'Roboto'; 49 | src: url('atom://atom-material-ui/assets/fonts/Roboto/roboto-mediumitalic-webfont.woff2') format('woff2'); 50 | font-weight: 600; 51 | font-style: italic; 52 | } 53 | // Bold 54 | @font-face { 55 | font-family: 'Roboto'; 56 | src: url('atom://atom-material-ui/assets/fonts/Roboto/roboto-bold-webfont.woff2') format('woff2'); 57 | font-weight: 700; 58 | font-style: normal; 59 | } 60 | @font-face { 61 | font-family: 'Roboto'; 62 | src: url('atom://atom-material-ui/assets/fonts/Roboto/roboto-bolditalic-webfont.woff2') format('woff2'); 63 | font-weight: 700; 64 | font-style: italic; 65 | } 66 | // Black 67 | @font-face { 68 | font-family: 'Roboto'; 69 | src: url('atom://atom-material-ui/assets/fonts/Roboto/roboto-black-webfont.woff2') format('woff2'); 70 | font-weight: 900; 71 | font-style: normal; 72 | } 73 | @font-face { 74 | font-family: 'Roboto'; 75 | src: url('atom://atom-material-ui/assets/fonts/Roboto/roboto-blackitalic-webfont.woff2') format('woff2'); 76 | font-weight: 900; 77 | font-style: italic; 78 | } 79 | // Condensed Light 80 | @font-face { 81 | font-family: 'roboto_condensedlight'; 82 | src: url('atom://atom-material-ui/assets/fonts/Roboto/robotocondensed-light-webfont.woff2') format('woff2'); 83 | font-weight: 300; 84 | font-style: normal; 85 | font-stretch: condensed; 86 | } 87 | @font-face { 88 | font-family: 'roboto_condensedlight_italic'; 89 | src: url('atom://atom-material-ui/assets/fonts/Roboto/robotocondensed-lightitalic-webfont.woff2') format('woff2'); 90 | font-weight: 300; 91 | font-style: italic; 92 | font-stretch: condensed; 93 | } 94 | // Condensed Regular 95 | @font-face { 96 | font-family: 'roboto_condenseditalic'; 97 | src: url('atom://atom-material-ui/assets/fonts/Roboto/robotocondensed-italic-webfont.woff2') format('woff2'); 98 | font-weight: 500; 99 | font-style: italic; 100 | font-stretch: condensed; 101 | } 102 | @font-face { 103 | font-family: 'roboto_condensedregular'; 104 | src: url('atom://atom-material-ui/assets/fonts/Roboto/robotocondensed-regular-webfont.woff2') format('woff2'); 105 | font-weight: 500; 106 | font-style: normal; 107 | font-stretch: condensed; 108 | } 109 | // Condensed Bold 110 | @font-face { 111 | font-family: 'roboto_condensedbold'; 112 | src: url('atom://atom-material-ui/assets/fonts/Roboto/robotocondensed-bold-webfont.woff2') format('woff2'); 113 | font-weight: 700; 114 | font-style: normal; 115 | font-stretch: condensed; 116 | } 117 | @font-face { 118 | font-family: 'roboto_condensedbold_italic'; 119 | src: url('atom://atom-material-ui/assets/fonts/Roboto/robotocondensed-bolditalic-webfont.woff2') format('woff2'); 120 | font-weight: 700; 121 | font-style: italic; 122 | font-stretch: condensed; 123 | } 124 | -------------------------------------------------------------------------------- /styles/fuzzy-finder.less: -------------------------------------------------------------------------------- 1 | .fuzzy-finder, .command-palette { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /styles/git.less: -------------------------------------------------------------------------------- 1 | .status { .text(normal); } 2 | .status-added { .text(success); } 3 | .status-ignored { .text(subtle); } 4 | .status-modified { .text(warning); } 5 | .status-removed { .text(error); } 6 | .status-renamed { .text(info); } 7 | -------------------------------------------------------------------------------- /styles/github-panel.less: -------------------------------------------------------------------------------- 1 | .github-Panel { 2 | .github-CommitView, .github-CommitView > *, 3 | .github-CommitView atom-text-editor { 4 | background: darken(@app-background-color, 1.5%); 5 | } 6 | 7 | .github-CommitView-button { 8 | background-color: @base-color; 9 | color: @accent-text-color; 10 | 11 | &[disabled] { 12 | background-color: transparent; 13 | color: @text-color; 14 | } 15 | 16 | &[disabled]:hover { 17 | box-shadow: none; 18 | color: inherit; 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /styles/incompatible-packages.less: -------------------------------------------------------------------------------- 1 | .incompatible-packages { 2 | padding: 1rem; 3 | 4 | .alert { 5 | display: flex; 6 | 7 | .btn.pull-right { 8 | float: none !important; 9 | margin-left: auto; 10 | } 11 | } 12 | 13 | .incompatible-package { 14 | padding: 1rem; 15 | border: none; 16 | border-radius: 0.125rem; 17 | background: lighten(@app-background-color, 5%); 18 | margin: 1rem 0; 19 | .z-depth-1; 20 | 21 | .heading { 22 | margin-bottom: 0; 23 | color: @text-color; 24 | font-size: 1.5rem; 25 | font-weight: 200; 26 | line-height: 2rem; 27 | } 28 | 29 | .btn, button { 30 | margin: 0; 31 | box-shadow: none; 32 | background: none; 33 | 34 | &:hover { 35 | .z-depth-1; 36 | } 37 | } 38 | 39 | ul { 40 | line-height: 2.5rem; 41 | margin: 1rem 0 0; 42 | padding: 0 0 0 0.5rem; 43 | 44 | .icon { 45 | span { 46 | font-weight: 300; 47 | } 48 | 49 | &::before { 50 | margin-right: 1rem; 51 | } 52 | } 53 | } 54 | 55 | pre { 56 | background: lighten(@app-background-color, 3%); 57 | border-radius: 0; 58 | margin: 1rem -1rem -1rem; 59 | width: ~"calc(100% + 2rem)"; 60 | color: @text-color; 61 | padding: 1rem; 62 | border: none; 63 | } 64 | 65 | .badge { 66 | margin: 0 0 0 1rem; 67 | top: 0.3rem; 68 | padding: .25rem 1rem .25rem .5rem; 69 | display: flex; 70 | align-items: center; 71 | font-size: .75rem; 72 | 73 | &::before { 74 | margin-right: .5em; 75 | } 76 | 77 | &.badge-info { 78 | background-color: @text-color-info; 79 | padding-right: 1rem; 80 | 81 | &::before { 82 | -webkit-animation: spin 1s linear infinite; 83 | content: '\f087'; 84 | } 85 | } 86 | 87 | &.badge-success { 88 | background-color: @text-color-success; 89 | } 90 | 91 | &.badge-error { 92 | background-color: @text-color-error; 93 | } 94 | 95 | &.badge-warning { 96 | background-color: @text-color-warning; 97 | color: darken(@text-color-warning, 30%); 98 | } 99 | } 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /styles/lists.less: -------------------------------------------------------------------------------- 1 | @import "octicon-mixins.less"; // https://github.com/atom/atom/blob/master/static/variables/octicon-mixins.less 2 | 3 | .generate-list-item-text-color(@class) { 4 | li:not(.list-nested-item).text-@{class}, 5 | li.list-nested-item.text-@{class} > .list-item { 6 | .text(@class); 7 | } 8 | } 9 | 10 | .generate-list-item-status-color(@color, @status) { 11 | li:not(.list-nested-item).status-@{status}, 12 | li.list-nested-item.status-@{status} > .list-item { 13 | color: @color; 14 | } 15 | 16 | li:not(.list-nested-item).selected.status-@{status}, 17 | li.list-nested-item.selected.status-@{status} > .list-item { 18 | color: @color; 19 | } 20 | } 21 | 22 | .list-group, .list-tree { 23 | li:not(.list-nested-item), 24 | li.list-nested-item > .list-item { 25 | .text(normal); 26 | } 27 | 28 | .icon::before { 29 | font-size: 1.35em; 30 | margin-right: 1em; 31 | } 32 | 33 | .amu-compact-tree-view & { 34 | .icon::before { 35 | margin-left: -.5em; 36 | margin-right: .75em; 37 | } 38 | 39 | &.has-collapsable-children { 40 | .list-nested-item { 41 | > .list-tree li { 42 | padding-left: 1rem; 43 | } 44 | } 45 | } 46 | } 47 | 48 | .generate-list-item-text-color(subtle); 49 | .generate-list-item-text-color(info); 50 | .generate-list-item-text-color(success); 51 | .generate-list-item-text-color(warning); 52 | .generate-list-item-text-color(error); 53 | .generate-list-item-text-color(selected); 54 | .generate-list-item-status-color(@text-color-subtle, ignored); 55 | .generate-list-item-status-color(@text-color-added, added); 56 | .generate-list-item-status-color(@text-color-renamed, renamed); 57 | .generate-list-item-status-color(@text-color-modified, modified); 58 | .generate-list-item-status-color(@text-color-removed, removed); 59 | 60 | li:not(.list-nested-item).selected, 61 | li.list-nested-item.selected > .list-item { 62 | .text(selected); 63 | 64 | &:not(.header)::before { 65 | background: fade(@text-color, 5%); 66 | } 67 | 68 | :focus & { 69 | color: @accent-text-color; 70 | 71 | &::before { 72 | background: @base-color; 73 | } 74 | 75 | &.status-modified { 76 | color: darken(@text-color-modified, 30%); 77 | 78 | &::before { 79 | background: @text-color-modified; 80 | } 81 | } 82 | 83 | &.status-added { 84 | color: darken(@text-color-success, 30%); 85 | 86 | &::before { 87 | background: @text-color-success; 88 | } 89 | } 90 | } 91 | 92 | .character-match { 93 | color: @accent-text-color; 94 | } 95 | } 96 | } 97 | 98 | .select-list ol.list-group, 99 | &.select-list ol.list-group { 100 | li.two-lines { 101 | .secondary-line { color: @text-color-subtle; } 102 | 103 | &.selected .secondary-line { 104 | color: fade(@accent-text-color, 50%); 105 | text-shadow: none; 106 | } 107 | } 108 | 109 | // We want to highlight the background of the list items because we dont 110 | // know their size. 111 | li.selected { 112 | background-color: @base-color; 113 | color: @accent-text-color; 114 | 115 | &::before { 116 | display: none; 117 | } 118 | } 119 | 120 | &.mark-active{ 121 | @active-icon-size: 14px; 122 | 123 | // pad in front of the text where the icon would be We'll pad the non- 124 | // active items with a 'fake' icon so other classes can pad the item 125 | // without worrying about the icon padding. 126 | li::before { 127 | content: ''; 128 | background-color: transparent; 129 | position: static; 130 | display: inline-block; 131 | left: auto; right: auto; 132 | height: @active-icon-size; 133 | width: @active-icon-size; 134 | } 135 | 136 | > li:not(.active)::before { 137 | margin-right: @component-icon-padding; 138 | } 139 | 140 | li.active { 141 | .octicon(check, @active-icon-size); 142 | 143 | &::before { 144 | margin-right: @component-icon-padding; 145 | color: @text-color-success; 146 | } 147 | } 148 | } 149 | } 150 | 151 | .list-group .selected::before, .list-tree .selected::before { 152 | background-color: fade(@text-color, 5%); 153 | 154 | .focus & { 155 | background-color: @base-color; 156 | } 157 | } 158 | 159 | .select-list.popover-list { 160 | background-color: @overlay-background-color; 161 | box-shadow: 0 0 10px @base-border-color; 162 | padding: @component-padding/2; 163 | border-radius: @component-border-radius; 164 | border: 1px solid @overlay-border-color; 165 | 166 | atom-text-editor { 167 | margin-bottom: @component-padding/2; 168 | } 169 | 170 | .list-group li { 171 | padding-left: @component-padding/2; 172 | } 173 | } 174 | 175 | .ui-sortable { 176 | li { 177 | line-height: 2.5; 178 | } 179 | 180 | // For sortable lists in the settings view 181 | li.ui-sortable-placeholder { 182 | visibility: visible !important; 183 | background-color: darken(@pane-item-background-color, 10%); 184 | } 185 | } 186 | 187 | li.ui-draggable-dragging, li.ui-sortable-helper { 188 | line-height: @component-line-height; 189 | height: @component-line-height; 190 | border: 0; 191 | border-radius: 0; 192 | list-style: none; 193 | padding: 0 @component-padding; 194 | background: @background-color-highlight; 195 | box-shadow: 0 0 1px @base-border-color; 196 | } 197 | -------------------------------------------------------------------------------- /styles/md-colors.less: -------------------------------------------------------------------------------- 1 | // Google Material Design colors 2 | 3 | // Red 4 | @md-red-50: #FFEBEE; 5 | @md-red-100: #FFCDD2; 6 | @md-red-200: #EF9A9A; 7 | @md-red-300: #E57373; 8 | @md-red-400: #EF5350; 9 | @md-red-500: #F44336; 10 | @md-red-600: #E53935; 11 | @md-red-700: #D32F2F; 12 | @md-red-800: #C62828; 13 | @md-red-900: #B71C1C; 14 | @md-red-A100: #FF8A80; 15 | @md-red-A200: #FF5252; 16 | @md-red-A400: #FF1744; 17 | @md-red-A700: #D50000; 18 | 19 | // Pink 20 | @md-pink-50: #FCE4EC; 21 | @md-pink-100: #F8BBD0; 22 | @md-pink-200: #F48FB1; 23 | @md-pink-300: #F06292; 24 | @md-pink-400: #EC407A; 25 | @md-pink-500: #E91E63; 26 | @md-pink-600: #D81B60; 27 | @md-pink-700: #C2185B; 28 | @md-pink-800: #AD1457; 29 | @md-pink-900: #880E4F; 30 | @md-pink-A100: #FF80AB; 31 | @md-pink-A200: #FF4081; 32 | @md-pink-A400: #F50057; 33 | @md-pink-A700: #C51162; 34 | 35 | // Purple 36 | @md-purple-50: #F3E5F5; 37 | @md-purple-100: #E1BEE7; 38 | @md-purple-200: #CE93D8; 39 | @md-purple-300: #BA68C8; 40 | @md-purple-400: #AB47BC; 41 | @md-purple-500: #9C27B0; 42 | @md-purple-600: #8E24AA; 43 | @md-purple-700: #7B1FA2; 44 | @md-purple-800: #6A1B9A; 45 | @md-purple-900: #4A148C; 46 | @md-purple-A100: #EA80FC; 47 | @md-purple-A200: #E040FB; 48 | @md-purple-A400: #D500F9; 49 | @md-purple-A700: #AA00FF; 50 | 51 | // Deep Purple 52 | @md-deep-purple-50: #EDE7F6; 53 | @md-deep-purple-100: #D1C4E9; 54 | @md-deep-purple-200: #B39DDB; 55 | @md-deep-purple-300: #9575CD; 56 | @md-deep-purple-400: #7E57C2; 57 | @md-deep-purple-500: #673AB7; 58 | @md-deep-purple-600: #5E35B1; 59 | @md-deep-purple-700: #512DA8; 60 | @md-deep-purple-800: #4527A0; 61 | @md-deep-purple-900: #311B92; 62 | @md-deep-purple-A100: #B388FF; 63 | @md-deep-purple-A200: #7C4DFF; 64 | @md-deep-purple-A400: #651FFF; 65 | @md-deep-purple-A700: #6200EA; 66 | 67 | // Indigo 68 | @md-indigo-50: #E8EAF6; 69 | @md-indigo-100: #C5CAE9; 70 | @md-indigo-200: #9FA8DA; 71 | @md-indigo-300: #7986CB; 72 | @md-indigo-400: #5C6BC0; 73 | @md-indigo-500: #3F51B5; 74 | @md-indigo-600: #3949AB; 75 | @md-indigo-700: #303F9F; 76 | @md-indigo-800: #283593; 77 | @md-indigo-900: #1A237E; 78 | @md-indigo-A100: #8C9EFF; 79 | @md-indigo-A200: #536DFE; 80 | @md-indigo-A400: #3D5AFE; 81 | @md-indigo-A700: #304FFE; 82 | 83 | // Blue 84 | @md-blue-50: #E3F2FD; 85 | @md-blue-100: #BBDEFB; 86 | @md-blue-200: #90CAF9; 87 | @md-blue-300: #64B5F6; 88 | @md-blue-400: #42A5F5; 89 | @md-blue-500: #2196F3; 90 | @md-blue-600: #1E88E5; 91 | @md-blue-700: #1976D2; 92 | @md-blue-800: #1565C0; 93 | @md-blue-900: #0D47A1; 94 | @md-blue-A100: #82B1FF; 95 | @md-blue-A200: #448AFF; 96 | @md-blue-A400: #2979FF; 97 | @md-blue-A700: #2962FF; 98 | 99 | // Light Blue 100 | @md-light-blue-50: #E1F5FE; 101 | @md-light-blue-100: #B3E5FC; 102 | @md-light-blue-200: #81D4FA; 103 | @md-light-blue-300: #4FC3F7; 104 | @md-light-blue-400: #29B6F6; 105 | @md-light-blue-500: #03A9F4; 106 | @md-light-blue-600: #039BE5; 107 | @md-light-blue-700: #0288D1; 108 | @md-light-blue-800: #0277BD; 109 | @md-light-blue-900: #01579B; 110 | @md-light-blue-A100: #80D8FF; 111 | @md-light-blue-A200: #40C4FF; 112 | @md-light-blue-A400: #00B0FF; 113 | @md-light-blue-A700: #0091EA; 114 | 115 | // Cyan 116 | @md-cyan-50: #E0F7FA; 117 | @md-cyan-100: #B2EBF2; 118 | @md-cyan-200: #80DEEA; 119 | @md-cyan-300: #4DD0E1; 120 | @md-cyan-400: #26C6DA; 121 | @md-cyan-500: #00BCD4; 122 | @md-cyan-600: #00ACC1; 123 | @md-cyan-700: #0097A7; 124 | @md-cyan-800: #00838F; 125 | @md-cyan-900: #006064; 126 | @md-cyan-A100: #84FFFF; 127 | @md-cyan-A200: #18FFFF; 128 | @md-cyan-A400: #00E5FF; 129 | @md-cyan-A700: #00B8D4; 130 | 131 | // Teal 132 | @md-teal-50: #E0F2F1; 133 | @md-teal-100: #B2DFDB; 134 | @md-teal-200: #80CBC4; 135 | @md-teal-300: #4DB6AC; 136 | @md-teal-400: #26A69A; 137 | @md-teal-500: #009688; 138 | @md-teal-600: #00897B; 139 | @md-teal-700: #00796B; 140 | @md-teal-800: #00695C; 141 | @md-teal-900: #004D40; 142 | @md-teal-A100: #A7FFEB; 143 | @md-teal-A200: #64FFDA; 144 | @md-teal-A400: #1DE9B6; 145 | @md-teal-A700: #00BFA5; 146 | 147 | // Green 148 | @md-green-50: #E8F5E9; 149 | @md-green-100: #C8E6C9; 150 | @md-green-200: #A5D6A7; 151 | @md-green-300: #81C784; 152 | @md-green-400: #66BB6A; 153 | @md-green-500: #4CAF50; 154 | @md-green-600: #43A047; 155 | @md-green-700: #388E3C; 156 | @md-green-800: #2E7D32; 157 | @md-green-900: #1B5E20; 158 | @md-green-A100: #B9F6CA; 159 | @md-green-A200: #69F0AE; 160 | @md-green-A400: #00E676; 161 | @md-green-A700: #00C853; 162 | 163 | // Light Green 164 | @md-light-green-50: #F1F8E9; 165 | @md-light-green-100: #DCEDC8; 166 | @md-light-green-200: #C5E1A5; 167 | @md-light-green-300: #AED581; 168 | @md-light-green-400: #9CCC65; 169 | @md-light-green-500: #8BC34A; 170 | @md-light-green-600: #7CB342; 171 | @md-light-green-700: #689F38; 172 | @md-light-green-800: #558B2F; 173 | @md-light-green-900: #33691E; 174 | @md-light-green-A100: #CCFF90; 175 | @md-light-green-A200: #B2FF59; 176 | @md-light-green-A400: #76FF03; 177 | @md-light-green-A700: #64DD17; 178 | 179 | // Lime 180 | @md-lime-50: #F9FBE7; 181 | @md-lime-100: #F0F4C3; 182 | @md-lime-200: #E6EE9C; 183 | @md-lime-300: #DCE775; 184 | @md-lime-400: #D4E157; 185 | @md-lime-500: #CDDC39; 186 | @md-lime-600: #C0CA33; 187 | @md-lime-700: #AFB42B; 188 | @md-lime-800: #9E9D24; 189 | @md-lime-900: #827717; 190 | @md-lime-A100: #F4FF81; 191 | @md-lime-A200: #EEFF41; 192 | @md-lime-A400: #C6FF00; 193 | @md-lime-A700: #AEEA00; 194 | 195 | // Yellow 196 | @md-yellow-50: #FFFDE7; 197 | @md-yellow-100: #FFF9C4; 198 | @md-yellow-200: #FFF59D; 199 | @md-yellow-300: #FFF176; 200 | @md-yellow-400: #FFEE58; 201 | @md-yellow-500: #FFEB3B; 202 | @md-yellow-600: #FDD835; 203 | @md-yellow-700: #FBC02D; 204 | @md-yellow-800: #F9A825; 205 | @md-yellow-900: #F57F17; 206 | @md-yellow-A100: #FFFF8D; 207 | @md-yellow-A200: #FFFF00; 208 | @md-yellow-A400: #FFEA00; 209 | @md-yellow-A700: #FFD600; 210 | 211 | // Amber 212 | @md-amber-50: #FFF8E1; 213 | @md-amber-100: #FFECB3; 214 | @md-amber-200: #FFE082; 215 | @md-amber-300: #FFD54F; 216 | @md-amber-400: #FFCA28; 217 | @md-amber-500: #FFC107; 218 | @md-amber-600: #FFB300; 219 | @md-amber-700: #FFA000; 220 | @md-amber-800: #FF8F00; 221 | @md-amber-900: #FF6F00; 222 | @md-amber-A100: #FFE57F; 223 | @md-amber-A200: #FFD740; 224 | @md-amber-A400: #FFC400; 225 | @md-amber-A700: #FFAB00; 226 | 227 | // Orange 228 | @md-orange-50: #FFF3E0; 229 | @md-orange-100: #FFE0B2; 230 | @md-orange-200: #FFCC80; 231 | @md-orange-300: #FFB74D; 232 | @md-orange-400: #FFA726; 233 | @md-orange-500: #FF9800; 234 | @md-orange-600: #FB8C00; 235 | @md-orange-700: #F57C00; 236 | @md-orange-800: #EF6C00; 237 | @md-orange-900: #E65100; 238 | @md-orange-A100: #FFD180; 239 | @md-orange-A200: #FFAB40; 240 | @md-orange-A400: #FF9100; 241 | @md-orange-A700: #FF6D00; 242 | 243 | // Deep Orange 244 | @md-deep-orange-50: #FBE9E7; 245 | @md-deep-orange-100: #FFCCBC; 246 | @md-deep-orange-200: #FFAB91; 247 | @md-deep-orange-300: #FF8A65; 248 | @md-deep-orange-400: #FF7043; 249 | @md-deep-orange-500: #FF5722; 250 | @md-deep-orange-600: #F4511E; 251 | @md-deep-orange-700: #E64A19; 252 | @md-deep-orange-800: #D84315; 253 | @md-deep-orange-900: #BF360C; 254 | @md-deep-orange-A100: #FF9E80; 255 | @md-deep-orange-A200: #FF6E40; 256 | @md-deep-orange-A400: #FF3D00; 257 | @md-deep-orange-A700: #DD2C00; 258 | 259 | // Brown 260 | @md-brown-50: #EFEBE9; 261 | @md-brown-100: #D7CCC8; 262 | @md-brown-200: #BCAAA4; 263 | @md-brown-300: #A1887F; 264 | @md-brown-400: #8D6E63; 265 | @md-brown-500: #795548; 266 | @md-brown-600: #6D4C41; 267 | @md-brown-700: #5D4037; 268 | @md-brown-800: #4E342E; 269 | @md-brown-900: #3E2723; 270 | 271 | // Grey 272 | @md-grey-50: #FAFAFA; 273 | @md-grey-100: #F5F5F5; 274 | @md-grey-200: #EEEEEE; 275 | @md-grey-300: #E0E0E0; 276 | @md-grey-400: #BDBDBD; 277 | @md-grey-500: #9E9E9E; 278 | @md-grey-600: #757575; 279 | @md-grey-700: #616161; 280 | @md-grey-800: #424242; 281 | @md-grey-900: #212121; 282 | 283 | // Blue Grey 284 | @md-blue-grey-50: #ECEFF1; 285 | @md-blue-grey-100: #CFD8DC; 286 | @md-blue-grey-200: #B0BEC5; 287 | @md-blue-grey-300: #90A4AE; 288 | @md-blue-grey-400: #78909C; 289 | @md-blue-grey-500: #607D8B; 290 | @md-blue-grey-600: #546E7A; 291 | @md-blue-grey-700: #455A64; 292 | @md-blue-grey-800: #37474F; 293 | @md-blue-grey-900: #263238; 294 | 295 | // Alpha values for grey text, icons, and divider 296 | 297 | // White 298 | @md-white-lighter: rgba(255,255,255,.12); // Dividers 299 | @md-white-light: rgba(255,255,255,.30); // Disabled / Hint Text 300 | @md-white-dark: rgba(255,255,255,.70); // Secondary Text 301 | @md-white-darker: rgba(255,255,255, 1); // Text / Icons 302 | 303 | // Black 304 | @md-black-lighter: rgba(0,0,0,.12); // Dividers 305 | @md-black-light: rgba(0,0,0,.26); // Disabled / Hint Text 306 | @md-black-dark: rgba(0,0,0,.54); // Secondary text / Icons 307 | @md-black-darker: rgba(0,0,0,.87); // Text 308 | -------------------------------------------------------------------------------- /styles/messages.less: -------------------------------------------------------------------------------- 1 | ul.background-message { 2 | font-weight: bold; 3 | color: rgba(0, 0, 0, .2); 4 | } 5 | -------------------------------------------------------------------------------- /styles/nav.less: -------------------------------------------------------------------------------- 1 | .nav-tabs { 2 | border-bottom: 1px solid @base-border-color; 3 | 4 | li { 5 | &.active a, 6 | a { 7 | border: none; 8 | margin-right: 0; 9 | margin-bottom: 1px; 10 | } 11 | 12 | &.active a, 13 | &.active a:hover, 14 | a:hover { 15 | background-color: @background-color-highlight; 16 | border: none; 17 | color: @text-color-selected; 18 | border-bottom-left-radius: 0; 19 | border-bottom-right-radius: 0; 20 | } 21 | 22 | &.active a { 23 | background-color: @tab-background-color-active; 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /styles/notifications.less: -------------------------------------------------------------------------------- 1 | atom-notifications { 2 | display: flex; 3 | align-items: flex-end; 4 | flex-flow: column-reverse; 5 | padding: 2rem 0.5rem; 6 | z-index: 9999; 7 | } 8 | 9 | atom-notification { 10 | padding: 0 !important; 11 | border-radius: 0 0.125rem 0.125rem 0; 12 | 13 | .content { 14 | border-radius: 0.125rem; 15 | width: 100%; 16 | 17 | > div { 18 | padding: 1.25rem 2rem; 19 | line-height: 2; 20 | } 21 | 22 | .message + .detail { 23 | padding-top: 0; 24 | } 25 | 26 | .detail + .meta { 27 | padding-top: 0; 28 | } 29 | } 30 | 31 | .btn-toolbar { 32 | line-height: 3rem; 33 | 34 | .btn { 35 | margin-right: 2rem; 36 | } 37 | 38 | .btn-copy-report { 39 | color: @text-color; 40 | line-height: 1; 41 | position: relative; 42 | top: -0.25rem; 43 | } 44 | } 45 | 46 | .detail { 47 | background: none; 48 | } 49 | 50 | .item { 51 | border: none; 52 | } 53 | 54 | .close-all.btn { 55 | height: 1.75rem !important; 56 | line-height: 1.75rem !important; 57 | border: none !important; 58 | color: @text-color !important; 59 | padding: 0 0.5rem !important; 60 | } 61 | 62 | &.icon::before { 63 | display: none; 64 | } 65 | 66 | .close, .close:hover { 67 | color: @text-color !important; 68 | opacity: 1; 69 | } 70 | 71 | &.success, &.error, &.info, &.warning, &.fatal { 72 | border-left: 0.125rem solid transparent; 73 | 74 | .content { 75 | background-color: darken(@app-background-color, 5%) !important; 76 | color: @text-color !important; 77 | } 78 | 79 | .close-all.btn, .close-all.btn:hover { 80 | border-color: transparent; 81 | color: fade(@text-color, 50%); 82 | box-shadow: none; 83 | line-height: 1.65rem; 84 | 85 | &:hover { 86 | .z-depth-1; 87 | } 88 | } 89 | 90 | code { 91 | background-color: lighten(@text-color-error, 5%); 92 | color: #FFF; 93 | font-size: 0.75rem; 94 | } 95 | 96 | .btn { 97 | max-width: 18rem; 98 | overflow: hidden; 99 | text-overflow: ellipsis; 100 | color: @text-color; 101 | 102 | &-success, &-primary { 103 | color: #FFF; 104 | } 105 | } 106 | } 107 | 108 | &.success { 109 | border-color: @text-color-success; 110 | 111 | a { 112 | color: @text-color-success; 113 | } 114 | } 115 | 116 | &.error, &.fatal { 117 | border-color: @text-color-error; 118 | 119 | a { 120 | color: @text-color-error; 121 | } 122 | } 123 | 124 | &.info { 125 | border-color: @text-color-info; 126 | 127 | a { 128 | color: @text-color-info; 129 | } 130 | } 131 | 132 | &.warning { 133 | border-color: @text-color-warning; 134 | 135 | a { 136 | color: @text-color-warning; 137 | } 138 | } 139 | 140 | &.has-close { 141 | .content > div { 142 | padding-right: 4rem; 143 | } 144 | 145 | &:only-child { 146 | .content > div { 147 | padding-right: 4rem; 148 | } 149 | } 150 | 151 | &:first-child:not(:only-child) { 152 | .content > div:first-child { 153 | padding-top: 3rem; 154 | padding-right: 2rem; 155 | } 156 | } 157 | } 158 | 159 | &.has-stack .stack-toggle { 160 | color: @text-color-error; 161 | 162 | .icon { 163 | position: relative; 164 | top: 1px; 165 | } 166 | } 167 | } 168 | -------------------------------------------------------------------------------- /styles/overlays.less: -------------------------------------------------------------------------------- 1 | .overlay, 2 | atom-panel.modal { 3 | color: @text-color; 4 | background-color: @overlay-background-color; 5 | font-size: @font-size; 6 | padding: @component-padding; 7 | box-shadow: 0 0 10px @base-border-color; 8 | border-radius: @component-border-radius; 9 | overflow: hidden; 10 | .z-depth-3; 11 | 12 | atom-text-editor[mini] { 13 | margin-bottom: @component-padding; 14 | } 15 | 16 | &.select-list ol.list-group, 17 | .select-list ol.list-group { 18 | margin: 0 -@component-padding -@component-padding; 19 | 20 | li { 21 | padding: @component-padding; 22 | border-bottom: 1px solid fade(@text-color, 2.5%); 23 | 24 | &.two-lines { 25 | padding: @component-padding/2 @component-padding; 26 | } 27 | 28 | .status.icon { 29 | float: right; 30 | margin-left: @component-icon-padding; 31 | 32 | &::before { 33 | margin-right: 0; 34 | } 35 | } 36 | 37 | &.selected { 38 | .status.icon { 39 | color: @text-color-selected; 40 | } 41 | } 42 | 43 | &:last-child { 44 | border-bottom: none; 45 | } 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /styles/packages/activate-power-mode.less: -------------------------------------------------------------------------------- 1 | .streak-container { 2 | .title { 3 | text-shadow: 2px 2px 2px @base-color; 4 | } 5 | 6 | .counter, 7 | .exclamations, 8 | .max { 9 | color: @base-color; 10 | } 11 | 12 | .bar { 13 | background: @base-color; 14 | } 15 | 16 | .generate-levels(5); 17 | } 18 | 19 | .generate-levels(@i) when (@i > 0) { 20 | @levelColor: spin(@base-color, (@i * -10)); 21 | &.level-@{i} { 22 | .title { 23 | text-shadow: 2px 2px 2px @levelColor; 24 | } 25 | 26 | .counter, 27 | .exclamations, 28 | .max { 29 | color: @levelColor; 30 | } 31 | 32 | .bar { 33 | background: @levelColor; 34 | } 35 | } 36 | .generate-levels(@i - 1); 37 | } 38 | -------------------------------------------------------------------------------- /styles/packages/busy-signal.less: -------------------------------------------------------------------------------- 1 | busy-signal { 2 | margin-top: 0; 3 | } 4 | -------------------------------------------------------------------------------- /styles/packages/linter.less: -------------------------------------------------------------------------------- 1 | .linter-status-count { 2 | .highlight, .highlight-error, 3 | .highlight-warning, .highlight-info { 4 | border-radius: 0; 5 | background: fade(@text-color, 10%); 6 | 7 | &:first-child { 8 | border-radius: .125em 0 0 .125em; 9 | } 10 | 11 | &:last-child { 12 | border-radius: 0 .125em .125em 0; 13 | } 14 | } 15 | 16 | .highlight-error { 17 | background-color: fade(@text-color-error, 80%); 18 | color: rgba(255, 255, 255, .8); 19 | } 20 | 21 | .highlight-info { 22 | background-color: fade(@text-color-info, 80%); 23 | color: rgba(255, 255, 255, .8); 24 | } 25 | 26 | .highlight-warning { 27 | background-color: fade(@text-color-warning, 80%); 28 | color: darken(@text-color-warning, 35%); 29 | } 30 | } 31 | 32 | .sb-table, .nuclide-ui-table { 33 | thead th { 34 | background-color: darken(@app-background-color, 1.5%); 35 | 36 | &:nth-of-type(even) { 37 | background-color: darken(@app-background-color, 2.5%); 38 | } 39 | } 40 | 41 | tbody { 42 | tr { 43 | &:nth-of-type(even), &:nth-of-type(even):hover { 44 | background-color: lighten(@app-background-color, 1%); 45 | } 46 | 47 | &:hover { 48 | background-color: inherit; 49 | } 50 | } 51 | 52 | td:nth-of-type(even) { 53 | background-color: fade(darken(@app-background-color, 2%), 50%); 54 | } 55 | } 56 | } 57 | 58 | .linter-gutter { 59 | &.icon::before { 60 | margin: 0; 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /styles/packages/main.less: -------------------------------------------------------------------------------- 1 | @import "activate-power-mode"; 2 | @import "busy-signal"; 3 | @import "linter"; 4 | @import "nuclide"; 5 | @import "open-recent"; 6 | @import "platformio"; 7 | @import "remote-ftp"; 8 | @import "terminal"; 9 | @import "tool-bar"; 10 | @import "vim-mode-plus"; 11 | -------------------------------------------------------------------------------- /styles/packages/nuclide.less: -------------------------------------------------------------------------------- 1 | // Nothing to see here. Move along! 2 | -------------------------------------------------------------------------------- /styles/packages/open-recent.less: -------------------------------------------------------------------------------- 1 | [data-event-name*="open-recent:"] { 2 | overflow: hidden; 3 | text-overflow: ellipsis; 4 | } 5 | -------------------------------------------------------------------------------- /styles/packages/platformio.less: -------------------------------------------------------------------------------- 1 | .pio { 2 | select.form-control { 3 | .select(); 4 | line-height: 36px; 5 | height: 36px; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /styles/packages/remote-ftp.less: -------------------------------------------------------------------------------- 1 | .remote-ftp-view { 2 | .amu-tab-blender { 3 | span::after { 4 | content: 'Remote files'; 5 | } 6 | } 7 | 8 | .offline li + li { 9 | margin-top: @font-size; 10 | } 11 | 12 | .ftptree-view { 13 | transform: translate3d(0, 0, 0); 14 | padding-top: @font-size * 4; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /styles/packages/terminal.less: -------------------------------------------------------------------------------- 1 | .terminal-view { 2 | .btn-toolbar .btn { 3 | box-shadow: none; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /styles/packages/tool-bar.less: -------------------------------------------------------------------------------- 1 | .tool-bar { 2 | border: none; 3 | z-index: 5000; 4 | 5 | &.tool-bar-vertical .tool-bar-spacer { 6 | margin: 0.5rem 0; 7 | border-bottom: none; 8 | } 9 | 10 | &.tool-bar-horizontal { 11 | &.tool-bar-top { 12 | background: @app-background-color; 13 | } 14 | 15 | &.tool-bar-bottom { 16 | background: @app-background-color; 17 | 18 | .tool-bar-btn { 19 | color: @text-color; 20 | } 21 | } 22 | 23 | .tool-bar-spacer { 24 | margin: 0 0.5rem; 25 | border-left: none; 26 | } 27 | } 28 | 29 | &.tool-bar-horizontal, 30 | &.tool-bar-vertical { 31 | .tool-bar-spacer { 32 | border-color: fade(@text-color, 5%); 33 | } 34 | 35 | &.gutter-bottom, 36 | &.gutter-top { 37 | &::before, &::after { 38 | opacity: .5; 39 | } 40 | } 41 | } 42 | 43 | &.tool-bar-12px, 44 | &.tool-bar-16px, 45 | &.tool-bar-24px, 46 | &.tool-bar-32px { 47 | &.tool-bar-horizontal { 48 | .tool-bar-spacer { 49 | height: 100%; 50 | } 51 | } 52 | 53 | &.tool-bar-vertical { 54 | .tool-bar-spacer { 55 | width: 100%; 56 | } 57 | } 58 | 59 | .tool-bar-btn { 60 | margin: 0; 61 | padding: 0; 62 | border-radius: 0; 63 | box-shadow: none; 64 | background: none; 65 | transition: color 250ms @md-timing-function; 66 | 67 | .tool-bar-vertical & { 68 | color: @text-color; 69 | 70 | &:hover:not(:first-child) { 71 | color: darken(@text-color, 10%); 72 | } 73 | } 74 | 75 | &.tool-bar-mode-dev { 76 | position: relative; 77 | color: @text-color; 78 | 79 | &::after { 80 | position: absolute; 81 | right: 0.5rem; 82 | bottom: 0.5rem; 83 | content: "\f05f"; 84 | font-family: 'Octicons Regular'; 85 | color: #FFF; 86 | display: inline-block; 87 | line-height: 1; 88 | -webkit-font-smoothing: antialiased; 89 | text-decoration: none; 90 | font-size: 0.75rem; 91 | text-align: center; 92 | width: 0.75rem; 93 | height: 0.75rem; 94 | background: @md-red-500; 95 | border-radius: 50%; 96 | border: 0.125rem solid @text-color-error; 97 | box-sizing: content-box; 98 | .z-depth-1; 99 | } 100 | 101 | &:hover { 102 | color: @text-color; 103 | } 104 | } 105 | } 106 | } 107 | 108 | &.tool-bar-12px { 109 | .tool-bar-btn { 110 | width: @font-size * 2.65; 111 | height: @font-size * 2.65; 112 | 113 | &::before { 114 | font-size: @font-size * 1.33; 115 | line-height: @font-size * 2.65; 116 | } 117 | } 118 | } 119 | 120 | &.tool-bar-16px { 121 | .tool-bar-btn { 122 | width: @font-size * 3.33; 123 | height: @font-size * 3.33; 124 | 125 | &::before { 126 | font-size: @font-size * 1.5; 127 | line-height: @font-size * 3.33; 128 | } 129 | } 130 | } 131 | 132 | &.tool-bar-24px { 133 | .tool-bar-btn { 134 | width: @font-size * 4; 135 | height: @font-size * 4; 136 | 137 | &::before { 138 | font-size: @font-size * 1.66; 139 | line-height: @font-size * 4; 140 | } 141 | } 142 | } 143 | 144 | &.tool-bar-32px { 145 | .tool-bar-btn { 146 | width: @font-size * 5; 147 | height: @font-size * 5; 148 | 149 | &::before { 150 | font-size: @font-size * 2; 151 | line-height: @font-size * 5; 152 | } 153 | } 154 | } 155 | 156 | .amu-panel-shadows & { 157 | &.tool-bar-vertical { 158 | .tool-bar-btn:first-child { 159 | .z-depth-1; 160 | } 161 | } 162 | } 163 | 164 | .amu-panel-contrast & { 165 | &.tool-bar-vertical { 166 | &.tool-bar-left { 167 | background-color: darken(@app-background-color, 3.5%); 168 | } 169 | 170 | &.tool-bar-right { 171 | background-color: darken(@app-background-color, 2.5%); 172 | } 173 | } 174 | 175 | &.tool-bar-horizontal { 176 | &.tool-bar-bottom { 177 | background-color: darken(@app-background-color, 2.5%); 178 | } 179 | } 180 | } 181 | 182 | .amu-tinted-tab-bar & { 183 | &.tool-bar-vertical { 184 | .tool-bar-btn { 185 | background: @base-color; 186 | color: @accent-text-color; 187 | 188 | svg path, 189 | svg polygon { 190 | fill: @accent-text-color; 191 | } 192 | } 193 | 194 | .tool-bar-btn.tool-bar-item-align-end, 195 | .tool-bar-btn:not(.tool-bar-item-align-end) + .tool-bar-btn, 196 | .tool-bar-spacer + .tool-bar-btn { 197 | background: none; 198 | color: @text-color; 199 | } 200 | } 201 | 202 | &.tool-bar-top { 203 | background: @base-color; 204 | 205 | .tool-bar-btn { 206 | color: @accent-text-color; 207 | 208 | svg path, 209 | svg polygon { 210 | fill: @accent-text-color; 211 | } 212 | 213 | &.tool-bar-mode-dev { 214 | color: @accent-text-color; 215 | } 216 | } 217 | 218 | .tool-bar-spacer { 219 | border-color: fade(@accent-text-color, 15%); 220 | } 221 | } 222 | } 223 | 224 | .amu-tinted-tab-bar.amu-panel-contrast & { 225 | &.tool-bar-vertical { 226 | .tool-bar-btn { 227 | background: darken(@base-color, 5%); 228 | color: @accent-text-color; 229 | 230 | svg path, 231 | svg polygon { 232 | fill: @accent-text-color; 233 | } 234 | } 235 | 236 | .tool-bar-btn.tool-bar-item-align-end, 237 | .tool-bar-btn:not(.tool-bar-item-align-end) + .tool-bar-btn, 238 | .tool-bar-spacer + .tool-bar-btn { 239 | background: none; 240 | color: @text-color; 241 | } 242 | } 243 | } 244 | 245 | .amu-compact-tab-bar & { 246 | &.tool-bar-16px, 247 | &.tool-bar-24px, 248 | &.tool-bar-32px { 249 | .tool-bar-btn { 250 | width: @font-size * 3.33; 251 | height: @font-size * 3.33; 252 | 253 | &::before { 254 | line-height: @font-size * 3.33; 255 | } 256 | 257 | &.tool-bar-mode-dev::after { 258 | right: @font-size * 0.33; 259 | bottom: @font-size * 0.33; 260 | } 261 | } 262 | 263 | &.tool-bar-horizontal { 264 | .tool-bar-spacer { 265 | height: @font-size * 2; 266 | } 267 | } 268 | 269 | &.tool-bar-vertical { 270 | .tool-bar-spacer { 271 | width: @font-size * 2; 272 | } 273 | } 274 | } 275 | } 276 | } 277 | -------------------------------------------------------------------------------- /styles/packages/vim-mode-plus.less: -------------------------------------------------------------------------------- 1 | atom-text-editor.vim-mode-plus.normal-mode, 2 | atom-text-editor.vim-mode-plus.visual-mode, 3 | atom-text-editor.vim-mode-plus.operator-pending-mode, 4 | atom-text-editor.vim-mode-plus.insert-mode.replace { 5 | .amu-paint-cursor & { 6 | &.is-focused, 7 | &.vim-mode-plus-input-focused, 8 | &.vim-mode-plus-search-input-focused { 9 | .cursor { 10 | background-color: @base-color; // block-cursor 11 | } 12 | } 13 | } 14 | } 15 | 16 | atom-text-editor.vim-mode-plus.operator-pending-mode { 17 | .amu-paint-cursor & { 18 | &.is-focused, 19 | &.vim-mode-plus-search-input-focused { 20 | .cursor { 21 | background: none; 22 | border-bottom-color: @base-color; 23 | } 24 | } 25 | } 26 | } 27 | 28 | atom-text-editor.vim-mode-plus.insert-mode.replace { 29 | .amu-paint-cursor & { 30 | &.is-focused { 31 | .cursor { 32 | background: none; 33 | border-bottom-color: @base-color; 34 | } 35 | } 36 | } 37 | } 38 | 39 | // vim-mode-plus-input-focused for surround, f, F, t, T, r etc. 40 | atom-text-editor.vim-mode-plus.normal-mode, 41 | atom-text-editor.vim-mode-plus.visual-mode, 42 | atom-text-editor.vim-mode-plus.operator-pending-mode, { 43 | .amu-paint-cursor & { 44 | &.vim-mode-plus-input-focused { 45 | .cursor { 46 | background: none; 47 | border-bottom-color: @base-color; 48 | } 49 | } 50 | } 51 | } 52 | 53 | atom-text-editor.vim-mode-plus-input-char-waiting { 54 | .amu-paint-cursor & { 55 | &.is-focused { 56 | .cursor { 57 | background: none; 58 | border-bottom-color: @base-color; 59 | } 60 | } 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /styles/panels.less: -------------------------------------------------------------------------------- 1 | @import "buttons.less"; 2 | 3 | .panel { 4 | &.bordered { 5 | border: 1px solid @base-border-color; 6 | border-radius: @component-border-radius; 7 | } 8 | 9 | .amu-panel-contrast & { 10 | background-color: darken(@app-background-color, 1.5%); 11 | } 12 | } 13 | 14 | .tool-panel, atom-panel { 15 | position: relative; 16 | background-color: @tool-panel-background-color; 17 | .text(normal); 18 | 19 | &.bottom, 20 | &.footer, 21 | &.panel-bottom, 22 | &.panel-footer { 23 | border-top: 1px solid @tool-panel-border-color; 24 | } 25 | 26 | .amu-panel-contrast & { 27 | background-color: darken(@app-background-color, 1.5%); 28 | } 29 | 30 | .amu-panel-shadows & { 31 | &.bottom, 32 | &.footer, 33 | &.panel-bottom, 34 | &.panel-footer { 35 | .z-depth-1; 36 | } 37 | 38 | &::after { 39 | content: ''; 40 | position: absolute; 41 | top: 0; 42 | width: 0.25rem; 43 | height: 100%; 44 | opacity: 0.1; 45 | pointer-events: none; 46 | z-index: 10000; 47 | } 48 | 49 | &.right { 50 | position: relative; 51 | z-index: 0; 52 | 53 | &::after { 54 | left: 0; 55 | background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); 56 | pointer-events: none; 57 | } 58 | } 59 | 60 | &.left { 61 | position: relative; 62 | z-index: 0; 63 | 64 | &::after { 65 | right: 0; 66 | background: linear-gradient(to left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); 67 | pointer-events: none; 68 | } 69 | } 70 | } 71 | } 72 | 73 | .inset-panel { 74 | position: relative; 75 | background-color: @inset-panel-background-color; 76 | } 77 | 78 | .is-blurred { 79 | .inset-panel, 80 | atom-panel {} 81 | } 82 | 83 | .panel-heading { 84 | .text(normal); 85 | background: none; 86 | font-size: @font-size * 1.5; 87 | font-weight: 300; 88 | 89 | .btn { 90 | padding-left: 8px; 91 | padding-right: 8px; 92 | @bg: lighten(@button-background-color, 10%); 93 | @hover: lighten(@button-background-color-hover, 10%); 94 | @selected: lighten(@button-background-color-selected, 10%); 95 | @text: lighten(@text-color, 10%); 96 | .btn-background(@bg, @hover, @selected, @text); 97 | } 98 | } 99 | -------------------------------------------------------------------------------- /styles/panes.less: -------------------------------------------------------------------------------- 1 | .pane-item { 2 | section, .section { 3 | .section-heading { 4 | font-size: 2.75rem; 5 | font-weight: 200; 6 | margin-bottom: 1.125em; 7 | color: @text-color; 8 | 9 | &.icon::before { 10 | font-size: 2.5rem; 11 | margin-right: 1em; 12 | } 13 | } 14 | } 15 | 16 | .panel { 17 | border-color: fadeout(@inset-panel-border-color, 30%); 18 | } 19 | 20 | &.preview-pane { 21 | .preview-header { 22 | padding: 1rem; 23 | background: none; 24 | border: none; 25 | } 26 | } 27 | } 28 | 29 | atom-pane-container { 30 | atom-pane { 31 | background-color: @app-background-color; 32 | border: none; 33 | } 34 | 35 | atom-pane-axis.horizontal > * { 36 | border-right: 1px solid darken(@app-background-color, 1%); 37 | 38 | &:last-child { 39 | border-right: none; 40 | } 41 | } 42 | 43 | atom-pane-axis.vertical > * { 44 | border-bottom: 1px solid darken(@app-background-color, 1%); 45 | 46 | &:last-child { 47 | border-bottom: none; 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /styles/progress.less: -------------------------------------------------------------------------------- 1 | @progress-height: .25rem; 2 | @progress-buffer-color: fade(@base-color, 20%); 3 | 4 | progress { 5 | -webkit-appearance: none; 6 | 7 | &::-webkit-progress-bar { 8 | background-color: transparent; 9 | } 10 | 11 | &::-webkit-progress-value { 12 | background-color: @base-color; 13 | } 14 | 15 | &:indeterminate { 16 | background-image: linear-gradient(-45deg, transparent 33%, @progress-buffer-color 33%, @progress-buffer-color 66%, transparent 66%); 17 | background-size: 1.5rem @progress-height * 3, 100% 100%, 100% 100%; 18 | -webkit-animation: progress-buffering 5s linear 12, progress-buffering 5s 60s steps(10) 108; 19 | } 20 | } 21 | 22 | @-webkit-keyframes progress-buffering { 23 | 100% { background-position: -100px 0px; } 24 | } 25 | 26 | @-webkit-keyframes animate-stripes { 27 | 100% { 28 | background-position: 100px 0; 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /styles/search-replace.less: -------------------------------------------------------------------------------- 1 | .find-and-replace, .project-find { 2 | .btn-group { 3 | box-shadow: none; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /styles/settings/checkbox.less: -------------------------------------------------------------------------------- 1 | .input-checkbox { 2 | border: .125em solid @base-color; 3 | background: none; 4 | position: relative; 5 | width: 1.5em; 6 | height: 1.5em; 7 | cursor: pointer; 8 | 9 | &:active:not(:checked) { 10 | background-color: fade(@base-color, 25%); 11 | } 12 | 13 | &:checked { 14 | background: @base-color; 15 | 16 | &::after, 17 | &::before { 18 | top: 1em; 19 | left: .5em; 20 | opacity: 0; 21 | border: .1em solid @accent-text-color; 22 | background-color: @accent-text-color; 23 | animation: fadeIn 125ms linear; 24 | animation-fill-mode: forwards; 25 | } 26 | 27 | &::before { 28 | width: .5em; 29 | } 30 | 31 | &::after { 32 | width: .85em; 33 | animation-delay: 125ms; 34 | } 35 | } 36 | 37 | &:focus { 38 | box-shadow: 0 0 1em fade(@base-color, 30%); 39 | } 40 | } 41 | 42 | .checkbox { 43 | padding-left: 2.5em; 44 | 45 | .setting-title, .setting-description { 46 | padding-left: 1rem; 47 | } 48 | } 49 | 50 | 51 | @keyframes fadeIn { 52 | from { opacity: 0; } 53 | to { opacity: 1; } 54 | } 55 | -------------------------------------------------------------------------------- /styles/settings/main.less: -------------------------------------------------------------------------------- 1 | @import "checkbox"; 2 | @import "package"; 3 | @import "radio"; 4 | @import "table"; 5 | 6 | .settings-view { 7 | .config-menu { 8 | background: none; 9 | min-width: 200px; 10 | 11 | .nav li { 12 | a { 13 | padding: 1.25em 1.5em; 14 | } 15 | 16 | &.active a { 17 | background-color: @base-color; 18 | color: @accent-text-color; 19 | } 20 | } 21 | 22 | .icon::before { 23 | margin-right: 1.5em; 24 | } 25 | 26 | } 27 | 28 | .settings-panel { 29 | .control-group + .control-group { 30 | margin-top: 2.5em; 31 | } 32 | } 33 | 34 | .amu-panel-contrast & { 35 | .config-menu { 36 | background-color: darken(@app-background-color, 1%); 37 | } 38 | } 39 | 40 | .amu-panel-shadows & { 41 | .config-menu { 42 | position: relative; 43 | 44 | &::after { 45 | background: linear-gradient(to left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); 46 | bottom: 0; 47 | content: ''; 48 | opacity: .1; 49 | position: absolute; 50 | right: 0; 51 | top: 0; 52 | width: .25em; 53 | } 54 | } 55 | } 56 | 57 | select.form-control { 58 | .select(); 59 | } 60 | 61 | input[type="color"] { 62 | border: none; 63 | height: 3rem; 64 | position: absolute; 65 | width: 3rem; 66 | } 67 | 68 | .themes-panel { 69 | .themes-picker-item { 70 | .select-container { 71 | align-items: center; 72 | display: flex; 73 | } 74 | } 75 | } 76 | 77 | .btn { 78 | &.active-theme-settings, 79 | &.active-syntax-settings { 80 | box-shadow: none; 81 | border-radius: 50%; 82 | flex-grow: 0; 83 | height: 2.5rem; 84 | line-height: 1; 85 | padding: 0; 86 | text-align: center; 87 | width: 2.75rem; 88 | } 89 | } 90 | 91 | .section { 92 | padding: 3rem; 93 | } 94 | 95 | .breadcrumb + .section { 96 | padding-top: 1rem; 97 | } 98 | } 99 | 100 | // Inputs, Selects, and More 101 | .select() { 102 | .select-arrow(@app-background-color); 103 | background-size: 1.5rem; 104 | background-color: transparent; 105 | background-repeat: no-repeat; 106 | background-position: right center; 107 | border-radius: 0; 108 | border: none; 109 | border-bottom: .125rem solid transparent; 110 | box-shadow: inset 0 -1px 0 fade(@text-color, 10%); 111 | color: @text-color; 112 | cursor: pointer; 113 | line-height: @component-line-height + @component-padding; 114 | height: @component-line-height + @component-padding; 115 | padding: 0; 116 | -webkit-appearance: none; 117 | 118 | &:hover { 119 | .select-arrow(@app-background-color); 120 | background-color: transparent; 121 | box-shadow: inset 0 -1px 0 fade(@text-color, 10%); 122 | } 123 | 124 | &:active, 125 | &:focus { 126 | .select-arrow(@app-background-color); 127 | background-color: transparent; 128 | border-color: @base-color; 129 | } 130 | 131 | option { 132 | background: @app-background-color; 133 | border: 1px solid fade(@text-color, 20%); 134 | color: @text-color; 135 | } 136 | } 137 | 138 | .checkbox, 139 | .radio { 140 | padding-left: 48px; 141 | 142 | .setting-description { 143 | margin-top: 0.5rem; 144 | } 145 | } 146 | -------------------------------------------------------------------------------- /styles/settings/package.less: -------------------------------------------------------------------------------- 1 | .settings-view { 2 | .packages .search-container { 3 | margin-bottom: 2rem; 4 | } 5 | 6 | .package-card { 7 | background-color: fade(@text-color, 5%); 8 | border-radius: @component-border-radius; 9 | margin-bottom: 1.5rem; 10 | .z-depth-1; 11 | 12 | &.disabled { 13 | background-color: fade(@text-color, 5%); 14 | opacity: .5; 15 | } 16 | 17 | &:hover { 18 | background-color: fade(@text-color, 5%); 19 | } 20 | 21 | .btn-group { 22 | box-shadow: none; 23 | 24 | .status-indicator { 25 | min-width: 2px; 26 | width: 2px; 27 | } 28 | } 29 | 30 | .meta-controls { 31 | .install-button, .uninstall-button { 32 | // Use px units to avoid icon jiggle 33 | &.is-installing, &.is-uninstalling { 34 | animation: spin 1s linear infinite; 35 | background: none; 36 | border: 2px solid @base-color; 37 | border-radius: 50%; 38 | border-right-color: transparent; 39 | font-size: 0; 40 | height: 32px; 41 | padding: 0; 42 | width: 32px; 43 | 44 | &::before { 45 | animation: spin 1s linear infinite reverse; 46 | height: 16px; 47 | margin: 0; 48 | position: relative; 49 | vertical-align: middle; 50 | width: 16px; 51 | } 52 | 53 | &:hover { 54 | box-shadow: none; 55 | } 56 | } 57 | } 58 | } 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /styles/settings/radio.less: -------------------------------------------------------------------------------- 1 | .input-radio { 2 | cursor: pointer; 3 | 4 | &:checked { 5 | background: @base-color; 6 | } 7 | 8 | &:active:not(:checked) { 9 | background: fade(@base-color, 25%); 10 | } 11 | 12 | &::before { 13 | background-color: @accent-text-color; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /styles/settings/table.less: -------------------------------------------------------------------------------- 1 | .settings-view { 2 | .table { 3 | background: lighten(@app-background-color, 5%); 4 | border-radius: @component-border-radius; 5 | margin: 48px 0; 6 | .z-depth-1; 7 | 8 | > thead, 9 | tbody { 10 | > tr { 11 | border: none; 12 | 13 | > td, 14 | > th { 15 | border-bottom: 1px solid fade(@text-color, 5%); 16 | } 17 | 18 | > th { 19 | height: 56px; 20 | line-height: 56px; 21 | padding: 0 24px; 22 | font-size: @font-size; 23 | font-weight: 600; 24 | color: lighten(@text-color, 15%); 25 | } 26 | 27 | > td { 28 | border-top: none; 29 | height: 48px; 30 | line-height: 48px; 31 | padding: 0 24px; 32 | } 33 | } 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /styles/sites.less: -------------------------------------------------------------------------------- 1 | .ui-site(@num, @color) { 2 | .ui-site-@{num} { 3 | background-color: @color; 4 | } 5 | } 6 | 7 | .ui-site(1, @ui-site-color-1); 8 | .ui-site(2, @ui-site-color-2); 9 | .ui-site(3, @ui-site-color-3); 10 | .ui-site(4, @ui-site-color-4); 11 | .ui-site(5, @ui-site-color-5); 12 | -------------------------------------------------------------------------------- /styles/spinner.less: -------------------------------------------------------------------------------- 1 | .loading-spinner { 2 | &-tiny, &-small, 3 | &-medium, &-large { 4 | background: none; 5 | border: .125rem solid @base-color; 6 | border-radius: 50%; 7 | border-top-color: transparent; 8 | animation: spin 2s linear infinite; 9 | 10 | &.idle { 11 | border: none; 12 | animation: none; 13 | } 14 | } 15 | 16 | } 17 | 18 | @keyframes spin { 19 | from { transform: rotate(0deg); } 20 | to { transform: rotate(360deg); } 21 | } 22 | -------------------------------------------------------------------------------- /styles/tabs.less: -------------------------------------------------------------------------------- 1 | @modified-icon-width: 8px; 2 | @tab-top-padding: 5px; 3 | @tab-bottom-border-height: 2px; 4 | @tab-max-width: 160px; 5 | 6 | .tab-bar { 7 | overflow-x: auto; 8 | overflow-y: hidden; 9 | border-radius: 0; 10 | height: @tab-height; 11 | max-height: @tab-height; 12 | 13 | &::-webkit-scrollbar { 14 | display: none; 15 | } 16 | 17 | .tab { 18 | position: relative; 19 | max-width: @tab-max-width; 20 | height: @tab-height; 21 | line-height: @tab-height; 22 | padding: 0 @component-padding; 23 | color: @text-color; 24 | transition: color 0.1s ease-in; 25 | font-size: 1em; 26 | font-weight: 300; 27 | .md-underline(@base-color); 28 | 29 | .close-icon { 30 | color: @text-color; 31 | cursor: pointer; 32 | line-height: @tab-height; 33 | right: @component-icon-padding; 34 | text-align: right; 35 | transform: scale(0); 36 | transition: transform 250ms @md-timing-function; 37 | will-change: opacity; 38 | z-index: 3; 39 | 40 | &:hover { 41 | color: inherit; 42 | } 43 | } 44 | 45 | &.modified:not(:hover) .close-icon { 46 | right: @component-padding + 4; 47 | top: ~'calc(50% - .135em)'; 48 | transform: scale(1); 49 | width: @modified-icon-width; 50 | height: @modified-icon-width; 51 | border-color: @base-color; 52 | opacity: 1; 53 | } 54 | 55 | &.modified:hover .close-icon { 56 | color: @text-color; 57 | 58 | &:hover { 59 | color: @text-color; 60 | } 61 | } 62 | 63 | .title { 64 | position: relative; 65 | z-index: 1; 66 | margin-top: -@tab-top-padding; 67 | padding-top: @tab-top-padding; 68 | padding-right: 10px; 69 | 70 | &.icon::before { 71 | font-size: 1.25em; 72 | margin-right: 1em; 73 | } 74 | } 75 | 76 | &:hover .close-icon { 77 | transform: scale(1); 78 | } 79 | 80 | &[data-type="TreeView"] { 81 | &.active::after { 82 | display: none; 83 | } 84 | } 85 | } 86 | 87 | .tab.active { 88 | color: @text-color-highlight; 89 | z-index: 1; 90 | 91 | .close-icon { 92 | color: @text-color; 93 | } 94 | } 95 | 96 | .tab:hover { 97 | color: @text-color-highlight; 98 | } 99 | 100 | .tab.active:hover .close-icon { 101 | color: @text-color; 102 | 103 | &:hover { 104 | color: inherit; 105 | } 106 | } 107 | 108 | .placeholder { 109 | height: @tab-height + @tab-top-padding + @tab-bottom-border-height; 110 | pointer-events: none; 111 | 112 | &:after { 113 | top: @tab-height + @tab-top-padding + @tab-bottom-border-height - 2px; 114 | } 115 | } 116 | 117 | // Panel contrast 118 | .amu-panel-contrast & { 119 | background-color: darken(@app-background-color, 1.5%); 120 | } 121 | 122 | // Tinted Tab Bar 123 | .amu-tinted-tab-bar & { 124 | background-color: @base-color; 125 | 126 | .tab { 127 | color: @accent-text-color; 128 | 129 | &.active { 130 | .md-underline(@accent-color); 131 | 132 | .close-icon { 133 | color: @accent-text-color; 134 | } 135 | } 136 | 137 | &.modified:not(:hover) .close-icon { 138 | border-color: @accent-text-color; 139 | } 140 | 141 | &.modified:hover .close-icon { 142 | color: @accent-text-color; 143 | 144 | &:hover { 145 | color: @accent-text-color; 146 | } 147 | } 148 | 149 | .close-icon { 150 | color: @accent-text-color; 151 | } 152 | } 153 | } 154 | 155 | .amu-compact-tab-bar & { 156 | height: @compact-tab-height; 157 | max-height: @compact-tab-height; 158 | 159 | .tab { 160 | height: @compact-tab-height; 161 | line-height: @compact-tab-height; 162 | 163 | .close-icon { 164 | line-height: @compact-tab-height; 165 | } 166 | } 167 | } 168 | 169 | .amu-stretched-tabs & { 170 | // Make the tabs span the whole tab bar width 171 | .tab { 172 | max-width: 100%; 173 | flex-grow: 2; 174 | text-align: center; 175 | &[data-type="TreeView"] { 176 | text-align: left; 177 | } 178 | } 179 | } 180 | } 181 | 182 | // Panel Shadows 183 | .amu-panel-shadows .tab-bar + .item-views { 184 | position: relative; 185 | 186 | &::before { 187 | content: ''; 188 | background: linear-gradient(to bottom, black, transparent); 189 | position: absolute; 190 | top: 0; 191 | left: 0; 192 | width: 100%; 193 | height: 3px; 194 | opacity: .125; 195 | pointer-events: none; 196 | z-index: 10; 197 | } 198 | } 199 | 200 | // File icons 201 | atom-pane .tab-bar .tab .title[data-path] { 202 | &::before { 203 | margin-right: @component-icon-padding; 204 | } 205 | 206 | body:not(.file-icons-coloured) &:not(.status-modified):not(.status-added):not(.status-ignored):not(.status-removed):not(.status-renamed)::before { 207 | color: @text-color !important; 208 | 209 | .amu-tinted-tab-bar & { 210 | color: @accent-text-color !important; 211 | } 212 | } 213 | } 214 | -------------------------------------------------------------------------------- /styles/text.less: -------------------------------------------------------------------------------- 1 | h1, 2 | h2, 3 | h3 { 4 | line-height: 1em; 5 | margin-bottom: 15px; 6 | } 7 | 8 | h1 { 9 | font-size: 2em; 10 | font-weight: 200; 11 | } 12 | 13 | h2 { 14 | font-size: 1.5em; 15 | } 16 | 17 | h3 { 18 | font-size: 1.2em; 19 | } 20 | 21 | p { 22 | line-height: 1.6; 23 | margin-bottom: 15px; 24 | } 25 | 26 | label { 27 | font-weight: normal; 28 | } 29 | 30 | pre { 31 | box-shadow: none; 32 | color: @text-color; 33 | background: @inset-panel-background-color; 34 | border-radius: @component-border-radius; 35 | border: none; 36 | margin: 0; 37 | } 38 | 39 | code { 40 | .text(highlight); 41 | background: @background-color-highlight; 42 | border-radius: @component-border-radius; 43 | } 44 | 45 | .markdown-preview code { 46 | text-shadow: none; 47 | } 48 | 49 | .selected { 50 | .text(highlight); 51 | } 52 | 53 | .text-smaller { 54 | font-size: 0.9em; 55 | } 56 | 57 | .text-subtle { 58 | .text(subtle); 59 | } 60 | 61 | .text-highlight { 62 | .text(highlight); 63 | } 64 | 65 | .text-error { 66 | .text(error); 67 | } 68 | 69 | .text-info { 70 | .text(info); 71 | 72 | &:hover { 73 | color: @text-color-info; 74 | } 75 | } 76 | 77 | .text-warning { 78 | .text(warning); 79 | 80 | &:hover { 81 | color: @text-color-warning; 82 | } 83 | } 84 | 85 | .text-success { 86 | .text(success); 87 | 88 | &:hover { 89 | color: @text-color-success; 90 | } 91 | } 92 | 93 | .highlight { 94 | color: @text-color-highlight; 95 | font-weight: bold; 96 | text-shadow: none; 97 | background-color: @background-color-highlight; 98 | border-radius: @component-border-radius; 99 | padding: 1px 3px; 100 | } 101 | 102 | .highlight-color(@name, @color, @text-color) { 103 | .highlight-@{name} { 104 | color: lighten(saturate(@text-color, 0%), 60%); 105 | font-weight: bold; 106 | text-shadow: none; 107 | background-color: fadeout(@color, 30%); 108 | border-radius: @component-border-radius; 109 | padding: 1px 3px; 110 | } 111 | } 112 | .highlight-color(info, @background-color-info, @text-color-info); 113 | .highlight-color(warning, @background-color-warning, @text-color-warning); 114 | .highlight-color(error, @background-color-error, @text-color-error); 115 | .highlight-color(success, @background-color-success, @text-color-success); 116 | 117 | .results-view .path-details.list-item { 118 | color: darken(@text-color-highlight, 18%); 119 | } 120 | 121 | .text .icon::before, .text.icon::before { 122 | margin: 0 4px; 123 | } 124 | -------------------------------------------------------------------------------- /styles/title-bar.less: -------------------------------------------------------------------------------- 1 | .title-bar { 2 | background: @app-background-color; 3 | border-bottom: none; 4 | color: @text-color; 5 | font-size: @font-size; 6 | 7 | .amu-panel-contrast & { 8 | background: darken(@app-background-color, 2%); 9 | } 10 | 11 | .amu-tinted-tab-bar & { 12 | background: @base-color; 13 | color: @accent-text-color; 14 | } 15 | 16 | .amu-panel-contrast.amu-tinted-tab-bar & { 17 | background: darken(@base-color, 5%); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /styles/tooltips.less: -------------------------------------------------------------------------------- 1 | @tip-background-color: @md-grey-700; 2 | @tip-text-color: @md-grey-50; 3 | 4 | .tooltip { 5 | white-space: nowrap; 6 | transition: opacity 250ms; 7 | font-size: @font-size * .9; 8 | 9 | .keystroke { 10 | font-family: Helvetica, Arial, sans-serif; 11 | color: @tip-text-color; 12 | padding: 0 @font-size * .5; 13 | border-radius: @component-border-radius; 14 | display: inline-block; 15 | vertical-align: middle; 16 | border: 1px solid rgba(0, 0, 0, 0.25); 17 | box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.125); 18 | margin-left: @component-padding / 2; 19 | margin-right: -@component-padding / 2.5; 20 | } 21 | 22 | &.in { 23 | opacity: 1; 24 | } 25 | 26 | .tooltip-inner { 27 | line-height: @font-size * 1.8; 28 | border-radius: @component-border-radius; 29 | background-color: @tip-background-color; 30 | color: @tip-text-color; 31 | white-space: nowrap; 32 | max-width: none; 33 | } 34 | 35 | &.top .tooltip-arrow { 36 | border-top-color: @tip-background-color; 37 | } 38 | 39 | &.top-left .tooltip-arrow { 40 | border-top-color: @tip-background-color; 41 | } 42 | 43 | &.top-right .tooltip-arrow { 44 | border-top-color: @tip-background-color; 45 | } 46 | 47 | &.right .tooltip-arrow { 48 | border-right-color: @tip-background-color; 49 | } 50 | 51 | &.left .tooltip-arrow { 52 | border-left-color: @tip-background-color; 53 | } 54 | 55 | &.bottom .tooltip-arrow { 56 | border-bottom-color: @tip-background-color; 57 | } 58 | 59 | &.bottom-left .tooltip-arrow { 60 | border-bottom-color: @tip-background-color; 61 | } 62 | 63 | &.bottom-right .tooltip-arrow { 64 | border-bottom-color: @tip-background-color; 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /styles/tree-view.less: -------------------------------------------------------------------------------- 1 | .tree-view { 2 | font-size: 1em; 3 | background: @tree-view-background-color; 4 | 5 | .selected::before { 6 | background: fade(@text-color, 5%); 7 | } 8 | 9 | &:focus { 10 | .selected::before { 11 | background: @base-color; 12 | } 13 | } 14 | 15 | .amu-panel-contrast & { 16 | background-color: darken(@app-background-color, 1.5%); 17 | } 18 | } 19 | 20 | .tree-view-resizer { 21 | .tree-view-resize-handle { 22 | width: .5rem; 23 | } 24 | } 25 | 26 | .focusable-panel { 27 | opacity: 1; 28 | 29 | &:focus { 30 | .selected { 31 | color: @accent-text-color; 32 | 33 | &::before { 34 | background: @base-color; 35 | } 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /styles/ui-mixins.less: -------------------------------------------------------------------------------- 1 | // Pattern matching; ish is cray. 2 | // http://lesscss.org/#-pattern-matching-and-guard-expressions 3 | 4 | .text(normal) { 5 | font-weight: normal; 6 | color: @text-color; 7 | text-shadow: none; 8 | } 9 | 10 | .text(subtle) { 11 | font-weight: normal; 12 | color: @text-color-subtle; 13 | text-shadow: none; 14 | } 15 | 16 | .text(highlight) { 17 | font-weight: normal; 18 | color: @text-color-highlight; 19 | } 20 | 21 | .text(selected) { 22 | .text(highlight) 23 | } 24 | 25 | .text(info) { 26 | color: @text-color-info; 27 | text-shadow: none; 28 | } 29 | 30 | .text(success) { 31 | color: @text-color-success; 32 | text-shadow: none; 33 | } 34 | 35 | .text(warning) { 36 | color: @text-color-warning; 37 | text-shadow: none; 38 | } 39 | 40 | .text(error) { 41 | color: @text-color-error; 42 | text-shadow: none; 43 | } 44 | 45 | // MD Shadows Helper 46 | .z-depth-1() { 47 | box-shadow: 0 0.0625rem 0.25rem rgba(0,0,0,0.12), 0 0.0625rem 0.25rem rgba(0,0,0,0.24); 48 | } 49 | .z-depth-2() { 50 | box-shadow: 0 0.2rem 0.375rem rgba(0,0,0,0.16), 0 0.2rem 0.375rem rgba(0,0,0,0.23); 51 | } 52 | .z-depth-3() { 53 | box-shadow: 0 0.625rem 1.25rem rgba(0,0,0,0.19), 0 0.375rem 0.375rem rgba(0,0,0,0.23); 54 | } 55 | .z-depth-4() { 56 | box-shadow: 0 0.875rem 1.75rem rgba(0,0,0,0.25), 0 0.625rem 0.625rem rgba(0,0,0,0.22); 57 | } 58 | .z-depth-5() { 59 | box-shadow: 0 1.125rem 2.25rem rgba(0,0,0,0.30), 0 1rem 0.75rem rgba(0,0,0,0.22); 60 | } 61 | 62 | // Underline Effect 63 | .md-underline(@underline-color) { 64 | position: relative; 65 | 66 | &::after { 67 | content: ''; 68 | position: absolute; 69 | bottom: 0; 70 | left: 0; 71 | width: 100%; 72 | height: 2px; 73 | background: @underline-color; 74 | transform: scaleX(0); 75 | will-change: transform; 76 | } 77 | 78 | .amu-use-animations & { 79 | &::after { 80 | transition: transform 250ms; 81 | } 82 | } 83 | 84 | &.active, &.is-focused, &:focus { 85 | &::after { 86 | transform: scaleX(1); 87 | } 88 | } 89 | } 90 | 91 | //