mirror of
https://github.com/opnsense/docs
synced 2024-11-18 21:28:29 +00:00
323 lines
10 KiB
Sass
323 lines
10 KiB
Sass
|
// -------------------------------------------------------------------------------------------------------------------
|
||
|
|
// CONTRIBUTORS, PLEASE READ THIS!
|
||
|
|
// -------------------------------------------------------------------------------------------------------------------
|
||
|
|
// Couple things...
|
||
|
|
// 1. Lots of this @extends from wyrm_core/_type.sass (http://www.github.com/snide/wyrm/.
|
||
|
|
// * Try not to replace any @extends code. It's pretty generic stuff meant to work together.
|
||
|
|
// * That said, know that I'm very unlikely to accept PRs from wyrm just to change style here.
|
||
|
|
// 2. I plan to remove the !importants in here. Part of it is due to lazyness, part to sphinx's fondness for nesting.
|
||
|
|
// 3. Try to use variables from wyrm_core/wy_variables.sass. Notable are...
|
||
|
|
// * $base-line-height // All margins, padding and line-height should use this in .25 increments.
|
||
|
|
// * $text-color, $text-light, $text-dark...etc
|
||
|
|
// * $base-font-family, $custom-font-family, $code-font-family
|
||
|
|
// 4. If you have changes for mobile/tablet, put them at the bottom of the sass file.
|
||
|
|
// --------------------------------------------------------------------------------------------------------------------
|
||
|
|
|
||
|
|
.rst-content
|
||
|
|
// Sphinx by default applies HxW style attributes to images. This fixes that oversite.
|
||
|
|
img
|
||
|
|
max-width: 100%
|
||
|
|
height: auto !important
|
||
|
|
|
||
|
|
.highlight > pre, .linenodiv > pre
|
||
|
|
line-height: normal
|
||
|
|
|
||
|
|
div.figure
|
||
|
|
margin-bottom: $base-line-height
|
||
|
|
p.caption
|
||
|
|
font-style: italic
|
||
|
|
|
||
|
|
div.figure.align-center
|
||
|
|
text-align: center
|
||
|
|
|
||
|
|
// Usually it's a good idea to give images some space.
|
||
|
|
.section > img, .section > a > img
|
||
|
|
margin-bottom: $base-line-height
|
||
|
|
// Questionable whether this is nice or not. It styles eternal links, but comes with some baggage.
|
||
|
|
// a.reference.external:after
|
||
|
|
// font-family: FontAwesome
|
||
|
|
// content: " \f08e "
|
||
|
|
// color: $text-light
|
||
|
|
// vertical-align: super
|
||
|
|
// font-size: 60%
|
||
|
|
|
||
|
|
// For the most part, its safe to assume that sphinx wants you to use a blockquote as an indent. It gets
|
||
|
|
// used in many different ways, so don't assume you can apply some fancy style, just leave it be.
|
||
|
|
blockquote
|
||
|
|
margin-left: $base-line-height
|
||
|
|
line-height: $base-line-height
|
||
|
|
margin-bottom: $base-line-height
|
||
|
|
.literal-block, pre.literal-block
|
||
|
|
@extend .codeblock
|
||
|
|
// These are the various note pullouts that sphinx applies
|
||
|
|
.note, .attention, .caution, .danger, .error, .hint, .important, .tip, .warning, .seealso, .admonition-todo
|
||
|
|
@extend .wy-alert
|
||
|
|
.last
|
||
|
|
margin-bottom: 0
|
||
|
|
.admonition-title
|
||
|
|
@extend .wy-alert-title
|
||
|
|
@extend .fa
|
||
|
|
@extend .fa-exclamation-circle
|
||
|
|
&:before
|
||
|
|
margin-right: 4px
|
||
|
|
.note, .seealso
|
||
|
|
@extend .wy-alert.wy-alert-info
|
||
|
|
.hint, .tip, .important
|
||
|
|
@extend .wy-alert.wy-alert-success
|
||
|
|
.error, .danger
|
||
|
|
@extend .wy-alert.wy-alert-danger
|
||
|
|
.warning, .caution, .attention, .admonition-todo
|
||
|
|
@extend .wy-alert.wy-alert-warning
|
||
|
|
// Some people put tables in notes. Let's give them very basic support.
|
||
|
|
.admonition table
|
||
|
|
border-color: rgba(0,0,0,.1)
|
||
|
|
td, th
|
||
|
|
background: transparent !important
|
||
|
|
border-color: rgba(0,0,0,.1) !important
|
||
|
|
.section ul, .toctree-wrapper ul
|
||
|
|
@extend .wy-plain-list-disc
|
||
|
|
.section ol.loweralpha, .section ol.loweralpha li
|
||
|
|
list-style: lower-alpha
|
||
|
|
.section ol.upperalpha, .section ol.upperalpha li
|
||
|
|
list-style: upper-alpha
|
||
|
|
.section ol, ol.arabic
|
||
|
|
@extend .wy-plain-list-decimal
|
||
|
|
.section ol p, .section ul p
|
||
|
|
margin-bottom: $base-line-height / 2
|
||
|
|
.line-block
|
||
|
|
margin-left: $base-line-height
|
||
|
|
|
||
|
|
// Generics handling of headings and toc stuff.
|
||
|
|
.topic-title
|
||
|
|
font-weight: bold
|
||
|
|
margin-bottom: $base-line-height / 2
|
||
|
|
.toc-backref
|
||
|
|
color: $text-color
|
||
|
|
.align-right
|
||
|
|
float: right
|
||
|
|
margin: 0px 0px $base-line-height $base-line-height
|
||
|
|
.align-left
|
||
|
|
float: left
|
||
|
|
margin: 0px $base-line-height $base-line-height 0px
|
||
|
|
.align-center
|
||
|
|
margin: auto
|
||
|
|
display: block
|
||
|
|
.toctree-wrapper p.caption
|
||
|
|
@extend h2
|
||
|
|
|
||
|
|
// This is the #href that shows up on hover. Sphinx's is terrible so I hack it away.
|
||
|
|
h1, h2, h3, h4, h5, h6, dl dt, p.caption
|
||
|
|
.headerlink
|
||
|
|
display: none
|
||
|
|
visibility: hidden
|
||
|
|
font-size: 14px
|
||
|
|
@extend .fa
|
||
|
|
&:after
|
||
|
|
visibility: visible
|
||
|
|
content: "\f0c1"
|
||
|
|
font-family: FontAwesome
|
||
|
|
display: inline-block
|
||
|
|
&:hover .headerlink
|
||
|
|
display: inline-block
|
||
|
|
|
||
|
|
.centered
|
||
|
|
text-align: center
|
||
|
|
|
||
|
|
// Sidebar content. You'll see at the bottom of this file I change it in mobile.
|
||
|
|
.sidebar
|
||
|
|
float: right
|
||
|
|
width: 40%
|
||
|
|
display: block
|
||
|
|
margin: 0 0 $base-line-height $base-line-height
|
||
|
|
padding: $base-line-height
|
||
|
|
background: $sidebar-background-color
|
||
|
|
border: solid 1px $sidebar-border-color
|
||
|
|
// Sidebar content is usually less relevant, so adjust the margins and sizes.
|
||
|
|
p, ul, dl
|
||
|
|
font-size: 90%
|
||
|
|
.last
|
||
|
|
margin-bottom: 0
|
||
|
|
.sidebar-title
|
||
|
|
display: block
|
||
|
|
font-family: $custom-font-family
|
||
|
|
font-weight: bold
|
||
|
|
background: $table-border-color
|
||
|
|
padding: $base-line-height / 4 $base-line-height / 2
|
||
|
|
margin: -$base-line-height
|
||
|
|
margin-bottom: $base-line-height
|
||
|
|
font-size: 100%
|
||
|
|
// Sphinx can highlight searched text with ?highlighted=searchterm
|
||
|
|
.highlighted
|
||
|
|
background: $highlight-color
|
||
|
|
display: inline-block
|
||
|
|
font-weight: bold
|
||
|
|
padding: 0 $base-line-height / 4
|
||
|
|
|
||
|
|
// These are the little citation links [1] that show up within paragraphs.
|
||
|
|
.footnote-reference, .citation-reference
|
||
|
|
vertical-align: super
|
||
|
|
font-size: 90%
|
||
|
|
|
||
|
|
// Tables! Sphinx LOVES TABLES. Most of wyrm assumes you're only going to use a table as a table
|
||
|
|
// so I have to write a bunch of unique stuff for Sphinx to style them up differently like it's 2003.
|
||
|
|
table.docutils.citation, table.docutils.footnote
|
||
|
|
background: none
|
||
|
|
border: none
|
||
|
|
color: $text-medium
|
||
|
|
td, tr
|
||
|
|
border: none
|
||
|
|
background-color: transparent !important
|
||
|
|
white-space: normal
|
||
|
|
td.label
|
||
|
|
padding-left: 0
|
||
|
|
padding-right: 0
|
||
|
|
vertical-align: top
|
||
|
|
code
|
||
|
|
color: $gray
|
||
|
|
table.docutils
|
||
|
|
@extend .wy-table
|
||
|
|
@extend .wy-table-bordered-all
|
||
|
|
&:not(.field-list)
|
||
|
|
@extend .wy-table-striped
|
||
|
|
// This table is what gets spit out for auto-generated API stuff. I style it smaller bits of padding.
|
||
|
|
table.field-list
|
||
|
|
@extend .wy-table
|
||
|
|
border: none
|
||
|
|
td
|
||
|
|
border: none
|
||
|
|
td > strong
|
||
|
|
display: inline-block
|
||
|
|
.field-name
|
||
|
|
padding-right: 10px
|
||
|
|
text-align: left
|
||
|
|
white-space: nowrap
|
||
|
|
.field-body
|
||
|
|
text-align: left
|
||
|
|
|
||
|
|
// These are the "literals" that get spit out when you mark stuff as ``code`` as your write.
|
||
|
|
tt, code
|
||
|
|
@extend code
|
||
|
|
color: $black
|
||
|
|
padding: 2px 5px
|
||
|
|
big, em
|
||
|
|
font-size: 100% !important
|
||
|
|
line-height: normal
|
||
|
|
|
||
|
|
&.literal
|
||
|
|
color: $text-code-color
|
||
|
|
&.xref, a &
|
||
|
|
font-weight: bold
|
||
|
|
color: $text-codexref-color
|
||
|
|
// If the literal is inside an a tag, let's color it like a link
|
||
|
|
a tt, a code
|
||
|
|
color: $link-color
|
||
|
|
dl
|
||
|
|
margin-bottom: $base-line-height
|
||
|
|
dt
|
||
|
|
font-weight: bold
|
||
|
|
// Most of the content within these dls are one liners, so I halve the normal margins.
|
||
|
|
p, table, ul, ol
|
||
|
|
margin-bottom: $base-line-height / 2 !important
|
||
|
|
// rST seems to want dds to be treated as the browser would, indented.
|
||
|
|
dd
|
||
|
|
margin: 0 0 $base-line-height / 2 $base-line-height
|
||
|
|
// This is what Sphinx spits out for it's autodocs. Depending upon what language the person is referencing
|
||
|
|
// these things usually have a class of "method" or "class" or something similar, but really who knows.
|
||
|
|
// Sphinx doesn't give me a generic class on these, so unfortunately I have to apply it to the root dl.
|
||
|
|
// This makes me terribly unhappy and makes this code very nesty. Unfortunately I've seen hand-written docs
|
||
|
|
// that output similar, but not quite the same nesting so this is really the best we can do.
|
||
|
|
dl:not(.docutils)
|
||
|
|
margin-bottom: $base-line-height
|
||
|
|
// This would be the equivilant of a .. class::
|
||
|
|
dt
|
||
|
|
display: table
|
||
|
|
margin: $base-line-height / 4 0
|
||
|
|
font-size: 90%
|
||
|
|
line-height: normal
|
||
|
|
background: lighten($class-color, 50%)
|
||
|
|
color: $class-color
|
||
|
|
border-top: solid 3px lighten($class-color, 20%)
|
||
|
|
padding: $base-line-height / 4
|
||
|
|
position: relative
|
||
|
|
&:before
|
||
|
|
color: lighten($class-color, 20%)
|
||
|
|
.headerlink
|
||
|
|
color: $text-color
|
||
|
|
font-size: 100% !important
|
||
|
|
// And this would be the .. method::
|
||
|
|
dl dt
|
||
|
|
margin-bottom: $base-line-height / 4
|
||
|
|
border: none
|
||
|
|
border-left: solid 3px hsl(0,0%,80%)
|
||
|
|
background: hsl(0,0%,94%)
|
||
|
|
color: $method-color
|
||
|
|
.headerlink
|
||
|
|
color: $headerlink-color
|
||
|
|
font-size: 100% !important
|
||
|
|
dt:first-child
|
||
|
|
margin-top: 0
|
||
|
|
// Since dts get the callout style, we treat this less as callouts.
|
||
|
|
tt, code
|
||
|
|
font-weight: bold
|
||
|
|
&.descname, &.descclassname
|
||
|
|
background-color: transparent
|
||
|
|
border: none
|
||
|
|
padding: 0
|
||
|
|
font-size: 100% !important
|
||
|
|
&.descname
|
||
|
|
font-weight: bold
|
||
|
|
// This is for more advanced parameter control
|
||
|
|
.optional
|
||
|
|
display: inline-block
|
||
|
|
padding: 0 4px
|
||
|
|
color: $black
|
||
|
|
font-weight: bold
|
||
|
|
.property
|
||
|
|
display: inline-block
|
||
|
|
padding-right: 8px
|
||
|
|
// Doc links to sourcecode
|
||
|
|
.viewcode-link, .viewcode-back
|
||
|
|
display: inline-block
|
||
|
|
color: $text-viewcode-color
|
||
|
|
font-size: 80%
|
||
|
|
padding-left: $base-line-height
|
||
|
|
.viewcode-back
|
||
|
|
display: block
|
||
|
|
float: right
|
||
|
|
p.rubric
|
||
|
|
margin-bottom: 12px
|
||
|
|
font-weight: bold
|
||
|
|
//Download link
|
||
|
|
code.download
|
||
|
|
background: inherit
|
||
|
|
padding: inherit
|
||
|
|
font-weight: normal
|
||
|
|
font-family: inherit
|
||
|
|
font-size: inherit
|
||
|
|
color: inherit
|
||
|
|
border: inherit
|
||
|
|
white-space: inherit
|
||
|
|
span:first-child
|
||
|
|
-webkit-font-smoothing: subpixel-antialiased
|
||
|
|
@extend .fa
|
||
|
|
@extend .fa-download
|
||
|
|
&:before
|
||
|
|
margin-right: 4px
|
||
|
|
.guilabel
|
||
|
|
border: 1px solid lighten($guilabel-color, 25%)
|
||
|
|
background: lighten($guilabel-color, 50%)
|
||
|
|
font-size: 80%
|
||
|
|
font-weight: 700
|
||
|
|
border-radius: $base-line-height / 6
|
||
|
|
padding: $base-line-height / 10 $base-line-height / 4
|
||
|
|
margin: auto $base-line-height / 12
|
||
|
|
.versionmodified
|
||
|
|
font-style: italic
|
||
|
|
|
||
|
|
|
||
|
|
// Mobile specific
|
||
|
|
+media($mobile)
|
||
|
|
.rst-content
|
||
|
|
.sidebar
|
||
|
|
width: 100%
|