diff options
Diffstat (limited to 'src')
25 files changed, 118 insertions, 5198 deletions
diff --git a/src/meetingtools/apps/auth/views.py b/src/meetingtools/apps/auth/views.py index e294b0c..ee23df3 100644 --- a/src/meetingtools/apps/auth/views.py +++ b/src/meetingtools/apps/auth/views.py @@ -13,9 +13,9 @@ from meetingtools.multiresponse import redirect_to, make_response_dict from meetingtools.ac import ac_api_client from django.shortcuts import render_to_response from django.contrib import auth -from django_co_connector.models import co_import_from_request, add_member,\ - remove_member +from django_co_connector.models import co_import_from_request, add_member,remove_member from meetingtools.apps.cluster.models import acc_for_user +from django.conf import settings def meta(request,attr): v = request.META.get(attr) @@ -123,6 +123,8 @@ def accounts_login_federated(request): next = request.session.get("after_login_redirect", None) if not next and request.GET.has_key('next'): next = request.GET['next'] + else: + next = settings.DEFAULT_URL acc = acc_for_user(request.user) with ac_api_client(request) as api: @@ -163,4 +165,5 @@ def accounts_login_federated(request): return redirect_to(next) else: pass - return redirect_to(next) + + return redirect_to(settings.LOGIN_URL) diff --git a/src/meetingtools/apps/room/feeds.py b/src/meetingtools/apps/room/feeds.py index 3dff05e..a72caaa 100644 --- a/src/meetingtools/apps/room/feeds.py +++ b/src/meetingtools/apps/room/feeds.py @@ -7,7 +7,6 @@ Created on May 13, 2011 from django.contrib.syndication.views import Feed from meetingtools.apps.room.models import Room from tagging.models import TaggedItem -from meetingtools.settings import BASE_URL from django.utils.feedgenerator import Atom1Feed, Rss201rev2Feed from meetingtools.apps.room.views import room_recordings from django.shortcuts import get_object_or_404 @@ -25,7 +24,7 @@ class TagsWrapper(object): return self.title() def link(self,ext): - return "%s/room/+%s.%s" % (BASE_URL,"+".join(self.tags),ext) + return "/room/+%s.%s" % ("+".join(self.tags),ext) class MeetingToolsFeed(Feed): diff --git a/src/meetingtools/apps/room/models.py b/src/meetingtools/apps/room/models.py index 249b1bf..2177b24 100644 --- a/src/meetingtools/apps/room/models.py +++ b/src/meetingtools/apps/room/models.py @@ -12,7 +12,7 @@ from django.contrib.auth.models import User from meetingtools.apps.cluster.models import ACCluster import time import tagging -from meetingtools.settings import BASE_URL, LOCK_DIR +from meetingtools.settings import LOCK_DIR from django.db.models.signals import post_save from tagging.models import Tag import os @@ -102,16 +102,16 @@ class Room(models.Model): return int(time.mktime(self.lastupdated.timetuple())) def go_url(self): - return "%s/go/%s" % (BASE_URL,self.urlpath) + return "/go/%s" % self.urlpath def go_url_internal(self): - return "%s/go/%d" % (BASE_URL,self.id) + return "/go/%d" % self.id def permalink(self): - return "%s/room/%d" % (BASE_URL,self.id) + return "/room/%d" % self.id def recordings_url(self): - return "%s/room/%d/recordings" % (BASE_URL,self.id) + return "/room/%d/recordings" % self.id def nusers(self): if self.user_count == None: diff --git a/src/meetingtools/apps/room/tasks.py b/src/meetingtools/apps/room/tasks.py index feb0ec5..ce9f275 100644 --- a/src/meetingtools/apps/room/tasks.py +++ b/src/meetingtools/apps/room/tasks.py @@ -17,9 +17,8 @@ from datetime import datetime,timedelta from lxml import etree from django.db.models import Q from django.contrib.humanize.templatetags import humanize -from meetingtools.apps.userprofile.models import profile +from django.conf import settings from django.core.mail import send_mail -from meetingtools.settings import NOREPLY, BASE_URL def _owner_username(api,sco): logging.debug(sco) @@ -231,7 +230,7 @@ def send_message(user,subject,message): try: p = user.get_profile() if p and p.email: - send_mail(subject,message,NOREPLY,[p.email]) + send_mail(subject,message,settings.NOREPLY,[p.email]) else: logging.info("User %s has no email address - email not sent" % user.username) except ObjectDoesNotExist: @@ -248,4 +247,4 @@ def clean_old_rooms(): with ac_api_client(acc) as api: for room in Room.objects.filter(lastvisited__lt=then): logging.debug("room %s was last used %s" % (room.name,humanize.naturalday(room.lastvisited))) - send_message.apply_async([room.creator,"You have an unused meetingroom at %s" % BASE_URL,"Do you still need %s (%s)?" % (room.name,room.permalink())])
\ No newline at end of file + send_message.apply_async([room.creator,"You have an unused meetingroom at %s" % acc.name ,"Do you still need %s (%s)?" % (room.name,room.permalink())])
\ No newline at end of file diff --git a/src/meetingtools/apps/room/views.py b/src/meetingtools/apps/room/views.py index e612141..c46ab6e 100644 --- a/src/meetingtools/apps/room/views.py +++ b/src/meetingtools/apps/room/views.py @@ -4,8 +4,7 @@ Created on Jan 31, 2011 @author: leifj ''' from meetingtools.apps.room.models import Room, ACCluster -from meetingtools.multiresponse import respond_to, redirect_to, json_response,\ - timeAsrfc822 +from meetingtools.multiresponse import respond_to, redirect_to, json_response from meetingtools.apps.room.forms import DeleteRoomForm,\ CreateRoomForm, ModifyRoomForm, TagRoomForm from django.shortcuts import get_object_or_404 @@ -15,10 +14,9 @@ from meetingtools.apps import room from django.contrib.auth.decorators import login_required import logging from pprint import pformat -from meetingtools.utils import session +from meetingtools.utils import session, base_url import time -from meetingtools.settings import GRACE, BASE_URL, DEFAULT_TEMPLATE_SCO,\ - IMPORT_TTL +from django.conf import settings from django.utils.datetime_safe import datetime from django.http import HttpResponseRedirect from django.core.exceptions import ObjectDoesNotExist @@ -27,7 +25,7 @@ from meetingtools.ac.api import ACPClient from tagging.models import Tag, TaggedItem import random, string from django.utils.feedgenerator import rfc3339_date -from django.views.decorators.cache import cache_control, never_cache +from django.views.decorators.cache import never_cache from meetingtools.apps.cluster.models import acc_for_user from django.contrib.auth.models import User import iso8601 @@ -111,13 +109,14 @@ def view(request,id): {'user':request.user, 'rooms':[room], 'title': room.name, + 'baseurl': base_url(request), 'active': True, }) def _init_update_form(request,form,acc,my_meetings_sco_id): if form.fields.has_key('urlpath'): - url = BASE_URL - form.fields['urlpath'].widget.prefix = url.rstrip('/')+"/" + url = base_url(request) + form.fields['urlpath'].widget.prefix = url if form.fields.has_key('source_sco_id'): form.fields['source_sco_id'].widget.choices = [('','-- select template --')]+[r for r in _user_templates(request,acc,my_meetings_sco_id)] @@ -234,7 +233,7 @@ def _import_room(request,acc,r): modified = False room = None - if room and (abs(room.lastupdate() - time.time()) < IMPORT_TTL): + if room and (abs(room.lastupdate() - time.time()) < settings.IMPORT_TTL): return room if r.has_key('urlpath'): @@ -406,7 +405,7 @@ def _goto(request,room,clean=True,promote=False): if clean: # don't clean the room unless you get a good status code from the call to the usermanager api above if room.self_cleaning and room.user_count == 0: - if (room.user_count == 0) and (abs(lastvisit - now) > GRACE): + if (room.user_count == 0) and (abs(lastvisit - now) > settings.GRACE): room.lock("Locked for cleaning") try: room = _clean(request,room) @@ -465,7 +464,7 @@ def list_by_tag(request,tn): 'description':title , 'edit':False, 'active':len(rooms) == 1, - 'baseurl': BASE_URL, + 'baseurl': base_url(request), 'tagstring': tn, 'rooms':rooms}) @@ -483,7 +482,7 @@ def list_and_import_by_tag(request,tn): 'description':title , 'edit':False, 'active':len(rooms) == 1, - 'baseurl': BASE_URL, + 'baseurl': base_url(request), 'tagstring': tn, 'rooms':rooms}) diff --git a/src/meetingtools/extensions/templatetags/prefix.py b/src/meetingtools/extensions/templatetags/prefix.py deleted file mode 100644 index 32b8656..0000000 --- a/src/meetingtools/extensions/templatetags/prefix.py +++ /dev/null @@ -1,18 +0,0 @@ -''' -Created on Feb 9, 2011 - -@author: leifj -''' - -from django import template -from meetingtools.settings import PREFIX_URL, BASE_URL -register = template.Library() - -@register.simple_tag -def baseurl(): - return BASE_URL - - -@register.simple_tag -def prefix(): - return PREFIX_URL
\ No newline at end of file diff --git a/src/meetingtools/extensions/templatetags/roomurl.py b/src/meetingtools/extensions/templatetags/roomurl.py index 37f1e80..e5abe57 100644 --- a/src/meetingtools/extensions/templatetags/roomurl.py +++ b/src/meetingtools/extensions/templatetags/roomurl.py @@ -1,5 +1,4 @@ from django import template -from meetingtools.settings import BASE_URL register = template.Library() @@ -14,7 +13,7 @@ def roomurl(room): if room.urlpath: path = room.urlpath - return "%s/go/%s" % (BASE_URL,path) + return "/go/%s" % path roomurl.is_safe = True register.filter(roomurl)
\ No newline at end of file diff --git a/src/meetingtools/multiresponse.py b/src/meetingtools/multiresponse.py index 077f446..f599323 100644 --- a/src/meetingtools/multiresponse.py +++ b/src/meetingtools/multiresponse.py @@ -1,3 +1,4 @@ +from meetingtools import context_processors import meetingtools.mimeparse as mimeparse import re import rfc822 @@ -6,8 +7,7 @@ from django.shortcuts import render_to_response from django.http import HttpResponse, HttpResponseForbidden,\ HttpResponseRedirect from django.utils import simplejson -from django.template import loader -from meetingtools.settings import PREFIX_URL +from django.template import loader, RequestContext default_suffix_mapping = {"\.htm(l?)$": "text/html", "\.json$": "application/json", @@ -30,9 +30,10 @@ def make_response_dict(request,d={}): if request.user.is_authenticated(): d['user'] = request.user - d['prefix'] = PREFIX_URL - return d + ctx = RequestContext(request,d,[context_processors.theme]) + print repr(ctx['theme']) + return ctx def json_response(data,request=None): response_data = None @@ -73,4 +74,4 @@ def respond_to(request, template_mapping, dict={}, suffix_mapping=default_suffix return response def redirect_to(path): - return HttpResponseRedirect("%s%s" % (PREFIX_URL,path))
\ No newline at end of file + return HttpResponseRedirect(path)
\ No newline at end of file diff --git a/src/meetingtools/settings.py b/src/meetingtools/settings.py index 1e54f1f..8e72dca 100644 --- a/src/meetingtools/settings.py +++ b/src/meetingtools/settings.py @@ -1,4 +1,5 @@ # Django settings for meetingtools project. +from django.conf.global_settings import TEMPLATE_CONTEXT_PROCESSORS import meetingtools.site_logging import os @@ -13,8 +14,6 @@ ADMINS = ( SRC_DIR = os.path.dirname(os.path.abspath(__file__)) BASE_DIR = os.path.abspath(os.path.join(SRC_DIR, '..')) -PREFIX_URL = "" -BASE_URL = "http://localhost:8000%s" % PREFIX_URL MANAGERS = ADMINS LOCK_DIR = "/var/lock" @@ -58,15 +57,12 @@ USE_I18N = True # calendars according to the current locale USE_L10N = True -MEDIA_ROOT = "%s/site-media" % BASE_DIR -ADMIN_MEDIA_ROOT = "%s/admin-media" % BASE_DIR -MEDIA_URL = '%s/site-media/' % PREFIX_URL -ADMIN_MEDIA_PREFIX = '%s/admin-media/' % PREFIX_URL STATIC_ROOT = "%s/static" % BASE_DIR -STATIC_URL = "%s/static/" % PREFIX_URL +STATIC_URL = "/static/" -LOGIN_URL = "%s/accounts/login" % PREFIX_URL -LOGOUT_URL = "%s/accounts/logout" % PREFIX_URL +LOGIN_URL = "/accounts/login" +LOGOUT_URL = "/accounts/logout" +DEFAULT_URL = "/" # Make this unique, and don't share it with anybody. SECRET_KEY = 'tz78l!c=cl2=jic5$2#(bq)7-4s1ivtm*a+q0w1yi0$)hrmc7l' @@ -83,6 +79,11 @@ CACHES = { } } +THEMES = { + '__default__': {'base': "%s/themes/default" % STATIC_URL }, + 'meetingtools.nordu.net': {'base': "%s/themes/meetingtools.nordu.net" % STATIC_URL} +} + # List of callables that know how to import templates from various sources. TEMPLATE_LOADERS = ( 'django.template.loaders.filesystem.Loader', diff --git a/src/meetingtools/urls.py b/src/meetingtools/urls.py index 24f58e7..1c42d08 100644 --- a/src/meetingtools/urls.py +++ b/src/meetingtools/urls.py @@ -2,7 +2,7 @@ from django.conf.urls.defaults import patterns,include # Uncomment the next two lines to enable the admin: from django.contrib import admin -from meetingtools.settings import ADMIN_MEDIA_ROOT, MEDIA_ROOT, STATIC_ROOT +from meetingtools.settings import STATIC_ROOT from meetingtools.multiresponse import redirect_to from meetingtools.apps.room.feeds import RoomAtomTagFeed,RoomRSSTagField,\ AtomRecordingFeed, RSSRecordingField diff --git a/src/meetingtools/utils.py b/src/meetingtools/utils.py index cadfb36..eee0d80 100644 --- a/src/meetingtools/utils.py +++ b/src/meetingtools/utils.py @@ -14,4 +14,7 @@ def session(request,key=None,val=None): request.session[key] = None return request.session[key] else: - return request.session
\ No newline at end of file + return request.session + +def base_url(request): + return "%s://%s/" % ({True: 'https',False:'http'}[request.is_secure()],request.get_host())
\ No newline at end of file diff --git a/src/static/css/lavish.less b/src/static/css/lavish.less deleted file mode 100644 index 6f73909..0000000 --- a/src/static/css/lavish.less +++ /dev/null @@ -1,5013 +0,0 @@ -// -// Variables -// -------------------------------------------------- - - -// Global values -// -------------------------------------------------- - -// Links -@linkColor: #8F7D6D; -@linkColorHover: darken(@linkColor, 15%); - -// Grays -@black: #1F1C17; -@grayDark: #58544D; -@grayDarker: darken(@grayDark, 10%); -@gray: #E37322; -@grayLight: #E49A5F; -@grayLighter: #E0BB93; -@white: #FDFBE5; - -// Accent colors -// ------------------------- -@blue: #049cdb; -@blueDark: #0064cd; -@green: #46a546; -@red: #9d261d; -@yellow: #ffc40d; -@orange: #f89406; -@pink: #c3325f; -@purple: #7a43b6; - - -// Scaffolding -// ------------------------- -@bodyBackground: @white; -@textColor: @grayDark; - -// Typography -// ------------------------- -@sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif; -@serifFontFamily: Georgia, "Times New Roman", Times, serif; -@monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace; - -@baseFontSize: 14px; -@baseFontFamily: @sansFontFamily; -@baseLineHeight: 20px; -@altFontFamily: @serifFontFamily; - -@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily -@headingsFontWeight: bold; // instead of browser default, bold -@headingsColor: inherit; // empty to use BS default, @textColor - - -// Tables -// ------------------------- -@tableBackground: transparent; // overall background-color -@tableBackgroundAccent: #f9f9f9; // for striping -@tableBackgroundHover: #f5f5f5; // for hover -@tableBorder: @grayDark; // table and cell border - - -// Buttons -// ------------------------- -@btnBackground: @white; -@btnBackgroundHighlight: darken(@white, 10%); -@btnBorder: #bbb; - -@btnPrimaryBackground: @linkColor; -@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%); - -@btnInfoBackground: #5bc0de; -@btnInfoBackgroundHighlight: #2f96b4; - -@btnSuccessBackground: #62c462; -@btnSuccessBackgroundHighlight: #51a351; - -@btnWarningBackground: lighten(@orange, 15%); -@btnWarningBackgroundHighlight: @orange; - -@btnDangerBackground: #ee5f5b; -@btnDangerBackgroundHighlight: #bd362f; - -@btnInverseBackground: #444; -@btnInverseBackgroundHighlight: @grayDarker; - - -// Forms -// ------------------------- -@inputBackground: #fff; -@inputBorder: #ccc; -@inputBorderRadius: 3px; -@inputDisabledBackground: @grayLighter; -@formActionsBackground: #f5f5f5; - -// Dropdowns -// ------------------------- -@dropdownBackground: @white; -@dropdownBorder: rgba(0,0,0,.2); -@dropdownDividerTop: #e5e5e5; -@dropdownDividerBottom: @white; - -@dropdownLinkColor: @grayDark; - -@dropdownLinkColorHover: @white; -@dropdownLinkBackgroundHover: @dropdownLinkBackgroundActive; - -@dropdownLinkColorActive: @dropdownLinkColor; -@dropdownLinkBackgroundActive: @linkColor; - - - -// COMPONENT VARIABLES -// -------------------------------------------------- - -// Z-index master list -// ------------------------- -// Used for a bird's eye view of components dependent on the z-axis -// Try to avoid customizing these :) -@zindexDropdown: 1000; -@zindexPopover: 1010; -@zindexTooltip: 1030; -@zindexFixedNavbar: 1030; -@zindexModalBackdrop: 1040; -@zindexModal: 1050; - - -// Sprite icons path -// ------------------------- -@iconSpritePath: "../img/glyphicons-halflings.png"; -@iconWhiteSpritePath: "../img/glyphicons-halflings-white.png"; - - -// Input placeholder text color -// ------------------------- -@placeholderText: @grayLight; - - -// Hr border color -// ------------------------- -@hrBorder: @grayLighter; - - -// Wells -// ------------------------- -@wellBackground: #f5f5f5; - - -// Navbar -// ------------------------- -@navbarCollapseWidth: 979px; - -@navbarHeight: 40px; -@navbarBackground: darken(@navbarBackgroundHighlight, 5%); -@navbarBackgroundHighlight: @grayDark; -@navbarBorder: darken(@navbarBackground, 12%); - -@navbarText: @gray; -@navbarLinkColor: @gray; -@navbarLinkColorHover: @grayLighter; -@navbarLinkColorActive: @grayLighter; -@navbarLinkBackgroundHover: transparent; -@navbarLinkBackgroundActive: darken(@navbarBackground, 5%); - -@navbarBrandColor: @navbarLinkColor; - -// Inverted navbar -@navbarInverseBackground: #111111; -@navbarInverseBackgroundHighlight: #222222; -@navbarInverseBorder: #252525; - -@navbarInverseText: @grayLight; -@navbarInverseLinkColor: @grayLight; -@navbarInverseLinkColorHover: @white; -@navbarInverseLinkColorActive: @navbarInverseLinkColorHover; -@navbarInverseLinkBackgroundHover: transparent; -@navbarInverseLinkBackgroundActive: @navbarInverseBackground; - -@navbarInverseSearchBackground: lighten(@navbarInverseBackground, 25%); -@navbarInverseSearchBackgroundFocus: @white; -@navbarInverseSearchBorder: @navbarInverseBackground; -@navbarInverseSearchPlaceholderColor: #ccc; - -@navbarInverseBrandColor: @navbarInverseLinkColor; - - -// Pagination -// ------------------------- -@paginationBackground: #fff; -@paginationBorder: #ddd; -@paginationActiveBackground: #f5f5f5; - - -// Hero unit -// ------------------------- -@heroUnitBackground: @grayLighter; -@heroUnitHeadingColor: inherit; -@heroUnitLeadColor: inherit; - - -// Form states and alerts -// ------------------------- -@warningText: #c09853; -@warningBackground: #fcf8e3; -@warningBorder: darken(spin(@warningBackground, -10), 3%); - -@errorText: #b94a48; -@errorBackground: #f2dede; -@errorBorder: darken(spin(@errorBackground, -10), 3%); - -@successText: #468847; -@successBackground: #dff0d8; -@successBorder: darken(spin(@successBackground, -10), 5%); - -@infoText: #3a87ad; -@infoBackground: #d9edf7; -@infoBorder: darken(spin(@infoBackground, -10), 7%); - - -// Tooltips and popovers -// ------------------------- -@tooltipColor: #fff; -@tooltipBackground: #000; -@tooltipArrowWidth: 5px; -@tooltipArrowColor: @tooltipBackground; - -@popoverBackground: #fff; -@popoverArrowWidth: 10px; -@popoverArrowColor: #fff; -@popoverTitleBackground: darken(@popoverBackground, 3%); - -// Special enhancement for popovers -@popoverArrowOuterWidth: @popoverArrowWidth + 1; -@popoverArrowOuterColor: rgba(0,0,0,.25); - - - -// GRID -// -------------------------------------------------- - - -// Default 940px grid -// ------------------------- -@gridColumns: 12; -@gridColumnWidth: 60px; -@gridGutterWidth: 20px; -@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); - -// 1200px min -@gridColumnWidth1200: 70px; -@gridGutterWidth1200: 30px; -@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1)); - -// 768px-979px -@gridColumnWidth768: 42px; -@gridGutterWidth768: 20px; -@gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1)); - - -// Fluid grid -// ------------------------- -@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth); -@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth); - -// 1200px min -@fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200); -@fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200); - -// 768px-979px -@fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768); -@fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768); - -// -// Modals -// Adapted from http://github.com/necolas/normalize.css -// -------------------------------------------------- - - -// Display in IE6-9 and FF3 -// ------------------------- - -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -nav, -section { - display: block; -} - -// Display block in IE6-9 and FF3 -// ------------------------- - -audio, -canvas, -video { - display: inline-block; - *display: inline; - *zoom: 1; -} - -// Prevents modern browsers from displaying 'audio' without controls -// ------------------------- - -audio:not([controls]) { - display: none; -} - -// Base settings -// ------------------------- - -html { - font-size: 100%; - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; -} -// Focus states -a:focus { - .tab-focus(); -} -// Hover & Active -a:hover, -a:active { - outline: 0; -} - -// Prevents sub and sup affecting line-height in all browsers -// ------------------------- - -sub, -sup { - position: relative; - font-size: 75%; - line-height: 0; - vertical-align: baseline; -} -sup { - top: -0.5em; -} -sub { - bottom: -0.25em; -} - -// Img border in a's and image quality -// ------------------------- - -img { - max-width: 100%; // Make images inherently responsive - height: auto; // Make images inherently responsive - vertical-align: middle; - border: 0; - -ms-interpolation-mode: bicubic; -} - -// Prevent max-width from affecting Google Maps -#map_canvas img { - max-width: none; -} - -// Forms -// ------------------------- - -// Font size in all browsers, margin changes, misc consistency -button, -input, -select, -textarea { - margin: 0; - font-size: 100%; - vertical-align: middle; -} -button, -input { - *overflow: visible; // Inner spacing ie IE6/7 - line-height: normal; // FF3/4 have !important on line-height in UA stylesheet -} -button::-moz-focus-inner, -input::-moz-focus-inner { // Inner padding and border oddities in FF3/4 - padding: 0; - border: 0; -} -button, -input[type="button"], -input[type="reset"], -input[type="submit"] { - cursor: pointer; // Cursors on all buttons applied consistently - -webkit-appearance: button; // Style clickable inputs in iOS -} -input[type="search"] { // Appearance in Safari/Chrome - -webkit-box-sizing: content-box; - -moz-box-sizing: content-box; - box-sizing: content-box; - -webkit-appearance: textfield; -} -input[type="search"]::-webkit-search-decoration, -input[type="search"]::-webkit-search-cancel-button { - -webkit-appearance: none; // Inner-padding issues in Chrome OSX, Safari 5 -} -textarea { - overflow: auto; // Remove vertical scrollbar in IE6-9 - vertical-align: top; // Readability and alignment cross-browser -} -// -// Mixins -// -------------------------------------------------- - - -// UTILITY MIXINS -// -------------------------------------------------- - -// Clearfix -// -------- -// For clearing floats like a boss h5bp.com/q -.clearfix { - *zoom: 1; - &:before, - &:after { - display: table; - content: ""; - // Fixes Opera/contenteditable bug: - // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 - line-height: 0; - } - &:after { - clear: both; - } -} - -// Webkit-style focus -// ------------------ -.tab-focus() { -// Default - outline: thin dotted #333; -// Webkit - outline: 5px auto -webkit-focus-ring-color; - outline-offset: -2px; -} - -// Center-align a block level element -// ---------------------------------- -.center-block() { - display: block; - margin-left: auto; - margin-right: auto; -} - -// IE7 inline-block -// ---------------- -.ie7-inline-block() { - *display: inline; /* IE7 inline-block hack */ - *zoom: 1; -} - -// IE7 likes to collapse whitespace on either side of the inline-block elements. -// Ems because we're attempting to match the width of a space character. Left -// version is for form buttons, which typically come after other elements, and -// right version is for icons, which come before. Applying both is ok, but it will -// mean that space between those elements will be .6em (~2 space characters) in IE7, -// instead of the 1 space in other browsers. -.ie7-restore-left-whitespace() { - *margin-left: .3em; - - &:first-child { - *margin-left: 0; - } -} - -.ie7-restore-right-whitespace() { - *margin-right: .3em; -} - -// Sizing shortcuts -// ------------------------- -.size(@height, @width) { - width: @width; - height: @height; -} -.square(@size) { - .size(@size, @size); -} - -// Placeholder text -// ------------------------- -.placeholder(@color: @placeholderText) { - &:-moz-placeholder { - color: @color; - } - &:-ms-input-placeholder { - color: @color; - } - &::-webkit-input-placeholder { - color: @color; - } -} - -// Text overflow -// ------------------------- -// Requires inline-block or block for proper styling -.text-overflow() { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -// CSS image replacement -// ------------------------- -// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757 -.hide-text { - font: 0/0 a; - color: transparent; - text-shadow: none; - background-color: transparent; - border: 0; -} - - -// FONTS -// -------------------------------------------------- - -#font { - #family { - .serif() { - font-family: @serifFontFamily; - } - .sans-serif() { - font-family: @sansFontFamily; - } - .monospace() { - font-family: @monoFontFamily; - } - } - .shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { - font-size: @size; - font-weight: @weight; - line-height: @lineHeight; - } - .serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { - #font > #family > .serif; - #font > .shorthand(@size, @weight, @lineHeight); - } - .sans-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { - #font > #family > .sans-serif; - #font > .shorthand(@size, @weight, @lineHeight); - } - .monospace(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { - #font > #family > .monospace; - #font > .shorthand(@size, @weight, @lineHeight); - } -} - - -// FORMS -// -------------------------------------------------- - -// Block level inputs -.input-block-level { - display: block; - width: 100%; - min-height: 30px; // Make inputs at least the height of their button counterpart - .box-sizing(border-box); // Makes inputs behave like true block-level elements -} - - - -// Mixin for form field states -.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) { -// Set the text color - > label, - .help-block, - .help-inline { - color: @textColor; - } -// Style inputs accordingly - .checkbox, - .radio, - input, - select, - textarea { - color: @textColor; - border-color: @borderColor; - .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work - &:focus { - border-color: darken(@borderColor, 10%); - // Write out in full since the lighten() function isn't easily escaped - -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%); - -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%); - box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%); - } - } -// Give a small background color for input-prepend/-append - .input-prepend .add-on, - .input-append .add-on { - color: @textColor; - background-color: @backgroundColor; - border-color: @textColor; - } -} - - - -// CSS3 PROPERTIES -// -------------------------------------------------- - -// Border Radius -.border-radius(@radius) { - -webkit-border-radius: @radius; - -moz-border-radius: @radius; - border-radius: @radius; -} - -// Single Corner Border Radius -.border-top-left-radius(@radius) { - -webkit-border-top-left-radius: @radius; - -moz-border-radius-topleft: @radius; - border-top-left-radius: @radius; -} -.border-top-right-radius(@radius) { - -webkit-border-top-right-radius: @radius; - -moz-border-radius-topright: @radius; - border-top-right-radius: @radius; -} -.border-bottom-right-radius(@radius) { - -webkit-border-bottom-right-radius: @radius; - -moz-border-radius-bottomright: @radius; - border-bottom-right-radius: @radius; -} -.border-bottom-left-radius(@radius) { - -webkit-border-bottom-left-radius: @radius; - -moz-border-radius-bottomleft: @radius; - border-bottom-left-radius: @radius; -} - -// Single Side Border Radius -.border-top-radius(@radius) { - .border-top-right-radius(@radius); - .border-top-left-radius(@radius); -} -.border-right-radius(@radius) { - .border-top-right-radius(@radius); - .border-bottom-right-radius(@radius); -} -.border-bottom-radius(@radius) { - .border-bottom-right-radius(@radius); - .border-bottom-left-radius(@radius); -} -.border-left-radius(@radius) { - .border-top-left-radius(@radius); - .border-bottom-left-radius(@radius); -} - -// Drop shadows -.box-shadow(@shadow) { - -webkit-box-shadow: @shadow; - -moz-box-shadow: @shadow; - box-shadow: @shadow; -} - -// Transitions -.transition(@transition) { - -webkit-transition: @transition; - -moz-transition: @transition; - -o-transition: @transition; - transition: @transition; -} - -// Transformations -.rotate(@degrees) { - -webkit-transform: rotate(@degrees); - -moz-transform: rotate(@degrees); - -ms-transform: rotate(@degrees); - -o-transform: rotate(@degrees); - transform: rotate(@degrees); -} -.scale(@ratio) { - -webkit-transform: scale(@ratio); - -moz-transform: scale(@ratio); - -ms-transform: scale(@ratio); - -o-transform: scale(@ratio); - transform: scale(@ratio); -} -.translate(@x, @y) { - -webkit-transform: translate(@x, @y); - -moz-transform: translate(@x, @y); - -ms-transform: translate(@x, @y); - -o-transform: translate(@x, @y); - transform: translate(@x, @y); -} -.skew(@x, @y) { - -webkit-transform: skew(@x, @y); - -moz-transform: skew(@x, @y); - -ms-transform: skew(@x, @y); - -o-transform: skew(@x, @y); - transform: skew(@x, @y); -} -.translate3d(@x, @y, @z) { - -webkit-transform: translate3d(@x, @y, @z); - -moz-transform: translate3d(@x, @y, @z); - -o-transform: translate3d(@x, @y, @z); - transform: translate3d(@x, @y, @z); -} - -// Backface visibility -// Prevent browsers from flickering when using CSS 3D transforms. -// Default value is `visible`, but can be changed to `hidden -// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples -.backface-visibility(@visibility){ - -webkit-backface-visibility: @visibility; - -moz-backface-visibility: @visibility; - backface-visibility: @visibility; -} - -// Background clipping -// Heads up: FF 3.6 and under need "padding" instead of "padding-box" -.background-clip(@clip) { - -webkit-background-clip: @clip; - -moz-background-clip: @clip; - background-clip: @clip; -} - -// Background sizing -.background-size(@size){ - -webkit-background-size: @size; - -moz-background-size: @size; - -o-background-size: @size; - background-size: @size; -} - - -// Box sizing -.box-sizing(@boxmodel) { - -webkit-box-sizing: @boxmodel; - -moz-box-sizing: @boxmodel; - box-sizing: @boxmodel; -} - -// User select -// For selecting text on the page -.user-select(@select) { - -webkit-user-select: @select; - -moz-user-select: @select; - -ms-user-select: @select; - -o-user-select: @select; - user-select: @select; -} - -// Resize anything -.resizable(@direction) { - resize: @direction; // Options: horizontal, vertical, both - overflow: auto; // Safari fix -} - -// CSS3 Content Columns -.content-columns(@columnCount, @columnGap: @gridGutterWidth) { - -webkit-column-count: @columnCount; - -moz-column-count: @columnCount; - column-count: @columnCount; - -webkit-column-gap: @columnGap; - -moz-column-gap: @columnGap; - column-gap: @columnGap; -} - -// Optional hyphenation -.hyphens(@mode: auto) { - word-wrap: break-word; - -webkit-hyphens: @mode; - -moz-hyphens: @mode; - -ms-hyphens: @mode; - -o-hyphens: @mode; - hyphens: @mode; -} - -// Opacity -.opacity(@opacity) { - opacity: @opacity / 100; - filter: ~"alpha(opacity=@{opacity})"; -} - - - -// BACKGROUNDS -// -------------------------------------------------- - -// Add an alphatransparency value to any background or border color (via Elyse Holladay) -#translucent { - .background(@color: @white, @alpha: 1) { - background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha); - } - .border(@color: @white, @alpha: 1) { - border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha); - .background-clip(padding-box); - } -} - -// Gradient Bar Colors for buttons and alerts - .gradientBar(@primaryColor, @secondaryColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) { - color: @textColor; - text-shadow: @textShadow; - #gradient > .vertical(@primaryColor, @secondaryColor); - border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%); - border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%); -} - -// Gradients -#gradient { - .horizontal(@startColor: #555, @endColor: #333) { - background-color: @endColor; - background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+ - background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ - background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+ - background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10 - background-image: linear-gradient(to right, @startColor, @endColor); // Standard, IE10 - background-repeat: repeat-x; - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down - } - .vertical(@startColor: #555, @endColor: #333) { - background-color: mix(@startColor, @endColor, 60%); - background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+ - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ - background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+ - background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10 - background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10 - background-repeat: repeat-x; - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down - } - .directional(@startColor: #555, @endColor: #333, @deg: 45deg) { - background-color: @endColor; - background-repeat: repeat-x; - background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+ - background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+ - background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10 - background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10 - } - .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { - background-color: mix(@midColor, @endColor, 80%); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor)); - background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor); - background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop*100%, @endColor); - background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor); - background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor); - background-repeat: no-repeat; - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback - } - .radial(@innerColor: #555, @outerColor: #333) { - background-color: @outerColor; - background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor)); - background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor); - background-image: -moz-radial-gradient(circle, @innerColor, @outerColor); - background-image: -o-radial-gradient(circle, @innerColor, @outerColor); - background-repeat: no-repeat; - } - .striped(@color, @angle: 45deg) { - background-color: @color; - background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent)); - background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); - background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); - background-image: -o-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); - background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); - } -} -// Reset filters for IE -.reset-filter() { - filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)")); -} - - - -// COMPONENT MIXINS -// -------------------------------------------------- - -// Horizontal dividers -// ------------------------- -// Dividers (basically an hr) within dropdowns and nav lists -.nav-divider(@top: #e5e5e5, @bottom: @white) { -// IE7 needs a set width since we gave a height. Restricting just -// to IE7 to keep the 1px left/right space in other browsers. -// It is unclear where IE is getting the extra space that we need -// to negative-margin away, but so it goes. - *width: 100%; - height: 1px; - margin: ((@baseLineHeight / 2) - 1) 1px; // 8px 1px - *margin: -5px 0 5px; - overflow: hidden; - background-color: @top; - border-bottom: 1px solid @bottom; -} - -// Button backgrounds -// ------------------ - .buttonBackground(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) { -// gradientBar will set the background to a pleasing blend of these, to support IE<=9 - .gradientBar(@startColor, @endColor, @textColor, @textShadow); - *background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ - .reset-filter(); - -// in these cases the gradient won't cover the background, so we override -&:hover, &:active, &.active, &.disabled, &[disabled] { - color: @textColor; - background-color: @endColor; - *background-color: darken(@endColor, 5%); -} - -// IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves -&:active, -&.active { - background-color: darken(@endColor, 10%) e("\9"); -} -} - -// Navbar vertical align -// ------------------------- -// Vertically center elements in the navbar. -// Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin. -.navbarVerticalAlign(@elementHeight) { - margin-top: (@navbarHeight - @elementHeight) / 2; -} - - - -// Grid System -// ----------- - -// Centered container element -.container-fixed() { - margin-right: auto; - margin-left: auto; - .clearfix(); -} - -// Table columns -.tableColumns(@columnSpan: 1) { - float: none; // undo default grid column styles - width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells - margin-left: 0; // undo default grid column styles -} - -// Make a Grid -// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior -.makeRow() { - margin-left: @gridGutterWidth * -1; - .clearfix(); -} -.makeColumn(@columns: 1, @offset: 0) { - float: left; - margin-left: (@gridColumnWidth * @offset) + (@gridGutterWidth * (@offset - 1)) + (@gridGutterWidth * 2); - width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); -} - -// The Grid -#grid { - - .core (@gridColumnWidth, @gridGutterWidth) { - - .spanX (@index) when (@index > 0) { - (~".span@{index}") { .span(@index); } - .spanX(@index - 1); - } - .spanX (0) {} - - .offsetX (@index) when (@index > 0) { - (~".offset@{index}") { .offset(@index); } - .offsetX(@index - 1); - } - .offsetX (0) {} - - .offset (@columns) { - margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns + 1)); - } - - .span (@columns) { - width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); - } - - .row { - margin-left: @gridGutterWidth * -1; - .clearfix(); - } - - [class*="span"] { - float: left; - margin-left: @gridGutterWidth; - } - - // Set the container width, and override it for fixed navbars in media queries - .container, - .navbar-static-top .container, - .navbar-fixed-top .container, - .navbar-fixed-bottom .container { .span(@gridColumns); } - - // generate .spanX and .offsetX - .spanX (@gridColumns); - .offsetX (@gridColumns); - - } - - .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) { - - .spanX (@index) when (@index > 0) { - (~".span@{index}") { .span(@index); } - .spanX(@index - 1); - } - .spanX (0) {} - - .offsetX (@index) when (@index > 0) { - (~'.offset@{index}') { .offset(@index); } - (~'.offset@{index}:first-child') { .offsetFirstChild(@index); } - .offsetX(@index - 1); - } - .offsetX (0) {} - - .offset (@columns) { - margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth*2); - *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + (@fluidGridGutterWidth*2) - (.5 / @gridRowWidth * 100 * 1%); - } - - .offsetFirstChild (@columns) { - margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth); - *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%); - } - - .span (@columns) { - width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)); - *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%); - } - - .row-fluid { - width: 100%; - .clearfix(); - [class*="span"] { - .input-block-level(); - float: left; - margin-left: @fluidGridGutterWidth; - *margin-left: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%); - } - [class*="span"]:first-child { - margin-left: 0; - } - - // generate .spanX and .offsetX - .spanX (@gridColumns); - .offsetX (@gridColumns); - } - - } - - .input(@gridColumnWidth, @gridGutterWidth) { - - .spanX (@index) when (@index > 0) { - (~"input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index}") { .span(@index); } - .spanX(@index - 1); - } - .spanX (0) {} - - .span(@columns) { - width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 14; - } - - input, - textarea, - .uneditable-input { - margin-left: 0; // override margin-left from core grid system - } - - // Space grid-sized controls properly if multiple per line - .controls-row [class*="span"] + [class*="span"] { - margin-left: @gridGutterWidth; - } - - // generate .spanX - .spanX (@gridColumns); - - } - -} -// -// Scaffolding -// -------------------------------------------------- - - -// Body reset -// ------------------------- - -body { - margin: 0; - font-family: @baseFontFamily; - font-size: @baseFontSize; - line-height: @baseLineHeight; - color: @textColor; - background-color: @bodyBackground; -} - - -// Links -// ------------------------- - -a { - color: @linkColor; - text-decoration: none; -} -a:hover { - color: @linkColorHover; - text-decoration: underline; -} - - -// Images -// ------------------------- - -.img-rounded { - .border-radius(6px); -} - -.img-polaroid { - padding: 4px; - background-color: #fff; - border: 1px solid #ccc; - border: 1px solid rgba(0,0,0,.2); - -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.1); - -moz-box-shadow: 0 1px 3px rgba(0,0,0,.1); - box-shadow: 0 1px 3px rgba(0,0,0,.1); -} - -.img-circle { - .border-radius(500px); -} -// -// Grid system -// -------------------------------------------------- - - -// Fixed (940px) -#grid > .core(@gridColumnWidth, @gridGutterWidth); - -// Fluid (940px) -#grid > .fluid(@fluidGridColumnWidth, @fluidGridGutterWidth); - -// Reset utility classes due to specificity -[class*="span"].hide, -.row-fluid [class*="span"].hide { - display: none; -} - -[class*="span"].pull-right, -.row-fluid [class*="span"].pull-right { - float: right; -} -// -// Layouts -// -------------------------------------------------- - - -// Container (centered, fixed-width layouts) -.container { - .container-fixed(); -} - -// Fluid layouts (left aligned, with sidebar, min- & max-width content) -.container-fluid { - padding-right: @gridGutterWidth; - padding-left: @gridGutterWidth; - .clearfix(); -}// -// Typography -// -------------------------------------------------- - - -// Body text -// ------------------------- - -p { - margin: 0 0 @baseLineHeight / 2; -} -.lead { - margin-bottom: @baseLineHeight; - font-size: 20px; - font-weight: 200; - line-height: @baseLineHeight * 1.5; -} - - -// Emphasis & misc -// ------------------------- - -small { - font-size: 85%; // Ex: 14px base font * 85% = about 12px -} -strong { - font-weight: bold; -} -em { - font-style: italic; -} -cite { - font-style: normal; -} -.muted { - color: @grayLight; -} - - -// Headings -// ------------------------- - -h1, h2, h3, h4, h5, h6 { - margin: (@baseLineHeight / 2) 0; - font-family: @headingsFontFamily; - font-weight: @headingsFontWeight; - line-height: 1; - color: @headingsColor; - text-rendering: optimizelegibility; // Fix the character spacing for headings - small { - font-weight: normal; - line-height: 1; - color: @grayLight; - } -} -h1 { font-size: 36px; line-height: 40px; } -h2 { font-size: 30px; line-height: 40px; } -h3 { font-size: 24px; line-height: 40px; } -h4 { font-size: 18px; line-height: 20px; } -h5 { font-size: 14px; line-height: 20px; } -h6 { font-size: 12px; line-height: 20px; } - -h1 small { font-size: 24px; } -h2 small { font-size: 18px; } -h3 small { font-size: 14px; } -h4 small { font-size: 14px; } - - -// Page header -// ------------------------- - -.page-header { - padding-bottom: (@baseLineHeight / 2) - 1; - margin: @baseLineHeight 0 (@baseLineHeight * 1.5); - border-bottom: 1px solid @grayLighter; -} - - - -// Lists -// -------------------------------------------------- - -// Unordered and Ordered lists -ul, ol { - padding: 0; - margin: 0 0 @baseLineHeight / 2 25px; -} -ul ul, -ul ol, -ol ol, -ol ul { - margin-bottom: 0; -} -li { - line-height: @baseLineHeight; -} -ul.unstyled, -ol.unstyled { - margin-left: 0; - list-style: none; -} - -// Description Lists -dl { - margin-bottom: @baseLineHeight; -} -dt, -dd { - line-height: @baseLineHeight; -} -dt { - font-weight: bold; -} -dd { - margin-left: @baseLineHeight / 2; -} -// Horizontal layout (like forms) -.dl-horizontal { - dt { - float: left; - width: 120px; - clear: left; - text-align: right; - .text-overflow(); - } - dd { - margin-left: 130px; - } -} - -// MISC -// ---- - -// Horizontal rules -hr { - margin: @baseLineHeight 0; - border: 0; - border-top: 1px solid @hrBorder; - border-bottom: 1px solid @white; -} - -// Abbreviations and acronyms -abbr[title] { - cursor: help; - border-bottom: 1px dotted @grayLight; -} -abbr.initialism { - font-size: 90%; - text-transform: uppercase; -} - -// Blockquotes -blockquote { - padding: 0 0 0 15px; - margin: 0 0 @baseLineHeight; - border-left: 5px solid @grayLighter; - p { - margin-bottom: 0; - #font > .shorthand(16px,300,@baseLineHeight * 1.25); - } - small { - display: block; - line-height: @baseLineHeight; - color: @grayLight; - &:before { - content: '\2014 \00A0'; - } - } - -// Float right with text-align: right - &.pull-right { - float: right; - padding-right: 15px; - padding-left: 0; - border-right: 5px solid @grayLighter; - border-left: 0; - p, - small { - text-align: right; - } - small { - &:before { - content: ''; - } - &:after { - content: '\00A0 \2014'; - } - } - } -} - -// Quotes -q:before, -q:after, -blockquote:before, -blockquote:after { - content: ""; -} - -// Addresses -address { - display: block; - margin-bottom: @baseLineHeight; - font-style: normal; - line-height: @baseLineHeight; -} -// -// Code (inline and blocK) -// -------------------------------------------------- - - -// Inline and block code styles -code, -pre { - padding: 0 3px 2px; - #font > #family > .monospace; - font-size: @baseFontSize - 2; - color: @grayDark; - .border-radius(3px); -} - -// Inline code -code { - padding: 2px 4px; - color: #d14; - background-color: #f7f7f9; - border: 1px solid #e1e1e8; -} - -// Blocks of code -pre { - display: block; - padding: (@baseLineHeight - 1) / 2; - margin: 0 0 @baseLineHeight / 2; - font-size: @baseFontSize - 1; // 14px to 13px - line-height: @baseLineHeight; - word-break: break-all; - word-wrap: break-word; - white-space: pre; - white-space: pre-wrap; - background-color: #f5f5f5; - border: 1px solid #ccc; // fallback for IE7-8 - border: 1px solid rgba(0,0,0,.15); - .border-radius(4px); - -// Make prettyprint styles more spaced out for readability - &.prettyprint { - margin-bottom: @baseLineHeight; - } - -// Account for some code outputs that place code tags in pre tags - code { - padding: 0; - color: inherit; - background-color: transparent; - border: 0; - } -} - -// Enable scrollable blocks of code -.pre-scrollable { - max-height: 340px; - overflow-y: scroll; -}// -// Forms -// -------------------------------------------------- - - -// GENERAL STYLES -// -------------- - -// Make all forms have space below them -form { - margin: 0 0 @baseLineHeight; -} - -fieldset { - padding: 0; - margin: 0; - border: 0; -} - -// Groups of fields with labels on top (legends) -legend { - display: block; - width: 100%; - padding: 0; - margin-bottom: @baseLineHeight; - font-size: @baseFontSize * 1.5; - line-height: @baseLineHeight * 2; - color: @grayDark; - border: 0; - border-bottom: 1px solid #e5e5e5; - -// Small - small { - font-size: @baseLineHeight * .75; - color: @grayLight; - } -} - -// Set font for forms -label, -input, -button, -select, -textarea { - #font > .shorthand(@baseFontSize,normal,@baseLineHeight); // Set size, weight, line-height here -} -input, -button, -select, -textarea { - font-family: @baseFontFamily; // And only set font-family here for those that need it (note the missing label element) -} - -// Identify controls by their labels -label { - display: block; - margin-bottom: 5px; -} - -// Form controls -// ------------------------- - -// Shared size and type resets -select, -textarea, -input[type="text"], -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 { - display: inline-block; - height: @baseLineHeight; - padding: 4px 6px; - margin-bottom: 9px; - font-size: @baseFontSize; - line-height: @baseLineHeight; - color: @gray; - .border-radius(@inputBorderRadius); -} - -// Reset appearance properties for textual inputs and textarea -// Declare width for legacy (can't be on input[type=*] selectors or it's too specific) -input, -textarea { - width: 210px; -} -// Reset height since textareas have rows -textarea { - height: auto; -} -// Everything else -textarea, -input[type="text"], -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 { - background-color: @inputBackground; - border: 1px solid @inputBorder; - .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); - .transition(~"border linear .2s, box-shadow linear .2s"); - -// Focus state - &:focus { - border-color: rgba(82,168,236,.8); - outline: 0; - outline: thin dotted \9; /* IE6-9 */ - .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)"); - } -} - -// Position radios and checkboxes better -input[type="radio"], -input[type="checkbox"] { - margin: 4px 0 0; - *margin-top: 0; /* IE7 */ - margin-top: 1px \9; /* IE8-9 */ - line-height: normal; - cursor: pointer; -} - -// Reset width of input images, buttons, radios, checkboxes -input[type="file"], -input[type="image"], -input[type="submit"], -input[type="reset"], -input[type="button"], -input[type="radio"], -input[type="checkbox"] { - width: auto; // Override of generic input selector -} - -// Set the height of select and file controls to match text inputs -select, -input[type="file"] { - height: 30px; /* In IE7, the height of the select element cannot be changed by height, only font-size */ - *margin-top: 4px; /* For IE7, add top margin to align select with labels */ - line-height: 30px; -} - -// Make select elements obey height by applying a border -select { - width: 220px; // default input width + 10px of padding that doesn't get applied - border: 1px solid #bbb; - background-color: @inputBackground; // Chrome on Linux and Mobile Safari need background-color -} - -// Make multiple select elements height not fixed -select[multiple], -select[size] { - height: auto; -} - -// Focus for select, file, radio, and checkbox -select:focus, -input[type="file"]:focus, -input[type="radio"]:focus, -input[type="checkbox"]:focus { - .tab-focus(); -} - - -// Uneditable inputs -// ------------------------- - -// Make uneditable inputs look inactive -.uneditable-input, -.uneditable-textarea { - color: @grayLight; - background-color: darken(@inputBackground, 1%); - border-color: @inputBorder; - .box-shadow(inset 0 1px 2px rgba(0,0,0,.025)); - cursor: not-allowed; -} - -// For text that needs to appear as an input but should not be an input -.uneditable-input { - overflow: hidden; // prevent text from wrapping, but still cut it off like an input does - white-space: nowrap; -} - -// Make uneditable textareas behave like a textarea -.uneditable-textarea { - width: auto; - height: auto; -} - - -// Placeholder -// ------------------------- - -// Placeholder text gets special styles; can't be bundled together though for some reason -input, -textarea { - .placeholder(); -} - - -// CHECKBOXES & RADIOS -// ------------------- - -// Indent the labels to position radios/checkboxes as hanging -.radio, -.checkbox { - min-height: 18px; // clear the floating input if there is no label text - padding-left: 18px; -} -.radio input[type="radio"], -.checkbox input[type="checkbox"] { - float: left; - margin-left: -18px; -} - -// Move the options list down to align with labels -.controls > .radio:first-child, -.controls > .checkbox:first-child { - padding-top: 5px; // has to be padding because margin collaspes -} - -// Radios and checkboxes on same line -// TODO v3: Convert .inline to .control-inline -.radio.inline, -.checkbox.inline { - display: inline-block; - padding-top: 5px; - margin-bottom: 0; - vertical-align: middle; -} -.radio.inline + .radio.inline, -.checkbox.inline + .checkbox.inline { - margin-left: 10px; // space out consecutive inline controls -} - - - -// INPUT SIZES -// ----------- - -// General classes for quick sizes -.input-mini { width: 60px; } -.input-small { width: 90px; } -.input-medium { width: 150px; } -.input-large { width: 210px; } -.input-xlarge { width: 270px; } -.input-xxlarge { width: 530px; } - -// Grid style input sizes -input[class*="span"], -select[class*="span"], -textarea[class*="span"], -.uneditable-input[class*="span"], -// Redeclare since the fluid row class is more specific -.row-fluid input[class*="span"], -.row-fluid select[class*="span"], -.row-fluid textarea[class*="span"], -.row-fluid .uneditable-input[class*="span"] { - float: none; - margin-left: 0; -} -// Ensure input-prepend/append never wraps -.input-append input[class*="span"], -.input-append .uneditable-input[class*="span"], -.input-prepend input[class*="span"], -.input-prepend .uneditable-input[class*="span"], -.row-fluid input[class*="span"], -.row-fluid select[class*="span"], -.row-fluid textarea[class*="span"], -.row-fluid .uneditable-input[class*="span"], -.row-fluid .input-prepend [class*="span"], -.row-fluid .input-append [class*="span"] { - display: inline-block; -} - - - -// GRID SIZING FOR INPUTS -// ---------------------- - -// Grid sizes -#grid > .input(@gridColumnWidth, @gridGutterWidth); - -// Control row for multiple inputs per line -.controls-row { - .clearfix(); // Clear the float from controls -} -.controls-row [class*="span"] { - float: left; // Float to collapse white-space for proper grid alignment -} - - - - -// DISABLED STATE -// -------------- - -// Disabled and read-only inputs -input[disabled], -select[disabled], -textarea[disabled], -input[readonly], -select[readonly], -textarea[readonly] { - cursor: not-allowed; - background-color: @inputDisabledBackground; -} -// Explicitly reset the colors here -input[type="radio"][disabled], -input[type="checkbox"][disabled], -input[type="radio"][readonly], -input[type="checkbox"][readonly] { - background-color: transparent; -} - - - - -// FORM FIELD FEEDBACK STATES -// -------------------------- - -// Warning -.control-group.warning { - .formFieldState(@warningText, @warningText, @warningBackground); -} -// Error -.control-group.error { - .formFieldState(@errorText, @errorText, @errorBackground); -} -// Success -.control-group.success { - .formFieldState(@successText, @successText, @successBackground); -} - -// HTML5 invalid states -// Shares styles with the .control-group.error above -input:focus:required:invalid, -textarea:focus:required:invalid, -select:focus:required:invalid { - color: #b94a48; - border-color: #ee5f5b; - &:focus { - border-color: darken(#ee5f5b, 10%); - .box-shadow(0 0 6px lighten(#ee5f5b, 20%)); - } -} - - - -// FORM ACTIONS -// ------------ - -.form-actions { - padding: (@baseLineHeight - 1) 20px @baseLineHeight; - margin-top: @baseLineHeight; - margin-bottom: @baseLineHeight; - background-color: @formActionsBackground; - border-top: 1px solid #e5e5e5; - .clearfix(); // Adding clearfix to allow for .pull-right button containers -} - - - -// HELP TEXT -// --------- - -.help-block, -.help-inline { - color: lighten(@textColor, 15%); // lighten the text some for contrast -} - -.help-block { - display: block; // account for any element using help-block - margin-bottom: @baseLineHeight / 2; -} - -.help-inline { - display: inline-block; - .ie7-inline-block(); - vertical-align: middle; - padding-left: 5px; -} - - - -// INPUT GROUPS -// ------------ - -// Allow us to put symbols and text within the input field for a cleaner look -.input-append, -.input-prepend { - margin-bottom: 5px; - font-size: 0; - white-space: nowrap; // Prevent span and input from separating - - input, - select, - .uneditable-input { - position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness - margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms - *margin-left: 0; - font-size: @baseFontSize; - vertical-align: top; - .border-radius(0 @inputBorderRadius @inputBorderRadius 0); - // Make input on top when focused so blue border and shadow always show - &:focus { - z-index: 2; - } - } - .add-on { - display: inline-block; - width: auto; - height: @baseLineHeight; - min-width: 16px; - padding: 4px 5px; - font-size: @baseFontSize; - font-weight: normal; - line-height: @baseLineHeight; - text-align: center; - text-shadow: 0 1px 0 @white; - background-color: @grayLighter; - border: 1px solid #ccc; - } - .add-on, - .btn { - margin-left: -1px; - vertical-align: top; - .border-radius(0); - } - .active { - background-color: lighten(@green, 30); - border-color: @green; - } -} -.input-prepend { - .add-on, - .btn { - margin-right: -1px; - } - .add-on:first-child, - .btn:first-child { - .border-radius(@inputBorderRadius 0 0 @inputBorderRadius); - } -} -.input-append { - input, - select, - .uneditable-input { - .border-radius(@inputBorderRadius 0 0 @inputBorderRadius); - } - .add-on:last-child, - .btn:last-child { - .border-radius(0 @inputBorderRadius @inputBorderRadius 0); - } -} -// Remove all border-radius for inputs with both prepend and append -.input-prepend.input-append { - input, - select, - .uneditable-input { - .border-radius(0); - } - .add-on:first-child, - .btn:first-child { - margin-right: -1px; - .border-radius(@inputBorderRadius 0 0 @inputBorderRadius); - } - .add-on:last-child, - .btn:last-child { - margin-left: -1px; - .border-radius(0 @inputBorderRadius @inputBorderRadius 0); - } -} - - - -// SEARCH FORM -// ----------- - -input.search-query { - padding-right: 14px; - padding-right: 4px \9; - padding-left: 14px; - padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */ - margin-bottom: 0; // Remove the default margin on all inputs - .border-radius(15px); -} - -/* Allow for input prepend/append in search forms */ -.form-search .input-append .search-query, -.form-search .input-prepend .search-query { - .border-radius(0); // Override due to specificity -} -.form-search .input-append .search-query { - .border-radius(14px 0 0 14px) -} -.form-search .input-append .btn { - .border-radius(0 14px 14px 0) -} -.form-search .input-prepend .search-query { - .border-radius(0 14px 14px 0) -} -.form-search .input-prepend .btn { - .border-radius(14px 0 0 14px) -} - - - - -// HORIZONTAL & VERTICAL FORMS -// --------------------------- - -// Common properties -// ----------------- - -.form-search, -.form-inline, -.form-horizontal { - input, - textarea, - select, - .help-inline, - .uneditable-input, - .input-prepend, - .input-append { - display: inline-block; - .ie7-inline-block(); - margin-bottom: 0; - vertical-align: middle; - } -// Re-hide hidden elements due to specifity - .hide { - display: none; - } -} -.form-search label, -.form-inline label, -.form-search .btn-group, -.form-inline .btn-group { - display: inline-block; -} -// Remove margin for input-prepend/-append -.form-search .input-append, -.form-inline .input-append, -.form-search .input-prepend, -.form-inline .input-prepend { - margin-bottom: 0; -} -// Inline checkbox/radio labels (remove padding on left) -.form-search .radio, -.form-search .checkbox, -.form-inline .radio, -.form-inline .checkbox { - padding-left: 0; - margin-bottom: 0; - vertical-align: middle; -} -// Remove float and margin, set to inline-block -.form-search .radio input[type="radio"], -.form-search .checkbox input[type="checkbox"], -.form-inline .radio input[type="radio"], -.form-inline .checkbox input[type="checkbox"] { - float: left; - margin-right: 3px; - margin-left: 0; -} - - -// Margin to space out fieldsets -.control-group { - margin-bottom: @baseLineHeight / 2; -} - -// Legend collapses margin, so next element is responsible for spacing -legend + .control-group { - margin-top: @baseLineHeight; - -webkit-margin-top-collapse: separate; -} - -// Horizontal-specific styles -// -------------------------- - -.form-horizontal { -// Increase spacing between groups - .control-group { - margin-bottom: @baseLineHeight; - .clearfix(); - } -// Float the labels left - .control-label { - float: left; - width: 140px; - padding-top: 5px; - text-align: right; - } -// Move over all input controls and content - .controls { - // Super jank IE7 fix to ensure the inputs in .input-append and input-prepend - // don't inherit the margin of the parent, in this case .controls - *display: inline-block; - *padding-left: 20px; - margin-left: 160px; - *margin-left: 0; - &:first-child { - *padding-left: 160px; - } - } -// Remove bottom margin on block level help text since that's accounted for on .control-group - .help-block { - margin-top: @baseLineHeight / 2; - margin-bottom: 0; - } -// Move over buttons in .form-actions to align with .controls - .form-actions { - padding-left: 160px; - } -} -// -// Tables -// -------------------------------------------------- - - -// BASE TABLES -// ----------------- - -table { - max-width: 100%; - background-color: @tableBackground; - border-collapse: collapse; - border-spacing: 0; -} - -// BASELINE STYLES -// --------------- - -.table { - width: 100%; - margin-bottom: @baseLineHeight; -// Cells - th, - td { - padding: 8px; - line-height: @baseLineHeight; - text-align: left; - vertical-align: top; - border-top: 1px solid @tableBorder; - } - th { - font-weight: bold; - } -// Bottom align for column headings - thead th { - vertical-align: bottom; - } -// Remove top border from thead by default - caption + thead tr:first-child th, - caption + thead tr:first-child td, - colgroup + thead tr:first-child th, - colgroup + thead tr:first-child td, - thead:first-child tr:first-child th, - thead:first-child tr:first-child td { - border-top: 0; - } -// Account for multiple tbody instances - tbody + tbody { - border-top: 2px solid @tableBorder; - } -} - - - -// CONDENSED TABLE W/ HALF PADDING -// ------------------------------- - -.table-condensed { - th, - td { - padding: 4px 5px; - } -} - - -// BORDERED VERSION -// ---------------- - -.table-bordered { - border: 1px solid @tableBorder; - border-collapse: separate; // Done so we can round those corners! - *border-collapse: collapse; // IE7 can't round corners anyway - border-left: 0; - .border-radius(4px); - th, - td { - border-left: 1px solid @tableBorder; - } -// Prevent a double border - caption + thead tr:first-child th, - caption + tbody tr:first-child th, - caption + tbody tr:first-child td, - colgroup + thead tr:first-child th, - colgroup + tbody tr:first-child th, - colgroup + tbody tr:first-child td, - thead:first-child tr:first-child th, - tbody:first-child tr:first-child th, - tbody:first-child tr:first-child td { - border-top: 0; - } -// For first th or td in the first row in the first thead or tbody - thead:first-child tr:first-child th:first-child, - tbody:first-child tr:first-child td:first-child { - -webkit-border-top-left-radius: 4px; - border-top-left-radius: 4px; - -moz-border-radius-topleft: 4px; - } - thead:first-child tr:first-child th:last-child, - tbody:first-child tr:first-child td:last-child { - -webkit-border-top-right-radius: 4px; - border-top-right-radius: 4px; - -moz-border-radius-topright: 4px; - } -// For first th or td in the first row in the first thead or tbody - thead:last-child tr:last-child th:first-child, - tbody:last-child tr:last-child td:first-child, - tfoot:last-child tr:last-child td:first-child { - .border-radius(0 0 0 4px); - -webkit-border-bottom-left-radius: 4px; - border-bottom-left-radius: 4px; - -moz-border-radius-bottomleft: 4px; - } - thead:last-child tr:last-child th:last-child, - tbody:last-child tr:last-child td:last-child, - tfoot:last-child tr:last-child td:last-child { - -webkit-border-bottom-right-radius: 4px; - border-bottom-right-radius: 4px; - -moz-border-radius-bottomright: 4px; - } - -// Special fixes to round the left border on the first td/th - caption + thead tr:first-child th:first-child, - caption + tbody tr:first-child td:first-child, - colgroup + thead tr:first-child th:first-child, - colgroup + tbody tr:first-child td:first-child { - -webkit-border-top-left-radius: 4px; - border-top-left-radius: 4px; - -moz-border-radius-topleft: 4px; - } - caption + thead tr:first-child th:last-child, - caption + tbody tr:first-child td:last-child, - colgroup + thead tr:first-child th:last-child, - colgroup + tbody tr:first-child td:last-child { - -webkit-border-top-right-radius: 4px; - border-top-right-radius: 4px; - -moz-border-right-topleft: 4px; - } - -} - - - - -// ZEBRA-STRIPING -// -------------- - -// Default zebra-stripe styles (alternating gray and transparent backgrounds) -.table-striped { - tbody { - tr:nth-child(odd) td, - tr:nth-child(odd) th { - background-color: @tableBackgroundAccent; - } - } -} - - -// HOVER EFFECT -// ------------ -// Placed here since it has to come after the potential zebra striping -.table-hover { - tbody { - tr:hover td, - tr:hover th { - background-color: @tableBackgroundHover; - } - } -} - - -// TABLE CELL SIZING -// ----------------- - -// Reset default grid behavior -table [class*=span], -.row-fluid table [class*=span] { - display: table-cell; - float: none; // undo default grid column styles - margin-left: 0; // undo default grid column styles -} - -// Change the column widths to account for td/th padding -table { - .span1 { .tableColumns(1); } - .span2 { .tableColumns(2); } - .span3 { .tableColumns(3); } - .span4 { .tableColumns(4); } - .span5 { .tableColumns(5); } - .span6 { .tableColumns(6); } - .span7 { .tableColumns(7); } - .span8 { .tableColumns(8); } - .span9 { .tableColumns(9); } - .span10 { .tableColumns(10); } - .span11 { .tableColumns(11); } - .span12 { .tableColumns(12); } - .span13 { .tableColumns(13); } - .span14 { .tableColumns(14); } - .span15 { .tableColumns(15); } - .span16 { .tableColumns(16); } - .span17 { .tableColumns(17); } - .span18 { .tableColumns(18); } - .span19 { .tableColumns(19); } - .span20 { .tableColumns(20); } - .span21 { .tableColumns(21); } - .span22 { .tableColumns(22); } - .span23 { .tableColumns(23); } - .span24 { .tableColumns(24); } -} - - -// TABLE BACKGROUNDS -// ----------------- -// Exact selectors below required to override .table-striped - -.table { - tbody tr.success td { - background-color: @successBackground; - } - tbody tr.error td { - background-color: @errorBackground; - } - tbody tr.info td { - background-color: @infoBackground; - } -} -// -// Sprites -// -------------------------------------------------- - - -// ICONS -// ----- - -// All icons receive the styles of the <i> tag with a base class -// of .i and are then given a unique class to add width, height, -// and background-position. Your resulting HTML will look like -// <i class="icon-inbox"></i>. - -// For the white version of the icons, just add the .icon-white class: -// <i class="icon-inbox icon-white"></i> - -[class^="icon-"], -[class*=" icon-"] { - display: inline-block; - width: 14px; - height: 14px; - .ie7-restore-right-whitespace(); - line-height: 14px; - vertical-align: text-top; - background-image: url("@{iconSpritePath}"); - background-position: 14px 14px; - background-repeat: no-repeat; - margin-top: 1px; -} - -/* White icons with optional class, or on hover/active states of certain elements */ -.icon-white, -.nav > .active > a > [class^="icon-"], -.nav > .active > a > [class*=" icon-"], -.dropdown-menu > li > a:hover > [class^="icon-"], -.dropdown-menu > li > a:hover > [class*=" icon-"], -.dropdown-menu > .active > a > [class^="icon-"], -.dropdown-menu > .active > a > [class*=" icon-"] { - background-image: url("@{iconWhiteSpritePath}"); -} - -.icon-glass { background-position: 0 0; } -.icon-music { background-position: -24px 0; } -.icon-search { background-position: -48px 0; } -.icon-envelope { background-position: -72px 0; } -.icon-heart { background-position: -96px 0; } -.icon-star { background-position: -120px 0; } -.icon-star-empty { background-position: -144px 0; } -.icon-user { background-position: -168px 0; } -.icon-film { background-position: -192px 0; } -.icon-th-large { background-position: -216px 0; } -.icon-th { background-position: -240px 0; } -.icon-th-list { background-position: -264px 0; } -.icon-ok { background-position: -288px 0; } -.icon-remove { background-position: -312px 0; } -.icon-zoom-in { background-position: -336px 0; } -.icon-zoom-out { background-position: -360px 0; } -.icon-off { background-position: -384px 0; } -.icon-signal { background-position: -408px 0; } -.icon-cog { background-position: -432px 0; } -.icon-trash { background-position: -456px 0; } - -.icon-home { background-position: 0 -24px; } -.icon-file { background-position: -24px -24px; } -.icon-time { background-position: -48px -24px; } -.icon-road { background-position: -72px -24px; } -.icon-download-alt { background-position: -96px -24px; } -.icon-download { background-position: -120px -24px; } -.icon-upload { background-position: -144px -24px; } -.icon-inbox { background-position: -168px -24px; } -.icon-play-circle { background-position: -192px -24px; } -.icon-repeat { background-position: -216px -24px; } -.icon-refresh { background-position: -240px -24px; } -.icon-list-alt { background-position: -264px -24px; } -.icon-lock { background-position: -287px -24px; } // 1px off -.icon-flag { background-position: -312px -24px; } -.icon-headphones { background-position: -336px -24px; } -.icon-volume-off { background-position: -360px -24px; } -.icon-volume-down { background-position: -384px -24px; } -.icon-volume-up { background-position: -408px -24px; } -.icon-qrcode { background-position: -432px -24px; } -.icon-barcode { background-position: -456px -24px; } - -.icon-tag { background-position: 0 -48px; } -.icon-tags { background-position: -25px -48px; } // 1px off -.icon-book { background-position: -48px -48px; } -.icon-bookmark { background-position: -72px -48px; } -.icon-print { background-position: -96px -48px; } -.icon-camera { background-position: -120px -48px; } -.icon-font { background-position: -144px -48px; } -.icon-bold { background-position: -167px -48px; } // 1px off -.icon-italic { background-position: -192px -48px; } -.icon-text-height { background-position: -216px -48px; } -.icon-text-width { background-position: -240px -48px; } -.icon-align-left { background-position: -264px -48px; } -.icon-align-center { background-position: -288px -48px; } -.icon-align-right { background-position: -312px -48px; } -.icon-align-justify { background-position: -336px -48px; } -.icon-list { background-position: -360px -48px; } -.icon-indent-left { background-position: -384px -48px; } -.icon-indent-right { background-position: -408px -48px; } -.icon-facetime-video { background-position: -432px -48px; } -.icon-picture { background-position: -456px -48px; } - -.icon-pencil { background-position: 0 -72px; } -.icon-map-marker { background-position: -24px -72px; } -.icon-adjust { background-position: -48px -72px; } -.icon-tint { background-position: -72px -72px; } -.icon-edit { background-position: -96px -72px; } -.icon-share { background-position: -120px -72px; } -.icon-check { background-position: -144px -72px; } -.icon-move { background-position: -168px -72px; } -.icon-step-backward { background-position: -192px -72px; } -.icon-fast-backward { background-position: -216px -72px; } -.icon-backward { background-position: -240px -72px; } -.icon-play { background-position: -264px -72px; } -.icon-pause { background-position: -288px -72px; } -.icon-stop { background-position: -312px -72px; } -.icon-forward { background-position: -336px -72px; } -.icon-fast-forward { background-position: -360px -72px; } -.icon-step-forward { background-position: -384px -72px; } -.icon-eject { background-position: -408px -72px; } -.icon-chevron-left { background-position: -432px -72px; } -.icon-chevron-right { background-position: -456px -72px; } - -.icon-plus-sign { background-position: 0 -96px; } -.icon-minus-sign { background-position: -24px -96px; } -.icon-remove-sign { background-position: -48px -96px; } -.icon-ok-sign { background-position: -72px -96px; } -.icon-question-sign { background-position: -96px -96px; } -.icon-info-sign { background-position: -120px -96px; } -.icon-screenshot { background-position: -144px -96px; } -.icon-remove-circle { background-position: -168px -96px; } -.icon-ok-circle { background-position: -192px -96px; } -.icon-ban-circle { background-position: -216px -96px; } -.icon-arrow-left { background-position: -240px -96px; } -.icon-arrow-right { background-position: -264px -96px; } -.icon-arrow-up { background-position: -289px -96px; } // 1px off -.icon-arrow-down { background-position: -312px -96px; } -.icon-share-alt { background-position: -336px -96px; } -.icon-resize-full { background-position: -360px -96px; } -.icon-resize-small { background-position: -384px -96px; } -.icon-plus { background-position: -408px -96px; } -.icon-minus { background-position: -433px -96px; } -.icon-asterisk { background-position: -456px -96px; } - -.icon-exclamation-sign { background-position: 0 -120px; } -.icon-gift { background-position: -24px -120px; } -.icon-leaf { background-position: -48px -120px; } -.icon-fire { background-position: -72px -120px; } -.icon-eye-open { background-position: -96px -120px; } -.icon-eye-close { background-position: -120px -120px; } -.icon-warning-sign { background-position: -144px -120px; } -.icon-plane { background-position: -168px -120px; } -.icon-calendar { background-position: -192px -120px; } -.icon-random { background-position: -216px -120px; width: 16px; } -.icon-comment { background-position: -240px -120px; } -.icon-magnet { background-position: -264px -120px; } -.icon-chevron-up { background-position: -288px -120px; } -.icon-chevron-down { background-position: -313px -119px; } // 1px, 1px off -.icon-retweet { background-position: -336px -120px; } -.icon-shopping-cart { background-position: -360px -120px; } -.icon-folder-close { background-position: -384px -120px; } -.icon-folder-open { background-position: -408px -120px; width: 16px; } -.icon-resize-vertical { background-position: -432px -119px; } // 1px, 1px off -.icon-resize-horizontal { background-position: -456px -118px; } // 1px, 2px off - -.icon-hdd { background-position: 0 -144px; } -.icon-bullhorn { background-position: -24px -144px; } -.icon-bell { background-position: -48px -144px; } -.icon-certificate { background-position: -72px -144px; } -.icon-thumbs-up { background-position: -96px -144px; } -.icon-thumbs-down { background-position: -120px -144px; } -.icon-hand-right { background-position: -144px -144px; } -.icon-hand-left { background-position: -168px -144px; } -.icon-hand-up { background-position: -192px -144px; } -.icon-hand-down { background-position: -216px -144px; } -.icon-circle-arrow-right { background-position: -240px -144px; } -.icon-circle-arrow-left { background-position: -264px -144px; } -.icon-circle-arrow-up { background-position: -288px -144px; } -.icon-circle-arrow-down { background-position: -312px -144px; } -.icon-globe { background-position: -336px -144px; } -.icon-wrench { background-position: -360px -144px; } -.icon-tasks { background-position: -384px -144px; } -.icon-filter { background-position: -408px -144px; } -.icon-briefcase { background-position: -432px -144px; } -.icon-fullscreen { background-position: -456px -144px; } -// -// Dropdown menus -// -------------------------------------------------- - - -// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns -.dropup, -.dropdown { - position: relative; -} -.dropdown-toggle { -// The caret makes the toggle a bit too tall in IE7 - *margin-bottom: -3px; -} -.dropdown-toggle:active, -.open .dropdown-toggle { - outline: 0; -} - -// Dropdown arrow/caret -// -------------------- -.caret { - display: inline-block; - width: 0; - height: 0; - vertical-align: top; - border-top: 4px solid @black; - border-right: 4px solid transparent; - border-left: 4px solid transparent; - content: ""; -} - -// Place the caret -.dropdown .caret { - margin-top: 8px; - margin-left: 2px; -} - -// The dropdown menu (ul) -// ---------------------- -.dropdown-menu { - position: absolute; - top: 100%; - 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-weight: normal; - line-height: @baseLineHeight; - color: @dropdownLinkColor; - white-space: nowrap; - } -} - -// Hover state -// ----------- -.dropdown-menu li > a:hover, -.dropdown-menu li > 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 > a, -.dropdown-menu .active > 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 > a, -.dropdown-menu .disabled > a:hover { - color: @grayLight; -} -// Nuke hover effects -.dropdown-menu .disabled > a:hover { - text-decoration: none; - background-color: transparent; - cursor: default; -} - -// Open state for the dropdown -// --------------------------- -.open { -// IE7's z-index only goes to the nearest positioned ancestor, which would -// make the menu appear below buttons that appeared later on the page - *z-index: @zindexDropdown; - - & > .dropdown-menu { - display: block; - } -} - -// Right aligned dropdowns -// --------------------------- -.pull-right > .dropdown-menu { - right: 0; - left: auto; -} - -// Allow for dropdowns to go bottom up (aka, dropup-menu) -// ------------------------------------------------------ -// Just add .dropup after the standard .dropdown class and you're set, bro. -// TODO: abstract this so that the navbar fixed styles are not placed here? -.dropup, -.navbar-fixed-bottom .dropdown { -// Reverse the caret - .caret { - border-top: 0; - border-bottom: 4px solid @black; - content: "\2191"; - } -// Different positioning for bottom up menu - .dropdown-menu { - top: auto; - bottom: 100%; - margin-bottom: 1px; - } -} - -// Sub menus -// --------------------------- -.dropdown-submenu { - position: relative; -} -.dropdown-submenu > .dropdown-menu { - top: 0; - left: 100%; - margin-top: -6px; - margin-left: -1px; - -webkit-border-radius: 0 6px 6px 6px; - -moz-border-radius: 0 6px 6px 6px; - border-radius: 0 6px 6px 6px; -} -.dropdown-submenu:hover .dropdown-menu { - display: block; -} - -.dropdown-submenu > a:after { - display: block; - content: " "; - float: right; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - border-width: 5px 0 5px 5px; - border-left-color: darken(@dropdownBackground, 20%); - margin-top: 5px; - margin-right: -10px; -} -.dropdown-submenu:hover > a:after { - border-left-color: @dropdownLinkColorHover; -} - - -// Tweak nav headers -// ----------------- -// Increase padding from 15px to 20px on sides -.dropdown .dropdown-menu .nav-header { - padding-left: 20px; - padding-right: 20px; -} - -// Typeahead -// --------- -.typeahead { - margin-top: 2px; // give it some space to breathe - .border-radius(4px); -} -// -// Wells -// -------------------------------------------------- - - -// Base class -.well { - min-height: 20px; - padding: 19px; - margin-bottom: 20px; - background-color: @wellBackground; - border: 1px solid darken(@wellBackground, 7%); - .border-radius(4px); - .box-shadow(inset 0 1px 1px rgba(0,0,0,.05)); - blockquote { - border-color: #ddd; - border-color: rgba(0,0,0,.15); - } -} - -// Sizes -.well-large { - padding: 24px; - .border-radius(6px); -} -.well-small { - padding: 9px; - .border-radius(3px); -} -// -// Component animations -// -------------------------------------------------- - - -.fade { - opacity: 0; - .transition(opacity .15s linear); - &.in { - opacity: 1; - } -} - -.collapse { - position: relative; - height: 0; - overflow: hidden; - overflow: visible \9; - .transition(height .35s ease); - &.in { - height: auto; - } -} -// -// Close icons -// -------------------------------------------------- - - -.close { - float: right; - font-size: 20px; - font-weight: bold; - line-height: @baseLineHeight; - color: @black; - text-shadow: 0 1px 0 rgba(255,255,255,1); - .opacity(20); - &:hover { - color: @black; - text-decoration: none; - cursor: pointer; - .opacity(40); - } -} - -// Additional properties for button version -// iOS requires the button element instead of an anchor tag. -// If you want the anchor version, it requires `href="#"`. -button.close { - padding: 0; - cursor: pointer; - background: transparent; - border: 0; - -webkit-appearance: none; -}// -// Buttons -// -------------------------------------------------- - - -// Base styles -// -------------------------------------------------- - -// Core -.btn { - display: inline-block; - .ie7-inline-block(); - padding: 4px 14px; - margin-bottom: 0; // For input.btn - font-size: @baseFontSize; - line-height: @baseLineHeight; - *line-height: @baseLineHeight; - text-align: center; - vertical-align: middle; - cursor: pointer; - .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75)); - border: 1px solid @btnBorder; - *border: 0; // Remove the border to prevent IE7's black border on input:focus - border-bottom-color: darken(@btnBorder, 10%); - .border-radius(4px); - .ie7-restore-left-whitespace(); // Give IE7 some love - .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)"); - -// Hover state - &:hover { - color: @grayDark; - text-decoration: none; - background-color: darken(@white, 10%); - *background-color: darken(@white, 15%); /* Buttons in IE7 don't get borders, so darken on hover */ - background-position: 0 -15px; - - // transition is only when going to hover, otherwise the background - // behind the gradient (there for IE<=9 fallback) gets mismatched - .transition(background-position .1s linear); - } - -// Focus state for keyboard and accessibility - &:focus { - .tab-focus(); - } - -// Active state - &.active, - &:active { - background-color: darken(@white, 10%); - background-color: darken(@white, 15%) e("\9"); - background-image: none; - outline: 0; - .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)"); - } - -// Disabled state - &.disabled, - &[disabled] { - cursor: default; - background-color: darken(@white, 10%); - background-image: none; - .opacity(65); - .box-shadow(none); - } - -} - - - -// Button Sizes -// -------------------------------------------------- - -// Large -.btn-large { - padding: 9px 14px; - font-size: @baseFontSize + 2px; - line-height: normal; - .border-radius(5px); -} -.btn-large [class^="icon-"] { - margin-top: 2px; -} - -// Small -.btn-small { - padding: 3px 9px; - font-size: @baseFontSize - 2px; - line-height: @baseLineHeight - 2px; -} -.btn-small [class^="icon-"] { - margin-top: 0; -} - -// Mini -.btn-mini { - padding: 2px 6px; - font-size: @baseFontSize - 3px; - line-height: @baseLineHeight - 4px; -} - -// Block button -.btn-block { - display: block; - width: 100%; - padding-left: 0; - padding-right: 0; - .box-sizing(border-box); -} -.btn-block + .btn-block { - margin-top: 5px; -} - - -// Alternate buttons -// -------------------------------------------------- - -// Provide *some* extra contrast for those who can get it -.btn-primary.active, -.btn-warning.active, -.btn-danger.active, -.btn-success.active, -.btn-info.active, -.btn-inverse.active { - color: rgba(255,255,255,.75); -} - -// Set the backgrounds -// ------------------------- -.btn { -// reset here as of 2.0.3 due to Recess property order - border-color: #c5c5c5; - border-color: rgba(0,0,0,.15) rgba(0,0,0,.15) rgba(0,0,0,.25); -} -.btn-primary { - .buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight); -} -// Warning appears are orange -.btn-warning { - .buttonBackground(@btnWarningBackground, @btnWarningBackgroundHighlight); -} -// Danger and error appear as red -.btn-danger { - .buttonBackground(@btnDangerBackground, @btnDangerBackgroundHighlight); -} -// Success appears as green -.btn-success { - .buttonBackground(@btnSuccessBackground, @btnSuccessBackgroundHighlight); -} -// Info appears as a neutral blue -.btn-info { - .buttonBackground(@btnInfoBackground, @btnInfoBackgroundHighlight); -} -// Inverse appears as dark gray -.btn-inverse { - .buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight); -} - - -// Cross-browser Jank -// -------------------------------------------------- - -button.btn, -input[type="submit"].btn { - -// Firefox 3.6 only I believe - &::-moz-focus-inner { - padding: 0; - border: 0; - } - -// IE7 has some default padding on button controls - *padding-top: 3px; - *padding-bottom: 3px; - - &.btn-large { - *padding-top: 7px; - *padding-bottom: 7px; - } - &.btn-small { - *padding-top: 3px; - *padding-bottom: 3px; - } - &.btn-mini { - *padding-top: 1px; - *padding-bottom: 1px; - } -} - - -// Link buttons -// -------------------------------------------------- - -// Make a button look and behave like a link -.btn-link, -.btn-link:active { - background-color: transparent; - background-image: none; - .box-shadow(none); -} -.btn-link { - border-color: transparent; - cursor: pointer; - color: @linkColor; - .border-radius(0); -} -.btn-link:hover { - color: @linkColorHover; - text-decoration: underline; - background-color: transparent; -} -// -// Button groups -// -------------------------------------------------- - - -// Make the div behave like a button -.btn-group { - position: relative; - font-size: 0; // remove as part 1 of font-size inline-block hack - white-space: nowrap; // prevent buttons from wrapping when in tight spaces (e.g., the table on the tests page) - .ie7-restore-left-whitespace(); -} - -// Space out series of button groups -.btn-group + .btn-group { - margin-left: 5px; -} - -// Optional: Group multiple button groups together for a toolbar -.btn-toolbar { - font-size: 0; // Hack to remove whitespace that results from using inline-block - margin-top: @baseLineHeight / 2; - margin-bottom: @baseLineHeight / 2; - .btn-group { - display: inline-block; - .ie7-inline-block(); - } - .btn + .btn, - .btn-group + .btn, - .btn + .btn-group { - margin-left: 5px; - } -} - -// Float them, remove border radius, then re-add to first and last elements -.btn-group > .btn { - position: relative; - .border-radius(0); -} -.btn-group > .btn + .btn { - margin-left: -1px; -} -.btn-group > .btn, -.btn-group > .dropdown-menu { - font-size: @baseFontSize; // redeclare as part 2 of font-size inline-block hack -} - -// Reset fonts for other sizes -.btn-group > .btn-mini { - font-size: 11px; -} -.btn-group > .btn-small { - font-size: 12px; -} -.btn-group > .btn-large { - font-size: 16px; -} - -// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match -.btn-group > .btn:first-child { - margin-left: 0; - -webkit-border-top-left-radius: 4px; - -moz-border-radius-topleft: 4px; - border-top-left-radius: 4px; - -webkit-border-bottom-left-radius: 4px; - -moz-border-radius-bottomleft: 4px; - border-bottom-left-radius: 4px; -} -// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it -.btn-group > .btn:last-child, -.btn-group > .dropdown-toggle { - -webkit-border-top-right-radius: 4px; - -moz-border-radius-topright: 4px; - border-top-right-radius: 4px; - -webkit-border-bottom-right-radius: 4px; - -moz-border-radius-bottomright: 4px; - border-bottom-right-radius: 4px; -} -// Reset corners for large buttons -.btn-group > .btn.large:first-child { - margin-left: 0; - -webkit-border-top-left-radius: 6px; - -moz-border-radius-topleft: 6px; - border-top-left-radius: 6px; - -webkit-border-bottom-left-radius: 6px; - -moz-border-radius-bottomleft: 6px; - border-bottom-left-radius: 6px; -} -.btn-group > .btn.large:last-child, -.btn-group > .large.dropdown-toggle { - -webkit-border-top-right-radius: 6px; - -moz-border-radius-topright: 6px; - border-top-right-radius: 6px; - -webkit-border-bottom-right-radius: 6px; - -moz-border-radius-bottomright: 6px; - border-bottom-right-radius: 6px; -} - -// On hover/focus/active, bring the proper btn to front -.btn-group > .btn:hover, -.btn-group > .btn:focus, -.btn-group > .btn:active, -.btn-group > .btn.active { - z-index: 2; -} - -// On active and open, don't show outline -.btn-group .dropdown-toggle:active, -.btn-group.open .dropdown-toggle { - outline: 0; -} - - - -// Split button dropdowns -// ---------------------- - -// Give the line between buttons some depth -.btn-group > .btn + .dropdown-toggle { - padding-left: 8px; - padding-right: 8px; - .box-shadow(~"inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)"); - *padding-top: 5px; - *padding-bottom: 5px; -} -.btn-group > .btn-mini + .dropdown-toggle { - padding-left: 5px; - padding-right: 5px; - *padding-top: 2px; - *padding-bottom: 2px; -} -.btn-group > .btn-small + .dropdown-toggle { - *padding-top: 5px; - *padding-bottom: 4px; -} -.btn-group > .btn-large + .dropdown-toggle { - padding-left: 12px; - padding-right: 12px; - *padding-top: 7px; - *padding-bottom: 7px; -} - -.btn-group.open { - -// The clickable button for toggling the menu -// Remove the gradient and set the same inset shadow as the :active state - .dropdown-toggle { - background-image: none; - .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)"); - } - -// Keep the hover's background when dropdown is open - .btn.dropdown-toggle { - background-color: @btnBackgroundHighlight; - } - .btn-primary.dropdown-toggle { - background-color: @btnPrimaryBackgroundHighlight; - } - .btn-warning.dropdown-toggle { - background-color: @btnWarningBackgroundHighlight; - } - .btn-danger.dropdown-toggle { - background-color: @btnDangerBackgroundHighlight; - } - .btn-success.dropdown-toggle { - background-color: @btnSuccessBackgroundHighlight; - } - .btn-info.dropdown-toggle { - background-color: @btnInfoBackgroundHighlight; - } - .btn-inverse.dropdown-toggle { - background-color: @btnInverseBackgroundHighlight; - } -} - - -// Reposition the caret -.btn .caret { - margin-top: 8px; - margin-left: 0; -} -// Carets in other button sizes -.btn-mini .caret, -.btn-small .caret, -.btn-large .caret { - margin-top: 6px; -} -.btn-large .caret { - border-left-width: 5px; - border-right-width: 5px; - border-top-width: 5px; -} -// Upside down carets for .dropup -.dropup .btn-large .caret { - border-bottom: 5px solid @black; - border-top: 0; -} - - - -// Account for other colors -.btn-primary, -.btn-warning, -.btn-danger, -.btn-info, -.btn-success, -.btn-inverse { - .caret { - border-top-color: @white; - border-bottom-color: @white; - } -} - - - -// Vertical button groups -// ---------------------- - -.btn-group-vertical { - display: inline-block; // makes buttons only take up the width they need - .ie7-inline-block(); -} -.btn-group-vertical .btn { - display: block; - float: none; - width: 100%; - .border-radius(0); -} -.btn-group-vertical .btn + .btn { - margin-left: 0; - margin-top: -1px; -} -.btn-group-vertical .btn:first-child { - .border-radius(4px 4px 0 0); -} -.btn-group-vertical .btn:last-child { - .border-radius(0 0 4px 4px); -} -.btn-group-vertical .btn-large:first-child { - .border-radius(6px 6px 0 0); -} -.btn-group-vertical .btn-large:last-child { - .border-radius(0 0 6px 6px); -} -// -// Alerts -// -------------------------------------------------- - - -// Base styles -// ------------------------- - -.alert { - padding: 8px 35px 8px 14px; - margin-bottom: @baseLineHeight; - text-shadow: 0 1px 0 rgba(255,255,255,.5); - background-color: @warningBackground; - border: 1px solid @warningBorder; - .border-radius(4px); - color: @warningText; -} -.alert h4 { - margin: 0; -} - -// Adjust close link position -.alert .close { - position: relative; - top: -2px; - right: -21px; - line-height: @baseLineHeight; -} - - -// Alternate styles -// ------------------------- - -.alert-success { - background-color: @successBackground; - border-color: @successBorder; - color: @successText; -} -.alert-danger, -.alert-error { - background-color: @errorBackground; - border-color: @errorBorder; - color: @errorText; -} -.alert-info { - background-color: @infoBackground; - border-color: @infoBorder; - color: @infoText; -} - - -// Block alerts -// ------------------------- - -.alert-block { - padding-top: 14px; - padding-bottom: 14px; -} -.alert-block > p, -.alert-block > ul { - margin-bottom: 0; -} -.alert-block p + p { - margin-top: 5px; -} -// -// Navs -// -------------------------------------------------- - - -// BASE CLASS -// ---------- - -.nav { - margin-left: 0; - margin-bottom: @baseLineHeight; - list-style: none; -} - -// Make links block level -.nav > li > a { - display: block; -} -.nav > li > a:hover { - text-decoration: none; - background-color: @grayLighter; -} - -// Redeclare pull classes because of specifity -.nav > .pull-right { - float: right; -} - -// Nav headers (for dropdowns and lists) -.nav-header { - display: block; - padding: 3px 15px; - font-size: 11px; - font-weight: bold; - line-height: @baseLineHeight; - color: @grayLight; - text-shadow: 0 1px 0 rgba(255,255,255,.5); - text-transform: uppercase; -} -// Space them out when they follow another list item (link) -.nav li + .nav-header { - margin-top: 9px; -} - - - -// NAV LIST -// -------- - -.nav-list { - padding-left: 15px; - padding-right: 15px; - margin-bottom: 0; -} -.nav-list > li > a, -.nav-list .nav-header { - margin-left: -15px; - margin-right: -15px; - text-shadow: 0 1px 0 rgba(255,255,255,.5); -} -.nav-list > li > a { - padding: 3px 15px; -} -.nav-list > .active > a, -.nav-list > .active > a:hover { - color: @white; - text-shadow: 0 -1px 0 rgba(0,0,0,.2); - background-color: @linkColor; -} -.nav-list [class^="icon-"] { - margin-right: 2px; -} -// Dividers (basically an hr) within the dropdown -.nav-list .divider { - .nav-divider(); -} - - - -// TABS AND PILLS -// ------------- - -// Common styles -.nav-tabs, -.nav-pills { - .clearfix(); -} -.nav-tabs > li, -.nav-pills > li { - float: left; -} -.nav-tabs > li > a, -.nav-pills > li > a { - padding-right: 12px; - padding-left: 12px; - margin-right: 2px; - line-height: 14px; // keeps the overall height an even number -} - -// TABS -// ---- - -// Give the tabs something to sit on -.nav-tabs { - border-bottom: 1px solid #ddd; -} -// Make the list-items overlay the bottom border -.nav-tabs > li { - margin-bottom: -1px; -} -// Actual tabs (as links) -.nav-tabs > li > a { - padding-top: 8px; - padding-bottom: 8px; - line-height: @baseLineHeight; - border: 1px solid transparent; - .border-radius(4px 4px 0 0); - &:hover { - border-color: @grayLighter @grayLighter #ddd; - } -} -// Active state, and it's :hover to override normal :hover -.nav-tabs > .active > a, -.nav-tabs > .active > a:hover { - color: @gray; - background-color: @white; - border: 1px solid #ddd; - border-bottom-color: transparent; - cursor: default; -} - - -// PILLS -// ----- - -// Links rendered as pills -.nav-pills > li > a { - padding-top: 8px; - padding-bottom: 8px; - margin-top: 2px; - margin-bottom: 2px; - .border-radius(5px); -} - -// Active state -.nav-pills > .active > a, -.nav-pills > .active > a:hover { - color: @white; - background-color: @linkColor; -} - - - -// STACKED NAV -// ----------- - -// Stacked tabs and pills -.nav-stacked > li { - float: none; -} -.nav-stacked > li > a { - margin-right: 0; // no need for the gap between nav items -} - -// Tabs -.nav-tabs.nav-stacked { - border-bottom: 0; -} -.nav-tabs.nav-stacked > li > a { - border: 1px solid #ddd; - .border-radius(0); -} -.nav-tabs.nav-stacked > li:first-child > a { - .border-top-radius(4px); -} -.nav-tabs.nav-stacked > li:last-child > a { - .border-bottom-radius(4px); -} -.nav-tabs.nav-stacked > li > a:hover { - border-color: #ddd; - z-index: 2; -} - -// Pills -.nav-pills.nav-stacked > li > a { - margin-bottom: 3px; -} -.nav-pills.nav-stacked > li:last-child > a { - margin-bottom: 1px; // decrease margin to match sizing of stacked tabs -} - - - -// DROPDOWNS -// --------- - -.nav-tabs .dropdown-menu { - .border-radius(0 0 6px 6px); // remove the top rounded corners here since there is a hard edge above the menu -} -.nav-pills .dropdown-menu { - .border-radius(6px); // make rounded corners match the pills -} - -// Default dropdown links -// ------------------------- -// Make carets use linkColor to start -.nav .dropdown-toggle .caret { - border-top-color: @linkColor; - border-bottom-color: @linkColor; - margin-top: 6px; -} -.nav .dropdown-toggle:hover .caret { - border-top-color: @linkColorHover; - border-bottom-color: @linkColorHover; -} -/* move down carets for tabs */ -.nav-tabs .dropdown-toggle .caret { - margin-top: 8px; -} - -// Active dropdown links -// ------------------------- -.nav .active .dropdown-toggle .caret { - border-top-color: #fff; - border-bottom-color: #fff; -} -.nav-tabs .active .dropdown-toggle .caret { - border-top-color: @gray; - border-bottom-color: @gray; -} - -// Active:hover dropdown links -// ------------------------- -.nav > .dropdown.active > a:hover { - cursor: pointer; -} - -// Open dropdowns -// ------------------------- -.nav-tabs .open .dropdown-toggle, -.nav-pills .open .dropdown-toggle, -.nav > li.dropdown.open.active > a:hover { - color: @white; - background-color: @grayLight; - border-color: @grayLight; -} -.nav li.dropdown.open .caret, -.nav li.dropdown.open.active .caret, -.nav li.dropdown.open a:hover .caret { - border-top-color: @white; - border-bottom-color: @white; - .opacity(100); -} - -// Dropdowns in stacked tabs -.tabs-stacked .open > a:hover { - border-color: @grayLight; -} - - - -// TABBABLE -// -------- - - -// COMMON STYLES -// ------------- - -// Clear any floats -.tabbable { - .clearfix(); -} -.tab-content { - overflow: auto; // prevent content from running below tabs -} - -// Remove border on bottom, left, right -.tabs-below > .nav-tabs, -.tabs-right > .nav-tabs, -.tabs-left > .nav-tabs { - border-bottom: 0; -} - -// Show/hide tabbable areas -.tab-content > .tab-pane, -.pill-content > .pill-pane { - display: none; -} -.tab-content > .active, -.pill-content > .active { - display: block; -} - - -// BOTTOM -// ------ - -.tabs-below > .nav-tabs { - border-top: 1px solid #ddd; -} -.tabs-below > .nav-tabs > li { - margin-top: -1px; - margin-bottom: 0; -} -.tabs-below > .nav-tabs > li > a { - .border-radius(0 0 4px 4px); - &:hover { - border-bottom-color: transparent; - border-top-color: #ddd; - } -} -.tabs-below > .nav-tabs > .active > a, -.tabs-below > .nav-tabs > .active > a:hover { - border-color: transparent #ddd #ddd #ddd; -} - -// LEFT & RIGHT -// ------------ - -// Common styles -.tabs-left > .nav-tabs > li, -.tabs-right > .nav-tabs > li { - float: none; -} -.tabs-left > .nav-tabs > li > a, -.tabs-right > .nav-tabs > li > a { - min-width: 74px; - margin-right: 0; - margin-bottom: 3px; -} - -// Tabs on the left -.tabs-left > .nav-tabs { - float: left; - margin-right: 19px; - border-right: 1px solid #ddd; -} -.tabs-left > .nav-tabs > li > a { - margin-right: -1px; - .border-radius(4px 0 0 4px); -} -.tabs-left > .nav-tabs > li > a:hover { - border-color: @grayLighter #ddd @grayLighter @grayLighter; -} -.tabs-left > .nav-tabs .active > a, -.tabs-left > .nav-tabs .active > a:hover { - border-color: #ddd transparent #ddd #ddd; - *border-right-color: @white; -} - -// Tabs on the right -.tabs-right > .nav-tabs { - float: right; - margin-left: 19px; - border-left: 1px solid #ddd; -} -.tabs-right > .nav-tabs > li > a { - margin-left: -1px; - .border-radius(0 4px 4px 0); -} -.tabs-right > .nav-tabs > li > a:hover { - border-color: @grayLighter @grayLighter @grayLighter #ddd; -} -.tabs-right > .nav-tabs .active > a, -.tabs-right > .nav-tabs .active > a:hover { - border-color: #ddd #ddd #ddd transparent; - *border-left-color: @white; -} - - - -// DISABLED STATES -// --------------- - -// Gray out text -.nav > .disabled > a { - color: @grayLight; -} -// Nuke hover effects -.nav > .disabled > a:hover { - text-decoration: none; - background-color: transparent; - cursor: default; -} -// -// Navbars (Redux) -// -------------------------------------------------- - - -// COMMON STYLES -// ------------- - -// Base class and wrapper -.navbar { - overflow: visible; - margin-bottom: @baseLineHeight; - color: @navbarText; - -// Fix for IE7's bad z-indexing so dropdowns don't appear below content that follows the navbar - *position: relative; - *z-index: 2; -} - -// Inner for background effects -// Gradient is applied to its own element because overflow visible is not honored by IE when filter is present -.navbar-inner { - min-height: @navbarHeight; - padding-left: 20px; - padding-right: 20px; - #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground); - border: 1px solid @navbarBorder; - .border-radius(4px); - .box-shadow(0 1px 4px rgba(0,0,0,.065)); -} - -// Set width to auto for default container -// We then reset it for fixed navbars in the #gridSystem mixin -.navbar .container { - width: auto; -} - -// Override the default collapsed state -.nav-collapse.collapse { - height: auto; -} - - -// Brand: website or project name -// ------------------------- -.navbar .brand { - float: left; - display: block; -// Vertically center the text given @navbarHeight - padding: ((@navbarHeight - @baseLineHeight) / 2) 20px ((@navbarHeight - @baseLineHeight) / 2); - margin-left: -20px; // negative indent to left-align the text down the page - font-size: 20px; - font-weight: 200; - color: @navbarBrandColor; - text-shadow: 0 1px 0 @navbarBackgroundHighlight; - &:hover { - text-decoration: none; - } -} - -// Plain text in topbar -// ------------------------- -.navbar-text { - margin-bottom: 0; - line-height: @navbarHeight; -} - -// Janky solution for now to account for links outside the .nav -// ------------------------- -.navbar-link { - color: @navbarLinkColor; - &:hover { - color: @navbarLinkColorHover; - } -} - -// Dividers in navbar -// ------------------------- -.navbar .divider-vertical { - height: @navbarHeight; - margin: 0 9px; - border-left: 1px solid @navbarBackground; - border-right: 1px solid @navbarBackgroundHighlight; -} - -// Buttons in navbar -// ------------------------- -.navbar .btn, -.navbar .btn-group { - .navbarVerticalAlign(28px); // Vertically center in navbar -} -.navbar .btn-group .btn { - margin: 0; // then undo the margin here so we don't accidentally double it -} - -// Navbar forms -.navbar-form { - margin-bottom: 0; // remove default bottom margin - .clearfix(); - input, - select, - .radio, - .checkbox { - .navbarVerticalAlign(30px); // Vertically center in navbar - } - input, - select, - .btn { - display: inline-block; - margin-bottom: 0; - } - input[type="image"], - input[type="checkbox"], - input[type="radio"] { - margin-top: 3px; - } - .input-append, - .input-prepend { - margin-top: 6px; - white-space: nowrap; // preven two items from separating within a .navbar-form that has .pull-left - input { - margin-top: 0; // remove the margin on top since it's on the parent - } - } -} - -// Navbar search -.navbar-search { - position: relative; - float: left; - .navbarVerticalAlign(30px); // Vertically center in navbar - margin-bottom: 0; - .search-query { - margin-bottom: 0; - padding: 4px 14px; - #font > .sans-serif(13px, normal, 1); - .border-radius(15px); // redeclare because of specificity of the type attribute - } -} - - - -// Static navbar -// ------------------------- - -.navbar-static-top { - position: static; - width: 100%; - margin-bottom: 0; // remove 18px margin for default navbar - .navbar-inner { - .border-radius(0); - } -} - - - -// Fixed navbar -// ------------------------- - -// Shared (top/bottom) styles -.navbar-fixed-top, -.navbar-fixed-bottom { - position: fixed; - right: 0; - left: 0; - z-index: @zindexFixedNavbar; - margin-bottom: 0; // remove 18px margin for default navbar -} -.navbar-fixed-top, -.navbar-fixed-bottom, -.navbar-static-top { - .navbar-inner { - border: 0; - } -} -.navbar-fixed-top .navbar-inner, -.navbar-fixed-bottom .navbar-inner { - padding-left: 0; - padding-right: 0; - .border-radius(0); -} - -// Reset container width -// Required here as we reset the width earlier on and the grid mixins don't override early enough -.navbar-static-top .container, -.navbar-fixed-top .container, -.navbar-fixed-bottom .container { - #grid > .core > .span(@gridColumns); -} - -// Fixed to top -.navbar-fixed-top { - top: 0; -} -.navbar-fixed-top, -.navbar-static-top { - .navbar-inner { - .box-shadow(~"inset 0 -1px 0 rgba(0,0,0,.1), 0 1px 10px rgba(0,0,0,.1)"); - } -} - -// Fixed to bottom -.navbar-fixed-bottom { - bottom: 0; - .navbar-inner { - .box-shadow(~"inset 0 1px 0 rgba(0,0,0,.1), 0 -1px 10px rgba(0,0,0,.1)"); - } -} - - - -// NAVIGATION -// ---------- - -.navbar .nav { - position: relative; - left: 0; - display: block; - float: left; - margin: 0 10px 0 0; -} -.navbar .nav.pull-right { - float: right; // redeclare due to specificity -} -.navbar .nav > li { - float: left; -} - -// Links -.navbar .nav > li > a { - float: none; -// Vertically center the text given @navbarHeight - padding: ((@navbarHeight - @baseLineHeight) / 2) 15px ((@navbarHeight - @baseLineHeight) / 2); - color: @navbarLinkColor; - text-decoration: none; - text-shadow: 0 1px 0 @navbarBackgroundHighlight; -} -.navbar .nav .dropdown-toggle .caret { - margin-top: 8px; -} - -// Hover -.navbar .nav > li > a:focus, -.navbar .nav > li > a:hover { - background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active - color: @navbarLinkColorHover; - text-decoration: none; -} - -// Active nav items -.navbar .nav > .active > a, -.navbar .nav > .active > a:hover, -.navbar .nav > .active > a:focus { - color: @navbarLinkColorActive; - text-decoration: none; - background-color: @navbarLinkBackgroundActive; - -webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.125); - -moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.125); - box-shadow: inset 0 3px 8px rgba(0,0,0,.125); -} - -// Navbar button for toggling navbar items in responsive layouts -// These definitions need to come after '.navbar .btn' -.navbar .btn-navbar { - display: none; - float: right; - padding: 7px 10px; - margin-left: 5px; - margin-right: 5px; - .buttonBackground(darken(@navbarBackgroundHighlight, 5%), darken(@navbarBackground, 5%)); - .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)"); -} -.navbar .btn-navbar .icon-bar { - display: block; - width: 18px; - height: 2px; - background-color: #f5f5f5; - .border-radius(1px); - .box-shadow(0 1px 0 rgba(0,0,0,.25)); -} -.btn-navbar .icon-bar + .icon-bar { - margin-top: 3px; -} - - - -// Dropdown menus -// -------------- - -// Menu position and menu carets -.navbar .nav > li > .dropdown-menu { - &:before { - content: ''; - display: inline-block; - border-left: 7px solid transparent; - border-right: 7px solid transparent; - border-bottom: 7px solid #ccc; - border-bottom-color: @dropdownBorder; - position: absolute; - top: -7px; - left: 9px; - } - &:after { - content: ''; - display: inline-block; - border-left: 6px solid transparent; - border-right: 6px solid transparent; - border-bottom: 6px solid @dropdownBackground; - position: absolute; - top: -6px; - left: 10px; - } -} -// Menu position and menu caret support for dropups via extra dropup class -.navbar-fixed-bottom .nav > li > .dropdown-menu { - &:before { - border-top: 7px solid #ccc; - border-top-color: @dropdownBorder; - border-bottom: 0; - bottom: -7px; - top: auto; - } - &:after { - border-top: 6px solid @dropdownBackground; - border-bottom: 0; - bottom: -6px; - top: auto; - } -} - -// Remove background color from open dropdown -.navbar .nav li.dropdown.open > .dropdown-toggle, -.navbar .nav li.dropdown.active > .dropdown-toggle, -.navbar .nav li.dropdown.open.active > .dropdown-toggle { - background-color: @navbarLinkBackgroundActive; - color: @navbarLinkColorActive; -} -.navbar .nav li.dropdown > .dropdown-toggle .caret { - border-top-color: @navbarLinkColor; - border-bottom-color: @navbarLinkColor; -} -.navbar .nav li.dropdown.open > .dropdown-toggle .caret, -.navbar .nav li.dropdown.active > .dropdown-toggle .caret, -.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret { - border-top-color: @navbarLinkColorActive; - border-bottom-color: @navbarLinkColorActive; -} - -// Right aligned menus need alt position -.navbar .pull-right > li > .dropdown-menu, -.navbar .nav > li > .dropdown-menu.pull-right { - left: auto; - right: 0; - &:before { - left: auto; - right: 12px; - } - &:after { - left: auto; - right: 13px; - } - .dropdown-menu { - left: auto; - right: 100%; - margin-left: 0; - margin-right: -1px; - .border-radius(6px 0 6px 6px); - } -} - - -// Inverted navbar -// ------------------------- - -.navbar-inverse { - color: @navbarInverseText; - - .navbar-inner { - #gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground); - border-color: @navbarInverseBorder; - } - - .brand, - .nav > li > a { - color: @navbarInverseLinkColor; - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - &:hover { - color: @navbarInverseLinkColorHover; - } - } - - .nav > li > a:focus, - .nav > li > a:hover { - background-color: @navbarInverseLinkBackgroundHover; - color: @navbarInverseLinkColorHover; - } - - .nav .active > a, - .nav .active > a:hover, - .nav .active > a:focus { - color: @navbarInverseLinkColorActive; - background-color: @navbarInverseLinkBackgroundActive; - } - -// Inline text links - .navbar-link { - color: @navbarInverseLinkColor; - &:hover { - color: @navbarInverseLinkColorHover; - } - } - -// Dividers in navbar - .divider-vertical { - border-left-color: @navbarInverseBackground; - border-right-color: @navbarInverseBackgroundHighlight; - } - -// Dropdowns - .nav li.dropdown.open > .dropdown-toggle, - .nav li.dropdown.active > .dropdown-toggle, - .nav li.dropdown.open.active > .dropdown-toggle { - background-color: @navbarInverseLinkBackgroundActive; - color: @navbarInverseLinkColorActive; - } - .nav li.dropdown > .dropdown-toggle .caret { - border-top-color: @navbarInverseLinkColor; - border-bottom-color: @navbarInverseLinkColor; - } - .nav li.dropdown.open > .dropdown-toggle .caret, - .nav li.dropdown.active > .dropdown-toggle .caret, - .nav li.dropdown.open.active > .dropdown-toggle .caret { - border-top-color: @navbarInverseLinkColorActive; - border-bottom-color: @navbarInverseLinkColorActive; - } - -// Navbar search - .navbar-search { - .search-query { - color: @white; - background-color: @navbarInverseSearchBackground; - border-color: @navbarInverseSearchBorder; - .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)"); - .transition(none); - .placeholder(@navbarInverseSearchPlaceholderColor); - - // Focus states (we use .focused since IE7-8 and down doesn't support :focus) - &:focus, - &.focused { - padding: 5px 15px; - color: @grayDark; - text-shadow: 0 1px 0 @white; - background-color: @navbarInverseSearchBackgroundFocus; - border: 0; - .box-shadow(0 0 3px rgba(0,0,0,.15)); - outline: 0; - } - } - } - -// Navbar collapse button - .btn-navbar { - .buttonBackground(darken(@navbarInverseBackgroundHighlight, 5%), darken(@navbarInverseBackground, 5%)); - } - -} - - - -// -// Breadcrumbs -// -------------------------------------------------- - - -.breadcrumb { - padding: 8px 15px; - margin: 0 0 @baseLineHeight; - list-style: none; - background-color: #f5f5f5; - .border-radius(4px); - li { - display: inline-block; - .ie7-inline-block(); - text-shadow: 0 1px 0 @white; - } - .divider { - padding: 0 5px; - color: #ccc; - } - .active { - color: @grayLight; - } -} -// -// Pagination (multiple pages) -// -------------------------------------------------- - - -.pagination { - height: @baseLineHeight * 2; - margin: @baseLineHeight 0; -} -.pagination ul { - display: inline-block; - .ie7-inline-block(); - margin-left: 0; - margin-bottom: 0; - .border-radius(3px); - .box-shadow(0 1px 2px rgba(0,0,0,.05)); -} -.pagination li { - display: inline; -} -.pagination a, -.pagination span { - float: left; - padding: 0 14px; - line-height: (@baseLineHeight * 2) - 2; - text-decoration: none; - background-color: @paginationBackground; - border: 1px solid @paginationBorder; - border-left-width: 0; -} -.pagination a:hover, -.pagination .active a, -.pagination .active span { - background-color: #f5f5f5; -} -.pagination .active a, -.pagination .active span { - color: @grayLight; - cursor: default; -} -.pagination .disabled span, -.pagination .disabled a, -.pagination .disabled a:hover { - color: @grayLight; - background-color: transparent; - cursor: default; -} -.pagination li:first-child a, -.pagination li:first-child span { - border-left-width: 1px; - .border-radius(3px 0 0 3px); -} -.pagination li:last-child a, -.pagination li:last-child span { - .border-radius(0 3px 3px 0); -} - -// Centered -.pagination-centered { - text-align: center; -} -.pagination-right { - text-align: right; -} -// -// Pager pagination -// -------------------------------------------------- - - -.pager { - margin: @baseLineHeight 0; - list-style: none; - text-align: center; - .clearfix(); -} -.pager li { - display: inline; -} -.pager a { - display: inline-block; - padding: 5px 14px; - background-color: #fff; - border: 1px solid #ddd; - .border-radius(15px); -} -.pager a:hover { - text-decoration: none; - background-color: #f5f5f5; -} -.pager .next a { - float: right; -} -.pager .previous a { - float: left; -} -.pager .disabled a, -.pager .disabled a:hover { - color: @grayLight; - background-color: #fff; - cursor: default; -}// -// Modals -// -------------------------------------------------- - - -// Recalculate z-index where appropriate -.modal-open { - .dropdown-menu { z-index: @zindexDropdown + @zindexModal; } - .dropdown.open { *z-index: @zindexDropdown + @zindexModal; } - .popover { z-index: @zindexPopover + @zindexModal; } - .tooltip { z-index: @zindexTooltip + @zindexModal; } -} - -// Background -.modal-backdrop { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: @zindexModalBackdrop; - background-color: @black; -// Fade for backdrop - &.fade { opacity: 0; } -} - -.modal-backdrop, -.modal-backdrop.fade.in { - .opacity(80); -} - -// Base modal -.modal { - position: fixed; - top: 50%; - left: 50%; - z-index: @zindexModal; - overflow: auto; - width: 560px; - margin: -250px 0 0 -280px; - background-color: @white; - border: 1px solid #999; - border: 1px solid rgba(0,0,0,.3); - *border: 1px solid #999; /* IE6-7 */ - .border-radius(6px); - .box-shadow(0 3px 7px rgba(0,0,0,0.3)); - .background-clip(padding-box); - &.fade { - .transition(e('opacity .3s linear, top .3s ease-out')); - top: -25%; - } - &.fade.in { top: 50%; } -} -.modal-header { - padding: 9px 15px; - border-bottom: 1px solid #eee; -// Close icon - .close { margin-top: 2px; } -// Heading - h3 { - margin: 0; - line-height: 30px; - } -} - -// Body (where all modal content resides) -.modal-body { - overflow-y: auto; - max-height: 400px; - padding: 15px; -} -// Remove bottom margin if need be -.modal-form { - margin-bottom: 0; -} - -// Footer (for actions) -.modal-footer { - padding: 14px 15px 15px; - margin-bottom: 0; - text-align: right; // right align buttons - background-color: #f5f5f5; - border-top: 1px solid #ddd; - .border-radius(0 0 6px 6px); - .box-shadow(inset 0 1px 0 @white); - .clearfix(); // clear it in case folks use .pull-* classes on buttons - -// Properly space out buttons - .btn + .btn { - margin-left: 5px; - margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs - } -// but override that for button groups - .btn-group .btn + .btn { - margin-left: -1px; - } -} -// -// Tooltips -// -------------------------------------------------- - - -// Base class -.tooltip { - position: absolute; - z-index: @zindexTooltip; - display: block; - visibility: visible; - padding: 5px; - font-size: 11px; - .opacity(0); - &.in { .opacity(80); } - &.top { margin-top: -3px; } - &.right { margin-left: 3px; } - &.bottom { margin-top: 3px; } - &.left { margin-left: -3px; } -} - -// Wrapper for the tooltip content -.tooltip-inner { - max-width: 200px; - padding: 3px 8px; - color: @tooltipColor; - text-align: center; - text-decoration: none; - background-color: @tooltipBackground; - .border-radius(4px); -} - -// Arrows -.tooltip-arrow { - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; -} -.tooltip { - &.top .tooltip-arrow { - bottom: 0; - left: 50%; - margin-left: -@tooltipArrowWidth; - border-width: @tooltipArrowWidth @tooltipArrowWidth 0; - border-top-color: @tooltipArrowColor; - } - &.right .tooltip-arrow { - top: 50%; - left: 0; - margin-top: -@tooltipArrowWidth; - border-width: @tooltipArrowWidth @tooltipArrowWidth @tooltipArrowWidth 0; - border-right-color: @tooltipArrowColor; - } - &.left .tooltip-arrow { - top: 50%; - right: 0; - margin-top: -@tooltipArrowWidth; - border-width: @tooltipArrowWidth 0 @tooltipArrowWidth @tooltipArrowWidth; - border-left-color: @tooltipArrowColor; - } - &.bottom .tooltip-arrow { - top: 0; - left: 50%; - margin-left: -@tooltipArrowWidth; - border-width: 0 @tooltipArrowWidth @tooltipArrowWidth; - border-bottom-color: @tooltipArrowColor; - } -} -// -// Popovers -// -------------------------------------------------- - - -.popover { - position: absolute; - top: 0; - left: 0; - z-index: @zindexPopover; - display: none; - width: 236px; - padding: 1px; - background-color: @popoverBackground; - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; - border: 1px solid #ccc; - border: 1px solid rgba(0,0,0,.2); - .border-radius(6px); - .box-shadow(0 5px 10px rgba(0,0,0,.2)); - -// Offset the popover to account for the popover arrow - &.top { margin-bottom: 10px; } - &.right { margin-left: 10px; } - &.bottom { margin-top: 10px; } - &.left { margin-right: 10px; } - -} - -.popover-title { - margin: 0; // reset heading margin - padding: 8px 14px; - font-size: 14px; - font-weight: normal; - line-height: 18px; - background-color: @popoverTitleBackground; - border-bottom: 1px solid darken(@popoverTitleBackground, 5%); - .border-radius(5px 5px 0 0); -} - -.popover-content { - padding: 9px 14px; - p, ul, ol { - margin-bottom: 0; - } -} - -// Arrows -.popover .arrow, -.popover .arrow:after { - position: absolute; - display: inline-block; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; -} -.popover .arrow:after { - content: ""; - z-index: -1; -} - -.popover { - &.top .arrow { - bottom: -@popoverArrowWidth; - left: 50%; - margin-left: -@popoverArrowWidth; - border-width: @popoverArrowWidth @popoverArrowWidth 0; - border-top-color: @popoverArrowColor; - &:after { - border-width: @popoverArrowOuterWidth @popoverArrowOuterWidth 0; - border-top-color: @popoverArrowOuterColor; - bottom: -1px; - left: -@popoverArrowOuterWidth; - } - } - &.right .arrow { - top: 50%; - left: -@popoverArrowWidth; - margin-top: -@popoverArrowWidth; - border-width: @popoverArrowWidth @popoverArrowWidth @popoverArrowWidth 0; - border-right-color: @popoverArrowColor; - &:after { - border-width: @popoverArrowOuterWidth @popoverArrowOuterWidth @popoverArrowOuterWidth 0; - border-right-color: @popoverArrowOuterColor; - bottom: -@popoverArrowOuterWidth; - left: -1px; - } - } - &.bottom .arrow { - top: -@popoverArrowWidth; - left: 50%; - margin-left: -@popoverArrowWidth; - border-width: 0 @popoverArrowWidth @popoverArrowWidth; - border-bottom-color: @popoverArrowColor; - &:after { - border-width: 0 @popoverArrowOuterWidth @popoverArrowOuterWidth; - border-bottom-color: @popoverArrowOuterColor; - top: -1px; - left: -@popoverArrowOuterWidth; - } - } - &.left .arrow { - top: 50%; - right: -@popoverArrowWidth; - margin-top: -@popoverArrowWidth; - border-width: @popoverArrowWidth 0 @popoverArrowWidth @popoverArrowWidth; - border-left-color: @popoverArrowColor; - &:after { - border-width: @popoverArrowOuterWidth 0 @popoverArrowOuterWidth @popoverArrowOuterWidth; - border-left-color: @popoverArrowOuterColor; - bottom: -@popoverArrowOuterWidth; - right: -1px; - } - } -} -// -// Thumbnails -// -------------------------------------------------- - - -// Note: `.thumbnails` and `.thumbnails > li` are overriden in responsive files - -// Make wrapper ul behave like the grid -.thumbnails { - margin-left: -@gridGutterWidth; - list-style: none; - .clearfix(); -} -// Fluid rows have no left margin -.row-fluid .thumbnails { - margin-left: 0; -} - -// Float li to make thumbnails appear in a row -.thumbnails > li { - float: left; // Explicity set the float since we don't require .span* classes - margin-bottom: @baseLineHeight; - margin-left: @gridGutterWidth; -} - -// The actual thumbnail (can be `a` or `div`) -.thumbnail { - display: block; - padding: 4px; - line-height: @baseLineHeight; - border: 1px solid #ddd; - .border-radius(4px); - .box-shadow(0 1px 3px rgba(0,0,0,.055)); - .transition(all .2s ease-in-out); -} -// Add a hover state for linked versions only -a.thumbnail:hover { - border-color: @linkColor; - .box-shadow(0 1px 4px rgba(0,105,214,.25)); -} - -// Images and captions -.thumbnail > img { - display: block; - max-width: 100%; - margin-left: auto; - margin-right: auto; -} -.thumbnail .caption { - padding: 9px; - color: @gray; -} -// -// Labels and badges -// -------------------------------------------------- - - -// Base classes -.label, -.badge { - font-size: @baseFontSize * .846; - font-weight: bold; - line-height: 14px; // ensure proper line-height if floated - color: @white; - vertical-align: baseline; - white-space: nowrap; - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - background-color: @grayLight; -} -// Set unique padding and border-radii -.label { - padding: 1px 4px 2px; - .border-radius(3px); -} -.badge { - padding: 1px 9px 2px; - .border-radius(9px); -} - -// Hover state, but only for links -a { - &.label:hover, - &.badge:hover { - color: @white; - text-decoration: none; - cursor: pointer; - } -} - -// Colors -// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute) -.label, -.badge { -// Important (red) - &-important { background-color: @errorText; } - &-important[href] { background-color: darken(@errorText, 10%); } -// Warnings (orange) - &-warning { background-color: @orange; } - &-warning[href] { background-color: darken(@orange, 10%); } -// Success (green) - &-success { background-color: @successText; } - &-success[href] { background-color: darken(@successText, 10%); } -// Info (turquoise) - &-info { background-color: @infoText; } - &-info[href] { background-color: darken(@infoText, 10%); } -// Inverse (black) - &-inverse { background-color: @grayDark; } - &-inverse[href] { background-color: darken(@grayDark, 10%); } -} - -// Quick fix for labels/badges in buttons -.btn { - .label, - .badge { - position: relative; - top: -1px; - } -} -.btn-mini { - .label, - .badge { - top: 0; - } -} -// -// Progress bars -// -------------------------------------------------- - - -// ANIMATIONS -// ---------- - -// Webkit -@-webkit-keyframes progress-bar-stripes { - from { background-position: 40px 0; } - to { background-position: 0 0; } - } - -// Firefox -@-moz-keyframes progress-bar-stripes { - from { background-position: 40px 0; } - to { background-position: 0 0; } - } - -// IE9 -@-ms-keyframes progress-bar-stripes { - from { background-position: 40px 0; } - to { background-position: 0 0; } - } - -// Opera -@-o-keyframes progress-bar-stripes { - from { background-position: 0 0; } - to { background-position: 40px 0; } - } - -// Spec -@keyframes progress-bar-stripes { - from { background-position: 40px 0; } - to { background-position: 0 0; } - } - - - -// THE BARS -// -------- - -// Outer container -.progress { - overflow: hidden; - height: @baseLineHeight; - margin-bottom: @baseLineHeight; - #gradient > .vertical(#f5f5f5, #f9f9f9); - .box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); - .border-radius(4px); -} - -// Bar of progress -.progress .bar { - width: 0%; - height: 100%; - color: @white; - float: left; - font-size: 12px; - text-align: center; - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - #gradient > .vertical(#149bdf, #0480be); - .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)); - .box-sizing(border-box); - .transition(width .6s ease); -} -.progress .bar + .bar { - .box-shadow(~"inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15)"); -} - -// Striped bars -.progress-striped .bar { - #gradient > .striped(#149bdf); - .background-size(40px 40px); -} - -// Call animation for the active one -.progress.active .bar { - -webkit-animation: progress-bar-stripes 2s linear infinite; - -moz-animation: progress-bar-stripes 2s linear infinite; - -ms-animation: progress-bar-stripes 2s linear infinite; - -o-animation: progress-bar-stripes 2s linear infinite; - animation: progress-bar-stripes 2s linear infinite; -} - - - -// COLORS -// ------ - -// Danger (red) -.progress-danger .bar, .progress .bar-danger { - #gradient > .vertical(#ee5f5b, #c43c35); -} -.progress-danger.progress-striped .bar, .progress-striped .bar-danger { - #gradient > .striped(#ee5f5b); -} - -// Success (green) -.progress-success .bar, .progress .bar-success { - #gradient > .vertical(#62c462, #57a957); -} -.progress-success.progress-striped .bar, .progress-striped .bar-success { - #gradient > .striped(#62c462); -} - -// Info (teal) -.progress-info .bar, .progress .bar-info { - #gradient > .vertical(#5bc0de, #339bb9); -} -.progress-info.progress-striped .bar, .progress-striped .bar-info { - #gradient > .striped(#5bc0de); -} - -// Warning (orange) -.progress-warning .bar, .progress .bar-warning { - #gradient > .vertical(lighten(@orange, 15%), @orange); -} -.progress-warning.progress-striped .bar, .progress-striped .bar-warning { - #gradient > .striped(lighten(@orange, 15%)); -} -// -// Accordion -// -------------------------------------------------- - - -// Parent container -.accordion { - margin-bottom: @baseLineHeight; -} - -// Group == heading + body -.accordion-group { - margin-bottom: 2px; - border: 1px solid #e5e5e5; - .border-radius(4px); -} -.accordion-heading { - border-bottom: 0; -} -.accordion-heading .accordion-toggle { - display: block; - padding: 8px 15px; -} - -// General toggle styles -.accordion-toggle { - cursor: pointer; -} - -// Inner needs the styles because you can't animate properly with any styles on the element -.accordion-inner { - padding: 9px 15px; - border-top: 1px solid #e5e5e5; -} -// -// Carousel -// -------------------------------------------------- - - -.carousel { - position: relative; - margin-bottom: @baseLineHeight; - line-height: 1; -} - -.carousel-inner { - overflow: hidden; - width: 100%; - position: relative; -} - -.carousel { - - .item { - display: none; - position: relative; - .transition(.6s ease-in-out left); - } - -// Account for jankitude on images - .item > img { - display: block; - line-height: 1; - } - - .active, - .next, - .prev { display: block; } - - .active { - left: 0; - } - - .next, - .prev { - position: absolute; - top: 0; - width: 100%; - } - - .next { - left: 100%; - } - .prev { - left: -100%; - } - .next.left, - .prev.right { - left: 0; - } - - .active.left { - left: -100%; - } - .active.right { - left: 100%; - } - -} - -// Left/right controls for nav -// --------------------------- - -.carousel-control { - position: absolute; - top: 40%; - left: 15px; - width: 40px; - height: 40px; - margin-top: -20px; - font-size: 60px; - font-weight: 100; - line-height: 30px; - color: @white; - text-align: center; - background: @grayDarker; - border: 3px solid @white; - .border-radius(23px); - .opacity(50); - -// we can't have this transition here -// because webkit cancels the carousel -// animation if you trip this while -// in the middle of another animation -// ;_; -// .transition(opacity .2s linear); - -// Reposition the right one - &.right { - left: auto; - right: 15px; - } - -// Hover state - &:hover { - color: @white; - text-decoration: none; - .opacity(90); - } -} - - -// Caption for text below images -// ----------------------------- - -.carousel-caption { - position: absolute; - left: 0; - right: 0; - bottom: 0; - padding: 15px; - background: @grayDark; - background: rgba(0,0,0,.75); -} -.carousel-caption h4, -.carousel-caption p { - color: @white; - line-height: @baseLineHeight; -} -.carousel-caption h4 { - margin: 0 0 5px; -} -.carousel-caption p { - margin-bottom: 0; -} -// -// Hero unit -// -------------------------------------------------- - - -.hero-unit { - padding: 60px; - margin-bottom: 30px; - background-color: @heroUnitBackground; - .border-radius(6px); - h1 { - margin-bottom: 0; - font-size: 60px; - line-height: 1; - color: @heroUnitHeadingColor; - letter-spacing: -1px; - } - p { - font-size: 18px; - font-weight: 200; - line-height: @baseLineHeight * 1.5; - color: @heroUnitLeadColor; - } -} -// -// Utility classes -// -------------------------------------------------- - - -// Quick floats -.pull-right { - float: right; -} -.pull-left { - float: left; -} - -// Toggling content -.hide { - display: none; -} -.show { - display: block; -} - -// Visibility -.invisible { - visibility: hidden; -} - -// For Affix plugin -.affix { - position: fixed; -} - diff --git a/src/templates/apps/auth/login.html b/src/templates/apps/auth/login.html index 4bb819c..e72e73a 100644 --- a/src/templates/apps/auth/login.html +++ b/src/templates/apps/auth/login.html @@ -1,16 +1,11 @@ {% extends "base.html" %} -{% load prefix %} {% block headline %}Login{% endblock %} {% block title %}SUNET Meeting Tools{% endblock %} {% block content %} -<div id="welcome"> - <p>The SUNET meetingtools is an alternative interface to Adobe Connect. With this tool you can...</p> - <ul> - <li>Create self-cleaning rooms.</li> - <li>Tag rooms to provide easy access to lists of rooms for your university or research group.</li> - <li>Display lists of rooms on your own website.</li> - <li>Manage recordings for your rooms.</li> - </ul> - <div class="button"><a href="{% prefix %}/accounts/login-federated">Login</a></div> +<div class="hero-unit"> + <h1>Online Meetings</h1> + <p>Welcome to the meeting tools. Either <a class="btn btn-small btn-primary" href="/accounts/login-federated">Login</a> to manage + your meeting rooms and recordings, or ...</p> + <a class="btn btn-large btn-success pull-right" href="/accounts/login-federated?next=/user/myroom">Click here to Start a Meeting Now »»</a> </div> {% endblock %}
\ No newline at end of file diff --git a/src/templates/apps/room/launch.html b/src/templates/apps/room/launch.html index 00f40c1..204345d 100644 --- a/src/templates/apps/room/launch.html +++ b/src/templates/apps/room/launch.html @@ -1,6 +1,5 @@ {% extends "base.html" %} {% load datehumanize %} -{% load prefix %} {% block widgets %} {% endblock %} {% block content %} @@ -25,11 +24,11 @@ </div> <br/> <div> - <a class="btn btn-large" href="{% prefix %}/rooms#{{room.id}}">Cancel</a> + <a class="btn btn-large" href="/rooms#{{room.id}}">Cancel</a> {%if room.nhosts == 0 %} - <a class="btn btn-large btn-success" href="{% prefix %}/accounts/login-federated?next=/promote/{{room.id}}">Enter as Host</a> + <a class="btn btn-large btn-success" href="/accounts/login-federated?next=/promote/{{room.id}}">Enter as Host</a> {% endif %} - <a class="btn btn-large btn-primary" href="{% prefix %}/launch/{{room.id}}">Enter as Participant</a> + <a class="btn btn-large btn-primary" href="/launch/{{room.id}}">Enter as Participant</a> </div> {% endblock %}
\ No newline at end of file diff --git a/src/templates/apps/room/list.html b/src/templates/apps/room/list.html index 1ac034a..4e83466 100644 --- a/src/templates/apps/room/list.html +++ b/src/templates/apps/room/list.html @@ -1,12 +1,11 @@ {% extends "base.html" %} -{% load prefix %} {% load datehumanize %} {% load roomurl %} {% load tagging_tags %} {% block widgets %} $(".collapse").collapse({'parent': '#rooms'}); $(".occupation").click(function(e) { - $(this).find(".occupation-info").first().load("{% prefix %}/api/room/"+$(this).parents('.accordion-body').attr('id')+"/occupation") + $(this).find(".occupation-info").first().load("/api/room/"+$(this).parents('.accordion-body').attr('id')+"/occupation") }); $(".occupation").ajaxStart(function() { $(".occupation i.icon-refresh").removeClass("icon-refresh").addClass("spinner").spin("custom"); @@ -17,8 +16,8 @@ {% endblock %} {% block meta %} {% if tags %} -<link rel="alternate" type="application/rss+xml" title="{{title}} (RSS 2.0)" href="{% prefix %}/room/+{{tags}}.rss" /> -<link rel="alternate" type="application/atom+xml" title="{{title}} (ATOM 1.0)" href="{% prefix %}/room/+{{tags}}.atom" /> +<link rel="alternate" type="application/rss+xml" title="{{title}} (RSS 2.0)" href="/room/+{{tags}}.rss" /> +<link rel="alternate" type="application/atom+xml" title="{{title}} (ATOM 1.0)" href="/room/+{{tags}}.atom" /> {% endif %} {% endblock %} {% block content %} @@ -36,25 +35,25 @@ <p><a target="_connect" href="{{r|roomurl}}">{{r|roomurl}}</a></p> <p class="well">{% if r.description %}{{r.description|safe}}{% else %}<em>No description available...</em>{% endif %}</p> <ul class="unstyled" style="padding-left: 2px;"> - <li>» Tags: {% for tag in tags %}<a style="margin-right: 5px;" href="{% prefix %}/room/+{{tag}}">{{tag}}</a>{% endfor %} {%if edit %}<a style="font-size: 75%;" href="{% prefix %}/room/{{r.id}}/tag"><em>... manage room tags</em></a>{%endif%}</li> + {% if tags %}<li>» {% for tag in tags %}<a class="badge" href="/room/+{{tag}}">{{tag}}</a>{% endfor %}{%if edit %} <a class="btn btn-mini btn-info" href="/room/{{r.id}}/tag">manage room tags</a>{%endif%}</li>{% endif %} <li>» Created by {{r.creator}} {{r.timecreated|datehumanize}}.</li> <li>» <span class="occupation"><span class="occupation-info">{%if r.nusers%}There are {{r.nusers}} users present, {{r.nhosts}} of whom are hosts.{%else%}The room is currently unoccupied.{%endif%}</span><a href="#" class="btn btn-mini btn-info"><i class="icon-refresh"> </i>refresh</a></span></li> {% if r.self_cleaning %}<li>» Room will be reset when empty.</li>{%else%}<li>» Room state is preserved between sessions.</li>{% endif %} {% if r.allow_host %}<li>» First participant can elect to become host.</li>{% endif %} {% if r.lastvisited %}<li>» Last visited {{r.lastvisited|datehumanize}}</li>{%endif%} - <li>» Hosted on {{r.acc.name}} <a class="btn btn-mini btn-info" href="{% prefix %}/stats/room/{{r.id}}">room usage plot</a></li> + <li>» Hosted on {{r.acc.name}} <a class="btn btn-mini btn-info" href="/stats/room/{{r.id}}">room usage plot</a></li> </ul> <br/> <div class="btn-group"> - <a class="btn" target="_blank" href="{% prefix %}/go/{{r.id}}">Enter Room</a> + <a class="btn" target="_blank" href="/go/{{r.id}}">Enter Room</a> {% if edit %} - <a class="btn" href="{% prefix %}/room/{{r.id}}/tag">Room Tags</a> - <a class="btn" href="{% prefix %}/room/{{r.id}}/recordings">Room Recordings</a> - <a class="btn" href="{% prefix %}/room/{{r.id}}/modify">Modify Room</a> + <a class="btn" href="/room/{{r.id}}/tag">Room Tags</a> + <a class="btn" href="/room/{{r.id}}/recordings">Room Recordings</a> + <a class="btn" href="/room/{{r.id}}/modify">Modify Room</a> {% if room.is_locked %} - <a class="btn" href="{% prefix %}/room/{{r.id}}/unlock">Unlock Room</a> + <a class="btn" href="/room/{{r.id}}/unlock">Unlock Room</a> {% endif %} - <a class="btn btn-danger" href="{% prefix %}/room/{{r.id}}/delete">Delete Room</a> + <a class="btn btn-danger" href="/room/{{r.id}}/delete">Delete Room</a> {% endif %} </div> </div> @@ -68,13 +67,13 @@ <br/> {% if edit %} <div class="btn-group"> - <a class="btn btn-success" href="{% prefix %}/room/create">Create a New Room</a> + <a class="btn btn-success" href="/room/create">Create a New Room</a> </div> {% endif %} {% endblock %} {% block validators %} {% if tags %} -<a href="http://feed1.w3.org/check.cgi?url={% baseurl %}{% prefix %}/room/+{{tags}}.atom"><img src="{% prefix %}/site-media/img/valid-atom.png" alt="[Valid Atom 1.0]" title="Validate my Atom 1.0 feed" /></a> -<a href="http://feed1.w3.org/check.cgi?url={% baseurl %}{% prefix %}/room/+{{tags}}.rss"><img src="{% prefix %}/site-media/img/valid-rss-rogers.png" alt="[Valid RSS]" title="Validate my RSS feed" /></a> +<a href="http://feed1.w3.org/check.cgi?url=/room/+{{tags}}.atom"><img src="{{STATIC_URL}}/img/valid-atom.png" alt="[Valid Atom 1.0]" title="Validate my Atom 1.0 feed" /></a> +<a href="http://feed1.w3.org/check.cgi?url=/room/+{{tags}}.rss"><img src="{{STATIC_URL}}/img/valid-rss-rogers.png" alt="[Valid RSS]" title="Validate my RSS feed" /></a> {% endif %} {% endblock %}
\ No newline at end of file diff --git a/src/templates/apps/room/recordings.html b/src/templates/apps/room/recordings.html index 7c3b863..8e95b09 100644 --- a/src/templates/apps/room/recordings.html +++ b/src/templates/apps/room/recordings.html @@ -1,5 +1,5 @@ {% extends "base.html" %} -{% load prefix %} + {% load datehumanize %} {% load roomurl %} {% load tagging_tags %} @@ -7,8 +7,8 @@ $(".collapse").collapse({'parent': '#recordings'}); {% endblock %} {% block meta %} -<link rel="alternate" type="application/rss+xml" title="{{title}} recordings (RSS 2.0)" href="{% prefix %}/room/{{room.id}}/recordings.rss" /> -<link rel="alternate" type="application/atom+xml" title="{{title}} recordings (ATOM 1.0)" href="{% prefix %}/room/{{room.id}}/recordings.atom" /> +<link rel="alternate" type="application/rss+xml" title="{{title}} recordings (RSS 2.0)" href="/room/{{room.id}}/recordings.rss" /> +<link rel="alternate" type="application/atom+xml" title="{{title}} recordings (ATOM 1.0)" href="/room/{{room.id}}/recordings.atom" /> {% endblock %} {% block content %} <div class="page-header"> @@ -38,9 +38,9 @@ $(".collapse").collapse({'parent': '#recordings'}); <p>No recordings right now...</p> {% endif %} <br/> - <a class="btn" href="{%prefix%}/room#{{room.id}}">Back to '{{room.name}}'</a> + <a class="btn" href="/room#{{room.id}}">Back to '{{room.name}}'</a> {% endblock %} {% block validators %} -<a href="http://feed1.w3.org/check.cgi?url={% baseurl %}{% prefix %}/room/{{room.id}}/recordings.atom"><img src="{% prefix %}/static/img/valid-atom.png" alt="[Valid Atom 1.0]" title="Validate my Atom 1.0 feed" /></a> -<a href="http://feed1.w3.org/check.cgi?url={% baseurl %}{% prefix %}/room/{{room.id}}/recordings.rss"><img src="{% prefix %}/static/img/valid-rss-rogers.png" alt="[Valid RSS]" title="Validate my RSS feed" /></a> +<a href="http://feed1.w3.org/check.cgi?url={% baseurl %}/room/{{room.id}}/recordings.atom"><img src="{{STATIC_URL}}/img/valid-atom.png" alt="[Valid Atom 1.0]" title="Validate my Atom 1.0 feed" /></a> +<a href="http://feed1.w3.org/check.cgi?url={% baseurl %}/room/{{room.id}}/recordings.rss"><img src="{{STATIC_URL}}/img/valid-rss-rogers.png" alt="[Valid RSS]" title="Validate my RSS feed" /></a> {% endblock %}
\ No newline at end of file diff --git a/src/templates/apps/room/retry.html b/src/templates/apps/room/retry.html index 0e27e77..28054cc 100644 --- a/src/templates/apps/room/retry.html +++ b/src/templates/apps/room/retry.html @@ -1,13 +1,13 @@ -{% load prefix %} + <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> -<meta HTTP-EQUIV="REFRESH" content="{{wait}}; url={% prefix %}/go/{{room.urlpath}}"/> +<meta HTTP-EQUIV="REFRESH" content="{{wait}}; url=/go/{{room.urlpath}}"/> </head> <body> <h1>Room is temporarily locked</h1> <p>Retrying room in {{wait}} seconds...</p> -<img src="{% prefix %}/site-media/img/ajax-loader.gif"/> +<img src="{{STATIC_URL}}img/ajax-loader.gif"/> </body> </html>
\ No newline at end of file diff --git a/src/templates/apps/room/tag.html b/src/templates/apps/room/tag.html index dae2f81..087862f 100644 --- a/src/templates/apps/room/tag.html +++ b/src/templates/apps/room/tag.html @@ -1,8 +1,6 @@ {% extends "edit.html" %} -{% load prefix %} {% load datehumanize %} {% load roomurl %} -{% load prefix %} {% block widgets %} {% endblock %} @@ -22,8 +20,8 @@ class="form-inline" <div> {% for tag in tags %} <span class="btn-group"> - <a class="btn btn-small" href="{%prefix%}/room/+{{tag}}">{{tag}}</a> - <a class="btn btn-small btn-warning" href="{% prefix %}/room/{{room.id}}/untag/{{tag}}"><i class="icon-remove"></i></a> + <a class="btn btn-small" href="/room/+{{tag}}">{{tag}}</a> + <a class="btn btn-small btn-warning" href="/room/{{room.id}}/untag/{{tag}}"><i class="icon-remove"></i></a> </span> {% endfor %} </div> diff --git a/src/templates/apps/room/widget.html b/src/templates/apps/room/widget.html index a602c7e..a658a17 100644 --- a/src/templates/apps/room/widget.html +++ b/src/templates/apps/room/widget.html @@ -1,17 +1,4 @@ {% extends "base.html" %} -{% load prefix %} -{% block widgets %} - //SyntaxHighlighter.all() -{% endblock %} -{% block meta %} -<!-- script type="text/javascript" src="{% prefix %}/site-media/js/xregexp-min.js"></script> -<script type="text/javascript" src="{% prefix %}/site-media/js/shCore.js"></script> -<script type="text/javascript" src="{% prefix %}/site-media/js/shAutoloader.js"></script> -<script type="text/javascript" src="{% prefix %}/site-media/js/shLegacy.js"></script> -<script type="text/javascript" src="{% prefix %}/site-media/js/shBrushXml.js"></script> -<link href="{% prefix %}/site-media/css/shCore.css" rel="stylesheet" type="text/css" /> -<link href="{% prefix %}/site-media/css/shThemeDefault.css" rel="stylesheet" type="text/css" / --> -{% endblock %} {% block content %} <div class="page-header"> <h1>{{title}}</h1> diff --git a/src/templates/apps/stats/domain.html b/src/templates/apps/stats/domain.html index 93fb1a9..f7d9ad3 100644 --- a/src/templates/apps/stats/domain.html +++ b/src/templates/apps/stats/domain.html @@ -1,9 +1,8 @@ {% extends "base.html" %} {% load datehumanize %} -{% load prefix %} {% block widgets %} $.ajax({ - url: '{% prefix %}/api/stats/domain/{{domain}}', + url: '/api/stats/domain/{{domain}}', method: 'GET', success: function (resp) { var graph = $('#graph'); @@ -28,7 +27,7 @@ $.ajax({ <tr><td><b>Total minutes:</b></td><td id="minutes"></td></tr> <tr><td><b>Total rooms:</b></td><td id="rooms"></td></tr> <tr><td><b>Total unique users:</b></td><td id="users"></td></tr> - <tr><td colspan="2" style="padding-top: 10px;"><a href="{% prefix %}/stats">Look at your own statistics</a></td></tr> + <tr><td colspan="2" style="padding-top: 10px;"><a href="/stats">Look at your own statistics</a></td></tr> </table> </div> {% endblock %}
\ No newline at end of file diff --git a/src/templates/apps/stats/room.html b/src/templates/apps/stats/room.html index 7a2a25f..d5e35dd 100644 --- a/src/templates/apps/stats/room.html +++ b/src/templates/apps/stats/room.html @@ -1,9 +1,8 @@ {% extends "base.html" %} {% load datehumanize %} -{% load prefix %} {% block widgets %} $.ajax({ - url: '{% prefix %}/api/stats/room/{{room.id}}', + url: '/api/stats/room/{{room.id}}', method: 'GET', success: function (resp) { var graph = $('#graph'); @@ -26,7 +25,7 @@ $.ajax({ <table> <tr><td><b>Total minutes:</b></td><td id="minutes"></td></tr> <tr><td><b>Total unique users:</b></td><td id="users"></td></tr> - <tr><td colspan="2" style="padding-top: 10px;"><a href="{% prefix %}/stats">Look at your own statistics</a></td></tr> + <tr><td colspan="2" style="padding-top: 10px;"><a href="/stats">Look at your own statistics</a></td></tr> </table> </div> {% endblock %}
\ No newline at end of file diff --git a/src/templates/apps/stats/user.html b/src/templates/apps/stats/user.html index 35a40fb..8b08c6c 100644 --- a/src/templates/apps/stats/user.html +++ b/src/templates/apps/stats/user.html @@ -1,9 +1,8 @@ {% extends "base.html" %} {% load datehumanize %} -{% load prefix %} {% block widgets %} $.ajax({ - url: '{% prefix %}/api/stats/user/{{username}}', + url: '/api/stats/user/{{username}}', method: 'GET', success: function (resp) { var graph = $('#graph'); @@ -26,7 +25,7 @@ $.ajax({ <table> <tr><td><b>Total minutes:</b></td><td id="minutes"></td></tr> <tr><td><b>Total rooms:</b></td><td id="rooms"></td></tr> - <tr><td colspan="2" style="padding-top: 10px;"><a href="{% prefix %}/stats/domain/{{domain}}">Look at statistics for {{domain}}</a></td></tr> + <tr><td colspan="2" style="padding-top: 10px;"><a href="/stats/domain/{{domain}}">Look at statistics for {{domain}}</a></td></tr> </table> </div> {% endblock %}
\ No newline at end of file diff --git a/src/templates/base.html b/src/templates/base.html index 0df70d7..4bd9d80 100644 --- a/src/templates/base.html +++ b/src/templates/base.html @@ -1,68 +1,42 @@ -{% load prefix %} <!DOCTYPE html> <html> <head> <title>Meeting Tools</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> - <link type="text/css" href="{% prefix %}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet"/> - <link href="{% prefix %}/static/css/prettify.css" rel="stylesheet"/> - <!-- link href="{% prefix %}/static/css/lavish.less" rel="stylesheet/less" type="text/css" / --> - <link href="{% prefix %}/static/css/style.css" rel="stylesheet" type="text/css" /> - <!-- link href="{% prefix %}/static/css/gs.css" rel="stylesheet" type="text/css" / --> - <!-- link type="text/css" href="{% prefix %}/static/css/sunet/jquery-ui-1.8.11.custom.css" rel="stylesheet" --> - {% block meta %}{% endblock %} - <script type="text/javascript" src="{% prefix %}/static/js/jquery-1.7.2.min.js"></script> - <script type="text/javascript" src="{% prefix %}/static/js/less-1.3.0.min.js"></script> - <script type="text/javascript" src="{% prefix %}/static/bootstrap/js/bootstrap.min.js"></script> - <!-- script type="text/javascript" src="{% prefix %}/static/js/jquery-ui-1.8.11.custom.min.js"></script --> - <script type="text/javascript" src="{% prefix %}/static/js/jquery.validate.js"></script> - <script type="text/javascript" src="{% prefix %}/static/js/bbq.js"></script> - <!-- script type="text/javascript" src="{% prefix %}/static/js/jquery.form.wizard-3.0.4.js"></script--> - <script type="text/javascript" src="{% prefix %}/static/js/jquery.meetingtools.js"></script> + <link type="text/css" href="{{STATIC_URL}}/bootstrap/css/bootstrap.min.css" rel="stylesheet"/> + <link href="{{STATIC_URL}}/css/prettify.css" rel="stylesheet"/> + <link href="{{theme.base}}/lavish.less" rel="stylesheet/less" type="text/css" /> + <link href="{{STATIC_URL}}/css/style.css" rel="stylesheet" type="text/css" /> + <link href="{{STATIC_URL}}/css/gs.css" rel="stylesheet" type="text/css" /> + + <script type="text/javascript" src="{{STATIC_URL}}/js/jquery-1.7.2.min.js"></script> + <script type="text/javascript" src="{{STATIC_URL}}/js/less-1.3.0.min.js"></script> + <script type="text/javascript" src="{{STATIC_URL}}/bootstrap/js/bootstrap.min.js"></script> + <script type="text/javascript" src="{{STATIC_URL}}/js/jquery.validate.js"></script> + <script type="text/javascript" src="{{STATIC_URL}}/js/bbq.js"></script> + <script type="text/javascript" src="{{STATIC_URL}}/js/jquery.meetingtools.js"></script> <!--[if lte IE 8]> - <script language="javascript" type="text/javascript" src="{% prefix %}/static/js/excanvas.min.js"></script> + <script language="javascript" type="text/javascript" src="{{STATIC_URL}}/js/excanvas.min.js"></script> <![endif]--> - <script type="text/javascript" src="{% prefix %}/static/js/jquery.flot.min.js"></script> - <script type="text/javascript" src="{% prefix %}/static/js/spin.min.js"></script> - <script type="text/javascript" src="{% prefix %}/static/js/jquery.spin.js"></script> - <script type="text/javascript" src="{% prefix %}/static/js/prettify.js"></script> - <!--[if IE]> - <!-- link href="css/sunet-ie6.css" rel="stylesheet" type="text/css" /--> - <![endif]--> - <!--[if lt IE 8]> - <style> + + <script type="text/javascript" src="{{STATIC_URL}}/js/jquery.flot.min.js"></script> + <script type="text/javascript" src="{{STATIC_URL}}/js/spin.min.js"></script> + <script type="text/javascript" src="{{STATIC_URL}}/js/jquery.spin.js"></script> + <script type="text/javascript" src="{{STATIC_URL}}/js/prettify.js"></script> + + {% block meta %}{% endblock %} + <!-- style> .menu li { display: inline; } - </style> + </style --> <![endif]--> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> - <!-- script type="text/javascript" charset="utf-8"> - var is_ssl = ("https:" == document.location.protocol); - var asset_host = is_ssl ? "https://s3.amazonaws.com/getsatisfaction.com/" : "http://s3.amazonaws.com/getsatisfaction.com/"; - document.write(unescape("%3Cscript src='" + asset_host + "javascripts/feedback-v2.js' type='text/javascript'%3E%3C/script%3E")); - </script --> - <!-- script type="text/javascript" charset="utf-8"> - var feedback_widget_options = {}; - - feedback_widget_options.display = "overlay"; - feedback_widget_options.company = "sunet"; - feedback_widget_options.placement = "right"; - feedback_widget_options.color = "#222"; - feedback_widget_options.style = "idea"; - feedback_widget_options.product = "sunet_connect"; - - feedback_widget_options.limit = "3"; - - GSFN.feedback_widget.prototype.local_base_url = "http://getsatisfaction.com"; - GSFN.feedback_widget.prototype.local_ssl_base_url = "https://getsatisfaction.com"; - - var feedback_widget = new GSFN.feedback_widget(feedback_widget_options); - </script --> + <script type="text/javascript" src="{{theme.base}}/theme.js"></script> {% block js %}{% endblock %} <script type="text/javascript"> $(function() { @@ -78,12 +52,12 @@ <a class="brand logo" href="#">Meeting Tools</a> {% if user.is_authenticated %} <div class="login pull-right"> - <a style="margin-right:10px;" href="/user/home">{{user}}</a> + <a style="margin-right:10px;" href="/rooms">{{user}}</a> <a style="vertical-align: bottom;" class="btn btn-mini" href="/accounts/logout"><i class="icon-off"></i> Logout</a> </div> {% else %} <div class="login pull-right"> - <a href="/accounts/login-federated">Login</a> + <a style="vertical-align: bottom;" class="btn btn-mini" href="/accounts/login-federated"><i class="icon-home"></i> Login</a> </div> {% endif %} </div> @@ -105,9 +79,9 @@ <div class="span3"> <ul class="unstyled"> <li><h3>Users</h3></li> - <li><a class="tip" title="Your list of meeting resources.." href="{% prefix %}/rooms">My Profile</a></li> - <li><a class="tip" title="Find out how much you use e-meetings..." href="{% prefix %}/stats">Usage Statistics</a></li> - <li><a class="tip" title="Logout" id="logout" href="{% prefix %}/accounts/logout">Logout</a></li> + <li><a class="tip" title="Your list of meeting resources.." href="/rooms">My Profile</a></li> + <li><a class="tip" title="Find out how much you use e-meetings..." href="/stats">Usage Statistics</a></li> + <li><a class="tip" title="Logout" id="logout" href="/accounts/logout">Logout</a></li> </ul> </div> <div class="span3"> @@ -121,9 +95,9 @@ <ul class="unstyled"> <li><h3>Developers</h3></li> {% if tagstring %} - <li><a href="{% prefix %}/widget/+{{tagstring}}">Meetingtools jQuery widget</a></li> + <li><a href="/widget/+{{tagstring}}">Meetingtools jQuery widget</a></li> {% else %} - <li><a href="{% prefix %}/widget/+example">Meetingtools jQuery widget</a></li> + <li><a href="/widget/+example">Meetingtools jQuery widget</a></li> {% endif %} </ul> </div> diff --git a/src/templates/edit.html b/src/templates/edit.html index b3ea958..5d04b3f 100644 --- a/src/templates/edit.html +++ b/src/templates/edit.html @@ -1,5 +1,4 @@ {% extends "base.html" %} -{% load prefix %} {% block content %} {% block beforeform %}{% endblock %} <div class="page-header"> @@ -22,7 +21,7 @@ {% endif %} {% endfor %} <div class="form-actions"> - <input type="button" class="btn" onClick="document.location='{% prefix %}/rooms'" value="{{cancelname}}"/> + <input type="button" class="btn" onClick="document.location='/rooms'" value="{{cancelname}}"/> <input class="btn btn-success" type="submit" value="{{submitname}}" /> </div> </form> diff --git a/src/templates/form.html b/src/templates/form.html index 27feb42..38dd0ea 100644 --- a/src/templates/form.html +++ b/src/templates/form.html @@ -1,5 +1,4 @@ {% extends "base.html" %} -{% load prefix %} {% block content %} <div class="page-header"> <h1>{% block formtitle %}{{formtitle}}{% endblock %}</h1> |