PHP Classes

File: assets/css/middlefinger.css

Recommend this page to a friend!
  Classes of Devin Gaul  >  PHP Show HTML Source Code  >  assets/css/middlefinger.css  >  Download  
File: assets/css/middlefinger.css
Role: Application script
Content type: text/plain
Description: Stylesheet for the context menu
Class: PHP Show HTML Source Code
Show highlighted HTML source of the current page
Author: By
Last change: Updated CSS file to match stylings in the example page.
Date: 4 years ago
Size: 8,348 bytes
 

Contents

Class file image Download
/**
 * 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;
}

For more information send a message to info at phpclasses dot org.