/*! * part of the package to convert web2py elements to bootstrap3 theme * Developed by Paolo Caruccio ( paolo.caruccio66@gmail.com ) * Released under MIT license * version 1 rev.201402261600 * * Supported version of bootstrap framework: 3.0.2+ * The full package includes: * - bootstrap3.py python module * - this css file * - web2py-bootstrap3.js * - example of layout.html * - rules overriding web2py.css */ div.flash.alert{ background-image: none; border-radius: 4px; -o-border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-width: 1px; color: rgb(51, 51, 51); font-weight: normal; margin: 0 0 20px 0; min-width: 28px; opacity: 1; padding: 15px 35px 15px 15px; vertical-align: baseline; right: auto; } div.flash.alert:hover { opacity: 1; } .ie-lte8 div.flash { filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); } .ie-lte8 div.flash:hover { filter:alpha(opacity=100); } ul.navbar-nav li { margin-bottom: 0; } ul.list-group, .bs3-form ul , ul.nav-tabs, ul.nav-pills { margin-left: 0; } p.lead { text-align: inherit; } form label { white-space: normal; } form.form-inline [type="text"], [type="password"], select { margin-right: 0; } div.error { display: none; width: auto; background: transparent; border: none; padding: 0; padding-left: 5px; background-image: none; } /* * bootstrap3 adapters * essential rules */ /* flash messages */ div.flash.alert { display: none; position: fixed; top: 70px; right: 75px; cursor: pointer; z-index: 1000; background-color: #f9edbe; border-color: #f0c36d; } div.flash.alert.centered { right: auto; } div.flash.alert.leftside { right: auto; left: 75px; } div.flash.alert #closeflash { display: inline-block; position: relative; top: -2px; right: -21px; color: inherit; cursor: pointer; opacity: 0.5; float: right; font-size: 21px; font-weight: bold; line-height: 1; text-shadow: 0 1px 0 #ffffff; margin: 0; padding: 0; } /* buttons */ .bs3-form-btn { margin-top: 3px; margin-bottom: 3px; } /*image preview in update forms*/ .w2p-uploaded-file .btn-group { vertical-align: top; margin-top: 0; } #file-reset-btn { vertical-align: top; } .w2p-uploaded-file input[type="file"] { display:inline-block; padding-top: 7px; } .w2p-file-preview img { max-width: 150px; } .w2p-file-preview:hover img { background-color: #ebebeb; border-color: #adadad; } .w2p-file-preview span { min-width: 150px; max-width: 150px; display: inline-block; line-height: 40px; min-height: 40px; } #no-file { display: inline-block; background-color: #eee; vertical-align: middle; text-align: center; border-radius: 4px; min-width: 150px; max-width: 150px; line-height: 43px; min-height: 43px; } /* form-inline */ .form-inline .form-group { margin-right: 4px; } /* list widget */ .w2p_list li { margin-bottom: 6px; } .w2p_list li input { display: inline-block; width: 59%; margin-right: 4px; } /* autocomplete widget */ div[id^=_autocomplete_] { margin-top: -10px; z-index: 1; } select.autocomplete { display: block; padding: 6px 12px; font-size: 14px; line-height: 1.428571429; color: #555; vertical-align: middle; background-color: #fff; background-image: none; border: 1px solid #ccc; border-color: #428bca; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; } /* nav-tabs */ .nav-tabs { margin-bottom: 15px; } /* dropdown multilevels in menu*/ /* fix issue when screen height is shorter than bs3 default */ .navbar-collapse.short-screen { max-height: 200px !important; } .dropdown-submenu>a:after { display: block; content: " "; float: right; width: 0; height: 0; margin-top: 5px; margin-right: -10px; border-style: solid; /* right-arrow */ border-color: transparent #cccccc; border-width: 4px 0 4px 4px; } @media (min-width: 768px) { /* animation */ .navbar-nav .dropdown-menu { top: -9999px; display: block; opacity: 0; -webkit-transition: opacity .4s ease-in-out; } .dropdown-submenu { position: relative; } .dropdown-submenu>.dropdown-menu { position: absolute; top: 0; left: 100%; margin-top: -6px; margin-left: -1px; border-radius: 0 4px 4px 4px; /* animation */ left: -9999px; opacity: 0; display: block; -webkit-transition: opacity .4s ease-in-out; } .navbar ul.nav li[data-w2pmenulevel="l0"]:hover >ul.dropdown-menu { display: block; /* animation */ top: 100%; opacity: 1; } .dropdown-submenu:hover>.dropdown-menu { display: block; /* animation */ left: 100%; opacity: 1; } .dropdown-submenu:hover>a, .dropdown-submenu:focus>a { color: #fff; text-decoration: none; background-color: #357ebd; } .navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus, .navbar-inverse .navbar-nav>li:hover>a { color: #fff; background-color: black; } .dropdown-submenu>a:hover:after, .dropdown-submenu:hover>a:after { /* left-arrow */ border-color: transparent #fff; border-width: 4px 4px 4px 0; } } @media (max-width: 767px){ .dropdown-menu { width: 100%; display: none; } .dropdown-submenu>.dropdown-menu { position: static; float: none; display: none; border: none; margin: 0; padding: 0; box-shadow: none; text-indent: 8px; } .dropdown-submenu>.dropdown-menu.open { display: block; height: 100%; } .dropdown-submenu>a:after { /* down-arrow */ border-color: #cccccc transparent; border-width: 4px 4px 0px 4px; } .dropdown-submenu>a:hover:after { border-color: #ffffff transparent; } .dropdown-submenu>a.active { font-weight: 700; } .dropdown-submenu>a.active:after { /* up-arrow */ border-color: #ffffff transparent; border-width: 0px 4px 4px 4px; } } /* * application customization * add custom rules */ body { padding-top: 70px; } /* web2py logo */ #web2py-logo { color: #c6cecc; } #web2py-logo b { display: inline-block; margin-top: -1px; } #web2py-logo b>span { font-size: 22px; color: white; } #web2py-logo:hover { color: white; } /*footer*/ #footer>div.row { padding-top: 9px; margin: 20px 0 40px 0; border-top: 1px solid #eee; } #footer p { margin-left: -15px; margin-right: -15px; } .dropdown .highlighted { color: #428bca; } form { max-width: 600px; } ul.w2p_list { margin-left: 0; padding-left: 0; } .background { background: url(../images/background.jpg) no-repeat center center; } body { padding-top: 50px } header { -webkit-box-shadow: 0px 0px 8px 2px #000000; -moz-box-shadow: 0px 0px 8px 2px #000000; box-shadow: 0px 0px 8px 2px #000000; } main { padding-bottom: 50px; } footer { padding:50px; background: #333; color: #aaa; } header h1 { color: white !important; text-shadow: 0 0 7px black; } header .jumbotron { background-color: transparent; } .nav a, .btn, .btn-default { text-shadow: none; font-weight: bold; } .flash { opacity: 0.9 !important; right: 100px; } .dropdown { z-index: 2000; } .help-block { margin-top: 0; margin-bottom: 0; } #w2padmin-btn { margin:30px 0 30px 0; } .hidden {display:none;visibility:visible} .right {float:right; text-align:right} .left {float:left; text-align:left} .center {width:100%; text-align:center; vertical-align:middle} /* fix ie problem with menu */ td.w2p_fw {padding-bottom:1px} td.w2p_fl,td.w2p_fw,td.w2p_fc {vertical-align:top} td.w2p_fl {text-align:left} td.w2p_fl, td.w2p_fw {padding-right:7px} td.w2p_fl,td.w2p_fc {padding-top:4px} div.w2p_export_menu {margin:5px 0} div.w2p_export_menu a, div.w2p_wiki_tags a, div.w2p_cloud a {margin-left:5px; padding:2px 5px; background-color:#f1f1f1; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;} /* tr#submit_record__row {border-top:1px solid #E5E5E5} */ #submit_record__row td {padding-top:.5em} /* Fix */ #auth_user_remember__row label {display:inline} #web2py_user_form td {vertical-align:top} div.error_wrapper {display:block} div.error { color:red; padding:5px; display:inline-block; } .copyright {float:left} #poweredBy {float:right} /* #MEDIA QUERIES SECTION */ /* *Grid * * The default style for SQLFORM.grid even using jquery-iu or another ui framework * will look better with the declarations below * if needed to remove base.css consider keeping these following lines in some css file. */ /* .web2py_table {border:1px solid #ccc} */ .web2py_paginator {} .web2py_grid {width:100%} .web2py_grid table {width:100%} .web2py_grid tbody td {padding:2px 5px 2px 5px; vertical-align: middle;} .web2py_grid .web2py_form td {vertical-align: top;} .web2py_grid thead th,.web2py_grid tfoot td { background-color:#EAEAEA; padding:10px 5px 10px 5px; } .web2py_grid tr.odd {background-color:#F9F9F9} .web2py_grid tr:hover {background-color:#F5F5F5} /* .web2py_breadcrumbs a { line-height:20px; margin-right:5px; display:inline-block; padding:3px 5px 3px 5px; font-family:'lucida grande',tahoma,verdana,arial,sans-serif; color:#3C3C3D; text-shadow:1px 1px 0 #FFFFFF; white-space:nowrap; overflow:visible; cursor:pointer; background:#ECECEC; border:1px solid #CACACA; -webkit-border-radius:2px; -moz-border-radius:2px; -webkit-background-clip:padding-box; border-radius:2px; outline:none; position:relative; zoom:1; *display:inline; } */ .web2py_console form { width: 100%; display: inline; vertical-align: middle; margin: 0 0 0 5px; } .web2py_console form select { margin:0; } .web2py_search_actions { float:left; text-align:left; } .web2py_grid .row_buttons { min-height:25px; vertical-align:middle; } .web2py_grid .row_buttons a { margin:3px; } .web2py_search_actions { width:100%; } .web2py_grid .row_buttons a, .web2py_paginator ul li a, .web2py_search_actions a, .web2py_console input[type=submit], .web2py_console input[type=button], .web2py_console button { line-height:20px; margin-right:2px; display:inline-block; padding:3px 5px 3px 5px; } .web2py_counter { margin-top:5px; margin-right:2px; width:35%; float:right; text-align:right; } /*Fix firefox problem*/ .web2py_table {clear:both; display:block} .web2py_paginator { padding:5px; text-align:right; background-color:#f2f2f2; } .web2py_paginator ul { list-style-type:none; margin:0px; padding:0px; } .web2py_paginator ul li { display:inline; } .web2py_paginator .current { font-weight:bold; } .web2py_breadcrumbs ul { list-style:none; margin-bottom:18px; } li.w2p_grid_breadcrumb_elem { display:inline-block; } .web2py_console form { vertical-align: middle; } .web2py_console input, .web2py_console select, .web2py_console a { margin: 2px; } #wiki_page_body { width: 600px; height: auto; min-height: 400px; } /* fix some IE problems */ .ie-lte7 .topbar .container {z-index:2} .ie-lte8 div.flash{ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#222222', endColorstr='#000000', GradientType=0 ); } .ie-lte8 div.flash:hover {filter:alpha(opacity=25);} .ie9 #w2p_query_panel {padding-bottom:2px} .web2py_console .form-control {width: 20%; display: inline;} .web2py_console #w2p_keywords {width: 50%;} .web2py_search_actions a, .web2py_console input[type=submit], .web2py_console input[type=button], .web2py_console button { padding: 6px 12px; } /* input.date,input.time,input.datetime,input.double,input.integer { max-width: 300px; } */