Further style changes

This commit is contained in:
Tom Slominski
2015-03-06 17:02:19 +00:00
parent 52a48dbb28
commit e46535bc64
2 changed files with 23 additions and 8 deletions

View File

@@ -8,26 +8,29 @@ $title = isset( $_REQUEST['title'] ) ? yourls_sanitize_title( $_REQUEST['title
<div class="content"> <div class="content">
<h2><?php yourls_e( 'Enter a new URL to shorten', 'isq_translation'); ?></h2> <h2><?php yourls_e( 'Enter a new URL to shorten', 'isq_translation'); ?></h2>
<h3><?php yourls_e( 'Hover over the labels to see more information', 'isq_translation'); ?></h3> <form method="post" action="result.php" class="newurl">
<form method="post" action="result.php">
<div class="form-item full-width"> <div class="form-item full-width">
<label for="url" class="primary"><?php yourls_e( 'Long URL (required):', 'isq_translation'); ?></label> <label for="url" class="primary"><?php yourls_e( 'Long URL (required):', 'isq_translation'); ?></label>
<label for="url" class="secondary"><?php yourls_e( 'Paste the long URL here', 'isq_translation'); ?></label> <label for="url" class="secondary"><?php yourls_e( 'Paste the long URL here', 'isq_translation'); ?></label>
<input type="url" id="url" name="url" value="<?php echo($url); ?>" /> <input type="url" id="url" name="url" value="<?php echo($url); ?>" />
</div> </div>
<div class="form-item half-width"> <div class="halves">
<div class="form-item half-width left">
<label for="keyword" class="primary"><?php yourls_e( 'Custom keyword:', 'isq_translation'); ?></label> <label for="keyword" class="primary"><?php yourls_e( 'Custom keyword:', 'isq_translation'); ?></label>
<label for="keyword" class="secondary"><?php yourls_e( 'A keyword replaces the default short string', 'isq_translation'); ?></label> <label for="keyword" class="secondary"><?php yourls_e( 'A keyword replaces the default short string', 'isq_translation'); ?></label>
<input type="text" id="keyword" name="keyword" value="<?php echo($keyword); ?>" /> <input type="text" id="keyword" name="keyword" value="<?php echo($keyword); ?>" />
</div> </div>
<div class="form-item half-width"> <div class="form-item half-width right">
<label for="title" class="primary"><?php yourls_e( 'Optional title:', 'isq_translation'); ?></label> <label for="title" class="primary"><?php yourls_e( 'Optional title:', 'isq_translation'); ?></label>
<label for="title" class="secondary"><?php yourls_e( 'Optional title used when sharing a link from YOURLS using social sharers', 'isq_translation'); ?></label> <label for="title" class="secondary"><?php yourls_e( 'Optional title used when sharing a link from YOURLS using social sharers', 'isq_translation'); ?></label>
<input type="text" id="title" value="<?php echo($title); ?>" /> <input type="text" id="title" value="<?php echo($title); ?>" />
</div> </div>
</div>
<div class="form-item recaptcha-container"> <div class="form-item recaptcha-container">
<label class="primary" title=""><?php yourls_e( 'reCAPTCHA:', 'isq_translation'); ?></label> <label class="primary" title=""><?php yourls_e( 'reCAPTCHA:', 'isq_translation'); ?></label>
<label class="secondary"><?php yourls_e( 'Verification used to ensure the user is not a bot', 'isq_translation'); ?></label> <label class="secondary"><?php yourls_e( 'Verification used to ensure the user is not a bot', 'isq_translation'); ?></label>

View File

@@ -16,7 +16,7 @@ body {
background: #F1F1F1; background: #F1F1F1;
color: black; color: black;
font-family: 'Ubuntu', sans-serif, Helvetica, Arial; font-family: 'Ubuntu', sans-serif, Helvetica, Arial;
font-size: 1.3rem; font-size: 1.4rem;
} }
::selection { ::selection {
@@ -104,7 +104,7 @@ a, a:visited {
/* Forms */ /* Forms */
.form-item { .form-item {
padding: 2% 0; padding: 10px 0;
} }
.full-width { .full-width {
@@ -112,7 +112,18 @@ a, a:visited {
} }
.half-width { .half-width {
width: 50%; width: 49%;
}
.halves {
display: -webkit-flex;
-webkit-justify-content: space-between;
-webkit-align-items: flex-end;
}
label {
display: block;
line-height: 2rem;
} }
label.primary { label.primary {
@@ -120,12 +131,13 @@ label.primary {
} }
label.secondary { label.secondary {
color: #CCC; color: #AFAFAF;
} }
input:not([type=submit]):not([type=file]) { input:not([type=submit]):not([type=file]) {
width: 100%; width: 100%;
padding: 10px; padding: 10px;
font-size: 1.4rem;
} }