CalvinBackup/anonymous_github
1
0
Fork 0
mirror of https://github.com/tdurieux/anonymous_github.git synced 2026-02-13 02:42:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

add dark mode

Browse Source
This commit is contained in:
tdurieux
2021-04-26 14:37:48 +02:00
parent 6164e52eab
commit f58e46fc56
6 changed files with 282 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

256
public/css/style.css
View File

@@ -1,3 +1,55 @@
.dark-mode {
--canvas-bg-color: #1d1d1d;
--sidebar-bg-color: rgb(45, 50, 56);
--main-bg-color: rgb(45, 51, 59);
--header-bg-color: #3a3f61;
--hover-bg-color: rgb(255, 255, 255, 0.05);
--header-color: #ffffff;
--color: #a7b5c2;
--link-color: #549bf5;
--link-hover-color: #4a8ce4;
--border-color: #363f47;
--btn-color: #ffffff;
--input-color: #a7b5c2;
--input-bg: rgb(45, 50, 56);
--primary-bg: #3a3f61;
--primary-hover-bg: #2b304e;
--primary-color: #ffffff;
--primary-active-color: #dddddd;
background-color: var(--canvas-bg-color);
color: var(--color);
}
body {
--canvas-bg-color: #dddddd;
--sidebar-bg-color: #ffffff;
--header-bg-color: #4a507b;
--header-color: #ffffff;
--main-bg-color: #ffffff;
--hover-bg-color: rgb(0, 0, 0, 0.05);
--input-color: #333333;
--color: #333333;
--link-color: #549bf5;
--link-hover-color: #4a507b;
--border-color: #a9adb1;
--btn-color: #333333;
--input-bg: #ffffff;
--primary-bg: #4a507b;
--primary-hover-bg: #363b61;
--primary-color: #ffffff;
--primary-active-color: #dddddd;
background-color: var(--canvas-bg-color);
color: var(--color);
}
.fadeIn {
opacity: 1;
animation-name: fadeInOpacity;
@@ -14,6 +66,7 @@
opacity: 1;
}
}
.btn:focus,
.btn:active {
outline: none !important;
@@ -25,6 +78,35 @@ input,
button {
outline: none;
}
*:hover,
*:active {
box-shadow: none !important;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
border-color: var(--border-color);
-webkit-text-fill-color: var(--color);
-webkit-box-shadow: none;
transition: background-color 1000s ease-in-out 0s;
}
input:-internal-autofill-selected,
.form-control,
.custom-select {
color: var(--input-color);
background-color: var(--input-bg) !important;
border-color: var(--border-color);
}
.form-control:focus {
border-color: var(--border-color);
}
html,
body {
@@ -32,8 +114,20 @@ body {
height: 100%;
}
.dropdown-menu a,
.markdown-body a,
a {
color: var(--link-color);
}
.dropdown-menu a:hover,
.markdown-body a:hover,
a:hover {
text-decoration: none;
color: var(--link-hover-color);
}
.navbar {
background: #4a507b !important;
background: var(--header-bg-color) !important;
}
.navbar {
@@ -63,7 +157,7 @@ body {
.generalMessage {
display: block;
text-align: center;
color: #ffffff;
color: var(--header-color);
}
.rgba-gradient {
@@ -82,55 +176,79 @@ body {
rgba(51, 51, 51, 0.82),
rgba(13, 17, 198, 0.69) 100%
);
color: white;
color: var(--header-color);
}
a:hover {
text-decoration: none;
.dropdown-menu,
.body,
.file-content,
.markdown-body {
background-color: var(--main-bg-color) !important;
color: var(--color) !important;
}
.card-header .btn {
border: none;
.file-content {
padding: 4px 7px;
text-align: left;
min-height: 100%;
}
.dropdown-item:focus,
.dropdown-item:hover {
background-color: var(--hover-bg-color);
}
.card-header .btn,
.card-header .btn:hover,
.card-header .btn:focus {
border: none !important;
background: transparent !important;
}
.btn {
color: #333333;
border: 1px solid #333333;
color: var(--btn-color);
border: 1px solid var(--border-color);
background: transparent;
border-radius: 4px;
}
.btn:hover,
.btn:active {
color: #333333 !important;
border: 1px solid #333333;
background-color: #dddddd !important;
color: var(--btn-color);
border: 1px solid var(--border-color);
background-color: var(--hover-bg-color);
box-shadow: none !important;
}
.btn.btn-primary {
color: #ffffff;
background-color: #4a507b !important;
color: var(--primary-color);
background-color: var(--primary-bg);
}
.btn.btn-primary:active,
.btn.btn-primary:hover {
color: #dddddd !important;
background-color: #363b61 !important;
color: var(--primary-active-color);
background-color: var(--primary-hover-bg) !important;
}
.btn::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: var(--color);
opacity: 1; /* Firefox */
}
.white_border {
border: 1px solid white;
color: white;
}
.btn::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: #666666;
opacity: 1; /* Firefox */
}
.leftCol {
position: relative;
flex: 0 0 auto;
width: 100%;
z-index: 9;
background: #ecedef;
background: white;
}
.leftCol,
.sidePanel,
.card {
background-color: var(--sidebar-bg-color);
border: 1px solid var(--border-color);
}
@media (min-width: 768px) {
.leftCol {
flex: 0 0 310px;
@@ -138,6 +256,7 @@ a:hover {
height: 100%;
}
}
.files {
position: relative;
display: block;
@@ -147,22 +266,22 @@ a:hover {
.files a {
display: block;
padding: 0px 3px 0px 25px;
color: #555555;
padding: 0px 3px 0px 20px;
color: var(--color);
}
.files .file,
.files .folder {
position: relative;
color: #555555;
color: var(--color);
cursor: pointer;
word-break: break-all;
}
.files .file.active a,
.files .file a:hover {
background: #ecedef;
color: #555555;
background: var(--hover-bg-color);
color: var(--color);
}
.files ul {
list-style: none;
@@ -187,16 +306,17 @@ a:hover {
width: 7px;
padding: 1px;
padding-left: 1px;
color: #858b90;
color: var(--primary-bg);
}
.files .folder::before {
content: "\f07b";
color: #3ba3f8;
color: var(--primary-bg);
}
.files .folder.open::before {
content: "\f07c";
color: var(--primary-hover-bg);
}
.ace_editor {
@@ -207,15 +327,15 @@ a:hover {
}
.paths {
background-color: #ffffff;
background-color: var(--main-bg-color);
padding: 8px 6px;
margin: 0;
border-bottom: 1px solid #dddddd;
border-bottom: 1px solid var(--border-color);
border-radius: 0;
}
.paths a {
color: #000000;
color: var(--color);
}
.paths .breadcrumb-item {
padding-left: 3px;
@@ -228,15 +348,10 @@ a:hover {
height: 100%;
overflow: scroll;
padding-top: 42px;
background: #f8f8f8;
background-color: var(--main-bg-color);
text-align: center;
}
.file-content {
padding: 4px 7px;
text-align: left;
background: #ffffff;
min-height: 100%;
}
.image-content {
max-width: 100%;
max-height: 100%;
@@ -249,10 +364,6 @@ a:hover {
text-align: center;
}
.preview {
height: 100%;
overflow: scroll;
}
pdfviewer {
display: block;
padding: 15px;
@@ -285,14 +396,14 @@ notebook {
}
.faq-section .panel-default .panel-title a {
color: #333333;
color: var(--color);
display: block;
}
.faq-section .panel-heading {
background-color: #dddddd;
background-color: var(--sidebar-bg-color);
}
.faq-section .panel-default {
background-color: #f8f8f8;
background-color: var(--hover-bg-color);
}
.faq-section .panel-default .panel-title {
margin-bottom: 0;
@@ -312,6 +423,17 @@ notebook {
font-size: 1.2rem;
}
.table {
color: var(--color);
}
.table td,
.table th,
hr,
.dropdown-divider {
border-color: var(--border-color);
}
.table.repositories td {
word-break: break-word;
}
@@ -347,3 +469,41 @@ loc .lang {
line-height: 1;
letter-spacing: -0.05rem;
}
.dark-mode .shadow {
box-shadow: none;
}
.dark-mode .overflow-auto::-webkit-scrollbar {
width: 10px;
}
.dark-mode .overflow-auto::-webkit-scrollbar-track {
-webkit-box-shadow: none;
background: inherit;
border-radius: 0;
}
.dark-mode .overflow-auto::-webkit-scrollbar-thumb {
border-radius: 10px;
border: 1px solid var(--border-color);
background-color: var(--hover-bg-color);
}
.dark-mode .rgba-gradient {
background: -moz-linear-gradient(
45deg,
rgb(45 45 64 / 82%),
rgb(23 26 49) 100%
);
background: -webkit-linear-gradient(
45deg,
rgb(45 45 64 / 82%),
rgb(23 26 49) 100%
);
background: linear-gradient(
to 45deg,
rgb(45 45 64 / 82%),
rgb(23 26 49) 100%
);
}

37
public/index.html
View File

@@ -3,23 +3,41 @@
<html lang="en" ng-app="anonymous-github" ng-controller="mainController">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title ng-bind="title">Anonymous Github</title>
<base href="/" />
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
<link rel="manifest" href="/favicon/site.webmanifest">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="msapplication-config" content="/favicon/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<link
rel="apple-touch-icon"
sizes="180x180"
href="/favicon/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/favicon/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/favicon/favicon-16x16.png"
/>
<link rel="manifest" href="/favicon/site.webmanifest" />
<link rel="shortcut icon" href="/favicon.ico" />
<meta name="msapplication-config" content="/favicon/browserconfig.xml" />
<meta name="theme-color" content="#ffffff" />
<!-- CSS -->
<link rel="stylesheet" href="/css/bootstrap.min.css" />
<link rel="stylesheet" href="/css/font-awesome.min.css" />
<link rel="stylesheet" href="/css/color-schema.css" />
<link rel="stylesheet" href="/css/style.css" />
<link rel="stylesheet" href="/css/notebook.css" />
<link rel="stylesheet" href="/css/prism.css" />
@@ -50,10 +68,9 @@
<script src="/script/external/ace/ace.js"></script>
<script src="/script/external/ui-ace.min.js"></script>
<script src="/script/langColors.js"></script>
<script src="/script/ng-pdfviewer.min.js"></script>
<script src="/script/app.js"></script>
</head>
<body keypress-events class="d-flex flex-column">
<ng-include src="'partials/header.htm'"></ng-include>

12
public/partials/anonymize.htm
View File

@@ -1,11 +1,6 @@
<div class="container-fluid h-100">
<div class="row h-100">
<div
class="col-9 p-2 preview markdown-body"
ng-bind-html="html_readme"
ng-if="html_readme"
></div>
<div class="col shadow overflow-auto h-100 d-flex align-content-end">
<div class="col sidePanel shadow overflow-auto h-100 d-flex align-content-end">
<div
class="p-0 py-2 m-auto"
ng-class="{'card': !repoUrl,'container': repoUrl}"
@@ -486,5 +481,10 @@
</form>
</div>
</div>
<div
class="col-9 p-2 h-100 overflow-auto markdown-body body"
ng-bind-html="html_readme"
ng-if="html_readme"
></div>
</div>
</div>

6
public/partials/dashboard.htm
View File

@@ -1,6 +1,6 @@
<div class="container-fluid h-100">
<div class="row h-100">
<div class="leftCol shadow p-1 overflow-auto">
<div class="leftCol sidePanel shadow p-1 overflow-auto">
<div class="container">
<div class="row">
<div class="col-6 col-md-12 p-1">
@@ -74,11 +74,11 @@
<label class="form-check-label" for="removed"> Removed </label>
</div>
</div>
<div class="col-md h-100 overflow-auto">
<div class="col-md h-100 overflow-auto body">
<div class="row">
<div class="col p-0">
<table class="table repositories">
<thead class="thead-light">
<thead>
<tr>
<th scope="col" class="d-none d-xl-table-cell">#</th>
<th scope="col">Repository ID</th>

15
public/partials/header.htm
View File

@@ -94,6 +94,21 @@
<a class="dropdown-item" href="/profile">Default settings</a>
<a class="dropdown-item" href="/dashboard">Projects</a>
<div class="dropdown-divider"></div>
<a
class="dropdown-item"
href="#"
ng-click="darkMode(true);"
ng-if="!isDarkMode"
>Dark Mode</a
>
<a
class="dropdown-item"
href="#"
ng-click="darkMode(false);"
ng-if="isDarkMode"
>Light Mode</a
>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/api/user/logout" target="__self"
>Logout</a
>

24
public/script/app.js
View File

@@ -295,6 +295,19 @@ angular
.substring(1)
.split("/");
$scope.darkMode = function(on) {
localStorage.setItem("darkMode", on);
$scope.isDarkMode = on;
if (on) {
$("body").addClass("dark-mode");
} else {
$("body").removeClass("dark-mode");
}
$scope.$broadcast("dark-mode", on);
};
$scope.darkMode(localStorage.getItem("darkMode") == "true")
function getUser() {
$http.get("/api/user").then(
(res) => {
@@ -1147,7 +1160,16 @@ angular
_editor.setFadeFoldWidgets($scope.aceOption.fadeFoldWidgets);
},
};
$scope.$on("dark-mode", (event, on) => {
if (on) {
$scope.aceOption.theme = "nord_dark";
} else {
$scope.aceOption.theme = "chrome";
}
});
if ($scope.isDarkMode) {
$scope.aceOption.theme = "nord_dark";
}
$scope.type = getType(extension);
getContent($scope.filePath);