diff options
Diffstat (limited to 'srcs/phpmyadmin/themes/metro/scss')
22 files changed, 6909 insertions, 0 deletions
diff --git a/srcs/phpmyadmin/themes/metro/scss/_codemirror.scss b/srcs/phpmyadmin/themes/metro/scss/_codemirror.scss new file mode 100644 index 0000000..30417e1 --- /dev/null +++ b/srcs/phpmyadmin/themes/metro/scss/_codemirror.scss @@ -0,0 +1,96 @@ +// Styles for CodeMirror editor for the Metro theme + +$textarea-cols: 40 !default; +$textarea-rows: 15 !default; + +.CodeMirror { + font-family: $font-family-fixed !important; + height: ceil($textarea-rows * 1.2em); + border: 1px solid #ccc; + direction: ltr; +} + +#pma_console .CodeMirror { + border: none; +} + +.CodeMirror * { + font-family: $font-family-fixed; +} + +#inline_editor_outer .CodeMirror { + height: ceil($textarea-rows * 0.4em); + margin-bottom: 10px; +} + +.insertRowTable .CodeMirror { + height: ceil($textarea-rows * 0.6em); + width: ceil($textarea-cols * 0.6em); +} + +#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: $right; + color: #666; + margin-#{$left}: 1em; +} + +.CodeMirror-hints { + z-index: 999; +} diff --git a/srcs/phpmyadmin/themes/metro/scss/_common.scss b/srcs/phpmyadmin/themes/metro/scss/_common.scss new file mode 100644 index 0000000..c8c756e --- /dev/null +++ b/srcs/phpmyadmin/themes/metro/scss/_common.scss @@ -0,0 +1,4271 @@ +// Common styles for the Metro theme + +/* fonts */ + +@font-face { + font-family: 'IcoMoon'; + src: local('☺'); + src: url('../fonts/IcoMoon.eot'); + src: + url('../fonts/IcoMoon.eot?#iefix') format('embedded-opentype'), + url('../fonts/IcoMoon.svg#IcoMoon') format('svg'), + url('../fonts/IcoMoon.woff') format('woff'), + url('../fonts/IcoMoon.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Open Sans'; + src: local('☺'), local('Open Sans'), local('OpenSans'); + src: url('../fonts/opensans-regular-webfont.eot'); + src: + url('../fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'), + url('../fonts/opensans-regular-webfont.woff') format('woff'), + url('../fonts/opensans-regular-webfont.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Open Sans Light'; + src: local('☺'), local('Open Sans Light'), local('OpenSans-Light'); + src: url('../fonts/opensans-light-webfont.eot'); + src: + url('../fonts/opensans-light-webfont.eot?#iefix') format('embedded-opentype'), + url('../fonts/opensans-light-webfont.woff') format('woff'), + url('../fonts/opensans-light-webfont.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Open Sans Bold'; + src: local('☺'), local('Open Sans Bold'), local('OpenSans-Bold'); + src: url('../fonts/opensans-bold-webfont.eot'); + src: + url('../fonts/opensans-bold-webfont.eot?#iefix') format('embedded-opentype'), + url('../fonts/opensans-bold-webfont.woff') format('woff'), + url('../fonts/opensans-bold-webfont.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Open Sans Extrabold'; + src: local('☺'), local('Open Sans Extrabold'), local('OpenSans-Extrabold'); + src: url('../fonts/opensans-extrabold-webfont.eot'); + src: + url('../fonts/opensans-extrabold-webfont.eot?#iefix') format('embedded-opentype'), + url('../fonts/opensans-extrabold-webfont.woff') format('woff'), + url('../fonts/opensans-extrabold-webfont.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +*:focus { + outline: none; +} + +#li_select_fontsize { + display: none; +} + +/* general tags */ +html { + font-size: 100%; +} + +input, +select, +textarea { + font-size: 1em; +} + +body { + font-family: $font-family; + padding: 0; + margin-#{$left}: $navi-width; + color: $main-color; + background: $main-background; + line-height: 1; + font-size: 11px; +} + +/* Override style formats by html tags */ + +font[color="red"], +span[style="color: #FF0000"] { + color: $browse-warning-color !important; +} + +strong { + font-weight: normal; +} + +/* login */ + +body#loginform { + margin: 0; + background-color: #666; + + #page_content { + background-color: $navi-background; + margin: 0 !important; + padding: 20px; + margin-top: 10% !important; + min-height: 240px; + } + + div.container { + color: $main-background; + text-align: $left; + width: 48em; + margin-#{$left}: auto; + margin-#{$right}: auto; + + &::before { + /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */ + font-family: 'IcoMoon'; + font-size: 220px; + color: $main-background; + content: "a"; + float: $left; + margin-#{$right}: 20px; + margin-bottom: 10px; + background-color: $th-color; + overflow: hidden; + height: 240px; + width: 240px; + line-height: 1; + text-align: center; + } + } + + h1 { + display: inline-block; + text-align: $left; + color: $main-background; + font-size: 2.5em; + padding-top: 0; + margin-#{$right}: -50%; + line-height: 2; + } + + a.logo, + fieldset legend { + display: none; + } + + .item { + margin-bottom: 10px; + } + + input { + &.textfield { + width: 100%; + border: 1px solid #fff; + background: $navi-color; + color: $th-color; + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + margin: 0; + + &:hover, + &:focus { + background-color: #fff; + color: #333; + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + margin: 0; + } + } + + &[type="submit"] { + background-color: $th-color; + border: none; + padding: 7px; + margin: 0; + } + } + + select { + margin: 0 !important; + border: 1px solid $navi-background; + background: $navi-background; + color: $navi-color; + padding-#{$left}: 0 !important; + font-family: $font-family; + min-width: 100%; + + &:hover { + border: 1px solid $navi-color; + } + } + + br { + display: none; + } + + fieldset { + border: none; + color: $navi-color; + padding: 0; + margin-top: 0; + margin-bottom: 10px; + background: none; + + &:first-child { + border-bottom: none; + margin: 0; + } + + &.tblFooters { + border: none; + margin: 0; + clear: none; + } + } + + .error { + float: $left; + width: 48em; + margin-top: -280px; + } +} + +form.login label { + display: none; +} + +.turnOffSelect { + -moz-user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; + user-select: none; +} + +#page_content { + margin: 20px !important; +} + +textarea, +tt, +pre, +code { + font-family: $font-family-fixed !important; +} + +h1 { + font-family: $font-family-light; + font-weight: normal; + font-size: 3em; + color: $navi-background; + margin: 0; + letter-spacing: -1px; + line-height: 1; +} + +h2 { + font-size: 3.6em; + font-weight: normal; + color: $navi-background; + font-family: $font-family-light; + margin-top: 10px; + margin-bottom: 0; + line-height: 1; + letter-spacing: -1px; + + // Hiding icons in the page titles + img { + display: none; + } + + a img { + display: inline; + } +} + +.data { + margin: 10px 0; +} + +.data_full_width { + margin: 10px 0; + width: 100%; +} + +h3 { + font-family: $font-family-extra-bold; + text-transform: uppercase; + font-weight: normal; + 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: $th-background; + border: 1px solid $border-color; + margin-bottom: 10px; + + td { + padding: 8px !important; + } + + a { + border: 1px solid $border-color; + background: $main-background; + padding: 4px 8px; + } +} + +dfn:hover { + cursor: help; +} + +.data th { + border-bottom: 1px solid $border-color; +} + +th { + font-family: $font-family-bold; + color: $th-color !important; + font-weight: normal; + + a { + font-family: $font-family-bold; + color: $th-color !important; + font-weight: normal; + } +} + +.data th a:hover { + color: #999 !important; +} + +.column_heading, +.column_action { + border: 1px solid $border-color; + background-color: #f6f6f6; +} + +a img { + border: 0; +} + +hr { + color: $border-color; + background-color: $border-color; + border: 0; + height: 1px; +} + +form { + padding: 0; + margin: 0; + display: inline; +} + +input { + &[type="text"], + &[type="password"], + &[type="number"] { + border: 1px solid $browse-gray-color; + color: $th-color; + padding: 5px; + margin: 6px; + font-family: $font-family; + background-color: $main-background; + + &:focus { + border: 1px solid $navi-hover-background; + color: $main-color; + } + } +} + +.sqlbutton, +#tablefieldinsertbuttoncontainer input[type="button"] { + margin-top: 1em; + margin-#{$left}: 0 !important; + margin-#{$right}: 14px !important; +} + +button { + margin-#{$left}: 14px; + padding: 4px; + color: $button-color; + text-decoration: none; + background-color: $button-background; +} + +textarea { + overflow: visible; + border: 1px solid $browse-gray-color; + color: $th-color; + background-color: $main-background; +} + +fieldset { + margin-top: 20px; + border: 1px solid $border-color; + padding: 20px; + background-color: $th-background; + + fieldset { + margin: 20px; + margin-bottom: 0; + background-color: $main-background; + border: none; + } +} + +legend { + padding: 0 5px; + width: initial; + font-size: 1rem; +} + +.some-margin { + margin: 20px; +} + +/* buttons in some browsers (eg. Konqueror) are block elements, + this breaks design */ +button { + display: inline; +} + +table { + border-collapse: collapse; + + caption, + th, + td { + padding: 0.6em; + vertical-align: top; + } +} + +th { + text-align: $left; +} + +img, +button { + vertical-align: middle; +} + +select { + border: 1px solid $browse-gray-color; + color: $th-color; + padding: 4px; + font-family: $font-family; + margin: 5px; + background-color: $main-background; + max-width: 17em; + + &:focus { + border: 1px solid $navi-hover-background; + color: $main-color; + } +} + +/* classes */ +.clearfloat { + clear: both; +} + +.floatleft { + float: $left; + margin-#{$right}: 1em; +} + +.floatright { + float: $right; +} + +.center { + text-align: center; +} + +.displayblock { + display: block; +} + +table { + &.nospacing { + border-spacing: 0; + } + + &.nopadding tr { + th, + td { + padding: 0; + } + } +} + +th.left, +td.left { + text-align: $left; +} + +th.center, +td.center { + text-align: center; +} + +th.right, +td.right { + text-align: $right; + padding-#{$right}: 1em; +} + +tr.vtop { + th, + td { + vertical-align: top; + } +} + +th.vtop, +td.vtop { + vertical-align: top; +} + +tr.vmiddle { + th, + td { + vertical-align: middle; + } +} + +th.vmiddle, +td.vmiddle { + vertical-align: middle; +} + +tr.vbottom { + th, + td { + vertical-align: bottom; + } +} + +th.vbottom, +td.vbottom { + vertical-align: bottom; +} + +.paddingtop { + padding-top: 1em; +} + +.separator { + color: #fff; +} + +.result_query { + background: $th-background; + margin-bottom: 20px; +} + +div.tools { + padding: 10px; + text-align: $right; + + span { + float: $right; + margin: 6px 2px; + } + + a { + color: $blue-header !important; + } +} + +.chrome { + input[type="checkbox"] { + #{$left}: -9999px; + position: relative; + + &::before { + /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */ + font-family: 'IcoMoon'; + content: ""; + color: $th-color; + cursor: default; + position: absolute; + padding: 4px; + top: 0; + #{$left}: 9995px; + } + + &:indeterminate::before { + content: ""; + } + + &:checked::before { + content: ""; + } + } + + .navigation input[type="checkbox"]::before { + color: #fff; + } + + input[type="radio"] { + #{$left}: -9999px; + position: relative; + + &::before { + /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */ + font-family: 'IcoMoon'; + content: ""; + color: $th-color; + cursor: default; + position: absolute; + padding: 4px; + top: 0; + #{$left}: 9995px; + } + + &:checked::before { + content: ""; + } + } +} + +tr.noclick td:first-child::before { + content: ""; +} + +fieldset.tblFooters { + margin-top: -1px; + border-top: 0; + text-align: $right; + float: none; + clear: both; +} + +div.null_div { + height: 20px; + text-align: center; + font-style: normal; + min-width: 50px; +} + +fieldset { + .formelement { + float: $left; + margin-#{$right}: 0.5em; + } + + /* revert for Gecko */ + div[class="formelement"] { + white-space: normal; + } +} + +button.mult_submit { + border: none; + background-color: transparent; + color: $browse-pointer-color; + margin: 0; +} + +table tr { + text-align: $left; + border-bottom: 1px solid #eee; + + // odd items 1,3,5,7... + &:nth-child(odd) { + background: $bg-two; + border-bottom: none; + } + + // even items 2,4,6,8... + &:nth-child(even) { + background: $bg-one; + border-bottom: none; + } + + th { + text-align: $left; + border-bottom: 1px solid #eee; + } + + &.odd, + &.even { + border-#{$left}: 3px solid transparent; + } +} + +/* marked table rows */ +td.marked:not(.nomarker) { + color: $main-color; +} + +table tr.marked:not(.nomarker) { + color: $main-color; + + td, + th { + color: $main-color; + } +} + +td.marked:not(.nomarker) { + background-color: $browse-marker-background; +} + +table tr { + &.marked:not(.nomarker) { + border-#{$left}: 3px solid #24a0da; + } + + &:not(.nopointer):hover { + background-color: $browse-marker-background; + color: $main-color; + } +} + +.hover:not(.nopointer) { + background-color: $browse-marker-background; + color: $main-color; +} + +.structure_actions_dropdown { + background-color: $browse-marker-background; + color: $main-color; + + .icon { + vertical-align: middle !important; + } +} + +table tr.hover:not(.nopointer) th { + background-color: $browse-marker-background; + color: $th-pointer-color; +} + +/* marks table rows/cells if the db field is in a where condition */ + +.condition { + border-color: $browse-warning-color !important; +} + +th.condition { + border: 1px solid $browse-warning-color; + background: $browse-warning-color; + color: $main-background !important; + + a { + border: 1px solid $browse-warning-color; + background: $browse-warning-color; + color: $main-background !important; + } +} + +td { + &.condition { + border: 1px solid; + } + + // cells with the value NULL + &.null { + font-style: italic; + color: #7d7d7d; + } +} + +table { + .valueHeader, + .value { + text-align: $right; + white-space: normal; + } + + // IE doesnt handles 'pre' right + [class="value"] { + white-space: normal; + } +} + +.value { + font-family: $font-family-fixed; +} + +.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 #999; + color: inherit !important; +} + +/* no extra space in table cells */ +td .icon { + margin: 0; +} + +.selectallarrow { + margin-#{$right}: 0.3em; + margin-#{$left}: 0.6em; +} + +.with-selected { + margin-#{$left}: 2em; +} + +/* message boxes: error, confirmation */ +#pma_errors, +#pma_demo, +#pma_footer { + position: relative; + padding: 20px; +} + +#pma_errors #pma_errors { + padding: 0; +} + +.success h1, +.notice h1 { + text-align: $left; + margin: 0 0 0.2em 0; + color: $navi-color; +} + +div { + &.error h1 { + text-align: $left; + margin: 0 0 0.2em 0; + color: $navi-color; + } + + &.success, + &.notice, + &.error, + &.footnotes { + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + margin: 0 0 1px; + border: 1px solid; + background-repeat: no-repeat; + + @if $direction == rtl { + background-position: 99% 50%; + padding: 10px 35px 10px 10px; + } @else { + background-position: 10px 50%; + padding: 10px 10px 10px 10px; + } + } + + &.success { + margin: 0 0 1em 0; + border: none; + } +} + +.success a, +.notice a, +.error a { + text-decoration: underline; + color: $button-color; +} + +.success { + color: $button-color; + background-color: $browse-success-color; +} + +h1.success, +div.success { + border-color: $browse-success-color; +} + +.notice, +.footnotes { + color: $button-color; + background-color: $blue-header; +} + +h1.notice { + border-color: $blue-header; +} + +div { + &.notice, + &.footnotes { + border-color: $blue-header; + } +} + +.notice a { + color: $button-color; +} + +.error { + border: 1px solid $browse-warning-color !important; + color: $button-color; + background-color: $browse-warning-color; +} + +h1.error, +div.error { + border-color: $main-color; +} + +.confirmation { + color: $button-color; + background-color: $browse-warning-color; +} + +fieldset.confirmation legend { + background-color: $browse-warning-color; +} + +/* end messageboxes */ + +.column_name { + font-size: 80%; + margin: 5px 2px; +} + +.new_central_col { + width: 100%; +} + +.tblcomment { + font-size: 70%; + font-weight: normal; + color: #009; +} + +.tblHeaders { + font-family: $font-family-bold; + color: $th-color; + background: $th-background; + font-weight: normal; +} + +div.tools, +.tblFooters { + font-weight: normal; + color: $th-color; + background: $th-background; +} + +.tblHeaders, +div.tools, +.tblFooters { + a { + &:link, + &:active, + &:visited { + color: #00f; + } + + &: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; + } + } +} + +tr.disabled td, +td.disabled { + background-color: #f3f3f3; + color: #aaa; +} + +.nowrap { + white-space: nowrap; +} + +.font_weight_bold { + font-weight: bold; +} + +.color_red { + color: red; +} + +/* specific elements */ + +/* topmenu */ + +#topmenu .error { + background: #eee; + border: 0 !important; + color: #aaa; +} + +ul { + &#topmenu, + &#topmenu2 { + list-style-type: none; + margin: 0; + height: 48px; + } + + &.tabs { + list-style-type: none; + margin: 0; + } + + &#topmenu2 { + margin: -20px -10px 20px; + padding: 10px; + clear: both; + } + + &#topmenu li, + &#topmenu2 li { + float: $left; + margin: 0; + vertical-align: middle; + padding-top: 10px; + height: 38px; + } +} + +#topmenu img, +#topmenu2 img { + margin-#{$right}: 0.5em; + vertical-align: -3px; +} + +.menucontainer { + background-color: $th-background; + height: 48px; +} + +.scrollindicator { + display: none; +} + +/* default tab styles */ +#topmenu .tabactive { + background: #fff !important; +} + +#topmenu2 .tabactive { + background: #ccc; +} + +ul#topmenu2 a { + display: block; + margin: 7px 0; + margin-#{$left}: 0; + padding: 5px 15px; + white-space: nowrap; + font-family: $font-family-extra-bold; + font-weight: normal; + color: $navi-pointer-color; + text-transform: uppercase; + background-color: #f6f6f6; +} + +span { + &.caution { + color: #f00; + } + + &.success { + color: green; + } +} + +fieldset.caution { + background: $browse-warning-color; + border: 1px solid $browse-warning-color; + + legend { + background-color: #fff; + } + + a { + font-family: $font-family-bold; + text-transform: uppercase; + color: $button-color; + font-weight: normal; + } + + ul { + padding: 0; + } +} + +#tbl_maintenance { + padding: 0; +} + +fieldset.caution li, +#tbl_maintenance li { + display: block; +} + +fieldset.caution li { + &::before { + /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */ + font-family: "IcoMoon"; + content: ""; + color: $button-color; + margin-#{$right}: 10px; + } + + a:nth-child(2) img { + background: url('../img/s_info.png') !important; + } +} + +#tbl_maintenance li { + a { + font-family: $font-family-bold; + text-transform: uppercase; + font-weight: normal; + } + + &::before { + /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */ + font-family: "IcoMoon"; + content: "%"; + margin-#{$right}: 10px; + } +} + +#topmenu { + padding-#{$left}: 20px; + padding-#{$right}: 20px; +} + +/* default tab styles */ +ul { + &#topmenu { + ul.only { + #{$left}: 0; + } + + a, + span { + padding: 5px 10px; + height: 28px; + line-height: 28px; + font-family: $font-family-extra-bold; + text-transform: uppercase; + color: #666; + font-weight: normal; + } + + ul { + a { + border-width: 1pt 0 0 0; + } + + li:first-child a { + border-width: 0; + } + + a:hover, + .tabactive { + text-decoration: none; + } + } + + /* enabled hover/active tabs */ + > li > { + a:hover, + .tabactive { + text-decoration: none; + color: #333; + } + } + } + + &#topmenu2 a { + text-decoration: none; + + &:hover { + text-decoration: none; + } + } + + /* to be able to cancel the bottom border, use <li class="active"> */ + &#topmenu > li.active { + border-#{$right}: 0; + } +} + +/* zoom search */ +div#dataDisplay { + input, + select { + margin: 0; + margin-#{$right}: 0.5em; + } + + th { + line-height: 2em; + } +} + +table { + &#tableFieldsId { + width: 100%; + } + + &.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; +} + +/* end Calendar */ + +/* table stats */ +div#tablestatistics table { + float: $left; + margin-bottom: 0.5em; + margin-#{$right}: 1.5em; + margin-top: 0.5em; + min-width: 16em; +} + +/* END table stats */ + +/* server privileges */ +#tableuserrights td, +#tablespecificuserrights td, +#tabledatabases td { + vertical-align: middle; +} + +/* END server privileges */ + +/* Heading */ +#topmenucontainer { + width: 100%; +} + +#serverinfo { + padding: 12px 30px; + overflow: hidden; + margin: 0; + margin-#{$left}: -1em; + font-family: $font-family; + color: $button-color; + background: $navi-background; + height: 15px; + box-sizing: content-box; + + .item { + font-family: $font-family; + white-space: nowrap; + color: $button-color; + + &::before { + padding-#{$left}: 5px; + padding-#{$right}: 5px; + /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */ + font-family: "IcoMoon"; + font-size: 10px; + color: #eee; + content: ""; + } + } + + a { + &:hover { + text-decoration: none; + } + + &:first-child { + display: none !important; + } + } + + .separator, + .icon { + display: none; + } +} + +#page_nav_icons { + position: fixed; + top: 0; + #{$right}: 0; + z-index: 99; + padding: 0.25em 0; +} + +#goto_pagetop, +#lock_page_icon { + padding: 0.25em; +} + +#page_settings_icon { + padding: 0.25em; + cursor: pointer; + display: none; +} + +#page_settings_modal, +#pma_navigation_settings { + display: none; +} + +#span_table_comment { + font-weight: normal; + font-style: italic; + white-space: nowrap; + margin-#{$left}: 10px; +} + +#serverinfo img { + margin: 0 0.1em 0; + margin-#{$left}: 0.2em; +} + +#textSQLDUMP { + width: 95%; + height: 95%; + font-family: $font-family-fixed; + 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 { + border-bottom: 1px solid #ddd; + padding-bottom: 0.3em; + margin-bottom: 0.3em; + } + + label { + float: $left; + display: block; + width: 10em; + max-width: 100%; + text-align: $right; + padding-#{$right}: 0.5em; + line-height: 35px; + } + + span.options { + float: $left; + display: block; + width: 12em; + max-width: 100%; + padding-#{$right}: 0.5em; + + #select_pred_username, + #select_pred_hostname, + #select_pred_password { + width: 100%; + max-width: 100%; + } + } + + input { + width: 12em; + clear: $right; + max-width: 100%; + } + + span.options input { + width: auto; + + &[type="button"] { + margin: 4px; + } + } +} + +#fieldset_user_priv div.item { + float: $left; + 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: $left; +} + +/* END user privileges */ + +/* serverstatus */ + +.linkElem:hover { + text-decoration: underline; + color: #235a81; + cursor: pointer; +} + +h3#serverstatusqueries span { + font-size: 60%; + display: inline; +} + +.buttonlinks { + float: $right; + white-space: nowrap; +} + +/* Also used for the variables page */ +fieldset#tableFilter { + padding: 0.1em 1em; + + input[type="submit"] { + margin-top: 9px; + } +} + +div#serverStatusTabs { + margin-top: 1em; +} + +caption a.top { + float: $right; +} + +div#serverstatusquerieschart { + float: $left; + width: 500px; + height: 350px; + padding-#{$left}: 30px; +} + +table { + &#serverstatusqueriesdetails, + &#serverstatustraffic { + float: $left; + } + + &#serverstatusqueriesdetails th { + min-width: 35px; + } + + &#serverstatusvariables { + width: 100%; + margin-bottom: 1em; + + .name { + width: 18em; + white-space: nowrap; + } + + .value { + width: 6em; + } + } + + &#serverstatusconnections { + float: $left; + margin-#{$left}: 30px; + } +} + +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 { + margin-#{$left}: 10px; +} + +table#chartGrid { + td { + padding: 3px; + margin: 0; + } + + div.monitorChart { + background: $th-background; + } +} + +div.tabLinks { + margin-#{$left}: 0.3em; + float: $left; + padding: 5px 0; + + a, + label { + margin-#{$right}: 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; +} + +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: $left; + } + } +} + +.smallIndent { + padding-#{$left}: 7px; +} + +/* end serverstatus */ + +/* server variables */ +#serverVariables { + table-layout: fixed; + width: 100%; + + .var-row > td { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + line-height: 2em; + } + + .var-header { + color: $th-color; + background: #f3f3f3; + font-weight: bold; + text-align: $left; + } + + .var-row { + padding: 0.5em; + min-height: 18px; + } + + .var-action { + width: 120px; + } + + .var-name { + float: $left; + + &.session { + font-weight: normal; + font-style: italic; + } + } + + .var-value { + width: 50%; + float: $right; + text-align: $right; + } + + .var-doc { + overflow: visible; + float: $right; + } + + /* server variables editor */ + .editLink { + padding-#{$right}: 1em; + float: $left; + font-family: sans-serif; + } + + .serverVariableEditor { + width: 100%; + overflow: hidden; + + input { + width: 100%; + margin: 0 0.5em; + box-sizing: border-box; + -ms-box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + height: 2.2em; + } + + div { + display: block; + overflow: hidden; + padding-#{$right}: 1em; + } + + a { + float: $right; + margin: 0 0.5em; + line-height: 2em; + } + } +} + +p.notice { + margin: 1.5em 0; + border: 1px solid #000; + background-repeat: no-repeat; + background-color: #555; + color: #d4fb6a; + + @if $direction == rtl { + background-position: 99% 50%; + padding: 25px 10px 10px 10px; + } @else { + background-position: 10px 50%; + padding: 10px 10px 10px 25px; + } + + a { + color: #fff; + text-decoration: underline; + } +} + +/* profiling */ + +div#profilingchart { + width: 850px; + height: 370px; + float: $left; +} + +/* END profiling */ + +/* table charting */ + +#resizer { + border: 1px solid silver; +} + +/* make room for the resize handle */ +#inner-resizer { + padding: 10px; +} + +.chartOption { + float: $left; + margin-#{$right}: 40px; +} + +/* END table charting */ + +/* querybox */ + +#togglequerybox { + margin: 0 10px; +} + +#serverstatus h3 { + margin: 15px 0; + font-weight: normal; + color: #999; + font-size: 1.7em; +} + +#sectionlinks { + padding: 16px; + background: #f3f3f3; + border: 1px solid #aaa; + + a { + font-size: 0.88em; + font-weight: bold; + line-height: 35px; + margin-#{$left}: 7px; + border: 1px solid #aaa; + padding: 5px 10px; + color: #111; + text-decoration: none; + background: #ddd; + white-space: nowrap; + } +} + +.buttonlinks a, +a.button { + font-size: 0.88em; + font-weight: bold; + line-height: 35px; + margin-#{$left}: 7px; + border: 1px solid #aaa; + padding: 5px 10px; + color: #111; + text-decoration: none; + background: #ddd; + white-space: nowrap; +} + +div { + &#sqlquerycontainer { + float: $left; + width: 69%; + } + + &#tablefieldscontainer { + float: $right; + width: 29%; + margin-top: -20px; + + select { + width: 100%; + background: #fff; + max-width: initial; + } + } +} + +textarea { + &#sqlquery { + width: 100%; + border: 1px solid #aaa; + padding: 5px; + font-family: inherit; + } + + &#sql_query_edit { + height: 7em; + width: 95%; + display: block; + } +} + +div#queryboxcontainer div#bookmarkoptions { + margin-top: 0.5em; +} + +/* end querybox */ + +/* main page */ + +#mysqlmaininformation, +#pmamaininformation { + float: $left; + width: 49%; +} + +#maincontainer ul { + list-style-type: square; + vertical-align: middle; + color: $th-color; + margin-#{$left}: 20px; + + li { + line-height: 1.5; + } +} + +#full_name_layer { + position: absolute; + padding: 2px; + margin-top: -3px; + z-index: 801; + border: solid 1px #888; + background: #fff; +} + +/* END main page */ + +/* iconic view for ul items */ + +li { + br { + display: none; + } + + &.no_bullets { + list-style-type: none !important; + } + + &#li_mysql_client_version { + overflow: hidden; + text-overflow: ellipsis; + } + + &#li_create_database { + background-color: #f6f6f6; + padding: 10px; + border: 1px solid $border-color; + display: block; + margin-bottom: 20px; + } + + &#li_select_lang { + display: block; + padding: 10px; + padding-#{$left}: 20px; + font-family: $font-family-light; + + select { + margin: 0 !important; + height: 26px; + } + + &:hover { + background: #f6f6f6; + } + } + + &#li_select_mysql_collation { + display: block; + padding: 10px; + padding-#{$left}: 20px; + font-family: $font-family-light; + + select { + margin: 0 !important; + } + + &:hover { + background: #f6f6f6; + } + } + + &#li_select_theme { + display: block; + padding: 10px; + padding-#{$left}: 20px; + font-family: $font-family-light; + + select { + margin: 0 !important; + } + + &::after { + content: "Scheme: #{$color-scheme}"; + margin-#{$left}: 10px; + } + + &:hover { + background: #f6f6f6; + } + } + + &#li_change_password { + display: block; + padding: 10px; + padding-#{$left}: 20px; + font-family: $font-family-light; + + &:hover { + background: #f6f6f6; + } + } + + &#li_user_preferences { + display: block; + padding: 10px; + padding-#{$left}: 20px; + font-family: $font-family-light; + + &:hover { + background: #f6f6f6; + } + } + + &#li_switch_dbstats { + background-color: #f6f6f6; + padding: 10px; + border: 1px solid $border-color; + display: block; + } +} + +/* END iconic view for ul items */ + +#body_browse_foreigners { + background: $navi-background; + margin: 0.5em 0.5em 0 0.5em; +} + +#bodyquerywindow { + background: $navi-background; +} + +#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: $left; +} + +#selflink { + clear: both; + display: block; + margin-top: 20px; + margin-bottom: 20px; + margin-#{$left}: 20px; + margin-#{$right}: 20px; + border-top: 1px solid silver; + text-align: $right; +} + +#table_innodb_bufferpool_usage, +#table_innodb_bufferpool_activity { + float: $left; +} + +#div_mysql_charset_collations table { + float: $left; + + th, + td { + padding: 0.4em; + } + + th#collationHeader { + width: 35%; + } +} + +.operations_half_width { + width: 100%; + float: $left; + margin-bottom: 10px; +} + +.operations_full_width { + width: 100%; + clear: both; +} + +#qbe_div_table_list, +#qbe_div_sql_query { + float: $left; +} + +label.desc { + width: 30em; + float: $left; + + sup { + position: absolute; + } +} + +code.php { + display: block; + padding-#{$left}: 0.3em; + margin-top: 0; + margin-bottom: 0; + max-height: 10em; + overflow: auto; + direction: ltr; +} + +.sqlOuter code.sql, +div.sqlvalidate, +#inline_editor_outer { + display: block; + padding: 1em; + margin: 1em; + overflow: auto; + background-color: $main-background; + border: 1px solid $border-color; + direction: ltr; +} + +#main_pane_left { + width: 60%; + min-width: 260px; + float: $left; + padding-top: 1em; +} + +#main_pane_right { + overflow: hidden; + min-width: 160px; + padding-top: 1em; + padding-#{$left}: 3em; +} + +.group { + margin-bottom: 1em; + padding-bottom: 1em; + + input[type="submit"] { + margin-#{$left}: 0; + } + + h2 { + color: $navi-background; + font-size: 2.8em; + font-weight: normal; + font-family: $font-family-light; + margin-top: 0; + margin-bottom: 0.6em; + } +} + +.group-cnt { + padding: 0 0 0 0.5em; + display: inline-block; + width: 98%; +} + +textarea#partitiondefinition { + height: 3em; +} + +/* for elements that should be revealed only via js */ +.hide { + display: none; +} + +#list_server { + list-style-image: 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; + } + + &.upload_progress_bar_inner { + background-color: $navi-background; + width: 0; + height: 12px; + margin: 1px; + overflow: hidden; + color: $browse-marker-color; + position: relative; + } + + &.upload_progress_bar_outer div.percentage { + position: absolute; + top: 0; + #{$left}: 0; + width: 202px; + } + + &.upload_progress_bar_inner div.percentage { + top: -1px; + #{$left}: -1px; + } + + &#statustext { + margin-top: 0.5em; + } +} + +table { + &#serverconnection_src_remote, + &#serverconnection_trg_remote, + &#serverconnection_src_local, + &#serverconnection_trg_local { + float: $left; + } +} + +/** + * Validation error message styles + */ + +input { + &[type="text"].invalid_value, + &[type="password"].invalid_value, + &[type="number"].invalid_value, + &[type="date"].invalid_value .invalid_value { + background: #fcc; + } +} + +/** + * Ajax notification styling + */ + +/* additional styles */ +.ajax_notification { + top: 0; + position: fixed; + z-index: 1100; + text-align: center; + display: inline; + #{$left}: 0; + #{$right}: 0; + background-image: url("../img/ajax_clock_small.gif"); + background-repeat: no-repeat; + background-position: 46%; + margin: 0; + background-color: $navi-color; + color: $main-color; + padding: 10px !important; + border: none; +} + +.dismissable { + margin-#{$left}: -10px; + margin-top: -10px; +} + +#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 h3, +.importoptions h3 { + border-bottom: 1px #ccc 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: $left; + width: 15em; +} + +.exportoptions, +.importoptions { + margin: 20px 30px 30px; + margin-#{$left}: 10px; +} + +.exportoptions #buttonGo, +.importoptions #buttonGo { + padding: 5px 12px; + text-decoration: none; + cursor: pointer; + margin: 0; +} + +.format_specific_options { + border: 1px solid #999; + margin: 7px 0; + padding: 3px; + + h3 { + margin: 10px 0 0; + margin-#{$left}: 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-#{$left}: 30px; + + h4 { + border-bottom: 1px #999 solid; + } + + li { + margin-bottom: 0; + + &.subgroup { + display: inline-block; + margin-top: 0; + } + } +} + +#output_quick_export { + display: none; +} + +/** + * Import styles only + */ + +.importoptions #import_notification { + margin: 10px 0; + font-style: italic; +} + +input#input_import_file { + margin: 5px; +} + +.formelementrow { + margin: 5px 0 5px 0; +} + +#filterText { + vertical-align: baseline; +} + +#popup_background { + display: none; + position: fixed; + width: 100%; + height: 100%; + top: 0; + #{$left}: 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: $left; + margin-#{$right}: 0.3em; + } + + .submenu li { + padding: 0; + margin: 0; + + span { + padding: 0.3em; + margin: 0.1em; + } + } +} + +#structure-action-links a { + margin-#{$right}: 1em; +} + +/** + * Indexes + */ + +#index_frm { + .index_info { + input, + select { + width: 14em; + 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: $left; + min-width: 12em; + } + } + + .slider { + width: 10em; + margin: 0.6em; + float: $left; + } + + .add_fields { + float: $left; + + input { + margin-#{$left}: 1em; + } + } + + input { + margin: 0; + } + + td { + vertical-align: middle; + } +} + +table#index_columns { + width: 100%; + + select { + width: 85%; + float: $right; + } +} + +#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; + } +} + +/* config forms */ + +.config-form { + ul.tabs { + margin: 1.1em 0.2em 0; + padding: 0 0 0.3em 0; + list-style: none; + font-weight: bold; + + li { + float: $left; + 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 #ddd; + font-family: $font-family-bold; + padding: 7px 10px; + background: #f2f2f2; + color: #555; + + &:hover, + &:active { + background: #e5e5e5; + } + } + + &.active a { + background-color: #fff; + margin-top: 1px; + color: #000; + border-color: #ddd; + border-bottom: 1px solid #fff; + } + } + } + + fieldset { + margin-top: 0; + padding: 0; + clear: both; + background: none; + } + + legend { + display: none; + } + + fieldset { + p { + margin: 0; + padding: 10px; + background: #fff; + font-family: $font-family-light; + font-size: 16px; + } + + /* 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: sans-serif; + font-size: small; + } + + /* field error list */ + .inline_errors { + margin: 0.3em 0.3em 0.3em; + margin-#{$left}: 0; + padding: 0; + list-style: none; + color: #9a0000; + font-size: small; + } + + table { + background-color: #fff; + } + + label { + font-weight: normal; + } + + textarea { + margin: 5px; + padding: 5px; + } + } +} + +.insertRowTable textarea { + margin: 5px; + padding: 5px; +} + +.config-form fieldset { + th { + padding: 10px; + padding-#{$left}: 0.5em; + text-align: $left; + vertical-align: top; + width: 40%; + } + + .doc { + margin-#{$left}: 1em; + } + + .disabled-notice { + margin-#{$left}: 1em; + font-size: 80%; + text-transform: uppercase; + color: #e00; + cursor: help; + } + + td { + padding-top: 0.3em; + padding-bottom: 0.3em; + vertical-align: top; + border-bottom: 1px $navi-color solid; + border-#{$right}: none; + } + + th { + border-bottom: 1px $navi-color solid; + border-#{$right}: none; + + small { + display: block; + font-weight: normal; + font-family: sans-serif; + font-size: x-small; + color: #444; + } + } +} + +fieldset { + .group-header { + th { + background: $bg-two; + } + + + tr th { + padding-top: 0.6em; + } + } + + .group-field-1 th, + .group-header-2 th { + padding-#{$left}: 1.5em; + } + + .group-field-2 th, + .group-header-3 th { + padding-#{$left}: 3em; + } + + .group-field-3 th { + padding-#{$left}: 4.5em; + } + + .disabled-field { + th { + color: #666; + background-color: #ddd; + + small { + color: #666; + background-color: #ddd; + } + } + + td { + color: #666; + background-color: #ddd; + } + } +} + +form { + &.create_table_form fieldset.tblFooters, + &#multi_edit_central_columns fieldset.tblFooters { + background: none; + border: none; + } + + &#tableOptionsForm { + input[name="comment"], + select[name="tbl_collation"] { + width: 130px; + } + } + + &#formDatabaseComment .tblFooters, + &#create_table_form_minimal .tblFooters, + &#rename_db_form .tblFooters, + &#copy_db_form .tblFooters, + &#change_db_charset_form .tblFooters, + &#alterTableOrderby .tblFooters, + &#moveTableForm .tblFooters, + &#copyTable .tblFooters, + &#tableOptionsForm .tblFooters { + margin-top: -40px; + } +} + +#create_table_form_minimal { + display: block; +} + +#fieldset_zoom_search table { + th, + td { + line-height: 35px; + } +} + +#fieldset_table_qbe table { + th, + td { + line-height: 35px; + } +} + +#fieldset_delete_user_footer { + margin-top: -59px; +} + +#db_or_table_specific_priv .tblFooters { + margin-top: -68px; +} + +#edit_user_dialog, +#add_user_dialog { + margin: 20px !important; +} + +.config-form { + .lastrow { + padding: 0.5em; + text-align: center; + } + + span.checkbox { + padding: 2px; + display: inline-block; + } + + /* customized field */ + .custom { + background: #ffc; + } + + span.checkbox.custom { + padding: 1px; + border: 1px #edec90 solid; + background: #ffc; + } + + img.ic_s_reload { + -webkit-filter: invert(70%); + filter: invert(70%); + } + + .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; + } + + dd { + margin-#{$left}: 0.5em; + + &::before { + content: "\25B8 "; + } + } +} + +.click-hide-message { + cursor: pointer; +} + +.prefsmanage_opts { + margin-#{$left}: 2em; +} + +#prefs_autoload { + margin-bottom: 0.5em; + margin-#{$left}: 0.5em; +} + +input#auto_increment_opt { + width: min-content; +} + +#placeholder { + .button { + position: absolute; + cursor: pointer; + } + + div.button { + font-size: smaller; + color: #999; + background-color: #eee; + padding: 2px; + } +} + +.wrapper { + float: $left; + 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-#{$right}: 0.1em solid #888; + border-#{$left}: 0.1em solid #888; + + table, + td, + img { + padding: 0; + position: relative; + } + + .container { + position: absolute; + + td { + background: none; + } + } + + .toggleOn { + color: #fff; + padding: 0 1em; + } + + .toggleOff { + padding: 0 1em; + } +} + +.doubleFieldset { + fieldset { + width: 48%; + float: $left; + padding: 0; + + &.left { + margin-#{$right}: 1%; + } + + &.right { + margin-#{$left}: 1%; + } + } + + legend { + margin-#{$left}: 1.5em; + } + + div.wrap { + padding: 1.5em; + } +} + +form.append_fields_form .tblFooters { + background: none; + border: none; +} + +#table_columns { + input { + &[type="text"], + &[type="password"], + &[type="number"], + &[type="date"] { + 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; + margin: 6px; + } +} + +#placeholder { + position: relative; + border: 1px solid #aaa; + float: $right; + overflow: hidden; + + .button { + position: absolute; + } +} + +.placeholderDrag { + cursor: move; +} + +#left_arrow { + #{$left}: 8px; + top: 26px; +} + +#right_arrow { + #{$left}: 26px; + top: 26px; +} + +#up_arrow { + #{$left}: 17px; + top: 8px; +} + +#down_arrow { + #{$left}: 17px; + top: 44px; +} + +#zoom_in { + #{$left}: 17px; + top: 67px; +} + +#zoom_world { + #{$left}: 17px; + top: 85px; +} + +#zoom_out { + #{$left}: 17px; + top: 103px; +} + +.colborder { + cursor: col-resize; + height: 100%; + margin-#{$left}: -6px; + position: absolute; + width: 5px; +} + +.colborder_active { + border-#{$right}: 2px solid #a44; +} + +.pma_table, +.sticky_columns { + th.draggable span { + display: block; + overflow: hidden; + } +} + +.pma_table { + td { + position: static; + } + + tbody td span { + display: block; + overflow: hidden; + + code span { + display: inline; + } + } +} + +.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; +} + +.cPointer { + $height: 20px; + $width: 10px; + + height: $height; + width: $width; + margin-#{$left}: $height / -2; + margin-top: $width / -2; + position: absolute; + background: url("../img/col_pointer.png"); +} + +.tooltip { + background: #333 !important; + opacity: 0.8 !important; + border: 1px solid #000 !important; + font-size: 10px !important; + font-weight: normal !important; + padding: 5px !important; + width: 260px; + line-height: 1.5; + + * { + background: none !important; + color: #fff !important; + } +} + +.cDrop { + #{$left}: 0; + position: absolute; + top: 0; +} + +.coldrop { + background: url("../img/col_drop.png"); + cursor: pointer; + height: 16px; + margin-#{$left}: 0.3em; + margin-top: 0.3em; + position: absolute; + width: 16px; + + &:hover { + background-color: #999; + } +} + +.coldrop-hover { + background-color: #999; +} + +.cList { + background: #fff; + border: solid 1px #ccc; + position: absolute; + + .lDiv div { + padding: 0.2em 0.5em 0.2em; + padding-#{$left}: 0.2em; + + &:hover { + background: $navi-background; + cursor: pointer; + color: #fff; + } + + input { + cursor: pointer; + } + } +} + +.showAllColBtn { + border-bottom: solid 1px #ccc; + border-top: solid 1px #ccc; + cursor: pointer; + font-size: 0.9em; + font-family: $font-family-bold; + padding: 0.35em 1em; + text-align: center; + font-weight: normal; + + &:hover { + background: $navi-background; + cursor: pointer; + color: #fff; + } +} + +#page_content { + line-height: 1.5; +} + +.navigation_separator { + color: #eee; + display: inline-block; + font-size: 1.5em; + text-align: center; + height: 1.4em; +} + +.navigation { + width: 100%; + background-color: $navi-background; + color: $navi-color; + + td { + margin: 0; + padding: 0; + vertical-align: middle; + white-space: nowrap; + } + + input { + &[type="submit"] { + background: $navi-background; + border: none; + filter: none; + margin: 5px; + padding: 0.4em; + + &:hover { + color: $button-color; + cursor: pointer; + background-color: $th-color; + } + } + + &.edit_mode_active { + color: $button-color; + cursor: pointer; + background-color: $th-color; + } + } + + select { + margin: 0 0.8em; + border: none; + } + + input[type="text"] { + border: none; + } +} + +.navigation_goto { + width: 100%; +} + +.insertRowTable { + td, + th { + vertical-align: middle; + } +} + +.cEdit { + margin: 0; + padding: 0; + position: absolute; + + input { + &[type="text"], + &[type="password"], + &[type="number"] { + 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-top: 10px; + } + + .edit_box_posting { + background: #fff url("../img/ajax_clock_small.gif") no-repeat right center; + padding-#{$right}: 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 left; + padding-#{$left}: 20px; +} + +.relationalTable select { + width: 125px; + margin-#{$right}: 5px; +} + +/* css for timepicker */ + +.ui-timepicker-div { + .ui-widget-header { + margin-bottom: 8px; + } + + dl { + text-align: $left; + + 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; +} + +.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; + } + } + + &.notice, + &.result_query { + margin-top: 1em; + } +} + +table.show_create { + margin-top: 1em; + + td { + border-#{$right}: 1px solid #bbb; + } +} + +#alias_modal { + table th { + vertical-align: middle; + padding-#{$left}: 1em; + } + + label.col-2 { + min-width: 20%; + display: inline-block; + } + + select { + width: 25%; + margin-#{$right}: 2em; + } + + label { + font-weight: bold; + } +} + +.small_font { + font-size: smaller; +} + +/* Console styles */ +#pma_console_container { + width: 100%; + position: fixed; + bottom: 0; + #{$left}: 0; + z-index: 100; +} + +#pma_console { + position: relative; + margin-#{$left}: 250px; + + .templates { + display: none; + } + + .mid_text { + vertical-align: middle; + } + + .toolbar { + position: relative; + background: $th-background; + border-top: solid 1px #ccc; + cursor: n-resize; + + span { + vertical-align: middle; + } + + &.collapsed { + cursor: default; + + &:not(:hover) { + display: inline-block; + border-#{$right}: solid 1px #ccc; + } + + > .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; + } + + .toolbar { + .text { + font-weight: bold; + } + + .button, + .text { + margin-#{$right}: 0.4em; + float: $right; + } + } + + .content { + overflow-x: hidden; + overflow-y: auto; + margin-bottom: -65px; + border-top: solid 1px #ccc; + 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 { + #{$left}: -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; + } + } + + .message { + &.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; + + &.shared { + background: #396; + } + } + } + + .query_input { + position: relative; + } + + .mid_layer { + height: 100%; + width: 100%; + position: absolute; + top: 0; + background: #ccc; + display: none; + cursor: pointer; + z-index: 200; + } + + .card { + position: absolute; + width: 94%; + height: 100%; + min-height: 48px; + #{$left}: 100%; + top: 0; + border-#{$left}: solid 1px #999; + z-index: 300; + transition: $left 0.2s; + -ms-transition: $left 0.2s; + -webkit-transition: $left 0.2s; + -moz-transition: $left 0.2s; + + &.show { + #{$left}: 6%; + } + } +} + +#pma_bookmarks .content.add_bookmark, +#pma_console_options .content { + padding: 4px 6px; +} + +#pma_bookmarks .content.add_bookmark { + .options { + margin-#{$left}: 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; + } +} + +#pma_console { + .button.hide, + .message span.text.hide { + display: none; + } +} + +#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-#{$right}: 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: $left; + } + + .trace.welcome .time, + .traceStep .file, + .script_name { + float: $right; + } + + .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; + #{$left}: 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; + #{$right}: 25px; + width: 400px; + border: 1px solid #999; + background: #f3f3f3; + + h2 { + background-color: #bbb; + padding: 0.1em 0.3em; + margin-top: 0; + margin-bottom: 0; + color: #fff; + font-size: 1.6em; + font-weight: normal; + } +} + +.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; +} + +.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: $right; + } + } + } + + h2 { + .minimize { + float: $right; + margin-#{$right}: 5px; + padding: 0 10px; + } + + .close { + float: $right; + margin-#{$right}: 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%; + #{$left}: 20%; + width: 60%; + background: white; + min-height: 300px; + z-index: 800; + cursor: move; + + h2 .close { + float: $right; + margin-#{$right}: 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 */ +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: $right; + } + } + + &.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 { + #{$right}: 0.3em; + #{$left}: initial; + } + + .ui-dialog-title { + float: $left; + } + + .ui-dialog-buttonpane .ui-dialog-buttonset { + float: $right; + } + } + + .ui-corner-all, + .ui-corner-top, + .ui-corner-left, + .ui-corner-tl { + border-top-left-radius: 0; + } + + .ui-corner-all, + .ui-corner-top, + .ui-corner-right, + .ui-corner-tr { + border-top-right-radius: 0; + } + + .ui-corner-all, + .ui-corner-bottom, + .ui-corner-left, + .ui-corner-bl { + border-bottom-left-radius: 0; + } + + .ui-corner-all, + .ui-corner-bottom, + .ui-corner-right, + .ui-corner-br { + border-bottom-right-radius: 0; + } + + .ui-dialog { + padding: 0; + + .ui-widget-header { + color: $button-color; + border: none; + background-color: $navi-background; + background-image: none; + } + + .ui-dialog-title { + padding: 5px; + font-weight: normal; + } + + .ui-dialog-buttonpane button { + font-family: $font-family; + color: $button-color; + background-color: $navi-background; + background-image: none; + border: 1px solid $button-background; + + &.ui-state-hover { + background-color: $button-hover; + border: 1px solid $button-hover; + } + + &.ui-state-active { + background-color: #333; + border: 1px solid #333; + } + } + } +} + +#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; +} + +#filter_query_text { + vertical-align: baseline; +} diff --git a/srcs/phpmyadmin/themes/metro/scss/_designer.scss b/srcs/phpmyadmin/themes/metro/scss/_designer.scss new file mode 100644 index 0000000..78905c0 --- /dev/null +++ b/srcs/phpmyadmin/themes/metro/scss/_designer.scss @@ -0,0 +1,466 @@ +// Designer styles for the Metro theme +.input_tab { + background-color: #efefef; + color: #000; + border: 1px solid #ccc; +} + +.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: $left; + + * { + behavior: url(#default#VML); + } +} + +.designer_tab { + color: #333; + border-collapse: collapse; + border: 1px solid #ccc; + z-index: 1; + -moz-user-select: none; + + .header { + background-color: #f6f6f6; + } +} + +.tab_zag { + text-align: center; + cursor: move; + padding: 1px; + font-weight: bold; + vertical-align: middle; +} + +.tab_zag_2 { + text-align: center; + cursor: move; + padding: 1px; + font-weight: bold; + background-color: #f6f6f6; + vertical-align: middle; +} + +.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; +} + +.scroll_tab { + overflow: auto; + width: 100%; + height: 500px; +} + +.designer_Tabs { + cursor: default; + color: #333; + white-space: nowrap; + text-decoration: none; + text-indent: 3px; + margin-#{$left}: 2px; + text-align: $left; + border: #ccc solid 0; + + &:hover { + cursor: default; + color: #666; + background: #eee; + text-indent: 3px; + white-space: nowrap; + text-decoration: none; + border: #eee solid 0; + text-align: $left; + } +} + +.owner { + font-weight: normal; + color: #888; +} + +.option_tab { + padding-#{$left}: 2px; + padding-#{$right}: 2px; + width: 5px; +} + +.select_all { + vertical-align: top; + padding-#{$left}: 2px; + padding-#{$right}: 2px; + cursor: default; + width: 1px; + color: #000; + background-repeat: repeat-x; +} + +.small_tab { + vertical-align: top; + background-color: #666; + color: #fff; + cursor: default; + text-align: center; + font-weight: bold; + padding-#{$left}: 2px; + padding-#{$right}: 2px; + width: 1px; + text-decoration: none; + + &:hover { + vertical-align: top; + color: #fff; + background-color: #f96; + cursor: default; + padding-#{$left}: 2px; + padding-#{$right}: 2px; + text-align: center; + font-weight: bold; + width: 1px; + text-decoration: none; + } +} + +.small_tab_pref { + background-color: #f6f6f6; + 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; + } +} + +.L_butt2_1 { + padding-#{$left}: 5px; + text-decoration: none; + vertical-align: middle; + cursor: default; + + &:hover { + padding-#{$left}: 5px; + color: #000; + text-decoration: none; + vertical-align: middle; + cursor: default; + } +} + +/* --------------------------------------------------------------------------- */ +.bor { + width: 10px; + height: 10px; +} + +#osn_tab { + position: absolute; + background-color: #fff; + color: #000; + width: 100% !important; +} + +.designer_header { + background-color: #f6f6f6; + border-top: 20px solid #fff; + color: #333; + display: block; + height: 28px; + margin-#{$left}: -20px; + margin-top: -60px; + padding: 5px 20px; + position: fixed; + text-align: center; + width: 100%; + z-index: 101; + + a { + display: block; + float: $left; + margin: 3px 1px 4px; + height: 20px; + } + + .M_bord { + display: block; + float: $left; + margin: 4px; + height: 20px; + width: 2px; + } + + a { + &.first { + margin-#{$right}: 1em; + } + + &.last { + margin-#{$left}: 1em; + } + } +} + +a { + &.M_butt_Selected_down_IE, + &.M_butt_Selected_down, + &.M_butt_Selected_down_IE:hover, + &.M_butt_Selected_down:hover, + &.M_butt:hover { + background-color: #eee; + color: #000; + } +} + +#layer_menu { + z-index: 98; + position: relative; + float: $right; + background-color: #f6f6f6; + border: #ccc solid 1px; + border-top: 0; + margin-#{$right}: -20px; +} + +.content_fullscreen #layer_menu { + margin-#{$right}: 0; +} + +#layer_menu.left { + float: $left; + margin-#{$left}: -20px; +} + +.content_fullscreen #layer_menu.left { + margin-#{$left}: 0; +} + +#layer_upd_relation { + position: absolute; + #{$left}: 637px; + top: 224px; + z-index: 100; +} + +#layer_new_relation, +#designer_optionse { + position: absolute; + #{$left}: 636px; + top: 85px; + z-index: 100; + width: 153px; +} + +#layer_menu_sizer { + background-image: url("../img/designer/resize.png"); + cursor: ew-resize; + + .icon { + margin: 0; + } +} + +.panel { + position: fixed; + top: 90px; + #{$right}: 0; + width: 350px; + max-height: 500px; + display: none; + overflow: auto; + padding-top: 34px; + z-index: 102; +} + +a { + &.trigger { + position: fixed; + text-decoration: none; + top: 90px; + #{$right}: 0; + color: #fff; + padding: 10px 40px 10px 15px; + background: #333 url("../img/designer/plus.png") 85% 55% no-repeat; + border: 1px solid #444; + display: block; + z-index: 102; + + &:hover { + color: #080808; + background: #fff696 url("../img/designer/plus.png") 85% 55% no-repeat; + border: 1px solid #999; + } + } + + &.active.trigger { + background: #222 url("../img/designer/minus.png") 85% 55% no-repeat; + z-index: 999; + + &:hover { + background: #fff696 url("../img/designer/minus.png") 85% 55% no-repeat; + } + } +} + +.toggle_container .block { + background-color: $browse-marker-background; + border-top: 1px solid #999; + + img.ic_s_info { + -webkit-filter: invert(70%); + filter: invert(70%); + } +} + +.history_table { + opacity: 1; + cursor: pointer; +} + +.history_table2 { + opacity: 0.7; +} + +#ab { + min-width: 300px; + + .ui-accordion-content { + padding: 0; + } +} + +#box { + display: none; +} + +#foreignkeychk { + text-align: $left; + position: absolute; + cursor: pointer; +} + +.side-menu { + float: #{$left}; + position: fixed; + width: auto; + height: auto; + background: #efefef; + border: 1px solid #ccc; + border-top: 0; + overflow: hidden; + z-index: 50; + padding: 2px; + margin-top: 0; + margin-#{$left}: -20px; +} + +.content_fullscreen .side-menu { + margin-#{$left}: 0; +} + +.side-menu.right { + float: $right; + #{$right}: 0; +} + +.content_fullscreen .side-menu.right { + margin-#{$right}: 0; +} + +.side-menu { + .hide { + display: none; + } + + a { + display: block; + float: none; + overflow: hidden; + } + + img, + span, + .text { + float: $left; + padding-#{$left}: 2px; + } +} + +#name-panel { + border-bottom: 1px solid #ccc; + text-align: center; + background: #efefef; + font-size: 1.2em; + padding: 10px; + font-weight: bold; + margin-top: -20px; + margin-#{$left}: -20px; + margin-#{$right}: -20px; +} + +.content_fullscreen #name-panel { + margin-top: 0; + margin-#{$left}: 0; + margin-#{$right}: 0; +} + +#container-form { + width: 100%; + position: absolute; + #{$left}: 0; +} diff --git a/srcs/phpmyadmin/themes/metro/scss/_enum-editor.scss b/srcs/phpmyadmin/themes/metro/scss/_enum-editor.scss new file mode 100644 index 0000000..6583f6a --- /dev/null +++ b/srcs/phpmyadmin/themes/metro/scss/_enum-editor.scss @@ -0,0 +1,69 @@ +// ENUM editor styles for the Metro theme + +// 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-#{$left}: 1em; + } + } + + .values { + td.drop { + width: 1.8em; + cursor: pointer; + vertical-align: middle; + } + + input { + margin: 0.1em 0; + padding-#{$right}: 2em; + width: 100%; + } + + img { + vertical-align: middle; + } + } + + input.add_value { + margin: 0; + margin-#{$right}: 0.4em; + } +} + +#enum_editor_output textarea { + width: 100%; + float: $right; + margin: 1em 0 0 0; +} + +// ENUM/SET editor integration for the routines editor +.enum_hint { + position: relative; + + a { + position: absolute; + #{$left}: 81%; + bottom: 0.35em; + } +} diff --git a/srcs/phpmyadmin/themes/metro/scss/_gis.scss b/srcs/phpmyadmin/themes/metro/scss/_gis.scss new file mode 100644 index 0000000..7ba94eb --- /dev/null +++ b/srcs/phpmyadmin/themes/metro/scss/_gis.scss @@ -0,0 +1,34 @@ +// GIS data editor styles for the Metro theme +a.close_gis_editor { + float: $right; +} + +#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/srcs/phpmyadmin/themes/metro/scss/_icons.scss b/srcs/phpmyadmin/themes/metro/scss/_icons.scss new file mode 100644 index 0000000..76634a2 --- /dev/null +++ b/srcs/phpmyadmin/themes/metro/scss/_icons.scss @@ -0,0 +1,675 @@ +.icon { + margin: 0; + margin-#{$left}: 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_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('../../pmahomme/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_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/srcs/phpmyadmin/themes/metro/scss/_jqplot.scss b/srcs/phpmyadmin/themes/metro/scss/_jqplot.scss new file mode 100644 index 0000000..35e27a0 --- /dev/null +++ b/srcs/phpmyadmin/themes/metro/scss/_jqplot.scss @@ -0,0 +1,276 @@ +// Styles for jqPlot for the Metro theme + +// 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: $font-family; + 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-#{$right}: 10px; +} + +.jqplot-y2axis, +.jqplot-y3axis, +.jqplot-y4axis, +.jqplot-y5axis, +.jqplot-y6axis, +.jqplot-y7axis, +.jqplot-y8axis, +.jqplot-y9axis, +.jqplot-yMidAxis { + margin-#{$left}: 10px; + margin-#{$right}: 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 + #{$left}: 15px; + vertical-align: top; +} + +.jqplot-x2axis-tick { + bottom: 0; + // initial position untill tick is drawn in proper place + #{$left}: 15px; + vertical-align: bottom; +} + +.jqplot-yaxis-tick { + #{$right}: 0; + // initial position untill tick is drawn in proper place + top: 15px; + text-align: $right; + + &.jqplot-breakTick { + #{$right}: -20px; + margin-#{$right}: 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 { + #{$left}: 0; + // initial position untill tick is drawn in proper place + top: 15px; + text-align: $left; +} + +.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-#{$right}: 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-#{$left}: 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-#{$left}: 12px; + margin-#{$right}: 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; + #{$left}: 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: 0.75em; + white-space: nowrap; + background: rgba(208, 208, 208, 0.5); + 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; +} + +// Styles added to the plot target container when there is an error go here. +.jqplot-error { + text-align: center; +} + +// Styling of the custom error message div goes here. +.jqplot-error-message { + position: relative; + top: 46%; + display: inline-block; +} + +div { + &.jqplot-bubble-label { + font-size: 0.8em; + padding-#{$left}: 2px; + padding-#{$right}: 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/srcs/phpmyadmin/themes/metro/scss/_navigation.scss b/srcs/phpmyadmin/themes/metro/scss/_navigation.scss new file mode 100644 index 0000000..35e5515 --- /dev/null +++ b/srcs/phpmyadmin/themes/metro/scss/_navigation.scss @@ -0,0 +1,543 @@ +// Navigation styles for the Metro theme +#pma_navigation { + width: $navi-width; + overflow: hidden; + position: fixed; + top: 0; + #{$left}: 0; + height: 100%; + background: $navi-color; + color: $main-color; + z-index: 800; + + input[type="text"] { + background-color: $main-background; + font-family: $font-family; + } + + a { + &:link, + &:visited, + &:active { + text-decoration: none; + color: $navi-pointer-color; + } + + img { + border: 0; + } + } + + select { + &#select_server, + &#lightm_db { + width: 100%; + } + } + + // buttons in some browsers (eg. Konqueror) are block elements, this breaks design + button { + display: inline; + } +} + +#pma_navigation_content { + width: 100%; + position: absolute; + top: 0; + #{$left}: 0; + z-index: 0; +} + +#pma_navigation { + ul { + margin: 0; + } + + form { + margin: 0; + padding: 0; + display: inline; + } + + div.pageselector { + text-align: center; + margin: 0; + margin-#{$left}: 0.75em; + border-#{$left}: 1px solid #666; + } + + #pmalogo { + margin: 0; + padding: 12px; + background: $navi-background; + color: $button-color; + font-size: 14px; + cursor: default; + height: 15px; + line-height: 100%; + box-sizing: content-box; + + &::after { + font-family: $font-family-extra-bold; + text-transform: uppercase; + margin-#{$left}: 5px; + content: "phpMyAdmin"; + } + } + + #imgpmalogo { + display: none; + } + + #recentTableList { + text-align: center; + padding: 10px; + + select { + min-width: 100%; + } + } + + #databaseList { + text-align: center; + margin: 10px; + } + + #navipanellinks { + padding-top: 1em; + padding-bottom: 1em; + text-align: center; + background-color: $border-color; + + a { + box-sizing: content-box; + } + + .icon { + margin: 0; + } + } +} + +div#left_tableList li { + a:first-child::before { + color: $navi-pointer-color; + /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */ + font-family: "IcoMoon"; + content: ""; + margin: 10px; + } + + &:hover a:first-child::before { + color: $button-color; + } +} + +img { + &.ic_b_home, + &.ic_s_loggoff, + &.ic_b_docs, + &.ic_b_sqlhelp, + &.ic_s_reload { + -webkit-filter: invert(70%); + filter: invert(70%); + } +} + +#navipanellinks a { + display: inline-block; + height: 16px; + width: 16px; + color: $main-color; + margin-#{$right}: 10px; + padding: 5px; + font-size: 15px; + + &:hover { + color: $th-color; + } +} + +#pma_navigation { + #serverChoice, + #databaseList, + div.pageselector.dbselector { + text-align: center; + padding: 5px 10px 0; + border: 0; + } +} + +#pma_navigation_content > img.throbber { + display: none; + margin: 0.3em auto 0; +} + +/* Navigation tree */ +#pma_navigation_tree { + margin: 0; + margin-#{$left}: 10px; + overflow: hidden; + height: 74%; + position: relative; +} + +#pma_navigation_select_database { + text-align: $left; + padding: 0 0 0; + border: 0; + margin: 0; +} + +#pma_navigation_db_select { + margin-top: 0.5em; + margin-#{$left}: 0.75em; + + select { + border: 1px solid #bbb; + border-top: 1px solid #bbb; + color: #333; + padding: 4px 6px; + margin: 0 0 0; + width: 92%; + } +} + +#pma_navigation_tree_content { + width: 100%; + overflow: hidden; + overflow-y: auto; + position: absolute; + height: 100%; +} + +#pma_navigation_tree li { + .dbItemControls { + padding-#{$left}: 4px; + } + + .navItemControls { + display: none; + padding-#{$left}: 4px; + } + + &.activePointer .navItemControls { + display: inline; + opacity: 0.5; + + &:hover { + display: inline; + opacity: 1; + } + } +} + +#pma_navigation_tree_content a.hover_show_full { + position: relative; + z-index: 100; +} + +#pma_navigation_tree { + a { + color: $navi-color; + padding-left: 0; + + &:hover { + text-decoration: none; + color: $th-color; + } + } + + li { + margin-bottom: 0; + + &.activePointer, + &.selected { + color: $th-color; + } + } + + ul { + clear: both; + padding: 0; + list-style-type: none; + margin: 0; + + ul { + position: relative; + } + } + + li { + white-space: nowrap; + clear: both; + min-height: 17px; + } + + img { + margin: 0; + } + + i { + display: block; + } + + div { + &.block { + position: relative; + width: 1.5em; + height: 2em; + min-width: 16px; + min-height: 16px; + float: $left; + + &.double { + width: 2.5em; + } + + i, + b { + width: 1.5em; + height: 2em; + min-width: 16px; + min-height: 8px; + position: absolute; + bottom: 0.7em; + #{$left}: 0.75em; + z-index: 0; + margin-top: -4px; + } + + /* Top and right segments for the tree element connections */ + i { + display: block; + border-#{$left}: 1px solid #616161; + border-bottom: 1px solid #616161; + position: relative; + z-index: 0; + + /* Removes top segment */ + &.first { + border-#{$left}: 0; + } + } + + /* Bottom segment for the tree element connections */ + b { + display: block; + height: 0.75em; + bottom: 0; + #{$left}: 0.75em; + border-#{$left}: 1px solid #616161; + } + + a, + u { + position: absolute; + #{$left}: 50%; + top: 50%; + z-index: 10; + } + + a + a { + #{$left}: 100%; + } + + &.double { + a, + u { + #{$left}: 33%; + } + + a + a { + #{$left}: 85%; + } + } + + img { + position: relative; + top: -0.6em; + #{$left}: 0; + margin-#{$left}: -7px; + } + } + + &.throbber img { + top: 2px; + #{$left}: 2px; + } + } + + li { + &.last > ul { + background: none; + } + + > { + a, + i { + line-height: 1.5em; + height: 1.5em; + padding-#{$left}: 0.3em; + } + } + } + + .list_container { + border-#{$left}: 1px solid #616161; + margin-#{$left}: 0.75em; + padding-#{$left}: 0.75em; + } + + .last > .list_container { + border-#{$left}: 0 solid #616161; + } +} + +/* Fast filter */ +li.fast_filter { + padding-#{$left}: 0.75em; + margin-#{$left}: 0.75em; + padding-#{$right}: 15px; + border-#{$left}: 1px solid #616161; + + input { + width: 100%; + background-color: #fff; + border: 1px solid #ccc; + color: #666; + font-family: $font-family; + padding: 2px; + } + + span { + position: relative; + #{$right}: 1.5em; + padding: 0.2em; + cursor: pointer; + font-weight: bold; + color: #800; + } + + &.db_fast_filter { + border: 0; + margin-#{$left}: 0; + margin-#{$right}: 10px; + } +} + +#navigation_controls_outer { + min-height: 21px !important; +} + +#pma_navigation_collapse { + padding-#{$right}: 2px; +} + +#navigation_controls_outer.activePointer { + background-color: transparent !important; +} + +#navigation_controls { + float: $right; + padding-#{$right}: 23px; +} + +/* Resize handler */ +#pma_navigation_resizer { + width: 1px; + height: 100%; + background-color: #aaa; + cursor: col-resize; + position: fixed; + top: 0; + #{$left}: $navi-width; + z-index: 801; +} + +#pma_navigation_collapser { + width: 20px; + padding-top: 4px; + padding-bottom: 12px; + background: $navi-background; + border-bottom: 1px solid $navi-background; + line-height: 22px; + color: #fff; + position: fixed; + top: 0; + #{$left}: $navi-width; + text-align: center; + cursor: pointer; + z-index: 801; +} + +/* Quick warp links */ +.pma_quick_warp { + margin-top: 5px; + margin-#{$left}: 10px; + position: relative; + + .drop_list { + float: $left; + margin-#{$left}: 3px; + padding: 2px 0; + } + + .drop_button { + padding: 0.2em 0.5em; + border: 1px solid #ddd; + background: #f2f2f2; + cursor: pointer; + } + + .drop_list { + &:hover .drop_button { + background: #fff; + } + + ul { + position: absolute; + margin: 0; + padding: 0; + overflow: hidden; + overflow-y: auto; + list-style: none; + background: #fff; + border: 1px solid #ddd; + top: 100%; + #{$left}: 3px; + #{$right}: 0; + display: none; + z-index: 802; + } + + &:hover ul { + display: block; + } + + li { + white-space: nowrap; + padding: 0; + + img { + vertical-align: sub; + } + + &:hover { + background: #f2f2f2; + } + } + + a { + display: block; + padding: 0.2em 0.3em; + + &.favorite_table_anchor { + clear: $left; + float: $left; + padding: 0.1em 0.3em 0; + } + } + } +} diff --git a/srcs/phpmyadmin/themes/metro/scss/_resizable-menu.scss b/srcs/phpmyadmin/themes/metro/scss/_resizable-menu.scss new file mode 100644 index 0000000..42f581b --- /dev/null +++ b/srcs/phpmyadmin/themes/metro/scss/_resizable-menu.scss @@ -0,0 +1,40 @@ +// Styles for the resizable menus (jQuery menuResizer) +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; + #{$right}: 0; + } + + li:hover ul, + .submenuhover ul { + display: block; + background: #fff; + } + + ul li { + width: 100%; + } +} diff --git a/srcs/phpmyadmin/themes/metro/scss/_rte.scss b/srcs/phpmyadmin/themes/metro/scss/_rte.scss new file mode 100644 index 0000000..893867c --- /dev/null +++ b/srcs/phpmyadmin/themes/metro/scss/_rte.scss @@ -0,0 +1,45 @@ +// Styles for management of Routines, Triggers and Events for the Metro theme +.rte_table { + table-layout: fixed; + width: 100%; + + td { + vertical-align: middle; + padding: 0.2em; + } + + tr td:nth-child(1) { + width: 20%; + } + + input, + select, + textarea { + width: 100%; + margin: 0; + box-sizing: border-box; + -ms-box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + } + + input { + &[type="checkbox"], + &[type="radio"] { + width: auto; + margin-#{$right}: 6px; + } + } + + .routine_params_table { + width: 100%; + } + + .half_width { + width: 49%; + } +} + +.ui_tpicker_time_input { + width: 100%; +} diff --git a/srcs/phpmyadmin/themes/metro/scss/_variables.scss b/srcs/phpmyadmin/themes/metro/scss/_variables.scss new file mode 100644 index 0000000..907ae8e --- /dev/null +++ b/srcs/phpmyadmin/themes/metro/scss/_variables.scss @@ -0,0 +1,164 @@ +// configures general layout for detailed layout configuration please refer to the css files + +$navi-width: 250px; +$font-family: "Open Sans", "Segoe UI", sans-serif; +$font-family-light: "Open Sans Light", "Segoe UI Light", "Segoe UI", sans-serif; +$font-family-bold: "Open Sans Bold", sans-serif; +$font-family-extra-bold: "Open Sans Extrabold", "Segoe Black", sans-serif; +$font-family-fixed: Consolas, "Lucida Grande", monospace; + +// Theme color scheme +// Values: "teal", "redmond", "blueeyes", "mono", "win" +// Default: "win" +// Set this value for the desired color scheme +$color-scheme: win !default; + +$navi-color: #eee; +$navi-background: #377796; +$navi-background-light: #428eb4; +$navi-pointer-color: #333; +$navi-pointer-background: #377796; +$navi-database-name-color: #333; +$navi-hover-background: #428eb4; +$main-color: #444; +$main-background: #fff; +$browse-pointer-color: #377796; +$browse-marker-color: #000; +$browse-warning-color: #d44a26; +$browse-success-color: #01a31c; +$browse-gray-color: #ccc; +$browse-marker-background: #eee; +$border-color: #ddd; +$button-color: #fff; +$button-background: #377796; +$button-hover: #428eb4; +$th-background: #f7f7f7; +$th-disabled-background: #f3f3f3; +$th-color: #666; +$th-pointer-color: #000; +$bg-one: #f7f7f7; +$bg-two: #fff; +$blue-header: #3a7ead; + +@if $color-scheme == teal { + $navi-color: #fff; + $navi-background: #004d60; + $navi-background-light: #04627c; + $navi-pointer-color: #666; + $navi-pointer-background: #004d60; + $navi-database-name-color: #fff; + $navi-hover-background: #216475; + $main-color: #444; + $main-background: #fff; + $browse-pointer-color: #004d60; + $browse-marker-color: #000; + $browse-warning-color: #d44a26; + $browse-success-color: #01a31c; + $browse-gray-color: #ccc; + $browse-marker-background: #eee; + $border-color: #ddd; + $button-color: #fff; + $button-background: #aaa; + $button-hover: #000; + $th-background: #f7f7f7; + $th-disabled-background: #f3f3f3; + $th-color: #666; + $th-pointer-color: #000; + $bg-one: #f7f7f7; + $bg-two: #fff; + $blue-header: #3a7ead; +} @else if $color-scheme == redmond { + $navi-color: #fff; + $navi-background: #780505; + $navi-background-light: #a10707; + $navi-pointer-color: #666; + $navi-pointer-background: #780505; + $navi-database-name-color: #fff; + $navi-hover-background: #a10707; + $main-color: #444; + $main-background: #fff; + $browse-pointer-color: #780505; + $browse-marker-color: #000; + $browse-warning-color: #d44a26; + $browse-success-color: #01a31c; + $browse-gray-color: #ccc; + $browse-marker-background: #eee; + $border-color: #ddd; + $button-color: #fff; + $button-background: #aaa; + $button-hover: #000; + $th-background: #f7f7f7; + $th-disabled-background: #f3f3f3; + $th-color: #666; + $th-pointer-color: #000; + $bg-one: #f7f7f7; + $bg-two: #fff; + $blue-header: #3a7ead; +} @else if $color-scheme == blueeyes { + $navi-color: #fff; + $navi-background: #377796; + $navi-background-light: #428eb4; + $navi-pointer-color: #666; + $navi-pointer-background: #377796; + $navi-database-name-color: #fff; + $navi-hover-background: #428eb4; + $main-color: #444; + $main-background: #fff; + $browse-pointer-color: #377796; + $browse-marker-color: #000; + $browse-warning-color: #d44a26; + $browse-success-color: #01a31c; + $browse-gray-color: #ccc; + $browse-marker-background: #eee; + $border-color: #ddd; + $button-color: #fff; + $button-background: #377796; + $button-hover: #000; + $th-background: #f7f7f7; + $th-disabled-background: #f3f3f3; + $th-color: #666; + $th-pointer-color: #000; + $bg-one: #f7f7f7; + $bg-two: #fff; + $blue-header: #3a7ead; +} @else if $color-scheme == mono { + $navi-color: #fff; + $navi-background: #666; + $navi-background-light: #999; + $navi-pointer-color: #666; + $navi-pointer-background: #666; + $navi-database-name-color: #fff; + $navi-hover-background: #999; + $main-color: #444; + $main-background: #fff; + $browse-pointer-color: #666; + $browse-marker-color: #000; + $browse-warning-color: #666; + $browse-success-color: #888; + $browse-gray-color: #ccc; + $browse-marker-background: #eee; + $border-color: #ddd; + $button-color: #fff; + $button-background: #aaa; + $button-hover: #000; + $th-background: #f7f7f7; + $th-disabled-background: #f3f3f3; + $th-color: #666; + $th-pointer-color: #000; + $bg-one: #f7f7f7; + $bg-two: #fff; + $blue-header: #555; +} + +// Bootstrap + +$enable-transitions: false; + +$primary: $browse-pointer-color; +$secondary: $browse-gray-color; + +$font-size-base: 0.8rem; + +$btn-border-radius: 0; +$btn-line-height: 1; +$btn-padding-x: 0.5rem; diff --git a/srcs/phpmyadmin/themes/metro/scss/blueeyes-theme-rtl.scss b/srcs/phpmyadmin/themes/metro/scss/blueeyes-theme-rtl.scss new file mode 100644 index 0000000..aeaa7f7 --- /dev/null +++ b/srcs/phpmyadmin/themes/metro/scss/blueeyes-theme-rtl.scss @@ -0,0 +1,4 @@ +$color-scheme: blueeyes; +$direction: rtl; + +@import "theme"; diff --git a/srcs/phpmyadmin/themes/metro/scss/blueeyes-theme.scss b/srcs/phpmyadmin/themes/metro/scss/blueeyes-theme.scss new file mode 100644 index 0000000..751d929 --- /dev/null +++ b/srcs/phpmyadmin/themes/metro/scss/blueeyes-theme.scss @@ -0,0 +1,3 @@ +$color-scheme: blueeyes; + +@import "theme"; diff --git a/srcs/phpmyadmin/themes/metro/scss/mono-theme-rtl.scss b/srcs/phpmyadmin/themes/metro/scss/mono-theme-rtl.scss new file mode 100644 index 0000000..7b382a2 --- /dev/null +++ b/srcs/phpmyadmin/themes/metro/scss/mono-theme-rtl.scss @@ -0,0 +1,4 @@ +$color-scheme: mono; +$direction: rtl; + +@import "theme"; diff --git a/srcs/phpmyadmin/themes/metro/scss/mono-theme.scss b/srcs/phpmyadmin/themes/metro/scss/mono-theme.scss new file mode 100644 index 0000000..c6725c2 --- /dev/null +++ b/srcs/phpmyadmin/themes/metro/scss/mono-theme.scss @@ -0,0 +1,3 @@ +$color-scheme: mono; + +@import "theme"; diff --git a/srcs/phpmyadmin/themes/metro/scss/printview.scss b/srcs/phpmyadmin/themes/metro/scss/printview.scss new file mode 100644 index 0000000..1555f13 --- /dev/null +++ b/srcs/phpmyadmin/themes/metro/scss/printview.scss @@ -0,0 +1,186 @@ +@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; +} + +th { + &.column_heading, + &.column_action { + border: 0.1em solid #000; + } +} + +table { + tr { + &.odd, + &.even { + border-left: 0.1em solid #000; + } + + &.odd th, + &.even th { + border-bottom: 0.1em solid #000; + } + } + + &.data th { + border-bottom: 0.1em solid #000; + } +} + +// 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; +} + +// For the Success message div +.sqlOuter { + color: black; +} + +// For hiding 'Open a New phpMyAdmin Window' button +// Hide extra menu on tbl_structure.php +.ic_window-new, +.ic_s_cog, +.sticky_columns tr, +#structure-action-links, +#addColumns, +#topmenu2, +.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/srcs/phpmyadmin/themes/metro/scss/redmond-theme-rtl.scss b/srcs/phpmyadmin/themes/metro/scss/redmond-theme-rtl.scss new file mode 100644 index 0000000..4baa0a0 --- /dev/null +++ b/srcs/phpmyadmin/themes/metro/scss/redmond-theme-rtl.scss @@ -0,0 +1,4 @@ +$color-scheme: redmond; +$direction: rtl; + +@import "theme"; diff --git a/srcs/phpmyadmin/themes/metro/scss/redmond-theme.scss b/srcs/phpmyadmin/themes/metro/scss/redmond-theme.scss new file mode 100644 index 0000000..cc07956 --- /dev/null +++ b/srcs/phpmyadmin/themes/metro/scss/redmond-theme.scss @@ -0,0 +1,3 @@ +$color-scheme: redmond; + +@import "theme"; diff --git a/srcs/phpmyadmin/themes/metro/scss/teal-theme-rtl.scss b/srcs/phpmyadmin/themes/metro/scss/teal-theme-rtl.scss new file mode 100644 index 0000000..88b0f3d --- /dev/null +++ b/srcs/phpmyadmin/themes/metro/scss/teal-theme-rtl.scss @@ -0,0 +1,4 @@ +$color-scheme: teal; +$direction: rtl; + +@import "theme"; diff --git a/srcs/phpmyadmin/themes/metro/scss/teal-theme.scss b/srcs/phpmyadmin/themes/metro/scss/teal-theme.scss new file mode 100644 index 0000000..48d6f91 --- /dev/null +++ b/srcs/phpmyadmin/themes/metro/scss/teal-theme.scss @@ -0,0 +1,3 @@ +$color-scheme: teal; + +@import "theme"; diff --git a/srcs/phpmyadmin/themes/metro/scss/theme-rtl.scss b/srcs/phpmyadmin/themes/metro/scss/theme-rtl.scss new file mode 100644 index 0000000..251a1f0 --- /dev/null +++ b/srcs/phpmyadmin/themes/metro/scss/theme-rtl.scss @@ -0,0 +1,3 @@ +$direction: rtl; + +@import "theme"; diff --git a/srcs/phpmyadmin/themes/metro/scss/theme.scss b/srcs/phpmyadmin/themes/metro/scss/theme.scss new file mode 100644 index 0000000..11389ab --- /dev/null +++ b/srcs/phpmyadmin/themes/metro/scss/theme.scss @@ -0,0 +1,13 @@ +@import "../../pmahomme/scss/direction"; +@import "variables"; +@import "../../pmahomme/scss/bootstrap"; +@import "common"; +@import "enum-editor"; +@import "gis"; +@import "navigation"; +@import "designer"; +@import "rte"; +@import "codemirror"; +@import "jqplot"; +@import "resizable-menu"; +@import "icons"; |