panels: update (especially for studios and projects)

website/agenda/planung/css/default.css

@@ -298,13 +298,23 @@ a {
 
 #content .panel {
     background:white;
-    margin: 4px;
+    margin: 1rem;
     padding: 1rem;
 
     border: 1px solid rgba(0, 0, 0, .03);
-    box-shadow: 0 2px 2px rgba(0, 0, 0, .24), 
-                0 0   2px rgba(0, 0, 0, .12);
-    border-radius:0.3rem;
+    border-radius:0.5rem;
+    position: relative;
+}
+
+#content .panel,
+#content div.card {
+    box-shadow: 0 1px 3px rgba(0,0,0,0.16), 0 1px 3px rgba(0,0,0,0.23);
+    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+}
+
+#content .panel:hover,
+#content div.card:hover {
+  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
 }
 
 #content div.panel-header {
@@ -445,7 +455,8 @@ div.badge-error {
 #content button,
 #content select,
 #content input {
-    padding: 0.5rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
 }
 
 #content div.flex {
@@ -458,9 +469,7 @@ div.badge-error {
 #content div.card {
     border: 0;
     margin: 1em;
-    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .12), 0 2px 10px 0
-        rgba(0, 0, 0, .09);
-    border-radius: 0.3rem;
+    border-radius: 0.5rem;
 }
 
 #content table.table tr:hover {
@@ -541,7 +550,7 @@ table.tablesorter tr {
     text-align: center;
     text-decoration: none;
     min-width: 5rem;
-    border-radius: 0.3rem;
+    border-radius: 1rem;
     color: #fff;
     height: 2.3rem;
     position: relative;
@@ -639,7 +648,7 @@ input[type='checkbox'] {
 }
 
 input.image {
-    width: 16rem;
+    width: 28ch;
 }
 
 #content .select .option {
@@ -721,3 +730,14 @@ ul.tabContainer li:last-child{
 .right{
     margin-left:auto;
 }
+
+#content .right,
+.right{
+    margin-left:auto;
+}
+
+#content .bottom,
+.bottom{
+    margin-bottom:auto;
+}
+