Merge pull request #728 from deanoemcke/hotfix/snoozy-redesign

Hotfix/snoozy redesign
greatsuspender · Aug 24, 2018 · 60f67a0 · 60f67a0
2 parents 711ce3b + 9bca505
commit 60f67a0
Show file tree

Hide file tree

Showing 11 changed files with 420 additions and 511 deletions.
diff --git a/src/about.html b/src/about.html
@@ -3,6 +3,7 @@
 
 <head>
 	<link type="text/css" href="css/style.css" rel="stylesheet">
+	<link type="text/css" href="css/donate.css" rel="stylesheet">
 	<script type="text/javascript" src="js/about.js"></script>
 	<title data-i18n="__MSG_ext_extension_name__ - __MSG_html_about_title__"></title>
 </head>

diff --git a/src/css/donate.css b/src/css/donate.css
@@ -0,0 +1,98 @@
+.btn {
+    background: #3477db;
+    color: #fff;
+    border-radius: 3px;
+    height: 40px;
+    line-height: 40px;
+    padding: 0 20px;
+    display: inline-block;
+    border: 0;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+
+    min-width: 80px;
+    text-align: center;
+}
+.btn:hover {
+    background: #5c9dfe;
+    text-decoration: none;
+}
+.donateButtons {
+    overflow: hidden;
+}
+.donateButtons > * {
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol';
+    margin: 0 7px 0 0;
+    float: left;
+}
+.donateButtons > *:last-child {
+    margin: 0;
+}
+
+.donationToggle {
+    margin-top: 15px;
+}
+
+#dudePopup {
+    position: fixed;
+    width: 90px;
+    left: 30px;
+    bottom: -240px;
+}
+#dudePopup.poppedup {
+    animation-name: slideToTop;
+    animation-duration: 1s;
+    animation-timing-function: ease;
+    animation-iteration-count: 1;
+    animation-direction: normal;
+    animation-delay: 0.5s;
+    animation-play-state: running;
+    animation-fill-mode: forwards;
+}
+
+.donateBubble {
+    width: 365px;
+    padding: 15px 10px;
+    background: #fff;
+    border-radius: 4px;
+    bottom: 35px;
+    left: 133px;
+    position: fixed;
+    text-align: center;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+    opacity: 0;
+}
+.donateBubble:before {
+    content: '';
+    position: absolute;
+    top: 19px;
+    left: -14px;
+    border-style: solid;
+    border-width: 15px 15px 15px 0;
+    border-color: transparent #fff;
+    display: block;
+    width: 0;
+    filter: drop-shadow(-2px 0px 0 rgba(0, 0, 0, 0.1));
+}
+.donateBubble .donateButtons {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 10px;
+}
+.donateBubble.fadeIn {
+    animation: fadein 0.7s;
+    animation-fill-mode: forwards;
+    animation-delay: 1.5s;
+}
+@keyframes slideToTop {
+    0% {
+        bottom: -240px;
+    }
+    100% {
+        bottom: 10px;
+        z-index: 1000000;
+    }
+}