ul { padding: 0; list-style-type: none; } #options { margin-top: 0; } #options li { margin-bottom: 0.5em; } #lists { margin: 0.5em 0 0 0; padding-left: 1em; padding-right: 0em; } body[dir=rtl] #lists { padding-left: 0em; padding-right: 1em; } #lists > li { margin: 0.5em 0 0 0; padding: 0; list-style-type: none; } #lists > .groupEntry > span { cursor: pointer; font-size: 15px; } #lists > .groupEntry:not(:first-child) > span:before { color: #aaa; content: '\2212 '; } #lists > .groupEntry.collapsed > span:before { color: #aaa; content: '+ '; } #lists > .groupEntry > ul { margin: 0.25em 0 0 0; } #lists > .groupEntry.collapsed > ul { display: none; } li.listEntry { font-size: 14px; margin: 0 auto 0 auto; margin-left: 1em; margin-right: 0em; } body[dir=rtl] li.listEntry { margin-left: 0em; margin-right: 1em; } li.listEntry > * { unicode-bidi: embed; } li.listEntry > a:nth-of-type(2) { font-size: 13px; opacity: 0.5; } .dim { opacity: 0.5; } /* I designed the button with: http://charliepark.org/bootstrap_buttons/ */ button.custom { padding: 5px; border: 1px solid transparent; border-color: #80b3ff #80b3ff hsl(216, 100%, 75%); border-radius: 3px; background-color: hsl(216, 100%, 75%); background-image: linear-gradient(#a8cbff, #80b3ff); background-repeat: repeat-x; color: #222; cursor: pointer; opacity: 0.8; } button.custom.disabled { border-color: #dddddd #dddddd hsl(36, 0%, 85%); background-color: hsl(36, 0%, 72%); background-image: linear-gradient(#f2f2f2, #dddddd); color: #aaa; pointer-events: none; } button.custom:hover { opacity: 1.0; } button.custom.reloadAll:not(.disabled) { border-color: #ffcc7f #ffcc7f hsl(36, 100%, 73%); background-color: hsl(36, 100%, 75%); background-image: linear-gradient(#ffdca8, #ffcc7f); } #buttonApply { display: initial; padding: 1em; position: fixed; right: 1em; top: 0; } body[dir=rtl] #buttonApply { right: auto; left: 1em; } #buttonApply.disabled { display: none; } span.status { margin: 0 0 0 1em; border: 1px solid transparent; padding: 1px 2px; display: inline-block; font-size: smaller; line-height: 1; opacity: 0.7; } span.purge { border-color: #ddd; color: #444; background-color: #eee; cursor: pointer; } span.purge:hover { opacity: 1; } span.obsolete { border-color: hsl(36, 100%, 73%); color: #222; background-color: hsl(36, 100%, 75%); } #externalListsDiv { margin: 2em auto 0 2em; } body[dir=rtl] #externalListsDiv { margin: 2em 2em 0; } #externalLists { box-sizing: border-box; font-size: smaller; height: 10em; white-space: pre; width: 100%; word-wrap: normal; } body #busyOverlay { background-color: transparent; bottom: 0; cursor: wait; display: none; left: 0; position: fixed; right: 0; top: 0; z-index: 1000; } body.busy #busyOverlay { display: block; } #busyOverlay > div:nth-of-type(1) { background-color: white; bottom: 0; left: 0; opacity: 0.75; position: absolute; right: 0; top: 0; } #busyOverlay > div:nth-of-type(2) { background-color: #eee; border: 1px solid transparent; border-color: #80b3ff #80b3ff hsl(216, 100%, 75%); border-radius: 3px; box-sizing: border-box; height: 3em; left: 10%; position: absolute; bottom: 75%; width: 80%; } #busyOverlay > div:nth-of-type(2) > div:nth-of-type(1) { background-color: hsl(216, 100%, 75%); background-image: linear-gradient(#a8cbff, #80b3ff); background-repeat: repeat-x; border: 0; box-sizing: border-box; color: #222; height: 100%; left: 0; padding: 0; position: absolute; width: 25%; } #busyOverlay > div:nth-of-type(2) > div:nth-of-type(2) { background-color: transparent; border: 0; box-sizing: border-box; height: 100%; left: 0; line-height: 3em; overflow: hidden; position: absolute; text-align: center; top: 0; width: 100%; }