mirror of
https://github.com/CloverHackyColor/CloverBootloader.git
synced 2024-12-04 13:23:26 +01:00
1488 lines
33 KiB
CSS
1488 lines
33 KiB
CSS
/* CSS file for Clover Theme Manager */
|
|
/* Blackosx 2014-2017 */
|
|
/* v0.76.7 */
|
|
|
|
html, body {
|
|
padding: 0;
|
|
margin: 0;
|
|
height: 100%;
|
|
overflow: auto;
|
|
}
|
|
|
|
body {
|
|
background: #000 url(../assets/758v3.png) no-repeat right top;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
p {
|
|
font-family: 'Roboto', sans-serif;
|
|
}
|
|
|
|
|
|
|
|
/* ===================================================================== */
|
|
/* INIT PAGE */
|
|
/* ===================================================================== */
|
|
|
|
#StatusArea {
|
|
margin: 40px 0px 0px 248px;
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
#homePageProgressBar {
|
|
height: 12px;
|
|
margin: 0px 330px 12px 330px;
|
|
}
|
|
|
|
.statusLine {
|
|
color: #555;
|
|
font-family: 'Roboto Condensed', sans-serif;
|
|
font-size: 18px;
|
|
line-height: 130%;
|
|
}
|
|
|
|
.checkMark {
|
|
color: #33FF33;
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 18px;
|
|
float:right;
|
|
margin-right: 240px;
|
|
}
|
|
|
|
#WelcomeMessage {
|
|
margin: 100px 0px 0px 0px;
|
|
line-height: 2px;
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
.textHeading {
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 28px;
|
|
font-weight:700;
|
|
color: #FFF;
|
|
text-align:center;
|
|
}
|
|
|
|
.textSubHeading {
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 20px;
|
|
color: #a7a7a7;
|
|
text-align:center;
|
|
margin-top: 22px;
|
|
}
|
|
|
|
.textVersion {
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 12px;
|
|
color: #CCC;
|
|
text-align:center;
|
|
margin-bottom: 28px;
|
|
}
|
|
|
|
#MessageArea {
|
|
position: fixed;
|
|
bottom: 16px;
|
|
left: 0;
|
|
right: 0;
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
.message {
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
color: #BBB;
|
|
text-align:center;
|
|
margin-bottom: 28px;
|
|
}
|
|
|
|
#footerInitPage {
|
|
position: fixed;
|
|
height: 36px;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: #000;
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
/* ===================================================================== */
|
|
/* HEADER */
|
|
/* ===================================================================== */
|
|
|
|
#header {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 66px;
|
|
background-color: #000;
|
|
box-shadow: 0px 2px 6px #000;
|
|
-webkit-user-select: none;
|
|
z-index: 1 /* Raise up one layer to allow shadow to be seen */
|
|
/* Note: js script toggles this from 1 to 0 when changing height for bootlog.*/
|
|
}
|
|
|
|
/* ======= */
|
|
/* Bootlog */
|
|
/* ======= */
|
|
|
|
#BootLogTitleBar {
|
|
width: 100%;
|
|
height: 33px;
|
|
opacity: 0.95;
|
|
cursor: pointer;
|
|
outline: none;
|
|
}
|
|
|
|
#BootLogTitleBar:hover, #BootLogTitleBar:focus {
|
|
background-image: -webkit-linear-gradient(top, #535353 0%,#2c2c2c 70%,#353535 75%,#505050 98%, #727272 99%, #949494 100%);
|
|
}
|
|
|
|
.titleBarTextTitle {
|
|
font-family: 'Roboto', sans-serif;
|
|
color: #FFF;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
padding: 0px 0px 0px 24px;
|
|
}
|
|
|
|
.titleBarTextDescription {
|
|
font-family: 'Roboto', sans-serif;
|
|
color: #FFF;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
padding: 0px 0px 0px 12px;
|
|
line-height: 35px;
|
|
}
|
|
|
|
#BootLogContainer {
|
|
width: 100%;
|
|
height: auto; /* Height value varies depending on number of rows of data set to display */
|
|
border-top: 2px solid #333;
|
|
opacity: 0.95;
|
|
}
|
|
|
|
#bandHeader {
|
|
background-color: #4a544d;
|
|
border-bottom: 1px solid #000;
|
|
float: left;
|
|
height: 25px;
|
|
width: 17%;
|
|
}
|
|
|
|
#bandDescription {
|
|
background-color: #1d2922;
|
|
border-bottom: 1px solid #000;
|
|
float: left;
|
|
height: 25px;
|
|
width: 83%;
|
|
float: left;
|
|
}
|
|
|
|
#bandColumnLeft {
|
|
float: left;
|
|
}
|
|
|
|
#bandColumnRight {
|
|
position: absolute;
|
|
left: 460px;
|
|
}
|
|
|
|
#bandIdentifer {
|
|
float: left;
|
|
}
|
|
|
|
#bandMountpoint {
|
|
float: left;
|
|
}
|
|
|
|
#RescanButton {
|
|
margin: 2px 0px 0px 24px;
|
|
float: left;
|
|
}
|
|
|
|
.rescanButton {
|
|
background: #555;
|
|
width: auto;
|
|
border: none;
|
|
border-radius: 4px;
|
|
padding: 0px 8px 0px 8px;
|
|
color: #FFF;
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
height: 19px;
|
|
text-align: center;
|
|
line-height: 15px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.rescanButton:hover {
|
|
background-image: -webkit-linear-gradient(top, #e5e5e5, #b6b6b6);
|
|
color:#333;
|
|
}
|
|
|
|
.infoTitle {
|
|
font-family: 'Roboto', sans-serif;
|
|
font-weight: bold;
|
|
color: #a6a9a7;
|
|
font-size: 12px;
|
|
padding: 0px 0px 0px 24px;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.infoBody {
|
|
font-family: 'Roboto', sans-serif;
|
|
font-weight: bold;
|
|
color: #FFF;
|
|
font-size: 12px;
|
|
padding: 10px 0px 0px 4px;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.infoBodyReplaceable {
|
|
font-family: 'Roboto', sans-serif;
|
|
font-weight: bold;
|
|
color: #FFF;
|
|
font-size: 12px;
|
|
padding: 10px 0px 0px 4px;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.infoBodyGreen {
|
|
font-family: 'Roboto', sans-serif;
|
|
font-weight: bold;
|
|
color: #4bfb68;
|
|
font-size: 12px;
|
|
padding: 10px 0px 0px 4px;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.infoBodyRed {
|
|
font-family: 'Roboto', sans-serif;
|
|
font-weight: bold;
|
|
color: #fb4b4b;
|
|
font-size: 12px;
|
|
padding: 10px 0px 0px 4px;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.infoBodyTheme {
|
|
font-family: 'Roboto', sans-serif;
|
|
font-weight: bold;
|
|
color: #7bf4f5;
|
|
font-size: 12px;
|
|
padding: 10px 0px 0px 4px;
|
|
line-height: 24px;
|
|
}
|
|
|
|
/* =========================== */
|
|
/* Main header (Under bootlog) */
|
|
/* =========================== */
|
|
|
|
#ListingThemesMessage {
|
|
position: absolute;
|
|
float: left;
|
|
margin: 0;
|
|
background-color: #333;
|
|
width: 100%;
|
|
height:32px;
|
|
display:none;
|
|
}
|
|
|
|
#CheckingUpdatesMessage {
|
|
position: absolute;
|
|
float: left;
|
|
margin: 0;
|
|
background-color: #333;
|
|
width: 100%;
|
|
height:32px;
|
|
display:none;
|
|
}
|
|
|
|
#PathSelector {
|
|
width: 41%;
|
|
float: left;
|
|
margin: 5px 0px 5px 24px;
|
|
outline: none;
|
|
}
|
|
|
|
#PathSelector select {
|
|
width: 98%;
|
|
max-width: 98% !important;
|
|
}
|
|
|
|
select.custom-dropdown {
|
|
-webkit-appearance: none;
|
|
border: 0 !important;
|
|
outline: none;
|
|
color: #fff;
|
|
-webkit-border-radius: 4px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
padding: 2px 24px 2px 10px;
|
|
cursor: pointer;
|
|
background: #555 url(../assets/dropdown_arrow.png) no-repeat right center;
|
|
background-size: 19px 19px;
|
|
}
|
|
|
|
select.custom-dropdown:hover, select.custom-dropdown:focus {
|
|
background: #b6b6b6 url(../assets/dropdown_arrow.png) no-repeat right center;
|
|
background-size: 19px 19px;
|
|
color: #333;
|
|
}
|
|
|
|
#RefreshButton {
|
|
margin: 6px 0px 0px 0px;
|
|
float: left;
|
|
outline: none;
|
|
}
|
|
|
|
.reloadButton {
|
|
background: #555;
|
|
border: none;
|
|
border-radius: 4px;
|
|
color: #FFF;
|
|
font-family: Lucida Sans Unicode;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
height: 19px;
|
|
text-align: center;
|
|
line-height: 15px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.reloadButton:hover {
|
|
background-image: -webkit-linear-gradient(top, #e5e5e5, #b6b6b6);
|
|
color:#333;
|
|
}
|
|
|
|
#RefreshButton:focus > .reloadButton {
|
|
background-image: -webkit-linear-gradient(top, #e5e5e5, #b6b6b6);
|
|
color:#333;
|
|
}
|
|
|
|
#OpenPathButton {
|
|
display: none;
|
|
}
|
|
|
|
#OpenButton {
|
|
width: 50px;
|
|
margin: 7px 0px 0px 4px;
|
|
float: left;
|
|
outline: none;
|
|
}
|
|
|
|
.openButton {
|
|
background: #555;
|
|
border: none;
|
|
border-radius: 4px;
|
|
color: #FFF;
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
height: 19px;
|
|
text-align: center;
|
|
line-height: 15px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.openButton:hover {
|
|
background-image: -webkit-linear-gradient(top, #e5e5e5, #b6b6b6);
|
|
color:#333;
|
|
}
|
|
|
|
#OpenButton:focus > .openButton {
|
|
background-image: -webkit-linear-gradient(top, #e5e5e5, #b6b6b6);
|
|
color:#333;
|
|
}
|
|
|
|
#EspButton {
|
|
width: 80px;
|
|
margin: 7px 0px 0px 0px;
|
|
float: left;
|
|
outline: none;
|
|
}
|
|
|
|
.espButton {
|
|
background: #555;
|
|
width: 80px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
color: #FFF;
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
height: 19px;
|
|
text-align: center;
|
|
line-height: 15px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.espButton:hover {
|
|
background-image: -webkit-linear-gradient(top, #e5e5e5, #b6b6b6);
|
|
color:#333;
|
|
}
|
|
|
|
#EspButton:focus > .espButton {
|
|
background-image: -webkit-linear-gradient(top, #e5e5e5, #b6b6b6);
|
|
color:#333;
|
|
}
|
|
|
|
#ThemeCount {
|
|
width: 18%;
|
|
margin: 6px 0px 0px 0px;
|
|
float: right;
|
|
}
|
|
|
|
#FreeSpace {
|
|
width: 15%;
|
|
margin: 6px 0px 0px 4px;
|
|
text-align: center;
|
|
float: right;
|
|
}
|
|
|
|
#HeaderBar {
|
|
height: 24px;
|
|
padding: 5px 20px 5px 20px;
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 12px;
|
|
line-height: 0px;
|
|
color: #FFF;
|
|
clear: both;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.spacerButton {
|
|
color: #FFF;
|
|
float: right;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
height: 20px;
|
|
margin: 1px 40px 0px 0px;
|
|
width: 34px;
|
|
text-align: center;
|
|
line-height: 20px;
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
.spacerButtonUpdateAll {
|
|
color: #FFF;
|
|
float: right;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
height: 20px;
|
|
margin: 1px 40px 0px 0px;
|
|
width: 94px;
|
|
text-align: center;
|
|
line-height: 20px;
|
|
-webkit-user-select: none;
|
|
display: none;
|
|
}
|
|
|
|
.toggleButton {
|
|
background-image: -webkit-linear-gradient(top, rgba(110,110,110,1) 0%,rgba(0,0,0,1) 100%);
|
|
border: 1px solid #282828;
|
|
border-radius: 4px;
|
|
color: #FFF;
|
|
float: right;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
height: 20px;
|
|
margin: 1px 12px 0px 0px;
|
|
width: 120px;
|
|
text-align: center;
|
|
line-height: 20px;
|
|
cursor: pointer;
|
|
-webkit-user-select: none;
|
|
outline: none;
|
|
}
|
|
|
|
.toggleButton:hover, .toggleButton:focus {
|
|
border: 1px solid #AAA !important;
|
|
}
|
|
|
|
.toggleButton:active {
|
|
background: #888 !important;
|
|
}
|
|
|
|
.spacerButtonSml {
|
|
float: right;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
height: 20px;
|
|
margin: 1px 12px 0px 0px;
|
|
width: 40px;
|
|
text-align: center;
|
|
line-height: 20px;
|
|
-webkit-user-select: none;
|
|
display: none;
|
|
}
|
|
|
|
.toggleButtonSml {
|
|
background-image: -webkit-linear-gradient(top, rgba(110,110,110,1) 0%,rgba(0,0,0,1) 100%);
|
|
border: 1px solid #282828;
|
|
border-radius: 4px;
|
|
color: #FFF;
|
|
float: right;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
height: 20px;
|
|
margin: 1px 12px 0px 0px;
|
|
width: 40px;
|
|
text-align: center;
|
|
line-height: 20px;
|
|
cursor: pointer;
|
|
-webkit-user-select: none;
|
|
outline: none;
|
|
}
|
|
|
|
.toggleButtonSml:hover, .toggleButtonSml:focus {
|
|
border: 1px solid #AAA !important;
|
|
}
|
|
|
|
.toggleButtonSml:active {
|
|
background: #888 !important;
|
|
}
|
|
|
|
|
|
/* ===================================================================== */
|
|
/* CONTENT */
|
|
/* ===================================================================== */
|
|
|
|
#content {
|
|
position: fixed;
|
|
top: 66px;
|
|
|
|
/* bottom position calculated by adding the heights and borders of the following elements:
|
|
/* #NvramFunctionalityBand 23px (inc 2px border) + #changeThemeBand 55px (inc 2px border) + #FooterLinks 38px (inc 2px border) = 116px */
|
|
bottom: 139px; /* Must match height of #footer */
|
|
/* Note: #BootLogTitleBar 35px (inc 2px border) + BandHeader/Band Description 26px (inc 1px border) * 5 gets added when bootlog is inserted - totals 165px */
|
|
left: 0;
|
|
right: 0;
|
|
background-color: #000;
|
|
overflow: auto;
|
|
}
|
|
|
|
.accordion {
|
|
background-image: -webkit-linear-gradient(top, #4b4e51, #2f3134);
|
|
}
|
|
|
|
.accordionInstalled {
|
|
background-image: -webkit-linear-gradient(top, #232f43 0%,#305584 7%,#305584 100%);
|
|
border-top: 1px solid #000 !important;
|
|
}
|
|
|
|
.accordionInstalledNoShadow {
|
|
background-color: #305584;
|
|
border-top: 1px solid #305584 !important;
|
|
}
|
|
|
|
.accordionUpdate {
|
|
background-image: -webkit-linear-gradient(top, #16304f 0%,#38aad7 7%,#38aad7 100%);
|
|
border-top: 1px solid #000 !important;
|
|
}
|
|
|
|
.accordionUpdateNoShadow {
|
|
background-color: #38aad7;
|
|
border-top: 1px solid #38aad7 !important;
|
|
}
|
|
|
|
.accordionContent {
|
|
width: 100%;
|
|
float: left;
|
|
background: #FFF;
|
|
display: none;
|
|
line-height: 0;
|
|
}
|
|
|
|
.accordion:hover {
|
|
background-image: -webkit-linear-gradient(top, #747474, #606060);
|
|
}
|
|
|
|
.accordionInstalled:hover {
|
|
background-image: -webkit-linear-gradient(top, #232f43 0%,#4e709e 7%,#4e709e 100%);
|
|
border-top: 1px solid #000 !important;
|
|
}
|
|
|
|
.accordionInstalledNoShadow:hover {
|
|
background-color: #4e709e;
|
|
border-top: 1px solid #4e709e !important;
|
|
}
|
|
|
|
.accordionUpdate:hover {
|
|
background-image: -webkit-linear-gradient(top, #16304f 0%,#6fc9ed 7%,#6fc9ed 100%);
|
|
border-top: 1px solid #000 !important;
|
|
}
|
|
|
|
.accordionUpdateNoShadow:hover {
|
|
background-color: #6fc9ed;
|
|
border-top: 1px solid #6fc9ed !important;
|
|
}
|
|
|
|
#ThemeBand {
|
|
height: 70px;
|
|
border-top: 1px solid #67696b;
|
|
border-bottom: 1px solid #000;
|
|
clear: both;
|
|
overflow: hidden; /* Added to not show gap at bottom in Safari */
|
|
}
|
|
|
|
#ThemeItems {
|
|
display: inline;
|
|
}
|
|
|
|
#ThemeText {
|
|
float: left;
|
|
width: 380px;
|
|
position: relative;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
-webkit-transform: translateY(-50%);
|
|
z-index:1;
|
|
}
|
|
|
|
#ThemeText p {
|
|
display: table-row;
|
|
}
|
|
|
|
.versionControl {
|
|
margin: 28px 12px 0px 0px;
|
|
float: right;
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
line-height: 18px;
|
|
color:#FFF;
|
|
cursor: pointer;
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
.thumbnail {
|
|
margin: 7px 16px 0px 30px;
|
|
float: left;
|
|
cursor:pointer;
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
.thumbnail img {
|
|
width: 100px;
|
|
height: 56px;
|
|
border: 1px solid rgba(255, 255, 255, .2);
|
|
}
|
|
|
|
|
|
.thumbnail:hover {
|
|
opacity:0.5;
|
|
}
|
|
|
|
.themeTitle {
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: #edf2f6;
|
|
line-height: 120%;
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
.themeDescription {
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 11px;
|
|
font-weight: 400;
|
|
color: #edf2f6;
|
|
line-height: 120%;
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
.themeAuthor {
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 10px;
|
|
font-weight: 300;
|
|
font-style: italic;
|
|
color: #dbeaef;
|
|
line-height: 120%;
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
.buttonInstall {
|
|
background-color: #49c0f0;
|
|
background-image: -webkit-linear-gradient(top, #5d88b4, #3a689c);
|
|
/*background-image: -webkit-linear-gradient(top, #80a072, #608550);*/
|
|
/*background-image: -webkit-linear-gradient(top, #1a1b1c, #2b2d2e); */
|
|
/*background-image: -webkit-linear-gradient(top, #0d1a28, #172e48);*/
|
|
/*background-image: -webkit-linear-gradient(top, #172e48, #0d1a28);*/
|
|
border: 1px solid #414245;
|
|
border-radius: 4px;
|
|
color: #fff;
|
|
float: right;
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
height: 15px;
|
|
margin: 24px 8px 0 0;
|
|
padding: 2px;
|
|
text-shadow: 0px 2px 0 rgba(0, 0, 0, 0.2);
|
|
letter-spacing: 0.5px;
|
|
width: 72px;
|
|
text-align: center;
|
|
line-height: 16px;
|
|
cursor: pointer;
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
.buttonInstall:hover {
|
|
background-color: #bbdbf5;
|
|
/* background-image: -webkit-linear-gradient(top, #5ea55c, #3d6c3c); */
|
|
background-image: -webkit-linear-gradient(top, #2bbcff, #00a5fd);
|
|
/* border: 1px solid #3b4e2f; */
|
|
border: 1px solid #00a7fb;674
|
|
}
|
|
|
|
.buttonInstall:active {
|
|
background-color: #8cc670;
|
|
background-image: -webkit-linear-gradient(top, #8cc670, #6d955b);
|
|
border: 1px solid #687956;
|
|
}
|
|
|
|
.buttonUnInstall {
|
|
background-color: #a90329;
|
|
/*background-image: -webkit-linear-gradient(top, #4b4f52, #2f3134);*/
|
|
background-image: -webkit-linear-gradient(top, #7a2222, #621b1c);
|
|
/*border: 1px solid #424344;*/
|
|
border: 1px solid #621b1c;
|
|
border-radius: 4px;
|
|
color: #fff;
|
|
float: right;
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
height: 15px;
|
|
margin: 24px 8px 0 0;
|
|
padding: 2px;
|
|
text-shadow: 0px 2px 0 rgba(0, 0, 0, 0.2);
|
|
letter-spacing: 0.5px;
|
|
width: 72px;
|
|
text-align: center;
|
|
line-height: 16px;
|
|
cursor: pointer;
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
.buttonUnInstall:hover {
|
|
background-color: #bf6e83;
|
|
/*background-image: -webkit-linear-gradient(top, #ac5458, #713739);*/
|
|
background-image: -webkit-linear-gradient(top, #c61313, #a8181b);
|
|
/* border: 1px solid #5b3234; */
|
|
border: 1px solid #a8181b;
|
|
}
|
|
|
|
.buttonUnInstall:active {
|
|
background-color: #bd6568;
|
|
background-image: -webkit-linear-gradient(top, #bd6568, #905558);
|
|
border: 1px solid #7d5558;
|
|
}
|
|
|
|
.buttonUpdate {
|
|
background-color: #a198e2;
|
|
background-image: -webkit-linear-gradient(top, #5d88b4, #3a689c);
|
|
border: 1px solid #414245;
|
|
border-radius: 4px;
|
|
color: #fff;
|
|
float: right;
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
height: 15px;
|
|
margin: 24px 8px 0 0;
|
|
padding: 2px;
|
|
text-shadow: 0px 2px 0 rgba(0, 0, 0, 0.2);
|
|
letter-spacing: 0.5px;
|
|
width: 72px;
|
|
text-align: center;
|
|
line-height: 16px;
|
|
cursor: pointer;
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
.buttonUpdate:hover {
|
|
background-color: #6edffc;
|
|
background-image: -webkit-linear-gradient(top, #6edffc, #5cccf9);
|
|
border: 1px solid #b9e9fa;
|
|
}
|
|
|
|
.buttonUpdate:active {
|
|
background-color: #8cc670;
|
|
background-image: -webkit-linear-gradient(top, #8cc670, #6d955b);
|
|
border: 1px solid #687956;
|
|
}
|
|
|
|
|
|
|
|
|
|
/* ===================================================================== */
|
|
/* FOOTER */
|
|
/* ===================================================================== */
|
|
|
|
#footer {
|
|
position: fixed;
|
|
|
|
/* height is calculated by adding the heights and borders of the following elements:
|
|
/* #NvramFunctionalityBand 23px (inc 2px border) + #changeThemeContainer 60px (inc 2px border) + #FooterLinks 38px (inc 2px border) = 121px */
|
|
height: 139px; /* Must match bottom of #content */
|
|
/* Note: #BootLogTitleBar 35px (inc 2px border) + BootLogContainer height will be inserted when injecting bootlog */
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background-color: #000;
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
a:link, a:visited {
|
|
color: #BBB;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
color: #FFF;
|
|
}
|
|
|
|
#NvramFunctionalityBand {
|
|
width: 100%;
|
|
height: 21px;
|
|
border-top: 2px solid #333;
|
|
opacity: 0.95;
|
|
}
|
|
|
|
#nvramTextArea {
|
|
width: 90%;
|
|
margin: 1px 8px 3px 24px;
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
.highlightYellow {
|
|
color: #efd526;
|
|
}
|
|
|
|
#changeThemeContainer {
|
|
width: 100%;
|
|
height: auto;
|
|
border-top: 2px solid #333;
|
|
opacity: 0.95;
|
|
}
|
|
|
|
#changeThemeBandTitle {
|
|
width: 100%;
|
|
height: 21px;
|
|
opacity: 0.95;
|
|
}
|
|
|
|
#changeThemeBand {
|
|
width: 100%;
|
|
height: 24px;
|
|
border-top: 2px solid #333;
|
|
opacity: 0.95;
|
|
}
|
|
|
|
#changeThemeCurrentTheme {
|
|
width: 30%;
|
|
margin: 6px 8px 0px 24px;
|
|
float: left;
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
#changeThemeInstalled {
|
|
width: 30%;
|
|
margin: 6px 8px 0px 24px;
|
|
float: left;
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
#themePredictionTitle {
|
|
width: 40%;
|
|
float: left;
|
|
margin: 2px 0px 0px 24px;
|
|
/*-webkit-user-select: none;*/
|
|
}
|
|
|
|
#themePredictionTheme {
|
|
width: 20%;
|
|
float: left;
|
|
margin: 0px 0px 0px 4px;
|
|
/*-webkit-user-select: none;*/
|
|
}
|
|
|
|
/* ============================ */
|
|
/* Change theme control options */
|
|
/* ============================ */
|
|
|
|
.ctOptionDescription {
|
|
width: 80%;
|
|
float: left;
|
|
margin: 4px 0px 0px 24px;
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
color: #9bc762;
|
|
}
|
|
|
|
.ctOptionTitleHeader {
|
|
float: left;
|
|
margin: 4px 0px 0px 24px;
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
color: #ababab;
|
|
}
|
|
|
|
.ctOptionTitleResult {
|
|
width: 430px;
|
|
float: left;
|
|
margin: 4px 0px 0px 2px;
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
color: #FFF;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.ctOptionTitleResultNotAvailable {
|
|
width: 430px;
|
|
float: left;
|
|
margin: 4px 0px 0px 2px;
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
color: #FF0000;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.ctOptionEntryHeader {
|
|
float: left;
|
|
margin: 5px 2px 0px 24px;
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
color: #ababab;
|
|
}
|
|
|
|
.ctOptionEntryResult {
|
|
width: 230px;
|
|
float: left;
|
|
margin: 5px 0px 0px 2px;
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
color: #FFF;
|
|
}
|
|
|
|
.ctPredictionTitleHeader {
|
|
float: left;
|
|
margin: 4px 0px 0px 24px;
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
color: #ababab;
|
|
}
|
|
|
|
.ctPredictionTitleResult {
|
|
width: 447px;
|
|
float: left;
|
|
margin: 4px 0px 0px 2px;
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
color: #FFF;
|
|
}
|
|
|
|
/*
|
|
.ctOptionEntryResultNotAvailable {
|
|
width: 38%;
|
|
float: left;
|
|
margin: 4px 0px 0px 2px;
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
color: #FF0000;
|
|
}
|
|
*/
|
|
.ctOptionSetHeader {
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
color: #ababab;
|
|
position:absolute;
|
|
margin: 6px 0px 0px 67%;
|
|
}
|
|
|
|
#changeThemeSelector {
|
|
width: 92%;
|
|
float: left; /* right */
|
|
margin: 2px 0px 0px 24px;
|
|
/* text-align: right; */
|
|
}
|
|
|
|
#changeThemeSelector select {
|
|
width: 16%;
|
|
max-width: 98% !important;
|
|
}
|
|
|
|
select.changeThemeDropdown {
|
|
-webkit-appearance: none;
|
|
border: 0 !important;
|
|
/*outline: none;*/
|
|
color: #000;
|
|
-webkit-border-radius: 4px;
|
|
font-size: 12px;
|
|
padding: 0px 24px 2px 10px;
|
|
cursor: pointer;
|
|
background: #EEE url(../assets/dropdown_arrow_k.png) no-repeat right center;
|
|
background-size: 19px 19px;
|
|
opacity: 0.8;
|
|
float: right;
|
|
margin-right: 30px;
|
|
width: 138px;
|
|
}
|
|
|
|
select.changeThemeDropdown:disabled {
|
|
opacity: 0.3;
|
|
}
|
|
|
|
select.changeThemeDropdown:hover:enabled {
|
|
background: #EEE url(../assets/dropdown_arrow_k.png) no-repeat right center;
|
|
background-size: 19px 19px;
|
|
opacity: 1;
|
|
}
|
|
|
|
select.changeThemeDropdown:focus {
|
|
background: #EEE url(../assets/dropdown_arrow_k.png) no-repeat right center;
|
|
background-size: 19px 19px;
|
|
opacity: 1;
|
|
}
|
|
|
|
#FooterLinks {
|
|
width: 100%;
|
|
height: 36px;
|
|
border-top: 2px solid #333;
|
|
background-color: #737075;
|
|
background-image: -webkit-linear-gradient(top, rgba(9,10,9,1) 0%,rgba(20,22,22,1) 31%,rgba(27,31,29,1) 65%,rgba(7,7,7,1) 100%);
|
|
}
|
|
|
|
/* ===================================================================== */
|
|
/* TEXT CLASSES */
|
|
/* ===================================================================== */
|
|
|
|
.textTitle {
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
color: #AAA;
|
|
text-align:left;
|
|
}
|
|
|
|
.textBody {
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
color: #FFF;
|
|
text-align:left;
|
|
}
|
|
|
|
/*.textBodyRight {
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
color: #FFF;
|
|
text-align:right;
|
|
}*/
|
|
|
|
.textHeaderSmall {
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
color: #a1a1a1;
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
.textFreeSpace {
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
color: #3ef14b;
|
|
vertical-align: bottom;
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
.textThemeCount {
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
color: #FFF;
|
|
vertical-align: bottom;
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
.textThemeCountQuery {
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
color: #FFF;
|
|
text-align: right;
|
|
vertical-align: bottom;
|
|
margin-left:6px;
|
|
display: none;
|
|
cursor:pointer;
|
|
}
|
|
|
|
.textFooter {
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 12px;
|
|
color: #FFF;
|
|
text-align: center;
|
|
margin-top:10px;
|
|
}
|
|
|
|
.themeName {
|
|
color: #7bf4f5;
|
|
}
|
|
|
|
.themeAction {
|
|
color: #f3ce22;
|
|
}
|
|
|
|
.predictionText {
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
color: #9bc762;
|
|
}
|
|
|
|
.changeThemeSetTo {
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
color: #a1a1a1;
|
|
-webkit-user-select: none;
|
|
}
|
|
|
|
|
|
/* ===================================================================== */
|
|
/* COLOUR FILL CLASSES */
|
|
/* ===================================================================== */
|
|
|
|
.blackFill {
|
|
background-image: -webkit-linear-gradient(top, rgba(111,111,111,1) 0%,rgba(0,0,0,1) 100%);
|
|
}
|
|
|
|
.fillGrey {
|
|
background-image: -webkit-linear-gradient(top, rgba(247,247,247,1) 0%,rgba(142,142,142,1) 100%);
|
|
}
|
|
|
|
.bootlogBandFill {
|
|
background-image: -webkit-linear-gradient(top, #535353 0%,#202020 70%,#1c1c1c 75%,#363636 98%, #666666 100%);
|
|
}
|
|
|
|
.nvramFillWorking {
|
|
background-image: -webkit-linear-gradient(top, #67c334 0%, #428420 100%);
|
|
}
|
|
|
|
.nvramFillNotWorking {
|
|
background-image: -webkit-linear-gradient(top, #ab3bb3 0%, #742179 100%);
|
|
}
|
|
|
|
.nvramFillRed {
|
|
background-image: -webkit-linear-gradient(top, #df212a 0%, #921519 100%);
|
|
}
|
|
|
|
.fillDarkGrey {
|
|
background-image: -webkit-linear-gradient(top, #4b4e51, #2f3134);
|
|
}
|
|
|
|
.fillDarkerGrey {
|
|
background-image: -webkit-linear-gradient(top, #303234, #212121);
|
|
}
|
|
|
|
.fillVeryDarkGrey {
|
|
background-image: -webkit-linear-gradient(top, #181818, #121212);
|
|
}
|
|
|
|
/* ===================================================================== */
|
|
/* MESSAGE BOX */
|
|
/* ===================================================================== */
|
|
|
|
/*
|
|
The following overlay and box css is originally from a tutorial by Mary Lou
|
|
http://tympanus.net/codrops/2009/12/03/css-and-jquery-tutorial-overlay-with-slide-out-box/
|
|
*/
|
|
|
|
.overlay {
|
|
background:transparent url(../assets/overlay.png) repeat top left;
|
|
position:fixed;
|
|
top:0px;
|
|
bottom:0px;
|
|
left:0px;
|
|
right:0px;
|
|
z-index:100;
|
|
}
|
|
|
|
.overlayTwo {
|
|
background:transparent url(../assets/overlay.png) repeat top left;
|
|
position:fixed;
|
|
top:0px; /* same height as .meterTwo */
|
|
bottom:0px;
|
|
left:0px;
|
|
right:0px;
|
|
z-index:100;
|
|
}
|
|
|
|
.overlayThree {
|
|
background:transparent url(../assets/overlay.png) repeat top left;
|
|
position:fixed;
|
|
top:0px; /* same height as .meterThree */
|
|
bottom:0px;
|
|
left:0px;
|
|
right:0px;
|
|
z-index:100;
|
|
}
|
|
|
|
.box {
|
|
position:fixed;
|
|
top:-300px; /* Starting position = should match click function animate({'top':'300px'} in js CloseMessageBox() */
|
|
left:20%;
|
|
right:20%;
|
|
background-color:#fff;
|
|
color:#7F7F7F;
|
|
padding:20px;
|
|
border:2px solid #ccc;
|
|
-moz-border-radius: 10px;
|
|
-webkit-border-radius:10px;
|
|
-moz-box-shadow: 0 1px 5px #333;
|
|
-webkit-box-shadow: 0 1px 5px #333;
|
|
z-index:101;
|
|
}
|
|
|
|
a.boxclose {
|
|
float:right;
|
|
width:26px;
|
|
height:26px;
|
|
background:transparent url(../assets/cancel.png) repeat top left;
|
|
margin-top:-30px;
|
|
margin-right:-30px;
|
|
cursor:pointer;
|
|
}
|
|
|
|
a.boxclose:hover {
|
|
background:transparent url(../assets/cancel_o.png) repeat top left;
|
|
}
|
|
|
|
.box h1 {
|
|
margin:-20px -20px 0px -20px;
|
|
padding:10px 10px 10px 20px;
|
|
background-color:#1e8ec6;
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 24px;
|
|
color:#c4e0ee;
|
|
-moz-border-radius:10px 10px 0px 0px;
|
|
-webkit-border-top-left-radius: 10px;
|
|
-webkit-border-top-right-radius: 10px;
|
|
}
|
|
|
|
.box p a:link {
|
|
color: #3398ff;
|
|
}
|
|
|
|
.box p a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Using progress bars originally by Chris Coyier
|
|
/* http://css-tricks.com/css3-progress-bars/ */
|
|
|
|
.meter {
|
|
height: 32px;
|
|
position: relative;
|
|
}
|
|
|
|
.meter > span {
|
|
display: block;
|
|
height: 100%;
|
|
background-color: #cbd1d6;
|
|
background-image: -webkit-linear-gradient(#cbd1d6, #6d8396);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.meter > span:after, .animate > span > span {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0; left: 0; bottom: 0; right: 0;
|
|
background-image:
|
|
-webkit-gradient(linear, 0 0, 100% 100%,
|
|
color-stop(.25, rgba(255, 255, 255, .4)),
|
|
color-stop(.25, transparent), color-stop(.5, transparent),
|
|
color-stop(.5, rgba(255, 255, 255, .4)),
|
|
color-stop(.75, rgba(255, 255, 255, .4)),
|
|
color-stop(.75, transparent), to(transparent)
|
|
);
|
|
z-index: 1;
|
|
-webkit-background-size: 50px 50px;
|
|
-webkit-animation: move 2s linear infinite;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.meterTwo {
|
|
height: 32px; /* Same height as .overlayTwo */
|
|
position: relative;
|
|
z-index: 3;
|
|
}
|
|
|
|
.meterTwo > span {
|
|
display: block;
|
|
height: 100%;
|
|
background-color: #cbd1d6;
|
|
/* Use http://www.colorzilla.com/gradient-editor/ for gradient */
|
|
background-image: -webkit-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.meterTwo > span:after, .animate > span > span {
|
|
|
|
font-family: 'Roboto', sans-serif;
|
|
font-weight: bold;
|
|
font-size: 12px;
|
|
color: #FFF;
|
|
padding: 8px 0px 0px 20px;
|
|
content: "Refreshing Interface....";
|
|
|
|
position: absolute;
|
|
top: 0; left: 0; bottom: 0; right: 0;
|
|
background-image:
|
|
-webkit-gradient(linear, 0 0, 100% 100%,
|
|
color-stop(.25, rgba(255, 255, 255, .4)),
|
|
color-stop(.25, transparent), color-stop(.5, transparent),
|
|
color-stop(.5, rgba(255, 255, 255, .4)),
|
|
color-stop(.75, rgba(255, 255, 255, .4)),
|
|
color-stop(.75, transparent), to(transparent)
|
|
);
|
|
/*z-index: 1;*/
|
|
-webkit-background-size: 50px 50px;
|
|
-webkit-animation: move 2s linear infinite;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.meterThree {
|
|
height: 32px; /* Same height as .overlayThree */
|
|
position: relative;
|
|
z-index: 3;
|
|
}
|
|
|
|
.meterThree > span {
|
|
display: block;
|
|
height: 100%;
|
|
background-color: #cbd1d6;
|
|
/* Use http://www.colorzilla.com/gradient-editor/ for gradient */
|
|
background-image: -webkit-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.meterThree > span:after, .animate > span > span {
|
|
|
|
font-family: 'Roboto', sans-serif;
|
|
font-weight: bold;
|
|
font-size: 12px;
|
|
color: #FFF;
|
|
padding: 8px 0px 0px 20px;
|
|
content: "Checking for any updates for the installed themes...";
|
|
|
|
position: absolute;
|
|
top: 0; left: 0; bottom: 0; right: 0;
|
|
background-image:
|
|
-webkit-gradient(linear, 0 0, 100% 100%,
|
|
color-stop(.25, rgba(255, 255, 255, .4)),
|
|
color-stop(.25, transparent), color-stop(.5, transparent),
|
|
color-stop(.5, rgba(255, 255, 255, .4)),
|
|
color-stop(.75, rgba(255, 255, 255, .4)),
|
|
color-stop(.75, transparent), to(transparent)
|
|
);
|
|
z-index: 2;
|
|
-webkit-background-size: 50px 50px;
|
|
-webkit-animation: move 2s linear infinite;
|
|
overflow: hidden;
|
|
}
|
|
|
|
@-webkit-keyframes move {
|
|
0% {
|
|
background-position: 0 0;
|
|
}
|
|
100% {
|
|
background-position: 50px 50px;
|
|
}
|
|
}
|
|
|
|
.feedbackButton {
|
|
background-color: #a198e2;
|
|
background-image: -webkit-linear-gradient(top, #a198e2, #9488d6);
|
|
border: 1px solid #9686dd;
|
|
border-radius: 4px;
|
|
color: #ffffff;
|
|
float: right;
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
height: 20px;
|
|
margin: 24px 8px 0 0;
|
|
padding: 2px;
|
|
text-shadow: -1px 1px 0 rgba(0, 0, 0, 0.3);
|
|
width: 72px;
|
|
text-align: center;
|
|
line-height: 20px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.feedbackButton:hover {
|
|
background-color: #c7c1ee;
|
|
background-image: -moz-linear-gradient(center top , #c7c1ee, #bfb8e6);
|
|
background-image: -webkit-linear-gradient(top, #c7c1ee, #bfb8e6);
|
|
border: 1px solid #c0b6eb;
|
|
}
|
|
|
|
|
|
/* ===================================================================== */
|
|
/* TOOLTIP */
|
|
/* ===================================================================== */
|
|
|
|
/* Hover tooltips */
|
|
.field-tip {
|
|
position:relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.field-tip .tip-content {
|
|
position:absolute;
|
|
top:21px; /* - top padding */
|
|
right:9999px;
|
|
width:200px;
|
|
height: auto;
|
|
margin-right:-220px; /* width + left/right padding */
|
|
border-radius: 4px;
|
|
padding:10px;
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
color:#333;
|
|
background:#DDD;
|
|
opacity:0;
|
|
-webkit-transition:opacity 250ms ease-out;
|
|
z-index: 2;
|
|
}
|
|
|
|
.field-tip:hover .tip-content {
|
|
right: 100px; /* half the width */
|
|
opacity:1;
|
|
} |