Tomcat chrome extension UI
How do I make an tomcat chrome extension ui?
Testing a new UI for a tomcat site management chrome extension. What is a tomcat chrome extension ui? How do you make a tomcat chrome extension ui? This script and codes were developed by Aurer on 03 August 2022, Wednesday.
Tomcat chrome extension UI - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Tomcat chrome extension UI</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background: #eee; font-size: 13px; width: 200px; padding: 10px; margin: 0 auto;
}
#main{ background: #141414; color: #ccc; padding: 10px; border-radius: 5px; border: 2px solid #fff; box-shadow: 0 1px 10px #777;
}
#options ul { padding: 0; list-style: none; margin: 0;
}
#options li a { margin: 7px 0; outline: none; -webkit-box-shadow: 0 1px 4px #030303; box-shadow: 0 1px 4px #030303; border-radius: 4px; border: 1px solid; border-color: #512F1A #412514 #412514; font-weight: bold; display: block; background: -webkit-linear-gradient(top, #452610, #27170E); background: linear-gradient(top, #452610, #27170E); padding: 4px; box-sizing: border-box; color: #eee; text-decoration: none; text-shadow: 0 0 2px rgba(0,0,0,0.5);
}
#options li a:hover{ background: -webkit-linear-gradient(top, #4c2c18, #2e1b11); background: linear-gradient(top, #4c2c18, #2e1b11);
}
#options li a:active { background: -webkit-linear-gradient(top, #3C917B, #306154); background: linear-gradient(top, #3C917B, #306154); border-color: #46AC93 #3C917B #3C917B;
}
#sites ul { width: 100%; padding: 0; margin: 0; list-style: none; overflow: hidden;
}
#sites li { margin: 7px 0; overflow: hidden; box-shadow: 0 1px 4px #030303; border-radius: 4px; border: 1px solid; background: -webkit-linear-gradient(top, #272423, #161514); background: linear-gradient(top, #272423, #161514); border-color: #292929 #222 #222; font-weight: bold; padding: 1px;
}
#sites a { display: block; float: left; padding: 3px; -webkit-box-sizing: border-box; box-sizing: border-box; color: #eee; text-decoration: none; text-shadow: 0 0 2px rgba(0,0,0,0.5);
}
#sites a i{ display: block; font-size: 13px; text-align: center;
}
#sites li a:hover { background: -webkit-linear-gradient(top, #352D2B, #1D1B18); background: linear-gradient(top, #352D2B, #1D1B18);
}
#sites li a:active{ background: -webkit-linear-gradient(top, #3C917B, #306154); background: linear-gradient(top, #3C917B, #306154); border-color: #292929 #222 #222; border-radius: 3px;
}
#sites li.active{ background: linear-gradient(top, #325B4F, #243D36); border-color: #3C917B #367B69 #367B69;
}
#sites .title { width: 70%;
}
#sites .start,#sites .restart { width: 15%;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="main"> <div id="options"> <ul> <li><a href="">Open host manager</a></li> <li><a href="">Options.</a></li> </ul> </div> <div id="sites"> <ul> <li> <a href="#" class="title" title="launch">Site title</a> <a href="#" class="start" title="Start"><i>S</i></a> <a href="#" class="restart" title="Restart"><i>R</i></a> </li> <li> <a href="#" class="title" title="launch">Site title</a> <a href="#" class="start" title="Start"><i>S</i></a> <a href="#" class="restart" title="Restart"><i>R</i></a> </li> <li> <a href="#" class="title" title="launch">Site title</a> <a href="#" class="start" title="Start"><i>S</i></a> <a href="#" class="restart" title="Restart"><i>R</i></a> </li> <li class="active"> <a href="#" class="title" title="launch">Site title</a> <a href="#" class="start" title="Start"><i>S</i></a> <a href="#" class="restart" title="Restart"><i>R</i></a> </li> <li> <a href="#" class="title" title="launch">Site title</a> <a href="#" class="start" title="Start"><i>S</i></a> <a href="#" class="restart" title="Restart"><i>R</i></a> </li> <li> <a href="#" class="title" title="launch">Site title</a> <a href="#" class="start" title="Start"><i>S</i></a> <a href="#" class="restart" title="Restart"><i>R</i></a> </li> </ul>
</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Tomcat chrome extension UI - Script Codes CSS Codes
body { background: #eee; font-size: 13px; width: 200px; padding: 10px; margin: 0 auto;
}
#main{ background: #141414; color: #ccc; padding: 10px; border-radius: 5px; border: 2px solid #fff; box-shadow: 0 1px 10px #777;
}
#options ul { padding: 0; list-style: none; margin: 0;
}
#options li a { margin: 7px 0; outline: none; -webkit-box-shadow: 0 1px 4px #030303; box-shadow: 0 1px 4px #030303; border-radius: 4px; border: 1px solid; border-color: #512F1A #412514 #412514; font-weight: bold; display: block; background: -webkit-linear-gradient(top, #452610, #27170E); background: linear-gradient(top, #452610, #27170E); padding: 4px; box-sizing: border-box; color: #eee; text-decoration: none; text-shadow: 0 0 2px rgba(0,0,0,0.5);
}
#options li a:hover{ background: -webkit-linear-gradient(top, #4c2c18, #2e1b11); background: linear-gradient(top, #4c2c18, #2e1b11);
}
#options li a:active { background: -webkit-linear-gradient(top, #3C917B, #306154); background: linear-gradient(top, #3C917B, #306154); border-color: #46AC93 #3C917B #3C917B;
}
#sites ul { width: 100%; padding: 0; margin: 0; list-style: none; overflow: hidden;
}
#sites li { margin: 7px 0; overflow: hidden; box-shadow: 0 1px 4px #030303; border-radius: 4px; border: 1px solid; background: -webkit-linear-gradient(top, #272423, #161514); background: linear-gradient(top, #272423, #161514); border-color: #292929 #222 #222; font-weight: bold; padding: 1px;
}
#sites a { display: block; float: left; padding: 3px; -webkit-box-sizing: border-box; box-sizing: border-box; color: #eee; text-decoration: none; text-shadow: 0 0 2px rgba(0,0,0,0.5);
}
#sites a i{ display: block; font-size: 13px; text-align: center;
}
#sites li a:hover { background: -webkit-linear-gradient(top, #352D2B, #1D1B18); background: linear-gradient(top, #352D2B, #1D1B18);
}
#sites li a:active{ background: -webkit-linear-gradient(top, #3C917B, #306154); background: linear-gradient(top, #3C917B, #306154); border-color: #292929 #222 #222; border-radius: 3px;
}
#sites li.active{ background: linear-gradient(top, #325B4F, #243D36); border-color: #3C917B #367B69 #367B69;
}
#sites .title { width: 70%;
}
#sites .start,#sites .restart { width: 15%;
}
![Tomcat chrome extension UI - Script Codes](http://shots.codepen.io/aurer/pen/bApri-512.jpg)
Developer | Aurer |
Username | aurer |
Uploaded | August 03, 2022 |
Rating | 3 |
Size | 2,979 Kb |
Views | 38,456 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
CSS cube experiment | 3,172 Kb |
JS Gradient | 3,400 Kb |
A responsive table | 3,354 Kb |
ERC Search panels mockup | 4,970 Kb |
Laravel AutoSchema Mockup | 2,191 Kb |
A Pen by Aurer | 3,919 Kb |
Pagination | 2,428 Kb |
Letter fountain | 2,607 Kb |
Fixed banners and parallax backgrounds | 3,526 Kb |
Learning canvas drawing | 2,204 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Responsive Boxes without Images | Andymcfee | 4,120 Kb |
A Pen by Brendan Skousen | Bskousen | 2,954 Kb |
CSS3 Snow Animation | NickyCDK | 1,695 Kb |
Pure CSS Tooltips | Mobius1 | 2,271 Kb |
Css3 slide | Nakome | 3,190 Kb |
Realistic Buttons | Stoypenny | 2,248 Kb |
CSS Infinite 360 | APinix | 5,564 Kb |
Vanilla modal window | Jasonhowmans | 3,554 Kb |
A vuejs widget | Chrgl86 | 2,869 Kb |
A Pen by Huan Nghiem | Nightshade | 10,646 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!