0.6.x/css/xui.css

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