close button css

2 years ago · 8b3adf55e0
parent 7e9b729a33
commit 8b3adf55e0
3 changed files with 44 additions and 3 deletions
--- a/index.html
+++ b/index.html
@ -16,8 +16,15 @@
    </head>
    <body>
        <div id="title-container">
-            <div id="title-sub-container">
-                <p id="title" class="nosel">FileKade</p>
+            <div id="title-container-wrapper">
+                <div id="title-sub-container">
+                    <p id="title" class="nosel">FileKade</p>
+                </div>
+                <div id="title-controls-container">
+                    <div class="close-button-wrapper">
+                        <div id="close-window" class="close-button"></div>
+                    </div>
+                </div>
            </div>
        </div>

--- a/styles/modal.css
+++ b/styles/modal.css
@ -95,6 +95,7 @@
    display: block;
    z-index: 200;
    position: relative;
+    cursor: pointer;
 }
 .close-button:before, .close-button:after {
    content: '';
--- a/styles/styles.css
+++ b/styles/styles.css
@ -28,6 +28,12 @@ body {
    to {transform: translateY(0);}
 }

+@keyframes fade {
+    0% {background-color: #5d60ca;}
+    50% {background-color: #af2188;}
+    100% {background-color: #5d60ca;}
+}
+
 #title {
    font-family: 'Nunito', sans-serif;
    margin: 0 0;
@ -41,11 +47,13 @@ body {
    -webkit-user-select: none;
 }

-#title-sub-container {
+#title-sub-container, #title-controls-container, #title-container-wrapper {
    padding: 0 0;
    margin: 0 0;
 }

+#title-container-wrapper {position: relative;}
+
 #title-container {
    position: fixed;
    top: -5px;
@ -58,6 +66,31 @@ body {
    -webkit-app-region: drag;
 }

+#title-controls-container {
+    font-family: 'Nunito', sans-serif;
+    right: 10px;
+    position: absolute;
+    top: -2px;
+    font-size: 20px;
+}
+
+#title-controls-container > * {
+    display: inline-block;
+    padding: 0 0;
+    margin: 0 5px;
+}
+
+#close-window {
+    top: -1px;
+    cursor: pointer!important;
+    z-index: 2;
+}
+
+#close-window:before, #close-window:after {
+    background-color: #5d60ca;
+    animation: fade 10s linear infinite;
+}
+
 .nosel {-webkit-user-select: none;}