summaryrefslogtreecommitdiffstats
path: root/public/stylesheets/responsive.css
diff options
context:
space:
mode:
Diffstat (limited to 'public/stylesheets/responsive.css')
-rw-r--r--public/stylesheets/responsive.css595
1 files changed, 595 insertions, 0 deletions
diff --git a/public/stylesheets/responsive.css b/public/stylesheets/responsive.css
new file mode 100644
index 000000000..a01d126a4
--- /dev/null
+++ b/public/stylesheets/responsive.css
@@ -0,0 +1,595 @@
+/*----------------------------------------*\
+ RESPONSIVE CSS
+\*----------------------------------------*/
+
+
+/*
+
+ CONTENTS
+
+ A) BASIC MOBILE RESETS
+ B) HEADER & TOP MENUS
+ C) MAIN CONTENT & SIDEBAR
+ D) TOGGLE BUTTON & FLYOUT MENU
+
+*/
+
+
+/* Hide new elements (toggle button and flyout menu) above 900px */
+.mobile-toggle-button,
+.flyout-menu
+{
+ display: none;
+}
+
+/*
+ redmine's body is set to min-width: 900px
+ add first breakpoint here and start adding responsiveness
+*/
+
+@media all and (max-width: 899px)
+{
+ /*----------------------------------------*\
+ A) BASIC MOBILE RESETS
+ \*----------------------------------------*/
+
+ /*
+ apply natural border box, see: http://www.paulirish.com/2012/box-sizing-border-box-ftw/
+ this helps us to better deal with percentages and padding / margin
+ */
+ *,
+ *:before,
+ *:after
+ {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ }
+
+ body,
+ html
+ {
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ }
+
+ html
+ {
+ overflow-y: auto; /* avoid 2nd scrollbar on desktop */
+ }
+
+ body
+ {
+ overflow-x: hidden; /* hide horizontal overflow */
+
+ min-width: 0; /* reset the min-width of 900px */
+ }
+
+
+ body,
+ input,
+ select,
+ textarea,
+ button
+ {
+ font-size: 14px; /* Set font-size for standard elements to 14px */
+ }
+
+
+ select
+ {
+ max-width: 100%; /* prevent long names within select menues from breaking content */
+ }
+
+
+ #wrapper
+ {
+ position: relative;
+
+ max-width: 100%;
+ }
+
+ #wrapper,
+ #wrapper2
+ {
+ margin: 0;
+ }
+
+ /*----------------------------------------*\
+ B) HEADER & TOP MENUS
+ \*----------------------------------------*/
+
+ #header
+ {
+ width: 100%;
+ height: 64px; /* the height of our header on mobile */
+ min-height: 0;
+ margin: 0;
+ padding: 0;
+
+ border: none;
+ background-color: #628db6;
+ }
+
+ /* Hide project name on mobile (project name is still visible in select menu) */
+ #header h1
+ {
+ display: none !important;
+ }
+
+ /* reset #header a color for mobile toggle button */
+ #header a.mobile-toggle-button
+ {
+ color: #f8f8f8;
+ }
+
+
+ /* Hide top-menu and main-menu on mobile, because it's placed in our flyout menu */
+ #top-menu,
+ #header #main-menu
+ {
+ display: none;
+ }
+
+ /* the quick search within header holding search form and #project_quick_jump_box box*/
+ #header #quick-search
+ {
+ float: none;
+ clear: none; /* there are themes which set clear property, this resets it */
+
+ max-width: 100%; /* reset max-width */
+ margin: 0;
+
+ background: inherit;
+ }
+
+ /* this represents the dropdown arrow to left of the mobile project menu */
+ #header .jump-box-arrow:before
+ {
+ /* set a font-size in order to achive same result in different themes */
+ font-family: Verdana, sans-serif;
+ font-size: 2em;
+ line-height: 64px;
+
+ position: absolute;
+ left: 0;
+
+ width: 2em;
+ padding: 0 .5em;
+ /* achieve dropdwon arrow by scaling a caret character */
+
+ content: '^';
+ -webkit-transform: scale(1,-.8);
+ -ms-transform: scale(1,-.8);
+ transform: scale(1,-.8);
+ text-align: right;
+ pointer-events: none;
+
+ opacity: .6;
+ }
+
+ /* styles for combobox within quick-search (#project_quick_jump_box) */
+ #header #quick-search select
+ {
+ font-size: 1.5em;
+ font-weight: bold;
+ line-height: 1.2;
+
+ position: absolute;
+ top: 15px;
+ left: 0;
+
+ float: left;
+
+ width: 100%;
+ max-width: 100%;
+ height: 2em;
+ height: 35px;
+ padding: 5px;
+ padding-right: 72px;
+ padding-left: 50px;
+
+ text-indent: .01px;
+
+ color: inherit;
+ border: 0;
+ -webkit-border-radius: 0;
+ border-radius: 0;
+ background: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ /* hide default browser arrow */
+
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ }
+
+ #header #quick-search form
+ {
+ display: none;
+ }
+
+ /*----------------------------------------*\
+ C) MAIN CONTENT & SIDEBAR
+ \*----------------------------------------*/
+
+ #main
+ {
+ padding: 0;
+ }
+
+ #main.nosidebar #content,
+ div#content
+ {
+ width: 100%;
+ min-height: 0; /* reset min-height of #content */
+ margin: 0;
+ }
+
+
+ /* hide sidebar and sidebar switch panel, since it's placed in mobile flyout menu */
+ #sidebar,
+ #sidebar-switch-panel
+ {
+ display: none;
+ }
+
+ .splitcontentleft
+ {
+ width: 100%; /* use full width */
+ }
+
+ .splitcontentright
+ {
+ width: 100%; /* use full width */
+ }
+
+ /*----------------------------------------*\
+ D) TOGGLE BUTTON & FLYOUT MENU
+ \*----------------------------------------*/
+
+ /* Mobile toggle button */
+
+ .mobile-toggle-button
+ {
+ font-size: 42px;
+ line-height: 64px;
+
+ position: relative;
+ z-index: 10;
+
+ display: block; /* remove display: none; of non-mobile version */
+ float: right;
+
+ width: 60px;
+ height: 64px;
+ margin-top: 0;
+
+ text-align: center;
+
+ border-left: 1px solid #ddd;
+ }
+
+ .mobile-toggle-button:hover,
+ .mobile-toggle-button:active
+ {
+ text-decoration: none;
+ }
+
+ .mobile-toggle-button:after
+ {
+ font-family: Verdana, sans-serif;
+
+ display: block;
+
+ margin-top: -3px;
+
+ content: '\2261';
+ }
+
+ /* search magnifier icon */
+ .search-magnifier
+ {
+ font-family: Verdana;
+
+ cursor: pointer;
+ -webkit-transform: rotate(-45deg);
+ -moz-transform: rotate(45deg);
+ -o-transform: rotate(45deg);
+
+ color: #bbb;
+ }
+
+ .search-magnifier--flyout
+ {
+ font-size: 25px;
+ line-height: 54px;
+
+ position: absolute;
+ z-index: 1;
+ left: 12px;
+ }
+
+
+ /* Flyout Menu */
+
+ .flyout-menu
+ {
+ position: absolute;
+ right: -250px;
+
+ display: block; /* remove display: none; of non-mobile version */
+ overflow-x: hidden;
+
+ width: 250px;
+ height: 100%;
+ margin: 0; /* reset margin for themes that define it */
+ padding: 0; /* reset padding for themes that define it */
+
+ color: white;
+ background-color: #3e5b76;
+ }
+
+
+ /* avoid zoom on search input focus for ios devices */
+ .flyout-menu input[type='text']
+ {
+ font-size: 16px;
+ }
+
+ .flyout-menu h3
+ {
+ font-size: 11px;
+ line-height: 19px;
+
+ height: 20px;
+ margin: 0;
+ padding: 0;
+
+ letter-spacing: .1em;
+ text-transform: uppercase;
+
+ color: white;
+ border-top: 1px solid #506a83;
+ border-bottom: 1px solid #506a83;
+ background-color: #628db6;
+ }
+
+ .flyout-menu h4
+ {
+ color: white;
+ }
+
+ .flyout-menu h3,
+ .flyout-menu h4,
+ .flyout-menu > p,
+ .flyout-menu > a,
+ .flyout-menu ul li a,
+ .flyout-menu__search,
+ .flyout-menu__sidebar > div,
+ .flyout-menu__sidebar > p,
+ .flyout-menu__sidebar > a,
+ .flyout-menu__sidebar > form,
+ .flyout-menu > div,
+ .flyout-menu > form
+ {
+ padding-left: 8px;
+ }
+
+ .flyout-menu .flyout-menu__avatar
+ {
+ margin-top: -1px; /* move avatar up 1px */
+ padding-left: 0;
+ }
+
+ .flyout-menu__sidebar > form
+ {
+ display: block;
+ }
+
+ .flyout-menu__sidebar > form h3
+ {
+ margin-left: -8px;
+ }
+
+ .flyout-menu__sidebar > form label
+ {
+ display: inline-block;
+
+ margin: 8px 0;
+ }
+
+ .flyout-menu__sidebar > form br br
+ {
+ display: none;
+ }
+
+ .flyout-menu ul
+ {
+ margin: 0;
+ padding: 0;
+
+ list-style: none;
+ }
+
+ .flyout-menu ul li a
+ {
+ line-height: 40px;
+
+ display: block;
+ overflow: hidden;
+
+ height: 40px;
+
+ white-space: nowrap;
+ text-overflow: ellipsis;
+
+ border-top: 1px solid rgba(255,255,255,.1);
+ }
+
+ .flyout-menu ul li:first-child a
+ {
+ line-height: 39px;
+
+ height: 39px;
+
+ border-top: none;
+ }
+
+ .flyout-menu a
+ {
+ color: white;
+ }
+
+ .flyout-menu ul li a:hover
+ {
+ text-decoration: none;
+ }
+
+ .flyout-menu ul li a.new-object,
+ .new-object ~ .menu-children
+ {
+ display: none;
+ }
+
+ /* Left flyout search container */
+ .flyout-menu__search
+ {
+ line-height: 54px;
+
+ height: 64px;
+ padding-top: 3px;
+ padding-right: 8px;
+ }
+
+ .flyout-menu__search input[type='text']
+ {
+ line-height: 2;
+
+ width: 100%;
+ height: 38px;
+ padding-left: 27px;
+
+ vertical-align: middle;
+
+ border: none;
+ -webkit-border-radius: 3px;
+ border-radius: 3px;
+ background-color: #fff;
+ }
+
+ .flyout-menu__avatar
+ {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+
+ width: 100%;
+
+ border-top: 1px solid rgba(255,255,255,.1);
+ }
+
+
+ .flyout-menu__avatar img.gravatar
+ {
+ width: 40px;
+ height: 40px;
+ padding: 0;
+
+ vertical-align: top;
+
+ border-width: 0;
+ }
+
+ .flyout-menu__avatar a
+ {
+ line-height: 40px;
+
+ height: auto;
+ height: 40px;
+
+ text-decoration: none;
+
+ color: white;
+ }
+
+ /* avatar */
+ .flyout-menu__avatar a:first-child
+ {
+ line-height: 0;
+
+ width: 40px;
+ padding: 0;
+ }
+
+ .flyout-menu__avatar .user
+ {
+ padding-left: 15px;
+ }
+
+ /* user link when no avatar is present */
+ .flyout-menu__avatar--no-avatar a.user
+ {
+ line-height: 40px;
+
+ padding-left: 8px;
+ }
+
+
+ .flyout-is-active body
+ {
+ overflow: hidden; /* for body not to have scrollbars when left flyout menu is active */
+ }
+
+ html.flyout-is-active
+ {
+ overflow: hidden;
+ }
+
+
+ .flyout-is-active #wrapper
+ {
+ right: 250px; /* when left flyout is active, move body to the right (same amount like flyout-menu's width) */
+
+ height: 100%;
+ }
+
+ .flyout-is-active .mobile-toggle-button:after
+ {
+ content: '\00D7'; /* close glyph */
+ }
+
+ .flyout-is-active #wrapper2
+ {
+
+ /*
+ * only relevant for devices with cursor when flyout it active, in order to show,
+ * that whole wrapper content is clickable and closes flyout menu
+ */
+ cursor: pointer;
+ }
+
+
+ #admin-menu
+ {
+ padding-left: 0;
+ }
+
+ #admin-menu li
+ {
+ padding-bottom: 0;
+ }
+
+ #admin-menu a,
+ #admin-menu a.selected
+ {
+ line-height: 40px;
+
+ padding: 0;
+ padding-left: 32px !important;
+
+ background-position: 8px 50%;
+ }
+}
generated by cgit v1.2.3 (git 2.39.1) at 2025-02-22 15:00:59 +0000