diff options
author | Matthieu Napoli <matthieu@mnapoli.fr> | 2015-04-28 05:59:02 +0300 |
---|---|---|
committer | Matthieu Napoli <matthieu@mnapoli.fr> | 2015-05-19 10:39:17 +0300 |
commit | 4b12f96a141b43daeaef52d2f0bbf44d39d9c5f8 (patch) | |
tree | cd6dc003107fa09eb284daf5cb998342ea6f2dbc /plugins/CorePluginsAdmin/stylesheets/marketplace.less | |
parent | 06ebc8b2d528043db4a4c9a30bf8799a9030fba8 (diff) |
Ref #7586 Redesign of the marketplace
I cleaned up a lot of CSS rules and HTML, added new CSS components (from Bootstrap mostly) plus merged the "browsePlugins" and "browseThemes" views into one
Added the jquery.dotdotdot library
Diffstat (limited to 'plugins/CorePluginsAdmin/stylesheets/marketplace.less')
-rw-r--r-- | plugins/CorePluginsAdmin/stylesheets/marketplace.less | 444 |
1 files changed, 74 insertions, 370 deletions
diff --git a/plugins/CorePluginsAdmin/stylesheets/marketplace.less b/plugins/CorePluginsAdmin/stylesheets/marketplace.less index 0dd91da7e0..fd6442a9d2 100644 --- a/plugins/CorePluginsAdmin/stylesheets/marketplace.less +++ b/plugins/CorePluginsAdmin/stylesheets/marketplace.less @@ -1,378 +1,82 @@ -.extendPlatform { - min-width: 580px; - - .introduction { max-width:980px; } - .byPlugins { width:50%;float:left; } - .byThemes { width:50%;float:left; } - .teaserImage { width: 128px; height: 128px; margin: 64px; } - .header { font-size: 1.6em; } - .callToAction { font-size: 1.1em;line-height: 2em; } -} - -#plugins { - - .desc .missingRequirementsNotice { - color: red; - } - - .plugin-desc-missingrequirements { - font-weight:bold; - font-style: italic; - a { - text-decoration: underline !important; - color: black; +.marketplace { + .plugin-search { + float: right; + + input, button { + height: 41px; + margin-bottom: 0; + } + button { + font-size: inherit !important; // because the default Piwik button style is crazy + } + } + + .marketplace-max-width { + max-width: 980px; + } + + .plugin { + text-align: center; + .description { + @line-height: 18px; + line-height: @line-height; + height: @line-height * 3; // 3 lines of text + padding-bottom: 0; + margin-bottom: 10px; + .more { + text-decoration: underline; + color: @theme-color-text; + } + } + img.preview { + max-width: 250px; + width: 100%; + } + .metadata { + color: @color-silver-l50; + font-size: 95%; + margin: 15px 15px 10px; + list-style: none; + li { + text-overflow: ellipsis; + overflow-x: hidden; + white-space: nowrap; + line-height: 18px; + } + .update-available { + // Code taken from Bootstrap's labels + font-weight: bold; + background-color: #f0ad4e; + display: inline; + padding: .2em .6em .3em; + font-size: 76%; + line-height: 1; + color: #fff; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + border-radius: 0.25em; + text-decoration: none; + } + } + .panel-footer { + padding: 12px 40px; + } + } + + .footer-message { + margin-top:30px; + font-style: italic; } - } - - .settingsLink { - text-align: right; - width: 100%; - display: inline-block; - font-style: italic; - } -} - -.admin .pluginsFilter { - color: @theme-color-text-lighter; - .active { - font-weight: bold; - } - - a { - color: @theme-color-link; - text-decoration: none; - } - - a .counter { - color: #999999; - font-weight: normal; - } - - a:hover { - text-decoration: underline; - } - - .status { - display: inline-block; - margin-left: 20px; - } - - .getNewPlugins { - float: right; - } } #installPluginByUpload { - .description { - margin-top: 30px; - margin-bottom: 20px; - } - - .startUpload { - margin-top: 20px; - margin-bottom: 20px; - } -} - -.pluginslist { - margin-top: 20px; - max-width: 980px; - clear: right; - - .plugin { - border: 1px solid #dadada; - padding: 15px; - background-color: #f2f2f2; - margin-bottom: 15px; - position: relative; - - .missingRequirementsNotice, - .updateAvailableNotice { - font-size: 14px; - padding: 10px; - color: #9b7a44; - display: inline-block; - background-color: #ffffe0; - border-radius: 3px; - margin-top: 1px; - margin-bottom: 16px; - - a { - color: #9b7a44; - font-weight: bold; - } - } - - &:hover { - background-color: #EFEEEC; - } - - li { - display: inline-block; - padding-right: 50px; - font-size: 90%; - - &.even { - padding-right: 0; - width: 48%; - overflow: hidden; - white-space: nowrap; - } - &.odd { - padding-right: 0; - width: 48%; - overflow: hidden; - white-space: nowrap; - } - } - - ul { - list-style: none; - margin-left: 0; - line-height: 140%; - } - - .header { - margin-top: 0px; - margin-bottom: 15px; - h3 { - font-size: 16px; - } - } - .description { - padding-bottom: 10px; - } - .install { - float: right; - margin-top: 3px; + margin-top: 30px; + margin-bottom: 20px; } - .update { - .install + .startUpload { + margin-top: 20px; + margin-bottom: 20px; } - h3 .more { - font-weight: bold; - text-decoration: none; - &:hover { - text-decoration: underline; - } - } - .more { - text-decoration: underline; - color: @theme-color-text; - } - .content { - margin-bottom: 46px; - cursor: pointer; - } - - .featuredIcon { - margin-right: 3px; - margin-bottom: 3px; - height: 24px; - width: 24px; - position: absolute; - right: 1px; - margin-top: -22px; - } - - .footer { - position: absolute; - bottom: 4px; - left: 0px; - right: 0px; - cursor: pointer; - } - .metadataSeparator { - background-color: lightgray; - color: #333; - border: 0px; - height: 1px; - width: 100%; - } - .metadata { - margin-top: 10px; - margin-left: 15px; - margin-right: 15px; - } - } - - &.themes .plugin { - .header { - display: inline; - } - .content { - margin-bottom: 57px; - } - .preview { - width: 250px; - height: 250px; - } - .footer { - position: absolute; - bottom: 7px; - left: 0px; - right: 0px; - } - } -} - -.pluginFooterMessage { - float:left; - margin-top:30px; - line-height: 2em; - font-style: italic; -} - -.pluginslistNonSuperUserHint { - margin-top: 30px; - margin-bottom: 30px; - width: 500px; -} - -.pluginslistActionBar { - min-width: 650px; - - form { - display: inline; - } - - .sort { - .active { - font-weight: bold; - } - } - - .infoBox { - margin: 0px 0px 20px 0px; - line-height: 1.5em; - } } - -.pluginDetails { - font-size: 13px; - text-align: left; - line-height: 20px; - - h3, h4, h5, h6 { - margin: 20px 0px 10px 0px; - color: #000000; - } - - .ui-tabs-panel ul, .ui-tabs-panel ol { - list-style: initial; - padding-left: 20px; - } - - .content .missingRequirementsNotice, - .content .updateAvailableNotice { - font-size: 14px; - padding: 10px; - color: #9b7a44; - display: inline-block; - background-color: #ffffe0; - border-radius: 3px; - - a { - color: #9b7a44; - font-weight: bold; - } - a:hover { - text-decoration: underline; - } - } - - p, .ui-tabs-panel ul, .ui-tabs-panel li { - text-align: left; - line-height: 20px; - } - - .header .intro { - margin-bottom: 15px; - } - - .content p { - margin: 0 0 10px; - } - - .description { - padding-right: 25px; - } - - .ui-tabs { - padding: 0em; - } - - .ui-tabs .ui-tabs-nav { - padding: 0em; - border-bottom: 1px solid #cccccc; - margin-right: 25px; - border-radius: 0px; - font-size: 15px; - } - - .ui-tabs .ui-tabs-panel { - padding: 1.4em 3em 0em 0em; - } - - .content a { - color: @theme-color-link; - text-decoration: none; - } - - .metadata dl { - padding-right: 25px; - } - - .metadata a:hover { - text-decoration: underline; - } - - .ui-state-default { - border: 0px !important; - } - - .ui-state-active { - padding-bottom: 0px !important; - } - - .ui-state-active.ui-state-default { - border: 1px solid #cccccc !important; - } - - .ui-state-default:hover { - background-color: #eeeeee !important; - } - - .install { - padding: 11px 19px; - font-size: 17.5px; - -webkit-border-radius: 6px; - -moz-border-radius: 6px; - border-radius: 6px; - color: #ffffff; - background-color: #5bb75b; - display: inline-block; - text-decoration: none; - } - - .install:hover { - text-decoration: underline; - } - - dt { - font-weight: bold; - line-height: 20px; - } - dd { - margin-left: 10px; - line-height: 20px; - } - - .featuredIcon { - height: 16px; - width: 16px; - margin-right: 5px; - } - -}
\ No newline at end of file |