diff --git a/CHANGELOG.md b/CHANGELOG.md index 159fcbae..31470c2a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ - Ability to create single-line or multi-line custom fields. (thanks to [@artlepool](https://github.com/artlepool)) - Add custom videoconference system. - Make burndown chart collapsible at the backlog panel. +- Ability to choose a theme (thanks to [@astagi](https://github.com/astagi)) ### Misc - Improve performance: Show cropped images in timelines. diff --git a/app-loader/app-loader.coffee b/app-loader/app-loader.coffee index fba45384..47f6b4c4 100644 --- a/app-loader/app-loader.coffee +++ b/app-loader/app-loader.coffee @@ -4,6 +4,8 @@ window.taigaConfig = { "eventsUrl": null, "debug": true, "defaultLanguage": "en", + "themes": ["taiga", "material-design", "high-contrast"], + "defaultTheme": "taiga", "publicRegisterEnabled": true, "feedbackEnabled": true, "privacyPolicyUrl": null, diff --git a/app/coffee/modules/auth.coffee b/app/coffee/modules/auth.coffee index 17c13a4a..55e7ea9a 100644 --- a/app/coffee/modules/auth.coffee +++ b/app/coffee/modules/auth.coffee @@ -37,9 +37,11 @@ class AuthService extends taiga.Service "$tgUrls", "$tgConfig", "$translate", - "tgCurrentUserService"] + "tgCurrentUserService", + "tgThemeService"] - constructor: (@rootscope, @storage, @model, @rs, @http, @urls, @config, @translate, @currentUserService) -> + constructor: (@rootscope, @storage, @model, @rs, @http, @urls, @config, @translate, @currentUserService, + @themeService) -> super() userModel = @.getUser() @.setUserdata(userModel) @@ -51,9 +53,12 @@ class AuthService extends taiga.Service else @.userData = null + _setTheme: -> + theme = @rootscope.user?.theme || @config.get("defaultTheme") || "taiga" + @themeService.use(theme) _setLocales: -> - lang = @rootscope.user.lang || @config.get("defaultLanguage") || "en" + lang = @rootscope.user?.lang || @config.get("defaultLanguage") || "en" @translate.preferredLanguage(lang) # Needed for calls to the api in the correct language @translate.use(lang) # Needed for change the interface in runtime @@ -66,6 +71,7 @@ class AuthService extends taiga.Service user = @model.make_model("users", userData) @rootscope.user = user @._setLocales() + @._setTheme() return user return null @@ -78,6 +84,7 @@ class AuthService extends taiga.Service @.setUserdata(user) @._setLocales() + @._setTheme() clear: -> @rootscope.auth = null @@ -117,9 +124,12 @@ class AuthService extends taiga.Service logout: -> @.removeToken() @.clear() - @currentUserService.removeUser() + @._setTheme() + @._setLocales() + + register: (data, type, existing) -> url = @urls.resolve("auth-register") diff --git a/app/coffee/modules/user-settings/main.coffee b/app/coffee/modules/user-settings/main.coffee index 151cc2dc..8d67c99e 100644 --- a/app/coffee/modules/user-settings/main.coffee +++ b/app/coffee/modules/user-settings/main.coffee @@ -57,6 +57,7 @@ class UserSettingsController extends mixOf(taiga.Controller, taiga.PageMixin) @location.replace() @scope.lang = @getLan() + @scope.theme = @getTheme() maxFileSize = @config.get("maxUploadFileSize", null) if maxFileSize @@ -68,6 +69,8 @@ class UserSettingsController extends mixOf(taiga.Controller, taiga.PageMixin) promise.then null, @.onInitialDataError.bind(@) loadInitialData: -> + @scope.availableThemes = @config.get("themes", []) + return @rs.locales.list().then (locales) => @scope.locales = locales return locales @@ -79,6 +82,11 @@ class UserSettingsController extends mixOf(taiga.Controller, taiga.PageMixin) return @scope.user.lang || @translate.preferredLanguage() + getTheme: -> + return @scope.user.theme || + @config.get("defaultTheme") || + "taiga" + module.controller("UserSettingsController", UserSettingsController) @@ -96,6 +104,7 @@ UserProfileDirective = ($confirm, $auth, $repo, $translate) -> changeEmail = $scope.user.isAttributeModified("email") $scope.user.lang = $scope.lang + $scope.user.theme = $scope.theme onSuccess = (data) => $auth.setUser(data) diff --git a/app/index.jade b/app/index.jade index 105ca868..e50edda1 100644 --- a/app/index.jade +++ b/app/index.jade @@ -10,7 +10,7 @@ html(lang="en") meta(name="description", content="Taiga is a project management platform for startups and agile developers & designers who want a simple, beautiful tool that makes work truly enjoyable.") meta(name="keywords", content="agile, scrum, taiga, management, project, developer, designer, user experience") //-meta(name="viewport", content="width=device-width, user-scalable=no") - link(rel="stylesheet", href="/styles/main.css") + link(rel="stylesheet", href="/styles/theme-taiga.css") link(rel="icon", type="image/png", href="/images/favicon.png") //- PRERENDER SERVICE: This is to know when the page is completely loaded. diff --git a/app/locales/locale-en.json b/app/locales/locale-en.json index 2a06e9de..b2ca0d4c 100644 --- a/app/locales/locale-en.json +++ b/app/locales/locale-en.json @@ -1193,7 +1193,9 @@ "BIO": "Bio (max. 210 chars)", "PLACEHOLDER_BIO": "Tell us something about you", "LANGUAGE": "Language", - "LANGUAGE_DEFAULT": "-- use default language --" + "LANGUAGE_DEFAULT": "-- use default language --", + "THEME": "Theme", + "THEME_DEFAULT": "-- use default theme --" } }, "WIZARD": { diff --git a/app/modules/home/projects/home-project-list.scss b/app/modules/home/projects/home-project-list.scss index 3b322609..abdaed0d 100644 --- a/app/modules/home/projects/home-project-list.scss +++ b/app/modules/home/projects/home-project-list.scss @@ -7,7 +7,7 @@ padding: 1rem; text-overflow: ellipsis; &:hover { - border-color: $fresh-taiga; + border-color: $primary-light; transition: all .3s linear; p { color: $gray; diff --git a/app/modules/navigation-bar/navigation-bar.scss b/app/modules/navigation-bar/navigation-bar.scss index c00e7f68..13702f76 100644 --- a/app/modules/navigation-bar/navigation-bar.scss +++ b/app/modules/navigation-bar/navigation-bar.scss @@ -1,11 +1,11 @@ +$dropdown-width: 350px; + .navbar { - background: rgba($black, .5); display: flex; height: $navbar; justify-content: space-between; position: relative; &:after { - background: url('../images/menu-vert.png') repeat top left; background-size: 200%; bottom: 0; content: ''; @@ -24,6 +24,7 @@ } .nav-left { >a { + color: $white; padding: .5rem 1.5rem; &.logo { background: rgba($black, .2); @@ -41,6 +42,7 @@ .nav-right { margin-left: auto; a { + color: $white; padding: .5rem 2rem; } } @@ -48,10 +50,12 @@ color: $white; display: inline-block; transition: all .2s linear; - &.active, + svg path { + fill: darken($primary-dark, 8%); + } &:hover { background: rgba($black, .2); - color: $fresh-taiga; + color: $primary-light; svg path { fill: $white; } @@ -77,7 +81,7 @@ height: 1.2rem; max-width: 1.2rem; path { - fill: $dark-taiga; + fill: $top-icon-color; transition: all .2s; } } @@ -130,7 +134,7 @@ padding: .8rem .5rem; &:hover { background: rgba($white, .1); - color: $fresh-taiga; + color: $primary-light; } &.see-more-projects-btn, &.create-organization-btn, diff --git a/app/modules/profile/styles/profile-contacts.scss b/app/modules/profile/styles/profile-contacts.scss index c9bce8e7..baa0dfe5 100644 --- a/app/modules/profile/styles/profile-contacts.scss +++ b/app/modules/profile/styles/profile-contacts.scss @@ -16,7 +16,7 @@ &:hover, &.active { border-bottom: 2px solid $gray-light; - color: $green-taiga; + color: $primary; } } } diff --git a/app/modules/profile/styles/profile-content-tabs.scss b/app/modules/profile/styles/profile-content-tabs.scss index 648d9d7f..492778cc 100644 --- a/app/modules/profile/styles/profile-content-tabs.scss +++ b/app/modules/profile/styles/profile-content-tabs.scss @@ -18,7 +18,7 @@ top: 1px; transition: color .2s linear; .icon { - color: $green-taiga; + color: $primary; transition: color .2s linear; } } diff --git a/app/modules/profile/styles/profile-favorites.scss b/app/modules/profile/styles/profile-favorites.scss index 23cb806b..43212cd5 100644 --- a/app/modules/profile/styles/profile-favorites.scss +++ b/app/modules/profile/styles/profile-favorites.scss @@ -14,7 +14,7 @@ &:hover, &.active { border-bottom: 2px solid $gray-light; - color: $green-taiga; + color: $primary; } } } diff --git a/app/modules/profile/styles/profile-sidebar.scss b/app/modules/profile/styles/profile-sidebar.scss index 822fb599..944c813c 100644 --- a/app/modules/profile/styles/profile-sidebar.scss +++ b/app/modules/profile/styles/profile-sidebar.scss @@ -16,7 +16,7 @@ color: $gray-light; } a { - color: $green-taiga; + color: $primary; } .trans-button { margin-bottom: 1rem; diff --git a/app/modules/projects/listing/projects-listing.scss b/app/modules/projects/listing/projects-listing.scss index 0b329d2d..6b0f99b8 100644 --- a/app/modules/projects/listing/projects-listing.scss +++ b/app/modules/projects/listing/projects-listing.scss @@ -58,7 +58,7 @@ } .active { .icon { - color: $star-fill; + color: $primary-light; } } } diff --git a/app/modules/projects/listing/styles/project-list.scss b/app/modules/projects/listing/styles/project-list.scss index 8ba28f14..c4dc2dfd 100644 --- a/app/modules/projects/listing/styles/project-list.scss +++ b/app/modules/projects/listing/styles/project-list.scss @@ -47,7 +47,7 @@ .project-list-single { background: $white; &:hover { - background: lighten($green-taiga, 60%); + background: lighten($primary, 60%); cursor: move; transition: background .3s; .drag { diff --git a/app/modules/services/theme.service.coffee b/app/modules/services/theme.service.coffee new file mode 100644 index 00000000..4e5733ce --- /dev/null +++ b/app/modules/services/theme.service.coffee @@ -0,0 +1,15 @@ +taiga = @.taiga + + +class ThemeService extends taiga.Service = -> + use: (themeName) -> + stylesheetEl = $("link[rel='stylesheet']") + + if stylesheetEl.length == 0 + stylesheetEl = $("") + $("head").append(stylesheetEl) + + stylesheetEl.attr("href", "/styles/theme-#{themeName}.css") + + +angular.module("taigaCommon").service("tgThemeService", ThemeService) diff --git a/app/modules/services/theme.service.spec.coffee b/app/modules/services/theme.service.spec.coffee new file mode 100644 index 00000000..17a208f0 --- /dev/null +++ b/app/modules/services/theme.service.spec.coffee @@ -0,0 +1,17 @@ +describe "ThemeService", -> + themeService = null + data = { + theme: "testTheme" + } + + _inject = () -> + inject (_tgThemeService_) -> + themeService = _tgThemeService_ + + beforeEach -> + module "taigaCommon" + _inject() + + it "use a test theme", () -> + themeService.use(data.theme) + expect($("link[rel='stylesheet']")).to.have.attr("href", "/styles/theme-#{data.theme}.css") diff --git a/app/modules/user-timeline/user-timeline/user-timeline.scss b/app/modules/user-timeline/user-timeline/user-timeline.scss index 4f93fe7b..192afee8 100644 --- a/app/modules/user-timeline/user-timeline/user-timeline.scss +++ b/app/modules/user-timeline/user-timeline/user-timeline.scss @@ -7,13 +7,13 @@ margin-bottom: 0; } a { - color: $green-taiga; + color: $primary; &:first-child { @extend %bold; color: $gray; } &:hover { - color: $fresh-taiga; + color: $primary-light; } } blockquote { diff --git a/app/partials/user/user-profile.jade b/app/partials/user/user-profile.jade index 872b6e79..dd94f565 100644 --- a/app/partials/user/user-profile.jade +++ b/app/partials/user/user-profile.jade @@ -30,7 +30,7 @@ div.wrapper(tg-user-profile, ng-controller="UserSettingsController as ctrl", div.data fieldset - label(for="email", translate="USER_PROFILE.FIELD.USERNAME") + label(for="username", translate="USER_PROFILE.FIELD.USERNAME") input(type="text", name="username", id="username", placeholder="{{'USER_PROFILE.FIELD.USERNAME' | translate}}", ng-model="user.username", data-required="true", data-maxlength="255", @@ -51,16 +51,23 @@ div.wrapper(tg-user-profile, ng-controller="UserSettingsController as ctrl", data-maxlength="256") fieldset - label(for="full-name", translate="USER_PROFILE.FIELD.LANGUAGE") - select(ng-model="lang", + label(for="lang", translate="USER_PROFILE.FIELD.LANGUAGE") + select(name="lang", id="lang", ng-model="lang", ng-options="locale.code as locale.name for locale in locales") option(value="", translate="USER_PROFILE.FIELD.LANGUAGE_DEFAULT") + fieldset + label(for="theme", translate="USER_PROFILE.FIELD.THEME") + select(name="theme", id="theme", ng-model="theme", + ng-options="availableTheme for availableTheme in availableThemes") + option(value="", translate="USER_PROFILE.FIELD.THEME_DEFAULT") + fieldset label(for="bio", translate="USER_PROFILE.FIELD.BIO") textarea(name="bio", id="bio", ng-model="user.bio", - ng-attr-placeholder="{{'USER_PROFILE.FIELD.PLACEHOLDER_BIO' | translate}}", ng-maxlength="210", maxlength="210") + ng-attr-placeholder="{{'USER_PROFILE.FIELD.PLACEHOLDER_BIO' | translate}}", + ng-maxlength="210", maxlength="210") fieldset.submit button.button-green.submit-button(type="submit", title="{{'COMMON.SAVE' | translate}}", diff --git a/app/styles/components/buttons.scss b/app/styles/components/buttons.scss index 061f9b68..af107dde 100755 --- a/app/styles/components/buttons.scss +++ b/app/styles/components/buttons.scss @@ -46,7 +46,7 @@ &.active { span, .icon { - color: $green-taiga; + color: $primary; } } } @@ -59,10 +59,10 @@ .button-green, a.button-green { @extend %button; - background: $green-taiga; + background: $primary; &:hover, &.active { - background: $fresh-taiga; + background: $primary-light; color: $white; } } @@ -73,7 +73,7 @@ a.button-gray { background: $gray; &:hover, &.active { - background: $fresh-taiga; + background: $primary-light; color: $white; } } @@ -111,13 +111,13 @@ a.button-gray { .button-bulk { @extend %button; - background: $green-taiga; + background: $primary; padding: .35rem .5rem; .icon { margin-right: 0; } &:hover { - background: $fresh-taiga; + background: $primary-light; } } diff --git a/app/styles/components/check.scss b/app/styles/components/check.scss index 3fbce268..ecd64fd5 100644 --- a/app/styles/components/check.scss +++ b/app/styles/components/check.scss @@ -39,7 +39,7 @@ } input:checked { + div { - background-color: $fresh-taiga; + background-color: $primary-light; margin-left: 50%; transition: all .2s linear; } diff --git a/app/styles/components/created-by.scss b/app/styles/components/created-by.scss index bff30e0a..f021993a 100644 --- a/app/styles/components/created-by.scss +++ b/app/styles/components/created-by.scss @@ -23,7 +23,7 @@ } .created-user { @extend %large; - color: $green-taiga; + color: $primary; cursor: default; &.editable { cursor: pointer; diff --git a/app/styles/components/kanban-task.scss b/app/styles/components/kanban-task.scss index 00dcb01f..2aa34c30 100644 --- a/app/styles/components/kanban-task.scss +++ b/app/styles/components/kanban-task.scss @@ -1,6 +1,6 @@ .kanban-task { - background: $postit; - border: 1px solid $postit-hover; + background: $card; + border: 1px solid $card-hover; box-shadow: none; cursor: move; margin: .2rem; @@ -11,7 +11,7 @@ &:hover { .icon-edit, .icon-drag-h { - color: $postit-dark-hover; + color: $card-dark; display: block; opacity: 1; transition: color .3s linear, opacity .3s linear; @@ -34,12 +34,12 @@ } } .kanban-tagline { - border-color: $postit-hover; + border-color: $card-hover; display: flex; height: .6rem; } .kanban-tag { - border-top: .3rem solid $postit-hover; + border-top: .3rem solid $card-hover; flex-basis: 0; flex-grow: 1; height: .6rem; @@ -66,7 +66,7 @@ img { margin: 0 auto; &:hover { - border: 2px solid $green-taiga; + border: 2px solid $primary; transition: border .3s linear; } } @@ -77,7 +77,7 @@ padding: 0 .5rem 0 .8rem; } .task-assigned { - color: $postit-dark-hover; + color: $card-dark; display: block; } .task-num { @@ -90,12 +90,12 @@ .icon-edit, .icon-drag-h { @extend %large; - color: $postit-hover; + color: $card-hover; opacity: 0; position: absolute; transition: opacity .2s linear; &:hover { - color: darken($postit-hover, 15%); + color: darken($card-hover, 15%); transition: color .3s linear; } } @@ -144,7 +144,7 @@ } .task-points { @extend %small; - color: darken($postit-hover, 15%); + color: darken($card-hover, 15%); margin: 0; span { display: inline-block; diff --git a/app/styles/components/markdown-help.scss b/app/styles/components/markdown-help.scss index 36ad3ea3..f43ae37b 100644 --- a/app/styles/components/markdown-help.scss +++ b/app/styles/components/markdown-help.scss @@ -8,7 +8,7 @@ a.help-button { transition: color .2s linear; } .icon { - color: $fresh-taiga; + color: $primary-light; transition: color .2s linear; } } diff --git a/app/styles/components/notification-message.scss b/app/styles/components/notification-message.scss index f43d9a50..e2e9e451 100644 --- a/app/styles/components/notification-message.scss +++ b/app/styles/components/notification-message.scss @@ -1,5 +1,5 @@ .notification-message-success { - background: rgba($fresh-taiga, .95); + background: rgba($primary-light, .95); box-shadow: 0 25px 10px -15px rgba(0, 0, 0, .05); opacity: 1; right: -370px; diff --git a/app/styles/components/paginator.scss b/app/styles/components/paginator.scss index 4d8f4ad8..56d0d908 100644 --- a/app/styles/components/paginator.scss +++ b/app/styles/components/paginator.scss @@ -24,7 +24,7 @@ } .active { span { - background: $fresh-taiga; + background: $primary-light; } } .dots { diff --git a/app/styles/components/summary.scss b/app/styles/components/summary.scss index 8137273b..e99527b1 100644 --- a/app/styles/components/summary.scss +++ b/app/styles/components/summary.scss @@ -15,7 +15,7 @@ $summary-background: $grayer; } .data { .number { - color: $fresh-taiga; + color: $primary-light; } } .number { @@ -82,7 +82,7 @@ $summary-background: $grayer; position: relative; width: 15%; .current-progress { - background: $fresh-taiga; + background: $primary-light; height: 24px; } .defined-points { @@ -97,7 +97,7 @@ $summary-background: $grayer; position: absolute; } .closed-points-progress { - background: $fresh-taiga; + background: $primary-light; height: 24px; position: absolute; } @@ -136,11 +136,11 @@ $summary-background: $grayer; float: right; transition: color .3s linear; &:hover { - color: $fresh-taiga; + color: $primary-light; transition: color .3s linear; } &.active { - color: $fresh-taiga; + color: $primary-light; } &.active:hover { color: $green-taiga; diff --git a/app/styles/components/tag.scss b/app/styles/components/tag.scss index e08792ac..c5212e97 100644 --- a/app/styles/components/tag.scss +++ b/app/styles/components/tag.scss @@ -22,7 +22,7 @@ border: 1px solid $gray-light; z-index: 99910; .ui-state-focus { - background: $fresh-taiga; + background: $primary-light; } li { cursor: pointer; @@ -49,7 +49,7 @@ .add-tag { color: $gray-light; &:hover { - color: $fresh-taiga; + color: $primary-light; } } .icon-plus { diff --git a/app/styles/components/taskboard-task.scss b/app/styles/components/taskboard-task.scss index 07dd5ca6..8e94caab 100644 --- a/app/styles/components/taskboard-task.scss +++ b/app/styles/components/taskboard-task.scss @@ -1,6 +1,6 @@ .taskboard-task { - background: $postit; - border: 1px solid $postit-hover; + background: $card; + border: 1px solid $card-hover; box-shadow: none; cursor: move; margin: .2rem; @@ -8,7 +8,7 @@ &:hover { .icon-edit, .icon-drag-h { - color: $postit-dark-hover; + color: $card-dark; display: block; opacity: 1; transition: color .3s linear, opacity .3s linear; @@ -37,12 +37,12 @@ } } .taskboard-tagline { - border-color: $postit-hover; + border-color: $card-hover; display: flex; height: .6rem; } .taskboard-tag { - border-top: .3rem solid $postit-hover; + border-top: .3rem solid $card-hover; flex-basis: 0; flex-grow: 1; height: .6rem; @@ -64,7 +64,7 @@ img { margin: 0 auto; &:hover { - border: 2px solid $green-taiga; + border: 2px solid $primary; transition: border .3s linear; } } @@ -86,10 +86,10 @@ } .task-assigned { @extend %small; - color: $postit-dark-hover; + color: $card-dark; display: block; &:hover { - color: $green-taiga; + color: $primary; } } .task-num { @@ -113,11 +113,11 @@ .icon-drag-h { @extend %large; bottom: .5rem; - color: $postit-hover; + color: $card-hover; opacity: 0; position: absolute; &:hover { - color: $postit-dark-hover; + color: $card-dark; } } .icon-edit { diff --git a/app/styles/components/wysiwyg.scss b/app/styles/components/wysiwyg.scss index 18dfa7af..c742fbf3 100644 --- a/app/styles/components/wysiwyg.scss +++ b/app/styles/components/wysiwyg.scss @@ -40,9 +40,9 @@ } } a { - color: $green-taiga; + color: $primary; &:hover { - color: $fresh-taiga; + color: $primary-light; } } p { diff --git a/app/styles/core/base.scss b/app/styles/core/base.scss index aa891e32..55e5b543 100644 --- a/app/styles/core/base.scss +++ b/app/styles/core/base.scss @@ -5,8 +5,6 @@ html { } body { @extend %text; - background: $white; // fallback - color: $grayer; line-height: 1.3; min-height: 100%; width: 100%; @@ -17,15 +15,6 @@ body { } &.loading-project { overflow: hidden; - .projects-nav-overlay { - opacity: 1; - overflow: hidden; - transition: opacity 1s ease; - div { - opacity: 1; - transition: opacity 1s ease; - } - } } } @@ -38,7 +27,6 @@ body { } .master { - background: $white; height: 100%; min-height: 100%; position: relative; @@ -57,7 +45,6 @@ body { } .menu-secondary { - background: $whitish; flex: 0 0 auto; min-height: $main-height; min-width: 0; @@ -84,17 +71,11 @@ body { } .menu-tertiary { - background-color: $dark-taiga; flex: 0 0 auto; min-height: $main-height; width: 250px; } -.extrabar { - background: $whitish; -} - -%main, .main { flex: 4; flex-basis: 600px; diff --git a/app/styles/core/elements.scss b/app/styles/core/elements.scss index 6644404e..9c42a1b8 100644 --- a/app/styles/core/elements.scss +++ b/app/styles/core/elements.scss @@ -3,16 +3,13 @@ // Blockquotes blockquote, blockquote p { - color: $gray; line-height: 1.25rem; } blockquote { - border-left: 5px solid $whitish; margin: 0 0 20px; padding: .5rem 1.25rem; cite { @extend %small; - color: $gray; display: block; &:before { content: '\2014 \0020'; @@ -59,14 +56,14 @@ sup { } .is-selected { .pika-button { - background: $green-taiga; + background: $primary; border-radius: 0 !important; - box-shadow: inset 0 1px 3px $green-taiga; + box-shadow: inset 0 1px 3px $primary; } } .is-today { .pika-button { - color: $green-taiga; + color: $primary; } &.is-selected { button { @@ -76,9 +73,9 @@ sup { } .pika-button { &:hover { - background: $fresh-taiga !important; //Important added because plugin has it :S + background: $primary-light !important; //Important added because plugin has it :S border-radius: 0 !important; //Important added because plugin has it :S - box-shadow: inset 0 1px 3px $fresh-taiga !important; //Important added because plugin has it :S + box-shadow: inset 0 1px 3px $primary-light !important; //Important added because plugin has it :S } } } diff --git a/app/styles/core/forms.scss b/app/styles/core/forms.scss index efc8d085..22b5e476 100644 --- a/app/styles/core/forms.scss +++ b/app/styles/core/forms.scss @@ -19,17 +19,11 @@ input[type="date"], input[type="password"], select, textarea { - background: $whitish; - border: 1px solid $gray-light; - color: $grayer; + border: 1px solid; margin: 0; padding: 8px; width: 100%; - @include placeholder { - color: darken($gray-light, 10%); - } &.checksley-error { - border: 1px solid $red; transition: border .3s linear; } } @@ -42,14 +36,12 @@ textarea { .checksley-error-list { @extend %small; - background: rgba($whitish, .8); margin-bottom: 0; padding: 0 .5rem; position: absolute; right: 2rem; top: 10px; li { - color: $red; padding: .2rem; } } diff --git a/app/styles/core/typography.scss b/app/styles/core/typography.scss index 44a8eff3..6e106f99 100755 --- a/app/styles/core/typography.scss +++ b/app/styles/core/typography.scss @@ -53,7 +53,7 @@ h1 { max-width: 40%; } .green { - color: $green-taiga; + color: $primary; } .date { @include ellipsis(500px); @@ -92,10 +92,8 @@ hr { // __Links__ a, a:visited { - color: $grayer; text-decoration: none; &:hover { - color: $green-taiga; transition: color .3s linear; } } diff --git a/app/styles/dependencies/colors.scss b/app/styles/dependencies/colors.scss deleted file mode 100755 index e5b28c0d..00000000 --- a/app/styles/dependencies/colors.scss +++ /dev/null @@ -1,37 +0,0 @@ -// Colors - -$black: #000; -$blackish: #050505; -$grayer: #444; -$gray: #555; -$gray-light: #b8b8b8; -$whitish: #f5f5f5; -$white: #fff; - - -$green-taiga: #72a114; -$fresh-taiga: #9dce0a; -$dark-taiga: #879b89; - -$red-light: #ff8282; -$red: #f00; - -$postit: #fff8e4; -$postit-hover: #f1e8cd; -$postit-dark-hover: #cfc29b; - - -//Loading bar -$green-japanese-laurel: #237400; -$green-olive: #618000; -$red-amaranth: #e43050; -$purple-eggplant: #810061; -$yellow-pear: #bbe831; - -$menu: #232323; -$star-fill: #edd400; - -// Top menu values -$top-icon-color: #11241f; -$dropdown-width: 350px; -$dropdown-color: rgba(darken($grayer, 20%), 1); diff --git a/app/styles/dependencies/helpers.scss b/app/styles/dependencies/helpers.scss index 336ce8ce..45286c94 100644 --- a/app/styles/dependencies/helpers.scss +++ b/app/styles/dependencies/helpers.scss @@ -16,7 +16,6 @@ %mono {font-family: 'courier new', 'monospace';} %lightbox { - background: rgba($white, .95); bottom: 0; display: none; left: 0; @@ -62,17 +61,6 @@ } } -// Background -%triangled-bg { - background: url('/images/bg.png') no-repeat center center; - background-size: cover; -} - -%background-taiga { - background: url('/images/invitation_bg.jpg') no-repeat center center; - background-size: cover; -} - %loading-spinner { animation-timing-function: ease-in-out; animation: rotate 1.5s cubic-bezier(.00, .05, .87, 1.04) infinite alternate; diff --git a/app/styles/dependencies/mixins.scss b/app/styles/dependencies/mixins.scss index 755f4511..cdde2e53 100644 --- a/app/styles/dependencies/mixins.scss +++ b/app/styles/dependencies/mixins.scss @@ -57,7 +57,7 @@ border: 0; } &:hover { - color: $fresh-taiga; + color: $primary-light; transition: color .3s linear; &.point { color: $white; diff --git a/app/styles/extras/dependencies.scss b/app/styles/extras/dependencies.scss index 6d90bfb8..f09f0308 100644 --- a/app/styles/extras/dependencies.scss +++ b/app/styles/extras/dependencies.scss @@ -10,7 +10,7 @@ $prefix-for-mozilla: true; // dependencies //################################################# -@import '../dependencies/colors'; +@import "variables"; @import '../dependencies/mixins'; @import '../dependencies/helpers'; @import '../dependencies/responsive'; diff --git a/app/styles/layout/admin-project-values.scss b/app/styles/layout/admin-project-values.scss index 749d7178..4f9d20fd 100644 --- a/app/styles/layout/admin-project-values.scss +++ b/app/styles/layout/admin-project-values.scss @@ -37,8 +37,3 @@ display: inline-block; } } - -//.project-values-options { -// margin-bottom: 1rem; -// text-align: right; -//} diff --git a/app/styles/layout/invitation.scss b/app/styles/layout/invitation.scss index 6807a2d9..ee0c39c9 100644 --- a/app/styles/layout/invitation.scss +++ b/app/styles/layout/invitation.scss @@ -84,7 +84,7 @@ } .button-blackish { &:hover { - background: $green-taiga; + background: $primary; } } .login-form { diff --git a/app/styles/layout/login.scss b/app/styles/layout/login.scss index 95c61fff..8e20b643 100644 --- a/app/styles/layout/login.scss +++ b/app/styles/layout/login.scss @@ -41,17 +41,11 @@ form { margin-bottom: 1rem; } - input { - background: $white; - @include placeholder { - color: $gray-light; - } - } .login-text, .register-text { text-align: center; a:hover { - color: $fresh-taiga; + color: $primary-light; } } .button { diff --git a/app/styles/layout/not-found.scss b/app/styles/layout/not-found.scss index 3959acf9..a7ced5bb 100644 --- a/app/styles/layout/not-found.scss +++ b/app/styles/layout/not-found.scss @@ -25,9 +25,9 @@ margin-bottom: 3rem; } a { - color: $green-taiga; + color: $primary; &:hover { - color: $fresh-taiga; + color: $primary-light; } } } diff --git a/app/styles/layout/team.scss b/app/styles/layout/team.scss index fba2c6e2..862fbcd3 100644 --- a/app/styles/layout/team.scss +++ b/app/styles/layout/team.scss @@ -3,7 +3,7 @@ margin: 1rem 0; span { &:last-child { - color: $green-taiga; + color: $primary; } } } diff --git a/app/styles/layout/us-detail.scss b/app/styles/layout/us-detail.scss index 9a4e8bdf..f3ea42fe 100644 --- a/app/styles/layout/us-detail.scss +++ b/app/styles/layout/us-detail.scss @@ -103,7 +103,7 @@ padding: 0 .2rem; } a:hover { - color: $green-taiga; + color: $primary; } a:first-child { border: 0; @@ -237,7 +237,7 @@ .us-detail-status { @extend %large; - color: $green-taiga; + color: $primary; vertical-align: middle; } @@ -247,7 +247,7 @@ margin-bottom: 1rem; position: relative; .current-progress { - background: $fresh-taiga; + background: $primary-light; height: 26px; left: 0; position: absolute; @@ -281,7 +281,7 @@ text-align: center; transition: color .3s linear; &.active { - background: rgba($fresh-taiga, .9); + background: rgba($primary-light, .9); color: $whitish; } &:first-child { @@ -316,7 +316,7 @@ text-align: center; &:hover, &.active { - background: $fresh-taiga; + background: $primary-light; color: $white; } } @@ -381,7 +381,7 @@ } } &.active { - background: $green-taiga; + background: $primary; } } .item-block { diff --git a/app/styles/modules/admin/admin-custom-attributes.scss b/app/styles/modules/admin/admin-custom-attributes.scss index e0fdfff0..ee7a21d5 100644 --- a/app/styles/modules/admin/admin-custom-attributes.scss +++ b/app/styles/modules/admin/admin-custom-attributes.scss @@ -24,7 +24,7 @@ } } .row:hover { - background: rgba($fresh-taiga, .05); + background: rgba($primary-light, .05); cursor: move; transition: background .2s linear; .icon-drag-v, @@ -89,7 +89,7 @@ transition: color .2s linear; vertical-align: middle; &:hover { - color: $green-taiga; + color: $primary; transition: color .2s linear; } } diff --git a/app/styles/modules/admin/admin-functionalities.scss b/app/styles/modules/admin/admin-functionalities.scss index 9f0842fe..1a02ff99 100644 --- a/app/styles/modules/admin/admin-functionalities.scss +++ b/app/styles/modules/admin/admin-functionalities.scss @@ -19,7 +19,7 @@ vertical-align: top; width: 32%; &.active { - background-color: rgba($green-taiga, .3); + background-color: rgba($primary, .3); opacity: 1; } .icon { diff --git a/app/styles/modules/admin/admin-membership-table.scss b/app/styles/modules/admin/admin-membership-table.scss index 544dc21f..b3420b3c 100644 --- a/app/styles/modules/admin/admin-membership-table.scss +++ b/app/styles/modules/admin/admin-membership-table.scss @@ -55,9 +55,6 @@ .pending { background-color: $red-light; color: $white; - .icon { - float: rsdsdfdvsdvight; - } &:hover { background-color: $red; color: $white; diff --git a/app/styles/modules/admin/admin-project-profile.scss b/app/styles/modules/admin/admin-project-profile.scss index cefec654..b7376f39 100644 --- a/app/styles/modules/admin/admin-project-profile.scss +++ b/app/styles/modules/admin/admin-project-profile.scss @@ -54,8 +54,8 @@ } .privacy-project:checked { + label { - background: $fresh-taiga; - border: 1px solid $fresh-taiga; + background: $primary-light; + border: 1px solid $primary-light; span { color: $white; } diff --git a/app/styles/modules/admin/admin-roles.scss b/app/styles/modules/admin/admin-roles.scss index 83e0511c..ec2049c8 100644 --- a/app/styles/modules/admin/admin-roles.scss +++ b/app/styles/modules/admin/admin-roles.scss @@ -27,7 +27,7 @@ margin-left: .5rem; transition: color.3s linear; &:hover { - color: $green-taiga; + color: $primary; transition: color.3s linear; } } diff --git a/app/styles/modules/admin/admin-submenu.scss b/app/styles/modules/admin/admin-submenu.scss index 5a66bf60..6b019c83 100644 --- a/app/styles/modules/admin/admin-submenu.scss +++ b/app/styles/modules/admin/admin-submenu.scss @@ -15,12 +15,12 @@ justify-content: space-between; padding: 1rem 0 1rem 1rem; &:hover { - background: lighten($dark-taiga, 3%); + background: lighten($primary-dark, 3%); color: $white; transition: all .2s; } &.active { - background: lighten($dark-taiga, 10%); + background: lighten($primary-dark, 10%); color: $white; transition: all .2s; } diff --git a/app/styles/modules/admin/admin-third-parties-webhooks.scss b/app/styles/modules/admin/admin-third-parties-webhooks.scss index d3a69af5..8ef4fa0c 100644 --- a/app/styles/modules/admin/admin-third-parties-webhooks.scss +++ b/app/styles/modules/admin/admin-third-parties-webhooks.scss @@ -47,10 +47,10 @@ vertical-align: middle; } a { - color: $green-taiga; + color: $primary; margin-left: .5rem; &:hover { - color: $fresh-taiga; + color: $primary-light; } } } @@ -65,7 +65,7 @@ transition: color .2s linear; vertical-align: middle; &:hover { - color: $green-taiga; + color: $primary; transition: color .2s linear; } @@ -102,7 +102,7 @@ padding: .5rem; transition: background .2s linear; &:hover { - background: rgba($fresh-taiga, .1); + background: rgba($primary-light, .1); transition: background .2s linear; } &.history-single-open { @@ -127,7 +127,7 @@ margin-right: .5rem; width: .8rem; &.history-success { - background: $fresh-taiga; + background: $primary-light; } &.history-error { background: $red; @@ -149,7 +149,7 @@ @extend %small; color: $gray-light; &:hover { - color: $fresh-taiga; + color: $primary-light; transition: color .2s linear; } } diff --git a/app/styles/modules/admin/project-values.scss b/app/styles/modules/admin/project-values.scss index e8920a8f..2dded76c 100644 --- a/app/styles/modules/admin/project-values.scss +++ b/app/styles/modules/admin/project-values.scss @@ -33,7 +33,7 @@ } .project-values-row { &:hover { - background: lighten($green-taiga, 60%); + background: lighten($primary, 60%); cursor: move; transition: background .2s ease-in; .icon { @@ -72,7 +72,7 @@ color: $gray; margin-right: .5rem; &:hover { - color: $green-taiga; + color: $primary; transition: color .3s linear; .icon-delete { color: $red; diff --git a/app/styles/modules/backlog/backlog-table.scss b/app/styles/modules/backlog/backlog-table.scss index 00c47757..365ed4c7 100644 --- a/app/styles/modules/backlog/backlog-table.scss +++ b/app/styles/modules/backlog/backlog-table.scss @@ -67,7 +67,7 @@ @include popover(200px, 0, 65%, '', ''); a { &.active { - background: $fresh-taiga; + background: $primary-light; color: $white; } } @@ -90,7 +90,7 @@ text-align: center; &:hover, &.active { - background: $fresh-taiga; + background: $primary-light; color: $white; } } @@ -122,7 +122,7 @@ flex-wrap: nowrap; position: relative; &:hover { - background: lighten($green-taiga, 60%); + background: lighten($primary, 60%); transition: background .2s ease-in; .us-settings, .icon-drag-v { @@ -134,7 +134,7 @@ border-bottom: 0; } &.ui-sortable-helper { - background: lighten($green-taiga, 60%); + background: lighten($primary, 60%); box-shadow: 1px 1px 10px rgba($black, .1); transition: background .2s ease-in; } @@ -151,7 +151,7 @@ width: 100%; } .row-selected { - background: lighten($green-taiga, 60%); + background: lighten($primary, 60%); transition: background .2s ease-in; } .user-story-name { @@ -163,7 +163,7 @@ margin-right: 1rem; vertical-align: super; &:checked+a { - color: $fresh-taiga; + color: $primary-light; transition: color .2s ease-in; } } diff --git a/app/styles/modules/backlog/sprints.scss b/app/styles/modules/backlog/sprints.scss index c96a21b3..cfb90545 100644 --- a/app/styles/modules/backlog/sprints.scss +++ b/app/styles/modules/backlog/sprints.scss @@ -69,7 +69,7 @@ transition: all .2s linear; } &:hover { - color: $fresh-taiga; + color: $primary-light; transition: color .2s linear; } } @@ -82,7 +82,7 @@ transition: opacity .2s ease-in; vertical-align: baseline; &:hover { - color: $green-taiga; + color: $primary; transition: color .2s ease-in; } } @@ -126,7 +126,7 @@ position: relative; width: 100%; .current-progress { - background: $green-taiga; + background: $primary; border-radius: 2px; height: 8px; left: 0; @@ -158,7 +158,7 @@ height: 40px; } &.ui-sortable-helper { - background: lighten($green-taiga, 60%); + background: lighten($primary, 60%); box-shadow: 1px 1px 10px rgba($black, .1); transition: background .2s ease-in; } diff --git a/app/styles/modules/backlog/taskboard-table.scss b/app/styles/modules/backlog/taskboard-table.scss index f748be15..6b6b5983 100644 --- a/app/styles/modules/backlog/taskboard-table.scss +++ b/app/styles/modules/backlog/taskboard-table.scss @@ -91,7 +91,7 @@ $column-margin: 0 10px 0 0; margin-right: .3rem; transition: color .2s linear; &:hover { - color: $green-taiga; + color: $primary; } &.hfold, &.hunfold { @@ -178,9 +178,6 @@ $column-margin: 0 10px 0 0; } } } - .taskboard-tasks-box { - background: $whitish; - } .taskboard-userstory-box { padding: .5rem .5rem .5rem 1.5rem; @@ -191,7 +188,7 @@ $column-margin: 0 10px 0 0; top: .7rem; transition: color .2s linear; &:hover { - color: $green-taiga; + color: $primary; } &.icon-plus { right: 2rem; @@ -234,7 +231,7 @@ $column-margin: 0 10px 0 0; .points-list { a { - color: $green-taiga; + color: $primary; margin-left: .5rem; &:hover { span { diff --git a/app/styles/modules/common/assigned-to.scss b/app/styles/modules/common/assigned-to.scss index ee87db88..cfb80a23 100644 --- a/app/styles/modules/common/assigned-to.scss +++ b/app/styles/modules/common/assigned-to.scss @@ -33,7 +33,7 @@ } .user-assigned { @extend %large; - color: $green-taiga; + color: $primary; cursor: default; line-height: 1.5rem; &.editable { diff --git a/app/styles/modules/common/attachments.scss b/app/styles/modules/common/attachments.scss index 374170ae..556324ac 100644 --- a/app/styles/modules/common/attachments.scss +++ b/app/styles/modules/common/attachments.scss @@ -23,7 +23,7 @@ color: $grayer; cursor: pointer; &:hover { - color: $green-taiga; + color: $primary; transition: color .2s ease-in; } } @@ -45,7 +45,7 @@ } } &.ui-sortable-helper { - background: lighten($green-taiga, 60%); + background: lighten($primary, 60%); box-shadow: 1px 1px 10px rgba($black, .1); transition: background .2s ease-in; } @@ -96,7 +96,7 @@ display: block; position: absolute; &:hover { - color: $green-taiga; + color: $primary; } } .settings { @@ -143,7 +143,7 @@ } } .percentage { - background: rgba($green-taiga, .1); + background: rgba($primary, .1); bottom: 0; height: 40px; left: 0; @@ -162,11 +162,11 @@ color: $gray-light; } .more-attachments-num { - color: $green-taiga; + color: $primary; margin-left: .5rem; } &:hover { - background: lighten($green-taiga, 60%); + background: lighten($primary, 60%); transition: background .2s ease-in; } } diff --git a/app/styles/modules/common/category-config.scss b/app/styles/modules/common/category-config.scss index 7a9346d3..f3341d81 100644 --- a/app/styles/modules/common/category-config.scss +++ b/app/styles/modules/common/category-config.scss @@ -28,7 +28,7 @@ margin-right: .1rem; width: 15px; &.active { - background: $green-taiga; + background: $primary; } &.inactive { background: $gray; diff --git a/app/styles/modules/common/colors-table.scss b/app/styles/modules/common/colors-table.scss index 56caeca1..314c87de 100644 --- a/app/styles/modules/common/colors-table.scss +++ b/app/styles/modules/common/colors-table.scss @@ -24,7 +24,7 @@ justify-content: center; padding: 1rem; &:hover { - background: lighten($green-taiga, 60%); + background: lighten($primary, 60%); cursor: move; transition: background .2s ease-in; .icon { @@ -117,7 +117,7 @@ margin-right: 1rem; opacity: 0; &:hover { - color: $green-taiga; + color: $primary; transition: all .2s ease-in; } &.icon-check-square { @@ -131,7 +131,7 @@ } .icon-check-square { @extend %large; - color: $green-taiga; + color: $primary; } } diff --git a/app/styles/modules/common/custom-fields.scss b/app/styles/modules/common/custom-fields.scss index 929546ba..ec336e5e 100644 --- a/app/styles/modules/common/custom-fields.scss +++ b/app/styles/modules/common/custom-fields.scss @@ -43,7 +43,7 @@ color: $gray-light; } a:hover { - color: $green-taiga; + color: $primary; } } } diff --git a/app/styles/modules/common/external-reference.scss b/app/styles/modules/common/external-reference.scss index 7c6c2f43..44336f69 100644 --- a/app/styles/modules/common/external-reference.scss +++ b/app/styles/modules/common/external-reference.scss @@ -20,7 +20,7 @@ padding: 0 .2rem; transition: color .3s linear; &:hover { - color: $green-taiga; + color: $primary; } &:first-child { border: 0; diff --git a/app/styles/modules/common/history.scss b/app/styles/modules/common/history.scss index 688bcb9e..3c6947c3 100644 --- a/app/styles/modules/common/history.scss +++ b/app/styles/modules/common/history.scss @@ -6,7 +6,7 @@ padding: .5rem; &:hover { .icon { - color: $green-taiga; + color: $primary; transform: rotate(180deg); transition: all .2s linear; } @@ -58,7 +58,7 @@ color: $grayer; } &:hover { - color: $green-taiga; + color: $primary; transition: color .2s ease-in; } } @@ -119,7 +119,7 @@ display: block; padding: 1rem 0 1rem 1rem; &:hover { - background: lighten($green-taiga, 60%); + background: lighten($primary, 60%); transition: background .2s ease-in; } } @@ -130,7 +130,7 @@ display: block; padding: 1rem; .prev-comments-num { - color: $green-taiga; + color: $primary; margin-left: .5rem; } } @@ -180,7 +180,7 @@ color: $gray-light; margin-left: .3rem; &:hover { - color: $green-taiga; + color: $primary; transition: color .2s linear; } } @@ -206,12 +206,12 @@ vertical-align: baseline; } &:hover { - color: $green-taiga; + color: $primary; transition: color .2s linear; } } .username { - color: $green-taiga; + color: $primary; margin-bottom: .5rem; } .activity-user { @@ -223,7 +223,7 @@ } } .activity-username { - color: $green-taiga; + color: $primary; margin-bottom: .5rem; } .activity-content { @@ -272,7 +272,7 @@ display: block; padding: 1rem; .prev-activity-num { - color: $green-taiga; + color: $primary; margin-left: .5rem; } } diff --git a/app/styles/modules/common/lightbox.scss b/app/styles/modules/common/lightbox.scss index 198e7cbf..baa7fadc 100644 --- a/app/styles/modules/common/lightbox.scss +++ b/app/styles/modules/common/lightbox.scss @@ -57,8 +57,8 @@ .requirement, .iocaine { &:hover { - background: $fresh-taiga; - border: 1px solid $green-taiga; + background: $primary-light; + border: 1px solid $primary; color: $white; transition: all .2s ease-in; } @@ -79,8 +79,8 @@ .team-requirement, .iocaine-flag { input:checked+label { - background: $green-taiga; - border: 1px solid $green-taiga; + background: $primary; + border: 1px solid $primary; color: $white; } @@ -400,7 +400,7 @@ padding: 3px; position: relative; .bar { - background: $fresh-taiga; + background: $primary-light; height: 24px; position: absolute; transition: width .1s linear; @@ -477,7 +477,7 @@ position: relative; &:hover, &.active { - background: lighten($green-taiga, 55%); + background: lighten($primary, 55%); cursor: pointer; } &:hover { diff --git a/app/styles/modules/common/nav.scss b/app/styles/modules/common/nav.scss index b397516c..82d6c1d6 100644 --- a/app/styles/modules/common/nav.scss +++ b/app/styles/modules/common/nav.scss @@ -1,8 +1,6 @@ $label-arrow-wh: 12px; tg-project-menu { - background-color: $dark-taiga; - background-image: url('../images/menu.png'); background-position: 0 -300px; min-height: $main-height; padding: 1rem 0; @@ -22,7 +20,7 @@ tg-project-menu { } a:hover { background: rgba($black, .2); - color: $fresh-taiga; + color: $primary-light; transition: color .3s linear; .helper { @extend %small; @@ -52,7 +50,6 @@ tg-project-menu { } } svg path { - fill: $white; opacity: 1; } span { @@ -70,9 +67,9 @@ tg-project-menu { } .active { background: rgba($black, .2); - color: $fresh-taiga; + color: $primary-light; svg path { - fill: $fresh-taiga; + fill: $primary-light; opacity: 1; } } diff --git a/app/styles/modules/common/projects-nav.scss b/app/styles/modules/common/projects-nav.scss deleted file mode 100644 index ca3d0671..00000000 --- a/app/styles/modules/common/projects-nav.scss +++ /dev/null @@ -1,141 +0,0 @@ -.projects-nav { - background-color: $menu; - display: flex; - flex-direction: column; - height: 100%; - left: 0; - overflow: hidden; - padding: 2rem 1rem; - position: fixed; - top: 0; - transform: translate3d(-300px, 0, 0); - width: 300px; - z-index: 99; - form { - flex-shrink: 0; - } - h1 { - color: $white; - flex-shrink: 0; - margin-bottom: 2rem; - text-align: center; - } - input { - background-color: $gray; - color: $whitish; - } - .icon-search { - position: absolute; - right: .7rem; - top: .7rem; - } - ul { - left: 0; - margin-bottom: 0; - margin-top: 1rem; - position: relative; - top: 0; - width: 100%; - } - .projects-pagination { - display: flex; - flex-direction: column; - margin-top: 1rem; - min-height: 1px; //firefox bug #2057 - } - .create-project-button-wrapper { - display: flex; - flex-shrink: 0; - margin-top: 1rem; - .create-project-button { - flex-grow: 8; - margin-right: .2rem; - text-align: center; - } - .import-project-button { - flex-grow: 1; - padding-left: .5rem; - padding-right: .5rem; - text-align: center; - .icon { - color: $grayer; - margin: 0; - } - } - } - .v-pagination-previous, - .v-pagination-next { - flex-shrink: 0; - } -} - -.projects-list { - a { - @extend %large; - @extend %title; - color: $whitish; - display: block; - padding: 1rem; - position: relative; - text-transform: uppercase; - width: 100%; - &.active, - &:hover { - background-color: $gray; - color: $green-taiga; - transition: background-color .3s linear; - .icon { - opacity: 1; - transition: opacity .3s linear; - } - } - .project-name { - display: block; - max-width: 90%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - } - .icon { - color: $whitish; - opacity: 0; - position: absolute; - right: 1rem; - top: 1rem; - } - li { - border-bottom: 2px solid $gray; - } -} - -.projects-nav-overlay { - // @include transition (all 1s ease); - @extend %background-taiga; - // background-blend-mode: multiply; - // background-color: $green-taiga; - bottom: 0; - display: none; - left: 0; - opacity: 0; - position: fixed; - right: 0; - top: 0; - width: 100%; - z-index: 99900; - .container { - left: -200px; - margin: 0 auto; - margin-top: 15%; - opacity: 0; - position: relative; - transform: translateY(-50%); - width: 150px; - } - p { - @extend %medium; - color: $fresh-taiga; - padding-top: 20px; - text-align: center; - } -} diff --git a/app/styles/modules/common/related-tasks.scss b/app/styles/modules/common/related-tasks.scss index e40ff5b8..9655cee8 100644 --- a/app/styles/modules/common/related-tasks.scss +++ b/app/styles/modules/common/related-tasks.scss @@ -19,7 +19,7 @@ color: $grayer; cursor: pointer; &:hover { - color: $green-taiga; + color: $primary; transition: color .2s ease-in; } } @@ -153,7 +153,7 @@ } .iocaine, .iocaine:hover { - background: rgba($fresh-taiga, .3); + background: rgba($primary-light, .3); .icon-iocaine { @extend %large; display: inline-block; diff --git a/app/styles/modules/common/wizard.scss b/app/styles/modules/common/wizard.scss index b06d7a29..75c60ac7 100644 --- a/app/styles/modules/common/wizard.scss +++ b/app/styles/modules/common/wizard.scss @@ -1,6 +1,6 @@ .wizard-create-project { @extend %lightbox; - background: url('/images/invitation_bg.jpg') no-repeat center center; + @extend %background-taiga; background-size: cover; color: $white; text-align: center; @@ -77,7 +77,7 @@ } input:checked { +label { - background: rgba($fresh-taiga, .7); + background: rgba($primary-light, .7); transition: background .3s ease-in; } } @@ -90,7 +90,7 @@ text-align: center; transition: background .3s ease-in; &:hover { - background: rgba($green-taiga, .7); + background: rgba($primary, .7); transition: background .3s ease-in; } .icon { @@ -160,12 +160,8 @@ left: 25%; } &:nth-child(2) { - // left: 50%; left: 75%; } - // &:nth-child(3) { - // left: 75%; - // } } } .progress-bar-wrapper { @@ -173,7 +169,7 @@ height: .5rem; } .bar { - background: rgba($fresh-taiga, .9); + background: rgba($primary-light, .9); height: .5rem; left: 0; position: absolute; diff --git a/app/styles/modules/create-project.scss b/app/styles/modules/create-project.scss index f7958a33..dc22aefd 100644 --- a/app/styles/modules/create-project.scss +++ b/app/styles/modules/create-project.scss @@ -47,7 +47,7 @@ margin-bottom: .5rem; text-align: center; &:hover { - background: $fresh-taiga; + background: $primary-light; } } a { diff --git a/app/styles/modules/filters/filters.scss b/app/styles/modules/filters/filters.scss index 5a5444a7..527f44cc 100644 --- a/app/styles/modules/filters/filters.scss +++ b/app/styles/modules/filters/filters.scss @@ -75,7 +75,7 @@ } .custom-filters { .title { - color: $green-taiga; + color: $primary; } } a { @@ -84,7 +84,7 @@ padding: .5rem 0 .5rem .5rem; transition: color .2s ease-in; &:hover { - color: $green-taiga; + color: $primary; transition: color .2s ease-in; .icon { opacity: 1; diff --git a/app/styles/modules/home-project.scss b/app/styles/modules/home-project.scss index a2b8c816..4956a40e 100644 --- a/app/styles/modules/home-project.scss +++ b/app/styles/modules/home-project.scss @@ -49,9 +49,6 @@ display: flex; flex-wrap: wrap; margin-bottom: 1rem; - a { - display: block; - } li { margin-right: .14rem; width: 24%; @@ -59,6 +56,9 @@ margin-right: 0; } } + a { + display: block; + } img { border-radius: .2rem; width: 100%; diff --git a/app/styles/modules/issues/issues-table.scss b/app/styles/modules/issues/issues-table.scss index 22a4a2ec..99d11211 100644 --- a/app/styles/modules/issues/issues-table.scss +++ b/app/styles/modules/issues/issues-table.scss @@ -6,7 +6,7 @@ } .row { &:hover { - background: lighten($green-taiga, 60%); + background: lighten($primary, 60%); transition: background .2s ease-in; } .icon { @@ -14,7 +14,7 @@ } } .row-selected { - background: lighten($green-taiga, 60%); + background: lighten($primary, 60%); transition: background .2s ease-in; } .title { diff --git a/app/styles/modules/kanban/kanban-table.scss b/app/styles/modules/kanban/kanban-table.scss index d4c0485e..63612206 100644 --- a/app/styles/modules/kanban/kanban-table.scss +++ b/app/styles/modules/kanban/kanban-table.scss @@ -87,7 +87,7 @@ $column-margin: 0 10px 0 0; margin-right: .3rem; transition: color .2s linear; &:hover { - color: $green-taiga; + color: $primary; } &.hfold, &.hunfold { diff --git a/app/styles/modules/search/search-result-table.scss b/app/styles/modules/search/search-result-table.scss index f01f2822..db6ec827 100644 --- a/app/styles/modules/search/search-result-table.scss +++ b/app/styles/modules/search/search-result-table.scss @@ -1,5 +1,4 @@ .search-result-table { - .empty { .title { border: 0; @@ -13,7 +12,7 @@ justify-content: space-between; padding: .5rem; &:hover { - background: lighten($green-taiga, 60%); + background: lighten($primary, 60%); transition: background .2s ease-in; } .ref { @@ -40,7 +39,7 @@ } } .row-selected { - background: lighten($green-taiga, 60%); + background: lighten($primary, 60%); transition: background .2s ease-in; } diff --git a/app/styles/modules/team/team-filters.scss b/app/styles/modules/team/team-filters.scss index 1d39765d..e638fe0d 100644 --- a/app/styles/modules/team/team-filters.scss +++ b/app/styles/modules/team/team-filters.scss @@ -18,7 +18,7 @@ padding: 1rem 0 1rem 1rem; &:hover, &.active { - color: $green-taiga; + color: $primary; transition: color .3s linear; } &.active.icon { diff --git a/app/styles/modules/team/team-table.scss b/app/styles/modules/team/team-table.scss index b6ccef7f..a75332d4 100644 --- a/app/styles/modules/team/team-table.scss +++ b/app/styles/modules/team/team-table.scss @@ -28,7 +28,7 @@ color: $grayer; } .top { - color: $fresh-taiga; + color: $primary-light; opacity: 1; } &:hover { diff --git a/app/styles/modules/user-settings/mail-notifications-table.scss b/app/styles/modules/user-settings/mail-notifications-table.scss index 01fffa42..adc7da4b 100644 --- a/app/styles/modules/user-settings/mail-notifications-table.scss +++ b/app/styles/modules/user-settings/mail-notifications-table.scss @@ -33,7 +33,7 @@ display: none; &:checked { +label { - background: $green-taiga; + background: $primary; transition: background .3s linear; } } @@ -45,7 +45,7 @@ display: block; padding: .5rem; &:hover { - background: $fresh-taiga; + background: $primary-light; cursor: pointer; transition: background .3s linear; } diff --git a/app/styles/modules/wiki/wiki-summary.scss b/app/styles/modules/wiki/wiki-summary.scss index 0328f1eb..cadf915f 100644 --- a/app/styles/modules/wiki/wiki-summary.scss +++ b/app/styles/modules/wiki/wiki-summary.scss @@ -22,7 +22,7 @@ } .username { @extend %large; - color: $fresh-taiga; + color: $primary-light; white-space: nowrap; } } diff --git a/app/themes/high-contrast/custom.scss b/app/themes/high-contrast/custom.scss new file mode 100644 index 00000000..4486c097 --- /dev/null +++ b/app/themes/high-contrast/custom.scss @@ -0,0 +1,117 @@ +// Any styles in this stylesheet will override any previous defined style in Taiga. + +// Max: Beat it or I'll call the Brute Squad! +// Fezzik: I'm on the Brute Squad. +// Max: [sees Fezzik's size] You are the Brute Squad! + +.working-on .duty-id, +.watching .duty-id, +.activity-item p, +.table-team .avatar .position, +.points-per-role > li, +.private path { + color: $black; +} +.navbar a:hover { + color: $white; +} + +.points-per-role > li:first-child { + background: $black; +} + +.login-main { + color: $white; + a { + color: $white; + } +} + +.home-project-list { + li { + border: 1px solid $black; + } + p { + color: $black; + } +} + +.main-nav .active { + background: $white; + svg path { + fill: $black; + } +} + +// Titles +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: Arial, Helvetica, sans-serif; + .date { + color: $black; + } +} + +.tag { + background: $white; + border: 1px solid $black; +} + +.master, +.menu-secondary, +.menu-tertiary, +.extrabar { + background: $white; + border-left: 1px solid $black; + border-right: 1px solid $black; +} + +.button-gray { + background: $black; +} + +.settings-nav { + .active { + background: $black; + color: $white; + } +} + +.admin-submenu ul a { + color: $black; +} + +.policy-table { + input:checked { + +label { + color: $white; + } + } + label { + color: $black; + &:hover { + color: $white; + } + } +} + +.admin-common .admin-subtitle { + color: $black; +} + +.admin-functionalities .functionality.active { + background: $white; + border: 1px solid $black; +} + +.admin-membership-table { + .avatar .email, + .delete { + color: $black; + } + +} diff --git a/app/themes/high-contrast/variables.scss b/app/themes/high-contrast/variables.scss new file mode 100755 index 00000000..365e34fa --- /dev/null +++ b/app/themes/high-contrast/variables.scss @@ -0,0 +1,237 @@ +//************************* +//** COLORS +//************************ + +// Colors +$black: #000; +$blackish: #212121; +$grayer: #212121; +$gray: #757575; +$gray-light: #f5f5f5; +$whitish: #f5f5f5; +$white: #fff; + +// Primary colors +$primary-light: #212121; +$primary: #000; +$primary-dark: #000; + +//Warning colors +$red-light: #ff0062; +$red: #ff2400; + +//Card color +$card: #F0EFD1; +$card-hover: $black; +$card-dark: $black; + +$green-japanese-laurel: #009688; +$green-olive: #cddc39; +$red-amaranth: #e91e63; +$purple-eggplant: #9c27b0; +$yellow-pear: #ffc107; + +//************************* +//** LAYOUT +//************************* + +// Default body color and background +body { + background: $white; // fallback + color: $grayer; +} + +// Main +.master { + background: $white; +} + +// Secondary panel +.menu-secondary { + background: $white; +} + +// Tertiary panel +.menu-tertiary { + background-color: $white; +} + +// Extra bar panel +.extrabar { + background: $white; +} + + +//************************** +//** TYPOGRAPHY +//************************** + +// Font Sizes +%xsmall {font-size: .75rem;} +%small {font-size: .9rem;} +%medium {font-size: 1rem;} +%large {font-size: 1.2rem;} +%larger {font-size: 1.6rem;} +%xlarge {font-size: 2rem;} +%xxlarge {font-size: 3rem;} + +// Font Types +%title {font-family: Arial, Helvetica, sans-serif; } +%light {font-family: Arial, Helvetica, sans-serif; font-weight: 100; } +%text {font-family: Arial, Helvetica, sans-serif; font-weight: 400; } +%bold {font-family: Arial, Helvetica, sans-serif; font-weight:800; } +%taiga {font-family: 'taiga';} +%mono {font-family: 'courier new', 'monospace';} + +// Titles +h1, +h2, +h3, +h4, +h5, +h6 { + color: $blackish; +} + +a { + color: $grayer; + &:hover { + color: $primary; + } +} + +//************************** +//** SCAFFOLDING +//************************** + +//Forms +input[type="text"], +input[type="number"], +input[type="password"], +input[type="email"], +input[type="date"], +input[type="password"], +select, +textarea { + background: $white; + border-color: $black; + color: $black; + @include placeholder { + color:$black; + } + &.checksley-error { + border: 1px solid $red; + } +} + + +// Input errors +.checksley-error-list { + background: rgba($whitish, .8); + color: $red; +} + +// Blockquote +blockquote { + border-left: 5px solid $gray; +} + +blockquote, +blockquote p { + color: $black; +} + +cite { + color: $black; +} + +// lightbox +%lightbox { + background: rgba($white, .95); +} + +// Background images +%triangled-bg { + background: url('https://farm9.staticflickr.com/8449/7893171238_a201af22bc_k_d.jpg') no-repeat center center; + background-size: cover; +} + +%background-taiga { + background: url('https://farm9.staticflickr.com/8449/7893171238_a201af22bc_k_d.jpg') no-repeat center center; + background-size: cover; +} + +.summary { + background: $grayer; + color: $white; +} + + +//************************ +//** NAVIGATION +//*********************** + +// Top navigation bar +.navbar { + background: $black; + &:after { + background: url('../images/menu-vert.png') repeat top left; + } +} + +$top-icon-color: $white; +$dropdown-color: rgba(darken($primary-dark, 20%), 1); + +//In project left navigation bar +tg-project-menu { + background-color: rgba(darken($primary-dark, 15%), 1); + background-image: none; +} + +.main-nav { + svg path { + fill: $white; + } +} + +//***************************** +//** TASKBOARD +//****************************** + +//Taskboard table +.taskboard-table-header { + .task-colum-name { + background: lighten($white, 20%); + border-top: 3px solid $black; + .icon { + color: $black; + } + } +} +.taskboard-table-body { + .taskboard-tasks-box { + background: $white; + border: 1px solid $black; + } +} + +//***************************** +//** KANBAN +//****************************** + +//Kanban table +.kanban-table-header { + .task-colum-name { + background: lighten($white, 20%); + border-top: 3px solid $black; + .icon { + color: $black; + } + } +} + +.kanban-table-body { + .kanban-uses-box { + background: $whitish; + } +} diff --git a/app/themes/material-design/custom.scss b/app/themes/material-design/custom.scss new file mode 100644 index 00000000..32e735da --- /dev/null +++ b/app/themes/material-design/custom.scss @@ -0,0 +1,5 @@ +// Any styles in this stylesheet will override any previous defined style in Taiga. + +// Max: Beat it or I'll call the Brute Squad! +// Fezzik: I'm on the Brute Squad. +// Max: [sees Fezzik's size] You are the Brute Squad! diff --git a/app/themes/material-design/variables.scss b/app/themes/material-design/variables.scss new file mode 100755 index 00000000..e33b43e1 --- /dev/null +++ b/app/themes/material-design/variables.scss @@ -0,0 +1,246 @@ +//************************* +//** COLORS +//************************ + +// Colors +$black: #000; +$blackish: #212121; +$grayer: #424242; +$gray: #757575; +$gray-light: #bdbdbd; +$whitish: #f5f5f5; +$white: #fff; + +// Primary colors +$primary-light: #8c9eff; +$primary: #3f51b5; +$primary-dark: #1a237e; + +//Warning colors +$red-light: #ff5252; +$red: #f44336; + +//Card color +$card: #fff8e4; +$card-hover: #f1e8cd; +$card-dark: #cfc29b; + +$green-japanese-laurel: #009688; +$green-olive: #cddc39; +$red-amaranth: #e91e63; +$purple-eggplant: #9c27b0; +$yellow-pear: #ffc107; + +//************************* +//** LAYOUT +//************************* + +// Default body color and background +body { + background: $white; // fallback + color: $grayer; +} + +// Main +.master { + background: $white; +} + +// Secondary panel +.menu-secondary { + background: lighten($primary-light, 22%); +} + +// Tertiary panel +.menu-tertiary { + background-color: $primary-dark; +} + +// Extra bar panel +.extrabar { + background: lighten($primary-light, 22%); +} + + +//************************** +//** TYPOGRAPHY +//************************** + +@each $font-face in OpenSans-CondLight, OpenSans-Light, opensans-regular, opensans-semibold, taiga { + @font-face { + font-family: '#{$font-face}'; + src: url('../fonts/#{$font-face}.eot?#iefix') format('embedded-opentype'), + url('../fonts/#{$font-face}.woff') format('woff'), + url('../fonts/#{$font-face}.ttf') format('truetype'), + url('../fonts/#{$font-face}.svg#{$font-face}') format('svg'); + } +} + +// Font Sizes +%xsmall {font-size: .75rem;} +%small {font-size: .9rem;} +%medium {font-size: 1rem;} +%large {font-size: 1.2rem;} +%larger {font-size: 1.6rem;} +%xlarge {font-size: 2rem;} +%xxlarge {font-size: 3rem;} + +// Font Types +%title {font-family: 'OpenSans-CondLight', Arial, Helvetica, sans-serif; } +%light {font-family: 'OpenSans-Light', Arial, Helvetica, sans-serif; } +%text {font-family: 'opensans-regular', Arial, Helvetica, sans-serif; } +%bold {font-family: 'opensans-semibold', Arial, Helvetica, sans-serif; } +%taiga {font-family: 'taiga';} +%mono {font-family: 'courier new', 'monospace';} + +// Titles +h1, +h2, +h3, +h4, +h5, +h6 { + color: $blackish; +} + +a { + color: $grayer; + &:hover { + color: $primary; + } +} + +//************************** +//** SCAFFOLDING +//************************** + +//Forms +input[type="text"], +input[type="number"], +input[type="password"], +input[type="email"], +input[type="date"], +input[type="password"], +select, +textarea { + background: $whitish; + border-color: $primary; + color: $grayer; + @include placeholder { + color: darken($gray-light, 10%); + } + &.checksley-error { + border: 1px solid $red; + } +} + + +// Input errors +.checksley-error-list { + background: rgba($whitish, .8); + color: $red; +} + +// Blockquote +blockquote { + border-left: 5px solid $primary-light; +} + +blockquote, +blockquote p { + color: $gray; +} + +cite { + color: $gray; +} + +// lightbox +%lightbox { + background: rgba($white, .95); +} + +// Background images +%triangled-bg { + background: url('https://lh4.googleusercontent.com/-k7YewfrSQ_Q/VGdNZND0NBI/AAAAAAAAD1A/UDZBeSGR7iM/w1465-h824-no/Ultimate%2BMaterial%2BLollipop%2BCollection%2B-%2B480') no-repeat center center; + background-size: cover; +} + +%background-taiga { + background: url('https://lh6.googleusercontent.com/-2l_mJ5g6j4k/VGdNZCpaERI/AAAAAAAAD2o/zCx5Z3cYv6Y/w1465-h824-no/Ultimate%2BMaterial%2BLollipop%2BCollection%2B-%2B497') no-repeat center center; + background-size: cover; +} + +.summary { + background: $grayer; + color: $white; +} + + +//************************ +//** NAVIGATION +//*********************** + +// Top navigation bar +.navbar { + background: rgba($red-amaranth, .6); + &:after { + background: url('../images/menu-vert.png') repeat top left; + } +} + +$top-icon-color: $white; +$dropdown-color: rgba(darken($primary-dark, 20%), 1); + +//In project left navigation bar +tg-project-menu { + background-color: rgba(darken($primary-dark, 15%), 1); + background-image: none; +} + +.main-nav { + svg path { + fill: $white; + } +} + +//***************************** +//** TASKBOARD +//****************************** + +//Taskboard table +.taskboard-table-header { + .task-colum-name { + background: lighten($primary-light, 20%); + border-top: 3px solid $primary; + .icon { + color: $primary; + } + } +} +.taskboard-table-body { + .taskboard-tasks-box { + background: $whitish; + } +} + +//***************************** +//** KANBAN +//****************************** + +//Kanban table +.kanban-table-header { + .task-colum-name { + background: lighten($primary-light, 20%); + border-top: 3px solid $primary; + .icon { + color: $primary; + } + } +} + +.kanban-table-body { + .kanban-uses-box { + background: $whitish; + } +} diff --git a/app/themes/taiga/custom.scss b/app/themes/taiga/custom.scss new file mode 100644 index 00000000..32e735da --- /dev/null +++ b/app/themes/taiga/custom.scss @@ -0,0 +1,5 @@ +// Any styles in this stylesheet will override any previous defined style in Taiga. + +// Max: Beat it or I'll call the Brute Squad! +// Fezzik: I'm on the Brute Squad. +// Max: [sees Fezzik's size] You are the Brute Squad! diff --git a/app/themes/taiga/variables.scss b/app/themes/taiga/variables.scss new file mode 100755 index 00000000..c8595aa5 --- /dev/null +++ b/app/themes/taiga/variables.scss @@ -0,0 +1,236 @@ +//************************* +//** COLORS +//************************ + +// Colors +$black: #000; +$blackish: #050505; +$grayer: #444; +$gray: #555; +$gray-light: #b8b8b8; +$whitish: #f5f5f5; +$white: #fff; + +// Primary colors +$primary-light: #9dce0a; +$primary: #72a114; +$primary-dark: #879b89; + +//Warning colors +$red-light: #ff8282; +$red: #f00; + +//Card color +$card: #fff8e4; +$card-hover: #f1e8cd; +$card-dark: #cfc29b; + +$green-japanese-laurel: #237400; +$green-olive: #618000; +$red-amaranth: #e43050; +$purple-eggplant: #810061; +$yellow-pear: #bbe831; + +//************************* +//** LAYOUT +//************************* + +// Default body color and background +body { + background: $white; // fallback + color: $grayer; +} + +// Main +.master { + background: $white; +} + +// Secondary panel +.menu-secondary { + background: $whitish; +} + +// Tertiary panel +.menu-tertiary { + background-color: $primary-dark; +} + +// Extra bar panel +.extrabar { + background: $whitish; +} + + +//************************** +//** TYPOGRAPHY +//************************** + +// Font Sizes +%xsmall {font-size: .75rem;} +%small {font-size: .9rem;} +%medium {font-size: 1rem;} +%large {font-size: 1.2rem;} +%larger {font-size: 1.6rem;} +%xlarge {font-size: 2rem;} +%xxlarge {font-size: 3rem;} + +// Font Types +%title {font-family: 'OpenSans-CondLight', Arial, Helvetica, sans-serif; } +%light {font-family: 'OpenSans-Light', Arial, Helvetica, sans-serif; } +%text {font-family: 'opensans-regular', Arial, Helvetica, sans-serif; } +%bold {font-family: 'opensans-semibold', Arial, Helvetica, sans-serif; } +%taiga {font-family: 'taiga';} +%mono {font-family: 'courier new', 'monospace';} + +// Titles +h1, +h2, +h3, +h4, +h5, +h6 { + color: $blackish; +} + +a { + color: $grayer; + &:hover { + color: $primary; + } +} + +//************************** +//** SCAFFOLDING +//************************** + +//Forms +input[type="text"], +input[type="number"], +input[type="password"], +input[type="email"], +input[type="date"], +input[type="password"], +select, +textarea { + background: $whitish; + border-color: $gray-light; + color: $grayer; + @include placeholder { + color: darken($gray-light, 10%); + } + &.checksley-error { + border: 1px solid $red; + } +} + + +// Input errors +.checksley-error-list { + background: rgba($whitish, .8); + color: $red; +} + +// Blockquote +blockquote { + border-left: 5px solid $whitish; +} + +blockquote, +blockquote p { + color: $gray; +} + +cite { + color: $gray; +} + +// lightbox +%lightbox { + background: rgba($white, .95); +} + +// Background images +%triangled-bg { + background: url('/images/bg.png') no-repeat center center; + background-size: cover; +} + +%background-taiga { + background: url('/images/invitation_bg.jpg') no-repeat center center; + background-size: cover; +} + +.summary { + background: $grayer; + color: $white; +} + + +//************************ +//** NAVIGATION +//*********************** + +// Top navigation bar +.navbar { + background: rgba($black, .5); + &:after { + background: url('../images/menu-vert.png') repeat top left; + } +} + +$top-icon-color: #11241f; +$dropdown-color: rgba(darken($grayer, 20%), 1); + +//In project left navigation bar +tg-project-menu { + background-color: $primary-dark; + background-image: url('../images/menu.png'); +} + +.main-nav { + svg path { + fill: $white; + } +} + +//***************************** +//** TASKBOARD +//****************************** + +//Taskboard table +.taskboard-table-header { + .task-colum-name { + background: $whitish; + border-top: 3px solid $gray-light; + .icon { + color: $gray-light; + } + } +} +.taskboard-table-body { + .taskboard-tasks-box { + background: $whitish; + } +} + +//***************************** +//** KANBAN +//****************************** + +//Kanban table +.kanban-table-header { + .task-colum-name { + background: $whitish; + border-top: 3px solid $gray-light; + .icon { + color: $gray-light; + } + } +} + +.kanban-table-body { + .kanban-uses-box { + background: $whitish; + } +} diff --git a/conf/conf.example.json b/conf/conf.example.json index 2a78a5ea..d039bb77 100644 --- a/conf/conf.example.json +++ b/conf/conf.example.json @@ -4,6 +4,8 @@ "debug": true, "debugInfo": false, "defaultLanguage": "en", + "themes": ["taiga"], + "defaultTheme": "taiga", "publicRegisterEnabled": true, "feedbackEnabled": true, "privacyPolicyUrl": null, diff --git a/gulp-utils.js b/gulp-utils.js new file mode 100644 index 00000000..bfefee28 --- /dev/null +++ b/gulp-utils.js @@ -0,0 +1,74 @@ +var exports = module.exports = {}; +var fs = require("fs"); + +var Theme = function() { + var defaultTheme = "taiga"; + + var themesPath = "app/themes"; + var tmpThemesPath = "tmp/themes"; + + var themesSequenceIndex = 0; + var themesSequence = []; + + var searchIndex = function(name) { + for(var i = 0; i < themesSequence.length; i++) { + if (themesSequence[i].name === name) { + return i; + } + } + }; + + var initThemes = function () { + var availableThemes = {}; + var files = fs.readdirSync(themesPath); + + files.forEach(function(file) { + var path = themesPath + '/' + file; + var tmpPath = tmpThemesPath + '/' + file; + + if (fs.statSync(path).isDirectory()) { + availableThemes[file] = { + name: file, + path: path, + customVariables: path + "/variables.scss", + customScss: path + "/custom.scss", + customCss: tmpPath + "/custom.css", + }; + } + }); + + themesSequence.push(availableThemes[defaultTheme]); + + for (var theme in availableThemes) { + if (theme !== defaultTheme) { + themesSequence.push(availableThemes[theme]); + } + } + }; + + initThemes(); + + var obj = {}; + + obj.next = function() { + themesSequenceIndex++; + }; + + obj.set = function(name) { + themesSequenceIndex = searchIndex(name); + }; + + Object.defineProperty(obj, "current", { + get: function() { + return themesSequence[themesSequenceIndex]; + } + }); + + return obj; +}; + +exports.themes = { + sequence: function() { + return Theme(); + } +}; diff --git a/gulpfile.js b/gulpfile.js index 06eee914..c923045c 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -27,6 +27,16 @@ var gulp = require("gulp"), del = require("del"), coffeelint = require('gulp-coffeelint'); +var argv = require('minimist')(process.argv.slice(2)); + +var utils = require("./gulp-utils"); + +var themes = utils.themes.sequence(); + +if (argv.theme) { + themes.set(argv.theme); +} + var paths = {}; paths.app = "app/"; paths.dist = "dist/"; @@ -55,10 +65,16 @@ paths.sass = [ paths.app + "**/*.scss", "!" + paths.app + "/styles/bourbon/**/*.scss", "!" + paths.app + "/styles/dependencies/**/*.scss", - "!" + paths.app + "/styles/extras/**/*.scss" + "!" + paths.app + "/styles/extras/**/*.scss", + "!" + paths.app + "/themes/**/variables.scss", ]; -paths.styles_dependencies = paths.app + "/styles/dependencies/**/*.scss"; +paths.sass_watch = paths.sass.concat(themes.current.customScss); + +paths.styles_dependencies = [ + paths.app + "/styles/dependencies/**/*.scss", + themes.current.customVariables +]; paths.css = [ paths.tmp + "styles/**/*.css", @@ -79,7 +95,8 @@ paths.css_order = [ paths.tmp + "styles/modules/**/*.css", paths.tmp + "modules/**/*.css", paths.tmp + "styles/shame/*.css", - paths.tmp + "plugins/**/*.css" + paths.tmp + "plugins/**/*.css", + paths.tmp + "themes/**/*.css" ]; paths.coffee = [ @@ -153,7 +170,7 @@ paths.libs = [ paths.app + "js/sha1-custom.js" ]; -var isDeploy = process.argv[process.argv.length - 1] == "deploy"; +var isDeploy = argv["_"].indexOf("deploy") !== -1; /* ############################################################################ @@ -213,7 +230,9 @@ gulp.task("scss-lint", [], function() { var fail = process.argv.indexOf("--fail") !== -1; - return gulp.src(paths.sass.concat(ignore)) + var sassFiles = paths.sass.concat(themes.current.customScss, ignore); + + return gulp.src(sassFiles) .pipe(gulpif(!isDeploy, cache(scsslint({endless: true, sync: true, config: "scsslint.yml"}), { success: function(scsslintFile) { return scsslintFile.scsslint.success; @@ -232,20 +251,25 @@ gulp.task("clear-sass-cache", function() { }); gulp.task("sass-compile", [], function() { - return gulp.src(paths.sass) + var sassFiles = paths.sass.concat(themes.current.customScss); + + return gulp.src(sassFiles) .pipe(plumber()) .pipe(insert.prepend('@import "dependencies";')) .pipe(cached("sass")) .pipe(sass({ includePaths: [ - paths.app + "styles/extras/" + paths.app + "styles/extras/", + themes.current.path ] })) .pipe(gulp.dest(paths.tmp)); }); gulp.task("css-lint-app", function() { - return gulp.src(paths.css) + var cssFiles = paths.css.concat(themes.current.customCss); + + return gulp.src(cssFiles) .pipe(gulpif(!isDeploy, cache(csslint("csslintrc.json"), { success: function(csslintFile) { return csslintFile.csslint.success; @@ -260,9 +284,11 @@ gulp.task("css-lint-app", function() { }); gulp.task("app-css", function() { - return gulp.src(paths.css) + var cssFiles = paths.css.concat(themes.current.customCss); + + return gulp.src(cssFiles) .pipe(order(paths.css_order, {base: '.'})) - .pipe(concat("app.css")) + .pipe(concat("theme-" + themes.current.name + ".css")) .pipe(autoprefixer({ cascade: false })) @@ -278,15 +304,37 @@ gulp.task("vendor-css", function() { gulp.task("main-css", function() { var _paths = [ paths.tmp + "vendor.css", - paths.tmp + "app.css" + paths.tmp + "theme-" + themes.current.name + ".css" ]; return gulp.src(_paths) - .pipe(concat("main.css")) + .pipe(concat("theme-" + themes.current.name + ".css")) .pipe(gulpif(isDeploy, minifyCSS({noAdvanced: true}))) .pipe(gulp.dest(paths.dist + "styles/")) }); +var compileThemes = function (cb) { + return runSequence("clear", + "scss-lint", + "sass-compile", + "css-lint-app", + ["app-css", "vendor-css"], + "main-css", + function() { + themes.next() + + if (themes.current) { + compileThemes(cb); + } else { + cb(); + } + }); +}; + +gulp.task("compile-themes", function(cb) { + compileThemes(cb); +}); + gulp.task("styles", function(cb) { return runSequence("scss-lint", "sass-compile", @@ -294,7 +342,6 @@ gulp.task("styles", function(cb) { ["app-css", "vendor-css"], "main-css", cb); - }); gulp.task("styles-dependencies", function(cb) { @@ -396,7 +443,7 @@ gulp.task("app-deploy", ["coffee", "conf", "locales", "app-loader"], function() # Common tasks ############################################################################## */ -gulp.task("clear", function(done) { +gulp.task("clear", ["clear-sass-cache"], function(done) { return cache.clearAll(done); }); @@ -406,17 +453,33 @@ gulp.task("copy-svg", function() { .pipe(gulp.dest(paths.dist + "/svg/")); }); +gulp.task("copy-theme-svg", function() { + return gulp.src(themes.current.path + "/svg/**/*") + .pipe(gulp.dest(paths.dist + "/svg/" + themes.current.name)); +}); + gulp.task("copy-fonts", function() { return gulp.src(paths.app + "/fonts/*") .pipe(gulp.dest(paths.dist + "/fonts/")); }); +gulp.task("copy-theme-fonts", function() { + return gulp.src(themes.current.path + "/fonts/*") + .pipe(gulp.dest(paths.dist + "/fonts/" + themes.current.name)); +}); + gulp.task("copy-images", function() { return gulp.src(paths.app + "/images/**/*") .pipe(gulpif(isDeploy, imagemin({progressive: true}))) .pipe(gulp.dest(paths.dist + "/images/")); }); +gulp.task("copy-theme-images", function() { + return gulp.src(themes.current.path + "/images/**/*") + .pipe(gulpif(isDeploy, imagemin({progressive: true}))) + .pipe(gulp.dest(paths.dist + "/images/" + themes.current.name)); +}); + gulp.task("copy-images-plugins", function() { return gulp.src(paths.app + "/plugins/**/images/*") .pipe(flatten()) @@ -433,7 +496,17 @@ gulp.task("copy-extras", function() { .pipe(gulp.dest(paths.dist + "/")); }); -gulp.task("copy", ["copy-fonts", "copy-images", "copy-images-plugins", "copy-plugin-templates", "copy-svg", "copy-extras"]); +gulp.task("copy", [ + "copy-fonts", + "copy-theme-fonts", + "copy-images", + "copy-theme-images", + "copy-images-plugins", + "copy-plugin-templates", + "copy-svg", + "copy-theme-svg", + "copy-extras" +]); gulp.task("delete-tmp", function() { del.sync(paths.tmp); @@ -464,7 +537,7 @@ gulp.task("express", function() { //Rerun the task when a file changes gulp.task("watch", function() { gulp.watch(paths.jade, ["jade-watch"]); - gulp.watch(paths.sass, ["styles"]); + gulp.watch(paths.sass_watch, ["styles"]); gulp.watch(paths.styles_dependencies, ["styles-dependencies"]); gulp.watch(paths.svg, ["copy-svg"]); gulp.watch(paths.coffee, ["app-watch"]); @@ -480,7 +553,7 @@ gulp.task("deploy", function(cb) { "jade-deploy", "app-deploy", "jslibs-deploy", - "styles" + "compile-themes" ], cb); }); //The default task (called when you run gulp from cli) diff --git a/package.json b/package.json index 38752212..eb64c67d 100644 --- a/package.json +++ b/package.json @@ -64,6 +64,7 @@ "karma-sinon": "^1.0.4", "karma-sinon-chai": "^0.3.0", "karma-sourcemap-loader": "^0.3.4", + "minimist": "^1.1.1", "mocha": "^2.2.4", "pre-commit": "^1.0.5", "readable-stream": "~1.0.33",