]> git.plutz.net Git - serve0/blob - templates/common.css.sh
improvements for smaller screens
[serve0] / templates / common.css.sh
1 # Copyright 2014 Paul Hänsch
2 #
3 # This file is part of Serve0
4
5 # Serve0 is free software: you can redistribute it and/or modify
6 # it under the terms of the GNU Affero General Public License as published by
7 # the Free Software Foundation, either version 3 of the License, or
8 # (at your option) any later version.
9
10 # Serve0 is distributed in the hope that it will be useful,
11 # but WITHOUT ANY WARRANTY; without even the implied warranty of
12 # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
13 # GNU Affero General Public License for more details.
14
15 # You should have received a copy of the GNU Affero General Public License
16 # along with Serve0  If not, see <http://www.gnu.org/licenses/>. 
17
18 cat <<EOF
19
20 * {
21   box-sizing: border-box;
22   -moz-box-sizing: border-box;
23 }
24
25 body {
26   padding: 0;
27   margin: 0;
28   background-color: #000;
29   color: #DDD;
30 }
31 a {
32   color: #EEE;
33 }
34
35 label, .label {
36   font-weight: bold;
37 }
38
39 textarea {
40   display: block;
41   width: 100%;
42 }
43
44 .info {
45   margin: 0;
46   padding: 0 .25em;
47   background-color: #BBD;
48   color: #000;
49   border: #000 1px solid;
50 }
51 .info.tag {
52   line-height: 1.6em;
53   background-color: #DBB;
54 }
55
56 .panel {
57   display: block;
58   width: 100%;
59   margin: 0;
60   padding: .25em 1em;
61   background-color: #333;
62   border-width: 1px;
63   border-style: none none solid none;
64 }
65 a.panel {
66   font-weight: bold;
67 }
68 a.clearsearch, a.advanced, a.tagger, .pagination_nav {
69   display: inline;
70   border: none;
71 }
72 .pagination_nav {
73   position: absolute;
74   right: 1em;
75   padding-top: .125em;
76 }
77
78 .panel .filter, .panel .quicklinks,
79 .footer .newtag, .footer input[type=submit] {
80   display: inline-block;
81   vertical-align: top;
82   margin-top: 2em;
83 }
84 .panel .help {
85   display: block;
86 }
87 .panel .filter select, .panel .filter .help,
88 .footer .newtag select, .footer .newtag .label{
89   display: block;
90   width: 10em;
91 }
92 .panel .filter .help.conjunction {
93   font-weight: bold;
94 }
95 .panel .filter .label.category {
96   display: block;
97   margin-top: 1em;
98 }
99 .panel .quicklinks * {
100   display: block
101 }
102
103 #thumblist {
104   width: 100%;
105   padding: .5em 0 3em 0;
106   text-align: center;
107 }
108
109 #thumblist .thumb {
110   display: inline-block;
111   text-align: left;
112   width: 90%;
113   padding: 0 .5em;
114   margin: auto;
115   vertical-align: top;
116   word-wrap: break-word;
117 }
118 @media (min-width: 480px){#thumblist .thumb{width: 50%;}}
119 @media (min-width: 640px){#thumblist .thumb{width: 33%;}}
120 @media (min-width: 1024px){#thumblist .thumb{width: 256px;}}
121
122 #thumblist .thumb img {
123   width: 100%;
124 }
125 #thumblist .thumb a {
126   display: block;
127 }
128 #thumblist .thumb a.fake-mp4 {
129   margin-top: .5em;
130 }
131 #thumblist .thumb a.alt {
132   display: inline-block;
133   margin-top: .3em;
134 }
135
136 .footer {
137   position: fixed;
138   min-height: 2em;
139   bottom: 0px;
140   border-style: solid none none none;
141 }
142
143 #videoview a.panel {
144   position: absolute;
145   right: 1em;
146   width: auto;
147   border: none;
148 }
149 #videoview .video {
150   display: inline-block;
151   width: 60%;
152   vertical-align: top;
153 }
154 #videoview .video * {
155   display: block;
156 }
157 #videoview .videoinfo {
158   display: inline-block;
159   width: 39%;
160   margin-top: 2em;
161 }
162 #videoview .videoinfo h2 {
163   display: inline;
164
165 #videoview .videoinfo a.meta:after {
166   content: "\A";
167   white-space: pre;
168 }
169 #videoview .videoinfo .label {
170   display: block;
171   margin-top: 1em;
172 }
173 #videoview .videoinfo .info.description {
174   display: block;
175   background-color: #DDF;
176 }
177 #videoview .videoinfo .edit {
178   width: 100%
179 }
180 EOF
181
182 # vi:set filetype=css: