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.

440 lines
7.9 KiB

$bumbleberry-no-markup: true;
@import "bumbleberry";
@import "settings";
@include monospace-font;
.translation-list {
list-style: none;
padding: 0;
text-align: center;
@include clearfix;
li {
display: inline-block;
width: 25%;
padding: 1em;
min-width: 10em;
}
a {
display: block;
position: relative;
height: 7em;
border: 0.1em solid #DDD;
color: inherit;
overflow: hidden;
@include _(border-radius, 0.25em);
@include default-box-shadow(top, 2);
@include _(transform, scale(1));
@include _(transition, transform 100ms ease-in-out);
&:hover,
&:focus {
@include _(transform, scale(1.125));
}
&:active {
@include _(transform, scale(1.25));
}
&:after {
display: none;
}
}
.locale-name {
font-size: 1.25em;
padding: 0.5em 0;
background-color: $colour-2;
color: #EEE;
@include font-family(secondary);
}
.locale-completion {
font-size: 2em;
@include font-family(monospace);
letter-spacing: -0.15em;
}
&.enabled-translations {
.locale-name {
background-color: $colour-5;
}
}
}
#lingua-franca-translation-form {
padding: rems(1) 7.5%;
@include default-box-shadow(bottom, 2);
max-width: 100%;
/*button[type="submit"] {
position: absolute;
right: 7.5%;
top: 1em;
@include _(opacity, 1);
@include _(transition, opacity 250ms ease-in-out);
&:disabled {
cursor: default;
@include _(opacity, 0);
}
}*/
}
#lingua-franca-translation-form h2,
#translation-value,
.variables button {
@include font-family(monospace);
}
#translation-value {
border: 1px solid #CCC;
outline: none;
padding: 1em 1.75em;
color: $colour-3;
background-color: #333;
position: relative;
input {
border: 0;
background-color: transparent;
padding: 0;
margin: 0;
font-weight: bold;
color: $colour-1;
&.special {
color: $colour-4;
}
}
}
#translation-control-variables {
background-color: #CCC;
padding: 0.25em;
min-height: 2.9em;
strong {
float: left;
padding: 0.25em 0.5em;
}
.variables {
font-weight: bold;
em {
line-height: 1.75em;
}
button {
top: auto;
right: auto;
position: relative;
border-radius: 0.25em;
font-size: 0.65em;
margin-bottom: 1em;
vertical-align: sub;
@include _(text-stroke, 0);
&.special {
background-color: $colour-4;
}
}
}
}
#lingua-franca-translation-form .enable-translation {
display: none;
}
#lingua-franca-translation-form.optional .enable-translation {
display: block;
}
#lingua-franca-translation-form.optional.enabled .uses-default-value {
display: none;
}
#lingua-franca-translation-form.optional.disabled .uses-custom-value,
#lingua-franca-translation-form.optional.disabled .translation-control {
display: none;
}
#lingua-franca-keys {
width: 100%;
overflow: hidden;
margin-bottom: 100%;
background-color: transparent;
@include _(box-shadow, none);
th {
text-align: left;
&, td {
@include font-family(monospace);
}
}
td a {
color: inherit;
@include _(opacity, 0.85);
}
.variable {
color: $colour-1;
font-weight: bold;
&.special {
color: $colour-4;
}
}
.parent-keys span {
color: transparent;
width: 1em;
display: inline-block;
}
a {
display: block;
&:after {
display: none;
}
}
tr.selectable-key:hover {
background-color: $colour-1;
a {
color: $white;
.variable {
color: inherit;
}
}
}
.lingua-franca-value {
display: none;
}
}
@include breakpoint(medium) {
#lingua-franca-keys {
.lingua-franca-value {
display: table-cell;
}
}
.lingua-franca-navigation {
ul {
padding: 0;
list-style: none;
font-weight: normal;
@include font-family(secondary);
ul {
margin-left: 1em;
margin-bottom: 1em;
@include font-family(primary);
}
}
.current {
@include before {
content: '';
display: block;
position: absolute;
width: 0;
height: 0;
left: -1.5em;
top: 0.6667em;
border-width: 1em 0 1em 1em;
border-color: transparent transparent transparent #333;
border-style: solid;
font-size: 0.25em;
}
}
}
}
@include breakpoint(large) {
#lingua-franca-keys {
margin-bottom: 0;
}
#lingua-franca-translation-form {
position: relative;
padding: 1rem 7.5%;
background-color: $white;
@include default-box-shadow(top, 2);
}
}
.lingua-franca-translations {
position: relative;
@include default-box-shadow(top, 2);
}
.lingua-franca-translations {
.translation-examples, #lingua-franca-translation-history {
padding: 0 7.5%;
padding-bottom: 0.5vh;
}
}
html #lingua-franca-translation-form {
@include _(box-shadow, none);
}
.lingua-franca-translations .translation-examples ul {
list-style: none;
padding: 0;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
width: 100%;
height: 6vh;
padding-top: 0.25em;
z-index: 1;
margin: 0;
}
.lingua-franca-translations .translation-examples li {
display: inline-block;
position: relative;
width: 5vw;
height: 5vh;
margin: 0 0.5em;
@include after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
cursor: pointer;
outline: 0.25em solid rgba($colour-2, 0.25);
background-color: rgba($colour-2, 0.25);
outline-color: rgba($colour-2, 0.25);
@include _(transition, '#{background-color, outline-color 250ms, 250ms ease-in-out, ease-in-out}');
}
iframe {
@include _(transform, scale(0.05) translate(-950vw, -950vh));
width: 100vw;
height: 100vh;
@include _(transform-origin, 50% 50%);
//@include _(transition, '#{transform, position, z-index 250ms, 250ms, 0 ease-in-out, ease-in-out, linear 0, 250ms, 0}');
position: fixed;
margin: auto
}
&:hover {
@include after {
background-color: rgba($colour-3, 0);
outline-color: rgba($colour-3, 0.5);
}
}
&.open {
iframe {
top: 0;
left: 0;
z-index: 100;
//margin: auto;
@include _(transform, scale(0.75) translate(0, 0));
@include default-box-shadow(top, 2);
//@include breakpoint(large) {
// left: 8.75rem;
//}
}
@include after {
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba($colour-3, 0.5);
position: fixed;
z-index: 99;
}
}
@include breakpoint(large) {
&.open {
iframe {
width: 100%;
height: 100%;
@include _(transform, scale(0.9) translate(0, 0));
}
}
}
}
.highlight-key {
outline: 3rem solid rgba($colour-2, 0.5);
}
#lingua-franca-translation-form button[type="submit"] {
margin-right: 0.25em;
}
#lingua-franca-keys .translation-history {
display: none;
}
#lingua-franca-translation-history .translation-diff-info,
#lingua-franca-translation-history .diff {
@include clearfix;
}
#lingua-franca-translation-history .diff ul {
list-style: none;
padding: 0;
}
#lingua-franca-translation-history .translation-diff-info li {
margin-bottom: 0.5em;
font-style: italic;
}
#lingua-franca-translation-history .translation-diff-info li,
#lingua-franca-translation-history .diff li {
width: 50%;
display: inline-block;
float: left;
}
#lingua-franca-keys td a .undefined {
font-style: italic;
color: #888;
}
.lingua-franca-translations {
position: fixed;
z-index: -2;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
background-color: $white;
@include _(transform, scale(0));
$transition-time: 250ms;
@include _(transition, #{transform $transition-time ease-in-out, z-index 0ms linear $transition-time});
&.editing {
z-index: 98;
@include _(transform, scale(1));
@include _(transition, transform $transition-time ease-in-out);
}
}
.actions {
margin-top: 1em;
}