From c176be9c9f1d5c0ca90d1993a5e736f094f2f91c Mon Sep 17 00:00:00 2001 From: Kijin Sung Date: Sat, 4 Aug 2018 23:20:45 +0900 Subject: [PATCH] Add an option to disable XE styles for .btn and .message To disable XE styles for .btn, .btn-group, and .btnArea: define('DISABLE_XE_BTN_STYLES', true); To disable XE styles for .message: define('DISABLE_XE_MSG_STYLES', true); This is a limited version of XE's __DISABLE_DEFAULT_CSS__ constant. Other styles and default CSS/JS resources are not affected. DO NOT UNLOAD DEFAULT CSS/JS RESOURCES. --- .../FrontEndFileHandler.class.php | 6 +- common/css/rhymix.less | 323 +++++++++--------- 2 files changed, 174 insertions(+), 155 deletions(-) diff --git a/classes/frontendfile/FrontEndFileHandler.class.php b/classes/frontendfile/FrontEndFileHandler.class.php index aa037c506..e21fb76c7 100644 --- a/classes/frontendfile/FrontEndFileHandler.class.php +++ b/classes/frontendfile/FrontEndFileHandler.class.php @@ -288,9 +288,11 @@ class FrontEndFileHandler extends Handler if (!file_exists($file->fileFullPath)) { return; - } - + } + $default_font_config = Context::get('default_font_config') ?: getController('editor')->default_font_config; + $file->vars['enable_xe_btn_styles'] = (defined('DISABLE_XE_BTN_STYLES') && DISABLE_XE_BTN_STYLES) ? 'false' : 'true'; + $file->vars['enable_xe_msg_styles'] = (defined('DISABLE_XE_MSG_STYLES') && DISABLE_XE_MSG_STYLES) ? 'false' : 'true'; $file->vars = array_merge($file->vars, $default_font_config); if ($file->fileExtension === 'less') { diff --git a/common/css/rhymix.less b/common/css/rhymix.less index 446ad1bd8..823c5f924 100644 --- a/common/css/rhymix.less +++ b/common/css/rhymix.less @@ -137,40 +137,6 @@ a img { border: 0; } -/* Message */ -.message { - position: relative; - margin: 1em 0; - padding: 0 1em; - border: 1px solid #ddd; - border-radius: 4px; - line-height: 1.4; - font-size: 13px; - text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); - background-color: #f8f8f8; - p { - margin: 1em 0 !important; - } - &.info { - border-color: #BCE8F1; - color: #3A87AD; - background-color: #D9EDF7; - } - &.error { - border-color: #EED3D7; - color: #B94A48; - background-color: #F2DEDE; - } - &.update { - border-color: #D6E9C6; - color: #468847; - background-color: #DFF0D8; - } -} -body > .message { - margin: 1em; -} - /* Waiting for server response */ .wfsr { z-index: 100; @@ -191,125 +157,6 @@ body > .message { background: #333 url("../../common/img/msg.loading.gif") no-repeat center 15px; } -/* Button */ -.btnArea { - clear: both; - margin: 10px 0; - padding: 0; - text-align: right; - zoom: 1; - &:after { - clear: both; - display: block; - content: ""; - } -} -.btn { - display: inline-block; - *display: inline; - margin: 0; - padding: 0 12px !important; - height: 24px !important; - overflow: visible; - border: 1px solid #bbbbbb; - border-color: #e6e6e6 #e6e6e6 #bfbfbf; - border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - border-bottom-color: #a2a2a2; - border-radius: 2px; - text-decoration: none !important; - text-align: center; - text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); - vertical-align: top; - line-height: 24px !important; - font-family: inherit; - font-size: 12px; - color: #333333; - *zoom: 1; - cursor: pointer; - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - background-color: #f5f5f5; - *background-color: #e6e6e6; - background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); - background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); - background-image: -webkit-gradient(top, #ffffff, #e6e6e6); - background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); - background-image: linear-gradient(top, #ffffff, #e6e6e6); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0); - filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); - &:hover, &:active, &[disabled] { - color: #333; - background-color: #e6e6e6; - *background-color: #d9d9d9; - } - >a, >button, >input, >span { - display: inline-block; - *zoom: 1; - margin: 0 -12px !important; - padding: 0 12px !important; - overflow: visible; - width: auto; - height: 24px; - border: 0; - vertical-align: top; - text-decoration: none !important; - line-height: 24px; - font-family: inherit; - font-size: 12px; - color: #333; - cursor: pointer; - background: none; - } -} -input.btn, button.btn { - height: 26px !important; -} -.btn-group { - position: relative; - display: inline-block; - *display: inline; - *margin-left: .3em; - white-space: nowrap; - vertical-align: middle; - font-size: 0; - *zoom: 1; - &:first-child { - *margin-left: 0; - } - &+.btn-group { - margin-left: 5px; - } - >.btn { - position: relative; - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; - &+.btn { - margin-left: -1px; - } - &:first-child { - margin-left: 0; - -webkit-border-bottom-left-radius: 4px; - -moz-border-radius-bottomleft: 4px; - border-bottom-left-radius: 4px; - -webkit-border-top-left-radius: 4px; - -moz-border-radius-topleft: 4px; - border-top-left-radius: 4px; - } - &:last-child { - -webkit-border-top-right-radius: 4px; - -moz-border-radius-topright: 4px; - border-top-right-radius: 4px; - -webkit-border-bottom-right-radius: 4px; - -moz-border-radius-bottomright: 4px; - border-bottom-right-radius: 4px; - } - &:hover, &:focus, &:active, &.active { - z-index: 2; - } - } -} - /* Debug */ #rhymix_debug_button { display: none; @@ -449,3 +296,173 @@ input.btn, button.btn { } } } + +/* Button (for XE compatibility */ +.btnArea_mixin(@enabled) when (@enabled = true) { + clear: both; + margin: 10px 0; + padding: 0; + text-align: right; + zoom: 1; + &:after { + clear: both; + display: block; + content: ""; + } +} +.btnArea_mixin(@enabled) when (@enabled = false) { } +.btnArea { + .btnArea_mixin(@enable_xe_btn); +} +.btn_mixin(@enabled) when (@enabled = true) { + display: inline-block; + *display: inline; + margin: 0; + padding: 0 12px !important; + height: 24px !important; + overflow: visible; + border: 1px solid #bbbbbb; + border-color: #e6e6e6 #e6e6e6 #bfbfbf; + border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); + border-bottom-color: #a2a2a2; + border-radius: 2px; + text-decoration: none !important; + text-align: center; + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); + vertical-align: top; + line-height: 24px !important; + font-family: inherit; + font-size: 12px; + color: #333333; + *zoom: 1; + cursor: pointer; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + background-color: #f5f5f5; + *background-color: #e6e6e6; + background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); + background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); + background-image: -webkit-gradient(top, #ffffff, #e6e6e6); + background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); + background-image: linear-gradient(top, #ffffff, #e6e6e6); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0); + filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); + &:hover, &:active, &[disabled] { + color: #333; + background-color: #e6e6e6; + *background-color: #d9d9d9; + } + >a, >button, >input, >span { + display: inline-block; + *zoom: 1; + margin: 0 -12px !important; + padding: 0 12px !important; + overflow: visible; + width: auto; + height: 24px; + border: 0; + vertical-align: top; + text-decoration: none !important; + line-height: 24px; + font-family: inherit; + font-size: 12px; + color: #333; + cursor: pointer; + background: none; + } + input&, button& { + height: 26px !important; + } +} +.btn_mixin(@enabled) when (@enabled = false) { } +.btn { + .btn_mixin(@enable_xe_btn); +} +.btn-group_mixin(@enabled) when (@enabled = true) { + position: relative; + display: inline-block; + *display: inline; + *margin-left: .3em; + white-space: nowrap; + vertical-align: middle; + font-size: 0; + *zoom: 1; + &:first-child { + *margin-left: 0; + } + &+.btn-group { + margin-left: 5px; + } + >.btn { + position: relative; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; + &+.btn { + margin-left: -1px; + } + &:first-child { + margin-left: 0; + -webkit-border-bottom-left-radius: 4px; + -moz-border-radius-bottomleft: 4px; + border-bottom-left-radius: 4px; + -webkit-border-top-left-radius: 4px; + -moz-border-radius-topleft: 4px; + border-top-left-radius: 4px; + } + &:last-child { + -webkit-border-top-right-radius: 4px; + -moz-border-radius-topright: 4px; + border-top-right-radius: 4px; + -webkit-border-bottom-right-radius: 4px; + -moz-border-radius-bottomright: 4px; + border-bottom-right-radius: 4px; + } + &:hover, &:focus, &:active, &.active { + z-index: 2; + } + } +} +.btn-group_mixin(@enabled) when (@enabled = false) { } +.btn-group { + .btn-group_mixin(@enable_xe_btn); +} + +/* Message (for XE compatibility) */ +@enabled: true; +.message_mixin(@enabled) when (@enabled = true) { + position: relative; + margin: 1em 0; + padding: 0 1em; + border: 1px solid #ddd; + border-radius: 4px; + line-height: 1.4; + font-size: 13px; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); + background-color: #f8f8f8; + p { + margin: 1em 0 !important; + } + &.info { + border-color: #BCE8F1; + color: #3A87AD; + background-color: #D9EDF7; + } + &.error { + border-color: #EED3D7; + color: #B94A48; + background-color: #F2DEDE; + } + &.update { + border-color: #D6E9C6; + color: #468847; + background-color: #DFF0D8; + } + body > & { + margin: 1em; + } +} +.message_mixin(@enabled) when (@enabled = false) { } +.message { + .message_mixin(@enable_xe_msg); +}