Skip to content
Please note that GitHub no longer supports old versions of Firefox.

We recommend upgrading to the latest Safari, Google Chrome, or Firefox.

    Why GitHub?
                          
                        
    Business
    Explore
                          
                        
    Marketplace
    Pricing
                           
                        

Sign in
Sign up

2
66

    56

BNDong/Cnblogs-Theme-SimpleMemory
Code
Issues 0
Pull requests 0
Projects 0
Insights
Join GitHub today

GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.
Cnblogs-Theme-SimpleMemory/css/menu_bubble.css
Fetching contributors…
Cannot retrieve contributors at this time.
258 lines (230 sloc) 4.95 KB
html, 
.container, 
.content-wrap {
	width: 100%;
	height: 100%;
}

body{
	width: 100%;
}

.container {
	background: #373a47;
}

.content-wrap {
    -webkit-overflow-scrolling: touch;
    -webkit-transition: -webkit-transform 0.4s;
    transition: transform 0.4s;
    position: fixed;
    width: 100%;
    height: 101%;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.3);
    z-index: 999;
	display: none;
}

.content {
	position: relative;
	background: #b4bad2;
}

.content::before {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.3);
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.4s, -webkit-transform 0s 0.4s;
	transition: opacity 0.4s, transform 0s 0.4s;
	-webkit-transform: translate3d(100%,0,0);
	transform: translate3d(100%,0,0);
}

/* Menu Button */
.menu-button {
    position: fixed;
    z-index: 1000;
    margin: 1em;
    padding: 0;
    width: 90px;
    height: 35px;
    text-indent: 2.5em;
    background: transparent;
    top: 10px;
    left: 10px;
    outline: none;
    cursor: pointer;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 3px;
    font-size: 12px;
    text-transform: uppercase;
    line-height: 35px;
    padding-right: 13px;
    text-align: center;
}

.menu-button::before {
    position: absolute;
    top: 12px;
    right: 0.5em;
    bottom: 0.5em;
    left: 13px;
    width: 11px;
    height: 9px;
    content: '';
    background: linear-gradient(#fff 20%, transparent 20%, transparent 40%, #fff 40%, #fff 60%, transparent 60%, transparent 80%, #fff 80%);
}

.menu-button:hover {
	opacity: 0.6;
}

/* Close Button */
.close-button {
    width: 16px;
    height: 16px;
    position: absolute;
    right: 1em;
    top: 1em;
    overflow: hidden;
    text-indent: 16px;
    border: none;
    z-index: 1001;
    background: transparent;
    color: transparent;
}

.close-button::before,
.close-button::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 100%;
    top: 0;
    left: 50%;
    background: rgb(150,150,150);
}

.close-button::before {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.close-button::after {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

/* Menu */
.menu-wrap {
    position: fixed;
    z-index: 1001;
    width: 280px;
    height: 100%;
    font-size: 1.15em;
    -webkit-transform: translate3d(-280px,0,0);
    transform: translate3d(-280px,0,0);
    -webkit-transition: -webkit-transform 0.4s;
    transition: transform 0.4s;
    top: 0;
    left: 0;
	overflow: auto;
    max-height: 100vh;
}

.menu {
    position: relative;
    z-index: 1000;
    padding: 220px 1em 2em 0;
    background: #000;
}

.menu,
.close-button {
	opacity: 0;
	-webkit-transform: translate3d(-160px,0,0);
	transform: translate3d(-160px,0,0);
	-webkit-transition: opacity 0s 0.3s, -webkit-transform 0s 0.3s;
	transition: opacity 0s 0.3s, transform 0s 0.3s;
	-webkit-transition-timing-function: cubic-bezier(.17,.67,.1,1.27);
	transition-timing-function: cubic-bezier(.17,.67,.1,1.27);
}

.icon-list ul , .m-icon-list ul{
	padding: 5px 5% 0;
    list-style: none;
    counter-reset: item 0;
}

.icon-list a , .m-icon-list a{
    line-height: 1.4;
    font-size: 1.4rem;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #B8B8B8 !important;
    font-family: "Merriweather","Open Sans","Microsoft Jhenghei","Microsoft Yahei",sans-serif;
    letter-spacing: 0.01rem;
}

.icon-list a {
	padding: 0.6rem 4%;
}

.m-icon-list a {
	padding: 0.3rem 4%;
}

.icon-list li:before {
    display: block;
    float: right;
    padding-right: 4%;
    padding-left: 5px;
	padding-top: 8px;
    text-align: right;
    font-size: 1.2rem;
    vertical-align: bottom;
    color: #B8B8B8;
    content: counter(item, lower-roman);
    counter-increment: item;
}

.icon-list li a:after {
	display: inline-block;
    content: " .......................................................";
    color: rgba(255,255,255,0.2);
    margin-left: 5px;
}

.menu li a:hover {
	color: #fff !important;
}

.menu li a:active, .menu li a:hover, .menu li a:visited, .menu li a:link{
    text-decoration: none !important;
}

/* Morph Shape */
.morph-shape {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	/* fill: #373a47; */
}

/* Shown menu */
.show-menu .menu-wrap,
.show-menu .content::before {
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

.show-menu .menu-wrap,
.show-menu .menu,
.show-menu .close-button,
.show-menu .morph-shape,
.show-menu .content::before {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.show-menu .menu,
.show-menu .close-button {
	opacity: 1;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-transition-delay: 0.4s;
	transition-delay: 0.4s;
	outline: none;
	cursor: pointer;
}

.show-menu .content::before {
	opacity: 1;
	-webkit-transition: opacity 0.4s;
	transition: opacity 0.4s;
}

    © 2018 GitHub, Inc.
    Terms
    Privacy
    Security
    Status
    Help

    Contact GitHub
    Pricing
    API
    Training
    Blog
    About

Press h to open a hovercard with more details.