Difference between revisions of "MediaWiki:Common.css"

From ICANNWiki
Jump to navigation Jump to search
(Copy the styles from the main ICANNWiki "mission box" into the stylesheet so that we can refer to and incorporate them via the IW_MissionBox class)
 
(473 intermediate revisions by 6 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) */
+
/* UI STYLES */
body.page-Main_Page h1.firstHeading {
 
display: none;
 
}
 
  
.IW_BigGreenIconBox {
+
/* Links affected by the Lingo extension */
     border-spacing: 0px;
+
.mw-lingo-term {
    border: 1px solid #28903b;
+
     text-decoration: underline solid #cccccc;
     display: inline-block !important;
+
     text-decoration-thickness: 2px;
 
}
 
}
  
.IW_BigGreenIconBox td {
+
/* Popup generated when user hovers over a link affected by Lingo */
 +
.qtip-content {
 +
padding: 8px;
 +
font-size: 1.25em;
 +
}
 +
 
 +
/* Navigation panel on the left side of the main interface */
 +
#mw-panel a {
 +
    font-size: 1.10em;
 +
}
 +
 
 +
#mw-panel a:hover {
 +
    color: #62a376;
 +
    text-decoration: none;
 +
}
 +
 
 +
/* MAIN PAGE STYLES */
 +
 
 +
/* Remove main page header */
 +
body.page-Main_Page.action-view h1.firstHeading, body.page-Main_Page.action-submit h1.firstHeading { display: none; }
 +
 
 +
/* Top box of the main page */
 +
.icannwiki-top-box {
 +
    display: grid;
 +
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
 +
    gap: 4px;
 +
    background-color: #61a376;
 +
    background-image: url('images/b/bd/ICANNWiki-Background-2024-A.svg');
 +
    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:"";
 +
}
 +
 
 +
/* Top box's elements styling */
 +
.icannwiki-top-box ul li {
 +
    font-size: 1.0em;
 +
    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;
 +
}
 +
 
 +
/* Top box's special effects */
 +
.top-box-fx {
 +
    text-shadow:
 +
        2px 2px 4px rgba(0, 64, 0, 0.5); /* Shadow blur */
 +
}
 +
 
 +
/* Header for other boxes in the main page */
 +
.icannwiki-section-header {
 +
    background: #62a376;
 +
    font-family: sans-serif;
 +
    font-weight: bold;
 +
    text-align: left;
 +
    color: #f5fcf7;
 +
    height: 1.5em;
 +
    padding: .5em;
 +
    border-radius: 5px;
 +
}
 +
 
 +
/* Header text special effects */
 +
.header-fx {
 +
    text-shadow:
 +
        2px 2px 2px #006822, /* Drop shadow */
 +
        4px 4px 4px rgba(0, 64, 0, 0.5); /* Shadow blur */
 +
}
 +
 
 +
/* Colored bounding box for text */
 +
.icannwiki-colored-box {
 +
    background: #f1f6f3;
 +
    padding-left: 1%;
 +
    padding-right: 1%;
 +
    font-size: 1.05em;
 +
}
 +
 
 +
/* Separator (blank) */
 +
.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;
 +
}
 +
 
 +
/* Sponsors template */
 +
.icannwiki-sponsors {
 +
    display: grid;
 +
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
 +
    gap: 4px;
 +
    border-radius: 4px;
 +
    margin-bottom: 4px;
 +
    padding: 8px;
 +
    list-style: none;
 +
    padding: 0;
 +
    margin: 0;
 +
    clear: both;
 +
    justify-content: center;
 +
}
 +
 
 +
.icannwiki-sponsors li {
 +
    display: flex;
 +
    justify-content: center;
 +
    align-items: center;
 +
    border: 0px;
 +
    border-radius: 4px;
 +
    padding: 8px;
 +
    height: 140px; /* Adjust as needed */
 +
    box-sizing: border-box;
 +
}
 +
 
 +
.icannwiki-sponsors li:nth-last-child(-n+3) {
 +
    justify-self: center;
 +
}
 +
 
 +
.icannwiki-sponsors img {
 +
    max-width: 100%;
 +
    max-height: 100%;
 +
    object-fit: contain;
 +
}
 +
 
 +
.icannwiki-sponsors ul {
 +
    list-style: none;
 +
    list-style-type: none;
 +
}
 +
 
 +
/* TEMPLATE STYLES */
 +
 
 +
/* Warning template */
 +
.icannwiki-warning {
 +
    display: flex;
 +
    justify-content: center;
 +
    align-items: center;
 +
    text-align: center;
 +
    height: auto;
 +
    width: 60%;
 +
    margin: 0 auto;
 +
    padding: 10px;
 +
    background-color: #FFFDF4;
 +
    border: 2px solid #d48900;
 +
    border-left: 16px solid #d48900;
 +
}
 +
 
 +
.icannwiki-warning a {
 +
    font-weight: bold;
 +
    color: #d48900;
 +
}
 +
 
 +
/* Signaling template */
 +
.icannwiki-signal {
 +
    display: flex;
 +
    justify-content: center;
 +
    align-items: center;
 +
    text-align: center;
 +
    height: auto;
 +
    width: 60%;
 +
    margin: 0 auto;
 +
    padding: 10px;
 +
    background-color: #f4fcff;
 +
    border: 2px solid #0092D4;
 +
    border-left: 16px solid #0092D4;
 +
}
 +
 
 +
.icannwiki-signal a {
 +
    font-weight: bold;
 +
    color: #0092D4;
 +
}
 +
 
 +
/* Danger template */
 +
.icannwiki-danger {
 +
    display: flex;
 +
    justify-content: center;
 +
    align-items: center;
 
     text-align: center;
 
     text-align: center;
     width: 85px;
+
    height: auto;
 +
     width: 60%;
 +
    margin: 0 auto;
 +
    padding: 10px;
 +
    background-color: #fff4f4;
 +
    border: 2px solid #D40000;
 +
    border-left: 16px solid #D40000
 +
}
 +
 
 +
.icannwiki-danger a {
 +
    font-weight: bold;
 +
    color: #D40000;
 +
}
 +
 
 +
/* Template:People */
 +
.template-people {
 +
    float: right;
 +
    border: 1px solid darkgray;
 +
    max-width: 160px;
 +
    padding: 5px;
 +
    padding-bottom: 10px;
 +
    margin-left: 10px
 +
}
 +
 
 +
/* SPECIAL EFFECTS */
 +
 
 +
/* Container for static zeros and ones */
 +
.flowing-numbers {
 +
    position: absolute;
 +
    top: 0;
 +
    right: 0;
 +
    z-index: 1000; /* Ensure it's above other elements */
 +
    font-family: monospace;
 +
    font-size: 1.25em;
 +
    color: rgba(255, 255, 255, 0.3); /* Slightly transparent white */
 +
    line-height: 1.5em;
 +
    pointer-events: none; /* Prevent interaction with the numbers */
 +
    padding: 10px; /* Optional padding */
 +
}
 +
 
 +
/* Static lines of numbers */
 +
.flowing-numbers span {
 +
    display: block;
 +
}
 +
 
 +
/* GENERIC STYLES */
 +
 
 +
/* Hide bullets on lists */
 +
.no-bullets {
 +
    list-style: none;
 +
    list-style-type: none;
 +
    padding-left: 0;
 +
}
 +
 
 +
/* Hide second level bullets on lists */
 +
.no-second-level-bullets ul ul {
 +
    list-style: none;
 +
    list-style-type: none;
 +
    padding-left: 0; /* Adjust padding to align with the parent list */
 +
}
 +
 
 +
.no-second-level-bullets ul ul li {
 +
    padding-left: 0px; /* Adjust padding to maintain alignment if needed */
 +
}
 +
 
 +
/* Centered text */
 +
.icannwiki-centered {
 +
    text-align: center;
 +
}
 +
 
 +
/* Justified text */
 +
.icannwiki-justified {
 +
    text-align: justify;
 +
}
 +
 
 +
/* Larger text */
 +
.icannwiki-font-large {
 +
    font-size: 1.25em;
 
}
 
}
  
.IW_BigGreenIconBox td img {
+
/* Upper case text */
     margin: -2px;
+
.icannwiki-uppercase {
 +
     text-transform: uppercase;
 
}
 
}
  
.IW_MissionBox {
+
/* Font with darker shade of greenish white */
float: right;
+
.icannwiki-text-white {
border: 1px solid #c0c0c0;
+
    color: #ebfcef;
border-bottom: 1px solid #c0c0c0;
 
width: 375px;
 
margin-left: 20px;
 
background-color: #FFF;
 
 
}
 
}

Latest revision as of 22:59, 13 September 2024

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

/* UI STYLES */

/* Links affected by the Lingo extension */
.mw-lingo-term {
    text-decoration: underline solid #cccccc;
    text-decoration-thickness: 2px;
}

/* Popup generated when user hovers over a link affected by Lingo */
.qtip-content {
	padding: 8px;
	font-size: 1.25em;
}

/* Navigation panel on the left side of the main interface */
#mw-panel a {
    font-size: 1.10em;
}

#mw-panel a:hover {
    color: #62a376;
    text-decoration: none;
}

/* MAIN PAGE STYLES */

/* Remove main page header */
body.page-Main_Page.action-view h1.firstHeading, body.page-Main_Page.action-submit h1.firstHeading { display: none; }

/* Top box of the main page */
.icannwiki-top-box {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 4px;
    background-color: #61a376;
    background-image: url('images/b/bd/ICANNWiki-Background-2024-A.svg');
    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:"";
}

/* Top box's elements styling */
.icannwiki-top-box ul li {
    font-size: 1.0em;
    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;
}

/* Top box's special effects */
.top-box-fx {
    text-shadow: 
        2px 2px 4px rgba(0, 64, 0, 0.5); /* Shadow blur */
}

/* Header for other boxes in the main page */
.icannwiki-section-header {
    background: #62a376;
    font-family: sans-serif;
    font-weight: bold;
    text-align: left;
    color: #f5fcf7;
    height: 1.5em;
    padding: .5em;
    border-radius: 5px;
}

/* Header text special effects */
.header-fx {
    text-shadow: 
        2px 2px 2px #006822, /* Drop shadow */
        4px 4px 4px rgba(0, 64, 0, 0.5); /* Shadow blur */
}

/* Colored bounding box for text */
.icannwiki-colored-box {
    background: #f1f6f3;
    padding-left: 1%;
    padding-right: 1%;
    font-size: 1.05em;
}

/* Separator (blank) */
.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;
}

/* Sponsors template */
.icannwiki-sponsors {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 4px;
    border-radius: 4px;
    margin-bottom: 4px;
    padding: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
    clear: both;
    justify-content: center;
}

.icannwiki-sponsors li {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0px;
    border-radius: 4px;
    padding: 8px;
    height: 140px; /* Adjust as needed */
    box-sizing: border-box;
}

.icannwiki-sponsors li:nth-last-child(-n+3) {
    justify-self: center;
}

.icannwiki-sponsors img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.icannwiki-sponsors ul {
    list-style: none;
    list-style-type: none;
}

/* TEMPLATE STYLES */

/* Warning template */
.icannwiki-warning {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: auto;
    width: 60%;
    margin: 0 auto;
    padding: 10px;
    background-color: #FFFDF4;
    border: 2px solid #d48900;
    border-left: 16px solid #d48900;
}

.icannwiki-warning a {
    font-weight: bold;
    color: #d48900;
}

/* Signaling template */
.icannwiki-signal {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: auto;
    width: 60%;
    margin: 0 auto;
    padding: 10px;
    background-color: #f4fcff;
    border: 2px solid #0092D4;
    border-left: 16px solid #0092D4;
}

.icannwiki-signal a {
    font-weight: bold;
    color: #0092D4;
}

/* Danger template */
.icannwiki-danger {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: auto;
    width: 60%;
    margin: 0 auto;
    padding: 10px;
    background-color: #fff4f4;
    border: 2px solid #D40000;
    border-left: 16px solid #D40000
}

.icannwiki-danger a {
    font-weight: bold;
    color: #D40000;
}

/* Template:People */
.template-people {
    float: right;
    border: 1px solid darkgray;
    max-width: 160px;
    padding: 5px;
    padding-bottom: 10px;
    margin-left: 10px
}

/* SPECIAL EFFECTS */

/* Container for static zeros and ones */
.flowing-numbers {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1000; /* Ensure it's above other elements */
    font-family: monospace;
    font-size: 1.25em;
    color: rgba(255, 255, 255, 0.3); /* Slightly transparent white */
    line-height: 1.5em;
    pointer-events: none; /* Prevent interaction with the numbers */
    padding: 10px; /* Optional padding */
}

/* Static lines of numbers */
.flowing-numbers span {
    display: block;
}

/* GENERIC STYLES */

/* Hide bullets on lists */
.no-bullets {
    list-style: none;
    list-style-type: none;
    padding-left: 0;
}

/* Hide second level bullets on lists */
.no-second-level-bullets ul ul {
    list-style: none;
    list-style-type: none;
    padding-left: 0; /* Adjust padding to align with the parent list */
}

.no-second-level-bullets ul ul li {
    padding-left: 0px; /* Adjust padding to maintain alignment if needed */
}

/* Centered text */
.icannwiki-centered {
    text-align: center;
}

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

/* Larger text */
.icannwiki-font-large {
    font-size: 1.25em;
}

/* Upper case text */
.icannwiki-uppercase {
    text-transform: uppercase;
}

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