feat: VivesPOS landing on Winter CMS 1.2 — theme + plugin + Dockerfile
Some checks are pending
Module sub-split / Sub-split (push) Waiting to run
Some checks are pending
Module sub-split / Sub-split (push) Waiting to run
- Base: wintercms/winter branch 1.2 (full framework) - Theme vivespos: Canvas 7 + Bootstrap 5 CDN, custom CSS - Layout: deferred GTM/GA4 tracking, JSON-LD SoftwareApplication - Partials: hero (offline-first), features, modes (offline/nube toggle), screenshots, pricing (3 planes), comparison, FAQ, CTA - Plugin VivesPOS.Site with ContactForm - Dockerfile: PHP 8.2 Apache, port 80, healthcheck - Added winter/wn-pages, blog, sitemap, seo plugins - Active theme set to vivespos
This commit is contained in:
235
modules/system/assets/less/framework.extras.less
Normal file
235
modules/system/assets/less/framework.extras.less
Normal file
@@ -0,0 +1,235 @@
|
||||
@import "../../../backend/assets/less/core/boot.less";
|
||||
|
||||
//
|
||||
// Stripe loading indicator
|
||||
// --------------------------------------------------
|
||||
|
||||
body.wn-loading, body.wn-loading *,
|
||||
body.oc-loading, body.oc-loading * {
|
||||
cursor: wait !important;
|
||||
}
|
||||
|
||||
@stripe-loader-color: #0090c0;
|
||||
@stripe-loader-height: 5px;
|
||||
|
||||
.stripe-loading-indicator {
|
||||
|
||||
height: @stripe-loader-height;
|
||||
background: transparent;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
z-index: 2000;
|
||||
|
||||
.stripe, .stripe-loaded {
|
||||
height: @stripe-loader-height;
|
||||
display: block;
|
||||
background: @stripe-loader-color;
|
||||
position: absolute;
|
||||
.box-shadow(~"inset 0 1px 1px -1px #FFF, inset 0 -1px 1px -1px #FFF");
|
||||
}
|
||||
|
||||
.stripe {
|
||||
width: 100%;
|
||||
.animation(wn-infinite-loader 60s linear);
|
||||
}
|
||||
|
||||
.stripe-loaded {
|
||||
width: 100%;
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
.opacity(0);
|
||||
}
|
||||
|
||||
&.loaded {
|
||||
.opacity(0);
|
||||
.transition(opacity .4s linear);
|
||||
.transition-delay(.3s);
|
||||
.stripe {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
.stripe-loaded {
|
||||
.opacity(1);
|
||||
transform: translate3d(0, 0, 0);
|
||||
.transition(transform .3s linear);
|
||||
}
|
||||
}
|
||||
|
||||
&.hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Flash Messages
|
||||
// --------------------------------------------------
|
||||
|
||||
@color-flash-success-bg: #8da85e;
|
||||
@color-flash-error-bg: #cc3300;
|
||||
@color-flash-warning-bg: @brand-warning;
|
||||
@color-flash-info-bg: #5fb6f5;
|
||||
@color-flash-text: #ffffff;
|
||||
|
||||
body > p.flash-message {
|
||||
position: fixed;
|
||||
width: 500px;
|
||||
left: 50%;
|
||||
top: 13px;
|
||||
margin-left: -250px;
|
||||
color: @color-flash-text;
|
||||
font-size: 14px;
|
||||
padding: 10px 30px 10px 15px;
|
||||
z-index: @zindex-flashmessage;
|
||||
word-wrap: break-word;
|
||||
text-shadow: 0 -1px 0px rgba(0,0,0,.15);
|
||||
text-align: center;
|
||||
.box-shadow(@overlay-box-shadow);
|
||||
.border-radius(@border-radius-base);
|
||||
|
||||
&.fade {
|
||||
.opacity(0);
|
||||
.transition(~'all 0.5s, width 0s');
|
||||
.transform(~'scale(0.9)');
|
||||
}
|
||||
|
||||
&.fade.in {
|
||||
.opacity(1);
|
||||
.transform( ~'scale(1)');
|
||||
}
|
||||
|
||||
&.success { background: @color-flash-success-bg; }
|
||||
&.error { background: @color-flash-error-bg; }
|
||||
&.warning { background: @color-flash-warning-bg; }
|
||||
&.info { background: @color-flash-info-bg; }
|
||||
|
||||
button.close {
|
||||
float: none;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 8px;
|
||||
color: white;
|
||||
font-size: 21px;
|
||||
line-height: 1;
|
||||
font-weight: bold;
|
||||
.opacity(.2);
|
||||
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
-webkit-appearance: none;
|
||||
outline: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
.opacity(.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: @screen-sm) {
|
||||
body > p.flash-message {
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
margin-left: 0;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Form Validation
|
||||
// --------------------------------------------------
|
||||
|
||||
[data-request][data-request-validate] [data-validate-for],
|
||||
[data-request][data-request-validate] [data-validate-error] {
|
||||
&:not(.visible) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Element Loader
|
||||
// --------------------------------------------------
|
||||
|
||||
a.wn-loading, button.wn-loading, span.wn-loading,
|
||||
a.oc-loading, button.oc-loading, span.oc-loading {
|
||||
&:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left: .4em;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
animation: wn-rotate-loader 0.8s infinite linear;
|
||||
border: .2em solid currentColor;
|
||||
border-right-color: transparent;
|
||||
border-radius: 50%;
|
||||
.opacity(.5);
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes wn-rotate-loader {
|
||||
0% { -moz-transform: rotate(0deg); }
|
||||
100% { -moz-transform: rotate(360deg); }
|
||||
}
|
||||
@-webkit-keyframes wn-rotate-loader {
|
||||
0% { -webkit-transform: rotate(0deg); }
|
||||
100% { -webkit-transform: rotate(360deg); }
|
||||
}
|
||||
@-o-keyframes wn-rotate-loader {
|
||||
0% { -o-transform: rotate(0deg); }
|
||||
100% { -o-transform: rotate(360deg); }
|
||||
}
|
||||
@-ms-keyframes wn-rotate-loader {
|
||||
0% { -ms-transform: rotate(0deg); }
|
||||
100% { -ms-transform: rotate(360deg); }
|
||||
}
|
||||
@keyframes wn-rotate-loader {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
@-moz-keyframes oc-rotate-loader {
|
||||
0% { -moz-transform: rotate(0deg); }
|
||||
100% { -moz-transform: rotate(360deg); }
|
||||
}
|
||||
@-webkit-keyframes oc-rotate-loader {
|
||||
0% { -webkit-transform: rotate(0deg); }
|
||||
100% { -webkit-transform: rotate(360deg); }
|
||||
}
|
||||
@-o-keyframes oc-rotate-loader {
|
||||
0% { -o-transform: rotate(0deg); }
|
||||
100% { -o-transform: rotate(360deg); }
|
||||
}
|
||||
@-ms-keyframes oc-rotate-loader {
|
||||
0% { -ms-transform: rotate(0deg); }
|
||||
100% { -ms-transform: rotate(360deg); }
|
||||
}
|
||||
@keyframes oc-rotate-loader {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
//
|
||||
// Infinite loading animation
|
||||
// --------------------------------------------------
|
||||
|
||||
@startVal: 100%;
|
||||
@start: 0;
|
||||
|
||||
.infinite-class (@index, @val) when (@index < 101) {
|
||||
@tmpSelector: ~"@{index}%";
|
||||
@{tmpSelector} { transform: translateX(-@val); }
|
||||
.infinite-class((@index + 10), (@val - (@val / 2)));
|
||||
}
|
||||
|
||||
@keyframes wn-infinite-loader {
|
||||
.infinite-class(@start, @startVal);
|
||||
}
|
||||
@keyframes oc-infinite-loader {
|
||||
.infinite-class(@start, @startVal);
|
||||
}
|
||||
80
modules/system/assets/less/settings/settings.less
Normal file
80
modules/system/assets/less/settings/settings.less
Normal file
@@ -0,0 +1,80 @@
|
||||
@import "../../../../backend/assets/less/core/boot.less";
|
||||
|
||||
.control-settings {
|
||||
|
||||
.settings-category {
|
||||
padding: 20px;
|
||||
background-color: @color-panel-light;
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-weight: 100;
|
||||
color: #293e50;
|
||||
}
|
||||
}
|
||||
|
||||
.settings-items {
|
||||
padding: 20px;
|
||||
margin: 0;
|
||||
|
||||
&.row {
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
&.row > .settings-item {
|
||||
float: none;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.settings-item > a {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding-left: 72px;
|
||||
padding-top: 10px;
|
||||
text-decoration: none;
|
||||
margin-bottom: 20px;
|
||||
line-height: 150%;
|
||||
h5 {
|
||||
margin-top: 0;
|
||||
color: @text-color;
|
||||
font-size: 18px;
|
||||
line-height: 150%;
|
||||
.text-overflow();
|
||||
}
|
||||
|
||||
p {
|
||||
color: #777;
|
||||
font-size: 12px;
|
||||
line-height: 150%;
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: #f0f0f0;
|
||||
.border-radius(999px);
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
color: #555;
|
||||
i {
|
||||
font-size: 52px;
|
||||
line-height: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
h5 { color: @link-hover-color; }
|
||||
p { color: @link-hover-color; }
|
||||
.item-icon {
|
||||
background: #e0e0e0;
|
||||
color: @link-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
236
modules/system/assets/less/snowboard.extras.less
Normal file
236
modules/system/assets/less/snowboard.extras.less
Normal file
@@ -0,0 +1,236 @@
|
||||
@import "../../../backend/assets/less/core/boot.less";
|
||||
|
||||
//
|
||||
// Stripe loading indicator
|
||||
// --------------------------------------------------
|
||||
|
||||
body.wn-loading, body.wn-loading *,
|
||||
body.oc-loading, body.oc-loading * {
|
||||
cursor: wait !important;
|
||||
}
|
||||
|
||||
@stripe-loader-color: #0090c0;
|
||||
@stripe-loader-height: 5px;
|
||||
|
||||
.stripe-loading-indicator {
|
||||
|
||||
height: @stripe-loader-height;
|
||||
background: transparent;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
z-index: 2000;
|
||||
|
||||
.stripe, .stripe-loaded {
|
||||
height: @stripe-loader-height;
|
||||
display: block;
|
||||
background: @stripe-loader-color;
|
||||
position: absolute;
|
||||
.box-shadow(~"inset 0 1px 1px -1px #FFF, inset 0 -1px 1px -1px #FFF");
|
||||
}
|
||||
|
||||
.stripe {
|
||||
width: 100%;
|
||||
.animation(wn-infinite-loader 60s linear);
|
||||
}
|
||||
|
||||
.stripe-loaded {
|
||||
width: 100%;
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
.opacity(0);
|
||||
}
|
||||
|
||||
&.loaded {
|
||||
.opacity(0);
|
||||
.transition(opacity .4s linear);
|
||||
.transition-delay(.3s);
|
||||
.stripe {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
.stripe-loaded {
|
||||
.opacity(1);
|
||||
transform: translate3d(0, 0, 0);
|
||||
.transition(transform .3s linear);
|
||||
}
|
||||
}
|
||||
|
||||
&.hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Flash Messages
|
||||
// --------------------------------------------------
|
||||
|
||||
@color-flash-success-bg: #6f9927;
|
||||
@color-flash-error-bg: #bb380c;
|
||||
@color-flash-warning-bg: #b87410;
|
||||
@color-flash-info-bg: #3f91cc;
|
||||
@color-flash-default-bg: #7a7e83;
|
||||
@color-flash-text: #ffffff;
|
||||
|
||||
body > div.flash-message {
|
||||
position: fixed;
|
||||
width: 500px;
|
||||
left: 50%;
|
||||
top: 13px;
|
||||
margin-left: -250px;
|
||||
background-color: @color-flash-default-bg;
|
||||
color: @color-flash-text;
|
||||
font-size: 14px;
|
||||
padding: 10px 30px 14px 15px;
|
||||
z-index: @zindex-flashmessage;
|
||||
word-wrap: break-word;
|
||||
text-shadow: 0 -1px 0px rgba(0,0,0,.15);
|
||||
text-align: center;
|
||||
.box-shadow(@overlay-box-shadow);
|
||||
.border-radius(@border-radius-base);
|
||||
cursor: pointer;
|
||||
|
||||
&.no-timer {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.flash-timer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: #ffffff;
|
||||
opacity: 0.5;
|
||||
.border-radius(@border-radius-base);
|
||||
|
||||
&.timeout-active {
|
||||
.transition(~'width 6s linear');
|
||||
}
|
||||
|
||||
&.timeout-in {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.timeout-out {
|
||||
width: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
&.show-active, &.hide-active {
|
||||
.transition(~'all 0.5s, width 0s');
|
||||
}
|
||||
|
||||
&.hide-out .flash-timer,
|
||||
&.hide-active .flash-timer {
|
||||
transition: none;
|
||||
width: 0% !important;
|
||||
}
|
||||
|
||||
&.show-in, &.hide-out {
|
||||
.opacity(0);
|
||||
.transform(~'scale(0.9)');
|
||||
}
|
||||
|
||||
&.show-out, &.hide-in {
|
||||
.opacity(1);
|
||||
.transform(~'scale(1)');
|
||||
}
|
||||
|
||||
&.success { background: @color-flash-success-bg; }
|
||||
&.error { background: @color-flash-error-bg; }
|
||||
&.warning { background: @color-flash-warning-bg; }
|
||||
&.info { background: @color-flash-info-bg; }
|
||||
}
|
||||
|
||||
@media (max-width: @screen-sm) {
|
||||
body > div.flash-message {
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
margin-left: 0;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Element Loader
|
||||
// --------------------------------------------------
|
||||
|
||||
a.wn-loading, button.wn-loading, span.wn-loading,
|
||||
a.oc-loading, button.oc-loading, span.oc-loading {
|
||||
&:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left: .4em;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
animation: wn-rotate-loader 0.8s infinite linear;
|
||||
border: .2em solid currentColor;
|
||||
border-right-color: transparent;
|
||||
border-radius: 50%;
|
||||
.opacity(.5);
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes wn-rotate-loader {
|
||||
0% { -moz-transform: rotate(0deg); }
|
||||
100% { -moz-transform: rotate(360deg); }
|
||||
}
|
||||
@-webkit-keyframes wn-rotate-loader {
|
||||
0% { -webkit-transform: rotate(0deg); }
|
||||
100% { -webkit-transform: rotate(360deg); }
|
||||
}
|
||||
@-o-keyframes wn-rotate-loader {
|
||||
0% { -o-transform: rotate(0deg); }
|
||||
100% { -o-transform: rotate(360deg); }
|
||||
}
|
||||
@-ms-keyframes wn-rotate-loader {
|
||||
0% { -ms-transform: rotate(0deg); }
|
||||
100% { -ms-transform: rotate(360deg); }
|
||||
}
|
||||
@keyframes wn-rotate-loader {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
@-moz-keyframes oc-rotate-loader {
|
||||
0% { -moz-transform: rotate(0deg); }
|
||||
100% { -moz-transform: rotate(360deg); }
|
||||
}
|
||||
@-webkit-keyframes oc-rotate-loader {
|
||||
0% { -webkit-transform: rotate(0deg); }
|
||||
100% { -webkit-transform: rotate(360deg); }
|
||||
}
|
||||
@-o-keyframes oc-rotate-loader {
|
||||
0% { -o-transform: rotate(0deg); }
|
||||
100% { -o-transform: rotate(360deg); }
|
||||
}
|
||||
@-ms-keyframes oc-rotate-loader {
|
||||
0% { -ms-transform: rotate(0deg); }
|
||||
100% { -ms-transform: rotate(360deg); }
|
||||
}
|
||||
@keyframes oc-rotate-loader {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
//
|
||||
// Infinite loading animation
|
||||
// --------------------------------------------------
|
||||
|
||||
@startVal: 100%;
|
||||
@start: 0;
|
||||
|
||||
.infinite-class (@index, @val) when (@index < 101) {
|
||||
@tmpSelector: ~"@{index}%";
|
||||
@{tmpSelector} { transform: translateX(-@val); }
|
||||
.infinite-class((@index + 10), (@val - (@val / 2)));
|
||||
}
|
||||
|
||||
@keyframes wn-infinite-loader {
|
||||
.infinite-class(@start, @startVal);
|
||||
}
|
||||
@keyframes oc-infinite-loader {
|
||||
.infinite-class(@start, @startVal);
|
||||
}
|
||||
247
modules/system/assets/less/styles.less
Normal file
247
modules/system/assets/less/styles.less
Normal file
@@ -0,0 +1,247 @@
|
||||
// Basic grid system
|
||||
@import "../ui/less/site.less";
|
||||
@import "../ui/less/icon.less";
|
||||
|
||||
@font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
@color-base: #405261;
|
||||
@color-warning: #c84530;
|
||||
@font-path: "../font"; // For icon fonts
|
||||
|
||||
body {
|
||||
padding-top: 20px;
|
||||
font-family: @font-family-base;
|
||||
background: #f3f3f3;
|
||||
color: @color-base;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5 {
|
||||
font-family: @font-family-base;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-weight: 300;
|
||||
font-size: 50px;
|
||||
margin-bottom: 15px;
|
||||
|
||||
i[class^="icon-"] {
|
||||
&:before {
|
||||
font-size: 46px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
i[class^="icon-"].warning {
|
||||
color: @color-warning;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
p.lead {
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
ul.indicators {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
.clearfix;
|
||||
|
||||
li {
|
||||
float: left;
|
||||
margin-right: 50px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-weight: 300;
|
||||
font-size: 12px;
|
||||
line-height: 100%;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Tables
|
||||
*/
|
||||
|
||||
table.data-table {
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 20px;
|
||||
|
||||
tr {
|
||||
&:first-child th {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
&:last-child td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
td:first-child,
|
||||
th:first-child {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
td:last-child,
|
||||
th:last-child {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
td, th {
|
||||
vertical-align: top;
|
||||
text-align: left;
|
||||
font-weight: 300;
|
||||
border: 1px solid #fff;
|
||||
padding: 6px 8px;
|
||||
&.right {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
thead {
|
||||
th, th {
|
||||
text-transform: uppercase;
|
||||
background: #7b8892;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
td, th {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
tr:nth-child(2n) {
|
||||
td, th {
|
||||
background-color: #d8d9db;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Error page
|
||||
*/
|
||||
|
||||
.exception-name-block {
|
||||
margin-bottom: 15px;
|
||||
|
||||
div, p {
|
||||
font-weight: 300;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
div {
|
||||
background: @color-warning;
|
||||
color: white;
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: " ";
|
||||
bottom: -6px;
|
||||
left: 20px;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
border-style: solid;
|
||||
border-width: 8px 8px 0 8px;
|
||||
border-color: @color-warning transparent transparent transparent;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
background: #ebebeb;
|
||||
margin-bottom: 0;
|
||||
span {
|
||||
color: lighten(@color-base, 30%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.syntaxhighlighter {
|
||||
margin-bottom: 30px;
|
||||
background: white;
|
||||
font: 12px/170% Monaco, Menlo, 'Ubuntu Mono', 'Droid Sans Mono', 'Courier New', monospace!important;
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
|
||||
td {
|
||||
padding: 5px 0;
|
||||
|
||||
&.gutter {
|
||||
padding: 5px 10px;
|
||||
width: 35px;
|
||||
background: #7b8892;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.code {
|
||||
overflow-x: auto;
|
||||
width: 100% !important;
|
||||
|
||||
.container {
|
||||
width: 100% !important;
|
||||
padding: 0;
|
||||
|
||||
div.line {
|
||||
white-space: nowrap;
|
||||
padding-left: 10px;
|
||||
|
||||
&.highlighted {
|
||||
background: @color-warning;
|
||||
color: white;
|
||||
}
|
||||
|
||||
code {
|
||||
font: 12px/170% Monaco, Menlo, 'Ubuntu Mono', 'Droid Sans Mono', 'Courier New', monospace!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* ICONS
|
||||
* We are loading only the icons required for the standard views here.
|
||||
*/
|
||||
|
||||
.icon-chain-broken::before {
|
||||
content: "\f127";
|
||||
}
|
||||
.icon-lock::before {
|
||||
content: "\f023";
|
||||
}
|
||||
.icon-database::before {
|
||||
content: "\f1c0";
|
||||
}
|
||||
.icon-power-off::before {
|
||||
content: "\f011";
|
||||
}
|
||||
.icon-code-fork::before {
|
||||
content: "\e13b";
|
||||
}
|
||||
.icon-wrench::before {
|
||||
content: "\f0ad";
|
||||
}
|
||||
89
modules/system/assets/less/updates/details.less
Normal file
89
modules/system/assets/less/updates/details.less
Normal file
@@ -0,0 +1,89 @@
|
||||
@import "../../../../backend/assets/less/core/boot.less";
|
||||
|
||||
@padding-container: 0;
|
||||
|
||||
.plugin-details-content {
|
||||
padding: 0 @padding-container;
|
||||
|
||||
> *:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1 { font-size: @font-size-h1 - 8; }
|
||||
h2 { font-size: @font-size-h2 - 6; }
|
||||
h3 { font-size: @font-size-h3 - 4; }
|
||||
h4 { font-size: @font-size-h4 - 1; }
|
||||
|
||||
h1, h2 { padding-bottom: 10px; border-bottom: 1px solid #ccc; }
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
padding-left: @padding-standard;
|
||||
}
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
border: none;
|
||||
margin: 10px -(@padding-standard + @padding-container) 20px;
|
||||
padding: 10px 10px 10px (@padding-standard + @padding-container);
|
||||
font-size: 13px;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
color: #fff;
|
||||
background-color: #333;
|
||||
code {
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
white-space: pre-wrap;
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
ul pre,
|
||||
ol pre {
|
||||
margin-left: -((@padding-standard * 2) + @padding-container);
|
||||
padding-left: ((@padding-standard * 2) + @padding-container);
|
||||
}
|
||||
|
||||
table {
|
||||
th {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 6px 13px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
tr {
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #ccc;
|
||||
|
||||
&:nth-child(2n) {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
dl {
|
||||
dt, dd {
|
||||
margin-bottom: (@padding-standard / 2);
|
||||
}
|
||||
dt {
|
||||
width: 75px;
|
||||
float: left;
|
||||
text-align: right;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
dd {
|
||||
margin-left: 85px;
|
||||
}
|
||||
}
|
||||
}
|
||||
311
modules/system/assets/less/updates/install.less
Normal file
311
modules/system/assets/less/updates/install.less
Normal file
@@ -0,0 +1,311 @@
|
||||
@import "../../../../backend/assets/less/core/boot.less";
|
||||
|
||||
.product-list-empty {
|
||||
padding: 5px 0;
|
||||
font-size: 16px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.product-list {
|
||||
margin: 0;
|
||||
padding: 10px 0;
|
||||
overflow: hidden; /* clearfix */
|
||||
li {
|
||||
button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
opacity: 0;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
button, .image, .details {
|
||||
.transition(opacity .2s linear);
|
||||
}
|
||||
}
|
||||
li:hover {
|
||||
button {
|
||||
opacity: .3;
|
||||
}
|
||||
button:hover {
|
||||
opacity: .8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.plugin-list {
|
||||
li {
|
||||
list-style: none;
|
||||
position: relative;
|
||||
border-bottom: 1px solid #E6E9E9;
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 10px;
|
||||
overflow: hidden;
|
||||
.image {
|
||||
float: left;
|
||||
margin-right: 15px;
|
||||
margin-left: 5px;
|
||||
img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
.details {
|
||||
p {
|
||||
padding: 0;
|
||||
margin: 3px 0 0 0;
|
||||
color: #808C8D;
|
||||
}
|
||||
}
|
||||
h4 {
|
||||
padding: 5px 0 0;
|
||||
margin: 0;
|
||||
color: #C03F31;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
.theme-list {
|
||||
li {
|
||||
float: left;
|
||||
padding: 0;
|
||||
margin: 0 10px 10px 0;
|
||||
list-style: none;
|
||||
border: 1px solid #E6E9E9;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
.border-radius(3px);
|
||||
.transition(border .2s linear);
|
||||
.image {
|
||||
padding: 5px;
|
||||
img {
|
||||
width: 210px;
|
||||
height: 140px;
|
||||
}
|
||||
}
|
||||
.details {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
padding: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
h4 {
|
||||
padding: 15px 0 0;
|
||||
margin: 0;
|
||||
}
|
||||
p {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: #999;
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
li:hover {
|
||||
border-color: transparent;
|
||||
.image {
|
||||
opacity: 0;
|
||||
}
|
||||
.details {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.suggested-products {
|
||||
padding: 0;
|
||||
.product {
|
||||
padding: 0;
|
||||
}
|
||||
.image {
|
||||
float: left;
|
||||
position: relative;
|
||||
img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
.details {
|
||||
margin-left: 50px;
|
||||
padding: 10px 0;
|
||||
h5 {
|
||||
margin: 0 0 3px;
|
||||
font-size: 14px;
|
||||
color: #C03F31;
|
||||
font-weight: 400;
|
||||
}
|
||||
p {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
a {
|
||||
color: #777;
|
||||
background: #fff;
|
||||
padding: 5px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
border-bottom: 1px solid #E6E9E9;
|
||||
}
|
||||
a:hover {
|
||||
color: #333;
|
||||
background: #f9f9f9;
|
||||
.image:after {
|
||||
content: "+";
|
||||
color: #999;
|
||||
font-size: 32px;
|
||||
display: block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: 0;
|
||||
}
|
||||
.image {
|
||||
img {
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.suggested-themes {
|
||||
.image {
|
||||
img {
|
||||
width: 60px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
.details {
|
||||
margin-left: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
/*!
|
||||
* Typeahead
|
||||
*/
|
||||
|
||||
.product-search {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin: 0 auto 0 auto;
|
||||
text-align: left;
|
||||
padding-bottom: 15px;
|
||||
|
||||
> i.icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 15px;
|
||||
font-size: 24px;
|
||||
margin-top: -20px;
|
||||
color: rgba(0,0,0,.35);
|
||||
}
|
||||
|
||||
> i.icon.loading {
|
||||
display: block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: url('../../../../system/assets/ui/images/loader-transparent.svg') 50% 50%;
|
||||
background-size: 24px 24px;
|
||||
.animation(spin 1s linear infinite);
|
||||
}
|
||||
}
|
||||
.twitter-typeahead {
|
||||
width: 100%;
|
||||
}
|
||||
.typeahead, .tt-hint {
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
padding: 8px 12px;
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
border: 1px solid #024e6a;
|
||||
.border-radius(3px);
|
||||
outline: none;
|
||||
}
|
||||
.typeahead {
|
||||
background-color: #fff;
|
||||
border-color: #e0e0e0;
|
||||
}
|
||||
.tt-input {
|
||||
font-weight: 200;
|
||||
}
|
||||
.tt-input:focus {
|
||||
border-color: #E6E9E9;
|
||||
}
|
||||
.tt-hint {
|
||||
color: #999;
|
||||
font-weight: 200;
|
||||
}
|
||||
.tt-dropdown-menu {
|
||||
width: 100%;
|
||||
margin-top: 0;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
.border-radius(3px);
|
||||
.box-shadow(0 5px 10px rgba(0,0,0,.2));
|
||||
}
|
||||
.tt-suggestion {
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
+ .tt-suggestion {
|
||||
font-size: 14px;
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
}
|
||||
.tt-suggestions {
|
||||
.product-details {
|
||||
padding: 5px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.product-image {
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
img {
|
||||
height: 45px;
|
||||
width: 45px;
|
||||
}
|
||||
}
|
||||
.product-name {
|
||||
font-size: 20px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
}
|
||||
.tt-suggestion.tt-cursor {
|
||||
cursor: pointer;
|
||||
.product-details {
|
||||
color: #333;
|
||||
background: #f9f9f9;
|
||||
border-color: #f0f0f0;
|
||||
.product-image:after {
|
||||
content: "+";
|
||||
color: #999;
|
||||
font-size: 38px;
|
||||
display: block;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
text-align: center;
|
||||
line-height: 45px;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
}
|
||||
.product-image {
|
||||
img {
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
121
modules/system/assets/less/updates/updates.less
Normal file
121
modules/system/assets/less/updates/updates.less
Normal file
@@ -0,0 +1,121 @@
|
||||
@import "../../../../backend/assets/less/core/boot.less";
|
||||
|
||||
.important-update-label {
|
||||
margin: 7px 0;
|
||||
}
|
||||
|
||||
.control-updatelist {
|
||||
|
||||
border: 1px solid #ccc;
|
||||
margin-bottom: @line-height-computed;
|
||||
|
||||
.update-item {
|
||||
|
||||
border-bottom: 1px solid #ccc;
|
||||
|
||||
.item-header {
|
||||
background-color: #f5f5f5;
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding: 0 10px;
|
||||
|
||||
h5 {
|
||||
margin: 0;
|
||||
padding: 15px 0;
|
||||
text-transform: uppercase;
|
||||
font-size: 13px;
|
||||
|
||||
i {
|
||||
margin-right: 7px;
|
||||
color: @color-text-title;
|
||||
}
|
||||
|
||||
small {
|
||||
text-transform: none;
|
||||
float: right;
|
||||
line-height: 13px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.important-update {
|
||||
padding: 7px 0 0 0;
|
||||
float: right;
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
dl {
|
||||
padding: 10px;
|
||||
margin-bottom: 0;
|
||||
.clearfix;
|
||||
|
||||
dt, dd {
|
||||
float: left;
|
||||
padding: 5px 0;
|
||||
line-height: 20px;
|
||||
&.text-muted {
|
||||
color: #999 !important;
|
||||
}
|
||||
}
|
||||
|
||||
dt {
|
||||
width: 15%;
|
||||
clear: left;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #2b3e50;
|
||||
}
|
||||
dd {
|
||||
width: 85%;
|
||||
font-size: 12px;
|
||||
color: #455152;
|
||||
}
|
||||
|
||||
.important-update-label {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
background-color: #e01346;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
padding: .2em .6em .3em;
|
||||
font-size: 75%;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
.border-radius(.25em);
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&.item-danger {
|
||||
.item-header {
|
||||
background-color: @state-danger-bg;
|
||||
h5, i, & { color: @state-danger-text; }
|
||||
}
|
||||
}
|
||||
|
||||
&.item-success {
|
||||
.item-header {
|
||||
background-color: @state-success-bg;
|
||||
h5, i, & { color: @state-success-text; }
|
||||
}
|
||||
}
|
||||
|
||||
&.item-muted {
|
||||
border-bottom: none;
|
||||
|
||||
.item-header {
|
||||
h5, i, & { color: rgba(0,0,0,.35); }
|
||||
}
|
||||
dl {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user