Last active
April 6, 2018 23:12
-
-
Save daved/28d610bed42512cf840eb2f7443d9128 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ==UserScript== | |
// @name Present tool styling. | |
// @namespace https://www.codemodus.com | |
// @version 0.1 | |
// @description Configure present tool style using a "theme" param. (options: dark|light) | |
// @author daved | |
// @match http*://*/*.slide* | |
// @grant none | |
// ==/UserScript== | |
(function() { | |
'use strict'; | |
function appendStyle(styles) { | |
var css = document.createElement('style'); | |
css.type = 'text/css'; | |
if (css.styleSheet) css.styleSheet.cssText = styles; | |
else css.appendChild(document.createTextNode(styles)); | |
document.getElementsByTagName("body")[0].appendChild(css); | |
} | |
window.onload = function() { | |
var url = new URL(window.location.href); | |
var theme = url.searchParams.get("theme"); | |
switch(theme) { | |
case "dark": | |
appendStyle(darkStyle); | |
break; | |
case "light": | |
// TODO: appendStyle(lightStyle); | |
break; | |
} | |
}; | |
var darkStyle = ` | |
@import url('https://fonts.googleapis.com/css?family=Montserrat'); | |
@import url('https://fonts.googleapis.com/css?family=Inconsolata'); | |
@media screen { | |
/* Framework */ | |
html { | |
height: 100%; | |
} | |
body { | |
margin: 0; | |
padding: 0; | |
display: block !important; | |
height: 100%; | |
height: 100vh; | |
overflow: hidden; | |
background: rgb(5, 5, 5); | |
background: -o-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); | |
background: -moz-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); | |
background: -webkit-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190)); | |
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(50, 50, 50)), to(rgb(10, 10, 10))); | |
-webkit-font-smoothing: antialiased; | |
} | |
.slides { | |
width: 100%; | |
height: 100%; | |
left: 0; | |
top: 0; | |
position: absolute; | |
-webkit-transform: translate3d(0, 0, 0); | |
} | |
.slides > article { | |
display: block; | |
position: absolute; | |
overflow: hidden; | |
width: 900px; | |
height: 700px; | |
left: 50%; | |
top: 50%; | |
margin-left: -450px; | |
margin-top: -350px; | |
padding: 40px 60px; | |
box-sizing: border-box; | |
-o-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
-webkit-box-sizing: border-box; | |
border-radius: 10px; | |
-o-border-radius: 10px; | |
-moz-border-radius: 10px; | |
-webkit-border-radius: 10px; | |
background-color: rgba(10, 10, 10); | |
/* border: 1px solid rgba(0, 0, 0, .3); */ | |
color: white !important; | |
transition: transform .3s ease-out; | |
-o-transition: -o-transform .3s ease-out; | |
-moz-transition: -moz-transform .3s ease-out; | |
-webkit-transition: -webkit-transform .3s ease-out; | |
} | |
.slides.layout-widescreen > article { | |
margin-left: -550px; | |
width: 1100px; | |
} | |
.slides.layout-faux-widescreen > article { | |
margin-left: -550px; | |
width: 1100px; | |
padding: 40px 160px; | |
} | |
.slides.layout-widescreen > article:not(.nobackground):not(.biglogo), | |
.slides.layout-faux-widescreen > article:not(.nobackground):not(.biglogo) { | |
background-position-x: 0, 840px; | |
} | |
/* Clickable/tappable areas */ | |
.slide-area { | |
z-index: 1000; | |
position: absolute; | |
left: 0; | |
top: 0; | |
width: 150px; | |
height: 700px; | |
left: 50%; | |
top: 50%; | |
cursor: pointer; | |
margin-top: -350px; | |
tap-highlight-color: transparent; | |
-o-tap-highlight-color: transparent; | |
-moz-tap-highlight-color: transparent; | |
-webkit-tap-highlight-color: transparent; | |
} | |
#prev-slide-area { | |
margin-left: -550px; | |
} | |
#next-slide-area { | |
margin-left: 400px; | |
} | |
.slides.layout-widescreen #prev-slide-area, | |
.slides.layout-faux-widescreen #prev-slide-area { | |
margin-left: -650px; | |
} | |
.slides.layout-widescreen #next-slide-area, | |
.slides.layout-faux-widescreen #next-slide-area { | |
margin-left: 500px; | |
} | |
/* Slides */ | |
.slides > article { | |
display: none; | |
} | |
.slides > article.far-past { | |
display: block; | |
transform: translate(-2040px); | |
-o-transform: translate(-2040px); | |
-moz-transform: translate(-2040px); | |
-webkit-transform: translate3d(-2040px, 0, 0); | |
} | |
.slides > article.past { | |
display: block; | |
transform: translate(-1020px); | |
-o-transform: translate(-1020px); | |
-moz-transform: translate(-1020px); | |
-webkit-transform: translate3d(-1020px, 0, 0); | |
} | |
.slides > article.current { | |
display: block; | |
transform: translate(0); | |
-o-transform: translate(0); | |
-moz-transform: translate(0); | |
-webkit-transform: translate3d(0, 0, 0); | |
} | |
.slides > article.next { | |
display: block; | |
transform: translate(1020px); | |
-o-transform: translate(1020px); | |
-moz-transform: translate(1020px); | |
-webkit-transform: translate3d(1020px, 0, 0); | |
} | |
.slides > article.far-next { | |
display: block; | |
transform: translate(2040px); | |
-o-transform: translate(2040px); | |
-moz-transform: translate(2040px); | |
-webkit-transform: translate3d(2040px, 0, 0); | |
} | |
.slides.layout-widescreen > article.far-past, | |
.slides.layout-faux-widescreen > article.far-past { | |
display: block; | |
transform: translate(-2260px); | |
-o-transform: translate(-2260px); | |
-moz-transform: translate(-2260px); | |
-webkit-transform: translate3d(-2260px, 0, 0); | |
} | |
.slides.layout-widescreen > article.past, | |
.slides.layout-faux-widescreen > article.past { | |
display: block; | |
transform: translate(-1130px); | |
-o-transform: translate(-1130px); | |
-moz-transform: translate(-1130px); | |
-webkit-transform: translate3d(-1130px, 0, 0); | |
} | |
.slides.layout-widescreen > article.current, | |
.slides.layout-faux-widescreen > article.current { | |
display: block; | |
transform: translate(0); | |
-o-transform: translate(0); | |
-moz-transform: translate(0); | |
-webkit-transform: translate3d(0, 0, 0); | |
} | |
.slides.layout-widescreen > article.next, | |
.slides.layout-faux-widescreen > article.next { | |
display: block; | |
transform: translate(1130px); | |
-o-transform: translate(1130px); | |
-moz-transform: translate(1130px); | |
-webkit-transform: translate3d(1130px, 0, 0); | |
} | |
.slides.layout-widescreen > article.far-next, | |
.slides.layout-faux-widescreen > article.far-next { | |
display: block; | |
transform: translate(2260px); | |
-o-transform: translate(2260px); | |
-moz-transform: translate(2260px); | |
-webkit-transform: translate3d(2260px, 0, 0); | |
} | |
} | |
@media print { | |
/* Set page layout */ | |
@page { | |
size: A4 landscape; | |
} | |
body { | |
display: block !important; | |
} | |
.slides > article { | |
display: block; | |
position: relative; | |
page-break-inside: never; | |
page-break-after: always; | |
overflow: hidden; | |
} | |
h2 { | |
position: static !important; | |
margin-top: 400px !important; | |
margin-bottom: 100px !important; | |
} | |
div.code { | |
background: rgb(240, 240, 240); | |
} | |
#help { | |
display: none; | |
visibility: hidden; | |
} | |
} | |
/* Styles for slides */ | |
.slides > article { | |
font-family: 'Montserrat', Arial, sans-serif; | |
color: black; | |
text-shadow: 0 1px 1px rgba(0, 0, 0, .1); | |
font-size: 26px; | |
line-height: 36px; | |
letter-spacing: -1px; | |
} | |
b { | |
font-weight: 600; | |
} | |
a { | |
color: rgb(0, 152, 254); | |
text-decoration: none; | |
} | |
a:visited { | |
color: rgb(0, 152, 254); | |
} | |
a:hover { | |
color: black; | |
} | |
p { | |
margin: 0; | |
padding: 0; | |
margin-top: 20px; | |
} | |
p:first-child { | |
margin-top: 0; | |
} | |
h1 { | |
font-size: 60px; | |
line-height: 60px; | |
padding: 0; | |
margin: 0; | |
margin-top: 200px; | |
margin-bottom: 5px; | |
padding-right: 40px; | |
font-weight: 600; | |
letter-spacing: -3px; | |
color: white; | |
} | |
h2 { | |
font-size: 45px; | |
line-height: 45px; | |
position: absolute; | |
bottom: 150px; | |
padding: 0; | |
margin: 0; | |
padding-right: 40px; | |
font-weight: 600; | |
letter-spacing: -2px; | |
color: white; | |
} | |
h3 { | |
font-size: 40px; | |
line-height: 36px; | |
padding: 0; | |
margin: 0; | |
padding-right: 40px; | |
font-weight: 600; | |
letter-spacing: 1px; | |
color: white; | |
} | |
ul { | |
margin: 0; | |
padding: 0; | |
margin-top: 20px; | |
margin-left: 1.5em; | |
} | |
li { | |
padding: 0; | |
margin: 0 0 .5em 0; | |
} | |
div.code { | |
padding: 5px 10px; | |
margin-top: 20px; | |
margin-bottom: 20px; | |
overflow: hidden; | |
background: rgb(205, 223, 245); | |
/* border: 1px solid rgb(224, 224, 224); */ | |
} | |
pre { | |
margin: 0; | |
padding: 0; | |
font-family: 'Inconsolata', 'Courier New', monospace; | |
font-size: 18px; | |
line-height: 24px; | |
letter-spacing: -1px; | |
color: black; | |
} | |
pre.numbers span:before { | |
content: attr(num); | |
margin-right: 1em; | |
display: inline-block; | |
} | |
code { | |
font-size: 95%; | |
font-family: 'Inconsolata', 'Courier New', monospace; | |
color: white; | |
} | |
article > .image, | |
article > .video { | |
text-align: center; | |
margin-top: 40px; | |
} | |
article.background { | |
background-size: contain; | |
background-repeat: round; | |
} | |
table { | |
width: 100%; | |
border-collapse: collapse; | |
margin-top: 40px; | |
} | |
th { | |
font-weight: 600; | |
text-align: left; | |
} | |
td, | |
th { | |
border: 1px solid rgb(224, 224, 224); | |
padding: 5px 10px; | |
vertical-align: top; | |
} | |
p.link { | |
margin-left: 20px; | |
} | |
/* Code */ | |
div.code { | |
outline: 0px solid transparent; | |
} | |
div.playground { | |
position: relative; | |
} | |
div.output { | |
position: absolute; | |
left: 50%; | |
top: 50%; | |
right: 40px; | |
bottom: 40px; | |
background: #202020; | |
padding: 5px 10px; | |
z-index: 2; | |
border-radius: 10px; | |
-o-border-radius: 10px; | |
-moz-border-radius: 10px; | |
-webkit-border-radius: 10px; | |
} | |
div.output pre { | |
margin: 0; | |
padding: 0; | |
background: none; | |
border: none; | |
width: 100%; | |
height: 100%; | |
overflow: auto; | |
} | |
div.output .stdout, div.output pre { | |
color: #e6e6e6; | |
} | |
div.output .stderr, div.output .error { | |
color: rgb(255, 200, 200); | |
} | |
div.output .system, div.output .exit { | |
color: rgb(255, 230, 120) | |
} | |
.buttons { | |
position: relative; | |
float: right; | |
top: -60px; | |
right: 10px; | |
} | |
div.output .buttons { | |
position: absolute; | |
float: none; | |
top: auto; | |
right: 5px; | |
bottom: 5px; | |
} | |
/* Presenter details */ | |
.presenter { | |
margin-top: 20px; | |
} | |
.presenter p, | |
.presenter .link { | |
margin: 0; | |
font-size: 28px; | |
line-height: 1.2em; | |
} | |
/* Output resize details */ | |
.ui-resizable-handle { | |
position: absolute; | |
} | |
.ui-resizable-n { | |
cursor: n-resize; | |
height: 7px; | |
width: 100%; | |
top: -5px; | |
left: 0; | |
} | |
.ui-resizable-w { | |
cursor: w-resize; | |
width: 7px; | |
left: -5px; | |
top: 0; | |
height: 100%; | |
} | |
.ui-resizable-nw { | |
cursor: nw-resize; | |
width: 9px; | |
height: 9px; | |
left: -5px; | |
top: -5px; | |
} | |
iframe { | |
border: none; | |
} | |
figcaption { | |
color: #aaa; | |
text-align: center; | |
font-size: 0.75em; | |
} | |
#help { | |
font-family: 'Open Sans', Arial, sans-serif; | |
text-align: center; | |
color: white; | |
background: #000; | |
opacity: 0.5; | |
position: fixed; | |
bottom: 25px; | |
left: 50px; | |
right: 50px; | |
padding: 20px; | |
border-radius: 10px; | |
-o-border-radius: 10px; | |
-moz-border-radius: 10px; | |
-webkit-border-radius: 10px; | |
} | |
`; | |
var lightStyle = ` | |
// TODO | |
`; | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment