Мелкие доработки стилей веб-интерфейса

[esp-clock.git] / data / web / style.css

diff --git a/data/web/style.css b/data/web/style.css
index 243c659a8e84ef58b9feb3c17e6d12e35b8f876f..e9feb429e9aa16ac1b78de6f541cbb14fb4cbe02 100644 (file)
--- a/data/web/style.css
+++ b/data/web/style.css
@@ -919,15 +919,17 @@ a.pure-button-selected {
 
 :root {
  --slide: 25em;
 
 :root {
  --slide: 25em;

- --blue: #129fea;
- --darkgray: #242424;
- --lightgray: #cad2d3;
- --darkergray: #191919;
+ --accent: #129fea;
+ --dark-gray: #242424;
+ --light-gray: #cad2d3;
+ --darker-gray: #191919;
+ --black-opacity: rgba(0,0,0,0.4);
+ --light: white;

 }
 
 body {
 }
 
 body {

- color:#aaa;
- background: var(--darkgray);
+ color:var(--light-gray);
+ background: var(--dark-gray);

 }
 
 .pure-img-responsive {
 }
 
 .pure-img-responsive {


@@ -965,11 +967,11 @@ body {
 }
 .header {
  margin:0;
 }
 .header {
  margin:0;

- color: var(--darkgray);
+ color: var(--dark-gray);

  text-align:center
 }
 .header h1 {
  text-align:center
 }
 .header h1 {

- color: var(--blue);
+ color: var(--accent);

  margin:.4em 0;
  padding-top: 0.5em;
  font-size: 2em;
  margin:.4em 0;
  padding-top: 0.5em;
  font-size: 2em;


@@ -978,14 +980,14 @@ body {
 }
 .header h2 {
  font-weight:300;
 }
 .header h2 {
  font-weight:300;

- color:#ccc;
+ color: var(--light-gray);

  padding:0;
  margin-top:0
 }
 .content-subhead {
  margin: 5em 0 2em 0;
  font-weight:300;
  padding:0;
  margin-top:0
 }
 .content-subhead {
  margin: 5em 0 2em 0;
  font-weight:300;

- color: var(--lightgray)
+ color: var(--light-gray)

 }
 #menu {
  margin-left:calc(var(--slide)* -1);
 }
 #menu {
  margin-left:calc(var(--slide)* -1);


@@ -996,12 +998,12 @@ body {
  left:0;
  bottom:0;
  z-index:1000;
  left:0;
  bottom:0;
  z-index:1000;

- background: var(--darkergray);
+ background: var(--darker-gray);

  overflow-y:auto;
  -webkit-overflow-scrolling:touch
 }
 #menu a {
  overflow-y:auto;
  -webkit-overflow-scrolling:touch
 }
 #menu a {

- color: var(--lightgray);
+ color: var(--light-gray);

  border:none;
  padding:.6em 0.3em .6em 0.6em
 }
  border:none;
  padding:.6em 0.3em .6em 0.6em
 }


@@ -1012,24 +1014,24 @@ body {
 }
 #menu .pure-menu ul,
 #menu .pure-menu .menu-item-divided {
 }
 #menu .pure-menu ul,
 #menu .pure-menu .menu-item-divided {

- border-top: 0.1em solid var(--darkgray)
+ border-top: 0.1em solid var(--dark-gray)

 }
 #menu .pure-menu li a:hover,
 #menu .pure-menu li a:focus {
 }
 #menu .pure-menu li a:hover,
 #menu .pure-menu li a:focus {

- background: var(--darkgray);
- color: var(--lightgray);
+ background: var(--dark-gray);
+ color: var(--light-gray);

 }
 #menu .pure-menu-selected,
 #menu .pure-menu-heading {
 }
 #menu .pure-menu-selected,
 #menu .pure-menu-heading {

- background: var(--blue);
+ background: var(--accent);

 }
 #menu .pure-menu-selected a {
 }
 #menu .pure-menu-selected a {

- color: white
+ color: var(--light)

 }
 #menu .pure-menu-heading {
  letter-spacing:.15em;
  text-transform:uppercase;
 }
 #menu .pure-menu-heading {
  letter-spacing:.15em;
  text-transform:uppercase;

- color: white;
+ color: var(--light);

  margin:0;
  text-align:center;
  padding:.6em 0.3em .6em 0.3em
  margin:0;
  text-align:center;
  padding:.6em 0.3em .6em 0.3em


@@ -1058,7 +1060,7 @@ body {
 .menu-link span,
 .menu-link span:before,
 .menu-link span:after {
 .menu-link span,
 .menu-link span:before,
 .menu-link span:after {

- background-color: var(--blue);
+ background-color: var(--accent);

  width:100%;
  height:.2em
 }
  width:100%;
  height:.2em
 }


@@ -1113,25 +1115,25 @@ input[type=range]::-webkit-slider-runnable-track {
  cursor:pointer;
  animate:0.2s;
  box-shadow: none
  cursor:pointer;
  animate:0.2s;
  box-shadow: none

- background: var(--blue);
+ background: var(--accent);

  border-radius: 0.3em;
  border: none
 }
 
 input[type=range]::-webkit-slider-thumb {
  box-shadow: none;
  border-radius: 0.3em;
  border: none
 }
 
 input[type=range]::-webkit-slider-thumb {
  box-shadow: none;

- border: 0.1em solid var(--lightgray)
+ border: 0.1em solid var(--light-gray)

  height: 2em;
  width: 2em;
  border-radius: 2em;
  height: 2em;
  width: 2em;
  border-radius: 2em;

- background: var(--lightgray)
+ background: var(--light-gray)

  cursor:pointer;
  -webkit-appearance:none;
  margin-top: 0.85em
 }
 
 input[type=range]:focus::-webkit-slider-runnable-track {
  cursor:pointer;
  -webkit-appearance:none;
  margin-top: 0.85em
 }
 
 input[type=range]:focus::-webkit-slider-runnable-track {

- background: var(--blue)
+ background: var(--accent)

 }
 
 input[type=range]::-moz-range-track {
 }
 
 input[type=range]::-moz-range-track {


@@ -1140,18 +1142,18 @@ input[type=range]::-moz-range-track {
  cursor: pointer;
  animate:0.2s;
  box-shadow: none;
  cursor: pointer;
  animate:0.2s;
  box-shadow: none;

- background: var(--blue);
+ background: var(--accent);

  border-radius: 0.3em;
  border: none
 }
 
 input[type=range]::-moz-range-thumb {
  box-shadow: none;
  border-radius: 0.3em;
  border: none
 }
 
 input[type=range]::-moz-range-thumb {
  box-shadow: none;

- border: 0.1em solid var(--blue);
+ border: 0.1em solid var(--accent);

  height: 2em;
  width: 2em;
  border-radius: 2em;
  height: 2em;
  width: 2em;
  border-radius: 2em;

- background: var(--lightgray);
+ background: var(--light-gray);

  cursor:pointer
 }
 
  cursor:pointer
 }
 


@@ -1166,14 +1168,14 @@ input[type=range]::-ms-track {
 }
 
 input[type=range]::-ms-fill-lower {
 }
 
 input[type=range]::-ms-fill-lower {

- background: var(--lightgray);
+ background: var(--light-gray);

  border: none;
  border-radius: 0.6em;
  box-shadow: none
 }
 
 input[type=range]::-ms-fill-upper {
  border: none;
  border-radius: 0.6em;
  box-shadow: none
 }
 
 input[type=range]::-ms-fill-upper {

- background: var(--lightgray);
+ background: var(--light-gray);

  border: none;
  border-radius: 0.6em;
  box-shadow: none
  border: none;
  border-radius: 0.6em;
  box-shadow: none


@@ -1182,20 +1184,20 @@ input[type=range]::-ms-fill-upper {
 input[type=range]::-ms-thumb {
  margin-top:0.1em;
  box-shadow: nonel
 input[type=range]::-ms-thumb {
  margin-top:0.1em;
  box-shadow: nonel

- border: 0.1em solid var(--blue);
+ border: 0.1em solid var(--accent);

  height: 2em;
  width: 2em;
  border-radius: 2em;
  height: 2em;
  width: 2em;
  border-radius: 2em;

- background: var(--lightgray);
+ background: var(--light-gray);

  cursor:pointer
 }
 
 input[type=range]:focus::-ms-fill-lower {
  cursor:pointer
 }
 
 input[type=range]:focus::-ms-fill-lower {

- background: var(--lightgray);
+ background: var(--light-gray);

 }
 
 input[type=range]:focus::-ms-fill-upper {
 }
 
 input[type=range]:focus::-ms-fill-upper {

- background: var(--lightgray);
+ background: var(--light-gray);

 }
 
 
 }
 
 


@@ -1222,7 +1224,7 @@ footer a {
   position: fixed;
   right: 0.5em;
   top: 0.5em;
   position: fixed;
   right: 0.5em;
   top: 0.5em;

-  background-color: var(--darkgray);
+  background-color: var(--dark-gray);

   z-index:200;
   word-wrap: anywhere;
   float: right;
   z-index:200;
   word-wrap: anywhere;
   float: right;


@@ -1236,13 +1238,13 @@ footer a {
   bottom: 0.5em;
   z-index:200;
   float: right;
   bottom: 0.5em;
   z-index:200;
   float: right;

-  color:#fff;
+  color: var(--light);

 }
 
 .message-text {
 }
 
 .message-text {

-  background-color: var(--darkgray);
-  border:0.2em solid var(--blue);
-  box-shadow:inset 0 0.1em 1.1em 0 var(--blue);
+  background-color: var(--dark-gray);
+  border:0.2em solid var(--accent);
+  box-shadow:inset 0 0.1em 1.1em 0 var(--accent);

   word-wrap: anywhere;
   font-weight: bolder;
   font-size: 120%;
   word-wrap: anywhere;
   font-weight: bolder;
   font-size: 120%;


@@ -1262,11 +1264,11 @@ footer a {
     text-shadow: none;
     text-align: center;
     font-weight: bold;
     text-shadow: none;
     text-align: center;
     font-weight: bold;

-    background: var(--darkgray);
-    color: white;
-    border: 0.2em solid var(--blue);
+    background: var(--dark-gray);
+    color: var(--light);
+    border: 0.2em solid var(--accent);

     border-radius: 1em;
     border-radius: 1em;

-    box-shadow:inset 0 0.1em 1.1em 0 var(--blue);
+    box-shadow:inset 0 0.1em 1.1em 0 var(--accent);

 }
 
 .fadeout {
 }
 
 .fadeout {


@@ -1289,30 +1291,38 @@ footer a {
   width: 100%; /* Full width */
   height: 100%; /* Full height */
   overflow: auto; /* Enable scroll if needed */
   width: 100%; /* Full width */
   height: 100%; /* Full height */
   overflow: auto; /* Enable scroll if needed */

-  background-color: rgba(0,0,0,0.3); /* Black w/ opacity */
+  background-color: var(--black-opacity); /* Black w/ opacity */

 }
 .modal-content {
   -webkit-appearance:button;
   cursor:pointer;
   letter-spacing:.05em;
   text-transform:uppercase;
 }
 .modal-content {
   -webkit-appearance:button;
   cursor:pointer;
   letter-spacing:.05em;
   text-transform:uppercase;

-  color:var(--lightgray);
+  color:var(--light-gray);

   font-size:90%;
   font-size:90%;

-  border:0.2em solid var(--blue);
+  border:0.2em solid var(--accent);

   border-radius:6px;
   border-radius:6px;

-  box-shadow:inset 0 0.1em 1.1em 0 var(--blue);
+  box-shadow:inset 0 0.1em 1.1em 0 var(--accent);

   padding: 1em;
   width: max-content;
   min-width: 30%;
   padding: 1em;
   width: max-content;
   min-width: 30%;

-  background-color: var(--darkgray);
+  background-color: var(--dark-gray);

   margin: 10% auto;
   padding: 1rem
 }
   margin: 10% auto;
   padding: 1rem
 }

+

 .table-header {
   font-weight: bold;
   font-size: 120%;
   text-align: center;
 .table-header {
   font-weight: bold;
   font-size: 120%;
   text-align: center;

-  border-bottom: var(--blue) solid 0.1em;
+}
+
+.table-header tr td {
+  border-bottom: 0.1em solid var(--light-gray)
+}
+
+.modal-content table {
+  border-spacing: 0.5em 1em;

 }
 
 /* overlapping hint button */
 }
 
 /* overlapping hint button */


@@ -1325,7 +1335,7 @@ footer a {
   cursor: pointer;
   width: 1rem;
   background: transparent;
   cursor: pointer;
   width: 1rem;
   background: transparent;

-  color: var(--darkgray);
+  color: var(--dark-gray);

   padding: .5em .6em;
   border: none;
   box-shadow: none;
   padding: .5em .6em;
   border: none;
   box-shadow: none;


@@ -1356,21 +1366,21 @@ span.switch.slider {
 }
 label.switch.socket span.switch.slider:before {
     content: "";
 }
 label.switch.socket span.switch.slider:before {
     content: "";

-    color: gray;
+    color: var(--darkgray);

     width: 3em;
     height: 1.4em;
     border-radius: 1em;
     position: absolute;
     left: 0;
     top: 0;
     width: 3em;
     height: 1.4em;
     border-radius: 1em;
     position: absolute;
     left: 0;
     top: 0;

-    border:0.2em solid var(--blue);
-    box-shadow:inset 0 0.1em 1.1em 0 var(--blue)
+    border:0.2em solid var(--accent);
+    box-shadow:inset 0 0.1em 1.1em 0 var(--accent)

 }
 label.switch span.switch.slider:after {
     content: "";
     width: 1rem;
     height: 1rem;
 }
 label.switch span.switch.slider:after {
     content: "";
     width: 1rem;
     height: 1rem;

-    background: var(--blue);
+    background: var(--accent);

     border-radius: 1em;
     position: absolute;
     left: 0.4rem;
     border-radius: 1em;
     position: absolute;
     left: 0.4rem;


@@ -1378,11 +1388,11 @@ label.switch span.switch.slider:after {
     transition: 0.2s;
 }
 label.switch.socket input[type=checkbox]:checked + span.slider:before {
     transition: 0.2s;
 }
 label.switch.socket input[type=checkbox]:checked + span.slider:before {

-    background: var(--lightgray);
+    background: var(--light-gray);

 }
 
 label.switch.socket input[type=checkbox]:checked + span.slider:after {
 }
 
 label.switch.socket input[type=checkbox]:checked + span.slider:after {

-    background: white;
+    background: var(--light);

     left: 1.9em;
 }
 
     left: 1.9em;
 }
 


@@ -1399,9 +1409,9 @@ label.switch.socket input[type=checkbox]:checked + span.slider:after {
  font-size:100%;
  line-height: 1.15em;
  padding: .5em 1em;
  font-size:100%;
  line-height: 1.15em;
  padding: .5em 1em;

- color:rgba(0,0,0,.8);
+ color: var(--dark-gray);

  border:none transparent;
  border:none transparent;

- background-color:#e6e6e6;
+ background-color: var(--light-gray);

  text-decoration:none;
  border-radius:2px;
  vertical-align: middle;
  text-decoration:none;
  border-radius:2px;
  vertical-align: middle;


@@ -1410,6 +1420,13 @@ label.switch.socket input[type=checkbox]:checked + span.slider:after {
  text-align: center;
 }
 
  text-align: center;
 }
 

+.pure-button {
+ color: var(--dark-gray);
+ border:none transparent;
+ background-color: var(--light-gray);
+ margin: 0.5em 1em 0.5em 1em;
+}
+

 /* weekdays */
 
 .week {
 /* weekdays */
 
 .week {


@@ -1426,13 +1443,13 @@ label.switch.socket input[type=checkbox]:checked + span.slider:after {
     margin: 0.2vw;
     padding: 0.2em;
     border-radius: 5em;
     margin: 0.2vw;
     padding: 0.2em;
     border-radius: 5em;

-    border:0.2em solid var(--blue);
-    box-shadow:inset 0 0.1em 1.1em 0 var(--blue);
-    color: gray
+    border:0.2em solid var(--accent);
+    box-shadow:inset 0 0.1em 1.1em 0 var(--accent);
+    color: var(--light-gray)

 }
 .weekday-selected {
 }
 .weekday-selected {

-    background: var(--lightgray);
-    color: black
+    background: var(--light-gray);
+    color: var(--darker-gray);

 }
 
 /* Hide arrows */
 }
 
 /* Hide arrows */


@@ -1483,7 +1500,13 @@ input[type=file]::-ms-browse {
 
 .row-button.row-button.row-button {
   display: inline-block;
 
 .row-button.row-button.row-button {
   display: inline-block;

-  margin: 0 2em 0 2em
+}
+
+/* hr */
+
+hr {
+ margin: 0.5em 2em 0.5em 2em;
+ color: var(--accent);

 }
 
 /* fonts */
 }
 
 /* fonts */