MediaWiki:Mobile.css

From FamilySearch Wiki
Revision as of 07:38, 10 July 2020 by Freephile (talk | contribs) (copied from beta; used on Prototype Main Pages)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/* CSS placed here will affect users of the mobile site */

/* 
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
this is slow 
[id$=list2] span {
	color:#004d99;
}
so I inserted class="fakelink" for child spans
*/
.fakelink {
	color:#004d99;
}

/*--------------------------main page coding-----------------*/
#countries_list {
    overflow-y:scroll;
    height:540px;
    border:1px solid black;
    color:#aba8a0;
}
#countries_list ul li:hover {
    background-color:#ecebea;
}
.exit_menu {
    width:20px;
    height:20px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.95vw;
    background-color:red;
}
.titleofmenu {
    display:flex;
    justify-content:space-between;
    font-size:0.95vw;
    position:sticky;
    top:0;
    background-color:#D9D9D4;
}
#countries_list > ul {
    list-style-type: none;
    padding: 0;
    margin-left: 20px;
}
.overflow > ul {
    list-style-type: none;
    padding: 0;
    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;
    width:240px;
    display:none;
    top:90px;
    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;
    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;
    height:20px;
    cursor:pointer;
    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;
    border:1px solid black;
    text-align:center;
    font-size:0.95vw;
    padding:5px;
    ;
    cursor:pointer;
    border-radius:5px;
    box-shadow:2px 2px 2px #888888;
    color:#004d99;
}
/* @todo verify that this is used */
#all_countries_list{
    background-color:#0f5ba9;
    position:absolute;
    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;
    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{
    border:1px solid black;
    text-align:center;
    font-size:0.95vw;
    cursor:pointer;
    border-radius:5px;
    box-shadow:2px 2px 2px #888888;
    color:#004d99;
    width:150px;
}
#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 {
    background-color:white;
    color:#0eda00;
}
.overflow {
    overflow-y:scroll;
    height:500px;
    z-index:10;
}
.overflow ul li:hover {
    background-color:#ecebea;
}
/* 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 */
form input {
   /* border: 1px solid !important;
   */
    border-color: darkgrey !important;
}