app/assets/stylesheets/common.scss

   1 .diff_file_header a,
   2 .file_stats a {
   3   color:$style_color;
   4 }
   5
   6
   7 /** LAYOUT **/
   8
   9 .container {
  10   padding-top:0;
  11   z-index:5;
  12 }
  13
  14 .container .content {
  15   margin:0 0;
  16 }
  17
  18 .container  .sidebar {
  19   width: 200px;
  20   height:100%;
  21   min-height:450px;
  22   float:right;
  23 }
  24
  25 /**
  26  * Common header style
  27  *
  28  */
  29 header {
  30   /* Account box */
  31   .account-box {
  32     position: absolute;
  33     right: 0;
  34     top: 13px;
  35     z-index: 10000;
  36     width: 128px;
  37     font-size: 11px;
  38     float: right;
  39     display: block;
  40     cursor: pointer;
  41     img {
  42       border-radius: 4px;
  43       right: 0px;
  44       position: absolute;
  45       width: 33px;
  46       height: 33px;
  47       display: block;
  48       top: 0;
  49       &:after {
  50         content: " ";
  51         display: block;
  52         position: absolute;
  53         top: 0;
  54         right: 0;
  55         left: 0;
  56         bottom: 0;
  57         float: right;
  58         border-radius: 5px;
  59         border: 1px solid rgba(255, 255, 255, 0.1);
  60         border-bottom: 0;
  61         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)));
  62         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));
  63         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));
  64         -webkit-background-origin: border-box;
  65         -moz-background-origin: border;
  66   background-origin: border-box; } } }
  67
  68   .account-box {
  69     &.hover {
  70     height: 138px; }
  71     &:hover > .account-links {
  72   display: block; } }
  73
  74   .account-links {
  75     background: #79C3E0;
  76     display: none;
  77     border-radius: 5px;
  78     width: 100px;
  79     margin-top: 0;
  80     float: right;
  81     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  82     position: relative;
  83     &:before {
  84       content: ".";
  85       width: 0;
  86       height: 0;
  87       position: absolute;
  88       border: 5px solid transparent;
  89       border-color: rgba(255, 255, 255, 0);
  90       border-bottom-color: #333;
  91       text-indent: -9999px;
  92       top: -10px;
  93       line-height: 0;
  94       right: 10px;
  95     z-index: 10; }
  96     background: #333;
  97     display: none;
  98     z-index: 100000;
  99     border-radius: 5px;
 100     width: 100px;
 101     position: absolute;
 102     right: 10px;
 103     top: 46px;
 104     margin-top: 0;
 105     float: right;
 106     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
 107     a {
 108       color: #EEE;
 109       padding: 6px 10px;
 110       display: block;
 111       text-shadow: none;
 112       border-bottom: 1px solid #555;
 113       &:hover {
 114         color:#eee;
 115         background: #444;
 116       }
 117     }
 118   }
 119
 120   .account-box.hover .arrow-up {
 121     top: 41px;
 122     right: 6px;
 123     position: absolute; }
 124
 125   .account-links a {
 126     &:first-child {
 127       -webkit-border-top-left-radius: 5px;
 128       -webkit-border-top-right-radius: 5px;
 129       -moz-border-radius-topleft: 5px;
 130       -moz-border-radius-topright: 5px;
 131       border-top-left-radius: 5px;
 132     border-top-right-radius: 5px; }
 133     &:last-child {
 134       -webkit-border-bottom-right-radius: 5px;
 135       -webkit-border-bottom-left-radius: 5px;
 136       -moz-border-radius-bottomright: 5px;
 137       -moz-border-radius-bottomleft: 5px;
 138       border-bottom-right-radius: 5px;
 139       border-bottom-left-radius: 5px;
 140   border-bottom: 0; } }
 141 }
 142
 143 /*
 144  *  Main Menu of Application
 145  *
 146  */
 147 nav.main_menu {
 148   border-radius: 4px;
 149   margin: auto;
 150   margin:30px 0;
 151   background:#eee;
 152   border:1px solid #bbb;
 153   height:38px;
 154   background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf));
 155   background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf);
 156   background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf);
 157   background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf);
 158   @include shade;
 159   .count {
 160     margin-left:3px;
 161     color: #aaa;
 162   }
 163   .label {
 164     background:$hover;
 165     text-shadow:none;
 166     color:$style_color;
 167   }
 168   a {
 169     // Landscape phone to portrait tablet
 170     @media (max-width: 1080px) { min-width:35px; }
 171     // Portrait tablet to landscape and desktop
 172     @media (min-width: 1080px) and (max-width: 1200px) { min-width:40px; }
 173     // Large desktop
 174     @media (min-width: 1200px) { min-width:55px; }
 175
 176     text-align:center;
 177     font-weight:bold;
 178     &:first-child{
 179       -webkit-border-top-left-radius: 4px;
 180       -webkit-border-bottom-left-radius: 4px;
 181       -moz-border-radius-topleft: 4px;
 182       -moz-border-radius-bottomleft: 4px;
 183       border-top-left-radius: 4px;
 184       border-bottom-left-radius: 4px;
 185     }
 186     padding: 10px 25px;
 187     display: inline-block;
 188     color: $style_color;
 189     position: relative;
 190     margin: 0;
 191     float:left;
 192     text-shadow:0 1px 1px white;
 193     &.home {
 194       background: url(home_icon.PNG) no-repeat center center;
 195       text-indent:-9999px;
 196       //min-width:40px;
 197       img {
 198         position:relative;
 199         top:4px;
 200       }
 201     }
 202     &.current {
 203       background-color:#D5D5D5;
 204       border-bottom: 2px solid #474D57;
 205       &:first-child{
 206         border-bottom:none;
 207       }
 208     }
 209   }
 210 }
 211 /*
 212  *  End of Main Menu
 213  *
 214  */
 215
 216 .profile_avatar_holder {
 217   float:left;
 218   width:60px;
 219   height:60px;
 220   margin-right:20px;
 221   img {
 222     width:60px;
 223     height:60px;
 224     background:#eee;
 225   }
 226 }
 227
 228
 229 .visible_link,
 230 .author_link {
 231   color: $link_color;
 232 }
 233
 234 .widget {
 235   @include shade;
 236   padding:20px;
 237   margin-bottom:20px;
 238   border: 1px solid #DDD;
 239   border-radius: 5px;
 240   background:#fafafa;
 241
 242   .link_holder {
 243     background:#eee;
 244     position:relative;
 245     left:-20px;
 246     top:20px;
 247     padding:10px 20px;
 248     width:100%;
 249     border-top:1px solid #ccc;
 250
 251     a {
 252       font-size:14px;
 253       color:#666;
 254     }
 255   }
 256 }
 257
 258 .help li { color:#111 }
 259
 260 .back_link {
 261   text-decoration:underline;
 262   font-size:14px;
 263   font-weight:bold;
 264   padding:10px 0;
 265   padding-bottom:0;
 266 }
 267
 268 .info_link {
 269   margin-right:5px;
 270   float:left;
 271
 272   img {
 273     width:20px;
 274   }
 275 }
 276
 277 .download_repo_link {
 278   background: url("images.png") no-repeat 0 -48px;
 279   padding-left:20px;
 280 }
 281
 282 .number {
 283   border-radius: 4px;
 284   text-shadow: none;
 285   background: rgba(0,0,0,.12);
 286   text-align: center;
 287   padding: 2px 4px;
 288   line-height:18px;
 289   margin-left:2px;
 290 }
 291
 292 table a code {
 293   position: relative;
 294   top: -2px;
 295   margin-right: 3px;
 296 }
 297
 298 .span12 hr{
 299  margin-top: 5px;
 300 }
 301
 302 .btn.padded {
 303   margin-right:3px;
 304   padding:4px 10px 4px;
 305 }
 306
 307 .loading {
 308   margin:20px auto;
 309   background: url(ajax_loader.gif) no-repeat center center;
 310   width:40px;
 311   height:40px;
 312 }
 313
 314 /** FLASH message **/
 315 #flash_container {
 316   height:50px;
 317   position:fixed;
 318   z-index:10001;
 319   top:0px;
 320   width:100%;
 321   margin-bottom:15px;
 322   overflow:hidden;
 323   background:white;
 324   cursor:pointer;
 325   border-bottom:1px solid #ccc;
 326
 327   h4 {
 328     color:#444;
 329     font-size:22px;
 330     padding-top:5px;
 331     margin:2px;
 332   }
 333 }
 334
 335 .git_url_wrapper {
 336   margin-right:50px
 337 }
 338 .file_stats {
 339   span {
 340     img {
 341       width:14px;
 342       float:left;
 343       margin-right:6px;
 344       padding:2px 0;
 345     }
 346   }
 347 }
 348
 349 .handle:hover {
 350   cursor:move;
 351 }
 352
 353 span.update-author {
 354   display:block;
 355 }
 356 span.update-author {
 357   color:#999;
 358   font-weight:normal;
 359   font-style:italic;
 360 }
 361 span.update-author strong {
 362   font-weight:bold;
 363   font-style: normal;
 364 }
 365
 366 /** UPDATE ITEM **/
 367 span.update-author {
 368   display:block;
 369 }
 370 /** END UPDATE ITEM **/
 371 .ajax-tab-loading {
 372   padding:40px;
 373   display:none;
 374 }
 375 .dashboard-loader {
 376   float:left;
 377   margin:10px;
 378   display:none;
 379 }
 380 .user-mention {
 381   color:#2FA0BB;
 382   font-weight:bold;
 383 }
 384
 385 a.project-update.titled {
 386   position:relative;
 387   padding-left:35% !important;
 388   .title-block {
 389     padding:10px;
 390     width:35%;
 391     position:absolute;
 392     left:0;
 393     top:0;
 394   }
 395 }
 396 /**
 397  * Project graph
 398  */
 399 #holder {
 400   cursor: move;
 401   height: 70%;
 402   overflow: hidden;
 403 }
 404
 405
 406
 407 input.git_clone_url {
 408   width:325px;
 409 }
 410
 411 .merge-request-form-holder {
 412   select {
 413     width:300px;
 414   }
 415 }
 416
 417 /** Issues **/
 418 #issue_assignee_id {
 419   width:300px;
 420 }
 421
 422 #new_issue_dialog textarea{
 423     height: 100px;
 424 }
 425
 426 .project_list_url {
 427   width:250px;
 428   background:#fff !important;
 429 }
 430
 431 /**
 432  *
 433  * COMMIT SHOw
 434  *
 435  */
 436 .diff_file {
 437   border:1px solid #CCC;
 438   margin-bottom:1em;
 439
 440   .diff_file_header {
 441     padding:5px 5px;
 442     border-bottom:1px solid #CCC;
 443     background: #eee;
 444   }
 445   .diff_file_content {
 446     overflow:auto;
 447     overflow-y:hidden;
 448     background:#fff;
 449     color:#333;
 450     font-size: 12px;
 451     font-family: 'Menlo', 'Courier New', 'andale mono','lucida console',monospace;
 452   }
 453   .diff_file_content_image {
 454     background:#eee;
 455     text-align:center;
 456     img {
 457       padding:50px;
 458       max-width:400px;
 459     }
 460   }
 461 }
 462
 463 .diff_file_content{
 464   table {
 465     border:none;
 466     margin:0px;
 467     padding:0px;
 468     tr {
 469       td {
 470         font-size:12px;
 471       }
 472     }
 473   }
 474   .old_line, .new_line {
 475     margin:0px;
 476     padding:0px;
 477     border:none;
 478     background:#F7F7F7;
 479     color:#aaa;
 480     padding: 0px 5px;
 481     border-right: 1px solid #ccc;
 482     text-align:right;
 483     min-width:35px;
 484     max-width:35px;
 485     width:35px;
 486     moz-user-select: none;
 487     -khtml-user-select: none;
 488     user-select: none;
 489     a {
 490       float:left;
 491       width:35px;
 492       font-weight:normal;
 493       color:#aaa;
 494       &:hover {
 495         text-decoration:underline;
 496       }
 497     }
 498   }
 499   .line_content {
 500     white-space:pre;
 501     height:14px;
 502     margin:0px;
 503     padding:0px;
 504     border:none;
 505     &.new {
 506       background: #CFD;
 507     }
 508     &.old {
 509       background: #FDD;
 510     }
 511     &.matched {
 512       color:#ccc;
 513       background:#fafafa;
 514     }
 515   }
 516 }
 517
 518 /** COMMIT BLOCK **/
 519 .commit-title{display: block;}
 520 .commit-title{margin-bottom: 10px}
 521 .commit-author, .commit-committer{display: block;color: #999; font-weight: normal; font-style: italic;}
 522 .commit-author strong, .commit-committer strong{font-weight: bold; font-style: normal;}
 523
 524 /** bordered list **/
 525 ul.bordered-list {
 526   margin:5px 0px;
 527   padding:0px;
 528   li {
 529     padding: 5px 0;
 530     border-bottom: 1px solid #EEE;
 531     overflow: hidden;
 532     display: block;
 533     margin:0px;
 534   }
 535 }
 536
 537 ul.bordered-list li:last-child { border:none }
 538
 539 .line_holder {
 540   &:hover {
 541     td {
 542       background: #FFFFCF !important;
 543     }
 544   }
 545 }
 546
 547 li.commit {
 548   .avatar {
 549     width:24px;
 550     top:-3px;
 551     margin-right:10px;
 552     margin-left:10px;
 553   }
 554
 555   code {
 556     padding:0px;
 557   }
 558 }
 559 p.time {
 560   color: #999;
 561   font-size: 90%;
 562   margin: 30px 3px 3px 2px;
 563 }
 564
 565
 566 /**
 567  * Dashboard page
 568  *
 569  */
 570 .dashboard_category {
 571   margin-bottom:30px;
 572   h3 a {
 573     color:#474D57;
 574     &:hover {
 575       text-decoration:underline;
 576     }
 577   }
 578
 579   .dashboard_block {
 580     .dash_project_item {
 581       margin-bottom:10px;
 582       border:none;
 583       padding:0px 5px;
 584       .project_link {
 585         color:#888;
 586         &:hover {
 587           color:#111;
 588           .ico.project {
 589             background-position:-209px -21px;
 590           }
 591         }
 592       }
 593       h4 {
 594         color:#666;
 595       }
 596     }
 597   }
 598 }
 599
 600 .styled_image {
 601   -webkit-border-radius: 4px;
 602   -moz-border-radius: 4px;
 603   border-radius: 4px;
 604   -moz-box-shadow: 0 0 5px #888;
 605   -webkit-box-shadow: 0 0 5px#888;
 606   box-shadow: 0 0 5px #888;
 607 }
 608
 609 .event_feed {
 610   min-height:40px;
 611   border-bottom:1px solid #ddd;
 612   .avatar {
 613     width:32px;
 614   }
 615   ul {
 616     margin-left:50px;
 617     margin-bottom:5px;
 618     .avatar {
 619       width:24px;
 620     }
 621   }
 622
 623   padding: 15px 5px;
 624   &:last-child { border:none }
 625   .wll:hover { background:none }
 626 }
 627
 628 .ico {
 629   background: url("images.png") no-repeat -85px -77px;
 630   width: 19px;
 631   height: 16px;
 632   float: left;
 633   position: relative;
 634   margin-right: 10px;
 635   top: 8px;
 636
 637   &.project {
 638     background-position:  -37px -77px;
 639   }
 640
 641   &.activities {
 642     background-position:-162px -22px;
 643   }
 644   &.projects {
 645     background-position:-209px -21px;
 646   }
 647 }
 648
 649 .leftbar {
 650   h5, .title {
 651     padding:5px 10px;
 652   }
 653
 654   h4 {
 655     font-size:14px;
 656     padding:2px 10px;
 657     color:#888;
 658     border-bottom:1px solid #eee;
 659   }
 660   a:last-child h4 { border:none; }
 661
 662   a:hover {
 663     h4 {
 664       color:#111;
 665       background:$hover;
 666       .ico.project {
 667         background-position:-209px -21px;
 668       }
 669     }
 670   }
 671 }
 672
 673 .btn {
 674   &.very_small {
 675     font-size:11px;
 676     padding:4px;
 677     margin:2px;
 678   }
 679 }
 680
 681 .mr_source_commit ,
 682 .mr_target_commit {
 683   .commit {
 684     list-style:none;
 685     margin-top:10px;
 686     &:hover {
 687       background:none;
 688     }
 689   }
 690 }
 691
 692 .prettyprint {
 693   background-color: #fefbf3;
 694   padding: 9px;
 695   border: 1px solid rgba(0,0,0,.2);
 696   -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1);
 697   -moz-box-shadow: 0 1px 2px rgba(0,0,0,.1);
 698   box-shadow: 0 1px 2px rgba(0,0,0,.1);
 699 }
 700
 701 .hint {
 702   font-style: italic;
 703   color: #999;
 704 }
 705
 706 .upvotes {
 707   font-size: 14px;
 708   font-weight: bold;
 709   color: #468847;
 710   text-align: right;
 711   padding: 4px;
 712   margin: 2px;
 713 }
 714
 715 /* Fix for readme code (stopped it from being yellow) */
 716 .readme {
 717   pre {
 718     background: white !important;
 719
 720     code {
 721       background: none !important;
 722     }
 723   }
 724 }
 725
 726 /**
 727  *  UI box element
 728  *  contains top, middle, bottom blocks
 729  *
 730  */
 731 .main_box {
 732   @extend .borders;
 733   @extend .prepend-top-20;
 734   @extend .append-bottom-20;
 735   border-width:1px;
 736
 737   img { max-width: 100%; }
 738
 739   pre {
 740     code {
 741       background: none !important;
 742     }
 743   }
 744
 745   .top_box_content,
 746   .middle_box_content,
 747   .bottom_box_content {
 748     padding:20px;
 749
 750     pre {
 751       background: none !important;
 752       margin:0;
 753       border:none;
 754       padding:0;
 755     }
 756   }
 757
 758   .middle_box_content {
 759     border-radius:0;
 760     border:none;
 761     font-size:12px;
 762     background-color:#f5f5f5;
 763     border:none;
 764     border-top:1px solid #eee;
 765   }
 766
 767   .bottom_box_content {
 768     border-top:1px solid #eee;
 769   }
 770 }
 771
 772 .highlight_word {
 773   background:#EEDC94;
 774 }
 775
 776 .status_info {
 777   font-size:14px;
 778   padding:5px 15px;
 779   line-height:24px;
 780   width:60px;
 781   text-align:center;
 782   float:left;
 783   margin-right:20px;
 784 }
 785
 786 .arrow{
 787   background: #E3E5EA;
 788   padding: 5px;
 789   margin-top:5px;
 790   border-radius: 5px;
 791   text-shadow: none;
 792   color: #999;
 793   line-height: 16px;
 794   font-weight:bold;
 795 }
 796
 797 .thin_area{
 798   height: 150px;
 799 }
 800
 801 .gitlab_pagination {
 802   span a { color:$link_color; }
 803   .prev, .next, .current, .page a {
 804     padding:10px;
 805   }
 806   .current {
 807     border-bottom:2px solid $style_color;
 808   }
 809 }
 810
 811 // Fixes alignment on notes.
 812 .new_note {
 813   label {
 814     text-align:left;
 815   }
 816 }
 817
 818 .new_note {
 819   .input-file {
 820     font: 500px monospace;
 821     opacity:0;
 822     filter: alpha(opacity=0);
 823     position: absolute;
 824     z-index: 1;
 825     top:0;
 826     right:0;
 827     padding:0;
 828     margin: 0;
 829   }
 830
 831   .file_upload {
 832     position: absolute;
 833     right:14px;
 834     top:7px;
 835   }
 836
 837   div.attachments {
 838     position:relative;
 839     width: 350px;
 840     height: 36px;
 841     overflow:hidden;
 842     margin:0 0 5px !important;
 843   }
 844   .file_name {
 845     line-height:30px;
 846     width:240px;
 847     height:28px;
 848     overflow:hidden;
 849   }
 850 }
 851
 852 // Fix issue with notes & lists creating a bunch of bottom borders.
 853 li.note {
 854   img { max-width:100% }
 855   .note-title {
 856     li {
 857       border-bottom:none !important;
 858     }
 859     .file {
 860       padding-left:20px;
 861       background:url("icon-attachment.png") no-repeat left center;
 862     }
 863   }
 864 }
 865
 866 .markdown {
 867   img {
 868     max-width:100%;
 869   }
 870 }
 871
 872 .wiki_content code, .readme code{
 873   background-color: inherit;
 874 }
 875
 876 .team_member_show {
 877   td:first-child {
 878     color:#aaa;
 879   }
 880 }
 881
 882 .remember_me {
 883   text-align:left;
 884 }
 885
 886
 887 /**
 888  * Milestones list
 889  *
 890  */
 891
 892 .milestone {
 893   @extend .wll;
 894 }