|
|
| (138 intermediate revisions by 3 users not shown) |
| Line 1: |
Line 1: |
| /*green online button*/ | | /* Hiding Powered by Google Translate */ |
| .green_online_button {
| | /* Removing for now |
| background-color: #BFD730;
| | .goog-logo-link { |
| border-radius: 10px;
| | display:none !important; |
| color: white;
| |
| width: 210px;
| |
| min-height:52px;
| |
| text-align: center;
| |
| text-decoration: none;
| |
| font-size: 1.1em;
| |
| margin: 5px;
| |
| padding-right: 5px;
| |
| padding-left:5px;
| |
| padding-top:15px;
| |
| padding-bottom:15px;
| |
| display: block; | |
| }
| |
| | |
| .green_online_button:hover, .green_online_button:visited {
| |
| text-decoration: none !important;
| |
| background-color: #cade54;
| |
| }
| |
| | |
| .green_online_button>a, .green_online_button>a.visited, .green_online_button>a.external:visited, .green_online_button>a:hover {
| |
| color: white !important;
| |
| text-decoration: none !important;
| |
| } | | } |
| /*red online button*/
| | .goog-te-gadget { |
| .red_online_button { | | color: transparent !important; |
| background-color: #f16458;
| |
| border-radius: 10px;
| |
| color: white; | |
| width: 210px;
| |
| min-height:52px;
| |
| text-align: center;
| |
| text-decoration: none;
| |
| font-size: 1.1em;
| |
| margin: 5px;
| |
| padding-right: 5px;
| |
| padding-left:5px;
| |
| padding-top:15px;
| |
| padding-bottom:15px;
| |
| display: block;
| |
| } | | } |
| | | .goog-te-gadget div:first-child::after { |
| .red_online_button:hover, .red_online_button:visited { | | display:none !important; |
| text-decoration: none !important; | |
| background-color: #f59289;
| |
| } | | } |
| | */ |
|
| |
|
| .red_online_button>a, .red_online_button>a.visited, .red_online_button>a.external:visited, .red_online_button>a:hover {
| |
| color: white !important;
| |
| text-decoration: none !important;
| |
| }
| |
| /*brown online button*/
| |
| .brown_online_button {
| |
| background-color: #9c947a;
| |
| border-radius: 10px;
| |
| color: white;
| |
| width: 210px;
| |
| min-height:52px;
| |
| text-align: center;
| |
| text-decoration: none;
| |
| font-size: 1.1em;
| |
| margin: 5px;
| |
| padding-right: 5px;
| |
| padding-left:5px;
| |
| padding-top:15px;
| |
| padding-bottom:15px;
| |
| display: block;
| |
| }
| |
|
| |
|
| .brown_online_button:hover, .brown_online_button:visited { | | /* Temp fix START */ |
| text-decoration: none !important; | | /* Need to incorporate this correctly into FsLookAndFeel */ |
| background-color: #b3ad98;
| | .vector-menu-tabs-legacy ul { |
| | font-size: 18.8px; |
| } | | } |
| | | /* |
| .brown_online_button>a, .brown_online_button>a.visited, .brown_online_button>a.external:visited, .brown_online_button>a:hover { | | .fullFooter { |
| color: white !important; | | float:left; |
| text-decoration: none !important;
| |
| } | | } |
| /*orange online button*/
| | */ |
| .orange_online_button {
| | #global-footer { |
| background-color: #fcb34b;
| | all: unset; |
| border-radius: 10px;
| |
| color: white; | |
| width: 210px;
| |
| min-height:52px;
| |
| text-align: center;
| |
| text-decoration: none;
| |
| font-size: 1.1em;
| |
| margin: 5px;
| |
| padding-right: 5px;
| |
| padding-left:5px;
| |
| padding-top:15px;
| |
| padding-bottom:15px;
| |
| display: block; | | display: block; |
| | padding: 17px 24px 18px 8px; |
| | box-sizing: border-box; |
| | -webkit-justify-content: space-between; |
| | justify-content: space-between; |
| | -webkit-align-items: flex-end; |
| | align-items: flex-end; |
| | margin-left: 150px; |
| } | | } |
|
| |
|
| .orange_online_button:hover, .orange_online_button:visited {
| | /* |
| text-decoration: none !important; | | #global-footer { |
| background-color: #fdbf68;
| | display: none; |
| } | | } |
| | | .footer-left { |
| .orange_online_button>a, .orange_online_button>a.visited, .orange_online_button>a.external:visited, .orange_online_button>a:hover { | | display:block !important; |
| color: white !important;
| |
| text-decoration: none !important;
| |
| } | | } |
| /*gray online button*/
| | .footer-right { |
| .gray_online_button { | | display:block !important; |
| background-color: #bab7b1;
| |
| border-radius: 10px;
| |
| color: white;
| |
| width: 210px;
| |
| min-height:52px;
| |
| text-align: center;
| |
| text-decoration: none;
| |
| font-size: 1.1em;
| |
| margin: 5px;
| |
| padding-right: 5px;
| |
| padding-left:5px;
| |
| padding-top:15px;
| |
| padding-bottom:15px;
| |
| display: block;
| |
|
| |
| } | | } |
| | */ |
|
| |
|
| .gray_online_button:hover, .gray_online_button:visited {
| | /* Temp fix END */ |
| text-decoration: none !important;
| |
| background-color: #cfcdc9;
| |
| }
| |
|
| |
|
| .gray_online_button>a, .gray_online_button>a.visited, .gray_online_button>a.external:visited, .gray_online_button>a:hover { | | /* Charles edit comment out |
| color: white !important;
| | .flex-container{ |
| text-decoration: none !important;
| | display:flex; |
| | flex-wrap:wrap; |
| | gap:20px |
| } | | } |
| | */ |
|
| |
|
| | .button1{ |
| | border-radius:10px; |
| | background:#4d94ff; |
| | color:#ffffff; |
| | padding:5px; |
| | width:230px; |
| | text-align:center; |
| | font-size:15px; |
| | cursor:pointer; |
| | width:230px; |
|
| |
|
|
| |
|
| |
|
| |
| /* Override Bootstrap for tooltip links */
| |
| .tooltip {
| |
| font-size: 1rem !important;
| |
| font-family: Verdana,sans-serif !important;
| |
| } | | } |
| | | .button2{ |
| /* Remove SMW Loader */
| | border-radius:10px; |
| /* Should be removed after SMW is fixed */
| | background:#f16458; |
| #mw-indicator-smw-entity-examiner { | | color:#ffffff; |
| display: none !important; | | padding:5px; |
| | width:230px; |
| | text-align:center; |
| | font-size:15px; |
| | cursor:pointer; |
| | width:230px; |
| } | | } |
|
| |
|
| /* Remove powered by banners in footer */
| |
| #footer-poweredbyico {
| |
| display: none !important;
| |
| }
| |
|
| |
|
| /* The background container for Main_Page-GR */
| |
| #GRContainer {
| |
| background-image: url(/wiki/en/img_auth.php/9/95/World_map_purplish.png);
| |
| /* Make the container (and background image) 100% of the viewport */
| |
| width: 100vw;
| |
| background-size: contain;
| |
| background-repeat: no-repeat;
| |
| background-position-x: center;
| |
| }
| |
| #GRContainerTest2 {
| |
| background-image: url(/wiki/en/img_auth.php/9/95/World_map_purplish.png);
| |
| }
| |
| /* the menu table on the Main_Page-GR */
| |
| #GRMenu {
| |
| border:1px solid black;
| |
| width:max-content;
| |
| margin-left: auto;
| |
| margin-right: auto;
| |
| background-color: #ffffffd1; /* white with alpha transparency */
| |
| }
| |
| /* The callout for Main_Page-GR */
| |
| .callout2 {
| |
| position: absolute;
| |
| top: 1%;
| |
| right: 80%;
| |
| width: 160px;
| |
| text-align: center;
| |
| font-size: 1rem;
| |
| cursor: pointer;
| |
| border-radius: 5px;
| |
| box-shadow: 5px 5px 2px #888888;
| |
| color: #004d99;
| |
| background-color: white;
| |
| padding: 5px;
| |
| border: 1px solid gray
| |
| }
| |
| /* The div containing the logo on Main Page-GR */
| |
| .GRLogo {
| |
| position: absolute;
| |
| left: 80%;
| |
| top: 1%;
| |
| }
| |
|
| |
|
| | | /* Header stylying */ |
| | | .red_online_button { |
| /* Create a class for GR Sidebar tables */ | | padding:5px; |
| .sidebar { | |
| padding:2px; | |
| width:max-content;
| |
| margin-left:10px;
| |
| margin-top: 47px;
| |
| border-spacing:0px;
| |
| border:1px solid gray;
| |
| position:relative;
| |
| background:white;
| |
| } | | } |
| | | .mw-body-content h2 { |
| .sidebar p { | | font-weight:bold; |
| line-height: 1em; | | line-height:1.3 !important; |
| | font-size:1.5rem !important; |
| } | | } |
|
| |
|
| .sidebar-heading { | | .mw-body-content h3 { |
| text-align:center; | | font-weight:bold; |
| background: #DCDAD1; | | line-height:1.6 !important; |
| font-size:12pt; | | font-size:1.4rem !important; |
| } | | } |
| /** overrides for Mobile Guided Research Main Page */
| |
| @media (max-width: 720px) {
| |
| /** override Minerva for menu table */
| |
| .content table {
| |
| width: fit-content !important;
| |
| border: solid 1px gray !important;
| |
| padding-top: unset !important;
| |
| }
| |
| /* Minerva
| |
| @media (max-width: 720px)
| |
| .content table {
| |
| width: 100% !important;
| |
| border: unset !important;
| |
| padding-top: 2.5rem;
| |
| */
| |
|
| |
|
| /* Send nav back button to below menu */
| | .mw-body-content h4 { |
| .callout2 {
| | font-weight:bold; |
| position: unset;
| | line-height: 1.6 !important; |
| /* position: absolute; */
| | font-size:1.3rem !important; |
| margin-left: auto;
| |
| margin-right: auto;
| |
| }
| |
|
| |
| /* Hide the callout heading */
| |
| .calloutHeading {
| |
| display: none;
| |
| } | |
|
| |
| .guided_research_link {
| |
| width: auto;
| |
| /* width: 90px; */
| |
| }
| |
| | |
|
| |
| .GRLogo {
| |
| position: unset;
| |
| }
| |
| } | | } |
| /* end media query */
| |
|
| |
|
| /* Create a blue gradient */
| | .mw-body-content h5 { |
| .gradient { | | font-weight:normal; |
| padding-left:20px; | | line-height:1.6 !important; |
| padding-right:20px; | | font-size:1.2rem !important; |
| margin-left:-20px; | |
| margin-right:-20px;
| |
| background: #d7e0ff;
| |
| } | | } |
|
| |
|
| /* The following readjusts the popup box that appears when hovering over links in GuidedResearch. */
| | .mw-body-content h6 { |
| .tooltip .tooltiptext { | | font-weight:normal; |
| left: unset;
| | line-height:1.6 !important; |
| width: max-content;
| | font-size:1.1em !important; |
| | font-style:italic; |
| } | | } |
|
| |
|
| /* Override Bootstrap's definition of container for the FAQ Pages */
| | #mw-head .vector-menu-dropdown h3 { |
| #FAQPage.container { | | font-size: 0.875em; |
| margin-left: 0; | | line-height: 1.125em; |
| } | | } |
|
| |
|
| /* Bootstrap overrides */
| | #mw-head .vector-menu-dropdown .vector-menu-content-list { |
| legend {
| | font-size: 1.6em; |
| width: auto;
| |
| }
| |
| .tooltip { | |
| opacity:100 !important;
| |
| }
| |
| table {
| |
| border-collapse: separate; | |
| } | | } |
| caption {
| |
| caption-side: top;
| |
| }
| |
| th {
| |
| text-align: center;
| |
| }
| |
| /* end Bootstrap overrides */
| |
|
| |
|
| | | #mw-head .vector-menu-dropdown .vector-menu-content-list { |
| .button-style {
| | top: 38px; |
| background-color: #7897BA;
| |
| border:4px outset #B3D2F5;
| |
| border-radius:.5rem;
| |
| color: white !important;
| |
| padding: .2rem 1.5rem;
| |
| text-align: center;
| |
| text-decoration: none;
| |
| display: inline-block;
| |
| font-weight:bold;
| |
| font-family:Arial;
| |
| position:absolute;
| |
| font-size: 1.25rem;
| |
| cursor: pointer;
| |
| }
| |
| .button-style > a, .button-style > a.visited, .button-style > a.external:visited , .button-style > a:hover { | |
| color:white !important;
| |
| text-decoration:none !important;
| |
| }
| |
| | |
| | |
| /* Set width of search box to 70%, so 'go' button stays inline. */
| |
| #bodySearchInputHomePageSearchBox {
| |
| width: 70%; | |
| } | | } |
|
| |
|
| /* change the box around the code feature */ | | /** Remove file upload links from edit menus (Source & VE) **/ |
| code {
| | .wikiEditor-ui-toolbar .section-main .group-insert .oo-ui-widget[rel="file"] { |
| color: #000;
| | display: none !important; |
| background-color: #f9f9f9;
| |
| border: 1px solid #ddd;
| |
| }
| |
| pre, code, tt, kbd, samp, .mw-code {
| |
| font-family: monospace,Courier;
| |
| } | | } |
|
| |
|
| /* make sure missing pages remain colored correctly after visiting */
| | .oo-ui-toolbar-popups .oo-ui-toolGroup-tools .oo-ui-tool-name-media { |
| a.new:visited, #p-personal a.new:visited {
| | display: none !important; |
| color: #a55858 !important;
| |
| } | | } |
|
| |
|
| /* change border on input forms to be 1pm, instead of 2px, and grey instead of black */ | | /* Remove the regular search bar from the Main Page */ |
| form input {
| | .page-Main_Page #mw-head #right-navigation #p-search { |
| /* border: 1px solid !important;*/
| | display: none !important; |
| border-color: darkgrey !important;
| |
| }
| |
| | |
| #newHeading {
| |
| margin-top:0;}
| |
| | |
| /* Define spacing and # of columns based on screen size */
| |
| @media screen and (min-width: 1400px) {
| |
| .column-spacing-fullscreen{
| |
| column-count: 6;
| |
| padding-right: 9% !important;
| |
| }}
| |
| @media screen and (min-width: 1200px) and (max-width: 1399px) {
| |
| .column-spacing-fullscreen{
| |
| column-count: 5;
| |
| }}
| |
| @media screen and (min-width: 900px) and (max-width:1199px) {
| |
| .column-spacing-fullscreen{
| |
| column-count: 4;
| |
| }}
| |
| @media screen and (min-width: 600px) and (max-width:899px) {
| |
| .column-spacing-fullscreen{
| |
| column-count: 3;
| |
| }}
| |
| @media screen and (max-width:745px) {
| |
| .column-spacing-fullscreen{
| |
| column-count: 2;
| |
| }}
| |
| @media screen and (max-width:500px) {
| |
| .column-spacing-fullscreen{
| |
| column-count: 1;
| |
| }}
| |
| | |
| /* Define spacing and # of columns based on screen size - however,
| |
| /* this section assumes that only half the screen is available for
| |
| /* the columns. Even though the screen size may be 1400px, the
| |
| /* available space for the columns is half that, or 700px. */
| |
| | |
| @media screen and (min-width: 1400px) {
| |
| .column-spacing-halfscreen{
| |
| column-count: 3;
| |
| }}
| |
| @media screen and (min-width: 1200px) and (max-width: 1399px) {
| |
| .column-spacing-halfscreen{
| |
| column-count: 2;
| |
| }}
| |
| @media screen and (min-width: 900px) and (max-width:1199px) {
| |
| .column-spacing-halfscreen{
| |
| column-count: 1;
| |
| }}
| |
| .column-spacing-halfscreen li, .column-spacing-fullscreen li {padding-right:5px;}
| |
| | |
| | |
| /* landing page */
| |
| .fakelink {
| |
| color:#004d99;
| |
| display:block;
| |
| }
| |
| | |
| /*--------------------------main page coding-----------------*/
| |
| /* ------------------new CSS -------------------*/
| |
| | |
| /* ------------------containers / elements -------------------*/
| |
| #map { | |
| position: relative;
| |
| width: 100%;
| |
| padding-top: 40px;
| |
| margin-left: 0;
| |
| }
| |
| | |
| .sectionTitle {
| |
| text-align:center; | |
| margin-bottom:5px;
| |
| font-size:1.2rem;
| |
| } | | } |
|
| |
|
| .subTitle {
| |
| text-align:center;
| |
| font-size:1rem;
| |
| }
| |
|
| |
|
| #statsline {
| | /** Fix layout shift **/ |
| text-align:center;
| |
| margin-top:5px;
| |
| margin-bottom:16px;
| |
| }
| |
|
| |
|
| .menuTitle { | | .skiptranslate { |
| color:black;
| | margin-top: 0 !important; |
| justify-content:space-between;
| |
| font-size:1rem;
| |
| position:sticky;
| |
| top:0;
| |
| background-color:#D9D9D4;
| |
| text-align:center;
| |
| } | | } |
| | | #p-namespaces { |
| .search-mobile {
| | display: flex; |
| display:none !important;
| | height: 42px; |
| }
| |
| .map-mobile {
| |
| display:none;
| |
| }
| |
| | |
| /* use id="mobileonly" in order to remove items that
| |
| should not be visible in mobile view.
| |
| Note: id="nomobile" is defined in
| |
| Mobile.css - use this eliminate mobile items. */ | |
| .mobileonly {
| |
| display:none;
| |
| }
| |
| | |
| .searchboxContainer {
| |
| display:flex;
| |
| justify-content:center;
| |
| align-items: center; /* removed from mobile */
| |
| font-size:1rem;
| |
| margin-top:10px; /* removed from mobile */
| |
| } | | } |
| | | #ca-watch a span, |
| .tips {
| | #ca-unwatch a span { |
| text-align:right;
| | display: none; |
| font-size:1rem;
| |
| } | | } |
| | | #ca-watch, |
| .buttonContainer {
| | #ca-unwatch { |
|
| | display: flex; |
| | width: 24px; |
| } | | } |
| | | #p-namespaces .vector-menu-content-list li, |
| /* any element with id ending in '_button' */
| | #p-views .vector-menu-content-list li { |
| [id$="_button"] {
| | font-size:.8rem !important; |
| background-color:#e1ebee96;
| |
| position:absolute;
| |
| border:1px solid black;
| |
| text-align:center;
| |
| font-size:1rem;
| |
| padding:5px;
| |
| cursor:pointer;
| |
| border-radius:5px;
| |
| box-shadow:2px 2px 2px #888888;
| |
| color:#004d99;
| |
| } | | } |
| | | #mw-head-base { |
| [id$="_button"]:hover {
| | height: unset !important; |
| background-color:white;
| |
| color:blue;
| |
| } | | } |
| | | .mw-body { |
| #all_countries_button:hover {
| | margin-top: unset !important; |
| background-color:white;
| |
| color:blue;
| |
| } | | } |
| | | .vector-menu-tabs #ca-watch.icon a::before { |
| /* special extra rules for all_countries button */
| | margin-top: 6px; |
| #all_countries_button {
| |
| background-color:#0f5ba9;
| |
| font-size:1.2rem;
| |
| color:white;
| |
| width:220px;
| |
| } | | } |
| | | .vector-menu-tabs-legacy li a { |
| /* button placement */
| | float: left; |
| #all_countries_button {top:22%; left:40%;}
| | height: 100% !important; |
| #africa_button {top:60%; left:49%;}
| | padding-top: 1.5em; |
| #asia_button {top:40%; left:73%;}
| |
| #europe_button {top:39%; left: 52%;}
| |
| #middle_east_button {top:56%; left:57%;}
| |
| #north_america_button {top:35%; left:22%;}
| |
| #pacific_button {top:73%; left:85%;}/* Australia/Oceania button*/
| |
| #south_america_button {top:70%; left:27%;}
| |
| | |
| /* Callout is the 'Guided Research' element */
| |
| .callout { | |
| position:absolute;
| |
| top:15%;
| |
| left:80%;
| |
| width:160px;
| |
| text-align:center;
| |
| font-size:1rem;
| |
| cursor:pointer;
| |
| border-radius:5px;
| |
| box-shadow:5px 5px 2px #888888;
| |
| color:#004d99;
| |
| background-color:white;
| |
| padding:5px;
| |
| border:1px solid gray;
| |
| } | | } |
| | | .vector-menu-tabs-legacy { |
| .calloutHeading { | | height: 2.8em; |
| color:orange;
| |
| font-size:1.3rem;
| |
| font-family:museo;
| |
| } | | } |
| | | #right-navigation { |
| .guided_research_link {
| | margin-top: 2.5em; |
| border:1px solid black;
| |
| text-align:center;
| |
| font-size:1rem;
| |
| cursor:pointer;
| |
| border-radius:5px;
| |
| box-shadow:2px 2px 2px #888888;
| |
| color:#004d99;
| |
| width:150px
| |
| } | | } |
| | | #left-navigation { |
| /* ------------------menus -------------------*/
| | margin-top: 2.5em; |
| #menu {
| | margin-bottom: -2.5em; |
| position:absolute;
| |
| top:125px;
| |
| left:0;
| |
| width:210px;
| |
| height:25vw;
| |
| overflow-y:scroll;
| |
| display:block;
| |
| color:#aba8a0;
| |
| background-color:white;
| |
| border:1px solid black;
| |
| z-index: 10;
| |
| } | | } |
| | | #mw-page-base { |
| .exit {
| | height: 5.2rem; |
| color: red;
| |
| cursor: pointer;
| |
| float: right;
| |
| } | | } |
| | | #mw-head-base { |
| .exit:hover {
| | margin-top: unset !important; |
| font-weight: bold;
| | height: unset !important; |
| }
| |
| | |
| /** This hack is to eliminate shifting due to :hover */
| |
| span.exit::before {
| |
| display: block;
| |
| content: "foo";
| |
| font-weight: bold;
| |
| height: 0;
| |
| overflow: hidden;
| |
| visibility: hidden;
| |
| }
| |
| | |
| #menu > ul {
| |
| list-style-type: none;
| |
| padding: 0;
| |
| margin-left: 20px;
| |
| }
| |
| | |
| #menu ul li:hover {
| |
| background-color:#ecebea;
| |
| }
| |
| | |
| /* There are two separate classes, but we don't differentiate their styles */
| |
| .countrymenu, .statemenu {
| |
| padding:3px;
| |
| top:0;
| |
| background-color:#D9D9D4;
| |
| color:black
| |
| }
| |
| | |
| /* color menu spans to look like a link */
| |
| .fakelink {
| |
| color:#004d99;
| |
| }
| |
| | |
| .menulink {
| |
| font-size: 1rem;
| |
| cursor: pointer;
| |
| margin-left:-1.2rem;
| |
| }
| |
| | |
| .menulink::before {
| |
| content: "> ";
| |
| }
| |
| | |
| .menulink:hover {
| |
| background-color: #ecebea;
| |
| }
| |
| | |
| | |
| | |
| /*--------------------------main page coding-----------------*/
| |
| | |
| /* make sure missing pages remain colored correctly after visiting */
| |
| a.new:visited, #p-personal a.new:visited {
| |
| color: #a55858 !important;
| |
| } | | } |
| /* change border on input forms to be 1pm, instead of 2px, and grey instead of black */
| | #p-views .vector-menu-content { |
| form input {
| | display: flex; |
| /* border: 1px solid !important;
| | align-items: end; |
| */
| | height: 42px; |
| border-color: darkgrey !important;
| |
| } | | } |