0.6.x/css/xui.css

   1 \r
   2         html {\r
   3                 font-size                : 100%; /* 1 */\r
   4                 -webkit-text-size-adjust : 100%; /* 2 */\r
   5                    -moz-text-size-adjust : 100%; /* 2 */\r
   6                     -ms-text-size-adjust : 100%; /* 2 */\r
   7                         text-size-adjust : 100%; /* 2 */\r
   8         }\r
   9 \r
  10         html,\r
  11         body {\r
  12                 width    : 100%;\r
  13                 height   : 100%;\r
  14                 overflow : hidden;\r
  15                 margin   : 0;\r
  16                 padding  : 0;/* opera 8 */\r
  17                 border   : 0;\r
  18         }\r
  19 \r
  20         .IE5x body,\r
  21         .IE6 body,\r
  22         .IE7 body,\r
  23         .IE8 body {\r
  24                 font-size : 16px; /* px 指定しないと ie8- で要素のサイズが狂う */\r
  25         }\r
  26 \r
  27         /*\r
  28          * http://loconet.web2.jp/blog/archives/2007/02/cssfontfamily.html\r
  29          */\r
  30         body, textarea {\r
  31                 font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;\r
  32         }\r
  33         .IE5x body, .IE5x textarea,\r
  34         .IE6  body, .IE6  textarea,  {\r
  35                 font-family: 'ＭＳ Ｐゴシック',sans-serif;\r
  36         }\r
  37 \r
  38 .Root {\r
  39         height   : 100%;\r
  40 }\r
  41 \r
  42 .Root,\r
  43 .Root div {\r
  44 /* 要素は絶対配置される */\r
  45         position           : absolute;\r
  46         top                : 0;\r
  47         left               : 0;\r
  48         width              : 100%;\r
  49         height             : auto;\r
  50         padding            : 0;\r
  51         margin             : 0;\r
  52 /* ブラウザのレイアウト機能による auto なサイズ指定は行わない */\r
  53         overflow           : hidden;\r
  54         border-style       : solid;\r
  55 \r
  56 /* border-box がデフォルト \r
  57         box-sizing         : border-box;\r
  58         -o-box-sizing      : border-box;\r
  59         -ms-box-sizing     : border-box;\r
  60         -moz-box-sizing    : border-box;\r
  61         -khtml-box-sizing  : border-box;\r
  62         -webkit-box-sizing : border-box;*/\r
  63 /* browser bug fix */\r
  64 \r
  65         zoom               : 1;\r
  66 \r
  67         word-wrap          : break-word; /* IE5.5?5?, Firefox3.5, Chrome1 Opera10.5 Safari1 */\r
  68         white-space        : pre;           /* CSS 2.0 */\r
  69         white-space        : pre-wrap;      /* CSS 2.1 */\r
  70         white-space        : pre-line;      /* CSS 3.0 */\r
  71         /* white-space : -pre-wrap;     Opera 4-6 */\r
  72         white-space        : -o-pre-wrap;   /* Opera 7 */\r
  73         white-space        : -moz-pre-wrap; /* Mozilla */\r
  74         /* white-space : -hp-pre-wrap;  HP Printers */   \r
  75 }\r
  76 .IE5x .Root, .IE5x .Root div,\r
  77 .IE6  .Root, .IE6  .Root div,\r
  78 .IE7  .Root, .IE7  .Root div, {\r
  79         word-break  : break-all;  /* ie5+ */\r
  80 }\r
  81 .IE .Root, .IE .Root div {\r
  82         white-space : normal/* ie系では、 float要素へ回り込みする、 white-space の効いているテキストの位置が狂う */\r
  83 }\r
  84 \r
  85 * {zoom:1}\r
  86 \r
  87 /*------------------------------------------------------------------------------------\r
  88  *  mouse-operation-catcher\r
  89  */\r
  90         .mouse-operation-catcher {\r
  91                 position : absolute;\r
  92                 top      : 0;\r
  93                 left     : 0;\r
  94                 width    : 100%;\r
  95                 height   : 100%; /* 100% don't work for ie6, so ie6 need to set height as 'XXpx' by js */\r
  96                 \r
  97                         user-select         : none;\r
  98                    -moz-user-select         : none;\r
  99                  -khtml-user-select         : none;\r
 100                 -webkit-user-select         : none;\r
 101 \r
 102                 /* this makes the element blocking in IE10 >, you could experiment with the value\r
 103                    see for more options this issue; https://github.com/EightMedia/hammer.js/issues/241 */\r
 104                     touch-action            : none;\r
 105                 -ms-touch-action            : none;\r
 106                         touch-callout       : none;\r
 107                 -webkit-touch-callout       : none;\r
 108                     content-zooming         : none;\r
 109                 -ms-content-zooming         : none;\r
 110                         user-drag           : none;\r
 111                  -khtml-user-drag           : none;\r
 112                 -webkit-user-drag           : none;\r
 113                         tap-highlight-color : rgba(0,0,0,0);\r
 114                 -webkit-tap-highlight-color : rgba(0,0,0,0);\r
 115         }\r
 116         .ActiveX .mouse-operation-catcher {\r
 117                 background-color : #fff;\r
 118                 filter           : alpha( opacity=0 );\r
 119         }\r
 120         /*\r
 121          * ie では、背景を設定しないと、 mousemove が働かない。\r
 122          * activeX 有効の場合は背景を着色して filter で透明に。\r
 123          * activeX 無効の場合は透明 gif を使用\r
 124          * background:                  url(4x4.gif) fixed repeat;\r
 125          */\r
 126         .mouse-operation-catcher {\r
 127                 background : url( "../img/opacity0.gif" ) fixed repeat;\r
 128         }\r
 129 \r
 130 \r
 131 .slidein, .slideout {\r
 132         position   : relative;\r
 133         width      : 200px;\r
 134         height     : 200px;\r
 135         margin     : 1em auto;\r
 136         background : #000;\r
 137         \r
 138         -webkit-transition : 0.5s ease-in-out; /* win safari3.2 */\r
 139         -webkit-transition : -webkit-transform 0.5s ease-in-out; /* win safari4 delay は指定しない */\r
 140            -moz-transition :    -moz-transform 0.5s ease-in-out 0s;\r
 141             -ms-transition :     -ms-transform 0.5s ease-in-out 0s;\r
 142              -o-transition :      -o-transform 0.5s ease-in-out 0s;\r
 143                 transition :         transform 0.5s ease-in-out 0s;\r
 144 \r
 145         /* http://blog.webcreativepark.net/2012/10/19-161432.html */\r
 146         -webkit-backface-visibility : hidden;\r
 147            -moz-backface-visibility : hidden;\r
 148                 backface-visibility : hidden;\r
 149 }\r
 150 .slidein .slider {\r
 151         -webkit-transform : translate(100px,0); /* win safari3.2 */\r
 152         -webkit-transform : translateX(100px) translateZ(0); /* safari4 */\r
 153            -moz-transform : translateX(100px) translateZ(0);\r
 154             -ms-transform : translateX(100px) translateZ(0);\r
 155              -o-transform : translateX(100px) translateZ(0);\r
 156                 transform : translateX(100px) translateZ(0);\r
 157 }\r
 158 .slideout .slider {\r
 159         -webkit-transform : translate(0,0); /* win safari3.2 */\r
 160         -webkit-transform : translateX(0) translateZ(0); /* safari4 */\r
 161            -moz-transform : translateX(0) translateZ(0);\r
 162             -ms-transform : translateX(0) translateZ(0);\r
 163              -o-transform : translateX(0) translateZ(0);\r
 164                 transform : translateX(0) translateZ(0);\r
 165 }\r
 166 .slider {\r
 167         position : absolute;\r
 168         top      : 0;\r
 169         height   : 0;\r
 170 }\r
 171 .slider div {\r
 172         position : absolute;\r
 173         top      : 0;\r
 174         width    : 200px;\r
 175         height   : 200px;\r
 176 }\r
 177 .slider-red {\r
 178         left       : 0;\r
 179         background : #f00;\r
 180 }\r
 181 .slider-blue {\r
 182         left       : 200;\r
 183         background : #00f;\r
 184 }\r
 185 \r
 186 \r
 187 /*------------------------------------------------------------------------------------\r
 188  *  hidden-sysyem-node\r
 189  */\r
 190 .hidden-system-node {\r
 191         position   : absolute;\r
 192         left       : 0;\r
 193         top        : 0;\r
 194         visibility : hidden;\r
 195         /*z-index    : 99;*/\r
 196 }\r
 197 .hidden-iframe {\r
 198         z-index     : -1;\r
 199         visibility  : hidden;\r
 200         overflow    : hidden;\r
 201         border      : 0;\r
 202         outline     : 0;\r
 203         margin      : -10px 0 0 -10px;\r
 204         padding     : 0;\r
 205         min-width   : 0;\r
 206         min-height  : 0;\r
 207         width       : 10px;\r
 208         height      : 10px;\r
 209         max-width   : 10px;\r
 210         max-height  : 10px;\r
 211         top         : -20px;\r
 212         left        : -20px;\r
 213 }\r
 214 \r
 215 /* Fix for WebAudio\r
 216  * see http://qiita.com/sou/items/5688d4e7d3a37b4e2ff1\r
 217 --------------------------------------------------------------------------------------*/\r
 218         #fps-slowdown-make-sound-noisy {\r
 219                 width                             : 0px;\r
 220                 height                            : 0px;\r
 221                 position                          : absolute;\r
 222                 -webkit-animation-name            : anim-void;\r
 223                 -webkit-animation-duration        : 1s;\r
 224                 -webkit-animation-iteration-count : infinite;\r
 225         }\r
 226         @-webkit-keyframes anim-void {\r
 227                 from {\r
 228                         top: 0px;\r
 229                 }\r
 230                 to {\r
 231                         top: 1px;\r
 232                 }\r
 233         }\r
 234 \r
 235 /*  Scrollbox\r
 236 --------------------------------------------------------------------------------------*/\r
 237         .ScrollBox-Scroller {\r
 238                 transform       : translate( 0, 0 );\r
 239                 transformOrigin : '0 0';\r
 240                 position        : absolute;\r
 241         }\r
 242                 .Root .ScrollBox-IndicatorV,\r
 243                 .Root .ScrollBox-IndicatorH {\r
 244                         position   : absolute;\r
 245                         overflow   : hidden;\r
 246                         background : #000;\r
 247                         background : rgba(0,0,0,0.5);\r
 248                         border     : 0;\r
 249                 }\r
 250                 .Root .ScrollBox-IndicatorV {\r
 251                         top    : 0;\r
 252                         right  : 0.1em;\r
 253                         left   : auto;\r
 254                         width  : 0.5em;\r
 255                 }               \r
 256                 .Root .ScrollBox-IndicatorH {\r
 257                         top    : auto;\r
 258                         bottom : 0.1em;\r
 259                         left   : 0;\r
 260                         height : 0.5em;\r
 261                 }\r