/**
* CSS file for middleFinger extra
*
* Copyright 2017 by demon.devin <demon.devin@gmail.com>
* Created on 12-03-2016
*
* @package middleFinger
*/
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
@import url('https://fonts.googleapis.com/css?family=Oswald:700|Lato:400,700|Raleway:400,600');
.menu {
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-size: 14px;
font-family: 'Lato', sans-serif;
color: #263238;
list-style: none;
margin: 0;
padding: 0.05em 0.25em;
border: 1px solid transparent;
border-right-color: #90A4AE;
border-top-color: #90a4ae;
border-bottom-color: #90A4AE;
border-radius: 3px;
position: absolute;
min-width: 175px;
z-index: 9999;
background: -webkit-linear-gradient(305deg, #B0BEC5, #607D8B);
background: linear-gradient(145deg, #B0BEC5, #607D8B);
box-shadow: 0 5px 20px -5px #263238;
}
.menu[hidden] {
display: block;
visibility: hidden;
opacity: 0;
transition: visibility 0s 0.3s, opacity 0.3s;
}
.move {
animation: move 0.3s;
}
@keyframes move {
0% { opacity: 0; }
}
.sublet {
background: linear-gradient(145deg, #B0BEC5, #607D8B);
width: auto;
min-width: 10em;
left: 100%;
top: -0.4em;
-webkit-transform: translateX(-0.7em);
transform: translateX(-0.7em);
-webkit-transition: opacity, width, min-width, visibility, -webkit-transform;
transition: opacity, width, min-width, visibility, -webkit-transform;
transition: transform, opacity, width, min-width, visibility;
transition: transform, opacity, width, min-width, visibility, -webkit-transform;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
-webkit-transition-duration: 0.3s, 0.25s, 0.15s, 0.15s, 0.01s;
transition-duration: 0.3s, 0.25s, 0.15s, 0.15s, 0.01s;
-webkit-transition-delay: 0.3s, 0.25s, 0.3s, 0.3s, 0.35s;
transition-delay: 0.3s, 0.25s, 0.3s, 0.3s, 0.35s;
overflow: hidden;
}
.sublet .item {
padding-left: 2em;
}
.sublet i[class*="fa-"] {
-webkit-transform: translateX(-2.25em);
transform: translateX(-2.25em);
}
.sublet.oppositeX {
right: 100%;
left: auto;
-webkit-transform: translateX(0.7em);
transform: translateX(0.7em);
}
.sublet.oppositeY {
top: auto;
bottom: -0.4em;
}
.header, .item {
padding-left: 2.5em;
padding-right: 1.5em;
padding-top: 0.3em;
padding-bottom: 0.35em;
}
.header, .divider {
margin-top: 0.25em;
margin-bottom: 0.25em;
border-bottom: 1px solid rgba(38,50,56,0.3);
}
.header {
font-weight: 700;
padding-bottom: 0.5em;
}
.item {
border-radius: 3px;
position: relative;
border: 1px solid transparent;
}
.item:not(.item--disabled):hover {
background-color: rgba(38,50,56,.9);
color: #ECEFF1;
border: 1px solid rgba(38,50,56,0.3);
}
.item:not(.item--disabled):hover .sublet {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-transition-delay: 0.2s, 0.25s, 0.2s, 0.2s, 0s;
transition-delay: 0.2s, 0.25s, 0.2s, 0.2s, 0s;
border-radius: 0 3px 3px 3px;
visibility: visible;
}
.item:last-child {
margin-bottom: 0.25em;
}
.item:first-child {
margin-top: 0.25em;
}
.item--disabled {
color: rgba(38,50,56,0.3);
}
.item--active {
-webkit-animation: flash 0.5s ease 1;
animation: flash 0.5s ease 1;
}
.menu a {
cursor: default;
color: inherit;
text-decoration: none;
display: block;
}
span.close {
font-size: 10px;
rgba(66, 66, 66, 0.75);
}
.item a span {
color: rgba(38,50,56,0.5);
float: right;
font-weight: normal;
font-family: sans-serif;
text-transform: uppercase;
margin-right: -15px;
font-size: 8px;
margin-top: 5px;
}
.item:not(.item--disabled):hover a span {
color: #ECEFF1;
}
.item:not(.item--disabled):hover .sublet a span {
color: #ECEFF1;
}
.menu [class*="fa-"] {
font-style: normal;
position: absolute;
-webkit-transform: translateX(-2em);
transform: translateX(-2em);
width: 2em;
text-align: right;
}
.menu [class*="fa-"].post {
-webkit-transform: translateY(-55%);
transform: translateY(-55%);
right: 0;
top: 50%;
}
.menu [class*="fa-"]:before {
font-family: 'FontAwesome', sans-serif;
margin-right: 0.5em;
}
@-webkit-keyframes flash {
0% {
background: rgba(255, 255, 255, 0);
}
20% {
background: rgba(255, 255, 255, 0.4);
}
}
@keyframes flash {
0% {
background: rgba(255, 255, 255, 0);
}
20% {
background: rgba(255, 255, 255, 0.4);
}
}
figure {
display: block;
margin: 0;
width: 100%;
color: #9e9e9e;
border-radius: 10px;
background: rgb(22, 22, 22);
}
figure figcaption {
display: block;
font-family: sans-serif;
padding: 5px 10px 4px 10px;
border-bottom: 1px solid #111;
border-radius: 10px 10px 0 0;
font-weight: bold;
font-variant: small-caps;
background: #111;
color: #9e9e9e;
}
.numbers {
cursor: context-menu;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.5);
}
pre,
pre * {
font: normal normal normal 1em/1.4 monospace;
}
pre {
font-size: 1em;
}
pre::-webkit-scrollbar,
code::-webkit-scrollbar,
samp::-webkit-scrollbar {
height: .5em;
background: rgba(255,255,255,0.15);
cursor: pointer;
}
pre::-webkit-scrollbar-thumb:horizontal,
code::-webkit-scrollbar-thumb:horizontal,
samp::-webkit-scrollbar-thumb:horizontal {
background: rgba(255,255,255,0.2);
-webkit-border-radius: 4px;
border-radius: 4px
cursor: pointer;
}
pre,
pre code,
pre samp {
display: block;
margin: 0;
}
pre code,
pre samp {
/* enforce white-space for IE7 */
white-space: pre;
/* enforce word-wrap for mobile safari */
word-wrap: normal;
padding: 10px;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
overflow-x: auto;
box-shadow: inset 0 1px 0 1px rgba(0, 0, 0, 0.5);
}
/* additional focus rules to provide a visual cue */
pre [contenteditable]:focus {
border-radius: 0 0 10px 0;
background: #fff;
outline: none;
background: rgb(22, 22, 22);
box-shadow: inset 0 1px 4px 1px rgba(0, 0, 0, 0.5);
}
pre.line-numbers {
position: relative;
}
pre.line-numbers code,
pre.line-numbers samp {
margin-left: 3em;
border-left: 1px solid #000;
border-bottom-right-radius: 10px;
}
pre.line-numbers > div {
display: block;
position: absolute;
background: rgb(33, 33, 33);
top: 0;
left: 0;
height: 100%;
border-radius: 0 0 0 10px;
overflow: hidden;
counter-reset: line;
}
pre.line-numbers > div > span {
display: block;
width: 2.5em;
padding: 0 0.5em 0 0;
text-align: right;
color: #777;
overflow: hidden;
counter-increment: line;
}
pre.line-numbers > div > span::before {
content: counter(line);
}
pre.line-numbers > div > span:first-child {
margin-top: 10px;
}
pre.line-numbers > div > span:nth-child(odd) {
background: #111;
}
@media print {
pre code {
overflow-x: visible;
white-space: pre-wrap;
}
pre.line-numbers div {
display: none;
}
pre.line-numbers > code,
pre.line-numbers > samp {
margin-left: 0;
}
}
/* double-up the syntax elements for cross-browser RTF-keystroke support */
pre b,
pre strong {
font-weight: normal;
color: #039;
}
pre u,
pre u b,
pre u strong {
text-decoration: none;
color: #083;
}
pre i,
pre em,
pre i *,
pre em *,
pre i * *,
pre em * * {
letter-spacing: -0.1em;
text-decoration: none;
font-style: normal;
color: #c55;
}
code span.variable {
color: #607d8b;
}
code span.variable2 {
color: #616161;
}
code span.keyword {
color: #6d4c41;
}
code span.constant {
color: #9e9e9e;
}
code span.docComment {
color: #0d47a1;
}
code span.operators {
color: #ff8a65;
}
code span.comment {
color: #33691e;
}
code span.strings {
color: #f39c12;
}
code span.tag {
color:#6d4c41;
}
code span.attribute {
color:#607d8b;
}
code span.value {
color:#616161;
}
|
Download
