From 9c1dd7918effa6e8db5c0797c370516a5c31c2ad Mon Sep 17 00:00:00 2001 From: hardythe1 Date: Fri, 16 Mar 2012 19:26:01 +0530 Subject: changes to maintain the UI in various resolutions --- testapp/static/exam/css/base.css | 541 +---------------------------------- testapp/static/exam/css/question.css | 24 +- 2 files changed, 20 insertions(+), 545 deletions(-) (limited to 'testapp/static/exam/css') diff --git a/testapp/static/exam/css/base.css b/testapp/static/exam/css/base.css index 069729d..48a2269 100644 --- a/testapp/static/exam/css/base.css +++ b/testapp/static/exam/css/base.css @@ -245,30 +245,7 @@ body { .container:after { clear: both; } -.container-fluid { - position: relative; - min-width: 940px; - padding-left: 20px; - padding-right: 20px; - zoom: 1; -} -.container-fluid:before, .container-fluid:after { - display: table; - content: ""; - zoom: 1; -} -.container-fluid:after { - clear: both; -} -.container-fluid > .sidebar { - position: absolute; - top: 65px; - left: 20px; - width: 220px; -} -.container-fluid > .content { - margin-left: 240px; -} + a { color: #0069d6; text-decoration: none; @@ -1673,174 +1650,6 @@ a.menu:after, .dropdown-toggle:after { -moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025); box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.025), inset 0 -1px rgba(0, 0, 0, 0.025); } -.open .menu, -.dropdown.open .menu, -.open .dropdown-toggle, -.dropdown.open .dropdown-toggle { - color: #ffffff; - background: #ccc; - background: rgba(0, 0, 0, 0.3); -} -.open .menu-dropdown, -.dropdown.open .menu-dropdown, -.open .dropdown-menu, -.dropdown.open .dropdown-menu { - display: block; -} -.tabs, .pills { - margin: 0 0 18px; - padding: 0; - list-style: none; - zoom: 1; -} -.tabs:before, -.pills:before, -.tabs:after, -.pills:after { - display: table; - content: ""; - zoom: 1; -} -.tabs:after, .pills:after { - clear: both; -} -.tabs > li, .pills > li { - float: left; -} -.tabs > li > a, .pills > li > a { - display: block; -} -.tabs { - border-color: #ddd; - border-style: solid; - border-width: 0 0 1px; -} -.tabs > li { - position: relative; - margin-bottom: -1px; -} -.tabs > li > a { - padding: 0 15px; - margin-right: 2px; - line-height: 34px; - border: 1px solid transparent; - -webkit-border-radius: 4px 4px 0 0; - -moz-border-radius: 4px 4px 0 0; - border-radius: 4px 4px 0 0; -} -.tabs > li > a:hover { - text-decoration: none; - background-color: #eee; - border-color: #eee #eee #ddd; -} -.tabs .active > a, .tabs .active > a:hover { - color: #808080; - background-color: #ffffff; - border: 1px solid #ddd; - border-bottom-color: transparent; - cursor: default; -} -.tabs .menu-dropdown, .tabs .dropdown-menu { - top: 35px; - border-width: 1px; - -webkit-border-radius: 0 6px 6px 6px; - -moz-border-radius: 0 6px 6px 6px; - border-radius: 0 6px 6px 6px; -} -.tabs a.menu:after, .tabs .dropdown-toggle:after { - border-top-color: #999; - margin-top: 15px; - margin-left: 5px; -} -.tabs li.open.menu .menu, .tabs .open.dropdown .dropdown-toggle { - border-color: #999; -} -.tabs li.open a.menu:after, .tabs .dropdown.open .dropdown-toggle:after { - border-top-color: #555; -} -.pills a { - margin: 5px 3px 5px 0; - padding: 0 15px; - line-height: 30px; - text-shadow: 0 1px 1px #ffffff; - -webkit-border-radius: 15px; - -moz-border-radius: 15px; - border-radius: 15px; -} -.pills a:hover { - color: #ffffff; - text-decoration: none; - text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); - background-color: #00438a; -} -.pills .active a { - color: #ffffff; - text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25); - background-color: #0069d6; -} -.pills-vertical > li { - float: none; -} -.tab-content > .tab-pane, -.pill-content > .pill-pane, -.tab-content > div, -.pill-content > div { - display: none; -} -.tab-content > .active, .pill-content > .active { - display: block; -} -.breadcrumb { - padding: 7px 14px; - margin: 0 0 18px; - background-color: #f5f5f5; - background-repeat: repeat-x; - background-image: -khtml-gradient(linear, left top, left bottom, from(#ffffff), to(#f5f5f5)); - background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5); - background-image: -ms-linear-gradient(top, #ffffff, #f5f5f5); - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f5f5f5)); - background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5); - background-image: -o-linear-gradient(top, #ffffff, #f5f5f5); - background-image: linear-gradient(top, #ffffff, #f5f5f5); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0); - border: 1px solid #ddd; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; - -webkit-box-shadow: inset 0 1px 0 #ffffff; - -moz-box-shadow: inset 0 1px 0 #ffffff; - box-shadow: inset 0 1px 0 #ffffff; -} -.breadcrumb li { - display: inline; - text-shadow: 0 1px 0 #ffffff; -} -.breadcrumb .divider { - padding: 0 5px; - color: #bfbfbf; -} -.breadcrumb .active a { - color: #404040; -} -.hero-unit { - background-color: #f5f5f5; - margin-bottom: 30px; - padding: 60px; - -webkit-border-radius: 6px; - -moz-border-radius: 6px; - border-radius: 6px; -} -.hero-unit h1 { - margin-bottom: 0; - font-size: 60px; - line-height: 1; - letter-spacing: -1px; -} -.hero-unit p { - font-size: 18px; - font-weight: 200; - line-height: 27px; -} footer { margin-top: 17px; padding-top: 17px; @@ -2156,317 +1965,6 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { .alert-message.block-message.info p a { color: #404040; } -.pagination { - height: 36px; - margin: 18px 0; -} -.pagination ul { - float: left; - margin: 0; - border: 1px solid #ddd; - border: 1px solid rgba(0, 0, 0, 0.15); - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; - -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); -} -.pagination li { - display: inline; -} -.pagination a { - float: left; - padding: 0 14px; - line-height: 34px; - border-right: 1px solid; - border-right-color: #ddd; - border-right-color: rgba(0, 0, 0, 0.15); - *border-right-color: #ddd; - /* IE6-7 */ - - text-decoration: none; -} -.pagination a:hover, .pagination .active a { - background-color: #c7eefe; -} -.pagination .disabled a, .pagination .disabled a:hover { - background-color: transparent; - color: #bfbfbf; -} -.pagination .next a { - border: 0; -} -.well { - background-color: #f5f5f5; - margin-bottom: 20px; - padding: 19px; - min-height: 505px; - border: 1px solid #eee; - border: 1px solid rgba(0, 0, 0, 0.05); - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); -} -.well blockquote { - border-color: #ddd; - border-color: rgba(0, 0, 0, 0.15); -} -.modal-backdrop { - background-color: #000000; - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 10000; -} -.modal-backdrop.fade { - opacity: 0; -} -.modal-backdrop, .modal-backdrop.fade.in { - filter: alpha(opacity=80); - -khtml-opacity: 0.8; - -moz-opacity: 0.8; - opacity: 0.8; -} -.modal { - position: fixed; - top: 50%; - left: 50%; - z-index: 11000; - max-height: 500px; - overflow: auto; - width: 560px; - margin: -250px 0 0 -280px; - background-color: #ffffff; - border: 1px solid #999; - border: 1px solid rgba(0, 0, 0, 0.3); - *border: 1px solid #999; - /* IE6-7 */ - - -webkit-border-radius: 6px; - -moz-border-radius: 6px; - border-radius: 6px; - -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); - -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); - box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); - -webkit-background-clip: padding-box; - -moz-background-clip: padding-box; - background-clip: padding-box; -} -.modal .close { - margin-top: 7px; -} -.modal.fade { - -webkit-transition: opacity .3s linear, top .3s ease-out; - -moz-transition: opacity .3s linear, top .3s ease-out; - -ms-transition: opacity .3s linear, top .3s ease-out; - -o-transition: opacity .3s linear, top .3s ease-out; - transition: opacity .3s linear, top .3s ease-out; - top: -25%; -} -.modal.fade.in { - top: 50%; -} -.modal-header { - border-bottom: 1px solid #eee; - padding: 5px 15px; -} -.modal-body { - padding: 15px; -} -.modal-body form { - margin-bottom: 0; -} -.modal-footer { - background-color: #f5f5f5; - padding: 14px 15px 15px; - border-top: 1px solid #ddd; - -webkit-border-radius: 0 0 6px 6px; - -moz-border-radius: 0 0 6px 6px; - border-radius: 0 0 6px 6px; - -webkit-box-shadow: inset 0 1px 0 #ffffff; - -moz-box-shadow: inset 0 1px 0 #ffffff; - box-shadow: inset 0 1px 0 #ffffff; - zoom: 1; - margin-bottom: 0; -} -.modal-footer:before, .modal-footer:after { - display: table; - content: ""; - zoom: 1; -} -.modal-footer:after { - clear: both; -} -.modal-footer .btn { - float: right; - margin-left: 5px; -} -.modal .popover, .modal .twipsy { - z-index: 12000; -} -.twipsy { - display: block; - position: absolute; - visibility: visible; - padding: 5px; - font-size: 11px; - z-index: 1000; - filter: alpha(opacity=80); - -khtml-opacity: 0.8; - -moz-opacity: 0.8; - opacity: 0.8; -} -.twipsy.fade.in { - filter: alpha(opacity=80); - -khtml-opacity: 0.8; - -moz-opacity: 0.8; - opacity: 0.8; -} -.twipsy.above .twipsy-arrow { - bottom: 0; - left: 50%; - margin-left: -5px; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-top: 5px solid #000000; -} -.twipsy.left .twipsy-arrow { - top: 50%; - right: 0; - margin-top: -5px; - border-top: 5px solid transparent; - border-bottom: 5px solid transparent; - border-left: 5px solid #000000; -} -.twipsy.below .twipsy-arrow { - top: 0; - left: 50%; - margin-left: -5px; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-bottom: 5px solid #000000; -} -.twipsy.right .twipsy-arrow { - top: 50%; - left: 0; - margin-top: -5px; - border-top: 5px solid transparent; - border-bottom: 5px solid transparent; - border-right: 5px solid #000000; -} -.twipsy-inner { - padding: 3px 8px; - background-color: #000000; - color: white; - text-align: center; - max-width: 200px; - text-decoration: none; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; -} -.twipsy-arrow { - position: absolute; - width: 0; - height: 0; -} -.popover { - position: absolute; - top: 0; - left: 0; - z-index: 1000; - padding: 5px; - display: none; -} -.popover.above .arrow { - bottom: 0; - left: 50%; - margin-left: -5px; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-top: 5px solid #000000; -} -.popover.right .arrow { - top: 50%; - left: 0; - margin-top: -5px; - border-top: 5px solid transparent; - border-bottom: 5px solid transparent; - border-right: 5px solid #000000; -} -.popover.below .arrow { - top: 0; - left: 50%; - margin-left: -5px; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-bottom: 5px solid #000000; -} -.popover.left .arrow { - top: 50%; - right: 0; - margin-top: -5px; - border-top: 5px solid transparent; - border-bottom: 5px solid transparent; - border-left: 5px solid #000000; -} -.popover .arrow { - position: absolute; - width: 0; - height: 0; -} -.popover .inner { - background: #000000; - background: rgba(0, 0, 0, 0.8); - padding: 3px; - overflow: hidden; - width: 280px; - -webkit-border-radius: 6px; - -moz-border-radius: 6px; - border-radius: 6px; - -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); - -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); - box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); -} -.popover .title { - background-color: #f5f5f5; - padding: 9px 15px; - line-height: 1; - -webkit-border-radius: 3px 3px 0 0; - -moz-border-radius: 3px 3px 0 0; - border-radius: 3px 3px 0 0; - border-bottom: 1px solid #eee; -} -.popover .content { - background-color: #ffffff; - padding: 14px; - -webkit-border-radius: 0 0 3px 3px; - -moz-border-radius: 0 0 3px 3px; - border-radius: 0 0 3px 3px; - -webkit-background-clip: padding-box; - -moz-background-clip: padding-box; - background-clip: padding-box; -} -.popover .content p, .popover .content ul, .popover .content ol { - margin-bottom: 0; -} -.fade { - -webkit-transition: opacity 0.15s linear; - -moz-transition: opacity 0.15s linear; - -ms-transition: opacity 0.15s linear; - -o-transition: opacity 0.15s linear; - transition: opacity 0.15s linear; - opacity: 0; -} -.fade.in { - opacity: 1; -} .label { padding: 1px 3px 2px; font-size: 9.75px; @@ -2492,41 +1990,4 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { .label.notice { background-color: #62cffc; } -.media-grid { - margin-left: -20px; - margin-bottom: 0; - zoom: 1; -} -.media-grid:before, .media-grid:after { - display: table; - content: ""; - zoom: 1; -} -.media-grid:after { - clear: both; -} -.media-grid li { - display: inline; -} -.media-grid a { - float: left; - padding: 4px; - margin: 0 0 18px 20px; - border: 1px solid #ddd; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); - -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); -} -.media-grid a img { - display: block; -} -.media-grid a:hover { - border-color: #0069d6; - -webkit-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); - -moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); - box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25); -} diff --git a/testapp/static/exam/css/question.css b/testapp/static/exam/css/question.css index a4abdf5..3fd0c3c 100644 --- a/testapp/static/exam/css/question.css +++ b/testapp/static/exam/css/question.css @@ -1,11 +1,25 @@ .time-div { - background-color:red; - border:2px solid black; - padding: 2px; + background-color:black; + padding: 8px; + color: white; vertical-align:middle; - width:auto; - height:12px; + width:150px; float:right; border-radius: 6px 6px 6px 6px; } +.td1-class +{ + width:175px; +} +.td2-class +{ + width:50px; +} +.page-header { + height:50px; + text-align: center; + background-color: #f5f5f5; + padding: 35px 20px 10px; + margin: -20px -20px 20px; +} -- cgit