aboutsummaryrefslogtreecommitdiff
path: root/srcs/phpmyadmin/themes/metro/scss/_common.scss
diff options
context:
space:
mode:
Diffstat (limited to 'srcs/phpmyadmin/themes/metro/scss/_common.scss')
-rw-r--r--srcs/phpmyadmin/themes/metro/scss/_common.scss4271
1 files changed, 4271 insertions, 0 deletions
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;
+}
generated by cgit (git 2.34.1) at 2026-05-16 00:30:45 +0000