erd.css in erd-0.7.0

- old
+ new

@@ -217,24 +217,25 @@
       -ms-box-shadow: rgba(0, 0, 0, 0.7) 0 2px 2px;
       -o-box-shadow: rgba(0, 0, 0, 0.7) 0 2px 2px;
       box-shadow: rgba(0, 0, 0, 0.7) 0 2px 2px; }
     #erd .model .model_name {
       border-bottom: 1px #444444 solid;
-      cursor: pointer;
       margin: 1px 5px 0 5px auto; }
+    #erd .model .model_name.edit {
+      cursor: pointer; }
       #erd .model .model_name .model_name_text {
         text-align: center;
         display: block;
         background: -webkit-linear-gradient(top, #eeeeee 0%, #d0d0d0 88%);
         background: -moz-linear-gradient(top, #eeeeee 0%, #d0d0d0 88%);
         background: -ms-linear-gradient(top, #eeeeee 0%, #d0d0d0 88%);
         background: -o-linear-gradient(top, #eeeeee 0%, #d0d0d0 88%);
         background: linear-gradient(top, #eeeeee 0%, #d0d0d0 88%);
-        font-size: 13px;
+        font-size: 15px;
         font-weight: bold;
         text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
-        line-height: 2.2;
+        line-height: 1.6;
         padding: 0 0.8em; }
         #erd .model .model_name .model_name_text.unsaved {
           background: #fffebe;
           position: relative;
           background: #fffebe;
@@ -312,11 +313,11 @@
   text-align: center; }
   .add_column_box a.add_column {
     font-size: small;
     display: block;
     padding: 0 5px;
-    line-height: 2;
+    line-height: 1.6;
     background: #444444;
     color: white;
     text-decoration: none; }
     .add_column_box a.add_column:hover {
       background: #3a3a3a; }
@@ -326,26 +327,26 @@
   color: white;
   padding: 8px; }
 
 .columns .column {
   border-bottom: dotted 1px #cccccc;
-  padding: 0 0.8em;
+  padding: 0 0.5em;
   clear: both;
-  line-height: 28px;
+  line-height: 20px;
   font-size: 14px; }
   .columns .column table {
     width: 100%; }
   .columns .column:nth-child(even) {
     background: #f9f9f9; }
   .columns .column:last-child {
     border-bottom: none; }
-  .columns .column .column_name_text,
-  .columns .column .column_type_text {
+  .columns .column .column_name_text.edit,
+  .columns .column .column_type_text.edit {
     cursor: pointer; }
   .columns .column .column_name_text {
     margin: 0 1.4em 0 0; }
-    .columns .column .column_name_text:hover {
+    .columns .column .column_name_text.edit:hover {
       text-decoration: underline; }
   .columns .column.unsaved {
     background: #fffebe;
     position: relative; }
     .columns .column.unsaved:before {
@@ -375,15 +376,15 @@
     .columns .column.unsaved:hover {
       background: #f9f8b8; }
   .columns .column .rename_column_form {
     padding: 8px; }
   .columns .column .column_type_text {
-    font-size: 10px;
+    font-size: 13px;
     float: right;
     display: block;
     line-height: 16px;
-    margin: 5px 0 0;
+    margin: 1px 0 0;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     -ms-border-radius: 4px;
     -o-border-radius: 4px;
     border-radius: 4px;
@@ -393,75 +394,75 @@
     text-align: center;
     border-color: #e98c60;
     background: #f9eee9;
     color: #444444;
     border-style: solid; }
-    .columns .column .column_type_text:hover {
+    .columns .column .column_type_text.edit:hover {
       border-color: #e36c33;
       background: #edd0c2; }
     .columns .column .column_type_text.date, .columns .column .column_type_text.time, .columns .column .column_type_text.timestamp, .columns .column .column_type_text.datetime {
       border-color: #da6272;
       background: #f3e2e4;
       color: #444444;
       border-style: solid; }
-      .columns .column .column_type_text.date:hover, .columns .column .column_type_text.time:hover, .columns .column .column_type_text.timestamp:hover, .columns .column .column_type_text.datetime:hover {
+      .columns .column .column_type_text.edit.date:hover, .columns .column .column_type_text.edit.time:hover, .columns .column .column_type_text.edit.timestamp:hover, .columns .column .column_type_text.edit.datetime:hover {
         border-color: #d0394d;
         background: #e4bec3; }
     .columns .column .column_type_text.boolean {
       border-color: #45a1cf;
       background: #c7dce6;
       color: #444444;
       border-style: solid; }
-      .columns .column .column_type_text.boolean:hover {
+      .columns .column .column_type_text.edit.boolean:hover {
         border-color: #2e87b3;
         background: #a3c6d7; }
     .columns .column .column_type_text.text {
       border-color: #dab24f;
       background: #efe7d3;
       color: #444444;
       border-style: solid; }
-      .columns .column .column_type_text.text:hover {
+      .columns .column .column_type_text.edit.text:hover {
         border-color: #cb9d2b;
         background: #e1d2ae; }
     .columns .column .column_type_text.decimal {
       border-color: #8e8e08;
       background: #dfdf50;
       color: #444444;
       border-style: solid; }
-      .columns .column .column_type_text.decimal:hover {
+      .columns .column .column_type_text.edit.decimal:hover {
         border-color: #5e5e05;
         background: #d5d527; }
     .columns .column .column_type_text.float {
       border-color: #85616b;
       background: silver;
       color: #444444;
       border-style: solid; }
-      .columns .column .column_type_text.float:hover {
+      .columns .column .column_type_text.edit.float:hover {
         border-color: #684b53;
         background: #a6a6a6; }
     .columns .column .column_type_text.integer {
       border-color: #7c80aa;
       background: #dfdfe0;
       color: #444444;
       border-style: solid; }
-      .columns .column .column_type_text.integer:hover {
+      .columns .column .column_type_text.edit.integer:hover {
         border-color: #606493;
         background: #c5c5c7; }
     .columns .column .column_type_text.primary_key {
       border-color: #ea9a5d;
       background: #f9efe7;
       color: #444444;
       border-style: solid; }
-      .columns .column .column_type_text.primary_key:hover {
+      .columns .column .column_type_text.edit.primary_key:hover {
         border-color: #e47e30;
         background: #eed3bf; }
     .columns .column .column_type_text.string {
       border-color: #a4c520;
       background: #d3e09e;
       color: #444444;
       border-style: solid; }
-      .columns .column .column_type_text.string:hover {
+      .columns .column .column_type_text.edit.string:hover {
         border-color: #7f9919;
         background: #c1d477; }
     .columns .column .column_type_text.unsaved {
       border-color: #a55d00;
       background: #eca952;
@@ -507,9 +508,57 @@
   #failed h2 {
     background-color: #cc0000; }
 
 #model_name_changes, #column_name_changes {
   display: none; }
+
+#drawer_switch {
+  display: none; }
+  #drawer_switch:checked ~ #buttons {
+    right: -400px; }
+  #drawer_switch:checked ~ #drawer_hide_label {
+    visibility: hidden; }
+  #drawer_switch:checked ~ #drawer_show_label {
+    visibility: visible; }
+
+#buttons {
+  position: fixed;
+  top: 70px;
+  right: 15px;
+  -webkit-transition: all 0.5s;
+  transition: all 0.5s; }
+
+.drawer_switch_label {
+  position: fixed;
+  right: 15px;
+  top: 10px;
+  background: rgba(0, 0, 0, 0.6);
+  padding: 12px 20px;
+  color: white;
+  cursor: pointer;
+  text-decoration: none;
+  font-size: 13px; }
+  .drawer_switch_label:hover {
+    background: rgba(0, 0, 0, 0.8); }
+#drawer_show_label {
+  visibility: hidden; }
+
+.menu_button {
+  position: relative;
+  right: 0;
+  background: rgba(0, 0, 0, 0.6);
+  padding: 12px 20px;
+  color: white;
+  text-decoration: none;
+  font-size: 13px; }
+  .menu_button:hover {
+    background: rgba(0, 0, 0, 0.8); }
+#save_position_changes {
+  visibility: hidden;
+  top: 70px;
+  background: rgba(191, 0, 0, 0.6); }
+  #save_position_changes:hover {
+    background: rgba(191, 0, 0, 0.8); }
 
 #open_create_model_dialog {
   position: fixed;
   right: 15px;
   top: 70px;