123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109 |
- html,body{
- width: 100%;
- height: 100%;
- padding: 0;
- margin: 0;
- overflow: hidden;
- }
- .fill{
- width: 100%;
- height: 100%;
- }
- .table{
- display: table;
- }
- .table-row{
- display: table-row;
- }
- .table-caption{
- display: table-caption;
- }
- .table-cell{
- display: table-cell;
- }
- .table-column{
- display: table-column;
- }
- .table-column-group{
- display: table-column-group;
- }
- .table-footer-group{
- display: table-footer-group;
- }
- .table-row-group{
- display: table-row-group;
- }
- .table-header-group{
- display: table-header-group;
- }
- #main{
- position: fixed;
- top: 0;
- left: 0;
- }
- #head{
- height: 20px;
- border-bottom-style: solid;
- transition: height 0.3s;
- }
- #head:hover{
- height: 50px;
- }
- #content{
- width: 100%;
- height: 100%;
- border-top-style: solid;
- border-bottom-style: solid;
- }
- #users{
- position: absolute;
- right: 0;
- bottom: 0;
- background-color: white;
- border-left-style: solid;
- width: 36px;
- height: 18px;
- margin-top: -1px;
- border-top-style: solid;
- transition: width 0.5s, height 0.5s;
- }
- #users:hover{
- width: 150px;
- height: 100%;
- z-index: 10;
- }
- #entry{
- width: 100%;
- border-top-style: solid;
- height: 18px;
- }
- #input{
- width: calc(100% - 74px);
- height: 16px;
- margin: 0;
- padding: 1px;
- border-style: none;
- background-color: grey;
- clear: none;
- position: absolute;
- bottom: 0;
- left: 0;
- }
- #send{
- clear: none;
- position: absolute;
- bottom: 0;
- right: 36px;
- width: 36px;
- border-style: none;
- border-left-style: solid;
- background-color: white;
- transition: background-color 0.2s;
- }
- #send:hover{
- background-color: grey;
- }
- #content,#head,#users,#entry,#input,#send{
- border-color: black;
- border-width: 1px;
- }
|