Difference between revisions of "Team:NCHU Taichung/style/notebook.css"
| (2 intermediate revisions by the same user not shown) | |||
| Line 91: | Line 91: | ||
height: 80px; | height: 80px; | ||
width: 100%; | width: 100%; | ||
| − | margin-top: | + | margin-top: -8px; |
z-index: 50; | z-index: 50; | ||
background: #b8c6ae; | background: #b8c6ae; | ||
| Line 456: | Line 456: | ||
width: -webkit-fill-available; | width: -webkit-fill-available; | ||
display: -webkit-box; | display: -webkit-box; | ||
| + | width: -moz-available; | ||
| + | width: fill-available; | ||
} | } | ||
.c-aside__event:before { | .c-aside__event:before { | ||
Latest revision as of 13:57, 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: -8px; 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; width: -moz-available; width: fill-available;
} .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;
}