Drupal: Added responsive-media.css CSS file to theme.

CSS is used to display/hide elements depending on if the width of the navigation bar is larger than that of the window width.
Changed BOINC theme to match changes in einstein theme.
Removed unused CSS classes. Fixed minor CSS bugs.
Updated CSS to remove unneeded tag.
Removed tab CSS style for mobile screens.
This commit is contained in:
Shawn Kwang 2017-02-27 14:48:57 -06:00
parent 03467ed30e
commit 067b8ee5ce
1 changed files with 153 additions and 0 deletions

View File

@ -0,0 +1,153 @@
/* Id */
/**
* @file
* Responsive Media Styling
*
* Contains CSS styles to handle different screen sizes. This CSS file is
* used mainly for browsers with Javascript DISABLED.
*/
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* CSS Style designed for large desktop screens
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
@media only screen and (min-width: 980px) {
#main-wrapper {
margin: 16px auto 0;
}
/* Hide the mobile menu icon. Hide the mobile navigation menu. */
#navigation-mmt {
display: none;
}
#block-mobile_menu_toggle-0 {
display: none;
}
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* CSS Style designed screens less than 980px. 980px is the fixed
* width of the desktop site.
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
@media only screen and (max-width: 979px) {
/* Main wrapper margin set to 16px top, 12px left & right. */
#main-wrapper {
margin: 16px 12px 12px;
}
/* Hide the mobile menu icon. Hide the mobile navigation menu. */
#navigation-mmt {
display: none;
}
#block-mobile_menu_toggle-0 {
display: none;
}
/* Main content pane should have flexible width. */
#content,
.no-sidebars #content {
width: auto;
}
/* Adjust forum wrapping for smaller screens. */
#forum td.created,
#forum td.posts,
#forum td.topics,
#forum td.last-reply,
#forum td.replies,
#forum td.pager,
#forum td.icon {
white-space: normal;
}
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* CSS Style designed for mobile screens
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
@media only screen and (max-width: 750px) {
/* Hide the primary and secondary menus */
#main-menu ul,
#sub-menu ul,
#action-links ul {
display: none;
}
/* Set the navigation bar space for the mobile menu.*/
#navigation {
overflow: visible;
min-height: 31px;
}
/* Hide the hamburger menu icon. */
#block-mobile_menu_toggle-0 {
display: none;
}
/* Show the mobile menu always, instead of being toggled by JS. */
#navigation-mmt {
display: block;
margin-left: 39px;
padding-top: 31px;
}
/* Modifty the navigation/mobile menu CSS so that menu links are
arranged vertically.*/
#navigation .block .menu {
width: auto;
float: none;
border: none;
padding: 2px 0 0 0;
}
#navigation .block .menu li {
float: none;
border: none;
}
#navigation li.expanded ul.menu {
padding: 0 20px;
}
/* Remove height style for navigation <a> links,
Remove padding as well. */
#navigation li a {
height: auto;
padding: 0;
}
/* Set base mobile menu font color and size. */
#navigation .block .menu li a {
color: #faa341;
font-size: 14px;
height: auto;
}
/* Add active and hover color for links in mobile menu. */
#navigation .block .menu li a.active,
#navigation .block .menu li a:hover {
color: black;
}
/* Add caret left/down icons to the mobile menu for items that
expand. */
#navigation li.expanded.dhtml-menu.collapsed>a:after {
/* Caret left */
content: "\f0da";
font-family: FontAwesome;
padding-left: 5px;
}
#navigation li.expanded.dhtml-menu.active-trail>a:after {
/* Caret down */
content: "\f0d7";
font-family: FontAwesome;
padding-left: 5px;
}
/* Reset CSS on tabs class for mobile menus. */
.tab {
all: unset;
}
}