ARCHBLOX
/
website
1
0
Fork 0
Code Issues Pull Requests 4 Packages Projects Releases Wiki Activity

Updated Utilities Themes & Strings. 

Updated the admin panel utility themes and updated some strings.
This commit is contained in:
tersiswilvin 2022-11-08 23:36:39 -08:00
parent 940a000adf
commit b8c4bd24a5
5 changed files with 83 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
public/css/NewAdminCSS.css → public/css/AdminPanelCSS.css
View File

@ -1,3 +1,7 @@
/*/ Written by TersisWilvin (TersisWilvin#0087) for the ARCHBLOX Admin Panel Utility Pages.
Includes -> Fallback Theme (Color Theme) -> Light Theme -> Dark Theme.
/*/
body { body {
min-width: 0px; min-width: 0px;
font-family: Arial,Helvetica,sans-serif; font-family: Arial,Helvetica,sans-serif;
@ -60,6 +64,12 @@ a {
font-weight: normal; font-weight: normal;
} }
.AdminPanel {
height: 100%;
}
#MasterContainer.AdminPanel {
background: #e3e3e3;
}
.light-theme #MasterContainer.AdminPanel { .light-theme #MasterContainer.AdminPanel {
background-color: #ccc; background-color: #ccc;
} }
@ -69,6 +79,10 @@ a {
#MasterContainer #BodyWrapper { #MasterContainer #BodyWrapper {
padding-top: 25px; padding-top: 25px;
} }
#MasterContainer #BodyWrapper {
background: #e3e3e3;
color: #191919;
}
.light-theme #MasterContainer #BodyWrapper { .light-theme #MasterContainer #BodyWrapper {
background-color: #ccc; background-color: #ccc;
color: #2d312d; color: #2d312d;
@ -77,13 +91,11 @@ a {
background-color: #111; background-color: #111;
color: #ddd color: #ddd
} }
.AdminPanel {
height: 100%;
}
#AdminWrapper.Navigation { #AdminWrapper.Navigation {
width: 100%; width: 100%;
} }
.AdminHeader { .AdminHeader {
background: #0074bd;
width: 100%; width: 100%;
height: 75px; height: 75px;
z-index: 2; z-index: 2;
@ -96,6 +108,9 @@ a {
background-color: #333; background-color: #333;
} }
.AdminSubHeader { .AdminSubHeader {
background: #0074bd; /*/Fallback for older browsers/*/
background: linear-gradient(180deg, #0074bd, #004774);
box-shadow: 0 2px 8px 0 #000;
width: 100%; width: 100%;
height: 25px; height: 25px;
z-index: 1; z-index: 1;
@ -125,6 +140,7 @@ a {
justify-content: center; justify-content: center;
} }
.AdminSubHeader li { .AdminSubHeader li {
color: #191919;
width: 25%; width: 25%;
text-align: center; text-align: center;
list-style: none; list-style: none;
@ -137,6 +153,7 @@ a {
color: #fff; color: #fff;
} }
.AdminSubHeader li a { .AdminSubHeader li a {
color: #fff;
font-size: 14px; font-size: 14px;
font-weight: 100; font-weight: 100;
cursor: pointer; cursor: pointer;
@ -151,7 +168,7 @@ a {
.AdminSubHeader li a:hover, .AdminSubHeader li a:active { .AdminSubHeader li a:hover, .AdminSubHeader li a:active {
transition: .1s all linear; transition: .1s all linear;
} }
.light-theme .AdminSubHeader li a:hover, .light-theme .AdminSubHeader li a:active, .dark-theme .AdminSubHeader li a:hover, .dark-theme .AdminSubHeader li a:active { .AdminSubHeader li a:hover, .AdminSubHeader li a:active, .light-theme .AdminSubHeader li a:hover, .light-theme .AdminSubHeader li a:active, .dark-theme .AdminSubHeader li a:hover, .dark-theme .AdminSubHeader li a:active {
color: #fff; color: #fff;
box-shadow: 0 2px 0 0 #fff; box-shadow: 0 2px 0 0 #fff;
} }
@ -202,6 +219,8 @@ a {
content: '\2794'; content: '\2794';
} }
.AdminHeader .Slogan { .AdminHeader .Slogan {
color: #fff;
text-shadow: #00000091 2px 2px;
font-size: 16px; font-size: 16px;
font-weight: 100; font-weight: 100;
display: block; display: block;
@ -226,6 +245,7 @@ a {
width: 200px; width: 200px;
height: 40px; height: 40px;
padding: 5px; padding: 5px;
opacity: .9;
background-image: url(/img/MORBLOXlogo.png); background-image: url(/img/MORBLOXlogo.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
@ -243,6 +263,9 @@ a {
.AdminHeader .SiteBrand:hover { .AdminHeader .SiteBrand:hover {
opacity: 1; opacity: 1;
} }
.AdminPanel #Body {
background: #e3e3e3
}
.light-theme .AdminPanel #Body { .light-theme .AdminPanel #Body {
background-color: #ccc; background-color: #ccc;
} }
@ -260,21 +283,28 @@ a {
user-select: none; user-select: none;
} }
.AdminPanel .Reminder { .AdminPanel .Reminder {
color: #f68802
}
.light-theme .AdminPanel .Reminder, .dark-theme .AdminPanel .Reminder {
color: #ff7300 color: #ff7300
} }
.text-error { .text-error {
display: block; display: block;
text-align: center; text-align: center;
color: #d6241a; color: #d86868;
font-weight: 200; font-weight: 200;
padding: 5px; padding: 5px;
} }
.light-theme .text-error, .dark-theme .text-error {
color: #d6241a;
}
.text-header { .text-header {
display: block; display: block;
text-align: center; text-align: center;
padding: 5px 0; padding: 5px 0;
} }
.text-secondary { .text-secondary {
color: #191919;
display: inline-block; display: inline-block;
text-align: left; text-align: left;
} }
@ -293,8 +323,11 @@ a {
padding: 15px; padding: 15px;
border: 1px dashed #ff7300; border: 1px dashed #ff7300;
} }
.AdminPanel .StatsContainer {
background-color: #b8b8b8;
}
.light-theme .AdminPanel .StatsContainer { .light-theme .AdminPanel .StatsContainer {
background-color: #aaa; background-color: #aaa;
} }
.dark-theme .AdminPanel .StatsContainer { .dark-theme .AdminPanel .StatsContainer {
background-color: #080808; background-color: #080808;
@ -318,6 +351,9 @@ a {
color: #d41900; color: #d41900;
} }
.AdminPanel #SearchInput { .AdminPanel #SearchInput {
border: 1px solid #b8b8b8;
color: #191919;
background: #fff;
border-radius: 3px; border-radius: 3px;
} }
.light-theme .AdminPanel #SearchInput { .light-theme .AdminPanel #SearchInput {
@ -337,6 +373,7 @@ a {
margin: 0 5px; margin: 0 5px;
} }
.AdminPanel .Stats { .AdminPanel .Stats {
color: #191919;
font-size: 16px; font-size: 16px;
font-weight: 100; font-weight: 100;
cursor: default; cursor: default;
@ -354,6 +391,7 @@ a {
color: #a7a7a7; color: #a7a7a7;
} }
.AdminPanel .Stats.Counter { .AdminPanel .Stats.Counter {
color: #000;
font-weight: 400; font-weight: 400;
} }
.light-theme .AdminPanel .Stats.Counter { .light-theme .AdminPanel .Stats.Counter {
@ -363,6 +401,8 @@ a {
color: #fff; color: #fff;
} }
.AdminPanel .Stat-Separator { .AdminPanel .Stat-Separator {
background: #000; /*/Fallback for older browsers/*/
background: linear-gradient(90deg,#ffffff00 0%, #fff 50%, #ffffff00 100%);
width: 50%; width: 50%;
height: 1px; height: 1px;
display: block; display: block;
@ -377,6 +417,7 @@ a {
background: linear-gradient(90deg,#55555500 0%, #555 50%, rgb(85, 85, 85,0) 100%); background: linear-gradient(90deg,#55555500 0%, #555 50%, rgb(85, 85, 85,0) 100%);
} }
.AdminPanel .SearchContainer { .AdminPanel .SearchContainer {
background: #b8b8b8;
width: 235px; width: 235px;
height: auto; height: auto;
border-radius: 5px; border-radius: 5px;
@ -397,6 +438,8 @@ a {
background-color: #555; background-color: #555;
} }
.SearchContainer .Thumbnail { .SearchContainer .Thumbnail {
background-color: #b8b8b8;
border: 5px solid #e3e3e3;
height: 64px; height: 64px;
width: 64px; width: 64px;
margin-top: -37px; margin-top: -37px;
@ -404,11 +447,11 @@ a {
} }
.light-theme .SearchContainer .Thumbnail { .light-theme .SearchContainer .Thumbnail {
background-color: #bbb; background-color: #bbb;
border: 5px solid #ccc; border-color: #ccc;
} }
.dark-theme .SearchContainer .Thumbnail { .dark-theme .SearchContainer .Thumbnail {
background-color: #555; background-color: #555;
border: 5px solid #111; border-color: #111;
} }
.SearchBoard { .SearchBoard {
width: 100%; width: 100%;
@ -458,9 +501,13 @@ a {
color: #fff; color: #fff;
} }
.AuthenticatedUserName, .logoutarrow { .AuthenticatedUserName, .logoutarrow {
color: #00a2ff;
transition: .25s all ease-in-out; transition: .25s all ease-in-out;
display: inline-block; display: inline-block;
} }
.AuthenticatedUserName {
color: #00a2ff;
}
.light-theme .AuthenticatedUserName, .light-theme .logoutarrow { .light-theme .AuthenticatedUserName, .light-theme .logoutarrow {
color: #0387bb; color: #0387bb;
} }
@ -504,11 +551,14 @@ a {
border-radius: 50%; border-radius: 50%;
margin: -8px; margin: -8px;
} }
.online, .offline, .ingame {
border: 2px solid #e3e3e3;
}
.light-theme .online, .light-theme .offline, .light-theme .ingame { .light-theme .online, .light-theme .offline, .light-theme .ingame {
border: 2px solid #ccc; border-color: #ccc;
} }
.dark-theme .online, .dark-theme .offline, .dark-theme .ingame { .dark-theme .online, .dark-theme .offline, .dark-theme .ingame {
border: 2px solid #111; border-color: #111;
} }
.info-hidden { .info-hidden {
font-style: italic; font-style: italic;
@ -525,7 +575,7 @@ a {
user-select: none; user-select: none;
} }
.info-email { .info-email {
color: #c9c9c9; color: #444;
} }
/*Heavily based off of the roblox developer tree list (because it looks cool)*/ /*Heavily based off of the roblox developer tree list (because it looks cool)*/
@ -545,6 +595,7 @@ a {
min-height: 550px; min-height: 550px;
} }
.SearchTree a { .SearchTree a {
color: #191919;
transition: .15s all ease-in-out; transition: .15s all ease-in-out;
font-size: 14px; font-size: 14px;
margin: 0 0 0 38px; margin: 0 0 0 38px;
@ -553,6 +604,9 @@ a {
top: 18px; top: 18px;
display: inline-block; display: inline-block;
} }
.SearchTree a:hover {
color: #00a2ff;
}
.light-theme .SearchTree a { .light-theme .SearchTree a {
color: #565656; color: #565656;
} }
@ -567,6 +621,7 @@ a {
} }
.SearchTree a::after { .SearchTree a::after {
content: ''; content: '';
border: 1px solid #191919;
border-radius: 100%; border-radius: 100%;
width: 2px; width: 2px;
height: 2px; height: 2px;
@ -576,10 +631,10 @@ a {
top: 9px; top: 9px;
} }
.light-theme .SearchTree a::after { .light-theme .SearchTree a::after {
border: 1px solid #222; border-color: #222;
} }
.dark-theme .SearchTree a::after { .dark-theme .SearchTree a::after {
border: 1px solid #555; border-color: #555;
} }
.SearchTree a span { .SearchTree a span {
display: block; display: block;
@ -594,9 +649,6 @@ a {
#BodyWrapper .forwardArrow::before { #BodyWrapper .forwardArrow::before {
content: '\2794'; content: '\2794';
} }
.SearchTree .forwardArrow:hover {
color: #00b7ff;
}
#BodyWrapper .forwardArrow { #BodyWrapper .forwardArrow {
position: relative; position: relative;
display: inline-block; display: inline-block;
@ -622,14 +674,15 @@ a {
border-radius: 100%; border-radius: 100%;
} }
.TreeList { .TreeList {
border-left: 1px dashed #191919;
margin: 13px 0 0 30px; margin: 13px 0 0 30px;
padding: 0; padding: 0;
} }
.light-theme .TreeList { .light-theme .TreeList {
border-left: 1px dashed #222; border-color: #222;
} }
.dark-theme .TreeList { .dark-theme .TreeList {
border-left: 1px dashed #555; border-color: #555;
} }
#DropDown.TreeList { #DropDown.TreeList {
min-height: 550px; min-height: 550px;
@ -649,6 +702,7 @@ a {
padding-bottom: 0; padding-bottom: 0;
} }
.SearchTree li ul li:before { .SearchTree li ul li:before {
border-top: 1px dashed #191919;
content: ''; content: '';
display: inline-block; display: inline-block;
width: 25px; width: 25px;
@ -658,10 +712,10 @@ a {
top: 28px; top: 28px;
} }
.light-theme .SearchTree li ul li:before { .light-theme .SearchTree li ul li:before {
border-top: 1px dashed #222; border-color: #222;
} }
.dark-theme .SearchTree li ul li:before { .dark-theme .SearchTree li ul li:before {
border-top: 1px dashed #555; border-color: #555;
} }
@media (max-width:990px) { @media (max-width:990px) {

3
resources/views/admin/index.blade.php
View File

@ -5,6 +5,9 @@
@section('Body') @section('Body')
<div id="Body" style="width: 970px;"> <div id="Body" style="width: 970px;">
<h2 class="MainHeader hidden">
ARCHBLOX Status
</h2>
<h2 class="MainHeader"> <h2 class="MainHeader">
Status Status
</h2> </h2>

14
resources/views/admin/tree.blade.php
View File

@ -1,16 +1,6 @@
@extends('layouts.admin') @extends('layouts.admin')
@section('title') @section('title')
<title> <title>Admin | Invite Tree - {{ env('APP_NAME') }}</title>
Admin | Invite Tree - {{ env('APP_NAME') }}</title>
<style>
.flex {
display: block !important;
}
#SearchContainer a {
font-weight: normal !important;
}
</style>
@endsection @endsection
@section('Body') @section('Body')
@ -21,7 +11,7 @@
@if (!request()->has('q')) @if (!request()->has('q'))
<h5 class="SubHeader">Enter a Username or ID.</h5> <h5 class="SubHeader">Enter a Username or ID.</h5>
@elseif (!$user) @elseif (!$user)
<h5 class="SubHeader text-error">Unable to find user, please check if you entered the correct information.</h5> <h5 class="SubHeader text-error">Unable to get user information, please make sure the information you provided is correct.</h5>
@endif @endif
<div class="Userlist"> <div class="Userlist">
<form method="GET" action="{{ route('admin_tree') }}"> <form method="GET" action="{{ route('admin_tree') }}">

8
resources/views/admin/users.blade.php
View File

@ -1,8 +1,6 @@
@extends('layouts.admin') @extends('layouts.admin')
@section('title') @section('title')
<title> <title>Admin | User List - {{ env('APP_NAME') }}</title>
Admin | User List - {{ env('APP_NAME') }}
</title>
@endsection @endsection
@section('Body') @section('Body')
@ -11,7 +9,7 @@
User List User List
</h2> </h2>
<h5 class="SubHeader Reminder"> <h5 class="SubHeader Reminder">
Reminder, don't leak any users' date of birth or email address. (Reminder) Please don't leak any users information!
</h5> </h5>
<div class="Userlist"> <div class="Userlist">
<form method="GET" action="{{ route('admin_users') }}"> <form method="GET" action="{{ route('admin_users') }}">
@ -263,7 +261,7 @@
@endforeach @endforeach
@if ($users->isEmpty()) @if ($users->isEmpty())
<span class="text-error"> <span class="text-error">
Unable to find user, please check if you entered the correct information. Unable to get user information, please make sure the information you provided is correct.
</span> </span>
@endif @endif
</div> </div>

2
resources/views/layouts/admin.blade.php
View File

@ -17,7 +17,7 @@
<meta name="viewport" content="width=device-width, viewport-fit=cover, initial-scale=1"> <meta name="viewport" content="width=device-width, viewport-fit=cover, initial-scale=1">
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}"> <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}">
<link href="{{ asset('css/app.css?id=e5Az527Gb1') }}" rel="stylesheet"> <link href="{{ asset('css/app.css?id=e5Az527Gb1') }}" rel="stylesheet">
<link href="/css/NewAdminCSS.css" rel="stylesheet"> <link href="/css/AdminPanelCSS.css" rel="stylesheet">
<script src="{{ asset('js/detect_iphone.js') }}" defer></script> <script src="{{ asset('js/detect_iphone.js') }}" defer></script>
</head> </head>