Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

1224 lines (1215 sloc) 27.226 kB
@import "mixins";
@import "variables";
@import "fonts";
#header-wrapper {
background-color: #000;
min-height: 70px;
z-index: 999;
position: relative;
#header {
overflow: hidden;
#logo-container {
#logo-img {
background: image-url("flag.png") no-repeat;
position: absolute;
height: 134px;
width: 130px;
background-size: contain;
@media (max-width: 480px) {
display: none;
}
@media (max-width: 767px) and (min-width: 481px) {
max-width: 14%;
margin-left: 3%;
}
}
}
#title {
@media (max-width: 480px) {
text-align: center;
}
@media (max-width: 767px) and (min-width: 481px) {
margin-left: 18%;
float: left;
width: 47%;
text-align: left;
}
@media (max-width: 979px) and (min-width: 768px) {
margin-left: 5%;
width: 35%;
}
h1 {
margin-top: .875em;
margin-bottom: -4px;
@media (max-width: 480px) {
margin: .65em 0 0;
font-size: 2.25em;
}
}
h2 {
color: #b29628;
font-size: 1em;
line-height: 1em;
margin: .6em 0 1em 8px;
text-transform: uppercase;
font-weight: 700;
@media (max-width: 480px) {
font-size: .75em;
margin-top: .4em;
}
@media (max-width: 767px) {
font-size: .85em;
}
}
&:hover {
text-decoration: none;
}
}
h4 {
color: #b29628;
text-align: right;
}
}
#sign-in-nav {
margin-top: 1.15em;
position: relative;
@media (max-width: 979px) and (min-width: 768px) {
width: 40%;
margin-left: 0;
}
@media (max-width: 767px) and (min-width: 481px) {
margin-right: 2%;
}
@media (max-width: 480px) {
float: none;
text-align: center;
}
.btn {
background-color: transparent;
text-shadow: none;
border: none;
background-image: none;
}
a.icon-menu {
box-shadow: none;
float: right;
margin: 5% 5% 0 0;
font-size: 1.5em;
@include box-shadow(rgba(0, 0, 0, 0.2) 0 -2px 4px inset);
&:before {
color: $gold;
content: '\e802';
font-family: 'fontello';
}
&:hover {
cursor: pointer;
&:before {
color: $darkgold;
}
}
@media (min-width: 768px) {
display: none;
}
@media (max-width: 480px) {
margin: 0 auto;
float: none;
padding: 4px 10px;
}
.bar {
display: block;
margin: 0 auto;
width: 30px;
height: 3px;
background-position: 1;
border-top: 2px $darkgrey solid;
&:first-child {
margin-top: 2px;
}
}
}
.nav-collapse.in.collapse, .nav-collapse {
width: 100%;
@media (max-width: 979px) and (min-width: 768px) {
overflow: visible;
}
@media (max-width: 767px) {
overflow: hidden;
}
ul {
@media (max-width: 480px) {
padding: 10px 0;
}
li {
padding: .5em 1em 0 0;
width: 100%;
text-align: right;
a { line-height: .5em; }
@media (min-width: 768px) {
width: auto;
}
@media (max-width: 767px) {
float: none;
}
@media (max-width: 480px) {
padding: 10px 0;
h2 {
text-align: center;
float: none;
}
}
}
}
}
ul {
margin-bottom: 0;
@media (max-width: 480px) {
width: 100%;
margin-top: 1em;
text-align: center;
margin: 0 auto;
float: none;
padding: 0 5%;
}
li {
@media (max-width: 767px) {
padding: 10px 6%;
text-align: center;
display: block;
}
width: auto;
list-style: none;
float: left;
padding-left: 25px;
color: #888;
&:hover {
background: none;
}
/*&:last-child {*/
/*padding-left: 15px;*/
/*@media (max-width: 480px) {*/
/*padding-left: 0px;*/
/*}*/
/*}*/
&#bullet {
margin-top: -6px;
font-size: .75em;
line-height: .75em;
h2 {
color: #b29628;
}
@media (max-width: 480px) {
padding: 10px 0 0;
}
}
a h2, #bullet h2 {
color: #888;
text-align: right;
line-height: 0px;
font-size: .75em;
text-decoration: none;
font-weight: 700;
text-transform: uppercase;
line-height: 1em;
&:hover {
color: #b29628;
background: none;
}
}
}
}
}
.flash {
font-family: 'proxima-nova', sans-serif;
font-weight: 300;
font-size: 1em;
float: right;
text-align: center;
overflow: hidden;
@media (max-width: 480px) {
text-align: center;
float: none;
}
.alert {
background: none;
color: $gold;
text-shadow: none;
border: none;
float: right;
padding-right: 0;
@media (max-width: 480px) {
text-align: center;
float: none;
}
}
}
}
#main-nav-wrapper {
background: $darkgrey;
border-top: 1px solid rgba(255, 255, 255, .25);
z-index: 99;
position:relative;
box-shadow: 0 2px 2px rgba(0, 0, 0, .35);
#main-nav {
background: $darkgrey;
overflow: hidden;
#nav {
@media (max-width: 767px) {
margin-left: 0!important;
}
ul {
margin-bottom: 0;
overflow: hidden;
border-bottom: 1px solid rgba(255, 255, 255, .15);
li {
float: left;
border-right: 1px solid rgba(255, 255, 255, .15);
&:first-child {
border-left: 1px solid rgba(255, 255, 255, .15);
}
&:hover {
background: #000;
cursor: pointer;
@include transition-property(background);
@include transition-duration(.5s);
}
a {
color: #FFF;
padding: 15px 15px 0 15px;
&:hover {
background: none;
color: $lightgrey;
}
&.farsi-link {
padding: 0 15px 15px 15px;
direction: rtl;
color: $medgrey;
}
@media (max-width: 979px) and (min-width: 768px) {
font-size: .8em;
}
}
@media (max-width: 480px) {
width: 100%;
float: none;
text-align: center;
padding: 10px 0;
border-left: none;
border-top: 1px solid rgba(255, 255, 255, .15);
}
@media (max-width: 767px) {
font-size: .85em;
}
}
li.active {
background: #000;
}
}
@media (max-width: 767px) {
margin-left: 17%;
}
}
#notifications-outer-wrapper {
@media (max-width: 480px) {
padding: 4%;
}
#notifications-inner-wrapper {
margin-top: 1em;
float: right;
overflow: hidden;
a {
color: $lightgrey;
border-top: none;
font-size: .75em;
&:hover {
opacity: .5;
@include transition-property(opacity);
@include transition-duration(.2s);
}
}
@media (max-width: 767px) {
margin: .5em 1em;
}
@media (max-width: 480px) {
width: 82px;
margin: 0 auto;
float: none;
padding: .2em 0;
}
.dropdown {
a {
background: none;
border: none;
text-shadow: none;
@include box-shadow (none);
color: $lightgrey;
}
#notifications {
cursor: pointer;
margin-right: 1.25em;
&:hover {
.icon-notification {
color: $darkgold;
@include transition-property(color);
@include transition-duration(.2s);
}
}
.icon-notification:before {
font-family: "fontello";
content: "\e106";
font-size: 1.75em;
@include flip;
}
.icon-notification {
color: $gold;
}
.notification-count {
top: -3px;
left: -6px;
text-align: center;
position: absolute;
p {
margin: 2px -33px 0 0;
color: $darkgrey;
font-weight: 700;
}
}
}
ul.dropdown-menu {
padding: .5em 1.5em;
background: $lightgrey;
color: #A8A8A8;
font-size: .75em;
width: 200px;
li {
border-bottom: 1px dotted #a8a8a8;
margin: .5em 0;
padding: .5em 0 .65em;
p {
a {
color: black;
font-size: 14px;
}
}
&:first-child {
border-bottom: 1px solid #a8a8a8;
p {
font-weight: 700;
}
}
&:last-child {
border-bottom: none;
}
}
}
}
.open {
position: absolute;
float: right;
ul.dropdown-menu {
@media (max-width: 480px) {
right: -130px;
top: 24px;
margin: 0 auto;
width: 200px;
}
}
}
}
}
}
}
#main-content {
background: image-url("textured_paper.png");
.content {
padding: 1% 3% 7%;
background: #FFF;
@include box-shadow(0 0 6px rgba(0, 0, 0, .25));
overflow: hidden;
.intro {
text-align: center;
.intro-header {
overflow: hidden;
.language-select-intro {
cursor: pointer;
margin-bottom: .5em;
overflow: hidden;
.select-farsi, .select-english {
float: right;
p {
&:hover {
color: $gold;
}
}
}
.select-english {
display: none;
}
}
h2 {
margin-bottom: .5em;
}
}
.intro-english h4, .intro-farsi h4 {
margin-bottom: .5em;
}
.intro-farsi {
display: none;
direction: rtl;
}
}
.features-wrapper {
text-align: center;
margin: 3.5em 0 0;
h3.intro-copy, h3.intro-copy-farsi {
padding: 2%;
background: #ddd;
margin-bottom: 0;
}
.intro-copy-farsi {
display: none;
direction: rtl;
}
.features {
margin: 0 0 20px;
padding: 0 3%;
overflow: hidden;
background: $lightgrey;
.col1, .col2, .col3 {
width: 27.333%;
float: left;
padding: 3%;
text-align: center;
@media (max-width: 767px) {
width: 91%;
margin: 3.75% 3% 10%;
}
h3 {
margin: .45em 0 .45em;
font-size: 1.125em;
font-weight: 600;
color: $darkgrey;
@media (max-width: 767px) {
margin: 0 0 .45em;
}
}
.feature-copy-farsi {
display: none;
direction: rtl;
}
#img1, #img2, #img3 {
width: 100px;
height: 100px;
background-size: contain;
display: block;
margin: 0 auto;
}
#img1 {
background: url('qd-icon.svg') no-repeat;
background-size: contain;
}
#img2 {
background: url('rip-icon.svg') no-repeat;
background-size: contain;
}
#img3 {
background: url('contributions-icon.svg') no-repeat;
background-size: contain;
}
}
}
.sharing {
float: none;
padding: .5%;
margin-top: -1.25em;
background: $lightgrey;
text-align: center;
p {
color: $darkgrey;
font-weight: 500;
font-size: 1em;
}
}
}
}
}
#sign-in-main-wrapper {
margin-top: 3em;
.intro-copy, .intro-copy-farsi {
background: #ddd;
padding: 2%;
text-align: center;
@media (max-width: 767px) {
padding: 5%;
float: left;
width: 90%;
}
}
h3 { margin-bottom: 0!important; }
.intro-copy-farsi {
display: none;
direction: rtl;
}
#sign-in-main {
margin: 0 0 -4%;
background: $lightgrey;
.forms {
margin: 0 auto;
overflow: hidden;
padding: 0 5%;
@media (max-width: 979px) and (min-width: 481px) {
padding: 0 4%;
}
@media (max-width: 480px) {
padding: 0;
}
#sign-in {
@media (max-width: 480px) {
padding: 0 2% 50px!important;
}
}
#registration, #sign-in {
float: left;
padding: 50px 6%;
width: 38%;
@media (max-width: 767px) {
width: 88%;
}
@media (max-width: 480px) {
/*padding: 50px 2%!important;*/
margin: 0 auto;
width: 80%;
padding: 50px 0!important;
float: none!important;
}
.sign-in-header {
margin: 0 auto;
display: block;
width: 100%;
h2 {
color: $darkgrey;
font-weight: 600;
font-size: 1.5em;
text-align: center;
text-transform: none;
}
p {
font-size: 1em;
font-weight: 300;
margin-bottom: 2em;
color: $medgrey;
text-align: center;
}
}
form {
overflow: visible;
label {
font-size: .75em;
font-weight: 300;
color: $medgrey;
}
.input {
width: 89%;
@media (max-width: 480px) {
width: 100%;
input {
width: 84%;
}
}
}
input, .text-input {
width: 100%;
@include text-input;
}
.field_with_errors {
.text-input {
@include error-text-input;
}
}
.terms {
width: auto;
overflow: hidden;
margin-top: 1.5em;
padding-right: 1%;
#legal_terms_farsi { direction: rtl; }
#legal_terms, #legal_terms_farsi {
overflow: hidden;
width: 100%;
.icon-right-open-mini {
float: right;
font-size: 1.5em;
color: $gold;
margin-top: .2em;
width: 3%;
margin-right: 1%;
&:before {
content: '\e762';
font-family: 'fontello';
}
}
a {
float: left;
font-size: .875em;
color: $gold;
display: block;
width: 94%;
&:hover {
color: $darkgold;
}
}
p {
float: left;
margin-bottom: .25em;
}
}
#legal_terms_farsi {
display: none;
text-align: right;
.icon-right-open-mini {
@include flip;
float: left;
}
a { float: right; }
}
.checkbox {
float: left;
width: 100%;
padding-left: 0;
input[type='checkbox'] {
display: none;
margin-left: 0;
}
input[type='checkbox'] + label span {
display: inline-block;
float: left;
width: 18px;
height: 18px;
background: image-url('checkbox.png') left top no-repeat;
cursor: pointer;
padding-left: 0;
margin-right: .5em;
margin-top: -.325em;
}
input[type='checkbox']:checked + label span {
background: image-url('checkbox.png') -18px top no-repeat;
}
label {
margin-top: 15px;
}
}
}
.btn {
@include button;
margin-top: 2.125em;
border: none;
@media (max-width: 480px) {
width: 100%;
margin-left: auto;
margin-right: auto;
float: none;
}
}
}
}
}
}
}
.items-index {
margin: 2em 0 2em;
overflow: hidden;
.intro {
h4 {
color: $darkgrey;
margin-bottom: .35em;
font-family: $fontproxima;
font-weight: 700;
line-height: 1.35em;
font-size: 1.5em;
}
h3 {
margin-bottom: 3em;
margin-top: 0;
font-weight: 500;
}
p {
margin-bottom: 3em;
margin-top: 0;
}
}
form.navbar-search {
display: block;
width: 68%;
margin: 0 0 2.5em;
@media (max-width: 767px) {
width: 92%;
margin: 0 4% 2em;
float: none;
}
input {
width: 62%;
@media (max-width: 767px) {
width: 62%;
}
}
.btn {
max-width: 25%;
margin: 0 .5em;
height: 30px;
float: left;
color: #FFF;
text-shadow: none;
@media (max-width: 767px) {
max-width: 30%;
padding: 0;
margin-right: 0;
float: right;
}
p {
margin-bottom: 0;
}
}
}
.btn {
@include action-button;
}
.new {
background: $darkgrey;
height: 23px;
line-height: 1.75em;
&:hover {
background: #000;
border-top: $lightgrey 2px solid inset;
@include transition-property(background, border);
@include transition-duration(.2s);
}
.icon-right-open-mini {
color: white;
margin-left: .5em;
font-size: 1.25em;
&:before {
font-family: 'fontello';
content: '\e762';
}
}
@media (max-width: 767px) {
float: none;
display: block;
margin: 0 auto 1.75em;
width: 85%;
}
}
.thread-type {
display: block;
width: 100%;
overflow: hidden;
margin-top: 4em;
text-align: left;
a {
color: $medgrey;
text-decoration: none;
}
}
ul.thread-type.btn-group {
width: 68%;
margin: 1em 0 0;
padding: none;
overflow: hidden;
list-style: none;
border-bottom: none;
&.contributions-nav {
margin: 1em auto 0;
@media (max-width: 1199px) {
width: 83%;
}
@media (max-width: 979px) {
width: 60%;
}
@media (max-width: 767px) {
width: 100%;
}
@media (max-width: 429px) {
width: 100%;
}
}
li.btn {
@include border-top-left-radius(20px);
@include border-top-right-radius(20px);
@include border-bottom-left-radius(20px);
@include border-bottom-right-radius(20px);
box-shadow: none;
background: none;
border: none;
color: $medgrey;
margin: 0 .25em .5em;
background: $lightgrey;
@media (max-width: 767px) {
margin: .5em auto;
display: block;
float: none;
width: 80%;
}
&.active {
background: $gold;
color: #FFF;
a {
color: #FFF;
text-shadow: none;
font-family: "proxima-nova",sans-serif;
}
}
&:hover {
background: $gold;
@include transition-property(background);
@include transition-duration(.2s);
a {
color: #FFF;
@include transition-property(color);
@include transition-duration(.2s);
}
}
a {
background: none;
color: $medgrey;
line-height: 12px;
margin: 0 .25em;
&:hover {
color: white;
}
}
}
}
ul.items {
margin: 1em 0 0;
overflow: hidden;
list-style: none;
width: 100%;
li {
padding: 1.75em 0;
border-bottom: 1px #a8a8a8 dotted;
overflow: auto;
&:last-child {
border-bottom: none;
}
.item-image {
float: left;
background-size: contain;
height: 60px;
width: 7.25%;
margin-right: 2%;
}
.item-content {
float: left;
.item-header {
@include item-header;
font-size: .75em;
font-family: "proxima-nova",sans-serif;
font-weight: 600;
color: $gold;
}
.item-title {
@include item-title;
width: 100%;
a {
line-height: 1.25em;
}
}
.item-created, .item-comments, p {
@include item-created;
font-weight: 300;
color: $medgrey;
&:first-child {
margin-right: 0;
}
}
}
.item-follow-btn, .item-edit-btn {
float: right;
margin-top: 20px;
.btn {
display: none;
font-weight: bold;
background: #3a87ad;
&.followed {
background: #696969;
display: block;
}
}
}
&:hover {
.item-follow-btn, .item-edit-btn {
.btn {
display: block;
}
}
}
}
}
&.profile {
overflow: hidden;
.user-info {
overflow: hidden;
width: 100%;
.item-image {
margin: 0 1em 2em 0;
float: left;
}
h4 {
margin: 2.25em 0 2em;
float: left;
}
}
.profile-sort {
.btn-group {
overflow: hidden;
width: 100%;
}
}
}
}
.show {
margin-top: 2em;
overflow: hidden;
.item-show {
width: 68%;
@media (max-width: 767px) {
width: 100%;
}
}
.item-show, .comments, .comment-box {
overflow: hidden;
margin:0;
&.comments {
margin: 2em 0 1em;
padding-top: 2em;
border-top: 1px solid $lightgrey;
}
.show-intro {
width: 100%;
overflow: hidden;
margin-bottom: 2em;
.item-created { margin-top: 2.6em; }
}
.item-image {
background: image-url("placeholder.png") no-repeat;
background-size: contain;
height: 50px;
width: 50px;
margin-right: 2%;
}
.item-created {
@include item-created;
margin-top: .75em;
&.full-width {
margin-top: 0;
}
}
.item-title {
@include item-title;
width: 100%;
}
.item-details {
margin: .5em 0 2em;
p {
b { font-weight: bold; }
i { font-style: italic; }
}
}
.item-tags {
@include proxima-bold;
font-size: .9em;
color: #696969;
}
textarea {
width: 100%;
}
}
.item-attachments {
@include proxima-bold;
margin-top: 8px;
margin-bottom: 1em;
font-size: .9em;
color: #696969;
background: $lightgrey;
padding: 1em;
width: 100%;
float: left;
h4 {
font-size: 1em;
color: $medgrey;
margin-bottom: 2em;
}
}
.side-box {
background: $darkgrey;
margin-left: 0;
padding: 1.5em;
overflow: hidden;
@media (max-width: 767px) {
margin: 2em 0;
}
h3 {
color: $lightgrey;
margin-bottom: 1.5em;
}
ul {
li {
width: 100%;
overflow: hidden;
.image {
background: image-url("placeholder.png");
background-size: contain;
height: 50px;
width: 50px;
margin: 0 .5em 1.5em 0;
border: 1px #fff solid;
}
.caption {
p {
color: #fff;
font-size: .8em;
a {
color: #fff;
&:hover {
color: #fff;
}
}
}
}
}
}
}
}
.black-box {
padding: 2em;
background: $lightgrey;
text-align: center;
p {
font-family: $fontproxima;
font-weight: 500;
color: $medgrey;
a {
color: $gold;
&:hover {
color: $darkgold;
}
}
}
}
#footer {
background-color: $lightgrey;
}
.tag-list {
.tags {
.tag {
i { color: #fff; }
}
}
}
#notifications {
ul.items {
li {
.icon-notification:before {
@include flip;
font-family: 'fontello';
content: '\e106';
}
&.unread {
color: $gold;
a {
font-weight: bold;
}
}
}
}
}
#dialog {
display: none;
padding: 1em 3em 3em;
background: $lightgrey;
@media (max-width: 480px) {
width: 90%;
padding: 1em 8% 3em;
}
.language-select-dialog {
float: right;
width: 4em;
text-align: right;
cursor: pointer;
font-family: $fontproxima;
& a:hover, :hover {
color: $gold;
}
.select-english-dialog {
display: none;
}
}
.agree {
font-size: .75em;
}
h3 {
margin-top: 2em;
margin-bottom: .5em;
color: $darkgrey;
}
p {
margin-bottom: .5em;
font-size: .9em;
}
a {
font-size: .9em;
&:hover {
color: $gold;
}
&:focus {
border: none;
}
}
.no-margin {
margin-bottom: 0;
}
.terms-farsi-dialog {
text-align: right;
direction: rtl;
}
.terms-english-dialog, .terms-farsi-dialog {
float: left;
display: none;
}
.btn {
@include button;
border: none;
}
}
.ui-widget {
box-shadow: 0px 5px 20px rgba(0, 0, 0, .5);
background: $darkgrey;
}
.ui-widget-header {
background: $darkgrey!important;
border: none;
box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
z-index: 999;
.ui-dialog-title {
color: $lightgrey;
font-family: $fontproxima;
font-weight: 400;
}
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
border-bottom-left-radius: 0px!important/*{cornerRadius}*/;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
border-bottom-right-radius: 0px!important/*{cornerRadius}*/;
}
.ui-dialog {
margin: 0 15%;
left: 0!important;
@media (max-width: 480px) {
margin: 0 3%;
}
}
Jump to Line
Something went wrong with that request. Please try again.