├── utils ├── __init__.py ├── slug.py ├── web_capturer.py └── palette_gen.py ├── .gitignore ├── static ├── favicon │ ├── favicon.ico │ ├── apple-icon.png │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon-96x96.png │ ├── ms-icon-70x70.png │ ├── ms-icon-144x144.png │ ├── ms-icon-150x150.png │ ├── ms-icon-310x310.png │ ├── android-icon-36x36.png │ ├── android-icon-48x48.png │ ├── android-icon-72x72.png │ ├── android-icon-96x96.png │ ├── apple-icon-114x114.png │ ├── apple-icon-120x120.png │ ├── apple-icon-144x144.png │ ├── apple-icon-152x152.png │ ├── apple-icon-180x180.png │ ├── apple-icon-57x57.png │ ├── apple-icon-60x60.png │ ├── apple-icon-72x72.png │ ├── apple-icon-76x76.png │ ├── android-icon-144x144.png │ ├── android-icon-192x192.png │ └── apple-icon-precomposed.png ├── images │ └── turpenscape-bg.jpg ├── .sass-cache │ ├── 1bb31c22819dfde35e400fc3a2eecfa09d811e2e │ │ ├── home.scssc │ │ ├── _turpenscape.scssc │ │ ├── generate-form.scssc │ │ └── palette-result.scssc │ └── 2d6fbd830143bac264e26d9060dd44c94642ba66 │ │ └── style.scssc ├── style.scss ├── palettes │ └── kandinsky.gpl ├── scripts │ └── script.js ├── styles │ ├── _turpenscape.scss │ ├── home.scss │ ├── palette-result.scss │ └── generate-form.scss ├── style.css └── normalize.css ├── wsgi.py ├── templates ├── palette.gpl ├── palettes.html ├── palette.html ├── layout.html └── create.html ├── requirements.txt ├── LICENSE ├── turpenscape.py └── README.md /utils/__init__.py: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | __pycache__ 2 | *.pyc 3 | geckodriver.log 4 | -------------------------------------------------------------------------------- /static/favicon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Xaviju/turpenscape/HEAD/static/favicon/favicon.ico -------------------------------------------------------------------------------- /static/favicon/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Xaviju/turpenscape/HEAD/static/favicon/apple-icon.png -------------------------------------------------------------------------------- /wsgi.py: -------------------------------------------------------------------------------- 1 | from turpenscape import application 2 | 3 | if __name__ == "__main__": 4 | application.run() 5 | -------------------------------------------------------------------------------- /static/favicon/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Xaviju/turpenscape/HEAD/static/favicon/favicon-16x16.png -------------------------------------------------------------------------------- /static/favicon/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Xaviju/turpenscape/HEAD/static/favicon/favicon-32x32.png -------------------------------------------------------------------------------- /static/favicon/favicon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Xaviju/turpenscape/HEAD/static/favicon/favicon-96x96.png -------------------------------------------------------------------------------- /static/favicon/ms-icon-70x70.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Xaviju/turpenscape/HEAD/static/favicon/ms-icon-70x70.png -------------------------------------------------------------------------------- /static/images/turpenscape-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Xaviju/turpenscape/HEAD/static/images/turpenscape-bg.jpg -------------------------------------------------------------------------------- /static/favicon/ms-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Xaviju/turpenscape/HEAD/static/favicon/ms-icon-144x144.png -------------------------------------------------------------------------------- /static/favicon/ms-icon-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Xaviju/turpenscape/HEAD/static/favicon/ms-icon-150x150.png -------------------------------------------------------------------------------- /static/favicon/ms-icon-310x310.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Xaviju/turpenscape/HEAD/static/favicon/ms-icon-310x310.png -------------------------------------------------------------------------------- /static/favicon/android-icon-36x36.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Xaviju/turpenscape/HEAD/static/favicon/android-icon-36x36.png -------------------------------------------------------------------------------- /static/favicon/android-icon-48x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Xaviju/turpenscape/HEAD/static/favicon/android-icon-48x48.png -------------------------------------------------------------------------------- /static/favicon/android-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Xaviju/turpenscape/HEAD/static/favicon/android-icon-72x72.png -------------------------------------------------------------------------------- /static/favicon/android-icon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Xaviju/turpenscape/HEAD/static/favicon/android-icon-96x96.png -------------------------------------------------------------------------------- /static/favicon/apple-icon-114x114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Xaviju/turpenscape/HEAD/static/favicon/apple-icon-114x114.png -------------------------------------------------------------------------------- /static/favicon/apple-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Xaviju/turpenscape/HEAD/static/favicon/apple-icon-120x120.png -------------------------------------------------------------------------------- /static/favicon/apple-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Xaviju/turpenscape/HEAD/static/favicon/apple-icon-144x144.png -------------------------------------------------------------------------------- /static/favicon/apple-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Xaviju/turpenscape/HEAD/static/favicon/apple-icon-152x152.png -------------------------------------------------------------------------------- /static/favicon/apple-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Xaviju/turpenscape/HEAD/static/favicon/apple-icon-180x180.png -------------------------------------------------------------------------------- /static/favicon/apple-icon-57x57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Xaviju/turpenscape/HEAD/static/favicon/apple-icon-57x57.png -------------------------------------------------------------------------------- /static/favicon/apple-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Xaviju/turpenscape/HEAD/static/favicon/apple-icon-60x60.png -------------------------------------------------------------------------------- /static/favicon/apple-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Xaviju/turpenscape/HEAD/static/favicon/apple-icon-72x72.png -------------------------------------------------------------------------------- /static/favicon/apple-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Xaviju/turpenscape/HEAD/static/favicon/apple-icon-76x76.png -------------------------------------------------------------------------------- /static/favicon/android-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Xaviju/turpenscape/HEAD/static/favicon/android-icon-144x144.png -------------------------------------------------------------------------------- /static/favicon/android-icon-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Xaviju/turpenscape/HEAD/static/favicon/android-icon-192x192.png -------------------------------------------------------------------------------- /static/favicon/apple-icon-precomposed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Xaviju/turpenscape/HEAD/static/favicon/apple-icon-precomposed.png -------------------------------------------------------------------------------- /static/.sass-cache/1bb31c22819dfde35e400fc3a2eecfa09d811e2e/home.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Xaviju/turpenscape/HEAD/static/.sass-cache/1bb31c22819dfde35e400fc3a2eecfa09d811e2e/home.scssc -------------------------------------------------------------------------------- /static/.sass-cache/2d6fbd830143bac264e26d9060dd44c94642ba66/style.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Xaviju/turpenscape/HEAD/static/.sass-cache/2d6fbd830143bac264e26d9060dd44c94642ba66/style.scssc -------------------------------------------------------------------------------- /static/.sass-cache/1bb31c22819dfde35e400fc3a2eecfa09d811e2e/_turpenscape.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Xaviju/turpenscape/HEAD/static/.sass-cache/1bb31c22819dfde35e400fc3a2eecfa09d811e2e/_turpenscape.scssc -------------------------------------------------------------------------------- /static/.sass-cache/1bb31c22819dfde35e400fc3a2eecfa09d811e2e/generate-form.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Xaviju/turpenscape/HEAD/static/.sass-cache/1bb31c22819dfde35e400fc3a2eecfa09d811e2e/generate-form.scssc -------------------------------------------------------------------------------- /static/.sass-cache/1bb31c22819dfde35e400fc3a2eecfa09d811e2e/palette-result.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Xaviju/turpenscape/HEAD/static/.sass-cache/1bb31c22819dfde35e400fc3a2eecfa09d811e2e/palette-result.scssc -------------------------------------------------------------------------------- /static/style.scss: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Open Sans', sans-serif; 3 | } 4 | 5 | @import "styles/turpenscape"; 6 | @import "styles/home"; 7 | @import "styles/generate-form"; 8 | @import "styles/palette-result"; 9 | -------------------------------------------------------------------------------- /templates/palette.gpl: -------------------------------------------------------------------------------- 1 | GIMP Palette 2 | Name: {{palette_name}} 3 | # 4 | 5 | {% for color in palette %}{{color[0]}} {{color[1]}} {{color[2]}} {{'#%02x%02x%02x' % color}} 6 | {% endfor %} 7 | 255 255 255 Grey1 8 | 204 204 204 Grey2 9 | 153 153 153 Grey3 10 | 102 102 102 Grey4 11 | 45 45 45 Grey5 12 | 0 0 0 Black 13 | -------------------------------------------------------------------------------- /static/palettes/kandinsky.gpl: -------------------------------------------------------------------------------- 1 | GIMP Palette 2 | Name: Kandinsky Winter Landscape 3 | # 4 | 5 | 6 | 38 49 73 #263149 7 | 8 | 215 190 138 #d7be8a 9 | 10 | 102 135 157 #66879d 11 | 12 | 99 66 82 #634252 13 | 14 | 204 173 53 #ccad35 15 | 16 | 202 202 211 #cacad3 17 | 18 | 151 171 149 #97ab95 19 | 20 | 161 117 122 #a1757a 21 | 22 | 57 163 158 #39a39e 23 | -------------------------------------------------------------------------------- /utils/slug.py: -------------------------------------------------------------------------------- 1 | import re 2 | from unidecode import unidecode 3 | 4 | _punct_re = re.compile(r'[\t !"#$%&\'()*\-/<=>?@\[\\\]^_`{|},.]+') 5 | 6 | 7 | def slugify(text, delim=u'-'): 8 | """Generates an ASCII-only slug.""" 9 | result = [] 10 | for word in _punct_re.split(text.lower()): 11 | result.extend(unidecode(word).split()) 12 | return delim.join(result) 13 | -------------------------------------------------------------------------------- /static/scripts/script.js: -------------------------------------------------------------------------------- 1 | // const divs = document.querySelectorAll('div'); 2 | // 3 | // function logText(e) { 4 | // console.log(this.classList.value); 5 | // // e.stopPropagation(); // stop bubbling! 6 | // // console.log(this); 7 | // } 8 | // divs.forEach(div => div.addEventListener('click', logText, { 9 | // capture: false, 10 | // once: true 11 | // })); 12 | // button.addEventListener('click', () => { 13 | // console.log('Click!!!'); 14 | // }, { 15 | // once: true 16 | // }); 17 | -------------------------------------------------------------------------------- /requirements.txt: -------------------------------------------------------------------------------- 1 | click==6.7 2 | colorthief==0.2 3 | decorator==4.0.11 4 | Flask==0.12 5 | ipdb==0.10.1 6 | ipython==5.1.0 7 | ipython-genutils==0.1.0 8 | itsdangerous==0.24 9 | Jinja2==2.9.4 10 | MarkupSafe==0.23 11 | olefile==0.44 12 | pexpect==4.2.1 13 | pickleshare==0.7.4 14 | Pillow==4.0.0 15 | prompt-toolkit==1.0.9 16 | ptyprocess==0.5.1 17 | Pygments==2.1.3 18 | simplegeneric==0.8.1 19 | six==1.10.0 20 | traitlets==4.3.1 21 | Unidecode==0.4.20 22 | wcwidth==0.1.7 23 | Werkzeug==0.11.15 24 | 25 | selenium==3.0.2 # Chrome driver (chromium or google-chrome) is needed 26 | pyvirtualdisplay==0.2.1 # Xvfb is needed 27 | -------------------------------------------------------------------------------- /static/styles/_turpenscape.scss: -------------------------------------------------------------------------------- 1 | .turpenscape-wrapper { 2 | width: 100vw; 3 | height: 100vh; 4 | background: linear-gradient(135deg, #a40000 20%, #ccc747 50%, #8ae234 80%); 5 | background: linear-gradient(135deg, #a40000 20%, #ccc747 50%, #8ae234 80%), url("images/turpenscape-bg.jpg"); 6 | opacity: .8; 7 | background-blend-mode: multiply; 8 | background-size: cover; 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | footer { 13 | position: absolute; 14 | bottom: 1rem; 15 | left: 1rem; 16 | a { 17 | color: #fff; 18 | text-decoration: none; 19 | &:hover { 20 | text-decoration: underline; 21 | } 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /static/styles/home.scss: -------------------------------------------------------------------------------- 1 | .turpenscape-container { 2 | display: flex; 3 | color: white; 4 | max-width: 840px; 5 | } 6 | 7 | .turpenscape-info { 8 | flex-shrink: 1; 9 | flex-grow: 1; 10 | padding-right: 4rem; 11 | h1 { 12 | font-size: 4rem; 13 | text-transform: uppercase; 14 | font-family: 'Exo 2', sans-serif; 15 | margin: 0; 16 | font-weight: 400; 17 | } 18 | h2 { 19 | font-size: 2rem; 20 | margin-top: 0; 21 | font-weight: lighter; 22 | } 23 | ul { 24 | list-style-type: none; 25 | margin: 0; 26 | padding: 0; 27 | a { 28 | color: #fff; 29 | text-decoration: none; 30 | padding: .5rem 0; 31 | display: inline-block; 32 | &:hover { 33 | text-decoration: underline; 34 | } 35 | } 36 | } 37 | 38 | } 39 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Xaviju 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /utils/web_capturer.py: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env python 2 | # -*- coding: UTF-8 -*- 3 | 4 | from pyvirtualdisplay import Display 5 | from selenium import webdriver 6 | 7 | from time import sleep 8 | import sys 9 | 10 | from contextlib import contextmanager 11 | 12 | 13 | @contextmanager 14 | def create_hidden_display(width, height): 15 | display = Display(visible=0, size=(width, height)) 16 | display.start() 17 | yield display 18 | display.stop() 19 | 20 | @contextmanager 21 | def create_driver(): 22 | driver = webdriver.Chrome() 23 | driver.maximize_window() 24 | yield driver 25 | driver.quit() 26 | 27 | 28 | def capture_web(url): 29 | with create_hidden_display(1440, 900): 30 | with create_driver() as driver: 31 | driver.get(url) 32 | sleep(5) 33 | image_bin = driver.get_screenshot_as_png() 34 | 35 | return image_bin 36 | 37 | 38 | if __name__ == '__main__': 39 | # Ex: python web_capturer.py https://taiga.io 40 | from io import BytesIO 41 | from palette_gen import generate_palette 42 | 43 | image_bin = capture_web(sys.argv[1]) 44 | 45 | print(generate_palette(BytesIO(image_bin))) 46 | -------------------------------------------------------------------------------- /utils/palette_gen.py: -------------------------------------------------------------------------------- 1 | #!/usr/bin/python 2 | 3 | # usage: turpentine 4 | 5 | import sys 6 | import argparse 7 | from colorthief import ColorThief 8 | 9 | # parser = argparse.ArgumentParser(description='Create a palette from an image') 10 | # parser.add_argument('--image', dest='image', help='Set the image to turpentine', type=argparse.FileType('r')) 11 | # parser.add_argument('--palette', dest='palette_file', help='Set the palette name') 12 | # args = parser.parse_args() 13 | 14 | 15 | def generate_palette(Image): 16 | color_thief = ColorThief(Image) 17 | palette = color_thief.get_palette() 18 | return palette 19 | 20 | def write_palette(palette): 21 | 22 | if args.palette_file: 23 | file = open( args.palette_file + ".gpl", "w") 24 | file.write("GIMP Palette\n") 25 | file.write("Name: %s palette\n" % (args.palette_file)) 26 | else: 27 | file = open( "palette.gpl", "w") 28 | file.write("GIMP Palette\n") 29 | file.write("Name: %s palette\n" % (args.palette_file)) 30 | 31 | file.write("#\n") 32 | file.write("\n") 33 | 34 | for color in palette: 35 | 36 | hex = '#%02x%02x%02x' % color 37 | file.write("%s %s %s %s\n" % (color[0], color[1], color[2], hex)) 38 | 39 | # if __name__ == '__main__': 40 | # parser = argparse.ArgumentParser(description='Process some integers.') 41 | # gen_palette = generate_palette(args.image) 42 | # write_palette(gen_palette) 43 | -------------------------------------------------------------------------------- /templates/palettes.html: -------------------------------------------------------------------------------- 1 | {% extends "layout.html" %} {% block body %} 2 |
3 |

Turpenscape

4 | Create Palette 5 |

PH-385

6 |

Clyfford Still

7 |

Clyfford Still was an American painter, and one of the leading figures in the first generation of Abstract Expressionists, who developed a new, powerful approach to painting in the years immediately following World War II. Still has been credited with laying the groundwork for the movement, as his shift from representational to abstract painting occurred between 1938 and 1942, earlier than his colleagues like Jackson Pollock and Mark Rothko, who continued to paint in figurative-surrealist styles well into the 1940s.

8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | 18 |
19 | {% endblock %} 20 | -------------------------------------------------------------------------------- /turpenscape.py: -------------------------------------------------------------------------------- 1 | from flask import Flask, render_template, request, redirect 2 | import base64 3 | from utils.palette_gen import generate_palette 4 | from utils.slug import slugify 5 | 6 | application = Flask(__name__) 7 | application.config['MAX_CONTENT_LENGTH'] = 2 * 1024 * 1024 8 | 9 | ALLOWED_EXTENSIONS = set(['png', 'jpg', 'jpeg']) 10 | def allowed_file(filename): 11 | return '.' in filename and \ 12 | filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS 13 | 14 | @application.route('/palettes') 15 | def palettes(): 16 | return render_template('palettes.html') 17 | 18 | @application.route('/', methods=['GET', 'POST']) 19 | def home(): 20 | if request.method == 'POST': 21 | if 'file' not in request.files: 22 | flash('No file part') 23 | return redirect(request.url) 24 | 25 | file = request.files['file'] 26 | if file.filename == '': 27 | flash('No selected file') 28 | return redirect(request.url) 29 | 30 | if file and allowed_file(file.filename): 31 | 32 | palette = generate_palette(file) 33 | palette_name = slugify(request.form['palette_name']) 34 | 35 | template = render_template( 36 | 'palette.gpl', 37 | palette=palette, 38 | palette_name=palette_name 39 | ) 40 | 41 | file.seek(0) 42 | image = base64.b64encode(file.read()) 43 | image = image.decode("utf-8") 44 | 45 | return render_template( 46 | 'palette.html', 47 | palette=palette, 48 | palette_name=palette_name, 49 | template=template, 50 | image=image 51 | ) 52 | 53 | return render_template('create.html') 54 | 55 | if __name__ == '__main__': 56 | application.run(host='0.0.0.0') 57 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Turpenscape 2 | **Turpenscape** allows designers to create Inkscape (and Gimp!) palettes from an image. It will extract the most prominent colors of the uploaded image and will return a palette file `GPL` that can be read by inkscape. 3 | 4 | ![Using Turpenscape](http://i.imgur.com/CK6Kg4H.jpg) 5 | 6 | ![Turpenscape result](http://i.imgur.com/E74CSbz.jpg) 7 | 8 | ## Why Turpenscape? 9 | Turpenscape can be very useful to create palettes from images. Designers, looking for inspiration, use images from paintings or photographs to find the colors that fit into their design. 10 | 11 | Soon, we will add some example palettes from great artists! 12 | 13 | ## How do I install a palette in Inkscape? 14 | 15 | Installing a palette its a very simple process that can be carried out using your File Manager 16 | 17 | 1. Generate a palette from the app or download one of our references. Remember to type a memorable palette name. 18 | 2. Copy the individual `GPL` files into your Inkscape config folder under the `palettes` folder. If it's not there, create it. 19 | 20 | - For Linux and OS X: the local user directory is `~/.config/inkscape/palettes` 21 | - For Windows: Copy the file under 22 | - `%PROGRAMFILES%\Inkscape\share\palettes`. (64 bits) 23 | - `%PROGRAMFILES(x86)%\Inkscape\share\palettes`. (32 bits) 24 | 25 | 3. Launch Inkscape (close it first if it's already running). 26 | 4. Find the palettes list at the bottom-right part of your screen. You should see your palette in the dropdown. 27 | 28 | ## How can I contribute? 29 | Please fill out an issue and provide a image reference before any pull request. Discussion should be open. 30 | 31 | ## How to create my palette from the Inkscape UI? 32 | That's great too! Although this is not the repo you are looking for. You should totally read [how to create custom color palettes in inkscape](http://goinkscape.com/custom-color-palettes-in-inkscape/) 33 | -------------------------------------------------------------------------------- /static/styles/palette-result.scss: -------------------------------------------------------------------------------- 1 | .palette-result-wrapper { 2 | width: 100vw; 3 | height: 100vh; 4 | background-size: cover; 5 | background-blend-mode: multiply; 6 | display: flex; 7 | align-items: center; 8 | justify-content: center; 9 | } 10 | 11 | .palette-result-container { 12 | color: white; 13 | max-width: 840px; 14 | display: flex; 15 | .palette-list { 16 | display: flex; 17 | flex-basis: 350px; 18 | flex-shrink: 0; 19 | flex-grow: 0; 20 | flex-wrap: wrap; 21 | } 22 | .palette-info { 23 | flex-grow: 1; 24 | padding: 1rem; 25 | background: rgba(0, 0, 0, .6); 26 | &-logo{ 27 | font-size: 2.75rem; 28 | text-transform: uppercase; 29 | font-family: 'Exo 2', sans-serif; 30 | margin: 0; 31 | font-weight: 400; 32 | } 33 | &-rtfm{ 34 | font-size: 1.5rem; 35 | margin-top: 0; 36 | font-weight: lighter; 37 | } 38 | p { 39 | font-size: 18px; 40 | font-weight: lighter; 41 | } 42 | } 43 | .get-palette { 44 | display: block; 45 | background: #2dafbe; 46 | color: #fff; 47 | text-align: center; 48 | font-size: 18px; 49 | padding: 1rem; 50 | text-decoration: none; 51 | border-radius: 4px; 52 | text-transform: uppercase; 53 | margin-top: 1.5rem; 54 | &:hover { 55 | background: #228793; 56 | transition: background .2s; 57 | cursor: pointer; 58 | } 59 | } 60 | .palete-color-container { 61 | background: #fff; 62 | padding: .25rem; 63 | margin: .5rem; 64 | color: #222; 65 | text-align: center; 66 | } 67 | .palette-color { 68 | width: 5rem; 69 | height: 5rem; 70 | } 71 | .palette-hex { 72 | display: block; 73 | padding: .75rem 0; 74 | font-weight: lighter; 75 | } 76 | .back { 77 | color: #fff; 78 | font-size: 21px; 79 | padding: 1rem; 80 | text-decoration: none; 81 | position: absolute; 82 | top: 0; 83 | left: 0; 84 | &:hover { 85 | color: #448605; 86 | cursor: pointer; 87 | transition: color .2s; 88 | } 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /templates/palette.html: -------------------------------------------------------------------------------- 1 | {% extends "layout.html" %} {% block body %} 2 | Fork me on GitHub 3 |
4 | 5 |
6 |
7 | {% for color in palette %} 8 |
9 |
10 | {{'#%02x%02x%02x' % color}} 11 |
12 | {% endfor %} 13 |
14 |
15 |

Turpenscape

16 |

How to install palettes

17 |

This application allows you to generate palettes in GPL format that is used by Inkscape and GIMP.

18 |

Installing a palette its a very simple process that can be carried out using your File Manager:

19 |
    20 |
  • For Linux and OS X: the local user directory is 
    ~/.config/inkscape/palettes
    • 21 |
  • For Windows: Copy the file under 
    %PROGRAMFILES%\Inkscape\share\palettes
    • 22 |
23 | Get palette File! 24 |
25 | ⇦ Create new palette 26 |
27 | 28 | 29 | 30 |
31 | 32 | 37 | {% endblock %} 38 | -------------------------------------------------------------------------------- /static/styles/generate-form.scss: -------------------------------------------------------------------------------- 1 | .turpenscape-form { 2 | flex-basis: 350px; 3 | flex-shrink: 0; 4 | background: rgba(0, 0, 0, .9); 5 | overflow: hidden; 6 | position: relative; 7 | header { 8 | background: #2e3436; 9 | padding: 1rem; 10 | } 11 | .nav-generator { 12 | background: #424b4e; 13 | display: flex; 14 | list-style-type: none; 15 | margin: 0; 16 | padding: 0; 17 | } 18 | li { 19 | flex: 1; 20 | text-align: center; 21 | } 22 | a { 23 | padding: 1rem; 24 | display: block; 25 | color: #fff; 26 | text-decoration: none; 27 | border-bottom: 2px solid transparent; 28 | &.selected { 29 | border-bottom: 2px solid rgb(210, 27, 69); 30 | } 31 | } 32 | form { 33 | padding: 1rem; 34 | color: #ffffff; 35 | &.active { 36 | padding: 1rem; 37 | color: #ffffff; 38 | } 39 | fieldset { 40 | border: 0; 41 | } 42 | label { 43 | margin-bottom: .25rem; 44 | display: block; 45 | } 46 | input { 47 | width: 92%; 48 | padding: .5rem; 49 | background: #222; 50 | color: #fcfcfc; 51 | border: 1px solid #000; 52 | white-space: nowrap; 53 | text-overflow: ellipsis; 54 | overflow: hidden; 55 | &[type="submit"] { 56 | width: 100%; 57 | padding: .5rem; 58 | background: #4e9a06; 59 | border-radius: 5px; 60 | color: #fff; 61 | padding: 1rem 0; 62 | border: 0; 63 | &:hover { 64 | background: #448605; 65 | transition: background .2s; 66 | cursor: pointer; 67 | } 68 | 69 | } 70 | } 71 | } 72 | .palette-form-wrapper { 73 | display: flex; 74 | width: 600px; 75 | transition: all .3s ease-in; 76 | &.from-url { 77 | transform: translateX(-100%); 78 | } 79 | } 80 | // .form-file { 81 | // transform: translateX(100%); 82 | // transition: all .3s ease-in; 83 | // &.active { 84 | // transform: translateX(0); 85 | // transition: all .3s ease-in; 86 | // } 87 | // } 88 | // .form-url { 89 | // transform: translateX(-100%); 90 | // transition: all .3s ease-in; 91 | // &.active { 92 | // transform: translateX(0); 93 | // transition: all .3s ease-in; 94 | // } 95 | // } 96 | } 97 | -------------------------------------------------------------------------------- /templates/layout.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Turpenscape - Generate Inkscape and gimp palettes from images 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | {% for message in get_flashed_messages() %} 30 |
{{ message }}
31 | {% endfor %} 32 | {% block body %}{% endblock %} 33 | 34 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /templates/create.html: -------------------------------------------------------------------------------- 1 | {% extends "layout.html" %} {% block body %} 2 |
3 | Fork me on GitHub 4 |
5 |
6 |

Turpenscape

7 |

Generate Inkscape palettes from your images

8 | 25 |
26 |
27 |
28 | Generate Palette 29 |
30 | 38 |
39 |
40 |
41 | 42 | 43 |
44 |
45 | 46 | 47 |
48 | 49 |
50 |
51 |
52 | 53 | 54 |
55 |
56 | 57 | 58 |
59 | 60 |
61 |
62 |
63 |
64 | 69 | 70 |
71 | {% endblock %} 72 | -------------------------------------------------------------------------------- /static/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Open Sans', sans-serif; } 3 | 4 | .turpenscape-wrapper { 5 | width: 100vw; 6 | height: 100vh; 7 | background: linear-gradient(135deg, #a40000 20%, #ccc747 50%, #8ae234 80%); 8 | background: linear-gradient(135deg, #a40000 20%, #ccc747 50%, #8ae234 80%), url("images/turpenscape-bg.jpg"); 9 | opacity: .8; 10 | background-blend-mode: multiply; 11 | background-size: cover; 12 | display: flex; 13 | align-items: center; 14 | justify-content: center; } 15 | .turpenscape-wrapper footer { 16 | position: absolute; 17 | bottom: 1rem; 18 | left: 1rem; } 19 | .turpenscape-wrapper footer a { 20 | color: #fff; 21 | text-decoration: none; } 22 | .turpenscape-wrapper footer a:hover { 23 | text-decoration: underline; } 24 | 25 | .turpenscape-container { 26 | display: flex; 27 | color: white; 28 | max-width: 840px; } 29 | 30 | .turpenscape-info { 31 | flex-shrink: 1; 32 | flex-grow: 1; 33 | padding-right: 4rem; } 34 | .turpenscape-info h1 { 35 | font-size: 4rem; 36 | text-transform: uppercase; 37 | font-family: 'Exo 2', sans-serif; 38 | margin: 0; 39 | font-weight: 400; } 40 | .turpenscape-info h2 { 41 | font-size: 2rem; 42 | margin-top: 0; 43 | font-weight: lighter; } 44 | .turpenscape-info ul { 45 | list-style-type: none; 46 | margin: 0; 47 | padding: 0; } 48 | .turpenscape-info ul a { 49 | color: #fff; 50 | text-decoration: none; 51 | padding: .5rem 0; 52 | display: inline-block; } 53 | .turpenscape-info ul a:hover { 54 | text-decoration: underline; } 55 | 56 | .turpenscape-form { 57 | flex-basis: 350px; 58 | flex-shrink: 0; 59 | background: rgba(0, 0, 0, 0.9); 60 | overflow: hidden; 61 | position: relative; } 62 | .turpenscape-form header { 63 | background: #2e3436; 64 | padding: 1rem; } 65 | .turpenscape-form .nav-generator { 66 | background: #424b4e; 67 | display: flex; 68 | list-style-type: none; 69 | margin: 0; 70 | padding: 0; } 71 | .turpenscape-form li { 72 | flex: 1; 73 | text-align: center; } 74 | .turpenscape-form a { 75 | padding: 1rem; 76 | display: block; 77 | color: #fff; 78 | text-decoration: none; 79 | border-bottom: 2px solid transparent; } 80 | .turpenscape-form a.selected { 81 | border-bottom: 2px solid #d21b45; } 82 | .turpenscape-form form { 83 | padding: 1rem; 84 | color: #ffffff; } 85 | .turpenscape-form form.active { 86 | padding: 1rem; 87 | color: #ffffff; } 88 | .turpenscape-form form fieldset { 89 | border: 0; } 90 | .turpenscape-form form label { 91 | margin-bottom: .25rem; 92 | display: block; } 93 | .turpenscape-form form input { 94 | width: 92%; 95 | padding: .5rem; 96 | background: #222; 97 | color: #fcfcfc; 98 | border: 1px solid #000; 99 | white-space: nowrap; 100 | text-overflow: ellipsis; 101 | overflow: hidden; } 102 | .turpenscape-form form input[type="submit"] { 103 | width: 100%; 104 | padding: .5rem; 105 | background: #4e9a06; 106 | border-radius: 5px; 107 | color: #fff; 108 | padding: 1rem 0; 109 | border: 0; } 110 | .turpenscape-form form input[type="submit"]:hover { 111 | background: #448605; 112 | transition: background .2s; 113 | cursor: pointer; } 114 | .turpenscape-form .palette-form-wrapper { 115 | display: flex; 116 | width: 600px; 117 | transition: all .3s ease-in; } 118 | .turpenscape-form .palette-form-wrapper.from-url { 119 | transform: translateX(-100%); } 120 | 121 | .palette-result-wrapper { 122 | width: 100vw; 123 | height: 100vh; 124 | background-size: cover; 125 | background-blend-mode: multiply; 126 | display: flex; 127 | align-items: center; 128 | justify-content: center; } 129 | 130 | .palette-result-container { 131 | color: white; 132 | max-width: 840px; 133 | display: flex; } 134 | .palette-result-container .palette-list { 135 | display: flex; 136 | flex-basis: 350px; 137 | flex-shrink: 0; 138 | flex-grow: 0; 139 | flex-wrap: wrap; } 140 | .palette-result-container .palette-info { 141 | flex-grow: 1; 142 | padding: 1rem; 143 | background: rgba(0, 0, 0, 0.6); } 144 | .palette-result-container .palette-info-logo { 145 | font-size: 2.75rem; 146 | text-transform: uppercase; 147 | font-family: 'Exo 2', sans-serif; 148 | margin: 0; 149 | font-weight: 400; } 150 | .palette-result-container .palette-info-rtfm { 151 | font-size: 1.5rem; 152 | margin-top: 0; 153 | font-weight: lighter; } 154 | .palette-result-container .palette-info p { 155 | font-size: 18px; 156 | font-weight: lighter; } 157 | .palette-result-container .get-palette { 158 | display: block; 159 | background: #2dafbe; 160 | color: #fff; 161 | text-align: center; 162 | font-size: 18px; 163 | padding: 1rem; 164 | text-decoration: none; 165 | border-radius: 4px; 166 | text-transform: uppercase; 167 | margin-top: 1.5rem; } 168 | .palette-result-container .get-palette:hover { 169 | background: #228793; 170 | transition: background .2s; 171 | cursor: pointer; } 172 | .palette-result-container .palete-color-container { 173 | background: #fff; 174 | padding: .25rem; 175 | margin: .5rem; 176 | color: #222; 177 | text-align: center; } 178 | .palette-result-container .palette-color { 179 | width: 5rem; 180 | height: 5rem; } 181 | .palette-result-container .palette-hex { 182 | display: block; 183 | padding: .75rem 0; 184 | font-weight: lighter; } 185 | .palette-result-container .back { 186 | color: #fff; 187 | font-size: 21px; 188 | padding: 1rem; 189 | text-decoration: none; 190 | position: absolute; 191 | top: 0; 192 | left: 0; } 193 | .palette-result-container .back:hover { 194 | color: #448605; 195 | cursor: pointer; 196 | transition: color .2s; } 197 | -------------------------------------------------------------------------------- /static/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /** 4 | * 1. Change the default font family in all browsers (opinionated). 5 | * 2. Correct the line height in all browsers. 6 | * 3. Prevent adjustments of font size after orientation changes in 7 | * IE on Windows Phone and in iOS. 8 | */ 9 | 10 | /* Document 11 | ========================================================================== */ 12 | 13 | html { 14 | font-family: sans-serif; /* 1 */ 15 | line-height: 1.15; /* 2 */ 16 | -ms-text-size-adjust: 100%; /* 3 */ 17 | -webkit-text-size-adjust: 100%; /* 3 */ 18 | } 19 | 20 | /* Sections 21 | ========================================================================== */ 22 | 23 | /** 24 | * Remove the margin in all browsers (opinionated). 25 | */ 26 | 27 | body { 28 | margin: 0; 29 | } 30 | 31 | /** 32 | * Add the correct display in IE 9-. 33 | */ 34 | 35 | article, 36 | aside, 37 | footer, 38 | header, 39 | nav, 40 | section { 41 | display: block; 42 | } 43 | 44 | /** 45 | * Correct the font size and margin on `h1` elements within `section` and 46 | * `article` contexts in Chrome, Firefox, and Safari. 47 | */ 48 | 49 | h1 { 50 | font-size: 2em; 51 | margin: 0.67em 0; 52 | } 53 | 54 | /* Grouping content 55 | ========================================================================== */ 56 | 57 | /** 58 | * Add the correct display in IE 9-. 59 | * 1. Add the correct display in IE. 60 | */ 61 | 62 | figcaption, 63 | figure, 64 | main { /* 1 */ 65 | display: block; 66 | } 67 | 68 | /** 69 | * Add the correct margin in IE 8. 70 | */ 71 | 72 | figure { 73 | margin: 1em 40px; 74 | } 75 | 76 | /** 77 | * 1. Add the correct box sizing in Firefox. 78 | * 2. Show the overflow in Edge and IE. 79 | */ 80 | 81 | hr { 82 | box-sizing: content-box; /* 1 */ 83 | height: 0; /* 1 */ 84 | overflow: visible; /* 2 */ 85 | } 86 | 87 | /** 88 | * 1. Correct the inheritance and scaling of font size in all browsers. 89 | * 2. Correct the odd `em` font sizing in all browsers. 90 | */ 91 | 92 | pre { 93 | font-family: monospace, monospace; /* 1 */ 94 | font-size: 1em; /* 2 */ 95 | } 96 | 97 | /* Text-level semantics 98 | ========================================================================== */ 99 | 100 | /** 101 | * 1. Remove the gray background on active links in IE 10. 102 | * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. 103 | */ 104 | 105 | a { 106 | background-color: transparent; /* 1 */ 107 | -webkit-text-decoration-skip: objects; /* 2 */ 108 | } 109 | 110 | /** 111 | * Remove the outline on focused links when they are also active or hovered 112 | * in all browsers (opinionated). 113 | */ 114 | 115 | a:active, 116 | a:hover { 117 | outline-width: 0; 118 | } 119 | 120 | /** 121 | * 1. Remove the bottom border in Firefox 39-. 122 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 123 | */ 124 | 125 | abbr[title] { 126 | border-bottom: none; /* 1 */ 127 | text-decoration: underline; /* 2 */ 128 | text-decoration: underline dotted; /* 2 */ 129 | } 130 | 131 | /** 132 | * Prevent the duplicate application of `bolder` by the next rule in Safari 6. 133 | */ 134 | 135 | b, 136 | strong { 137 | font-weight: inherit; 138 | } 139 | 140 | /** 141 | * Add the correct font weight in Chrome, Edge, and Safari. 142 | */ 143 | 144 | b, 145 | strong { 146 | font-weight: bolder; 147 | } 148 | 149 | /** 150 | * 1. Correct the inheritance and scaling of font size in all browsers. 151 | * 2. Correct the odd `em` font sizing in all browsers. 152 | */ 153 | 154 | code, 155 | kbd, 156 | samp { 157 | font-family: monospace, monospace; /* 1 */ 158 | font-size: 1em; /* 2 */ 159 | } 160 | 161 | /** 162 | * Add the correct font style in Android 4.3-. 163 | */ 164 | 165 | dfn { 166 | font-style: italic; 167 | } 168 | 169 | /** 170 | * Add the correct background and color in IE 9-. 171 | */ 172 | 173 | mark { 174 | background-color: #ff0; 175 | color: #000; 176 | } 177 | 178 | /** 179 | * Add the correct font size in all browsers. 180 | */ 181 | 182 | small { 183 | font-size: 80%; 184 | } 185 | 186 | /** 187 | * Prevent `sub` and `sup` elements from affecting the line height in 188 | * all browsers. 189 | */ 190 | 191 | sub, 192 | sup { 193 | font-size: 75%; 194 | line-height: 0; 195 | position: relative; 196 | vertical-align: baseline; 197 | } 198 | 199 | sub { 200 | bottom: -0.25em; 201 | } 202 | 203 | sup { 204 | top: -0.5em; 205 | } 206 | 207 | /* Embedded content 208 | ========================================================================== */ 209 | 210 | /** 211 | * Add the correct display in IE 9-. 212 | */ 213 | 214 | audio, 215 | video { 216 | display: inline-block; 217 | } 218 | 219 | /** 220 | * Add the correct display in iOS 4-7. 221 | */ 222 | 223 | audio:not([controls]) { 224 | display: none; 225 | height: 0; 226 | } 227 | 228 | /** 229 | * Remove the border on images inside links in IE 10-. 230 | */ 231 | 232 | img { 233 | border-style: none; 234 | } 235 | 236 | /** 237 | * Hide the overflow in IE. 238 | */ 239 | 240 | svg:not(:root) { 241 | overflow: hidden; 242 | } 243 | 244 | /* Forms 245 | ========================================================================== */ 246 | 247 | /** 248 | * 1. Change the font styles in all browsers (opinionated). 249 | * 2. Remove the margin in Firefox and Safari. 250 | */ 251 | 252 | button, 253 | input, 254 | optgroup, 255 | select, 256 | textarea { 257 | font-family: sans-serif; /* 1 */ 258 | font-size: 100%; /* 1 */ 259 | line-height: 1.15; /* 1 */ 260 | margin: 0; /* 2 */ 261 | } 262 | 263 | /** 264 | * Show the overflow in IE. 265 | * 1. Show the overflow in Edge. 266 | */ 267 | 268 | button, 269 | input { /* 1 */ 270 | overflow: visible; 271 | } 272 | 273 | /** 274 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 275 | * 1. Remove the inheritance of text transform in Firefox. 276 | */ 277 | 278 | button, 279 | select { /* 1 */ 280 | text-transform: none; 281 | } 282 | 283 | /** 284 | * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` 285 | * controls in Android 4. 286 | * 2. Correct the inability to style clickable types in iOS and Safari. 287 | */ 288 | 289 | button, 290 | html [type="button"], /* 1 */ 291 | [type="reset"], 292 | [type="submit"] { 293 | -webkit-appearance: button; /* 2 */ 294 | } 295 | 296 | /** 297 | * Remove the inner border and padding in Firefox. 298 | */ 299 | 300 | button::-moz-focus-inner, 301 | [type="button"]::-moz-focus-inner, 302 | [type="reset"]::-moz-focus-inner, 303 | [type="submit"]::-moz-focus-inner { 304 | border-style: none; 305 | padding: 0; 306 | } 307 | 308 | /** 309 | * Restore the focus styles unset by the previous rule. 310 | */ 311 | 312 | button:-moz-focusring, 313 | [type="button"]:-moz-focusring, 314 | [type="reset"]:-moz-focusring, 315 | [type="submit"]:-moz-focusring { 316 | outline: 1px dotted ButtonText; 317 | } 318 | 319 | /** 320 | * Change the border, margin, and padding in all browsers (opinionated). 321 | */ 322 | 323 | fieldset { 324 | border: 1px solid #c0c0c0; 325 | margin: 0 2px; 326 | padding: 0.35em 0.625em 0.75em; 327 | } 328 | 329 | /** 330 | * 1. Correct the text wrapping in Edge and IE. 331 | * 2. Correct the color inheritance from `fieldset` elements in IE. 332 | * 3. Remove the padding so developers are not caught out when they zero out 333 | * `fieldset` elements in all browsers. 334 | */ 335 | 336 | legend { 337 | box-sizing: border-box; /* 1 */ 338 | color: inherit; /* 2 */ 339 | display: table; /* 1 */ 340 | max-width: 100%; /* 1 */ 341 | padding: 0; /* 3 */ 342 | white-space: normal; /* 1 */ 343 | } 344 | 345 | /** 346 | * 1. Add the correct display in IE 9-. 347 | * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. 348 | */ 349 | 350 | progress { 351 | display: inline-block; /* 1 */ 352 | vertical-align: baseline; /* 2 */ 353 | } 354 | 355 | /** 356 | * Remove the default vertical scrollbar in IE. 357 | */ 358 | 359 | textarea { 360 | overflow: auto; 361 | } 362 | 363 | /** 364 | * 1. Add the correct box sizing in IE 10-. 365 | * 2. Remove the padding in IE 10-. 366 | */ 367 | 368 | [type="checkbox"], 369 | [type="radio"] { 370 | box-sizing: border-box; /* 1 */ 371 | padding: 0; /* 2 */ 372 | } 373 | 374 | /** 375 | * Correct the cursor style of increment and decrement buttons in Chrome. 376 | */ 377 | 378 | [type="number"]::-webkit-inner-spin-button, 379 | [type="number"]::-webkit-outer-spin-button { 380 | height: auto; 381 | } 382 | 383 | /** 384 | * 1. Correct the odd appearance in Chrome and Safari. 385 | * 2. Correct the outline style in Safari. 386 | */ 387 | 388 | [type="search"] { 389 | -webkit-appearance: textfield; /* 1 */ 390 | outline-offset: -2px; /* 2 */ 391 | } 392 | 393 | /** 394 | * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. 395 | */ 396 | 397 | [type="search"]::-webkit-search-cancel-button, 398 | [type="search"]::-webkit-search-decoration { 399 | -webkit-appearance: none; 400 | } 401 | 402 | /** 403 | * 1. Correct the inability to style clickable types in iOS and Safari. 404 | * 2. Change font properties to `inherit` in Safari. 405 | */ 406 | 407 | ::-webkit-file-upload-button { 408 | -webkit-appearance: button; /* 1 */ 409 | font: inherit; /* 2 */ 410 | } 411 | 412 | /* Interactive 413 | ========================================================================== */ 414 | 415 | /* 416 | * Add the correct display in IE 9-. 417 | * 1. Add the correct display in Edge, IE, and Firefox. 418 | */ 419 | 420 | details, /* 1 */ 421 | menu { 422 | display: block; 423 | } 424 | 425 | /* 426 | * Add the correct display in all browsers. 427 | */ 428 | 429 | summary { 430 | display: list-item; 431 | } 432 | 433 | /* Scripting 434 | ========================================================================== */ 435 | 436 | /** 437 | * Add the correct display in IE 9-. 438 | */ 439 | 440 | canvas { 441 | display: inline-block; 442 | } 443 | 444 | /** 445 | * Add the correct display in IE. 446 | */ 447 | 448 | template { 449 | display: none; 450 | } 451 | 452 | /* Hidden 453 | ========================================================================== */ 454 | 455 | /** 456 | * Add the correct display in IE 10-. 457 | */ 458 | 459 | [hidden] { 460 | display: none; 461 | } 462 | --------------------------------------------------------------------------------