app/assets/stylesheets/system.css

   1 @charset "UTF-8";\r
   2 \r
   3 /* pettanR system.css\r
   4  *   version 0.5.38\r
   5  * \r
   6  *   author:\r
   7  *     itozyun\r
   8  */\r
   9 \r
  10 /*  Reset\r
  11 --------------------------------------------------------------------------------------*/\r
  12         html, body {\r
  13                 margin:                 0;\r
  14                 padding:                0;\r
  15                 height:                 100%;\r
  16         }\r
  17         /* この指定がないと ie で  Util.getAbsolutePosition が狂う  body { font-family:     "MS PGothic", "MS Gothic" } */\r
  18         body {\r
  19                 font-family:    "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "MS PGothic", Osaka, "MS Gothic", Gothic, sans-serif; \r
  20         }\r
  21         \r
  22         p {\r
  23                 text-shadow:    #000 0 0 0;/* for Safari */ \r
  24                 -moz-opacity:   0.99;/* for Firefox */ \r
  25         }\r
  26 \r
  27         /* http://e2designer.seesaa.net/article/152168876.html */\r
  28         /* http://perishablepress.com/press/2010/06/01/wrapping-content/ */\r
  29 \r
  30         .break-word {\r
  31                 white-space: pre;           /* CSS 2.0 */\r
  32                 white-space: pre-wrap;      /* CSS 2.1 */\r
  33                 white-space: pre-line;      /* CSS 3.0 */\r
  34                 white-space: -pre-wrap;     /* Opera 4-6 */\r
  35                 white-space: -o-pre-wrap;   /* Opera 7 */\r
  36                 white-space: -moz-pre-wrap; /* Mozilla */\r
  37                 white-space: -hp-pre-wrap;  /* HP Printers */\r
  38                 word-wrap:   break-word;    /* IE 5+ */\r
  39         }\r
  40         \r
  41         /* remember to define focus styles! */\r
  42         :focus { outline: 0;}\r
  43         \r
  44         /* http://web.archive.org/web/20100204222112/http://honoo-no.com/creators/2008/02/14_211120.html */\r
  45         textarea, input {\r
  46                 font-family: "MS PGothic", Osaka, "MS Gothic", "ヒラギノ角ゴ Pro W3", sans-serif;\r
  47         }\r
  48         \r
  49         \r
  50         a:link { color:#008;}\r
  51         a:visited { color: #505;}\r
  52         a { text-decoration: none;}\r
  53         \r
  54         a:hover {\r
  55                 text-decoration:        underline;\r
  56                 color:                          #f60;\r
  57         }\r
  58 \r
  59         /*  mouse-operation-catcher\r
  60         --------------------------------------------------------------------------------------*/        \r
  61                 .mouse-operation-catcher {\r
  62                         position:                       absolute;\r
  63                         top:                            0;\r
  64                         left:                           0;\r
  65                         width:                          100%;\r
  66                         height:                         100%; /* 100% don't work for ie6, so ie6 need to set height as 'XXpx' by js */\r
  67                 }\r
  68                 .pettanr-ActiveX-enabled .mouse-operation-catcher {\r
  69                         background-color:       #fff;\r
  70                         filter:                         alpha( opacity=0 );\r
  71                         -ms-filter:                     alpha( opacity=0 );\r
  72                 }\r
  73                 /*\r
  74                  * ie では、背景を設定しないと、 mousemove が働かない。\r
  75                  * activeX 有効の場合は背景を着色して filter で透明に。\r
  76                  * activeX 無効の場合は透明 gif を使用\r
  77                  * background:                  url(4x4.gif) fixed repeat;\r
  78                  */\r
  79                 .pettanr-ActiveX-disabled .mouse-operation-catcher {\r
  80                         background:                     url( "/assets/opacity0.gif" ) fixed repeat;\r
  81                 }\r
  82         \r
  83 /*  ClearFix\r
  84 --------------------------------------------------------------------------------------*/\r
  85 .clearfix:after {\r
  86   content: ".";  /* 新しい要素を作る */\r
  87   display: block;  /* ブロックレベル要素に */\r
  88   clear: both;\r
  89   height: 0;\r
  90   visibility: hidden;\r
  91 }\r
  92 \r
  93 .clearfix {\r
  94   min-height: 1px;\r
  95 }\r
  96 \r
  97 * html .clearfix {\r
  98   height: 1px;\r
  99   /*\*//*/\r
 100   height: auto;\r
 101   overflow: hidden;\r
 102   /**/\r
 103 }\r
 104 \r
 105 /*  UIForm\r
 106 --------------------------------------------------------------------------------------*/\r
 107         .uiform-invisible {\r
 108                 position     : absolute;\r
 109                 top          : 0;\r
 110                 left         : 0;\r
 111         }\r
 112                 .uiform-invisible * {\r
 113                         display      : none;\r
 114                         position     : absolute;\r
 115                 }\r
 116                         .ui-fileinput-wrapper,\r
 117                         .uiform-file {\r
 118                                 border-style:           solid;\r
 119                                 border-width:           1px;\r
 120                                 font-size:                      14px;\r
 121                                 line-height:            2em;\r
 122                                 height:                         2em;\r
 123                                 border-color:           #666 #bbb #ccc #777;\r
 124                                 display:                        block;\r
 125                                 color:                          #333;\r
 126                                 padding:                        3px;\r
 127                                 overflow:                       hidden;\r
 128                                 zoom         : 1;\r
 129                         }\r
 130                         .uiform-invisible .ui-fileinput-wrapper input {\r
 131                                 opacity          : 0.5;\r
 132                                 border           : 0;\r
 133                                 display          : block;\r
 134                                 position         : absolute;\r
 135                                 top              : -5px;\r
 136                                 right            : -10px;\r
 137                                 font-size        : 999px;\r
 138                                 line-height      : 1em;\r
 139                                 color            : #fff;\r
 140                                 background-color : transparent;\r
 141                                 cursor           : pointer;\r
 142                                 /*padding          : 999px;*/\r
 143                         }\r
 144                         .pettanr-ActiveX-enabled .uiform-invisible .ui-fileinput-wrapper input {\r
 145                                 filter:                         alpha( opacity=50 );\r
 146                                 -ms-filter:                     alpha( opacity=50 );\r
 147                         }\r
 148 \r
 149 /*  Button\r
 150 --------------------------------------------------------------------------------------*/\r
 151         .button {\r
 152                 border-width:                   1px;\r
 153                 border-style:                   solid;\r
 154                 border-color:                   #ccc #bbb #aaa;\r
 155                 background:                             #E3E3E3;\r
 156                 background:                             -moz-linear-gradient(center top , #F9F9F9, #E3E3E3);\r
 157                 background:                             -webkit-gradient(linear, left top, left bottom, from(#F9F9F9), to(#E3E3E3));\r
 158                 color:                                  #666;\r
 159                 font-weight:                    bold;\r
 160                 text-align:                             center;\r
 161                 cursor:                                 pointer;\r
 162                 overflow:                               hidden;\r
 163                 height:                                 30px;\r
 164                 line-height:                    30px;\r
 165                 border-radius:                  3px;\r
 166                 -o-border-radius:               3px;\r
 167                 -ms-border-radius:              3px;\r
 168                 -moz-border-radius:             3px;\r
 169                 -webkit-border-radius:  3px;\r
 170         }\r
 171         .button-hover,\r
 172         .ui-button-hover {\r
 173                 color:                                  #333;\r
 174                 border-color:                   #999 #888 #777;\r
 175         }\r
 176         .button-has-focus {\r
 177                 border-color:                   #4D90FE;\r
 178         }\r
 179         .button-disabled {\r
 180                 background:                             #f6f6f6;\r
 181                 background:                             -moz-linear-gradient(center top , #fcfcfc, #f0f0f0);\r
 182                 background:                             -webkit-gradient(linear, left top, left bottom, from(#fcfcfc), to(#f0f0f0));\r
 183                 border-color:                   #eee #ddd #ccc;\r
 184                 color:                                  #ccc;\r
 185         }\r
 186 \r
 187         /*  editable-text\r
 188         --------------------------------------------------------------------------------------*/\r
 189                 #ui-textinput {\r
 190                         position:                       absolute;\r
 191                         outline:                        0;\r
 192                         padding:                        3px 0;\r
 193                         background-color:       #aDf0FE;\r
 194                         margin:                         0;\r
 195                         border-color:           #4D90FE;\r
 196                 }\r
 197                 #ui-textinput,\r
 198                 .editable-text {\r
 199                         border-style:           solid;\r
 200                         border-width:           1px;\r
 201                         font-size:                      14px;\r
 202                         line-height:            16px;           \r
 203                 }\r
 204                 .editable-text {\r
 205                         border-color:           #666 #bbb #ccc #777;\r
 206                         display:                        inline-block;\r
 207                         color:                          #333;\r
 208                         zoom:                           1;\r
 209                         background-color:       #fff;\r
 210                         padding:                        3px;\r
 211                 }\r
 212                 .ui-inpittext-hover .editable-text {\r
 213                         border-color:           #4D90FE;\r
 214                 }\r
 215                         \r
 216         /*  combobox\r
 217         --------------------------------------------------------------------------------------*/        \r
 218                 .combobox {\r
 219                         display:                        inline-block;\r
 220                         color:                          #333;\r
 221                 }\r
 222                         .combobox a,\r
 223                         .combobox a:link,\r
 224                 .combobox a:visited,\r
 225                 .combobox a:hover,\r
 226                 .combobox a:active {\r
 227                                 border-style:           solid;\r
 228                                 border-width:           1px;\r
 229                         border-color:           #666 #bbb #ccc #777;\r
 230                                 font-size:                      14px;\r
 231                                 line-height:            16px;                   \r
 232                                 padding:                        3px;\r
 233                                 color:                          #333;\r
 234                                 text-decoration:        none;\r
 235                                 display:                        block;\r
 236                                 zoom:                           1;\r
 237                                 outline:                        0;\r
 238                                 background-color:       #fff;\r
 239                                 position:                       relative;\r
 240                         }\r
 241                         .combobox a:hover {\r
 242                                 background-color:       #ccf;\r
 243                         }\r
 244                         .combobox a:active {\r
 245                                 outline:                        0;\r
 246                         }\r
 247                                 .combobox-toggle {\r
 248                                         position:                       absolute;\r
 249                                         right:                          5px;\r
 250                                         top:                            0;\r
 251                                         display:                        block;\r
 252                                         font-family:            Arial,Helvetica,sans-serif;\r
 253                                         font-size:                      12px;\r
 254                                         line-height:            20px;\r
 255                                         color:                          #999;\r
 256                                 }\r
 257                                 .combobox  a.combobox-has-focus .combobox-toggle {\r
 258                                         color:                          #4D90FE;\r
 259                                 }\r
 260                 .ui-combobox-hover .combobox a {\r
 261                         border-color:           #4D90FE;\r
 262                 }\r
 263                 .ui-combobox-hover .combobox-toggle {\r
 264                         color:                          #4D90FE;\r
 265                 }\r
 266                                 \r
 267         .option-container {\r
 268                 position:                       absolute;\r
 269                 list-style:                     none;\r
 270                 top:                            30px;\r
 271                 width:                          200px;\r
 272                 margin:                         0;\r
 273                 padding:                        0;\r
 274                 background-color:       #fff;\r
 275                 opacity:                        0.9;\r
 276                 -moz-opacity:           0.9;\r
 277                 -khtml-opacity:         0.9;\r
 278                 color:                          #666;\r
 279                 border:                         1px solid #ccc;\r
 280                 box-shadow:                     1px 4px 9px #333;\r
 281                 -moz-box-shadow:        1px 4px 9px #333;\r
 282                 -webkit-box-shadow:     1px 4px 9px #333;\r
 283                 filter:                         alpha(opacity=90) progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=120,strength=9);\r
 284                 -ms-filter:                     alpha(opacity=90) progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=120,strength=9);\r
 285         }\r
 286                 .option-container li {\r
 287                         display:                block;\r
 288                         cursor:                 pointer;\r
 289                         height:                 30px;\r
 290                         line-height:    30px;\r
 291                 }\r
 292                         .option-container a,\r
 293                         .option-container a:link,\r
 294                         .option-container a:visited {\r
 295                                 color:                  #666;\r
 296                                 position:               relative;\r
 297                                 display:                block;\r
 298                                 padding:                0 10px;\r
 299                                 height:                 30px;\r
 300                                 line-height:    30px;\r
 301                                 *cursor:                pointer;\r
 302                         }\r
 303                         .option-container a:hover {\r
 304                                 color:                          #333;\r
 305                                 background-color:       #ccf;\r
 306                                 text-decoration:        none;\r
 307                                 *cursor:                        pointer;\r
 308                         }\r
 309                         a.combobox-option-current,\r
 310                         a.combobox-option-current:link,\r
 311                         a.combobox-option-current:visited {\r
 312                                 color:                          #e6e6ef;\r
 313                                 background-color:       #66f;\r
 314                                 text-decoration:        none;\r
 315                         }\r
 316                         \r
 317 \r
 318 \r
 319 /*  Loading\r
 320 --------------------------------------------------------------------------------------*/\r
 321         .loading {\r
 322                 background-image:               url( /assets/loading.gif);\r
 323                 background-position:    50% 50%;\r
 324                 background-repeat:              no-repeat;\r
 325         }\r
 326         .error {\r
 327                 background-image:               url( /assets/error.png);\r
 328                 background-position:    50% 50%;\r
 329                 background-repeat:              no-repeat;\r
 330         }\r
 331 \r
 332 \r
 333 \r
 334 \r
 335 /*  Noscript Alert\r
 336 --------------------------------------------------------------------------------------*/\r
 337         #noscript-alert {\r
 338                 border-left:            1px solid #666;\r
 339                 display:                        block;\r
 340                 text-align:                     center;\r
 341                 color:                          red;\r
 342                 font-weight:            bold;\r
 343                 font-size:                      12px;\r
 344                 line-height:            12px;\r
 345                 padding:                        11px 0 7px;\r
 346         }\r
 347 \r
 348 /*--------------------------------------------------------------------------------------\r
 349  * \r
 350  *  home\r
 351  *  \r
 352  -------------------------------------------------------------------------------------*/\r
 353         #home-root {\r
 354                 position:       absolute;\r
 355                 top:            0;\r
 356                 left:           0;\r
 357                 width:          100%;\r
 358                 height:         100%;\r
 359         }\r
 360                 #home-tail-container {\r
 361                         position:       absolute;\r
 362                         padding:        20px;\r
 363                 }\r
 364                         .tail-wrapper {\r
 365                                 width:          150px;\r
 366                                 height:         150px;\r
 367                                 float:          left;\r
 368                                 margin:         0 10px 10px 0;\r
 369                                 overflow:       hidden;\r
 370                                 cursor:         pointer;\r
 371                             position:   relative;\r
 372                         }\r
 373                         .tail-wrapper h2 {\r
 374                                 position:               absolute;\r
 375                                 bottom:                 10px;\r
 376                                 left:                   20px;\r
 377                                 width:                  110px;\r
 378                                 overflow:               hidden;\r
 379                                 color:                  #FFF;\r
 380                                 font-size:              14px;\r
 381                                 line-height:    1.3;\r
 382                                 font-weight:    normal;\r
 383                                 font-family:    Segoe UI,Tahoma,Arial,Verdana,sans-serif;\r
 384                         }\r
 385 \r
 386 /*--------------------------------------------------------------------------------------\r
 387  * \r
 388  *  overlay\r
 389  *  \r
 390  -------------------------------------------------------------------------------------*/\r
 391         #overlay-container,\r
 392         #overlay-shadow {\r
 393                 position:                       absolute;\r
 394                 left:                           0;\r
 395                 top:                            0;\r
 396                 width:                          100%;\r
 397                 height:                         100%;\r
 398                 overflow:                       hidden;\r
 399         }\r
 400                 #overlay-shadow {\r
 401                         background:                     #000;\r
 402                         opacity:                        0.5;\r
 403                         -moz-opacity:           0.5;\r
 404                         -khtml-opacity:         0.5;\r
 405                 }\r
 406                 .pettanr-ActiveX-enabled #overlay-shadow {\r
 407                         filter:                         alpha(opacity=50);\r
 408                         -ms-filter:                     alpha(opacity=50);                      \r
 409                 }\r
 410                 .pettanr-ActiveX-disabled #overlay-shadow {\r
 411                         background:                     transparent url( "/assets/black_50pct.png" )　repeat 0 0;\r
 412                         _background:            url( "/assets/black_50pct.gif" )　repeat 0 0;\r
 413                 }\r
 414                 \r
 415                 #overlay-close-button {\r
 416                         border:                                 2px solid #f00;\r
 417                         color:                                  #f00;\r
 418                         font-weight:                    bold;\r
 419                         font-size:                              16px;\r
 420                         line-height:                    16px;\r
 421                         text-align:                             center;\r
 422                         cursor:                                 pointer;\r
 423                         overflow:                               hidden;\r
 424                         width:                                  20px;\r
 425                         height:                                 20px;\r
 426                         padding:                                2px;\r
 427                         position:                               absolute;\r
 428                         top:                                    9px;\r
 429                         right:                                  9px;\r
 430                         z-index:                                9999;\r
 431                         border-radius:                  5px;\r
 432                         -o-border-radius:               5px;\r
 433                         -ms-border-radius:              5px;\r
 434                         -moz-border-radius:             5px;\r
 435                         -webkit-border-radius:  5px;\r
 436                 }\r
 437                 \r
 438 \r
 439 /*--------------------------------------------------------------------------------------\r
 440  * \r
 441  *  Finder\r
 442  *  \r
 443  -------------------------------------------------------------------------------------*/\r
 444         .finder-body {\r
 445                 position:                               absolute;\r
 446                 overflow:                               hidden;\r
 447         }\r
 448                 .finder-container .loading {\r
 449                          background-position: 50% bottom;\r
 450                 }\r
 451                 \r
 452         .finder-path {\r
 453                 height:                                 40px;\r
 454                 position:                               relative;\r
 455                 background-color:               #484848;\r
 456         }\r
 457                 .finder-path div {\r
 458                         position:                               absolute;\r
 459                         top:                                    0;\r
 460                         left:                                   0;\r
 461                         overflow:                               hidden;\r
 462                         width:                                  90px;\r
 463                         height:                                 40px;\r
 464                         font-size:                              14px;\r
 465                         line-height:                    40px;\r
 466                         padding:                                0 0 0 15px;\r
 467                         margin:                                 0;\r
 468                         color:                                  #eee;\r
 469                         background-image       : url( /assets/finder_path_shadow.gif );\r
 470                         background-position    : 0 40px;\r
 471                         background-repeat      : repeat-y;\r
 472                 }\r
 473                 .finder-path-hover {\r
 474                         background-color:               #66f !important;\r
 475                         background-position    : 0 0 !important;\r
 476                         color                  : #fff;\r
 477                 }\r
 478                 \r
 479         /*  Finder Icon\r
 480         --------------------------------------------------------------------------------------*/\r
 481         .finder-icon {\r
 482                 position:                                       absolute;\r
 483                 left:                                           0;\r
 484                 height:                                         74px;\r
 485                 border-bottom:                          1px solid #ccc;\r
 486                 overflow:                                       hidden; /* for webkit */\r
 487         }\r
 488         .finder-icon-hover {\r
 489                 background-color:                       #eee;\r
 490         }\r
 491         .finder-icon-modern {\r
 492                 display:                                        table;\r
 493                 table-layout:                           fixed;\r
 494         }\r
 495                 .fnder-icon-modern div {\r
 496                         display:                                        table-cell;\r
 497                 vertical-align:                         middle;\r
 498                 line-height:                            1.3em;\r
 499             }\r
 500                 \r
 501                 .finder-icon-handle {\r
 502                         width:                                          20px;\r
 503                         height:                                         74px;\r
 504                 }\r
 505                                 \r
 506                 .finder-icon-down {\r
 507                         font-size:                                      40px;\r
 508                         line-height:                            74px !important;\r
 509                         color:                                          #999;\r
 510                         position:                                       absolute;\r
 511                         right:                                          0;\r
 512                         top:                                            0;\r
 513                 }\r
 514                 .finder-icon-down-hover {\r
 515                         color:                                          #111;\r
 516                 }\r
 517                 .fnder-icon-modern .finder-icon-filename {\r
 518                         width:                                          200px;\r
 519                         padding:                                        5px 10px;\r
 520                         height:                                         64px;\r
 521                         font-weight:                            bold;\r
 522                         color:                                          #333;\r
 523                 }\r
 524                 .fnder-icon-modern .finder-icon-summary {\r
 525                         width:                                          300px;\r
 526                         padding:                                        5px 10px;\r
 527                         height:                                         64px;\r
 528                         color:                                          #666;\r
 529                 }\r
 530 \r
 531         /*  Finder Icon ie7-\r
 532         --------------------------------------------------------------------------------------*/\r
 533                 .fnder-icon-ie7 .finder-icon-handle,\r
 534                 .fnder-icon-ie7 .finder-icon-thumbnail {\r
 535                 zoom:                                   1;\r
 536                 line-height:                    1.3em;\r
 537             }\r
 538                 .finder-icon-cell {\r
 539                         display:                                inline;\r
 540                         zoom:                                   1;\r
 541                 }\r
 542                         .finder-icon-vertical-middle-outer {\r
 543                                 display:                                block;\r
 544                                 height:                                 74px;\r
 545                                 position:                               relative;\r
 546                         }\r
 547                         .finder-icon-ie-filename .finder-icon-vertical-middle-outer {\r
 548                                 width:                                          200px;\r
 549                                 font-weight:                            bold;\r
 550                                 color:                                          #333;\r
 551                         }\r
 552                         .finder-icon-ie-summary .finder-icon-vertical-middle-outer {\r
 553                                 width:                                          300px;\r
 554                                 color:                                          #666;\r
 555                         }\r
 556                                 .finder-icon-vertical-middle-inner {\r
 557                                         display:                                        block;\r
 558                                         position:                                       absolute;\r
 559                                         top:                                            50%;\r
 560                                         margin:                                         0 5px;\r
 561                                 }\r
 562                                         .fnder-icon-ie7 .finder-icon-filename,\r
 563                                         .fnder-icon-ie7 .finder-icon-summary {\r
 564                                                         position:                               relative;\r
 565                                                         top:                                    -50%;\r
 566                                         }\r
 567                                         \r
 568         /*  File Icon\r
 569         --------------------------------------------------------------------------------------*/\r
 570                 .file-icon div {\r
 571                         width:                                          64px;\r
 572                         height:                                         74px;\r
 573                         cursor:                                         pointer;\r
 574                         background-repeat:                      no-repeat;\r
 575                         background-position:            50% 50%;\r
 576                         background-image:                       url('/assets/sprite.gif');\r
 577                 }\r
 578                 .file-icon .file-type-folder {\r
 579                         background-position:            0 -75px;\r
 580                 }\r
 581                 .file-icon .file-type-album {\r
 582                 }\r
 583                 .file-icon .file-type-author {\r
 584                         background-position:            -70px -75px;\r
 585                 }               \r
 586                 .file-icon .file-type-comic {\r
 587                         background-position:            0 -145px;\r
 588                 }\r
 589                 .file-icon .file-type-cabinet {\r
 590                         background-position:            -70px -145px;\r
 591                 }\r
 592                 .file-icon .file-type-panel {\r
 593                         background-position:            0 -215px;\r
 594                 }\r
 595                 .file-icon .file-type-artist {\r
 596                         background-position:            -70px -215px;\r
 597                 }\r
 598                 .file-icon .file-type-balloon {\r
 599                         background-position:            0 -285px;\r
 600                 }\r
 601                 .file-icon .file-type-charactor {\r
 602                         background-position:            -70px -285px;\r
 603                 }               \r
 604                 .has-thumbnail {\r
 605                 }\r
 606                                         \r
 607         /*  Finder Detail\r
 608         --------------------------------------------------------------------------------------*/\r
 609         .finder-detail {\r
 610                 position:                                       absolute;\r
 611                 left:                                           0;\r
 612                 top:                                            0;\r
 613                 background-color:                       #e6e6e6;\r
 614         }