123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254 |
- #page .pen_jump_menu {
- min-width: 150px;
- position: absolute;
- right: 10px;
- top: 10px;
- z-index: 100000;
- }
- #pen_section > .pen_jump_menu {
- top: 80px;
- }
- #page .pen_jump_menu h4 {
- background: #333;
- background: -ms-linear-gradient(325deg, #404040 0%, #a0a0a0 100%);
- background: linear-gradient(125deg, #404040 0%, #a0a0a0 100%);
- border-radius: 5px 20px 0 0;
- color: rgba(255,255,255,0.75);
- font-size: 12px;
- line-height: 1.5;
- margin: 0;
- padding: 5px 40px 5px 10px;
- text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
- }
- #page .pen_jump_menu h4 span {
- color: #fff;
- display: block;
- font-weight: bold;
- }
- #page .pen_jump_menu h4 span span.pen_only {
- background: #7f7f7f;
- border-radius: 100px;
- box-shadow: 1px 1px 3px rgba(0,0,0,0.75) inset;
- color: #fff;
- cursor: help;
- display: inline-block;
- font-size: 0.857em;
- font-weight: bold;
- margin: 0 5px 0 0;
- padding-left: 5px;
- padding-right: 5px;
- text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
- }
- #page .pen_jump_menu button.pen_toggle {
- background: transparent !important;
- border: 0 none !important;
- cursor: pointer;
- height: 32px;
- line-height: 1.5;
- opacity: 0.5;
- position: absolute;
- right: 0;
- top: 0;
- transition: opacity .3s;
- width: 32px;
- }
- #page .pen_jump_menu .pen_toggle:focus,
- #page .pen_jump_menu .pen_toggle:hover,
- #page .pen_jump_menu .pen_toggle:active,
- #page *:hover > .pen_jump_menu .pen_toggle {
- opacity: 1;
- }
- #page .pen_jump_menu .pen_toggle:before,
- #page .pen_jump_menu .pen_toggle:after {
- border-radius: 100px;
- content: '';
- height: 32px;
- position: absolute;
- right: 0;
- top: 0;
- width: 32px;
- }
- #page .pen_jump_menu .pen_toggle:before {
- background: rgba(0,0,0,0.25);
- border: 2px solid #fff;
- box-shadow: 0 0 5px rgba(0,0,0,0.5), 0 0 1px #000;
- color: #fff;
- content: "\f040";
- font-family: "FontAwesome";
- font-size: 18px;
- font-weight: normal;
- text-align: center;
- text-shadow: 0 0 5px rgba(0,0,0,0.5), 0 0 1px #000;
- }
- #page .pen_jump_menu .pen_toggle:after {
- border: 1px solid rgba(255,255,255,0.5);
- box-shadow: 0 0 2px rgba(0,0,0,0.2), 0 0 2px rgba(0,0,0,0.2) inset;
- }
- #page *:hover > .pen_jump_menu .pen_toggle:not(.pen_expanded):after {
- animation: pen_jump_menu_toggle 10s infinite ease-in-out;
- display: block;
- }
- #page .pen_jump_menu .pen_toggle:not(.pen_expanded):after,
- #page *:hover > .pen_jump_menu:not(.pen_expanded):pen_menu_wrapper:hover .pen_toggle:after {
- display: none;
- }
- @keyframes pen_jump_menu_toggle {
- 0% {
- transform: scale(1,1);
- }
- 5%,
- 100% {
- opacity: 0;
- transform: scale(2,2);
- }
- }
- #page .pen_jump_menu .pen_toggle.pen_expanded:before {
- background: #a00;
- content: "\f00d" !important;
- }
- #page .pen_jump_menu .pen_menu_wrapper {
- border-radius: 5px 20px 5px 5px;
- box-shadow: 0 2px 7px rgba(0,0,0,0.5);
- }
- #page .pen_jump_menu ul {
- list-style: none !important;
- margin: 0 !important;
- padding: 0 !important;
- width: 100%;
- }
- #page .pen_jump_menu ul li,
- #page .pen_jump_menu ul a {
- clear: both;
- float: left;
- width: 100%;
- }
- #page .pen_jump_menu ul a {
- background: rgba(240,240,240,0.95);
- border-bottom: 1px solid #ccc;
- color: #04a !important;
- font-size: 12px;
- font-weight: bold;
- line-height: 1.3;
- margin: 0;
- padding: 7px 10px;
- text-decoration: none;
- text-shadow: none;
- transition: unset !important;
- }
- #page .pen_jump_menu ul li:last-child a {
- border: 0 none;
- border-radius: 0 0 5px 5px;
- }
- #page .pen_jump_menu ul a:focus,
- #page .pen_jump_menu ul a:hover,
- #page .pen_jump_menu ul a:active {
- background: rgba(0,70,170,0.95);
- color: #fff !important;
- }
- #page .pen_jump_menu ul a span {
- border: 0 none !important;
- clip: rect(1px,1px,1px,1px);
- clip: rect(1px 1px 1px 1px);
- height: 1px !important;
- margin: 0 !important;
- overflow: hidden !important;
- padding: 0 !important;
- position: absolute !important;
- width: 1px !important;
- }
- #page .pen_jump_menu#pen_jump_menu_color_schemes,
- #page .pen_jump_menu#pen_jump_menu_font_presets {
- bottom: 100px;
- left: calc(50% - 175px);
- right: auto;
- position: fixed;
- top: auto;
- }
- #page .pen_jump_menu#pen_jump_menu_font_presets {
- left: calc(50% - 125px);
- }
- #page .pen_jump_menu#pen_jump_menu_color_schemes .pen_toggle:before {
- content: "\f1fc";
- }
- #page .pen_jump_menu#pen_jump_menu_font_presets .pen_toggle:before {
- content: "\f031";
- }
- #pen_jump_menu_color_schemes li {
- position: relative;
- }
- #pen_jump_menu_color_schemes li:before {
- border-radius: 3px;
- content: "";
- left: 5px;
- height: 14px;
- position: absolute;
- top: 50%;
- transform: translateY(-50%);
- width: 14px;
- z-index: 200;
- }
- #pen_jump_menu_color_schemes li a {
- padding-left: 25px !important;
- position: relative;
- z-index: 100;
- }
- #pen_jump_menu_color_schemes li:nth-child(1):before {
- background: -ms-linear-gradient(325deg, #00a9ff 0%, #000000 100%);
- background: linear-gradient(125deg, #00a9ff 0%, #000000 100%);
- }
- #pen_jump_menu_color_schemes li:nth-child(2):before {
- background: -ms-linear-gradient(325deg, #fb7c00 0%, #000000 100%);
- background: linear-gradient(125deg, #fb7c00 0%, #000000 100%);
- }
- #pen_jump_menu_color_schemes li:nth-child(3):before {
- background: -ms-linear-gradient(325deg, #00ac81 0%, #000000 100%);
- background: linear-gradient(125deg, #00ac81 0%, #000000 100%);
- }
- #pen_jump_menu_color_schemes li:nth-child(4):before {
- background: -ms-linear-gradient(325deg, #4b00f2 0%, #000000 100%);
- background: linear-gradient(125deg, #4b00f2 0%, #000000 100%);
- }
- #pen_jump_menu_color_schemes li:nth-child(5):before {
- background: -ms-linear-gradient(325deg, #003078 0%, #000000 100%);
- background: linear-gradient(125deg, #003078 0%, #000000 100%);
- }
- #pen_jump_menu_color_schemes li:nth-child(6):before {
- background: -ms-linear-gradient(325deg, #7f447f 0%, #000000 100%);
- background: linear-gradient(125deg, #7f447f 0%, #000000 100%);
- }
- #pen_jump_menu_color_schemes li:nth-child(7):before {
- background: -ms-linear-gradient(325deg, #c00000 0%, #000000 100%);
- background: linear-gradient(125deg, #c00000 0%, #000000 100%);
- }
- #pen_jump_menu_color_schemes li:nth-child(8):before {
- background: -ms-linear-gradient(325deg, #df00d2 0%, #000000 100%);
- background: linear-gradient(125deg, #df00d2 0%, #000000 100%);
- }
- #pen_jump_menu_color_schemes li:nth-child(9):before {
- background: -ms-linear-gradient(325deg, #8bcb00 0%, #000000 100%);
- background: linear-gradient(125deg, #8bcb00 0%, #000000 100%);
- }
- #pen_jump_menu_color_schemes li:nth-child(10):before {
- background: -ms-linear-gradient(325deg, #ffd800 0%, #000000 100%);
- background: linear-gradient(125deg, #ffd800 0%, #000000 100%);
- }
- #pen_jump_menu_color_schemes li:nth-child(11):before {
- background: -ms-linear-gradient(325deg, #00d3cf 33%, #000000 34%, #000000 74%, #255d5b 75%);
- background: linear-gradient(125deg, #00d3cf 33%, #000000 34%, #000000 74%, #255d5b 75%);
- }
- #pen_jump_menu_color_schemes li:nth-child(12):before {
- background: -ms-linear-gradient(325deg, #00b7ff 33%, #000000 34%, #000000 74%, #555555 75%);
- background: linear-gradient(125deg, #00b7ff 33%, #000000 34%, #000000 74%, #555555 75%);
- }
- #pen_jump_menu_color_schemes li:nth-child(13):before {
- background: -ms-linear-gradient(325deg, #f07c45 33%, #000000 34%, #000000 74%, #ffffff 75%);
- background: linear-gradient(125deg, #f07c45 33%, #000000 34%, #000000 74%, #ffffff 75%);
- }
- #pen_jump_menu_color_schemes li:nth-child(14):before {
- background: -ms-linear-gradient(325deg, #3c97de 33%, #00050a 34%, #00050a 74%, #ffca00 75%);
- background: linear-gradient(125deg, #3c97de 33%, #00050a 34%, #00050a 74%, #ffca00 75%);
- }
- #pen_jump_menu_color_schemes li:nth-child(15):before {
- background: -ms-linear-gradient(325deg, #ffed00 33%, #072b5f 34%, #072b5f 74%, #1a74cc 75%);
- background: linear-gradient(125deg, #ffed00 33%, #072b5f 34%, #072b5f 74%, #1a74cc 75%);
- }
|