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