Difference between revisions of "Template:SMMU-China/CSS main"

Revision as of 15:54, 8 July 2019 (view source) Caiyili (Talk | contribs) ← Older edit		Revision as of 02:06, 24 July 2019 (view source) Caiyili (Talk | contribs) Newer edit →
Line 1:		Line 1:
−	/*header*/	+	.big_framework {
−	.header_background{	+	background-color:white;
−	height:100px;	+	display:block;
−	width: 100%;	+	width: 100%;
−	background-color: grey;	+
−	position: fixed;	+
	}		}
−	.header {	+	.big_framework .medium_framework {
−	margin:0px auto -100px;	+	margin:auto;
−	width:100%;	+	padding-top: 120px;
−	position: fixed;	+	max-width: 1400px;
		+	width:90%;
		+	text-align: center;
	}		}
−	.header_title {	+	/*header*/
−	font-size: 30px;	+	.wrapper {
−	line-height: 100px;	+	margin: 0 auto;
−	margin-left: 40px;	+	max-width: 1060px;
−	color: white;	+	padding: 1px 3em;
−	display: inline;	+	height: 100%;
	}		}
−		+	header {
−	/*nav*/	+	background-color: #000;
−	nav {	+
−	margin-right: 40px;	+
−	margin-top: 20px;	+
−	position: relative;	+
−	float: right;	+
−	width: 200px;	+
−	height: 200px;	+
	}		}
−		+	header:after {
−	nav h2 {	+	content: " ";
−	border-radius: 2px;	+	display: table;
−	position: relative;	+	clear: both;
−	background: orange;	+
−	height: 40px;	+
−	text-transform: uppercase;	+
−	color: ivory;	+
−	font-weight: 200;	+
−	display: flex;	+
−	flex: 1;	+
−	justify-content: center;	+
−	align-items: center;	+
−	box-shadow: 4px 4px 20px -2px rgba(0,0,0,.35);	+
−	transition: all .4s;	+
	}		}
−		+	.brand, h1, h2, h3 {
−	nav:hover h2{	+	font-family: 'Roboto Condensed', sans-serif;
−	transform: translateY(-2px);	+	font-weight: 400;
−	box-shadow: 2px 2px 5px -1px rgba(0,0,0,.35);	+	letter-spacing: 1px;
	}		}
−	nav:hover:active h2{	+	h4, h5, h6 {
−	transform: translateY(10px);	+	letter-spacing: 1px;
−	box-shadow: 0px -1px 2px 0px rgba(0,0,0,.35);	+
−	}	+
−		+
−	input {	+
−	position: absolute;	+
−	left: 0;	+
−	top: 0;	+
−	width: 100%;	+
−	z-index: 1;	+
−	opacity: 0;	+
−	cursor: pointer;	+
−	height: 40px;	+
	}		}
−		+	h1 {
−	#toggle:checked ~ul {	+	font-size: 28px;
−	height: 0%;	+
	}		}
−	nav ul {	+	.main .dev-output pre {
−	padding-left: 0;	+	overflow: auto;
−	padding-top: 0;	+	max-height: 500px;
−	margin-top: 0;	+	background-color: #EBF4FD;
−	list-style: none;	+	padding: 0 1em 1em;
−	overflow: hidden;	+
−	text-align: right;	+
−	margin-bottom: 22px;	+
−	text-align: center;	+
−	transition: all .4s ease-out;	+
−	height: 100%;	+
−		+
	}		}
−	nav ul li {	+	.brand {
−	border-radius: 2px;	+	float: left;
−	position: relative;	+	height: 80px;
−	display: inline-block;	+
−	margin-left: 35px;	+
−	line-height: 1.5;	+
−	width: 100%;	+
−	margin: 0;	+
−	margin-bottom: 5px;	+
−	background: orange;	+
−	transition: background 3s;	+
−	box-shadow: 2px 2px 10px -2px rgba(0,0,0,.35);	+
	}		}
−		+	.brand p {
−	nav ul li:hover {	+	margin: 0;
−	background: mediumorchid;	+
−	transition: background .45s;	+
	}		}
−		+	.rm-nav {
−	/* nav ul li:hover a:active, li {	+	letter-spacing: 1px;
−	color: tomato;	+	}
−	} */	+	.logo {
−		+	font-size: 1.4em;
−	nav ul a {	+	line-height: 40px;
−	display: block;	+	margin: 20px 0 0;
−	color: ivory;	+	width: 100px;
−	text-transform: lowercase;	+	height: 40px;
−	font-size: 18px;	+	background-color: #3C97D5;
−	font-weight: 200;	+	text-align: center;
−	text-decoration: none;	+	font-weight: bold;
−	transition: color .3s;	+	letter-spacing: 2px;
		+	display: block;
		+	float: left;
		+	text-decoration: none;
		+	color: #fff;
		+	padding: 0;
	}		}
−	a:visited {	+	.rm-toggle.rm-button {
−	color: ivory!important;	+	margin-top: 25px;
−	text-decoration: none!important;	+
	}		}
−	a:hover {	+	.rm-css-animate.rm-menu-expanded {
−	text-decoration: none!important;	+	max-height: none;
		+	display: block;
		+	}
		+	.rm-container.rm-layout-expanded {
		+	float: right;
		+	}
		+	.rm-nav li a,
		+	.rm-top-menu a {
		+	padding: .75rem 1rem;
		+	font-size: .9em;
		+	line-height: 1.5rem;
		+	text-transform: uppercase;
		+	}
		+	.rm-layout-expanded .rm-nav > ul > li > a,
		+	.rm-layout-expanded .rm-top-menu > .rm-menu-item > a {
		+	height: 80px;
		+	line-height: 80px;
	}		}
−		+	.main {
−	.big_framework {	+	background-image: url("../images/cloud.jpg");
−	background-color:white;	+	background-position: center top;
−	display:block;	+	background-repeat: repeat-x;
−	width: 100%;	+	min-height: 100%;
		+	padding-top: 1px;
	}		}
−		+	.tagline {
−	.big_framework .medium_framework {	+	width: 360px;
−	margin:auto;	+	font-size: 1.75em;
−	padding-top: 120px;	+	font-weight: bold;
−	max-width: 1400px;	+	letter-spacing: 2px;
−	width:90%;	+	line-height: 1.2;
−	text-align: center;	+	text-align: center;
		+	margin: 275px auto;
		+	color: #1A88D3;
		+	}
		+	.tagline strong {
		+	font-size: 1.3em;
		+	}
		+	.dev-output {
		+	background-color: #e1eaf3; /* fall-back */
		+	background-color: rgba(255,255,255,.85);
		+	color: #000;
		+	padding: 2em;
		+	margin-bottom: 2em;
	}		}

---

Revision as of 02:06, 24 July 2019

.big_framework { background-color:white; display:block; width: 100%; }

.big_framework .medium_framework { margin:auto; padding-top: 120px; max-width: 1400px; width:90%; text-align: center; }

/*header*/ .wrapper {

   margin: 0 auto;
   max-width: 1060px;
   padding: 1px 3em;
   height: 100%;

} header {

   background-color: #000;

} header:after {

   content: " ";
   display: table;
   clear: both;

} .brand, h1, h2, h3 {

    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 400;
    letter-spacing: 1px;
}

h4, h5, h6 {

   letter-spacing: 1px;

} h1 {

   font-size: 28px;

}

.main .dev-output pre {

   overflow: auto;
   max-height: 500px;
   background-color: #EBF4FD;
   padding: 0 1em 1em;

} .brand {

   float: left;
   height: 80px;

} .brand p {

   margin: 0;

} .rm-nav {

   letter-spacing: 1px;

} .logo {

   font-size: 1.4em;
   line-height: 40px;
   margin: 20px 0 0;
   width: 100px;
   height: 40px;
   background-color: #3C97D5;
   text-align: center;
   font-weight: bold;
   letter-spacing: 2px;
   display: block;
   float: left;
   text-decoration: none;
   color: #fff;
   padding: 0;

}

.rm-toggle.rm-button {

   margin-top: 25px;

}

.rm-css-animate.rm-menu-expanded {

   max-height: none;
   display: block;

} .rm-container.rm-layout-expanded {

   float: right;

} .rm-nav li a, .rm-top-menu a {

   padding: .75rem 1rem;
   font-size: .9em;
   line-height: 1.5rem;
   text-transform: uppercase;

} .rm-layout-expanded .rm-nav > ul > li > a, .rm-layout-expanded .rm-top-menu > .rm-menu-item > a {

   height: 80px;
   line-height: 80px;

}

.main {

   background-image: url("../images/cloud.jpg");
   background-position: center top;
   background-repeat: repeat-x;
   min-height: 100%;
   padding-top: 1px;

} .tagline {

   width: 360px;
   font-size: 1.75em;
   font-weight: bold;
   letter-spacing: 2px;
   line-height: 1.2;
   text-align: center;
   margin: 275px auto;
   color: #1A88D3;

} .tagline strong {

   font-size: 1.3em;

} .dev-output {

   background-color: #e1eaf3; /* fall-back */
   background-color: rgba(255,255,255,.85);
   color: #000;
   padding: 2em;
   margin-bottom: 2em;

}