2
0
mirror of https://github.com/fhem/fhem-mirror.git synced 2025-01-31 18:59:33 +00:00
fhem-mirror/fhem/www/pgm2/ios6touchpadstyle.css

835 lines
20 KiB
CSS
Raw Normal View History

@import url("ios6dashboard.css");
@import url("ios6Common.css");
/* iOS 6 Theme for FHEM */
/* by Sandra Ohmayer */
/* http://www.animeschatten.net */
body {
width:100%
}
/*set standard for view without js*/
#content,#right {
width:763px;
/* Firefox */
width:-moz-calc(100% - 261px);
/* WebKit */
width:-webkit-calc(100% - 261px);
/* Opera */
width:-o-calc(100% - 261px);
/* Standard */
width:calc(100% - 261px)
}
#content,#menu,#right {
/*old*/
height:704px;
/* Firefox */
height:-moz-calc(100vh - 44px);
/* WebKit */
height:-webkit-calc(100vh - 44px);
/* Opera */
height:-o-calc(100vh - 44px);
/* Standard */
height:calc(100vh - 44px)
}
#hdr input {
width:80%
}
/*hideMenu toggle*/
.hideMenu #content,.hideMenu #right {
width:964px;
/* Firefox */
width:-moz-calc(100% - 60px);
/* WebKit */
width:-webkit-calc(100% - 60px);
/* Opera */
width:-o-calc(100% - 60px);
/* Standard */
width:calc(100% - 60px)
}
.SVGplot {
text-align:center
}
.SVGplot embed {
-o-transition:scale(-o-calc(100vw - 260px),100px);
-ms-transition:scale(c-ms-alc(100vw - 260px),100px);
-moz-transition:scale(-moz-calc(100vw - 260px),100px);
-webkit-transition:scale(-webkit-calc(100vw - 260px),100px);
transition:scale(calc(100vw - 260px),100px)
}
/*iPhone Skalierung*/
/* iPhone < 5(portrait) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : portrait) {
body {
width:320px
}
#content,#right {
padding:0 10px!important
}
}
/* iPhone < 5(landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : landscape) {
body {
width:480px
}
}
/* iPhone 5(portrait) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
body {
width:320px
}
#content,#right {
padding:0 10px!important
}
}
/* iPhone 5(landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
body {
width:568px
}
}
/* iPhone 6(portrait) ----------- */
@media only screen
and (min-device-width : 375px) and (max-device-width : 667px)
and (orientation : portrait) {
body {
width:375px
}
#content,#right {
padding:0 10px!important
}
}
/* iPhone 6(landscape) ----------- */
@media only screen
and (min-device-width : 375px) and (max-device-width : 667px)
and (orientation : landscape) {
body {
width:667px
}
}
/* iPhone 6+(portrait) ----------- */
@media only screen
and (min-device-width : 414px) and (max-device-width : 736px)
and (orientation : portrait) {
body {
width:414px
}
}
/* iPhone 6+(landscape) ----------- */
@media only screen
and (min-device-width : 414px) and (max-device-width : 736px)
and (orientation : landscape) {
body {
width:736px
}
}
/*iPad Skalierung*/
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
body {
width:1024px
}
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
body {
width:768px
}
}
/* Android Phone Devices */
@media only screen
and (orientation : portrait) {
.isAndroidPhone {
width:360px
}
.isAndroidTablet {
}
}
@media only screen
and (orientation : landscape) {
.isAndroidPhone {
width:640px
}
.isAndroidTablet {
}
}
.isMobile {
background-color:#e0e3e8;
background:#e0e3e8;
}
.hideMenu #menu {
display:none
}
html,body {
margin:0;
padding:0;
font:normal 14px Helvetica,Sans-serif;
text-decoration:none;
color:#385487;
font-weight:400
}
body {
background-color:#000;
background:#000
}
a {
color:#000;
font-weight:700;
text-decoration:none
}
a:hover {
cursor:pointer;
color:#777
}
img {
border-style:none
}
div.dist {
padding-top:.3em
}
button.dist {
margin:10px;
background:transparent;
border:0;
cursor:pointer
}
textarea,select,input {
background:#f7f7f7;
border-radius:25px;
border:1px solid #d4d7db;
border-bottom-color:#c6c8cd;
background-color:#f7f7f7;
padding-left:0.5em;
margin:7px;
outline:none;
-moz-box-shadow:0 1px #f7f7f7,inset 0 1px 1px #b6b8bd,inset 0 -2px 2px #fff;
-webkit-box-shadow:0 1px #f7f7f7,inset 0 1px 1px #b6b8bd,inset 0 -2px 2px #fff;
box-shadow:0 1px #f7f7f7,inset 0 1px 1px #b6b8bd,inset 0 -2px 2px #fff
}
textarea,input[type="text"] {
background-color:#fff;
-webkit-appearance:none;
/*width:90%*/
}
input[type="checkbox"] {
border-radius:2px
}
select,input[type="submit"],input[type="reset"],input[type="button"] {
/*width:35%;*/
min-width:90px;
font:normal 14px Helvetica,Sans-serif;
height:25px
}
input[type="text"] {
height:25px
}
tr.column td {
padding:0;
vertical-align:top
}
/* Documentation */
h2,h3,h4 {
line-height:1.3;
margin-top:1.5em
}
div.dist {
padding-top:.3em
}
button.dist {
margin:10px;
background:transparent;
border:0;
cursor:pointer
}
div.block {
border:1px solid gray;
background:#F8F8E0;
padding:.7em
}
pre {
white-space:pre-wrap
}
svg {
height:28px;
width:28px;
vertical-align:middle;
margin-right:5px
}
svg:not([fill]) {
fill:#7b7b7b;
}
svg.on,svg.FS20_on {
fill:orange
}
#logo {
position:absolute;
top:5px;
left:5px;
width:28px;
height:28px;
z-index:99;
background-image:url(../images/fhemSVG/system_fhem.svg);
background:url(../images/fhemSVG/system_fhem.svg),-moz-linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%);
/* FF3.6+ */
background:url(../images/fhemSVG/system_fhem.svg),-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(255,255,255,0.7)),color-stop(100%,rgba(255,255,255,0.2)));
/* Chrome,Safari4+ */
background:url(../images/fhemSVG/system_fhem.svg),-webkit-linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%);
/* Chrome10+,Safari5.1+ */
background:url(../images/fhemSVG/system_fhem.svg),-o-linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%);
/* Opera 11.10+ */
background:url(../images/fhemSVG/system_fhem.svg),-ms-linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%);
/* IE10+ */
background:url(../images/fhemSVG/system_fhem.svg),linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%);
/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3ffffff',endColorstr='#33ffffff',GradientType=0);
/* IE6-9 */
background-size:24px 24px,28px 8px;
background-position:2px 2px,0 0;
background-repeat:no-repeat;
border-radius:5px;
border:2px solid #000;
background-color:#bbb
}
table.room svg {
fill:#FFF;
padding:5px;
width:18px;
height:18px;
box-shadow:inset 0 1px 1px rgba(255,255,255,0.7);
background:-moz-linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%);
/* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(255,255,255,0.7)),color-stop(100%,rgba(255,255,255,0.2)));
/* Chrome,Safari4+ */
background:-webkit-linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%);
/* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%);
/* Opera 11.10+ */
background:-ms-linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%);
/* IE10+ */
background:linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%);
/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3ffffff',endColorstr='#33ffffff',GradientType=0);
/* IE6-9 */
background-size:28px 12px;
background-repeat:no-repeat;
border-radius:5px;
border:1px solid #666;
background-color:#4b6dab
}
#saveCheck {
position:absolute;
top:13px;
right:7px;
padding-right:10px;
padding-left:10px;
padding-top:2px;
padding-bottom:2px;
background:#7887A4;
border-radius:20px;
color:#F4FDFF
}
table.room .changedicon svg {
background:#02a202;
/* Old browsers */
background:-webkit-linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%),-webkit-repeating-linear-gradient(135deg,#02a202 0px,#00b900 2px,#02a202 3px);
/* Chrome10+,Safari5.1+ */
background:-moz-linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%),-moz-repeating-linear-gradient(-45deg,rgba(2,162,2,1) 0px,rgba(0,185,0,1) 2px,rgba(2,162,2,1) 3px);
/* FF3.6+ */
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(255,255,255,0.7)),color-stop(100%,rgba(255,255,255,0.2))),-webkit-gradient(linear,left top,right bottom,color-stop(0px,rgba(2,162,2,1)),color-stop(2px,rgba(0,185,0,1)),color-stop(3px,rgba(2,162,2,1)));
/* Chrome,Safari4+ */
background:-webkit-linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%),-webkit-repeating-linear-gradient(-45deg,rgba(2,162,2,1) 0px,rgba(0,185,0,1) 2px,rgba(2,162,2,1) 3px);
/* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%),-o-repeating-linear-gradient(-45deg,rgba(2,162,2,1) 0px,rgba(0,185,0,1) 2px,rgba(2,162,2,1) 3px);
/* Opera 11.10+ */
background:-ms-linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%),-ms-linear-gradient(-45deg,rgba(2,162,2,1) 0px,rgba(0,185,0,1) 2px,rgba(2,162,2,1) 3px);
/* IE10+ */
background:linear-gradient(top,rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%),repeating-linear-gradient(135deg,rgba(2,162,2,1) 0px,rgba(0,185,0,1) 2px,rgba(2,162,2,1) 3px);
/* W3C */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3ffffff',endColorstr='#33ffffff',GradientType=0);
/* IE6-9 */
background-size:28px 12px,28px 28px;
background-repeat:no-repeat,repeat;
fill:#F4F4F4
}
table.room tr.sel a svg {
border-color:#333;
background-color:#111
}
#hdr {
float:right;
z-index:98;
position:relative;
top:0;
left:0;
width:100%;
height:44px;
background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#6C6C6C),color-stop(0.02,#505050),color-stop(0.96,#1B1B1C),color-stop(0.98,#232323),color-stop(1,#000));
background-image:-o-linear-gradient(bottom,#6C6C6C 0%,#505050 2%,#1B1B1C 96%,#232323 98%,#000 100%);
background-image:-moz-linear-gradient(bottom,#6C6C6C 0%,#505050 2%,#1B1B1C 96%,#232323 98%,#000 100%);
background-image:-webkit-linear-gradient(top,#6C6C6C 0%,#505050 2%,#1B1B1C 96%,#232323 98%,#000 100%);
background-image:-ms-linear-gradient(bottom,#6C6C6C 0%,#505050 2%,#1B1B1C 96%,#232323 98%,#000 100%);
background-image:linear-gradient(to bottom,#6C6C6C 0%,#505050 2%,#1B1B1C 96%,#232323 98%,#000 100%);
-moz-box-shadow:0 1px 4px #b4b6ba;
-webkit-box-shadow:0 1px 4px #b4b6ba;
box-shadow:0 1px 4px #b4b6ba;
border-radius:5px 5px 0 0
}
#hdr input {
margin:0;
position:relative;
float:right;
right:7px;
height:25px;
border-radius:2em;
background-color:#2e2e2e;
border:none;
color:#b3b3b3;
padding-left:1.5em;
outline:none;
-moz-box-shadow:0 -1px #171717,0 1px #2e2d2d,inset 0 -2px 2px #494949,inset 0 1px #272727;
-webkit-box-shadow:0 -1px #171717,0 1px #2e2d2d,inset 0 -2px 2px #494949,inset 0 1px #272727;
box-shadow:0 -1px #171717,0 1px #2e2d2d,inset 0 -2px 2px #494949,inset 0 1px #272727
}
#hdr table {
width:100%;
margin:0;
padding:5px
}
#menu {
position:absolute;
top:44px;
overflow:auto;
-webkit-overflow-scrolling:touch;
float:left;
width:200px;
background-color:#d7dadf
}
#menu table {
width:100%;
border-spacing:0;
padding:0
}
#content,#right {
background-color:#e0e3e8;
background:#e0e3e8;
overflow:auto;
-webkit-overflow-scrolling:touch;
border-left:1px solid #000;
float:right;
padding:0 30px
}
#content table {
width:100%!important
}
#content > form > .CodeMirror {
height: initial !important;
}
#menuScrollArea {
float:left
}
#right {
margin-top:44px
}
#console {
font:11px "Courier New",Courier,monospace
}
#errmsg {
padding:6px;
color:#fff;
font-weight:700;
position:absolute;
top:5px;
left:225px;
z-index:99;
text-shadow:0 1px #000
}
.devType,.devType a,.makeTable,.makeTable a {
font-weight:700;
color:#4c566c;
font-size:16px;
text-shadow:0 1px #FFF;
padding:20px 0 0
}
.devType table,.makeTable table {
font-weight:400;
color:#385487;
font-size:14px;
padding:0
}
.devType table a,.makeTable table a {
font-weight:700;
color:#000;
font-size:14px;
padding:0
}
.devType table a:hover,.makeTable table a:hover {
color:#777
}
.wide {
width:100%
}
.block {
margin-top:5px;
position:relative;
font-size:14px
}
table.block input,table.block select {
margin:5px
}
table.block {
padding:0;
border-spacing:0;
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
border:1px solid #b6b8bd;
border-bottom-color:#b4b7bb;
-moz-box-shadow:0 1px #fefefe,inset 0 1px #d7d7d7;
-webkit-box-shadow:0 1px #fefefe,inset 0 1px #d7d7d7;
box-shadow:0 1px #fefefe,inset 0 1px #d7d7d7;
background:#f7f7f7
}
table.block td {
text-align:left;
vertical-align:middle
}
.dval {
word-break: break-all;
}
table.block td {
border-top:1px solid #fdfdfd;
border-bottom:1px solid #cbcbcb
}
table.block tr:first-child td {
border-top:none
}
table.block tr:last-child td {
border-bottom:none
}
.block td:first-child {
padding-left:10px;
font-weight:700
}
.roomoverview table.block td:first-child {
min-width:50px
}
.roomoverview table.block td:nth-child(2) {
min-width:30px
}
table.room {
margin-bottom:10px;
border-spacing:0;
padding:0;
width:100%;
-moz-box-shadow:0 1px 2px #ebedee,0 -1px #b7b9bb;
-webkit-box-shadow:0 1px 2px #ebedee,0 -1px #b7b9bb;
box-shadow:0 1px 2px #ebedee,0 -1px #b7b9bb
}
table.block tr {
height:44px
}
table.room tr {
background-image:-webkit-gradient(linear,right top,right bottom,color-stop(0,#F8F9FA),color-stop(0.02,#EBEDEF),color-stop(0.04,#E4E6EA),color-stop(0.96,#E2E5E8),color-stop(0.98,#D4D7D9),color-stop(1,#B7B9BB));
background-image:-o-linear-gradient(bottom,#F8F9FA 0%,#EBEDEF 2%,#E4E6EA 4%,#E2E5E8 96%,#D4D7D9 98%,#B7B9BB 100%);
background-image:-moz-linear-gradient(bottom,#F8F9FA 0%,#EBEDEF 2%,#E4E6EA 4%,#E2E5E8 96%,#D4D7D9 98%,#B7B9BB 100%);
background-image:-webkit-linear-gradient(top,#F8F9FA 0%,#EBEDEF 2%,#E4E6EA 4%,#E2E5E8 96%,#D4D7D9 98%,#B7B9BB 100%);
background-image:-ms-linear-gradient(bottom,#F8F9FA 0%,#EBEDEF 2%,#E4E6EA 4%,#E2E5E8 96%,#D4D7D9 98%,#B7B9BB 100%);
background-image:linear-gradient(to bottom,#F8F9FA 0%,#EBEDEF 2%,#E4E6EA 4%,#E2E5E8 96%,#D4D7D9 98%,#B7B9BB 100%);
height:44px
}
table.room a,table.block a {
vertical-align:middle
}
table.room a {
padding-left:5px;
display:block
}
table.block tr.sel,table.room tr.sel {
color:#FFF;
text-shadow:0 -1px #000;
background-image:-webkit-gradient(linear,right top,right bottom,color-stop(0,#C0E2FC),color-stop(0.02,#44AAF8),color-stop(0.04,#0589F5),color-stop(0.96,#015DE6),color-stop(0.98,#0157D8),color-stop(1,#014BBB),color-stop(1,#1B72FF));
background-image:-o-linear-gradient(bottom,#C0E2FC 0%,#44AAF8 2%,#0589F5 4%,#015DE6 96%,#0157D8 98%,#014BBB 100%,#1B72FF 100%);
background-image:-moz-linear-gradient(bottom,#C0E2FC 0%,#44AAF8 2%,#0589F5 4%,#015DE6 96%,#0157D8 98%,#014BBB 100%,#1B72FF 100%);
background-image:-webkit-linear-gradient(top,#C0E2FC 0%,#44AAF8 2%,#0589F5 4%,#015DE6 96%,#0157D8 98%,#014BBB 100%,#1B72FF 100%);
background-image:-ms-linear-gradient(bottom,#C0E2FC 0%,#44AAF8 2%,#0589F5 4%,#015DE6 96%,#0157D8 98%,#014BBB 100%,#1B72FF 100%);
background-image:linear-gradient(to bottom,#C0E2FC 0%,#44AAF8 2%,#0589F5 4%,#015DE6 96%,#0157D8 98%,#014BBB 100%,#1B72FF 100%)
}
table.room tr.sel a {
color:#FFF;
text-shadow:0 -1px #000
}
table.room tr.sel a:hover {
text-shadow:0 -1px #333
}
table.room a:hover svg {
background-color:#777
}
table.room tr.sel a:hover svg {
background-color:#333
}
.dname {
}
.FileLog td:first-child {
font-weight:400;
width:180px
}
.FileLog td:nth-child(2) {
width:100px
}
/* Widgets */
.makeTable {
width:100%;
display:block;
float:left;
clear:left
}
.textField_widget {
display:block!important
}
.makeSelect {
margin-top:20px;
width:100%;
display:block;
float:left;
clear:left;
padding:0;
border-spacing:0;
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
border:1px solid #b6b8bd;
border-bottom-color:#b4b7bb;
-moz-box-shadow:0 1px #fefefe,inset 0 1px #d7d7d7;
-webkit-box-shadow:0 1px #fefefe,inset 0 1px #d7d7d7;
box-shadow:0 1px #fefefe,inset 0 1px #d7d7d7;
background:#f7f7f7
}
.slider {
margin-top:10px;
display:inline-block;
-webkit-box-sizing:border-box;
-moz-box-sizing:padding-box;
box-sizing:padding-box;
height:9px;
width:120px;
padding:1px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
background-image:-webkit-gradient(linear,left top,left bottom,from(#0a3a86),color-stop(.5,#4c8de7),color-stop(.95,#6babf5),to(#0a3a86)),-webkit-gradient(linear,left top,left bottom,from(#919191),color-stop(.5,#f0f0f0),color-stop(.5,#fff),color-stop(.95,#fff),to(#919191));
background-image:-moz-linear-gradient(top,#0a3a86,#4c8de7 50%,#6babf5 95%,#0a3a86),-moz-linear-gradient(top,#919191,#f0f0f0 50%,#fff 50%,#fff 95%,#919191);
background-repeat:no-repeat,repeat-x
}
.get,.set,.attr {
float:left;
margin-bottom:10px;
margin-top:10px
}
.handle {
position:relative;
-webkit-box-shadow:inset 0 1px #e8e8e8;
-moz-box-shadow:inset 0 1px #e8e8e8;
box-shadow:inset 0 1px #e8e8e8;
border:1px solid #9d9d9d;
color:#666;
height:15px;
width:18px;
left:0;
top:-6px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
padding:3px 0 0;
text-align:center;
font-size:10px;
-webkit-tap-highlight-color:transparent;
background-image:-webkit-gradient(linear,right top,right bottom,color-stop(0,#A6A6A6),color-stop(1,#FCFCFC));
background-image:-o-linear-gradient(bottom,#A6A6A6 0%,#FCFCFC 100%);
background-image:-moz-linear-gradient(bottom,#A6A6A6 0%,#FCFCFC 100%);
background-image:-webkit-linear-gradient(top,#A6A6A6 0%,#FCFCFC 100%);
background-image:-ms-linear-gradient(bottom,#A6A6A6 0%,#FCFCFC 100%);
background-image:linear-gradient(to bottom,#A6A6A6 0%,#FCFCFC 100%)
}
.handle:hover,.handle.hover {
color:#FCFCFC;
background-image:-webkit-gradient(linear,right top,right bottom,color-stop(0,#666),color-stop(1,#CBCBCB));
background-image:-o-linear-gradient(bottom,#666 0%,#CBCBCB 100%);
background-image:-moz-linear-gradient(bottom,#666 0%,#CBCBCB 100%);
background-image:-webkit-linear-gradient(top,#666 0%,#CBCBCB 100%);
background-image:-ms-linear-gradient(bottom,#666 0%,#CBCBCB 100%);
background-image:linear-gradient(to bottom,#666 0%,#CBCBCB 100%)
}
.sysmon table {
border-spacing:0;
padding:0;
font-weight:400
}
/* next lines are for remotecontrol */
.rc_body {
border-style:solid;
border-color:gray;
border-width:2px;
padding:5px;
background:#C8C8B0;
font-size:6px
}
.rc_button {
padding:5px 7px
}
.rc_button img {
border-style:solid;
border-width:1px;
border-color:transparent
}
.rc_button img:active {
border-color:gray
}
.colorpicker {
border-color:#4c566c
}
::-webkit-scrollbar {
width:7px
}
::-webkit-scrollbar-button {
width:7px;
height:1px
}
::-webkit-scrollbar-track {
background:#D7DADF;
border:thin solid #C1C4C6;
box-shadow:0 0 3px #dfdfdf inset;
border-radius:10px
}
::-webkit-scrollbar-thumb {
background:#7887A4;
border:thin solid gray;
border-radius:10px
}
::-webkit-scrollbar-thumb:hover {
background:#777
}