Difference between revisions of "Template:Exeter/css/main style"

 
(208 intermediate revisions by the same user not shown)
Line 16: Line 16:
 
}
 
}
 
#HQ_page p {
 
#HQ_page p {
−
     font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+
     font-family: "Oxygen", "Helvetica Neue",Helvetica,Arial,sans-serif;
 
     font-size: 14px;
 
     font-size: 14px;
 
     line-height: 1.42857143;
 
     line-height: 1.42857143;
Line 22: Line 22:
 
}
 
}
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 {
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 {
−
     font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+
     font-family: "Oxygen", "Helvetica Neue",Helvetica,Arial,sans-serif;
 
     line-height: 1.1;
 
     line-height: 1.1;
 
     color: #333;
 
     color: #333;
Line 56: Line 56:
 
   ------------------- Actual styling information ---------------------
 
   ------------------- Actual styling information ---------------------
 
*/
 
*/
 +
/*
 +
  General styling
 +
*/
 +
.row { /*adjust margins for bootstrap columns*/
 +
  margin-top: 15px;
 +
  margin-bottom: 15px;
 +
}
 +
 +
footer {
 +
  font-family: 'Oxygen', 'Helvetica Neue', Helvetica;
 +
  border-top: solid 2px;
 +
  border-top-color: black;
 +
  background-color: rgba(30,86,160,1.0);
 +
  margin-bottom: -20px;
 +
}
  
−
body {
+
footer img {
−
background-color: rgba(255, 255, 255, 1);
+
  width: 30px;
−
font-family: 'Oxygen', sans-serif;
+
 
}
 
}
  
 
/*
 
/*
−
Styling for the navbar - overwrites bootstrap default styles.
+
  -------------------------- Styling for default page -------------------------
 
*/
 
*/
−
.navbar {
+
#logo-top-left {
−
background-color: rgba(30,86,160,1);
+
  position: fixed;
−
        margin-top: 16px;
+
  top: 15px;
−
        border-top: solid 3px;
+
  left: 5px;
 +
  width: 150px;
 
}
 
}
  
−
.navbar > .navbar-header > .navbar-brand {
+
#navbar-top {
−
       
+
  font-family: 'Oxygen', 'Helvetica Neue', Helvetica;
 +
  margin-top: 15px;
 +
  border-bottom: solid;
 +
  border-color: rgba(30,86,160,1.0);
 +
  background-color: rgb(255,255,255);
 
}
 
}
  
−
.navbar.navbar-default.navbar-fixed-top .container .navbar-header .navbar-brand,
+
 
−
#navbar ul li a{
+
#navbar-top a, #navbarStartpage a {
−
color: rgb(255,255,255);
+
  color: rgba(30,86,160,1.0);
 
}
 
}
  
−
#navbar .dropdown .dropdown-menu {
+
#navbar-top a:hover, #navbarStartpage a:hover {
−
background-color: rgba(30,86,160,1);
+
  color: rgba(252,191,10,1.0);
 
}
 
}
  
−
#navbar .dropdown .dropdown-menu a:hover,
+
#navbar-top .nav-item .active, #navbarStartpage .nav-item .active {
−
#navbar .navbar-nav > .dropdown > .dropdown-menu > .active > a:hover {
+
  color: rgba(162,162,161,1.0);
−
background-color: rgba(166, 166, 160, 0.7);
+
 
}
 
}
  
−
#navbar .dropdown-toggle:active, #navbar .open .dropdown-toggle {
+
#navbar-top-placeholder{
−
background: rgba(225, 198, 148, 0.5);
+
  width: 75px;
 
}
 
}
  
−
#navbar ul.nav li.dropdown:hover > ul.dropdown-menu {
+
#navbar-page{
−
    display: block;
+
  font-family: 'Oxygen', 'Helvetica Neue', Helvetica;
 +
  position: fixed;
 +
  top: 125px;
 
}
 
}
  
−
#navbar .navbar-nav > .active > a,
+
#navbar-page.navbar {
−
#navbar .navbar-nav > .dropdown > .dropdown-menu > .active > a {
+
  background-color: none;
−
background: rgba(166,166,166,0.3);
+
}
 +
 
 +
#navbar-page a {
 +
  color: rgba(30,86,160,1.0);
 +
}
 +
 
 +
#navbar-page a:hover {
 +
  color: rgba(252,191,10,1.0);
 +
}
 +
 
 +
 
 +
#pageContent {
 +
  font-family: 'Oxygen', 'Helvetica Neue', Helvetica;
 +
  margin-top: 75px;
 +
  padding-right: 40px;
 +
}
 +
 
 +
#pageHeader {
 +
  text-align: center;
 +
 
 +
}
 +
 
 +
#pageContent h3, #pageContent h4, #pageContent h5 {
 +
  font-weight: bold;
 +
}
 +
 
 +
#pageContent p {
 +
  font-size: 16px;
 +
}
 +
 
 +
#pageContent ul{
 +
  font-size: 20px;
 +
}
 +
 
 +
#pageContent ul {
 +
  list-style-image: none;
 +
  list-style-type: circle;
 +
  font-size: inherit;
 +
}
 +
 
 +
#pageContent a {
 +
  color: rgba(30,86,160,1.0);
 +
}
 +
 
 +
#pageContent a:hover {
 +
  color: rgba(252,191,10,1.0);
 +
  text-decoration: none;
 +
}
 +
 
 +
#pageContent img {
 +
  margin-bottom: 10px;
 +
}
 +
 
 +
#pageContent #referenceList  {
 +
  list-style-image: none !important;
 +
  list-style-type: none !important;
 +
  font-size: 8px !important;
 +
}
 +
 
 +
#pageContent #referenceList ul {
 +
  font-size: 8px !important;
 
}
 
}
  
 
/*
 
/*
−
Styling for individual elements to overwrite bootstrap default styles.
+
  -------------------- Styling for the start page -----------------------
 
*/
 
*/
  
−
#bs-overwrite .jumbotron {
+
#navbarStartpage {
−
border: solid 2px rgba(30,86,160);
+
  display: none;
−
margin: 5%;
+
  background: rgb(255,255,255);
 +
  font-family: 'Oxygen', 'Helvetica Neue', Helvetica;
 +
  margin-top: 15px;
 +
  border-bottom: solid;
 +
  border-color: rgba(30,86,160,1.0);
 
}
 
}
  
−
#bs-overwrite .jumbotron p {
+
.jumbotron {
−
padding: 5%;
+
  font-family: 'Oxygen', 'Helvetica Neue', Helvetica;
−
text-align: justify;
+
  margin-top: -15px;
 
}
 
}
  
−
#bs-overwrite h1 {
+
.navbar-brand {
−
text-align: center;
+
  margin: auto;
 
}
 
}
  
−
#bs-overwrite p {
+
#startPageTopRow {
−
padding-left, padding-right: 5%;
+
  border-bottom: solid;
 +
  border-bottom-color: rgba(202, 203, 206,1.0);
 
}
 
}
 +
 +
#startPageJumbotron {
 +
  height: 100vh;
 +
  padding-top: 10px;
 +
}
 +
 +
#carouselStartPage {
 +
  height: 100%;
 +
}
 +
 +
.carousel-inner {
 +
  height: 90vh;
 +
  margin-bottom: 60px;
 +
  /*width: 100%;
 +
  background-color: rgba(202, 203, 206, 0.5);*/
 +
}
 +
 +
.carousel-item img{
 +
  height: 60vh;
 +
  margin: auto;
 +
  margin-bottom: 15px;
 +
}
 +
 +
.carousel-caption{
 +
  height: 30vh;
 +
  position: relative;
 +
  left: auto;
 +
  right: auto;
 +
  color: black;
 +
  margin: auto;
 +
}
 +
 +
.carousel-caption p{
 +
  font-size: 16px !important;
 +
}
 +
 +
.carousel-indicators{
 +
  /*position: relative;
 +
  left: auto;
 +
  right: auto;
 +
  padding-top: 20px;*/
 +
  height: 5vh;
 +
  bottom: -60px;
 +
}
 +
 +
.carousel-indicators li {
 +
  background-color: rgba(162,162,161,1.0);
 +
}
 +
 +
.carousel-indicators .active {
 +
  background-color: black;
 +
}
 +
 +
#carousel-chevron {
 +
  width: 50%;
 +
}
 +
 +
#HQ_page #achievements {
 +
  border: solid;
 +
  border-color: rgba(30,86,160,1.0);
 +
  border-radius: 2px;
 +
 
 +
}
 +
 +
#achievements h1{
 +
  font-size: 400%;
 +
  text-align: center;
 +
  font-weight: bold;
 +
}
 +
 +
#projectDescription h3{
 +
  text-align: center;
 +
}
 +
 +
#projectDescription p{
 +
  text-align: justify;
 +
}
 +
 +
#startPageCards {
 +
  margin-bottom: 40px;
 +
}
 +
 +
#startPageCards .btn-primary {
 +
  background-color: rgba(30,86,160,1.0);
 +
  color: rgba(255,255,255,1.0);
 +
  border-color: black;
 +
}
 +
 +
#startPageCards .btn-primary:hover {
 +
  background-color: rgba(30,86,160,1.0);
 +
  color: rgba(252,191,10,1.0);
 +
  border-color: black;
 +
}
 +
 +
.card-header img {
 +
  width: 50%;
 +
}
 +
  
 
/*
 
/*
−
        Styling for datepicker (part of notebook)
+
-------------------- Styling for datepicker (part of notebook) --------------------
 
*/
 
*/
 
#datepicker {
 
#datepicker {
−
         width: 50%;
+
         z-index: 0;
−
         margin: auto;
+
         width: 80%;
−
         display: float;
+
         margin: 5%;
−
}
+
−
 
+
−
.ui-icon.ui-icon-circle-triangle-e {
+
−
      background-image: url('...');
+
 
}
 
}
  
 
#notes {
 
#notes {
−
       width: 40%;
+
       width: 90%;
−
       margin-left: 30%;
+
       margin: 5%;
−
      margin-right: 30%;
+
 
       font-family: 'Oxygen', sans-serif;
 
       font-family: 'Oxygen', sans-serif;
 
}
 
}
Line 157: Line 335:
 
}
 
}
  
−
.arrow {  
+
#notebook-description {
−
       margin-left: 10%;
+
      width: 60%;
−
       margin-right: 10%;
+
      margin: auto;
 +
}
 +
 
 +
.hasDatePicker .arrow {
 +
       height: 10%;
 +
}
 +
 
 +
/*
 +
  ------------------------ Styling for team page -----------------------
 +
*/
 +
 
 +
#teamPage img {
 +
       margin-top: 15px;
 +
      margin-bottom: 15px;
 +
      max-width: 45%;
 +
}
 +
 
 +
/*
 +
------------------------- Styling for specific elements -----------------
 +
*/
 +
 
 +
#pageContent #newcastleLogo{
 +
  padding-top: 20px !important;
 +
}
 +
 
 +
 
 +
/*
 +
--------------------- Styling for footer ---------------------------
 +
*/
 +
 
 +
#footer a {
 +
  color: rgb(255,255,255);
 +
}
 +
 
 +
#footer a:hover {
 +
  color: rgba(252,191,10,1.0);
 +
  text-decoration: none;
 +
}
 +
 
 +
/*
 +
---------------------- Other elements ------------------------------
 +
*/
 +
 
 +
#pageContent figure {
 +
padding: 15px;
 +
}
 +
 
 +
#pageContent figcaption {
 +
  text-align: justify;
 +
}
 +
 
 +
.carousel-item #carousel_logo {
 +
  margin-top: 20px;
 +
  height: 80vh;
 +
}
 +
 
 +
#achievements ul {
 +
list-style-type: none !important;
 
}
 
}

Latest revision as of 13:19, 29 November 2017

/* 

     Overwrite default styling information to hide side menu, adjust top menu, etc.
  • /
  1. top_title, #sideMenu {
display: none;

}

  1. top_menu_14 {
height: 20px;

}

  1. bodyContent h1, #bodyContent h2, #bodyContent h3,
  2. bodyContent h4, #bodyContent h5 {
  margin-bottom: 0px;

}

  1. HQ_page p {
   font-family: "Oxygen", "Helvetica Neue",Helvetica,Arial,sans-serif;
   font-size: 14px;
   line-height: 1.42857143;
   color: #333;

}

  1. bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 {
   font-family: "Oxygen", "Helvetica Neue",Helvetica,Arial,sans-serif;
   line-height: 1.1;
   color: #333;
   font-weight: 500;
   margin-bottom: 18px;

}


  1. globalWrapper {
  padding: 0px;
  font-size: 100%;
  width: 100%;
  height: 100%;
  margin: 0px;

}

  1. content{
   top: 0;
   left: 0;
   right: 0;
   width: 100%;
   height: 100%;
   padding: 0px;
   margin-right: auto;
   margin-left: auto;

}

  1. mw-content-text, #bodyContent, #HQ_page, .mw_content_ltr, .mw-body{
   width: 100%;
   height: 100%;

}

/* 

 ------------------- Actual styling information ---------------------
  • /

/* 

 General styling
  • /

.row { /*adjust margins for bootstrap columns*/ 

 margin-top: 15px;
 margin-bottom: 15px;

}

footer { 

 font-family: 'Oxygen', 'Helvetica Neue', Helvetica;
 border-top: solid 2px;
 border-top-color: black;
 background-color: rgba(30,86,160,1.0);
 margin-bottom: -20px;

}

footer img { 

 width: 30px;

}

/* 

 -------------------------- Styling for default page -------------------------
  • /
  1. logo-top-left {
 position: fixed;
 top: 15px;
 left: 5px;
 width: 150px;

}

  1. navbar-top {
 font-family: 'Oxygen', 'Helvetica Neue', Helvetica;
 margin-top: 15px;
 border-bottom: solid;
 border-color: rgba(30,86,160,1.0);
 background-color: rgb(255,255,255);

}


  1. navbar-top a, #navbarStartpage a {
 color: rgba(30,86,160,1.0);

}

  1. navbar-top a:hover, #navbarStartpage a:hover {
 color: rgba(252,191,10,1.0);

}

  1. navbar-top .nav-item .active, #navbarStartpage .nav-item .active {
 color: rgba(162,162,161,1.0);

}

  1. navbar-top-placeholder{
 width: 75px;

}

  1. navbar-page{
 font-family: 'Oxygen', 'Helvetica Neue', Helvetica;
 position: fixed;
 top: 125px;

}

  1. navbar-page.navbar {
 background-color: none;

}

  1. navbar-page a {
 color: rgba(30,86,160,1.0);

}

  1. navbar-page a:hover {
 color: rgba(252,191,10,1.0);

}


  1. pageContent {
 font-family: 'Oxygen', 'Helvetica Neue', Helvetica;
 margin-top: 75px;
 padding-right: 40px;

}

  1. pageHeader {
 text-align: center;

}

  1. pageContent h3, #pageContent h4, #pageContent h5 {
 font-weight: bold;

}

  1. pageContent p {
 font-size: 16px;

}

  1. pageContent ul{
 font-size: 20px;

}

  1. pageContent ul {
 list-style-image: none;
 list-style-type: circle;
 font-size: inherit;

}

  1. pageContent a {
 color: rgba(30,86,160,1.0);

}

  1. pageContent a:hover {
 color: rgba(252,191,10,1.0);
 text-decoration: none;

}

  1. pageContent img {
 margin-bottom: 10px;

}

  1. pageContent #referenceList {
 list-style-image: none !important;
 list-style-type: none !important;
 font-size: 8px !important;

}

  1. pageContent #referenceList ul {
 font-size: 8px !important;

}

/* 

 -------------------- Styling for the start page -----------------------
  • /
  1. navbarStartpage {
 display: none;
 background: rgb(255,255,255);
 font-family: 'Oxygen', 'Helvetica Neue', Helvetica;
 margin-top: 15px;
 border-bottom: solid;
 border-color: rgba(30,86,160,1.0);

}

.jumbotron { 

 font-family: 'Oxygen', 'Helvetica Neue', Helvetica;
 margin-top: -15px;

}

.navbar-brand { 

 margin: auto;

}

  1. startPageTopRow {
 border-bottom: solid;
 border-bottom-color: rgba(202, 203, 206,1.0);

}

  1. startPageJumbotron {
 height: 100vh;
 padding-top: 10px;

}

  1. carouselStartPage {
 height: 100%;

}

.carousel-inner { 

 height: 90vh;
 margin-bottom: 60px;
 /*width: 100%;
 background-color: rgba(202, 203, 206, 0.5);*/

}

.carousel-item img{ 

 height: 60vh;
 margin: auto;
 margin-bottom: 15px;

}

.carousel-caption{ 

 height: 30vh;
 position: relative;
 left: auto;
 right: auto;
 color: black;
 margin: auto;

}

.carousel-caption p{ 

 font-size: 16px !important;

}

.carousel-indicators{ 

 /*position: relative;
 left: auto;
 right: auto;
 padding-top: 20px;*/
 height: 5vh;
 bottom: -60px;

}

.carousel-indicators li { 

 background-color: rgba(162,162,161,1.0);

}

.carousel-indicators .active { 

 background-color: black;

}

  1. carousel-chevron {
 width: 50%;

}

  1. HQ_page #achievements {
 border: solid;
 border-color: rgba(30,86,160,1.0);
 border-radius: 2px;

}

  1. achievements h1{
 font-size: 400%;
 text-align: center;
 font-weight: bold;

}

  1. projectDescription h3{
 text-align: center;

}

  1. projectDescription p{
 text-align: justify;

}

  1. startPageCards {
 margin-bottom: 40px;

}

  1. startPageCards .btn-primary {
 background-color: rgba(30,86,160,1.0);
 color: rgba(255,255,255,1.0);
 border-color: black;

}

  1. startPageCards .btn-primary:hover {
 background-color: rgba(30,86,160,1.0);
 color: rgba(252,191,10,1.0);
 border-color: black;

}

.card-header img { 

 width: 50%;

}


/* 

-------------------- Styling for datepicker (part of notebook) --------------------
  • /
  1. datepicker {
       z-index: 0;
       width: 80%;
       margin: 5%;

}

  1. notes {
     width: 90%;
     margin: 5%;
     font-family: 'Oxygen', sans-serif;

}

  1. notes.h1 {
     font-size: 75%;

}

  1. notes.li {
     font-family: 'Oxygen';
     font-size: 40%;

}

  1. notes.p {
     font-size: 40%;

}

  1. notebook-description {
     width: 60%;
     margin: auto;

}

.hasDatePicker .arrow { 

     height: 10%;

}

/* 

 ------------------------ Styling for team page -----------------------
  • /
  1. teamPage img {
     margin-top: 15px;
     margin-bottom: 15px;
     max-width: 45%;

}

/* 

------------------------- Styling for specific elements -----------------
  • /
  1. pageContent #newcastleLogo{
 padding-top: 20px !important;

}


/* 

--------------------- Styling for footer ---------------------------
  • /
  1. footer a {
 color: rgb(255,255,255);

}

  1. footer a:hover {
 color: rgba(252,191,10,1.0);
 text-decoration: none;

}

/*

Other elements ------------------------------
  • /
  1. pageContent figure {

padding: 15px; }

  1. pageContent figcaption {
 text-align: justify;

}

.carousel-item #carousel_logo { 

 margin-top: 20px;
 height: 80vh;

}

  1. achievements ul {
list-style-type: none !important;

}