Permalink
Browse files

Lil changes to ui

  • Loading branch information...
1 parent 56fd99c commit e1a3d391a85c7ab3ac425193142c1b0e0f8836e3 @marioestrada committed Jul 18, 2012
Showing with 31 additions and 25 deletions.
  1. +6 −18 README.md
  2. +13 −2 css/app.css
  3. +11 −4 css/app.styl
  4. +1 −1 index.html
View
@@ -1,26 +1,14 @@
-µTorrent and BitTorrent Touch UI (iPad and iPhone)
+µTorrent and BitTorrent Metro UI
==========================
-Touch UI for the remote µTorrent and BitTorrent web app.
-
-Build and Minify Javascript
-===================
-
-Requirements:
-
-1. Install Node JS
-1. Install NPM
-1. `npm install jake`
-1. `npm install node-minify`
-
-Then just run `jake`.
+Metro UI for the µTorrent and BitTorrent apps.
Stylesheets
===========
-The stylesheets are written using Less. They should be compiled, preferably with minifaction.
+The stylesheets are written using Stylus. They should be compiled, preferably with minification.
-One way to minify it:
+One way to compile is:
-1. `npm install less`
-2. `lessc --yui-compress css/app.less > css/app.css`
+1. `npm install -g stylus`
+2. `stylus --watch css/app.styl`
View
@@ -399,7 +399,7 @@ a {
position: absolute;
bottom: 0;
top: 0;
- z-index: 9;
+ z-index: 1;
color: #000;
overflow: hidden;
background-image: -webkit-linear-gradient(-45deg, rgba(255,255,255,0.075) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.075) 50%, rgba(255,255,255,0.075) 75%, transparent 75%, transparent);
@@ -422,7 +422,14 @@ a {
width: 100%;
}
#torrents .torrent.completed {
- border-color: #fff;
+ border-color: #86c440;
+}
+#torrents .torrent.completed::after {
+ border-top-color: #ccc !important;
+ border-right-color: #ccc !important;
+}
+#torrents .torrent.completed::before {
+ border-color: #ccc !important;
}
#torrents .torrent.completed .progress {
background: #fff;
@@ -462,6 +469,7 @@ a {
border-bottom: 15px solid transparent;
border-top: 15px solid #fff;
border-right: 15px solid #fff;
+ z-index: 10;
}
#torrents .torrent .back {
padding-top: 10px;
@@ -495,6 +503,9 @@ a {
height: 90px;
margin-right: 30px;
}
+.panel li a {
+ font-weight: 400;
+}
.panel li a:hover .icon {
background: rgba(255,255,255,0.15);
}
View
@@ -384,7 +384,7 @@ $side_width = 240px
position absolute
bottom 0
top 0
- z-index 9
+ z-index 1
color #000
overflow hidden
background-image -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .075) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .075) 50%, rgba(255, 255, 255, .075) 75%, transparent 75%, transparent)
@@ -399,7 +399,14 @@ $side_width = 240px
width 100%
&.completed
- border-color #fff
+ border-color $color_lime
+
+ &::after
+ border-top-color #ccc !important
+ border-right-color #ccc !important
+
+ &::before
+ border-color #ccc !important
.progress
background #fff
@@ -432,6 +439,7 @@ $side_width = 240px
border-bottom 15px solid transparent
border-top 15px solid #fff
border-right 15px solid #fff
+ z-index 10
.back
padding-top 10px
@@ -459,11 +467,10 @@ $side_width = 240px
text-align center
display inline-block
height 90px
- // float left
margin-right 30px
- // line-height 90px
a
+ font-weight 400
&:hover
.icon
background rgba(#fff, 0.15)
View
@@ -237,7 +237,7 @@ <h1 class="name">All Torrents</h1>
<div class="back">
<h1>Kumar&eacute;, 2012</h1>
<div class="tag">
- <span class="icon tag"></span> ClearBits
+ <span class="icon tag"></span> VODO
</div>
<div class="byline">

0 comments on commit e1a3d39

Please sign in to comment.