This page lists files in the current directory. You can view content, get download/execute commands for Wget, Curl, or PowerShell, or filter the list using wildcards (e.g., `*.sh`).
wget 'https://lists2.roe3.org/mdrone/cssmaker/CSSmaker1.png'wget 'https://lists2.roe3.org/mdrone/cssmaker/ajxSaveCSS.php'<?PHP
function wzGetPost($fncPostVariable, $fncDefault = '') {
$fncResult = isset($_POST[$fncPostVariable]) ? $_POST[$fncPostVariable] : '';
if ($fncResult == ''):
$fncResult = $fncDefault;
endif; // $fncResult == ''
return $fncResult ;
} // end of wzGetPost
$pgFileName = wzGetPost('fileName');
$pgGradientLeft = wzGetPost('--gradient-left');
$pgGradientRight = wzGetPost('--gradient-right');
$pgColor1 = wzGetPost('--btn-color');
$pgColor2 = wzGetPost('--btn-border-color');
$pgColor3 = wzGetPost('--btn-hover');
$pgColor4 = wzGetPost('--href-link');
$pgColor5 = wzGetPost('--active-label');
$pgColor6 = wzGetPost('--light-theme-focus');
$pgColor7 = wzGetPost('--dark-theme-focus');
$pgColor8 = wzGetPost('--bg-second-color');
$pgHtm =<<<htmVAR
/*
This file to be used with these files in this order:
materialize.min.css
{this file}
wtkLight.css or wtkDark.css
wtkGlobal.css
*/
:root {
--gradient-left: $pgGradientLeft;
--gradient-right: $pgGradientRight;
--gradient-color: linear-gradient(to right, var(--gradient-left), var(--gradient-right));
--btn-color: $pgColor1;
--btn-border-color: $pgColor2;
--btn-hover: $pgColor3;
--href-link: $pgColor4;
--active-label: $pgColor5;
--light-theme-focus: $pgColor6;
--dark-theme-focus: $pgColor7;
--bg-second-color: $pgColor8;
}
htmVAR;
$pgCssName = 'wtk' . $pgFileName . '.css';
$pgFile = fopen($pgCssName, 'w');
fwrite($pgFile, $pgHtm);
fclose($pgFile);
echo '{"result":"ok"}';
exit; // no display needed, handled via JS and main.htm
?>
wget 'https://lists2.roe3.org/mdrone/cssmaker/cssMaker.php'<?php
function wzGetPost($fncPostVariable, $fncDefault = '') {
$fncResult = isset($_POST[$fncPostVariable]) ? $_POST[$fncPostVariable] : '';
if ($fncResult == ''):
$fncResult = $fncDefault;
endif; // $fncResult == ''
return $fncResult ;
} // end of wzGetPost
$pgTheme = wzGetPost('pickTheme','Light');
if ($pgTheme == 'Light'):
$pgLightChecked = 'checked=""';
$pgDarkChecked = '';
else:
$pgLightChecked = '';
$pgDarkChecked = 'checked=""';
endif;
$pgColorSelect = '';
foreach (glob("wtk*.css") as $pgFile):
$pgFile = str_replace('wtk', '', $pgFile);
$pgFile = str_replace('.css', '', $pgFile);
switch ($pgFile):
case 'Global':
case 'Light':
case 'Dark':
// skip
break;
default:
$pgColorSelect .= '<option value="' . $pgFile . '">' . $pgFile . '</option>' . "\n";
break;
endswitch;
endforeach;
$pgColor = wzGetPost('pickColor','Blue');
$pgColorSelect = str_replace('>' . $pgColor . '<', ' selected>' . $pgColor . '<', $pgColorSelect);
?>
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wizards Toolkit</title>
<link rel="shortcut icon" href="/wz/imgs/wtk.ico" type="image/x-icon" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/font-awesome-line-awesome/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="wtk<?php echo $pgColor; ?>.css">
<link id="theme" rel="stylesheet" href="wtk<?php echo $pgTheme; ?>.css">
<link rel="stylesheet" href="wtkGlobal.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" defer></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js" defer></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.4.6/jscolor.min.js" defer></script>
<script type="text/javascript">
'use strict';
function getCssRoot(){
$(document).ready(function() {
M.AutoInit();
makeAPicker('--gradient-left');
makeAPicker('--gradient-right');
makeAPicker('--btn-color');
makeAPicker('--btn-border-color');
makeAPicker('--btn-hover');
makeAPicker('--href-link');
makeAPicker('--active-label');
makeAPicker('--light-theme-focus');
makeAPicker('--dark-theme-focus');
makeAPicker('--bg-second-color');
jscolor.trigger('input change');
let fncElems = document.querySelectorAll('.tooltipped');
let fncTmp = M.Tooltip.init(fncElems);
M.updateTextFields();
});
}
function makeAPicker(fncClass){
let fncColor = getComputedStyle(document.documentElement).getPropertyValue(fncClass);
$('#' + fncClass).val(fncColor);
$('#' + fncClass).addClass('jscolor');
var myPicker = new JSColor('#' + fncClass, {preset:'dark'});
}
function swapStyleSheet(fncTheme) {
document.getElementById('theme').setAttribute('href', 'wtk' + fncTheme + '.css');
}
function setCssRoot(fncId,fncColor){
if ((fncId == '--gradient-left') || (fncId == '--gradient-right')){
var fncLeftColor = document.getElementById('--gradient-left').value;
var fncRightColor = document.getElementById('--gradient-right').value;
document.documentElement.style.setProperty('--gradient-color', 'linear-gradient(to right, ' + fncLeftColor + ', ' + fncRightColor + ')');
} else {
document.documentElement.style.setProperty(fncId, fncColor);
}
}
function saveCSS(){
let fncFormData = $('#cssForm').serialize();
let fncFileName = $('#fileName').val();
fncFormData = fncFormData + '&fileName=' + fncFileName;
$.ajax({
type: "POST",
url: 'ajxSaveCSS.php',
data: (fncFormData),
success: function(data) {
M.toast({html: 'Your new CSS file has been created.', classes: 'green rounded'});
let fncSelect = document.getElementById('pickColor');
let fncOpt = document.createElement('option');
fncOpt.value = fncFileName;
fncOpt.innerHTML = fncFileName;
fncSelect.appendChild(fncOpt);
$('select').formSelect();
}
})
}
function ajaxGo(fncPage){
alert('In Wizard Toolkit this would direct user to ' + fncPage + ' page using Single-Page Application methodology.')
}
</script>
<style>
.w72 {
width: 72px !important;
}
</style>
</head>
<body onload="JavaScript:getCssRoot();">
<div id="myNavbar">
<ul id="dropdown1" class="dropdown-content">
<li><a onclick="Javascript:ajaxGo('companyEdit');">Settings</a></li>
<li><a onclick="Javascript:ajaxGo('userList');">Users</a></li>
<li><a onclick="Javascript:ajaxGo('reportViewer');">Reports Viewer</a></li>
<li><a onclick="Javascript:ajaxGo('promoPlanList');">Promotions</a></li>
<li><a onclick="Javascript:ajaxGo('shortenedURLlist');">Shortened URLs</a></li>
</ul>
<ul id="dropdown2" class="dropdown-content">
<li><a onclick="Javascript:ajaxGo('emailTemplates');">Email Templates</a></li>
<li><a onclick="Javascript:ajaxGo('emailHistory');">Email History</a></li>
<li><a onclick="Javascript:ajaxGo('emailWizard');">Bulk Email</a></li>
</ul>
<ul id="dropdown3" class="dropdown-content">
<li><a onclick="Javascript:ajaxGo('wtkBuilder');">WTK Builder</a></li>
<li><a onclick="Javascript:ajaxGo('reportList');">Reports</a></li>
<li><a onclick="Javascript:ajaxGo('lookupList');">Lookups</a></li>
<li><a onclick="Javascript:ajaxGo('pageList');">Page List</a></li>
<li><a onclick="Javascript:ajaxGo('menuSetList');">Menu Sets</a></li>
<li><a onclick="Javascript:ajaxGo('helpList');">Help</a></li>
<li><a onclick="Javascript:ajaxGo('languageList');">Language</a></li>
</ul>
<ul id="dropdown4" class="dropdown-content">
<li><a onclick="Javascript:ajaxGo('loginLogList');">Login Log</a></li>
<li><a onclick="Javascript:ajaxGo('userHistory');">User History</a></li>
<li><a onclick="Javascript:ajaxGo('updateLogList');">Update Logs</a></li>
<li><a onclick="Javascript:ajaxGo('errorLogList');">Error Logs</a></li>
<li><a onclick="Javascript:ajaxGo('failedAttemptList');">Access Fails</a></li>
</ul>
<div class="navbar-fixed">
<nav id="cssNavBar" class="navbar navbar-home">
<div class="nav-wrapper">
<a data-target="phoneSideBar" class="sidenav-trigger right"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<li><a class="dropdown-trigger" data-target="dropdown1">Client Control<i class="material-icons top-down">arrow_drop_down</i></a></li>
<li><a class="dropdown-trigger" data-target="dropdown2">Email Management<i class="material-icons top-down">arrow_drop_down</i></a></li>
<li><a class="dropdown-trigger" data-target="dropdown3">Site Management<i class="material-icons top-down">arrow_drop_down</i></a></li>
<li><a class="dropdown-trigger" data-target="dropdown4">View Logs<i class="material-icons top-down">arrow_drop_down</i></a></li>
<li><a href="/">Logout</a></li>
</ul>
</div>
</nav>
</div>
<!-- Next is Side Menu for Phones -->
<div class="sidebar-panel">
<ul id="phoneSideBar" class="sidenav side-nav">
<li class="no-padding">
<ul class="collapsible">
<li>
<a class="collapsible-header"><i class="material-icons">arrow_drop_down</i>Client Control</a>
<div class="collapsible-body">
<ul>
<li><a onclick="Javascript:ajaxGo('companyEdit');">Settings</a></li>
<li><a onclick="Javascript:ajaxGo('userList');">Users</a></li>
<li><a onclick="Javascript:ajaxGo('reportViewer');">Reports Viewer</a></li>
<li><a onclick="Javascript:ajaxGo('promoPlanList');">Promotions</a></li>
<li><a onclick="Javascript:ajaxGo('shortenedURLlist');">Shortened URLs</a></li>
</ul>
</div>
</li>
</ul>
<ul class="collapsible">
<li>
<a class="collapsible-header"><i class="material-icons">arrow_drop_down</i>Email Management</a>
<div class="collapsible-body">
<ul>
<li><a onclick="Javascript:ajaxGo('emailTemplates');">Email Templates</a></li>
<li><a onclick="Javascript:ajaxGo('emailHistory');">Email History</a></li>
<li><a onclick="Javascript:ajaxGo('emailWizard');">Bulk Email</a></li>
</ul>
</div>
</li>
</ul>
<ul class="collapsible">
<li>
<a class="collapsible-header"><i class="material-icons">arrow_drop_down</i>Site Management</a>
<div class="collapsible-body">
<ul>
<li><a onclick="Javascript:ajaxGo('wtkBuilder');">WTK Builder</a></li>
<li><a onclick="Javascript:ajaxGo('reportList');">Reports</a></li>
<li><a onclick="Javascript:ajaxGo('lookupList');">Lookups</a></li>
<li><a onclick="Javascript:ajaxGo('pageList');">Page List</a></li>
<li><a onclick="Javascript:ajaxGo('menuSetList');">Menu Sets</a></li>
<li><a onclick="Javascript:ajaxGo('helpList');">Help</a></li>
<li><a onclick="Javascript:ajaxGo('languageList');">Language</a></li>
</ul>
</div>
</li>
</ul>
<ul class="collapsible">
<li>
<a class="collapsible-header"><i class="material-icons">arrow_drop_down</i>View Logs</a>
<div class="collapsible-body">
<ul>
<li><a onclick="Javascript:ajaxGo('loginLogList');">Login Log</a></li>
<li><a onclick="Javascript:ajaxGo('userHistory');">User History</a></li>
<li><a onclick="Javascript:ajaxGo('updateLogList');">Update Logs</a></li>
<li><a onclick="Javascript:ajaxGo('errorLogList');">Error Logs</a></li>
<li><a onclick="Javascript:ajaxGo('failedAttemptList');">Access Fails</a></li>
</ul>
</div>
</li>
</ul>
</li>
<li><a href="/">Logout</a></li>
</ul>
</div>
<div id="mainPage">
<div class="container">
<h3>CSS Maker <small><a href="/">by Wizards Toolkit</a></small></h3><br>
<h4>Choose Colors <small> <a target="_blank" href="WTKcssMaker.zip">download full set</a></small></h4>
<p>Set the CSS variables which will affect how all elements on your page look. For help with trending
color palettes, check out <a target="_blank" href="https://coolors.co/palettes/trending">coolors.co</a>.</p>
<form id="cssForm" method="post">
<div class="row">
<div class="input-field col m2 s12">
<input type="text" class="form-input w72" oninput="JavaScript:setCssRoot(this.id, this.jscolor)" id="--gradient-left" name="--gradient-left" value="">
<label class="active" for="--gradient-left">Gradient Left</label>
</div>
<div class="input-field col m2 s12">
<input type="text" class="form-input w72" oninput="JavaScript:setCssRoot(this.id, this.jscolor)" id="--gradient-right" name="--gradient-right" value="">
<label class="active" for="--gradient-right">Gradient Right</label>
</div>
<div class="input-field col m2 s12">
<input type="text" class="form-input w72" oninput="JavaScript:setCssRoot(this.id, this.jscolor)" id="--btn-color" name="--btn-color" value="">
<label class="active" for="--btn-color">Button Color</label>
</div>
<div class="input-field col m2 s12">
<input type="text" class="form-input w72" oninput="JavaScript:setCssRoot(this.id, this.jscolor)" id="--btn-border-color" name="--btn-border-color" value="">
<label class="active" for="--btn-border-color">Button Border</label>
</div>
<div class="input-field col m2 s12">
<input type="text" class="form-input w72" oninput="JavaScript:setCssRoot(this.id, this.jscolor)" id="--btn-hover" name="--btn-hover" value="">
<label class="active" for="--btn-hover">Button Hover</label>
</div>
<div class="input-field col m2 s12">
<input type="text" class="form-input w72" oninput="JavaScript:setCssRoot(this.id, this.jscolor)" id="--href-link" name="--href-link" value="">
<label class="active" for="--href-link">Href Links</label>
</div>
<div class="input-field col m2 s12">
<input type="text" class="form-input w72" oninput="JavaScript:setCssRoot(this.id, this.jscolor)" id="--active-label" name="--active-label" value="">
<label class="active" for="--active-label">Active Label</label>
</div>
<div class="input-field col m2 s12">
<input type="text" class="form-input w72" oninput="JavaScript:setCssRoot(this.id, this.jscolor)" id="--light-theme-focus" name="--light-theme-focus" value="">
<label class="active" for="--light-theme-focus">Light Theme Focus</label>
</div>
<div class="input-field col m2 s12">
<input type="text" class="form-input w72" oninput="JavaScript:setCssRoot(this.id, this.jscolor)" id="--dark-theme-focus" name="--dark-theme-focus" value="">
<label class="active" for="--dark-theme-focus">Dark Theme Focus</label>
</div>
<div class="input-field col m2 s12">
<input type="text" class="form-input w72" oninput="JavaScript:setCssRoot(this.id, this.jscolor)" id="--bg-second-color" name="--bg-second-color" value="">
<label class="active" for="--bg-second-color">Second Background</label>
</div>
<div class="input-field col m3 s12">
<button type="button" data-target="modalWTK" class="btn btn-save modal-trigger tooltipped" data-tooltip="Save as CSS File">Save File</button>
</div>
</form>
</div>
<div class="card b-shadow">
<div class="card-content">
<div class="row">
<div class="col s10 offset-s1">
<br>
<div class="card bg-second b-shadow">
<div class="card-content">
<form id="wtkForm" name="wtkForm" method="post">
<h5>Select Theme and Color</h5>
<div class="row">
<div class="input-field col m6 s12">
Choose Theme
<p>
<label for="pickThemeL">
<input class="with-gap" onclick="JavaScript:swapStyleSheet(this.value)" type="radio" id="pickThemeL" name="pickTheme" value="Light" <?php echo $pgLightChecked; ?>>
<span>Light</span>
</label>
</p>
<p>
<label for="pickThemeD">
<input class="with-gap" onclick="JavaScript:swapStyleSheet(this.value)" type="radio" id="pickThemeD" name="pickTheme" value="Dark" <?php echo $pgDarkChecked; ?>>
<span>Dark</span>
</label>
</p>
</div>
<div class="input-field col m6 s6">
<select id="pickColor" name="pickColor">
<?php echo $pgColorSelect; ?>
</select>
<label for="pickColor" class="active">Choose Color</label>
</div>
<div class="col s12 center">
<button type="button" class="btn-cancel b-shadow waves-effect waves-light">Cancel</button>
<button type="submit" class="btn-action-bg btn-save b-shadow waves-effect waves-light">Change Color</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!--<hr>-->
<form id="notUsedForm">
<div class="row">
<div class="input-field col m6 s12">
<blockquote>Example blockquote tag where MaterializeCSS shows a bar on left.
<ul>
<li><a target="_blank" href="https://wizardstoolkit.com/">Wizards Toolkit</a> low-code development library</li>
<li><a target="_blank" href="https://wizbits.me/">WizBits</a> shortened URL service</li>
<li><a target="_blank" href="https://extragood.info/">Mage Page</a> free landing page service</li>
<li><a target="_blank" href="https://materializecss.com/">MaterializeCSS</a> modern responsive front-end framework based on Material Design</li>
</ul>
</blockquote>
</div>
<div class="input-field col m6 s12">
<table>
<tr style="border: unset;">
<td width="150px">
<img id="imgPreview" src="/wz/imgs/noPhotoAvail.png" class="materialboxed" width="150">
</td>
<td>
<label for="wzUpload" class="fileUpload">
<input type="file" id="wzUpload" name="wzUpload" accept="image/*" style="display: none;">
<span class="btn-floating"><i class="material-icons">file_upload</i></span>
User Photo
</label>
</td>
</tr>
</table>
<div id="photoProgressDIV" class="progress hide">
<div id="photoProgress" class="determinate" style="width: 0%"></div>
</div>
<div id="uploadStatus"></div>
<span id="uploadFileSize"></span>
<span id="uploadProgress"></span>
</div>
</div>
<div class="row">
<div class="input-field col m6 s12">
<input type="text" id="someText" name="someText" value="">
<label class="active" for="someText">Some Text Field</label>
</div>
<div class="input-field col m6 s12">
<input type="email" class="validate" id="someEmail" name="someEmail" value="yourEmail@me.com">
<label class="active" for="someEmail">Email with Validation</label>
<span class="helper-text" data-error="invalid email format" data-success="valid email format"></span>
</div>
</div>
<div class="row">
<div class="input-field col m6 s12">
<i class="material-icons prefix">phone</i>
<input type="tel" id="somePhone" name="somePhone" value="">
<label for="somePhone">Phone</label>
</div>
<div class="input-field col m6 s12">
<select id="someSelect" name="someSelect">
<option value="Emp">Customer Service</option>
<option value="Mgr">Manager</option>
<option value="Tech">Tech Support</option>
</select>
<label for="someSelect" class="active">Select Drop List</label>
</div>
</div>
<div class="row">
<div class="input-field col m3 s6">
<input type="text" class="datepicker" id="someDate" name="someDate" style="width: unset !important;">
<label class="active" for="someDate">Some Date</label>
</div>
<div class="input-field col m3 s6">
<input type="text" class="timepicker" id="someTime" name="someTime">
<label class="active" for="someTime">Some Time</label>
</div>
<div class="input-field col m6 s12">
<textarea id="someTextarea" class="materialize-textarea"></textarea>
<label for="someTextarea" class="active">Textarea Example</label>
</div>
</div>
<div class="row">
<div class="input-field col m4 s12">
<p>
<label for="someCanPrint">
<input type="checkbox" value="Y" id="someCanPrint" name="someCanPrint" checked>
<span>Checkbox Example</span>
</label>
</p>
</div>
<div class="input-field col m4 s12">
Switch Example
<div class="switch">
<label>
Off
<input type="checkbox" checked="checked">
<span class="lever"></span>
On
</label>
</div>
</div>
<div class="input-field col m4 s12">
Range Example
<p class="range-field">
<input type="range" id="someRange" min="0" max="50" />
</p>
</div>
</div>
</form>
</div>
</div>
<h2>Report List</h2>
<br>
<div class="search-result">
<h6>Quick Filters
<small id="filterReset"><button type="button" class="btn-action-bg btn-save waves-effect waves-light right">Reset List</button></small>
</h6>
<form method="post" name="wtkFilterForm" id="wtkFilterForm">
<div class="input-field">
<input type="search" class="input-search2" name="wtkFilter" id="wtkFilter" value="" placeholder="enter partial Report Name to search for">
<input type="search" class="input-search2" name="wtkFilter2" id="wtkFilter2" value="" placeholder="enter partial Report Type to search for">
<button id="wtkFilterBtn" type="button" class="btn-action-bg waves-effect waves-light"><i class="material-icons">search</i></button>
</div>
</form>
</div>
<table id="wz-reports" class="striped">
<thead>
<tr>
<th>Report Name</th>
<th>Report Type</th>
<th><div align="center">View Order</div></th>
<th><div align="center">View</div></th>
<th class="right"><a class="btn-floating btn btn-primary btn-sm"><i class="material-icons">add</i></a></th>
</tr>
</thead>
<tbody>
<tr id="DwzReports1">
<td>User Contact Information</td>
<td>Core Info</td>
<td><div align="center">10</div></td>
<td><div align="center"><a class="btn-floating"><i class="material-icons">format_list_numbered</i></a></div></td>
<td class="right" nowrap><a class="btn-floating"><i class="material-icons">edit</i></a>
<span class="btn btn-sm btn-floating"><i class="material-icons">delete</i></span></td>
</tr>
<tr id="DwzReports2">
<td>Page Views by User</td>
<td>Analytics</td>
<td><div align="center">20</div></td>
<td><div align="center"><a class="btn-floating"><i class="material-icons">insert_chart</i></a></div></td>
<td class="right" nowrap><a class="btn-floating"><i class="material-icons">edit</i></a>
<span class="btn btn-sm btn-floating"><i class="material-icons">delete</i></span></td>
</tr>
<tr id="DwzReports5">
<td>User History by Date Range</td>
<td>Core Info</td>
<td><div align="center">30</div></td>
<td><div align="center"><a class="btn-floating"><i class="material-icons">format_list_numbered</i></a></div></td>
<td class="right" nowrap><a class="btn-floating"><i class="material-icons">edit</i></a>
<span class="btn btn-sm btn-floating"><i class="material-icons">delete</i></span></td>
</tr>
<tr id="DwzReports7">
<td>Revenue Analytics</td>
<td>Accounting</td>
<td><div align="center">40</div></td>
<td><div align="center"><a class="btn-floating"><i class="material-icons">format_list_numbered</i></a></div></td>
<td class="right" nowrap><a class="btn-floating"><i class="material-icons">edit</i></a>
<span class="btn btn-sm btn-floating"><i class="material-icons">delete</i></span></td>
</tr>
<tr id="wzReportsfooter">
<td class="navFooterAlign" align="left" colspan="5">1 - <span id="wzReportsMaxOnPage">4</span>
of <span id="wzReportsMaxRows">4</span>
</td>
</tr>
</tbody>
</table>
<br>
<div class="card bg-second b-shadow">
<div class="card-content">
<p>This free utility was built by <a target="_blank" href="https://programminglabs.com/">Programming Labs</a>
for making color themes for <a target="_blank" href="https://wizardstoolkit.com/">Wizards Toolkit</a> websites.
Feel free to modify it for your own needs.</p>
<p>In your HTML page call the CSS files in this order:
<blockquote>
<ul>
<li>materialize.min.css</li>
<li>wtk{<strong>YourColor</strong>}.css</li>
<li>wtkLight.css or wtkDark.css</li>
<li>wtkGlobal.css</li>
</ul>
</blockquote>
</p>
<p>And remember when using MaterializeCSS with jQuery to always declare jQuery.js <em>before</em> materialize.min.js.</p>
</div>
</div>
</div>
</div>
<div id="modalWTK" class="modal content">
<div class="modal-content">
<form id="saveCSSform">
<div class="input-field">
<input type="text" class="form-input" id="fileName" name="fileName" value="">
<label class="active" for="fileName">Choose File Name</label>
<span class="helper-text">wtk will be prepended and file will be saved in this folder</span>
</div>
</form>
</div>
<div id="modFooter" class="modal-footer right">
<a class="btn btn-mini btn-cancel modal-close waves-effect">Close</a>
<a class="btn btn-mini btn-save modal-close waves-effect" onclick="JavaScript:saveCSS()">Save</a>
</div>
</div>
</body>
</html>
wget 'https://lists2.roe3.org/mdrone/cssmaker/wtkBlue.css':root {
--gradient-left: #8893F3;
--gradient-right: #4050DF;
--gradient-color: linear-gradient(to right, var(--gradient-left), var(--gradient-right));
--btn-color: #4050DF;
--btn-border-color: #222d84;
--btn-hover: #4050DF;
--href-link: #5662D3;
--active-label: #4050DF;
--light-theme-focus: #8FA5F7;
--dark-theme-focus: #4050DF;
--bg-second-color: #C0E1F3;
}
wget 'https://lists2.roe3.org/mdrone/cssmaker/wtkDark.css':root {
--border-color: #444;
--box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.14), 0 1px 2px 0 rgba(0, 0, 0, 0.09), 0 2px 1px -1px rgba(0, 0, 0, 0.1);
--card-color: #3C3838;
--focus-color: var(--dark-theme-focus);
--main-bg-color: #212121;
--main-text-color: #ccc;
--secondary-bg-color: #272727;
}
/*BUTTON*/
.btn-cancel {
color: #212121;
}
.wtk-btn {
color: var(--main-text-color);
}
/*DROPDOWN*/
.dropdown-content li>span {
color: #999;
}
/*FORM*/
form input[type="text"]:not(.browser-default):focus:not([readonly])+label {
color: #777;
}
input:not([type]):focus:not([readonly])+label,
input[type="text"]:not(.browser-default):focus:not([readonly])+label,
input[type="password"]:not(.browser-default):focus:not([readonly])+label,
input[type="email"]:not(.browser-default):focus:not([readonly])+label,
input[type="url"]:not(.browser-default):focus:not([readonly])+label,
input[type="time"]:not(.browser-default):focus:not([readonly])+label,
input[type="date"]:not(.browser-default):focus:not([readonly])+label,
input[type="datetime"]:not(.browser-default):focus:not([readonly])+label,
input[type="datetime-local"]:not(.browser-default):focus:not([readonly])+label,
input[type="tel"]:not(.browser-default):focus:not([readonly])+label,
input[type="number"]:not(.browser-default):focus:not([readonly])+label,
input[type="search"]:not(.browser-default):focus:not([readonly])+label,
textarea.materialize-textarea:focus:not([readonly])+label {
color: #777;
}
textarea.materialize-textarea:disabled {
color: #605e5e;
}
/*FORUM*/
.forum-single .content-info {
border-top: 1px solid #333;
}
/*PAGES*/
.content form {
background: #3c3838 !important;
}
.content-right.right span {
color: #272727 !important;
}
.helper-text::after {
color: #D12020 !important;
}
.modal-content {
background: var(--card-color);
}
.page-list .content {
color: #888;
}
#modFooter {
background-color: var(--secondary-bg-color);
}
#myNote {
background-color: #595353 !important;
}
/*SIDEBAR*/
.sidenav li>a {
color: #ccc !important;
}
.sidebar-panel .side-nav {
background: #212121;
}
.sidebar-panel .side-nav .user-view {
background: #DBD9F3;
}
/*TABLE*/
table.striped>tbody>tr:nth-child(2n+1) {
background: #333;
}
/*WZ-CHAT*/
.wz-chat .wrap-input input {
color: #9E9E9E;
}
.chat-detail .wrapper-date span {
background-color: #9e9e9e;
}
.chat-detail .content-right {
background-color: #DBD9F3;
}
.chat-detail .content-right .triangles {
border-top: solid 8px #dcdaf4;
border-left: solid 8px #dcdaf4;
border-right: solid 8px transparent;
border-bottom: solid 8px transparent;
}
wget 'https://lists2.roe3.org/mdrone/cssmaker/wtkGlobal.css'@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700,900');
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
}
/*ELEMENTS*/
a {
color: var(--href-link);
font-weight: 500;
}
a:focus {
outline: 0;
}
blockquote {
border-left: 5px solid var(--btn-color) !important;
}
body {
font-family: 'Roboto', sans-serif;
background: var(--main-bg-color);
color: var(--main-text-color);
font-size: 16px;
}
h1, h2, h3, h4, h5, h6 {
line-height: 110%;
margin: 0;
font-family: 'Roboto', sans-serif;
font-weight: 500;
color: var(--main-text-color);
}
i.small {
font-size: 2rem !important;
}
i.medium {
font-size: 4rem !important;
}
i.large {
font-size: 6rem !important;
}
img.wrap {
max-width: 50%;
margin: 30px 0px;
}
img.align-right {
float: right;
margin-left: 30px;
}
img.align-left {
float: left;
margin-right: 30px;
}
p {
margin: 8px 0;
}
/*GENERAL*/
.b-shadow {
box-shadow: var(--box-shadow);
}
.bg-second {
background-color: var(--secondary-bg-color) !important;
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 18px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-moz-font-feature-settings: 'liga';
-moz-osx-font-smoothing: grayscale;
color: #ffffff;
}
.prefix {
color: var(--btn-color) !important;
}
.preloader-wrapper .circle-clipper .circle {
border-width: 5px;
}
.section-title {
margin-bottom: 16px;
}
.section-title h3 {
font-size: 18px;
font-weight: 600;
display: inline-block;
}
.segments {
padding: 30px 0;
}
.segments-bottom {
padding-bottom: 35px;
}
.segments-page {
padding: 80px 0 30px;
}
.services .content i {
box-shadow: 0 4px 10px 1px rgba(0, 0, 0, 0.09);
}
.sidenav li>a i {
background: var(--btn-color);
}
.rounded {
border-radius: 18px !important;
}
.take-photo .content-info {
background: #fff;
}
.text-bold {
font-weight: bold;
font-size: 14px;
}
.text-right {
text-align: right;
}
.user-icons {
margin-top: 14px;
position: absolute;
text-align: center;
width: 100%;
margin-right: 7px;
}
.wrap-title {
margin-bottom: 15px;
}
.wtk-box {
margin: 9px;
padding: 15px;
border-radius: 9px;
box-shadow: var(--box-shadow);
height: auto;
overflow: auto;
clear: both;
}
/*ADJUST SPACING*/
.adj-up-9 {
top: -9px !important;
}
.marg9 {
margin-left: 9px
}
.mb54 {
margin-bottom: 54px;
}
.top-down {
margin-left: 6px !important;
text-align: center !important;
float: right !important;
}
/*BROWSER-SPECIFIC*/
::-webkit-input-placeholder, ::-moz-placeholder, :-ms-input-placeholder, :-moz-placeholder{
/* Chrome/Opera/Safari */
color: var(--focus-color);
}
/*BUTTONS*/
.btn, .btn-flat, .btn-large, .btn-small {
text-transform: unset !important;
}
.btn-floating, .btn-primary, .btn-save, .btn-action-bg, .wtk-btn, .btn:focus {
background: var(--btn-color);
}
.btn-action-bg {
border: 0;
padding: 8px 12px;
margin-top: 15px;
border-radius: 3px;
cursor: pointer;
font-size: 12px;
letter-spacing: 1px;
color: var(--main-text-color);
}
.btn-cancel {
padding: 8px;
border: 0;
margin-top: 15px;
border-radius: 3px;
cursor: pointer;
font-size: 12px;
letter-spacing: 1px;
margin-right: 5px;
background: var(--main-text-color) !important;
}
.btn-help {
font-size: 22px;
font-weight: 500;
float: right;
}
.btn-save {
border: 1px solid var(--btn-border-color);
box-shadow: 5px 5px 8px #888 !important;
}
.btn:hover, .btn-action-bg:focus, .btn-floating:hover, .btn-primary:hover, .btn-save:focus,
.btn-action-bg:hover, .wtk-btn:focus, .wtk-btn:hover, .wtk-btn:active {
background: var(--btn-hover);
}
/*CARDS*/
.card {
background: var(--card-color);
color: var(--main-text-color);
margin: 0;
margin-bottom: 30px;
border-radius: 10px;
}
.card .card-content {
padding: 13px 15px;
}
.card .card-content h5 {
margin-bottom: 8px;
}
.card .card-content p {
margin: 9px 0;
}
.card .card-image img {
border-radius: 3px 3px 0 0;
}
.card .card-reveal {
background: var(--secondary-bg-color);
padding: 13px 15px;
}
.card .card-reveal i {
font-size: 17px;
position: relative;
top: 0;
}
.card .card-title {
font-size: 16px;
}
.wrap-card .row {
margin-bottom: 0;
}
/*CHAT DETAIL*/
.chat-detail {
scroll-behavior: auto;
}
.chat-detail .content-left {
background-color: var(--secondary-bg-color);
position: relative;
padding: 3px 8px;
border-radius: 3px;
}
.chat-detail .content-left.c-two-image {
padding: 0;
box-shadow: none;
}
.chat-detail .content-left.content-two span img {
width: calc(100% - 50px);
}
.chat-detail .content-left .triangles {
position: absolute;
top: 0;
left: -14px;
width: 16px;
height: 16px;
border-top: solid 8px var(--secondary-bg-color);
border-right: solid 8px var(--secondary-bg-color);
border-left: solid 8px transparent;
border-bottom: solid 8px transparent;
}
.chat-detail .content-right {
position: relative;
padding: 3px 8px;
border-radius: 3px;
}
.chat-detail .content-right .triangles {
position: absolute;
top: 0;
right: -14px;
width: 16px;
height: 16px;
}
.chat-detail .content-right.content-two, .chat-detail .content-left.content-two {
margin-top: 5px;
}
.chat-detail .form-bottom {
position: fixed;
left: 16px;
right: 16px;
bottom: 0;
padding: 10px 0;
}
.chat-detail .form-bottom input[type="text"] {
margin-bottom: 0;
border-radius: 20px;
border: 0 !important;
padding: 0 40px !important;
}
.chat-detail .row .col.s12 {
padding: 0 7%;
}
.chat-detail .row.add-mb {
margin-bottom: 39px;
}
.chat-detail .wrapper-date {
text-align: center;
margin-bottom: 20px;
}
.chat-detail .wrapper-date span {
padding: 3px 8px;
border-radius: 3px;
display: inline-block;
color: var(--main-text-color);
}
.chat-detail .wrap-input {
border: 0;
border-radius: 20px;
left: 10px;
cursor: pointer;
position: absolute;
/* 2VERIFY OR POSSIBLY: position: relative; */
}
.chat-detail .wrap-input .material-icons {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 22px;
}
.chat-detail .wrap-input input[type="file"] {
display: none;
}
.chat-detail .wrap-input .chat-detail .wrap-input .material-icons {
color: var(--active-label);
}
/*CHAT LIST*/
.chat-list {
text-align: center;
position: relative;
/* 2VERIFY OR POSSIBLY:
background-color: rgba(0, 0, 0, 0.40);
position: relative;
padding: 0;
padding: 0 5%;
padding-top: 20px;
*/
left: 30px;
right: 30px;
bottom: 5px;
padding: 10px 0;
}
.chat-list.segments-page {
padding: 54px 0 30px;
}
.chat-list img {
width: calc(100% - 60px);
}
.chat-list .modal {
box-shadow: none;
}
.chat-list .waves-effect {
display: block;
}
.chat-list img {
width: 40px;
border-radius: 50%;
float: left;
margin-right: 10px;
}
.chat-list .content-text {
overflow: hidden;
padding-bottom: 20px;
border-bottom: 1px solid #444;
}
.chat-list .content-text h5 {
float: left;
}
.chat-list .content-text .wrap-date {
overflow: hidden;
text-align: right;
}
.chat-list .content-text .wrap-date span {
font-size: 11px;
}
.chat-list .content-text p {
display: inline-block;
margin: 5px 0 0;
}
.chat-list .content-text p.to {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: block;
}
.chat-list .content-text p i {
margin-right: 5px;
font-size: 18px;
vertical-align: top;
}
/*COLLAPSE*/
.collapsible {
margin: 0;
border-radius: 3px;
border-color: var(--border-color);
}
.collapse-only-text {
margin-top: 20px;
}
.collapsible .collapsible-header, .collapsible .collapsible-body {
border-color: #444;
background: var(--secondary-bg-color);
}
.collapsible .collapsible-header {
border-radius: 3px;
}
.collapsible .collapsible-header i {
font-size: 20px;
margin-right: 15px;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 3px;
}
.collapsible .collapsible-header h6 {
margin-top: 8px;
}
.collapsible .collapsible-body {
padding: 1rem;
}
.collapse-only-text .collapsible {
box-shadow: none;
border: 0;
}
.collapse-page .wrap-content {
margin: 0 5%;
}
.collapse-page .collapse-only-text .waves-effect {
display: block;
}
.collapse-page .collapse-only-text .collapsible-header,
.collapse-page .collapse-only-text .collapsible-body {
margin: 0 5%;
}
.collapse-only-text .collapsible .collapsible-header {
border-radius: 0;
padding: 16px 0;
border-bottom: 0;
}
.collapse-only-text .collapsible .collapsible-body {
padding: 0;
border-bottom: 0;
}
/*CONTENT*/
.content-reply {
padding: 15px;
border-radius: 3px;
}
.content-text {
display: inline-block;
}
.content-user {
margin-bottom: 10px;
}
.content-user img {
width: 50px;
height: 50px;
border-radius: 50%;
float: left;
margin-right: 10px;
}
/*FALLBACK*/
.separator-profile-page {
padding-top: 125px;
}
.no-mb {
margin-bottom: 0;
}
/*FORM*/
form input, form textarea {
color: var(--main-text-color);
}
form .input-field .prefix {
width: 0;
}
form .range-field input:focus {
border: unset !important;
}
form input:focus, form textarea:focus {
color: var(--focus-color) !important;
border-bottom: 1px solid var(--active-label) !important;
box-shadow: none !important;
}
input:disabled, input:disabled+label {
color: #545252 !important;
}
form input[type="text"]:not(.browser-default):focus:not([readonly])+label,
form input[type="email"]:not(.browser-default):focus:not([readonly])+label,
form input[type="password"]:not(.browser-default):focus:not([readonly])+label,
textarea.materialize-textarea:focus:not([readonly])+label {
color: var(--active-label) !important;
}
input[type="checkbox"]:checked+span:not(.lever)::before {
border-right: 2px solid var(--btn-color);
border-bottom: 2px solid var(--btn-color);
}
input[type="radio"]:checked+span::after, input[type="radio"].with-gap:checked+span::before, input[type="radio"].with-gap:checked+span::after {
border: 2px solid var(--btn-color);
}
input[type="radio"]:checked+span::after, input[type="radio"].with-gap:checked+span::after {
background-color: var(--btn-color);
}
input[type="range"] {
border: initial;
}
input[type="range"]::-moz-range-thumb, input[type="range"]+.thumb {
background: var(--btn-color);
}
label {
color: #7a7676 !important;
}
textarea.materialize-textarea:disabled+label {
color: var(--active-label) !important;
}
.input-field .prefix .active {
color: var(--active-label);
}
.select:disabled {
color: var(--active-label) !important;
}
.select-wrapper.disabled+label {
color: var(--active-label) !important;
}
.switch label input[type="checkbox"]:checked+.lever, .switch label input[type="checkbox"]:checked+.lever::after {
background-color: var(--btn-color) !important;
}
/*FORUM*/
.forum {
padding: 15px;
border-radius: 3px;
margin-bottom: 20px;
background-color: var(--secondary-bg-color);
}
.forum.no-mb {
margin-bottom: 0;
}
.forum .content-user {
margin-bottom: 10px;
}
.forum .content-user span {
margin-top: 5px;
display: inline-block;
}
.forum .content-user img {
width: 50px;
border-radius: 50%;
float: left;
margin-right: 10px;
}
.forum .content-text {
display: inline-block;
margin-top: 15px;
}
/*FORUM SINGLE*/
.forum-single {
padding: 15px;
border-radius: 3px;
margin-bottom: 20px;
margin-bottom: 20px;
}
.forum-single .content-user {
margin-bottom: 10px;
}
.forum-single .content-user img {
width: 50px;
border-radius: 50%;
float: left;
margin-right: 10px;
}
.forum-single .content-text {
display: inline-block;
margin-top: 15px;
}
.forum-single .content-text p {
margin-top: 0;
}
.forum-single .content-info {
padding-top: 10px;
margin-top: 10px;
}
.forum-single .content-info li i {
font-size: 30px;
color: var(--active-label);
}
.forum-single .content-info ul {
padding: 0;
margin: 0;
}
.forum-single .content-info ul li {
list-style-type: none;
display: inline-block;
text-align: center;
margin-right: 20px;
}
.forum-single .content-info ul li:last-child {
margin-right: 0;
}
/*FOOTER*/
.page-footer {
background: #212121;
padding: 0px;
}
/*MESSAGE DETAILS*/
.message-details .content {
border-radius: 3px;
padding: 15px;
margin: auto;
margin-bottom: 25px;
font-size: 14px;
box-shadow: var(--box-shadow);
}
.message-details .content h4 {
margin-top: 8px;
margin-bottom: 10px;
}
.message-details .content img {
width: 80px;
height: 80px;
border-radius: 50%;
}
.message-details .content .note {
text-align: center;
font-size: 14px;
}
/*NAVBAR*/
.navbar.navbar-home {
background: var(--gradient-color);
}
.navbar .content-left a {
border-radius: 50%;
float: left;
margin-top: 15px;
}
.navbar .content-right {
text-align: right;
}
.navbar .content-right h4 {
margin-top: 2px;
}
.navbar .content-right .sidebar-cart i {
position: relative;
left: 8px;
}
.navbar .content-right sup {
width: 18px;
height: 18px;
line-height: 17px;
display: inline-block;
text-align: center;
border-radius: 50%;
position: relative;
top: -12px;
font-size: 12px;
}
.navbar .dropdown-content {
top: 50px !important;
}
.navbar-fixed {
height: 81px !important;
}
.navbar .row {
margin-bottom: 0;
}
.navbar .wrap-content {
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 15px 0 13px;
z-index: 99;
}
.navbar #hamburger i {
padding: 14px 0px;
font-size: 24px;
}
/*PAGE-LIST*/
.page-list h4 {
margin-bottom: 15px;
}
.page-list .content {
border-radius: 3px;
padding: 15px;
margin: auto;
margin-bottom: 25px;
font-size: 14px;
width: 100%;
box-shadow: var(--box-shadow);
background: var(--secondary-bg-color) !important;
}
.page-list .content .icon {
font-size: 32px;
text-align: right;
position: relative;
top: -15px;
}
.page-list .content .row {
margin-bottom: 6px;
}
.page-list .description {
margin-bottom: -30px;
}
/*PICKERS*/
.datepicker {
width: 126px !important;
}
.datepicker-date-display, .datepicker-table td.is-selected {
background-color: var(--btn-color);
}
.datepicker-cancel, .datepicker-clear, .datepicker-today, .datepicker-done {
color: var(--btn-color);
}
.datepicker-table td.is-today {
color: var(--focus-color);
}
.timepicker-digital-display, .timepicker-tick.active {
background-color: var(--btn-color);
}
.timepicker-tick:hover {
background-color: unset;
}
.timepicker-canvas line {
stroke: var(--btn-color);
}
.timepicker-canvas-bg, .timepicker-canvas-bearing {
fill: var(--btn-color);
}
.timepicker-close {
color: var(--btn-color);
}
.time-width {
width: 135px !important;
}
.month-prev:focus, .month-next:focus {
background-color: var(--btn-color);
}
/*PROFILE*/
.content form {
padding: 15px;
border-radius: 15px;
}
.file-upload {
padding: 15px 6px 4px 8px;
border-radius: 18px;
margin-right: 10px;
background: var(--btn-color);
}
.profile-banner.b-shadow {
width: 100%;
border-radius: 15px;
background: var(--main-bg-color);
}
.profile .content {
text-align: center;
padding-bottom: 30px;
}
.profile .content-info {
text-align: center;
margin-top: 20px;
}
.profile .content form input {
display: none;
}
.profile .content .icon-upload i {
width: 28px;
height: 28px;
line-height: 28px;
display: inline-block;
border-radius: 50%;
font-size: 13px;
cursor: pointer;
text-align: center;
}
.profile .content-info p {
margin: 0;
}
.profile .content-info p:first-child {
margin-bottom: 8px;
}
.profile form {
margin-top: -35px;
}
.profile-icon-upload i {
color: var(--btn-color);
font-size: 28px;
}
.profile .text-notification h6 {
margin-bottom: 20px;
}
.profile .text-notification ul {
margin-bottom: 0;
}
.profile .text-notification ul li {
display: inline-block;
}
.profile .text-notification ul li:last-child {
float: right;
}
.profile .text-notification .switch label .lever {
margin-left: 0;
margin-top: -4px;
}
.text-notification p, .text-notification ul {
padding: 0px;
margin: 0px;
}
.user-photo {
margin-top: -115px;
}
/*PROGRESS*/
.progress {
height: 9px !important;
border-radius: 3px;
}
.progress-note {
position: relative;
top: -8px;
margin-top: 0;
margin-bottom: 26px;
color: var(--border-color);
}
/*RESET PASSWORD*/
.reset-password .content {
border-radius: 3px;
padding: 15px;
background-color: var(--secondary-bg-color);
}
.reset-password .content-form {
margin-top: 20px;
}
.reset-password .input-field {
margin-bottom: 0;
}
/*SELECT*/
.dropdown-content {
height: auto !important;
padding: 0 0 10px 0;
background-color: var(--card-color);
}
.dropdown-content li {
min-height: auto;
line-height: 12px;
}
.dropdown-content li>a {
line-height: 0;
color: var(--main-text-color);
}
.dropdown-content li>a:hover {
color: var(--main-bg-color);
}
.dropdown-content li>span {
font-size: 14px;
line-height: 0;
}
.select-dropdown.dropdown-content li.selected {
padding: 3px 0;
margin-bottom: 3px;
}
.select-wrapper+label {
top: 0;
}
/*SEARCH RESULT*/
.search-result form {
margin-top: 10px;
float: left;
width: 100%;
}
.search-result form .input-field {
float: left;
width: 100%;
}
.search-result form .select-wrapper {
width: calc(100% - 60px);
display: inline;
float: left;
margin-right: 10px;
}
.search-result form .input-search {
width: calc(100% - 60px);
display: inline;
}
.search-result form .input-search2 {
width: calc(50% - 30px);
display: inline;
}
/*SERVICES*/
.services .content {
text-align: center;
padding: 15px;
border-radius: 3px;
background: var(--card-color);
}
.services .content i {
background: var(--gradient-color);
}
.services .content i {
font-size: 30px;
width: 45px;
height: 45px;
line-height: 45px;
border-radius: 50%;
margin-bottom: 16px;
}
.services .content h4 {
margin-bottom: 10px;
}
.services .content p {
margin-bottom: 0;
}
.services .row:last-child {
margin-bottom: 0;
}
/*SIDEBAR*/
.sidebar-panel .collapsible {
border: 0;
border-radius: 0;
}
.sidebar-panel .side-nav {
width: 260px;
height: 100%;
}
.sidebar-panel .side-nav .collapsible-header {
display: block;
font-size: 15px;
font-weight: 500;
overflow: hidden;
padding: 0 24px;
}
.sidebar-panel .side-nav .collapsible-header>i {
font-size: 16px;
width: 30px;
text-align: left;
}
.sidebar-panel .side-nav .collapsible-header span i {
float: right;
margin: 0;
width: auto;
font-size: 15px;
}
.sidebar-panel .side-nav .active .collapsible-header span i {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.sidebar-panel .side-nav .collapsible-body li a {
padding: 0 23.5px 0 44px;
}
.sidebar-panel .side-nav li>a {
padding: 0 16px;
font-weight: 500;
font-size: 15px;
line-height: 48px;
}
.sidebar-panel .side-nav li a i {
color: var(--main-bg-color);
font-size: 16px;
width: 26px;
height: 26px;
line-height: 26px;
border-radius: 3px;
text-align: center;
vertical-align: middle;
margin-top: 12px;
}
.sidebar-panel .side-nav .user-view {
padding: 60px 20px 20px;
text-align: center;
margin-bottom: 25px;
}
.sidebar-panel .side-nav .user-view>img {
margin: 0 auto;
}
.sidebar-panel .side-nav .user-view span {
margin-top: 12px;
display: block;
}
.sidebar-panel .side-nav .user-view .background img {
width: 100%;
height: 100%;
}
/*SIGN-IN*/
.signin-header {
margin: 15px;
}
.sign-in .content {
padding: 15px;
border-radius: 3px;
}
.sign-in-link {
margin-bottom: 20px;
text-align: left;
}
.sign-in-link ul {
padding: 0;
margin: 0;
}
.sign-in-link ul li {
list-style-type: none;
margin-bottom: 10px;
}
.sign-in-link ul li:last-child {
margin-bottom: 0;
}
.sign-in-link ul li a {
font-weight: 500;
}
/*SIGN-UP*/
.sign-up .content {
padding: 15px;
border-radius: 3px;
}
.spinner-layer.spinner-custom {
border-color: var(--btn-color);
}
/*TABS*/
.tabs .indicator {
background-color: var(--btn-color) !important;
}
/*TABLE*/
table {
font-size: 13px;
}
.column-sort {
color: var(--href-link);
}
.table-border {
border: 2px solid var(--btn-color);
}
.table-contents {
margin-bottom: 30px;
padding: 15px;
padding-bottom: 0;
border-radius: 3px;
box-shadow: var(--box-shadow);
background-color: var(--secondary-bg-color);
}
.table-contents table th {
padding-top: 0;
font-size: 14px;
}
.table-contents table tr {
border-color: var(--border-color);
}
.rpt-tabs, .rpt-tabs a.active, .rpt-tabs a {
background-color: var(--card-color) !important;
color: var(--main-text-color) !important;
}
/*WZ-CHAT*/
.wz-chat .wrap-input input {
position: relative;
border: 0;
width: calc(100% - 60px);
padding-left: 20px;
padding-right: 40px;
border-radius: 20px;
box-shadow: var(--box-shadow);
background-color: var(--main-bg-color);
}
.wz-chat .wrap-input {
position: relative;
margin-bottom: 15px;
}
.wz-chat .wrap-input i {
color: var(--btn-color);
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 22px;
padding-bottom: 8px;
cursor: pointer;
}
.wz-chat .wrap-input input[type="text"]:not(.browser-default):focus:not([readonly]) {
position: relative;
border: 0;
border-radius: 20px;
box-shadow: var(--box-shadow);
}
/*USER DETAILS PAGE*/
/*USER/REPORT PAGE*/
#btnBugSave {
display: inline-flex;
}
#btnBugSave i {
font-size: 16px;
margin-left: 3px;
}
#forgotMsg .chip {
background: var(--btn-color) !important;
}
#imgPreview {
width: 150px;
margin: 0 auto;
}
#myNote {
display: flex;
height: 200px;
padding: 5px;
border: none !important;
margin-top: 10px;
background-color: var(--secondary-bg-color);
}
#modalAlert {
background: unset;
box-shadow: unset;
}
#modalWTK {
margin: auto;
}
#modFooter .btn-cancel {
padding: 0px 12px;
}
#plsWait {
background: none;
box-shadow: none;
overflow-y: unset;
top: 50% !important;
z-index: 2;
display: block;
}
#wtkFilterForm input:focus {
background: transparent;
color: var(--main-text-color);
}
#wzReports .material-icons {
background: var(--btn-color);
}
/******cssMaker*******/
#cssForm input {
margin-top: 7px;
}
wget 'https://lists2.roe3.org/mdrone/cssmaker/wtkGoldGreen.css':root {
--gradient-left: #DDE02F;
--gradient-right: #8E8B11;
--gradient-color: linear-gradient(to right, var(--gradient-left), var(--gradient-right));
--btn-color: #A8A414;
--btn-border-color: #4F4A0D;
--btn-hover: #DDE02F;
--href-link: #A8A414;
--active-label: #DDE02F;
--light-theme-focus: #DDE02F;
--dark-theme-focus: #A8A414;
--bg-second-color: #E4D55F;
}
wget 'https://lists2.roe3.org/mdrone/cssmaker/wtkGreen.css':root {
--gradient-left: #264C19;
--gradient-right: #52B52E;
--gradient-color: linear-gradient(to right, var(--gradient-left), var(--gradient-right));
--btn-color: #264C19;
--btn-border-color: #071103;
--btn-hover: #52B52E;
--href-link: #379B13;
--active-label: #52B52E;
--light-theme-focus: #5C9348;
--dark-theme-focus: #5c9348;
--bg-second-color: #a7f48b;
}
wget 'https://lists2.roe3.org/mdrone/cssmaker/wtkLight.css':root {
--border-color: #6b6868;
--box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.14), 0 1px 2px 0 rgba(0, 0, 0, 0.09), 0 2px 1px -1px rgba(0, 0, 0, 0.1);
--card-color: #fff;
--focus-color: var(--light-theme-focus);
--light-text-color: #fff;
--main-bg-color: #ffffff;
--main-text-color: #000;
--secondary-bg-color: var(--bg-second-color);
}
/*GENERAL*/
.btn-cancel, .btn-action-bg {
color: var(--main-bg-color) !important;
}
/*DROPDOWN*/
.dropdown-content li>span {
color: #0a0909;
}
/*FORMS*/
form input[type="text"]:not(.browser-default):focus:not([readonly])+label {
color: #423f3f !important;
}
input:not([type]):focus:not([readonly])+label,
input[type="text"]:not(.browser-default):focus:not([readonly])+label,
input[type="password"]:not(.browser-default):focus:not([readonly])+label,
input[type="email"]:not(.browser-default):focus:not([readonly])+label,
input[type="url"]:not(.browser-default):focus:not([readonly])+label,
input[type="time"]:not(.browser-default):focus:not([readonly])+label,
input[type="date"]:not(.browser-default):focus:not([readonly])+label,
input[type="datetime"]:not(.browser-default):focus:not([readonly])+label,
input[type="datetime-local"]:not(.browser-default):focus:not([readonly])+label,
input[type="tel"]:not(.browser-default):focus:not([readonly])+label,
input[type="number"]:not(.browser-default):focus:not([readonly])+label,
input[type="search"]:not(.browser-default):focus:not([readonly])+label,
textarea.materialize-textarea:focus:not([readonly])+label {
color: #423f3f;
}
/*FORUM*/
.forum-single .content-info {
border-top: 1px solid #5b5a5a;
}
#modFooter {
background-color: var(--main-bg-color);
}
#my-note {
background-color: var(--secondary-bg-color);
}
/*PAGES*/
.collapsible .collapsible-header, .collapsible .collapsible-body {
border-color: #444;
background: var(--main-bg-color);
}
.content form {
background: var(--main-bg-color) !important;
}
.page-list .content {
color: #0a0909;
}
/*SIGN-IN*/
.sign-in .content, .sign-up .content, .bg-second {
background-color: var(--main-bg-color);
}
/*SIDEBAR*/
.sidenav li>a {
color: #3a3838 !important;
}
.sidebar-panel .side-nav {
background: #fff;
}
.sidebar-panel .side-nav .user-view {
background: #fff;
}
.sidenav-overlay {
opacity: 0.2 !important;
}
/*TABLE*/
table.striped>tbody>tr:nth-child(2n+1) {
background: var(--secondary-bg-color);
}
/*WZ-CHAT*/
.chat-detail .content-left, .chat-detail .content-right {
color: #211f1f;
}
.wz-chat .wrap-input input {
color: #3d3b3b;
background: var(--secondary-bg-color);
}
.chat-detail .wrapper-date span {
background-color: var(--light-theme-focus);
color: var(--main-bg-color);
}
.chat-detail .content-right {
background-color: var(--secondary-bg-color);
}
.chat-detail .content-right .triangles {
border-top: solid 8px var(--secondary-bg-color);
border-left: solid 8px var(--secondary-bg-color);
border-right: solid 8px transparent;
border-bottom: solid 8px transparent;
}
wget 'https://lists2.roe3.org/mdrone/cssmaker/wtkPurple.css':root {
--gradient-left: #5856d6;
--gradient-right: #c644fc;
--gradient-color: linear-gradient(to right, var(--gradient-left), var(--gradient-right));
--btn-color: #7552E0;
--btn-border-color: #422a72;
--btn-hover: #7d5d94;
--href-link: #d721f6;
--active-label: #9c27b0;
--light-theme-focus: #C5A0DC;
--dark-theme-focus: #9924E3;
--bg-second-color: #ccaee2;
}
wget 'https://lists2.roe3.org/mdrone/cssmaker/wtkRed.css':root {
--gradient-left: #FF3F3F;
--gradient-right: #9F0000;
--gradient-color: linear-gradient(to right, var(--gradient-left), var(--gradient-right));
--btn-color: #C71E34;
--btn-border-color: #720F0D;
--btn-hover: #D71D0A;
--href-link: #b13115;
--active-label: #CA150E;
--light-theme-focus: #DC0E00;
--dark-theme-focus: #E33A38;
--bg-second-color: #E2B4B4;
}
wget 'https://lists2.roe3.org/mdrone/cssmaker/wtkSkyDark.css':root {
--gradient-left: #77FFE9;
--gradient-right: #086761;
--gradient-color: linear-gradient(to right, var(--gradient-left), var(--gradient-right));
--btn-color: #086761;
--btn-border-color: #0C3C30;
--btn-hover: #48B69B;
--href-link: #48B69B;
--active-label: #48B69B;
--light-theme-focus: #11E0D3;
--dark-theme-focus: #086761;
--bg-second-color: #AAE0C6;
}