responsive.css 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580
  1. /* media queries responsive */
  2. /* LARGE DESKTOP SCREENS */
  3. @media (min-width: 1201px) {
  4. }
  5. @media (max-width: 1200px) {
  6. }
  7. /* Tablet or large-screen phone */
  8. @media (max-width: 1024px) {
  9. /* fixes tabs */
  10. .subnav .nav-tabs > li > a, .subnav .nav-pills > li > a {
  11. padding-left: 6px;
  12. padding-right: 6px;
  13. }
  14. /* only for the course tools */
  15. #course_tools .row > [class*="span"], #course_tools .row-fluid > [class*="span"] {
  16. float: left;
  17. }
  18. #top_main_content .span6 {
  19. width: 450px;
  20. }
  21. .section-social #top_main_content .span3 {
  22. width: 200px;
  23. }
  24. #top_main_content #hot_courses .span9 .span6 {
  25. width: 330px;
  26. }
  27. /* Space between course tools */
  28. #course_tools .row .span4 {
  29. width: 240px;
  30. }
  31. #course_tools .row .span4 h4 {
  32. font-size: 14px;
  33. }
  34. }
  35. @media (max-width: 979px) {
  36. /* Remove any padding from the body */
  37. body {
  38. padding-top: 0;
  39. }
  40. #topbar_push {
  41. height: 0px;
  42. }
  43. }
  44. /* Normal tablet or normal-screen phone */
  45. @media (min-width: 768px) and (max-width: 978px) {
  46. /* No topbar */
  47. #topbar {
  48. display:none;
  49. }
  50. /* fixes tabs */
  51. .subnav .nav-tabs > li > a, .subnav .nav-pills > li > a {
  52. padding-left: 6px;
  53. padding-right: 6px;
  54. }
  55. .subnav .dropdown-toggle {
  56. display:none;
  57. }
  58. .subnav .nav > li > a, .navbar .dropdown-menu a, #main .subnav .dropdown-menu li a {
  59. color: #fff;
  60. }
  61. .subnav .nav > li > a:hover,
  62. .subnav .dropdown-menu a:hover {
  63. }
  64. .section-social #top_main_content .span3 {
  65. width: 190px;
  66. }
  67. #top_main_content .span4, #top_main_content .span5 {
  68. width: 250px;
  69. margin-left: 5px;
  70. }
  71. #top_main_content .span6 {
  72. width: 340px;
  73. }
  74. #top_main_content .span9 {
  75. width: 500px;
  76. }
  77. /* Space between course tools */
  78. #course_tools .row .span4 {
  79. width: 220px;
  80. }
  81. }
  82. @media (max-width: 767px) {
  83. /* No topbar */
  84. #topbar {
  85. display:none;
  86. }
  87. .subnav .dropdown-toggle {
  88. display:none;
  89. }
  90. header #header_center, header #header_right {
  91. display:none;
  92. }
  93. #footer_right #admin_name, #footer_right #software_name {
  94. text-align: center !important;
  95. }
  96. .subnav .nav > li > a, .navbar .dropdown-menu a, #main .subnav .dropdown-menu li a {
  97. color: white;
  98. }
  99. footer .container .row {
  100. padding-top: 15px;
  101. }
  102. .notification-panel {
  103. display:none;
  104. }
  105. /* Remove any padding from the body */
  106. body {
  107. padding-top: 0;
  108. }
  109. #topbar_push {
  110. height: 0px;
  111. }
  112. /* Subnav */
  113. .subnav {
  114. border:1px solid #fff;
  115. position: static;
  116. top: auto;
  117. z-index: auto;
  118. width: 100%;
  119. height: auto;
  120. -webkit-box-shadow: none;
  121. -moz-box-shadow: none;
  122. box-shadow: none;
  123. }
  124. .subnav .nav > li {
  125. float: none;
  126. }
  127. .subnav .nav > li > a {
  128. border: 0;
  129. }
  130. .subnav .nav > li + li > a {
  131. border-top: 1px solid #e5e5e5;
  132. }
  133. .subnav .nav > li:first-child > a,
  134. .subnav .nav > li:first-child > a:hover {
  135. -webkit-border-radius: 4px 4px 0 0;
  136. -moz-border-radius: 4px 4px 0 0;
  137. border-radius: 4px 4px 0 0;
  138. }
  139. .subnav .navbar-inner li a:hover {
  140. background-color: #6B8E23;
  141. color: #fff;
  142. }
  143. /* .new_actions */
  144. .new_actions {
  145. border:1px solid #fff;
  146. position: static;
  147. top: auto;
  148. z-index: auto;
  149. width: 100%;
  150. height: auto;
  151. -webkit-box-shadow: none;
  152. -moz-box-shadow: none;
  153. box-shadow: none;
  154. text-align: center;
  155. }
  156. .new_actions .nav > li {
  157. float: none;
  158. }
  159. .new_actions .nav > li > a {
  160. border: 0;
  161. }
  162. .new_actions .nav > li + li > a {
  163. border-top: 1px solid #e5e5e5;
  164. }
  165. .new_actions .nav > li:first-child > a,
  166. .new_actions .nav > li:first-child > a:hover {
  167. -webkit-border-radius: 4px 4px 0 0;
  168. -moz-border-radius: 4px 4px 0 0;
  169. border-radius: 4px 4px 0 0;
  170. }
  171. .section-social #top_main_content .span3 {
  172. width: 170px;
  173. }
  174. .section-social #top_main_content .span4 {
  175. width: 200px;
  176. margin-left: 5px;
  177. float: right;
  178. }
  179. .section-social #top_main_content .span5 {
  180. width: 240px;
  181. margin-left: 5px;
  182. float: left;
  183. }
  184. #top_main_content .span6 {
  185. width: 328px;
  186. float: left;
  187. margin-left: 5px;
  188. }
  189. #top_main_content .span9 {
  190. width: 420px;
  191. margin-left: 5px;
  192. }
  193. .section-social #top_main_content .span9 {
  194. width: 480px;
  195. margin-left: 5px;
  196. }
  197. /* Space between course tools */
  198. #course_tools .row .span4 {
  199. width: 180px;
  200. float: left;
  201. }
  202. #course_tools .row .span4 h4 {
  203. font-size: 14px;
  204. }
  205. /* Footer fixes */
  206. footer {
  207. border-top: 1px solid #CCCCCC;
  208. background-color: #fff;
  209. background-image: none;
  210. color: #666;
  211. }
  212. footer #footer_left a, footer #footer_center a, footer #footer_right a {
  213. color : #999;
  214. }
  215. #footer_left , #footer_right #admin_name, #footer_right #software_name {
  216. text-align: center !important;
  217. }
  218. footer .container .row {
  219. padding-top: 15px;
  220. }
  221. }
  222. /* Intermediary */
  223. @media (max-width: 680px) {
  224. #top_main_content .span9 {
  225. width: 320px;
  226. }
  227. #announcements .bx-prev, #announcements .bx-next {
  228. display: none;
  229. }
  230. }
  231. @media (max-width: 640px) {
  232. .section-mycampus #top_main_content .span3 #user_image_block, .section-mycampus #top_main_content .span3 #profile_block,
  233. .section-mycourses #top_main_content .span3 #user_image_block, .section-mycourses #top_main_content .span3 #profile_block {
  234. margin: 5px;
  235. width: 202px;
  236. float: left;
  237. }
  238. .section-mycampus #top_main_content .span3 #course_block, .section-mycampus #top_main_content .span3 #help_block, .section-mycampus #top_main_content .span3 #skill_block,
  239. .section-mycourses #top_main_content .span3 #course_block, .section-mycourses #top_main_content .span3 #help_block, .section-mycourses #top_main_content .span3 #skill_block {
  240. margin: 5px;
  241. width: 202px;
  242. float: left;
  243. }
  244. .section-mycampus #top_main_content .span3 #help_block {
  245. width: 202px;
  246. float: left;
  247. margin: 5px;
  248. }
  249. #top_main_content .span9 {
  250. width: 540px;
  251. margin-left: 5px;
  252. }
  253. #top_main_content #hot_courses .span9 .thumbnail, .section-mycourses #top_main_content .span9 #main_content .thumbnail {
  254. width: 80px;
  255. float: left;
  256. }
  257. #top_main_content #hot_courses .span9 .well_border, .section-mycourses #top_main_content .span9 #main_content .well {
  258. padding: 8px;
  259. }
  260. #top_main_content #hot_courses .span9 .span6, .section-mycourses #top_main_content .span9 #main_content .well .span7 .span6 {
  261. width: 400px;
  262. float: right;
  263. min-height: auto;
  264. }
  265. }
  266. /* Small-screen phones, horizontal */
  267. @media (max-width: 480px) {
  268. body {
  269. padding-left: 6px;
  270. padding-right: 6px;
  271. }
  272. header #header_center, header #header_right, header #header_left {
  273. display:none;
  274. }
  275. .navbar {
  276. margin-top: 1em;
  277. }
  278. .subnav .navbar-inner .in{
  279. margin-top: 45px
  280. }
  281. /* No chat in mobiles */
  282. #chatmain {
  283. display:none;
  284. }
  285. /* No topbar */
  286. #topbar {
  287. display:none;
  288. }
  289. /* No view as link*/
  290. #view_as_link {
  291. display:none;
  292. }
  293. /* Brand fix */
  294. .navbar .brand {
  295. margin-top: 2px;
  296. font-size: 18px;
  297. }
  298. .subnav .dropdown-toggle {
  299. display:none;
  300. }
  301. .subnav .nav > li > a, .navbar .dropdown-menu a {
  302. color: white;
  303. }
  304. /* Footer fixes */
  305. footer {
  306. border-top: 1px solid #CCCCCC;
  307. background-color: #fff;
  308. background-image: none;
  309. color: #666;
  310. }
  311. footer #footer_left a, footer #footer_center a, footer #footer_right a {
  312. color : #999;
  313. }
  314. #footer_left , #footer_right #admin_name, #footer_right #software_name {
  315. text-align: center !important;
  316. }
  317. footer .container .row {
  318. padding-top: 15px;
  319. }
  320. /* No resize font */
  321. .resize_font {
  322. display:none;
  323. }
  324. h3 {
  325. font-size: 18px;
  326. }
  327. h4 {
  328. font-size: 16px;
  329. }
  330. /* No notifications */
  331. .notification-panel {
  332. display:none;
  333. }
  334. /* Course- home - Show 2 icons instead of one */
  335. #course_tools .row .span4 {
  336. float: left;
  337. height: 150px;
  338. width: 148px;
  339. }
  340. #course_tools .row .span4 h4 {
  341. font-size: 11px;
  342. }
  343. #course_tools .span12 .page-header {
  344. text-align: center;
  345. }
  346. .subbav .nav > li > a:hover,
  347. .subbav .dropdown-menu a:hover {
  348. background-color: #555;
  349. }
  350. /* Improving the login form */
  351. #top_main_content .span3 #login_block {
  352. width: 190px;
  353. float: left;
  354. margin-left: 5px;
  355. margin-top: 5px;
  356. }
  357. #top_main_content .span3 #login_block #lang_form {
  358. margin-bottom: 4px;
  359. }
  360. #top_main_content .span3 #login_block #formLogin form {
  361. margin-bottom: 8px;
  362. }
  363. #top_main_content .span3 #login_block #formLogin .control-label{
  364. font-weight: bold;
  365. }
  366. #top_main_content .span3 #login_block ul.nav-list {
  367. float: left;
  368. width: 120px;
  369. margin-top: -40px;
  370. }
  371. #top_main_content .span3 #login_block .btn {
  372. float: right;
  373. }
  374. /* Improving blocks layout in social network */
  375. .section-social #top_main_content .span3 {
  376. width: 170px;
  377. }
  378. .section-social #top_main_content .span4 {
  379. width: 200px;
  380. margin-left: 5px;
  381. float: right;
  382. }
  383. .section-social #top_main_content .span5 {
  384. width: 240px;
  385. margin-left: 5px;
  386. float: left;
  387. }
  388. #top_main_content .span6 {
  389. width: 400px;
  390. /*min-height: 200px;*/
  391. }
  392. #top_main_content .span9 {
  393. width: 400px;
  394. margin-left: 5px;
  395. }
  396. /* Improving blocks layout in my courses and homepage */
  397. .section-mycampus #top_main_content.span9 {
  398. float: left;
  399. }
  400. #top_main_content .span9 #announcements .span6 {
  401. width: 330px;
  402. }
  403. #top_main_content #hot_courses .span9 .thumbnail, .section-mycourses #top_main_content .span9 #main_content .thumbnail {
  404. width: 80px;
  405. float: left;
  406. }
  407. #top_main_content #hot_courses .span9 .well_border, .section-mycourses #top_main_content .span9 #main_content .well {
  408. padding: 8px;
  409. }
  410. #top_main_content #hot_courses .span9 .span6, .section-mycourses #top_main_content .span9 #main_content .well .span7 .span6 {
  411. width: 270px;
  412. float: right;
  413. min-height: auto;
  414. }
  415. .section-mycourses #top_main_content .span9 #main_content .well .pull-right, .section-mycampus #top_main_content .span9 #hot_courses .pull-right {
  416. display: none;
  417. }
  418. .section-mycampus #top_main_content .span3, .section-mycourses #top_main_content .span3 {
  419. float: left;
  420. width: auto;
  421. clear: both;
  422. }
  423. .section-social #top_main_content .span9, .section-mycourses #top_main_content .span9 {
  424. width: 480px;
  425. margin-left: 5px;
  426. }
  427. .section-mycampus #top_main_content .span3 #user_image_block, .section-mycampus #top_main_content .span3 #profile_block,
  428. .section-mycourses #top_main_content .span3 #user_image_block, .section-mycourses #top_main_content .span3 #profile_block {
  429. margin: 5px;
  430. width: 192px;
  431. float: left;
  432. }
  433. .section-mycampus #top_main_content .span3 #course_block, .section-mycampus #top_main_content .span3 #help_block, .section-mycampus #top_main_content .span3 #skill_block,
  434. .section-mycourses #top_main_content .span3 #course_block, .section-mycourses #top_main_content .span3 #help_block, .section-mycourses #top_main_content .span3 #skill_block {
  435. margin: 5px;
  436. width: 192px;
  437. float: left;
  438. }
  439. .section-mycampus #top_main_content .span3 #help_block {
  440. width: 192px;
  441. float: left;
  442. margin-left: 5px;
  443. }
  444. .section-mycampus #top_main_content #homepage {
  445. margin-top: 20px;
  446. }
  447. .section-mycourses #top_main_content .span9 #main_content {
  448. width: 420px;
  449. }
  450. #top_main_content .page-header h1 {
  451. text-align: center;
  452. }
  453. }
  454. /* Phone, vertical screen */
  455. @media (max-width: 320px) {
  456. body {
  457. padding-left: 3px;
  458. padding-right: 3px;
  459. }
  460. header #header_center, header #header_right, header #header_left {
  461. display:none;
  462. }
  463. .navbar {
  464. margin-top: 1em;
  465. }
  466. .navbar .brand {
  467. margin-top: 2px;
  468. font-size: 14px;
  469. }
  470. #top_main_content .span3 #login_block {
  471. width: 160px;
  472. float: left;
  473. }
  474. #top_main_content .span3 #help_block {
  475. width: 60px;
  476. float: right;
  477. margin-left: 10px;
  478. margin-right: 10px;
  479. }
  480. /* No view as link*/
  481. #view_as_link {
  482. display:none;
  483. }
  484. /* Smaller brand */
  485. .navbar .brand {
  486. font-size: 14px;
  487. }
  488. /* In order to avoid clicking in the main title instead of the expand button */
  489. .subnav .navbar-inner .in{
  490. margin-top: 45px
  491. }
  492. #top_main_content .span9 {
  493. width: 290px;
  494. margin: 0;
  495. }
  496. #top_main_content .span3 #login_block {
  497. width: 190px;
  498. }
  499. #top_main_content .span3 #help_block {
  500. width: 100px;
  501. }
  502. /*
  503. .section-mycourses #top_main_content .span9 #main_content {
  504. width: 290px;
  505. }
  506. */
  507. #top_main_content #hot_courses .span9 .span6, .section-mycourses #top_main_content .span9 #main_content .well .span7 .span6 {
  508. width: 150px;
  509. }
  510. #top_main_content #hot_courses .span9 .span6 .btn {
  511. float: left;
  512. margin-top: 5px;
  513. }
  514. #top_main_content #hot_courses .vote_label_info {
  515. display: none;
  516. }
  517. #course_tools .row .span4 {
  518. width: 120px;
  519. }
  520. }