<?xml version="1.0" encoding="UTF-16"?>
<html><head>
- <title>Storage</title>
+ <title localize="STORAGE"></title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"/>
<link rel="stylesheet" type="text/css" href="menes/style.css"/>
<script type="text/javascript" src="menes/menes.js"></script>
<script type="text/javascript" src="storage.js"></script>
+ <script type="text/javascript" src="localize.js"></script>
<base target="_blank"/>
<style>
}
a.giant-button {
+ background-color: rgba(0, 0, 0, 0.15);
+ -webkit-border-radius: 10px;
color: #193250;
display: block;
margin: 8px 10px;
+ position: relative;
text-decoration: none;
- }
-
- a.giant-button > div.contents {
- position: absolute;
- text-align: left;
width: 300px;
- -webkit-background-size: 75px auto;
- z-index: 2;
}
- a.giant-button > div.contents > piechart {
+ a.giant-button > piechart {
float: left;
margin: 10px;
vertical-align: middle;
}
- a.giant-button > div.contents > label {
+ a.giant-button > label {
display: block;
float: left;
font-size: 25px;
width: 155px;
}
- a.giant-button > div.contents > div.text {
+ a.giant-button > div.text {
display: block;
float: left;
font-size: 14px;
width: 50%;
}
- a.giant-button > div.contents > div.legend {
+ a.giant-button > div.legend {
float: left;
font-size: 14px;
left: 15px;
width: 290px;
}
- a.giant-button > div.background {
- background-color: #000000;
- opacity: 0.15;
- -webkit-border-radius: 10px;
- }
-
div.key {
margin-bottom: 4px;
}
}
piechart > div {
+ -webkit-border-radius: 50px;
height: 100px;
- padding: 1px;
+ overflow: hidden;
position: relative;
- width: 103px;
+ width: 100px;
}
- piechart > div > div.lslice,
- piechart > div > div.rslice {
- background-color: #4d4d70;
+ piechart > div > div:first-child {
height: 100px;
+ overflow: hidden;
position: absolute;
+ z-index: 102;
+ width: 51px;
}
- piechart > div > div.lslice {
- -webkit-border-bottom-left-radius: 50px;
- -webkit-border-top-left-radius: 50px;
- width: 50px;
- z-index: 2;
+ piechart > div > div:last-child {
+ height: 100px;
+ overflow: hidden;
+ position: absolute;
+ width: 100px;
+ z-index: 0;
}
- piechart > div > div.rslice {
- -webkit-border-bottom-right-radius: 50px;
- -webkit-border-top-right-radius: 50px;
- left: 49px;
- width: 53px;
- z-index: 0;
+ piechart > div div.lslice,
+ piechart > div div.rslice,
+ piechart > div div.tslice,
+ piechart > div div.bslice {
+ background-color: #4d4d70;
}
- piechart > div > div.xslice {
+ piechart > div div.lslice,
+ piechart > div div.rslice,
+ piechart > div div.tslice,
+ piechart > div div.bslice,
+ piechart > div div.xslice {
+ /* XXX: technically, these aren't needed */
-webkit-border-bottom-left-radius: 50px;
-webkit-border-top-left-radius: 50px;
height: 100px;
- left: 2px;
position: absolute;
- -webkit-transform-origin: 50px 50%;
+ -webkit-transform-origin: 100% 50%;
width: 50px;
}
- piechart > div > div.tslice {
+ piechart > div div.lslice {
+ z-index: 100;
+ }
+
+ piechart > div div.rslice,
+ piechart > div div.tslice,
+ piechart > div div.bslice {
+ z-index: 0;
+ }
+
+ piechart > div div.rslice {
+ -webkit-transform: rotate(180deg);
+ }
+
+ piechart > div div.tslice {
+ -webkit-transform: rotate(90deg);
+ }
+
+ piechart > div div.bslice {
+ -webkit-transform: rotate(270deg);
+ }
+
+ piechart > div > div.nslice {
position: absolute;
text-align: center;
top: 42px;
width: 100px;
- z-index: 3;
+ z-index: 103;
}
- piechart > div > div.tslice > div {
+ piechart > div > div.nslice > div {
background-color: rgba(255, 255, 255, 0.7);
-webkit-border-radius: 7px;
display: inline;
<dialog>
<panel>
-<a class="giant-button">
- <div class="contents">
- <piechart id="system-chart"><div>
+<a class="giant-button" style="height: 149px">
+ <piechart><div>
+ <div id="system-left"></div>
+ <div id="system-right">
<div class="lslice"></div>
<div class="rslice"></div>
- <div class="tslice"><div id="system-size"></div></div>
- <div class="xslice" id="system-slice" style="
- background-color: #7d7da0; -webkit-transform: rotate(10deg); z-index: 1;
- "></div>
- </div></piechart>
-
- <label>System</label>
- <div class="text">A small partition used to store iPhone OS. Cydia adds a few important programs and libraries.</div>
+ <div class="tslice"></div>
+ <div class="bslice"></div>
+ </div>
+ <div class="nslice"><div id="system-size"></div></div>
+ </div></piechart>
- <div class="legend" id="system-legend"></div>
- </div>
+ <label>System</label>
+ <div class="text">A small partition used to store iPhone OS. Cydia adds a few important programs and libraries.</div>
- <div class="background" style="height: 149px"></div>
+ <div class="legend" id="system-legend"></div>
</a>
-<a class="giant-button">
- <div class="contents">
- <piechart id="private-chart"><div>
+<a class="giant-button" style="height: 189px">
+ <piechart><div>
+ <div id="private-left"></div>
+ <div id="private-right">
<div class="lslice"></div>
<div class="rslice"></div>
- <div class="tslice"><div id="private-size"></div></div>
- <div class="xslice" id="private-slice" style="
- background-color: #9090e0; -webkit-transform: rotate(150deg); z-index: 1;
- "></div>
- <div class="xslice" id="private-slice" style="
- background-color: #7070e0; -webkit-transform: rotate(120deg); z-index: 1;
- "></div>
- <div class="xslice" id="private-slice" style="
- background-color: #d0d0f0; -webkit-transform: rotate(90deg); z-index: 1;
- "></div>
- <div class="xslice" id="private-slice" style="
- background-color: #7da0e0; -webkit-transform: rotate(60deg); z-index: 1;
- "></div>
- <div class="xslice" id="private-slice" style="
- background-color: #7d7da0; -webkit-transform: rotate(30deg); z-index: 1;
- "></div>
- </div></piechart>
-
- <label>Private</label>
- <div class="text">Most content is stored on this partition: from applications (Cydia and Apple) to multimedia.</div>
-
- <div class="legend" id="private-legend"></div>
- </div>
-
- <div class="background" style="height: 189px"></div>
+ <div class="tslice"></div>
+ <div class="bslice"></div>
+ </div>
+ <div class="nslice"><div id="private-size"></div></div>
+ </div></piechart>
+
+ <label>Private</label>
+ <div class="text">Most content is stored on this partition: from applications (Cydia and Apple) to multimedia.</div>
+
+ <div class="legend" id="private-legend"></div>
</a>
</panel>
projects / cydia.git / blobdiff