table#translations { 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; } figure { position: absolute; width: 100%; height: 100%; 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; } } 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; } } @include breakpoint(medium) { .organizations-index, .conferences-index { #content { h2 { margin-top: 1em; } h3 { margin-left: 1em; } } } }