diff --git a/README.md b/README.md
index c562e0e..f54cc82 100644
--- a/README.md
+++ b/README.md
@@ -8,6 +8,12 @@ CSSViewer Chrome Extension 1.7
Download
--------
+## New GUI
+
+
+
+
+
**CSSViewer** is available at Google Chrome Webstore: https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce
How to use
diff --git a/css/cssviewer.css b/css/cssviewer.css
index f8f2545..9cfd2cf 100644
--- a/css/cssviewer.css
+++ b/css/cssviewer.css
@@ -24,8 +24,9 @@ span.CSSViewer_property,
#CSSViewer_block li,
#CSSViewer_block span
{
- font-family:"Lucida sans", helvetica, sans-serif !important;
- font-size:10px !important;
+ /* font-family:"Lucida sans", helvetica, sans-serif !important; */
+ font-family: -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
+ font-size:11px !important;
z-index:9999 !important;
padding:0 !important;
margin:0 !important;
@@ -42,75 +43,97 @@ span.CSSViewer_property,
{
display:none;
min-width:332px !important;
- font-size:10px !important;
- color:#555 !important;
+ /* font-size:10px !important; */
+ font-size: 14px !important;
+ color:#bd93f9 !important;
position:absolute !important;
+ box-shadow: 0px 10px 20px 5px rgba(0, 0, 0, 0.5) !important;
}
#CSSViewer_block h1
{
- color:#fff !important;
- font-size:12px !important;
+ /* color:#fff !important; */
+ /* color:rgb(42 43 55) !important; */
+ color:#4adc71 !important;
+ font-size:16px !important;
text-transform:none !important;
text-align:center !important;
width:322px !important;
display:block !important;
- background:url("chrome-extension://__MSG_@@extension_id__/img/header.png") !important;
- padding:30px 10px 5px 10px !important;
+ /* background:url("chrome-extension://__MSG_@@extension_id__/img/header.png") !important; */
+ background:rgb(42 43 55) !important;
+ padding:20px 10px 20px 10px !important;
margin:5% auto;
line-height: 10px;
+ border-top-left-radius: 14px;
+ border-top-right-radius: 14px;
+ font-weight: bold;
}
#CSSViewer_center
{
- padding:10px 32px 0 32px !important;
+ /* padding:10px 32px 0 32px !important; */
overflow:hidden !important;
- background:url("chrome-extension://__MSG_@@extension_id__/img/body.png") repeat-y !important;
+ /* background:url("chrome-extension://__MSG_@@extension_id__/img/body.png") repeat-y !important; */
+ background:rgb(42 43 55) !important;
+ text-align: center !important;
}
#CSSViewer_footer
{
padding-top:5px;
- color:#555 !important;
+ /* color:#555 !important; */
+ color: #4adc71 !important;
text-align:center !important;
- width:332px !important;
+ width:auto !important;
height:30px !important;
display:block !important;
- background:url("chrome-extension://__MSG_@@extension_id__/img/footer.png") !important;
+ /* background:url("chrome-extension://__MSG_@@extension_id__/img/footer.png") !important; */
+ background:rgb(42 43 55) !important;
+ border-bottom-left-radius: 14px;
+ border-bottom-right-radius: 14px;
+ font-size: 12px !important;
}
.CSSViewer_category
{
- background:url("chrome-extension://__MSG_@@extension_id__/img/list.png") no-repeat top left !important;
+ /* background:url("chrome-extension://__MSG_@@extension_id__/img/list.png") no-repeat top left !important; */
+ background:rgb(42 43 55) top left !important;
padding:0 5px !important;
}
#CSSViewer_block h2
{
padding-top:6px !important;
- color:#6a8e46 !important;
- font-size:12px !important;
+ /* color:#6a8e46 !important; */
+ color: #4adc71 !important;
+ font-size:14px !important;
text-align:left !important;
letter-spacing:-0.5px !important;
+ padding-left: 20px !important;
+ border-top: 3px solid #bbb !important;
}
#CSSViewer_block ul
{
- padding:5px 5px 10px 5px !important;
+ /* border-top: 3px solid #bbb !important; */
+ padding:5px 5px 10px 20px !important;
list-style:none !important;
+ /* width:282px !important; */
width:282px !important;
}
#CSSViewer_block li
{
background:url("chrome-extension://__MSG_@@extension_id__/img/bullet.png") no-repeat left center !important;
- padding-left:10px !important;
+ padding-left:20px !important;
}
#CSSViewer_block span.CSSViewer_property
{
- color:#888 !important;
+ /* color:#888 !important; */
+ color: #61cbe0 !important;
float:left !important;
width:100px !important;
display:block !important;
diff --git a/img/bullet.png b/img/bullet.png
index dad2c5d..a5c9a1f 100644
Binary files a/img/bullet.png and b/img/bullet.png differ
diff --git a/img/new-gui.png b/img/new-gui.png
new file mode 100644
index 0000000..b23a3fe
Binary files /dev/null and b/img/new-gui.png differ
diff --git a/js/cssviewer.js b/js/cssviewer.js
index ea1b302..6e9c5ce 100644
--- a/js/cssviewer.js
+++ b/js/cssviewer.js
@@ -51,7 +51,7 @@ var CSSViewer_pColorBg = new Array(
'background-attachment',
'background-color',
'background-image',
- 'background-position',
+ 'bg-position', //background-position
'background-repeat',
'color'
);
@@ -375,7 +375,7 @@ function UpdateColorBg(element)
SetCSSPropertyValueIf(element, 'background-color', RGBToHex(GetCSSProperty(element, 'background-color')), GetCSSProperty(element, 'background-color') != 'transparent');
SetCSSPropertyIf(element, 'background-attachment', GetCSSProperty(element, 'background-attachment') != 'scroll');
SetCSSPropertyValueIf(element, 'background-image', GetFileName(GetCSSProperty(element, 'background-image')), GetCSSProperty(element, 'background-image') != 'none');
- SetCSSPropertyIf(element, 'background-position' , GetCSSProperty(element, 'background-position') != '');
+ SetCSSPropertyIf(element, 'bg-position' , GetCSSProperty(element, 'background-position') != '');
SetCSSPropertyIf(element, 'background-repeat' , GetCSSProperty(element, 'background-repeat') != 'repeat');
}
@@ -746,7 +746,7 @@ function CSSViewer()
footer.id = 'CSSViewer_footer';
//<
- footer.appendChild( document.createTextNode('CSSViewer 1.7. keys: [f] Un/Freeze. [c] Css. [Esc] Close.') );
+ footer.appendChild( document.createTextNode('CSSViewer keys: [f/space] Un/Freeze. [c] Css. [Esc] Close.') );
block.appendChild(footer);
}
@@ -991,6 +991,9 @@ function cssViewerCopyCssToConsole(type)
if( 'simpleCssDefinition' == type ) return console.log( CSSViewer_element_cssDefinition );
}
+
+
+
/*
* Close css viewer on clicking 'esc' key
* Freeze css viewer on clicking 'f' key
@@ -1010,7 +1013,7 @@ function CssViewerKeyMap(e) {
return;
// f: Freeze or Unfreeze the css viewer if the cssViewer is enabled
- if ( e.keyCode === 70 ){
+ if ( e.keyCode === 70 || e.keyCode === 32 ){ // 32 for space bar
if ( cssViewer.haveEventListeners ){
cssViewer.Freeze();
}
@@ -1022,10 +1025,22 @@ function CssViewerKeyMap(e) {
// c: Show code css for selected element.
// window.prompt should suffice for now.
if ( e.keyCode === 67 ){
- window.prompt("Simple Css Definition :\n\nYou may copy the code below then hit escape to continue.", CSSViewer_element_cssDefinition);
+ let confirm = window.prompt("Simple Css Definition :\n\nYou may copy the code below then hit escape to continue.", CSSViewer_element_cssDefinition);
+ if(confirm != null){
+ console.log(confirm);
+ navigator.clipboard.writeText(confirm);
+
+ }
}
}
+function createElement(){
+ let el = document.createElement('div');
+ let child = document.createElement('input');
+ el.appendChild(child);
+ return el;
+}
+
/*
* CSSViewer entry-point
diff --git a/option.html b/option.html
index 7d1f3dc..5146984 100644
--- a/option.html
+++ b/option.html
@@ -38,7 +38,7 @@
CSSViewer shows the css parameters of any element in a web page. To enable/disable CSSViewer, simply click the toolbar icon and then hover any element on you want to inspect in current page.
For quick usage you may use the available keyboard shortcuts:
-
[f] Freeze/Unfreeze the widget in place,
+
[f/space] Freeze/Unfreeze the widget in place,
[c] Shows selected element simpleCssDefinition on a modal, and
[esc] Disable the viewer.