Skip to content

Commit

Permalink
Split reveal.js CSS into another stylesheet
Browse files Browse the repository at this point in the history
  • Loading branch information
@georgestagg
georgestagg committed Sep 19, 2024
1 parent 46f5dea commit aae9b4f
Show file tree
Hide file tree
Showing 4 changed files with 250 additions and 261 deletions.
2 changes: 1 addition & 1 deletion _extensions/live/resources/live-runtime.css
View file

Large diffs are not rendered by default.

260 changes: 0 additions & 260 deletions live-runtime/src/css/live-runtime.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -317,194 +317,6 @@ pre>code.sourceCode span.tok-function-attributeName,
color: var(--exercise-editor-hl-at);
}

/* Revealjs (to match editor with bootstrap) */
/* Container card */
.reveal .d-none {
display: none !important;
}

.reveal .d-flex {
display: flex !important;
}

.reveal .card.exercise-editor .justify-content-between {
justify-content: space-between !important;
}

.reveal .card.exercise-editor .align-items-center {
align-items: center !important;
}

.reveal .card.exercise-editor .gap-1 {
gap: .25rem !important;
}

.reveal .card.exercise-editor .gap-2 {
gap: .5rem !important;
}

.reveal .card.exercise-editor .gap-3 {
gap: .75rem !important;
}

.reveal .card.exercise-editor {
--exercise-font-size: 1.3rem;
margin: 1rem 0;
border: 1px solid rgba(0, 0, 0, 0.175);
border-radius: 0.375rem;
font-size: var(--exercise-font-size);
overflow: hidden;
}

.reveal .card.exercise-editor .card-header {
padding: 0.5rem 1rem;
background-color: var(--exercise-cap-bg);
border-bottom: 1px solid rgba(0, 0, 0, 0.175);
}

/* Output */
.reveal .cell-output-webr.cell-output-display,
.reveal .cell-output-pyodide.cell-output-display {
text-align: center;
}

/* Button styling */
.quarto-light .reveal .btn.btn-exercise-editor.btn-primary {
--exercise-btn-bg: var(--bs-btn-bg, #0d6efd);
--exercise-btn-color: var(--bs-btn-color, #ffffff);
--exercise-btn-border-color: var(--bs-btn-border-color, #0d6efd);
--exercise-btn-hover-border-color: var(--bs-btn-hover-border-color, #0b5ed7);
--exercise-btn-hover-bg: var(--bs-btn-hover-bg, #0b5ed7);
--exercise-btn-hover-color: var(--bs-btn-hover-color, #ffffff);
}

.quarto-dark .reveal .btn.btn-exercise-editor.btn-primary {
--exercise-btn-bg: var(--bs-btn-bg, #375a7f);
--exercise-btn-color: var(--bs-btn-color, #ffffff);
--exercise-btn-border-color: var(--bs-btn-border-color, #375a7f);
--exercise-btn-hover-border-color: var(--bs-btn-hover-border-color, #2c4866);
--exercise-btn-hover-bg: var(--bs-btn-hover-bg, #2c4866);
--exercise-btn-hover-color: var(--bs-btn-hover-color, #ffffff);
}

.quarto-light .reveal .btn.btn-exercise-editor.btn-outline-dark {
--exercise-btn-bg: var(--bs-btn-bg, transparent);
--exercise-btn-color: var(--bs-btn-color, #333);
--exercise-btn-border-color: var(--bs-btn-border-color, #333);
--exercise-btn-hover-border-color: var(--bs-btn-hover-border-color, #333);
--exercise-btn-hover-bg: var(--bs-btn-hover-bg, #333);
--exercise-btn-hover-color: var(--bs-btn-hover-color, #ffffff);
}

.quarto-dark .reveal .btn.btn-exercise-editor.btn-outline-dark {
--exercise-btn-bg: var(--bs-btn-bg, transparent);
--exercise-btn-color: var(--bs-btn-color, #f8f8f8);
--exercise-btn-border-color: var(--bs-btn-border-color, #f8f8f8);
--exercise-btn-hover-border-color: var(--bs-btn-hover-border-color, #f8f8f8);
--exercise-btn-hover-bg: var(--bs-btn-hover-bg, #f8f8f8);
--exercise-btn-hover-color: var(--bs-btn-hover-color, #000000);
}

/* Hide button label on small devices */
@media only screen and (max-width: 576px) {
:not(.reveal) .card-header .btn-exercise-editor>.btn-label-exercise-editor {
max-width: 0px;
margin-left: -4px;
overflow: hidden;
transition: max-width 0.2s ease-in, margin-left 0.05s ease-out 0.2s;
}
:not(.reveal) .card-header .btn-exercise-editor:hover>.btn-label-exercise-editor {
position: inherit;
max-width: 80px;
margin-left: 0;
transition: max-width 0.2s ease-out 0.05s, margin-left 0.05s ease-in;
}
}

/* Buttons under revealjs */
.reveal .card.exercise-editor .btn-group {
border-radius: .375rem;
position: relative;
display: inline-flex;
vertical-align: middle;
}

.reveal .card.exercise-editor .btn-group>.btn {
position: relative;
flex: 1 1 auto;
}

.reveal .card.exercise-editor .btn-group>:not(.btn-check:first-child)+.btn,
.reveal .card.exercise-editor .btn-group>.btn-group:not(:first-child) {
margin-left: calc(1px*-1)
}

.reveal .card.exercise-editor .btn-group>.btn:not(:last-child):not(.dropdown-toggle),
.reveal .card.exercise-editor .btn-group>.btn.dropdown-toggle-split:first-child,
.reveal .card.exercise-editor .btn-group>.btn-group:not(:last-child)>.btn {
border-top-right-radius: 0;
border-bottom-right-radius: 0
}

.reveal .card.exercise-editor .btn-group>.btn:nth-child(n+3),
.reveal .card.exercise-editor .btn-group>:not(.btn-check)+.btn,
.reveal .card.exercise-editor .btn-group>.btn-group:not(:first-child)>.btn {
border-top-left-radius: 0;
border-bottom-left-radius: 0
}

.reveal .btn.btn-exercise-editor {
display: inline-block;
padding: 0.25rem 0.5rem;
font-size: 1rem;
color: var(--exercise-btn-color);
background-color: var(--exercise-btn-bg);
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
user-select: none;
border: 1px solid var(--exercise-btn-border-color);
border-radius: 0.375rem;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.reveal .btn.btn-exercise-editor:hover {
color: var(--exercise-btn-hover-color);
background-color: var(--exercise-btn-hover-bg);
border-color: var(--exercise-btn-hover-border-color);
}

.reveal .btn.btn-exercise-editor:disabled,
.reveal .btn.btn-exercise-editor.disabled,
.reveal .btn-exercise-editor fieldset:disabled .btn {
pointer-events: none;
opacity: 0.65;
}

/* Spinner */
.reveal .card.exercise-editor .spinner-grow {
background-color: currentcolor;
opacity: 0;
display: inline-block;
width: 1.5rem;
height: 1.5rem;
vertical-align: -0.125em;
border-radius: 50%;
animation: 0.75s linear infinite spinner-grow;
}

@keyframes spinner-grow {
0% {
transform: scale(0)
}

50% {
opacity: 1;
transform: none
}
}

/* Output cells */
div.exercise-cell-output.cell-output-stdout pre code,
div.exercise-cell-output.cell-output-stderr pre code {
Expand Down Expand Up @@ -567,78 +379,6 @@ div.cell-output-display canvas {
}
}

.reveal .alert.exercise-grade {
font-size: .55em;
position: relative;
padding: 1rem 1rem;
margin: 1rem 0;
border-radius: 0.25rem;
color: var(--exercise-alert-color);
background-color: var(--exercise-alert-bg);
border: 1px solid var(--exercise-alert-border-color);
}

.reveal .alert.exercise-grade .alert-link {
font-weight: 700;
color: var(--exercise-alert-link-color);
}

.quarto-light .reveal .exercise-grade.alert-info {
--exercise-alert-color: #055160;
--exercise-alert-bg: #cff4fc;
--exercise-alert-border-color: #9eeaf9;
--exercise-alert-link-color: #055160;
}

.quarto-light .reveal .exercise-grade.alert-success {
--exercise-alert-color: #0a3622;
--exercise-alert-bg: #d1e7dd;
--exercise-alert-border-color: #a3cfbb;
--exercise-alert-link-color: #0a3622;
}

.quarto-light .reveal .exercise-grade.alert-warning {
--exercise-alert-color: #664d03;
--exercise-alert-bg: #fff3cd;
--exercise-alert-border-color: #ffe69c;
--exercise-alert-link-color: #664d03;
}

.quarto-light .reveal .exercise-grade.alert-danger {
--exercise-alert-color: #58151c;
--exercise-alert-bg: #f8d7da;
--exercise-alert-border-color: #f1aeb5;
--exercise-alert-link-color: #58151c;
}

.quarto-dark .reveal .exercise-grade.alert-info {
--exercise-alert-color: #ffffff;
--exercise-alert-bg: #3498db;
--exercise-alert-border-color: #3498db;
--exercise-alert-link-color: #ffffff;
}

.quarto-dark .reveal .exercise-grade.alert-success {
--exercise-alert-color: #ffffff;
--exercise-alert-bg: #00bc8c;
--exercise-alert-border-color: #00bc8c;
--exercise-alert-link-color: #ffffff;
}

.quarto-dark .reveal .exercise-grade.alert-warning {
--exercise-alert-color: #ffffff;
--exercise-alert-bg: #f39c12;
--exercise-alert-border-color: #f39c12;
--exercise-alert-link-color: #ffffff;
}

.quarto-dark .reveal .exercise-grade.alert-danger {
--exercise-alert-color: #ffffff;
--exercise-alert-bg: #e74c3c;
--exercise-alert-border-color: #e74c3c;
--exercise-alert-link-color: #ffffff;
}

.alert.exercise-grade p:last-child {
margin-bottom: 0;
}
Expand Down
Loading

0 comments on commit aae9b4f

Please sign in to comment.