mirror of
https://github.com/PirateBox-Dev/PirateBoxScripts_Webserver.git
synced 2023-12-14 07:22:58 +01:00
Directory-Listing with PirateBox Design now
Merge branch 'responsive_design' into release-1.0 Conflicts: piratebox/piratebox/conf/lighttpd/lighttpd.conf (configuration)
This commit is contained in:
Matthias Strubel
commit
e1c6f00f31
13 changed files with 500 additions and 203 deletions
29
piratebox/piratebox/bin/distribute_file_into_directory.sh
Executable file
29
piratebox/piratebox/bin/distribute_file_into_directory.sh
Executable file
|
|
@ -0,0 +1,29 @@
|
|||
#!/bin/sh
|
||||
|
||||
# The following script is used to distribute a specific file into directoried of the givien folder
|
||||
|
||||
directory=$1
|
||||
src_file=$2
|
||||
overwrite=$3
|
||||
overwrite=${overwrite:=false}
|
||||
|
||||
# To enable DEBUG mode, run the following line before startint this script
|
||||
# export DEBUG=true
|
||||
DEBUG=${DEBUG:=false}
|
||||
|
||||
TEST_RUN=false
|
||||
|
||||
filename="${src_file##*/}"
|
||||
|
||||
$DEBUG && echo "filename: $filename"
|
||||
$DEBUG && echo "Overwrite mode : $overwrite "
|
||||
|
||||
if [ ! -e $directory/$filename ] || [ "$overwrite" == "true" ] ; then
|
||||
echo "Distribute $filename into $directory "
|
||||
$DEBUG && echo " cp $src_file $directory "
|
||||
$TEST_RUN || cp $src_file $directory
|
||||
else
|
||||
$DEBUG && echo "File exists"
|
||||
fi
|
||||
|
||||
|
||||
47
piratebox/piratebox/bin/distribute_files.sh
Executable file
47
piratebox/piratebox/bin/distribute_files.sh
Executable file
|
|
@ -0,0 +1,47 @@
|
|||
#!/bin/sh
|
||||
|
||||
# This script distributes a set of files into $1 folder
|
||||
|
||||
#Script for single stuff
|
||||
PIRATEBOX_FOLDER=${4:=/opt/piratebox}
|
||||
script=$PIRATEBOX_FOLDER/bin/distribute_file_into_directory.sh
|
||||
|
||||
|
||||
# To enable DEBUG mode, run the following line before startint this script
|
||||
# export DEBUG=true
|
||||
DEBUG=${DEBUG:=false}
|
||||
|
||||
work_on_file() {
|
||||
local destination_root_folder=$1
|
||||
local src_file=$2
|
||||
|
||||
find $destination_root_folder -type d -exec $script "{}" $src_file $overwrite ';'
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
#-------------
|
||||
|
||||
destination=$1
|
||||
overwrite=$2
|
||||
overwrite=${overwrite:=false}
|
||||
src_file=$3
|
||||
src_file=${src_file:=all}
|
||||
|
||||
$DEBUG && echo "parameters:
|
||||
destination $destination
|
||||
overwrite $overwrite
|
||||
src_file $src_file
|
||||
PirateBox_folder=$PIRATEBOX_FOLDER
|
||||
call script: $script
|
||||
";
|
||||
|
||||
if [ "$src_file" == "all" ] ; then
|
||||
work_on_file $destination $PIRATEBOX_FOLDER/src/HEADER.txt
|
||||
work_on_file $destination $PIRATEBOX_FOLDER/src/README.txt
|
||||
else
|
||||
work_on_file $destination $src_file
|
||||
fi
|
||||
|
||||
|
||||
|
|
@ -31,9 +31,27 @@ static-file.exclude-extensions = ( ".php", ".pl", ".fcgi" , ".cgi" , ".py" )
|
|||
|
||||
#include_shell "/usr/share/lighttpd/use-ipv6.pl"
|
||||
|
||||
dir-listing.encoding = "utf-8"
|
||||
server.dir-listing = "enable"
|
||||
dir-listing.hide-dotfiles = "enable"
|
||||
dir-listing.encoding = "utf-8"
|
||||
server.dir-listing = "enable"
|
||||
|
||||
# Grabs main css
|
||||
dir-listing.external-css = "../style.css"
|
||||
|
||||
# Header
|
||||
# Enables header section
|
||||
dir-listing.show-header = "enable"
|
||||
dir-listing.encode-header = "disable"
|
||||
# Hides HEADER.txt from listing
|
||||
dir-listing.hide-header-file = "enable"
|
||||
|
||||
# Footer
|
||||
# Enables footer section
|
||||
dir-listing.show-readme = "enable"
|
||||
dir-listing.encode-readme = "disable"
|
||||
# Hides README.txt from listing
|
||||
dir-listing.hide-readme-file = "enable"
|
||||
# Diables default footer text
|
||||
dir-listing.set-footer = " "
|
||||
|
||||
# Disabled, maybe fixes reload problem on imageboard
|
||||
#compress.cache-dir = "/var/cache/lighttpd/compress/"
|
||||
|
|
|
|||
|
|
@ -70,6 +70,9 @@ case "$1" in
|
|||
echo "Empty tmp folder"
|
||||
find $PIRATEBOX/tmp/ -exec rm {} \;
|
||||
|
||||
echo "Copy over design files"
|
||||
$PIRATEBOX/bin/distribute_files.sh $SHARE_FOLDER/Shared
|
||||
|
||||
if [ "$DO_IW" = "yes" ] ; then
|
||||
log_daemon_msg " Setting up Interface (iw) "
|
||||
iw $PHY_IF interface add $INTERFACE type managed
|
||||
|
|
|
|||
|
|
@ -74,6 +74,9 @@ case "$1" in
|
|||
|
||||
echo "Empty tmp folder"
|
||||
find $PIRATEBOX/tmp/ -exec rm {} \;
|
||||
echo "Copy over design files"
|
||||
$PIRATEBOX/bin/distribute_files.sh $SHARE_FOLDER/Shared
|
||||
|
||||
|
||||
|
||||
if [ "$DO_IW" = "yes" ] ; then
|
||||
|
|
|
|||
28
piratebox/piratebox/src/HEADER.txt
Normal file
28
piratebox/piratebox/src/HEADER.txt
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<head>
|
||||
<title>PirateBox - Share Freely!</title>
|
||||
<script src="../jquery.min.js"></script>
|
||||
<script src="../scripts.js"></script>
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
|
||||
</head>
|
||||
<header id="header">
|
||||
<div class="container">
|
||||
<div id="logo">
|
||||
<h1>
|
||||
<a href="/">
|
||||
<img src="../piratebox-logo-horizontal-white.png" alt="PirateBox" title="PirateBox - Share Freely">
|
||||
</a>
|
||||
</h1>
|
||||
</div>
|
||||
<div id="menu-icon"><img src="../menu.png" alt="Menu"></div>
|
||||
<nav id="top-nav">
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="board/">Forum</a></li>
|
||||
<li><a href="/Shared/" class="current">Files</a></li>
|
||||
<li><a href="#about">About</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div class="container">
|
||||
<div class="card">
|
||||
12
piratebox/piratebox/src/README.txt
Normal file
12
piratebox/piratebox/src/README.txt
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
|
||||
</div>
|
||||
</div>
|
||||
<footer id="about">
|
||||
<div class="container">
|
||||
<p class="to-top"><a href="#header">Back to top</a></p>
|
||||
<h2>About PirateBox</h2>
|
||||
<p>Inspired by pirate radio and the free culture movment, PirateBox is a self-contained mobile collaboration and file sharing device. PirateBox utilizes Free, Libre and Open Source software (FLOSS) to create mobile wireless file sharing networks where users can anonymously share images, video, audio, documents, and other digital content.</p>
|
||||
<p>PirateBox is designed to be safe and secure. No logins are required and no user data is logged. The system is purposely not connected to the Internet in order to prevent tracking and preserve user privacy.</p>
|
||||
<small>PirateBox is licensed under GPLv3.</small>
|
||||
</div>
|
||||
</footer>
|
||||
140
piratebox/piratebox/www/index.html
Executable file → Normal file
140
piratebox/piratebox/www/index.html
Executable file → Normal file
|
|
@ -1,89 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<title>PirateBox - Share Freely</title>
|
||||
<title>PirateBox - Share Freely!</title>
|
||||
<script src="jquery.min.js"></script>
|
||||
<script src="scripts.js"></script>
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="container">
|
||||
<div id="logo">
|
||||
<h1><a href="/"><img src="piratebox-logo-horizontal-white.png" alt="PirateBox"></a></h1>
|
||||
</div>
|
||||
<!-- Optional Links! -->
|
||||
<nav id="top-nav">
|
||||
<ul>
|
||||
<li><a href="board/">Forum</a></li>
|
||||
<li><a href="/Shared">Files</a></li>
|
||||
<li><a href="#about">About</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<header id="header">
|
||||
<div class="container">
|
||||
<div id="logo">
|
||||
<h1>
|
||||
<a href="/">
|
||||
<img src="piratebox-logo-horizontal-white.png" alt="PirateBox" title="PirateBox - Share Freely">
|
||||
</a>
|
||||
</h1>
|
||||
</div>
|
||||
</header>
|
||||
<div id="menu-icon"><img src="menu.png" alt="Menu"></div>
|
||||
<nav id="top-nav">
|
||||
<ul>
|
||||
<li><a href="/" class="current">Home</a></li>
|
||||
<li><a href="board/">Forum</a></li>
|
||||
<li><a href="/Shared/">Files</a></li>
|
||||
<li><a href="#about">About</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section id="content">
|
||||
<div class="container">
|
||||
<div id="sidebar">
|
||||
<div id="upload">
|
||||
<hgroup>
|
||||
<h2>Upload</h2>
|
||||
<h3>Please do not refresh this page during file upload!</h3>
|
||||
</hgroup>
|
||||
<iframe width="100%" height="80" src='http://piratebox.lan:8080'>
|
||||
Your browser does not supprt Iframes.. If you want to upload something, follow this <a href='http://piratebox.lan:8080'>Link</a>
|
||||
</iframe>
|
||||
<br><br>
|
||||
<h2><a href="/Shared">Browse Files -></a></h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
<div id="chat">
|
||||
<hgroup>
|
||||
<h2>Chat</h2>
|
||||
<h3>100% Anonymous!</h3>
|
||||
</hgroup>
|
||||
<div id="shoutbox" class="shoutbox_content"></div>
|
||||
<form method="POST" name="psowrte" id="sb_form" >
|
||||
<div id="shoutbox_input">
|
||||
<input id="shoutbox_nickname" type="text" name="name" value="Anonymous" placeholder="Anonymous">
|
||||
<input id="shoutbox_message" type="text" name="data" placeholder="Message...">
|
||||
<input id="shoutbox_submit" type="submit" name="submit" value="Send">
|
||||
</div>
|
||||
|
||||
<div id="shoutbox_options">
|
||||
<p>Choose a color:</p>
|
||||
<input type="radio" value="def" id="def" name="color" checked>
|
||||
<label for="def">Default</label> |
|
||||
<input type="radio" value="blue" id="blue" name="color">
|
||||
<label for="blue" class="blue">Blue</label> |
|
||||
<input type="radio" value="green" id="green" name="color">
|
||||
<label for="green" class="green">Green</label> |
|
||||
<input type="radio" value="orange" id="orange" name="color">
|
||||
<label for="orange" class="orange">Orange</label> |
|
||||
<input type="radio" value="red" id="red" name="color">
|
||||
<label for="red"class="red">Red</label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<section id="content">
|
||||
<div class="container">
|
||||
<div id="welcome" class="card">
|
||||
<h2>Welcome</h2>
|
||||
<p>Now, first of all, there is nothing illegal or scary going on here. This is a social place where you can chat and share files with people around you, <strong>anonymously</strong>! This is an off-line network, specially designed and developed for file-sharing and chat services. Staying off the grid is a precaution to maintain your full anonymity. Please have fun, chat with people, and feel free to share any files you may like.</p>
|
||||
<input id="thanks" class="button" type="submit" value="Thanks">
|
||||
</div>
|
||||
<div id="sidebar">
|
||||
<div id="upload" class="card">
|
||||
<h2>Upload</h2>
|
||||
<iframe width="100%" height="80" src='http://piratebox.lan:8080'>
|
||||
Your browser does not support iframes.. If you want to upload something, follow this <a href='http://piratebox.lan:8080'>Link</a>.
|
||||
</iframe>
|
||||
<h3><a href="/Shared">Browse Files -></a></h3>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<h2 id="about">About PirateBox</h2>
|
||||
<p>Inspired by pirate radio and the free culture movment, PirateBox is a self-contained mobile collaboration and file sharing device. PirateBox utilizes Free, Libre and Open Source software (FLOSS) to create mobile wireless file sharing networks where users can anonymously share images, video, audio, documents, and other digital content.</p>
|
||||
<p>PirateBox is designed to be safe and secure. No logins are required and no user data is logged. The system is purposely not connected to the Internet in order to prevent tracking and preserve user privacy.</p>
|
||||
<p>To learn more about the project or to find out how to build your own PirateBox system, please visit <a href="http://wiki.daviddarts.com/piratebox">http://wiki.daviddarts.com/piratebox</a>.</p>
|
||||
|
||||
<small>PirateBox is licensed under GPLv3.</small>
|
||||
<div id="main">
|
||||
<div id="chat" class="card">
|
||||
<h2>Chat</h2>
|
||||
<div id="shoutbox" class="shoutbox_content"></div>
|
||||
<form method="POST" name="psowrte" id="sb_form" >
|
||||
<div id="shoutbox-input">
|
||||
<input class="nickname" type="text" name="name" value="Anonymous" placeholder="Nickname">
|
||||
<input class="message" type="text" name="data" placeholder="Message...">
|
||||
<input class="button" type="submit" name="submit" value="Send">
|
||||
</div>
|
||||
<div id="shoutbox-options">
|
||||
<h3>Text Color:</h3>
|
||||
<label for="def" class="bg-black"> <input name="color" type="radio" value="def" id="def" checked>Default</label>
|
||||
<label for="blue" class="bg-blue"> <input name="color" type="radio" value="blue" id="blue" >Blue</label>
|
||||
<label for="green" class="bg-green"> <input name="color" type="radio" value="green" id="green" >Green</label>
|
||||
<label for="orange" class="bg-orange"> <input name="color" type="radio" value="orange" id="orange" >Orange</label>
|
||||
<label for="red" class="bg-red"> <input name="color" type="radio" value="red" id="red" >Red</label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer id="about">
|
||||
<div class="container">
|
||||
<p class="to-top"><a href="#header">Back to top</a></p>
|
||||
<h2>About PirateBox</h2>
|
||||
<p>Inspired by pirate radio and the free culture movment, PirateBox is a self-contained mobile collaboration and file sharing device. PirateBox utilizes Free, Libre and Open Source software (FLOSS) to create mobile wireless file sharing networks where users can anonymously share images, video, audio, documents, and other digital content.</p>
|
||||
<p>PirateBox is designed to be safe and secure. No logins are required and no user data is logged. The system is purposely not connected to the Internet in order to prevent tracking and preserve user privacy.</p>
|
||||
<small>PirateBox is licensed under GPLv3.</small>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
0
piratebox/piratebox/www/jquery.min.js
vendored
Normal file → Executable file
0
piratebox/piratebox/www/jquery.min.js
vendored
Normal file → Executable file
BIN
piratebox/piratebox/www/menu.png
Normal file
BIN
piratebox/piratebox/www/menu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
piratebox/piratebox/www/piratebox-logo-horizontal-white.png
Executable file → Normal file
BIN
piratebox/piratebox/www/piratebox-logo-horizontal-white.png
Executable file → Normal file
Binary file not shown.
|
Before Width: | Height: | Size: 8.6 KiB After Width: | Height: | Size: 6.5 KiB |
|
|
@ -23,6 +23,83 @@ $(document).ready(function() {
|
|||
});
|
||||
|
||||
display_shoutbox();
|
||||
|
||||
// Spin menu icon and toggle nav
|
||||
$('#menu-icon').click(function() {
|
||||
$(this).toggleClass('rotate');
|
||||
$('#top-nav').slideToggle();
|
||||
});
|
||||
|
||||
// Closes the mobile nav
|
||||
$('#top-nav a').click(function() {
|
||||
if ($('#top-nav').is(':visible')
|
||||
&& $('#menu-icon').is(':visible')) {
|
||||
$('#top-nav').slideUp();
|
||||
$('#menu-icon').toggleClass('rotate');
|
||||
}
|
||||
});
|
||||
|
||||
// Hides the welcome
|
||||
$('#thanks').click(function() {
|
||||
$('#welcome').slideUp();
|
||||
});
|
||||
|
||||
// Detects window size
|
||||
$(window).resize(function() {
|
||||
if ($('#menu-icon').is(':visible')) {
|
||||
$('#top-nav').hide();
|
||||
} else {
|
||||
$('#top-nav').show();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// smooth scrolling for internal links
|
||||
function filterPath(string) {
|
||||
return string
|
||||
.replace(/^\//,'')
|
||||
.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
|
||||
.replace(/\/$/,'');
|
||||
}
|
||||
var locationPath = filterPath(location.pathname);
|
||||
var scrollElem = scrollableElement('html', 'body');
|
||||
|
||||
$('a[href*=#]').each(function() {
|
||||
var thisPath = filterPath(this.pathname) || locationPath;
|
||||
if ( locationPath == thisPath
|
||||
&& (location.hostname == this.hostname || !this.hostname)
|
||||
&& this.hash.replace(/#/,'') ) {
|
||||
var $target = $(this.hash), target = this.hash;
|
||||
if (target) {
|
||||
var targetOffset = $target.offset().top;
|
||||
$(this).click(function(event) {
|
||||
event.preventDefault();
|
||||
$(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
|
||||
location.hash = target;
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// use the first element that is "scrollable"
|
||||
function scrollableElement(els) {
|
||||
for (var i = 0, argLength = arguments.length; i <argLength; i++) {
|
||||
var el = arguments[i],
|
||||
$scrollElement = $(el);
|
||||
if ($scrollElement.scrollTop()> 0) {
|
||||
return el;
|
||||
} else {
|
||||
$scrollElement.scrollTop(1);
|
||||
var isScrollable = $scrollElement.scrollTop()> 0;
|
||||
$scrollElement.scrollTop(0);
|
||||
if (isScrollable) {
|
||||
return el;
|
||||
}
|
||||
}
|
||||
}
|
||||
return [];
|
||||
}
|
||||
});
|
||||
|
||||
function refresh_shoutbox () {
|
||||
|
|
@ -41,7 +118,7 @@ function post_shoutbox () {
|
|||
.success(function() {
|
||||
refresh_shoutbox();
|
||||
});
|
||||
$('#shoutbox_message').val('');
|
||||
$('#shoutbox-input .message').val('');
|
||||
}
|
||||
|
||||
function display_shoutbox() {
|
||||
|
|
|
|||
338
piratebox/piratebox/www/style.css
Executable file → Normal file
338
piratebox/piratebox/www/style.css
Executable file → Normal file
|
|
@ -3,17 +3,15 @@
|
|||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html, body, div, object, iframe, fieldset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
|
|
@ -22,7 +20,7 @@ table {
|
|||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
header, footer, nav, section, article, hgroup, figure {
|
||||
header, footer, footer, nav, section, article, hgroup, figure {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
@ -30,25 +28,20 @@ legend {
|
|||
display: none;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 100%;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #1b1d1e;
|
||||
font-family: sans-serif;
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1em;
|
||||
font-weight: normal;
|
||||
line-height: 1.5em;
|
||||
font-weight: bold;
|
||||
line-height: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
h2 {
|
||||
font-size: 1.3em;
|
||||
font-weight: bold;
|
||||
line-height: auto;
|
||||
|
|
@ -59,18 +52,14 @@ h3 {
|
|||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
line-height: auto;
|
||||
margin: 0 0 1em;
|
||||
margin: 0 0 0.25em;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1em;
|
||||
font-weight: normal;
|
||||
line-height: 1.4em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p + p {
|
||||
margin: 1em 0;
|
||||
line-height: 1.5em;
|
||||
margin: 0 0 1em;
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -78,6 +67,47 @@ a {
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.current {
|
||||
color: white;
|
||||
}
|
||||
|
||||
#top-nav a {
|
||||
display: block;
|
||||
font-size: 1.5em;
|
||||
font-weight: normal;
|
||||
line-height: 1.5em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: .75em;
|
||||
}
|
||||
|
||||
label {
|
||||
color: white;
|
||||
font-size: .75em;
|
||||
}
|
||||
|
||||
footer {
|
||||
color: #e7e9ea;
|
||||
}
|
||||
|
||||
.message date {
|
||||
font-size: .625em;
|
||||
color: #979ea1;
|
||||
}
|
||||
.message name {
|
||||
font-size: .75em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.message data {
|
||||
font-size: .75em;
|
||||
}
|
||||
|
||||
.red {
|
||||
color: red;
|
||||
}
|
||||
|
|
@ -94,178 +124,232 @@ a {
|
|||
color: #ff8040;
|
||||
}
|
||||
|
||||
html, body {
|
||||
background: #e5e5e5;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 1em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
body {
|
||||
background: #e7e9ea;
|
||||
}
|
||||
|
||||
header, footer {
|
||||
background: #1b1d1e;
|
||||
}
|
||||
header img, footer img {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
#logo {
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#menu-icon {
|
||||
float: right;
|
||||
width: 36px;
|
||||
-webkit-transition: all 0.5s ease-in-out;
|
||||
-moz-transition: all 0.5s ease-in-out;
|
||||
-o-transition: all 0.5s ease-in-out;
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.rotate {
|
||||
-webkit-transform: rotate(-90deg);
|
||||
-moz-transform: rotate(-90deg);
|
||||
-ms-transform: rotate(-90deg);
|
||||
-o-transform: rotate(-90deg);
|
||||
transform: rotate(-90deg);
|
||||
-webkit-transition: all 0.5s ease-in-out;
|
||||
-moz-transition: all 0.5s ease-in-out;
|
||||
-o-transition: all 0.5s ease-in-out;
|
||||
transition: all 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
#top-nav {
|
||||
width: 100%;
|
||||
}
|
||||
#top-nav ul {
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
#top-nav li {
|
||||
display: inline;
|
||||
}
|
||||
#top-nav li a {
|
||||
font-size: 1.5em;
|
||||
margin: 0 .5em;
|
||||
clear: both;
|
||||
display: none;
|
||||
padding: 1em 0 0 0;
|
||||
}
|
||||
|
||||
#content .container {
|
||||
padding: 1em 0;
|
||||
#thanks {
|
||||
float: right;
|
||||
}
|
||||
|
||||
#upload, #chat {
|
||||
background: white;
|
||||
#upload iframe {
|
||||
border: 1px solid #979ea1;
|
||||
border-radius: 3px;
|
||||
margin: 0 0 1em;
|
||||
padding: 1em;
|
||||
-webkit-box-shadow: #a8a8a8 0px 3px 0px;
|
||||
-moz-box-shadow: #a8a8a8 0px 3px 0px;
|
||||
box-shadow: #a8a8a8 0px 3px 0px;
|
||||
}
|
||||
|
||||
#shoutbox {
|
||||
border: 1px solid #a8a8a8;
|
||||
height: 350px;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
border: 1px solid #979ea1;
|
||||
border-radius: 3px;
|
||||
margin: 0 0 1em;
|
||||
padding: 0 1em;
|
||||
padding: 0.5em;
|
||||
}
|
||||
#shoutbox .message {
|
||||
margin: 0 0 .25em 0;
|
||||
}
|
||||
|
||||
.message {
|
||||
margin: 0 0 .25em;
|
||||
#shoutbox-input {
|
||||
margin: 0 0 1em 0;
|
||||
}
|
||||
|
||||
date {
|
||||
color: #a8a8a8;
|
||||
font-size: .75em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
data {
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
#shoutbox_input {
|
||||
margin: 0 0 1em;
|
||||
}
|
||||
|
||||
#shoutbox_nickname, #shoutbox_message, #shoutbox_submit {
|
||||
margin: 0 0 1em;
|
||||
#shoutbox-input .nickname,
|
||||
#shoutbox-input .message,
|
||||
#shoutbox-input .button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
footer {
|
||||
color: #e5e5e5;
|
||||
#shoutbox-options label {
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
border-radius: 3px;
|
||||
margin: 0 0.5em 0.5em 0;
|
||||
padding: 0.5em 1em;
|
||||
}
|
||||
#shoutbox-options label input {
|
||||
margin: 0 .5em 0 0;
|
||||
}
|
||||
#shoutbox-options .bg-black {
|
||||
background: #1b1d1e;
|
||||
}
|
||||
#shoutbox-options .bg-blue {
|
||||
background: blue;
|
||||
}
|
||||
#shoutbox-options .bg-green {
|
||||
background: green;
|
||||
}
|
||||
#shoutbox-options .bg-orange {
|
||||
background: #ff8040;
|
||||
}
|
||||
#shoutbox-options .bg-red {
|
||||
background: red;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: white;
|
||||
border: 1px solid #a8a8a8;
|
||||
color: #1b1d1e;
|
||||
cursor: text;
|
||||
font-size: .75em;
|
||||
height: 3em;
|
||||
padding: 0 .5em;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
input[type=submit] {
|
||||
background: #a8a8a8;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 0;
|
||||
border: 1px solid #979ea1;
|
||||
border-radius: 3px;
|
||||
margin: 0 0 1em;
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
|
||||
input[type=radio] {
|
||||
height: 1.3em;
|
||||
margin: 0 .2em;
|
||||
margin: 0 .5em 0 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 769px) {
|
||||
.button {
|
||||
background: #979ea1;
|
||||
border: 0;
|
||||
color: white;
|
||||
margin: 0;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.button:active {
|
||||
background: #7c8589;
|
||||
color: #cccccc;
|
||||
-webkit-box-shadow: #4b5154 0px -3px 0px inset;
|
||||
-moz-box-shadow: #4b5154 0px -3px 0px inset;
|
||||
box-shadow: #4b5154 0px -3px 0px inset;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 3px;
|
||||
-webkit-box-shadow: #979ea1 0px 3px 0px;
|
||||
-moz-box-shadow: #979ea1 0px 3px 0px;
|
||||
box-shadow: #979ea1 0px 3px 0px;
|
||||
margin: 0 0 1em;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 100%;
|
||||
padding: 1em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.list table {
|
||||
width: 100%;
|
||||
}
|
||||
.list table thead {
|
||||
text-align: left;
|
||||
}
|
||||
.list table tbody tr {
|
||||
height: 2em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.list table tbody tr:hover {
|
||||
background: #e7e9ea;
|
||||
}
|
||||
.list table .m, .list table .s, .list table .t {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 801px) {
|
||||
#logo {
|
||||
float: left;
|
||||
margin: 0;
|
||||
width: 60%;
|
||||
margin: 0 2em 0 0;
|
||||
}
|
||||
|
||||
#logo img {
|
||||
width: 80%;
|
||||
#menu-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#top-nav {
|
||||
float: right;
|
||||
margin: 1em 0;
|
||||
width: 40%;
|
||||
clear: none;
|
||||
display: table-cell;
|
||||
padding: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
#top-nav ul {
|
||||
text-align: left;
|
||||
#top-nav ul li {
|
||||
float: left;
|
||||
}
|
||||
#top-nav li a {
|
||||
#top-nav ul li a {
|
||||
margin: 0 1em 0 0;
|
||||
}
|
||||
|
||||
#content .container {
|
||||
padding: 1em;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
float: right;
|
||||
margin: 0 0 1em;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
#main {
|
||||
float: left;
|
||||
padding: 0 1em 0 0;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
#chat {
|
||||
margin: 0 1em 1em 0;
|
||||
}
|
||||
|
||||
#shoutbox_nickname {
|
||||
#shoutbox-input .nickname {
|
||||
float: left;
|
||||
margin: 0 1em 0 0;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
#shoutbox_message {
|
||||
#shoutbox-input .message {
|
||||
float: left;
|
||||
margin: 0;
|
||||
margin: 0 1em 0 0;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
#shoutbox_submit {
|
||||
#shoutbox-input .button {
|
||||
float: right;
|
||||
margin: 0;
|
||||
width: 15%;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1025px) {
|
||||
|
||||
.to-top {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
width: 80%;
|
||||
max-width: 1280px;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.list table .m,
|
||||
.list table .s,
|
||||
.list table .t {
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue