view MoinMoin/themes/foobar/static/css/stylus/main.styl @ 1493:0eeab594bc91

Foobar theme search styling
author Jaiditya Mathur <jaiditya.mathur@gmail.com>
date Sun, 24 Jun 2012 10:09:31 +0530
parents e16b711fb298
children a14d21395b9d
line wrap: on
line source
// moin2 foobar theme css

// include a comment with a notice that the css file is automatically generated:
@import "stylus_notice.css"

// reset all browser-specific default to have common defaults everywhere:
@import "reset.css"

// auto-generated by pygmentize -S default -f html >pygments_default.css
@import "pygments_default.css"

// smileys used by moin wiki parser (and maybe others)
@import "smileys.css"

// admonitions used by moin wiki parser (and maybe others)
@import "admonitions"

// user styles used by moin wiki parser (and maybe others) like red/green/solid/dashed/comment...
@import "userstyles.css"

// color have been used from the color palette 
@import "color_palette"

// mime type icons
@import "mime_type_icons"

font_family = sans-serif
main_font_size = 1em
small_font_size = main_font_size * 0.8
heading_scale = 1.2  // font size factor for h1 .. h6

dir = left  // 'left' means left-to-right (ltr), 'right' means right-to-left (rtl)

scale = 1  // we have the whole screen width as base
global_tray_width = 100% / 6 * scale
global_padding_width = 0.5% * scale
main_container_width = 99.8% - global_tray_width - (4 * global_padding_width)

scale = 100% / main_container_width  // we have the main container width as base
local_panel_width = 100% / 6 * scale
local_padding_width = 0.5% * scale
content_width_with_panel = 99.8% - local_panel_width - (4 * local_padding_width)
content_width_no_panel = 99.8% - (2 * local_padding_width)

body
    color font_color
    background-color base_color
    font-family font_family
    background-image url(../img/base.png)

div p
    margin .5em .2em

// the main elements - just the big picture first: panels, header, content, footer

#moin-global-tray
    float dir
    width global_tray_width
    padding global_padding_width
    overflow hidden

#moin-main-container
    float dir
    width main_container_width
    padding global_padding_width

// contains header and content, but not footer
#moin-main-box
    background-color page_color
    border border_style
    border-radius 6px
    box-shadow 2px 2px 4px shadow_color
    overflow hidden

#moin-header
    background-color header_bg_color
    color heading_color
    border-bottom border_style
    padding 0.2% 0.5%
    overflow auto
    a
        color heading_color

#moin-content-no-panel
    float dir
    width content_width_no_panel
    padding local_padding_width
    {'border-' + opposite-position(dir)} border_style

#moin-content-with-panel
    float dir
    width content_width_with_panel
    padding local_padding_width
    {'border-' + opposite-position(dir)} border_style

#moin-local-panel
    float dir
    width local_panel_width
    padding local_padding_width
    {'margin-' + dir} -1px  // make it overlap with content border, see border_style
    {'border-' + dir} border_style

#moin-footer
    clear both
    font-size small_font_size
    color footer_color
    padding 0.5% 0.5%
    overflow auto
    

// now the stuff inside the main elements

// header elements
#moin-breadcrumbs-location
    float dir
    padding 0.3em 0.5em 0.2em 0.5em
    font-weight bold

#moin-pagelocation
    vertical-align middle

.moin-pagepath
    vertical-align middle

#moin-search
    float opposite-position(dir)
    padding 0.3em 0.5em 0.2em 0.5em

#moin-search-submit
    vertical-align middle

// panels, footer
#moin-logo
    width 100%
    padding 0 0 1em 0
    a
        display block
        width 100%
        height 70px
        background-repeat no-repeat
        background-position center center

#moin-global-panel ul,
#moin-local-panel ul
    list-style-type none 
    margin 0
    li
        background-color panel_color
        font-size main_font_size
        color heading_color
        font-weight bold
        padding 0.5em
        border border_style
        border-radius 4px
        box-shadow 1px 1px 2px shadow_color
        margin-left 0.5em
        margin-bottom 0.5em
        overflow hidden
        word-wrap break-word
        ul
            padding 0.2em 0.1em
            li
                font-size small_font_size
                color heading_color
                font-weight normal
                padding 0.1em 0.1em 0.1em 0.1em
                border none
                box-shadow none
                margin 0

#moin-footer ul,
#moin-credits
    float dir
    list-style-type none 
    li
        padding 0.1em
    a
        color footer_color

#moin-footer-logos
    float opposite-position(dir)
    ul li
        display inline
        
// form
label
    display: block
    font-weight: bold

button
    background base_color
    padding 3px 5px
    border border_style
    border-radius 2px
    box-shadow 1px 1px 2px shadow_color
    cursor pointer
    &:hover
        box-shadow 1px 1px 2px font_color
    
input,
select
    padding: 3px
    background: page_color
    border: border_style
    border-radius 2px
input[type="text"]
    width: 300px
input[type="submit"],
input[type="button"] 
    background base_color
input.blank
    border-color: border_color
    border-width: 2px

.moin-form 
    dd
        margin-bottom: 1em
        input
            width: 20em
    dt
        label
            &.required:after
                content: '*'
                color: font_color

// index page
.moin-clr
    clear both
    
.moin-index-message
    width 50%
    margin 1em auto
    text-align center
    display none
    span
        padding 4px
        background-color hover_color
        color heading_color
        border border_style
        border-radius 5px

.moin-download-link
  display none

.moin-index-path
    margin-left 0.5em
    &:before
        content url("../img/moin-parent.png")
        margin 0 0.3em

#moin-initials
    width 90%
    margin 5px auto
    text-align center
    a
        display inline-block
        margin 0
        padding 4px 5px
        &:hover,
        &.selected
            background link_color
            border-radius 5px
            color heading_color
            text-decoration none

.moin-item-index
    width: 100%
    margin-left: 0.5em
    div
        float: left
        width: 15em
        .moin-select-item
            visibility hidden
            display inline-block
            vertical-align middle
            width 17px
            cursor default
            background transparent url("../img/moin-checkbox-off.png") no-repeat
        &.selected-item .moin-select-item,
        &:hover .moin-select-item
            visibility visible
        &.selected-item .moin-select-item
            background-image url("../img/moin-checkbox-on.png")

#lightbox
    background page_color
    opacity 0.7
    filter alpha
    position absolute
    left 0
    top 0
    width 100%
    height 100%
    z-index 9
    margin 0
    display none
  
.filter-toggle
    margin 0 0.2em
    font-size 90%

.moin-more-index
    background transparent url("../img/moin-expand.png") no-repeat
    display inline-block
    width 20px
    &:hover
        text-decoration none

.moin-path-separator
    font-size 120%
    color link_color

.moin-index-separator
    clear both
    border-top 1px dashed border_color
    width 80%
    display none

// index local panel
.moin-select-all
    span
        cursor pointer
.moin-select-actions
    span
        cursor pointer
    ul
        display none
        li
            cursor pointer
.moin-contenttypes-wrapper
    div
        cursor pointer
    form 
        display none
        li
            label
                cursor pointer
                display inline
            span
                display block
#f_contenttype_filter_submit
    padding-left 3em
    padding-right 3em
    margin-left 3em
    cursor pointer
    box-shadow 1px 1px 2px font_color
    &:hover
        box-shadow 1px 1px 2px shadow_color                

.show-action:after,
.ct-hide:after
  content url("../img/moin-moveup.png")
  margin 0 0.2em
  float right
  vertical-align middle

.action-visible .show-action:after,
.ct-shown:after
  content url("../img/moin-movedown.png")
  margin 0 0.2em
  float right
  vertical-align middle
                
// popups
#popup
    background: transparent url("../img/moin-transparent-bg.png") repeat
    padding: 5px
    width: 40%
    position: absolute
    top: 10%
    left: 30%
    display: none
    z-index: 10

.popup-header
    background-color: header_bg_color
    color: heading_color
    padding: 10px
    margin: 0

.popup-closer
    padding: 0px 1px
    margin: -0.2em
    width: 19px
    border-radius: 2em
    float: right
    cursor: pointer
    &:hover
        background page_color

.popup-body
    clear: both
    background-color: page_color
    color: font_color
    padding: 10px
    margin: 0
    label
        margin: 5px
    input
        margin: 8px 5px

.popup-container
    margin: 0
    border 5px solid header_bg_color
    border-radius 6px 6px 0px 0px 

// upload content
#moin-upload-cont
  min-height: 10px

#file_upload
  margin-top: 2em

form.upload_file
  background-color: base_color
  border border_style
  cursor: pointer
  direction: ltr
  font-weight: bold
  height: 2.5em
  line-height: 2.5em
  overflow: hidden
  position: relative
  text-align: center
  width: 15em
  box-shadow: 0px 0px 5px shadow_color
  &:hover
    box-shadow: 0px 0px 5px font_color
  input
      border: 300px solid transparent
      cursor: pointer
      opacity: 0
      position: absolute
     

form.upload_file button
  display: none

form.upload_file
  display: block

.file_upload_template .file_upload_start
  visibility: hidden
  border-width: 0px
  padding: 0px

.file_upload_template .file_upload_start button
  width: 0px

.upload-form
  display: none

.moin-drag
  font-size: 0.7em
  color: shadow_color

a.moin-conflict:before
  content: url(../img/moin-conflict.png)
  margin: 0 0.2em

// tabs
.moin-tab-titles
    margin:-.5em 
    list-style: none    

// history page
#moin-global-history,
#moin-page-history
    font-size 75%

#moin-page-history
    table
        border border_style
        border-radius 5px
        thead 
            border-top-left-radius 5px
            border-top-right-radius 5px
            tr th
                    text-align center
                    input[type="Submit"]
                        width 26px
                        box-shadow 1px 1px 2px shadow_color
                        cursor pointer
                        &:hover
                            box-shadow 1px 1px 2px font_color

.moin-hist-rev
  margin 0
  input
      float left

.moin-wordbreak
  word-break break-all
  word-wrap break-word

.moin-history-time
  width 10%

.moin-history-contenttype
  width 18%

.moin-history-editorinfo
  width 17%

.moin-history-comment
  width 30%

.moin-action
  width 2%
  a:hover
      text-decoration none

.moin-history-container
  border border_style
  margin 2em 2em
  border-top-left-radius 5px
  border-top-right-radius 5px

.moin-history-container-header
  background header_bg_color
  margin 0px
  padding 4px
  color heading_color
  border-bottom border_style
  border-top-left-radius 5px
  border-top-right-radius 5px
  h2
      display inline
      border none
  a.bookmark-link
      margin-left 10px
      color heading_color

.moin-history-container-body
  margin 0
  padding 0
  font-size 14px
  table
      margin 0
      width 100%

.moin-history-save:before
  content url('../img/moin-edit.png')

.moin-history-trash:before
  content url('../img/moin-deleted.png')

.moin-history-rename:before
  content url('../img/moin-renamed.png')

.moin-history-copy:before
  content url('../img/moin-new.png')

.moin-integer
  width 2%

.moin-history-links
  width 5%
  a
      display block

.moin-history-editortext,
.moin-history-links span,
.moin-history-comment span
  color base_color
  display block
  margin-bottom 5px

.moin-offset-links
  float right
  margin-right 20px
  a
      margin-right 10px
      padding 3px 7px
      font-size 20px
      background page_color
      border 1px groove border_color
      border-radius 5px
      &:hover
          box-shadow 0px 0px 12px shadow_color
    
// links
a
    text-decoration none
    // order must be: link, visited, hover, active
    &:link
        color link_color
    &:visited
        color visited_color
    &:hover
        color hover_color
        text-decoration underline
    &:active
        color active_color
        text-decoration underline
    &.moin-nonexistent:link
        color nonexistent_link_color
    &.moin-nonexistent:visited
        color nonexistent_link_color
    &.moin-nonexistent:hover
        color nonexistent_hover_color
    &.moin-nonexistent:active
        color nonexistent_hover_color

// moin-flash & error
.moin-flash
    margin 0
    padding 6px 6px 6px 38px
    background-color heading_color
    border-bottom border style
    background-repeat no-repeat
    background-position 16px center

.moin-flash-hint
    background-image url(../img/smileys/idea.png)
    color hover_color

.moin-flash-info
    background-image url(../img/smileys/icon-info.png)
    color hover_color

.moin-flash-warning
    background-image url(../img/smileys/alert.png)
    color error_color

.moin-flash-error
    background-image url(../img/smileys/icon-error.png)
    color error_color
  
.moin-error
    color error_color
    background base_color
    padding 4px
    margin 1em
    text-align centre
    list-style-type none
    border-radius 5px

// search
#moin-searchform
    padding 0
    font-size 0.82em
    float right
    text-align right
    input
        font-size 100%
        vertical-align middle
        background-color page_color
        border border_style
    button
        box-shadow none

#moin-searchform #moin-search-submit
    text-indent -9000%
    margin-left -24px
    width 20px
    height 16px
    background url(../img/moin-search.png) center center no-repeat
    background-size 16px 16px
    border none
    overflow hidden
    vertical-align middle
    cursor pointer

#moin-searchform #moin-search-query
    padding-right 20px

#moin-searchform div
    margin 0

#moin-long-searchform
    padding 0
    font-size 0.82em
    text-align left
    div
        margin 0
    label
        display inline

#moin-search-query
    width 50%

.searchresults 
    dt
        margin-top 1em
        font-weight normal
    dd, p
        font-size 0.85em
    td
        border-width 0
    p.info
        margin-left 2%

.searchresults .searchhitinfobar
    color active_color
    margin-left 15px
    margin-top 0

.searchresults .foundtext
    margin-left 15px
    margin-top 0

p.searchstats
    font-size 0.8em
    text-align right
    width 100%
    padding 2px

p.searchhint
    background-color page_color
    border 1px solid shadow_color
    padding 2px

.searchpages
    margin-left auto
    margin-right auto
    tr, td
        border 0
        padding 5px
        margin 0
        text-align center
        vertical-align middle
        color font_color
        font-weight bold
        font-size 1.05em
    td
        a, a:link
            text-decoration underline    
    
// lists
ul, dl
    margin-left 1.5em
ol
    // ordered list, first level needs big margin that will contain the number
    margin-left 3em
    ol
        // for >= second level we need less
        margin-left 1.5em

li, dt
    padding 0.1em

dt
    font-weight bold
dd
    margin-left 1.5em

ul
    &.moin-nobullet-list
        list-style-type none

ol
    &.moin-upperalpha-list
        list-style-type upper-alpha
    &.moin-loweralpha-list
        list-style-type lower-alpha
    &.moin-upperroman-list
        list-style-type upper-roman
    &.moin-lowerroman-list
        list-style-type lower-roman

// tags list / tag cloud
tag_scale = 1.2
tag_font_size = 100%

ul.moin-tags
    list-style none
    li
        display inline
        for n in 0 1 2 3 4 5 6 7 8 9
            { '&.weight' + n }
                scale_tag = tag_scale ** (n - 4)
                font-size tag_font_size * scale_tag

// headings
for n in 1 2 3 4 5 6
    {'h' + n}
        scale_font = heading_scale ** (4 - n)
        font-size main_font_size * scale_font
        margin (1em / scale_font) 0
        heading_underline_thickness = floor(4px - n / 2)
        border-bottom heading_underline_thickness solid border_color
        padding-bottom heading_underline_thickness

// special style for heading with mouseover permalinks
a.permalink
    display none
    cursor pointer
    margin-left 0.1em
    color footer_color
    &:hover
        color font_color

h1:hover .permalink,
h2:hover .permalink,
h3:hover .permalink,
h4:hover .permalink,
h5:hover .permalink,
h6:hover .permalink
    display inline
    text-decoration none

// horizontal rule ---- and custom rules ----- to ----------
hr
    background-color font_color
    border 0
    margin .9em 0
    height 1px
    &.moin-hr1
        height 2px
    &.moin-hr2
        height 3px
    &.moin-hr3
        height 5px
    &.moin-hr4
        height 7px
    &.moin-hr5
         height 9px
    &.moin-hr6
        height 12px

// tables
table
    margin 0.5em
    border-collapse collapse
    th, td
        padding 0.3em 0.4em
        vertical-align middle
        text-align left
    th
        border border_style
        background-color header_bg_color
        color heading_color
    td
        border border_style

table.zebra
    border none
    border-collapse separate
    border-spacing 1px
    thead
        background-color header_bg_color
        color heading_color
    tfoot
        background-color base_color
    tbody tr,
    > tr
        background-color table_bg_color
    th,
    td
        border none

pre
    font-family monospace
    white-space pre-wrap
    word-wrap break-word
    border border_style
    background-color base_color
    margin .33em 0
    padding 5px
    clear both
    &.comment
        background-color header_bg_color
        color heading_color
        margin 0
        padding 0
        border 0
        &:before
            content url(../img/attention.png)

textarea
    font-family monospace
    width 100%
    border border_style

input#f_comment
    width 100%
    border border_style
    margin .3em 0

// text styles
sub
    vertical-align sub
sup
    vertical-align super
.moin-big
    font-size 1.17em
.moin-small
    font-size .83em

/* fix tests -- currently checking <big> and <small> */
@media print
    #moin-global-tray
    #moin-local-panel
    #moin-footer
    #moin-search
        display none