Skip to content
This repository has been archived by the owner on Apr 2, 2020. It is now read-only.

Commit

Permalink
optimized for low-resolution screens
Browse files Browse the repository at this point in the history
  • Loading branch information
@myfreeer
myfreeer authored Sep 15, 2016
1 parent 2af83b8 commit 4bed198
Showing 1 changed file with 369 additions and 2 deletions.
371 changes: 369 additions & 2 deletions options.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,374 @@
<script type="text/javascript" src="options.js"></script>
<script type="text/javascript" src="sweetalert.min.js"></script>
<style>
::-webkit-scrollbar{width:12px;height:12px;margin:0;}::-webkit-scrollbar-button{height:0;width:0;}::-webkit-scrollbar-button:horizontal{background-color:transparent;width:8px;}::-webkit-scrollbar-button:start:decrement,body::-webkit-scrollbar-button:end:increment{display:block}::-webkit-scrollbar-button:vertical:start:increment,body::-webkit-scrollbar-button:vertical:end:decrement{display:none}::-webkit-scrollbar-track{border-left:none;border-right:none;background-clip:padding-box;}::-webkit-scrollbar-track:hover{background-color:rgba(0,0,0,0.035);-webkit-box-shadow:inset 1px 1px 0 rgba(0,0,0,0.14),inset -1px -1px 0 rgba(0,0,0,0.07);}::-webkit-scrollbar-track:active{background-color:rgba(0,0,0,0.05);-webkit-box-shadow:inset 1px 0 0 rgba(0,0,0,0.14),inset -1px -1px 0 rgba(0,0,0,0.07);}::-webkit-scrollbar-thumb{min-height:28px;padding-top:100px;border-left:none;border-right:none;border-top:0 solid transparent;border-bottom:0 solid transparent;background-clip:padding-box;background-color:rgba(0,0,0,0.2);-webkit-box-shadow:inset 1px 1px 0 rgba(0,0,0,0.1),inset 0 -1px 0 rgba(0,0,0,0.07);}::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,0.4);-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.25);}::-webkit-scrollbar-thumb:active{-webkit-box-shadow:inset 1px 1px 3px rgba(0,0,0,0.35);background-color:rgba(0,0,0,0.5);}*{font-family:Helvetica,Arial,"Source Han Sans CN","Hiragino Sans GB","Microsoft Yahei","Microsoft Jhenghei",STHeiti,verdana,sans-serif;}html body{background-color:#f5f5f5;margin:0px;text-align:center;color:#444;}h1,h2,p{margin:5px;padding:5px;}.header{position:relative;background:-webkit-gradient(linear,0 0,0 bottom,from(#FFF),to(#EEE));text-indent:68px;margin:0px;padding:20px;text-shadow:#FFF 0 1px 2px;font-size:2em;font-weight:bold;}ul,li{list-style:none;padding:0px;}.category div{-webkit-transition:all .1s;}.card{margin:24px;background-color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:all .2s ease-in;}.card:hover{box-shadow:0 5px 10px rgba(0,0,0,.3);}#version{font-size:14px;margin-left:5px;}#main_form{position:absolute;top:0;border-radius:2px;opacity:1;width:400px;}#live_form{position:absolute;top:0;left:424px;border-radius:2px;opacity:1;width:400px;}#main_form .icon,#live_form .icon{position:absolute;left:0;top:0;height:100%}.options_form{margin:0;box-shadow:inset 0 4px 2px -3px rgba(0,0,0,.2);width:400px;float: left;}#ad_opacity{width:280px;height:10px;}input[type="color"]{height:15px;width:100px;margin:0 5px;}.category{padding:5px 0px 10px 0px;color:#666;font-weight:600;border-bottom:1px solid #ddd;}.category:nth-of-type(2n){background-color:#fbfbfb}.category:last-child{border-bottom:none;}.category p{font-size:20px;text-align:left;margin-left:20px;}.button{cursor:pointer;display:inline-block;font-size:12px;height:20px;line-height:20px;margin:4px 6px;padding:3px;font-weight:400;background-color:#fff;background-image:linear-gradient(to top,#f8f8f8,#fff);border:solid 1px #ddd;border-radius:2px;transition:.2s all;}.button:hover,.button.on{color:#fff;background-color:#0055cc;background-image:linear-gradient(to top,#009cd6,#00aae0);background-repeat:repeat-x;border:solid 1px #008bbc;border-radius:3px;box-shadow:rgba(255,255,255,0.2) 0px 1px 0px 0px inset,0 1px 1px #CCC;}.button:active{color:#fff;border:solid 1px #0082b0;background-image:linear-gradient(to top,#00a6dc,#00bee7);box-shadow:inset 0 2px 4px 0px rgba(0,0,0,0.15),0 1px 2px 0px rgba(0,0,0,0.05)}.button.on{cursor:default}.ad,.rel_search{width:100px}.btn,.support,.switch,.dynamic,.dlquality,.indexversion,.replace,.html5,.contextmenu,.doSign,.autoTreasure,.giftpackage,.danmu,.chatDisplay,.liveNotification,.watcher,.watchNotify{width:160px}.little_opt{font-size:18px!important;line-height:30px;height:30px;}#about{position:absolute;margin-left:872px;padding:20px;}#about h1{text-align:left;border-bottom:solid 1px #ddd;}#about p{color:#666;text-align:left;line-height:26px;text-indent:2em;padding:5px 10px;min-width:500px;}#about #update p{text-indent:0;font-size:14px;line-height:24px}#about p.highlight{color:#B71C1C;background-color:#FFECB3;border-radius:5px;text-indent:0;padding:1em 2em}#about p.highlight .title{font-size:24px;font-weight:500;line-height:36px}#about a{color:#666;margin:5px;}.alipay{width:200px;margin-left:2em;}.sweet-alert h2+p a{color:#444;font-weight:400;text-decoration:inherit}#support_qm{cursor:pointer}#up-list{margin:10px 25px;}#up-list li{margin:10px 0;text-align:left;}#up-list li span{margin-right:10px;height:27px;line-height:27px;width:172px;display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;vertical-align:bottom;cursor:default;}#up-list .delete.on{margin:0;height:27px;cursor:pointer;padding:0 20px;width:167px;}.chat-display .display-option .title,.watcher-options .watcher-option .title,.watcher-notify-options .watcher-notify-option .title{margin: 8px 0 8px 25px;float:left;width:74px;text-align:left;}.chat-display .display-option .option,.watcher-options .watcher-option .option,.watcher-notify-options .watcher-notify-option .option{display:inline-block;}.chat-display .display-option .option .button,.watcher-options .watcher-option .option .button,.watcher-notify-options .watcher-notify-option .option .button{width:111px;}.chat-display .display-option,.watcher-options .watcher-option,.watcher-notify-options .watcher-notify-option{overflow:hidden;}
::-webkit-scrollbar {
width: 12px;
height: 12px;
margin: 0;
}

::-webkit-scrollbar-button {
height: 0;
width: 0;
}

::-webkit-scrollbar-button:horizontal {
background-color: transparent;
width: 8px;
}

::-webkit-scrollbar-button:start:decrement,
body::-webkit-scrollbar-button:end:increment {
display: block
}

::-webkit-scrollbar-button:vertical:start:increment,
body::-webkit-scrollbar-button:vertical:end:decrement {
display: none
}

::-webkit-scrollbar-track {
border-left: none;
border-right: none;
background-clip: padding-box;
}

::-webkit-scrollbar-track:hover {
background-color: rgba(0, 0, 0, 0.035);
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.14), inset -1px -1px 0 rgba(0, 0, 0, 0.07);
}

::-webkit-scrollbar-track:active {
background-color: rgba(0, 0, 0, 0.05);
-webkit-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.14), inset -1px -1px 0 rgba(0, 0, 0, 0.07);
}

::-webkit-scrollbar-thumb {
min-height: 28px;
padding-top: 100px;
border-left: none;
border-right: none;
border-top: 0 solid transparent;
border-bottom: 0 solid transparent;
background-clip: padding-box;
background-color: rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.07);
}

::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
}

::-webkit-scrollbar-thumb:active {
-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35);
background-color: rgba(0, 0, 0, 0.5);
}

* {
font-family: Helvetica, Arial, "Source Han Sans CN", "Hiragino Sans GB", "Microsoft Yahei", "Microsoft Jhenghei", STHeiti, verdana, sans-serif;
}

html body {
background-color: #f5f5f5;
margin: 0px;
text-align: center;
color: #444;
}

h1,
h2,
p {
margin: 5px;
padding: 5px;
}

.header {
position: relative;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FFF), to(#EEE));
text-indent: 68px;
margin: 0px;
padding: 20px;
text-shadow: #FFF 0 1px 2px;
font-size: 2em;
font-weight: bold;
}

ul,
li {
list-style: none;
padding: 0px;
}

.category div {
-webkit-transition: all .1s;
}

.card {
margin: 24px;
background-color: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
transition: all .2s ease-in;
}

.card:hover {
box-shadow: 0 5px 10px rgba(0, 0, 0, .3);
}

#version {
font-size: 14px;
margin-left: 5px;
}

#main_form {
position: absolute;
top: 0;
border-radius: 2px;
opacity: 1;
width: 355px;
}

#live_form {
position: absolute;
top: 0;
left: 379px;
border-radius: 2px;
opacity: 1;
width: 355px;
}

#main_form .icon,
#live_form .icon {
position: absolute;
left: 0;
top: 0;
height: 100%
}

.options_form {
margin: 0;
box-shadow: inset 0 4px 2px -3px rgba(0, 0, 0, .2);
width: 355px;
float: left;
}

#ad_opacity {
width: 280px;
height: 10px;
}

input[type="color"] {
height: 15px;
width: 100px;
margin: 0 5px;
}

.category {
padding: 5px 0px 10px 0px;
color: #666;
font-weight: 600;
border-bottom: 1px solid #ddd;
}

.category:nth-of-type(2n) {
background-color: #fbfbfb
}

.category:last-child {
border-bottom: none;
}

.category p {
font-size: 20px;
text-align: left;
margin-left: 20px;
}

.button {
cursor: pointer;
display: inline-block;
font-size: 12px;
height: 20px;
line-height: 20px;
margin: 4px 6px;
padding: 3px;
font-weight: 400;
background-color: #fff;
background-image: linear-gradient(to top, #f8f8f8, #fff);
border: solid 1px #ddd;
border-radius: 2px;
transition: .2s all;
}

.button:hover,
.button.on {
color: #fff;
background-color: #0055cc;
background-image: linear-gradient(to top, #009cd6, #00aae0);
background-repeat: repeat-x;
border: solid 1px #008bbc;
border-radius: 3px;
box-shadow: rgba(255, 255, 255, 0.2) 0px 1px 0px 0px inset, 0 1px 1px #CCC;
}

.button:active {
color: #fff;
border: solid 1px #0082b0;
background-image: linear-gradient(to top, #00a6dc, #00bee7);
box-shadow: inset 0 2px 4px 0px rgba(0, 0, 0, 0.15), 0 1px 2px 0px rgba(0, 0, 0, 0.05)
}

.button.on {
cursor: default
}

.ad,
.rel_search {
width: 95px
}

.btn,
.support,
.switch,
.dynamic,
.dlquality,
.indexversion,
.replace,
.html5,
.contextmenu,
.doSign,
.autoTreasure,
.giftpackage,
.danmu,
.chatDisplay,
.liveNotification,
.watcher,
.watchNotify {
width: 140px
}

.little_opt {
font-size: 18px!important;
line-height: 30px;
height: 30px;
}

#about {
position: absolute;
margin-left: 782px;
padding: 20px;
}

#about h1 {
text-align: left;
border-bottom: solid 1px #ddd;
}

#about p {
color: #666;
text-align: left;
line-height: 26px;
text-indent: 2em;
padding: 5px 10px;
min-width: 460px;
}

#about #update p {
text-indent: 0;
font-size: 14px;
line-height: 24px
}

#about p.highlight {
color: #B71C1C;
background-color: #FFECB3;
border-radius: 5px;
text-indent: 0;
padding: 1em 2em
}

#about p.highlight .title {
font-size: 24px;
font-weight: 500;
line-height: 36px
}

#about a {
color: #666;
margin: 5px;
}

.alipay {
width: 200px;
margin-left: 2em;
}

.sweet-alert h2+p a {
color: #444;
font-weight: 400;
text-decoration: inherit
}

#support_qm {
cursor: pointer
}

#up-list {
margin: 10px 25px;
}

#up-list li {
margin: 10px 0;
text-align: left;
}

#up-list li span {
margin-right: 10px;
height: 27px;
line-height: 27px;
width: 162px;
display: inline-block;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
vertical-align: bottom;
cursor: default;
}

#up-list .delete.on {
margin: 0;
height: 27px;
cursor: pointer;
padding: 0 20px;
width: 167px;
}

.chat-display .display-option .title,
.watcher-options .watcher-option .title,
.watcher-notify-options .watcher-notify-option .title {
margin: 8px 0 8px 25px;
float: left;
width: 74px;
text-align: left;
}

.chat-display .display-option .option,
.watcher-options .watcher-option .option,
.watcher-notify-options .watcher-notify-option .option {
display: inline-block;
}

.chat-display .display-option .option .button,
.watcher-options .watcher-option .option .button,
.watcher-notify-options .watcher-notify-option .option .button {
width: 101px;
}

.chat-display .display-option,
.watcher-options .watcher-option,
.watcher-notify-options .watcher-notify-option {
overflow: hidden;
}
</style>
</head>

Expand Down Expand Up @@ -50,7 +417,7 @@
</li>
<li class="category">
<p>视频关联搜索设置</p>
<div class="button rel_search" option="without">不包含【括号】</div>
<div class="button rel_search" option="without">不包含括号</div>
<div class="button rel_search" option="with">包含【括号】</div>
<div class="button rel_search" option="off">关闭功能</div>
</li>
Expand Down

0 comments on commit 4bed198

Please sign in to comment.