*{ margin: 0 ; padding: 0; } /* body{ background: #E5EDE2; /* background:#eee; } /**/ /* .show{ position: relative; margin-left: 50%; margin-right: 50%; transform:translate(-50%,50%); color: #5555; cursor: pointer; } */ /* 屏幕展示区域样式 */ /* .e-screen { width: 380px; height: 135px; background-color: black; margin-bottom: 30px; margin: 0 auto; } */ textarea { max-width: 335px; min-width: 335px; max-height: 58px; min-height: 58px; margin-top: 10px; outline: none; margin: 8px 8px; font-size: 24px; } .bd textarea:focus { box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9; } .bd textarea:active { color: #fff; background-color: #84c6ff; } .font { width: 70px; /* margin: 2px 10px; */ margin: 0; padding: 8px; } .fontsize { width: 50px; margin: 0; padding: 8px; } .tx, .speed, .stay, .h-align, .v-align { left: 10px; position: relative; width: 70%; margin: 0; padding: 8px; } .my_fieldset { margin: 0 auto; width: 95%; border: solid 2px #84c6ff; } .my_fieldset legend { color: #84c6ff; } .my_fieldset label { position: relative; left: 5%; margin-right: 70px; font-size: 13px; } .select .img_type_css { position: relative; width: 200px; font-size: 13px; } .my_fieldset_div { margin: 0 auto; width: 95%; border: solid 2px #84c6ff; } .my_fieldset_div2{ position: relative; width: 80%; margin-left: 10%; } .my_fieldset_div legend { color: #84c6ff; } .my_fieldset_div2 label { font-size: 16px; } .my_fieldset_div2 input { /* position: relative; */ border: solid 2px #d4d4d4; border-radius: 6px; width: 40%; margin-bottom: 10px; line-height: 24px; font-size: 16px; } .my_fieldset_div2 div { width: 50%; float: left; } .select { margin: 0 auto; margin-left: 10px; margin-bottom: 6px; position: relative; padding: 0; box-shadow: 0 0 10px #d4d4d4; border-radius: 8px; } .select input{ width: 148px; border-radius: 6px; color: #555; background-color: #eee; font-size: 14px; padding: .5rem 2.25rem .5rem 1rem; /* justify-content: space-around; line-height: 1; border: 0; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; */ } .select, .animation_style { position: relative; display: inline-flex; /* background-color: #ededed; */ color: #555; font-size: 15px; } .select select { width: 105px; justify-content: space-around; padding: .5rem 2.25rem .5rem 1rem; line-height: 1; color: #555; background-color: #eee; border: 0; border-radius: 6px; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; font-size: 14px; } .select select:focus:-moz-focusring { color: transparent; text-shadow: 1.2 -1.2 1.8 #000; } /* Dropdown arrow */ .select:after { position: absolute; top: 50%; right: 0.25rem; content: ""; width: 0; height: 0; margin-top: -.15rem; pointer-events: none; border-top: .35rem solid; border-right: .35rem solid transparent; border-bottom: .35rem solid transparent; border-left: .35rem solid transparent; } /* Focus */ .select select:focus, .animation_style select:focus { box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9; } /* Active/open */ .select select:active, .animation_style select:active { color: #fff; background-color: #84c6ff; } .select select::-ms-expand, .animation_style select::-ms-expand { display: none; } /* Media query to target Firefox only */ /* IE9 hack to hide the arrow @media screen and (min-width:0\0) { .select select { z-index: 1; padding: .5rem 1.5rem .5rem 2rem; } .select:after { z-index: 5; } .select:before { position: absolute; top: 0; right: 1rem; bottom: 0; z-index: 2; content: ""; display: block; width: 1.5rem; background-color: #eee; } .select select:hover, .select select:focus, .select select:active { color: #555; background-color: #eee; } } */ /* Hide the arrow in IE10 and up */ .animation_style select { display: inline-block; width: 140px; margin-right: 10px; padding: .5rem 2.25rem .5rem 1rem; line-height: 1; color: #555; background-color: #eee; border: 0; border-radius: 6px; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; font-size: 14px; } .animation_style select:active { color: #fff; background-color: #84c6ff; outline: none; } .animation_style table { width: 340px; left: 9px; position: relative; border: solid 1px #d4d4d4; border-radius: 5px; box-shadow: 0 1px 10px #e8e8e8; font-size: 14px; } td { width: 160px; /* background-color: #eee; */ /* background: #fff; */ } /* td:nth-child(2) { width: 100px; font-size: 15px; /* color: #eee; */ /* background: #eee url(../img/coin.png) 15px 2px no-repeat; */ /* } */ .content_btn { width: 375px; display: flex; margin: 0 auto; } .content_btn button { width: 80px; height: 35px; line-height: 35px; border-radius: 8px; border: none; color: #fff; background-color: #67a9eb; margin: 35px 55px 55px; justify-content: space-around; cursor: pointer; box-shadow: 0 0 10px #e8e8e8; } .txt_bold { width: 60px; height: 30px; /* float: left; */ /* background: url(../img/coin2.png) 10px -20px no-repeat; */ } #txt_canvas { background: rgba(0, 0, 0, 0); } /************************************************节目管理弹出css****************************************************/ .my_contain { display: none; background-color: #FFFFFF; z-index: 11; width: 80%; height: 45%; position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: auto; } .my_contain2 { height: 57%; } .ground { top: -20%; display: none; background-color: #B3B3B3; position: absolute; width: 100%; height: 190%; z-index: 10; -moz-opacity: 0.8; opacity: .80; filter: alpha(opacity=80); /* 只支持IE6、7、8、9 */ } /*************************************************节目模式修改弹窗css************************************************/ .pro_mode_shade { top: 0%; display: none; background-color: #B3B3B3; position: fixed; width: 100%; height: 100%; z-index: 10; -moz-opacity: 0.8; opacity: .80; filter: alpha(opacity=80); /* 只支持IE6、7、8、9 */ } .pro_mode_window { display: none; background-color: #FFFFFF; z-index: 11; width: 80%; height: 700px; position: fixed; top: 0; right: 0; left: 0; bottom: 0; margin: auto; } .pro_mode_window h2 { margin-top: 15px; text-align: center; /* 位置居中 */ } .pro_mode_btn { float: left; margin-top: 15px; margin-bottom: 15px; margin-right: 5%; margin-left: 5%; border: none; outline: none; width: 40%; height: 130px; border-radius: 18px; color: #2b2828; font-size: 24px; background-color: #67a9eb; cursor: pointer; } .pro_mode_btn p { font-size: 18px; position: relative; bottom: -10px; text-align: center; width: 100%; } .pro_mode1_area { width: 90%; height: 90%; margin-top: 6.5px; margin-left: 5%; border-radius: 10px; background-color: #B3B3B3; text-align: center; font-size: 20px; } .pro_mode2_area { width: 90%; height: 42.5%; margin-top: 6.5px; margin-left: 5%; border-radius: 10px; background-color: #B3B3B3; text-align: center; font-size: 20px; } .pro_mode3_area { float: right; width: 42.5%; height: 90%; margin-top: 6.5px; margin-right: 5%; border-radius: 10px; background-color: #B3B3B3; text-align: center; font-size: 20px; } .pro_mode4_area { width: 90%; height: 26.66%; margin-top: 6.5px; margin-left: 5%; border-radius: 10px; background-color: #B3B3B3; text-align: center; font-size: 20px; } .pro_mode5_area { width: 90%; height: 18.75%; margin-top: 6.5px; margin-left: 5%; border-radius: 10px; background-color: #B3B3B3; text-align: center; font-size: 20px; } .pro_mode6_area { float: right; width: 42.5%; height: 42.5%; margin-top: 6.5px; margin-right: 5%; border-radius: 10px; background-color: #B3B3B3; text-align: center; font-size: 20px; } /*************************************************屏幕亮度弹窗css************************************************/ .scroll { margin: 100px; width: 5px; height: 320px; background: #ccc; position: relative; } .bar { width: 15px; height: 5px; background: #369; position: absolute; top: 0px; left: -5; cursor: pointer; }