github/atom
1
1
Fork 0
mirror of https://github.com/atom/atom.git synced 2026-01-22 21:38:10 -05:00
Code Issues Packages Projects Releases Wiki Activity

Simplify ui-variables a ton

Browse Source
This commit is contained in:
Ben Ogle
2013-08-29 16:40:16 -07:00
parent d11b2118ba
commit 41a531391f
11 changed files with 52 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
themes/neue-dark-ui/buttons.less
View File

@@ -37,7 +37,7 @@
padding: @component-padding/2 @component-padding;
z-index: 0;
.btn-background(@button-background-color, @button-background-hover-color, @button-background-selected-color, @text-color);
.btn-background(@button-background-color, @button-background-color-hover, @button-background-color-selected, @text-color);
&.selected, &.selected:hover {
// we want the selected button to behave like the :hover button; it's on top of the other buttons.

2
themes/neue-dark-ui/editor.less
View File

@@ -9,7 +9,7 @@
}
.editor.editor-colors.mini.is-focused {
background-color: @input-background-highlight-color;
background-color: lighten(@input-background-color, 5%);
}
// FIXME: these should go in syntax themes?

4
themes/neue-dark-ui/lists.less
View File

@@ -51,7 +51,7 @@
// of the list item.
.selected:before {
content: '';
background-color: @tool-panel-background-highlight-color;
background-color: @background-color-highlight;
position: absolute;
left: 0;
right: 0;
@@ -113,7 +113,7 @@
// We want to highlight the background of the list items because we dont
// know their size.
li.selected {
background-color: @tool-panel-background-highlight-color;
background-color: @background-color-highlight;
&:before{ display: none; }
}

4
themes/neue-dark-ui/overlay.less
View File

@@ -5,7 +5,7 @@
background-color: @overlay-background-color;
padding: @component-padding;
border: 1px solid @overlay-border-color;
box-shadow: 0 0 10px @overlay-shadow-color;
box-shadow: 0 0 10px @base-border-color;
border-radius: @component-border-radius;
.editor.mini {
@@ -14,7 +14,7 @@
&.select-list ol.list-group, .select-list ol.list-group {
background-color: @overlay-inner-background-color;
background-color: lighten(@overlay-background-color, 3%);
li {
padding: @component-padding;

12
themes/neue-dark-ui/panels.less
View File

@@ -7,7 +7,7 @@
border-bottom: none;
padding: @component-padding - 2px @component-padding;
font-size: @font-size-base;
font-size: @font-size;
line-height: 1;
background-color: transparent;
@@ -19,8 +19,8 @@
position: relative; top: -1px;
@bg: lighten(@button-background-color, 10%);
@hover: lighten(@button-background-hover-color, 10%);
@selected: lighten(@button-background-selected-color, 10%);
@hover: lighten(@button-background-color-hover, 10%);
@selected: lighten(@button-background-color-selected, 10%);
@text: lighten(@text-color, 10%);
.btn-background(@bg, @hover, @selected, @text);
}
@@ -44,7 +44,7 @@
&.panel-bottom {
border-top: 1px solid @tool-panel-border-color;
box-shadow: inset 0 1px 0 @tool-panel-border-highlight-color;
box-shadow: inset 0 1px 0 @background-color-highlight;
}
&.panel-left {
@@ -55,8 +55,8 @@
border-radius: @component-border-radius;
border: 1px solid @tool-panel-border-color;
border-bottom-color: @tool-panel-border-highlight-color;
border-right-color: @tool-panel-border-highlight-color;
border-bottom-color: @background-color-highlight;
border-right-color: @background-color-highlight;
.panel-heading {
margin-right: 1px;

2
themes/neue-dark-ui/popover-list.less
View File

@@ -2,7 +2,7 @@
.select-list.popover-list {
background-color: @overlay-background-color;
-webkit-box-shadow: 0 0 3px 3px @overlay-shadow-color;
-webkit-box-shadow: 0 0 3px 3px @base-border-color;
padding: @component-padding/2;
border-radius: @component-border-radius;
border: 1px solid @overlay-border-color;

2
themes/neue-dark-ui/section.less
View File

@@ -9,7 +9,7 @@ section {
&.bordered {
margin: 0;
padding: @component-padding 0;
border-top: 1px solid @tool-panel-border-highlight-color;
border-top: 1px solid @background-color-highlight;
border-bottom: 1px solid @tool-panel-border-color;
&:first-child {

10
themes/neue-dark-ui/tabs.less
View File

@@ -2,7 +2,7 @@
.tab-bar {
height: @tab-height + 5px;
border-bottom: 4px solid darken(@tab-background-color-active, 10%);
border-bottom: 4px solid @tab-border-color;
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.2), 0 1px 0 rgba(0, 0, 0, 0.5);
margin-bottom: 1px;
}
@@ -12,12 +12,12 @@
line-height: @tab-height;
color: @text-color;
margin: 0 0 1px 1px;
background-image: -webkit-linear-gradient(@tab-background-color-inactive, darken(@tab-background-color-inactive, 10%));
background-image: -webkit-linear-gradient(@tab-background-color, darken(@tab-background-color, 10%));
box-shadow:
inset 0 2px 0 rgba(255, 255, 255, 0.1),
inset 0 1px 0 rgba(0, 0, 0, 1),
inset 1px 0 0 @tool-panel-background-highlight-color,
inset -1px 0 0 @tool-panel-background-highlight-color;
inset 1px 0 0 @background-color-highlight,
inset -1px 0 0 @background-color-highlight;
}
.tab:hover {
@@ -26,7 +26,7 @@
.tab.active {
height: @tab-height + 1px;
background-image: -webkit-linear-gradient(@tab-background-color-active, darken(@tab-background-color-active, 10%));
background-image: -webkit-linear-gradient(@tab-background-color-active, @tab-border-color);
color: @text-color-highlight;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
z-index: 2;

4
themes/neue-dark-ui/text.less
View File

@@ -29,7 +29,7 @@ pre {
code {
.text(highlight);
background: @badge-background-color;
background: @background-color-highlight;
border-radius: @component-border-radius;
}
@@ -49,7 +49,7 @@ code {
color: @text-color-highlight;
font-weight: bold;
text-shadow: none;
background-color: @badge-background-color;
background-color: @background-color-highlight;
border-radius: @component-border-radius;
padding: 1px 3px;
}

68
themes/neue-dark-ui/ui-variables.less
View File

@@ -1,50 +1,48 @@
@import "bootstrap/less/variables.less";
// Colors
@text-color: #aaa;
@text-color-highlight: #fff;
@text-color-subtle: #555;
@text-color-highlight: #fff;
@text-color-info: #5293d8;
@text-color-success: #1fe977;
@text-color-warning: #f78a46;
@text-color-error: #c00;
@text-color-success: #1fe977;
@background-color-info: #0098ff;
@background-color-success: #17ca65;
@background-color-warning: #ff4800;
@background-color-error: #c00;
@background-color-success: #17ca65;
@input-background-color: #212224;
@input-background-highlight-color: lighten(@input-background-color, 5%);
@input-border-color: rgba(0, 0, 0, 0.5);
@tool-panel-background-color: #1d1f21;
@tool-panel-background-highlight-color: rgba(255, 255, 255, 0.05);
@tool-panel-border-color: rgba(0, 0, 0, 0.5);
@tool-panel-border-highlight-color: rgba(255, 255, 255, 0.05);
@inset-panel-background-color: #161719;
@inset-panel-background-highlight-color: rgba(255, 255, 255, 0.07);
@panel-heading-background-color: #43484d;
@overlay-background-color: #202123;
@overlay-inner-background-color: #27292b;
@overlay-border-color: rgba(255, 255, 255, 0.05);
@overlay-shadow-color: rgba(0, 0, 0, 0.5);
@button-background-color: #43484d;
@button-background-hover-color: lighten(@button-background-color, 5%);
@button-background-selected-color: #5c6064;
@button-border-color: rgba(0, 0, 0, 0.5);
@background-color-highlight: rgba(255, 255, 255, 0.07);
@app-background-color: #333;
@workspace-background-color: lighten(@tool-panel-background-color, 5%);
@base-background-color: lighten(@tool-panel-background-color, 5%);
@base-border-color: rgba(0, 0, 0, 0.5);
@input-background-color: #212224;
@input-border-color: @base-border-color;
@tool-panel-background-color: #1d1f21;
@tool-panel-border-color: @base-border-color;
@inset-panel-background-color: #161719;
@inset-panel-border-color: @base-border-color;
@panel-heading-background-color: #43484d;
@panel-heading-border-color: transparent;
@overlay-background-color: #202123;
@overlay-border-color: @background-color-highlight;
@button-background-color: #43484d;
@button-background-color-hover: lighten(@button-background-color, 5%);
@button-background-color-selected: #5c6064;
@button-border-color: @base-border-color;
@tab-background-color: #292c2f;
@tab-background-color-active: @panel-heading-background-color;
@tab-background-color-inactive: #292c2f;
@tab-border-color: darken(@tab-background-color-active, 10%);
@site-color-1: #4dd157;
@site-color-2: #3facc1;
@@ -62,13 +60,7 @@
@component-padding: 10px;
@component-icon-padding: 5px;
@component-icon-size: 16px;
@component-line-height: @line-height-base * 1.25;
@component-line-height: 25px;
@component-border-radius: 2px;
@tab-height: 30px;
// Non-api variables
// Dont use these in your package! They may change, and all themes may not support them.
@badge-background-color: lighten(@tool-panel-background-color, 10%);

2
themes/neue-dark-ui/utilities.less
View File

@@ -19,5 +19,5 @@
.badge {
.text(highlight);
background: @badge-background-color;
background: @background-color-highlight;
}