├── .gitattributes ├── images ├── db.png ├── add.png ├── cross.png ├── edit.png ├── gears.png ├── accept.png ├── network.png ├── picture.png ├── community.png ├── pie-chart.png ├── accept-light.png └── information.png ├── _config └── FlatAdmin.yml ├── .editorconfig ├── scss ├── flat.scss ├── _menu.scss ├── _forms.scss ├── themes │ └── _default.scss └── _style.scss ├── config.rb ├── composer.json ├── LICENSE ├── README.md ├── .scrutinizer.yml └── css └── flat.css /.gitattributes: -------------------------------------------------------------------------------- 1 | /.gitignore export-ignore 2 | -------------------------------------------------------------------------------- /images/db.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mylesthedev/silverstripe-flat-admin/HEAD/images/db.png -------------------------------------------------------------------------------- /images/add.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mylesthedev/silverstripe-flat-admin/HEAD/images/add.png -------------------------------------------------------------------------------- /images/cross.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mylesthedev/silverstripe-flat-admin/HEAD/images/cross.png -------------------------------------------------------------------------------- /images/edit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mylesthedev/silverstripe-flat-admin/HEAD/images/edit.png -------------------------------------------------------------------------------- /images/gears.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mylesthedev/silverstripe-flat-admin/HEAD/images/gears.png -------------------------------------------------------------------------------- /images/accept.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mylesthedev/silverstripe-flat-admin/HEAD/images/accept.png -------------------------------------------------------------------------------- /images/network.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mylesthedev/silverstripe-flat-admin/HEAD/images/network.png -------------------------------------------------------------------------------- /images/picture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mylesthedev/silverstripe-flat-admin/HEAD/images/picture.png -------------------------------------------------------------------------------- /images/community.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mylesthedev/silverstripe-flat-admin/HEAD/images/community.png -------------------------------------------------------------------------------- /images/pie-chart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mylesthedev/silverstripe-flat-admin/HEAD/images/pie-chart.png -------------------------------------------------------------------------------- /images/accept-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mylesthedev/silverstripe-flat-admin/HEAD/images/accept-light.png -------------------------------------------------------------------------------- /images/information.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mylesthedev/silverstripe-flat-admin/HEAD/images/information.png -------------------------------------------------------------------------------- /_config/FlatAdmin.yml: -------------------------------------------------------------------------------- 1 | --- 2 | Name: FlatAdmin 3 | --- 4 | LeftAndMain: 5 | extra_requirements_css: 6 | - flat-admin/css/flat.css 7 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # For more information about the properties used in this file, 2 | # please see the EditorConfig documentation: 3 | # http://editorconfig.org 4 | 5 | [*] 6 | charset = utf-8 7 | end_of_line = lf 8 | indent_size = 4 9 | indent_style = space 10 | insert_final_newline = true 11 | trim_trailing_whitespace = true 12 | 13 | [{*.yml,package.json}] 14 | indent_size = 2 15 | 16 | # The indent size used in the package.json file cannot be changed: 17 | # https://github.com/npm/npm/pull/3180#issuecomment-16336516 18 | -------------------------------------------------------------------------------- /scss/flat.scss: -------------------------------------------------------------------------------- 1 | /** ----------------------------- 2 | * Theme 3 | * ------------------------------ */ 4 | @import "themes/default.scss"; 5 | 6 | /** ----------------------------- 7 | * CMS Components 8 | * ------------------------------ */ 9 | //@import "typography.scss"; 10 | //@import "uitheme.scss"; 11 | @import "forms.scss"; 12 | @import "style.scss"; 13 | //@import "tree.scss"; 14 | @import "menu.scss"; 15 | //@import "preview.scss"; 16 | //@import "actionTabs.scss"; 17 | //@import "ModelAdmin.scss"; 18 | //@import "SecurityAdmin.scss"; 19 | //@import "CMSSecurity.scss"; 20 | -------------------------------------------------------------------------------- /config.rb: -------------------------------------------------------------------------------- 1 | # Require any additional compass plugins here. 2 | require 'compass-colors' 3 | 4 | project_type = :stand_alone 5 | # Set this to the root of your project when deployed: 6 | http_path = "/" 7 | css_dir = "css" 8 | sass_dir = "scss" 9 | images_dir = "images" 10 | javascripts_dir = "javascript" 11 | output_style = :compact 12 | 13 | # To enable relative paths to assets via compass helper functions. Uncomment: 14 | relative_assets = true 15 | 16 | # disable comments in the output. We want admin comments 17 | # to be verbose 18 | line_comments = false 19 | 20 | asset_cache_buster :none 21 | 22 | Encoding.default_external = "utf-8" 23 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mediabeast/flat-admin", 3 | "description": "Custom CSS theme for SilverStripe 3 Admin Interface", 4 | "type": "silverstripe-module", 5 | "homepage": "https://github.com/mediabeastnz/silverstripe-flat-admin", 6 | "keywords": ["silverstripe", "theme", "flat", "admin", "mediabeast"], 7 | "license": "MIT", 8 | "authors": [ 9 | { 10 | "name": "Myles Beardsmore", 11 | "email": "mediabeastnz@gmail.com" 12 | } 13 | ], 14 | "support": { 15 | "issues": "https://github.com/mediabeastnz/silverstripe-flat-admin/issues" 16 | }, 17 | "require": { 18 | "silverstripe/framework": "~3.2" 19 | }, 20 | "extra": { 21 | "screenshots": [ 22 | "http://i.imgur.com/JgaAw2G.png", 23 | "http://i.imgur.com/anH4Uv6.png" 24 | ] 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Myles Beardsmore 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Flat Admin for SilverStripe 2 | ####Custom CSS for the SilverStripe CMS Admin Interface. 3 | 4 | This module basic overrides some basic CSS that is found in the SilverStripe framework. 5 | 6 | ###Installation: 7 | ####Composer: 8 | ```json 9 | require: "mediabeast/flat-admin": "3.2" 10 | ``` 11 | ####Download: 12 | Clone or download this repo, copy it into your website folder, rename the folder to `flat-admin` and then run `dev/build`. 13 | 14 | ### Configuration 15 | If you have ModelAdmins with no icons then you'll want to replace the black SilverStripe icon as it's very hard to see with this theme installed. For a quick alternative use one of the icons located in the flat admin theme e.g. 16 | ```php 17 | private static $menu_icon = 'flat-admin/images/db.png'; 18 | ``` 19 | 20 | ### Contribution 21 | I'm a developer so I'd be keen for an actual designer to suggest some changes. I only want to change CSS and not the structure of the HTML as I think that will cause issues if SilverStripe update a template at their end and someone has this module installed. So I anyone has any suggestions on colors etc feel free to let me know of do a pull request. 22 | 23 | ###Screenshots: 24 | ![Flat Theme](http://i.imgur.com/QnN3wPz.png "Flat Theme") 25 | 26 | ![Flat Theme](http://i.imgur.com/anH4Uv6.png "Flat Theme") 27 | 28 | ###TODO: 29 | - In Progress: customise GridField to suit the new colors .e.g. remove texture 30 | - ~~change icons in menu to be white~~ 31 | - In Progress: change icons used in buttons, something a bit more moder and no drop shadow will be nice. 32 | - In Progress: remove any textures and dropwshadows in other parts of the interface. 33 | - Responsiveness? Could add some simple media queries to make it usable on modiles/tablets. 34 | -------------------------------------------------------------------------------- /.scrutinizer.yml: -------------------------------------------------------------------------------- 1 | inherit: true 2 | 3 | checks: 4 | php: 5 | verify_property_names: true 6 | verify_argument_usable_as_reference: true 7 | verify_access_scope_valid: true 8 | useless_calls: true 9 | use_statement_alias_conflict: true 10 | variable_existence: true 11 | unused_variables: true 12 | unused_properties: true 13 | unused_parameters: true 14 | unused_methods: true 15 | unreachable_code: true 16 | too_many_arguments: true 17 | sql_injection_vulnerabilities: true 18 | simplify_boolean_return: true 19 | side_effects_or_types: true 20 | security_vulnerabilities: true 21 | return_doc_comments: true 22 | return_doc_comment_if_not_inferrable: true 23 | require_scope_for_properties: true 24 | require_scope_for_methods: true 25 | require_php_tag_first: true 26 | psr2_switch_declaration: true 27 | psr2_class_declaration: true 28 | property_assignments: true 29 | prefer_while_loop_over_for_loop: true 30 | precedence_mistakes: true 31 | precedence_in_conditions: true 32 | phpunit_assertions: true 33 | php5_style_constructor: true 34 | parse_doc_comments: true 35 | parameter_non_unique: true 36 | parameter_doc_comments: true 37 | param_doc_comment_if_not_inferrable: true 38 | optional_parameters_at_the_end: true 39 | one_class_per_file: true 40 | no_unnecessary_if: true 41 | no_trailing_whitespace: true 42 | no_property_on_interface: true 43 | no_non_implemented_abstract_methods: true 44 | no_error_suppression: true 45 | no_duplicate_arguments: true 46 | no_commented_out_code: true 47 | newline_at_end_of_file: true 48 | missing_arguments: true 49 | method_calls_on_non_object: true 50 | instanceof_class_exists: true 51 | foreach_traversable: true 52 | fix_line_ending: true 53 | fix_doc_comments: true 54 | duplication: true 55 | deprecated_code_usage: true 56 | deadlock_detection_in_loops: true 57 | code_rating: true 58 | closure_use_not_conflicting: true 59 | catch_class_exists: true 60 | blank_line_after_namespace_declaration: false 61 | avoid_multiple_statements_on_same_line: true 62 | avoid_duplicate_types: true 63 | avoid_conflicting_incrementers: true 64 | avoid_closing_tag: true 65 | assignment_of_null_return: true 66 | argument_type_checks: true 67 | 68 | filter: 69 | paths: [code/*, tests/*] 70 | -------------------------------------------------------------------------------- /scss/_menu.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Styles for the left hand side menu and header for the admin panels. 3 | * 4 | * Take into consideration CSS selector performance. 5 | * 6 | * @package framework 7 | * @subpackage admin 8 | */ 9 | 10 | .cms-logo-header { 11 | background: $color-base; 12 | border-bottom: 1px solid darken($color-base, 2%); 13 | 14 | span { 15 | color: $color-text-light; 16 | 17 | a { 18 | color: $color-text-dark-link; 19 | } 20 | } 21 | } 22 | 23 | .cms-logo { 24 | border-bottom: 1px solid lighten($color-dark-bg,4%); 25 | 26 | a { 27 | background: $application-logo-small no-repeat left center; 28 | } 29 | span { 30 | font-weight: bold; 31 | font-size: $font-base-size; 32 | } 33 | } 34 | 35 | .cms-menu { 36 | background: $color-base; 37 | } 38 | 39 | .cms-menu-list { 40 | li { 41 | a { 42 | text-shadow: none; 43 | color: $color-text-light; 44 | padding: (1.5 * $grid-y - 1) 5px (1.5 * $grid-y - 1) 8px; 45 | background: $color-base; 46 | border-top: 1px solid lighten($color-base, 1%); 47 | border-bottom: 1px solid darken($color-base, 2%); 48 | 49 | &:hover { 50 | text-decoration: none; 51 | background: $color-base; 52 | border-bottom: 1px solid darken($color-base, 2%); 53 | color: #42c6f3; 54 | 55 | } 56 | &:focus, 57 | &:active { 58 | border-top: 1px solid lighten($color-base, 1%); 59 | text-decoration: none; 60 | background: $color-base; 61 | color: #42c6f3; 62 | 63 | } 64 | 65 | } 66 | ul li a { 67 | border-top: 1px solid lighten($color-base, 2%); 68 | } 69 | 70 | &.current { //need to apply current stlye to flyout also (at least line height) 71 | a { 72 | color: $color-text-light; 73 | text-shadow: none; 74 | border-top: 1px solid lighten($color-base, 1%); 75 | border-bottom: 1px solid darken($color-base, 2%); 76 | background: darken($color-menu-button, 22%); 77 | 78 | } 79 | 80 | ul { 81 | border-top: none; 82 | display: block; 83 | } 84 | 85 | li { 86 | background-color: darken($color-menu-button, 10%); 87 | a { 88 | color: lighten($color-menu-button, 45%); 89 | background: none; 90 | border-top: 1px solid darken($color-menu-button,4%); 91 | border-bottom: 1px solid darken($color-menu-button, 20%); 92 | 93 | &.current, 94 | &:hover { 95 | background: darken($color-menu-button, 5%); 96 | border-top: 1px solid darken($color-menu-button, 5%); 97 | color: $color-text-light; 98 | } 99 | 100 | &:focus { 101 | background: darken($color-menu-button, 15%); 102 | border-top: 1px solid darken($color-menu-button, 20%); 103 | color: lighten($color-menu-button, 60%); 104 | } 105 | 106 | } 107 | 108 | &.current { 109 | background: darken($color-menu-button, 5%); 110 | border-top: 1px solid darken($color-menu-button, 5%); 111 | border-top: none; 112 | a { 113 | color: $color-text-light; 114 | } 115 | } 116 | 117 | } 118 | } 119 | 120 | } 121 | 122 | } 123 | -------------------------------------------------------------------------------- /scss/_forms.scss: -------------------------------------------------------------------------------- 1 | /** ---------------------------------------------------- 2 | * Buttons 3 | * ---------------------------------------------------- */ 4 | 5 | .cms { 6 | .ss-ui-button { 7 | margin-top:0px; 8 | font-weight: normal; 9 | text-decoration: none; 10 | line-height: $grid-y * 2; 11 | color: lighten($color-text-dark, 20%); 12 | border: none; 13 | border-bottom: none; 14 | cursor: pointer; 15 | background-color: $color-button-generic; 16 | background: $color-button-generic; 17 | white-space: nowrap; 18 | -moz-border-radius: 0px; 19 | -webkit-border-radius: 0px; 20 | -khtml-border-radius: 0px; 21 | border-radius: 0px; 22 | box-shadow: none; 23 | -moz-box-shadow-inset: none; 24 | -webkit-box-shadow-inset: none; 25 | -khtml-box-shadow-inset: none; 26 | 27 | &.ui-state-hover, &:hover { 28 | text-decoration: none; 29 | background: darken($color-button-generic, 10%); 30 | background-color: darken($color-button-generic, 10%); 31 | box-shadow: none; 32 | } 33 | 34 | &:active, &:focus, &.ui-state-active, &.ui-state-focus { 35 | border: none; 36 | background: lighten($color-button-generic, 10%); 37 | background-color: lighten($color-button-generic, 10%); 38 | box-shadow: none !important; 39 | } 40 | 41 | &.ss-ui-action-minor { 42 | span { 43 | padding-left: 0; 44 | padding-right: 0; 45 | } 46 | } 47 | 48 | /* constructive */ 49 | &.ss-ui-action-constructive { 50 | text-shadow:none; 51 | font-weight: normal; 52 | color: $color-text-light; 53 | border-color: #016b52; 54 | border-bottom-color: #016b52; 55 | background-color: #48AB42; 56 | background: #48AB42; 57 | 58 | &.ui-state-hover, &:hover { 59 | border-color: #016b52; 60 | background-color: lighten(#48AB42, 4%); 61 | background: lighten(#48AB42, 4%); 62 | } 63 | &:active, &:focus, &.ui-state-active, &.ui-state-focus { 64 | background-color: lighten(#48AB42, 4%); 65 | background: lighten(#48AB42, 4%); 66 | } 67 | } 68 | 69 | /* destructive */ 70 | &.ss-ui-action-destructive { 71 | color: $color-button-destructive; 72 | background-color: $color-button-generic; 73 | } 74 | 75 | &.ss-ui-button-small { 76 | .ui-button-text { 77 | font-size: $font-base-size - 2; 78 | } 79 | } 80 | 81 | &.ui-state-highlight { 82 | background-color: $color-button-highlight; 83 | border: 1px solid $color-button-highlight-border; 84 | } 85 | 86 | &.ss-ui-action-minor { 87 | background: none; 88 | border: 0; 89 | color: lighten($color-text-dark, 10%); 90 | text-decoration: underline; 91 | 92 | &:hover { 93 | text-decoration: none; 94 | color: $color-text-dark; 95 | } 96 | &:focus, 97 | &:active { 98 | text-decoration: none; 99 | color: lighten($color-text-dark, 20%); 100 | } 101 | } 102 | 103 | } 104 | 105 | .field input.text, .field textarea, .field .TreeDropdownField{ 106 | background: #FAFAFA; 107 | border: 1px solid #adadae; 108 | } 109 | 110 | .field label.left{ 111 | color: #555; 112 | } 113 | 114 | } 115 | -------------------------------------------------------------------------------- /scss/themes/_default.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * This file contains the default theme definitions for the admin interface. 3 | * Please put mostly SCSS variable definitions in here, 4 | * and leave the actual styling to _style.scss and auxilliary files. 5 | */ 6 | 7 | /** ----------------------------------------------- 8 | * Colours 9 | * ------------------------------------------------ */ 10 | $color-base: #1b354c !default; 11 | $color-widget-bg: lighten($color-base, 20%) !default; 12 | 13 | /* Keep as solid colours transparent borders wont work in ie */ 14 | $color-darker-bg: #D4D6D8 !default; 15 | $color-dark-bg: #142136 !default; 16 | $color-dark-separator: #19435c !default; 17 | $color-medium-separator: #808080 !default; 18 | $color-separator: #C0C0C2 !default; 19 | $color-light-separator: #d0d3d5 !default; 20 | 21 | $color-tab: #d9d9d9 !default; 22 | $color-dark-grey: #7B8C91 !default; 23 | 24 | /* Only for use as shadows as they wont work in older browsers */ 25 | $color-shadow-light: rgba(201, 205, 206, 0.8) !default; 26 | $color-shadow-dark: rgba(107, 120, 123, 0.5) !default; 27 | $color-shadow-black: rgba(0, 0, 0, 0.6) !default; 28 | $color-shadow-blacker: rgba(0, 0, 0, 0.9) !default; 29 | $box-shadow-shine: rgba(248, 248, 248, 0.9); 30 | $box-shadow-shine-minimal: rgba(245, 245, 245, 0.8); 31 | 32 | $color-highlight: #FFFF66 !default; 33 | $color-highlight-opacity: rgba(255, 255, 102, 0.3) !default; 34 | 35 | $color-menu-button: #42c6f3 !default; 36 | $color-menu-background: #c6d7df !default; 37 | $color-menu-border: #8c99a1 !default; 38 | $color-panel-background: #c6d7df !default; 39 | 40 | $color-text: #444 !default; 41 | $color-text-light: white !default; 42 | $color-text-light-link: white !default; 43 | $color-text-disabled: #aaa !default; 44 | $color-text-dark: #1f1f1f !default; 45 | $color-text-dark-link: #3EBAE0 !default; 46 | $color-text-blue-link:#0073C1 !default; 47 | $color-text-shadow: white !default; 48 | 49 | 50 | $color-button-generic: #f2f2f2 !default; 51 | $color-button-generic-border: #ccc !default; 52 | 53 | $color-button-highlight: #e6e6e6 !default; 54 | $color-button-highlight-border: #708284 !default; 55 | 56 | $color-button-constructive: #1F9433 !default; 57 | $color-button-constructive-border: #1F9433 !default; 58 | 59 | $color-button-destructive: #f00 !default; 60 | 61 | $color-button-disabled: #eeeded !default; 62 | 63 | $color-notice: #93CDE8 !default; // blue 64 | $color-warning: #E9D104 !default; // yellow 65 | $color-error: #e68288 !default; // red 66 | $color-good: #72c34b !default; // green 67 | /*$color-optional: #a1d2eb !default; */ // orange 68 | 69 | $color-cms-batchactions-menu-background: #f5f5f5 !default; 70 | $color-cms-batchactions-menu-selected-background: #efe999 !default; 71 | 72 | /** ----------------------------------------------- 73 | * Textures 74 | * ----------------------------------------------- */ 75 | $tab-panel-texture-color: #ECEFF1 !default; 76 | $tab-panel-texture-background: $tab-panel-texture-color url(../images/textures/bg_cms_main_content.png) repeat top left !default; 77 | 78 | /** ----------------------------------------------- 79 | * Typography. 80 | * ------------------------------------------------ */ 81 | $font-family: Arial, sans-serif !default; 82 | $font-base-size: 12px !default; 83 | 84 | /** ----------------------------------------------- 85 | * Grid Units (px) 86 | * 87 | * We have a vertical rhythm that the grid is based off 88 | * both x (=horizontal) and y (=vertical). All internal padding and 89 | * margins are scaled to this and accounting for paragraphs 90 | * ------------------------------------------------ */ 91 | $grid-y: 8px !default; 92 | $grid-x: 8px !default; 93 | 94 | /** ----------------------------------------------- 95 | * Application Logo (CMS Logo) Must be 24px x 24px 96 | * ------------------------------------------------ */ 97 | $application-logo-small: url("../../framework/admin/images/logo_small.png") !default; 98 | -------------------------------------------------------------------------------- /scss/_style.scss: -------------------------------------------------------------------------------- 1 | .cms-menu { 2 | .cms-panel-toggle { 3 | &.south { 4 | border-top: 1px solid darken($color-base, 2%); 5 | -moz-box-shadow: none; 6 | -webkit-box-shadow: none; 7 | box-shadow: none; 8 | } 9 | a { 10 | span { 11 | color: $color-text-light; 12 | } 13 | } 14 | } 15 | } 16 | 17 | 18 | .cms-content-header { 19 | // background: { 20 | // image: url(../../framework/admin/images/textures/cms_content_header.png); 21 | // repeat: repeat; 22 | // position: left bottom; 23 | // color: #eee; 24 | // } 25 | background-color: #fff; 26 | } 27 | 28 | .cms-content-tools { 29 | background: #fff; 30 | } 31 | 32 | .cms .cms-content-fields { 33 | background-color: #F1F1F1; 34 | } 35 | 36 | .cms .cms-content-actions { 37 | background: #fff; 38 | } 39 | 40 | .cms-content-batchactions { 41 | .view-mode-batchactions-wrapper { 42 | border: 1px solid #aaa; 43 | background-color: #D9D9D9; 44 | background: #D9D9D9; 45 | border-radius: 0; 46 | border-top-left-radius: 0px; 47 | border-bottom-left-radius: 0px; 48 | } 49 | } 50 | 51 | .cms-content-batchactions.inactive { 52 | .view-mode-batchactions-wrapper { 53 | border: 1px solid #aaa; 54 | background-color: #D9D9D9; 55 | background: #D9D9D9; 56 | border-radius: 0; 57 | border-top-left-radius: 0px; 58 | border-bottom-left-radius: 0px; 59 | } 60 | } 61 | 62 | .cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel { 63 | background-color: #FFF; 64 | } 65 | 66 | 67 | // change tab colors 68 | 69 | .ui-tabs-nav .ui-tabs-anchor { 70 | border: none !important; 71 | } 72 | 73 | .ui-tabs.cms-tabset-primary .ui-tabs-nav, 74 | .ui-tabs .ui-tabs-nav.cms-tabset-nav-primary, 75 | .ui-tabs .cms-content-header-tabs .ui-tabs-nav { 76 | border-left: none; 77 | 78 | .ui-state-default { 79 | background-color: #FFF; 80 | background: #FFF; 81 | outline: none !important; 82 | border:none !important; 83 | 84 | a{ 85 | color: #000; 86 | text-shadow: none; 87 | font-weight: normal; 88 | } 89 | 90 | } 91 | 92 | .ui-state-active { 93 | background: #FFF; 94 | border: none; 95 | 96 | a{ 97 | color: $color-text-dark; 98 | text-shadow: none; 99 | font-weight: normal; 100 | color: #0c8db9; 101 | outline: none; 102 | border-bottom: 1px solid #0c8db9 !important; 103 | } 104 | } 105 | } 106 | 107 | .ui-tabs .ui-tabs-nav .ui-state-default a{ 108 | font-weight: normal; 109 | outline: none !important; 110 | } 111 | 112 | .ui-tabs .ui-tabs-nav .ui-state-default { 113 | background-color: #fff; 114 | border-radius: 0px !important; 115 | border-color: #fff !important; 116 | } 117 | 118 | .ui-tabs .ui-tabs-nav .ui-state-active { 119 | background-color: #F1F1F1 !important; 120 | border-left: 1px solid #ccc !important; 121 | border-right: 1px solid #ccc !important; 122 | border-top: 1px solid #ccc !important; 123 | border-bottom: none; 124 | } 125 | 126 | // override icons manually TODO: make sprites 127 | .icon-16.icon-assetadmin { 128 | background: url("../images/picture.png"); 129 | } 130 | .icon-16.icon-cmsmain { 131 | background: url("../images/pencil.png"); 132 | } 133 | .icon-16.icon-cmspagescontroller { 134 | background: url("../images/network.png"); 135 | } 136 | .icon-16.icon-cmssettingscontroller { 137 | background: url("../images/gears.png"); 138 | } 139 | .icon-16.icon-securityadmin { 140 | background: url("../images/community.png"); 141 | } 142 | .icon-16.icon-reportadmin { 143 | background: url("../images/pie-chart.png"); 144 | } 145 | .icon-16.icon-commentadmin { 146 | background: url("../images/blog.png"); 147 | } 148 | .icon-16.icon-help { 149 | background: url("../images/information.png"); 150 | } 151 | 152 | // non menu icons e.g. buttons 153 | .ui-icon.btn-icon-add{ 154 | background: url("../images/add.png"); 155 | background-size: 13px 13px; 156 | background-repeat: no-repeat; 157 | background-position: center; 158 | } 159 | 160 | .ui-icon.btn-icon-accept{ 161 | background: url("../images/accept.png"); 162 | background-size: 13px 13px; 163 | background-repeat: no-repeat; 164 | background-position: center; 165 | } 166 | 167 | .ui-icon.btn-icon-pencil{ 168 | background: url("../images/edit.png"); 169 | background-size: 13px 13px; 170 | background-repeat: no-repeat; 171 | background-position: center; 172 | } 173 | 174 | .ui-icon.btn-icon-cross-circle{ 175 | background: url("../images/cross.png"); 176 | background-size: 13px 13px; 177 | background-repeat: no-repeat; 178 | background-position: center; 179 | margin-top: -6px; 180 | } 181 | 182 | .col-buttons .action.action-detail.edit-link{ 183 | width: 16px; 184 | height: 16px; 185 | background: url("../images/edit.png") no-repeat top center; 186 | background-size: 13px 13px; 187 | background-repeat: no-repeat; 188 | background-position: center; 189 | } 190 | 191 | .ss-ui-action-constructive .ui-icon.btn-icon-accept{ 192 | background: url("../images/accept-light.png"); 193 | } 194 | 195 | 196 | 197 | // no longer works with white icons. TODO: make dark copies. 198 | .cms-content-header .cms-content-header-info a.cms-panel-link{ 199 | color: #444; 200 | text-decoration: underline; 201 | } 202 | 203 | .cms-content-header .cms-content-header-info .section-icon{ 204 | display: none; 205 | } 206 | 207 | 208 | // Gridfield customisations 209 | .cms table.ss-gridfield-table{ 210 | tr.title th{ 211 | background: #ddd; 212 | background-color: #ddd; 213 | border: 1px solid #ccc; 214 | border-bottom: none; 215 | text-shadow: none; 216 | 217 | 218 | h2{ 219 | color: #666; 220 | } 221 | } 222 | 223 | tr th.main{ 224 | border-top: 1px solid #ccc; 225 | border-left: 1px solid #ccc; 226 | color: #666; 227 | background: #eee; 228 | border-bottom: 1px solid rgba(0, 0, 0, 0.1); 229 | 230 | button{ 231 | span{ 232 | color: #666; 233 | text-shadow: none; 234 | } 235 | } 236 | } 237 | 238 | tr th.extra{ 239 | background: #eee; 240 | color: #666; 241 | border-right: 1px solid #ccc; 242 | border-left: 1px solid #ccc; 243 | } 244 | 245 | tr td.bottom-all{ 246 | background: #ddd; 247 | background-color: #ddd; 248 | } 249 | 250 | tr.even{ 251 | background: #f1f1f1; 252 | } 253 | } 254 | 255 | .cms .ss-gridfield .right .pagination-records-number, .cms table.ss-gridfield-table tr td.bottom-all .pagination-records-number{ 256 | color: #666; 257 | text-shadow: none; 258 | } 259 | 260 | .cms table.ss-gridfield-table tr th button.ss-ui-button.ss-gridfield-button-filter.trigger{ 261 | background: url(../../framework/images/icons/filter-icons.png) no-repeat -17px -38px; 262 | } 263 | 264 | // ui dialog 265 | .ui-dialog { 266 | background: #f1f1f1 !important; 267 | } 268 | 269 | iframe body.SecurityAdmin { 270 | background-color: #F1F1F1 !important; 271 | } 272 | 273 | // Fancy Dev-Build Module customisation 274 | .devbuild-trigger.loading { 275 | color: rgb(249, 191, 59); 276 | 277 | .icon { 278 | color: rgb(249, 191, 59); 279 | } 280 | } 281 | 282 | .devbuild-trigger.error { 283 | color: rgb(239, 72, 54); 284 | 285 | .icon { 286 | color: rgb(239, 72, 54); 287 | } 288 | } 289 | 290 | .devbuild-trigger.success { 291 | color: #3EBAE0; 292 | .icon { 293 | color: #3EBAE0; 294 | } 295 | } 296 | -------------------------------------------------------------------------------- /css/flat.css: -------------------------------------------------------------------------------- 1 | /** ----------------------------- Theme ------------------------------ */ 2 | /** This file contains the default theme definitions for the admin interface. Please put mostly SCSS variable definitions in here, and leave the actual styling to _style.scss and auxilliary files. */ 3 | /** ----------------------------------------------- Colours ------------------------------------------------ */ 4 | /* Keep as solid colours transparent borders wont work in ie */ 5 | /* Only for use as shadows as they wont work in older browsers */ 6 | /*$color-optional: #a1d2eb !default; */ 7 | /** ----------------------------------------------- Textures ----------------------------------------------- */ 8 | /** ----------------------------------------------- Typography. ------------------------------------------------ */ 9 | /** ----------------------------------------------- Grid Units (px) We have a vertical rhythm that the grid is based off both x (=horizontal) and y (=vertical). All internal padding and margins are scaled to this and accounting for paragraphs ------------------------------------------------ */ 10 | /** ----------------------------------------------- Application Logo (CMS Logo) Must be 24px x 24px ------------------------------------------------ */ 11 | /** ----------------------------- CMS Components ------------------------------ */ 12 | /** ---------------------------------------------------- 13 | * Buttons 14 | * ---------------------------------------------------- */ 15 | .cms .ss-ui-button { margin-top: 0px; font-weight: normal; text-decoration: none; line-height: 16px; color: #525252; border: none; border-bottom: none; cursor: pointer; background-color: #f2f2f2; background: #f2f2f2; white-space: nowrap; -moz-border-radius: 0px; -webkit-border-radius: 0px; -khtml-border-radius: 0px; border-radius: 0px; box-shadow: none; -moz-box-shadow-inset: none; -webkit-box-shadow-inset: none; -khtml-box-shadow-inset: none; /* constructive */ /* destructive */ } 16 | .cms .ss-ui-button.ui-state-hover, .cms .ss-ui-button:hover { text-decoration: none; background: #d9d9d9; background-color: #d9d9d9; box-shadow: none; } 17 | .cms .ss-ui-button:active, .cms .ss-ui-button:focus, .cms .ss-ui-button.ui-state-active, .cms .ss-ui-button.ui-state-focus { border: none; background: white; background-color: white; box-shadow: none !important; } 18 | .cms .ss-ui-button.ss-ui-action-minor span { padding-left: 0; padding-right: 0; } 19 | .cms .ss-ui-button.ss-ui-action-constructive { text-shadow: none; font-weight: normal; color: white; border-color: #016b52; border-bottom-color: #016b52; background-color: #48AB42; background: #48AB42; } 20 | .cms .ss-ui-button.ss-ui-action-constructive.ui-state-hover, .cms .ss-ui-button.ss-ui-action-constructive:hover { border-color: #016b52; background-color: #4fb949; background: #4fb949; } 21 | .cms .ss-ui-button.ss-ui-action-constructive:active, .cms .ss-ui-button.ss-ui-action-constructive:focus, .cms .ss-ui-button.ss-ui-action-constructive.ui-state-active, .cms .ss-ui-button.ss-ui-action-constructive.ui-state-focus { background-color: #4fb949; background: #4fb949; } 22 | .cms .ss-ui-button.ss-ui-action-destructive { color: #f00; background-color: #f2f2f2; } 23 | .cms .ss-ui-button.ss-ui-button-small .ui-button-text { font-size: 10px; } 24 | .cms .ss-ui-button.ui-state-highlight { background-color: #e6e6e6; border: 1px solid #708284; } 25 | .cms .ss-ui-button.ss-ui-action-minor { background: none; border: 0; color: #393939; text-decoration: underline; } 26 | .cms .ss-ui-button.ss-ui-action-minor:hover { text-decoration: none; color: #1f1f1f; } 27 | .cms .ss-ui-button.ss-ui-action-minor:focus, .cms .ss-ui-button.ss-ui-action-minor:active { text-decoration: none; color: #525252; } 28 | .cms .field input.text, .cms .field textarea, .cms .field .TreeDropdownField { background: #FAFAFA; border: 1px solid #adadae; } 29 | .cms .field label.left { color: #555; } 30 | 31 | .cms-menu .cms-panel-toggle.south { border-top: 1px solid #183044; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } 32 | .cms-menu .cms-panel-toggle a span { color: white; } 33 | 34 | .cms-content-header { background-color: #fff; } 35 | 36 | .cms-content-tools { background: #fff; } 37 | 38 | .cms .cms-content-fields { background-color: #F1F1F1; } 39 | 40 | .cms .cms-content-actions { background: #fff; } 41 | 42 | .cms-content-batchactions .view-mode-batchactions-wrapper { border: 1px solid #aaa; background-color: #D9D9D9; background: #D9D9D9; border-radius: 0; border-top-left-radius: 0px; border-bottom-left-radius: 0px; } 43 | 44 | .cms-content-batchactions.inactive .view-mode-batchactions-wrapper { border: 1px solid #aaa; background-color: #D9D9D9; background: #D9D9D9; border-radius: 0; border-top-left-radius: 0px; border-bottom-left-radius: 0px; } 45 | 46 | .cms .ss-ui-action-tabset.action-menus.ss-tabset .ui-tabs-panel { background-color: #FFF; } 47 | 48 | .ui-tabs-nav .ui-tabs-anchor { border: none !important; } 49 | 50 | .ui-tabs.cms-tabset-primary .ui-tabs-nav, .ui-tabs .ui-tabs-nav.cms-tabset-nav-primary, .ui-tabs .cms-content-header-tabs .ui-tabs-nav { border-left: none; } 51 | .ui-tabs.cms-tabset-primary .ui-tabs-nav .ui-state-default, .ui-tabs .ui-tabs-nav.cms-tabset-nav-primary .ui-state-default, .ui-tabs .cms-content-header-tabs .ui-tabs-nav .ui-state-default { background-color: #FFF; background: #FFF; outline: none !important; border: none !important; } 52 | .ui-tabs.cms-tabset-primary .ui-tabs-nav .ui-state-default a, .ui-tabs .ui-tabs-nav.cms-tabset-nav-primary .ui-state-default a, .ui-tabs .cms-content-header-tabs .ui-tabs-nav .ui-state-default a { color: #000; text-shadow: none; font-weight: normal; } 53 | .ui-tabs.cms-tabset-primary .ui-tabs-nav .ui-state-active, .ui-tabs .ui-tabs-nav.cms-tabset-nav-primary .ui-state-active, .ui-tabs .cms-content-header-tabs .ui-tabs-nav .ui-state-active { background: #FFF; border: none; } 54 | .ui-tabs.cms-tabset-primary .ui-tabs-nav .ui-state-active a, .ui-tabs .ui-tabs-nav.cms-tabset-nav-primary .ui-state-active a, .ui-tabs .cms-content-header-tabs .ui-tabs-nav .ui-state-active a { color: #1f1f1f; text-shadow: none; font-weight: normal; color: #0c8db9; outline: none; border-bottom: 1px solid #0c8db9 !important; } 55 | 56 | .ui-tabs .ui-tabs-nav .ui-state-default a { font-weight: normal; outline: none !important; } 57 | 58 | .ui-tabs .ui-tabs-nav .ui-state-default { background-color: #fff; border-radius: 0px !important; border-color: #fff !important; } 59 | 60 | .ui-tabs .ui-tabs-nav .ui-state-active { background-color: #F1F1F1 !important; border-left: 1px solid #ccc !important; border-right: 1px solid #ccc !important; border-top: 1px solid #ccc !important; border-bottom: none; } 61 | 62 | .icon-16.icon-assetadmin { background: url("../images/picture.png"); } 63 | 64 | .icon-16.icon-cmsmain { background: url("../images/pencil.png"); } 65 | 66 | .icon-16.icon-cmspagescontroller { background: url("../images/network.png"); } 67 | 68 | .icon-16.icon-cmssettingscontroller { background: url("../images/gears.png"); } 69 | 70 | .icon-16.icon-securityadmin { background: url("../images/community.png"); } 71 | 72 | .icon-16.icon-reportadmin { background: url("../images/pie-chart.png"); } 73 | 74 | .icon-16.icon-commentadmin { background: url("../images/blog.png"); } 75 | 76 | .icon-16.icon-help { background: url("../images/information.png"); } 77 | 78 | .ui-icon.btn-icon-add { background: url("../images/add.png"); background-size: 13px 13px; background-repeat: no-repeat; background-position: center; } 79 | 80 | .ui-icon.btn-icon-accept { background: url("../images/accept.png"); background-size: 13px 13px; background-repeat: no-repeat; background-position: center; } 81 | 82 | .ui-icon.btn-icon-pencil { background: url("../images/edit.png"); background-size: 13px 13px; background-repeat: no-repeat; background-position: center; } 83 | 84 | .ui-icon.btn-icon-cross-circle { background: url("../images/cross.png"); background-size: 13px 13px; background-repeat: no-repeat; background-position: center; margin-top: -6px; } 85 | 86 | .col-buttons .action.action-detail.edit-link { width: 16px; height: 16px; background: url("../images/edit.png") no-repeat top center; background-size: 13px 13px; background-repeat: no-repeat; background-position: center; } 87 | 88 | .ss-ui-action-constructive .ui-icon.btn-icon-accept { background: url("../images/accept-light.png"); } 89 | 90 | .cms-content-header .cms-content-header-info a.cms-panel-link { color: #444; text-decoration: underline; } 91 | 92 | .cms-content-header .cms-content-header-info .section-icon { display: none; } 93 | 94 | .cms table.ss-gridfield-table tr.title th { background: #ddd; background-color: #ddd; border: 1px solid #ccc; border-bottom: none; text-shadow: none; } 95 | .cms table.ss-gridfield-table tr.title th h2 { color: #666; } 96 | .cms table.ss-gridfield-table tr th.main { border-top: 1px solid #ccc; border-left: 1px solid #ccc; color: #666; background: #eee; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } 97 | .cms table.ss-gridfield-table tr th.main button span { color: #666; text-shadow: none; } 98 | .cms table.ss-gridfield-table tr th.extra { background: #eee; color: #666; border-right: 1px solid #ccc; border-left: 1px solid #ccc; } 99 | .cms table.ss-gridfield-table tr td.bottom-all { background: #ddd; background-color: #ddd; } 100 | .cms table.ss-gridfield-table tr.even { background: #f1f1f1; } 101 | 102 | .cms .ss-gridfield .right .pagination-records-number, .cms table.ss-gridfield-table tr td.bottom-all .pagination-records-number { color: #666; text-shadow: none; } 103 | 104 | .cms table.ss-gridfield-table tr th button.ss-ui-button.ss-gridfield-button-filter.trigger { background: url(../../framework/images/icons/filter-icons.png) no-repeat -17px -38px; } 105 | 106 | .ui-dialog { background: #f1f1f1 !important; } 107 | 108 | iframe body.SecurityAdmin { background-color: #F1F1F1 !important; } 109 | 110 | .devbuild-trigger.loading { color: #f9bf3b; } 111 | .devbuild-trigger.loading .icon { color: #f9bf3b; } 112 | 113 | .devbuild-trigger.error { color: #ef4836; } 114 | .devbuild-trigger.error .icon { color: #ef4836; } 115 | 116 | .devbuild-trigger.success { color: #3EBAE0; } 117 | .devbuild-trigger.success .icon { color: #3EBAE0; } 118 | 119 | /** Styles for the left hand side menu and header for the admin panels. Take into consideration CSS selector performance. @package framework @subpackage admin */ 120 | .cms-logo-header { background: #1b354c; border-bottom: 1px solid #183044; } 121 | .cms-logo-header span { color: white; } 122 | .cms-logo-header span a { color: #3EBAE0; } 123 | 124 | .cms-logo { border-bottom: 1px solid #1a2a45; } 125 | .cms-logo a { background: url("../../framework/admin/images/logo_small.png") no-repeat left center; } 126 | .cms-logo span { font-weight: bold; font-size: 12px; } 127 | 128 | .cms-menu { background: #1b354c; } 129 | 130 | .cms-menu-list li a { text-shadow: none; color: white; padding: 11px 5px 11px 8px; background: #1b354c; border-top: 1px solid #1c3850; border-bottom: 1px solid #183044; } 131 | .cms-menu-list li a:hover { text-decoration: none; background: #1b354c; border-bottom: 1px solid #183044; color: #42c6f3; } 132 | .cms-menu-list li a:focus, .cms-menu-list li a:active { border-top: 1px solid #1c3850; text-decoration: none; background: #1b354c; color: #42c6f3; } 133 | .cms-menu-list li ul li a { border-top: 1px solid #1e3a54; } 134 | .cms-menu-list li.current a { color: white; text-shadow: none; border-top: 1px solid #1c3850; border-bottom: 1px solid #183044; background: #0c8db9; } 135 | .cms-menu-list li.current ul { border-top: none; display: block; } 136 | .cms-menu-list li.current li { background-color: #12b8f0; } 137 | .cms-menu-list li.current li a { color: white; background: none; border-top: 1px solid #2fc0f2; border-bottom: 1px solid #0c94c3; } 138 | .cms-menu-list li.current li a.current, .cms-menu-list li.current li a:hover { background: #2abff1; border-top: 1px solid #2abff1; color: white; } 139 | .cms-menu-list li.current li a:focus { background: #0ea7db; border-top: 1px solid #0c94c3; color: white; } 140 | .cms-menu-list li.current li.current { background: #2abff1; border-top: 1px solid #2abff1; border-top: none; } 141 | .cms-menu-list li.current li.current a { color: white; } 142 | --------------------------------------------------------------------------------