Difference between revisions of "Template:Custom/songinfo.css"

From Jaroussky Wiki
Jump to navigation Jump to search
 
(14 intermediate revisions by the same user not shown)
Line 5: Line 5:
     font-style: oblique;  
     font-style: oblique;  
     font-size: 1.5em;
     font-size: 1.5em;
     color: #222222;
     color: #333333;
     margin-left: 10px;
     margin-left: 1.2em;
     margin-top: 15px;
     margin-top: 15px;
     max-width: 500px;
     max-width: 500px;
Line 16: Line 16:
     font-size: 1.1em;
     font-size: 1.1em;
     font-style: oblique;
     font-style: oblique;
     color: #222222;
     color: #333333;
     margin-left: 18em;
     margin-left: 2em;
 
}
}


Line 24: Line 23:
     text-align: left;  
     text-align: left;  
     font-size: small;
     font-size: small;
     margin-left: 3em;
     margin-left: 4em;
     margin-top: 0px;
     margin-top: 0px;
     margin-bottom: 10px;
     margin-bottom: 10px;
}
}
/*This styles the links inside the box.*/
.songinfobox a:link {color:#555555;}
.songinfobox a:visited {color:#333333;}
.songinfobox a:hover {color:#444444;}
.songinfobox a:active {color:#FFFFFF;}


/*Which century?*/
/*Which century?*/
Line 33: Line 37:
.fifteenth {
.fifteenth {
   background-color: #DBF1F9;
   background-color: #DBF1F9;
  border: 2px solid #c2c2c2;
  max-width: 500px;
}
}




.sixteenth {
.sixteenth {
  color: white;
  background-color: #B6E3F3;
  background-color: #B6E3F3;
  border: 2px solid #c2c2c2;
  margin: 10px;
  max-width: 500px;
  width: 50px;
  height: 50px;
  display: inline-block;
}
}


.seventeenth {
.seventeenth {
  background-color: #92D5ED;
  background-color: #92D5ED;
  max-width: 500px;
   border: 2px solid #c2c2c2;
   border: 2px solid #c2c2c2;
   max-width: 500px;
   max-width: 500px;
Line 54: Line 56:
.eighteenth {
.eighteenth {
   background-color: #6DC7E6;
   background-color: #6DC7E6;
  max-width: 500px;
   border: 2px solid #c2c2c2;
   border: 2px solid #c2c2c2;
   max-width: 500px;
   max-width: 500px;
Line 63: Line 64:
   background: radial-gradient(circle, rgba(109,199,230,1) 0%, rgba(148,233,188,1) 100%);
   background: radial-gradient(circle, rgba(109,199,230,1) 0%, rgba(148,233,188,1) 100%);
}*/
}*/
.nineteenth {
.nineteenth {
  color: white;
   background-color: #49B9E0;
   background-color: #49B9E0;
   margin: 10px;
   border: 2px solid #c2c2c2;
   width: 50px;
   max-width: 500px;
  height: 50px;
  display: inline-block;
}
}


.twentieth {
.twentieth {
  color: white;
   background-color: #24ABDA;
   background-color: #24ABDA;
   margin: 10px;
   border: 2px solid #c2c2c2;
   width: 50px;
   max-width: 500px;
  height: 50px;
  display: inline-block;
}
}


.twentyfirst {
.twentyfirst {
  color: white;
   background-color: #009DD4;
   background-color: #009DD4;
   margin: 10px;
   border: 2px solid #c2c2c2;
   width: 50px;
   max-width: 500px;
  height: 50px;
  display: inline-block;
}
}





Latest revision as of 15:55, 4 October 2021

/* The purpose of this template is to define the box colours as variables so they can be set globally in case we change our minds over the layout or colour scheme. */

.songinfotitle {
    font-size: 1.5em;
    font-style: oblique; 
    font-size: 1.5em;
    color: #333333;
    margin-left: 1.2em;
    margin-top: 15px;
    max-width: 500px;
    float:left;
}

.songinfosubtitle {
    vertical-align: top;
    font-size: 1.1em;
    font-style: oblique;
    color: #333333;
    margin-left: 2em;
}

.songinfobox {
    text-align: left; 
    font-size: small;
    margin-left: 4em;
    margin-top: 0px;
    margin-bottom: 10px;
}
/*This styles the links inside the box.*/
.songinfobox a:link {color:#555555;}
.songinfobox a:visited {color:#333333;}
.songinfobox a:hover {color:#444444;}
.songinfobox a:active {color:#FFFFFF;}

/*Which century?*/

.fifteenth {
  background-color: #DBF1F9;
  border: 2px solid #c2c2c2;
  max-width: 500px;
}


.sixteenth {
   background-color: #B6E3F3;
   border: 2px solid #c2c2c2;
   max-width: 500px;
}

.seventeenth {
   background-color: #92D5ED;
   border: 2px solid #c2c2c2;
   max-width: 500px;
}

.eighteenth {
   background-color: #6DC7E6;
   border: 2px solid #c2c2c2;
   max-width: 500px;

}/*
.eighteenth {
   max-width: 500px;
   background: radial-gradient(circle, rgba(109,199,230,1) 0%, rgba(148,233,188,1) 100%);
}*/

.nineteenth {
  background-color: #49B9E0;
  border: 2px solid #c2c2c2;
  max-width: 500px;
}

.twentieth {
  background-color: #24ABDA;
  border: 2px solid #c2c2c2;
  max-width: 500px;
}

.twentyfirst {
  background-color: #009DD4;
  border: 2px solid #c2c2c2;
  max-width: 500px;
}


/*
sacred-border = #eaeaea
secular-border = #c2c2c2
15th-century-color #DBF1F9
16th-century-color: #B6E3F3
17th-century-color: #92D5ED
18th-century-color: #6DC7E6
19th-century-color: #49B9E0
20th-century-color: #24ABDA
21th-century-color: #009DD4
*/