Skip to content

Styling #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
lombold wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Styling #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
9d6f37e
Added gitignore to exclude intellij project folder
Jul 25, 2019
61d7027
WIP: Changed the documents structure to make it easier to design
Jul 25, 2019
8707ebb
Delete clipboard
Dec 27, 2019
3f1c7c2
Add styles
Dec 27, 2019
c7f47db
Change structure of generated dom elements
Dec 27, 2019
c102352
Adapt new styles from the css
Dec 27, 2019
f2f743c
Change layout and add synchronized AS IP and detail list
Feb 14, 2020
274629b
Prevents vertical scroll bar
Feb 16, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
.idea/
Binary file removed icons/clipboard.png
View file
Open in desktop
Binary file not shown.
187 changes: 187 additions & 0 deletions popup.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,187 @@
/*----------Tags----------------------------*/

body {
margin: 0;
background-color: #fafafa;
}

a {
text-decoration: none;
}

ul {
list-style-type: none;
padding-left: 0;
margin: 0;
}

/*----------Layout----------------------------*/

.content {
height: auto;
width: 600px;
max-height: 400px;
max-width: 800px;
}

.container-row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: stretch;
align-items: stretch;
}

.container-column {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: stretch;
align-content: stretch;
align-items: stretch;
}

.container-scroll {
overflow-y: scroll;
}

.container-no-scrollbar::-webkit-scrollbar {
display: none;
}

.col {
order: 0;
width: 50%;
flex: 1 1 auto;
align-self: auto;
}

/*----------Connector-Canvas--------------------------*/
.connector {
flex: 0 0 20px;
width: 20px;
}

/*----------AS Buttongroup----------------------------*/

.asn-links {
padding: 8px;
}

.background-gray {
background-color: #dddddd;
}

ul#asn {
box-shadow: #bbbbbb 2px 2px;
border-radius: 3px;
}

/*-ASN Link-*/

a.img-link {
vertical-align: baseline;
width: 100%;
display: flex;
padding: 7px 8px;
transition: all 0.3s, box-shadow 0.2s;
color: #333333;
box-sizing: border-box;
background-color: #fafafa;
}

ul > li:first-child > a.img-link {
border-radius: 3px 3px 0 0;
}

ul > li:last-child > a.img-link {
border-radius: 0 0 3px 3px;
}

a.img-link > img {
vertical-align: middle;
width: auto;
height: 25px;
margin-right: 5px;
align-self: center;
}

a.img-link > span {
align-self: center;
}

a.img-link:hover {
cursor: pointer;
background-color: #e1e1e1;
box-shadow: #333 0px 0px 2px -1px inset;
}

a.img-link > img:hover {

}

/*----------Requests----------------------------*/
.asn-requests {
color: #666666;
border-top: 1px solid #dddddd;
}

.asn-requests > ul > li {
padding: 5px 0px; /* 5 + 3 px = 8px = same as asn-details */
}

.asn-requests > ul > li > ul > li {
padding: 3px 15px 3px 3px;
}

.asn-requests > ul > li:last-child > ul > li:last-child {
padding-bottom: 6px;
}

.asn-hostname {
color: #333333;
font-weight: bold;
word-break: break-word;
}

/*----------AS Details----------------------------*/

table.asn-details {
border-collapse: collapse;
width: 100%;
}

.asn-details .col-name {
width: 40px;
font-size: 0.8em;
text-align: right;
padding: 3px 5px;
}

.asn-details tr:first-child .col-name, .asn-details tr:first-child .col-value{
padding-top: 8px;
}

.asn-details tr:last-child .col-name, .asn-details tr:last-child .col-value {
padding-bottom: 8px;
}

.asn-details .col-value {
font-weight: bold;
}

.asn-details > li {
margin-top: 4px;
padding-bottom: 4px;
border-bottom: 1px solid #dddddd;
}

.asn-details > li:first-child {
margin-top: 0;
}

.asn-details > li:last-child {
padding-bottom: 0;
border-bottom: none;
}
82 changes: 26 additions & 56 deletions popup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,60 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<head>
<meta charset="utf-8">
<style>


html,body {
width: 620px;
padding:0;
font-family:arial;
font-size:15px;
}
body {margin: 0;text-size-adjust: 100%; }
*, *::after, *::before { box-sizing: border-box;}

a{ font-weight:500; text-decoration:none; display:block;color:#000; margin-bottom:5px; border-bottom:#EEE 1px solid}
h1, h2 {
border-bottom: 1px solid;
}

img{ width:18px; cursor:pointer; margin-left:5px;}

.flex {display: flex; flex-wrap: wrap;justify-content: center;}
.flex > .col {flex: 1 1 0;text-align: center;display: flex;flex-direction: column;align-items: center;max-width: 380px;margin: 8px;}

.flex a{font-size:12px;}

.outer{ margin: 15px 15px; padding:0;}
.header{ font-size:16px; border-bottom:1px solid #000;}
.header .txt{font-size:24px;}
.header #asn a{display: inline-block;}
.header #asn img.copy{ float:left}

</style>

</head>
<body>
<div class="outer">
<div style="float:right;" id="version"></div>
<div class="header">
<span class="txt">ASN: </br></span>
<span id="asn"></span>
</div>


<div class="flex">
<div class="col">
<h3>ASN</h3>
<div id="asns"></div>
</div>
<div class="col">
<h3>Requests</h3>
<div id="ips"></div>
</div>
</div>
</div>
<script src="popup.js"></script>
</body>
<link rel="stylesheet" type="text/css" href="popup.css">
</head>
<body>
<div class="content container-row">
<div class="col container-scroll padding background-gray asn-links">
<ul id="asn">

</ul>
</div>
<div class="col container-scroll container-no-scrollbar synced">
<table id="asns" class="asn-details">

</table>
</div>
<canvas class="connector"></canvas>
<div class="col container-scroll synced asn-requests">
<ul id="ips">

</ul>
</div>
</div>

<div style="" id="version"></div>
<script src="popup.js"></script>
</body>
</html>
Loading