1776 lines
28 KiB
SCSS
1776 lines
28 KiB
SCSS
// Table of Contents
|
|
//
|
|
// 01. Global styles
|
|
// 02. Header
|
|
// 03. Footer
|
|
// 04. Tags
|
|
// 05. Auth pages
|
|
// 06. Forms
|
|
// 07. Callout
|
|
// 08. User account
|
|
// 09. Search
|
|
// 10. Official levels
|
|
// 11. Tables
|
|
// 12. Social
|
|
// 13. Pages
|
|
// 14. Verification
|
|
// 15. Comments
|
|
// 16. Flags
|
|
// 17. Activity
|
|
// 18. Banners
|
|
//
|
|
|
|
// 01. Global styles
|
|
// -----------------
|
|
|
|
body {
|
|
font-size: $base-font-size;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
clear: both;
|
|
font-weight: 700;
|
|
}
|
|
|
|
p {
|
|
font-size: $base-font-size;
|
|
font-weight: 400;
|
|
line-height: $base-line-height;
|
|
}
|
|
|
|
a {
|
|
color: $link;
|
|
|
|
&:hover, &:active {
|
|
color: $link-hover;
|
|
text-decoration: underline;
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
color: $link-hover;
|
|
}
|
|
}
|
|
|
|
&:focus {
|
|
outline: 3px solid #ffbf47;
|
|
}
|
|
}
|
|
|
|
.button {
|
|
background: $brand;
|
|
font-size: $base-font-size;
|
|
|
|
&:hover {
|
|
text-decoration: none !important;
|
|
}
|
|
}
|
|
|
|
.postfix.button {
|
|
padding: 0;
|
|
}
|
|
|
|
.clear {
|
|
clear: both;
|
|
}
|
|
|
|
.inline {
|
|
display: inline !important;
|
|
}
|
|
|
|
.inline-block {
|
|
display: inline-block;
|
|
}
|
|
|
|
.sidebar-divider {
|
|
border-top: 1px solid $border;
|
|
margin-top: $line-height;
|
|
|
|
&:first-child {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
.f-dropdown {
|
|
li a {
|
|
font-size: $small-font-size;
|
|
|
|
&:hover {
|
|
color: $link-hover;
|
|
}
|
|
}
|
|
|
|
li:hover, .f-dropdown li:focus {
|
|
background: white;
|
|
}
|
|
|
|
&.open {
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
.margin {
|
|
margin-bottom: $line-height;
|
|
margin-top: $line-height;
|
|
}
|
|
|
|
.margin-top {
|
|
margin-top: $line-height;
|
|
}
|
|
|
|
.margin-bottom {
|
|
margin-bottom: $line-height;
|
|
}
|
|
|
|
.margin-right {
|
|
margin-right: $line-height;
|
|
}
|
|
|
|
.no-margin-top {
|
|
margin-top: rem-calc(-24);
|
|
}
|
|
|
|
.padding {
|
|
padding-bottom: $line-height;
|
|
padding-top: $line-height;
|
|
}
|
|
|
|
.highlight {
|
|
background: $highlight;
|
|
}
|
|
|
|
.icon-check {
|
|
color: $check;
|
|
}
|
|
|
|
.wrapper {
|
|
min-height: 100%;
|
|
margin: 0 auto (-$line-height)*12;
|
|
height: auto !important;
|
|
height: 100%;
|
|
}
|
|
|
|
.wrap {
|
|
background: white;
|
|
}
|
|
|
|
.footer, .push {
|
|
clear: both;
|
|
min-height: $line-height*12;
|
|
}
|
|
|
|
.ie-callout {
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
|
|
a.close {
|
|
font-size: rem-calc(34);
|
|
top: 20%;
|
|
}
|
|
}
|
|
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
border: 0;
|
|
}
|
|
|
|
.menu.simple {
|
|
border-bottom: 1px solid $border;
|
|
margin: $line-height 0;
|
|
|
|
li {
|
|
padding-bottom: rem-calc(7);
|
|
|
|
a {
|
|
color: $text-medium;
|
|
}
|
|
|
|
&.active {
|
|
border-bottom: 2px solid $brand;
|
|
color: $brand;
|
|
}
|
|
}
|
|
}
|
|
|
|
.small {
|
|
font-size: $small-font-size;
|
|
}
|
|
|
|
.relative {
|
|
position: relative;
|
|
}
|
|
|
|
.logo {
|
|
@include logo;
|
|
}
|
|
|
|
.close-button {
|
|
top: $line-height/2;
|
|
}
|
|
|
|
.back, .icon-angle-left {
|
|
clear: both;
|
|
color: $text-medium;
|
|
float: left;
|
|
}
|
|
|
|
.tabs-content {
|
|
border: 0;
|
|
}
|
|
|
|
.tabs {
|
|
border: {
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
};
|
|
margin-bottom: $line-height;
|
|
|
|
.tabs-title > a {
|
|
color: $text-medium;
|
|
margin-bottom: rem-calc(-1);
|
|
margin-right: $line-height;
|
|
|
|
&[aria-selected='true'],
|
|
&.is-active {
|
|
color: $brand;
|
|
border-bottom: 2px solid $brand;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
font-size: $base-font-size;
|
|
}
|
|
}
|
|
|
|
.no-max-width {
|
|
max-width: none;
|
|
}
|
|
|
|
.button.float-right ~ .button.float-right {
|
|
margin: 0 $line-height/2;
|
|
}
|
|
|
|
// 02. Header
|
|
// ----------
|
|
|
|
header {
|
|
background: $brand;
|
|
border-bottom: 1px solid $border;
|
|
margin-bottom: $line-height;
|
|
|
|
.selected {
|
|
border-bottom: 1px solid white;
|
|
}
|
|
|
|
.locale {
|
|
float: left;
|
|
height: $line-height*1.5;
|
|
margin-left: $line-height/2;
|
|
}
|
|
|
|
.external-links {
|
|
float: none;
|
|
padding: rem-calc(6) 0;
|
|
text-align: center;
|
|
|
|
@include breakpoint(medium) {
|
|
float: right;
|
|
}
|
|
}
|
|
}
|
|
|
|
.top-bar {
|
|
background: $brand !important;
|
|
color: white;
|
|
height: $line-height*2;
|
|
line-height: $line-height*2;
|
|
padding-bottom: 0;
|
|
padding-top: 0;
|
|
|
|
@include breakpoint(medium) {
|
|
padding: 0;
|
|
}
|
|
|
|
.top-bar-title a {
|
|
@include logo;
|
|
line-height: rem-calc(80) !important;
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
ul {
|
|
background: none;
|
|
padding-right: rem-calc(15);
|
|
|
|
&.menu > li {
|
|
display: block;
|
|
|
|
@include breakpoint(medium) {
|
|
display: table-cell;
|
|
height: $line-height*3.5;
|
|
}
|
|
|
|
a {
|
|
color: white;
|
|
padding-left: 0;
|
|
|
|
@include breakpoint(medium) {
|
|
font-size: $small-font-size;
|
|
padding: rem-calc(11) rem-calc(16);
|
|
}
|
|
|
|
&.button {
|
|
text-align: left;
|
|
|
|
@include breakpoint(medium) {
|
|
background: white;
|
|
color: $brand;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.menu-icon.dark {
|
|
height: 20px;
|
|
|
|
&::after, &:hover::after {
|
|
background: white;
|
|
box-shadow: 0 7px 0 white, 0 14px 0 white;
|
|
}
|
|
}
|
|
}
|
|
|
|
.top-links {
|
|
background: $dark;
|
|
color: white;
|
|
font-size: $small-font-size;
|
|
padding-right: $line-height/2;
|
|
|
|
a {
|
|
color: white;
|
|
margin: 0 rem-calc(6);
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
.subnavigation {
|
|
|
|
@include breakpoint(medium) {
|
|
background: white;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
ul {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
|
|
li {
|
|
@include breakpoint(medium) {
|
|
display: inline-block;
|
|
margin-right: rem-calc(36);
|
|
}
|
|
|
|
a {
|
|
color: white;
|
|
display: inline-block;
|
|
line-height: $line-height*2;
|
|
position: relative;
|
|
text-align: left;
|
|
width: 100%;
|
|
|
|
@include breakpoint(medium) {
|
|
color: $text;
|
|
display: block;
|
|
font-weight: bold;
|
|
width: auto;
|
|
|
|
&:hover {
|
|
color: $link;
|
|
}
|
|
}
|
|
|
|
&.active {
|
|
color: white;
|
|
|
|
@include breakpoint(medium) {
|
|
border-bottom: 2px solid $brand;
|
|
color: $brand;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.input-group {
|
|
padding-top: $line-height/4;
|
|
|
|
@include breakpoint(medium) {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.input-group-field {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
.input-group-button {
|
|
line-height: $line-height*1.5;
|
|
|
|
button {
|
|
background: $border;
|
|
border: 1px solid #ccc;
|
|
border-left: 0;
|
|
color: $text;
|
|
height: $line-height*1.5;
|
|
line-height: $line-height*1.5;
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
|
|
input {
|
|
height: $line-height*1.5 !important;
|
|
margin-bottom: 0;
|
|
margin-right: 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.submenu {
|
|
background: white;
|
|
border-bottom: 1px solid $border;
|
|
clear: both;
|
|
margin-bottom: $line-height/2;
|
|
|
|
a {
|
|
color: $text;
|
|
display: inline-block;
|
|
font-weight: bold;
|
|
margin-right: $line-height/2;
|
|
position: relative;
|
|
text-align: left;
|
|
|
|
@include breakpoint(medium) {
|
|
margin-right: $line-height*1.5;
|
|
}
|
|
|
|
&:hover {
|
|
color: $link;
|
|
}
|
|
|
|
&.active {
|
|
border-bottom: 2px solid $brand;
|
|
color: $brand;
|
|
}
|
|
}
|
|
}
|
|
|
|
.search-form-header input[type=text] {
|
|
max-width: none;
|
|
}
|
|
|
|
// 03. Footer
|
|
// ----------
|
|
|
|
footer {
|
|
color: $footer-color;
|
|
|
|
.logo a {
|
|
font-family: 'Lato' !important;
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
p {
|
|
font-size: $small-font-size;
|
|
|
|
.info a {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
a, a:active, a:focus {
|
|
color: $footer-link;
|
|
|
|
&:hover {
|
|
color: $footer-color;
|
|
}
|
|
}
|
|
|
|
.footer-sections {
|
|
padding-left: 0;
|
|
}
|
|
|
|
h2 a {
|
|
border-bottom: 1px solid $footer-border;
|
|
display: block;
|
|
font-size: rem-calc(24);
|
|
line-height: rem-calc(31);
|
|
padding-bottom: $line-height/4;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
background: $footer-bg;
|
|
border-top: 6px solid $brand;
|
|
margin-top: $line-height*2;
|
|
padding-top: $line-height;
|
|
}
|
|
|
|
.subfooter {
|
|
border-top: 1px solid $footer-border;
|
|
padding-top: $line-height/2;
|
|
}
|
|
|
|
// 04. Tags
|
|
// --------
|
|
|
|
.tags a , .tag-cloud a, .categories a, .geozone a, .sidebar-links a {
|
|
background: #ececec;
|
|
border-radius: rem-calc(6);
|
|
color: $text;
|
|
display: inline-block;
|
|
font-size: $small-font-size;
|
|
margin-bottom: $line-height/3;
|
|
padding: $line-height/4 $line-height/3;
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
background: #e0e0e0;
|
|
}
|
|
}
|
|
|
|
.categories a, .geozone a {
|
|
background: $highlight;
|
|
color: $link;
|
|
|
|
&:hover {
|
|
background: $highlight;
|
|
color: $link-hover;
|
|
}
|
|
}
|
|
|
|
h3.sidebar-title {
|
|
border-top: 2px solid $brand;
|
|
display: inline-block;
|
|
font-size: rem-calc(16);
|
|
margin: -1px 0 rem-calc(12);
|
|
padding-top: $line-height/4;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
// 05. Auth pages
|
|
// --------------
|
|
|
|
.auth-page {
|
|
background: $brand image-url("auth_bg.jpg");
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
|
|
h1:not(.logo) {
|
|
@include logo;
|
|
|
|
a {
|
|
color: white;
|
|
display: block;
|
|
line-height: rem-calc(80); // Same as logo image height
|
|
text-align: center;
|
|
|
|
@include breakpoint(medium) {
|
|
display: inline-block;
|
|
text-align: left;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.auth {
|
|
|
|
p, a, .checkbox {
|
|
font-size: $small-font-size;
|
|
}
|
|
|
|
.panel {
|
|
background: white;
|
|
border: 0;
|
|
}
|
|
}
|
|
|
|
// 06. Forms
|
|
// ---------
|
|
|
|
form.locale-form {
|
|
display: inline-block;
|
|
position: relative;
|
|
|
|
label {
|
|
color: white;
|
|
font-size: $small-font-size;
|
|
font-weight: normal;
|
|
}
|
|
|
|
select {
|
|
background-image: image-url("language_select.png");
|
|
background-origin: border-box;
|
|
background-position: right;
|
|
background-size: 24px 24px;
|
|
|
|
option {
|
|
background: white;
|
|
color: $text;
|
|
border: 0;
|
|
outline: none;
|
|
}
|
|
|
|
&.locale-switcher {
|
|
background-color: transparent;
|
|
border: 0;
|
|
color: white;
|
|
font-size: $small-font-size;
|
|
margin-bottom: 0;
|
|
outline: none;
|
|
padding-left: rem-calc(3);
|
|
padding-right: $line-height;
|
|
width: auto;
|
|
|
|
&:focus {
|
|
outline: 3px solid #ffbf47;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
form {
|
|
|
|
label {
|
|
font-size: $base-font-size;
|
|
font-weight: bold;
|
|
line-height: $line-height;
|
|
}
|
|
|
|
fieldset legend {
|
|
font-weight: bold;
|
|
}
|
|
|
|
input[type="radio"] {
|
|
height: $line-height !important;
|
|
vertical-align: top;
|
|
|
|
+ label {
|
|
font-weight: normal;
|
|
}
|
|
|
|
&:checked + label {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
input[type]:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]) {
|
|
background: #F8F8F8;
|
|
height: $line-height*2;
|
|
margin-bottom: rem-calc(16);
|
|
|
|
&.error {
|
|
margin-bottom: rem-calc(1);
|
|
}
|
|
}
|
|
|
|
input[type="checkbox"] + label,
|
|
input[type="radio"] + label {
|
|
margin-right: 0;
|
|
}
|
|
|
|
input[type=file] {
|
|
margin: $line-height/2 0 $line-height/2 $line-height/4;
|
|
}
|
|
|
|
.note, .note-marked {
|
|
display: block;
|
|
font-size: rem-calc(13);
|
|
margin-bottom: $line-height/2;
|
|
}
|
|
|
|
.note-marked {
|
|
background: yellow;
|
|
display: inline-block;
|
|
|
|
em {
|
|
background: white;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.ckeditor {
|
|
min-height: $line-height*13;
|
|
}
|
|
|
|
.checkbox, .radio {
|
|
display: inline-block;
|
|
font-weight: normal;
|
|
line-height: $line-height;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
// 07. Callout
|
|
// -----------
|
|
|
|
.callout {
|
|
font-size: $small-font-size;
|
|
|
|
&.success, &.notice {
|
|
background-color: $success-bg;
|
|
border-color: $success-border;
|
|
color: $color-success;
|
|
}
|
|
|
|
&.primary {
|
|
background-color: $info-bg;
|
|
border-color: $info-border;
|
|
color: $color-info;
|
|
}
|
|
|
|
&.warning {
|
|
background-color: $warning-bg;
|
|
border-color: $warning-border;
|
|
color: $color-warning;
|
|
|
|
a {
|
|
color: $color-warning;
|
|
font-weight: bold;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
&.alert, &.error {
|
|
background-color: $alert-bg;
|
|
border-color: $alert-border;
|
|
color: $color-alert;
|
|
}
|
|
|
|
.close {
|
|
text-decoration: none !important;
|
|
}
|
|
}
|
|
|
|
span.error, small.error {
|
|
background: $alert-bg;
|
|
color: $color-alert;
|
|
}
|
|
|
|
span.no-error, small.no-error {
|
|
background: $success-bg;
|
|
color: $color-success;
|
|
}
|
|
|
|
.error small.error {
|
|
background: $alert-bg;
|
|
color: $color-alert;
|
|
display: inline-block;
|
|
margin: 0 $line-height/4;
|
|
}
|
|
|
|
label.error, label.error a {
|
|
color: $color-alert;
|
|
}
|
|
|
|
// 08. User account
|
|
// ----------------
|
|
|
|
.account {
|
|
|
|
select {
|
|
height: $line-height*2;
|
|
margin-right: $line-height/2;
|
|
}
|
|
|
|
.verify-account {
|
|
padding-right: $line-height/2;
|
|
}
|
|
|
|
.final-votes-info {
|
|
background: $warning-bg;
|
|
border: 1px solid $warning-border;
|
|
color: $color-warning;
|
|
margin-top: $line-height;
|
|
padding: $line-height/2;
|
|
|
|
ul li {
|
|
margin: $line-height/2 0;
|
|
}
|
|
|
|
.icon-box {
|
|
color: #D4A26D;
|
|
font-size: rem-calc(120);
|
|
line-height: rem-calc(120);
|
|
vertical-align: top;
|
|
}
|
|
}
|
|
}
|
|
|
|
img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar {
|
|
border-radius: rem-calc(1000);
|
|
position: relative;
|
|
}
|
|
|
|
.author-deleted, .user-deleted {
|
|
background-color: rgba(255,255,255,.5);
|
|
color: rgba(0,0,0,.4);
|
|
font-size: rem-calc(40);
|
|
left: 11px;
|
|
position: absolute;
|
|
top: 72px;
|
|
}
|
|
|
|
.user-deleted {
|
|
top: -4px;
|
|
}
|
|
|
|
.user-permissions {
|
|
|
|
p {
|
|
span {
|
|
color: $text-medium;
|
|
font-size: rem-calc(12);
|
|
}
|
|
}
|
|
|
|
ul {
|
|
list-style-type: none;
|
|
margin-bottom: 0;
|
|
margin-left: 0;
|
|
|
|
li {
|
|
font-size: $small-font-size;
|
|
margin-bottom: $line-height/2;
|
|
|
|
span {
|
|
color: $text-medium;
|
|
font-size: rem-calc(12);
|
|
}
|
|
|
|
.icon-check {
|
|
color: $check;
|
|
}
|
|
|
|
.icon-x {
|
|
color: $delete;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.notifications {
|
|
position: relative;
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
[class^="icon-"] {
|
|
font-size: rem-calc(19);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.icon-circle {
|
|
color: #ecf00b;
|
|
font-size: rem-calc(10);
|
|
position: absolute;
|
|
right: 8px;
|
|
top: 6px;
|
|
}
|
|
}
|
|
|
|
.notifications-list:before {
|
|
background: $border;
|
|
content: '';
|
|
height: 100%;
|
|
left: 22px;
|
|
position: absolute;
|
|
top: 60px;
|
|
width: 2px;
|
|
}
|
|
|
|
.notification {
|
|
display: block;
|
|
padding: $line-height/2 0 $line-height/2 $line-height*1.5;
|
|
position: relative;
|
|
|
|
&:hover {
|
|
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
p:not(.time) {
|
|
color: $link;
|
|
}
|
|
|
|
&:before {
|
|
content: "\43";
|
|
}
|
|
}
|
|
|
|
&:before {
|
|
background: white;
|
|
color: $brand;
|
|
content: "\4d";
|
|
font-family: "icons" !important;
|
|
left: 0;
|
|
position: absolute;
|
|
}
|
|
|
|
p {
|
|
color: $text;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.time {
|
|
font-size: $small-font-size;
|
|
color: $text-medium;
|
|
}
|
|
}
|
|
|
|
// 09. Search
|
|
// ----------
|
|
|
|
.search-form h3 {
|
|
border-top: 1px solid $votes-border;
|
|
display: inline-block;
|
|
font-size: rem-calc(16);
|
|
margin: -1px 0 $line-height/2;
|
|
padding-top: $line-height/4;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.search-results h2 {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.advanced-search {
|
|
float: left;
|
|
margin: $line-height 0;
|
|
position: inherit;
|
|
|
|
@include breakpoint(medium) {
|
|
float: right;
|
|
margin-bottom: 0;
|
|
margin-top: rem-calc(28);
|
|
position: absolute;
|
|
right: 0;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
|
|
.advanced-search-form {
|
|
margin-top: $line-height;
|
|
|
|
select {
|
|
height: $line-height*2;
|
|
}
|
|
|
|
@include breakpoint(medium) {
|
|
& > .column {
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 10. Officials levels
|
|
// --------------------
|
|
|
|
[class^="level-"] {
|
|
color: white;
|
|
}
|
|
|
|
.is-author {
|
|
background: #008CCF;
|
|
}
|
|
|
|
.is-association {
|
|
background: #C0392B;
|
|
}
|
|
|
|
.is-deleted {
|
|
background: #E7E7E7;
|
|
}
|
|
|
|
.level-1 {
|
|
background: #1ABC9C;
|
|
}
|
|
|
|
.level-2, .level-3, .level-4 {
|
|
background: #43AC6A;
|
|
}
|
|
|
|
.level-5 {
|
|
background: #F08A24;
|
|
}
|
|
|
|
// 11. Tables
|
|
// ----------
|
|
|
|
table {
|
|
border: $border;
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
width: 100%;
|
|
|
|
th {
|
|
background: #f8f9fb;
|
|
}
|
|
|
|
tr {
|
|
|
|
td {
|
|
line-height: $line-height;
|
|
padding: $line-height/2 $line-height/4;
|
|
}
|
|
|
|
&:nth-child(odd) {
|
|
background: white;
|
|
}
|
|
|
|
&:nth-child(even) {
|
|
background: #fafcfb;
|
|
}
|
|
}
|
|
|
|
.button {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
// 12. Social
|
|
// ----------
|
|
|
|
.button.button-twitter,
|
|
.button.button-facebook,
|
|
.button.button-google {
|
|
height: $line-height*2;
|
|
line-height: $line-height*2;
|
|
padding: 0;
|
|
position: relative;
|
|
}
|
|
|
|
.button.button-twitter {
|
|
background: #45B0E3;
|
|
|
|
&:before {
|
|
content: "f";
|
|
font-family: "icons" !important;
|
|
font-size: rem-calc(24);
|
|
left: 0;
|
|
line-height: $line-height*2;
|
|
padding: 0 rem-calc(20);
|
|
position: absolute;
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
.social-share-button-twitter {
|
|
background: #45B0E3;
|
|
color: white;
|
|
height: $line-height*2;
|
|
position: relative;
|
|
width: $line-height*2;
|
|
|
|
&:before {
|
|
content: "f";
|
|
font-family: "icons" !important;
|
|
font-size: rem-calc(24);
|
|
left: 50%;
|
|
line-height: $line-height*2;
|
|
margin-left: rem-calc(-11);
|
|
position: absolute;
|
|
top: 0;
|
|
}
|
|
|
|
&:hover {
|
|
background: white;
|
|
color: #40A2D1;
|
|
}
|
|
}
|
|
|
|
.button.button-facebook {
|
|
background: #3B5998;
|
|
|
|
&:before {
|
|
content: "A";
|
|
font-family: "icons" !important;
|
|
font-size: rem-calc(24);
|
|
left: 0;
|
|
line-height: $line-height*2;
|
|
padding: 0 rem-calc(20);
|
|
position: absolute;
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
.social-share-button-facebook {
|
|
background: #3B5998;
|
|
color: white;
|
|
height: rem-calc(48);
|
|
position: relative;
|
|
width: rem-calc(48);
|
|
|
|
&:before {
|
|
content: "A";
|
|
font-family: "icons" !important;
|
|
font-size: rem-calc(24);
|
|
left: 50%;
|
|
line-height: $line-height*2;
|
|
margin-left: rem-calc(-11);
|
|
position: absolute;
|
|
top: 0;
|
|
}
|
|
|
|
&:hover {
|
|
background: white;
|
|
color: #354F88;
|
|
}
|
|
}
|
|
|
|
.button.button-google {
|
|
background: #DE4C34;
|
|
|
|
&:before {
|
|
content: "B";
|
|
font-family: "icons" !important;
|
|
font-size: rem-calc(24);
|
|
left: 0;
|
|
line-height: $line-height*2;
|
|
padding: 0 rem-calc(20);
|
|
position: absolute;
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
.social-share-button-google_plus {
|
|
background: #DE4C34;
|
|
color: white;
|
|
height: $line-height*2;
|
|
position: relative;
|
|
width: $line-height*2;
|
|
|
|
&:before {
|
|
content: "B";
|
|
font-family: "icons" !important;
|
|
font-size: rem-calc(24);
|
|
left: 50%;
|
|
line-height: $line-height*2;
|
|
margin-left: rem-calc(-11);
|
|
position: absolute;
|
|
top: 0;
|
|
}
|
|
|
|
&:hover {
|
|
background: white;
|
|
color: #CE3E26;
|
|
}
|
|
}
|
|
|
|
.social {
|
|
|
|
a {
|
|
font-size: rem-calc(24);
|
|
margin: 0 $line-height/2;
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
color: $brand;
|
|
}
|
|
}
|
|
}
|
|
|
|
.share-supported {
|
|
|
|
.social-share-button {
|
|
display: inline-block;
|
|
}
|
|
|
|
.social-share-button-twitter {
|
|
background: none;
|
|
color: white;
|
|
height: $line-height;
|
|
position: relative;
|
|
width: $line-height*2;
|
|
|
|
&:before {
|
|
content: "f";
|
|
font-family: "icons" !important;
|
|
font-size: rem-calc(24);
|
|
left: 50%;
|
|
line-height: $line-height*2;
|
|
margin-left: rem-calc(-11);
|
|
position: absolute;
|
|
top: 0;
|
|
}
|
|
|
|
&:hover {
|
|
color: #40A2D1;
|
|
}
|
|
}
|
|
|
|
.social-share-button-facebook {
|
|
background: none;
|
|
color: white;
|
|
height: rem-calc(24);
|
|
position: relative;
|
|
width: rem-calc(48);
|
|
|
|
&:before {
|
|
content: "A";
|
|
font-family: "icons" !important;
|
|
font-size: rem-calc(24);
|
|
left: 50%;
|
|
line-height: $line-height*2;
|
|
margin-left: rem-calc(-11);
|
|
position: absolute;
|
|
top: 0;
|
|
}
|
|
|
|
&:hover {
|
|
color: #354F88;
|
|
}
|
|
}
|
|
|
|
.social-share-button-google_plus {
|
|
background: none;
|
|
color: white;
|
|
height: rem-calc(24);
|
|
position: relative;
|
|
width: rem-calc(48);
|
|
|
|
&:before {
|
|
content: "B";
|
|
font-family: "icons" !important;
|
|
font-size: rem-calc(24);
|
|
left: 50%;
|
|
line-height: $line-height*2;
|
|
margin-left: rem-calc(-11);
|
|
position: absolute;
|
|
top: 0;
|
|
}
|
|
|
|
&:hover {
|
|
color: #CE3E26;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 13. Pages
|
|
// ---------
|
|
|
|
.more-information {
|
|
|
|
ul {
|
|
|
|
li {
|
|
border-bottom: 1px solid $border;
|
|
font-weight: bold;
|
|
margin-left: rem-calc(-12);
|
|
position: relative;
|
|
|
|
span {
|
|
color: $text;
|
|
display: inline-block;
|
|
font-weight: normal;
|
|
}
|
|
|
|
a {
|
|
display: block;
|
|
padding: $line-height/2;
|
|
|
|
&:hover {
|
|
background: $highlight;
|
|
|
|
span {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:after {
|
|
content: none;
|
|
color: $text-medium;
|
|
font-family: "icons" !important;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 24px;
|
|
|
|
@include breakpoint(medium) {
|
|
content: 'c';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 14. Verification
|
|
// ----------------
|
|
|
|
.verification {
|
|
|
|
@include breakpoint(medium) {
|
|
.left + .left {
|
|
margin-left: $line-height/2;
|
|
}
|
|
}
|
|
|
|
.date-of-birth {
|
|
|
|
select {
|
|
float: left;
|
|
width: 30%;
|
|
|
|
@include breakpoint(medium) {
|
|
width: 25%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.progress {
|
|
height: $line-height*3;
|
|
|
|
@include breakpoint(medium) {
|
|
height: $line-height*2;
|
|
}
|
|
|
|
&.success .meter {
|
|
float: none;
|
|
}
|
|
}
|
|
|
|
.verification-step {
|
|
background: #f6f6f6;
|
|
font-weight: bold;
|
|
line-height: rem-calc(20);
|
|
padding-top: $line-height/4;
|
|
text-transform: uppercase;
|
|
vertical-align: top;
|
|
|
|
@include breakpoint(medium) {
|
|
line-height: $line-height*2;
|
|
padding: 0;
|
|
}
|
|
|
|
.number {
|
|
display: block;
|
|
|
|
@include breakpoint(medium) {
|
|
background-color: white;
|
|
border-radius: rem-calc(30);
|
|
color: #43AC6A;
|
|
display: inline-block;
|
|
height: rem-calc(30);
|
|
line-height: rem-calc(30);
|
|
vertical-align: middle;
|
|
width: rem-calc(30);
|
|
}
|
|
}
|
|
|
|
&.active {
|
|
background: #43AC6A;
|
|
color: white;
|
|
}
|
|
|
|
&.completed {
|
|
background: #43AC6A;
|
|
color: rgba(255,255,255,.5);
|
|
|
|
.number {
|
|
opacity: .5;
|
|
}
|
|
}
|
|
}
|
|
|
|
.send-letter {
|
|
background: none;
|
|
color: $link;
|
|
|
|
&:hover {
|
|
color: $link-hover;
|
|
}
|
|
}
|
|
|
|
.button + form {
|
|
display: inline-block;
|
|
margin-left: $line-height/2;
|
|
}
|
|
|
|
.verification-list {
|
|
font-size: rem-calc(13);
|
|
list-style-type: none;
|
|
margin-left: 0;
|
|
|
|
span {
|
|
display: inline-block;
|
|
min-width: $line-height*12;
|
|
}
|
|
}
|
|
}
|
|
|
|
.verify-account {
|
|
padding-right: $line-height/2;
|
|
|
|
.already-verified {
|
|
color: $check;
|
|
line-height: $line-height*2;
|
|
|
|
.icon-check {
|
|
font-size: rem-calc(24);
|
|
line-height: rem-calc(45);
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
|
|
.verify {
|
|
margin-bottom: $line-height*2;
|
|
margin-top: $line-height;
|
|
|
|
h1 {
|
|
color: $check;
|
|
|
|
.icon-check {
|
|
line-height: rem-calc(30);
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.letter-divider {
|
|
border-top: 1px solid #DDDDDD;
|
|
clear: both;
|
|
height: 0;
|
|
margin: rem-calc(24) 0;
|
|
position: relative;
|
|
|
|
.icon-letter {
|
|
background: white;
|
|
color: $color-info;
|
|
font-size: rem-calc(24);
|
|
margin-left: -27px;
|
|
padding: 0 $line-height/2;
|
|
position: absolute;
|
|
top: -12px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 15. Comments
|
|
// ------------
|
|
|
|
.comments {
|
|
background: $white;
|
|
background-repeat: repeat-x;
|
|
padding-bottom: $line-height*4;
|
|
|
|
h2 {
|
|
margin: 0;
|
|
font-weight: bold;
|
|
|
|
span {
|
|
font-size: rem-calc(18);
|
|
font-weight: normal;
|
|
opacity: .8;
|
|
}
|
|
}
|
|
|
|
.comment {
|
|
margin: $line-height/4 0;
|
|
position: relative;
|
|
|
|
p {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.comment-votes {
|
|
color: $text-medium;
|
|
font-size: rem-calc(14);
|
|
line-height: $line-height;
|
|
|
|
a {
|
|
color: $text-light;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
|
|
&:hover {
|
|
color: $text-medium;
|
|
}
|
|
}
|
|
|
|
[class^="icon-"] {
|
|
font-size: rem-calc(20);
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.comment-body {
|
|
margin-left: rem-calc(42);
|
|
|
|
.reply {
|
|
background: white;
|
|
border: 1px solid $border;
|
|
border-left: 0;
|
|
border-right: 0;
|
|
font-size: $small-font-size;
|
|
margin: rem-calc(6) 0;
|
|
padding: rem-calc(6);
|
|
|
|
[class^="icon-arrow"] {
|
|
font-size: rem-calc(18);
|
|
left: -20px;
|
|
position: absolute;
|
|
top: 0;
|
|
}
|
|
|
|
.divider {
|
|
color: $text-light;
|
|
}
|
|
}
|
|
|
|
.comment-user {
|
|
margin-top: $line-height/4;
|
|
padding: $line-height/4 0;
|
|
overflow: hidden;
|
|
|
|
&.level-1, &.level-2, &.level-3, &.level-4, &.level-5,
|
|
&.is-author, &.is-admin, &.is-moderator {
|
|
background: rgba(70,219,145,.3);
|
|
padding: $line-height/4 $line-height/2;
|
|
}
|
|
|
|
&.level-1 {
|
|
background: none;
|
|
}
|
|
|
|
&.level-5 {
|
|
background: rgba(255,241,204,1);
|
|
}
|
|
|
|
&.is-author, &.is-admin, &.is-moderator {
|
|
background: rgba(45,144,248,.15);
|
|
}
|
|
}
|
|
}
|
|
|
|
.is-deleted {
|
|
background: #E7E7E7;
|
|
margin-left: rem-calc(42);
|
|
padding: $line-height/4 $line-height/2;
|
|
}
|
|
|
|
.comment-children {
|
|
border-left: 1px dashed $border;
|
|
margin-left: rem-calc(42);
|
|
padding-left: $line-height/4;
|
|
|
|
@media only screen and (max-width: 40em) {
|
|
margin-left: rem-calc(16);
|
|
}
|
|
}
|
|
|
|
.comment-info {
|
|
color: $text-medium;
|
|
font-size: $small-font-size;
|
|
margin-top: $line-height/4;
|
|
vertical-align: middle;
|
|
|
|
span.user-name {
|
|
color: $text;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.faded {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.wide-order-selector {
|
|
float: none;
|
|
margin-top: 0;
|
|
|
|
@include breakpoint(medium) {
|
|
float: right;
|
|
margin-top: rem-calc(-24);
|
|
}
|
|
|
|
label {
|
|
padding-right: $line-height/2;
|
|
float: none;
|
|
|
|
@include breakpoint(medium) {
|
|
float: right;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 16. Flags
|
|
// ---------
|
|
|
|
.flag-content {
|
|
|
|
.button {
|
|
background: none;
|
|
margin-bottom: 0;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.flag-disable, .flag-active {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.flag-disable {
|
|
color: $text-medium;
|
|
}
|
|
|
|
.flag-active {
|
|
color: $delete;
|
|
}
|
|
|
|
.dropdown-pane a {
|
|
color: $text-medium;
|
|
}
|
|
|
|
// 17. Activity
|
|
// ------------
|
|
|
|
.activity {
|
|
margin-bottom: $line-height*2;
|
|
|
|
table {
|
|
border: 0;
|
|
|
|
td {
|
|
position: relative;
|
|
|
|
&:first-child {
|
|
padding-left: $line-height*1.5;
|
|
width: 75%;
|
|
}
|
|
|
|
&:before {
|
|
color: $brand;
|
|
font-family: "icons" !important;
|
|
font-size: rem-calc(24);
|
|
left: 4px;
|
|
position: absolute;
|
|
}
|
|
}
|
|
|
|
&.activity-comments td:first-child:before {
|
|
content: "e";
|
|
top: 18px;
|
|
}
|
|
|
|
&.activity-debates td:first-child:before {
|
|
content: "i";
|
|
top: 14px;
|
|
}
|
|
|
|
&.activity-proposals {
|
|
|
|
td:first-child:before {
|
|
content: "h";
|
|
top: 18px;
|
|
}
|
|
|
|
.retired {
|
|
text-decoration: line-through;
|
|
}
|
|
}
|
|
|
|
&.activity-investment-projects td:first-child:before, &.activity-ballot td:first-child:before {
|
|
content: "\53";
|
|
top: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 18. Banners
|
|
// -----------
|
|
|
|
.banner-style-one {
|
|
background-color: $brand;
|
|
}
|
|
|
|
.banner-style-two {
|
|
background-color: $budget;
|
|
}
|
|
|
|
.banner-style-three {
|
|
background-color: #33DADF;
|
|
}
|
|
|
|
@include breakpoint(large) {
|
|
|
|
.banner-img-one {
|
|
background-image: image-url('banners/banner1.png');
|
|
}
|
|
|
|
.banner-img-two {
|
|
background-image: image-url('banners/banner2.png');
|
|
}
|
|
|
|
.banner-img-three {
|
|
background-image: image-url('banners/banner3.png');
|
|
}
|
|
}
|
|
|
|
.banner-img-one, .banner-img-two, .banner-img-three {
|
|
background-position: bottom right;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.banner-style-one, .banner-style-two, .banner-style-three {
|
|
margin: 0;
|
|
margin-bottom: $line-height;
|
|
|
|
h2, h3, a {
|
|
color: #eaeaf2;
|
|
}
|
|
|
|
h2 {
|
|
padding: $line-height/2;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
h3 {
|
|
padding: $line-height/2;
|
|
padding-top: 0;
|
|
}
|
|
|
|
a:hover h2, a:hover h3 {
|
|
color: #eaeaf2 !important;
|
|
text-decoration: none;
|
|
}
|
|
|
|
@include breakpoint(large) {
|
|
|
|
h3 {
|
|
width: 80%;
|
|
}
|
|
}
|
|
}
|