// 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%; } /* Login */ .view-login{ padding-top: 0; #gradient > .radial(@loginBackgroundHighlight, @loginBackground); .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; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); } .well{ padding-bottom: 0; .box-shadow(~"0px 0px 60px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.9) inset"); } .login-joomla{ display: inline-block; height: 24px; width: 24px; text-indent: -9999px; background: url('../images/login-joomla.png') no-repeat; margin-left: -20px; } .navbar-fixed-bottom{ position: absolute; } .input-medium{ width: 184px; } } .login .chzn-single { width: 230px !important; } .login .chzn-container, .login .chzn-drop { width: 238px !important; max-width: 238px !important; } /* 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; .container-fluid { padding-left: 10px; padding-right: 10px; } } .navbar .navbar-text{ line-height: 30px; } .navbar .brand{ padding: 5px 12px 5px 12px; font-size: 16px; margin-left: 0; } .navbar .nav > li > a{ padding: 6px 10px; } /* Header */ .header{ #gradient > .vertical(@headerBackgroundHighlight, @headerBackground); border-top: 1px solid rgba(255, 255, 255, 0.2); padding: 5px; } .navbar .btn-navbar{ background: #17568c; /* Old browsers */ background: -moz-linear-gradient(top, #17568c 0%, #1a3867 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#17568c), color-stop(100%,#1a3867)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #17568c 0%,#1a3867 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #17568c 0%,#1a3867 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #17568c 0%,#1a3867 100%); /* IE10+ */ background: linear-gradient(top, #17568c 0%,#1a3867 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#17568c', endColorstr='#1a3867',GradientType=0 ); /* IE6-9 */ border: 1px solid #0D2242; margin-bottom: 2px; } @media (max-width: 767px) { .header{ margin-left: -20px; margin-right: -20px; } } .header .navbar-search{ margin-top: 0; } @media (max-width: 979px) { .header .navbar-search{ border-top: 0; border-bottom: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } } /* Search Module */ .navbar-search .search-query{ background: rgba(255, 255, 255, 0.3); } /* Logo */ .logo{ width: 100%; max-width: 143px; height: auto; } .container-logo{ text-align: center; } /* Page Title */ .page-title{ color:white; text-shadow:1px 1px 1px rgba(0, 0, 0, 0.8); font-weight:normal; font-size:20px; line-height: 36px; margin: 0; } /* Page Title in Content */ .content-title { font-size: 24px; font-weight: normal; line-height: 26px; margin-top: 0; } /* Subhead */ .subhead{ background: #ffffff; /* Old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #ededed 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#ededed)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%,#ededed 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%,#ededed 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%,#ededed 100%); /* IE10+ */ background: linear-gradient(top, #ffffff 0%,#ededed 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */ border-bottom: 1px solid #D3D3D3; color: #0C192E; text-shadow: 0 1px 0 #FFF; margin-bottom: 10px; } .subhead-collapse.collapse { height: auto; overflow: visible; } .btn-toolbar .btn-wrapper { display: inline-block; margin: 0 0 5px 5px; } .subhead-fixed{ position: fixed; width: 100%; top: 30px; z-index: 100; -moz-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); } @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; } /* 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; } /* 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: 0.65; filter: alpha(opacity=65); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } /* Nav list filters */ .nav-filters hr{ margin: 5px 0; } /* Module Assignment Tab */ .view-module .tab-content{ overflow: visible; } #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{ .brand { font-size: 13px; } .nav { margin: 0 2px 0 0; > li > a { padding: 6px; } } } .container-fluid { padding-left: 10px; padding-right: 10px; } } @media (min-width: 768px) { .row-fluid [class*="span"]{ margin-left: 15px; } } @media (max-width: 767px) { .page-title{ text-align: center; } .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 { padding-top: 30px; } 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-left: 0; margin-bottom: 5px; } .btn-toolbar .btn-wrapper .btn { width: 95% !important; margin-left: 10px; } .subhead-fixed { box-shadow: 0 0 0 rgba(0, 0, 0, 0.2); } .subhead { background: none repeat scroll 0 0 transparent; border-bottom: 0 solid #D3D3D3; } .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: 93% !important; } } // Navbar .nav-collapse .nav li a, .dropdown-menu a { background-image: none; } @media (max-width: @navbarCollapseWidth) { .navbar-fixed-top .navbar-inner, .navbar-fixed-top .navbar-inner .container-fluid { padding: 0; } .navbar .brand { margin-top: 2px; } .navbar .btn-navbar { margin-top: 3px; margin-right: 3px; margin-bottom: 3px; } .nav-collapse .nav .nav-header { color: @white; } .nav-collapse.collapse.in { height: auto !important; } .nav-collapse .nav, .navbar .nav-collapse .nav.pull-right { margin: 0; } .nav-collapse .dropdown-menu { margin: 0; } .nav-collapse .nav > li > a.dropdown-toggle { #gradient > .vertical(rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05)); 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); } // Normalize LTR Label (JBS request) // -------------------------- .form-horizontal { // Float the labels left .control-label { width: auto; padding-right: 5px; text-align: left; } #jform_catid_chzn { vertical-align: middle; } } /* 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: 100; } /* 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; }