diff --git a/README.md b/README.md index 9243aff..d893912 100644 --- a/README.md +++ b/README.md @@ -9,4 +9,6 @@ Creating a tier list couldn't be easier. Just head to the site, click the Plus b # Libraries HTML2Canvas 1.4.1, used for image exports under the MIT License: https://html2canvas.hertzen.com/ -Font Awesome 4, used under the SIL OFL 1.1 License https://fontawesome.com/v4/license/ \ No newline at end of file +Font Awesome 4, used under the SIL OFL 1.1 License https://fontawesome.com/v4/license/ + +FileSaver 2.0.4, used for image exports under the MIT License: https://github.com/eligrey/FileSaver.js \ No newline at end of file diff --git a/css/dark.css b/css/dark.css index 7d99deb..2fbbcb7 100644 --- a/css/dark.css +++ b/css/dark.css @@ -20,7 +20,7 @@ header button { /*6b6b6b BORDER*/ -#button-panel button:hover, .export-visible a:hover, #urlselect:focus, #urlselect:hover, #text-select:focus, #text-select:hover, #fileselect:hover, #url-upload button:hover, #add-text-button:hover, #add-tier-button:hover, #add-tier-colour:hover { +#button-panel button:hover, .export-visible a:hover, .export-visible button:hover, #urlselect:focus, #urlselect:hover, #text-select:focus, #text-select:hover, #fileselect:hover, #url-upload button:hover, #add-text-button:hover, #add-tier-button:hover, #add-tier-colour:hover { border-color: #6b6b6b; } /*TRANSPARENT BORDER*/ @@ -34,16 +34,12 @@ header button { #fileselect::file-selector-button, #tier-move button, .del-tier, #change-theme-button { background-color: transparent; } -/*WHITE BACKGROUND*/ -.export-visible a { - background-color: white; -} /*222222 BORDER*/ .hidden, .dropshown, .export-visible { border-color: #222222; } /*393939 BORDER*/ -#button-panel button, .export-visible a, .hidden button, .export-visible a, header button:hover, #url-upload button, #text-add button, #add-tier-button, #add-tier-colour, #urlselect, #text-select, #add-tier, #fileselect { +#button-panel button, .export-visible a, .hidden button, .export-visible button, header button:hover, #url-upload button, #text-add button, #add-tier-button, #add-tier-colour, #urlselect, #text-select, #add-tier, #fileselect { border-color: #393939; } /*BLACK BORDER*/ @@ -55,7 +51,7 @@ footer, table, tr, td, th { /*2b2b2b BACKGROUND*/ -#fileselect:hover, #url-upload button:hover, .export-visible a:hover, #add-text-button:hover, #add-tier-button:hover, #add-tier-colour:hover, #urlselect:focus, #urlselect:hover, #text-select:focus, #text-select:hover { +#fileselect:hover, #url-upload button:hover, .export-visible a:hover, .export-visible button:hover, #add-text-button:hover, #add-tier-button:hover, #add-tier-colour:hover, #urlselect:focus, #urlselect:hover, #text-select:focus, #text-select:hover { background-color: #2b2b2b; } @@ -68,7 +64,7 @@ body, header button { background-color: #1f1f1f; } /*222222 BACKGROUND*/ -#url-upload button, #text-add button, #add-tier-button, #add-tier-colour, #urlselect, #text-select, #add-tier, #button-panel button, .hidden button, .export-visible a, #button-panel button, .hidden button, header button:hover { +#url-upload button, #text-add button, #add-tier-button, #add-tier-colour, #urlselect, #text-select, #add-tier, #button-panel button, .hidden button, .export-visible a, .export-visible button, #button-panel button, .hidden button, header button:hover { background-color: #222222; } /*393939 BACKGROUND*/ @@ -82,7 +78,7 @@ footer, #image-options, header { /*WHITE TEXT*/ -#change-theme-button, #github, #new:hover, #tier-move button:hover, .del-tier:hover, footer a, body, header button:hover, #button-panel button, .hidden button, .export-visible a, #fileselect::file-selector-button, #url-upload button, #text-add button, #add-tier-button, #add-tier-colour, #urlselect, #text-select, #add-tier { +#change-theme-button, #github, #new:hover, #tier-move button:hover, .del-tier:hover, footer a, body, header button:hover, #button-panel button, .hidden button, .export-visible a, .export-visible button, #fileselect::file-selector-button, #url-upload button, #text-add button, #add-tier-button, #add-tier-colour, #urlselect, #text-select, #add-tier { color: white; } diff --git a/css/desktop.css b/css/desktop.css index 5a78806..791b6dc 100644 --- a/css/desktop.css +++ b/css/desktop.css @@ -18,7 +18,7 @@ body { } /*SOLID BORDERS*/ -.hidden, .dropshown, .export-visible, tr, td, th, table, #fileselect, header, header button, footer, .export-visible a { +.hidden, .dropshown, .export-visible, tr, td, th, table, #fileselect, header, header button, footer, .export-visible a, .export-visible button { border-style: solid; } .hidden, .dropshown, .export-visible, header { @@ -29,7 +29,7 @@ table { border-width: 3px; } -tr, td, th, .export-visible a { +tr, td, th, .export-visible a, .export-visible button { border-width: 2px; } #fileselect, header button { @@ -53,8 +53,11 @@ header { padding-left: 20px; padding-right: 20px; } +#export-buttons { + display: flex; +} header button { - transition: color .1s; + transition: color .01s; white-space:nowrap; padding: 10px; border-radius: 5px; @@ -63,7 +66,7 @@ header button { } /*popup menu buttons*/ -#button-panel button, .hidden button, .export-visible a { +#button-panel button, .hidden button, .export-visible a, .export-visible button { width: 100%; padding-bottom: 10px; padding-top: 10px; @@ -244,7 +247,7 @@ table { width: 100%; padding-bottom: 10px; } -.export-visible a { +.export-visible a, .export-visible button { margin-top: 10px; padding: 5px; text-decoration: none; diff --git a/index.html b/index.html index 3ec824c..daf6760 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@
Tier List - | + |
---|