168 lines
4.6 KiB
Elm
168 lines
4.6 KiB
Elm
module ElmHubCss exposing (..)
|
|
|
|
import Css exposing (..)
|
|
import Css.Elements exposing (..)
|
|
|
|
|
|
-- Documentation:
|
|
-- http://package.elm-lang.org/packages/rtfeldman/elm-css/latest
|
|
|
|
|
|
css : Stylesheet
|
|
css =
|
|
stylesheet
|
|
[ ((.) "content")
|
|
[ width (px 960)
|
|
, margin2 zero auto
|
|
, padding (px 30)
|
|
, fontFamilies [ "Helvetica", "Arial", "serif" ]
|
|
]
|
|
, header
|
|
[ position relative
|
|
, padding2 (px 6) (px 12)
|
|
, height (px 36)
|
|
, backgroundColor (rgb 96 181 204)
|
|
]
|
|
, h1
|
|
[ color (hex "ffffff")
|
|
, margin zero
|
|
]
|
|
, (.) "tagline"
|
|
[ color (hex "eeeeee")
|
|
, position absolute
|
|
, right (px 16)
|
|
, top (px 12)
|
|
, fontSize (px 24)
|
|
, fontStyle italic
|
|
]
|
|
, (.) "results"
|
|
[ property "list-style-image" "url('http://img-cache.cdn.gaiaonline.com/76bd5c99d8f2236e9d3672510e933fdf/http://i278.photobucket.com/albums/kk81/d3m3nt3dpr3p/Tiny-Star-Icon.png')"
|
|
, property "list-style-position" "inside"
|
|
, padding zero
|
|
]
|
|
, (.) "results"
|
|
[ descendants
|
|
[ li
|
|
[ fontSize (px 18)
|
|
, marginBottom (px 16)
|
|
]
|
|
]
|
|
]
|
|
, (.) "star-count"
|
|
[ fontWeight bold
|
|
, marginRight (px 16)
|
|
]
|
|
, a
|
|
[ color (rgb 96 181 204)
|
|
, textDecoration none
|
|
, hover
|
|
[ textDecoration underline ]
|
|
]
|
|
, (.) "search-query"
|
|
[ padding (px 8)
|
|
, fontSize (px 24)
|
|
, marginBottom (px 18)
|
|
, marginTop (px 36)
|
|
]
|
|
, (.) "search-button"
|
|
[ padding2 (px 8) (px 16)
|
|
, fontSize (px 24)
|
|
, color (hex "ffffff")
|
|
, border3 (px 1) solid (hex "cccccc")
|
|
, backgroundColor (rgb 96 181 204)
|
|
, marginLeft (px 12)
|
|
, hover
|
|
[ color (rgb 96 181 204)
|
|
, backgroundColor (hex "ffffff")
|
|
]
|
|
]
|
|
, (.) "search-option"
|
|
[ descendants
|
|
[ selector "input[type=\"text\"]"
|
|
[ padding (px 5)
|
|
, boxSizing borderBox
|
|
, width (pct 90)
|
|
]
|
|
]
|
|
]
|
|
, each [ button, input ]
|
|
[ focus [ outline none ]
|
|
]
|
|
, (.) "search"
|
|
[ after
|
|
[ property "content" "\"\""
|
|
, property "display" "table"
|
|
, property "clear" "both"
|
|
]
|
|
]
|
|
, (.) "error"
|
|
[ backgroundColor (hex "FF9632")
|
|
, padding (px 20)
|
|
, boxSizing borderBox
|
|
, overflowX auto
|
|
, fontFamily monospace
|
|
, fontSize (px 18)
|
|
]
|
|
, (.) "top-label"
|
|
[ display block
|
|
, color (hex "555555")
|
|
]
|
|
, th
|
|
[ textAlign left
|
|
, cursor pointer
|
|
, hover [ color (rgb 96 181 204) ]
|
|
]
|
|
, each
|
|
[ th, td ]
|
|
[ fontSize (px 18)
|
|
, paddingRight (px 20)
|
|
]
|
|
-- TODO style hide-result and the search options
|
|
--
|
|
-- .hide-result {
|
|
-- background-color: transparent;
|
|
-- border: 0;
|
|
-- font-weight: bold;
|
|
-- font-size: 18px;
|
|
-- margin-left: 18px;
|
|
-- cursor: pointer;
|
|
-- }
|
|
--
|
|
-- .hide-result:hover {
|
|
-- color: rgb(96, 181, 204);
|
|
-- }
|
|
--
|
|
--
|
|
-- .stars-error {
|
|
-- background-color: #FF9632;
|
|
-- font-size: 16px;
|
|
-- padding: 10px;
|
|
-- margin-right: 24px;
|
|
-- border-radius: 10px;
|
|
-- margin-top: 10px;
|
|
-- }
|
|
--
|
|
--
|
|
-- .search-input {
|
|
-- display: block;
|
|
-- float: left;
|
|
-- width: 42%;
|
|
-- }
|
|
--
|
|
-- .search-options {
|
|
-- position: relative;
|
|
-- float: right;
|
|
-- width: 58%;
|
|
-- box-sizing: border-box;
|
|
-- padding-top: 20px;
|
|
-- }
|
|
--
|
|
-- .search-option {
|
|
-- display: block;
|
|
-- float: left;
|
|
-- width: 30%;
|
|
-- margin-left: 16px;
|
|
-- box-sizing: border-box;
|
|
-- }
|
|
]
|