3 /* pettanR peta.apps.css
\r
16 --------------------------------------------------------------------------------------*/
\r
26 /*--------------------------------------------------------------------------------------
\r
30 -------------------------------------------------------------------------------------*/
\r
31 #cabinet-header, #gallery-header {
\r
33 background-color: #111;
\r
37 padding: 6pt 0 6pt 5pt;
\r
39 #cabinet-close-button, #gallery-close-button {
\r
43 border-left: 1px solid #666;
\r
45 padding: 6pt 9pt 6pt 9pt;
\r
50 /*--------------------------------------------------------------------------------------
\r
54 -------------------------------------------------------------------------------------*/
\r
57 --------------------------------------------------------------------------------------*/
\r
61 padding: 20px 20px 0;
\r
62 background-color: #fff;
\r
65 border-bottom: 2px solid #666;
\r
70 padding-bottom: 8px;
\r
71 margin-bottom: 10px;
\r
76 .console-button-container {
\r
78 border-top: 2px solid #666;
\r
82 .console-submit-button {
\r
88 .console-cancel-button {
\r
105 --------------------------------------------------------------------------------------*/
\r
108 padding-bottom: 5px;
\r
109 border-bottom: 1px solid #ccc;
\r
112 display: inline-block;
\r
120 --------------------------------------------------------------------------------------*/
\r
125 .comic-console-value {
\r
130 #comic-console-title,
\r
131 #comic-console-height,
\r
132 #comic-console-width,
\r
133 #comic-console-editable,
\r
134 #comic-console-visible {}
\r
135 #comic-console-title-value { width: 180px; text-align:left;}
\r
136 #comic-console-height-value {}
\r
137 #comic-console-width-value {}
\r
138 #comic-console-editable-value,
\r
139 #comic-console-visible-value {
\r
141 text-align: center;
\r
144 --------------------------------------------------------------------------------------*/
\r
145 #comic-reader-wrapper {}
\r
146 #comic-reader-panel-container {
\r
147 position: absolute;
\r
151 #comic-reader-header,
\r
152 #comic-reader-console {
\r
153 position: absolute;
\r
158 #comic-reader-header {
\r
162 .comic-reader-shadow {
\r
164 position: absolute;
\r
172 -khtml-opacity: 0.5;
\r
174 .pettanr-ActiveX-enabled .comic-reader-shadow {
\r
175 filter: alpha(opacity=50);
\r
176 -ms-filter: alpha(opacity=50);
\r
178 .pettanr-ActiveX-disabled .comic-reader-shadow {
\r
179 background: transparent url( "/assets/black_50pct.png" ) repeat 0 0;
\r
180 _background: url( "/assets/black_50pct.gif" ) repeat 0 0;
\r
182 #comic-reader-header-content {
\r
185 border-bottom: 1px solid #fff;
\r
187 #comic-reader-title {
\r
193 #comic-reader-author {
\r
199 #comic-reader-console {
\r
202 border-top: 1px solid #fff;
\r
204 #comic-reader-button-centering {
\r
205 position: relative;
\r
209 #comic-reader-back-button,
\r
210 #comic-reader-forward-button,
\r
211 #comic-reader-back-button:link,
\r
212 #comic-reader-forward-button:link {
\r
215 position: absolute;
\r
218 line-height: 100px;
\r
221 border-left: 1px solid #999;
\r
222 border-right: 1px solid #999;
\r
223 text-align: center;
\r
226 #comic-reader-back-button:hover,
\r
227 #comic-reader-forward-button:hover {
\r
228 background-color: #111;
\r
231 text-decoration: none;
\r
233 #comic-reader-back-button {
\r
235 border-right: 1px solid #ccc;
\r
237 #comic-reader-forward-button {
\r
242 --------------------------------------------------------------------------------------*/
\r
244 #output-console-wrapper {
\r
247 #output-console-format-value {
\r
251 #output-console-option-value {
\r
258 border: 1px outset #ccc;
\r
260 margin-bottom: 20px;
\r
262 #output-console-close-button {
\r
264 margin: 0 auto 20px;
\r
268 --------------------------------------------------------------------------------------*/
\r
274 /*--------------------------------------------------------------------------------------
\r
278 -------------------------------------------------------------------------------------*/
\r
280 position: absolute;
\r
286 background-color: #f5f5f5;
\r
290 --------------------------------------------------------------------------------------*/
\r
291 #speach-editor-wrapper {
\r
292 position: absolute;
\r
294 #speach-editor-wrapper form {
\r
301 border: 1px outset #ccc;
\r
304 #speach-edit-complete-button {
\r
305 margin: 10px auto 0;
\r
309 --------------------------------------------------------------------------------------*/
\r
310 #image-group-wrapper {
\r
311 position: absolute;
\r
315 #image-group-icon-container {
\r
316 position: absolute;
\r
321 background-color: #fff;
\r
322 border: #fff solid;
\r
325 #image-group-name {
\r
326 padding: 20px 0 10px 20px;
\r
327 border-bottom: 1px solid #eee;
\r
332 text-shadow: 1px 1px 3px #ccc;
\r
333 -moz-text-shadow: 1px 1px 3px #ccc;
\r
334 -webkit-text-shadow:1px 1px 3px #ccc;
\r
335 box-shadow: 0 4px 9px #333;
\r
336 -moz-box-shadow: 0 4px 9px #333;
\r
337 -webkit-box-shadow: 0 4px 9px #333;
\r
339 #image-group-button {
\r
341 position: absolute;
\r
346 .image-group-item {
\r
349 position: absolute;
\r
352 text-align: center;
\r
354 .image-group-item .reversible-image-container {
\r
358 .image-group-item .reversible-image-container img {
\r
362 .image-group-item-title {
\r
363 position: absolute;
\r
366 text-align: center;
\r
373 --------------------------------------------------------------------------------------*/
\r
375 position: absolute;
\r
380 background-color: #fff;
\r
381 border-bottom: 1px solid #666;
\r
382 box-shadow: 0 4px 9px #333;
\r
383 -moz-box-shadow: 0 4px 9px #333;
\r
384 -webkit-box-shadow: 0 4px 9px #333;
\r
385 filter:progid:DXImageTransform.Microsoft.Shadow(color=#333333,direction=180,strength=9);
\r
388 .menu-bar-item-focus {
\r
389 position: absolute;
\r
394 .menu-bar-item div,
\r
395 .menu-bar-item-focus div {
\r
399 line-height: 24.1pt;
\r
400 padding-left: 0.6em;
\r
403 .menu-bar-item-focus div {
\r
404 background-color: #66f;
\r
407 .menu-bar-item ul {
\r
410 .menu-bar-item-focus ul {
\r
411 position: absolute;
\r
417 background-color: #fff;
\r
419 border: 1px solid #ccc;
\r
420 box-shadow: 1px 4px 9px #333;
\r
421 -moz-box-shadow: 1px 4px 9px #333;
\r
422 -webkit-box-shadow: 1px 4px 9px #333;
\r
423 filter: progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=120,strength=9);
\r
425 .menu-bar-item-focus li {
\r
430 line-height: 24.1pt;
\r
432 .menu-bar-item-focus li.disabled {
\r
435 .menu-bar-item-focus a,
\r
436 .menu-bar-item-focus a:link,
\r
437 .menu-bar-item-focus a:visited {
\r
439 position: relative;
\r
443 line-height: 24.1pt;
\r
446 .menu-bar-item-focus a:hover {
\r
448 background-color: #ccf;
\r
449 text-decoration: none;
\r
452 .menu-bar-item-focus li.disabled a,
\r
453 .menu-bar-item-focus li.disabled a:link,
\r
454 .menu-bar-item-focus li.disabled a:visited,
\r
455 .menu-bar-item-focus li.disabled a:active,
\r
456 .menu-bar-item-focus li.disabled a:hover {
\r
458 background-color: #fff;
\r
461 .menu-bar-item-focus span {
\r
462 position: absolute;
\r
471 .menu-bar-item-focus kbd {
\r
472 position: absolute;
\r
481 .menu-bar-item-focus li.separator {
\r
485 border-top: 1px solid #ccc;
\r
491 --------------------------------------------------------------------------------------*/
\r
492 #whiteGlass-container {
\r
493 position: absolute;
\r
499 #whiteGlass-container div {
\r
500 position: absolute;
\r
501 background-color: #fff;
\r
504 -khtml-opacity: 0.7;
\r
506 .pettanr-ActiveX-enabled #whiteGlass-container div {
\r
507 filter: alpha(opacity=70);
\r
508 -ms-filter: alpha(opacity=70);
\r
510 .pettanr-ActiveX-disabled #whiteGlass-container div {
\r
511 background: transparent url( "/assets/white_70pct.png" ) repeat 0 0;
\r
527 #whiteGlass-right {
\r
533 #whiteGlass-bottom {
\r
541 --------------------------------------------------------------------------------------*/
\r
542 #panel-tools-container {
\r
543 position: absolute;
\r
544 border: 2px solid #333;
\r
547 /* mouse-operation-catcher
\r
548 --------------------------------------------------------------------------------------*/
\r
549 #mouse-operation-catcher {
\r
550 position: absolute;
\r
554 height: 100%; /* 100% don't work for ie6, so ie6 need to set height as 'XXpx' by js */
\r
556 .pettanr-ActiveX-enabled #mouse-operation-catcher {
\r
557 background-color: #fff;
\r
558 filter: alpha( opacity=0 );
\r
559 -ms-filter: alpha( opacity=0 );
\r
562 * ie では、背景を設定しないと、 mousemove が働かない。
\r
563 * activeX 有効の場合は背景を着色して filter で透明に。
\r
564 * activeX 無効の場合は透明 gif を使用
\r
565 * background: url(4x4.gif) fixed repeat;
\r
567 .pettanr-ActiveX-disabled #mouse-operation-catcher {
\r
568 background: url( "/assets/opacity0.gif" ) fixed repeat;
\r
573 --------------------------------------------------------------------------------------*/
\r
574 #comic-element-container {
\r
575 position: absolute;
\r
578 .comic-element-wrapper {
\r
579 position: absolute;
\r
581 #comic-element-container img {
\r
584 position: absolute;
\r
589 /* comic-element-resizer
\r
590 --------------------------------------------------------------------------------------*/
\r
591 #comic-element-resizer-container {
\r
592 position: absolute;
\r
593 border: 1px solid #999;
\r
595 .comic-element-resizer {
\r
596 position: absolute;
\r
599 font-size: 8px; /* ie */
\r
600 line-height: 8px; /* ie */
\r
601 border: 1px solid #333;
\r
602 background-color: #fff;
\r
607 #comic-element-resizer-top {
\r
611 .current-resizer-is-0 #comic-element-resizer-top {
\r
612 background-color: #f66;
\r
614 #comic-element-resizer-left {
\r
618 .current-resizer-is-1 #comic-element-resizer-left {
\r
619 background-color: #f66;
\r
621 #comic-element-resizer-right {
\r
625 .current-resizer-is-2 #comic-element-resizer-right {
\r
626 background-color: #f66;
\r
628 #comic-element-resizer-bottom {
\r
632 .current-resizer-is-3 #comic-element-resizer-bottom {
\r
633 background-color: #f66;
\r
635 #comic-element-resizer-top-left {
\r
639 .current-resizer-is-4 #comic-element-resizer-top-left {
\r
640 background-color: #f66;
\r
642 #comic-element-resizer-top-right {
\r
646 .current-resizer-is-5 #comic-element-resizer-top-right {
\r
647 background-color: #f66;
\r
649 #comic-element-resizer-bottom-left {
\r
653 .current-resizer-is-6 #comic-element-resizer-bottom-left {
\r
654 background-color: #f66;
\r
656 #comic-element-resizer-bottom-right {
\r
660 .current-resizer-is-7 #comic-element-resizer-bottom-right {
\r
661 background-color: #f66;
\r
664 --------------------------------------------------------------------------------------*/
\r
665 #panel-resizer-top,
\r
666 #panel-resizer-bottom {
\r
667 position: absolute;
\r
668 border: 1px outset #999;
\r
669 background-color: #eee;
\r
670 text-align: center;
\r
677 #panel-resizer-top {
\r
679 border-radius: 8px 8px 0 0;
\r
680 -o-border-radius: 8px 8px 0 0;
\r
681 -ms-border-radius: 8px 8px 0 0;
\r
682 -moz-border-radius: 8px 8px 0 0;
\r
683 -webkit-border-radius: 8px 8px 0 0;
\r
685 #panel-resizer-bottom {
\r
687 border-radius: 0 0 8px 8px;
\r
688 -o-border-radius: 0 0 8px 8px;
\r
689 -ms-border-radius: 0 0 8px 8px;
\r
690 -moz-border-radius: 0 0 8px 8px;
\r
691 -webkit-border-radius: 0 0 8px 8px;
\r
694 /* balloon-tail-mover
\r
695 --------------------------------------------------------------------------------------*/
\r
696 #balloon-tail-mover {
\r
697 position: absolute;
\r
700 font-size: 8px; /* ie */
\r
701 line-height: 8px; /* ie */
\r
702 border: 1px solid #333;
\r
703 background-color: #66f;
\r
704 margin: -5px 0 0 -5px;
\r
707 /* comic element console
\r
708 --------------------------------------------------------------------------------------*/
\r
709 #comic-element-consol-wrapper {
\r
710 position: absolute;
\r
712 #image-element-consol {
\r
716 #text-element-consol {
\r
721 #change-image-button,
\r
722 #layer-back-button,
\r
723 #layer-forward-button,
\r
724 #delete-image-button,
\r
726 #change-text-style-button,
\r
727 #hide-text-tail-button,
\r
729 #forward-text-button,
\r
730 #delete-text-button {
\r
731 text-indent: -9999px;
\r
736 background-image: url('/assets/sprite.gif');
\r
737 background-repeat: no-repeat;
\r
738 background-position: 0 0;
\r
741 #hide-text-tail-button {
\r
742 background-position: -30px -30px;
\r
744 #change-image-button,
\r
745 #change-text-style-button {
\r
746 background-position: -30px 0;
\r
748 #layer-back-button,
\r
749 #back-text-button {
\r
750 background-position: -60px 0;
\r
752 #layer-forward-button,
\r
753 #forward-text-button {
\r
754 background-position: -60px -30px;
\r
756 #delete-image-button,
\r
757 #delete-text-button {
\r
758 background-position: 0 -30px;
\r
761 .console-out #comic-element-consol-wrapper-when-out {
\r
763 background-color: #333;
\r
765 .console-out #comic-element-consol-tail {
\r
766 border-width: 0 5px 10px 5px;
\r
767 border-color: transparent transparent #333 transparent;
\r
768 _border-color: #fff #fff #333 #fff;
\r
769 border-style: solid;
\r
774 position: absolute;
\r
782 --------------------------------------------------------------------------------------*/
\r
784 text-align: center;
\r
786 position: absolute;
\r
795 display: table-cell;
\r
796 vertical-align: middle;
\r
800 .text-element table,
\r
801 .text-element tbody,
\r
809 text-align: center;
\r
810 vertical-align: middle;
\r
812 .text-element table {
\r
813 table-layout: fixed; /* ie6で上下中央にテキストがならない対処。固定レイアウトアルゴリズムになるので負荷を下げるらしい */
\r
817 --------------------------------------------------------------------------------------*/
\r
819 position: absolute;
\r
824 border-bottom: 1px solid #999;
\r
825 background-color: #fff;
\r
826 box-shadow: 1px 4px 9px #333;
\r
827 -moz-box-shadow: 1px 4px 9px #333;
\r
828 -webkit-box-shadow: 1px 4px 9px #333;
\r
829 filter: progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=120,strength=9);
\r
833 .window-close-button {
\r
838 text-align: center;
\r
840 padding-bottom: 6px;
\r
841 background-color: #333;
\r
843 .window-close-button {
\r
844 position: absolute;
\r
847 border-left: 1px solid #666;
\r
849 padding-right: 9px;
\r
850 border-radius: 0 8px 0 0;
\r
851 -o-border-radius: 0 8px 0 0;
\r
852 -ms-border-radius: 0 8px 0 0;
\r
853 -moz-border-radius: 0 8px 0 0;
\r
854 -webkit-border-radius: 0 8px 0 0;
\r
859 border-radius: 8px 8px 0 0;
\r
860 -o-border-radius: 8px 8px 0 0;
\r
861 -ms-border-radius: 8px 8px 0 0;
\r
862 -moz-border-radius: 8px 8px 0 0;
\r
863 -webkit-border-radius: 8px 8px 0 0;
\r
866 position: relative;
\r
867 border-right: 1px solid #999;
\r
868 border-left: 1px solid #aaa;
\r
869 *border-left: 1px solid #ccc;
\r
872 html>/**/body .window-body {
\r
873 border-left /***/: 1px solid #ccc\9;
\r
879 background-color: #333;
\r
880 position: absolute;
\r
884 .window-resize-button {
\r
885 position: absolute;
\r
888 background-image: url('/assets/sprite.gif');
\r
889 background-repeat: no-repeat;
\r
890 background-position: -70px -60px;
\r
894 text-indent: -9999px;
\r
895 text-align: center;
\r
900 --------------------------------------------------------------------------------------*/
\r
906 .sidenavi-item:link {
\r
908 border-bottom: 1px solid #666;
\r
910 text-decoration: none;
\r
913 .sidenavi-item:hover {
\r
914 background-color: #ccc;
\r
915 text-decoration: none;
\r
917 .sidenavi .current {
\r
918 background-color: #666;
\r
922 _position: relative; /* for ie6 */
\r
923 margin-left: 100px;
\r
924 padding: 1em 1em 2em 1em;
\r
930 /* Information Window
\r
931 --------------------------------------------------------------------------------------*/
\r
932 #comic-element-infomation {
\r
933 background-color: #fff;
\r
934 position: absolute;
\r
937 #comic-element-x, #comic-element-z,
\r
938 #comic-element-y, #comic-element-a,
\r
939 #comic-element-w, #comic-element-w-percent,
\r
940 #comic-element-h, #comic-element-h-percent {
\r
941 position: absolute;
\r
954 #comic-element-w-percent,
\r
955 #comic-element-h-percent {
\r
958 #comic-element-x, #comic-element-z {
\r
961 #comic-element-y, #comic-element-a {
\r
964 #comic-element-w, #comic-element-w-percent {
\r
967 #comic-element-h, #comic-element-h-percent {
\r
970 .comic-element-attribute-label {
\r
971 display: inline-block;
\r
975 text-align: center;
\r
978 .comic-element-attribute-value {
\r
983 #comic-element-z-value,
\r
984 #comic-element-a-value {
\r
987 #comic-element-w-percent-value,
\r
988 #comic-element-h-percent-value {
\r
992 #comic-element-keep-aspect {
\r
993 position: absolute;
\r
1000 border: 1px solid #ccc;
\r
1003 /* Background Window
\r
1004 --------------------------------------------------------------------------------------*/
\r
1006 #select-bg-pattern-button,
\r
1007 #reset-bg-pattern-button,
\r
1009 #select-bg-color-button,
\r
1010 #reset-bg-color-button {
\r
1011 position: absolute;
\r
1012 text-align: center;
\r
1018 box-shadow: 1px 2px 3px #000;
\r
1019 -moz-box-shadow: 1px 2px 3px #000;
\r
1020 -webkit-box-shadow: 1px 2px 3px #000;
\r
1028 #select-bg-pattern-button,
\r
1029 #reset-bg-pattern-button,
\r
1030 #select-bg-color-button,
\r
1031 #reset-bg-color-button {
\r
1032 border: 1px outset #666;
\r
1035 line-height: 20px;
\r
1037 #select-bg-pattern-button {
\r
1041 #reset-bg-pattern-button {
\r
1049 background-color: #66f;
\r
1051 #select-bg-color-button {
\r
1055 #reset-bg-color-button {
\r
1062 /* Tool-box Window
\r
1063 --------------------------------------------------------------------------------------*/
\r
1064 #toolbox-add-image-button,
\r
1065 #toolbox-add-text-button,
\r
1066 #toolbox-edit-bg-button,
\r
1067 #toolbox-switch-grid,
\r
1068 #toolbox-popup-help-button,
\r
1069 #toolbox-post-button {
\r
1070 position: absolute;
\r
1073 border: 1px outset #999;
\r
1075 line-height: 40px;
\r
1076 text-align: center;
\r
1078 background-color: #ccc;
\r
1079 border-radius: 8px;
\r
1080 -o-border-radius: 8px;
\r
1081 -ms-border-radius: 8px;
\r
1082 -moz-border-radius: 8px;
\r
1083 -webkit-border-radius: 8px;
\r
1085 #toolbox-add-image-button {
\r
1088 #toolbox-add-text-button {
\r
1091 #toolbox-edit-bg-button {
\r
1094 line-height: 30px;
\r
1096 #toolbox-switch-grid,
\r
1097 #toolbox-popup-help-button {
\r
1100 line-height: 30px;
\r
1102 #toolbox-switch-grid {
\r
1103 width: 45px !important;
\r
1105 #toolbox-popup-help-button {
\r
1106 width: 35px !important;
\r
1107 left: 65px !important;
\r
1110 #toolbox-post-button {
\r
1113 line-height: 50px;
\r
1117 --------------------------------------------------------------------------------------*/
\r
1121 position: absolute;
\r
1124 background-attachment: fixed;
\r
1125 background-repeat: repeat;
\r
1126 /* background-image: url('grid.gif'); grid用イメージはgrid使用時にjsで埋め込み */
\r