pm.less

@primaryColor: #673AB7;
@primaryText: white;
@accentColor: #F4FF81;
@accentText: #512DA8;
@shadowColor: rgba(0,0,0,0.12);

html, body {
  margin: 0px;
  padding: 0px;
  height: 100%;
}

input {
  border:none;
}
input:focus {
  outline:none;
}

.template {display:none}

/* All our dialogs */
.dialog {
  width:100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.dialog form {
  padding: 1em;
  margin: 1em 1em 3em 1em;
  border: 0;
  border-top: 5px solid @primaryColor;
  box-shadow: 0px 2px 10px @shadowColor;
  text-align: center;
}
.dialog h1 {
  font-size: 1.5em;
  margin: 0.5em 0em;
}
.dialog input[type=password] {
  border-bottom: 1px solid #c0c0c0;
  transition: box-shadow 0.6s linear;
}
.dialog input[type=password]:focus {
  border-bottom: 1px solid @primaryColor;
}
.dialog input[type=password].invalid {
  box-shadow: 0px 0px 0px 2px #FC5185;
}
.dialog input[type=submit] {
  background-color: @primaryColor;
  color: @primaryText;
  width: 150px;
  margin: 5px;
}
.dialog input[type=button] {
  background-color: white;
  color: @primaryColor;
  width: 150px;
  margin: 5px;
  border: 1px solid @primaryColor;
}

/* The unlock pane */
#unlockPane input[type=password] {
  width: 100%;
  font-size: large;
}

/* The change password pane */
#changePasswordPane form, #newPasswordPane form {
  display: flex;
  flex-direction: column;
  font-size: larger;
}
.frmEntry {
  padding: 5px;
}
.frmEntry label {
  display: inline-block;
  width: 150px;
  text-align: right;
  padding-right: 10px;
}
.frmEntry input {
  width: 200px;
  font-size: larger;
}

/* The main pane */
#mainPane {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
#navBar {
  flex: 0 0 2.5em;
  background-color: @primaryColor;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: @primaryText;
}
.contentWrapper {
  flex: 1;
  display:flex;
  flex-direction: row;
}
#treePane {
  flex: 0 0 250px;
  box-shadow: 2px 0px 5px @shadowColor;
  z-index: 1;
  display:flex;
  flex-direction:column;
}
#contentPane {
  flex: 1;
}

/* The nav bar */
.heading {
  font-size: 1.5em;
  padding-left: 20px;
}
#navBar ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
  padding-right: 10px;
}
#navBar li a {
  display: block;
  text-decoration: none;
  padding: 0.4em 1em 0.4em 1em;
  color: white;
}
#navBar li a:hover {
  background-color: @accentColor;
  color: @accentText;
}

/* The tree pane */
.searchForm {
  margin: 0px;
  display: flex;
  border-bottom: 1px solid @shadowColor;
}
.searchForm input {
  font-size: 20px;
  line-height: 1.5em;
  flex: 1;
  padding: 5px 5px 5px 35px;
}
.searchIcon {
  margin: auto 3px;
  stroke-width: 5;
  fill-opacity: 0;
  stroke: @primaryColor;
  width: 28px;
  height: 40px;
  position: absolute;
}
#treePane ul {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  margin: 0px;
  padding: 0px;
}
#treePane li {
  padding: 5px 5px 5px 10px;
  border-bottom: 1px solid @shadowColor;
  flex: 1;
  font-size: 20px;
  line-height: 1.5em;
  cursor: pointer;
}
#treePane li:hover {
  color: @primaryColor;
}
#treePane li.selected {
  background-color:#F0F8FF;
}

.editor {
  margin: 10px;
}

.editor.newChoicePage > a {
  text-decoration: none;
  padding: 10px;
  margin: 10px;
  display: inline-block;
  background-color: white;
  color: @primaryColor;
  border: 1px solid @primaryColor;
}

.editor.password .titlebar {
  display: flex;
  line-height: 1.5em;
  font-size: 20px;
  border-bottom: 1px solid brown;
}

.editor.password .titlebar>span {
  flex: 0 0 auto;
  margin: 5px;
  fill: gray;
  cursor: pointer;
}
.editor.password .titlebar>span:hover {
  fill: black;
}
.editor.password .titlebar>input {
  flex: 1 0;
  font-size: 25px;
}
.editor.password .entry {
  margin: 10px;
}
.editor.password .entry>input {
  display: block;
  width: 100%;
}
.editor.password .entry .name {
  font-size: 12px;
}
.editor.password .entry .value {
  font-size: 20px;
}