├── .gitignore ├── sass ├── partials │ ├── _tables-rtl.scss │ ├── _formalize-rtl.scss │ ├── _tables.scss │ └── _formalize.scss ├── rtl.scss └── application.scss ├── images ├── logo.png ├── button.png └── select_arrow.gif ├── javascripts ├── theme.js └── theme.prototype.js ├── README.md ├── config.rb └── stylesheets ├── rtl.css └── application.css /.gitignore: -------------------------------------------------------------------------------- 1 | /.sass-cache/* 2 | -------------------------------------------------------------------------------- /sass/partials/_tables-rtl.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsi/redmine-theme-flat/HEAD/images/logo.png -------------------------------------------------------------------------------- /images/button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsi/redmine-theme-flat/HEAD/images/button.png -------------------------------------------------------------------------------- /images/select_arrow.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsi/redmine-theme-flat/HEAD/images/select_arrow.gif -------------------------------------------------------------------------------- /javascripts/theme.js: -------------------------------------------------------------------------------- 1 | (function($) { 2 | 3 | $(document).ready(function() { 4 | var update = $('#update') 5 | var close = $("
", {'class': "update-close"}).text('x'); 6 | 7 | update.prepend(close); 8 | close.click(function() { 9 | update.hide(); 10 | }); 11 | 12 | // toggleFieldset(); 13 | $('#update fieldset.tabular legend').click(function() { 14 | $(this).closest('fieldset').toggleClass('show-children'); 15 | }); 16 | }); 17 | 18 | })(jQuery); 19 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Flat theme for Redmine 2 | ====================== 3 | 4 | [screenshot1]: http://i.imgur.com/rMc4UUc.jpg "Flat screenshot" 5 | 6 | ![Flat screenshot][screenshot1] 7 | 8 | ## Installation 9 | 10 | 1. [Download](https://github.com/tsi/redmine-theme-flat/archive/master.zip) the theme to `redmine/public/theme/` 11 | 2. Open redmine in a browser and go to Administration > Settings > Display > Theme. 12 | 13 | ## Make it yours 14 | 15 | The theme is made with Sass & Compass so changing colors etc. should be very easy, 16 | Colors are defined in the top of /sass/application.scss 17 | 18 | ## License 19 | 20 | [WTFPL](http://www.wtfpl.net/) 21 | -------------------------------------------------------------------------------- /config.rb: -------------------------------------------------------------------------------- 1 | # Require any additional compass plugins here. 2 | 3 | # Set this to the root of your project when deployed: 4 | http_path = "/" 5 | css_dir = "stylesheets" 6 | sass_dir = "sass" 7 | images_dir = "images" 8 | javascripts_dir = "javascripts" 9 | 10 | # You can select your preferred output style here (can be overridden via the command line): 11 | # output_style = :expanded or :nested or :compact or :compressed 12 | 13 | # To enable relative paths to assets via compass helper functions. Uncomment: 14 | # relative_assets = true 15 | 16 | # To disable debugging comments that display the original location of your selectors. Uncomment: 17 | line_comments = false 18 | 19 | 20 | # If you prefer the indented syntax, you might want to regenerate this 21 | # project again passing --syntax sass, or you can uncomment this: 22 | # preferred_syntax = :sass 23 | # and then run: 24 | # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass 25 | -------------------------------------------------------------------------------- /javascripts/theme.prototype.js: -------------------------------------------------------------------------------- 1 | // Older Redmine versions used prototype instead of jQuery. 2 | // If you're using Redmine < 2.1 you'll probably want to use this script instead. 3 | 4 | (function() { 5 | 6 | function toggleSiblings() { 7 | var fieldset = this.up(); 8 | fieldset.toggleClassName('show-children'); 9 | } 10 | 11 | function hideUpdate() { 12 | document.getElementById("update").hide(); 13 | } 14 | 15 | document.observe("dom:loaded", function(){ 16 | var update = $("update"); 17 | var close = document.createElement("div"); 18 | close.innerHTML = 'x'; 19 | close.className = 'update-close'; 20 | update.insertBefore(close, update.firstChild); 21 | close.onclick = hideUpdate; 22 | 23 | // toggleFieldset(); 24 | var fieldsets = document.querySelectorAll('#update fieldset.tabular'); 25 | for (var i = 0; i < fieldsets.length; i++) { 26 | fieldsets[i].children[0].onclick = toggleSiblings; 27 | if (fieldsets[i].children[0].children.length) { 28 | fieldsets[i].children[0].children[0].addEventListener("click", function(e) {e.stopPropagation()}, false); 29 | } 30 | } 31 | }); 32 | 33 | })(); 34 | -------------------------------------------------------------------------------- /sass/rtl.scss: -------------------------------------------------------------------------------- 1 | /* load the default Redmine stylesheet */ 2 | @import url(../../../stylesheets/rtl.css); 3 | 4 | $gray-dark: #202020; 5 | $gray-text: #484848; 6 | $hotpink: #d92e47; 7 | 8 | @import "compass"; 9 | @import "partials/formalize-rtl"; 10 | @import "partials/tables-rtl"; 11 | 12 | 13 | // Header 14 | #header { 15 | padding:14px 17px 0 17px; 16 | > h1 {margin:0 9px 2px 20px;} 17 | > h1:before {margin:0 0 0 29px;} 18 | } 19 | 20 | // Search box 21 | #quick-search { 22 | select {padding:5px 5px 5px 15px; margin-left:0px; margin-right:8px;} 23 | input {margin-left:0px; margin-right:4px;} 24 | } 25 | 26 | // Menu 27 | #main-menu { 28 | left:auto; right:0; 29 | margin-right: 0; margin-left:0; 30 | } 31 | 32 | // Content 33 | #sidebar { 34 | margin-left:0%; margin-right:3%; 35 | } 36 | 37 | // Messages 38 | #errorExplanation, div.flash, .nodata, .warning, .conflict { 39 | padding: 2px 30px 3px 4px; 40 | } 41 | 42 | // Update issue 43 | #update { 44 | margin-left:0%; margin-right:-40%; 45 | left:auto; right:50%; 46 | @media (min-width: 1000px) { 47 | margin-left:0px; margin-right:-400px; 48 | } 49 | .update-close { 50 | float:left; 51 | margin-right:0px; margin-left: -10px; 52 | } 53 | } 54 | 55 | #attachments_fields { 56 | input { 57 | & + input.description, 58 | & + label { 59 | @media (max-width: 700px) { 60 | margin-left:0; margin-right:0; 61 | } 62 | } 63 | } 64 | } -------------------------------------------------------------------------------- /sass/partials/_formalize-rtl.scss: -------------------------------------------------------------------------------- 1 | 2 | @import "compass/css3"; 3 | 4 | // Widths 5 | //---------------------------------------------------------------------------------------------------- 6 | 7 | // Added via JS to