Difference between revisions of "Team:NCHU Taichung/style/notebook.css"

Revision as of 13:11, 17 October 2018

.txt__normal {

 font-family: 'Lato', sans-serif;
 font-weight: 400;

} .txt__normal--it {

 font-family: 'Lato', sans-serif;
 font-weight: 400;
 font-style: italic;

} .txt__bold {

 font-family: 'Lato', sans-serif;
 font-weight: 900;

} .txt__bold--it {

 font-family: 'Lato', sans-serif;
 font-weight: 900;
 font-style: italic;

} .txt__awesome {

 font: normal normal normal 14px/1 FontAwesome;

} /* VARIABLES ================================================*/ /* RESPONSIVE ================================================*/ /* ===========================================================*/ body {

 position: realative;
 height: 100%;

} body.overlay:before {

 position: absolute;
 content: ;
 display: block;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: rgba(0, 0, 0, 0.4);
 z-index: 100;

} html {

 height: 100%;
 font-size: 13px;
 font-family: 'Lato', sans-serif;
 font-weight: 400;

} .wrapper {

 position: relative;
 max-width: 900px;
 width: 100%;
 height: 100%;
 margin: 0 auto;

} a {

 color: inherit;
 text-decoration: none;

} /* UTILITY ===========================================================*/ .u-border-box {

 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;

} .u-transition {

 transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 -webkit-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

} .u-transition.long {

 transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
 -webkit-transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);

} .u-transition.elastic {

 transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 -webkit-transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);

} .resetDefaultApparence {

 -webkit-appearance: none;
 -moz-appearance: none;
 -ms-appearance: none;
 appearance: none;
 border-radius: 0px;
 padding: 0;
 border-width: 0;
 resize: none;

} .resetDefaultApparence::-ms-expand {

 display: none;

} /* STYLE ===========================================================*/ header {

 position: fixed;
 height: 80px;
 width: 100%;
 margin-top: -6px;
 z-index: 50;
 background: #b8c6ae;

} header > .wrapper {

 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 0 20px;
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 color: #ffffff;
 letter-spacing: 2px;
 font-size: 13px;

} header > .wrapper a {

 color: #ffffff;
 text-decoration: none;
 margin-left: 10px;

} .c-monthyear {

 display: flex;

} .c-month {

 position: relative;
 height: 80px;
 line-height: 80px;

} .c-month #c-paginator {

 position: relative;
 width: 200px;
 display: block;
 height: 80px;
 line-height: 80px;
 text-align: center;
 overflow: hidden;

} .c-month #c-paginator .c-paginator__month {

 position: absolute;
 width: 200px;
 top: 0;
 bottom: 0;
 right: 0;

} .c-month #c-paginator .c-paginator__month:nth-child(1) {

 left: 0;

} .c-month #c-paginator .c-paginator__month:nth-child(2) {

 left: 200px;

} .c-month #c-paginator .c-paginator__month:nth-child(3) {

 left: 400px;

} .c-month #c-paginator .c-paginator__month:nth-child(4) {

 left: 600px;

} .c-month #c-paginator .c-paginator__month:nth-child(5) {

 left: 800px;

} .c-month #c-paginator .c-paginator__month:nth-child(6) {

 left: 1000px;

} .c-month #c-paginator .c-paginator__month:nth-child(7) {

 left: 1200px;

} .c-month #c-paginator .c-paginator__month:nth-child(8) {

 left: 1400px;

} .c-month #c-paginator .c-paginator__month:nth-child(9) {

 left: 1600px;

} .c-month #c-paginator .c-paginator__month:nth-child(10) {

 left: 1800px;

} .c-month #c-paginator .c-paginator__month:nth-child(11) {

 left: 2000px;

} .c-month #c-paginator .c-paginator__month:nth-child(12) {

 left: 2200px;

} .c-month .prev, .c-month .next {

 position: absolute;
 display: block;
 top: 20%;
 width: 30px;
 height: 30px;
 padding: 0px 12px;
 /* background-color: #004b8f; */
 cursor: pointer;
 z-index: 10;
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 transform: translatey(-50%);
 -webkit-transform: translatey(-50%);
 border-radius: 50%;
 -webkit-border-radius: 50%;
 transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 -webkit-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

} .c-month .prev.long, .c-month .next.long {

 transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
 -webkit-transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);

} .c-month .prev.elastic, .c-month .next.elastic {

 transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 -webkit-transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);

} .c-month .prev {

 left: 0;

} .c-month .prev:hover {

 padding: 2px 10px;
 /* background-color: #0055a4; */

} .c-month .next {

 right: 0;

} .c-month .next:hover {

 padding: 2px 14px;
 /* background-color: #0055a4; */

} .c-paginator__year {

 height: 80px;
 line-height: 80px;
 padding: 0 20px;

} .o-btn {

 display: inline-block;
 padding: 0 10px;
 line-height: 30px;
 height: 30px;
 background-color: #9bad8e;
 text-transform: uppercase;
 letter-spacing: 2px;
 border-radius: 15px;
 -webkit-border-radius: 15px;
 transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 -webkit-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

} .o-btn.long {

 transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
 -webkit-transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);

} .o-btn.elastic {

 transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 -webkit-transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);

} .o-btn span {

 margin-left: 10px;

} .o-btn:hover {

 background-color: #cbd8c1;

} .c-calendar {

 padding-top: 80px;
 display: flex;
 justify-content: space-between;
 flex-direction: row;

} .c-calendar__style {

 background-color: #b8c6ae;
 margin: 20px;
 padding: 10px;
 box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.18);
 -webkit-box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.18);
 border-radius: 6px;
 -webkit-border-radius: 6px;

} .c-cal__container {

 position: relative;
 width: calc(100% - 300px);
 height: 0;
 padding-bottom: 65%;
 overflow: hidden;

} @media only screen and (max-width: 767px) {

 .c-calendar {
   flex-direction: column;
   align-items: center;
 }
 .c-cal__container {
   width: 300px;
   padding-bottom: 85%;
 }
 .c-cal__cel {
   margin-bottom: 4px;
 }
 header > .wrapper a {
   margin-left: -6px;
 }

} .c-main {

 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 width: 100%;
 padding: 10px;
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;

} .c-main-01 {

 left: 0;

} .c-main-02 {

 left: 100%;

} .c-main-03 {

 left: 200%;

} .c-main-04 {

 left: 300%;

} .c-main-05 {

 left: 400%;

} .c-main-06 {

 left: 500%;

} .c-main-07 {

 left: 600%;

} .c-main-08 {

 left: 700%;

} .c-main-09 {

 left: 800%;

} .c-main-10 {

 left: 900%;

} .c-main-11 {

 left: 1000%;

} .c-main-12 {

 left: 1100%;

} .c-cal__row {

 display: flex;
 justify-content: flex-start;

} .c-cal__col {

 width: calc(100% / 7);
 text-align: center;
 height: 50px;
 line-height: 50px;
 letter-spacing: 2px;
 text-transform: uppercase;

} .c-cal__cel {

 position: relative;
 width: calc(100% / 7);
 text-align: center;
 cursor: pointer;
 border-radius: 50%;
 -webkit-border-radius: 50%;
 transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
 -webkit-transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);

} .c-cal__cel p {

 position: absolute;
 margin: 0;
 top: 50%;
 left: 50%;
 width: 40px;
 height: 40px!important;
 line-height: 40px;
 background: #9bad8e;
 transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%);
 border-radius: 50%;
 -webkit-border-radius: 50%;
 transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
 -webkit-transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);

} .c-cal__cel::before {

 content: "";
 display: block;
 padding-top: 100%;

} .c-cal__cel:hover {

 background-color: #cbd8c1 !important;

} .c-cal__cel:hover p {

 background: #9bad8e !important;

} .c-cal__cel:nth-child(1) p {

 background: rgba(215, 16, 15, 0.2);

} .c-cal__cel:nth-child(7) p {

 background: rgba(215, 16, 15, 0.2);

} .c-cal__cel:nth-child(1):hover p {

 background: rgba(215, 16, 15, 0.2)!important;

} .c-cal__cel:nth-child(7):hover p {

 background: rgba(215, 16, 15, 0.2)!important;

} .c-cal__cel.isSelected {

 background-color: #cbd8c1;

} .c-cal__cel.isSelected p {

 background: #9bad8e;

} .c-cal__cel.isToday {

 background-color: #ecf3c9ba!important;

} /* .c-cal__cel.isToday p {

 background: rgba(245, 113, 112, 0.4)!important;

} */ .c-cal__cel.other_month {

 color: rgba(255, 255, 255, 0.2);

} .event:before {

 position: absolute;
 content: ;
 display: block;
 width: 10px;
 height: 10px;
 background-color: #F5F5F5;
 z-index: 10;
 padding: 0;
 top: 50%;
 left: 50%;
 border-radius: 50%;
 -webkit-border-radius: 50%;
 transform: translate(-50%, calc(50% + 20px/2));
 -webkit-transform: translate(-50%, calc(50% + 20px/2));

} .event--birthday:before {

 background-color: #FACC2E;

} .event--festivity:before {

 background-color: #10DDC2;

} .event--important:before {

 background-color: #F57170;

} .c-aside {

 width: 300px;
 padding: 20px;

} .c-aside__day {

 font-size: 28px;
 margin: 50px 0;

} .c-aside__day .c-aside__num {

 font-family: 'Lato', sans-serif;
 font-weight: 900;

} .c-aside__event {

 position: relative;
 padding-left: 20px;
 margin: 20px 0;

} .c-aside__event > span > img {

 width: -webkit-fill-available;
 display: -webkit-box;

} .c-aside__event:before {

 position: absolute;
 display: block;
 content: ;
 width: 16px;
 height: 16px;
 left: 0;
 background-color: #F5F5F5;
 border-radius: 50%;
 -webkit-border-radius: 50%;

} .c-aside__event--birthday:before {

 background-color: #FACC2E;

} .c-aside__event--festivity:before {

 background-color: #10DDC2;

} .c-aside__event--important:before {

 background-color: #F57170;

} .dimmer.transition.visible.active {

 display: flex!important;

} .c-cal__cel p {

   text-align: center!important;

}