|
|
@@ -1,84 +1,84 @@
|
|
|
html,body{
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- padding: 0;
|
|
|
- margin: 0;
|
|
|
- overflow: hidden;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
.unselectable{
|
|
|
- cursor: default;
|
|
|
- display: block;
|
|
|
- margin: auto;
|
|
|
- margin-bottom: 1em;
|
|
|
- vertical-align: middle;
|
|
|
- text-align: center;
|
|
|
+ cursor: default;
|
|
|
+ display: block;
|
|
|
+ margin: auto;
|
|
|
+ margin-bottom: 1em;
|
|
|
+ vertical-align: middle;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
.fill{
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
.row{
|
|
|
- display: table-row;
|
|
|
+ display: table-row;
|
|
|
}
|
|
|
.cell{
|
|
|
- display: table-cell;
|
|
|
+ display: table-cell;
|
|
|
}
|
|
|
.date_cell{
|
|
|
- word-wrap: normal;
|
|
|
- white-space: pre;
|
|
|
- word-break: keep-all;
|
|
|
+ word-wrap: normal;
|
|
|
+ white-space: pre;
|
|
|
+ word-break: keep-all;
|
|
|
}
|
|
|
.unselectable,#tabs-list div.tab{
|
|
|
- -webkit-touch-callout: none;
|
|
|
- -webkit-user-select: none;
|
|
|
- -khtml-user-select: none;
|
|
|
- -moz-user-select: none;
|
|
|
- -ms-user-select: none;
|
|
|
- user-select: none;
|
|
|
+ -webkit-touch-callout: none;
|
|
|
+ -webkit-user-select: none;
|
|
|
+ -khtml-user-select: none;
|
|
|
+ -moz-user-select: none;
|
|
|
+ -ms-user-select: none;
|
|
|
+ user-select: none;
|
|
|
}
|
|
|
.close-button{
|
|
|
- float: right;
|
|
|
- font-weight: bold;
|
|
|
- font-size: 24px;
|
|
|
- margin-top: -5px;
|
|
|
- font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
|
|
|
+ float: right;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 24px;
|
|
|
+ margin-top: -5px;
|
|
|
+ font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
|
|
|
line-height: 17px;
|
|
|
margin-top: 0;
|
|
|
display: block;
|
|
|
- cursor: pointer;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
.close-button:hover{
|
|
|
- color: red;
|
|
|
+ color: red;
|
|
|
}
|
|
|
#head{
|
|
|
- right: 0;
|
|
|
- top: 0;
|
|
|
- width: 100%;
|
|
|
- height: 40px;
|
|
|
- border-bottom-style: solid;
|
|
|
- background-color: white;
|
|
|
- transition: height 0.3s;
|
|
|
- z-index: 10;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ border-bottom-style: solid;
|
|
|
+ background-color: white;
|
|
|
+ transition: height 0.3s;
|
|
|
+ z-index: 10;
|
|
|
font-size: 10px;
|
|
|
font-family:verdana,sans-serif;
|
|
|
background-color: #DFEFFF;
|
|
|
}
|
|
|
#info{
|
|
|
- display: table;
|
|
|
- width: 100%;
|
|
|
+ display: table;
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
#title{
|
|
|
- display: table-cell;
|
|
|
+ display: table-cell;
|
|
|
}
|
|
|
#topic{
|
|
|
- display: table-cell;
|
|
|
- text-align: right;
|
|
|
-}
|
|
|
-#content,#console-log{
|
|
|
- width: 100%;
|
|
|
- height: calc(100% - 61px);
|
|
|
- top: 41px;
|
|
|
- left: 0;
|
|
|
+ display: table-cell;
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+#console-log, #content{
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 61px);
|
|
|
+ top: 41px;
|
|
|
+ left: 0;
|
|
|
font-size: 10px;
|
|
|
font-family:verdana,sans-serif;
|
|
|
line-height:13px;
|
|
|
@@ -88,222 +88,256 @@ html,body{
|
|
|
background-color: #cae4ff;
|
|
|
}
|
|
|
#content-list a, #content-list a:hover, #content-list a:active , #content-list a:active, #content-list a:link {
|
|
|
- color:blue;
|
|
|
- text-decoration: none;
|
|
|
- border-bottom: 1px solid rgba(0, 0, 255, 0.3);
|
|
|
+ color:blue;
|
|
|
+ text-decoration: none;
|
|
|
+ border-bottom: 1px solid rgba(0, 0, 255, 0.3);
|
|
|
|
|
|
}
|
|
|
#content-list a:hover {
|
|
|
- text-decoration: none;
|
|
|
- text-shadow: 0 0 4px rgba(0, 40, 170, 0.5);
|
|
|
+ text-decoration: none;
|
|
|
+ text-shadow: 0 0 4px rgba(0, 40, 170, 0.5);
|
|
|
}
|
|
|
|
|
|
#console-log{
|
|
|
font-size: 14px;
|
|
|
- display: none;
|
|
|
+ display: none;
|
|
|
}
|
|
|
#console-log-pre{
|
|
|
- height: 100%;
|
|
|
- margin: 0;
|
|
|
- padding: 2px;
|
|
|
+ height: 100%;
|
|
|
+ margin: 0;
|
|
|
+ padding: 2px;
|
|
|
}
|
|
|
#console-log-controls{
|
|
|
- position: absolute;
|
|
|
- bottom: 22px;
|
|
|
- width: 100%;
|
|
|
- overflow: hidden;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 22px;
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
|
|
|
#settings,#users{
|
|
|
- font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
|
|
|
- font-size: 12px;
|
|
|
- bottom: 0;
|
|
|
- height: 19px;
|
|
|
- background-color: white;
|
|
|
- border-left-style: solid;
|
|
|
- border-top-style: solid;
|
|
|
- margin-top: -1px;
|
|
|
- transition: width 0.5s, height 0.5s, right 0.5s;
|
|
|
+ font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
|
|
|
+ font-size: 12px;
|
|
|
+ bottom: 0;
|
|
|
+ height: 19px;
|
|
|
+ background-color: white;
|
|
|
+ border-left-style: solid;
|
|
|
+ border-top-style: solid;
|
|
|
+ margin-top: -1px;
|
|
|
+ transition: width 0.5s, height 0.5s, right 0.5s;
|
|
|
}
|
|
|
#settings span,#users span{
|
|
|
- cursor: pointer;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
#settings.open span,#users.open.span{
|
|
|
- cursor: default;
|
|
|
+ cursor: default;
|
|
|
}
|
|
|
#settings.open span.close-button,#users.open span.close-button{
|
|
|
- cursor: pointer;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
#users{
|
|
|
- right: 0;
|
|
|
- width: 36px;
|
|
|
- z-index: 1;
|
|
|
- background-color: #cae4ff;
|
|
|
+ right: 0;
|
|
|
+ width: 36px;
|
|
|
+ z-index: 1;
|
|
|
+ background-color: #cae4ff;
|
|
|
}
|
|
|
#settings{
|
|
|
- width: 50px;
|
|
|
+ width: 50px;
|
|
|
border-top-color: rgba(102, 153, 255, 0.6);
|
|
|
- border-right-style: solid;
|
|
|
- right: 36px;
|
|
|
- background-color: #cae4ff;
|
|
|
+ border-right-style: solid;
|
|
|
+ right: 36px;
|
|
|
+ background-color: #cae4ff;
|
|
|
|
|
|
}
|
|
|
+#settings .cell {
|
|
|
+ vertical-align: middle;
|
|
|
+}
|
|
|
#settings.hovered,#users.hovered{
|
|
|
- height: 21px;
|
|
|
+ height: 21px;
|
|
|
}
|
|
|
#settings.open,#users.open{
|
|
|
- width: 150px;
|
|
|
- height: 100%;
|
|
|
- right: 0;
|
|
|
- z-index: 20;
|
|
|
+ width: 150px;
|
|
|
+ height: 100%;
|
|
|
+ right: 0;
|
|
|
+ z-index: 20;
|
|
|
}
|
|
|
#settings.open{
|
|
|
- width: 300px;
|
|
|
+ width: 300px;
|
|
|
}
|
|
|
|
|
|
#settings input, #settings select {
|
|
|
- background-color: #DFEFFF;
|
|
|
- border-radius: 2px;
|
|
|
- border: solid 1px rgba(102, 153, 255, 0.9);
|
|
|
+ background-color: #DFEFFF;
|
|
|
+ border-radius: 2px;
|
|
|
+ border: solid 1px rgba(102, 153, 255, 0.9);
|
|
|
+}
|
|
|
|
|
|
+#settings button {
|
|
|
+ -webkit-appearance:none;
|
|
|
+ appearance:none;
|
|
|
+ background-color: #cae4ff;
|
|
|
+ box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 15px 10px -12px rgba(255,255,255,0.1);
|
|
|
+ border-radius: 2px;
|
|
|
+ border: solid 1px rgba(102, 153, 255, 0.9);
|
|
|
+}
|
|
|
+
|
|
|
+#settings input[type="checkbox"] {
|
|
|
+ -webkit-appearance:none;
|
|
|
+ appearance:none;
|
|
|
+ box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 15px 10px -12px rgba(255,255,255,0.1);
|
|
|
+ border-color: rgba(102, 153, 255, 0.6);
|
|
|
+ border-right-style: solid;
|
|
|
+ background-color: #DFEFFF;
|
|
|
}
|
|
|
+#settings input[type="checkbox"]:checked {
|
|
|
+ content: '\2714';
|
|
|
+ box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 15px 10px -12px rgba(255,255,255,0.1);
|
|
|
+ background-color: #cae4ff;
|
|
|
+}
|
|
|
+#settings input[type="checkbox"]:after {
|
|
|
+ content: '\2714';
|
|
|
+ font-size: 14px;
|
|
|
+ color: rgba(0,0,0,0);
|
|
|
+}
|
|
|
+#settings input[type="checkbox"]:checked:after {
|
|
|
+ color: #99a1a7;
|
|
|
+}
|
|
|
+
|
|
|
#entry{
|
|
|
- width: 100%;
|
|
|
- border-top-style: solid;
|
|
|
- height: 19px;
|
|
|
- bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ border-top-style: solid;
|
|
|
+ height: 19px;
|
|
|
+ bottom: 0;
|
|
|
|
|
|
}
|
|
|
#input{
|
|
|
- width: calc(100% - 126px);
|
|
|
- height: 17px;
|
|
|
- margin: 0;
|
|
|
- padding: 1px;
|
|
|
- border-style: none;
|
|
|
- clear: none;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- background-color: #cae4ff;
|
|
|
+ width: calc(100% - 126px);
|
|
|
+ height: 17px;
|
|
|
+ margin: 0;
|
|
|
+ padding: 1px;
|
|
|
+ border-style: none;
|
|
|
+ clear: none;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ background-color: #cae4ff;
|
|
|
}
|
|
|
#send{
|
|
|
|
|
|
- clear: none;
|
|
|
- bottom: 0;
|
|
|
- right: 88px;
|
|
|
- width: 48px;
|
|
|
- padding: 0;
|
|
|
- padding-bottom: 4px;
|
|
|
- margin: 0;
|
|
|
- height: 19px;
|
|
|
- border-style: none;
|
|
|
- border-left: 1px solid;
|
|
|
- background-color: #cae4ff;
|
|
|
- transition: background-color 0.2s;
|
|
|
- font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
|
|
|
- font-size: 12px;
|
|
|
- vertical-align: top;
|
|
|
- text-align: center;
|
|
|
+ clear: none;
|
|
|
+ bottom: 0;
|
|
|
+ right: 88px;
|
|
|
+ width: 48px;
|
|
|
+ padding: 0;
|
|
|
+ padding-bottom: 4px;
|
|
|
+ margin: 0;
|
|
|
+ height: 19px;
|
|
|
+ border-style: none;
|
|
|
+ border-left: 1px solid;
|
|
|
+ background-color: #cae4ff;
|
|
|
+ transition: background-color 0.2s;
|
|
|
+ font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
|
|
|
+ font-size: 12px;
|
|
|
+ vertical-align: top;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
#send:hover{
|
|
|
- background-color: #DFEFFF;
|
|
|
+ background-color: #DFEFFF;
|
|
|
}
|
|
|
#send.clicked{
|
|
|
- background-color: rgba(102, 153, 255, 0.9);
|
|
|
+ background-color: rgba(102, 153, 255, 0.9);
|
|
|
}
|
|
|
#popup-title, #send {
|
|
|
- font-variant: small-caps;
|
|
|
+ font-variant: small-caps;
|
|
|
}
|
|
|
|
|
|
#console-log,#content,#head,#users,#entry,#input,#send,#settings{
|
|
|
- border-color: rgba(102, 153, 255, 0.6);
|
|
|
- border-top-color: rgba(102, 153, 255, 0.9);
|
|
|
- border-width: 1px;
|
|
|
- position: absolute;
|
|
|
- overflow: hidden;
|
|
|
+ border-color: rgba(102, 153, 255, 0.6);
|
|
|
+ border-top-color: rgba(102, 153, 255, 0.9);
|
|
|
+ border-width: 1px;
|
|
|
+ position: absolute;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
-#console-log,#content{
|
|
|
- overflow-y: scroll;
|
|
|
+#content, #console-log{
|
|
|
+ overflow-y: scroll;
|
|
|
}
|
|
|
#users,#input,#send,#settings{
|
|
|
- position: fixed;
|
|
|
+ position: fixed;
|
|
|
}
|
|
|
#content-list,#user-list,#settings-list,#tabs-list{
|
|
|
- list-style-type: none;
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- overflow-y: auto;
|
|
|
- word-wrap: break-word;
|
|
|
- white-space: pre-wrap;
|
|
|
- word-break: break-all;
|
|
|
+ list-style-type: none;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ overflow-y: auto;
|
|
|
+ word-wrap: break-word;
|
|
|
+ white-space: pre-wrap;
|
|
|
+ word-break: break-all;
|
|
|
}
|
|
|
#content-list,#user-list,#tabs-list{
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
#content-list,#settings-list{
|
|
|
- display: table;
|
|
|
- table-layout: fixed;
|
|
|
+ display: table;
|
|
|
+ table-layout: fixed;
|
|
|
}
|
|
|
#settings-list > li{
|
|
|
- line-height: 4px;
|
|
|
+ line-height: 4px;
|
|
|
}
|
|
|
#user-list{
|
|
|
- font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
|
|
|
- font-size: 15px;
|
|
|
+ font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
|
|
|
+ font-size: 15px;
|
|
|
}
|
|
|
-#user-list li:nth-child(even){
|
|
|
+#user-list li:nth-child(even) {
|
|
|
background-color: #DFEFFF;
|
|
|
border: solid 1px #6699ff;
|
|
|
border-left: 0px;
|
|
|
border-right: 0px;
|
|
|
}
|
|
|
#tabs-list{
|
|
|
- width: calc(100% - 42px);
|
|
|
- height: 20px;
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 20px;
|
|
|
- overflow: hidden;
|
|
|
+ width: calc(100% - 42px);
|
|
|
+ height: 20px;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 20px;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
#tabs-list div.tab{
|
|
|
- float: left;
|
|
|
- max-width: 200px;
|
|
|
- overflow: hidden;
|
|
|
- position: relative;
|
|
|
+ float: left;
|
|
|
+ max-width: 200px;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
height: 18px;
|
|
|
margin-bottom: -1px;
|
|
|
}
|
|
|
#tabs-list div.tab.clicked{
|
|
|
background-color: #cae4ff;
|
|
|
border: solid 1px #6699ff;
|
|
|
- border-bottom-width: 0px;
|
|
|
+ border-bottom-width: 0px;
|
|
|
}
|
|
|
#tabs-scroll-left{
|
|
|
- position: absolute;
|
|
|
- right: 20px;
|
|
|
- top: 20px;
|
|
|
- height: 20px;
|
|
|
- width: 20px;
|
|
|
+ position: absolute;
|
|
|
+ right: 20px;
|
|
|
+ top: 20px;
|
|
|
+ height: 20px;
|
|
|
+ width: 20px;
|
|
|
}
|
|
|
#tabs-scroll-right{
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- top: 20px;
|
|
|
- height: 20px;
|
|
|
- width: 20px;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 20px;
|
|
|
+ height: 20px;
|
|
|
+ width: 20px;
|
|
|
}
|
|
|
#tabs-list div.tab, #tabs-scroll-right,#tabs-scroll-left{
|
|
|
- border-top-right-radius: 3px;
|
|
|
- border-top-left-radius: 3px;
|
|
|
+ border-top-right-radius: 3px;
|
|
|
+ border-top-left-radius: 3px;
|
|
|
border: 1px solid rgba(102, 153, 255, 0.3);
|
|
|
border-top-color: rgba(102, 153, 255, 0.6);
|
|
|
- border-width: 1px;
|
|
|
- border-bottom-width: 0px;
|
|
|
- padding: 0;
|
|
|
- margin: 0;
|
|
|
- background-color: white;
|
|
|
- cursor: pointer;
|
|
|
- clear: none;
|
|
|
+ border-width: 1px;
|
|
|
+ border-bottom-width: 0px;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ background-color: white;
|
|
|
+ cursor: pointer;
|
|
|
+ clear: none;
|
|
|
|
|
|
display: block;
|
|
|
-webkit-box-align: center;
|
|
|
@@ -325,6 +359,6 @@ html,body{
|
|
|
#tabs-scroll-left.disabled, #tabs-scroll-right.disabled{
|
|
|
background-color: #cae4ff;
|
|
|
border: solid 1px #6699ff;
|
|
|
- border-bottom-width: 0px;
|
|
|
+ border-bottom-width: 0px;
|
|
|
|
|
|
-}
|
|
|
+}
|
