/*
//================================================

Xiao Browser
Effortlessly open any website in your web browser's sidebar – streamline your workflow instantly!
Copyright (C) 2024 Stefan vd
      Copyright 2024 183600
www.stefanvd.net

This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License
as published by the Free Software Foundation; either version 2
of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.


To view a copy of this license, visit http://creativecommons.org/licenses/GPL/2.0/

    本项目基于chrome-extensions-samples-main修改，并且此文件可能修改了，以下为原项目的版权声明
 Copyright 2023 Google LLC

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

     https://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
//================================================
*/

/* Light mode */
:root {
  --ext-primary-background: #fff;
  --ext-primary-font-color: #000;
  --ext-secundar-background: #efefef;
  --ext-secundar-background-hover: #d9d9d9;
  --ext-border-line: #dddddd;
  --ext-dropmenu-li-background-hover: #EEEEEE;
  --ext-dropmenu-li-background-active: #F5F5F5;
  --ext-button-color: #000;
  --ext-button-background: rgba(244, 244, 244, .4);
  --ext-button-background-active: rgba(158, 158, 158, .2);
  --ext-button-background-hover: rgba(158, 158, 158, .4);
  --ext-svg-fill-color-hover: #d9d9d9;
  --ext-close-color-hover: #d9d9d9;
  --ext-tab-background-color: #f2f2f2;
  --ext-tab-active-background-color: #ffffff;
  --ext-tab-inactive-background-color: #dddddd;
  --ext-tab-active-hover-background-color: #ffffff9b;
  --ext-tab-inactive-hover-background-color: #dddddd9b;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --ext-primary-background: #232323;
    --ext-primary-font-color: #fff;
    --ext-secundar-background: #2a2a2a;
    --ext-secundar-background-hover: #3c3c3c;
    --ext-border-line: #37383a;
    --ext-dropmenu-li-background-hover: #424242;
    --ext-dropmenu-li-background-active: #4e4e4e;
    --ext-button-color: #fff;
    --ext-button-background: rgba(244, 244, 244, .4);
    --ext-button-background-active: rgba(158, 158, 158, .2);
    --ext-button-background-hover: rgba(158, 158, 158, .4);
    --ext-svg-fill-color-hover: #474747;
    --ext-close-color-hover: #474747;
    --ext-tab-background-color: #2b2b2b;
    --ext-tab-active-background-color: #222222;
    --ext-tab-inactive-background-color: #000000;
    --ext-tab-active-hover-background-color: #2222229b;
    --ext-tab-inactive-hover-background-color: #0000009b;
  }
}

body {
  margin: 0;
  padding: 0;
  width: 700px;
  /*height: 600px;*/
  background: var(--ext-primary-background);
  color: var(--ext-primary-font-color);
  overflow: hidden;
  font-family: Arial, sans-serif;
}

.hostpermission {
  padding: 30px;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  background: var(--ext-primary-background);
  color: var(--ext-primary-font-color);
  box-sizing: border-box;
  font-family: verdana;
  line-height: 24px;
  z-index: 20000
}

.hostpermission div {
  flex-direction: column;
  align-items: initial;
  justify-content: center;
  display: flex;
  gap: 16px
}

/* button */
.hostpermission button {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background: 0 0;
  border: none;
  border-radius: 2px;
  color: var(--ext-button-color);
  position: relative;
  height: 36px;
  margin: 0;
  min-width: 64px;
  padding: 0 16px;
  display: inline-block;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0;
  overflow: hidden;
  will-change: box-shadow;
  transition: box-shadow .2s cubic-bezier(.4, 0, 1, 1), background-color .2s cubic-bezier(.4, 0, .2, 1), color .2s cubic-bezier(.4, 0, .2, 1);
  outline: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  line-height: 36px;
  vertical-align: middle;
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2);
  background-color: var(--ext-button-background)
}

.hostpermission button:active {
  background-color: var(--ext-button-background-active)
}

.hostpermission button:hover {
  background-color: var(--ext-button-background-hover)
}

iframe {
  border: none;
  width: 100%;
  height: 596px;
  box-sizing: border-box;
  margin: 0px
}

#webcontent {
  width: 700px;
  /*height: 600px;*/
}

#webcontent iframe {
  border: 0
}

.blurlayer {
  z-index: 2000;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-color: rgba(0, 0, 0, 0.5)
}

#navbar {
  /*z-index: 2000;*/
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 48px;
  /*border: 2px dashed #ccc;*/
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2500;
  bottom: 0;
  right: 0;
  box-sizing: border-box;
  border-radius: 0px
}

#navbar.show {
  display: flex
}

#navbar.hidden {
  display: none
}

#drag-drop-info {
  gap: 8px;
  flex-direction: column;
  font-size: 14px;
  justify-content: center;
  align-items: center;
  height: 100%
}

#drag-drop-info.show {
  display: flex
}

#drag-drop-info.hidden {
  display: none
}

#drag-drop-info .placeholder {
  font-family: Arial
}

#drag-drop-zone {
  width: 100%;
  height: 100%;
  border: 2px dashed #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2500;
  bottom: 0;
  right: 0;
  box-sizing: border-box;
  border-radius: 18px
}

#drag-drop-zone.show {
  display: flex
}

#drag-drop-zone.hidden {
  display: none
}

#stefanvdpromo {
  z-index: 2600;
  font-family: Helvetica, Arial, sans-serif;
  margin: auto;
  width: 305px;
  position: fixed;
  bottom: 50px;
  left: 0;
  right: 0;
  background-color: #ffffff;
  border: solid #dadce0 1px;
  border-radius: 24px;
  box-sizing: border-box;
  color: #000000
}

#stefanvdpromo .box {
  display: flex;
  flex-direction: row;
  height: 30px;
  justify-content: center;
  align-items: center;
  gap: 8px
}

#stefanvdpromo a,
#stefanvdpromo a:hover,
#stefanvdpromo a:visited {
  color: rgb(25 103 210)
}

#stefanvdpromo .red {
  color: red;
  padding-inline-start: 8px
}

#stefanvdpromo .close {
  border-radius: 20px;
  width: 20px;
  height: 20px;
  color: #5f6367;
  margin-inline-end: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none
}

#stefanvdpromo .close:hover {
  background: #e8e8e9
}

.navigation {
  box-sizing: border-box;
  padding: 0px 10px;
  height: 48px;
  width: 100%;
  z-index: 2200;
  display: flex;
  align-items: center;
  gap: 8px
}

.clean .navigation {
  display: none
}

.web {
  display: flex;
  width: 700px;
  /*height: 600px;*/
  overflow-x: auto;
}

.container {
  display: flex;
  flex-direction: column;
  /* height: 100%; */
  /* justify-content: space-between */
}

.container.top {
  flex-direction: column-reverse
}

.container.bottom {
  flex-direction: column
}

.container.top iframe {
  border-top: 1px solid var(--ext-border-line)
}

.container.bottom iframe {
  border-bottom: 1px solid var(--ext-border-line)
}

#searchbar {
  width: 100%;
  margin: 0;
  padding: 4px 10px;
  outline: none;
  border: 1px solid var(--ext-border-line);
  border-radius: 30px;
  height: 30px
}

#btngo {
  display: flex;
  height: 30px;
  min-width: 40px;
  background: transparent;
  border: 0;
  align-items: center;
  justify-content: center;
  border-radius: 30px
}

#btngo:hover {
  background: var(--ext-svg-fill-color-hover);
  cursor: pointer
}

#btnhome {
  display: flex;
  height: 30px;
  width: 30px;
  min-width: 30px;
  background: transparent;
  border: 0;
  align-items: center;
  justify-content: center;
  border-radius: 30px
}

#btnprev {
  height: 30px;
  width: 30px;
  min-width: 30px;
  background: transparent;
  border: 0;
  align-items: center;
  justify-content: center;
  border-radius: 30px
}

#btnnext {
  height: 30px;
  width: 30px;
  min-width: 30px;
  background: transparent;
  border: 0;
  align-items: center;
  justify-content: center;
  border-radius: 30px
}

#btnreload {
  height: 30px;
  width: 30px;
  min-width: 30px;
  background: transparent;
  border: 0;
  align-items: center;
  justify-content: center;
  border-radius: 30px
}

#btncopy {
  height: 30px;
  width: 30px;
  min-width: 30px;
  background: transparent;
  border: 0;
  align-items: center;
  justify-content: center;
  border-radius: 30px
}

#btntab {
  height: 30px;
  width: 30px;
  min-width: 30px;
  background: transparent;
  border: 0;
  align-items: center;
  justify-content: center;
  border-radius: 30px
}

#btnbookmarks {
  height: 30px;
  width: 30px;
  min-width: 30px;
  background: transparent;
  border: 0;
  align-items: center;
  justify-content: center;
  border-radius: 30px
}

#btnprev:hover,
#btnnext:hover,
#btnreload:hover,
#btnhome:hover,
#btntab:hover,
#btncopy:hover,
#btnbookmarks:hover {
  background: var(--ext-svg-fill-color-hover);
  cursor: pointer
}

.icon {
  display: flex
}

.icon svg {
  fill: var(--ext-primary-font-color)
}

#menubookmarks {
  position: absolute;
  left: 10px;
  z-index: 3000
}

.top #menubookmarks {
  top: 40px
}

.bottom #menubookmarks {
  bottom: 40px
}

#menubookmarks .showitem {
  display: block
}

#menubookmarks .hideitem {
  display: none
}

#menubookmarks ul:empty {
  display: none
}

#menubookmarks ul {
  border-radius: 4px;
  background: var(--ext-primary-background);
  list-style: none;
  padding: 10px 0;
  margin: 0;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 8px 0 rgba(0, 0, 0, 0.12)
}

#menubookmarks ul li {
  position: relative;
  height: 48px;
  user-select: none;
  width: 100%;
  display: flex
}

#menubookmarks ul li a {
  display: inline-block;
  height: 100%;
  line-height: 48px;
  user-select: none;
  padding: 0 16px;
  color: var(--ext-primary-font-color);
  cursor: pointer;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%
}

#menubookmarks ul li a img {
  display: inline-block;
  vertical-align: middle
}

#menubookmarks ul li a div {
  display: initial;
  margin-left: 8px;
  vertical-align: middle
}

#menubookmarks ul li span {
  padding-left: 16px;
  color: var(--ext-primary-font-color);
  cursor: pointer;
  display: flex;
  justify-content: flex-start;
  align-items: center
}

#menubookmarks ul a:hover,
#menubookmarks ul span:hover {
  background-color: var(--ext-dropmenu-li-background-hover)
}

#menubookmarks ul a:active,
#menubookmarks ul span:active {
  background-color: var(--ext-dropmenu-li-background-active)
}

#menubookmarks ul ul {
  max-height: 480px;
  overflow: auto;
  position: absolute;
  top: 0;
  background: var(--ext-primary-background);
  z-index: 1;
  right: -200px;
  width: 200px
}

.stefanvdremote {
  overflow: hidden;
  z-index: 2147483647 !important;
  box-shadow: 0px 0px 1px black;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: var(--ext-primary-background);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 230pt;
  opacity: 0.98;
  height: 50pt;
  border-radius: 25pt;
  margin: 0 auto;
  margin-top: 20pt;
  animation: wrapper 4.0s both;
  color: var(--ext-primary-font-color)
}

.stefanvdremote h3 {
  text-align: center;
  margin: 0;
  font-size: 15px;
  padding-top: 10pt;
  animation: h3 2.5s
}

.stefanvdremote p {
  text-align: center;
  margin: 0;
  font-size: 13px;
  color: #888;
  padding-top: 4pt;
  animation: p 2.5s
}

.zoom-panel {
  font-family: Arial;
  gap: 8px;
  z-index: 2500;
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background-color: var(--ext-primary-background);
  padding: 20px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  border-radius: 25px 0 0 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: width 0.3s ease, padding 0.3s ease
}

.zoom-panel.collapsed {
  width: 8px;
  padding: 20px 0px
}

.zoom-button {
  user-select: none;
  background-color: var(--ext-secundar-background);
  color: var(--ext-primary-font-color);
  font-size: 20px;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  transition: background-color 0.3s ease
}

.zoom-button:hover {
  background-color: var(--ext-secundar-background-hover);
}

.zoom-level {
  user-select: none;
  font-size: 14px;
  color: var(--ext-primary-font-color)
}

.collapse-handle {
  width: 8px;
  height: 40px;
  background-color: var(--ext-border-line);
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto
}

.collapse-handle:hover {
  opacity: .8
}

.zoom-panel.collapsed .zoom-button,
.zoom-panel.collapsed .zoom-level {
  display: none
}

/* Begin tabs */
.tab-bar {
  gap: 5px;
  height: 42px;
  overflow-x: hidden;
  overflow-y: hidden;
  display: flex;
  align-items: flex-start;
  background-color: var(--ext-tab-background-color);
  padding: 10px 10px 0px 10px
}

.tab-bar:hover {
  overflow-x: auto
}

.tab {
  user-select: none;
  min-width: fit-content;
  justify-content: space-between;
  display: inline-flex;
  padding: 8px 12px;
  background-color: var(--ext-tab-inactive-background-color);
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  align-items: flex-end;
  border-bottom: 1px solid var(--ext-tab-inactive-background-color)
}

.tab:hover {
  background-color: var(--ext-tab-inactive-hover-background-color);
}

.tab.active:hover {
  background-color: var(--ext-tab-active-hover-background-color);
}

.tab .title {
  padding: 2px;
  cursor: pointer;
  border-radius: 16px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center
}

.tab.active {
  background-color: var(--ext-tab-active-background-color);
  border-bottom: 2px solid #007bff
}

.tab-content {
  display: none;
  padding: 10px
}

.tab-content.active {
  display: block
}

.tab-close {
  font-family: system-ui, sans-serif;
  line-height: 12px;
  text-align: center;
  cursor: pointer;
  margin-left: 5px;
  font-size: 16px;
  border-radius: 16px;
  width: 16px;
  height: 16px;
  padding: 2px
}

.tab-close:hover {
  background: var(--ext-close-color-hover)
}

.add-tab {
  font-family: system-ui, sans-serif;
  cursor: pointer;
  user-select: none;
  font-size: 16px;
  border-radius: 32px;
  min-width: 32px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  line-height: 32px;
  justify-content: center
}

.add-tab:hover {
  background: var(--ext-svg-fill-color-hover)
}

.enablebar {
  top: 48px;
  height: calc(100% - 48px)
}

.regularbar {
  top: 0;
  height: 100%
}

/* End tabs */
@keyframes h3 {
  0% {
    opacity: 0
  }

  50% {
    opacity: 0
  }

  80% {
    opacity: 1;
    transform: scale(1.5) translate(0, 4px)
  }
}

@keyframes p {
  0% {
    opacity: 0
  }

  80% {
    opacity: 0;
    transform: scale(1.5) translate(0, 12px)
  }

  100% {
    opacity: 1;
    transform: scale(1)
  }
}

@keyframes wrapper {
  0% {
    opacity: 0
  }

  20% {
    opacity: 0;
    transform: translate(0, -100px)
  }

  40% {
    opacity: 0.98;
    transform: translate(0, 0)
  }

  80% {
    opacity: 0.98;
    transform: translate(0, 0)
  }

  100% {
    opacity: 0;
    transform: translate(0, -100px)
  }
}

.hidden {
  display: none
}

/* width */
.tab-bar::-webkit-scrollbar {
  width: 10px;
  height: 4px
}

/* Track */
.tab-bar::-webkit-scrollbar-track {
  background: #f1f1f1
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888
}

/* Handle on hover */
.tab-bar::-webkit-scrollbar-thumb:hover {
  background: #555
}

@media print {
  .texttoolbar {
    display: none !important
  }
}

.app {
  display: flex;
  background-color: #ebebeb;
  /*height: 600px;*/
}

.web2 {
  display: flex;
  background-color: #ebebeb;
position:relative;
width:100%;
height:100%;
overflow:hidden;
  /*height: 600px;*/
  /*margin-top: 48px;*/
}

/*.app2 {*/
  /*display: flex;*/
  /*background-color: #ebebeb;*/
  /*height: 600px;*/
/*}*/

.webpage-container2 {
  display: flex;
  width: 700px;
  /*height: 600px;*/
  overflow-x: auto;
}

.toolbar {
  /* display: flex; */
  flex-direction: column;
  background-color: transparent;
  /*height: 600px;*/
  background-color: #ffffff;
}

.menu-button-container {
  display: flex;
  align-items: flex-left;
  justify-content: center;
}

.menu-button-container2 {
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 0;
  position: absolute;
  width: 70px;
  height: 70px;
}

.menu-button {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  border: none;
  cursor: pointer;
  width: 70px;
  height: 70px;
}


.toolbar-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ebebeb;
  border: none;
  cursor: pointer;
  margin-top: 5px;
  width: 50px;
  margin-bottom: 5px;
  height: 50px;
  border-radius: 50%;
}

.custom-page-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ebebeb;
  border: none;
  margin-top: 5px;
  cursor: pointer;
  margin-bottom: 5px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.toolbar-icon {
  width: 20px;
  height: 20px;
}

.mini-browser {
  flex: 1;
  overflow: hidden;
}

.mini-browser iframe {
  width: 100%;
  height: 100%;
}

.menu {
  position: absolute;
  background-color: #ebebeb;
  padding: 10px;
  margin: 30px;
  bottom: 0;
  left: 0;
  /* border: 1px solid #ccc; */
  border-radius: 25px;
  display: none;
  overflow: auto;
  height: 502px;
  width: 630px;
}

/* .bookmark-container {
  overflow-y: scroll;
  overflow: auto;
  height: 200px;
} */

.menu-btn {
  display: flex;
  align-items: center;
  background-color: transparent;
  border: none;
  color: #000000;
  cursor: pointer;
  font-size: 15px;
  height: 20px;
      line-height: 10px;
}

/* .menu-icon {
  width: 20px;
  height: 15px;
  margin-right: 5px;
} */

.bookmark-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  color: #333;
}

.bookmark-item:hover {
  background-color: #f0f0f0;
}

.bookmark-icon {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}
