OSDN Git Service

add Page, bugfix.
authoritozyun <itozyun@gmail.com>
Fri, 3 Aug 2012 00:11:50 +0000 (09:11 +0900)
committeritozyun <itozyun@gmail.com>
Fri, 3 Aug 2012 00:11:50 +0000 (09:11 +0900)
0.5.x/javascripts/peta.apps.js
0.5.x/javascripts/system.js
0.5.x/stylesheets/peta.apps.css
0.5.x/stylesheets/site.css
0.5.x/stylesheets/system.css

index 842a73a..a4d6ca1 100644 (file)
@@ -4084,6 +4084,7 @@ var Editor = gOS.registerApplication( function(){
 
 var ComicConsole = gOS.registerApplication( function(){
        var elmHeader, elmProgress,
+               winW, winH,
                inputTitle, inputW, inputH,
                comboboxVisible, comboboxEditable,
                buttonSubmit, buttonCancel,
@@ -4194,6 +4195,9 @@ var ComicConsole = gOS.registerApplication( function(){
                        instance.removeTimer( detectForm );
                        Util.createIframe( 'targetFrameCreateComic', onCreateIframe );
                        elmProgress.innerHTML = 'create iframe';
+                       
+                       instance.onPaneResize( winW, winH );
+                       inputTitle.focus();
                };
        };
        function onCreateIframe( _iframe ){
@@ -4253,8 +4257,6 @@ var ComicConsole = gOS.registerApplication( function(){
                buttonSubmit     = ui.createButton( document.getElementById( 'comic-console-post-button'), clickOK );
                buttonCancel     = ui.createButton( document.getElementById( 'comic-console-cancel-button'), clickCancel );
                
-               inputTitle.focus();
-               
                elmHeader        = document.getElementById( 'comic-console-header' );
                elmProgress      = document.getElementById( 'comic-console-progress' );
                
@@ -4275,10 +4277,12 @@ var ComicConsole = gOS.registerApplication( function(){
                
                delete instance.onOpen;
        };
-       this.onPaneResize = function( _windowW, _windowH ){
+       this.onPaneResize = function( _w, _h ){
+               winW = _w;
+               winH = _h;
                instance.rootElement.style.cssText = [
-                       'left:', Math.floor( ( _windowW - instance.rootElement.offsetWidth  ) /2 ), 'px;',
-                       'top:',  Math.floor( ( _windowH - instance.rootElement.offsetHeight ) /2 ), 'px;'
+                       'left:', Math.floor( ( _w - instance.rootElement.offsetWidth  ) /2 ), 'px;',
+                       'top:',  Math.floor( ( _h- instance.rootElement.offsetHeight ) /2 ), 'px;'
                ].join( '' );
        };
        this.onClose = function(){
index eee65bf..565ed31 100644 (file)
  * \r
  */\r
        var Util = ( function(){\r
+               var doc  = window.document,\r
+                       body = doc.getElementsByTagName( 'body' )[ 0 ];\r
+                       \r
                var ELM_SIZE_GETTER = ( function(){\r
-                               var ret = document.createElement( 'DIV' ),\r
-                                       style = ret.style;\r
-                               ret.id = 'elmSizeGetter';\r
-                               style.position = 'absolute';\r
-                               style.left = '0px';\r
-                               style.top = '-9999px';\r
-                               style.visibility = 'hidden';\r
-                               document.body.appendChild( ret);\r
-                               return ret;\r
-                       })(),\r
-                       IMG_SIZE_GETTER = ( function(){\r
-                               var ret = ELM_SIZE_GETTER.cloneNode( true );\r
-                               ret.id = 'imgSizeGetter';\r
-                               document.body.appendChild( ret);\r
+                               var ret = doc.createElement( 'DIV' );\r
+                               body.appendChild( ret );\r
+                               \r
+                               ret.id         = 'elmSizeGetter';\r
+                               ret.style.cssText  = 'position:absolute;left:0;top:-9999px;visibility:hidden';\r
+                               \r
+                               body.removeChild( ret );\r
                                return ret;\r
                        })(),\r
                        CLEAN_TARGET_ELEMENT = 'script,style,object,applet,embed,iframe,frame,base,bgsound,frameset,listing'.split( ',' );\r
                \r
                /* clean noscript */\r
                ( function(){\r
-                       var nodeNoscript = document.getElementsByTagName( 'noscript' ),\r
+                       var nodeNoscript = doc.getElementsByTagName( 'noscript' ),\r
                                noscript;\r
                        for( var i=0; i<nodeNoscript.length; ++i ){\r
                                noscript = nodeNoscript[i];\r
                })();\r
        \r
                function cleanCommnetNode( _targetElm ){\r
-                       search( _targetElm || document.body );\r
+                       search( _targetElm || body );\r
                        \r
                        function search( _elm ){\r
                                if( !_elm ) return;\r
                                        nextElm     = _elm.nextSibling,\r
                                        displayNone = _elm.style.display === 'none';\r
                                if( displayNone === true ) _elm.style.display = 'block';\r
+                               \r
+                               body.appendChild( ELM_SIZE_GETTER );\r
                                ELM_SIZE_GETTER.appendChild( _elm );\r
+                               \r
                                var ret = {\r
                                        width:          _elm.offsetWidth,\r
                                        height:         _elm.offsetHeight\r
-                               }\r
+                               };\r
                                if( displayNone === true ) _elm.style.display = 'none';\r
                                if( nextElm ){\r
                                        parentElm.insertBefore( _elm, nextElm );\r
                                        parentElm.insertBefore( _elm, prevElm.nextSibling );\r
                                } else {\r
                                        parentElm && parentElm.appendChild( _elm );\r
-                               }                       \r
+                               };\r
+                               body.removeChild( ELM_SIZE_GETTER );\r
+                               \r
                                return ret;\r
                        },\r
                        getImageSize: function( img ){\r
-                               var     parentElm = img.parentNode,\r
-                                       prevElm = img.previousSibling,\r
-                                       nextElm = img.nextSibling,\r
+                               var     parentElm   = img.parentNode,\r
+                                       prevElm     = img.previousSibling,\r
+                                       nextElm     = img.nextSibling,\r
                                        displayNone = img.style.display === 'none';\r
                                if( displayNone === true ) img.style.display = '';\r
-                               IMG_SIZE_GETTER.appendChild( img );\r
+                               \r
+                               body.appendChild( ELM_SIZE_GETTER );\r
+                               ELM_SIZE_GETTER.appendChild( img );\r
                                \r
                                var size = getActualDimension( img );\r
                                \r
-                               IMG_SIZE_GETTER.removeChild( img );\r
                                if( displayNone === true ) img.style.display = 'none';\r
                                if( nextElm ){\r
                                        parentElm.insertBefore( img, nextElm );\r
                                } else {\r
                                        parentElm && parentElm.appendChild( img );\r
                                }\r
+                               body.removeChild( ELM_SIZE_GETTER );\r
                                \r
                        /* LICENSE: MIT\r
                         * AUTHOR: uupaa.js@gmail.com\r
                                        var run, mem, w, h, key = "actual";\r
                                \r
                                // for Firefox, Safari, Google Chrome\r
-                                       if ("naturalWidth" in image) {\r
+                                       if( "naturalWidth" in image ){\r
                                                return {\r
                                                        width:  image.naturalWidth,\r
                                                        height: image.naturalHeight\r
                                                };\r
-                                       }\r
+                                       };\r
                                \r
-                                       if ("src" in image) { // HTMLImageElement\r
+                                       if( "src" in image ){ // HTMLImageElement\r
                                                if (image[key] && image[key].src === image.src) {\r
                                                        return image[key];\r
-                                               }\r
-                                               if (document.uniqueID) { // for IE\r
+                                               };\r
+                                               if( doc.uniqueID ){ // for IE\r
                                                        run = image.runtimeStyle;\r
                                                        mem = { w: run.width, h: run.height }; // keep runtimeStyle\r
                                                        run.width  = "auto"; // override\r
                                                        h = image.height;\r
                                                        image.width  = mem.w; // restore\r
                                                        image.height = mem.h;\r
-                                               }\r
+                                               };\r
                                                return image[key] = { width: w, height: h, src: image.src }; // bond\r
-                                       }\r
+                                       };\r
                                        // HTMLCanvasElement\r
                                        return { width: image.width, height: image.height };\r
-                               }\r
+                               };\r
                                \r
                                return size;\r
                        },\r
                                e.innerHTML = '<a href=\"' + path + '\" />';\r
                                return e.firstChild.href;\r
                        },\r
-                       getAbsolutePosition: function( _elm){\r
+                       getAbsolutePosition: function( _elm ){\r
                                // Find the destination's position\r
-                               var     destx = _elm.offsetLeft,\r
-                                       desty = _elm.offsetTop,\r
+                               // need html, body { fontfamily: "MS PGothic", "MS Gothic" } for ie6.\r
+                               var     destx    = _elm.offsetLeft,\r
+                                       desty    = _elm.offsetTop,\r
                                        thisNode = _elm,\r
-                                       body = document.body;\r
-                               while (thisNode.offsetParent && thisNode.offsetParent !== body){\r
+                                       body     = document.body;\r
+                               while( thisNode.offsetParent && thisNode !== body ){\r
                                        thisNode = thisNode.offsetParent;\r
                                        destx += thisNode.offsetLeft;\r
                                        desty += thisNode.offsetTop;\r
-                               }\r
+                               };\r
                                return {\r
                                        x:      destx,\r
                                        y:      desty\r
-                               }\r
+                               };\r
                        },\r
                        pullHtmlAsTemplete: function( html ){\r
                                var elm = document.createElement( 'div' );\r
                                KEY_CHANGE:                     'keychange',\r
                                CURSOL:                         'cursol'\r
                        }\r
+               },\r
+               APP: {\r
+                       TYPE: {\r
+                               GENERAL: 0,\r
+                               OVERLAY: 1,\r
+                               PAGE:    2\r
+                       }\r
                }\r
        };\r
 \r
@@ -1899,7 +1910,7 @@ var Application = ( function(){
                                winW     = 0,\r
                                winH     = 0,\r
                                tailList = [],\r
-                               elmContainer;\r
+                               elmContainer, elmHeader;\r
                        \r
                        function draw(){\r
                                var tail, elm;\r
@@ -1927,9 +1938,14 @@ var Application = ( function(){
                        this.MIN_HEIGHT  = 320;\r
                        this.onInit = function(){\r
                                self.rootElement.id = 'home-root';\r
+                               \r
                                elmContainer        = document.createElement( 'div' );\r
                                self.rootElement.appendChild( elmContainer );\r
                                elmContainer.id     = 'home-tail-container';\r
+                               \r
+                               elmHeader           = document.createElement( 'div' );\r
+                               self.rootElement.appendChild( elmHeader );\r
+                               elmHeader.id        = 'home-header';\r
                        };\r
                        this.onOpen = function( _w, _h ){\r
                                winW = _w;\r
@@ -1959,6 +1975,107 @@ var Application = ( function(){
                }\r
        })();\r
 \r
+       var Page = ( function(){\r
+               var pageNodes = [];\r
+\r
+               var ref;\r
+               \r
+               var ignoreTagList = [ 'script', 'noscript' ];\r
+               \r
+               var MemoryClass = function( node ){\r
+                       var _nodeType = node.nodeType;\r
+                       if( _nodeType === 1 && Util.getIndex( ignoreTagList, node.tagName.toLowerCase() ) === -1 ){\r
+                               this.node    = node;\r
+                               this.type    = _nodeType;\r
+                               this.display = node.style.display;\r
+                       } else\r
+                       if( _nodeType === 3 ){\r
+                               if( node.data.replace( /\s/g, '' ).length !== 0 ){\r
+                                       this.node    = node;\r
+                                       this.type    = _nodeType;\r
+                                       this.before  = pageNodes.length === 0 ? null : pageNodes[ pageNodes.length - 1 ].node;\r
+                               } else {\r
+                                       body.removeChild( node );\r
+                               }\r
+                       } else {\r
+                               // body.removeChild( node );\r
+                               return false;\r
+                       };\r
+               };\r
+               MemoryClass.prototype = {\r
+                       show: function(){\r
+                               if( this.type === 1 ){\r
+                                       if( this.display ){\r
+                                               this.node.style.display = this.display;\r
+                                       } else {\r
+                                               this.node.style.display = '';\r
+                                       }\r
+                               } else {\r
+                                       if( this.before ){\r
+                                               body.insertBefore( this.node, this.before );\r
+                                       } else {\r
+                                               body.appendChild( this.node );\r
+                                       };\r
+                               };\r
+                       },\r
+                       hide: function(){\r
+                               if( this.type === 1 ){\r
+                                       this.node.style.display = 'none';\r
+                               } else {\r
+                                       body.removeChild( this.node );\r
+                               };\r
+                       }\r
+               };\r
+               \r
+               return {\r
+                       onReady: function(){\r
+                               var _children = Util.copyArray( body.childNodes ),\r
+                                       _mem;\r
+                               for( var i = 0, l = _children.length; i<l; ++i ){\r
+                                       _mem = new MemoryClass( _children[ i ] );\r
+                                       _mem.node && pageNodes.push( _mem );\r
+                               };\r
+                               if( pageNodes.length !== 0 ){\r
+                                       ref = Application.register( function(){\r
+                                               var self     = this,\r
+                                                       winW     = 0,\r
+                                                       winH     = 0,\r
+                                                       tailList = [],\r
+                                                       elmContainer, elmHeader;\r
+                                               \r
+                                               this.bgColor     = '#ffffff';\r
+                                               this.MIN_WIDTH   = 320;\r
+                                               this.MIN_HEIGHT  = 320;\r
+                                               this.onInit = function(){\r
+                                                       for( var i=0, l = pageNodes.length; i < l; ++i ){\r
+                                                               pageNodes[ i ].show();\r
+                                                       };\r
+                                                       KeyEvent.add( self, Const.KEY.EVENT.KEY_DOWN, ref.shutdown, 27 ); // 27.esc\r
+                                               };\r
+                                               this.onOpen = function( _w, _h ){\r
+                       \r
+                                               };\r
+                                               this.onPaneResize = function( _w, _h ){\r
+                                                       \r
+                                               };\r
+                                               this.onClose = function(){\r
+                                                       for( var i=0, l = pageNodes.length; i < l; ++i ){\r
+                                                               pageNodes[ i ].hide();\r
+                                                       };\r
+                                               };\r
+                                       }, false, true, doc.title, 'page', null, '#999999' );\r
+                               };\r
+                               delete Page.onReady;\r
+                       },\r
+                       boot: function(){\r
+                               ref && ref.boot();\r
+                       },\r
+                       registered: function(){\r
+                               return !!ref;\r
+                       }\r
+               }\r
+       })();\r
+\r
 /* --------------------------------------------------------------\r
  * Event\r
  * \r
@@ -2026,7 +2143,6 @@ var Application = ( function(){
                                                if( handler.call( element, e ) !== false ) return;\r
                                                e.preventDefault();\r
                                                e.stopPropagation();\r
-                                       e._event.keyCode = 0;\r
                                                return false;\r
                                        };\r
                                        this.destroy = function(){\r
@@ -2209,7 +2325,12 @@ var ReadyEvent = ( function(){
        }\r
        \r
        function onReady(){\r
-               Home.boot();\r
+               Page.onReady();\r
+               if( Page.registered() === true ){\r
+                       Page.boot();\r
+               } else {\r
+                       Home.boot();\r
+               }\r
                ticketReady && ticketReady.destroy();\r
                ticketLoad  && ticketLoad.destroy();\r
                ticketReady = ticketLoad = null;\r
@@ -2564,21 +2685,21 @@ var KeyEvent = ( function(){
 \r
                if( key === 16 || shift === true ){\r
                        KeyEvent.shiftEnabled = type !== 'keyup';\r
-               }\r
+               };\r
                if( key === 17 || ctrl === true ){\r
                        KeyEvent.ctrlEnabled  = type !== 'keyup';\r
-               }\r
+               };\r
 \r
                for( var i=currentList.length; t = currentList[ --i ]; ){\r
                        if( Type.isFunction( t[ type ] ) === true && t.keyCode === key && ( t.shift === undefined || t.shift === shift ) && ( t.ctrl === undefined || t.ctrl === ctrl )){\r
                                AsyncCall.add( t.apiuser, t[ type ], e );\r
                                cancel = true;\r
-                       }\r
-               }\r
+                       };\r
+               };\r
                if( cancel === true || key === 18 || key === 9 || key === 27 || e.altKey === true ){ // 13.enter 18.esc 9.tab 27.esc   || ( key === 13 && overlayEnabled === false)\r
                        return false;\r
-               }\r
-       }\r
+               };\r
+       };\r
        \r
        if( UA.isIE === true && UA.ieRenderingVersion < 9 ){\r
                keyPress = function( e ){\r
@@ -2893,13 +3014,10 @@ var UI = ( function(){
                        start( apiuser, uiGroup, instance );\r
                        elmA.style.display = 'none';\r
                        elmValue.appendChild( ELM_INPUT_TEXT );\r
+                       \r
                        ELM_INPUT_TEXT.value = value;\r
-                       try {\r
-                               ELM_INPUT_TEXT.focus();\r
-                               ELM_INPUT_TEXT.select();                                \r
-                       } catch(e) {\r
-                               \r
-                       }\r
+                       ELM_INPUT_TEXT.focus();\r
+                       ELM_INPUT_TEXT.select();\r
 \r
                        return false;\r
                };\r
@@ -3162,13 +3280,8 @@ var UI = ( function(){
                function onOptionSelect( e ){\r
                        for( var i = 0, l = OPTION_LIST.length, _option; i < l; ++i){\r
                                _option = OPTION_LIST[ i ];\r
-                               \r
                                if( this === _option.elm ){\r
-                                       //currentOption = _option;\r
-                                               // alert( i +'   ' + OPTION_LIST.length )                       \r
-                                       //OptionControl.update( currentCombobox, _option.data.value );\r
                                        updateCurrrentOption(  _option.data.value, true );\r
-                                       // OptionControl.hide( currentCombobox );\r
                                        currentCombobox.blur();\r
                                        break;\r
                                };\r
@@ -3204,12 +3317,12 @@ var UI = ( function(){
                };\r
                function updateWrapperPosition(){\r
                        var position = Util.getAbsolutePosition( elm );\r
-                       \r
+\r
                        ELM_OPTION_WRAPPER.style.cssText = [\r
                                        'width:', elm.offsetWidth - 2, 'px;',\r
                                        'left:', position.x, 'px;',\r
                                        'top:', position.y + elm.offsetHeight, 'px;'\r
-                               ].join('');                     \r
+                               ].join( '' );\r
                };\r
                function change( e ){\r
                        var l   = OPTION_LIST.length,\r
index 6e30d87..fdccf59 100644 (file)
@@ -18,8 +18,9 @@
                .console-page {\r
 \r
                }\r
-       \r
-       \r
+       #editor {\r
+               font-size: 9pt;\r
+       }\r
 \r
 /*--------------------------------------------------------------------------------------\r
  * \r
                        top:                            0;\r
                        left:                           0;\r
                        width:                          100%;\r
-                       height:                         30px;\r
+                       height:                         24.1pt;\r
                        background-color:       #fff;\r
                        border-bottom:          1px solid #666;\r
                        box-shadow:                     0 4px 9px #333;\r
                                .menu-bar-item-focus div {\r
                                        cursor:                 pointer;\r
                                        overflow:               hidden;\r
-                                       height:                 30px;\r
-                                       line-height:    30px;                           \r
+                                       height:                 24.1pt;\r
+                                       line-height:    24.1pt;\r
                                        padding-left:   0.6em;\r
-                                       font-size:              14px;\r
+                                       font-size:              11pt;\r
                                }\r
                                .menu-bar-item-focus div {\r
                                        background-color:       #66f;\r
                                .menu-bar-item-focus ul {\r
                                        position:                       absolute;\r
                                        list-style:                     none;\r
-                                       top:                            30px;\r
+                                       top:                            24.1pt;\r
                                        width:                          200px;\r
                                        margin:                         0;\r
                                        padding:                        0;\r
                                                display:                block;\r
                                                cursor:                 pointer;\r
                                                width:                  200px;\r
-                                               height:                 30px;\r
-                                               line-height:    30px;\r
+                                               height:                 24.1pt;\r
+                                               line-height:    24.1pt;\r
                                        }\r
                                        .menu-bar-item-focus li.disabled {\r
                                                cursor:                 default;\r
                                                        position:               relative;\r
                                                        display:                block;\r
                                                        width:                  200px;\r
-                                                       height:                 30px;\r
-                                                       line-height:    30px;\r
+                                                       height:                 24.1pt;\r
+                                                       line-height:    24.1pt;\r
                                                        *cursor:                pointer;\r
                                                }\r
                                                .menu-bar-item-focus a:hover {\r
                                                                top:                    0;\r
                                                                left:                   10px;\r
                                                                display:                block;\r
-                                                               font-size:              14px;\r
+                                                               font-size:              11pt;\r
                                                                font-weight:    bold;\r
                                                                width:                  120px;\r
                                                                overflow:               hidden;\r
                                                                top:                    0;\r
                                                                left:                   140px;\r
                                                                display:                block;\r
-                                                               font-size:              10px;\r
+                                                               font-size:              8pt;\r
                                                                color:                  #999;\r
                                                                width:                  60px;\r
                                                                overflow:               hidden;\r
                                display:                                none;\r
                        }\r
        \r
-       /*  editable-text\r
-       --------------------------------------------------------------------------------------*/\r
-       \r
-               .editable-text {\r
-                       display:                        inline-block;\r
-                       color:                          #333;\r
-                       border:                         1px solid #ccc;\r
-                       font-size:                      14px;\r
-                       line-height:            16px;\r
-               }\r
-                       .editable-text a,\r
-                       .editable-text a:link,\r
-               .editable-text a:visited,\r
-               .editable-text a:hover,\r
-               .editable-text a:active {\r
-                               padding:                        3px;\r
-                               color:                          #333;\r
-                               text-decoration:        none;\r
-                               display:                        block;\r
-                               zoom:                           1;\r
-                               outline:                        0;\r
-                               background-color:       #fff;\r
-                       }\r
-                       .editable-text a:hover {\r
-                               background-color:       #ccf;\r
-                       }\r
-                       .editable-text input {\r
-                               padding:                        3px 0;\r
-                               width:                          100%;\r
-                               font-family:            Arial,Helvetica,sans-serif;\r
-                               background-color:       #ccf;\r
-                               border:                         0;\r
-                               margin:                         0;\r
-                               outline:                        0;\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
                #comic-element-infomation {\r
index 0f0a38f..60e286a 100644 (file)
@@ -1,3 +1,5 @@
+@charset "UTF-8";\r
+\r
 /*  VML ( v\:* don't work for ie8(ie8mode))\r
 --------------------------------------------------------------------------------------*/\r
        v\:shape,\r
index 7b0e881..063dd76 100644 (file)
@@ -1,3 +1,5 @@
+@charset "UTF-8";\r
+\r
 /*  VML ( v\:* don't work for ie8(ie8mode))\r
 --------------------------------------------------------------------------------------*/\r
        v\:shape,\r
 \r
 /*  Reset\r
 --------------------------------------------------------------------------------------*/\r
+\r
+\r
        html, body {\r
                margin:                 0;\r
                padding:                0;\r
+               height:                 100%;\r
        }\r
-        \r
+       /* この指定がないと ie で  Util.getAbsolutePosition が狂う  body { font-family:     "MS PGothic", "MS Gothic" } */\r
+       body {\r
+               font-family:    "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "MS PGothic", Osaka, "MS Gothic", Gothic, sans-serif; \r
+       }\r
+       \r
        p {\r
                text-shadow:    #000 0 0 0;/* for Safari */ \r
                -moz-opacity:   0.99;/* for Firefox */ \r
@@ -35,9 +44,9 @@
        /* remember to define focus styles! */\r
        :focus { outline: 0;}\r
        \r
-       /* http://honoo-no.com/creators/2008/02/14_211120.html */\r
+       /* http://web.archive.org/web/20100204222112/http://honoo-no.com/creators/2008/02/14_211120.html */\r
        textarea, input {\r
-               font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3",sans-serif;\r
+               font-family: "MS PGothic", Osaka, "MS Gothic", "ヒラギノ角ゴ Pro W3", sans-serif;\r
        }\r
        \r
        \r
@@ -67,7 +76,7 @@
 \r
 * html .clearfix {\r
   height: 1px;\r
-  /*¥*//*/\r
+  /*\*//*/\r
   height: auto;\r
   overflow: hidden;\r
   /**/\r
                border-color:                   #4D90FE;\r
        }\r
 \r
+       /*  editable-text\r
+       --------------------------------------------------------------------------------------*/\r
+       \r
+               .editable-text {\r
+                       display:                        inline-block;\r
+                       color:                          #333;\r
+                       border:                         1px solid #ccc;\r
+                       font-size:                      14px;\r
+                       line-height:            16px;\r
+               }\r
+                       .editable-text a,\r
+                       .editable-text a:link,\r
+               .editable-text a:visited,\r
+               .editable-text a:hover,\r
+               .editable-text a:active {\r
+                               padding:                        3px;\r
+                               color:                          #333;\r
+                               text-decoration:        none;\r
+                               display:                        block;\r
+                               zoom:                           1;\r
+                               outline:                        0;\r
+                               background-color:       #fff;\r
+                       }\r
+                       .editable-text a:hover {\r
+                               background-color:       #ccf;\r
+                       }\r
+                       .editable-text input {\r
+                               padding:                        3px 0;\r
+                               width:                          100%;\r
+                               font-family:            Arial,Helvetica,sans-serif;\r
+                               background-color:       #ccf;\r
+                               border:                         0;\r
+                               margin:                         0;\r
+                               outline:                        0;\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
+\r
+\r
 /*  Loading\r
 --------------------------------------------------------------------------------------*/\r
        .loading {\r
                                position:               absolute;\r
                                bottom:                 10px;\r
                                left:                   20px;\r
+                               width:                  110px;\r
+                               overflow:               hidden;\r
                                color:                  #FFF;\r
                                font-size:              14px;\r
+                               line-height:    1.3;\r
                                font-weight:    normal;\r
                                font-family:    Segoe UI,Tahoma,Arial,Verdana,sans-serif;\r
                        }\r