码农笔录博客源码
Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.
 
 
 
 
 

377 рядки
5.6 KiB

/* Plugin: jSide Menu (Responsive Side Menu)
* Frameworks: jQuery 3.3.1 & Material Design Iconic Font 2.0
* Author: Asif Mughal
* GitHub: https://github.com/CodeHimBlog
* URL: https://www.codehim.com
* License: MIT License
* Copyright (c) 2018 - Asif Mughal
*/
/* File: jquery.jside-menu.css */
@font-face {
font-family: 'Helvetica Neue';
font-style: normal;
font-weight: 300;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/*src: local('Helvetica Neue'), local('HelveticaNeue'), url(http://themes.googleusercontent.com/licensed/font?kit=Lx1xfUTR4qFjwg0Z_pb900DGSpWewu0sZH-jqLz8Q00) format('truetype');*/
}
*{ margin: 0;
padding: 0;
}
body{
font-family: 'Helvetica Neue';
font-weight: 300;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
:root{
--skin-hover: rgba(0, 0, 0, 0.1);
--skin-color: rgba(255, 255, 255, 0.9);
}
.default-skin{
font-family: 'Helvetica Neue';
font-weight: 300;
font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
--skin: #2a2a2e;
--skin-hover: #2098D1;
--skin-color: rgba(255, 255, 255, 0.8);
}
.light-skin{
--skin: #f0f0f0;
--skin-hover: #ddd;
--skin-color: #232323;
}
.menubar{
width: 100%;
height: 40px;
display: block;
background: var(--skin);
color: var(--skin-color);
line-height: 48px;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
}
.menu-trigger{
position: absolute;
-webkit-appearance: none;
border: 0;
outline: 0;
background: transparent;
top: 5px;
padding: 0 5px;
color: var(--skin-color);
cursor: pointer;
-webkit-tap-highlight-color: rgba(0, 0, 0, .2);
}
.menu-trigger:hover{
opacity: 0.8;
-webkit-opacity: 0.8;
}
.menu-trigger:before{
font-family: 'Material-Design-Iconic-Font';
content: '\f197';
font-size: 22pt;
}
.menu-trigger.left{
left: 35px;
}
.menu-trigger.right{
right: 20px;
}
.sticky{
position: fixed;
top: 0;
left: 0;
}
.menu-container{
overflow: auto;
display: block;
top: 120px;
}
.position-left{
left: -270px;
}
.position-right{
right: -270px;
}
.position-left.open{
left: 0;
}
.position-right.open{
right: 0;
}
.menu-container,
.menu-head,
.menu-left,
.menu-left.open
.menu-right,
.menu-right.open{
transition: .4s;
-webkit-transition: .4s;
-moz-transition: .4s;
-ms-transition: .4s;
}
.menu-container,
.menu-head{
background: var(--skin);
position: fixed;
z-index: 100;
width: 270px;
}
.menu-head .layer{
background: rgba(0, 0, 0, 0.2);
display: block;
padding: 15px;
}
.menu-head{
height: 120px;
box-sizing: border-box;
margin: 0px;
top: 0;
}
.menu-items {
list-style: none;
font-size: 14px;
}
.dropdown-heading,
.menu-items li a{
text-decoration: none;
padding: 12px 12px 12px 45px;
display: block;
color: var(--skin-color);
border-bottom: 1px dotted rgba(255, 255, 255, 0.050);
margin: 0;
cursor: pointer;
user-select: none;
}
.dropdown-heading:hover,
.menu-items li a:hover{
background: var(--skin-hover);
}
@keyframes fadeIn{
from{
opacity: 0;
-webkit-opacity: 0;
}
to{
opacity: 1;
-webkit-opacity: 1;
}
}
-webkit-@keyframes fadeIn{
from{
opacity: 0;
-webkit-opacity: 0;
}
to{
opacity: 1;
-webkit-opacity: 1;
}
}
.item-icon{
margin: 0 25px 0 0;
display: inline;
width: 32px;
height: 32px;
line-height: 32px;
position: absolute;
font-size: 15pt;
margin: 5px;
text-align: center;
color: var(--skin-color);
}
/* Dropdowns */
.has-sub ul{
list-style: none;
overflow: hidden;
height: 0px;
transition: .360s;
background: #f2f9f9;
}
.has-sub ul li a{
display: block;
padding: 12px 33px;
border-bottom: 0;
font-size: 13px;
color: #444;
transition: .1s;
-webkit-transition: .1s;
border-bottom: 1px dotted #e1e1e1;
}
.has-sub ul li a:hover{
background: #dedede;
transition: .1s;
-webkit-transition: .1s;
}
.has-sub span{
display: block;
box-sizing: border-box;
}
.has-sub i.arrow{
float: right;
margin-right: 10px;
transition: 0.360s;
font-size: 16px;
}
.has-sub .arrowdown{
transform: rotateZ(180deg);
-webkit-transform: rotateZ(180deg);
-moz-transform: rotateZ(180deg);
transition: 0.360s;
-webkit-transition: 0.360s;
-moz-transition: 0.360s;
}
.col{
display: table;
}
.row{
display: table-cell;
}
.for-name {
max-width: 140px;
padding: 10px;
color: var(--skin-color);
}
.for-pic {
max-width: 70px;
}
.profile-pic img{
width: 60px;
height: 60px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.01);
object-fit: cover;
}
.menu-head h3 {
top: -8px;
font-size: 13pt;
font-weight: 400;
}
.tagline,
.menu-head h3{
display: block;
position: relative;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tagline{
font-size: 11px;
bottom: 5px;
display: block;
}
/* Dim background effect */
.dim-overlay{
display: none;
}
.dim-overlay:before {
content: "";
background-color: rgba(0, 0, 10, .4);
height: 100vh;
left: 0;
position: fixed;
top: 0;
width: 100%;
overflow: hidden;
z-index: 2;
}
.logo{
display: block;
text-align: center;
margin-left: auto;
margin-right: auto;
font-size: 22px;
}
.logo img{
width: 130px;
margin-top: 10px;
height: auto;
}
.logo a{
text-decoration: none;
color: var(--skin-color);
}
.logo a:hover{
color: var(--skin-hover);
}