]> git.joonet.de Git - adminer.git/commitdiff
Update design
authorJakub Vrana <jakub@vrana.cz>
Wed, 12 Feb 2014 16:56:40 +0000 (08:56 -0800)
committerJakub Vrana <jakub@vrana.cz>
Wed, 12 Feb 2014 16:56:40 +0000 (08:56 -0800)
designs/bueltge/adminer.css

index d0c04bacdca040432961aba82fc1cee0ea93a178..dda0fe5d2a6696005ab05fd8c34e3fba8e6c44aa 100644 (file)
@@ -1,13 +1,16 @@
-/** \r
- * Alternative style for Adminer by Frank Bueltge\r
- * @link http://bueltge.de/\r
+/**\r
+ * Alternative style for Adminer by Frank Bültge\r
+ * \r
+ * @link     http://bueltge.de/\r
+ * @version  01/26/2014\r
  */\r
 \r
 body {\r
-margin: 0; \r
-line-height: 1.25em;\r
+margin: 0;\r
 font-size: 12px;\r
+line-height: 1.4em;\r
 background: #F9F9F9;\r
+color: #333;\r
 }\r
 body, select, option, optgroup, button {\r
 font-family: "Lucida Grande",Verdana,Arial,"Bitstream Vera Sans",sans-serif;\r
@@ -19,28 +22,71 @@ input, textarea, pre, code, samp, kbd, var {
 font-family: "Lucida Grande",Verdana,Arial,"Bitstream Vera Sans",sans-serif;\r
 font-size: 12px;\r
 }\r
+input[type='submit']#logout {\r
+display:none;\r
+}\r
+\r
+pre {\r
+white-space: pre-wrap;\r
+}\r
+\r
+p {\r
+margin: 0.8em 20px 0 5px\r
+}\r
 \r
 a { \r
 color: #21759B;\r
+background: none !important;\r
 }\r
 a:visited { \r
 color: #21759B;\r
 }\r
-a:hover { \r
+a:hover, a:hover { \r
 text-decoration: none;\r
-color: #D54E21;\r
+color: #d54e21;\r
+}\r
+a:focus {\r
+       background: #c7e7fd;\r
+       color: #124964;\r
+}\r
+a:active {\r
+       background: none;\r
+       outline: thin dotted;\r
+}\r
+\r
+a.active, a.active + a {\r
+       text-decoration: none;\r
+       font-weight: 700;\r
 }\r
 \r
 form {\r
 margin: 0;\r
+padding: 0 0 0 5px;\r
+}\r
+table {\r
+width: 100%;\r
+clear: both;\r
+margin: 0;\r
+border-spacing: 0;\r
+border-collapse: separate;\r
+border-color: gray;\r
 }\r
-table { \r
-margin: 0 12px 12px 0; \r
+table, thead, tbody {\r
+margin: 10px 12px 0 0;\r
 border: 1px #BBB solid;\r
 font-size: 90%;\r
 }\r
+thead th, thead td {\r
+text-align: center;\r
+}\r
+td {\r
+white-space: normal;\r
+overflow: hidden;\r
+padding: 0 4px;\r
+}\r
 th {\r
 text-align: left;\r
+font-weight: 400;\r
 }\r
 td, th {\r
 background-color: #fff;\r
@@ -54,9 +100,14 @@ border-top-width: 0;
 td:first-child, th:first-child {\r
 border-left-width: 0;\r
 }\r
+thead {\r
+display: table-header-group;\r
+vertical-align: middle;\r
+border-color: inherit;\r
+}\r
 thead td, thead th { \r
 background-color: #DFDFDF;\r
-border: none; \r
+border: none;\r
 border-bottom: 1px #BBB solid;\r
 }\r
 thead tr:hover td, thead tr:hover th {\r
@@ -85,19 +136,21 @@ fieldset, x:-moz-any-link {
 padding-top: 4px;\r
 }\r
 fieldset {\r
-%padding-top: 14px;\r
+padding-top: 14px;\r
 }\r
 legend {\r
 font-weight: 900; \r
 color: #000;\r
-position: absolute;\r
 top: -1.666em;\r
 left: -1em;\r
 padding: 0 4px;\r
 }\r
-input[name='limit'], input[name*='length'] {\r
+input {\r
+padding: 2px 5px 1px 5px;\r
+}\r
+input[name='limit'], input[name='length'] {\r
 width: 3em; \r
-xtext-align: right;\r
+text-align: right;\r
 }\r
 input[name='text_length'] {\r
 width: 5em;\r
@@ -108,39 +161,83 @@ margin-left: 2px;
 textarea, input, select {\r
 border-width: 1px;\r
 border-style: solid;\r
--moz-border-radius: 4px;\r
--khtml-border-radius: 4px;\r
--webkit-border-radius: 4px;\r
-border-radius: 4px;\r
+-moz-border-radius: 3px;\r
+-khtml-border-radius: 3px;\r
+-webkit-border-radius: 3px;\r
+border-radius: 3px;\r
 border-color: #DFDFDF;\r
 }\r
+select {\r
+margin: 0 0 1px 0;\r
+}\r
 input[type="checkbox"], input[type="radio"], input[type="image"] {\r
 border: 0 none;\r
 }\r
 input[type=button], input[type=submit] {\r
-border-color: #bbb;\r
-color: #464646;\r
-}\r
-input[type=button]:hover, input[type=submit]:hover {\r
-color: #000;\r
-border-color: #666;\r
+       display: inline-block;\r
+       text-decoration: none;\r
+       font-size: 12px;\r
+       line-height: 15px;\r
+       padding: 1px 0 0 0;\r
+       cursor: pointer;\r
+       border-width: 1px;\r
+       border-style: solid;\r
+       -webkit-border-radius: 3px;\r
+       border-radius: 3px;\r
+       -webkit-box-sizing: content-box;\r
+       -moz-box-sizing:    content-box;\r
+       box-sizing:         content-box;\r
+       white-space: nowrap;\r
+       border-color: #dfdfdf;\r
+       background-color: #fff;\r
+       color: #333;\r
+}\r
+input[type="button"]:focus, input[type=submit] {\r
+       border-color: #a1a1a1;\r
+       -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.1);\r
+       box-shadow: 1px 1px 2px rgba(0,0,0,0.1);\r
 }\r
 input[type=button], input[type=submit] {\r
-text-decoration: none;\r
-font-size: 11px !important;\r
-line-height: 14px;\r
-padding: 2px 8px;\r
-cursor: pointer;\r
-border-width: 1px;\r
-border-style: solid;\r
--moz-border-radius: 11px;\r
--khtml-border-radius: 11px;\r
--webkit-border-radius: 11px;\r
-border-radius: 11px;\r
--moz-box-sizing: content-box;\r
--webkit-box-sizing: content-box;\r
--khtml-box-sizing: content-box;\r
-box-sizing: content-box;\r
+       padding: 2px 5px 1px 5px;\r
+       background: #ececec;\r
+       background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));\r
+       background-image: -webkit-linear-gradient(top, #fff, #eee);\r
+       background-image:    -moz-linear-gradient(top, #fff, #eee);\r
+       background-image:      -o-linear-gradient(top, #fff, #eee);\r
+       background-image:   linear-gradient(to bottom, #fff, #eee);\r
+       border-color: #ccc;\r
+       -webkit-box-shadow: inset 0 0 1px 1px rgba(255,255,255, 0.9); \r
+       box-shadow: inset 0 0 1px 1px rgba(255,255,255, 0.9);\r
+       color: #464646;\r
+       text-shadow: 1px 1px 0 #fff;\r
+}\r
+input[type=button]:hover, input[type=submit]:hover,\r
+input[type=button]:focus, input[type=submit]:focus  {\r
+       background: #ececec;\r
+       background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));\r
+       background-image: -webkit-linear-gradient(top, #fff, #eee);\r
+       background-image:    -moz-linear-gradient(top, #fff, #eee);\r
+       background-image:      -o-linear-gradient(top, #fff, #eee);\r
+       background-image:   linear-gradient(to bottom, #fff, #eee);\r
+       border-color: #bbb;\r
+       -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,.1); \r
+       box-shadow: 0px 1px 1px rgba(0,0,0,.1);\r
+       color: #000;\r
+}\r
+input[type=button]:active, input[type=submit]:active {\r
+       background: #eee;\r
+       background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#f9f9f9));\r
+       background-image: -webkit-linear-gradient(top, #eee, #f9f9f9);\r
+       background-image:    -moz-linear-gradient(top, #eee, #f9f9f9);\r
+       background-image:      -o-linear-gradient(top, #eee, #f9f9f9);\r
+       background-image:   linear-gradient(to bottom, #eee, #f9f9f9);\r
+       border-color: #999 #ddd #ddd #999;\r
+       color: #555;\r
+       -webkit-box-shadow: inset 1px 1px 0 rgba(50,50,50,0.1); \r
+       box-shadow: inset 1px 1px 0 rgba(50,50,50,0.1);\r
+}\r
+input[type=button]:focus, input[type=submit]:focus {\r
+       border-color: #aaa;\r
 }\r
 input + label input, select + label input {\r
 margin-left: 4px;\r
@@ -166,6 +263,11 @@ vertical-align: middle;
 margin: 0; \r
 padding: 0;\r
 }\r
+.js .column {\r
+position: relative;\r
+background: none;\r
+padding: 0;\r
+}\r
 .error { \r
 padding: 8px; \r
 color: red; \r
@@ -190,17 +292,20 @@ color: red;
 .jush-sql {\r
 padding: 2px 4px;\r
 margin-right: 4px;\r
-outline: 1px #BBB dashed;\r
-font-size: 9pt;\r
+font-size: 11px;\r
+}\r
+.time {\r
+color: #333;\r
 }\r
 \r
 #content { \r
-margin: 2px 0 0 260px; \r
+margin: 2px 0 0 270px; \r
 padding: 10px 20px 20px 0;\r
 }\r
-#lang { \r
+#lang {\r
+font-size:10px;\r
 height: 23px;\r
-width: 250px;\r
+width: 255px;\r
 display: block; \r
 padding: 1px 0; \r
 position: absolute; \r
@@ -212,7 +317,7 @@ border: 1px solid #E3E3E3;
 line-height: 1.25em;\r
 }\r
 #lang select {\r
-font-size: 8pt;\r
+font-size: 10px;\r
 }\r
 #breadcrumb { \r
 margin: 0; \r
@@ -220,7 +325,7 @@ height: 21px;
 display: block; \r
 position: absolute; \r
 top: 0; \r
-left: 260px;\r
+left: 270px;\r
 background-color: #f1f1f1;\r
 border: 1px solid #E3E3E3;\r
 padding: 2px 12px;\r
@@ -230,7 +335,7 @@ position: absolute;
 margin: 0;\r
 top: 28px; \r
 left: 0; \r
-width: 250px; \r
+width: 255px; \r
 background-color: #f1f1f1;\r
 border: 1px solid #E3E3E3;\r
 }\r
@@ -239,13 +344,18 @@ margin: 0;
 }\r
 #menu p { \r
 padding-left: 8px;\r
-font-size: 10pt;\r
 border-bottom: none;\r
 }\r
+#dbs {\r
+padding: 0 !important;\r
+}\r
 #menu form p {\r
 padding-left: 0;\r
 text-align: left;\r
 }\r
+#menu h1 {\r
+display: none;\r
+}\r
 h1 .h1:hover {\r
 text-decoration: underline;\r
 } \r
@@ -266,10 +376,9 @@ font-size: 12px;
 h2 {\r
 padding: 22px 0 0 10px;\r
 }\r
-h3 { \r
-margin: 40px 0 0;\r
-font-weight: 400; \r
-font-size: 130%;\r
+h3 {\r
+font: normal normal normal 18px/22px Georgia, "Times New Roman", "Bitstream Charter", Times, serif;\r
+margin: 20px 0 0 5px;\r
 }\r
 #schema { \r
 margin: 1.5em 0 0 220px;\r
@@ -285,8 +394,11 @@ position: absolute;
 #schema .references { \r
 position: absolute;\r
 }\r
-.js div.hidden {\r
-display: inline;\r
+.js .hidden {\r
+display: hidden;\r
+}\r
+.js td.hidden, .js input.hidden {\r
+display: none;\r
 }\r
 legend a {\r
 color: #333;\r
@@ -299,40 +411,27 @@ color: #333;
 code {\r
 background: transparent;\r
 }\r
-fieldset, legend, h2, table, .error, .message {\r
--moz-border-radius: 5px;\r
--khtml-border-radius: 5px;\r
--webkit-border-radius: 5px;\r
-border-radius: 5px;\r
+fieldset, legend, table, thead, tbody, .error, .message {\r
+-moz-border-radius: 3px;\r
+-khtml-border-radius: 3px;\r
+-webkit-border-radius: 3px;\r
+border-radius: 3px;\r
 }\r
 #breadcrumb, #lang, #menu {\r
--moz-border-radius-bottomright: 5px;\r
--khtml-border-bottom-right-radius: 5px;\r
--webkit-border-bottom-right-radius: 5px;\r
-border-bottom-right-radius: 5px;\r
+-moz-border-radius-bottomright: 3px;\r
+-khtml-border-bottom-right-radius: 3px;\r
+-webkit-border-bottom-right-radius: 3px;\r
+border-bottom-right-radius: 3px;\r
 }\r
 #breadcrumb {\r
--moz-border-radius-bottomleft: 5px;\r
--khtml-border-bottom-left-radius: 5px;\r
--webkit-border-bottom-left-radius: 5px;\r
-border-bottom-left-radius: 5px;\r
+-moz-border-radius-bottomleft: 3px;\r
+-khtml-border-bottom-left-radius: 3px;\r
+-webkit-border-bottom-left-radius: 3px;\r
+border-bottom-left-radius: 3px;\r
 }\r
 #menu {\r
 -moz-border-radius-topright: 5px;\r
--khtml-border-top-right-radius: 5px;\r
--webkit-border-top-right-radius: 5px;\r
-border-bottom-top-radius: 5px;\r
-}\r
-.js .column {\r
-background: #DFDFDF;\r
-}\r
-#logout {\r
-color: #21759B;\r
-}\r
-#logout:hover {\r
-text-decoration: none;\r
-}\r
-#logins a, #tables a {\r
-background: #F1F1F1;\r
-line-height: 1.5em;\r
-}\r
+-khtml-border-top-right-radius: 3px;\r
+-webkit-border-top-right-radius: 3px;\r
+border-top-right-radius: 3px;\r
+}
\ No newline at end of file