mirror of
https://github.com/opnsense/docs
synced 2024-11-09 01:10:33 +00:00
3598af243a
overflow-wrap will attempt not to break words if it can help it. It will only break it up when the word is too long to fit onto its own line.
405 lines
9.0 KiB
Sass
405 lines
9.0 KiB
Sass
body
|
|
overflow-wrap: break-word
|
|
|
|
.wy-affix
|
|
position: fixed
|
|
top: $gutter
|
|
|
|
.wy-menu
|
|
a:hover
|
|
text-decoration: none
|
|
|
|
.wy-menu-horiz
|
|
+clearfix
|
|
ul, li
|
|
display: inline-block
|
|
li:hover
|
|
background: rgba(255,255,255,.1)
|
|
li
|
|
&.divide-left
|
|
border-left: solid 1px hsl(0, 0%, 25%)
|
|
&.divide-right
|
|
border-right: solid 1px hsl(0, 0%, 25%)
|
|
a
|
|
height: $base-font-size * 2
|
|
display: inline-block
|
|
line-height: $base-font-size * 2
|
|
padding: 0 $base-font-size
|
|
|
|
.wy-menu-vertical
|
|
width: $nav-desktop-width
|
|
header, p.caption
|
|
height: $base-font-size * 2
|
|
display: inline-block
|
|
line-height: $base-font-size * 2
|
|
padding: 0 $gutter
|
|
margin-bottom: 0
|
|
display: block
|
|
font-weight: bold
|
|
text-transform: uppercase
|
|
font-size: 80%
|
|
color: $menu-dark
|
|
white-space: nowrap
|
|
|
|
ul
|
|
margin-bottom: 0
|
|
li
|
|
&.divide-top
|
|
border-top: solid 1px hsl(0, 0%, 25%)
|
|
&.divide-bottom
|
|
border-bottom: solid 1px hsl(0, 0%, 25%)
|
|
&.current
|
|
background: darken($menu-vertical-background-color, 10%)
|
|
a
|
|
color: $menu-link-medium
|
|
border-right: solid 1px darken($menu-vertical-background-color, 20%)
|
|
padding: $gutter / 4 $gutter * 1.5
|
|
&:hover
|
|
background: darken($menu-vertical-background-color, 15%)
|
|
code
|
|
border: none
|
|
background: inherit
|
|
color: inherit
|
|
padding-left: 0
|
|
padding-right: 0
|
|
// Expand links
|
|
span.toctree-expand
|
|
display: block
|
|
float: left
|
|
margin-left: -1.2em
|
|
@extend .fa
|
|
@extend .fa-plus-square-o
|
|
font-size: .8em
|
|
line-height: 1.6em
|
|
color: darken($menu-link-medium, 20%)
|
|
|
|
// On state for the first level
|
|
li.on a, li.current > a
|
|
color: $menu-link-color
|
|
padding: $gutter / 4 $gutter
|
|
font-weight: bold
|
|
position: relative
|
|
background: $menu-vertical-background-color
|
|
border: none
|
|
padding-left: $gutter -4px
|
|
+font-smooth
|
|
&:hover
|
|
background: $menu-vertical-background-color
|
|
span.toctree-expand
|
|
color: $menu-link-medium
|
|
span.toctree-expand
|
|
@extend .fa
|
|
@extend .fa-minus-square-o
|
|
display: block
|
|
font-size: .8em
|
|
line-height: 1.6em
|
|
color: darken($menu-link-medium, 30%)
|
|
|
|
li.toctree-l1.current > a
|
|
border-bottom: solid 1px darken($menu-vertical-background-color, 20%)
|
|
border-top: solid 1px darken($menu-vertical-background-color, 20%)
|
|
|
|
// This is the on state for pages beyond second level
|
|
li.toctree-l1.current li.toctree-l2, li.toctree-l2.current li.toctree-l3
|
|
> ul
|
|
display: none
|
|
&.current > ul
|
|
display: block
|
|
li.toctree-l2
|
|
&.current
|
|
> a
|
|
background: darken($menu-vertical-background-color, 20%)
|
|
padding: $gutter / 4 $gutter * 1.5
|
|
li.toctree-l3 > a
|
|
display: block
|
|
background: darken($menu-vertical-background-color, 20%)
|
|
padding: $gutter / 4 $gutter * 2.5
|
|
a:hover span.toctree-expand
|
|
color: $menu-link-medium
|
|
span.toctree-expand
|
|
color: darken($menu-vertical-background-color, 35%)
|
|
li.toctree-l3
|
|
font-size: .9em
|
|
&.current
|
|
> a
|
|
background: darken($menu-vertical-background-color, 25%)
|
|
padding: $gutter / 4 $gutter * 2.5
|
|
li.toctree-l4 > a
|
|
display: block
|
|
background: darken($menu-vertical-background-color, 25%)
|
|
padding: $gutter / 4 $gutter * 3.5
|
|
a:hover span.toctree-expand
|
|
color: $menu-link-medium
|
|
span.toctree-expand
|
|
color: darken($menu-vertical-background-color, 40%)
|
|
li.toctree-l4
|
|
font-size: .9em
|
|
|
|
li.current ul
|
|
display: block
|
|
li ul
|
|
margin-bottom: 0
|
|
display: none
|
|
li ul li a
|
|
margin-bottom: 0
|
|
color: $menu-link-light
|
|
font-weight: normal
|
|
a
|
|
display: inline-block
|
|
line-height: 18px
|
|
padding: $gutter / 4 $gutter
|
|
display: block
|
|
position: relative
|
|
font-size: 90%
|
|
color: $menu-link-light
|
|
&:hover
|
|
background-color: lighten($menu-background-color, 10%)
|
|
cursor: pointer
|
|
span.toctree-expand
|
|
color: $menu-link-light
|
|
&:active
|
|
background-color: $menu-logo-color
|
|
cursor: pointer
|
|
color: $menu-link-active
|
|
span.toctree-expand
|
|
color: $menu-link-active
|
|
|
|
.wy-side-nav-search
|
|
display: block
|
|
width: $nav-desktop-width
|
|
padding: $gutter / 2
|
|
margin-bottom: $gutter / 2
|
|
z-index: $z-index-popover
|
|
background-color: $nav-search-background-color
|
|
text-align: center
|
|
padding: $gutter / 2
|
|
display: block
|
|
color: $nav-search-color
|
|
margin-bottom: $gutter / 2
|
|
input[type=text]
|
|
width: 100%
|
|
border-radius: 50px
|
|
padding: 6px 12px
|
|
border-color: darken($link-color, 5%)
|
|
img
|
|
display: block
|
|
margin: auto auto $gutter / 2 auto
|
|
height: 45px
|
|
width: 45px
|
|
background-color: $menu-logo-color
|
|
padding: 5px
|
|
border-radius: 100%
|
|
> a, .wy-dropdown > a
|
|
color: $nav-search-color
|
|
font-size: 100%
|
|
font-weight: bold
|
|
display: inline-block
|
|
padding: $base-line-height / 6 $base-line-height / 4
|
|
margin-bottom: $gutter / 2
|
|
+font-smooth
|
|
&:hover
|
|
background: rgba(255,255,255,.1)
|
|
img.logo
|
|
display: block // display on its own line all the time
|
|
margin: 0 auto
|
|
height: auto // undo badge styling above
|
|
width: auto
|
|
border-radius: 0
|
|
max-width: 100% // shrink on mobile, if appropriate
|
|
background: rgba(0,0,0,0) // make hover background of parent show up properly
|
|
&.icon
|
|
img.logo
|
|
margin-top: 0.85em // space it away from the title text
|
|
> div.version
|
|
margin-top: -1 * ($gutter / 4)
|
|
margin-bottom: $gutter / 2
|
|
font-weight: normal
|
|
color: rgba(255,255,255,.3)
|
|
|
|
|
|
.wy-nav .wy-menu-vertical
|
|
header
|
|
color: $link-color
|
|
a
|
|
color: $text-light
|
|
&:hover
|
|
background-color: $link-color
|
|
color: $white
|
|
|
|
[data-menu-wrap]
|
|
+transition(all .2s ease-in)
|
|
position: absolute
|
|
opacity: 1
|
|
width: 100%
|
|
opacity: 0
|
|
&.move-center
|
|
left: 0
|
|
right: auto
|
|
opacity: 1
|
|
&.move-left
|
|
right: auto
|
|
left: -100%
|
|
opacity: 0
|
|
&.move-right
|
|
right: -100%
|
|
left: auto
|
|
opacity: 0
|
|
|
|
|
|
.wy-body-for-nav
|
|
background: $section-background-color
|
|
|
|
.wy-grid-for-nav
|
|
position: absolute
|
|
width: 100%
|
|
height: 100%
|
|
|
|
.wy-nav-side
|
|
position: fixed
|
|
top: 0
|
|
bottom: 0
|
|
left: 0
|
|
padding-bottom: 2em
|
|
width: $nav-desktop-width
|
|
overflow-x: hidden
|
|
overflow-y: hidden
|
|
min-height: 100%
|
|
background: $nav-background-color
|
|
z-index: $z-index-popover
|
|
|
|
.wy-side-scroll
|
|
width: $nav-desktop-width + 20px
|
|
position: relative
|
|
overflow-x: hidden
|
|
overflow-y: scroll
|
|
height: 100%
|
|
|
|
.wy-nav-top
|
|
display: none
|
|
background: $link-color
|
|
color: $white
|
|
padding: $gutter / 4 $gutter / 2
|
|
position: relative
|
|
line-height: 50px
|
|
text-align: center
|
|
font-size: 100%
|
|
+clearfix
|
|
a
|
|
color: $white
|
|
font-weight: bold
|
|
+font-smooth
|
|
img
|
|
margin-right: $base-line-height / 2
|
|
height: 45px
|
|
width: 45px
|
|
background-color: $menu-logo-color
|
|
padding: 5px
|
|
border-radius: 100%
|
|
i
|
|
font-size: 30px
|
|
float: left
|
|
cursor: pointer
|
|
padding-top: inherit
|
|
|
|
.wy-nav-content-wrap
|
|
margin-left: $nav-desktop-width
|
|
background: $section-background-color
|
|
min-height: 100%
|
|
|
|
.wy-nav-content
|
|
padding: $gutter $gutter * 2
|
|
height: 100%
|
|
max-width: $nav-content-width
|
|
margin: auto
|
|
|
|
.wy-body-mask
|
|
position: fixed
|
|
width: 100%
|
|
height: 100%
|
|
background: rgba(0,0,0,.2)
|
|
display: none
|
|
z-index: $z-index-modal - 1
|
|
&.on
|
|
display: block
|
|
footer
|
|
color: $footer-color
|
|
p
|
|
margin-bottom: $base-line-height / 2
|
|
span.commit code
|
|
padding: 0px
|
|
font-family: $code-font-family
|
|
font-size: 1em
|
|
background: none
|
|
border: none
|
|
color: $footer-color
|
|
|
|
.rst-footer-buttons
|
|
&:before, &:after
|
|
width: 100%
|
|
+clearfix
|
|
|
|
.rst-breadcrumbs-buttons
|
|
margin-top: 12px
|
|
+clearfix
|
|
|
|
#search-results
|
|
.search li
|
|
margin-bottom: $base-line-height
|
|
border-bottom: solid 1px $table_border_color
|
|
padding-bottom: $base-line-height
|
|
.search li:first-child
|
|
border-top: solid 1px $table_border_color
|
|
padding-top: $base-line-height
|
|
.search li a
|
|
font-size: 120%
|
|
margin-bottom: $base-line-height / 2
|
|
display: inline-block
|
|
.context
|
|
color: $text-medium
|
|
font-size: 90%
|
|
|
|
|
|
+media($tablet)
|
|
.wy-body-for-nav
|
|
background: $section-background-color
|
|
.wy-nav-top
|
|
display: block
|
|
.wy-nav-side
|
|
@if $nav-desktop-position == left
|
|
left: -$nav-desktop-width
|
|
@else
|
|
right: -$nav-desktop-width
|
|
&.shift
|
|
width: 85%
|
|
left: 0
|
|
.wy-side-scroll
|
|
width: auto
|
|
.wy-side-nav-search
|
|
width: auto
|
|
.wy-menu.wy-menu-vertical
|
|
width: auto
|
|
.wy-nav-content-wrap
|
|
margin-left: 0
|
|
.wy-nav-content
|
|
padding: $gutter
|
|
&.shift
|
|
position: fixed
|
|
min-width: 100%
|
|
left: 85%
|
|
top: 0
|
|
height: 100%
|
|
overflow: hidden
|
|
|
|
@media screen and (min-width: $nav-media-query)
|
|
.wy-nav-content-wrap
|
|
background: rgba(0,0,0,.05)
|
|
.wy-nav-content
|
|
margin: 0
|
|
background: $section-background-color
|
|
|
|
@media print
|
|
.rst-versions, footer, .wy-nav-side
|
|
display: none
|
|
.wy-nav-content-wrap
|
|
margin-left: 0
|