mailcatcher/assets/stylesheets/mailcatcher.css.sass

244 lines
5.1 KiB
Sass

@import "compass"
@import "compass/reset"
html, body
width: 100%
height: 100%
body
+establish-baseline(12px)
+display-box
+box-orient(vertical)
background: #eee
color: #000
font-size: 12px
font-family: Helvetica, sans-serif
&.iframe
background: #fff
h1
font-size: 1.3em
margin: 12px
p, form
margin: 0 12px 12px 12px
line-height: 1.25
.loading
color: #666
margin-left: 0.5em
.button
padding: .5em 1em
border: 1px solid #ccc
+border-radius(2px)
+background(linear-gradient(color-stops(#f4f4f4, #ececec)), #ececec)
color: #666
+text-shadow(1px 1px 0 #fff)
text-decoration: none
&:hover, &:focus
border-color: #999
border-bottom-color: #666
+background(linear-gradient(color-stops(#eee, #ddd)), #ddd)
color: #333
text-decoration: none
&:active, &.active
border-color: #666
border-bottom-color: #999
+background(linear-gradient(color-stops(#ddd, #eee)), #eee)
color: #333
text-decoration: none
+text-shadow(-1px -1px 0 #eee)
body > header
+clearfix
border-bottom: 1px solid #ccc
h1
float: left
margin-left: 6px
padding: 6px
padding-left: 30px
background: url(/assets/logo.png) left no-repeat
font-size: 18px
font-weight: bold
a
color: black
text-decoration: none
+text-shadow(0 1px 0 white)
+transition(0.1s ease)
&:hover
color: #4183C4
nav
&.project
float: left
&.app
float: right
border-left: 1px solid #ccc
li
display: block
float: left
border-left: 1px solid #fff
border-right: 1px solid #ccc
input
margin: 6px
a
display: block
padding: 10px
text-decoration: none
+text-shadow(0 1px 0 white)
+background(linear-gradient(color-stops(#f4f4f4, #ececec)), #ececec)
color: #666
+text-shadow(1px 1px 0 #fff)
text-decoration: none
&:hover, &:focus
+background(linear-gradient(color-stops(#eee, #ddd)), #ddd)
color: #333
text-decoration: none
&:active, &.active
+background(linear-gradient(color-stops(#ddd, #eee)), #eee)
color: #333
text-decoration: none
+text-shadow(-1px -1px 0 #eee)
#messages
width: 100%
height: 10em
// Two rows with padding:
min-height: (2 * (1em + .5em))
overflow: auto
background: #fff
border-top: 1px solid #fff
table
+clearfix
width: 100%
thead tr
background: #eee
color: #333
th
padding: .25em
font-weight: bold
color: #666
+text-shadow(0 1px 0 white)
tbody tr
cursor: pointer
+transition(0.1s ease)
color: #333
&:hover
color: #000
&:nth-child(even)
background: #f0f0f0
&.selected
background: Highlight
color: HighlightText
td
padding: .25em
&.blank
color: #666
font-style: italic
#resizer
padding-bottom: 5px
cursor: ns-resize
.ruler
border-top: 1px solid #ccc
border-bottom: 1px solid #fff
#message
+display-box
+box-orient(vertical)
+box-flex(1)
> header
+clearfix
.metadata
+clearfix
padding: .5em
// This is already padded by resizer
padding-top: 0
dt, dd
padding: .25em
dt
float: left
clear: left
width: 8em
margin-right: .5em
text-align: right
font-weight: bold
color: #666
+text-shadow(0 1px 0 white)
dd.subject
font-weight: bold
.attachments
display: none
ul
display: inline
li
+inline-block
margin-right: .5em
.views
ul
padding: 0 .5em
border-bottom: 1px solid #ccc
.tab
+inline-block
a
+inline-block
padding: .5em
border: 1px solid #ccc
background: #ddd
color: #333
border-width: 1px 1px 0 1px
cursor: pointer
+text-shadow(0 1px 0 #eeeeee)
text-decoration: none
&:not(.selected):hover a
background-color: #eee
&.selected a
background: #fff
color: #000
height: 13px
+box-shadow(1px 1px 0 #ccc)
margin-bottom: -2px
cursor: default
.action
+inline-block
float: right
margin: 0 .25em
.fractal-analysis
margin: 12px 0
.report-intro
font-weight: bold
&.valid
color: #090
&.invalid
color: #c33
code
font-family: Monaco, "Courier New", Courier, monospace
background-color: #f8f8ff
color: #444
padding: 0 .2em
border: 1px solid #dedede
ul
margin: 1em 0 1em 1em
list-style-type: square
ol
margin: 1em 0 1em 2em
list-style-type: decimal
ul li, ol li
display: list-item
margin: .5em 0 .5em 1em
.error-intro
strong
font-weight: bold
.unsupported-clients
dt
padding-left: 1em
dd
padding-left: 2em
ul
li
display: list-item
iframe
+display-box
+box-flex(1)
background: #fff