flynx/PortableMag
1
0
Fork 0
mirror of https://github.com/flynx/PortableMag.git synced 2025-10-29 19:20:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

minor edits, added a pure html5 settings icon...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-03-06 23:19:15 +04:00
parent 06bb305a5b
commit b87a46bbdb
2 changed files with 126 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
gear.css Executable file
View File

@ -0,0 +1,92 @@
.gear {
position: relative;
width: 35px;
height: 35px;
overflow: hidden;
border: solid black 1px;
border-radius: 50%;
cursor: hand;
}
.gear > div {
position: relative;
width: 100%;
height: 100%;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-o-transform: rotate(15deg);
-ms-transform: rotate(15deg);
transform: rotate(15deg);
}
.gear .spoke {
position: absolute;
width: 20%;
height: 15%;
right: 5%;
top: 42.5%;
background: blue;
}
.gear .spoke div {
position: absolute;
width: 100%;
height: 100%;
right: 0;
top: 0;
background: red;
-webkit-transform-origin: -125% 50%;
-moz-transform-origin: -125% 50%;
-o-transform-origin: -125% 50%;
-ms-transform-origin: -125% 50%;
transform-origin: -125% 50%;
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-o-transform: rotate(40deg);
-ms-transform: rotate(40deg);
transform: rotate(40deg);
}
.gear .spoke div:after {
display: block;
content: "";
position: absolute;
width: 75%;
height: 120%;
right: 25%;
top: 0;
background: red;
-webkit-transform-origin: -125% 50%;
-moz-transform-origin: -125% 50%;
-o-transform-origin: -125% 50%;
-ms-transform-origin: -125% 50%;
transform-origin: -125% 50%;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}
.gear .spoke,
.gear .spoke div,
.gear .spoke div:after {
background: black;
}

34
index.html
View File

@ -7,6 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="magazine.css">
<link rel="stylesheet" href="gear.css">
<link rel="stylesheet" href="magazine-themes.css">
<link rel="stylesheet" href="magazine-custom.css">
<link rel="stylesheet" href="magazine-editor.css">
@ -61,6 +62,22 @@
}
*/
.gear {
display: none;
border-color: silver;
}
.editor .gear {
display: inline-block;
opacity: 0.4;
}
.editor .gear .spoke,
.editor .gear .spoke div,
.editor .gear .spoke div:after {
background: silver;
}
</style>
<script src="ext-lib/jquery.js"></script>
@ -230,6 +247,11 @@ $(document).ready(function(){
.on('pageChanged', updatePageNumberIndicator)
.on('magazineDataLoaded', loadMagazineChrome)
$('.settings.button')
.click(function(){
showInOverlay('<h1>Not Yey Implemented...</h1>')
})
//loadState()
@ -357,6 +379,16 @@ $(document).ready(function(){
</svg>
</a>
</div>
<div class="gear button settings">
<div>
<div class="spoke">
<div><div><div><div><div><div><div><div><div>
</div></div></div></div></div></div></div></div></div>
</div>
</div>
</div>
</div>
</div>
<!-- Top Toolbar (end) -->
@ -391,6 +423,8 @@ $(document).ready(function(){
<!-- Magazine Viewer -------------------------------------------------->
<div id="viewer" class="viewer">
<div class="magazine" name="PortableMag">
<div class="cover page">
<div class="content">