FamilySearch Wiki

MediaWiki:Mobile.css: Difference between revisions

Message Talk

MediaWiki:Mobile.css (view source)

Revision as of 19:17, 27 July 2020

2,546 bytes added ,  27 July 2020
m
Mobile css. This needs to be cleaned up, removing anything not used in mobile.
(copied from beta; used on Prototype Main Pages)
 
m (Mobile css. This needs to be cleaned up, removing anything not used in mobile.)
Line 1: Line 1:
/* CSS placed here will affect users of the mobile site */
/* landing page mobile specific features */
.map-mobile {
    display:inline!important;
    text-align:center;
    font-size: 1.25rem;
    color: #aac777;
  }
 
  .search-mobile {
    display:inline !important;
  }
 
 
/* end of specific features for landing page */
 
/* The following readjusts the popup box that appears when hovering over links in GuidedResearch.  */
.tooltip .tooltiptext {
    left: unset;
}
 
.button-style {
  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 */
code {
    color: #000;
    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 */
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 */
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
form input {
this is slow
/*    border: 1px solid !important;*/
[id$=list2] span {
    border-color: darkgrey !important;
color:#004d99;
}
}
so I inserted class="fakelink" for child spans
 
*/
#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 {
.fakelink {
color:#004d99;
color:#004d99;
Line 14: Line 122:


/*--------------------------main page coding-----------------*/
/*--------------------------main page coding-----------------*/
#countries_list {
/* ------------------new CSS -------------------*/
     overflow-y:scroll;
 
     height:540px;
/* ------------------containers / elements -------------------*/
     border:1px solid black;
#map {  
     color:#aba8a0;
     position: relative;  
     width: 100%;  
     padding-top: 40px;
     margin-left: 0;
}
 
.sectionTitle {
text-align:center;
margin-bottom:5px;
font-size:1.2rem;
margin-top:-10px;
}
}
#countries_list ul li:hover {
 
    background-color:#ecebea;
.subTitle {
text-align:center;
font-size:1rem;  
}
}
.exit_menu {
 
    width:20px;
#statsline {
    height:20px;
text-align:center;  
    cursor:pointer;
margin-top:5px;
    display:flex;
margin-bottom:16px;
    align-items:center;
    justify-content:center;
    font-size:0.95vw;
    background-color:red;
}
}
.titleofmenu {
 
    display:flex;
.menuTitle {
color:black;
     justify-content:space-between;
     justify-content:space-between;
     font-size:0.95vw;
     font-size:1rem;
     position:sticky;
     position:sticky;
     top:0;
     top:0;
     background-color:#D9D9D4;
     background-color:#D9D9D4;
    text-align:center;
}
}
#countries_list > ul {
 
    list-style-type: none;
.searchboxContainer {
    padding: 0;
display:flex;
    margin-left: 20px;
/*justify-content:center;*/ /* removed from mobile */
/*align-items: center;*/  /* removed from mobile */
font-size:1rem;
/*margin-top:10px;*/  /* removed from mobile */
        flex-direction:column;
}
}
.overflow > ul {
 
    list-style-type: none;
.search-mobile {
    padding: 0;
        display:unset;
    margin-left: 20px;
}
}
#argentina_states, #australia_states, #austria_states, #belgium_states, #belgium_states, #bolivia_states, #brazil_states, #canada_states, #chile_states, #costa_rica_states, #denmark_states, #dominican_republic_states, #england_states, #finland_states, #france_states, #french_polynesia_states, #germany_states, #guatemala_states, #honduras_states, #hungary_states, #ireland_states, #isle_of_man_states, #italy_states, #liechtenstein_states, #luxembourg_states, #mexico_states, #montserrat_states, #netherlands_states, #netherlands_antilles_states, #nigeria_states, #northern_ireland_states, #norway_states, #panama_states, #paraguay_states, #peru_states, #philippines_states, #poland_states, #portugal_states, #puerto_rico_states, #saint_kitts_and_nevis_states, #scotland_states, #slovakia_states, #south_africa_states, #spain_states, #sweden_states, #switzerland_states, #united_states_states, #uruguay_states, #venezuela_states, #wales_states{
 
    position:absolute;
.tips {
    width:240px;
text-align:center;  
    display:none;
font-size:1rem;
    top:90px;
        width:70%; /* mobile view only */
    left:0;
    background-color:white;
    height:540px;
    border:1px solid black;
}
}
#all_countries_countries, #africa_countries, #asia_countries, #british_isles_countries, #caribbean_countries, #central_america_countries, #europe_countries, #middle_east_countries, #north_america_countries, #pacific_countries, #south_america_countries {
 
    position:absolute;
.buttonContainer {
    width:240px;
    display:none;
    top:90px;
    background-color:white;
    height:540px;
    left:0;
    border:1px solid black;
}
}
#exit_menu_africa_countries, #exit_menu_asia_countries, #exit_menu_british_isles_countries, #exit_menu_caribbean_countries, #exit_menu_central_america_countries, #exit_menu_europe_countries, #exit_menu_middle_east_countries, #exit_menu_north_america_countries, #exit_menu_pacific_countries, #exit_menu_south_america_countries {
 
    width:20px;
/* any element with id ending in '_button' */
    height:20px;
[id$="_button"] {
    cursor:pointer;
     background-color:#e1ebee96;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.95vw;
    background-color:red;
}
#africa_list, #asia_list, #british_isles_list, #caribbean_list, #central_america_list, #europe_list, #middle_east_list, #north_america_list, #pacific_list, #south_america_list {
     background-color:#e1ebee;
     position:absolute;
     position:absolute;
     border:1px solid black;
     border:1px solid black;
     text-align:center;
     text-align:center;
     font-size:0.95vw;
     font-size:1rem;
     padding:5px;
     padding:5px;
    ;
     cursor:pointer;
     cursor:pointer;
     border-radius:5px;
     border-radius:5px;
Line 94: Line 196:
     color:#004d99;
     color:#004d99;
}
}
/* @todo verify that this is used */
 
#all_countries_list{
[id$="_button"]:hover {
    background-color:white;
    color:blue;
}
 
#all_countries_button:hover {
    background-color:white;
    color:blue;
}
 
/* special extra rules for all_countries button */
#all_countries_button {
     background-color:#0f5ba9;
     background-color:#0f5ba9;
    position:absolute;
     font-size:1.2rem;
    border:1px solid black;
    text-align:center;
     font-size:1.2vw;
    padding:5px;
    cursor:pointer;
    border-radius:5px;
    box-shadow:2px 2px 2px #888888;
     color:white;
     color:white;
     width:220px;
     width:220px;
}
}
/* when mobile version kicks in, do not display the buttons. */
  #all_countries_list,
  #africa_list, #asia_list, #british_isles_list, #caribbean_list, #central_america_list, #europe_list, #middle_east_list, #north_america_list, #pacific_list, #south_america_list {
    display: none;
  }
  #all_countries_countries {
  display: block!important;
  }


#guided_research{
/* button placement */
     border:1px solid black;
#all_countries_button {top:25%; left:40%;}
#africa_button {top:65%; left:51%;}
#asia_button {top:45%; left:73%;}
#british_isles_button {top:42%; left:38%;}
#caribbean_button {top:60%; left:29%;}
#central_america_button {top:63%; left:17%;}
#europe_button {top:44%; left: 52%;}
#middle_east_button {top:56%; left:57%;}
#north_america_button {top:40%; left:22%;}
#pacific_button {top:82%; left:85%;}
#south_america_button {top:73%; left:27%;}
 
/* Callout is the 'Guided Research' element */
/* .callout different in mobile view */
.callout {
     position:unset; /* different in mobile */
    top:unset; /* different in mobile */
    left:unset; /* different in mobile */
    width:100px; /* different in mobile */
    margin-left: auto; /* added in mobile */
    margin-right: auto; /* added in mobile */
    line-height: 1; /* added in mobile */
     text-align:center;
     text-align:center;
     font-size:0.95vw;
     font-size:1rem;
     cursor:pointer;
     cursor:pointer;
     border-radius:5px;
     border-radius:5px;
     box-shadow:2px 2px 2px #888888;
     box-shadow:5px 5px 2px #888888;
     color:#004d99;
     color:#004d99;
     width:150px;
     background-color:white;
    padding:5px;
    border:1px solid gray;
}
 
 
.calloutHeading {
color:orange;
font-size:1.2rem; /* different in mobile */
font-family:museo;
}
 
.guided_research_link {
  border:1px solid black;
  text-align:center;
  font-size:1rem;
  cursor:pointer;
  border-radius:5px;
  box-shadow:2px 2px 2px #888888;
  color:#004d99;
  width:90px; /* different in mobile */
}
}
#all_countries_list:hover, #asia_list:hover, #british_isles_list:hover, #caribbean_list:hover, #central_america_list:hover, #europe_list:hover, #africa_list:hover, #middle_east_list:hover, #north_america_list:hover, #pacific_list:hover, #south_america_list:hover, #guided_research:hover {
 
/* ------------------menus -------------------*/
#menu {
    position:absolute;
    top:125px;
    left:0;
    width:210px;
    height:500px;
    overflow-y:scroll;
    display:block;
    color:#aba8a0;
     background-color:white;
     background-color:white;
     color:#0eda00;
    border:1px solid black;
    z-index: 10;
}
 
.exit {
     color: red;
    cursor: pointer;
    float: right;
}
 
.exit:hover {
    font-weight: bold;
}
 
/** 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;
}
}
.overflow {
 
     overflow-y:scroll;
#menu > ul {
     height:500px;
     list-style-type: none;
     z-index:10;
     padding: 0;
     margin-left: 20px;
}
}
.overflow ul li:hover {
 
#menu ul li:hover {
     background-color:#ecebea;
     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: white;
}
/*--------------------------main page coding-----------------*/
/* make sure missing pages remain colored correctly after visiting */
/* make sure missing pages remain colored correctly after visiting */
a.new:visited, #p-personal a.new:visited {
a.new:visited, #p-personal a.new:visited {
Ahancey
2,664

edits

Retrieved from "https://integration-ru.familysearch.org/en/wiki/Special:MobileDiff/4048903"