分享自定义的面板样式
#950
Replies: 23 comments 30 replies
-
|
虽然用户在这里可以互相参考， |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
这个不太好注释，懂 CSS 的人不用注释也懂，不懂 CSS 的用户看到注释了也不一定懂。。而且并不是每个元素都有对应的 CSS 类名，而且以后我可能还会改 |
Beta Was this translation helpful? Give feedback.
-
|
样式上只做了细微的调整，主要还是为了解决一些不知道为什么会出现的奇怪问题。可能是某些Dark mode插件和划词翻译的黑暗模式有冲突，导致关闭黑暗模式后按钮还是黑的，一段时间后按钮和背景直接全变透明了.....鉴于反馈有亿点点麻烦，因此还是决定自己重新覆盖写一下，如果有碰到同样问题的小伙伴可以直接拿来用。以上。
/*这部分是补充原样式的由于继承问题导致的无背景或默认样式被继承样式覆盖的问题*/
.bp3-control input:checked~.bp3-control-indicator{
background-color: rgb(97, 150, 184)!important
}
.bp3-button{
background-color:rgba(245, 245, 245,.8)!important
}
.header{
border-bottom:1.5px solid rgb(230,230,230) !important;
}
.header>.left,.header>.drag-block, .header>.right{
border:none!important;
color:rgb(92, 112, 128)!important
}
/*下面是样式美化*/
#translate-panel {
font-family: Comic Sans MS,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji!important;
background-color:rgba(245, 245, 245,.8) !important;
border-radius:5px !important
}
#translate-panel .body .bp3-card {
margin:2px 2px 15px;
}
#translate-panel .body .bp3-card:last-child {
margin-bottom: 5px;
}
.bp3-card.bp3-elevation-0.result-block {
border-radius: 8px;
padding: 12px 10px 12px;
background-color:rgb(253,253,253,.9)!important
}
.common-result{
margin-left: 10px;
} |
Beta Was this translation helpful? Give feedback.
4 replies
-
|
你说的这个 bug 其实很早就有人报了，只不过我一直没修 😂 #714 |
Beta Was this translation helpful? Give feedback.
-
|
为什么反馈很麻烦。。 |
Beta Was this translation helpful? Give feedback.
-
哈哈哈其实是我懒，而且出了问题若干天后用到的时候才发现，一直处于bug中所以也不好去复盘什么情况下会出现问题，就坦然放弃了 |
Beta Was this translation helpful? Give feedback.
-
虽然不知道什么情况下会出现这个问题，不过看起来好像是Constructed StyleSheet设置的继承覆盖了背景和文字的样式，有空的话可以盘一盘 |
Beta Was this translation helpful? Give feedback.
-
|
@lmk123 @fengwei2002 @Heeeeez 问一下，能否用css调整最大宽度，达到自定义的宽度就自动换行？目前宽度好像是固定的，面板放在右边可以不遮挡原文，但是又太宽了，一下显示不全，还得左右滚动来看 |
Beta Was this translation helpful? Give feedback.
2 replies
-
|
我的面板横向可以拖动的，可以自己调节大小...不清楚你的是什么情况，正常来讲会自动换行 |
Beta Was this translation helpful? Give feedback.
-
|
是会自动换行，只是默认的宽度还是显得过宽，要是能调整就好了 |
Beta Was this translation helpful? Give feedback.
-
2021.5.26 更新
2021.5.25
css style: #app,
#translate-panel,
.bp3-dialog {
/* 浅色模式下的面板样式 */
background-color: #ffffff;
}
#translate-panel .header,
.bp3-button.translate-btn,
.bp3-button.translate-btn:hover,
.bp3-control input:checked ~ .bp3-control-indicator,
.bp3-control:hover input:checked ~ .bp3-control-indicator,
.bp3-menu-item.bp3-intent-primary.bp3-active,
.bp3-menu-item.bp3-intent-primary:hover,
.bp3-submenu
.bp3-popover-target.bp3-popover-open
> .bp3-intent-primary.bp3-menu-item {
background-color: #514cff;
}
.bp3-button.bp3-intent-primary,
.bp3-button {
border-radius: 0;
background-color: #514cff;
background-image: none;
border: none;
color: #fff;
padding: 5px 10px;
transition: 0.3s;
}
.bp3-file-upload-input:after,
.bp3-button.bp3-minimal.bp3-intent-primary,
.bp3-button:not([class*="bp3-intent-"]) {
background-color: transparent;
color: #514cff;
background-image: none;
padding: 5px 10px;
}
.bp3-card .bp3-button.bp3-small:hover {
background-color: 514cff;
border-radius: 10px;
}
.bp3-card .bp3-button.bp3-small .bp3-icon {
color: #514cff;
}
.bp3-card .bp3-button.bp3-small:hover .bp3-icon {
color: #fff;
}
.bp3-file-upload-input,
.bp3-file-upload-input:after {
padding: 0 10px;
border-radius: 0;
}
.bp3-button.bp3-intent-primary:hover,
.bp3-button.bp3-minimal.bp3-intent-primary:hover,
.bp3-button:not([class*="bp3-intent-"]):hover,
.bp3-button:hover {
background-color: #514cffd9;
color: #fff;
}
::-webkit-scrollbar {
width: 0px;
}
#translate-panel .fixed .bp3-collapse {
position: relative;
z-index: 200;
}
.bp3-popover .bp3-popover-content,
.bp3-input,
.bp3-control.bp3-checkbox .bp3-control-indicator {
border-radius: 0;
}
.bp3-control .bp3-control-indicator {
background-image: none;
background-color: #fff;
}
.bp3-control:hover .bp3-control-indicator {
border: 1px solid #514cff;
}
.bp3-button.bp3-minimal.bp3-intent-primary,
a,
a:hover {
color: #514cff;
}
#translate-panel .fixed .bp3-button .bp3-icon,
.bp3-button .bp3-icon-large,
.bp3-button .bp3-icon-standard {
color: #ffffff;
}
#translate-panel textarea,
#translate-panel .bp3-card {
border-radius: 0;
}
.bp3-input.bp3-active,
.bp3-input:focus {
box-shadow: 0 0 0 1px #514cff, 0 0 0 3px rgb(19 124 189 / 30%),
inset 0 1px 1px rgb(16 22 26 / 20%);
}
.bp3-dark #app,
.bp3-dark #translate-panel,
.bp3-dark #translate-panel .header,
.bp3-dark .bp3-control input:checked ~ .bp3-control-indicator,
.bp3-dark .bp3-control:hover input:checked ~ .bp3-control-indicator,
.bp3-dark .bp3-menu-item.bp3-intent-primary.bp3-active,
.bp3-menu-item.bp3-intent-primary:hover,
.bp3-dark
.bp3-submenu
.bp3-popover-target.bp3-popover-open
> .bp3-intent-primary.bp3-menu-item {
/* 深色模式下的面板样式 */
background-color: #141414;
color: rgba(255, 255, 255, 0.85);
}
.bp3-card .bp3-button.bp3-small .bp3-icon {
color: #1890ff;
}
.bp3-dark .bp3-control {
color: rgba(255, 255, 255, 0.85);
}
.bp3-dark .bp3-button.bp3-minimal.bp3-intent-primary,
.bp3-dark a,
a:hover {
color: #1890ff;
}
.bp3-dark #translate-panel .bp3-control input:checked ~ .bp3-control-indicator,
.bp3-dark #translate-panel .fixed .bp3-collapse .bp3-button {
background-color: #1890ff;
color: rgba(255, 255, 255, 0.85);
}
.bp3-dark .openBtn .bp3-button,
.bp3-dark .bp3-callout,
.bp3-dark .bp3-control .bp3-control-indicator,
.bp3-dark #translate-panel textarea,
.bp3-dark #translate-panel .bp3-card,
.bp3-dark .bp3-control:hover .bp3-control-indicator {
border: 1px solid #303030;
background-color: #141414;
background-image: none;
color: rgba(255, 255, 255, 0.85);
}
.bp3-dark .bp3-control:hover .bp3-control-indicator {
border: 1px solid #1890ff;
}
#translate-panel .bp3-control input:checked ~ .bp3-control-indicator {
display: inline-flex;
align-items: center;
}
body.bp3-dark,
.bp3-dark .bp3-popover .bp3-popover-content,
.bp3-popover.bp3-dark .bp3-popover-content,
.bp3-dark .bp3-menu {
background: #1f1f1f;
color: rgba(255, 255, 255, 0.85);
} |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
写了个白一点的样式。 截图预览
代码#popper-container {
width: 400px;
}
.bp3-elevation-4 {
border-radius: 8px;
box-shadow: 0 2px 22px 0 rgb(15 35 95 / 11%);
}
#translate-panel {
background: white;
padding: 5px 7px 10px 7px;
border-radius: 8px;
}
#translate-panel .header {
border: 0;
}
#translate-panel button[title="音视频翻译"],
#translate-panel button[title="图片翻译"],
#translate-panel button[title="语音翻译"],
.bp3-heading,
.quick-links {
display: none;
}
.result-block .legend .source {
font-size: 14px;
line-height: 30px;
}
.result-block {
font-size: 17px;
padding: 10px 12px 6px 10px;
box-shadow: none;
}
.result-block:hover {
background-color: #F7F7F8;
}
.result-block .common-result {
font-family: 'pingfang sc';
}
.result-block .common-result .dict > p {
position: relative;
margin: 10px 0;
}
.result-block .phonetic {
font-weight: bold;
}
.result-block .dict-pos {
/* font-style: italic; */
font-size: 11px;
padding: 1px;
background-color: #F7F7F8;
border-radius: 4px;
position: absolute;
right: 0px;
bottom: 0px;
} |
Beta Was this translation helpful? Give feedback.
7 replies
-
|
已经试出来了，很好看！ |
Beta Was this translation helpful? Give feedback.
-
啊…我也是刚试出来是哪行，不过你自己能搞定就挺好。 查看选择器的方法挺简单的，在唤出翻译面板后，按
然后按下面这样写就可以配置自己想隐藏的元素了。 #translate-panel button[title="音视频翻译"],
#translate-panel button[title="图片翻译"],
#translate-panel button[title="语音翻译"],
.bp3-heading,
.你想隐藏的类名1,
.类名2,
.quick-links {
display: none;
} |
Beta Was this translation helpful? Give feedback.
-
|
感谢这么详细的解答，这个很有帮助啊！我突然觉得我可以去折腾简悦的 css 了 |
Beta Was this translation helpful? Give feedback.
-
其实要精确选到你想要的元素，可能还得到 F12 开调试面板里面详细看下元素的信息， 不过也有比较复杂的情况，比如两个元素共用一个类，但是你只想 |
Beta Was this translation helpful? Give feedback.
-
|
加了点模糊效果 #popper-container {
width: 400px;
}
.bp3-elevation-4 {
border-radius: 8px;
box-shadow: 0 2px 22px 0 rgb(15 35 95 / 11%);
}
#translate-panel {
padding: 5px 7px 10px 7px;
border-radius: 8px;
}
#translate-panel .quick-settings {
background: rgba(255, 255, 255, 0.5);
border-radius: 7px;
box-shadow: none;
padding: 5px 14px 4px 14px;
}
#translate-panel > div.fixed > div.bp5-collapse > div > div > div:nth-child(2){
color: #006400;
}
#translate-panel > div.fixed > div.bp5-collapse > div > div > div:nth-child(3){
color: #363636;
}
#translate-panel > div.fixed > div.bp5-collapse > div > div > div:nth-child(5){
color: #363636;
}
.bp3-icon.bp3-icon-arrow-right{
margin:0px 5px !important;
}
#translate-panel > div.fixed > div.bp5-collapse{
padding-right:9px;
padding-left:9px;
}
#translate-panel .header {
border: 0;
}
.bp3-button:not([class*=bp5-intent-]){
box-shadow: none !important;
border-radius: 5px !important;
}
.bp3-button.bp3-small, .bp3-small .bp3-button{
padding: 4px 7px !important;
}
.bp3-popover, .bp3-popover .bp3-popover-content{
border-radius: 8px;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
background: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(7px);
}
/*文本框*/
#translate-panel .query-text textarea.bp3-input{
border-radius: 8px;
background: rgba(255, 255, 255, 0.5);
box-shadow: none;
}
.bp5-button.bp5-intent-primary{
border-radius: 8px;
background: rgba(90, 100, 120, 0.7);
box-shadow: none;
height: 22px;
width: 22px;
}
.bp5-button.bp5-intent-primary:hover{
background: rgba(90, 100, 120, 0.2);
box-shadow: none;
}
/*搜索框*/
.bp3-input-group, .bp3-input-group .bp3-input{
border-radius: 7px;
box-shadow:none;
background: rgba(255, 255, 255, 0.7);
}
.bp3-input-group, .bp3-input-group .bp3-input:hover{
background: rgba(255, 255, 255, 0);
}
/*菜单*/
.bp3-select-popover .bp3-menu{
background: rgba(255, 255, 255, 0);
padding-right: 5px;
overflow-y: auto;
overflow-x: hidden;
}
/*滚动条*/
.bp3-select-popover .bp3-menu::-webkit-scrollbar{
border-radius: 4px;
width: 10px;
}
.bp3-select-popover .bp3-menu::-webkit-scrollbar-track{
background: rgba(255, 255, 255, 0);
border-radius: 5px;
}
.bp3-select-popover .bp3-menu::-webkit-scrollbar-track:hover{
background: rgba(255, 255, 255, 0.5);
}
.bp3-select-popover .bp3-menu::-webkit-scrollbar-thumb{
background: rgba(70, 70, 70, 0.5);
border-radius: 5px;
height: 30px;
}
.bp3-select-popover .bp3-menu::-webkit-scrollbar-thumb:hover{
background: rgba(70, 70, 70, 0.8);
}
.bp3-select-popover .bp3-menu::-webkit-scrollbar-button{
background: rgba(255, 255, 255, 0);
height: 5px;
}
#translate-panel > div.fixed > div.bp5-collapse > div > div > div:nth-child(3) > span,
#translate-panel > div.fixed > div.bp5-collapse > div > div > a:nth-child(7),
#translate-panel > div.fixed > div.bp5-collapse > div > div > div.bp5-radio-group,
#translate-panel > div.fixed > div.bp5-collapse > div > div > div:nth-child(2) > label:nth-child(4),
#translate-panel > div.fixed > div.bp5-collapse > div > div > div:nth-child(2) > label:nth-child(6),
#translate-panel > div.fixed > div.bp5-collapse > div > div > div:nth-child(2) > label:nth-child(7),
#translate-panel > div.fixed > div.bp5-collapse > div > div > div:nth-child(2) > label:nth-child(8),
#translate-panel > div.fixed > div.bp5-collapse > div > div > div:nth-child(2) > label:nth-child(9),
#translate-panel > div.fixed > div.bp5-collapse > div > div > div:nth-child(2) > label:nth-child(10),
#translate-panel > div.fixed > div.bp5-collapse > div > div > div:nth-child(2) > label:nth-child(11),
#translate-panel > div.fixed > div.bp5-collapse > div > div > div:nth-child(2) > label:nth-child(12),
#translate-panel button[title="音视频翻译"],
#translate-panel button[title="图片翻译"],
#translate-panel button[title="语音翻译"],
.bp3-heading,
.quick-links,
.bp3-popover-arrow,
#popper-container .arrow::before {
display: none;
}
.result-block .legend .source {
font-size: 14px;
line-height: 30px;
}
.result-block {
font-size: 17px;
padding: 10px 12px 6px 10px;
box-shadow: none;
}
.result-block .common-result {
font-family: 'pingfang sc';
font-style: bolder;
font-size: 18px;
color: #4F4F4F;
}
.result-block .common-result .dict > p {
position: relative;
margin: 10px 0;
}
.result-block .phonetic {
font-weight: 700;
}
.result-block .dict-pos {
font-family: 'PingFang SC';
font-size: 12px;
color: #871F78;
right: 0px;
bottom: 0px;
}
#translate-panel{
background: rgba(255, 255, 255, 0.7);
border-style:none;
border-radius: 8px;
}
.bp3-card.bp3-elevation-0.result-block{
background: rgba(255, 255, 255, 0.5);
border-style:none;
border-radius: 7px;
}
#popper-container {
background: rgba(180, 180, 180, 0);
border-style:none;
backdrop-filter: blur(7px);
} |
Beta Was this translation helpful? Give feedback.
-
|
冷淡风格😊 #translate-panel{border-radius:6px}#translate-panel .bp3-card{-webkit-box-shadow:unset}#popper-container{border-radius:6px}#popper-container.bp3-elevation-4{-webkit-box-shadow:0 0 0 0px rgb(16 22 26 / 10%),0 0px 0px rgb(16 22 26 / 20%),0 5px 15px 1px rgb(16 22 26 / 20%) !important}#popper-container .arrow{display:none !important}#translate-panel .bp3-heading{display:none}#translate-panel .fixed{margin-bottom:0px}#translate-panel .header{border:0px}.bp3-dark #translate-panel{}#translate-btn .btn-icon{width:22px;height:22px;background-image:url(chrome-extension://oikmahiipjniocckomdccmplodldodja/google.ico)}#translate-btn .bp3-button{background-color:unset !important;-webkit-box-shadow:unset !important;box-shadow:unset !important;background-color:unset !important;background-image:unset !important}
|
Beta Was this translation helpful? Give feedback.
0 replies
-
|
#popper-container[data-popper-placement^='bottom'] .arrow::before {
border-left: 2px solid #000000;
border-top: 2px solid #000000;
}
.bp3-elevation-4 {
border: 1px solid #ececec;
border-radius: 8px;
box-shadow: 6px 6px 18px -6px #33333347;
}
#translate-panel {
/* 浅色模式下的面板样式 */
background-color: #ffffff;
border-radius: 8px;
font-family: 'HarmonyOS Sans SC', 'HarmonyOS', system-ui, —apple-system,
Segoe UI, Rototo, Helvetica, Arial, sans-serif !important;
}
.result-block {
background: #064bb30a;
box-shadow: none;
padding: 5px 10px;
}
.common-result {
font-size: 16px;
}
#translate-panel .header {
border: none;
}
.bp3-dark #translate-panel {
/* 深色模式下的面板样式 */
} |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
纯净、紧凑 | Pure, Compact | ピュア、コンパクト | 순수한、콤팩트
#popper-container {
border-radius: 5px;
box-shadow: none;
border: 1px solid #ccc;
overflow: hidden;
}
#popper-container #translate-panel {
position: relative;
padding-top: 10px;
background-color: #fff;
}
#popper-container #translate-panel .fixed {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 1;
margin-bottom: 0;
}
#popper-container #translate-panel .header {
padding: 2px;
border-bottom-color: transparent;
}
/* 调整“固定、图片翻译、语言翻译”等按钮 */
#popper-container #translate-panel .header .left {
order: 2;
margin-right: 14px;
}
#popper-container #translate-panel .header .left .switch-pin {
position: absolute;
right: 0;
top: 0;
z-index: 9;
}
#popper-container #translate-panel .header .left .switch-pin button {
min-width: 20px;
}
/* 调整“拖拽” */
#popper-container #translate-panel .header .drag-block {
order: 1;
height: 8px;
}
#popper-container #translate-panel .header .left,
#popper-container #translate-panel .header .right {
margin-top: -4px;
}
/* “消息、收藏、设置、关闭”工具栏显示在左侧 */
#popper-container #translate-panel .header .right {
order: 0;
}
#popper-container #translate-panel .header .left button,
#popper-container #translate-panel .header .right button {
transform: scale(0.8);
min-width: 16px;
}
/* 翻译内容区 */
#popper-container #translate-panel .body .result-block {
background-color: transparent;
box-shadow: none;
}
/* 不遮挡“固定”按钮 */
#popper-container #translate-panel .body .result-block .legend div:nth-child(2) {
margin-right: 10px;
}
/* 隐藏“收起”按钮 */
#popper-container #translate-panel .body .result-block .legend div:nth-child(2) button:nth-child(1) {
display: none;
}
/* 默认显示“复制详细结果”、“查看详细结果”按钮 */
#popper-container #translate-panel .body .result-block .legend .bp3-button {
visibility: visible;
}
/* 修复“选择语言”排版错乱异常 */
#popper-container #translate-panel .body .result-block .legend .legend-left .lang-select > span {
display: block;
}
#popper-container #translate-panel .body .result-block .legend .legend-left .lang-select > span > div {
display: flex;
align-items: center;
}“通用”/“通知”未取消，
可通过样式隐藏一些按钮： #popper-container #translate-panel .header .right {
display: none;
}
#popper-container #translate-panel .header .left > button {
display: none;
}
#popper-container #translate-panel .body .quick-links {
display: none;
} |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
@lmk123 您好，能否采用 BEM 对整个面板进行重构？ .translate-panel.translate-panel--pin # 面板、固定状态
.translate-header
.start
.translate__toolbox # 面板上的按钮
.translate__pin # 固定面板
.translate__screenshot # 截图翻译按钮
.translate__page-content # 全文翻译
.translate__streaming # 音视频翻译
.translate__image # 图片翻译
.translate__microphone # 麦克风录入翻译
.translate__history # 历史记录
.center
.translate__drag-panel # 拖拽移动面板
.end
.translate__toolbox # 面板上的按钮
.translate__bookmark # 收藏夹
.translate__settings # 配置
.translate__close # 关闭
.translate-container
.translate-result__head
.start
.translate-result__title
.translate-swap-languages__popover # 选择语言
.translate-swap-languages__wrapper
.translate-swap-languages__filter
.translate-swap-languages__title
.translate-swap-languages__list
.translate-swap-languages__item
.end
.translate-result__toolbox
.translate-result__speaker # 朗读
.translate-result__collapse # 折叠/展开
.translate-result__copy # 复制翻译结果
.translate-result__detail # 查看翻译详情
.translate-result__body
.translate-result__phonetic # 音标
.translate-result__phonetic-item
.translate-result__content # 翻译内容
.translate-result__section
.translate-footer
.translate-search # 快捷链接 |
Beta Was this translation helpful? Give feedback.
-
|
#translate-panel {
/* 看着改的，样式不对开深色模式 */
background:none !important;
}
#popper-container{
backdrop-filter: blur(5px);
border-radius:1rem;
background-color: #00000073 !important;
/*弹窗颜色，背景模糊 firefox >= 103支持*/
}
.source-text{
color:white;
}
.phonetic-item{
/*音标*/
opacity:.5;
color:white;
}
.phonetic-item > span > a{
color:#c3ff4c;
}
.result-block h6{
/*"谷歌翻译" 文字*/
display:none !important;
}
.fixed{
margin:0 !important;
}
.header{
/*头*/
border-bottom:none !important;
}
.result-block{
padding: .2rem .2rem .2rem .5rem !important;
border-radius:.5rem;
background:#00000057 !important;
/*结果框的背景色*/
}
.result-block:hover a{
/*鼠标移到结果框显示链接下划线*/
text-decoration:underline !important;
}
button[title="添加到收藏夹"],button[title="快捷设置"]{
/*隐藏两个按钮*/
opacity:0;
transition: all .1s ease-out;
}
.dict span{
/*副词名词*/
font-size:.5rem;
opacity:.8;
margin:0 .5rem 0 0;
}
.dict a{
/*链接单词*/
color:white !important;
font-size:900;
text-decoration:none !important;
margin:0 .2rem;
font-weight:bold;
}
.dict p{
/*翻译结果*/
font-weight:bold !important;
color:white;
}
.right:hover button{
/*触碰时显示*/
opacity:1;
}
.arrow{
/*浮动图标*/
display:none !important;
}
#popper-container svg{
color:white !important;
}
.general-result p{
/*p*/
font-weight:bold !important;
color:white !important;
}
.dict span{
/*你猜*/
color:white !important;
} |
Beta Was this translation helpful? Give feedback.
2 replies
-
|
i like this style😃 |
Beta Was this translation helpful? Give feedback.
-
|
做了一些小修改：
#translate-panel {
/* 看着改的，样式不对开深色模式 */
background: none !important;
}
#popper-container {
backdrop-filter: blur(5px);
border-radius: 1rem;
background-color: #00000073 !important;
/*弹窗颜色，背景模糊 firefox >= 103支持*/
}
.source-text {
color: white;
}
.phonetic-item {
/*音标*/
opacity: 0.5;
color: white;
}
.phonetic-item > span > a {
color: #c3ff4c;
}
.result-block h6 {
/*"谷歌翻译" 文字*/
display: none !important;
}
.fixed {
margin: 0 !important;
}
.header {
/*头*/
border-bottom: none !important;
}
.result-block {
padding: 0.2rem 0.2rem 0.2rem 0.5rem !important;
border-radius: 0.5rem;
background: #00000057 !important;
/*结果框的背景色*/
}
.result-block:hover a {
/*鼠标移到结果框显示链接下划线*/
text-decoration: underline !important;
}
button[title="添加到收藏夹"],
button[title="快捷设置"] {
/*隐藏两个按钮*/
opacity: 0;
transition: all 0.1s ease-out;
}
.dict span {
/*副词名词*/
font-size: 0.5rem;
opacity: 0.8;
margin: 0 0.5rem 0 0;
}
.dict a {
/*链接单词*/
color: white !important;
font-size: 900;
text-decoration: none !important;
margin: 0 0.2rem;
font-weight: bold;
}
.dict p {
/*翻译结果*/
font-weight: bold !important;
color: white;
}
.right:hover button {
/*触碰时显示*/
opacity: 1;
}
.arrow {
/*浮动图标*/
display: none !important;
}
#popper-container svg {
color: white !important;
}
.general-result p {
/*p*/
font-weight: bold !important;
color: white !important;
}
.dict span {
/*你猜*/
color: white !important;
}
/* Hide body scrollbar for Chrome */
.body::-webkit-scrollbar {
display: none;
}
/* Hide body scrollbar for IE, Edge and Firefox */
.body {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.drag-block {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
} |
Beta Was this translation helpful? Give feedback.
-
|
从 @Mrbunker 的白色主题修改来的，把能精简的都精简了 #popper-container {
width: 400px;
}
.bp3-elevation-4 {
border-radius: 8px;
box-shadow: 0 2px 22px 0 rgb(15 35 95 / 11%);
}
#translate-panel {
padding: 5px 7px 10px 7px;
border-radius: 8px;
}
#translate-panel .header {
border: 0;
}
#translate-panel button[title="音视频翻译"],
#translate-panel button[title="图片翻译"],
#translate-panel button[title="语音翻译"],
.bp3-heading,
.quick-links {
display: none;
}
.result-block .legend {
font-size: 14px;
line-height: 30px;
display: none;
}
.result-block {
font-size: 17px;
padding: 10px 12px 6px 10px;
box-shadow: none;
}
.result-block .common-result {
font-family: 'PingFangSC-Semibold';
font-style: bolder;
font-size: 18px;
color: #238E68;
}
.result-block .common-result .dict > p {
position: relative;
margin: 10px 0;
}
.result-block .phonetic {
font-weight: bold;
}
.result-block .dict-pos {
/* font-style: italic; */
font-size: 11px;
color: #871F78;
padding: 1px;
background-color: #F7F7F8;
border-radius: 4px;
right: 0px;
bottom: 0px;
}
div.fixed {
display: none;
}
#translate-panel, .bp3-card.bp3-elevation-0.result-block, .bp3-collapse, .bp3-collapse-body, .dict, .common-result {
background: rgba(255, 255, 255, 0);
border-style:none;
}
#popper-container {
background: rgba(180, 180, 180, 0);
border-style:none;
backdrop-filter: blur(12px);
} |
Beta Was this translation helpful? Give feedback.
0 replies
-
极简模式，同时兼容黑白主题
可固定、可抓取 #translate-panel {
font-family: Comic Sans MS,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif!important;
background-color:#2f343c00;
}
#translate-panel .body .bp3-card:first-child {
margin: 0px;
}
#translate-panel .header .right,
#translate-panel .bp4-heading,
#translate-panel .api-ico,
#translate-panel .legend,
#translate-panel > div.body > div.quick-links{
display: none;
}
#translate-panel .header {
order: 1;
height: 0px;
}
#translate-panel .header .drag-block {
order: 1;
height: 8px;
}
#translate-panel .header .left .switch-pin {
position: absolute;
display: block;
right: 5px;
top: 5px;
z-index: 9;
}
#translate-panel .body {
margin-top: -10px;
}
#translate-panel .header .left .switch-pin .bp4-active,
.bp4-card {
background-color:#2f343c00 !important;
box-shadow: inset 0 0 0 0px hsl(0deg 0% 100% / 20%) !important;
} |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
修复 Mac 下的边框和圆角 .bp4-dark #popper-container,
.bp4-dark #translate-panel,
#popper-container{
border-radius: 8px !important;
}
#translate-panel {
font-family: Comic Sans MS,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif!important;
background-color:#2f343c00;
}
#translate-panel .body .bp3-card:first-child {
margin: 0px;
}
#translate-panel .header .right,
#translate-panel .bp4-heading,
#translate-panel .api-ico,
#translate-panel .legend,
#translate-panel > div.body > div.quick-links{
display: none;
}
#translate-panel .header {
order: 1;
height: 0px;
border-width: 0px;
}
#translate-panel .header .drag-block {
order: 1;
height: 8px;
}
#translate-panel .header .left .switch-pin {
position: absolute;
display: block;
right: 5px;
top: 5px;
z-index: 9;
}
#translate-panel .body {
margin-top: -10px;
}
#translate-panel .header .left .switch-pin .bp4-active,
.bp4-card {
background-color:#2f343c00 !important;
box-shadow: inset 0 0 0 0px hsl(0deg 0% 100% / 20%) !important;
} |
Beta Was this translation helpful? Give feedback.
-
|
:root {
--panel-color: rgba(255, 255, 255, 0.45);
--text-color: currentColor;
}
#translate-panel {
background: none !important;
}
#popper-container {
backdrop-filter: blur(5px);
border-radius: 1rem;
background-color: var(--panel-color) !important;
color: var(--text-color);
}
.source-text {
color: black;
}
.phonetic-item {
opacity: 0.5;
color: black;
}
.phonetic-item > span > a {
color: #c3ff4c;
}
.result-block h6 {
display: none !important;
}
.fixed {
margin: 0 !important;
}
.header {
border-bottom: none !important;
}
.result-block {
padding: 0.2rem 0.2rem 0.2rem 0.5rem !important;
border-radius: 0.5rem;
background: var(--panel-color) !important;
color: var(--text-color);
}
.result-block:hover a {
text-decoration: underline !important;
}
button[title="添加到收藏夹"],
button[title="快捷设置"] {
opacity: 0;
transition: all 0.1s ease-out;
}
.dict span {
font-size: 0.5rem;
opacity: 0.8;
margin: 0 0.5rem 0 0;
color: var(--text-color);
}
.dict a {
color: black !important;
font-size: 900;
text-decoration: none !important;
margin: 0 0.2rem;
font-weight: bold;
}
.dict p {
font-weight: bold !important;
color: black;
}
.right:hover button {
opacity: 1;
}
.arrow {
display: none !important;
}
#popper-container svg {
color: black !important;
}
.general-result p {
font-weight: bold !important;
color: black !important;
}
.dict span {
color: black !important;
}
.body::-webkit-scrollbar {
display: none;
}
.body {
-ms-overflow-style: none;
scrollbar-width: none;
}
.drag-block {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
} |
Beta Was this translation helpful? Give feedback.
2 replies
-
|
稍微优化了一点：
#translate-panel {
/* 浅色模式下的面板样式 */
}
.bp4-dark #translate-panel {
/* 深色模式下的面板样式 */
}
#translate-panel {
padding-bottom: 0;
}
#translate-panel .query-text {
display: none !important;
}
#translate-panel .legend {
opacity: 0;
height: 0px;
transition: all 0.4s;
}
#translate-panel:hover .legend {
opacity: 1;
height: 15px;
}
#translate-panel .quick-links {
display: flex;
justify-content: flex-end;
height: 0px;
opacity: 0;
transition: all 0.4s;
}
#translate-panel:hover .quick-links {
height: 22px;
opacity: 1;
}
#translate-panel .quick-links a{
color: #aaa;
font-size: 12px;
margin: 0 !important;
transform: scale(0.8);
}
#translate-panel .result-block {
margin: 0;
}
#translate-panel .header {
box-sizing:border-box;
height: 0px;
transition: height 0.4s;
padding: 0 6px 0 8px;
}
#translate-panel:hover .header {
height: 32px;
}
#translate-panel .header .left, #translate-panel .header .right {
opacity: 0;
transition: opacity 0.3s;
}
#translate-panel:hover .header .left, #translate-panel:hover .header .right{
opacity: 1;
}
#translate-panel .header .switch-pin .bp4-icon {
color: #aaa;
}
#translate-panel .header .left {
opacity: 0;
}
#translate-panel .header:hover .left {
opacity: 1;
}
#translate-panel .bp4-card {
-webkit-box-shadow: none;
box-shadow: none;
}
#translate-btn .btn-icon {
filter: invert(1);
width: 16px;
height: 16px;
margin-bottom: 3px;
}
.bp4-dark #translate-btn .btn-icon {
/* 深色模式下的 icon 样式 */
filter: none;
}
#translate-btn .bp4-button {
background: rgba(0,0,0,0.7);
border-radius: 7px;
width: 24px;
height: 24px;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
overflow: hidden;
min-width: unset;
min-height: unset;
}
:root {
--text-color: currentColor;
}
#translate-panel {
background: none !important;
}
#popper-container {
backdrop-filter: blur(5px);
border-radius: 8px;
background-color: rgba(0, 0, 0, 0.7) !important;
color: var(--text-color);
}
.source-text {
color: #aaa;
}
.phonetic-item {
opacity: 0.5;
color: #aaa;
}
.phonetic-item > span > a {
color: #c3ff4c;
}
.result-block h6 {
display: none !important;
}
.fixed {
margin: 0 !important;
}
.header {
border-bottom: none !important;
}
.result-block {
padding: 4px 4px 4px 4px !important;
border-radius: 8px;
background: var(--panel-color) !important;
color: var(--text-color);
}
.result-block:hover a {
text-decoration: underline !important;
}
.dict span {
font-size: 0.5rem;
opacity: 0.8;
margin: 0 0.5rem 0 0;
color: var(--text-color);
}
.dict a {
color: black !important;
font-size: 900;
text-decoration: none !important;
margin: 0 0.2rem;
font-weight: bold;
}
.dict p {
font-weight: bold !important;
color: #aaa;
}
.arrow {
display: none !important;
}
#popper-container svg {
color: #999 !important;
}
.general-result p {
font-weight: bold !important;
color: #ccc !important;
}
.dict span {
color: #aaa!important;
}
.body::-webkit-scrollbar {
display: none;
}
.body {
-ms-overflow-style: none;
scrollbar-width: none;
}
.drag-block {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
} |
Beta Was this translation helpful? Give feedback.
-
|
这个鼠标悬浮弹出的功能好好，请问如果我只需要单独这个功能，该保留哪些代码呢？ |
Beta Was this translation helpful? Give feedback.
-
|
根据liu-lihao的改了一下，去掉了大部分hover。 #translate-panel {
/* 浅色模式下的面板样式 */
}
.bp4-dark #translate-panel {
/* 深色模式下的面板样式 */
.legend .bp4-minimal[title="收起"],
.bp4-heading,
.api-ico {
display: none !important;
}
}
#translate-panel {
padding-bottom: 0;
}
#translate-panel .query-text {
display: none !important;
}
#translate-panel .legend {
opacity: 1;
height: 15px;
transition: all 0.4s;
}
/*#translate-panel:hover .legend {*/
/* opacity: 1;*/
/* height: 15px;*/
/*}*/
#translate-panel .quick-links {
display: flex;
justify-content: flex-end;
height: 22px;
opacity: 1;
transition: all 0.4s;
}
/*#translate-panel:hover .quick-links {*/
/* height: 22px;*/
/* opacity: 1;*/
/*}*/
#translate-panel .quick-links a{
color: #aaa;
font-size: 12px;
margin: 0 !important;
transform: scale(0.8);
}
#translate-panel .result-block {
margin: 0;
}
#translate-panel .header {
box-sizing:border-box;
height: 35px;
transition: height 0.4s;
padding: 0 6px 0 8px;
}
/*#translate-panel:hover .header {*/
/* height: 32px;*/
/*}*/
#translate-panel .header .left, #translate-panel .header .right {
opacity: 1;
transition: opacity 0.3s;
}
/*#translate-panel:hover .header .left, #translate-panel:hover .header .right{*/
/* opacity: 1;*/
/*}*/
#translate-panel .header .switch-pin .bp4-icon {
color: #aaa;
}
#translate-panel .header .left {
opacity: 1;
}
/*#translate-panel .header:hover .left {*/
/* opacity: 1;*/
/*}*/
#translate-panel .bp4-card {
-webkit-box-shadow: none;
box-shadow: none;
}
#translate-btn .btn-icon {
filter: invert(1);
width: 16px;
height: 16px;
margin-bottom: 3px;
}
.bp4-dark #translate-btn .btn-icon {
/* 深色模式下的 icon 样式 */
filter: none;
}
#translate-btn .bp4-button {
background: rgb(0, 0, 0);
border-radius: 7px;
width: 24px;
height: 24px;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
overflow: hidden;
min-width: unset;
min-height: unset;
}
:root {
--text-color: currentColor;
}
#translate-panel {
background: none !important;
}
#popper-container {
/*backdrop-filter: blur(5px);*/
border-radius: 8px;
background-color: rgb(0, 0, 0) !important;
color: var(--text-color);
}
.source-text {
color: #aaa;
}
.phonetic-item {
opacity: 0.5;
color: #aaa;
}
.phonetic-item > span > a {
color: #c3ff4c;
}
.result-block h6 {
display: none !important;
}
.fixed {
margin: 0 !important;
}
.header {
border-bottom: none !important;
}
.result-block {
padding: 4px 4px 4px 4px !important;
border-radius: 8px;
background: var(--panel-color) !important;
color: var(--text-color);
}
/*.result-block:hover a {*/
/* text-decoration: underline !important;*/
/*}*/
.dict span {
font-size: 0.5rem;
opacity: 0.8;
margin: 0 0.5rem 0 0;
color: var(--text-color);
}
.dict a {
color: #fefefe !important;
font-size: 900;
text-decoration: none !important;
margin: 0 0.2rem;
font-weight: bold;
}
.dict p {
font-weight: bold !important;
color: #aaa;
}
.arrow {
display: none !important;
}
#popper-container svg {
color: #999 !important;
}
.general-result p {
font-weight: bold !important;
color: #ccc !important;
}
.dict span {
color: #aaa!important;
}
.body::-webkit-scrollbar {
display: none;
}
.body {
-ms-overflow-style: none;
scrollbar-width: none;
}
.drag-block {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.result-block:has(.error) {
display: none;
} |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
改了一个md3样式的 https://github.com/GuMengYu/custom_css_collection/blob/main/hcfy_md3.css
|
Beta Was this translation helpful? Give feedback.
0 replies
-
|
粘贴到外观 - 自定义面板样式 |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
#translate-panel { |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
花了点时间，从@liu-lihao的作品里学习了一些，做了一套带文本框的动态主体。 |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
牛啊牛啊 |
Beta Was this translation helpful? Give feedback.
-
|
根据自己的需求，简单的改了下。内嵌模式隐藏输入框，独立窗口模式让输入框占满剩余空间：
#translate-panel .fixed {
flex-grow: 1;
display: flex;
flex-flow: column;
}
#translate-panel .query-text {
flex-grow: 1;
display: flex;
}
#translate-panel .body {
flex-grow: 0;
}
#popper-container .query-text{
display: none;
} |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
|
Beta Was this translation helpful? Give feedback.
3 replies
-
|
试一下吧，缺功能可以补全 或者不喜欢这个样式可以只保留放大复制按钮的部分： |
Beta Was this translation helpful? Give feedback.
-
|
谢谢！非程序员感受到了社区的温暖😆 |
Beta Was this translation helpful? Give feedback.
-
|
我的解决方法是让右边的三个元素靠左. 在翻译一个单词时, 目光在左边, 而复制却在右边, 有点割裂, 所以我将他们放到在左边. #translate-panel {
/* 浅色模式下的面板样式 */
.result-block .legend {
justify-content: start;
}
}
.bp5-dark #translate-panel {
/* 深色模式下的面板样式 */
.result-block .legend {
justify-content: start;
}
} |
Beta Was this translation helpful? Give feedback.
-
|
写了一个极简风的样式。
#popper-container {
/* 浅色模式弹出窗体 */
backdrop-filter: blur(5px);
border-radius: 12px;
box-shadow: 1px 1px 15px 1px rgb(15 35 95 / 12%);
}
.bp5-dark #popper-container {
/* 深色模式弹出窗体 */
box-shadow: none;
}
/* ------------------------------------------------------ */
#translate-panel {
/* 浅色模式下的面板样式 */
backdrop-filter: blur(5px);
padding: 0px 8px 8px 8px;
border-radius: 12px;
background: white;
.header {
/* 标题 */
padding-top: 7px;
}
.query-text textarea.bp3-input {
/*浅色模式文本框*/
box-shadow: 0 2px 7px 0 rgb(15 35 95 / 10%);
background: rgb(0 0 0 / 0%);
border-radius: 6px;
font-size: 11px !important;
}
.bp5-elevation-0 {
/* 翻译结果卡片 */
border-radius: 6px;
box-shadow: 0px 1px 10px 0px rgb(15 35 95 / 10%);
padding: 5px 5px 5px 10px;
margin: 8px -4px 8px -4px;
}
.result-block h6 {
/* 翻译源名称 */
font-size: 12px !important;
//display: none !important;
}
.source {
/* 语言选项 */
/* margin-left: 0px; */
font-size: 11px !important;
opacity: 0.6;
}
.phonetic-item {
/*音标*/
opacity: 0.8;
}
.common-result {
/* 翻译内容 */
font-size: 13px;
}
.quick-links {
/* 快速链接 */
font-size: 11px;
box-shadow: none;
text-align: center;
}
.quick-links a {
/* 快速链接颜色 */
color: rgb(15 35 95 / 20%);
}
.quick-links a:hover {
/* 快速链接鼠标悬浮颜色 */
color: black;
}
}
/* ------------------------------------------------------ */
.bp5-dark #translate-panel {
/* 深色模式下的面板样式 */
.header {
/* 标题 */
padding-top: 10px;
}
.query-text textarea.bp3-input {
/*深色模式文本框*/
box-shadow: 0px 1px 5px 0 rgb(255 255 255/ 15%);
}
.bp5-elevation-0 {
/* 翻译结果卡片 */
border-radius: 6px;
box-shadow: 0 2px 15px 0 rgb(15 35 105 / 70%);
padding: 5px 5px 5px 10px;
margin: 8px -4px 8px -4px;
}
.source {
/* 语言选项 */
opacity: 0.6;
}
.quick-links a {
/* 快速链接颜色 */
color: rgb(2255 255 255 / 30%);
}
.quick-links a:hover {
/* 快速链接鼠标悬浮颜色 */
color: white;
}
}
/* ------------------------------------------------------ */
/* 隐藏滚动条 */
.body::-webkit-scrollbar {
/* Hide body scrollbar for Chrome */
display: none;
}
.body {
/* Hide body scrollbar for IE, Edge and Firefox */
-ms-overflow-style: none;
/* IE and Edge */
scrollbar-width: none;
/* Firefox */
}
.drag-block {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
} |
Beta Was this translation helpful? Give feedback.
6 replies
-
|
妈呀这个真好看 |
Beta Was this translation helpful? Give feedback.
-
哈哈哈 |
Beta Was this translation helpful? Give feedback.
-
喜欢就好 |
Beta Was this translation helpful? Give feedback.
-
|
好看，完整，建议直接内置 |
Beta Was this translation helpful? Give feedback.
-
|
确实美观 |
Beta Was this translation helpful? Give feedback.
-
|
在 sinspired 的审美基础上做了点小小的个人理解，代码和ui都更紧凑了一点。 /* 浮窗样式 */
#popper-container {
border-radius: 10px;
textarea {
resize: auto !important; /* 允许输入框缩放 */
}
}
/* 翻译面板 */
#translate-panel {
padding: 10px;
border-radius: 10px;
background: #00000007;
.fixed {
margin: 0;
flex-grow: 1;
display: flex;
flex-flow: column;
> div {
padding: 0;
margin-bottom: 10px;
}
/* 标题栏 */
.header {
border-bottom: 2px solid #7777;
}
/* 配置栏 */
.bp5-collapse:not([style^='height']) {
margin-bottom: 0;
}
/* 文本框 */
.query-text {
flex-grow: 1;
display: flex;
flex-flow: column;
textarea {
min-width: 100%;
padding: 5px;
border-radius: 10px;
resize: none; /* 禁止输入框缩放 */
}
}
}
.body {
padding: 0;
/* 卡片防挤压 */
flex-grow: 0;
/* 快速链接 */
.quick-links {
font-size: 0.8em;
text-align: center;
a {
color: #666;
}
}
}
/* 内容卡片 */
.bp5-card {
padding: 10px;
border-radius: 10px;
}
/* 取消所有div阴影 */
div {
box-shadow: none;
}
}
/* 隐藏滚动条 */
.body {
scrollbar-width: none; /* Firefox */
::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
} |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
在 @sinspired 的基础上改的，改了原来丑丑的图标，可以调整宽度自动折行 #popper-container {
/* 浅色模式弹出窗体 */
backdrop-filter: blur(5px);
border-radius: 12px;
box-shadow: 1px 1px 15px 1px rgb(15 35 95 / 12%);
}
.bp5-dark #popper-container {
/* 深色模式弹出窗体 */
box-shadow: none;
}
/* ------------------------------------------------------ */
#translate-panel {
/* 浅色模式下的面板样式 */
backdrop-filter: blur(5px);
padding: 0px 8px 8px 8px;
border-radius: 12px;
background: white;
.header {
/* 标题 */
padding-top: 7px;
}
.query-text textarea.bp3-input {
/*浅色模式文本框*/
box-shadow: 0 2px 7px 0 rgb(15 35 95 / 10%);
background: rgb(0 0 0 / 0%);
border-radius: 6px;
font-size: 13px !important;
}
.bp5-elevation-0 {
/* 翻译结果卡片 */
border-radius: 6px;
box-shadow: 0px 1px 10px 0px rgb(15 35 95 / 10%);
padding: 5px 5px 5px 10px;
margin: 8px -4px 8px -4px;
}
.result-block h6 {
/* 翻译源名称 */
font-size: 12px !important;
//display: none !important;
}
.source {
/* 语言选项 */
/* margin-left: 0px; */
font-size: 11px !important;
opacity: 0.6;
}
.phonetic-item {
/*音标*/
opacity: 0.8;
}
.common-result {
/* 翻译内容 */
font-size: 13px;
}
.quick-links {
/* 快速链接 */
font-size: 11px;
box-shadow: none;
text-align: center;
}
.quick-links a {
/* 快速链接颜色 */
color: rgb(15 35 95 / 80%);
}
.quick-links a:hover {
/* 快速链接鼠标悬浮颜色 */
color: black;
}
}
/* ------------------------------------------------------ */
.bp5-dark #translate-panel {
/* 深色模式下的面板样式 */
.header {
/* 标题 */
padding-top: 10px;
}
.query-text textarea.bp3-input {
/*深色模式文本框*/
box-shadow: 0px 1px 5px 0 rgb(255 255 255/ 15%);
}
.bp5-elevation-0 {
/* 翻译结果卡片 */
border-radius: 6px;
box-shadow: 0 2px 15px 0 rgb(15 35 105 / 70%);
padding: 5px 5px 5px 10px;
margin: 8px -4px 8px -4px;
}
.source {
/* 语言选项 */
opacity: 0.6;
}
.quick-links a {
/* 快速链接颜色 */
color: rgb(2255 255 255 / 50%);
}
.quick-links a:hover {
/* 快速链接鼠标悬浮颜色 */
color: white;
}
}
/* ------------------------------------------------------ */
/* 隐藏滚动条 */
.body::-webkit-scrollbar {
/* Hide body scrollbar for Chrome */
display: none;
}
.body {
/* Hide body scrollbar for IE, Edge and Firefox */
-ms-overflow-style: none;
/* IE and Edge */
scrollbar-width: none;
/* Firefox */
}
.drag-block {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}
/*修改图标*/
#translate-btn {
.btn-icon {
display: none;
}
.bp5-button {
height: 32px;
width: 33px;
text-align: center;
line-height: 32px;
color: rgb(255, 255, 255);
background-color: rgb(67, 149, 255);
border-radius: 2px;
cursor: pointer;
z-index: 9999999999;
background-image: unset !important;
box-shadow: unset !important;
position: absolute;
}
.bp5-button:after {
font-size: 15px;
color: rgb(255, 255, 255);
content:"译";
}
}
/*自动折行*/
#translate-panel {
.bp5-elevation-0 {
margin: 0;
}
.body {
display: flex;
flex-wrap: wrap;
column-gap: 10px;
row-gap: 10px;
}
.result-block {
min-width: 220px;
min-height: 45px;
flex: 1;
}
.external-translators {
margin-top: 5px;
display: flex;
width: 100%;
justify-content: center;
gap: 10px;
> * {
margin:0;
}
}
.quick-links {
display: flex;
width: 100%;
justify-content: center;
}
} |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
披镜前人，修而美之。仅限浅色模式。 #translate-panel {
/* 浅色模式下的面板样式 */
}
.bp5-dark #translate-panel {
/* 深色模式下的面板样式 */
}
/*面板圆角*/
.bp3-elevation-4 {
border-radius: 14px;
box-shadow: 0 2px 22px 0 rgb(15 35 95 / 20%);
}
#translate-panel {
padding: 5px 7px 10px 7px;
border-radius: 8px;
}
/*隐藏分割线*/
#translate-panel .header {
border: 0;
}
/*各种隐藏*/
#translate-panel button[title="音视频翻译"],
#translate-panel button[title="图片翻译"],
#translate-panel button[title="语音翻译"],
#translate-panel button[title="朗读"],
#translate-panel a[title="查看详细结果"],
#translate-panel button[title="添加到收藏夹"],
#translate-panel svg[data-icon="pin"],
#translate-panel .fixed div[class="bp5-collapse"],
/*#translate-panel div[class="fixed"],*/
.quick-links {
display: none;
}
/*结果框体*/
.result-block {
box-shadow: none;
margin: 0px 0px 0px 0px;
}
.bp5-collapse {
padding: 10px 0px 10px 0px;
}
/*字体*/
.result-block .common-result {
font-size: 19px;
}
/*各种背景白化*/
#translate-panel, .bp3-card.bp3-elevation-0.result-block, .bp3-collapse, .bp3-collapse-body, .dict, .common-result {
background: #f6f7f9;
border-style:none;
}
/*关掉滚动条*/
.body {
margin: 0px 20px 25px 20px;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
/*翻译按钮弹出*/
#translate-btn .bp5-button{
border-style:none;
background: #FFFFFF;
border-radius: 20px;
width: 35px;
height: 35px;
}
/*窗口*/
#popper-container.show.bp5-elevation-4{
width: 550px !important;
} |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
and others
-
划词翻译 v7.5.9 添加了一个新的选项“自定义面板样式”，可以使用 CSS 自定义面板的界面。欢迎大家在这个帖子里分享自己的自定义样式，好看的样式我会考虑直接加入到划词翻译当中。
Beta Was this translation helpful? Give feedback.
All reactions