523 lines
11 KiB
Plaintext
523 lines
11 KiB
Plaintext
|
// 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";
|
||
|
|
|
||
|
|
/* Site Body Styles */
|
||
|
|
body.site{
|
||
|
|
border-top:3px solid #0088cc;
|
||
|
|
padding: 20px;
|
||
|
|
background-color: #f4f6f7;
|
||
|
|
}
|
||
|
|
body.site.fluid{
|
||
|
|
background-color: #ffffff;
|
||
|
|
}
|
||
|
|
.thumbnail {
|
||
|
|
margin-bottom:9px;
|
||
|
|
}
|
||
|
|
.accordion-group {
|
||
|
|
background:#fff;
|
||
|
|
}
|
||
|
|
/* Site Title (if no logo) */
|
||
|
|
.site-title {
|
||
|
|
font-size: 40px;
|
||
|
|
line-height: 48px;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
.brand {
|
||
|
|
color: darken(@linkColor, 20%);
|
||
|
|
.transition(color .5s linear);
|
||
|
|
}
|
||
|
|
.brand:hover {
|
||
|
|
color: @linkColor;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
/* Header */
|
||
|
|
.header{
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
.header .finder {
|
||
|
|
margin-top: 14px;
|
||
|
|
}
|
||
|
|
.header .finder .btn{
|
||
|
|
margin-top: 0px;
|
||
|
|
}
|
||
|
|
/* Nav */
|
||
|
|
.navigation{
|
||
|
|
padding: 5px 0;
|
||
|
|
border-top: 1px solid rgba(0, 0, 0, 0.075);
|
||
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.075);
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
.navigation .nav-pills{
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
/* Hero Banner Unit */
|
||
|
|
.hero-unit{
|
||
|
|
background-color: #08C;
|
||
|
|
}
|
||
|
|
.hero-unit > *{
|
||
|
|
color: white;
|
||
|
|
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
|
||
|
|
}
|
||
|
|
/* Container */
|
||
|
|
.container{
|
||
|
|
max-width: 960px;
|
||
|
|
}
|
||
|
|
.body .container{
|
||
|
|
background-color: #fff;
|
||
|
|
-moz-border-radius: 4px;
|
||
|
|
-webkit-border-radius: 4px;
|
||
|
|
border-radius: 4px;
|
||
|
|
padding: 20px;
|
||
|
|
border: 1px solid rgba(0, 0, 0, 0.15);
|
||
|
|
-moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05);
|
||
|
|
-webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05);
|
||
|
|
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05);
|
||
|
|
}
|
||
|
|
/* Wells */
|
||
|
|
.well .page-header{
|
||
|
|
margin: 0px 0px 5px 0px;
|
||
|
|
}
|
||
|
|
/* 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; }
|
||
|
|
/* Module */
|
||
|
|
.module-header {
|
||
|
|
padding-bottom: 17px;
|
||
|
|
margin: 20px 0 18px 0;
|
||
|
|
border-bottom: 1px solid #eeeeee;
|
||
|
|
}
|
||
|
|
/* Single Item */
|
||
|
|
.item-title {
|
||
|
|
margin-bottom:9px;
|
||
|
|
}
|
||
|
|
.item-content {
|
||
|
|
margin:18px 0;
|
||
|
|
}
|
||
|
|
.item-subtitle {
|
||
|
|
margin-bottom:9px;
|
||
|
|
}
|
||
|
|
.pull-right.item-image {
|
||
|
|
margin:0 0 18px 20px;
|
||
|
|
}
|
||
|
|
.pull-left.item-image {
|
||
|
|
margin:0 20px 18px 0;
|
||
|
|
}
|
||
|
|
.header .nav > li:last-child > .dropdown-menu,
|
||
|
|
.item-actions .dropdown-menu,
|
||
|
|
.item-comment .dropdown-menu {
|
||
|
|
left:initial;
|
||
|
|
right:0;
|
||
|
|
}
|
||
|
|
.article-index {
|
||
|
|
margin:0 0 10px 10px;
|
||
|
|
}
|
||
|
|
/* List */
|
||
|
|
.list-item-title {
|
||
|
|
margin-bottom:9px;
|
||
|
|
}
|
||
|
|
.list-item-content {
|
||
|
|
margin:18px 0;
|
||
|
|
}
|
||
|
|
.list-item-subtitle {
|
||
|
|
margin-bottom:9px;
|
||
|
|
}
|
||
|
|
/* More Items */
|
||
|
|
.items-more,
|
||
|
|
.content-links {
|
||
|
|
padding: 15px 0;
|
||
|
|
}
|
||
|
|
/* Breadcrumbs */
|
||
|
|
.breadcrumb {
|
||
|
|
margin: 10px 0;
|
||
|
|
}
|
||
|
|
/* Caption fixes */
|
||
|
|
.img_caption .left {
|
||
|
|
float: left;
|
||
|
|
margin-right: 1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.img_caption .right {
|
||
|
|
float: right;
|
||
|
|
margin-left: 1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.img_caption .left p {
|
||
|
|
clear: left;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.img_caption .right p {
|
||
|
|
clear: right;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.img_caption {
|
||
|
|
text-align: center!important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.img_caption.none {
|
||
|
|
margin-left:auto;
|
||
|
|
margin-right:auto;
|
||
|
|
}
|
||
|
|
/* Aside Subnavs */
|
||
|
|
#aside .nav .nav-child {
|
||
|
|
border-left: 2px solid @tableBorder;
|
||
|
|
padding-left: 5px;
|
||
|
|
}
|
||
|
|
/* Navigation Submenus */
|
||
|
|
// The dropdown menu (ul)
|
||
|
|
// ----------------------
|
||
|
|
.navigation {
|
||
|
|
.nav-child {
|
||
|
|
position: absolute;
|
||
|
|
top: 95%;
|
||
|
|
left: 0;
|
||
|
|
z-index: @zindexDropdown;
|
||
|
|
display: none; // none by default, but block on "open" of the menu
|
||
|
|
float: left;
|
||
|
|
min-width: 160px;
|
||
|
|
padding: 5px 0;
|
||
|
|
margin: 2px 0 0; // override default ul
|
||
|
|
list-style: none;
|
||
|
|
background-color: @dropdownBackground;
|
||
|
|
border: 1px solid #ccc; // Fallback for IE7-8
|
||
|
|
border: 1px solid @dropdownBorder;
|
||
|
|
*border-right-width: 2px;
|
||
|
|
*border-bottom-width: 2px;
|
||
|
|
.border-radius(6px);
|
||
|
|
.box-shadow(0 5px 10px rgba(0,0,0,.2));
|
||
|
|
-webkit-background-clip: padding-box;
|
||
|
|
-moz-background-clip: padding;
|
||
|
|
background-clip: padding-box;
|
||
|
|
|
||
|
|
// Aligns the dropdown menu to right
|
||
|
|
&.pull-right {
|
||
|
|
right: 0;
|
||
|
|
left: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Dividers (basically an hr) within the dropdown
|
||
|
|
.divider {
|
||
|
|
.nav-divider(@dropdownDividerTop, @dropdownDividerBottom);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Links within the dropdown menu
|
||
|
|
a {
|
||
|
|
display: block;
|
||
|
|
padding: 3px 20px;
|
||
|
|
clear: both;
|
||
|
|
font-size: @baseFontSize;
|
||
|
|
font-weight: normal;
|
||
|
|
line-height: @baseLineHeight;
|
||
|
|
color: @dropdownLinkColor;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.nav > li {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.nav > li:hover > .nav-child,
|
||
|
|
.nav > li > a:focus + .nav-child, {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
.nav-child:before {
|
||
|
|
position: absolute;
|
||
|
|
top: -7px;
|
||
|
|
left: 9px;
|
||
|
|
display: inline-block;
|
||
|
|
border-right: 7px solid transparent;
|
||
|
|
border-bottom: 7px solid #ccc;
|
||
|
|
border-left: 7px solid transparent;
|
||
|
|
border-bottom-color: rgba(0, 0, 0, 0.2);
|
||
|
|
content: '';
|
||
|
|
}
|
||
|
|
.nav-child:after {
|
||
|
|
position: absolute;
|
||
|
|
top: -6px;
|
||
|
|
left: 10px;
|
||
|
|
display: inline-block;
|
||
|
|
border-right: 6px solid transparent;
|
||
|
|
border-bottom: 6px solid #ffffff;
|
||
|
|
border-left: 6px solid transparent;
|
||
|
|
content: '';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Hover state
|
||
|
|
// -----------
|
||
|
|
.navigation .nav-child li > a:hover,
|
||
|
|
.navigation .nav-child li > a:focus,
|
||
|
|
.navigation .nav-child:hover > a {
|
||
|
|
text-decoration: none;
|
||
|
|
color: @dropdownLinkColorHover;
|
||
|
|
background-color: @dropdownLinkBackgroundHover;
|
||
|
|
#gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 480px) {
|
||
|
|
.item-info > span {
|
||
|
|
display:block;
|
||
|
|
}
|
||
|
|
.blog-item .pull-right.item-image {
|
||
|
|
margin:0 0 18px 0;
|
||
|
|
}
|
||
|
|
.blog-item .pull-left.item-image {
|
||
|
|
margin:0 0 18px 0;
|
||
|
|
float:none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
body {
|
||
|
|
padding-top: 0;
|
||
|
|
}
|
||
|
|
.header {
|
||
|
|
background:transparent;
|
||
|
|
}
|
||
|
|
.header .brand {
|
||
|
|
float:none;
|
||
|
|
display:block;
|
||
|
|
text-align:center;
|
||
|
|
}
|
||
|
|
.header .nav.pull-right,
|
||
|
|
.header-search {
|
||
|
|
float:none;
|
||
|
|
display:block;
|
||
|
|
}
|
||
|
|
.header-search form {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
.header-search .search-query {
|
||
|
|
width: 90%;
|
||
|
|
}
|
||
|
|
.header .nav-pills > li > a {
|
||
|
|
border: 1px solid @tableBorder;
|
||
|
|
border-bottom:0;
|
||
|
|
margin:0;
|
||
|
|
-webkit-border-radius: 0;
|
||
|
|
-moz-border-radius: 0;
|
||
|
|
border-radius: 0;
|
||
|
|
margin-right: 0;
|
||
|
|
}
|
||
|
|
.header .nav-pills > li:first-child > a {
|
||
|
|
-webkit-border-radius: 4px 4px 0 0;
|
||
|
|
-moz-border-radius: 4px 4px 0 0;
|
||
|
|
border-radius: 4px 4px 0 0;
|
||
|
|
}
|
||
|
|
.header .nav-pills > li:last-child > a {
|
||
|
|
-webkit-border-radius: 0 0 4px 4px;
|
||
|
|
-moz-border-radius: 0 0 4px 4px;
|
||
|
|
border-radius: 0 0 4px 4px;
|
||
|
|
border-bottom:1px solid @tableBorder;
|
||
|
|
}
|
||
|
|
.modal.fade {
|
||
|
|
top:-100%;
|
||
|
|
}
|
||
|
|
.nav-tabs {
|
||
|
|
border-bottom: 0;
|
||
|
|
}
|
||
|
|
.nav-tabs > li {
|
||
|
|
float: none;
|
||
|
|
}
|
||
|
|
.nav-tabs > li > a {
|
||
|
|
border: 1px solid @tableBorder;
|
||
|
|
-webkit-border-radius: 0;
|
||
|
|
-moz-border-radius: 0;
|
||
|
|
border-radius: 0;
|
||
|
|
margin-right: 0;
|
||
|
|
}
|
||
|
|
.nav-tabs > li:first-child > a {
|
||
|
|
-webkit-border-radius: 4px 4px 0 0;
|
||
|
|
-moz-border-radius: 4px 4px 0 0;
|
||
|
|
border-radius: 4px 4px 0 0;
|
||
|
|
}
|
||
|
|
.nav-tabs > li:last-child > a, .nav-tabs > .active:last-child > a {
|
||
|
|
-webkit-border-radius: 0 0 4px 4px;
|
||
|
|
-moz-border-radius: 0 0 4px 4px;
|
||
|
|
border-radius: 0 0 4px 4px;
|
||
|
|
border-bottom:1px solid @tableBorder;
|
||
|
|
}
|
||
|
|
.nav-tabs > li > a:hover {
|
||
|
|
border-color: @tableBorder;
|
||
|
|
z-index: 2;
|
||
|
|
}
|
||
|
|
.nav-tabs.nav-dark > li > a {
|
||
|
|
border: 1px solid @grayDark;
|
||
|
|
}
|
||
|
|
.nav-tabs > li:last-child > a, .nav-tabs > .active:last-child > a {
|
||
|
|
border-bottom:1px solid @grayDark;
|
||
|
|
}
|
||
|
|
.nav-tabs.nav-dark > li > a:hover {
|
||
|
|
border-color: @grayDark;
|
||
|
|
}
|
||
|
|
.nav-pills > li {
|
||
|
|
float: none;
|
||
|
|
}
|
||
|
|
.nav-pills > li > a {
|
||
|
|
margin-right: 0;
|
||
|
|
}
|
||
|
|
.nav-pills > li > a {
|
||
|
|
margin-bottom: 3px;
|
||
|
|
}
|
||
|
|
.nav-pills > li:last-child > a {
|
||
|
|
margin-bottom: 1px;
|
||
|
|
}
|
||
|
|
.form-search > .pull-left,
|
||
|
|
.form-search > .pull-right {
|
||
|
|
float:none;
|
||
|
|
display:block;
|
||
|
|
margin-bottom:9px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media (max-width: 980px) {
|
||
|
|
.navbar-fixed-top {
|
||
|
|
margin-bottom:0!important;
|
||
|
|
}
|
||
|
|
.item-comment .item-image{
|
||
|
|
display:none;
|
||
|
|
}
|
||
|
|
.well {
|
||
|
|
padding: 10px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media (min-width: 768px) and (max-width: 979px) {
|
||
|
|
#login-form .input-small {
|
||
|
|
width: 62px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// Page break
|
||
|
|
dl.tabs {
|
||
|
|
float: left;
|
||
|
|
margin-bottom: -1px;
|
||
|
|
}
|
||
|
|
dl.tabs dt.tabs {
|
||
|
|
float: left;
|
||
|
|
margin-left: 3px;
|
||
|
|
padding: 4px 10px;
|
||
|
|
background-color: #F0F0F0;
|
||
|
|
border-top: 1px solid #CCC;
|
||
|
|
border-left: 1px solid #CCC;
|
||
|
|
border-right: 1px solid #CCC;
|
||
|
|
}
|
||
|
|
dl.tabs dt:hover {
|
||
|
|
background-color: #F9F9F9;
|
||
|
|
}
|
||
|
|
dl.tabs dt.open {
|
||
|
|
background-color: #FFF;
|
||
|
|
border-bottom: 1px solid #FFF;
|
||
|
|
}
|
||
|
|
dl.tabs dt.tabs h3 {
|
||
|
|
margin: 0;
|
||
|
|
font-size: 1.1em;
|
||
|
|
font-weight: normal;
|
||
|
|
}
|
||
|
|
dl.tabs dt.tabs h3 a {
|
||
|
|
color: #0088CC;
|
||
|
|
}
|
||
|
|
dl.tabs dt.tabs h3 a:hover {
|
||
|
|
color: #005580;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
dl.tabs dt.open h3 a {
|
||
|
|
color: #000;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
div.current dd.tabs {
|
||
|
|
margin: 0;
|
||
|
|
padding: 10px;
|
||
|
|
clear: both;
|
||
|
|
border: 1px solid #CCC;
|
||
|
|
background-color: #FFF;
|
||
|
|
}
|