Skip to content
This repository was archived by the owner on Oct 28, 2022. It is now read-only.

Nav bar idea #17

Merged
merged 1 commit into from
Sep 16, 2020
Merged

Nav bar idea #17

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
148 changes: 146 additions & 2 deletions popup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,17 @@
<head>
</head>
<body>
<div class="dash">&nbsp; <b>ScratchFormat 2.2</b>&nbsp;&nbsp;&nbsp; <a href="https://scratchformat.github.io/" target="_newtab">Website</a> <div class="dropdown" style="">

<button class="dropbtn">Links</button>
<div class="dropdown-content" style="left:0;">
<a href="https://github.com/scratchformat/" target="_newtab">Github</a>
<a href="https://github.com/scratchformat/scratchformat2" target="_newtab">Source Code</a>
<a href="https://scratch.mit.edu/users/pufflegamerz" target="_newtab" class="b">@pufflegamerz</a> </div> </div>

<span class="dash">&nbsp;</span> <a class="white" href="http://petabyte.heb12.com/" target="_newtab">Pufflegamer'z Website</a> <div class="f"> <a class="white" style="float:right;" href="https://github.com/scratchformat" target="_blank">Github</a> <span style="float:right;">&nbsp</span> </div> </div>
<center>
<img src="logo.png" width="200">
<h2>ScratchFormat 2.2</h2>
<p>
Thank you for using ScratchFormat. <b>To use it, go
on a scratch comment editor and click on it.</b> The formatter
Expand All @@ -20,10 +28,146 @@ <h2>ScratchFormat 2.2</h2>
</center>
</body>
<style>
html {
body {

background-color: lightblue;
}
/*Dash*/
div.dash {
background-color:#4d97f8;
margin:0em;
color:white;
padding:0px;
padding-top:0px;
}
div.dash img{
background-color:white;
vertical-align: text-top;
}

div.dash a {
background-color:#4d97f8;
border-radius:0px;
border:0px solid #0e1633;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:20px 14px;
text-decoration:none;
}
div.dash a:hover {
background-color:#3b7cd1;
}
div.dash a:active {
position:relative;
top:1px;
}
div.dash a.white {
background-color:white;
border-radius:4px;
border:1px solid lightgray;
display:inline-block;
cursor:pointer;
color:
#3b7cd1
;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:10px 14px;
text-decoration:none;
}
div.dash a.white:hover {
background-color: lightgrey;
}
div.dash a.white:active {
position:relative;
top:1px;
}
div.dash b{
font-size:20px;
}

body {
margin:0em;
}
div.dash div.f{
padding:8px;
float:right;
}
span.dash{
border-left: 2px dashed
#3b7cd1
;
}
/*Other*/
div.te{
margin:1em;
}



/*DropDown*/
.dropbtn {
background-color:#4d97f8;
border-radius:0px;
border:0px solid #0e1633;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:20px 14px;
text-decoration:none;
}

.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
right: 0;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
border-radius:10px;
}

.dropdown-content a {
color: white;
background-color: #f0c83f;
padding: 12px 16px;
text-decoration: none;
display: block;
font-weight:bold;
border-left: 1.2px solid #bf9f00;
border-right: 1.2px solid #bf9f00;
width:134px;
}
.dropdown-content a.b {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top: 1.4px solid #3b7cd1;
border-bottom: 1.2px solid #3b7cd1;
}

.dropdown-content a:hover {background-color: #3b7cd1;}

.dropdown:hover .dropdown-content {
display: block;
}

.dropdown:hover .dropbtn {
background-color: #3b7cd1;
}
</style>
<script type="text/javascript" src="javascript.js"></script>
</html>