diff --git a/shahab/jquery/jquery-ui.css b/shahab/jquery/jquery-ui.css new file mode 100644 index 000000000..1ebcbc90e --- /dev/null +++ b/shahab/jquery/jquery-ui.css @@ -0,0 +1,1312 @@ +/*! jQuery UI - v1.12.1 - 2016-12-21 +* http://jqueryui.com +* Includes: draggable.css, core.css, resizable.css, selectable.css, sortable.css, accordion.css, autocomplete.css, menu.css, button.css, controlgroup.css, checkboxradio.css, datepicker.css, dialog.css, progressbar.css, selectmenu.css, slider.css, spinner.css, tabs.css, tooltip.css, theme.css +* To view and modify this theme, visit http://jqueryui.com/themeroller/?scope=&folderName=smoothness&cornerRadiusShadow=8px&offsetLeftShadow=-8px&offsetTopShadow=-8px&thicknessShadow=8px&opacityShadow=30&bgImgOpacityShadow=0&bgTextureShadow=flat&bgColorShadow=aaaaaa&opacityOverlay=30&bgImgOpacityOverlay=0&bgTextureOverlay=flat&bgColorOverlay=aaaaaa&iconColorError=cd0a0a&fcError=cd0a0a&borderColorError=cd0a0a&bgImgOpacityError=95&bgTextureError=glass&bgColorError=fef1ec&iconColorHighlight=2e83ff&fcHighlight=363636&borderColorHighlight=fcefa1&bgImgOpacityHighlight=55&bgTextureHighlight=glass&bgColorHighlight=fbf9ee&iconColorActive=454545&fcActive=212121&borderColorActive=aaaaaa&bgImgOpacityActive=65&bgTextureActive=glass&bgColorActive=ffffff&iconColorHover=454545&fcHover=212121&borderColorHover=999999&bgImgOpacityHover=75&bgTextureHover=glass&bgColorHover=dadada&iconColorDefault=888888&fcDefault=555555&borderColorDefault=d3d3d3&bgImgOpacityDefault=75&bgTextureDefault=glass&bgColorDefault=e6e6e6&iconColorContent=222222&fcContent=222222&borderColorContent=aaaaaa&bgImgOpacityContent=75&bgTextureContent=flat&bgColorContent=ffffff&iconColorHeader=222222&fcHeader=222222&borderColorHeader=aaaaaa&bgImgOpacityHeader=75&bgTextureHeader=highlight_soft&bgColorHeader=cccccc&cornerRadius=4px&fsDefault=1.1em&fwDefault=normal&ffDefault=Verdana%2CArial%2Csans-serif +* Copyright jQuery Foundation and other contributors; Licensed MIT */ + +.ui-draggable-handle { + -ms-touch-action: none; + touch-action: none; +} +/* Layout helpers +----------------------------------*/ +.ui-helper-hidden { + display: none; +} +.ui-helper-hidden-accessible { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} +.ui-helper-reset { + margin: 0; + padding: 0; + border: 0; + outline: 0; + line-height: 1.3; + text-decoration: none; + font-size: 100%; + list-style: none; +} +.ui-helper-clearfix:before, +.ui-helper-clearfix:after { + content: ""; + display: table; + border-collapse: collapse; +} +.ui-helper-clearfix:after { + clear: both; +} +.ui-helper-zfix { + width: 100%; + height: 100%; + top: 0; + left: 0; + position: absolute; + opacity: 0; + filter:Alpha(Opacity=0); /* support: IE8 */ +} + +.ui-front { + z-index: 100; +} + + +/* Interaction Cues +----------------------------------*/ +.ui-state-disabled { + cursor: default !important; + pointer-events: none; +} + + +/* Icons +----------------------------------*/ +.ui-icon { + display: inline-block; + vertical-align: middle; + margin-top: -.25em; + position: relative; + text-indent: -99999px; + overflow: hidden; + background-repeat: no-repeat; +} + +.ui-widget-icon-block { + left: 50%; + margin-left: -8px; + display: block; +} + +/* Misc visuals +----------------------------------*/ + +/* Overlays */ +.ui-widget-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; +} +.ui-resizable { + position: relative; +} +.ui-resizable-handle { + position: absolute; + font-size: 0.1px; + display: block; + -ms-touch-action: none; + touch-action: none; +} +.ui-resizable-disabled .ui-resizable-handle, +.ui-resizable-autohide .ui-resizable-handle { + display: none; +} +.ui-resizable-n { + cursor: n-resize; + height: 7px; + width: 100%; + top: -5px; + left: 0; +} +.ui-resizable-s { + cursor: s-resize; + height: 7px; + width: 100%; + bottom: -5px; + left: 0; +} +.ui-resizable-e { + cursor: e-resize; + width: 7px; + right: -5px; + top: 0; + height: 100%; +} +.ui-resizable-w { + cursor: w-resize; + width: 7px; + left: -5px; + top: 0; + height: 100%; +} +.ui-resizable-se { + cursor: se-resize; + width: 12px; + height: 12px; + right: 1px; + bottom: 1px; +} +.ui-resizable-sw { + cursor: sw-resize; + width: 9px; + height: 9px; + left: -5px; + bottom: -5px; +} +.ui-resizable-nw { + cursor: nw-resize; + width: 9px; + height: 9px; + left: -5px; + top: -5px; +} +.ui-resizable-ne { + cursor: ne-resize; + width: 9px; + height: 9px; + right: -5px; + top: -5px; +} +.ui-selectable { + -ms-touch-action: none; + touch-action: none; +} +.ui-selectable-helper { + position: absolute; + z-index: 100; + border: 1px dotted black; +} +.ui-sortable-handle { + -ms-touch-action: none; + touch-action: none; +} +.ui-accordion .ui-accordion-header { + display: block; + cursor: pointer; + position: relative; + margin: 2px 0 0 0; + padding: .5em .5em .5em .7em; + font-size: 100%; +} +.ui-accordion .ui-accordion-content { + padding: 1em 2.2em; + border-top: 0; + overflow: auto; +} +.ui-autocomplete { + position: absolute; + top: 0; + left: 0; + cursor: default; +} +.ui-menu { + list-style: none; + padding: 0; + margin: 0; + display: block; + outline: 0; +} +.ui-menu .ui-menu { + position: absolute; +} +.ui-menu .ui-menu-item { + margin: 0; + cursor: pointer; + /* support: IE10, see #8844 */ + list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"); +} +.ui-menu .ui-menu-item-wrapper { + position: relative; + padding: 3px 1em 3px .4em; +} +.ui-menu .ui-menu-divider { + margin: 5px 0; + height: 0; + font-size: 0; + line-height: 0; + border-width: 1px 0 0 0; +} +.ui-menu .ui-state-focus, +.ui-menu .ui-state-active { + margin: -1px; +} + +/* icon support */ +.ui-menu-icons { + position: relative; +} +.ui-menu-icons .ui-menu-item-wrapper { + padding-left: 2em; +} + +/* left-aligned */ +.ui-menu .ui-icon { + position: absolute; + top: 0; + bottom: 0; + left: .2em; + margin: auto 0; +} + +/* right-aligned */ +.ui-menu .ui-menu-icon { + left: auto; + right: 0; +} +.ui-button { + padding: .4em 1em; + display: inline-block; + position: relative; + line-height: normal; + margin-right: .1em; + cursor: pointer; + vertical-align: middle; + text-align: center; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + /* Support: IE <= 11 */ + overflow: visible; +} + +.ui-button, +.ui-button:link, +.ui-button:visited, +.ui-button:hover, +.ui-button:active { + text-decoration: none; +} + +/* to make room for the icon, a width needs to be set here */ +.ui-button-icon-only { + width: 2em; + box-sizing: border-box; + text-indent: -9999px; + white-space: nowrap; +} + +/* no icon support for input elements */ +input.ui-button.ui-button-icon-only { + text-indent: 0; +} + +/* button icon element(s) */ +.ui-button-icon-only .ui-icon { + position: absolute; + top: 50%; + left: 50%; + margin-top: -8px; + margin-left: -8px; +} + +.ui-button.ui-icon-notext .ui-icon { + padding: 0; + width: 2.1em; + height: 2.1em; + text-indent: -9999px; + white-space: nowrap; + +} + +input.ui-button.ui-icon-notext .ui-icon { + width: auto; + height: auto; + text-indent: 0; + white-space: normal; + padding: .4em 1em; +} + +/* workarounds */ +/* Support: Firefox 5 - 40 */ +input.ui-button::-moz-focus-inner, +button.ui-button::-moz-focus-inner { + border: 0; + padding: 0; +} +.ui-controlgroup { + vertical-align: middle; + display: inline-block; +} +.ui-controlgroup > .ui-controlgroup-item { + float: left; + margin-left: 0; + margin-right: 0; +} +.ui-controlgroup > .ui-controlgroup-item:focus, +.ui-controlgroup > .ui-controlgroup-item.ui-visual-focus { + z-index: 9999; +} +.ui-controlgroup-vertical > .ui-controlgroup-item { + display: block; + float: none; + width: 100%; + margin-top: 0; + margin-bottom: 0; + text-align: left; +} +.ui-controlgroup-vertical .ui-controlgroup-item { + box-sizing: border-box; +} +.ui-controlgroup .ui-controlgroup-label { + padding: .4em 1em; +} +.ui-controlgroup .ui-controlgroup-label span { + font-size: 80%; +} +.ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item { + border-left: none; +} +.ui-controlgroup-vertical .ui-controlgroup-label + .ui-controlgroup-item { + border-top: none; +} +.ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content { + border-right: none; +} +.ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content { + border-bottom: none; +} + +/* Spinner specific style fixes */ +.ui-controlgroup-vertical .ui-spinner-input { + + /* Support: IE8 only, Android < 4.4 only */ + width: 75%; + width: calc( 100% - 2.4em ); +} +.ui-controlgroup-vertical .ui-spinner .ui-spinner-up { + border-top-style: solid; +} + +.ui-checkboxradio-label .ui-icon-background { + box-shadow: inset 1px 1px 1px #ccc; + border-radius: .12em; + border: none; +} +.ui-checkboxradio-radio-label .ui-icon-background { + width: 16px; + height: 16px; + border-radius: 1em; + overflow: visible; + border: none; +} +.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon, +.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon { + background-image: none; + width: 8px; + height: 8px; + border-width: 4px; + border-style: solid; +} +.ui-checkboxradio-disabled { + pointer-events: none; +} +.ui-datepicker { + width: 17em; + padding: .2em .2em 0; + display: none; +} +.ui-datepicker .ui-datepicker-header { + position: relative; + padding: .2em 0; +} +.ui-datepicker .ui-datepicker-prev, +.ui-datepicker .ui-datepicker-next { + position: absolute; + top: 2px; + width: 1.8em; + height: 1.8em; +} +.ui-datepicker .ui-datepicker-prev-hover, +.ui-datepicker .ui-datepicker-next-hover { + top: 1px; +} +.ui-datepicker .ui-datepicker-prev { + left: 2px; +} +.ui-datepicker .ui-datepicker-next { + right: 2px; +} +.ui-datepicker .ui-datepicker-prev-hover { + left: 1px; +} +.ui-datepicker .ui-datepicker-next-hover { + right: 1px; +} +.ui-datepicker .ui-datepicker-prev span, +.ui-datepicker .ui-datepicker-next span { + display: block; + position: absolute; + left: 50%; + margin-left: -8px; + top: 50%; + margin-top: -8px; +} +.ui-datepicker .ui-datepicker-title { + margin: 0 2.3em; + line-height: 1.8em; + text-align: center; +} +.ui-datepicker .ui-datepicker-title select { + font-size: 1em; + margin: 1px 0; +} +.ui-datepicker select.ui-datepicker-month, +.ui-datepicker select.ui-datepicker-year { + width: 45%; +} +.ui-datepicker table { + width: 100%; + font-size: .9em; + border-collapse: collapse; + margin: 0 0 .4em; +} +.ui-datepicker th { + padding: .7em .3em; + text-align: center; + font-weight: bold; + border: 0; +} +.ui-datepicker td { + border: 0; + padding: 1px; +} +.ui-datepicker td span, +.ui-datepicker td a { + display: block; + padding: .2em; + text-align: right; + text-decoration: none; +} +.ui-datepicker .ui-datepicker-buttonpane { + background-image: none; + margin: .7em 0 0 0; + padding: 0 .2em; + border-left: 0; + border-right: 0; + border-bottom: 0; +} +.ui-datepicker .ui-datepicker-buttonpane button { + float: right; + margin: .5em .2em .4em; + cursor: pointer; + padding: .2em .6em .3em .6em; + width: auto; + overflow: visible; +} +.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { + float: left; +} + +/* with multiple calendars */ +.ui-datepicker.ui-datepicker-multi { + width: auto; +} +.ui-datepicker-multi .ui-datepicker-group { + float: left; +} +.ui-datepicker-multi .ui-datepicker-group table { + width: 95%; + margin: 0 auto .4em; +} +.ui-datepicker-multi-2 .ui-datepicker-group { + width: 50%; +} +.ui-datepicker-multi-3 .ui-datepicker-group { + width: 33.3%; +} +.ui-datepicker-multi-4 .ui-datepicker-group { + width: 25%; +} +.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header, +.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { + border-left-width: 0; +} +.ui-datepicker-multi .ui-datepicker-buttonpane { + clear: left; +} +.ui-datepicker-row-break { + clear: both; + width: 100%; + font-size: 0; +} + +/* RTL support */ +.ui-datepicker-rtl { + direction: rtl; +} +.ui-datepicker-rtl .ui-datepicker-prev { + right: 2px; + left: auto; +} +.ui-datepicker-rtl .ui-datepicker-next { + left: 2px; + right: auto; +} +.ui-datepicker-rtl .ui-datepicker-prev:hover { + right: 1px; + left: auto; +} +.ui-datepicker-rtl .ui-datepicker-next:hover { + left: 1px; + right: auto; +} +.ui-datepicker-rtl .ui-datepicker-buttonpane { + clear: right; +} +.ui-datepicker-rtl .ui-datepicker-buttonpane button { + float: left; +} +.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current, +.ui-datepicker-rtl .ui-datepicker-group { + float: right; +} +.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header, +.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { + border-right-width: 0; + border-left-width: 1px; +} + +/* Icons */ +.ui-datepicker .ui-icon { + display: block; + text-indent: -99999px; + overflow: hidden; + background-repeat: no-repeat; + left: .5em; + top: .3em; +} +.ui-dialog { + position: absolute; + top: 0; + left: 0; + padding: .2em; + outline: 0; +} +.ui-dialog .ui-dialog-titlebar { + padding: .4em 1em; + position: relative; +} +.ui-dialog .ui-dialog-title { + float: left; + margin: .1em 0; + white-space: nowrap; + width: 90%; + overflow: hidden; + text-overflow: ellipsis; +} +.ui-dialog .ui-dialog-titlebar-close { + position: absolute; + right: .3em; + top: 50%; + width: 20px; + margin: -10px 0 0 0; + padding: 1px; + height: 20px; +} +.ui-dialog .ui-dialog-content { + position: relative; + border: 0; + padding: .5em 1em; + background: none; + overflow: auto; +} +.ui-dialog .ui-dialog-buttonpane { + text-align: left; + border-width: 1px 0 0 0; + background-image: none; + margin-top: .5em; + padding: .3em 1em .5em .4em; +} +.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { + float: right; +} +.ui-dialog .ui-dialog-buttonpane button { + margin: .5em .4em .5em 0; + cursor: pointer; +} +.ui-dialog .ui-resizable-n { + height: 2px; + top: 0; +} +.ui-dialog .ui-resizable-e { + width: 2px; + right: 0; +} +.ui-dialog .ui-resizable-s { + height: 2px; + bottom: 0; +} +.ui-dialog .ui-resizable-w { + width: 2px; + left: 0; +} +.ui-dialog .ui-resizable-se, +.ui-dialog .ui-resizable-sw, +.ui-dialog .ui-resizable-ne, +.ui-dialog .ui-resizable-nw { + width: 7px; + height: 7px; +} +.ui-dialog .ui-resizable-se { + right: 0; + bottom: 0; +} +.ui-dialog .ui-resizable-sw { + left: 0; + bottom: 0; +} +.ui-dialog .ui-resizable-ne { + right: 0; + top: 0; +} +.ui-dialog .ui-resizable-nw { + left: 0; + top: 0; +} +.ui-draggable .ui-dialog-titlebar { + cursor: move; +} +.ui-progressbar { + height: 2em; + text-align: left; + overflow: hidden; +} +.ui-progressbar .ui-progressbar-value { + margin: -1px; + height: 100%; +} +.ui-progressbar .ui-progressbar-overlay { + background: url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw=="); + height: 100%; + filter: alpha(opacity=25); /* support: IE8 */ + opacity: 0.25; +} +.ui-progressbar-indeterminate .ui-progressbar-value { + background-image: none; +} +.ui-selectmenu-menu { + padding: 0; + margin: 0; + position: absolute; + top: 0; + left: 0; + display: none; +} +.ui-selectmenu-menu .ui-menu { + overflow: auto; + overflow-x: hidden; + padding-bottom: 1px; +} +.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup { + font-size: 1em; + font-weight: bold; + line-height: 1.5; + padding: 2px 0.4em; + margin: 0.5em 0 0 0; + height: auto; + border: 0; +} +.ui-selectmenu-open { + display: block; +} +.ui-selectmenu-text { + display: block; + margin-right: 20px; + overflow: hidden; + text-overflow: ellipsis; +} +.ui-selectmenu-button.ui-button { + text-align: left; + white-space: nowrap; + width: 14em; +} +.ui-selectmenu-icon.ui-icon { + float: right; + margin-top: 0; +} +.ui-slider { + position: relative; + text-align: left; +} +.ui-slider .ui-slider-handle { + position: absolute; + z-index: 2; + width: 1.2em; + height: 1.2em; + cursor: default; + -ms-touch-action: none; + touch-action: none; +} +.ui-slider .ui-slider-range { + position: absolute; + z-index: 1; + font-size: .7em; + display: block; + border: 0; + background-position: 0 0; +} + +/* support: IE8 - See #6727 */ +.ui-slider.ui-state-disabled .ui-slider-handle, +.ui-slider.ui-state-disabled .ui-slider-range { + filter: inherit; +} + +.ui-slider-horizontal { + height: .8em; +} +.ui-slider-horizontal .ui-slider-handle { + top: -.3em; + margin-left: -.6em; +} +.ui-slider-horizontal .ui-slider-range { + top: 0; + height: 100%; +} +.ui-slider-horizontal .ui-slider-range-min { + left: 0; +} +.ui-slider-horizontal .ui-slider-range-max { + right: 0; +} + +.ui-slider-vertical { + width: .8em; + height: 100px; +} +.ui-slider-vertical .ui-slider-handle { + left: -.3em; + margin-left: 0; + margin-bottom: -.6em; +} +.ui-slider-vertical .ui-slider-range { + left: 0; + width: 100%; +} +.ui-slider-vertical .ui-slider-range-min { + bottom: 0; +} +.ui-slider-vertical .ui-slider-range-max { + top: 0; +} +.ui-spinner { + position: relative; + display: inline-block; + overflow: hidden; + padding: 0; + vertical-align: middle; +} +.ui-spinner-input { + border: none; + background: none; + color: inherit; + padding: .222em 0; + margin: .2em 0; + vertical-align: middle; + margin-left: .4em; + margin-right: 2em; +} +.ui-spinner-button { + width: 1.6em; + height: 50%; + font-size: .5em; + padding: 0; + margin: 0; + text-align: center; + position: absolute; + cursor: default; + display: block; + overflow: hidden; + right: 0; +} +/* more specificity required here to override default borders */ +.ui-spinner a.ui-spinner-button { + border-top-style: none; + border-bottom-style: none; + border-right-style: none; +} +.ui-spinner-up { + top: 0; +} +.ui-spinner-down { + bottom: 0; +} +.ui-tabs { + position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */ + padding: .2em; +} +.ui-tabs .ui-tabs-nav { + margin: 0; + padding: .2em .2em 0; +} +.ui-tabs .ui-tabs-nav li { + list-style: none; + float: left; + position: relative; + top: 0; + margin: 1px .2em 0 0; + border-bottom-width: 0; + padding: 0; + white-space: nowrap; +} +.ui-tabs .ui-tabs-nav .ui-tabs-anchor { + float: left; + padding: .5em 1em; + text-decoration: none; +} +.ui-tabs .ui-tabs-nav li.ui-tabs-active { + margin-bottom: -1px; + padding-bottom: 1px; +} +.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor, +.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor, +.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor { + cursor: text; +} +.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor { + cursor: pointer; +} +.ui-tabs .ui-tabs-panel { + display: block; + border-width: 0; + padding: 1em 1.4em; + background: none; +} +.ui-tooltip { + padding: 8px; + position: absolute; + z-index: 9999; + max-width: 300px; +} +body .ui-tooltip { + border-width: 2px; +} + +/* Component containers +----------------------------------*/ +.ui-widget { + font-family: Verdana,Arial,sans-serif; + font-size: 1.1em; +} +.ui-widget .ui-widget { + font-size: 1em; +} +.ui-widget input, +.ui-widget select, +.ui-widget textarea, +.ui-widget button { + font-family: Verdana,Arial,sans-serif; + font-size: 1em; +} +.ui-widget.ui-widget-content { + border: 1px solid #d3d3d3; +} +.ui-widget-content { + border: 1px solid #aaaaaa; + background: #ffffff; + color: #222222; +} +.ui-widget-content a { + color: #222222; +} +.ui-widget-header { + border: 1px solid #aaaaaa; + background: #cccccc url("images/ui-bg_highlight-soft_75_cccccc_1x100.png") 50% 50% repeat-x; + color: #222222; + font-weight: bold; +} +.ui-widget-header a { + color: #222222; +} + +/* Interaction states +----------------------------------*/ +.ui-state-default, +.ui-widget-content .ui-state-default, +.ui-widget-header .ui-state-default, +.ui-button, + +/* We use html here because we need a greater specificity to make sure disabled +works properly when clicked or hovered */ +html .ui-button.ui-state-disabled:hover, +html .ui-button.ui-state-disabled:active { + border: 1px solid #d3d3d3; + background: #e6e6e6 url("images/ui-bg_glass_75_e6e6e6_1x400.png") 50% 50% repeat-x; + font-weight: normal; + color: #555555; +} +.ui-state-default a, +.ui-state-default a:link, +.ui-state-default a:visited, +a.ui-button, +a:link.ui-button, +a:visited.ui-button, +.ui-button { + color: #555555; + text-decoration: none; +} +.ui-state-hover, +.ui-widget-content .ui-state-hover, +.ui-widget-header .ui-state-hover, +.ui-state-focus, +.ui-widget-content .ui-state-focus, +.ui-widget-header .ui-state-focus, +.ui-button:hover, +.ui-button:focus { + border: 1px solid #999999; + background: #dadada url("images/ui-bg_glass_75_dadada_1x400.png") 50% 50% repeat-x; + font-weight: normal; + color: #212121; +} +.ui-state-hover a, +.ui-state-hover a:hover, +.ui-state-hover a:link, +.ui-state-hover a:visited, +.ui-state-focus a, +.ui-state-focus a:hover, +.ui-state-focus a:link, +.ui-state-focus a:visited, +a.ui-button:hover, +a.ui-button:focus { + color: #212121; + text-decoration: none; +} + +.ui-visual-focus { + box-shadow: 0 0 3px 1px rgb(94, 158, 214); +} +.ui-state-active, +.ui-widget-content .ui-state-active, +.ui-widget-header .ui-state-active, +a.ui-button:active, +.ui-button:active, +.ui-button.ui-state-active:hover { + border: 1px solid #aaaaaa; + background: #ffffff url("images/ui-bg_glass_65_ffffff_1x400.png") 50% 50% repeat-x; + font-weight: normal; + color: #212121; +} +.ui-icon-background, +.ui-state-active .ui-icon-background { + border: #aaaaaa; + background-color: #212121; +} +.ui-state-active a, +.ui-state-active a:link, +.ui-state-active a:visited { + color: #212121; + text-decoration: none; +} + +/* Interaction Cues +----------------------------------*/ +.ui-state-highlight, +.ui-widget-content .ui-state-highlight, +.ui-widget-header .ui-state-highlight { + border: 1px solid #fcefa1; + background: #fbf9ee url("images/ui-bg_glass_55_fbf9ee_1x400.png") 50% 50% repeat-x; + color: #363636; +} +.ui-state-checked { + border: 1px solid #fcefa1; + background: #fbf9ee; +} +.ui-state-highlight a, +.ui-widget-content .ui-state-highlight a, +.ui-widget-header .ui-state-highlight a { + color: #363636; +} +.ui-state-error, +.ui-widget-content .ui-state-error, +.ui-widget-header .ui-state-error { + border: 1px solid #cd0a0a; + background: #fef1ec url("images/ui-bg_glass_95_fef1ec_1x400.png") 50% 50% repeat-x; + color: #cd0a0a; +} +.ui-state-error a, +.ui-widget-content .ui-state-error a, +.ui-widget-header .ui-state-error a { + color: #cd0a0a; +} +.ui-state-error-text, +.ui-widget-content .ui-state-error-text, +.ui-widget-header .ui-state-error-text { + color: #cd0a0a; +} +.ui-priority-primary, +.ui-widget-content .ui-priority-primary, +.ui-widget-header .ui-priority-primary { + font-weight: bold; +} +.ui-priority-secondary, +.ui-widget-content .ui-priority-secondary, +.ui-widget-header .ui-priority-secondary { + opacity: .7; + filter:Alpha(Opacity=70); /* support: IE8 */ + font-weight: normal; +} +.ui-state-disabled, +.ui-widget-content .ui-state-disabled, +.ui-widget-header .ui-state-disabled { + opacity: .35; + filter:Alpha(Opacity=35); /* support: IE8 */ + background-image: none; +} +.ui-state-disabled .ui-icon { + filter:Alpha(Opacity=35); /* support: IE8 - See #6059 */ +} + +/* Icons +----------------------------------*/ + +/* states and images */ +.ui-icon { + width: 16px; + height: 16px; +} +.ui-icon, +.ui-widget-content .ui-icon { + background-image: url("images/ui-icons_222222_256x240.png"); +} +.ui-widget-header .ui-icon { + background-image: url("images/ui-icons_222222_256x240.png"); +} +.ui-state-hover .ui-icon, +.ui-state-focus .ui-icon, +.ui-button:hover .ui-icon, +.ui-button:focus .ui-icon { + background-image: url("images/ui-icons_454545_256x240.png"); +} +.ui-state-active .ui-icon, +.ui-button:active .ui-icon { + background-image: url("images/ui-icons_454545_256x240.png"); +} +.ui-state-highlight .ui-icon, +.ui-button .ui-state-highlight.ui-icon { + background-image: url("images/ui-icons_2e83ff_256x240.png"); +} +.ui-state-error .ui-icon, +.ui-state-error-text .ui-icon { + background-image: url("images/ui-icons_cd0a0a_256x240.png"); +} +.ui-button .ui-icon { + background-image: url("images/ui-icons_888888_256x240.png"); +} + +/* positioning */ +.ui-icon-blank { background-position: 16px 16px; } +.ui-icon-caret-1-n { background-position: 0 0; } +.ui-icon-caret-1-ne { background-position: -16px 0; } +.ui-icon-caret-1-e { background-position: -32px 0; } +.ui-icon-caret-1-se { background-position: -48px 0; } +.ui-icon-caret-1-s { background-position: -65px 0; } +.ui-icon-caret-1-sw { background-position: -80px 0; } +.ui-icon-caret-1-w { background-position: -96px 0; } +.ui-icon-caret-1-nw { background-position: -112px 0; } +.ui-icon-caret-2-n-s { background-position: -128px 0; } +.ui-icon-caret-2-e-w { background-position: -144px 0; } +.ui-icon-triangle-1-n { background-position: 0 -16px; } +.ui-icon-triangle-1-ne { background-position: -16px -16px; } +.ui-icon-triangle-1-e { background-position: -32px -16px; } +.ui-icon-triangle-1-se { background-position: -48px -16px; } +.ui-icon-triangle-1-s { background-position: -65px -16px; } +.ui-icon-triangle-1-sw { background-position: -80px -16px; } +.ui-icon-triangle-1-w { background-position: -96px -16px; } +.ui-icon-triangle-1-nw { background-position: -112px -16px; } +.ui-icon-triangle-2-n-s { background-position: -128px -16px; } +.ui-icon-triangle-2-e-w { background-position: -144px -16px; } +.ui-icon-arrow-1-n { background-position: 0 -32px; } +.ui-icon-arrow-1-ne { background-position: -16px -32px; } +.ui-icon-arrow-1-e { background-position: -32px -32px; } +.ui-icon-arrow-1-se { background-position: -48px -32px; } +.ui-icon-arrow-1-s { background-position: -65px -32px; } +.ui-icon-arrow-1-sw { background-position: -80px -32px; } +.ui-icon-arrow-1-w { background-position: -96px -32px; } +.ui-icon-arrow-1-nw { background-position: -112px -32px; } +.ui-icon-arrow-2-n-s { background-position: -128px -32px; } +.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; } +.ui-icon-arrow-2-e-w { background-position: -160px -32px; } +.ui-icon-arrow-2-se-nw { background-position: -176px -32px; } +.ui-icon-arrowstop-1-n { background-position: -192px -32px; } +.ui-icon-arrowstop-1-e { background-position: -208px -32px; } +.ui-icon-arrowstop-1-s { background-position: -224px -32px; } +.ui-icon-arrowstop-1-w { background-position: -240px -32px; } +.ui-icon-arrowthick-1-n { background-position: 1px -48px; } +.ui-icon-arrowthick-1-ne { background-position: -16px -48px; } +.ui-icon-arrowthick-1-e { background-position: -32px -48px; } +.ui-icon-arrowthick-1-se { background-position: -48px -48px; } +.ui-icon-arrowthick-1-s { background-position: -64px -48px; } +.ui-icon-arrowthick-1-sw { background-position: -80px -48px; } +.ui-icon-arrowthick-1-w { background-position: -96px -48px; } +.ui-icon-arrowthick-1-nw { background-position: -112px -48px; } +.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; } +.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; } +.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; } +.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; } +.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; } +.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; } +.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; } +.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; } +.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; } +.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; } +.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; } +.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; } +.ui-icon-arrowreturn-1-w { background-position: -64px -64px; } +.ui-icon-arrowreturn-1-n { background-position: -80px -64px; } +.ui-icon-arrowreturn-1-e { background-position: -96px -64px; } +.ui-icon-arrowreturn-1-s { background-position: -112px -64px; } +.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; } +.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; } +.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; } +.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; } +.ui-icon-arrow-4 { background-position: 0 -80px; } +.ui-icon-arrow-4-diag { background-position: -16px -80px; } +.ui-icon-extlink { background-position: -32px -80px; } +.ui-icon-newwin { background-position: -48px -80px; } +.ui-icon-refresh { background-position: -64px -80px; } +.ui-icon-shuffle { background-position: -80px -80px; } +.ui-icon-transfer-e-w { background-position: -96px -80px; } +.ui-icon-transferthick-e-w { background-position: -112px -80px; } +.ui-icon-folder-collapsed { background-position: 0 -96px; } +.ui-icon-folder-open { background-position: -16px -96px; } +.ui-icon-document { background-position: -32px -96px; } +.ui-icon-document-b { background-position: -48px -96px; } +.ui-icon-note { background-position: -64px -96px; } +.ui-icon-mail-closed { background-position: -80px -96px; } +.ui-icon-mail-open { background-position: -96px -96px; } +.ui-icon-suitcase { background-position: -112px -96px; } +.ui-icon-comment { background-position: -128px -96px; } +.ui-icon-person { background-position: -144px -96px; } +.ui-icon-print { background-position: -160px -96px; } +.ui-icon-trash { background-position: -176px -96px; } +.ui-icon-locked { background-position: -192px -96px; } +.ui-icon-unlocked { background-position: -208px -96px; } +.ui-icon-bookmark { background-position: -224px -96px; } +.ui-icon-tag { background-position: -240px -96px; } +.ui-icon-home { background-position: 0 -112px; } +.ui-icon-flag { background-position: -16px -112px; } +.ui-icon-calendar { background-position: -32px -112px; } +.ui-icon-cart { background-position: -48px -112px; } +.ui-icon-pencil { background-position: -64px -112px; } +.ui-icon-clock { background-position: -80px -112px; } +.ui-icon-disk { background-position: -96px -112px; } +.ui-icon-calculator { background-position: -112px -112px; } +.ui-icon-zoomin { background-position: -128px -112px; } +.ui-icon-zoomout { background-position: -144px -112px; } +.ui-icon-search { background-position: -160px -112px; } +.ui-icon-wrench { background-position: -176px -112px; } +.ui-icon-gear { background-position: -192px -112px; } +.ui-icon-heart { background-position: -208px -112px; } +.ui-icon-star { background-position: -224px -112px; } +.ui-icon-link { background-position: -240px -112px; } +.ui-icon-cancel { background-position: 0 -128px; } +.ui-icon-plus { background-position: -16px -128px; } +.ui-icon-plusthick { background-position: -32px -128px; } +.ui-icon-minus { background-position: -48px -128px; } +.ui-icon-minusthick { background-position: -64px -128px; } +.ui-icon-close { background-position: -80px -128px; } +.ui-icon-closethick { background-position: -96px -128px; } +.ui-icon-key { background-position: -112px -128px; } +.ui-icon-lightbulb { background-position: -128px -128px; } +.ui-icon-scissors { background-position: -144px -128px; } +.ui-icon-clipboard { background-position: -160px -128px; } +.ui-icon-copy { background-position: -176px -128px; } +.ui-icon-contact { background-position: -192px -128px; } +.ui-icon-image { background-position: -208px -128px; } +.ui-icon-video { background-position: -224px -128px; } +.ui-icon-script { background-position: -240px -128px; } +.ui-icon-alert { background-position: 0 -144px; } +.ui-icon-info { background-position: -16px -144px; } +.ui-icon-notice { background-position: -32px -144px; } +.ui-icon-help { background-position: -48px -144px; } +.ui-icon-check { background-position: -64px -144px; } +.ui-icon-bullet { background-position: -80px -144px; } +.ui-icon-radio-on { background-position: -96px -144px; } +.ui-icon-radio-off { background-position: -112px -144px; } +.ui-icon-pin-w { background-position: -128px -144px; } +.ui-icon-pin-s { background-position: -144px -144px; } +.ui-icon-play { background-position: 0 -160px; } +.ui-icon-pause { background-position: -16px -160px; } +.ui-icon-seek-next { background-position: -32px -160px; } +.ui-icon-seek-prev { background-position: -48px -160px; } +.ui-icon-seek-end { background-position: -64px -160px; } +.ui-icon-seek-start { background-position: -80px -160px; } +/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */ +.ui-icon-seek-first { background-position: -80px -160px; } +.ui-icon-stop { background-position: -96px -160px; } +.ui-icon-eject { background-position: -112px -160px; } +.ui-icon-volume-off { background-position: -128px -160px; } +.ui-icon-volume-on { background-position: -144px -160px; } +.ui-icon-power { background-position: 0 -176px; } +.ui-icon-signal-diag { background-position: -16px -176px; } +.ui-icon-signal { background-position: -32px -176px; } +.ui-icon-battery-0 { background-position: -48px -176px; } +.ui-icon-battery-1 { background-position: -64px -176px; } +.ui-icon-battery-2 { background-position: -80px -176px; } +.ui-icon-battery-3 { background-position: -96px -176px; } +.ui-icon-circle-plus { background-position: 0 -192px; } +.ui-icon-circle-minus { background-position: -16px -192px; } +.ui-icon-circle-close { background-position: -32px -192px; } +.ui-icon-circle-triangle-e { background-position: -48px -192px; } +.ui-icon-circle-triangle-s { background-position: -64px -192px; } +.ui-icon-circle-triangle-w { background-position: -80px -192px; } +.ui-icon-circle-triangle-n { background-position: -96px -192px; } +.ui-icon-circle-arrow-e { background-position: -112px -192px; } +.ui-icon-circle-arrow-s { background-position: -128px -192px; } +.ui-icon-circle-arrow-w { background-position: -144px -192px; } +.ui-icon-circle-arrow-n { background-position: -160px -192px; } +.ui-icon-circle-zoomin { background-position: -176px -192px; } +.ui-icon-circle-zoomout { background-position: -192px -192px; } +.ui-icon-circle-check { background-position: -208px -192px; } +.ui-icon-circlesmall-plus { background-position: 0 -208px; } +.ui-icon-circlesmall-minus { background-position: -16px -208px; } +.ui-icon-circlesmall-close { background-position: -32px -208px; } +.ui-icon-squaresmall-plus { background-position: -48px -208px; } +.ui-icon-squaresmall-minus { background-position: -64px -208px; } +.ui-icon-squaresmall-close { background-position: -80px -208px; } +.ui-icon-grip-dotted-vertical { background-position: 0 -224px; } +.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; } +.ui-icon-grip-solid-vertical { background-position: -32px -224px; } +.ui-icon-grip-solid-horizontal { background-position: -48px -224px; } +.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; } +.ui-icon-grip-diagonal-se { background-position: -80px -224px; } + + +/* Misc visuals +----------------------------------*/ + +/* Corner radius */ +.ui-corner-all, +.ui-corner-top, +.ui-corner-left, +.ui-corner-tl { + border-top-left-radius: 4px; +} +.ui-corner-all, +.ui-corner-top, +.ui-corner-right, +.ui-corner-tr { + border-top-right-radius: 4px; +} +.ui-corner-all, +.ui-corner-bottom, +.ui-corner-left, +.ui-corner-bl { + border-bottom-left-radius: 4px; +} +.ui-corner-all, +.ui-corner-bottom, +.ui-corner-right, +.ui-corner-br { + border-bottom-right-radius: 4px; +} + +/* Overlays */ +.ui-widget-overlay { + background: #aaaaaa; + opacity: .3; + filter: Alpha(Opacity=30); /* support: IE8 */ +} +.ui-widget-shadow { + -webkit-box-shadow: -8px -8px 8px #aaaaaa; + box-shadow: -8px -8px 8px #aaaaaa; +} diff --git a/shahab/scss/_alert.scss b/shahab/scss/_alert.scss new file mode 100644 index 000000000..704ba01e1 --- /dev/null +++ b/shahab/scss/_alert.scss @@ -0,0 +1,63 @@ +.alert { + text-align: $direction-start; + -moz-box-shadow: 0 1px 1px #fff inset; + -webkit-box-shadow: 0 1px 1px #fff inset; + box-shadow: 0 1px 1px #fff inset; + + @if $direction == rtl { + background-position: 99% 50%; + padding: 10px 35px 10px 10px; + } @else { + background-position: 10px 50%; + padding: 10px 10px 10px 10px; + } + + a { + text-decoration: underline; + } + + h1 { + border-bottom: 2px solid; + } +} + +.alert-primary { + color: #000; + background-color: #e8eef1; + background-image: none; + border-color: #3a6c7e; + + h1 { + border-color: #ffb10a; + } +} + +.alert-success { + color: #000; + background-color: #ebf8a4; + background-image: none; + border-color: #a2d246; + + h1 { + border-color: #0f0; + } +} + +.alert-danger { + color: #000; + background-color: pink; + background-image: none; + border-color: #333; + + h1 { + border-color: #f00; + } +} + +.result_query .alert { + margin-bottom: 0; + border-bottom: none !important; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + padding-bottom: 5px; +} diff --git a/shahab/scss/_breadcrumb.scss b/shahab/scss/_breadcrumb.scss new file mode 100644 index 000000000..b2f176d24 --- /dev/null +++ b/shahab/scss/_breadcrumb.scss @@ -0,0 +1,25 @@ +.breadcrumb { + padding-#{$direction-start}: 2.2em; + text-shadow: 0 1px 0 #000; +} + +.breadcrumb-item { + + .breadcrumb-comment { + padding-left: 0.5rem; + } + + .icon { + margin: 0; + } + + a { + color: #fff; + } +} + +.breadcrumb-comment { + color: #d6d6d6; + font-weight: bold; + font-style: italic; + text-shadow: none; +} diff --git a/shahab/scss/_buttons.scss b/shahab/scss/_buttons.scss new file mode 100644 index 000000000..31fbdf5fa --- /dev/null +++ b/shahab/scss/_buttons.scss @@ -0,0 +1,14 @@ +.btn-primary { + font-weight: $font-weight-bold; +} + +.btn-primary, +.btn-secondary { + border-color: #aaa; + text-shadow: 0 1px 0 #fff; + background-image: linear-gradient(#f8f8f8, #d8d8d8); + + &:hover { + background-image: linear-gradient(#fff, #ddd); + } +} diff --git a/shahab/scss/_card.scss b/shahab/scss/_card.scss new file mode 100644 index 000000000..ecbc5c6bb --- /dev/null +++ b/shahab/scss/_card.scss @@ -0,0 +1,120 @@ +.card { + margin-top: 2rem; + margin-bottom: 0.5rem; + + > .card-header + .card-body { + padding-top: 0; + } +} + +.card, +.card-footer { + @if $direction == rtl { + text-shadow: -1px 1px 2px #fff inset; + -moz-box-shadow: -1px 1px 2px #fff inset; + -webkit-box-shadow: -1px 1px 2px #fff inset; + box-shadow: -1px 1px 2px #fff inset; + } @else { + text-shadow: 1px 1px 2px #fff inset; + -moz-box-shadow: 1px 1px 2px #fff inset; + -webkit-box-shadow: 1px 1px 2px #fff inset; + box-shadow: 1px 1px 2px #fff inset; + } +} + +.card-header { + position: relative; + top: -1rem; + margin: 0 5px; + width: max-content; + max-width: 100%; + font-weight: bold; + padding: 5px 10px; + border: 1px solid #aaa; + font-size: 1em; + -moz-box-shadow: 3px 3px 15px #bbb; + -webkit-box-shadow: 3px 3px 15px #bbb; + box-shadow: 3px 3px 15px #bbb; + + &, + &:first-child { + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + border-radius: 2px; + } +} + +.card-footer { + color: $th-color; + background: $th-background; + padding: 0.5em; +} + +#maincontainer .card-header, +.accordion > .card > .card-header { + position: static; + width: auto; + margin: 0; + border: none; + + &:first-child { + @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0); + } +} + +#maincontainer { + .card { + background-color: $navi-background; + border: $card-border-width solid #999; + + @if $direction == rtl { + -moz-box-shadow: -2px 2px 5px #ccc; + -webkit-box-shadow: -2px 2px 5px #ccc; + box-shadow: -2px 2px 5px #ccc; + } @else { + -moz-box-shadow: 2px 2px 5px #ccc; + -webkit-box-shadow: 2px 2px 5px #ccc; + box-shadow: 2px 2px 5px #ccc; + } + + > .card-header + .card-body { + padding-top: $card-spacer-x; + } + } + + .card-header { + padding: 0.1em $card-spacer-x; + background-color: #bbb; + color: #fff; + font-size: 1.6em; + font-weight: normal; + text-shadow: 0 1px 0 #777; + -moz-box-shadow: 1px 1px 15px #999 inset; + -webkit-box-shadow: 1px 1px 15px #999 inset; + box-shadow: 1px 1px 15px #999 inset; + } +} + +.accordion { + > .card { + margin-top: 0; + margin-bottom: 0; + + > .card-header { + background-color: inherit; + box-shadow: none; + + .btn { + color: #235a81; + + &:active { + box-shadow: none; + } + } + } + + .card-body { + background-color: #fff; + } + } +} diff --git a/shahab/scss/_codemirror.scss b/shahab/scss/_codemirror.scss new file mode 100644 index 000000000..abd2cadf6 --- /dev/null +++ b/shahab/scss/_codemirror.scss @@ -0,0 +1,94 @@ +$textarea-cols: 40; +$textarea-rows: 15; + +.CodeMirror { + height: 20rem; + direction: ltr; +} + +#inline_editor_outer .CodeMirror { + height: ceil($textarea-rows * 0.4em); +} + +.insertRowTable .CodeMirror { + min-height: ceil($textarea-rows * 0.6em); + min-width: ceil($textarea-cols * 0.6em); + border: 1px solid #a9a9a9; +} + +#pma_console .CodeMirror-gutters { + background-color: initial; + border: none; +} + +span { + &.cm-keyword, + &.cm-statement-verb { + color: #909; + } + + &.cm-variable { + color: black; + } + + &.cm-comment { + color: #808000; + } + + &.cm-mysql-string { + color: #008000; + } + + &.cm-operator { + color: fuchsia; + } + + &.cm-mysql-word { + color: black; + } + + &.cm-builtin { + color: #f00; + } + + &.cm-variable-2 { + color: #f90; + } + + &.cm-variable-3 { + color: #00f; + } + + &.cm-separator { + color: fuchsia; + } + + &.cm-number { + color: teal; + } +} + +.autocomplete-column-name { + display: inline-block; +} + +.autocomplete-column-hint { + display: inline-block; + float: $direction-end; + color: #666; + margin-#{$direction-start}: 1em; +} + +.CodeMirror-hints { + z-index: 999; +} + +.CodeMirror-lint-tooltip { + z-index: 200; + font-family: inherit; + + code { + font-family: monospace; + font-weight: bold; + } +} diff --git a/shahab/scss/_common.scss b/shahab/scss/_common.scss new file mode 100644 index 000000000..359b8a1ed --- /dev/null +++ b/shahab/scss/_common.scss @@ -0,0 +1,3733 @@ +#page_content { + margin: 0 0.5em; +} + +.auth_config_tbl { + margin: 0 auto; +} + +h1 { + font-size: 140%; + font-weight: bold; +} + +h2 { + font-size: 2em; + font-weight: normal; + text-shadow: 0 1px 0 #fff; + padding: 10px 0 10px; + padding-#{$direction-start}: 3px; + color: #777; + + // Hiding icons in the page titles + img { + display: none; + } + + a img { + display: inline; + } +} + +.data { + margin: 0 0 12px; +} + +h3 { + font-weight: bold; + font-size: 1rem; +} + +a { + text-decoration: none; + color: #235a81; + cursor: pointer; + outline: none; + + &:link, + &:visited, + &:active { + text-decoration: none; + color: #235a81; + cursor: pointer; + outline: none; + } +} + +button.mult_submit, +.checkall_box + label { + text-decoration: none; + color: #235a81; + cursor: pointer; + outline: none; +} + +a:hover { + text-decoration: underline; + color: #235a81; +} + +button.mult_submit { + &:hover, + &:focus { + text-decoration: underline; + color: #235a81; + } +} + +.checkall_box + label:hover { + text-decoration: underline; + color: #235a81; +} + +#initials_table { + background: #f3f3f3; + border: 1px solid #aaa; + margin-bottom: 10px; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + border-radius: 5px; + + td { + padding: 8px !important; + } + + a { + border: 1px solid #aaa; + background-color: #fff; + padding: 4px 8px; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + border-radius: 5px; + background-image: linear-gradient(#fff, #e0e0e0); + + &.active { + border: 1px solid #666; + box-shadow: 0 0 2px #999; + background: linear-gradient(#bbb, #fff); + } + } +} + +dfn { + font-style: normal; + + &:hover { + font-style: normal; + cursor: help; + } +} + +.pma-table th { + font-weight: bold; + color: $th-color; + background: #f3f3f3; + background: linear-gradient(#fff, #ccc); +} + +a img { + border: 0; +} + +hr { + color: $main-color; + background-color: $main-color; + border: 0; + height: 1px; +} + +form { + padding: 0; + margin: 0; + display: inline; +} + +input, +select { + // Fix outline in Chrome + outline: none; +} + +input { + &[type=text], + &[type=password], + &[type=number], + &[type=date] { + border-radius: 2px; + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + background: white; + border: 1px solid #aaa; + color: #555; + padding: 4px; + } + + &:not(.form-control)[type=text], + &[type=password], + &:not(.form-control)[type=number], + &[type=date], + &:not(.form-check-input)[type=checkbox] { + margin: 6px; + } +} + +select:not(.form-control) { + margin: 6px; +} + +input { + &[type=text], + &[type=password], + &[type=number], + &[type=date] { + transition: all 0.2s; + -ms-transition: all 0.2s; + -webkit-transition: all 0.2s; + -moz-transition: all 0.2s; + } +} + +select { + transition: all 0.2s; + -ms-transition: all 0.2s; + -webkit-transition: all 0.2s; + -moz-transition: all 0.2s; + + &#sel-lang { + width: auto; + } +} + +input { + &[type=text][disabled], + &[type=password][disabled], + &[type=number][disabled], + &[type=date][disabled] { + background: #e8e8e8; + box-shadow: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; + + &:hover { + background: #e8e8e8; + box-shadow: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; + } + } +} + +select[disabled] { + background: #e8e8e8; + box-shadow: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; + + &:hover { + background: #e8e8e8; + box-shadow: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; + } +} + +input { + &[type=text] { + &:hover, + &:focus { + border: 1px solid #7c7c7c; + background: #fff; + } + } + + &[type=password] { + &:hover, + &:focus { + border: 1px solid #7c7c7c; + background: #fff; + } + } + + &[type=number] { + &:hover, + &:focus { + border: 1px solid #7c7c7c; + background: #fff; + } + } + + &[type=date] { + &:hover, + &:focus { + border: 1px solid #7c7c7c; + background: #fff; + } + } +} + +select:focus { + border: 1px solid #7c7c7c; + background: #fff; +} + +input { + &[type=text]:hover, + &[type=password]:hover, + &[type=number]:hover, + &[type=date]:hover { + box-shadow: 0 1px 3px #aaa; + -webkit-box-shadow: 0 1px 3px #aaa; + -moz-box-shadow: 0 1px 3px #aaa; + } +} + +textarea { + overflow: visible; + margin: 6px; + + &.char { + margin: 6px; + } + + &.charField { + width: 95%; + } +} + +.pma-table th.fillPage { + width: 80%; +} + +fieldset { + margin-top: 1em; + border-radius: 4px 4px 0 0; + -moz-border-radius: 4px 4px 0 0; + -webkit-border-radius: 4px 4px 0 0; + border: #aaa solid 1px; + padding: 0.5em; + background: #eee; + + @if $direction == rtl { + text-shadow: -1px 1px 2px #fff inset; + -moz-box-shadow: -1px 1px 2px #fff inset; + -webkit-box-shadow: -1px 1px 2px #fff inset; + box-shadow: -1px 1px 2px #fff inset; + } @else { + text-shadow: 1px 1px 2px #fff inset; + -moz-box-shadow: 1px 1px 2px #fff inset; + -webkit-box-shadow: 1px 1px 2px #fff inset; + box-shadow: 1px 1px 2px #fff inset; + } +} + +fieldset { + fieldset { + margin: 0.8em; + border: 1px solid #aaa; + background: #e8e8e8; + } + + legend { + font-weight: bold; + color: #444; + padding: 5px 10px; + border-radius: 2px; + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + border: 1px solid #aaa; + background-color: #fff; + max-width: 100%; + -moz-box-shadow: 3px 3px 15px #bbb; + -webkit-box-shadow: 3px 3px 15px #bbb; + box-shadow: 3px 3px 15px #bbb; + width: initial; + font-size: 1em; + } +} + +.some-margin { + margin: 1.5em; +} + +// buttons in some browsers (eg. Konqueror) are block elements, this breaks design +button { + display: inline; +} + +// 3.4 +.datatable { + table-layout: fixed; +} + +.pma-table { + border-collapse: collapse; + + caption, + th, + td { + padding: 0.1em 0.3em; + margin: 0.1em; + vertical-align: middle; + text-shadow: 0 1px 0 #fff; + touch-action: manipulation; + } +} + +.pma-table thead th { + border-#{$direction-end}: 1px solid #fff; +} + +.pma-table th { + text-align: $direction-start; +} + +img, +button { + vertical-align: middle; +} + +input { + &:not(.form-check-input)[type=checkbox], + &[type=radio] { + vertical-align: -11%; + } +} + +select { + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + border-radius: 2px; + border: 1px solid #bbb; + color: #333; + padding: 3px; + background: white; + + &:not(.form-control) { + margin: 6px; + } + + &[multiple] { + background: linear-gradient(#fff, #f2f2f2); + } +} + +/* classes */ +.clearfloat { + clear: both; +} + +.floatleft { + float: $direction-start; + margin-#{$direction-end}: 1em; +} + +.floatright { + float: $direction-end; +} + +.displayblock { + display: block; +} + +.pma-table { + &.nospacing { + border-spacing: 0; + } + + &.nopadding tr { + th, + td { + padding: 0; + } + } +} + +.pma-table th.left, +.pma-table td.left { + text-align: $direction-start; +} + +.pma-table th.right, +.pma-table td.right { + text-align: $direction-end; + padding-#{$direction-end}: 1em; +} + +.pma-table tr.vtop { + th, + td { + vertical-align: top; + } +} + +.pma-table th.vtop, +.pma-table td.vtop { + vertical-align: top; +} + +.pma-table tr.vmiddle { + th, + td { + vertical-align: middle; + } +} + +.pma-table th.vmiddle, +.pma-table td.vmiddle { + vertical-align: middle; +} + +.pma-table tr.vbottom { + th, + td { + vertical-align: bottom; + } +} + +.pma-table th.vbottom, +.pma-table td.vbottom { + vertical-align: bottom; +} + +.paddingtop { + padding-top: 1em; +} + +.separator { + color: #fff; + text-shadow: 0 1px 0 #000; +} + +div.tools { + padding: 0.2em; + + a { + color: #3a7ead !important; + } + + margin-top: 0; + margin-bottom: 0.5em; + // avoid a thick line since this should be used under another fieldset + border-top: 0; + text-align: $direction-end; + float: none; + clear: both; + -webkit-border-radius: 0 0 4px 4px; + -moz-border-radius: 0 0 4px 4px; + border-radius: 0 0 4px 5px; +} + +fieldset.tblFooters { + margin-top: 0; + margin-bottom: 0.5em; + // avoid a thick line since this should be used under another fieldset + border-top: 0; + text-align: $direction-end; + float: none; + clear: both; + -webkit-border-radius: 0 0 4px 4px; + -moz-border-radius: 0 0 4px 4px; + border-radius: 0 0 4px 4px; +} + +div.null_div { + height: 20px; + text-align: center; + font-style: normal; + min-width: 50px; +} + +fieldset { + .formelement { + float: $direction-start; + margin-#{$direction-end}: 0.5em; + // IE + white-space: nowrap; + } + + // revert for Gecko + div[class=formelement] { + white-space: normal; + } +} + +button.mult_submit { + border: none; + background-color: transparent; +} + +// odd items 1,3,5,7... +.pma-table tbody:first-of-type tr:nth-child(odd), +.pma-table tbody:first-of-type tr:nth-child(odd) th, +#table_index tbody:nth-of-type(odd) tr, +#table_index tbody:nth-of-type(odd) th { + background: #fff; +} + +// even items 2,4,6,8... +.pma-table tbody:first-of-type tr:nth-child(even), +.pma-table tbody:first-of-type tr:nth-child(even) th, +#table_index tbody:nth-of-type(even) tr, +#table_index tbody:nth-of-type(even) th { + background: #dfdfdf; +} + +// only one item +.pma-table tbody:first-of-type tr:only-child { + background: none; +} + +.pma-table tr { + text-align: $direction-start; + + th { + text-align: $direction-start; + } +} + +// marked table rows +.pma-table td.marked:not(.nomarker), +.pma-table tr.marked:not(.nomarker) td, +.pma-table tbody:first-of-type tr.marked:not(.nomarker) th, +.pma-table tr.marked:not(.nomarker) { + background: linear-gradient(#ced6df, #b6c6d7); + color: $browse-marker-color; +} + +// hovered items +.pma-table tbody:first-of-type tr:not(.nopointer):hover, +.pma-table tbody:first-of-type tr:not(.nopointer):hover th, +.hover:not(.nopointer) { + background: linear-gradient(#ced6df, #b6c6d7); + color: $browse-pointer-color; +} + +// hovered table rows +#table_index tbody:hover tr, +#table_index tbody:hover th, +#table_index tbody:hover td, +.pma-table tr.hover:not(.nopointer) th { + background: linear-gradient(#ced6df, #b6c6d7); + color: $browse-pointer-color; +} + +/** + * marks table rows/cells if the db field is in a where condition + */ +.condition { + border-color: $browse-marker-color !important; +} + +.pma-table th.condition { + border-width: 1px 1px 0 1px; + border-style: solid; +} + +.pma-table td.condition { + border-width: 0 1px 0 1px; + border-style: solid; +} + +.pma-table tr:last-child td.condition { + border-width: 0 1px 1px 1px; +} + +@if $direction == ltr { + // for first th which must have right border set (ltr only) + .before-condition { + border-#{$direction-end}: 1px solid $browse-marker-color; + } +} + +/** + * cells with the value NULL + */ +.pma-table td.null { + font-style: italic; + color: #7d7d7d; +} + +.pma-table table { + .valueHeader, + .value { + text-align: $direction-end; + white-space: normal; + } + + // IE doesnt handles 'pre' right + [class=value] { + white-space: normal; + } +} + +.value { + font-family: $font-family-monospace; +} + +.attention { + color: red; + font-weight: bold; +} + +.allfine { + color: green; +} + +img.lightbulb { + cursor: pointer; +} + +.pdflayout { + overflow: hidden; + clip: inherit; + background-color: #fff; + display: none; + border: 1px solid #000; + position: relative; +} + +.pdflayout_table { + background: #d3dce3; + color: #000; + overflow: hidden; + clip: inherit; + z-index: 2; + display: inline; + visibility: inherit; + cursor: move; + position: absolute; + font-size: 80%; + border: 1px dashed #000; +} + +// Doc links in SQL +.cm-sql-doc { + text-decoration: none; + border-bottom: 1px dotted #000; + color: inherit !important; +} + +// no extra space in table cells +.pma-table td .icon { + image-rendering: pixelated; + margin: 0; +} + +.selectallarrow { + margin-#{$direction-end}: 0.3em; + margin-#{$direction-start}: 0.6em; +} + +.with-selected { + margin-#{$direction-start}: 2em; +} + +// message boxes: error, confirmation +#pma_errors, +#pma_demo, +#pma_footer { + position: relative; + padding: 0 0.5em; +} + +.confirmation { + color: #000; + background-color: pink; +} + +.error { + border: 1px solid maroon !important; + padding: 0.27em; + color: #000; + background: pink; +} + +// end messageboxes + +.new_central_col { + width: 100%; +} + +.tblcomment { + font-size: 70%; + font-weight: normal; + color: #009; +} + +.tblHeaders { + font-weight: bold; + color: $th-color; + background: $th-background; +} + +div.tools, +.tblFooters { + font-weight: normal; + color: $th-color; + background: $th-background; +} + +.tblHeaders a { + &:link, + &:active, + &:visited { + color: #00f; + } +} + +div.tools a { + &:link, + &:visited, + &:active { + color: #00f; + } +} + +.tblFooters a { + &:link, + &:active, + &:visited { + color: #00f; + } +} + +.tblHeaders a:hover, +div.tools a:hover, +.tblFooters a:hover { + color: #f00; +} + +// forbidden, no privileges +.noPrivileges { + color: #f00; + font-weight: bold; +} + +// disabled text +.disabled { + color: #666; + + a { + &:link, + &:active, + &:visited { + color: #666; + } + + &:hover { + color: #666; + text-decoration: none; + } + } +} + +.pma-table tr.disabled td, +.pma-table td.disabled { + background-color: #f3f3f3; + color: #aaa; +} + +.nowrap { + white-space: nowrap; +} + +.pre_wrap { + white-space: pre-wrap; +} + +.pre_wrap br { + display: none; +} + +/** + * login form + */ +body#loginform { + margin: 1em 0 0 0; + text-align: center; + + h1, + a.logo { + display: block; + text-align: center; + } + + div.container { + text-align: $direction-start; + width: 30em; + margin: 0 auto; + } +} + +#login_form { + text-align: $direction-start; +} + +#login_form fieldset.tblFooters { + text-align: #{$direction-end}; +} + +div.container.modal_form { + margin: 0 auto; + width: 30em; + text-align: center; + background: #fff; + z-index: 999; +} + +div#modalOverlay { + position: fixed; + top: 0; + #{$direction-start}: 0; + height: 100%; + width: 100%; + background: #fff; + z-index: 900; +} + +div#userPermissionModal { + position: fixed; + bottom: 0; + left: 0; + right: 0; + margin: 0; + z-index: 1000; +} + +form.login { + input { + &[type=text], + &[type=password] { + box-sizing: border-box; + width: 14em; + } + } + + select { + box-sizing: border-box; + width: 14em; + } +} + +label.col-3.d-flex.align-items-center { + font-weight: bolder; +} + +.commented_column { + border-bottom: 1px dashed #000; +} + +.column_attribute { + font-size: 70%; +} + +.column_name { + font-size: 80%; + margin: 5px 2px; +} + +.central_columns_navigation { + padding: 1.5% 0 !important; +} + +.message_errors_found { + margin-top: 20px; +} + +.repl_gui_skip_err_cnt { + width: 30px; +} + +.font_weight_bold { + font-weight: bold; +} + +.color_gray { + color: gray; +} + +.max_height_400 { + max-height: 400px; +} + +.color_red { + color: red; +} + +.pma_sliding_message { + display: inline-block; +} + +li.last.database { + margin-bottom: 15px !important; +} + +/* specific elements */ + +ul.tabs { + font-weight: bold; + list-style-type: none; + margin: 0; + padding: 0; +} + +// default tab styles +.tabactive { + background: #fff !important; +} + +span { + &.caution { + color: #f00; + } + + &.success { + color: green; + } +} + +// zoom search +div#dataDisplay { + input, + select { + margin: 0; + margin-#{$direction-end}: 0.5em; + } + + th { + line-height: 2em; + } +} + +.pma-table { + &.calendar { + width: 100%; + + td { + text-align: center; + + a { + display: block; + + &:hover { + background-color: #cfc; + } + } + } + + th { + background-color: #d3dce3; + } + + td.selected { + background-color: #fc9; + } + } +} + +img.calendar { + border: none; +} + +form.clock { + text-align: center; +} + +// table stats +div#tablestatistics table { + float: $direction-start; + margin-bottom: 0.5em; + margin-#{$direction-end}: 1.5em; + margin-top: 0.5em; + min-width: 16em; +} + +// end table stats + +// Heading +#topmenucontainer { + padding-#{$direction-end}: 1em; + width: 100%; +} + +#page_nav_icons { + position: fixed; + top: 0; + #{$direction-end}: 0; + z-index: 99; + padding: $breadcrumb-padding-y $breadcrumb-padding-x; +} + +#page_settings_icon { + cursor: pointer; + display: none; +} + +#page_settings_modal, +#pma_navigation_settings { + display: none; +} + +#textSQLDUMP { + width: 95%; + height: 95%; + font-family: Consolas, "Courier New", Courier, monospace; + font-size: 110%; +} + +#TooltipContainer { + position: absolute; + z-index: 99; + width: 20em; + height: auto; + overflow: visible; + visibility: hidden; + background-color: #ffc; + color: #060; + border: 0.1em solid #000; + padding: 0.5em; +} + +// user privileges +#fieldset_add_user_login { + div.item { + display: flex; + align-items: center; + border-bottom: 1px solid silver; + padding-bottom: 0.3em; + margin-bottom: 0.3em; + } + + label { + float: $direction-start; + display: block; + width: 10em; + max-width: 100%; + text-align: $direction-end; + padding-#{$direction-end}: 0.5em; + margin-bottom: 0; + } + + input { + width: 12em; + clear: $direction-end; + max-width: 100%; + } + + span.options { + float: $direction-start; + display: block; + width: 12em; + max-width: 100%; + padding-#{$direction-end}: 0.5em; + + #select_pred_username, + #select_pred_hostname, + #select_pred_password { + width: 100%; + max-width: 100%; + } + + input { + width: auto; + } + } +} + +#fieldset_user_priv div.item { + float: $direction-start; + width: 9em; + max-width: 100%; + + div.item { + float: none; + } + + label { + white-space: nowrap; + } + + select { + width: 100%; + } +} + +#fieldset_user_global_rights fieldset, +#fieldset_user_group_rights fieldset { + float: $direction-start; +} + +#fieldset_user_global_rights > legend input { + margin-#{$direction-start}: 2em; +} +// end user privileges + +// serverstatus + +.linkElem:hover { + text-decoration: underline; + color: #235a81; + cursor: pointer; +} + +h3#serverstatusqueries span { + font-size: 60%; + display: inline; +} + +.buttonlinks { + float: $direction-end; + white-space: nowrap; +} + +// Also used for the variables page +fieldset#tableFilter { + padding: 0.1em 1em; +} + +div#serverStatusTabs { + margin-top: 1em; +} + +caption a.top { + float: $direction-end; +} + +div#serverstatusquerieschart { + float: $direction-start; + width: 500px; + height: 350px; + margin-#{$direction-end}: 50px; +} + +div { + &#serverstatus table { + tbody td.descr a, + .tblFooters a { + white-space: nowrap; + } + } + + &.liveChart { + clear: both; + min-width: 500px; + height: 400px; + padding-bottom: 80px; + } +} + +#addChartDialog input[type=text] { + margin: 0; + padding: 3px; +} + +div#chartVariableSettings { + border: 1px solid #ddd; + background-color: #e6e6e6; + margin-#{$direction-start}: 10px; +} + +table#chartGrid { + td { + padding: 3px; + margin: 0; + } + + div.monitorChart { + background: #ebebeb; + border: none; + } +} + +div.tabLinks { + float: $direction-start; + padding: 5px 0; + + a, + label { + margin-#{$direction-end}: 7px; + } + + .icon { + margin: -0.2em 0.3em 0 0; + } +} + +.popupContent { + display: none; + position: absolute; + border: 1px solid #ccc; + margin: 0; + padding: 3px; + background-color: #fff; + z-index: 2; + + @if $direction == rtl { + -moz-box-shadow: -2px 2px 3px #666; + -webkit-box-shadow: -2px 2px 3px #666; + box-shadow: -2px 2px 3px #666; + } @else { + -moz-box-shadow: 2px 2px 3px #666; + -webkit-box-shadow: 2px 2px 3px #666; + box-shadow: 2px 2px 3px #666; + } +} + +div { + &#logTable { + padding-top: 10px; + clear: both; + + table { + width: 100%; + } + } + + &#queryAnalyzerDialog { + min-width: 700px; + + div { + &.CodeMirror-scroll { + height: auto; + } + + &#queryProfiling { + height: 300px; + } + } + + td.explain { + width: 250px; + } + + table.queryNums { + display: none; + border: 0; + text-align: $direction-start; + } + } +} + +.smallIndent { + padding-#{$direction-start}: 7px; +} + +// end serverstatus + +// profiling + +div#profilingchart { + width: 850px; + height: 370px; + float: $direction-start; +} + +#profilingchart .jqplot-highlighter-tooltip { + top: auto !important; + #{$direction-start}: 11px; + bottom: 24px; +} + +// end profiling + +// table charting +#resizer { + border: 1px solid silver; +} + +// make room for the resize handle +#inner-resizer { + padding: 10px; +} + +.chartOption { + float: $direction-start; + margin-#{$direction-end}: 40px; +} + +// end table charting + +// querybox + +#togglequerybox { + margin: 0 10px; +} + +#serverstatus h3 { + margin: 15px 0; + font-weight: normal; + color: #999; + font-size: 1.7em; +} + +#sectionlinks { + margin-bottom: 15px; + padding: 16px; + background: #f3f3f3; + border: 1px solid #aaa; + border-radius: 5px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + box-shadow: 0 1px 1px #fff inset; + -webkit-box-shadow: 0 1px 1px #fff inset; + -moz-box-shadow: 0 1px 1px #fff inset; +} + +#sectionlinks a, +.buttonlinks a, +a.button { + font-weight: bold; + text-shadow: 0 1px 0 #fff; + margin-bottom: 7px; + margin-#{$direction-start}: 7px; + border: 1px solid #aaa; + padding: 7px; + color: #111 !important; + text-decoration: none; + background-color: #ddd; + white-space: nowrap; + border-radius: 20px; + -webkit-border-radius: 20px; + -moz-border-radius: 20px; + background-image: linear-gradient(#f8f8f8, #d8d8d8); + + &:hover { + background: linear-gradient(#fff, #ddd); + } +} + +textarea { + &#sqlquery { + width: 100%; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + border-radius: 4px; + border: 1px solid #aaa; + padding: 5px; + font-family: inherit; + } + + &#sql_query_edit { + height: 7em; + width: 95%; + display: block; + } +} + +// end querybox + +// main page + +#mysqlmaininformation, +#pmamaininformation { + float: $direction-start; + width: 49%; +} + +#maincontainer { + ul { + list-style-type: disc; + vertical-align: middle; + } + + li { + margin-bottom: 0.3em; + } +} + +#full_name_layer { + position: absolute; + padding: 2px; + margin-top: -3px; + z-index: 801; + border-radius: 3px; + border: solid 1px #888; + background: #fff; +} + +/* end main page */ + +/* iconic view for ul items */ + +li.no_bullets { + list-style-type: none !important; + margin-#{$direction-start}: -25px !important; //align with other list items which have bullets +} + +// end iconic view for ul items + +#body_browse_foreigners { + background: $navi-background; + margin: 0.5em 0.5em 0 0.5em; +} + +#bodythemes { + width: 500px; + margin: auto; + text-align: center; + + img { + border: 0.1em solid #000; + } + + a:hover img { + border: 0.1em solid red; + } +} + +#fieldset_select_fields { + float: $direction-start; +} + +#selflink { + clear: both; + display: block; + margin-top: 1em; + margin-bottom: 1em; + width: 98%; + margin-#{$direction-start}: 1%; + text-align: $direction-end; + border-top: 0.1em solid silver; +} + +#qbe_div_table_list, +#qbe_div_sql_query { + float: $direction-start; +} + +label.desc { + width: 30em; + float: $direction-start; + + sup { + position: absolute; + } +} + +kbd { + color: $main-color; + background-color: transparent; + box-shadow: none; +} + +code { + font-size: 1em; + color: $main-color; + + &.php { + display: block; + padding-#{$direction-start}: 1em; + margin-top: 0; + margin-bottom: 0; + max-height: 10em; + overflow: auto; + direction: ltr; + } + + &.sql { + display: block; + padding: 1em; + margin-top: 0; + margin-bottom: 0; + max-height: 10em; + overflow: auto; + direction: ltr; + } +} + +div.sqlvalidate { + display: block; + padding: 1em; + margin-top: 0; + margin-bottom: 0; + max-height: 10em; + overflow: auto; + direction: ltr; +} + +.result_query div.sqlOuter { + background: $bg-one; + text-align: $direction-start; +} + +#PMA_slidingMessage code.sql, +div.sqlvalidate { + background: $bg-one; +} + +textarea#partitiondefinition { + height: 3em; +} + +// for elements that should be revealed only via js +.hide { + display: none; +} + +#list_server { + list-style-type: none; + padding: 0; +} + +/** + * Progress bar styles + */ + +div { + &.upload_progress { + width: 400px; + margin: 3em auto; + text-align: center; + } + + &.upload_progress_bar_outer { + border: 1px solid #000; + width: 202px; + position: relative; + margin: 0 auto 1em; + color: $main-color; + + div.percentage { + position: absolute; + top: 0; + #{$direction-start}: 0; + width: 202px; + } + } + + &.upload_progress_bar_inner { + background-color: $navi-pointer-background; + width: 0; + height: 12px; + margin: 1px; + overflow: hidden; + color: $browse-marker-color; + position: relative; + + div.percentage { + top: -1px; + #{$direction-start}: -1px; + } + } + + &#statustext { + margin-top: 0.5em; + } +} + +table { + &#serverconnection_src_remote, + &#serverconnection_trg_remote, + &#serverconnection_src_local, + &#serverconnection_trg_local { + float: $direction-start; + } +} + +/** + * Validation error message styles + */ +input { + &[type=text].invalid_value, + &[type=password].invalid_value, + &[type=number].invalid_value, + &[type=date].invalid_value { + background: #fcc; + } +} + +select.invalid_value, +.invalid_value { + background: #fcc; +} + +/** + * Ajax notification styling + */ +.ajax_notification { + // The notification needs to be shown on the top of the page + top: 0; + position: fixed; + margin-top: 200px; + margin-#{$direction-end}: auto; + margin-bottom: 0; + margin-#{$direction-start}: auto; + // Keep a little space on the sides of the text + padding: 5px; + width: 350px; + // If this is not kept at a high z-index, the jQueryUI modal dialogs (z-index: 1000) might hide this + z-index: 1100; + text-align: center; + display: inline; + #{$direction-start}: 0; + #{$direction-end}: 0; + background-image: url("../img/ajax_clock_small.gif"); + background-repeat: no-repeat; + background-position: 2%; + border: 1px solid #e2b709; + background-color: #ffe57e; + border-radius: 5px; + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + box-shadow: 0 5px 90px #888; + -moz-box-shadow: 0 5px 90px #888; + -webkit-box-shadow: 0 5px 90px #888; +} + +#loading_parent { + /** Need this parent to properly center the notification division */ + position: relative; + width: 100%; +} + +/** + * Export and Import styles + */ + +.export_table_list_container { + display: inline-block; + max-height: 20em; + overflow-y: scroll; +} + +.export_table_select { + th { + text-align: center; + vertical-align: middle; + } + + .all { + font-weight: bold; + border-bottom: 1px solid black; + } +} + +.export_structure, +.export_data { + text-align: center; +} + +.export_table_name { + vertical-align: middle; +} + +.exportoptions { + h2 { + word-wrap: break-word; + } + + h3 { + border-bottom: 1px #999 solid; + font-size: 110%; + } +} + +.importoptions h3 { + border-bottom: 1px #999 solid; + font-size: 110%; +} + +.exportoptions ul, +.importoptions ul, +.format_specific_options ul { + list-style-type: none; + margin-bottom: 15px; +} + +.exportoptions li, +.importoptions li { + margin: 7px; +} + +.exportoptions label, +.importoptions label, +.exportoptions p, +.importoptions p { + margin: 5px; + float: none; +} + +#csv_options label.desc, +#ldi_options label.desc, +#latex_options label.desc, +#output label.desc { + float: $direction-start; + width: 15em; +} + +.exportoptions, +.importoptions { + margin: 20px 30px 30px; + margin-#{$direction-start}: 10px; + + #buttonGo { + float: $direction-end; + } +} + +.format_specific_options { + border: 1px solid #999; + margin: 7px 0; + padding: 3px; + + h3 { + margin: 10px 0 0; + margin-#{$direction-start}: 10px; + border: 0; + } +} + +p.desc { + margin: 5px; +} + +/** + * Export styles only + */ +select { + &#db_select, + &#table_select { + width: 400px; + } +} + +.export_sub_options { + margin: 20px 0 0; + margin-#{$direction-start}: 30px; + + h4 { + border-bottom: 1px #999 solid; + } + + li { + margin-bottom: 0; + + &.subgroup { + display: inline-block; + margin-top: 0; + } + } +} + +#export_refresh_form { + margin-#{$direction-start}: 20px; +} + +#export_back_button { + display: inline; +} + +#output_quick_export { + display: none; +} + +/** + * Import styles only + */ + +.importoptions #import_notification { + margin: 10px 0; + font-style: italic; +} + +input#input_import_file { + margin: 5px; +} + +input#import_merge { + margin: 0; +} + +.formelementrow { + margin: 5px 0 5px 0; +} + +#filterText { + vertical-align: baseline; +} + +#popup_background { + display: none; + position: fixed; + width: 100%; + height: 100%; + top: 0; + #{$direction-start}: 0; + background: #000; + z-index: 1000; + overflow: hidden; +} + +/** + * Table structure styles + */ +#fieldsForm ul.table-structure-actions { + margin: 0; + padding: 0; + list-style: none; + + li { + float: $direction-start; + // same as padding of "table td" + margin-#{$direction-end}: 0.3em; + } + + .submenu li { + padding: 0; + margin: 0; + + span { + padding: 0.3em; + margin: 0.1em; + } + } +} + +#tablestructure tbody label { + margin: 0.3rem 0; +} + +#structure-action-links a { + margin-#{$direction-end}: 1em; +} + +#addColumns input[type=radio] { + margin: 3px 0 0; + margin-#{$direction-start}: 1em; +} + +/** + * Indexes + */ +#index_frm { + .index_info { + input[type=text], + select { + width: 100%; + margin: 0; + box-sizing: border-box; + -ms-box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + } + + div { + padding: 0.2em 0; + } + + .label { + float: $direction-start; + min-width: 12em; + } + } + + .slider { + width: 10em; + margin: 0.6em; + float: $direction-start; + } + + .add_fields { + float: $direction-start; + + input { + margin-#{$direction-start}: 1em; + } + } + + input { + margin: 0; + } + + td { + vertical-align: middle; + } +} + +table#index_columns { + width: 100%; + + select { + width: 85%; + float: $direction-start; + } +} + +#move_columns_dialog { + div { + padding: 1em; + } + + ul { + list-style: none; + margin: 0; + padding: 0; + } + + li { + background: $th-background; + border: 1px solid #aaa; + color: $th-color; + font-weight: bold; + margin: 0.4em; + padding: 0.2em; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; + } +} + +// config forms +.config-form { + ul.tabs { + margin: 1.1em 0.2em 0; + list-style: none; + font-weight: bold; + padding-left: 10px; + + li { + float: $direction-start; + margin-bottom: -1px; + + a { + display: block; + margin: 0.1em 0.2em 0; + white-space: nowrap; + text-decoration: none; + border: 1px solid $bg-two; + border-bottom: 1px solid #aaa; + padding: 7px 10px; + -webkit-border-radius: 5px 5px 0 0; + -moz-border-radius: 5px 5px 0 0; + border-radius: 5px 5px 0 0; + background: #f2f2f2; + color: #555; + text-shadow: 0 1px 0 #fff; + + &:hover, + &:active { + background: #e5e5e5; + } + } + + &.active a { + background-color: #fff; + margin-top: 1px; + color: #000; + text-shadow: none; + border-color: #aaa; + border-bottom: 1px solid #fff; + } + } + } + + fieldset { + margin-top: 0; + padding: 0; + clear: both; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; + + p { + margin: 0; + padding: 0.5em; + background: #fff; + border-top: 0; + } + + // form error list + .errors { + margin: 0 -2px 1em; + padding: 0.5em 1.5em; + background: #fbead9; + border: 0 #c83838 solid; + border-width: 1px 0; + list-style: none; + font-family: $font-family-base; + font-size: small; + } + + // field error list + .inline_errors { + margin: 0.3em 0.3em 0.3em; + margin-#{$direction-start}: 0; + padding: 0; + list-style: none; + color: #9a0000; + font-size: small; + } + + .doc { + margin-#{$direction-start}: 1em; + } + + .disabled-notice { + margin-#{$direction-start}: 1em; + font-size: 80%; + text-transform: uppercase; + color: #e00; + cursor: help; + } + + th { + padding: 0.3em 0.3em 0.3em; + padding-#{$direction-start}: 0.5em; + text-align: $direction-start; + vertical-align: top; + background: transparent; + filter: none; + border-top: 1px $bg-two solid; + border-#{$direction-end}: none; + + small { + display: block; + font-weight: normal; + font-family: $font-family-base; + font-size: x-small; + color: #444; + } + } + + td { + padding-top: 0.3em; + padding-bottom: 0.3em; + vertical-align: top; + border-top: 1px $bg-two solid; + border-#{$direction-end}: none; + } + } + + legend { + display: none; + } + + .lastrow { + border-top: 1px #000 solid; + background: $th-background; + padding: 0.5em; + text-align: center; + + input { + font-weight: bold; + } + } + + span.checkbox { + padding: 2px; + display: inline-block; + + &.custom { + padding: 1px; + border: 1px #edec90 solid; + background: #ffc; + } + } + + // customized field + .custom { + background: #ffc; + } + + .field-error { + border-color: #a11 !important; + } + + input { + &[type=text], + &[type=password], + &[type=number] { + border: 1px #a7a6aa solid; + height: auto; + + &:focus { + border: 1px #6676ff solid; + background: #f7fbff; + } + } + } + + select, + textarea { + border: 1px #a7a6aa solid; + height: auto; + + &:focus { + border: 1px #6676ff solid; + background: #f7fbff; + } + } + + .field-comment-mark { + font-family: serif; + color: #007; + cursor: help; + padding: 0 0.2em; + font-weight: bold; + font-style: italic; + } + + .field-comment-warning { + color: #a00; + } + + // error list + dd { + margin-#{$direction-start}: 0.5em; + + &::before { + content: "\25B8 "; + } + } +} + +fieldset { + .group-header { + th { + background: $bg-two; + } + + + tr th { + padding-top: 0.6em; + } + } + + .group-field-1 th, + .group-header-2 th { + padding-#{$direction-start}: 1.5em; + } + + .group-field-2 th, + .group-header-3 th { + padding-#{$direction-start}: 3em; + } + + .group-field-3 th { + padding-#{$direction-start}: 4.5em; + } + + .disabled-field { + th { + color: #666; + background-color: #ddd; + + small { + color: #666; + background-color: #ddd; + } + } + + td { + color: #666; + background-color: #ddd; + } + } +} + +.click-hide-message { + cursor: pointer; +} + +.prefsmanage_opts { + margin-#{$direction-start}: 2em; +} + +#prefs_autoload { + margin-bottom: 0.5em; + margin-#{$direction-start}: 0.5em; +} + +input#auto_increment_opt { + width: min-content; +} + +#placeholder { + position: relative; + border: 1px solid #aaa; + float: $direction-end; + overflow: hidden; + width: 450px; + height: 300px; + + .button { + position: absolute; + cursor: pointer; + } + + div.button { + font-size: smaller; + color: #999; + background-color: #eee; + padding: 2px; + } +} + +.wrapper { + float: $direction-start; + margin-bottom: 1.5em; +} + +.toggleButton { + position: relative; + cursor: pointer; + font-size: 0.8em; + text-align: center; + line-height: 1.4em; + height: 1.55em; + overflow: hidden; + border-#{$direction-end}: 0.1em solid #888; + border-#{$direction-start}: 0.1em solid #888; + -webkit-border-radius: 0.3em; + -moz-border-radius: 0.3em; + border-radius: 0.3em; + + table, + td, + img { + padding: 0; + position: relative; + } + + .toggle-container { + position: absolute; + + td, + tr { + background: none !important; + } + } + + .toggleOn { + color: #fff; + padding: 0 1em; + text-shadow: 0 0 0.2em #000; + } + + .toggleOff { + padding: 0 1em; + } +} + +.doubleFieldset { + fieldset { + width: 48%; + float: $direction-start; + padding: 0; + + &.left { + margin-#{$direction-end}: 1%; + } + + &.right { + margin-#{$direction-start}: 1%; + } + } + + legend { + margin-#{$direction-start}: 1.5em; + } + + div.wrap { + padding: 1.5em; + } +} + +#table_name_col_no_outer { + margin-top: 45px; +} + +#table_name_col_no { + position: fixed; + top: 55px; + width: 100%; + background: #fff; +} + +#table_columns { + display: block; + overflow: auto; + + input { + &[type=text], + &[type=password], + &[type=number] { + width: 10em; + box-sizing: border-box; + -ms-box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + } + } + + select { + width: 10em; + box-sizing: border-box; + -ms-box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + } +} + +#openlayersmap { + width: 450px; + height: 300px; +} + +.placeholderDrag { + cursor: move; +} + +#left_arrow { + #{$direction-start}: 8px; + top: 26px; +} + +#right_arrow { + #{$direction-start}: 26px; + top: 26px; +} + +#up_arrow { + #{$direction-start}: 17px; + top: 8px; +} + +#down_arrow { + #{$direction-start}: 17px; + top: 44px; +} + +#zoom_in { + #{$direction-start}: 17px; + top: 67px; +} + +#zoom_world { + #{$direction-start}: 17px; + top: 85px; +} + +#zoom_out { + #{$direction-start}: 17px; + top: 103px; +} + +.colborder { + cursor: col-resize; + height: 100%; + margin-#{$direction-start}: -6px; + position: absolute; + width: 5px; +} + +.colborder_active { + border-#{$direction-end}: 2px solid #a44; +} + +.pma_table { + th.draggable span { + display: block; + overflow: hidden; + } +} + +.sticky { + position: -webkit-sticky; + position: sticky; + top: 60px; +} + +.pma_table { + td { + position: static; + } + + tbody td span { + display: block; + overflow: hidden; + + code span { + display: inline; + } + } + + th.draggable { + &.right span { + margin-#{$direction-end}: 0; + } + + span { + margin-#{$direction-end}: 10px; + } + } +} + +.modal-copy input { + display: block; + width: 100%; + margin-top: 1.5em; + padding: 0.3em 0; +} + +.cRsz { + position: absolute; +} + +.cCpy { + background: #333; + color: #fff; + font-weight: bold; + margin: 0.1em; + padding: 0.3em; + position: absolute; + text-shadow: -1px -1px #000; + -moz-box-shadow: 0 0 0.7em #000; + -webkit-box-shadow: 0 0 0.7em #000; + box-shadow: 0 0 0.7em #000; + -moz-border-radius: 0.3em; + -webkit-border-radius: 0.3em; + border-radius: 0.3em; +} + +.cPointer { + $height: 20px; + $width: 10px; + + height: $height; + width: $width; + margin-top: $height / -2; + margin-#{$direction-start}: $width / -2; + background: url("../img/col_pointer.png"); + position: absolute; +} + +.tooltip { + background: #333 !important; + opacity: 0.8 !important; + z-index: 9999; + border: 1px solid #000 !important; + -moz-border-radius: 0.3em !important; + -webkit-border-radius: 0.3em !important; + border-radius: 0.3em !important; + text-shadow: -1px -1px #000 !important; + font-size: 0.8em !important; + font-weight: bold !important; + padding: 1px 3px !important; + + * { + background: none !important; + color: #fff !important; + } +} + +.cDrop { + #{$direction-end}: 0; + position: absolute; + top: 0; +} + +.coldrop { + background: url("../img/col_drop.png"); + cursor: pointer; + height: 16px; + margin-top: 0.3em; + width: 16px; + + &:hover { + background-color: #999; + } +} + +.coldrop-hover { + background-color: #999; +} + +.cList { + background: #eee; + border: solid 1px #999; + position: absolute; + -moz-box-shadow: 0 0.2em 0.5em #333; + -webkit-box-shadow: 0 0.2em 0.5em #333; + box-shadow: 0 0.2em 0.5em #333; + margin-#{$direction-start}: 75%; + #{$direction-end}: 0; + width: max-content; + + .lDiv div { + padding: 0.2em 0.5em 0.2em; + padding-#{$direction-start}: 0.2em; + + &:hover { + background: #ddd; + cursor: pointer; + } + + input { + cursor: pointer; + } + } +} + +.showAllColBtn { + border-bottom: solid 1px #999; + border-top: solid 1px #999; + cursor: pointer; + font-size: 0.9em; + font-weight: bold; + padding: 0.35em 1em; + text-align: center; + + &:hover { + background: #ddd; + } +} + +.turnOffSelect { + -moz-user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; + user-select: none; +} + +.navigation { + margin: 0.8em 0; + border-radius: 5px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + background: linear-gradient(#eee, #ccc); + + td { + margin: 0; + padding: 0; + vertical-align: middle; + white-space: nowrap; + } + + input { + &[type=submit] { + background: none; + border: 0; + filter: none; + margin: 0; + padding: 0.8em 0.5em; + border-radius: 0; + -webkit-border-radius: 0; + -moz-border-radius: 0; + + &:hover { + color: #fff; + cursor: pointer; + text-shadow: none; + background: linear-gradient(#333, #555); + } + } + + &.edit_mode_active { + color: #fff; + cursor: pointer; + text-shadow: none; + background: linear-gradient(#333, #555); + } + } + + .btn-link { + color: $main-color; + + &:hover { + color: #fff; + background-image: linear-gradient(#333, #555); + text-decoration: none; + } + } + + select { + margin: 0 0.8em; + } +} + +.navigation_separator { + color: #999; + display: inline-block; + font-size: 1.5em; + text-align: center; + height: 1.4em; + width: 1.2em; + text-shadow: 1px 0 #fff; +} + +.cEdit { + margin: 0; + padding: 0; + position: absolute; + + input[type=text] { + background: #fff; + height: 100%; + margin: 0; + padding: 0; + } + + .edit_area { + background: #fff; + border: 1px solid #999; + min-width: 10em; + padding: 0.3em 0.5em; + + select, + textarea { + width: 97%; + } + } + + .cell_edit_hint { + color: #555; + font-size: 0.8em; + margin: 0.3em 0.2em; + } + + .edit_box { + overflow-x: hidden; + overflow-y: scroll; + padding: 0; + margin: 0; + } + + .edit_box_posting { + background: #fff url('../img/ajax_clock_small.gif') no-repeat $direction-end center; + padding-#{$direction-end}: 1.5em; + } + + .edit_area_loading { + background: #fff url("../img/ajax_clock_small.gif") no-repeat center; + height: 10em; + } + + .goto_link { + background: #eee; + color: #555; + padding: 0.2em 0.3em; + } +} + +.saving_edited_data { + background: url('../img/ajax_clock_small.gif') no-repeat $direction-start; + padding-#{$direction-start}: 20px; +} + +.relationalTable { + td { + vertical-align: top; + } + + select { + width: 125px; + margin-#{$direction-end}: 5px; + } +} + +// css for timepicker +.ui-timepicker-div { + .ui-widget-header { + margin-bottom: 8px; + } + + dl { + text-align: $direction-start; + + dt { + height: 25px; + margin-bottom: -25px; + } + + dd { + margin: 0 10px 10px 85px; + } + } + + td { + font-size: 90%; + } +} + +.ui-tpicker-grid-label { + background: none; + border: none; + margin: 0; + padding: 0; +} + +.ui-timepicker-rtl { + direction: rtl; + + dl { + text-align: right; + + dd { + margin: 0 65px 10px 10px; + } + } +} + +body .ui-widget { + font-size: 1em; +} + +body #ui-datepicker-div { + z-index: 9999 !important; +} + +.ui-dialog fieldset legend a { + color: #235a81; +} + +.ui-draggable { + z-index: 801; +} + +// over-riding jqplot-yaxis class +.jqplot-yaxis { + #{$direction-start}: 0 !important; + min-width: 25px; + width: auto; +} + +.jqplot-axis { + overflow: hidden; +} + +.report-data { + height: 13em; + overflow: scroll; + width: 570px; + border: solid 1px; + background: white; + padding: 2px; +} + +.report-description { + height: 10em; + width: 570px; +} + +div#page_content div { + &#tableslistcontainer { + margin-top: 1em; + + table.data { + border-top: 0.1px solid #eee; + } + } + + &.result_query { + margin-top: 1em; + } +} + +table.show_create { + margin-top: 1em; + + td { + border-#{$direction-end}: 1px solid #bbb; + } +} + +#alias_modal { + table { + width: 100%; + } + + label { + font-weight: bold; + } +} + +.ui-dialog { + position: fixed; +} + +.small_font { + font-size: smaller; +} + +// Console styles +#pma_console_container { + width: 100%; + position: fixed; + bottom: 0; + #{$direction-start}: 0; + z-index: 100; +} + +textarea { + resize: both; +} + +#pma_console { + position: relative; + margin-#{$direction-start}: $navi-width; + + .templates { + display: none; + } + + .mid_text { + vertical-align: middle; + } + + .toolbar { + position: relative; + background: #ccc; + border-top: solid 1px #aaa; + cursor: n-resize; + + span { + vertical-align: middle; + } + + &.collapsed { + cursor: default; + + &:not(:hover) { + display: inline-block; + border-top-right-radius: 3px; + border-#{$direction-end}: solid 1px #aaa; + } + + > .button { + display: none; + } + } + } + + .message span { + &.text, + &.action { + padding: 0 3px; + display: inline-block; + } + } + + .toolbar { + .button, + .text { + padding: 0 3px; + display: inline-block; + } + } + + .switch_button { + padding: 0 3px; + display: inline-block; + } + + .message span.action, + .toolbar .button, + .switch_button { + cursor: pointer; + } + + .message span.action:hover, + .toolbar .button:hover, + .switch_button:hover { + background: #ddd; + } + + .toolbar { + .button.active { + background: #ddd; + } + + .text { + font-weight: bold; + } + + .button, + .text { + margin-#{$direction-end}: 0.4em; + } + + .button, + .text { + float: $direction-end; + } + } + + .content { + overflow-x: hidden; + overflow-y: auto; + margin-bottom: -65px; + border-top: solid 1px #aaa; + background: #fff; + padding-top: 0.4em; + + &.console_dark_theme { + background: #000; + color: #fff; + + .CodeMirror-wrap { + background: #000; + color: #fff; + } + + .action_content { + color: #000; + } + + .message { + border-color: #373b41; + } + + .CodeMirror-cursor { + border-color: #fff; + } + + .cm-keyword { + color: #de935f; + } + } + } + + .message, + .query_input { + position: relative; + font-family: Monaco, Consolas, monospace; + cursor: text; + margin: 0 10px 0.2em 1.4em; + } + + .message { + border-bottom: solid 1px #ccc; + padding-bottom: 0.2em; + + &.expanded > .action_content { + position: relative; + } + + &::before { + #{$direction-start}: -0.7em; + position: absolute; + content: ">"; + } + } + + .query_input { + &::before { + left: -0.7em; + position: absolute; + content: ">"; + top: -2px; + } + + textarea { + width: 100%; + height: 4em; + resize: vertical; + } + } + + .message { + &:hover::before { + color: #7cf; + font-weight: bold; + } + + &.expanded::before { + content: "]"; + } + + &.welcome::before { + display: none; + } + + &.failed { + &::before, + &.expanded::before, + &:hover::before { + content: "="; + color: #944; + } + } + + &.pending::before { + opacity: 0.3; + } + + &.collapsed > .query { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + + &.expanded > .query { + display: block; + white-space: pre; + word-wrap: break-word; + } + + .text.targetdb, + &.collapsed .action.collapse, + &.expanded .action.expand { + display: none; + } + + .action { + &.requery, + &.profiling, + &.explain, + &.bookmark { + display: none; + } + } + + &.select .action { + &.profiling, + &.explain { + display: inline-block; + } + } + + &.history .text.targetdb, + &.successed .text.targetdb { + display: inline-block; + } + + &.history .action { + &.requery, + &.bookmark { + display: inline-block; + } + } + + &.bookmark .action { + &.requery, + &.bookmark { + display: inline-block; + } + } + + &.successed .action { + &.requery, + &.bookmark { + display: inline-block; + } + } + + .action_content { + position: absolute; + bottom: 100%; + background: #ccc; + border: solid 1px #aaa; + border-top-left-radius: 3px; + } + + &.bookmark .text.targetdb, + .text.query_time { + margin: 0; + display: inline-block; + } + + &.failed .text.query_time, + .text.failed { + display: none; + } + + &.failed .text.failed { + display: inline-block; + } + + .text { + background: #fff; + } + + &.collapsed { + > .action_content { + display: none; + } + + &:hover > .action_content { + display: block; + } + } + + .bookmark_label { + padding: 0 4px; + top: 0; + background: #369; + color: #fff; + border-radius: 3px; + + &.shared { + background: #396; + } + } + + &.expanded .bookmark_label { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + } + + .query_input { + position: relative; + } + + .mid_layer { + height: 100%; + width: 100%; + position: absolute; + top: 0; + background: #666; + display: none; + cursor: pointer; + z-index: 200; + } + + .card { + position: absolute; + width: 94%; + height: 100%; + min-height: 48px; + #{$direction-start}: 100%; + top: 0; + border-#{$direction-start}: solid 1px #999; + z-index: 300; + transition: $direction-start 0.2s; + -ms-transition: $direction-start 0.2s; + -webkit-transition: $direction-start 0.2s; + -moz-transition: $direction-start 0.2s; + + &.show { + #{$direction-start}: 6%; + box-shadow: -2px 1px 4px -1px #999; + } + } + + .button.hide, + .message span.text.hide { + display: none; + } +} + +#pma_bookmarks .content.add_bookmark, +#pma_console_options .content { + padding: 4px 6px; +} + +#pma_bookmarks .content.add_bookmark { + .options { + margin-#{$direction-start}: 1.4em; + padding-bottom: 0.4em; + margin-bottom: 0.4em; + border-bottom: solid 1px #ccc; + + button { + margin: 0 7px; + vertical-align: bottom; + } + } + + input[type=text] { + margin: 0; + padding: 2px 4px; + } +} + +#debug_console { + &.grouped .ungroup_queries { + display: inline-block; + } + + &.ungrouped { + .group_queries { + display: inline-block; + } + + .ungroup_queries, + .sort_count { + display: none; + } + } + + &.grouped .group_queries { + display: none; + } + + .count { + margin-#{$direction-end}: 8px; + } + + .show_trace .trace, + .show_args .args { + display: block; + } + + .hide_trace .trace, + .hide_args .args, + .show_trace .action.dbg_show_trace, + .hide_trace .action.dbg_hide_trace { + display: none; + } + + .traceStep { + &.hide_args .action.dbg_hide_args, + &.show_args .action.dbg_show_args { + display: none; + } + + &::after { + content: ""; + display: table; + clear: both; + } + } + + .trace.welcome::after, + .debug > .welcome::after { + content: ""; + display: table; + clear: both; + } + + .debug_summary { + float: $direction-start; + } + + .trace.welcome .time, + .traceStep .file, + .script_name { + float: $direction-end; + } + + .traceStep .args pre { + margin: 0; + } +} + +// Code mirror console style +.cm-s-pma { + .CodeMirror-code { + font-family: Monaco, Consolas, monospace; + + pre { + font-family: Monaco, Consolas, monospace; + } + } + + .CodeMirror-measure > pre, + .CodeMirror-code > pre, + .CodeMirror-lines { + padding: 0; + } + + &.CodeMirror { + resize: none; + height: auto; + width: 100%; + min-height: initial; + max-height: initial; + } + + .CodeMirror-scroll { + cursor: text; + } +} + +// PMA drop-improt style + +.pma_drop_handler { + display: none; + position: fixed; + top: 0; + #{$direction-start}: 0; + width: 100%; + background: rgba(0, 0, 0, 0.6); + height: 100%; + z-index: 999; + color: white; + font-size: 30pt; + text-align: center; + padding-top: 20%; +} + +.pma_sql_import_status { + display: none; + position: fixed; + bottom: 0; + #{$direction-end}: 25px; + width: 400px; + border: 1px solid #999; + background: #f3f3f3; + -moz-border-radius: 4px; + -webkit-border-radius: 4px; + border-radius: 4px; + + @if $direction == rtl { + -moz-box-shadow: -2px 2px 5px #ccc; + -webkit-box-shadow: -2px 2px 5px #ccc; + box-shadow: -2px 2px 5px #ccc; + } @else { + -moz-box-shadow: 2px 2px 5px #ccc; + -webkit-box-shadow: 2px 2px 5px #ccc; + box-shadow: 2px 2px 5px #ccc; + } + + h2 { + background-color: #bbb; + padding: 0.1em 0.3em; + margin-top: 0; + margin-bottom: 0; + color: #fff; + font-size: 1.6em; + font-weight: normal; + text-shadow: 0 1px 0 #777; + + @if $direction == rtl { + -moz-box-shadow: -1px 1px 15px #999 inset; + -webkit-box-shadow: -1px 1px 15px #999 inset; + box-shadow: -1px 1px 15px #999 inset; + } @else { + -moz-box-shadow: 1px 1px 15px #999 inset; + -webkit-box-shadow: 1px 1px 15px #999 inset; + box-shadow: 1px 1px 15px #999 inset; + } + } +} + +.pma_drop_result h2 { + background-color: #bbb; + padding: 0.1em 0.3em; + margin-top: 0; + margin-bottom: 0; + color: #fff; + font-size: 1.6em; + font-weight: normal; + text-shadow: 0 1px 0 #777; + + @if $direction == rtl { + -moz-box-shadow: -1px 1px 15px #999 inset; + -webkit-box-shadow: -1px 1px 15px #999 inset; + box-shadow: -1px 1px 15px #999 inset; + } @else { + -moz-box-shadow: 1px 1px 15px #999 inset; + -webkit-box-shadow: 1px 1px 15px #999 inset; + box-shadow: 1px 1px 15px #999 inset; + } +} + +.pma_sql_import_status { + div { + height: 270px; + overflow-y: auto; + overflow-x: hidden; + list-style-type: none; + + li { + padding: 8px 10px; + border-bottom: 1px solid #bbb; + color: rgb(148, 14, 14); + background: white; + + .filesize { + float: $direction-end; + } + } + } + + h2 { + .minimize { + float: $direction-end; + margin-#{$direction-end}: 5px; + padding: 0 10px; + } + + .close { + float: $direction-end; + margin-#{$direction-end}: 5px; + padding: 0 10px; + display: none; + } + + .minimize:hover, + .close:hover { + background: rgba(155, 149, 149, 0.78); + cursor: pointer; + } + } +} + +.pma_drop_result h2 .close:hover { + background: rgba(155, 149, 149, 0.78); + cursor: pointer; +} + +.pma_drop_file_status { + color: #235a81; + + span.underline:hover { + cursor: pointer; + text-decoration: underline; + } +} + +.pma_drop_result { + position: fixed; + top: 10%; + #{$direction-start}: 20%; + width: 60%; + background: white; + min-height: 300px; + z-index: 800; + -webkit-box-shadow: 0 0 15px #999; + border-radius: 10px; + cursor: move; + + h2 .close { + float: $direction-end; + margin-#{$direction-end}: 5px; + padding: 0 10px; + } +} + +.dependencies_box { + background-color: white; + border: 3px ridge black; +} + +#composite_index_list { + list-style-type: none; + list-style-position: inside; +} + +span.drag_icon { + display: inline-block; + background-image: url("../img/s_sortable.png"); + background-position: center center; + background-repeat: no-repeat; + width: 1em; + height: 3em; + cursor: move; +} + +.topmargin { + margin-top: 1em; +} + +meter { + &[value="1"]::-webkit-meter-optimum-value { + background: linear-gradient(white 3%, #e32929 5%, transparent 10%, #e32929); + } + + &[value="2"]::-webkit-meter-optimum-value { + background: linear-gradient(white 3%, #f60 5%, transparent 10%, #f60); + } + + &[value="3"]::-webkit-meter-optimum-value { + background: linear-gradient(white 3%, #ffd700 5%, transparent 10%, #ffd700); + } +} + +// styles for sortable tables created with tablesorter jquery plugin +.pma-table th { + &.header { + cursor: pointer; + color: #235a81; + + &:hover { + text-decoration: underline; + } + + .sorticon { + width: 16px; + height: 16px; + background-repeat: no-repeat; + background-position: right center; + display: inline-table; + vertical-align: middle; + float: $direction-end; + } + } + + &.headerSortUp .sorticon { + background-image: url("../img/s_desc.png"); + } + + &.headerSortDown { + &:hover .sorticon { + background-image: url("../img/s_desc.png"); + } + + .sorticon { + background-image: url("../img/s_asc.png"); + } + } + + &.headerSortUp:hover .sorticon { + background-image: url("../img/s_asc.png"); + } +} + +// end of styles of sortable tables + +// styles for jQuery-ui to support rtl languages +body .ui-dialog { + .ui-dialog-titlebar-close { + #{$direction-end}: 0.3em; + #{$direction-start}: initial; + } + + .ui-dialog-title { + float: $direction-start; + } + + .ui-dialog-buttonpane .ui-dialog-buttonset { + float: $direction-end; + } +} +// end of styles for jQuery-ui to support rtl languages + +/* templates/database/multi_table_query */ + +.multi_table_query_form { + .query-form__div--hide, + .query-form__tr--hide { + display: none; + } + + .query-form__fieldset--inline, + .query-form__select--inline { + display: inline; + } + + .query-form__tr--bg-none { + background: none; + } + + .query-form__input--wide { + width: 91%; + } + + .query-form__remove-column { + float: right; + color: red; + } + + .query-form__multi-sql-query { + float: left; + } +} + +// templates/database/designer +// side menu +#name-panel { + overflow: hidden; +} + +@media only screen and (max-width: 768px) { + ul { + &.tabs { + display: flex; + } + } + + .responsivetable { + overflow-x: auto; + } + + .sticky { + top: 0; + } + + body#loginform div.container { + width: 100%; + } + + .largescreenonly { + display: none; + } + + .width96 { + width: 96% !important; + } + + #page_nav_icons { + display: none; + } + + #table_name_col_no { + top: 62px; + } + + .tdblock tr td { + display: block; + } + + #table_columns { + margin-top: 60px; + + .tablesorter { + min-width: 100%; + } + } + + .doubleFieldset fieldset { + width: 98%; + } + + div#serverstatusquerieschart { + width: 100%; + height: 450px; + } + + .ui-dialog { + margin: 1%; + width: 95% !important; + } +} + +#tooltip_editor { + font-size: 12px; + background-color: #fff; + opacity: 0.95; + filter: alpha(opacity=95); + padding: 5px; +} + +#tooltip_font { + font-weight: bold; +} + +#selection_box { + z-index: 1000; + height: 205px; + position: absolute; + background-color: #87ceeb; + opacity: 0.4; + filter: alpha(opacity=40); + pointer-events: none; +} + +#filterQueryText { + vertical-align: baseline; +} + +.ui_tpicker_hour_slider, +.ui_tpicker_minute_slider, +.ui_tpicker_second_slider, +.ui_tpicker_millisec_slider, +.ui_tpicker_microsec_slider { + margin-left: 20px; + margin-top: 4px; + height: 0.75rem; +} + +// Extra large devices (large desktops, 1200px and up) +@include media-breakpoint-up(xl) { + div.tools { + text-align: #{$direction-start}; + } + + fieldset.tblFooters, + .tblFooters { + text-align: #{$direction-start}; + } +} diff --git a/shahab/scss/_designer.scss b/shahab/scss/_designer.scss new file mode 100644 index 000000000..0081fea77 --- /dev/null +++ b/shahab/scss/_designer.scss @@ -0,0 +1,512 @@ +$header-img: '../img/designer/Header.png'; +$header-linked-img: '../img/designer/Header_Linked.png'; +$minus-img: '../img/designer/minus.png'; +$plus-img: '../img/designer/plus.png'; +$direction-start-panel-button-img: '../img/designer/left_panel_butt.png'; +$top-panel-img: '../img/designer/top_panel.png'; +$small-tab-img: '../img/designer/small_tab.png'; +$frams1-img: '../img/designer/1.png'; +$frams2-img: '../img/designer/2.png'; +$frams3-img: '../img/designer/3.png'; +$frams4-img: '../img/designer/4.png'; +$frams5-img: '../img/designer/5.png'; +$frams6-img: '../img/designer/6.png'; +$frams7-img: '../img/designer/7.png'; +$frams8-img: '../img/designer/8.png'; +$resize-img: '../img/designer/resize.png'; + +/* Designer */ +.input_tab { + background-color: #a6c7e1; + color: #000; +} + +.content_fullscreen { + position: relative; + overflow: auto; +} + +#canvas_outer { + position: relative; + width: 100%; + display: block; +} + +#canvas { + background-color: #fff; + color: #000; +} + +canvas.designer { + display: inline-block; + overflow: hidden; + text-align: $direction-start; + + * { + behavior: url(#default#VML); + } +} + +.designer_tab { + background-color: #fff; + color: #000; + border-collapse: collapse; + border: 1px solid #aaa; + z-index: 1; + -moz-user-select: none; + + .header { + background-image: url($header-img); + background-repeat: repeat-x; + } +} + +.tab_zag { + text-align: center; + cursor: move; + padding: 1px; + font-weight: bold; +} + +.tab_zag_2 { + background-image: url($header-linked-img); + background-repeat: repeat-x; + text-align: center; + cursor: move; + padding: 1px; + font-weight: bold; +} + +.tab_field { + background: #fff; + color: #000; + cursor: default; + + &:hover { + background-color: #cfc; + color: #000; + background-repeat: repeat-x; + cursor: default; + } +} + +.tab_field_3 { + background-color: #ffe6e6 !important; + color: #000; + cursor: default; + + &:hover { + background-color: #cfc; + color: #000; + background-repeat: repeat-x; + cursor: default; + } +} + +#designer_hint { + white-space: nowrap; + position: absolute; + background-color: #9f9; + color: #000; + z-index: 3; + border: #0c6 solid 1px; + display: none; +} + +#designer_body #page_content { + margin: 0; +} + +.scroll_tab { + overflow: auto; + width: 100%; + height: 500px; +} + +.designer_Tabs { + cursor: default; + color: #05b; + white-space: nowrap; + text-decoration: none; + text-indent: 3px; + font-weight: bold; + margin-#{$direction-start}: 2px; + text-align: $direction-start; + background-color: #fff; + background-image: url($direction-start-panel-button-img); + border: #ccc solid 1px; + + &:hover { + cursor: default; + color: #05b; + background: #fe9; + text-indent: 3px; + font-weight: bold; + white-space: nowrap; + text-decoration: none; + border: #99f solid 1px; + text-align: $direction-start; + } +} + +.owner { + font-weight: normal; + color: #888; +} + +.option_tab { + padding-#{$direction-start}: 2px; + padding-#{$direction-end}: 2px; + width: 5px; +} + +.select_all { + vertical-align: top; + padding-#{$direction-start}: 2px; + padding-#{$direction-end}: 2px; + cursor: default; + width: 1px; + color: #000; + background-image: url($header-img); + background-repeat: repeat-x; +} + +.small_tab { + vertical-align: top; + background-color: #0064ea; + color: #fff; + background-image: url($small-tab-img); + cursor: default; + text-align: center; + font-weight: bold; + padding-#{$direction-start}: 2px; + padding-#{$direction-end}: 2px; + width: 1px; + text-decoration: none; + + &:hover { + vertical-align: top; + color: #fff; + background-color: #f96; + cursor: default; + padding-#{$direction-start}: 2px; + padding-#{$direction-end}: 2px; + text-align: center; + font-weight: bold; + width: 1px; + text-decoration: none; + } +} + +.small_tab_pref { + background-image: url($header-img); + background-repeat: repeat-x; + text-align: center; + width: 1px; + + &:hover { + vertical-align: top; + color: #fff; + background-color: #f96; + cursor: default; + text-align: center; + font-weight: bold; + width: 1px; + text-decoration: none; + } +} + +.butt { + border: #47a solid 1px; + font-weight: bold; + background-color: #fff; + color: #000; + vertical-align: baseline; +} + +.L_butt2_1 { + padding: 1px; + text-decoration: none; + vertical-align: middle; + cursor: default; + + &:hover { + padding: 0; + border: #09c solid 1px; + background: #fe9; + color: #000; + text-decoration: none; + vertical-align: middle; + cursor: default; + } +} + +/* --------------------------------------------------------------------------- */ +.bor { + width: 10px; + height: 10px; +} + +.frams1 { + background: url($frams1-img) no-repeat $direction-end bottom; +} + +.frams2 { + background: url($frams2-img) no-repeat $direction-start bottom; +} + +.frams3 { + background: url($frams3-img) no-repeat $direction-start top; +} + +.frams4 { + background: url($frams4-img) no-repeat $direction-end top; +} + +.frams5 { + background: url($frams5-img) repeat-x center bottom; +} + +.frams6 { + background: url($frams6-img) repeat-y $direction-start; +} + +.frams7 { + background: url($frams7-img) repeat-x top; +} + +.frams8 { + background: url($frams8-img) repeat-y $direction-end; +} + +#osn_tab { + position: absolute; + background-color: #fff; + color: #000; +} + +.designer_header { + background-color: #eaeef0; + color: #000; + text-align: center; + font-weight: bold; + margin: 0; + padding: 0; + background-image: url($top-panel-img); + background-position: top; + background-repeat: repeat-x; + border-#{$direction-end}: #999 solid 1px; + border-#{$direction-start}: #999 solid 1px; + height: 28px; + z-index: 101; + width: 100%; + position: fixed; + + a, + span { + display: block; + float: $direction-start; + margin: 3px 1px 4px; + height: 20px; + border: 1px dotted #fff; + } + + .M_bord { + display: block; + float: $direction-start; + margin: 4px; + height: 20px; + width: 2px; + } + + a { + &.first { + margin-#{$direction-end}: 1em; + } + + &.last { + margin-#{$direction-start}: 1em; + } + } +} + +a { + &.M_butt_Selected_down_IE, + &.M_butt_Selected_down { + border: 1px solid #c0c0bb; + background-color: #9f9; + color: #000; + + &:hover { + border: 1px solid #09c; + background-color: #fe9; + color: #000; + } + } + + &.M_butt:hover { + border: 1px solid #09c; + background-color: #fe9; + color: #000; + } +} + +#layer_menu { + z-index: 98; + position: relative; + float: $direction-end; + background-color: #eaeef0; + border: #999 solid 1px; + + &.left { + float: $direction-start; + } +} + +#layer_upd_relation { + position: absolute; + #{$direction-start}: 637px; + top: 224px; + z-index: 100; +} + +#layer_new_relation, +#designer_optionse { + position: absolute; + #{$direction-start}: 636px; + top: 85px; + z-index: 100; + width: 153px; +} + +#layer_menu_sizer { + background-image: url($resize-img); + cursor: ew-resize; + + .icon { + margin: 0; + } +} + +.panel { + position: fixed; + top: 60px; + #{$direction-end}: 0; + width: 350px; + max-height: 500px; + display: none; + overflow: auto; + padding-top: 34px; + z-index: 102; +} + +a { + &.trigger { + position: fixed; + text-decoration: none; + top: 60px; + #{$direction-end}: 0; + color: #fff; + padding: 10px 40px 10px 15px; + background: #333 url($plus-img) 85% 55% no-repeat; + border: 1px solid #444; + display: block; + z-index: 102; + + &:hover { + color: #080808; + background: #fff696 url($plus-img) 85% 55% no-repeat; + border: 1px solid #999; + } + } + + &.active.trigger { + background: #222 url($minus-img) 85% 55% no-repeat; + z-index: 999; + + &:hover { + background: #fff696 url($minus-img) 85% 55% no-repeat; + } + } +} + +.toggle_container .block { + background-color: #dbe4e8; + border-top: 1px solid #999; +} + +.history_table { + text-align: center; + cursor: pointer; + background-color: #dbe4e8; + + &:hover { + background-color: #99c; + } +} + +#ab { + min-width: 300px; + + .ui-accordion-content { + padding: 0; + } +} + +#box { + display: none; +} + +#foreignkeychk { + text-align: $direction-start; + cursor: pointer; +} + +.side-menu { + float: $direction-start; + position: fixed; + width: auto; + height: auto; + background: #efefef; + border: 1px solid grey; + overflow: hidden; + z-index: 50; + padding: 2px; + + &.right { + float: $direction-end; + #{$direction-end}: 0; + } + + .hide { + display: none; + } + + a { + display: block; + float: none; + overflow: hidden; + line-height: 1em; + } + + img, + .text { + float: $direction-start; + } +} + +#name-panel { + border-bottom: 1px solid grey; + text-align: center; + background: #efefef; + width: 100%; + font-size: 1.2em; + padding: 5px; + font-weight: bold; +} + +#container-form { + width: 100%; + position: absolute; + #{$direction-start}: 0; +} diff --git a/shahab/scss/_direction.scss b/shahab/scss/_direction.scss new file mode 100644 index 000000000..e656e4dc1 --- /dev/null +++ b/shahab/scss/_direction.scss @@ -0,0 +1,13 @@ +$direction: ltr !default; + +@if $direction != ltr and $direction != rtl { + $direction: ltr; +} + +$direction-start: left; +$direction-end: right; + +@if $direction == rtl { + $direction-start: right; + $direction-end: left; +} diff --git a/shahab/scss/_enum-editor.scss b/shahab/scss/_enum-editor.scss new file mode 100644 index 000000000..0697921b3 --- /dev/null +++ b/shahab/scss/_enum-editor.scss @@ -0,0 +1,71 @@ +/** + * ENUM/SET editor styles + */ +p.enum_notice { + margin: 5px 2px; + font-size: 80%; +} + +#enum_editor { + p { + margin-top: 0; + font-style: italic; + } + + .values { + width: 100%; + } + + .add { + width: 100%; + + td { + vertical-align: middle; + width: 50%; + padding: 0 0 0; + padding-#{$direction-start}: 1em; + } + } + + .values { + td.drop { + width: 1.8em; + cursor: pointer; + vertical-align: middle; + } + + input { + margin: 0.1em 0; + padding-#{$direction-end}: 2em; + width: 100%; + } + + img { + vertical-align: middle; + } + } + + input.add_value { + margin: 0; + margin-#{$direction-end}: 0.4em; + } +} + +#enum_editor_output textarea { + width: 100%; + float: $direction-end; + margin: 1em 0 0 0; +} + +/** + * ENUM/SET editor integration for the routines editor + */ +.enum_hint { + position: relative; + + a { + position: absolute; + #{$direction-start}: 81%; + bottom: 0.35em; + } +} diff --git a/shahab/scss/_forms.scss b/shahab/scss/_forms.scss new file mode 100644 index 000000000..da3ffced1 --- /dev/null +++ b/shahab/scss/_forms.scss @@ -0,0 +1,5 @@ +select#fieldsSelect, +textarea#sqlquery { + margin: 0; + height: 20rem; +} diff --git a/shahab/scss/_gis.scss b/shahab/scss/_gis.scss new file mode 100644 index 000000000..60b36920a --- /dev/null +++ b/shahab/scss/_gis.scss @@ -0,0 +1,36 @@ +/** + * GIS data editor styles + */ +a.close_gis_editor { + float: $direction-end; +} + +#gis_editor { + display: none; + position: fixed; + z-index: 1001; + overflow-y: auto; + overflow-x: hidden; +} + +#gis_data { + min-height: 230px; +} + +#gis_data_textarea { + height: 6em; +} + +#gis_data_editor { + background: #d0dce0; + padding: 15px; + min-height: 500px; + + .choice { + display: none; + } + + input[type="text"] { + width: 75px; + } +} diff --git a/shahab/scss/_icons.scss b/shahab/scss/_icons.scss new file mode 100644 index 000000000..3720f2106 --- /dev/null +++ b/shahab/scss/_icons.scss @@ -0,0 +1,687 @@ +.icon { + margin: 0; + margin-#{$direction-start}: 0.3em; + padding: 0 !important; + width: 16px; + height: 16px; +} + +.icon_fulltext { + width: 50px; + height: 19px; +} + +.ic_asc_order { + background-image: url('../img/asc_order.png'); +} + +.ic_b_bookmark { + background-image: url('../img/b_bookmark.png'); +} + +.ic_b_browse { + background-image: url('../img/b_browse.png'); +} + +.ic_b_calendar { + background-image: url('../img/b_calendar.png'); +} + +.ic_b_chart { + background-image: url('../img/b_chart.png'); +} + +.ic_b_close { + background-image: url('../img/b_close.png'); +} + +.ic_b_column_add { + background-image: url('../img/b_column_add.png'); +} + +.ic_b_comment { + background-image: url('../img/b_comment.png'); +} + +.ic_b_dbstatistics { + background-image: url('../img/b_dbstatistics.png'); +} + +.ic_b_deltbl { + background-image: url('../img/b_deltbl.png'); +} + +.ic_b_docs { + background-image: url('../img/b_docs.png'); +} + +.ic_b_docsql { + background-image: url('../img/b_docsql.png'); +} + +.ic_b_drop { + background-image: url('../img/b_drop.png'); +} + +.ic_b_edit { + background-image: url('../img/b_edit.png'); +} + +.ic_b_empty { + background-image: url('../img/b_empty.png'); +} + +.ic_b_engine { + background-image: url('../img/b_engine.png'); +} + +.ic_b_event_add { + background-image: url('../img/b_event_add.png'); +} + +.ic_b_events { + background-image: url('../img/b_events.png'); +} + +.ic_b_export { + background-image: url('../img/b_export.png'); +} + +.ic_b_favorite { + background-image: url('../img/b_favorite.png'); +} + +.ic_b_find_replace { + background-image: url('../img/b_find_replace.png'); +} + +.ic_b_firstpage { + background-image: url('../img/b_firstpage.png'); +} + +.ic_b_ftext { + background-image: url('../img/b_ftext.png'); +} + +.ic_b_globe { + background-image: url('../img/b_globe.gif'); +} + +.ic_b_group { + background-image: url('../img/b_group.png'); +} + +.ic_b_help { + background-image: url('../img/b_help.png'); +} + +.ic_b_home { + background-image: url('../img/b_home.png'); +} + +.ic_b_import { + background-image: url('../img/b_import.png'); +} + +.ic_b_index { + background-image: url('../img/b_index.png'); +} + +.ic_b_index_add { + background-image: url('../img/b_index_add.png'); +} + +.ic_b_inline_edit { + background-image: url('../img/b_inline_edit.png'); +} + +.ic_b_insrow { + background-image: url('../img/b_insrow.png'); +} + +.ic_b_lastpage { + background-image: url('../img/b_lastpage.png'); +} + +.ic_b_minus { + background-image: url('../img/b_minus.png'); +} + +.ic_b_more { + background-image: url('../img/b_more.png'); +} + +.ic_b_move { + background-image: url('../img/b_move.png'); +} + +.ic_b_newdb { + background-image: url('../img/b_newdb.png'); +} + +.ic_b_newtbl { + background-image: url('../img/b_newtbl.png'); +} + +.ic_b_nextpage { + background-image: url('../img/b_nextpage.png'); +} + +.ic_b_no_favorite { + background-image: url('../img/b_no_favorite.png'); +} + +.ic_b_pdfdoc { + background-image: url('../img/b_pdfdoc.png'); +} + +.ic_b_plugin { + background-image: url('../img/b_plugin.png'); +} + +.ic_b_plus { + background-image: url('../img/b_plus.png'); +} + +.ic_b_prevpage { + background-image: url('../img/b_prevpage.png'); +} + +.ic_b_primary { + background-image: url('../img/b_primary.png'); +} + +.ic_b_print { + background-image: url('../img/b_print.png'); +} + +.ic_b_props { + background-image: url('../img/b_props.png'); +} + +.ic_b_relations { + background-image: url('../img/b_relations.png'); +} + +.ic_b_report { + background-image: url('../img/b_report.png'); +} + +.ic_b_rename { + background-image: url('../img/b_rename.svg'); +} + +.ic_b_routine_add { + background-image: url('../img/b_routine_add.png'); +} + +.ic_b_routines { + background-image: url('../img/b_routines.png'); +} + +.ic_b_save { + background-image: url('../img/b_save.png'); +} + +.ic_b_saveimage { + background-image: url('../img/b_saveimage.png'); +} + +.ic_b_sbrowse { + background-image: url('../img/b_sbrowse.png'); +} + +.ic_b_sdb { + background-image: url('../img/b_sdb.png'); + width: 10px; + height: 10px; +} + +.ic_b_search { + background-image: url('../img/b_search.png'); +} + +.ic_b_select { + background-image: url('../img/b_select.png'); +} + +.ic_b_snewtbl { + background-image: url('../img/b_snewtbl.png'); +} + +.ic_b_spatial { + background-image: url('../img/b_spatial.png'); +} + +.ic_b_sql { + background-image: url('../img/b_sql.png'); +} + +.ic_b_sqldoc { + background-image: url('../img/b_sqldoc.png'); +} + +.ic_b_sqlhelp { + background-image: url('../img/b_sqlhelp.png'); +} + +.ic_b_table_add { + background-image: url('../img/b_table_add.png'); +} + +.ic_b_tblanalyse { + background-image: url('../img/b_tblanalyse.png'); +} + +.ic_b_tblexport { + background-image: url('../img/b_tblexport.png'); +} + +.ic_b_tblimport { + background-image: url('../img/b_tblimport.png'); +} + +.ic_b_tblops { + background-image: url('../img/b_tblops.png'); +} + +.ic_b_tbloptimize { + background-image: url('../img/b_tbloptimize.png'); +} + +.ic_b_tipp { + background-image: url('../img/b_tipp.png'); +} + +.ic_b_trigger_add { + background-image: url('../img/b_trigger_add.png'); +} + +.ic_b_triggers { + background-image: url('../img/b_triggers.png'); +} + +.ic_b_undo { + background-image: url('../img/b_undo.png'); +} + +.ic_b_unique { + background-image: url('../img/b_unique.png'); +} + +.ic_b_usradd { + background-image: url('../img/b_usradd.png'); +} + +.ic_b_usrcheck { + background-image: url('../img/b_usrcheck.png'); +} + +.ic_b_usrdrop { + background-image: url('../img/b_usrdrop.png'); +} + +.ic_b_usredit { + background-image: url('../img/b_usredit.png'); +} + +.ic_b_usrlist { + background-image: url('../img/b_usrlist.png'); +} + +.ic_b_versions { + background-image: url('../img/b_versions.png'); +} + +.ic_b_view { + background-image: url('../img/b_view.png'); +} + +.ic_b_view_add { + background-image: url('../img/b_view_add.png'); +} + +.ic_b_views { + background-image: url('../img/b_views.png'); +} + +.ic_b_left { + background-image: url('../img/b_left.png'); +} + +.ic_b_right { + background-image: url('../img/b_right.png'); +} + +.ic_bd_browse { + background-image: url('../img/bd_browse.png'); +} + +.ic_bd_deltbl { + background-image: url('../img/bd_deltbl.png'); +} + +.ic_bd_drop { + background-image: url('../img/bd_drop.png'); +} + +.ic_bd_edit { + background-image: url('../img/bd_edit.png'); +} + +.ic_bd_empty { + background-image: url('../img/bd_empty.png'); +} + +.ic_bd_export { + background-image: url('../img/bd_export.png'); +} + +.ic_bd_firstpage { + background-image: url('../img/bd_firstpage.png'); +} + +.ic_bd_ftext { + background-image: url('../img/bd_ftext.png'); +} + +.ic_bd_index { + background-image: url('../img/bd_index.png'); +} + +.ic_bd_insrow { + background-image: url('../img/bd_insrow.png'); +} + +.ic_bd_lastpage { + background-image: url('../img/bd_lastpage.png'); +} + +.ic_bd_nextpage { + background-image: url('../img/bd_nextpage.png'); +} + +.ic_bd_prevpage { + background-image: url('../img/bd_prevpage.png'); +} + +.ic_bd_primary { + background-image: url('../img/bd_primary.png'); +} + +.ic_bd_routine_add { + background-image: url('../img/bd_routine_add.png'); +} + +.ic_bd_sbrowse { + background-image: url('../img/bd_sbrowse.png'); +} + +.ic_bd_select { + background-image: url('../img/bd_select.png'); +} + +.ic_bd_spatial { + background-image: url('../img/bd_spatial.png'); +} + +.ic_bd_unique { + background-image: url('../img/bd_unique.png'); +} + +.ic_centralColumns { + background-image: url('../img/centralColumns.png'); +} + +.ic_centralColumns_add { + background-image: url('../img/centralColumns_add.png'); +} + +.ic_centralColumns_delete { + background-image: url('../img/centralColumns_delete.png'); +} + +.ic_col_drop { + background-image: url('../img/col_drop.png'); +} + +.ic_console { + background-image: url('../img/console.png'); +} + +.ic_database { + background-image: url('../img/database.png'); +} + +.ic_eye { + background-image: url('../img/eye.png'); +} + +.ic_eye_grey { + background-image: url('../img/eye_grey.png'); +} + +.ic_hide { + background-image: url('../img/hide.png'); +} + +.ic_item { + background-image: url('../img/item.png'); + width: 9px; + height: 9px; +} + +.ic_lightbulb { + background-image: url('../img/lightbulb.png'); +} + +.ic_lightbulb_off { + background-image: url('../img/lightbulb_off.png'); +} + +.ic_more { + background-image: url('../img/more.png'); + width: 13px; +} + +.ic_new_data { + background-image: url('../img/new_data.png'); +} + +.ic_new_data_hovered { + background-image: url('../img/new_data_hovered.png'); +} + +.ic_new_data_selected { + background-image: url('../img/new_data_selected.png'); +} + +.ic_new_data_selected_hovered { + background-image: url('../img/new_data_selected_hovered.png'); +} + +.ic_new_struct { + background-image: url('../img/new_struct.png'); +} + +.ic_new_struct_hovered { + background-image: url('../img/new_struct_hovered.png'); +} + +.ic_new_struct_selected { + background-image: url('../img/new_struct_selected.png'); +} + +.ic_new_struct_selected_hovered { + background-image: url('../img/new_struct_selected_hovered.png'); +} + +.ic_normalize { + background-image: url('../img/normalize.png'); +} + +.ic_pause { + background-image: url('../img/pause.png'); +} + +.ic_php_sym { + background-image: url('../img/php_sym.png'); +} + +.ic_play { + background-image: url('../img/play.png'); +} + +.ic_s_asc { + background-image: url('../img/s_asc.png'); +} + +.ic_s_asci { + background-image: url('../img/s_asci.png'); +} + +.ic_s_attention { + background-image: url('../img/s_attention.png'); +} + +.ic_s_cancel { + background-image: url('../img/s_cancel.png'); +} + +.ic_s_cancel2 { + background-image: url('../img/s_cancel2.png'); +} + +.ic_s_cog { + background-image: url('../img/s_cog.png'); +} + +.ic_s_db { + background-image: url('../img/s_db.png'); +} + +.ic_s_desc { + background-image: url('../img/s_desc.png'); +} + +.ic_s_error { + background-image: url('../img/s_error.png'); +} + +.ic_s_host { + background-image: url('../img/s_host.png'); +} + +.ic_s_info { + background-image: url('../img/s_info.png'); +} + +.ic_s_lang { + background-image: url('../img/s_lang.png'); +} + +.ic_s_link { + background-image: url('../img/s_link.png'); +} + +.ic_s_lock { + background-image: url('../img/s_lock.png'); +} + +.ic_s_loggoff { + background-image: url('../img/s_loggoff.png'); +} + +.ic_s_notice { + background-image: url('../img/s_notice.png'); +} + +.ic_s_okay { + background-image: url('../img/s_okay.png'); +} + +.ic_s_passwd { + background-image: url('../img/s_passwd.png'); +} + +.ic_s_process { + background-image: url('../img/s_process.png'); +} + +.ic_s_really { + background-image: url('../img/s_really.png'); + width: 11px; + height: 11px; +} + +.ic_s_reload { + background-image: url('../img/s_reload.png'); +} + +.ic_s_replication { + background-image: url('../img/s_replication.png'); +} + +.ic_s_rights { + background-image: url('../img/s_rights.png'); +} + +.ic_s_sortable { + background-image: url('../img/s_sortable.png'); +} + +.ic_s_status { + background-image: url('../img/s_status.png'); +} + +.ic_s_success { + background-image: url('../img/s_success.png'); +} + +.ic_s_sync { + background-image: url('../img/s_sync.png'); +} + +.ic_s_tbl { + background-image: url('../img/s_tbl.png'); +} + +.ic_s_theme { + background-image: url('../img/s_theme.png'); +} + +.ic_s_top { + background-image: url('../img/s_top.png'); +} + +.ic_s_unlink { + background-image: url('../img/s_unlink.png'); +} + +.ic_s_vars { + background-image: url('../img/s_vars.png'); +} + +.ic_s_views { + background-image: url('../img/s_views.png'); +} + +.ic_show { + background-image: url('../img/show.png'); +} + +.ic_window-new { + background-image: url('../img/window-new.png'); +} + +.ic_ajax_clock_small { + background-image: url('../img/ajax_clock_small.gif'); +} + +.ic_s_partialtext { + background-image: url('../img/s_partialtext.png'); +} + +.ic_s_fulltext { + background-image: url('../img/s_fulltext.png'); +} diff --git a/shahab/scss/_jqplot.scss b/shahab/scss/_jqplot.scss new file mode 100644 index 000000000..540bc43ed --- /dev/null +++ b/shahab/scss/_jqplot.scss @@ -0,0 +1,275 @@ +/* jqPlot */ + +// rules for the plot target div. These will be cascaded down to all plot elements according to css rules +.jqplot-target { + position: relative; + color: #222; + font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; + font-size: 1em; +} + +// rules applied to all axes +.jqplot-axis { + font-size: 0.75em; +} + +.jqplot-xaxis { + margin-top: 10px; +} + +.jqplot-x2axis { + margin-bottom: 10px; +} + +.jqplot-yaxis { + margin-#{$direction-end}: 10px; +} + +.jqplot-y2axis, +.jqplot-y3axis, +.jqplot-y4axis, +.jqplot-y5axis, +.jqplot-y6axis, +.jqplot-y7axis, +.jqplot-y8axis, +.jqplot-y9axis, +.jqplot-yMidAxis { + margin-#{$direction-start}: 10px; + margin-#{$direction-end}: 10px; +} + +// rules applied to all axis tick divs +.jqplot-axis-tick, +.jqplot-xaxis-tick, +.jqplot-yaxis-tick, +.jqplot-x2axis-tick, +.jqplot-y2axis-tick, +.jqplot-y3axis-tick, +.jqplot-y4axis-tick, +.jqplot-y5axis-tick, +.jqplot-y6axis-tick, +.jqplot-y7axis-tick, +.jqplot-y8axis-tick, +.jqplot-y9axis-tick, +.jqplot-yMidAxis-tick { + position: absolute; + white-space: pre; +} + +.jqplot-xaxis-tick { + top: 0; + // initial position untill tick is drawn in proper place + #{$direction-start}: 15px; + vertical-align: top; +} + +.jqplot-x2axis-tick { + bottom: 0; + // initial position untill tick is drawn in proper place + #{$direction-start}: 15px; + vertical-align: bottom; +} + +.jqplot-yaxis-tick { + #{$direction-end}: 0; + // initial position untill tick is drawn in proper place + top: 15px; + text-align: $direction-end; + + &.jqplot-breakTick { + #{$direction-end}: -20px; + margin-#{$direction-end}: 0; + padding: 1px 5px 1px; + z-index: 2; + font-size: 1.5em; + } +} + +.jqplot-y2axis-tick, +.jqplot-y3axis-tick, +.jqplot-y4axis-tick, +.jqplot-y5axis-tick, +.jqplot-y6axis-tick, +.jqplot-y7axis-tick, +.jqplot-y8axis-tick, +.jqplot-y9axis-tick { + #{$direction-start}: 0; + // initial position untill tick is drawn in proper place + top: 15px; + text-align: $direction-start; +} + +.jqplot-yMidAxis-tick { + text-align: center; + white-space: nowrap; +} + +.jqplot-xaxis-label { + margin-top: 10px; + font-size: 11pt; + position: absolute; +} + +.jqplot-x2axis-label { + margin-bottom: 10px; + font-size: 11pt; + position: absolute; +} + +.jqplot-yaxis-label { + margin-#{$direction-end}: 10px; + font-size: 11pt; + position: absolute; +} + +.jqplot-yMidAxis-label { + font-size: 11pt; + position: absolute; +} + +.jqplot-y2axis-label, +.jqplot-y3axis-label, +.jqplot-y4axis-label, +.jqplot-y5axis-label, +.jqplot-y6axis-label, +.jqplot-y7axis-label, +.jqplot-y8axis-label, +.jqplot-y9axis-label { + font-size: 11pt; + margin-#{$direction-start}: 10px; + position: absolute; +} + +.jqplot-meterGauge-tick { + font-size: 0.75em; + color: #999; +} + +.jqplot-meterGauge-label { + font-size: 1em; + color: #999; +} + +table { + &.jqplot-table-legend { + margin-top: 12px; + margin-bottom: 12px; + margin-#{$direction-start}: 12px; + margin-#{$direction-end}: 12px; + background-color: rgba(255, 255, 255, 0.6); + border: 1px solid #ccc; + position: absolute; + font-size: 0.75em; + } + + &.jqplot-cursor-legend { + background-color: rgba(255, 255, 255, 0.6); + border: 1px solid #ccc; + position: absolute; + font-size: 0.75em; + } +} + +td { + &.jqplot-table-legend { + vertical-align: middle; + } + + &.jqplot-seriesToggle { + &:hover, + &:active { + cursor: pointer; + } + } +} + +.jqplot-table-legend .jqplot-series-hidden { + text-decoration: line-through; +} + +div { + &.jqplot-table-legend-swatch-outline { + border: 1px solid #ccc; + padding: 1px; + } + + &.jqplot-table-legend-swatch { + width: 0; + height: 0; + border-top-width: 5px; + border-bottom-width: 5px; + border-left-width: 6px; + border-right-width: 6px; + border-top-style: solid; + border-bottom-style: solid; + border-left-style: solid; + border-right-style: solid; + } +} + +.jqplot-title { + top: 0; + #{$direction-start}: 0; + padding-bottom: 0.5em; + font-size: 1.2em; +} + +table.jqplot-cursor-tooltip { + border: 1px solid #ccc; + font-size: 0.75em; +} + +.jqplot-cursor-tooltip, +.jqplot-highlighter-tooltip, +.jqplot-canvasOverlay-tooltip { + border: 1px solid #ccc; + font-size: 1em; + white-space: nowrap; + background: rgba(208, 208, 208, 0.8); + padding: 1px; +} + +.jqplot-point-label { + font-size: 0.75em; + z-index: 2; +} + +td.jqplot-cursor-legend-swatch { + vertical-align: middle; + text-align: center; +} + +div.jqplot-cursor-legend-swatch { + width: 1.2em; + height: 0.7em; +} + +.jqplot-error { + // Styles added to the plot target container when there is an error go here. + text-align: center; +} + +.jqplot-error-message { + // Styling of the custom error message div goes here. + position: relative; + top: 46%; + display: inline-block; +} + +div { + &.jqplot-bubble-label { + font-size: 0.8em; + padding-#{$direction-start}: 2px; + padding-#{$direction-end}: 2px; + color: rgb(20%, 20%, 20%); + + &.jqplot-bubble-label-highlight { + background: rgba(90%, 90%, 90%, 0.7); + } + } + + &.jqplot-noData-container { + text-align: center; + background-color: rgba(96%, 96%, 96%, 0.3); + } +} diff --git a/shahab/scss/_list-group.scss b/shahab/scss/_list-group.scss new file mode 100644 index 000000000..0d17a7f36 --- /dev/null +++ b/shahab/scss/_list-group.scss @@ -0,0 +1,21 @@ +.list-group { + padding-#{$direction-start}: 40px; + margin: 1rem 0; +} + +.list-group-item { + display: list-item; + border: none; +} + +#li_select_server, +#li_change_password, +#li_select_mysql_collation, +#li_user_preferences, +#li_select_lang, +#li_select_theme { + &.list-group-item { + display: block; + margin-#{$direction-start}: -20px; + } +} diff --git a/shahab/scss/_modal.scss b/shahab/scss/_modal.scss new file mode 100644 index 000000000..2d6d99ac8 --- /dev/null +++ b/shahab/scss/_modal.scss @@ -0,0 +1,3 @@ +.modal-header { + background-image: linear-gradient(#f8f8f8, #d8d8d8); +} diff --git a/shahab/scss/_nav.scss b/shahab/scss/_nav.scss new file mode 100644 index 000000000..6d36dcf0e --- /dev/null +++ b/shahab/scss/_nav.scss @@ -0,0 +1,32 @@ +.nav-pills { + .nav-link { + margin-#{$direction-start}: 0; + margin-#{$direction-end}: 6px; + padding: 4px 10px; + font-weight: bold; + background: #f2f2f2; + color: #235a81; + border: 1px solid #ddd; + + @include border-radius(20px); + + &:hover { + background-color: $bg-one; + + @include border-radius(0.3em); + } + + img { + margin-#{$direction-end}: 0.5em; + vertical-align: -3px; + } + } + + .nav-link.active, + .show > .nav-link { + background-color: #fff; + color: #235a81; + + @include border-radius(0.3em); + } +} diff --git a/shahab/scss/_navbar.scss b/shahab/scss/_navbar.scss new file mode 100644 index 000000000..8e9eb59a9 --- /dev/null +++ b/shahab/scss/_navbar.scss @@ -0,0 +1,32 @@ +.navbar.bg-light { + background: linear-gradient(#fff, #dcdcdc); +} + +.navbar-nav { + font-weight: bold; +} + +.navbar-nav .icon { + margin-#{$direction-end}: 0.5em; + vertical-align: -3px; +} + +.navbar-nav .nav-item { + background: linear-gradient(#fff, #dcdcdc); + border-#{$direction-end}: 1px solid #fff; + border-#{$direction-start}: 1px solid #ccc; + border-bottom: 1px solid #ccc; + + &:first-child { + border-#{$direction-start}: 0; + } + + &:hover { + background: linear-gradient(#fff, #e5e5e5); + } + + &.active { + background: #fff; + border-bottom: 0; + } +} diff --git a/shahab/scss/_navigation.scss b/shahab/scss/_navigation.scss new file mode 100644 index 000000000..320b5b12c --- /dev/null +++ b/shahab/scss/_navigation.scss @@ -0,0 +1,489 @@ +// Navigation styles for the pmahomme theme +#pma_navigation { + width: $navi-width; + position: fixed; + top: 0; + #{$direction-start}: 0; + height: 100vh; + background: url('../img/left_nav_bg.png') repeat-y right 0 $navi-background; + color: $navi-color; + z-index: 800; + + ul { + margin: 0; + } + + form { + margin: 0; + padding: 0; + display: inline; + } + + select { + &#select_server, + &#lightm_db { + width: 100%; + } + } + + div { + &.pageselector { + text-align: center; + margin: 0; + margin-#{$direction-start}: 0.75em; + border-#{$direction-start}: 1px solid #666; + } + } + + #pmalogo, + #serverChoice, + #navipanellinks, + #recentTableList, + #favoriteTableList, + #databaseList, + div.pageselector.dbselector { + text-align: center; + padding: 5px 10px 0; + border: 0; + } + + #navipanellinks .icon { + margin: 0; + } + + #recentTable, + #favoriteTable { + width: 200px; + } + + #favoriteTableList select, + #serverChoice select { + width: 80%; + } +} + +#pma_navigation_header { + overflow: hidden; +} + +#pma_navigation_content { + width: 100%; + height: 100%; + position: absolute; + top: 0; + #{$direction-start}: 0; + z-index: 0; + + > img.throbber { + display: none; + margin: 0.3em auto 0; + } +} + +#pma_navigation_select_database { + text-align: $direction-start; + padding: 0 0 0; + border: 0; + margin: 0; +} + +#pma_navigation_db_select { + margin-top: 0.5em; + margin-#{$direction-start}: 0.75em; + + select { + background: url('../img/select_bg.png') repeat scroll 0 0; + -webkit-border-radius: 2px; + border-radius: 2px; + border: 1px solid #bbb; + border-top: 1px solid #bbb; + color: #333; + padding: 4px 6px; + margin: 0 0 0; + width: 92%; + font-size: 1.11em; + } +} + +#pma_navigation_tree_content { + width: 100%; + overflow: hidden; + overflow-y: auto; + position: absolute; + height: 100%; + + a.hover_show_full { + position: relative; + z-index: 100; + vertical-align: sub; + } +} + +#pma_navigation_tree { + margin: 0; + margin-#{$direction-start}: 5px; + overflow: hidden; + color: #444; + height: 74%; + position: relative; + + a { + color: $navi-color; + padding-left: 0; + + &:hover { + text-decoration: underline; + } + } + + ul { + clear: both; + padding: 0; + list-style-type: none; + margin: 0; + + ul { + position: relative; + } + } + + li { + margin-bottom: 0; + + &.activePointer, + &.selected { + color: $navi-pointer-color; + background-color: $navi-pointer-background; + } + + .dbItemControls { + padding-#{$direction-end}: 4px; + float: right; + } + + .navItemControls { + display: none; + padding-#{$direction-end}: 4px; + float: right; + } + + &.activePointer .navItemControls { + display: block; + opacity: 0.5; + + &:hover { + opacity: 1; + } + } + } + + li { + white-space: nowrap; + clear: both; + min-height: 16px; + + &.fast_filter { + white-space: nowrap; + clear: both; + min-height: 16px; + } + } + + img { + margin: 0; + } + + i { + display: block; + } + + div { + &.block { + position: relative; + width: 1.5em; + height: 1.5em; + min-width: 16px; + min-height: 16px; + float: $direction-start; + + &.double { + width: 2.5em; + } + + i, + b { + width: 1.5em; + height: 1.7em; + min-width: 16px; + min-height: 8px; + position: absolute; + bottom: 0.7em; + #{$direction-start}: 0.75em; + z-index: 0; + } + + // Top and right segments for the tree element connections + i { + display: block; + border-#{$direction-start}: 1px solid #666; + border-bottom: 1px solid #666; + position: relative; + z-index: 0; + + // Removes top segment + &.first { + border-#{$direction-start}: 0; + } + } + + // Bottom segment for the tree element connections + b { + display: block; + height: 0.75em; + bottom: 0; + #{$direction-start}: 0.75em; + border-#{$direction-start}: 1px solid #666; + } + + a, + u { + position: absolute; + #{$direction-start}: 50%; + top: 50%; + z-index: 10; + } + + a + a { + #{$direction-start}: 100%; + } + + &.double { + a, + u { + #{$direction-start}: 33%; + } + + a + a { + #{$direction-start}: 85%; + } + } + + img { + position: relative; + top: -0.6em; + #{$direction-start}: 0; + margin-#{$direction-start}: -7px; + } + } + + &.throbber img { + top: 2px; + #{$direction-start}: 2px; + } + } + + li { + &.last > ul { + background: none; + } + + > { + a, + i { + line-height: 1.5em; + height: 1.5em; + padding-#{$direction-start}: 0.3em; + } + } + } + + .list_container { + border-#{$direction-start}: 1px solid #666; + margin-#{$direction-start}: 0.75em; + padding-#{$direction-start}: 0.75em; + } + + .last > .list_container { + border-#{$direction-start}: 0 solid #666; + } +} + +// Fast filter +li.fast_filter { + padding-#{$direction-start}: 0.75em; + margin-#{$direction-start}: 0.75em; + padding-#{$direction-end}: 35px; + border-#{$direction-start}: 1px solid #666; + list-style: none; + + input { + margin: 3px 0 0 0; + font-size: 0.7em; + padding-top: 2px; + padding-bottom: 2px; + padding-#{$direction-start}: 4px; + padding-#{$direction-end}: 1.7em; + width: 100%; + } + + span { + position: relative; + #{$direction-end}: 2.5em; + padding: 0.2em; + cursor: pointer; + font-weight: bold; + color: #800; + font-size: 0.7em; + } + + &.db_fast_filter { + border: 0; + margin-#{$direction-start}: 0; + margin-#{$direction-end}: 10px; + } +} + +// IE10+ has its own reset X +html.ie { + li.fast_filter { + span { + display: none; + } + + input { + padding-#{$direction-end}: 0.2em; + } + } + + &.ie9, + &.ie8 { + li.fast_filter { + span { + display: auto; + } + + input { + padding-#{$direction-end}: 1.7em; + } + } + } +} + +#navigation_controls_outer { + min-height: 21px !important; + + &.activePointer { + background-color: transparent !important; + } +} + +#navigation_controls { + float: $direction-end; + padding-#{$direction-end}: 23px; +} + +// Resize handler +#pma_navigation_resizer { + width: 3px; + height: 100%; + background-color: #aaa; + cursor: col-resize; + position: fixed; + top: 0; + #{$direction-start}: 240px; + z-index: 801; +} + +#pma_navigation_collapser { + width: 20px; + height: 22px; + line-height: 22px; + background: #eee; + color: #555; + font-weight: bold; + position: fixed; + top: 0; + #{$direction-start}: $navi-width; + text-align: center; + cursor: pointer; + z-index: 800; + text-shadow: 0 1px 0 #fff; + filter: dropshadow(color = #fff, offx = 0, offy = 1); + border: 1px solid #888; +} + +// Quick warp links +.pma_quick_warp { + margin-top: 5px; + margin-#{$direction-start}: 2px; + position: relative; + + .drop_list { + float: $direction-start; + margin-#{$direction-start}: 3px; + padding: 2px 0; + + &:hover { + .drop_button { + background: #fff; + } + + ul { + display: block; + } + } + + ul { + position: absolute; + margin: 0; + padding: 0; + overflow: hidden; + overflow-y: auto; + list-style: none; + background: #fff; + border: 1px solid #ddd; + border-radius: 0.3em; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + box-shadow: 0 0 5px #ccc; + top: 100%; + #{$direction-start}: 3px; + #{$direction-end}: 0; + display: none; + z-index: 802; + } + + li { + white-space: nowrap; + padding: 0; + border-radius: 0; + + img { + vertical-align: sub; + } + + &:hover { + background: #f2f2f2; + } + } + + a { + display: block; + padding: 0.2em 0.3em; + + &.favorite_table_anchor { + clear: $direction-start; + float: $direction-start; + padding: 0.1em 0.3em 0; + } + } + } + + .drop_button { + padding: 0.3em; + border: 1px solid #ddd; + border-radius: 0.3em; + background: #f2f2f2; + cursor: pointer; + } +} diff --git a/shahab/scss/_reboot.scss b/shahab/scss/_reboot.scss new file mode 100644 index 000000000..147572a47 --- /dev/null +++ b/shahab/scss/_reboot.scss @@ -0,0 +1,17 @@ +// Body + +body { + text-align: $direction-start; +} + +// Forms + +input, +select { + font-size: 1em; +} + +textarea { + font-family: $font-family-monospace; + font-size: 1.2em; +} diff --git a/shahab/scss/_resizable-menu.scss b/shahab/scss/_resizable-menu.scss new file mode 100644 index 000000000..55a0606a8 --- /dev/null +++ b/shahab/scss/_resizable-menu.scss @@ -0,0 +1,47 @@ +ul.resizable-menu { + a, + span { + display: block; + margin: 0; + padding: 0; + white-space: nowrap; + } + + .submenu { + display: none; + position: relative; + } + + .shown { + display: inline-block; + } + + ul { + margin: 0; + padding: 0; + position: absolute; + list-style-type: none; + display: none; + border: 1px #ddd solid; + z-index: 2; + #{$direction-end}: 0; + } + + li:hover { + background: linear-gradient(#fff, #e5e5e5); + + ul { + display: block; + background: #fff; + } + } + + .submenuhover ul { + display: block; + background: #fff; + } + + ul li { + width: 100%; + } +} diff --git a/shahab/scss/_rte.scss b/shahab/scss/_rte.scss new file mode 100644 index 000000000..0b051b882 --- /dev/null +++ b/shahab/scss/_rte.scss @@ -0,0 +1,44 @@ +.rte_table { + table-layout: auto; + width: 100%; + + td { + vertical-align: middle; + padding: 0.2em; + width: 20%; + } + + tr td:nth-child(1) { + font-weight: bold; + } + + input, + select, + textarea, + .CodeMirror { + width: 100%; + margin: 6px; + box-sizing: border-box; + } + + input { + &[type=button], + &[type=checkbox], + &[type=radio] { + width: auto; + margin-#{$direction-end}: 6px; + } + } + + .routine_params_table { + width: 100%; + } +} + +.isdisableremoveparam_class { + color: gray; +} + +.ui_tpicker_time_input { + width: 100%; +} diff --git a/shahab/scss/_tables.scss b/shahab/scss/_tables.scss new file mode 100644 index 000000000..05a720bd6 --- /dev/null +++ b/shahab/scss/_tables.scss @@ -0,0 +1,28 @@ +.table { + th, + td { + text-shadow: 0 1px 0 #fff; + vertical-align: middle; + } + + th { + text-align: $direction-start; + } + + td { + touch-action: manipulation; + } + + thead th { + border-#{$direction-end}: 1px solid #fff; + background-image: linear-gradient(#fff, #ccc); + } +} + +.table-hover { + tbody tr { + @include hover() { + background: linear-gradient(#ced6df, #b6c6d7); + } + } +} diff --git a/shahab/scss/_variables.scss b/shahab/scss/_variables.scss new file mode 100644 index 000000000..c5db9d3aa --- /dev/null +++ b/shahab/scss/_variables.scss @@ -0,0 +1,143 @@ +// configures general layout for detailed layout configuration please refer to the css files + +// navi frame + +// navi frame width +$navi-width: 240px; + +// foreground (text) color for the navi frame +$navi-color: #000; + +// background for the navi frame +$navi-background: #f3f3f3; + +// foreground (text) color of the pointer in navi frame +$navi-pointer-color: #000; + +// background of the pointer in navi frame +$navi-pointer-background: #ddd; + +// main frame + +// foreground (text) color for the main frame +$main-color: #444; + +// foreground (text) color of the pointer in browse mode +$browse-pointer-color: #000; + +// background of the pointer in browse mode +$browse-pointer-background: #cfc; + +// foreground (text) color of the marker (visually marks row by clicking on it) +// in browse mode +$browse-marker-color: #000; + +// background of the marker (visually marks row by clicking on it) in browse mode +$browse-marker-background: #fc9; + +// tables + +// border +$border: 0; +// table header and footer color +$th-background: #d3dce3; +// table header and footer background +$th-color: #000; +// table data row background +$bg-one: #e5e5e5; +// table data row background, alternate +$bg-two: #d5d5d5; + +// Bootstrap +// --------- + +// Body + +$body-color: $main-color; + +// Typography + +$font-family-base: sans-serif; +$font-family-monospace: monospace; + +$font-size-base: 0.82rem; + +// Tables + +$table-cell-padding: 0.1em 0.3em; +$table-cell-padding-sm: $table-cell-padding; +$table-head-bg: #fff; +$table-head-color: $th-color; +$table-striped-order: even; +$table-accent-bg: #dfdfdf; +$table-hover-color: $browse-pointer-color; +$table-border-color: #fff; +$table-border-width: 0; + +// Buttons + +$enable-gradients: true; +$enable-shadows: true; +$enable-transitions: false; + +$primary: #ddd; +$secondary: #ddd; + +$btn-border-radius: 0.85rem; +$btn-line-height: 1.15; + +// Dropdowns + +$dropdown-padding-y: 0; +$dropdown-item-padding-y: 0; +$dropdown-item-padding-x: 0; + +// Forms + +$form-check-input-margin-y: 0.1rem; + +// Navbar + +$enable-caret: false; +$navbar-padding-y: 0; +$navbar-padding-x: 0; +$navbar-light-color: #235a81; +$navbar-light-hover-color: #235a81; +$navbar-light-active-color: #235a81; +$navbar-light-disabled-color: #235a81; + +// Card + +$card-border-color: #aaa; +$card-bg: #eee; +$card-cap-bg: #fff; + +// Breadcrumbs + +$breadcrumb-padding-y: 0.1rem; +$breadcrumb-margin-bottom: 0; +$breadcrumb-bg: #888; +$breadcrumb-divider-color: #fff; +$breadcrumb-divider: quote("ยป"); +$breadcrumb-border-radius: 0; + +// Modals + +$modal-inner-padding: 0.75rem; +$modal-footer-margin-between: 0.1rem; +$modal-header-padding-y: 0.4rem; + +// Alert + +$alert-margin-bottom: 0.5em; +$alert-border-radius: 5px; + +// List group + +$list-group-bg: inherit; +$list-group-item-padding-x: 0; +$list-group-item-padding-y: 0; + +// Forms + +$label-margin-bottom: 0; diff --git a/shahab/scss/printview.scss b/shahab/scss/printview.scss new file mode 100644 index 000000000..93dc22d0f --- /dev/null +++ b/shahab/scss/printview.scss @@ -0,0 +1,159 @@ +@media print { + #back_button_print_view, + #print_button_print_view { + display: none; + } +} + +// For removing element from Print View +.print_ignore { + display: none; +} + +.nowrap { + white-space: nowrap; +} + +.hide { + display: none; +} + +// Standard CSS +body, +table, +th, +td { + color: #000; + background-color: #fff; + font-size: 12px; +} + +// To remove link text decoration +a:link { + color: #000; + text-decoration: none; +} + +// To remove any image borders +img { + border: 0; +} + +// Table specific +table, +th, +td { + border: 0.1em solid #000; + background-color: #fff; +} + +table { + border-collapse: collapse; + border-spacing: 0.2em; +} + +thead { + border-collapse: collapse; + border-spacing: 0.2em; + border: 0.1em solid #000; + font-weight: 900; +} + +th, +td { + padding: 0.2em; +} + +thead th { + font-weight: bold; + background-color: #e5e5e5; + border: 0.1em solid #000; +} + +th.vtop, +td.vtop { + vertical-align: top; +} + +th.vbottom, +td.vbottom { + vertical-align: bottom; +} + +// Common Elements not to be included +// Hide Navigation and Top Menu bar +// Hide console +// Hide Navigation items (like Goto Top) +// Hide the Create Table form +// Hide the Page Settings Modal box +// Hide footer, Demo notice, errors div +// Hide the #selflink div +#pma_navigation, +#floating_menubar, +#pma_console_container, +#page_nav_icons, +#create_table_form_minimal, +#page_settings_modal, +#pma_footer, +#pma_demo, +#pma_errors, +#selflink { + display: none; +} + +// Position the main content +#page_content { + position: absolute; + left: 0; + top: 0; + width: 95%; + float: none; +} + +// Specific Class for overriding while Print +.print { + background-color: #000; +} + +.sqlOuter { + color: black; + background-color: #000; +} + +// For hiding 'Open a New phpMyAdmin Window' button +// Hide extra menu on /table/structure +.ic_window-new, +.ic_s_cog, +#structure-action-links, +#addColumns, +.cDrop, +.cEdit, +.cList, +.cCpy, +.cPointer { + display: none; +} + +table tbody:first-of-type tr { + // odd items 1,3,5,7... + &:nth-child(odd) { + background: #fff; + + th { + background: #fff; + } + } + + // even items 2,4,6,8... + &:nth-child(even) { + background: #dfdfdf; + + th { + background: #dfdfdf; + } + } +} + +.column_attribute { + font-size: 100%; +} diff --git a/shahab/scss/theme-rtl.scss b/shahab/scss/theme-rtl.scss new file mode 100644 index 000000000..251a1f01c --- /dev/null +++ b/shahab/scss/theme-rtl.scss @@ -0,0 +1,3 @@ +$direction: rtl; + +@import "theme"; diff --git a/shahab/scss/theme.scss b/shahab/scss/theme.scss new file mode 100644 index 000000000..bca1ab44b --- /dev/null +++ b/shahab/scss/theme.scss @@ -0,0 +1,24 @@ +@import "direction"; +@import "variables"; +@import "../../bootstrap/scss/bootstrap"; +@import "common"; +@import "enum-editor"; +@import "gis"; +@import "navigation"; +@import "designer"; +@import "rte"; +@import "codemirror"; +@import "jqplot"; +@import "resizable-menu"; +@import "icons"; +@import "reboot"; +@import "tables"; +@import "forms"; +@import "buttons"; +@import "nav"; +@import "navbar"; +@import "card"; +@import "breadcrumb"; +@import "alert"; +@import "list-group"; +@import "modal"; diff --git a/shahab/theme.json b/shahab/theme.json new file mode 100644 index 000000000..137fa5835 --- /dev/null +++ b/shahab/theme.json @@ -0,0 +1,8 @@ +{ + "name": "shahab", + "version": "0.1", + "description": "A Modern Dark theme for PhpMyAdmin", + "author": "Shahab Movahhedi", + "url": "https://shmovahhedi.com/", + "supports": ["5.0", "5.1"] +}