Merge pull request #309 from TomK32/master
Small improvements to make the web output valid HTML
This commit is contained in:
Simon Michael
commit
29267ecaf2
@ -124,12 +124,11 @@ instance Yesod App where
|
||||
-- hamletToRepHtml $(hamletFile "templates/default-layout-wrapper.hamlet")
|
||||
|
||||
pc <- widgetToPageContent $ do
|
||||
$(widgetFile "normalize")
|
||||
addStylesheet $ StaticR css_bootstrap_min_css
|
||||
-- load these things early, in HEAD:
|
||||
toWidgetHead [hamlet|
|
||||
<script type="text/javascript" src="@{StaticR js_jquery_min_js}"></script>
|
||||
<script type="text/javascript" src="@{StaticR js_typeahead_bundle_min_js}"></script>
|
||||
<script type="text/javascript" src="@{StaticR js_jquery_min_js}">
|
||||
<script type="text/javascript" src="@{StaticR js_typeahead_bundle_min_js}">
|
||||
|]
|
||||
addScript $ StaticR js_bootstrap_min_js
|
||||
-- addScript $ StaticR js_typeahead_bundle_min_js
|
||||
@ -347,7 +346,9 @@ addform _ vd@VD{..} = [hamlet|
|
||||
^{postingfields vd n}
|
||||
<span style="padding-left:2em;">
|
||||
<span .small>
|
||||
Tab in last field for <a .small href="#" onclick="addformAddPosting(); return false;">more</a> (or ctrl +, ctrl -)
|
||||
Tab in last field for
|
||||
<a href="#" onclick="addformAddPosting(); return false;">more
|
||||
(or ctrl +, ctrl -)
|
||||
|]
|
||||
where
|
||||
defdate = "today" :: String
|
||||
|
||||
@ -138,7 +138,7 @@ searchform VD{..} = [hamlet|
|
||||
-- <tr#addbuttonrow>
|
||||
-- <td>
|
||||
-- <span.help>^{formathelp}
|
||||
-- <td align=right>
|
||||
-- <td>
|
||||
-- <span.help>
|
||||
-- Are you sure ? This will overwrite the journal. #
|
||||
-- <input type=hidden name=action value=edit>
|
||||
@ -193,7 +193,7 @@ balanceReportAsHtml _ vd@VD{..} (items',total) =
|
||||
<td colspan=2>
|
||||
<tr>
|
||||
<td>
|
||||
<td.balance align=right>#{mixedAmountAsHtml total}
|
||||
<td.balance>#{mixedAmountAsHtml total}
|
||||
|]
|
||||
where
|
||||
l = ledgerFromJournal Any j
|
||||
@ -210,11 +210,11 @@ balanceReportAsHtml _ vd@VD{..} (items',total) =
|
||||
|
||||
<a href="@?{acctonlyquery}" title="Show transactions affecting this account but not subaccounts">only
|
||||
|
||||
<td.balance align=right>#{mixedAmountAsHtml abal}
|
||||
<td.balance>#{mixedAmountAsHtml abal}
|
||||
|]
|
||||
where
|
||||
hassubs = not $ maybe False (null.asubs) $ ledgerAccount l acct
|
||||
-- <td.numpostings align=right title="#{numpostings} transactions in this account">(#{numpostings})
|
||||
-- <td.numpostings title="#{numpostings} transactions in this account">(#{numpostings})
|
||||
-- numpostings = maybe 0 (length.apostings) $ ledgerAccount l acct
|
||||
depthclass = "depth"++show aindent
|
||||
inacctclass = case inacctmatcher of
|
||||
|
||||
@ -35,7 +35,7 @@ getJournalR = do
|
||||
hledgerLayout vd "journal" [hamlet|
|
||||
<h2#contenttitle>#{title}
|
||||
<!-- p>Journal entries record movements of commodities between accounts. -->
|
||||
<a#addformlink role="button" style="cursor:pointer;" onClick="addformReset(true);" data-toggle="modal" data-target="#addmodal" title="Add a new transaction to the journal" style="margin-top:1em;">Add a transaction
|
||||
<a#addformlink role="button" style="cursor:pointer; margin-top:1em;" onClick="addformReset(true);" data-toggle="modal" data-target="#addmodal" itle="Add a new transaction to the journal" >Add a transaction
|
||||
^{maincontent}
|
||||
|]
|
||||
|
||||
@ -59,26 +59,27 @@ journalTransactionsReportAsHtml _ vd (_,items) = [hamlet|
|
||||
where
|
||||
-- .#{datetransition}
|
||||
itemAsHtml :: ViewData -> (Int, Bool, Bool, Bool, TransactionsReportItem) -> HtmlUrl AppRoute
|
||||
itemAsHtml VD{..} (n, _, _, _, (t, _, split, _, amt, _)) = [hamlet|
|
||||
<tr ##{date} .item.#{evenodd}.#{firstposting} style="vertical-align:top;" title="#{show t}">
|
||||
<td.date>#{date}
|
||||
<td.description colspan=2>#{elideRight 60 desc}
|
||||
<td.amount style="text-align:right;">
|
||||
$if showamt
|
||||
\#{mixedAmountAsHtml amt}
|
||||
$forall p' <- tpostings t
|
||||
<tr .item.#{evenodd}.posting title="#{show t}">
|
||||
<td.date>
|
||||
<td.description>
|
||||
<td.account>
|
||||
|
||||
<a href="@?{acctlink (paccount p')}##{date}" title="#{paccount p'}">#{elideAccountName 40 $ paccount p'}
|
||||
<td.amount style="text-align:right;">#{mixedAmountAsHtml $ pamount p'}
|
||||
<tr.#{evenodd}>
|
||||
<td>
|
||||
<td>
|
||||
<td>
|
||||
<td>
|
||||
itemAsHtml VD{..} (n, _, _, _, (torig, _, split, _, amt, _)) = [hamlet|
|
||||
<tbody ##{tindex torig}>
|
||||
<tr .item.#{evenodd}.#{firstposting} style="vertical-align:top;" title="#{show torig}">
|
||||
<td.date>#{date}
|
||||
<td.description colspan=2>#{elideRight 60 desc}
|
||||
<td.amount style="text-align:right;">
|
||||
$if showamt
|
||||
\#{mixedAmountAsHtml amt}
|
||||
$forall p' <- tpostings torig
|
||||
<tr .item.#{evenodd}.posting title="#{show torig}">
|
||||
<td.date>
|
||||
<td.description>
|
||||
<td.account>
|
||||
|
||||
<a href="@?{acctlink (paccount p')}##{tindex torig}" title="#{paccount p'}">#{elideAccountName 40 $ paccount p'}
|
||||
<td.amount style="text-align:right;">#{mixedAmountAsHtml $ pamount p'}
|
||||
<tr.#{evenodd}>
|
||||
<td>
|
||||
<td>
|
||||
<td>
|
||||
<td>
|
||||
|]
|
||||
where
|
||||
acctlink a = (RegisterR, [("q", pack $ accountQuery a)])
|
||||
@ -86,7 +87,7 @@ $forall p' <- tpostings t
|
||||
-- datetransition | newm = "newmonth"
|
||||
-- | newd = "newday"
|
||||
-- | otherwise = "" :: String
|
||||
(firstposting, date, desc) = (False, show $ tdate t, tdescription t)
|
||||
(firstposting, date, desc) = (False, show $ tdate torig, tdescription torig)
|
||||
-- acctquery = (here, [("q", pack $ accountQuery acct)])
|
||||
showamt = not split || not (isZeroMixedAmount amt)
|
||||
|
||||
|
||||
@ -73,8 +73,9 @@ registerItemsHtml _ vd (balancelabel,items) = [hamlet|
|
||||
itemAsHtml :: ViewData -> (Int, Bool, Bool, Bool, TransactionsReportItem) -> HtmlUrl AppRoute
|
||||
itemAsHtml VD{..} (n, newd, newm, _, (torig, tacct, split, acct, amt, bal)) = [hamlet|
|
||||
|
||||
<tr ##{date} .item.#{evenodd}.#{firstposting}.#{datetransition} title="#{show torig}" style="vertical-align:top;">
|
||||
<td.date><a href="@{JournalR}##{date}">#{date}
|
||||
<tr ##{tindex torig} .item.#{evenodd}.#{firstposting}.#{datetransition} title="#{show torig}" style="vertical-align:top;">
|
||||
<td.date>
|
||||
<a href="@{JournalR}##{tindex torig}">#{date}
|
||||
<td.description title="#{show torig}">#{elideRight 30 desc}
|
||||
<td.account>#{elideRight 40 acct}
|
||||
<td.amount style="text-align:right; white-space:nowrap;">
|
||||
@ -119,7 +120,7 @@ registerChartHtml percommoditytxnreports =
|
||||
$forall i <- reverse items
|
||||
[
|
||||
#{dayToJsTimestamp $ triDate i},
|
||||
#{simpleMixedAmountQuantity $ triCommodityBalance c i},
|
||||
#{simpleMixedAmountQuantity $ triCommodityBalance c i}
|
||||
],
|
||||
/* [] */
|
||||
],
|
||||
@ -145,6 +146,7 @@ registerChartHtml percommoditytxnreports =
|
||||
'#{showMixedAmountWithZeroCommodity $ triCommodityAmount c i}',
|
||||
'#{showMixedAmountWithZeroCommodity $ triCommodityBalance c i}',
|
||||
'#{concat $ intersperse "\\n" $ lines $ show $ triOrigTransaction i}',
|
||||
#{tindex $ triOrigTransaction i}
|
||||
],
|
||||
/* [] */
|
||||
],
|
||||
|
||||
@ -92,10 +92,6 @@ extra-source-files:
|
||||
static/js/typeahead.bundle.min.js
|
||||
templates/default-layout-wrapper.hamlet
|
||||
templates/default-layout.hamlet
|
||||
templates/homepage.hamlet
|
||||
templates/homepage.julius
|
||||
templates/homepage.lucius
|
||||
templates/normalize.lucius
|
||||
|
||||
source-repository head
|
||||
type: git
|
||||
|
||||
@ -98,10 +98,6 @@ extra-source-files:
|
||||
- static/js/typeahead.bundle.min.js
|
||||
- templates/default-layout-wrapper.hamlet
|
||||
- templates/default-layout.hamlet
|
||||
- templates/homepage.hamlet
|
||||
- templates/homepage.julius
|
||||
- templates/homepage.lucius
|
||||
- templates/normalize.lucius
|
||||
|
||||
# XXX not supported
|
||||
# flag threaded
|
||||
|
||||
@ -8,7 +8,7 @@ body { backgroun
|
||||
.registerreport .odd { background-color:#ded; }
|
||||
/* .transactionsreport .odd { background-color:#eee; } */
|
||||
.filtering { background-color:#e0e0e0; }
|
||||
a:link, a:visited { color:#00e; }
|
||||
a:link, a:visited { color:#00e !important; }
|
||||
/* a:link:hover, a:visited:hover { color:red; } */
|
||||
/* #main { border-color:#e0e0e0; } see below */
|
||||
/* .journalreport td { border-color:thin solid #e0e0e0; } see below */
|
||||
@ -25,6 +25,9 @@ a:link, a:visited { color:#00e; }
|
||||
#editform textarea { background-color:#eee; }
|
||||
.negative { color:#800; }
|
||||
.help { }
|
||||
.highlighted {
|
||||
background-color: #F4F466 !important;
|
||||
}
|
||||
|
||||
#sidebar .hoverlinks { visibility:hidden; }
|
||||
/* #sidebar .mouseover { background-color:rgba(208,208,208,0.5); } */
|
||||
@ -119,10 +122,15 @@ body { margin:0; }
|
||||
.description { padding-left:1em; white-space:normal; }
|
||||
.account { padding-left:1em; white-space:normal; }
|
||||
.amount { padding-left:1em; white-space:nowrap; }
|
||||
.balance { padding-left:1em; padding-right:0.3em; white-space:nowrap; }
|
||||
.balance { padding-left:1em; white-space:nowrap; }
|
||||
tr td:last-child { padding-right:0.3em; }
|
||||
tr td:first-child { padding-left:0.3em; }
|
||||
.amount, .balance { width:2em; } /* minimise width */
|
||||
.positive { }
|
||||
|
||||
td.balance, td.numpostings {
|
||||
text-align: right;
|
||||
}
|
||||
/* table.transactionsreport { border-spacing: 0; } */
|
||||
/* .transactionsreport td { } */
|
||||
/* .transactionsreport pre { margin-top:0; } */
|
||||
@ -260,3 +268,8 @@ tr.firstposting td { }
|
||||
.twitter-typeahead {
|
||||
width:100%;
|
||||
}
|
||||
|
||||
code {
|
||||
font-weight: bold;
|
||||
color: black;
|
||||
}
|
||||
|
||||
@ -26,6 +26,15 @@ $(document).ready(function() {
|
||||
$('body, #addform input, #addform select').bind('keydown', 'ctrl+-', addformDeletePosting);
|
||||
$('#addform tr.posting:last > td:first input').bind('keydown', 'tab', addformAddPostingWithTab);
|
||||
|
||||
|
||||
// highlight the entry from the url hash
|
||||
if (window.location.hash && $(window.location.hash)[0]) {
|
||||
$(window.location.hash).addClass('highlighted');
|
||||
}
|
||||
$(window).on('hashchange', function(event) {
|
||||
$('.highlighted').removeClass('highlighted');
|
||||
$(window.location.hash).addClass('highlighted');
|
||||
});
|
||||
});
|
||||
|
||||
//----------------------------------------------------------------------
|
||||
@ -36,58 +45,39 @@ function registerChart($container, series) {
|
||||
return $container.plot(
|
||||
series,
|
||||
{ /* general chart options */
|
||||
// series: {
|
||||
// },
|
||||
// yaxis: {
|
||||
// /* ticks: 6, */
|
||||
// },
|
||||
xaxis: {
|
||||
mode: "time",
|
||||
timeformat: "%Y/%m/%d"
|
||||
/* ticks: 6, */
|
||||
},
|
||||
legend: {
|
||||
position: 'sw'
|
||||
},
|
||||
grid: {
|
||||
markings:
|
||||
function (axes) {
|
||||
var now = Date.now();
|
||||
var markings = [
|
||||
// {
|
||||
// xaxis: { to: now }, // past
|
||||
// yaxis: { from: 0, to: 0 }, // =0
|
||||
// color: '#d88',
|
||||
// lineWidth:1
|
||||
// },
|
||||
{
|
||||
xaxis: { to: now }, // past
|
||||
yaxis: { to: 0 }, // <0
|
||||
color: '#ffdddd',
|
||||
},
|
||||
|
||||
// {
|
||||
// xaxis: { from: now, to: now }, // now
|
||||
// color: '#bbb',
|
||||
// },
|
||||
|
||||
{
|
||||
xaxis: { from: now }, // future
|
||||
yaxis: { from: 0 }, // >0
|
||||
// color: '#dddddd',
|
||||
color: '#e0e0e0',
|
||||
},
|
||||
{
|
||||
xaxis: { from: now }, // future
|
||||
yaxis: { to: 0 }, // <0
|
||||
// color: '#ddbbbb',
|
||||
color: '#e8c8c8',
|
||||
},
|
||||
{
|
||||
// xaxis: { from: now }, // future
|
||||
yaxis: { from: 0, to: 0 }, // =0
|
||||
color: '#bb0000',
|
||||
lineWidth:1
|
||||
},
|
||||
];
|
||||
// console.log(markings);
|
||||
return markings;
|
||||
},
|
||||
hoverable: true,
|
||||
@ -113,13 +103,14 @@ function registerChart($container, series) {
|
||||
|
||||
function registerChartClick(ev, pos, item) {
|
||||
if (item) {
|
||||
var date = $.plot.dateGenerator(item.datapoint[0], {});
|
||||
var dateid = $.plot.formatDate(date, '%Y-%m-%d');
|
||||
$target = $('#'+dateid);
|
||||
if ($target.length)
|
||||
targetselector = '#'+item.series.data[item.dataIndex][5];
|
||||
$target = $(targetselector);
|
||||
if ($target.length) {
|
||||
window.location.hash = targetselector;
|
||||
$('html, body').animate({
|
||||
scrollTop: $target.offset().top
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -254,33 +245,20 @@ function addformDeletePosting() {
|
||||
// SIDEBAR
|
||||
|
||||
function sidebarToggle() {
|
||||
//console.log('sidebarToggle');
|
||||
var visible = $('#sidebar').is(':visible');
|
||||
//console.log('sidebar visibility was',visible);
|
||||
// if opening sidebar, start an ajax fetch of its content
|
||||
if (!visible) {
|
||||
//console.log('getting sidebar content');
|
||||
$.get("sidebar"
|
||||
,null
|
||||
,function(data) {
|
||||
//console.log( "success" );
|
||||
$("#sidebar-body" ).html(data);
|
||||
})
|
||||
.done(function() {
|
||||
//console.log( "success 2" );
|
||||
})
|
||||
.fail(function() {
|
||||
//console.log( "error" );
|
||||
alert("Loading the sidebar did fail");
|
||||
});
|
||||
}
|
||||
// localStorage.setItem('sidebarVisible', !visible);
|
||||
// set a cookie to communicate the new sidebar state to the server
|
||||
$.cookie('showsidebar', visible ? '0' : '1');
|
||||
// horizontally slide the sidebar in or out
|
||||
// how to make it smooth, without delayed content pop-in ?
|
||||
//$('#sidebar').animate({'width': 'toggle'});
|
||||
//$('#sidebar').animate({'width': visible ? 'hide' : '+=20m'});
|
||||
//$('#sidebar-spacer').width(200);
|
||||
$('#sidebar').animate({'width': visible ? 'hide' : 'show'});
|
||||
}
|
||||
|
||||
|
||||
@ -61,11 +61,11 @@ $newline never
|
||||
<p>
|
||||
<b>Keyboard shortcuts
|
||||
<ul>
|
||||
<li> <b><tt>h</tt></b> or maybe <b><tt>?</tt></b> - view this help (escape or click to exit)
|
||||
<li> <b><tt>j</tt></b> - go to the Journal view (home)
|
||||
<li> <b><tt>a</tt></b> - add a transaction (escape to cancel)
|
||||
<li> <b><tt>s</tt></b> - toggle sidebar
|
||||
<li> <b><tt>f</tt></b> - focus search form ("find")
|
||||
<li> <code>h</code> or maybe <code>?</code> - view this help (escape or click to exit)
|
||||
<li> <code>j</code> - go to the Journal view (home)
|
||||
<li> <code>a</code> - add a transaction (escape to cancel)
|
||||
<li> <code>s</code> - toggle sidebar
|
||||
<li> <code>f</code> - focus search form ("find")
|
||||
<p>
|
||||
<b>General
|
||||
<ul>
|
||||
@ -79,19 +79,19 @@ $newline never
|
||||
<p>
|
||||
<b>Search
|
||||
<ul>
|
||||
<li> <b><tt>acct:REGEXP</tt></b> - filter on to/from account
|
||||
<li> <b><tt>desc:REGEXP</tt></b> - filter on description
|
||||
<li> <b><tt>date:PERIODEXP</tt></b>, <b><tt>date2:PERIODEXP</tt></b> - filter on date or secondary date
|
||||
<li> <b><tt>code:REGEXP</tt></b> - filter on transaction's code (eg check number)
|
||||
<li> <b><tt>status:*</tt></b>, <b><tt>status:!</tt></b>, <b><tt>status:</tt></b> - filter on transaction's cleared status (cleared, pending, uncleared)
|
||||
<!-- <li> <b><tt>empty:BOOL</tt></b> - filter on whether amount is zero -->
|
||||
<li> <b><tt>amt:N</tt></b>, <b><tt>amt:<N</tt></b>, <b><tt>amt:>N</tt></b> - filter on the unsigned amount magnitude. Or with a sign before N, filter on the signed value. (Single-commodity amounts only.)
|
||||
<li> <b><tt>cur:REGEXP</tt></b> - filter on the currency/commodity symbol (must match all of it). Dollar sign must be written as <tt>\$</tt>
|
||||
<li> <b><tt>tag:NAME</tt></b>, <b><tt>tag:NAME=REGEX</tt></b> - filter on tag name, or tag name and value
|
||||
<!-- <li> <b><tt>depth:N</tt></b> - filter out accounts below this depth -->
|
||||
<li> <b><tt>real:BOOL</tt></b> - filter on postings' real/virtual-ness
|
||||
<li> <code>acct:REGEXP</code> - filter on to/from account
|
||||
<li> <code>desc:REGEXP</code> - filter on description
|
||||
<li> <code>date:PERIODEXP</code>, <code>date2:PERIODEXP</code> - filter on date or secondary date
|
||||
<li> <code>code:REGEXP</code> - filter on transaction's code (eg check number)
|
||||
<li> <code>status:*</code>, <code>status:!</code>, <code>status:</code> - filter on transaction's cleared status (cleared, pending, uncleared)
|
||||
<!-- <li> <code>empty:BOOL</code> - filter on whether amount is zero -->
|
||||
<li> <code>amt:N</code>, <code>amt:<N</code>, <code>amt:>N</code> - filter on the unsigned amount magnitude. Or with a sign before N, filter on the signed value. (Single-commodity amounts only.)
|
||||
<li> <code>cur:REGEXP</code> - filter on the currency/commodity symbol (must match all of it). Dollar sign must be written as <code>\$</code>
|
||||
<li> <code>tag:NAME</code>, <code>tag:NAME=REGEX</code> - filter on tag name, or tag name and value
|
||||
<!-- <li> <code>depth:N</code> - filter out accounts below this depth -->
|
||||
<li> <code>real:BOOL</code> - filter on postings' real/virtual-ness
|
||||
<li> Enclose search patterns containing spaces in single or double quotes
|
||||
<li> Prepend <b><tt>not:</tt></b> to negate a search term
|
||||
<li> Prepend <code>not:</code> to negate a search term
|
||||
<li> Multiple search terms on different fields are AND'ed, multiple search terms on the same field are OR'ed
|
||||
<li> These search terms also work with command-line hledger
|
||||
|
||||
|
||||
@ -1,38 +0,0 @@
|
||||
<h1>_{MsgHello}
|
||||
|
||||
<ol>
|
||||
<li>Now that you have a working project you should use the #
|
||||
\<a href="http://www.yesodweb.com/book/">Yesod book</a> to learn more. #
|
||||
You can also use this scaffolded site to explore some basic concepts.
|
||||
|
||||
<li> This page was generated by the #{handlerName} handler in #
|
||||
\<em>Handler/Home.hs</em>.
|
||||
|
||||
<li> The #{handlerName} handler is set to generate your site's home screen in Routes file #
|
||||
<em>config/routes
|
||||
|
||||
<li> The HTML you are seeing now is actually composed by a number of <em>widgets</em>, #
|
||||
most of them are brought together by the <em>defaultLayout</em> function which #
|
||||
is defined in the <em>Foundation.hs</em> module, and used by <em>#{handlerName}</em>. #
|
||||
All the files for templates and wigdets are in <em>templates</em>.
|
||||
|
||||
<li>
|
||||
A Widget's Html, Css and Javascript are separated in three files with the #
|
||||
\<em>.hamlet</em>, <em>.lucius</em> and <em>.julius</em> extensions.
|
||||
|
||||
<li ##{aDomId}>If you had javascript enabled then you wouldn't be seeing this.
|
||||
|
||||
<li #form>
|
||||
This is an example trivial Form. Read the #
|
||||
\<a href="http://www.yesodweb.com/book/forms">Forms chapter</a> #
|
||||
on the yesod book to learn more about them.
|
||||
$maybe (info,con) <- submission
|
||||
<div .message>
|
||||
Your file's type was <em>#{fileContentType info}</em>. You say it has: <em>#{con}</em>
|
||||
<form method=post action=@{HomeR}#form enctype=#{formEnctype}>
|
||||
^{formWidget}
|
||||
<input type="submit" value="Send it!">
|
||||
|
||||
<li> And last but not least, Testing. In <em>tests/main.hs</em> you will find a #
|
||||
test suite that performs tests on this page. #
|
||||
You can run your tests by doing: <pre>yesod test</pre>
|
||||
@ -1 +0,0 @@
|
||||
document.getElementById("#{aDomId}").innerHTML = "This text was added by the Javascript part of the homepage widget.";
|
||||
@ -1,6 +0,0 @@
|
||||
h1 {
|
||||
text-align: center
|
||||
}
|
||||
h2##{aDomId} {
|
||||
color: #990
|
||||
}
|
||||
@ -1,439 +0,0 @@
|
||||
/*! normalize.css 2011-08-12T17:28 UTC · http://github.com/necolas/normalize.css */
|
||||
|
||||
/* =============================================================================
|
||||
HTML5 display definitions
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Corrects block display not defined in IE6/7/8/9 & FF3
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Corrects inline-block display not defined in IE6/7/8/9 & FF3
|
||||
*/
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
video {
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
/*
|
||||
* Prevents modern browsers from displaying 'audio' without controls
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4
|
||||
* Known issue: no IE6 support
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* =============================================================================
|
||||
Base
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
|
||||
* http://clagnut.com/blog/348/#c790
|
||||
* 2. Keeps page centred in all browsers regardless of content height
|
||||
* 3. Prevents iOS text size adjust after orientation change, without disabling user zoom
|
||||
* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
|
||||
*/
|
||||
|
||||
html {
|
||||
font-size: 100%; /* 1 */
|
||||
overflow-y: scroll; /* 2 */
|
||||
-webkit-text-size-adjust: 100%; /* 3 */
|
||||
-ms-text-size-adjust: 100%; /* 3 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses margins handled incorrectly in IE6/7
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses font-family inconsistency between 'textarea' and other form elements.
|
||||
*/
|
||||
|
||||
body,
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
|
||||
/* =============================================================================
|
||||
Links
|
||||
========================================================================== */
|
||||
|
||||
a {
|
||||
color: #00e;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #551a8b;
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses outline displayed oddly in Chrome
|
||||
*/
|
||||
|
||||
a:focus {
|
||||
outline: thin dotted;
|
||||
}
|
||||
|
||||
/*
|
||||
* Improves readability when focused and also mouse hovered in all browsers
|
||||
* people.opera.com/patrickl/experiments/keyboard/test
|
||||
*/
|
||||
|
||||
a:hover,
|
||||
a:active {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
|
||||
/* =============================================================================
|
||||
Typography
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Addresses styling not present in IE7/8/9, S5, Chrome
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses style set to 'bolder' in FF3/4, S4/5, Chrome
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses styling not present in S5, Chrome
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses styling not present in IE6/7/8/9
|
||||
*/
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/*
|
||||
* Corrects font family set oddly in IE6, S4/5, Chrome
|
||||
* en.wikipedia.org/wiki/User:Davidgothberg/Test59
|
||||
*/
|
||||
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, serif;
|
||||
_font-family: 'courier new', monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/*
|
||||
* Improves readability of pre-formatted text in all browsers
|
||||
*/
|
||||
|
||||
pre {
|
||||
white-space: pre;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Addresses CSS quotes not supported in IE6/7
|
||||
* 2. Addresses quote property not supported in S4
|
||||
*/
|
||||
|
||||
/* 1 */
|
||||
|
||||
q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
/* 2 */
|
||||
|
||||
q:before,
|
||||
q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 75%;
|
||||
}
|
||||
|
||||
/*
|
||||
* Prevents sub and sup affecting line-height in all browsers
|
||||
* gist.github.com/413930
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
|
||||
/* =============================================================================
|
||||
Lists
|
||||
========================================================================== */
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin: 1em 0;
|
||||
padding: 0 0 0 40px;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin: 0 0 0 40px;
|
||||
}
|
||||
|
||||
nav ul,
|
||||
nav ol {
|
||||
list-style: none;
|
||||
list-style-image: none;
|
||||
}
|
||||
|
||||
|
||||
/* =============================================================================
|
||||
Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* 1. Removes border when inside 'a' element in IE6/7/8/9
|
||||
* 2. Improves image quality when scaled in IE7
|
||||
* code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
|
||||
*/
|
||||
|
||||
img {
|
||||
border: 0; /* 1 */
|
||||
-ms-interpolation-mode: bicubic; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Corrects overflow displayed oddly in IE9
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
/* =============================================================================
|
||||
Figures
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Addresses margin not present in IE6/7/8/9, S5, O11
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
/* =============================================================================
|
||||
Forms
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Corrects margin displayed oddly in IE6/7
|
||||
*/
|
||||
|
||||
form {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Define consistent margin and padding
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Corrects color not being inherited in IE6/7/8/9
|
||||
* 2. Corrects alignment displayed oddly in IE6/7
|
||||
*/
|
||||
|
||||
legend {
|
||||
border: 0; /* 1 */
|
||||
*margin-left: -7px; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Corrects font size not being inherited in all browsers
|
||||
* 2. Addresses margins set differently in IE6/7, F3/4, S5, Chrome
|
||||
* 3. Improves appearance and consistency in all browsers
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-size: 100%; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
vertical-align: baseline; /* 3 */
|
||||
*vertical-align: middle; /* 3 */
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Addresses FF3/4 setting line-height using !important in the UA stylesheet
|
||||
* 2. Corrects inner spacing displayed oddly in IE6/7
|
||||
*/
|
||||
|
||||
button,
|
||||
input {
|
||||
line-height: normal; /* 1 */
|
||||
*overflow: visible; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Corrects overlap and whitespace issue for buttons and inputs in IE6/7
|
||||
* Known issue: reintroduces inner spacing
|
||||
*/
|
||||
|
||||
table button,
|
||||
table input {
|
||||
*overflow: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Improves usability and consistency of cursor style between image-type 'input' and others
|
||||
* 2. Corrects inability to style clickable 'input' types in iOS
|
||||
*/
|
||||
|
||||
button,
|
||||
html input[type="button"],
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
cursor: pointer; /* 1 */
|
||||
-webkit-appearance: button; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Addresses box sizing set to content-box in IE8/9
|
||||
* 2. Addresses excess padding in IE8/9
|
||||
*/
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Addresses appearance set to searchfield in S5, Chrome
|
||||
* 2. Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof)
|
||||
*/
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box; /* 2 */
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/*
|
||||
* Corrects inner padding displayed oddly in S5, Chrome on OSX
|
||||
*/
|
||||
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* Corrects inner padding and border displayed oddly in FF3/4
|
||||
* www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Removes default vertical scrollbar in IE6/7/8/9
|
||||
* 2. Improves readability and alignment in all browsers
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto; /* 1 */
|
||||
vertical-align: top; /* 2 */
|
||||
}
|
||||
|
||||
|
||||
/* =============================================================================
|
||||
Tables
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Remove most spacing between table cells
|
||||
*/
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user