srizan/archived-vdo.ninja
1
0
Fork 0
mirror of https://github.com/SrIzan10/vdo.ninja.git synced 2026-05-01 11:05:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added <link>'s for new css files in HTML/JS files

Browse Source
This commit is contained in:
Andrew Gallimore
2024-06-11 20:54:59 -04:00
parent 43fd698ff7
commit d1ccb8a6b0
15 changed files with 48 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
convert.html
View File

@@ -1,5 +1,8 @@
<head> <head>
<link rel="stylesheet" href="./css/main.css?ver=40" /> <link rel="stylesheet" href="./css/main.css?ver=40" />
<link rel="stylesheet" href="./css/variables.css" />
<link rel="stylesheet" href="./css/icons.css" />
<link rel="stylesheet" href="./css/animations.css" />
<style> <style>
.container { .container {
max-width: min(80%,875px); max-width: min(80%,875px);

4
css/animations.css
View File

@@ -1,6 +1,6 @@
/** /**
* Created 06/05/2024 * Created 06/05/2024
* Imported in the main.css file. * Used by main.css
* *
* This file contains all @keyframe aninmations and some "universal" classes for animations. * This file contains all @keyframe aninmations and some "universal" classes for animations.
* Some styles in main.css also use these animations explicitly, and so not all the * Some styles in main.css also use these animations explicitly, and so not all the
@@ -124,7 +124,7 @@
/* Lightbox open animation */ /* Lightbox open animation */
/* NOTE: For opening lightboxes on homepage, and the "outlightbox" equivalent for closeing /* NOTE: For opening lightboxes on homepage, and a sidenote, the "outlightbox" equivalent for closeing
the lightboxes is found in lib.js */ the lightboxes is found in lib.js */
@keyframes inlightbox { @keyframes inlightbox {
50% { 50% {

2
css/icons.css
View File

@@ -1,6 +1,6 @@
/** /**
* Created 06/05/2024 * Created 06/05/2024
* Imported in the main.css file. * Used by main.css
* *
* This file contains the classes and font styles for the font-awesome icons. * This file contains the classes and font styles for the font-awesome icons.
* -- Colors of the icons/text are set in the main.css file. * -- Colors of the icons/text are set in the main.css file.

10
css/main.css
View File

@@ -1,6 +1,10 @@
@import url('variables.css'); /**
@import url('icons.css'); * Uses other CSS files as 'children'
@import url('animations.css'); *
* This file contains most styles used by vdo.ninja pages. Many HTML files use
* this file. Other CSS files contain certain types of styles, such as variables.css,
* animations.css, and icons.css which are used by this file.
*/
* { * {
padding: 0; padding: 0;

2
css/variables.css
View File

@@ -1,6 +1,6 @@
/** /**
* Created 06/05/2024 * Created 06/05/2024
* Imported in the main.css file. * Used my main.css
* *
* This file contains the different color-themes and * This file contains the different color-themes and
* theme management for applying the themes to the :root variables. * theme management for applying the themes to the :root variables.

3
devices.html
View File

@@ -2,6 +2,9 @@
<head> <head>
<link rel="stylesheet" href="./lineawesome/css/line-awesome.min.css" /> <link rel="stylesheet" href="./lineawesome/css/line-awesome.min.css" />
<link rel="stylesheet" href="./css/main.css?ver=11" /> <link rel="stylesheet" href="./css/main.css?ver=11" />
<link rel="stylesheet" href="./css/variables.css" />
<link rel="stylesheet" href="./css/icons.css" />
<link rel="stylesheet" href="./css/animations.css" />
<link rel="stylesheet" href="./devices.css?ver=2" /> <link rel="stylesheet" href="./devices.css?ver=2" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="utf8" /> <meta charset="utf8" />

3
examples/midi.html
View File

@@ -2,6 +2,9 @@
<head> <head>
<script src="https://cdn.jsdelivr.net/npm/webmidi"></script> <script src="https://cdn.jsdelivr.net/npm/webmidi"></script>
<link rel="stylesheet" href="./css/main.css" /> <link rel="stylesheet" href="./css/main.css" />
<link rel="stylesheet" href="./css/variables.css" />
<link rel="stylesheet" href="./css/icons.css" />
<link rel="stylesheet" href="./css/animations.css" />
<style> <style>
.container { .container {
max-width: 80%; max-width: 80%;

3
examples/obs_remote/index.html
View File

@@ -2,6 +2,9 @@
<head> <head>
<script type="text/javascript" src="./thirdparty/obs-websocket.min.js"></script> <script type="text/javascript" src="./thirdparty/obs-websocket.min.js"></script>
<link rel="stylesheet" href="https://vdo.ninja/css/main.css" /> <link rel="stylesheet" href="https://vdo.ninja/css/main.css" />
<link rel="stylesheet" href="https://vdo.ninja/css/variables.css" />
<link rel="stylesheet" href="https://vdo.ninja/css/icons.css" />
<link rel="stylesheet" href="https://vdo.ninja/css/animations.css" />
<title>OBS Controller Demo using VDO.Ninja</title> <title>OBS Controller Demo using VDO.Ninja</title>
<style> <style>

3
examples/obs_remote/interface.html
View File

@@ -3,6 +3,9 @@
<head> <head>
<script type="text/javascript" src="./thirdparty/obs-websocket.min.js"></script> <script type="text/javascript" src="./thirdparty/obs-websocket.min.js"></script>
<link rel="stylesheet" href="https://vdo.ninja/css/main.css" /> <link rel="stylesheet" href="https://vdo.ninja/css/main.css" />
<link rel="stylesheet" href="https://vdo.ninja/css/variables.css" />
<link rel="stylesheet" href="https://vdo.ninja/css/icons.css" />
<link rel="stylesheet" href="https://vdo.ninja/css/animations.css" />
<style> <style>
.container { .container {

4
index.html
View File

@@ -58,7 +58,11 @@
<meta property="twitter:image" content="./media/vdoNinja_logo_full.png" /> <meta property="twitter:image" content="./media/vdoNinja_logo_full.png" />
<meta name="msapplication-TileColor" content="#da532c" /> <meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#0f131d" /> <meta name="theme-color" content="#0f131d" />
<link rel="stylesheet" href="./css/main.css?ver=386" /> <link rel="stylesheet" href="./css/main.css?ver=386" />
<link rel="stylesheet" href="./css/variables.css" />
<link rel="stylesheet" href="./css/icons.css" />
<link rel="stylesheet" href="./css/animations.css" />
<script type="text/javascript" crossorigin="anonymous" src="./thirdparty/adapter.js"></script> <script type="text/javascript" crossorigin="anonymous" src="./thirdparty/adapter.js"></script>
<style id="lightbox-animations" type="text/css"></style> <style id="lightbox-animations" type="text/css"></style>

2
install.md
View File

@@ -110,7 +110,7 @@ Also note: There are third-party providers offering TURN services, if you would
A new deployment of VDO.Ninja should work without any changes to the index.html file, although you'll want to change it to support your own TURN server and perhaps branding. The VDO.Ninja code needs to be constantly kept up to date though; this is the reality of deploying VDO.Ninja -- you should update it every few months at the very least. As a result, keep this in mind when making changes to the VDO.Ninja source code, as heavy custom changes will make updating harder to do. The fewer the changes the better. A new deployment of VDO.Ninja should work without any changes to the index.html file, although you'll want to change it to support your own TURN server and perhaps branding. The VDO.Ninja code needs to be constantly kept up to date though; this is the reality of deploying VDO.Ninja -- you should update it every few months at the very least. As a result, keep this in mind when making changes to the VDO.Ninja source code, as heavy custom changes will make updating harder to do. The fewer the changes the better.
My suggestion to extensive editing? Limit changes to images and perhaps the translation files (maybe add a new one); these are good starting points. If making changes to the main.css style sheet or index.html file, you should be mostly okay too, since these files are designed to be changed; I try to keep that in mind when updating the code at least. Making changes to other files though is strongly not recommend and in some cases discouraged. If you find a bug or need to make a change to other files, it might be best to make a Pull Request with the desired changes and hope it gets adopted into the main codebase. My suggestion to extensive editing? Limit changes to images and perhaps the translation files (maybe add a new one); these are good starting points. If making changes to any style sheets in the ./css folder or index.html file, you should be mostly okay too, since these files are designed to be changed; I try to keep that in mind when updating the code at least. Making changes to other files though is strongly not recommend and in some cases discouraged. If you find a bug or need to make a change to other files, it might be best to make a Pull Request with the desired changes and hope it gets adopted into the main codebase.
### Internet-free deployments ### Internet-free deployments

8
lib.js
View File

@@ -35359,8 +35359,14 @@ async function PictureInPicturePageToggle(state = null) {
} }
}); });
var pipWindowHead = '<title>Pop-out Window</title>';
pipWindowHead += '<link rel="stylesheet" href="./css/main.css"/>';
pipWindowHead += '<link rel="stylesheet" href="./css/variables.css"/>';
pipWindowHead += '<link rel="stylesheet" href="./css/icons.css"/>';
pipWindowHead += '<link rel="stylesheet" href="./css/animations.css"/>';
session.pipWindow.document.body.className = "main"; session.pipWindow.document.body.className = "main";
session.pipWindow.document.head.innerHTML = '<title>Pop-out Window</title><link rel="stylesheet" href="./main.css">'; session.pipWindow.document.head.innerHTML = pipWindowHead;
session.pipWindow.document.body.style = document.body.style; session.pipWindow.document.body.style = document.body.style;
session.pipWindow.document.title = "Pop-out Window"; session.pipWindow.document.title = "Pop-out Window";
session.pipWindow.document.body.append(getById("gridlayout")); session.pipWindow.document.body.append(getById("gridlayout"));

3
midi.html
View File

@@ -2,6 +2,9 @@
<head> <head>
<script src="https://vdo.ninja/thirdparty/webmidi.js"></script> <script src="https://vdo.ninja/thirdparty/webmidi.js"></script>
<link rel="stylesheet" href="https://vdo.ninja/css/main.css" /> <link rel="stylesheet" href="https://vdo.ninja/css/main.css" />
<link rel="stylesheet" href="https://vdo.ninja/css/variables.css" />
<link rel="stylesheet" href="https://vdo.ninja/css/icons.css" />
<link rel="stylesheet" href="https://vdo.ninja/css/animations.css" />
<style> <style>
.container { .container {
max-width: 80%; max-width: 80%;

4
room.html
View File

@@ -58,7 +58,11 @@
<meta property="twitter:image" content="./media/vdoNinja_logo_full.png" /> <meta property="twitter:image" content="./media/vdoNinja_logo_full.png" />
<meta name="msapplication-TileColor" content="#da532c" /> <meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#0f131d" /> <meta name="theme-color" content="#0f131d" />
<link rel="stylesheet" href="./css/main.css?ver=368" /> <link rel="stylesheet" href="./css/main.css?ver=368" />
<link rel="stylesheet" href="./css/variables.css" />
<link rel="stylesheet" href="./css/icons.css" />
<link rel="stylesheet" href="./css/animations.css" />
<script type="text/javascript" crossorigin="anonymous" src="./thirdparty/adapter.js"></script> <script type="text/javascript" crossorigin="anonymous" src="./thirdparty/adapter.js"></script>
<style id="lightbox-animations" type="text/css"></style> <style id="lightbox-animations" type="text/css"></style>

3
supports.html
View File

@@ -2,6 +2,9 @@
<head> <head>
<link rel="stylesheet" href="./lineawesome/css/line-awesome.min.css" /> <link rel="stylesheet" href="./lineawesome/css/line-awesome.min.css" />
<link rel="stylesheet" href="./css/main.css?ver=11" /> <link rel="stylesheet" href="./css/main.css?ver=11" />
<link rel="stylesheet" href="./css/variables.css" />
<link rel="stylesheet" href="./css/icons.css" />
<link rel="stylesheet" href="./css/animations.css" />
<link rel="stylesheet" href="./supports.css?ver=4" /> <link rel="stylesheet" href="./supports.css?ver=4" />
<meta charset="utf8" /> <meta charset="utf8" />
</head> </head>