2 |
3 | Seamless Wolfram-Alpha® in your OS X menubar.
4 |
5 | > “The menubar client is every bit as intuitive as the web interface, meaning it’s easy to use...” – [The Next Web](http://thenextweb.com/insider/2016/02/08/nimble-brings-wolfram-alpha-to-your-menubar-on-os-x/)
6 |
7 | > “Nimble can handle pretty much anything you’d normally throw at Wolfram Alpha...” – [Lifehacker](http://lifehacker.com/nimble-crams-wolfram-alpha-into-your-macs-menu-bar-1758071364)
8 |
9 | ## Notice of Deprecation
10 | Nimble is **deprecated as of June 2020.** Within the current version are multiple privacy concerns (BugSnag bug reporting is on by default) and outdated dependencies. Really, we **don't think you should run Nimble as it is today.** If you must run it, compile it at your own risk following the development guide.
11 |
12 | ## Development
13 | Electron and gulp required to be installed on your machine (`npm install -g electron-prebuilt gulp`), as well as the Xcode Command Line Tools. You'll also need a [Wolfram Alpha API Key](http://products.wolframalpha.com/api/).
14 |
15 | Clone the repository, install dependencies, then run gulp.
16 |
17 | ```bash
18 | git clone https://github.com/Maybulb/Nimble.git
19 |
20 | # cd into the directory and install dependencies
21 | cd Nimble && npm install
22 | ```
23 |
24 | Create `src/js/key.json` for your key.
25 |
26 | ```js
27 | { "api": "KEY" }
28 | ```
29 |
30 | Run electron in the project directory to get it up and running.
31 |
32 | ```
33 | # Compiles Sass and starts (gulp && electron .)
34 | npm start
35 | ```
36 |
37 | ## Packaging/Bundling
38 | If you'd like to package Nimble, you can use our Gulp task for building Nimble.
39 |
40 | ```bash
41 | gulp build # packages and builds Nimble into a ZIP and a DMG
42 | sh clean-build.sh # clean build, reinstalls node modules and such
43 | ```
44 |
45 | If you're bundling it, make sure to package it beforehand so that the `.app` exists for the disk image.
46 |
47 | ## Contribution
48 | Want to make a contribution? Fork the repo, add your changes, and submit a pull request. Any type of contributions (ideas, bug fixes, fixing typos, etc.) will be appreciated!
49 |
50 |
51 | ## License
52 | Nimble is licensed under [Creative Commons Attribution-NonCommercial 4.0](https://github.com/Maybulb/Nimble/blob/master/LICENSE.md).
53 |
--------------------------------------------------------------------------------
/assets/512.icns:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Maybulb/Nimble/228af8240750791c7a6d2b092a2038e120838dd3/assets/512.icns
--------------------------------------------------------------------------------
/assets/512.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Maybulb/Nimble/228af8240750791c7a6d2b092a2038e120838dd3/assets/512.ico
--------------------------------------------------------------------------------
/assets/WA.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/assets/img/menubar_iconTemplate.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Maybulb/Nimble/228af8240750791c7a6d2b092a2038e120838dd3/assets/img/menubar_iconTemplate.png
--------------------------------------------------------------------------------
/assets/img/menubar_iconTemplate@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Maybulb/Nimble/228af8240750791c7a6d2b092a2038e120838dd3/assets/img/menubar_iconTemplate@2x.png
--------------------------------------------------------------------------------
/assets/img/menubar_icon_pressed.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Maybulb/Nimble/228af8240750791c7a6d2b092a2038e120838dd3/assets/img/menubar_icon_pressed.png
--------------------------------------------------------------------------------
/assets/img/menubar_icon_pressed@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Maybulb/Nimble/228af8240750791c7a6d2b092a2038e120838dd3/assets/img/menubar_icon_pressed@2x.png
--------------------------------------------------------------------------------
/assets/nimback.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Maybulb/Nimble/228af8240750791c7a6d2b092a2038e120838dd3/assets/nimback.png
--------------------------------------------------------------------------------
/assets/nimback@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Maybulb/Nimble/228af8240750791c7a6d2b092a2038e120838dd3/assets/nimback@2x.png
--------------------------------------------------------------------------------
/clean-build.sh:
--------------------------------------------------------------------------------
1 | # clean build
2 | node_version=$(node -v)
3 | echo $node_version
4 | n 5.11.1
5 | node -v
6 | git pull
7 | rm -rf node_modules/
8 | npm install
9 | gulp build
10 | n "$node_version"
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | var gulp = require('gulp'),
2 | sass = require('gulp-sass');
3 |
4 | require('shelljs/global');
5 |
6 | gulp.task('sass', function() {
7 | gulp.src('src/css/*.sass')
8 | .pipe(sass())
9 | .pipe(gulp.dest('src/css'))
10 | gulp.src('src/css/colours/*.sass')
11 | .pipe(sass())
12 | .pipe(gulp.dest('src/css/colours'))
13 | })
14 |
15 | gulp.task('default', ['sass']);
16 |
17 | // don't work too good
18 | // gulp.task('produce', ['package', 'build']);
19 |
20 | gulp.task('build', function() {
21 | // run this as a script because electron-builder doesn't offer it source
22 | var script = "node_modules/.bin/build --mac";
23 | exec(script);
24 | });
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | const bugsnag = require('bugsnag');
2 | const electron = require('electron');
3 | const app = require('electron').app;
4 | const path = require('path');
5 | const pjson = require('./package.json');
6 |
7 | bugsnag.register('b3d3a88f13b0f8e22b4485b8b04939bd', {
8 | releaseStage: process.env.NODE_ENV,
9 | appVersion: pjson.version,
10 | sendCode: true,
11 | projectRoot: path.resolve(app.getPath('exe'), '../..'), // Locates `Content` directory within the .app
12 | metaData: {
13 | process: {
14 | arch: process.arch,
15 | argv: process.argv,
16 | pid: process.pid,
17 | platform: process.platform,
18 | version: process.version,
19 | cwd: process.cwd(),
20 | features: process.features,
21 | uptime: process.uptime(),
22 | versions: process.versions,
23 | }
24 | }
25 | });
26 |
27 | bugsnag.onBeforeNotify(function () {
28 | // Notifies us of initial startup runtime errors & normal errors when user has specified allowing bugreports
29 | return !global.options || global.options.bugreport === true;
30 | });
31 |
32 | process.on('unhandledRejection', function (err) {
33 | console.error('Unhandled error: ' + (err && err.stack || err));
34 | bugsnag.notify(err);
35 | });
36 |
37 | var ipc = require('electron').ipcMain;
38 | var globalShortcut = require('electron').globalShortcut;
39 | var autoUpdater = require('electron').autoUpdater;
40 | var menubar = require('menubar');
41 | var fs = require('fs');
42 | var AutoLaunch = require('auto-launch');
43 | var os = require('os')
44 | const isDev = require('electron-is-dev');
45 |
46 | try {
47 | global.options = require(os.homedir() + '/.nimble-options.json');
48 | } catch (e) {
49 | global.options = {
50 | "mathjs": true,
51 | "startup": true,
52 | "center": false,
53 | "bugreport": true,
54 | "autoupdate": true,
55 | theme: {
56 | "red": false,
57 | "orange": true,
58 | "yellow": false,
59 | "green": false,
60 | "blue": false,
61 | "purple": false,
62 | "pink": false,
63 | "contrast": false
64 | },
65 | enableDefaultSuggestions: true,
66 | customSuggestions: []
67 | }
68 | }
69 |
70 | require('shelljs/global');
71 |
72 | var mb = menubar({
73 | height: 42,
74 | width: 380,
75 | icon: __dirname + '/assets/img/menubar_iconTemplate.png',
76 | index: 'file://' + __dirname + '/src/index.html',
77 | preloadWindow: true
78 | });
79 |
80 | ipc.on('resize', function(event, arg) {
81 |
82 |
83 | // this is the animation code that crashes
84 | /*
85 | var h = mb.window.getSize()[1];
86 | while(h !== arg.height) {
87 | setTimeout(function () {
88 | if(h > arg.height) {
89 | h--;
90 | } else if (h < arg.height) {
91 | h++;
92 | }
93 |
94 | console.log(h)
95 | mb.window.setSize(mb.window.getSize()[0], h)
96 | }, 1)
97 | }
98 | */
99 |
100 | var finalDim = {
101 | height: null,
102 | width: null
103 | };
104 |
105 | if (arg.height > 533) {
106 | // if height is way too big, then just set it short and scroll
107 | mb.window.setBounds({
108 | x: mb.window.getPosition()[0],
109 | y: optfunc.getYValue(),
110 | width: arg.width,
111 | height: 533
112 | }, true);
113 |
114 | finalDim.height = 533;
115 | finalDim.width = arg.width;
116 | } else {
117 | mb.window.setBounds({
118 | x: mb.window.getPosition()[0],
119 | y: optfunc.getYValue(),
120 | width: arg.width,
121 | height: arg.height
122 | }, true);
123 |
124 | finalDim.height = arg.height;
125 | finalDim.width = arg.width;
126 | }
127 |
128 | optfunc.position();
129 |
130 | console.log("Resizing window to " + finalDim.width + " x " + finalDim.height + "\n");
131 | });
132 |
133 | ipc.on('toggleview', function(event) {
134 | var position = [mb.window.getPosition()[0], mb.window.getPosition()[1]];
135 |
136 | if(mb.window.isVisible() === true) {
137 | mb.hideWindow();
138 | } else if (mb.window.isVisible() === false) {
139 | mb.showWindow();
140 | }
141 |
142 | mb.window.setPosition(position[0], position[1]);
143 | });
144 |
145 | ipc.on('reset-window', function(event) {
146 | mb.window.setBounds({
147 | x: mb.window.getPosition()[0],
148 | y: optfunc.getYValue(),
149 | width: 380,
150 | height: 42,
151 | }, true);
152 |
153 | optfunc.position();
154 | });
155 |
156 | // console.log handler
157 | ipc.on('node_console', function(event, arg) {
158 | console.log(arg.m + "\n")
159 | });
160 |
161 | ipc.on('save_options', function(event, arg) {
162 | fs.writeFile(os.homedir() + '/.nimble-options.json', arg, function(err) {
163 | if(err) {
164 | console.log(err);
165 | }
166 | mb.window.webContents.send('did-save-options', !err);
167 | console.log("Options were saved.\n");
168 | });
169 |
170 | // make options available here too
171 | global.options = JSON.parse(arg);
172 |
173 | // things to do
174 | optfunc.startup();
175 | optfunc.position();
176 | });
177 |
178 | // various functions that make options work
179 | var optfunc = {
180 | startup: function() {
181 | var nimbleAutoLauncher = new AutoLaunch({
182 | name: 'Nimble',
183 | path: path.resolve(app.getAppPath(), '../../../')
184 | });
185 |
186 | // startup?
187 | if (global.options.startup === true) {
188 | nimbleAutoLauncher.enable();
189 | } else {
190 | nimbleAutoLauncher.disable();
191 | }
192 |
193 | return null
194 | },
195 | position: function() {
196 | if(global.options.center === true) {
197 | mb.setOption("window-position", "center");
198 | mb.positioner.move("center");
199 | } else if (global.options.center === false) {
200 | mb.setOption("window-position", "trayCenter");
201 | if (global.bounds) {
202 | mb.positioner.move("trayCenter", global.bounds)
203 | }
204 | }
205 |
206 | return null
207 | },
208 | getYValue: function() {
209 | try {
210 | if (global.autohide === true && global.options.center === false) {
211 | return 22
212 | } else {
213 | return mb.window.getPosition()[1]
214 | }
215 | } catch (e) {
216 | return mb.window.getPosition()[1]
217 | }
218 | }
219 | }
220 |
221 | ipc.on('quit', function(){
222 | app.quit();
223 | })
224 |
225 | mb.on('after-create-window', function() {
226 | // error/log forwarding
227 | process.on("uncaughtException", function(err) {
228 | mb.window.webContents.send("error", err);
229 | })
230 |
231 | var _consolelog = console.log.bind(console);
232 | console.log = function log(message) {
233 | mb.window.webContents.send('log', message);
234 | _consolelog(message);
235 | };
236 |
237 | mb.window.setResizable(false);
238 | mb.tray.setPressedImage(__dirname + '/assets/img/menubar_icon_pressed.png');
239 |
240 | mb.tray
241 | .on('click', click)
242 | .on('right-click', rightClick)
243 |
244 | // check if menubar is set to autohide
245 | var script = "defaults read NSGlobalDomain _HIHideMenuBar -bool"
246 | var output = exec(script, {async:true})
247 |
248 | output.stdout.on("data", function(data) {
249 | if (data == 1) {
250 | global.autohide = true
251 | console.log("menubar is set to autohide")
252 | } else if (data == 0) {
253 | global.autohide = false
254 | } else {
255 | global.autohide = false
256 | }
257 |
258 | mb.window.setBounds({
259 | x: mb.window.getPosition()[0],
260 | y: optfunc.getYValue(),
261 | width: 380,
262 | height: 42
263 | });
264 | })
265 |
266 | output.stderr.on("data", function(data) {
267 | console.log("no autohide setting was found, setting to default")
268 | global.autohide = false
269 |
270 | mb.window.setBounds({
271 | x: mb.window.getPosition()[0],
272 | y: optfunc.getYValue(),
273 | width: 380,
274 | height: 42
275 | });
276 | })
277 |
278 | function click(e, bounds) {
279 | if (e.shiftKey) {
280 | mb.window.openDevTools({
281 | detach: true
282 | })
283 | }
284 |
285 | global.bounds = bounds;
286 | }
287 |
288 | function rightClick(e, bounds) {
289 | mb.window.webContents.send("tray-rightclick");
290 | }
291 |
292 | // global hotkey to toggle nimble
293 | globalShortcut.register('CmdOrCtrl+Shift+=', function() {
294 | var position = [mb.window.getPosition()[0], mb.window.getPosition()[1]];
295 |
296 | if(mb.window.isVisible() === true) {
297 | mb.hideWindow();
298 | } else if (mb.window.isVisible() === false) {
299 | mb.showWindow();
300 | }
301 |
302 | mb.window.setPosition(position[0], position[1]);
303 | });
304 | });
305 |
306 | mb.on('after-show', function() {
307 | if (mb.window) {
308 | mb.window.webContents.send("window-open");
309 | mb.window.setPosition(mb.window.getPosition()[0], optfunc.getYValue());
310 | }
311 | })
312 |
313 | mb.on('ready', function() {
314 | // screen size
315 | var screen = require('electron').screen;
316 | global.screenSize = screen.getPrimaryDisplay().size;
317 |
318 | // auto update
319 | if (global.options.autoupdate === true && isDev === false) {
320 | var updateFeed = 'https://nimble-autoupdate.herokuapp.com/update/osx/';
321 | autoUpdater.setFeedURL(updateFeed + pjson.version);
322 | autoUpdater.checkForUpdates();
323 |
324 | autoUpdater.on('update-available', function() {
325 | console.log('update available and downloading');
326 | require('electron').dialog.showMessageBox({
327 | "message": "Update Downloading",
328 | "detail": "A new update is currently available and downloading. Nimble will let you know before it quits to install the update.",
329 | "buttons": []
330 | })
331 | });
332 |
333 | autoUpdater.on('update-downloaded', function(event) {
334 | console.log('update downloaded: ' + event);
335 | require('electron').dialog.showMessageBox({
336 | "message": "Update Ready To Install",
337 | "detail": "Nimble has downloaded a new update. Would you like to quit Nimble and install it?",
338 | "buttons": ["Yes", "No"],
339 | }, function(response) {
340 | switch(response) {
341 | case 1:
342 | break;
343 | case 0:
344 | autoUpdater.quitAndInstall();
345 | break;
346 | }
347 | });
348 | });
349 | }
350 | });
351 |
352 | mb.on('will-quit', function() {
353 | globalShortcut.unregisterAll();
354 | });
355 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Nimble",
3 | "version": "1.3.3",
4 | "description": "A Wolfram|Alpha® menu bar app",
5 | "main": "index.js",
6 | "dependencies": {
7 | "auto-launch": "^1.1.1",
8 | "bugsnag": "^1.7.0",
9 | "bugsnag-js": "^2.5.0",
10 | "electron-is-dev": "^0.1.1",
11 | "font-awesome": "^4.5.0",
12 | "imagesloaded": "^4.1.0",
13 | "jquery": "~> 3.0.0",
14 | "loaders.css": "^0.1.2",
15 | "mathjs": "~> 3.17.0",
16 | "menubar": "^2.3.0",
17 | "rand-paul": "^2.0.0",
18 | "shelljs": "^0.5.3",
19 | "string-format": "^0.5.0",
20 | "wolfram-alpha": "^0.5.0"
21 | },
22 | "devDependencies": {
23 | "electron-builder": "^5.12.1",
24 | "electron-prebuilt": "^0.36.0",
25 | "gulp": "^3.9.0",
26 | "gulp-sass": "^2.3.2"
27 | },
28 | "scripts": {
29 | "start": "gulp && electron ."
30 | },
31 | "repository": {
32 | "type": "git",
33 | "url": "git+https://github.com/Maybulb/Nimble.git"
34 | },
35 | "keywords": [
36 | "wolfram",
37 | "nimble",
38 | "osx",
39 | "menubar"
40 | ],
41 | "author": "Maybulb",
42 | "license": "CC-BY-NC-4.0",
43 | "bugs": {
44 | "url": "https://github.com/Maybulb/Nimble/issues"
45 | },
46 | "homepage": "https://github.com/Maybulb/Nimble#readme",
47 | "build": {
48 | "mac": {
49 | "target": "default",
50 | "icon": "assets/512.icns"
51 | },
52 | "dmg": {
53 | "title": "Nimble",
54 | "icon": "assets/512.icns",
55 | "icon-size": 80,
56 | "background": "assets/nimback.png",
57 | "contents": [
58 | {
59 | "x": 438,
60 | "y": 344,
61 | "type": "link",
62 | "path": "/Applications"
63 | },
64 | {
65 | "x": 192,
66 | "y": 344,
67 | "type": "file"
68 | }
69 | ]
70 | }
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/src/css/colours/blue.sass:
--------------------------------------------------------------------------------
1 | $red: #dc0000
2 | $nimble-orange: #ff8C12
3 | $bright-yellow: #FFCA30
4 | $green: #76be21
5 | $blue: #287ee8
6 | $purple: #b51bf5
7 | $font-family: 'BlinkMacSystemFont', system, -apple-system, ".SFNSDisplay-Regular", "Helvetica Neue", "Lucida Grande"
8 |
9 |
10 | body, html
11 | width: 100%
12 | display: block
13 | padding: 0
14 | margin: 0
15 | border: 0
16 | overflow: hidden
17 |
18 | body
19 | background: white
20 |
21 | div.interpret
22 | background: lighten($blue, 15%)
23 | font-family: $font-family
24 | font-size: 14px
25 | padding: 6px 16px
26 | width: calc(100% - 32px)
27 | color: white
28 |
29 | div#wolfram-credit
30 | background: $blue
31 | font-family: $font-family
32 | font-size: 14px
33 | color: white
34 | padding: 6px 16px
35 | height: 18px
36 | display: block
37 |
38 | span
39 | float: right
40 | height: 100%
41 | opacity: 0.8
42 | span, img
43 | vertical-align: middle
44 | -webkit-user-drag: none
45 | -webkit-user-select: none
46 | span img
47 | height: 100%
48 |
49 | // is it too late now to say sorry
50 | div.sorry
51 | font: normal normal normal 14px/1 FontAwesome
52 | color: $blue
53 | font-size: 72px
54 | text-align: center
55 | margin: 12px 0 6px 0
56 |
57 | p.err
58 | text-align: center
59 | line-height: 1.4
60 |
61 | div.output
62 | display: inline-block
63 | position: relative
64 | border: 0
65 | pointer-events: auto
66 | font-size: 1m
67 | padding: 12px 16px
68 | font-family: $font-family
69 | letter-spacing: 0.5px
70 | outline: none
71 | z-index: 1
72 | overflow-y: scroll
73 |
74 | // 380 is the magic number
75 | max-height: 380px
76 |
77 | // leaving this here for adam
78 | // ::selection
79 | // background: $blue
80 | // color: white
81 |
82 | div.output::-webkit-scrollbar
83 | display: none
84 |
85 | div.input
86 | display: relative
87 | width: 100%
88 | background: $blue
89 | color: white
90 | input[type=text]
91 | display: block
92 | position: relative
93 | background: transparent
94 | border: 0
95 | pointer-events: auto
96 | font-size: 1em
97 | padding: 12px 16px
98 | font-family: $font-family
99 | width: calc(100% - 32px - 42px)
100 | outline: none
101 | z-index: 1
102 | color: white
103 | // making the placeholder text darker than the greyed-out button looks nice af
104 | input[type=text]::-webkit-input-placeholder
105 | opacity: 0.75
106 | color: white
107 | button
108 | font: normal normal normal 14px/1 FontAwesome /* real talk this is weird */
109 | font-weight: normal
110 | position: absolute
111 | margin: 0
112 | top: 5px
113 | right: 14px
114 | font-size: 14px
115 | border: 0
116 | outline: 0
117 | padding: 8px
118 | width: 30px
119 | max-height: 30px
120 | border-radius: 50%
121 | opacity: 0.7
122 | background: white
123 | transition: 0.25s /* fadey */
124 | color: $blue
125 | z-index: 2
126 | border: none
127 | overflow: hidden
128 | // leaving this here for adam to touch
129 | // ::selection
130 | // color: $blue
131 | // background: white
132 |
133 | h1
134 | text-align: center
135 |
136 | a
137 | color: $blue
138 |
139 | hr
140 | background: black
141 | border: 1px solid black
142 |
143 | .image-output
144 | display: block
145 | -webkit-user-drag: none
146 |
147 | .animateLoader
148 | -webkit-animation: spin 0.75s ease-in-out infinite alternate
149 | -webkit-transform-origin: center
150 |
151 | @-webkit-keyframes spin
152 | from
153 | -webkit-transform: rotate(0deg)
154 |
155 | to
156 | -webkit-transform: rotate(360deg)
157 |
158 | h3
159 | border-top: 1px solid rgba(0, 0, 0, 0.3)
160 | font-size: 18px
161 | margin-top: 20px
162 | padding-top: 20px
163 |
164 | h3:first-of-type
165 | border: 0
166 | margin-top: 0
167 | padding-top: 0
168 |
169 | h5
170 | font-size: 14px
171 | margin: 0
172 |
--------------------------------------------------------------------------------
/src/css/colours/bright-yellow.sass:
--------------------------------------------------------------------------------
1 | $red: #dc0000
2 | $nimble-orange: #ff8C12
3 | $bright-yellow: #FFCA30
4 | $green: #76be21
5 | $blue: #160ede
6 | $purple: #b51bf5
7 | $font-family: 'BlinkMacSystemFont', system, -apple-system, ".SFNSDisplay-Regular", "Helvetica Neue", "Lucida Grande"
8 |
9 |
10 | body, html
11 | width: 100%
12 | display: block
13 | padding: 0
14 | margin: 0
15 | border: 0
16 | overflow: hidden
17 |
18 | body
19 | background: white
20 |
21 | div.interpret
22 | background: darken($bright-yellow, 8%)
23 | font-family: $font-family
24 | font-size: 14px
25 | padding: 6px 16px
26 | width: calc(100% - 32px)
27 | color: white
28 |
29 | div#wolfram-credit
30 | background: $bright-yellow
31 | font-family: $font-family
32 | font-size: 14px
33 | color: white
34 | padding: 6px 16px
35 | height: 18px
36 | display: block
37 |
38 | span
39 | float: right
40 | height: 100%
41 | opacity: 0.8
42 | span, img
43 | vertical-align: middle
44 | -webkit-user-drag: none
45 | -webkit-user-select: none
46 | span img
47 | height: 100%
48 |
49 | // is it too late now to say sorry
50 | div.sorry
51 | font: normal normal normal 14px/1 FontAwesome
52 | color: $bright-yellow
53 | font-size: 72px
54 | text-align: center
55 | margin: 12px 0 6px 0
56 |
57 | p.err
58 | text-align: center
59 | line-height: 1.4
60 |
61 | div.output
62 | display: inline-block
63 | position: relative
64 | border: 0
65 | pointer-events: auto
66 | font-size: 1m
67 | padding: 12px 16px
68 | font-family: $font-family
69 | letter-spacing: 0.5px
70 | outline: none
71 | z-index: 1
72 | overflow-y: scroll
73 |
74 | // 380 is the magic number
75 | max-height: 380px
76 |
77 | // leaving this here for adam
78 | // ::selection
79 | // background: $bright-yellow
80 | // color: white
81 |
82 | div.output::-webkit-scrollbar
83 | display: none
84 |
85 | div.input
86 | display: relative
87 | width: 100%
88 | background: $bright-yellow
89 | color: white
90 | input[type=text]
91 | display: block
92 | position: relative
93 | background: transparent
94 | border: 0
95 | pointer-events: auto
96 | font-size: 1em
97 | padding: 12px 16px
98 | font-family: $font-family
99 | width: calc(100% - 32px - 42px)
100 | outline: none
101 | z-index: 1
102 | color: white
103 | // making the placeholder text darker than the greyed-out button looks nice af
104 | input[type=text]::-webkit-input-placeholder
105 | opacity: 0.75
106 | color: white
107 | button
108 | font: normal normal normal 14px/1 FontAwesome /* real talk this is weird */
109 | font-weight: normal
110 | position: absolute
111 | margin: 0
112 | top: 5px
113 | right: 14px
114 | font-size: 14px
115 | border: 0
116 | outline: 0
117 | padding: 8px
118 | width: 30px
119 | max-height: 30px
120 | border-radius: 50%
121 | opacity: 0.7
122 | background: white
123 | transition: 0.25s /* fadey */
124 | color: $bright-yellow
125 | z-index: 2
126 | border: none
127 | overflow: hidden
128 | // leaving this here for adam to touch
129 | // ::selection
130 | // color: $bright-yellow
131 | // background: white
132 |
133 | h1
134 | text-align: center
135 |
136 | a
137 | color: $bright-yellow
138 |
139 | hr
140 | background: black
141 | border: 1px solid black
142 |
143 | .image-output
144 | display: block
145 | -webkit-user-drag: none
146 |
147 | .animateLoader
148 | -webkit-animation: spin 0.75s ease-in-out infinite alternate
149 | -webkit-transform-origin: center
150 |
151 | @-webkit-keyframes spin
152 | from
153 | -webkit-transform: rotate(0deg)
154 |
155 | to
156 | -webkit-transform: rotate(360deg)
157 |
158 | h3
159 | border-top: 1px solid rgba(0, 0, 0, 0.3)
160 | font-size: 18px
161 | margin-top: 20px
162 | padding-top: 20px
163 |
164 | h3:first-of-type
165 | border: 0
166 | margin-top: 0
167 | padding-top: 0
168 |
169 | h5
170 | font-size: 14px
171 | margin: 0
172 |
--------------------------------------------------------------------------------
/src/css/colours/green.sass:
--------------------------------------------------------------------------------
1 | $red: #f80a0a
2 | $nimble-orange: #ff8C12
3 | $bright-yellow: #FFCA30
4 | $green: #76be21
5 | $blue: #160ede
6 | $purple: #b51bf5
7 | $font-family: 'BlinkMacSystemFont', system, -apple-system, ".SFNSDisplay-Regular", "Helvetica Neue", "Lucida Grande"
8 |
9 |
10 | body, html
11 | width: 100%
12 | display: block
13 | padding: 0
14 | margin: 0
15 | border: 0
16 | overflow: hidden
17 |
18 | body
19 | background: white
20 |
21 | div.interpret
22 | background: lighten($green, 15%)
23 | font-family: $font-family
24 | font-size: 14px
25 | padding: 6px 16px
26 | width: calc(100% - 32px)
27 | color: white
28 |
29 | div#wolfram-credit
30 | background: $green
31 | font-family: $font-family
32 | font-size: 14px
33 | color: white
34 | padding: 6px 16px
35 | height: 18px
36 | display: block
37 |
38 | span
39 | float: right
40 | height: 100%
41 | opacity: 0.8
42 | span, img
43 | vertical-align: middle
44 | -webkit-user-drag: none
45 | -webkit-user-select: none
46 | span img
47 | height: 100%
48 |
49 | // is it too late now to say sorry
50 | div.sorry
51 | font: normal normal normal 14px/1 FontAwesome
52 | color: $green
53 | font-size: 72px
54 | text-align: center
55 | margin: 12px 0 6px 0
56 |
57 | p.err
58 | text-align: center
59 | line-height: 1.4
60 |
61 | div.output
62 | display: inline-block
63 | position: relative
64 | border: 0
65 | pointer-events: auto
66 | font-size: 1m
67 | padding: 12px 16px
68 | font-family: $font-family
69 | letter-spacing: 0.5px
70 | outline: none
71 | z-index: 1
72 | overflow-y: scroll
73 |
74 | // 380 is the magic number
75 | max-height: 380px
76 |
77 | // leaving this here for adam
78 | // ::selection
79 | // background: $green
80 | // color: white
81 |
82 | div.output::-webkit-scrollbar
83 | display: none
84 |
85 | div.input
86 | display: relative
87 | width: 100%
88 | background: $green
89 | color: white
90 | input[type=text]
91 | display: block
92 | position: relative
93 | background: transparent
94 | border: 0
95 | pointer-events: auto
96 | font-size: 1em
97 | padding: 12px 16px
98 | font-family: $font-family
99 | width: calc(100% - 32px - 42px)
100 | outline: none
101 | z-index: 1
102 | color: white
103 | // making the placeholder text darker than the greyed-out button looks nice af
104 | input[type=text]::-webkit-input-placeholder
105 | opacity: 0.75
106 | color: white
107 | button
108 | font: normal normal normal 14px/1 FontAwesome /* real talk this is weird */
109 | font-weight: normal
110 | position: absolute
111 | margin: 0
112 | top: 5px
113 | right: 14px
114 | font-size: 14px
115 | border: 0
116 | outline: 0
117 | padding: 8px
118 | width: 30px
119 | max-height: 30px
120 | border-radius: 50%
121 | opacity: 0.7
122 | background: white
123 | transition: 0.25s /* fadey */
124 | color: $green
125 | z-index: 2
126 | border: none
127 | overflow: hidden
128 | // leaving this here for adam to touch
129 | // ::selection
130 | // color: $green
131 | // background: white
132 |
133 | h1
134 | text-align: center
135 |
136 | a
137 | color: $green
138 |
139 | hr
140 | background: black
141 | border: 1px solid black
142 |
143 | .image-output
144 | display: block
145 | -webkit-user-drag: none
146 |
147 | .animateLoader
148 | -webkit-animation: spin 0.75s ease-in-out infinite alternate
149 | -webkit-transform-origin: center
150 |
151 | @-webkit-keyframes spin
152 | from
153 | -webkit-transform: rotate(0deg)
154 |
155 | to
156 | -webkit-transform: rotate(360deg)
157 |
158 | h3
159 | border-top: 1px solid rgba(0, 0, 0, 0.3)
160 | font-size: 18px
161 | margin-top: 20px
162 | padding-top: 20px
163 |
164 | h3:first-of-type
165 | border: 0
166 | margin-top: 0
167 | padding-top: 0
168 |
169 | h5
170 | font-size: 14px
171 | margin: 0
172 |
--------------------------------------------------------------------------------
/src/css/colours/pink.sass:
--------------------------------------------------------------------------------
1 | $red: #dc0000
2 | $nimble-orange: #ff8C12
3 | $bright-yellow: #FFCA30
4 | $green: #76be21
5 | $blue: #287ee8
6 | $purple: #6105b0
7 | $pink: #d205a0
8 | $font-family: 'BlinkMacSystemFont', system, -apple-system, ".SFNSDisplay-Regular", "Helvetica Neue", "Lucida Grande"
9 |
10 |
11 | body, html
12 | width: 100%
13 | display: block
14 | padding: 0
15 | margin: 0
16 | border: 0
17 | overflow: hidden
18 |
19 | body
20 | background: white
21 |
22 | div.interpret
23 | background: lighten($purple, 15%)
24 | font-family: $font-family
25 | font-size: 14px
26 | padding: 6px 16px
27 | width: calc(100% - 32px)
28 | color: white
29 |
30 | div#wolfram-credit
31 | background: $purple
32 | font-family: $font-family
33 | font-size: 14px
34 | color: white
35 | padding: 6px 16px
36 | height: 18px
37 | display: block
38 |
39 | span
40 | float: right
41 | height: 100%
42 | opacity: 0.8
43 | span, img
44 | vertical-align: middle
45 | -webkit-user-drag: none
46 | -webkit-user-select: none
47 | span img
48 | height: 100%
49 |
50 | // is it too late now to say sorry
51 | div.sorry
52 | font: normal normal normal 14px/1 FontAwesome
53 | color: $purple
54 | font-size: 72px
55 | text-align: center
56 | margin: 12px 0 6px 0
57 |
58 | p.err
59 | text-align: center
60 | line-height: 1.4
61 |
62 | div.output
63 | display: inline-block
64 | position: relative
65 | border: 0
66 | pointer-events: auto
67 | font-size: 1m
68 | padding: 12px 16px
69 | font-family: $font-family
70 | letter-spacing: 0.5px
71 | outline: none
72 | z-index: 1
73 | overflow-y: scroll
74 |
75 | // 380 is the magic number
76 | max-height: 380px
77 |
78 | // leaving this here for adam
79 | // ::selection
80 | // background: $purple
81 | // color: white
82 |
83 | div.output::-webkit-scrollbar
84 | display: none
85 |
86 | div.input
87 | display: relative
88 | width: 100%
89 | background: $purple
90 | color: white
91 | input[type=text]
92 | display: block
93 | position: relative
94 | background: transparent
95 | border: 0
96 | pointer-events: auto
97 | font-size: 1em
98 | padding: 12px 16px
99 | font-family: $font-family
100 | width: calc(100% - 32px - 42px)
101 | outline: none
102 | z-index: 1
103 | color: white
104 | // making the placeholder text darker than the greyed-out button looks nice af
105 | input[type=text]::-webkit-input-placeholder
106 | opacity: 0.75
107 | color: white
108 | button
109 | font: normal normal normal 14px/1 FontAwesome /* real talk this is weird */
110 | font-weight: normal
111 | position: absolute
112 | margin: 0
113 | top: 5px
114 | right: 14px
115 | font-size: 14px
116 | border: 0
117 | outline: 0
118 | padding: 8px
119 | width: 30px
120 | max-height: 30px
121 | border-radius: 50%
122 | opacity: 0.7
123 | background: white
124 | transition: 0.25s /* fadey */
125 | color: $purple
126 | z-index: 2
127 | border: none
128 | overflow: hidden
129 | // leaving this here for adam to touch
130 | // ::selection
131 | // color: $purple
132 | // background: white
133 |
134 | h1
135 | text-align: center
136 |
137 | a
138 | color: $purple
139 |
140 | hr
141 | background: black
142 | border: 1px solid black
143 |
144 | .image-output
145 | display: block
146 | -webkit-user-drag: none
147 |
148 | .animateLoader
149 | -webkit-animation: spin 0.75s ease-in-out infinite alternate
150 | -webkit-transform-origin: center
151 |
152 | @-webkit-keyframes spin
153 | from
154 | -webkit-transform: rotate(0deg)
155 |
156 | to
157 | -webkit-transform: rotate(360deg)
158 |
159 | h3
160 | border-top: 1px solid rgba(0, 0, 0, 0.3)
161 | font-size: 18px
162 | margin-top: 20px
163 | padding-top: 20px
164 |
165 | h3:first-of-type
166 | border: 0
167 | margin-top: 0
168 | padding-top: 0
169 |
170 | h5
171 | font-size: 14px
172 | margin: 0
173 |
--------------------------------------------------------------------------------
/src/css/colours/purple.sass:
--------------------------------------------------------------------------------
1 | $red: #dc0000
2 | $nimble-orange: #ff8C12
3 | $bright-yellow: #FFCA30
4 | $green: #76be21
5 | $blue: #287ee8
6 | $purple: #6105b0
7 | $pink: #d205a0
8 | $font-family: 'BlinkMacSystemFont', system, -apple-system, ".SFNSDisplay-Regular", "Helvetica Neue", "Lucida Grande"
9 |
10 |
11 | body, html
12 | width: 100%
13 | display: block
14 | padding: 0
15 | margin: 0
16 | border: 0
17 | overflow: hidden
18 |
19 | body
20 | background: white
21 |
22 | div.interpret
23 | background: lighten($pink, 15%)
24 | font-family: $font-family
25 | font-size: 14px
26 | padding: 6px 16px
27 | width: calc(100% - 32px)
28 | color: white
29 |
30 | div#wolfram-credit
31 | background: $pink
32 | font-family: $font-family
33 | font-size: 14px
34 | color: white
35 | padding: 6px 16px
36 | height: 18px
37 | display: block
38 |
39 | span
40 | float: right
41 | height: 100%
42 | opacity: 0.8
43 | span, img
44 | vertical-align: middle
45 | -webkit-user-drag: none
46 | -webkit-user-select: none
47 | span img
48 | height: 100%
49 |
50 | // is it too late now to say sorry
51 | div.sorry
52 | font: normal normal normal 14px/1 FontAwesome
53 | color: $pink
54 | font-size: 72px
55 | text-align: center
56 | margin: 12px 0 6px 0
57 |
58 | p.err
59 | text-align: center
60 | line-height: 1.4
61 |
62 | div.output
63 | display: inline-block
64 | position: relative
65 | border: 0
66 | pointer-events: auto
67 | font-size: 1m
68 | padding: 12px 16px
69 | font-family: $font-family
70 | letter-spacing: 0.5px
71 | outline: none
72 | z-index: 1
73 | overflow-y: scroll
74 |
75 | // 380 is the magic number
76 | max-height: 380px
77 |
78 | // leaving this here for adam
79 | // ::selection
80 | // background: $pink
81 | // color: white
82 |
83 | div.output::-webkit-scrollbar
84 | display: none
85 |
86 | div.input
87 | display: relative
88 | width: 100%
89 | background: $pink
90 | color: white
91 | input[type=text]
92 | display: block
93 | position: relative
94 | background: transparent
95 | border: 0
96 | pointer-events: auto
97 | font-size: 1em
98 | padding: 12px 16px
99 | font-family: $font-family
100 | width: calc(100% - 32px - 42px)
101 | outline: none
102 | z-index: 1
103 | color: white
104 | // making the placeholder text darker than the greyed-out button looks nice af
105 | input[type=text]::-webkit-input-placeholder
106 | opacity: 0.75
107 | color: white
108 | button
109 | font: normal normal normal 14px/1 FontAwesome /* real talk this is weird */
110 | font-weight: normal
111 | position: absolute
112 | margin: 0
113 | top: 5px
114 | right: 14px
115 | font-size: 14px
116 | border: 0
117 | outline: 0
118 | padding: 8px
119 | width: 30px
120 | max-height: 30px
121 | border-radius: 50%
122 | opacity: 0.7
123 | background: white
124 | transition: 0.25s /* fadey */
125 | color: $pink
126 | z-index: 2
127 | border: none
128 | overflow: hidden
129 | // leaving this here for adam to touch
130 | // ::selection
131 | // color: $pink
132 | // background: white
133 |
134 | h1
135 | text-align: center
136 |
137 | a
138 | color: $pink
139 |
140 | hr
141 | background: black
142 | border: 1px solid black
143 |
144 | .image-output
145 | display: block
146 | -webkit-user-drag: none
147 |
148 | .animateLoader
149 | -webkit-animation: spin 0.75s ease-in-out infinite alternate
150 | -webkit-transform-origin: center
151 |
152 | @-webkit-keyframes spin
153 | from
154 | -webkit-transform: rotate(0deg)
155 |
156 | to
157 | -webkit-transform: rotate(360deg)
158 |
159 | h3
160 | border-top: 1px solid rgba(0, 0, 0, 0.3)
161 | font-size: 18px
162 | margin-top: 20px
163 | padding-top: 20px
164 |
165 | h3:first-of-type
166 | border: 0
167 | margin-top: 0
168 | padding-top: 0
169 |
170 | h5
171 | font-size: 14px
172 | margin: 0
--------------------------------------------------------------------------------
/src/css/colours/red.sass:
--------------------------------------------------------------------------------
1 | $red: #dc0000
2 | $nimble-orange: #ff8C12
3 | $bright-yellow: #FFCA30
4 | $green: #76be21
5 | $blue: #160ede
6 | $purple: #b51bf5
7 | $font-family: 'BlinkMacSystemFont', system, -apple-system, ".SFNSDisplay-Regular", "Helvetica Neue", "Lucida Grande"
8 |
9 |
10 | body, html
11 | width: 100%
12 | display: block
13 | padding: 0
14 | margin: 0
15 | border: 0
16 | overflow: hidden
17 |
18 | body
19 | background: white
20 |
21 | div.interpret
22 | background: lighten($red, 15%)
23 | font-family: $font-family
24 | font-size: 14px
25 | padding: 6px 16px
26 | width: calc(100% - 32px)
27 | color: white
28 |
29 | div#wolfram-credit
30 | background: $red
31 | font-family: $font-family
32 | font-size: 14px
33 | color: white
34 | padding: 6px 16px
35 | height: 18px
36 | display: block
37 |
38 | span
39 | float: right
40 | height: 100%
41 | opacity: 0.8
42 | span, img
43 | vertical-align: middle
44 | -webkit-user-drag: none
45 | -webkit-user-select: none
46 | span img
47 | height: 100%
48 |
49 | // is it too late now to say sorry
50 | div.sorry
51 | font: normal normal normal 14px/1 FontAwesome
52 | color: $red
53 | font-size: 72px
54 | text-align: center
55 | margin: 12px 0 6px 0
56 |
57 | p.err
58 | text-align: center
59 | line-height: 1.4
60 |
61 | div.output
62 | display: inline-block
63 | position: relative
64 | border: 0
65 | pointer-events: auto
66 | font-size: 1m
67 | padding: 12px 16px
68 | font-family: $font-family
69 | letter-spacing: 0.5px
70 | outline: none
71 | z-index: 1
72 | overflow-y: scroll
73 |
74 | // 380 is the magic number
75 | max-height: 380px
76 |
77 | // leaving this here for adam
78 | // ::selection
79 | // background: $red
80 | // color: white
81 |
82 | div.output::-webkit-scrollbar
83 | display: none
84 |
85 | div.input
86 | display: relative
87 | width: 100%
88 | background: $red
89 | color: white
90 | input[type=text]
91 | display: block
92 | position: relative
93 | background: transparent
94 | border: 0
95 | pointer-events: auto
96 | font-size: 1em
97 | padding: 12px 16px
98 | font-family: $font-family
99 | width: calc(100% - 32px - 42px)
100 | outline: none
101 | z-index: 1
102 | color: white
103 | // making the placeholder text darker than the greyed-out button looks nice af
104 | input[type=text]::-webkit-input-placeholder
105 | opacity: 0.75
106 | color: white
107 | button
108 | font: normal normal normal 14px/1 FontAwesome /* real talk this is weird */
109 | font-weight: normal
110 | position: absolute
111 | margin: 0
112 | top: 5px
113 | right: 14px
114 | font-size: 14px
115 | border: 0
116 | outline: 0
117 | padding: 8px
118 | width: 30px
119 | max-height: 30px
120 | border-radius: 50%
121 | opacity: 0.7
122 | background: white
123 | transition: 0.25s /* fadey */
124 | color: $red
125 | z-index: 2
126 | border: none
127 | overflow: hidden
128 | // leaving this here for adam to touch
129 | // ::selection
130 | // color: $red
131 | // background: white
132 |
133 | h1
134 | text-align: center
135 |
136 | a
137 | color: $red
138 |
139 | hr
140 | background: black
141 | border: 1px solid black
142 |
143 | .image-output
144 | display: block
145 | -webkit-user-drag: none
146 |
147 | .animateLoader
148 | -webkit-animation: spin 0.75s ease-in-out infinite alternate
149 | -webkit-transform-origin: center
150 |
151 | @-webkit-keyframes spin
152 | from
153 | -webkit-transform: rotate(0deg)
154 |
155 | to
156 | -webkit-transform: rotate(360deg)
157 |
158 | h3
159 | border-top: 1px solid rgba(0, 0, 0, 0.3)
160 | font-size: 18px
161 | margin-top: 20px
162 | padding-top: 20px
163 |
164 | h3:first-of-type
165 | border: 0
166 | margin-top: 0
167 | padding-top: 0
168 |
169 | h5
170 | font-size: 14px
171 | margin: 0
172 |
--------------------------------------------------------------------------------
/src/css/highcontrast.sass:
--------------------------------------------------------------------------------
1 | $red: #f80a0a
2 | $nimble-orange: #ff8C12
3 | $bright-yellow: #FFCA30
4 | $green: #76be21
5 | $blue: #160ede
6 | $purple: #b51bf5
7 | $font-family: 'BlinkMacSystemFont', system, -apple-system, ".SFNSDisplay-Regular", "Helvetica Neue", "Lucida Grande"
8 |
9 |
10 | body, html
11 | width: 100%
12 | display: block
13 | padding: 0
14 | margin: 0
15 | border: 0
16 | overflow: hidden
17 |
18 | body
19 | background: white
20 |
21 | div.interpret
22 | background: black
23 | font-family: $font-family
24 | font-size: 14px
25 | padding: 6px 16px
26 | width: calc(100% - 32px)
27 | color: white
28 | border-top: 1px solid rgba(255, 255, 255, 0.5)
29 |
30 | div#wolfram-credit
31 | background: black
32 | font-family: $font-family
33 | font-size: 14px
34 | color: white
35 | padding: 6px 16px
36 | height: 18px
37 | display: block
38 |
39 | span
40 | float: right
41 | height: 100%
42 | span, img
43 | vertical-align: middle
44 | -webkit-user-drag: none
45 | -webkit-user-select: none
46 | span img
47 | height: 100%
48 |
49 | // is it too late now to say sorry
50 | div.sorry
51 | font: normal normal normal 14px/1 FontAwesome
52 | color: #000
53 | font-size: 72px
54 | text-align: center
55 | margin: 12px 0 6px 0
56 |
57 | p.err
58 | text-align: center
59 | line-height: 1.4
60 |
61 | div.output
62 | display: inline-block
63 | position: relative
64 | border: 0
65 | pointer-events: auto
66 | font-size: 1m
67 | padding: 12px 16px
68 | font-family: $font-family
69 | letter-spacing: 0.5px
70 | outline: none
71 | z-index: 1
72 | overflow-y: scroll
73 | max-height: 380px
74 | ::selection
75 | background: white
76 | color: #000
77 |
78 | div.output::-webkit-scrollbar
79 | display: none
80 |
81 | div.input
82 | display: relative
83 | width: 100%
84 | background: #000
85 | color: white
86 | input[type=text]
87 | display: block
88 | position: relative
89 | background: transparent
90 | border: 0
91 | pointer-events: auto
92 | font-size: 1em
93 | padding: 12px 16px
94 | font-family: $font-family
95 | width: calc(100% - 32px - 42px)
96 | outline: none
97 | z-index: 1
98 | color: white
99 | // making the placeholder text darker than the greyed-out button looks nice af
100 | input[type=text]::-webkit-input-placeholder
101 | opacity: 0.75
102 | color: white
103 | button
104 | font: normal normal normal 14px/1 FontAwesome /* real talk this is weird */
105 | font-weight: normal
106 | position: absolute
107 | margin: 0
108 | top: 5px
109 | right: 14px
110 | font-size: 14px
111 | border: 0
112 | outline: 0
113 | padding: 8px
114 | width: 30px
115 | max-height: 30px
116 | border-radius: 50%
117 | opacity: 0.7
118 | background: white
119 | transition: 0.25s /* fadey */
120 | color: black
121 | z-index: 2
122 | border: none
123 | overflow: hidden
124 | ::selection
125 | color: white
126 | background: #000
127 |
128 | h1
129 | text-align: center
130 |
131 | a
132 | color: #000
133 |
134 | hr
135 | background: black
136 | border: 1px solid black
137 |
138 | .image-output
139 | display: block
140 | -webkit-user-drag: none
141 |
142 | .animateLoader
143 | -webkit-animation: spin 0.75s ease-in-out infinite alternate
144 | -webkit-transform-origin: center
145 |
146 | @-webkit-keyframes spin
147 | from
148 | -webkit-transform: rotate(0deg)
149 |
150 | to
151 | -webkit-transform: rotate(360deg)
152 |
153 | h3
154 | border-top: 1px solid rgba(0, 0, 0, 0.3)
155 | font-size: 18px
156 | margin-top: 20px
157 | padding-top: 20px
158 |
159 | h3:first-of-type
160 | border: 0
161 | margin-top: 0
162 | padding-top: 0
163 |
164 | h5
165 | font-size: 14px
166 | margin: 0
167 |
--------------------------------------------------------------------------------
/src/css/style.sass:
--------------------------------------------------------------------------------
1 | $red: #dc0000
2 | $nimble-orange: #ff8C12
3 | $bright-yellow: #FFCA30
4 | $green: #76be21
5 | $blue: #287ee8
6 | $purple: #6105b0
7 | $pink: #d205a0
8 | $font-family: 'BlinkMacSystemFont', system, -apple-system, ".SFNSDisplay-Regular", "Helvetica Neue", "Lucida Grande"
9 |
10 |
11 | body, html
12 | width: 100%
13 | display: block
14 | padding: 0
15 | margin: 0
16 | border: 0
17 | overflow: hidden
18 |
19 | body
20 | background: white
21 |
22 | div.interpret
23 | background: lighten($nimble-orange, 15%)
24 | font-family: $font-family
25 | font-size: 14px
26 | padding: 6px 16px
27 | width: calc(100% - 32px)
28 | color: white
29 |
30 | div#wolfram-credit
31 | background: $nimble-orange
32 | font-family: $font-family
33 | font-size: 14px
34 | color: white
35 | padding: 6px 16px
36 | height: 18px
37 | display: block
38 |
39 | span
40 | float: right
41 | height: 100%
42 | opacity: 0.8
43 | span, img
44 | vertical-align: middle
45 | -webkit-user-drag: none
46 | -webkit-user-select: none
47 | span img
48 | height: 100%
49 |
50 | // is it too late now to say sorry
51 | div.sorry
52 | font: normal normal normal 14px/1 FontAwesome
53 | color: $nimble-orange
54 | font-size: 72px
55 | text-align: center
56 | margin: 12px 0 6px 0
57 |
58 | p.err
59 | text-align: center
60 | line-height: 1.4
61 |
62 | div.output
63 | display: inline-block
64 | position: relative
65 | border: 0
66 | pointer-events: auto
67 | font-size: 1m
68 | padding: 12px 16px
69 | font-family: $font-family
70 | letter-spacing: 0.5px
71 | outline: none
72 | z-index: 1
73 | overflow-y: scroll
74 |
75 | // 380 is the magic number
76 | max-height: 380px
77 |
78 | // leaving this here for adam
79 | // ::selection
80 | // background: $nimble-orange
81 | // color: white
82 |
83 | div.output::-webkit-scrollbar
84 | display: none
85 |
86 | div.input
87 | display: relative
88 | width: 100%
89 | background: $nimble-orange
90 | color: white
91 | input[type=text]
92 | display: block
93 | position: relative
94 | background: transparent
95 | border: 0
96 | pointer-events: auto
97 | font-size: 1em
98 | padding: 12px 16px
99 | font-family: $font-family
100 | width: calc(100% - 32px - 42px)
101 | outline: none
102 | z-index: 1
103 | color: white
104 | // making the placeholder text darker than the greyed-out button looks nice af
105 | input[type=text]::-webkit-input-placeholder
106 | opacity: 0.75
107 | color: white
108 | button
109 | font: normal normal normal 14px/1 FontAwesome /* real talk this is weird */
110 | font-weight: normal
111 | position: absolute
112 | margin: 0
113 | top: 5px
114 | right: 14px
115 | font-size: 14px
116 | border: 0
117 | outline: 0
118 | padding: 8px
119 | width: 30px
120 | max-height: 30px
121 | border-radius: 50%
122 | opacity: 0.7
123 | background: white
124 | transition: 0.25s /* fadey */
125 | color: $nimble-orange
126 | z-index: 2
127 | border: none
128 | overflow: hidden
129 | // leaving this here for adam to touch
130 | // ::selection
131 | // color: $nimble-orange
132 | // background: white
133 |
134 | h1
135 | text-align: center
136 |
137 | a
138 | color: $nimble-orange
139 |
140 | hr
141 | background: black
142 | border: 1px solid black
143 |
144 | .image-output
145 | display: block
146 | -webkit-user-drag: none
147 |
148 | .animateLoader
149 | -webkit-animation: spin 0.75s ease-in-out infinite alternate
150 | -webkit-transform-origin: center
151 |
152 | @-webkit-keyframes spin
153 | from
154 | -webkit-transform: rotate(0deg)
155 |
156 | to
157 | -webkit-transform: rotate(360deg)
158 |
159 | h3
160 | border-top: 1px solid rgba(0, 0, 0, 0.3)
161 | font-size: 18px
162 | margin-top: 20px
163 | padding-top: 20px
164 |
165 | h3:first-of-type
166 | border: 0
167 | margin-top: 0
168 | padding-top: 0
169 |
170 | h5
171 | font-size: 14px
172 | margin: 0
173 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 
55 | Sorry! I can't find the answer.
Try searching it on WolframAlpha.