X-Git-Url: http://git.onelab.eu/?a=blobdiff_plain;f=plugins%2Fdebug_platform%2Fdebug_platform.css;fp=plugins%2Fdebug_platform%2Fdebug_platform.css;h=30a6a6702b3a03cad98331d11b1dad9cf1bc1d71;hb=3b9ad98d9a7010f02468c16f2b10da9a7356ac4b;hp=0000000000000000000000000000000000000000;hpb=75d3bceb8e1d168e83982f910a916aee3bab7981;p=unfold.git diff --git a/plugins/debug_platform/debug_platform.css b/plugins/debug_platform/debug_platform.css new file mode 100644 index 00000000..30a6a670 --- /dev/null +++ b/plugins/debug_platform/debug_platform.css @@ -0,0 +1,1017 @@ +*, html, body { + -webkit-font-smoothing: antialiased; +} + +html { + height: 100%; +} + +/* +body { + font-family: "Helvetica", "Arial", "FreeSans", "Verdana", "Tahoma", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", sans-serif; + background: #F6F6F6 url(../img/initializing.png) 50% 50% no-repeat; + overflow: hidden; + padding: 0; + margin: 0; + position: relative; + font-size: 14px; +} + +@media +(-webkit-min-device-pixel-ratio: 2), +(min-resolution: 192dpi) { + body { + background: #F6F6F6 url(../img/initializing@2x.png) 50% 50% no-repeat; + background-size: 186px 157px; + } +} +*/ + +body .CodeMirror * { + -webkit-font-smoothing: subpixel-antialiased; +} + +#show-result #sidebar, +#show-result #content { + transition: opacity .4s; + -moz-transition: opacity .4s; + -webkit-transition: opacity .4s; + -o-transition: opacity .4s; + -ms-transition: opacity .4s; + -webkit-transform: translateZ(0); + /*-moz-transform: translateZ(0);*/ + opacity: 0; +} + + +/* content + ================================================================ */ +#content { + margin: 14px 15px 0 232px; + position: relative; + background: #F6F6F6; + height: 96%; +} + +/* header + ================================================================ */ +#header { + height: 44px; + background: #3D6AA2; +} + +#branding { + float: left; + width: 200px; + padding: 0 7px 0 10px; + font-size: 10px; + color: #fff; +} + +#home { + display: block; + width: 200px; + height: 44px; + line-height: 44px; + background: transparent url(../img/logo.png) no-repeat 0 50%; + text-indent: 45px; + text-transform: uppercase; + color: #fff; + text-decoration: none; + font-size: 17px; + text-indent: -900em; +} + +@media +(-webkit-min-device-pixel-ratio: 2), +(min-resolution: 192dpi) { + #home { + background: transparent url(../img/logo@2x.png) no-repeat 0 50%; + background-size: 136px 23px; + } +} + +/* sidebar + ================================================================ */ +#sidebar { + padding: 0; + margin: 0; +/* font-size: 11px;*/ + width: 217px; + position: absolute; +/* top: 45px; + left: 0;*/ + background-color: #fff; + color: #444; + height: 100%; +} + + #sidebar h3 { + clear: both; + padding: 0; + font-size: 12px; + font-weight: bold; + } + + #sidebar input[type='text'], + #sidebar input[type='password'], + #sidebar textarea { + width: 186px; + padding: 7px 5px; + color: #626262; + font-family: "Helvetica", "Arial", "FreeSans", "Verdana", "Tahoma", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", sans-serif; + font-size: 1em; + background: #F6F6F6; + border: solid 1px #C0C0C0; + box-shadow: inset 0 1px 2px #e4e4e4; + border-radius: 2px; + outline: none; + } + + #sidebar input[type='text'].warning { + border: solid 1px #e58b85; + background: #f6e4e3; + } + + #sidebar textarea { + height: 40px; + } + + #sidebar a { + color: #4679BD; + } + + #sidebar p { + margin: 0 0 7px; + line-height: 160%; + } + + #sidebar select { + width: 100%; + margin: 3px 0; + } + + #sidebar pre, + #sidebar code { + padding: 0 2px; + font-family: "Monaco", "Andale Mono", "Lucida Console", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; + font-size: .9em; + background: #fffadb; + } + + #sidebar .element, + #sidebar .text { + margin: 0; + } + +/* + #sidebar label { + font-size: 11px; + } +*/ + #sidebar .element strong { + font-weight: bold; + } + + #sidebar .elementBody { + padding-top: 0; + border-top-style: none; + padding-bottom: 0; + border-bottom-style: none; + overflow: hidden; + opacity: 0; + height: 0; + } + + #sidebar .ebCont { + padding: 4px 8px 8px; + } + + #sidebar .ebCont h3 { + font-size: 1em; + padding: 4px 0 2px; + color: #888; + border-top: 1px solid #EEEFEE; + } + +#sidebar .selectPanel { + position: relative; + height: 54px; +} + + #sidebar .selectPanel .panelChoice, + #sidebar .selectPanel .selectFake { + width: 92px; + position: absolute; + } + + #sidebar .selectPanel .selectFake { + color: #999; + font-size: 1em; + line-height: 20px; + } + + .panelChoice.html { + top: 0; + left: 0; + } + + .panelChoice.css { + top: 0; + right: 0; + } + + .panelChoice.js { + bottom: 0; + left: 0; + } + + .panelChoice.result { + bottom: 0; + right: 0; + } + +#sidebar #id_title { +} + +#sidebar .toggler { + color: #333; + height: 36px; + line-height: 36px; + padding: 0 8px; + font-size: 13px; + font-weight: normal; + position: relative; +} + + #sidebar .toggler em { + color: #AEAEAE; + font-style: normal; + font-size: .8em; + position: absolute; + top: 10px; + right: 10px; + background: #f1f1f1; + height: 16px; + padding: 0 4px; + line-height: 16px; + border-radius: 2px; + } + + + #sidebar .toggler.active { + color: #333; + font-weight: bold; + } + + #sidebar .toggler.selected { + } + + #sidebar .toggler, + #sidebar .element a { + cursor: pointer; + text-decoration: none; + } + + #sidebar .element { + border-bottom: 1px solid #DFDFDF; + } + + #sidebar .element a:hover { + text-decoration: underline; + } + + + +#shell_settings li { + margin: 5px 0; +} + +#shell_settings li input { + margin-right: 3px; +} + +#sidebar-bottom { + margin: 10px 0 10px 3px; + +} + + #sidebar #share_links label, + #share_links_dropdown label { + display: block; + padding: 0 0 2px; + font-family: "Helvetica", "Arial", "FreeSans", "Verdana", "Tahoma", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", sans-serif; + font-size: 11px; + } + + #sidebar #share_links p, + #share_links_dropdown p { + margin: 0 0 7px; + } + + #share_links_dropdown input { + width: 190px; + padding: 7px 5px; + color: #626262; + font-family: "Helvetica", "Arial", "FreeSans", "Verdana", "Tahoma", "Lucida Sans", "Lucida Sans Unicode", "Luxi Sans", sans-serif; + font-size: 1em; + border: solid 1px #C0C0C0; + background: #F6F6F6; + box-shadow: inset 0 1px 2px #e4e4e4; + border-radius: 2px; + } + +.libraryTagAttributes { + padding: 5px 0 0; +} + +/* actions */ +#actions { + height: 44px; + font-size: 13px; +} + +#actions ul.actionCont { + float: left; +} + + #actions ul.right { + float: right; + } + + #actions li.actionItem { + float: left; + position: relative; + margin-right: 1px; + } + + #actions li.actionItem .aiButton, + #actions li.actionItem .aiButton span, + #actions ul.dropdown li.actionItem a.aiButton { + height: 44px; + } + + #actions li.actionItem a.aiButton { + display: block; + outline: none; + text-decoration: none; + color: #fff; + background: #355E95; + padding: 0 10px; + } + + #actions li.actionItem a.aiButton span { + line-height: 44px; + margin-right: 6px; + font-size: .85em; + } + + #actions li.noIcon a.aiButton span { + padding: 0 0 0 6px; + margin-right: 0; + } + + #actions li.actionItem #mobile.aiButton span { + margin-right: 0; + } + + #actions li.actionItem a.aiButton span.selected { + color: #555; + background: #fff; + } + + + #actions ul.dropdown .dropdownCont li { + line-height: 26px; + } + + #actions ul.dropdown .dcWrapper a { + color: #4679BD; + text-decoration: none; + } + + #actions ul.dropdown .dcWrapper a:hover { + text-decoration: underline; + } + + #actions ul.dropdown .dropdownCont li a { + display: block; + text-decoration: none; + font-weight: bold; + } + + #actions ul.dropdown .dropdownCont li a span { + margin: 0 6px; + } + + #actions ul.dropdown .dropdownCont li a:hover { + background: #eee; + } + + #actions ul.collapsed li.actionItem { + } + + #actions ul.dropdown li.actionItem a.aiButton { + } + + #actions ul.dropdown li.actionItem a.aiButton span { + padding: 0 0 0 6px; + margin-right: 0; + } + + #actions #toggleSidebarUl { + position: absolute; + top: 0; + left: 165px; + margin-left: -40px; + } + + #actions #toggleSidebar { + border-width: 0px; + display: none; + outline: none; + text-decoration: none; + text-shadow: 0; + color: #ffffff; + font-weight: bold; + font-size: 12px; + background: transparent; + } + + #actions #toggleSidebar span { + text-indent: -999px; + padding: 0 8px; + width: 12px; + } + + #actions #showjscode { + display: none; + } + + #actions #collaborate sup { + background: rgba(0, 0, 0, 0.5); + border-radius: 2px; + vertical-align: middle; + opacity: 0.4; + font-size: .7em; + padding: 2px 3px; + text-transform: uppercase; + + } + +/* select link */ +#select_link { + background: transparent url(../img/sprites.png) no-repeat 0 -254px; + color: #fdfdfd; + float: right; + width: 229px; + height: 27px; + margin: 6px 10px 0; + font-size: 13px; + padding-left: 15px; + line-height: 27px; +} + +/* universal dropdown container + ================================================================ */ +div.dropdownCont { + position: absolute; + top: 44px; + right: -30px; + z-index: 200; + opacity: 0; + overflow: hidden; + padding: 0 30px 30px; +} + + div.dropdownCont div.dcWrapper { + background-color: #fff; + width: 200px; + padding: 10px; + margin: 0; + font-size: 13px; + box-shadow: 0 2px 30px rgba(0, 0, 0, 0.4); + } + + #actions div.dropdownCont div.dcWrapper ul li a { + font-weight: normal; + color: #4679BD; + padding: 0; + line-height: 22px; + } + + #actions div.dropdownCont div.dcWrapper ul li a:hover { + background: #fff; + } + +/* editor + ================================================================ */ +#content fieldset.column { + display: block; + height: 100%; + width: 50%; +} + +#content .window { + width: 100%; + border: 1px solid #C0C0C0; + box-shadow: inset 0 1px 2px #e4e4e4; +} + + #content .top { + height: 25%; + position: absolute; + top: -6px; + } + + #content .bottom { + height: 75%; + position: absolute; + bottom: -6px; + } + + #content .right { + position: absolute; + right: -5px; + } + + #content .left { + position: absolute; + left: -5px; + } + + #handler_vertical { + width: 8px; + height: 100%; + padding: 5px 0; + cursor: col-resize; + position: absolute; + top: -5px; + left: 0; + background: url(../img/handle-v.png) 3px 50% no-repeat; + + } + + .handler_horizontal { + width: 100%; + height: 8px; + padding: 0 1px; + cursor: row-resize; + position: absolute; + top: 0; + left: 0; + background: url(../img/handle-h.png) 50% 3px no-repeat; + } + + #content textarea, + #result iframe, + body.editbox { + min-width: 100px; + width: 100%; + height: 100%; + line-height: 15px; + font-family: "Monaco", "Andale Mono", "Lucida Console", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; + font-size: 12px; + } + + /* editors */ + #content textarea, + #content iframe { + background: #fff; + box-shadow: inset 0 1px 3px #E4E4E4; + border: 0 !important; + } + + /* resizing sets display to inline, this overrides */ + #content textarea { + display: block; + } + + .heyoffline_overlay { + z-index: 100; + } + + /* editor labels */ + .window_label { + border: solid 1px #F1F1F1; + background: #fff; + display: inline-block; + height: 22px; + padding: 0 6px; + line-height: 22px; + position: absolute; + top: 7px; + right: 6px; + text-align: center; + font-size: 12px; + color: #777; + border-radius: 1px; + z-index: 30; + } + + /* fullscreen */ + .fullscreen { + background: transparent url(../img/sprites.png) no-repeat -301px -320px; + display: block; + width: 31px; + height: 31px; + text-indent: -9999px; + z-index: 100; + position: absolute; + bottom: 6px; + right: 14px; + cursor: pointer; + } + + /* we want editors to fill up all the space available */ + .CodeMirror-wrapping { + width: 100%; + height: 100%; + } + + /* shim to cover iframes when dragging */ + .shim { + display: none; + width: 100%; + height: 100%; + z-index: 1; + position: absolute; + top: 0; + left: 0; + } + +/* external resources + ================================================================ */ +#sidebar #external-resources-form { + height: 30px; +} + + /* place resource button next to input */ + #sidebar #external-resources-form #external_resource { + padding-right: 0px; + width: 160px; + float: left; + height: 14px; + } + + /* custom style inputs/buttons */ + #sidebar #external-resources-form .submit, + #sidebar .submit { + border: none; + border: solid 1px #EDEDED; + float: right; + height: 28px; + width: 28px; + padding: 0; + line-height: 31px; + text-align: center; + outline: none; + color: #333; + } + + #sidebar #external-resources-form .submit:hover, + #sidebar .submit:hover { + text-decoration: none; + } + + #sidebar .commonButton { + width: 70%; + float: none; + display: block; + line-height: 28px; + text-align: center; + color: #555; + font-size: 12px; + margin-top: 5px; + } + + +/* share socially + ================================================================ */ +#share-social { + +} + + #share-social li { + } + + #actions .actionCont .dropdownCont #share-social a { + text-decoration: none; + margin-left: 5px; + display: inline; + } + + #actions .actionCont .dropdownCont #share-social a:hover { + text-decoration: underline; + } + + #share-social span { + color: #ccc; + } + +/* license text + ================================================================ */ +#documentation-info { + margin: 20px 8px 0; + color: #9A9A9A; +} + + #documentation-info p { + font-size: 1em; + } + + #documentation-info a { + text-decoration: none; + } + + #documentation-info a:hover { + text-decoration: underline; + } + + +/* style the external resources list + ================================================================ */ +#sidebar #external_resources_list { +} + + #sidebar #external_resources_list li { + padding: 5px 0 3px; + position: relative; + } + + #sidebar #external_resources_list li .filename { + } + + #sidebar #external_resources_list li .remove { + position: absolute; + top: 7px; + right: 0; + display: block; + text-indent: -9000em; + width: 10px; + height: 10px; + background: url(../img/remove-resources.png) -10px 50% no-repeat; + } + + #sidebar #external_resources_list li a.remove:hover { + background: url(../img/remove-resources.png) 0 50% no-repeat; + } + + #add_external_resource { + } + +/* info box + ================================================================ */ +#info { + background: #FEFFE5; + padding: 7px; + border: 1px solid #EBBA95; + font-size: 11px; + color: #C98657; + margin: 7px 8px 10px; + line-height: 130%; + text-shadow: 0 1px 0 #FFF7F4; + position: relative; + display: none; + + -moz-border-radius: 2px; + -webkit-border-radius: 2px; +} + + #info #info-close { + width: 10px; + height: 10px; + position: absolute; + top: 4px; + right: 4px; + text-indent: -900em; + display: block; + background: url(../img/info-close.png); + overflow: hidden; + } + + #info a { + font-weight: bold; + color: #C98657; + } + +/* modal window + ================================================================ */ +#modal { + display: none; +} + +.disqus_thread { + width: 600px; +} + + .disqus_thread .modalBody { + max-height: 500px; + min-height: 250px; + overflow: auto; + margin-bottom: 0 !important; + } + +.modal_jslint { + width: 500px; +} + +.modal_kbd { + width: 500px; +} + +.modal_confirmation { + width: 400px; +} + + .modal_jslint code, + .modal_Coffee .error, + .modal_jslint .evidence { + padding: 0 2px; + font-family: "Monaco", "Andale Mono", "Lucida Console", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; + font-size: .9em; + background: #fffadb; + } + + .modal_Coffee .error { + padding: 5px 10px; + } + + .modal_jslint #errors { + + } + + .modal_jslint #errors p { + margin: 2px 0; + } + + .modal_jslint p.evidence { + display: block; + margin-bottom: 10px !important; + } + + +.modalWrap { + padding: 10px; + background: #fff; + z-index: 300; + font-size: 1em; + transition-duration: 0.2s; + transition-property: webkit-transform opacity; + transform: scale(0.94); + + -webkit-transition-duration: 0.2s; + -webkit-transition-property: webkit-transform opacity; + -webkit-transform: scale(0.94); + + -moz-transition-duration: 0.2s; + -moz-transition-property: moz-transform opacity; + -moz-transform: scale(0.94); + + -o-transition-duration: 0.2s; + -o-transition-property: o-transform opacity; + -o-transform: scale(0.94); + + -ms-transition-duration: 0.2s; + -ms-transition-property: ms-transform opacity; + -ms-transform: scale(0.94); + + -webkit-transform: translateZ(0); + /*-moz-transform: translateZ(0);*/ + + opacity: 0; + box-shadow: 0 5px 50px rgba(0, 0, 0, 0.3); + border: solid 1px #ACB3B9; +} + +.modalWrap.show { + opacity: 1; + transform: scale(1.0); + -webkit-transform: scale(1.0); + -moz-transform: scale(1.0); + -o-transform: scale(1.0); + -ms-transform: scale(1.0); +} + + .modalWrap .modalHeading { + position: relative; + height: 50px; + } + + .modalWrap .modalHeading .close { + background: url(../img/modal/close.png) 0 0 no-repeat; + width: 15px; + height: 15px; + display: block; + position: absolute; + top: 8px; + right: 0; + text-indent: -9000em; + cursor: pointer; + } + + .modalWrap .modalHeading h3 { + font-size: 1.6em; + padding: 6px 0; + cursor: default; + } + + .modalWrap .modalBody { + position: relative; + } + + .modalWrap .modalBody strong { + font-weight: bold; + } + +legend { + display: none; +} + +.keyActions { + position: absolute; + bottom: 40px; + left: 8px; + display: block; + padding: 0 0 0 30px; + text-decoration: none; +} + + .keyActions:before { + content: '?'; + position: absolute; + top: -1px; + left: 0; + display: block; + border: solid 1px #ABABAB; + padding: 0 8px; + border-radius: 2px; + font-family: 'Lucida Grande'; + font-size: 10px; + color: #999; + } + +.keyActions:hover { + text-decoration: underline; +} + +#kbd { +} + + #kbd li { + padding: 10px 0; + border-bottom: solid 1px #E6E6E6; + } + + #kbd li:last-child { + padding: 10px 0 0; + border-bottom: none; + } + + #kbd kbd { + border: solid 1px #ABABAB; + font-size: 10px; + font-family: 'Lucida Grande'; + padding: 2px 3px; + border-radius: 3px; + color: #999; + } + + #kbd span { + padding-left: 10px; + } + +.warningTooltip { + position: absolute; + bottom: 0; + left: 0; + background: rgba(255, 234, 147, 0.9); + font-size: .85em; + line-height: 1.5em; + color: #6c5517; + width: 100%; + z-index: 100; +} + + .warningTooltip code, + .warningTooltip strong { + font-weight: bold; + } + + .warningTooltip li { + border-top: solid 1px #eddf97; + padding: 5px 8px; + } + +.gittip { + margin: 10px; + color: #949494; +} + +.gittip iframe { + border: 0; + margin: 0 0 0 5px; + padding: 0; + opacity: 0.6; + vertical-align: middle; +}