Difference between revisions of "Template:NTNU Trondheim/Notebook/css/notebook"

(Created page with "ul.side-nav li.nb-divider { margin-left: -30px; border-top: 1px solid #ddd; height: 0; padding: 0; } div.nb-week { display: none; border-bottom: none; } ul.side-nav li.nb...")
 
Line 1: Line 1:
 +
 +
.column, .columns {
 +
    float: left;
 +
    padding: 0 5px;
 +
}
 +
 +
 +
.row .two {
 +
    width: 16.66667%;
 +
}
 +
 +
/* Nicolas Gallagher's micro clearfix */
 +
.row {
 +
    *zoom: 1;
 +
}
 +
 +
.row:before, .row:after {
 +
    content: "";
 +
    display: table;
 +
}
 +
 +
.row:after {
 +
    clear: both;
 +
}
 +
 +
/* Requires globals.css */
 +
.nav-bar {
 +
    height: 40px;
 +
    background: #4d4d4d;
 +
    margin-top: 20px;
 +
    padding: 0;
 +
}
 +
 +
.nav-bar > li {
 +
    float: left;
 +
    display: block;
 +
    position: relative;
 +
    padding: 0;
 +
    margin: 0;
 +
    border: 1px solid #333333;
 +
    border-right: none;
 +
    line-height: 38px;
 +
    -webkit-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset;
 +
    -moz-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset;
 +
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset;
 +
}
 +
 +
.nav-bar > li:first-child {
 +
    -webkit-box-shadow: 0 0 0;
 +
    -moz-box-shadow: 0 0 0;
 +
    box-shadow: 0 0 0;
 +
}
 +
 +
.nav-bar > li:last-child {
 +
    border-right: solid 1px #333333;
 +
    -webkit-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset, 1px 0 0 rgba(255, 255, 255, 0.2);
 +
    -moz-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset, 1px 0 0 rgba(255, 255, 255, 0.2);
 +
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset, 1px 0 0 rgba(255, 255, 255, 0.2);
 +
}
 +
 +
.nav-bar > li.active {
 +
    background: #2ba6cb;
 +
    border-color: #2284a1;
 +
}
 +
 +
.nav-bar > li.active > a {
 +
    color: white;
 +
    cursor: default;
 +
}
 +
 +
.nav-bar > li.active:hover {
 +
    background: #2ba6cb;
 +
    cursor: default;
 +
}
 +
 +
.nav-bar > li:hover {
 +
    background: #333333;
 +
}
 +
 +
.nav-bar > li > a {
 +
    color: #e6e6e6;
 +
}
 +
 +
.nav-bar > li ul {
 +
    margin-bottom: 0;
 +
}
 +
 +
.nav-bar > li .flyout {
 +
    display: none;
 +
}
 +
 +
.nav-bar > li.has-flyout > a:first-child {
 +
    padding-right: 36px;
 +
    position: relative;
 +
}
 +
 +
.nav-bar > li.has-flyout > a:first-child:after {
 +
    content: "";
 +
    display: block;
 +
    width: 0;
 +
    height: 0;
 +
    border: solid 4px;
 +
    border-color: #e6e6e6 transparent transparent transparent;
 +
    position: absolute;
 +
    right: 20px;
 +
    top: 17px;
 +
}
 +
 +
.nav-bar > li.has-flyout > a.flyout-toggle {
 +
    border-left: 0 !important;
 +
    position: absolute;
 +
    right: 0;
 +
    top: 0;
 +
    padding: 22px;
 +
    z-index: 2;
 +
    display: block;
 +
}
 +
 +
.nav-bar > li.has-flyout.is-touch > a:first-child {
 +
    padding-right: 55px;
 +
}
 +
 +
.nav-bar > li.has-flyout.is-touch > a.flyout-toggle {
 +
    border-left: 1px dashed #666;
 +
}
 +
 +
.nav-bar > li > a:first-child {
 +
    position: relative;
 +
    padding: 0 20px;
 +
    display: block;
 +
    text-decoration: none;
 +
    font-size: 14px;
 +
}
 +
 +
.nav-bar > li > input {
 +
    margin: 0 10px;
 +
}
 +
 +
.nav-bar.vertical {
 +
    height: auto;
 +
    margin-top: 0;
 +
}
 +
 +
.nav-bar.vertical > li {
 +
    float: none;
 +
    border-bottom: none;
 +
}
 +
 +
.nav-bar.vertical > li.has-flyout > a:first-child:after {
 +
    content: "";
 +
    display: block;
 +
    width: 0;
 +
    height: 0;
 +
    border: solid 4px;
 +
    border-color: transparent transparent transparent #e6e6e6;
 +
}
 +
 +
.nav-bar.vertical > li .flyout {
 +
    left: 100%;
 +
    top: -1px;
 +
}
 +
 +
.nav-bar.vertical > li .flyout.right {
 +
    left: auto;
 +
    right: 100%;
 +
}
 +
 +
/* Side Nav ---------------------- */
 +
ul.side-nav {
 +
    display: block;
 +
    list-style: none;
 +
    margin: 0;
 +
    padding: 17px 0;
 +
}
 +
 +
ul.side-nav li {
 +
    display: block;
 +
    list-style: none;
 +
    margin: 0 0 7px 0;
 +
}
 +
 +
ul.side-nav li a {
 +
    display: block;
 +
}
 +
 +
ul.side-nav li.active a {
 +
    color: #4d4d4d;
 +
    font-weight: bold;
 +
}
 +
 +
ul.side-nav li.inactive a {
 +
    color: #b31b1b;
 +
    font-weight: normal;
 +
}
 +
 +
ul.side-nav li.divider {
 +
    border-top: 1px solid #e6e6e6;
 +
    height: 0;
 +
    padding: 0;
 +
}
 +
 +
/* Notebook */
 
ul.side-nav li.nb-divider {
 
ul.side-nav li.nb-divider {
 
margin-left: -30px;
 
margin-left: -30px;

Revision as of 20:19, 23 June 2015

.column, .columns { 

   float: left;
   padding: 0 5px;

}


.row .two { 

   width: 16.66667%;

}

/* Nicolas Gallagher's micro clearfix */ .row { 

   *zoom: 1;

}

.row:before, .row:after { 

   content: "";
   display: table;

}

.row:after { 

   clear: both;

}

/* Requires globals.css */ .nav-bar { 

   height: 40px;
   background: #4d4d4d;
   margin-top: 20px;
   padding: 0;

}

.nav-bar > li { 

   float: left;
   display: block;
   position: relative;
   padding: 0;
   margin: 0;
   border: 1px solid #333333;
   border-right: none;
   line-height: 38px;
   -webkit-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset;
   -moz-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset;
   box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset;

}

.nav-bar > li:first-child { 

   -webkit-box-shadow: 0 0 0;
   -moz-box-shadow: 0 0 0;
   box-shadow: 0 0 0;

}

.nav-bar > li:last-child { 

   border-right: solid 1px #333333;
   -webkit-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset, 1px 0 0 rgba(255, 255, 255, 0.2);
   -moz-box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset, 1px 0 0 rgba(255, 255, 255, 0.2);
   box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2) inset, 1px 0 0 rgba(255, 255, 255, 0.2);

}

.nav-bar > li.active { 

   background: #2ba6cb;
   border-color: #2284a1;

}

.nav-bar > li.active > a { 

   color: white;
   cursor: default;

}

.nav-bar > li.active:hover { 

   background: #2ba6cb;
   cursor: default;

}

.nav-bar > li:hover { 

   background: #333333;

}

.nav-bar > li > a { 

   color: #e6e6e6;

}

.nav-bar > li ul { 

   margin-bottom: 0;

}

.nav-bar > li .flyout { 

   display: none;

}

.nav-bar > li.has-flyout > a:first-child { 

   padding-right: 36px;
   position: relative;

}

.nav-bar > li.has-flyout > a:first-child:after { 

   content: "";
   display: block;
   width: 0;
   height: 0;
   border: solid 4px;
   border-color: #e6e6e6 transparent transparent transparent;
   position: absolute;
   right: 20px;
   top: 17px;

}

.nav-bar > li.has-flyout > a.flyout-toggle { 

   border-left: 0 !important;
   position: absolute;
   right: 0;
   top: 0;
   padding: 22px;
   z-index: 2;
   display: block;

}

.nav-bar > li.has-flyout.is-touch > a:first-child { 

   padding-right: 55px;

}

.nav-bar > li.has-flyout.is-touch > a.flyout-toggle { 

   border-left: 1px dashed #666;

}

.nav-bar > li > a:first-child { 

   position: relative;
   padding: 0 20px;
   display: block;
   text-decoration: none;
   font-size: 14px;

}

.nav-bar > li > input { 

   margin: 0 10px;

}

.nav-bar.vertical { 

   height: auto;
   margin-top: 0;

}

.nav-bar.vertical > li { 

   float: none;
   border-bottom: none;

}

.nav-bar.vertical > li.has-flyout > a:first-child:after { 

   content: "";
   display: block;
   width: 0;
   height: 0;
   border: solid 4px;
   border-color: transparent transparent transparent #e6e6e6;

}

.nav-bar.vertical > li .flyout { 

   left: 100%;
   top: -1px;

}

.nav-bar.vertical > li .flyout.right { 

   left: auto;
   right: 100%;

}

/* Side Nav ---------------------- */ ul.side-nav { 

   display: block;
   list-style: none;
   margin: 0;
   padding: 17px 0;

}

ul.side-nav li { 

   display: block;
   list-style: none;
   margin: 0 0 7px 0;

}

ul.side-nav li a { 

   display: block;

}

ul.side-nav li.active a { 

   color: #4d4d4d;
   font-weight: bold;

}

ul.side-nav li.inactive a { 

   color: #b31b1b;
   font-weight: normal;

}

ul.side-nav li.divider { 

   border-top: 1px solid #e6e6e6;
   height: 0;
   padding: 0;

}

/* Notebook */ ul.side-nav li.nb-divider { margin-left: -30px; border-top: 1px solid #ddd; height: 0; padding: 0; }

div.nb-week { display: none; border-bottom: none; }

ul.side-nav li.nb-month { margin-left: -37px; border-top: 1px solid #ddd; height: 0; padding: 0; position: relative; }

li.nb-month div { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); position: absolute; top: 47px; font-weight: bold; }

div.nb-labels div { float: left; text-align:center; font-size:12px; font-weight:bold; padding:0px; width:106px; }

div.nb-filter img { margin: 0px 0px; }

div.filter-container { width: 100px; height: 100px; background-repeat: none; background-size: 100px 100px; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

div.filter-container img { height: 100px; }

div.filter-container img:nth-child(2) { position: absolute; top: 0; }

div#nb-alltech { float: right; }


div.nb-tech { display: none; padding: 2px 5px; background-color: #CACACA; }

div.nb-all, div.nb-all-i { font-family: 'Droid Sans', Helvetica, sans-serif; border-radius: 12px; text-align: center; font-weight: bold; padding: 3px 10px; display: inline; cursor: pointer; }

div.nb-all { margin: 2px 25px; border: 0px solid; border-color: #F2F2F2; background-color: #505050; color: #F2F2F2; /* text-shadow: -1px -1px 0 #8A8A8A, 1px -1px 0 #8A8A8A, -1px 1px 0 #8A8A8A, 1px 1px 0 #8A8A8A; */ }

div.nb-all-i { margin: 2px 24px; border: 1px solid; border-color: #8A8A8A; background-color: #F2F2F2; color: #8A8A8A; /* text-shadow: -1px -1px 0 #8A8A8A, 1px -1px 0 #8A8A8A, -1px 1px 0 #8A8A8A, 1px 1px 0 #8A8A8A; */ }

div.nb-only { margin: 2px 25px; border: 1px solid; border-color: #F2F2F2; border-radius: 15px; text-align: center; font-weight: bold; color: #F2F2F2; cursor: pointer; /* text-shadow: -1px -1px 0 #8A8A8A, 1px -1px 0 #8A8A8A, -1px 1px 0 #8A8A8A, 1px 1px 0 #8A8A8A; */ }

div.nb-only-i { margin: 2px 25px; border: 1px solid; border-color: #8A8A8A; border-radius: 15px; text-align: center; font-weight: bold; color: #8A8A8A; background-color: #F2F2F2; cursor: pointer; /* text-shadow: -1px -1px 0 #8A8A8A, 1px -1px 0 #8A8A8A, -1px 1px 0 #8A8A8A, 1px 1px 0 #8A8A8A; */ }

div.nb-only, div.nb-only-i, div.nb-all, div.nb-all-i { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

div.entry { width: auto; max-width: none; min-width: 0; min-height: 50px; margin: 0 0; background-size: 50px 50px; background-repeat: no-repeat; margin-bottom: 10px; }

div.entry:before, div.entry:after { content: ""; display: table; }

div.entry > div { padding-left: 65px; }

div.entry p { margin: 0px; }

div.entry div h6 { margin: 0px; font-weight: bold; }

div.nb-wet { background-image:url('https://static.igem.org/mediawiki/2015/6/6b/Team_NTNU_Trondheim_nb-wet-tc.png'); }

div.nb-dry { background-image:url('https://static.igem.org/mediawiki/2015/d/db/Team_NTNU_Trondheim_nb-dry-tc.png'); }

div.nb-model { background-image:url('https://static.igem.org/mediawiki/2015/e/e6/Team_NTNU_Trondheim_nb-model-tc.png'); }

div.nb-hprac { background-image:url('https://static.igem.org/mediawiki/2015/b/be/Team_NTNU_Trondheim_nb-hprac-tc.png'); }

div.nb-wiki { background-image:url('https://static.igem.org/mediawiki/2015/6/64/Team_NTNU_Trondheim_nb-wiki-tc.png'); }

div.nb-anim { background-image:url('https://static.igem.org/mediawiki/2015/9/9c/Team_NTNU_Trondheim_nb-pres-tc.png'); }

div.nb-only#wet-only { background: #40B249; }

div.nb-only#dry-only { background: #2D75B0; }

div.nb-only#model-only { background: #AD2029; }

div.nb-only#hprac-only { background: #E58A35; }

div.nb-only#wiki-only { background: #5D3697; }

div.nb-only#anim-only { background: #D5BA34; }

ul.side-nav h6 { margin: 0 0px 0px; }

ul.side-nav.ntbk-nav h6 { margin: 87px 0px 0px; }

table.check-off img { height: 20px; width: 20px; margin: auto; }

h6 { margin: 0 0; font-size: 14px; padding: 0 0; }