JezK
Edit File: gmk.css
body { background-color: rgb(220, 220, 220); padding: 0; margin: 0; font-size: 16px; font-family: 'Barlow', sans-serif; } .clearfix:after { content: ""; display: block; height: 0; width: 0; clear: both; } .admin-panel { width: 990px; margin: 50px auto; } .slidebar { width: 20%; min-height: 690px; float: left; border-right: 1px solid rgb(235, 235, 235); background-color: rgb(247, 247, 247); } .slidebar .logo { height: 145px; border-bottom: 1px solid rgb(235, 235, 235); } .slidebar ul { padding: 0; margin: 0; } .slidebar li { list-style-type: none; margin: 0; position: relative; } .slidebar li:before { content: ""; font-family: 'Pacifico', sans-serif; speak: none; font-weight: normal; font-variant: normal; text-transform: none; position: absolute; display: block; line-height: 40px; color: rgb(102, 102, 102); right: 20px; -webkit-font-smoothing: antialiased; } .slidebar li:nth-child(1):before {content: "G";} .slidebar li:nth-child(2):before {content: "\64";} .slidebar li:nth-child(3):before {content: "\62";} .slidebar li:nth-child(4):before {content: "\65";} .slidebar li:nth-child(5):before {content: "\74";} .slidebar li:nth-child(6):before {content: "\66";} .slidebar li:nth-child(7):before {content: "\67";} .slidebar li:nth-child(8):before {content: "\68";} .slidebar li:nth-child(9):before {content: "\69";} .slidebar li:nth-child(10):before {content: "\6a";} .slidebar li:nth-child(11):before {content: "\75";} .slidebar ul li { color: rgb(140, 140, 140); text-decoration: none; font-size: 15px; line-height: 40px; box-sizing: border-box; border-bottom: 1px solid rgb(235, 235, 235); display: block; box-shadow: inset 0 1px 0 rgb(255, 255, 255); text-indent: 20px; text-transform: capitalize; } .slidebar li:hover { background-color: rgb(255, 255, 255); box-shadow: 1px 0 0 rgb(255, 255, 255), inset 5px 0 0 -1px rgb(234, 83, 63); } li.active-menu { background-color: rgb(255, 255, 255); box-shadow: 1px 0 0 rgb(255, 255, 255), inset 5px 0 0 -1px rgb(234, 83, 63) !important; } .main { float: left; width: 79%; height: 690px; background-color: rgb(255, 255, 255); position: relative; font-family: 'Barlow', sans-serif; } .main .topbar { border-bottom: 1px solid rgb(235, 235, 235); margin: 0; padding: 0; } .topbar li { float: right; list-style: none; } .topbar li:first-child { font-family: 'Barlow', sans-serif; font-size: 12px; float: right; margin: 10px 15px 10px 0; } dd, li { margin-bottom: 0px; } .topbar a { font-family: 'Barlow', sans-serif; display: block; line-height: 50px; width: 50px; text-align: center; text-decoration: none; color: rgb(102, 102, 102); border-left: 1px solid rgb(235, 235, 235); } .topbar a:hover { background-color: rgb(247, 247, 247); } .topbar li:first-child a { border: none; border-right: 1px solid rgb(235, 235, 235); } .mainContent h4 { line-height: 1; font-size: 18px; margin: 1.3em 0 1em; } .mainContent p { margin-left: 18px; } .mainContent > div { width: calc(100% - 38px); position: absolute; opacity: 0; -webkit-transition: opacity 200ms linear; -moz-transition: opacity 200ms linear; -ms-transition: opacity 200ms linear; transition: opacity 200ms linear; } .mainContent > div:first-child { opacity: 1; } .mainContent > div:target { opacity: 1; } .mainContent h2 { margin: 15px 17px 15px 17px; color: rgb(234, 83, 63); font-size: 20px; } .widget-box { border: 1px solid rgb(235, 235, 235); width: calc(100% - 74px); display: inline-block; margin: 10px 0 0 18px; padding: 0 18px; } .monitor ul { float: left; padding: 0; margin: 0 31px 0 17px; } .monitor li { list-style: none; font: 600 14px/28px 'Barlow', sans-serif; color: rgb(102, 102, 102); text-transform: capitalize; } .monitor li a { color: rgb(102, 102, 102); text-transform: capitalize; text-decoration: none; } .monitor li:first-child { border-bottom: 1px dotted rgb(153, 153, 153); } .discussions .comments {color: rgb(27, 106, 173);} .discussions .approved {color: rgb(105, 174, 48);} .discussions .pending {color: rgb(246, 129, 15);} .discussions .spam {color: rgb(243, 47, 47);} .monitor .count { color: rgb(27, 106, 173); text-align: right; font-weight: 600; margin-right: 15px; min-width: 25px; display: inline-block; } .monitor p { color: rgb(128, 128, 128); margin: 28px 0 18px 17px; display: block; font-weight: 600; font-size: 12px; } .monitor p a { text-decoration: none; color: rgb(27, 106, 173); } .widget-box form { margin: 0 20px 0 13px; } .widget-box input[type="text"], .widget-box textarea { display: block; width: 100%; -moz-box-sizing: border-box; box-sizing: border-box; padding: 15px 5px; margin: 0 0 7px 0; background-color: rgb(246, 246, 246); outline: none; border: none; } .widget-box input[type="text"]::-webkit-input-placeholder {font-size: 14px;} .widget-box input[type="text"]:-moz-input-placeholder {font-size: 14px;} .widget-box input[type="text"]::-moz-input-placeholder {font-size: 14px;} .widget-box input[type="text"]:-ms-input-placeholder {font-size: 14px;} .widget-box button { margin-top: 13px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; cursor: pointer; text-align: center; line-height: 30px; padding: 0; } .widget-box .save, .widget-box .delet { font-family: 'Barlow', sans-serif; width: 37px; background: -webkit-linear-gradient(top, rgb(246, 246, 240), rgb(232, 232, 232)); background: -moz-linear-gradient(top, rgb(246, 246, 240), rgb(232, 232, 232)); background: -ms-linear-gradient(top, rgb(246, 246, 240), rgb(232, 232, 232)); background: linear-gradient(top, rgb(246, 246, 240), rgb(232, 232, 232)); border: 1px solid rgb(229, 229, 229); color: rgb(102, 102, 102); float: left; margin-right: 5px; } .widget-box .save:hover, .widget-box .delet:hover { background: -webkit-linear-gradient(top, rgb(232, 232, 232), rgb(246, 246, 240)); background: -moz-linear-gradient(top, rgb(232, 232, 232), rgb(246, 246, 240)); background: -ms-linear-gradient(top, rgb(232, 232, 232), rgb(246, 246, 240)); background: linear-gradient(top, rgb(232, 232, 232), rgb(246, 246, 240)); } .widget-box .save:active, .widget-box .delet:active { background: -webkit-linear-gradient(top, rgb(228, 228, 228), rgb(210, 210, 210)); background: -moz-linear-gradient(top, rgb(228, 228, 228), rgb(210, 210, 210)); background: -ms-linear-gradient(top, rgb(228, 228, 228), rgb(210, 210, 210)); background: linear-gradient(top, rgb(228, 228, 228), rgb(210, 210, 210)); } .widget-box .submit { float: right; color: #fff; font-size: 14px; background: -webkit-linear-gradient(top, rgb(245, 101, 82), rgb(234, 83, 63)); background: -moz-linear-gradient(top, rgb(245, 101, 82), rgb(234, 83, 63)); background: -ms-linear-gradient(top, rgb(245, 101, 82), rgb(234, 83, 63)); background: linear-gradient(top, rgb(245, 101, 82), rgb(234, 83, 63)); padding: 5px 15px; margin: 0 0 18px 0; outline: none !important; } .widget-box .submit:hover { background: -webkit-linear-gradient(top, rgb(220, 85, 70), rgb(210, 65, 53)); background: -moz-linear-gradient(top, rgb(220, 85, 70), rgb(210, 65, 53)); background: -ms-linear-gradient(top, rgb(220, 85, 70), rgb(210, 65, 53)); background: linear-gradient(top, rgb(220, 85, 70), rgb(210, 65, 53)); } .logo a { width: 88px; color: #ec5642; height: 88px; display: inline-block; position: relative; left: 50%; top: 50%; margin: -45px 0 0 -45px; border: 1px solid rgb(200, 200, 200); border-radius: 50%; background-color: rgb(214, 214, 214); outline: none; } .logo a:before { content: "G"; width: 70px; height: 70px; font: 50px/70px 'Pacifico', sans-serif; text-align: center; position: absolute; top: 8px; left: 8px; border-radius: 35px; border: 1px solid rgb(210, 210, 210); display: inline-block; background: -webkit-linear-gradient(top, rgb(255, 255, 255), rgb(245, 245, 245)); background: -moz-linear-gradient(top, rgb(255, 255, 255), rgb(245, 245, 245)); background: -ms-linear-gradient(top, rgb(255, 255, 255), rgb(245, 245, 245)); background: linear-gradient(top, rgb(255, 255, 255), rgb(245, 245, 245)); } .statusbar { position: absolute; bottom: 0; border-top: 1px solid rgb(235, 235, 235); width: 100%; padding: 0; margin: 0; } .statusbar li { list-style: none; } .statusbar a { color: rgb(102, 102, 102); text-decoration: none; text-align: center; display: block; } .statusbar a:hover { background-color: rgb(247, 247, 247); } .statusbar .profiles-setting, .statusbar .logout { float: right; } .statusbar .profiles-setting a, .statusbar .logout a { font-family: 'Barlow', sans-serif; line-height: 50px; border-left: 1px solid rgb(235, 235, 235); padding: 0 15px; font-size: 12px; }