diff options
Diffstat (limited to 'WebContent/VAADIN/themes/valo/_debug.scss')
| -rw-r--r-- | WebContent/VAADIN/themes/valo/_debug.scss | 306 |
1 files changed, 306 insertions, 0 deletions
diff --git a/WebContent/VAADIN/themes/valo/_debug.scss b/WebContent/VAADIN/themes/valo/_debug.scss new file mode 100644 index 0000000000..f32d03d872 --- /dev/null +++ b/WebContent/VAADIN/themes/valo/_debug.scss @@ -0,0 +1,306 @@ +// TODO remove this file when debug window styles come directly from GWT module +$v-include-debug-styles: true !default; + +@if $v-include-debug-styles { + + .v-debug-console { + background: #fff; + opacity: .9; + border: 1px solid #000; + font-family: sans-serif; + } + .v-debug-console-caption { + background: #000; + border-bottom: 1px solid grey; + color: white; + font-weight: bold; + } + .v-debug-console-content { + font-size: x-small; + overflow: auto; + white-space: pre; + } + .v-debug-console-content input { + font-size: xx-small; + } + // Debug style + .v-app .invalidlayout, + .v-app .invalidlayout * { + background: #f99 !important; + } + + // NEW debug window + $mainbg: #fff; + $darkborder: #666; + $lightborder: #999; + $maincolor: #666; + $activecolor: #000; + + @font-face { + font-family: 'vdebugfont'; + src:url('fonts/font.eot'); + src:url('fonts/font.eot?#iefix') format('embedded-opentype'), + url('fonts/font.woff') format('woff'), + url('fonts/font.ttf') format('truetype'), + url('fonts/font.svg#fontawesome') format('svg'); + font-weight: normal; + font-style: normal; + } + + .v-debugwindow [data-icon]:before, + .v-debugwindow-menu [data-icon]:before { + font-family: 'vdebugfont'; + content: attr(data-icon); + speak: none; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + font-style: normal; + vertical-align: text-bottom; + } + + .v-debugwindow { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + + -moz-opacity: 0.8; + -webkit-opacity: 0.8; + opacity: 0.8; + color: $maincolor; + + font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif; + font-size: 13px; + + .v-debugwindow-handle { + position: absolute; + bottom: 0; + background-color: #fff; + -moz-opacity: 0; + -webkit-opacity: 0; + opacity: 0; + z-index: 1000; + } + .v-debugwindow-handle-sw { + width: 7px; + height: 7px; + } + .v-debugwindow-handle-se { + right: 0; + width: 14px; + height: 14px; + } + } + .v-debugwindow:hover { + -moz-opacity: 1; + -webkit-opacity: 1; + opacity: 1; + } + .v-debugwindow * { + font-size: inherit !important; + } + + .v-debugwindow-size0, .v-debugwindow-menu .v-debugwindow-button-size0 { + font-size: 10px; + } + .v-debugwindow-size1, .v-debugwindow-menu .v-debugwindow-button-size1 { + font-size: 13px; + } + .v-debugwindow-size2, .v-debugwindow-menu .v-debugwindow-button-size2 { + font-size: 16px; + } + + .v-debugwindow-head { + text-align: right; + background-color: transparent; + } + + .v-debugwindow-tabs { + display: inline-block; + background-color: $mainbg; + } + + .v-debugwindow-tab, .v-debugwindow-controls > * { + width: 2em; + border: none; + margin: 0; + line-height: 1.5em; + background-color: $mainbg; + color: $maincolor; + } + .v-debugwindow-tab { + position: relative; + top: 1px; + border-width: 1px 0 1px 1px; + border-style: solid; + border-color: $darkborder; + border-radius: 2px 2px 0 0; + } + .v-debugwindow-tab-selected { + color: $maincolor; + background-color: $mainbg; + border-bottom: 1px solid #fff; + } + + .v-debugwindow-controls { + position: relative; + top: 1px; + display: inline-block; + background-color: $mainbg; + border: 1px solid $darkborder; + border-radius: 2px 2px 0 0; + } + + .v-debugwindow-section-head { + text-align: left; + background-color: $mainbg; + border: 1px solid $darkborder; + border-bottom: 1px solid $lightborder; + + box-shadow: 0px 0px 7px 0 rgba(55,55,55,0.6); + + min-height: 1.5em; + line-height: 1.5em; + + padding-left: 5px; + } + + .v-debugwindow-button { + border: none; + background-color: transparent; + color: $maincolor; + } + .v-debugwindow-button:hover { + color: $activecolor; + text-decoration: underline; + } + .v-debugwindow-button-active { + color: $maincolor; + box-shadow: 1px 1px 3px 0 inset; + } + + .v-debugwindow-content { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + + box-shadow: 0px 0px 7px 0 rgba(55,55,55,0.6); + + background-color: $mainbg; + border: 1px solid $darkborder; + border-top: none; + } + + .v-debugwindow-menu { + background-color: $mainbg; + padding: 4px; + border: 1px solid $lightborder; + border-top: none; + + border-radius: 0 0 5px 5px; + + box-shadow: 0px 0px 7px 0 rgba(55,55,55,0.6); + } + .v-debugwindow-menu-content { + min-width: 100px; + } + .v-debugwindow-menu-content .v-debugwindow-button { + line-height: 22px; + } + .v-debugwindow-menu-content > div > .v-debugwindow-button { + width: 33%; + } + + // GLOBAL color every other row + .v-debugwindow-row { + display: table-row; + } + .v-debugwindow-row:nth-child(odd) { + background-color: rgba(0, 61, 255, 0.11); + } + .v-debugwindow-row > span { + display: table-cell; + padding: 4px; + } + + .v-debugwindow-row.SEVERE { + color: #550000; + background-color: #FFC5C5; + } + .v-debugwindow-row.WARNING { + background-color: #FFFF99; + } + .v-debugwindow-row.FINE { + color: lighten($maincolor, 5%); + } + .v-debugwindow-row.FINER { + color: lighten($maincolor, 10%); + } + .v-debugwindow-row.FINEST { + color: lighten($maincolor, 15%); + } + .v-debugwindow-row > span.caption { + color: #999; + text-align: right; + white-space: nowrap; + } + .v-debugwindow-row > span.value { + width: 100%; + } + + .v-debugwindow-selector > span.value { + width: 100%; + } + + .v-debugwindow-selector :hover { + background: rgba(255,32,32,0.5); + } + + // LOG + .v-debugwindow-log { + font-family: monospace; + + .v-debugwindow-reset { + color: #fff; + background-color: #4C92ED; + padding: 4px; + } + + .v-debugwindow-time { + text-align: right; + color: #999; + } + .v-debugwindow-message { + white-space: nowrap; + width: 100% + } + .v-debugwindow-message:hover { + white-space: normal; + word-wrap: break-word; + } + .v-debugwindow-message em { + background-color: #C4E6F8; + } + } + + // HIERARCHY + .v-debugwindow-hierarchy { + .v-debugwindow-info { + padding: 1em; + } + } + + + // NETWORK + .v-debugwindow-network { + .v-debugwindow-row { + display: block !important; + } + .v-debugwindow-row > span { + display: inline; + } + } + +} |