CSS   62

mobile css

Guest on 5th May 2022 02:07:27 AM

  1. /* CSS Document */
  2.  
  3. /*      Resets
  4.         ------  */
  5.  
  6. html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, sub, sup, var, b, i, hr, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figure, figcaption, hgroup, menu, footer, header, nav, section, summary, time, mark, audio, video {
  7.         margin: 0;
  8.         padding: 0;
  9.         border: 0 none;
  10.         -moz-background-clip:border;
  11.         -moz-background-inline-policy:continuous;
  12.         -moz-background-origin:padding;
  13.         background:transparent none repeat scroll 0 0;
  14.         font-family:inherit;
  15.         font-style:inherit;
  16.         font-weight:inherit;
  17.         outline-color:-moz-use-text-color;
  18.         outline-style:none;
  19.         outline-width:0;
  20.         vertical-align: baseline;
  21. }
  22. ul, ol {
  23.         margin: 0 0 0 2em;
  24. }
  25. :focus {
  26.         outline: 0;
  27. }
  28. blockquote:before, blockquote:after, q:before, q:after {
  29.         content: "";
  30. }
  31. blockquote, q {
  32.         quotes: "" "";
  33. }
  34. article, aside, canvas, figure, figure img, figcaption, hgroup, footer, header, nav, section, audio, video {
  35.         display: block;
  36. }
  37. a img {
  38.         border: 0;
  39. }
  40. /*      Typography presets
  41.         ------------------      */
  42.  
  43. .gigantic {
  44.         font-size: 2.8em;
  45. }
  46. .huge, h1 {
  47.         font-size: 2.2em;
  48. }
  49. .large, h2 {
  50.         font-size: 1.9em;
  51. }
  52. .bigger, h3 {
  53.         font-size: 1.4em;
  54. }
  55. .big, h4 {
  56.         font-size: 1.2em;
  57. }
  58. body {
  59.         font-family: sans-serif;
  60.         font-size: 1em;
  61. }
  62. .small, small {
  63.         font-size: 0.7em;
  64. }
  65.  
  66. /* Selection colours (easy to forget) */
  67. /*
  68. ::selection {
  69.         background: green;
  70.         color: #fff;
  71. }
  72. ::-moz-selection {
  73.         background: green;
  74.         color: #fff;
  75. }
  76. img::selection {
  77.         background: rgb(255,255,158);
  78. }
  79. img::-moz-selection {
  80.         background: rgb(255,255,158);
  81. }*/
  82. body {
  83.         -webkit-tap-highlight-color: rgb(255,255,158);
  84.         /*border: 40px solid #DADBE4;*/
  85. }
  86. /*              Default Layout: 992px.
  87.                 Gutters: 24px.
  88.                 Outer margins: 48px.
  89.                 Leftover space for scrollbars @1024px: 32px.
  90. -------------------------------------------------------------------------------
  91. cols    1     2      3      4      5      6      7      8      9      10
  92. px      68    160    252    344    436    528    620    712    804    896    */
  93.  
  94. .ui-grid-a .ui-btn, .ui-grid-b .ui-btn, .ui-grid-c .ui-btn, .ui-grid-d .ui-btn, .ui-grid-e .ui-btn {
  95.         margin: 0; /* temporary fix because jquery mobile hasn't quite worked out grid layouts and inset lists yet */
  96. }
  97. .ui-listview-filter-inset {
  98.         margin: 0 -5px -15px 0;
  99. }
  100.  
  101. .ui-header .ui-btn-icon-right .ui-btn-inner, .ui-footer .ui-btn-icon-right .ui-btn-inner, .ui-mini .ui-btn-icon-right .ui-btn-inner {
  102.         max-width: 262px;
  103. }
  104. .ui-header .ui-listview:after {
  105.     content: ".";
  106.     display: block;
  107.     height: 0;
  108.     clear: both;
  109.     visibility: hidden;
  110. }
  111. .ui-header .ui-controlgroup-horizontal {
  112.         float: left;
  113.         margin-right: 0.5em;
  114. }
  115. .ui-header .ui-controlgroup-horizontal label {
  116.         padding: 0.6em;
  117.         float: left;
  118. }
  119. .ui-header .ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li {
  120.         overflow: auto;
  121.         border-bottom: 0;
  122. }
  123.  
  124. .floManagrLogo {
  125.         font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  126.         color: #878787;
  127.         background: none;
  128.         border: none;
  129.         text-shadow: none;
  130. }
  131. .floManagrLogo span {
  132.         box-shadow: none;
  133.         font-size: 16px;
  134. }
  135. .floManagrLogoBlue {
  136.         color: #4E86B9;
  137. }
  138.  
  139.  
  140. /*              Tablet Layout: 768px.
  141.                 Gutters: 24px.
  142.                 Outer margins: 28px.
  143.                 Inherits styles from: Default Layout.
  144. -----------------------------------------------------------------
  145. cols    1     2      3      4      5      6      7      8
  146. px      68    160    252    344    436    528    620    712    */
  147.  
  148. @media only screen and (min-width: 768px) and (max-width: 991px) {
  149.  
  150.         .ui-header .ui-btn-icon-right .ui-btn-inner, .ui-footer .ui-btn-icon-right .ui-btn-inner, .ui-mini .ui-btn-icon-right .ui-btn-inner {
  151.                 max-width: 262px;
  152.         }
  153.        
  154. }
  155.  
  156.  
  157. /*              Wide Mobile Layout: 480px.
  158.                 Gutters: 24px.
  159.                 Outer margins: 22px.
  160.                 Inherits styles from: Default Layout, Mobile Layout.
  161. ------------------------------------------------------------
  162. cols    1     2      3      4      5
  163. px      68    160    252    344    436    */
  164.  
  165. @media only screen and (min-width: 480px) and (max-width: 767px) {
  166.  
  167.         .ui-header .ui-btn-icon-right .ui-btn-inner, .ui-footer .ui-btn-icon-right .ui-btn-inner, .ui-mini .ui-btn-icon-right .ui-btn-inner {
  168.                 max-width: 155px;
  169.         }
  170. }
  171.  
  172.  
  173.  
  174. /*              Mobile Layout: 320px.
  175.                 Gutters: 24px.
  176.                 Outer margins: 34px.
  177.                 Inherits styles from: Default Layout.
  178. ---------------------------------------------
  179. cols    1     2      3
  180. px      68    160    252    */
  181.  
  182. @media only screen and (max-width: 481px) {
  183.  
  184.         .ui-header .ui-btn-icon-right .ui-btn-inner, .ui-footer .ui-btn-icon-right .ui-btn-inner, .ui-mini .ui-btn-icon-right .ui-btn-inner {
  185.                 max-width: 92px;
  186.         }
  187. }
  188.  
  189.  
  190.  
  191. /*      Retina media query.
  192.         Overrides styles for devices with a
  193.         device-pixel-ratio of 2+, such as iPhone 4.
  194. -----------------------------------------------    */
  195.  
  196. @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
  197. }

Raw Paste


Login or Register to edit or fork this paste. It's free.