o(*'▽'*)/☆゜

frantic1048 · Mar 22, 2017 · c9aa0cf · c9aa0cf
1 parent 9ddf6d3
commit c9aa0cf
Show file tree

Hide file tree

Showing 12 changed files with 156 additions and 77 deletions.
diff --git a/README.md b/README.md
@@ -2,29 +2,21 @@
 
 An edge-less UI theme for Atom.
 
-![preview](https://i.imgur.com/XuCeIN6.png)
+**Preview - [Restia] background** :
 
-This theme is in early stage. Don't use.
+[Restia]: http://frantle.deviantart.com/art/Restia-Ashdoll-485496857
 
-TODO:
+![preview_restia_background](https://i.imgur.com/1w3ZzTW.jpg)
 
-- button style
-- cursor style
-- linter inline notify style
-- setting options support
-- ヾ(ﾟ∀ﾟ○)ﾂ
+**Preview - Solid background** :
 
----
+![preview_solid_background](https://i.imgur.com/YgVLsUA.png)
 
-Ok, you really want to use now ?
-
-```bash
-apm install frantic1048/Tia-ui
-```
+# Usage
 
 Enable Tia ui theme in Atom settings.
 
-Add follow line to your custom stylesheet, replace `<path to your loving image>` as you want. If needed, also add background-<option> to perfectly fit your flavor:
+Add follow lines to your custom stylesheet, replace `<path to your loving image>` as you want. If needed, also add `background-<option>` rules to perfectly fit your flavor:
 
 ```less
 atom-workspace {

diff --git a/index.less b/index.less
@@ -15,3 +15,4 @@
 @import "styles/tooltips";
 @import "styles/tree-view";
 @import "styles/utilities";
+@import "styles/settings-view";
diff --git a/package.json b/package.json
@@ -1,10 +1,10 @@
 {
   "name": "Tia-ui",
   "theme": "ui",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "description": "An edge-less UI theme for Atom",
   "license": "WTFPL",
-  "repository": "https://github.com/atom/Tia-ui",
+  "repository": "https://github.com/frantic1048/Tia-ui",
   "engines": {
     "atom": ">0.40.0"
   }

diff --git a/styles/atom.less b/styles/atom.less
@@ -32,3 +32,14 @@ atom-workspace {
 	  }
   }
 }
+
+.icon {
+	vertical-align: baseline;
+}
+
+atom-notifications{
+	atom-notification,
+	atom-notification.icon {
+		height: auto;
+	}
+}
diff --git a/styles/buttons.less b/styles/buttons.less
@@ -4,21 +4,35 @@
 .btn-background (@color, @hover-color, @selected-color, @text-color) {
   color: @text-color;
   background-color: transparent;
-  background-image: -webkit-linear-gradient(@color, darken(@color, 5%));
+  background-image: linear-gradient(to bottom, fade(@color, 25%), fade(darken(@color, 5%), 25%));
+  background-clip: border-box;
+  border-bottom: 2px solid transparent;
 
   &:focus {
     color: @text-color;
+    outline: none !important;
   }
+
   &:hover {
     color: @text-color-highlight;
-    background-image: -webkit-linear-gradient(@hover-color, darken(@hover-color, 5%));
+    background-color: transparent;
+    border-color: transparent;
+    background-image: linear-gradient(to bottom, fade(@hover-color, 25%), fade(darken(@hover-color, 5%), 25%));
+  }
+
+  &:active {
+    background-image: linear-gradient(to bottom, fade(@hover-color, 25%), fade(darken(@hover-color, 5%), 25%));
+    border-bottom-color: lighten(@background-color-info, 40%);
   }
+
   &.selected,
   &.selected:hover {
     color: @text-color-highlight;
-    background-image: -webkit-linear-gradient(darken(@selected-color, 5%), @selected-color);
+    border-bottom-color: @background-color-info;
+    transition: border-color 0.3s ease;
+    background-image: linear-gradient(to bottom, fade(darken(@selected-color, 5%), 25%), fade(@selected-color, 25%));
     &:hover {
-      background-image: -webkit-linear-gradient(@selected-color, darken(@selected-color, 5%));
+      background-image: linear-gradient(to bottom, fade(@selected-color, 25%), fade(darken(@selected-color, 5%), 25%));
     }
   }
 }
@@ -34,6 +48,10 @@
   .btn-background(@button-background-color, @button-background-color-hover, @button-background-color-selected, @text-color);
 }
 
+.btn.btn-default {
+  .btn-variant(@button-background-color);
+}
+
 .btn.btn-primary {
   .btn-variant(@background-color-info);
 }

diff --git a/styles/dropdowns.less b/styles/dropdowns.less
@@ -1,6 +1,5 @@
 @import "ui-variables";
 @import "ui-mixins";
-@import "octicon-mixins";
 
 .dropdown-menu {
   background-color: @overlay-background-color;

diff --git a/styles/editor.less b/styles/editor.less
@@ -1,20 +1,40 @@
 @import "ui-variables";
 @import "ui-mixins";
 
+.cursor-style() {
+  display: block;
+  color:transparent;
+  border-color:transparent;
+  background: @text-color-success;
+  box-shadow: 0 0 3px @text-color-success;
+  width:3px !important;
+  transition: background-color 0.2s  cubic-bezier(0.02, 0.7, 1.0, 0.1),
+              opacity 0.2s  cubic-bezier(0.02, 0.7, 1.0, 0.1)
+  ;
+}
+
 atom-text-editor[mini], atom-text-editor[mini]::shadow {
   color: @text-color-highlight;
   background-color: @input-background-color;
-  border: 1px solid @input-border-color;
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
   border-radius: @component-border-radius;
   padding-left: @component-padding/2;
 
-  .cursor { border-color: #fff; }
+  .cursor { .cursor-style(); }
   .selection .region { background-color: lighten(@input-background-color, 10%); }
+  .placeholder-text {
+    color: @text-color-subtle;
+  }
+}
+
+atom-text-editor[mini]:active, atom-text-editor[mini].active::shadow {
+  border-bottom:1px solid lighten(@background-color-info, 45%);
 }
 
 atom-text-editor[mini].is-focused, atom-text-editor[mini].is-focused::shadow {
+  border-bottom:1px solid lighten(@background-color-info, 5%);
   background-color: lighten(@input-background-color, 5%);
+  transition: border-color 0.3s ease;
   .selection .region { background-color: desaturate(@background-color-info, 50%); }
 }
 
@@ -27,9 +47,13 @@ atom-text-editor, atom-text-editor::shadow {
     opacity:0;
   }
 
+  .cursor {
+    .cursor-style();
+  }
+
   .line{
     &.cursor-line{
-      border-bottom:1px solid lighten(@text-color-info, 5%);
+      border-bottom:1px solid lighten(@background-color-info, 5%);
       background: fade(@background-color-info, 10%);
       &>span{
       }
@@ -44,20 +68,8 @@ atom-text-editor, atom-text-editor::shadow {
     z-index: 10;
     background:fade(@background-color-info, 15%);
 
-    // HACK:
-    // I meant to show left/right border
-    // for first/last line
-    // of a block of selection
-    // but *-of-type cannot achieve this.
-    // because blank line causes a new `section`
-    transform: translate3d(-3px, 0, 0);
-
-    &:first-of-type {
-      border-left:3px solid lighten(@text-color-info, 5%);
-    }
-    &:last-of-type {
-      border-right:3px solid lighten(@text-color-info, 5%);
-    }
+    border-left:3px solid lighten(@background-color-info, 5%);
+    border-right:3px solid lighten(@background-color-info, 5%);
   }
 
   .highlight.bracket-matcher .region{
@@ -118,4 +130,20 @@ atom-text-editor, atom-text-editor::shadow {
      }
    }
   }
+
+  // Linter bubble
+  #linter-inline {
+    color: #eee;
+    background: rgba(0, 0, 0, 0.6);
+    border-radius: 0px;
+    &::before {
+    }
+  }
+}
+
+.badge {
+  color: #fff;
+  background: fade(@background-color-highlight, 20%);
+  text-shadow: none !important;;
+  border-radius: @component-border-radius;
 }
diff --git a/styles/overlays.less b/styles/overlays.less
@@ -3,8 +3,7 @@
 atom-panel.modal, .overlay {
   color: @text-color;
   background-color: @overlay-background-color;
-  padding: @component-padding;
-  border: 1px solid @overlay-border-color;
+  padding: 0px;
   box-shadow: 0 0 10px @base-border-color;
   border-radius: @component-border-radius;
 
@@ -15,11 +14,10 @@ atom-panel.modal, .overlay {
   .select-list ol.list-group,
   &.select-list ol.list-group {
 
-    background-color: lighten(@overlay-background-color, 3%);
+    background-color: @overlay-background-color;
 
     li {
       padding: @component-padding;
-      border-bottom: 1px solid @overlay-background-color;
 
       &.two-lines { padding: @component-padding/2 @component-padding; }
 

diff --git a/styles/panels.less b/styles/panels.less
@@ -4,8 +4,6 @@
 
 .panel {
   &.bordered {
-    border: 1px solid @base-border-color;
-    border-radius: @component-border-radius;
   }
 }
 
@@ -70,14 +68,19 @@ status-bar {
     align-items: center;
   }
 
+  .flexbox-repaint-hack {
+    display: flex;
+    justify-content: space-between;
+  }
+
   linter-bottom-container {
     linter-bottom-tab {
       background: @tab-bar-tab-background-color;
       border: none;
       border-bottom: 2px solid @tab-bar-tab-background-color;
       &.active {
         background: fade(lighten(@base-background-color, 30%), 30%);
-        border-bottom: 2px solid @text-color-info;
+        border-bottom: 2px solid @background-color-info;
         transition: border-color 0.2s ease;
       }
       &:active {
@@ -102,4 +105,11 @@ status-bar {
       line-height: 26px;
     }
   }
+
+  // package update view
+  .package-updates-status-view {
+    display: flex;
+    padding-left: 8px;
+    padding-right: 3px;
+  }
 }
diff --git a/styles/settings-view.less b/styles/settings-view.less
@@ -0,0 +1,15 @@
+.settings-view {
+  .config-menu {
+    border: none;
+  }
+
+  .package-card {
+    border-radius: @component-border-radius;
+    border: none;
+    background: @tab-bar-tab-background-color;
+
+    &:hover {
+      background: fade(lighten(@tab-bar-tab-background-color, 25%), 30%);
+    }
+  }
+}
diff --git a/styles/tabs.less b/styles/tabs.less
@@ -54,15 +54,22 @@
       position: relative;
       z-index: 1;
       padding-right: 10px;
+      &.title.icon::before {
+        font-size: @modified-icon-width;
+        margin-right: 4px;
+        width: @modified-icon-width;
+        height: @modified-icon-width;
+      }
     }
   }
 
   .tab.active {
     z-index: 1;
     color: @text-color-highlight;
     height: @tab-height + 1px;
-    background: fade(lighten(@base-background-color, 30%), 30%);
-    border-bottom: 3px solid @text-color-info;
+    background: fade(lighten(@base-background-color,  30%), 30%);
+
+    border-bottom: 3px solid @background-color-info;
     transition: border-color 0.3s ease;
 
     .close-icon {