Instantly share code, notes, and snippets.
Created
July 17, 2020 06:03
-
Save deguchi/0c584f2f9f8307493dba20b1f3e63dad to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Document</title> | |
<style> | |
body{ | |
margin: 0px; | |
} | |
.toolbar{ | |
z-index: 10; | |
position: fixed; | |
top: 0px; | |
left: 0px; | |
width: 100%; | |
height: 50px; | |
background-color: #000000; | |
display: flex; | |
flex-direction: row; | |
justify-content: center; | |
} | |
.toolbar-heading{ | |
color: #ffffff; | |
font-size: 150%; | |
padding: 10px; | |
text-transform: capitalize; | |
user-select: none; | |
} | |
#secret-checkbox, #secret-checkbox2{ | |
position: fixed; | |
background-color: white; | |
} | |
#secret-checkbox:focus ~ .toolbar > label[for='secret-checkbox'] { | |
display: none; | |
} | |
#secret-checkbox:not(:focus) ~ .toolbar > .secret-checkbox-active { | |
display: none; | |
} | |
.secret-checkbox-active:focus { | |
display: none; | |
} | |
.secret-checkbox-active > span { | |
color: #000000; | |
background-color: #ffffff; | |
} | |
#secret-checkbox2:focus ~ .toolbar > label[for='secret-checkbox2'] { | |
display: none; | |
} | |
#secret-checkbox2:not(:focus) ~ .toolbar > .secret-checkbox-active2 { | |
display: none; | |
} | |
.secret-checkbox-active2:focus { | |
display: none; | |
} | |
.secret-checkbox-active2 > span { | |
color: #000000; | |
background-color: #ffffff; | |
} | |
#secret-checkbox:focus ~ .notification-menu { | |
display: flex; | |
margin-top: 50px; | |
opacity: 1; | |
/* transform: rotate(0deg) scale(1); */ | |
box-shadow: 0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12); | |
} | |
#secret-checkbox:not(:focus) ~ .notification-menu { | |
margin-top: 0; | |
opacity: 0; | |
/* transform: rotate(0deg) scale(1); */ | |
box-shadow: none; | |
} | |
#secret-checkbox2:focus ~ .notification-menu2 { | |
display: flex; | |
margin-top: 50px; | |
opacity: 1; | |
/* transform: rotate(0deg) scale(1); */ | |
box-shadow: 0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12); | |
} | |
#secret-checkbox2:not(:focus) ~ .notification-menu2 { | |
margin-top: 0; | |
opacity: 0; | |
/* transform: rotate(0deg) scale(1); */ | |
box-shadow: none; | |
} | |
.notification-menu, .notification-menu2 { | |
position: fixed; | |
left: 35%; | |
width: 30%; | |
margin: 0 auto; | |
margin-top: -400px; | |
opacity: 0; | |
height: 300px; | |
/* transform: rotate(45deg) scale(0); */ | |
display: flex; | |
flex-direction: column; | |
transition: all 500ms ease-in-out; | |
box-shadow: 0 0 0 0; | |
} | |
.notification-item{ | |
flex: 1; | |
margin: 5px; | |
margin-left: 0px; | |
padding-left: 5px; | |
display: flex; | |
flex-direction: row; | |
transition: all 300ms ease-in-out; | |
} | |
.notification-item:hover{ | |
box-shadow: inset 3px 0px 0px #333; | |
} | |
.notification-image{ | |
flex-basis: 30%; | |
background: url("http://icons.iconarchive.com/icons/sensibleworld/starwars/512/Darth-Vader-icon.png"); | |
background-repeat: no-repeat; | |
background-size: contain; | |
background-position: center; | |
} | |
.notification-menu2 .notification-image { | |
background-image: url("https://calil.jp/public/img/download/calil_cat.png"); | |
} | |
.notification-content{ | |
padding: 0 10px; | |
flex-basis: 70%; | |
display: flex; | |
flex-direction: column; | |
} | |
.sender-name{ | |
flex-basis: 60%; | |
display: flex;font-weight: bold; | |
flex-direction: column; | |
justify-content: center; | |
} | |
.sender-timestamp{ | |
font-size: 60%; | |
} | |
</style> | |
</head> | |
<body> | |
<input type="checkbox" id="secret-checkbox" /> | |
<input type="checkbox" id="secret-checkbox2" /> | |
<div class="toolbar"> | |
<label for="secret-checkbox"> | |
<span class="toolbar-heading trigger"> | |
1 | |
</span> | |
</label> | |
<label class="secret-checkbox-active"> | |
<span class="toolbar-heading trigger"> | |
1 | |
</span> | |
</label> | |
<label for="secret-checkbox2"> | |
<span class="toolbar-heading trigger"> | |
2 | |
</span> | |
</label> | |
<label class="secret-checkbox-active2"> | |
<span class="toolbar-heading trigger"> | |
2 | |
</span> | |
</label> | |
</div> | |
<div class="notification-menu"> | |
<div class="notification-item"> | |
<div class="notification-image"></div> | |
<div class="notification-content"> | |
<div class="sender-name"> | |
<span>Luke Skywalker</span> | |
</div> | |
<div class="sender-timestamp"> | |
<span>Yesterday at 16:00hrs</span> | |
</div> | |
</div> | |
</div> | |
<div class="notification-item"> | |
<div class="notification-image"></div> | |
<div class="notification-content"> | |
<div class="sender-name"> | |
<span>Han Solo</span> | |
</div> | |
<div class="sender-timestamp"> | |
<span>Yesterday at 16:00hrs</span> | |
</div> | |
</div> | |
</div> | |
<div class="notification-item"> | |
<div class="notification-image"></div> | |
<div class="notification-content"> | |
<div class="sender-name"> | |
<span>Kylo Ren</span> | |
</div> | |
<div class="sender-timestamp"> | |
<span>Yesterday at 16:00hrs</span> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="notification-menu2"> | |
<div class="notification-item"> | |
<div class="notification-image"></div> | |
<div class="notification-content"> | |
<div class="sender-name"> | |
<span>Ryuuji Yoshimoto</span> | |
</div> | |
<div class="sender-timestamp"> | |
<span>Yesterday at 16:00hrs</span> | |
</div> | |
</div> | |
</div> | |
<div class="notification-item"> | |
<div class="notification-image"></div> | |
<div class="notification-content"> | |
<div class="sender-name"> | |
<span>Tomonori Kuroda</span> | |
</div> | |
<div class="sender-timestamp"> | |
<span>Yesterday at 16:00hrs</span> | |
</div> | |
</div> | |
</div> | |
<div class="notification-item"> | |
<div class="notification-image"></div> | |
<div class="notification-content"> | |
<div class="sender-name"> | |
<span>Satoshi Deguchi</span> | |
</div> | |
<div class="sender-timestamp"> | |
<span>Yesterday at 16:00hrs</span> | |
</div> | |
</div> | |
</div> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment