aboutsummaryrefslogtreecommitdiff
path: root/srcs/phpmyadmin/themes/pmahomme/scss/_common.scss
diff options
context:
space:
mode:
Diffstat (limited to 'srcs/phpmyadmin/themes/pmahomme/scss/_common.scss')
-rw-r--r--srcs/phpmyadmin/themes/pmahomme/scss/_common.scss4264
1 files changed, 4264 insertions, 0 deletions
diff --git a/srcs/phpmyadmin/themes/pmahomme/scss/_common.scss b/srcs/phpmyadmin/themes/pmahomme/scss/_common.scss
new file mode 100644
index 0000000..7457f75
--- /dev/null
+++ b/srcs/phpmyadmin/themes/pmahomme/scss/_common.scss
@@ -0,0 +1,4264 @@
+/**
+ * Common styles for the pmahomme theme
+ */
+
+/* general tags */
+html {
+ font-size: 82%;
+}
+
+input,
+select,
+textarea {
+ font-size: 1em;
+}
+
+body {
+ font-family: $font-family;
+ padding: 0;
+ margin: 0;
+ margin-#{$left}: $navi-width;
+ color: $main-color;
+ background: $main-background;
+}
+
+#page_content {
+ margin: 0 0.5em;
+}
+
+.desktop50 {
+ width: 50%;
+}
+
+.all100 {
+ width: 100%;
+}
+
+.all85 {
+ width: 85%;
+}
+
+.auth_config_tbl {
+ margin: 0 auto;
+}
+
+textarea,
+tt,
+pre,
+code {
+ font-family: $font-family-fixed;
+}
+
+h1 {
+ font-size: 140%;
+ font-weight: bold;
+}
+
+h2 {
+ font-size: 2em;
+ font-weight: normal;
+ text-shadow: 0 1px 0 #fff;
+ padding: 10px 0 10px;
+ padding-#{$left}: 3px;
+ color: #777;
+
+ // Hiding icons in the page titles
+ img {
+ display: none;
+ }
+
+ a img {
+ display: inline;
+ }
+}
+
+.data {
+ margin: 0 0 12px;
+}
+
+.data_full_width {
+ margin: 0 0 12px;
+ width: 100%;
+}
+
+h3 {
+ font-weight: bold;
+ font-size: 1rem;
+}
+
+a {
+ text-decoration: none;
+ color: #235a81;
+ cursor: pointer;
+ outline: none;
+
+ &:link,
+ &:visited,
+ &:active {
+ text-decoration: none;
+ color: #235a81;
+ cursor: pointer;
+ outline: none;
+ }
+}
+
+button.mult_submit,
+.checkall_box + label {
+ text-decoration: none;
+ color: #235a81;
+ cursor: pointer;
+ outline: none;
+}
+
+a:hover {
+ text-decoration: underline;
+ color: #235a81;
+}
+
+button.mult_submit {
+ &:hover,
+ &:focus {
+ text-decoration: underline;
+ color: #235a81;
+ }
+}
+
+.checkall_box + label:hover {
+ text-decoration: underline;
+ color: #235a81;
+}
+
+#initials_table {
+ background: #f3f3f3;
+ border: 1px solid #aaa;
+ margin-bottom: 10px;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ border-radius: 5px;
+
+ td {
+ padding: 8px !important;
+ }
+
+ a {
+ border: 1px solid #aaa;
+ background-color: #fff;
+ padding: 4px 8px;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ border-radius: 5px;
+ background-image: linear-gradient(#fff, #e0e0e0);
+
+ &.active {
+ border: 1px solid #666;
+ box-shadow: 0 0 2px #999;
+ background: linear-gradient(#bbb, #fff);
+ }
+ }
+}
+
+dfn {
+ font-style: normal;
+
+ &:hover {
+ font-style: normal;
+ cursor: help;
+ }
+}
+
+th {
+ font-weight: bold;
+ color: $th-color;
+ background: #f3f3f3;
+ background: linear-gradient(#fff, #ccc);
+}
+
+a img {
+ border: 0;
+}
+
+hr {
+ color: $main-color;
+ background-color: $main-color;
+ border: 0;
+ height: 1px;
+}
+
+form {
+ padding: 0;
+ margin: 0;
+ display: inline;
+}
+
+input,
+select {
+ // Fix outline in Chrome
+ outline: none;
+}
+
+input {
+ &[type=text],
+ &[type=password],
+ &[type=number],
+ &[type=date] {
+ border-radius: 2px;
+ -moz-border-radius: 2px;
+ -webkit-border-radius: 2px;
+ background: white;
+ border: 1px solid #aaa;
+ color: #555;
+ padding: 4px;
+ }
+
+ &[type=text],
+ &[type=password],
+ &[type=number],
+ &[type=date],
+ &[type=checkbox] {
+ margin: 6px;
+ }
+}
+
+select {
+ margin: 6px;
+}
+
+input {
+ &[type=number] {
+ width: 50px;
+ }
+
+ &[type=text],
+ &[type=password],
+ &[type=number],
+ &[type=date] {
+ transition: all 0.2s;
+ -ms-transition: all 0.2s;
+ -webkit-transition: all 0.2s;
+ -moz-transition: all 0.2s;
+ }
+}
+
+select {
+ transition: all 0.2s;
+ -ms-transition: all 0.2s;
+ -webkit-transition: all 0.2s;
+ -moz-transition: all 0.2s;
+}
+
+input {
+ &[type=text][disabled],
+ &[type=password][disabled],
+ &[type=number][disabled],
+ &[type=date][disabled] {
+ background: #e8e8e8;
+ box-shadow: none;
+ -webkit-box-shadow: none;
+ -moz-box-shadow: none;
+
+ &:hover {
+ background: #e8e8e8;
+ box-shadow: none;
+ -webkit-box-shadow: none;
+ -moz-box-shadow: none;
+ }
+ }
+}
+
+select[disabled] {
+ background: #e8e8e8;
+ box-shadow: none;
+ -webkit-box-shadow: none;
+ -moz-box-shadow: none;
+
+ &:hover {
+ background: #e8e8e8;
+ box-shadow: none;
+ -webkit-box-shadow: none;
+ -moz-box-shadow: none;
+ }
+}
+
+input {
+ &[type=text] {
+ &:hover,
+ &:focus {
+ border: 1px solid #7c7c7c;
+ background: #fff;
+ }
+ }
+
+ &[type=password] {
+ &:hover,
+ &:focus {
+ border: 1px solid #7c7c7c;
+ background: #fff;
+ }
+ }
+
+ &[type=number] {
+ &:hover,
+ &:focus {
+ border: 1px solid #7c7c7c;
+ background: #fff;
+ }
+ }
+
+ &[type=date] {
+ &:hover,
+ &:focus {
+ border: 1px solid #7c7c7c;
+ background: #fff;
+ }
+ }
+}
+
+select:focus {
+ border: 1px solid #7c7c7c;
+ background: #fff;
+}
+
+input {
+ &[type=text]:hover,
+ &[type=password]:hover,
+ &[type=number]:hover,
+ &[type=date]:hover {
+ box-shadow: 0 1px 3px #aaa;
+ -webkit-box-shadow: 0 1px 3px #aaa;
+ -moz-box-shadow: 0 1px 3px #aaa;
+ }
+}
+
+textarea {
+ overflow: visible;
+ margin: 6px;
+
+ &.char {
+ margin: 6px;
+ }
+
+ &.charField {
+ width: 95%;
+ }
+}
+
+th.fillPage {
+ width: 80%;
+}
+
+fieldset {
+ margin-top: 1em;
+ border-radius: 4px 4px 0 0;
+ -moz-border-radius: 4px 4px 0 0;
+ -webkit-border-radius: 4px 4px 0 0;
+ border: #aaa solid 1px;
+ padding: 0.5em;
+ background: #eee;
+
+ @if $direction == rtl {
+ text-shadow: -1px 1px 2px #fff inset;
+ -moz-box-shadow: -1px 1px 2px #fff inset;
+ -webkit-box-shadow: -1px 1px 2px #fff inset;
+ box-shadow: -1px 1px 2px #fff inset;
+ } @else {
+ text-shadow: 1px 1px 2px #fff inset;
+ -moz-box-shadow: 1px 1px 2px #fff inset;
+ -webkit-box-shadow: 1px 1px 2px #fff inset;
+ box-shadow: 1px 1px 2px #fff inset;
+ }
+}
+
+fieldset {
+ fieldset {
+ margin: 0.8em;
+ border: 1px solid #aaa;
+ background: #e8e8e8;
+ }
+
+ legend {
+ font-weight: bold;
+ color: #444;
+ padding: 5px 10px;
+ border-radius: 2px;
+ -moz-border-radius: 2px;
+ -webkit-border-radius: 2px;
+ border: 1px solid #aaa;
+ background-color: #fff;
+ max-width: 100%;
+ -moz-box-shadow: 3px 3px 15px #bbb;
+ -webkit-box-shadow: 3px 3px 15px #bbb;
+ box-shadow: 3px 3px 15px #bbb;
+ width: initial;
+ font-size: 1rem;
+ }
+}
+
+.some-margin {
+ margin: 1.5em;
+}
+
+// buttons in some browsers (eg. Konqueror) are block elements, this breaks design
+button {
+ display: inline;
+}
+
+// 3.4
+.datatable {
+ table-layout: fixed;
+}
+
+table {
+ border-collapse: collapse;
+
+ caption,
+ th,
+ td {
+ padding: 0.1em 0.3em;
+ margin: 0.1em;
+ vertical-align: middle;
+ text-shadow: 0 1px 0 #fff;
+ }
+}
+
+thead th {
+ border-#{$right}: 1px solid #fff;
+}
+
+th {
+ text-align: $left;
+}
+
+img,
+button {
+ vertical-align: middle;
+}
+
+input {
+ &[type=checkbox],
+ &[type=radio] {
+ vertical-align: -11%;
+ }
+}
+
+select {
+ -moz-border-radius: 2px;
+ -webkit-border-radius: 2px;
+ border-radius: 2px;
+ border: 1px solid #bbb;
+ color: #333;
+ padding: 3px;
+ background: white;
+ margin: 6px;
+
+ &[multiple] {
+ background: linear-gradient(#fff, #f2f2f2);
+ }
+}
+
+/* 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;
+ text-shadow: 0 1px 0 #000;
+}
+
+div.tools {
+ padding: 0.2em;
+
+ a {
+ color: #3a7ead !important;
+ }
+
+ margin-top: 0;
+ margin-bottom: 0.5em;
+ // avoid a thick line since this should be used under another fieldset
+ border-top: 0;
+ text-align: $right;
+ float: none;
+ clear: both;
+ -webkit-border-radius: 0 0 4px 4px;
+ -moz-border-radius: 0 0 4px 4px;
+ border-radius: 0 0 4px 5px;
+}
+
+fieldset.tblFooters {
+ margin-top: 0;
+ margin-bottom: 0.5em;
+ // avoid a thick line since this should be used under another fieldset
+ border-top: 0;
+ text-align: $right;
+ float: none;
+ clear: both;
+ -webkit-border-radius: 0 0 4px 4px;
+ -moz-border-radius: 0 0 4px 4px;
+ border-radius: 0 0 4px 4px;
+}
+
+div.null_div {
+ height: 20px;
+ text-align: center;
+ font-style: normal;
+ min-width: 50px;
+}
+
+fieldset {
+ .formelement {
+ float: $left;
+ margin-#{$right}: 0.5em;
+ // IE
+ white-space: nowrap;
+ }
+
+ // revert for Gecko
+ div[class=formelement] {
+ white-space: normal;
+ }
+}
+
+button.mult_submit {
+ border: none;
+ background-color: transparent;
+}
+
+// odd items 1,3,5,7...
+table tbody:first-of-type tr:nth-child(odd),
+table tbody:first-of-type tr:nth-child(odd) th,
+#table_index tbody:nth-of-type(odd) tr,
+#table_index tbody:nth-of-type(odd) th {
+ background: #fff;
+}
+
+// even items 2,4,6,8...
+table tbody:first-of-type tr:nth-child(even),
+table tbody:first-of-type tr:nth-child(even) th,
+#table_index tbody:nth-of-type(even) tr,
+#table_index tbody:nth-of-type(even) th {
+ background: #dfdfdf;
+}
+
+table tr {
+ text-align: $left;
+
+ th {
+ text-align: $left;
+ }
+}
+
+// marked table rows
+td.marked:not(.nomarker),
+table tr.marked:not(.nomarker) td,
+table tbody:first-of-type tr.marked:not(.nomarker) th,
+table tr.marked:not(.nomarker) {
+ background: linear-gradient(#ced6df, #b6c6d7);
+ color: $browse-marker-color;
+}
+
+// hovered items
+table tbody:first-of-type tr:not(.nopointer):hover,
+table tbody:first-of-type tr:not(.nopointer):hover th,
+.hover:not(.nopointer) {
+ background: linear-gradient(#ced6df, #b6c6d7);
+ color: $browse-pointer-color;
+}
+
+// hovered table rows
+#table_index tbody:hover tr,
+#table_index tbody:hover th,
+table tr.hover:not(.nopointer) th {
+ background: linear-gradient(#ced6df, #b6c6d7);
+ color: $browse-pointer-color;
+}
+
+/**
+ * marks table rows/cells if the db field is in a where condition
+ */
+.condition {
+ border-color: $browse-marker-color !important;
+}
+
+th.condition {
+ border-width: 1px 1px 0 1px;
+ border-style: solid;
+}
+
+td.condition {
+ border-width: 0 1px 0 1px;
+ border-style: solid;
+}
+
+tr:last-child td.condition {
+ border-width: 0 1px 1px 1px;
+}
+
+@if $direction == ltr {
+ // for first th which must have right border set (ltr only)
+ .before-condition {
+ border-#{$right}: 1px solid $browse-marker-color;
+ }
+}
+
+/**
+ * cells with the value NULL
+ */
+td.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 #000;
+ color: inherit !important;
+}
+
+// no extra space in table cells
+td .icon {
+ image-rendering: pixelated;
+ 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: 0 0.5em;
+}
+
+.success h1,
+.notice h1 {
+ border-bottom: 2px solid;
+ font-weight: bold;
+ text-align: $left;
+ margin: 0 0 0.2em 0;
+}
+
+div {
+ &.error h1 {
+ border-bottom: 2px solid;
+ font-weight: bold;
+ text-align: $left;
+ margin: 0 0 0.2em 0;
+ }
+
+ &.success,
+ &.notice,
+ &.error {
+ margin: 0.5em 0 0.5em;
+ border: 1px solid;
+ background-repeat: no-repeat;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ border-radius: 5px;
+ -moz-box-shadow: 0 1px 1px #fff inset;
+ -webkit-box-shadow: 0 1px 1px #fff inset;
+ box-shadow: 0 1px 1px #fff inset;
+
+ @if $direction == rtl {
+ background-position: 99% 50%;
+ padding: 10px 35px 10px 10px;
+ } @else {
+ background-position: 10px 50%;
+ padding: 10px 10px 10px 10px;
+ }
+ }
+}
+
+.success a,
+.notice a,
+.error a {
+ text-decoration: underline;
+}
+
+.success {
+ color: #000;
+ background-color: #ebf8a4;
+}
+
+h1.success,
+div.success {
+ border-color: #a2d246;
+}
+
+.success h1 {
+ border-color: #0f0;
+}
+
+.notice {
+ color: #000;
+ background-color: #e8eef1;
+}
+
+h1.notice,
+div.notice {
+ border-color: #3a6c7e;
+}
+
+.notice h1 {
+ border-color: #ffb10a;
+}
+
+.error {
+ border: 1px solid maroon !important;
+ color: #000;
+ background: pink;
+}
+
+h1.error {
+ border-color: #333;
+}
+
+div.error {
+ border-color: #333;
+
+ h1 {
+ border-color: #f00;
+ }
+}
+
+.confirmation {
+ color: #000;
+ background-color: pink;
+}
+
+// end messageboxes
+
+.new_central_col {
+ width: 100%;
+}
+
+.tblcomment {
+ font-size: 70%;
+ font-weight: normal;
+ color: #009;
+}
+
+.tblHeaders {
+ font-weight: bold;
+ color: $th-color;
+ background: $th-background;
+}
+
+div.tools,
+.tblFooters {
+ font-weight: normal;
+ color: $th-color;
+ background: $th-background;
+}
+
+.tblHeaders a {
+ &:link,
+ &:active,
+ &:visited {
+ color: #00f;
+ }
+}
+
+div.tools a {
+ &:link,
+ &:visited,
+ &:active {
+ color: #00f;
+ }
+}
+
+.tblFooters a {
+ &:link,
+ &:active,
+ &:visited {
+ color: #00f;
+ }
+}
+
+.tblHeaders a:hover,
+div.tools a:hover,
+.tblFooters a:hover {
+ color: #f00;
+}
+
+// forbidden, no privileges
+.noPrivileges {
+ color: #f00;
+ font-weight: bold;
+}
+
+// disabled text
+.disabled {
+ color: #666;
+
+ a {
+ &:link,
+ &:active,
+ &:visited {
+ color: #666;
+ }
+
+ &:hover {
+ color: #666;
+ text-decoration: none;
+ }
+ }
+}
+
+tr.disabled td,
+td.disabled {
+ background-color: #f3f3f3;
+ color: #aaa;
+}
+
+.nowrap {
+ white-space: nowrap;
+}
+
+/**
+ * login form
+ */
+body#loginform {
+ margin: 1em 0 0 0;
+ text-align: center;
+
+ h1,
+ a.logo {
+ display: block;
+ text-align: center;
+ }
+
+ div.container {
+ text-align: $left;
+ width: 30em;
+ margin: 0 auto;
+ }
+}
+
+#login_form {
+ text-align: $left;
+}
+
+div.container.modal_form {
+ margin: 0 auto;
+ width: 30em;
+ text-align: center;
+ background: #fff;
+ z-index: 999;
+}
+
+div#modalOverlay {
+ position: fixed;
+ top: 0;
+ #{$left}: 0;
+ height: 100%;
+ width: 100%;
+ background: #fff;
+ z-index: 900;
+}
+
+form.login {
+ label {
+ width: 10em;
+ font-weight: bolder;
+ display: inline-block;
+ margin-#{$left}: 2em;
+ }
+
+ input {
+ &[type=text],
+ &[type=password] {
+ box-sizing: border-box;
+ width: 14em;
+ }
+ }
+
+ select {
+ box-sizing: border-box;
+ width: 14em;
+ }
+}
+
+.commented_column {
+ border-bottom: 1px dashed #000;
+}
+
+.column_attribute {
+ font-size: 70%;
+}
+
+.column_name {
+ font-size: 80%;
+ margin: 5px 2px;
+}
+
+.cfg_dbg_demo {
+ margin: 0.5em 1em 0.5em 1em;
+}
+
+.central_columns_navigation {
+ padding: 1.5% 0 !important;
+}
+
+.central_columns_add_column {
+ display: inline-block;
+ margin-#{$left}: 1%;
+ max-width: 50%;
+}
+
+.message_errors_found {
+ margin-top: 20px;
+}
+
+.repl_gui_skip_err_cnt {
+ width: 30px;
+}
+
+.font_weight_bold {
+ font-weight: bold;
+}
+
+.color_gray {
+ color: gray;
+}
+
+.max_height_400 {
+ max-height: 400px;
+}
+
+.color_red {
+ color: red;
+}
+
+.pma_sliding_message {
+ display: inline-block;
+}
+
+li.last.database {
+ margin-bottom: 15px !important;
+}
+
+/* specific elements */
+
+#topmenu {
+ margin-top: 0.5em;
+ padding: 0.1em 0.3em;
+
+ a {
+ text-shadow: 0 1px 0 #fff;
+ }
+
+ .error {
+ background: #eee;
+ border: 0 !important;
+ color: #aaa;
+ }
+}
+
+ul {
+ &#topmenu,
+ &#topmenu2,
+ &.tabs {
+ font-weight: bold;
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ }
+
+ &#topmenu2 {
+ margin: 0.25em 0.5em 0;
+ height: 2em;
+ clear: both;
+ }
+
+ &#topmenu li,
+ &#topmenu2 li {
+ float: left;
+ margin: 0;
+ vertical-align: middle;
+ }
+}
+
+#topmenu img,
+#topmenu2 img {
+ margin-#{$right}: 0.5em;
+ vertical-align: -3px;
+}
+
+.menucontainer {
+ background: linear-gradient(#fff, #dcdcdc);
+ border-top: 1px solid #aaa;
+}
+
+.scrollindicator {
+ display: none;
+}
+
+// default tab styles
+.tabactive {
+ background: #fff !important;
+}
+
+ul#topmenu2 a {
+ display: block;
+ margin: 7px 6px 7px;
+ margin-#{$left}: 0;
+ padding: 4px 10px;
+ white-space: nowrap;
+ border: 1px solid #ddd;
+ border-radius: 20px;
+ -moz-border-radius: 20px;
+ -webkit-border-radius: 20px;
+ background: #f2f2f2;
+}
+
+span {
+ &.caution {
+ color: #f00;
+ }
+
+ &.success {
+ color: green;
+ }
+}
+
+fieldset.caution a {
+ color: #f00;
+
+ &:hover {
+ color: #fff;
+ background-color: #f00;
+ }
+}
+
+ul {
+ &#topmenu {
+ ul {
+ @if $direction == rtl {
+ -moz-box-shadow: -1px 1px 6px #ddd;
+ -webkit-box-shadow: -2px 2px 3px #666;
+ box-shadow: -2px 2px 3px #666;
+ } @else {
+ -moz-box-shadow: 1px 1px 6px #ddd;
+ -webkit-box-shadow: 2px 2px 3px #666;
+ box-shadow: 2px 2px 3px #666;
+ }
+
+ &.only {
+ #{$left}: 0;
+ }
+ }
+
+ > li {
+ border-#{$right}: 1px solid #fff;
+ border-#{$left}: 1px solid #ccc;
+ border-bottom: 1px solid #ccc;
+
+ &:first-child {
+ border-#{$left}: 0;
+ }
+ }
+
+ a,
+ span {
+ padding: 0.6em;
+ }
+
+ ul {
+ a {
+ border-width: 1pt 0 0 0;
+ -moz-border-radius: 0;
+ -webkit-border-radius: 0;
+ border-radius: 0;
+ }
+
+ li:first-child a {
+ border-width: 0;
+ }
+
+ a:hover,
+ .tabactive {
+ text-decoration: none;
+ }
+ }
+
+ > li > {
+ a:hover,
+ .tabactive {
+ text-decoration: none;
+ }
+ }
+ }
+
+ &#topmenu2 a {
+ &.tab:hover,
+ &.tabactive {
+ background-color: $bg-one;
+ border-radius: 0.3em;
+ -moz-border-radius: 0.3em;
+ -webkit-border-radius: 0.3em;
+ text-decoration: none;
+ }
+ }
+
+ // to be able to cancel the bottom border, use <li class="active">
+ &#topmenu > li.active {
+ border-#{$right}: 0;
+ border-bottom-color: #fff;
+ }
+}
+// end topmenu
+
+// 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;
+}
+
+// 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 {
+ padding-#{$right}: 1em;
+ width: 100%;
+}
+
+#serverinfo {
+ background: #888;
+ padding: 0.3em 0.9em;
+ padding-#{$left}: 2.2em;
+ text-shadow: 0 1px 0 #000;
+ max-width: 100%;
+ max-height: 16px;
+ overflow: hidden;
+ box-sizing: content-box;
+
+ .item {
+ white-space: nowrap;
+ color: #fff;
+ }
+
+ img {
+ margin: 0 0.1em 0;
+ margin-#{$left}: 0.2em;
+ }
+}
+
+#page_nav_icons {
+ position: fixed;
+ top: 0;
+ #{$right}: 0;
+ z-index: 99;
+ padding: 0.25em 0;
+}
+
+#goto_pagetop,
+#lock_page_icon {
+ padding: 0.25em;
+ background: #888;
+}
+
+#page_settings_icon {
+ padding: 0.25em;
+ background: #888;
+ cursor: pointer;
+ display: none;
+}
+
+#page_settings_modal,
+#pma_navigation_settings {
+ display: none;
+}
+
+#span_table_comment {
+ font-weight: bold;
+ font-style: italic;
+ white-space: nowrap;
+ margin-#{$left}: 10px;
+ color: #d6d6d6;
+ text-shadow: none;
+}
+
+#textSQLDUMP {
+ width: 95%;
+ height: 95%;
+ font-family: Consolas, "Courier New", Courier, monospace;
+ font-size: 110%;
+}
+
+#TooltipContainer {
+ position: absolute;
+ z-index: 99;
+ width: 20em;
+ height: auto;
+ overflow: visible;
+ visibility: hidden;
+ background-color: #ffc;
+ color: #060;
+ border: 0.1em solid #000;
+ padding: 0.5em;
+}
+
+// user privileges
+#fieldset_add_user_login {
+ div.item {
+ border-bottom: 1px solid silver;
+ 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;
+ }
+
+ input {
+ width: 12em;
+ clear: $right;
+ max-width: 100%;
+ }
+
+ 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: auto;
+ }
+ }
+}
+
+#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;
+}
+
+#fieldset_user_global_rights > legend input {
+ margin-#{$left}: 2em;
+}
+// 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;
+}
+
+div#serverStatusTabs {
+ margin-top: 1em;
+}
+
+caption a.top {
+ float: $right;
+}
+
+div#serverstatusquerieschart {
+ float: $left;
+ width: 500px;
+ height: 350px;
+ margin-#{$right}: 50px;
+}
+
+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 {
+ whi