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