close button css

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

@ -16,9 +16,16 @@
</head> </head>
<body> <body>
<div id="title-container"> <div id="title-container">
<div id="title-container-wrapper">
<div id="title-sub-container"> <div id="title-sub-container">
<p id="title" class="nosel">FileKade</p> <p id="title" class="nosel">FileKade</p>
</div> </div>
<div id="title-controls-container">
<div class="close-button-wrapper">
<div id="close-window" class="close-button"></div>
</div>
</div>
</div>
</div> </div>
<div id="master"> <div id="master">

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

@ -28,6 +28,12 @@ body {
to {transform: translateY(0);} to {transform: translateY(0);}
} }
@keyframes fade {
0% {background-color: #5d60ca;}
50% {background-color: #af2188;}
100% {background-color: #5d60ca;}
}
#title { #title {
font-family: 'Nunito', sans-serif; font-family: 'Nunito', sans-serif;
margin: 0 0; margin: 0 0;
@ -41,11 +47,13 @@ body {
-webkit-user-select: none; -webkit-user-select: none;
} }
#title-sub-container { #title-sub-container, #title-controls-container, #title-container-wrapper {
padding: 0 0; padding: 0 0;
margin: 0 0; margin: 0 0;
} }
#title-container-wrapper {position: relative;}
#title-container { #title-container {
position: fixed; position: fixed;
top: -5px; top: -5px;
@ -58,6 +66,31 @@ body {
-webkit-app-region: drag; -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;} .nosel {-webkit-user-select: none;}

Loading…
Cancel
Save