Zach's git repos / php-xmpp-invitation
XMPP invitation landing page, without javascript
Improved style of text and hints
Browse Source
Georg Lukas 2018-02-21
parent d3213f2 · commit 12efe3e
Diffstat
-rw-r--r--index.html4
-rw-r--r--stylesheets/i.css28
-rw-r--r--stylesheets/styles.css106
3 files changed, 72 insertions, 66 deletions
diff --git a/index.html b/index.html
index 3711732..03b956e 100644
--- a/index.html
+++ b/index.html
@@ -26,13 +26,13 @@
<h3 class="text-center" id="heading"></h3>
<p class="text-center"><a class="btn btn-primary" id="button"></a></p>
<input type="url" class="form-control text-center" id="url_in" readonly></input>
- <p class="lead text-center" id="clients"></p>
+ <p class="hint text-center" id="clients"></p>
<p class="lead" id="recommend"></p>
<ul class="lead" id="client_list"></ul>
<p class="lead" id="checkfulllist"></p>
- <p id="xmppis"></p>
+ <p class="hint" id="xmppis"></p>
</div>
<script src="scripts/i18n-text.min.js"></script>
<script src="scripts/main.js"></script>
diff --git a/stylesheets/i.css b/stylesheets/i.css
index 574cf79..8431b3c 100644
--- a/stylesheets/i.css
+++ b/stylesheets/i.css
@@ -1,10 +1,25 @@
body {
background: #f8f8f8;
color: #000000;
+ font-size: 1em;
+ font-family: sans-serif;
}
+h3 {
+ font-size: 1.5em;
+ font-weight: 400;
+ line-height: 1.1;
+ color: #444;
+}
+
a {
color: #1863a1;
}
+
+.btn:hover, .btn:focus, .btn.focus {
+ color: #666;
+ text-decoration: none;
+}
+
.btn-primary {
background: #252e3f;
color: #f2f2f2;
@@ -12,9 +27,16 @@ a {
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
background: #353e5f;
color: #b7c1d5;
- box-shadow: none;
+ box-shadow: none;
}
.btn-primary:active, .btn-primary.active {
- background: #353e5f;
- box-shadow: none;
+ background: #353e5f;
+ box-shadow: none;
+}
+.text-center {
+ text-align: center;
+}
+.hint {
+ font-size: 0.9em;
+ color: #444;
}
diff --git a/stylesheets/styles.css b/stylesheets/styles.css
index 32288c9..abdd5f7 100644
--- a/stylesheets/styles.css
+++ b/stylesheets/styles.css
@@ -1,82 +1,66 @@
/* Mostly cherrypicked from bootstrap https://getbootstrap.com/css/ */
-
-html {
-font-size: 1em;
-font-family: sans-serif;
-}
-
-.text-center {
- text-align: center;
-}
-
-.h3 {
- font-size: 2em;
- line-height: 1.1;
- color: #444;
-}
-
.btn {
- display: inline-block;
- margin-bottom: 0;
- font-weight: normal;
- text-align: center;
- vertical-align: middle; text-transform: uppercase;
- border-right: none;
- border-bottom: none;
- color: #666;
- text-decoration: none;
- transition: all .2s;
- touch-action: manipulation;
- cursor: pointer;
- border: 1px solid transparent;
- white-space: nowrap;
- padding: 6px 16px;
- font-size: 13px;
- line-height: 1.846;
- border-radius: 3px;
- -webkit-user-select: none;
- -moz-user-select: none;
+ display: inline-block;
+ margin-bottom: 0;
+ font-weight: normal;
+ text-align: center;
+ vertical-align: middle; text-transform: uppercase;
+ border-right: none;
+ border-bottom: none;
+ color: #666;
+ text-decoration: none;
+ transition: all .2s;
+ touch-action: manipulation;
+ cursor: pointer;
+ border: 1px solid transparent;
+ white-space: nowrap;
+ padding: 6px 16px;
+ font-size: 13px;
+ line-height: 1.846;
+ border-radius: 3px;
+ -webkit-user-select: none;
+ -moz-user-select: none;
}
.btn:hover, .btn:focus, .btn.focus {
- color: #666;
- text-decoration: none;
+ color: #666;
+ text-decoration: none;
}
textarea, textarea.form-control, input.form-control, input[type="text"], input[type="password"], input[type="email"], input[type="number"], .form-control[type="text"], .form-control[type="password"], .form-control[type="email"], .form-control[type="tel"] {
- padding: 0;
- border: none;
- border-radius: 0;
- -webkit-box-shadow: inset 0 -1px 0 #ddd;
- box-shadow: inset 0 -1px 0 #ddd;
- font-size: 1.1em;
+ padding: 0;
+ border: none;
+ border-radius: 0;
+ -webkit-box-shadow: inset 0 -1px 0 #ddd;
+ box-shadow: inset 0 -1px 0 #ddd;
+ font-size: 1.1em;
}
.form-control {
- display: block;
- width: 100%;
- height: 37px;
- line-height: 1.846;
- color: #666;
- background-color: transparent;
- background-image: none;
- -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
- box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
- -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
- transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
+ display: block;
+ width: 100%;
+ height: 37px;
+ line-height: 1.846;
+ color: #666;
+ background-color: transparent;
+ background-image: none;
+ -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
+ box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
+ -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
+ transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
input, button {
- -webkit-font-smoothing: antialiased;
- letter-spacing: .1px;
- text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ letter-spacing: .1px;
+ text-rendering: optimizeLegibility;
}
a {
-text-decoration: none;
+ text-decoration: none;
}
a:hover, a:focus {
- color: #165d16;
- text-decoration: underline;
+ color: #165d16;
+ text-decoration: underline;
}