upstream/ipython Files · IPython/html/static/notebook/less/pager.less

rework css media-query...

rework css media-query fixes Also limit the number of query "jump", and use variables. In particular there was a container width discontinuity at 768 pixel where below 768 container width is 100% and "only" 720px on wider screen, making a jump. So now Css media query have 3 breakpoints: - <540 px with (aka -no name-) - colapsed menubar - vbox for prompt - 100% width container - 540 -> 767 (aka -xs- ) - expand menubar - hbox fro prompt - 767 -> 991 (aka -sm-) - show save widget - fix width (768px) - 991+ (aka -md-) - extra save widget info (date time) - fix with of 991 px. - 1200+ (aka -lg-) - widht of 1200px. of course we've set soem variable wrongly so this is still kinda-a-hack as we shoudl have pushed the xs-sm limit lower instead of pushing the nothing-xs limit up but I don't want to "fix it" now.

Jonathan Frederic - - Load All Authors

File last commit:

r19655:ead97438


                r19953:21dc9b62

Download file

             pager.less
        
                    69 lines
            
             | 1.5 KiB
            
                | text/x-less
            
             |
                LessCssLexer
            
             / IPython / html / static / notebook / less / pager.less
          
                    History
                
                 |
                  Annotation
                 | Raw
                 |Copy content
                 |Copy permalink

      div#pager {

          background-color:   @body-bg;

          font-size: @notebook_font_size;

          line-height: @notebook_line_height;

          overflow: hidden;

          display: none;

          position: fixed;

          bottom: 0px;

          width: 100%;

          max-height: 50%;

          padding-top: 8px;

          .box-shadow(@global-shadow);

          /* Display over codemirror */

          z-index: 100;

          /* Hack which prevents jquery ui resizable from changing top. */

          top: inherit !important; 

          pre {

              line-height: @code_line_height;

              color: @text-color;

              background-color: @cell_background;

              padding: @code_padding;

          }

          #pager-button-area {

              position: absolute;

              top: 8px;

              right: 20px; 

          }

          #pager-contents {

              position: relative;

              overflow: auto;

              width: 100%;

              height: 100%;

              #pager-container {

                  position: relative;

                  padding: 15px 0px;

                  .border-box-sizing();

              }

          }

          .ui-resizable-handle {

              top: 0px;

              height: 8px;

              background: @cell_background;

              border-top: 1px solid @light_border_color;

              border-bottom: 1px solid @light_border_color;

              /* This injects handle bars (a short, wide = symbol) for 

              the resize handle. */

              &::after {

                  content: '';

                  top: 2px;

                  left: 50%;

                  height: 3px;

                  width: 30px;

                  margin-left: -15px;

                  position: absolute;

                  border-top: 1px solid @light_border_color;

              }

          }

      }

	Site-wide shortcuts
/	Use quick search box
g h	Goto home page
g g	Goto my private gists page
g G	Goto my public gists page
g 0-9	Goto bookmarked items from 0-9
n r	New repository page
n g	New gist page

	Repositories
g s	Goto summary page
g c	Goto changelog page
g f	Goto files page
g F	Goto files page with file search activated
g p	Goto pull requests page
g o	Goto repository settings
g O	Goto repository access permissions settings
t s	Toggle sidebar on some pages

				div#pager {
				background-color: @body-bg;
				font-size: @notebook_font_size;
				line-height: @notebook_line_height;
				overflow: hidden;
				display: none;
				position: fixed;
				bottom: 0px;
				width: 100%;
				max-height: 50%;
				padding-top: 8px;

				.box-shadow(@global-shadow);

				/* Display over codemirror */
				z-index: 100;

				/* Hack which prevents jquery ui resizable from changing top. */
				top: inherit !important;

				pre {
				line-height: @code_line_height;
				color: @text-color;
				background-color: @cell_background;
				padding: @code_padding;
				}

				#pager-button-area {
				position: absolute;
				top: 8px;
				right: 20px;
				}

				#pager-contents {
				position: relative;
				overflow: auto;
				width: 100%;
				height: 100%;

				#pager-container {
				position: relative;
				padding: 15px 0px;
				.border-box-sizing();
				}
				}

				.ui-resizable-handle {
				top: 0px;
				height: 8px;
				background: @cell_background;
				border-top: 1px solid @light_border_color;
				border-bottom: 1px solid @light_border_color;

				/* This injects handle bars (a short, wide = symbol) for
				the resize handle. */
				&::after {
				content: '';

				top: 2px;
				left: 50%;
				height: 3px;
				width: 30px;
				margin-left: -15px;
				position: absolute;

				border-top: 1px solid @light_border_color;
				}
				}
				}