Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /* /////////////////// */
- /* LAYOUT AND UI STUFF */
- /* /////////////////////////////////////////////////////////////////////////////////////////////// */
- html {
- background-color: #202020;
- overflow: hidden;
- -webkit-transition: background-color 0.5s ease;
- -moz-transition: background-color 0.5s ease;
- -o-transition: background-color 0.5s ease;
- transition: background-color 0.5s ease;
- }
- body {
- margin: 0;
- }
- .wrapper {
- width: 900px;
- position: absolute;
- z-index: 2;
- }
- #mp3_player {
- width:550px;
- height:30px;
- background:#000;
- padding:5px;
- margin:5px auto;
- bottom: 0;
- position: absolute;
- border-radius: 5px;
- display: none;
- }
- #mp3_player > div > audio{
- width:500px;
- background:#000;
- }
- #audio_box {
- display: inline;
- }
- #fullscreen {
- color: white;
- margin-top: 7px;
- float: right;
- margin-right: 15px;
- cursor: pointer;
- }
- .noCursor {
- cursor: none;
- }
- .i {
- z-index: 8;
- cursor: pointer;
- display: inline-block;
- opacity: 0.4;
- color: white;
- -webkit-transition: opacity .1s linear;
- -moz-transition: opacity .1s linear;
- -o-transition: opacity .1s linear;
- transition: opacity .1s linear;
- }
- .i:hover {
- opacity: 1
- }
- .icon-expand, .icon-loop-off, .icon-volume-medium, .icon-question, .icon-github2, .icon-keyboard2, .icon-soundcloud, .icon-microphone, .icon-pause, .icon-play, .icon-backward2, .icon-forward2 {
- font-size: 25px;
- padding-top: 10px;
- margin-right: 4px;
- }
- .icon-pause {
- position: absolute;
- left: 25px;
- font-size: 40px;
- }
- .icon-play {
- position: absolute;
- left: 35px;
- font-size: 40px;
- }
- .icon-soundcloud {
- position: absolute;
- font-size: 70px;
- }
- .icon-microphone {
- position: absolute;
- font-size: 37px;
- }
- .icon-forward2 {
- position: absolute;
- left: 65px;
- top: 10px;
- top: 55px;
- font-size: 25px;
- }
- .icon-backward2 {
- position: absolute;
- font-size: 25px;
- top: 55px;
- }
- .icon-expand, .icon-contract {
- position: absolute;
- font-size: 21px;
- }
- .icon-question {
- position: fixed;
- bottom: 12px;
- left: 12px;
- }
- .icon-keyboard2 {
- position: fixed;
- bottom: 12px;
- left: 62px;
- }
- .icon-github2 {
- position: fixed;
- bottom: 12px;
- left: 112px;
- }
- .icon-loop-off, .icon-loop-on {
- position: fixed;
- font-size: 31px;
- bottom: 8px;
- left: 156px;
- }
- .icon-loop-on {
- bottom: 9px;
- }
- .icon-menu, .icon-knobs {
- position: fixed;
- top: 12px;
- left: 12px;
- font-size: 32px;
- opacity: 0.8;
- cursor: pointer;
- z-index: 4;
- -webkit-font-smoothing: none;
- -webkit-transition: opacity .3s linear;
- -moz-transition: opacity .3s linear;
- -o-transition: opacity .3s linear;
- transition: opacity .3s linear;
- }
- .icon-headphones, .icon-keyboard {
- margin-top: 10px;
- font-size: 128px;
- color: white;
- float: right;
- }
- .icon-soundcloud2 {
- font-size: 128px;
- color: white;
- }
- #sc_icon {
- float: right;
- margin: 0;
- font-size: 100px;
- padding: 0;
- top: 0;
- }
- .icon-vinyl, .icon-vinyl2, .icon-vinyl3 {
- position: absolute;
- display: inline-block;
- font-size: 128px;
- opacity: 0.6;
- left: 50%;
- -webkit-animation: fade 2s linear 2s, spinspin 3s infinite linear;
- -moz-animation: fade 2s linear 2s, spinspin 3s infinite linear;
- animation: fade 2s linear 2s, spinspin 3s infinite linear;
- -webkit-animation-fill-mode: forwards;
- -moz-animation-fill-mode: forwards;
- animation-fill-mode: forwards;
- }
- /* http://jsfiddle.net/mmansion/yhbfc/8/ */
- .vinyl-container {
- text-align: center;
- position: fixed;
- width: 128px;
- height: 128px;
- right: 50%;
- top: 60%;
- margin-right: 6px; /*subtract by half width*/
- margin-top: -68px; /*subtract by half height*/
- /* margin-right: -64px;
- margin-top: -64px; */
- }
- .song-metadata {
- padding-top: 15px;
- color: #fff;
- opacity: 0.8;
- font-family: 'Helvetica Neue', Helvetica;
- font-weight: 100;
- font-size: 26px;
- letter-spacing: 1px;
- text-shadow: 2px 2px 0px black;
- opacity: 0;
- cursor: pointer;
- z-index: 40;
- font-style: italic;
- -webkit-transition: opacity .5s linear;
- -moz-transition: opacity .5s linear;
- -o-transition: opacity .5s linear;
- transition: opacity .5s linear;
- width: 900px;
- }
- .song-metadata:hover {
- text-decoration: underline;
- opacity: 1;
- }
- .song-metadata a {
- text-decoration: none;
- color: white;
- }
- .show-meta {
- opacity: 0.8;
- }
- #sc_input {
- border-radius: 10px;
- font-size: 25px;
- color: #444;
- padding: 6px;
- width: 100%;
- margin: 10px;
- }
- .dragover {
- background-color: white;
- opacity: 0.6;
- height: 100%;
- width: 100%;
- position: fixed;
- z-index: 4001;
- display: none;
- }
- /* hhttp://tympanus.net/codrops/2014/01/21/dot-navigation-styles/ */
- .dotstyle ul {
- position: relative;
- display: inline-block;
- margin: 0;
- padding: 0;
- list-style: none;
- cursor: default;
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -khtml-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
- .dotstyle li {
- position: relative;
- display: block;
- float: left;
- margin: 0 16px;
- width: 16px;
- height: 16px;
- cursor: pointer;
- }
- .dotstyle li a {
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- outline: none;
- border-radius: 50%;
- background-color: #fff;
- background-color: rgba(255, 255, 255, 0.3);
- text-indent: -999em; /* make the text accessible to screen readers */
- cursor: pointer;
- position: absolute;
- border: 1px solid black;
- opacity: 0.6;
- }
- html.theme_1 .dotstyle li a, html.theme_3 .dotstyle li a {
- border: 1px solid white;
- }
- .dotstyle li a.zero {
- background-color: #F7D11E;
- }
- .dotstyle li a.one {
- background-color: #fff;
- }
- .dotstyle li a.two {
- background-color: #5D4157;
- }
- .dotstyle li a.three {
- background-color: #E5EDB8;
- }
- .dotstyle li a.four {
- background-color: #E4A57A;
- }
- .dotstyle li a.five {
- background-color: #594F4F;
- }
- .dotstyle li a:focus {
- outline: none;
- }
- .dotstyle-scaleup li a {
- -webkit-transition: -webkit-transform 0.3s ease, background-color 0.3s ease;
- -moz-transition: -moz-transform 0.3s ease, background-color 0.3s ease;
- -o-transition: -o-transform 0.3s ease, background-color 0.3s ease;
- transition: transform 0.3s ease, background-color 0.3s ease;
- }
- .dotstyle-scaleup li a:hover,
- .dotstyle-scaleup li a:focus {
- opacity: 1;
- }
- .dotstyle-scaleup li.current a {
- -webkit-transform: scale(1.5);
- -moz-transform: scale(1.5);
- -ms-transform: scale(1.5);
- -o-transform: scale(1.5);
- transform: scale(1.5);
- }
- .dotstyle {
- position: absolute;
- right: 11px;
- bottom: 20px;
- -webkit-transition: opacity .3s linear;
- -moz-transition: opacity .3s linear;
- -o-transition: opacity .3s linear;
- transition: opacity .3s linear;
- }
- .progressBar {
- height: 3px;
- background-color: white;
- opacity: 0.5;
- position: fixed;
- bottom: 0;
- left: 0;
- -webkit-transition: opacity .3s linear;
- -moz-transition: opacity .3s linear;
- -o-transition: opacity .3s linear;
- transition: opacity .3s linear;
- }
- /* tooltip - http://www.cssportal.com/css-tooltip-generator/ */
- /* ----------------------------------------------------------*/
- .slider span, .icon-loop-on span {
- position: absolute;
- width:130px;
- color: #FFFFFF;
- background: #000000;
- height: 25px;
- line-height: 25px;
- text-align: center;
- visibility: hidden;
- border-radius: 3px;
- font-family: 'Helvetica Neue', Helvetica;
- font-weight: 300;
- font-size: 12px;
- opacity: 0;
- -webkit-transition: opacity .3s linear;
- -moz-transition: opacity .3s linear;
- -o-transition: opacity .3s linear;
- transition: opacity .3s linear;
- }
- .icon-loop-on span {
- width: 230px;
- }
- .slider span:after {
- content: '';
- position: absolute;
- bottom: 100%;
- left: 50%;
- margin-left: -8px;
- width: 0; height: 0;
- border-bottom: 8px solid #000000;
- border-right: 8px solid transparent;
- border-left: 8px solid transparent;
- -webkit-transition: opacity .3s linear;
- -moz-transition: opacity .3s linear;
- -o-transition: opacity .3s linear;
- transition: opacity .3s linear;
- }
- .slider:hover span {
- visibility: visible;
- opacity: 0.8;
- top: 30px;
- left: 50%;
- margin-left: -76px;
- z-index: 999;
- }
- .icon-loop-on span:after {
- content: '';
- position: absolute;
- top: 50%;
- right: 100%;
- margin-top: -8px;
- width: 0; height: 0;
- border-right: 8px solid #000000;
- border-top: 8px solid transparent;
- border-bottom: 8px solid transparent;
- -webkit-transition: opacity .3s linear;
- -moz-transition: opacity .3s linear;
- -o-transition: opacity .3s linear;
- transition: opacity .3s linear;
- }
- .icon-loop-on:hover span {
- visibility: visible;
- opacity: 0.8;
- left: 100%;
- top: 50%;
- margin-top: -12.5px;
- margin-left: 15px;
- z-index: 999;
- }
- /* /////////////////// */
- /* MENU STUFF //////// */
- /* /////////////////////////////////////////////////////////////////////////////////////////////// */
- .menu {
- position: absolute;
- top: 0;
- left: 0;
- z-index: 3;
- width: 0px;
- height: 100%;
- max-height: 100%;
- background-color: black;
- color: white;
- overflow: hidden;
- opacity: 0.8;
- -webkit-transition: all 300ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
- -moz-transition: all 300ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
- -o-transition: all 300ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
- transition: all 300ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
- -webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
- -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
- -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
- transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
- }
- .options {
- -webkit-transition: opacity .1s linear;
- -moz-transition: opacity .1s linear;
- -o-transition: opacity .1s linear;
- transition: opacity .1s linear;
- }
- .options:after {
- content: "";
- display: inline-block;
- width: 100%;
- }
- .menu-controls {
- text-shadow: 2px 2px 0px rgba(0,0,0,0.5);
- -webkit-transition: all 300ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
- -moz-transition: all 300ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
- -o-transition: all 300ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
- transition: all 300ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
- }
- .menu-wide {
- position: absolute;
- top: 0;
- z-index: 3;
- top: 45px;
- width: 900px;
- height: 63px;
- color: white;
- max-width: 100%;
- opacity: 0.8;
- -webkit-transition: all 300ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
- -moz-transition: all 300ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
- -o-transition: all 300ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
- transition: all 300ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
- -webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
- -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
- -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
- transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
- }
- .menu ul {
- width: 326px;
- max-height: 100%;
- padding-left: 20px;
- overflow-y: scroll;
- }
- .menu ul li {
- display: block;
- padding: 10px;
- border: 2px solid white;
- width: 260px;
- height: 90px;
- margin-top: 10px;
- overflow: hidden;
- cursor: pointer;
- z-index: 2;
- position: relative;
- }
- .fade {
- opacity: 1;
- -webkit-transition: opacity .3s linear;
- -moz-transition: opacity .3s linear;
- -o-transition: opacity .3s linear;
- transition: opacity .3s linear;
- }
- .fadeOut {
- opacity: 0;
- }
- .menu-open {
- opacity: 0.8;
- z-index: 6;
- width: 304px;
- }
- .menu-open .options {
- opacity: 1;
- -webkit-transition: opacity .3s linear .3s;
- -moz-transition: opacity .3s linear .3s;
- -o-transition: opacity .3s linear .3s;
- transition: opacity .3s linear .3s;
- }
- .svg-open {
- -webkit-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
- -moz-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
- -o-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
- transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
- -webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
- -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
- -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
- transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
- /*
- -webkit-transform: perspective(1500) rotateY(180deg);
- transform: translate3d(300px, 0, 0);
- -webkit-transform: perspective(1500) translate3d(0px, 0, -300px) rotateY(-10deg);
- transform: perspective(600) translate3d(100px, 0, -600px) rotateY(-20deg);
- */
- }
- .menu svg {
- position: relative;
- top: -90px;
- left: 0;
- }
- .clicker {
- position: relative;
- top: 0;
- left: 0;
- min-width: 260px;
- min-height: 90px;
- z-index: 4000;
- }
- .menu svg circle, .menu svg rect, .menu svg path, .menu svg line {
- opacity: 1;
- fill: black;
- stroke: white;
- stroke-width: 3;
- }
- .menu svg rect.equal {
- fill: white;
- }
- .menu li {
- -webkit-transition: border .1s linear;
- -moz-transition: border .1s linear;
- -o-transition: border .1s linear;
- transition: border .1s linear;
- }
- .menu li.active {
- border: 7px solid white;
- padding: 5px;
- }
- .menu .buffer {
- border: 0;
- font-family: 'Helvetica Neue', 'Helvetica';
- font-weight: lighter;
- text-align: center;
- letter-spacing: 7px;
- font-size: 12px;
- padding-top: 15px;
- margin-bottom: -10px;
- }
- /* /////////////////// */
- /* SVG STUFF ///////// */
- /* /////////////////////////////////////////////////////////////////////////////////////////////// */
- /*svg .spinn:nth-of-type(2) {
- -webkit-animation: spinspin2 5s infinite linear;
- animation: spinspin2 5s infinite linear;
- }
- */
- /* http://www.colourlovers.com/palette/3406603/Sunset_at_Bayinbuluk */
- svg circle, svg rect {
- opacity: .25;
- fill: #F7D11E;
- stroke: #F27F40;
- stroke-width: 2;
- -webkit-transition: fill 1.5s ease-in-out;
- -moz-transition: fill 1.5s ease-in-out;
- -o-transition: fill 1.5s ease-in-out;
- transition: fill 1.5s ease;
- -webkit-transition: stroke 1.5s ease-in-out;
- -moz-transition: stroke 1.5s ease-in-out;
- -o-transition: stroke 1.5s ease-in-out;
- transition: stroke 1.5s ease;
- }
- svg, svg path, svg line, svg g {
- -webkit-transform-origin: center;
- -moz-transform-origin: center;
- -o-transform-origin: center;
- transform-origin: center;
- }
- svg rect:nth-of-type(0) {
- opacity: 0;
- }
- svg rect {
- -webkit-transform: rotate(-30deg);
- -moz-transform: rotate(-30deg);
- -o-transform: rotate(-30deg);
- transform: rotate(-30deg);
- }
- svg .bar rect, svg rect.equal {
- -webkit-transform: rotate(0deg);
- -moz-transform: rotate(0deg);
- -o-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- svg rect.equal, html.theme_2 svg rect.equal {
- opacity: 1;
- stroke-width: 3px;
- }
- html.theme_3 svg rect.equal, html.theme_4 svg rect.equal {
- opacity: 0.8;
- stroke-width: 3px;
- }
- html.theme_1 svg rect.equal {
- fill: white;
- stroke-width: 3px;
- }
- svg .isoco {
- stroke-width: 3px;
- }
- path {
- fill: #f88e22;
- stroke: #fff;
- stroke-width: 10px;
- opacity: 0.5;
- }
- svg {
- position: absolute;
- z-index: -1;
- -webkit-transform-style: preserve-3d;
- transform-style: preserve-3d;
- -webkit-transition: -webkit-transform 0.5s;
- -moz-transition: -moz-transform 0.5s;
- -o-transition: -o-transform 0.5s;
- transition: transform 0.5s;
- }
- svg .spin {
- fill: none;
- stroke-linecap: butt;
- -webkit-transform-origin: center;
- -moz-transform-origin: center;
- -o-transform-origin: center;
- transform-origin: center;
- -webkit-animation: draw 5s linear infinite;
- -moz-animation: draw 5s linear infinite;
- animation: draw 5s linear infinite;
- }
- .graticule {
- fill: none;
- stroke-width: 3px;
- stroke: #F7D11E;
- stroke-linecap: round;
- opacity: 1;
- }
- .hexagon {
- stroke-width: 0;
- }
- /* THEME 1 STUFF */
- html.theme_1 {
- background-color: black;
- }
- html.theme_1 svg circle, html.theme_1 svg rect {
- fill: black;
- stroke: white;
- stroke-width: 3;
- opacity: 1;
- }
- html.theme_1 path {
- fill: none;
- stroke: #fff;
- stroke-width: 2px;
- opacity: 1;
- }
- htm1.theme_1 path.skew{
- fill: white;
- opacity: .7;
- }
- html.theme_1 .icon-menu {
- color: white;
- }
- html.theme_1 .isoco2, html.theme_1 .isoco3 {
- visibility: hidden;
- }
- html.theme_1 .hexagon {
- stroke-width: 1;
- }
- html.theme_1 .spin {
- opacity: 0.7;
- }
- html.theme_1 .graticule {
- fill: none;
- stroke: white;
- }
- #viz {
- margin: auto;
- background-color: #202020;
- width: 900px;
- margin: 0 auto;
- overflow: hidden;
- }
- /* THEME 2 STUFF - http://www.colourlovers.com/palette/944213/forever_lost
- html.theme_2 .i {
- color: black;
- }
- html.theme_2 .progressBar {
- background-color: black;
- }
- html.theme_2 {
- background-color: #EBE3AA;
- }
- html.theme_2 svg circle, html.theme_2 svg path, html.theme_2 svg rect, html.theme_2 svg line {
- fill: #5D4157;
- stroke: white;
- stroke-width: 1;
- opacity: .25;
- }
- html.theme_2 .hexagon {
- stroke-width: 0;
- }
- html.theme_2 .graticule {
- fill: none;
- stroke: #5D4157;
- opacity: .6;
- stroke-width: .5px;
- stroke-dasharray: 20px 2px;
- stroke-dashoffset: 10px;
- }
- */
- /*html.theme_2 .spin:nth-of-type(3n) {
- stroke: #5D4157;
- }
- */
- /* THEME 3 STUFF - http://www.colourlovers.com/palette/728391/Dig_My_Olive_Branch
- html.theme_3 {
- background-color: #300018;
- }
- html.theme_3 svg circle, html.theme_3 svg path, html.theme_3 svg rect, html.theme_3 svg line {
- fill: #E5EDB8;
- stroke: white;
- stroke-width: 1;
- opacity: .25;
- }
- html.theme_3 .isoco3 {
- visibility: hidden;
- }
- html.theme_3 .graticule {
- fill: none;
- stroke: #E5EDB8;
- stroke-width: 15px;
- opacity: 0.6
- }
- */
- /* THEME 4 STUFF - http://www.colourlovers.com/palette/3406636/Just_Breathe
- html.theme_4 .i {
- color: black;
- }
- html.theme_4 .progressBar {
- background-color: black;
- }
- html.theme_4 {
- background-color: #F4F0CD;
- }
- html.theme_4 svg circle, html.theme_4 svg path, html.theme_4 svg rect, html.theme_4 svg line {
- fill: #E4A57A;
- stroke: white;
- stroke-width: 1;
- opacity: .3;
- }
- html.theme_4 svg circle:nth-of-type(4) {
- fill: #ADD9C8;
- }
- html.theme_4 svg circle:nth-of-type(3) {
- fill: #F1E3B4;
- }
- html.theme_4 svg circle:nth-of-type(2) {
- fill: #DFE3C8;
- }
- html.theme_4 .hexagon {
- stroke-width: 0;
- }
- html.theme_4 .hexagon:nth-of-type(3n) {
- stroke-width: 10px;
- }
- html.theme_4 .spin:nth-of-type(3n+1) {
- stroke: #E4A57A;
- }
- html.theme_4 .graticule {
- fill: none;
- opacity: 1;
- stroke: #E4A57A;
- }
- */
- /* THEME 5 STUFF - http://www.colourlovers.com/palette/443995/i_demand_a_pancake
- html.theme_5 .i {
- color: black;
- }
- html.theme_5 .progressBar {
- background-color: black;
- }
- html.theme_5 {
- background-color: #9DE0AD;
- }
- html.theme_5 svg circle, html.theme_5 svg path, html.theme_5 svg rect, html.theme_5 svg line {
- fill: #594F4F;
- stroke: white;
- stroke-width: 1;
- opacity: .5;
- }
- html.theme_5 svg circle:nth-last-of-type(3) {
- fill: #E5FCC2;
- }
- html.theme_5 svg .isoco {
- stroke-width: 0;
- opacity: .7;
- }
- html.theme_5 svg .isoco:nth-of-type(odd) {
- fill: #E5FCC2;
- }
- html.theme_5 svg rect.equal {
- opacity: 1;
- stroke-width: 0;
- transform: skewY(45deg);
- }
- html.theme_5 .hexagon {
- stroke-width: 50px;
- stroke-dasharray: 3px;
- }
- html.theme_5 .hexagon:nth-of-type(odd), html.theme_5 .hexagon:nth-of-type(3n), html.theme_5 .hexagon:nth-of-type(3n+1), html.theme_5 .hexagon:nth-of-type(7n), html.theme_5 .hexagon:nth-of-type(11n) {
- display: none;
- }
- html.theme_5 .graticule {
- fill: none;
- stroke: #594F4F;
- stroke-dasharray: 5px;
- opacity: 1;
- }
- */
- /* menu svg overrides */
- html.theme_1 .menu-controls, html.theme_3 .menu-controls, html.theme_4 .menu-controls, html.theme_5 .menu-controls {
- text-shadow: 0 0 0 rgba(0,0,0,0);
- }
- html.theme_2 .menu-controls .i, html.theme_3 .menu-controls .i, html.theme_5 .menu-controls .i {
- color: white;
- text-shadow: 2px 2px 0 rgba(0,0,0,1);
- }
- html.theme_2 .menu svg * {
- stroke-width: 0;
- fill: #EBE3AA;
- }
- html.theme_2 .menu #grid svg * {
- stroke-width: 1;
- }
- html.theme_3 .menu #icosahedron svg * {
- opacity: 0.6;
- stroke-width: 0;
- }
- html.theme_3 .menu #grid svg * {
- stroke-width: 4;
- }
- html.theme_4 .menu svg * {
- stroke-width: 0;
- }
- html.theme_4 .menu #grid svg * {
- stroke-width: 1;
- }
- html.theme_5 .menu #icosahedron svg path {
- opacity: 1;
- stroke-width: 0;
- }
- html.theme_5 .menu #icosahedron svg path:nth-of-type(odd) {
- fill: #E5FCC2;
- opacity: 0.5;
- }
- html.theme_5 .menu #equal rect {
- transform: skewY(30deg) translateY(-8px);
- }
- html.theme_5 .menu .hexagon {
- stroke-width: 10px;
- stroke-dasharray: 2px;
- fill: none;
- }
- /* /////////////////// */
- /* ANIMATIONS STUFF // */
- /* /////////////////////////////////////////////////////////////////////////////////////////////// */
- @-webkit-keyframes spinspin {
- 0% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- 100% {
- -webkit-transform: rotate(360deg);
- transform: rotate(360deg);
- }
- }
- @keyframes spinspin {
- 0% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- 100% {
- -webkit-transform: rotate(360deg);
- transform: rotate(360deg);
- }
- }
- @-webkit-keyframes spinspin2 {
- 0% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- 100% {
- -webkit-transform: rotate(-360deg);
- transform: rotate(-360deg);
- }
- }
- @keyframes spinspin2 {
- 0% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- 100% {
- -webkit-transform: rotate(-360deg);
- transform: rotate(-360deg);
- }
- }
- @keyframes draw {
- 0% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- 100% {
- -webkit-transform: rotate(-360deg);
- transform: rotate(-360deg);
- }
- }
- @-webkit-keyframes draw {
- 0% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- 100% {
- -webkit-transform: rotate(-360deg);
- transform: rotate(-360deg);
- }
- }
- @keyframes fade {
- 100% {
- opacity: 0;
- }
- }
- @-webkit-keyframes fade {
- 100% {
- opacity: 0;
- }
- }
- @keyframes fadeIn {
- 100% {
- opacity: 1;
- }
- }
- @-webkit-keyframes fadeIn {
- 100% {
- opacity: 1;
- }
- }
- /* BLINK KEYFRAME */
- /* http://mudbugmedia.com/blog/2012/10/03/css3-keyframe-animation/ */
- @keyframes blink {
- 0% {transform: scale(1,1.6);}
- 2% {transform: scale(1,0);}
- 4% {transform: scale(1,0);}
- 5% {transform: scale(1,1.6);}
- 100% {transform: scale(1,1.6);}
- }
- @-webkit-keyframes blink {
- 0% {transform: scale(1,1.6);}
- 2% {transform: scale(1,0);}
- 4% {transform: scale(1,0);}
- 5% {transform: scale(1,1.6);}
- 100% {transform: scale(1,1.6);}
- }
- /* /////////////////// */
- /* RANGE SLIDER -- http://codepen.io/aronwoost/pen/nlyrf */
- /* /////////////////////////////////////////////////////////////////////////////////////////////// */
- * {
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- }
- .slider {
- width: 200px;
- position: absolute;
- right: 325px;
- top: 19px;
- }
- .slider-volume {
- right: 567px;
- }
- input[type="range"] {
- width: 100%;
- height: 3px;
- margin: 0;
- border: none;
- padding: 1px 4px;
- border-radius: 14px;
- background: rgba(35, 37, 40, .6);
- -webkit-appearance: none;
- -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
- -webkit-box-shadow: inset 0 1px 0 0 #0d0e0f, inset 0 -1px 0 0 #3a3d42;
- box-shadow: inset 0 1px 0 0 #0d0e0f, inset 0 -1px 0 0 #3a3d42;
- outline: none; /* no focus outline */
- }
- input[type="range"]::-moz-range-track {
- border: inherit;
- background: transparent;
- }
- input[type="range"]::-ms-track {
- border: inherit;
- color: transparent; /* don't drawn vertical reference line */
- background: transparent;
- }
- input[type="range"]::-ms-fill-lower,
- input[type="range"]::-ms-fill-upper {
- background: transparent;
- }
- input[type="range"]::-ms-tooltip {
- display: none;
- }
- input[type="range"]::-webkit-slider-thumb {
- -webkit-appearance: none;
- -webkit-box-shadow: inset 0 1px 0 0 black, inset 0 -1px 0 0 black;
- box-shadow: inset 0 1px 0 0 black, inset 0 -1px 0 0 black;
- width: 16px;
- height: 16px;
- border: none;
- border-radius: 12px;
- background-color: white;
- cursor: ew-resize ;
- }
- input[type="range"]::-moz-range-thumb {
- width: 16px;
- height: 16px;
- border: none;
- border-radius: 12px;
- background-color: white;
- cursor: ew-resize ;
- }
- input[type="range"]::-ms-thumb {
- width: 16px;
- height: 16px;
- border-radius: 12px;
- border: 0;
- background-image: linear-gradient(to bottom, #529de1 0, #245e8f 100%); /* W3C */
- }
- /* /////////////////// */
- /* MODAL STUFF -- http://tympanus.net/Development/ModalWindowEffects/ */
- /* /////////////////////////////////////////////////////////////////////////////////////////////// */
- /* http://css-tricks.com/forums/topic/transforms-cause-font-smoothing-weirdness-in-webkit/ */
- .md-modal {
- position: fixed;
- top: 50%;
- left: 50%;
- width: 50%;
- max-width: 630px;
- min-width: 320px;
- height: auto;
- z-index: 2000;
- visibility: hidden;
- color: white;
- -webkit-backface-visibility: hidden;
- -moz-backface-visibility: hidden;
- backface-visibility: hidden;
- -webkit-transform: translateX(-50%) translateY(-50%);
- -moz-transform: translateX(-50%) translateY(-50%);
- -ms-transform: translateX(-50%) translateY(-50%);
- -o-transform: translateX(-50%) translateY(-50%);
- transform: translateX(-50%) translateY(-50%);
- }
- .md-show {
- visibility: visible;
- }
- .md-show.md-effect-1 .md-content {
- opacity: 0.7;
- -webkit-transform: scale(1);
- -moz-transform: scale(1);
- -ms-transform: scale(1);
- -o-transform: scale(1);
- transform: scale(1);
- }
- .md-effect-1 .md-content {
- opacity: 0;
- -webkit-transform: scale(0.7);
- -moz-transform: scale(0.7);
- -ms-transform: scale(0.7);
- -o-transform: scale(0.7);
- transform: scale(0.7);
- -webkit-transition: all 0.3s;
- -moz-transition: all 0.3s;
- -o-transition: all 0.3s;
- transition: all 0.3s;
- }
- .md-content {
- color: #fff;
- background: black;
- position: relative;
- border-radius: 20px;
- margin: 0 auto;
- }
- .md-content h3 {
- margin: 0;
- font-family: 'Helvetica Neue';
- padding: 0.4em;
- font-size: 2.4em;
- font-weight: 100;
- opacity: 0.8;
- background: rgba(0,0,0,0.1);
- border-radius: 3px 3px 0 0;
- }
- .md-content > div {
- padding: 15px 40px 30px;
- margin: 0;
- font-weight: lighter;
- font-size: 15px;
- }
- .md-content > div p {
- margin: 0;
- padding: 10px 0;
- }
- .md-content > div ul li {
- padding: 5px 0;
- /*font-size: 0.8em;*/
- }
- #modal-about a, #modal-about a:visited, #modal-soundcloud a, #modal-soundcloud a:visited {
- color: white;
- }
- #modal-about a:hover {
- text-decoration: none;
- }
- .md-content button {
- display: block;
- margin: 0 auto;
- font-size: 0.8em;
- }
- button {
- border: none;
- padding: 0.6em 1.2em;
- background: white;
- color: black;
- font-family: 'Lato', Calibri, Arial, sans-serif;
- font-size: 1em;
- letter-spacing: 1px;
- text-transform: uppercase;
- cursor: pointer;
- display: inline-block;
- margin: 3px 2px;
- border-radius: 2px;
- }
- #modal-keyboard ul {
- padding-left: 0;
- }
- #modal-keyboard li {
- display: block;
- }
- /* https://news.ycombinator.com/item?id=2299806 */
- .key {
- display: inline-block;
- color: #333;
- font: bold 9pt arial;
- text-decoration: none;
- text-align: center;
- width: 25px;
- height: 23px;
- margin: 3px;
- background: #eff0f2;
- -moz-border-radius: 4px;
- border-radius: 4px;
- border-top: 1px solid #f5f5f5;
- -webkit-box-shadow: inset 0 0 25px #e8e8e8, 0 1px 0 #c3c3c3, 0 2px 0 #c9c9c9, 0 2px 3px #333;
- -moz-box-shadow: inset 0 0 25px #e8e8e8, 0 1px 0 #c3c3c3, 0 2px 0 #c9c9c9, 0 2px 3px #333;
- box-shadow: inset 0 0 25px #e8e8e8, 0 1px 0 #c3c3c3, 0 2px 0 #c9c9c9, 0 2px 3px #333;
- text-shadow: 0px 1px 0px #f5f5f5;
- cursor: text;
- }
- .key span {
- display: block;
- margin: 5px 0 0;
- text-transform: uppercase;
- }
- /* /////////////////// */
- /* UNSORTED STUFF //// */
- /* /////////////////////////////////////////////////////////////////////////////////////////////// */
- /*
- .q0-9 { fill: rgb(197,27,125); }
- .q1-9 { fill: rgb(222,119,174); }
- .q2-9 { fill: rgb(241,182,218); }
- .q3-9 { fill: rgb(253,224,239); }
- .q4-9 { fill: rgb(247,247,247); }
- .q5-9 { fill: rgb(230,245,208); }
- .q6-9 { fill: rgb(184,225,134); }
- .q7-9 { fill: rgb(127,188,65); }
- .q8-9 { fill: rgb(77,146,33); }
- */
- svg line {
- stroke: #f88e22;
- stroke-width: 2px;
- }
- html.theme_1 svg line {
- stroke: #fff;
- stroke-width: 2px;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement