mirror of
https://github.com/gilbN/theme.park.git
synced 2024-09-11 11:22:24 +02:00
commit
10ea632d5a
@ -1,14 +1,17 @@
|
|||||||
#!/bin/bash
|
#!/bin/bash
|
||||||
TYPE="retro-terminal"
|
TYPE="retro-terminal"
|
||||||
THEME="green.css"
|
THEME="green.css"
|
||||||
DOMAIN="theme-park.dev" # If you update the domain after the script has been run, You must disable and re enable JS or the whole theme.
|
DOMAIN="theme-park.dev" # If you update the domain after the script has been run, You must disable and re the whole theme with the DISABLE_THEME env.
|
||||||
|
SCHEME="https"
|
||||||
ADD_JS="true"
|
ADD_JS="true"
|
||||||
JS="custom_text_header.js"
|
JS="custom_text_header.js"
|
||||||
DISABLE_THEME="false"
|
DISABLE_THEME="false"
|
||||||
|
|
||||||
echo -e "Variables set:\\n\
|
echo -e "Variables set:\\n\
|
||||||
|
TYPE = ${TYPE}\\n\
|
||||||
THEME = ${THEME}\\n\
|
THEME = ${THEME}\\n\
|
||||||
DOMAIN = ${DOMAIN}\\n\
|
DOMAIN = ${DOMAIN}\\n\
|
||||||
|
SCHEME = ${SCHEME}\\n\
|
||||||
ADD_JS = ${ADD_JS}\\n\
|
ADD_JS = ${ADD_JS}\\n\
|
||||||
JS = ${JS}\\n\
|
JS = ${JS}\\n\
|
||||||
DISABLE_THEME = ${DISABLE_THEME}\\n"
|
DISABLE_THEME = ${DISABLE_THEME}\\n"
|
||||||
@ -48,31 +51,33 @@ esac
|
|||||||
# Adding stylesheets
|
# Adding stylesheets
|
||||||
if ! grep -q ${DOMAIN} ${LOGIN_PAGE}; then
|
if ! grep -q ${DOMAIN} ${LOGIN_PAGE}; then
|
||||||
echo "Adding stylesheet"
|
echo "Adding stylesheet"
|
||||||
sed -i -e "\@<style>@i\ <link rel='stylesheet' href='https://${DOMAIN}/css/addons/unraid/login-page/${TYPE}/${THEME}'>" ${LOGIN_PAGE}
|
sed -i -e "\@<style>@i\ <link data-tp='theme' rel='stylesheet' href='${SCHEME}://${DOMAIN}/css/addons/unraid/login-page/${TYPE}/${THEME}'>" ${LOGIN_PAGE}
|
||||||
|
sed -i -e "\@<style>@i\ <link data-tp='base' rel='stylesheet' href='${SCHEME}://${DOMAIN}/css/addons/unraid/login-page/${TYPE}/${TYPE}-base.css'>" ${LOGIN_PAGE}
|
||||||
echo 'Stylesheet set to' ${THEME}
|
echo 'Stylesheet set to' ${THEME}
|
||||||
fi
|
fi
|
||||||
|
|
||||||
# Adding/Removing javascript
|
# Adding/Removing javascript
|
||||||
if [ ${ADD_JS} = "true" ]; then
|
if [ ${ADD_JS} = "true" ]; then
|
||||||
if ! grep -q ${JS} ${LOGIN_PAGE}; then
|
if ! grep -q ${JS} ${LOGIN_PAGE}; then
|
||||||
if grep -q "<script type='text/javascript' src='https://${DOMAIN}/css/addons/unraid/login-page/" ${LOGIN_PAGE}; then
|
if grep -q "<script type='text/javascript' src='${SCHEME}://${DOMAIN}/css/addons/unraid/login-page/" ${LOGIN_PAGE}; then
|
||||||
echo "Replacing Javascript"
|
echo "Replacing Javascript"
|
||||||
sed -i "/<script type='text\/javascript' src='https:\/\/${DOMAIN}\/css\/addons\/unraid\/login-page/c <script type='text/javascript' src='https://${DOMAIN}/css/addons/unraid/login-page/${TYPE}/js/${JS}'></script>" ${LOGIN_PAGE}
|
sed -i "/<script type='text\/javascript' src='${SCHEME}:\/\/${DOMAIN}\/css\/addons\/unraid\/login-page/c <script type='text/javascript' src='${SCHEME}://${DOMAIN}/css/addons/unraid/login-page/${TYPE}/js/${JS}'></script>" ${LOGIN_PAGE}
|
||||||
else
|
else
|
||||||
echo "Adding javascript"
|
echo "Adding javascript"
|
||||||
sed -i -e "\@</body>@i\ <script type='text/javascript' src='https://${DOMAIN}/css/addons/unraid/login-page/${TYPE}/js/${JS}'></script>" ${LOGIN_PAGE}
|
sed -i -e "\@</body>@i\ <script type='text/javascript' src='${SCHEME}://${DOMAIN}/css/addons/unraid/login-page/${TYPE}/js/${JS}'></script>" ${LOGIN_PAGE}
|
||||||
fi
|
fi
|
||||||
fi
|
fi
|
||||||
else
|
else
|
||||||
if grep -q ${JS} ${LOGIN_PAGE}; then
|
if grep -q ${JS} ${LOGIN_PAGE}; then
|
||||||
echo "Removing javascript.."
|
echo "Removing javascript.."
|
||||||
sed -i "/<script type='text\/javascript' src='https:\/\/${DOMAIN}\/css\/addons\/unraid\/login-page/d" ${LOGIN_PAGE}
|
sed -i "/<script type='text\/javascript' src='${SCHEME}:\/\/${DOMAIN}\/css\/addons\/unraid\/login-page/d" ${LOGIN_PAGE}
|
||||||
fi
|
fi
|
||||||
fi
|
fi
|
||||||
|
|
||||||
# Changing stylesheet
|
# Changing stylesheet
|
||||||
if ! grep -q ${TYPE}"/"${THEME} ${LOGIN_PAGE}; then
|
if ! grep -q ${TYPE}"/"${THEME} ${LOGIN_PAGE}; then
|
||||||
echo "Changing existing custom stylesheet.."
|
echo "Changing existing custom stylesheet.."
|
||||||
sed -i "/<link rel='stylesheet' href='https:\/\/${DOMAIN}\/css\/addons\/unraid\/login-page/c <link rel='stylesheet' href='https://${DOMAIN}/css/addons/unraid/login-page/${TYPE}/${THEME}'>" ${LOGIN_PAGE}
|
sed -i "/<link data-tp='theme' rel='stylesheet' href='${SCHEME}:\/\/${DOMAIN}\/css\/addons\/unraid\/login-page/c <link data-tp='theme' rel='stylesheet' href='${SCHEME}://${DOMAIN}/css/addons/unraid/login-page/${TYPE}/${THEME}'>" ${LOGIN_PAGE}
|
||||||
|
sed -i "/<link data-tp='base' rel='stylesheet' href='${SCHEME}:\/\/${DOMAIN}\/css\/addons\/unraid\/login-page/c <link data-tp='base' rel='stylesheet' href='${SCHEME}://${DOMAIN}/css/addons/unraid/login-page/${TYPE}/${TYPE}-base.css'>" ${LOGIN_PAGE}
|
||||||
echo 'Stylesheet set to' ${THEME}
|
echo 'Stylesheet set to' ${THEME}
|
||||||
fi
|
fi
|
||||||
|
@ -16,7 +16,7 @@
|
|||||||
:root {
|
:root {
|
||||||
--text-json-tree-branch-preview-color: var(--text);
|
--text-json-tree-branch-preview-color: var(--text);
|
||||||
--text-json-tree-leaf-color: var(--text);
|
--text-json-tree-leaf-color: var(--text);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Scrollbar */
|
/* Scrollbar */
|
||||||
@media only screen and (min-width: 768px) {
|
@media only screen and (min-width: 768px) {
|
||||||
@ -271,6 +271,19 @@ ul.sidebar .sidebar-title {
|
|||||||
background: var(--transparency-light-10);
|
background: var(--transparency-light-10);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.table>tbody>tr>td,
|
||||||
|
.table>tbody>tr>th,
|
||||||
|
.table>tfoot>tr>td,
|
||||||
|
.table>tfoot>tr>th,
|
||||||
|
.table>thead>tr>td,
|
||||||
|
.table>thead>tr>th {
|
||||||
|
border-top: 1px solid var(--transparency-light-10);
|
||||||
|
}
|
||||||
|
|
||||||
|
.table>thead>tr>th {
|
||||||
|
border-bottom: 2px solid var(--transparency-light-10);
|
||||||
|
}
|
||||||
|
|
||||||
.table-hover>tbody>tr.active:hover>td,
|
.table-hover>tbody>tr.active:hover>td,
|
||||||
.table-hover>tbody>tr.active:hover>th,
|
.table-hover>tbody>tr.active:hover>th,
|
||||||
.table-hover>tbody>tr:hover>.active,
|
.table-hover>tbody>tr:hover>.active,
|
||||||
@ -297,7 +310,8 @@ ul.sidebar .sidebar-title {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary,
|
.btn-primary,
|
||||||
.btn-default {
|
.btn-default,
|
||||||
|
button {
|
||||||
color: var(--button-text);
|
color: var(--button-text);
|
||||||
background-color: var(--button-color);
|
background-color: var(--button-color);
|
||||||
border-color: var(--button-color);
|
border-color: var(--button-color);
|
||||||
@ -398,51 +412,71 @@ fieldset[disabled] .btn-primary:hover {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* PAGINATION */
|
/* PAGINATION */
|
||||||
.pagination>.disabled>a,
|
|
||||||
.pagination>.disabled>a:focus,
|
|
||||||
.pagination>.disabled>a:hover,
|
|
||||||
.pagination>.disabled>span,
|
.pagination>.disabled>span,
|
||||||
|
.pagination>.disabled>span:hover,
|
||||||
.pagination>.disabled>span:focus,
|
.pagination>.disabled>span:focus,
|
||||||
.pagination>.disabled>span:hover {
|
.pagination>.disabled>button,
|
||||||
|
.pagination>.disabled>button:hover,
|
||||||
|
.pagination>.disabled>button:focus,
|
||||||
|
.pagination>.disabled>a,
|
||||||
|
.pagination>.disabled>a:hover,
|
||||||
|
.pagination>.disabled>a:focus {
|
||||||
color: var(--text-muted);
|
color: var(--text-muted);
|
||||||
cursor: not-allowed;
|
background-color: var(--button-color);
|
||||||
background: var(--transparency-light-10);
|
border-color: var(--button-color);
|
||||||
border-color: transparent;
|
}
|
||||||
|
|
||||||
|
.pagination>li>button {
|
||||||
|
position: relative;
|
||||||
|
float: left;
|
||||||
|
padding: 6px 12px;
|
||||||
|
margin-left: -1px !important;
|
||||||
|
line-height: 1.42857143;
|
||||||
|
text-decoration: none;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination>li>a,
|
||||||
|
.pagination>li>button,
|
||||||
|
.pagination>li>span {
|
||||||
|
background-color: var(--button-color);
|
||||||
|
border-color: var(--button-color);
|
||||||
|
color: var(--button-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination>li>a:hover,
|
||||||
|
.pagination>li>button:hover,
|
||||||
|
.pagination>li>span:hover,
|
||||||
|
.pagination>li>a:focus,
|
||||||
|
.pagination>li>button:focus,
|
||||||
|
.pagination>li>span:focus {
|
||||||
|
background-color: var(--button-color-hover);
|
||||||
|
border-color: var(--button-color-hover);
|
||||||
|
color: var(--button-text-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination>.active>a,
|
.pagination>.active>a,
|
||||||
.pagination>.active>a:focus,
|
|
||||||
.pagination>.active>a:hover,
|
|
||||||
.pagination>.active>span,
|
.pagination>.active>span,
|
||||||
|
.pagination>.active>button,
|
||||||
|
.pagination>.active>a:hover,
|
||||||
|
.pagination>.active>span:hover,
|
||||||
|
.pagination>.active>button:hover,
|
||||||
|
.pagination>.active>a:focus,
|
||||||
.pagination>.active>span:focus,
|
.pagination>.active>span:focus,
|
||||||
.pagination>.active>span:hover {
|
.pagination>.active>button:focus {
|
||||||
z-index: 2;
|
z-index: 3;
|
||||||
color: var(--button-text);
|
color: #fff;
|
||||||
cursor: default;
|
cursor: default;
|
||||||
background-color: var(--button-color-hover);
|
background-color: var(--button-color-hover);
|
||||||
border-color: var(--button-color-hover);
|
border-color: var(--button-color-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination>li>a,
|
|
||||||
.pagination>li>span {
|
|
||||||
text-decoration: none;
|
|
||||||
color: var(--button-text);
|
|
||||||
background-color: var(--button-color);
|
|
||||||
border-color: var(--button-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.pagination>li>a:focus,
|
|
||||||
.pagination>li>a:hover,
|
|
||||||
.pagination>li>span:focus,
|
|
||||||
.pagination>li>span:hover {
|
|
||||||
color: var(--button-text-hover);
|
|
||||||
background-color: var(--button-color-hover);
|
|
||||||
border-color: var(--button-color-hover);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* FORM CONTROL */
|
/* FORM CONTROL */
|
||||||
|
|
||||||
select:focus, select.form-control:focus {
|
select:focus,
|
||||||
|
select.form-control:focus {
|
||||||
background: var(--drop-down-menu-bg) !important;
|
background: var(--drop-down-menu-bg) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -714,3 +748,57 @@ pre {
|
|||||||
background: var(--transparency-dark-35) !important;
|
background: var(--transparency-dark-35) !important;
|
||||||
background: var(--transparency-dark-35) !important;
|
background: var(--transparency-dark-35) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* HOME PAGE */
|
||||||
|
|
||||||
|
.app-portainer-home-EnvironmentList-EnvironmentItem-EnvironmentItem-module__wrapperButton {
|
||||||
|
background: rgba(0, 0, 0, 0.2);
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-portainer-components-datatables-components-FilterSearchBar-module__searchBar {
|
||||||
|
border: 1px solid var(--transparency-light-15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-portainer-components-form-components-ReactSelect-module__root .selector__control {
|
||||||
|
border: 1px solid var(--transparency-light-25);
|
||||||
|
background-color: var(--transparency-dark-25);
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
background: var(--transparency-dark-25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.selector__menu {
|
||||||
|
background-color: var(--drop-down-menu-bg) !important;
|
||||||
|
border: 1px solid var(--drop-down-menu-bg) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selector__option {
|
||||||
|
background-color: var(--transparency-light-05) !important;
|
||||||
|
border: 1px solid var(--transparency-light-05) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root[theme=dark] .app-portainer-components-form-components-ReactSelect-module__root .selector__multi-value,
|
||||||
|
:root[theme=highcontrast] .app-portainer-components-form-components-ReactSelect-module__root .selector__multi-value {
|
||||||
|
background-color: rgb(var(--accent-color));
|
||||||
|
color: var(--label-text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
:root[theme=dark] .app-portainer-components-form-components-ReactSelect-module__root .selector__multi-value__label,
|
||||||
|
:root[theme=highcontrast] .app-portainer-components-form-components-ReactSelect-module__root .selector__multi-value__label {
|
||||||
|
color: var(--label-text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* ACCENTS */
|
||||||
|
|
||||||
|
.label-info,
|
||||||
|
.label-primary {
|
||||||
|
background-color: rgb(var(--accent-color));
|
||||||
|
color: var(--label-text-color);
|
||||||
|
}
|
@ -27,11 +27,11 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
*::-webkit-scrollbar-thumb,
|
*::-webkit-scrollbar-thumb,
|
||||||
[class*="-thumb-"] {
|
[class*="-thumb-"]:not([class*="QualityDefinition-thumb-"]) {
|
||||||
background-color: var(--transparency-light-25) !important;
|
background-color: var(--transparency-light-25) !important;
|
||||||
}
|
}
|
||||||
*::-webkit-scrollbar-thumb:hover,
|
*::-webkit-scrollbar-thumb:hover,
|
||||||
[class*="-thumb-"]:hover {
|
[class*="-thumb-"]:hover:not([class*="QualityDefinition-thumb-"]) {
|
||||||
background-color: var(--transparency-light-35) !important;
|
background-color: var(--transparency-light-35) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -398,6 +398,12 @@ a:hover {
|
|||||||
color: var(--label-text-color);
|
color: var(--label-text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[class*="QualityProfile-qualities-"] [class*="Label-info-"] {
|
||||||
|
border-color: rgb(var(--accent-color));
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--text-hover);
|
||||||
|
}
|
||||||
|
|
||||||
[class*="PageSidebarItem-status-"] [class*="Label-info-"] {
|
[class*="PageSidebarItem-status-"] [class*="Label-info-"] {
|
||||||
border-color: var(--arr-queue-color);
|
border-color: var(--arr-queue-color);
|
||||||
background-color: var(--arr-queue-color);
|
background-color: var(--arr-queue-color);
|
||||||
@ -631,7 +637,8 @@ a:hover {
|
|||||||
|
|
||||||
/* IMPORT */
|
/* IMPORT */
|
||||||
|
|
||||||
[class*="FieldSet-legend-"] {
|
[class*="FieldSet-legend-"],
|
||||||
|
[class*="FieldSet-legend-"][class*="FieldSet-small-"] {
|
||||||
color: var(--text-hover);
|
color: var(--text-hover);
|
||||||
border-bottom: 1px solid rgb(var(--accent-color));
|
border-bottom: 1px solid rgb(var(--accent-color));
|
||||||
}
|
}
|
||||||
@ -813,6 +820,14 @@ a:hover {
|
|||||||
color: var(--text);
|
color: var(--text);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[class*="QualityDefinition-qualityDefinition-"] {
|
||||||
|
border-top: 1px solid var(--transparency-light-25);
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="DelayProfile-delayProfile-"] {
|
||||||
|
border-bottom: 1px solid rgb(var(--accent-color));
|
||||||
|
}
|
||||||
|
|
||||||
/* INDEXSERS */
|
/* INDEXSERS */
|
||||||
[class*="Indexers-center-"] {
|
[class*="Indexers-center-"] {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
@ -20,7 +20,7 @@
|
|||||||
--accent-color-hover: #ffc107;
|
--accent-color-hover: #ffc107;
|
||||||
--link-color: #e5a00d;
|
--link-color: #e5a00d;
|
||||||
--link-color-hover: #fff;
|
--link-color-hover: #fff;
|
||||||
--label-text-color: #fff;
|
--label-text-color: #333;
|
||||||
|
|
||||||
--text:#ddd;
|
--text:#ddd;
|
||||||
--text-hover: #fff;
|
--text-hover: #fff;
|
||||||
|
@ -111,7 +111,7 @@ function createApps(apps,themeOptions) {
|
|||||||
<a class="portfolio-box" href="resources/landing-page/assets/img/${sortedThemes[option].toLowerCase()}.png">
|
<a class="portfolio-box" href="resources/landing-page/assets/img/${sortedThemes[option].toLowerCase()}.png">
|
||||||
<img class="img-fluid" src="resources/landing-page/assets/img/${sortedThemes[option].toLowerCase()}-small.jpg" alt="..." />
|
<img class="img-fluid" src="resources/landing-page/assets/img/${sortedThemes[option].toLowerCase()}-small.jpg" alt="..." />
|
||||||
<div class="portfolio-box-caption p-3 ${sortedThemes[option].toLowerCase()}-hover">
|
<div class="portfolio-box-caption p-3 ${sortedThemes[option].toLowerCase()}-hover">
|
||||||
<div class="project-category text-white-50">Theme</div>
|
<div class="project-category text-light">Theme</div>
|
||||||
<div class="project-name">${sortedThemes[option][0].toUpperCase() + sortedThemes[option].slice(1)}</div>
|
<div class="project-name">${sortedThemes[option][0].toUpperCase() + sortedThemes[option].slice(1)}</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
Loading…
Reference in New Issue
Block a user