---
---
@import "./fontsmain.scss";
$font-size: 15px;
$tutorial-box-spacing: 1rem;
:root {
--color-background: #fff;
--text-color: #292b2c;
--text-color-muted: #555; // AA :(
--text-color-inverted: #eee;
// Allow overriding this separately, should generally default to same
// as textcolour because box titles are still light in every theme.
--text-color-boxtitle: var(--text-color);
--slide-heading-color: var(--text-color); // Slides
--code-foreground: #fff;
--code-background: #000;
--border-light: #ddd;
--hyperlink: #0056b3;
--hyperlink-hover: #004590;
// From Galaxy
--brand-color: #2c3143;
--brand-color-contrast: #fff;
--navbar-border-size: 1px;
--navbar-border-color: transparent;
--navbar-item-background: transparent;
--navbar-item-hover: transparent;
// Basically only for the breadcrumbs.
--secondary-color: #f2d57c;
--secondary-color-text: #000;
// A11y
--outline-color: red;
--h1-theme-before: "";
--h1-theme-after: "";
--h2-theme-before: "";
--h2-theme-after: "";
--border: #888;
--color-disabled: #ccc;
// Boxes
--overview-color: #8A9AD0;
--agenda-color: #86D486;
--keypoints-color: #FFA1A1;
--tip-color: #FFE19E;
--warning-color: #de8875;
--comment-color: #ffecc1;
--handson-color: #dfe5f9;
--question-color: #8A9AD0;
--solution-color: #B8C3EA;
--details-color: #ddd;
--feedback-color: #86D486;
--code-color: #86D486;
--code-out-color: #fb99d0;
// Rainbow buttons for stats and GTA
//--rainbow-red: #f2002b;
--rainbow-orangered: #f64021;
--rainbow-orange: #f98016;
--rainbow-orangeyellow: #fcc00b;
//--rainbow-yellow: #ffff00;
--rainbow-green: #00cc66;
--rainbow-blue: #6381dd;
--rainbow-purple: #a74ee1;
--rainbow-violet: #f04ac5;
--rainbow-pink: #e8aed6;
}
body[data-brightness="light"][data-light_theme="yellow"] {
--color-background: #ffe;
--text-color: #111;
}
body[data-brightness="dark"] {
--color-background: #000;
--color-foreground: #fff;
--text-color: #fff;
--text-color-muted: #aaa;
--border: #aaa;
--hyperlink-hover: #fff;
--hyperlink: #7bf;
--slide-heading-color: #eee;
--secondary-color: #222;
--secondary-color-text: var(--text-color);
}
// Add a white background to transparent gif as it was causing a visualization issue
body[data-brightness="dark"] img[src$=".gif"] {
background-color: #fff;
}
body[data-brightness="dark"][data-dark_theme="night"] {
--color-background: #444;
--color-disabled: #222;
--text-color: #ccc;
}
body[data-brightness="dark"][data-dark_theme="midnight"] {
--color-disabled: #222;
}
// High Contrast
body[data-contrast="high"] {
--border: #000;
--text-color-muted: var(--text-color) !important;
--navbar-border-color: var(--text-color);
}
body[data-contrast="high"][data-brightness="dark"] {
--border: #fff;
}
// Low Contrast
body[data-contrast="low"] {
--border: #ddd;
}
body[data-contrast="low"][data-brightness="dark"] {
--border: #333;
}
body[data-font_main="comic-sans"] {
font-family: "Comic Sans MS", cursive, sans-serif;
}
body[data-font_main="open-dyslexic"] {
font-family: "OpenDyslexic", "Open Dyslexic", serif;
}
body[data-font_code="comic-sans"] {
pre, code {
font-family: "Comic Mono", monospace;
}
}
// All of our themes
@import "./themes.scss";
select {
// .form-control is more specific than select
border: 1px solid var(--border) !important;
background: var(--color-background) !important;
color: var(--text-color) !important;
&:disabled {
background: var(--color-disabled) !important;
color: var(--text-color-muted) !important;
}
}
hr {
border-top: var(--navbar-border-size) solid var(--border) !important;
}
.table thead th {
border-top: 2px solid var(--border) !important;
border-bottom: 2px solid var(--border) !important;
}
.table td, .table th {
border-top: 1px solid var(--border) !important;
}
/* SLIDES */
@import "./slides.scss";
/* SYNTAX */
@import "./syntax_highlighting.scss";
/* Other CSS libraries we use */
// If you use .css (i.e. from the file extension) it will use a CSS import
// which triggers multiple requests.
@import "./academicons";
@import "./bootstrap.min";
@import "./bootstrap-toc.min";
@import "./leaflet-1.9.3";
@import "../fontawesome/css/all.min";
@import "./[email protected]";
// palette
// Boxes
.color-overview { background: var(--overview-color); }
.color-agenda { background: var(--agenda-color); }
.color-keypoints { background: var(--keypoints-color); }
.color-tip { background: var(--tip-color); }
.color-warning { background: var(--warning-color); }
.color-comment { background: var(--comment-color); }
.color-handson { background: var(--handson-color); }
.color-question { background: var(--question-color); }
.color-solution { background: var(--solution-color); }
.color-details { background: var(--details-color); }
.color-feedback { background: var(--feedback-color); }
.color-code { background: var(--code-color); }
.color-code-out { background: var(--code-out-color); }
//.color-rainbow-red { background: var(--rainbow-red); color: black; }
.color-rainbow-orangered { background: var(--rainbow-orangered); color: black; }
.color-rainbow-orange { background: var(--rainbow-orange); color: black; }
.color-rainbow-orangeyellow { background: var(--rainbow-orangeyellow); color: black; }
//.color-rainbow-yellow { background: var(--rainbow-yellow); color: black }
.color-rainbow-green { background: var(--rainbow-green); color: black; }
.color-rainbow-blue { background: var(--rainbow-blue); color: black; }
.color-rainbow-purple { background: var(--rainbow-purple); color: black; }
.color-rainbow-violet { background: var(--rainbow-violet); color: black; }
.color-rainbow-pink { background: var(--rainbow-pink); color:black;}
body {
font-family: "Atkinson Hyperlegible",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
background: var(--color-background);
color: var(--text-color);
h1::before { content: var(--h1-theme-before) };
h1::after { content: var(--h1-theme-after) };
h2::before { content: var(--h2-theme-before) };
h2::after { content: var(--h2-theme-after) };
font-size: $font-size;
word-wrap: break-word;
position: relative;
}
@mixin tutorial-box ($bg-color) {
margin-top: 4 * $tutorial-box-spacing;
// Legacy
padding: ($tutorial-box-spacing - 0.4rem) ($tutorial-box-spacing - 0.11rem) $tutorial-box-spacing;
border: 1px solid $bg-color;
box-shadow: 3px 3px $bg-color;
// The new replacement
& > h3:not(.nobox),
> .box-title {
font-size: $font-size + 3;
margin-inline-start: -$tutorial-box-spacing;
margin-inline-end: -$tutorial-box-spacing;
margin-top: -3.30rem;
padding-top: calc($tutorial-box-spacing / 2);
padding-bottom: calc($tutorial-box-spacing / 2);
padding-inline-start: $tutorial-box-spacing;
padding-inline-end: $tutorial-box-spacing;
background-color: $bg-color;
color: var(--text-color-boxtitle);
vertical-align: 1em;
float: inline-start;
border: 1px solid $bg-color;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
.fa {
padding-right: calc($tutorial-box-spacing / 5);
}
button {
background: transparent;
border: none;
cursor: pointer;
}
}
}
@mixin matrix-table (){
table {
width:unset;
margin-left:auto;
margin-right:auto;
margin-top: 20pt;
}
table thead th {
border-bottom: 2px solid #777;
text-align: left;
}
table td:first-child, table th:first-child {
border-right: 2px solid #777;
font-weight: bold;
text-align: left;
}
table td:not(first-child), table th:not(first-child) {
text-align: center;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
}
}
// When boxes are collapsed, they add or remove this class
// However when someone wants to print the GTN document, we should make all
// boxes visible, no matter what their collapse state.
@media screen {
.box-collapsed {
display: none !important; // important Overrides specifically one case of a learning pathway FAQ where we use some custom display already to get objects floating correctly in the snippet.
}
}
// When someone is printing this
@media print {
// Used for hiding the TOC on tutorials
.hide-when-printing {
display: none;
}
// Don't break over a page boundary if possible
h2,h3,h4,h5,h6,h7,h8 {break-after: avoid-page;}
img, svg, table, canvas {break-inside: avoid;}
// Fun fact: paper is not clickable.
// This is mostly applicable for folks printing tutorials which they
// probably shouldn't be doing anyway but just in case.
section#tutorial-content {
a::after {content: " (" attr(href) ")";}
blockquote.agenda {
a::after {content: unset;}
}
}
// Save ink.
pre.highlight {
background: none !important;
color: var(--text-color) !important;
.na { color: #32440d !important; }
.sb, .sc, .sd, .s2, .sh, .si, .sx, .sr, .s1, .ss, .s, .sa, .dl {
color: #664 !important;
}
.c, .ch, .cd, .cpf, .cm, .c1 {
color: #333 !important;
}
.gh, .go,
.nb, .ni, .nn, .vc, .vg, .vi, .nv, .vm, .w, .bp,
.kn, .ow, .o, .nt {
color: #222 !important;
}
.gp {
color: #378 !important;
}
}
}
div#theme-selector,div#lang-selector,div#archive-selector {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 200px;
justify-content: flex-start;
margin-inline-start: 1em;
label.btn,a.btn,button.btn {
margin: 0.1em;
border: 1px solid var(--theme-color);
}
}
@mixin input-nicer($color) {
}
h1, h2, h3, h4 {
margin-top: 2rem;
}
img {
max-width: 95%;
margin: 2.5%;
}
ol.toots {
li.toot {
display: flex;
flex-direction: column;
}
img {
width: 46px !important;
height: 46px !important;
}
a.user.boost img {
width: 23px !important;
height: 23px !important;
}
}
div.main-content {
img {
height: auto;
width: auto;
}
}
figure {
text-align: center;
margin: 2rem;
border: thin silver solid;
padding: 1rem;
display: flex;
flex-direction: column;
& > img {
margin-bottom: 1rem;
height: auto;
}
& > iframe {
margin: auto;
}
figcaption {
text-align: justify;
}
}
@media (max-width:992px) {
figure {
margin: 1rem;
}
}
:not(pre) > code {
color: var(--code-foreground);
background: var(--code-background);
border: 1px solid var(--text-color-muted);
border-radius: 0.25rem;
}
pre.highlight {
padding: 1rem;
background-color: var(--code-background);
color: var(--code-foreground);
border: 1px solid var(--text-color-muted);
@include syntax-dark;
code > ::selection {
color: var(--code-background);
background: var(--code-foreground);
}
}
/* Make the @@ portions of diffs, which indicate area, much more visible */
div.language-diff .p {
border-top: 1px solid #66d9ef;
border-bottom: 1px solid #66d9ef;
border-left: 5px solid #66d9ef;
border-right: 5px solid #66d9ef;
font-weight: 900;
line-height: 3em;
margin-right: 1em;
padding-left: 1em;
padding-right: 1em;
}
body > footer {
margin-top: 5em;
}
footer {
color: var(--text-color-muted);
font-size: $font-size - 2;
}
.follow-up {
p {
font-size: 18px;
}
}
nav.navbar {
background-color: var(--brand-color) !important;
color: var(--brand-color-contrast);
border-bottom-style: solid;
border-bottom-width: var(--navbar-border-size);
border-bottom-color: var(--navbar-border-color);
padding: 0;
&.navbar-dark .navbar-brand,
&.navbar-dark .navbar-nav .nav-link{
color: var(--brand-color-contrast);
}
a {
border: none;
}
.navbar-brand, .navbar-nav li {
padding: 0.5em;
background: var(--navbar-item-background);
&:hover {
background: var(--navbar-item-hover);
}
}
a.navbar-brand {
padding-right: 2.5em; // the image seems to work poorly with parent size calculations.
}
// Text decoration not necessary for accessibility here.
a {
text-decoration: none;
}
.navbar-collapse {
justify-content: flex-end;
align-items: flex-end;
min-width: 0;
}
}
input.nicer {
background: transparent;
border: none;
border-radius: 0px;
padding: 0.4em 0 0 0;
color: var(--text-color);
border-bottom: 2px solid var(--text-color);
&::placeholder {
color: var(--text-color-muted);
}
&:focus, &:active {
background: #fff2;
text-decoration: underline;
}
}
nav input.nicer {
color: var(--brand-color-contrast);
border-bottom: 2px solid var(--brand-color-contrast);
&::placeholder {
color: var(--brand-color-contrast);
}
&:focus, &:active {
color: var(--brand-color-contrast);
border-bottom: 2px solid var(--brand-color-contrast);
}
}
#search-input {
margin-right:1em;
}
/*
#search-container input.nicer {
@include input-nicer(black);
}
*/
.main-content {
padding-top: 1rem;
}
.table {
td {
vertical-align: middle;
}
.fa {
font-size: $font-size + 5;
}
}
.training-network-map {
width: 90%;
margin: 0 auto;
}
.faqs{
h4.faq-area{
color: var(--text-color-muted);
i {
font-size: 0.5em;
}
}
h3{
a{
color: var(--text-color);
}
}
}
.tutorial {
& > h1:first-child {
margin-bottom: 1rem;
}
table:not(.contributions) {
display: block;
width: 100%;
overflow-x: auto;
max-width: 100%;
margin-bottom: 1rem;
th,
td {
padding: .75rem;
vertical-align: top;
border-top: 1px solid #eceeef;
}
thead th {
vertical-align: bottom;
border-bottom: 2px solid #eceeef;
}
}
div.container blockquote {
ul, p, li > p:last-child {
margin-bottom: 0.5rem;
}
p:last-child {
margin-bottom: 0;
}
}
.google-form {
width: 100%;
height: 1100px;
border: 0;
}
}
// tutorial boxes
blockquote {
ul,
ol,
& > blockquote,
li p {
margin-bottom: 0px;
}
img {
display: block;
}
&.agenda {
@include tutorial-box(var(--agenda-color));
}
&.tip {
@include tutorial-box(var(--tip-color));
}
&.question {
@include tutorial-box(var(--question-color));
}
&.code-in {
@include tutorial-box(var(--code-color));
}
&.code-out {
@include tutorial-box(var(--code-out-color));
}
&.code-max-300 {
pre {
max-height: 300px
}
}
&.solution {
@include tutorial-box(var(--solution-color));
}
&.comment {
@include tutorial-box(var(--comment-color));
}
&.hands_on, &.hands-on {
@include tutorial-box(var(--handson-color));
}
&.key_points {
@include tutorial-box(var(--keypoints-color));
}
&.overview {
@include tutorial-box(var(--overview-color));
margin-top: 5rem;
}
&.warning {
@include tutorial-box(var(--warning-color));
}
&.details {
@include tutorial-box(var(--details-color));
}
&.quote {
border-inline-start: 5px solid var(--brand-color);
padding-inline-start: 1em;
}
&.spoken {
display: none;
}
&.hidden {
display: none;
}
&.matrix {
@include matrix-table();
}
&.feedback{
@include tutorial-box(var(--feedback-color));
}
}
.fold-unfold {
margin-inline-start: $tutorial-box-spacing;
}
.pre-break-lines code {
white-space: pre-wrap;
}
.card{
background: transparent;
border: 1px solid var(--border-light);
.card-title {
color: var(--brand-color-contrast);
// margin-left: -15px; // BS has a 15px margin on cards, this makes the card title fill the card.
// margin-right: -15px;
}
}
.card.setup-card {
.card-title{
color: var(--text-color);
}
}
.card:not(.setup-card){
.card-title {
background: var(--brand-color);
padding: 1.25rem;
}
.card-body {
padding: 0em;
flex: 0 1 auto; // Override BS for the workflow listing.
// We stripped the padding from the card body in the above line
// Thus we need to add it back via margins to each element.
// We have to manually exclude the card titles
// And also canvases because they apparently calculate their area before the CSS has finished.
& > :not(.card-title,canvas){
margin-left: 1em;
margin-right: 1em;
}
}
}
.pathwaylist{
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
margin-bottom: 2rem;
.pathwayitem {
background: transparent;
.card{
margin-bottom: 1em;
}
.card-body{
height: 17rem;
overflow: hidden;
}
.card-text{
margin: 1rem;
vertical-align: center;
}
.card-title{
height: 6rem;
}
.card-header {
background: var(--brand-color);
border-bottom: 1px solid var(--border-light);
}
}
.pathwaycover {
width: 100%;
max-height: 100%;
object-fit: contain;
margin-top: 1em;
background-color: white;
border-radius: 2rem;;
padding: 1rem;
-webkit-transition: border 0.2s ease-in-out;
-o-transition: border 0.2s ease-in-out;
transition: border 0.2s ease-in-out;
}
h3 {
margin-top: 0.25rem;
}
}
.newslist {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
margin-bottom: 2rem;
.newsitem {
width: 100%;
background: transparent;
border: 1px solid var(--border-light);
.card-header {
background: var(--brand-color);
border-bottom: 1px solid var(--border-light);
}
}
.newscover {
width: 100%;
object-fit: cover;
margin-top: auto;
margin-bottom: auto;
background-color: white;
border-radius: 2rem;;
padding: 1rem;
-webkit-transition: border 0.2s ease-in-out;
-o-transition: border 0.2s ease-in-out;
transition: border 0.2s ease-in-out;
}
h3 {
margin-top: 1rem;
}
}
.newstable{
div {
margin-top: 0px;
color: var(--text-color) !important;
font-weight: bold;
background: transparent;
a {
background: transparent;
border: 1px solid var(--border-light);
}
a:hover {
border: 1px solid var(--hyperlink);
}
}
p {
margin: 0px;
}
}
.contributors {
padding: 0;
.carousel-item {
align-items: flex-start;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
}
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
display: flex;
}
.hall-of-fame-hero {
margin: 0;
width: 18%;
.name {
font-size: 0.7em;
}
}
}
#feedback-button {
width: 100%;
cursor: pointer;
border: 5px solid transparent;
&:hover {
border: 5px solid var(--hyperlink);
}
img {
margin: 0;
max-width: 100%;
width: 100%;
}
}
.hall-of-fame {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
}
.contributor-page {
img.avatar {
background-color: white;
border-radius: 20px;
// border: 1px solid var(--border-light);
// padding: 5px;
width: 100%;
}
}
.hall-of-fame-hero {
width: 140px;
margin: 1rem;
text-align: center;
.name {
margin-top: 0.5rem;
}
.contact-items {
margin-top: 0.2rem;
}
.thumbnail {
display:inline-block;
img {
background-color: white;
border-radius: 20px;
border: 1px solid var(--border-light);
padding: 5px;
width: 100%;
}
}
a.thumbnail {
&:hover,
&:focus,
&:active {
img {
border-color: var(--brand-color);
}
}
}
}
// This is a fix to get the hamburger button (menu/navbar) correctly placed on
// small screens.
@media (max-width: 575px) {
.navbar > .container {
position: initial;
margin-left: initial;
margin-right: initial;
}
}
// This applies a "dark" style to the dropdown menus on small devices since
// Bootstrap v4 does not do that by default.
.dropdown-menu {
background-color: var(--color-background);
border-color: var(--border);
}
.dropdown-item {
color: var(--text-color);
&:hover, &:focus, &:active {
background-color: var(--brand-color);
color: var(--text-color);
}
}
.dropdown-divider {
border-top-color: var(--border);
}
@media (max-width: 768px) {
.navbar {
.dropdown-menu {
border-color: transparent;
}
.nav-item,
.dropdown-item {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
}
@media (min-width: 768px) {
.tutorial table,
.table-responsive {
display: table;
}
.citation {
text-align: justify;
}
}
@media (max-width: 1200px) {
.navbar-nav i {
display: none;
}
}
:root {
--color-primary: #999;
--color-darker: #777;
--color-dimmed: #555;
}
.label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
line-height: 1;
color: #000;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
border-style: solid;
border-width: 0 2px 1px 0;
background-color: var(--color-primary);
border-color: var(--color-darker);
&:hover {
color: #000;
background-color: var(--color-dimmed);
}
&.label-large {
font-size: 150%;
}
}
.level {
color: lightgray;
margin-right: 0.5em;
.fa {
font-size: 0.9em;
}
&.introductory i:first-of-type {
color: green;
}
&.intermediate i:not(:last-of-type) {
color: orange;
}
&.advanced {
color: red;
}
}
.visually-hidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/* WCAG Contrast. These aim to pass AAA level for normal sized text. */
a {
color: var(--hyperlink);
border-bottom: 1px dotted var(--hyperlink);
&:hover,
&:focus,
&:focus-visible,
&:active {
color: var(--hyperlink-hover);
border-bottom: 1px solid var(--hyperlink-hover);
text-decoration: none;
}
&.btn-info {
color: black;
}
&.badge-info {
color: black;
}
}
// More a11y stuff
.text-muted {
color: var(--text-color-muted) !important;
}
.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
text-decoration: underline;
}
.navbar-dark .navbar-nav .nav-link {
color: white;
}
.gitter-open-chat-button {
background-color: var(--brand-color) !important;
color: var(--brand-color-contrast) !important;
}
nav[data-toggle='toc'] {
margin-top: 30px;
margin-bottom: 30px;
.nav-link:focus, .nav-link:hover {
text-decoration: underline;
}
.nav-link.active,
.nav-link.active:focus,
.nav-link.active:hover {
color: var(--hyperlink);
border-inline-start: 2px solid var(--hyperlink);
}
.nav {
li {
a {
color: var(--text-color-muted);
padding-inline-start: 0px;
&:hover,
&:focus,
&:active {
padding-inline-start: 0px;
color: var(--hyperlink);
border-inline-start: none;
}
}
}
}
}
.col-sm-2 {
padding-inline-start: 0px;
}
/* small screens */
@media screen and (max-width: 768px) {
nav[data-toggle='toc'] {
display: none !important;
}
.col-sm-10 {
max-width: 100%;
}
}
.contributors-line {
color: var(--text-color-muted);
font-size: 1.2em;
display: flex;
flex-wrap: wrap;
align-content: baseline;
line-height: 1.5em;
.contributor-badge {
img {
height: 1.5em;
line-height: 1.5em;
}
i {
height: 1.5em;
line-height: 1.5em;
margin-left: 0.5em;
margin-right: 0.5em;
}
}
.reviewers {
.contributor-badge {
margin: 0;
padding: 0;
img {
margin: 0;
padding: 0;
}
}
}
}
.contributor-badge {
/* prevent breaking across lines */
white-space: nowrap;
display: inline-flex;
flex-direction: row;
align-items: center;
border-radius: 1em;
border: 1px dotted var(--hyperlink);
padding-right: 0.5em;
margin: 0.2em;
line-height: 1em;
flex-shrink: 0;
img {
height: 2em !important;
width: 2em !important;
border-radius: 50%;
margin: 0 0.25em 0 0;
}
&:hover {
background: var(--brand-color);
color: var(--brand-color-contrast);
border: 1px solid var(--hyperlink-hover);
}
}
.contributor-badge-small{
border: none;
padding-right: 0em;
}
.contributor-badge-inline {
/* prevent breaking across lines */
white-space: nowrap;
img {
height: 1em !important;
width: 1em !important;
border-radius: 50%;
margin: 0 0.25em 0 0;
}
}
.funder-badge {
display: flex;
flex-direction: row;
border: 1px solid var(--hyperlink);
color: var(--text-color);
max-width: 24em;
height: 8em;
margin-inline-end: 1em;
margin-bottom: 1em;
padding: 1em;
div.avatar {
display: flex;
align-items: center;
img.funder-avatar {
margin: 0;
padding: 0.5em;
max-height: 8em;
min-width: 8em;
max-width: 8em;
margin-inline-end: 1em;
}
}
div.info {
display: flex;
flex-direction: column;
justify-content: center;
div.name {
font-size: 1.2rem;
}
div.description {
overflow-y: hidden;
font-size: 0.9rem;
}
}
}
table.contributions{
tr td:nth-child(1) {
display: flex;
flex-wrap: wrap;
}
}
div.highlight {
position: relative;
}
div.highlight .btn{
-webkit-transition:opacity .3s ease-in-out;
-o-transition:opacity .3s ease-in-out;
transition:opacity .3s ease-in-out;
opacity:0;
padding:2px 6px;
position:absolute;
right:4px;
top:4px;
}
@media (prefers-reduced-motion) {
.btn {
-webkit-transition: none;
-o-transition: none;
transition: none;
}
}
.btn {
cursor: pointer;
}
div.highlight:hover .btn,div.highlight .btn:focus{
opacity:1
}
#tutorial_list{
h2,h3 {
display: inline;
}
.search_box {
float: inline-end;
i {padding-right: .5rem;}
}
#clear_search{
cursor: pointer;
}
}
ul.supporting_material{
.btn{
padding-inline-start: 0px;
padding-top: 0px;
padding-bottom: 0px;
padding-inline-end: 10px;
font-size: 15px;
}
}
// chrome reports this improves UX by providing better click targets
li {
padding-bottom: 0.2em;
}
.alert-heading {
margin-top: 1rem;
}
// Code In/Out blocks
@media (min-width: 1200px) {
.code-2col{
display: flex;
flex-direction: row;
.code-in {
width: 47.5%;
}
.code-out {
margin-inline-start: 5%;
width: 47.5%;
}
}
}
.card {
margin-top: 1em;
}
// The default presentation
body {
.show-when-galaxy-proxy-active {
// cursor: not-allowed;
display: none;
}
.hide-when-galaxy-proxy-active {
display: unset;
}
span.tool, span.workflow {
border: 1px solid #999;
padding: 2px;
border-radius: 5px;
&:hover {
border: 1px solid blue;
}
}
}
// The fancier presentation when possible
body.galaxy-proxy-active {
.show-when-galaxy-proxy-active {
cursor: pointer;
display: unset;
}
.hide-when-galaxy-proxy-active {
display: none;
}
span.tool, span.workflow {
cursor: pointer;
color: var(--brand-color-contrast);
background-color: var(--brand-color);
border-color: var(--brand-color);
padding: 0.2em 0.5em;
&:hover {
background-color: var(--hyperlink);
border-color: var(--hyperlink);
}
}
}
// Don't have such a wide whitespace surrounding on small screen sizes.
@media (max-width:992px) {
.container {
max-width: unset;
}
}
// Videos
video::cue {
background: #000000cc;
color: white;
}
.playlist {
display: flex;
flex-direction: row;
flex-wrap: wrap;
&.vertical {
flex-direction: column;
}
.pl-item {
width: 16em;
padding: 1em;
display: flex;
flex-direction: column;
.title {
font-weight: 700;
}
.topic {
font-style: italic;
}
.cover {
width: 200px;
}
}
}
#transcript {
height: 400px;
overflow-y: scroll;
tr td:nth-child(1) {
padding-right: 1em;
color: var(--text-color-muted);
}
}
abbr {
// Based on https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr#default_styling
text-decoration: underline dotted;
cursor: help;
font-variant: none;
}
.fdbk {
.card {
.card-title {
font-size: 2rem;
text-align: center;
}
}
.accordion {
margin-top: 20px;
.accordion-card {
margin-top: 0px;
.mb-0{
margin-top: 0px;
}
}
}
}
// Style definition lists a bit more nicely
div.contributors-line {
dl {
display: flex;
flex-wrap: wrap;
margin-bottom: 0;
}
dt {
width: 8em;
text-align: right;
font-weight: initial;
}
dd {
margin-inline-start: auto;
width: calc(100% - 9em);
display: flex;
}
}
// big buttons
a.btn {
display: inline-flex;
align-items: center;
white-space: normal;
div {
width: 100%;
font-size: 1rem;
}
}
$btn-red: #bf4646;
$btn-orange: var(--warning-color);
$btn-yellow: var(--tip-color);
$btn-green: var(--agenda-color);
$btn-blue: var(--handson-color);
$btn-purple: var(--question-color);
$btn-pink: var(--keypoints-color);
.btn-red{
background-color: $btn-red;
color: white;
}
.btn-orange{
background-color: $btn-orange;
color: black;
}
.btn-yellow{
background-color: $btn-yellow;
color: black;
}
.btn-green{
background-color: $btn-green;
color: black;
}
.btn-blue{
background-color: $btn-blue;
color: black;
}
.btn-purple{
background-color: $btn-purple;
color: black;
}
.btn-pink{
background-color: $btn-pink;
color: black;
}
.btn-square-small {
width: 50px !important;
max-width: 100% !important;
max-height: 100% !important;
height: 50px !important;
text-align: center;
padding: 5px;
font-size:0.75rem;
margin: 5px;
}
.btn-square-medium {
width: 100px !important;
max-width: 100% !important;
max-height: 100% !important;
height: 100px !important;
text-align: center;
padding: 5px;
font-size:1rem;
margin: 5px;
}
.btn-square-large {
width: 150px !important;
max-width: 100% !important;
max-height: 100% !important;
height: 150px !important;
text-align: center;
padding: 5px;
font-size:1.25rem;
margin: 5px;
}
.btn-square-extralarge {
width: 200px !important;
max-width: 100% !important;
max-height: 100% !important;
height: 200px !important;
text-align: center;
padding: 5px;
font-size:1.5rem;
margin: 5px;
}
.home-cta-button {
width: 45%;
flex-direction: column;
padding: 5px;
font-size:1.25rem;
margin: 5px;
color: var(--text-color); // don't need to distinguish for wcag.
border: 1px solid var(--border-light);
div {
font-size: 1.3rem !important;
}
&:hover {
box-shadow: 2px 2px 4px var(--text-color);
}
}
.button-group {
display: flex;
align-items: stretch;
flex-wrap: wrap;
justify-content: space-around;
}
.btn-primary {
background-color: var(--brand-color);
border-color: var(--brand-color);
color: var(--brand-color-contrast);
}
.btn-secondary {
background-color: var(--secondary-color);
border-color: var(--secondary-color);
color: var(--secondary-color-text);
}
.btn-success {
background-color: #1d7531; // AA
border-color: #1d7531; // AA
}
/* CYOA */
.gtn-cyoa {
input[type="radio"] {
display: none;
&:checked+label {
background-color: var(--question-color);
}
}
.btn-secondary {
color: var(--text-color);
color: black;
background-color: var(--handson-color);
border-color: transparent;
&:hover {
background-color: var(--solution-color);
}
}
label {
padding: 1em;
display: inline-block;
}
}
.gtn-cyoa-hidden {
height: 0px;
visibility: hidden;
display: none;
padding: 0rem;
}
ul.no-bullets {
list-style: none;
padding-inline-start: 0;
}
ul.text-list, ol.text-list {
list-style: none;
padding-inline-start: 0;
li {
display: inline;
}
}
.gtn-card {
border-radius: 10px;
margin-bottom: 1em;
.card-title {
font-size: 500%;
font-weight: 900;
margin-bottom: 0;
text-align: center;
}
.card-title-small {
font-size: 250%;
font-weight: 900;
margin-bottom: 0;
text-align: center;
}
.card-text {
text-align: center;
font-size: 150%;
padding: 0.3em;
}
.card-text-small {
text-align: center;
font-size: 125%;
padding: 0.3em;
}
}
.dropdown-item {
&:focus-visible {
outline: var(--outline-color) 3px solid;
}
&:focus, &:hover {
background: var(--brand-color);
color: var(--brand-color-contrast);
}
}
.dropdown-item:focus-visible {
}
.dropdown-header {
color: var(--text-color-muted);
}
ol.breadcrumb {
background: var(--secondary-color);
.breadcrumb-item.active {
color: var(--secondary-color-text);
}
}
a[target="_blank"]::after {
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==) " (opens in new tab)";
display: inline-block;
margin-inline-start: 0.2em;
height: 1em;
}
/* Not for figures where it's duplicated */
figure > a[target="_blank"]::after {
content: unset;
}
// For the git-gat learning pathway boxes
#git-gat-timeline {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
#git-gat-timeline li {
display: flex;
flex-direction: column;
border: 1px solid var(--text-color);
border-radius: 5px;
padding: 0.5em;
margin: 0.5em;
}
#git-gat-timeline li.active {
background: #a8ffa8;
}
#git-gat-timeline li.active a {
color: black;
}
#git-gat-timeline li.disabled {
background: #eee;
}
#git-gat-timeline li.disabled a {
color: #555;
}
#git-gat-timeline span {
align-self: center;
}
.logosoup {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
row-gap: 1em;
figure {
max-width: 20em;
margin: 0rem 0.5rem;
border: 0px transparent;
img {
max-height: 5em;
}
figcaption {
text-align: left;
}
}
// Unset this for logos on the homepage
.logo {
border: none;
}
}
section#tutorial-content {
margin-top: 2rem;
}
.eventtable {
th {
font-weight: bold;
}
.eventtable-date{
white-space: nowrap;
}
.eventtable-title {
font-weight: bold;
}
.eventtable-description{
margin-top: 0.25 rem;
font-size: 80%;
}
}
section.event {
.event-image{
margin-bottom: 1em;
}
hgroup {
border: 1px solid var(--border-light);
box-shadow: 0 0 5px var(--border-light);
padding: 0 1rem;
margin-bottom: 2rem;
h1 {
font-weight: 900;
}
p {
text-transform: uppercase;
color: var(--text-color-muted);
}
}
.nav-tabs {
button.nav-link {
font-weight: 800;
}
}
}
.nav-tabs {
// Tabs default to a text colour that isn't overridden somewhere else.
.nav-item {
margin-bottom: 0;
padding-bottom: 0;
border: 1px solid transparent;
&:hover {
color: var(--hyperlink-hover);
border: 1px solid var(--hyperlink-hover);
}
button.nav-link{
color: var(--text-color);
cursor: pointer;
background: none;
font-size: 1.2rem;
border-top-left-radius: 0;
border-top-right-radius: 0;
&:hover {
color: var(--hyperlink-hover);
}
&.active {
background: var(--overview-color);
border: 1px solid var(--overview-color);
color: white;
}
}
}
}
body[data-brightness="dark"] {
img.invert-safe {
filter: invert(1);
}
.modal-content {
button.close {
filter: invert(1);
}
}
}
.modal-dialog {
border: 1px solid var(--border);
.modal-content {
background: var(--color-background);
}
}
.recording {
}
.recording-video {
width: 75%;
iframe, video {
width:100%;
height: 100%;
aspect-ratio: 16 / 9;
}
}
.recording-metadata {
table tbody {
display: block;
}
table tr td {
padding: 0.3em;
width: 100%;
display: table-cell;
}
table tr td:first-child {
text-align: right;
display: table-cell;
width: 25%;
}
table tr td:nth-child(2) {
text-align: left;
display: table-cell;
width: 100%;
}
}
