zeronet/plugins/Sidebar/media/Sidebar.css
Vadim Ushakov 2de3c9a544 Allow opening the sidebar while content.json is not loaded
If one opens the sidebar of a site not being downloaded yet, the following error occurs:

```
  Internal error: KeyError('content.json',): 'content.json'
  UiWebsocket.py line 79 > 235 > Sidebar/SidebarPlugin.py line 527 > 120 > ContentDbDict.py line 59
```

Also, the sidebar is not visible.

This fixes the both issues.

For sites without peers, the only way to delete the site was to navigate to ZeroHellow, scroll the left panel to "Connecting sites", and delete the site from the list. Now those sites can be deleted from the sidebar.
2020-03-17 23:09:40 +07:00

168 lines
8.6 KiB
CSS

.menu {
font-family: Roboto, 'Segoe UI', 'Helvetica Neue';
}
.drag-bg { width: 100%; height: 100%; position: fixed; }
.fixbutton.dragging { cursor: -webkit-grabbing; }
.fixbutton-bg:active { cursor: -webkit-grabbing; }
.body-sidebar, .body-console { background-color: #666 !important; }
#inner-iframe { transition: 0.3s ease-in-out; transform-origin: left bottom; }
.body-sidebar iframe { transform: rotateY(5deg); opacity: 0.8; pointer-events: none; outline: 1px solid transparent }
.body-console iframe { transform: rotateX(5deg); opacity: 0.8; pointer-events: none; outline: 1px solid transparent }
.sidebar .label-right { float: right; margin-right: 7px; margin-top: 1px; float: right; }
.sidebar .link-right { color: white; text-decoration: none; border-bottom: 1px solid #666; text-transform: uppercase; }
.sidebar .link-right:hover { border-color: #CCC; }
.sidebar .link-right:active { background-color: #444 }
/* SIDEBAR */
.sidebar-container { width: 100%; height: 100%; overflow: hidden; position: fixed; z-index: 2; }
.sidebar { background-color: #212121; position: fixed; backface-visibility: hidden; right: -1200px; height: 100%; width: 1200px; } /*box-shadow: inset 0px 0px 10px #000*/
.sidebar .content { margin: 30px; font-family: "Segoe UI Light", "Segoe UI", "Helvetica Neue"; color: white; width: 375px; height: 300px; font-weight: 200; transition: all 1s; opacity: 0 }
.sidebar-container.loaded .content { opacity: 1; transform: none }
.sidebar h1, .sidebar h2 { font-weight: lighter; }
.sidebar .close { color: #999; float: right; text-decoration: none; margin-top: -5px; padding: 0px 5px; font-size: 33px; margin-right: 20px; display: none }
.sidebar .button { margin: 0px; display: inline-block; transition: all 0.3s; box-sizing: border-box; max-width: 260px }
.sidebar .button.hidden { padding: 0px; max-width: 0px; opacity: 0; pointer-events: none }
.sidebar #button-delete { background-color: transparent; border: 1px solid #333; color: #AAA; margin-left: 10px }
.sidebar #button-delete:hover { border: 1px solid #666; color: white }
.sidebar .flex { display: flex }
.sidebar .flex .input.text, .sidebar .flex input.text { width: 100%; }
.sidebar .flex .button { margin-left: 4px; white-space: nowrap; }
/* FIELDS */
.sidebar .fields { padding: 0px; list-style-type: none; width: 355px; }
.sidebar .fields > li, .sidebar .fields .settings-owned > li { margin-bottom: 30px }
.sidebar .fields > li:after, .sidebar .fields .settings-owned > li:after { clear: both; content: ''; display: block }
.sidebar .fields label {
font-family: Consolas, monospace; text-transform: uppercase; font-size: 13px; color: #ACACAC; display: inline-block; margin-bottom: 10px;
vertical-align: text-bottom; margin-right: 10px; width: 100%
}
.sidebar .fields label small { font-weight: normal; color: white; text-transform: none; }
.sidebar .fields .text { background-color: black; border: 0px; padding: 10px; color: white; border-radius: 3px; width: 260px; font-family: Consolas, monospace; }
.sidebar .fields .text.long { width: 330px; font-size: 72%; }
.sidebar .fields .disabled { color: #AAA; background-color: #3B3B3B; }
.sidebar .fields .text-num { width: 30px; text-align: right; padding-right: 30px; }
.sidebar .fields .text-post { color: white; font-family: Consolas, monospace; display: inline-block; font-size: 13px; margin-left: -25px; width: 25px; }
/* Select */
.sidebar .fields select {
width: 225px; background-color: #3B3B3B; color: white; font-family: Consolas, monospace; appearance: none;
padding: 5px; padding-right: 25px; border: 0px; border-radius: 3px; height: 35px; vertical-align: 1px; box-shadow: 0px 1px 2px rgba(0,0,0,0.5);
}
.sidebar .fields .select-down { margin-left: -39px; width: 34px; display: inline-block; transform: rotateZ(90deg); height: 35px; vertical-align: -8px; pointer-events: none; font-weight: bold }
/* Checkbox */
.sidebar .fields .checkbox { width: 50px; height: 24px; position: relative; z-index: 999; opacity: 0; }
.sidebar .fields .checkbox-skin { background-color: #CCC; width: 50px; height: 24px; border-radius: 15px; transition: all 0.3s ease-in-out; display: inline-block; margin-left: -59px; }
.sidebar .fields .checkbox-skin:before {
content: ""; position: relative; width: 20px; background-color: white; height: 20px; display: block; border-radius: 100%; margin-top: 2px; margin-left: 2px;
transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.sidebar .fields .checkbox:checked ~ .checkbox-skin:before { margin-left: 27px; }
.sidebar .fields .checkbox:checked ~ .checkbox-skin { background-color: #2ECC71; }
/* Fake input */
.sidebar .input { font-size: 13px; width: 250px; display: inline-block; overflow: hidden; text-overflow: ellipsis; vertical-align: top }
/* GRAPH */
.graph { padding: 0px; list-style-type: none; width: 351px; background-color: black; height: 10px; border-radius: 8px; overflow: hidden; position: relative; font-size: 0 }
.graph li { height: 100%; position: absolute; transition: all 0.3s; }
.graph-stacked { white-space: nowrap; }
.graph-stacked li { position: static; display: inline-block; height: 20px }
.graph-legend { padding: 0px; list-style-type: none; margin-top: 13px; font-family: Consolas, "Andale Mono", monospace; font-size: 13px; text-transform: capitalize; }
.sidebar .graph-legend li { margin: 0px; margin-top: 5px; margin-left: 0px; width: 160px; float: left; position: relative; }
.sidebar .graph-legend li:nth-child(odd) { margin-right: 29px }
.graph-legend span { position: absolute; }
.graph-legend b { text-align: right; display: inline-block; width: 50px; float: right; font-weight: normal; }
.graph-legend li:before { content: '\2022'; font-size: 23px; line-height: 0px; vertical-align: -3px; margin-right: 5px; }
.filelist { font-size: 12px; font-family: monospace; margin: 0px; padding: 0px; list-style-type: none; line-height: 1.5em; }
.filelist li:before { content: '\2022'; font-size: 11px; line-height: 0px; vertical-align: 0px; margin-right: 5px; color: #FFBE00; }
.filelist li { overflow: hidden; text-overflow: ellipsis; }
/* COLORS */
.back-green { background-color: #2ECC71 }
.color-green:before { color: #2ECC71 }
.back-blue { background-color: #3BAFDA }
.color-blue:before { color: #3BAFDA }
.back-darkblue { background-color: #156fb7 }
.color-darkblue:before { color: #156fb7 }
.back-purple { background-color: #B10DC9 }
.color-purple:before { color: #B10DC9 }
.back-yellow { background-color: #FFDC00 }
.color-yellow:before { color: #FFDC00 }
.back-orange { background-color: #FF9800 }
.color-orange:before { color: #FF9800 }
.back-gray { background-color: #ECF0F1 }
.color-gray:before { color: #ECF0F1 }
.back-black { background-color: #34495E }
.color-black:before { color: #34495E }
.back-red { background-color: #5E4934 }
.color-red:before { color: #5E4934 }
.back-gray { background-color: #9e9e9e }
.color-gray:before { color: #9e9e9e }
.back-white { background-color: #EEE }
.color-white:before { color: #EEE }
.back-red { background-color: #E91E63 }
.color-red:before { color: #E91E63 }
/* Settings owned */
.owned-title { float: left }
#checkbox-owned { margin-bottom: 25px; margin-top: 26px; margin-left: 11px; }
.settings-owned { clear: both }
#checkbox-owned ~ .settings-owned { opacity: 0; max-height: 0px; transition: all 0.3s linear; overflow: hidden }
#checkbox-owned:checked ~ .settings-owned { opacity: 1; max-height: 420px }
/* Settings autodownload */
.settings-autodownloadoptional { clear: both; box-sizing: border-box; padding-top: 0px; }
#checkbox-autodownloadoptional ~ .settings-autodownloadoptional { opacity: 0; max-height: 0px; transition: all 0.3s ease-in-out; overflow: hidden; }
#checkbox-autodownloadoptional:checked ~ .settings-autodownloadoptional { opacity: 1; max-height: 120px; padding-top: 30px; }
/* Globe */
.globe { width: 360px; height: 360px }
.globe.loading { background: url(/uimedia/img/loading-circle.gif) center center no-repeat }
.globe.error { text-align: center; padding-top: 156px; box-sizing: border-box; opacity: 0.2; }
/* Sign publish */
.contents { background-color: #3B3B3B; color: white; padding: 7px 10px; font-family: Consolas; font-size: 11px; display: inline-block; margin-bottom: 6px; margin-top: 10px }
.contents a { color: white }
.contents a:active { background-color: #6B6B6B }
.contents + .flex.active {
padding-bottom: 100px;
}
#wrapper-sign-publish {
padding: 0;
}
#button-sign-publish, #menu-sign-publish {
display: inline-block;
margin: 5px 10px;
text-decoration: none;
}
#button-sign-publish {
margin-right: 5px;
}
#menu-sign-publish {
margin-left: 5px;
color: #AAA;
padding: 7px;
margin: 0px;
}
#menu-sign-publish:hover { color: white }
/* Small screen */
@media screen and (max-width: 600px) {
.sidebar .close { display: block }
}