Bike!Bike! Website!
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

510 lines
6.8 KiB

table#translations {
table-layout: fixed;
padding: 0;
.key, .pages {
width: 25%;
overflow: hidden;
&:hover {
overflow: visible;
}
}
.pages {
position: relative;
ul {
font-size: 1em;
margin: 0;
list-style: none;
position: absolute;
left: 0;
top: 0;
}
a {
display: block;
}
&:hover {
ul {
z-index: 100;
}
a {
background-color: $white;
}
}
}
td.value {
position: relative;
cursor: text;
&:hover,
.translation-form {
color: $white;
background-color: $body-font-color;
}
}
.not-exists {
td.value {
font-style: italic;
color: lighten($body-font-color, 45);
}
}
.translation-form {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 10;
padding: inherit;
textarea {
height: 100%;
font-size: inherit;
padding: 0;
color: inherit;
background-color: inherit;
}
button {
right: 100%;
position: absolute;
border-radius: 0;
top: 0;
}
}
.auto-translate {
float: right;
}
}
.grid.links {
&.inactive li > a {
opacity: 0.75;
}
li > a {
display: block;
background-color: $color-5;
color: $white;
padding: 1em;
min-height: 7em;
&.complete {
background-color: $color-2;
}
&.needs-work {
background-color: $color-4;
}
&:hover {
background-color: $color-1;
opacity: 1;
}
h3 {
color: inherit;
}
}
}
ul.tags,
.tags > ul {
display: inline;
list-style: none;
font-size: 0.9em;
margin: 0;
}
.tags {
li {
display: inline-block;
background-color: $black;
color: $white;
padding: 0 0.5em;
margin: 0.6em 0 0 0.3em;
}
h5 {
float: left;
color: lighten($body-font-color, 10);
}
}
.org-preview {
/*display: block;
position: relative;
margin: 3em 0 0;
background-color: $organization-color;
background-size: cover;
background-position: center;
/*&:before {
content: '';
display: block;
padding-top: 50%;
}*/
/*figcaption {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
a {
display: block;
height: 100%;
}
h3 {
position: absolute;
bottom: 100%;
height: 2em;
width: 100%;
background-color: $organization-color;
margin: 0;
font-size: 1em;
padding: 0.25em 0.5em;
}
img {
background-color: $white;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}*/
}
.preview-list {
li {
position: relative;
margin-bottom: 1em;
&:before {
content: '';
display: block;
padding-top: 50%;
}
h4, h5 {
position: absolute;
top: 0;
min-height: 2em;
margin: 0;
font-size: 1em;
padding: 0.25em 0.5em;
color: $white;
//width: 100%;
z-index: 1;
left: 0;//.6667em;
right: 0;//.6667em;
}
h5 {
left: 0.6667em;
right: 0.6667em;
}
figure {
position: absolute;
//width: 100%;
height: 100%;
left: 0.6667em;
right: 0.6667em;
margin: 0;
bottom: 0;
text-align: center;
background-size: cover;
background-position: center;
background-blend-mode: luminosity;
@include single-transition(all, 100ms, ease-in);
&:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: $white;
opacity: 0.5;
@include single-transition(all, 100ms, ease-in);
}
img {
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 2em;
bottom: 0;
max-width: 90%;
max-height: 66.667%;
z-index: 1;
-webkit-transform: translate3d(0,0,0);
}
}
a {
&:hover {
figure {
background-color: transparent;
&:after {
opacity: 0.25;
}
}
}
}
&.city figure {
background-color: rgba($primary-color, 0.75);
&:after {
display: none;
}
}
}
&.org-list li {
h4 {
background-color: $primary-color;
}
h5 {
background-color: $organization-color;
}
figure {
background-color: $organization-color;
}
}
&.conference-list li {
h4 {
background-color: $secondary-color;
}
h5 {
background-color: $conference-color;
}
figure {
background-color: $conference-color;
}
}
li.city figure {
background-color: rgba($primary-color, 0.75);
&:after {
display: none;
}
}
@include breakpoint(medium) {
margin-left: 3em;
aside & {
margin-left: 0;
}
}
}
.org-mini-preview {
position: relative;
overflow: auto;
margin: 0;
background-color: $gray;
border: 0.25em solid lighten($black, 33);
&.portrait {
img {
float: left;
max-width: 50%;
}
figcaption {
float: right;
max-width: 50%;
}
}
p {
font-size: 0.9em;
line-height: 1.25em;
}
figcaption {
padding: 0.25em
}
}
.org-list-select {
&.chosen {
display: none;
}
ul {
list-style: none;
margin: 0;
overflow: auto;
height: 25em;
border: 0.25em solid $gray;
}
li {
background-color: lighten($gray, 5);//rgba(225, 225, 225, 0.5);
margin: 0.25em;
&:hover {
background-color: lighten($color-4, 25);//desaturate(lighten($organization-color, 33), 33);
}
&.removable:hover {
background-color: desaturate(lighten($color-3, 16), 16);
}
&.selected {
background-color: desaturate(lighten($organization-color, 33), 33);
}
&.not-found {
display: none;
}
}
figure {
margin: 0;
padding: 0.25em;
overflow: auto;
}
img {
float: left;
margin-right: 1em;
}
h6 {
margin: 0;
}
p {
font-size: 0.8em;
margin: 0;
}
figcaption {
overflow: auto;
}
@include breakpoint(medium) {
&.chosen {
display: block;
}
&.choose {
li.selected {
display: none;
}
}
}
}
#org-filter {
width: 100%;
font-size: 1.25em;
padding: 0.333em;
border: 3px solid $gray;
margin-top: 0.5em;
outline: none !important;
}
#register-dlg {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: transparent;
visibility: hidden;
z-index: 100;
@include text-shadow(none);
@include transition(background-color 250ms ease-in-out 125ms, visibility 0 linear 250ms);
form {
position: fixed;
min-width: 30em;
left: 110%;
right: 0;
max-width: 30em;
bottom: 0;
margin: auto;
top: 0;
background-color: $white;
height: 10em;
padding: 1em;
z-index: 101;
@include transform(skewX(-30deg));
@include transition(all 250ms ease-in-out 0);
}
&.open {
background-color: rgba($primary-color, 0.8);
visibility: visible;
@include transition(background-color 250ms ease-in-out);
form {
left: 0;
@include transform(skewX(0));
@include transition(all 250ms ease-in-out 125ms);
}
}
}
@include breakpoint(medium) {
.organizations-index,
.conferences-index {
#content {
h2 {
margin-top: 1em;
}
h3 {
margin-left: 1em;
}
}
}
}
.workshop {
list-style: none;
overflow: auto;
&:target {
background-color: $color-5;
}
}
.registrations .user {
vertical-align: top;
&:target {
background-color: $color-5;
}
}