Экран безопасности Windows Like для Linux (макет)

В Ubuntu и других вариантах Linux нет Windows, подобной CTRL + ALT + DEL экран, поэтому я решил, что сделаю его сам. Я планирую создать HTML-версию, отобразить ее с помощью веб-движка PyQt, а затем, когда ключи CTRL + ALT + DEL нажимаются запускает программу.

Предварительный просмотр:
https://codepen.io/aangeletakis/pen/YzprZxX?editors=1100

Как я могу улучшить его, прежде чем приступить к работе с приложением?

<style>
:root{
  --interface-width:10%;
  --cancel-btn-border-width: 2px;
  --ui-text-color:white;
  outline: none;
  user-select: none;
}
body {
  background: #005A9E;
  padding: 0px;
}

.userInterface {color:var(--ui-text-color);}
.center {
  width: var(--interface-width);
  transform: translate(-55%, -65%);
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: auto;
}
.optionsList {
  color:var(--ui-text-color);
  list-style:none;
  
}
.optionsList li{margin-left: 0; padding-left: 0;}
.optionsList li button{
  border:none;
  color: inherit;
  background:none;
  outline: none;
  --optionPadding:25px;
  padding-top: var(--optionPadding);
  padding-bottem: var(--optionPadding);
  cursor: pointer;
}
.optionsList li button:hover{opacity: 0.75;}
.cancelBtn {
  transform:   translate(calc(50%  - var(--interface-width) - 3%), 0%);
  border:      var(--cancel-btn-border-width) solid transparent;
  background:  #337BB1;
  color:var(--ui-text-color);
  margin-top:30px;
  --cancel-btn-lr-padding: 40px;
  padding-right: var(--cancel-btn-lr-padding);
  padding-left:  var(--cancel-btn-lr-padding);
  padding-top: 7px;
  padding-bottom: 7px;
  outline: 0;
}
.cancelBtn:hover {
  border: var(--cancel-btn-border-width) solid lightblue;
}
</style>
<body>
  <div class="userInterface center">
    <ul class="optionsList">
      <li><button>Lock</button></li>
      <li><button>Switch user</button></li>
      <li><button>Sign out</button></li>
      <li><button>System manager</button></li>
    </ul>
    <button class="cancelBtn">Cancel</button>
  <div>
</body>

0

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *