* \r
* work.css\r
* \r
- * version 0.4.1\r
+ * version 0.4.23\r
*\r
*/\r
html, body {\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
#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
+ #comic-console-editable-value,\r
+ #comic-console-visible-value {\r
+ width: 180px;\r
+ text-align: center;\r
+ }\r
\r
#comic-console-button-container {\r
margin-top: 20px;\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
+ .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
+ .option-container a:hover {\r
+ color: #333;\r
+ background-color: #ccf;\r
+ text-decoration: none;\r
+ *cursor: pointer;\r
+ }\r
\r
/* Information Window\r
--------------------------------------------------------------------------------------*/\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
- .finder-icon a,\r
- .finder-icon a:link,\r
- .finder-icon a:visited,\r
- .finder-icon a:active {\r
- display: block;\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: 74px;\r
- text-decoration: none;\r
- *background: #fff;\r
+ cursor: pointer;\r
+ background-repeat: no-repeat;\r
+ background-position: 50% 50%;\r
+ background-image: url('../images/sprite.gif');\r
}\r
- .finder-icon a:hover {\r
- background-color: #eee;\r
+ \r
+ .finder-icon .file-type-folder {\r
+ background-position: 0 -75px;\r
}\r
- .finder-icon-handle,\r
- .finder-icon-thumbnail,\r
- .finder-icon-filename,\r
- .finder-icon-summary {\r
- display: table-cell;\r
- vertical-align: middle;\r
- height: 74px;\r
- *height: 64px;\r
- line-height: 1.3em;\r
- }\r
- /* IE 6 */\r
- .finder-icon-handle,\r
- .finder-icon-thumbnail,\r
- .finder-icon-filename,\r
- .finder-icon-summary {\r
- *display: inline;\r
- zoom: 1;\r
- }\r
- /*\*//*/\r
- * html .finder-icon span {\r
- display: inline-block;\r
- }\r
- /**/\r
- \r
- .finder-icon-handle {\r
- width: 20px;\r
- }\r
- \r
- .finder-icon-thumbnail {\r
- width: 64px;\r
- cursor: pointer;\r
- background-repeat: no-repeat;\r
- }\r
- .finder-icon-thumbnail {\r
- background-image: url('../images/sprite.gif');\r
+ .finder-icon .file-type-album {\r
+ }\r
+ .finder-icon .file-type-author {\r
+ background-position: -70px -75px;\r
+ } \r
+ .finder-icon .file-type-comic {\r
+ background-position: 0 -145px;\r
+ }\r
+ .finder-icon .file-type-cabinet {\r
+ background-position: -70px -145px;\r
+ }\r
+ .finder-icon .file-type-panel {\r
+ background-position: 0 -215px;\r
+ }\r
+ .finder-icon .file-type-artist {\r
+ background-position: -70px -215px;\r
+ }\r
+ .finder-icon .file-type-balloon {\r
+ background-position: 0 -285px;\r
+ }\r
+ .finder-icon .file-type-charactor {\r
+ background-position: -70px -285px;\r
+ } \r
+ .has-thumbnail {\r
+ }\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
- \r
- .finder-icon .file-type-folder {\r
- background-position: 0 -75px;\r
- }\r
- .finder-icon .file-type-album {\r
- }\r
- .finder-icon .file-type-author {\r
- background-position: -70px -75px;\r
- } \r
- .finder-icon .file-type-comic {\r
- background-position: 0 -145px;\r
- }\r
- .finder-icon .file-type-cabinet {\r
- background-position: -70px -145px;\r
- }\r
- .finder-icon .file-type-panel {\r
- background-position: 0 -215px;\r
- }\r
- .finder-icon .file-type-artist {\r
- background-position: -70px -215px;\r
- }\r
- .finder-icon .file-type-balloon {\r
- background-position: 0 -285px;\r
- }\r
- .finder-icon .file-type-charactor {\r
- background-position: -70px -285px;\r
- } \r
- .has-thumbnail {\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
+ .finder-icon-ie-filename .finder-icon-vertical-middle-outer {\r
width: 200px;\r
- padding: 5px;\r
font-weight: bold;\r
color: #333;\r
}\r
- a:hover .finder-icon-filename {\r
- color: #000;\r
- }\r
- .finder-icon-summary {\r
+ .finder-icon-ie-summary .finder-icon-vertical-middle-outer {\r
width: 300px;\r
- padding: 5px;\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: 0;\r
right: 0;\r
}\r
- .finder-icon-console div {\r
+ .finder-icon-console a {\r
+ display: block;\r
width: 74px;\r
height: 74px;\r
border-left: 1px solid #ccc;\r
float: right;\r
- cursor: pointer;\r
- background-position: 50% 50%;\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
-\r
+ background-position: 0px -355px;\r
}\r
.finder-icon-console-editor-apps {\r
-\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
+
\ No newline at end of file