panels: update (especially for studios and projects)

website/agenda/planung/css/audio-recordings.css

@@ -53,7 +53,7 @@ tr.inactive{
 }
 
 #progress_container div{
-    transition : width 3s linear;
+    transition : width 1s linear;
     text-align: center;
     padding: 1rem;
     color:white;

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;
+}
+

website/agenda/planung/css/projects.css

@@ -1,12 +1,13 @@
+
 #content .label {
-    width: 10em;
+    width: 10ch;
     padding: 0;
     margin: 0;
     color: #555;
 }
 
 #content div.project {
-    width: 45%;
+    min-width: 40ch;
 }
 
 #content div.editor {
@@ -28,7 +29,7 @@
     padding: 0;
 }
 
-#content div.editor div.buttons button, 
+#content div.editor div.buttons button,
 #content div.editor div.buttons input {
     margin-left: 1em;
 }
@@ -36,3 +37,31 @@
 #content div.view {
     text-align: left;
 }
+
+#content div.flex{
+    align-items: inherit;
+}
+
+body #content{
+    max-width:none;
+}
+
+.buttons{
+    display: flex;
+}
+
+#content .bottom,
+.bottom{
+    position: absolute;
+    bottom: 1rem;
+}
+
+#content .bottom.right,
+.bottom.right{
+    position: absolute;
+    right: 1rem;
+}
+
+#content div.title {
+    font-size:1.5rem;
+}

website/agenda/planung/css/studios.css

@@ -1,16 +1,20 @@
 #content .label {
-    width: 10em;
+    width: 10ch;
     padding: 0;
     margin: 0;
     color: #555;
 }
 
 #content div.studio {
-    width: 45%;
+    min-width: 40ch;
 }
 
 #content div.editor {
-    display: inline-block;
+    clear: both;
+}
+
+#content div.view {
+    clear: both;
 }
 
 #content div.editor div.right {
@@ -31,5 +35,33 @@
 
 #content div.view {
     text-align: left;
-    clear: both;
 }
+
+#content div.flex{
+    align-items: inherit;
+}
+
+body #content{
+    max-width:none;
+}
+
+.buttons{
+    display: flex;
+}
+
+#content .bottom,
+.bottom{
+    position: absolute;
+    bottom: 1rem;
+}
+
+#content .bottom.right,
+.bottom.right{
+    position: absolute;
+    right: 1rem;
+}
+
+#content .panel{
+    min-height: 25rem;
+}
+