archive-gh-me/simpread
1
0
Fork 0
mirror of https://github.com/Kenshin/simpread.git synced 2026-02-01 15:41:29 +00:00
Code Issues Projects Releases Wiki Activity

Add custom tag with opacity by focus.jsx.

Browse Source
This commit is contained in:
Kenshin 2017-01-04 10:45:36 +08:00
parent 578645f1e8
commit d8120c18b9
2 changed files with 58 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
src/assets/css/simpread.css
View File

@ -275,14 +275,59 @@ sr-opt-theme[type="active"] {
border: 1px solid #000;
}
.ks-simpread-option-focus-opacity,
.ks-simpread-option-focus-shortcuts,
.ks-simpread-option-focus-exclude,
.ks-simpread-option-focus-include
{
sr-opt-item {
width: 100%;
}
sr-opt-item[type="opacity"] {
padding-top: 6px;
}
sr-opt-item[type="opacity"] input[type=range] {
-webkit-appearance: none;
width: 100%;
margin: 6px 0;
}
sr-opt-item[type="opacity"] input[type=range]:focus {
outline: none;
}
sr-opt-item[type="opacity"] input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 1px;
cursor: pointer;
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.5), 0px 0px 0px rgba(13, 13, 13, 0.5);
background: #9e9e9e;
border-radius: 1.3px;
transition: all 0.3s;
}
sr-opt-item[type="opacity"] input[type=range]::-webkit-slider-runnable-track:hover {
background: #00897B;
}
sr-opt-item[type="opacity"] input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0px 0px 1px rgba(13, 13, 13, 0);
border: 1px solid rgba(0, 0, 0, 0);
height: 15px;
width: 15px;
border-radius: 50px;
background: #b2dfdb;
cursor: pointer;
-webkit-appearance: none;
margin-top: -7px;
transition: all 0.3s;
}
sr-opt-item[type="opacity"] input[type=range]:focus::-webkit-slider-thumb {
background: #00897B;
}
sr-opt-item[type="opacity"] input[type=range]:focus::-webkit-slider-runnable-track {
background: #00897B;
}
.ks-simpread-option-focus-shortcuts input[type="text"] {
text-transform: uppercase;
}
@ -310,56 +355,6 @@ sr-opt-theme[type="active"] {
box-shadow: 0 1px 0 0 #00897B;
}
.ks-simpread-option-focus-opacity {
padding-top: 6px;
}
.ks-simpread-option-focus-opacity input[type=range] {
-webkit-appearance: none;
width: 100%;
margin: 6px 0;
}
.ks-simpread-option-focus-opacity input[type=range]:focus {
outline: none;
}
.ks-simpread-option-focus-opacity input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 1px;
cursor: pointer;
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.5), 0px 0px 0px rgba(13, 13, 13, 0.5);
background: #9e9e9e;
border-radius: 1.3px;
transition: all 0.3s;
}
.ks-simpread-option-focus-opacity input[type=range]::-webkit-slider-runnable-track:hover {
background: #00897B;
}
.ks-simpread-option-focus-opacity input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0px 0px 1px rgba(13, 13, 13, 0);
border: 1px solid rgba(0, 0, 0, 0);
height: 15px;
width: 15px;
border-radius: 50px;
background: #b2dfdb;
cursor: pointer;
-webkit-appearance: none;
margin-top: -7px;
transition: all 0.3s;
}
.ks-simpread-option-focus-opacity input[type=range]:focus::-webkit-slider-thumb {
background: #00897B;
}
.ks-simpread-option-focus-opacity input[type=range]:focus::-webkit-slider-runnable-track {
background: #00897B;
}
.ks-simpread-option-focus-exclude textarea {
display: block;
width: 100%;

16
src/option/focus.jsx
View File

@ -108,30 +108,30 @@ export default class FocusOpt extends React.Component {
</sr-opt-gp>
<sr-opt-gp>
<sr-opt-label>透明度：</sr-opt-label>
<div className="ks-simpread-option-focus-opacity">
<sr-opt-item type="opacity">
<input ref="opacity"
type="range" min="50" max="95" step="5"
onChange={ ()=> this.changeOpacity() }
/>
</div>
</sr-opt-item>
</sr-opt-gp>
<sr-opt-gp>
<sr-opt-label>快捷键：</sr-opt-label>
<div className="ks-simpread-option-focus-shortcuts">
<sr-opt-item type="ks-simpread-option-focus-shortcuts">
<input ref="shortcuts" type="text" onKeyDown={ ()=> this.changeShortcuts() } onChange={ ()=>this.changeShortcuts() } />
</div>
</sr-opt-item>
</sr-opt-gp>
<sr-opt-gp>
<sr-opt-label>隐藏列表：</sr-opt-label>
<div className="ks-simpread-option-focus-exclude">
<sr-opt-item class="ks-simpread-option-focus-exclude">
<textarea ref="exclude" placeholder="每行一个，例如：<div class='xxxx'></div>" onChange={ ()=> this.changExclude() }></textarea>
</div>
</sr-opt-item>
</sr-opt-gp>
<sr-opt-gp>
<sr-opt-label>高亮区域：</sr-opt-label>
<div className="ks-simpread-option-focus-include">
<sr-opt-item class="ks-simpread-option-focus-include">
<input ref="include" type="text" placeholder="默认为空，自动选择高亮区域。" onChange={ ()=>this.changeInclude() } />
</div>
</sr-opt-item>
</sr-opt-gp>
</sr-opt-focus>
)