Style Entire Popup

README.md

@@ -1,21 +1,25 @@
 PinPoint
 ========
 
-**PinPoint is a google chrome extension that allows you to makes notes on particuar points in a video so you can revisit them later with ease.**
+**PinPoint is a Google Chrome extension that allows you to makes notes on particular points in a video so you can revisit them later with ease.**
 
 ## Create PinPoints on any YouTube video
-- Drag your mouse onto the video to bring up the Sidebar and create a PinPoint
-- Drag away from the video to hide the Sidebar and see your videos as normal
+- Hover your cursor over the video to bring up the Sidebar and create a PinPoint
+- Move your cursor away from the video to hide the Sidebar and see your videos as normal
+- PinPoints can be made in the default YouTube player or the full-screen player.
 
 ## PinPoints automatically load when you revisit a video
 - The Sidebar will display all PinPoints for that video you've already made
 
 ## Includes a full-page Dashboard to see your PinPoint videos
 - A visually appealing and organized way to see your favorite videos
 
+## Easy to Disable
+- Not taking notes? Simply click 'off' in the PinPoint extension pop-up until you're ready to use it again.
+
 ## Installation
-- visit the Chrome Extension webstore and download at [PinPoint](https://chrome.google.com/webstore/detail/pinpoint/khcfpddiephakfkdhfnbbdihopbdopam?hl=en)
-- PinPoint is open-source and we are open to any improvements
+- Visit the Chrome Extension webstore and download at [PinPoint](https://chrome.google.com/webstore/detail/pinpoint/khcfpddiephakfkdhfnbbdihopbdopam?hl=en)
+- PinPoint is open-source and we welcome improvements!
 
 ## PinPoint
 * [Ali Yeysides](https://github.com/aliyeysides)

popup/popup.css

@@ -1,165 +1,63 @@
-.pinpoint-body {
-  margin:0;
-  background:rgb(37,37,37);
-  font-family: "Lato", sans-serif;
-  color: white;
-  height: 27em;
-  width:16em;
-}
-
 a {
   text-decoration: none;
   color: white;
+  padding: 5px 27px 5px 27px;
+  transition:.4s ease-in;
+}
+a:hover {
+  background-color: rgb(8,127,224);
+}
+.fa {
+  color: white;
+}
+span {
+  color:rgb(5, 210, 247);
+}
+button {
+  border: none;
+  box-shadow: none;
+  padding: 7px 30px 7px 30px;
+  color: white;
+  transition: .4s ease-in;
+  font-size: 13px;
 }
 
-/*** Delete button ***/
-.pinpoint-delete{
-  font-size: .1em;
-  float: right;
-  text-decoration: none;
-  color: black;
-  background-color: silver;
-  padding: 2px;
-  padding-left: 5px;
-  padding-right: 5px;
-  border-radius: 20px;
-  opacity: .5;
+#on {
+  background-color: rgba(36, 228, 36, 0.0);
+}
+#on:hover {
+  background-color: rgba(36, 228, 36, 0.9)
 }
 
-.pinpoint-delete:hover {
-  background-color: red;
+#off {
+  background-color: rgba(239, 8, 8, 0.0);
+}
+#off:hover{
+  background-color: rgba(239, 8, 8, 0.9);
+}
+.pinpoint-body {
+  margin:0;
+  background-size: 220%;
+  background-image: url("../map-pinpoint.png");
+  font-family: "Lato", sans-serif;
+  color: white;
+  width:16em;
+  height: 20em;
 }
 
 /*** Title section ***/
 .pinpoint-section {
   list-style: none;
-  margin-bottom: 0;
+  margin: -10px 10px 20px 10px;
   text-align: center;
   color: white;
   font-size: 2em;
+  background-color: rgba(6,6,6,0.35);
 }
 
 .pinpoint-logo {
-  margin-top: 1em;
   width: 50px;
   height: 50px;
-  background-color: white;
   padding: 20px;
   border-radius: 30%;
-  opacity: .8;
-}
-
-.pinpoint-title {
-  /*float:left;*/
-  background: rgb(27, 111, 221);
-
-}
-
-.fa {
-  color: white;
-}
-
-/*** Dropdown Menu Bar ****/
-.pinpoint-section .pinpoint-nav-icons li {
-  display: block;
-  float: left;
-}
-
-.pinpoint-nav-icons {
-  padding-left: 3.4em;
-}
-
-.pinpoint-drop-down {
-  position: absolute;
-  display: none;
-  opacity: 0;
-  visibility: hidden;
-  font-size: .7em;
-  margin-left: -4em;
-}
-
-.pinpoint-drop-down li {
-  background: #555;
-  display: block;
-  color: #fff;
-  text-shadow: 0 -1px 0 #000;
-  /*border-top: 5px solid transparent;*/
-}
-
-.pinpoint-drop-down li:hover { background: #666; }
-
-li:hover .pinpoint-drop-down {
-  display: block;
-  opacity: 1;
-  visibility: visible;
-}
-
-/**** Notes Table ****/
-.pinpoint-table {
-  border-collapse: collapse;
-  table-layout: fixed;
-}
-.pinpoint-table tr td {
-  padding: 1em;
-}
-
-.pinpoint-content {
-  margin-left: 1.2em;
-}
-
-.pinpoint-time {
-  border-bottom: 3px solid transparent;
-  transition: 0.7s ease;
-  width: 0px;
-  white-space: nowrap;
-}
-.pinpoint-time:hover {
-  border-bottom: 1px solid rgb(56, 249, 3);
-  width:20%;
-}
-
-tr:nth-child(odd) {
-  background-color:rgb(48, 48, 48);
-  display: block;
-
-}
-
-.pinpoint-all-notes {
-  width: 20em;
-  max-height: 15em;
-  font-size: 1.2em;
-  overflow: auto;
-  margin-top: 1em;
-}
-
-.pinpoint-note_info {
-  word-wrap: break-word;
-  max-width: 18em;
-  min-width: 18em;
-}
-
-/*****Note Form*****/
-.pinpoint-note {
-  margin-top: 0;
-  width:100%;
-  height: 5em;
-  background-color: transparent;
-  border: 1px;
-  font-size: 1.5em;
-}
-.pinpoint-save {
-  border-top: 1px solid #96d1f8;
-  margin-bottom: 1em;
-  padding: 10px 20px;
-  color: white;
-  text-decoration: none;
-  vertical-align: middle;
-}
-
-.pinpoint-create {
-  margin-left: 8.2em;
-}
-
-.pinpoint-save {
-  margin-left: 8.2em;
 }

popup/popup.html

@@ -12,10 +12,8 @@
   </head>
   <body class="pinpoint-body">
     <section class = "pinpoint-section">
+      <h2 class="pinpoint-title"><span>Pin</span>Point</h2>
       <img class="pinpoint-logo"src="/../PP_logo.png">
-      <div class="pinpoint-title-bar">
-        <h2 class="pinpoint-title">PinPoint</h2>
-      </div>
       <a id="dash-link" href="#">Dashboard</a></li><br>
     </ul>
     <div>