"

From 2013.igem.org

---

Revision as of 11:38, 26 August 2013

/* Reset MediaWiki CSS */

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

   display:none;}

1. top-section {

   border: none;
   height: 0px;}

1. content {

   border: none;}

/* Radial menu CSS */

• { margin: 0; padding: 0; }

body { overflow: hidden; background: url('../images/geometry.png'); } /* generic styles for button & circular menu */ .ctrl { position: absolute; top: 30%; left: 30%; 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: 37%; 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: ; }