// Copyright (C) 2012 Orbeon, Inc.
//
// This program is free software; you can redistribute it and/or modify it under the terms of the
// GNU Lesser General Public License as published by the Free Software Foundation; either version
// 2.1 of the License, or (at your option) any later version.
//
// This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
// without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
// See the GNU Lesser General Public License for more details.
//
// The full text of the license is available at http://www.gnu.org/copyleft/lesser.html

@import (reference) "form-runner-common";

body.orbeon {
  margin: 0;
  font-family: @baseFontFamily;
  font-size: @frFontSize;         // Use our own preferred font size
  line-height: @baseLineHeight;
  color: @textColor;
  background-color: @bodyBackground;
}

.orbeon {
    label, button, .btn  {
        font-size: @frLabelSize;
    }

    a {
        text-decoration: underline;     // Don't remove the underline for anchors; this is an important web convention
    }

    .alert {
        margin-bottom: @baseLineHeight / 2
    }

    .navbar-inverse {
        .navbar-inner {
            #gradient > .vertical(@gray, @grayDarker);
            border: none;
            .container {
                line-height: @navbarHeight;             // Get the content of the navbar to be verticaly aligned
                img, h1 { vertical-align: middle }      // See: http://wiki.orbeon.com/forms/doc/contributor-guide/browser#TOC-Center-content-vertically-inside-a-box
                img { max-height: @navbarHeight }       // So the navbar height isn't increased if users select a larger logo image
                h1 {
                    margin: 0 0 0 15px;                 // Space between image and title
                    padding: 0;
                    font-size: 16px;
                    font-weight: normal;
                    color: @frNavBarTextColor;
                    text-shadow: none;
                    text-decoration: none;
                    display: inline;
                }
            }
        }
        margin: 10px 0;                 // Space before and after the navbar
    }

    margin: 0;

    .xforms-field {
        // See what applies to .uneditable-input in forms.less
        display: inline-block;
        padding: 4px 6px;
        line-height: @baseLineHeight;
        .border-radius(@inputBorderRadius);

        //width: 206px; // plus 12px padding and 2px border
        width: 100%;

        border: 1px solid @inputBorder;
        .transition(~"border linear .2s, box-shadow linear .2s");

        // See overrides below
        font-size: @frFontSize;         // Use our own preferred font size
        margin-bottom: 0;               // Override default 9px bottom margin added by Bootstrap
        color: black;                   // Make text inside the fields stand out, as this is the most important information
        .box-sizing(border-box);        // So width: 100% works with the padding added by Bootstrap
        height: @controlsHeight;
        background-image: none;         // Liferay adds background images which don't mix well with Bootstrap

        background-color: darken(@inputBackground, 5%);
        .box-shadow(inset 0 1px 2px rgba(0,0,0,.025));
        cursor: not-allowed;

        overflow: hidden; // prevent text from wrapping, but still cut it off like an input does
        white-space: nowrap;

        // IE7: due to missing box-sizing support
        *height: @controlsHeight - 2 * 2px;
        *line-height: @controlsHeight - 2 * 2px;
    }

    select,
    textarea,
    input[type="text"],             // Like Boostrap, use all the specific types to exclude checkbox/radio
    input[type="password"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="date"],
    input[type="month"],
    input[type="time"],
    input[type="week"],
    input[type="number"],
    input[type="email"],
    input[type="url"],
    input[type="search"],
    input[type="tel"],
    input[type="color"],
    .uneditable-input {                 // NOTE: .uneditable-input is removed from Bootstrap 3
        font-size: @frFontSize;         // Use our own preferred font size
        margin-bottom: 0;               // Override default 9px bottom margin added by Bootstrap
        color: black;                   // Make text inside the fields stand out, as this is the most important information
        .box-sizing(border-box);        // So width: 100% works with the padding added by Bootstrap
        height: @controlsHeight;
        background-image: none;         // Liferay adds background images which don't mix well with Bootstrap

        // IE7: due to missing box-sizing support
        *height: @controlsHeight - 2 * 2px;
        *line-height: @controlsHeight - 2 * 2px;
    }

    .xforms-output label {
        cursor: default;
    }

    // Liferay adds background images which don't mix well with Bootstrap
    input[type="submit"],
    input[type="reset"],
    input[type="button"] {
        background-image: none;
        &:hover {
            background-image: none;
        }
    }

    input[type="file"] {
        height: auto;                   // Don't specify a height because with FF the button is not native
        line-height: normal;            // Fix alignment of the "Choose file" button and "No file chosen" text on Chrome

        // Reset these as Liferay adds its own stuff and we don't look good
        //border: 0 none;               // If specified, field is not native with FF
        background-image: none;
        background-color: none;         // So that with FF field is native
        padding: 0;
    }

    // Don't set height for textarea
    textarea {
        height: @textareaHeight;
    }

    label.radio, label.checkbox {
        margin-bottom: @controlsBottomMargin;
        input[type="radio"],
        input[type="checkbox"] {
            margin-top: 3px;    // override Bootstrap
            *margin-top: 0;     // IE7
            margin-top: 0px\9;  // IE8-9
        }
    }

    select[multiple],
    .xforms-select1-appearance-compact select,
    .xforms-select-appearance-compact select {
        height: @multipleSelectHeight;
    }

    // Adapt pagination to use of xf:trigger
    .pagination ul > li {
        &> .xforms-trigger { cursor: pointer }
        &> .xforms-trigger.xforms-readonly { cursor: auto; }
        a { text-decoration: none; }

        // NOTE: Updated for Bootstrap 2.3.2
        >a, >span {
            padding: 8px 12px;
        }

        // Reset rules that can be applied by external Bootstrap .pagination a rule
        span a {
            padding: 0;
            border: none;
            line-height: @baseLineHeight;
        }
    }

    .input-append .add-on, .input-prepend .add-on {
        height: @baseLineHeight - 2px;
        // IE7: align with input field
        *margin-top: 1px;
        *height: @baseLineHeight;
    }

    .input-append, .input-prepend {
        margin-bottom: 0;                   // Not sure why Bootstrap adds a @baseLineHeight / 2 margin here
    }

    .fr-grid tr th .xforms-label {
        margin: 0;                          //  No margin on label inside table headers as they are not next to a control
    }

    .table {
        margin: 0;                          // Bootstrap adds a bottom margin of 20px
        th {
            font-weight: normal;            // Set to bold in Bootstrap
        }
    }

    // Used in Form Builder in particular and we probably never want the humongous legends anywhere
    fieldset {
        padding-left: 0;
        padding-right: 0;

        &> legend {
            line-height: inherit;
            font-size: @frFontSize * 1.1;
            margin-bottom: 10px;
        }
    }

    // Style static readonly plain text and rich text the same as Bootstrap's pre (see code.less)
    .fr-grid .xforms-textarea.xforms-static pre,
    .fr-grid .xforms-mediatype-text-html.xforms-static {
        color: @grayDark;
        display: block;
        padding: (@baseLineHeight - 1) / 2;
        margin: 0 0 @baseLineHeight / 2;
        font-size: @baseFontSize - 1; // 14px to 13px
        line-height: @baseLineHeight;
        background-color: darken(@inputBackground, 5%);
        border: 1px solid #ccc; // fallback for IE7-8
        border: 1px solid rgba(0, 0, 0, .15);
        .border-radius(4px);
    }

    // Force white icons
    .btn-danger i, .btn-warning i, .btn-primary i, .btn-inverse i, .navbar-inverse i,
    .xforms-trigger-appearance-xxforms-danger i, .xforms-trigger-appearance-xxforms-warning i,
    .xforms-trigger-appearance-xxforms-primary i, .xforms-trigger-appearance-xxforms-inverse i, .navbar-inverse i {
        background-image: url(bootstrap/img/glyphicons-halflings-white.png)
    }

    // Make disabled icons a bit opaque
    .disabled[class^="icon-"], .disabled [class^="icon-"] {
        .opacity(40)
    }

    // NAV LIST
    // --------

    // Copy Bootstrap rules but add span between li and a
    // Make links block level
    .nav > li > span > a {
      display: block;
    }
    .nav > li > span > a:hover {
      text-decoration: none;
      background-color: @grayLighter;
    }

    .nav-list > li > span > a,
    .nav-list .nav-header {
      margin-left:  -15px;
      margin-right: -15px;
      text-shadow: 0 1px 0 rgba(255,255,255,.5);
    }
    .nav-list > li > span > a {
      padding: 3px 15px;
    }
    .nav-list > .active > span > a,
    .nav-list > .active > span > a:hover {
      color: @white;
      text-shadow: 0 -1px 0 rgba(0,0,0,.2);
      background-color: @linkColor;
    }

    // Gray out text
    .nav > .disabled > span > a {
      color: @grayLight;
    }
    // Nuke hover effects
    .nav > .disabled > span > a:hover {
      text-decoration: none;
      background-color: transparent;
      cursor: default;
    }

    // Dropdowns
    // ---------

    .dropdown-menu {

        z-index: 2000; // because YUI dialogs are > 1000

        // <a> nested one more level
        > li > span > a {
            display: block;
            padding: 3px 20px;
            clear: both;
            font-weight: normal;
            line-height: @baseLineHeight;
            color: @dropdownLinkColor;
            white-space: nowrap;
            text-decoration: none;
        }

        a {
            text-decoration: none;
        }

        // Restore regular icons for disabled menu items (they are opacified instead, see .opacity() above)
        > li.disabled > a:hover > [class^="icon-"] {
            background-image: url(/apps/fr/style/bootstrap/img/glyphicons-halflings.png);
        }
    }

    // Hover state
    // -----------
    .dropdown-menu > li > span > a:hover,
    .dropdown-menu > li > span > a:focus,
    .dropdown-submenu:hover > a {
      text-decoration: none;
      color: @dropdownLinkColorHover;
      background-color: @dropdownLinkBackgroundHover;
      #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
    }

    // Active state
    // ------------
    .dropdown-menu > .active > span > a,
    .dropdown-menu > .active > span > a:hover {
      color: @dropdownLinkColorHover;
      text-decoration: none;
      outline: 0;
      background-color: @dropdownLinkBackgroundActive;
      #gradient > .vertical(@dropdownLinkBackgroundActive, darken(@dropdownLinkBackgroundActive, 5%));
    }

    // Disabled state
    // --------------
    // Gray out text and ensure the hover state remains gray
    .dropdown-menu > .disabled > span > a,
    .dropdown-menu > .disabled > span > a:hover {
      color: @grayLight;
    }
    // Nuke hover effects
    .dropdown-menu > .disabled > span > a:hover {
      text-decoration: none;
      background-color: transparent;
      background-image: none;
      cursor: default;
    }

    .xforms-trigger-appearance-xxforms-primary .btn {
      .buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight);
    }
    .xforms-trigger-appearance-xxforms-warning .btn {
      .buttonBackground(@btnWarningBackground, @btnWarningBackgroundHighlight);
    }
    .xforms-trigger-appearance-xxforms-danger .btn {
      .buttonBackground(@btnDangerBackground, @btnDangerBackgroundHighlight);
    }
    .xforms-trigger-appearance-xxforms-success .btn {
      .buttonBackground(@btnSuccessBackground, @btnSuccessBackgroundHighlight);
    }
    .xforms-trigger-appearance-xxforms-info .btn {
      .buttonBackground(@btnInfoBackground, @btnInfoBackgroundHighlight);
    }
    .xforms-trigger-appearance-xxforms-inverse .btn {
      .buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight);
    }
}

@media print {
    .orbeon {

        #xforms-form { // make contained rules strong

            // Flying Saucer doesn't like `display: table` for :before and :after
            .clearfix:before, .clearfix:after,
            .row:before, .row:after,
            .row-fluid:before, .row-fluid:after,
            .container:before, .container:after,
            .container-fluid:before, .container-fluid:after,
            .dl-horizontal:before, .dl-horizontal:after,
            .controls-row:before, .controls-row:after,
            .form-actions:before, .form-actions:after,
            .form-horizontal .control-group:before,
            .form-horizontal .control-group:after,
            .nav-tabs:before, .nav-pills:before,
            .nav-tabs:after, .nav-pills:after,
            .tabbable:before, .tabbable:after,
            .navbar-inner:before, .navbar-inner:after,
            .navbar-form:before, .navbar-form:after,
            .pager:before, .pager:after,
            .modal-footer:before, .modal-footer:after,
            .thumbnails:before, .thumbnails:after,
            .navbar-inner:before, .navbar-inner:after {
                display: block;
            }

            // Flying Saucer doesn't like `0` font sizes
            .input-append,
            .input-prepend,
            .btn-group,
            .btn-toolbar {
                font-size: .5px;
            }
        }

        .fr-mode-view, .fr-mode-pdf, .fr-mode-email {

            .xforms-field {
                // Flying Saucer: missing box-sizing support :(
                min-height: @controlsHeight - 2 * 2px !important; // not sure why it doesn't kick in otherwise
                line-height: @controlsHeight - 2 * 2px;
            }

            // Values below are empirical
            .fr-grid-1 {
                .xforms-field {
                    width: 98.5%;
                }
            }

            .fr-grid-2 {
                .xforms-field {
                    width: 97%;
                }
            }

            .fr-grid-3 {
                .xforms-field {
                    width: 95.5%;
                }
            }

            .fr-grid-4 {
                .xforms-field {
                    width: 94%;
                }
            }

            // Bootstrap adds `content: " (" attr(href) ")"` and `content: " (" attr(title) ")"`
            a[href]:after, abbr[title]:after {
                content: "";
            }
        }
    }
}