Welcome to mirror list, hosted at ThFree Co, Russian Federation.

github.com/CSS-Tricks/The-Printliminator.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat (limited to 'src/chrome')
-rw-r--r--src/chrome/manifest.json28
-rw-r--r--src/chrome/popup.html155
-rw-r--r--src/chrome/popup.js145
-rw-r--r--src/chrome/popup.scss177
4 files changed, 505 insertions, 0 deletions
diff --git a/src/chrome/manifest.json b/src/chrome/manifest.json
new file mode 100644
index 0000000..9627dd9
--- /dev/null
+++ b/src/chrome/manifest.json
@@ -0,0 +1,28 @@
+{
+ "name": "__MSG_printliminatorName__",
+ "version": "4.0.1",
+ "manifest_version": 2,
+ "author": "Chris Coyier",
+ "description": "__MSG_printliminatorDescription__",
+ "homepage_url": "https://github.com/CSS-Tricks/The-Printliminator",
+ "default_locale": "en",
+ "icons": {
+ "16": "icon16.png",
+ "32": "icon32.png",
+ "48": "icon48.png",
+ "64": "icon64.png",
+ "128": "icon128.png"
+ },
+ "browser_action": {
+ "default_icon": "icon-32.png",
+ "default_title": "__MSG_printliminatorName__",
+ "default_popup": "popup.html"
+ },
+ "permissions": [
+ "activeTab"
+ ],
+ "web_accessible_resources": [
+ "printliminator.js",
+ "printliminator.css"
+ ]
+} \ No newline at end of file
diff --git a/src/chrome/popup.html b/src/chrome/popup.html
new file mode 100644
index 0000000..896ba5b
--- /dev/null
+++ b/src/chrome/popup.html
@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="UTF-8">
+ <title i18n-text="printliminatorName"></title>
+ <link href="popup.css" rel="stylesheet">
+</head>
+
+<body>
+ <header>
+ <svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 134.4 8.7">
+ <g>
+ <path d="M3,0.7H0.3C0.1,0.7,0,0.6,0,0.4c0-0.2,0.1-0.3,0.3-0.3h6c0.2,0,0.3,0.1,0.3,0.3c0,0.2-0.1,0.3-0.3,0.3H3.6v7.6
+ c0,0.2-0.1,0.3-0.3,0.3S3,8.4,3,8.3V0.7z"/>
+ <path d="M8.4,0.4c0-0.2,0.1-0.3,0.3-0.3S9,0.2,9,0.4V4h5.4V0.4c0-0.2,0.1-0.3,0.3-0.3c0.2,0,0.3,0.1,0.3,0.3v7.9
+ c0,0.2-0.1,0.3-0.3,0.3c-0.2,0-0.3-0.1-0.3-0.3V4.6H9v3.7c0,0.2-0.1,0.3-0.3,0.3S8.4,8.4,8.4,8.3V0.4z"/>
+ <path d="M17.5,8.2V0.5c0-0.2,0.1-0.3,0.3-0.3h5.4c0.2,0,0.3,0.1,0.3,0.3c0,0.2-0.1,0.3-0.3,0.3h-5.1V4h4.6C22.9,4,23,4.1,23,4.3
+ c0,0.2-0.1,0.3-0.3,0.3h-4.6V8h5.2c0.2,0,0.3,0.1,0.3,0.3c0,0.2-0.1,0.3-0.3,0.3h-5.5C17.7,8.5,17.5,8.4,17.5,8.2z"/>
+ <path d="M29,0.9c0-0.4,0.3-0.7,0.7-0.7h2.6c2,0,3.2,1.1,3.2,2.8v0c0,1.9-1.5,2.9-3.4,2.9h-1.7v2c0,0.4-0.3,0.7-0.7,0.7
+ c-0.4,0-0.7-0.3-0.7-0.7V0.9z M32.2,4.5C33.3,4.5,34,3.9,34,3v0c0-1-0.7-1.5-1.8-1.5h-1.7v3H32.2z"/>
+ <path d="M37,0.9c0-0.4,0.3-0.7,0.7-0.7h3c1.1,0,1.9,0.3,2.4,0.8c0.4,0.5,0.7,1.1,0.7,1.8v0c0,1.3-0.8,2.2-1.9,2.5l1.6,2
+ c0.1,0.2,0.2,0.3,0.2,0.6c0,0.4-0.3,0.7-0.7,0.7c-0.3,0-0.6-0.2-0.7-0.4l-2-2.6h-1.9v2.3c0,0.4-0.3,0.7-0.7,0.7
+ c-0.4,0-0.7-0.3-0.7-0.7V0.9z M40.7,4.3c1.1,0,1.7-0.6,1.7-1.4v0c0-0.9-0.6-1.4-1.7-1.4h-2.1v2.8H40.7z"/>
+ <path d="M45.8,0.8c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7v7.1c0,0.4-0.3,0.7-0.7,0.7c-0.4,0-0.7-0.3-0.7-0.7V0.8z"/>
+ <path d="M49.5,0.8c0-0.4,0.3-0.7,0.7-0.7h0.2c0.4,0,0.6,0.2,0.8,0.4L55.4,6V0.8c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7v7.1
+ c0,0.4-0.3,0.7-0.7,0.7H56c-0.3,0-0.6-0.2-0.8-0.4L51,2.6v5.3c0,0.4-0.3,0.7-0.7,0.7c-0.4,0-0.7-0.3-0.7-0.7V0.8z"/>
+ <path d="M61.1,1.5h-2c-0.4,0-0.7-0.3-0.7-0.7c0-0.4,0.3-0.7,0.7-0.7h5.6c0.4,0,0.7,0.3,0.7,0.7c0,0.4-0.3,0.7-0.7,0.7h-2.1v6.4
+ c0,0.4-0.3,0.7-0.7,0.7s-0.7-0.3-0.7-0.7V1.5z"/>
+ <path d="M66.8,0.8c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7v6.4H72c0.4,0,0.7,0.3,0.7,0.7c0,0.4-0.3,0.7-0.7,0.7h-4.5
+ c-0.4,0-0.7-0.3-0.7-0.7V0.8z"/>
+ <path d="M74.3,0.8c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7v7.1c0,0.4-0.3,0.7-0.7,0.7c-0.4,0-0.7-0.3-0.7-0.7V0.8z"/>
+ <path d="M78,0.8c0-0.4,0.3-0.7,0.7-0.7h0.2c0.3,0,0.5,0.2,0.7,0.4l2.5,4l2.6-4c0.2-0.3,0.4-0.4,0.7-0.4h0.2c0.4,0,0.7,0.3,0.7,0.7
+ v7c0,0.4-0.3,0.7-0.7,0.7c-0.4,0-0.7-0.3-0.7-0.7v-5l-2.1,3.1c-0.2,0.2-0.3,0.4-0.6,0.4c-0.3,0-0.5-0.1-0.6-0.4l-2-3.1v5
+ c0,0.4-0.3,0.7-0.7,0.7S78,8.3,78,7.9V0.8z"/>
+ <path d="M88.5,0.8c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7v7.1c0,0.4-0.3,0.7-0.7,0.7c-0.4,0-0.7-0.3-0.7-0.7V0.8z"/>
+ <path d="M92.2,0.8c0-0.4,0.3-0.7,0.7-0.7h0.2c0.4,0,0.6,0.2,0.8,0.4L98.1,6V0.8c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7v7.1
+ c0,0.4-0.3,0.7-0.7,0.7h-0.1c-0.3,0-0.6-0.2-0.8-0.4l-4.3-5.6v5.3c0,0.4-0.3,0.7-0.7,0.7c-0.4,0-0.7-0.3-0.7-0.7V0.8z"/>
+ <path d="M101.2,7.6l3.1-7c0.2-0.4,0.5-0.6,0.9-0.6h0.1c0.4,0,0.7,0.2,0.9,0.6l3.1,7c0.1,0.1,0.1,0.2,0.1,0.3c0,0.4-0.3,0.7-0.7,0.7
+ c-0.3,0-0.6-0.2-0.7-0.5l-0.7-1.6h-4.1l-0.7,1.6c-0.1,0.3-0.4,0.5-0.7,0.5c-0.4,0-0.7-0.3-0.7-0.7C101.1,7.8,101.2,7.7,101.2,7.6z
+ M106.7,5.2l-1.5-3.4l-1.5,3.4H106.7z"/>
+ <path d="M112.1,1.5h-2c-0.4,0-0.7-0.3-0.7-0.7c0-0.4,0.3-0.7,0.7-0.7h5.6c0.4,0,0.7,0.3,0.7,0.7c0,0.4-0.3,0.7-0.7,0.7h-2.1v6.4
+ c0,0.4-0.3,0.7-0.7,0.7c-0.4,0-0.7-0.3-0.7-0.7V1.5z"/>
+ <path d="M117,4.4L117,4.4c0-2.4,1.8-4.4,4.4-4.4c2.6,0,4.4,2,4.4,4.3v0c0,2.4-1.8,4.3-4.4,4.3C118.8,8.7,117,6.7,117,4.4z
+ M124.2,4.4L124.2,4.4c0-1.7-1.2-3-2.9-3s-2.8,1.3-2.8,3v0c0,1.6,1.2,3,2.9,3S124.2,6,124.2,4.4z"/>
+ <path d="M127.5,0.9c0-0.4,0.3-0.7,0.7-0.7h3c1.1,0,1.9,0.3,2.4,0.8c0.4,0.5,0.7,1.1,0.7,1.8v0c0,1.3-0.8,2.2-1.9,2.5l1.6,2
+ c0.1,0.2,0.2,0.3,0.2,0.6c0,0.4-0.3,0.7-0.7,0.7c-0.3,0-0.6-0.2-0.7-0.4l-2-2.6H129v2.3c0,0.4-0.3,0.7-0.7,0.7
+ c-0.4,0-0.7-0.3-0.7-0.7V0.9z M131.2,4.3c1.1,0,1.7-0.6,1.7-1.4v0c0-0.9-0.6-1.4-1.7-1.4H129v2.8H131.2z"/>
+ </g>
+ </svg>
+ <h3><strong i18n-text="clickToRemove"></strong> <span i18n-text="altClickRemove"></span></h3>
+ </header>
+ <section>
+ <h3 i18n-text="commandButtons"></h3>
+ <ul>
+ <li class="<!-- @echo undo -->">
+ <span class="<!-- @echo icon -->"></span>
+ <span i18n-text="undoLast"></span>
+ </li>
+ <li class="<!-- @echo stylize -->">
+ <span class="<!-- @echo icon -->"></span>
+ <span i18n-text="addStylize"></span>
+ </li>
+ <li class="<!-- @echo noGraphics -->">
+ <span class="<!-- @echo icon -->"></span>
+ <span i18n-text="removeGraphics"></span>
+ </li>
+ <li class="<!-- @echo print -->">
+ <span class="<!-- @echo icon -->"></span>
+ <span i18n-text="sendToPrint"></span>
+ </li>
+ </ul>
+ <div class="commands-wrap">
+ <p class="<!-- @echo toggle -->" i18n-text="viewKeyboardCommands"></p>
+ <table id="<!-- @echo keyboard -->" style="display:none">
+ <thead>
+ <tr>
+ <th class="key" i18n-text="keyColumn"></th>
+ <th i18n-text="descriptionColumn"></th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>
+ <kbd i18n-text="keyPageUp"></kbd> <span class="lower" i18n-text="orText"></span> <kbd class="bold" i18n-title="keyUpArrow">&uarr;</kbd>
+ </td>
+ <td i18n-text="upDescription"></td>
+ </tr>
+ <tr>
+ <td>
+ <kbd i18n-text="keyPageDown"></kbd> <span class="lower" i18n-text="orText"></span> <kbd class="bold" i18n-title="keyDownArrow">&darr;</kbd>
+ </td>
+ <td i18n-text="downDescription"></td>
+ </tr>
+ <tr>
+ <td><kbd class="bold" i18n-title="keyRightArrow">&rarr;</kbd></td>
+ <td i18n-text="rightDescription"></td>
+ </tr>
+ <tr>
+ <td><kbd class="bold" i18n-title="keyLeftArrow">&larr;</kbd></td>
+ <td i18n-text="leftDescription"></td>
+ </tr>
+ <tr>
+ <td><kbd i18n-text="keyEnter"></kbd></td>
+ <td i18n-text="removeHighlight"></td>
+ </tr>
+ <tr>
+ <td><kbd i18n-text="keyBackspace"></kbd></td>
+ <td i18n-text="undoAction">n</td>
+ </tr>
+ <tr>
+ <td><kbd i18n-title="keyNumpadPlus"><span i18n-text="keyNumpad"></span> <span class="bold">+</span></kbd></td>
+ <td i18n-text="fontUp"></td>
+ </tr>
+ <tr>
+ <td><kbd i18n-title="keyNumpadMinus"><span i18n-text="keyNumpad"></span> <span class="bold">-</span></kbd></td>
+ <td i18n-text="fontDown"></td>
+ </tr>
+ <tr>
+ <td><kbd i18n-title="keyNumpadAsterisk"><span i18n-text="keyNumpad"></span> <span class="bold asterisk">*</span></kbd></td>
+ <td i18n-text="fontReset"></td>
+ </tr>
+ <tr>
+ <td>
+ <kbd i18n-text="keyAlt"></kbd> + <span class="<!-- @echo icon --> <!-- @echo leftClick -->" i18n-title="mouseLeftClick"></span>
+ </td>
+ <td i18n-text="removeOpposite"></td>
+ </tr>
+ <tr>
+ <td>
+ <kbd i18n-text="keyShift"></kbd> + <span class="<!-- @echo icon --> <!-- @echo leftClick -->" i18n-title="mouseLeftClick"></span>
+ </span>
+ </td>
+ <td i18n-text="fullWidth"></td>
+ </tr>
+<!--
+ <tr>
+ <td><kbd i18n-text="keyPS" i18n-title="keyPSTitle"></kbd></td>
+ <td i18n-text="printPage"></td>
+ </tr>
+ <tr>
+ <td><kbd i18n-text="keyEsc" i18n-title="keyEscTitle"></kbd></td>
+ <td i18n-text="abort"></td>
+ </tr>
+-->
+ <tr>
+ <td><kbd i18n-text="keyF1" i18n-title="keyF1Title"></kbd></td>
+ <td i18n-text="toggleMessages"></td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </section>
+ <script src="popup.js"></script>
+</body>
+</html>
diff --git a/src/chrome/popup.js b/src/chrome/popup.js
new file mode 100644
index 0000000..a0d86cb
--- /dev/null
+++ b/src/chrome/popup.js
@@ -0,0 +1,145 @@
+/*globals chrome */
+// inject printliminator from popup & control from there.
+var commands = {
+ remove : function() {
+ chrome.tabs.executeScript( null, {
+ code: 'thePrintliminator.removeGraphics();'
+ });
+ },
+ print : function() {
+ document.querySelector( 'li.print' ).classList.add( '/* @echo busy */' );
+ // ready state is delayed when a file on the page is not found
+ chrome.tabs.executeScript( null, {
+ code : 'document.readyState === "complete";'
+ }, function( result ) {
+ if ( result && result[ 0 ] === true ) {
+ window.close();
+ chrome.tabs.executeScript( null, {
+ code : 'thePrintliminator.print();'
+ });
+ } else {
+ // keep checking ready state for 20 seconds
+ // if still not ready, abort, but still call print function
+ var loopy = function( i ) {
+ setTimeout(function () {
+ chrome.tabs.executeScript( null, {
+ code : 'document.readyState === "complete";'
+ }, function( result ) {
+ if ( result && result[ 0 ] === true || i === 1 ) {
+ i = 0;
+ window.close();
+ chrome.tabs.executeScript( null, {
+ code : 'thePrintliminator.print();'
+ });
+ }
+ if ( --i > 0 ) {
+ loopy(i);
+ }
+ });
+ }, 1000);
+ };
+ // repeat 20 times (20 seconds), then just close the popup
+ loopy( 20 );
+ }
+ });
+ },
+ stylize : function() {
+ chrome.tabs.executeScript( null, {
+ code : 'thePrintliminator.stylize();'
+ });
+ },
+ keyboard : function() {
+ var indx,
+ table = document.querySelector( '#/* @echo keyboard */' ),
+ mode = table.style.display === 'none';
+ table.style.display = mode ? '' : 'none';
+ this.innerHTML = ( mode ? 'Hide' : 'View' ) + ' Keyboard Commands';
+
+ },
+ undo : function() {
+ chrome.tabs.executeScript( null, {
+ code : 'thePrintliminator.undo();'
+ });
+ },
+ setLanguage : function(){
+ // update all text content
+ commands.getMsg( document.querySelectorAll( '[i18n-text]' ), true );
+ commands.getMsg( document.querySelectorAll( '[i18n-title]' ), false );
+ },
+ getMsg : function( elms, isText ) {
+ var indx, msgKey, message,
+ len = elms.length;
+ for ( indx = 0; indx < len; indx++ ) {
+ msgKey = elms[ indx ].getAttribute( 'i18n-' + ( isText ? 'text' : 'title' ) );
+ message = chrome.i18n.getMessage( msgKey );
+ if ( isText ) {
+ elms[ indx ].innerHTML = message;
+ } else {
+ elms[ indx ].title = message;
+ }
+ }
+ }
+};
+
+chrome.windows.getCurrent( function( win ) {
+ chrome.tabs.query({
+ windowId : win.id,
+ active : true
+ }, function( tabArray ) {
+
+ // don't try to open a popup on chrome settings pages
+ if ( tabArray && /^chrome/.test( tabArray[ 0 ].url || '' ) ) {
+ return false;
+ }
+
+ // inject css & js only on initial click
+ chrome.tabs.executeScript( null, {
+ code : 'document.querySelector( "body" ).classList.contains( "/* @echo enabled */" );',
+ matchAboutBlank : true
+ }, function( result ) {
+ if ( result && !result[ 0 ] ) {
+ chrome.tabs.insertCSS( null, {
+ file : 'printliminator.css',
+ matchAboutBlank : true
+ });
+
+ chrome.tabs.executeScript( null, {
+ file: 'printliminator.js',
+ matchAboutBlank : true
+ }, function() {
+ chrome.tabs.executeScript( null, {
+ code : 'thePrintliminator.init();'
+ });
+ });
+ }
+ // update Language
+ commands.setLanguage();
+ });
+
+ // Remove graphics
+ var el = document.querySelector( './* @echo noGraphics */' );
+ el.removeEventListener( 'click', commands.remove );
+ el.addEventListener( 'click', commands.remove );
+
+ // Print
+ el = document.querySelector( './* @echo print */' );
+ el.removeEventListener( 'click', commands.print );
+ el.addEventListener( 'click', commands.print );
+
+ // Add print stylesheet
+ el = document.querySelector( './* @echo stylize */' );
+ el.removeEventListener( 'click', commands.stylize );
+ el.addEventListener( 'click', commands.stylize );
+
+ // Undo
+ el = document.querySelector( './* @echo undo */' );
+ el.removeEventListener( 'click', commands.undo );
+ el.addEventListener( 'click', commands.undo );
+
+ // keyboard
+ el = document.querySelector( './* @echo toggle */' );
+ el.removeEventListener( 'click', commands.keyboard );
+ el.addEventListener( 'click', commands.keyboard );
+
+ });
+});
diff --git a/src/chrome/popup.scss b/src/chrome/popup.scss
new file mode 100644
index 0000000..bfff2a6
--- /dev/null
+++ b/src/chrome/popup.scss
@@ -0,0 +1,177 @@
+$icon : /* @echo icon */;
+$print : /* @echo print */;
+$close : /* @echo close */;
+$undo : /* @echo undo */;
+$noGraphics : /* @echo noGraphics */;
+$stylize : /* @echo stylize */;
+$busy : /* @echo busy */;
+$leftClick : /* @echo leftClick */;
+$toggle : /* @echo toggle */;
+
+html {
+ box-sizing: border-box;
+}
+*, *:before, *:after {
+ box-sizing: inherit;
+}
+
+html, body {
+ width: 450px;
+ min-height: 160px;
+ padding: 0;
+ margin: 0;
+ background: #eee;
+ font-size: 14px;
+ font-family: "Lucida Grande","Lucida Sans Unicode", Tahoma, sans-serif;
+ overflow: hidden;
+}
+header {
+ background-color: #fff;
+ padding: 12px 10px 1px 10px;
+
+ h3 {
+ color: #ccc;
+ margin: 0 0 10px;
+ }
+ h3 strong {
+ color: red;
+ margin: 0;
+ }
+}
+
+header, section * {
+ cursor: default;
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+}
+section {
+ padding: 2px 0;
+}
+.logo {
+ width: 225px;
+ height: 15px;
+ margin: 0;
+}
+
+h3 {
+ text-transform: uppercase;
+ font-size: 10px;
+ font-weight: bold;
+ color: #000;
+ margin: 10px 12px;
+}
+
+ul {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ text-align: center;
+}
+li {
+ background: #000;
+ color: #fff;
+ display: inline-block;
+ font-size: 10px;
+ line-height: 12px;
+ text-align: left;
+ text-transform: uppercase;
+ vertical-align: middle;
+ padding: 4px 16px 4px 4px;
+ white-space: nowrap;
+ margin: 2px;
+ cursor: pointer;
+
+ &:hover {
+ background: #444;
+ }
+
+}
+
+.#{$icon} {
+ display: inline-block;
+ background: url(printliminator.png) no-repeat;
+ width: 25px;
+ height: 25px;
+ margin: 0 8px 0 0;
+ vertical-align: middle;
+ float: left;
+}
+
+.#{$print} .#{$icon} { background-position: -25px 0; }
+.#{$undo} .#{$icon} { background-position: 0 -25px; }
+.#{$noGraphics} .#{$icon} { background-position: -25px -25px; }
+.#{$stylize} .#{$icon} { background-position: -75px -25px; width: 35px; }
+.#{$leftClick} { background-position: -50px -25px; float: none; }
+li.#{$busy} .#{$icon} {
+ background-position: -50px 0;
+ -webkit-animation:spin 2s linear infinite;
+ -moz-animation:spin 2s linear infinite;
+ animation:spin 2s linear infinite;
+}
+
+@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
+@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
+@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
+
+.hidden {
+ display: none;
+}
+.commands-wrap {
+ margin: 8px 0 0 0;
+ padding: 12px;
+ background: #ccc;
+}
+.#{$toggle} {
+ font-size: 12px;
+ margin: 0 0 5px 0;
+ cursor: pointer;
+}
+/* keyboard table */
+table {
+ font-family: Optima, Segoe, 'Segoe UI', Candara, Calibri, Arial, sans-serif;
+ font-size: 12px;
+ text-transform: initial;
+ margin-top: 4px 0 0 0;
+ padding: 0;
+}
+tbody tr:hover td {
+ background: #ddd;
+}
+tbody tr:hover kbd {
+ background: #eee;
+}
+th {
+ text-align: left;
+ padding: 0 0 10px 0;
+}
+th.key {
+ width: 30%;
+}
+td {
+ text-align: left;
+ font-size: 12px;
+ vertical-align: top;
+ border-top: #aaa 1px solid;
+ padding: 5px;
+}
+td svg {
+ vertical-align: middle;
+}
+kbd {
+ background: #fff;
+ border-radius: 3px;
+ border: #333 1px solid;
+ padding: 2px 4px;
+}
+span.lower {
+ text-transform: lowercase;
+}
+span.small {
+ font-size: 0.7em;
+}
+/* center asterisk vertically inside of kbd */
+.asterisk {
+ position: relative;
+ top: 2px;
+}