diff options
Diffstat (limited to 'p/themes/Mapco/_layout.scss')
| -rw-r--r-- | p/themes/Mapco/_layout.scss | 462 |
1 files changed, 462 insertions, 0 deletions
diff --git a/p/themes/Mapco/_layout.scss b/p/themes/Mapco/_layout.scss new file mode 100644 index 000000000..b62618d81 --- /dev/null +++ b/p/themes/Mapco/_layout.scss @@ -0,0 +1,462 @@ +/*=== STRUCTURE */ +/*===============*/ +/*=== Header */ +.header { + background: $sid-bg; + padding: 0.5rem 1.35rem; + display: block; + table-layout: none; + width: auto; + + .item{ + vertical-align: middle; + // text-align: center; + // display: flex; + // justify-content: space-between; + // flex-direction: row; + + &.title{ + + font-weight: 400; + width: 280px; + + h1{ + a{ + text-decoration: none; + color: $sid-font-color; + font-size: 1rem; + text-transform: uppercase; + letter-spacing: 1px; + + img{ + margin-right: 0.5rem; + + } + } + } + } + &.search{ + // text-align: center; + // width: 50%; + + input{ + width: 230px; + border-radius: 2px 0 0 2px; + background-color: $sid-bg-alt; + color: $sid-font-color; + border: none; + + @include transition(all, 0.15s, ease-in-out); + + &:hover{ + background-color: $sid-bg-dark; + } + + &:focus{ + width: 350px; + + background-color: $white; + color: $grey-dark; + } + } + .btn{ + img{display: none;} + border-radius: 0 2px 2px 0; + + background-color: $main-first; + background-position: center; + background-repeat: no-repeat; + background-image: url(icons/magnifier.svg); + + border-left-width: 0; + + width: 3rem; + min-height: 35px; + + &:hover{ + background-color: $main-first-alt; + } + } + } + &.configure{ + width: 2rem; + position: absolute; + right: 1rem; + top: 1.25rem; + text-align: center; + // float: right; + + .btn{ + img{display: none;} + // border-radius: 0 2px 2px 0; + + background-color: transparent; + background-position: center; + background-repeat: no-repeat; + background-image: url(icons/cog-white.svg); + + padding: 0 0.5rem; + + // border-left-width: 0; + + // width: 3rem; + + &:hover{ + // background-color: $main-first-alt; + } + } + } + } + + +} + +/*=== Body */ +#global { + height: calc(100% - 85px); +} + + + + +/*=== Prompt (centered) */ +.prompt { + text-align: center; +} +.prompt label { + text-align: left; +} +.prompt form { + margin: 10px auto 20px auto; + width: 200px; +} +.prompt input { + margin: 5px auto; + width: 100%; +} +.prompt p { + margin: 20px 0; +} + +/*=== New article notification */ +#new-article { + text-align: center; + font-size: 1rem; + background: $main-first; +} +#new-article:hover { + background: $main-first-alt; +} +#new-article > a { + line-height: 3em; + font-weight: bold; + color: $white; +} +#new-article > a:hover { + text-decoration: none; +} + +/*=== Day indication */ +.day { + padding: 1rem 0 0 1.25rem; + font-weight: 700; + line-height: 3em; + letter-spacing: 1px; + text-transform: uppercase; + font-size: 0.875rem; + color: $light-font-color; + // border-left: 2px solid #ecf0f1; + + .name{ + padding: 0 1rem 0 1rem; + font-size: 0.875rem; + // font-weight: 700; + color: $main-font-color; + position: relative; + left: 0; + + // letter-spacing: 1px; + text-transform: uppercase; + } +} + +/*=== Index menu */ +.nav_menu { + text-align: center; + padding: 5px 0; + + .btn{ + border-left-width: 0; + padding: 0.5rem 1rem; + background-color: $grey-lighter; + background-position: center; + background-repeat: no-repeat; + + &:hover{ + background-color: $grey-light; + } + } + + .stick{ + background: $grey-lighter; + + .btn{ + border-left-width: 0; + padding: 0.5rem 1rem; + background-color: $grey-lighter; + background-position: center; + background-repeat: no-repeat; + @include transition(all, 0.15s, ease-in-out); + + &:hover{ + background-color: $grey-medium-light; + } + + &.active{ + background-color: $main-first; + } + + img.icon{display: none;} // on efface pour afficher nos icones, mouhahaha !! + + + // actions + &#toggle-read{ + background-image: url(icons/read.svg); + } + &#toggle-read.active{ + background-image: url(icons/read-white.svg); + } + + &#toggle-unread{ + background-image: url(icons/unread.svg); + } + &#toggle-unread.active{ + background-image: url(icons/unread-white.svg); + } + + &#toggle-starred{ + background-image: url(icons/starred.svg); + } + &#toggle-starred.active{ + background-image: url(icons/starred-white.svg); + } + + &#toggle-non-starred{ + background-image: url(icons/non-starred.svg); + } + &#toggle-non-starred.active{ + background-image: url(icons/non-starred-white.svg); + } + + // read all + &.read_all{ + background-color: $grey-lighter; + // min-height: 0; + color:$main-font-color; + padding: 5px 16px; + @include transition(all, 0.15s, ease-in-out); + + &:hover{ + background-color: $grey-medium-light; + } + } + + // views + &.view-normal{ + background-image: url(icons/view-list.svg); + } + &.view-normal.active{ + background-image: url(icons/view-list-white.svg); + } + + &.view-global{ + background-image: url(icons/view-global.svg); + } + &.view-global.active{ + background-image: url(icons/view-global-white.svg); + } + + &.view-reader{ + background-image: url(icons/view-reader.svg); + } + &.view-reader.active{ + background-image: url(icons/view-reader-white.svg); + } + + &.view-rss{ + background-image: url(icons/rss.svg); + } + + } + .dropdown { + a.dropdown-toggle{ + border-left-width: 0; + background-image: url(icons/more.svg); + } + } + + &#nav_menu_action{ + + } + &#nav_menu_read_all{ + + } + &#nav_menu_views{ + + } + } +} + + +#dropdown-query ~ .dropdown-menu .dropdown-header .icon { + vertical-align: middle; + background-color: $grey-medium-dark; + border-radius: 3px; +} + + +/*=== Content of feed articles */ +.content, .content.thin { + padding: 20px 10px; + + font-size: 1.125rem; + line-height: 1.8rem; + + h1.title, h1{ + + a{ + color: $main-font-color; + font-family: "spectral"; + font-size: 2rem; + + &:hover{ + color: $main-first; + text-decoration: none; + } + } + } + .author{ + font-size: 1.125rem; + color: $light-font-color; + } + p, ul{ + font-size: 1.125rem; + line-height: 1.8rem; + } + hr{ + } + .content hr { + margin: 30px 10px; + height: 1px; + background: $grey-medium-light; + border: 0; + box-shadow: 0 2px 5px #ccc; + } + + pre { + margin: 10px auto; + padding: 10px 20px; + overflow: auto; + background: $main-first-darker; + color: $white; + font-size: 0.9rem; + border-radius: 3px; + + code { + background: transparent; + color: $white; + border: none; + } + } + code { + padding: 2px 5px; + color: $grey-light; + background: $grey-lighter; + border: 1px solid $grey-light; + border-radius: 3px; + } + + + blockquote { + display: block; + margin: 0; + padding: 5px 20px; + border-top: 1px solid $grey-medium-light; + border-bottom: 1px solid $grey-medium-light; + background: $grey-lighter; + color: $main-font-color; + + p { + margin: 0; + } + } + +} + + +/*=== Notification and actualize notification */ +.notification { + position: fixed; + top: auto; + bottom: 0; + left: 0; + right: 0; + width: 100%; + height: 3rem; + + padding: 1rem 0; + text-align: center; + // font-weight: bold; + font-size: 1em; + line-height: 3em; + z-index: 10; + vertical-align: middle; + background: $grey-medium-light; + color: $grey-dark; + // border-radius: 3px; + border: none; + + .msg{ + font-size: 1rem; + display: inline-block; + } + + &.good { + background: $success-bg; + color: $white; + } + &.bad { + background: $alert-bg; + color: $white; + } + a.close { + padding: 0 15px; + line-height: 3em; + border-radius: 0 3px 3px 0; + } + + &.good a.close:hover { + background: $success-text; + } + &.bad a.close:hover { + background: $alert-text; + } + + &#actualizeProgress { + line-height: 2em; + + br{ + display: none; + } + } +} + + +/*=== Navigation menu (for articles) */ +#nav_entries { + margin: 0; + text-align: center; + line-height: 3em; + table-layout: fixed; + background: $sid-bg; +} |