X-Git-Url: https://git.openstreetmap.org./rails.git/blobdiff_plain/c8fb5ad24c5751bd2d43b86e4359381d200af066..61bb31ebdddc9e7c317a1c6784a68874d5a0ef80:/app/assets/stylesheets/small.css.scss?ds=inline diff --git a/app/assets/stylesheets/small.css.scss b/app/assets/stylesheets/small.css.scss index a6bf475c3..e9d0a4779 100644 --- a/app/assets/stylesheets/small.css.scss +++ b/app/assets/stylesheets/small.css.scss @@ -1,218 +1,142 @@ -/* Styles specific to a small screen, such as iPhone, Android, etc... */ - -/* Default rules for the body of every page */ - -body { - font-size: 10px; -} - -h1 { - font-size: 12px; -} - -h2, h3, h4 { - font-size: 12px; -} - -.wrapper { - margin: 0; -} +@import "parameters"; -.site-edit #content, -.site-index #content, -.site-export #content { - left: 0; -} - -.site-edit #top-bar, -.site-index #top-bar, -.site-export #top-bar { - position: relative; -} +/* Styles specific to a small screen, such as iPhone, Android, etc... */ -.site-edit #content, .site-index #content, .site-export #content { - position: absolute; +input[type="submit"], +input[type="text"] { + -webkit-appearance: none; } .column-1 { width: 100%; } -/* Rules for the whole left sidebar, including the logo */ - -#left { - display: none; +#menu-icon { + display: inline-block !important; } -/* Rules for tabbed navigation bar */ - -#top-bar { - left: 0; - margin: 0px; - height: 24px; - position: static; -} - -#tabnav { - height: 19px; - margin: 0px; - padding-top: 5px; - margin-top: 26px; - font-size: 10px; - line-height: 10px; -} - -#tabnav a, #tabnav a:link, #tabnav a:visited { - font-size: 10px; - line-height: 10px; - padding: 5px; - margin-right: 1px; -} - -.menuicon { line-height: 10px;} - -/* Rules for the site name - shown when left sidebar is hidden */ - -#small-title { - font-size: 12px; - line-height: 14px; - height: 16px; +nav.primary, +nav.secondary { + float: none !important; + position: relative; display: block; - position: absolute; - left: 5px; - top: 5px; - padding: 2px; - width: 110px; - background-color: #fff; - z-index: 100; -} - -#small-title img { - position: absolute; -} - -#small-title h1 { - position: absolute; - font-size: 10px; - line-height: 18px; - margin: 0; - left: 22px; -} - -/* Rules for greeting bar in the top right corner */ - -#greeting { - position: absolute; - right: 0; - top: 0; - background: none; + clear: both; } -#browse_map ul.secondary-actions { - float: right; - font-size: 10px; -} +header { + height: auto; + min-height: $headerHeight; + background: #fff; -#map { - border: 0; -} + h1 { + padding-bottom: 15px; + } -.content_map { - width: 100%; - border: none; - float: none; - height: 200px; - max-height: none; - min-height: auto; -} + &.closed nav { + display: none; + } -.content_map #small_map { - height: 300px; - border: 1px solid #ccc; + .search_form { + display: block; + } } -.leaflet-control-pan, .leaflet-control-zoomslider { +#sidebar .search_form, +#edit_tab, +#export_tab { display: none; } -.site-index .leaflet-top, -.site-export .leaflet-top { - top: 10px !important; -} - -/* Rules for the main content area */ +nav.primary { + padding: 0; -#content { - margin-left: 0px; - margin-right: 0px; - border-left: 0px; - border-right: 0px; -} + ul, li { + border: none; + border-radius: 0; + width: 100%; + } -.site-export #content, -.site-edit #content, -.site-index #content { - margin-top: 21px; + ul { + border-top: 1px solid #eee; + li { + border-bottom: 1px solid #eee; + border-right: none; + > a { + border-radius: 0; + width: 100%; + text-align: center; + font-size: 15px; + } + } + } } -/* Rules for search sidebar when shown */ +nav.secondary { + border-bottom: 1px solid #eee; -#sidebar { - border: 0px; - margin: 0px; - width: 50% !important; - border-right: 1px solid #ccccdd; + .user-menu { + display: block; + width: 100%; + margin-left: 0; + > li { + width: 49%; + > a { + width: 100%; + text-align: center; + } + } + } } -p.search_results_entry { - padding: 2px 0px; +#compact-secondary-nav { + display: none; } -/* Rules for the map UI */ +.compact-hide { + display: inline-block; +} -.layers-ui { - .leaflet-container { - display: none; +.map-layout { + #sidebar, #map { + position: relative; + overflow-x: hidden; + width: 100%; + height: 50%; } - li { - border-radius: 0; - margin-bottom: 0; - - &:first-child { - border-radius: 4px 4px 0 0; + .overlay-sidebar { + #sidebar { + width: 300px; } - &:last-child { - border-radius: 0 0 4px 4px; + #map { + height: 100%; } } -} - -/* Rules for the signup form */ -#signupForm input[type="text"], #signupForm input[type="password"] { - width: 100%; -} - -#signupForm input#user_email { - max-width: 30em; -} - -#signupForm input#user_email_confirmation { - max-width: 30em; + #map-ui { + z-index: 9999; + width: 100%; + overflow-y: scroll; + } } -#signupForm input#user_display_name { - max-width: 20em; +#sidebar .welcome { + display: none !important; } -#signupForm input#user_pass_crypt { - max-width: 20em; +.leaflet-top.leaflet-right { + top: 10px !important; + z-index: 0; } -#signupForm input#user_pass_crypt_confirmation { - max-width: 20em; +.content_map { + width: 100%; + border: none; + float: none; + height: 200px; + max-height: none; + min-height: auto; } /* Rules for the login form */ @@ -250,51 +174,19 @@ p.search_results_entry { top: auto; } -/* Rules for the user settings page */ +/* Rules for the sign-up page */ -#user_new_email { - width: 60% !important; -} - -#user_description, #user_preferred_editor { - width: 90% !important; -} - -.minorNote { - display: block; -} - -/* Rules for the browse pages */ - -.browse-section.common div{ - clear: both; -} - -#changeset_list_map { - position: relative; - width: 100%; - right: 0; - left: 0; - top: 0px; - margin-bottom: 20px; - float: none; - height: 300px !important; - max-height: auto; - min-height: auto; -} - -/* Rules for the diary entries pages */ - -#diary_entry_title, #diary_entry_body, #diary_entry_language_code, #diary_comment_body { - width: 100% !important; -} +.user-new, +.user-create { + .col6 { + width: 100%; + } -#usemap { - display: block; + .aside { + display: none; + } } -/* Rules for the messaging pages */ - -#message_title, #message_body { - width: 100% !important; +.site-about #content .attr h1 { + font-size: 28px; }