Make standalone webcam CSS with modern features

241607c9 · James Arcus · webcam · 64d65613 · 241607c9 · 241607c9
Commit 241607c9 authored 4 years ago by James Arcus Committed by webcam 1 year ago
--- a/index.html
+++ b/index.html
@@ -8,8 +8,9 @@
  <noscript>
   <meta http-equiv="refresh" content="10">
  </noscript>
-  <link rel="stylesheet" href="https://planet.ucc.asn.au/planet.css" type="text/css" media="screen">
-  <link rel="stylesheet" href="webcam-overrides.css" type="text/css" media="screen">
+  <!--<link rel="stylesheet" href="https://planet.ucc.asn.au/planet.css" type="text/css" media="screen">
+  <link rel="stylesheet" href="webcam-overrides.css" type="text/css" media="screen">-->
+  <link rel="stylesheet" href="webcam.css" type="text/css" media="screen">
  <script src="webcams.js"></script>
 </head>
 <body onload="windowOnload()">

--- a/webcam.css
+++ b/webcam.css
+body {
+    font-family: sans-serif;
+    background-color: white;
+    margin: 0;
+    padding: 10px;
+}
+
+.header {
+    border-bottom: 1px solid gray;
+    height: 120px;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+}
+
+#globalnav-wrapper {
+    font: 69% "Lucida Grande", Verdana, Lucida, Helvetica, Arial, sans-serif;
+}
+
+#portal-globalnav {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+#portal-globalnav li {
+    display: inline;
+}
+
+#portal-globalnav li a {
+    background: #f9f9f9 url(//www.ucc.asn.au/images/grad.gif) bottom repeat-x;
+    border: 1px solid gray;
+    border-bottom-style: none;
+    color: black;
+    margin-right: 0.5em;
+    padding: 0 2em;
+    text-decoration: none;
+    text-transform: lowercase;
+}
+
+.items {
+    margin: 0 0.75em;
+}
+
+.items > * {
+    padding-left: 0.75rem;
+}
+
+h1 {
+    font-family: sans-serif;
+    font-size: 150%;
+    border-bottom: 1px solid gray;
+    margin-top: 1em;
+    margin-bottom: 0.5em;
+}
+
+.navMenu a {
+    padding-right: 5px;
+}
+
+.navMenu a:visited {
+    color: #00E;
+}
+
+.camSection {
+    text-align: center;
+}
+
+.camera {
+    display: inline-block;
+    font-size: 0;
+}
+
+.camera img {
+    max-width: 465px;
+    width: 100%;
+}
+
+.footer {
+    color: #999999;
+    text-align: center;
+}