@internetarchive/dweb-archive-dist/dweb-archive-styles.css

Internet Archive offline UI distribution for use by dweb-mirror

/* Styles used for archive.html */
.floatright {margin: 0 0 3px 10px; float: right; clear: right; text-align: right;
    position: fixed; z-index: 999999; top: 100px; right: 10px; font-size: 50% }
.floatright li {padding-top: 1px; margin: 0 0 3px 3px;} /* Wide enough for two indicators */
.floatright ul {margin: 0 0 3px 10px; width: 150px;
    display: grid;  grid-template-columns: repeat(auto-fit, minmax(7em, 1fr));  grid-auto-flow: dense;}  /* Wide enogh for two indicators */

.transportstatus0 {color: lawngreen}
.transportstatus1 {color: red}
.transportstatus2 {color: yellow}
.transportstatus3 {color: black}
.transportstatus4 {color: purple}

/* These edits are made to archive-min.js as they are bugs in the CSS rather than changes.
   because that file is minimized its hard to see
   if update archive-min.js will need to reapply, or can apply here*/
/*
-body.ia-module.tiles .row>.tilebars .item-ia .item-parent .item-parent-img img{max-height:90px;max-width:90px
+body.ia-module.tiles .row>.tilebars .item-ia .item-parent .item-parent-img img{max-height:90px;max-width:90px;width:45px;width:45px}
-body.ia-module.tiles .item-ia .item-parent .item-parent-img img{max-height:90px;max-width:90px}
+body.ia-module.tiles .item-ia .item-parent .item-parent-img img{max-height:90px;max-width:90px;width:45px;width:45px}
-body.ia-module.tiles .item-ia .item-parent .item-parent-img img{max-height:90px;max-width:90px}
+body.ia-module.tiles .item-ia .item-parent .item-parent-img img{max-height:90px;max-width:90px;width:45px;width:45px}
 */


body.navia .navbar #nav-dweb{position:static;margin:0;width:100%;background-color:#353535;text-align:center}
body.navia .navbar #nav-dweb li:hover{color:white !important}
body.navia .navbar #nav-dweb ul{margin-bottom: 0px; display: inline}

/* TODO check and figure out why these break the above rules
@media (max-width:991px){body.navia .navbar #nav-dweb li{margin-left:9px;margin-right:9px}}
@media (max-width:820px){body.navia .navbar #nav-dweb li{margin-left:7px;margin-right:7px}}
@media (max-width:767px){body.navia .navbar #nav-dweb{display:none !important}}
*/

#nav-dweb {
    text-align: left;
    width: 100%;
    color: #ccc;
    background-color: #2A2A2A;
    padding: 4px 0px 4px 0;
    box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5);
    height: auto;
    display: block; /* Make sure Dweb ipfs, etc all on one line - flexgrid could be better*/
}
#dweb-status, #dweb-mirrorconfig, #dweb-mirrorreload {
    display: inline-block;
}
/*
Override default for <a> as blue
 */
#dweb-mirrorreload a {
    color: #ccc
}
#dweb-status ul, #dweb-mirrorconfig ul, #dweb-mirrorreload ul {
    padding-left:0;
}
body.navia .navbar #nav-dweb #dweb-status li, body.navia .navbar #nav-dweb a, .navbar #nav-dweb #dweb-mirrorconfig li, .navbar #nav-dweb #dweb-mirrorreload li {
    height: auto;
    font-size: 12px;
    margin: 0 6px;
    vertical-align:top;
    zoom:1;
    line-height:1;
}
body.navia .navbar #nav-dweb #dweb-status clickable, body.navia .navbar #nav-dweb a, .navbar #nav-dweb #dweb-mirrorconfig li, .navbar #nav-dweb #dweb-mirrorreload li {
    cursor: pointer;
}
.dwebnavbuttons li  {
    padding: 5px 8px 5px 8px;
    background-size: 14px;
    color: #c0c0c0;
}
body.navia .navbar #nav-dweb #dweb-status li, body.navia .navbar #nav-dweb #dweb-mirrorconfig li, .dwebnavbuttons .settings  {
    padding: 5px 8px 5px 20px;
    background-size: 10px;
}
body.navia .navbar #nav-dweb #dweb-status li, body.navia .navbar #nav-dweb #dweb-mirrorconfig li, body.navia .navbar #nav-dweb #dweb-mirrorreload li {
    border: 1px solid #848484;
    border-radius: 3px;
    background-position: 5px 50%;
    background-repeat: no-repeat;
    display:inline-block;
}
body.navia .navbar #nav-dweb a {
    padding: 5px 0px 5px 0px;
    display: inline
}
body.navia .navbar #nav-dweb a img {
    height: 30px;
    margin-top: 4px;
}
.transportstatus0 {
    color: #ccc;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="200" height="200"><circle cx="100" cy="100" r="95" fill="green" /></svg>');
}
.transportstatus1 {
    color: #ccc;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="200" height="200"><circle cx="100" cy="100" r="95" fill="red" /></svg>');
}
.transportstatus2 {
    color: #ccc;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="200" height="200"><circle cx="100" cy="100" r="95" fill="yellow" /></svg>');

}
.transportstatus3 {
    color: #ccc;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="200" height="200"><circle cx="100" cy="100" r="95" fill="black" /></svg>');

}
.transportstatus4 {
    color: #ccc;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="200" height="200"><circle cx="100" cy="100" r="95" fill="purple" /></svg>');

}
/*
.dwebnavbuttons .reload {
    background-image: url('/archive/images/baseline-update-24px.svg');
}
 */
/*
.dwebnavbuttons .settings {
    background-image: url('/archive/images/settings.svg');
}
.dwebnavbuttons .local {
    background-image: url('/archive/images/baseline-home-24px.svg');
}
*/
/*OBS not flagging dweb-message -- .dweb-message { padding-top: 60px; padding-left; 3em } /*Else gets hidden behind navwrap - not sure why */

.dweb-nav-left {
    position: relative;
    top: 1px;
}
.notavailable {
    opacity: 30%
}
.crawlnone {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="200" height="200"><circle cx="100" cy="100" r="95" fill="red" /></svg>');
}
.crawldownloaded {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="200" height="200"><circle cx="100" cy="100" r="95" fill="white" /></svg>');
}
.crawldetails {
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="200" height="200"><circle cx="100" cy="100" r="95" fill="green" /></svg>');
}
.crawlall {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="200" height="200"><circle cx="100" cy="100" r="95" fill="blue" /></svg>');
}

/* Naming from here conforms to https://rscss.io */
.settings-item .playbutton {
    margin-left: 10px;
    border: 1px solid #303030;
    padding-left: 4px;
    padding-right: 4px;
}
.settings-item .crawlname {
    font-size:larger;
    font-weight: bolder;
}

radio-player-controller {
    --trackColor: black;
    --timeColumnWidth: 5rem;
    --autoScrollButtonWidth: 13rem;
    color: white;
    font-size: 16px;
    line-height: 1.6;
}