The URI of TUHH Docker Registry changed from "docker.rz.tu-harburg.de:5000" to "docker.rz.tu-harburg.de". Please update your gitlab-ci.yml files if you use images from this registry.

Commit a3553cf4 authored by Tobias Zeumer's avatar Tobias Zeumer

Cleaning up: trim, reorder, minor fixes and improvements; #4

parent 790c82bc
......@@ -18,26 +18,20 @@ table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
time, mark, audio, video
{margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section
{display: block;}
body
body
{line-height: 1.618; font-family: Georgia, Palatino, 'Palatino Linotype', FreeSerif, serif; overflow-x: hidden; /* Firefox; "WebKit reports the width as being the visible width, discounting the width of any scrollbars if they’re shown. Gecko, on the other hand, reports the full width of the browser, regardless of whether any scrollbars are shown" (https://dmrutherford.github.io/echo/scrollbars-and-page-width)) */}
ol, ul
ol, ul
{list-style: none;}
blockquote, q
blockquote, q
{quotes: none;}
blockquote:before, blockquote:after, q:before, q:after
blockquote:before, blockquote:after, q:before, q:after
{content: ''; content: none;}
table
table
{border-collapse: collapse; border-spacing: 0;}
a {text-decoration: none;}
......@@ -45,7 +39,7 @@ a {text-decoration: none;}
* BASIC TYPE
*/
p {margin: 0 0 1em;}
h1, h2, h3, h4
h1, h2, h3, h4
{margin: .5em 0 .75em; line-height: 1.3;}
h1 {font-size: 1.5em;}
h2 {font-size: 1.25em;}
......@@ -56,58 +50,57 @@ button {display: block; -webkit-appearance: button; cursor: pointer;}
/**
* BOX HACKING
*/
html
html
{box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
*, *:before, *:after
*, *:before, *:after
{box-sizing: inherit; -moz-box-sizing: inherit; -webkit-box-sizing: inherit;}
/**
* CLEAR FLOATS
* Reference: http://w3bits.com/clearfix
*/
.cf:after
.cf:after
{content: ""; display: table; clear: both;}
/* #############################################################################
HTML skeleton
Color scheme: http://paletton.com/#uid=7000u0k00u700++00K+01oj0jiL
############################################################################# */
#container-outer-flex
{width: 100vw; height: 100vh;}
#container-content {height: calc(100vh - 48px); max-height: calc(100vh - 48px); width: 100%; display: flex; flex-direction: column;}
/* without giving height Edge and Firefox break */
#map_container {background-color: #F0F0F0; position: relative; flex: 1 0 auto; display: flex; height: 1px; z-index: 10; max-height: calc(100vh - 48px);}
#map_container {background-color: #F0F0F0; position: relative; flex: 1 0 auto; display: flex; height: 1px; max-height: calc(100vh - 48px);}
#zoom_parent {margin: 0; padding: 0; flex: 1 0 auto; display: flex;}
#map, .panzoom {margin: 0; padding: 0; flex: 1 0 auto; display: flex}
svg#tubhh
svg#tubhh
{width: 100%; flex: 1 0 auto; }
#legend
{background-color: #c0c0c0; overflow: auto; flex: 0 0 auto; height: 30vh; max-height: 30vh; z-index: 20; transition-property: all; transition-duration: .5s; transition-timing-function: cubic-bezier(0, 1, 0.5, 1);}
/* too nervous? : {background-color: #c0c0c0; overflow: auto; flex: 0 1 content; min-height: 200px; max-height: 30vh; z-index: 20;} */
#legend
{background-color: #c0c0c0; overflow: auto; flex: 0 0 auto; height: 30vh; max-height: 30vh; transition-property: all; transition-duration: .5s; transition-timing-function: cubic-bezier(0, 1, 0.5, 1);}
/* too nervous? : {background-color: #c0c0c0; overflow: auto; flex: 0 1 content; min-height: 200px; max-height: 30vh; } */
/* #############################################################################
SVG ICON SPRITES
############################################################################# */
.icon
.icon
{width: 32px; height: 32px; float: left; margin: 0.65em 1.5em 0 1.5em;}
.icon use
{fill: currentColor;}
button .icon
button .icon
{display: block; float: none; width: 1em; height: 1em; fill: currentcolor; margin: 0px auto;}
button:hover
button:hover
{color: #515158; outline: none;}
.iconbutton:disabled
{cursor: default; pointer-events: none; opacity: 0.2;}
.iconbutton
.iconbutton
{font-size: 1.2em; display: block; width: 2em; height: 2em; color: rgb(255, 255, 255); background: #C0C0C0;
margin: 0px; padding: 0px; border-width: 0px; border-style: initial; border-color: initial; border-image: initial;}
.iconbutton-dark
.iconbutton-dark
{background: #909090;}
/* #############################################################################
LEGENDS, SETTINGS, WIDGETS
############################################################################# */
......@@ -115,11 +108,11 @@ button:hover
/* Legend (content)
*/
#legend_btn_close
{float: right; position: -webkit-sticky; position: sticky; top: 0; z-index: 100;}
{float: right; position: -webkit-sticky; position: sticky; top: 0; z-index: 99;}
/* https://www.mediaevent.de/xhtml/dl.html */
#legend dl
#legend dl
{padding: 0; margin: 0 auto; max-width: 1000px;}
#legend dt, #legend dd
#legend dt, #legend dd
{display: none;}
/* @todo: seriously change fixed, width and min-width - just for show, just for now */
dt {font-size: 1.2em; padding: 3px 0 5px 8px; color: #ffffff; font-weight: bold; position: -webkit-sticky; position: sticky; top: 0; background-color: #C0C0C0; width: 100%;}
......@@ -134,14 +127,14 @@ dd a, #modal a {color: #27827f; text-decoration: none;}
/* Widgets
*/
#widgets
{position: absolute; top: 0; left: 0; height: 100%;}
#widget-levelchange
#widgets
{position: absolute; top: 0; left: 0; height: 100%; z-index: 99}
#widget-levelchange
{text-align: center; transition: opacity 0.8s;}
#widget-language_change {}
.lng_de {}
.lng_de {}
.lng_en {display: none;}
#widget-zoom
......@@ -153,102 +146,103 @@ dd a, #modal a {color: #27827f; text-decoration: none;}
#widget-search .termLegend {color: #6BC1BB;}
#widget-settings {}
#highlighter {outline: none;}
#search, #settings
#search, #settings
{position: absolute; left: 2.4em; display: none;}
.search_input
.search_input
{height: 32px; width: 220px; padding: 1.315em 2em; color: #fff; border: 0; background: #515158; border-radius: 0; outline-style: none;} /* height in pixels sucks; later... */
#settings {background-color: #fff; width: 220px; padding: 5px; z-index: 100;}
#settings h2
#settings {background-color: #fff; width: 220px; padding: 5px; z-index: 10;}
#settings h2
{font-weight: bold; text-align: center; background-color: #D7D7DC; width: 100%; margin: 5px 0 10px 0; padding: 1px; color: #FFFFFF;}
#settings label
#settings label
{vertical-align: top;}
/* Switch: Toogle button for select's
todo: https://github.com/scottaohara/aria-switch-button ; https://inclusive-components.design/toggle-button/
*/
.switch
.switch
{position: relative; display: inline-block; width: 50px; height: 27px; margin-right: 8px;}
/* Hide default HTML checkbox */
.switch input
{display:none;}
.switch input
{display:none;}
/* The slider */
.sliderToggle
.sliderToggle
{position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; }
.sliderToggle:before
.sliderToggle:before
{position: absolute; content: ""; height: 21px; width: 21px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s;transition: .4s;}
input:checked + .sliderToggle
input:checked + .sliderToggle
{background-color: #6BC1BB;}
input:focus + .sliderToggle
input:focus + .sliderToggle
{box-shadow: 0 0 1px #6BC1BB;}
input:checked + .sliderToggle:before
input:checked + .sliderToggle:before
{-webkit-transform: translateX(21px); -ms-transform: translateX(21px); transform: translateX(21px);}
/* Rounded sliders */
.sliderToggle.round
.sliderToggle.round
{border-radius: 34px;}
.sliderToggle.round:before
.sliderToggle.round:before
{border-radius: 50%;}
/* #############################################################################
ACTUAL MENU CSS
############################################################################# */
############################################################################# */
/**
* http://w3bits.com/css-responsive-nav-menu/
*/
#menu
#menu
{background-color: #6BC1BB !important;} /*#909090 #09c*/
#menu ul
#menu ul
{margin: 0; padding: 0; }
#menu .main-menu
#menu .main-menu
{display: none;}
#tm:checked + .main-menu
#tm:checked + .main-menu
{display: block;}
#menu input[type="checkbox"], #menu ul span.drop-icon
#menu input[type="checkbox"], #menu ul span.drop-icon
{display: none;}
#menu li, #toggle-menu, #menu .sub-menu
#menu li, #toggle-menu, #menu .sub-menu
{border-style: solid; border-color: rgba(0, 0, 0, .05);}
#menu li, #toggle-menu
#menu li, #toggle-menu
{border-width: 0 0 1px;}
#menu .sub-menu
#menu .sub-menu
{background-color: #444; border-width: 1px 1px 0; margin: 0;} /* org: margin: 0 1em; */
#menu .sub-menu li:last-child
#menu .sub-menu li:last-child
{border-width: 0;}
#menu li, #toggle-menu, #menu a
#menu li, #toggle-menu, #menu a
{position: relative; display: block; color: white; text-shadow: 1px 1px 0 rgba(0, 0, 0, .125);}
#toggle-menu
#toggle-menu
{background: #333;}
#toggle-menu, #menu a
#toggle-menu, #menu a
{padding: 0.65em 1.5em;}
#menu a
#menu a
{transition: all .125s ease-in-out; -webkit-transition: all .125s ease-in-out;}
#menu a:hover
#menu a:hover
{background-color: white; color: #09c;}
#menu .sub-menu
#menu .sub-menu
{display: none;}
#menu input[type="checkbox"]:checked + .sub-menu
#menu input[type="checkbox"]:checked + .sub-menu
{display: block;}
#menu .sub-menu a:hover
#menu .sub-menu a:hover
{color: #444;}
#toggle-menu .drop-icon, #menu li label.drop-icon
#toggle-menu .drop-icon, #menu li label.drop-icon
{position: absolute; right: 0; top: 0;}
#menu label.drop-icon, #toggle-menu span.drop-icon
#menu label.drop-icon, #toggle-menu span.drop-icon
{padding: 0.65em; font-size: 1em; text-align: center; background-color: rgba(0, 0, 0, .125); text-shadow: 0 0 0 transparent; color: rgba(255, 255, 255, .75);}
#menu li#menuIconRow
#menu li#menuIconRow
{display: flex; justify-content: space-around;}
#menu a.inconizedLink, #menu a.inconizedLink svg, a.inconizedLink, a.inconizedLink svg
{width: 2.2em; height: 2.2em;}
#menu a.inconizedLink, a.inconizedLink
{display: inline-block; color: #fff; margin: 8px 0; padding: 0; border: thin solid black; text-align: center; box-shadow: 0 0 10px 1px rgba(0,0,0,0.75); background-color: rgba(255, 255, 128, 0.5);}
#menu a.inconizedLink svg, a.inconizedLink svg
{padding: 5px; stroke-width: 0; stroke: currentColor; fill: currentColor;}
{padding: 5px; stroke-width: 0; stroke: currentColor; fill: currentColor;}
dd a.inconizedLink {float: left; margin-right: 8px; }
/* #############################################################################
Modal
############################################################################# */
############################################################################# */
.modal
{position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); max-height: calc(100% - 100px); z-index: 1000; background: rgba(255, 255, 255, 0.8);}
.modal-body
......@@ -261,19 +255,19 @@ dd a.inconizedLink {float: left; margin-right: 8px; }
/* #############################################################################
Scrensaver
############################################################################# */
#scrensaver
############################################################################# */
#scrensaver
{position: absolute; top: 50%; left: 50%; animation: screensaverAnimate 160s infinite; z-index: 1000; display: none;}
.left
.left
{float:left;}
.scr_img
{background-color: #6BC1BB; height: 100px; width: 100px; margin-right:10px;}
.scr_text
.scr_text
{background-color: #ffffff; height: 100px; width: 100px; text-align: center;}
#scrensaver h4
{ margin:10px 0;}
#scrensaver p
{ margin:0; padding:0;}
#scrensaver h4
{ margin:10px 0;}
#scrensaver p
{ margin:0; padding:0;}
@keyframes screensaverAnimate {
0% {transform: translate(-100%, -100%);}
10% {transform: translate(100%, 100%);}
......@@ -304,68 +298,51 @@ dd a.inconizedLink {float: left; margin-right: 8px; }
/* #############################################################################
Autocomplete
############################################################################# */
.autocomplete {
/*the container must be positioned relative:*/
position: relative;
display: inline-block;
}
.autocomplete-items {
position: absolute;
border: 1px solid #d4d4d4;
border-bottom: none;
border-top: none;
z-index: 99;
/*position the autocomplete items to be the same width as the container:*/
top: 100%;
left: 0;
right: 0;
}
.autocomplete-items div {
padding: 10px;
cursor: pointer;
background-color: #fff;
border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
/*when hovering an item:*/
background-color: #e9e9e9;
}
.autocomplete-active {
############################################################################# */
/*the container must be positioned relative:*/
.autocomplete
{position: relative; display: inline-block;}
/*position the autocomplete items to be the same width as the container:*/
.autocomplete-items
{position: absolute; border: 1px solid #d4d4d4; border-bottom: none; border-top: none; z-index: 99; top: 100%; left: 0; right: 0;}
.autocomplete-items div
{padding: 10px; cursor: pointer; background-color: #fff; border-bottom: 1px solid #d4d4d4;}
/*when hovering an item:*/
.autocomplete-items div:hover
{background-color: #e9e9e9;}
/*when navigating through the items using the arrow keys:*/
background-color: DodgerBlue !important;
color: #ffffff;
}
.autocomplete-active
{background-color: DodgerBlue !important; color: #ffffff;}
/* #############################################################################
Media Queries
############################################################################# */
@media only screen and (min-width: 1360px) {
############################################################################# */
@media only screen and (min-width: 1360px) {
dt {padding: 5px 0px;}
dd {padding: 0px;}
dd {padding: 0px;}
}
@media only screen and (min-width: 1024px) {
@media only screen and (min-width: 1024px) {
#container-outer-flex
{display: flex; }
#container-content {height: 100vh; max-height: 100vh;}
#map_container {max-height: 100vh;}
#map_container {max-height: 100vh;}
/* Always open menu (as sidemenu on the right) on large screens */
#menu {margin: 0; padding: 0; max-height: 100vh; overflow: auto; min-width: 350px; max-width: 350px; order: 2;}
#tm:not(:checked) + .main-menu
#tm:not(:checked) + .main-menu
{display: block;}
#toggle-menu .drop-icon {display: none;}
/* Legend */
#legend dt {font-size: 1.5em;}
/* Resize and realign widgets (right) on large screen */
#widgets {right: 0; left: auto;}
#search, #settings {right: 4em; left: auto;}
.iconbutton {font-size: 2em;}
.search_input
.search_input
{height: 64px; width: 220px; padding: 1.315em 2em; color: #fff; border: 0; background: #515158; border-radius: 0; outline-style: none;} /* height in pixels sucks; later... */
#settings h2 {margin: 5px 0 1em 0; padding: 8px; }
/* Zoom button */
......@@ -373,18 +350,17 @@ dd a.inconizedLink {float: left; margin-right: 8px; }
{padding: 15px 0; left: 0;}
.btn_zoom {width: 30px; height: 30px; font-size: 1em;}
.zoom-reset {width: 60px;}
}
@media print {
nav, aside#legend, #widgets
nav, aside#legend, #widgets
{display: none !important;}
@page
{size: landscape}
#map, svg#tubhh
{min-height: 100vh; max-width: 110vw; max-height: 100vh; position: absolute; top: 0px; overflow: hidden; left: -40px;}
#map_container, #map, svg#tubhh
#map_container, #map, svg#tubhh
{background-color: #ffffff;}
.daylightshadow {display: none;}
}
......@@ -392,35 +368,35 @@ dd a.inconizedLink {float: left; margin-right: 8px; }
/* #############################################################################
Old layout with "classic" menu bar - substract 8000 from px's for original values
############################################################################# */
############################################################################# */
@media only screen and (min-width: 81024px) {
nav {display: flex; align-items: center; justify-content: center;}
#menu .main-menu
#menu .main-menu
{display: block;}
#toggle-menu, #menu label.drop-icon
#toggle-menu, #menu label.drop-icon
{display: none;}
#menu ul span.drop-icon
#menu ul span.drop-icon
{display: inline-block;}
#menu li
#menu li
{float: left; border-width: 0 1px 0 0;}
#menu .sub-menu li
#menu .sub-menu li
{float: none;}
#menu .sub-menu
#menu .sub-menu
{border-width: 0; margin: 0; position: absolute; top: 100%; left: 0; width: 19.5em; z-index: 3000;}
#menu .sub-menu, #menu input[type="checkbox"]:checked + .sub-menu
#menu .sub-menu, #menu input[type="checkbox"]:checked + .sub-menu
{display: none;}
#menu .sub-menu li
{border-width: 0 0 1px;}
#menu .sub-menu .sub-menu
#menu .sub-menu .sub-menu
{top: 0; left: 100%;}
#menu .sub-menu .drop-icon
#menu .sub-menu .drop-icon
{position: absolute; top: 0; right: 0; padding: 0.65em;}
#menu li:hover > input[type="checkbox"] + .sub-menu
#menu li:hover > input[type="checkbox"] + .sub-menu
{}
}
}
@media only screen and (max-width: 9670px) and (min-width: 8025px) {
#menu li
#menu li
{width: 33.333%;}
#menu .sub-menu li
#menu .sub-menu li
{width: auto;}
}
\ No newline at end of file
}
\ No newline at end of file
......@@ -28,9 +28,9 @@
/* Shelves LBS */
.lbs.ek, .lbs.et, .lbs.mt, .lbs.nt, .lbs.rt, .lbs.ti {fill: #61BC57;}
.lbs.en, .lbs.fa, .lbs.ft, .lbs.kt, .lbs.ku, .lbs.ms, .lbs.ot, .lbs.sk, .lbs.te, .lbs.wk {fill: #BCB397}
/* .lbs.ar, .lbs.bk, .lbs.gg,
.lbs.an, .lbs.eb, .lbs.re
.lbs.ag, .lbs.na, .lbs.kw, lbs.rp */
/* .lbs.ar, .lbs.bk, .lbs.gg,
.lbs.an, .lbs.eb, .lbs.re
.lbs.ag, .lbs.na, .lbs.kw, lbs.rp */
.lbs.ba, .lbs.sb, .lbs.so {fill: #DC0605}
.lbs.bw, .lbs.gk, .lbs.vw, .lbs.wh {fill: #E9941C}
.lbs.bl, .lbs.bt, .lbs.ch, .lbs.gt, .lbs.gw, .lbs.ma, .lbs.ph, .lbs.us, .lbs.vt {fill: #F5E645}
......@@ -67,12 +67,12 @@
/* #############################################################################
Set default view. Later modified by url parameters and user actions
Set default view. Later modified by url parameters and user actions
############################################################################# */
/* Default style for all elements */
/* #tubhh {fill:#fff;stroke:#000000;stroke-width:0.35;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1} */
/* Hide all, toggle by url parameter (or - later - by UI)
/* Hide all, toggle by url parameter (or - later - by UI)
Probably remove. It's done via function toggleLevel()
*/
.subject_label {display: none;}
......@@ -110,13 +110,13 @@
Modify view
############################################################################# */
/* Mouse Pointer (not working in chrome (because of pan pointer most likely... */
#eg_ls_shelves_ls1 use, #eg_ls_shelves_lbs use, #eg_ls_shelves_special use, #og1_ls_shelves_ls2 use, #og1_ls_shelves_cr use
#eg_ls_shelves_ls1 use, #eg_ls_shelves_lbs use, #eg_ls_shelves_special use, #og1_ls_shelves_ls2 use, #og1_ls_shelves_cr use
{cursor: help !important;}
/* Map Markers */
/* One way to make markers less space comsuming
#mapmarker-outer {fill: none !important; }
#mapmarker-inner {fill:#DFFFFF !important; filter:url(#markershadow);}
/* Map Markers */
/* One way to make markers less space comsuming
#mapmarker-outer {fill: none !important; }
#mapmarker-inner {fill:#DFFFFF !important; filter:url(#markershadow);}
.map_marker_layer {transform: translate(0, 5px);} */
/* Hover cursor and animations for markers */
......@@ -131,5 +131,5 @@
}
/* shadow */
.daylightshadow {/* filter and class defined in svg itself (thus only as reminder here): filter:url(#daylightshadow);
.daylightshadow {/* filter and class defined in svg itself (thus only as reminder here): filter:url(#daylightshadow);
/* This works only in Firefox: -webkit-filter: drop-shadow( -5px -5px 5px #000 ); filter: drop-shadow( -5px -5px 5px #000 ); */}
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment