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

Reverse hscrollbar min-height hack on OS X...

Reverse hscrollbar min-height hack on OS X OS X has optional behavior to only draw scrollbars during scroll, which causes problems for CodeMirror's scrollbars. CodeMirror's solution is to set a minimum size for their scrollbars, which is always present. The trade is that the container overlays most of the last line, swallowing click events when there is scrolling to do, even when no scrollbar is visible. This reverses the trade, recovering the click events at the expense of never showing the horizontal scrollbar on OS X when this option is enabled.

Min RK - - Load All Authors

File last commit:

r20206:bd6113af


                r20298:2907e856

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: auto !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: auto !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;
				}
				}
				}