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

Merge pull request #733 from atom/bo-theme-buttons

Browse Source 
Add styled buttons to themes
This commit is contained in:
Ben Ogle
2013-08-20 11:22:26 -07:00
parent d89e95dc54 4c0ffe122d
commit 14b5308bb3
13 changed files with 98 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
themes/atom-dark-ui/archive-view.less
View File

@@ -10,11 +10,11 @@
}
.summary {
background-image: -webkit-linear-gradient(@highlight-background-color-2, @highlight-background-color-1);
background-image: -webkit-linear-gradient(@background-color-highlight-2, @background-color-highlight-1);
border: 1px solid rgba(0, 0, 0, 0.5);
padding: 5px;
box-shadow:
inset 0 1px 0 @highlight-background-color-1,
inset 0 1px 0 @background-color-highlight-1,
inset 0 -1px 0 rgba(255, 255, 255, 0.02);
}
}

30
themes/atom-dark-ui/buttons.less Normal file
View File

@@ -0,0 +1,30 @@
@import "ui-colors";
.btn-toggle.btn-group {
.btn {
font-weight: bold;
background: @button-color-1;
color: @text-color-3;
font-size: 12px;
padding: 3px;
border: none;
border-left: 1px solid @border-color-2;
&:hover{ background: @button-color-hover-1; }
&.enabled{
color: @accent-color-info-1;
background: @button-color-active-1;
box-shadow: inset 1px 1px 1px @background-color-highlight-1;
}
}
.btn:first-child {
border-left: none;
border-bottom-left-radius: 2px;
border-top-left-radius: 2px;
}
.btn:last-child {
border-bottom-right-radius: 2px;
border-top-right-radius: 2px;
}
}

10
themes/atom-dark-ui/command-panel.less
View File

@@ -5,7 +5,7 @@
background-color: @background-color-2;
color: #dedede;
border-top: 1px solid rgba(0, 0, 0, 0.5);
box-shadow: inset 0 1px 0 @highlight-background-color-1;
box-shadow: inset 0 1px 0 @background-color-highlight-1;
padding: 10px;
.btn {
@@ -15,11 +15,11 @@
}
.command-panel .header {
background-image: -webkit-linear-gradient(@highlight-background-color-2, @highlight-background-color-1);
background-image: -webkit-linear-gradient(@background-color-highlight-2, @background-color-highlight-1);
border: 1px solid rgba(0, 0, 0, 0.5);
padding: 5px;
box-shadow:
inset 0 1px 0 @highlight-background-color-1,
inset 0 1px 0 @background-color-highlight-1,
inset 0 -1px 0 rgba(255, 255, 255, 0.02);
margin-bottom: 0;
border-top-right-radius: 3px;
@@ -56,12 +56,12 @@
.command-panel .preview-list .path.selected .path-details,
.command-panel .preview-list li.operation.selected {
background-color: @highlight-background-color-1;
background-color: @background-color-highlight-1;
}
.command-panel .preview-list:focus .path.selected .path-details,
.command-panel .preview-list:focus li.operation.selected {
background-color: @highlight-background-color-1;
background-color: @background-color-highlight-1;
}
.command-panel .preview-list .path {

1
themes/atom-dark-ui/package.cson
View File

@@ -12,4 +12,5 @@
'archive-view'
'collaboration'
'overlay'
'buttons'
]

2
themes/atom-dark-ui/select-list.less
View File

@@ -40,7 +40,7 @@
}
.selected {
background-color: @highlight-background-color-2;
background-color: @background-color-highlight-2;
}
.right,

4
themes/atom-dark-ui/status-bar.less
View File

@@ -2,14 +2,14 @@
.status-bar {
background-color: @background-color-2;
box-shadow: inset 0 1px 0 @highlight-background-color-1;
box-shadow: inset 0 1px 0 @background-color-highlight-1;
border-top: 1px solid rgba(0, 0, 0, 0.8);
color: @text-color-4;
}
.status-bar .grammar-name:hover {
color: #fff;
border: 1px solid @highlight-background-color-1;
border: 1px solid @background-color-highlight-1;
border-radius: 2px;
}

4
themes/atom-dark-ui/tabs.less
View File

@@ -13,8 +13,8 @@
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 @highlight-background-color-1,
inset -1px 0 0 @highlight-background-color-1;
inset 1px 0 0 @background-color-highlight-1,
inset -1px 0 0 @background-color-highlight-1;
color: #b9bdc1;
}

6
themes/atom-dark-ui/tree-view.less
View File

@@ -23,12 +23,12 @@
.tree-view .selected > .highlight {
background-color: transparent;
background-image: -webkit-linear-gradient(@highlight-background-color-2, fadeout(@highlight-background-color-2, 3%));
background-image: -webkit-linear-gradient(@background-color-highlight-2, fadeout(@background-color-highlight-2, 3%));
}
.tree-view:focus .selected > .highlight {
background-color: @highlight-background-color-3;
background-image: -webkit-linear-gradient(@highlight-background-color-3, fadeout(@highlight-background-color-3, 3%));
background-color: @background-color-highlight-3;
background-image: -webkit-linear-gradient(@background-color-highlight-3, fadeout(@background-color-highlight-3, 3%));
}
.tree-view:focus .directory.selected > .header > .name,

12
themes/atom-dark-ui/ui-colors.less
View File

@@ -20,9 +20,9 @@
// Main color, darker, lighter.
// Supposed to match up with the background color indices
@highlight-background-color-1: rgba(255, 255, 255, 0.05);
@highlight-background-color-2: rgba(255, 255, 255, 0.1);
@highlight-background-color-3: rgba(255, 255, 255, 0.2);
@background-color-highlight-1: rgba(255, 255, 255, 0.05);
@background-color-highlight-2: rgba(255, 255, 255, 0.1);
@background-color-highlight-3: rgba(255, 255, 255, 0.2);
// These match up to the background colors as well.
@border-color-1: rgba(255, 255, 255, 0.05);
@@ -51,4 +51,8 @@
@dark-background-color-1: #1b1c1e;
@dark-background-color-2: #19191a;
@text-color-4: #969696;
@text-color-4: #969696;
@button-color-1: #303030;
@button-color-hover-1: #353536;
@button-color-active-1: #404040;

29
themes/atom-light-ui/buttons.less Normal file
View File

@@ -0,0 +1,29 @@
@import "ui-colors";
.btn-toggle.btn-group {
.btn {
font-weight: bold;
background: @button-color-1;
color: @text-color-3;
font-size: 12px;
padding: 3px;
border: none;
border-left: 1px solid @border-color-3;
&:hover, &.enabled:hover{ background: @button-color-hover-1; }
&.enabled{
color: @accent-color-info-1;
background: @button-color-active-1;
}
}
.btn:first-child {
border-left: none;
border-bottom-left-radius: 2px;
border-top-left-radius: 2px;
}
.btn:last-child {
border-bottom-right-radius: 2px;
border-top-right-radius: 2px;
}
}

6
themes/atom-light-ui/editor.less
View File

@@ -4,8 +4,12 @@
border: 1px solid rgba(0, 0, 0, 0.2);
border-bottom: 1px solid rgba(180, 180, 180, 0.3);
border-right: 1px solid rgba(180, 180, 180, 0.3);
background-color: #aaa;
background-color: @background-color-3;
color: @text-color-1;
.cursor {
border-color: #000;
}
}
.editor.mini .selection .region {

1
themes/atom-light-ui/package.cson
View File

@@ -12,4 +12,5 @@
'image-view'
'archive-view'
'collaboration'
'buttons'
]

13
themes/atom-light-ui/ui-colors.less
View File

@@ -19,14 +19,14 @@
@background-color-3: #f9f9f9;
// Highlight color for background corresponding in index to background-color
@background-highlight-color-1: #f9f9f9;
@background-highlight-color-2: #cad5d8;
@background-highlight-color-3: #e2e2e2;
@background-color-highlight-1: #f9f9f9;
@background-color-highlight-2: #cad5d8;
@background-color-highlight-3: #e2e2e2;
// Border color for background corresponding in index to background-color.
@border-color-1: #ccc;
@border-color-2: #999;
@border-color-3: #ccc;
@border-color-3: rgba(255, 255, 255, .4);
// Bright color, darker then lighter.
// Info colors are generally blue
@@ -45,3 +45,8 @@
@accent-color-success-1: #1fe977;
@accent-color-success-2: #17ca65;
@accent-color-success-3: #58f79d;
// Colors that are not standard for themes.
@button-color-1: rgba(0,0,0,.15);
@button-color-hover-1: rgba(0,0,0,.2);
@button-color-active-1: rgba(0,0,0,.1);