close button css

modals
Kit Kasune 3 years ago
parent 7e9b729a33
commit 8b3adf55e0
  1. 11
      index.html
  2. 1
      styles/modal.css
  3. 35
      styles/styles.css

@ -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>

@ -95,6 +95,7 @@
display: block;
z-index: 200;
position: relative;
cursor: pointer;
}
.close-button:before, .close-button:after {
content: '';

@ -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;}

Loading…
Cancel
Save