Browse Source

New tabs look.

Ralfp 12 years ago
parent
commit
3f27bfefa9

+ 2 - 4
static/admin/css/admin.css

@@ -909,10 +909,8 @@ td.avatar-big,th.avatar-big,td.avatar-normal,th.avatar-normal,td.avatar-small,th
 .navbar img.avatar-small{margin:-10px 0px;position:relative;bottom:1px;}
 .navbar img.avatar-small{margin:-10px 0px;position:relative;bottom:1px;}
 .page-header .avatar-normal{width:42px;height:42px;margin:-10px 0px;position:relative;top:-3px;}
 .page-header .avatar-normal{width:42px;height:42px;margin:-10px 0px;position:relative;top:-3px;}
 .tabs-header{border-bottom:none;padding-bottom:0px;}.tabs-header .nav-tabs{margin-bottom:0px;}
 .tabs-header{border-bottom:none;padding-bottom:0px;}.tabs-header .nav-tabs{margin-bottom:0px;}
-.nav-tabs li a:link,.nav-tabs li a:active,.nav-tabs li a:visited{opacity:0.6;filter:alpha(opacity=60);color:#333333;font-weight:bold;}
-.nav-tabs li i{margin-right:4px;}
-.nav-tabs li.active a:link,.nav-tabs li.active a:active,.nav-tabs li.active a:visited,.nav-tabs li.active a:hover{background-color:#fcfcfc;}.nav-tabs li.active a:link i,.nav-tabs li.active a:active i,.nav-tabs li.active a:visited i,.nav-tabs li.active a:hover i{background-image:url("../img/glyphicons-halflings.png");}
-.nav-tabs li.active a:link,.nav-tabs li.active a:active,.nav-tabs li.active a:visited,.nav-tabs li.active a:hover,.nav-tabs li a:hover{opacity:1;filter:alpha(opacity=100);}
+.nav-tabs li a:link,.nav-tabs li a:active,.nav-tabs li a:visited{font-weight:bold;}
+.nav-tabs li.active a:link,.nav-tabs li.active a:active,.nav-tabs li.active a:visited,.nav-tabs li.active a:hover{background-color:#fcfcfc;border-bottom:4px solid #0088cc;border-width:0px 0px 4px 0px;padding-top:9px;padding-bottom:5px;color:#333333;}
 .nav-tabs li.fallback{float:right;}.nav-tabs li.fallback a:link,.nav-tabs li.fallback a:active,.nav-tabs li.fallback a:visited,.nav-tabs li.fallback a:hover{border-bottom:none;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;margin-top:4px;padding:4px 12px;}
 .nav-tabs li.fallback{float:right;}.nav-tabs li.fallback a:link,.nav-tabs li.fallback a:active,.nav-tabs li.fallback a:visited,.nav-tabs li.fallback a:hover{border-bottom:none;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;margin-top:4px;padding:4px 12px;}
 td>ul.list-actions{list-style:none;margin:0px;overflow:auto;padding:0px;}td>ul.list-actions>li{float:left;margin:0px;padding:0px;}td>ul.list-actions>li>form{margin:0px;padding:0px;}
 td>ul.list-actions{list-style:none;margin:0px;overflow:auto;padding:0px;}td>ul.list-actions>li{float:left;margin:0px;padding:0px;}td>ul.list-actions>li>form{margin:0px;padding:0px;}
 td>ul.list-actions>li>a,td>ul.list-actions>li>form>button{background:none;border:none;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;display:block;margin:0px 3px;padding:2px 5px;}td>ul.list-actions>li>a:hover,td>ul.list-actions>li>form>button:hover{background-color:#0088cc;}td>ul.list-actions>li>a:hover i,td>ul.list-actions>li>form>button:hover i{background-image:url("../img/glyphicons-halflings-white.png");}
 td>ul.list-actions>li>a,td>ul.list-actions>li>form>button{background:none;border:none;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;display:block;margin:0px 3px;padding:2px 5px;}td>ul.list-actions>li>a:hover,td>ul.list-actions>li>form>button:hover{background-color:#0088cc;}td>ul.list-actions>li>a:hover i,td>ul.list-actions>li>form>button:hover i{background-image:url("../img/glyphicons-halflings-white.png");}

+ 7 - 17
static/admin/css/admin/navs.less

@@ -10,31 +10,21 @@
 }
 }
 
 
 .nav-tabs li {
 .nav-tabs li {
-  a:link, a:active, a:visited {
-    .opacity(60);
-    
-    color: @textColor;
+  a:link, a:active, a:visited {    
     font-weight: bold;
     font-weight: bold;
   }
   }
   
   
-  i {
-    margin-right: 4px;
-  }
-  
   &.active a:link, &.active a:active,
   &.active a:link, &.active a:active,
   &.active a:visited, &.active a:hover {
   &.active a:visited, &.active a:hover {
     background-color: @bodyBackground;
     background-color: @bodyBackground;
+    border-bottom: 4px solid @linkColor;
+    border-width: 0px 0px 4px 0px;
+    padding-top: (@baseLineHeight / 2) - 1px;
+    padding-bottom: (@baseLineHeight / 2) - 5px;
         
         
-    i {
-      background-image: url("@{iconSpritePath}");
-    }
-  }
-  
-  &.active a:link, &.active a:active,
-  &.active a:visited, &.active a:hover, a:hover {
-    .opacity(100);
+    color: @textColor;
   }
   }
-  
+    
   &.fallback {
   &.fallback {
     float:right;
     float:right;
     
     

+ 1 - 3
static/sora/css/sora.css

@@ -896,9 +896,7 @@ th.table-sort.sort-desc a:hover{border-bottom:3px solid #eca09a;padding-bottom:5
 .page-header h3 .avatar{width:28px;height:28px;}
 .page-header h3 .avatar{width:28px;height:28px;}
 .page-header h4 .avatar{width:22px;height:22px;}
 .page-header h4 .avatar{width:22px;height:22px;}
 .header-tabbed{border-bottom:none;padding-bottom:0px;margin-bottom:0px;}.header-tabbed .nav-tabs li a:link,.header-tabbed .nav-tabs li a:active,.header-tabbed .nav-tabs li a:visited{font-weight:bold;}
 .header-tabbed{border-bottom:none;padding-bottom:0px;margin-bottom:0px;}.header-tabbed .nav-tabs li a:link,.header-tabbed .nav-tabs li a:active,.header-tabbed .nav-tabs li a:visited{font-weight:bold;}
-.header-tabbed .nav-tabs li i{margin-right:4px;}
-.header-tabbed .nav-tabs li.active a:link,.header-tabbed .nav-tabs li.active a:active,.header-tabbed .nav-tabs li.active a:visited,.header-tabbed .nav-tabs li.active a:hover{background-color:#fcfcfc;}.header-tabbed .nav-tabs li.active a:link i,.header-tabbed .nav-tabs li.active a:active i,.header-tabbed .nav-tabs li.active a:visited i,.header-tabbed .nav-tabs li.active a:hover i{background-image:url("../img/glyphicons-halflings.png");}
-.header-tabbed .nav-tabs li.active a:link,.header-tabbed .nav-tabs li.active a:active,.header-tabbed .nav-tabs li.active a:visited,.header-tabbed .nav-tabs li.active a:hover,.header-tabbed .nav-tabs li a:hover{opacity:1;filter:alpha(opacity=100);}
+.header-tabbed .nav-tabs li.active a:link,.header-tabbed .nav-tabs li.active a:active,.header-tabbed .nav-tabs li.active a:visited,.header-tabbed .nav-tabs li.active a:hover{background-color:#fcfcfc;border-bottom:4px solid #0088cc;border-width:0px 0px 4px 0px;padding-bottom:7px;}
 .header-tabbed .nav-tabs li.fallback{float:right;}.header-tabbed .nav-tabs li.fallback a:link,.header-tabbed .nav-tabs li.fallback a:active,.header-tabbed .nav-tabs li.fallback a:visited,.header-tabbed .nav-tabs li.fallback a:hover{border-bottom:none;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;margin-top:4px;padding:4px 12px;}
 .header-tabbed .nav-tabs li.fallback{float:right;}.header-tabbed .nav-tabs li.fallback a:link,.header-tabbed .nav-tabs li.fallback a:active,.header-tabbed .nav-tabs li.fallback a:visited,.header-tabbed .nav-tabs li.fallback a:hover{border-bottom:none;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;margin-top:4px;padding:4px 12px;}
 .tabs-left{background-color:#f7f7f7;-webkit-border-radius:3px 0px 0px 3px;-moz-border-radius:3px 0px 0px 3px;border-radius:3px 0px 0px 3px;padding-left:8px;}.tabs-left ul{margin-bottom:0px;width:100%;}.tabs-left ul li.nav-header{font-size:100%;}
 .tabs-left{background-color:#f7f7f7;-webkit-border-radius:3px 0px 0px 3px;-moz-border-radius:3px 0px 0px 3px;border-radius:3px 0px 0px 3px;padding-left:8px;}.tabs-left ul{margin-bottom:0px;width:100%;}.tabs-left ul li.nav-header{font-size:100%;}
 .tabs-left ul li a,.tabs-left ul li a:link,.tabs-left ul li a:active,.tabs-left ul li a:visited{opacity:0.8;filter:alpha(opacity=80);font-weight:bold;}
 .tabs-left ul li a,.tabs-left ul li a:link,.tabs-left ul li a:active,.tabs-left ul li a:visited{opacity:0.8;filter:alpha(opacity=80);font-weight:bold;}

+ 4 - 13
static/sora/css/sora/navs.less

@@ -10,22 +10,13 @@
       font-weight: bold;
       font-weight: bold;
     }
     }
     
     
-    i {
-      margin-right: 4px;
-    }
-    
     &.active a:link, &.active a:active,
     &.active a:link, &.active a:active,
     &.active a:visited, &.active a:hover {
     &.active a:visited, &.active a:hover {
       background-color: @bodyBackground;
       background-color: @bodyBackground;
-          
-      i {
-        background-image: url("@{iconSpritePath}");
-      }
-    }
-    
-    &.active a:link, &.active a:active,
-    &.active a:visited, &.active a:hover, a:hover {
-      .opacity(100);
+      border-bottom: 4px solid @linkColor;
+      border-width: 0px 0px 4px 0px;
+      padding-top: (@baseLineHeight / 2) - 1px;
+      padding-bottom: (@baseLineHeight / 2) - 5px;
     }
     }
     
     
     &.fallback {
     &.fallback {

+ 1 - 1
templates/sora/users/profile.html

@@ -12,7 +12,7 @@
   <div class="avatar-height">
   <div class="avatar-height">
     <img src="{{ profile.get_avatar() }}" class="avatar pull-left" alt="{% trans %}Member Avatar{% endtrans %}" title="{% trans %}Member Avatar{% endtrans %}">
     <img src="{{ profile.get_avatar() }}" class="avatar pull-left" alt="{% trans %}Member Avatar{% endtrans %}" title="{% trans %}Member Avatar{% endtrans %}">
     <div class="pull-left">
     <div class="pull-left">
-      <h1>{{ profile.username }} <small>{% trans last_visit=profile.last_date|reldate|low %}Last seen {{ last_visit }}{% endtrans %}</small></h1>
+      <h1>{{ profile.username }} <small>{% trans last_visit=profile.last_date|reltimesince|low %}Last seen {{ last_visit }}{% endtrans %}</small></h1>
       <p class="lead">{% if profile.title or profile.rank.title %}{% if profile.title %}{{ _(profile.title) }}{% elif profile.rank.title %}{{ _(profile.rank.title) }}{% endif %}; {% endif %}<span class="muted">{% trans joined=profile.join_date|reldate|low %}Member since {{ joined }}{% endtrans %}</span></p>
       <p class="lead">{% if profile.title or profile.rank.title %}{% if profile.title %}{{ _(profile.title) }}{% elif profile.rank.title %}{{ _(profile.rank.title) }}{% endif %}; {% endif %}<span class="muted">{% trans joined=profile.join_date|reldate|low %}Member since {{ joined }}{% endtrans %}</span></p>
     </div>
     </div>
   </div>	
   </div>