Difference between revisions of "MediaWiki:Common.css"

From ICANNWiki
Jump to navigation Jump to search
 
(149 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
/* CSS placed here will be applied to all skins */
 
/* CSS placed here will be applied to all skins */
  
−
/* No page name on main page (en) */
+
/* Legacy code moved to MediaWiki:Common.css/Legacy */
−
body.page-Main_Page h1.firstHeading {
 
−
display: none;
 
−
}
 
  
−
.IW_BigGreenIconBox {
+
/* Box at the top of the main page layout */
−
     border-spacing: 0;
+
.icannwiki-top-box {
−
     border: 1px solid #28903b;
+
     display: grid;
−
     display: inline-block !important;
+
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
 +
    gap: 4px;
 +
     background-color: #61a376;
 +
    background-image: url('');
 +
    background-size: cover;
 +
     border-radius: 4px;
 +
    margin-bottom: 4px;
 +
    padding: 4px;
 
}
 
}
  
−
.IW_BigGreenIconBox td {
+
/* Hides bullet points */
−
    text-align: center;
+
.icannwiki-top-box ul {
−
     width: 85px;
+
list-style: none;
 +
     list-style-type: none;
 
}
 
}
  
−
.IW_BigGreenIconBox td img {
+
/* Changes bullet points to a Unicode character */
−
     margin: -2px;
+
.icannwiki-top-box ul li:before {
 +
background-image: url('/images/8/82/1F4CE.png');
 +
    background-size: 32px 32px;
 +
     display: inline-block;
 +
    vertical-align: middle;
 +
    width: 32px;
 +
    height: 32px;
 +
    content:"";
 
}
 
}
  
−
.IW_MissionAndSponsorsBox {
+
/* List stylings */
−
float: right;
+
.icannwiki-top-box ul li {
−
border: 1px solid #c0c0c0;
+
    font-size: 110%;
−
border-bottom: 1px solid #c0c0c0;
+
    margin-bottom: 4px; /* Adjusts the spacing between list items */
−
width: 375px;
 
−
margin-left: 20px;
 
−
background-color: #FFF;
 
 
}
 
}
  
−
.IW_MissionAndSponsorsBox .MissionStatement {
+
.icannwiki-top-box a {
−
color: #000;
+
    color: white;
−
background-color: #f6f6f6;
+
    font-weight: bold;
−
padding: 5px 10px;
+
    text-decoration: none;
−
border: 1px solid #0d8323;
 
−
text-align:center;
 
 
}
 
}
  
−
.IW_MissionAndSponsorsBox .Sponsors {
+
.icannwiki-top-box a:hover {
−
margin: 0;
+
    color: #68d62c;
−
font-family: sans-serif;
+
    text-decoration: none;
−
font-size: 12px;
 
−
text-align: left;
 
−
padding: 20px 0px 20px 15px;
 
−
}
 
−
 
 
−
.IW_MissionAndSponsorsBox .Sponsors .Title {
 
−
font-size: 20px;
 
−
font-weight: bold;
 
−
}
 
−
 
 
−
.IW_MissionAndSponsorsBox .Sponsors .AskButton {
 
−
width: 300px;
 
−
margin: 25px auto;
 
−
padding-bottom: 0px;
 
−
}
 
−
 
 
−
.gTLD_InfoBox {
 
−
background-color: #f6f6f6;
 
−
border: 2px solid #466f81;
 
−
padding: 10px;
 
−
margin-bottom: 15px;
 
−
width: 100%;
 
−
height: 150px;
 
−
}
 
−
 
 
−
.gTLD_InfoBox .Dimensions {
 
−
width: 200px;
 
−
height: 125px;
 
−
float: left;
 
−
margin: 0px 20px 0 0;
 
−
border-right: 1px solid #bdbdbd;
 
−
}
 
−
.gTLD_Info {
 
−
background-color: #f6f6f6;
 
−
border: 2px solid #466f81;
 
−
padding: 10px;
 
−
margin: 2em 0 2em 0;
 
−
width: 100%;
 
−
height: 150px;
 
−
}
 
−
.AOW {
 
−
background:#466f81;
 
−
font-family:sans-serif;
 
−
font-size:120%;
 
−
font-weight:bold;
 
−
border:2px solid #0d8323;
 
−
text-align:left;
 
−
color:#FFF;
 
−
padding-left:0.4em;
 
−
padding-top:0.2em;
 
−
padding-bottom:0.2em;
 
−
}
 
−
.WelcomeBox {
 
−
float:left;
 
−
height:8em;
 
−
width:50%;
 
−
background:#d8dfe8;
 
−
padding:0 -1em 0 0;
 
−
margin:0 0 1em 0;
 
−
display:inline-block;
 
−
}
 
−
.WelcomeBox .Message {
 
−
background:#d8dfe8;
 
−
align:center;
 
−
}
 
−
.MissingLinks {
 
−
display:none;
 
−
}
 
−
.CommunityPortalHeader {
 
−
width:100%;
 
−
height:50px;
 
−
background:#d8dfe8;
 
−
margin:1.2em 0 6px 0;
 
−
border:1px solid #ddd;
 
−
text-align: center;
 
−
font-size: 1.7em;
 
−
}
 
−
.WritingCommunityBox {
 
−
width:50%;
 
−
float:left;
 
−
padding:0 .5em 0 0;
 
−
}
 
−
.WritingCommunityBox .RowStyle {
 
−
width: 100%;
 
−
padding:0em .1em 0em .1em;
 
−
border-bottom:1px solid #0d8323;
 
−
background: whitesmoke;
 
−
}
 
−
.WritingCommunityBox .ColumnStyle {
 
−
background:#0d8323;
 
−
font-family:sans-serif;
 
−
font-size:120%;
 
−
font-weight:bold;
 
−
border:2px solid #466f81;
 
−
text-align:left;
 
−
color:#FFF;
 
−
padding: 0 0 0 .65em;
 
−
}
 
−
.PrimerICW {
 
−
width:46%;
 
−
background-color:whitesmoke;
 
−
float:left;
 
−
display:inline-block;
 
−
height:180px;
 
−
padding: 1em 1em 1em 1em;
 
−
border: 2px solid gray;
 
−
}
 
−
.PrimerIM {
 
−
width:46%;
 
−
background-color:whitesmoke;
 
−
float:right;
 
−
display:inline-block;
 
−
height:180px;
 
−
padding: 1em 1em 1em 1em;
 
−
border: 2px solid gray;
 
−
}
 
−
.ICANNBoard {
 
−
display: none;
 
−
}
 
−
.ICANNBoardMembers {
 
−
height:230px;
 
−
width:50%;
 
−
display:inline-block;
 
−
padding:1em 1em 1em 1em;
 
−
float:left;
 
−
overflow:auto;
 
−
}
 
−
.Editathon {
 
−
background:#339933;
 
−
font-family:sans-serif;
 
−
font-size:120%;
 
−
font-weight:bold;
 
−
border:2px solid #ffa500;
 
−
text-align:left;
 
−
color:#FFF;
 
−
padding-left:0.4em;
 
−
padding-top:0.2em;
 
−
padding-bottom:0.2em;
 
−
}
 
−
 
 
−
.MainPage {
 
−
width:70%;
 
−
float:left;
 
−
display:inline-block;
 
−
}
 
−
 
 
−
#AOWBox {
 
−
display:flex;
 
−
flex-direction:column;
 
−
width:99.7%;
 
−
border:1px solid #bcd7c4;
 
−
margin-bottom:.5em;
 
−
float:left;
 
−
background:white;
 
−
}
 
−
 
 
−
.MainPageHeader {
 
−
background:#4c9662;
 
−
font-family:sans-serif;
 
−
font-size:120%;
 
−
font-weight:bold;
 
−
border:2px solid #0d8323;
 
−
text-align:left;
 
−
color:#FFF;
 
−
height: 20px;
 
−
margin:.25em .25em .25em .25em;
 
−
padding:.25em .25em .25em .25em;
 
−
}
 
−
 
 
−
#FeaturedVideo {
 
−
height:280px;
 
−
width:62%;
 
−
border:1px solid #bcd7c4;
 
−
margin:0 0em 0em 0;
 
−
display:inline-block;
 
−
background:white;
 
−
}
 
−
 
 
−
#Acronym {
 
−
height:280px;
 
−
width:36.5%;
 
−
border:1px solid #bcd7c4;
 
−
margin:0 0 .5em 0;
 
−
float:right;
 
−
background:white;
 
−
padding:0 0em 0 0;
 
−
}
 
−
 
 
−
#AcronymArchive {
 
−
height:280px;
 
−
border:1px solid #bcd7c4;
 
−
margin:0 0 .5em 0;
 
−
float:left;
 
−
background:white;
 
−
padding:0 0em 0 0;
 
−
}
 
−
 
 
−
#News {
 
−
height:225px;
 
−
width:100%;
 
−
border:1px solid #bcd7c4;
 
−
margin-bottom:.5em;
 
−
background:white;
 
−
}
 
−
 
 
−
#Welcome {
 
−
float:left;
 
−
width:35%;
 
−
text-align: center;
 
 
}
 
}
  
−
#topbar {
+
/* Header for featured article, news, about us, and so on */
−
    background: -moz-linear-gradient(#098280, #E95F26);/* For Firefox 3.6 to 15 */
+
.icannwiki-section-header {
−
    background: #098280; /* For browsers that do not support gradients */
+
     background: #62a376;
−
    background: -webkit-linear-gradient(#098280, #E95F26); /* For Safari 5.1 to 6.0 */
+
     font-family: sans-serif;
−
    background: -o-linear-gradient(#098280, #E95F26); /* For Opera 11.1 to 12.0 */
+
     font-weight: bold;
−
     background: linear-gradient(#098280, #E95F26); /* Standard syntax */
+
     text-align: left;
−
    width:100%;
+
     color: #ebfcef;
−
    color:white;
+
     height: 1.5em;
−
     font-size:4vw;
+
     padding: .5em;
−
    text-align:center;
+
     border-radius: 5px;
−
    text-shadow:2px 2px black;
 
−
     font-weight:bold;
 
−
     min-height:130px;
 
−
     display:flex;
 
−
    align-items:center;
 
−
}
 
−
#body {
 
−
    width:100%;
 
−
     margin:0 auto;
 
−
}
 
−
.fixed {
 
−
    margin:0 auto;
 
−
     vertical-align:baseline;
 
−
}
 
−
.flexbox{
 
−
    display:flex;
 
−
    flex-direction:column;
 
−
    margin: 15px 15px;
 
−
     font-size:1.3vw;
 
 
}
 
}
−
.navbutton {
 
−
border-right:.1vw solid #587560;
 
−
color:white;
 
−
font-weight:bold;
 
−
font-size:1.6vw;
 
−
padding:0 .5vw;
 
−
display:flex;
 
−
flex-direction:column;
 
−
width:12.7vw;
 
−
height:3vw;
 
−
text-align:center;
 
−
float:left;
 
−
text-shadow:.1vw .1vw black;
 
  
−
}
+
/* Colored bounding box */
−
.navbutton2 {
+
.icannwiki-colored-box {
−
color:white;
+
background: #f1f6f3;
−
font-weight:bold;
+
padding-left: 1%;
−
font-size:1.6vw;
+
padding-right: 1%
−
padding:0 .5vw;
 
−
display:flex;
 
−
flex-direction:column;
 
−
width:12.6vw;
 
−
height:3vw;
 
−
text-align:center;
 
−
float:left;
 
−
text-shadow:.1vw .1vw black;
 
−
}
 
−
#navbar {
 
−
background:#E95F26;
 
−
border:.1vw solid #587560;
 
−
height:3vw;
 
−
display:flex;
 
−
flex-direction:column;
 
−
}
 
−
.sectionheader{
 
−
    background:#098280;
 
−
    width:100%;
 
−
    color:white;
 
−
    font-size:4vw;
 
−
    text-align:center;
 
−
    text-shadow:.075vw .075vw black;
 
−
    font-weight:bold;
 
−
    min-height:3.5vw;
 
−
    border-radius:25px;
 
−
    display:flex;
 
−
    align-items:left;
 
−
}
 
−
.primerlogo {
 
−
width:auto;
 
−
max-width:13vw;
 
−
height:auto;
 
−
max-height:13vw;
 
−
margin:0 0 2vw 3vw;
 
−
}
 
−
.camel {
 
−
width: auto;
 
−
max-width: 16vw;
 
−
height: auto;
 
−
max-height: 11vw;
 
−
width: auto;
 
−
position:relative;
 
−
top:1vw;
 
−
}
 
−
.editathonTall {
 
−
width:auto;
 
−
max-width:13vw;
 
−
height:auto;
 
−
max-height:30vw;
 
−
padding:0 0 0 0;
 
−
}
 
−
#editathonsection {
 
−
    font-size:1.3vw;
 
−
    text-align:left;
 
−
    display:flex;
 
−
    align-items:center;
 
−
}
 
−
.sectionheader2{
 
−
    background:#52A7A6;
 
−
    width:100%;
 
−
    color:white;
 
−
    font-size:2vw;
 
−
    text-align:center;
 
−
    text-shadow:.075vw .075vw black;
 
−
    font-weight:bold;
 
−
    min-height:3vw;
 
−
    display:flex;
 
−
    align-items:left;
 
−
    padding:1vw 0 0 1vw;
 
−
}
 
−
.primertextbox{
 
−
background-color:gray;
 
−
color:white;
 
−
padding:25px 15px 15px 15px;
 
−
position:relative;
 
−
bottom:.4vw;
 
−
font-size:1.3vw;
 
−
}
 
−
.venuemap{
 
−
max-width:100%;
 
−
}
 
−
.faditribute{
 
−
height:10vw;
 
−
}
 
−
.mw-collapsible-toggle {
 
−
  float: right;
 
−
  -moz-user-select: none;
 
−
  -webkit-user-select: none;
 
−
  -ms-user-select: none;
 
−
  user-select: none;
 
−
}
 
−
/* Align the toggle based on the direction of the content language */
 
−
/* @noflip */
 
−
.mw-content-ltr .mw-collapsible-toggle,
 
−
.mw-content-rtl .mw-content-ltr .mw-collapsible-toggle {
 
−
  float: right;
 
−
}
 
−
/* @noflip */
 
−
.mw-content-rtl .mw-collapsible-toggle,
 
−
.mw-content-ltr .mw-content-rtl .mw-collapsible-toggle {
 
−
  float: left;
 
 
}
 
}
  
−
.mw-customtoggle,
+
/* Separator */
−
.mw-collapsible-toggle {
+
.icannwiki-clearfix {
−
  cursor: pointer;
+
    clear: both;
 
}
 
}
  
−
/* collapse links in captions should be inline */
+
/* Main page content box: left */
−
caption .mw-collapsible-toggle,
+
.icannwiki-half-width-left {
−
.mw-content-ltr caption .mw-collapsible-toggle,
+
    width: 49%;
−
.mw-content-rtl caption .mw-collapsible-toggle,
+
    float: left;
−
.mw-content-rtl .mw-content-ltr caption .mw-collapsible-toggle,
 
−
.mw-content-ltr .mw-content-rtl caption .mw-collapsible-toggle {
 
−
  float: none;
 
 
}
 
}
  
−
/* list-items go as wide as their parent element, don't float them inside list items */
+
/* Main page content box: right */
−
li .mw-collapsible-toggle,
+
.icannwiki-half-width-right {
−
.mw-content-ltr li .mw-collapsible-toggle,
+
    width: 49%;
−
.mw-content-rtl li .mw-collapsible-toggle,
+
    float: right;
−
.mw-content-rtl .mw-content-ltr li .mw-collapsible-toggle,
 
−
.mw-content-ltr .mw-content-rtl li .mw-collapsible-toggle {
 
−
  float: none;
 
 
}
 
}
  
−
/* the added list item should have no list-style */
+
/* Justified text */
−
.mw-collapsible-toggle-li {
+
.icannwiki-justified {
−
  list-style: none;
+
text-align: justify;
 
}
 
}
  
−
#AcronymList{
+
/* Highlighted text */
−
  background: -moz-linear-gradient(#098280, #E95F26);/* For Firefox 3.6 to 15 */
+
.icannwiki-highlight {
−
    background: #098280; /* For browsers that do not support gradients */
+
color: #61a376;
−
    background: -webkit-linear-gradient(#098280, #E95F26); /* For Safari 5.1 to 6.0 */
+
     font-weight: bold;
−
    background: -o-linear-gradient(#098280, #E95F26); /* For Opera 11.1 to 12.0 */
 
−
    background: linear-gradient(#098280, #E95F26); /* Standard syntax */
 
−
    max-width:85vw;
 
−
    font-size:5vw;
 
−
    text-align:center;
 
−
     font-weight:bold;
 
−
    min-height:130px;
 
 
}
 
}
−
#fadifarewell{
 
−
  background: -moz-linear-gradient(#098280, #E95F26);/* For Firefox 3.6 to 15 */
 
−
    background: #098280; /* For browsers that do not support gradients */
 
−
    background: -webkit-linear-gradient(#098280, #E95F26); /* For Safari 5.1 to 6.0 */
 
−
    background: -o-linear-gradient(#098280, #E95F26); /* For Opera 11.1 to 12.0 */
 
−
    background: linear-gradient(#098280, #E95F26); /* Standard syntax */
 
−
    max-width:85vw;
 
−
    font-size:1vw;
 
−
    color:white;
 
−
    min-height:130px;
 
−
    padding:2vw;
 
−
}
 
−
#abc{
 
−
  width:85vw;
 
−
  color:white;
 
−
  font-size:5vw;
 
−
  text-align:center;
 
−
  text-shadow:.2vw .2vw black;
 
−
  font-weight:bold;
 
−
  min-height:13vw;
 
−
  border-radius:0;
 
−
}
 
−
 
−
.AcronymButton{
 
−
    background-color:transparent;
 
−
    font-size:2.4vw;
 
−
    width:12vw;
 
−
    height:7.7vw;
 
−
    padding:.5vw .5vw;
 
−
    display: inline-block;
 
−
    position: relative;
 
−
    border: .2vw solid #FFF;
 
−
    overflow: hidden;
 
−
    text-decoration: none;
 
−
    text-align:center;
 
−
    color: #FFF;
 
−
    font-family: 'raleway', sans-serif;
 
−
    box-shadow: .1vw .1vw .1vw gray;
 
−
}
 
−
.AcronymButton span {
 
−
    -webkit-transition: 0.6s;
 
−
    -moz-transition: 0.6s;
 
−
    -o-transition: 0.6s;
 
−
    transition: 0.6s;
 
−
    -webkit-transition-delay: 0.2s;
 
−
    -moz-transition-delay: 0.2s;
 
−
    -o-transition-delay: 0.2s;
 
−
    transition-delay: 0.2s;
 
−
}
 
−
 
−
.AcronymButton:before,
 
−
.AcronymButton:after {
 
−
    content: '';
 
−
    position: absolute;
 
−
    top: 0.67em;
 
−
    left: 0;
 
−
    width: 100%;
 
−
    text-align: center;
 
−
    opacity: 0;
 
−
    -webkit-transition: .4s,opacity .6s;
 
−
    -moz-transition: .4s,opacity .6s;
 
−
    -o-transition: .4s,opacity .6s;
 
−
    transition: .4s,opacity .6s;
 
−
}
 
−
.AcronymButton:before {
 
−
    content: attr(data-hover);
 
−
    font-size:1vw;
 
−
    -webkit-transform: translate(-150%,0);
 
−
    -moz-transform: translate(-150%,0);
 
−
    -ms-transform: translate(-150%,0);
 
−
    -o-transform: translate(-150%,0);
 
−
    transform: translate(-150%,0);
 
−
}
 
−
 
−
/* :after */
 
−
 
−
.AcronymButton:after {
 
−
    content: attr(data-active);
 
−
    -webkit-transform: translate(150%,0);
 
−
    -moz-transform: translate(150%,0);
 
−
    -ms-transform: translate(150%,0);
 
−
    -o-transform: translate(150%,0);
 
−
    transform: translate(150%,0);
 
−
}
 
−
 
−
/* Span on :hover and :active */
 
−
 
−
.AcronymButton:hover span,
 
−
.AcronymButton:active span {
 
−
    font-size:1vw;
 
−
    opacity: 0;
 
−
    -webkit-transform: scale(0.3);
 
−
    -moz-transform: scale(0.3);
 
−
    -ms-transform: scale(0.3);
 
−
    -o-transform: scale(0.3);
 
−
    transform: scale(0.3);
 
−
}
 
−
 
−
/*
 
−
    We show :before pseudo-element on :hover
 
−
    and :after pseudo-element on :active
 
−
*/
 
−
 
−
.AcronymButton:hover:before,
 
−
.AcronymButton:active:after {
 
−
    opacity: 1;
 
−
    -webkit-transform: translate(0,0);
 
−
    -moz-transform: translate(0,0);
 
−
    -ms-transform: translate(0,0);
 
−
    -o-transform: translate(0,0);
 
−
    transform: translate(0,0);
 
−
    -webkit-transition-delay: .4s;
 
−
    -moz-transition-delay: .4s;
 
−
    -o-transition-delay: .4s;
 
−
    transition-delay: .4s;
 
−
}
 
−
 
−
/*
 
−
  We hide :before pseudo-element on :active
 
−
*/
 
  
−
.AcronymButton:active:before {
+
/* Font with darker shade of greenish white */
−
    -webkit-transform: translate(-150%,0);
+
.icannwiki-text-white {
−
    -moz-transform: translate(-150%,0);
+
     color: #ebfcef;
−
    -ms-transform: translate(-150%,0);
 
−
    -o-transform: translate(-150%,0);
 
−
     transform: translate(-150%,0);
 
−
    -webkit-transition-delay: 0s;
 
−
    -moz-transition-delay: 0s;
 
−
    -o-transition-delay: 0s;
 
−
    transition-delay: 0s;
 
 
}
 
}
  
−
.fadiquote {
+
/* Larger text */
−
height:8vw;
+
.icannwiki-font-large {
−
width:56.63vw;
+
    font-size: 125%;
 
}
 
}

Latest revision as of 22:51, 17 April 2024

/* CSS placed here will be applied to all skins */

/* Legacy code moved to MediaWiki:Common.css/Legacy */

/* Box at the top of the main page layout */
.icannwiki-top-box {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 4px;
    background-color: #61a376;
    background-image: url('');
    background-size: cover;
    border-radius: 4px;
    margin-bottom: 4px;
    padding: 4px;
}

/* Hides bullet points */
.icannwiki-top-box ul {
	list-style: none;
    list-style-type: none;
}

/* Changes bullet points to a Unicode character */
.icannwiki-top-box ul li:before {
	background-image: url('/images/8/82/1F4CE.png');
    background-size: 32px 32px;
    display: inline-block;
    vertical-align: middle;
    width: 32px; 
    height: 32px;
    content:"";
}

/* List stylings */
.icannwiki-top-box ul li {
    font-size: 110%;
    margin-bottom: 4px; /* Adjusts the spacing between list items */
}

.icannwiki-top-box a {
    color: white;
    font-weight: bold;
    text-decoration: none;
}

.icannwiki-top-box a:hover {
    color: #68d62c;
    text-decoration: none;
}

/* Header for featured article, news, about us, and so on */
.icannwiki-section-header {
    background: #62a376;
    font-family: sans-serif;
    font-weight: bold;
    text-align: left;
    color: #ebfcef;
    height: 1.5em;
    padding: .5em;
    border-radius: 5px;
}

/* Colored bounding box */
.icannwiki-colored-box {
	background: #f1f6f3;
	padding-left: 1%;
	padding-right: 1%
}

/* Separator */
.icannwiki-clearfix {
    clear: both;
}

/* Main page content box: left */
.icannwiki-half-width-left {
    width: 49%;
    float: left;
}

/* Main page content box: right */
.icannwiki-half-width-right {
    width: 49%;
    float: right;
}

/* Justified text */
.icannwiki-justified {
	text-align: justify;
}

/* Highlighted text */
.icannwiki-highlight {
	color: #61a376;
    font-weight: bold;
}

/* Font with darker shade of greenish white */
.icannwiki-text-white {
    color: #ebfcef;
}

/* Larger text */
.icannwiki-font-large {
    font-size: 125%;
}
Retrieved from "https://icannwiki.org/index.php?title=MediaWiki:Common.css&oldid=1349646"