From 1d4943567522070ed960f0021fe9befebbccf292 Mon Sep 17 00:00:00 2001 From: Mark McDowall Date: Sat, 20 Apr 2013 23:25:24 -0700 Subject: [PATCH] Less is more --- UI/AddSeries/addSeries.css | 74 --- UI/AddSeries/addSeries.less | 61 ++ UI/Content/base.css | 84 --- UI/Content/base.less | 74 +++ UI/Content/{form.css => form.less} | 31 + UI/Content/menu.css | 7 - UI/Content/menu.less | 8 + UI/Content/settings.quality.css | 3 - UI/Content/settings.quality.less | 3 + UI/Content/theme.css | 891 ----------------------------- UI/Content/theme.less | 713 +++++++++++++++++++++++ 11 files changed, 890 insertions(+), 1059 deletions(-) delete mode 100644 UI/AddSeries/addSeries.css create mode 100644 UI/AddSeries/addSeries.less delete mode 100644 UI/Content/base.css create mode 100644 UI/Content/base.less rename UI/Content/{form.css => form.less} (53%) delete mode 100644 UI/Content/menu.css create mode 100644 UI/Content/menu.less delete mode 100644 UI/Content/settings.quality.css create mode 100644 UI/Content/settings.quality.less delete mode 100644 UI/Content/theme.css create mode 100644 UI/Content/theme.less diff --git a/UI/AddSeries/addSeries.css b/UI/AddSeries/addSeries.css deleted file mode 100644 index 0f4b9017f..000000000 --- a/UI/AddSeries/addSeries.css +++ /dev/null @@ -1,74 +0,0 @@ -.nz-input-large { - margin-top: 20px; - margin-bottom: 40px; -} - -.nz-input-large input { - height: 50px; -} - -.nz-input-large *[class*='icon-'] { - font-size: 28px; - height: 30px; - width: 40px; - padding-top: 14px; - padding-left: 10px; -} - -.result-list { - font-size: 14px; - text-align: left; - padding-bottom: 30px; -} - -.search-item { - padding-bottom: 20px; -} - -.search-item a:hover { - text-decoration: none; -} - -.search-item a { - color: #343434; -} - -.search-item select { - font-size: 16px; -} - -/*Existing*/ -.unmapped-folder-view { - background: #fcf8e3; - margin-top: 20px; - padding: 20px; -} - -.unmapped-folder-view .folder-header { - font-weight: 300; -} - -.unmapped-folder-view .folder-header input { - margin-bottom: 0; -} - -.unmapped-folder-view .folder-header select { - margin-bottom: 0; - font-size: 16px; -} - -.existing-root-folder-view h1 { - padding: 10px 0 20px 0; -} - -.folder-name-matches { - padding-left: 20px; - padding-top: 10px; -} - -.img-polaroid { - min-width: 138px; - min-height: 203px; - max-width: 138px; - max-height: 203px; -} \ No newline at end of file diff --git a/UI/AddSeries/addSeries.less b/UI/AddSeries/addSeries.less new file mode 100644 index 000000000..054fbb338 --- /dev/null +++ b/UI/AddSeries/addSeries.less @@ -0,0 +1,61 @@ +.result-list { + font-size: 14px; + text-align: left; + padding-bottom: 30px; +} +.existing-root-folder-view { + h1 { + padding: 10px 0 20px 0; + } +} +.nz-input-large { + margin-top: 20px; + margin-bottom: 40px; + *[class*='icon-'] { + font-size: 28px; + height: 30px; + width: 40px; + padding-top: 14px; + padding-left: 10px; + } + input { + height: 50px; + } +} +.folder-name-matches { + padding-left: 20px; + padding-top: 10px; +} +.img-polaroid { + min-width: 138px; + min-height: 203px; + max-width: 138px; + max-height: 203px; +} +.unmapped-folder-view { + background: #fcf8e3; + margin-top: 20px; + padding: 20px; + .folder-header { + font-weight: 300; + select { + margin-bottom: 0; + font-size: 16px; + } + input { + margin-bottom: 0; + } + } +} +.search-item { + padding-bottom: 20px; + a { + color: #343434; + } + a:hover { + text-decoration: none; + } + select { + font-size: 16px; + } +} diff --git a/UI/Content/base.css b/UI/Content/base.css deleted file mode 100644 index b596ba63b..000000000 --- a/UI/Content/base.css +++ /dev/null @@ -1,84 +0,0 @@ -/*make the main scrollbar always visible*/ -html { - overflow: -moz-scrollbars-vertical; - overflow-y: scroll; -} - -#localSeriesLookup { - width: 220px; - border: 0px; - background: rgb(75, 75, 75); - color: rgb(169, 169, 169); - padding: 4px; - font-size: 13px; -} - -.input-append .add-on { - margin-left: 0; -} - -#footer-region { - font-size: 16px; - text-decoration: none; - font-weight: lighter; - margin: 20px 0 30px 0; -} - -#footer-region a:hover { - text-decoration: underline; -} - -.nz-spinner { - font-size: 56px; - text-align: center; - padding: 30px; -} - -#notification-region .alert { - margin: 10px; -} - -#notification-region i { - padding-right: 10px; -} - -#notification-region pre { - font-size: 12px; -} - -#in-sub-nav ul { - margin: 0 0 80px 0; -} - -.line > [class^="icon-"], .line > [class*=" icon-"] { - margin-top: 1em; - height: 1em; - line-height: 1em; -} - -/* Progress Bar Text */ -.progress { - width: 125px; - position: relative; - margin-bottom: 2px; -} - -.progress .bar { - position: absolute; - overflow: hidden; -} - -.progress .progressbar-back-text { - position: absolute; - width: 100%; - height: 100%; - font-size: 12px; - text-align: center; -} - -.progress .progressbar-front-text { - display: block; - width: 125px; - font-size: 12px; - text-align: center; -} \ No newline at end of file diff --git a/UI/Content/base.less b/UI/Content/base.less new file mode 100644 index 000000000..54cc3263f --- /dev/null +++ b/UI/Content/base.less @@ -0,0 +1,74 @@ +.progress { + width: 125px; + position: relative; + margin-bottom: 2px; + .progressbar-back-text { + position: absolute; + width: 100%; + height: 100%; + font-size: 12px; + text-align: center; + } + .progressbar-front-text { + display: block; + width: 125px; + font-size: 12px; + text-align: center; + } + .bar { + position: absolute; + overflow: hidden; + } +} +html { + overflow: -moz-scrollbars-vertical; + overflow-y: scroll; +} +.input-append { + .add-on { + margin-left: 0; + } +} +.line &>[class^="icon-"], .line &>[class*=" icon-"] { + margin-top: 1em; + height: 1em; + line-height: 1em; +} +#localSeriesLookup { + width: 220px; + border: 0px; + background: rgb(75, 75, 75); + color: rgb(169, 169, 169); + padding: 4px; + font-size: 13px; +} +#footer-region { + font-size: 16px; + text-decoration: none; + font-weight: lighter; + margin: 20px 0 30px 0; + a:hover { + text-decoration: underline; + } +} +#in-sub-nav { + ul { + margin: 0 0 80px 0; + } +} +#notification-region { + pre { + font-size: 12px; + } + .alert { + margin: 10px; + } + i { + padding-right: 10px; + } +} +.nz-spinner { + font-size: 56px; + text-align: center; + padding: 30px; +} diff --git a/UI/Content/form.css b/UI/Content/form.less similarity index 53% rename from UI/Content/form.css rename to UI/Content/form.less index 73726dce2..fa8414ad7 100644 --- a/UI/Content/form.css +++ b/UI/Content/form.less @@ -13,6 +13,37 @@ .form-horizontal .controls i.danger { color: #b94a48; } +.form-horizontal { + .controls { + i.danger { + color: #b94a48; + } + i.warning { + color: #f89406; + } + i { + font-size: 16px; + color: #595959; + cursor: default; + } + } +} +.switch { + float: left; +} +.text-area-help { + display: block; + color: #777777; + font-size: 12px; +} +textarea.nzb-restrictions { + width: 260px; +} +.help-inline-checkbox { + float: left; + padding-left: 7px; + padding-top: 3px; +} .help-inline-checkbox { float: left; diff --git a/UI/Content/menu.css b/UI/Content/menu.css deleted file mode 100644 index a7e8b263f..000000000 --- a/UI/Content/menu.css +++ /dev/null @@ -1,7 +0,0 @@ -#main-menu-region i:before { - font-size: 35px; -} - -#main-menu-region i { - width: 40px; -} \ No newline at end of file diff --git a/UI/Content/menu.less b/UI/Content/menu.less new file mode 100644 index 000000000..353e4d91d --- /dev/null +++ b/UI/Content/menu.less @@ -0,0 +1,8 @@ +#main-menu-region { + i:before { + font-size: 35px; + } + i { + width: 40px; + } +} \ No newline at end of file diff --git a/UI/Content/settings.quality.css b/UI/Content/settings.quality.css deleted file mode 100644 index 98a764cfb..000000000 --- a/UI/Content/settings.quality.css +++ /dev/null @@ -1,3 +0,0 @@ -.quality-size-item { - padding-left: 10px; -} \ No newline at end of file diff --git a/UI/Content/settings.quality.less b/UI/Content/settings.quality.less new file mode 100644 index 000000000..8a74e00a7 --- /dev/null +++ b/UI/Content/settings.quality.less @@ -0,0 +1,3 @@ +.quality-size-item { + padding-left: 10px; +} \ No newline at end of file diff --git a/UI/Content/theme.css b/UI/Content/theme.css deleted file mode 100644 index 231baef4a..000000000 --- a/UI/Content/theme.css +++ /dev/null @@ -1,891 +0,0 @@ -body { - background-color: #252525; - background-image: url('../content/images/black_linen_v2.png');s -} - -body p { - font-size: 0.9em; -} - -body p.sub { - color: #999999; -} - -body h1, body h2, body h3, body h4, body h5, body h6 { - text-transform: uppercase; - font-weight: 300; -} - -.page { - width: 1210px; - min-width: 1210px; - margin: auto; - background-color: #ffffff; - border-radius: 6px; - margin-top: -70px; - padding: 20px 0px; - box-shadow: 0 0 6px rgba(0, 0, 0, 0.1); -} - -.page .header { - padding-bottom: 10px; - margin-bottom: 20px; - border-bottom: 1px solid #eeeeee; -} - -#in-nav { - background-color: white; - background-repeat: repeat; - height: 50px; - padding-top: 10px; -} - -#in-nav ul { - position: relative; - top: 10px; -} - -#in-nav ul li { - list-style-type: none; - display: inline; -} - -#in-nav ul li a { - padding: 10px; -} - -#in-sub-nav { - background-color: #333333; - -moz-box-shadow: inset 0px 0px 10px #111111; - -webkit-box-shadow: inset 0px 0px 10px #111111; - box-shadow: inset 0px 0px 10px #111111; -} - -#in-sub-nav ul { - text-align: center; - margin-bottom: 80px; -} - -#in-sub-nav li { - list-style-type: none; - display: inline-block; -} - -#in-sub-nav li a { - display: block; - border-radius: 6px; - padding: 15px 10px 5px; - min-height: 56px; - min-width: 64px; - margin: 20px 10px 10px; - color: #ffffff; - font-weight: 100; -} - -#in-sub-nav li a:hover, #in-sub-nav li a.active { - background-color: #555555; - text-decoration: none; -} - -#in-sub-nav li span.label.pull-right { - position: relative; - top: 24px; - right: 14px; -} - -footer { - padding-top: 20px; - padding-bottom: 20px; - color: #999999; -} - -footer a { - color: #999999; -} - -.divide { - border-top: 1px solid #eeeeee; - margin-top: 40px; - padding-top: 40px; -} - -.small-divide { - border-top: 1px solid #eeeeee; - margin-top: 20px; - padding-top: 20px; -} - -.batch { - background-image: url(images/white-batch-32.png); - display: inline-block; - height: 32px; - width: 32px; -} - -.home { - background-position: -128px -96px; -} - -.star { - background-position: -192px -96px; -} - -.forms { - background-position: -96px -32px; -} - -.stream { - background-position: 0 -64px; -} - -.tables { - background-position: -32px -32px; -} - -.settings { - background-position: -288px -128px; -} - -.quill { - background-position: -288px 0px; -} - -.users { - background-position: 0 -96px; -} - -.plane { - background-position: -256px -96px; -} - -.calendar { - background-position: -160px -128px; -} - -.batch-big { - background-image: url(images/white-batch-64.png); - display: inline-block; - height: 64px; - width: 64px; -} - -.b-wifi { - background-position: -256px -64px; -} - -.b-code { - background-position: -64px 0px; -} - -.b-comment { - background-position: -192px -256px; -} - -.b-flag { - background-position: -384px -256px; -} - -.b-database { - background-position: -256px 0px; -} - -.b-alarm { - background-position: -384px 0px; -} - -/* ============== messages ============== */ -.message-sidebar { - border-right: 1px solid #eeeeee; - margin: -20px; - margin-right: 0; - overflow: auto; - height: 700px; -} - -.message-sidebar a.message-preview { - display: block; - background-color: #f6f6f6; - border-bottom: 1px solid #eeeeee; - padding: 10px 20px; -} - -.message-sidebar a.message-preview h4 { - font-weight: 400; - text-transform: none; -} - -.message-sidebar a.message-preview p, .message-sidebar a.message-preview h5 { - color: #999999; -} - -.message-sidebar a.new { - background-color: #ffffff; -} - -.message-sidebar a.active { - background-color: #008dcd; - color: #ffffff; -} - -.message-sidebar a.active p, .message-sidebar a.active h5 { - color: rgba(255, 255, 255, 0.8); -} - -.message-sidebar a:hover { - text-decoration: none; - cursor: pointer; -} - -.message-sidebar .load-more { - text-align: center; -} - -.message-sidebar .load-more a { - padding: 20px; - display: block; -} - -.messages h4 { - text-transform: none; - font-weight: 400; -} - -.messages .message { - padding-bottom: 20px; - border-bottom: 1px solid #eeeeee; - margin-bottom: 20px; -} - -.messages .message h5 { - font-weight: 300; -} - -.messages .message-body { - padding-left: 80px; -} - -.messages .message-body textarea { - height: 80px; - margin-right: 20px; - width: 96%; -} - -/* ============== login ============== */ -.login { - padding: 20px; - margin-top: 40px; - margin-bottom: 80px; -} - -/* ============== sidebar ============== */ -.sidebar { - border-top: 1px solid #eeeeee; -} - -.sidebar ul { - padding: 0; - margin: 0; -} - -.sidebar ul li { - list-style-type: none; -} - -.sidebar ul li a { - display: block; - padding: 10px; - border-bottom: 1px solid #eeeeee; - text-transform: uppercase; -} - -.sidebar ul li a:hover { - background-color: #eeeeee; - /* color: #FFF;*/ - text-decoration: none; -} - -.sidebar ul li ul { - background-color: #f6f6f6; - box-shadow: inset 0 1px 10px #e0e0e0; -} - -/* ============== stat lists ============== */ -ul.stat-list { - margin: 0; -} - -ul.stat-list li { - list-style-type: none; -} - -ul.stat-list li label, ul.stat-list li h4, ul.stat-list li small, ul.stat-list li p { - display: inline-block; -} - -ul.stat-list li label { - height: 32px; - width: 32px; - border-radius: 2px; - text-align: center; - vertical-align: middle; - margin-right: 10px; -} - -ul.stat-list li label i { - margin-top: 8px; -} - -ul.stat-list li h4 { - font-weight: 600; - margin-right: 10px; - min-width: 30px; -} - -ul.stat-list li h4.sub { - color: #999999; - font-weight: 300; -} - -.progress-small { - height: 8px; -} - -/* ============== widgets ============== */ -.widget { - background-color: #eeeeee; - color: #555555; - padding: 20px; - border-radius: 6px; - margin-bottom: 20px; -} - -.widget td.bar-label { - width: 20%; - text-align: right; - padding-right: 20px; - color: #999999; - font-weight: 300; -} - -.widget td.bar-number, .widget td.bar-percent { - width: 15%; - font-weight: 600; -} - -.widget td.bar-percent span { - font-weight: 300; -} - -.widget td .progress { - margin-top: 10px; - margin-bottom: 10px; - border-radius: 4px; - display: block; - width: 100%; - height: 8px; - overflow: hidden; -} - -/* ============== sparks ============== */ -.spark { - margin-bottom: 20px; -} - -.spark h4 { - font-weight: 500; -} - -.spark h4.sub { - color: #999999; - font-weight: 300; -} - -.spark h4.sub span.minus { - color: #ea494a; - float: right; -} - -.spark h4.sub span.plus { - color: #4cb158; - float: right; -} - -.spark .sparklines { - float: right; -} - -/* ============== knobs ============== */ -.knob { - text-align: center; -} - -/* ============== table-panel ============== */ -.table-panel i { - margin: 4px; -} - -.table-panel table { - border-top: 1px solid #eeeeee; -} - -/* ============== peity ============== */ -.peity { - margin-bottom: 20px; -} - -.peity canvas { - margin-right: 10px; -} - -.peity h4 { - display: inline-block; - font-weight: 600; - min-width: 30px; - margin: 0; -} - -.peity h4.sub { - font-weight: 300; - color: #999999; -} - -/* ============== panels ============== */ -.panel { - width: 150px; - background-color: #eeeeee; - border-radius: 6px; - text-align: center; - display: inline-block; - margin-bottom: 20px; - margin-right: 20px; -} - -.panel .top { - border-top-left-radius: 6px; - border-top-right-radius: 6px; - background-color: #555555; - padding-top: 20px; -} - -.panel .top i { - display: block; - margin: 0px auto 20px; -} - -.panel .top h6 { - display: inline; - background-color: #555555; - position: relative; - top: 5px; - padding: 6px 12px; - border-radius: 30px; - color: #ffffff; - font-weight: 600; - font-size: 0.7em; -} - -.panel .bottom { - padding-top: 20px; - border-bottom-left-radius: 6px; - border-bottom-right-radius: 6px; - text-align: center; - border-top: none; -} - -.panel .bottom h2 { - font-weight: 600; - margin: 0; -} - -.panel .bottom h6 { - font-size: 0.7em; - font-weight: 600; - position: relative; - bottom: 10px; - color: #555555; -} - -.panel .warning, .panel .warning h6 { - background-color: #ffa93c; - /* box-shadow: inset 0 0 10px lighten($warning, 8%); - border: 1px solid darken($warning, 20%)*/ -} - -.panel .success, .panel .success h6 { - background-color: #4cb158; - /* box-shadow: inset 0 0 10px lighten($success, 8%); - border: 1px solid darken($success, 20%)*/ -} - -.panel .danger, .panel .danger h6 { - background-color: #ea494a; - /* box-shadow: inset 0 0 10px lighten($danger, 8%); - border: 1px solid darken($danger, 20%)*/ -} - -.panel .info, .panel .info h6 { - background-color: #14b8d4; - /* box-shadow: inset 0 0 10px lighten($info, 8%); - border: 1px solid darken($info, 20%)*/ -} - -.panel .primary, .panel .primary h6 { - background-color: #007ccd; - /* box-shadow: inset 0 0 10px lighten($primary, 8%); - border: 1px solid darken($primary, 20%)*/ -} - -.panel .purple, .panel .purple h6 { - background-color: #7932ea; - /* box-shadow: inset 0 0 10px lighten($purple, 8%); - border: 1px solid darken($purple, 20%)*/ -} - -/* ============== profile ============== */ -.stats { - text-align: center; -} - -.stats .stat { - background-color: #eeeeee; - color: #555555; - padding: 10px; - border-radius: 6px; - margin-bottom: 20px; - text-align: center; -} - -.stats .stat h2 { - font-weight: 600; -} - -.stats .stat h6 { - margin-top: -10px; -} - -.stats .warning { - background-color: #ffa93c; - color: #ffffff; -} - -.stats .success { - background-color: #4cb158; - color: #ffffff; -} - -.stats .danger { - background-color: #ea494a; - color: #ffffff; -} - -.stats .info { - background-color: #14b8d4; - color: #ffffff; -} - -.stats .primary { - background-color: #007ccd; - color: #ffffff; -} - -.stats .purple { - background-color: #7932ea; - color: #ffffff; -} - -.stats .inverse { - background-color: #333333; - color: #ffffff; -} - -.rating-star, .no-star, .half-star { - display: inline-block; - height: 16px; - width: 16px; - background-image: url(../img/stars.png); -} - -.no-star { - background-position: 0 -16px; -} - -.half-star { - background-position: 0 -32px; -} - -.profile-sidebar ul { - margin: 0; - margin-top: 20px; -} - -.profile-sidebar ul li { - list-style-type: none; - border-top: 1px solid #eeeeee; - padding: 10px 0px; -} - -.profile-sidebar ul li i { - margin-right: 5px; -} - -/* ============== tables ============== */ -.tables code { - display: inline-block; - margin: 2px; -} - -/* ============== stream ============== */ -.filters input[type="checkbox"] { - float: left; - margin-right: 10px; -} - -.filters h5 { - margin-top: 20px; - padding-bottom: 5px; - border-bottom: 1px solid #eeeeee; -} - -.filters span { - color: #999999; -} - -.stream .item { - border-bottom: 1px solid #eeeeee; - padding: 10px 0px 30px 60px; -} - -.stream .item .stream-icon { - display: inline-block; - background-color: #cccccc; - border-radius: 4px; - height: 40px; - width: 40px; - text-align: center; - margin-left: -40px; - margin-bottom: -40px; - position: relative; - top: 15px; - right: 20px; - float: left; -} - -.stream .item .stream-icon i { - margin-top: 12px; -} - -.stream .item .stream-success { - background-color: #4cb158; -} - -.stream .item .stream-danger { - background-color: #ea494a; -} - -.stream .item .stream-warning { - background-color: #ffa93c; -} - -.stream .item .stream-info { - background-color: #14b8d4; -} - -.stream .item .avatar { - border-radius: 4px; - margin-left: -40px; - margin-bottom: -40px; - height: 40px; - position: relative; - top: 15px; - right: 20px; - float: left; -} - -.stream .item h4 { - margin-bottom: 6px; -} - -.stream .item p { - color: #777777; -} - -.stream .item p.date { - padding: 0; - float: right; - margin-top: 10px; -} - -/* ============== faq ============== */ -.qa { - border-bottom: 1px solid #eeeeee; - padding-bottom: 20px; - margin-bottom: 20px; - margin-top: 20px; -} - -.qa h4 { - text-transform: none; - font-weight: 400; -} - -/* ============== calendar ============== */ -.event { - display: inline-block; - width: 100%; - margin-bottom: 10px; - border-top: 1px solid #eeeeee; - padding-top: 10px; -} - -.event p { - color: #999999; -} - -.event h4 { - text-transform: none !important; - font-weight: 500; - color: #008dcd; - margin: 5px 0px; -} - -.event .date { - text-align: center; - display: inline-block; - border-left: 4px solid #eeeeee; - padding-left: 16px; - float: left; - margin-right: 20px; -} - -.event .date h1 { - font-weight: 500; - line-height: 0.8em; -} - -.event .date h4 { - line-height: 1em; - color: #555555; - font-weight: 300; -} - -.event .success { - border-color: #4cb158; -} - -.event .danger { - border-color: #ea494a; -} - -.event .info { - border-color: #14b8d4; -} - -.event .primary { - border-color: #007ccd; -} - -.event .warning { - border-color: #ffa93c; -} - -.event .purple { - border-color: #7932ea; -} - -.event .inverse { - border-color: #333333; -} - -#events .load-more { - text-align: center; - overflow: auto; - height: 600px; -} - -#calendar h2 { - font-size: 17.5px; -} - -#calendar th { - background-color: #eeeeee; -} - -#calendar th, #calendar td { - border-color: #eeeeee; -} - -#calendar .fc-event-skin { - background-color: #007ccd; - border: 1px solid #007ccd; - border-radius: 4px; - text-align: center; -} - -#calendar .success { - border-color: #4cb158; - background-color: #4cb158; -} - -#calendar .danger { - border-color: #ea494a; - background-color: #ea494a; -} - -#calendar .info { - border-color: #14b8d4; - background-color: #14b8d4; -} - -#calendar .primary { - border-color: #007ccd; - background-color: #007ccd; -} - -#calendar .warning { - border-color: #ffa93c; - background-color: #ffa93c; -} - -#calendar .purple { - border-color: #7932ea; - background-color: #7932ea; -} - -#calendar .inverse { - border-color: #333333; - background-color: #333333; -} - -#calendar .fc-state-highlight { - background: rgba(20, 184, 212, .2); -} - -/* ============== tags ============== */ -.tag { - display: inline-block; - background-color: #eeeeee; - padding: 3px 8px; - margin-right: 5px; - margin-bottom: 5px; - border-radius: 4px; -} - -.tag:hover { - background-color: #008dcd; - color: #ffffff; - text-decoration: none; -} - -/* ============== settings ============== */ -.settings-group { - margin-top: 40px; -} - -/* ============== popover ============== */ -.popover { - width: 276px; -} - -.popover-title { - text-transform: none; -} \ No newline at end of file diff --git a/UI/Content/theme.less b/UI/Content/theme.less new file mode 100644 index 000000000..5d48f36db --- /dev/null +++ b/UI/Content/theme.less @@ -0,0 +1,713 @@ +.settings-group { + margin-top: 40px; +} +.tag:hover { + background-color: #008dcd; + color: #ffffff; + text-decoration: none; +} +.panel .danger, .panel .danger h6 { + background-color: #ea494a; +} +#in-nav { + background-color: white; + background-repeat: repeat; + height: 50px; + padding-top: 10px; + ul { + position: relative; + top: 10px; + li { + list-style-type: none; + display: inline; + a { + padding: 10px; + } + } + } +} +#calendar th, #calendar td { + border-color: #eeeeee; +} +.panel .success, .panel .success h6 { + background-color: #4cb158; +} +.panel .warning, .panel .warning h6 { + background-color: #ffa93c; +} +.panel { + width: 150px; + background-color: #eeeeee; + border-radius: 6px; + text-align: center; + display: inline-block; + margin-bottom: 20px; + margin-right: 20px; + .bottom { + padding-top: 20px; + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + text-align: center; + border-top: none; + h6 { + font-size: 0.7em; + font-weight: 600; + position: relative; + bottom: 10px; + color: #555555; + } + h2 { + font-weight: 600; + margin: 0; + } + } + .top { + border-top-left-radius: 6px; + border-top-right-radius: 6px; + background-color: #555555; + padding-top: 20px; + h6 { + display: inline; + background-color: #555555; + position: relative; + top: 5px; + padding: 6px 12px; + border-radius: 30px; + color: #ffffff; + font-weight: 600; + font-size: 0.7em; + } + i { + display: block; + margin: 0px auto 20px; + } + } +} +.peity { + margin-bottom: 20px; + h4 { + display: inline-block; + font-weight: 600; + min-width: 30px; + margin: 0; + } + canvas { + margin-right: 10px; + } + h4.sub { + font-weight: 300; + color: #999999; + } +} +.star { + background-position: -192px -96px; +} +.small-divide { + border-top: 1px solid #eeeeee; + margin-top: 20px; + padding-top: 20px; +} +body { + background-color: #252525; + background-image: url('../content/images/black_linen_v2.png'); + p.sub { + color: #999999; + } + p { + font-size: 0.9em; + } +} +.popover { + width: 276px; +} +.tag { + display: inline-block; + background-color: #eeeeee; + padding: 3px 8px; + margin-right: 5px; + margin-bottom: 5px; + border-radius: 4px; +} +#calendar { + .primary { + border-color: #007ccd; + background-color: #007ccd; + } + .fc-event-skin { + background-color: #007ccd; + border: 1px solid #007ccd; + border-radius: 4px; + text-align: center; + } + .info { + border-color: #14b8d4; + background-color: #14b8d4; + } + .fc-state-highlight { + background: rgba(20, 184, 212, .2); + } + .inverse { + border-color: #333333; + background-color: #333333; + } + .warning { + border-color: #ffa93c; + background-color: #ffa93c; + } + .danger { + border-color: #ea494a; + background-color: #ea494a; + } + th { + background-color: #eeeeee; + } + .purple { + border-color: #7932ea; + background-color: #7932ea; + } + .success { + border-color: #4cb158; + background-color: #4cb158; + } + h2 { + font-size: 17.5px; + } +} +.event { + display: inline-block; + width: 100%; + margin-bottom: 10px; + border-top: 1px solid #eeeeee; + padding-top: 10px; + .primary { + border-color: #007ccd; + } + .info { + border-color: #14b8d4; + } + h4 { + text-transform: none !important; + font-weight: 500; + color: #008dcd; + margin: 5px 0px; + } + .inverse { + border-color: #333333; + } + .warning { + border-color: #ffa93c; + } + p { + color: #999999; + } + .danger { + border-color: #ea494a; + } + .date { + text-align: center; + display: inline-block; + border-left: 4px solid #eeeeee; + padding-left: 16px; + float: left; + margin-right: 20px; + h4 { + line-height: 1em; + color: #555555; + font-weight: 300; + } + h1 { + font-weight: 500; + line-height: 0.8em; + } + } + .purple { + border-color: #7932ea; + } + .success { + border-color: #4cb158; + } +} +.profile-sidebar { + ul { + margin: 0; + margin-top: 20px; + li { + list-style-type: none; + border-top: 1px solid #eeeeee; + padding: 10px 0px; + i { + margin-right: 5px; + } + } + } +} +.table-panel { + table { + border-top: 1px solid #eeeeee; + } + i { + margin: 4px; + } +} +.progress-small { + height: 8px; +} +.calendar { + background-position: -160px -128px; +} +.quill { + background-position: -288px 0px; +} +.stream { + background-position: 0 -64px; + .item { + border-bottom: 1px solid #eeeeee; + padding: 10px 0px 30px 60px; + h4 { + margin-bottom: 6px; + } + p.date { + padding: 0; + float: right; + margin-top: 10px; + } + .stream-danger { + background-color: #ea494a; + } + p { + color: #777777; + } + .stream-info { + background-color: #14b8d4; + } + .stream-success { + background-color: #4cb158; + } + .stream-icon { + display: inline-block; + background-color: #cccccc; + border-radius: 4px; + height: 40px; + width: 40px; + text-align: center; + margin-left: -40px; + margin-bottom: -40px; + position: relative; + top: 15px; + right: 20px; + float: left; + i { + margin-top: 12px; + } + } + .avatar { + border-radius: 4px; + margin-left: -40px; + margin-bottom: -40px; + height: 40px; + position: relative; + top: 15px; + right: 20px; + float: left; + } + .stream-warning { + background-color: #ffa93c; + } + } +} +.forms { + background-position: -96px -32px; +} +.filters { + h5 { + margin-top: 20px; + padding-bottom: 5px; + border-bottom: 1px solid #eeeeee; + } + input[type="checkbox"] { + float: left; + margin-right: 10px; + } + span { + color: #999999; + } +} +.panel .primary, .panel .primary h6 { + background-color: #007ccd; +} +.panel .info, .panel .info h6 { + background-color: #14b8d4; +} +.spark { + margin-bottom: 20px; + h4 { + font-weight: 500; + } + .sparklines { + float: right; + } + h4.sub { + color: #999999; + font-weight: 300; + span.minus { + color: #ea494a; + float: right; + } + span.plus { + color: #4cb158; + float: right; + } + } +} +.widget td.bar-number, .widget td.bar-percent { + width: 15%; + font-weight: 600; +} +ul.stat-list { + margin: 0; + li { + list-style-type: none; + label { + height: 32px; + width: 32px; + border-radius: 2px; + text-align: center; + vertical-align: middle; + margin-right: 10px; + i { + margin-top: 8px; + } + } + h4 { + font-weight: 600; + margin-right: 10px; + min-width: 30px; + } + h4.sub { + color: #999999; + font-weight: 300; + } + } +} +.messages { + h4 { + text-transform: none; + font-weight: 400; + } + .message-body { + padding-left: 80px; + textarea { + height: 80px; + margin-right: 20px; + width: 96%; + } + } + .message { + padding-bottom: 20px; + border-bottom: 1px solid #eeeeee; + margin-bottom: 20px; + h5 { + font-weight: 300; + } + } +} +.message-sidebar a.message-preview p, .message-sidebar a.message-preview h5 { + color: #999999; +} +.b-alarm { + background-position: -384px 0px; +} +.users { + background-position: 0 -96px; +} +.home { + background-position: -128px -96px; +} +.no-star { + background-position: 0 -16px; +} +.sidebar { + border-top: 1px solid #eeeeee; + ul { + padding: 0; + margin: 0; + li { + list-style-type: none; + ul { + background-color: #f6f6f6; + box-shadow: inset 0 1px 10px #e0e0e0; + } + a { + display: block; + padding: 10px; + border-bottom: 1px solid #eeeeee; + text-transform: uppercase; + } + a:hover { + background-color: #eeeeee; + text-decoration: none; + } + } + } +} +.login { + padding: 20px; + margin-top: 40px; + margin-bottom: 80px; +} +.b-wifi { + background-position: -256px -64px; +} +.plane { + background-position: -256px -96px; +} +.batch { + background-image: url(images/white-batch-32.png); + display: inline-block; + height: 32px; + width: 32px; +} +.b-code { + background-position: -64px 0px; +} +.widget { + background-color: #eeeeee; + color: #555555; + padding: 20px; + border-radius: 6px; + margin-bottom: 20px; + td.bar-percent { + span { + font-weight: 300; + } + } + td { + .progress { + margin-top: 10px; + margin-bottom: 10px; + border-radius: 4px; + display: block; + width: 100%; + height: 8px; + overflow: hidden; + } + } + td.bar-label { + width: 20%; + text-align: right; + padding-right: 20px; + color: #999999; + font-weight: 300; + } +} +ul.stat-list li label, ul.stat-list li h4, ul.stat-list li small, ul.stat-list li p { + display: inline-block; +} +.b-flag { + background-position: -384px -256px; +} +footer { + padding-top: 20px; + padding-bottom: 20px; + color: #999999; + a { + color: #999999; + } +} +.popover-title { + text-transform: none; +} +.qa { + border-bottom: 1px solid #eeeeee; + padding-bottom: 20px; + margin-bottom: 20px; + margin-top: 20px; + h4 { + text-transform: none; + font-weight: 400; + } +} +.panel .purple, .panel .purple h6 { + background-color: #7932ea; +} +.knob { + text-align: center; +} +.message-sidebar a.active p, .message-sidebar a.active h5 { + color: rgba(255, 255, 255, 0.8); +} +.b-comment { + background-position: -192px -256px; +} +#in-sub-nav li a:hover, #in-sub-nav li a.active { + background-color: #555555; + text-decoration: none; +} +body h1, body h2, body h3, body h4, body h5, body h6 { + text-transform: uppercase; + font-weight: 300; +} +.b-database { + background-position: -256px 0px; +} +.batch-big { + background-image: url(images/white-batch-64.png); + display: inline-block; + height: 64px; + width: 64px; +} +.divide { + border-top: 1px solid #eeeeee; + margin-top: 40px; + padding-top: 40px; +} +.page { + width: 1210px; + min-width: 1210px; + margin: auto; + background-color: #ffffff; + border-radius: 6px; + margin-top: -70px; + padding: 20px 0px; + box-shadow: 0 0 6px rgba(0, 0, 0, 0.1); + .header { + padding-bottom: 10px; + margin-bottom: 20px; + border-bottom: 1px solid #eeeeee; + } +} +#events { + .load-more { + text-align: center; + overflow: auto; + height: 600px; + } +} +.half-star { + background-position: 0 -32px; +} +.rating-star, .no-star, .half-star { + display: inline-block; + height: 16px; + width: 16px; + background-image: url(../img/stars.png); +} +.stats { + text-align: center; + .primary { + background-color: #007ccd; + color: #ffffff; + } + .info { + background-color: #14b8d4; + color: #ffffff; + } + .inverse { + background-color: #333333; + color: #ffffff; + } + .stat { + background-color: #eeeeee; + color: #555555; + padding: 10px; + border-radius: 6px; + margin-bottom: 20px; + text-align: center; + h6 { + margin-top: -10px; + } + h2 { + font-weight: 600; + } + } + .warning { + background-color: #ffa93c; + color: #ffffff; + } + .danger { + background-color: #ea494a; + color: #ffffff; + } + .purple { + background-color: #7932ea; + color: #ffffff; + } + .success { + background-color: #4cb158; + color: #ffffff; + } +} +.message-sidebar { + border-right: 1px solid #eeeeee; + margin: -20px; + margin-right: 0; + overflow: auto; + height: 700px; + a:hover { + text-decoration: none; + cursor: pointer; + } + a.message-preview { + display: block; + background-color: #f6f6f6; + border-bottom: 1px solid #eeeeee; + padding: 10px 20px; + h4 { + font-weight: 400; + text-transform: none; + } + } + .load-more { + text-align: center; + a { + padding: 20px; + display: block; + } + } + a.active { + background-color: #008dcd; + color: #ffffff; + } + a.new { + background-color: #ffffff; + } +} +.settings { + background-position: -288px -128px; +} +.tables { + background-position: -32px -32px; + code { + display: inline-block; + margin: 2px; + } +} +#in-sub-nav { + background-color: #333333; + -moz-box-shadow: inset 0px 0px 10px #111111; + -webkit-box-shadow: inset 0px 0px 10px #111111; + box-shadow: inset 0px 0px 10px #111111; + ul { + text-align: center; + margin-bottom: 80px; + } + li { + list-style-type: none; + display: inline-block; + a { + display: block; + border-radius: 6px; + padding: 15px 10px 5px; + min-height: 56px; + min-width: 64px; + margin: 20px 10px 10px; + color: #ffffff; + font-weight: 100; + } + span.label.pull-right { + position: relative; + top: 24px; + right: 14px; + } + } +}