htwkmooc/codeocean
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Introduce Dark Mode

Browse Source 
This commit mainly changes the color definitions. Mostly, those changes are semantically equally, but there are a few changes that occurred to align the color scheme within the app.
This commit is contained in:
Sebastian Serth
2023-06-02 09:29:43 +02:00
parent aab3b95a1d
commit 944b455194
49 changed files with 582 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/assets/javascripts/application.js
View File

@@ -17,6 +17,7 @@
//
// lib/assets
//= require flash
//= require color_mode_picker
//
// vendor/assets
//= require ace/ace

2
app/assets/javascripts/channels/la_exercises.js
View File

@@ -208,7 +208,7 @@ $(document).on('turbolinks:load', function() {
.html(function(_event, _d) {
const e = rect.nodes();
const i = e.indexOf(this) % learners.length;
return "<strong>Student: </strong><span style='color:orange'>" + learners_name(i) + "</span><br/>" +
return "<strong>Student: </strong><span style='color:var(--bs-warning)'>" + learners_name(i) + "</span><br/>" +
"0: " + learners_time(0, i) + "<br/>" +
"1: " + learners_time(1, i) + "<br/>" +
"2: " + learners_time(2, i) + "<br/>" +

1
app/assets/javascripts/community_solution.js
View File

@@ -20,6 +20,7 @@ $(document).on('turbolinks:load', function() {
CodeOceanEditorSubmissions
)
$(document).on('theme:change:ace', CodeOceanEditor.handleAceThemeChangeEvent.bind(CodeOceanEditor));
$('#submit').one('click', CodeOceanEditorSubmissions.submitCode.bind(CodeOceanEditor));
$('#accept').one('click', CodeOceanEditorSubmissions.submitCode.bind(CodeOceanEditor));
}

9
app/assets/javascripts/editor.js
View File

@@ -19,4 +19,13 @@ $(document).on('turbolinks:load', function(event) {
// Search for insertLines and Turbolinks reload / cache control
CodeOceanEditor.initializeEverything();
}
function handleThemeChangeEvent(event) {
if (CodeOceanEditor) {
CodeOceanEditor.THEME = event.detail.currentTheme === 'dark' ? 'ace/theme/tomorrow_night' : 'ace/theme/tomorrow';
document.dispatchEvent(new Event('theme:change:ace'));
}
}
$(document).on('theme:change', handleThemeChangeEvent.bind(this));
});

38
app/assets/javascripts/editor/editor.js.erb
View File

@@ -2,7 +2,7 @@ var CodeOceanEditor = {
//ACE-Editor-Path
// ruby part adds the relative_url_root, if it is set.
ACE_FILES_PATH: '<%= "#{Rails.application.config.relative_url_root.chomp('/')}/assets/ace/" %>',
THEME: 'ace/theme/textmate',
THEME: window.getCurrentTheme() === 'dark' ? 'ace/theme/tomorrow_night' : 'ace/theme/tomorrow',
//Color-Encoding for Percentages in Progress Bars (For submissions)
ADEQUATE_PERCENTAGE: 50,
@@ -88,13 +88,13 @@ var CodeOceanEditor = {
getCardClass: function (result) {
if (result.file_role === 'teacher_defined_linter') {
return 'card bg-info text-white'
return 'bg-info text-white'
} else if (result.stderr && !result.score) {
return 'card bg-danger text-white';
return 'bg-danger text-white';
} else if (result.score < 1) {
return 'card bg-warning text-white';
return 'bg-warning text-white';
} else {
return 'card bg-success text-white';
return 'bg-success text-white';
}
},
@@ -127,7 +127,7 @@ var CodeOceanEditor = {
if (!filetree.hasClass('jstree-loading')) {
filetree.jstree("deselect_all");
filetree.jstree().select_node(file_id);
filetree.jstree(true).select_node(file_id);
} else {
setTimeout(CodeOceanEditor.selectFileInJsTree.bind(null, filetree, file_id), 250);
}
@@ -309,16 +309,12 @@ var CodeOceanEditor = {
});
}
editor.commands.bindKey("ctrl+alt+0", null);
this.editors.push(editor);
this.editor_for_file.set($(element).parent().data('filename'), editor);
var session = editor.getSession();
var mode = $(element).data('mode')
session.setMode(mode);
if (mode === 'ace/mode/python') {
editor.setTheme('ace/theme/tomorrow')
}
session.setTabSize($(element).data('indent-size'));
session.setUseSoftTabs(true);
session.setUseWrapMode(true);
@@ -345,6 +341,12 @@ var CodeOceanEditor = {
}.bind(this));
},
handleAceThemeChangeEvent: function (event) {
this.editors.forEach(function (editor) {
editor.setTheme(this.THEME);
}.bind(this));
},
handleUTF16Surrogates: function (AceDeltaObject, AceSession) {
if (AceDeltaObject.data === undefined || AceDeltaObject.data.action !== "removeText") {
return;
@@ -372,6 +374,7 @@ var CodeOceanEditor = {
initializeEventHandlers: function () {
$(document).on('click', '#results a', this.showOutput.bind(this));
$(document).on('keydown', this.handleKeyPress.bind(this));
$(document).on('theme:change:ace', this.handleAceThemeChangeEvent.bind(this));
this.initializeFileTreeButtons();
this.initializeWorkspaceButtons();
this.initializeRequestForComments()
@@ -398,9 +401,6 @@ var CodeOceanEditor = {
}).fail(_.noop)
.always(function () {
ace.edit(editor).session.setMode(newMode);
if (newMode === 'ace/mode/python') {
ace.edit(editor).setTheme('ace/theme/tomorrow')
}
});
},
@@ -411,7 +411,9 @@ var CodeOceanEditor = {
} else {
filesInstance = $('#files');
}
filesInstance.jstree(filesInstance.data('entries'));
const jsTreeConfig = filesInstance.data('entries') || {core: {}};
jsTreeConfig.core.themes = {...jsTreeConfig.core.themes, name: window.getCurrentTheme() === "dark" ? "default-dark" : "default"}
filesInstance.jstree(jsTreeConfig);
filesInstance.on('click', 'li.jstree-leaf > a', function (event) {
const file_id = parseInt($(event.target).parent().attr('id'));
const frame = $('[data-file-id="' + file_id + '"]').parent();
@@ -419,6 +421,11 @@ var CodeOceanEditor = {
this.showFrame(frame);
this.toggleButtonStates();
}.bind(this));
$(document).on('theme:change', function(event) {
const newColorScheme = event.detail.currentTheme;
// Update the JStree theme
filesInstance.jstree(true).set_theme(newColorScheme === "dark" ? "default-dark" : "default");
});
},
initializeFileTreeButtons: function () {
@@ -539,7 +546,8 @@ var CodeOceanEditor = {
},
populateCard: function (card, result, index) {
card.addClass(this.getCardClass(result));
card.addClass('card');
card.find('.card-header').addClass(this.getCardClass(result));
card.find('.card-title .filename').text(result.filename);
card.find('.card-title .number').text(index + 1);
card.find('.row .col-md-9').eq(0).find('.number').eq(0).text(result.passed);

30
app/assets/javascripts/exercise_graphs.js
View File

@@ -120,19 +120,19 @@ $(document).on('turbolinks:load', function() {
var largestSubmittedTimeStamp = submissions[submissions_length-1];
var largestArrayForRange;
if(largestSubmittedTimeStamp.cause == "assess"){
if(largestSubmittedTimeStamp.cause === "assess"){
largestArrayForRange = submissionsScoreAndTimeAssess;
x.domain([0,largestArrayForRange[largestArrayForRange.length - 1][1]]).clamp(true);
} else if(largestSubmittedTimeStamp.cause == "submit"){
} else if(largestSubmittedTimeStamp.cause === "submit"){
largestArrayForRange = submissionsScoreAndTimeSubmits;
x.domain([0,largestArrayForRange[largestArrayForRange.length - 1][1]]).clamp(true);
} else if(largestSubmittedTimeStamp.cause == "run"){
} else if(largestSubmittedTimeStamp.cause === "run"){
largestArrayForRange = submissionsScoreAndTimeRuns;
x.domain([0,largestArrayForRange[largestArrayForRange.length - 1]]).clamp(true);
} else if(largestSubmittedTimeStamp.cause == "autosave"){
} else if(largestSubmittedTimeStamp.cause === "autosave"){
largestArrayForRange = submissionsAutosaves;
x.domain([0,largestArrayForRange[largestArrayForRange.length - 1]]).clamp(true);
} else if(largestSubmittedTimeStamp.cause == "save"){
} else if(largestSubmittedTimeStamp.cause === "save"){
largestArrayForRange = submissionsSaves;
x.domain([0,largestArrayForRange[largestArrayForRange.length - 1]]).clamp(true);
}
@@ -163,6 +163,7 @@ $(document).on('turbolinks:load', function() {
.call(yAxis);
svg.append("text") // y axis label
.attr("class", "y axis")
.attr("transform", "rotate(-90)")
.attr("x", -height / 2)
.attr("dy", "-3em")
@@ -180,12 +181,12 @@ $(document).on('turbolinks:load', function() {
.style('font-size', 20)
.style('text-decoration', 'underline');
svg.append("path")
//.datum()
.attr("class", "line")
.attr('id', 'myPath')// new
.attr("stroke", "black")
.attr("stroke", "var(--bs-emphasis-color)")
.attr("stroke-width", 5)
.attr("fill", "none")// end new
.attr("d", line(submissionsScoreAndTimeAssess));//---
@@ -194,7 +195,7 @@ $(document).on('turbolinks:load', function() {
.datum(submissionsScoreAndTimeAssess)
.attr("class", "line")
.attr('id', 'myPath')// new
.attr("stroke", "orange")
.attr("stroke", "var(--bs-warning)")
.attr("stroke-width", 5)
.attr("fill", "none")// end new
.attr("d", line);//---
@@ -203,6 +204,7 @@ $(document).on('turbolinks:load', function() {
svg.selectAll("dot") // Add dots to assesses
.data(submissionsScoreAndTimeAssess)
.enter().append("circle")
.attr("fill", "var(--bs-secondary)")
.attr("r", 3.5)
.attr("cx", function(d) { return x(d[1]); })
.attr("cy", function(d) { return y(d[0]); });
@@ -216,14 +218,14 @@ $(document).on('turbolinks:load', function() {
.data(submissionsScoreAndTimeSubmits)
.enter().append("circle")
.attr("r", 6)
.attr("stroke", "black")
.attr("fill", "blue")
.attr("stroke", "var(--bs-emphasis-color)")
.attr("fill", "var(--bs-blue)")
.attr("cx", function(d) { return x(d[1]); })
.attr("cy", function(d) { return y(d[0]); });
for (var i = 0; i < submissionsScoreAndTimeRuns.length; i++) {
svg.append("line")
.attr("stroke", "red")
.attr("stroke", "var(--bs-red)")
.attr("stroke-width", 1)
.attr("fill", "none")// end new
.attr("y1", y(0))
@@ -232,9 +234,9 @@ $(document).on('turbolinks:load', function() {
.attr("x2", x(submissionsScoreAndTimeRuns[i]));
}
var color_hash = { 0 : ["Submissions", "blue"],
1 : ["Assesses", "orange"],
2 : ["Runs", "red"]
var color_hash = { 0 : ["Submissions", "var(--bs-blue)"],
1 : ["Assesses", "var(--bs-orange)"],
2 : ["Runs", "var(--bs-red)"]
};
// add legend

19
app/assets/javascripts/exercises.js.erb
View File

@@ -1,17 +1,13 @@
$(document).on('turbolinks:load', function () {
// ruby part adds the relative_url_root, if it is set.
var ACE_FILES_PATH = '<%= "#{Rails.application.config.relative_url_root.chomp('/')}/assets/ace/" %>';
var THEME = 'ace/theme/textmate';
var TAB_KEY_CODE = 9;
var execution_environments;
var file_types;
const editors = [];
var configureEditors = function () {
_.each(['modePath', 'themePath', 'workerPath'], function (attribute) {
ace.config.set(attribute, ACE_FILES_PATH);
ace.config.set(attribute, CodeOceanEditor.ACE_FILES_PATH);
});
};
@@ -28,7 +24,8 @@ $(document).on('turbolinks:load', function () {
// document.removeLines(document.getLength() - 1, document.getLength() - 1);
editor.setReadOnly($(element).data('read-only') !== undefined);
editor.setShowPrintMargin(false);
editor.setTheme(THEME);
editor.setTheme(CodeOceanEditor.THEME);
editors.push(editor);
// For creating / editing an exercise
var textarea = $('textarea[id="exercise_files_attributes_' + index + '_content"]');
@@ -52,6 +49,14 @@ $(document).on('turbolinks:load', function () {
session.setUseWrapMode(true);
}
const handleAceThemeChangeEvent = function(event) {
editors.forEach(function (editor) {
editor.setTheme(CodeOceanEditor.THEME);
}.bind(this));
};
$(document).on('theme:change:ace', handleAceThemeChangeEvent.bind(this));
var initializeEditors = function () {
// initialize ace editors for all code textareas in the dom except the last one. The last one is the dummy area for new files, which is cloned when needed.
// this one must NOT! be initialized.

7
app/assets/javascripts/markdown_ace_editor.js.erb
View File

@@ -1,13 +1,14 @@
(function() {
var ACE_FILES_PATH = '<%= "#{Rails.application.config.relative_url_root.chomp('/')}/assets/ace/" %>';
window.MarkdownEditor = function(selector) {
ace.config.set('modePath', ACE_FILES_PATH);
_.each(['modePath', 'themePath', 'workerPath'], function (attribute) {
ace.config.set(attribute, CodeOceanEditor.ACE_FILES_PATH);
}.bind(this));
var editor = ace.edit($(selector).next()[0]);
editor.on('change', function() {
$(selector).val(editor.getValue());
});
editor.setShowPrintMargin(false);
editor.setTheme(CodeOceanEditor.THEME);
var session = editor.getSession();
session.setMode('ace/mode/markdown');
session.setUseWrapMode(true);

9
app/assets/javascripts/request_for_comments.js
View File

@@ -70,6 +70,7 @@ $(document).on('turbolinks:load', function () {
// set editor mode (used for syntax highlighting
currentEditor.getSession().setMode($(editor).data('mode'));
currentEditor.getSession().setOption("useWorker", false);
currentEditor.setTheme(CodeOceanEditor.THEME);
currentEditor.commentVisualsByLine = {};
setAnnotations(currentEditor, $(editor).data('file-id'));
@@ -77,6 +78,14 @@ $(document).on('turbolinks:load', function () {
currentEditor.on("guttermousemove", showPopover);
});
const handleAceThemeChangeEvent = function() {
$('.editor').each(function (_, editor) {
ace.edit(editor).setTheme(CodeOceanEditor.THEME);
}.bind(this));
};
$(document).on('theme:change:ace', handleAceThemeChangeEvent.bind(this));
function preprocess(commentText) {
// sanitize comments to deal with XSS attacks:
commentText = $('div.sanitizer').text(commentText).html();

10
app/assets/javascripts/shell.js
View File

@@ -99,13 +99,16 @@ $(document).on('turbolinks:load', function () {
fileTree.removeClass('my-3 justify-content-center');
fileTree.jstree({
'core': {
'themes': {
'name': window.getCurrentTheme() === "dark" ? "default-dark" : "default"
},
'data': {
'url': function (node) {
const params = {sudo: sudo.is(':checked')};
return Routes.list_files_in_execution_environment_path(id, params);
},
'data': function (node) {
return {'path': getPath(fileTree.jstree(), node)|| '/'};
return {'path': getPath(fileTree.jstree(true), node)|| '/'};
}
}
}
@@ -130,6 +133,11 @@ $(document).on('turbolinks:load', function () {
window.location = downloadPath;
}
}.bind(this));
$(document).on('theme:change', function(event) {
const newColorScheme = event.detail.currentTheme;
// Update the JStree theme
fileTree.jstree(true).set_theme(newColorScheme === "dark" ? "default-dark" : "default");
});
}
}

27
app/assets/javascripts/submission_statistics.js.erb
View File

@@ -1,8 +1,4 @@
$(document).on('turbolinks:load', function(event) {
var ACE_FILES_PATH = '<%= "#{Rails.application.config.relative_url_root.chomp('/')}/assets/ace/" %>';
var THEME = 'ace/theme/textmate';
var currentSubmission = 0;
var active_file = undefined;
var fileTrees = [];
@@ -24,7 +20,7 @@ $(document).on('turbolinks:load', function(event) {
var selectFileInJsTree = function() {
if (!filetree.hasClass('jstree-loading')) {
filetree.jstree("deselect_all");
filetree.jstree().select_node(active_file.file_id);
filetree.jstree("select_node", active_file.file_id);
} else {
setTimeout(selectFileInJsTree, 250);
}
@@ -38,8 +34,10 @@ $(document).on('turbolinks:load', function(event) {
var initializeFileTree = function() {
$('.files').each(function(index, element) {
fileTree = $(element).jstree($(element).data('entries'));
fileTree.on('click', 'li.jstree-leaf', function() {
const jsTreeConfig = $(element).data('entries')
jsTreeConfig.core.themes = {...jsTreeConfig.core.themes, name: window.getCurrentTheme() === "dark" ? "default-dark" : "default"}
const fileTree = $(element).jstree(jsTreeConfig);
$(element).on('click', 'li.jstree-leaf', function() {
var id = parseInt($(this).attr('id'));
_.each(files[currentSubmission], function(file) {
if (file.file_id === id) {
@@ -48,6 +46,11 @@ $(document).on('turbolinks:load', function(event) {
});
showActiveFile();
});
$(document).on('theme:change', function(event) {
const newColorScheme = event.detail.currentTheme;
// Update the JStree theme
fileTree.jstree(true).set_theme(newColorScheme === "dark" ? "default-dark" : "default");
});
fileTrees.push(fileTree);
});
};
@@ -60,7 +63,7 @@ $(document).on('turbolinks:load', function(event) {
if ($.isController('exercises') && $('#timeline').isPresent() && event.originalEvent.data.url.includes("/statistics")) {
_.each(['modePath', 'themePath', 'workerPath'], function(attribute) {
ace.config.set(attribute, ACE_FILES_PATH);
ace.config.set(attribute, CodeOceanEditor.ACE_FILES_PATH);
});
var slider = $('#submissions-slider>input');
@@ -72,7 +75,7 @@ $(document).on('turbolinks:load', function(event) {
editor = ace.edit('current-file');
editor.setShowPrintMargin(false);
editor.setTheme(THEME);
editor.setTheme(CodeOceanEditor.THEME);
editor.$blockScrolling = Infinity;
editor.setReadOnly(true);
@@ -90,6 +93,12 @@ $(document).on('turbolinks:load', function(event) {
});
});
const handleAceThemeChangeEvent = function() {
editor.setTheme(CodeOceanEditor.THEME);
};
$(document).on('theme:change:ace', handleAceThemeChangeEvent.bind(this));
const onSliderChange = function(event) {
currentSubmission = slider.val();
var currentFiles = files[currentSubmission];

6
app/assets/javascripts/working_time_graphs.js
View File

@@ -113,6 +113,7 @@ $(document).on('turbolinks:load', function() {
.call(yAxis);
svg.append("text") // y axis label
.attr("class", "y axis")
.attr("transform", "rotate(-90)")
.attr("x", -height / 2)
.attr("dy", "-3em")
@@ -134,7 +135,7 @@ $(document).on('turbolinks:load', function() {
.datum(minutes_count)
.attr("class", "line")
.attr('id', 'myPath')
.attr("stroke", "orange")
.attr("stroke", "var(--bs-warning)")
.attr("stroke-width", 5)
.attr("fill", "none")
.attr("d", line);
@@ -216,7 +217,7 @@ $(document).on('turbolinks:load', function() {
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(_event, d) {
return "<strong>Students: </strong><span style='color:orange'>" + d + "</span>";
return "<strong>Students: </strong><span style='color:var(--bs-warning)'>" + d + "</span>";
});
var svg = d3.select("#chart_2").append("svg")
@@ -248,6 +249,7 @@ $(document).on('turbolinks:load', function() {
.attr("dy", ".71em");
svg.append("text")
.attr("class", "y axis")
.attr("transform", "rotate(-90)")
.attr("x", -height / 2)
.attr("dy", "-3em")

25
app/assets/stylesheets/base.css.scss
View File

@@ -9,7 +9,7 @@ h1, h2, h3, h4, h5, h6 {
.lead {
font-size: 16px;
color: rgba(70, 70, 70, 1);
color: var(--bs-dark-text-emphasis);
}
a:not(.dropdown-item, .dropdown-toggle, .dropdown-link, .btn, .page-link), .btn-link {
@@ -26,10 +26,10 @@ i.fa-solid, i.fa-regular, i.fa-solid {
}
pre, .output-element {
background-color: #FAFAFA;
background-color: var(--bs-light-bg-subtle);
margin: 0;
padding: .25rem!important;
border: 1px solid #CCCCCC;
border: 1px solid var(--bs-border-color-translucent);
}
span.caret {
@@ -50,14 +50,14 @@ span.caret {
.progress {
margin: 0;
border: 1px solid #CCCCCC;
border: 1px solid var(--bs-border-color-translucent);
padding: 0.125rem !important;
height: 1.25rem !important;
.progress-bar {
line-height: initial;
min-width: 2em;
color: white;
color: var(--bs-white);
}
}
@@ -96,10 +96,17 @@ span.caret {
.flash {
font-size: 100%;
}
a, a:hover {
color: white;
font-weight: bold;
html[data-bs-theme="dark"] {
.alert .alert-link:hover {
filter: brightness(135%);
}
}
html[data-bs-theme="light"] {
.alert .alert-link:hover {
filter: brightness(175%);
}
}
@@ -110,7 +117,7 @@ span.caret {
.spinner {
width: 40px;
height: 40px;
background-color: #333;
background-color: var(--bs-body-color);
margin: 100px auto;
-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;

4
app/assets/stylesheets/bootstrap-dropdown-submenu.css.scss vendored
View File

@@ -20,13 +20,13 @@
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #cccccc;
border-left-color: var(--bs-border-color-translucent);
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: #ffffff;
border-left-color: var(--bs-dropdown-link-active-color);
}
.dropdown-submenu.float-start {

13
app/assets/stylesheets/editor.css.scss
View File

@@ -6,8 +6,11 @@
.own-editor {
height: 100%;
width: 100%;
.ace_scroller .ace_content {
background: #FAFAFA;
}
html[data-bs-theme="light"] {
.own-editor .ace_scroller .ace_content {
background-color: var(--bs-secondary-border-subtle);
}
}
@@ -51,7 +54,7 @@
}
#editor-buttons {
background-color: #008CBA;
background-color: var(--bs-primary);
margin-top: 0;
width: 100%;
display: flex;
@@ -97,7 +100,7 @@
visibility: hidden;
margin-top: .2em;
height: 1.6em;
color: #777;
color: var(--bs-tertiary-color);
font-size: 0.8em;
}
@@ -188,7 +191,7 @@
#error-hints {
display: none;
background-color: #FAFAFA;
background-color: var(--bs-light-bg-subtle);
.heading {
font-weight: bold;

14
app/assets/stylesheets/exercise_collections.scss
View File

@@ -1,7 +1,7 @@
$time-color: #008cba;
$min-color: #8efa00;
$avg-color: #ffca00;
$max-color: #ff2600;
$time-color: var(--bs-blue);
$min-color: var(--bs-yellow);
$avg-color: var(--bs-teal);
$max-color: var(--bs-red);
path.line.minimum-working-time {
stroke: $min-color;
@@ -31,7 +31,7 @@ rect.value-bar {
.box {
width: 20px;
height: 20px;
border: solid 1px #000;
border: solid 1px var(--bs-emphasis-color);
}
.box.time {
@@ -62,8 +62,8 @@ rect.value-bar {
display: none;
min-width: 80px;
height: auto;
background: none repeat scroll 0 0 #ffffff;
border: 1px solid #008cba;
background: none repeat scroll 0 0 var(--bs-body-bg);
border: 1px solid var(--bs-primary);
padding: 14px;
text-align: center;
}

36
app/assets/stylesheets/exercises.css.scss
View File

@@ -1,5 +1,5 @@
code {
background-color: #F8F8F8 !important;
background-color: var(--bs-light-bg-subtle) !important;
max-height: 100px;
overflow: scroll;
}
@@ -14,7 +14,7 @@ input[type='file'] {
.exercise {
border-radius: 3px;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
box-shadow: 0 2px 4px 0 rgba(var(--bs-black-rgb), 0.2);
padding: 1px 10px 1px 10px;
margin-bottom: 10px;
@@ -50,15 +50,17 @@ input[type='file'] {
// Graph Settings
text.axis, {
fill: var(--bs-body-color);
}
.axis path {
fill: none;
stroke: #100;
shape-rendering: crispEdges;
}
.axis line {
fill: none;
stroke: #999;
//shape-rendering: crispEdges;
stroke: var(--bs-tertiary-color);
}
.y.axis path {
@@ -77,29 +79,29 @@ input[type='file'] {
}
div#chart_1 {
background-color: #FAFAFA;
background-color: var(--bs-light-bg-subtle);
}
div#chart_2 {
background-color: #FAFAFA;
background-color: var(--bs-light-bg-subtle);
}
div#chart_stacked {
max-height: 500px;
background-color: #FAFAFA;
background-color: var(--bs-light-bg-subtle);
}
a.file-heading {
color: black !important;
color: var(--bs-body-color) !important;
text-decoration: none;
}
.bar {
fill: orange;
fill: var(--bs-warning);
}
.bar:hover {
fill: #ffd897;
fill: var(--bs-warning-border-subtle);
}
.container > form > .actions {
@@ -110,8 +112,8 @@ a.file-heading {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
background: rgba(var(--bs-black-rgb), 0.8);
color: var(--bs-white);
border-radius: 2px;
}
@@ -122,7 +124,7 @@ a.file-heading {
font-size: 14px;
width: 100%;
line-height: 1;
color: rgba(0, 0, 0, 0.8);
color: rgba(var(--bs-black-rgb), 0.8);
content: "\25BC";
position: absolute;
text-align: center;
@@ -142,7 +144,7 @@ a.file-heading {
}
.value {
border: 1px solid grey;
border: 1px solid var(--bs-border-color-translucent);
padding: 10px;
margin-bottom: 10px;
}
@@ -216,11 +218,11 @@ a.file-heading {
}
.export-success {
color: darkgreen;
color: var(--bs-success);
font-size: 12pt;
font-weight: 600;
}
.export-failure {
color: darkred;
color: var(--bs-danger);
}

4
app/assets/stylesheets/forms.css.scss
View File

@@ -31,3 +31,7 @@
.toggle-input {
font-size: 80%;
}
.wmd-preview {
background-color: var(--bs-secondary-bg);
}

57
app/assets/stylesheets/request-for-comments.css.scss
View File

@@ -1,7 +1,7 @@
.rfc {
h5 {
color: #008CBA;
color: var(--bs-primary);
}
.text {
@@ -25,8 +25,8 @@
.text {
padding: 5px;
background-color: #FAFAFA;
border: 1px solid #CCCCCC;
background-color: var(--bs-light-bg-subtle);
border: 1px solid var(--bs-border-color-translucent);
}
}
@@ -44,8 +44,8 @@
.text {
padding: 5px;
background-color: #FAFAFA;
border: 1px solid #CCCCCC;
background-color: var(--bs-light-bg-subtle);
border: 1px solid var(--bs-border-color-translucent);
}
pre {
@@ -77,26 +77,26 @@
.passed {
border-radius: 50%;
background-color: #8efa00;
-webkit-box-shadow: 0 0 11px 1px rgba(44,222,0,1);
-moz-box-shadow: 0 0 11px 1px rgba(44,222,0,1);
box-shadow: 0 0 11px 1px rgba(44,222,0,1);
background-color: var(--bs-success);
-webkit-box-shadow: 0 0 11px 1px rgba(var(--bs-success-rgb), 1);
-moz-box-shadow: 0 0 11px 1px rgba(var(--bs-success-rgb), 1);
box-shadow: 0 0 11px 1px rgba(var(--bs-success-rgb), 1);
}
.unknown {
border-radius: 50%;
background-color: #ffca00;
-webkit-box-shadow: 0 0 11px 1px rgb(255, 202, 0);
-moz-box-shadow: 0 0 11px 1px rgb(255, 202, 0);
box-shadow: 0 0 11px 1px rgb(255, 202, 0);
background-color: var(--bs-warning);
-webkit-box-shadow: 0 0 11px 1px rgba(var(--bs-warning-rgb), 1);
-moz-box-shadow: 0 0 11px 1px rgba(var(--bs-warning-rgb), 1);
box-shadow: 0 0 11px 1px rgba(var(--bs-warning-rgb), 1);
}
.failed {
border-radius: 50%;
background-color: #ff2600;
-webkit-box-shadow: 0 0 11px 1px rgba(222,0,0,1);
-moz-box-shadow: 0 0 11px 1px rgba(222,0,0,1);
box-shadow: 0 0 11px 1px rgba(222,0,0,1);
background-color: var(--bs-danger);
-webkit-box-shadow: 0 0 11px 1px rgba(var(--bs-danger-rgb), 1);
-moz-box-shadow: 0 0 11px 1px rgba(var(--bs-danger-rgb), 1);
box-shadow: 0 0 11px 1px rgba(var(--bs-danger-rgb), 1);
}
}
@@ -109,8 +109,8 @@
display: none;
margin-top: 20px;
padding: 5px;
border: solid lightgrey 1px;
background-color: rgba(20, 180, 20, 0.2);
border: solid var(--bs-border-color-translucent) 1px;
background-color: rgba(var(--bs-success-rgb),0.2);
border-radius: 4px;
button {
@@ -127,7 +127,12 @@
#commentitor {
margin-bottom: 2rem;
height: 600px;
background-color:#f9f9f9
}
html[data-bs-theme="light"] {
#commentitor {
background-color: var(--bs-secondary-border-subtle);
}
}
:not(.allow_ace_tooltip) > .ace_tooltip {
@@ -180,7 +185,7 @@
.comment-date {
text-align: right;
color: #008cba;
color: var(--bs-primary);
margin-left: 60%;
font-size: x-small;
}
@@ -212,7 +217,7 @@
.comment-divider {
width: 100%;
height: 1px;
background-color: #008cba;
background-color: var(--bs-primary);
overflow: hidden;
margin-top: 10px;
margin-bottom: 10px;
@@ -226,7 +231,7 @@
.container {
width: 100%;
overflow-y: auto;
border: 1px solid #cccccc;
border: 1px solid var(--bs-border-color-translucent);
padding: 15px;
.comment-removed {
@@ -264,14 +269,10 @@ input#subscribe {
}
.popover-footer {
color: #008cba;
color: var(--bs-primary);
margin-top: 10px;
}
.do-not-answer {
background-color: #ea2f1085;
}
#q_submission_study_group_id_in_chosen {
margin-right: 20px;
}

57
app/assets/stylesheets/statistics.css.scss
View File

@@ -36,51 +36,54 @@ div.unit-test-result {
div.positive-result {
border-radius: 50%;
background-color: #8efa00;
-webkit-box-shadow: 0px 0px 11px 1px rgba(44,222,0,1);
-moz-box-shadow: 0px 0px 11px 1px rgba(44,222,0,1);
box-shadow: 0px 0px 11px 1px rgba(44,222,0,1);
background-color: var(--bs-success);
-webkit-box-shadow: 0px 0px 11px 1px rgba(var(--bs-success-rgb), 1);
-moz-box-shadow: 0px 0px 11px 1px rgba(var(--bs-success-rgb), 1);
box-shadow: 0px 0px 11px 1px rgba(var(--bs-success-rgb), 1);
}
div.unknown-result {
border-radius: 50%;
background-color: #ffca00;
-webkit-box-shadow: 0px 0px 11px 1px rgb(255, 202, 0);
-moz-box-shadow: 0px 0px 11px 1px rgb(255, 202, 0);
box-shadow: 0px 0px 11px 1px rgb(255, 202, 0);
background-color: var(--bs-warning);
-webkit-box-shadow: 0px 0px 11px 1px rgba(var(--bs-warning-rgb), 1);
-moz-box-shadow: 0px 0px 11px 1px rgba(var(--bs-warning-rgb), 1);
box-shadow: 0px 0px 11px 1px rgba(var(--bs-warning-rgb), 1);
}
div.negative-result {
border-radius: 50%;
background-color: #ff2600;
-webkit-box-shadow: 0px 0px 11px 1px rgba(222,0,0,1);
-moz-box-shadow: 0px 0px 11px 1px rgba(222,0,0,1);
box-shadow: 0px 0px 11px 1px rgba(222,0,0,1);
background-color: var(--bs-danger);
-webkit-box-shadow: 0px 0px 11px 1px rgba(var(--bs-danger-rgb), 1);
-moz-box-shadow: 0px 0px 11px 1px rgba(var(--bs-danger-rgb), 1);
box-shadow: 0px 0px 11px 1px rgba(var(--bs-danger-rgb), 1);
}
tr.active {
filter: brightness(85%);
color: #000000;
html[data-bs-theme="dark"] {
tr.active {
filter: brightness(175%);
}
}
tr:not(.before_deadline,.within_grace_period,.after_late_deadline) {
background-color: #ffffff;
html[data-bs-theme="light"] {
tr.active {
filter: brightness(85%);
}
}
tr.highlight {
border-top: 2px solid rgba(222,0,0,1);
border-top: 2px solid var(--bs-red);
}
.before_deadline {
background-color: #DAF7A6;
.before_deadline, .before_deadline > * {
background-color: var(--bs-success-bg-subtle) !important;
}
.within_grace_period {
background-color: #F7DC6F;
.within_grace_period, .within_grace_period > * {
background-color: var(--bs-warning-bg-subtle) !important;
}
.after_late_deadline {
background-color: #EC7063;
.after_late_deadline, .after_late_deadline > * {
background-color: var(--bs-danger-bg-subtle) !important;
}
/////////////////////////////////////////////////////////////////////////////////////////////
@@ -97,13 +100,13 @@ tr.highlight {
grid-gap: 10px;
> a {
color: #fff !important;
color: var(--bs-white) !important;
text-decoration: none !important;
> div {
border: 2px solid #0055ba;
border: 2px solid var(--bs-primary-text-emphasis);
border-radius: 5px;
background-color: #008cba;
background-color: var(--bs-primary);
padding: 1em;
display: flex;
flex-flow: column-reverse;