+/* Base styles */
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Source+Code+Pro&display=swap');
+
/* Layout CSS */
.cups-header {
background: rgba(46,46,46,.9);
}
.cups-body {
- margin-top: 40px;
- padding: 40px 20px;
+ margin-bottom: 20px;
+ margin-top: 65px;
+ padding: 20px;
}
.row .cups-body {
padding: 0;
.row .halves:first-child {
margin-left: 0;
}
+
+.row .thirds h1, .row .halves h1 {
+ margin-top: 0;
+}
+
.mobile {
display: none;
}
body {
background: white;
color: black;
- font-family: lucida grande, geneva, helvetica, arial, sans-serif;
+ font-family: 'Open Sans', sans-serif;
+ font-size: 16px;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p, td, th {
- font-family: lucida grande, geneva, helvetica, arial, sans-serif;
+ font-family: 'Open Sans', sans-serif;
}
h1 { font-size: 2em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.25em; }
+code, kbd, pre, tt, input[type=text], p.command, p.summary, p code, li code, p.code, ul.code li, textarea {
+ font-family: 'Source Code Pro', monospace;
+}
+
kbd {
color: #006600;
- font-family: monaco, courier, monospace;
font-weight: bold;
}
pre {
- font-family: monaco, courier, monospace;
+ white-space: pre-wrap;
}
blockquote {
pre.command EM, pre.example EM {
color: #3f0000;
- font-family: lucida grande, geneva, helvetica, arial, sans-serif;
}
p.command {
color: #7f0000;
- font-family: monaco, courier, monospace;
margin-left: 36pt;
}
a:link, a:visited {
font-weight: inherit;
text-decoration: none;
- color: #000099;
+ color: #317BFF;
}
a:link:hover, a:visited:hover, a:active {
text-decoration: underline;
- color: #990099;
+ color: #4C80BF;
}
table.page {
display: inline;
}
-input[type="text"], textarea {
- font-family: monaco, courier, monospace;
+button, input[type=button], input[type=submit], select {
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ font-family: inherit;
+ font-size: 14px;
+ font-weight: normal;
+ padding: 4px 8px;
+ text-decoration: none;
+ white-space: nowrap;
+ -moz-appearance: none;
+ -webkit-appearance: none;
+}
+button, input[type=button], input[type=file], input[type=submit] {
+ background: #317BFF;
+ color: #FFF;
+}
+button:hover, input[type=button]:hover, input[type=file]:hover, input[type=submit]:hover {
+ background: #65ABFF;
+ color: #FFF;
+}
+button:active, input[type=button]:active, input[type=file]:active, input[type=submit]:active {
+ background: #317BFF;
+ color: #FFF;
+}
+input[type=search] {
+ -webkit-appearance: textfield;
+}
+input[type=search], input[type=text] {
+ padding: 4px 8px;
+}
+select {
+ background: #ccc url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23000000' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px;
+ color: black;
+ padding: 4px 32px 4px 8px;
+}
+select:hover {
+ background: #ddd url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23000000' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px;
+}
+textarea {
+ width: 100%;
}
input[type="image"] {
text-align: right;
}
-h1.title {
- display: none;
-}
-
-h2.title, h3.title, .row .cups-body h2, .row .cups-body h3 {
+h1.title, h2.title, h3.title, .row .cups-body h2, .row .cups-body h3 {
border-bottom: solid 2pt black;
}
p.summary {
margin-left: 36pt;
- font-family: monaco, courier, monospace;
}
div.summary table {
background: rgba(191,191,191,0.3);
}
p code, li code, p.code, pre, ul.code li {
- font-family: monospace;
hyphens: manual;
margin: 18pt 0;
-webkit-hyphens: manual;
color: #ccc;
}
a:link, a:visited, table.list th a {
- color: #6666ff;
+ color: #4C80BF;
}
a:link:hover, a:visited:hover, a:active, table.list th a {
- color: #ff66ff;
+ color: #65ABFF;
}
hr {
color: #666;
table.list th {
color: #666;
}
+ button, input[type=button], input[type=file], input[type=submit] {
+ background: #255CBF;
+ color: #DDD;
+ }
+ button:hover, input[type=button]:hover, input[type=file]:hover, input[type=submit]:hover {
+ background: #4C80BF;
+ color: #EEE;
+ }
+ button:active, input[type=button]:active, input[type=file]:active, input[type=submit]:active {
+ background: #255CBF;
+ color: #DDD;
+ }
+ input[type=search], input[type=text], textarea {
+ background: #333;
+ color: #ccc;
+ }
+ select {
+ background: #333 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23CCCCCC' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px;
+ color: #ccc;
+ padding: 4px 32px 4px 8px;
+ }
+ select:hover {
+ background: #444 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23DDDDDD' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px;
+ }
}
-<H2 CLASS="title">Add Class</H2>
+<H1 CLASS="title">Add Class</H1>
<FORM METHOD="POST" ACTION="/admin">
<INPUT TYPE="HIDDEN" NAME="org.cups.sid" VALUE="{$org.cups.sid}">
-<H2 CLASS="title">Add Printer</H2>
+<H1 CLASS="title">Add Printer</H1>
<FORM METHOD="POST" ACTION="/admin">
<INPUT TYPE="HIDDEN" NAME="org.cups.sid" VALUE="{$org.cups.sid}">
-<div class="row">
<div class="halves">
- <H2 CLASS="title">Printers</H2>
+ <H1 CLASS="title">Printers</H1>
<P>
<FORM ACTION="/admin/" METHOD="POST"><INPUT TYPE="HIDDEN" NAME="org.cups.sid" VALUE="{$org.cups.sid}"><INPUT TYPE="HIDDEN" NAME="OP" VALUE="add-printer"><INPUT TYPE="SUBMIT" VALUE="Add Printer"></FORM>
<FORM ACTION="/printers/" METHOD="GET"><INPUT TYPE="SUBMIT" VALUE="Manage Printers"></FORM>
</P>
- <H2 CLASS="title">Classes</H2>
+ <H1 CLASS="title">Classes</H1>
<P>
<FORM ACTION="/admin/" METHOD="POST"><INPUT TYPE="HIDDEN" NAME="org.cups.sid" VALUE="{$org.cups.sid}"><INPUT TYPE="HIDDEN" NAME="OP" VALUE="add-class"><INPUT TYPE="SUBMIT" VALUE="Add Class"></FORM>
<FORM ACTION="/classes/" METHOD="GET"><INPUT TYPE="SUBMIT" VALUE="Manage Classes"></FORM>
</P>
- <H2 CLASS="title">Jobs</H2>
+ <H1>Jobs</H1>
<P>
<FORM ACTION="/jobs/" METHOD="GET"><INPUT TYPE="SUBMIT" VALUE="Manage Jobs"></FORM>
</P>
</div>
<div class="halves">
- <H2 CLASS="title">Server</H2>
+ <H1 CLASS="title">Server</H1>
<P>
<FORM ACTION="/admin/" METHOD="POST"><INPUT TYPE="HIDDEN" NAME="org.cups.sid" VALUE="{$org.cups.sid}"><INPUT TYPE="HIDDEN" NAME="OP" VALUE="config-server"><INPUT TYPE="SUBMIT" VALUE="Edit Configuration File"></FORM>
</FORM>}
</div>
-</div>
-<H2 CLASS="title">{op=modify-printer?Modify {printer_name}:Add Printer}</H2>
+<H1 CLASS="title">{op=modify-printer?Modify {printer_name}:Add Printer}</H1>
{CUPS_GET_DEVICES_DONE?<FORM METHOD="POST" ACTION="/admin">
<INPUT TYPE="HIDDEN" NAME="org.cups.sid" VALUE="{$org.cups.sid}">
-<H2 CLASS="title">{op=modify-printer?Modify {printer_name}:Add Printer}</H2>
+<H1 CLASS="title">{op=modify-printer?Modify {printer_name}:Add Printer}</H1>
<FORM METHOD="POST" ACTION="/admin" ENCTYPE="multipart/form-data">
<INPUT TYPE="HIDDEN" NAME="org.cups.sid" VALUE="{$org.cups.sid}">
-<H2 CLASS="title">{op=modify-printer?Modify {printer_name}:Add Printer}</H2>
+<H1 CLASS="title">{op=modify-printer?Modify {printer_name}:Add Printer}</H1>
<SCRIPT TYPE="text/javascript"><!--
function filterItems(el) {
-<H2 CLASS="title">{op=modify-printer?Modify {printer_name}:Add Printer}</H2>
+<H1 CLASS="title">{op=modify-printer?Modify {printer_name}:Add Printer}</H1>
<FORM METHOD="POST" ACTION="/admin">
<INPUT TYPE="HIDDEN" NAME="org.cups.sid" VALUE="{$org.cups.sid}">
-<H2 CLASS="title">{op=modify-printer?Modify {printer_name}:Add Printer}</H2>
+<H1 CLASS="title">{op=modify-printer?Modify {printer_name}:Add Printer}</H1>
<FORM METHOD="POST" ACTION="/admin">
<INPUT TYPE="HIDDEN" NAME="org.cups.sid" VALUE="{$org.cups.sid}">
-<H2 CLASS="title">Add Class</H2>
+<H1 CLASS="title">Add Class</H1>
<P>Class <A HREF="/classes/{printer_name}">{printer_name}</A> has been added
successfully.
-<H2 CLASS="title">Delete Class {printer_name}</H2>
+<H1 CLASS="title">Delete Class {printer_name}</H1>
<P><B>Warning:</B> Are you sure you want to delete class
{printer_name}?</P>
-<H2 CLASS="title">Delete Class {printer_name}</H2>
+<H1 CLASS="title">Delete Class {printer_name}</H1>
<P>Class {printer_name} has been deleted successfully.
-<H3 CLASS="title">Jobs</H3>
+<H1>Jobs</H1>
-<H2 CLASS="title">Modify Class {printer_name}</H2>
+<H1 CLASS="title">Modify Class {printer_name}</H1>
<P>Class <A HREF="/classes/{printer_name}">{printer_name}</A> has been
modified successfully.
-<H2 CLASS="title"><A HREF="{printer_uri_supported}">{printer_name}</A>
+<H1 CLASS="title"><A HREF="{printer_uri_supported}">{printer_name}</A>
({printer_state=3?Idle:{printer_state=4?Processing:Paused}},
{printer_is_accepting_jobs=0?Rejecting Jobs:Accepting Jobs},
-{server_is_sharing_printers=0?Not:{printer_is_shared=0?Not:}} Shared{default_name={printer_name}?, Server Default:})</H2>
+{server_is_sharing_printers=0?Not:{printer_is_shared=0?Not:}} Shared{default_name={printer_name}?, Server Default:})</H1>
<FORM METHOD="POST" ACTION="{printer_uri_supported}" NAME="maintenance">
<INPUT TYPE="HIDDEN" NAME="org.cups.sid" VALUE="{$org.cups.sid}">
-<H2 CLASS="title">{title} On {printer_name}</H2>
+<H1 CLASS="title">{title} On {printer_name}</H1>
<P>{job_state>5?:<IMG SRC="/images/wait.gif" WIDTH="16" HEIGHT="16"
ALIGN="ABSMIDDLE" ALT="Busy Indicator"> }Printer command job
</div>
<div class="cups-body">
<div class="row">
- <h1>{title}</h1>
</div>
<div class="cups-body">
<div class="row">
- <h1>{title}</h1>
}
</SCRIPT>
-<H2 CLASS="title">Edit Configuration File</H2>
+<H1>Edit Configuration File</H1>
<FORM NAME="cups" METHOD="POST" ACTION="/admin/">
<INPUT TYPE="HIDDEN" NAME="org.cups.sid" VALUE="{$org.cups.sid}">
-<H2 CLASS="title">{?title} {?printer_name} Error</H2>
+<H1 CLASS="title">{?title} {?printer_name} Error</H1>
<P>Error:</P>
-<H2 CLASS="title">{?title} {?printer_name} Error</H2>
+<H1 CLASS="title">{?title} {?printer_name} Error</H1>
<P>{?message?{message}:Error}:</P>
</div>
<div class="cups-body">
<div class="row">
- <h1>{title}</h1>
</div>
<div class="cups-body">
<div class="row">
- <h1>{title}</h1>
</div>
<div class="cups-body">
<div class="row">
- <h1>{title}</h1>
<DIV CLASS="sidebar"><TABLE CLASS="inset" SUMMARY="Contents">
<TR><TD>
-<H3 CLASS="title">Online Help Documents</H3>
+<H1>Online Help Documents</H1>
<P CLASS="l0"><A HREF="/help/{QUERY??QUERY={QUERY}:}">All Documents</A></P>
<HR>
</div>
<div class="cups-body">
<div class="row">
- <h1>{title}</h1>
-<H2 CLASS="title">Cancel Job {job_id}</H2>
+<H1 CLASS="title">Cancel Job {job_id}</H1>
<P><A HREF="{job_printer_uri}">Job {job_id}</A> has been canceled.
-<H2 CLASS="title">Hold Job {job_id}</H2>
+<H1 CLASS="title">Hold Job {job_id}</H1>
<P><A HREF="{job_printer_uri}">Job {job_id}</A> has been held from printing.
<INPUT TYPE="HIDDEN" NAME="OP" VALUE="{op}">
{job_id?<INPUT TYPE="HIDDEN" NAME="JOB_ID" VALUE="{job_id}">:}
-<H2 CLASS="title">{job_id?Move Job {job_id}:Move All Jobs}</H2>
+<H1 CLASS="title">{job_id?Move Job {job_id}:Move All Jobs}</H1>
<TABLE>
<TR>
-<H2 CLASS="title">{job_id?Move Job {job_id}:Move All Jobs}</H2>
+<H1 CLASS="title">{job_id?Move Job {job_id}:Move All Jobs}</H1>
<P>{job_id?<A HREF="/jobs/{job_id}">Job {job_id}</A>:All jobs} moved to
<A HREF="/{is_class?classes:printers}/{job_printer_name}">{job_printer_name}</A>.</P>
-<H2 CLASS="title">Release Job {job_id}</H2>
+<H1 CLASS="title">Release Job {job_id}</H1>
<P><A HREF="{job_printer_uri}">Job {job_id}</A> has been released for printing.
-<H2 CLASS="title">Reprint Job {job_id}</H2>
+<H1 CLASS="title">Reprint Job {job_id}</H1>
<P><A HREF="{job_printer_uri}">Job {job_id}</A> has been restarted.
-<H2 CLASS="title">Available Printers</H2>
+<H1 CLASS="title">Available Printers</H1>
{#device_uri=0?<P>No printers found.</P>
:<UL>{[device_uri]
-<H2 CLASS="title">Modify Class {printer_name}</H2>
+<H1 CLASS="title">Modify Class {printer_name}</H1>
<FORM METHOD="POST" ACTION="/admin">
<INPUT TYPE="HIDDEN" NAME="org.cups.sid" VALUE="{$org.cups.sid}">
-<H2 CLASS="title">Modify {printer_name}</H2>
+<H1 CLASS="title">Modify {printer_name}</H1>
<FORM METHOD="POST" ACTION="/admin">
<INPUT TYPE="HIDDEN" NAME="org.cups.sid" VALUE="{$org.cups.sid}">
-<H2 CLASS="title">Change Settings</H2>
+<H1 CLASS="title">Change Settings</H1>
<P>The server was not restarted because no changes were made to
-the configuration...</P>
+the configuration.</P>
<DIV CLASS="tab" ID="{group_id}">
-<H3 ALIGN="CENTER">{group}</H3>
+<H2 ALIGN="CENTER">{group}</H1>
<TABLE WIDTH="100%">
</div>
<div class="cups-body">
<div class="row">
- <h1>{title}</h1>
-<H2 CLASS="title">Accept Jobs On {is_class?Class:Printer} {printer_name}</H2>
+<H1 CLASS="title">Accept Jobs On {is_class?Class:Printer} {printer_name}</H1>
<P>{is_class?Class:Printer} <A
HREF="/{is_class?classes:printers}/{printer_name}">{printer_name}</A>
-<H2 CLASS="title">Add Printer {printer_name}</H2>
+<H1 CLASS="title">Add Printer {printer_name}</H1>
<P>Printer <A HREF="/printers/{printer_name}">{printer_name}</A> has been added
successfully.
-<H2 CLASS="title">Cancel Jobs On {is_class?Class:Printer} {printer_name}</H2>
+<H1 CLASS="title">Cancel Jobs On {is_class?Class:Printer} {printer_name}</H1>
<P>All jobs on {is_class?class:printer} <A
HREF="/{is_class?classes:printers}/{printer_name}">{printer_name}</A>
-<H2 CLASS="title">Set Default Options for {printer_name}</H2>
+<H1 CLASS="title">Set Default Options for {printer_name}</H1>
<P>{OP=set-class-options?Class <A HREF="/classes/{printer_name}">:Printer <A HREF="/printers/{printer_name}">}{printer_name}</A>
default options have been set successfully.
-<H2 CLASS="title">Delete Printer {printer_name}</H2>
+<H1 CLASS="title">Delete Printer {printer_name}</H1>
<P><B>Warning:</B> Are you sure you want to delete printer
{printer_name}?</P>
-<H2 CLASS="title">Set {is_class?Class:Printer} {printer_name} As Default</H2>
+<H1>Set {is_class?Class:Printer} {printer_name} As Default</H1>
<P>{is_class?Class:Printer} <A
HREF="/{is_class?classes:printers}/{printer_name}">{printer_name}</A>
</div>
<div class="cups-body">
<div class="row">
- <h1>{title}</h1>
</div>
<div class="cups-body">
<div class="row">
- <h1>{title}</h1>
</div>
</div>
- <div class="cups-footer">Copyright © 2021-2023 OpenPrinting. All rights reserved.</div>
+ <div class="cups-footer">Copyright © 2021-2025 OpenPrinting. All rights reserved.</div>
</body>
</html>