Difference between revisions of "Template:TUDelft/css/Notebook"

 
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
@charset "utf-8";
 
/* CSS Document */
 
 
/* ---------- FONTAWESOME ---------- */
 
/* ---------- https://fortawesome.github.com/Font-Awesome/ ---------- */
 
/* ---------- http://weloveiconfonts.com/ ---------- */
 
 
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
 
 
*[class*="fontawesome-"]:before {
 
  font-family: 'Railway', sans-serif;
 
}
 
 
 
/* ---------- GENERAL ---------- */
 
/* ---------- GENERAL ---------- */
  
body {
+
#notebook {
background: #f9f9f9;
+
 
color: #0e171c;
 
color: #0e171c;
font: 300 100%/1.5em 'Lato', sans-serif;
 
 
margin: 0;
 
margin: 0;
 +
        font-size: 16px;
 
}
 
}
  
a {
 
text-decoration: none;
 
}
 
  
 
h2 {
 
h2 {
Line 42: Line 25:
 
}
 
}
  
.container {
+
#notebook .container {
 
height: 538px;
 
height: 538px;
left: 50%;
 
margin: -255px 0 0 -245px;
 
position: absolute;
 
top: 50%;
 
 
width: 510px;
 
width: 510px;
 
}
 
}
Line 79: Line 58:
  
 
.calendar td {
 
.calendar td {
 +
        padding: 0;
 
border: 2px solid transparent;
 
border: 2px solid transparent;
 
border-radius: 50%;
 
border-radius: 50%;

Latest revision as of 13:06, 23 June 2017

/* ---------- GENERAL ---------- */

  1. notebook {

color: #0e171c; margin: 0;

       font-size: 16px;

}


h2 { font-size: 2em; line-height: 1.25em; margin: .25em 0; }

h3 { font-size: 1.5em; line-height: 1em; margin: .33em 0; }

table { border-collapse: collapse; border-spacing: 0; }

  1. notebook .container {

height: 538px; width: 510px; }

/* ---------- CALENDAR ---------- */

.calendar { text-align: center; }

.calendar header { position: relative; }

.calendar h2 { text-transform: uppercase; }

.calendar thead { font-weight: 600; text-transform: uppercase; }

.calendar tbody { color: #7c8a95; }

.calendar tbody td:hover { border: 2px solid #00addf; }

.calendar td {

       padding: 0;

border: 2px solid transparent; border-radius: 50%; display: inline-block; height: 4em; line-height: 4em; text-align: center; width: 4em; }

.calendar .prev-month, .calendar .next-month { color: #cbd1d2; }

.calendar .prev-month:hover, .calendar .next-month:hover { border: 2px solid #cbd1d2; }

.current-day { background: #00addf; color: #f9f9f9; }

.event { cursor: pointer; position: relative; }

.event:after { background: #00addf; border-radius: 50%; bottom: .5em; display: block; content: ; height: .5em; left: 50%; margin: -.25em 0 0 -.25em; position: absolute; width: .5em; }

.event.current-day:after { background: #f9f9f9; }

.btn-prev, .btn-next { border: 2px solid #cbd1d2; border-radius: 50%; color: #cbd1d2; height: 2em; font-size: .75em; line-height: 2em; margin: -1em; position: absolute; top: 50%; width: 2em; }

.btn-prev:hover, .btn-next:hover { background: #cbd1d2; color: #f9f9f9; }

.btn-prev { left: 6em; }

.btn-next { right: 6em; }