X-Git-Url: https://code.grnet.gr/git/astakos/blobdiff_plain/21f89374bf3b8f9acebe14cc43a3fb7c0d4c3f81..8df55b7a996ee9ae45a372444aebbd9701c6eb92:/snf-astakos-app/astakos/im/static/im/css/styles.less diff --git a/snf-astakos-app/astakos/im/static/im/css/styles.less b/snf-astakos-app/astakos/im/static/im/css/styles.less deleted file mode 100644 index 1c50719..0000000 --- a/snf-astakos-app/astakos/im/static/im/css/styles.less +++ /dev/null @@ -1,865 +0,0 @@ -@import "../less/bootstrap.less"; -@import "../less/django_forms.less"; -@import "../less/tables.less"; -@import "../less/xtra.less"; - - -// mixins - -.border-box { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - *behavior: url(boxsizing.htc); -} - -.clearme { .clearfix() } - -@verticalSpacing: @gridGutterWidth/1.5; -@gradCol: #ddd; -body { - #font.main(); - font-size: 12px; -} - -.topbar { - background-color: @shadowColor; - .head { - float: left; - padding: @verticalSpacing/2-5; - } - .links { - .clearfix(); - a { - color: @black; - text-decoration: none; - display: block; - float: left; - margin-left: 10px; - padding: @verticalSpacing/2+1; - - &:hover { - background-color: lighten(@black, 10%); - color: @white; - } - } - - float: right; - } -} - -// default link styles -section a, p a, form a, .section a, .styledlinks a, a.styled { - color: @black; - text-decoration: none; - border-bottom: 1px solid @linkColor; - - &:hover { - color: @linkColor; - } - - &.noborder { - border: none; - } - - em { - color: @blue; - } -} - -a.simple { - border: none; - -} -a.action { - color: @linkColor; - border-bottom: none; -} - -a img { - border-bottom: none; -} - -// body borders -.content-border { - border-right: 1px solid @mainBorderColor; - border-left: 1px solid @mainBorderColor; -} - -.hidden { - display: none !important; -} - -// container sizing -.container, .topbar, .footer { - .fixed-container(); - .content-border(); - padding: 0 @siteWhiteSpace; -} - -.container { - padding-bottom: @siteWhiteSpace; - background-color: @white; -} - -.topbar { -} - - -div.header { - position: relative; - margin-top: 2.5*@verticalSpacing; - margin-bottom: @verticalSpacing; - h1 { - color: @shadowColor; - display: inline; - font-size: 2.3em; - border-bottom: 1px solid @shadowColor; - padding-bottom: 3px; - } -} -.mainlogo { - height: 36px; - - h1 { height: 36px } - img { - margin-left: -10px; - } -} - -.footer { - border-bottom: 1px solid @mainBorderColor; - border-top: 1px solid lighten(@mainBorderColor, 15%); - padding-top: @verticalSpacing; - padding-bottom: @verticalSpacing; -} - -ul.inline { - .clearfix(); - li { - display: block; - float: left; - margin-right: 1em; - } -} - -.mainnav.quicknav { - position: absolute; - right: 0; - top: -2.6*@verticalSpacing; - margin:0; - - li { - margin-right:0; - margin-left: 1em; - } -} - -.navigation { - height: 83px; - position: absolute; - right: -15px; - top: -23px; -} - -.mainnav { - font-size: 1.3em; - - &.subnav { - margin-bottom: -@verticalSpacing; - li { - margin-top: 0.4*@verticalSpacing; - float: right; - } - } - - li { - margin-top: 2*@verticalSpacing; - } - - li.active { - a { - /*border-bottom: 1px solid @linkColor;*/ - border-bottom: none; - color: @linkColor; - } - } - a { - color: @black; - text-decoration: none; - - &:hover { - border-bottom: 1px solid @linkColor; - } - - &.active, &:active { - border-bottom: 1px solid @linkColor; - color: @linkColor; - } - } -} - -.bottom-section { - .clearfix(); - - .section { - img { - width: 200px; - } - } -} - -.top-section { - .clearfix(); -} - -div.page { - .makeRow(); - margin-top: 5*@verticalSpacing; - font-size: 1.1em; - .page-inner { - position: relative; - } -} - -// columnlayout -.maincol { - position: relative; - .makeColumn(5); - - &.wide { - .makeColumn(6); - } - - &.full { - .makeRow(); - margin-left: 0; - .makeColumn(10); - } - - .nextlink { - margin-top: 60px; - text-align: right; - float: right; - margin-right: 50px; - font-size: 1.1em; - } - - .content-bottom { position: relative; .clearfix(); } -} - -.backlink { - margin: 30px 0; -} - -.appbar { - height: 30px; - background-color: @blue; -} - -.rightcol { - .makeColumn(4); - margin-left: 4*@gridGutterWidth + 14; - - &.narrow { - .makeColumn(3); - margin-left: 4*@gridGutterWidth + 14; - } - - input[type=text], input[type=password] { - width: 3*@gridColumnWidth + 4*@gridGutterWidth + 5; - } -} - -/* generic form styles */ -input, textarea, .form-widget { - background-color: @white; - color: @gray; - border-color: @black; -} - -#forms { - .input, input { - #font.main(); - border: 1px solid @gray; - height:21px; - display: inline-block; - margin-bottom: -1px; - padding: 0.8em; - padding-left: 1.5em; - z-index: 2; - &:focus { - position: relative; - border: 1px solid #000; - z-index: 100; - - label { - z-index: 300; - } - } - } -} - -.altcol { - background-color: @altColor !important; - - &:hover { - background-color: @linkColor !important; - } -} - -.section { - - em { - color: @blue; - } - - &.positioned { - margin-bottom: 0; - .content { - .makeColumn(4); - } - - img { - } - - &.withimg { - .img { - .makeColumn(4); - } - - img { - float: left; - } - } - - h3 { - font-size: 1.2em; - margin-bottom: @verticalSpacing; - } - - .text { - color: @black; - } - } - - margin-bottom: 3*@verticalSpacing; - - .left, .right { - width: 50%; - float: left; - } - - &.imagelist { - margin-top: 2em; - .clearfix(); - img { - float: left; - margin-right: 4em; - vertical-align: middle; - } - } -} - -input[readonly=true] { - background-color: #ddd; - color: darken(#ddd, 50%); -} - -form.withlabels { - label { - width: 3*@gridColumnWidth + 2*@gridGutterWidth; - display: block; - float: left; - padding-top: 1em; - } - - input[type=text], input[type=password], textarea { - width: 3*@gridColumnWidth + 2*@gridGutterWidth; - - &.long { - width: 3*@gridColumnWidth + 2*@gridGutterWidth; - } - } -} - - -.login-section { - a.button { - margin-bottom: 0.2*@gridColumnWidth; - - &:last-child { - margin-bottom: none; - } - - &.withicon { - background-repeat: no-repeat; - background-position: 15px 50%; - padding-left: 40px; - } - } - - &.loggedin { - padding-bottom: 0 !important; - background-image: none !important; - } -} - - -@errorColor: lighten(@red, 30%); -// forms -form { - - &.login { - margin-bottom: 1.5*@verticalSpacing; - } - - h2 { - color: @black; - margin-bottom: @verticalSpacing; - font-size: 1.1em; - - span { - padding-bottom: 3px; - } - } - - .form-row { - min-height: 2*@verticalSpacing; - position: relative; - &.submit { - margin-top: 1.5*@verticalSpacing; - } - - &.with-checkbox { - margin-top: 7px; - } - - .extra-link { - color: @gray; - text-decoration: none; - border: none; - font-size: 0.8em; - margin-top: 1.3em; - float: right; - } - - label { - font-size: 1.1em; - } - } - - &.innerlabels label { - position: absolute; - top: 1.1em; - left: 1.5em; - color: #aaa; - } - - &.innerlabels p { - display: table; - position: relative; - } - - textarea, input.text, input[type="text"], input[type="password"] { - #forms.input(); - } - - input.submit, input[type="submit"] { - .button(); - } - - - textarea { - height: 200px; - width: 350px !important; - } - .with-errors { - input, textarea, select { - color: @red; - } - label { - color: @errorColor; - } - } -} - -.form-error { - background-color: @red; - color: #fff; - font-size: 0.8em; - padding: 5px 5px; -} - -.form-errors.all { - .form-error { - position: relative; - border-radius: 0; - margin-bottom: 1.3em; - padding: 0.5em; - } -} - -div.form-stacked { - margin-bottom: 4em; -} -// content types - -.rightcol .section { - background-image: url("../images/dashed_border.png"); - background-repeat: repeat-x; - background-position: left bottom; - padding-bottom: 2*@verticalSpacing; - margin-bottom: 2*@verticalSpacing; - -} - -.section { - h2 { - font-size: 1.1em; - line-height: 1.3em; - margin-bottom: 1.5*@verticalSpacing; - - a { - color: #4085A6; - border: none; - line-height: 1.3em; - } - } - - h3 { - font-size: 1.1em; - line-height: 1.3em; - margin-bottom: 1.5*@verticalSpacing; - } - - p { - line-height: 1.7em; - } - - .section-img { - margin-bottom: 1*@verticalSpacing; - } -} - - -// page messages -.messages { - .makeColumn(10); - - margin: 2em 0; - background-color: #ddd; - margin-left: 0; - font-size: 1.1em; - li { - padding: 1em; - - &.success { background-color: @green; color: @white } - &.error { background-color: @red; color: @white } - &.warning { background-color: #AF6906; color: @black } - } - - .warning { - color: @white !important; - a { - color: inherit; - font-weight: bold; - } - } - -} - -form.innerlabels label.checkbox-label { - position: relative !important; - margin-left: 10px !important; - padding-top: 1em !important; - top:11px !important; - left:10px; - cursor: pointer; -} - - - -// accounts specific styles -.service-desc { - margin-top: 4em; - -} - - -// invitations table -table { - - td.consumed { - color: @red; - } - - tr.consumed { - td.consumed { - color: @green; - } - } -} - - -.row { .makeRow() } - -// footer -.footer { - .clearfix(); - color: lighten(@gray, 20%); - .transit(); - - a { .transit() } - - &:hover { - color: @gray !important; - a { - color: @gray !important; - } - } - - a { - color: lighten(@gray, 20%); - text-decoration: none; - - &:hover { - color: #000 !important; - } - } - - li { - margin-bottom: @verticalSpacing/2; - - &.header { - margin-bottom: @verticalSpacing; - } - } - - .col { - .makeColumn(4); - &:last-child, &.last { - width: 140px; - margin-right:0; - } - } - - .top.row, .last.row { - .makeRow(); - margin: 20px 0; - - .col { - .makeColumn(4); - - &.first { - margin-left: 0 !important; - } - &.last { - .makeColumn(2); - } - } - } - .top.row { - margin-top: 0; - } - - .last.row { - text-align: left; - font-size: 0.8em; - margin-bottom: 0; - } - - .bottom.row { - .col { - .makeColumn(2); - &:last-child, &.last { - width: 140px; - margin-right:0; - } - } - } -} - - -/*pagination*/ -.pagination { - a.page { - display: inline !important; - - } -} - -/*blog styles*/ -.blog-entries { - -} - -.blog-entry { - - .section(); - .clearfix(); - margin-bottom: 2*@verticalSpacing; - - .title { - margin-bottom: 1em; - font-size: 1.1em; - line-height: 1.4em; - } - - .media { - img { - border: 1px solid @gray; - } - } - - .intro-content, .content { - margin-top: @verticalSpacing; - - object { - margin: @verticalSpacing 0; - } - } - - .entry-info { - font-size: 0.7em; - margin-top: @verticalSpacing; - } - - &.single { - .entry-info { - margin-top: 0; - margin-bottom: @verticalSpacing; - } - } -} - -.section.twitter-feed { - - font-size: 1.1em; - .tweet { - &:last-child { margin-bottom:0; padding-bottom:0; border-bottom: none } - line-height: 1.3em; - font-size: 0.9em; - margin-bottom: @verticalSpacing; - color: @gray; - - .date { - display: block; - font-size: 0.7em; - a { - text-decoration: none !important; - border: none; - } - } - } -} - -.pagination .page { - margin-left: 0; -} - - -.entry-list { - - .since { - font-size: 0.8em; - } - - .title { - margin-bottom: 1em; - } - - .content, .text { - margin-bottom: 2em; - font-size: 0.8em; - } -} - - -.initially-hidden { - display: none; -} - - -/* recaptcha */ -#recaptcha_widget_div { - margin-top: 10px; - margin-left: -4px; - - #recaptcha_instructions_image { - font-size: 0.8em; - margin-bottom: 10px; - display: block !important; - } - - th, td { - line-height: 1; - } -} - -.checkbox-widget.checked { - background-color: #f00; - background-image: url("../images/checkbox.png"); - background-position: 50% 50%; -} - -.checkbox-widget { - border: 1px solid @gray; - width: 25px; - height: 25px; - display: block; - float: left; - cursor: pointer; - margin-top: @verticalSpacing/2 - 2; -} - - -// generic headings -@hColor: @blue; -.textcontent, .terms-content { - h1 { - font-size: 1.9em; - margin-bottom: 0.2em; - margin-top: 1.2em; - color: @hColor; - - &:first-child { - margin-top: 0; - } - } - - h2 { - font-size: 1.6em; - margin-bottom: 1.1em; - margin-top: 1.1em; - - &:first-child { - margin-top: 0; - } - color: lighten(@hColor, 5%); - } - - h3 { - font-size: 1.3em; - margin-bottom: 1em; - margin-top: 1em; - - &:first-child { - margin-top: 0; - } - color: lighten(@hColor, 5%); - } - - p { - margin-bottom: 1em; - line-height: 1.5em; - } - - .date { - margin: 1em 0; - font-size: 0.9em; - margin-bottom: 2em; - color: @gray; - } -} -