Big, bright new styling!

This commit is contained in:
Robbie Antenesse 2016-06-07 18:20:16 -06:00
parent dec8be6dff
commit 0b6169a1e5
4 changed files with 78 additions and 57 deletions

View File

@ -15,7 +15,7 @@
<h2>Create a New Account</h2>
<p style="font-size: 12px;">Creating an account allows you to save and switch between as many dictionaries as you need and access them from any device for free! If you have a dictionary you've been working on loaded already, it will automatically be uploaded to your account when you log in for the first time.</p>
<p style="font-size: 12px;">Plus if you allow us to send you emails, we'll make sure that you're the first to hear about any new features that get added or if any of our policies change for any reason. We'll never spam you or sell your information.</p>
<p style="font-size: 12px;">By creating an account, you are indicating that you agree to the <span class="clickable" onclick="ShowInfo('termsText')" style="font-size:11px;vertical-align:top;background:#e0c19c;padding:4px 7px;">Terms of Service</span> and that you understand Lexiconga's <span class="clickable" onclick="ShowInfo('privacyText')" style="font-size:11px;vertical-align:top;background:#e0c19c;padding:4px 7px;">Privacy Policy</span>.</p>
<p style="font-size: 12px;">By creating an account, you are indicating that you agree to the <span class="clickable inline-button" onclick="ShowInfo('termsText')">Terms of Service</span> and that you understand Lexiconga's <span class="clickable inline-button" onclick="ShowInfo('privacyText')">Privacy Policy</span>.</p>
<label><span>Email</span>
<input type="email" id="createAccountEmailField" name="email" />
</label>
@ -25,12 +25,12 @@
<label><span>Confirm Password</span>
<input type="password" id="createAccountPasswordConfirmField" name="confirmpassword" />
</label>
<label><span>Public Name <span class="clickable" onclick="ExplainPublicName()" style="font-size:11px;vertical-align:top;background:#e0c19c;padding:4px 7px;">?</span></span>
<label><span>Public Name <span class="clickable inline-button" onclick="ExplainPublicName()">?</span></span>
<input type="text" id="createAccountPublicNameField" name="publicname" />
</label>
<label style="display:inline;"><b>Allow Emails</b>
<input type="checkbox" id="createAccountAllowEmailsField" name="allowemails" checked="checked" />
</label> <span class="clickable" onclick="ExplainAllowEmails()" style="font-size:11px;vertical-align:top;background:#e0c19c;padding:4px 7px;">?</span>
</label> <span class="clickable inline-button" onclick="ExplainAllowEmails()">?</span>
<div id="createAccountError" style="font-weight:bold;color:red;"></div>
<button type="submit" id="createAccountSubmitButton" onclick="ValidateCreateAccount(); return false;">Create Account</button>
</form></div>

View File

@ -1,13 +1,16 @@
body {
background: #e6cfaa;
background: #ecf0f1;
}
header {
height: 50px;
width: 100%;
background: #eacc9d;
margin-bottom: 3px;
border-bottom: 3px solid #e3bb7d;
background: #8e44ad;
margin-bottom: 10px;
border: none;
-webkit-box-shadow: 3px 3px 10px -1px rgba(0,0,0,0.75);
-moz-box-shadow: 3px 3px 10px -1px rgba(0,0,0,0.75);
box-shadow: 3px 3px 10px -1px rgba(0,0,0,0.75);
}
/* Smartphones (portrait and landscape) ----------- */
@ -27,8 +30,9 @@ td, th {
}
a {
text-decoration: underline;
color: #a01000;
text-decoration: none;
color: #2980b9;
font-weight: bold;
}
#siteLogo {
@ -42,7 +46,7 @@ a {
}
#aboutButton {
background: #dcb078;
background: #f1c40f;
}
#loginoutArea {
@ -86,16 +90,19 @@ and (max-device-width : 480px) {
}
#wordEntryForm {
background: #c05d5d;
border-color: #c08d8d #b00d0d #b00d0d #c08d8d;
background: #e74c3c;
-webkit-box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
border: none;
}
input, textarea, select, option, button {
background: #efdfc0;
input, textarea, select, option {
background: #ecf0f1;
}
#announcementArea {
background:#a0c066;
background: #2ecc71;
}
#notificationArea {
@ -103,20 +110,21 @@ input, textarea, select, option, button {
}
#dictionaryContainer {
background: #bd7251;
background: #e67e22;
padding: 15px;
border: outset;
border-color: #d09b84 #915237 #915237 #d09b84;
border: none;
-webkit-box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
}
#dictionaryDescription, .management, #settingsOptions, #infoPage, #loadAfterDeletePage,
#accountSettingsPage, #fullScreenTextboxPage {
background: #f2d5b2;
#dictionaryDescription, #settingsOptions, #infoPage, #loadAfterDeletePage, #accountSettingsPage, #fullScreenTextboxPage {
background: #bdc3c7;
}
.management {
border-width: 2px;
border-color: #ebbe87 #f9ecdd #f9ecdd #ebbe87;
border: none;
}
#dictionaryName {
@ -127,28 +135,30 @@ input, textarea, select, option, button {
width: 90%;
}
#loginLink, #logoutLink,
#descriptionToggle, #searchFilterToggle, #settingsButton,
.deleteCancelButton, .deleteConfirmButton,
#settingsScreenCloseButton, #infoScreenCloseButton,
.clickable, .helperlink {
background: #e0c19c;
#loginLink, #logoutLink, #descriptionToggle, #searchFilterToggle, #settingsButton, .deleteCancelButton, .deleteConfirmButton, #settingsScreenCloseButton, #infoScreenCloseButton, .clickable, button {
background: #f1c40f;
}
entry {
background: #d7ad7d;
border-color: #e7cfb3 #c78b47 #c78b47 #e7cfb3;
background: #bdc3c7;
border: none;
-webkit-box-shadow: 3px 3px 10px -1px rgba(0,0,0,0.75);
-moz-box-shadow: 3px 3px 10px -1px rgba(0,0,0,0.75);
box-shadow: 3px 3px 10px -1px rgba(0,0,0,0.75);
}
.editButton {
background: #89cb89;
background: #2ecc71;
}
.deleteButton {
background: #cc8888;
background: #e74c3c;
}
footer {
background: #d69c42;
border-top: 3px solid #e3bb7d;
background: #e67e22;
border: none;
-webkit-box-shadow: 0px -3px 7px -1px rgba(0,0,0,0.75);
-moz-box-shadow: 0px -3px 7px -1px rgba(0,0,0,0.75);
box-shadow: 0px -3px 7px -1px rgba(0,0,0,0.75);
}

View File

@ -1,8 +1,8 @@
body {
body {
padding: 0;
margin: 0;
border: none;
font-family: Georgia, 'Times New Roman', Times, serif;
font-family: "Helvetica", Arial, sans-serif;
}
contents {
@ -18,7 +18,7 @@ footer {
bottom: 0px;
left: 0px;
background: #aaaaaa;
padding: 6px;
padding: 8px;
max-height: 32px; /* Update Dictionary Container's bottom margin to account for footer */
}
@ -72,10 +72,6 @@ label span {
font-weight: bold;
}
label span .helperlink {
font-size: 10px;
}
label label {
margin-left: 20px;
}
@ -141,17 +137,19 @@ input[type=checkbox] {
#announcementArea, #notificationArea {
text-align:center;
padding:10px;
border-radius:5px;
margin:0 auto;
width:50%;
min-width:200px;
-webkit-box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
}
#dictionaryContainer {
margin: 15px 0 36px 15px; /* bottom margin must clear footer */
width: 60%;
min-width: 260px;
max-width: 600px;
max-width: 800px;
float: left;
}
@ -168,19 +166,24 @@ input[type=checkbox] {
margin: 10px;
}
.clickable, .helperlink {
.clickable, button {
display: inline;
font-weight: bold;
font-size: 13px;
padding: 4px;
border: none;
background: #dddddd;
border-radius: 5px;
}
.clickable {
.clickable, button {
cursor: pointer;
}
.inline-button {
font-size: 11px;
padding: 2px 4px;
}
#descriptionToggle, #searchFilterToggle {
display: inline-block;
margin: 8px;
@ -323,8 +326,8 @@ searchTerm {
left: 0;
width: 100%;
height: 100%;
background: #aaaaaa;
opacity: 0.75;
background: #000000;
opacity: 0.6;
}
#settingsOptions, #infoPage, #loadAfterDeletePage,
@ -341,8 +344,10 @@ searchTerm {
overflow-x: hidden;
background: #ffffff;
opacity: 1;
border-radius: 5px;
border: 1px solid black;
border: none;
-webkit-box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.75);
}
#announcementCloseButton, #notificationCloseButton,

View File

@ -115,7 +115,7 @@ if ($is_viewing) {
<label><span>Word</span>
<input type="text" id="word" onkeydown="SubmitWordOnCtrlEnter(this)" />
</label>
<label><span>Pronunciation <a class="helperlink" href="/ipa_character_picker/" target="_blank" title="IPA Character Picker backed up from http://r12a.github.io/pickers/ipa/">IPA Characters</a></span>
<label><span>Pronunciation <a class="clickable inline-button" href="/ipa_character_picker/" target="_blank" title="IPA Character Picker backed up from http://r12a.github.io/pickers/ipa/">IPA Characters</a></span>
<input type="text" id="pronunciation" onkeydown="SubmitWordOnCtrlEnter(this)" />
</label>
<label><span>Part of Speech</span>
@ -124,7 +124,7 @@ if ($is_viewing) {
<label><span>Equivalent Word(s)</span>
<input type="text" id="simpleDefinition" onkeydown="SubmitWordOnCtrlEnter(this)" />
</label>
<label><span>Explanation/Long Definition <span id="showFullScreenTextbox" class="clickable" onclick="ShowFullScreenTextbox('longDefinition', 'Explanation/Long Definition')">Maximize</span></span>
<label><span>Explanation/Long Definition <span id="showFullScreenTextbox" class="clickable inline-button" onclick="ShowFullScreenTextbox('longDefinition', 'Explanation/Long Definition')">Maximize</span></span>
<textarea id="longDefinition" onkeydown="SubmitWordOnCtrlEnter(this)"></textarea>
</label>
<input type="hidden" id="editIndex" />
@ -162,7 +162,7 @@ if ($is_viewing) {
<span>Search</span>
<div style="display:block;">
<input type="text" id="searchBox" onclick="this.select();" onchange="<?php Show_Dictionary_Function($is_viewing) ?>" style="display:inline;" />&nbsp;
<span style="display:inline;cursor:pointer;font-size:10px;font-weight:bold;" onclick="document.getElementById('searchBox').value='';<?php Show_Dictionary_Function($is_viewing) ?>;">Clear Search</span>
<span class="clickable inline-button" onclick="document.getElementById('searchBox').value='';<?php Show_Dictionary_Function($is_viewing) ?>;">Clear Search</span>
</div>
<div id="searchOptions">
<label class="searchOption">Word <input type="checkbox" id="searchOptionWord" checked="checked" onchange="<?php Show_Dictionary_Function($is_viewing) ?>" /></label>
@ -178,7 +178,13 @@ if ($is_viewing) {
<label style="display:block;margin-bottom:0;"><b>Filter Words</b></label>
<div id="filterOptions" style="display:block"></div>
<div style="display:block;">
<span style="display:inline;cursor:pointer;font-size:12px;font-weight:bold;" onclick="ToggleAllFilters(true);<?php Show_Dictionary_Function($is_viewing) ?>;">Check All</span>&nbsp;/&nbsp;<span style="display:inline;cursor:pointer;font-size:12px;font-weight:bold;" onclick="ToggleAllFilters(false);<?php Show_Dictionary_Function($is_viewing) ?>;">Uncheck All</span>
<span class="clickable inline-button" onclick="ToggleAllFilters(true);<?php Show_Dictionary_Function($is_viewing) ?>;">
Check All
</span>
&nbsp;
<span class="clickable inline-button" onclick="ToggleAllFilters(false);<?php Show_Dictionary_Function($is_viewing) ?>;">
Uncheck All
</span>
</div>
</div>
<div id="filterWordCount"></div>
@ -204,7 +210,7 @@ if ($is_viewing) {
<span>Dictionary Name</span>
<input type="text" id="dictionaryNameEdit" />
</label>
<label><span>Dictionary Details <span id="showFullScreenTextbox" class="clickable" onclick="ShowFullScreenTextbox('dictionaryDescriptionEdit', 'Dictionary Details')">Maximize</span></span>
<label><span>Dictionary Details <span id="showFullScreenTextbox" class="clickable inline-button" onclick="ShowFullScreenTextbox('dictionaryDescriptionEdit', 'Dictionary Details')">Maximize</span></span>
<textarea id="dictionaryDescriptionEdit"></textarea>
</label>
@ -223,7 +229,7 @@ if ($is_viewing) {
<label class="inline">
<span class="checkboxlabel">Sort by Equivalent Word</span>
<input type="checkbox" id="dictionarySortByEquivalent" />
</label> <span class="helperlink clickable" onclick='alert("By default, your dictionary is organized alphabetically by word. Checking this box will organize it by the \"Equivalent Word\" field instead");'>?</span>
</label> <span class="clickable inline-button" onclick='alert("By default, your dictionary is organized alphabetically by word. Checking this box will organize it by the \"Equivalent Word\" field instead");'>?</span>
</div>
<br>
<label>
@ -234,7 +240,7 @@ if ($is_viewing) {
<label class="inline">
<span class="checkboxlabel">Dictionary is Public</span>
<input type="checkbox" id="dictionaryIsPublic" onchange="TogglePublicLink()" />
</label> <span class="helperlink clickable" onclick='alert("If you save your settings with this checked, your dictionary will be viewable by anyone if they have the public link.");'>?</span>
</label> <span class="clickable inline-button" onclick='alert("If you save your settings with this checked, your dictionary will be viewable by anyone if they have the public link.");'>?</span>
<div id="publicLink"></div>
<?php } ?>
</div>