annika
/
php-tools
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge pull request #5 from borkweb/styling 

Styles courtesy of @borkweb!
This commit is contained in:
Adam Backstrom 2013-07-25 14:11:24 -07:00
parent 7bc297e969 251fbae42b
commit 6411207e3e
2 changed files with 105 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
index.php
View File

@ -52,12 +52,17 @@ if( 'POST' === $_SERVER['REQUEST_METHOD'] ) {
<?php if( $action ) echo $action; ?>
</div>
<section class="randomness">
<h2>Randomness</h2>
<ul>
<li>MD5: <input class="randomness-box" value="<?php echo md5(uniqid(mt_rand(), true)); ?>"></li>
<li>SHA1: <input class="randomness-box" value="<?php echo sha1(uniqid(mt_rand(), true)); ?>"></li>
<li><label for="md5">MD5</label><input id="md5" class="randomness-box" value="<?php echo md5(uniqid(mt_rand(), true)); ?>"></li>
<li><label for="sha1">SHA1</label><input id="sha1" class="randomness-box" value="<?php echo sha1(uniqid(mt_rand(), true)); ?>"></li>
</ul>
</section>
<footer>
<a href="https://github.com/abackstrom/php-tools">php-tools</a> by <a href="https://github.com/abackstrom">abackstrom</a>.
</footer>
</body>
</html>

100
style.css
View File

@ -1,28 +1,118 @@
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
color: #333;
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
margin: 0;
}
a {
color: #54b4e8;
}
a:hover {
color: #44a0d2;
}
label {
display: inline-block;
margin-right: 0.5rem;
text-align: right;
width: 3rem;
}
label:after {
content: ':';
}
input,
select,
textarea {
border: 1px solid #ccc;
border-radius: 3px;
padding: .5em;
font-family: Inconsolata, Consolas, Monaco, monospace;
font-size: 1.2em;
}
select {
height: 32px;
}
textarea {
font-family: Inconsolata, Consolas, Monaco, monospace;
font-size: 1.2em;
white-space: pre;
word-wrap: normal;
height: 200px;
width: 100%;
}
input[type="submit"] {
background-color: #f8f8f8;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f8f8f8), to(#eee));
background-image: -webkit-linear-gradient(top, #f8f8f8, #eee);
background-image: -o-linear-gradient(top, #f8f8f8, #eee);
background-image: linear-gradient(to bottom, #f8f8f8,#eee);
background-image: -moz-linear-gradient(top, #f8f8f8, #eee);
border: 1px solid #ccc;
color: #333;
cursor: pointer;
text-shadow: 1px 1px 0 rgba( 255, 255, 255, .8 );
}
h1 {
background: #f5f5f5;
border-bottom: 1px solid #eee;
color: #555;
margin: 0;
padding: 1rem;
text-shadow: 1px 1px 0 rgba( 255, 255, 255, .8 );
}
h2 {
border-bottom: 1px solid #f8f8f8;
color: #555;
clear: both;
letter-spacing: 0.05em;
padding: 0.5rem 0;
}
footer {
border-top: 1px solid #eee;
color: #ccc;
opacity: 0.5;
padding: 1rem;
}
.randomness,
.cols {
margin: 1rem;
overflow: hidden;
}
.col {
margin-right: 1.8%;
width: 45%;
width: 50%;
float: left;
padding: 10px;
padding: 0.5rem;
}
.col:first-child {
padding-left: 0;
}
.col:last-child {
padding-right: 0;
}
.randomness-box {
width: 30em;
}
.randomness ul {
list-style-type: none;
margin: 0;
padding: 0;
}