view MoinMoin/themes/foobar/static/css/stylus/main.styl @ 1521:becedcc3a41a

Foobar theme list padding changed
author Jaiditya Mathur <jaiditya.mathur@gmail.com>
date Thu, 05 Jul 2012 14:57:21 +0530
parents 05e1d8630527
children f0b5f16ad2a4
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"

// moin diff styling
@import "moin_diff"

font_family = verdana, 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
    font-size .9em
    line-height 1.2em
    text-align justify

// 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 nonexistent_link_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

.moin-itemviews
    a[title="Show"], a[title="Delete this item"], a[title="Completely destroy this item"],
    a[title="Rename this item"], a[title="Edit or Upload"]
        color link_color
#moin-global-panel
    a.moin-usersettings, a.moin-logout
        color link_color
        
// form
label
    display block
    font-weight bold

input[type="submit"],
input[type="button"],
button
    font-weight bold
    font-size .75em
    background base_color
    padding 4px 15px
    border border_style
    border-radius 6px
    box-shadow 1px 1px 2px shadow_color
    cursor pointer
    &:hover
        box-shadow 1px 1px 2px font_color
    &:active
        position relative
        top 1px
    
input,
select
    padding 3px
    background page_color
    border border_style
    border-radius 2px
input[type="text"]
    width 96%
input.blank
    border-color border_color
    border-width 2px
    
.moin-form 
    dd
        float left
        width 69%
        margin-bottom 1em
        margin-left 0
        input
            width 70%
    dt
        clear both
        float left
        width 30%
        text-align right
        margin-top .3em
        padding-right 1%
        label
            &.required:after
                content '*'
                color font_color
    button,
    input[type="submit"]
        margin-left 48%
    
#moin-modify
    dd
        margin-left 0.9em
        width 100%
        float none
    dt
        float none
        text-align left
        width auto
    input[type="submit"]
        margin-left 0

#moin-options
    dd
        float none
        width 38%
        display table-cell
        padding 1.2em
    dt
        margin-left 10%
        text-align left
        width 61%
        margin-top 1.3em
        
// create table
#moin-create-table
    width 95%
    margin-left auto
    margin-right auto
    tbody tr 
            th
                text-align center
                background table_bg_color
                margin 2px
            td
                text-align center
                background page_color
                a
                    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 13em
        line-height 2em
        .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
            margin-top 1em
        &.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 .9em

.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 1.2em
    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
        font-size .84em
.moin-select-actions
    span
        cursor pointer
        font-size .84em
    ul
        li
            cursor pointer
.moin-contenttypes-wrapper
    div
        cursor pointer
        font-size .84em
    form 
        display none
        li
            label
                cursor pointer
                display inline
                vertical-align middle
                line-height 2em
            span
                display none
            &:hover
                background base_color
                span
                    display block
                    font-size 0.8em
            
#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                

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

.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

input[value="X"]
    padding 0px 1px
    margin -0.2em
    width 19px
    border-radius 2em
    float right
    &: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

#moin-usersetting-title
    li a
        font-size .84em
        color heading_color

// history page
#moin-global-history,
#moin-page-history
    font-size .75em

#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"]
                        padding 4px 10px
                        box-shadow 1px 1px 2px shadow_color
                        cursor pointer
                        font-size 1em
                        &: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 1.2em
    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 1.6em
        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 1em
        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
    padding 0px
    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
    padding 0.2em

dt
    font-weight bold
    padding 0.1em
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 = 1em

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 .5em
    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 98%
    border border_style
    margin-left .5em

input#f_comment
    width 96%
    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