Download as
Browse Code »

Commit 85954621a33a5be40baaa07d9cfc1b8a0fc7ebea

Authored by Dmitriy Zaporozhets
1 parent 421451cf
Exists in master and in 4 other branches 6-8-stable, 7-0-stable, 7-0-stable-spb, spb-stable

new UI theme - mars

Showing 2 changed files with 321 additions and 0 deletions   Show diff stats
app/assets/stylesheets/main.scss
  Diff comments   View file @8595462
... ... @@ -71,6 +71,11 @@ $hover: #FDF5D9;
71 71 @import "ui_basic.scss";
72 72  
73 73 /**
  74 + * UI mars theme
  75 + */
  76 +@import "ui_mars.scss";
  77 +
  78 +/**
74 79 * Most of application styles placed here.
75 80 * This file represent common UI that should not be changed between themes
76 81 * or project restyling like form width or user avatar class or commit title
... ...
app/assets/stylesheets/ui_mars.scss 0 → 100644
  Diff comments   View file @8595462
... ... @@ -0,0 +1,316 @@
  1 +/**
  2 + * This file represent some UI that can be changed
  3 + * during web app restyle or theme select.
  4 + *
  5 + * Next items should be placed there
  6 + * - link colors
  7 + * - header styles
  8 + * - main menu styles
  9 + *
  10 + */
  11 +.ui_mars {
  12 +
  13 + /*
  14 + * Common styles
  15 + *
  16 + */
  17 + a {
  18 + color: $link_color;
  19 + &:hover {
  20 + text-decoration:none;
  21 + color: $style_color;
  22 + }
  23 + }
  24 +
  25 +
  26 + /*
  27 + * Application Header
  28 + *
  29 + */
  30 + header {
  31 + width:100%;
  32 + padding:0;
  33 + margin:0;
  34 + top:1px;
  35 + left:0;
  36 +
  37 +
  38 + background: #474D57 url('bg-header.png') repeat-x bottom;
  39 +
  40 + z-index:10;
  41 + height:60px;
  42 +
  43 + .search-input {
  44 + background:#474D57;
  45 + border-color:#888;
  46 + }
  47 + .app_logo {
  48 + width:230px;
  49 + float:left;
  50 + position:relative;
  51 + top:-4px;
  52 +
  53 + a {
  54 + float:left;
  55 +
  56 + h1 {
  57 +
  58 + background: url('images.png') no-repeat -3px -7px;
  59 + width: 65px;
  60 + height: 26px;
  61 + margin: 5px 0;
  62 + padding: 0;
  63 + display: block;
  64 + float: left;
  65 + text-indent: -1000em;
  66 +
  67 + }
  68 +
  69 + &.home {
  70 + img {
  71 + display:none
  72 +
  73 + }
  74 + }
  75 + &.admin_link {
  76 + width:16px;
  77 + height:16px;
  78 + padding: 5px;
  79 + border: 1px solid #888;
  80 + border-radius: 4px;
  81 + margin: 0px;
  82 + background:#474D57 ;
  83 + margin-left:20px;
  84 + margin-top:4px;
  85 + &:hover {
  86 + background:#f7f7f7;
  87 + }
  88 + img {
  89 + width:16px;
  90 + }
  91 + }
  92 + }
  93 + }
  94 + .wrapper {
  95 + margin:auto;
  96 + min-width:$min_app_width;
  97 + max-width:$max_app_width;
  98 + position:relative;
  99 + padding:15px 0;
  100 +
  101 + .top_panel_content {
  102 + margin:0 $app_padding;
  103 + }
  104 + }
  105 +
  106 + .project_name {
  107 + float:left;
  108 + width:400px;
  109 + margin:0;
  110 + margin-right:30px;
  111 + font-size:20px;
  112 + line-height:34px;
  113 + font-weight:bold;
  114 + color:#fff;
  115 + text-shadow: 0 1px 1px #111;
  116 + }
  117 +
  118 + .git_url_wrapper {
  119 + padding:0px;
  120 + margin:0px;
  121 + float:left;
  122 +
  123 + .git-url {
  124 + padding:0px;
  125 + margin:0px;
  126 + font-size: 12px;
  127 + margin-right:10px;
  128 + border-radius: 4px;
  129 + -moz-border-radius: 4px;
  130 + color: #666;
  131 + border: 1px solid #AAA;
  132 + padding: 0 10px 0 30px;
  133 + background: transparent url('images.png') no-repeat 8px -42px;
  134 + width: 260px;
  135 + height:26px;
  136 + }
  137 + }
  138 +
  139 + /* Account box */
  140 + .account-box {
  141 + position: absolute;
  142 + right: 0;
  143 + top: 13px;
  144 + z-index: 10000;
  145 + width: 128px;
  146 + font-size: 11px;
  147 + float: right;
  148 + display: block;
  149 + cursor: pointer;
  150 + img {
  151 + border-radius: 4px;
  152 + right: 20px;
  153 + position: absolute;
  154 + width: 33px;
  155 + height: 33px;
  156 + display: block;
  157 + top: 0;
  158 + &:after {
  159 + content: " ";
  160 + display: block;
  161 + position: absolute;
  162 + top: 0;
  163 + right: 0;
  164 + left: 0;
  165 + bottom: 0;
  166 + float: right;
  167 + border-radius: 5px;
  168 + border: 1px solid rgba(255, 255, 255, 0.1);
  169 + border-bottom: 0;
  170 + background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 0.15)), to(rgba(0, 0, 0, 0.25))), -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(255, 255, 255, 0)), color-stop(0.5, rgba(255, 255, 255, 0.1)), color-stop(0.501, rgba(255, 255, 255, 0)), color-stop(1, rgba(255, 255, 255, 0)));
  171 + background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.25)), -moz-linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
  172 + background: linear-gradient(top, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.25)), linear-gradient(left top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
  173 + -webkit-background-origin: border-box;
  174 + -moz-background-origin: border;
  175 + background-origin: border-box; } } }
  176 +
  177 + .account-box {
  178 + &.hover {
  179 + height: 138px; }
  180 + &:hover > .account-links {
  181 + display: block; } }
  182 +
  183 + .account-links {
  184 + background: #79C3E0;
  185 + display: none;
  186 + border-radius: 5px;
  187 + width: 100px;
  188 + margin-top: 0;
  189 + float: right;
  190 + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  191 + position: relative;
  192 + &:before {
  193 + content: ".";
  194 + width: 0;
  195 + height: 0;
  196 + position: absolute;
  197 + border: 5px solid transparent;
  198 + border-color: rgba(255, 255, 255, 0);
  199 + border-bottom-color: #333;
  200 + text-indent: -9999px;
  201 + top: -10px;
  202 + line-height: 0;
  203 + right: 10px;
  204 + z-index: 10; }
  205 + background: #333;
  206 + display: none;
  207 + z-index: 100000;
  208 + border-radius: 5px;
  209 + width: 100px;
  210 + position: absolute;
  211 + right: 20px;
  212 + top: 46px;
  213 + margin-top: 0;
  214 + float: right;
  215 + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  216 + a {
  217 + color: #EEE;
  218 + padding: 6px 10px;
  219 + display: block;
  220 + text-shadow: none;
  221 + border-bottom: 1px solid #555;
  222 + &:hover {
  223 + background: #444; } } }
  224 +
  225 + .account-box.hover .arrow-up {
  226 + top: 41px;
  227 + right: 6px;
  228 + position: absolute; }
  229 +
  230 + .account-links a {
  231 + &:first-child {
  232 + -webkit-border-top-left-radius: 5px;
  233 + -webkit-border-top-right-radius: 5px;
  234 + -moz-border-radius-topleft: 5px;
  235 + -moz-border-radius-topright: 5px;
  236 + border-top-left-radius: 5px;
  237 + border-top-right-radius: 5px; }
  238 + &:last-child {
  239 + -webkit-border-bottom-right-radius: 5px;
  240 + -webkit-border-bottom-left-radius: 5px;
  241 + -moz-border-radius-bottomright: 5px;
  242 + -moz-border-radius-bottomleft: 5px;
  243 + border-bottom-right-radius: 5px;
  244 + border-bottom-left-radius: 5px;
  245 + border-bottom: 0; } }
  246 +
  247 + }
  248 + /*
  249 + * End of Application Header
  250 + *
  251 + */
  252 +
  253 + /*
  254 + * Main Menu of Application
  255 + *
  256 + */
  257 + nav.main_menu {
  258 + overflow:hidden;
  259 + border-radius: 4px;
  260 + margin: auto;
  261 + margin:30px $app_padding;
  262 + background:#eee;
  263 + border:1px solid #ccc;
  264 + height:38px;
  265 + background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf));
  266 + background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf);
  267 + background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf);
  268 + background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf);
  269 + @include shade;
  270 + .count {
  271 + color:#aaa;
  272 + margin-left:3px;
  273 + }
  274 + .label {
  275 + background:$hover;
  276 + text-shadow:none;
  277 + color:$style_color;
  278 + }
  279 + a {
  280 + font-weight:bold;
  281 + &:first-child{
  282 + -webkit-border-top-left-radius: 4px;
  283 + -webkit-border-bottom-left-radius: 4px;
  284 + -moz-border-radius-topleft: 4px;
  285 + -moz-border-radius-bottomleft: 4px;
  286 + border-top-left-radius: 4px;
  287 + border-bottom-left-radius: 4px;
  288 + }
  289 + padding: 10px 25px;
  290 + display: inline-block;
  291 + color: $style_color;
  292 + border-right: 1px solid #d5d5d5;
  293 + position: relative;
  294 + box-shadow: 1px 0 0 rgba(255, 255, 255, 0.1);
  295 + margin: 0;
  296 + float:left;
  297 + text-shadow:0 1px 1px white;
  298 + &.home {
  299 + background: url(home_icon.PNG) no-repeat center center;
  300 + text-indent:-9999px;
  301 + min-width:40px;
  302 + img {
  303 + position:relative;
  304 + top:4px;
  305 + }
  306 + }
  307 + &.current {
  308 + background-color:#DDD;
  309 + }
  310 + }
  311 + }
  312 + /*
  313 + * End of Main Menu
  314 + *
  315 + */
  316 +}
... ...