Merge pull request #14210 from mauriciofauth/themes

Add Metro theme

themes/.gitignore

@@ -4,3 +4,4 @@
 !/svg_gradient.php
 !/original/
 !/pmahomme/
+!/metro/

themes/metro/css/codemirror.css.php

@@ -0,0 +1,77 @@
+<?php
+
+// unplanned execution path
+if (! defined('PMA_MINIMUM_COMMON') && ! defined('TESTSUITE')) {
+    exit();
+}
+?>
+
+.CodeMirror {
+    font-family: <?php echo $GLOBALS['cfg']['FontFamilyFixed']; ?> !important;
+    height: <?php echo ceil($GLOBALS['cfg']['TextareaRows'] * 1.2); ?>em;
+    border: 1px solid #ccc;
+    direction: ltr;
+}
+#pma_console .CodeMirror {
+    border: none;
+}
+.CodeMirror * {
+    font-family: <?php echo $GLOBALS['cfg']['FontFamilyFixed']; ?>;
+}
+#inline_editor_outer .CodeMirror {
+    height: <?php echo ceil($GLOBALS['cfg']['TextareaRows'] * 0.4); ?>em;
+    margin-bottom: 10px;
+}
+.insertRowTable .CodeMirror {
+    height: <?php echo ceil($GLOBALS['cfg']['TextareaRows'] * 0.6); ?>em;
+    width: <?php echo ceil($GLOBALS['cfg']['TextareaCols'] * 0.6); ?>em;
+}
+#pma_console .CodeMirror-gutters {
+    background-color: initial;
+    border: none;
+}
+span.cm-keyword, span.cm-statement-verb {
+    color: #909;
+}
+span.cm-variable {
+    color: black;
+}
+span.cm-comment {
+    color: #808000;
+}
+span.cm-mysql-string {
+    color: #008000;
+}
+span.cm-operator {
+    color: fuchsia;
+}
+span.cm-mysql-word {
+    color: black;
+}
+span.cm-builtin {
+    color: #f00;
+}
+span.cm-variable-2 {
+    color: #f90;
+}
+span.cm-variable-3 {
+    color: #00f;
+}
+span.cm-separator {
+    color: fuchsia;
+}
+span.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: 200;
+}

themes/metro/css/designer.css.php

@@ -0,0 +1,470 @@
+<?php
+
+// unplanned execution path
+if (! defined('PMA_MINIMUM_COMMON') && ! defined('TESTSUITE')) {
+    exit();
+}
+?>
+
+/* Designer */
+.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;
+}
+
+canvas.designer * {
+    behavior: url(#default#VML);
+}
+
+.designer_tab {
+    color: #333;
+    border-collapse: collapse;
+    border: 1px solid #ccc;
+    z-index: 1;
+    -moz-user-select: none;
+}
+
+.designer_tab .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;
+}
+
+.tab_field:hover, .tab_field_3:hover {
+    background-color: #CCFFCC;
+    color: #000;
+    background-repeat: repeat-x;
+    cursor: default;
+}
+
+.tab_field_3 {
+    background-color: #FFE6E6; /*#DDEEFF*/
+    color: #000;
+    cursor: default;
+}
+
+#designer_hint {
+    white-space: nowrap;
+    position: absolute;
+    background-color: #99FF99;
+    color: #000;
+    z-index: 3;
+    border: #00CC66 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: <?php echo $left; ?>;
+    border: #ccc solid 0;
+}
+
+.designer_Tabs:hover {
+    cursor: default;
+    color: #666;
+    background: #eee;
+    text-indent: 3px;
+    white-space: nowrap;
+    text-decoration: none;
+    border: #eee solid 0;
+    text-align: <?php echo $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;
+}
+
+.small_tab:hover {
+    vertical-align: top;
+    color: #fff;
+    background-color: #FF9966;
+    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;
+}
+
+.small_tab_pref:hover {
+    vertical-align: top;
+    color: #fff;
+    background-color: #FF9966;
+    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;
+}
+
+.L_butt2_1: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 #FFFFFF;
+    color: #333333;
+    display: block;
+    height: 28px;
+    margin-left: -20px;
+    margin-top: -60px;
+    padding: 5px 20px;
+    position: fixed;
+    text-align: center;
+    width: 100%;
+    z-index: 101;
+}
+
+.designer_header a {
+    display: block;
+    float: <?php echo $left; ?>;
+    margin: 3px 1px 4px;
+    height: 20px;
+}
+
+.designer_header .M_bord {
+    display: block;
+    float: <?php echo $left; ?>;
+    margin: 4px;
+    height: 20px;
+    width: 2px;
+}
+
+.designer_header a.first {
+    margin-right: 1em;
+}
+
+.designer_header a.last {
+    margin-left: 1em;
+}
+
+a.M_butt_Selected_down_IE,
+a.M_butt_Selected_down {
+    background-color: #eee;
+    color: #000;
+}
+
+a.M_butt_Selected_down_IE:hover,
+a.M_butt_Selected_down:hover,
+a.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;
+    <?php echo $left; ?>: 637px;
+    top: 224px;
+    z-index: 100;
+}
+
+#layer_new_relation {
+    position: absolute;
+    <?php echo $left; ?>: 636px;
+    top: 85px;
+    z-index: 100;
+    width: 153px;
+}
+
+#designer_optionse {
+    position: absolute;
+    <?php echo $left; ?>: 636px;
+    top: 85px;
+    z-index: 100;
+    width: 153px;
+}
+
+#layer_menu_sizer {
+    background-image: url(<?php echo $theme->getImgPath('designer/resize.png'); ?>);
+    cursor: ew-resize;
+}
+
+#layer_menu_sizer .icon {
+    margin: 0;
+}
+
+.panel {
+    position: fixed;
+    top: 90px;
+    <?php echo $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;
+    <?php echo $right; ?>: 0;
+    color: #fff;
+    padding: 10px 40px 10px 15px;
+    background: #333 url(<?php echo $theme->getImgPath('designer/plus.png'); ?>) 85% 55% no-repeat;
+    border: 1px solid #444;
+    display: block;
+    z-index: 102;
+}
+
+a.trigger:hover {
+    color: #080808;
+    background: #fff696 url(<?php echo $theme->getImgPath('designer/plus.png'); ?>) 85% 55% no-repeat;
+    border: 1px solid #999;
+}
+
+a.active.trigger {
+    background: #222 url(<?php echo $theme->getImgPath('designer/minus.png'); ?>) 85% 55% no-repeat;
+    z-index: 999;
+}
+
+a.active.trigger:hover {
+    background: #fff696 url(<?php echo $theme->getImgPath('designer/minus.png'); ?>) 85% 55% no-repeat;
+}
+
+.toggle_container .block {
+    background-color: <?php echo $GLOBALS['cfg']['BrowseMarkerBackground'] ?>;
+    border-top: 1px solid #999;
+}
+
+.toggle_container .block img.ic_s_info {
+    -webkit-filter: invert(70%);
+    filter: invert(70%);
+}
+
+.history_table {
+    opacity: 1.0;
+    cursor: pointer;
+}
+
+.history_table2 {
+    opacity: 0.7;
+}
+
+#ab {
+    min-width: 300px;
+}
+
+#ab .ui-accordion-content {
+    padding: 0;
+}
+
+#box {
+    display: none;
+}
+
+#foreignkeychk {
+    text-align: <?php echo $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;
+}
+
+.side-menu a {
+    display: block;
+    float: none;
+    overflow: hidden;
+}
+
+.side-menu img,
+.side-menu span,
+.side-menu .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;
+}

themes/metro/css/enum_editor.css.php

@@ -0,0 +1,73 @@
+<?php
+
+// unplanned execution path
+if (! defined('PMA_MINIMUM_COMMON') && ! defined('TESTSUITE')) {
+    exit();
+}
+?>
+
+/**
+ * ENUM/SET editor styles
+ */
+p.enum_notice {
+    margin: 5px 2px;
+    font-size: 80%;
+}
+
+#enum_editor p {
+    margin-top: 0;
+    font-style: italic;
+}
+
+#enum_editor .values,
+#enum_editor .add {
+    width: 100%;
+}
+
+#enum_editor .add td {
+    vertical-align: middle;
+    width: 50%;
+    padding: 0 0 0;
+    padding-<?php echo $left; ?>: 1em;
+}
+
+#enum_editor .values td.drop {
+    width: 1.8em;
+    cursor: pointer;
+    vertical-align: middle;
+}
+
+#enum_editor .values input {
+    margin: .1em 0;
+    padding-<?php echo $right; ?>: 2em;
+    width: 100%;
+}
+
+#enum_editor .values img {
+    width: 1.8em;
+    vertical-align: middle;
+}
+
+#enum_editor input.add_value {
+    margin: 0;
+    margin-<?php echo $right; ?>: 0.4em;
+}
+
+#enum_editor_output textarea {
+    width: 100%;
+    float: <?php echo $right; ?>;
+    margin: 1em 0 0 0;
+}
+
+/**
+ * ENUM/SET editor integration for the routines editor
+ */
+.enum_hint {
+    position: relative;
+}
+
+.enum_hint a {
+    position: absolute;
+    <?php echo $left; ?>: 81%;
+    bottom: .35em;
+}

themes/metro/css/gis.css.php

@@ -0,0 +1,45 @@
+<?php
+
+// unplanned execution path
+if (! defined('PMA_MINIMUM_COMMON') && ! defined('TESTSUITE')) {
+    exit();
+}
+?>
+
+/**
+ * GIS data editor styles
+ */
+a.close_gis_editor {
+    float: <?php echo $right; ?>;
+}
+
+#gis_editor {
+    display: none;
+    position: fixed;
+    _position: absolute; /* hack for IE */
+    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;
+}
+
+#gis_data_editor .choice {
+    display: none;
+}
+
+#gis_data_editor input[type="text"] {
+    width: 75px;
+}

themes/metro/css/jqplot.css.php

@@ -0,0 +1,269 @@
+<?php
+
+// unplanned execution path
+if (! defined('PMA_MINIMUM_COMMON') && ! defined('TESTSUITE')) {
+    exit();
+}
+?>
+
+/* jqPlot */
+
+/*rules for the plot target div.  These will be cascaded down to all plot elements according to css rules*/
+.jqplot-target {
+    position: relative;
+    color: #222222;
+    font-family: "open sans", "segoe ui";
+    font-size: 1em;
+/*    height: 300px;
+    width: 590px;*/
+}
+
+/*rules applied to all axes*/
+.jqplot-axis {
+    font-size: 0.75em;
+}
+
+.jqplot-xaxis {
+    margin-top: 10px;
+}
+
+.jqplot-x2axis {
+    margin-bottom: 10px;
+}
+
+.jqplot-yaxis {
+    margin-<?php echo $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 */
+    <?php echo $left; ?>: 15px;
+/*    padding-top: 10px;*/
+    vertical-align: top;
+}
+
+.jqplot-x2axis-tick {
+    bottom: 0;
+    /* initial position untill tick is drawn in proper place */
+    <?php echo $left; ?>: 15px;
+/*    padding-bottom: 10px;*/
+    vertical-align: bottom;
+}
+
+.jqplot-yaxis-tick {
+    <?php echo $right; ?>: 0;
+    /* initial position untill tick is drawn in proper place */
+    top: 15px;
+/*    padding-right: 10px;*/
+    text-align: <?php echo $right; ?>;
+}
+
+.jqplot-yaxis-tick.jqplot-breakTick {
+    <?php echo $right; ?>: -20px;
+    margin-<?php echo $right; ?>: 0;
+    padding:1px 5px 1px;
+/*    background-color: white;*/
+    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 {
+    <?php echo $left; ?>: 0;
+    /* initial position untill tick is drawn in proper place */
+    top: 15px;
+/*    padding-left: 10px;*/
+/*    padding-right: 15px;*/
+    text-align: <?php echo $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;
+/*    text-align: center;*/
+    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 {
+/*    text-align: center;*/
+    font-size: 11pt;
+    margin-<?php echo $left; ?>: 10px;
+    position: absolute;
+}
+
+.jqplot-meterGauge-tick {
+    font-size: 0.75em;
+    color: #999999;
+}
+
+.jqplot-meterGauge-label {
+    font-size: 1em;
+    color: #999999;
+}
+
+table.jqplot-table-legend {
+    margin-top: 12px;
+    margin-bottom: 12px;
+    margin-left: 12px;
+    margin-right: 12px;
+}
+
+table.jqplot-table-legend, table.jqplot-cursor-legend {
+    background-color: rgba(255,255,255,0.6);
+    border: 1px solid #cccccc;
+    position: absolute;
+    font-size: 0.75em;
+}
+
+td.jqplot-table-legend {
+    vertical-align: middle;
+}
+
+/*
+These rules could be used instead of assigning
+element styles and relying on js object properties.
+*/
+
+/*
+td.jqplot-table-legend-swatch {
+    padding-top: 0.5em;
+    text-align: center;
+}
+
+tr.jqplot-table-legend:first td.jqplot-table-legend-swatch {
+    padding-top: 0;
+}
+*/
+
+td.jqplot-seriesToggle:hover, td.jqplot-seriesToggle:active {
+    cursor: pointer;
+}
+
+.jqplot-table-legend .jqplot-series-hidden {
+    text-decoration: line-through;
+}
+
+div.jqplot-table-legend-swatch-outline {
+    border: 1px solid #cccccc;
+    padding: 1px;
+}
+
+div.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;
+    <?php echo $left; ?>: 0;
+    padding-bottom: 0.5em;
+    font-size: 1.2em;
+}
+
+table.jqplot-cursor-tooltip {
+    border: 1px solid #cccccc;
+    font-size: 0.75em;
+}
+
+
+.jqplot-cursor-tooltip {
+    border: 1px solid #cccccc;
+    font-size: 0.75em;
+    white-space: nowrap;
+    background: rgba(208,208,208,0.5);
+    padding: 1px;
+}
+
+.jqplot-highlighter-tooltip, .jqplot-canvasOverlay-tooltip {
+    border: 1px solid #cccccc;
+    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;
+}
+
+.jqplot-error {
+/*   Styles added to the plot target container when there is an error go here.*/
+    text-align: center;
+}
+
+.jqplot-error-message {
+/*    Styling of the custom error message div goes here.*/
+    position: relative;
+    top: 46%;
+    display: inline-block;
+}
+
+div.jqplot-bubble-label {
+    font-size: 0.8em;
+/*    background: rgba(90%, 90%, 90%, 0.15);*/
+    padding-left: 2px;
+    padding-right: 2px;
+    color: rgb(20%, 20%, 20%);
+}
+
+div.jqplot-bubble-label.jqplot-bubble-label-highlight {
+    background: rgba(90%, 90%, 90%, 0.7);
+}
+
+div.jqplot-noData-container {
+    text-align: center;
+    background-color: rgba(96%, 96%, 96%, 0.3);
+}

themes/metro/css/navigation.css.php

@@ -0,0 +1,490 @@
+<?php
+
+// unplanned execution path
+if (! defined('PMA_MINIMUM_COMMON') && ! defined('TESTSUITE')) {
+    exit();
+}
+?>
+
+/******************************************************************************/
+/* Navigation */
+
+#pma_navigation {
+    width: <?php echo $GLOBALS['cfg']['NaviWidth']; ?>px;
+    overflow: hidden;
+    position: fixed;
+    top: 0;
+    <?php echo $left; ?>: 0;
+    height: 100%;
+    background: <?php echo $GLOBALS['cfg']['NaviColor']; ?>;
+    color: <?php echo $GLOBALS['cfg']['MainColor']; ?>;
+    z-index: 800;
+}
+
+#pma_navigation select,
+#pma_navigation#recentTable
+{
+}
+
+#pma_navigation input[type=text]
+{
+    background-color: <?php echo $GLOBALS['cfg']['MainBackground']; ?>;
+    font-family: <?php echo $GLOBALS['cfg']['FontFamily']; ?>;
+}
+
+#pma_navigation a img
+{
+    border: 0;
+}
+
+#pma_navigation a:link,
+#pma_navigation a:visited,
+#pma_navigation a:active
+{
+    text-decoration: none;
+    color: <?php echo $GLOBALS['cfg']['NaviPointerColor']; ?>;
+}
+
+#pma_navigation select#select_server,
+#pma_navigation select#lightm_db
+{
+    width: 100%;
+}
+
+/* buttons in some browsers (eg. Konqueror) are block elements,
+   this breaks design */
+
+#pma_navigation button
+{
+    display: inline;
+}
+
+#pma_navigation_content {
+    width: 100%;
+    position: absolute;
+    top: 0;
+    <?php echo $left; ?>: 0;
+    z-index: 0;
+}
+
+#pma_navigation ul {
+    margin: 0;
+}
+
+#pma_navigation form {
+    margin: 0;
+    padding: 0;
+    display: inline;
+}
+
+
+/******************************************************************************/
+/* specific elements */
+
+#pma_navigation div.pageselector {
+    text-align: center;
+    margin: 0;
+    margin-<?php echo $left; ?>: 0.75em;
+    border-<?php echo $left; ?>: 1px solid #666;
+}
+
+#pma_navigation #pmalogo:after
+{
+    font-family: 'Open Sans Extrabold';
+    text-transform: uppercase;
+    margin-left: 5px;
+    content: 'phpMyAdmin';
+}
+
+#pma_navigation #pmalogo
+{
+    margin: 0;
+    padding: 12px;
+    background: <?php echo $GLOBALS['cfg']['NaviBackground']; ?>;
+    color: <?php echo $GLOBALS['cfg']['ButtonColor']; ?>;
+    font-size: 14px;
+    cursor: default;
+    height: 15px;
+    line-height: 100%;
+}
+
+#pma_navigation #imgpmalogo
+{
+    display: none;
+}
+
+#pma_navigation #recentTableList
+{
+    text-align: center;
+    padding: 10px;
+}
+
+#pma_navigation #recentTableList select
+{
+    min-width: 100%;
+}
+
+#pma_navigation #databaseList
+{
+    text-align: center;
+    margin: 10px;
+}
+
+#pma_navigation #navipanellinks
+{
+    padding-top: 1em;
+    padding-bottom: 1em;
+    text-align: center;
+    background-color: <?php echo $GLOBALS['cfg']['BorderColor']; ?>;
+}
+
+div#left_tableList li a:first-child:before
+{
+    color: <?php echo $GLOBALS['cfg']['NaviPointerColor']; ?>;
+    font-family: 'IcoMoon';
+    content: "";
+    margin: 10px;
+}
+
+div#left_tableList li:hover a:first-child:before
+{
+    color: <?php echo $GLOBALS['cfg']['ButtonColor']; ?>;
+}
+
+img.ic_b_home, img.ic_s_loggoff, img.ic_b_docs, img.ic_b_sqlhelp, img.ic_s_reload
+{
+    -webkit-filter: invert(70%);
+    filter: invert(70%);
+}
+
+#navipanellinks a
+{
+    display: inline-block;
+    height: 16px;
+    width: 16px;
+    color: <?php echo $GLOBALS['cfg']['MainColor']; ?>;
+    margin-right: 10px;
+    padding: 5px;
+    font-size: 15px;
+}
+
+#navipanellinks a:hover
+{
+    color: <?php echo $GLOBALS['cfg']['ThColor']; ?>;
+}
+
+#pma_navigation #serverChoice,
+#pma_navigation #databaseList,
+#pma_navigation div.pageselector.dbselector {
+    text-align: center;
+    padding: 5px 10px 0;
+    border: 0;
+}
+
+#pma_navigation_content > img.throbber {
+    display: none;
+    margin: .3em auto 0;
+}
+
+/* Navigation tree*/
+#pma_navigation_tree {
+    margin: 0;
+    margin-<?php echo $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-<?php echo $left; ?>: 0.75em;
+}
+#pma_navigation_db_select 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;
+}
+#pma_navigation_tree li .navItemControls {
+    display: none;
+    padding-left: 4px;
+}
+#pma_navigation_tree li.activePointer .navItemControls {
+    display: inline;
+    opacity: 0.5;
+}
+#pma_navigation_tree li.activePointer .navItemControls:hover {
+    display: inline;
+    opacity: 1.0;
+}
+#pma_navigation_tree_content a.hover_show_full {
+    position: relative;
+    z-index: 100;
+}
+#pma_navigation_tree a {
+    color: <?php echo $GLOBALS['cfg']['NaviColor']; ?>;
+}
+#pma_navigation_tree a:hover {
+    text-decoration: none;
+    color: <?php echo $GLOBALS['cfg']['ThColor']; ?>;
+}
+#pma_navigation_tree li.activePointer {
+    color: <?php echo $GLOBALS['cfg']['ThColor']; ?>;
+}
+#pma_navigation_tree li.selected {
+    color: <?php echo $GLOBALS['cfg']['ThColor']; ?>;
+}
+#pma_navigation_tree ul {
+    clear: both;
+    padding: 0;
+    list-style-type: none;
+    margin: 0;
+}
+#pma_navigation_tree ul ul {
+    position: relative;
+}
+#pma_navigation_tree li {
+    white-space: nowrap;
+    clear: both;
+    min-height: 17px;
+}
+#pma_navigation_tree img {
+    margin: 0;
+}
+#pma_navigation_tree i {
+    display: block;
+}
+#pma_navigation_tree div.block {
+    position: relative;
+    width: 1.5em;
+    height: 2em;
+    min-width: 16px;
+    min-height: 16px;
+    float: <?php echo $left; ?>;
+}
+#pma_navigation_tree div.block.double {
+    width: 2.5em;
+}
+#pma_navigation_tree div.block i,
+#pma_navigation_tree div.block b {
+    width: 1.5em;
+    height: 2em;
+    min-width: 16px;
+    min-height: 8px;
+    position: absolute;
+    bottom: 0.7em;
+    <?php echo $left; ?>: 0.75em;
+    z-index: 0;
+    margin-top: -4px;
+}
+#pma_navigation_tree div.block i { /* Top and right segments for the tree element connections */
+    display: block;
+    border-<?php echo $left; ?>: 1px solid #616161;
+    border-bottom: 1px solid #616161;
+    position: relative;
+    z-index: 0;
+}
+#pma_navigation_tree div.block i.first { /* Removes top segment */
+    border-<?php echo $left; ?>: 0;
+}
+#pma_navigation_tree div.block b { /* Bottom segment for the tree element connections */
+    display: block;
+    height: 0.75em;
+    bottom: 0;
+    <?php echo $left; ?>: 0.75em;
+    border-<?php echo $left; ?>: 1px solid #616161;
+}
+#pma_navigation_tree div.block a,
+#pma_navigation_tree div.block u {
+    position: absolute;
+    <?php echo $left; ?>: 50%;
+    top: 50%;
+    z-index: 10;
+}
+#pma_navigation_tree div.block a + a {
+    <?php echo $left; ?>: 100%;
+}
+#pma_navigation_tree div.block.double a,
+#pma_navigation_tree div.block.double u {
+    <?php echo $left; ?>: 33%;
+}
+#pma_navigation_tree div.block.double a + a {
+    <?php echo $left; ?>: 85%;
+}
+#pma_navigation_tree div.block img {
+    position: relative;
+    top: -0.6em;
+    <?php echo $left; ?>: 0;
+    margin-<?php echo $left; ?>: -7px;
+}
+#pma_navigation_tree div.throbber img {
+    top: 2px;
+    <?php echo $left; ?>: 2px;
+}
+#pma_navigation_tree li.last > ul {
+    background: none;
+}
+#pma_navigation_tree li > a, #pma_navigation_tree li > i {
+    line-height: 1.5em;
+    height: 1.5em;
+    padding-<?php echo $left; ?>: 0.3em;
+}
+#pma_navigation_tree .list_container {
+    border-<?php echo $left; ?>: 1px solid #616161;
+    margin-<?php echo $left; ?>: 0.75em;
+    padding-<?php echo $left; ?>: 0.75em;
+}
+#pma_navigation_tree .last > .list_container {
+    border-<?php echo $left; ?>: 0 solid #616161;
+}
+
+/* Fast filter */
+li.fast_filter {
+    padding-<?php echo $left; ?>: 0.75em;
+    margin-<?php echo $left; ?>: 0.75em;
+    padding-<?php echo $right; ?>: 15px;
+    border-<?php echo $left; ?>: 1px solid #616161;
+}
+li.fast_filter input {
+    width: 100%;
+    background-color: #FFFFFF;
+    border: 1px solid #CCCCCC;
+    color: #666666;
+    font-family: "Open Sans","Segoe UI";
+    padding: 2px;
+}
+
+li.fast_filter span {
+    position: relative;
+    <?php echo $right; ?>: 1.5em;
+    padding: 0.2em;
+    cursor: pointer;
+    font-weight: bold;
+    color: #800;
+}
+li.fast_filter.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;
+    <?php echo $left; ?>: 250px;
+    z-index: 801;
+}
+
+#pma_navigation_collapser {
+    width: 20px;
+    padding-top: 4px;
+    padding-bottom: 12px;
+    background: <?php echo $GLOBALS['cfg']['NaviBackground']; ?>;
+    border-bottom: 1px solid <?php echo $GLOBALS['cfg']['NaviBackground']; ?>;
+    line-height: 22px;
+    color: #fff;
+    position: fixed;
+    top: 0;
+    <?php echo $left; ?>: <?php echo $GLOBALS['cfg']['NaviWidth']; ?>px;
+    text-align: center;
+    cursor: pointer;
+    z-index: 801;
+}
+
+/* Quick warp links */
+.pma_quick_warp {
+    margin-top: 5px;
+    margin-<?php echo $left; ?>: 10px;
+    position: relative;
+}
+.pma_quick_warp .drop_list {
+    float: <?php echo $left; ?>;
+    margin-<?php echo $left; ?>: 3px;
+    padding: 2px 0;
+}
+.pma_quick_warp .drop_button {
+    padding: .2em .5em;
+    border: 1px solid #ddd;
+    background: #f2f2f2;
+    cursor: pointer;
+}
+.pma_quick_warp .drop_list:hover .drop_button {
+    background: #fff;
+}
+.pma_quick_warp .drop_list ul {
+    position: absolute;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    overflow-y: auto;
+    list-style: none;
+    background: #fff;
+    border: 1px solid #ddd;
+    top: 100%;
+    <?php echo $left; ?>: 3px;
+    <?php echo $right; ?>: 0;
+    display: none;
+    z-index: 802;
+}
+.pma_quick_warp .drop_list:hover ul {
+    display: block;
+}
+.pma_quick_warp .drop_list li {
+    white-space: nowrap;
+    padding: 0;
+}
+.pma_quick_warp .drop_list li img {
+    vertical-align: sub;
+}
+.pma_quick_warp .drop_list li:hover {
+    background: #f2f2f2;
+}
+.pma_quick_warp .drop_list a {
+    display: block;
+    padding: .2em .3em;
+}
+.pma_quick_warp .drop_list a.favorite_table_anchor {
+    clear: left;
+    float: left;
+    padding: .1em .3em 0;
+}

themes/metro/css/printview.css

@@ -0,0 +1,176 @@
+@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: .1em solid #000;
+    background-color: #fff;
+}
+
+table {
+    border-collapse:   collapse;
+    border-spacing:    0.2em;
+}
+
+thead {
+    border-collapse:   collapse;
+    border-spacing:    0.2em;
+    border: .1em solid #000;
+    font-weight: 900;
+}
+
+th, td {
+    padding:           0.2em;
+}
+
+thead th {
+    font-weight:       bold;
+    background-color:  #e5e5e5;
+    border: .1em solid #000;
+}
+
+th.vtop, td.vtop {
+    vertical-align: top;
+}
+
+th.vbottom, td.vbottom {
+    vertical-align: bottom;
+}
+
+th.column_heading, th.column_action {
+    border: .1em solid #000;
+}
+
+table tr.odd, table tr.even {
+    border-left: .1em solid #000;
+}
+
+table tr.odd th, table tr.even th, table.data th {
+    border-bottom: .1em solid #000;
+}
+
+/* Common Elements not to be included */
+/* Hide Navigation and Top Menu bar */
+#pma_navigation, #floating_menubar {
+    display: none;
+}
+/* Hide console */
+#pma_console_container {
+    display: none;
+}
+
+/* Hide Navigation items (like Goto Top) */
+#page_nav_icons {
+    display: none;
+}
+
+/* Hide the Create Table form */
+#create_table_form_minimal {
+    display: none;
+}
+
+/* Hide the Page Settings Modal box */
+#page_settings_modal {
+    display: none;
+}
+
+/* Hide footer, Demo notice, errors div */
+#pma_footer, #pma_demo, #pma_errors {
+    display: none;
+}
+
+/* Hide the #selflink div */
+#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 */
+.ic_window-new, .ic_s_cog {
+    display: none;
+}
+
+.sticky_columns tr {
+    display: none;
+}
+
+#structure-action-links, #addColumns {
+    display: none;
+}
+
+/* Hide extra menu on tbl_structure.php */
+#topmenu2 {
+    display: none;
+}
+
+.cDrop, .cEdit, .cList, .cCpy, .cPointer {
+    display: none;
+}
+
+/* odd items 1,3,5,7,... */
+table tbody:first-of-type tr:nth-child(odd),
+table tbody:first-of-type tr:nth-child(odd) th {
+    background: #fff;
+}
+
+/* even items 2,4,6,8,... */
+table tbody:first-of-type tr:nth-child(even),
+table tbody:first-of-type tr:nth-child(even) th {
+    background: #dfdfdf;
+}
+
+.column_attribute {
+    font-size: 100%;
+}

themes/metro/css/resizable-menu.css.php

@@ -0,0 +1,44 @@
+<?php
+
+// unplanned execution path
+if (! defined('PMA_MINIMUM_COMMON') && ! defined('TESTSUITE')) {
+    exit();
+}
+?>
+ul.resizable-menu a,
+ul.resizable-menu span {
+    display: block;
+    margin: 0;
+    padding: 0;
+    white-space: nowrap;
+}
+
+ul.resizable-menu .submenu {
+    display: none;
+    position: relative;
+}
+
+ul.resizable-menu .shown {
+    display: inline-block;
+}
+
+ul.resizable-menu ul {
+    margin: 0;
+    padding: 0;
+    position: absolute;
+    list-style-type: none;
+    display: none;
+    border: 1px #ddd solid;
+    z-index: 2;
+    <?php echo $right; ?>: 0;
+}
+
+ul.resizable-menu li:hover ul,
+ul.resizable-menu .submenuhover ul {
+    display: block;
+    background: #fff;
+}
+
+ul.resizable-menu ul li {
+    width: 100%;
+}

themes/metro/css/rte.css.php

@@ -0,0 +1,37 @@
+<?php
+
+// unplanned execution path
+if (! defined('PMA_MINIMUM_COMMON') && ! defined('TESTSUITE')) {
+    exit();
+}
+?>
+
+.rte_table {
+    table-layout: fixed;
+}
+
+.rte_table td {
+    vertical-align: middle;
+    padding: 0.2em;
+}
+
+.rte_table input,
+.rte_table select,
+.rte_table textarea {
+    width: 100%;
+    margin: 0;
+    box-sizing: border-box;
+    -ms-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+}
+
+.rte_table input[type=checkbox],
+.rte_table input[type=radio] {
+    width: auto;
+    margin-right: 6px;
+}
+
+.rte_table .routine_params_table {
+    width: 100%;
+}