diff options
Diffstat (limited to 'srcs/phpmyadmin/themes/metro/scss')
22 files changed, 6909 insertions, 0 deletions
diff --git a/srcs/phpmyadmin/themes/metro/scss/_codemirror.scss b/srcs/phpmyadmin/themes/metro/scss/_codemirror.scss new file mode 100644 index 0000000..30417e1 --- /dev/null +++ b/srcs/phpmyadmin/themes/metro/scss/_codemirror.scss @@ -0,0 +1,96 @@ +// Styles for CodeMirror editor for the Metro theme + +$textarea-cols: 40 !default; +$textarea-rows: 15 !default; + +.CodeMirror { + font-family: $font-family-fixed !important; + height: ceil($textarea-rows * 1.2em); + border: 1px solid #ccc; + direction: ltr; +} + +#pma_console .CodeMirror { + border: none; +} + +.CodeMirror * { + font-family: $font-family-fixed; +} + +#inline_editor_outer .CodeMirror { + height: ceil($textarea-rows * 0.4em); + margin-bottom: 10px; +} + +.insertRowTable .CodeMirror { + height: ceil($textarea-rows * 0.6em); + width: ceil($textarea-cols * 0.6em); +} + +#pma_console .CodeMirror-gutters { + background-color: initial; + border: none; +} + +span { + &.cm-keyword, + &.cm-statement-verb { + color: #909; + } + + &.cm-variable { + color: black; + } + + &.cm-comment { + color: #808000; + } + + &.cm-mysql-string { + color: #008000; + } + + &.cm-operator { + color: fuchsia; + } + + &.cm-mysql-word { + color: black; + } + + &.cm-builtin { + color: #f00; + } + + &.cm-variable-2 { + color: #f90; + } + + &.cm-variable-3 { + color: #00f; + } + + &.cm-separator { + color: fuchsia; + } + + &.cm-number { + color: teal; + } +} + +.autocomplete-column-name { + display: inline-block; +} + +.autocomplete-column-hint { + display: inline-block; + float: $right; + color: #666; + margin-#{$left}: 1em; +} + +.CodeMirror-hints { + z-index: 999; +} diff --git a/srcs/phpmyadmin/themes/metro/scss/_common.scss b/srcs/phpmyadmin/themes/metro/scss/_common.scss new file mode 100644 index 0000000..c8c756e --- /dev/null +++ b/srcs/phpmyadmin/themes/metro/scss/_common.scss @@ -0,0 +1,4271 @@ +// Common styles for the Metro theme + +/* fonts */ + +@font-face { + font-family: 'IcoMoon'; + src: local('☺'); + src: url('../fonts/IcoMoon.eot'); + src: + url('../fonts/IcoMoon.eot?#iefix') format('embedded-opentype'), + url('../fonts/IcoMoon.svg#IcoMoon') format('svg'), + url('../fonts/IcoMoon.woff') format('woff'), + url('../fonts/IcoMoon.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Open Sans'; + src: local('☺'), local('Open Sans'), local('OpenSans'); + src: url('../fonts/opensans-regular-webfont.eot'); + src: + url('../fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'), + url('../fonts/opensans-regular-webfont.woff') format('woff'), + url('../fonts/opensans-regular-webfont.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Open Sans Light'; + src: local('☺'), local('Open Sans Light'), local('OpenSans-Light'); + src: url('../fonts/opensans-light-webfont.eot'); + src: + url('../fonts/opensans-light-webfont.eot?#iefix') format('embedded-opentype'), + url('../fonts/opensans-light-webfont.woff') format('woff'), + url('../fonts/opensans-light-webfont.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Open Sans Bold'; + src: local('☺'), local('Open Sans Bold'), local('OpenSans-Bold'); + src: url('../fonts/opensans-bold-webfont.eot'); + src: + url('../fonts/opensans-bold-webfont.eot?#iefix') format('embedded-opentype'), + url('../fonts/opensans-bold-webfont.woff') format('woff'), + url('../fonts/opensans-bold-webfont.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Open Sans Extrabold'; + src: local('☺'), local('Open Sans Extrabold'), local('OpenSans-Extrabold'); + src: url('../fonts/opensans-extrabold-webfont.eot'); + src: + url('../fonts/opensans-extrabold-webfont.eot?#iefix') format('embedded-opentype'), + url('../fonts/opensans-extrabold-webfont.woff') format('woff'), + url('../fonts/opensans-extrabold-webfont.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +*:focus { + outline: none; +} + +#li_select_fontsize { + display: none; +} + +/* general tags */ +html { + font-size: 100%; +} + +input, +select, +textarea { + font-size: 1em; +} + +body { + font-family: $font-family; + padding: 0; + margin-#{$left}: $navi-width; + color: $main-color; + background: $main-background; + line-height: 1; + font-size: 11px; +} + +/* Override style formats by html tags */ + +font[color="red"], +span[style="color: #FF0000"] { + color: $browse-warning-color !important; +} + +strong { + font-weight: normal; +} + +/* login */ + +body#loginform { + margin: 0; + background-color: #666; + + #page_content { + background-color: $navi-background; + margin: 0 !important; + padding: 20px; + margin-top: 10% !important; + min-height: 240px; + } + + div.container { + color: $main-background; + text-align: $left; + width: 48em; + margin-#{$left}: auto; + margin-#{$right}: auto; + + &::before { + /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */ + font-family: 'IcoMoon'; + font-size: 220px; + color: $main-background; + content: "a"; + float: $left; + margin-#{$right}: 20px; + margin-bottom: 10px; + background-color: $th-color; + overflow: hidden; + height: 240px; + width: 240px; + line-height: 1; + text-align: center; + } + } + + h1 { + display: inline-block; + text-align: $left; + color: $main-background; + font-size: 2.5em; + padding-top: 0; + margin-#{$right}: -50%; + line-height: 2; + } + + a.logo, + fieldset legend { + display: none; + } + + .item { + margin-bottom: 10px; + } + + input { + &.textfield { + width: 100%; + border: 1px solid #fff; + background: $navi-color; + color: $th-color; + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + margin: 0; + + &:hover, + &:focus { + background-color: #fff; + color: #333; + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + margin: 0; + } + } + + &[type="submit"] { + background-color: $th-color; + border: none; + padding: 7px; + margin: 0; + } + } + + select { + margin: 0 !important; + border: 1px solid $navi-background; + background: $navi-background; + color: $navi-color; + padding-#{$left}: 0 !important; + font-family: $font-family; + min-width: 100%; + + &:hover { + border: 1px solid $navi-color; + } + } + + br { + display: none; + } + + fieldset { + border: none; + color: $navi-color; + padding: 0; + margin-top: 0; + margin-bottom: 10px; + background: none; + + &:first-child { + border-bottom: none; + margin: 0; + } + + &.tblFooters { + border: none; + margin: 0; + clear: none; + } + } + + .error { + float: $left; + width: 48em; + margin-top: -280px; + } +} + +form.login label { + display: none; +} + +.turnOffSelect { + -moz-user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; + user-select: none; +} + +#page_content { + margin: 20px !important; +} + +textarea, +tt, +pre, +code { + font-family: $font-family-fixed !important; +} + +h1 { + font-family: $font-family-light; + font-weight: normal; + font-size: 3em; + color: $navi-background; + margin: 0; + letter-spacing: -1px; + line-height: 1; +} + +h2 { + font-size: 3.6em; + font-weight: normal; + color: $navi-background; + font-family: $font-family-light; + margin-top: 10px; + margin-bottom: 0; + line-height: 1; + letter-spacing: -1px; + + // Hiding icons in the page titles + img { + display: none; + } + + a img { + display: inline; + } +} + +.data { + margin: 10px 0; +} + +.data_full_width { + margin: 10px 0; + width: 100%; +} + +h3 { + font-family: $font-family-extra-bold; + text-transform: uppercase; + font-weight: normal; + font-size: 1rem; +} + +a { + text-decoration: none; + color: #235a81; + cursor: pointer; + outline: none; + + &:link, + &:visited, + &:active { + text-decoration: none; + color: #235a81; + cursor: pointer; + outline: none; + } +} + +button.mult_submit, +.checkall_box + label { + text-decoration: none; + color: #235a81; + cursor: pointer; + outline: none; +} + +a:hover { + text-decoration: underline; + color: #235a81; +} + +button.mult_submit { + &:hover, + &:focus { + text-decoration: underline; + color: #235a81; + } +} + +.checkall_box + label:hover { + text-decoration: underline; + color: #235a81; +} + +#initials_table { + background: $th-background; + border: 1px solid $border-color; + margin-bottom: 10px; + + td { + padding: 8px !important; + } + + a { + border: 1px solid $border-color; + background: $main-background; + padding: 4px 8px; + } +} + +dfn:hover { + cursor: help; +} + +.data th { + border-bottom: 1px solid $border-color; +} + +th { + font-family: $font-family-bold; + color: $th-color !important; + font-weight: normal; + + a { + font-family: $font-family-bold; + color: $th-color !important; + font-weight: normal; + } +} + +.data th a:hover { + color: #999 !important; +} + +.column_heading, +.column_action { + border: 1px solid $border-color; + background-color: #f6f6f6; +} + +a img { + border: 0; +} + +hr { + color: $border-color; + background-color: $border-color; + border: 0; + height: 1px; +} + +form { + padding: 0; + margin: 0; + display: inline; +} + +input { + &[type="text"], + &[type="password"], + &[type="number"] { + border: 1px solid $browse-gray-color; + color: $th-color; + padding: 5px; + margin: 6px; + font-family: $font-family; + background-color: $main-background; + + &:focus { + border: 1px solid $navi-hover-background; + color: $main-color; + } + } +} + +.sqlbutton, +#tablefieldinsertbuttoncontainer input[type="button"] { + margin-top: 1em; + margin-#{$left}: 0 !important; + margin-#{$right}: 14px !important; +} + +button { + margin-#{$left}: 14px; + padding: 4px; + color: $button-color; + text-decoration: none; + background-color: $button-background; +} + +textarea { + overflow: visible; + border: 1px solid $browse-gray-color; + color: $th-color; + background-color: $main-background; +} + +fieldset { + margin-top: 20px; + border: 1px solid $border-color; + padding: 20px; + background-color: $th-background; + + fieldset { + margin: 20px; + margin-bottom: 0; + background-color: $main-background; + border: none; + } +} + +legend { + padding: 0 5px; + width: initial; + font-size: 1rem; +} + +.some-margin { + margin: 20px; +} + +/* buttons in some browsers (eg. Konqueror) are block elements, + this breaks design */ +button { + display: inline; +} + +table { + border-collapse: collapse; + + caption, + th, + td { + padding: 0.6em; + vertical-align: top; + } +} + +th { + text-align: $left; +} + +img, +button { + vertical-align: middle; +} + +select { + border: 1px solid $browse-gray-color; + color: $th-color; + padding: 4px; + font-family: $font-family; + margin: 5px; + background-color: $main-background; + max-width: 17em; + + &:focus { + border: 1px solid $navi-hover-background; + color: $main-color; + } +} + +/* classes */ +.clearfloat { + clear: both; +} + +.floatleft { + float: $left; + margin-#{$right}: 1em; +} + +.floatright { + float: $right; +} + +.center { + text-align: center; +} + +.displayblock { + display: block; +} + +table { + &.nospacing { + border-spacing: 0; + } + + &.nopadding tr { + th, + td { + padding: 0; + } + } +} + +th.left, +td.left { + text-align: $left; +} + +th.center, +td.center { + text-align: center; +} + +th.right, +td.right { + text-align: $right; + padding-#{$right}: 1em; +} + +tr.vtop { + th, + td { + vertical-align: top; + } +} + +th.vtop, +td.vtop { + vertical-align: top; +} + +tr.vmiddle { + th, + td { + vertical-align: middle; + } +} + +th.vmiddle, +td.vmiddle { + vertical-align: middle; +} + +tr.vbottom { + th, + td { + vertical-align: bottom; + } +} + +th.vbottom, +td.vbottom { + vertical-align: bottom; +} + +.paddingtop { + padding-top: 1em; +} + +.separator { + color: #fff; +} + +.result_query { + background: $th-background; + margin-bottom: 20px; +} + +div.tools { + padding: 10px; + text-align: $right; + + span { + float: $right; + margin: 6px 2px; + } + + a { + color: $blue-header !important; + } +} + +.chrome { + input[type="checkbox"] { + #{$left}: -9999px; + position: relative; + + &::before { + /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */ + font-family: 'IcoMoon'; + content: ""; + color: $th-color; + cursor: default; + position: absolute; + padding: 4px; + top: 0; + #{$left}: 9995px; + } + + &:indeterminate::before { + content: ""; + } + + &:checked::before { + content: ""; + } + } + + .navigation input[type="checkbox"]::before { + color: #fff; + } + + input[type="radio"] { + #{$left}: -9999px; + position: relative; + + &::before { + /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */ + font-family: 'IcoMoon'; + content: ""; + color: $th-color; + cursor: default; + position: absolute; + padding: 4px; + top: 0; + #{$left}: 9995px; + } + + &:checked::before { + content: ""; + } + } +} + +tr.noclick td:first-child::before { + content: ""; +} + +fieldset.tblFooters { + margin-top: -1px; + border-top: 0; + text-align: $right; + float: none; + clear: both; +} + +div.null_div { + height: 20px; + text-align: center; + font-style: normal; + min-width: 50px; +} + +fieldset { + .formelement { + float: $left; + margin-#{$right}: 0.5em; + } + + /* revert for Gecko */ + div[class="formelement"] { + white-space: normal; + } +} + +button.mult_submit { + border: none; + background-color: transparent; + color: $browse-pointer-color; + margin: 0; +} + +table tr { + text-align: $left; + border-bottom: 1px solid #eee; + + // odd items 1,3,5,7... + &:nth-child(odd) { + background: $bg-two; + border-bottom: none; + } + + // even items 2,4,6,8... + &:nth-child(even) { + background: $bg-one; + border-bottom: none; + } + + th { + text-align: $left; + border-bottom: 1px solid #eee; + } + + &.odd, + &.even { + border-#{$left}: 3px solid transparent; + } +} + +/* marked table rows */ +td.marked:not(.nomarker) { + color: $main-color; +} + +table tr.marked:not(.nomarker) { + color: $main-color; + + td, + th { + color: $main-color; + } +} + +td.marked:not(.nomarker) { + background-color: $browse-marker-background; +} + +table tr { + &.marked:not(.nomarker) { + border-#{$left}: 3px solid #24a0da; + } + + &:not(.nopointer):hover { + background-color: $browse-marker-background; + color: $main-color; + } +} + +.hover:not(.nopointer) { + background-color: $browse-marker-background; + color: $main-color; +} + +.structure_actions_dropdown { + background-color: $browse-marker-background; + color: $main-color; + + .icon { + vertical-align: middle !important; + } +} + +table tr.hover:not(.nopointer) th { + background-color: $browse-marker-background; + color: $th-pointer-color; +} + +/* marks table rows/cells if the db field is in a where condition */ + +.condition { + border-color: $browse-warning-color !important; +} + +th.condition { + border: 1px solid $browse-warning-color; + background: $browse-warning-color; + color: $main-background !important; + + a { + border: 1px solid $browse-warning-color; + background: $browse-warning-color; + color: $main-background !important; + } +} + +td { + &.condition { + border: 1px solid; + } + + // cells with the value NULL + &.null { + font-style: italic; + color: #7d7d7d; + } +} + +table { + .valueHeader, + .value { + text-align: $right; + white-space: normal; + } + + // IE doesnt handles 'pre' right + [class="value"] { + white-space: normal; + } +} + +.value { + font-family: $font-family-fixed; +} + +.attention { + color: red; + font-weight: bold; +} + +.allfine { + color: green; +} + +img.lightbulb { + cursor: pointer; +} + +.pdflayout { + overflow: hidden; + clip: inherit; + background-color: #fff; + display: none; + border: 1px solid #000; + position: relative; +} + +.pdflayout_table { + background: #d3dce3; + color: #000; + overflow: hidden; + clip: inherit; + z-index: 2; + display: inline; + visibility: inherit; + cursor: move; + position: absolute; + font-size: 80%; + border: 1px dashed #000; +} + +/* Doc links in SQL */ +.cm-sql-doc { + text-decoration: none; + border-bottom: 1px dotted #999; + color: inherit !important; +} + +/* no extra space in table cells */ +td .icon { + margin: 0; +} + +.selectallarrow { + margin-#{$right}: 0.3em; + margin-#{$left}: 0.6em; +} + +.with-selected { + margin-#{$left}: 2em; +} + +/* message boxes: error, confirmation */ +#pma_errors, +#pma_demo, +#pma_footer { + position: relative; + padding: 20px; +} + +#pma_errors #pma_errors { + padding: 0; +} + +.success h1, +.notice h1 { + text-align: $left; + margin: 0 0 0.2em 0; + color: $navi-color; +} + +div { + &.error h1 { + text-align: $left; + margin: 0 0 0.2em 0; + color: $navi-color; + } + + &.success, + &.notice, + &.error, + &.footnotes { + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + margin: 0 0 1px; + border: 1px solid; + background-repeat: no-repeat; + + @if $direction == rtl { + background-position: 99% 50%; + padding: 10px 35px 10px 10px; + } @else { + background-position: 10px 50%; + padding: 10px 10px 10px 10px; + } + } + + &.success { + margin: 0 0 1em 0; + border: none; + } +} + +.success a, +.notice a, +.error a { + text-decoration: underline; + color: $button-color; +} + +.success { + color: $button-color; + background-color: $browse-success-color; +} + +h1.success, +div.success { + border-color: $browse-success-color; +} + +.notice, +.footnotes { + color: $button-color; + background-color: $blue-header; +} + +h1.notice { + border-color: $blue-header; +} + +div { + &.notice, + &.footnotes { + border-color: $blue-header; + } +} + +.notice a { + color: $button-color; +} + +.error { + border: 1px solid $browse-warning-color !important; + color: $button-color; + background-color: $browse-warning-color; +} + +h1.error, +div.error { + border-color: $main-color; +} + +.confirmation { + color: $button-color; + background-color: $browse-warning-color; +} + +fieldset.confirmation legend { + background-color: $browse-warning-color; +} + +/* end messageboxes */ + +.column_name { + font-size: 80%; + margin: 5px 2px; +} + +.new_central_col { + width: 100%; +} + +.tblcomment { + font-size: 70%; + font-weight: normal; + color: #009; +} + +.tblHeaders { + font-family: $font-family-bold; + color: $th-color; + background: $th-background; + font-weight: normal; +} + +div.tools, +.tblFooters { + font-weight: normal; + color: $th-color; + background: $th-background; +} + +.tblHeaders, +div.tools, +.tblFooters { + a { + &:link, + &:active, + &:visited { + color: #00f; + } + + &:hover { + color: #f00; + } + } +} + +/* forbidden, no privileges */ +.noPrivileges { + color: #f00; + font-weight: bold; +} + +/* disabled text */ +.disabled { + color: #666; + + a { + &:link, + &:active, + &:visited { + color: #666; + } + + &:hover { + color: #666; + text-decoration: none; + } + } +} + +tr.disabled td, +td.disabled { + background-color: #f3f3f3; + color: #aaa; +} + +.nowrap { + white-space: nowrap; +} + +.font_weight_bold { + font-weight: bold; +} + +.color_red { + color: red; +} + +/* specific elements */ + +/* topmenu */ + +#topmenu .error { + background: #eee; + border: 0 !important; + color: #aaa; +} + +ul { + &#topmenu, + &#topmenu2 { + list-style-type: none; + margin: 0; + height: 48px; + } + + &.tabs { + list-style-type: none; + margin: 0; + } + + &#topmenu2 { + margin: -20px -10px 20px; + padding: 10px; + clear: both; + } + + &#topmenu li, + &#topmenu2 li { + float: $left; + margin: 0; + vertical-align: middle; |