Difference between revisions of "Template:USTC-Software/css/autoMenu2"

Revision as of 20:51, 21 October 2019 (view source) Yuriko (Talk | contribs) ← Older edit		Revision as of 21:10, 21 October 2019 (view source) ZsStrike (Talk | contribs) Newer edit →
Line 38:		Line 38:
	.progressbar {		.progressbar {
	display: none;		display: none;
−	margin: 4em 0;	+	margin: 2em 0;
	}		}
	@media only screen and (min-width: 650px) {		@media only screen and (min-width: 650px) {

---

Revision as of 21:10, 21 October 2019

• , *:before, *:after {

   box-sizing: border-box;

}

.clearfix:before, .clearfix:after {

   content: " ";
   display: table;

}

.clearfix:after {

   clear: both;

}

.clearfix {

   zoom: 1;

}

.progressbar p {

   font-family: 'Merriweather';
   font-weight: 300;
   font-size: 100%;
   margin-top: 2em;
   margin-bottom: 2em;

}

.progressbar a {

   color: #2d2f30;
   text-decoration: underline;
   transition: color 100ms ease-in;

} .progressbar a:hover, a:focus {

   color: #DB5B33;

}

.progressbar {

   display: none;
   margin: 2em 0;

} @media only screen and (min-width: 650px) {

   .progressbar {
       display: block;
   }

} .progressbar .shim {

   display: none;
   width: 100%;

} .progressbar .holder {

   position: relative;
   font-size: 85%;
   padding: 1.8em 0 0 0;
   background-color: #badbe4;
   box-shadow: 1em 1em 1.5em #badbe4;

} @media only screen and (min-width: 750px) {

   .progressbar .holder {
       font-size: 90%;
   }

} @media only screen and (min-width: 900px) {

   .progressbar .holder {
       font-size: 95%;
   }

} .progressbar .holder .bar {

   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 2px;
   background-color: #B6D1DA;

} .progressbar .holder .bar .indicator {

   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   background-color: #4598B5;

} .progressbar .holder .labels {

   max-width: 1600px;
   margin: 0 auto;
   padding: 0 2em;
   text-align: center;

} .progressbar .holder .labels i {

   display: block;
   position: relative;
   float: left;
   cursor: pointer;

} .progressbar .holder .labels i::before {

   position: absolute;
   bottom: 0;
   left: 50%;
   display: block;
   content: ;
   width: .9em;
   height: .9em;
   border-radius: 50%;
   border: solid 3px #B6D1DA;
   background-color: #D6E1E5;
   -webkit-transform: translateX(-50%) translateY(50%);
   transform: translateX(-50%) translateY(50%);
   transition: border-color 100ms ease-in, background-color 150ms ease-in;

} .progressbar .holder .labels i::after {

   display: block;
   content: attr(data-label);
   position: relative;
   top: 0;
   padding-bottom: 1.8em;
   font-family: alegreya;
   font-weight: bold;
   /*font-family: 'Open Sans';*/
   /*font-weight: 400;*/
   color: #4598B5;
   transition: color 150ms ease-in, top 100ms ease-out;
   font-style: normal;

} .progressbar .holder .labels i:hover::before, .progressbar .holder .labels i:focus::before {

   background-color: #B6D1DA;

} .progressbar .holder .labels i:hover::after, .progressbar .holder .labels i:focus::after {

   top: -.2em;

} .progressbar .holder .labels i.read::before {

   border-color: #4598B5;

} .progressbar .holder .labels i.read:hover::before, .progressbar .holder .labels i.read:focus::before {

   background-color: #bbdce5;

} .progressbar .holder .labels i.reading::after {

   color: #222;

} .progressbar .holder .labels i.reading:hover::after, .progressbar .holder .labels i.reading:focus::after {

   top: 0;

} .progressbar.fixed .holder {

   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 1;

} .progressbar.fixed .shim {

   display: block;

}