Trang chủ Khám phá Trợ giúp
Đăng nhập
pwa
/
Lungo2.0.js
mirror of https://github.com/xabstract/Lungo2.0.js.git
2
0
Fork 0
Các tập tin Các vấn đề 0 Wiki
Tree: 10a3b0d7e3
Branches Tags
Lungo2.0.js
/
release
/
lungo-1.0.4.min.css

lungo-1.0.4.min.css 16 KB
Lịch sử Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184 
  1. /**
    2. 

  2.  *
    3. 

  3.  *    /$$
    4. 

  4.  *   | $$
    5. 

  5.  *   | $$       /$$   /$$ /$$$$$$$   /$$$$$$   /$$$$$$
    6. 

  6.  *   | $$      | $$  | $$| $$__  $$ /$$__  $$ /$$__  $$
    7. 

  7.  *   | $$      | $$  | $$| $$  \ $$| $$  \ $$| $$  \ $$
    8. 

  8.  *   | $$      | $$  | $$| $$  | $$| $$  | $$| $$  | $$
    9. 

  9.  *   | $$$$$$$$|  $$$$$$/| $$  | $$|  $$$$$$$|  $$$$$$/
    10. 

  10.  *   |________/ \______/ |__/  |__/ \____  $$ \______/
    11. 

  11.  *                                  /$$  \ $$
    12. 

  12.  *                                 |  $$$$$$/
    13. 

  13.  *                                  \______/
    14. 

  14.  *
    15. 

  15.  * @copyright 2011 TapQuo Inc (c)
    16. 

  16.  * @license   http://www.github.com/tapquo/lungo/blob/master/LICENSE.txt
    17. 

  17.  * @version   1.0.4
    18. 

  18.  * @link      https://github.com/TapQuo/Lungo.js
    19. 

  19.  *
    20. 

  20.  * @author   Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
    21. 

  21.  */
    22. 

  22. 

  23. a,abbr,address,article,aside,audio,b,blockquote,body,caption,cite,code,dd,del,dfn,dialog,div,dl,dt,em,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{border:0;margin:0;outline:0;padding:0;font-size:100%;}
    24. 

  24. a{color:#fff;text-decoration:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
    25. 

  25. a:hover{opacity:1;}
    26. 

  26. html{height:100%;font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
    27. 

  27. body{margin:0;padding:0;width:100%;height:100%;min-height:100%;overflow:hidden;-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);font-family:Helvetica,Arial,sans-serif;font-size:13px;line-height:1.231;}
    28. 

  28. b,strong{font-weight:bold;}
    29. 

  29. img{border:0;-ms-interpolation-mode:bicubic;vertical-align:middle;font-size:0;}
    30. 

  30. table{border-collapse:collapse;border-spacing:0;}
    31. 

  31. th,td,caption{vertical-align:top;font-weight:normal;text-align:left;}
    32. 

  32. *{margin:0;padding:0;}
    33. 

  33. section{position:absolute;position:fixed;width:100%;height:inherit;z-index:0;-webkit-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0);-webkit-backface-visibility:hidden;-webkit-transition:-webkit-transform 250ms cubic-bezier(0.39, 0.575, 0.565, 1);}
    34. 

  34. section:first-child{-webkit-transform:translate3d(0%, 0, 0);transform:translate3d(0%, 0, 0);z-index:1;}
    35. 

  35. section.hide{-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0);z-index:0;}
    36. 

  36. section.show{-webkit-transform:translate3d(0%, 0, 0);transform:translate3d(0%, 0, 0);z-index:1;}
    37. 

  37. header,footer{position:absolute;left:0px;width:100%;height:38px;display:block;z-index:2;line-height:38px;}
    38. 

  38. header{top:0px;}
    39. 

  39. footer{bottom:0px;}
    40. 

  40. header .title,footer .title{float:left;margin:0 8px;font-size:1.3em;}
    41. 

  41. header .title{position:absolute;left:0px;width:100%;margin:0px auto;text-align:center;z-index:-1;}
    42. 

  42. section header a.button,section footer a.button{margin:3px 3px auto 4px;}
    43. 

  43. section header a.button.icon,section footer a.button.icon{width:17px;font-size:1.5em;font-weight:normal;}
    44. 

  44. aside{position:absolute;top:0px;bottom:0px;height:auto;width:256px;opacity:0;}
    45. 

  45. aside.show{opacity:1;}
    46. 

  46. header~aside{padding-top:40px;}
    47. 

  47. footer~aside{padding-bottom:40px;}
    48. 

  48. aside~article{-webkit-transform:translate3d(0px, 0, 0);transform:translate3d(0px, 0, 0);-webkit-transition:-webkit-transform 250ms cubic-bezier(0.39, 0.575, 0.565, 1);}
    49. 

  49. aside a{display:block;width:244px;height:40px;padding:0 6px;font-size:1.1em;font-weight:bold;line-height:40px;}
    50. 

  50. aside .icon{width:28px;height:28px;float:left;margin:8px 6px 0 0;font-size:1.9em;line-height:1.0em;text-align:center;}
    51. 

  51. aside .anchor{font-weight:bold;padding:3px 10px 4px;}
    52. 

  52. aside .bubble{float:right;margin:12px 4px 0 0;}
    53. 

  53. @media handheld, only screen and (min-width: 768px){[data-target="aside"]{display:none !important;} aside{opacity:1;} aside~article{width:auto !important;left:256px;right:0px !important;}}article{position:absolute;width:inherit;height:inherit;top:0px;bottom:0px;display:block;z-index:0;opacity:0;}
    54. 

  54. header~article{top:40px;}
    55. 

  55. footer~article{bottom:40px;}
    56. 

  56. article.current{z-index:1;opacity:1;}
    57. 

  57. article.aside{-webkit-transform:translate3d(256px, 0, 0);transform:translate3d(256px, 0, 0);}
    58. 

  58. @media handheld, only screen and (min-width: 768px){article.aside{-webkit-transform:translate3d(0px, 0, 0);transform:translate3d(0px, 0, 0);}}article .title{font-size:1.1em;margin:0px 0 4px;}
    59. 

  59. article .title .icon{margin-right:4px;}
    60. 

  60. article .text{margin:4px 0 8px;display:block;font-size:0.9em;font-weight:normal;line-height:1.4em;}
    61. 

  61. nav{height:inherit;text-align:center;font-weight:normal;}
    62. 

  62. nav a{display:inline-block;padding:0 6px;height:inherit;float:left;font-size:2.0em;line-height:38px;}
    63. 

  63. nav a abbr{position:relative;bottom:3px;margin-left:2px;display:none;font-size:0.5em;font-weight:bold;}
    64. 

  64. nav a.current abbr{display:inline;}
    65. 

  65. .toolbar{height:48px;display:block;}
    66. 

  66. .toolbar a{float:left;padding:0;font-size:2.2em;}
    67. 

  67. .toolbar .icon{display:block;line-height:52px;}
    68. 

  68. nav .bubble{position:relative;top:-10px;left:-10px;margin-right:-16px;font-size:0.4em;}
    69. 

  69. .toolbar .bubble{top:-60px;left:12px;padding:1px 4px;}
    70. 

  70. .list{width:inherit;font-size:1.2em;line-height:1.05em;font-weight:bold;}
    71. 

  71. .list li:not(.toolbar){padding:8px 6px 8px 8px;list-style-type:none;}
    72. 

  72. .list a{display:block;}
    73. 

  73. .list li:not(.toolbar) img,.list li:not(.toolbar) .icon{float:left;width:32px;height:32px;margin-right:6px;font-size:36px;font-weight:normal;}
    74. 

  74. .list small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:0.85em;font-weight:normal;}
    75. 

  75. .list .icon{display:inline-block;}
    76. 

  76. .list .tip{font-size:0.85em;font-weight:bold;}
    77. 

  77. .list .light{font-size:0.9em;font-weight:normal;}
    78. 

  78. .list li.anchor{font-size:0.75em;padding:3px 6px !important;}
    79. 

  79. .list .anchor .icon{width:14px !important;height:14px !important;margin-right:4px !important;font-size:1.3em !important;line-height:16px !important;}
    80. 

  80. .list .anchor .bubble{display:none;}
    81. 

  81. .list .search input{width:88%;}
    82. 

  82. .list .search a{float:right;height:30px;margin:0px;padding:0px;}
    83. 

  83. .list .search a .icon{height:12px;width:30px;margin:0px;font-size:1.2em;font-weight:normal;}
    84. 

  84. .list a.arrow:before{float:right;content:">";position:relative;top:6px;font-size:16px;font-family:"Courier New",Courier,mono;font-weight:bold;}
    85. 

  85. .list .onright{font-size:0.85em;}
    86. 

  86. .list .onright .icon{font-size:1.2em !important;height:12px !important;width:12px !important;margin:0px;}
    87. 

  87. .scrollable{position:absolute;display:block;width:100%;height:100%;}
    88. 

  88. .scroll{overflow:scroll;-webkit-overflow-scrolling:touch;}
    89. 

  89. .onleft{float:left;}
    90. 

  90. .onright{float:right;}
    91. 

  91. .indented{width:auto;height:auto;padding:10px 10px 0px;}
    92. 

  92. .indented ul{margin-bottom:10px;height:auto;width:inherit;}
    93. 

  93. .rounded ul{-webkit-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;background-clip:padding-box;}
    94. 

  94. .rounded li:first-child{-webkit-border-radius:4px 4px 0px 0px;border-radius:4px 4px 0px 0px;-webkit-background-clip:padding-box;background-clip:padding-box;}
    95. 

  95. .rounded li:last-child{-webkit-border-radius:0px 0px 4px 4px;border-radius:0px 0px 4px 4px;-webkit-background-clip:padding-box;background-clip:padding-box;}
    96. 

  96. .margin-top-4{margin-top:4px;}
    97. 

  97. .hidden{display:none;}
    98. 

  98. .semi-opacity{opacity:0.5;}
    99. 

  99. .size32{font-size:32px;height:32px;width:32px;line-height:32px;}
    100. 

  100. .mini{font-size:20px !important;height:16px !important;width:16px !important;line-height:16px !important;}
    101. 

  101. .framed{border:2px solid #fff;}
    102. 

  102. .round{-webkit-border-radius:4px;border-radius:4px;-webkit-background-clip:padding-box;background-clip:padding-box;}
    103. 

  103. .bubble{padding:2px 4px 3px;-webkit-border-radius:2px;border-radius:2px;-webkit-background-clip:padding-box;background-clip:padding-box;font-size:0.8em;font-weight:bold;line-height:1.0em;}
    104. 

  104. .splash{text-align:center;font-size:1.2em;}
    105. 

  105. .splash img{max-width:206px;margin:92px auto 32px;}
    106. 

  106. .splash h1{margin:92px auto 16px;font-size:2.2em;font-weight:bold;}
    107. 

  107. .splash .button.big{margin-top:16px;}
    108. 

  108. .splash .copyright{position:fixed;width:100%;bottom:8px;left:0px;font-size:0.8em;font-style:normal;}
    109. 

  109. a.button{display:inline-block;height:31px;padding:0 9px 0 8px;color:#fff !important;outline:none;-webkit-user-select:none;user-select:none;-webkit-border-radius:2px;border-radius:2px;-webkit-background-clip:padding-box;background-clip:padding-box;background:#2c2c2d -webkit-gradient(linear, left top, left bottom, color-stop(0.2, rgba(255, 255, 255, 0.25)), color-stop(1, rgba(255, 255, 255, 0)));-webkit-box-shadow:inset 0 1px 0 rgba(34, 57, 100, 0.6),inset 1px 0 0 rgba(34, 57, 100, 0.4),inset -1px 0 0 rgba(34, 57, 100, 0.5),inset 0 -1px 0 rgba(34, 57, 100, 0.6),inset 0 2px 0 rgba(255, 255, 255, 0.3),inset 0 0 4px rgba(255, 255, 255, 0.3),0 1px 2px rgba(0, 0, 0, 0.29);box-shadow:inset 0 1px 0 rgba(34, 57, 100, 0.6),inset 1px 0 0 rgba(34, 57, 100, 0.4),inset -1px 0 0 rgba(34, 57, 100, 0.5),inset 0 -1px 0 rgba(34, 57, 100, 0.6),inset 0 2px 0 rgba(255, 255, 255, 0.3),inset 0 0 4px rgba(255, 255, 255, 0.3),0 1px 2px rgba(0, 0, 0, 0.29);font-size:1.0em;font-weight:bold !important;line-height:32px;text-align:center;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.3);text-decoration:none;}
    110. 

  110. a.button:active{-webkit-box-shadow:inset 0 1px 0 rgba(10, 10, 10, 0.5),inset 1px 0 0 rgba(10, 10, 10, 0.3),inset -1px 0 0 rgba(10, 10, 10, 0.4),inset 0 -1px 0 rgba(10, 10, 10, 0.5),inset 0 1px 5px rgba(0, 0, 0, 0.3),0 1px 0 rgba(255, 255, 255, 0.3);box-shadow:inset 0 1px 0 rgba(10, 10, 10, 0.5),inset 1px 0 0 rgba(10, 10, 10, 0.3),inset -1px 0 0 rgba(10, 10, 10, 0.4),inset 0 -1px 0 rgba(10, 10, 10, 0.5),inset 0 1px 5px rgba(0, 0, 0, 0.3),0 1px 0 rgba(255, 255, 255, 0.3);}
    111. 

  111. a.button:disabled,a.button.disabled{background:rgba(255, 255, 255, 0.2);border:1px solid #999;color:#999 !important;-webkit-box-shadow:inset 0 -5px 5px rgba(40, 40, 40, 0.1);box-shadow:inset 0 -5px 5px rgba(40, 40, 40, 0.1);text-shadow:none;}
    112. 

  112. a.button .icon{float:left;width:17px;font-size:1.5em;font-weight:normal;line-height:32px;}
    113. 

  113. a.button.big{position:relative;height:30px;width:100%;margin-bottom:4px;padding:6px 0;font-size:16px;line-height:31px;}
    114. 

  114. a.button.big .icon{width:20px;height:28px;line-height:32px;margin-left:0.6em;margin-right:-48px;}
    115. 

  115. .form,form{font-size:0.95em;width:inherit !important;}
    116. 

  116. label:not(.checkbox){display:block;margin-bottom:2px;}
    117. 

  117. input:not([type=checkbox]),textarea,select{display:inline-block;padding:5px;width:95%;margin-bottom:2px;outline:none;-webkit-appearance:none;font-size:1.0em;font-weight:bold;line-height:1.25em;}
    118. 

  118. input[type=search]{width:86%;}
    119. 

  119. input[type=search]+.button{float:right;padding:0px;width:32px;}
    120. 

  120. input[type=search]+.button .icon{font-size:20px !important;}
    121. 

  121. select{width:100%;}
    122. 

  122. label.select{position:relative;display:inline-block;width:100%;}
    123. 

  123. .select:after{padding:0 7px;position:absolute;top:0;right:0;bottom:0;height:30px;content:"▼";pointer-events:none;font-size:60%;line-height:32px;}
    124. 

  124. .no-pointer-events .select:after{content:none;}
    125. 

  125. input[type="checkbox"],input[type="radio"]{width:74px;float:left;z-index:2;}
    126. 

  126. input[type="checkbox"]+span::after,input[type="radio"]+span::after{content:"off";}
    127. 

  127. input[type="checkbox"]:checked+span::after,input[type="radio"]:checked+span::after{content:"on";}
    128. 

  128. .iphone-toggle-buttons{-moz-user-select:none;-webkit-user-select:none;user-select:none;}
    129. 

  129. .iphone-toggle-buttons{margin:4px 0;}
    130. 

  130. input[type="checkbox"]+span,input[type="radio"]+span,input[type="checkbox"]+span::before,input[type="radio"]+span::before,input[type="checkbox"]+span::after,input[type="radio"]+span::after{-moz-border-radius:16px;-webkit-border-radius:16px;border-radius:16px;display:inline-block;}
    131. 

  131. input[type="checkbox"]+span::before,input[type="radio"]+span::before,input[type="checkbox"]+span::after,input[type="radio"]+span::after,input[type="checkbox"]:checked+span::before,input[type="radio"]:checked+span::before,input[type="checkbox"]:checked+span::after,input[type="radio"]:checked+span::after{top:0;}
    132. 

  132. input[type="checkbox"]+span::after,input[type="radio"]+span::after,input[type="checkbox"]:checked+span::before,input[type="radio"]:checked+span::before{right:0;}
    133. 

  133. input[type="checkbox"]+span::before,input[type="radio"]+span::before,input[type="checkbox"]:checked+span::after,input[type="radio"]:checked+span::after{left:0;}
    134. 

  134. input[type="checkbox"],input[type="radio"],input[type="checkbox"]+span::before,input[type="radio"]+span::before,input[type="checkbox"]+span::after,input[type="radio"]+span::after{position:absolute;}
    135. 

  135. input[type="checkbox"],input[type="radio"]{filter:alpha(opacity=0);-moz-opacity:0;-webkit-opacity:0;opacity:0;}
    136. 

  136. input[type="checkbox"]+span,input[type="radio"]+span{width:74px;margin-bottom:8px;height:30px;font:bold 14px/30px Arial,Sans-serif;color:#8c8c8c;text-transform:uppercase;border:solid 1px #bcbbbb;background:#c8c8c8 -webkit-gradient(linear, left top, left bottom, color-stop(0, #c8c8c8), color-stop(1, #f3f3f3));position:relative;text-indent:-9999px;}
    137. 

  137. input[type="checkbox"]+span::before,input[type="radio"]+span::before{content:"";width:29px;height:29px;border-top:solid 1px #fff;border-right:solid 1px #bebebe;background:#cfcfcf -webkit-gradient(linear, left top, left bottom, color-stop(0, #cfcfcf), color-stop(1, #f9f9f9));-webkit-box-shadow:1px 0 1px #bebebe;box-shadow:1px 0 1px #bebebe;}
    138. 

  138. input[type="checkbox"]+span::after,input[type="radio"]+span::after{text-indent:0;width:56px;height:32px;text-align:center;}
    139. 

  139. input[type="checkbox"]:checked+span,input[type="radio"]:checked+span{background:#5d96ea -webkit-gradient(linear, left top, left bottom, color-stop(0, #1b45bd), color-stop(1, #5d96ea));color:#fff;text-shadow:-1px -1px #0d2046;}
    140. 

  140. input[type="checkbox"]:checked+span::before,input[type="radio"]:checked+span::before{left:auto;-webkit-box-shadow:-2px 0 1px #3a5e91;-webkit-box-shadow:-2px 0 1px #3a5e91;box-shadow:-2px 0 1px #3a5e91;}
    141. 

  141. input[type="checkbox"]:checked+span::after,input[type="radio"]:checked+span::after{border-top:solid 1px #0f2a4f;border-bottom:solid 1px #0f2a4f;border-left:solid 1px #2c5496;height:30px;top:-1px;left:-1px;-webkit-border-radius:16px 0 0 16px;border-radius:16px 0 0 16px;-webkit-background-clip:padding-box;background-clip:padding-box;}
    142. 

  142. @media screen and (-webkit-min-device-pixel-ratio:0){.custom-select select{padding-right:30px;}}
    143. 

  143. a.grey,.grey{background-color:#cccccc;}
    144. 

  144. a.grey:active{background-color:#b5b5b5;}
    145. 

  145. a.black,.grey{background-color:#000000;}
    146. 

  146. a.black:active{background-color:#000000;}
    147. 

  147. a.red,.red{background-color:#e33100;}
    148. 

  148. a.red:active{background-color:#c5280f;}
    149. 

  149. a.lightgreen,.lightgreen{background-color:#91bd09;}
    150. 

  150. a.lightgreen:active{background-color:#7ea41a;}
    151. 

  151. a.green,.green{background-color:#009600;}
    152. 

  152. a.green:active{background-color:#00770e;}
    153. 

  153. a.blue,.blue{background-color:#237fd7;}
    154. 

  154. a.blue:active{background-color:#1a69b6;}
    155. 

  155. a.arcticblue,.arcticblue{background-color:#2daebf;}
    156. 

  156. a.arcticblue:active{background-color:#238e9e;}
    157. 

  157. a.orange,.orange{background-color:#ff5c00;}
    158. 

  158. a.orange:active{background-color:#da4e15;}
    159. 

  159. a.purple,.purple{background-color:#7b658d;}
    160. 

  160. a.purple:active{background-color:#574765;}
    161. 

  161. a.magenta,.magenta{background-color:#a9014b;}
    162. 

  162. a.magenta:active{background-color:#831239;}
    163. 

  163. a.pink,.pink{background-color:#ff007f;}
    164. 

  164. a.pink:active{background-color:#de2870;}
    165. 

  165. a.yellow,.yellow{background-color:#ffb515;}
    166. 

  166. a.yellow:active{background-color:#dfa020;}
    167. 

  167. a.twitter,.twitter:not(span){background-color:#35cdff;}
    168. 

  168. a.twitter:active{background-color:#2bafda;}
    169. 

  169. a.facebook,.facebook:not(span){background-color:#3b5998;}
    170. 

  170. a.facebook:active{background-color:#2c4579;}
    171. 

  171. li.grey{box-shadow:inset 3px 0px 0px #cccccc;}
    172. 

  172. li.black{box-shadow:inset 3px 0px 0px #000000;}
    173. 

  173. li.red{box-shadow:inset 3px 0px 0px #e33100;}
    174. 

  174. li.lightgreen{box-shadow:inset 3px 0px 0px #91bd09;}
    175. 

  175. li.green{box-shadow:inset 3px 0px 0px #009600;}
    176. 

  176. li.blue{box-shadow:inset 3px 0px 0px #237fd7;}
    177. 

  177. li.arcticblue{box-shadow:inset 3px 0px 0px #2daebf;}
    178. 

  178. li.orange{box-shadow:inset 3px 0px 0px #ff5c00;}
    179. 

  179. li.purple{box-shadow:inset 3px 0px 0px #7b658d;}
    180. 

  180. li.magenta{box-shadow:inset 3px 0px 0px #a9014b;}
    181. 

  181. li.pink{box-shadow:inset 3px 0px 0px #ff007f;}
    182. 

  182. li.yellow{box-shadow:inset 3px 0px 0px #ffb515;}
    183. 

  183. li.twitter{box-shadow:inset 3px 0px 0px #35cdff;}
    184. 

  184. li.facebook{box-shadow:inset 3px 0px 0px #3b5998;}
    185.