Team:Concordia/CSS/Base

From 2013.igem.org

(Difference between revisions)

Revision as of 16:35, 12 September 2013

/* Reset MediaWiki CSS */ /**********************/

contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {

   display:none;}

top-section {

   border: none;
   height: 0px;}

content {

   border: none;}

{ margin: 0; padding: 0; }

body.index { overflow: hidden; }

.contents, body>.container {

       background-image: url('../images/geometry.png');

background-repeat: repeat-x repeat-y; background-position: center; background-attachment: fixed; }

.contents.project {

       background-image: url("../images/lab_setup.jpg");

background-repeat: repeat-x repeat-y; background-position: center; background-attachment: fixed; }

.contents.notebook {

       background-image: url("../images/modeling.jpg");

background-repeat: no-repeat; background-position: center; background-attachment: fixed; }

/* Radial menu CSS */ /*******************/ /* generic styles for button & circular menu */ .radial-menu-container {

   height: 100%;

}

.ctrl { position: absolute; top: 30%; left: 40%; font: 1.5em/1.13 Verdana, sans-serif; transition: .5s; } /* generic link styles */ a.ctrl, .ctrl a { display: block; opacity: .56; background: #c9c9c9; color: #7a8092; background-image: url('../images/logo_b_w.png'); background-size: 12.5em; background-repeat: no-repeat; text-align: center; vertical-align: center; text-decoration: none; text-shadow: 0 -1px dimgrey; } a.ctrl:hover, a.ctrl:focus { background-image: url('../images/logo.png'); opacity: 1; }

.ctrl a:hover, .ctrl a:focus {

       opacity: 1;

} a.ctrl:focus, .ctrl a:focus { outline: none; } .button { z-index: 2; margin: -.625em; width: 12.5em; height: 12.5em; border-radius: 50%; box-shadow: 0 0 3px 1px white; } /* circular menu */ .tip { z-index: 1; /**outline: dotted 1px white;/**/ margin: -5em; margin-left: -9em; left: 43%; top: 30%; width: 25em; height: 25em; transform: scale(.001); -ms-transform: scale(.001); -webkit-transform: scale(.001); list-style: none; opacity: 0; }

/* the ends of the menu */ /* .tip:before, .tip:after { position: absolute; top: 34.3%; width: .5em; height: 14%; opacity: .56; background: #c9c9c9; content: ; } .tip:before { left: 5.4%; border-radius: .25em 0 0 .25em; box-shadow: -1px 0 1px dimgrey, inset 1px 0 1px white, inset -1px 0 1px grey, inset 0 1px 1px white, inset 0 -1px 1px white; transform: rotate(-75deg); } .tip:after { right: 5.4%; border-radius: 0 .25em .25em 0; box-shadow: 1px 0 1px dimgrey, inset -1px 0 1px white, inset 1px 0 1px grey, inset 0 1px 1px white, inset 0 -1px 1px white; transform: rotate(75deg); }

/

/* make the menu appear on click */ .button:focus + .tip {

       transform: scale(1);
       -ms-transform: scale(1);
       -webkit-transform: scale(1);
       opacity: 1;

} /* slices of the circular menu */ .slice { overflow: hidden; position: absolute; /**outline: dotted 1px yellow;/**/ width: 50%; height: 50%; transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -webkit-transform-origin: 100% 100%; } /*

* rotate each slice at the right angle = (A/2)° + (k - (n+1)/2)*A°
* where A is the angle of 1 slice (30° in this case)
* k is the number of the slice (in {1,2,3,4,5} here)
* and n is the number of slices (5 in this case)
* formula works for odd number of slices (n odd)
* for even number of slices (n even) the rotation angle is (k - n/2)*A°
* 
* after rotating, skew on Y by 90°-A°; here A° = the angle for 1 slice = 30° 
*/

.slice:first-child {

   transform: rotate(-45deg) skewY(60deg);
   -ms-transform: rotate(-45deg) skewY(60deg);
   -webkit-transform: rotate(-45deg) skewY(60deg);

} .slice:nth-child(2) {

   transform: rotate(-15deg) skewY(60deg);
   -ms-transform: rotate(-15deg) skewY(60deg);
   -webkit-transform: rotate(-15deg) skewY(60deg);

} .slice:nth-child(3) {

   transform: rotate(15deg) skewY(60deg);
   -ms-transform: rotate(15deg) skewY(60deg);
   -webkit-transform: rotate(15deg) skewY(60deg);

} .slice:nth-child(4) {

   transform: rotate(45deg) skewY(60deg);
   -ms-transform: rotate(45deg) skewY(60deg);
   -webkit-transform: rotate(45deg) skewY(60deg);

} .slice:last-child {

   transform: rotate(75deg) skewY(60deg);
   -ms-transform: rotate(75deg) skewY(60deg);
   -webkit-transform: rotate(75deg) skewY(60deg);

} /* covers for the inner part of the links so there's no hover trigger between

  star button & menu links; give them a red background to see them */

.slice:after { position: absolute; top: 32%; left: 32%; width: 136%; height: 136%; border-radius: 50%; /* "unskew" = skew by minus the same angle by which parent was skewed */ transform: skewY(-60deg); content: ; } /* menu links */ .slice a { width: 200%; height: 200%; border-radius: 50%; box-shadow: 0 0 3px dimgrey, inset 0 0 4px white; /* "unskew" & rotate by -A°/2 */ transform: skewY(-60deg) rotate(-15deg); -ms-transform: skewY(-60deg) rotate(-15deg); -webkit-transform: skewY(-60deg) rotate(-15deg); background: /* lateral separators */ linear-gradient(75deg, transparent 50%, grey 50%, transparent 54%) no-repeat 36.5% 0, linear-gradient(-75deg, transparent 50%, grey 50%, transparent 54%) no-repeat 63.5% 0, /* make sure inner part is transparent */ radial-gradient(rgba(127,127,127,0) 49%, rgba(255,255,255,.7) 51%, #c9c9c9 52%); background-size: 15% 15%, 15% 15%, cover; line-height: 3; vertical } /* arrow for middle link */ .slice:nth-child(3) a:after { position: absolute; top: 13%; left: 50%; margin: -.25em; width: .5em; height: .5em; box-shadow: 2px 2px 2px white; transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); background: linear-gradient(-45deg, #c9c9c9 50%, transparent 50%); content: ; }

/* Header */ /**********/

.header {

   background-color: #834141;
   min-height: 15%;

}

.header > h2 {

   font: 1.2em/1.5em;

}

/* Footer */ /**********/ .footer {

   background-color: #834141;
   min-height: 15%;

}

/* Meny */ /********/ .meny {

   background-color: #4A4446;

}

@@ Line 1: / Line 1: @@
 /* Reset MediaWiki CSS */
+/**********************/
 #contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
      display:none;}
@@ Line 8: / Line 9: @@
      border: none;}
-/* Radial menu CSS */
 * { margin: 0; padding: 0; }
-body {
+body.index {
 	overflow: hidden;
-	background: url('../images/geometry.png');
 }
+.contents, body>.container {
+        background-image: url('../images/geometry.png');
+	background-repeat: repeat-x repeat-y;
+	background-position: center;
+	background-attachment: fixed;
+}
+.contents.project {
+        background-image: url("../images/lab_setup.jpg");
+	background-repeat: repeat-x repeat-y;
+	background-position: center;
+	background-attachment: fixed;
+}
+.contents.notebook {
+        background-image: url("../images/modeling.jpg");
+	background-repeat: no-repeat;
+	background-position: center;
+	background-attachment: fixed;
+}
+/* Radial menu CSS */
+/*******************/
 /* generic styles for button & circular menu */
+.radial-menu-container {
+    height: 100%;
+}
 .ctrl {
 	position: absolute;
-	top: 30%; left: 30%;
+	top: 30%; left: 40%;
 	font: 1.5em/1.13 Verdana, sans-serif;
 	transition: .5s;
@@ Line 57: / Line 84: @@
 	margin: -5em;
 	margin-left: -9em;
-	left: 37%;
+	left: 43%;
 	top: 30%;
 	width: 25em; height: 25em;
@@ Line 188: / Line 215: @@
 	background: linear-gradient(-45deg, #c9c9c9 50%, transparent 50%);
 	content: '';
+}
+/* Header */
+/**********/
+.header {
+    background-color: #834141;
+    min-height: 15%;
+}
+.header > h2 {
+    font: 1.2em/1.5em;
+}
+/* Footer */
+/**********/
+.footer {
+    background-color: #834141;
+    min-height: 15%;
+}
+/* Meny */
+/********/
+.meny {
+    background-color: #4A4446;
 }