web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

make panel styles reusable

Browse Source
This commit is contained in:
ansuz
2016-12-30 15:30:35 +01:00
parent 773209472e
commit c6499d6789
3 changed files with 20 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
customize.dist/src/less/cryptpad.less
View File

@@ -11,7 +11,7 @@ html.cp, .cp body {
color: @fore; color: @fore;
font-family: Georgia,Cambria,serif; font-family: Georgia,Cambria,serif;
height: 100%; height: 100;
} }
.cp { .cp {
@@ -170,6 +170,11 @@ p, pre, td, a, table, tr {
line-height: 1.5em; line-height: 1.5em;
} }
// currently only used in /user/
.panel {
background-color: #333;
}
/* Tables /* Tables
* Currently only used by /poll/ * Currently only used by /poll/
*/ */

19
www/user/index.html
View File

@@ -15,19 +15,18 @@
box-sizing: border-box; box-sizing: border-box;
} }
body { body {
padding-top: 50px; padding: 45px;
} }
div.box { div.panel{
width: 70%; width: 70%;
margin: auto; margin: auto;
border: 1px solid black; border: 1px solid black;
padding: 15px; padding: 15px;
display: none; display: none;
background-color: #333;
border-radius: 5px; border-radius: 5px;
} }
@media (max-width: 1000px) { @media (max-width: 1000px) {
div.box { width: 90%; } div.panel { width: 90%; }
} }
input[type="text"], input[type="password"] { input[type="text"], input[type="password"] {
width: 80%; width: 80%;
@@ -38,7 +37,7 @@
margin-bottom: 45px; margin-bottom: 45px;
} }
#notice-box { #notice-panel {
text-align: center; text-align: center;
font-size: 25px; font-size: 25px;
} }
@@ -46,7 +45,7 @@
</head> </head>
<body> <body>
<div id="login-box" class="box"> <div id="login-panel" class="panel">
<div id="warning" data-localization="login_warning"></div> <div id="warning" data-localization="login_warning"></div>
<input type="text" name="username" id="username" data-localization-placeholder="login_username" autofocus><br /> <input type="text" name="username" id="username" data-localization-placeholder="login_username" autofocus><br />
<input type="password" name="password" id="password" data-localization-placeholder="login_password"><br /> <input type="password" name="password" id="password" data-localization-placeholder="login_password"><br />
@@ -55,11 +54,11 @@
<input type="checkbox" name="remember" id="remember" checked="true"><label for="remember" data-localization="login_remember"></label> <input type="checkbox" name="remember" id="remember" checked="true"><label for="remember" data-localization="login_remember"></label>
</div> </div>
<div id="notice-box" class="box"> <div id="notice-panel" class="panel">
<p id="notice"></p> <p id="notice"></p>
</div> </div>
<div id="confirm-box" class="box"> <div id="confirm-panel" class="panel">
<p data-localization="login_no_user"></p> <p data-localization="login_no_user"></p>
<p data-localization="login_confirm_password"></p> <p data-localization="login_confirm_password"></p>
@@ -72,12 +71,12 @@
<button id="cancel-register" data-localization="cancel"></button> <button id="cancel-register" data-localization="cancel"></button>
</div> </div>
<div id="logout-box" class="box"> <div id="logout-panel" class="panel">
<div data-localization="login_logout"></div> <div data-localization="login_logout"></div>
<button id="logout" data-localization="logoutButton"></button> <button id="logout" data-localization="logoutButton"></button>
</div> </div>
<div id="user-box" class="box"> <div id="user-panel" class="panel">
<div> <div>
<p><span data-localization="displayname_label"></span> <p><span data-localization="displayname_label"></span>
<strong id="display-name" class="display"></strong></p> <strong id="display-name" class="display"></strong></p>

10
www/user/main.js
View File

@@ -21,14 +21,14 @@ define([
var $warning = $('#warning'); var $warning = $('#warning');
// login elements // login elements
var $loginBox = $('#login-box'); var $loginBox = $('#login-panel');
var $login = $('#login'); var $login = $('#login');
var $username = $('#username'); var $username = $('#username');
var $password = $('#password'); var $password = $('#password');
var $remember = $('#remember'); var $remember = $('#remember');
// hashing elements // hashing elements
var $noticeBox = $('#notice-box'); var $noticeBox = $('#notice-panel');
var $notice = $('#notice'); var $notice = $('#notice');
APP.setNotice = function (s) { APP.setNotice = function (s) {
@@ -36,17 +36,17 @@ define([
}; };
// confirm elements // confirm elements
var $confirmBox = $('#confirm-box'); var $confirmBox = $('#confirm-panel');
var $confirm = $('#confirm'); var $confirm = $('#confirm');
var $cancelRegister = $('#cancel-register'); var $cancelRegister = $('#cancel-register');
var $register = $('#register'); var $register = $('#register');
// log out elements // log out elements
var $logoutBox = $('#logout-box'); var $logoutBox = $('#logout-panel');
var $logout = $('#logout'); var $logout = $('#logout');
// user elements // user elements
var $userBox = $('#user-box'); var $userBox = $('#user-panel');
var $displayNameLabel = $('#display-name'); var $displayNameLabel = $('#display-name');
var $userNameLabel = $('#user-name'); var $userNameLabel = $('#user-name');