10 .checkall_box + label {
11 text-decoration: none;
20 text-decoration: underline;
25 .checkall_box + label:hover {
26 text-decoration: underline;
30 #navbarDropdown > img {
46 border-radius: 4px 4px 0 0;
47 border: #aaa solid 1px;
50 text-shadow: 1px 1px 2px $white;
51 box-shadow: 1px 1px 2px $white inset;
57 border: 1px solid #aaa;
67 border: 1px solid #aaa;
68 background-color: $white;
70 box-shadow: 3px 3px 15px #bbb;
92 text-shadow: 0 1px 0 $black;
99 color: #3a7ead !important;
103 margin-bottom: 0.5em;
104 // avoid a thick line since this should be used under another fieldset
109 border-radius: 0 0 4px 4px;
112 .pma-fieldset.tblFooters {
114 margin-bottom: 0.5em;
115 // avoid a thick line since this should be used under another fieldset
120 border-radius: 0 0 4px 4px;
139 div[class=formelement] {
146 background-color: transparent;
150 * marks table rows/cells if the db field is in a where condition
153 border-color: $black !important;
157 border-width: 1px 1px 0 1px;
162 border-width: 0 1px 0 1px;
166 tr:last-child td.condition {
167 border-width: 0 1px 1px 1px;
170 /* rtl:begin:remove */
172 // for first th which must have right border set (ltr only)
173 border-right: 1px solid $black;
179 * cells with the value NULL
183 color: #7d7d7d !important;
195 font-family: $font-family-monospace;
205 background-color: $white;
207 border: 1px solid $black;
222 border: 1px dashed $black;
227 text-decoration: none;
228 border-bottom: 1px dotted $black;
229 color: inherit !important;
232 // no extra space in table cells
234 image-rendering: pixelated;
247 // message boxes: error, confirmation
257 background-color: pink;
311 .tblFooters a:hover {
316 border: 1px solid maroon !important;
336 text-decoration: none;
343 background-color: #f3f3f3;
348 white-space: pre-wrap;
375 div.container.modal_form {
393 label.col-3.d-flex.align-items-center {
398 border-bottom: 1px dashed $black;
410 .central_columns_navigation {
411 padding: 1.5% 0 !important;
414 .message_errors_found {
418 .repl_gui_skip_err_cnt {
431 // Avoid having the last item of the tree hidden behind the scroll bar
432 margin-bottom: 15px !important;
457 div#tablestatistics table {
459 margin-bottom: 0.5em;
478 padding: $breadcrumb-navbar-padding-y $breadcrumb-padding-x;
481 #page_settings_icon {
486 #page_settings_modal,
487 #pma_navigation_settings {
494 font-family: Consolas, "Courier New", Courier, monospace;
505 background-color: #ffc;
507 border: 0.1em solid $black;
512 #fieldset_add_user_login {
516 border-bottom: 1px solid silver;
517 padding-bottom: 0.3em;
518 margin-bottom: 0.3em;
527 padding-right: 0.5em;
542 padding-right: 0.5em;
544 #select_pred_username,
545 #select_pred_hostname,
546 #select_pred_password {
557 #fieldset_user_priv div.item {
575 #fieldset_user_global_rights .pma-fieldset,
576 #fieldset_user_group_rights .pma-fieldset {
580 #fieldset_user_global_rights > legend input {
583 // end user privileges
588 text-decoration: underline;
593 h3#serverstatusqueries span {
598 div#serverStatusTabs {
606 div#serverstatusquerieschart {
614 &#serverstatus table {
625 padding-bottom: 80px;
629 div#chartVariableSettings {
630 border: 1px solid #ddd;
631 background-color: #e6e6e6;
658 margin: -0.2em 0.3em 0 0;
665 border: 1px solid #ccc;
668 background-color: $white;
670 box-shadow: 2px 2px 3px #666;
683 &#queryAnalyzerDialog {
687 &.CodeMirror-scroll {
722 #profilingchart .jqplot-highlighter-tooltip {
723 top: auto !important;
732 border: 1px solid silver;
735 // make room for the resize handle
757 border: 1px solid #aaa;
759 font-family: inherit;
773 #mysqlmaininformation,
774 #pmamaininformation {
781 list-style-type: disc;
782 vertical-align: middle;
786 margin-bottom: 0.3em;
796 border: solid 1px #888;
800 #body_browse_foreigners {
802 margin: 0.5em 0.5em 0 0.5em;
811 border: 0.1em solid $black;
815 border: 0.1em solid red;
827 border-top: 0.1em solid silver;
873 #PMA_slidingMessage code.sql,
878 textarea#partitiondefinition {
882 // for elements that should be revealed only via js
888 list-style-type: none;
893 * Progress bar styles
903 &.upload_progress_bar_outer {
904 border: 1px solid $black;
918 &.upload_progress_bar_inner {
919 background-color: #ddd;
939 &#serverconnection_src_remote,
940 &#serverconnection_trg_remote,
941 &#serverconnection_src_local,
942 &#serverconnection_trg_local {
948 * Validation error message styles
951 &[type=text].invalid_value,
952 &[type=password].invalid_value,
953 &[type=number].invalid_value,
954 &[type=date].invalid_value {
959 select.invalid_value,
965 * Ajax notification styling
968 // The notification needs to be shown on the top of the page
975 // Keep a little space on the sides of the text
978 // If this is not kept at a high z-index, the jQueryUI modal dialogs (z-index: 1000) might hide this
984 background-image: url("../img/ajax_clock_small.gif");
985 background-repeat: no-repeat;
986 background-position: 2%;
987 border: 1px solid #e2b709;
988 background-color: #ffe57e;
990 box-shadow: 0 5px 90px #888;
994 /** Need this parent to properly center the notification division */
1012 #structure-action-links a {
1016 #addColumns input[type=radio] {
1030 box-sizing: border-box;
1062 vertical-align: middle;
1066 table#index_columns {
1075 #move_columns_dialog {
1087 background: #d3dce3;
1088 border: 1px solid #aaa;
1115 padding: 0.5em 1.5em;
1116 background: #fbead9;
1117 border-color: #c83838;
1118 border-style: solid;
1119 border-width: 1px 0;
1121 font-family: $font-family-base;
1127 margin: 0.3em 0.3em 0.3em;
1142 text-transform: uppercase;
1148 padding: 0.3em 0.3em 0.3em;
1149 padding-left: 0.5em;
1151 vertical-align: top;
1152 background: transparent;
1154 border-top: 1px #d5d5d5 solid;
1159 font-weight: normal;
1160 font-family: $font-family-base;
1168 padding-bottom: 0.3em;
1169 vertical-align: top;
1170 border-top: 1px #d5d5d5 solid;
1181 display: inline-block;
1185 border: 1px #edec90 solid;
1196 border-color: #a11 !important;
1203 border: 1px #a7a6aa solid;
1207 border: 1px #6676ff solid;
1208 background: #f7fbff;
1215 border: 1px #a7a6aa solid;
1219 border: 1px #6676ff solid;
1220 background: #f7fbff;
1224 .field-comment-mark {
1233 .field-comment-warning {
1250 background: #d5d5d5;
1259 .group-header-2 th {
1260 padding-left: 1.5em;
1264 .group-header-3 th {
1269 padding-left: 4.5em;
1275 background-color: #ddd;
1279 background-color: #ddd;
1285 background-color: #ddd;
1290 .click-hide-message {
1299 margin-bottom: 0.5em;
1303 input#auto_increment_opt {
1309 border: 1px solid #aaa;
1323 background-color: #eee;
1330 margin-bottom: 1.5em;
1341 border-right: 0.1em solid #888;
1342 border-left: 0.1em solid #888;
1343 border-radius: 0.3em;
1357 background: none !important;
1364 text-shadow: 0 0 0.2em $black;
1388 #table_name_col_no_outer {
1392 #table_name_col_no {
1394 top: 100px !important;
1408 box-sizing: border-box;
1414 box-sizing: border-box;
1471 border-right: 2px solid #a44;
1520 text-shadow: -1px -1px $black;
1521 box-shadow: 0 0 0.7em $black;
1522 border-radius: 0.3em;
1531 margin-top: $height * -0.5;
1532 margin-left: $width * -0.5;
1533 background: url("../img/col_pointer.png");
1538 background: #333 !important;
1539 opacity: 0.8 !important;
1541 border: 1px solid $black !important;
1542 border-radius: 0.3em !important;
1543 text-shadow: -1px -1px $black !important;
1544 font-size: 0.8em !important;
1545 font-weight: bold !important;
1546 padding: 1px 3px !important;
1549 background: none !important;
1550 color: $white !important;
1561 background: url("../img/col_drop.png");
1568 background-color: #999;
1573 background-color: #999;
1578 border: solid 1px #999;
1580 box-shadow: 0 0.2em 0.5em #333;
1584 overflow-wrap: break-word;
1587 padding: 0.2em 0.5em 0.2em;
1588 padding-left: 0.2em;
1589 white-space: nowrap;
1603 border-bottom: solid 1px #999;
1604 border-top: solid 1px #999;
1608 padding: 0.35em 1em;
1623 background: linear-gradient(#eee, #ccc);
1628 vertical-align: middle;
1629 white-space: nowrap;
1638 padding: 0.8em 0.5em;
1645 background: linear-gradient(#333, #555);
1649 &.edit_mode_active {
1653 background: linear-gradient(#333, #555);
1662 background-image: linear-gradient(#333, #555);
1663 text-decoration: none;
1672 .navigation_separator {
1674 display: inline-block;
1679 text-shadow: 1px 0 $white;
1696 border: 1px solid #999;
1698 padding: 0.3em 0.5em;
1709 margin: 0.3em 0.2em;
1720 background: $white url('../img/ajax_clock_small.gif') no-repeat right center;
1721 padding-right: 1.5em;
1724 .edit_area_loading {
1725 background: $white url("../img/ajax_clock_small.gif") no-repeat center;
1732 padding: 0.2em 0.3em;
1736 .saving_edited_data {
1737 background: url('../img/ajax_clock_small.gif') no-repeat left;
1743 vertical-align: top;
1752 // css for timepicker
1753 .ui-timepicker-div {
1763 margin-bottom: -25px;
1767 margin: 0 10px 10px 85px;
1776 .ui-tpicker-grid-label {
1783 .ui-timepicker-rtl {
1790 margin: 0 65px 10px 10px;
1799 .ui-dialog .pma-fieldset legend a {
1807 // over-riding jqplot-yaxis class
1818 div#page_content div {
1819 &#tableslistcontainer {
1823 border-top: 0.1px solid #eee;
1836 border-right: 1px solid #bbb;
1859 #pma_console_container {
1869 margin-left: $navigation-width;
1876 vertical-align: middle;
1882 border-top: solid 1px #aaa;
1886 vertical-align: middle;
1893 display: inline-block;
1894 border-top-right-radius: 3px;
1895 border-right: solid 1px #aaa;
1908 display: inline-block;
1916 display: inline-block;
1922 display: inline-block;
1925 .message span.action,
1931 .message span.action:hover,
1932 .toolbar .button:hover,
1933 .switch_button:hover {
1948 margin-right: 0.4em;
1960 margin-bottom: -65px;
1961 border-top: solid 1px #aaa;
1965 &.console_dark_theme {
1979 border-color: #373b41;
1982 .CodeMirror-cursor {
1983 border-color: $white;
1995 font-family: Monaco, Consolas, monospace;
1997 margin: 0 10px 0.2em 1.4em;
2001 border-bottom: solid 1px #ccc;
2002 padding-bottom: 0.2em;
2004 &.expanded > .action_content {
2036 &.expanded::before {
2057 &.collapsed > .query {
2058 white-space: nowrap;
2059 text-overflow: ellipsis;
2063 &.expanded > .query {
2066 word-wrap: break-word;
2070 &.collapsed .action.collapse,
2071 &.expanded .action.expand {
2087 display: inline-block;
2091 &.history .text.targetdb,
2092 &.successed .text.targetdb {
2093 display: inline-block;
2099 display: inline-block;
2103 &.bookmark .action {
2106 display: inline-block;
2110 &.successed .action {
2113 display: inline-block;
2121 border: solid 1px #aaa;
2122 border-top-left-radius: 3px;
2125 &.bookmark .text.targetdb,
2128 display: inline-block;
2131 &.failed .text.query_time,
2136 &.failed .text.failed {
2137 display: inline-block;
2149 &:hover > .action_content {
2166 &.expanded .bookmark_label {
2167 border-top-left-radius: 0;
2168 border-top-right-radius: 0;
2194 border-left: solid 1px #999;
2196 transition: left 0.2s;
2200 box-shadow: -2px 1px 4px -1px #999;
2205 .message span.text.hide {
2210 #pma_bookmarks .content.add_bookmark,
2211 #pma_console_options .content {
2215 #pma_bookmarks .content.add_bookmark {
2218 padding-bottom: 0.4em;
2219 margin-bottom: 0.4em;
2220 border-bottom: solid 1px #ccc;
2224 vertical-align: bottom;
2235 &.grouped .ungroup_queries {
2236 display: inline-block;
2241 display: inline-block;
2250 &.grouped .group_queries {
2265 .show_trace .action.dbg_show_trace,
2266 .hide_trace .action.dbg_hide_trace {
2271 &.hide_args .action.dbg_hide_args,
2272 &.show_args .action.dbg_show_args {
2283 .trace.welcome::after,
2284 .debug > .welcome::after {
2294 .trace.welcome .time,
2300 .traceStep .args pre {
2305 // Code mirror console style
2308 font-family: Monaco, Consolas, monospace;
2311 font-family: Monaco, Consolas, monospace;
2315 .CodeMirror-measure > pre,
2316 .CodeMirror-code > pre,
2325 min-height: initial;
2326 max-height: initial;
2329 .CodeMirror-scroll {
2334 // PMA drop-improt style
2342 background: rgba(0, 0, 0, 0.6);
2351 .pma_sql_import_status {
2357 border: 1px solid #999;
2358 background: #f3f3f3;
2360 box-shadow: 2px 2px 5px #ccc;
2363 background-color: #bbb;
2364 padding: 0.1em 0.3em;
2369 font-weight: normal;
2370 text-shadow: 0 1px 0 #777;
2371 box-shadow: 1px 1px 15px #999 inset;
2375 .pma_drop_result h2 {
2376 background-color: #bbb;
2377 padding: 0.1em 0.3em;
2382 font-weight: normal;
2383 text-shadow: 0 1px 0 #777;
2384 box-shadow: 1px 1px 15px #999 inset;
2387 .pma_sql_import_status {
2392 list-style-type: none;
2396 border-bottom: 1px solid #bbb;
2397 color: rgb(148, 14, 14);
2422 background: rgba(155, 149, 149, 0.78);
2428 .pma_drop_result h2 .close:hover {
2429 background: rgba(155, 149, 149, 0.78);
2433 .pma_drop_file_status {
2436 span.underline:hover {
2438 text-decoration: underline;
2450 box-shadow: 0 0 15px #999;
2451 border-radius: 10px;
2462 background-color: white;
2463 border: 3px ridge black;
2466 #composite_index_list {
2467 list-style-type: none;
2468 list-style-position: inside;
2472 display: inline-block;
2473 background-image: url("../img/s_sortable.png");
2474 background-position: center center;
2475 background-repeat: no-repeat;
2486 &[value="1"]::-webkit-meter-optimum-value {
2487 background: linear-gradient(white 3%, #e32929 5%, transparent 10%, #e32929);
2490 &[value="2"]::-webkit-meter-optimum-value {
2491 background: linear-gradient(white 3%, #f60 5%, transparent 10%, #f60);
2494 &[value="3"]::-webkit-meter-optimum-value {
2495 background: linear-gradient(white 3%, #ffd700 5%, transparent 10%, #ffd700);
2499 // styles for sortable tables created with tablesorter jquery plugin
2506 text-decoration: underline;
2512 background-repeat: no-repeat;
2513 background-position: right center;
2514 display: inline-table;
2515 vertical-align: middle;
2520 &.headerSortUp .sorticon {
2521 background-image: url("../img/sort-desc.svg");
2526 background-image: url("../img/sort-desc.svg");
2530 background-image: url("../img/sort-asc.svg");
2534 &.headerSortUp:hover .sorticon {
2535 background-image: url("../img/sort-asc.svg");
2539 // end of styles of sortable tables
2541 // styles for jQuery-ui to support rtl languages
2543 .ui-dialog-titlebar-close {
2552 .ui-dialog-buttonpane .ui-dialog-buttonset {
2556 .ui-dialog-buttonpane .ui-dialog-buttonset button {
2559 background-color: #6c757d !important;
2560 border-color: #6c757d;
2563 .ui-dialog-buttonpane .ui-dialog-buttonset button:hover {
2564 background-color: #5a6268 !important;
2567 // end of styles for jQuery-ui to support rtl languages
2569 /* templates/database/multi_table_query */
2571 .multi_table_query_form {
2572 .query-form__tr--hide {
2576 .query-form__fieldset--inline,
2577 .query-form__select--inline {
2581 .query-form__tr--bg-none {
2585 .query-form__input--wide {
2589 .query-form__multi-sql-query {
2594 // templates/database/designer
2600 // Enable scrollable blocks of code
2606 @media only screen and (max-width: 768px) {
2611 body#loginform div.container {
2620 width: 96% !important;
2627 #table_name_col_no {
2643 .doubleFieldset .pma-fieldset {
2647 div#serverstatusquerieschart {
2654 width: 95% !important;
2660 background-color: $white;
2662 filter: alpha(opacity=95);
2674 background-color: #87ceeb;
2676 filter: alpha(opacity=40);
2677 pointer-events: none;
2681 vertical-align: baseline;
2684 .ui_tpicker_hour_slider,
2685 .ui_tpicker_minute_slider,
2686 .ui_tpicker_second_slider,
2687 .ui_tpicker_millisec_slider,
2688 .ui_tpicker_microsec_slider {
2694 .ui-timepicker-div dl .ui_tpicker_timezone select {
2698 .ui_tpicker_time_input {
2702 // Extra large devices (large desktops, 1200px and up)
2703 @include media-breakpoint-up(xl) {
2708 .pma-fieldset.tblFooters,
2718 .table-responsive-md .data {