From 7ccb2a261521cc826ff41d91cebbab504b7c4e11 Mon Sep 17 00:00:00 2001 From: Mario Date: Sat, 10 Feb 2024 22:04:24 +0000 Subject: custom sass bootstrap builds for channels and site --- view/theme/redbasic/css/blockmode.css | 15 ---- view/theme/redbasic/css/mod_page.css | 24 ------ view/theme/redbasic/css/sloppy_photos.css | 58 ------------- view/theme/redbasic/css/style.css | 22 +---- view/theme/redbasic/php/config.php | 73 ++++++++++++++--- view/theme/redbasic/php/style.php | 126 +++++++++++++---------------- view/theme/redbasic/php/theme_init.php | 2 - view/theme/redbasic/tpl/theme_settings.tpl | 20 ++--- 8 files changed, 131 insertions(+), 209 deletions(-) delete mode 100644 view/theme/redbasic/css/blockmode.css delete mode 100644 view/theme/redbasic/css/mod_page.css delete mode 100644 view/theme/redbasic/css/sloppy_photos.css (limited to 'view/theme') diff --git a/view/theme/redbasic/css/blockmode.css b/view/theme/redbasic/css/blockmode.css deleted file mode 100644 index cc1db209e..000000000 --- a/view/theme/redbasic/css/blockmode.css +++ /dev/null @@ -1,15 +0,0 @@ - -.wall-item-content.conv-list-mode { - max-width: 280px; - height:200px; - min-height: 200px; - overflow: hidden; -} - -.thread-wrapper.toplevel_item.conv-list-mode { - width: 300px; - height: 300px; - float: left; - margin-left: 5px; - margin-bottom: 35px; -} diff --git a/view/theme/redbasic/css/mod_page.css b/view/theme/redbasic/css/mod_page.css deleted file mode 100644 index 37f597fac..000000000 --- a/view/theme/redbasic/css/mod_page.css +++ /dev/null @@ -1,24 +0,0 @@ -/* -section { -left: 0px; -width: 800px; -margin-left: auto; -margin-right: auto; -} -body {background-color: #d00 !important;} - -.page-content-wrapper {background: #fff; - color: #000; - border-radius: 20px; - box-shadow: 5px 5px 5px #111; -} - -h3.page-title { -padding-top: 30px; - color: #033} -.page-body {padding: 40px;} - -.page-body strong {color: #033;} - -.nav-links {margin-top: 5px;} -*/ \ No newline at end of file diff --git a/view/theme/redbasic/css/sloppy_photos.css b/view/theme/redbasic/css/sloppy_photos.css deleted file mode 100644 index 78aedc9cc..000000000 --- a/view/theme/redbasic/css/sloppy_photos.css +++ /dev/null @@ -1,58 +0,0 @@ - -.rotleft1 { --webkit-transform: rotate(-1deg); --moz-transform: rotate(-1deg); --ms-transform: rotate(-1deg); --o-transform: rotate(-1deg); -} - -.rotleft2 { --webkit-transform: rotate(-2deg); --moz-transform: rotate(-2deg); --ms-transform: rotate(-2deg); --o-transform: rotate(-2deg); -} - -.rotleft3 { --webkit-transform: rotate(-3deg); --moz-transform: rotate(-3deg); --ms-transform: rotate(-3deg); --o-transform: rotate(-3deg); -} - -.rotleft4 { --webkit-transform: rotate(-4deg); --moz-transform: rotate(-4deg); --ms-transform: rotate(-4deg); --o-transform: rotate(-4deg); -} - - -.rotright1 { --webkit-transform: rotate(1deg); --moz-transform: rotate(1deg); --ms-transform: rotate(1deg); --o-transform: rotate(1deg); -} - -.rotright2 { --webkit-transform: rotate(2deg); --moz-transform: rotate(2deg); --ms-transform: rotate(2deg); --o-transform: rotate(2deg); -} - -.rotright3 { --webkit-transform: rotate(3deg); --moz-transform: rotate(3deg); --ms-transform: rotate(3deg); --o-transform: rotate(3deg); -} - -.rotright4 { --webkit-transform: rotate(4deg); --moz-transform: rotate(4deg); --ms-transform: rotate(4deg); --o-transform: rotate(4deg); -} - diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css index 451303338..8d91702a3 100644 --- a/view/theme/redbasic/css/style.css +++ b/view/theme/redbasic/css/style.css @@ -7,21 +7,13 @@ /* bootstrap variables */ -:root { - --bs-border-radius: $radius; - --bs-highlight-bg: var(--bs-warning); -} [data-bs-theme=light] { - --bs-link-color: $link_color; - --bs-link-hover-color: $link_hover_color; --hz-body-bg: $bgcolor; --hz-body-bg-image: url('$background_image'); } [data-bs-theme=dark] { - --bs-link-color: $link_color_dark; - --bs-link-hover-color: $link_hover_color_dark; --hz-body-bg: $bgcolor_dark; --hz-body-bg-image: url('$background_image_dark'); } @@ -34,10 +26,6 @@ background-color: $nav_bg_dark !important; } -.btn { - --bs-btn-border-radius: $radius; -} - /* generals */ @@ -459,7 +447,7 @@ footer { .photo, .contact-block-img { - border-radius: $radius; + border-radius: var(--bs-border-radius); } #side-bar-photos-albums { @@ -472,7 +460,7 @@ footer { .profile-match-photo img, .directory-photo-img { - border-radius: $radius; + border-radius: var(--bs-border-radius); } .profile-match-photo img { @@ -1354,10 +1342,6 @@ main.fullscreen .section-content-wrapper-np { /* bootstrap overrides */ -.form-control { - border-radius: $radius; -} - blockquote { font-size: 1rem; font-style: italic; @@ -1674,3 +1658,5 @@ dl.bb-dl > dd > li { transform: translateX(80vw); } } + + diff --git a/view/theme/redbasic/php/config.php b/view/theme/redbasic/php/config.php index 344f3ff68..213e441eb 100644 --- a/view/theme/redbasic/php/config.php +++ b/view/theme/redbasic/php/config.php @@ -2,6 +2,9 @@ namespace Zotlabs\Theme; +use ScssPhp\ScssPhp\Compiler; +use ScssPhp\ScssPhp\OutputStyle; + class RedbasicConfig { function get_schemas() { @@ -37,15 +40,12 @@ class RedbasicConfig { } $arr = array(); + $arr['primary_color'] = get_pconfig(local_channel(),'redbasic', 'primary_color'); $arr['dark_mode'] = get_pconfig(local_channel(),'redbasic', 'dark_mode'); $arr['navbar_dark_mode'] = get_pconfig(local_channel(),'redbasic', 'navbar_dark_mode'); $arr['narrow_navbar'] = get_pconfig(local_channel(),'redbasic', 'narrow_navbar' ); $arr['nav_bg'] = get_pconfig(local_channel(),'redbasic', 'nav_bg' ); $arr['nav_bg_dark'] = get_pconfig(local_channel(),'redbasic', 'nav_bg_dark' ); - $arr['link_color'] = get_pconfig(local_channel(),'redbasic', 'link_color' ); - $arr['link_color_dark'] = get_pconfig(local_channel(),'redbasic', 'link_color_dark' ); - $arr['link_hover_color'] = get_pconfig(local_channel(),'redbasic', 'link_hover_color' ); - $arr['link_hover_color_dark'] = get_pconfig(local_channel(),'redbasic', 'link_hover_color_dark' ); $arr['bgcolor'] = get_pconfig(local_channel(),'redbasic', 'background_color' ); $arr['bgcolor_dark'] = get_pconfig(local_channel(),'redbasic', 'background_color_dark' ); $arr['background_image'] = get_pconfig(local_channel(),'redbasic', 'background_image' ); @@ -65,15 +65,62 @@ class RedbasicConfig { } if (isset($_POST['redbasic-settings-submit'])) { + if (isset($_POST['redbasic_primary_color']) || isset($_POST['redbasic_radius'])) { + + $primary_color = ''; + $radius = floatval($_POST['redbasic_radius']); + + if (preg_match('/^#([A-Fa-f0-9]{3}){1,2}$/', $_POST['redbasic_primary_color'])) { + $primary_color = $_POST['redbasic_primary_color']; + } + + if ($primary_color || $radius) { + + try { + $cache_dir = 'store/[data]/[scss]'; + if(!is_dir($cache_dir)) { + os_mkdir($cache_dir, STORAGE_DEFAULT_PERMISSIONS, true); + } + + $options = [ + 'cacheDir' => $cache_dir, + 'forceRefresh' => false + ]; + + $compiler = new Compiler($options); + $compiler->setImportPaths('vendor/twbs/bootstrap/scss'); + $compiler->setOutputStyle(OutputStyle::COMPRESSED); + + // Set Variables + if ($primary_color) { + $variables['$primary'] = $primary_color; + } + + if ($radius) { + $variables['$border-radius'] = $radius . 'rem'; + } + + // Replace Bootstrap Variables with Customizer Variables + $compiler->replaceVariables($variables); + + $bs = $compiler->compileString('@import "bootstrap.scss";'); + + set_pconfig(local_channel(), 'redbasic', 'bootstrap', $bs->getCss()); + } catch (\Exception $e) { + logger('scssphp: Unable to compile content'); + } + } + else { + set_pconfig(local_channel(), 'redbasic', 'bootstrap', ''); + } + } + + set_pconfig(local_channel(), 'redbasic', 'primary_color', $_POST['redbasic_primary_color']); set_pconfig(local_channel(), 'redbasic', 'narrow_navbar', $_POST['redbasic_narrow_navbar']); set_pconfig(local_channel(), 'redbasic', 'navbar_dark_mode', $_POST['redbasic_navbar_dark_mode']); set_pconfig(local_channel(), 'redbasic', 'dark_mode', $_POST['redbasic_dark_mode']); set_pconfig(local_channel(), 'redbasic', 'nav_bg', $_POST['redbasic_nav_bg']); set_pconfig(local_channel(), 'redbasic', 'nav_bg_dark', $_POST['redbasic_nav_bg_dark']); - set_pconfig(local_channel(), 'redbasic', 'link_color', $_POST['redbasic_link_color']); - set_pconfig(local_channel(), 'redbasic', 'link_color_dark', $_POST['redbasic_link_color_dark']); - set_pconfig(local_channel(), 'redbasic', 'link_hover_color', $_POST['redbasic_link_hover_color']); - set_pconfig(local_channel(), 'redbasic', 'link_hover_color_dark', $_POST['redbasic_link_hover_color_dark']); set_pconfig(local_channel(), 'redbasic', 'background_color', $_POST['redbasic_background_color']); set_pconfig(local_channel(), 'redbasic', 'background_color_dark', $_POST['redbasic_background_color_dark']); set_pconfig(local_channel(), 'redbasic', 'background_image', $_POST['redbasic_background_image']); @@ -84,6 +131,9 @@ class RedbasicConfig { set_pconfig(local_channel(), 'redbasic', 'top_photo', $_POST['redbasic_top_photo']); set_pconfig(local_channel(), 'redbasic', 'reply_photo', $_POST['redbasic_reply_photo']); set_pconfig(local_channel(), 'redbasic', 'advanced_theming', $_POST['redbasic_advanced_theming']); + + // This is used to refresh the cache + set_pconfig(local_channel(), 'system', 'style_update', time()); } } @@ -103,21 +153,18 @@ class RedbasicConfig { '$dark' => t('Dark style'), '$light' => t('Light style'), '$common' => t('Common settings'), + '$primary_color' => array('redbasic_primary_color', t('Primary theme color'), $arr['primary_color']), '$dark_mode' => array('redbasic_dark_mode',t('Default to dark mode'),$arr['dark_mode'], '', array(t('No'),t('Yes'))), '$navbar_dark_mode' => array('redbasic_navbar_dark_mode',t('Always use light icons for navbar'),$arr['navbar_dark_mode'], t('Enable this option if you use a dark navbar color in light mode'), array(t('No'),t('Yes'))), '$narrow_navbar' => array('redbasic_narrow_navbar',t('Narrow navbar'),$arr['narrow_navbar'], '', array(t('No'),t('Yes'))), '$nav_bg' => array('redbasic_nav_bg', t('Navigation bar background color'), $arr['nav_bg']), '$nav_bg_dark' => array('redbasic_nav_bg_dark', t('Dark navigation bar background color'), $arr['nav_bg_dark']), - '$link_color' => array('redbasic_link_color', t('Link color'), $arr['link_color']), - '$link_color_dark' => array('redbasic_link_color_dark', t('Dark link color'), $arr['link_color_dark']), - '$link_hover_color' => array('redbasic_link_hover_color', t('Link hover color'), $arr['link_hover_color']), - '$link_hover_color_dark' => array('redbasic_link_hover_color_dark', t('Dark link hover color'), $arr['link_hover_color_dark']), '$bgcolor' => array('redbasic_background_color', t('Set the background color'), $arr['bgcolor']), '$bgcolor_dark' => array('redbasic_background_color_dark', t('Set the dark background color'), $arr['bgcolor_dark']), '$background_image' => array('redbasic_background_image', t('Set the background image'), $arr['background_image']), '$background_image_dark' => array('redbasic_background_image_dark', t('Set the dark background image'), $arr['background_image_dark']), '$font_size' => array('redbasic_font_size', t('Set font-size for the entire application'), $arr['font_size'], t('Examples: 1rem, 100%, 16px')), - '$radius' => array('redbasic_radius', t('Set radius of corners'), $arr['radius'], t('Example: 4px')), + '$radius' => array('redbasic_radius', t('Set radius of corners in rem'), $arr['radius']), '$converse_width' => array('redbasic_converse_width',t('Set maximum width of content region in rem'),$arr['converse_width'], t('Leave empty for default width')), '$top_photo' => array('redbasic_top_photo', t('Set size of conversation author photo'), $arr['top_photo']), '$reply_photo' => array('redbasic_reply_photo', t('Set size of followup author photos'), $arr['reply_photo']), diff --git a/view/theme/redbasic/php/style.php b/view/theme/redbasic/php/style.php index 4d5bd42be..056cea1cd 100644 --- a/view/theme/redbasic/php/style.php +++ b/view/theme/redbasic/php/style.php @@ -1,32 +1,53 @@ $nav_bg, '$nav_bg_dark' => $nav_bg_dark, - '$link_color' => $link_color, - '$link_color_dark' => $link_color_dark, - '$link_hover_color' => $link_hover_color, - '$link_hover_color_dark' => $link_hover_color_dark, '$bgcolor' => $bgcolor, '$bgcolor_dark' => $bgcolor_dark, '$background_image' => $background_image, '$background_image_dark' => $background_image_dark, '$font_size' => $font_size, - '$radius' => $radius, '$converse_width' => $converse_width, '$top_photo' => $top_photo, '$reply_photo' => $reply_photo, @@ -158,8 +140,12 @@ if(file_exists('view/theme/redbasic/css/style.css')) { '$right_aside_width' => $right_aside_width ); - echo strtr($x, $options); + $o = strtr($x, $options); + + header('Cache-Control: max-age=2592000'); + + echo $bs . $o; } // Set the schema to the default schema in derived themes. See the documentation for creating derived themes how to override this. diff --git a/view/theme/redbasic/php/theme_init.php b/view/theme/redbasic/php/theme_init.php index cb81165b1..54e6e7be3 100644 --- a/view/theme/redbasic/php/theme_init.php +++ b/view/theme/redbasic/php/theme_init.php @@ -2,9 +2,7 @@ require_once('view/php/theme_init.php'); head_add_css('/library/fork-awesome/css/fork-awesome.min.css'); -head_add_css('/vendor/twbs/bootstrap/dist/css/bootstrap.min.css'); head_add_css('/library/bootstrap-tagsinput/bootstrap-tagsinput.css'); -head_add_css('/view/css/bootstrap-red.css'); head_add_css('/library/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.min.css'); head_add_js('/vendor/twbs/bootstrap/dist/js/bootstrap.bundle.min.js'); diff --git a/view/theme/redbasic/tpl/theme_settings.tpl b/view/theme/redbasic/tpl/theme_settings.tpl index 6bf1666ed..4ba418afc 100644 --- a/view/theme/redbasic/tpl/theme_settings.tpl +++ b/view/theme/redbasic/tpl/theme_settings.tpl @@ -5,32 +5,34 @@ {{include file="field_checkbox.tpl" field=$advanced_theming}} {{if $expert}} +
+

{{$common}}

+ {{include file="field_colorinput.tpl" field=$primary_color}} + {{include file="field_input.tpl" field=$radius}} + {{include file="field_input.tpl" field=$top_photo}} + {{include file="field_input.tpl" field=$reply_photo}} +

{{$light}}

{{include file="field_checkbox.tpl" field=$navbar_dark_mode}} {{include file="field_colorinput.tpl" field=$nav_bg}} {{include file="field_colorinput.tpl" field=$bgcolor}} {{include file="field_colorinput.tpl" field=$background_image}} - {{include file="field_colorinput.tpl" field=$link_color}} - {{include file="field_colorinput.tpl" field=$link_hover_color}}

{{$dark}}

{{include file="field_colorinput.tpl" field=$nav_bg_dark}} {{include file="field_colorinput.tpl" field=$bgcolor_dark}} {{include file="field_colorinput.tpl" field=$background_image_dark}} - {{include file="field_colorinput.tpl" field=$link_color_dark}} - {{include file="field_colorinput.tpl" field=$link_hover_color_dark}} - -

{{$common}}

- {{include file="field_input.tpl" field=$radius}} - {{include file="field_input.tpl" field=$top_photo}} - {{include file="field_input.tpl" field=$reply_photo}} {{/if}} +
-- cgit v1.2.3