Index: popup.html |
=================================================================== |
--- a/popup.html |
+++ b/popup.html |
@@ -19,146 +19,83 @@ |
<html> |
<head> |
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
-<link type="text/css" href="jquery-ui/css/smoothness/jquery-ui-1.8.16.custom.css" rel="stylesheet" /> |
-<style type="text/css" media="screen"> |
-body { |
- font-size: 75%; |
- font-family: Helvetica, Arial, sans-serif; |
- min-width: 170px; |
- background: #ffffff; |
- color: #000000; |
- overflow: hidden; |
-} |
- |
-a { text-decoration: none } |
- |
-#notification |
-{ |
- min-width: 240px; |
- margin-bottom: 10px; |
- border-radius: 5px; |
- border: 2px solid; |
-} |
- |
-#notification.information |
-{ |
- border-color: #09d; |
-} |
- |
-#notification.critical |
-{ |
- border-color: #e40; |
-} |
- |
-#notification>h1 |
-{ |
- font-size: 16px; |
-} |
- |
-#notification>* |
-{ |
- margin: 5px; |
-} |
- |
-#filtersList { |
- border: 1px dotted gray; |
- padding: 1px; |
- font-size: 75%; |
- display: none; |
-} |
- |
-.ui-button { |
- padding: 3px; |
-} |
- |
-.spacer { |
- height: 7px; |
- width: 5px; |
- display: block; |
-} |
- |
-#statsContainer |
-{ |
- margin: 10px 5px; |
- padding: 5px; |
- border: 1px solid rgb(150, 150, 200); |
- border-radius: 5px; |
- white-space: nowrap; |
- background: -webkit-linear-gradient(rgb(250, 250, 255), rgb(200, 200, 255) 50px); |
- background: linear-gradient(rgb(250, 250, 255), rgb(200, 200, 255) 50px); |
-} |
- |
-#statsPage > strong, |
-#statsTotal > strong |
-{ |
- display: inline-block; |
- min-width: 50px; |
- color: rgb(255, 50, 50); |
- text-align: right; |
-} |
- |
-#share |
-{ |
- display: block; |
- color: rgb(75, 75, 200); |
- text-align: right; |
- text-decoration: underline; |
-} |
- |
-#shareBox > a |
-{ |
- display: block; |
- margin-top: 5px; |
-} |
-</style> |
- |
-<script type="text/javascript" src="jquery-ui/js/jquery-1.7.1.min.js"></script> |
-<script type="text/javascript" src="ext/common.js"></script> |
-<script type="text/javascript" src="ext/background.js"></script> |
-<script type="text/javascript" src="i18n.js"></script> |
-<script type="text/javascript" src="popup.js"></script> |
-<script type="text/javascript" src="notification.js"></script> |
-<script type="text/javascript" src="stats.js"></script> |
+ <link rel="stylesheet" type="text/css" href="skin/popup.css"> |
+ <script src="ext/common.js"></script> |
+ <script src="ext/background.js"></script> |
+ <script src="i18n.js"></script> |
+ <script src="popup.js"></script> |
+ <script src="notification.js"></script> |
+ <script src="stats.js"></script> |
</head> |
<!-- Set tabindex to work around Chromium issue 304532 --> |
-<body id="main" tabindex="1"> |
-<div id="notification" style="display: none"> |
-<h1 id="title"></h1> |
-<p id="message"></p> |
+<body tabindex="1"> |
+ |
+<header> |
+ <div id="logo"></div> |
+</header> |
+ |
+<div id="wrapper"> |
+ <div id="notification"> |
+ <h1> |
+ <span id="notification-title"></span> |
+ <div id="close-notification"></div> |
+ </h1> |
+ <div id="notification-message"></div> |
+ </div> |
+ |
+ <div id="clickhide-instructions" class="i18n_clickhide_instructions"></div> |
+ |
+ <ul id="menu"> |
+ <li id="enabled" class="menu-item" role="button"> |
+ <div class="icon"></div> |
+ <span id="enabled-on" class="i18n_enabled_for_site"></span> |
+ <span id="enabled-off" class="i18n_disabled_for_site"></span> |
+ </li> |
+ |
+ <li id="clickhide" class="menu-item" role="button"> |
+ <div class="icon"></div> |
+ <span class="i18n_easy_create_filter"></span> |
+ </li> |
+ <li id="clickhide-cancel" class="menu-item" role="button"> |
+ <div class="icon"></div> |
+ <span class="i18n_cancel"></span> |
+ </li> |
+ |
+ <li id="stats-container"> |
+ <div class="menu-item collapse" data-option="show_popupstats" data-collapsable="stats-container" role="button"> |
+ <div class="icon"></div> |
+ <span class="i18n_stats_title"></span> |
+ <div class="collapse-icon"></div> |
+ </div> |
+ <ul id="stats" class="collapsable"> |
+ <li> |
+ <div> |
+ <div id="stats-page"></div> |
+ <div id="stats-total"></div> |
+ </div> |
+ |
+ <div id="share"> |
+ <span class="i18n_stats_share_title"></span> |
+ <div id="share-box"> |
+ <div data-social="facebook"></div> |
+ <div data-social="twitter"></div> |
+ <div data-social="gplus"></div> |
+ </div> |
+ </div> |
+ </li> |
+ <li> |
+ <div id="show-iconnumber" class="checkbox" role="checkbox" aria-checked></div> |
+ <label for="show-iconnumber" class="i18n_stats_show_iconnumber"></label> |
+ </li> |
+ </ul> |
+ </li> |
+ </ul> |
</div> |
-<div id="enabledCheckboxAndLabel" style="display:none"><input id="enabled" type="checkbox" checked><label for="enabled"><span class="i18n_enabled_for_site"></span></label></div> |
-<div id="clickHideInactiveStuff" style="display: none"> |
-<div class="spacer"></div> |
-<button id="clickHideButton" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"><span class="i18n_easy_create_filter"></span></button> |
-</div> |
+<footer id="options" role="button"> |
+ <div class="icon"></div> |
+ <span class="i18n_options_short"></span> |
+</footer> |
-<div id="clickHideActiveStuff" style="display: none"> |
-<div id="clickHideMsg"><span class="i18n_clickhide_instructions"></span></div> |
-<div class="spacer"></div> |
-<button id="cancelButton" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"><span class="i18n_cancel"></span></button> |
-</div> |
- |
-<div class="spacer"></div> |
-<button id="optionsButton" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"><span class="i18n_options"></span></button> |
- |
-<div id="statsContainer" hidden> |
- <strong class="i18n_stats_title"></strong> |
- <div id="stats"> |
- <div id="statsPage" class="label"></div> |
- <div id="statsTotal" class="label"></div> |
- </div> |
- <div> |
- <a id="share" class="i18n_stats_share_title" href="#"></a> |
- <div id="shareBox" hidden> |
- <a class="i18n_stats_share_label_fb ui-button ui-widget ui-state-default ui-corner-all" data-social="facebook"></a> |
- <a id="shareTwitter" class="i18n_stats_share_label_twitter ui-button ui-widget ui-state-default ui-corner-all" data-social="twitter"></a> |
- <a id="shareGplus" class="i18n_stats_share_label_gplus ui-button ui-widget ui-state-default ui-corner-all" data-social="gplus"></a> |
- </div> |
- </div> |
-</div> |
- |
-</div> |
</body> |
</html> |