init commit
This commit is contained in:
223
plugins/xskin/assets/styles/_elastic_skins_commons.scss
Normal file
223
plugins/xskin/assets/styles/_elastic_skins_commons.scss
Normal file
@ -0,0 +1,223 @@
|
||||
@import "../../../xframework/assets/styles/_colors";
|
||||
|
||||
@mixin basic-styles() {
|
||||
//*:not(.flatpickr-day),
|
||||
// *:not(.fc-timegrid-now-indicator-arrow),
|
||||
// *:not(.fc-timegrid-now-indicator-line) {
|
||||
:not(.flatpickr-calendar *, .error) {
|
||||
@include border-color;
|
||||
}
|
||||
|
||||
body #layout > #layout-menu .special-buttons {
|
||||
&, a {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
.popupmenu .listing li.selected,
|
||||
.popupmenu .listing li>a:not(.disabled):hover,
|
||||
.popover .menu li a:not(.disabled):hover,
|
||||
{
|
||||
@include background-highlight-color(5, true);
|
||||
@include text-color(true);
|
||||
}
|
||||
|
||||
html.dark-mode {
|
||||
.messagelist tr:not(.flagged):not(.deleted).selected td.subject {
|
||||
a,
|
||||
span.msgicon.status {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#layout #xsidebar {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin secondary-button-styles() {
|
||||
div.tox .tox-button.tox-button--secondary, // html editor
|
||||
.mce-window .mce-foot .mce-btn,
|
||||
.btn.btn-secondary:not(.btn.btn-danger):not(.xanchor),
|
||||
.btn.btn-link {
|
||||
@include background-highlight-color(8);
|
||||
border: 1px solid;
|
||||
@include text-color(true);
|
||||
@include border-strong-color(true);
|
||||
|
||||
&:hover {
|
||||
@include background-highlight-color(12, true);
|
||||
}
|
||||
|
||||
&.ui-dialog-titlebar-close {
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mce-window .mce-foot .mce-btn button {
|
||||
@include text-color(true);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin primary-button-colors($background, $backgroundHighlight) {
|
||||
.btn.btn-primary,
|
||||
.btn.btn-success,
|
||||
div.tox .tox-dialog__footer .tox-button, // html editor
|
||||
.mce-window .mce-foot .mce-btn.mce-primary,
|
||||
.floating-action-buttons a.button {
|
||||
background-color: $background !important;
|
||||
border: 1px solid $background !important;
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
background-color: $backgroundHighlight !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn.disabled,
|
||||
.btn:disabled {
|
||||
&, &:hover {
|
||||
//border: 1px solid #777 !important;
|
||||
//background-color: #777 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mce-window .mce-foot .mce-btn.mce-primary button {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin switchbox-colors($normalColor, $highlightColor) {
|
||||
.custom-switch .custom-control-input:checked ~ .custom-control-label {
|
||||
&:before {
|
||||
background-color: $normalColor !important;
|
||||
border: 1px solid $normalColor !important;
|
||||
}
|
||||
|
||||
&:hover:before {
|
||||
background-color: $highlightColor !important;
|
||||
border: 1px solid $highlightColor !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mce-window .mce-checkbox i.mce-i-checkbox {
|
||||
color: #c0c0c0;
|
||||
}
|
||||
|
||||
.mce-window .mce-checkbox.mce-checked i.mce-i-checkbox {
|
||||
color: $normalColor !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin input-colors($borderColor) {
|
||||
.custom-file-label:focus:not(.is-invalid),
|
||||
.form-control:focus:not(.is-invalid),
|
||||
.recipient-input.focus,
|
||||
.mce-tinymce.focused,
|
||||
div.tox.focused {
|
||||
border-color: $borderColor !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin anchor-colors($normalColor, $darkModeColor) {
|
||||
a,
|
||||
button.xanchor,
|
||||
div.tox .tox-dialog .tox-dialog__body-nav-item--active,
|
||||
input.icon-checkbox + label:before,
|
||||
input.icon-checkbox:checked + label:before {
|
||||
color: $normalColor;
|
||||
|
||||
html.dark-mode & {
|
||||
color: $darkModeColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin listing-colors($background: false, $dmBackground: false, $text: false, $dmText: false) {
|
||||
#settings-menu li.selected,
|
||||
.listing tr.selected td,
|
||||
.listing li.selected > a,
|
||||
ul.treelist li.selected > div > a,
|
||||
ul.treelist li.selected > a,
|
||||
.toolbarmenu.listing li:hover a.active {
|
||||
@if $background {
|
||||
background-color: $background;
|
||||
}
|
||||
|
||||
@if $text {
|
||||
color: $text;
|
||||
} @else {
|
||||
@include text-color;
|
||||
}
|
||||
|
||||
html.dark-mode & {
|
||||
@if $dmBackground {
|
||||
background-color: $dmBackground;
|
||||
}
|
||||
|
||||
@if $dmText {
|
||||
color: $dmText;
|
||||
} @else {
|
||||
@include text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin unread-count-colors($background, $dmBackground: false, $text: false, $dmText: false) {
|
||||
.folderlist li.mailbox .unreadcount {
|
||||
@if $background {
|
||||
background-color: $background !important;
|
||||
}
|
||||
|
||||
@if $text {
|
||||
color: $text;
|
||||
} @else {
|
||||
@include text-color;
|
||||
}
|
||||
|
||||
html.dark-mode & {
|
||||
@if $dmBackground {
|
||||
background-color: $dmBackground !important;
|
||||
}
|
||||
|
||||
@if $dmText {
|
||||
color: $dmText;
|
||||
} @else {
|
||||
@include text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin logo-background-color($background: false, $dmBackground: false) {
|
||||
#layout-menu .popover-header {
|
||||
@if $background {
|
||||
background-color: $background !important;
|
||||
}
|
||||
|
||||
html.dark-mode & {
|
||||
@if $dmBackground {
|
||||
background-color: $dmBackground !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin datepicker-colors($background: false, $dmBackground: false) {
|
||||
.ui-datepicker {
|
||||
a.ui-state-active {
|
||||
@if $background {
|
||||
background-color: $background !important;
|
||||
}
|
||||
|
||||
html.dark-mode & {
|
||||
@if $dmBackground {
|
||||
background-color: $dmBackground !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
518
plugins/xskin/assets/styles/_larry_common.scss
Normal file
518
plugins/xskin/assets/styles/_larry_common.scss
Normal file
@ -0,0 +1,518 @@
|
||||
* {
|
||||
text-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
-o-box-shadow: none !important;
|
||||
-webkit-box-shadow: none !important;
|
||||
-moz-box-shadow: none !important;
|
||||
}
|
||||
|
||||
.ui-dialog {
|
||||
box-shadow: 1px 1px 18px #666 !important;
|
||||
}
|
||||
|
||||
*:focus { /* remove chrome border around active fields */
|
||||
outline: none;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
body,
|
||||
#login-form .box-inner,
|
||||
#login-form .box-bottom {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
a {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* buttons */
|
||||
|
||||
input[type="button"],
|
||||
input[type="submit"],
|
||||
input[type="reset"],
|
||||
button,
|
||||
button.ui-button,
|
||||
a.button,
|
||||
input.button {
|
||||
|
||||
&,
|
||||
.formbuttons & {
|
||||
border: 1px solid #adadad;
|
||||
color: #212121;
|
||||
background: #fff;
|
||||
font-weight: normal;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus,
|
||||
.formbuttons &:hover {
|
||||
border-color: #949494;
|
||||
color: #212121;
|
||||
background: #efefef;
|
||||
}
|
||||
}
|
||||
|
||||
body:not(.skin-litecube) {
|
||||
.prevpage,
|
||||
.nextpage {
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
.buttongroup a.button {
|
||||
background: #fff !important;
|
||||
|
||||
&.selected {
|
||||
background: #aaa !important;
|
||||
}
|
||||
}
|
||||
|
||||
#look-and-feel-shortcut a.btn {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-top: 8px;
|
||||
text-decoration: none;
|
||||
padding: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
ul.toolbarmenu li a.icon {
|
||||
padding-top: 6px !important;
|
||||
padding-bottom: 6px !important;
|
||||
}
|
||||
|
||||
#login-form input[type="text"],
|
||||
#login-form input[type="password"],
|
||||
input[type=text],
|
||||
input[type=email],
|
||||
input[type=password],
|
||||
textarea {
|
||||
margin-bottom: 0;
|
||||
padding: 5px;
|
||||
border: 1px solid #ccc !important;
|
||||
background: #fff;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
textarea:focus,
|
||||
textarea:hover,
|
||||
input[type=text]:focus,
|
||||
input[type=text]:hover,
|
||||
input[type=password]:focus,
|
||||
input[type=password]:hover,
|
||||
select:focus,
|
||||
select:hover {
|
||||
border-color: #8f8f8f;
|
||||
}
|
||||
|
||||
.propform {
|
||||
fieldset > legend {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
|
||||
input[type=text],
|
||||
input[type=password],
|
||||
input[type=email],
|
||||
select {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
&.error {
|
||||
border-color: #d30000 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
/*margin-bottom: 8px;*/
|
||||
margin-right: 4px;
|
||||
border: 1px solid #ccc;
|
||||
padding: 5px;
|
||||
background: #fff;
|
||||
border-radius: 0 !important;
|
||||
color: #333;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
select.decorated option {
|
||||
background: #fff;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border-radius: 0 !important;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
legend {
|
||||
font-weight: normal !important;
|
||||
font-style: normal !important;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.messagelist tr>.flag span,
|
||||
.messagelist tr>.status span,
|
||||
.messagelist tr>.attachment span,
|
||||
.messagelist tr>.priority span {
|
||||
text-indent: 0;
|
||||
}
|
||||
|
||||
#interface-options span.tooltip {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#messagestack div:after {
|
||||
position: absolute !important;
|
||||
}
|
||||
|
||||
.formbuttons {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.ui-dialog-titlebar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
button {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
body.iframe .footerleft.floating,
|
||||
#composeview-bottom .formbuttons.floating {
|
||||
right: 0;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
body.print-message,
|
||||
#printmessageframe {
|
||||
background: #fff !important;
|
||||
}
|
||||
|
||||
.minicolors-swatch .minicolors-swatch-color {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* iehacks */
|
||||
|
||||
input.button,
|
||||
.formbuttons input.button,
|
||||
.formbuttons input.button:active,
|
||||
input.button.mainaction,
|
||||
input.button.mainaction:active,
|
||||
a.button,
|
||||
a.button.pressed,
|
||||
a.button:active,
|
||||
input.button:active,
|
||||
.pagenav.dark a.button,
|
||||
.pagenav.dark a.button.pressed,
|
||||
#message.statusbar,
|
||||
.ui-dialog.popupmessage .ui-dialog-titlebar,
|
||||
.ui-dialog.popupmessage .ui-widget-content,
|
||||
#topnav,
|
||||
.records-table tr.selected td,
|
||||
.contentbox .boxtitle,
|
||||
body.iframe .boxtitle,
|
||||
#login-form input.button,
|
||||
#login-form input.button:active,
|
||||
.toolbar a.button,
|
||||
a.menuselector,
|
||||
a.menuselector:active,
|
||||
.googie_list td.googie_list_onhover,
|
||||
ul.toolbarmenu li a.active:hover,
|
||||
#rcmKSearchpane ul li.selected,
|
||||
.tabsbar .tablink,
|
||||
.tabsbar .selected a,
|
||||
.contactfieldgroup,
|
||||
.contactfieldgroup legend,
|
||||
#messagelistfooter,
|
||||
#mailboxlist li.mailbox .unreadcount,
|
||||
#mailboxlist li.mailbox.selected > a .unreadcount,
|
||||
#messageheader, #partheader, #composeheaders,
|
||||
#previewheaderstoggle {
|
||||
filter: none;
|
||||
}
|
||||
|
||||
/* login */
|
||||
|
||||
#login-form td.title {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
#login-form input[type="text"],
|
||||
#login-form input[type="password"] {
|
||||
border: 1px solid #ddd;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
#ifplcontainer div label {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
#login-form {
|
||||
select#_language {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* switch checkboxes */
|
||||
|
||||
input.switchbox-input {
|
||||
opacity: 0 !important;
|
||||
position: absolute !important;
|
||||
}
|
||||
|
||||
label.switchbox {
|
||||
font-size: 1em;
|
||||
position: relative;
|
||||
display: inline-block !important;
|
||||
padding: 0 !important;
|
||||
width: 2em !important;
|
||||
height: 1.1em !important;
|
||||
background: #a5a5a5 !important;
|
||||
border: 1px solid #ddd !important;
|
||||
border-radius: 1em !important;
|
||||
vertical-align: -0.15em !important;
|
||||
transition: all 0.5s cubic-bezier(.17,.67,.43,.98);
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
label.switchbox:hover {
|
||||
background: #ddd !important;
|
||||
}
|
||||
|
||||
label.switchbox:after {
|
||||
position: absolute !important;
|
||||
display: block !important;
|
||||
content: '' !important;
|
||||
top: 1px !important;
|
||||
left: 1px !important;
|
||||
bottom: 1px !important;
|
||||
width: 1em !important;
|
||||
border-radius: 50% !important;
|
||||
background: #fff !important;
|
||||
box-shadow: 0 0 0.1em 0 #aaa !important;
|
||||
}
|
||||
|
||||
input.switchbox-input:checked + label.switchbox {
|
||||
background: #4cd964 !important;
|
||||
border-color: #4cd964 !important;
|
||||
}
|
||||
|
||||
input.switchbox-input:checked + label.switchbox:hover {
|
||||
background: #41c658 !important;
|
||||
}
|
||||
|
||||
input.switchbox-input:checked + label.switchbox:after {
|
||||
left: auto !important;
|
||||
right: 1px !important;
|
||||
box-shadow: 0 0 0.1em 0 #aaa !important;
|
||||
}
|
||||
|
||||
body.xskin input.switchbox-input:disabled + label.switchbox,
|
||||
body.xskin input.switchbox-input:checked:disabled + label.switchbox {
|
||||
background: #ddd !important;
|
||||
border-color: #ddd !important;
|
||||
cursor:not-allowed;
|
||||
}
|
||||
|
||||
input.switchbox-input:disabled + label.switchbox:after,
|
||||
input.switchbox-input:checked:disabled + label.switchbox:after {
|
||||
background: #eee !important;
|
||||
}
|
||||
|
||||
// fix positioning
|
||||
#subscription-table label.switchbox,
|
||||
#subscription-table label.material.checkbox {
|
||||
left: auto !important;
|
||||
}
|
||||
|
||||
/* compose */
|
||||
|
||||
.mce-btn,
|
||||
.mce-btn button,
|
||||
button.mce-close {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
margin-right: 2px !important;
|
||||
}
|
||||
|
||||
.mce-btn .mce-txt,
|
||||
.mce-btn button {
|
||||
color: #333 !important;
|
||||
}
|
||||
|
||||
.mce-colorbutton:hover .mce-open {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
|
||||
i.mce-i-backcolor {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.mce-widget button {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
#composeoptions {
|
||||
border: none;
|
||||
}
|
||||
|
||||
#composeheaders .moreheaderstoggle {
|
||||
border: none !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.moreheaderstoggle .iconlink {
|
||||
top: auto;
|
||||
bottom: 2px;
|
||||
}
|
||||
|
||||
.moreheaderstoggle.remove .iconlink {
|
||||
bottom: 2px;
|
||||
}
|
||||
|
||||
#composebodycontainer .mce-tinymce {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#compose-attachments {
|
||||
top: 0;
|
||||
border: 0;
|
||||
border-left: 1px solid #DFDFDF;
|
||||
}
|
||||
|
||||
#composebodycontainer .mce-edit-area {
|
||||
border-top: 1px solid #DFDFDF !important;
|
||||
}
|
||||
|
||||
// html editor buttons
|
||||
|
||||
button.tox-tbtn,
|
||||
button.tox-button,
|
||||
button.mce-close {
|
||||
color: #222f3e !important;
|
||||
background: transparent !important;
|
||||
|
||||
&:hover {
|
||||
background: #dee0e2 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.tox-dialog {
|
||||
border: 1px solid #bbbbbb;
|
||||
}
|
||||
|
||||
.tox-dialog__footer {
|
||||
button.tox-button {
|
||||
background: #fff;
|
||||
border: 1px solid #aaa;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
button.tox-button--secondary {
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* plugin: treecol */
|
||||
|
||||
#mailview-tc-mid,
|
||||
#mailview-tc-right {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* plugin: xcalendar */
|
||||
|
||||
.xcalendar .fc-state-default, .xcalendar .boxtitle button {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* plugin: help */
|
||||
|
||||
#helptoolbar a.button.help {
|
||||
display: none; // this button doesn't do anything
|
||||
}
|
||||
|
||||
/* plugin: rcguard */
|
||||
|
||||
#recaptcha_area {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
/* plugin managesieve */
|
||||
|
||||
#filter-form {
|
||||
select,
|
||||
input,
|
||||
textarea {
|
||||
font-size: 1em;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.rulerow .listarea {
|
||||
padding: 0;
|
||||
border: 1px solid #ddd;
|
||||
background: transparent;
|
||||
|
||||
.listelement {
|
||||
height: auto;
|
||||
|
||||
.reset {
|
||||
margin-top: 3px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 4px !important;
|
||||
background: transparent;
|
||||
border: none !important;
|
||||
line-height: normal;
|
||||
margin-left: 5px;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* plugin: filters */
|
||||
|
||||
.xskin #pluginbody #filters-form {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: auto;
|
||||
|
||||
.uibox.listbox.scroller {
|
||||
position: static;
|
||||
margin-top: 0 !important;
|
||||
border: none;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.boxcontent {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
97
plugins/xskin/assets/styles/_larry_desktop_light.scss
Normal file
97
plugins/xskin/assets/styles/_larry_desktop_light.scss
Normal file
@ -0,0 +1,97 @@
|
||||
|
||||
.uibox .boxtitle,
|
||||
.uibox .listing thead td,
|
||||
.uibox .listing thead th {
|
||||
background: #aaa;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
a.menuselector {
|
||||
color: #333 !important;
|
||||
border: 1px solid #ccc;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
#mailboxlist li.mailbox ul {
|
||||
border-top-color: #ddd;
|
||||
}
|
||||
|
||||
.toolbar a.button,
|
||||
.pagenavbuttons a.button {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.popupmenu,
|
||||
#rcmKSearchpane {
|
||||
border-color: #999;
|
||||
border-width: 2px !important;
|
||||
border-style: solid !important;
|
||||
background: #fff;
|
||||
color: #333;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.popupmenu li,
|
||||
.popupmenu a {
|
||||
background-image: none !important;
|
||||
}
|
||||
|
||||
.popupmenu a,
|
||||
.googie_list td span,
|
||||
ul.toolbarmenu li a {
|
||||
color: #aaa;
|
||||
|
||||
&.active {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
#enigmamenu {
|
||||
overflow-y: hidden;
|
||||
|
||||
label {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.googie_list td,
|
||||
ul.toolbarmenu li,
|
||||
ul.toolbarmenu li label,
|
||||
ul.toolbarmenu li a.icon,
|
||||
#rcmKSearchpane ul li {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.googie_list td.googie_list_onhover,
|
||||
ul.toolbarmenu li a.active:hover,
|
||||
ul.toolbarmenu li a.active:focus,
|
||||
#rcmKSearchpane ul li.selected,
|
||||
select.decorated option:hover,
|
||||
select.decorated option[selected='selected'] {
|
||||
background: #e9e9e9 !important;
|
||||
}
|
||||
|
||||
.googie_list td span, ul.toolbarmenu li a.active {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.popupmenu a:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#background-more-actions a {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
#interface-options {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
// plugin: primitivenotes
|
||||
#newmenu.popupmenu a {
|
||||
color: #333 !important;
|
||||
|
||||
&:hover {
|
||||
background: #e9e9e9;
|
||||
}
|
||||
}
|
||||
27
plugins/xskin/assets/styles/_larry_desktop_square.scss
Normal file
27
plugins/xskin/assets/styles/_larry_desktop_square.scss
Normal file
@ -0,0 +1,27 @@
|
||||
|
||||
a.button,
|
||||
.uibox,
|
||||
.uibox .boxtitle,
|
||||
.uibox .listing thead td,
|
||||
.uibox .listing thead th,
|
||||
a.menuselector,
|
||||
#messagestack .notice,
|
||||
input.button,
|
||||
.formbuttons input.button,
|
||||
input.button.mainaction,
|
||||
input.button.mainaction:active,
|
||||
#login-form input.button,
|
||||
#mailboxlist li,
|
||||
.listbox .boxfooter,
|
||||
.contentbox .boxtitle,
|
||||
body.iframe .boxtitle,
|
||||
.contactfieldgroup legend,
|
||||
.records-table thead td,
|
||||
.records-table thead th,
|
||||
#messagelistfooter,
|
||||
.popupmenu,
|
||||
#rcmKSearchpane,
|
||||
body.xlarry-font-icons #mailboxlist li.mailbox .unreadcount,
|
||||
.minicolors-swatch .minicolors-swatch-color {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
212
plugins/xskin/assets/styles/_options.scss
Normal file
212
plugins/xskin/assets/styles/_options.scss
Normal file
@ -0,0 +1,212 @@
|
||||
@import "../../../xframework/assets/styles/_colors";
|
||||
|
||||
@mixin font-family($font) {
|
||||
body, button, input, optgroup, select, textarea, .popover {
|
||||
font-family: $font;
|
||||
}
|
||||
}
|
||||
|
||||
// user option: font family
|
||||
html.xfont-family-arial { @include font-family((Arial, Helvetica, sans-serif)); }
|
||||
html.xfont-family-courier { @include font-family(("Courier New", Courier, monospace)); }
|
||||
html.xfont-family-merienda { @include font-family(('Merienda', cursive)); }
|
||||
html.xfont-family-montserrat { @include font-family(('Montserrat Alternates', sans-serif)); }
|
||||
html.xfont-family-noto-sans { @include font-family(('Noto Sans', sans-serif)); }
|
||||
html.xfont-family-quattrocento { @include font-family(('Quattrocento', serif)); }
|
||||
html.xfont-family-roboto { @include font-family(("Roboto", sans-serif)); }
|
||||
html.xfont-family-sarala { @include font-family(('Sarala', sans-serif)); }
|
||||
html.xfont-family-times { @include font-family(("Times New Roman", Times, serif)); }
|
||||
html.xfont-family-ubuntu { @include font-family(('Ubuntu', sans-serif)); }
|
||||
|
||||
// user option: font thickness
|
||||
html.xthick-font-yes body * {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
|
||||
// user option: font size
|
||||
html, body {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
html.xfont-size-xs {
|
||||
&, body { font-size: 12px; }
|
||||
}
|
||||
|
||||
html.xfont-size-s {
|
||||
&, body { font-size: 13px; }
|
||||
|
||||
}
|
||||
html.xfont-size-l {
|
||||
&, body { font-size: 15px; }
|
||||
}
|
||||
|
||||
html.xfont-size-xl {
|
||||
&, body { font-size: 16px; }
|
||||
}
|
||||
|
||||
// user option: icons in lists
|
||||
body.xlist-icons-no {
|
||||
.scroller .listing.iconized li > a:before,
|
||||
.scroller .listing.iconized tr > td.section:before,
|
||||
.scroller .listing.iconized tr.contact > td:before,
|
||||
.scroller .folderlist li > a:before,
|
||||
.popupmenu:not(#spell-menu) .listing a:before {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// user option: icons on buttons
|
||||
body.xbutton-icons-no button.btn {
|
||||
&:not(.ui-dialog-titlebar-close):before {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// skin option: normal (not bold) header font
|
||||
body.xnormal-header-font {
|
||||
#layout > div > .header,
|
||||
#layout > div > .footer,
|
||||
.folderlist li.mailbox .unreadcount,
|
||||
#sidebar-calendar .ui-datepicker select {
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
// skin option: inverted colors on header
|
||||
body.xinverted-header-colors {
|
||||
&.xsidebar-mobile-visible #xsidebar #xsidebar-mobile-header a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#messagelist-header,
|
||||
#layout > div > .header {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
// skin option: no icons on taskbar
|
||||
@media screen and (min-width: 480px) {
|
||||
body.xno-taskbar-icons {
|
||||
#taskmenu a {
|
||||
padding: 0;
|
||||
height: 36px;
|
||||
font-size: 1rem;
|
||||
|
||||
&:before {
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
span.inner {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// skin option: no border radius
|
||||
body.xno-border-radius {
|
||||
* :not(.spinner) {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// skin option: inverted menu
|
||||
body.xinverted-menu {
|
||||
#sidebar-calendar .ui-datepicker {
|
||||
border-left: 1px solid !important;
|
||||
border-right: 1px solid !important;
|
||||
@include border-color(true);
|
||||
}
|
||||
|
||||
#layout>div>.header {
|
||||
background: #ddd;
|
||||
|
||||
|
||||
&,
|
||||
.menu.toolbar a,
|
||||
a.button,
|
||||
select {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.header {
|
||||
.listing li {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
#layout-sidebar,
|
||||
#layout-list,
|
||||
#layout-content {
|
||||
border: none !important;
|
||||
|
||||
.iframe-wrapper,
|
||||
.searchbar,
|
||||
.footer,
|
||||
.scroller {
|
||||
border-left: 1px solid;
|
||||
@include border-color;
|
||||
}
|
||||
|
||||
#calendar-list-container {
|
||||
border-right: 1px solid;
|
||||
@include border-color;
|
||||
}
|
||||
|
||||
// fix for rc 1.5 vs 1.4
|
||||
#compose-content {
|
||||
border-left: 1px solid;
|
||||
@include border-color;
|
||||
|
||||
.scroller {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#layout > div.sidebar {
|
||||
.pagenav,
|
||||
.scroller,
|
||||
.footer {
|
||||
border-left: 1px solid;
|
||||
@include border-color;
|
||||
}
|
||||
}
|
||||
|
||||
#layout > #layout-menu {
|
||||
border-right: none;
|
||||
|
||||
&,
|
||||
#taskmenu .action-buttons a {
|
||||
background-color: #F4F4F4 !important;
|
||||
}
|
||||
|
||||
#taskmenu a {
|
||||
@include text-color(true);
|
||||
background-color: transparent !important;
|
||||
|
||||
&.selected,
|
||||
&.selected:hover,
|
||||
&:hover {
|
||||
@include background-highlight-color(10, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html.dark-mode body.xinverted-menu {
|
||||
#layout > #layout-menu {
|
||||
background-color: #21292c !important;
|
||||
|
||||
#taskmenu .action-buttons a {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
.floating-action-buttons a {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
2
plugins/xskin/assets/styles/larry_desktop.css
Normal file
2
plugins/xskin/assets/styles/larry_desktop.css
Normal file
File diff suppressed because one or more lines are too long
7
plugins/xskin/assets/styles/larry_desktop.css.map
Normal file
7
plugins/xskin/assets/styles/larry_desktop.css.map
Normal file
File diff suppressed because one or more lines are too long
1039
plugins/xskin/assets/styles/larry_desktop.scss
Normal file
1039
plugins/xskin/assets/styles/larry_desktop.scss
Normal file
File diff suppressed because it is too large
Load Diff
2
plugins/xskin/assets/styles/larry_mobile.css
Normal file
2
plugins/xskin/assets/styles/larry_mobile.css
Normal file
File diff suppressed because one or more lines are too long
7
plugins/xskin/assets/styles/larry_mobile.css.map
Normal file
7
plugins/xskin/assets/styles/larry_mobile.css.map
Normal file
File diff suppressed because one or more lines are too long
3020
plugins/xskin/assets/styles/larry_mobile.scss
Normal file
3020
plugins/xskin/assets/styles/larry_mobile.scss
Normal file
File diff suppressed because it is too large
Load Diff
2
plugins/xskin/assets/styles/styles.css
Normal file
2
plugins/xskin/assets/styles/styles.css
Normal file
File diff suppressed because one or more lines are too long
7
plugins/xskin/assets/styles/styles.css.map
Normal file
7
plugins/xskin/assets/styles/styles.css.map
Normal file
File diff suppressed because one or more lines are too long
361
plugins/xskin/assets/styles/styles.scss
Normal file
361
plugins/xskin/assets/styles/styles.scss
Normal file
@ -0,0 +1,361 @@
|
||||
@import "_options";
|
||||
@import "../../../xframework/assets/styles/_colors";
|
||||
|
||||
.btn {
|
||||
// border: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
// gray out disabled dialog buttons
|
||||
.xelastic div.ui-dialog-buttonset button.btn:disabled {
|
||||
background-color: #aaa !important;
|
||||
}
|
||||
|
||||
.form-control:focus,
|
||||
.recipient-input.focus,
|
||||
.mce-tinymce.focused, // rc 1.4 html editor
|
||||
div.tox.focused, // rc 1.5 html editor
|
||||
div.tox .tox-color-input>input:focus,
|
||||
div.tox .tox-selectfield select:focus,
|
||||
div.tox .tox-textarea:focus,
|
||||
div.tox .tox-textfield:focus {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
body .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
|
||||
&, &:hover {
|
||||
@include text-color(true);
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
body.xelastic {
|
||||
.menu a:not(.disabled),
|
||||
.menu.toolbar .dropbutton:not(.disabled),
|
||||
.header a.button.icon:not(.disabled),
|
||||
.menu.toolbar .dropbutton a.dropdown,
|
||||
.menu.toolbar .menuitem:not(.select) {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: rgba(255, 255, 255, .15);
|
||||
}
|
||||
}
|
||||
|
||||
.menu span.dropbutton a {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html.dark-mode {
|
||||
#settings-menu li.selected,
|
||||
.listing tr.selected td,
|
||||
.listing li.selected,
|
||||
ul.treelist li.selected,
|
||||
ul.treelist li.selected,
|
||||
.toolbar a.button:not(.disabled):focus,
|
||||
.toolbar a.button:not(.disabled):hover,
|
||||
.toolbarmenu.listing li:hover a.active,
|
||||
.menu.toolbar .dropbutton:not(.disabled):hover,
|
||||
.popupmenu .listing li > a:not(.disabled):hover,
|
||||
#taskmenu a:hover,
|
||||
.header a.button.icon:not(.disabled):focus,
|
||||
.header a.button.icon:not(.disabled):hover,
|
||||
.menu a:not(.disabled):focus,
|
||||
.menu a:not(.disabled):hover {
|
||||
background-color: rgba(255, 255, 255, .06);
|
||||
}
|
||||
|
||||
.listing li.selected > a,
|
||||
ul.treelist li.selected > div > a,
|
||||
ul.treelist li.selected > a {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.popover {
|
||||
font-size: 1rem;
|
||||
|
||||
.menu li a[aria-haspopup]:hover:after {
|
||||
@include text-color;
|
||||
}
|
||||
}
|
||||
|
||||
// login page (both elastic and larry)
|
||||
|
||||
body.xskin.login-page {
|
||||
#login-title {
|
||||
display: block;
|
||||
margin: 0 0 20px 0;
|
||||
text-align: center;
|
||||
font-size: 1.8em;
|
||||
}
|
||||
|
||||
#logo {
|
||||
position: static;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
max-width: 100%;
|
||||
margin: auto;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
#login-footer,
|
||||
#bottomline {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 8px;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
text-align: left;
|
||||
color: #fff;
|
||||
font-size: 0.8em;
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#vendor-branding {
|
||||
position: fixed;
|
||||
bottom: 3px;
|
||||
right: 8px;
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
z-index: 1;
|
||||
background: rgba(0, 0, 0, .2);
|
||||
border-radius: 5px !important;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
line-height: 1em;
|
||||
|
||||
&:hover {
|
||||
background: #cc0000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// login page (elastic only)
|
||||
|
||||
body.xelastic.login-page {
|
||||
background: #f0f0f0;
|
||||
|
||||
#layout {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
#layout-content {
|
||||
overflow: visible;
|
||||
margin: 20vh auto 0 auto !important;
|
||||
color: #333;
|
||||
max-width: 100%;
|
||||
width: 420px;
|
||||
background: #fff !important;
|
||||
padding: 35px;
|
||||
flex: none;
|
||||
|
||||
#login-form {
|
||||
position: static;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
table {
|
||||
width: 100% !important;
|
||||
border-collapse: collapse;
|
||||
|
||||
tr.row {
|
||||
max-width: 100%;
|
||||
|
||||
td {
|
||||
display: block;
|
||||
padding-bottom: 5px;
|
||||
|
||||
&.title {
|
||||
display: block !important;
|
||||
line-height: 1.1em;
|
||||
padding-top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type='text'],
|
||||
input[type='password'],
|
||||
select {
|
||||
width: 100%;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-prepend {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.formbuttons {
|
||||
margin: 20px 0 0 0;
|
||||
|
||||
button {
|
||||
margin: 0;
|
||||
padding: 0.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.xbackground-login-image) #login-footer {
|
||||
background: transparent;
|
||||
|
||||
&, a {
|
||||
color: #717171;
|
||||
}
|
||||
}
|
||||
|
||||
html.dark-mode & {
|
||||
background: #21292c;
|
||||
|
||||
#layout-content {
|
||||
color: #f4f4f4;
|
||||
background-color: #313c40 !important;
|
||||
}
|
||||
|
||||
&:not(.xbackground-login-image) #login-footer {
|
||||
background: transparent;
|
||||
|
||||
&, a {
|
||||
color: #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// skin look and feel
|
||||
|
||||
.skin_look_and_feel {
|
||||
.color-box {
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin: 0 4px 4px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.xsave-hint {
|
||||
display: none;
|
||||
|
||||
&:before {
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// remove right border from lists
|
||||
html:not(.touch) .listing li>a:focus,
|
||||
html:not(.touch) .listing.focus tbody tr.focused>td:first-child,
|
||||
html:not(.touch) .listing.focus:not(.withselection) tbody tr.focused>td.selection+td {
|
||||
border-left-color: transparent;
|
||||
}
|
||||
|
||||
// correct icon positions and colors
|
||||
.popover-body :before {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
.input-group-text.icon:before {
|
||||
@include text-color;
|
||||
}
|
||||
|
||||
.xicons-outlined {
|
||||
.input-group-text.icon:before,
|
||||
.popover-body :before {
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.popover-header a.icon:before {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// checkboxes
|
||||
.custom-switch .custom-control-input {
|
||||
&:focus:not(:checked) ~ .custom-control-label::before {
|
||||
border-color: #adb5bd;
|
||||
}
|
||||
|
||||
&:focus ~ .custom-control-label::before {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
&:checked~.custom-control-label::before { // overwrite this in skin colors
|
||||
border-color: #888;
|
||||
background-color: #888;
|
||||
}
|
||||
}
|
||||
|
||||
// popupmenu
|
||||
@media screen and (min-width: 768px) {
|
||||
.popupmenu:not(#listoptions-menu) {
|
||||
@include border-color;
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
border-bottom: 1px solid;
|
||||
@include border-color;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
@include text-color;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
span {
|
||||
padding: 0;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
#button-apps span.inner {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
// reset button settings on smallest screens
|
||||
body.xelastic .ui-dialog-buttonpane .ui-dialog-buttonset .btn {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
#taskmenu a:focus {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user