strawmelonjuice.com
Forking what is left of ZeroNet and hopefully adding an AT Proto Frontend/Proxy
1.menu {
2 font-family: Roboto, 'Segoe UI', 'Helvetica Neue'; z-index: 999;
3}
4
5.drag-bg { width: 100%; height: 100%; position: fixed; }
6.fixbutton.dragging { cursor: -webkit-grabbing; }
7.fixbutton-bg:active { cursor: -webkit-grabbing; }
8
9
10.body-sidebar, .body-console { background-color: #666 !important; }
11#inner-iframe { transition: 0.3s ease-in-out; transform-origin: left bottom; }
12.body-sidebar iframe { transform: rotateY(5deg); opacity: 0.8; pointer-events: none; outline: 1px solid transparent }
13.body-console iframe { transform: rotateX(5deg); opacity: 0.8; pointer-events: none; outline: 1px solid transparent }
14
15.sidebar .label-right { float: right; margin-right: 7px; margin-top: 1px; float: right; }
16.sidebar .link-right { color: white; text-decoration: none; border-bottom: 1px solid #666; text-transform: uppercase; }
17.sidebar .link-right:hover { border-color: #CCC; }
18.sidebar .link-right:active { background-color: #444 }
19.sidebar .link-outline { outline: 1px solid #eee6; padding: 2px 13px; border-bottom: none; font-size: 80%; }
20/* SIDEBAR */
21
22.sidebar-container { width: 100%; height: 100%; overflow: hidden; position: fixed; top: 0px; z-index: 2;}
23.sidebar { background-color: #212121; position: fixed; backface-visibility: hidden; right: -1200px; height: 100%; width: 1200px; } /*box-shadow: inset 0px 0px 10px #000*/
24.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 }
25.sidebar-container.loaded .content { opacity: 1; transform: none }
26.sidebar h1, .sidebar h2 { font-weight: lighter; }
27.sidebar .close { color: #999; float: right; text-decoration: none; margin-top: -5px; padding: 0px 5px; font-size: 33px; margin-right: 20px; display: none }
28.sidebar .button { margin: 0px; display: inline-block; transition: all 0.3s; box-sizing: border-box; max-width: 260px }
29.sidebar .button.hidden { padding: 0px; max-width: 0px; opacity: 0; pointer-events: none }
30.sidebar #button-delete { background-color: transparent; border: 1px solid #333; color: #AAA; margin-left: 10px }
31.sidebar #button-delete:hover { border: 1px solid #666; color: white }
32
33.sidebar .flex { display: flex }
34.sidebar .flex .input.text, .sidebar .flex input.text { width: 100%; }
35.sidebar .flex .button { margin-left: 4px; white-space: nowrap; }
36
37/* FIELDS */
38
39.sidebar .fields { padding: 0px; list-style-type: none; width: 355px; }
40.sidebar .fields > li, .sidebar .fields .settings-owned > li { margin-bottom: 30px }
41.sidebar .fields > li:after, .sidebar .fields .settings-owned > li:after { clear: both; content: ''; display: block }
42.sidebar .fields label {
43 font-family: Consolas, monospace; text-transform: uppercase; font-size: 13px; color: #ACACAC; display: inline-block; margin-bottom: 10px;
44 vertical-align: text-bottom; margin-right: 10px; width: 100%
45}
46.sidebar .fields label small { font-weight: normal; color: white; text-transform: none; }
47.sidebar .fields .text { background-color: black; border: 0px; padding: 10px; color: white; border-radius: 3px; width: 260px; font-family: Consolas, monospace; }
48.sidebar .fields .text.long { width: 330px; font-size: 72%; }
49.sidebar .fields .disabled { color: #AAA; background-color: #3B3B3B; }
50.sidebar .fields .text-num { width: 30px; text-align: right; padding-right: 30px; }
51.sidebar .fields .text-post { color: white; font-family: Consolas, monospace; display: inline-block; font-size: 13px; margin-left: -25px; width: 25px; }
52
53/* Select */
54.sidebar .fields select {
55 width: 225px; background-color: #3B3B3B; color: white; font-family: Consolas, monospace; appearance: none;
56 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);
57}
58.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 }
59
60/* Checkbox */
61.sidebar .fields .checkbox { width: 50px; height: 24px; position: relative; z-index: 999; opacity: 0; }
62.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; }
63.sidebar .fields .checkbox-skin:before {
64 content: ""; position: relative; width: 20px; background-color: white; height: 20px; display: block; border-radius: 100%; margin-top: 2px; margin-left: 2px;
65 transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
66}
67.sidebar .fields .checkbox:checked ~ .checkbox-skin:before { margin-left: 27px; }
68.sidebar .fields .checkbox:checked ~ .checkbox-skin { background-color: #2ECC71; }
69
70/* Fake input */
71.sidebar .input { font-size: 13px; width: 250px; display: inline-block; overflow: hidden; text-overflow: ellipsis; vertical-align: top }
72
73/* GRAPH */
74
75.graph { padding: 0px; list-style-type: none; width: 351px; background-color: black; height: 10px; border-radius: 8px; overflow: hidden; position: relative; font-size: 0 }
76.graph li { height: 100%; position: absolute; transition: all 0.3s; }
77.graph-stacked { white-space: nowrap; }
78.graph-stacked li { position: static; display: inline-block; height: 20px }
79
80.graph-legend { padding: 0px; list-style-type: none; margin-top: 13px; font-family: Consolas, "Andale Mono", monospace; font-size: 13px; text-transform: capitalize; }
81.sidebar .graph-legend li { margin: 0px; margin-top: 5px; margin-left: 0px; width: 160px; float: left; position: relative; }
82.sidebar .graph-legend li:nth-child(odd) { margin-right: 29px }
83.graph-legend span { position: absolute; }
84.graph-legend b { text-align: right; display: inline-block; width: 50px; float: right; font-weight: normal; }
85.graph-legend li:before { content: '\2022'; font-size: 23px; line-height: 0px; vertical-align: -3px; margin-right: 5px; }
86
87.filelist { font-size: 12px; font-family: monospace; margin: 0px; padding: 0px; list-style-type: none; line-height: 1.5em; }
88.filelist li:before { content: '\2022'; font-size: 11px; line-height: 0px; vertical-align: 0px; margin-right: 5px; color: #FFBE00; }
89.filelist li { overflow: hidden; text-overflow: ellipsis; }
90
91/* COLORS */
92
93.back-green { background-color: #2ECC71 }
94.color-green:before { color: #2ECC71 }
95.back-blue { background-color: #3BAFDA }
96.color-blue:before { color: #3BAFDA }
97.back-darkblue { background-color: #156fb7 }
98.color-darkblue:before { color: #156fb7 }
99.back-purple { background-color: #B10DC9 }
100.color-purple:before { color: #B10DC9 }
101.back-yellow { background-color: #FFDC00 }
102.color-yellow:before { color: #FFDC00 }
103.back-orange { background-color: #FF9800 }
104.color-orange:before { color: #FF9800 }
105.back-gray { background-color: #ECF0F1 }
106.color-gray:before { color: #ECF0F1 }
107.back-black { background-color: #34495E }
108.color-black:before { color: #34495E }
109.back-red { background-color: #5E4934 }
110.color-red:before { color: #5E4934 }
111.back-gray { background-color: #9e9e9e }
112.color-gray:before { color: #9e9e9e }
113.back-white { background-color: #EEE }
114.color-white:before { color: #EEE }
115.back-red { background-color: #E91E63 }
116.color-red:before { color: #E91E63 }
117
118
119/* Settings owned */
120
121.owned-title { float: left }
122#checkbox-owned { margin-bottom: 25px; margin-top: 26px; margin-left: 11px; }
123.settings-owned { clear: both }
124#checkbox-owned ~ .settings-owned { opacity: 0; max-height: 0px; transition: all 0.3s linear; overflow: hidden }
125#checkbox-owned:checked ~ .settings-owned { opacity: 1; max-height: 420px }
126
127/* Settings autodownload */
128
129.settings-autodownloadoptional { clear: both; box-sizing: border-box; padding-top: 0px; }
130#checkbox-autodownloadoptional ~ .settings-autodownloadoptional { opacity: 0; max-height: 0px; transition: all 0.3s ease-in-out; overflow: hidden; }
131#checkbox-autodownloadoptional:checked ~ .settings-autodownloadoptional { opacity: 1; max-height: 120px; padding-top: 30px; }
132
133/* Globe */
134.globe { width: 360px; height: 360px }
135.globe.loading { background: url(/uimedia/img/loading-circle.gif) center center no-repeat }
136.globe.error { text-align: center; padding-top: 156px; box-sizing: border-box; opacity: 0.2; }
137
138/* Sign publish */
139.contents { background-color: #3B3B3B; color: white; padding: 7px 10px; font-family: Consolas; font-size: 11px; display: inline-block; margin-bottom: 6px; margin-top: 10px }
140.contents a { color: white }
141.contents a:active { background-color: #6B6B6B }
142
143.contents + .flex.active {
144 padding-bottom: 100px;
145}
146#wrapper-sign-publish {
147 padding: 0;
148}
149#button-sign-publish, #menu-sign-publish {
150 display: inline-block;
151 margin: 5px 10px;
152
153 text-decoration: none;
154}
155#button-sign-publish {
156 margin-right: 5px;
157}
158#menu-sign-publish {
159 margin-left: 5px;
160 color: #AAA;
161 padding: 7px;
162 margin: 0px;
163}
164#menu-sign-publish:hover { color: white }
165
166/* Small screen */
167@media screen and (max-width: 600px) {
168 .sidebar .close { display: block }
169}