app/assets/stylesheets/system.css

   1 @charset "UTF-8";\r
   2 \r
   3 /* pettanR system.css\r
   4  *   version 0.5.18\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         \r
  60 /*  ClearFix\r
  61 --------------------------------------------------------------------------------------*/\r
  62 .clearfix:after {\r
  63   content: ".";  /* 新しい要素を作る */\r
  64   display: block;  /* ブロックレベル要素に */\r
  65   clear: both;\r
  66   height: 0;\r
  67   visibility: hidden;\r
  68 }\r
  69 \r
  70 .clearfix {\r
  71   min-height: 1px;\r
  72 }\r
  73 \r
  74 * html .clearfix {\r
  75   height: 1px;\r
  76   /*\*//*/\r
  77   height: auto;\r
  78   overflow: hidden;\r
  79   /**/\r
  80 }\r
  81 \r
  82 /*  Button\r
  83 --------------------------------------------------------------------------------------*/\r
  84         .button {\r
  85                 border:                                 1px solid;\r
  86                 background:                             #E3E3E3;\r
  87                 background:                             -moz-linear-gradient(center top , #F9F9F9, #E3E3E3);\r
  88                 background:                             -webkit-gradient(linear, left top, left bottom, from(#F9F9F9), to(#E3E3E3));\r
  89                 border-color:                   #ccc #bbb #aaa;\r
  90                 color:                                  #666;\r
  91                 font-weight:                    bold;\r
  92                 text-align:                             center;\r
  93                 cursor:                                 pointer;\r
  94                 overflow:                               hidden;\r
  95                 height:                                 30px;\r
  96                 line-height:                    30px;\r
  97                 border-radius:                  3px;\r
  98                 -o-border-radius:               3px;\r
  99                 -ms-border-radius:              3px;\r
 100                 -moz-border-radius:             3px;\r
 101                 -webkit-border-radius:  3px;\r
 102         }\r
 103         .button-has-focus {\r
 104                 border-color:                   #4D90FE;\r
 105         }\r
 106         .button-disabled {\r
 107                 background:                             #f6f6f6;\r
 108                 background:                             -moz-linear-gradient(center top , #fcfcfc, #f0f0f0);\r
 109                 background:                             -webkit-gradient(linear, left top, left bottom, from(#fcfcfc), to(#f0f0f0));\r
 110                 border-color:                   #eee #ddd #ccc;\r
 111                 color:                                  #ccc;\r
 112         }\r
 113 \r
 114         /*  editable-text\r
 115         --------------------------------------------------------------------------------------*/\r
 116         \r
 117                 .editable-text {\r
 118                         display:                        inline-block;\r
 119                         color:                          #333;\r
 120                         border:                         1px solid #ccc;\r
 121                         font-size:                      14px;\r
 122                         line-height:            16px;\r
 123                 }\r
 124                         .editable-text a,\r
 125                         .editable-text a:link,\r
 126                 .editable-text a:visited,\r
 127                 .editable-text a:hover,\r
 128                 .editable-text a:active {\r
 129                                 padding:                        3px;\r
 130                                 color:                          #333;\r
 131                                 text-decoration:        none;\r
 132                                 display:                        block;\r
 133                                 zoom:                           1;\r
 134                                 outline:                        0;\r
 135                                 background-color:       #fff;\r
 136                         }\r
 137                         .editable-text a:hover {\r
 138                                 background-color:       #ccf;\r
 139                         }\r
 140                         .editable-text input {\r
 141                                 padding:                        3px 0;\r
 142                                 width:                          100%;\r
 143                                 font-family:            Arial,Helvetica,sans-serif;\r
 144                                 background-color:       #ccf;\r
 145                                 border:                         0;\r
 146                                 margin:                         0;\r
 147                                 outline:                        0;\r
 148                         }\r
 149                         \r
 150         /*  combobox\r
 151         --------------------------------------------------------------------------------------*/        \r
 152                 .combobox {\r
 153                         display:                        inline-block;\r
 154                         color:                          #333;\r
 155                 }\r
 156                         .combobox a,\r
 157                         .combobox a:link,\r
 158                 .combobox a:visited,\r
 159                 .combobox a:hover,\r
 160                 .combobox a:active {\r
 161                         border:                         1px solid #ccc;\r
 162                                 font-size:                      14px;\r
 163                                 line-height:            16px;                   \r
 164                                 padding:                        3px;\r
 165                                 color:                          #333;\r
 166                                 text-decoration:        none;\r
 167                                 display:                        block;\r
 168                                 zoom:                           1;\r
 169                                 outline:                        0;\r
 170                                 background-color:       #fff;\r
 171                                 position:                       relative;\r
 172                         }\r
 173                         .combobox a:hover {\r
 174                                 background-color:       #ccf;\r
 175                         }\r
 176                         .combobox a:active {\r
 177                                 outline:                        0;\r
 178                         }\r
 179                                 .combobox-toggle {\r
 180                                         position:                       absolute;\r
 181                                         right:                          5px;\r
 182                                         top:                            0;\r
 183                                         display:                        block;\r
 184                                         font-family:            Arial,Helvetica,sans-serif;\r
 185                                         font-size:                      12px;\r
 186                                         line-height:            20px;\r
 187                                         color:                          #999;\r
 188                                 }\r
 189                                 .combobox  a.combobox-has-focus .combobox-toggle {\r
 190                                         color:                          #4D90FE;\r
 191                                 }                               \r
 192                                 \r
 193                                 \r
 194         .option-container {\r
 195                 position:                       absolute;\r
 196                 list-style:                     none;\r
 197                 top:                            30px;\r
 198                 width:                          200px;\r
 199                 margin:                         0;\r
 200                 padding:                        0;\r
 201                 background-color:       #fff;\r
 202                 opacity:                        0.9;\r
 203                 -moz-opacity:           0.9;\r
 204                 -khtml-opacity:         0.9;\r
 205                 color:                          #666;\r
 206                 border:                         1px solid #ccc;\r
 207                 box-shadow:                     1px 4px 9px #333;\r
 208                 -moz-box-shadow:        1px 4px 9px #333;\r
 209                 -webkit-box-shadow:     1px 4px 9px #333;\r
 210                 filter:                         alpha(opacity=90) progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=120,strength=9);\r
 211                 -ms-filter:                     alpha(opacity=90) progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=120,strength=9);\r
 212         }\r
 213                 .option-container li {\r
 214                         display:                block;\r
 215                         cursor:                 pointer;\r
 216                         height:                 30px;\r
 217                         line-height:    30px;\r
 218                 }\r
 219                         .option-container a,\r
 220                         .option-container a:link,\r
 221                         .option-container a:visited {\r
 222                                 color:                  #666;\r
 223                                 position:               relative;\r
 224                                 display:                block;\r
 225                                 padding:                0 10px;\r
 226                                 height:                 30px;\r
 227                                 line-height:    30px;\r
 228                                 *cursor:                pointer;\r
 229                         }\r
 230                         .option-container a:hover {\r
 231                                 color:                          #333;\r
 232                                 background-color:       #ccf;\r
 233                                 text-decoration:        none;\r
 234                                 *cursor:                        pointer;\r
 235                         }\r
 236                         a.combobox-option-current,\r
 237                         a.combobox-option-current:link,\r
 238                         a.combobox-option-current:visited {\r
 239                                 color:                          #e6e6ef;\r
 240                                 background-color:       #66f;\r
 241                                 text-decoration:        none;\r
 242                         }\r
 243                         \r
 244 \r
 245 \r
 246 /*  Loading\r
 247 --------------------------------------------------------------------------------------*/\r
 248         .loading {\r
 249                 background-image:               url( /assets/loading.gif);\r
 250                 background-position:    50% 50%;\r
 251                 background-repeat:              no-repeat;\r
 252         }\r
 253         .error {\r
 254                 background-image:               url( /assets/error.png);\r
 255                 background-position:    50% 50%;\r
 256                 background-repeat:              no-repeat;\r
 257         }\r
 258 \r
 259 \r
 260 \r
 261 \r
 262 /*  Noscript Alert\r
 263 --------------------------------------------------------------------------------------*/\r
 264         #noscript-alert {\r
 265                 border-left:            1px solid #666;\r
 266                 display:                        block;\r
 267                 text-align:                     center;\r
 268                 color:                          red;\r
 269                 font-weight:            bold;\r
 270                 font-size:                      12px;\r
 271                 line-height:            12px;\r
 272                 padding:                        11px 0 7px;\r
 273         }\r
 274 \r
 275 /*--------------------------------------------------------------------------------------\r
 276  * \r
 277  *  home\r
 278  *  \r
 279  -------------------------------------------------------------------------------------*/\r
 280         #home-root {\r
 281                 position:       absolute;\r
 282                 top:            0;\r
 283                 left:           0;\r
 284                 width:          100%;\r
 285                 height:         100%;\r
 286         }\r
 287                 #home-tail-container {\r
 288                         position:       absolute;\r
 289                         padding:        20px;\r
 290                 }\r
 291                         .tail-wrapper {\r
 292                                 width:          150px;\r
 293                                 height:         150px;\r
 294                                 float:          left;\r
 295                                 margin:         0 10px 10px 0;\r
 296                                 overflow:       hidden;\r
 297                                 cursor:         pointer;\r
 298                             position:   relative;\r
 299                         }\r
 300                         .tail-wrapper h2 {\r
 301                                 position:               absolute;\r
 302                                 bottom:                 10px;\r
 303                                 left:                   20px;\r
 304                                 width:                  110px;\r
 305                                 overflow:               hidden;\r
 306                                 color:                  #FFF;\r
 307                                 font-size:              14px;\r
 308                                 line-height:    1.3;\r
 309                                 font-weight:    normal;\r
 310                                 font-family:    Segoe UI,Tahoma,Arial,Verdana,sans-serif;\r
 311                         }\r
 312 \r
 313 /*--------------------------------------------------------------------------------------\r
 314  * \r
 315  *  overlay\r
 316  *  \r
 317  -------------------------------------------------------------------------------------*/\r
 318         #overlay-container,\r
 319         #overlay-shadow {\r
 320                 position:                       absolute;\r
 321                 left:                           0;\r
 322                 top:                            0;\r
 323                 width:                          100%;\r
 324                 height:                         100%;\r
 325                 overflow:                       hidden;\r
 326         }\r
 327                 #overlay-shadow {\r
 328                         background:                     #000;\r
 329                         opacity:                        0.5;\r
 330                         -moz-opacity:           0.5;\r
 331                         -khtml-opacity:         0.5;\r
 332                 }\r
 333                 .pettanr-ActiveX-enabled #overlay-shadow {\r
 334                         filter:                         alpha(opacity=50);\r
 335                         -ms-filter:                     alpha(opacity=50);                      \r
 336                 }\r
 337                 .pettanr-ActiveX-disabled #overlay-shadow {\r
 338                         background:                     transparent url( "/assets/black_50pct.png" )　repeat 0 0;\r
 339                         _background:            url( "/assets/black_50pct.gif" )　repeat 0 0;\r
 340                 }\r
 341                 \r
 342                 #overlay-close-button {\r
 343                         border:                                 2px solid #f00;\r
 344                         color:                                  #f00;\r
 345                         font-weight:                    bold;\r
 346                         font-size:                              16px;\r
 347                         line-height:                    16px;\r
 348                         text-align:                             center;\r
 349                         cursor:                                 pointer;\r
 350                         overflow:                               hidden;\r
 351                         width:                                  20px;\r
 352                         height:                                 20px;\r
 353                         padding:                                2px;\r
 354                         position:                               absolute;\r
 355                         top:                                    9px;\r
 356                         right:                                  9px;\r
 357                         z-index:                                9999;\r
 358                         border-radius:                  5px;\r
 359                         -o-border-radius:               5px;\r
 360                         -ms-border-radius:              5px;\r
 361                         -moz-border-radius:             5px;\r
 362                         -webkit-border-radius:  5px;\r
 363                 }\r
 364                 \r
 365 \r
 366 /*--------------------------------------------------------------------------------------\r
 367  * \r
 368  *  Finder\r
 369  *  \r
 370  -------------------------------------------------------------------------------------*/\r
 371         .finder-body {\r
 372                 position:                               relative;\r
 373                 overflow:                               auto;\r
 374         }\r
 375                 .finder-container .loading {\r
 376                          background-position: 50% bottom;\r
 377                 }\r
 378         .finder-header {\r
 379                 height:                                 40px;\r
 380                 position:                               relative;\r
 381                 background-color:               #333;\r
 382         }\r
 383                 .finder-header ul {\r
 384                         list-style:                             none;\r
 385                         position:                               absolute;\r
 386                         top:                                    0;\r
 387                         left:                                   48px;\r
 388                         height:                                 40px;\r
 389                         line-height:                    40px;\r
 390                         padding:                                0;\r
 391                         margin:                                 0;\r
 392                 }\r
 393                         .finder-header li {\r
 394                                 position:                               absolute;\r
 395                                 top:                                    0;\r
 396                                 left:                                   0;\r
 397                                 height:                                 40px;\r
 398                                 width:                                  90px;\r
 399                                 padding:                                0;\r
 400                                 margin:                                 0;\r
 401                         }\r
 402                         .finder-header li a,\r
 403                         .finder-header li a:link,\r
 404                         .finder-header li a:visited {\r
 405                                 display:                                block;\r
 406                                 height:                                 14px;\r
 407                                 font-size:                              14px;\r
 408                                 line-height:                    14px;\r
 409                                 padding:                                16px 0 10px 20px;\r
 410                                 margin:                                 0;\r
 411                                 color:                                  #eee;\r
 412                                 overflow:                               hidden;\r
 413                         }\r
 414                         .finder-header li a:hover {\r
 415                                 text-decoration:                none;\r
 416                                 background-color:               #66f;\r
 417                                 color:                                  #eee;\r
 418                         }\r
 419                         \r
 420                         \r
 421                 .finder-header .button {\r
 422                         position:                               absolute;\r
 423                         top:                                    8px;\r
 424                         width:                                  30px;\r
 425                         height:                                 24px;\r
 426                         line-height:                    24px;\r
 427                 }\r
 428                 .finder-sidebar-switch {\r
 429                         left:                                   8px;\r
 430                 }\r
 431                 .finder-style-switch {\r
 432                         right:                                  48px;\r
 433                 }\r
 434                 .finder-action-switch {\r
 435                         right:                                  8px;\r
 436                 }\r
 437                 \r
 438         /*  Finder Icon\r
 439         --------------------------------------------------------------------------------------*/\r
 440         .finder-icon {\r
 441                 position:                                       relative;\r
 442                 height:                                         74px;\r
 443                 border-bottom:                          1px solid #ccc;\r
 444                 clear:                                          both;\r
 445                 overflow:                                       hidden; /* for webkit */\r
 446         }\r
 447         .finder-icon:hover {\r
 448                 background-color:                       #eee;\r
 449                 cursor:                                         pointer;\r
 450         }\r
 451                 .fnder-icon-modern .finder-icon-handle,\r
 452                 .fnder-icon-modern .finder-icon-thumbnail,\r
 453                 .fnder-icon-modern .finder-icon-filename,\r
 454                 .fnder-icon-modern .finder-icon-summary {\r
 455                         display:                                        table-cell;\r
 456                 vertical-align:                         middle;\r
 457                 line-height:                            1.3em;\r
 458             }\r
 459                 \r
 460                 .finder-icon-handle {\r
 461                         width:                                          20px;\r
 462                         height:                                         74px;\r
 463                 }\r
 464                 \r
 465                 .finder-icon-thumbnail {\r
 466                         width:                                          64px;\r
 467                         height:                                         74px;\r
 468                         cursor:                                         pointer;\r
 469                         background-repeat:                      no-repeat;\r
 470                         background-position:            50% 50%;\r
 471                         background-image:                       url('/assets/sprite.gif');\r
 472                 }\r
 473                 \r
 474                 .finder-icon .file-type-folder {\r
 475                         background-position:            0 -75px;\r
 476                 }\r
 477                 .finder-icon .file-type-album {\r
 478                 }\r
 479                 .finder-icon .file-type-author {\r
 480                         background-position:            -70px -75px;\r
 481                 }               \r
 482                 .finder-icon .file-type-comic {\r
 483                         background-position:            0 -145px;\r
 484                 }\r
 485                 .finder-icon .file-type-cabinet {\r
 486                         background-position:            -70px -145px;\r
 487                 }\r
 488                 .finder-icon .file-type-panel {\r
 489                         background-position:            0 -215px;\r
 490                 }\r
 491                 .finder-icon .file-type-artist {\r
 492                         background-position:            -70px -215px;\r
 493                 }\r
 494                 .finder-icon .file-type-balloon {\r
 495                         background-position:            0 -285px;\r
 496                 }\r
 497                 .finder-icon .file-type-charactor {\r
 498                         background-position:            -70px -285px;\r
 499                 }               \r
 500                 .has-thumbnail {\r
 501                 }\r
 502                 .fnder-icon-modern .finder-icon-filename {\r
 503                         width:                                          200px;\r
 504                         padding:                                        5px 10px;\r
 505                         height:                                         64px;\r
 506                         font-weight:                            bold;\r
 507                         color:                                          #333;\r
 508                 }\r
 509                 .fnder-icon-modern .finder-icon-summary {\r
 510                         width:                                          300px;\r
 511                         padding:                                        5px 10px;\r
 512                         height:                                         64px;\r
 513                         color:                                          #666;\r
 514                 }\r
 515 \r
 516         /*  Finder Icon ie7-\r
 517         --------------------------------------------------------------------------------------*/\r
 518         .finder-icon a,\r
 519         .finder-icon a:link,\r
 520         .finder-icon a:visited,\r
 521         .finder-icon a:active {\r
 522                 display:                                block;\r
 523                 height:                                 74px;\r
 524                 text-decoration:                none;\r
 525                 zoom:                                   1;\r
 526                 cursor:                                 pointer;\r
 527         }\r
 528         .finder-icon a:hover {\r
 529                 _background-color:              #eee;\r
 530                 color:                                  #333;\r
 531         }\r
 532                 .fnder-icon-ie7 .finder-icon-handle,\r
 533                 .fnder-icon-ie7 .finder-icon-thumbnail {\r
 534                 zoom:                                   1;\r
 535                 line-height:                    1.3em;\r
 536             }\r
 537                 .finder-icon-cell {\r
 538                         display:                                inline;\r
 539                         zoom:                                   1;\r
 540                 }\r
 541                         .finder-icon-vertical-middle-outer {\r
 542                                 display:                                block;\r
 543                                 height:                                 74px;\r
 544                                 position:                               relative;\r
 545                         }\r
 546                         .finder-icon-ie-filename .finder-icon-vertical-middle-outer {\r
 547                                 width:                                          200px;\r
 548                                 font-weight:                            bold;\r
 549                                 color:                                          #333;\r
 550                         }\r
 551                         .finder-icon-ie-summary .finder-icon-vertical-middle-outer {\r
 552                                 width:                                          300px;\r
 553                                 color:                                          #666;\r
 554                         }\r
 555                                 .finder-icon-vertical-middle-inner {\r
 556                                         display:                                        block;\r
 557                                         position:                                       absolute;\r
 558                                         top:                                            50%;\r
 559                                         margin:                                         0 5px;\r
 560                                 }\r
 561                                         .fnder-icon-ie7 .finder-icon-filename,\r
 562                                         .fnder-icon-ie7 .finder-icon-summary {\r
 563                                                         position:               relative;\r
 564                                                         top:                    -50%;\r
 565                                         }\r
 566                                         \r
 567         /*  Finder Icon Console\r
 568         --------------------------------------------------------------------------------------*/                \r
 569                 .finder-icon-console {\r
 570                         position:                                       absolute;\r
 571                         top:                                            0;\r
 572                         right:                                          0;\r
 573                 }\r
 574                         .finder-icon-console a {\r
 575                                 display:                                        block;\r
 576                                 width:                                          74px;\r
 577                                 height:                                         74px;\r
 578                                 border-left:                            1px solid #ccc;\r
 579                                 float:                                          right;\r
 580                                 background-image:                       url('/assets/sprite.gif') !important;\r
 581                                 background-repeat:                      no-repeat;\r
 582                         }\r
 583                         .finder-icon-console a:hover {\r
 584                                 background-color:                       #ccc !important;\r
 585                         }\r
 586                         .finder-icon-console-action {\r
 587                                 background-position:            0px -355px;\r
 588                         }\r
 589                         .finder-icon-console-editor-apps {\r
 590                                 background-position:            -70px -355px;\r
 591                         }\r
 592                         .finder-icon-console-viewer-apps {\r
 593                                 background-position:            0px -425px;\r
 594                         }