Lungo.layout.css 3.1 KB

12345678910111213141516171819202122232425262728293031323334353637
  1. 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);}
  2. section:first-child{-webkit-transform:translate3d(0%, 0, 0);transform:translate3d(0%, 0, 0);z-index:1;}
  3. section.hide{-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0);z-index:0;}
  4. section.show{-webkit-transform:translate3d(0%, 0, 0);transform:translate3d(0%, 0, 0);z-index:1;}
  5. header,footer{position:absolute;left:0px;width:100%;height:38px;display:block;z-index:2;line-height:38px;}
  6. header{top:0px;}
  7. footer{bottom:0px;}
  8. header .title,footer .title{float:left;margin:0 8px;font-size:1.3em;}
  9. header .title{position:absolute;left:0px;width:100%;margin:0px auto;text-align:center;z-index:-1;}
  10. section header a.button,section footer a.button{margin:3px 3px auto 4px;}
  11. section header a.button.icon,section footer a.button.icon{width:17px;font-size:1.5em;font-weight:normal;}
  12. aside{position:absolute;top:0px;bottom:0px;height:auto;width:256px;opacity:0;}
  13. aside.show{opacity:1;}
  14. header~aside{padding-top:40px;}
  15. footer~aside{padding-bottom:40px;}
  16. 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);}
  17. aside a{display:block;width:244px;height:40px;padding:0 6px;font-size:1.1em;font-weight:bold;line-height:40px;}
  18. aside .icon{width:28px;height:28px;float:left;margin:8px 6px 0 0;font-size:1.9em;line-height:1.0em;text-align:center;}
  19. aside .anchor{font-weight:bold;padding:3px 10px 4px;}
  20. aside .bubble{float:right;margin:12px 4px 0 0;}
  21. @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;}
  22. header~article{top:40px;}
  23. footer~article{bottom:40px;}
  24. article.current{z-index:1;opacity:1;}
  25. article.aside{-webkit-transform:translate3d(256px, 0, 0);transform:translate3d(256px, 0, 0);}
  26. @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;}
  27. article .title .icon{margin-right:4px;}
  28. article .text{margin:4px 0 8px;display:block;font-size:0.9em;font-weight:normal;line-height:1.4em;}
  29. nav{height:inherit;text-align:center;font-weight:normal;}
  30. nav a{display:inline-block;padding:0 6px;height:inherit;float:left;font-size:2.0em;line-height:38px;}
  31. nav a abbr{position:relative;bottom:3px;margin-left:2px;display:none;font-size:0.5em;font-weight:bold;}
  32. nav a.current abbr{display:inline;}
  33. .toolbar{height:48px;display:block;}
  34. .toolbar a{float:left;padding:0;font-size:2.2em;}
  35. .toolbar .icon{display:block;line-height:52px;}
  36. nav .bubble{position:relative;top:-10px;left:-10px;margin-right:-16px;font-size:0.4em;}
  37. .toolbar .bubble{top:-60px;left:12px;padding:1px 4px;}