// CSS Reset @import "../../../../media/jui/less/reset.less"; // Core variables and mixins @import "variables.less"; // Custom for this template @import "../../../../media/jui/less/mixins.less"; // Grid system and page structure @import "../../../../media/jui/less/scaffolding.less"; @import "../../../../media/jui/less/grid.less"; @import "../../../../media/jui/less/layouts.less"; // Base CSS @import "../../../../media/jui/less/type.less"; @import "../../../../media/jui/less/code.less"; @import "../../../../media/jui/less/forms.less"; @import "../../../../media/jui/less/tables.less"; // Components: common // @import "../../../../media/jui/less/sprites.less"; @import "../../../../media/jui/less/dropdowns.less"; @import "../../../../media/jui/less/wells.less"; @import "../../../../media/jui/less/component-animations.less"; @import "../../../../media/jui/less/close.less"; // Components: Buttons & Alerts @import "../../../../media/jui/less/buttons.less"; @import "../../../../media/jui/less/button-groups.less"; @import "../../../../media/jui/less/alerts.less"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less // Components: Nav @import "../../../../media/jui/less/navs.less"; @import "../../../../media/jui/less/navbar.less"; @import "../../../../media/jui/less/breadcrumbs.less"; @import "../../../../media/jui/less/pagination.less"; @import "../../../../media/jui/less/pager.less"; // Components: Popovers @import "../../../../media/jui/less/modals.less"; @import "../../../../media/jui/less/tooltip.less"; @import "../../../../media/jui/less/popovers.less"; // Components: Misc @import "../../../../media/jui/less/thumbnails.less"; @import "../../../../media/jui/less/labels-badges.less"; @import "../../../../media/jui/less/progress-bars.less"; @import "../../../../media/jui/less/accordion.less"; @import "../../../../media/jui/less/carousel.less"; @import "../../../../media/jui/less/hero-unit.less"; // Utility classes @import "../../../../media/jui/less/utilities.less"; // RESPONSIVE CLASSES // ------------------ @import "../../../../media/jui/less/responsive-utilities.less"; // MEDIA QUERIES // ------------------ // Phones to portrait tablets and narrow desktops @import "../../../../media/jui/less/responsive-767px-max.less"; // Tablets to regular desktops @import "../../../../media/jui/less/responsive-768px-979px.less"; // Large desktops @import "../../../../media/jui/less/responsive-1200px-min.less"; // RESPONSIVE NAVBAR // ------------------ // From 979px and below, show a button to toggle navbar contents @import "../../../../media/jui/less/responsive-navbar.less"; // Extended for JUI @import "../../../../media/jui/less/bootstrap-extended.less"; // Has to be last to override when necessary // div.modal (instead of .modal) @import "../../../../media/jui/less/modals.joomla.less"; @import "../../../../media/jui/less/responsive-767px-max.joomla.less"; // Icon Font @import "icomoon.less"; /* Body */ html { height: 100%; } body { height: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a:hover, a:active, a:focus { outline: none; } /* Login */ .view-login { padding-top: 0; .container { width: 300px; position: absolute; top: 50%; left: 50%; margin-top: -206px; margin-left: -150px; } .navbar-fixed-bottom { padding-left: 20px; padding-right: 20px; text-align: center; } .navbar-fixed-bottom, .navbar-fixed-bottom a { color: #FCFCFC; &.navbar-inverse { color: @gray; } } .well { padding-bottom: 0; } .login-joomla { position: absolute; left: 50%; height: 24px; width: 24px; text-indent: -9999px; background: url('../images/login-joomla.png') no-repeat; margin-left: -12px; .navbar-inverse & { background: url('../images/login-joomla-inverse.png') no-repeat; } } .navbar-fixed-bottom { position: absolute; } .input-medium { width: 184px; } } .login { .chzn-single { width: 230px !important; } .chzn-container, .chzn-drop { width: 238px !important; max-width: 238px !important; } .btn-large { margin-top: 10px; } } /* Typography */ .small { font-size: 11px; } .row-even .small, .row-odd .small, .row-even .small a, .row-odd .small a { color: #888; } /* Navbar */ body .navbar, body .navbar-fixed-top { margin-bottom: 0; } .navbar-inner { min-height: 0; background: @navbarBackground; background-image: none; filter: none; .container-fluid { padding-left: 10px; padding-right: 10px; font-size: 15px; } } .navbar-inverse { .navbar-inner { background: @navbarInverseBackground; background-image: none; filter: none; } } .navbar { .navbar-text { line-height: 30px; } .admin-logo { float: left; padding: 7px 12px 0px 15px; font-size: 16px; color: #d9d9d9; &:hover { color: #ffffff; } } .brand { float: right; display: block; padding: 6px 10px; margin-left: -20px; font-size: inherit; font-weight: normal; &:hover, &:focus { text-decoration: none; } } .nav > li > a { padding: 6px 10px; } .dropdown-menu, .nav-user { font-size: 13px; } } .navbar-fixed-top, .navbar-static-top { .navbar-inner { .box-shadow(none); } } // Fixed to bottom .navbar-fixed-bottom { bottom: 0; .navbar-inner { .box-shadow(none); } } /* Header */ .header { background-color: @headerBackground; border-top: 1px solid rgba(255, 255, 255, 0.2); padding: 5px 25px; } .navbar .btn-navbar { background: #17568c; border: 1px solid #0D2242; margin-bottom: 2px; } @media (max-width: 767px) { .header { padding: 4px 18px; margin-left: -20px; margin-right: -20px; } .navbar .admin-logo { margin-left: 10px; padding: 9px 9px 0 9px; } } .header .navbar-search { margin-top: 0; } @media (max-width: 979px) { .header .navbar-search { border-top: 0; border-bottom: 0; .box-shadow(none); } } /* Search Module */ .navbar-search .search-query { background: rgba(255, 255, 255, 0.3); } /* Logo */ .container-logo { float: right; text-align: right; } .logo { width: 100%; max-width: 143px; height: auto; } /* Page Title */ .page-title { color: white; font-weight: normal; font-size: 20px; line-height: 36px; margin: 0; [class^="icon-"], [class*=" icon-"] { margin-right: 16px; } } @media (max-width: 767px) { .container-logo { display: none; } .page-title { font-size: 18px; line-height: 28px; [class^="icon-"], [class*=" icon-"] { margin-right: 10px; } } } /* Page Title in Content */ .content-title { font-size: 24px; font-weight: normal; line-height: 26px; margin-top: 0; } /* Subhead */ .subhead { background: @wellBackground; border-bottom: 1px solid darken(@wellBackground, 7%); color: #0C192E; text-shadow: 0 1px 0 #FFF; margin-bottom: 10px; min-height: 43px; } .subhead-collapse { margin-bottom: 11px; } .subhead-collapse.collapse { height: auto; overflow: visible; } .btn-toolbar { margin-bottom: 5px; .btn-wrapper { display: inline-block; margin: 0 0 5px 5px; } } .subhead-fixed { position: fixed; width: 100%; top: 30px; z-index: 100; } @media (max-width: 767px) { .subhead { margin-left: -20px; margin-right: -20px; padding-left: 10px; padding-right: 10px; } } .subhead h1 { font-size: 17px; font-weight: normal; margin-left: 10px; margin-top: 6px; } /* Toolbar */ #toolbar .btn-success { width: 148px; } #toolbar #toolbar-options, #toolbar #toolbar-help { float: right; } html[dir=rtl] #toolbar #toolbar-options, html[dir=rtl] #toolbar #toolbar-help { float: left; } /* Content */ .well .page-header { margin: -10px 0 18px 0; padding-bottom: 5px; } .well .row-even p, .well .row-odd p { margin-bottom: 0; } /* Headings */ h1, h2, h3, h4, h5, h6 { margin: (@baseLineHeight / 1.5) 0; } h1 { font-size: 26px; line-height: 28px; } h2 { font-size: 22px; line-height: 24px; } h3 { font-size: 18px; line-height: 20px; } h4 { font-size: 14px; line-height: 16px; } h5 { font-size: 13px; line-height: 15px; } h6 { font-size: 12px; line-height: 14px; } /* Sidebar */ .sidebar-nav .nav-list > li > a { color: #555; } .sidebar-nav .nav-list > li.active > a { color: #fff; margin-right: -16px; } /* Quick-icons */ .quick-icons .nav li + .nav-header { margin-top: 12px; margin-bottom: 2px; } .quick-icons .nav-list > li > a { padding: 5px 15px; } .quick-icons { font-size: 14px; margin-bottom: 20px; } .quick-icons .nav-header, .well .module-title.nav-header { font-size: 13px; } .quick-icons h2.nav-header { margin: 12px 0 5px; } .quick-icons h2.nav-header:first-child { margin: 0px 0 5px; } .well .module-title.nav-header { padding: 0px 15px 7px; margin: 0px; } .quick-icons [class^="icon-"]:before, .quick-icons [class*=" icon-"]:before { font-size: 16px; margin-bottom: 20px; line-height: 18px; } .quick-icons .nav-list [class^="icon-"], .quick-icons .nav-list [class*=" icon-"] { margin-right: 9px; } html[dir=rtl] .quick-icons .nav-list [class^="icon-"], html[dir=rtl] .quick-icons .nav-list [class*=" icon-"] { margin-left: 9px; margin-right: 0px; } /* Links */ .j-links-separator { margin: 20px 0px; width: 100%; height: 0px; border-top: 2px solid #DDDDDD; } /* Main Container & System Debug Padding */ .container-main, #system-debug { padding-bottom: 50px; } /* Status Module */ #status { background: #EDEDED; border-top: 1px solid #DDDDDD; padding: 2px 10px 4px 10px; .box-shadow(~"0px 1px 0px rgba(255, 255, 255, 0.8) inset, 0px -15px 15px rgba(255, 255, 255, 0.6)"); color: #999999; .btn-toolbar, p { margin: 0px; } .btn-toolbar, .btn-group { font-size: 12px; } a { color: #999999; } } /* Status Module in top position */ #status.status-top { background: @headerBackground; .box-shadow(~"0px 1px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px rgba(0, 0, 0, 0.3) inset, 0px -1px 0px rgba(0, 0, 0, 0.3)"); border-top: 0; color: @navbarInverseText; padding: 2px 20px 6px 20px; a { color: @navbarInverseLinkColor; } } /* Pagination in toolbar */ .pagination-toolbar { margin: 0; } .pagination-toolbar a { line-height: 26px; } /* Toolbar dropdown */ .pull-right > .dropdown-menu { left: auto; right: 0; } /* Disabled (generic) */ .disabled { cursor: default; background-image: none; .opacity(65); .box-shadow(none); } /* Nav list filters */ .nav-filters hr { margin: 5px 0; } /* Module Assignment Tab */ #assignment.tab-pane { min-height: 500px; } // Button color .btn-primary.active, .btn-warning.active, .btn-danger.active, .btn-success.active, .btn-info.active, .btn-inverse.active { color: rgba(255, 255, 255, .95); } /* Chosen Max Width */ .chzn-container, .chzn-drop { max-width: 100% !important; } @media (max-width: 979px) { .navbar { .nav { font-size: 13px; margin: 0 2px 0 0; > li { > a { padding: 6px; } } } } .container-fluid { padding-left: 10px; padding-right: 10px; } } @media (min-width: 768px) { body { padding-top: 30px; } body.component { padding-top: 0; } .row-fluid [class*="span"] { margin-left: 15px; } .row-fluid .modal-batch [class*="span"] { margin-left: 0; } .nav-collapse.collapse.in { height: auto !important; } } @media (max-width: 767px) { .navbar-search.pull-right { float: none; text-align: center; } .subhead-fixed { position: static; width: auto; } .container-fluid { padding-left: 0; padding-right: 0; } } @media (min-width: 738px) { body.component { padding-top: 0; } } @media (max-width: 738px) { .navbar { .brand { font-size: 16px; } } } /* Subhead (toolbar) Collapse Button */ .btn-subhead { display: none; } @media (min-width: 481px) { #filter-bar { // Fix for Firefox height: 29px; } } /* Extended Responsive Styles */ @media (max-width: 480px) { .table th:nth-of-type(n+5), .table th:nth-of-type(3), .table th:nth-of-type(2), .table td:nth-of-type(n+5), .table td:nth-of-type(2), .table td:nth-of-type(3) { white-space: normal; } .pagination a { padding: 5px; } .btn-group.divider, .header .row-fluid .span3, .header .row-fluid .span7 { display: none; } .navbar .btn { margin: 0; } .btn-subhead { display: block; margin: 10px 0; } .chzn-container, .chzn-container .chzn-results, .chzn-container-single .chzn-drop { width: 99% !important; } .subhead-collapse.collapse { height: 0; overflow: hidden; } .btn-toolbar .btn-wrapper { display: block; margin:0px 10px 5px 10px; } .btn-toolbar .btn-wrapper .btn { width: 100% !important; } .subhead { background: none repeat scroll 0 0 transparent; border-bottom: 0 solid darken(@wellBackground, 7%); } .btn-group + .btn-group { margin-left: 10px; } .login .chzn-single { width: 222px !important; } .login .chzn-container, .login .chzn-drop { width: 230px !important; } } @media (max-width: 320px) { .view-login .navbar-fixed-bottom { display: none; } .btn-toolbar .btn-wrapper .btn { width: 100% !important; } } // Navbar .nav-collapse .nav li a, .dropdown-menu a { background-image: none; } .nav-collapse .dropdown-menu > li > span { display: block; padding: 3px 20px; } @media (max-width: @navbarCollapseWidth) { .navbar-fixed-top .navbar-inner, .navbar-fixed-top .navbar-inner .container-fluid { padding: 0; } .navbar .brand { margin-top: 2px; float: none; text-align: center; } .navbar .btn-navbar { margin-top: 3px; margin-right: 3px; margin-bottom: 3px; } .nav-collapse .nav .nav-header { color: @white; } .nav-collapse .nav, .navbar .nav-collapse .nav.pull-right { margin: 0; } .nav-collapse .dropdown-menu { margin: 0; } .nav-collapse .dropdown-menu > li > span { display: block; padding: 4px 15px; } .navbar-inverse .nav-collapse .dropdown-menu > li > span { color: @navbarInverseLinkColor; } .nav-collapse .nav > li > a.dropdown-toggle { background-color: rgba(255, 255, 255, 0.07); font-size: 12px; font-weight: bold; color: @grayLighter; text-transform: uppercase; padding-left: 15px; } .nav-collapse .nav li a { margin-bottom: 0; border-top: 1px solid rgba(255, 255, 255, 0.25); border-bottom: 1px solid rgba(0, 0, 0, 0.5); } .nav-collapse .nav li ul li ul.dropdown-menu, .nav-collapse .nav li ul li:hover ul.dropdown-menu, .nav-collapse .caret { display: none !important; } .nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a { font-size: 15px; font-weight: normal; color: @white; .border-radius(0); } .navbar .nav-collapse .nav > li > .dropdown-menu::before, .navbar .nav-collapse .nav > li > .dropdown-menu::after, .navbar .nav-collapse .dropdown-submenu > a::after { display: none; } .nav-collapse .dropdown-menu li + li a { margin-bottom: 0; } } /* Sortable list*/ .sortable-handler.inactive { opacity: 0.3; filter: alpha(opacity=30); } /* Joomla and Extension update message */ .alert-joomlaupdate { text-align: center; button { vertical-align: baseline; } } // Normalize LTR Label (JBS request) // -------------------------- .form-horizontal { // Float the labels left .control-label { width: auto; padding-right: 5px; text-align: left; // Set a width for the spacer hr so it shows .spacer hr { width: 380px; @media (max-width: 420px) { width: 220px; } } } #jform_catid_chzn { vertical-align: middle; } } .form-vertical { .control-label { > label { display: inline-block; .ie7-inline-block(); } } .controls { margin-left: 0; } } @media (max-width: 979px) { .form-horizontal-desktop { .control-label { float: none; width: auto; padding-right: 0; padding-top: 0; text-align: left; > label { display: inline-block; .ie7-inline-block(); } } .controls { margin-left: 0; } } } @media (max-width: 1200px) { .row-fluid .row-fluid .form-horizontal-desktop { .control-label { float: none; width: auto; padding-right: 0; padding-top: 0; text-align: left; > label { display: inline-block; .ie7-inline-block(); } } .controls { margin-left: 0; } } } .form-inline-header { margin: 5px 0; .control-group, .control-label, .controls { display: inline-block; .ie7-inline-block(); } .control-label { width: auto; padding-right: 10px; } .controls { padding-right: 20px; } } /* Display checkboxes without bullets in list */ fieldset.checkboxes input { float: left; } fieldset.checkboxes li { list-style: none; } /* Media Manager folder icon override */ ul.manager .height-50 .icon-folder-2 { height: 35px; width: 35px; line-height: 35px; font-size: 30px; } /* Flash uploader */ .upload-queue > li > span, .upload-queue > li > a { margin: 0 2px; } .upload-queue .file-remove { float: right; } /* z-index issues */ .moor-box { z-index: 3; } .admin .chzn-container .chzn-drop { z-index: 1040; } /* Tree Select */ ul.treeselect, ul.treeselect li { margin: 0; padding: 0; } ul.treeselect { margin-top: 8px; } ul.treeselect li { padding: 2px 10px 2px; list-style: none; } ul.treeselect i.treeselect-toggle { line-height: 18px; } ul.treeselect label { font-size: 1em; margin-left: 8px; } ul.treeselect label.nav-header { padding: 0; } ul.treeselect input { margin: 2px 0 0 8px; } ul.treeselect .treeselect-menu { margin: 0 6px; } ul.treeselect ul.dropdown-menu { margin: 0; } ul.treeselect ul.dropdown-menu li { padding: 0 5px; border: none; } /* Tables */ td.has-context { // Fixes difference in height between normal and hover on cell with context height: 23px; } td.nowrap.has-context { width: 45%; } /* Item associations */ .item-associations { margin: 0; } .item-associations li { list-style: none; display: inline-block; margin: 0 0 3px 0; } .item-associations li a { color: #ffffff; } /* Content Languages flag */ #flag img { padding-top: 6px; vertical-align: top; } /* Tweaking of tooltips */ .tooltip { max-width: 400px; } .tooltip-inner { max-width: none; text-align: left; text-shadow: none; } th .tooltip-inner { font-weight: normal; } .tooltip.hasimage { opacity: 1; } /* Permissions dropdown display */ #permissions-sliders .chzn-container { position: absolute; } /* Component pop-up */ .container-popup { padding: 15px; } /* Min-width on buttons */ .controls .btn-group > .btn { min-width: 50px; } .controls .btn-group.btn-group-yesno > .btn { min-width: 84px; padding: 2px 12px; } .img-preview > img { max-height: 100%; } /* Help site refresh button*/ #helpsite-refresh { vertical-align: top; } .alert-no-items { margin-top: 20px; } @media (max-width: 767px) { html[dir=rtl] #toolbar #toolbar-options, html[dir=rtl] #toolbar #toolbar-help, #toolbar #toolbar-options, #toolbar #toolbar-help { float: none; } } /* Title field */ input.input-large-text { font-size: 18px; line-height: 22px; height: auto; } /* Extension type labels */ .info-labels { margin-top: -5px; margin-bottom: 10px; } /* Chosen color styles */ [class^="chzn-color"].chzn-single, [class*=" chzn-color"].chzn-single, [class^="chzn-color"].chzn-single .chzn-single-with-drop, [class*=" chzn-color"].chzn-single .chzn-single-with-drop { .box-shadow(none); } .chzn-color.chzn-single[rel="value_1"], .chzn-color-reverse.chzn-single[rel="value_0"], .chzn-color-state.chzn-single[rel="value_1"] { .buttonBackground(@btnSuccessBackground, @btnSuccessBackgroundHighlight); } .chzn-color.chzn-single[rel="value_0"], .chzn-color-reverse.chzn-single[rel="value_1"], .chzn-color-state.chzn-single[rel="value_0"], .chzn-color-state.chzn-single[rel="value_-1"], .chzn-color-state.chzn-single[rel="value_-2"] { .buttonBackground(@btnDangerBackground, @btnDangerBackgroundHighlight); } /* Widen the drop downs for the Permissions Field */ #permissions-sliders .input-small { width: 120px; } .editor { overflow: hidden; position: relative } .editor textarea.mce_editable { box-sizing: border-box; } /* For grid.boolean */ a.grid_false { display: inline-block; height: 16px; width: 16px; background-image: url('../images/admin/publish_r.png'); } a.grid_true { display: inline-block; height: 16px; width: 16px; background-image: url('../images/admin/icon-16-allow.png'); } /* For collapsible sidebar */ .j-sidebar-container { position: absolute; display: block; left: -16.5%; width: 16.5%; margin: -10px 0 0 -1px; padding-top: 28px; padding-bottom: 10px; background-color: @wellBackground; border-bottom: 1px solid darken(@wellBackground, 7%); border-right: 1px solid darken(@wellBackground, 7%); .border-radius(0 0 @baseBorderRadius 0); &.j-sidebar-hidden { left: -16.5%; } &.j-sidebar-visible { left: 0; } .filter-select { padding: 0 14px; } } .j-toggle-button-wrapper { position: absolute; display: block; top: 7px; padding: 0; &.j-toggle-hidden { right: -24px; } &.j-toggle-visible { right: 7px; } } .j-toggle-sidebar-button { font-size: 16px; color: @linkColor; text-decoration: none; cursor: pointer; &:hover { color: @linkColorHover; } } #system-message-container, #j-main-container { padding: 0 0 0 5px; min-height: 0; } #system-message-container.j-toggle-main, #j-main-container.j-toggle-main, #system-debug.j-toggle-main { float: right; } @media (min-width: 768px) { .j-toggle-transition { .transition(all 0.3s ease); } } @media (max-width: 979px) { .j-toggle-button-wrapper.j-toggle-hidden { right: -20px; } } @media (max-width: 767px) { .j-sidebar-container { position: relative; width: 100%; margin: 0 0 20px 0; padding: 0; background: transparent; border-right: 0; border-bottom: 0; } .j-sidebar-container.j-sidebar-hidden { margin-left: 16.5%; } .j-sidebar-container.j-sidebar-visible { margin-left: 0; } .j-toggle-sidebar-header, .j-toggle-button-wrapper { display: none; } } @media (max-width: 420px) { .j-sidebar-container { margin: 0; } } .break-word { word-break: break-all; word-wrap: break-word; } /* Customize Textarea Resizing */ textarea { resize: both; } textarea.vert { resize: vertical; } textarea.noResize { resize: none; }