diff --git a/view/theme/frio/css/font-awesome.custom.css b/view/theme/frio/css/font-awesome.custom.css index 3ddc900f8f..41ba2f088b 100644 --- a/view/theme/frio/css/font-awesome.custom.css +++ b/view/theme/frio/css/font-awesome.custom.css @@ -4,18 +4,30 @@ This file applies Font Awesome icons to some friendica standard classes */ .icon:before { - font-family: ForkAwesome; - font-weight: normal; - font-style: normal; - display: inline-block; - text-decoration: inherit; - vertical-align: top; - font-size: 1.4em; + font-family: ForkAwesome; + font-weight: normal; + font-style: normal; + display: inline-block; + text-decoration: inherit; + vertical-align: top; + font-size: 1.4em; } /* media icons */ -.icon.type-image:before { content: "\f1c5"; } -.icon.type-video:before { content: "\f1c8"; } -.icon.type-audio:before { content: "\f1c7"; } -.icon.type-text:before { content: "\f0f6"; } -.icon.type-application:before { content: "\f016"; } -.icon.type-unkn:before { content: "\f016"; } +.icon.type-image:before { + content: "\f1c5"; +} +.icon.type-video:before { + content: "\f1c8"; +} +.icon.type-audio:before { + content: "\f1c7"; +} +.icon.type-text:before { + content: "\f0f6"; +} +.icon.type-application:before { + content: "\f016"; +} +.icon.type-unkn:before { + content: "\f016"; +} diff --git a/view/theme/frio/css/hovercard.css b/view/theme/frio/css/hovercard.css index 5e283f8a85..7ec4f9f7e1 100644 --- a/view/theme/frio/css/hovercard.css +++ b/view/theme/frio/css/hovercard.css @@ -1,4 +1,3 @@ - .hovercard { position: absolute; top: 0; @@ -202,7 +201,6 @@ text-decoration: none !important; } - /* Basic hovercard */ .basic-content { padding: 9px; @@ -285,7 +283,6 @@ .hover-card-header h4 { display: block; - } .hover-card-header h4 a { diff --git a/view/theme/frio/css/mod_admin.css b/view/theme/frio/css/mod_admin.css index 35c2b4a009..3475d1d82a 100644 --- a/view/theme/frio/css/mod_admin.css +++ b/view/theme/frio/css/mod_admin.css @@ -1,24 +1,42 @@ -#adminpage.adminpage > h1 { padding: 0 15px; } +#adminpage.adminpage > h1 { + padding: 0 15px; +} -#users th:first-of-type { width: 1em; } -#users th:nth-of-type(2) { width: 40px; } -#users th:last-of-type { width: 1em; } -.admin-settings-footer-elements { padding-left: 8px; padding-right: 8px; } +#users th:first-of-type { + width: 1em; +} +#users th:nth-of-type(2) { + width: 40px; +} +#users th:last-of-type { + width: 1em; +} +.admin-settings-footer-elements { + padding-left: 8px; + padding-right: 8px; +} -#deleted th:first-of-type { width: 40px; } +#deleted th:first-of-type { + width: 40px; +} #users img.avatar-nano, #deleted img.avatar-nano { - height: 24px; width: 24px; + height: 24px; + width: 24px; +} +.opened .caret { + transform: rotate(180deg); } -.opened .caret { transform: rotate(180deg); } tr.details td, tr.details th { - border-top: 0!important; + border-top: 0 !important; } .adminpage td > .checkbox, .adminpage th > .checkbox { margin: 0; } -.adminpage td { word-break: break-all; } \ No newline at end of file +.adminpage td { + word-break: break-all; +} diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css index 2ad28b5a01..daa2afd75f 100644 --- a/view/theme/frio/css/style.css +++ b/view/theme/frio/css/style.css @@ -4,22 +4,22 @@ */ body { - padding-top: 110px; - background-color: $background_color; - background-image: url("$background_image"); - background-size: $background_size_img; - background-repeat: $background_repeat; - background-attachment: fixed; - color: $font_color; - font-family: 'Open Sans',sans-serif; + padding-top: 110px; + background-color: $background_color; + background-image: url("$background_image"); + background-size: $background_size_img; + background-repeat: $background_repeat; + background-attachment: fixed; + color: $font_color; + font-family: "Open Sans", sans-serif; } body.minimal { - padding: 15px; + padding: 15px; } body a { - color: $link_color; - text-decoration: none; + color: $link_color; + text-decoration: none; } /* Anchors incorrectly display with a fixed top menu. This global rule offsets all * anchors so that accessing them with a # link will actually scroll the associated @@ -28,256 +28,281 @@ body a { * anchor.top should be the opposite of body.padding-top */ body a[name]:not([href]) { - display: block; - position: relative; - top: -110px; - visibility: hidden; + display: block; + position: relative; + top: -110px; + visibility: hidden; } -body a:hover, .btn-link:hover, -body a:focus, .btn-link:focus, -body a:active, .btn-link:active, -body a.active, .btn-link.active { - color: $link_hover_color; - outline-color: $link_hover_color;; - text-decoration: none; +body a:hover, +.btn-link:hover, +body a:focus, +.btn-link:focus, +body a:active, +.btn-link:active, +body a.active, +.btn-link.active { + color: $link_hover_color; + outline-color: $link_hover_color; + text-decoration: none; } .wall-item-container a:hover { - text-decoration: underline; + text-decoration: underline; } hr { - margin-top: 10px; - margin-bottom: 10px; + margin-top: 10px; + margin-bottom: 10px; } aside hr, section hr { - border-color: rgba(238, 238, 238, $contentbg_transp); + border-color: rgba(238, 238, 238, $contentbg_transp); } -iframe, img, video { - max-width: 100%; +iframe, +img, +video { + max-width: 100%; } blockquote { - font-size: inherit; + font-size: inherit; } .clear { - clear: both; + clear: both; } .no-padding { - padding: 0; + padding: 0; } .fakelink { - cursor: pointer; + cursor: pointer; } .hidden { - display: none !important; + display: none !important; } .minimize { - max-height: 0px !important; - overflow: hidden !important; + max-height: 0px !important; + overflow: hidden !important; } /** * mobile aside */ @media screen and (max-width: 990px) { - body { - padding-top: 105px; - } - aside{ - position: fixed!important; - top: 0!important; - background-color: $background_color; - width: 100%; - max-width: 300px; - height: 100%; - padding-top: 100px; - z-index: 10; - overflow: auto; - padding-left: 6px!important; - padding-right: 6px!important; - } - aside::before { - content: " "; - position: fixed; - display: block; - top: 0; left: 300px; right: 0; bottom: 0; - background-color: rgba(0,0,0,0.4); - opacity: 0; - transition: opacity 0.5s; - } - aside.canvas-slid::before { - opacity: 1; - } + body { + padding-top: 105px; + } + aside { + position: fixed !important; + top: 0 !important; + background-color: $background_color; + width: 100%; + max-width: 300px; + height: 100%; + padding-top: 100px; + z-index: 10; + overflow: auto; + padding-left: 6px !important; + padding-right: 6px !important; + } + aside::before { + content: " "; + position: fixed; + display: block; + top: 0; + left: 300px; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.4); + opacity: 0; + transition: opacity 0.5s; + } + aside.canvas-slid::before { + opacity: 1; + } - /* prevent page scroll when the aside is opened **/ - body.aside-out { overflow: hidden; } + /* prevent page scroll when the aside is opened **/ + body.aside-out { + overflow: hidden; + } } /* * standard page elements */ #back-to-top { - display: none; - cursor: pointer; - color: $nav_icon_color; - position: fixed; - z-index: 49; - right: 20px; - bottom: 20px; - opacity: 1; - font-size: 2.9em; - padding: 0 12px 0 12px; - border-radius: 10px; - background-color: $nav_bg; - line-height: 1.5; + display: none; + cursor: pointer; + color: $nav_icon_color; + position: fixed; + z-index: 49; + right: 20px; + bottom: 20px; + opacity: 1; + font-size: 2.9em; + padding: 0 12px 0 12px; + border-radius: 10px; + background-color: $nav_bg; + line-height: 1.5; } #item-delete-selected { - cursor: pointer; - color: white; - position: fixed; - z-index: 49; - right: 20px; - top: 100px; - opacity: 0.8; - font-size: 2.9em; - padding: 0 12px 0 12px; - border-radius: 10px; - background-color: $link_color; - line-height: 1.5; - display: none; + cursor: pointer; + color: white; + position: fixed; + z-index: 49; + right: 20px; + top: 100px; + opacity: 0.8; + font-size: 2.9em; + padding: 0 12px 0 12px; + border-radius: 10px; + background-color: $link_color; + line-height: 1.5; + display: none; } #toggle_mobile_link { - display: none; + display: none; } /* * Overwriting and Extend Bootstrap */ -.label, .label a { - color: #fff; +.label, +.label a { + color: #fff; } /* Buttons */ .btn { - float: none; - border: none; - -webkit-box-shadow: none; - box-shadow: none; - -moz-box-shadow: none; - background-image: none; - text-shadow: none; - border-radius: 3px; - margin-bottom: 0; - font-size: 14px; - font-weight: 600; - padding: 8px 16px; - color: inherit; + float: none; + border: none; + -webkit-box-shadow: none; + box-shadow: none; + -moz-box-shadow: none; + background-image: none; + text-shadow: none; + border-radius: 3px; + margin-bottom: 0; + font-size: 14px; + font-weight: 600; + padding: 8px 16px; + color: inherit; } .btn:focus { outline-color: $link_hover_color; } .btn-default { - background: #ededed; - color: $font_color; + background: #ededed; + color: $font_color; } .btn-sm { - padding: 4px 8px; - font-size: 12px; + padding: 4px 8px; + font-size: 12px; } .btn-small { - padding: 6px 10px; - font-size: 12px; - line-height: 1.5; - border-radius: 3px; + padding: 6px 10px; + font-size: 12px; + line-height: 1.5; + border-radius: 3px; } .btn-xs { - padding: 1px 5px; - font-size: 12px; + padding: 1px 5px; + font-size: 12px; } .btn.btn-danger { - color: #FFFFFF; - background-color: #AE0F0F; + color: #ffffff; + background-color: #ae0f0f; } .btn.btn-primary { - background: $nav_bg; - color: $btn_primary_color; -} -.btn.btn-primary:hover, .btn.btn-primary:focus { + background: $nav_bg; color: $btn_primary_color; - background: $btn_primary_hover_color; - text-decoration: none; } -.btn.btn-primary:active, .btn.btn-primary.active { - background: $btn_primary_hover_color; +.btn.btn-primary:hover, +.btn.btn-primary:focus { + color: $btn_primary_color; + background: $btn_primary_hover_color; + text-decoration: none; +} +.btn.btn-primary:active, +.btn.btn-primary.active { + background: $btn_primary_hover_color; } -.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, -.btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, -.open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus, -.open>.dropdown-toggle.btn-primary:hover,.btn-primary.active, .btn-primary:active, -.open>.dropdown-toggle.btn-primary { - background: $btn_primary_hover_color; - border-color: none; +.btn-primary.active.focus, +.btn-primary.active:focus, +.btn-primary.active:hover, +.btn-primary:active.focus, +.btn-primary:active:focus, +.btn-primary:active:hover, +.open > .dropdown-toggle.btn-primary.focus, +.open > .dropdown-toggle.btn-primary:focus, +.open > .dropdown-toggle.btn-primary:hover, +.btn-primary.active, +.btn-primary:active, +.open > .dropdown-toggle.btn-primary { + background: $btn_primary_hover_color; + border-color: none; } .btn-link { - border: 0; - color: $link_color; - padding-left: 0; - padding-right: 0; + border: 0; + color: $link_color; + padding-left: 0; + padding-right: 0; } .btn-clear, .btn-clear:active { - border: 0; - background: transparent; - box-shadow: none; + border: 0; + background: transparent; + box-shadow: none; } -.btn-eventnav, btn-eventnav:hover { - font-size: 16px; - background: none; - background-color: transparent; - padding: 0 14px; +.btn-eventnav, +btn-eventnav:hover { + font-size: 16px; + background: none; + background-color: transparent; + padding: 0 14px; } .btn-separator { - border-left: 1px solid #777; + border-left: 1px solid #777; } .toggle.btn { - border: 1px solid transparent; + border: 1px solid transparent; } .toggle.btn-xs { - min-width: 45px; + min-width: 45px; } .toggle.off { - border-color: #ccc; + border-color: #ccc; } .toggle .toggle-off, .toggle .toggle-off:hover { - color: #ccc; - background-color: #eee; - box-shadow: none; + color: #ccc; + background-color: #eee; + box-shadow: none; } .toggle.off .toggle-handle { - background-color: #eee; + background-color: #eee; } .toggle-handle { - background-color: #fff; - border-width: 0 1px; - border: 1px solid transparent; - border-color: #ccc; + background-color: #fff; + border-width: 0 1px; + border: 1px solid transparent; + border-color: #ccc; } -.form-control-sm, .input-group-sm>.form-control, .input-group-sm>.input-group-addon, .input-group-sm>.input-group-btn>.btn { - padding: .275rem .75rem; - line-height: 1.5; - height: 30px; - border-radius: .2rem; +.form-control-sm, +.input-group-sm > .form-control, +.input-group-sm > .input-group-addon, +.input-group-sm > .input-group-btn > .btn { + padding: 0.275rem 0.75rem; + line-height: 1.5; + height: 30px; + border-radius: 0.2rem; } /* Bootstrap media class fix/hack * This is a test. I thought it does have some @@ -285,160 +310,159 @@ blockquote { * once more * https://github.com/twbs/bootstrap/issues/6053 */ -.media, .media-body { - overflow: visible; +.media, +.media-body { + overflow: visible; } .media .media-body { - display: table-cell; - width: 10000px; - *width: auto; - *zoom: 1; + display: table-cell; + width: 10000px; + *width: auto; + *zoom: 1; } -.media:before, .media:after { - content: ""; - display: table; +.media:before, +.media:after { + content: ""; + display: table; } .media:after { - clear: both; + clear: both; } /* Badges */ .badge { - vertical-align: baseline; - background-color: $link_color; - border-radius: 4px; - z-index: 1; + vertical-align: baseline; + background-color: $link_color; + border-radius: 4px; + z-index: 1; } aside .badge { - opacity: 0.7; + opacity: 0.7; } /* disabled elements */ -.community-content-wrapper > h3, .network-content-wrapper > .section-title-wrapper { - display:none; +.community-content-wrapper > h3, +.network-content-wrapper > .section-title-wrapper { + display: none; } header #site-location { - display: none; + display: none; } header #banner { - position: fixed; - top: 0px; - left:49%; - right: 49%; - z-index: 1040; - margin-top: 12.5px; - text-align: center; - text-shadow: 1px 1px 2px rgba(0,0,0,.5); - font-size: 14px; - font-family: tahoma, "Lucida Sans", sans; - color: #fff; - font-weight: bold; - whitespace: nowrap; - padding-left: 55px; + position: fixed; + top: 0px; + left: 49%; + right: 49%; + z-index: 1040; + margin-top: 12.5px; + text-align: center; + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); + font-size: 14px; + font-family: tahoma, "Lucida Sans", sans; + color: #fff; + font-weight: bold; + whitespace: nowrap; + padding-left: 55px; } header #banner #logo-img, .navbar-brand #logo-img { - -webkit-mask-image: url('img/friendica-25.png'); - background-color: $nav_icon_color; - height: 25px; - width: 25px; - margin-left: auto; - margin-right: auto; + -webkit-mask-image: url("img/friendica-25.png"); + background-color: $nav_icon_color; + height: 25px; + width: 25px; + margin-left: auto; + margin-right: auto; } #navbrand-container { - display: flex; + display: flex; } #navbrand-container #navbar-brand-text { - padding-left: 5px; + padding-left: 5px; color: $nav_icon_color; } /* NavBar */ .topbar { - position: fixed; - display: block; - height: 50px; - width: 100%; - padding-left: 15px; - padding-right: 15px + position: fixed; + display: block; + height: 50px; + width: 100%; + padding-left: 15px; + padding-right: 15px; } .topbar ul.nav { - float: left + float: left; } -.topbar ul.nav>li { - float: left +.topbar ul.nav > li { + float: left; } @media (min-width: 992px) { .topbar ul.nav > li > a, - .topbar ul.nav > li > button - { + .topbar ul.nav > li > button { padding-top: 15px; padding-bottom: 15px; - line-height: 20px + line-height: 20px; } } @media (max-width: 991px) { - .topbar ul.nav > li > a, - .topbar ul.nav > li > button - { + .topbar ul.nav > li > a, + .topbar ul.nav > li > button { padding: 15px 10px; } } .topbar .dropdown-footer { - margin: 10px + margin: 10px; } .topbar .dropdown-header { - font-size: 16px; - padding: 3px 10px; - margin-bottom: 10px; - font-weight: 300; - color: #bebebe + font-size: 16px; + padding: 3px 10px; + margin-bottom: 10px; + font-weight: 300; + color: #bebebe; } .topbar .dropdown-header .dropdown-header-link { - position: absolute; - top: 2px; - right: 10px + position: absolute; + top: 2px; + right: 10px; } .topbar .dropdown-header .dropdown-header-link a, .topbar .dropdown-header .dropdown-header-link .btn-link { - color: $link_color !important; - font-size: 12px; - font-weight: 400 + color: $link_color !important; + font-size: 12px; + font-weight: 400; } .topbar .dropdown-header:hover { - color: #bebebe + color: #bebebe; } #topbar-first, nav.navbar { - background-color: $nav_bg; - top: 0; - z-index: 1030; - color: $nav_icon_color; + background-color: $nav_bg; + top: 0; + z-index: 1030; + color: $nav_icon_color; } @media screen and (max-width: 767px) { - #topbar-first, - nav.navbar { - padding: 0 2px; - } + #topbar-first, + nav.navbar { + padding: 0 2px; + } } #topbar-first .navbar-toggle { - margin-top: 5px; - margin-bottom: 0; - margin-right: 0; + margin-top: 5px; + margin-bottom: 0; + margin-right: 0; } #topbar-first .nav > li > a, #topbar-first .nav > li > button, nav.navbar .nav > li > a, -nav.navbar .nav > li > button -{ +nav.navbar .nav > li > button { color: $nav_icon_color; } #topbar-first .nav > .open > a, -#topbar-first .nav > .open > button -{ +#topbar-first .nav > .open > button { background-color: $nav_bg; } #topbar-first .nav > li > a:hover, @@ -446,309 +470,308 @@ nav.navbar .nav > li > button #topbar-first .nav > li > button:not(#main-menu):hover, #topbar-first .nav > li > button:not(#main-menu):focus, nav.navbar .nav > li > a:hover, -nav.navbar .nav > li > a:focus -nav.navbar .nav > li > button:hover, -nav.navbar .nav > li > button:focus -{ - background-color: $nav_icon_hover_color; +nav.navbar .nav > li > a:focus nav.navbar .nav > li > button:hover, +nav.navbar .nav > li > button:focus { + background-color: $nav_icon_hover_color; } -#topbar-first .nav>.account { - height: 50px; - margin-left: 20px +#topbar-first .nav > .account { + height: 50px; + margin-left: 20px; } -#topbar-first .nav>.account img { - margin-left: 10px; - height: 32px; - width: 32px; - border-radius: 3px; +#topbar-first .nav > .account img { + margin-left: 10px; + height: 32px; + width: 32px; + border-radius: 3px; } -#topbar-first .nav>.account .dropdown-toggle { - padding: 8px 5px 0px; - line-height: 1.1em; - text-align: left +#topbar-first .nav > .account .dropdown-toggle { + padding: 8px 5px 0px; + line-height: 1.1em; + text-align: left; } -#topbar-first .nav>.account .dropdown-toggle span { - font-size: 12px +#topbar-first .nav > .account .dropdown-toggle span { + font-size: 12px; } #topbar-first .topbar-brand { - position: relative; - z-index: 2 + position: relative; + z-index: 2; } #topbar-first .topbar-actions { - position: relative; - z-index: 3 + position: relative; + z-index: 3; } #topbar-first .topbar-nav { - left: 0; - right: 0; - text-align: center; - z-index: 1 + left: 0; + right: 0; + text-align: center; + z-index: 1; } #topbar-first .topbar-nav .nav-segment { - position: relative; - text-align: left + position: relative; + text-align: left; } -#topbar-first .topbar-nav .nav-segment > a -{ - display: inline-block; - text-decoration: none; - text-align: left; +#topbar-first .topbar-nav .nav-segment > a { + display: inline-block; + text-decoration: none; + text-align: left; } #topbar-first .topbar-nav .nav-segment .nav-notification { - position: absolute; - top: 4px; - right: -2px; - background-color: #ff3535; + position: absolute; + top: 4px; + right: -2px; + background-color: #ff3535; } -#topbar-first #intro-update{ - cursor: pointer; +#topbar-first #intro-update { + cursor: pointer; } #topbar-first .topbar-nav .arrow:after { - position: absolute; - display: block; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - border-width: 10px; - content: " "; - top: 1px; - margin-left: -10px; - border-top-width: 0; - border-bottom-color: #fff; - z-index: 1035 + position: absolute; + display: block; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + border-width: 10px; + content: " "; + top: 1px; + margin-left: -10px; + border-top-width: 0; + border-bottom-color: #fff; + z-index: 1035; } #topbar-first .topbar-nav .arrow { - position: absolute; - display: block; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - z-index: 1001; - border-width: 11px; - left: 50%; - margin-left: -18px; - border-top-width: 0; - border-bottom-color: rgba(0, 0, 0, .15); - top: -19px; - z-index: 1035 + position: absolute; + display: block; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + z-index: 1001; + border-width: 11px; + left: 50%; + margin-left: -18px; + border-top-width: 0; + border-bottom-color: rgba(0, 0, 0, 0.15); + top: -19px; + z-index: 1035; } #topbar-first .topbar-nav .dropdown-menu { - width: 350px; - margin-left: -148px + width: 350px; + margin-left: -148px; } #topbar-first .topbar-nav .dropdown-menu ul.media-list { - max-height: 400px; - overflow: auto + max-height: 400px; + overflow: auto; } #topbar-first .topbar-nav .dropdown-menu li { - position: relative + position: relative; } #topbar-first .topbar-nav .dropdown-menu li i.approval { - position: absolute; - left: 2px; - top: 36px; - font-size: 14px + position: absolute; + left: 2px; + top: 36px; + font-size: 14px; } #topbar-first .topbar-nav .dropdown-menu li i.accepted { - color: #5cb85c + color: #5cb85c; } #topbar-first .topbar-nav .dropdown-menu li i.declined { - color: #d9534f + color: #d9534f; } #topbar-first .topbar-nav .dropdown-menu li .media { - position: relative + position: relative; } #topbar-first .topbar-nav .dropdown-menu li .media .img-space { - position: absolute; - top: 14px; - left: 14px + position: absolute; + top: 14px; + left: 14px; } #topbar-first .dropdown-footer { - margin: 10px 10px 5px + margin: 10px 10px 5px; } #topbar-first .caret { - border-top-color: #bebebe + border-top-color: #bebebe; } -#topbar-first .btn-group>a { - background-color: #7f9baa +#topbar-first .btn-group > a { + background-color: #7f9baa; } #topbar-first .btn-enter { - background-color: #7f9baa; - margin: 6px 0 + background-color: #7f9baa; + margin: 6px 0; } #topbar-first .btn-enter:hover { - background-color: #89a2b0 + background-color: #89a2b0; } .navbar-fixed-top ul.nav.navbar-nav.navbar-right { - display: flex; + display: flex; } #friendica-logo-mask { - display: block; + display: block; } - /* Notification Menu */ #topbar-first #nav-notifications-menu { - max-height: 400px; + max-height: 400px; } #topbar-first #nav-notifications-menu a { - color: $font_color_darker; - padding: 0; + color: $font_color_darker; + padding: 0; } #topbar-first #nav-notifications-menu li.notif-entry { - color: $font_color_darker; - padding: 10px; - border-bottom: 1px solid #eee; - position: relative; - border-left: 3px solid #fff; - font-size: 12px; + color: $font_color_darker; + padding: 10px; + border-bottom: 1px solid #eee; + position: relative; + border-left: 3px solid #fff; + font-size: 12px; } #topbar-first #nav-notifications-menu li.notification-unseen { - border-left: 3px solid #e3eff3; - background-color: #e3eff3; + border-left: 3px solid #e3eff3; + background-color: #e3eff3; } #topbar-first #nav-notifications-menu li.notif-entry:hover { - background-color: #f7f7f7; - border-left: 3px solid $link_color; + background-color: #f7f7f7; + border-left: 3px solid $link_color; } #topbar-first #nav-notifications-menu li.placeholder { - border-bottom: none + border-bottom: none; } #topbar-first #nav-notifications-menu .media .media-body .contactname { - font-weight: bold; + font-weight: bold; } #topbar-first #nav-notifications-menu .media .media-body .label { - padding: .1em .5em + padding: 0.1em 0.5em; } #topbar-first #nav-notifications-menu li.notif-entry .media-object a img { - height: 32px; - width: 32px; - border-radius: 3px; + height: 32px; + width: 32px; + border-radius: 3px; } /* The Top Nav Bar user menu */ #topbar-first .account .user-title { - text-align: right; - margin-top: 7px; + text-align: right; + margin-top: 7px; } #topbar-first .account .user-title span { - color: $nav_icon_color; + color: $nav_icon_color; } #topbar-first .account #main-menu .nav-notification { - position: absolute; - top: 4px; - right: -2px; - background-color: #ff8989; + position: absolute; + top: 4px; + right: -2px; + background-color: #ff8989; } #myNavmenu { - top: 50px; - background-color: $background_color; - border-top: 0; - border-right: 0; - border-bottom: 0; - border-left-color: $nav_icon_color; - box-shadow: 0 0 3px black; + top: 50px; + background-color: $background_color; + border-top: 0; + border-right: 0; + border-bottom: 0; + border-left-color: $nav_icon_color; + box-shadow: 0 0 3px black; } -#myNavmenu ul, #myNavmenu ul li:first-child, #myNavmenu ul, #myNavmenu ul li:last-child { - border-radius: 0; +#myNavmenu ul, +#myNavmenu ul li:first-child, +#myNavmenu ul, +#myNavmenu ul li:last-child { + border-radius: 0; } #myNavmenu li, #myNavmenu a { - background-color: $nav_bg; - color: $nav_icon_color; + background-color: $nav_bg; + color: $nav_icon_color; } #myNavmenu li.list-group-item { - border-color: $background_color; + border-color: $background_color; } #myNavmenu a { - display: block; + display: block; } #myNavmenu li.nav-sitename { - font-weight: bold; + font-weight: bold; } #topbar-first .dropdown.account li#nav-sitename { - padding-left: 15px; - padding-right: 15px; - font-weight: bold; - word-break: break-word; + padding-left: 15px; + padding-right: 15px; + font-weight: bold; + word-break: break-word; } #topbar-first .dropdown.account li#nav-sitename:hover { - border: none; - background-color: $nav_bg; + border: none; + background-color: $nav_bg; } /* Nav Search */ #topbar-first #search-box .navbar-form { - margin: 0px; - padding: 12px 12px; + margin: 0px; + padding: 12px 12px; } #search-mobile { - position: fixed; - top: 90px; - left: 0; - right: 0; - z-index: 2; + position: fixed; + top: 90px; + left: 0; + right: 0; + z-index: 2; - background-color: $background_color; + background-color: $background_color; - /* fix bootstrap .well class not playing well with data-target slide animation */ - margin: 0; - padding: 0; - min-height: 0; - border-radius: 0; + /* fix bootstrap .well class not playing well with data-target slide animation */ + margin: 0; + padding: 0; + min-height: 0; + border-radius: 0; } #search-mobile .navbar-form { - margin: 0; + margin: 0; } #topbar-first #search-box .form-search { - height: 25px; - font-size: 13px; - background-position: 8px 4px; + height: 25px; + font-size: 13px; + background-position: 8px 4px; } #topbar-first #search-box .btn { - font-size: 10px; - padding: 1px 8px; + font-size: 10px; + padding: 1px 8px; } /* second topbar */ #topbar-second { - height: 40px; - top: 50px; - background-color: #fff; - z-index: 1029; - background-image: none; - -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, .1); - -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, .1); - box-shadow: 0 1px 10px rgba(0, 0, 0, .1); - border-bottom: 1px solid #d4d4d4; + height: 40px; + top: 50px; + background-color: #fff; + z-index: 1029; + background-image: none; + -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1); + box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1); + border-bottom: 1px solid #d4d4d4; } #topbar-second > .container { - height: 100%; + height: 100%; } @media screen and (max-width: 767px) { - #topbar-second > .container, - #topbar-second #navbar-button { - padding: 0; - } + #topbar-second > .container, + #topbar-second #navbar-button { + padding: 0; + } } #topbar-second .dropdown-menu { - padding-top: 0; - padding-bottom: 0 + padding-top: 0; + padding-bottom: 0; } #topbar-second .dropdown-menu .divider { - margin: 0 + margin: 0; } #topbar-second #space-menu-dropdown, #topbar-second #search-menu-dropdown { - width: 400px + width: 400px; } #topbar-second #space-menu-dropdown .media-list, #topbar-second #search-menu-dropdown .media-list { - max-height: 400px; - overflow: auto + max-height: 400px; + overflow: auto; } .intro-actions { font-size: 2em; @@ -759,103 +782,111 @@ nav.navbar .nav > li > button:focus padding-right: 10px; } ul li .intro-wrapper button.intro-action-link { - opacity:0.7; + opacity: 0.7; } @media screen and (max-width: 768px) { - #topbar-second #space-menu-dropdown .media-list, - #topbar-second #search-menu-dropdown .media-list { - max-height: 200px - } + #topbar-second #space-menu-dropdown .media-list, + #topbar-second #search-menu-dropdown .media-list { + max-height: 200px; + } } #topbar-second #space-menu-dropdown form, #topbar-second #search-menu-dropdown form { - margin: 10px + margin: 10px; } #topbar-second #space-menu-dropdown .search-reset, #topbar-second #search-menu-dropdown .search-reset { - position: absolute; - color: #999; - margin: 10px; - top: 8px; - right: 10px; - display: none; - cursor: pointer + position: absolute; + color: #999; + margin: 10px; + top: 8px; + right: 10px; + display: none; + cursor: pointer; } -#topbar-second #space-menu-dropdown li>ul>li>a>.media .media-body p { - color: #bebebe; - font-size: 11px; - margin: 0; - font-weight: 400 +#topbar-second #space-menu-dropdown li > ul > li > a > .media .media-body p { + color: #bebebe; + font-size: 11px; + margin: 0; + font-weight: 400; } #topbar-second #nav-short-info .heading { - margin-left: -14px; - overflow: hidden; - white-space: nowrap; - padding-right: 20px; - text-overflow: ellipsis; + margin-left: -14px; + overflow: hidden; + white-space: nowrap; + padding-right: 20px; + text-overflow: ellipsis; } #topbar-second #tabmenu .heading { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - color: $link_color; - text-align: center; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: $link_color; + text-align: center; } /* Dropdown Menus */ .nav > li > .btn-link { - position: relative; - display: block; - padding: 10px 15px; + position: relative; + display: block; + padding: 10px 15px; } .nav .open > .btn-link { - background-color: #eee; - border-color: #337ab7; + background-color: #eee; + border-color: #337ab7; } .nav-pills > li > .btn-link { - border-radius: 4px; + border-radius: 4px; } .nav-pills .dropdown-menu, .nav-tabs .dropdown-menu, .account .dropdown-menu, .contact-photo-wrapper .dropdown-menu { - background-color: $nav_bg; - border: none + background-color: $nav_bg; + border: none; } .nav-pills .dropdown-menu li.divider, .nav-tabs .dropdown-menu li.divider, .account .dropdown-menu li.divider, .contact-photo-wrapper .dropdown-menu li.divider { - background-color: $menu_background_hover_color; - border-bottom: none; - margin: 9px 1px!important + background-color: $menu_background_hover_color; + border-bottom: none; + margin: 9px 1px !important; } .nav-pills .dropdown-menu li > a, .nav-tabs .dropdown-menu li > a, .account .dropdown-menu li > a, .contact-photo-wrapper .dropdown-menu li > a { - border-left: 3px solid $nav_bg; + border-left: 3px solid $nav_bg; } -.nav-pills .dropdown-menu li a, .nav-pills .dropdown-menu li .btn-link, -.nav-tabs .dropdown-menu li a, .nav-tabs .dropdown-menu li .btn-link, -.account .dropdown-menu li a, .account .dropdown-menu li .btn-link, -.contact-photo-wrapper .dropdown-menu li a, .contact-photo-wrapper .dropdown-menu li .btn-link { - color: $nav_icon_color; - font-weight: 400; - font-size: 13px; - padding: 4px 15px; - text-transform: capitalize; - width: 100%; - text-align: left; +.nav-pills .dropdown-menu li a, +.nav-pills .dropdown-menu li .btn-link, +.nav-tabs .dropdown-menu li a, +.nav-tabs .dropdown-menu li .btn-link, +.account .dropdown-menu li a, +.account .dropdown-menu li .btn-link, +.contact-photo-wrapper .dropdown-menu li a, +.contact-photo-wrapper .dropdown-menu li .btn-link { + color: $nav_icon_color; + font-weight: 400; + font-size: 13px; + padding: 4px 15px; + text-transform: capitalize; + width: 100%; + text-align: left; } -.nav-pills .dropdown-menu li a i, .nav-pills .dropdown-menu li .btn-link i, -.nav-tabs .dropdown-menu li a i, .nav-tabs .dropdown-menu li .btn-link i, -.account .dropdown-menu li a i, .account .dropdown-menu li .btn-link i, -.contact-photo-wrapper .dropdown-menu li a i, .contact-photo-wrapper .dropdown-menu li .btn-link i { - margin-right: 5px; - font-size: 14px; - display: inline-block; - width: 14px +.nav-pills .dropdown-menu li a i, +.nav-pills .dropdown-menu li .btn-link i, +.nav-tabs .dropdown-menu li a i, +.nav-tabs .dropdown-menu li .btn-link i, +.account .dropdown-menu li a i, +.account .dropdown-menu li .btn-link i, +.contact-photo-wrapper .dropdown-menu li a i, +.contact-photo-wrapper .dropdown-menu li .btn-link i { + margin-right: 5px; + font-size: 14px; + display: inline-block; + width: 14px; } .nav-pills .dropdown-menu li > a:hover, .nav-tabs .dropdown-menu li > a:hover, @@ -865,18 +896,18 @@ ul li .intro-wrapper button.intro-action-link { .nav-tabs .dropdown-menu li.selected a, .account .dropdown-menu li.selected a, .contact-photo-wrapper .dropdown-menu li.selected a { - border-left: 3px solid $link_color; - color: #fff; - background: $menu_background_hover_color; + border-left: 3px solid $link_color; + color: #fff; + background: $menu_background_hover_color; } #photo-edit-link-wrap { - color: $font_color_darker; - margin-bottom: 15px; + color: $font_color_darker; + margin-bottom: 15px; } #newmember-tab > a { - font-size: 1.2em; - font-weight: 800; + font-size: 1.2em; + font-weight: 800; } /* @@ -886,353 +917,352 @@ ul li .intro-wrapper button.intro-action-link { aside .widget, .nav-container .widget { - border: none; - color: $font_color; - background-color: rgba(255, 255, 255, $contentbg_transp); - box-shadow: 0 0 3px #dadada; - -webkit-box-shadow: 0 0 3px #dadada; - -moz-box-shadow: 0 0 3px #dadada; - border-radius: 4px; - position: relative; - margin-bottom: 20px; - padding: 10px; - font-size: 13px; - overflow: auto; + border: none; + color: $font_color; + background-color: rgba(255, 255, 255, $contentbg_transp); + box-shadow: 0 0 3px #dadada; + -webkit-box-shadow: 0 0 3px #dadada; + -moz-box-shadow: 0 0 3px #dadada; + border-radius: 4px; + position: relative; + margin-bottom: 20px; + padding: 10px; + font-size: 13px; + overflow: auto; } aside .widget h3, .nav-container .widget h3 { - font-weight: bold; - font-size: 16px; - margin: 0; - padding-bottom: 20px; + font-weight: bold; + font-size: 16px; + margin: 0; + padding-bottom: 20px; } aside .widget ul, .nav-container .widget ul { - padding: 0px; - margin-top: 0px; - margin-bottom: 0px; - margin-left: -10px; - margin-right: -10px; - list-style: none; + padding: 0px; + margin-top: 0px; + margin-bottom: 0px; + margin-left: -10px; + margin-right: -10px; + list-style: none; } aside .widget li, .nav-container .widget li { - padding-top: 2px; - padding-bottom: 2px; - padding-left: 20px; - padding-right: 10px; + padding-top: 2px; + padding-bottom: 2px; + padding-left: 20px; + padding-right: 10px; } aside .widget li:hover, aside .widget li.selected, .nav-container .widget li:hover { - z-index: 2; - color: $font_color_darker; - background-color: rgba(247, 247, 247, $contentbg_transp); - border-left: 3px solid $link_color !important; - padding-left: 17px; + z-index: 2; + color: $font_color_darker; + background-color: rgba(247, 247, 247, $contentbg_transp); + border-left: 3px solid $link_color !important; + padding-left: 17px; } aside .widget li a, aside .widget li a:hover { - color: $font_color_darker; + color: $font_color_darker; } /* forumlist widget */ aside > #datebrowse-sidebar li.posted-date-selector-months { - margin-bottom: 10px;; - padding: 0; - width: 100% + margin-bottom: 10px; + padding: 0; + width: 100%; } aside > #datebrowse-sidebar li.posted-date-selector-months:hover { - border-left: none !important; - background-color: transparent !important; + border-left: none !important; + background-color: transparent !important; } aside > #datebrowse-sidebar .posted-date-selector-months > ul { - margin: 0; + margin: 0; } -aside > #datebrowse-sidebar .posted-date-selector-months > ul > li{ - padding-left: 30px; +aside > #datebrowse-sidebar .posted-date-selector-months > ul > li { + padding-left: 30px; } -aside > #datebrowse-sidebar .posted-date-selector-months > ul > li:hover{ - padding-left: 27px; +aside > #datebrowse-sidebar .posted-date-selector-months > ul > li:hover { + padding-left: 27px; } .forumlist-img { - -webkit-filter: grayscale(100%); - filter: grayscale(100%); - opacity: 0.5; - filter: alpha(opacity=50); /* For IE8 and earlier */ - -webkit-transition: all 0.2s ease-in-out; - -moz-transition: all 0.2s ease-in-out; - -o-transition: all 0.2s ease-in-out; - -ms-transition: all 0.2s ease-in-out; - transition: all 0.2s ease-in-out; + -webkit-filter: grayscale(100%); + filter: grayscale(100%); + opacity: 0.5; + filter: alpha(opacity=50); /* For IE8 and earlier */ + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + -o-transition: all 0.2s ease-in-out; + -ms-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; } #forumlist-sidbar-ul li:hover a > .forumlist-img { - -webkit-filter: unset; - filter: unset; - opacity: unset; + -webkit-filter: unset; + filter: unset; + opacity: unset; } /* help page widget */ aside > .help-aside-wrapper p strong:first-child { - display: block; - margin: 1em 0 0em; + display: block; + margin: 1em 0 0em; } aside > .help-aside-wrapper h1 { - font-weight: bold; - font-size: 16px; - margin: 0; - padding: 20px 0 10px; + font-weight: bold; + font-size: 16px; + margin: 0; + padding: 20px 0 10px; } aside > .help-aside-wrapper h2 { - font-weight: bold; - font-size: 14px; + font-weight: bold; + font-size: 14px; } /* vcard / h-card */ -aside .vcard #profile-photo-wrapper{ - margin: 0; +aside .vcard #profile-photo-wrapper { + margin: 0; } aside .vcard img.u-photo, aside img.vcard-photo { - width: 100%; - border-radius: 3px; + width: 100%; + border-radius: 3px; } -aside .vcard .tool .action{ - position: absolute; - top:20px; - right: 20px; - font-size: 32px; - width: 45px; - height: 45px; - background: rgba(0,0,0,.50); - text-align: center; - border-radius: 3px; - opacity: 0; - -webkit-transition: all 0.25s ease-in-out; - -moz-transition: all 0.25s ease-in-out; - -o-transition: all 0.25s ease-in-out; - -ms-transition: all 0.25s ease-in-out; - transition: all 0.25s ease-in-out; +aside .vcard .tool .action { + position: absolute; + top: 20px; + right: 20px; + font-size: 32px; + width: 45px; + height: 45px; + background: rgba(0, 0, 0, 0.5); + text-align: center; + border-radius: 3px; + opacity: 0; + -webkit-transition: all 0.25s ease-in-out; + -moz-transition: all 0.25s ease-in-out; + -o-transition: all 0.25s ease-in-out; + -ms-transition: all 0.25s ease-in-out; + transition: all 0.25s ease-in-out; } aside .vcard .tool a { - color: rgba(255,255,255,.85); + color: rgba(255, 255, 255, 0.85); } aside .vcard #profile-photo-wrapper:hover .tool .action { - opacity: 1; + opacity: 1; } aside .vcard #profile-photo-wrapper.crop-preview { - padding: 0; + padding: 0; } aside .vcard .profile-header { - padding: 5px 0px 20px 0px; + padding: 5px 0px 20px 0px; } aside .vcard .fn { - font-weight: bold; - padding: 5px 0px 5px 0px; + font-weight: bold; + padding: 5px 0px 5px 0px; } aside .vcard .p-addr { - font-style: italic; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - padding-bottom: 2px; + font-style: italic; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + padding-bottom: 2px; } aside .vcard .title { - margin-top: 10px; + margin-top: 10px; } aside .vcard .detail { - display: table; - padding: 5px 0; + display: table; + padding: 5px 0; } aside .xmpp { - display: table; + display: table; } aside .vcard .icon { - display: table-cell; - padding-right: 10px; - width: 30px; + display: table-cell; + padding-right: 10px; + width: 30px; } #profile-extra-links { - overflow: auto; - margin-bottom: 10px; + overflow: auto; + margin-bottom: 10px; } aside .vcard #dfrn-request-link-button, aside .vcard #wallmessage-link-botton { - width: 50%; - margin: 0 0 0 -5px; - float: left; - padding: 0 5px; + width: 50%; + margin: 0 0 0 -5px; + float: left; + padding: 0 5px; } aside .vcard #dfrn-request-link, aside .vcard #wallmessage-link { - width: 100%; + width: 100%; } /* vcard-short-info */ #vcard-short-info, #nav-short-info .contact-wrapper { - margin-top: 2px; - height: 40px; - white-space: nowrap; - overflow: hidden; - padding-right: 20px; - margin-left: -14px; + margin-top: 2px; + height: 40px; + white-space: nowrap; + overflow: hidden; + padding-right: 20px; + margin-left: -14px; } #nav-short-info .contact-photo-wrapper.media-left { - float: left; + float: left; } #vcard-short-photo-wrapper img, #nav-short-info .contact-wrapper img { - height: 34px; - width: 34px; - border-radius: 3px; + height: 34px; + width: 34px; + border-radius: 3px; } #vcard-short-desc, #nav-short-info .contact-wrapper .media-body { - display: block; - height: 34px; - width: 100%; - text-overflow: ellipsis; + display: block; + height: 34px; + width: 100%; + text-overflow: ellipsis; } #vcard-short-desc > .media-heading, #vcard-short-desc > .vcard-short-addr, #nav-short-info .contact-wrapper .media-heading, #nav-short-info .contact-wrapper #contact-entry-url-network { - text-overflow: ellipsis; - overflow: hidden; + text-overflow: ellipsis; + overflow: hidden; } #vcard-short-desc > .media-heading, #nav-short-info .contact-wrapper .media-heading { - margin-bottom: 1px; - font-weight: bold; + margin-bottom: 1px; + font-weight: bold; } #nav-short-info .contact-wrapper .media-heading a { - color: $font_color_darker; - font-size: 14px !important; + color: $font_color_darker; + font-size: 14px !important; } #vcard-short-desc > .vcard-short-addr, #nav-short-info .contact-wrapper #contact-entry-url-network { - color: $font_color; - font-size: 12px; + color: $font_color; + font-size: 12px; } .network-content-wrapper > #viewcontact_wrapper-network, #nav-short-info .contact-wrapper .contact-photo-overlay, -#nav-short-info .contact-wrapper .contact-actions{ - display: none +#nav-short-info .contact-wrapper .contact-actions { + display: none; } aside #peoplefind-sidebar input, aside #follow-sidebar input { - height: 30px; - background-position: 10px 5px; + height: 30px; + background-position: 10px 5px; } aside #peoplefind-sidebar label, aside #follow-sidebar label { - font-weight: normal; + font-weight: normal; } aside #peoplefind-sidebar .form-group-search .form-button-search, aside #follow-sidebar .form-group-search .form-button-search { - padding: 2px 8px; + padding: 2px 8px; } div#sidebar-group-header h3 { - float: left; + float: left; } div#sidebar-group-list { - clear: both; + clear: both; } .group-new-form { - clear: both; + clear: both; } .group-edit-tool { - color: $font_color_darker; + color: $font_color_darker; } .faded-icon { - color: $font_color_darker; - opacity: 0.3; - transition: all 0.1s ease-in-out; + color: $font_color_darker; + opacity: 0.3; + transition: all 0.1s ease-in-out; } .faded-icon:hover { - color: $font_color_darker; - opacity: 1; + color: $font_color_darker; + opacity: 1; } .icon-padding { - margin-left: 20px; + margin-left: 20px; } aside #group-sidebar .sidebar-group-li:hover .group-edit-tool.faded-icon, aside #saved-search-list .saved-search-li:hover .savedsearchdrop.faded-icon, aside .widget:hover .widget-action.faded-icon { - opacity: 0.8; - transition: all 0.25s ease-in-out; + opacity: 0.8; + transition: all 0.25s ease-in-out; } aside #group-sidebar .sidebar-group-li .group-edit-tool.faded-icon:hover, aside #saved-search-list .saved-search-li .savedsearchdrop.faded-icon:hover, aside .widget .widget-action.faded-icon:hover { - opacity: 1; + opacity: 1; } aside #group-sidebar li .group-checkbox { - margin: 0; + margin: 0; } aside #group-sidebar li .group-edit-tool { - padding-right: 10px; + padding-right: 10px; } aside #group-sidebar li .group-edit-tool:first-child { - padding-right: 0px; + padding-right: 0px; } /* contact block widget */ .contact-block-content { - clear: both; - overflow: auto; - height: auto; + clear: both; + overflow: auto; + height: auto; } .contact-block-div { - float: left; - margin: 0px 5px 5px 0px; + float: left; + margin: 0px 5px 5px 0px; } .contact-block-link { - } .contact-block-img { - height: 75px; - width: 75px; - border-radius: 4px; + height: 75px; + width: 75px; + border-radius: 4px; } /* Tag cloud widget */ .tagblock.widget > .tag-cloud { - text-align: center; + text-align: center; } /* Section */ section ul.tabs { - display: none !important; + display: none !important; } /* Jot */ section #jotOpen { - display: none; + display: none; } #jotOpen { - margin-top: 3px; - float: right; + margin-top: 3px; + float: right; } #jot-content { - display: none; + display: none; } .modal #jot-sections { - max-height: calc(100vh - 22px); + max-height: calc(100vh - 22px); } @media (min-width: 768px) { - .modal #jot-sections { - max-height: calc(100vh - 62px); - } + .modal #jot-sections { + max-height: calc(100vh - 62px); + } } #jot-modal #jot-sections, #jot-modal #jot-modal-body, @@ -1244,111 +1274,114 @@ section #jotOpen { #jot-modal #item-Q0, #jot-modal #profile-jot-acl-wrapper, #jot-modal #acl-wrapper { - overflow: hidden; - display: flex; - flex: auto; - flex-direction: column; + overflow: hidden; + display: flex; + flex: auto; + flex-direction: column; } -#jot-modal .modal-header a, #jot-modal .modal-header .btn-link, -#profile-jot-submit-wrapper a, #profile-jot-submit-wrapper .btn-link { - color: $font_color_darker; +#jot-modal .modal-header a, +#jot-modal .modal-header .btn-link, +#profile-jot-submit-wrapper a, +#profile-jot-submit-wrapper .btn-link { + color: $font_color_darker; } #jot-modal .modal-header { - border-bottom: none; + border-bottom: none; } #jot-modal .modal-header .compose-link { float: right; margin-right: 20px; } -#jot-title-wrap, #jot-category-wrap { - margin-bottom: 5px; +#jot-title-wrap, +#jot-category-wrap { + margin-bottom: 5px; } #jot-text-wrap { - margin-top: 20px; + margin-top: 20px; } #jot-text-wrap textarea { - min-height: 100px; - overflow-y: auto !important; - overflow-y: overlay !important; + min-height: 100px; + overflow-y: auto !important; + overflow-y: overlay !important; } #jot-text-wrap .preview textarea { - width: 100%; + width: 100%; } #preview_profile-jot-text, .comment-edit-form .preview { - position: relative; - padding: 0px 10px; - margin-top: -2px; - border: 2px solid #ededed; - border-top: none; - box-shadow: none; - border-radius: 0 0 4px 4px; - background: #fff; - color: $font_color_darker; + position: relative; + padding: 0px 10px; + margin-top: -2px; + border: 2px solid #ededed; + border-top: none; + box-shadow: none; + border-radius: 0 0 4px 4px; + background: #fff; + color: $font_color_darker; } textarea#profile-jot-text:focus + #preview_profile-jot-text, textarea.comment-edit-text:focus + .comment-edit-form .preview { - border: 2px solid #6fdbe8; - border-top: none; + border: 2px solid #6fdbe8; + border-top: none; } .preview hr.previewseparator { - margin-top: 0px; - border-color: #D2D2D2; + margin-top: 0px; + border-color: #d2d2d2; } #previewImgBtn_profile-jot-text, -.closePreview { - position: absolute; - top: 15px; +.closePreview { + position: absolute; + top: 15px; } .closePreview { - right: 15px; - z-index: 1; + right: 15px; + z-index: 1; } .previewImgBtn { - left: 15px; + left: 15px; } .preview button.previewActionBtn { - display:block; - height: 25px; - width: 25px; - border-radius: 50%; - color: #fff; - border: 2px solid #fff; - box-shadow: 0 0 3px gray; - background: #777; - text-align: center; - line-height: 2px; - text-decoration: none; - padding: 0 0 1px 1px; - opacity: 0.7; + display: block; + height: 25px; + width: 25px; + border-radius: 50%; + color: #fff; + border: 2px solid #fff; + box-shadow: 0 0 3px gray; + background: #777; + text-align: center; + line-height: 2px; + text-decoration: none; + padding: 0 0 1px 1px; + opacity: 0.7; } .preview button.previewActionBtn:hover { - opacity: 1; + opacity: 1; } .preview .closePreview button.previewActionBtn { - font-size: 25px; + font-size: 25px; } #previewInputTitle_profile-jot-text { - width: 100%; + width: 100%; } #profile-jot-wrapper button#profile-jot-submit { - margin-top: 5px; + margin-top: 5px; } #profile-jot-wrapper #character-counter { - padding: 10px 15px; + padding: 10px 15px; } .modal .wall-item-container.preview { - overflow-y: auto; - overflow-y: overlay; + overflow-y: auto; + overflow-y: overlay; } /* ACL */ .fa.lock:before { - font-family: ForkAwesome; - content: "\f023"; + font-family: ForkAwesome; + content: "\f023"; } .fa.unlock:before { - font-family: ForkAwesome; - content: "\f09c"; + font-family: ForkAwesome; + content: "\f09c"; } #acl-wrapper label.panel-heading { @@ -1359,109 +1392,109 @@ textarea.comment-edit-text:focus + .comment-edit-form .preview { /* Filebrowser */ .fbrowser .breadcrumb { - margin-bottom: 0px; + margin-bottom: 0px; } .fbrowser .path a:before { - content: ""; - padding: 0; + content: ""; + padding: 0; } -.fbrowser .breadcrumb > li:last-of-type a{ - color: $font_color; - pointer-events: none; - cursor: default; +.fbrowser .breadcrumb > li:last-of-type a { + color: $font_color; + pointer-events: none; + cursor: default; } .fbrowser .folders { - box-shadow: -1.5px 0 0 0 rgba(0, 0, 0, .1) inset; - padding-right: 1px; + box-shadow: -1.5px 0 0 0 rgba(0, 0, 0, 0.1) inset; + padding-right: 1px; } .fbrowser .folders ul { - padding: 0px; - margin-left: -15px; - margin-bottom: 0px; - overflow-y: auto; - min-width: 100px; - max-height: calc(100vh - 210px); - line-height: 1.3; + padding: 0px; + margin-left: -15px; + margin-bottom: 0px; + overflow-y: auto; + min-width: 100px; + max-height: calc(100vh - 210px); + line-height: 1.3; } @media (min-width: 768px) { - .fbrowser .folders ul { - max-height: calc(100vh - 255px); - } + .fbrowser .folders ul { + max-height: calc(100vh - 255px); + } } .fbrowser .folders li { - padding-left: 20px; - padding-right: 10px; - padding-top: 3px; - padding-bottom: 3px; + padding-left: 20px; + padding-right: 10px; + padding-top: 3px; + padding-bottom: 3px; } .fbrowser .folders li:hover { - z-index: 2; - color: $font_color_darker; - background-color: rgba(247, 247, 247, $contentbg_transp); - border-left: 3px solid $link_color; - padding-left: 17px; + z-index: 2; + color: $font_color_darker; + background-color: rgba(247, 247, 247, $contentbg_transp); + border-left: 3px solid $link_color; + padding-left: 17px; } .fbrowser .folders li a, .fbrowser .folders li a:hover { - color: $font_color_darker; - font-size: 13px; + color: $font_color_darker; + font-size: 13px; } .fbrowser .folders + .list { - padding-left: 10px; + padding-left: 10px; } .fbrowser .fbrowser-content-container { - overflow-y: auto; - max-height: calc(100vh - 175px); + overflow-y: auto; + max-height: calc(100vh - 175px); } @media (min-width: 768px) { - .fbrowser .fbrowser-content-container { - max-height: calc(100vh - 220px); - } + .fbrowser .fbrowser-content-container { + max-height: calc(100vh - 220px); + } } .fbrowser.image .photo-album-image-wrapper { - box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.2); + box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.2); } .fbrowser.image .photo-album-image-wrapper .caption { - pointer-events: none; + pointer-events: none; } .fbrowser .profile-rotator-wrapper { - min-height: 200px; + min-height: 200px; } .fbrowser .fa-spin { - position: absolute; - left: 45%; - top: 40%; - font-size: 48px; - margin:0px auto; + position: absolute; + left: 45%; + top: 40%; + font-size: 48px; + margin: 0px auto; } /* /* Stream */ .panel { - border: none; - background-color: rgba(255,255,255,$contentbg_transp); - box-shadow: 0 0 2px #dadada; - -webkit-box-shadow: 0 0 2px #dadada; - -moz-box-shadow: 0 0 2px #dadada; - border-radius: 4px; - position: relative; + border: none; + background-color: rgba(255, 255, 255, $contentbg_transp); + box-shadow: 0 0 2px #dadada; + -webkit-box-shadow: 0 0 2px #dadada; + -moz-box-shadow: 0 0 2px #dadada; + border-radius: 4px; + position: relative; } .panel.panel-inline { - margin-left: -15px; - margin-right: -15px; - margin-top: 15px; - padding: 15px; + margin-left: -15px; + margin-right: -15px; + margin-top: 15px; + padding: 15px; } .panel .panel-body { - word-wrap: break-word; + word-wrap: break-word; } .tread-wrapper .media { - overflow: visible; - word-wrap: break-word; + overflow: visible; + word-wrap: break-word; } aside .panel-body { - padding: 0px; + padding: 0px; } /* Thread hover effects */ @@ -1470,160 +1503,162 @@ aside .panel-body { .desktop-view .wall-item-container .fakelink, .desktop-view .toplevel_item .fakelink, .desktop-view .toplevel_item .wall-item-container .wall-item-responses a { - color: $font_color; - -webkit-transition: all 0.25s ease-in-out; - -moz-transition: all 0.25s ease-in-out; - -o-transition: all 0.25s ease-in-out; - -ms-transition: all 0.25s ease-in-out; - transition: all 0.25s ease-in-out; + color: $font_color; + -webkit-transition: all 0.25s ease-in-out; + -moz-transition: all 0.25s ease-in-out; + -o-transition: all 0.25s ease-in-out; + -ms-transition: all 0.25s ease-in-out; + transition: all 0.25s ease-in-out; } -.toplevel_item:hover .fakelink, .wall-item-container:hover .fakelink, +.toplevel_item:hover .fakelink, +.wall-item-container:hover .fakelink, .toplevel_item:hover .wall-item-container:hover .wall-item-responses a, .toplevel_item:hover .wall-item-content a, .toplevel_item:hover .wall-item-name, .wall-item-container:hover .wall-item-content a, .wall-item-container:hover .wall-item-name, .wall-item-container:hover .wall-item-location a { - color: $link_color; - -webkit-transition: all 0.25s ease-in-out; - -moz-transition: all 0.25s ease-in-out; - -o-transition: all 0.25s ease-in-out; - -ms-transition: all 0.25s ease-in-out; - transition: all 0.25s ease-in-out; + color: $link_color; + -webkit-transition: all 0.25s ease-in-out; + -moz-transition: all 0.25s ease-in-out; + -o-transition: all 0.25s ease-in-out; + -ms-transition: all 0.25s ease-in-out; + transition: all 0.25s ease-in-out; } /* wall items */ .wall-item-container { - border-top: 1px solid rgba(255, 255, 255, 0.8); + border-top: 1px solid rgba(255, 255, 255, 0.8); } .wall-item-container.panel-body { - padding: 0; - border-top: none; + padding: 0; + border-top: none; } .comment-edit-preview .wall-item-container.panel-body.preview { - margin-top: 4px; + margin-top: 4px; } .comment-edit-preview .panel { - margin-bottom: 0; + margin-bottom: 0; } .wall-item-container .media { - margin-top: 0; - padding: 10px; - background-color: rgba(0, 0, 0, 0.03); + margin-top: 0; + padding: 10px; + background-color: rgba(0, 0, 0, 0.03); } /* wall items contact photo */ .contact-photo { - height: 48px; - width: 48px; - border-radius: 3px; - /*maybe some adional stuff is needed for the different screen sizes */ + height: 48px; + width: 48px; + border-radius: 3px; + /*maybe some adional stuff is needed for the different screen sizes */ } .contact-photo-image-wrapper { - width: 100%; - height: 100%; - overflow: hidden; - position: relative; - text-align: center; + width: 100%; + height: 100%; + overflow: hidden; + position: relative; + text-align: center; } .contact-photo-overlay { - width: 100%; - height: 100%; - position: absolute; - overflow: hidden; - top: 0; - left: 0; - border-radius: 3px; - background:rgba(0,0,0,.50); - text-align:center; - opacity:0; - -webkit-transition: opacity .25s ease; - -moz-transition: opacity .25s ease; + width: 100%; + height: 100%; + position: absolute; + overflow: hidden; + top: 0; + left: 0; + border-radius: 3px; + background: rgba(0, 0, 0, 0.5); + text-align: center; + opacity: 0; + -webkit-transition: opacity 0.25s ease; + -moz-transition: opacity 0.25s ease; } .contact-photo-overlay:hover { - opacity: 1; + opacity: 1; } .contact-photo-overlay-content { - font-size: 26px; - text-shadow: 1px 1px 1px #ccc; - color:rgba(255,255,255,.85); - height: 100%; - vertical-align: bottom; + font-size: 26px; + text-shadow: 1px 1px 1px #ccc; + color: rgba(255, 255, 255, 0.85); + height: 100%; + vertical-align: bottom; } -.contact-photo-xs{ - height: 38px; - width: 38px; - border-radius: 3px; +.contact-photo-xs { + height: 38px; + width: 38px; + border-radius: 3px; } .wwto .contact-photo { - width: auto; - height: 25px; - font-size: 8.8px; - border-radius: 2px; - position: absolute; - top: 28px; - left: 28px; - display: inline-block; + width: auto; + height: 25px; + font-size: 8.8px; + border-radius: 2px; + position: absolute; + top: 28px; + left: 28px; + display: inline-block; } /* wall items action dropdown menu */ -.media [role=heading] { +.media [role="heading"] { position: relative; } /* Workaround for Firefox where the post heading covers the avatar, preventing hovercard interaction, 48px is the width of the avatar image and should be adjusted accordingly if it ever changes. */ -.media .dropdown.pull-left + [role=heading] { +.media .dropdown.pull-left + [role="heading"] { margin-left: 48px; } .preferences { - position: absolute; - right: 0; - top: 0; + position: absolute; + right: 0; + top: 0; } .shared_header .preferences { top: 7px; right: 9px; } .wall-item-network { - font-size: 13px; + font-size: 13px; } /* wall items contact info */ .media .media-body { - font-size: 13px; + font-size: 13px; } .media .media-body h4.media-heading { - font-size: 14px; - font-weight: 500; - color: $font_color_darker; + font-size: 14px; + font-weight: 500; + color: $font_color_darker; } -.media .media-body .addional-info a, .media .media-body h5.media-heading > a { - display: block; +.media .media-body .addional-info a, +.media .media-body h5.media-heading > a { + display: block; } .media .contact-info-comment { - display: table-cell; + display: table-cell; } .media .contact-info-xs h5, .media .contact-info-comment { - margin: 0 0 5px; + margin: 0 0 5px; } .media-heading { - margin: 0 0 5px; + margin: 0 0 5px; } .wall-item-name, .shared-author { - font-size: 15px; - font-weight: bold; + font-size: 15px; + font-weight: bold; } .wall-item-name.xs { - font-weight: 700; - font-size: 14px; + font-weight: 700; + font-size: 14px; } /* Contact avatar click card */ @@ -1632,7 +1667,7 @@ aside .panel-body { } .userinfo.click-card > *:hover:after { - content: '⌄'; + content: "⌄"; color: #bebebe; font-size: 1em; font-weight: bold; @@ -1644,52 +1679,52 @@ aside .panel-body { left: 0; width: 33%; height: 33%; - opacity: .8; + opacity: 0.8; border-radius: 0 0 40% 0; } /* The lock symbol popup */ #panel { - position: absolute; - list-style: none; - background-color: $nav_bg; - border: none; - border-radius: 3px; - float: left; - min-width: 160px; - max-width: 220px; - padding: 10px ; - margin: 2px 0 0; - font-size: 14px; - text-align: left; - color: $nav_icon_color; - z-index: 1000; + position: absolute; + list-style: none; + background-color: $nav_bg; + border: none; + border-radius: 3px; + float: left; + min-width: 160px; + max-width: 220px; + padding: 10px; + margin: 2px 0 0; + font-size: 14px; + text-align: left; + color: $nav_icon_color; + z-index: 1000; } /* Space between content and head */ .wall-spacer { - height: 10px; + height: 10px; } /* wall items content */ .wall-item-content { - word-break: break-word; + word-break: break-word; } .wall-item-content img { - max-height: 480px; - object-fit: contain; + max-height: 480px; + object-fit: contain; } .wall-item-body > img, .wall-item-body > a > img { - border-radius: 3px; + border-radius: 3px; } .wall-item-body .body-attach > a { - color: $font_color_darker; - display: inline-block; + color: $font_color_darker; + display: inline-block; } .wall-item-body .body-attach > a div { - color: $font_color_darker; - width: 20px; + color: $font_color_darker; + width: 20px; } /* wall-item content elements */ @@ -1699,140 +1734,142 @@ aside .panel-body { margin-bottom: 0; } .vevent { - padding: 10px; - box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .1) inset, 0 1px 1px rgba(0, 0, 0, .05); + padding: 10px; + box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.1) inset, 0 1px 1px rgba(0, 0, 0, 0.05); } @media screen and (max-width: 767px) { - .vevent { + .vevent { margin-left: 0px; margin-right: 0px; - } + } .shared-wrapper { margin: 5px -10px 0; } } .vevent:hover { - box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .15) inset, 0 1px 1px rgba(0, 0, 0, .05); + box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.15) inset, 0 1px 1px rgba(0, 0, 0, 0.05); } .shared_header { - margin-left: 0px; - margin-top: 0px; - padding-top: 0px; - margin-bottom: 10px; - border-top: none; - color: inherit; + margin-left: 0px; + margin-top: 0px; + padding-top: 0px; + margin-bottom: 10px; + border-top: none; + color: inherit; } blockquote.shared_content { - padding: 0px; - margin-left: 0px; - color: inherit; + padding: 0px; + margin-left: 0px; + color: inherit; } code > .hl-main { - padding: 10px 10px 1px 0; + padding: 10px 10px 1px 0; } .hl-main ol { - line-height: 1.7; + line-height: 1.7; } .type-link img.attachment-image { - width: 100%; + width: 100%; } -.type-link blockquote, .type-video blockquote { - margin: 0; - padding: 10px 0; +.type-link blockquote, +.type-video blockquote { + margin: 0; + padding: 10px 0; } .oembed.video .embed_video > div::before { - font-family: ForkAwesome; - font-weight: normal; - font-style: normal; - display: inline-block; - text-decoration: inherit; - vertical-align: top; - font-size: 3em; - content: "\f01d"; - color: #fff; - bottom: 0px; - right: 10px; - position: absolute; + font-family: ForkAwesome; + font-weight: normal; + font-style: normal; + display: inline-block; + text-decoration: inherit; + vertical-align: top; + font-size: 3em; + content: "\f01d"; + color: #fff; + bottom: 0px; + right: 10px; + position: absolute; } .oembed.video .embed_video > div { - background-color: rgba(0,0,0,0.2); - -webkit-transition: all 0.25s ease-in-out; - -moz-transition: all 0.25s ease-in-out; - -o-transition: all 0.25s ease-in-out; - -ms-transition: all 0.25s ease-in-out; - transition: all 0.25s ease-in-out; + background-color: rgba(0, 0, 0, 0.2); + -webkit-transition: all 0.25s ease-in-out; + -moz-transition: all 0.25s ease-in-out; + -o-transition: all 0.25s ease-in-out; + -ms-transition: all 0.25s ease-in-out; + transition: all 0.25s ease-in-out; } .oembed.video .embed_video > div:hover { - background-color: rgba(0,0,0,0); + background-color: rgba(0, 0, 0, 0); } .oembed.video .embed_video.active { - margin: 1em 0; + margin: 1em 0; } .oembed.video .embed_video.active iframe { - width: 100% !important; + width: 100% !important; } .wall-item-tags, .itemedited { - margin: 10px 0; - font-size: 13px; + margin: 10px 0; + font-size: 13px; } .wall-item-tags a { - color: $font_color_darker; + color: $font_color_darker; } .wall-item-tags a:hover { - text-decoration: none; + text-decoration: none; } .wall-item-bottom .label, .wall-item-bottom .label a { - color: #fff; + color: #fff; } .wall-item-tags .category, .wall-item-tags .folder { - margin-right: 3px; + margin-right: 3px; } /* item social action buttons */ .wall-item-actions { - display: flex; - margin: 0; - justify-content: space-between; + display: flex; + margin: 0; + justify-content: space-between; } -.wall-item-actions a, .wall-item-actions button { - font-size: 13px; - color: $font_color_darker; +.wall-item-actions a, +.wall-item-actions button { + font-size: 13px; + color: $font_color_darker; } .wall-item-actions .active { - font-weight: bold; + font-weight: bold; color: $link_color; } .wall-item-actions-left { - display: table-cell; - vertical-align: middle; + display: table-cell; + vertical-align: middle; } .wall-item-actions-right { - display: flex; + display: flex; } .wall-item-actions .checkbox { - margin: 0; - margin-left: 20px; + margin: 0; + margin-left: 20px; } .wall-item-actions .button-comments, .wall-item-actions .button-votes, .wall-item-actions .button-likes { - text-transform: capitalize; + text-transform: capitalize; } .wall-item-actions button:hover { - color: $font_color_darker; - text-decoration: underline; + color: $font_color_darker; + text-decoration: underline; } .wall-item-actions .separator { - margin: 0 .3em; + margin: 0 0.3em; } .wall-item-responses > div > p { - margin: 0; + margin: 0; } /* wall item hover effects */ @@ -1840,7 +1877,7 @@ code > .hl-main { @media (min-width: 768px) { /* Tags and mentions */ .wall-item-container .wall-item-bottom .wall-item-tags span.label { - filter:grayscale(0.5); + filter: grayscale(0.5); opacity: 0.8; -webkit-transition: all 0.25s ease-in-out; @@ -1851,7 +1888,7 @@ code > .hl-main { } .wall-item-container:hover .wall-item-bottom .wall-item-tags span.label { - filter:grayscale(0); + filter: grayscale(0); opacity: 1; -webkit-transition: all 0.25s ease-in-out; @@ -1865,7 +1902,7 @@ code > .hl-main { .wall-item-container .wall-item-actions button, .wall-item-container .body-attach > a { opacity: 0.4; - + -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; @@ -1876,7 +1913,7 @@ code > .hl-main { .wall-item-container:hover .wall-item-actions button, .wall-item-container:hover .body-attach > a { opacity: 1; - + -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; @@ -1892,41 +1929,41 @@ code > .hl-main { * Comments */ wall-item-comment-wrapper.well { - border: none; - box-shadow: none; - background-color: rgba(237, 237, 237, $contentbg_transp); - background-image: none; - margin-bottom: 1px; - background-color: red; + border: none; + box-shadow: none; + background-color: rgba(237, 237, 237, $contentbg_transp); + background-image: none; + margin-bottom: 1px; + background-color: red; } wall-item-comment-wrapper.well-small { - padding: 10px; - border-radius: 3px; + padding: 10px; + border-radius: 3px; } wall-item-comment-wrapper.well hr { - border-top: 1px solid #d9d9d9; + border-top: 1px solid #d9d9d9; } .wall-entry wall-item-comment-wrapper.well { - margin-bottom: 0; + margin-bottom: 0; } .comment-container { - margin-bottom: 0px; - border-top-left-radius: 3px; - border-top-right-radius: 3px; - border-bottom-right-radius: 0px; - border-bottom-left-radius: 0px; + margin-bottom: 0px; + border-top-left-radius: 3px; + border-top-right-radius: 3px; + border-bottom-right-radius: 0px; + border-bottom-left-radius: 0px; } .comment .media { - position: relative!important; - margin-top: 0; + position: relative !important; + margin-top: 0; } .hide-comments-outer { - background-color: rgba(0, 0, 0, 0.03); - padding: 0.5em; - border-radius: 0.5em 0.5em 0 0; + background-color: rgba(0, 0, 0, 0.03); + padding: 0.5em; + border-radius: 0.5em 0.5em 0 0; } .hide-comments-total { - cursor: pointer; + cursor: pointer; } /* @@ -1935,68 +1972,67 @@ wall-item-comment-wrapper.well hr { .comment-fake-form, .wall-item-comment-wrapper { - padding: 10px; - border-top: 1px solid rgba(255, 255, 255, 0.8); - background-color: rgba(0, 0, 0, 0.03); - border-radius: 0 0 4px 4px; + padding: 10px; + border-top: 1px solid rgba(255, 255, 255, 0.8); + background-color: rgba(0, 0, 0, 0.03); + border-radius: 0 0 4px 4px; margin-bottom: 0; } .comment-fake-form { - border-color: #d9d9d9; + border-color: #d9d9d9; } .comment-fake-form textarea { - resize: none; + resize: none; } .comment-container .wall-item-comment-wrapper { - margin-top: 0.5em; + margin-top: 0.5em; } .comment-edit-form textarea { - resize: vertical; + resize: vertical; } .comment-edit-submit-wrapper { - text-align: right; - margin-bottom: 0; + text-align: right; + margin-bottom: 0; } .comment-icon-list { - display: flex; - justify-content: space-between; + display: flex; + justify-content: space-between; } /* acpopup + textcompletion*/ .acpopup { - background-color: #ffffff; - border-radius: 4px; - overflow: auto; - z-index: 100000; - box-shadow: 0 6px 12px rgba(0,0,0,.175); + background-color: #ffffff; + border-radius: 4px; + overflow: auto; + z-index: 100000; + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); } nav .acpopup { - margin-left: -23px; + margin-left: -23px; } /** @todo: we schould consider the possebility to overwrite bootstrap dropdowns at the beginning of this file to get rid of the !important */ .textcomplete-item > a { - color: $font_color_darker !important; - padding: 5px 20px !important; + color: $font_color_darker !important; + padding: 5px 20px !important; } .textcomplete-item.active > a { - background-color: rgb(247, 247, 247) !important; - background-image: none !important; - border-left: 3px solid $link_color; - padding-left: 17px !important; + background-color: rgb(247, 247, 247) !important; + background-image: none !important; + border-left: 3px solid $link_color; + padding-left: 17px !important; } .textcomplete-item a .forum { - color: $link_color; + color: $link_color; } img.acpopup-img { - border-radius: 4px; - } - + border-radius: 4px; +} /* The wall-item thread levels */ .wall-item-container.thread_level_3, @@ -2004,101 +2040,102 @@ img.acpopup-img { .wall-item-container.thread_level_5, .wall-item-container.thread_level_6, .wall-item-container.thread_level_7 { - margin-left: 15px; + margin-left: 15px; } /* Birthday */ -#birthday-notice, #birthday-wrapper { - margin-bottom: 5px; - padding: 10px; - border: none; - background-color: rgba(247,247,247,$contentbg_transp); - box-shadow: 0 0 3px #dadada; - -webkit-box-shadow: 0 0 3px #dadada; - -moz-box-shadow: 0 0 3px #dadada; - border-radius: 4px; +#birthday-notice, +#birthday-wrapper { + margin-bottom: 5px; + padding: 10px; + border: none; + background-color: rgba(247, 247, 247, $contentbg_transp); + box-shadow: 0 0 3px #dadada; + -webkit-box-shadow: 0 0 3px #dadada; + -moz-box-shadow: 0 0 3px #dadada; + border-radius: 4px; } /* Menubar Tabs */ section > .tabbar-wrapper { -/* The tabbar shouldn't' be visibile inside + /* The tabbar shouldn't' be visibile inside the section element. Only after we have moved it to the nav through js */ - display: none !important; + display: none !important; } #tabmenu, .tabbar-wrapper, .tabbar, .tabbar > li { - height: 100%; - padding: 0; + height: 100%; + padding: 0; } #tabmenu .search-heading { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } ul.tabs { - list-style: none; - height: 100%; - padding: 0; - padding-top: 10px; - margin: 0; + list-style: none; + height: 100%; + padding: 0; + padding-top: 10px; + margin: 0; } ul.tabs li { - float: left; - margin: 0; - padding: 0; - border-bottom: 0 solid $link_color; - font-size: 13px; - height: 102%; - transition: all .15s ease; + float: left; + margin: 0; + padding: 0; + border-bottom: 0 solid $link_color; + font-size: 13px; + height: 102%; + transition: all 0.15s ease; } ul.tabs li a { - margin-left: 10px; - margin-right: 10px; + margin-left: 10px; + margin-right: 10px; } -ul.tabs li:hover, ul.tabs li.active { - border-bottom-width: 4px; +ul.tabs li:hover, +ul.tabs li.active { + border-bottom-width: 4px; } ul.tabbar ul.tabs-extended:hover li.dropdown { - border-bottom: 0; + border-bottom: 0; } ul.tabbar ul.tabs-extended li.active { - width: 100%; - border-bottom-width: 2px; + width: 100%; + border-bottom-width: 2px; } ul.tabbar ul.tabs-extended li.active a { - background: none; + background: none; } ul.dropdown-menu li:hover { - border-bottom: 0; + border-bottom: 0; } .dropdown-menu li { - display: block; - width: 100%; - box-sizing: border-box; + display: block; + width: 100%; + box-sizing: border-box; } /* Dropdown Menu */ .dropdown-menu li a, .dropdown-menu li .btn-link { - color: $font_color_darker; - + color: $font_color_darker; } .dropdown-menu li > :hover, .dropdown-menu li > :visited, .dropdown-menu li > :focus { - background: 0 0; + background: 0 0; } .dropdown-menu li:first-child { - margin-top: 3px; + margin-top: 3px; } /* Notificaiotn badges */ #mail-update-li.show { - display: inline-block!important; + display: inline-block !important; } /* Media Classes */ @@ -2108,35 +2145,35 @@ p.wall-item-announce, .media .delivery, .media .location, .media .location a { - font-size: 11px; - color: $font_color_darker; + font-size: 11px; + color: $font_color_darker; } .media-list > li { - padding: 10px; - border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp); - position: relative; - border-left: 3px solid rgba(255,255,255,0); - font-size: 12px; + padding: 10px; + border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp); + position: relative; + border-left: 3px solid rgba(255, 255, 255, 0); + font-size: 12px; } .media-list > li:hover, .media-list > li.selected, .media-list > li.active { - border-left: 3px solid $link_color; - background-color: rgba(247, 247, 247, $contentbg_transp); + border-left: 3px solid $link_color; + background-color: rgba(247, 247, 247, $contentbg_transp); } /* Forms */ .form-control { - box-shadow: none; + box-shadow: none; } .form-control:focus { - border: 2px solid $link_color; - box-shadow: none; + border: 2px solid $link_color; + box-shadow: none; } .radio label::before, .checkbox label::before { - background-color: rgba(255,255,255,$contentbg_transp); + background-color: rgba(255, 255, 255, $contentbg_transp); } .radio label::after { background-color: $link_color; @@ -2154,654 +2191,675 @@ p.wall-item-announce, color: $font_color_darker; } -input[type=range].form-control { +input[type="range"].form-control { padding-left: 0; padding-right: 0; } /* Search form */ .form-control.form-search { - border-radius: 30px; - background-image: url(img/icon_search16x16.png); - background-repeat: no-repeat; - background-position: 10px 8px; - padding-left: 34px; + border-radius: 30px; + background-image: url(img/icon_search16x16.png); + background-repeat: no-repeat; + background-position: 10px 8px; + padding-left: 34px; } .form-group-search { - position: relative; - width: 100%; + position: relative; + width: 100%; } .form-group-search .form-button-search { - position: absolute; - top: 4px; - right: 4px; - border-radius: 30px; + position: absolute; + top: 4px; + right: 4px; + border-radius: 30px; } .search-input.form-control.form-search { - width: 100%; + width: 100%; } .search-heading { - text-align: center; - color: $link_color; - font-size: 20px; + text-align: center; + color: $link_color; + font-size: 20px; } .search-content-wrapper > #search-header-wrapper { - display: none; + display: none; } .search-content-wrapper > .section-title-wrapper { - display: none; + display: none; } #navbar-button > #search-save { - margin-top: 3px; + margin-top: 3px; } /* Section-Content-Wrapper */ #search-header-wrapper { - padding: 15px; - padding-bottom: 20px; - margin-bottom: 20px; - border: none; - background-color: rgba(255,255,255,$contentbg_transp); - border-radius: 4px; - position: relative; - color: $font_color_darker; - box-shadow: 0 0 3px #dadada; - -webkit-box-shadow: 0 0 3px #dadada; - -moz-box-shadow: 0 0 3px #dadada; + padding: 15px; + padding-bottom: 20px; + margin-bottom: 20px; + border: none; + background-color: rgba(255, 255, 255, $contentbg_transp); + border-radius: 4px; + position: relative; + color: $font_color_darker; + box-shadow: 0 0 3px #dadada; + -webkit-box-shadow: 0 0 3px #dadada; + -moz-box-shadow: 0 0 3px #dadada; } /* ******* * PAGES *********/ -section > .generic-page-wrapper, .videos-content-wrapper, -.suggest-content-wrapper, .help-content-wrapper, -.match-content-wrapper, .dirfind-content-wrapper, -.delegation-content-wrapper, .notes-content-wrapper, -.message-content-wrapper, .apps-content-wrapper, -#adminpage, .delegate-content-wrapper, .uexport-content-wrapper, +section > .generic-page-wrapper, +.videos-content-wrapper, +.suggest-content-wrapper, +.help-content-wrapper, +.match-content-wrapper, +.dirfind-content-wrapper, +.delegation-content-wrapper, +.notes-content-wrapper, +.message-content-wrapper, +.apps-content-wrapper, +#adminpage, +.delegate-content-wrapper, +.uexport-content-wrapper, .dfrn_request-content-wrapper, -.friendica-content-wrapper, .credits-content-wrapper, .nogroup-content-wrapper, -.profperm-content-wrapper, .invite-content-wrapper, .tos-content-wrapper, +.friendica-content-wrapper, +.credits-content-wrapper, +.nogroup-content-wrapper, +.profperm-content-wrapper, +.invite-content-wrapper, +.tos-content-wrapper, .fsuggest-content-wrapper { - min-height: calc(100vh - 150px); - padding: 15px; - padding-bottom: 20px; - margin-bottom: 20px; - border: none; - background-color: rgba(255,255,255,$contentbg_transp); - border-radius: 4px; - position: relative; - color: $font_color_darker; - box-shadow: 0 0 3px #dadada; - -webkit-box-shadow: 0 0 3px #dadada; - -moz-box-shadow: 0 0 3px #dadada; + min-height: calc(100vh - 150px); + padding: 15px; + padding-bottom: 20px; + margin-bottom: 20px; + border: none; + background-color: rgba(255, 255, 255, $contentbg_transp); + border-radius: 4px; + position: relative; + color: $font_color_darker; + box-shadow: 0 0 3px #dadada; + -webkit-box-shadow: 0 0 3px #dadada; + -moz-box-shadow: 0 0 3px #dadada; } #content:hover .page-action.faded-icon { - opacity: 0.8; - transition: all 0.25s ease-in-out; + opacity: 0.8; + transition: all 0.25s ease-in-out; } #content .page-action.faded-icon:hover { - opacity: 1; + opacity: 1; } .section-title-wrapper { - overflow: hidden; + overflow: hidden; } /* Home and Login Page */ -body.mod-home nav.navbar .nav>li>a:hover { - background-color: rgba(255,255,255,0.2); +body.mod-home nav.navbar .nav > li > a:hover { + background-color: rgba(255, 255, 255, 0.2); } body.mod-home .navbar #nav-login, body.mod-login .navbar #nav-login { - display: none; + display: none; } /* Profile-page */ #profile-content-standard, #profile-content-advanced { - overflow: hidden; + overflow: hidden; } #profile-menu { - margin-top: 20px; - margin-bottom: 20px; + margin-top: 20px; + margin-bottom: 20px; } .contact-block-div.forumlist-profile-advanced { - float: left; + float: left; } /* contacts page */ ul.viewcontact_wrapper { - margin-left: -15px; - margin-right: -15px; + margin-left: -15px; + margin-right: -15px; } ul.viewcontact_wrapper > li { - padding-left: 15px; + padding-left: 15px; } .contact-wrapper .contact-photo-wrapper button { - padding: 0; + padding: 0; } .contact-wrapper.media { - overflow: visible; - word-wrap: break-word; - margin-top: 0; + overflow: visible; + word-wrap: break-word; + margin-top: 0; } /* bootstrap hack for .media */ .contact-wrapper.media .media-body { - display: table-cell; - width: 10000px; - *width: auto; - *zoom: 1; + display: table-cell; + width: 10000px; + *width: auto; + *zoom: 1; } -.contact-wrapper.media:before, .media:after { - content: ""; - display: table; +.contact-wrapper.media:before, +.media:after { + content: ""; + display: table; } .contact-wrapper.media:after { - clear: both; + clear: both; } .contact-wrapper .contact-photo-image-wrapper img.contact-photo.xl { - height: 80px; - width: 80px; + height: 80px; + width: 80px; } .contact-wrapper .contact-photo-image-wrapper img.contact-photo-xs { - height: 48px; - width: 48px; + height: 48px; + width: 48px; } .contact-wrapper .contact-photo-overlay-content.xl { - font-size: 48px; + font-size: 48px; } .contact-wrapper .contact-photo-menu { - top: auto; + top: auto; } .contact-entry-desc { - color: $font_color_darker; + color: $font_color_darker; } .contact-entry-checkbox { - margin-top: -20px; + margin-top: -20px; } .contact-wrapper .media-body .contact-entry-name h4.media-heading a { - font-weight: bold !important; - color: $link_color; - font-size: 15px !important; + font-weight: bold !important; + color: $link_color; + font-size: 15px !important; } .contact-wrapper .contact-actions { - display: flex; + display: flex; } .contact-wrapper .contact-action-link, .contact-wrapper .contact-action-link:hover, .textcomplete-item .contact-wrapper .contact-action-link { - padding: 0 5px; - color: $font_color_darker; - border: 0; + padding: 0 5px; + color: $font_color_darker; + border: 0; } .contact-wrapper .contact-action-link { - opacity: 0.1; - transition: all 0.25s ease-in-out; + opacity: 0.1; + transition: all 0.25s ease-in-out; } ul li:hover .contact-wrapper .contact-action-link { - opacity: 0.8; - transition: all 0.25s ease-in-out; + opacity: 0.8; + transition: all 0.25s ease-in-out; } ul li:hover .contact-wrapper .contact-action-link:hover { - opacity: 1; + opacity: 1; } #contacts-search-wrapper, -#directory-search-wrapper{ - padding: 10px 0; +#directory-search-wrapper { + padding: 10px 0; } #contact-drop-confirm .contact-actions, #contact-drop-confirm .contact-photo-overlay, #contact-drop-confirm .contact-photo-menu { - display: none; + display: none; } #contact-drop-confirm #confirm-form { - margin-top: 20px; + margin-top: 20px; } /* contact-edit */ #contact-edit-actions { - position: absolute; + position: absolute; } #contact-edit-status-wrapper { - border: none; - background-color: rgba(225, 245, 254, $contentbg_transp); - margin: 15px -15px; + border: none; + background-color: rgba(225, 245, 254, $contentbg_transp); + margin: 15px -15px; } #contact-edit-settings { - display: block; + display: block; } /* directory page */ #directory-search-heading { - padding-top: 10px; + padding-top: 10px; } /* group edit page */ .group-actions { - margin-top: 4px; - margin-bottom: 10px; - font-size: 30px; + margin-top: 4px; + margin-bottom: 10px; + font-size: 30px; } .group-actions button, .group-actions a { - font-size: 18px; + font-size: 18px; } -.contact-group-actions .fa-times-circle { color: #D00000;} -.contact-group-actions .fa-plus-circle { color: #008000;} +.contact-group-actions .fa-times-circle { + color: #d00000; +} +.contact-group-actions .fa-plus-circle { + color: #008000; +} #group-edit-wrapper { - margin-top: 14px; - display: none; + margin-top: 14px; + display: none; } #group-edit-header { - display: block; + display: block; } #group-update-wrapper .contact-photo-overlay { - display: none; + display: none; } #group-update-wrapper .viewcontact_wrapper .contact-group-actions { - height: 100%; - margin-top: -10px; - display: flex; + height: 100%; + margin-top: -10px; + display: flex; } #group-update-wrapper .viewcontact_wrapper .contact-group-link { - opacity: 0.8; - font-size: 20px; - line-height: 50px; + opacity: 0.8; + font-size: 20px; + line-height: 50px; } #group-update-wrapper .viewcontact_wrapper .contact-action-link:hover { - opacity: 1; + opacity: 1; } #group-update-wrapper .shortmode { - height: 53px; - overflow: hidden; + height: 53px; + overflow: hidden; } #group-update-wrapper .shortmode .contact-photo { - height: 32px; - width: 32px; + height: 32px; + width: 32px; } #group-update-wrapper .shortmode .media { - overflow: hidden; + overflow: hidden; } #group-update-wrapper .shortmode .contact-entry-desc { - font-size: 12px !important; + font-size: 12px !important; } #group-update-wrapper .shortmode .contact-entry-desc h4.media-heading { - margin: 0; + margin: 0; } #group-update-wrapper .shortmode .contact-entry-desc h4.media-heading a { - font-size: 13px !important; - white-space: nowrap; + font-size: 13px !important; + white-space: nowrap; } #group-update-wrapper .shortmode .contact-entry-desc .contact-entry-rel, #group-update-wrapper .shortmode .contact-entry-desc .contact-entry-network { - display: none; + display: none; } /* private mail */ .message-content-wrapper > li { -/* we need this overwriting because we have no template file + /* we need this overwriting because we have no template file for the general mail page /message */ - list-style-type: none; + list-style-type: none; } .mail-thread { - max-height: calc(100vh - 200px); + max-height: calc(100vh - 200px); } #mail-conversation { - overflow-y: auto; - max-height: calc(100vh - 400px); - max-height: auto; - margin-bottom: 0px; - padding: 0 15px; + overflow-y: auto; + max-height: calc(100vh - 400px); + max-height: auto; + margin-bottom: 0px; + padding: 0 15px; } .mail-conv-wrapper .media .contact-photo-wrapper img { - height: 48px; - width: 48px; + height: 48px; + width: 48px; } .mail-thread #prvmail-to-label, .mail-thread #prvmail-subject-label { - display: none; + display: none; } .mail-thread #prvmail-message-label > label { - display:none; + display: none; } .mail-thread #prvmail-message-label textarea { - max-height: 120px; + max-height: 120px; } .mail-conv-wrapper { - padding: 15px 0; - border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp); + padding: 15px 0; + border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp); } #message-sidebar { - height: calc(100vh - 150px); + height: calc(100vh - 150px); } #message-preview { - height: calc(100% - 20px); + height: calc(100% - 20px); } #message-preview ul { - margin: 0px; + margin: 0px; } #message-preview .media-list li { - padding: 0px 10px; - border: none; + padding: 0px 10px; + border: none; } #message-preview .media-list li:hover { - border-left: none !important; + border-left: none !important; } #message-preview .media-list li a { - color: $link_color; + color: $link_color; } .mail-list-outside-wrapper { - padding: 5px 0; - border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp); + padding: 5px 0; + border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp); } .mail-list-outside-wrapper .contact-photo-wrapper img { - height: 48px; - width: 48px; + height: 48px; + width: 48px; } #prvmail-end { - clear:both; + clear: both; } #modal #prvmail-text-edit-bb .bb-img { - display: none; + display: none; } /* photos */ #photo-album-edit-name-label { - width: 100%; + width: 100%; } .photo-album-edit-name { - width: 60%; + width: 60%; } .photo-album-actions { - margin-bottom: 10px; + margin-bottom: 10px; } .photo-album-actions .photos-order-link { - float: right; + float: right; } /* Events page */ .fc .fc-month-view .fc-content .fc-title .item-desc:hover { - color: $link_hover_color; + color: $link_hover_color; } .fc .fc-list-item-title a { - color: $link_color; + color: $link_color; } .fc .fc-list-item-title a[href]:hover { - color: $link_hover_color; - text-decoration: none; + color: $link_hover_color; + text-decoration: none; } .event-wrapper .event-owner { - margin-bottom: 15px; + margin-bottom: 15px; } .event-wrapper .event-owner img { - display: block; + display: block; } .event-owner img { - margin-right: 5px; - height: 48px; - width: 48; - border-radius: 3px; + margin-right: 5px; + height: 48px; + width: 48; + border-radius: 3px; } .event-wrapper .vevent { - margin-left: 0; - margin-right: 0; - box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, .1) inset; + margin-left: 0; + margin-right: 0; + box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, 0.1) inset; } .event-wrapper .event-buttons { - margin-top: 15px; + margin-top: 15px; } #event-form-wrapper { - padding-top: 5px; + padding-top: 5px; } #event-edit-form-wrapper { - padding-top: 15px; + padding-top: 15px; } #event-nav a { - color: $font_color_darker; + color: $font_color_darker; } #event-edit-form-wrapper #event-edit-time { - padding: 10px 0; + padding: 10px 0; } .event-buttons .plink-event-link { - margin-left: 20px; + margin-left: 20px; } .vevent .event-summary { - font-size: 16px; + font-size: 16px; } .vevent .event-description { - padding: 10px 0; + padding: 10px 0; } .vevent .event-location .location { - font-size: inherit; - color: inherit; + font-size: inherit; + color: inherit; } .modal-body .vevent .event-summary { - display: none; + display: none; } #event-preview .vevent .event-summary { - display: block; + display: block; } /* Event Cards */ -.event-card-details, .event-card-header { - width: 100%; +.event-card-details, +.event-card-header { + width: 100%; } -.event-card-header, .event-card-left-date { - float: left; +.event-card-header, +.event-card-left-date { + float: left; } .vevent .event-card-header { - display: table; + display: table; } .event-card-left-date { - width: 60px; /* Das muss wahrscheinlich unterschiedlich sein zwischen calendar und stream */ + width: 60px; /* Das muss wahrscheinlich unterschiedlich sein zwischen calendar und stream */ } .event-card .event-date-wrapper > span { - display: block; - overflow: hidden; - text-align: center; - white-space: nowrap; + display: block; + overflow: hidden; + text-align: center; + white-space: nowrap; } .event-card .event-date-wrapper .event-card-short-month { - font-size: 13px; - text-transform: uppercase; + font-size: 13px; + text-transform: uppercase; } .event-card .event-date-wrapper.medium .event-card-short-date { - font-size: 24px; - line-height: 28px; - margin-top: 2px; + font-size: 24px; + line-height: 28px; + margin-top: 2px; } .event-card .event-card-content { - width: 100%; - padding: 0 5px 0 15px; - box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, .1) inset; - color: $font_color; - position: relative; + width: 100%; + padding: 0 5px 0 15px; + box-shadow: 1.5px 0 0 0 rgba(0, 0, 0, 0.1) inset; + color: $font_color; + position: relative; } .event-card .event-card-content .event-map-btn { - position: absolute; - right: 0; - top:0; - line-height: 15px; + position: absolute; + right: 0; + top: 0; + line-height: 15px; } .event-card .event-card-title { - font-size: 14px; - color: $font_color_darker; - line-height: 15px; - font-weight: bold; - margin: 0; + font-size: 14px; + color: $font_color_darker; + line-height: 15px; + font-weight: bold; + margin: 0; } .event-card .event-card-location { - margin-top: 10px; - font-size: 13px; + margin-top: 10px; + font-size: 13px; } .event-card .event-card-location br { - content: " "; + content: " "; } .event-card .event-card-location br::after { - content: " "; + content: " "; } .event-card-profile-name a { - color: $link_color; + color: $link_color; } .event-card-profile-name a:hover { - color: $link_hover_color; + color: $link_hover_color; } .event-card .event-card-content .event-location-map { - position: absolute; - left: -9999px; - top: -9999px; + position: absolute; + left: -9999px; + top: -9999px; } -.event-card .event-card-content .event-location-map .map{ - margin-top: 10px; +.event-card .event-card-content .event-location-map .map { + margin-top: 10px; } .event-card .description { - margin-top: 10px; - box-shadow: 0 1.5px 0 0 rgba(0, 0, 0, .1) inset; + margin-top: 10px; + box-shadow: 0 1.5px 0 0 rgba(0, 0, 0, 0.1) inset; } /* Photos Pages */ #photo-photo { - position: relative; + position: relative; } -.photo-next-link, .photo-prev-link { - height: 64px; - margin-top: -32px; - opacity: 0; - position: absolute; - top: 50%; - transform: translateZ(0); - transition: opacity .2s; - width: 100px; - z-index: 11; - font-size: 64px; - color: #fff; - text-shadow: - -1px -1px 0 #000, - 1px -1px 0 #000, - -1px 1px 0 #000, - 1px 1px 0 #000; +.photo-next-link, +.photo-prev-link { + height: 64px; + margin-top: -32px; + opacity: 0; + position: absolute; + top: 50%; + transform: translateZ(0); + transition: opacity 0.2s; + width: 100px; + z-index: 11; + font-size: 64px; + color: #fff; + text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; } -.photo-next-link > i, .photo-prev-link > i { - vertical-align: super; +.photo-next-link > i, +.photo-prev-link > i { + vertical-align: super; } .photo-next-link > i { - float: right; + float: right; } .photo-prev-link { - left: 20px; + left: 20px; } .photo-next-link { - right: 20px; + right: 20px; } #photo-photo:hover .photo-next-link, #photo-photo:hover .photo-prev-link { - opacity: 0.4; + opacity: 0.4; } #photo-photo .photo-next-link:hover, #photo-photo .photo-prev-link:hover { - opacity: 1; - color: #fff; + opacity: 1; + color: #fff; } .photo-comment-wrapper .comment { - position: relative; + position: relative; } .photo-comment-wrapper .wall-item-content { - color: $font_color_darker; - font-size: 13px; + color: $font_color_darker; + font-size: 13px; } .photo-comment-wrapper .comment-wwedit-wrapper, .photo-comment-wrapper .wall-item-outside-wrapper.media:first-child { - margin-top: 15px; + margin-top: 15px; } /* Profiles Page */ .profile-listing-table { - display: table; - width: 100%; + display: table; + width: 100%; } .profile-listing-row { - display: table-row; + display: table-row; } .profile-listing-cell { - display: table-cell; + display: table-cell; } .profile-listing-photo { - width: 48px; - height: 48px; - margin: 10px 0px; + width: 48px; + height: 48px; + margin: 10px 0px; } #profile-listing-new-link-wrapper { - margin-bottom: 20px; + margin-bottom: 20px; } #profile-photo-upload-section { - display: none; - padding: 10px; + display: none; + padding: 10px; } #profile-photo-upload-close { - font-size: 14px; + font-size: 14px; } /* Settings */ .section-subtitle-wrapper { - padding: 1px 10px; + padding: 1px 10px; } -details.profile-jot-net[open] summary:before, .panel .section-subtitle-wrapper a.accordion-toggle:before { - font-family: ForkAwesome; - content: "\f0d7"; - padding-right: 5px; +details.profile-jot-net[open] summary:before, +.panel .section-subtitle-wrapper a.accordion-toggle:before { + font-family: ForkAwesome; + content: "\f0d7"; + padding-right: 5px; } -details.profile-jot-net summary:before, .panel .section-subtitle-wrapper a.accordion-toggle.collapsed:before { - font-family: ForkAwesome; - content: "\f0da"; +details.profile-jot-net summary:before, +.panel .section-subtitle-wrapper a.accordion-toggle.collapsed:before { + font-family: ForkAwesome; + content: "\f0da"; } details.profile-jot-net summary:before { - padding-right: 5px; - padding-left: 3px; + padding-right: 5px; + padding-left: 3px; } details.profile-jot-net[open] summary:before { - padding-right: 5px; - padding-left: 0px; + padding-right: 5px; + padding-left: 0px; } #settings-nick-wrapper { - margin-bottom: 20px; + margin-bottom: 20px; } .group { - margin-left: 20px; + margin-left: 20px; } /* Emulates Bootstrap display */ .settings-block { - margin: 0 0 5px; - background-color: rgba(255, 255, 255, $contentbg_transp); - border-radius: 4px; - padding: 10px 15px; - box-shadow: 0 0 3px #dadada; - -webkit-box-shadow: 0 0 3px #dadada; - -moz-box-shadow: 0 0 3px #dadada; + margin: 0 0 5px; + background-color: rgba(255, 255, 255, $contentbg_transp); + border-radius: 4px; + padding: 10px 15px; + box-shadow: 0 0 3px #dadada; + -webkit-box-shadow: 0 0 3px #dadada; + -moz-box-shadow: 0 0 3px #dadada; } -.settings-block.fakelink, .settings-block > .fakelink { - padding: 10px 25px; - display: block; +.settings-block.fakelink, +.settings-block > .fakelink { + padding: 10px 25px; + display: block; } .settings-block > .fakelink { - margin: -10px -15px 10px -15px; - border-radius: 4px 4px 0 0; + margin: -10px -15px 10px -15px; + border-radius: 4px 4px 0 0; } -.settings-block.fakelink:hover, .settings-block > .fakelink:hover { - color: $link_hover_color; +.settings-block.fakelink:hover, +.settings-block > .fakelink:hover { + color: $link_hover_color; } -.settings-block.fakelink > h3, .settings-block > .fakelink > h3 { - margin: 0; - padding: 0; - color: $link_color; - font-size: 18px; +.settings-block.fakelink > h3, +.settings-block > .fakelink > h3 { + margin: 0; + padding: 0; + color: $link_color; + font-size: 18px; } .section-subtitle-wrapper > h2 { @@ -2811,107 +2869,114 @@ details.profile-jot-net[open] summary:before { } .fakelink > h3:before { - padding-right: 10px; + padding-right: 10px; } .widget.fakelink > h3:before, .settings-block.fakelink > h3:before { - font-family: ForkAwesome; - content: "\f0da"; /* Right Plain Pointer */ + font-family: ForkAwesome; + content: "\f0da"; /* Right Plain Pointer */ } .widget > .fakelink > h3:before, #sidebar-group-header > .fakelink > h3:before, .settings-block > .fakelink > h3:before { - font-family: ForkAwesome; - content: "\f0d7"; /* Bottom Plain Pointer */ + font-family: ForkAwesome; + content: "\f0d7"; /* Bottom Plain Pointer */ } h3.connector { - line-height: 40px; + line-height: 40px; } /* Intro Notifications */ ul.notif-network-list { - margin-left: -15px; - margin-right: -15px; + margin-left: -15px; + margin-right: -15px; } ul.notif-network-list > li { - padding-left: 15px; - padding-right: 15px; + padding-left: 15px; + padding-right: 15px; } .intro-wrapper.media { - overflow: visible; - word-wrap: break-word; - margin-top: 0; + overflow: visible; + word-wrap: break-word; + margin-top: 0; } .intro-photo-wrapper img.intro-photo { - height:80px; - width: 80px; - border-radius: 4px; + height: 80px; + width: 80px; + border-radius: 4px; } .intro-actions { - display: flex; + display: flex; } .intro-enty-name h4 { - font-size: 15px !important; + font-size: 15px !important; } .intro-wrapper button.intro-action-link { - opacity: 0.1; - transition: all 0.25s ease-in-out; + opacity: 0.1; + transition: all 0.25s ease-in-out; } .intro-wrapper button.intro-action-link, .intro-wrapper button.intro-action-link:hover { - padding-right: 5px; - padding-left: 5px; - color: $font_color_darker; + padding-right: 5px; + padding-left: 5px; + color: $font_color_darker; } ul li:hover .intro-wrapper button.intro-action-link { - opacity: 0.8; - transition: all 0.25s ease-in-out; + opacity: 0.8; + transition: all 0.25s ease-in-out; } ul li:hover .intro-wrapper button.intro-action-link:hover { - opacity: 1; + opacity: 1; } .intro-action-buttons { - margin-top: 15px; - max-height: 0px; - overflow: hidden; - transition: max-height 0.1s ease-out; + margin-top: 15px; + max-height: 0px; + overflow: hidden; + transition: max-height 0.1s ease-out; } ul.notif-network-list > li:hover .intro-action-buttons { - max-height: 30px; - transition: max-height 0.1s ease-in; + max-height: 30px; + transition: max-height 0.1s ease-in; } -.intro-desc-label, .intro-url-label, .intro-network-label, -.intro-location-label, .intro-keywords-label, -.intro-about-label, .intro-knowyou-label, .intro-madeby-label { - font-weight: bold; +.intro-desc-label, +.intro-url-label, +.intro-network-label, +.intro-location-label, +.intro-keywords-label, +.intro-about-label, +.intro-knowyou-label, +.intro-madeby-label { + font-weight: bold; } -.intro-contact-info.xs .intro-url-label, .intro-contact-info.xs .intro-network-label, +.intro-contact-info.xs .intro-url-label, +.intro-contact-info.xs .intro-network-label, .intro-contact-info.xs .intro-location-label, -.intro-contact-info.xs .intro-keywords-label, .intro-contact-info.xs .intro-about-label, +.intro-contact-info.xs .intro-keywords-label, +.intro-contact-info.xs .intro-about-label, .intro-contact-info.xs .intro-knowyou-label { - display: block; - margin-top: 5px + display: block; + margin-top: 5px; } /* Notifications Page */ ul.notif-network-list li.unseen { - background-color: #e3eff3; + background-color: #e3eff3; } .notif-item img.notif-image { - height: 48px; - width: 48px; - border-radius: 4px; + height: 48px; + width: 48px; + border-radius: 4px; } .notif-item .notif-desc-wrapper { - height: 48px; + height: 48px; } .notif-item .notif-desc-wrapper a { - height: 100%; - display: block; - color: $font_color_darker; - font-size: 13px; - font-weight: 600; + height: 100%; + display: block; + color: $font_color_darker; + font-size: 13px; + font-weight: 600; } /* Search Page */ @@ -2921,37 +2986,37 @@ content types we can't apply the generic-page-wrapper class. So we apply the css of the generic-page-wrapper class to the ul element with some little modifications to emulate a standard page template */ .search-content-wrapper > ul.viewcontact_wrapper { - min-height: calc(100vh - 150px); - padding-top: 15px; - padding-bottom: 20px; - margin: 0; - margin-bottom: 20px; - border: none; - background-color: rgba(255,255,255,$contentbg_transp); - border-radius: 4px; - position: relative; - color: $font_color_darker; - box-shadow: 0 0 3px #dadada; - -webkit-box-shadow: 0 0 3px #dadada; - -moz-box-shadow: 0 0 3px #dadada; + min-height: calc(100vh - 150px); + padding-top: 15px; + padding-bottom: 20px; + margin: 0; + margin-bottom: 20px; + border: none; + background-color: rgba(255, 255, 255, $contentbg_transp); + border-radius: 4px; + position: relative; + color: $font_color_darker; + box-shadow: 0 0 3px #dadada; + -webkit-box-shadow: 0 0 3px #dadada; + -moz-box-shadow: 0 0 3px #dadada; } /* Help Page */ section.help-content-wrapper h1 { - padding-bottom: 0.3em; - font-size: 1.8em; - border-bottom: 1px solid #ddd; + padding-bottom: 0.3em; + font-size: 1.8em; + border-bottom: 1px solid #ddd; } section.help-content-wrapper h2 { - padding-bottom: 0.3em; - font-size: 1.5em; - border-bottom: 1px solid #ddd; + padding-bottom: 0.3em; + font-size: 1.5em; + border-bottom: 1px solid #ddd; } section.help-content-wrapper h3 { - font-size: 1.2em; + font-size: 1.2em; } section.help-content-wrapper h4 { - font-size: 1em; + font-size: 1em; } section.help-content-wrapper h1, section.help-content-wrapper h2, @@ -2959,88 +3024,89 @@ section.help-content-wrapper h3, section.help-content-wrapper h4, section.help-content-wrapper h5, section.help-content-wrapper h6 { - margin-top: 24px; - margin-bottom: 16px; - font-weight: 600; - line-height: 1.25; + margin-top: 24px; + margin-bottom: 16px; + font-weight: 600; + line-height: 1.25; } section.help-content-wrapper p { - margin: 0.4em 0; + margin: 0.4em 0; } section.help-content-wrapper p, section.help-content-wrapper a, section.help-content-wrapper li { - line-height: 1.6; - font-size: 0.96em; + line-height: 1.6; + font-size: 0.96em; } /*Admin Page*/ #adminpage #frio_background_image .image-select { - display: none; + display: none; } #adminpage #frio_background_image.input-group { - display: block; + display: block; } #admin-summary-wrapper { - padding-top: 10px; + padding-top: 10px; } -#adminpage ul#addonslist, li.addon { - list-style: none; +#adminpage ul#addonslist, +li.addon { + list-style: none; } #adminpage li .icon { - display: inline-block; - vertical-align: text-top; - position: relative; - padding-left: 5px; + display: inline-block; + vertical-align: text-top; + position: relative; + padding-left: 5px; } #adminpage li .icon:before { - content: ""; - display: inline-block; - position: absolute; - width: 17px; - height: 17px; - left: 0; - margin-left: -20px; - margin-top: 2px; - border: 1px solid #cccccc; - border-radius: 3px; + content: ""; + display: inline-block; + position: absolute; + width: 17px; + height: 17px; + left: 0; + margin-left: -20px; + margin-top: 2px; + border: 1px solid #cccccc; + border-radius: 3px; background-color: $background_color; - -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out; - -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out; - transition: border 0.15s ease-in-out, color 0.15s ease-in-out; + -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out; + -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out; + transition: border 0.15s ease-in-out, color 0.15s ease-in-out; } #adminpage li .icon.on:after { - font-family: "ForkAwesome"; - content: "\f00c"; - display: inline-block; - position: absolute; - width: 16px; - height: 16px; - left: 0; - top: 0; - margin-left: -20px; - margin-top: 2px; - padding-left: 3px; - padding-top: 1px; - font-size: 11px; - color: $link_color; + font-family: "ForkAwesome"; + content: "\f00c"; + display: inline-block; + position: absolute; + width: 16px; + height: 16px; + left: 0; + top: 0; + margin-left: -20px; + margin-top: 2px; + padding-left: 3px; + padding-top: 1px; + font-size: 11px; + color: $link_color; } #adminpage .addon .desc { - padding-left: 10px; + padding-left: 10px; } #admin-users #users tr.blocked { - background-color: #f8efc0; + background-color: #f8efc0; } .adminpage .table-hover > tbody > tr:hover + tr.details { - background-color: #f5f5f5; + background-color: #f5f5f5; } .offset-anchor::before { - display: block; - content: " "; - margin-top: -100px; - height: 100px; - visibility: hidden; - pointer-events: none; + display: block; + content: " "; + margin-top: -100px; + height: 100px; + visibility: hidden; + pointer-events: none; } #relocate-form { @@ -3049,53 +3115,56 @@ section.help-content-wrapper li { /* Manage Page */ #identity-selector-wrapper { - width: auto; - height: auto; - margin-top: 20px; + width: auto; + height: auto; + margin-top: 20px; } #identity-selector-wrapper .identity-match-photo { - width: auto; - float: none; + width: auto; + float: none; } #identity-selector-wrapper .identity-match-photo button { - position: relative; + position: relative; } #identity-selector-wrapper .identity-match-photo .badge { - position: absolute; - top: -8px; - right: -8px; + position: absolute; + top: -8px; + right: -8px; } #identity-selector-wrapper .identity-match-name { - text-align: center; + text-align: center; } #identity-selector-wrapper .identity-match-details { - width: auto; - float: none; + width: auto; + float: none; } /* Register Page */ -#register-openid-wrapper, #register-name-wrapper, #register-invite-wrapper, #profile-publish-wrapper { - margin-top: 20px; +#register-openid-wrapper, +#register-name-wrapper, +#register-invite-wrapper, +#profile-publish-wrapper { + margin-top: 20px; } -#register-openid-end, #register-nickname-end -{ - margin-top: 40px; +#register-openid-end, +#register-nickname-end { + margin-top: 40px; } /* * Overwriting for transparency and other colors */ -main .nav-tabs>li.active>a, -main .nav-tabs>li.active>a:focus, -main .nav-tabs>li.active>a:hover { - background-color: rgba(255,255,255,$contentbg_transp); +main .nav-tabs > li.active > a, +main .nav-tabs > li.active > a:focus, +main .nav-tabs > li.active > a:hover { + background-color: rgba(255, 255, 255, $contentbg_transp); } /* * Modal */ .modal hr { - border-color: #eee; + border-color: #eee; } @media (min-width: 768px) { @@ -3110,58 +3179,57 @@ main .nav-tabs>li.active>a:hover { /* textcomplete for contact filtering*/ #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list { - position: relative !important; - top: inherit !important; - bottom: inherit !important; - left: inherit !important; - padding: 0; - margin-left: -15px; - margin-right: -15px; - background-color: transparent; - box-shadow: none; - border: none; + position: relative !important; + top: inherit !important; + bottom: inherit !important; + left: inherit !important; + padding: 0; + margin-left: -15px; + margin-right: -15px; + background-color: transparent; + box-shadow: none; + border: none; } #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li { - padding-left: 15px; - border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp); + padding-left: 15px; + border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp); } #contact-list ul.dropdown-menu.textcomplete-dropdown.media-list > li:first-child { - display: none; + display: none; } -#contact-list ul.dropdown-menu.textcomplete-dropdown.media-list -.textcomplete-item > a { - padding: 0 !important; - border-left: none; - background-color: transparent !important; +#contact-list ul.dropdown-menu.textcomplete-dropdown.media-list .textcomplete-item > a { + padding: 0 !important; + border-left: none; + background-color: transparent !important; } /* this is a little hack for texcomplete contact filter There are for some reasons empty tags. I don't know why */ .textcomplete-item .contact-wrapper a { - padding: 0; + padding: 0; } /* hovercard fix */ body .tread-wrapper .hovercard a, body .tread-wrapper .hovercard a:hover { - color: $link_color; + color: $link_color; } body .tread-wrapper .hovercard:hover .hover-card-content a { - color: $link_color !important; + color: $link_color !important; } /* Pagination improvements */ .pagination { - text-align: center; - display: block; + text-align: center; + display: block; } .pagination > li > a, .pagination > li > span { - color: $link_color; - float: none; + color: $link_color; + float: none; } -.pagination>li>a:hover, -.pagination>li>span:hover { - color: $link_hover_color; +.pagination > li > a:hover, +.pagination > li > span:hover { + color: $link_hover_color; } .pagination > .active > a, .pagination > .active > a:focus, @@ -3169,34 +3237,34 @@ body .tread-wrapper .hovercard:hover .hover-card-content a { .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover { - background-color: $link_color; - border-color: $link_color; - border-radius: 3px; + background-color: $link_color; + border-color: $link_color; + border-radius: 3px; } .pagination li.pager_n a { - margin-left: 3px; - border-radius: 3px; + margin-left: 3px; + border-radius: 3px; } .pagination .pager_prev a { - margin-left: -5px; - margin-right: 4px; - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; + margin-left: -5px; + margin-right: 4px; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; } .pagination .pager_next a { - margin-left: 4px; - margin-right: -5px; - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; + margin-left: 4px; + margin-right: -5px; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; } .pager .next > a, .pager .previous > a { - float: none; - border-radius: 3px; + float: none; + border-radius: 3px; } .pagination .disabled > a, .pager .disabled > a { - display: none; + display: none; } .pagination li > a, @@ -3209,115 +3277,119 @@ body .tread-wrapper .hovercard:hover .hover-card-content a { * elsewhere (e.g. new templates) */ section .profile-match-wrapper { - float: left; + float: left; } /** * Login page */ #login-submit-wrapper { - float: right; + float: right; +} +#lost-password-link { + flex-grow: 2; } -#lost-password-link { flex-grow: 2; } #login-lost-password-link { - margin-bottom: 10px; - float: right; + margin-bottom: 10px; + float: right; } #div_id_remember { - float: left; + float: left; } #id_password_wrapper { - margin-bottom: unset; + margin-bottom: unset; } #login_openid { - clear: both; + clear: both; } #register-link { - color: white; - background: #8ad0a1; - width: 100%; + color: white; + background: #8ad0a1; + width: 100%; } #login-end { - clear: both; + clear: both; } .mod-home.is-not-singleuser, .mod-login { - background-color: $login_bg_color; - background-image: linear-gradient(to right, rgba(0,0,0, 0.7) , rgba(0,0,0, 0.4)), url($login_bg_image); - background-size: cover; - background-attachment: fixed; - background-position: center; - padding-top: 0; + background-color: $login_bg_color; + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4)), url($login_bg_image); + background-size: cover; + background-attachment: fixed; + background-position: center; + padding-top: 0; } .mod-home.is-not-singleuser nav.navbar, -.mod-login nav.navbar { background-color: transparent } +.mod-login nav.navbar { + background-color: transparent; +} .mod-home.is-not-singleuser #topbar-second, .mod-login #topbar-second { - background-color: transparent; - box-shadow: unset; - border: 0 + background-color: transparent; + box-shadow: unset; + border: 0; } .mod-home.is-not-singleuser .login-content, .mod-login .login-content { - color: #eee; - margin-top: 2.5%; + color: #eee; + margin-top: 2.5%; } .mod-home.is-not-singleuser .login-form > #login-extra-links { - margin-top: 4em; + margin-top: 4em; } .mod-home.is-not-singleuser .login-form > #login-form label, .mod-login #content #login-form label { - color: #eee; + color: #eee; } .mod-home.is-not-singleuser .login-panel-content, .mod-login .login-panel-content { - background-color: rgba(255,255,255,.85); + background-color: rgba(255, 255, 255, 0.85); } .qq-upload-button { - background: $nav_bg !important; - color: $btn_primary_color !important; - float: none; - border: none; - -webkit-box-shadow: none; - box-shadow: none; - -moz-box-shadow: none; - background-image: none; - text-shadow: none; - border-radius: 3px; - margin-bottom: 0; - font-size: 14px; - font-weight: 600; - padding: 8px 16px; - color: inherit; - width: 100% !important; + background: $nav_bg !important; + color: $btn_primary_color !important; + float: none; + border: none; + -webkit-box-shadow: none; + box-shadow: none; + -moz-box-shadow: none; + background-image: none; + text-shadow: none; + border-radius: 3px; + margin-bottom: 0; + font-size: 14px; + font-weight: 600; + padding: 8px 16px; + color: inherit; + width: 100% !important; } .qq-upload-drop-area { - background: white !important; - float: none; - border: none; - -webkit-box-shadow: none; - box-shadow: none; - -moz-box-shadow: none; - background-image: none; - text-shadow: none; - border-radius: 3px; - margin-bottom: 0; - font-size: 14px; - font-weight: 600; - padding: 8px 16px; - color: inherit; - width: 100% !important; - display: block !important; - position: relative !important; - border: black 1px dashed !important; - margin-bottom: 5px !important; - margin-top: 15px !important; + background: white !important; + float: none; + border: none; + -webkit-box-shadow: none; + box-shadow: none; + -moz-box-shadow: none; + background-image: none; + text-shadow: none; + border-radius: 3px; + margin-bottom: 0; + font-size: 14px; + font-weight: 600; + padding: 8px 16px; + color: inherit; + width: 100% !important; + display: block !important; + position: relative !important; + border: black 1px dashed !important; + margin-bottom: 5px !important; + margin-top: 15px !important; } /** @@ -3335,7 +3407,6 @@ section .profile-match-wrapper { #fc-title { margin: 0; padding-left: 20px; - } #fc-header-right { margin-top: -4px; @@ -3348,7 +3419,7 @@ section .profile-match-wrapper { } #event-calendar-views { padding: 6px 9px; - font-size: 14px + font-size: 14px; } .fc .fc-toolbar { display: none; @@ -3392,8 +3463,8 @@ section .profile-match-wrapper { font-size: 12px; } .fc .fc-event { - background-color: #E3F2FD; - border: 1px solid #BBDEFB; + background-color: #e3f2fd; + border: 1px solid #bbdefb; color: $font_color_darker; } .fc .fc-month-view .fc-time, @@ -3433,53 +3504,53 @@ section .profile-match-wrapper { /* Medium devices (desktops, 992px and up) */ @media (min-width: 992px) { - .mod-home.is-not-singleuser #content, - .mod-login #content { - margin-top: 100px!important; - } + .mod-home.is-not-singleuser #content, + .mod-login #content { + margin-top: 100px !important; + } - .mod-home.is-not-singleuser .login-form > #login-form, - .mod-home.is-not-singleuser .login-form > #login-extra-links, - .mod-login #content #login-form { - background-color: #fff; - padding: 1em; - position: relative; - } - .mod-home.is-not-singleuser .login-form > #login-extra-links { - margin-top: unset; - background-color: white; - } + .mod-home.is-not-singleuser .login-form > #login-form, + .mod-home.is-not-singleuser .login-form > #login-extra-links, + .mod-login #content #login-form { + background-color: #fff; + padding: 1em; + position: relative; + } + .mod-home.is-not-singleuser .login-form > #login-extra-links { + margin-top: unset; + background-color: white; + } - .mod-home.is-not-singleuser .login-form > #login-form label, - .mod-login #content #login-form label { - color: #444; - } + .mod-home.is-not-singleuser .login-form > #login-form label, + .mod-login #content #login-form label { + color: #444; + } - .mod-home.is-not-singleuser .login-form::before, - .mod-login #content #login-form::before { - display: block; - position: absolute; - content: " "; - background-color: rgba(255,255,255,0.1); - width:90%; - height: 110%; - top: -5%; - left: 5%; - z-index: -1; - } + .mod-home.is-not-singleuser .login-form::before, + .mod-login #content #login-form::before { + display: block; + position: absolute; + content: " "; + background-color: rgba(255, 255, 255, 0.1); + width: 90%; + height: 110%; + top: -5%; + left: 5%; + z-index: -1; + } - .mod-home.is-not-singleuser .login-form::after, - .mod-login #content #login-form::after { - display: block; - position: absolute; - content: " "; - background-color: rgba(255,255,255,0.2); - width:80%; - height: 120%; - top: -10%; - left: 10%; - z-index: -1; - } + .mod-home.is-not-singleuser .login-form::after, + .mod-login #content #login-form::after { + display: block; + position: absolute; + content: " "; + background-color: rgba(255, 255, 255, 0.2); + width: 80%; + height: 120%; + top: -10%; + left: 10%; + z-index: -1; + } } /* Mobile display */ @@ -3487,11 +3558,11 @@ section .profile-match-wrapper { body { padding-top: 95px; } - body.minimal { - padding: 15px; - } + body.minimal { + padding: 15px; + } - #friendica-logo-mask { + #friendica-logo-mask { display: none; } @@ -3509,9 +3580,9 @@ section .profile-match-wrapper { padding: 10px; } - .toplevel_item > .wall-item-container { - padding: 0; - } + .toplevel_item > .wall-item-container { + padding: 0; + } .wall-spacer { height: 0px; @@ -3525,7 +3596,28 @@ section .profile-match-wrapper { margin-top: 0; } - .generic-page-wrapper, .videos-content-wrapper, .suggest-content-wrapper, .help-content-wrapper, .match-content-wrapper, .dirfind-content-wrapper, .directory-content-wrapper, .delegation-content-wrapper, .notes-content-wrapper, .message-content-wrapper, .apps-content-wrapper, #adminpage, .delegate-content-wrapper, .uexport-content-wrapper, .dfrn_request-content-wrapper, .friendica-content-wrapper, .credits-content-wrapper, .nogroup-content-wrapper, .profperm-content-wrapper, .invite-content-wrapper, .tos-content-wrapper, .fsuggest-content-wrapper { + .generic-page-wrapper, + .videos-content-wrapper, + .suggest-content-wrapper, + .help-content-wrapper, + .match-content-wrapper, + .dirfind-content-wrapper, + .directory-content-wrapper, + .delegation-content-wrapper, + .notes-content-wrapper, + .message-content-wrapper, + .apps-content-wrapper, + #adminpage, + .delegate-content-wrapper, + .uexport-content-wrapper, + .dfrn_request-content-wrapper, + .friendica-content-wrapper, + .credits-content-wrapper, + .nogroup-content-wrapper, + .profperm-content-wrapper, + .invite-content-wrapper, + .tos-content-wrapper, + .fsuggest-content-wrapper { border-radius: 0; padding: 10px; } @@ -3534,7 +3626,54 @@ section .profile-match-wrapper { margin-right: 0; } - .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 { + .col-lg-1, + .col-lg-10, + .col-lg-11, + .col-lg-12, + .col-lg-2, + .col-lg-3, + .col-lg-4, + .col-lg-5, + .col-lg-6, + .col-lg-7, + .col-lg-8, + .col-lg-9, + .col-md-1, + .col-md-10, + .col-md-11, + .col-md-12, + .col-md-2, + .col-md-3, + .col-md-4, + .col-md-5, + .col-md-6, + .col-md-7, + .col-md-8, + .col-md-9, + .col-sm-1, + .col-sm-10, + .col-sm-11, + .col-sm-12, + .col-sm-2, + .col-sm-3, + .col-sm-4, + .col-sm-5, + .col-sm-6, + .col-sm-7, + .col-sm-8, + .col-sm-9, + .col-xs-1, + .col-xs-10, + .col-xs-11, + .col-xs-12, + .col-xs-2, + .col-xs-3, + .col-xs-4, + .col-xs-5, + .col-xs-6, + .col-xs-7, + .col-xs-8, + .col-xs-9 { padding-right: 0; } @@ -3553,11 +3692,11 @@ section .profile-match-wrapper { font-size: 16px; } - .wall-item-container.thread_level_3, - .wall-item-container.thread_level_4, - .wall-item-container.thread_level_5, - .wall-item-container.thread_level_6, - .wall-item-container.thread_level_7 { - margin-left: 5px; - } + .wall-item-container.thread_level_3, + .wall-item-container.thread_level_4, + .wall-item-container.thread_level_5, + .wall-item-container.thread_level_6, + .wall-item-container.thread_level_7 { + margin-left: 5px; + } } diff --git a/view/theme/frio/js/compose.js b/view/theme/frio/js/compose.js index cb7e2f73c2..327b75f302 100644 --- a/view/theme/frio/js/compose.js +++ b/view/theme/frio/js/compose.js @@ -1,51 +1,53 @@ // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPLv3-or-later -$(function() { +$(function () { // Jot attachment live preview. - let $textarea = $('textarea[name=body]'); + let $textarea = $("textarea[name=body]"); $textarea.linkPreview(); - $textarea.keyup(function(){ + $textarea.keyup(function () { var textlen = $(this).val().length; - $('#character-counter').text(textlen); + $("#character-counter").text(textlen); }); - $textarea.editor_autocomplete(baseurl + '/search/acl'); - $textarea.bbco_autocomplete('bbcode'); + $textarea.editor_autocomplete(baseurl + "/search/acl"); + $textarea.bbco_autocomplete("bbcode"); - let location_button = document.getElementById('profile-location'); - let location_input = document.getElementById('jot-location'); + let location_button = document.getElementById("profile-location"); + let location_input = document.getElementById("jot-location"); if (location_button && location_input) { updateLocationButtonDisplay(location_button, location_input); - location_input.addEventListener('change', function () { + location_input.addEventListener("change", function () { updateLocationButtonDisplay(location_button, location_input); }); - location_input.addEventListener('keyup', function () { + location_input.addEventListener("keyup", function () { updateLocationButtonDisplay(location_button, location_input); }); - location_button.addEventListener('click', function() { + location_button.addEventListener("click", function () { if (location_input.value) { - location_input.value = ''; + location_input.value = ""; updateLocationButtonDisplay(location_button, location_input); } else if ("geolocation" in navigator) { - navigator.geolocation.getCurrentPosition(function(position) { - location_input.value = position.coords.latitude + ', ' + position.coords.longitude; - updateLocationButtonDisplay(location_button, location_input); - }, function (error) { - location_button.disabled = true; - updateLocationButtonDisplay(location_button, location_input); - }); + navigator.geolocation.getCurrentPosition( + function (position) { + location_input.value = position.coords.latitude + ", " + position.coords.longitude; + updateLocationButtonDisplay(location_button, location_input); + }, + function (error) { + location_button.disabled = true; + updateLocationButtonDisplay(location_button, location_input); + }, + ); } }); } }); -function updateLocationButtonDisplay(location_button, location_input) -{ - location_button.classList.remove('btn-primary'); +function updateLocationButtonDisplay(location_button, location_input) { + location_button.classList.remove("btn-primary"); if (location_input.value) { location_button.disabled = false; - location_button.classList.add('btn-primary'); + location_button.classList.add("btn-primary"); location_button.title = location_button.dataset.titleClear; } else if (!"geolocation" in navigator) { location_button.disabled = true; diff --git a/view/theme/frio/js/event_edit.js b/view/theme/frio/js/event_edit.js index f7a9c4a760..d52c060221 100644 --- a/view/theme/frio/js/event_edit.js +++ b/view/theme/frio/js/event_edit.js @@ -1,39 +1,45 @@ // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPLv3-or-later -$(document).ready(function() { +$(document).ready(function () { // Go to the permissions tab if the checkbox is checked. - $('body').on("click", "#id_share", function() { - if ($('#id_share').is(':checked') && !( $('#id_share').attr("disabled"))) { - $('#acl-wrapper').show(); - $("a#event-perms-lnk").parent("li").show(); - toggleEventNav("a#event-perms-lnk"); - eventAclActive(); - } - else { - $('#acl-wrapper').hide(); - $("a#event-perms-lnk").parent("li").hide(); - } - }).trigger('change'); + $("body") + .on("click", "#id_share", function () { + if ($("#id_share").is(":checked") && !$("#id_share").attr("disabled")) { + $("#acl-wrapper").show(); + $("a#event-perms-lnk").parent("li").show(); + toggleEventNav("a#event-perms-lnk"); + eventAclActive(); + } else { + $("#acl-wrapper").hide(); + $("a#event-perms-lnk").parent("li").hide(); + } + }) + .trigger("change"); // Disable the finish time input if the user disable it. - $('body').on("change", "#id_nofinish", function() { - enableDisableFinishDate() - }).trigger('change'); + $("body") + .on("change", "#id_nofinish", function () { + enableDisableFinishDate(); + }) + .trigger("change"); // JS for the permission section. - $('#contact_allow, #contact_deny, #group_allow, #group_deny').change(function() { - var selstr; - $('#contact_allow option:selected, #contact_deny option:selected, #group_allow option:selected, #group_deny option:selected').each( function() { - selstr = $(this).html(); - $('#jot-public').hide(); - }); - if (selstr == null) { - $('#jot-public').show(); - } - - }).trigger('change'); + $("#contact_allow, #contact_deny, #group_allow, #group_deny") + .change(function () { + var selstr; + $( + "#contact_allow option:selected, #contact_deny option:selected, #group_allow option:selected, #group_deny option:selected", + ).each(function () { + selstr = $(this).html(); + $("#jot-public").hide(); + }); + if (selstr == null) { + $("#jot-public").show(); + } + }) + .trigger("change"); // Change the event nav menu.tabs on click. - $("body").on("click", "#event-nav > li > a", function(e){ + $("body").on("click", "#event-nav > li > a", function (e) { e.preventDefault(); toggleEventNav(this); }); @@ -46,7 +52,7 @@ $(document).ready(function() { // Clear some elements (e.g. the event-preview container) when // selecting a event nav link so it don't appear more than once. - $('body').on("click", "#event-nav a", function(e) { + $("body").on("click", "#event-nav a", function (e) { $("#event-preview").empty(); e.preventDefault(); }); @@ -55,14 +61,13 @@ $(document).ready(function() { // Load the html of the actual event and incect the output to the // event-edit section. function doEventPreview() { - $('#event-edit-preview').val(1); - $.post('events',$('#event-edit-form').serialize(), function(data) { + $("#event-edit-preview").val(1); + $.post("events", $("#event-edit-form").serialize(), function (data) { $("#event-preview").append(data); }); - $('#event-edit-preview').val(0); + $("#event-edit-preview").val(0); } - // The following functions show/hide the specific event-edit content // in dependence of the selected nav. function eventAclActive() { @@ -70,7 +75,6 @@ function eventAclActive() { $("#event-acl-wrapper").show(); } - function eventPreviewActive() { $("#event-acl-wrapper, #event-edit-wrapper, #event-desc-wrapper").hide(); $("#event-preview").show(); @@ -92,20 +96,16 @@ function eventDescActive() { } // Give the active "event-nav" list element the class "active". -function toggleEventNav (elm) { +function toggleEventNav(elm) { // Select all li of #event-nav and remove the active class. $(elm).closest("#event-nav").children("li").removeClass("active"); // Add the active class to the parent of the link which was selected. $(elm).parent("li").addClass("active"); } - - // Disable the input for the finish date if it is not available. function enableDisableFinishDate() { - if( $('#id_nofinish').is(':checked')) - $('#id_finish_text').prop("disabled", true); - else - $('#id_finish_text').prop("disabled", false); + if ($("#id_nofinish").is(":checked")) $("#id_finish_text").prop("disabled", true); + else $("#id_finish_text").prop("disabled", false); } // @license-end diff --git a/view/theme/frio/js/filebrowser.js b/view/theme/frio/js/filebrowser.js index eece784d64..944e079ec3 100644 --- a/view/theme/frio/js/filebrowser.js +++ b/view/theme/frio/js/filebrowser.js @@ -52,7 +52,6 @@ * }); **/ - /* * IMPORTANT * @@ -64,21 +63,20 @@ * */ - var FileBrowser = { - nickname : "", - type : "", + nickname: "", + type: "", event: "", folder: "", - id : null, + id: null, - init: function(nickname, type, hash) { + init: function (nickname, type, hash) { FileBrowser.nickname = nickname; FileBrowser.type = type; - FileBrowser.event = "fbrowser."+type; + FileBrowser.event = "fbrowser." + type; - if (hash!=="") { - var h = hash.replace("#",""); + if (hash !== "") { + var h = hash.replace("#", ""); var destination = h.split("-")[0]; FileBrowser.id = h.split("-")[1]; FileBrowser.event = FileBrowser.event + "." + destination; @@ -86,28 +84,34 @@ var FileBrowser = { // Get the comment textimput field var commentElm = document.getElementById("comment-edit-text-" + FileBrowser.id); } - }; + } - console.log("FileBrowser: " + nickname, type, FileBrowser.event, FileBrowser.id); + console.log("FileBrowser: " + nickname, type, FileBrowser.event, FileBrowser.id); FileBrowser.postLoad(); - $(".error .close").on("click", function(e) { + $(".error .close").on("click", function (e) { e.preventDefault(); $(".error").addClass("hidden"); }); // Click on album link - $(".fbrowser").on("click", ".folders a, .path a", function(e) { + $(".fbrowser").on("click", ".folders a, .path a", function (e) { e.preventDefault(); - var url = baseurl + "/fbrowser/" + FileBrowser.type + "/" + encodeURIComponent(this.dataset.folder) + "?mode=none&theme=frio"; + var url = + baseurl + + "/fbrowser/" + + FileBrowser.type + + "/" + + encodeURIComponent(this.dataset.folder) + + "?mode=none&theme=frio"; FileBrowser.folder = this.dataset.folder; FileBrowser.loadContent(url); }); //Embed on click - $(".fbrowser").on('click', ".photo-album-photo-link", function(e) { + $(".fbrowser").on("click", ".photo-album-photo-link", function (e) { e.preventDefault(); var embed = ""; @@ -123,36 +127,34 @@ var FileBrowser = { // Note: not the best solution but function commentOpenUI don't // work as expected (we need a way to wait until commentOpenUI would be finished). // As for now we insert pieces of this function here - if ((commentElm !== null) && (typeof commentElm !== "undefined")) { + if (commentElm !== null && typeof commentElm !== "undefined") { if (commentElm.value === "") { - $("#comment-edit-text-" + FileBrowser.id).addClass("comment-edit-text-full").removeClass("comment-edit-text-empty"); + $("#comment-edit-text-" + FileBrowser.id) + .addClass("comment-edit-text-full") + .removeClass("comment-edit-text-empty"); $("#comment-edit-submit-wrapper-" + FileBrowser.id).show(); - $("#comment-edit-text-" + FileBrowser.id).attr('tabindex','9'); - $("#comment-edit-submit-" + FileBrowser.id).attr('tabindex','10'); + $("#comment-edit-text-" + FileBrowser.id).attr("tabindex", "9"); + $("#comment-edit-submit-" + FileBrowser.id).attr("tabindex", "10"); } - } console.log(FileBrowser.event, this.dataset.filename, embed, FileBrowser.id); - $("body").trigger(FileBrowser.event, [ - this.dataset.filename, - embed, - FileBrowser.id, - this.dataset.img - ]); + $("body").trigger(FileBrowser.event, [this.dataset.filename, embed, FileBrowser.id, this.dataset.img]); // Close model - $('#modal').modal('hide'); + $("#modal").modal("hide"); // Update autosize for this textarea autosize.update($(".text-autosize")); }); // EventListener for switching between image and file mode - $(".fbrowser").on('click', ".fbswitcher .btn", function(e) { + $(".fbrowser").on("click", ".fbswitcher .btn", function (e) { e.preventDefault(); FileBrowser.type = this.getAttribute("data-mode"); - $(".fbrowser").removeClass().addClass("fbrowser " + FileBrowser.type); + $(".fbrowser") + .removeClass() + .addClass("fbrowser " + FileBrowser.type); url = baseurl + "/fbrowser/" + FileBrowser.type + "?mode=none&theme=frio"; FileBrowser.loadContent(url); @@ -160,67 +162,73 @@ var FileBrowser = { }, // Initialize the AjaxUpload for the upload buttons - uploadButtons: function() { + uploadButtons: function () { if ($("#upload-image").length) { //AjaxUpload for images - var image_uploader = new window.AjaxUpload( - 'upload-image', - { - action: 'wall_upload/' + FileBrowser.nickname + '?response=json&album=' + encodeURIComponent(FileBrowser.folder), - name: 'userfile', - responseType: 'json', - onSubmit: function(file, ext) { - $(".fbrowser-content").hide(); - $(".fbrowser .profile-rotator-wrapper").show(); - $(".error").addClass('hidden'); - }, - onComplete: function(file,response) { - if (response['error'] != undefined) { - $(".error span").html(response['error']); - $(".error").removeClass('hidden'); - $(".fbrowser .profile-rotator-wrapper").hide(); - $(".fbrowser-content").show(); - return; - } - - // load new content to fbrowser window - FileBrowser.loadContent(baseurl + '/fbrowser/' + FileBrowser.type + '/' + encodeURIComponent(FileBrowser.folder) + '?mode=none&theme=frio'); + var image_uploader = new window.AjaxUpload("upload-image", { + action: + "wall_upload/" + + FileBrowser.nickname + + "?response=json&album=" + + encodeURIComponent(FileBrowser.folder), + name: "userfile", + responseType: "json", + onSubmit: function (file, ext) { + $(".fbrowser-content").hide(); + $(".fbrowser .profile-rotator-wrapper").show(); + $(".error").addClass("hidden"); + }, + onComplete: function (file, response) { + if (response["error"] != undefined) { + $(".error span").html(response["error"]); + $(".error").removeClass("hidden"); + $(".fbrowser .profile-rotator-wrapper").hide(); + $(".fbrowser-content").show(); + return; } - } - ); + + // load new content to fbrowser window + FileBrowser.loadContent( + baseurl + + "/fbrowser/" + + FileBrowser.type + + "/" + + encodeURIComponent(FileBrowser.folder) + + "?mode=none&theme=frio", + ); + }, + }); } if ($("#upload-file").length) { //AjaxUpload for files - var file_uploader = new window.AjaxUpload( - 'upload-file', - { action: 'wall_attach/' + FileBrowser.nickname + '?response=json', - name: 'userfile', - onSubmit: function(file, ext) { - $(".fbrowser-content").hide(); - $(".fbrowser .profile-rotator-wrapper").show(); - $(".error").addClass('hidden'); - }, - onComplete: function(file,response) { - if (response['error']!= undefined) { - $(".error span").html(response['error']); - $(".error").removeClass('hidden'); - $('#profile-rotator').hide(); - $(".fbrowser-content").show(); - return; - } - - var url = baseurl + "/fbrowser/" + FileBrowser.type + "?mode=none&theme=frio"; - // Load new content to fbrowser window - FileBrowser.loadContent(url); + var file_uploader = new window.AjaxUpload("upload-file", { + action: "wall_attach/" + FileBrowser.nickname + "?response=json", + name: "userfile", + onSubmit: function (file, ext) { + $(".fbrowser-content").hide(); + $(".fbrowser .profile-rotator-wrapper").show(); + $(".error").addClass("hidden"); + }, + onComplete: function (file, response) { + if (response["error"] != undefined) { + $(".error span").html(response["error"]); + $(".error").removeClass("hidden"); + $("#profile-rotator").hide(); + $(".fbrowser-content").show(); + return; } - } - ); + + var url = baseurl + "/fbrowser/" + FileBrowser.type + "?mode=none&theme=frio"; + // Load new content to fbrowser window + FileBrowser.loadContent(url); + }, + }); } }, // Stuff which should be executed if ne content was loaded - postLoad: function() { + postLoad: function () { FileBrowser.initGallery(); $(".fbrowser .fbswitcher .btn").removeClass("active"); $(".fbrowser .fbswitcher [data-mode=" + FileBrowser.type + "]").addClass("active"); @@ -229,14 +237,14 @@ var FileBrowser = { }, // Load new content (e.g. change photo album) - loadContent: function(url) { + loadContent: function (url) { $(".fbrowser-content").hide(); $(".fbrowser .profile-rotator-wrapper").show(); // load new content to fbrowser window - $(".fbrowser").load(url, function(responseText, textStatus) { + $(".fbrowser").load(url, function (responseText, textStatus) { $(".profile-rotator-wrapper").hide(); - if (textStatus === 'success') { + if (textStatus === "success") { $(".fbrowser_content").show(); FileBrowser.postLoad(); } @@ -244,12 +252,12 @@ var FileBrowser = { }, // Initialize justified Gallery - initGallery: function() { + initGallery: function () { $(".fbrowser.image .fbrowser-content-container").justifiedGallery({ - 'rowHeight': 80, - 'margins': 4, - 'border': 0 + rowHeight: 80, + margins: 4, + border: 0, }); - } + }, }; // @license-end diff --git a/view/theme/frio/js/hovercard.js b/view/theme/frio/js/hovercard.js index acc3630945..0dff617598 100644 --- a/view/theme/frio/js/hovercard.js +++ b/view/theme/frio/js/hovercard.js @@ -9,16 +9,16 @@ * */ $(document).ready(function () { - let $body = $('body'); + let $body = $("body"); // Prevents normal click action on click hovercard elements - $body.on('click', '.userinfo.click-card', function (e) { + $body.on("click", ".userinfo.click-card", function (e) { e.preventDefault(); }); // This event listener needs to be declared before the one that removes // all cards so that we can stop the immediate propagation of the event // Since the manual popover appears instantly and the hovercard removal is // on a 100ms delay, leaving event propagation immediately hides any click hovercard - $body.on('mousedown', '.userinfo.click-card', function (e) { + $body.on("mousedown", ".userinfo.click-card", function (e) { e.stopImmediatePropagation(); let timeNow = new Date().getTime(); @@ -26,14 +26,14 @@ $(document).ready(function () { let targetElement = $(this); // get href-attribute - if (targetElement.is('[href]')) { - contactUrl = targetElement.attr('href'); + if (targetElement.is("[href]")) { + contactUrl = targetElement.attr("href"); } else { return true; } // no hovercard for anchor links - if (contactUrl.substring(0, 1) === '#') { + if (contactUrl.substring(0, 1) === "#") { return true; } @@ -41,59 +41,62 @@ $(document).ready(function () { }); // hover cards should be removed very easily, e.g. when any of these events happens - $body.on('mouseleave touchstart scroll mousedown submit keydown', function (e) { + $body.on("mouseleave touchstart scroll mousedown submit keydown", function (e) { // remove hover card only for desktiop user, since on mobile we open the hovercards // by click event insteadof hover removeAllHovercards(e, new Date().getTime()); }); - $body.on('mouseover', '.userinfo.hover-card, .wall-item-responses a, .wall-item-bottom .mention a', function (e) { - let timeNow = new Date().getTime(); - removeAllHovercards(e, timeNow); - let contactUrl = false; - let targetElement = $(this); + $body + .on("mouseover", ".userinfo.hover-card, .wall-item-responses a, .wall-item-bottom .mention a", function (e) { + let timeNow = new Date().getTime(); + removeAllHovercards(e, timeNow); + let contactUrl = false; + let targetElement = $(this); - // get href-attribute - if (targetElement.is('[href]')) { - contactUrl = targetElement.attr('href'); - } else { - return true; - } - - // no hover card if the element has the no-hover-card class - if (targetElement.hasClass('no-hover-card')) { - return true; - } - - // no hovercard for anchor links - if (contactUrl.substring(0, 1) === '#') { - return true; - } - - targetElement.attr('data-awaiting-hover-card', timeNow); - - // Delay until the hover-card does appear - setTimeout(function () { - if ( - targetElement.is(':hover') - && parseInt(targetElement.attr('data-awaiting-hover-card'), 10) === timeNow - && $('.hovercard').length === 0 - ) { - openHovercard(targetElement, contactUrl, timeNow); + // get href-attribute + if (targetElement.is("[href]")) { + contactUrl = targetElement.attr("href"); + } else { + return true; } - }, 500); - }).on('mouseleave', '.userinfo.hover-card, .wall-item-responses a, .wall-item-bottom .mention a', function (e) { // action when mouse leaves the hover-card - removeAllHovercards(e, new Date().getTime()); - }); + + // no hover card if the element has the no-hover-card class + if (targetElement.hasClass("no-hover-card")) { + return true; + } + + // no hovercard for anchor links + if (contactUrl.substring(0, 1) === "#") { + return true; + } + + targetElement.attr("data-awaiting-hover-card", timeNow); + + // Delay until the hover-card does appear + setTimeout(function () { + if ( + targetElement.is(":hover") && + parseInt(targetElement.attr("data-awaiting-hover-card"), 10) === timeNow && + $(".hovercard").length === 0 + ) { + openHovercard(targetElement, contactUrl, timeNow); + } + }, 500); + }) + .on("mouseleave", ".userinfo.hover-card, .wall-item-responses a, .wall-item-bottom .mention a", function (e) { + // action when mouse leaves the hover-card + removeAllHovercards(e, new Date().getTime()); + }); // if we're hovering a hover card, give it a class, so we don't remove it - $body.on('mouseover', '.hovercard', function (e) { - $(this).addClass('dont-remove-card'); + $body.on("mouseover", ".hovercard", function (e) { + $(this).addClass("dont-remove-card"); }); - $body.on('mouseleave', '.hovercard', function (e) { - $(this).removeClass('dont-remove-card'); - $(this).popover('hide'); + $body.on("mouseleave", ".hovercard", function (e) { + $(this).removeClass("dont-remove-card"); + $(this).popover("hide"); }); }); // End of $(document).ready @@ -101,20 +104,20 @@ $(document).ready(function () { function removeAllHovercards(event, priorTo) { // don't remove hovercards until after 100ms, so user have time to move the cursor to it (which gives it the dont-remove-card class) setTimeout(function () { - $.each($('.hovercard'), function () { - let title = $(this).attr('data-orig-title'); + $.each($(".hovercard"), function () { + let title = $(this).attr("data-orig-title"); // don't remove card if it was created after removeAllhoverCards() was called - if ($(this).data('card-created') < priorTo) { + if ($(this).data("card-created") < priorTo) { // don't remove it if we're hovering it right now! - if (!$(this).hasClass('dont-remove-card')) { - let $handle = $('[data-hover-card-active="' + $(this).data('card-created') + '"]'); - $handle.removeAttr('data-hover-card-active'); + if (!$(this).hasClass("dont-remove-card")) { + let $handle = $('[data-hover-card-active="' + $(this).data("card-created") + '"]'); + $handle.removeAttr("data-hover-card-active"); // Restoring the popover handle title - let title = $handle.attr('data-orig-title'); - $handle.attr({'data-orig-title': '', title: title}); + let title = $handle.attr("data-orig-title"); + $handle.attr({ "data-orig-title": "", title: title }); - $(this).popover('hide'); + $(this).popover("hide"); } } }); @@ -124,35 +127,40 @@ function removeAllHovercards(event, priorTo) { function openHovercard(targetElement, contactUrl, timeNow) { // store the title in a data attribute because Bootstrap // popover destroys the title attribute. - let title = targetElement.attr('title'); - targetElement.attr({'data-orig-title': title, title: ''}); + let title = targetElement.attr("title"); + targetElement.attr({ "data-orig-title": title, title: "" }); // get an additional data atribute if the card is active - targetElement.attr('data-hover-card-active', timeNow); + targetElement.attr("data-hover-card-active", timeNow); // get the whole html content of the hover card and // push it to the bootstrap popover getHoverCardContent(contactUrl, function (data) { if (data) { - targetElement.popover({ - html: true, - placement: function () { - // Calculate the placement of the the hovercard (if top or bottom) - // The placement depence on the distance between window top and the element - // which triggers the hover-card - let get_position = $(targetElement).offset().top - $(window).scrollTop(); - if (get_position < 270) { - return 'bottom'; - } - return 'top'; - }, - trigger: 'manual', - template: '
', - content: data, - container: 'body', - sanitizeFn: function (content) { - return DOMPurify.sanitize(content) - }, - }).popover('show'); + targetElement + .popover({ + html: true, + placement: function () { + // Calculate the placement of the the hovercard (if top or bottom) + // The placement depence on the distance between window top and the element + // which triggers the hover-card + let get_position = $(targetElement).offset().top - $(window).scrollTop(); + if (get_position < 270) { + return "bottom"; + } + return "top"; + }, + trigger: "manual", + template: + '
', + content: data, + container: "body", + sanitizeFn: function (content) { + return DOMPurify.sanitize(content); + }, + }) + .popover("show"); } }); } @@ -176,7 +184,7 @@ function getHoverCardContent(contact_url, callback) { } $.ajax({ - url: baseurl + '/contact/hovercard', + url: baseurl + "/contact/hovercard", data: postdata, success: function (data, textStatus, request) { getHoverCardContent.cache[nurl] = data; diff --git a/view/theme/frio/js/jot.js b/view/theme/frio/js/jot.js index a5c762d7d3..37ee9ec66e 100644 --- a/view/theme/frio/js/jot.js +++ b/view/theme/frio/js/jot.js @@ -6,33 +6,33 @@ var linkPreview; /** * Insert a link into friendica jot. - * + * * @returns {void} */ function jotGetLink() { var currentText = $("#profile-jot-text").val(); - var noAttachment = ''; + var noAttachment = ""; reply = prompt(aStr.linkurl); - if(reply && reply.length) { + if (reply && reply.length) { // There should be only one attachment per post. // So we need to remove the old one. - $('#jot-attachment-preview').empty(); - $('#profile-rotator').show(); + $("#jot-attachment-preview").empty(); + $("#profile-rotator").show(); if (currentText.includes("[attachment") && currentText.includes("[/attachment]")) { - noAttachment = '&noAttachment=1'; + noAttachment = "&noAttachment=1"; } // We use the linkPreview library to have a preview // of the attachments. - if (typeof linkPreview === 'object') { + if (typeof linkPreview === "object") { linkPreview.crawlText(reply + noAttachment); - // Fallback: insert the attachment bbcode directly into the textarea - // if the attachment live preview isn't available + // Fallback: insert the attachment bbcode directly into the textarea + // if the attachment live preview isn't available } else { - $.get('parse_url?binurl=' + bin2hex(reply) + noAttachment, function(data) { + $.get("parse_url?binurl=" + bin2hex(reply) + noAttachment, function (data) { addeditortext(data); - $('#profile-rotator').hide(); + $("#profile-rotator").hide(); }); } autosize.update($("#profile-jot-text")); diff --git a/view/theme/frio/js/mod_admin.js b/view/theme/frio/js/mod_admin.js index d73b719d02..1ea087c2ca 100644 --- a/view/theme/frio/js/mod_admin.js +++ b/view/theme/frio/js/mod_admin.js @@ -2,42 +2,40 @@ /** * Javascript for the admin module */ -$(function() { - let $body = $('body'); - $body.on('click', '.selectall', function() { - selectall($(this).data('selectAll')); +$(function () { + let $body = $("body"); + $body.on("click", ".selectall", function () { + selectall($(this).data("selectAll")); }); - $body.on('click', '.selectnone', function() { - selectnone($(this).data('selectNone')); + $body.on("click", ".selectnone", function () { + selectnone($(this).data("selectNone")); }); // Toggle checkbox status to all or none for all checkboxes of a specific // css class. - $body.on('change', 'input[type=checkbox].selecttoggle', function() { + $body.on("change", "input[type=checkbox].selecttoggle", function () { $this = $(this); - if ($this.prop('checked')) { - selectall($this.data('selectClass')); - $this.attr('title', $this.data('selectNone')); + if ($this.prop("checked")) { + selectall($this.data("selectClass")); + $this.attr("title", $this.data("selectNone")); } else { - selectnone($this.data('selectClass')); - $this.attr('title', $this.data('selectAll')); + selectnone($this.data("selectClass")); + $this.attr("title", $this.data("selectAll")); } }); function selectall(cls) { - $('.' + cls).prop('checked', true); + $("." + cls).prop("checked", true); return false; } function selectnone(cls) { - $('.' + cls).prop('checked', false); + $("." + cls).prop("checked", false); return false; } - - }); // Users -function confirm_delete(msg, uname){ +function confirm_delete(msg, uname) { return confirm(msg.format(uname)); } diff --git a/view/theme/frio/js/mod_contacts.js b/view/theme/frio/js/mod_contacts.js index dbc99bc093..71e45f1369 100644 --- a/view/theme/frio/js/mod_contacts.js +++ b/view/theme/frio/js/mod_contacts.js @@ -2,22 +2,20 @@ var batchConfirmed = false; -$(document).ready(function() { +$(document).ready(function () { // Initiale autosize for the textareas. autosize($("textarea.text-autosize")); - // Replace the drop contact link of the photo menu // with a confirmation modal. - $("body").on("click", ".contact-photo-menu a", function(e) { - var photoMenuLink = $(this).attr('href'); + $("body").on("click", ".contact-photo-menu a", function (e) { + var photoMenuLink = $(this).attr("href"); if (typeof photoMenuLink !== "undefined" && photoMenuLink.indexOf("/drop?confirm=1") !== -1) { e.preventDefault(); addToModal(photoMenuLink); return false; } }); - }); /** @@ -25,7 +23,7 @@ $(document).ready(function() { * * @param {string} name The name of the batch action. * @param {string} value If it isn't empty the action will be posted. - * + * * @return {void} */ function batch_submit_handler(name, value) { diff --git a/view/theme/frio/js/mod_display.js b/view/theme/frio/js/mod_display.js index 9654502611..907b0fa7ea 100644 --- a/view/theme/frio/js/mod_display.js +++ b/view/theme/frio/js/mod_display.js @@ -6,8 +6,8 @@ // Catch the GUID from the URL var itemGuid = window.location.pathname.split("/").pop(); -$(window).load(function(){ +$(window).load(function () { // Scroll to the Item by its GUID - scrollToItem('item-' + itemGuid); + scrollToItem("item-" + itemGuid); }); // @license-end diff --git a/view/theme/frio/js/mod_events.js b/view/theme/frio/js/mod_events.js index 234d607dde..8ea2a0af91 100644 --- a/view/theme/frio/js/mod_events.js +++ b/view/theme/frio/js/mod_events.js @@ -4,75 +4,86 @@ * Initialization of the fullCalendar and format the output. */ -$(document).ready(function() { +$(document).ready(function () { // start the fullCalendar - $('#events-calendar').fullCalendar({ + $("#events-calendar").fullCalendar({ firstDay: aStr.firstDay, - monthNames: aStr['monthNames'], - monthNamesShort: aStr['monthNamesShort'], - dayNames: aStr['dayNames'], - dayNamesShort: aStr['dayNamesShort'], + monthNames: aStr["monthNames"], + monthNamesShort: aStr["monthNamesShort"], + dayNames: aStr["dayNames"], + dayNamesShort: aStr["dayNamesShort"], allDayText: aStr.allday, noEventsMessage: aStr.noevent, buttonText: { today: aStr.today, month: aStr.month, week: aStr.week, - day: aStr.day + day: aStr.day, }, - events: baseurl + moduleUrl + '/json/', + events: baseurl + moduleUrl + "/json/", header: { - left: '', - // center: 'title', - right: '' - }, - timeFormat: 'H:mm', - eventClick: function(calEvent, jsEvent, view) { + left: "", + // center: 'title', + right: "", + }, + timeFormat: "H:mm", + eventClick: function (calEvent, jsEvent, view) { showEvent(calEvent.id); }, - loading: function(isLoading, view) { - if(!isLoading) { - $('td.fc-day').dblclick(function() { addToModal('/events/new?start='+$(this).data('date')); }); + loading: function (isLoading, view) { + if (!isLoading) { + $("td.fc-day").dblclick(function () { + addToModal("/events/new?start=" + $(this).data("date")); + }); } }, - defaultView: 'month', + defaultView: "month", aspectRatio: 1, - eventRender: function(event, element, view) { + eventRender: function (event, element, view) { //console.log(view.name); - switch(view.name){ + switch (view.name) { case "month": - element.find(".fc-title").html( - "{2}".format( - event.item['author-avatar'], - event.item['author-name'], - event.title, - event.item.desc, - event.item.location - )); + element + .find(".fc-title") + .html( + "{2}".format( + event.item["author-avatar"], + event.item["author-name"], + event.title, + event.item.desc, + event.item.location, + ), + ); break; case "agendaWeek": - if (event.item['author-name'] == null) return; - element.find(".fc-title").html( - "{1}

{2}

{3}

".format( - event.item['author-avatar'], - event.item['author-name'], - event.item.desc, - htmlToText(event.item.location) - )); - break; + if (event.item["author-name"] == null) return; + element + .find(".fc-title") + .html( + "{1}

{2}

{3}

".format( + event.item["author-avatar"], + event.item["author-name"], + event.item.desc, + htmlToText(event.item.location), + ), + ); + break; case "agendaDay": - if (event.item['author-name'] == null) return; - element.find(".fc-title").html( - "{1}

{2}

{3}

".format( - event.item['author-avatar'], - event.item['author-name'], - event.item.desc, - htmlToText(event.item.location) - )); + if (event.item["author-name"] == null) return; + element + .find(".fc-title") + .html( + "{1}

{2}

{3}

".format( + event.item["author-avatar"], + event.item["author-name"], + event.item.desc, + htmlToText(event.item.location), + ), + ); break; case "listMonth": element.find(".fc-list-item-title").html(formatListViewEvent(event)); - break; + break; } }, eventAfterRender: function (event, element) { @@ -82,54 +93,53 @@ $(document).ready(function() { html: true, trigger: "hover", placement: "auto", - template: '
', + template: + '
', sanitizeFn: function (content) { - return DOMPurify.sanitize(content) + return DOMPurify.sanitize(content); }, }); - - } - - }) + }, + }); // center on date - var args=location.href.replace(baseurl,"").split("/"); + var args = location.href.replace(baseurl, "").split("/"); if (modparams == 2) { - if (args.length>=5) { - $("#events-calendar").fullCalendar('gotoDate',args[3] , args[4]-1); + if (args.length >= 5) { + $("#events-calendar").fullCalendar("gotoDate", args[3], args[4] - 1); } } else { - if (args.length>=4) { - $("#events-calendar").fullCalendar('gotoDate',args[2] , args[3]-1); + if (args.length >= 4) { + $("#events-calendar").fullCalendar("gotoDate", args[2], args[3] - 1); } } // echo the title - var view = $('#events-calendar').fullCalendar('getView'); - $('#fc-title').text(view.title); + var view = $("#events-calendar").fullCalendar("getView"); + $("#fc-title").text(view.title); // show event popup - var hash = location.hash.split("-") - if (hash.length==2 && hash[0]=="#link") showEvent(hash[1]); - + var hash = location.hash.split("-"); + if (hash.length == 2 && hash[0] == "#link") showEvent(hash[1]); }); // loads the event into a modal function showEvent(eventid) { - addToModal(baseurl + moduleUrl + '/?id=' + eventid); + addToModal(baseurl + moduleUrl + "/?id=" + eventid); } function changeView(action, viewName) { - $('#events-calendar').fullCalendar(action, viewName); - var view = $('#events-calendar').fullCalendar('getView'); - $('#fc-title').text(view.title); + $("#events-calendar").fullCalendar(action, viewName); + var view = $("#events-calendar").fullCalendar("getView"); + $("#fc-title").text(view.title); } // The template for the bootstrap popover for displaying the event title and // author (it's the nearly the same template we use in frio for the contact // hover cards. So be careful when changing the css) function eventHoverBodyTemplate() { - var template = '\ + var template = + '\
\
\
\ @@ -154,52 +164,53 @@ function eventHoverBodyTemplate() { // The template for presenting the event location in the event hover-card function eventHoverLocationTemplate() { - var template = '\ + var template = + '\ {0}
'; return template; } function eventHoverProfileNameTemplate() { - var template = '\ + var template = + '\
\ {1}\
'; return template; } -// transform the event data to html so we can use it in the event hover-card +// transform the event data to html so we can use it in the event hover-card function eventHoverHtmlContent(event) { - var eventLocation = ''; - var eventProfileName = ''; + var eventLocation = ""; + var eventProfileName = ""; // Get the Browser language var locale = window.navigator.userLanguage || window.navigator.language; - var data = ''; + var data = ""; // Use the browser language for date formatting moment.locale(locale); // format dates to different styles - var startDate = moment(event.item.start).format('dd HH:mm'); - var endDate = moment(event.item.finsih).format('dd HH:mm'); - var monthShort = moment(event.item.start).format('MMM'); - var dayNumberStart = moment(event.item.start).format('DD'); - var dayNumberEnd = moment(event.item.finish).format('DD'); - var startTime = moment(event.item.start).format('HH:mm'); - var endTime = moment(event.item.finish).format('HH:mm'); + var startDate = moment(event.item.start).format("dd HH:mm"); + var endDate = moment(event.item.finsih).format("dd HH:mm"); + var monthShort = moment(event.item.start).format("MMM"); + var dayNumberStart = moment(event.item.start).format("DD"); + var dayNumberEnd = moment(event.item.finish).format("DD"); + var startTime = moment(event.item.start).format("HH:mm"); + var endTime = moment(event.item.finish).format("HH:mm"); var monthNumber; var formattedDate = startDate; // We only need the to format the end date if the event does have - // a finish date. + // a finish date. if (event.item.nofinish == 0) { - formattedDate = startDate + ' - ' + endTime; + formattedDate = startDate + " - " + endTime; // use a different Format (15. Feb - 18. Feb) if the events end date // is not the start date - if ( dayNumberStart != dayNumberEnd) { - formattedDate = moment(event.item.start).format('Do MMM') + - ' - ' + - moment(event.item.finish).format('Do MMM'); + if (dayNumberStart != dayNumberEnd) { + formattedDate = + moment(event.item.start).format("Do MMM") + " - " + moment(event.item.finish).format("Do MMM"); } } @@ -213,32 +224,27 @@ function eventHoverHtmlContent(event) { var eventLocationTemplate = eventHoverLocationTemplate(); // Format the event location data according to the the event location // template - eventLocation = eventLocationTemplate.format( - eventLocationText - ); + eventLocation = eventLocationTemplate.format(eventLocationText); } // Get only template data if there exists a profile name - if (event.item['author-name']) { + if (event.item["author-name"]) { // Get the template var eventProfileNameTemplate = eventHoverProfileNameTemplate(); // Insert the data into the template - eventProfileName = eventProfileNameTemplate.format( - event.item['author-link'], - event.item['author-name'] - ); + eventProfileName = eventProfileNameTemplate.format(event.item["author-link"], event.item["author-name"]); } // Format the event data according to the event hover template var formatted = data.format( - event.item['author-avatar'], // this isn't used at the present time - eventProfileName, - event.title, - eventLocation, - formattedDate, - monthShort.replace('.', ''), // Get rid of possible dots in the string - dayNumberStart - ); + event.item["author-avatar"], // this isn't used at the present time + eventProfileName, + event.title, + eventLocation, + formattedDate, + monthShort.replace(".", ""), // Get rid of possible dots in the string + dayNumberStart, + ); return formatted; } @@ -246,7 +252,8 @@ function eventHoverHtmlContent(event) { // transform the the list view event element into formatted html function formatListViewEvent(event) { // The basic template for list view - var template = '\ + var template = + '\
\
\
{0}
\ diff --git a/view/theme/frio/js/mod_group.js b/view/theme/frio/js/mod_group.js index c6584f8a2c..82687bec5c 100644 --- a/view/theme/frio/js/mod_group.js +++ b/view/theme/frio/js/mod_group.js @@ -5,10 +5,9 @@ * The javascript for the group module */ - -$(document).ready(function() { +$(document).ready(function () { // Add an event listeners on buttons for switching the contact list view - $("body").on("click", ".group-list-switcher", function() { + $("body").on("click", ".group-list-switcher", function () { switchGroupViewMode(this); }); }); @@ -28,16 +27,16 @@ function groupChangeMember(gid, cid, sec_token) { $(".tooltip").tooltip("hide"); $("body").css("cursor", "wait"); - $.get('group/' + gid + '/' + cid + "?t=" + sec_token, function(data) { - // Insert the new group member list - $("#group-update-wrapper").html(data); + $.get("group/" + gid + "/" + cid + "?t=" + sec_token, function (data) { + // Insert the new group member list + $("#group-update-wrapper").html(data); - // Apply the actual gropu list view mode to the new - // group list html - var activeMode = $(".group-list-switcher.active"); - switchGroupViewMode(activeMode[0]); + // Apply the actual gropu list view mode to the new + // group list html + var activeMode = $(".group-list-switcher.active"); + switchGroupViewMode(activeMode[0]); - $("body").css("cursor", "auto"); + $("body").css("cursor", "auto"); }); } @@ -48,17 +47,17 @@ function groupChangeMember(gid, cid, sec_token) { * @returns {undefined} */ function switchGroupViewMode(elm) { - // Remove the active class from group list switcher buttons - $(".group-list-switcher").removeClass("active"); - // And add it to the active button element - $(elm).addClass("active"); + // Remove the active class from group list switcher buttons + $(".group-list-switcher").removeClass("active"); + // And add it to the active button element + $(elm).addClass("active"); - // Add or remove the css classes for the group list with regard to the active view mode - if (elm.id === "group-list-small") { - $("#contact-group-list > li").addClass("shortmode col-lg-6 col-md-6 col-sm-6 col-xs-12"); - } else { - $("#contact-group-list > li").removeClass("shortmode col-lg-6 col-md-6 col-sm-6 col-xs-12"); - } + // Add or remove the css classes for the group list with regard to the active view mode + if (elm.id === "group-list-small") { + $("#contact-group-list > li").addClass("shortmode col-lg-6 col-md-6 col-sm-6 col-xs-12"); + } else { + $("#contact-group-list > li").removeClass("shortmode col-lg-6 col-md-6 col-sm-6 col-xs-12"); + } } /** diff --git a/view/theme/frio/js/mod_notifications.js b/view/theme/frio/js/mod_notifications.js index 712c350604..8ab1bccb75 100644 --- a/view/theme/frio/js/mod_notifications.js +++ b/view/theme/frio/js/mod_notifications.js @@ -7,19 +7,19 @@ // Catch the intro ID from the URL var introID = location.pathname.split("/").pop(); -$(document).ready(function(){ +$(document).ready(function () { // Since only the DIV's inside the notification-list are marked // with the class "unseen", we need some js to transfer this class // to the parent li list-elements. - if($(".notif-item").hasClass("unseen")) { + if ($(".notif-item").hasClass("unseen")) { $(".notif-item.unseen").parent("li").addClass("unseen"); } }); -$(window).load(function(){ +$(window).load(function () { // Scroll to the intro by its intro ID. if (isIntroID()) { - scrollToItem('intro-' + introID); + scrollToItem("intro-" + introID); } }); diff --git a/view/theme/frio/js/mod_photos.js b/view/theme/frio/js/mod_photos.js index c75a997cab..a0e5498c25 100644 --- a/view/theme/frio/js/mod_photos.js +++ b/view/theme/frio/js/mod_photos.js @@ -1,32 +1,34 @@ // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPLv3-or-later -$(document).ready(function() { - - $('#contact_allow, #contact_deny, #group_allow, #group_deny').change(function() { - var selstr; - $('#contact_allow option:selected, #contact_deny option:selected, #group_allow option:selected, #group_deny option:selected').each( function() { - selstr = $(this).html(); - $('#jot-perms-icon').removeClass('unlock').addClass('lock'); - $('#jot-public').hide(); - }); - if(selstr == null) { - $('#jot-perms-icon').removeClass('lock').addClass('unlock'); - $('#jot-public').show(); - } - - }).trigger('change'); +$(document).ready(function () { + $("#contact_allow, #contact_deny, #group_allow, #group_deny") + .change(function () { + var selstr; + $( + "#contact_allow option:selected, #contact_deny option:selected, #group_allow option:selected, #group_deny option:selected", + ).each(function () { + selstr = $(this).html(); + $("#jot-perms-icon").removeClass("unlock").addClass("lock"); + $("#jot-public").hide(); + }); + if (selstr == null) { + $("#jot-perms-icon").removeClass("lock").addClass("unlock"); + $("#jot-public").show(); + } + }) + .trigger("change"); // Click event listener for the album edit link/button. - $("body").on('click', '#album-edit-link', function() { + $("body").on("click", "#album-edit-link", function () { var modalUrl = $(this).attr("data-modal-url"); if (typeof modalUrl !== "undefined") { - addToModal(modalUrl, 'photo-album-edit-wrapper'); + addToModal(modalUrl, "photo-album-edit-wrapper"); } }); // Click event listener for the album drop link/button. - $("body").on('click', '#album-drop-link', function() { + $("body").on("click", "#album-drop-link", function () { var modalUrl = $(this).attr("data-modal-url"); if (typeof modalUrl !== "undefined") { @@ -35,7 +37,7 @@ $(document).ready(function() { }); }); -$(window).load(function() { +$(window).load(function () { // Get picture dimensions var pheight = $("#photo-photo img").height(); var pwidth = $("#photo-photo img").width(); @@ -43,8 +45,8 @@ $(window).load(function() { // Append the diminsons of the picture to the css of the photo-photo div // we do this to make it possible to have overlay navigation buttons for the photo $("#photo-photo").css({ - "width": pwidth, - "height": pheight + width: pwidth, + height: pheight, }); }); // @license-end diff --git a/view/theme/frio/js/modal.js b/view/theme/frio/js/modal.js index 241cfd4cea..75c4d96e4e 100644 --- a/view/theme/frio/js/modal.js +++ b/view/theme/frio/js/modal.js @@ -2,13 +2,13 @@ /** * Contains functions for bootstrap modal handling. */ -$(document).ready(function(){ +$(document).ready(function () { // Clear bs modal on close. // We need this to prevent that the modal displays old content. - $('body, footer').on('hidden.bs.modal', '.modal', function () { - $(this).removeData('bs.modal'); + $("body, footer").on("hidden.bs.modal", ".modal", function () { + $(this).removeData("bs.modal"); $("#modal-title").empty(); - $('#modal-body').empty(); + $("#modal-body").empty(); // Remove the file browser from jot (else we would have problems // with AjaxUpload. $(".fbrowser").remove(); @@ -18,20 +18,20 @@ $(document).ready(function(){ // Clear bs modal on close. // We need this to prevent that the modal displays old content. - $('body').on('hidden.bs.modal', '#jot-modal', function () { + $("body").on("hidden.bs.modal", "#jot-modal", function () { // Restore cached jot at its hidden position ("#jot-content"). $("#jot-content").append(jotcache); // Clear the jotcache. - jotcache = ''; + jotcache = ""; // Destroy the attachment linkPreviw for Jot. - if (typeof linkPreview === 'object') { + if (typeof linkPreview === "object") { linkPreview.destroy(); } }); // Add Colorbox for viewing Network page images. //var cBoxClasses = new Array(); - $("body").on("click", ".wall-item-body a img", function(){ + $("body").on("click", ".wall-item-body a img", function () { var aElem = $(this).parent(); var imgHref = aElem.attr("href"); @@ -39,51 +39,50 @@ $(document).ready(function(){ // We'll try to do this by looking for links of the form // .../photo/ab803d8eg08daf85023adfec08 (with nothing more following), in hopes // that that will be unique enough. - if(imgHref.match(/\/photo\/[a-fA-F0-9]+(-[0-9]\.[\w]+?)?$/)) { - + if (imgHref.match(/\/photo\/[a-fA-F0-9]+(-[0-9]\.[\w]+?)?$/)) { // Add a unique class to all the images of a certain post, to allow scrolling through var cBoxClass = $(this).closest(".wall-item-body").attr("id") + "-lightbox"; $(this).addClass(cBoxClass); -// if( $.inArray(cBoxClass, cBoxClasses) < 0 ) { -// cBoxClasses.push(cBoxClass); -// } + // if( $.inArray(cBoxClass, cBoxClasses) < 0 ) { + // cBoxClasses.push(cBoxClass); + // } aElem.colorbox({ - maxHeight: '90%', + maxHeight: "90%", photo: true, // Colorbox doesn't recognize a URL that don't end in .jpg, etc. as a photo. - rel: cBoxClass //$(this).attr("class").match(/wall-item-body-[\d]+-lightbox/)[0]. + rel: cBoxClass, //$(this).attr("class").match(/wall-item-body-[\d]+-lightbox/)[0]. }); } }); // Navbar login. - $("body").on("click", "#nav-login", function(e){ + $("body").on("click", "#nav-login", function (e) { e.preventDefault(); Dialog.show(this.href, this.dataset.originalTitle || this.title); }); // Jot nav menu.. - $("body").on("click", "#jot-modal .jot-nav li .jot-nav-lnk", function(e){ + $("body").on("click", "#jot-modal .jot-nav li .jot-nav-lnk", function (e) { e.preventDefault(); toggleJotNav(this); }); // Bookmarklet page needs an jot modal which appears automatically. - if(window.location.pathname.indexOf("/bookmarklet") >=0 && $("#jot-modal").length){ + if (window.location.pathname.indexOf("/bookmarklet") >= 0 && $("#jot-modal").length) { jotShow(); } // Open filebrowser for elements with the class "image-select" // The following part handles the filebrowser for field_fileinput.tpl. - $("body").on("click", ".image-select", function(){ + $("body").on("click", ".image-select", function () { // Set a extra attribute to mark the clicked button. this.setAttribute("image-input", "select"); Dialog.doImageBrowser("input"); }); // Insert filebrowser images into the input field (field_fileinput.tpl). - $("body").on("fbrowser.image.input", function(e, filename, embedcode, id, img) { + $("body").on("fbrowser.image.input", function (e, filename, embedcode, id, img) { // Select the clicked button by it's attribute. var elm = $("[image-input='select']"); // Select the input field which belongs to this button. @@ -92,15 +91,14 @@ $(document).ready(function(){ elm.removeAttr("image-input"); // Insert the link from the image into the input field. input.val(img); - }); // Generic delegated event to open an anchor URL in a modal. // Used in the hovercard. - document.getElementsByTagName('body')[0].addEventListener('click', function(e) { + document.getElementsByTagName("body")[0].addEventListener("click", function (e) { var target = e.target; while (target) { - if (target.matches && target.matches('a.add-to-modal')) { + if (target.matches && target.matches("a.add-to-modal")) { addToModal(target.href); e.preventDefault(); return false; @@ -112,55 +110,53 @@ $(document).ready(function(){ }); // Overwrite Dialog.show from main js to load the filebrowser into a bs modal. -Dialog.show = function(url, title) { - if (typeof(title) === 'undefined') { +Dialog.show = function (url, title) { + if (typeof title === "undefined") { title = ""; } - var modal = $('#modal').modal(); + var modal = $("#modal").modal(); modal.find("#modal-header h4").html(title); - modal - .find('#modal-body') - .load(url, function (responseText, textStatus) { - if ( textStatus === 'success' || - textStatus === 'notmodified') - { - modal.show(); + modal.find("#modal-body").load(url, function (responseText, textStatus) { + if (textStatus === "success" || textStatus === "notmodified") { + modal.show(); - $(function() {Dialog._load(url);}); - } - }); + $(function () { + Dialog._load(url); + }); + } + }); }; // Overwrite the function _get_url from main.js. -Dialog._get_url = function(type, name, id) { +Dialog._get_url = function (type, name, id) { var hash = name; if (id !== undefined) hash = hash + "-" + id; - return "fbrowser/"+type+"/?mode=none&theme=frio#"+hash; + return "fbrowser/" + type + "/?mode=none&theme=frio#" + hash; }; // Does load the filebrowser into the jot modal. -Dialog.showJot = function() { +Dialog.showJot = function () { var type = "image"; var name = "main"; var url = Dialog._get_url(type, name); - if(($(".modal-body #jot-fbrowser-wrapper .fbrowser").length) < 1 ) { + if ($(".modal-body #jot-fbrowser-wrapper .fbrowser").length < 1) { // Load new content to fbrowser window. - $("#jot-fbrowser-wrapper").load(url,function(responseText, textStatus){ - if ( textStatus === 'success' || - textStatus === 'notmodified') - { - $(function() {Dialog._load(url);}); + $("#jot-fbrowser-wrapper").load(url, function (responseText, textStatus) { + if (textStatus === "success" || textStatus === "notmodified") { + $(function () { + Dialog._load(url); + }); } }); } }; // Init the filebrowser after page load. -Dialog._load = function(url) { +Dialog._load = function (url) { // Get nickname & filebrowser type from the modal content. - let filebrowser = document.getElementById('filebrowser'); + let filebrowser = document.getElementById("filebrowser"); // Try to fetch the hash form the url. let match = url.match(/fbrowser\/[a-z]+\/.*(#.*)/); @@ -170,14 +166,14 @@ Dialog._load = function(url) { // Initialize the filebrowser. loadScript("view/js/ajaxupload.js"); - loadScript("view/theme/frio/js/filebrowser.js", function() { + loadScript("view/theme/frio/js/filebrowser.js", function () { FileBrowser.init(filebrowser.dataset.nickname, filebrowser.dataset.type, match[1]); }); }; /** * Add first element with the class "heading" as modal title - * + * * Note: this should be really done in the template * and is the solution where we havent done it until this * moment or where it isn't possible because of design @@ -195,22 +191,21 @@ function loadModalTitle() { title = $("#modal-body .heading").first().html(); // for event modals we need some speacial handling - if($("#modal-body .event-wrapper .event-summary").length) { + if ($("#modal-body .event-wrapper .event-summary").length) { title = ' '; var eventsum = $("#modal-body .event-wrapper .event-summary").html(); title = title + eventsum; } // And append it to modal title. - if (title!=="") { + if (title !== "") { $("#modal-title").append(title); } } - /** * This function loads html content from a friendica page into a modal. - * + * * @param {string} url The url with html content. * @param {string} id The ID of a html element (can be undefined). * @returns {void} @@ -218,42 +213,35 @@ function loadModalTitle() { function addToModal(url, id) { var char = qOrAmp(url); - url = url + char + 'mode=none'; - var modal = $('#modal').modal(); + url = url + char + "mode=none"; + var modal = $("#modal").modal(); // Only search for an element if we have an ID. if (typeof id !== "undefined") { url = url + " div#" + id; } - modal - .find('#modal-body') - .load(url, function (responseText, textStatus) { - if ( textStatus === 'success' || - textStatus === 'notmodified') - { - modal.show(); + modal.find("#modal-body").load(url, function (responseText, textStatus) { + if (textStatus === "success" || textStatus === "notmodified") { + modal.show(); - //Get first element with the class "heading" - //and use it as title. - loadModalTitle(); + //Get first element with the class "heading" + //and use it as title. + loadModalTitle(); - // We need to initialize autosize again for new - // modal conent. - autosize($('.modal .text-autosize')); - } - }); + // We need to initialize autosize again for new + // modal conent. + autosize($(".modal .text-autosize")); + } + }); } // Add an element (by its id) to a bootstrap modal. function addElmToModal(id) { var elm = $(id).html(); - var modal = $('#modal').modal(); + var modal = $("#modal").modal(); - modal - .find('#modal-body') - .append(elm) - .modal.show; + modal.find("#modal-body").append(elm).modal.show; loadModalTitle(); } @@ -269,12 +257,12 @@ function editpost(url) { // Test if in the url path containing "events/event". If the path containing this // expression then we will call the addToModal function and exit this function at // this point. - if (splitURL.path.indexOf('events/event') > -1) { + if (splitURL.path.indexOf("events/event") > -1) { addToModal(splitURL.path); return; } - var modal = $('#jot-modal').modal(); + var modal = $("#jot-modal").modal(); url = url + " #jot-sections"; $(".jot-nav .jot-perms-lnk").parent("li").addClass("hidden"); @@ -293,34 +281,29 @@ function editpost(url) { jotreset(); - modal - .find('#jot-modal-content') - .load(url, function (responseText, textStatus) { - if ( textStatus === 'success' || - textStatus === 'notmodified') - { - // get the item type and hide the input for title and category if it isn't needed. - var type = $(responseText).find("#profile-jot-form input[name='type']").val(); - if(type === "wall-comment" || type === "remote-comment") - { - // Hide title and category input fields because we don't. - $("#profile-jot-form #jot-title-wrap").hide(); - $("#profile-jot-form #jot-category-wrap").hide(); - } - - modal.show(); - $("#jot-popup").show(); - linkPreview = $('#profile-jot-text').linkPreview(); + modal.find("#jot-modal-content").load(url, function (responseText, textStatus) { + if (textStatus === "success" || textStatus === "notmodified") { + // get the item type and hide the input for title and category if it isn't needed. + var type = $(responseText).find("#profile-jot-form input[name='type']").val(); + if (type === "wall-comment" || type === "remote-comment") { + // Hide title and category input fields because we don't. + $("#profile-jot-form #jot-title-wrap").hide(); + $("#profile-jot-form #jot-category-wrap").hide(); } - }); + + modal.show(); + $("#jot-popup").show(); + linkPreview = $("#profile-jot-text").linkPreview(); + } + }); } // Remove content from the jot modal. function jotreset() { // Clear bs modal on close. // We need this to prevent that the modal displays old content. - $('body').on('hidden.bs.modal', '#jot-modal.edit-jot', function () { - $(this).removeData('bs.modal'); + $("body").on("hidden.bs.modal", "#jot-modal.edit-jot", function () { + $(this).removeData("bs.modal"); $(".jot-nav .jot-perms-lnk").parent("li").removeClass("hidden"); $("#profile-jot-form #jot-title-wrap").show(); $("#profile-jot-form #jot-category-wrap").show(); @@ -332,7 +315,7 @@ function jotreset() { } // Give the active "jot-nav" list element the class "active". -function toggleJotNav (elm) { +function toggleJotNav(elm) { // Get the ID of the tab panel which should be activated. var tabpanel = elm.getAttribute("aria-controls"); var cls = hasClass(elm, "jot-nav-lnk-mobile"); @@ -344,8 +327,10 @@ function toggleJotNav (elm) { // Minimize all tab content wrapper and activate only the selected // tab panel. - $('#profile-jot-form > [role=tabpanel]').addClass("minimize").attr("aria-hidden" ,"true"); - $('#' + tabpanel).removeClass("minimize").attr("aria-hidden" ,"false"); + $("#profile-jot-form > [role=tabpanel]").addClass("minimize").attr("aria-hidden", "true"); + $("#" + tabpanel) + .removeClass("minimize") + .attr("aria-hidden", "false"); // Set the aria-selected states $("#jot-modal .modal-header .nav-tabs .jot-nav-lnk").attr("aria-selected", "false"); @@ -355,9 +340,9 @@ function toggleJotNav (elm) { if (tabpanel === "jot-preview-content") { preview_post(); // Make Share button visivle in preview - $('#jot-preview-share').removeClass("minimize").attr("aria-hidden" ,"false"); + $("#jot-preview-share").removeClass("minimize").attr("aria-hidden", "false"); } else if (tabpanel === "jot-fbrowser-wrapper") { - $(function() { + $(function () { Dialog.showJot(); }); } @@ -377,7 +362,7 @@ function openWallMessage(url) { // If the host isn't the same we can't load it in a modal. // So we will go to to the url directly. - if( ("host" in parts) && (parts.host !== window.location.host)) { + if ("host" in parts && parts.host !== window.location.host) { window.location.href = url; } else { // Otherwise load the wall message into a modal. @@ -389,12 +374,12 @@ function openWallMessage(url) { /// @todo Rename this function because it can be used for more than events. function eventEdit(url) { var char = qOrAmp(url); - url = url + char + 'mode=none'; + url = url + char + "mode=none"; - $.get(url, function(data) { + $.get(url, function (data) { $("#modal-body").empty(); $("#modal-body").append(data); - }).done(function() { + }).done(function () { loadModalTitle(); }); } diff --git a/view/theme/frio/js/textedit.js b/view/theme/frio/js/textedit.js index f9152d464d..39e7f4428f 100644 --- a/view/theme/frio/js/textedit.js +++ b/view/theme/frio/js/textedit.js @@ -4,8 +4,8 @@ */ // Lifted from https://css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input/ -jQuery.fn.putCursorAtEnd = function() { - return this.each(function() { +jQuery.fn.putCursorAtEnd = function () { + return this.each(function () { // Cache references var $el = $(this), el = this; @@ -21,7 +21,7 @@ jQuery.fn.putCursorAtEnd = function() { var len = $el.val().length * 2; // Timeout seems to be required for Blink - setTimeout(function() { + setTimeout(function () { el.setSelectionRange(len, len); }, 1); } else { @@ -38,9 +38,9 @@ jQuery.fn.putCursorAtEnd = function() { function commentGetLink(id, prompttext) { reply = prompt(prompttext); - if(reply && reply.length) { + if (reply && reply.length) { reply = bin2hex(reply); - $.get('parse_url?noAttachment=1&binurl=' + reply, function(data) { + $.get("parse_url?noAttachment=1&binurl=" + reply, function (data) { addCommentText(data, id); }); } @@ -64,7 +64,7 @@ function commentLinkDrop(event, id) { event.preventDefault(); if (reply && reply.length) { reply = bin2hex(reply); - $.get('parse_url?noAttachment=1&binurl=' + reply, function(data) { + $.get("parse_url?noAttachment=1&binurl=" + reply, function (data) { addCommentText(data, id); }); } @@ -86,12 +86,12 @@ function insertFormattingToPost(BBCode) { } function showThread(id) { - $("#collapsed-comments-" + id).show() - $("#collapsed-comments-" + id + " .collapsed-comments").show() + $("#collapsed-comments-" + id).show(); + $("#collapsed-comments-" + id + " .collapsed-comments").show(); } function hideThread(id) { - $("#collapsed-comments-" + id).hide() - $("#collapsed-comments-" + id + " .collapsed-comments").hide() + $("#collapsed-comments-" + id).hide(); + $("#collapsed-comments-" + id + " .collapsed-comments").hide(); } function cmtBbOpen(id) { @@ -101,8 +101,7 @@ function cmtBbClose(id) { $("#comment-edit-bb-" + id).hide(); } -function commentExpand(id) -{ +function commentExpand(id) { $("#mod-cmnt-wrap-" + id).show(); closeMenu("comment-fake-form-" + id); openMenu("item-comments-" + id); @@ -114,9 +113,8 @@ function commentExpand(id) return true; } -function commentClose(obj, id) -{ - if (obj.value === '' || obj.value === obj.dataset.default) { +function commentClose(obj, id) { + if (obj.value === "" || obj.value === obj.dataset.default) { $("#comment-edit-text-" + id) .removeClass("comment-edit-text-full") .addClass("comment-edit-text-empty"); @@ -129,8 +127,8 @@ function commentClose(obj, id) } function showHideCommentBox(id) { - var $el = $('#comment-edit-form-' + id); - if ($el.is(':visible')) { + var $el = $("#comment-edit-form-" + id); + if ($el.is(":visible")) { $el.hide(); } else { $el.show(); @@ -142,19 +140,21 @@ function commentOpenUI(obj, id) { openMenu("item-comments-" + id); $("#comment-edit-text-" + id) .putCursorAtEnd() - .addClass("comment-edit-text-full").removeClass("comment-edit-text-empty") - .attr('tabindex', '9'); // Choose an arbitrary tab index that's greater than what we're using in jot (3 of them) - $("#comment-edit-submit-" + id).attr('tabindex', '10'); // The submit button gets tabindex + 1 + .addClass("comment-edit-text-full") + .removeClass("comment-edit-text-empty") + .attr("tabindex", "9"); // Choose an arbitrary tab index that's greater than what we're using in jot (3 of them) + $("#comment-edit-submit-" + id).attr("tabindex", "10"); // The submit button gets tabindex + 1 // initialize autosize for this comment autosize($("#comment-edit-text-" + id + ".text-autosize")); } function commentCloseUI(obj, id) { - if (obj.value === '' || obj.value === obj.dataset.default) { + if (obj.value === "" || obj.value === obj.dataset.default) { $("#comment-edit-text-" + id) - .removeClass("comment-edit-text-full").addClass("comment-edit-text-empty") - .removeAttr('tabindex'); - $("#comment-edit-submit-" + id).removeAttr('tabindex'); + .removeClass("comment-edit-text-full") + .addClass("comment-edit-text-empty") + .removeAttr("tabindex"); + $("#comment-edit-submit-" + id).removeAttr("tabindex"); openMenu("comment-fake-form-" + id); closeMenu("item-comments-" + id); // destroy the automatic textarea resizing @@ -163,7 +163,7 @@ function commentCloseUI(obj, id) { } function jotTextOpenUI(obj) { - if (obj.value === '' || obj.value === obj.dataset.default) { + if (obj.value === "" || obj.value === obj.dataset.default) { var $el = $(".modal-body #profile-jot-text"); $el.addClass("profile-jot-text-full").removeClass("profile-jot-text-empty"); // initiale autosize for the jot @@ -172,7 +172,7 @@ function jotTextOpenUI(obj) { } function jotTextCloseUI(obj) { - if (obj.value === '' || obj.value === obj.dataset.default) { + if (obj.value === "" || obj.value === obj.dataset.default) { var $el = $(".modal-body #profile-jot-text"); $el.removeClass("profile-jot-text-full").addClass("profile-jot-text-empty"); // destroy the automatic textarea resizing @@ -181,7 +181,7 @@ function jotTextCloseUI(obj) { } function commentOpen(obj, id) { - if (obj.value === '' || obj.value === obj.dataset.default) { + if (obj.value === "" || obj.value === obj.dataset.default) { $("#comment-edit-text-" + id) .putCursorAtEnd() .addClass("comment-edit-text-full") @@ -210,19 +210,22 @@ function dropItem(url, elementId) { var confirm = confirmDelete(); if (confirm) { - $('body').css('cursor', 'wait'); + $("body").css("cursor", "wait"); var $el = $(document.getElementById(elementId)); - $el.fadeTo('fast', 0.33, function () { - $.get(url).then(function() { - $el.remove(); - }).fail(function() { - // @todo Show related error message - $el.show(); - }).always(function() { - $('body').css('cursor', 'auto'); - }); + $el.fadeTo("fast", 0.33, function () { + $.get(url) + .then(function () { + $el.remove(); + }) + .fail(function () { + // @todo Show related error message + $el.show(); + }) + .always(function () { + $("body").css("cursor", "auto"); + }); }); } } diff --git a/view/theme/frio/js/theme.js b/view/theme/frio/js/theme.js index 18ead816e1..c335df181c 100644 --- a/view/theme/frio/js/theme.js +++ b/view/theme/frio/js/theme.js @@ -1,10 +1,10 @@ // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPLv3-or-later -var jotcache = ''; //The jot cache. We use it as cache to restore old/original jot content +var jotcache = ""; //The jot cache. We use it as cache to restore old/original jot content -$(document).ready(function(){ +$(document).ready(function () { // Destroy unused perfect scrollbar in aside element - $('aside').perfectScrollbar('destroy'); + $("aside").perfectScrollbar("destroy"); //fade in/out based on scrollTop value var scrollStart; @@ -27,24 +27,27 @@ $(document).ready(function(){ // scroll body to 0px on click $("#back-to-top").click(function () { - $("body,html").animate({ - scrollTop: 0 - }, 400); + $("body,html").animate( + { + scrollTop: 0, + }, + 400, + ); return false; }); // add the class "selected" to group widges li if li > a does have the class group-selected - if( $("#sidebar-group-ul li a").hasClass("group-selected")) { + if ($("#sidebar-group-ul li a").hasClass("group-selected")) { $("#sidebar-group-ul li a.group-selected").parent("li").addClass("selected"); } // add the class "selected" to forums widges li if li > a does have the class forum-selected - if( $("#forumlist-sidbar-ul li a").hasClass("forum-selected")) { + if ($("#forumlist-sidbar-ul li a").hasClass("forum-selected")) { $("#forumlist-sidbar-ul li a.forum-selected").parent("li").addClass("selected"); } // add the class "active" to tabmenuli if li > a does have the class active - if( $("#tabmenu ul li a").hasClass("active")) { + if ($("#tabmenu ul li a").hasClass("active")) { $("#tabmenu ul li a.active").parent("li").addClass("active"); } @@ -62,19 +65,19 @@ $(document).ready(function(){ // to the friendica logo (the mask is in nav.tpl at the botom). To make it work we need to apply the // correct url. The only way which comes to my mind was to do this with js // So we apply the correct url (with the link to the id of the mask) after the page is loaded. - if($("#logo-img").length ) { + if ($("#logo-img").length) { var pageurl = "url('" + window.location.href + "#logo-mask')"; - $("#logo-img").css({"mask": pageurl}); + $("#logo-img").css({ mask: pageurl }); } // make responsive tabmenu with flexmenu.js // the menupoints which doesn't fit in the second nav bar will moved to a // dropdown menu. Look at common_tabs.tpl $("ul.tabs.flex-nav").flexMenu({ - 'cutoff': 2, - 'popupClass': "dropdown-menu pull-right", - 'popupAbsolute': false, - 'target': ".flex-target" + cutoff: 2, + popupClass: "dropdown-menu pull-right", + popupAbsolute: false, + target: ".flex-target", }); // add Jot button to the second navbar @@ -84,33 +87,33 @@ $(document).ready(function(){ if ($("#jot-popup").is(":hidden")) { $jotButton.hide(); } - $jotButton.on('click', function (e) { + $jotButton.on("click", function (e) { e.preventDefault(); jotShow(); }); } - let $body = $('body'); + let $body = $("body"); // show bulk deletion button at network page if checkbox is checked - $body.change("input.item-select", function(){ + $body.change("input.item-select", function () { var checked = false; // We need to get all checked items, so it would close the delete button // if we uncheck one item and others are still checked. // So return checked = true if there is any checked item - $('input.item-select').each( function() { - if($(this).is(':checked')) { + $("input.item-select").each(function () { + if ($(this).is(":checked")) { checked = true; return false; } }); - if(checked) { + if (checked) { $("#item-delete-selected").fadeTo(400, 1); $("#item-delete-selected").show(); } else { - $("#item-delete-selected").fadeTo(400, 0, function(){ + $("#item-delete-selected").fadeTo(400, 0, function () { $("#item-delete-selected").hide(); }); } @@ -119,31 +122,31 @@ $(document).ready(function(){ // initialize the bootstrap tooltips $body.tooltip({ selector: '[data-toggle="tooltip"]', - container: 'body', + container: "body", animation: true, html: true, - placement: 'auto', - trigger: 'hover', + placement: "auto", + trigger: "hover", delay: { show: 500, - hide: 100 + hide: 100, }, sanitizeFn: function (content) { - return DOMPurify.sanitize(content) + return DOMPurify.sanitize(content); }, }); // initialize the bootstrap-select - $('.selectpicker').selectpicker(); + $(".selectpicker").selectpicker(); // add search-heading to the second navbar - if( $(".search-heading").length) { + if ($(".search-heading").length) { $(".search-heading").appendTo("#topbar-second > .container > #tabmenu"); } // add search results heading to the second navbar // and insert the search value to the top nav search input - if( $(".search-content-wrapper").length ) { + if ($(".search-content-wrapper").length) { // get the text of the heading (we catch the plain text because we don't // want to have a h4 heading in the navbar var searchText = $(".section-title-wrapper > h2").html(); @@ -151,11 +154,11 @@ $(document).ready(function(){ // temporary workaround to avoid 'undefined' being displayed (issue #9789) // https://github.com/friendica/friendica/issues/9789 // TODO: find a way to localize this string - if(typeof searchText === "undefined") { + if (typeof searchText === "undefined") { searchText = "No results"; } // insert the plain text in a

heading and give it a class - var newText = '

'+searchText+'

'; + var newText = '

' + searchText + "

"; // append the new heading to the navbar $("#topbar-second > .container > #tabmenu").append(newText); @@ -164,19 +167,19 @@ $(document).ready(function(){ var searchValue = $("#search-wrapper .form-group-search input").val(); // if the orignal search value isn't available use the location path as value - if( typeof searchValue === "undefined") { + if (typeof searchValue === "undefined") { // get the location path - var urlPath = window.location.search + var urlPath = window.location.search; // and split it up in its parts var splitPath = urlPath.split(/(\?search?=)(.*$)/); - if(typeof splitPath[2] !== 'undefined') { + if (typeof splitPath[2] !== "undefined") { // decode the path (e.g to decode %40 to the character @) var searchValue = decodeURIComponent(splitPath[2]); } } - if( typeof searchValue !== "undefined") { + if (typeof searchValue !== "undefined") { $("#nav-search-input-field").val(searchValue); } } @@ -186,7 +189,7 @@ $(document).ready(function(){ // append the vcard-short-info to the second nav after passing the element // with .fn (vcard username). Use scrollspy to get the scroll position. - if( $("aside .vcard .fn").length) { + if ($("aside .vcard .fn").length) { $(".vcard .fn").scrollspy({ min: $(".vcard .fn").position().top - 50, onLeaveTop: function onLeave(element) { @@ -194,7 +197,7 @@ $(document).ready(function(){ $("#vcard-short-info").appendTo("#vcard-short-info-wrapper"); }); }, - onEnter: function(element) { + onEnter: function (element) { $("#vcard-short-info").appendTo("#nav-short-info"); $("#vcard-short-info").fadeIn(500); }, @@ -202,53 +205,56 @@ $(document).ready(function(){ } // move the forum contact information of the network page into the second navbar - if( $(".network-content-wrapper > #viewcontact_wrapper-network").length) { + if ($(".network-content-wrapper > #viewcontact_wrapper-network").length) { // get the contact-wrapper element and append it to the second nav bar // Note: We need the first() element with this class since at the present time we // store also the js template information in the html code and thats why // there are two elements with this class but we don't want the js template - $(".network-content-wrapper > #viewcontact_wrapper-network .contact-wrapper").first().appendTo("#nav-short-info"); + $(".network-content-wrapper > #viewcontact_wrapper-network .contact-wrapper") + .first() + .appendTo("#nav-short-info"); } // move heading from network stream to the second navbar nav-short-info section - if( $(".network-content-wrapper > .section-title-wrapper").length) { + if ($(".network-content-wrapper > .section-title-wrapper").length) { // get the heading element var heading = $(".network-content-wrapper > .section-title-wrapper > h2"); // get the text of the heading var headingContent = heading.html(); // create a new element with the content of the heading - var newText = '

'+headingContent+'

'; + var newText = + '

' + headingContent + "

"; // remove the old heading element heading.remove(), - // put the new element to the second nav bar - $("#topbar-second #nav-short-info").append(newText); + // put the new element to the second nav bar + $("#topbar-second #nav-short-info").append(newText); } - if( $(".community-content-wrapper").length) { + if ($(".community-content-wrapper").length) { // get the heading element var heading = $(".community-content-wrapper > h3").first(); // get the text of the heading var headingContent = heading.html(); // create a new element with the content of the heading - var newText = '

'+headingContent+'

'; + var newText = '

' + headingContent + "

"; // remove the old heading element heading.remove(), - // put the new element to the second nav bar - $("#topbar-second > .container > #tabmenu").append(newText); + // put the new element to the second nav bar + $("#topbar-second > .container > #tabmenu").append(newText); } // Dropdown menus with the class "dropdown-head" will display the active tab // as button text - $body.on('click', '.dropdown-head .dropdown-menu li a, .dropdown-head .dropdown-menu li button', function(){ + $body.on("click", ".dropdown-head .dropdown-menu li a, .dropdown-head .dropdown-menu li button", function () { toggleDropdownText(this); }); // Change the css class while clicking on the switcher elements - $(".toggle label, .toggle .toggle-handle").click(function(event){ + $(".toggle label, .toggle .toggle-handle").click(function (event) { event.preventDefault(); // Get the value of the input element var input = $(this).siblings("input"); - var val = 1-input.val(); + var val = 1 - input.val(); var id = input.attr("id"); // The css classes for "on" and "off" @@ -257,9 +263,11 @@ $(document).ready(function(){ // According to the value of the input element we need to decide // which class need to be added and removed when changing the switch - var removedclass = (val == 0 ? onstyle : offstyle); - var addedclass = (val == 0 ? offstyle : onstyle) - $("#"+id+"_onoff").addClass(addedclass).removeClass(removedclass); + var removedclass = val == 0 ? onstyle : offstyle; + var addedclass = val == 0 ? offstyle : onstyle; + $("#" + id + "_onoff") + .addClass(addedclass) + .removeClass(removedclass); // After changing the switch the input element is getting // the newvalue @@ -273,19 +281,18 @@ $(document).ready(function(){ // to the input element where the padding value would be at least the width // of the button. Otherwise long user input would be invisible because it is // behind the button. - $body.on('click', '.form-group-search > input', function() { + $body.on("click", ".form-group-search > input", function () { // Get the width of the button (if the button isn't available // buttonWidth will be null - var buttonWidth = $(this).next('.form-button-search').outerWidth(); + var buttonWidth = $(this).next(".form-button-search").outerWidth(); if (buttonWidth) { // Take the width of the button and ad 5px var newWidth = buttonWidth + 5; // Set the padding of the input element according // to the width of the button - $(this).css('padding-right', newWidth); + $(this).css("padding-right", newWidth); } - }); /* @@ -295,18 +302,18 @@ $(document).ready(function(){ * We are making an exception for buttons because of a race condition with the * comment opening button that results in an already closed comment UI. */ - $(document).on('mousedown', function(event) { - if (event.target.type === 'button') { + $(document).on("mousedown", function (event) { + if (event.target.type === "button") { return true; } - var $dontclosethis = $(event.target).closest('.wall-item-comment-wrapper').find('.comment-edit-form'); - $('.wall-item-comment-wrapper .comment-edit-submit-wrapper:visible').each(function() { - var $parent = $(this).parent('.comment-edit-form'); - var itemId = $parent.data('itemId'); + var $dontclosethis = $(event.target).closest(".wall-item-comment-wrapper").find(".comment-edit-form"); + $(".wall-item-comment-wrapper .comment-edit-submit-wrapper:visible").each(function () { + var $parent = $(this).parent(".comment-edit-form"); + var itemId = $parent.data("itemId"); if ($dontclosethis[0] != $parent[0]) { - var textarea = $parent.find('textarea').get(0) + var textarea = $parent.find("textarea").get(0); commentCloseUI(textarea, itemId); } @@ -314,10 +321,10 @@ $(document).ready(function(){ }); // Customize some elements when the app is used in standalone mode on Android - if (window.matchMedia('(display-mode: standalone)').matches) { + if (window.matchMedia("(display-mode: standalone)").matches) { // Open links to source outside of the webview - $('body').on('click', '.plink', function (e) { - $(e.target).attr('target', '_blank'); + $("body").on("click", ".plink", function (e) { + $(e.target).attr("target", "_blank"); }); } @@ -325,7 +332,7 @@ $(document).ready(function(){ * This event listeners ensures that the textarea size is updated event if the * value is changed externally (textcomplete, insertFormatting, fbrowser...) */ - $(document).on('change', 'textarea', function(event) { + $(document).on("change", "textarea", function (event) { autosize.update(event.target); }); @@ -343,11 +350,11 @@ $(document).ready(function(){ if ($(window).width() > 976) { $("aside").stick_in_parent({ offset_top: 100, // px, header + tab bar + spacing - recalc_every: 10 + recalc_every: 10, }); // recalculate sticky aside on clicks on elements // this handle height changes on expanding submenus - $("aside").on("click", "a", function(){ + $("aside").on("click", "a", function () { $(document.body).trigger("sticky_kit:recalc"); }); } @@ -359,22 +366,22 @@ $(document).ready(function(){ * is shown. */ $("aside") - .on("shown.bs.offcanvas", function() { + .on("shown.bs.offcanvas", function () { $body.addClass("aside-out"); }) - .on("hidden.bs.offcanvas", function() { + .on("hidden.bs.offcanvas", function () { $body.removeClass("aside-out"); }); // Event listener for 'Show & hide event map' button in the network stream. - $body.on("click", ".event-map-btn", function() { + $body.on("click", ".event-map-btn", function () { showHideEventMap(this); }); // Comment form submit - $body.on('submit', '.comment-edit-form', function(e) { + $body.on("submit", ".comment-edit-form", function (e) { let $form = $(this); - let id = $form.data('item-id'); + let id = $form.data("item-id"); // Compose page form exception: id is always 0 and form must not be submitted asynchronously if (id === 0) { @@ -383,86 +390,75 @@ $(document).ready(function(){ e.preventDefault(); - let $commentSubmit = $form.find('.comment-edit-submit').button('loading'); + let $commentSubmit = $form.find(".comment-edit-submit").button("loading"); unpause(); commentBusy = true; - $.post( - 'item', - $form.serialize(), - 'json' - ) - .then(function(data) { - if (data.success) { - $('#comment-edit-wrapper-' + id).hide(); - let $textarea = $('#comment-edit-text-' + id); - $textarea.val(''); - if ($textarea.get(0)) { - commentClose($textarea.get(0), id); + $.post("item", $form.serialize(), "json") + .then(function (data) { + if (data.success) { + $("#comment-edit-wrapper-" + id).hide(); + let $textarea = $("#comment-edit-text-" + id); + $textarea.val(""); + if ($textarea.get(0)) { + commentClose($textarea.get(0), id); + } + if (timer) { + clearTimeout(timer); + } + timer = setTimeout(NavUpdate, 10); + force_update = true; + update_item = id; } - if (timer) { - clearTimeout(timer); + if (data.reload) { + window.location.href = data.reload; } - timer = setTimeout(NavUpdate,10); - force_update = true; - update_item = id; - } - if (data.reload) { - window.location.href = data.reload; - } - }) - .always(function() { - $commentSubmit.button('reset'); - }); + }) + .always(function () { + $commentSubmit.button("reset"); + }); }); - $body.on('submit', '.modal-body #poke-wrapper', function(e) { + $body.on("submit", ".modal-body #poke-wrapper", function (e) { e.preventDefault(); let $form = $(this); - let $pokeSubmit = $form.find('button[type=submit]').button('loading'); + let $pokeSubmit = $form.find("button[type=submit]").button("loading"); - $.post( - $form.attr('action'), - $form.serialize(), - 'json' - ) - .then(function(data) { - if (data.success) { - $('#modal').modal('hide'); - } - }) - .always(function() { - $pokeSubmit.button('reset'); - }); - }) + $.post($form.attr("action"), $form.serialize(), "json") + .then(function (data) { + if (data.success) { + $("#modal").modal("hide"); + } + }) + .always(function () { + $pokeSubmit.button("reset"); + }); + }); }); function openClose(theID) { var elem = document.getElementById(theID); - if( $(elem).is(':visible')) { + if ($(elem).is(":visible")) { $(elem).slideUp(200); - } - else { + } else { $(elem).slideDown(200); } } function showHide(theID) { var elem = document.getElementById(theID); - var edit = document.getElementById("comment-edit-submit-wrapper-" + theID.match('[0-9$]+')); + var edit = document.getElementById("comment-edit-submit-wrapper-" + theID.match("[0-9$]+")); - if ($(elem).is(':visible')) { - if (!$(edit).is(':visible')) { + if ($(elem).is(":visible")) { + if (!$(edit).is(":visible")) { edit.style.display = "block"; - } - else { + } else { elem.style.display = "none"; } - } - else { + } else { elem.style.display = "block"; } } @@ -471,27 +467,27 @@ function showHide(theID) { function showHideEventMap(elm) { // Get the id of the map element - it should be provided through // the atribute "data-map-id". - var mapID = elm.getAttribute('data-map-id'); + var mapID = elm.getAttribute("data-map-id"); // Get translation labels. - var mapshow = elm.getAttribute('data-show-label'); - var maphide = elm.getAttribute('data-hide-label'); + var mapshow = elm.getAttribute("data-show-label"); + var maphide = elm.getAttribute("data-hide-label"); // Change the button labels. if (elm.innerText == mapshow) { - $('#' + elm.id).text(maphide); + $("#" + elm.id).text(maphide); } else { - $('#' + elm.id).text(mapshow); + $("#" + elm.id).text(mapshow); } // Because maps are iframe elements, we cant hide it through css (display: none). // We solve this issue by putting the map outside the screen with css. // So the first time the 'Show map' button is pressed we move the map // element into the screen area. - var mappos = $('#' + mapID).css('position'); + var mappos = $("#" + mapID).css("position"); - if (mappos === 'absolute') { - $('#' + mapID).hide(); - $('#' + mapID).css({position: 'relative', left: 'auto', top: 'auto'}); + if (mappos === "absolute") { + $("#" + mapID).hide(); + $("#" + mapID).css({ position: "relative", left: "auto", top: "auto" }); openClose(mapID); } else { openClose(mapID); @@ -501,18 +497,22 @@ function showHideEventMap(elm) { function justifyPhotos() { justifiedGalleryActive = true; - $('#photo-album-contents').justifiedGallery({ - margins: 3, - border: 0, - sizeRangeSuffixes: { - 'lt48': '-6', - 'lt80': '-5', - 'lt300': '-4', - 'lt320': '-2', - 'lt640': '-1', - 'lt1024': '-0' - } - }).on('jg.complete', function(e){ justifiedGalleryActive = false; }); + $("#photo-album-contents") + .justifiedGallery({ + margins: 3, + border: 0, + sizeRangeSuffixes: { + lt48: "-6", + lt80: "-5", + lt300: "-4", + lt320: "-2", + lt640: "-1", + lt1024: "-0", + }, + }) + .on("jg.complete", function (e) { + justifiedGalleryActive = false; + }); } // Load a js script to the html head. @@ -525,9 +525,9 @@ function loadScript(url, callback) { oscript.remove(); } // Adding the script tag to the head as suggested before. - var head = document.getElementsByTagName('head')[0]; - var script = document.createElement('script'); - script.type = 'text/javascript'; + var head = document.getElementsByTagName("head")[0]; + var script = document.createElement("script"); + script.type = "text/javascript"; script.src = url; // Then bind the event to the callback function. @@ -541,44 +541,45 @@ function loadScript(url, callback) { // Does we need a ? or a & to append values to a url function qOrAmp(url) { - if(url.search('\\?') < 0) { - return '?'; + if (url.search("\\?") < 0) { + return "?"; } else { - return '&'; + return "&"; } } String.prototype.normalizeLink = function () { - var ret = this.replace('https:', 'http:'); - var ret = ret.replace('//www', '//'); + var ret = this.replace("https:", "http:"); + var ret = ret.replace("//www", "//"); return ret.rtrim(); }; function cleanContactUrl(url) { var parts = parseUrl(url); - if(! ("scheme" in parts) || ! ("host" in parts)) { + if (!("scheme" in parts) || !("host" in parts)) { return url; } - var newUrl =parts["scheme"] + "://" + parts["host"]; + var newUrl = parts["scheme"] + "://" + parts["host"]; - if("port" in parts) { + if ("port" in parts) { newUrl += ":" + parts["port"]; } - if("path" in parts) { + if ("path" in parts) { newUrl += parts["path"]; } -// if(url != newUrl) { -// console.log("Cleaned contact url " + url + " to " + newUrl); -// } + // if(url != newUrl) { + // console.log("Cleaned contact url " + url + " to " + newUrl); + // } return newUrl; } -function parseUrl (str, component) { // eslint-disable-line camelcase +function parseUrl(str, component) { + // eslint-disable-line camelcase // discuss at: http://locutusjs.io/php/parse_url/ // original by: Steven Levithan (http://blog.stevenlevithan.com) // reimplemented by: Brett Zamir (http://brett-zamir.me) @@ -603,82 +604,91 @@ function parseUrl (str, component) { // eslint-disable-line camelcase // example 4: parse_url('https://gooduser:secretpassword@www.example.com/a@b.c/folder?foo=bar') // returns 4: { scheme: 'https', host: 'www.example.com', path: '/a@b.c/folder', query: 'foo=bar', user: 'gooduser', pass: 'secretpassword' } - var query + var query; - var mode = (typeof require !== 'undefined' ? require('../info/ini_get')('locutus.parse_url.mode') : undefined) || 'php' + var mode = + (typeof require !== "undefined" ? require("../info/ini_get")("locutus.parse_url.mode") : undefined) || "php"; var key = [ - 'source', - 'scheme', - 'authority', - 'userInfo', - 'user', - 'pass', - 'host', - 'port', - 'relative', - 'path', - 'directory', - 'file', - 'query', - 'fragment' - ] + "source", + "scheme", + "authority", + "userInfo", + "user", + "pass", + "host", + "port", + "relative", + "path", + "directory", + "file", + "query", + "fragment", + ]; // For loose we added one optional slash to post-scheme to catch file:/// (should restrict this) var parser = { - php: new RegExp([ - '(?:([^:\\/?#]+):)?', - '(?:\\/\\/()(?:(?:()(?:([^:@\\/]*):?([^:@\\/]*))?@)?([^:\\/?#]*)(?::(\\d*))?))?', - '()', - '(?:(()(?:(?:[^?#\\/]*\\/)*)()(?:[^?#]*))(?:\\?([^#]*))?(?:#(.*))?)' - ].join('')), - strict: new RegExp([ - '(?:([^:\\/?#]+):)?', - '(?:\\/\\/((?:(([^:@\\/]*):?([^:@\\/]*))?@)?([^:\\/?#]*)(?::(\\d*))?))?', - '((((?:[^?#\\/]*\\/)*)([^?#]*))(?:\\?([^#]*))?(?:#(.*))?)' - ].join('')), - loose: new RegExp([ - '(?:(?![^:@]+:[^:@\\/]*@)([^:\\/?#.]+):)?', - '(?:\\/\\/\\/?)?', - '((?:(([^:@\\/]*):?([^:@\\/]*))?@)?([^:\\/?#]*)(?::(\\d*))?)', - '(((\\/(?:[^?#](?![^?#\\/]*\\.[^?#\\/.]+(?:[?#]|$)))*\\/?)?([^?#\\/]*))', - '(?:\\?([^#]*))?(?:#(.*))?)' - ].join('')) - } + php: new RegExp( + [ + "(?:([^:\\/?#]+):)?", + "(?:\\/\\/()(?:(?:()(?:([^:@\\/]*):?([^:@\\/]*))?@)?([^:\\/?#]*)(?::(\\d*))?))?", + "()", + "(?:(()(?:(?:[^?#\\/]*\\/)*)()(?:[^?#]*))(?:\\?([^#]*))?(?:#(.*))?)", + ].join(""), + ), + strict: new RegExp( + [ + "(?:([^:\\/?#]+):)?", + "(?:\\/\\/((?:(([^:@\\/]*):?([^:@\\/]*))?@)?([^:\\/?#]*)(?::(\\d*))?))?", + "((((?:[^?#\\/]*\\/)*)([^?#]*))(?:\\?([^#]*))?(?:#(.*))?)", + ].join(""), + ), + loose: new RegExp( + [ + "(?:(?![^:@]+:[^:@\\/]*@)([^:\\/?#.]+):)?", + "(?:\\/\\/\\/?)?", + "((?:(([^:@\\/]*):?([^:@\\/]*))?@)?([^:\\/?#]*)(?::(\\d*))?)", + "(((\\/(?:[^?#](?![^?#\\/]*\\.[^?#\\/.]+(?:[?#]|$)))*\\/?)?([^?#\\/]*))", + "(?:\\?([^#]*))?(?:#(.*))?)", + ].join(""), + ), + }; - var m = parser[mode].exec(str) - var uri = {} - var i = 14 + var m = parser[mode].exec(str); + var uri = {}; + var i = 14; while (i--) { if (m[i]) { - uri[key[i]] = m[i] + uri[key[i]] = m[i]; } } if (component) { - return uri[component.replace('PHP_URL_', '').toLowerCase()] + return uri[component.replace("PHP_URL_", "").toLowerCase()]; } - if (mode !== 'php') { - var name = (typeof require !== 'undefined' ? require('../info/ini_get')('locutus.parse_url.queryKey') : undefined) || 'queryKey' - parser = /(?:^|&)([^&=]*)=?([^&]*)/g - uri[name] = {} - query = uri[key[12]] || '' + if (mode !== "php") { + var name = + (typeof require !== "undefined" ? require("../info/ini_get")("locutus.parse_url.queryKey") : undefined) || + "queryKey"; + parser = /(?:^|&)([^&=]*)=?([^&]*)/g; + uri[name] = {}; + query = uri[key[12]] || ""; query.replace(parser, function ($0, $1, $2) { if ($1) { - uri[name][$1] = $2 + uri[name][$1] = $2; } - }) + }); } - delete uri.source - return uri + delete uri.source; + return uri; } // trim function to replace whithespace after the string -String.prototype.rtrim = function() { - var trimmed = this.replace(/\s+$/g, ''); +String.prototype.rtrim = function () { + var trimmed = this.replace(/\s+$/g, ""); return trimmed; }; @@ -695,34 +705,40 @@ function scrollToItem(elementId) { return; } - var $el = $('#' + elementId + ' > .media'); + var $el = $("#" + elementId + " > .media"); // Test if the Item exists if (!$el.length) { return; } // Define the colors which are used for highlighting - var colWhite = {backgroundColor:'#F5F5F5'}; - var colShiny = {backgroundColor:'#FFF176'}; + var colWhite = { backgroundColor: "#F5F5F5" }; + var colShiny = { backgroundColor: "#FFF176" }; // Get the Item Position (we need to substract 100 to match correct position var itemPos = $el.offset().top - 100; // Scroll to the DIV with the ID (GUID) - $('html, body').animate({ - scrollTop: itemPos - }, 400).promise().done( function() { - // Highlight post/commenent with ID (GUID) - $el.animate(colWhite, 1000).animate(colShiny).animate({backgroundColor: 'transparent'}, 600); - }); + $("html, body") + .animate( + { + scrollTop: itemPos, + }, + 400, + ) + .promise() + .done(function () { + // Highlight post/commenent with ID (GUID) + $el.animate(colWhite, 1000).animate(colShiny).animate({ backgroundColor: "transparent" }, 600); + }); } // format a html string to pure text function htmlToText(htmlString) { // Replace line breaks with spaces - var text = htmlString.replace(/
/g, ' '); + var text = htmlString.replace(/
/g, " "); // Strip the text out of the html string - text = text.replace(/<[^>]*>/g, ''); + text = text.replace(/<[^>]*>/g, ""); return text; } @@ -736,16 +752,16 @@ function htmlToText(htmlString) { * @param {boolean} un Whether to perform an activity removal instead of creation */ function doLikeAction(ident, verb, un) { - if (verb.indexOf('attend') === 0) { - $('.item-' + ident + ' .button-event:not(#' + verb + '-' + ident + ')').removeClass('active'); + if (verb.indexOf("attend") === 0) { + $(".item-" + ident + " .button-event:not(#" + verb + "-" + ident + ")").removeClass("active"); } - $('#' + verb + '-' + ident).toggleClass('active'); + $("#" + verb + "-" + ident).toggleClass("active"); dolike(ident, verb, un); } // Decodes a hexadecimally encoded binary string -function hex2bin (s) { +function hex2bin(s) { // discuss at: http://locutus.io/php/hex2bin/ // original by: Dumitru Uzun (http://duzun.me) // example 1: hex2bin('44696d61') @@ -757,7 +773,7 @@ function hex2bin (s) { var ret = []; var i = 0; var l; - s += ''; + s += ""; for (l = s.length; i < l; i += 2) { var c = parseInt(s.substr(i, 1), 16); @@ -771,7 +787,7 @@ function hex2bin (s) { } // Convert binary data into hexadecimal representation -function bin2hex (s) { +function bin2hex(s) { // From: http://phpjs.org/functions // + original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net) // + bugfixed by: Onno Marsman @@ -782,7 +798,10 @@ function bin2hex (s) { // * example 2: bin2hex(String.fromCharCode(0x00)); // * returns 2: '00' - var i, l, o = "", n; + var i, + l, + o = "", + n; s += ""; @@ -797,14 +816,17 @@ function bin2hex (s) { // Dropdown menus with the class "dropdown-head" will display the active tab // as button text function toggleDropdownText(elm) { - $(elm).closest(".dropdown").find('.btn').html($(elm).html() + ' '); - $(elm).closest(".dropdown").find('.btn').val($(elm).data('value')); - $(elm).closest("ul").children("li").show(); - $(elm).parent("li").hide(); + $(elm) + .closest(".dropdown") + .find(".btn") + .html($(elm).html() + ' '); + $(elm).closest(".dropdown").find(".btn").val($(elm).data("value")); + $(elm).closest("ul").children("li").show(); + $(elm).parent("li").hide(); } // Check if element does have a specific class function hasClass(elem, cls) { - return (" " + elem.className + " " ).indexOf( " "+cls+" " ) > -1; + return (" " + elem.className + " ").indexOf(" " + cls + " ") > -1; } // @license-end diff --git a/view/theme/frio/scheme/black.css b/view/theme/frio/scheme/black.css index 4f58f8c44a..0c29f2d592 100644 --- a/view/theme/frio/scheme/black.css +++ b/view/theme/frio/scheme/black.css @@ -18,7 +18,7 @@ } #topbar-first #nav-notifications-menu li.notification-unseen { - background-color: $nav_icon_hover_color; + background-color: $nav_icon_hover_color; } #topbar-second { @@ -29,17 +29,20 @@ border_color: $link_color; } -.dropdown-menu, .account .dropdown-menu { +.dropdown-menu, +.account .dropdown-menu { background-color: $background_color; } -.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover { +.dropdown-menu > li > a:focus, +.dropdown-menu > li > a:hover { color: $link_color; } .account .dropdown-menu li { border-color: $background_color; } -.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover { +.dropdown-menu > li > a:focus, +.dropdown-menu > li > a:hover { background-image: none; background-color: rgba(232, 232, 232, $contentbg_transp); } @@ -61,9 +64,9 @@ border-color: #a0a0a0; } -input[type=text], -input[type=submit], -button[type=submit]:not(.btn), +input[type="text"], +input[type="submit"], +button[type="submit"]:not(.btn), select, textarea, .form-control { @@ -73,11 +76,13 @@ textarea, box-shadow: 0 0 3px #dadada; -webkit-box-shadow: 0 0 3px #dadada; } -input[type=range] { +input[type="range"] { box-shadow: none; } -.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { +.form-control[disabled], +.form-control[readonly], +fieldset[disabled] .form-control { background-color: $background_color; color: $font_color_darker; } @@ -87,17 +92,18 @@ input[type=range] { background-color: $background_color; } -.nav-tabs>li.active>a, -.nav-tabs>li.active>a:focus, -.nav-tabs>li.active>a:hover, -main .nav-tabs>li.active>a, -main .nav-tabs>li.active>a:focus, -main .nav-tabs>li.active>a:hover { +.nav-tabs > li.active > a, +.nav-tabs > li.active > a:focus, +.nav-tabs > li.active > a:hover, +main .nav-tabs > li.active > a, +main .nav-tabs > li.active > a:focus, +main .nav-tabs > li.active > a:hover { background-color: $nav_bg; color: $font_color_darker; } -.nav > li > a:focus, .nav > li > a:hover { +.nav > li > a:focus, +.nav > li > a:hover { background-color: rgba(238, 238, 238, $contentbg_transp); } @@ -126,7 +132,8 @@ main .nav-tabs>li.active>a:hover { color: $font_color; } -.pagination>li>a:hover, .pagination>li>span:hover { +.pagination > li > a:hover, +.pagination > li > span:hover { background-color: $nav_bg; } @@ -139,7 +146,8 @@ main .nav-tabs>li.active>a:hover { color: $font_color; text-shadow: 0 1px 0 $nav_bg; } -.close:focus, .close:hover { +.close:focus, +.close:hover { color: $link_color; } @@ -174,19 +182,23 @@ main .nav-tabs>li.active>a:hover { background: none; color: $font_color_darker; } -.btn.focus, .btn:focus, .btn:hover { +.btn.focus, +.btn:focus, +.btn:hover { color: $font_color; } -.btn-default:focus, .btn-default:hover { +.btn-default:focus, +.btn-default:hover { background: $nav_bg; } -.btn-default.active, .btn-default:active { +.btn-default.active, +.btn-default:active { background-color: $nav_bg; color: $font_color; } -button[type=submit]:not(.btn), -input[type=submit], +button[type="submit"]:not(.btn), +input[type="submit"], .btn.btn-primary { border: 1px solid $link_color; } @@ -196,7 +208,7 @@ input[type=submit], color: $link_color; } -.panel-default>.panel-heading { +.panel-default > .panel-heading { background: none; background-color: $nav_bg; color: $font_color; @@ -285,7 +297,8 @@ input[type=submit], box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5); } -.hovercard, .hover-card-footer { +.hovercard, +.hover-card-footer { background-color: $nav_bg; } .hovercard.top > .arrow:after { @@ -305,21 +318,20 @@ input[type=submit], color: inherit; } - code { color: $font_color; - background-color: rgba(255, 255, 255, .2); + background-color: rgba(255, 255, 255, 0.2); } pre { color: $font_color_darker; - background-color: rgba(255, 255, 255, .05); + background-color: rgba(255, 255, 255, 0.05); } legend { color: $font_color; } -.table-striped>tbody>tr:nth-of-type(odd), +.table-striped > tbody > tr:nth-of-type(odd), .table-hover > tbody > tr:hover, .adminpage .table-hover > tbody > tr:hover + tr.details { background-color: $nav_bg; @@ -334,7 +346,8 @@ section > .generic-page-wrapper, .delegation-content-wrapper, .notes-content-wrapper, .message-content-wrapper, -.apps-content-wrapper, #adminpage, +.apps-content-wrapper, +#adminpage, .delegate-content-wrapper, .uexport-content-wrapper, .dfrn_request-content-wrapper, @@ -348,13 +361,12 @@ section > .generic-page-wrapper, .panel, aside .widget, .nav-container .widget, -#back-to-top -{ +#back-to-top { box-shadow: 0 0 3px $link_color; -webkit-box-shadow: 0 0 3px $link_color; } -input[type=text].tt-input { +input[type="text"].tt-input { box-shadow: none; } diff --git a/view/theme/frio/scheme/dark.css b/view/theme/frio/scheme/dark.css index c9ba99c7f2..1c3736dd3e 100644 --- a/view/theme/frio/scheme/dark.css +++ b/view/theme/frio/scheme/dark.css @@ -18,7 +18,7 @@ } #topbar-first #nav-notifications-menu li.notification-unseen { - background-color: $nav_icon_hover_color; + background-color: $nav_icon_hover_color; } #topbar-second { @@ -29,17 +29,20 @@ border_color: $link_color; } -.dropdown-menu, .account .dropdown-menu { +.dropdown-menu, +.account .dropdown-menu { background-color: $background_color; } -.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover { +.dropdown-menu > li > a:focus, +.dropdown-menu > li > a:hover { color: $link_color; } .account .dropdown-menu li { border-color: $background_color; } -.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover { +.dropdown-menu > li > a:focus, +.dropdown-menu > li > a:hover { background-image: none; background-color: rgba(232, 232, 232, $contentbg_transp); } @@ -60,9 +63,9 @@ -webkit-box-shadow: 0 0 3px #dadada; } -input[type=text], -input[type=submit], -button[type=submit]:not(.btn), +input[type="text"], +input[type="submit"], +button[type="submit"]:not(.btn), select, textarea, .form-control { @@ -72,7 +75,7 @@ textarea, box-shadow: 0 0 3px #dadada; -webkit-box-shadow: 0 0 3px #dadada; } -input[type=range] { +input[type="range"] { box-shadow: none; } @@ -88,12 +91,12 @@ input[type=range] { background-color: $background_color; } -.nav-tabs>li.active>a, -.nav-tabs>li.active>a:focus, -.nav-tabs>li.active>a:hover, -main .nav-tabs>li.active>a, -main .nav-tabs>li.active>a:focus, -main .nav-tabs>li.active>a:hover { +.nav-tabs > li.active > a, +.nav-tabs > li.active > a:focus, +.nav-tabs > li.active > a:hover, +main .nav-tabs > li.active > a, +main .nav-tabs > li.active > a:focus, +main .nav-tabs > li.active > a:hover { background-color: $nav_bg; color: $font_color_darker; } @@ -118,8 +121,8 @@ main .nav-tabs>li.active>a:hover { color: $font_color; } -.pagination>li>a:hover, -.pagination>li>span:hover { +.pagination > li > a:hover, +.pagination > li > span:hover { background-color: $nav_bg; } @@ -183,8 +186,8 @@ main .nav-tabs>li.active>a:hover { color: $font_color; } -button[type=submit]:not(.btn), -input[type=submit], +button[type="submit"]:not(.btn), +input[type="submit"], .btn.btn-primary { border: 1px solid $link_color; } @@ -194,7 +197,7 @@ input[type=submit], color: $link_color; } -.panel-default>.panel-heading { +.panel-default > .panel-heading { background: none; background-color: $nav_bg; color: $font_color; @@ -304,27 +307,26 @@ input[type=submit], color: inherit; } - code { color: $font_color; - background-color: rgba(255, 255, 255, .2); + background-color: rgba(255, 255, 255, 0.2); } pre { color: $font_color_darker; - background-color: rgba(255, 255, 255, .05); + background-color: rgba(255, 255, 255, 0.05); } legend { color: $font_color; } -.table-striped>tbody>tr:nth-of-type(odd), +.table-striped > tbody > tr:nth-of-type(odd), .table-hover > tbody > tr:hover, .adminpage .table-hover > tbody > tr:hover + tr.details { background-color: $nav_bg; } -input[type=text].tt-input { +input[type="text"].tt-input { box-shadow: none; } diff --git a/view/theme/frio/scheme/koyu-dark.css b/view/theme/frio/scheme/koyu-dark.css index 7a8e1e99ea..693c4beb07 100644 --- a/view/theme/frio/scheme/koyu-dark.css +++ b/view/theme/frio/scheme/koyu-dark.css @@ -5,37 +5,48 @@ Author : koyu */ -#topbar-first, #topbar-second, body { - background: #111; - border: 0; +#topbar-first, +#topbar-second, +body { + background: #111; + border: 0; } -#topbar-first .dropdown.account > a, #topbar-first .dropdown.account.open > a, #topbar-first .dropdown.account > button, #topbar-first .dropdown.account.open > button, #topbar-first .dropdown.account > :hover, #topbar-first .dropdown.account.open > :hover { - background: #111; - border: 0; +#topbar-first .dropdown.account > a, +#topbar-first .dropdown.account.open > a, +#topbar-first .dropdown.account > button, +#topbar-first .dropdown.account.open > button, +#topbar-first .dropdown.account > :hover, +#topbar-first .dropdown.account.open > :hover { + background: #111; + border: 0; } -.nav-pills .dropdown-menu, .nav-tabs .dropdown-menu, .account .dropdown-menu, .contact-photo-wrapper .dropdown-menu { - background: #111; - -webkit-box-shadow: 0px 0px 69px 4px rgba(0,0,0,0.25); - -moz-box-shadow: 0px 0px 69px 4px rgba(0,0,0,0.25); - box-shadow: 0px 0px 69px 4px rgba(0,0,0,0.25); - border: 0; +.nav-pills .dropdown-menu, +.nav-tabs .dropdown-menu, +.account .dropdown-menu, +.contact-photo-wrapper .dropdown-menu { + background: #111; + -webkit-box-shadow: 0px 0px 69px 4px rgba(0, 0, 0, 0.25); + -moz-box-shadow: 0px 0px 69px 4px rgba(0, 0, 0, 0.25); + box-shadow: 0px 0px 69px 4px rgba(0, 0, 0, 0.25); + border: 0; } -.account .dropdown-menu li, .account .dropdown-menu li:hover { - border: 0; - background: #111; +.account .dropdown-menu li, +.account .dropdown-menu li:hover { + border: 0; + background: #111; } -#topbar-first .topbar-nav .nav-segment>a:hover { - background: #333; +#topbar-first .topbar-nav .nav-segment > a:hover { + background: #333; } .account .dropdown-menu li:hover { - background: #333 !important; + background: #333 !important; } .account .dropdown-menu li.divider { - background: #111; -} \ No newline at end of file + background: #111; +} diff --git a/view/theme/frio/scheme/love-music.css b/view/theme/frio/scheme/love-music.css index 19ce590cb0..39e5359647 100644 --- a/view/theme/frio/scheme/love-music.css +++ b/view/theme/frio/scheme/love-music.css @@ -6,7 +6,7 @@ */ body { - color: #000; + color: #000; } /* @@ -14,25 +14,25 @@ body { */ #topbar-first, nav.navbar { - box-shadow: 0 -1px 5px 2px #000; + box-shadow: 0 -1px 5px 2px #000; } -#topbar-first .nav>li>a:hover, -nav.navbar .nav>li>a:hover { - background-color: #000; - color: #15e3ff; +#topbar-first .nav > li > a:hover, +nav.navbar .nav > li > a:hover { + background-color: #000; + color: #15e3ff; } -#topbar-first .nav>li>a.selected { - background: #e355e0; - color: #000; - padding: 9px; - border-radius: 8px; +#topbar-first .nav > li > a.selected { + background: #e355e0; + color: #000; + padding: 9px; + border-radius: 8px; } #topbar-first #nav-notifications-menu li.notif-entry:hover, -#topbar-second .nav>li>ul>li>a:hover, -#topbar-second .nav>li>ul>li>a.active, -#topbar-second .nav>li>a:hover, -#topbar-second .nav .open>a, -#topbar-second .nav>li.active, +#topbar-second .nav > li > ul > li > a:hover, +#topbar-second .nav > li > ul > li > a.active, +#topbar-second .nav > li > a:hover, +#topbar-second .nav .open > a, +#topbar-second .nav > li.active, .nav-pills .dropdown-menu li:hover, .nav-tabs .dropdown-menu li:hover, .account .dropdown-menu li:hover, @@ -44,29 +44,31 @@ nav.navbar .nav>li>a:hover { aside .widget li:hover, aside .widget li.selected, .nav-container .widget li:hover { - border-left:3px solid #15e3ff !important; + border-left: 3px solid #15e3ff !important; } .panel, aside .widget, .nav-container .widget, -#profile-page, .photos-content-wrapper, +#profile-page, +.photos-content-wrapper, .settings-content-wrapper { - border-style: solid solid solid solid; - border-width: 1px; - border-color: #DDDDDD; - box-shadow: none; - border-radius: 15px; - color: #000; + border-style: solid solid solid solid; + border-width: 1px; + border-color: #dddddd; + box-shadow: none; + border-radius: 15px; + color: #000; } -aside .widget li a, aside .widget li a:hover, +aside .widget li a, +aside .widget li a:hover, .panel .panel-body .wall-item-content, .toplevel_item .wall-item-container .btn-link { - color: #000; + color: #000; } .wall-item-content a:hover, -nav.navbar .navbar-brand{ - color: #15e3ff !important; +nav.navbar .navbar-brand { + color: #15e3ff !important; } diff --git a/view/theme/frio/scheme/plusminus.css b/view/theme/frio/scheme/plusminus.css index 09def72dd7..c4ffcf011c 100644 --- a/view/theme/frio/scheme/plusminus.css +++ b/view/theme/frio/scheme/plusminus.css @@ -9,132 +9,160 @@ */ body { - background: url(scheme/plusminus.jpg); - background-repeat: no-repeat; - background-size: cover; - background-attachment: fixed; - height: auto; + background: url(scheme/plusminus.jpg); + background-repeat: no-repeat; + background-size: cover; + background-attachment: fixed; + height: auto; } -aside .widget, .form-control, .panel, .nav-container, .wall-item-content, .e-content, .p-name, .topbar, post, shiny, tread-wrapper, #topbar-second { - color: #000; - background-color: #f5f5f5; +aside .widget, +.form-control, +.panel, +.nav-container, +.wall-item-content, +.e-content, +.p-name, +.topbar, +post, +shiny, +tread-wrapper, +#topbar-second { + color: #000; + background-color: #f5f5f5; } -.form-control { - font-family: ".SFNSText-Regular","San Francisco","Roboto","Segoe UI","Helvetica Neue","Lucida Grande",Helvetica,Arial,sans-serif; +.form-control { + font-family: ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", + Helvetica, Arial, sans-serif; } #topbar-first #nav-notifications-menu li.notification-unseen { - border-left: 3px solid #e3eff3; - background-color: antiquewhite; + border-left: 3px solid #e3eff3; + background-color: antiquewhite; } #topbar-first #nav-notifications-menu li.notif-entry { - padding: 0px; + padding: 0px; } .birthday-notice { - background-color:#cc0000; - color: white; + background-color: #cc0000; + color: white; } #birthday-title { - background-color:#ff0000; - color: white; - text-indent: 6px; + background-color: #ff0000; + color: white; + text-indent: 6px; } .birthday-list:before { - content: "\1F382 "; + content: "\1F382 "; } -.birthday-list{ - margin: 1px; - color: black; - background-color: yellow; - text-indent: 10px; - border-radius: 5px; +.birthday-list { + margin: 1px; + color: black; + background-color: yellow; + text-indent: 10px; + border-radius: 5px; } -#event-notice{ - color: white; - background-color: #004c5b; - text-indent: 2px; +#event-notice { + color: white; + background-color: #004c5b; + text-indent: 2px; } -#event-title{ - color: whitesmoke; - background-color: #006c83; - text-indent: 6px; +#event-title { + color: whitesmoke; + background-color: #006c83; + text-indent: 6px; } .event-list:before { - content: "\1F5D3 "; + content: "\1F5D3 "; } .event-list { - margin: 1px; - color: black; - background-color: #00c7f0; - text-indent: 10px; - border-radius: 5px; + margin: 1px; + color: black; + background-color: #00c7f0; + text-indent: 10px; + border-radius: 5px; } .panel .panel-body { - padding-top: 1px; - padding-bottom: 1px; - padding-left:5px; - padding-right:5px; - border: 1px; + padding-top: 1px; + padding-bottom: 1px; + padding-left: 5px; + padding-right: 5px; + border: 1px; } .wall-item-network { - font-size: 12px; + font-size: 12px; } -.wall-item-content .clearfix .post .comment-container .well .well-sm .wall-item-body .e-content .p-name .media .comment .wall-item-bottom .wall-item-links .wall-item-tags .wall-item-actions .wall-item-responses #hr { - box-sizing: border-box; - margin-top: 0px; - margin-bottom: 0px; - border:0px; - padding:0px; - color:black; +.wall-item-content + .clearfix + .post + .comment-container + .well + .well-sm + .wall-item-body + .e-content + .p-name + .media + .comment + .wall-item-bottom + .wall-item-links + .wall-item-tags + .wall-item-actions + .wall-item-responses + #hr { + box-sizing: border-box; + margin-top: 0px; + margin-bottom: 0px; + border: 0px; + padding: 0px; + color: black; } .wall-spacer { - height: 0px; + height: 0px; } /* Contact-page */ #connect-desc { - color: grey; + color: grey; } .search-input.form-control.form-search { - background-color: #ebebeb; - border-color:lightgrey; + background-color: #ebebeb; + border-color: lightgrey; } .search-input.form-control.form-search:focus { - background-color: white; - border-color:grey; + background-color: white; + border-color: grey; } /* Addon-Showmore*/ .showmore-wrap { - background-color:lightgrey; - text-decoration: underline; - text-decoration-color: black; - text-decoration-style: wavy; + background-color: lightgrey; + text-decoration: underline; + text-decoration-color: black; + text-decoration-style: wavy; } /* New compose popup */ .profile-jot-net { - background: #dff0d8; + background: #dff0d8; } .profile-jot-net summary { - color: #3c763d; - font-weight: bold; + color: #3c763d; + font-weight: bold; } diff --git a/view/theme/frio/templates/nav.tpl b/view/theme/frio/templates/nav.tpl index 705f02396a..e448313ea8 100644 --- a/view/theme/frio/templates/nav.tpl +++ b/view/theme/frio/templates/nav.tpl @@ -1,265 +1,371 @@ {{* we have modified the navmenu (look at function frio_remote_nav() ) to have remote links. $nav.userinfo is a new variable and replaces the original $userinfo variable *}} {{if $nav.userinfo}} -
- {{* {{$langselector}} *}} +
+ {{* {{$langselector}} *}} -
{{$sitelocation}}
- -
-
+ + + {{* This is the right part of the NavBar. It includes the search and the user menu *}} +
+ +
{{* End of right navbar *}} + + {{* The usermenu dropdown for the mobile view. It is called via the buttons. Have a look at the top of this file *}} + + +
+
+ {{/if}} {{* The navbar for users which are not logged in *}} {{if $nav.userinfo == ''}} -
- + {{/if}} @@ -269,7 +375,8 @@ @@ -287,17 +394,18 @@ {{*The second part of the notifications dropdown menu. It handles the notifications *}} {{if $nav.notifications}} - + {{/if}} {{* This is the mask of the firefox logo. We set the background of #logo-img to the user icon color and apply this mask to it @@ -305,7 +413,9 @@ The result is a friendica logo in the user icon color.*}} - + + - + \ No newline at end of file