*[ng-cloak] {
visibility: hidden;
}
html {
position: relative; // required for sticky footer
z-index: $footer-z;
}
body {
background-color: $bg-color;
}
body.no-overflow {
overflow: hidden;
}
a:visited {
color: $link-visited-color;
&.label {
color: $label-visited-color;
}
}
a .glyphicon {
color: $icon-color;
&:hover {
color: $icon-hover-color;
}
}
.no-pointer-events {
pointer-events: none;
}
.bg-unpublished {
background-image: url("/static/images/unpublished.svg");
}
.global-notification {
p {
display: inline-block;
}
&.ip-block-message {
@extend .alert-warning;
}
}
.siteheader {
height: 43px;
border-bottom: $header-footer-border;
display: flex;
align-items: center;
.logolink, tim-logo, & > img {
height: 100%;
}
tim-login-menu {
flex: 1;
text-align: center;
}
}
.nudge-left-25 {
margin-left: -25px;
}
.vcenter {
line-height: 2;
}
.valign {
vertical-align: middle;
}
@media (max-width: $screen-sm) {
.row.main-content {
margin-left: -$focus-bar-width;
margin-right: 0;
}
}
// Bootstrap doesn't have built-in support for input-xs and input-group-xs classes,
// so we borrow them from https://stackoverflow.com/a/22920590
.input-xs {
height: 22px;
padding: 2px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
.input-group-xs > .form-control,
.input-group-xs > .input-group-addon,
.input-group-xs > .input-group-btn > .btn {
height: 22px;
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
}
@mixin h1-base() {
text-align: center;
margin-top: 3cm;
margin-bottom: 1cm;
color: $h1-color;
border-top: $h1-color 2pt solid;
border-bottom: $h1-color 2pt solid;
padding-top: 10pt;
padding-bottom: 10pt;
line-height: 1.3;
}
.paragraphs table, tim-table table {
@extend .table, .table-condensed, .table-bordered;
width: auto;
margin-left: auto;
margin-right: auto;
th {
background-color: $table-header-bg;
color: $table-header-color;
border: 1px solid #ccc;
}
text-align: left;
}
// all document-related styles under .paragraphs selector!
.paragraphs {
@include center-block();
@media (min-width: $screen-md-min) {
min-width: var(--paragraph-preferred-width);
}
max-width: var(--paragraph-preferred-width);
@media (max-width: $screen-md-max) and (min-width: $screen-md-min) {
margin-left: 2em;
}
.smalltext .parContent {
font-size: small;
}
.linkit .parContent {
font-size: small;
}
.authorinfo {
top: -1.1em;
position: relative;
font-size: x-small;
height: 0.5em;
.timestamp {
color: lightgrey;
}
}
.parContent {
text-align: $body-text-align;
@media (max-width: $screen-xs-max) {
text-align: $body-text-align-xs;
}
font-size: $font-size-normal;
* code {
font-size: $inline-code-size;
}
& > h1, & > div > h1 {
@include h1-base();
}
figcaption {
text-align: center;
margin: 0.5em;
}
@mixin heading-base($outdent) {
text-align: left;
margin-left: $outdent;
@media (max-width: 870px) {
margin-left: $outdent * 0.6;
}
@media (max-width: $screen-xs-max) {
margin-left: 0;
}
color: $primary-color;
}
& > h2 {
@include heading-base($heading-outdent);
margin-top: 1.5cm;
line-height: 1.2;
}
& > h3 {
@include heading-base($heading-outdent*0.8);
margin-top: 1cm;
margin-bottom: 0.5cm;
}
& > h4 {
@include heading-base($heading-outdent*0.6);
margin-top: 2em;
margin-bottom: 0.5cm;
}
.mcq, .mmcq {
.header {
text-align: center;
}
.stem {
text-align: left;
}
td {
text-align: left;
vertical-align: middle;
&.text-center {
@extend .text-center;
}
}
button {
@extend .timButton;
}
}
}
.inlineplugin {
display: inline-block;
}
.troutofdate:not(.areaContent)::before, // Normal paragraph except the first after area
.areaContent.troutofdate > div.par:first-child::before // First paragraph after areaContent is the area paragraph
{
content: "Translation is out of date";
color: red;
position: absolute;
top: -0.8em;
right: 0;
}
.checktr::before {
content: "Check translation";
color: red;
position: absolute;
top: -0.8em;
right: 0;
}
.header th {
border: 1px solid #bbb;
}
/* ready styles begin */
.tim { color: $basic-color}
.red { color: red; }
.blue { color: blue; }
.green { color: green; }
.lime { color: lime; }
.yellow { color: yellow; }
.white { color: white; }
.gray { color: gray; }
.lightgray { color: lightgrey; }
.bggray { background: #e6e6e6; }
.bgred { background: red; }
.bgblue { background: blue; }
.bggreen { background: green; }
.bglime { background: lime; }
.bgyellow { background: yellow; }
.bglightgray { background: lightgrey; }
.bgtim { background: $basic-color}
.bgwhite { background: white; }
.border { border: 1.00pt solid #000000; }
.radius { border-radius: 0.3em; }
.bgreadline { background: #ff6600c0; }
.bgreadmodified { background: #ffff00c0; }
.obs { border: 1.00pt solid #000000; padding: 0.1em; background: #e6e6e6;}
/* .note .answer TODO: do we dare to use pure .answer? Otherwise it is not visible in preview */
.answer { color: $answer-color; }
.smaller { font-size: smaller; }
.small { font-size: small; }
.x-small { font-size: x-small; }
.xx-small { font-size: xx-small; }
.larger { font-size: larger; }
.large { font-size: large; }
.x-large { font-size: x-large; }
.xx-large { font-size: xx-large; }
img.smallimage {
display: inline;
}
.text-start .parContent {
text-align: left !important;
}
/* ready styles end */
span.button {
border: black;
border-style: solid;
background: lightgray;
border-color: black;
border-width: 1pt;
border-radius: 4pt;
padding-left: 3pt;
padding-right: 3pt;
}
span.plus::before {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
content: "\002b";
color: $basic-color
}
.removePre pre { /* for chat */
visibility: collapse;
height: 0pt;
}
.smalltitle { /* for chat */
font-size: x-small;
color: gray;
}
.huomautus {
@extend .center-block;
width: 90%;
margin-top: 1.5em;
margin-bottom: 1.5em;
background: #e6e6e6;
border: 1.00pt solid #000000;
padding: 0.25cm;
font-family: Verdana, Arial, sans-serif;
text-align: left;
p {
margin-top: 0.1em;
margin-left: 0.3em;
margin-bottom: 0.1em;
}
}
p.plgfooter {
text-align: center;
}
img {
max-width: 100%;
display: block;
margin: 0 auto;
}
.mathp {
&.inline img {
display: inline;
max-width: inherit;
}
&.display {
margin-top: 0.7em;
margin-bottom: 0.6em;
display: block;
img {
max-width: inherit;
}
}
}
blockquote {
@extend .center-block;
width: 90%;
font-size: inherit;
border: none;
}
pre {
background: $pre-background;
border: none;
border-left: $pre-left-border;
border-radius: 0;
overflow: $pre-overflow;
// On Android Chrome, if there are wide pre blocks in the document, dialogs are not opened correctly because
// the page width is the maximum of the widths of the pre blocks. This forces horizontal scrolling for all pre
// blocks, fixing the issue.
@media screen and (max-width: $screen-xs-max) {
// overflow-x: scroll;
}
code {
white-space: pre;
font-size: $block-code-size;
}
}
@import "csRun";
}
body.slide-pars {
.content-container > div {
width: 100%;
margin-left: 0;
}
.paragraphs {
margin-left: auto;
margin-right: 0;
}
}
.correct {
background-color: limegreen;
padding: 0.5em;
}
.wrong {
background-color: red;
padding: 0.5em;
}
.height-35 {
height: 35em;
}
.redbutton {
background-color: #990000
}
p.caption {
text-align: center;
}
.material {
background-color: $material-bg;
box-shadow: $material-shadow;
border: $material-border;
border-radius: $material-border-radius;
}
.pluginError, .error {
border: 1px solid red;
background-color: pink;
text-align: left;
}
div.error {
border: 1px solid #ff7777;
border-radius: 2px;
padding: 1em;
background-color: #ffd0d7;
color: #c51a00;
pre {
margin-top: 0.5em;
background-color: #ffe9e9;
border-left-width: 0;
overflow: auto;
}
}
.note {
font-size: 0.7em;
background: $note-bg;
p {
margin-left: 0;
margin-top: 0;
margin-bottom: 5px;
/* display: inline; */
&:last-child {
margin-bottom: 0;
}
}
.timestamp {
color: lightgrey;
}
border-top: 4px solid;
padding-bottom: 5px;
overflow-y: auto;
border-color: $note-public-color;
&.private {
border-color: $note-private-color;
}
}
.notes, .speaker {
position: absolute;
width: $note-width;
top: 0;
right: calc(-#{$note-width} + #{$readline-offset} - 5px);
}
.notes {
ul {
padding-left: 1.5em;
}
}
.text-smaller {
font-size: smaller;
}
.headerlink {
float: right;
visibility: hidden;
font-size: small;
.header-name {
display: none;
cursor: copy;
color: $link-color;
font-size: 0.8em;
}
&.cnt-labels {
font-size: 0.8em;
margin-top: -1.5em;
}
}
*:hover > .headerlink {
visibility: inherit;
}
.editmode .headerlink {
visibility: inherit;
position: relative;
z-index: 10;
&.cnt-labels {
color: $link-color;
span.cnt-label {
cursor: copy;
}
}
&:not(.anchor) .header-name {
display: inline;
}
}
.parContent {
position: relative;
}
.previewDiv {
min-width: 50%;
max-width: 100%;
clear: both;
border-radius: 5px;
background: inherit;
.editline, .readline {
display: none;
}
.par {
margin-left: 0;
margin-right: 0;
}
}
.pastePreview {
@extend .previewDiv;
min-width: 0;
max-height: 10em;
overflow-x: hidden;
overflow-y: auto;
}
.border {
border: 1px solid $basic-border-color;
border-radius: 0;
}
.background {
background-color: $material-bg;
}
.previewcontent, .previeworiginalcontent {
@extend .border;
clear: both;
overflow-y: auto;
background-color: $material-bg;
min-height: 1em;
max-height: 30em;
padding-left: 2em;
padding-right: 2em;
min-width: inherit;
margin-left: auto;
.timMenu .tim-menu-dropdown {
position: fixed;
z-index: 100;
}
}
.timButton, .editorButton {
@extend .btn, .btn-primary;
&.btn-toggled {
background-color: $button-toggle-color;
}
}
a.timButton {
color: $bg-color; /* TODO: Here button basic color, but where to find it??? */
}
.editMenuButton {
width: 100%;
}
.languageLists{
display:flex;
}
.languageLists div {
margin-right: 3em;
}
/* TODO: Make this a bit nicer for wider screens without losing its scalability for narrower screen (such as mobile screens) */
.languageLists select {
min-width: 8em;
overflow: auto;
}
.uiContainer table, .uiContainer td, .uiContainer tr, .uiContainer th {
border: none !important;
padding: 0;
font-size: small;
color: $basic-color;
margin-left: 1em;
}
.readline {
position: absolute;
right: $readline-offset;
z-index: 3;
width: $readline-width;
height: 100%;
top: 0;
border-right: 0.5em solid;
border-color: $readline-color;
}
.readsection {
position: absolute;
right: $readline-offset - 1em;
color: $readline-color;
cursor: pointer;
}
.timFixed {
position: fixed;
right: 0;
top: 50px;
}
.editline {
position: absolute;
left: -$editline-width - $editline-extra;
z-index: 3;
width: $editline-width;
height: 100%;
top: 0;
display: var(--editline-display, none);
@media (max-width: 870px) { /* for ipdas because of outend headings */
left: -($editline-width / 2);
width: $editline-width / 2;
}
@media (max-width: $screen-xs-max) {
left: -$grid-gutter-width / 3 - $focus-bar-width;
width: $grid-gutter-width / 3;
}
&:hover, &.menuopen {
opacity: 0.5;
background: $editline-bg-color;
}
}
#pars.editmode {
.par.areacollapse, .par.areaexpand {
.editline {
display: block;
}
}
}
.editmode {
[data-area]::before {
content: "Area name: " attr(data-area);
color: gray;
}
[data-area]::after {
content: "End area: " attr(data-area);
color: gray;
}
.areaContent {
border: 1px solid $basic-color;
border-radius: 5px;
.parContent {
min-height: 20px;
}
& > .par:first-child > .parContent::before {
content: 'Area start paragraph';
font-size: $font-size-base;
font-style: italic;
color: gray;
}
& > .par:last-child > .parContent::before {
content: 'Area end paragraph';
font-size: $font-size-base;
font-style: italic;
color: gray;
}
margin-bottom: 3px;
}
.areaexpand {
border: 1px solid $basic-color;
border-radius: 5px;
margin-bottom: 3px;
}
.areacollapse {
border: 1px solid $basic-color;
border-bottom: none;
border-radius: 5px 5px 0 0;
.areatitle p {
margin: 0;
}
& + .area {
.areaContent::before {
content: unset;
}
.par:first-child > .parContent::before {
content: unset;
}
.areaContent {
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
}
}
.areacollapse, .areaexpand {
cursor: pointer;
padding-left: 1.5em;
}
.areacollapse > .readsection {
display: none;
}
.areaexpand, .areacollapse {
& > .glyphicon {
position: absolute;
font-size: 18px;
left: 0em; /* -$editline-width - 0.5em; */
color: $areacollapse-color;
z-index: 5; /* to be top of editline */
}
}
.par {
position: relative;
& > .headerlink {
font-size: large;
position: relative;
right: -0.8em;
top: 0.5em;
}
&.lightselect {
background-color: $lightselect-color;
}
&.selected {
background-color: $parselect-color;
}
&.marked {
background-color: rgba(134, 217, 209, 0.35);
}
.readline {
border-color: rgb(255,102,0); /* rgb(236,103,27); */
&:hover {
background: rgba(255,102,0,0.5);
border-color: transparent;
}
&.read {
display: none;
}
&.read-modified {
border-color: yellow;
& > button {
display: none;
}
&:hover {
background: rgba(255,255,0,0.5);
border-color: transparent;
& > button {
display: block;
float: right;
position: relative;
}
}
}
}
&.noscroll pre {
overflow: visible;
}
}
tim-par-ref {
float: right;
position: absolute;
top: 0;
right: -15px;
.tooltip-inner {
max-width: 50vw;
}
}
a {
cursor: pointer;
}
sub {
font-size: 0.8em;
/* gecko-pohjaisilla selaimilla sub nakyy liian ylhaalla, ellei fonttia pienenna */
}
br {
margin: 0;
padding: 0;
line-height: 0.4; /* pienempi vali monisteen kansia varten */
}
.font-weight-normal {
font-weight: normal;
}
.editor {
padding: 5px 0;
border-radius: 5px;
}
.editorContainer {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow-x: auto;
}
pareditor {
display: block;
background: inherit;
.choices {
display: inline-block;
}
.helpButton {
/* font-size: large; */
}
.tab-content > .active {
display: flex;
align-items: center;
flex-wrap: wrap;
.form-control {
width: auto;
flex: 1 0 auto;
}
}
.formula-editor-tab {
width: 100%;
}
}
.editButtonArea {
margin-bottom: 0.6em;
}
.editorButton {
margin: 2px;
}
.hidingButtonArea {
margin-bottom: 0.6em;
float: right;
}
li.tab.active, li.tab.pinned {
background: $tab-bg-color;
}
li.tab.active a, li.tab.pinned a {
color: white;
}
input[type="file"] {
margin: 0;
padding: 0;
border: none;
}
input.unsaved, input:focus.unsaved {
border-right-color: gold;
border-right-width: thick;
}
// https://stackoverflow.com/a/4298216
input[type="number"].no-step {
-moz-appearance: textfield;
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
}
.smalllink {
font-size: 50%;
margin-top: -3em;
margin-bottom: 3em;
margin-right: 1em;
text-align: right;
}
.notes:hover, .speaker:hover {
background-color: white;
display: block;
z-index: 9;
}
/* For user list in teacher view ================================*/
.userFixed {
max-height: 90%;
height: clamp(10em, 40%, 90%);
position: fixed;
bottom: 0;
top: 20px;
right: 0;
@media(max-width: $screen-xs-max) {
width: 200px;
}
@media(min-width: $screen-sm-min) {
width: 200px;
}
@media(min-width: $screen-md-min) {
width: 300px;
}
@media(min-width: $screen-lg-min) {
width: 423px;
}
}
.userlist {
$list-max-height: 95vh;
height: 100%;
background-color: #e6e6e6;
padding: 2px;
}
.close {
float: right;
position: relative;
}
/* TODO: check how to prevent too narrow menu better way than min-width */
.actionButtons {
position: absolute;
z-index: 100;
.inner {
@include container-fixed();
white-space: nowrap;
border-radius: 3px;
background-color: #f8f8ff;
min-height: 50px;
min-width: 200px;
}
}
.questionButton {
margin: 0.2em;
}
@media print {
body {
margin: 0;
max-width: 100%;
}
.material {
width: 100%;
}
.readline {
display: none;
}
.parContent {
position: static;
border: 0;
max-width: 100%;
}
.par {
border: 0;
max-width: 100%;
}
.headerlink {
visibility: hidden;
}
/* Harmaa varjo dokumentilta pois */
.material {
box-shadow: none !important;
border: none !important;
}
}
.speaker {
position: absolute;
left: 105%;
width: 400px;
}
.sagecell_editor {
line-height: 13px;
margin-bottom: 8px;
font-size: 10pt;
}
pre.sagecell_pyout {
border: none;
}
pre.sagecell_stdout {
border: none;
}
.borderless {
border-collapse: collapse;
}
.borderless td {
border: none;
outline: none;
}
.fullwidth {
width: 100%;
}
.checkbox-td {
text-align: center;
}
.addBottomContainer {
margin: 0.25em 0 0.25em 1em;
position: relative;
padding-top: 19px;
border-top: 1px solid #e5e5e5;
text-align: center;
padding-bottom: 1em;
}
#teksti {
font-size: 15px;
line-height: 15px;
font-family: Consolas, Monaco, Courier New, Courier, monospace;
height: auto;
width: 100%;
border-radius: 5px;
border: 1px solid $basic-border-color;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#teksti:focus {
outline: none;
}
.lazyHidden {
visibility: hidden;
}
.lazyVisible {
margin-top: 0;
padding-top: 0;
}
.dialog {
position: fixed;
z-index: 6;
border: 1px solid;
background: white;
top: 0;
}
.collapsed {
display: none;
}
.font-medium {
font-size: medium;
}
p.docsettings {
display: none;
}
.shortedit {
max-width: 4.5em;
}
.taskSummary {
margin-bottom: 2em;
border: 2px solid black;
border-radius: 10px;
padding: 1em;
}
.taskSmallSummary {
position: fixed;
left: 5px;
top: 35px;
z-index: 200;
font-size: 9px;
}
.inputSmall {
font-size: 8px;
font-weight: normal;
}
.slides {
code {
white-space: pre;
}
}
.figure {
text-align: center;
}
.runo {
text-align: center;
font-style: italic;
margin-bottom: 2em;
font-size: 0.9em;
td {
text-align: center;
}
.parContent {
text-align: center;
}
}
.wideButton {
@extend .btn, .btn-primary, .btn-block;
}
.table-alias td:first-child {
text-align: right;
}
.table-borderless tbody tr td, .table-borderless tbody tr th, .table-borderless thead tr th {
border: none;
}
.table .table-borderless {
border: none;
}
.total-borderless {
border: none !important;
}
.total-borderless tbody tr td, .total-borderless tbody tr th, .total-borderless thead tr th {
border: none !important;
}
#doctext {
font-family: $font-family-monospace;
}
.notes .note-badge {
position: absolute;
top: 0;
left: -1.2em;
font-size: 1em;
padding: 0px;
padding-left: 2px;
padding-right: 3px;
background-color: #dae1e1;
border-color: #dae1e1;
color: $bg-color;
&.edit-menu-button {
left: -0.2em;
}
i {
color: $bg-color;
}
&:hover {
background-color: $basic-color;
}
}
.point-form {
display: inline;
}
.peer-review-area{
width: 100%;
}
.peer-review-text {
width: 100%;
resize: both;
border: 1px solid;
}
.peer-review-render{
padding: 2px;
white-space: pre-wrap;
overflow-y: auto;
resize: both;
border: 1px solid;
height: 10em
}
.less-opacity {
opacity: 0.66;
}
.selected-tag {
border: 2px solid black;
}
@media (max-width: $screen-xs-max) {
.container-fluid {
padding-left: $container-xs-padding;
padding-right: $container-xs-padding;
}
}
.no-page-break-before {
page-break-before: avoid;
}
.margin-5-right {
margin-right: 5px;
}
.inline-flex {
display: inline-flex;
}
.halfsize {
min-width: 50%;
}
.fullsize {
max-width: 100%;
}
.forceHalfSize{
max-width: 50% !important;
}
.ForceFullSize {
min-width: 100%;
}
.diff {
position: relative;
background-color: #f8f8f8;
max-height: 24em;
a {
position: absolute;
top: 0;
right: 0;
margin: 0.5em 1.5em 0.5em 0.5em;
}
pre {
max-height: 23em; //This has to be kept around 1em (or 50px) lower than diff's max-height or else it overflows over the preview in editor!
border: 0;
ins {
color: black;
background: #bbffbb;
}
del {
color: black;
background: #ffbbbb;
}
}
}
.sidebyside {
display: flex;
flex-direction: row;
}
.stacked {
display: flex;
flex-direction: column;
}
answerbrowser {
display: block;
text-align: left;
&.has-answers {
min-height: 23px;
}
font-size: 14px;
.ab-option-row > form > label, .ab-option-row span {
margin-right: 10px;
}
.ab-option-row > form > button {
margin-right: 10px;
margin-left: -10px
}
.inline {
display: inline;
vertical-align: middle;
}
}
.inlineEditorDiv .timButton {
margin: 0px;
padding: 4px 8px 3px 8px;
}
.inlineEditorDiv {
background: white;
display: inline-block;
border-radius: 5px;
/* position: fixed; */
}
tim-user-list {
display: block;
height: calc(100% - #{13px * $line-height-base});
}
.tim-menu img {
vertical-align: baseline;
display: inline-block;
}
.hide-link-colors a {
color: inherit;
}
.tab-content {
border-bottom: lightgray;
border-bottom-style: solid;
border-bottom-width: thin;
}
.reveal {
.hideinslide {
display: none;
}
}
.showonlyslide {
display: none;
}
.reveal {
.showonlyslide {
display: unset;
}
}
.parContent:focus {
box-shadow: -$focus-bar-width 0 $focus-bar-color;
outline: none;
}
.editline:focus {
outline: $focus-bar-color solid 2px;
}
.view-range-container {
text-align: center;
}
.view-range-buttons {
margin: 0 auto;
display: block;
}
.rights-list {
.lastEdited {
background-color: #e3e3e3;
border-radius: 3px;
}
.name {
white-space: nowrap;
}
.flex {
& > * {
margin-right: 5px;
}
& > .action-btn {
display: flex;
}
& > .label {
font-weight: normal;
}
}
}
[hidden] {
display: none !important;
}
.toolbarButton {
@extend .timButton;
color: black;
background-color: white;
}
.disableSelect {
user-select: none; /* supported by Chrome and Opera */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
}
// Simulates a "normal space"
.space-right {
margin-right: 0.3em;
}
.text-color-normal {
color: $text-color;
}
td-ngx-text-diff .view-source {
td {
&.line-number-col, &.line-number-col-left, &.prefix-col {
display: none;
}
&.content-col {
font-family: "courier new", courier, monospace;
line-height: unset;
}
}
}
.normalLabel {
font-weight: normal;
}
tim-rights-editor {
span.obsolete {
text-decoration: line-through;
}
}
// Global access from switch-button.component.ts
.toggle-margin-left {
margin-left: 0;
.paragraphs {
margin-left: 0;
}
}
// Style for translation-tab in parEditor
#translationTab{
display: flex;
align-items: baseline;
span{
display: inline-block;
}
& > * {
margin: 2px;
}
}
// Acts like .sr-only but uses a more sensible name for elements that need to be hidden
// conditionally.
.soft-hidden {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
.lazy-answer-inactive {
opacity: 0.3;
}