penguin/AstroJS

botanjs/src/Astro/Penguin/Layout/MainFrame.css

raw · 2531 bytes

html, body { height: 100%; }

html { background-color: #222; }

body {
	background-color: #F0F0F0;
    font-family: custom-sans,Helvetica,Arial,STHeiti,"Microsoft JhengHei","微軟正黑體";
}

pre { font-family: site-mono; }

::selection {
	color: white;
	background: navy;
}
::-moz-selection {
	color: white;
	background: navy;
}

p { padding: 0.25em 0.5em; }

h4, h5, h6 { font-family: custom-sans; }

h4 { font-size: 1.5em; }
h5 { font-size: 1.3em; }
h6 { font-size: 1.1em; }

a {
    color: #00E;
	text-decoration: none;
}

textarea {
	font-family: site-mono;
}

sup { vertical-align: super; }

a:hover { text-decoration: underline; }

.clearfix {
    clear: both;
    padding: 0 !important;
    margin: 0 !important;
}

.begin-wrapper {
    position: relative;

    min-height: 100%;
    background-color: #EBEAEF;

	overflow: hidden;
}

.mbody {
	position: relative;
	width: 100%;
}

.main-column {
	width: 85%;
	margin: 0 auto;
}

.right { text-align: right; }
.panel { padding: 0.5em 1.2em 1.2em 1.2em; }

/* transition properties */
div#header, div#mbody, div#contact, div#horizon {
	
	-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); 
	-ms-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); 
	-ms-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 */
}

@keyframes spin {
    0% { transform: rotate( 0deg ); }
    25% { transform: rotate( 90deg ); }
    50% { transform: rotate( 180deg ); }
    75% { transform: rotate( 270deg ); }
    100% { transform: rotate( 360deg ); }
}

@keyframes aspin {
    0% { transform: rotate( 0deg ); }
    25% { transform: rotate( -90deg ); }
    50% { transform: rotate( -180deg ); }
    75% { transform: rotate( -270deg ); }
    100% { transform: rotate( -360deg ); }
}

.spin {
    animation-duration: 60s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-name: aspin;
}

.cw { animation-name: spin; }

/* end transition properties */