+@charset "UTF-8";\r
+\r
/*\r
* pettanR\r
* \r
* work.css\r
* \r
- * version 0.4.1\r
+ * version 0.4.23\r
*\r
*/\r
+ html, body {\r
+ overflow: hidden;\r
+ }\r
#entrance, #backyard, #debug {\r
padding: 20px 10px;\r
}\r
+ #inner-wrapper {\r
+ overflow: auto;\r
+ }\r
\r
\r
/* View Container\r
--------------------------------------------------------------------------------------*/ \r
- #editor {\r
- display: none;\r
- position: absolute;\r
- left: 0;\r
- top: 0;\r
- width: 100%;\r
- height: 100%;\r
- }\r
.console-page {\r
- display: none;\r
+\r
}\r
\r
+ \r
+\r
/*--------------------------------------------------------------------------------------\r
* \r
* overlay\r
position: absolute;\r
top: 9px;\r
right: 9px;\r
+ z-index: 9999;\r
border-radius: 5px;\r
-o-border-radius: 5px;\r
-ms-border-radius: 5px;\r
-moz-border-radius: 5px;\r
-webkit-border-radius: 5px;\r
}\r
-\r
- /* Output Console\r
+ \r
+ /* Console Common\r
--------------------------------------------------------------------------------------*/\r
- #output-console-wrapper {\r
- position: absolute;\r
- width: 80%;\r
- height: 80%;\r
- background-color: #fff;\r
+ .console-wrapper {\r
+ position: absolute;\r
+ width: 320px;\r
+ padding: 20px 20px 0;\r
+ background-color: #fff;\r
}\r
- #output-area {\r
- width: 100%;\r
- height: 100%;\r
- border: 1px outset #ccc;\r
- outline: 1px;\r
+ .console-header {\r
+ border-bottom: 2px solid #666;\r
+ color: #666;\r
+ text-align: center;\r
+ font-size: 12px;\r
+ line-height: 12px;\r
+ padding-bottom: 8px;\r
+ margin-bottom: 10px;\r
+ }\r
+ .console-inner {\r
+ \r
}\r
+ .console-button-container {\r
+ margin-top: 20px;\r
+ border-top: 2px solid #666;\r
+ padding-top: 10px;\r
+ overflow: auto;\r
+ }\r
+ .console-submit-button {\r
+ display: block;\r
+ width: 100px;\r
+ float: left;\r
+ margin-left: 30px;\r
+ }\r
+ .console-cancel-button {\r
+ display: block;\r
+ width: 100px;\r
+ float: right;\r
+ margin-right: 30px;\r
+ }\r
+ .console-progress {\r
+ clear: both;\r
+ text-align: center;\r
+ height: 12px;\r
+ font-size: 12px;\r
+ line-height: 12px;\r
+ margin-top: 15px;\r
+ color: #666;\r
+ }\r
+\r
+ /* Field\r
+ --------------------------------------------------------------------------------------*/\r
+ .field {\r
+ margin: 10px 0;\r
+ padding-bottom: 5px;\r
+ border-bottom: 1px solid #ccc;\r
+ } \r
+ .field-label {\r
+ display: inline-block;\r
+ width: 120px;\r
+ line-height: 22px;\r
+ color: #666;\r
+ cursor: pointer;\r
+ }\r
+\r
/* Comic Console\r
--------------------------------------------------------------------------------------*/\r
- #comic-console-wrapper {\r
- position: absolute;\r
- width: 320px;\r
- height: 300px;\r
- background-color: #fff;\r
- }\r
#comic-console {\r
- padding: 20px;\r
+ \r
}\r
- .comic-console-label {\r
- display: inline-block;\r
- width: 120px;\r
- line-height: 22px;\r
- color: #666;\r
- cursor: pointer;\r
- }\r
+\r
.comic-console-value {\r
width: 40px;\r
text-align: right;\r
}\r
- .comic-console-line {\r
- margin: 10px 0;\r
- padding-bottom: 5px;\r
- border-bottom: 1px solid #ccc;\r
- }\r
+\r
#comic-console-title,\r
#comic-console-height,\r
#comic-console-width,\r
#comic-console-editable,\r
#comic-console-visible {}\r
- #comic-console-title-value { width: 140px; text-align:left;}\r
+ #comic-console-title-value { width: 180px; text-align:left;}\r
#comic-console-height-value {}\r
#comic-console-width-value {}\r
- #comic-console-editable-value {}\r
- #comic-console-visible-value {}\r
- \r
- #comic-console-button-container {\r
- margin-top: 20px;\r
- position: relative;\r
+ #comic-console-editable-value,\r
+ #comic-console-visible-value {\r
+ width: 180px;\r
+ text-align: center;\r
+ }\r
+ /* Comic Reader\r
+ --------------------------------------------------------------------------------------*/\r
+ #comic-reader-wrapper {}\r
+ #comic-reader-panel-container {\r
+ position: absolute;\r
+ left: 0;\r
+ top: 0;\r
+ }\r
+ #comic-reader-header,\r
+ #comic-reader-console {\r
+ position: absolute;\r
+ left; 0;\r
+ width: 100%;\r
+ z-index: 9998;\r
+ }\r
+ #comic-reader-header {\r
+ top: 0;\r
+ height: 40px;\r
+ }\r
+ .comic-reader-shadow {\r
+ z-index: 9997;\r
+ position: absolute;\r
+ width: 100%;\r
+ left; 0;\r
+ width: 100%;\r
+ height: 40px;\r
+ background: #000;\r
+ opacity: 0.5;\r
+ -moz-opacity: 0.5;\r
+ -khtml-opacity: 0.5;\r
+ }\r
+ .pettanr-ActiveX-enabled .comic-reader-shadow {\r
+ filter: alpha(opacity=50);\r
+ -ms-filter: alpha(opacity=50); \r
+ }\r
+ .pettanr-ActiveX-disabled .comic-reader-shadow {\r
+ background: transparent url( black_50pct.png) repeat 0 0;\r
+ _background: url( black_50pct.gif) repeat 0 0;\r
+ }\r
+ #comic-reader-header-content {\r
+ height: 24px;\r
+ padding-top: 16px;\r
+ border-bottom: 1px solid #fff;\r
+ }\r
+ #comic-reader-title {\r
+ font-size: 20px;\r
+ line-height: 24px;\r
+ color: #fff;\r
+ font-weight: bold;\r
}\r
- \r
- #comic-console-post-button {\r
- width: 100px;\r
- position: absolute;\r
- left: 20px;\r
- top: 0;\r
+ #comic-reader-author {\r
+ font-size: 18px;\r
+ line-height: 24px;\r
+ color: #ddd;\r
+ text-indent: 1em;\r
}\r
- #comic-console-cancel-button {\r
- width: 100px;\r
+ #comic-reader-console {\r
+ bottom: 0;\r
+ height: 100px;\r
+ border-top: 1px solid #fff;\r
+ }\r
+ #comic-reader-button-centering {\r
+ position: relative;\r
+ margin: 0 auto;\r
+ width: 399px;\r
+ }\r
+ #comic-reader-back-button,\r
+ #comic-reader-forward-button,\r
+ #comic-reader-back-button:link,\r
+ #comic-reader-forward-button:link {\r
+ display: block;\r
+ zoom: 1;\r
position: absolute;\r
- left: 160px;\r
top: 0;\r
+ height: 100px;\r
+ line-height: 100px;\r
+ color: #ddd;\r
+ width: 198px;\r
+ border-left: 1px solid #999;\r
+ border-right: 1px solid #999;\r
+ text-align: center;\r
+ font-size: 30px;\r
+ }\r
+ #comic-reader-back-button:hover,\r
+ #comic-reader-forward-button:hover {\r
+ background-color: #111;\r
+ color: #fff;\r
+ font-size: 34px;\r
+ text-decoration: none;\r
+ }\r
+ #comic-reader-back-button {\r
+ left: 0;\r
+ border-right: 1px solid #ccc;\r
+ }\r
+ #comic-reader-forward-button {\r
+ right: 0;\r
}\r
\r
- /* Upload Console\r
+ /* Output Console\r
--------------------------------------------------------------------------------------*/\r
- #upload-console-wrapper {\r
- position: absolute;\r
- width: 320px;\r
- height: 300px;\r
- background-color: #fff;\r
+ \r
+ #output-console-wrapper {\r
+\r
}\r
- #upload-console {\r
- padding: 20px;\r
+ #output-console-format-value {\r
+ width: 180px;\r
+ text-align: center\r
+ }\r
+ #output-console-option-value {\r
+ width: 180px;\r
+ text-align: left;\r
+ }\r
+ #output-console-button-container {\r
+ margin: 10px 0;\r
+ position: relative;\r
+ } \r
+ #output-area {\r
+ width: 100%;\r
+ height: 200px;\r
+ border: 1px outset #ccc;\r
+ outline: 1px;\r
+ margin-bottom: 20px;\r
}\r
- .upload-console-label {\r
- display: inline-block;\r
- width: 120px;\r
- line-height: 22px;\r
- color: #666;\r
- cursor: pointer;\r
- }\r
- .upload-console-value {\r
- width: 40px;\r
- text-align: right;\r
- }\r
- .upload-console-line {\r
- margin: 10px 0;\r
- padding-bottom: 5px;\r
- border-bottom: 1px solid #ccc;\r
- }\r
- #upload-console-button-container {\r
- margin-top: 20px;\r
- position: relative;\r
- height: 40px;\r
- }\r
\r
- #upload-console-post-button {\r
- width: 100px;\r
- position: absolute;\r
- left: 20px;\r
- top: 0;\r
- }\r
- #upload-console-cancel-button {\r
- width: 100px;\r
- position: absolute;\r
- left: 160px;\r
- top: 0;\r
- }\r
+ /* Upload Console\r
+ --------------------------------------------------------------------------------------*/\r
+ #upload-console {\r
+ }\r
+\r
/*--------------------------------------------------------------------------------------\r
* \r
* home\r
* \r
-------------------------------------------------------------------------------------*/\r
#editor {\r
+ position: absolute;\r
+ left: 0;\r
+ top: 0;\r
+ width: 100%;\r
+ height: 100%;\r
overflow: hidden;\r
background-color: #f5f5f5;\r
}\r
\r
/* Image Group\r
--------------------------------------------------------------------------------------*/\r
- #image-gruop-wrapper {\r
+ #image-group-wrapper {\r
position: absolute;\r
top: 0;\r
left: 0;\r
}\r
- #image-icon-container {\r
+ #image-group-icon-container {\r
position: absolute;\r
top: 0;\r
left: 0;\r
border: #fff solid;\r
border-width: 0; \r
}\r
- #image-gruop-button {\r
- width: 200px;\r
- position: absolute;\r
- left: 0;\r
- bottom: -40px;\r
- _bottom: 0;\r
+ #image-group-name {\r
+ padding: 20px 0 10px 20px;\r
+ border-bottom: 1px solid #eee;\r
+ color: #eee;\r
+ font-size: 20px;\r
+ line-height: 20px;\r
+ font-weight: bold;\r
+ text-shadow: 1px 1px 3px #ccc;\r
+ -moz-text-shadow: 1px 1px 3px #ccc;\r
+ -webkit-text-shadow:1px 1px 3px #ccc;\r
+ box-shadow: 0 4px 9px #333;\r
+ -moz-box-shadow: 0 4px 9px #333;\r
+ -webkit-box-shadow: 0 4px 9px #333;\r
}\r
- .image-gruop-item {\r
- width: 150px;\r
- height: 200px;\r
- position: absolute;\r
- top: 0;\r
- left: 0;\r
- text-align: center;\r
+ #image-group-button {\r
+ width: 200px;\r
+ position: absolute;\r
+ left: 0;\r
+ bottom: -40px;\r
+ _bottom: 0;\r
}\r
- .image-gruop-item .reversible-image-container {\r
- width: 150px;\r
- height: 200px;\r
+ .image-group-item {\r
+ width: 150px;\r
+ height: 200px;\r
+ position: absolute;\r
+ top: 0;\r
+ left: 0;\r
+ text-align: center;\r
}\r
- .image-gruop-item .reversible-image-container img {\r
- width: 100%;\r
- height: 100%;\r
+ .image-group-item .reversible-image-container {\r
+ width: 150px;\r
+ height: 200px;\r
}\r
- .image-gruop-item-title {\r
- position: absolute;\r
- bottom: 0;\r
- left: 0;\r
- text-align: center;\r
- width: 100%;\r
- height: 30px;\r
+ .image-group-item .reversible-image-container img {\r
+ width: 100%;\r
+ height: 100%;\r
+ }\r
+ .image-group-item-title {\r
+ position: absolute;\r
+ bottom: 0;\r
+ left: 0;\r
+ text-align: center;\r
+ width: 100%;\r
+ height: 30px;\r
}\r
\r
\r
color: #333;\r
text-decoration: none;\r
display: block;\r
+ zoom: 1;\r
outline: 0;\r
background-color: #fff;\r
}\r
margin: 0;\r
outline: 0;\r
}\r
- \r
+ \r
+ /* combobox\r
+ --------------------------------------------------------------------------------------*/ \r
+ .combobox {\r
+ display: inline-block;\r
+ color: #333;\r
+ }\r
+ .combobox a,\r
+ .combobox a:link,\r
+ .combobox a:visited,\r
+ .combobox a:hover,\r
+ .combobox a:active {\r
+ border: 1px solid #ccc;\r
+ font-size: 14px;\r
+ line-height: 16px; \r
+ padding: 3px;\r
+ color: #333;\r
+ text-decoration: none;\r
+ display: block;\r
+ zoom: 1;\r
+ outline: 0;\r
+ background-color: #fff;\r
+ position: relative;\r
+ }\r
+ .combobox a:hover {\r
+ background-color: #ccf;\r
+ }\r
+ .combobox a:active {\r
+ outline: 0;\r
+ }\r
+ .combobox-toggle {\r
+ position: absolute;\r
+ right: 5px;\r
+ top: 0;\r
+ display: block;\r
+ font-family: Arial,Helvetica,sans-serif;\r
+ font-size: 12px;\r
+ line-height: 20px;\r
+ color: #999;\r
+ }\r
+ .combobox a.combobox-has-focus .combobox-toggle {\r
+ color: #4D90FE;\r
+ } \r
+ \r
+ \r
+ .option-container {\r
+ position: absolute;\r
+ list-style: none;\r
+ top: 30px;\r
+ width: 200px;\r
+ margin: 0;\r
+ padding: 0;\r
+ background-color: #fff;\r
+ opacity: 0.9;\r
+ -moz-opacity: 0.9;\r
+ -khtml-opacity: 0.9;\r
+ color: #666;\r
+ border: 1px solid #ccc;\r
+ box-shadow: 1px 4px 9px #333;\r
+ -moz-box-shadow: 1px 4px 9px #333;\r
+ -webkit-box-shadow: 1px 4px 9px #333;\r
+ filter: alpha(opacity=90) progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=120,strength=9);\r
+ -ms-filter: alpha(opacity=90) progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=120,strength=9);\r
+ }\r
+ .option-container li {\r
+ display: block;\r
+ cursor: pointer;\r
+ height: 30px;\r
+ line-height: 30px;\r
+ }\r
+ .option-container a,\r
+ .option-container a:link,\r
+ .option-container a:visited {\r
+ color: #666;\r
+ position: relative;\r
+ display: block;\r
+ padding: 0 10px;\r
+ height: 30px;\r
+ line-height: 30px;\r
+ *cursor: pointer;\r
+ }\r
+ .option-container a:hover {\r
+ color: #333;\r
+ background-color: #ccf;\r
+ text-decoration: none;\r
+ *cursor: pointer;\r
+ }\r
+ .current-option a,\r
+ .current-option a:link,\r
+ .current-option a:visited {\r
+ color: #e6e6ef;\r
+ background-color: #66f;\r
+ text-decoration: none;\r
+ } \r
\r
/* Information Window\r
--------------------------------------------------------------------------------------*/\r
-------------------------------------------------------------------------------------*/\r
.finder-body {\r
position: relative;\r
+ overflow: auto;\r
}\r
-\r
+ .finder-container .loading {\r
+ background-position: 50% bottom;\r
+ }\r
.finder-header {\r
height: 40px;\r
position: relative;\r
/* Finder Icon\r
--------------------------------------------------------------------------------------*/\r
.finder-icon {\r
- position: absolute;\r
- top: 0;\r
- left: 0;\r
+ position: relative;\r
height: 74px;\r
- width: 100%;\r
border-bottom: 1px solid #ccc;\r
+ clear: both;\r
+ overflow: hidden; /* for webkit */\r
}\r
+ .finder-icon:hover {\r
+ background-color: #eee;\r
+ cursor: pointer;\r
+ }\r
+ .fnder-icon-modern .finder-icon-handle,\r
+ .fnder-icon-modern .finder-icon-thumbnail,\r
+ .fnder-icon-modern .finder-icon-filename,\r
+ .fnder-icon-modern .finder-icon-summary {\r
+ display: table-cell;\r
+ vertical-align: middle;\r
+ line-height: 1.3em;\r
+ }\r
+ \r
+ .finder-icon-handle {\r
+ width: 20px;\r
+ height: 74px;\r
+ }\r
+ \r
.finder-icon-thumbnail {\r
width: 64px;\r
- height: 64px;\r
- position: absolute;\r
- top: 5px;\r
- left: 20px;\r
+ height: 74px;\r
cursor: pointer;\r
- background-position: 50% 50%;\r
background-repeat: no-repeat;\r
- }\r
- .finder-icon-thumbnail {\r
+ background-position: 50% 50%;\r
background-image: url('../images/sprite.gif');\r
}\r
\r
.finder-icon .file-type-folder {\r
- background-position: 0 -80px;\r
+ background-position: 0 -75px;\r
}\r
.finder-icon .file-type-album {\r
- background-image: url('../images/folder_album.png');\r
}\r
.finder-icon .file-type-author {\r
- background-position: -70px -80px;\r
+ background-position: -70px -75px;\r
} \r
.finder-icon .file-type-comic {\r
- background-position: 0 -150px;\r
+ background-position: 0 -145px;\r
}\r
.finder-icon .file-type-cabinet {\r
- background-position: -70px -150px;\r
+ background-position: -70px -145px;\r
}\r
.finder-icon .file-type-panel {\r
- background-position: 0 -220px;\r
+ background-position: 0 -215px;\r
}\r
.finder-icon .file-type-artist {\r
- background-position: -70px -220px;\r
+ background-position: -70px -215px;\r
}\r
.finder-icon .file-type-balloon {\r
- background-position: 0 -290px;\r
+ background-position: 0 -285px;\r
}\r
.finder-icon .file-type-charactor {\r
- background-position: -70px -290px;\r
+ background-position: -70px -285px;\r
} \r
.has-thumbnail {\r
- background-image: url('../images/folder_album.png');\r
}\r
- /*\r
- * http://www.iconfinder.com/icondetails/18336/64/folder_image_photo_icon\r
- * http://www.iconfinder.com/icondetails/27849/48/folder_yellow_icon\r
- * http://www.iconfinder.com/icondetails/45347/64/cabinet_icon\r
- * http://www.iconfinder.com/icondetails/3659/64/broken_file_icon\r
- * http://www.iconfinder.com/icondetails/44733/64/address_book_icon
- */\r
- .finder-icon-filename {\r
+ .fnder-icon-modern .finder-icon-filename {\r
+ width: 200px;\r
+ padding: 5px 10px;\r
+ height: 64px;\r
+ font-weight: bold;\r
+ color: #333;\r
+ }\r
+ .fnder-icon-modern .finder-icon-summary {\r
+ width: 300px;\r
+ padding: 5px 10px;\r
+ height: 64px;\r
+ color: #666;\r
+ }\r
+\r
+ /* Finder Icon ie7-\r
+ --------------------------------------------------------------------------------------*/\r
+ .finder-icon a,\r
+ .finder-icon a:link,\r
+ .finder-icon a:visited,\r
+ .finder-icon a:active {\r
+ display: block;\r
+ height: 74px;\r
+ text-decoration: none;\r
+ zoom: 1;\r
+ cursor: pointer;\r
+ }\r
+ .finder-icon a:hover {\r
+ _background-color: #eee;\r
+ color: #333;\r
+ }\r
+ .fnder-icon-ie7 .finder-icon-handle,\r
+ .fnder-icon-ie7 .finder-icon-thumbnail {\r
+ zoom: 1;\r
+ line-height: 1.3em;\r
+ }\r
+ .finder-icon-cell {\r
+ display: inline;\r
+ zoom: 1;\r
+ }\r
+ .finder-icon-vertical-middle-outer {\r
+ display: block;\r
+ height: 74px;\r
+ position: relative;\r
+ }\r
+ .finder-icon-ie-filename .finder-icon-vertical-middle-outer {\r
+ width: 200px;\r
+ font-weight: bold;\r
+ color: #333;\r
+ }\r
+ .finder-icon-ie-summary .finder-icon-vertical-middle-outer {\r
+ width: 300px;\r
+ color: #666;\r
+ }\r
+ .finder-icon-vertical-middle-inner {\r
+ display: block;\r
+ position: absolute;\r
+ top: 50%;\r
+ margin: 0 5px;\r
+ }\r
+ .fnder-icon-ie7 .finder-icon-filename,\r
+ .fnder-icon-ie7 .finder-icon-summary {\r
+ position: relative;\r
+ top: -50%;\r
+ }\r
+ \r
+ /* Finder Icon Console\r
+ --------------------------------------------------------------------------------------*/ \r
+ .finder-icon-console {\r
position: absolute;\r
- top: 30px;\r
- left: 100px;\r
- }
\ No newline at end of file
+ top: 0;\r
+ right: 0;\r
+ }\r
+ .finder-icon-console a {\r
+ display: block;\r
+ width: 74px;\r
+ height: 74px;\r
+ border-left: 1px solid #ccc;\r
+ float: right;\r
+ background-image: url('../images/sprite.gif') !important;\r
+ background-repeat: no-repeat;\r
+ }\r
+ .finder-icon-console a:hover {\r
+ background-color: #ccc !important;\r
+ }\r
+ .finder-icon-console-action {\r
+ background-position: 0px -355px;\r
+ }\r
+ .finder-icon-console-editor-apps {\r
+ background-position: -70px -355px;\r
+ }\r
+ .finder-icon-console-viewer-apps {\r
+ background-position: 0px -425px;\r
+ }\r
+\r
+\r
+\r
+
\ No newline at end of file
OSDN Git Service
