First version of light stylesheet

This commit is contained in:
Al Beano 2017-08-20 22:18:25 +01:00
parent e7266f399c
commit 5b91bfa73d
5 changed files with 123 additions and 20 deletions

View File

@ -6,7 +6,7 @@ A web-ui for registering domains, written in modern Perl 5 with Dancer.
## Current state ## Current state
Cyberman was designed to serve .cyb, and the codebase reflects this. Although it is capable of serving any domain, the default config is for .cyb, and the templates/stylesheet are oriented towards cybNIC. We're interested in producing a 'generic' style; if you'd like to contribute to this, do get in touch. Cyberman was designed to serve .cyb, and the codebase reflects this. Although it is capable of serving any domain, the default config is for .cyb, and the templates/stylesheet are oriented towards cybNIC. We're working on producing a 'generic' style; if you'd like to contribute to this, do get in touch.
## Features ## Features

101
public/css/light.css Normal file
View File

@ -0,0 +1,101 @@
* {
margin: 0;
}
html {
height: 100%;
}
body {
background-color: #ccc;
height: 100%;
}
body, a {
font-family: sans-serif;
color: #333;
font-size: 14px;
line-height: 1.6em;
}
p {
margin-bottom: 0.8em;
}
.inner {
background-color: white;
min-height: calc(100% - 10px);
margin-left: auto;
margin-right: auto;
max-width: 750px;
padding-top: 10px;
}
.body {
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.toolbar {
border: 1px solid #bbb;
margin-left: auto;
margin-right: auto;
max-width: 700px;
padding: 10px;
border-radius: 5px;
background-color: #efefef;
}
.toolbar #email {
font-style: italic;
}
center h1 {
border-bottom: 2px solid #333;
padding-bottom: 10px;
margin-left: 1rem;
margin-right: 1rem;
text-align: left;
}
a.bracketButton {
text-decoration: none;
}
a.bracketButton:hover {
text-decoration: underline;
}
button.textButton {
background: none !important;
color: inherit;
border: none;
padding: 0 !important;
font: inherit;
cursor: pointer;
}
button.textButton:hover {
text-decoration: underline;
}
form.login>table>tbody>tr>td>label {
margin-right: 10px;
}
table.domains {
width: 100%;
}
table.domains td:first-child {
width: 50%;
}
table.t, table.t th, table.t td {
border: 1px solid #bbb;
}
table.t {
border-radius: 2px;
border-collapse: collapse;
}
table.t td {
padding: 10px
}
table.t tr:first-child {
background-color: #aad3e0;
}
.msgBox {
border: 1px solid #5bc0de;
display: inline-block;
padding: 10px;
background-color: #aad3e0;
border-radius: 2px;
max-width: 650px;
}

View File

@ -5,13 +5,13 @@
<% IF params.new %> <% IF params.new %>
<div class="msgBox"> <div class="msgBox">
The domain '<% params.new | html_entity %>.<% vars.config.tld %>' was registered successfully! The domain <em><% params.new | html_entity %>.<% vars.config.tld %></em> was registered successfully!
</div> </div>
<br /><br /> <br /><br />
<% END %> <% END %>
<% IF params.removed %> <% IF params.removed %>
<div class="msgBox"> <div class="msgBox">
The domain '<% params.removed | html_entity %>.<% vars.config.tld %>' was removed successfully. The domain <em><% params.removed | html_entity %>.<% vars.config.tld %></em> was removed successfully.
</div> </div>
<br /><br /> <br /><br />
<% END %> <% END %>
@ -34,7 +34,7 @@
<br /> <br />
<table class="domains"> <table class="domains t">
<tr> <tr>
<td> <td>
<strong>Domain name</strong> <strong>Domain name</strong>

View File

@ -10,22 +10,24 @@
<link rel="stylesheet" type="text/css" href="/css/style.css" /> <link rel="stylesheet" type="text/css" href="/css/style.css" />
</head> </head>
<body> <body>
<% IF vars.auth %> <div class="inner">
<div class="toolbar"> <% IF vars.auth %>
<div class="body"> <div class="toolbar">
<span> <div class="body">
Logged in as <% vars.email | html_entity %> <span>
</span> Logged in as <span id="email"><% vars.email | html_entity %></span>
<span style="float:right;"> </span>
<form action="/logout" method="POST"> <span style="float:right;">
[&nbsp;<a href="/domains" class="bracketButton">domains</a>&nbsp;] <form action="/logout" method="POST">
[&nbsp;<a href="/account" class="bracketButton">account</a>&nbsp;] [&nbsp;<a href="/domains" class="bracketButton">domains</a>&nbsp;]
[&nbsp;<button class="textButton" action="submit">log&nbsp;out</button>&nbsp;] [&nbsp;<a href="/account" class="bracketButton">account</a>&nbsp;]
</form> [&nbsp;<button class="textButton" action="submit">log&nbsp;out</button>&nbsp;]
</span> </form>
</span>
</div>
</div> </div>
<% END %>
<% content %>
</div> </div>
<% END %>
<% content %>
</body> </body>
</html> </html>

View File

@ -35,7 +35,7 @@
<br /> <br />
<table style="width:100%"> <table style="width:100%" class="t">
<tr> <tr>
<td> <td>
<strong>Name</strong> <strong>Name</strong>