/* @override http://marrow.elangley.org/css/main.css */ /*@import url(//fonts.googleapis.com/css?family=Lato:400,700,400italic);*/ /*@import url(//fonts.googleapis.com/css?family=Oxygen:400,700,400italic);*/ @import url(//fonts.googleapis.com/css?family=Josefin+Sans:400,700,400italic); @import url(//fonts.googleapis.com/css?family=Ek+Mukta:200,400,800&subset=latin,latin-ext); @import url(//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css); /* @group date based classes */ li.bone-item { border-left: 7px solid white; padding-left: 10px; } li.bucket-0 {border-left-color: hsl(0, 0%, 0%);} li.bucket-1 {border-left-color: hsl(36, 0%, 5%);} li.bucket-2 {border-left-color: hsl(72, 0%,10%);} li.bucket-3 {border-left-color: hsl(108,0%,15%);} li.bucket-4 {border-left-color: hsl(144,0%,20%);} li.bucket-5 {border-left-color: hsl(180,0%,25%);} li.bucket-6 {border-left-color: hsl(216,0%,30%);} li.bucket-7 {border-left-color: hsl(252,0%,35%);} li.bucket-8 {border-left-color: hsl(288,0%,40%);} li.bucket-9 {border-left-color: hsl(324,0%,45%);} li.bucket-10 {border-left-color: hsl(0, 0%,50%);} li.bucket-11 {border-left-color: hsl(36, 0%,55%);} li.bucket-12 {border-left-color: hsl(72, 0%,60%);} li.bucket-13 {border-left-color: hsl(108,0%,65%);} li.bucket-14 {border-left-color: hsl(144,0%,70%);} li.bucket-15 {border-left-color: hsl(180,0%,75%);} li.bucket-16 {border-left-color: hsl(216,0%,80%);} li.bucket-17 {border-left-color: hsl(252,0%,85%);} li.bucket-18 {border-left-color: hsl(288,0%,90%);} li.bucket-19 {border-left-color: hsl(324,0%,95%);} /* @end */ /* @group Browser Resets */ html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } * { box-sizing: border-box; -webkit-font-feature-settings: 'kern' 1, 'liga' 1; -moz-font-feature-settings: 'kern' 1; -o-font-feature-settings: 'kern' 1; text-rendering: geometricPrecision; } body { margin: 0; font-size: 16px; } h1, h2, h3, h4, p, blockquote, figure, ol, ul { margin: 0; padding: 0; } li { display: block; } h1, h2, h3, h4 { font-size: inherit; } a { text-decoration: none; color: blue; } img { max-width: 100%; height: auto; border: 0; } /* @end */ .appstore-links { display: block; width: 100%; text-align: right; margin-top: 100px; } .appstore-links a img { width: 65%; } .avatar-image:hover { background: #eee; text-decoration: none; color: white; background: linear-gradient(to bottom, #eee 0%, #bbb 75%, #888 100%); } .avatar-image:hover .de-emphasize { color: white; } .avatar-image { padding: 5px 10px; border-radius: 10px; display: inline-block; vertical-align: middle; text-decoration: none; width: 15%; } .identicon { border-radius: 50%; /*border: thin solid #888;*/ box-shadow: 0em 0em 0.1em black; vertical-align: middle; } .poster-handle { display: inline-block; vertical-align: middle; } .bone-details { display: inline-block; vertical-align: middle; } .sub-ctrl { display: inline-block; vertical-align: middle; width: 9em; } .filter-form { padding-bottom: 0px; } ul.subscription-list { text-align: center; position: relative; background: #888; /*text-shadow: 0em 0em 0.1em black;*/ /*color: white; */ border: thin solid black; padding: 0.75em 1.5em; max-height: 1.5em; overflow: hidden; transition: max-height 1.5s ease, padding 1.5s ease; } ul.subscription-list.opened { max-height: 12em; padding-bottom: 2.5em; } ul.subscription-list > .list-control { position: absolute; width: 100%; bottom: 0px; left: 0px; height: 1.5em; background: #888; color: white; cursor: pointer; } ul.subscription-list > .list-control:hover { background-color: #ccc; /*color: black;*/ } ul.subscription-list::after { content: " "; clear: both; display: block; } li.sub-filter { width: 15.50%; margin: 3px 0.58%; padding: 0px; display: block; float: left; } li.sub-filter label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border: black solid thin; background: #eee; border-radius: 10px; height: 30px; line-height: 30px; text-align: center; display: block; vertical-align: middle; height: 100%; width: 100%; padding: 5px; } li.sub-filter input { display: none; } li.sub-filter label:hover, li.sub-filter input:checked + label { border: #eee thin solid; color: white; } li.sub-filter input:checked + label { background: linear-gradient(to top, #eee 0%, #bbb 75%, #888 100%); } li.sub-filter label:hover { background: linear-gradient(to bottom, #eee 0%, #bbb 75%, #888 100%); } /* @group State Definitions */ .is-hidden { display: none; } /* @end */ /* @group General Definitions */ h1, h2, h3, h4, h5, h6 { font-weight: 800; } body { font-family: 'Ek Mukta', sans-serif; font-weight: 400; } /* @end */ /* @group Header Module */ header { background: #000; font-family: 'Josefin Sans', sans-serif; } header .site-logo { color: white; text-align: center; text-transform: uppercase; height: 3.5em; font-size: 1.5em; letter-spacing: .2em; line-height: 3.5em; } /* @end */ /* @group Footer */ footer { position: fixed; height: 1.5em; bottom: 0px; width: 100%; background: hsl(0,0%,90%); text-align: center; padding: 0.em 0em; } footer a.facebook-link { color: blue; padding: 0px 2px; text-decoration: none; } footer a.facebook-link:hover { background: blue; color: white; } /* @end */ /* @group Navigation Module */ #nav-main .logout-link { margin-top: 10px; } #nav-main h3 { text-align: right; margin-top: 20px; } /* @end */ /* @group List Module */ .voting { padding: 0.5em; margin-right: 0.5em; display: inline-block; border-radius: 0.5em; -webkit-transition: 0.3s ease-in background; transition: 0.3s ease-in background; } .voting:hover { /*background: #888;*/ } .voting button { cursor: pointer; border: none; text-align: center; padding: 0.25em; background: none; height: 1.5em; width: 1.5em; font-size: 75%; } .voting button.selected { /*background: #ccc;*/ color: red; } .voting button:focus { outline: 0px; box-shadow: none; -webkit-box-shadow: none; background: #eee; } .voting button:hover { background: #ddd; } .vote-disp { color: #888; } .vote-disp::before { content: '{'; font-size: 120%; } .vote-disp::after { content: '}'; font-size: 120%; } .linkinfo { display: inline-block; } main h2 { margin-bottom: 10px; font-size: 24px; padding-left: 0; } main ul { position: relative; } main form { padding: 10px 0; } main form input[type="text"] { width: 315px; } .more-link { cursor: pointer; display: block; width: 100%; margin-bottom: 2em; text-align: center; background: hsl(324,0%,95%); } .bone-list li { padding-bottom: 12px; width: 100%; } .bone-list .bone-details { width: 84%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* @end */ /* @group Login Module */ #login_form div.message{ position: absolute; background: red; width: 100%; text-align: center; } #login_form { position: absolute; z-index: 100; height: 100%; background: white; } #login_form form { position: absolute; top: 0; left: 0; width: 100%; text-align: center; } /* @end */ /* @group Form Validation */ input.ng-invalid, button.ng-invalid { box-shadow: 1px 1px red; } /* @end */ /* @group Link Styling */ a { transition-property: color; transition-duration: .2s; } a:link, a:visited, a:hover, a:active, a:focus { color: black; } a:link, a:visited { } a:hover, a:active, a:focus { text-decoration: underline; } div.marrow { display: inline-block; vertical-align: top; } .de-emphasize, a.de-emphasize { font-size: 80%; color: #aaa; } a.add-link { color: green; display: inline-block; vertical-align: top; position: relative; top: 0.2em; /*position: absolute;*/ /*margin-left: -1em;*/ } a.add-link:hover { text-decoration: none; color: olive; } a.delete-link { color: red; display: inline-block; vertical-align: top; position: relative; top: 0.2em; /*position: absolute;*/ /*margin-left: -1em;*/ } a.delete-link:hover { text-decoration: none; color: brown; } /* @end */ #nav-main { visibility: hidden; } main > section { padding-bottom: 2rem; } /* Generic Large Devices */ @media (min-width: 443px) { body.is-logged-on #nav-main { visibility: visible; } #nav-main { position: absolute; width: 20%; padding-right: 7%; top: 0px; left: 0px; margin-top: 150px; } main { padding-top: 100px; position: absolute; height: 100%; top: 0px; right: 0px; width: 80%; } #nav-main ul { text-align: right; padding-right: 5px; } #login_form { width: 125%; left: -25%; top: 66px; } #login_form div.message{ top: -33px; } #login_form form { margin-top: 100px; } } /* @group Miscellaneous */ a.user-settings { color: rgb(0,0,128); display: inline-block; vertical-align: middle; text-decoration: none; font-size: 20px; } a.user-settings:hover { color: rgb(0,0,256); } /* @end */ /* Generic Small Devices */ @media (max-width: 443px) { .wide { display: none; } header { /*position: fixed;*/ width: 100%; } main { padding-left: .5em; padding-right: .5em; } #nav-main { position: fixed; background: #fff; height: 100%; width: 100%; top: 0px; margin: 0 auto; visibility: hidden; } #nav-main:after { font-family: "FontAwesome"; content: "\f0c9"; display: block; color: white; position: absolute; font-size: 1.5em; height: 3.5em; line-height: 3.5em; padding: 0px 1.5em; top: 0px; left: 0px; visibility: visible; Box-sizing: border-box; } #nav-main:hover:after { background: #888; } #nav-main ul { position: fixed; background: white; font-size: 1.5em; top: 3.5em; left: 0px; height: 100%; width: 100%; z-index: 10; } #nav-main ul li { font-size: 18px; } #nav-main:hover ul { visibility: visible; } #nav-main li { text-align: center; } #nav-main a { width: 100%; display: block; padding: 10px 0; border-bottom: 1px solid #ddd; text-decoration: none; } #nav-main a:hover, #nav-main a:active, #nav-main a:focus { background: #ddd; } .bone-list .avatar-image { text-align: center; } .bone-list .poster-handle { display: none; } #nav-main .logout-link { margin-top: 40px; border-top: 1px solid #ddd; } #login_form { width: 100%; left: 0; top: 0; } #login_form form { margin-top: 20px; } #login_form div.message{ margin-top 10px; } form input[type="password"] { } main::before { display: block; content: " "; font-size: 1.5em; height: 3.5em; } main { position: absolute; width: 100%; margin-top: 15px; /*overflow: hidden;*/ } } /* * vim: set foldmethod=marker: * vim: set foldmarker=@group,@end: * */