smeserver/smeserver-manager
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

* Mon Mar 24 2025 Brian Read <brianr@koozali.org> 11.0.0-72.sme

Browse Source 
- Remove css files from template structure [SME: 12967]
- Rationalise and merge css files
- Adjust some gaps around panels
- Remove HR lines
This commit is contained in:
Brian Read
2025-03-24 17:23:02 +00:00
parent 36de44fcef
commit ebbe7af9a7
22 changed files with 823 additions and 1327 deletions
Download Patch File Download Diff File Expand all files Collapse all files

497
root/usr/share/smanager/themes/default/public/css/new-sme-main.css Normal file
View File

@@ -0,0 +1,497 @@
{
margin-left: 0;
}
a.alert {
color: red;
font-family: Verdana, Tahoma, sans-serif;
font-size: 11px;
background: #e8f3e1;
}
a.item {
color: #00008b;
font-family: Verdana, Tahoma, sans-serif;
font-size: 11px;
background: #e8f3e1;
}
a.item-current:hover, a.warn-current:hover {
border-color: #888;
}
a.item-current:link, a.warn-current:link,
a.item-current:visited, a.warn-current:visited,
a.item-current:active, a.warn-current:active,
a.item-current:hover, a.warn-current:hover {
display: block;
font-family: Verdana, Tahoma, sans-serif;
font-size: 10px;
color: black;
text-decoration: none;
background: #fff;
border-color: #888;
margin: 0;
border-style: solid;
border-width: 1px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 2px;
text-align: left;
}
a.item:active, a.item-current:active,
a.warn:active, a.warn-current:active {
display: block;
font-family: Verdana, Tahoma, sans-serif;
font-size: 10px;
color: white;
background: black;
text-decoration: none;
border-color: #000;
margin: 0;
border-style: solid;
border-width: 1px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 2px;
text-align: left;
}
a.item:hover, a.item-current:hover,
a.warn:hover, a.warn-current:hover {
display: block;
font-family: Verdana, Tahoma, sans-serif;
font-size: 10px;
color: black;
text-decoration: none;
background: #ccc;
border-color: #888;
margin: 0;
border-style: solid;
border-width: 1px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 2px;
text-align: left;
}
a.item:link, a.item-current:link,
a.warn:link, a.warn-current:link {
display: block;
font-family: Verdana, Tahoma, sans-serif;
font-size: 10px;
color: black;
background: #e8f3e1;
text-decoration: none;
text-align: left;
border-color: #e8f3e1;
margin: 0;
border-style: solid;
border-width: 1px;
padding: 0 10px 2px;
}
a.item:visited, a.item-current:visited,
a.warn:visited, a.warn-current:visited {
display: block;
font-family: Verdana, Tahoma, sans-serif;
font-size: 10px;
color: black;
background: #e8f3e1;
text-decoration: none;
border-color: #e8f3e1;
margin: 0;
border-style: solid;
border-width: 1px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 2px;
text-align: left;
}
a.section-title {
display: inline-block;
color: #6CA345;
padding-left: 5px;
padding-right: 5px;
line-height: 18px;
font-weight: bold;
}
a.sl {
color: green;
font-family: Verdana, Tahoma, sans-serif;
font-size: 11px;
background: #e8f3e1;
}
a.update {
color: red;
font-family: Verdana, Tahoma, sans-serif;
font-size: 11px;
background: #98d36e;
}
a.warn:link, a.warn-current:link,
a.warn:visited, a.warn-current:visited,
a.warn:active, a.warn-current:active,
a.warn:hover, a.warn-current:hover {
background-image: url("/server-common/warn.gif");
background-repeat: no-repeat;
background-position: 10px;
padding-left: 25px;
}
a:active {
color: #606060;
text-decoration: none;
}
a:hover {
color: #F00;
text-decoration: none;
}
a:link {
color: #006921;
text-decoration: none;
}
a:visited {
color: #063;
text-decoration: none;
}
body {
background-color: #FFF;
color: #000;
font-family: Verdana, Tahoma, sans-serif;
font-size: 11px;
border-width: 0;
}
body, body.main {
margin: 5px 20px 5px 5px;
}
body, body.menu {
margin: 0 0 0 2px;
}
body.header {
font-family: Verdana, Tahoma, sans-serif;
font-size: 11px;
background-color: #bee6a2;
margin: 0;
}
body.main {
font-family: Verdana, Tahoma, sans-serif;
font-size: 11px;
background-color: #fff;
color: #000;
}
body.menu {
font-family: Verdana, Tahoma, sans-serif;
font-size: 11px;
background-color: #e8f3e1;
}
div.error, div.sme-error, span.error, span.sme-error {
color: red;
background-color: #fff;
border-width: 1px;
border-style: solid;
border-color: red;
padding: 2px;
}
form {
margin-top: 2px;
margin-bottom: 2px;
}
h1, .h1 {
font-family: Verdana, Tahoma, sans-serif;
color: #333;
font-size: 18px;
margin-bottom: 4px;
margin-top: 12px;
}
h2, .h2 {
font-family: Verdana, Tahoma, sans-serif;
color: #333;
font-size: 14px;
margin-bottom: 3px;
margin-top: 12px;
}
h3, .h3 {
font-family: Verdana, Tahoma, sans-serif;
color: #333;
font-size: 12px;
margin-bottom: 2px;
margin-top: 12px;
}
h4, .h4 {
font-family: Verdana, Tahoma, sans-serif;
font-style: italic;
color: #333;
font-size: 12px;
margin-bottom: 2px;
margin-top: 10px;
}
hr.sectionbar {
color: #8ebe43;
background-color: #8ebe43;
height: 1px;
width: 80%;
border: 0;
}
hr.sme-copyrightbar {
color: #8ebe43;
background-color: #8ebe43;
height: 1px;
width: 100%;
border: 0;
}
input.action {
margin-left: 0;
background-color: #bee6a2;
color: darkgreen;
border-radius: 8px;
border: 2px solid #4CAF50;
display: flex;
justify-content: center;
align-items: center;
}
input.action2 {
margin-left: 0;
color: black;
background-color: #d4d0c8;
display: flex;
justify-content: center;
}
input.action:active {
background-color: #3e8e41;
transform: translate(-2px,2px);
}
input.action:hover {
background-color: #3e8e41;
color: white;
}
input.field-with-error {
background-color: #fd9e7e;
}
label.field-with-error {
color: #dd7e5e;
}
ol, ul, li {
font-family: Verdana, Tahoma, sans-serif;
font-size: 10px;
font-weight: normal;
color: black;
}
p {
margin-top: 8px;
margin-bottom: 2px;
}
span {
font-family: Verdana, Tahoma, sans-serif;
font-size: 11px;
}
span.data {
padding: 2px;
font-weight: bold;
margin-left: 0;
}
span.data2 {
padding: 2px;
}
span.label {
display: inline-block;
font-weight: bold;
background-color: #e8f3e1;
width: 30%;
text-align: right;
}
span.label2 {
display: inline-block;
font-weight: bold;
background-color: #e8f3e1;
text-align: right;
}
table, tr, td, div, p, form {
color: #000;
font-family: Verdana, Tahoma, sans-serif;
font-size: 11px;
}
table.sme-border {
border-collapse: collapse;
border: 2px solid #cccccc;
empty-cells: show;
margin: 5px;
}
table.sme-layout {
border-collapse: collapse;
margin-bottom: 2px;
margin-top: 2px;
}
table.sme-noborders {
padding: 0;
margin: 0 0 20px;
font-family: Verdana, Tahoma, sans-serif;
font-size: 11px;
}
td {
text-align: left;
}
td.darkgrey {
background-color: #888;
}
td.label {
font-weight: bold;
background-color: #e8f3e1;
width: 30%;
text-align: right;
}
td.menu-cell {
margin: 0;
padding: 0;
}
td.section {
padding-bottom: 2px;
padding-top: 8px;
background-color: #e8f3e1;
}
td.sme-border a, td.sme-border-right a, td.sme-border-center a {
font-size: 10px;
}
td.sme-border, td.sme-border-warning, td.sme-border-right, td.sme-border-center {
border: 1px solid #cccccc;
font-family: Verdana, Tahoma, sans-serif;
font-size: 10px;
font-weight: normal;
color: #000;
text-align: left;
padding: 3px 2px;
}
td.sme-border-center {
text-align: center;
}
td.sme-border-right {
text-align: right;
}
td.sme-border-warning {
color: red;
}
/* sme-layout* : Used for top-level layout */
table.sme-layout {
border-collapse: collapse;
margin-bottom: 2px;
margin-top: 2px;
}
tr.sme-layout {
border: 1px solid #dddddd;
}
td.sme-layout {
border: 1px solid #dddddd;
}
td.sme-noborders-content {
text-align: left;
vertical-align: top;
font-family: Verdana, Tahoma, sans-serif;
font-size: 11px;
}
td.sme-noborders-info, div.sme-noborders-info {
text-align: left;
vertical-align: top;
}
td.sme-noborders-label {
font-weight: bold;
text-align: right;
background-color: #e8f3e1;
font-family: Verdana, Tahoma, sans-serif;
font-size: 11px;
width: 33%;
}
td.sme-radiobutton {
width: 30px;
}
th.sme-border {
border: 1px;
background-color: #bee6a2;
font-family: Verdana, Tahoma, sans-serif;
font-size: 10px;
font-weight: bold;
color: #000;
text-align: center;
vertical-align: bottom;
padding: 3px;
}
th.sme-layout {
border: 1px;
background-color: #e8f3e1;
font-family: Verdana, Tahoma, sans-serif;
font-size: 9pt;
font-weight: bold;
color: #000;
text-align: right;
padding: 4px;
}
tr.sme-layout {
border: 1px;
}
ul {
list-style-type: circle;
}
div.success, span.success {
color: #006400;
border-width: 1px;
border-style: solid;
border-color: #006400 ;
padding: 8px;
}

283
root/usr/share/smanager/themes/default/public/css/new_sme.css Normal file
View File

@@ -0,0 +1,283 @@
/* css/sme-password.css */
.input-container {
position: relative;
display: inline-block;
}
.sme-password {
padding-right: 5px; /* Ensure space for the toggle icon */
}
.toggle-password {
position: absolute;
right: 4px; /* Position it towards the right */
top: 50%; /* Center vertically */
transform: translateY(-50%); /* Adjust for exact centering */
cursor: pointer;
width: 20px; /* Set the width of the icon */
height: 20px; /* Set the height of the icon */
}
.module {
padding: 20px;
border: 1px ;
border-radius: 10px;
background-color: #f9f9f9;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin-left: 10px !important;
margin-top: 10px;
}
.sme-copyright {
color: #777;
font-family: Verdana, Tahoma, sans-serif;
font-size: 10px;
}
.logo {
height: 142%;
width: auto;
margin-left: -16px;
}
.gradient-panel {
width: 100%;
height: 40px;
background: linear-gradient(to right, white ,#c0e7a5 );
display: flex;
align-items: center;
position: relative;
}
.sme-error {
color: #d9534f;
display: block;
background-color: #fff;
border-width: 1px;
border-style: solid;
border-color: red;
padding: 2px;
font-weight: bold;
margin-bottom: 15px;
}
.login-button {
position: absolute;
left: 7%;
transform: translateX(-50%);
background-color: #4caf50b8;
color: white !important;
border: none;
padding: 8px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
cursor: pointer;
border-radius: 4px;
margin-left: 77%;
}
.sme-warning {
color: orange;
display: block;
background-color: #fff;
border-width: 1px;
border-style: solid;
border-color: orange;
padding: 2px;
}
.infobar {
font-family: Verdana, Tahoma, sans-serif;
font-size: 11px;
background-color: #98d36e;
}
.module-content {
font-family: Georgia, Garamond, serif;
font-size: 13px;
line-height: 1.2;
color: #555;
}
#help-button {
text-decoration: none;
font-size: 20px;
padding: 8px;
background-color: #98d36e;
border-radius: 4px;
color: #000;
}
/*
#module {
padding: 20px;
border: 1px;
border-radius: 10px;
background-color: #f9f9f9;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
*/
#container {
max-width: 100%;
position: relative;
margin: auto;
}
#header2 {
width: 94.2%;
margin-left: 1px;
margin-top: 4px;
}
#main {
margin-left: 200px;
padding: 10px;
}
#central {
padding: 5px;
}
#footer {
padding-left: 5px;
}
#header {
width: 100%;
margin: auto;
}
#navigation {
width: 190px;
position: absolute;
padding: 5px;
background-color: #E8F3E1;
overflow: auto;
margin-top:20px;
}
#footer img {
float: right;
position: fixed;
/*margin-left: 40%;*/
}
.flag-style {
position: absolute;
transform: translateY(-50%);
left: 95%;
/*right: 20px;
*/
width: 24px;
height: 14px;
display: inline-block;
vertical-align: middle;
}
/* flag container*/
#flag-container span {
font-size: 24px;
display: flex; /* Allows for easy centering */
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically */
width: 100%; /* Full width of parent */
height: 24px; /* Set a fixed height */
border: 1px solid #ccc; /* Light gray border */
border-radius: 5px; /* Rounded corners */
cursor: default; /* Prevent text cursor */
}
.fallback-box {
display: inline-block; /* Make it inline-block to fit around the content */
border: 2px solid gray; /* Change the border color as desired */
padding: 10px; /* Add some padding */
border-radius: 10px; /* Round the corners of the box */
font-size: 60px; /* Adjust size if needed */
margin-top: 10px; /* Add some margin */
text-align: center; /* Center text inside the box */
}
table.sme-border {
border-collapse: collapse;
border: 2px solid #cccccc;
empty-cells: show;
margin: 5px 5px 5px 2px;
}
td.sme-border, td.sme-border-warning, td.sme-border-right, td.sme-border-center {
border: 1px solid #cccccc;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #000000;
text-align: left;
padding-left: 2px;
padding-right: 2px;
padding-top: 3px;
padding-bottom: 3px;
}
td.sme-border-warning {
color: red;
}
td.sme-border-right {
text-align: right;
}
td.sme-border-center {
text-align: center;
}
th.sme-border {
border: 1px solid #cccccc;
background-color: #bee6a2;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #000000;
text-align: center;
vertical-align: bottom;
padding-left: 3px;
padding-right: 3px;
padding-top: 3px;
padding-bottom: 3px;
/*border-width: 1px;
border-style: solid;
border-color: #F2F0EE #75736E #75736E #F2F0EE ;
*/
}
td.sme-border a, td.sme-border-right a, td.sme-border-center a {
font-size: 10px;
}
th.sme-layout {
border: 1px solid #8ebe43;
background-color: #bee6a2;
}
table.sme-border {
border: 2px solid #dddddd;
}
td.sme-border-warning,
td.sme-border-right,
td.sme-border-center {
border: 1px solid #dddddd;
}
td.sme-border-right {text-align: right;}
td.sme-border-center {text-align: center;}
th.sme-border {
border: 1px solid #dddddd;
background-color: #e8f3e1;
}
.no-visited-state {
color: inherit;
/* Or specify the desired color */
text-decoration: none;
/* Or any other style you want to reset */
}
.no-visited-state:visited {
color: inherit;
/* Or specify the desired color */
text-decoration: none;
/* Or any other style you want to reset */
}

6
root/usr/share/smanager/themes/default/templates/emaildeliver.html.ep
View File

@@ -33,7 +33,7 @@
%= select_field 'EmailUnknownUser' => $c->get_emailunknownuser_opt(), class => 'input'
</span></p>
<hr class='menubar' />
<!--<hr class='menubar' />-->
<h2>
%=l 'mai_TITLE_DELEGATE'
</h2>
@@ -47,7 +47,7 @@
%= text_field 'DelegateMailServer', class => 'input'
</span></p>
<hr class='sectionbar' />
<!--<hr class='sectionbar' />-->
<h2>
%=l 'mai_TITLE_SMARTHOST'
</h2>
@@ -89,4 +89,4 @@
% end
</div>
%end
%end

2
root/usr/share/smanager/themes/default/templates/emailreceive.html.ep
View File

@@ -92,7 +92,7 @@
%= select_field 'uSMTPAuth' => $c->get_smtp_ssl_auth_opt(), class => 'input'
</span></p>
<hr class="sectionbar" />
<!--<hr class="sectionbar" />-->
<h2>
%=l 'mai_TITLE_SECONDARY'
</h2>

13
root/usr/share/smanager/themes/default/templates/emailsettings.html.ep
View File

@@ -47,9 +47,10 @@
</div>
%= hidden_field 'trt' => 'ACC'
% end
% end
<br>
<hr class="sectionbar" />
<!--<hr class="sectionbar" />-->
%= form_for 'emailsettings' => (method => 'POST') => begin
<p><span class=label>
@@ -76,9 +77,10 @@
</div>
%= hidden_field 'trt' => 'FIL'
% end
% end
<br>
<hr class="sectionbar" />
<!--<hr class="sectionbar" />-->
%= form_for 'emailsettings' => (method => 'POST') => begin
<p><span class=label>
@@ -118,8 +120,9 @@
%= hidden_field 'trt' => 'REC'
% end
<br>
<hr class="sectionbar" />
<!--<hr class="sectionbar" />-->
%= form_for 'emailsettings' => (method => 'POST') => begin
<p><span class=label>

17
root/usr/share/smanager/themes/default/templates/layouts/default.html.ep
View File

@@ -7,11 +7,18 @@
<title><%= $title %></title>
<link rel="made" href="mailto:bugs%40koozali.org">
<meta name="copyright" content="(head.tmpl)Copyright 2003-2004 Mitel Corporation">
%= stylesheet '/css/sme_core.css'
%= stylesheet '/css/sme_main.css'
%= stylesheet '/css/sme_menu.css'
%= stylesheet '/css/styles.css'
%= stylesheet '/css/sme-password.css'
%= stylesheet '/css/new_sme.css'
%= stylesheet '/css/new-sme-main.css'
%# Replaced by consolidated (and rationlised) CSS files as above March 2025
%#= stylesheet '/css/sme_core.css'
%#= stylesheet '/css/sme_main.css'
%#= stylesheet '/css/sme_menu.css'
%#= stylesheet '/css/styles.css'
%#= stylesheet '/css/sme-password.css'
%= content_for 'head_contrib'
% if (config 'hasJquery') {
%= include 'partials/_js_imports'

5
root/usr/share/smanager/themes/default/templates/partials/_dom_list.html.ep
View File

@@ -85,7 +85,8 @@
%= form_for '/domains' => (method => 'POST') => begin
<HR class="sectionbar">
<!-- <HR class="sectionbar">-->
<br>
% my $btn2 = l('dom_DOMAINS_PAGE_CORPORATE_DNS');
@@ -119,4 +120,4 @@
</div>
</div>

39
root/usr/share/smanager/themes/default/templates/partials/_header.html.ep
View File

@@ -1,47 +1,10 @@
<!--
<div id="header2" class="hd2">
<div id="h2l1">
<div id="h2e11">
<a target='_blank' href="http://www.koozali.org"><img src="images/smeserver_logo.jpg" height="40" alt="SME Server"></a>
</div>
<div id="h2e22">
<button type='button'class="login-button"><a id="help-button" target="_parent" href="manual">?</a></button>
</div>
<div id="h2e12">
<button type='button' class="login-button"><a id="legacy-button" href="/server-manager" target='_blank'>Legacy SM</a></button>
</div>
<div id="h2e23">
% if ( not defined $c->session->{username} ) {
<button type='button' class="login-button"><a target="_parent" href="login">Login</a></button>
% } else {
<button type='button' class="login-button"><a target="_parent" href="logout"><%= $c->session->{username} %> Logout</a></button>
% }
</div>
<div id="flag-container">
The flag icon will be inserted here
</div>
</div>
<div id="h2l2" class="infobar">
<div id="h2e21">
<b>
<%= session 'SystemName' %>@<%= session 'DomainName' %></b>
</div>
</div>
</div>-->
<div id="header2" class="hd2 module gradient-panel">
<img src="images/KoozaliServerManager.png" alt="Koozali Logo" class="logo" >
% if ( not defined $c->session->{username} ) {
<button type='button' class="login-button"><a class = "no-visited-state" target="_parent" href="login">Login</a></button>
% } else {
<button type='button' class="login-button"><a class = "no-visited-state" target="_parent" href="logout"><%= $c->session->{username} %> Logout</a></button>
<button type='button' class="login-button"><a class = "no-visited-state" target="_parent" href="logout">Logout <%= $c->session->{username} %></a></button>
% }
<div id="flag-container" class = "flag-style">
<!-- The flag icon will be inserted here -->

2
root/usr/share/smanager/themes/default/templates/partials/_rma_pptp.html.ep
View File

@@ -11,4 +11,4 @@
</span>
</p>
<hr class='sectionbar' />
<!--<hr class='sectionbar' />-->

10
root/usr/share/smanager/themes/default/templates/remoteaccess.html.ep
View File

@@ -17,7 +17,7 @@
</span>
%}
<hr class='sectionbar' />
<!--<hr class='sectionbar' />-->
<% my $btn = l('SAVE'); %>
@@ -50,7 +50,7 @@
</span>
<br><br>
<hr class='sectionbar' />
<!--<hr class='sectionbar' />-->
%}
@@ -115,7 +115,7 @@
%= text_field 'ValidFromMask', class => 'input'
</span>
<hr class='sectionbar' />
<!--<hr class='sectionbar' />-->
<h2>
%=l 'rma_TITLE_SSH'
@@ -154,7 +154,7 @@
</span>
<br>
<hr class='sectionbar' />
<!--<hr class='sectionbar' />-->
<h2>
%=l 'rma_TITLE_FTP_ACCESS'
@@ -183,7 +183,7 @@
% my $mode = $c->get_telnet_mode();
% if ( $mode ne 'off') {
<hr class='sectionbar' />
<!--<hr class='sectionbar' />-->
<h2>
%=l 'rma_TITLE_TELNET_ACCESS'

4
root/usr/share/smanager/themes/default/templates/yum.html.ep
View File

@@ -55,7 +55,7 @@
% end
%}
<br><hr class=sectionbar /><br>
<!--<br><hr class=sectionbar /><br>-->
%= form_for 'yum' => (method => 'POST') => begin
@@ -97,4 +97,4 @@
</div>
% end
% end