+/*
+ * Copyright (C) 2017-2019 "IoT.bzh"
+ * Author: José Bollo <jose.bollo@iot.bzh>
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
/*******************************************************************/
/* top */
body {
position: fixed;
top: 0px;
- bottom: 0px;
left: 0px;
right: 0px;
+ bottom: 0px;
}
-body.on #params,
-body.off #controls,
-body.off #logmsg-box { display: none; }
+body.on #params, body.on #connect, body.off #disconnect { display: none; }
+
+/*******************************************************************/
+/* utilities */
+.-flex-h {
+ display: flex;
+ flex-flow: row nowrap;
+}
+.-flex-v {
+ display: flex;
+ flex-flow: column nowrap;
+}
+.-flex-v > .-flex-fill {
+ height: 100%;
+}
+.-flex-h > .-flex-fill {
+ width: 100%;
+}
+.-box-out {
+ position: relative;
+}
+.-box-in {
+ position: absolute;
+ left: 0px;
+ right: 0px;
+ top: 0px;
+ bottom: 0px;
+ overflow: auto;
+}
/*******************************************************************/
/* head */
/*******************************************************************/
/* main area */
-#work {
- position: relative;
- top: 0px;
- bottom: 0px;
- left: 0px;
- right: 0px;
-}
-
-#main {
- position: relative;
- top: 0px;
- bottom: 0px;
- left: 0px;
- right: 0px;
-}
-
-.fillfix {
- width: 100%;
- height: 100%;
-}
-
-#controls {
- position: absolute;
- width: 250px;
- left: 0px;
- top: 0px;
- bottom: 0px;
- overflow: auto;
- margin-bottom: 75px;
-}
-
-#logmsg-box {
- position: absolute;
- width: 250px;
- right: 0px;
- top: 0px;
- bottom: 0px;
- font-size: smaller;
- overflow: auto;
- margin-bottom: 75px;
-}
-
-#trace-events {
- overflow: auto;
- position: absolute;
- right: 250px;
- left: 250px;
- top: 0px;
- bottom: 0px;
- margin-bottom: 75px;
-}
+#work { overflow-x: auto; }
+#controls, #menu { flex: 1; }
+#middle { flex: 3; }
+#controls { min-width: 300px; }
+#menu { min-width: 200px; }
/*******************************************************************/
/* setting for apis */
/*******************************************************************/
/* setting for traces */
-#apis .trace-evt {
- visibility: hidden;
+#apis .event, #apis .global {
display: none;
}
/*******************************************************************/
/* display of logmsg */
+#experts.closed ~ #expert-pane { visibility: hidden; }
+
/*******************************************************************/
/* close box */
.close {
}
.traceevent .time {
- float: left;
+ float: right;
}
.traceevent.closed:hover {
.traceevent.closed:hover .content {
display: block;
background: inherit;
+ overflow: hidden;
left: 40%;
max-width: 55%;
position: absolute;
+ animation-name: display-block;
+ animation-duration: 2s;
+ -webkit-animation-name: display-block;
+ -webkit-animation-duration: 2s;
}
-.traceevent {
+@-webkit-keyframes display-block {
+ from { opacity: 0; }
+ 50% { opacity: 0; }
+ to { opacity: 1; }
+}
+
+@keyframes display-block {
+ from { opacity: 0; }
+ 50% { opacity: 0; }
+ to { opacity: 1; }
+}
+
+.traceevent .content {
+ clear: both;
+ overflow-x: auto;
+}
+
+.traceevent, .x-button {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;