Converted op-icons to material design and improved controls.

This commit is contained in:
n1474335 2018-06-10 14:55:15 +01:00
parent 2bacd6424d
commit 7d410fcdc9
10 changed files with 66 additions and 81 deletions

View file

@ -84,8 +84,8 @@ div.toggle-string {
.op-icon {
float: right;
margin-left: 10px;
margin-top: 3px;
color: #f44336;
font-size: 18px;
}
.recip-icons {
@ -95,33 +95,27 @@ div.toggle-string {
height: 16px;
}
.recip-icon {
.recip-icons i {
margin-right: 10px;
vertical-align: baseline;
float: right;
font-size: 18px;
}
.disable-icon {
width: 16px;
height: 16px;
margin-top: -1px;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAACfElEQVQ4y6WTPWgTYRjHf8nlfVvuoDVIP4Yuki4WHKoUqggFRUTsUEGkVG2hmCq6OnTwIxYHB+eijZOKdLNDW1pKKyGigh8dBHUJElxyBgx3vEnukvdyDrUhRXDxGR+e/+/583xEwjDkfyIGwNVTzURm4tYAMA6MAoN/0tvAMrA48uL+l2bx4w0iYRjSuHKC6OnTZLqHk8CcaZq9bW1tSCkBqNVq+L5PpVIpAHdGfr5LN9bXiT7Z2nGgteb1/qFkLBJZ6OjowHEc8vk8pVIJgHg8TldXF52dnb2u6y5s7R/iuF5JSyAKkLl4eyAMwznLsrBtm1wu99Z13amk+BFJih8R13WXANrb27EsizAM5zIXbw+wC9Baj0spe5VSFAqFt4ZhXJ6ufXuK55E5cDKVSCTGenp6yGazKKWQUvZqrcebgCAIRqWUOI6DEOLR1K8POapVMgfPpoC7u2LLspYcx0FKSRAEo60OBg3DwPd9Jr5vPqWvj8zh83vEwL2J75vnfN/HMAy01oPNNQZBQBAEO1OvVsl0D/8lTuZfpYDd7gRBQKuD7XK5jGmarB679PIv8deVFJUKq8cuTZqmSblcRmu93QpYVkohhMCyrLE94n2/UlSrbJy5kRBCXBNCoJRCa73cClh0XbfgeR6WZZHNZunv719KvnmeYnWVVxdmJ2Ox2DMhxFHP83Bdt6C1XgR2LvHzQDvvb84npZQL8Xgc0zSJRqN7br7RaFCpVCiVStRqtZmhh9fTh754TQdMr82nPc+bsW27UCwWUUpRr9ep1+sopSgWi9i2XfA8b2Z6bT6ttabp4GMi0uz0aXbhn890+MFM85mO5MIdwP/Eb1pMUCdctYRzAAAAAElFTkSuQmCC') no-repeat;
color: #9e9e9e;
}
.disable-icon-selected {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACFUlEQVR4XqWTP0tbURjGn9zY3mjBwsUhBQtS6XKxiNypIGZJ6SKYUYdaKWg7OrrE3pYO+Qit3dpFuuQO6lI7Z4nESQdjlJbkJh0MksSb3Jvk9H0gjZFu9YWH83LO7zn/3nNCSincJobAeP1sEDBFi6J50UyPy4l2RNuioz756Ts0tt1OB4jH2a52Ne2HGh9PwrJm2EcxZx/HyPRYMDgB2u02/N3d1c7w8BZMM1ptNJBPp3GwsUExB/s4RoYsPf0JOkFgdoH34YkJ/D48xC/HyTTOzl5ayWSIktwxqlVo0SjIkKWnP0Hg+4swjGitVMJFNpu5o+svptfXv6DZBDIZezoWS3Db3A0ZsvRcH8H354dGR9EoFHA3EvlorqycwvOAXM4G8Pav+f7YmEOGLD1gsIzl54+V+vBK/Yw9ZAv1LQW1FrdFSnKVfQTK5liPUfRI9I8ArqiPjLAF9vcHVybyzlpasgcZeq7voNXKNSsV3DMMXB4fp/8xLyzYuLri2DIZsvQM3sFOzXURiUR4zsQNcyrFleFVKpNyP2/IkKVnsArbF65bbkqplJSJZrl5x5qbs7G3h3artSyV+arr+lMyZOnpP2Wp6ZFos3R+vvUgCGDNzgKalkA4rECIr07662J2i0X4nrfJJ33jJT6Zmvpcr9XWCicn5WI+j7rrAmKgmLOPY2TI0sPgb8TBZOi/PpN1qnDr7/wH3jxgB/FKIXkAAAAASUVORK5CYII=') no-repeat;
color: #f44336;
}
.breakpoint {
float: right;
width: 14px;
height: 14px;
background-color: #eee;
border: 1px solid #aaa;
color: #9e9e9e;
}
.breakpoint-selected {
background: #eee url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAXVBMVEXIUkvzUVHzTEzzn5785eXrbW24BgbzWVnze3vzVVXzY2Pyion509PzbW3zXV1UMxj0l5f1srKbRTRgOxzJDg796ur74ODfIyP5zs6LLx3pNTXYGxuxdkVZNhn////sCC1eAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAABWSURBVBjTnc+7EoAgDERRTOQVxMEZFAf//z8FjAUFDbfb060QU2FwxngimxnCea3bjegSgz+0tguAfBgIy64QGfZQdg91dgAtqUZgnfz6IacYVWvu2AvR4wNAv0nxrAAAAABJRU5ErkJggg==') no-repeat -2px -2px;
color: #f44336;
}
.break {
@ -130,30 +124,40 @@ div.toggle-string {
border-color: var(--breakpoint-border-colour) !important;
}
.break .form-group * { color: var(--breakpoint-font-colour) !important; }
.selected-op {
color: var(--selected-operation-font-color) !important;
background-color: var(--selected-operation-bg-colour) !important;
border-color: var(--selected-operation-border-colour) !important;
}
.selected-op .form-group * { color: var(--selected-operation-font-color) !important; }
.flow-control-op {
color: var(--fc-operation-font-colour) !important;
background-color: var(--fc-operation-bg-colour) !important;
border-color: var(--fc-operation-border-colour) !important;
}
.flow-control-op .form-group * { color: var(--fc-operation-font-colour) !important; }
.flow-control-op.break {
color: var(--fc-breakpoint-operation-font-colour) !important;
background-color: var(--fc-breakpoint-operation-bg-colour) !important;
border-color: var(--fc-breakpoint-operation-border-colour) !important;
}
.flow-control-op.break .form-group * { color: var(--fc-breakpoint-operation-font-colour) !important; }
.disabled {
color: var(--disabled-font-colour) !important;
background-color: var(--disabled-bg-colour) !important;
border-color: var(--disabled-border-colour) !important;
}
.disabled .form-group * { color: var(--disabled-font-colour) !important; }
.break .register-list {
color: var(--fc-breakpoint-operation-font-colour) !important;
background-color: var(--fc-breakpoint-operation-border-colour) !important;

View file

@ -7,7 +7,7 @@
*/
:root {
--controls-height: 80px;
--controls-height: 75px;
}
#controls {
@ -16,6 +16,25 @@
height: var(--controls-height);
bottom: 0;
padding: 10px;
padding-top: 12px;
border-top: 1px solid var(--primary-border-colour);
background-color: var(--primary-background-colour);
background-color: var(--secondary-background-colour);
}
#auto-bake-label {
display: inline-block;
width: 100px;
padding: 0;
margin: 0;
text-align: center;
color: var(--primary-font-colour);
font-size: 14px;
}
#auto-bake-label .checkbox-decorator {
position: relative;
}
#bake {
box-shadow: none;
}

View file

@ -13,15 +13,16 @@
}
#search {
border-radius: 0;
border: none;
border-bottom: 1px solid var(--primary-border-colour);
color: var(--primary-font-colour);
padding-left: 10px;
padding-right: 10px;
background-image:
linear-gradient(to top, #1976d2 2px, rgba(25, 118, 210, 0) 2px),
linear-gradient(to top, var(--primary-border-colour) 1px, rgba(0, 0, 0, 0) 1px);
}
#edit-favourites {
float: right;
margin-top: -6px;
margin-top: -7px;
}
.favourites-hover {

View file

@ -29,6 +29,7 @@ body {
.clearfix {
clear: both;
height: 0;
line-height: 0;
}
.blur {
@ -36,7 +37,7 @@ body {
text-shadow: rgba(0, 0, 0, 0.95) 0 0 10px !important;
}
.no-select {
.no-select {
user-select: none;
}

View file

@ -28,7 +28,7 @@
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
@ -101,13 +101,10 @@ a:focus {
input[type="search"] {
-webkit-appearance: searchfield;
appearance: searchfield;
box-shadow: none;
}
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: searchfield-cancel-button;
appearance: searchfield-cancel-button;
}