diff --git a/core/client/assets/sass/layouts/plugins.scss b/core/client/assets/sass/layouts/plugins.scss new file mode 100644 index 0000000000..adfe9cad7c --- /dev/null +++ b/core/client/assets/sass/layouts/plugins.scss @@ -0,0 +1,181 @@ +/* ============================================================================= + Plugins + ============================================================================= */ + +.settings { + + .plugin-section { + padding-bottom: 20px; + } + + .plugin-section-header { + h3 { + margin: 15px 0; + font-size: 1.1em; + font-weight: normal; + color: $brown; + } + } + + .plugin-section-footer { + text-align: right; + } + + .button-update-all { + @include icon($i-power, 1em, #FFC125){ // TODO: Need lightening icon + margin-right: 5px; + }; + } + + .button-cancel { + @include icon($i-x, 1em, #FFFFFF){ + margin-right: 5px; + }; + } + + .plugin-section-table { + margin-top: 5px; + + tbody > tr:nth-child(odd) > td { + background: none; + } + + .plugin-section-item { + + &.inactive { + .plugin-meta { + opacity: 0.4; + } + + td:last-child { + .plugin-meta { + opacity: 1; + } + } + } + + td { + padding: 20px 0; + border-bottom:$lightbrown 1px solid; + + &:first-child { + padding-left: 0px; + border-top:$lightbrown 1px solid; + + .plugin-meta { + padding: 0px; + width: 75%; + border-left: none; + text-align: left; + } + } + + &:last-child { + .plugin-meta { + padding: 0px; + text-align: right; + } + } + } + } + + .plugin-icon { + display: inline-block; + width: 40px; + height: 40px; + margin-right: 15px; + background: #FFC125; + border-radius: 5px; + vertical-align: middle; + + img { + width: 100%; + } + } + + .plugin-meta { + @include box-sizing(border-box); + display: inline-block; + width: 100%; + height: 100%; + padding: 0 20px; + vertical-align: middle; + border-left: $lightbrown 1px solid; + text-align: center; + } + + .plugin-info { + display: block; + color: lighten($grey, 5%); + font-size: 1.2em; + font-weight: normal; + vertical-align: top; + } + + .plugin-title { + color: $grey; + } + + .plugin-sub-info { + display: block; + color: $midgrey; + } + + .plugin-download-progress { + position: relative; + display: block; + height: 6px; + margin-top: 10px; + background: $lightbrown; + border-radius: 3px; + + > span { + position: absolute; + left: 0; + top: 0; + content: ""; + height: 100%; + background-color: $blue; + border-radius: 3px; + } + } + + .rating { + + unicode-bidi: bidi-override; + text-align: center; + + > span { + display: inline-block; + position: relative; + width: 1.1em; + height: 1.1em; + font-size: 0.8em; + + &:before { + content: "\2605"; + position: absolute; + left: 0; + opacity: 0.5; + } + + &.active { + &:before { + content: "\2605"; + opacity: 1; + } + } + } + + } + + .plugin-settings-icon { + display: block; + margin-top: 9px; + font-size: 1.4em; + @include icon($i-settings, 1em, $grey); + } + + } //.plugin-section-table + +} //.settings \ No newline at end of file diff --git a/core/client/assets/sass/layouts/settings.scss b/core/client/assets/sass/layouts/settings.scss index d070f91e9c..15ff5fbfa6 100644 --- a/core/client/assets/sass/layouts/settings.scss +++ b/core/client/assets/sass/layouts/settings.scss @@ -238,417 +238,6 @@ @include breakpoint($letterbox) { top: 0; } } -/* ============================================================================= - Users List - ============================================================================= */ - - .user-group-header { - margin-bottom: 0px; - padding-bottom: 20px; - border: 0 none; - border-bottom: 1px solid darken($lightbrown, 10%); - - h3 { - display: inline-block; - margin: 0; - color: $midbrown; - font-weight: normal; - font-size: 1.1em; - line-height: 1em; - } - - } - - .user-search { - display: inline-block; - float: right; - - label { margin: 0} - - &:hover .user-search-input, .user-search-input:focus { - width: 260px; - padding: 0 10px; - } - - .user-search-input { - @include box-sizing(border-box); - width: 0px; - padding: 0; - border: none; - border-bottom: lighten($lightbrown, 2%) 1px solid; - @include transition(width 0.2s ease-in-out); - box-shadow: none; - } - - .search-icon { - @include icon($i-search, 1em, $midbrown); - } - } - - .users { - padding: 0px; - margin-top: 0px; - list-style: none; - } - - .user { - @include box-sizing(border-box); - display: block; - width: 100%; - padding: 20px; - border: 0 none; - border-top: 1px solid $lightgrey; - - &:first-child { - border: none; - } - - .user-image { - display: inline-block; - width: 40px; - height: 40px; - margin-right: 17px; - vertical-align: middle; - background-color: $lightbrown; - border-radius: 20px; - - &.invite { - @include box-sizing(border-box); - padding-top: 8px; - text-align: center; - @include icon($i-mail, 1em, $brown); - } - - img { - width: 40px; - height: 40px; - border-radius: 20px; - } - } - - .user-meta { - display: inline-block; - vertical-align: middle; - - .user-name { - margin: 0; - margin-top: 0.4em; - font-weight: 400; - font-size: 1.2em; - line-height: 1em; - } - - .user-last-seen { - line-height: 1em; - } - } - } - - .user-role { - padding: 2px 8px; - float: right; - font-size: 0.8em; - color: #fff; - text-transform: uppercase; - - &.admin { - background-color: #DE523A; - } - &.editor { - background-color: #4A8CBD; - } - } - -/* ============================================================================= - User Profile - ============================================================================= */ - - .user-profile-header { - position: relative; - width: 100%; - height: 300px; - } - - .cover-image { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - overflow: hidden; - - img { - position: absolute; - max-width: 100%; - } - } - - .button-change-cover { - position: absolute; - right: 40px; - bottom: 40px; - background: rgba(0,0,0,0.4); - color: #FFFFFF; - z-index: 2; - - &:hover { - background: rgba(0,0,0,0.8); - } - } - - .user-details-container { - position: relative; - top: -90px; - z-index: 1; - } - - .user-details-top { - margin-bottom: 0; - overflow: auto; - - p { - color: #FFFFFF; - } - } - - .user-avatar-image { - @include box-sizing(border-box); - position: relative; - width: 120px; - height: 120px; - float: left; - margin-left: 40px; - margin-right: 20px; - border-radius: 60px; - border: 3px solid #FFFFFF; - cursor: pointer; - z-index: 2; - - img { - width: 100%; - height: 100%; - border-radius: 60px; - } - - .button-change-avatar { - position: absolute; - top: 0; - width: 100%; - height: 100%; - display: block; - border-radius: 60px; - background: rgba(0,0,0,0.5); - opacity: 0; - color: #FFFFFF; - @include transition(opacity 0.3s ease); - } - - &:hover { - .button-change-avatar { - opacity: 1; - } - } - } - - .user-details-bottom { - padding: 0 40px; - margin: 0; - } - - .bio-container { - max-width: 370px; - } - - .bio-desc { - display: inline-block; - } - - .word-count { - margin-right: 20px; - float: right; - font-weight: bold; - color: darken($brown, 5%); - } - -/* ============================================================================= - User Profile - ============================================================================= */ - - .plugin-section { - padding-bottom: 20px; - } - - .plugin-section-header { - h3 { - margin: 15px 0; - font-size: 1.1em; - font-weight: normal; - color: $brown; - } - } - - .plugin-section-footer { - text-align: right; - } - - .button-update-all { - @include icon($i-power, 1em, #FFC125){ // TODO: Need lightening icon - margin-right: 5px; - }; - } - - .button-cancel { - @include icon($i-x, 1em, #FFFFFF){ - margin-right: 5px; - }; - } - - .plugin-section-table { - margin-top: 5px; - - tbody > tr:nth-child(odd) > td { - background: none; - } - - .plugin-section-item { - - &.inactive { - .plugin-meta { - opacity: 0.4; - } - - td:last-child { - .plugin-meta { - opacity: 1; - } - } - } - - td { - padding: 20px 0; - border-bottom:$lightbrown 1px solid; - - &:first-child { - padding-left: 0px; - border-top:$lightbrown 1px solid; - - .plugin-meta { - padding: 0px; - width: 75%; - border-left: none; - text-align: left; - } - } - - &:last-child { - .plugin-meta { - padding: 0px; - text-align: right; - } - } - } - } - - .plugin-icon { - display: inline-block; - width: 40px; - height: 40px; - margin-right: 15px; - background: #FFC125; - border-radius: 5px; - vertical-align: middle; - - img { - width: 100%; - } - } - - .plugin-meta { - @include box-sizing(border-box); - display: inline-block; - width: 100%; - height: 100%; - padding: 0 20px; - vertical-align: middle; - border-left: $lightbrown 1px solid; - text-align: center; - } - - .plugin-info { - display: block; - color: lighten($grey, 5%); - font-size: 1.2em; - font-weight: normal; - vertical-align: top; - } - - .plugin-title { - color: $grey; - } - - .plugin-sub-info { - display: block; - color: $midgrey; - } - - .plugin-download-progress { - position: relative; - display: block; - height: 6px; - margin-top: 10px; - background: $lightbrown; - border-radius: 3px; - - > span { - position: absolute; - left: 0; - top: 0; - content: ""; - height: 100%; - background-color: $blue; - border-radius: 3px; - } - } - - .rating { - - unicode-bidi: bidi-override; - text-align: center; - - > span { - display: inline-block; - position: relative; - width: 1.1em; - height: 1.1em; - font-size: 0.8em; - - &:before { - content: "\2605"; - position: absolute; - left: 0; - opacity: 0.5; - } - - &.active { - &:before { - content: "\2605"; - opacity: 1; - } - } - } - - - } - .plugin-settings-icon { - display: block; - margin-top: 9px; - font-size: 1.4em; - @include icon($i-settings, 1em, $grey); - } - - } //.plugin-section-table - - }//.settings-content }//.settings diff --git a/core/client/assets/sass/layouts/users.scss b/core/client/assets/sass/layouts/users.scss new file mode 100644 index 0000000000..3313317d89 --- /dev/null +++ b/core/client/assets/sass/layouts/users.scss @@ -0,0 +1,235 @@ +/* ============================================================================= + Users List + ============================================================================= */ + +.settings { + + .user-group-header { + margin-bottom: 0px; + padding-bottom: 20px; + border: 0 none; + border-bottom: 1px solid darken($lightbrown, 10%); + + h3 { + display: inline-block; + margin: 0; + color: $midbrown; + font-weight: normal; + font-size: 1.1em; + line-height: 1em; + } + + } + + .user-search { + display: inline-block; + float: right; + + label { margin: 0} + + &:hover .user-search-input, .user-search-input:focus { + width: 260px; + padding: 0 10px; + } + + .user-search-input { + @include box-sizing(border-box); + width: 0px; + padding: 0; + border: none; + border-bottom: lighten($lightbrown, 2%) 1px solid; + @include transition(width 0.2s ease-in-out); + box-shadow: none; + } + + .search-icon { + @include icon($i-search, 1em, $midbrown); + } + } + + .users { + padding: 0px; + margin-top: 0px; + list-style: none; + } + + .user { + @include box-sizing(border-box); + display: block; + width: 100%; + padding: 20px; + border: 0 none; + border-top: 1px solid $lightgrey; + + &:first-child { + border: none; + } + + .user-image { + display: inline-block; + width: 40px; + height: 40px; + margin-right: 17px; + vertical-align: middle; + background-color: $lightbrown; + border-radius: 20px; + + &.invite { + @include box-sizing(border-box); + padding-top: 8px; + text-align: center; + @include icon($i-mail, 1em, $brown); + } + + img { + width: 40px; + height: 40px; + border-radius: 20px; + } + } + + .user-meta { + display: inline-block; + vertical-align: middle; + + .user-name { + margin: 0; + margin-top: 0.4em; + font-weight: 400; + font-size: 1.2em; + line-height: 1em; + } + + .user-last-seen { + line-height: 1em; + } + } + } + + .user-role { + padding: 2px 8px; + float: right; + font-size: 0.8em; + color: #fff; + text-transform: uppercase; + + &.admin { + background-color: #DE523A; + } + &.editor { + background-color: #4A8CBD; + } + } + +/* ============================================================================= +User Profile +============================================================================= */ + + .user-profile-header { + position: relative; + width: 100%; + height: 300px; + } + + .cover-image { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: hidden; + + img { + position: absolute; + max-width: 100%; + } + } + + .button-change-cover { + position: absolute; + right: 40px; + bottom: 40px; + background: rgba(0,0,0,0.4); + color: #FFFFFF; + z-index: 2; + + &:hover { + background: rgba(0,0,0,0.8); + } + } + + .user-details-container { + position: relative; + top: -90px; + z-index: 1; + } + + .user-details-top { + margin-bottom: 0; + overflow: auto; + + p { + color: #FFFFFF; + } + } + + .user-avatar-image { + @include box-sizing(border-box); + position: relative; + width: 120px; + height: 120px; + float: left; + margin-left: 40px; + margin-right: 20px; + border-radius: 60px; + border: 3px solid #FFFFFF; + cursor: pointer; + z-index: 2; + + img { + width: 100%; + height: 100%; + border-radius: 60px; + } + + .button-change-avatar { + position: absolute; + top: 0; + width: 100%; + height: 100%; + display: block; + border-radius: 60px; + background: rgba(0,0,0,0.5); + opacity: 0; + color: #FFFFFF; + @include transition(opacity 0.3s ease); + } + + &:hover { + .button-change-avatar { + opacity: 1; + } + } + } + + .user-details-bottom { + padding: 0 40px; + margin: 0; + } + + .bio-container { + max-width: 370px; + } + + .bio-desc { + display: inline-block; + } + + .word-count { + margin-right: 20px; + float: right; + font-weight: bold; + color: darken($brown, 5%); + } + +} //.settings \ No newline at end of file