mirror of
https://github.com/moparisthebest/mailcatcher
synced 2024-11-12 04:05:01 -05:00
a9e46c1d55
* Added analysis.xsl to transform the fractal validation xml into html which is injected into the analysis iframe. This allowed for easier styling of the returned xml data. * Added xslt query plugin to fetch and transform the xml * Styled the output in a similar manner to the Fractal website
225 lines
4.8 KiB
Sass
225 lines
4.8 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(/images/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: inline
|
|
a
|
|
+inline-block
|
|
float: left
|
|
padding: 9px
|
|
border-left: 1px solid #fff
|
|
border-right: 1px solid #ccc
|
|
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
|
|
.report-intro
|
|
background: #EEF4F5
|
|
margin-top: 1.5em
|
|
padding: 1em
|
|
strong
|
|
font-weight: bold
|
|
.code
|
|
background-color: white
|
|
font-family: comic Sans MS
|
|
padding: 1px 5px
|
|
.unsupported-clients
|
|
margin: 1em
|
|
dt
|
|
padding-left: 1em
|
|
dd
|
|
padding-left: 2em
|
|
|
|
iframe
|
|
+display-box
|
|
+box-flex(1)
|
|
background: #fff
|